@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --white:#F0F5F1;
  --orange:#FF9100;
  --black:#091517;
  --lgrey:#D1D5D4;
  --mgrey:#5F6562;
  --dgrey:#333E3C;
  --orange-dim:rgba(255,145,0,.1);
  --border-l:rgba(9,21,23,.08);
  --border-d:rgba(240,245,241,.08);
  --sans:'DM Sans',sans-serif;
  --mono:'DM Mono',monospace;
  /* Restrained neutral-dark palette — used by sections opting into the new theme.
     Slightly warm near-black surfaces, near-white text, hairline borders. Orange reserved for the rarest accent. */
  --ink:#0a0908;
  --ink-2:#131110;
  --ink-3:#1c1a18;
  --hairline:rgba(255,255,255,.05);
  --hairline-2:rgba(255,255,255,.11);
  --bone:#fafaf8;
  --bone-2:rgba(250,250,248,.6);
  --bone-3:rgba(250,250,248,.5);
}

html{scroll-behavior:smooth}
body{background:var(--white);color:var(--black);font-family:var(--sans);font-size:16px;line-height:1.6;overflow-x:hidden;cursor:none}

/* CURSOR */
#cur{position:fixed;width:8px;height:8px;background:var(--orange);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .15s,height .15s}
#curR{position:fixed;width:30px;height:30px;border:1px solid rgba(255,145,0,.4);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s}
body:has(a:hover) #cur,body:has(button:hover) #cur{width:14px;height:14px}
body:has(a:hover) #curR,body:has(button:hover) #curR{width:46px;height:46px;border-color:var(--orange)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 48px;background:rgba(240,245,241,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-l);transition:box-shadow .3s,background .3s ease}
/* Hover the bar anywhere → it brightens noticeably. */
nav:hover{background:rgba(255,255,255,.99)}
nav.scrolled{box-shadow:0 1px 0 var(--border-l)}
nav.dark{background:rgba(9,21,23,.95)}
nav.dark:hover{background:rgba(24,52,56,1)}
nav.dark .nav-links a{color:rgba(240,245,241,.5)}
nav.dark .nav-links a:hover{color:var(--white)}
nav.dark .btn-ghost{color:rgba(240,245,241,.5);border-color:rgba(240,245,241,.15)}
nav.dark .btn-ghost:hover{color:var(--white);border-color:rgba(240,245,241,.3)}
nav.nav-bottom{background:rgba(255,255,255,.98);justify-content:center;gap:48px;transition:background .4s ease,gap .4s ease}
nav.nav-bottom .nav-logo,nav.nav-bottom .nav-cta{display:none}
nav.nav-bottom .nav-links{gap:48px}
nav.nav-bottom .nav-links a{color:var(--black);font-size:12px}
nav.nav-bottom .nav-links a:hover{color:var(--orange)}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.nav-logo svg{height:24px;width:auto}
.nav-links{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;min-width:0}
.nav-links a{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mgrey);text-decoration:none;transition:color .2s;white-space:nowrap}
/* Each top-level link is a full-height padded box, so the whole column is
   clickable (not just the glyphs) and adjacent boxes leave no dead zone.
   Spacing between links is driven by this padding rather than a gap. */
.nav-links>li>a{display:inline-flex;align-items:center;height:64px;padding:0 15px}
.nav-links a:hover{color:var(--black)}
.nav-links a.active{color:var(--orange)}
.nav-lbl-short{display:none}
/* NAV DROPDOWN */
.nav-dd{position:relative}
.nav-dd-trigger{display:inline-flex;align-items:center;gap:6px}
.nav-dd-caret{font-size:9px;line-height:1;transform:translateY(1px);transition:transform .2s,opacity .2s;opacity:.6}
.nav-dd:hover .nav-dd-caret,.nav-dd:focus-within .nav-dd-caret{transform:translateY(1px) rotate(180deg);opacity:1}
.nav-dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:320px;background:rgba(255,255,255,.98);backdrop-filter:saturate(140%) blur(14px);border:1px solid var(--border-l);box-shadow:0 18px 40px -12px rgba(9,21,23,.18);padding:14px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .2s ease,visibility .18s}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-dd::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.nav-dd-menu a{display:flex;flex-direction:column;gap:3px;padding:11px 14px;text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--black);transition:background .15s,color .15s}
.nav-dd-menu a:hover{background:var(--lgrey);color:var(--black)}
.nav-dd-menu .dd-name{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:-.005em;color:var(--black)}
.nav-dd-menu .dd-desc{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--mgrey)}
.nav-dd-menu a:hover .dd-name{color:var(--orange)}
nav.dark .nav-dd-menu,body.restrained nav#nav .nav-dd-menu{background:rgba(10,9,8,.96);border-color:rgba(240,245,241,.1);box-shadow:0 18px 40px -12px rgba(0,0,0,.5)}
nav.dark .nav-dd-menu .dd-name,body.restrained nav#nav .nav-dd-menu .dd-name{color:var(--bone)}
nav.dark .nav-dd-menu a:hover,body.restrained nav#nav .nav-dd-menu a:hover{background:rgba(240,245,241,.06)}
nav.dark .nav-dd-menu .dd-desc,body.restrained nav#nav .nav-dd-menu .dd-desc{color:var(--bone-3)}
.nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* Hamburger — hidden on desktop, shown ≤900px where the link row collapses */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:9px 8px;margin-right:-8px;background:none;border:0;cursor:pointer;flex-shrink:0}
.nav-burger span{display:block;height:2px;width:100%;border-radius:2px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
body.restrained .nav-burger span,nav.dark .nav-burger span{background:var(--bone)}
nav.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.menu-open .nav-burger span:nth-child(2){opacity:0}
nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-open{overflow:hidden}
.btn-ghost{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mgrey);background:none;border:1px solid var(--lgrey);padding:8px 18px;text-decoration:none;cursor:none;transition:border-color .2s,color .2s}
.btn-ghost:hover{border-color:var(--mgrey);color:var(--black)}
.btn-orange{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--black);background:var(--orange);border:none;padding:9px 20px;text-decoration:none;cursor:none;transition:opacity .2s}
.btn-orange:hover{opacity:.88}

/* LAYOUT */
.si{max-width:1280px;margin:0 auto;padding:100px 80px}
.si-sm{max-width:1280px;margin:0 auto;padding:60px 80px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lgrey)}
.four-col{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--lgrey)}

/* TYPOGRAPHY */
.slabel{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.slabel::after{content:'';flex:0 0 16px;height:1px;background:var(--orange)}
.slabel.wh{color:var(--orange)}
.slabel-num{color:rgba(255,145,0,.55);margin-right:6px;letter-spacing:.16em}
.slabel-num::after{content:" /";color:rgba(255,145,0,.35);margin-left:2px}
.dtitle{font-family:var(--sans);font-weight:500;font-size:clamp(40px,5vw,64px);line-height:1.0;letter-spacing:-.02em;color:var(--black)}
.dtitle em{color:var(--orange);font-style:normal}
.dtitle.wh{color:var(--white)}
.dtitle.lg{font-size:clamp(52px,6.5vw,84px)}
.btext{font-size:17px;font-weight:300;color:var(--mgrey);line-height:1.75}
.btext.wh{color:rgba(240,245,241,.58)}
.mono-label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.mono-label::before{content:'';width:24px;height:1px;background:var(--orange);display:block}
.larr{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);text-decoration:none;transition:gap .2s}
.larr:hover{gap:13px}

/* HERO VARIANTS */
.page-hero{position:relative;height:100vh;min-height:640px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:0 80px 96px;overflow:hidden}
.page-hero-sm{position:relative;height:70vh;min-height:480px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:0 80px 80px;overflow:hidden}
.hero-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,21,23,.85) 0%,rgba(9,21,23,.3) 60%,rgba(9,21,23,.1) 100%);z-index:1}
.hero-content{position:relative;z-index:2;max-width:860px}
.hero-btns{display:flex;gap:12px;margin-top:36px}
.btn-hero{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:13px 28px;text-decoration:none;cursor:none;transition:opacity .2s}
.btn-hero.solid{color:var(--black);background:var(--orange)}
.btn-hero.solid:hover{opacity:.88}
.btn-hero.outline{color:rgba(240,245,241,.7);border:1px solid rgba(240,245,241,.25);transition:color .2s,border-color .2s}
.btn-hero.outline:hover{color:var(--white);border-color:rgba(240,245,241,.5)}

/* VIDEO HERO */
.video-hero{position:relative;height:100vh;min-height:640px;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:0 80px 96px}
.video-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.video-hero .hero-overlay{z-index:1}
.video-hero .hero-content{z-index:2}
.video-mute{position:absolute;bottom:36px;right:80px;z-index:3;background:rgba(9,21,23,.6);border:1px solid rgba(240,245,241,.2);color:rgba(240,245,241,.7);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;cursor:none;transition:color .2s,border-color .2s}
.video-mute:hover{color:var(--white);border-color:rgba(240,245,241,.5)}

/* FULLBLEED IMAGE */
.fullbleed{width:100%;height:60vh;min-height:400px;object-fit:cover;display:block}
.fullbleed-wrap{position:relative;overflow:hidden}
.fullbleed-caption{position:absolute;bottom:0;left:0;right:0;padding:32px 80px;background:linear-gradient(to top,rgba(9,21,23,.7),transparent);color:rgba(240,245,241,.7);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* IMAGE GRID */
.img-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.img-grid-3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2px}
.img-grid-hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:60vh 40vh;gap:2px}
.img-cell{overflow:hidden}
.img-cell img,.img-cell video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.img-cell:hover img{transform:scale(1.03)}
.img-cell.tall{grid-row:span 2}

/* GIF STRIP */
.gif-strip{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--black)}
.gif-cell{overflow:hidden;position:relative}
.gif-cell img{width:100%;height:320px;object-fit:cover;display:block}
.gif-label{position:absolute;bottom:16px;left:20px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(240,245,241,.7)}

/* SECTION BACKGROUNDS */
.bg-white{background:var(--white)}
.bg-lgrey{background:var(--lgrey)}
.bg-dgrey{background:var(--dgrey)}
.bg-black{background:var(--black)}
.bg-orange{background:var(--orange)}

/* CARDS */
.card-cell{background:var(--white);padding:44px 36px;cursor:none;transition:background .25s}
.card-cell:hover{background:#e8ede9}
.card-cell.dark{background:var(--dgrey)}
.card-cell.dark:hover{background:#3d4a47}
.card-num{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.15em;color:var(--lgrey);display:block;margin-bottom:18px}
.card-lbl{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.card-cell h3{font-family:var(--sans);font-size:20px;font-weight:500;letter-spacing:-.01em;color:var(--black);margin-bottom:10px}
.card-cell.dark h3{color:var(--white)}
.card-cell p{font-size:14px;font-weight:300;color:var(--mgrey);line-height:1.75;margin-bottom:22px}

/* SPEC TAGS */
.stags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:22px}
.stag{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;color:var(--mgrey);border:1px solid var(--lgrey);padding:3px 9px}

/* STAT CELLS */
.stat-cell{background:var(--dgrey);padding:48px 28px;text-align:center}
.stat-num{font-family:var(--sans);font-size:58px;font-weight:500;color:var(--white);line-height:1;display:block;margin-bottom:6px;letter-spacing:-.02em}
.stat-lbl{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:rgba(240,245,241,.7)}

/* STORY CARD */
.story-card{background:var(--white);padding:34px 38px;display:grid;grid-template-columns:64px 1fr;gap:24px;cursor:none;transition:background .25s;border-bottom:1px solid var(--lgrey)}
.story-card:hover{background:#e8ede9}
.story-ct{font-family:var(--sans);font-size:44px;font-weight:500;color:var(--orange);line-height:1;letter-spacing:-.02em}
.story-ct-lbl{font-family:var(--mono);font-size:8px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--mgrey)}
.story-name{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--black);margin-bottom:6px}
.story-challenge{font-size:13px;color:var(--mgrey);line-height:1.6;margin-bottom:6px}
.story-win{font-size:13px;font-weight:400;color:var(--black);line-height:1.6}
.story-win::before{content:'→ ';color:var(--orange)}

/* QUOTE */
.pull-quote{border-left:2px solid var(--orange);padding-left:24px}
.pull-quote blockquote{font-size:18px;font-weight:300;font-style:italic;color:var(--black);line-height:1.65;margin-bottom:12px}
.pull-quote cite{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mgrey);font-style:normal}

/* BREADCRUMB */
.breadcrumb{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mgrey);padding:20px 80px 0;display:flex;align-items:center;gap:8px}
.breadcrumb a{color:var(--mgrey);text-decoration:none}
.breadcrumb a:hover{color:var(--black)}
.breadcrumb span{color:var(--lgrey)}

/* CTA BAND */
.cta-band{background:var(--orange);padding:72px 80px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.cta-band h2{font-family:var(--sans);font-weight:500;font-size:clamp(32px,4vw,52px);line-height:1.0;letter-spacing:-.02em;color:var(--black)}
.cta-band-btns{display:flex;gap:12px;flex-shrink:0}
.btn-dark{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--white);background:var(--black);padding:13px 28px;text-decoration:none;cursor:none;transition:opacity .2s}
.btn-dark:hover{opacity:.8}
.btn-wh-border{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(9,21,23,.7);border:1px solid rgba(9,21,23,.3);padding:13px 28px;text-decoration:none;cursor:none;transition:color .2s,border-color .2s}
.btn-wh-border:hover{color:var(--black);border-color:var(--black)}

/* FOOTER */
footer{background:var(--black);padding:0;border-top:1px solid rgba(240,245,241,.05)}
.footer-statement{padding:96px 80px 88px;border-bottom:1px solid rgba(240,245,241,.06);max-width:1700px;margin:0 auto}
.footer-statement p{font-family:var(--sans);font-weight:600;font-size:clamp(40px,5.6vw,84px);line-height:.96;letter-spacing:-.025em;color:var(--white);max-width:1100px;margin:0}
.footer-statement em{color:var(--orange);font-style:normal}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:64px;padding:64px 80px 56px;max-width:1700px;margin:0 auto;border-bottom:1px solid rgba(240,245,241,.06)}
.footer-brand{display:flex;flex-direction:column;gap:18px;max-width:340px}
.footer-logo svg{height:22px;width:auto}
.footer-tagline{font-size:14px;font-weight:300;color:rgba(240,245,241,.45);line-height:1.65}
.footer-cta{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);text-decoration:none;border-bottom:1px solid var(--orange);padding-bottom:6px;align-self:flex-start;margin-top:6px;transition:gap .2s ease,opacity .2s}
.footer-cta:hover{opacity:.85}
.footer-col h3{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,145,0,.7);margin-bottom:20px;display:flex;align-items:center;gap:8px}
.footer-col h3::after{content:'';flex:0 0 16px;height:1px;background:rgba(255,145,0,.35)}
.footer-col a{display:block;font-family:var(--sans);font-size:16px;font-weight:400;color:rgba(240,245,241,.7);text-decoration:none;margin-bottom:12px;transition:color .2s,padding-left .2s;cursor:none;letter-spacing:-.005em}
.footer-col a:hover{color:var(--orange);padding-left:6px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 80px 32px;max-width:1700px;margin:0 auto;gap:24px;flex-wrap:wrap}
.footer-bottom p{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,245,241,.3)}
.footer-legal{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.footer-legal a{color:rgba(240,245,241,.45);transition:color .2s}
.footer-legal a:hover{color:rgba(240,245,241,.85)}
body.restrained .footer-legal a{color:var(--bone-3)}
body.restrained .footer-legal a:hover{color:var(--bone)}
.footer-legal-sep{opacity:.5}

/* RESTRAINED-THEME global overrides — opt-in via body.restrained.
   Strips orange from shared chrome (nav, footer) and converts the page background.
   Preserved orange: #cur/#curR cursor, .htab::after status bar, .home-magic spotlight + canvas. */
body.restrained{background:var(--ink);color:var(--bone)}
body.restrained nav#nav{background:rgba(10,9,8,.72);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--hairline)}
body.restrained nav#nav:hover{background:rgba(46,56,59,.96)}
body.restrained nav#nav .nav-logo svg path{fill:var(--bone)}
body.restrained .nav-links a{color:var(--bone-3)}
body.restrained .nav-links a:hover{color:var(--bone)}
body.restrained .nav-links a.active{color:var(--bone)}
body.restrained .btn-ghost{color:var(--bone-2);border-color:var(--hairline-2)}
body.restrained .btn-ghost:hover{color:var(--bone);border-color:var(--bone-3)}
/* Nav primary CTA — bone solid (was solid orange .btn-orange) */
body.restrained .btn-orange{background:var(--bone);color:var(--ink);border:1px solid var(--bone);transition:background .2s,color .2s}
body.restrained .btn-orange:hover{background:transparent;color:var(--bone);opacity:1}
body.restrained nav.nav-bottom{background:rgba(250,250,248,.96)}
body.restrained nav.nav-bottom .nav-links a{color:var(--ink)}
body.restrained nav.nav-bottom .nav-links a:hover{color:var(--ink);opacity:.6}

/* Footer — preserve dark surface, demote orange accents */
body.restrained footer{background:var(--ink);border-top-color:var(--hairline)}
body.restrained .footer-statement{border-bottom-color:var(--hairline)}
body.restrained .footer-statement p{color:var(--bone)}
body.restrained .footer-statement em{color:var(--bone-2);font-style:italic;font-weight:500}
body.restrained .footer-grid{border-bottom-color:var(--hairline)}
body.restrained .footer-logo svg path{fill:var(--bone)}
body.restrained .footer-tagline{color:var(--bone-2)}
body.restrained .footer-cta{color:var(--bone-2);border-bottom-color:var(--hairline-2)}
body.restrained .footer-cta:hover{color:var(--bone);border-bottom-color:var(--bone-3);opacity:1}
body.restrained .footer-col h3{color:var(--bone-3)}
body.restrained .footer-col h3::after{background:var(--hairline-2)}
body.restrained .footer-col a{color:var(--bone-2)}
body.restrained .footer-col a:hover{color:var(--bone);padding-left:6px}
body.restrained .footer-bottom p{color:var(--bone-3)}

/* Scroll-hint line — keep faint orange as a subtle status indicator (matches the "status bar" exception) */

/* SCROLL REVEAL */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* SCROLL INDICATOR */
.scroll-hint{position:absolute;bottom:36px;right:80px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(240,245,241,.25);writing-mode:vertical-rl}
.sline{width:1px;height:44px;background:linear-gradient(to bottom,var(--orange),transparent);animation:sp 2.2s ease-in-out infinite}
@keyframes sp{0%,100%{opacity:.35}50%{opacity:.9}}

/* LAPTOP/TABLET — the full label set ("Full Service Automation" + 6 more,
   the logo and both CTAs) only fits above ~1320px, so below that swap the
   three long labels for short ones and tighten spacing. Lower still, drop the
   secondary ghost CTA and shrink further so the links stay on one row down to
   the 900px mobile breakpoint. nav's own gap:24px guarantees the logo, links
   and CTA never overlap — at worst they compress, never collide. */
@media(max-width:1400px){
  nav{padding:0 36px}
  .nav-links>li>a{padding:0 11px}
  .nav-links a{font-size:10px;letter-spacing:.08em}
  .nav-lbl-full{display:none}
  .nav-lbl-short{display:inline}
}
@media(max-width:1120px){
  nav{padding:0 28px}
  .nav-links>li>a{padding:0 8px}
  /* Secondary CTA goes first — "Get Started" remains the primary action. */
  .nav-cta .btn-ghost{display:none}
}
@media(max-width:980px){
  .nav-links>li>a{padding:0 6px}
  .nav-cta .btn-orange{padding:9px 13px;font-size:10px}
}

/* MOBILE */
@media(max-width:900px){
  nav{padding:0 24px}
  .nav-burger{display:flex}
  .nav-links{display:none}
  /* Open: the link row becomes a full-width dropdown panel under the bar.
     Reuses the same <ul> (no duplicated markup); sub-menus expand inline. */
  nav.menu-open .nav-links{position:fixed;top:64px;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 20px;margin:0;background:var(--ink);border-top:1px solid var(--hairline);box-shadow:0 24px 40px -16px rgba(0,0,0,.5);max-height:calc(100dvh - 64px);overflow-y:auto}
  nav.menu-open .nav-links>li{border-top:1px solid rgba(240,245,241,.07)}
  nav.menu-open .nav-links>li:first-child{border-top:0}
  nav.menu-open .nav-links a{display:block;height:auto;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--bone);padding:15px 24px}
  nav.menu-open .nav-links a:hover{color:var(--orange)}
  /* The roomy panel can show the full labels */
  nav.menu-open .nav-lbl-full{display:inline}
  nav.menu-open .nav-lbl-short{display:none}
  /* Each dropdown's items render inline + indented instead of a hover popup */
  nav.menu-open .nav-dd-menu{position:static;display:flex;transform:none;opacity:1;visibility:visible;pointer-events:auto;min-width:0;padding:0 0 6px;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
  nav.menu-open .nav-dd-menu a{padding:8px 24px 8px 40px}
  nav.menu-open .nav-dd-menu .dd-name{font-family:var(--sans);font-size:14px;letter-spacing:-.005em;color:var(--bone)}
  nav.menu-open .nav-dd-menu .dd-desc{color:var(--bone-3)}
  nav.menu-open .nav-dd-caret{display:none}
  .si,.si-sm{padding:64px 24px}
  .two-col,.three-col,.four-col{grid-template-columns:1fr}
  .img-grid-2,.img-grid-3,.img-grid-hero{grid-template-columns:1fr}
  .page-hero,.page-hero-sm,.video-hero{padding:0 24px 64px}
  .cta-band{flex-direction:column;padding:48px 24px}
  .breadcrumb{padding:20px 24px 0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px;padding:48px 24px}
  .footer-statement{padding:64px 24px 56px}
  .footer-bottom{padding:24px 24px 32px}
  .gif-strip{grid-template-columns:1fr}
  .fullbleed-caption{padding:24px}
  footer{padding:40px 24px 24px}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center}
  /* Hide secondary header CTA and tighten the primary so the nav doesn't crush at mobile */
  .nav-cta .btn-ghost{display:none}
  .nav-cta .btn-orange{padding:10px 14px;font-size:11px;white-space:nowrap}
}
@media(max-width:560px){
  /* Keep the primary CTA in the bar next to the hamburger so phones always
     have a conversion path; only the secondary ghost CTA stays hidden. */
  .nav-cta .btn-orange{padding:9px 13px;font-size:10px}
}
/* Hero CTA buttons should never wrap mid-label at narrow widths */
.btn-hero,.btn-ctadark,.btn-ctawh,.btn-orange,.btn-ghost{white-space:nowrap}

/* ── VIDEO SPLIT ── */
.video-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--lgrey);
  min-height: 520px;
}
.video-split.dark { background: rgba(240,245,241,.05); }
.video-split.flip { direction: rtl; }
.video-split.flip > * { direction: ltr; }

.vs-embed {
  position: relative;
  overflow: hidden;
  background: var(--black);
}
.vs-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* Maintain 16:9 but fill the cell height */
.vs-embed::before {
  content: '';
  display: block;
  padding-top: 56.25%;
}
.vs-embed.fill::before { display: none; }
.vs-embed.fill { min-height: 480px; }

.vs-text {
  padding: 72px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vs-text.dark { background: var(--black); }
.vs-text.light { background: var(--white); }
.vs-text.grey { background: var(--dgrey); }

.vs-text h2 {
  font-family: var(--sans);
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-bottom: 16px;
}
.vs-text h2.wh { color: var(--white); }
.vs-text h2.dk { color: var(--black); }
.vs-text .vs-body {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  margin-bottom: 28px;
}
.vs-text .vs-body.wh { color: rgba(240,245,241,.58); }
.vs-text .vs-body.dk { color: var(--mgrey); }

/* Lazy-load YouTube — poster until clicked */
.yt-facade {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  cursor: pointer;
  overflow: hidden;
  background: var(--black);
}
.yt-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.75);
  transition: filter .3s;
}
.yt-facade:hover img { filter: brightness(.55); }
.yt-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  background: var(--orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s, background .2s;
  pointer-events: none;
}
.yt-facade:hover .yt-play {
  transform: translate(-50%, -50%) scale(1.1);
}
.yt-play svg {
  width: 28px; height: 28px;
  fill: var(--black);
  margin-left: 4px;
}
.yt-facade .yt-label {
  position: absolute;
  bottom: 24px; left: 28px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(240,245,241,.6);
}

@media(max-width:900px) {
  .video-split { grid-template-columns: 1fr; min-height: auto; }
  .video-split.flip { direction: ltr; }
  .vs-embed.fill { min-height: 260px; }
  .vs-text { padding: 40px 24px; }
  .yt-facade { min-height: 260px; }
}

/* ─── DETAIL PAGES (shared styles for /full-service, /packing, /precision, /general, /magic, /results, /stories, /learn-more) ─── */
.detail-bc{padding:88px 80px 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mgrey)}
.detail-bc a{color:var(--mgrey);text-decoration:none;transition:color .2s}
.detail-bc a:hover{color:var(--orange)}
.detail-bc .sep{margin:0 10px;color:var(--lgrey)}
.detail-hero{padding:48px 80px 96px;background:var(--black);color:var(--white)}
.detail-hero .si{max-width:1280px;margin:0 auto;padding:0}
.detail-hero .slabel{margin-bottom:18px}
.detail-hero h1{font-family:var(--sans);font-weight:500;font-size:clamp(56px,7vw,108px);line-height:.98;letter-spacing:-.025em;color:var(--white);margin-bottom:30px}
.detail-hero h1 em{color:var(--orange);font-style:normal}
.detail-hero .lede{font-size:19px;font-weight:300;line-height:1.7;color:rgba(240,245,241,.65);max-width:680px}
.detail-block{position:relative}
.detail-block.white{background:var(--white)}
.detail-block.lgrey{background:var(--lgrey)}
.detail-block.dark{background:var(--black);color:var(--white)}
.detail-block.dgrey{background:var(--dgrey);color:var(--white)}
.detail-block.orange{background:var(--orange)}
.db-grid{display:grid;grid-template-columns:1fr 440px;column-gap:80px;align-items:center;max-width:1280px;margin:0 auto;padding:80px}
.db-grid.flip{grid-template-columns:440px 1fr}
.db-text{padding:0;display:flex;flex-direction:column;justify-content:center}
.db-tag{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:18px}
.db-text h2{font-family:var(--sans);font-size:clamp(36px,4vw,60px);font-weight:500;letter-spacing:-.02em;line-height:1.05;color:var(--black);margin-bottom:22px}
.detail-block.dark .db-text h2,.detail-block.dgrey .db-text h2{color:var(--white)}
.db-text p{font-size:16px;font-weight:300;line-height:1.75;color:var(--mgrey);margin-bottom:18px}
.detail-block.dark .db-text p,.detail-block.dgrey .db-text p{color:rgba(240,245,241,.65)}
.db-text ul.feats{list-style:none;padding:0;margin:8px 0 26px;display:flex;flex-direction:column;gap:10px}
.db-text ul.feats li{font-size:14px;font-weight:300;line-height:1.6;padding-left:16px;position:relative;color:var(--dgrey)}
.detail-block.dark .db-text ul.feats li,.detail-block.dgrey .db-text ul.feats li{color:rgba(240,245,241,.7)}
.db-text ul.feats li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.db-img{position:relative;overflow:hidden;background:var(--black);width:440px;height:440px;aspect-ratio:1/1}
.db-img img,.db-img video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1}
.db-img .img-cap{position:absolute;bottom:14px;left:18px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(240,245,241,.7)}
.db-text .larr{align-self:flex-start;margin-top:6px}

/* full-width row variants */
.detail-block.full{padding:96px 80px}
.detail-block.full .si{max-width:1280px;margin:0 auto;padding:0}

/* full-bleed video showcase inside a detail-block */
.detail-video{position:relative;max-width:1280px;margin:0 auto;padding:80px;display:flex;flex-direction:column;gap:28px}
.detail-video.wide{max-width:none;padding:0}
.detail-video-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--black)}
.detail-video-frame video,.detail-video-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.detail-video-frame .dv-fpo{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(240,245,241,.65);background:rgba(9,21,23,.55);border:1px solid rgba(240,245,241,.18);padding:4px 8px;z-index:2}
.detail-video-frame .dv-cap{position:absolute;left:18px;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,245,241,.7);z-index:2}
.detail-video-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.detail-video-head h2{font-family:var(--sans);font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.02em;line-height:1.05;color:var(--black);margin:0;max-width:680px}
.detail-block.dark .detail-video-head h2,.detail-block.dgrey .detail-video-head h2{color:var(--white)}
.detail-video-head .db-tag{margin-bottom:10px}
.detail-video-head p{font-size:14px;font-weight:300;color:var(--mgrey);max-width:380px;margin:0;line-height:1.6}
.detail-block.dark .detail-video-head p,.detail-block.dgrey .detail-video-head p{color:rgba(240,245,241,.55)}

/* video inside .db-img — no aspect-ratio override needed */
.db-img video{aspect-ratio:1/1}

/* CTA at bottom of every detail page */
.detail-cta{background:var(--orange);padding:96px 80px;text-align:center}
.detail-cta h2{font-family:var(--sans);font-weight:500;font-size:clamp(48px,7vw,88px);line-height:1;letter-spacing:-.025em;color:var(--black);margin-bottom:32px}
.detail-cta .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Shared CTA button styles (used on home CTA, detail-cta, magic CTA, etc.) */
.btn-ctadark{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--white);background:var(--black);padding:14px 30px;text-decoration:none;cursor:none;transition:opacity .2s;display:inline-block}
.btn-ctadark:hover{opacity:.8}
.btn-ctawh{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(9,21,23,.7);border:1px solid rgba(9,21,23,.3);padding:13px 29px;text-decoration:none;cursor:none;transition:color .2s,border-color .2s;display:inline-block}
.btn-ctawh:hover{color:var(--black);border-color:var(--black)}

/* Download button — prominent secondary CTA for PDFs / guides */
.dl-btn{display:inline-flex;align-items:center;gap:16px;margin-top:22px;padding:16px 22px 16px 18px;border:1.5px solid var(--orange);background:transparent;color:var(--orange);text-decoration:none;transition:background .25s ease,color .25s ease;font-family:var(--sans);max-width:fit-content}
.dl-btn:hover{background:var(--orange);color:var(--white)}
.dl-btn-icon{width:34px;height:34px;border-radius:50%;background:rgba(255,145,0,.15);display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:var(--orange);flex-shrink:0;transition:background .25s ease,color .25s ease}
.dl-btn:hover .dl-btn-icon{background:rgba(255,255,255,.2);color:var(--white)}
.dl-btn-text{display:flex;flex-direction:column;gap:3px;line-height:1.2}
.dl-btn-title{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.005em}
.dl-btn-meta{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:currentColor;opacity:.7}

@media(max-width:900px){
  .detail-bc{padding:80px 24px 0}
  .detail-hero{padding:24px 24px 64px}
  .db-grid,.db-grid.flip{grid-template-columns:1fr;gap:0;padding:0}
  .db-grid.flip{direction:ltr}
  .db-text{padding:48px 24px}
  .db-img{width:100%;max-width:100%;height:auto;aspect-ratio:1/1;justify-self:stretch !important;margin:0 !important}
  /* Inline 80px-side section padding (used on full-service quote band, results industries grid, stories/articles featured band) should shrink at mobile */
  section.detail-block[style*="80px"]{padding-left:24px !important;padding-right:24px !important}
  /* Quote-card / customer-card grids min 320px won't fit on a phone — collapse */
  .fs-qgrid{grid-template-columns:1fr}
  /* Inline 2/3/4/5-column equal grids (used on /solutions/palletizing "No CapEx" cards, /full-service Why Choose cards, /results proof band, etc.) collapse on mobile */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  /* Long single words (e.g. "manufacturers", "manufacturing") shouldn't push the layout past the viewport */
  h1,h2,h3,.lede,p{overflow-wrap:break-word;word-wrap:break-word}
  .detail-hero h1{font-size:clamp(32px,5vw,68px)}
  /* Auto-fit grids whose minmax > viewport-content (320px+) can't shrink — force 1fr on mobile */
  [style*="minmax(380px"],
  [style*="minmax(360px"],
  [style*="minmax(340px"],
  [style*="minmax(320px"]{grid-template-columns:1fr !important}
  .db-img img,.db-img video{aspect-ratio:1/1;height:auto}
  .detail-block.full{padding:48px 24px}
  .detail-cta{padding:64px 24px}
  .detail-video{padding:48px 24px}
}

/* LEGAL / POLICY PAGES — long-form prose layout, shared by /privacy-policy, /terms-and-conditions, /formic-ai-hiring-disclosure */
.legal-page{background:var(--white);color:var(--black);padding:140px 0 96px;min-height:60vh}
body.restrained .legal-page{background:var(--bone);color:var(--ink)}
.legal-page .legal-bc{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mgrey);margin:0 auto 48px;max-width:880px;padding:0 24px;display:flex;align-items:center;gap:10px}
.legal-page .legal-bc a{color:var(--mgrey);transition:color .2s}
.legal-page .legal-bc a:hover{color:var(--black)}
body.restrained .legal-page .legal-bc a:hover{color:var(--ink)}
.legal-page .legal-bc .sep{opacity:.4}
.legal-hero{max-width:880px;margin:0 auto 56px;padding:0 24px}
.legal-hero .slabel{margin-bottom:18px}
.legal-hero h1{font-family:var(--sans);font-weight:500;font-size:clamp(40px,5vw,68px);line-height:1.04;letter-spacing:-.025em;color:var(--black);margin:0 0 18px}
body.restrained .legal-hero h1{color:var(--ink)}
.legal-hero .legal-meta{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mgrey)}
.legal-prose{max-width:720px;margin:0 auto;padding:0 24px;font-size:16px;line-height:1.7;color:var(--dgrey)}
body.restrained .legal-prose{color:var(--ink-3)}
.legal-prose h2{font-family:var(--sans);font-weight:600;font-size:22px;line-height:1.3;letter-spacing:-.005em;color:var(--black);margin:48px 0 16px}
body.restrained .legal-prose h2{color:var(--ink)}
.legal-prose h3{font-family:var(--sans);font-weight:600;font-size:17px;line-height:1.35;color:var(--black);margin:32px 0 12px}
body.restrained .legal-prose h3{color:var(--ink)}
.legal-prose p{margin:0 0 18px;font-weight:300}
.legal-prose ul{margin:0 0 22px;padding-left:1.25em}
.legal-prose ul li{margin-bottom:10px;font-weight:300}
.legal-prose a{color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(255,145,0,.35);transition:border-color .2s}
.legal-prose a:hover{border-bottom-color:var(--orange)}
.legal-prose strong{font-weight:600;color:var(--black)}
body.restrained .legal-prose strong{color:var(--ink)}
/* Story / article body images — give photos breathing room from surrounding text */
.legal-page>figure{margin-bottom:48px!important}
.legal-prose img{display:block;max-width:100%;height:auto;margin:32px auto}
.legal-prose figure{margin:32px auto;text-align:center}
.legal-prose figure img{margin:0 auto}
.legal-prose .legal-uppercase{font-family:var(--mono);font-size:13px;font-weight:500;line-height:1.5;letter-spacing:.04em}
.legal-prose .legal-doc-id{margin-top:64px;padding-top:24px;border-top:1px solid var(--border-l);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mgrey)}
.legal-contact{margin-top:32px;padding:28px;background:rgba(9,21,23,.03);border:1px solid var(--border-l)}
body.restrained .legal-contact{background:rgba(255,255,255,.04);border-color:var(--hairline)}
.legal-contact p{margin:0 0 8px}
.legal-contact p:last-child{margin:0}
@media(max-width:720px){
  .legal-page{padding:112px 0 64px}
  .legal-hero h1{font-size:clamp(32px,8vw,48px)}
  .legal-prose h2{font-size:19px}
}

/* Access-code-gated terms (/terms gate + /terms/<code> documents).
   These rules are shared by the standalone document page and by the gate page,
   which injects the fetched #terms element — so both render identically. */
/* Terms content must not be selectable/copyable — applies to both the HTML-body
   text documents and the rendered PDF canvases, on the standalone page and the
   gate-injected copy. JS in terms.js adds contextmenu/copy blocking on top. */
#terms{max-width:880px;margin:0 auto;padding:120px 24px 96px;color:var(--black);font-family:var(--sans);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}
#terms h1,#terms h2,#terms h3,#terms h4,#terms h5,#terms h6{font-family:var(--sans);color:var(--black);line-height:1.3}
#terms h6{font-size:15px;font-weight:600;margin:1.6em 0 .6em}
#terms p{font-size:14px;line-height:1.7;margin:0 0 1em}
#terms u{text-underline-offset:2px}
#terms a{color:var(--orange)}
#terms table{width:100%;border-collapse:collapse;margin:1em 0}
#terms td,#terms th{border:1px solid var(--border-l);padding:8px 10px;font-size:13px;vertical-align:top}
/* Text (HTML-body) documents render white-on-black, full-bleed, with the text
   column kept centered ~880px. Applies the same standalone and when the gate
   injects this #terms element. PDF documents keep the light default. */
#terms.tc-text{max-width:none;margin:0;padding:120px max(24px,calc(50% - 440px)) 120px;background:var(--black);color:var(--white);min-height:100vh}
#terms.tc-text h1,#terms.tc-text h2,#terms.tc-text h3,#terms.tc-text h4,#terms.tc-text h5,#terms.tc-text h6{color:var(--white)}
#terms.tc-text td,#terms.tc-text th{border-color:var(--border-d)}
#pdf-container{display:flex;flex-direction:column;align-items:center;gap:12px}
#pdf-container canvas{max-width:100%;height:auto;border:1px solid var(--border-l)}

#terms-gate{max-width:520px;margin:0 auto;padding:180px 24px 140px;text-align:center}
#terms-gate .eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mgrey);margin-bottom:20px}
#terms-gate h1{font-family:var(--sans);font-weight:600;font-size:clamp(30px,5vw,44px);line-height:1.05;letter-spacing:-.02em;color:var(--orange);margin-bottom:14px}
#terms-gate h1 em{color:var(--orange);font-style:normal}
#terms-gate .tc-blurb{font-size:15px;color:var(--mgrey);line-height:1.6;margin-bottom:36px}
.tc-form{display:flex;flex-direction:column;gap:14px;align-items:center}
.tc-input-row{display:flex;width:100%;max-width:380px;border:1px solid var(--border-l);background:#fff;border-radius:2px;overflow:hidden}
.tc-input-row input{flex:1;border:0;padding:14px 16px;font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--black);background:transparent;outline:none}
.tc-input-row button{border:0;background:var(--black);color:var(--white);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:0 22px;cursor:pointer;transition:background .2s}
.tc-input-row button:hover{background:var(--orange)}
.tc-error{color:var(--orange);font-size:13px;font-weight:500;margin-top:4px}
.tc-error.hide{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ─── EVENT ANNOUNCEMENT BAR ──────────────────────────────────────────────
   Site-wide bar across the very top, toggled by `announcement.enabled` in
   Layout.astro (which adds `has-ann` to <body>). The bar is fixed above the
   nav; --ann-h is its height. The nav and the few non-hero page tops are each
   shifted down by exactly --ann-h, so every page keeps its original clearance
   and nothing tucks under the header. Full-bleed heroes overlay as before. */
body.has-ann{--ann-h:40px}

.ann-bar{position:fixed;top:0;left:0;right:0;z-index:101;height:var(--ann-h);display:flex;align-items:center;justify-content:center;gap:12px;padding:0 56px;background:var(--orange);border-bottom:1px solid var(--border-l);text-decoration:none;cursor:none}
.ann-bar:hover{filter:brightness(.95)}
.ann-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.ann-msg{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:-.005em;color:var(--ink)}
.ann-cta{flex:0 0 auto;display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ann-arrow{display:inline-block;transition:transform .2s}
.ann-bar:hover .ann-arrow{transform:translateX(3px)}

/* Shift the fixed nav down so the bar sits above it */
body.has-ann nav#nav{top:var(--ann-h)}

/* Non-hero page tops reserve space below the nav — add --ann-h so each keeps
   its original gap. (Full-bleed heroes on the homepage overlay, so no change.) */
body.has-ann .detail-bc{padding-top:calc(88px + var(--ann-h))}
body.has-ann .mg-bc{padding-top:calc(88px + var(--ann-h))}
body.has-ann .legal-page{padding-top:calc(140px + var(--ann-h))}
body.has-ann #terms{padding-top:calc(120px + var(--ann-h))}
body.has-ann #terms-gate{padding-top:calc(180px + var(--ann-h))}
/* 404-style pages open with a bare .detail-hero (no breadcrumb above it).
   On real detail pages the .detail-hero follows .detail-bc, so reset it there. */
body.has-ann .detail-hero{padding-top:calc(48px + var(--ann-h))}
body.has-ann .detail-bc + .detail-hero{padding-top:48px}

@media(max-width:900px){
  body.has-ann{--ann-h:44px}
  .ann-bar{padding:0 20px;gap:9px}
  .ann-msg{font-size:11.5px}
  .ann-cta{font-size:10px;letter-spacing:.1em}
  body.has-ann .detail-bc{padding-top:calc(80px + var(--ann-h))}
  body.has-ann .mg-bc{padding-top:calc(80px + var(--ann-h))}
  body.has-ann .detail-hero{padding-top:calc(24px + var(--ann-h))}
  body.has-ann .detail-bc + .detail-hero{padding-top:24px}
}
@media(max-width:720px){
  body.has-ann .legal-page{padding-top:calc(112px + var(--ann-h))}
}