/* Citra delivery shell: accepted layout, typography, navigation, billboard motion, footer and 404. */
:root{
  --ink:#020A0A;
  --ink-2:#0F1616;
  --paper:#FFFFFF;
  --mist:#F7F1F0;
  --line:rgba(2,10,10,.12);
  --line-strong:rgba(2,10,10,.85);
  --muted:rgba(2,10,10,.58);
  --red:#E25C5C;
  --red-deep:#B23434;
  --red-soft:#FBE9E9;
  --coral:#F68D8D;
  --w-line:rgba(255,255,255,.14);
  --w-muted:rgba(255,255,255,.64);
  --max:1280px;
  --ease:cubic-bezier(.22,.8,.2,1);
  /* Text sitting on a FIXED light fill (coral, white). Deliberately not
     --ink: the dark theme inverts --ink to cream, which turned coral and
     white buttons into 1.97:1 and 1.17:1 unreadable labels. This one never
     inverts, because the fills it sits on never invert either. */
  --on-light-fill:#020A0A;
  /* The accent when it is TEXT on a light surface. --red is #E25C5C, which
     is 3.55:1 on white and fails AA. --red-deep clears 6.12:1. This is a
     separate token rather than a change to --red because --red on --ink is
     a healthy 5.7:1, and swapping the token wholesale would drop those to
     2.7:1, breaking more than it fixed. Light surfaces only. */
  --red-ink:#B23434;
  /* Sequential heat ramp, mirrored from design-system/tokens.css:47-52 so the
     shared chart helpers resolve on production pages, which never load
     tokens.css. FILLS only, never text. Sequential matrices only, never
     categorical data. */
  --heat-0:var(--mist);
  --heat-1:#FBE9E9;
  --heat-2:#F8CFCB;
  --heat-3:#F6ADA6;
  --heat-4:#EE7E74;
  --heat-5:#D14A41;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body.fA{
  font-family:'Archivo',system-ui,sans-serif;
  background:var(--paper);color:var(--ink);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
a{color:inherit}
body.fA img{max-width:100%}
::selection{background:var(--coral);color:var(--ink)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
/* ===== skip link (WCAG 2.4.1 bypass blocks · all families) ===== */
.skip-link{position:fixed;top:-100px;left:16px;z-index:400;background:var(--ink);color:#fff;
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em;text-decoration:none;
  padding:12px 20px;border-radius:0 0 12px 12px;transition:top .25s var(--ease)}
.skip-link:focus{top:0}
.display{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.94;font-size:clamp(30px,4.2vw,54px)}
/* ^ DEFAULT display size so any section headline missing an explicit size renders at the
   standard scale instead of collapsing to the base ~24px. Hero h1 (.hero h1 / .city-hero h1),
   .sec-head h2, and any inline font-size are more specific and still win. (added v1.6) */
/* Anton is a single-weight (400) display face. Headings default to the UA bold (700); with no 700
   file the browser SYNTHESIZES bold, thickening strokes and closing up the letter-spacing (reads
   tighter + harder). Pin all headings to 400 as a safety net so no headline can faux-bold; any
   Archivo title that wants bold sets its own (more specific) font-weight and still wins. Mirrors
   design-system/tokens.css. (added v2.8) */
h1,h2,h3,h4,h5,h6{font-weight:400}
.serif-acc{font-family:'Instrument Serif',serif;font-style:italic;text-transform:none;letter-spacing:0;line-height:inherit}
.mono{font-family:'IBM Plex Mono',monospace}
body.fA .eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--red)}
.dark .eyebrow{color:var(--w-muted)}
.dark .eyebrow::before{background:var(--coral)}
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}
.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}
.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
body.loaded .line-mask>span{transform:none}
.line-mask:nth-child(1)>span{transition-delay:.15s}
.line-mask:nth-child(2)>span{transition-delay:.27s}
.line-mask:nth-child(3)>span{transition-delay:.39s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .line-mask>span{transform:none;transition:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-weight:600;font-size:15.5px;padding:15px 28px;border-radius:999px;
  border:1.5px solid var(--ink);overflow:hidden;isolation:isolate;
  transition:color .35s var(--ease),border-color .35s var(--ease),transform .2s var(--ease);
  cursor:pointer;background:transparent;color:var(--ink);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleY(1);transform-origin:top;transition:transform .4s var(--ease);
}
.btn-ghost::before{transform:scaleY(0);transform-origin:bottom}
.btn-primary{color:var(--paper)}
.btn-primary:hover::before{background:var(--red)}
.btn-primary:hover{border-color:var(--red);transform:translateY(-2px)}
.btn-ghost:hover{color:var(--paper);transform:translateY(-2px)}
.btn-ghost:hover::before{transform:scaleY(1)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-coral{border-color:var(--coral);color:var(--on-light-fill)}
.btn-coral::before{background:var(--coral)}
.btn-coral:hover{border-color:#fff;color:var(--on-light-fill)}
.btn-coral:hover::before{background:#fff}
/* A button must never fill with the colour of the surface it sits on, or the
   pill disappears and only the label survives. On an ink surface the ghost and
   plain buttons fill with paper and take dark text instead of filling black. */
.way-dark .btn:not(.btn-coral):not(.btn-primary):hover::before,
.dark .btn:not(.btn-coral):not(.btn-primary):hover::before,
.band-dark .btn:not(.btn-coral):not(.btn-primary):hover::before{background:#fff}
.way-dark .btn:not(.btn-coral):not(.btn-primary):hover,
.dark .btn:not(.btn-coral):not(.btn-primary):hover,
.band-dark .btn:not(.btn-coral):not(.btn-primary):hover{color:var(--on-light-fill);border-color:#fff}
.btn-sm{padding:10px 20px;font-size:14px}
.btn-onDark{border-color:rgba(255,255,255,.5);color:#fff}
.btn-onDark::before{transform:scaleY(0);transform-origin:bottom;background:#fff}
.btn-onDark:hover{color:var(--ink);border-color:#fff;transform:translateY(-2px)}
.btn-onDark:hover::before{transform:scaleY(1)}
body.fA nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,box-shadow .4s,border-color .4s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:'Anton',sans-serif;font-size:21px;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;display:flex;align-items:center;gap:8px}
body.fA .logo i, body.fB .logo i{width:10px;height:10px;border-radius:50%;background:var(--red);display:inline-block;animation:blink 3.4s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.nav-links{display:flex;gap:30px;list-style:none}
.nav-links a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--muted);position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:flex;gap:14px;align-items:center}
.nav-login{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--muted)}
.nav-login:hover{color:var(--ink)}
@media(max-width:920px){.nav-links,.nav-login{display:none}}
@media(max-width:640px){#nav .nav-req{display:none}}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:130px 0 40px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(52px,7vw,104px);margin:22px 0 26px}
.hero h1 .serif-acc{color:var(--red);font-size:.96em}
.hero .lede{font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:50ch;margin-bottom:36px}
.hero .lede strong{color:var(--ink);font-weight:600}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:22px;font-size:13.5px;color:var(--muted)}
.hero-note .mono{font-size:12px;color:var(--red)}
body.fA .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint::after{content:"";width:1px;height:34px;background:linear-gradient(var(--red),transparent);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-height:760px){body.fA .scroll-hint,body.fC .scroll-hint{display:none}}
.billboard{perspective:1100px}
.bb-tilt{transition:transform .25s ease-out;transform-style:preserve-3d}
.bb-frame{
  background:linear-gradient(#23292b,#0c1112);border-radius:5px;padding:16px;
  box-shadow:0 40px 80px -28px rgba(2,10,10,.5),0 0 110px rgba(246,141,141,.20);
  position:relative;border:1px solid rgba(255,255,255,.06);
}
.bb-frame::after{content:"";position:absolute;inset:9px;border-radius:3px;border:1px solid rgba(255,255,255,.12);pointer-events:none;z-index:4}
.bb-screen{
  border-radius:3px;aspect-ratio:16/9;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:7%;
  transition:background 1s var(--ease);
}
.bb-kicker{font-family:'IBM Plex Mono',monospace;font-size:clamp(9px,.8vw,11px);letter-spacing:.22em;color:rgba(255,255,255,.75);text-transform:uppercase;margin-bottom:10px;transition:opacity .4s}
.bb-creative{font-family:'Anton',sans-serif;text-transform:uppercase;line-height:.98;font-size:clamp(24px,2.6vw,38px);color:#fff;transition:opacity .4s;text-wrap:balance}
.bb-creative .hl{color:var(--coral)}
.bb-brand{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;margin-top:16px;color:rgba(255,255,255,.6);text-transform:uppercase;display:flex;justify-content:space-between;gap:10px;transition:opacity .4s}
.bb-orb{position:absolute;width:65%;aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.55;top:-30%;right:-18%;transition:background 1s var(--ease);pointer-events:none}
.bb-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.bb-live{position:absolute;top:7%;left:7%;display:flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;color:#fff;text-transform:uppercase}
.bb-live i{width:7px;height:7px;border-radius:50%;background:#FF4D4D;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}
.bb-catwalk{position:relative;height:7px;margin:5px 6% 0;background:linear-gradient(180deg,#3a4244,#10171a);border-radius:1px;box-shadow:0 5px 12px -7px rgba(2,10,10,.5)}
.bb-catwalk::before{content:"";position:absolute;left:1%;right:1%;bottom:7px;height:13px;background:
  repeating-linear-gradient(90deg,rgba(2,10,10,.5) 0 1.5px,transparent 1.5px 26px);
  border-top:1.5px solid rgba(2,10,10,.42)}
.bb-catwalk::after{content:"";position:absolute;inset:0 0 auto 0;height:1.5px;background:rgba(255,255,255,.18)}
.bb-pole{position:relative;display:flex;justify-content:center;height:150px;-webkit-mask:linear-gradient(#000 78%,transparent);mask:linear-gradient(#000 78%,transparent)}
.bb-pole i{display:block;width:26px;height:100%;background:linear-gradient(90deg,#050a0a 0%,#454d4d 42%,#222a2a 56%,#050a0a 100%)}
.bb-context{display:flex;gap:8px;justify-content:center;margin-top:6px;flex-wrap:wrap}
.chip{
  font-family:'IBM Plex Mono',monospace;font-size:12px;border:1.5px solid var(--line);
  background:transparent;padding:9px 16px;border-radius:999px;cursor:pointer;color:var(--muted);
  transition:all .3s var(--ease);
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bb-caption{text-align:center;margin-top:14px;font-size:13px;color:var(--muted)}
.bb-caption b{color:var(--red);font-weight:600}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:48px}.hero{min-height:auto;padding:120px 0 60px}body.fA .scroll-hint,body.fC .scroll-hint{display:none}}
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;padding:13px 0;border-block:1px solid var(--ink)}
.ticker-track{display:flex;gap:56px;width:max-content;animation:scroll 30s linear infinite}
.ticker-track span{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.06em;white-space:nowrap;display:flex;gap:10px;align-items:center;color:var(--w-muted)}
.ticker-track b{color:var(--coral);font-weight:500}
.ticker-track i{font-style:normal;color:var(--red);font-size:9px}
@keyframes scroll{to{transform:translateX(-50%)}}
.logos{padding:64px 0 70px;border-bottom:1px solid var(--line)}
.logos .label{text-align:center;margin-bottom:34px}
.marquee-mask{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee{display:flex;gap:72px;width:max-content;animation:scroll 40s linear infinite}
.marquee span{font-weight:700;font-size:21px;color:var(--ink);opacity:.4;white-space:nowrap;transition:opacity .3s}
.marquee:hover{animation-play-state:paused}
.marquee span:hover{opacity:1}
.marquee img{height:26px;width:auto;max-width:172px;object-fit:contain;opacity:.5;filter:saturate(0);transition:opacity .3s,filter .3s}
.marquee img:hover{opacity:1;filter:none}
@media(prefers-reduced-motion:reduce){.marquee,.ticker-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:24px}}
section{padding:80px 0}
/* ============================================================================
   SITEWIDE VERTICAL RHYTHM, single source of truth (added 2026-06-16, v1.6)
   Location pages + hubs (any page whose <body> has a direct <header class="city-hero">)
   get a uniform gap between every top-level section, INDEPENDENT of each section's
   inline padding. This permanently fixes the recurring tight/wide section-spacing bug:
   inline `style="padding:.."` values no longer matter for the gap. Dark bands
   (.intel / .final, class "dark") keep internal padding and a clean white gap around
   them. Bespoke pages (no body-level .city-hero) are unaffected. Uses :has() (universal
   support 2023+). Do NOT remove, this is the rule that keeps spacing consistent. */
body.locrhythm > section{padding-top:0!important;padding-bottom:84px!important}
body.locrhythm > section.dark{padding-top:84px!important;padding-bottom:84px!important}
body.locrhythm > section.dark + section,
body.locrhythm > div.final + section{padding-top:84px!important}
body.locrhythm > div.final{margin-top:0}
/* hero landmark illustration, global (every city/airport page); markup added by the generator.
   Sits right of the headline, contained within the header (never above/below it). */
.city-hero .wrap.hero-has-art{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(270px,.88fr);column-gap:clamp(26px,4vw,64px);align-items:center}
.city-hero .hero-copy{min-width:0}
.city-hero .hero-art{grid-column:2;grid-row:1;align-self:center;justify-self:center;min-width:0;pointer-events:none}
.city-hero .hero-art img{display:block;width:100%;height:auto;max-height:440px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 16px 30px rgba(2,10,10,.07))}
.city-hero .wrap.hero-has-art .statbar{grid-column:1 / -1}
@media(max-width:900px){.city-hero .wrap.hero-has-art{grid-template-columns:1fr;row-gap:0}.city-hero .hero-art{grid-column:1;grid-row:auto;margin:6px 0 2px}.city-hero .hero-art img{max-height:300px}}
@media(max-width:560px){.city-hero .hero-art img{max-height:230px}}
.sec-head h2{font-size:clamp(38px,5vw,72px);margin:20px 0 18px;max-width:16ch}
.sec-head h2 .serif-acc{color:var(--red)}
.sec-head p{font-size:18px;color:var(--muted);max-width:56ch}
.sec-head{margin-bottom:64px}
.statement{padding:150px 0;border-bottom:1px solid var(--line)}
.statement p{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(30px,4.6vw,64px);line-height:1.06;max-width:21ch}
.statement p .dim{color:rgba(2,10,10,.22);transition:color .6s var(--ease)}
.statement p .serif-acc{color:var(--red)}
.statement .statement-sub{font-family:'Archivo',system-ui,sans-serif;text-transform:none;letter-spacing:0;font-weight:400;font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--muted);max-width:58ch;margin-top:30px}
.statement .statement-sub b{color:var(--ink);font-weight:600}
.perf{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:54px}
.perf-card{border:1.5px solid var(--line-strong);border-radius:18px;padding:30px 26px;display:flex;flex-direction:column;min-height:200px;transition:background .4s var(--ease),transform .3s var(--ease)}
.perf-card:hover{background:var(--ink);transform:translateY(-5px)}
.perf-card .k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);transition:color .35s}
.perf-card .pv{font-family:'Anton',sans-serif;font-size:clamp(42px,3.8vw,58px);line-height:1;color:var(--ink);margin-top:auto;transition:color .35s}
.perf-card .pl{font-size:13.5px;color:var(--muted);margin-top:9px;padding-top:13px;border-top:1px dashed var(--line);transition:color .35s,border-color .35s}
.perf-card .pl b{color:var(--ink);font-weight:600;transition:color .35s}
.perf-card:hover .k{color:var(--coral)}
.perf-card:hover .pv{color:#fff}
.perf-card:hover .pl{color:var(--w-muted);border-color:var(--w-line)}
.perf-card:hover .pl b{color:#fff}
@media(max-width:980px){.perf{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.perf{grid-template-columns:1fr}.perf-card{min-height:auto}}
.ways{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--line-strong);border-radius:20px;overflow:hidden}
.way{padding:54px 48px;position:relative;display:flex;flex-direction:column;gap:18px;transition:background .45s var(--ease);min-height:430px}
.way+.way{border-left:1.5px solid var(--line-strong)}
.way .num{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;color:var(--red);text-transform:uppercase}
.way h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.4vw,34px);line-height:1}
.way p{color:var(--muted);font-size:16.5px;max-width:42ch}
.way .who{margin-top:auto;padding-top:18px;border-top:1px dashed var(--line);font-size:14.5px;color:var(--muted)}
.way .who b{color:var(--ink)}
.way:hover{background:var(--mist)}
.way.way-dark{background:var(--ink);color:var(--paper)}
.way.way-dark .num{color:var(--coral)}
.way.way-dark p,.way.way-dark .who{color:var(--w-muted)}
.way.way-dark .who{border-color:var(--w-line)}
.way.way-dark .who b{color:#fff}
.way.way-dark:hover{background:var(--ink-2)}
.way .btn{margin-top:22px;align-self:flex-start}
.way .ghost-icon{position:absolute;right:28px;top:30px;font-family:'Anton',sans-serif;font-size:120px;line-height:1;color:rgba(2,10,10,.05);-webkit-user-select:none;user-select:none;pointer-events:none}
.way-dark .ghost-icon{color:rgba(255,255,255,.05)}
@media(max-width:860px){.ways{grid-template-columns:1fr}.way+.way{border-left:none;border-top:1.5px solid var(--line-strong)}.way{min-height:auto}}
.steps{display:flex;flex-direction:column}
body.fA .step{
  display:grid;grid-template-columns:140px 1fr 1.2fr;gap:40px;align-items:baseline;
  padding:44px 0;border-top:1px solid var(--line);transition:padding .35s var(--ease);
}
body.fA .step:last-child{border-bottom:1px solid var(--line)}
body.fA .step .n{font-family:'Anton',sans-serif;font-size:clamp(40px,4vw,60px);color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:color .4s var(--ease)}
body.fA .step:hover .n{color:var(--red);-webkit-text-stroke-color:var(--red)}
body.fA .step h3{font-size:clamp(20px,2vw,26px);font-weight:700}
body.fA .step p{color:var(--muted);font-size:16.5px}
@media(max-width:820px){body.fA .step{grid-template-columns:1fr;gap:10px;padding:34px 0}}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.faq-grid .sec-head{position:sticky;top:110px;margin:0}
body.fA details, body.fE details{border-bottom:1px solid var(--line)}
body.fA details summary, body.fE details summary{
  cursor:pointer;font-size:clamp(17px,1.6vw,20px);font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;
  transition:color .25s;
}
body.fA details summary:hover, body.fE details summary:hover{color:var(--red)}
body.fA details summary::-webkit-details-marker, body.fE details summary::-webkit-details-marker{display:none}
body.fA details summary::after, body.fE details summary::after{content:"+";font-family:'Anton',sans-serif;font-size:26px;color:var(--red);transition:transform .35s var(--ease);flex-shrink:0}
body.fA details[open] summary::after, body.fE details[open] summary::after{transform:rotate(45deg)}
body.fA details .a, body.fE details .a{overflow:hidden;max-height:0;transition:max-height .45s var(--ease)}
body.fA details[open] .a, body.fE details[open] .a{max-height:300px}
body.fA details .a p{padding:0 0 26px;color:var(--muted);font-size:16px;max-width:62ch}
@media(max-width:920px){.faq-grid{grid-template-columns:1fr;gap:30px}.faq-grid .sec-head{position:static}}
body.fA .final{padding:20px 18px 110px}
body.fA .final-inner{
  background:var(--ink);border-radius:28px;padding:120px 32px;text-align:center;
  position:relative;overflow:hidden;
}
.final-inner::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(246,141,141,.16),transparent 60%);bottom:-50%;left:15%;pointer-events:none}
.final-inner::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
body.fA .final h2{font-size:clamp(44px,6.4vw,92px);color:#fff;max-width:13ch;margin:18px auto 22px}
.final h2 .serif-acc{color:var(--coral)}
body.fA .final p, body.fC .final p{color:var(--w-muted);margin-bottom:40px;font-size:17.5px}
.final .hero-ctas{justify-content:center;position:relative;z-index:1}
.final-req{position:relative;z-index:1;max-width:600px;margin:56px auto 0;padding-top:40px;border-top:1px solid var(--w-line)}
.final-req .fr-k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);margin-bottom:14px}
.final-req p{color:var(--w-muted);font-size:15.5px;max-width:46ch;margin:0 auto 24px}
.final-req p b{color:#fff;font-weight:600}
body.fA footer, body.fC footer, body.fD footer, body.fE footer{padding:80px 0 0;overflow:hidden}
.foot-grid{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;padding-bottom:64px}
.foot-grid .logo{font-size:19px}
.foot-about{max-width:30ch;margin-top:14px;font-size:14.5px;color:var(--muted)}
.foot-cities{margin-top:18px;font-size:11.5px;letter-spacing:.14em;color:var(--red-ink)}
.foot-cols{display:flex;gap:70px;flex-wrap:wrap;font-size:14.5px}
.foot-cols h4{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;color:var(--ink)}
.foot-cols ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-cols a{text-decoration:none;color:var(--muted);transition:color .25s}
.foot-cols a:hover{color:var(--red)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding:22px 0;border-top:1px solid var(--line)}
.foot-bottom a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* The giant decorative Citra footer watermark never intercepts legal links. */
.foot-mega{pointer-events:none}
.foot-bottom{position:relative;z-index:2}
body.fA .foot-mega, body.fB .foot-mega{font-family:'Anton',sans-serif;text-transform:none;font-size:clamp(48px,9vw,128px);line-height:.84;letter-spacing:0;text-align:center;color:var(--ink);-webkit-user-select:none;user-select:none;white-space:nowrap;transform:translateY(.12em)}
body.fA .foot-mega span, body.fB .foot-mega span{color:var(--red)}
/* ===== homepage photo wall (In the wild) ===== */
.wild{padding:80px 0}
.wild-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:18px;margin-top:54px}
.wild-grid>*{min-width:0}
.wfig{position:relative;margin:0;background:#060606;border-radius:16px;padding:10px;overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(2,10,10,.45);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.wfig:hover{transform:translateY(-6px);box-shadow:0 40px 80px -30px rgba(178,52,52,.4),0 0 80px rgba(246,141,141,.18)}
.wfig::after{content:"";position:absolute;inset:0;border-radius:16px;border:1px solid rgba(255,255,255,.1);pointer-events:none}
.wfig img{display:block;width:100%;height:100%;border-radius:9px;object-fit:cover;aspect-ratio:4/3;transition:transform .5s var(--ease)}
.wfig:hover img{transform:scale(1.03)}
.wfig.feature{grid-row:1/3;grid-column:1}
.wfig.feature img{aspect-ratio:4/5;height:100%}
.wfig.wide{grid-column:2/4}
.wfig.wide img{aspect-ratio:21/9}
.wfig figcaption{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:26px 16px 12px;border-radius:0 0 9px 9px;background:linear-gradient(transparent,rgba(2,6,6,.88) 55%);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.wfig figcaption b{color:var(--coral);font-weight:500;white-space:nowrap}
.wfig figcaption span{text-align:right}
.wild-note{margin-top:30px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--muted)}
.wild-note a{color:var(--red)}
@media(max-width:880px){
  .wild{padding:80px 0}
  .wild-grid{grid-template-columns:1fr;grid-template-rows:none}
  .wfig.feature{grid-row:auto;grid-column:auto}
  .wfig.feature img{aspect-ratio:4/3;height:auto}
  .wfig.wide{grid-column:auto}
  .wfig.wide img{aspect-ratio:16/9}
}
/* ===== mobile menu ===== */
.nav-burger{display:none;width:42px;height:42px;border:1.5px solid var(--line-strong);border-radius:999px;background:transparent;cursor:pointer;position:relative;flex-shrink:0;z-index:210}
.nav-burger i{position:absolute;left:12px;right:12px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease),opacity .25s,top .35s var(--ease)}
.nav-burger i:nth-child(1){top:15px}.nav-burger i:nth-child(2){top:20px}.nav-burger i:nth-child(3){top:25px}
body.menu-open .nav-burger i:nth-child(1){top:20px;transform:rotate(45deg)}
body.menu-open .nav-burger i:nth-child(2){opacity:0}
body.menu-open .nav-burger i:nth-child(3){top:20px;transform:rotate(-45deg)}
@media(max-width:920px){.nav-burger{display:block}}
.mmenu{display:none;position:fixed;inset:0;z-index:200;background:var(--ink);color:#fff;padding:96px 28px 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
body.menu-open .mmenu{display:block;opacity:1;visibility:visible;transform:none}
body.menu-open{overflow:hidden}
body.menu-open #nav{background:var(--ink)}
body.menu-open #nav .logo{color:#fff}
body.menu-open .nav-burger{border-color:rgba(255,255,255,.35)}
body.menu-open .nav-burger i{background:#fff}
.mmenu .mm-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);margin:26px 0 10px}
.mmenu a.mm-big{display:block;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(28px,8vw,40px);line-height:1.15;color:#fff;text-decoration:none;padding:4px 0}
.mmenu a.mm-big:active,.mmenu a.mm-big:hover{color:var(--coral)}
.mmenu .mm-cities{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
.mmenu .mm-cities a{display:block;color:rgba(255,255,255,.85);text-decoration:none;font-size:16.5px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mmenu .mm-cities a:active{color:var(--coral)}
.mmenu .mm-ctas{display:flex;flex-direction:column;gap:12px;margin-top:34px}
.mmenu .mm-ctas .btn{justify-content:center;border-color:#fff;color:#fff}
.mmenu .mm-ctas .btn::before{background:#fff;transform:scaleY(0)}
.mmenu .mm-ctas .btn:hover,.mmenu .mm-ctas .btn:active{color:var(--on-light-fill)}
.mmenu .mm-ctas .btn:hover::before,.mmenu .mm-ctas .btn:active::before{transform:scaleY(1)}
body.menu-open #nav{z-index:300}
.mmenu .mm-ctas .btn-coral{color:var(--on-light-fill);border-color:var(--coral)}
.mmenu .mm-ctas .btn-coral::before{background:var(--coral);transform:scaleY(1)}
.mmenu .mm-foot{margin-top:36px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:rgba(255,255,255,.45);text-transform:uppercase}

/* ===== 404 ===== */
.nf-hero{min-height:100vh;display:flex;align-items:center;padding:140px 0 80px}
.nf-board{background:#060606;border-radius:22px;padding:clamp(22px,4vw,46px);position:relative;
  box-shadow:0 60px 120px -40px rgba(2,10,10,.6),0 0 120px rgba(246,141,141,.16)}
.nf-board::after{content:"";position:absolute;inset:0;border-radius:22px;border:1px solid rgba(255,255,255,.12);pointer-events:none}
.nf-screen{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:clamp(28px,5vw,64px) clamp(20px,4vw,54px);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),radial-gradient(120% 140% at 50% 0%,#101616,#050808);position:relative;overflow:hidden}
.nf-live{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:34px}
.nf-live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--coral);margin-right:8px;animation:blink 1.4s infinite}
.nf-code{font-family:'Anton',sans-serif;font-size:clamp(90px,18vw,240px);line-height:.95;color:transparent;-webkit-text-stroke:2px var(--coral);text-align:center}
.nf-msg{font-family:'Anton',sans-serif;text-transform:uppercase;color:#fff;font-size:clamp(20px,3.4vw,40px);line-height:1.15;text-align:center;margin:18px 0 8px}
.nf-msg em{font-family:'Instrument Serif',serif;font-style:italic;text-transform:none;color:var(--coral)}
.nf-sub{text-align:center;color:rgba(255,255,255,.62);font-size:15.5px;max-width:54ch;margin:0 auto}
.nf-price{position:absolute;right:18px;bottom:14px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:rgba(255,255,255,.4);text-transform:uppercase}
.nf-legs{display:flex;justify-content:center;gap:120px;margin-top:-2px}
.nf-legs i{width:14px;height:90px;background:linear-gradient(180deg,#1a1a1a,#000);border-radius:0 0 5px 5px}
.nf-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.nf-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.nf-chip{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;border:1.5px solid var(--line-strong);border-radius:999px;padding:8px 16px;color:var(--muted);text-decoration:none;transition:all .25s}
.nf-chip:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
@media(max-width:560px){.nf-legs{gap:60px}.nf-legs i{height:60px}}
/* 3.8 approved design changes, generation-time overlay */
.btn:active{transform:translateY(0) scale(.975)}
.btn-coral{border-color:var(--red-deep);color:#fff}
.btn-coral::before{background:var(--red-deep)}
.btn-coral:hover{border-color:var(--ink);color:var(--paper)}
.btn-coral:hover::before{background:var(--ink)}
.hero-note .mono,.perf-card .k,.way .num,.mp-sig,.cap .k,.foot-cities{color:var(--red-deep)}
.bb-sweep{position:absolute;left:0;right:0;top:-30%;height:26%;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent)}
.bb-frame.pre .bb-screen{filter:brightness(0)}
.bb-frame.on .bb-screen{animation:bb-poweron 1.15s ease-out both}
.bb-frame.on .bb-sweep{animation:bb-sweep 1.05s ease-out .1s both}
@keyframes bb-poweron{0%,10%{filter:brightness(0)}18%{filter:brightness(1.9)}26%{filter:brightness(.55)}38%{filter:brightness(1.45)}58%{filter:brightness(.92)}100%{filter:brightness(1)}}
@keyframes bb-sweep{0%{top:-30%;opacity:0}12%{opacity:1}100%{top:110%;opacity:0}}
.bb-frame.swap .bb-screen{animation:bb-refresh .45s ease-out both}
.bb-frame.swap .bb-sweep{animation:bb-sweep .5s ease-out both}
@keyframes bb-refresh{0%{filter:brightness(1)}30%{filter:brightness(1.3)}55%{filter:brightness(.88)}100%{filter:brightness(1)}}
.bb-try{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;margin:16px 0 0}
.chip:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.chip:active{transform:scale(.97)}
.chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink);position:relative;overflow:hidden}
.chip.active::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--coral);transform-origin:left;transform:scaleX(0);animation:chip-cycle 4.6s linear forwards}
.bb-context.manual .chip.active::after{display:none}
@keyframes chip-cycle{to{transform:scaleX(1)}}
.crt{display:inline-block;background:repeating-linear-gradient(0deg,rgba(2,10,10,.78) 0 2px,var(--ink) 2px 4px);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:crt-flicker 6s steps(1,end) infinite}
@keyframes crt-flicker{0%,91%{opacity:1}92%{opacity:.5}93%{opacity:1}95%{opacity:.72}96%,100%{opacity:1}}
.score{grid-template-columns:86px 1fr 44px}
.score .bar{height:10px;position:relative;overflow:visible;border-radius:0;background:linear-gradient(0deg,transparent 0 4px,var(--mist) 4px 6px,transparent 6px),repeating-linear-gradient(90deg,var(--mist) 0 1px,transparent 1px 10%);background-size:100% 100%,calc(100% - 1px) 100%}
.score .bar i{display:block;height:4px;margin-top:3px;background:var(--coral);border-radius:99px;width:0;transition:width 1s var(--ease);position:relative}
.score .bar i::after{content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 2.5px var(--paper);opacity:0;transition:opacity .3s var(--ease) .7s}
.in .score .bar i::after{opacity:1}
.score .sv{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.score .sv::after{content:"/10";color:var(--muted);font-weight:400;margin-left:1px}
.mmenu .mm-ctas .btn-coral{color:#fff;border-color:var(--red-deep)}
.mmenu .mm-ctas .btn-coral::before{background:var(--red-deep);transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){.bb-frame .bb-screen{filter:none;animation:none}.bb-sweep{display:none}.crt{animation:none}}
@media(max-width:640px){.hero{padding:92px 0 48px}.hero-grid{gap:24px}.hero h1{font-size:clamp(44px,12vw,52px);margin:14px 0 18px}.hero-note{margin-top:12px}.bb-try{margin-top:10px}body.fE .rxa-crumb a,.kc-pills a{display:inline-flex;align-items:center;min-height:44px}body.fE .rxa-crumb a{padding:6px 0}.kc-pills a{padding:9px 13px}}

/* no-JS fallback for scroll-revealed content */
@media (scripting: none){.rv{opacity:1;transform:none;transition:none}}