/* Self-hosted fonts (latin subset). Served from the site itself, so no Google round trip blocks the first paint. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/anton-latin-1.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:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/jetbrains-mono-latin-1.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:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/manrope-latin-1.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}
:root{
    /* The site has one look. Opt out of browser/OS dark mode so nothing gets auto-darkened
       and native controls (date picker, select, scrollbars) stay light. */
    color-scheme:light only;
    --bg:#fbf7f1;
    --bg-2:#f2e9df;
    --panel:#ffffff;
    --ink:#1d1512;
    --ink-soft:#3a2d26;
    --muted:#6f6057;
    --line:rgba(29,21,18,.12);
    --line-2:rgba(29,21,18,.07);
    --orange:#ff6a13;
    --amber:#ffa41c;
    --red:#e01414;
    --ember:#ff3d2e;
    --dark:#191110;
    --grad:linear-gradient(100deg,#ffa41c 0%,#ff6a13 46%,#e01414 100%);
    --grad-soft:linear-gradient(120deg,#fff3e2,#ffe6d3);
    --maxw:1240px;
    --flag-h:38px;
    --ease:cubic-bezier(.2,.7,.2,1);
    --shadow:0 24px 60px -24px rgba(120,50,10,.35);
    --shadow-sm:0 12px 30px -14px rgba(80,40,10,.28);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;background:var(--bg);color-scheme:light only}
  body{
    background:var(--bg);color:var(--ink);
    font-family:'Manrope',sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--ember);color:#fff}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}

  /* subtle grain */
  body::after{
    content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.35;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    mix-blend-mode:multiply;
  }

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--red);display:inline-block;font-weight:700}
  .display{font-family:'Anton',sans-serif;font-weight:400;line-height:.92;letter-spacing:.01em;text-transform:uppercase}
  .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* ============ LOGO ============ */
  /* The mark is sliced into layers (wordmark, speaker cluster, three arcs) stacked in
     one box so the speakers can pump and the arcs can ripple independently. */
  .logo{display:inline-flex;align-items:center;user-select:none}
  .lg{position:relative;display:block;height:78px;aspect-ratio:852/452;
      transition:height .35s var(--ease),transform .35s var(--ease),filter .35s var(--ease)}
  .lg img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
  header.scrolled .lg{height:64px}
  footer .lg{height:110px}
  /* Roughly 38% of the logo is near-black: the wave arcs, "IT UP!" and the speaker
     detail. Over the dark hero those vanish entirely, so the mark reads as half
     missing. A white halo traces each shape's alpha edge and brings them back.
     Only while the header is transparent; on the cream scrolled header it is not
     needed and would look like a sticker. */
  /* The glow sits on each layer, not the wrapper: a filter on the wrapper had to be redrawn
     every frame the arcs rippled, which kept phones busy. Each moving layer is its own
     composited layer, so the glow is drawn once and the motion is handled by the GPU. */
  .lg{--halo:drop-shadow(0 0 0 rgba(0,0,0,0))}
  header:not(.scrolled) .lg{--halo:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 1px 7px rgba(255,255,255,.5))}
  .lg img{filter:var(--halo)}
  .lg .lg-spk,.lg .lg-arc{will-change:transform,opacity}
  .logo:hover .lg{transform:scale(1.04)}
  /* speakers pump like a sub on a kick; arcs ripple outward from the small speaker */
  .lg-spk{transform-origin:70% 62%}
  .lg-arc{transform-origin:76% 33%}
  @keyframes lgThump{0%{transform:scale(1) rotate(0)}12%{transform:scale(1.075) rotate(-1.2deg)}32%{transform:scale(.985) rotate(.5deg)}52%{transform:scale(1.02) rotate(-.25deg)}100%{transform:scale(1) rotate(0)}}
  @keyframes lgRipple{0%{opacity:.3;transform:scale(.86)}35%{opacity:1;transform:scale(1)}100%{opacity:.3;transform:scale(1.12)}}
  /* idle: a slow, quiet ripple on the arcs only */
  .lg .lg-arc{animation:lgRipple 3.6s ease-out infinite}
  .lg .lg-a2{animation-delay:.45s}
  .lg .lg-a3{animation-delay:.9s}
  /* play: on load, on hover, once when the footer mark scrolls in, and the whole time the site is live */
  .lg.play .lg-spk,body.is-live header .lg .lg-spk{animation:lgThump 1.1s cubic-bezier(.2,.8,.2,1) infinite}
  .lg.play .lg-arc,body.is-live header .lg .lg-arc{animation-duration:1.1s}
  .lg.play .lg-a2,body.is-live header .lg .lg-a2{animation-delay:.14s}
  .lg.play .lg-a3,body.is-live header .lg .lg-a3{animation-delay:.28s}
  /* beat glow: the orange in the letters flares on every thump, like a stage light hitting the beat */
  @keyframes lgFlare{0%{filter:var(--halo) brightness(1) drop-shadow(0 0 0 rgba(255,120,30,0))}12%{filter:var(--halo) brightness(1.22) saturate(1.25) drop-shadow(0 0 10px rgba(255,120,30,.75))}45%{filter:var(--halo) brightness(1) drop-shadow(0 0 0 rgba(255,120,30,0))}100%{filter:var(--halo) brightness(1) drop-shadow(0 0 0 rgba(255,120,30,0))}}
  .lg.play .lg-word,body.is-live header .lg .lg-word{animation:lgFlare 1.1s ease-out infinite}
  @media (prefers-reduced-motion:reduce){ .lg{transition:none} .lg img{animation:none!important} .logo:hover .lg{transform:none} }

  /* ============ NAV ============ */
  /* ============ DEMO BANNER ============ */
  .demo-flag{position:fixed;top:0;left:0;right:0;z-index:1100;background:var(--dark);color:#f7efe9;text-align:center;padding:.6rem 1rem;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.45}
  .demo-flag .flag-tag{display:inline-block;background:var(--grad);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.2em;padding:.24em .72em;border-radius:100px;margin-right:.55rem;vertical-align:baseline}
  .demo-flag strong{color:var(--amber)}
  .demo-flag a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(255,164,28,.45);transition:.25s}
  .demo-flag a:hover{color:#fff;border-bottom-color:#fff}

  header{position:fixed;top:var(--flag-h);left:0;right:0;z-index:1000;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
  header.scrolled{background:rgba(251,247,241,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2);box-shadow:0 4px 30px -20px rgba(80,40,10,.5)}
  header.over-dark{background:rgba(20,13,11,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 30px -18px rgba(0,0,0,.8)}
  nav{display:flex;align-items:center;justify-content:space-between;height:98px}
  .nav-links{display:flex;gap:34px;align-items:center}
  .nav-links a:not(.btn),.nav-links .sub-toggle{font-size:14px;font-weight:700;color:var(--ink-soft);position:relative;transition:.25s}
  .nav-links .sub-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
  .nav-links .sub-toggle svg{transition:transform .25s var(--ease)}
  .has-sub.open .sub-toggle svg,.has-sub:hover .sub-toggle svg{transform:rotate(180deg)}
  .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--grad);transition:.3s var(--ease)}
  .nav-links a:not(.btn):hover{color:var(--ink)}
  .nav-links a:not(.btn):hover::after{width:100%}
  /* over the dark hero video the header is transparent, so links must go light */
  header:not(.scrolled) .nav-links a:not(.btn),header:not(.scrolled) .nav-links .sub-toggle{color:rgba(255,255,255,.9);text-shadow:0 1px 14px rgba(0,0,0,.5)}
  header:not(.scrolled) .nav-links .sub-toggle:hover,header:not(.scrolled) .nav-links .sub-toggle.active{color:#fff}
  .nav-links .sub-toggle:hover,.nav-links .sub-toggle.active{color:var(--ink)}
  header:not(.scrolled) .nav-links a:not(.btn):hover{color:#fff}
  header:not(.scrolled) .burger span{background:#fff}
  .btn{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:14px;padding:14px 26px;border-radius:100px;background:var(--grad);color:#fff;border:0;cursor:pointer;transition:.3s var(--ease);box-shadow:0 10px 26px -8px rgba(224,20,20,.5)}
  .btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -8px rgba(224,20,20,.6)}
  .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
  .btn.ghost:hover{border-color:var(--orange);background:rgba(255,106,19,.07)}
  .btn.dark{background:var(--dark);color:#fff;box-shadow:var(--shadow-sm)}
  .btn.dark:hover{background:#000}
  .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
  .burger span{width:26px;height:2px;background:var(--ink);transition:.3s var(--ease);transform-origin:center}
  .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.is-open span:nth-child(2){opacity:0}
  .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ============ HERO (full-bleed video) ============ */
  .hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:calc(150px + var(--flag-h)) 0 130px;overflow:hidden;background:#0d0705}
  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(1.04)}
  /* scrim: darken for legibility, then melt into the cream page at the bottom */
  .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
    linear-gradient(95deg,rgba(10,6,4,.9) 0%,rgba(10,6,4,.8) 30%,rgba(10,6,4,.45) 50%,rgba(10,6,4,.06) 68%,transparent 100%),
    radial-gradient(ellipse 55% 55% at 12% 30%,rgba(255,106,19,.12),transparent 70%),
    linear-gradient(180deg,rgba(10,6,4,.55) 0%,transparent 22%,transparent 62%,var(--bg) 99%)}
  /* the rig's own colours are the point of this video: the right side stays clear so they read true */
  .hero-tag{position:absolute;z-index:3;top:64%;right:max(28px,calc((100vw - var(--maxw))/2 + 28px));display:flex;align-items:center;gap:9px;
    padding:9px 15px;border-radius:999px;background:rgba(15,9,7,.46);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.86);opacity:0;animation:fade 1s 1.2s forwards}
  .hero-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange)}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hero-tag{background:rgba(15,9,7,.78)}}
  .hero-particles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
  .hero-particles i{position:absolute;bottom:-14px;border-radius:50%;background:radial-gradient(circle,rgba(255,150,40,.95),rgba(255,110,15,0));animation:riseP linear infinite}
  @keyframes riseP{0%{transform:translateY(0) scale(1);opacity:0}12%{opacity:.9}100%{transform:translateY(-96vh) scale(.35);opacity:0}}
  /* page headers are about half the height of the Home hero: shorter climb, same pace */
  .page-hero .hero-particles i{animation-name:riseS}
  @keyframes riseS{0%{transform:translateY(0) scale(1);opacity:0}12%{opacity:.9}100%{transform:translateY(-58vh) scale(.35);opacity:0}}

  .hero-inner{position:relative;z-index:3;width:100%}
  .hero-copy{max-width:760px}
  .hero .eyebrow{color:var(--amber)}
  /* sized so "We make your event" always fits on one line (Anton is about 8.1x the font size wide for it) */
  .hero h1{font-size:clamp(34px,calc((100vw - 56px) / 8.3),86px);margin:18px 0 0;color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.5)}
  .hero h1 .line{display:block;overflow:hidden;padding-bottom:.03em;white-space:nowrap}
  .hero h1 .line span{display:block;transform:translateY(110%);animation:rise 1s var(--ease) forwards}
  .hero h1 .line:nth-child(2) span{animation-delay:.12s}
  .hero h1 .line:nth-child(3) span{animation-delay:.24s}
  @keyframes rise{to{transform:translateY(0)}}
  .hero-sub{max-width:520px;color:rgba(255,255,255,.84);font-size:clamp(16px,1.7vw,19px);margin:24px 0 32px;opacity:0;animation:fade 1s var(--ease) .5s forwards}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;opacity:0;animation:fade 1s var(--ease) .65s forwards}
  .hero-cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(4px)}
  .hero-cta .btn.ghost:hover{border-color:var(--orange);background:rgba(255,106,19,.16)}
  /* outline buttons on any dark page hero (used by the 404 page) */
  .page-hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35)}
  .page-hero .btn.ghost:hover{border-color:var(--orange);background:rgba(255,106,19,.16)}
  @keyframes fade{to{opacity:1}}
  .hero-trust{display:flex;align-items:center;gap:12px;margin-top:26px;opacity:0;animation:fade 1s .75s forwards}
  .hero-trust b{font-size:13.5px;color:rgba(255,255,255,.72);font-weight:700}
  .hero-eq{display:flex;align-items:flex-end;gap:5px;height:34px;margin-top:28px;opacity:0;animation:fade 1s .85s forwards}
  .hero-eq i{width:5px;height:34px;background:var(--grad);border-radius:3px;transform-origin:50% 100%;animation:eq 1s ease-in-out infinite alternate}
  @keyframes eq{from{transform:scaleY(.15)}to{transform:scaleY(1)}}

  .hv-chip{position:absolute;right:6%;bottom:20%;z-index:3;background:rgba(255,255,255,.97);border-radius:16px;padding:16px 22px;box-shadow:var(--shadow);animation:bob 6.5s ease-in-out infinite;backdrop-filter:blur(6px)}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  .hv-chip b{font-family:'Anton',sans-serif;font-size:32px;display:block;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .hv-chip span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .hero-scroll{position:absolute;bottom:auto;top:calc(min(100%, 100svh) - 86px);left:50%;transform:translateX(-50%);z-index:3;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.28em;color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.55);font-weight:700;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px;opacity:0;animation:fade 1s 1.1s forwards}
  .hero-scroll .m{width:22px;height:34px;border:1.5px solid rgba(255,255,255,.75);box-shadow:0 2px 14px rgba(0,0,0,.35),inset 0 0 8px rgba(0,0,0,.2);border-radius:20px;position:relative}
  .hero-scroll .m::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:4px;height:7px;background:var(--orange);border-radius:2px;animation:scr 1.6s infinite}
  @keyframes scr{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,13px)}}
  @media(prefers-reduced-motion:reduce){.hero-video{display:none}.hv-chip,.hero-particles i{animation:none}}


  /* ============ SECTION SHELL ============ */
  .sec{padding:120px 0;position:relative}
  .sec-head{max-width:720px;margin-bottom:60px}
  .sec-head h2{font-size:clamp(38px,6vw,74px);margin:16px 0 0}
  .sec-head p{color:var(--ink-soft);margin-top:18px;font-size:18px}
  .reveal{opacity:0;transform:translateY(40px);transition:1s var(--ease)}
  .reveal.in{opacity:1;transform:none}

  /* ============ SERVICES ============ */
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .pillar{position:relative;background:var(--panel);border:1px solid var(--line-2);border-radius:22px;padding:38px 32px 40px;overflow:hidden;transition:.5s var(--ease);box-shadow:var(--shadow-sm)}
  .pillar:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
  .pillar .ico{width:58px;height:58px;border-radius:15px;display:grid;place-items:center;background:var(--grad-soft);border:1px solid rgba(255,106,19,.2);margin-bottom:26px;color:var(--orange)}
  .pillar h3{font-family:'Anton',sans-serif;font-size:30px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:12px}
  .pillar p{color:var(--muted);font-size:15px}
  .pillar ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:9px}
  .pillar li{font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px;color:var(--ink-soft)}
  .pillar li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}


  /* ============ CREW / ABOUT ============ */
  .crew{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
  .crew-img{position:relative}
  .crew-img .ci-main{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);border:6px solid #fff;aspect-ratio:4/5}
  .crew-img .ci-main img{width:100%;height:100%;object-fit:cover}
  .crew-img .ci-sub{position:absolute;right:-22px;bottom:-22px;width:46%;border-radius:16px;overflow:hidden;border:5px solid #fff;box-shadow:var(--shadow);aspect-ratio:1/1}
  .crew-img .ci-sub img{width:100%;height:100%;object-fit:cover}
  .crew h2{font-size:clamp(34px,5vw,64px);margin:14px 0 18px}
  .crew p{color:var(--ink-soft);font-size:17px;margin-bottom:16px;max-width:520px}
  .crew .cred{margin-top:24px;display:inline-flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:10px 18px}
  .crew .cred b{color:var(--red)}

  /* ============ STATS ============ */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:66px 0}
  .stat h3{font-family:'Anton',sans-serif;font-size:clamp(46px,7vw,84px);line-height:1}
  .stat p{color:var(--muted);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:8px}

  /* ============ EVENTS ============ */
  .events{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .ev{border:1px solid var(--line-2);border-radius:16px;padding:28px 24px;background:var(--panel);transition:.4s var(--ease);box-shadow:var(--shadow-sm)}
  .ev:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .ev h3{font-size:19px;margin:0 0 8px;font-weight:800}
  .ev p{font-size:13.5px;color:var(--muted)}

  /* ============ PROCESS ============ */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  .step{padding:34px 26px;border-left:1px solid var(--line);position:relative}
  .step:first-child{border-left:0}
  .step h3{font-family:'Anton',sans-serif;font-size:24px;text-transform:uppercase;margin:0 0 10px}
  .step p{color:var(--muted);font-size:14.5px}

  /* ============ SERVE IT UP ============ */
  .serve{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line-2);padding:70px 56px;background:var(--grad-soft);box-shadow:var(--shadow-sm)}
  .serve::before{content:"";position:absolute;right:-40px;top:-40px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(224,20,20,.16),transparent 70%)}
  .serve-grid{position:relative;display:grid;grid-template-columns:1.3fr .9fr;gap:44px;align-items:center}
  .serve h3{font-family:'Anton',sans-serif;font-size:clamp(34px,5vw,58px);text-transform:uppercase;line-height:.95;margin:16px 0 18px}
  .serve p{color:var(--ink-soft);max-width:520px;margin-bottom:26px}
  .serve-menu{background:#fff;border:1px solid var(--line-2);border-radius:18px;padding:28px;box-shadow:var(--shadow-sm)}
  .serve-menu .menu-photo{width:100%;height:180px;object-fit:cover;border-radius:12px;margin-bottom:18px}
  .serve-menu .row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14px;gap:14px}
  .serve-menu .row:last-child{border-bottom:0}
  .serve-menu .row span:first-child{font-weight:700}
  .serve-menu .row span:last-child{font-family:'JetBrains Mono',monospace;color:var(--red);white-space:nowrap}
  .serve-menu .mh{font-family:'Anton',sans-serif;font-size:20px;text-transform:uppercase;color:var(--orange);margin-bottom:8px}

  /* ============ TESTIMONIAL ============ */
  .quote{max-width:960px;margin:0 auto;text-align:center}
  .quote blockquote{font-family:'Anton',sans-serif;font-size:clamp(28px,4.4vw,52px);text-transform:uppercase;line-height:1.06}
  .quote blockquote em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .quote .who{margin-top:30px;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

  /* ============ BOOK / CTA (dark) ============ */
  .book{position:relative;border-radius:28px;overflow:hidden;background:var(--dark);color:#fff;padding:80px 56px;text-align:center;isolation:isolate}
  .book .bimg{position:absolute;inset:0;z-index:-2;opacity:.28;object-fit:cover;width:100%;height:100%}
  .book::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(25,17,16,.6),rgba(25,17,16,.9)),radial-gradient(circle at 80% 10%,rgba(255,106,19,.4),transparent 45%)}
  .book h2{font-family:'Anton',sans-serif;font-size:clamp(40px,7vw,90px);text-transform:uppercase;line-height:.95}
  .book h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .book p{max-width:560px;margin:20px auto 34px;font-weight:500;color:rgba(255,255,255,.82)}
  .book-contacts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
  .book-contacts a{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;padding:11px 18px;border:1px solid rgba(255,255,255,.22);border-radius:100px;transition:.3s}
  .book-contacts a:hover{background:rgba(255,255,255,.1);border-color:var(--orange)}

  /* ============ FOOTER ============ */
  /* extra bottom padding = empty parking strip for the fixed demo toggle at page end */
  footer{padding:78px 0 104px;background:var(--bg-2)}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px}
  .foot-grid p{color:var(--muted);font-size:14px;margin-top:18px;max-width:300px}
  .foot-col .foot-h{margin-top:0;font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;font-family:'JetBrains Mono',monospace}
  .foot-col a{display:block;color:var(--ink-soft);font-size:15px;margin-bottom:12px;transition:.25s;font-weight:700}
  .foot-col a:hover{color:var(--orange);padding-left:6px}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;flex-wrap:wrap;gap:14px}
  .foot-bottom a{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
  .foot-bottom a:hover{color:var(--orange)}

  /* ============ LIVE MODE (demo) ============ */
  .nav-left{display:flex;align-items:center;gap:14px}
  .live-badge{display:none;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--red);padding:8px 13px;border-radius:100px;box-shadow:0 6px 18px -6px rgba(224,20,20,.7)}
  .live-badge .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:livePulse 1.2s infinite}
  @keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.55)}}
  body.is-live .live-badge{display:inline-flex}

  .live-sec{display:none;background:linear-gradient(180deg,#170e0b,#20140f);color:#f7efe9}
  body.is-live .live-sec,body.live-ended .live-sec{display:block}
  /* the ended panel fades out on its own a few minutes after the stream stops (main.js) */
  .live-sec{transition:opacity .7s ease}
  body.live-ending .live-sec{opacity:0}
  /* ended state: same section, different copy, recording link instead of the live one */
  .live-sec .lh-off,.live-sec .live-rec,.player .p-ended{display:none}
  body.live-ended .live-sec .lh-on,body.live-ended .live-sec .live-yt,body.live-ended .live-help,body.live-ended .player .player-ov{display:none}
  body.live-ended .live-sec .lh-off{display:block}
  body.live-ended .live-sec .live-rec{display:inline-flex}
  body.live-ended .live-sec .lh-off .live-now{background:rgba(255,255,255,.14)}
  body.live-ended .live-sec .lh-off .live-now .dot{animation:none;background:rgba(255,255,255,.55)}
  .player .p-ended{position:absolute;inset:0;z-index:2;place-items:center;text-align:center;background:rgba(12,7,5,.72);backdrop-filter:blur(3px)}
  body.live-ended .player .p-ended{display:grid}
  .player .p-ended b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(26px,4vw,40px);text-transform:uppercase;color:#fff;letter-spacing:.02em}
  .player .p-ended span{display:block;margin-top:6px;color:rgba(255,255,255,.72);font-size:15px}
  body.live-ended .player iframe{display:none}
  .live-sec .live-head{max-width:720px;margin-bottom:38px}
  .live-sec .live-now{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--red);padding:7px 15px;border-radius:100px}
  .live-sec .live-now .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:livePulse 1.2s infinite}
  .live-sec h2{font-size:clamp(34px,5.5vw,66px);margin:18px 0 12px}
  .live-sec .live-head p{color:rgba(255,255,255,.72);font-size:17px}
  .live-sec .live-head strong{color:var(--amber)}
  .player{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.1)}
  .player>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .player-ov{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,transparent,rgba(10,6,5,.55));display:flex;align-items:center;justify-content:center}
  .player .p-live{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:12px;letter-spacing:.14em;color:#fff;background:var(--red);padding:7px 13px;border-radius:8px}
  .player .p-live .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:livePulse 1.2s infinite}
  .player .p-play{width:84px;height:84px;border-radius:50%;border:0;cursor:pointer;background:var(--grad);color:#fff;font-size:27px;padding-left:6px;display:grid;place-items:center;box-shadow:0 12px 40px -8px rgba(224,20,20,.7);position:relative}
  .player .p-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:pring 1.8s ease-out infinite}
  @keyframes pring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.45);opacity:0}}
  .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
  .player.playing>img,.player.playing .player-ov{display:none}
  .live-help{margin-top:16px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.62);max-width:680px}
  .live-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
  .live-cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.28)}
  .live-cta .btn.ghost:hover{border-color:var(--orange);background:rgba(255,106,19,.12)}

  /* demo control to preview live mode */
  /* frosted glass so the page stays readable underneath it */
  .demo-live-toggle{position:fixed;right:20px;bottom:20px;z-index:1200;display:inline-flex;align-items:center;gap:11px;background:rgba(25,17,16,.34);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);color:#fff;border:1px solid rgba(255,255,255,.32);border-radius:100px;padding:11px 20px 11px 13px;cursor:pointer;font-family:'Manrope',sans-serif;text-align:left;box-shadow:0 10px 30px -12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.22);text-shadow:0 1px 2px rgba(0,0,0,.35);transition:background .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease)}
  @supports not (backdrop-filter:blur(1px)){.demo-live-toggle{background:rgba(25,17,16,.72)}}
  .demo-live-toggle:hover{transform:translateY(-2px)}
  .demo-live-toggle .lt-ic{width:30px;height:30px;border-radius:50%;background:var(--grad);display:grid;place-items:center;flex:none}
  .demo-live-toggle .lt-ic::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff}
  .demo-live-toggle.on .lt-ic::after{background:var(--red)}
  .demo-live-toggle small{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:700;line-height:1;margin-bottom:2px}
  .demo-live-toggle .lt-label{font-weight:800;font-size:13.5px;line-height:1}
  .demo-live-toggle.on{background:rgba(224,20,20,.5);border-color:rgba(255,255,255,.4)}
  .demo-live-toggle.on .lt-ic{background:#fff;color:var(--red)}

  /* ============ RESPONSIVE ============ */
  @media(max-width:960px){
    .hero{min-height:88vh;padding:calc(120px + var(--flag-h)) 0 110px}
    .hv-chip{right:5%;bottom:12%;padding:13px 18px}
    .hv-chip b{font-size:26px}
    .hero-scroll{display:none}
    .pillars{grid-template-columns:1fr}
    .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
    .g1,.g2,.g3,.g4,.g5{grid-column:span 1;grid-row:span 1}
    .g1{grid-column:span 2;grid-row:span 2}
    .crew{grid-template-columns:1fr;gap:60px}
    .stats{grid-template-columns:repeat(2,1fr);gap:40px 24px}
    .events{grid-template-columns:repeat(2,1fr)}
    .steps{grid-template-columns:1fr 1fr}
    .step{border-top:1px solid var(--line)}
    .step:nth-child(-n+2){border-top:0}
    .step:nth-child(odd){border-left:0}
    .serve-grid{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:680px){
    /* closed: pushed fully above the viewport AND hidden, so nothing peeks over the header */
    .nav-links{position:fixed;inset:calc(var(--flag-h) + 98px) 0 auto 0;background:rgba(251,247,241,.98);backdrop-filter:blur(14px);flex-direction:column;padding:30px;gap:20px;transform:translateY(calc(-100% - 98px - var(--flag-h)));visibility:hidden;transition:transform .4s var(--ease),visibility 0s linear .4s;border-bottom:1px solid var(--line)}
    .nav-links.open{transform:none;visibility:visible;transition:transform .4s var(--ease),visibility 0s}
    /* dropdown sits on a cream panel, so links stay dark even over the hero */
    header .nav-links a:not(.btn),header:not(.scrolled) .nav-links a:not(.btn){color:var(--ink-soft);text-shadow:none}
    header .nav-links a:not(.btn):hover,header:not(.scrolled) .nav-links a:not(.btn):hover{color:var(--ink)}
    .burger{display:flex}
    .nav-links .btn{width:100%;justify-content:center}
    .sec{padding:80px 0}
    .events{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .step{border-left:0;border-top:1px solid var(--line)}
    .step:first-child{border-top:0}
    .foot-grid{grid-template-columns:1fr}
    .serve,.book{padding:44px 26px}
    .hv-chip{display:none}
    .demo-flag{font-size:.58rem;letter-spacing:.06em;padding:.5rem .8rem}
    /* footer: everything centred on phones */
    footer{text-align:center}
    .foot-grid{gap:34px;margin-bottom:40px}
    .foot-grid p{margin:14px auto 0}
    .foot-col .foot-h{margin-bottom:14px}
    .foot-col a:hover{padding-left:0}
    .foot-bottom{flex-direction:column;justify-content:center;gap:8px;text-align:center}
  }


/* ============ INNER PAGE HERO ============ */
.page-hero{position:relative;min-height:52vh;display:flex;align-items:flex-end;padding:calc(150px + var(--flag-h)) 0 62px;overflow:hidden;background:#0d0705}
.page-hero .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(1.03)}
/* video variant of the page hero: the poster carries the frame if autoplay is refused */
.page-hero .ph-video{background:#0d0705 center/cover no-repeat}
@media(prefers-reduced-motion:reduce){.page-hero .ph-video{display:none}}
.page-hero .ph-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(95deg,rgba(10,6,4,.9) 0%,rgba(10,6,4,.72) 42%,rgba(10,6,4,.4) 100%),
  linear-gradient(180deg,rgba(10,6,4,.6) 0%,transparent 35%,transparent 68%,var(--bg) 99%)}
.page-hero .wrap{position:relative;z-index:3}
.page-hero .eyebrow{color:var(--amber)}
.page-hero h1{font-family:'Anton',sans-serif;font-weight:400;line-height:.94;text-transform:uppercase;font-size:clamp(40px,6.4vw,86px);color:#fff;margin:16px 0 0;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.page-hero p{max-width:560px;color:rgba(255,255,255,.84);font-size:clamp(16px,1.7vw,19px);margin-top:18px}

/* nav active state */
.nav-links a.active:not(.btn){color:var(--ink)}
.nav-links a.active:not(.btn)::after{width:100%}
header:not(.scrolled) .nav-links a.active:not(.btn){color:#fff}
/* ============ EVENT SOLUTIONS DROPDOWN ============ */
.has-sub{position:relative}
.has-sub .sub{position:absolute;top:100%;left:-16px;min-width:210px;padding:10px;margin-top:18px;background:rgba(251,247,241,.98);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -22px rgba(25,17,16,.45);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;z-index:5}
.has-sub .sub::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.has-sub:hover .sub,.has-sub.open .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s}
header .nav-links .sub a:not(.btn),header:not(.scrolled) .nav-links .sub a:not(.btn){display:block;padding:10px 14px;border-radius:10px;color:var(--ink-soft);text-shadow:none;font-size:14px}
header .nav-links .sub a:not(.btn):hover,header:not(.scrolled) .nav-links .sub a:not(.btn):hover{background:#fff;color:var(--ink)}
.nav-links .sub a:not(.btn)::after{display:none}
.svc[id]{scroll-margin-top:calc(var(--flag-h) + 150px)}
body.is-live .svc[id]{scroll-margin-top:calc(var(--flag-h) + 198px)}
@media(max-width:680px){
  .has-sub{width:100%;text-align:center}
  .nav-links .sub-toggle{width:100%;justify-content:center;font-size:inherit}
  header .nav-links .sub-toggle,header:not(.scrolled) .nav-links .sub-toggle{color:var(--ink-soft);text-shadow:none}
  .has-sub .sub{position:static;margin:0;padding:0;min-width:0;background:none;border:0;box-shadow:none;backdrop-filter:none;display:none;opacity:1;visibility:visible;transform:none;transition:none;gap:0}
  .has-sub:hover .sub{display:none}
  .has-sub.open .sub{display:flex;margin-top:12px;padding:6px 0 2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  header .nav-links .sub a:not(.btn),header:not(.scrolled) .nav-links .sub a:not(.btn){padding:10px;font-size:15px;color:var(--muted)}
  header .nav-links .sub a:not(.btn):hover{background:none;color:var(--ink)}
}

/* ============ SERVICE DETAIL BLOCKS ============ */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:96px}
.svc:last-child{margin-bottom:0}
.svc.flip .svc-img{order:2}
.svc-img{border-radius:22px;overflow:hidden;border:6px solid #fff;box-shadow:var(--shadow);aspect-ratio:4/3}
.svc-img img{width:100%;height:100%;object-fit:cover}
/* a service block can carry a muted video loop; the still only shows under reduced motion */
.svc-img video{width:100%;height:100%;object-fit:cover;display:block;background:#0d0705}
.svc-img .svc-still{display:none}
@media(prefers-reduced-motion:reduce){.svc-img video{display:none}.svc-img .svc-still{display:block}}
.svc h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(32px,4.6vw,56px);line-height:.96;margin:16px 0 16px}
.svc p{color:var(--ink-soft);font-size:17px;margin-bottom:20px;max-width:520px}
.svc ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-bottom:8px}
.svc li{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:9px;color:var(--ink-soft)}
.svc li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}


/* ============ CONTACT PAGE ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-card{background:var(--panel);border:1px solid var(--line-2);border-radius:20px;padding:34px;box-shadow:var(--shadow-sm)}
.contact-card h3{font-family:'Anton',sans-serif;font-size:26px;text-transform:uppercase;margin-bottom:20px}
.c-row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.c-row:last-child{border-bottom:0}
.c-row .ic{width:42px;height:42px;border-radius:11px;background:var(--grad-soft);border:1px solid rgba(255,106,19,.2);display:grid;place-items:center;color:var(--orange);flex:none}
.c-row .lbl{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px}
.c-row .val{font-weight:700;font-size:16px;color:var(--ink);word-break:break-word}
.c-row a.val:hover{color:var(--orange)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:7px;font-weight:700}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;background:#fff;font-family:'Manrope',sans-serif;font-size:15px;color:var(--ink);transition:.25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,106,19,.12)}
.field textarea{min-height:130px;resize:vertical}
.field input,.field select,.field textarea{color-scheme:light only;-webkit-text-fill-color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:#a2948c;-webkit-text-fill-color:#a2948c;opacity:1}
.field select option{background:#fff;color:var(--ink)}
.form-note{font-size:12.5px;color:var(--muted);margin-top:12px}

@media(max-width:960px){
  .svc{grid-template-columns:1fr;gap:32px;margin-bottom:64px}
  .svc.flip .svc-img{order:0}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .page-hero{min-height:auto;padding:calc(130px + var(--flag-h)) 0 52px}
}
@media(max-width:680px){
  .svc ul{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .contact-card{padding:24px}
}


/* ============ PRIME SELECTS CREDIT ============
   Same treatment as the Sonia's Homestyle build, retoned for this cream footer:
   the sweep there is white on near-black, so here it runs brighter to stay
   visible against var(--bg-2). */
.foot-credit{text-align:center;margin-top:1.3rem;font-size:.78rem;letter-spacing:.02em;color:var(--muted)}
.foot-credit strong{color:var(--ink-soft);font-weight:700;transition:color .3s ease}
.foot-credit a{display:inline-flex;align-items:center;gap:.4em;vertical-align:middle;text-decoration:none;
               position:relative;overflow:hidden;padding:.15em .35em;margin:-.15em -.35em;border-radius:6px}
.foot-credit a img{width:1.15em;height:1.15em;display:block}
.foot-credit a:hover strong{color:var(--ink)}
/* Glass sweep: a skewed bar of light crosses the credit on hover. overflow:hidden
   on the anchor clips it to the link, and the negative margin cancels the padding
   that gives the sweep somewhere to travel, so layout is unchanged. */
.foot-credit a::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,196,140,.55) 38%,rgba(255,255,255,.98) 50%,rgba(255,196,140,.55) 62%,transparent);
  transform:skewX(-18deg);pointer-events:none;opacity:0;
}
/* .swept is added by script when the credit scrolls into view. Touch devices have
   no hover, so without it the sweep would never play on a phone. */
.foot-credit a:hover::after,
.foot-credit a.swept::after{opacity:1;animation:creditSweep .85s ease-out}
@keyframes creditSweep{ from{left:-60%} to{left:130%} }
@media (prefers-reduced-motion:reduce){
  .foot-credit a::after{display:none}
  .foot-credit strong{transition:none}
}

/* ============ BEFORE / AFTER SLIDER ============ */
.ba{--pos:50%;position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);border:6px solid #fff;aspect-ratio:3/2;user-select:none;touch-action:none;cursor:ew-resize;background:#111}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
/* the "before" sits on top and is clipped to the handle, so dragging right reveals more of it */
.ba .ba-top{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 12px 32px -8px rgba(224,20,20,.75);border:3px solid #fff;cursor:ew-resize;outline:0}
.ba-knob:focus-visible{box-shadow:0 0 0 5px rgba(255,106,19,.35),0 12px 32px -8px rgba(224,20,20,.75)}
.ba-knob svg{width:22px;height:22px}
.ba-label{position:absolute;top:16px;display:flex;flex-direction:column;gap:3px;font-family:'Manrope',sans-serif;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.9);background:rgba(0,0,0,.6);padding:9px 14px 10px;border-radius:12px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);pointer-events:none;box-shadow:0 8px 24px -10px rgba(0,0,0,.6)}
.ba-label{transition:opacity .25s ease,transform .25s ease}
.ba-label.off{opacity:0;transform:translateY(-6px)}
.ba-label b{font-family:'Anton',sans-serif;font-weight:400;font-size:20px;letter-spacing:.06em;text-transform:uppercase;line-height:1;color:#fff}
.ba-label.l{left:16px}
.ba-label.r{right:16px;text-align:right;align-items:flex-end;background:var(--grad);border-color:rgba(255,255,255,.35);color:#fff}
@media(max-width:680px){.ba-label{top:12px;padding:7px 11px 8px;font-size:10.5px}.ba-label b{font-size:16px}.ba-label.l{left:12px}.ba-label.r{right:12px}}
.ba-hint{text-align:center;margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ============ BUILD STORY (sticky image, scrolling steps) ============ */
.story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.story-stage{position:sticky;top:calc(var(--flag-h) + 112px)}
.story-frames{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;border:6px solid #fff;box-shadow:var(--shadow);background:#111}
.story-frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .65s var(--ease),transform 7s linear}
.story-frames img.is-on{opacity:1;transform:scale(1)}
.story-bar{height:4px;background:var(--line);border-radius:4px;margin-top:16px;overflow:hidden}
.story-bar i{display:block;height:100%;width:12.5%;background:var(--grad);transition:width .5s var(--ease)}
.story-steps{display:flex;flex-direction:column;padding-top:6px}
.story-step{position:relative;padding:30px 0 30px 30px;border-left:2px solid var(--line);opacity:.38;transition:opacity .4s var(--ease)}
.story-step.is-on{opacity:1}
.story-step::before{content:"";position:absolute;left:-7px;top:40px;width:12px;height:12px;border-radius:50%;background:var(--line);transition:.3s var(--ease)}
.story-step.is-on::before{background:var(--orange);box-shadow:0 0 0 6px rgba(255,106,19,.18)}
.story-step h3{font-family:'Anton',sans-serif;font-size:26px;text-transform:uppercase;letter-spacing:.01em;margin:1.33em 0 8px}
.story-step p{color:var(--ink-soft);font-size:15.5px;max-width:420px}

@media(max-width:960px){
  .story-grid{grid-template-columns:1fr;gap:26px}
  /* stacked layout: the pinned photo must paint ABOVE the steps scrolling under it, on an opaque backing */
  .story-stage{top:calc(var(--flag-h) + 106px);z-index:3;background:var(--bg);padding-bottom:12px;margin-bottom:-12px}
  .story-frames{aspect-ratio:16/10}
  .story-step{padding:22px 0 22px 24px}
  .story-step h3{font-size:22px}
  .ba{aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){
  .story-frames img{transition:opacity .2s;transform:none}
}

/* ============ WORK FILMSTRIP (pinned section, strip slides with scroll) ============
   The sticky panel starts below the fixed header so nothing sits under the nav. */
.strip{height:320vh;position:relative}
.strip-sticky{position:sticky;top:calc(var(--flag-h) + 98px);height:calc(100vh - var(--flag-h) - 98px);display:flex;align-items:center;overflow:hidden;background:var(--dark)}
.strip-track{display:flex;gap:22px;padding:0 6vw;will-change:transform}
.strip-track figure{position:relative;flex:none;width:min(60vw,720px);aspect-ratio:3/2;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);margin:0}
.strip-track img{width:100%;height:100%;object-fit:cover;display:block}
.strip-track figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(180deg,transparent,rgba(15,8,6,.85));color:#fff}
.strip-track figcaption .tag{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);font-weight:700;margin-bottom:5px}
.strip-track figcaption h3{font-family:'Anton',sans-serif;font-size:22px;text-transform:uppercase;margin:0}
.strip-progress{position:absolute;left:6vw;right:6vw;bottom:28px;height:3px;background:rgba(255,255,255,.18);border-radius:3px;overflow:hidden}
.strip-progress i{display:block;height:100%;width:0;background:var(--grad)}
.strip-hint{position:absolute;top:24px;left:6vw;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55)}
@media(max-width:960px){
  .strip{height:280vh}
  .strip-track figure{width:82vw}
}
@media(prefers-reduced-motion:reduce){
  /* no pinning: it becomes a plain sideways-scrolling row */
  .strip{height:auto}
  .strip-sticky{position:static;height:auto;padding:40px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .strip-track{transform:none !important}
  .strip-progress,.strip-hint{display:none}
}

/* ============ SPLIT PAGE HERO (About) ============
   A group portrait cannot be cover-cropped into a wide band or sat under the
   heading without losing heads, so this variant frames the photo beside the
   text. The frame is 3:2, the same as the photo, so nothing is cropped. */
.page-hero.split{align-items:center;min-height:0;padding:calc(130px + var(--flag-h)) 0 70px;background:#0d0705}
.page-hero.split::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(ellipse 60% 70% at 78% 40%,rgba(255,106,19,.22),transparent 70%),
  linear-gradient(180deg,rgba(10,6,4,0) 0%,rgba(10,6,4,0) 82%,var(--bg) 100%)}
.page-hero.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.page-hero.split .ph-fig{position:relative;margin:0;border-radius:22px;overflow:hidden;border:6px solid #fff;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);aspect-ratio:3/2;background:#111}
.page-hero.split .ph-fig img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:960px){
  .page-hero.split{padding:calc(120px + var(--flag-h)) 0 56px}
  .page-hero.split .wrap{grid-template-columns:1fr;gap:30px}
}

/* ---- slider idle cue: the knob wiggles and pulses until first use, so people know it moves ---- */
.ba-knob::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.65);opacity:0;pointer-events:none}
.ba.idle .ba-knob{animation:baWiggle 2.6s ease-in-out infinite}
.ba.idle .ba-knob::before{animation:baRing 2.6s ease-out infinite}
@keyframes baWiggle{
  0%,100%{transform:translate(-50%,-50%)}
  14%{transform:translate(calc(-50% - 10px),-50%)}
  28%{transform:translate(calc(-50% + 10px),-50%)}
  42%{transform:translate(calc(-50% - 6px),-50%)}
  54%{transform:translate(calc(-50% + 3px),-50%)}
  62%{transform:translate(-50%,-50%)}
}
@keyframes baRing{
  0%{transform:scale(1);opacity:.75}
  60%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .ba.idle .ba-knob,.ba.idle .ba-knob::before{animation:none}
}

/* ============ LIVE PROMINENCE ============ */
/* full-width bar pinned just under the nav while on air */
.live-bar{position:fixed;left:0;right:0;top:calc(var(--flag-h) + 98px);z-index:990;display:none;align-items:center;justify-content:center;gap:14px;padding:11px 18px;background:linear-gradient(90deg,#c50f0f,#e01414 50%,#ff3d2e);color:#fff;font-weight:800;font-size:13.5px;letter-spacing:.02em;box-shadow:0 10px 30px -10px rgba(224,20,20,.65);transform:translateY(-8px);opacity:0}
body.is-live .live-bar{display:flex;animation:liveBarIn .5s var(--ease) forwards}
@keyframes liveBarIn{to{transform:none;opacity:1}}
.live-bar .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:livePulse 1.2s infinite;flex:none}
.live-bar .lb-tag{font-family:'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;font-size:11.5px}
.live-bar .lb-venue{opacity:.92;font-weight:600}
.live-bar a{color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.live-bar a:hover{text-decoration-thickness:2px}
/* jump targets land below the fixed banner + nav (+ live bar when on air) */
.sec[id]{scroll-margin-top:calc(var(--flag-h) + 98px)}
body.is-live .sec[id]{scroll-margin-top:calc(var(--flag-h) + 98px + 48px)}
.live-sec{scroll-margin-top:calc(var(--flag-h) + 98px + 48px)}
/* keep hero content clear of the bar */
body.is-live .hero{padding-top:calc(198px + var(--flag-h));min-height:calc(100vh + 48px)}
body.is-live .page-hero{padding-top:calc(196px + var(--flag-h))}
/* hero button that only exists while live */
.btn-live{display:none;order:-1;background:linear-gradient(100deg,#ff3d2e,#c50f0f);box-shadow:0 10px 26px -8px rgba(224,20,20,.75)}
body.is-live .btn-live{display:inline-flex}
.btn-live .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:livePulse 1.2s infinite}
/* nav badge: bigger, with a pulse ring */
.live-badge{position:relative;font-size:12.5px;padding:9px 15px}
.live-badge::before{content:"";position:absolute;inset:-4px;border-radius:100px;border:2px solid rgba(224,20,20,.6);animation:baRing 1.8s ease-out infinite;pointer-events:none}
@media(max-width:680px){
  .live-bar{font-size:12px;gap:10px;padding:10px 14px}
  .live-bar .lb-venue{display:none}
  body.is-live .hero{padding-top:calc(168px + var(--flag-h));min-height:calc(88vh + 48px)}
  body.is-live .page-hero{padding-top:calc(166px + var(--flag-h))}
}
@media(prefers-reduced-motion:reduce){.live-badge::before,.live-bar .dot,.btn-live .dot{animation:none}}


/* ============ HOME DRIFT GALLERY (two rows glide opposite ways; scrolling speeds them up) ============ */
.drift{overflow:hidden;padding:6px 0 4px}
.drift-row{display:flex;gap:18px;width:max-content;will-change:transform;margin-bottom:18px}
.drift-row:last-child{margin-bottom:0}
.drift-row figure{position:relative;flex:none;width:420px;aspect-ratio:4/3;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);margin:0;background:#111}
.drift-row img{width:100%;height:100%;object-fit:cover;display:block}
.drift-row figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(180deg,transparent,rgba(15,8,6,.85));color:#fff}
.drift-row figcaption .tag{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);font-weight:700;margin-bottom:4px}
.drift-row figcaption h3{font-family:'Anton',sans-serif;font-size:19px;text-transform:uppercase;margin:0}
@media(max-width:680px){.drift-row figure{width:300px}}
@media(prefers-reduced-motion:reduce){
  /* no motion: show each set once as a plain sideways-scrolling row */
  .drift{overflow-x:auto}
  .drift-row{transform:none !important;width:auto}
  .drift-row .dup{display:none}
}

/* ============ MEET THE CREW: equalizer strip ============ */
/* Six photo "bars" of different heights on one baseline, like a graphic EQ. They rise from the
   bottom like faders when scrolled into view; a small peak light bobs above each one. */
.crew-eq-sec{padding-top:0}
.crew-eq-sec.crew-first{padding-top:120px}
@media(max-width:680px){.crew-eq-sec.crew-first{padding-top:80px}}
.crew-eq{display:flex;align-items:flex-end;gap:clamp(10px,1.4vw,18px);height:clamp(340px,40vw,520px);margin-top:10px;padding-top:34px}
.ceq{position:relative;flex:1 1 0;min-width:0;height:calc(var(--h) * 100%);margin:0;display:flex;flex-direction:column;justify-content:flex-end;transition:height .6s var(--ease),flex-grow .6s var(--ease)}
.ceq-bar{position:relative;flex:1;border-radius:18px;overflow:hidden;background:#1d1512;box-shadow:0 22px 40px -26px rgba(25,17,16,.55);
  clip-path:inset(100% 0 0 0 round 18px);transition:clip-path 1s cubic-bezier(.2,.8,.2,1),box-shadow .4s var(--ease);transition-delay:calc(var(--i) * 110ms)}
.crew-eq.in .ceq-bar{clip-path:inset(0 0 0 0 round 18px)}
.ceq-bar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%;transform:scale(1.12);transition:transform 1.4s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 110ms)}
.crew-eq.in .ceq-bar img{transform:scale(1)}
.ceq-bar::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(180deg,transparent,rgba(12,7,5,.78));pointer-events:none}
.ceq figcaption{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s var(--ease);transition-delay:calc(var(--i) * 110ms + 500ms)}
.crew-eq.in .ceq figcaption{opacity:1;transform:none}
/* peak light: rides above each bar and bobs at its own pace */
.ceq-peak{position:absolute;left:50%;top:-20px;width:34%;max-width:46px;height:6px;border-radius:6px;background:var(--grad);transform:translateX(-50%);box-shadow:0 0 14px rgba(255,106,19,.55);
  opacity:0;transition:opacity .4s ease;transition-delay:calc(var(--i) * 110ms + 700ms)}
.crew-eq.in .ceq-peak{opacity:1;animation:ceqPeak calc(1.6s + var(--i) * .23s) ease-in-out infinite alternate}
@keyframes ceqPeak{0%{transform:translate(-50%,0)}100%{transform:translate(-50%,-7px)}}
/* the bars themselves move like an equalizer: a small dip and back, each on its own tempo */
@keyframes ceqBob{0%,100%{height:calc(var(--h) * 100%)}50%{height:calc((var(--h) - .05) * 100%)}}
.crew-eq.in .ceq{animation:ceqBob calc(1.7s + var(--i) * .37s) ease-in-out infinite;animation-delay:calc(1.3s + var(--i) * 110ms)}
/* hover / focus: the bar pushes to full level, the rest step back a little */
@media (hover:hover){
  .crew-eq:hover .ceq{opacity:.72}
  .crew-eq .ceq:hover{height:100%;flex-grow:2.4;opacity:1;animation:none}
  .ceq:hover .ceq-bar img{transform:scale(1.03);object-position:center 32%}
  .ceq:hover .ceq-bar{box-shadow:0 30px 50px -24px rgba(224,20,20,.45)}
  .ceq{transition:height .55s var(--ease),flex-grow .55s var(--ease),opacity .4s ease}
  .ceq-bar img{transition:transform 1.4s cubic-bezier(.2,.8,.2,1),object-position .55s var(--ease)}
}
/* phones: all six bars stay in view like a real equalizer, labels run up the bars like
   fader labels, and a tapped bar opens wide (the phone version of hovering). */
@media (max-width:760px){
  .crew-eq{height:360px;gap:6px;padding-top:30px}
  .ceq{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:height .5s var(--ease),flex-grow .5s var(--ease),opacity .4s ease}
  .ceq-bar{border-radius:14px}
  .crew-eq .ceq-bar{clip-path:inset(100% 0 0 0 round 14px)}
  .crew-eq.in .ceq-bar{clip-path:inset(0 0 0 0 round 14px)}
  .ceq-peak{top:-16px;width:40%;max-width:34px;height:5px}
  .ceq figcaption{left:50%;right:auto;bottom:12px;font-size:10px;white-space:nowrap;transform-origin:left bottom;transform:rotate(-90deg) translate(0,50%)}
  .crew-eq.in .ceq figcaption{transform:rotate(-90deg) translate(0,50%)}
  .crew-eq .ceq.open{flex-grow:4.2;height:100%;animation:none;opacity:1}
  .crew-eq.in .ceq.open figcaption{left:12px;transform:none}
  .crew-eq.has-open .ceq:not(.open){opacity:.72}
  .ceq.open .ceq-bar img{object-position:center 30%}
}
@media (prefers-reduced-motion:reduce){
  .ceq-bar,.crew-eq .ceq-bar{clip-path:none;transition:none}
  .ceq-bar img,.crew-eq.in .ceq-bar img{transform:none;transition:none}
  .ceq figcaption,.ceq-peak{opacity:1;transform:translateX(-50%);transition:none;animation:none!important}
  .ceq figcaption{transform:none}
  .ceq,.crew-eq.in .ceq{transition:none;animation:none!important}
}

/* ============ PRIVACY / LEGAL PAGE ============ */
/* no photo in this header: a warm stage glow stands in, so no image repeats from other pages */
.page-hero.legal-hero{min-height:44vh}
.page-hero.legal-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(ellipse 60% 70% at 82% 30%,rgba(255,106,19,.30),transparent 70%),
  radial-gradient(ellipse 45% 55% at 12% 90%,rgba(229,57,53,.20),transparent 70%)}
.legal{padding-top:80px}
.legal-body{max-width:760px;margin:0 auto;color:var(--ink-soft);font-size:17px;line-height:1.75}
.legal-body .legal-date{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.legal-body h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(24px,2.6vw,30px);line-height:1.1;color:var(--ink);margin:46px 0 14px}
.legal-body p{margin:0 0 16px}
.legal-body ul{margin:0 0 18px;padding-left:22px}
.legal-body li{margin-bottom:10px}
.legal-body li::marker{color:var(--orange)}
.legal-body strong{color:var(--ink)}
.legal-body a{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legal-body a:hover{color:var(--orange)}
@media (max-width:680px){.legal{padding-top:56px}.legal-body{font-size:16px}.legal-body h2{margin-top:36px}}

/* ============ HOME HERO ON PHONES ============ */
/* the phone video is its own portrait cut with the lit rig high on the right, just under the nav;
   the scrim leaves that band clear and darkens where the words sit */
@media (max-width:760px){
  /* 170px of extra top room is the clear band the rig glows in */
  .hero{padding-top:calc(290px + var(--flag-h))}
  body.is-live .hero{padding-top:calc(338px + var(--flag-h))}
  .hero-scrim{background:
    linear-gradient(180deg,rgba(10,6,4,.5) 0%,rgba(10,6,4,.12) 15%,rgba(10,6,4,.08) 32%,rgba(10,6,4,.74) 39%,rgba(10,6,4,.8) 80%,var(--bg) 99%)}
  .hero-tag{display:none}
}