@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/BarlowCondensed-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/BarlowCondensed-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/BarlowCondensed-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/InterTight-400-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Barlow Condensed Fallback"; src: local("Arial Narrow"), local("Arial"); size-adjust: 82%; ascent-override: 110%; descent-override: 28%; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial"); size-adjust: 96%; ascent-override: 98%; descent-override: 24%; }

/* ============================================================
   DAIDRA FOUNDATION — the quality floor every build starts from
   v1.0 · 2026-08-06 · sources: live-verified extractions in
   knowledge/websites-enterprise.md (Stripe et al.) + DESIGN.md

   HOW TO USE (per project):
   1. Copy this file into the project as the base of site.css.
   2. Skin ONLY the "BRAND SLOTS" block — fonts, hues, radius,
      heading weight. Everything below the slots is the standard;
      it should survive the skin untouched.
   3. The specimen page (index.html beside this file) shows every
      token and primitive in every state — rebuild it mentally
      against your skin before building pages.

   Rules encoded here (don't fight them):
   - Spacing lives on an 8px grid. Type lives on the clamp() scale.
   - Two easings, four durations. Nothing animates off-system.
   - Never `transition: all`. Hover moves ≥2 properties.
   - :focus-visible is a designed brand element, not a default.
   - Content never touches the viewport edge (--px gutter).
   - .section uses LONG-HAND padding (shorthand resets .wrap).
   - prefers-reduced-motion gets designed static states, not
     frozen half-animations.
   ============================================================ */

/* ----------------------------------------------------------
   1. BRAND SLOTS — the only block a project should edit
   ---------------------------------------------------------- */
:root {
  /* Type: one display face, one text face (or one variable font
     for both — preload it, font-display: block if <80KB). */
  --font-display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", sans-serif;
  --font-body: "Inter Tight", "Inter Tight Fallback", Arial, sans-serif;
  --font-mono: "Inter Tight", "Inter Tight Fallback", Arial, sans-serif;

  /* Enterprise voice = light-weight large type. 300–400 display
     weight reads expensive; 700 reads template. */
  --weight-display: 600;
  --weight-body: 400;
  --weight-medium: 500;   /* the heaviest weight most UIs need */

  /* Brand hues. --brand-h drives the neutral tint below — the
     single cheapest "expensive" trick: neutrals tinted toward the
     brand hue instead of pure gray. */
  --brand-h: 45;                       /* hue 0-360 */
  --accent: #f3d51b;
  --accent-strong: #d9261c;

  /* Geometry personality: 4px = precise/enterprise (Stripe),
     8-12px = friendly SaaS, 999px pills = consumer. Pick ONE. */
  --radius: 6px;
  --radius-lg: 8px;
}

/* ----------------------------------------------------------
   2. NEUTRALS — brand-tinted ramp (never pure gray)
   ---------------------------------------------------------- */
:root {
  --n-50:  oklch(0.985 0.004 var(--brand-h));
  --n-100: oklch(0.96  0.006 var(--brand-h));
  --n-200: oklch(0.91  0.008 var(--brand-h));
  --n-300: oklch(0.83  0.010 var(--brand-h));
  --n-500: oklch(0.60  0.020 var(--brand-h));
  --n-700: oklch(0.40  0.028 var(--brand-h));
  --n-900: oklch(0.25  0.030 var(--brand-h));
  --n-950: oklch(0.17  0.025 var(--brand-h));
}

/* ----------------------------------------------------------
   3. SEMANTIC COLOR + SECTION MODES
   Components consume ONLY these slots. Sections switch skin by
   mode class — components are never restyled per section.
   ---------------------------------------------------------- */
:root, .mode-light {
  --surface: #fff;
  --surface-2: var(--n-50);
  --text: var(--n-900);
  --text-2: var(--n-500);
  --line: var(--n-200);
  --link: var(--accent-strong);
}
.mode-tint {
  --surface: var(--n-50);
  --surface-2: #fff;
}
.mode-dark {
  --surface: var(--n-950);
  --surface-2: var(--n-900);
  --text: var(--n-50);
  --text-2: var(--n-300);
  --line: oklch(0.32 0.03 var(--brand-h));
  --link: oklch(0.75 0.12 var(--brand-h));
}

/* ----------------------------------------------------------
   4. SPACE — 8px grid + the edge gutter
   ---------------------------------------------------------- */
:root {
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-6: 48px; --s-8: 64px; --s-12: 96px; --s-16: 128px; --s-20: 160px;
  --px: clamp(24px, 5vw, 96px);        /* viewport edge gutter */
  --measure: 68ch;                      /* body copy max width */
  --wrap: 1200px;
}

/* ----------------------------------------------------------
   5. TYPE SCALE — clamp()-fluid, tracking tightens as size grows
   ---------------------------------------------------------- */
:root {
  --text-xs: 0.75rem;                               /* 12 — labels */
  --text-sm: 0.875rem;                              /* 14 — UI */
  --text-md: 1rem;                                  /* 16 — body */
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-hero: clamp(2.4rem, 1.2rem + 4.4vw, 5.6rem);
}

/* ----------------------------------------------------------
   6. MOTION — the closed system. Two easings, four durations.
   ---------------------------------------------------------- */
:root {
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);        /* easeOutQuart — default */
  --ease-inout: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* panels, nav */
  --dur-1: 150ms;   /* feedback: press, toggle */
  --dur-2: 240ms;   /* hover, small reveals */
  --dur-3: 450ms;   /* panels, section transitions */
  --dur-4: 800ms;   /* card lifts, entrances */
  --stagger: 70ms;  /* sibling choreography interval */
}

/* ----------------------------------------------------------
   7. ELEVATION + FOCUS — designed, tokenized
   ---------------------------------------------------------- */
:root {
  --shadow-soft: 0 20px 40px -20px rgb(0 0 0 / 0.12);
  --shadow-lift: 0 32px 64px -24px rgb(0 0 0 / 0.18);
  --focus-ring: 0 0 0 3px oklch(0.55 0.19 var(--brand-h) / 0.18);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius);
}

/* ----------------------------------------------------------
   8. BASE
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: 1.1;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); letter-spacing: -0.022em; line-height: 1.05; }
h2 { font-size: var(--text-2xl); letter-spacing: -0.018em; }
h3 { font-size: var(--text-xl); letter-spacing: -0.012em; }
h4 { font-size: var(--text-lg); letter-spacing: -0.008em; font-weight: var(--weight-medium); }
p { margin: 0 0 var(--s-2); max-width: var(--measure); text-wrap: pretty; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }

/* Eyebrow / utility label — mono, tracked wide, the "instrument" voice */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ----------------------------------------------------------
   9. LAYOUT — section + wrap (long-hand padding, always)
   ---------------------------------------------------------- */
.section {
  /* LONG-HAND on purpose: `padding: X 0` here silently resets
     .wrap's gutters when combined (documented failure). */
  padding-top: var(--s-12);
  padding-bottom: var(--s-12);
  background: var(--surface);
  color: var(--text);
}
.section--hero {
  min-height: 72vh;              /* never 100vh — next section peeks */
  display: flex;
  align-items: center;
}
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: var(--px);
  padding-right: var(--px);
}

/* ----------------------------------------------------------
   10. PRIMITIVES — one spec each, reused verbatim on every page
   ---------------------------------------------------------- */

/* Button — asymmetric vertical padding (optical balance),
   transitions name their properties, hover moves ≥2. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 13px 24px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: var(--weight-medium) var(--text-md) / 1 var(--font-body);
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.btn:hover, .btn:focus-visible {
  background: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
.btn:active { transform: translateY(0); transition-duration: var(--dur-1); }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--surface-2);
  border-color: var(--text-2);
  transform: translateY(-1px);
  box-shadow: none;
}
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* The one-variable hover engine — parent flips --hover, children
   consume it. Focus replays the full hover choreography for free. */
.hoverable { --hover: 0; }
.hoverable:hover, .hoverable:focus-visible, .hoverable:focus-within { --hover: 1; }

/* Link-arrow — title + arrow whose shaft draws in on hover */
.link-arrow {
  --hover: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--weight-medium);
  color: var(--link);
  text-decoration: none;
}
.link-arrow:hover, .link-arrow:focus-visible { --hover: 1; }
.link-arrow .arrow { transition: transform var(--dur-2) var(--ease-out); }
.link-arrow .arrow .shaft {
  opacity: var(--hover);
  transition: opacity var(--dur-2) var(--ease-out);
}
.link-arrow:hover .arrow, .link-arrow:focus-visible .arrow { transform: translateX(3px); }

/* Card — soft negative-spread shadow, lift on hover */
.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  transition:
    transform var(--dur-4) var(--ease-out),
    box-shadow var(--dur-4) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}
.card:hover, .card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--n-300);
}
.card > :last-child { margin-bottom: 0; }

/* Stat — big number, smaller unit, mono label underneath */
.stat { display: grid; gap: 4px; }
.stat b {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  letter-spacing: -0.018em;
  line-height: 1;
}
.stat b small { font-size: 0.55em; font-weight: var(--weight-medium); }
.stat .eyebrow { margin-top: 2px; }

/* Dom-graphic scaffold — product UI as scaled live HTML.
   Design the mock at a fixed px width, scale the block. */
.dom-graphic {
  --gw: 320px;        /* design width */
  --gs: 1;            /* scale (set per placement / media query) */
  width: calc(var(--gw) * var(--gs));
  pointer-events: none;
  user-select: none;
}
.dom-graphic > .dg-frame {
  width: var(--gw);
  transform: scale(var(--gs));
  transform-origin: top left;
}

/* ----------------------------------------------------------
   11. REVEAL CHOREOGRAPHY — IO adds .in; siblings stagger.
   JS contract (site.js):
     const io = new IntersectionObserver(es => es.forEach(e => {
       if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
     }), { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
     document.querySelectorAll('.reveal').forEach(el => io.observe(el));
   Fail-safe: .reveal without JS must still be readable — the
   `no-js` class (set in <head>, removed by JS) keeps opacity 1.
   ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ----------------------------------------------------------
   12. REDUCED MOTION — designed static states, not freezes
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .btn--ghost, .card, .link-arrow .arrow, .link-arrow .arrow .shaft {
    transition: none;
  }
  .card:hover { transform: none; }
  .btn:hover { transform: none; }
  /* Per-project: every animated signature block MUST add its own
     designed fallback here (static frame, final state, or swap-in
     element) — never leave it half-animated. */
}

/* ============================================================
   DAIDRA ELEMENTS — the reusable section/element library.
   Elementor-style reuse, engineered: include AFTER foundation.css
   and the project's brand-slot skin. Every element consumes only
   foundation tokens (--accent, --green, --paper, --navy, --s-*,
   --dur-*, easings) so one skin restyles the whole library.
   Behaviors attach from elements.js by class contract (README.md).
   Advanced-CSS register: masks, conic gradients, blend modes,
   clip-path chrome, pointer-var lighting. 2026-08-07.
   ============================================================ */

/* Library-local slots with safe fallbacks (projects override) */
:root {
  --el-ink: var(--ink, #16181d);
  --el-navy: var(--navy, #0b1826);
  --el-green: var(--green, #58b765);
  --el-paper: var(--paper, #fbfaf7);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout-hard: cubic-bezier(0.83, 0, 0.17, 1);
}

/* ============ el-aurora — canvas mesh field ============ */
.el-aurora {
  position: absolute; inset: 0; width: 100%; height: 100%;
  --el-aurora-1: var(--accent); --el-aurora-2: var(--el-green);
  --el-aurora-3: #2a6fb8;
  filter: blur(60px) saturate(1.15);
  opacity: 0.85;
  pointer-events: none;
}

/* ============ el-marquee — infinite ticker ============ */
.el-marquee { overflow: hidden; position: relative; }
.el-marquee-track {
  display: flex; align-items: center; gap: var(--s-8);
  width: max-content;
  animation: el-mq var(--el-mq-dur, 30s) linear infinite;
}
.el-marquee:hover .el-marquee-track { animation-play-state: paused; }
@keyframes el-mq { to { transform: translateX(-50%); } }
.el-marquee--fade {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* photo strip variant */
.el-marquee--photos .el-marquee-track { gap: var(--s-2); }
.el-marquee--photos img {
  height: clamp(160px, 22vw, 260px); width: auto; border-radius: var(--radius-lg);
  object-fit: cover; aspect-ratio: 3/2;
}

/* ============ el-orbit — rotating arc ring (SVG) ============ */
.el-orbit { animation: el-spin 60s linear infinite; transform-origin: center; }
.el-orbit--rev { animation-direction: reverse; animation-duration: 90s; }
@keyframes el-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .el-orbit, .el-marquee-track { animation: none !important; }
}

/* ============ el-shine — pointer-lit card ============ */
.el-shine { position: relative; --mx: 50%; --my: 50%; }
.el-shine::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx) var(--my),
    rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.06) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
}
.el-shine:hover::before, .el-shine:focus-within::before { opacity: 1; }
.el-shine::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx) var(--my),
    rgb(255 255 255 / 0.08), transparent 60%);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
}
.el-shine:hover::after, .el-shine:focus-within::after { opacity: 1; }

/* ============ el-glow — cursor glow for dark sections ============ */
.el-glow { position: relative; --gx: 50%; --gy: 40%; }
.el-glow > .el-glow-layer {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(520px circle at var(--gx) var(--gy),
    rgb(88 183 101 / 0.10), rgb(1 90 163 / 0.07) 45%, transparent 70%);
  transition: opacity var(--dur-3) var(--ease-out);
}
@media (hover: none) { .el-glow > .el-glow-layer { display: none; } }

/* ============ el-magnetic — cursor-lean CTA ============ */
.el-magnetic { transition: transform var(--dur-2) var(--ease-out); will-change: transform; }

/* ============ el-notch-panel — Terminal tab-notch media panel ==== */
.el-notch { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.el-notch::before {
  content: ""; position: absolute; top: 0; right: 48px; z-index: 3;
  width: 120px; height: 14px; background: var(--el-notch-bg, var(--el-paper));
  border-radius: 0 0 12px 12px;
}

/* ============ el-knockout — photo etched through display type ==== */
.el-knockout {
  background-image: var(--el-knockout-img);
  background-size: cover; background-position: center;
  -webkit-background-clip: text; background-clip: text;
  color: rgb(255 255 255 / 0.14);
  filter: drop-shadow(0 2px 24px rgb(0 0 0 / 0.35));
}
@supports not (background-clip: text) { .el-knockout { color: #fff; } }

/* ============ el-grain — feTurbulence paper/film grain ============ */
.el-grain { position: relative; }
.el-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.12 0 0 0 0 0.13 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ el-ghost-mark — viewport-scale watermark ============ */
.el-ghost-mark {
  position: absolute; left: 50%; bottom: -0.24em; transform: translateX(-50%);
  z-index: 1; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 12.2vw; line-height: 1; letter-spacing: -0.01em;
  color: var(--el-ghost-color, rgb(143 193 234 / 0.07)); white-space: nowrap;
}

/* ============ el-dive — split whole-panel CTA pair ============ */
.el-dive { display: grid; grid-template-columns: 1fr 1fr; }
.el-dive a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: clamp(48px, 7vw, 96px) var(--px);
  text-decoration: none; color: #fff;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  transition: background-color var(--dur-3) var(--ease-out);
}
.el-dive a:first-child { background: var(--accent); }
.el-dive a:first-child:hover, .el-dive a:first-child:focus-visible { background: var(--accent-strong); }
.el-dive a:last-child { background: var(--el-ink); }
.el-dive a:last-child:hover, .el-dive a:last-child:focus-visible { background: #000; }
.el-dive .darr { flex: none; transition: transform var(--dur-3) var(--ease-out); }
.el-dive a:hover .darr, .el-dive a:focus-visible .darr { transform: translate(6px, 6px); }
@media (max-width: 860px) { .el-dive { grid-template-columns: 1fr; } }

/* ============ el-chip-pill — mono chip (nav/filters) ============ */
.el-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 11px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--el-ink);
  background: #fff; border: 1px solid rgb(0 0 0 / 0.14);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
.el-chip:hover, .el-chip:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.el-chip--green { background: var(--el-green); border-color: var(--el-green); color: #06250c; }
.el-chip[aria-pressed="true"] { background: var(--el-green); border-color: var(--el-green); color: #06250c; }

/* ============ el-metric-chip — floating stat chip ============ */
.el-metric {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 14px 20px; border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff;
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.5);
}
.el-metric b {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -0.02em;
}
.el-metric b sup { font-size: 0.55em; font-weight: 500; }
.el-metric .micro { color: rgb(255 255 255 / 0.65); }

/* ============ el-ring-conic — conic progress ring ============ */
.el-ring-conic {
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--el-rc-hole, var(--el-navy)) 79%, transparent 80% 100%),
    conic-gradient(var(--el-green) calc(var(--p, 0) * 1%), rgb(255 255 255 / 0.12) 0);
}

/* ============ el-mosaic — two-row photo marquee band ============ */
.el-mosaic { display: grid; gap: var(--s-2); }

/* ============ el-quote-ghost — testimonial w/ giant glyph ======== */
.el-quote-ghost { position: relative; }
.el-quote-ghost::before {
  content: "\201C"; position: absolute; top: -0.18em; left: -0.06em;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(8rem, 18vw, 16rem); line-height: 1;
  color: var(--accent); opacity: 0.08; pointer-events: none;
}

/* ============ Scene stepping visuals (used with [data-el-scene]) == */
.el-scene .svc-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transform: scale(1.04);
  transition: opacity 700ms var(--ease-out-expo), transform 900ms var(--ease-out-expo);
}
.el-scene .svc-media img.active { opacity: 1; transform: scale(1); }
.el-scene .svc-desc { position: relative; }
.el-scene .svc-desc p {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity 500ms var(--ease-out-expo), transform 500ms var(--ease-out-expo);
}
.el-scene .svc-desc p.active { opacity: 1; transform: none; }
.el-scene .scene-bar { height: 2px; overflow: hidden; }
.el-scene .scene-bar i { display: block; height: 100%; background: var(--el-green); transform-origin: left; transform: scaleX(0); }

/* ============ Reduced motion: designed static states ============ */
@media (prefers-reduced-motion: reduce) {
  .el-shine::before, .el-shine::after, .el-glow > .el-glow-layer { display: none; }
  .el-magnetic { transition: none; }
  .el-scene .svc-media img, .el-scene .svc-desc p { transition: none; }
}

/* ============ el-field — branded form controls (input/select/textarea) ==== */
/* Contract: <div class="el-field"><label for=X>…</label><input|select|textarea id=X>
   <span class="el-field-err">message</span></div>. Add .err on the wrapper to show
   the error state. Selects get a token-colored SVG chevron (appearance:none);
   labels tint to --accent on focus-within. Never ship native-chrome fields. */
.el-field { display: grid; gap: 6px; }
.el-field label {
  font-size: var(--text-sm); font-weight: 700; color: var(--el-ink, var(--ink, #232830));
  transition: color var(--dur-2) var(--ease-out);
}
.el-field:focus-within label { color: var(--accent); }
.el-field input, .el-field select, .el-field textarea {
  border: 1px solid var(--n-300, #C5CAD3); border-radius: var(--radius);
  padding: 12px 14px; font: 400 var(--text-md) var(--font-body);
  color: var(--el-ink, var(--ink, #232830));
  background: #fff; width: 100%; min-height: 48px;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.el-field input:hover, .el-field select:hover, .el-field textarea:hover {
  border-color: color-mix(in oklab, var(--accent) 45%, #fff);
}
.el-field input::placeholder, .el-field textarea::placeholder { color: #7A8398; }
.el-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  /* chevron inherits --accent via mask so it always matches the skin */
  background-image: none; padding-right: 40px; position: relative;
}
.el-field .el-field-sel { position: relative; }
.el-field .el-field-sel::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 12px; height: 8px; transform: translateY(-50%);
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 8px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 8px no-repeat;
  pointer-events: none;
}
.el-field textarea { resize: vertical; min-height: 120px; }
.el-field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #fff inset;
  -webkit-text-fill-color: var(--el-ink, var(--ink, #232830));
}
.el-field input:focus, .el-field select:focus, .el-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
.el-field.err input, .el-field.err select { border-color: var(--el-red, #D33); }
.el-field.err input:focus, .el-field.err select:focus {
  border-color: var(--el-red, #D33);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--el-red, #D33) 15%, transparent);
}
.el-field .el-field-err { display: none; font-size: var(--text-xs); color: var(--el-red, #D33); }
.el-field.err .el-field-err { display: block; }

/* ── el-device: scrolling site-in-frame mockups (desktop browser + phone) ──
   Origin: sharkdig.com case studies 2026-08-11. Feed each viewport a full-page
   capture (desktop ~1200w, mobile 390w@2x). Frames are user-scrollable. */
.el-device-pair { display: grid; grid-template-columns: minmax(0,1fr) 292px; gap: clamp(18px,2.5vw,28px); align-items: stretch; }
.el-browser { border: 1px solid var(--rule, #dde4ee); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(6,27,49,.4); }
.el-browser .bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: var(--card, #fff); border-bottom: 1px solid var(--rule, #dde4ee); }
.el-browser .bar i { width: 11px; height: 11px; border-radius: 50%; background: #d3dce8; }
.el-browser .view { height: clamp(420px,62vh,640px); overflow-y: auto; overflow-x: hidden; background: var(--card, #fff); -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.el-browser .view img { display: block; width: 100%; height: auto; }
.el-phone { position: relative; display: flex; flex-direction: column; height: calc(clamp(420px,62vh,640px) + 40px); border: 10px solid #10151d; border-radius: 44px; background: #10151d; box-shadow: 0 24px 60px -30px rgba(6,27,49,.5), inset 0 0 0 2px rgba(255,255,255,.06); }
.el-phone::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 86px; height: 22px; border-radius: 12px; background: #10151d; z-index: 3; }
.el-phone .view { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; background: var(--card, #fff); border-radius: 34px; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none; }
.el-phone .view::-webkit-scrollbar { display: none; }
.el-phone .view img { display: block; width: 100%; height: auto; }
@media (max-width: 880px) {
  .el-device-pair { grid-template-columns: 1fr; }
  .el-phone { width: min(320px,82vw); height: 560px; margin: 0 auto; }
}

/* ============ el-menu — mobile navigation drawer, done right (2026-09-16) ============
   Born from Beach Bookshop: a fixed #menu INSIDE a header with backdrop-filter was
   positioned against the header (filters create containing blocks), so it opened
   40px low, then rendered with negative height and "didn't work" on X's phone.
   Contract (markup lives OUTSIDE <header>):
     <button class="chrome-burger" aria-expanded="false" aria-controls="menu" aria-label="Open menu"><span></span></button>
     <dialog id="menu" class="el-menu" aria-label="Menu">
       <div class="el-menu-bar"><a class="brand" href="/">…</a><button class="el-menu-close" aria-label="Close menu"></button></div>
       <nav class="el-menu-nav"><ol><li><a href>…</a></li>…</ol></nav>
       <div class="el-menu-foot">…hours / address / CTAs / socials…</div>
     </dialog>
   Engine (elements.js): showModal() → top layer (immune to z-index, overflow, filter
   containing blocks); iOS-proof scroll lock; Esc/backdrop/link/resize close; focus in
   and back to the burger; staggered link rise via --i. Slots: --el-menu-bg, --el-menu-fg,
   --el-menu-accent, --el-menu-bp (px, close when the viewport grows past it). */
.el-menu { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--el-menu-bg, var(--el-navy)); color: var(--el-menu-fg, #fff); overflow: auto; -webkit-overflow-scrolling: touch;
  opacity: 0; transition: opacity var(--dur-3, 450ms) var(--ease-out, ease); }
.el-menu[open] { display: grid; grid-template-rows: auto 1fr auto; }
.el-menu.in { opacity: 1; }
.el-menu::backdrop { background: transparent; }
html.el-menu-lock { overflow: hidden; }
html.el-menu-lock body { position: fixed; width: 100%; overflow: hidden; }
.el-menu-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; padding: 0 var(--px, 20px); }
.el-menu-bar .brand { min-height: 48px; display: inline-flex; align-items: center; }
.el-menu-close { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.22); background: rgb(255 255 255 / 0.06); color: inherit; cursor: pointer; position: relative; flex: none; }
.el-menu-close::before, .el-menu-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.el-menu-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.el-menu-nav { padding: 8px var(--px, 20px) 24px; align-self: center; }
.el-menu-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.el-menu-nav li { counter-increment: m; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.el-menu-nav a { display: grid; grid-template-columns: 2.4ch minmax(0, 1fr) auto; align-items: baseline; gap: 12px; min-height: 60px; padding: 14px 0; color: inherit; text-decoration: none;
  font-family: var(--font-display); font-weight: var(--weight-display, 500); font-size: clamp(1.75rem, 7.5vw, 2.6rem); line-height: 1; letter-spacing: -0.02em;
  opacity: 0; transform: translateY(14px); transition: opacity var(--dur-3, 450ms) var(--ease-out, ease), transform var(--dur-3, 450ms) var(--ease-out, ease); transition-delay: calc(80ms + var(--i, 0) * 55ms); }
.el-menu-nav a::before { content: counter(m, decimal-leading-zero); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; color: var(--el-menu-accent, var(--accent)); align-self: center; }
.el-menu-nav a::after { content: "\2192"; font-family: var(--font-body); font-size: 1.1rem; color: var(--el-menu-accent, var(--accent)); opacity: 0.7; align-self: center; }
.el-menu-nav a[aria-current="page"] { color: var(--el-menu-accent, var(--accent)); }
.el-menu.in .el-menu-nav a { opacity: 1; transform: none; }
.el-menu-foot { padding: 20px var(--px, 20px) max(28px, env(safe-area-inset-bottom)); border-top: 1px solid rgb(255 255 255 / 0.12); display: grid; gap: 16px; font-size: 0.9375rem;
  opacity: 0; transform: translateY(10px); transition: opacity var(--dur-3, 450ms) var(--ease-out, ease) 420ms, transform var(--dur-3, 450ms) var(--ease-out, ease) 420ms; }
.el-menu.in .el-menu-foot { opacity: 1; transform: none; }
.el-menu-foot .el-menu-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.el-menu-foot .el-menu-ctas .btn { justify-content: center; }
.el-menu-foot .el-menu-meta { display: grid; gap: 4px; color: rgb(255 255 255 / 0.78); }
.el-menu-foot .el-menu-meta b { color: var(--el-menu-accent, var(--accent)); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-body); }
.el-menu-foot a { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .el-menu, .el-menu-nav a, .el-menu-foot { transition: none; }
  .el-menu[open] { opacity: 1; } .el-menu[open] .el-menu-nav a, .el-menu[open] .el-menu-foot { opacity: 1; transform: none; }
}

/* ============ el-summon — hover-intent card (2026-09-16) ============
   `.summon-host` > `[data-summon]` + `.summon`. The card is hidden by transform/opacity/
   visibility, becomes interactive when `.on`, and carries an invisible bridge above it
   so the pointer can cross the gap from the trigger without "leaving". Engine: elements.js. */
.summon { --el-summon-grace: 420; position: absolute; z-index: 30; opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform var(--dur-3, 450ms) var(--ease-out, ease), opacity var(--dur-3, 450ms) var(--ease-out, ease), visibility 0s linear var(--dur-3, 450ms); }
.summon.on { opacity: 1; visibility: visible; pointer-events: auto; transition: transform var(--dur-3, 450ms) var(--ease-out, ease), opacity var(--dur-3, 450ms) var(--ease-out, ease); }
.summon::before { content: ""; position: absolute; left: -24px; right: -24px; top: -28px; height: 28px; }
@media (hover: none), (pointer: coarse) { .summon { display: none; } }
@media (prefers-reduced-motion: reduce) { .summon { transition: none; } }

/* ============================================================
   BULLY'S PUB & GRILL — project layer (after foundation + elements)
   Reference: buckssauce.com (rsmi.md / motion.md). Heritage: the
   2014 Wix site's cream-on-dark + the logo's four inks.
   ============================================================ */

:root {
  /* palette — measured off the logo + heritage site */
  --ground: #120c08;
  --ground-2: #1b130d;
  --ground-3: #261b13;
  --cream: #f4e3c4;
  --cream-2: #c9b797;
  --cream-3: #8f8069;
  --red: #d9261c;          /* FILL — bull-red slab lettering */
  --red-ink: #ff6b57;      /* text-safe red on the dark ground */
  --red-deep: #9e1a12;     /* text-safe red on cream */
  --blue: #1c8ad6;         /* FILL — logo plate */
  --blue-ink: #6cc0ff;
  --yellow: #f3d51b;       /* FILL — horns / script */
  --brown: #7a3a1a;        /* FILL — the bull */
  --line-d: rgb(244 227 196 / 0.16);
  --line-d2: rgb(244 227 196 / 0.32);

  --ease-snap: cubic-bezier(0.7, 0, 0.2, 1);
  --dash: 1px dashed rgb(244 227 196 / 0.34);
  --hdr: 76px;

  --text-display: clamp(3rem, 1.6rem + 6.2vw, 8.5rem);
  --text-mega: clamp(5rem, 1rem + 17vw, 19rem);
  --text-tab: clamp(1.125rem, 0.95rem + 0.5vw, 1.375rem);

  --el-menu-bg: var(--ground);
  --el-menu-fg: var(--cream);
  --el-menu-accent: var(--yellow);
  --el-menu-bp: 1040px;
}

/* whole site sits on the dark ground; .mode-light is the cream band */
:root, .mode-dark {
  --surface: var(--ground);
  --surface-2: var(--ground-2);
  --text: var(--cream);
  --text-2: var(--cream-2);
  --line: var(--line-d);
  --link: var(--yellow);
}
.mode-light {
  --surface: var(--cream);
  --surface-2: #fbf1dc;
  --text: var(--ground);
  --text-2: #5b4a39;
  --line: rgb(18 12 8 / 0.18);
  --link: var(--red-deep);
}
.mode-tint { --surface: var(--ground-2); --surface-2: var(--ground-3); }
.mode-light, .mode-dark, .mode-tint { background: var(--surface); color: var(--text); }

html { background: var(--ground); overflow-x: clip; }
body { background: var(--ground); color: var(--cream); line-height: 1.5; overflow-x: clip; font-feature-settings: "ss01", "cv11"; }
::selection { background: var(--yellow); color: var(--ground); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; box-shadow: 0 0 0 5px rgb(243 213 27 / 0.2); }
.mode-light :focus-visible { outline-color: var(--red-deep); box-shadow: 0 0 0 5px rgb(158 26 18 / 0.18); }

/* ---------- type styles (named classes, one unit each) ---------- */
h1, h2, h3, h4, .t-cond {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
}
h1 { font-size: var(--text-hero); letter-spacing: -0.02em; line-height: 0.95; }
h2 { font-size: var(--text-display); letter-spacing: -0.022em; line-height: 0.86; margin-bottom: var(--s-3); }
h3 { font-size: var(--text-xl); letter-spacing: -0.005em; line-height: 0.95; margin-bottom: var(--s-1); }
.t-outline { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px currentColor; paint-order: stroke fill; }
.t-outline-c { color: var(--cream); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px currentColor; }
.t-mega { font-family: var(--font-display); font-weight: 600; font-size: var(--text-mega); line-height: 0.8; letter-spacing: -0.03em; text-transform: uppercase; display: block; white-space: nowrap; }
.t-tab { font-family: var(--font-display); font-weight: 600; font-size: var(--text-tab); letter-spacing: 0.01em; text-transform: uppercase; line-height: 1; }
.eyebrow { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.14em; font-size: 0.75rem; color: var(--yellow); }
.mode-light .eyebrow { color: var(--red-deep); }
.lede { font-size: var(--text-lg); color: var(--text-2); max-width: 54ch; line-height: 1.45; }
.num-box { display: inline-grid; place-items: center; min-width: 0.95em; padding: 0 0.1em; background: var(--cream); color: var(--ground); border-radius: 6px; line-height: 1; margin-right: 0.12em; }

/* ---------- buttons (house: 6px radius, condensed caps) ---------- */
.btn {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 1.1875rem; line-height: 1; padding: 15px 22px 14px; border-radius: 6px; min-height: 48px;
  background: var(--cream); color: var(--ground); border: 1px solid var(--cream);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.btn .arrow { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.btn:hover, .btn:focus-visible { background: var(--yellow); border-color: var(--yellow); color: var(--ground); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgb(243 213 27 / 0.55); }
.btn:hover .arrow, .btn:focus-visible .arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--ghost { background: transparent; color: var(--cream); border: var(--dash); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: rgb(244 227 196 / 0.08); color: var(--cream); border-color: var(--cream); box-shadow: none; }
.btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.btn--red:hover, .btn--red:focus-visible { background: #f0342a; border-color: #f0342a; color: #fff; box-shadow: 0 14px 30px -14px rgb(217 38 28 / 0.7); }
.mode-light .btn { background: var(--ground); color: var(--cream); border-color: var(--ground); }
.mode-light .btn:hover, .mode-light .btn:focus-visible { background: var(--red); border-color: var(--red); color: #fff; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ---------- header + docking logo (signature, part 1) ---------- */
.skip { position: absolute; left: 12px; top: 12px; z-index: 100; padding: 10px 14px; background: var(--yellow); color: var(--ground); border-radius: 6px; font-weight: 600; clip-path: inset(50%); }
.skip:focus { clip-path: none; }
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 40; height: var(--hdr);
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3);
  padding-left: var(--px); padding-right: var(--px);
  --solid: 0;
  background: rgb(18 12 8 / calc(var(--solid) * 0.92));
  border-bottom: 1px solid rgb(244 227 196 / calc(var(--solid) * 0.12));
  transition: background-color var(--dur-3) var(--ease-out);
}
.site-head::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(calc(var(--solid) * 10px)); -webkit-backdrop-filter: blur(calc(var(--solid) * 10px)); }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); white-space: nowrap; }
.site-nav a {
  position: relative; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--cream); text-decoration: none; padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center;
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--yellow); transform: translateY(-1px); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
.site-head .btn { flex: 0 0 auto; min-width: max-content; padding: 12px 16px 11px; font-size: 1.0625rem; min-height: 44px; }
.head-brand { position: absolute; left: var(--px); top: 10px; width: 140px; height: 56px; display: block; }
.head-brand img { width: 100%; height: 100%; object-fit: contain; object-position: left center; opacity: var(--solid); transition: opacity var(--dur-2) var(--ease-out); }
.js .head-brand img { opacity: var(--solid); }
.no-js .head-brand img { opacity: 1; }

.chrome-burger { display: none; width: 48px; height: 48px; border-radius: 50%; border: var(--dash); background: rgb(18 12 8 / 0.6); color: var(--cream); cursor: pointer; position: relative; flex: none;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.chrome-burger span, .chrome-burger::before, .chrome-burger::after { content: ""; position: absolute; left: 14px; right: 14px; height: 2px; background: currentColor; border-radius: 2px; }
.chrome-burger::before { top: 17px; } .chrome-burger span { top: 23px; } .chrome-burger::after { top: 29px; }
.chrome-burger:hover, .chrome-burger:focus-visible { background: rgb(244 227 196 / 0.1); border-color: var(--cream); }
@media (max-width: 1040px) {
  .site-nav { display: none; }
  .chrome-burger { display: inline-block; }
}
@media (max-width: 520px) { .site-head .btn { display: none; } }

.el-menu .brand img { width: 130px; height: auto; }
.el-menu-nav a { font-weight: 600; text-transform: uppercase; }
.el-menu-foot .btn { font-size: 1rem; }

/* ---------- loader (motion move 1) ---------- */
.loader { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
.loader i { position: absolute; left: 50%; top: 50%; width: 30vmax; height: 30vmax; margin: -15vmax 0 0 -15vmax; border-radius: 50%; transform: scale(0); }
.loader i:nth-child(1) { background: var(--yellow); }
.loader i:nth-child(2) { background: var(--blue); }
.loader i:nth-child(3) { background: var(--red); }
.loader i:nth-child(4) { background: var(--ground); }
.loader img { position: relative; width: min(300px, 64vw); height: auto; opacity: 0; z-index: 2; }
.loader.run i { animation: ring 1.05s var(--ease-snap) forwards; animation-delay: calc(var(--k) * 90ms); }
.loader.run img { animation: loaderLogo 0.5s var(--ease-out) 0.62s forwards; }
.loader.out { opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.loader:not(.run) { display: none; }
@keyframes ring { to { transform: scale(4.2); } }
@keyframes loaderLogo { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

/* ---------- hero field (signature system) ---------- */
.hero {
  position: relative; min-height: clamp(620px, 88vh, 900px); display: grid; place-items: center; overflow: hidden; isolation: isolate;
  padding-top: calc(var(--hdr) + var(--s-4)); padding-bottom: var(--s-8);
  background:
    radial-gradient(60% 50% at 50% 38%, rgb(28 138 214 / 0.16), transparent 70%),
    radial-gradient(40% 40% at 80% 90%, rgb(217 38 28 / 0.14), transparent 70%),
    var(--ground);
  --p: 0;
}
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(to bottom, transparent, var(--ground)); z-index: 1; pointer-events: none; }
.hero-copy { position: relative; z-index: 3; text-align: center; display: grid; justify-items: center; max-width: 980px; padding-inline: var(--px); }
.dock-logo { width: clamp(220px, 26vw, 360px); aspect-ratio: 456 / 195; margin-bottom: var(--s-3); transform-origin: 0 0; will-change: transform; }
.dock-logo img { width: 100%; height: 100%; filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.55)); }
.hero h1 { font-size: clamp(2.3rem, 1.3rem + 3.2vw, 4.4rem); max-width: 22ch; margin-bottom: var(--s-3); text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--yellow); }
.hero .lede { margin-inline: auto; text-align: center; color: var(--cream-2); }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--s-3); }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--s-4); padding: 0; list-style: none; }
.facts li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: var(--dash); border-radius: 999px; font-size: 0.9375rem; color: var(--cream); background: rgb(18 12 8 / 0.55); }
.facts svg { width: 18px; height: 18px; color: var(--yellow); flex: none; }

.plates { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.plate {
  position: absolute; width: var(--w); left: var(--x); top: var(--y); pointer-events: auto;
  --lx: 0; --ly: 0; --dy: 0px;
  transform: translate3d(calc(var(--lx) * var(--d) * 26px), calc(var(--dy) + var(--ly) * var(--d) * 18px), 0) rotate(var(--r));
  will-change: transform;
}
.plate a { display: block; padding: 8px 8px 34px; background: var(--cream); border-radius: 4px; box-shadow: 0 30px 50px -24px rgb(0 0 0 / 0.8), 0 2px 0 rgb(0 0 0 / 0.2);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); position: relative; color: var(--ground); text-decoration: none; }
.plate a::after { content: attr(data-cap); position: absolute; left: 10px; right: 10px; bottom: 9px; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate a::before { content: ""; position: absolute; top: -9px; left: 50%; width: 54px; height: 18px; margin-left: -27px; background: rgb(243 213 27 / 0.72); transform: rotate(-3deg); }
.plate img { width: 100%; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; border-radius: 2px; }
.plate a:hover, .plate a:focus-visible { transform: rotate(calc(var(--r) * -1)) scale(1.04); box-shadow: 0 40px 70px -24px rgb(0 0 0 / 0.9); }
.plate[data-d="3"] { filter: blur(0.6px) brightness(0.8); }
@media (max-width: 900px) {
  .plate { --w: 118px !important; }
  .plate.p-hide-m { display: none; }
  .plate.p1 { --x: -18px !important; --y: 92px !important; }
  .plate.p2 { --x: calc(100% - 104px) !important; --y: 104px !important; }
  .plate.p3 { --x: -22px !important; --y: calc(100% - 196px) !important; }
  .plate.p4 { --x: calc(100% - 100px) !important; --y: calc(100% - 184px) !important; }
  .plate a::after { font-size: 0.8rem; }
  .hero-copy { padding-top: 120px; }
}

/* ---------- manifesto (motion move 3) ---------- */
.manifesto { padding-top: var(--s-16); padding-bottom: var(--s-16); text-align: center; position: relative; }
.manifesto .eyebrow { display: block; margin-bottom: var(--s-3); }
.manifesto p.says { margin: 0 auto; max-width: 30ch; font-family: var(--font-body); font-weight: 500; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--cream); text-wrap: balance; }
.manifesto .w { display: inline-block; opacity: calc(0.14 + var(--on, 1) * 0.86); transform: translateY(calc((1 - var(--on, 1)) * 14px)); font-style: normal; }
.manifesto .ico { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; vertical-align: -0.12em; margin: 0 0.08em; border-radius: 50%; background: var(--red); color: #fff; }
.manifesto .ico.b { background: var(--blue); color: var(--ground); }
.manifesto .ico svg { width: 62%; height: 62%; }
.manifesto cite { display: block; margin-top: var(--s-4); font-style: normal; font-size: 0.875rem; color: var(--cream-3); letter-spacing: 0.04em; }
.manifesto cite a { color: var(--cream-2); }
.flourish { width: 70px; height: 30px; margin: var(--s-6) auto 0; color: var(--cream-3); }

/* ---------- riveted tag cards, sticky stack (RSMI 3 / motion 4) ---------- */
.stack-sec { padding-bottom: var(--s-16); }
.stack-head { text-align: center; margin-bottom: var(--s-8); }
.stack-head h2 { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6.25rem); }
.tag-stack { position: relative; display: grid; gap: var(--s-8); max-width: 980px; margin-inline: auto; padding-inline: var(--px); }
.tag {
  position: sticky; top: calc(var(--hdr) + 20px + var(--k) * 58px);
  --settle: 1; --cover: 0;
  transform: rotate(calc(var(--rot) * (1 - var(--settle)) + var(--rest))) scale(calc(1 - var(--cover) * 0.04));
  filter: brightness(calc(1 - var(--cover) * 0.35));
  transform-origin: 50% 0;
}
.tag-tab { display: flex; align-items: center; justify-content: center; gap: 12px; height: 58px; padding: 0 22px; background: var(--cream); color: var(--ground); border-radius: 6px 6px 0 0; position: relative; }
.tag-tab::before, .tag-tab::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--ground); }
.tag-tab::before { left: 18px; } .tag-tab::after { right: 18px; }
.tag-tab h3 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.tag-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--ground-2); border: 1px solid var(--line-d2); border-top: 0; border-radius: 0 0 6px 6px; overflow: hidden; }
.tag-text { padding: clamp(24px, 3vw, 44px); display: grid; align-content: center; gap: var(--s-2); }
.tag-ico { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--cream-2); display: grid; place-items: center; color: var(--cream); }
.tag-ico svg { width: 30px; height: 30px; }
.tag-text p { margin: 0; color: var(--cream-2); font-size: var(--text-lg); line-height: 1.45; }
.tag-text p b { color: var(--cream); font-weight: 600; }
.tag-media { position: relative; min-height: 300px; display: block; overflow: hidden; }
.tag-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out), filter var(--dur-3) var(--ease-out); }
.tag-media:hover img, .tag-media:focus-visible img { transform: scale(1.05); filter: saturate(1.15); }
.pkg-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: center; padding: 14px; background: var(--cream); border-radius: 6px; }
.pkg-logos img { width: 100%; height: 54px; object-fit: contain; }
@media (max-width: 760px) {
  .tag-body { grid-template-columns: 1fr; }
  .tag-media { min-height: 200px; order: -1; }
  .tag { top: calc(var(--hdr) + 8px + var(--k) * 46px); }
  .tag-tab { height: 46px; }
}

/* ---------- PICK YOUR BURGER — colour card row (RSMI 4 / motion 5) ---------- */
.weapon { overflow: hidden; padding-top: var(--s-12); }
.weapon-head { text-align: center; position: relative; }
.weapon-head .pre { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 1.2rem + 3.8vw, 6rem); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: -0.1em; }
.weapon-head .t-mega { transform: translateX(calc(6% - var(--p, 0.5) * 12%)); }
.weapon-sub { text-align: center; margin: var(--s-3) auto var(--s-6); color: var(--cream-2); max-width: 60ch; padding-inline: var(--px); }
.weapon-sub b { color: var(--cream); }
.cards5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding-inline: 10px; align-items: start; --p: 1; }
.bcard {
  --k: 0;
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-2); min-height: 460px; padding: 22px 20px 20px; border-radius: 6px; text-decoration: none;
  background: var(--bg); color: var(--fg);
  transform: translateY(calc(var(--k) * 30px * (1 - var(--p))));
  transition: box-shadow var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-out);
  overflow: hidden;
}
.bcard::before { content: ""; position: absolute; inset: 8px; border: 1px dashed currentColor; border-radius: 4px; opacity: 0.35; pointer-events: none; }
.bcard h3 { font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.4rem); text-align: center; margin: 0; }
.bcard p { margin: 0; font-size: 0.975rem; line-height: 1.45; text-align: center; opacity: 0.92; }
.bcard .b-img { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin: 6px auto 0; width: 82%; box-shadow: 0 20px 36px -16px rgb(0 0 0 / 0.6); transition: transform var(--dur-4) var(--ease-out); }
.bcard .b-img img { width: 100%; height: 100%; object-fit: cover; }
.bcard .b-num { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.14em; text-align: center; opacity: 0.8; }
.bcard:hover, .bcard:focus-visible { box-shadow: 0 30px 60px -28px rgb(0 0 0 / 0.9); filter: saturate(1.1); }
.bcard:hover .b-img, .bcard:focus-visible .b-img { transform: rotate(-6deg) scale(1.05); }
.bc-red { --bg: var(--red); --fg: #fff; }
.bc-blue { --bg: var(--blue); --fg: var(--ground); }
.bc-yellow { --bg: var(--yellow); --fg: var(--ground); }
.bc-brown { --bg: var(--brown); --fg: var(--cream); }
.bc-cream { --bg: var(--cream); --fg: var(--ground); }
.bun-note { margin: var(--s-4) auto 0; text-align: center; max-width: 70ch; color: var(--cream-3); font-size: 0.9375rem; padding-inline: var(--px); }
@media (max-width: 1000px) {
  .cards5 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 72vw); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--px); padding-bottom: 12px; scrollbar-width: none; }
  .cards5::-webkit-scrollbar { display: none; }
  .bcard { scroll-snap-align: center; transform: none; min-height: 420px; }
}

/* ---------- growler builder / tap board (RSMI 5) ---------- */
.growler-sec { padding-top: var(--s-12); padding-bottom: var(--s-12); }
.panel { position: relative; background: var(--ground-3); border-radius: 8px; padding: clamp(20px, 3.4vw, 56px); margin-inline: 10px; }
.panel::before { content: ""; position: absolute; inset: 10px; border: var(--dash); border-radius: 5px; pointer-events: none; }
.panel-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.panel h2 { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6rem); margin-bottom: var(--s-2); }
.panel h2 .t-outline-c { display: block; }
.panel .lede { margin-bottom: var(--s-4); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-3); }
.chip {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.0625rem; letter-spacing: 0.02em; line-height: 1;
  min-height: 44px; padding: 12px 16px 11px; border-radius: 999px; border: var(--dash); background: transparent; color: var(--cream); cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.chip:hover, .chip:focus-visible { border-color: var(--cream); background: rgb(244 227 196 / 0.08); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); color: var(--ground); }
.chip .n { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; opacity: 0.7; margin-left: 4px; }
.taps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 620px; overflow: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-color: var(--cream-3) transparent; scrollbar-width: thin; }
.tap button {
  width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; text-align: left;
  padding: 10px 14px 10px 10px; border-radius: 6px; border: 1px solid var(--line-d); background: var(--ground-2); color: var(--cream); cursor: pointer; font: inherit;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.tap button:hover, .tap button:focus-visible { border-color: var(--line-d2); background: #221811; transform: translateX(3px); }
.tap button[aria-pressed="true"] { border-color: var(--yellow); background: #2a1f10; }
.tap .lab, .tap .nolabel { background-size: cover; background-position: center; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--cream); display: grid; place-items: center; color: var(--ground); }
.tap .nolabel svg { width: 26px; height: 26px; }
.tap .nm { display: block; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.3rem; line-height: 1; letter-spacing: 0.005em; }
.tap .mt { display: block; font-size: 0.8125rem; color: var(--cream-2); margin-top: 4px; line-height: 1.35; }
.tap .pr { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--yellow); text-align: right; line-height: 1; }
.tap .pr small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--cream-3); margin-top: 4px; }
.tap[hidden] { display: none; }
.board-note { margin-top: var(--s-2); font-size: 0.8125rem; color: var(--cream-2); }
.board-note a { color: var(--cream-2); }

.jug { position: sticky; top: calc(var(--hdr) + 24px); display: grid; justify-items: center; gap: var(--s-2); text-align: center; }
.jug-disc { position: relative; width: min(100%, 440px); aspect-ratio: 1; border-radius: 50%; background: rgb(244 227 196 / 0.05); display: grid; place-items: center; }
.jug-disc::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: var(--dash); opacity: 0.6; }
.jug-disc svg { width: 46%; height: auto; overflow: visible; }
.jug-disc .outline { fill: none; stroke: var(--cream-2); stroke-width: 1.5; stroke-dasharray: 5 5; }
.jug-disc .fill { fill: var(--beer, #e0a43a); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--lvl, 0)); transition: transform var(--dur-4) var(--ease-snap), fill var(--dur-3) var(--ease-out); }
.jug-disc .foam { fill: #fff6e2; opacity: var(--lvl, 0); transition: opacity var(--dur-3) var(--ease-out) 300ms; }
.jug-disc .bubbles circle { fill: rgb(255 255 255 / 0.55); opacity: var(--lvl, 0); animation: bub 2.4s linear infinite; }
.jug-disc .bubbles circle:nth-child(2) { animation-delay: 0.8s; } .jug-disc .bubbles circle:nth-child(3) { animation-delay: 1.6s; }
@keyframes bub { from { transform: translateY(0); } to { transform: translateY(-120px); } }
.jug-label { position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 3px solid var(--cream); opacity: var(--lvl, 0); transition: opacity var(--dur-3) var(--ease-out) 400ms; background: var(--cream); }
.jug-label { background-size: cover; background-position: center; }
.jug-out { min-height: 3.2em; }
.jug-out .t-cond { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); display: block; }
.jug-out span { color: var(--cream-2); font-size: 0.9375rem; }
.jug .btn { min-width: 260px; justify-content: center; }
@media (max-width: 900px) {
  .panel-grid { grid-template-columns: 1fr; }
  .jug { position: relative; top: 0; }
  .jug-disc { width: min(78vw, 320px); }
  .taps { max-height: 460px; }
}

/* ---------- full food menu — the cream band ---------- */
.menu-sec { padding-top: var(--s-12); padding-bottom: var(--s-12); position: relative; }
.menu-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: end; margin-bottom: var(--s-4); }
.menu-top h2 { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6rem); margin: 0; }
.menu-top h2 .t-outline { display: block; color: var(--ground); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-4); border-bottom: 1px solid var(--line); padding-bottom: var(--s-2); }
.tabs [role="tab"] {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.125rem; line-height: 1; letter-spacing: 0.02em;
  min-height: 44px; padding: 12px 16px 11px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--ground); cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.tabs [role="tab"]:hover, .tabs [role="tab"]:focus-visible { border-color: var(--ground); }
.tabs [role="tab"][aria-selected="true"] { background: var(--ground); color: var(--cream); }
.menu-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.menu-panel[hidden] { display: none; }
.menu-panel .intro { font-size: 0.975rem; color: var(--text-2); margin-bottom: var(--s-3); max-width: 70ch; padding: 14px 16px; border: 1px dashed rgb(18 12 8 / 0.3); border-radius: 6px; }
.dishes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); }
.dishes li { padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
.dishes h3 { font-size: 1.6rem; margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
.dishes h3 .fav { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; background: var(--red); color: #fff; padding: 4px 7px 3px; border-radius: 4px; transform: translateY(-3px); }
.dishes p { margin: 0; font-size: 0.9375rem; color: var(--text-2); line-height: 1.45; }
.flavors { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: var(--s-2) 0 0; }
.flavors li { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.05rem; padding: 9px 13px 8px; border-radius: 999px; background: var(--ground); color: var(--cream); }
.flavors li:nth-child(3n+1) { background: var(--red); color: #fff; }
.flavors li:nth-child(3n+2) { background: var(--blue); color: var(--ground); }
.menu-photo { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 12px; }
.menu-photo a { display: block; border-radius: 6px; overflow: hidden; position: relative; aspect-ratio: 4 / 5; background: var(--ground); }
.menu-photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.menu-photo a:hover img, .menu-photo a:focus-visible img { transform: scale(1.04); }
.menu-photo figcaption { font-size: 0.8125rem; color: var(--text-2); }
.menu-note { margin-top: var(--s-3); font-size: 0.8125rem; color: var(--text-2); }
.menu-note a { color: var(--red-deep); }
@media (max-width: 900px) {
  .menu-top, .menu-grid { grid-template-columns: 1fr; }
  .dishes { grid-template-columns: 1fr; }
  .menu-photo { position: relative; top: 0; order: -1; }
  .menu-photo a { aspect-ratio: 16 / 10; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--px) * -1); padding-inline: var(--px); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs [role="tab"] { flex: 0 0 auto; }
}

/* scalloped edges between the dark ground and the cream band */
.edge { display: block; width: 100%; height: 26px; color: var(--cream); }
.edge.flip { transform: scaleY(-1); }

/* ---------- WHY BULLY'S — arc + numbered reasons (RSMI 6) ---------- */
.why { padding-top: var(--s-12); padding-bottom: var(--s-12); overflow: hidden; }
.arc { display: block; width: min(1400px, 112%); margin: 0 auto -2%; position: relative; left: 50%; transform: translateX(-50%); overflow: visible; }
.arc text { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; fill: #5a4a3a; font-size: 168px; letter-spacing: 6px; }
.arc .ticks { fill: none; stroke: #5a4a3a; stroke-width: 2; stroke-dasharray: 2 10; }
.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: var(--s-6); }
.reason { position: relative; text-align: center; display: grid; justify-items: center; gap: var(--s-2); }
.reason .big { font-family: var(--font-display); font-weight: 600; font-size: clamp(6rem, 4rem + 6vw, 11rem); line-height: 0.8; color: var(--cream-3); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px currentColor; }
.reason .pill { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.02em; padding: 9px 16px 8px 30px; background: var(--cream); color: var(--ground); border-radius: 6px; transform: rotate(var(--r, -4deg)) translateY(-40%); position: relative; }
.reason .pill::before { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ground); }
.reason a.pic { display: block; width: min(260px, 70%); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 6px solid var(--ground-3); box-shadow: 0 0 0 1px var(--line-d2); }
.reason a.pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
.reason a.pic:hover img, .reason a.pic:focus-visible img { transform: scale(1.08) rotate(3deg); }
.reason p { color: var(--cream-2); max-width: 34ch; margin: 0 auto; }
@media (max-width: 860px) { .reasons { grid-template-columns: 1fr; gap: var(--s-8); } }

/* ---------- reviews (RSMI 7) ---------- */
.reviews { padding-top: var(--s-12); padding-bottom: var(--s-12); position: relative; overflow: hidden; }
.reviews .t-mega { position: absolute; left: 50%; top: var(--s-8); transform: translateX(-50%); color: rgb(244 227 196 / 0.42); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px currentColor; pointer-events: none; }
.reviews-head { position: relative; text-align: center; padding-top: clamp(40px, 8vw, 150px); margin-bottom: var(--s-6); }
.reviews-head h2 { font-size: clamp(2.4rem, 1.4rem + 3.8vw, 5rem); }
.stars { display: inline-flex; gap: 3px; color: var(--yellow); }
.stars svg { width: 18px; height: 18px; }
.rating-line { display: inline-flex; align-items: center; gap: 10px; color: var(--cream-2); }
.el-marquee.revs { --gap: 16px; }
.revs .el-marquee-track { gap: 16px; padding-block: 6px; }
.rev { flex: 0 0 auto; width: min(360px, 82vw); background: var(--ground-2); border: 1px solid var(--line-d2); border-radius: 6px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.rev .tag-tab { height: 48px; border-radius: 0; }
.rev .tag-tab .t-tab { font-size: 1.125rem; }
.rev blockquote { margin: 0; padding: 20px 22px 22px; display: grid; gap: 12px; align-content: start; }
.rev blockquote p { margin: 0; color: var(--cream); font-size: 1rem; line-height: 1.5; }
.rev footer { font-size: 0.8125rem; color: var(--cream-3); }
.rev footer a { color: var(--cream-2); }

/* ---------- visit ---------- */
.visit { padding-top: var(--s-12); padding-bottom: var(--s-12); }
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.visit h2 { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6rem); }
.ticket { position: relative; background: var(--cream); color: var(--ground); border-radius: 6px; padding: 30px 28px 26px; margin-top: var(--s-3);
  -webkit-mask: radial-gradient(10px at 10px 50%, #0000 98%, #000) -10px 0 / 100% 22px repeat-y; mask: radial-gradient(10px at 10px 50%, #0000 98%, #000) -10px 0 / 100% 22px repeat-y; }
.ticket dl { margin: 0; display: grid; gap: 14px; }
.ticket dl div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.ticket dt { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.1rem; }
.ticket dd { margin: 0; font-size: 1rem; }
.ticket a { color: var(--red-deep); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ticket a:hover, .ticket a:focus-visible { color: var(--ground); text-decoration-thickness: 2px; }
.ticket .rule { border-top: 1px dashed rgb(18 12 8 / 0.3); }
.ticket .perk { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; background: var(--yellow); padding: 6px 10px; border-radius: 4px; font-size: 0.9375rem; }
.visit-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-3); }
.map-wrap { position: relative; border-radius: 8px; overflow: hidden; min-height: 460px; background: var(--ground-3); }
.map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.3) contrast(1.05); }
.map-photo { position: absolute; right: 16px; bottom: 16px; width: 44%; border: 6px solid var(--cream); border-radius: 4px; box-shadow: 0 24px 40px -18px rgb(0 0 0 / 0.7); transform: rotate(3deg); transition: transform var(--dur-3) var(--ease-out); }
.map-photo:hover, .map-photo:focus-visible { transform: rotate(0) scale(1.03); }
.map-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 900px) { .visit-grid { grid-template-columns: 1fr; } .map-wrap { min-height: 380px; } .ticket dl div { grid-template-columns: 96px minmax(0, 1fr); } }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line-d); padding-top: var(--s-8); padding-bottom: var(--s-6); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--s-4); }
.foot-grid h4 { font-size: 1.25rem; margin: 0 0 var(--s-2); text-transform: uppercase; letter-spacing: 0.01em; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot-grid a { color: var(--cream-2); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.foot-grid a:hover, .foot-grid a:focus-visible { color: var(--yellow); transform: translateX(2px); }
.foot-grid p { color: var(--cream-2); font-size: 0.9375rem; }
.foot-brand img { width: 190px; height: auto; margin-bottom: var(--s-2); }
.foot-base { margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--line-d); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.8125rem; color: var(--cream-3); }
.foot-base a { color: var(--cream-2); }
.social { display: inline-flex; gap: 8px; }
.social a { width: 44px; height: 44px; border-radius: 50%; border: var(--dash); display: inline-grid; place-items: center; }
.social svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- grain over the dark ground ---------- */
.grain::after { content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* progressive enhancement: native scroll timeline for the manifesto where supported */
@supports (animation-timeline: view()) {
  .no-rafword .manifesto .w { animation: wordIn linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
}
@keyframes wordIn { from { opacity: 0.14; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- reduced motion: designed static states ---------- */
@media (prefers-reduced-motion: reduce) {
  .loader { display: none !important; }
  .plate, .dock-logo, .tag, .bcard, .weapon-head .t-mega { transform: none !important; filter: none !important; }
  .plate { transform: rotate(var(--r)) !important; }
  .manifesto .w { opacity: 1 !important; transform: none !important; }
  .jug-disc .fill, .jug-disc .foam, .jug-label, .btn, .chip, .tap button, .bcard .b-img, .tag-media img, .menu-photo img, .map-photo { transition: none; }
  .jug-disc .bubbles circle { animation: none; }
  .tag { position: relative; top: 0; }
}

/* ---------- mascot band (full-bleed, scroll-linked) ---------- */
.band { position: relative; height: clamp(300px, 46vw, 620px); overflow: hidden; }
.band-img { position: absolute; inset: -18% 0; }
.band-img a { display: block; height: 100%; }
.band-img img { transition: transform var(--dur-4) var(--ease-out), filter var(--dur-3) var(--ease-out); }
.band-img a:hover img, .band-img a:focus-visible img { transform: scale(1.03); filter: saturate(1.15); }
.band-img img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--ground), transparent 22%, transparent 70%, rgb(18 12 8 / 0.85)); pointer-events: none; }
.band-cap { position: absolute; z-index: 2; left: var(--px); bottom: var(--s-4); display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--cream); color: var(--ground); border-radius: 6px; text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.band-cap .arrow { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.band-cap:hover, .band-cap:focus-visible { background: var(--yellow); transform: translateY(-2px); }
.band-cap:hover .arrow, .band-cap:focus-visible .arrow { transform: translateX(4px); }

/* burger row: one real photo pinned over the outline word; cards carry the horns */
.weapon-top { position: relative; }
.weapon-photo { position: absolute; z-index: 2; right: max(var(--px), 6vw); top: 4%; width: clamp(150px, 22vw, 340px); padding: 8px 8px 8px; background: var(--cream); border-radius: 4px; transform: rotate(6deg); box-shadow: 0 30px 50px -24px rgb(0 0 0 / 0.85);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.weapon-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.weapon-photo:hover, .weapon-photo:focus-visible { transform: rotate(0) scale(1.04); box-shadow: 0 40px 70px -24px rgb(0 0 0 / 0.95); }
.bcard .b-horns { display: block; width: 72%; margin: 0 auto; opacity: 0.9; transition: transform var(--dur-3) var(--ease-out); }
.bcard .b-horns svg { width: 100%; height: auto; }
.bcard:hover .b-horns, .bcard:focus-visible .b-horns { transform: translateY(-6px) scale(1.06); }
.bcard { min-height: 380px; }
@media (max-width: 700px) { .weapon-photo { position: relative; right: auto; top: auto; margin: var(--s-3) auto 0; display: block; width: 62vw; } }

.why-h { font-size: var(--text-2xl); text-align: center; max-width: 24ch; margin-inline: auto; }
.rev-photo { display: block; width: 200px; margin: var(--s-3) auto 0; border: 6px solid var(--cream); border-radius: 4px; transform: rotate(-4deg); transition: transform var(--dur-3) var(--ease-out); box-shadow: 0 24px 40px -20px rgb(0 0 0 / 0.8); }
.rev-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.rev-photo:hover, .rev-photo:focus-visible { transform: rotate(0) scale(1.05); }
@media (prefers-reduced-motion: reduce) { .band-img { transform: none !important; } .weapon-photo, .rev-photo, .band-cap { transition: none; } }

/* hero restraint: the fact chips live in a strip under the hero */
.facts-strip { position: relative; z-index: 3; margin-top: calc(var(--s-8) * -1); padding-inline: var(--px); }
.facts-strip .facts { margin-top: 0; }
.btn--pip::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-left: 4px; transition: transform var(--dur-2) var(--ease-out); }
.btn--pip:hover::after, .btn--pip:focus-visible::after { transform: scale(1.6); }
/* surfaces for the tall floods */
.section--hero { background-image: radial-gradient(60% 50% at 50% 38%, rgb(28 138 214 / 0.16), transparent 70%); }
.el-menu { background-image: radial-gradient(70% 50% at 100% 0%, rgb(217 38 28 / 0.16), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgb(28 138 214 / 0.14), transparent 70%); }
.nf-strip { padding-top: var(--s-6); padding-bottom: var(--s-6); text-align: center; }
.nf-strip p { margin: 0 auto; }

main:focus { outline: none; }
#food { scroll-margin-top: var(--hdr); }

/* ===== QA round 1 (2026-09-28) ===== */
/* menu media: video / photo / nothing, cross-faded */
.menu-photo { display: grid; }
.menu-photo .mp-video, .menu-photo .mp-img { grid-area: 1 / 1; position: relative; display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ground);
  transition: opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
.menu-photo figcaption { grid-area: 2 / 1; margin-top: 10px; transition: opacity var(--dur-3) var(--ease-out); }
.menu-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-photo[data-show="video"] .mp-img, .menu-photo:not([data-show="video"]) .mp-video,
.menu-photo[data-show="img-out"] .mp-img, .menu-photo[data-show="none"] .mp-img { opacity: 0; visibility: hidden; }
.menu-photo[data-show="none"] figcaption { opacity: 0; }
.menu-photo[data-show="video"] .mp-video, .menu-photo[data-show="img"] .mp-img { transition: opacity var(--dur-3) var(--ease-out); }
.mp-toggle { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(244 227 196 / 0.5); background: rgb(18 12 8 / 0.7); color: var(--cream); cursor: pointer; display: grid; place-items: center;
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.mp-toggle:hover, .mp-toggle:focus-visible { background: var(--ground); transform: scale(1.06); }
.mp-toggle .i-pause { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.mp-toggle[aria-pressed="true"] .i-pause { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
@media (max-width: 900px) { .menu-photo .mp-video, .menu-photo .mp-img { aspect-ratio: 4 / 3; } }

/* house-favorite badge never wraps into a block; sits on its own line under long names */
.dishes h3 { flex-wrap: wrap; row-gap: 4px; }
.dishes h3 .fav { white-space: nowrap; flex: none; transform: none; }

/* burger cards: names reserve two lines so descriptions align across the row */
.bcard .b-name { min-height: calc(2 * 0.95em * 1.1); display: grid; align-items: center; font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.4rem); }
.bcard .b-name h3 { font-size: 1em; }
.bcard { grid-template-rows: auto auto 1fr auto; }

/* hero plates: tighter + further out between 900 and 1280 so they never touch the headline */
@media (min-width: 901px) and (max-width: 1280px) {
  .plate { --w: 168px !important; }
  .plate.p1 { --x: 1.5% !important; } .plate.p3 { --x: 1% !important; }
  .plate.p2 { --x: calc(100% - 190px) !important; } .plate.p4 { --x: calc(100% - 196px) !important; }
  .hero h1 { max-width: 18ch; }
  .hero-copy { max-width: 620px; }
}
/* phones: two plates up top only; nothing crowds the buttons */
@media (max-width: 600px) {
  .plate.p3, .plate.p4 { display: none; }
  .hero { min-height: auto; padding-bottom: var(--s-6); }
  .facts-strip { margin-top: 0; }
  .manifesto { padding-top: var(--s-8); padding-bottom: var(--s-8); }
  .stack-sec { padding-bottom: var(--s-8); }
  .stack-head { margin-bottom: var(--s-4); }
  .weapon, .growler-sec, .menu-sec, .why, .reviews, .visit { padding-top: var(--s-8); padding-bottom: var(--s-8); }
  .band-img img { object-position: 24% 78%; }
  .rating-line { flex-direction: column; gap: 6px; }
}
/* scrollable tab row shows it scrolls */
@media (max-width: 900px) {
  .tabs { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: 48px; }
}
/* long addresses/emails wrap inside the ticket */
.ticket dd { overflow-wrap: anywhere; min-width: 0; }

/* phones: the growler result docks to the bottom of the panel so the fill is visible as you tap */
@media (max-width: 900px) {
  .jug { position: sticky; bottom: 10px; top: auto; z-index: 5; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; justify-items: start; text-align: left; gap: 4px 14px;
    padding: 10px 12px; background: rgb(27 19 13 / 0.94); border: 1px solid var(--line-d2); border-radius: 8px; box-shadow: 0 -12px 30px -12px rgb(0 0 0 / 0.7); backdrop-filter: blur(6px); }
  .jug-disc { width: 84px; grid-row: 1 / 3; }
  .jug-disc::before { inset: 4%; }
  .jug-label { width: 28px; height: 28px; border-width: 2px; bottom: 12%; }
  .jug-out { min-height: 0; }
  .jug-out .t-cond { font-size: 1.35rem; }
  .jug-out span { font-size: 0.8125rem; }
  .jug .btn { min-width: 0; width: 100%; justify-content: center; padding: 11px 12px 10px; font-size: 1rem; min-height: 44px; }
  .panel-grid { display: flex; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .menu-photo .mp-video, .menu-photo .mp-img, .menu-photo figcaption { transition: none; } }
@media (max-width: 900px) { .taps { max-height: none; overflow: visible; padding-right: 0; } }
.menu-photo { grid-template-columns: minmax(0, 1fr); width: 100%; }
.menu-photo .mp-video, .menu-photo .mp-img { width: 100%; }
@media (max-width: 900px) { .menu-photo .mp-video { aspect-ratio: 1 / 1; } .menu-photo video { object-position: 50% 45%; } }
@media (max-width: 600px) {
  .band-img img { object-position: 38% 80%; }
  .band-cap { top: var(--s-3); bottom: auto; }
  .tap button { padding: 8px 12px 8px 8px; gap: 10px; grid-template-columns: 40px minmax(0, 1fr) auto; }
  .tap .lab, .tap .nolabel { width: 40px; height: 40px; }
  .tap .nm { font-size: 1.15rem; }
  .tap .mt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
figure, blockquote { margin: 0; }