/* Akshat Travel — design system
   Navy #143C63 + marigold #A8681A. Archivo / Source Sans 3 / IBM Plex Mono. */

:root{
  --bg:#F5F7F8; --surface:#FFFFFF; --surface-2:#EDF2F4; --surface-3:#E3EBEE;
  --ink:#0D1B21; --ink-2:#3D5560; --muted:#6B838E; --line:#DCE5E9; --line-2:#C8D6DC;
  --accent:#143C63; --accent-soft:#E6EDF6; --accent-fg:#FFFFFF;
  --signal:#A8681A; --signal-soft:#F9F1E2;
  --good:#1B6E56; --good-soft:#E3F1EC;
  --warn:#8A5A08; --warn-soft:#FAF0DC;
  --bad:#A3342C; --bad-soft:#FBEAE8;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
  --r1:#184f95; --r2:#256abf; --r3:#3987e5; --r4:#86b6ef;
  --grid:#E7EDF0;
  --shadow:0 1px 2px rgba(13,27,33,.05), 0 8px 24px -12px rgba(13,27,33,.16);
  --shadow-lg:0 2px 4px rgba(13,27,33,.06), 0 24px 48px -20px rgba(13,27,33,.28);
  --radius:14px; --radius-sm:9px;
  --font-display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body:'Source Sans 3','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --container:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#081318; --surface:#0F1D23; --surface-2:#16272F; --surface-3:#1D323B;
    --ink:#E9F1F4; --ink-2:#B3C6CE; --muted:#87A1AC; --line:#1E333C; --line-2:#2A444F;
    --accent:#7BAFE0; --accent-soft:#15283C; --accent-fg:#05121F;
    --signal:#E3A85C; --signal-soft:#2C2418;
    --good:#4FBF95; --good-soft:#0E2A22;
    --warn:#D9A44C; --warn-soft:#2A2214;
    --bad:#E38078; --bad-soft:#2E1A18;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70;
    --r1:#b7d3f6; --r2:#86b6ef; --r3:#5598e7; --r4:#2a78d6;
    --grid:#1B2E37;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.45), 0 24px 48px -20px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --bg:#081318; --surface:#0F1D23; --surface-2:#16272F; --surface-3:#1D323B;
  --ink:#E9F1F4; --ink-2:#B3C6CE; --muted:#87A1AC; --line:#1E333C; --line-2:#2A444F;
  --accent:#7BAFE0; --accent-soft:#15283C; --accent-fg:#05121F;
  --signal:#E3A85C; --signal-soft:#2C2418;
  --good:#4FBF95; --good-soft:#0E2A22;
  --warn:#D9A44C; --warn-soft:#2A2214;
  --bad:#E38078; --bad-soft:#2E1A18;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70;
  --r1:#b7d3f6; --r2:#86b6ef; --r3:#5598e7; --r4:#2a78d6;
  --grid:#1B2E37;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.45), 0 24px 48px -20px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; letter-spacing:-.022em; line-height:1.14; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.wrap{max-width:var(--container); margin:0 auto; padding:0 24px}
.sec{padding:84px 0; border-top:1px solid var(--line)}
.sec.plain{border-top:0}
.sec-head{display:flex; flex-direction:column; gap:14px; max-width:64ch; margin-bottom:44px}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0}
h2{font-size:clamp(28px,3.3vw,39px)}
h3{font-size:19px}
.lede{color:var(--ink-2); font-size:18px; max-width:62ch}
.center{text-align:center; align-items:center; margin-left:auto; margin-right:auto}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:22px; height:70px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.brand svg{display:block; flex:none}
.brand .bt{display:flex; flex-direction:column; line-height:1}
.brand .bt b{font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.005em}
.brand .bt i{font-style:normal; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.36em; color:var(--muted); margin-top:4px}
.nav-links{display:flex; gap:4px; margin-left:auto; align-items:center}
.nav-item{position:relative}
.nav-item > a{color:var(--ink-2); text-decoration:none; font-size:15.5px; padding:9px 12px; border-radius:8px; display:inline-flex; align-items:center; gap:6px}
.nav-item > a:hover, .nav-item:focus-within > a{color:var(--accent); background:var(--accent-soft)}
.nav-item.on > a{color:var(--accent); font-weight:600}
.dropdown{position:absolute; top:100%; left:0; min-width:290px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden; transform:translateY(6px); transition:.16s ease; z-index:70}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{opacity:1; visibility:visible; transform:none}
.dropdown a{display:block; padding:9px 11px; border-radius:8px; text-decoration:none; font-size:15px; color:var(--ink)}
.dropdown a small{display:block; color:var(--muted); font-size:13px; margin-top:1px}
.dropdown a:hover{background:var(--surface-2)}
.nav-cta{display:flex; gap:9px; align-items:center; margin-left:8px}
.menu-btn{display:none; background:transparent; border:1px solid var(--line-2); border-radius:8px; width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer}
.mobile-nav{display:none; border-top:1px solid var(--line); background:var(--surface); padding:10px 24px 18px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block; padding:10px 0; text-decoration:none; color:var(--ink-2); border-bottom:1px solid var(--line); font-size:16px}
.mobile-nav .grp{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); padding:14px 0 4px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--radius-sm); border:1px solid transparent; padding:11px 18px; font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:-.01em; cursor:pointer; text-decoration:none; transition:transform .12s ease, background .15s ease, border-color .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-fg)}
.btn-primary:hover{background:color-mix(in srgb, var(--accent) 86%, var(--ink))}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn-signal{background:var(--signal); color:#fff}
.btn-sm{padding:8px 14px; font-size:14px}
.btn-lg{padding:14px 24px; font-size:16.5px}
.theme-toggle{background:transparent; border:1px solid var(--line-2); border-radius:8px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-2)}
.theme-toggle:hover{color:var(--accent); border-color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding:72px 0 76px}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
.hero.narrow{padding:60px 0 40px}
.pill{display:inline-flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:6px 14px 6px 8px; font-size:13.5px; color:var(--ink-2); width:fit-content}
.pill b{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; background:var(--signal-soft); color:var(--signal); padding:3px 8px; border-radius:999px; font-weight:500}
h1{font-size:clamp(34px,4.6vw,54px); margin:20px 0 18px}
h1 em{font-style:normal; color:var(--accent)}
.hero p.sub{font-size:19px; color:var(--ink-2); max-width:54ch}
.hero-actions{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.hero-note{margin-top:16px; font-size:14px; color:var(--muted)}
.crumb{font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.crumb a{color:var(--accent); text-decoration:none}

/* ---------- generic blocks ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.stat{background:var(--surface); padding:24px}
.stat .n{font-family:var(--font-display); font-weight:700; font-size:32px; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stat .l{font-size:14.5px; color:var(--muted); margin-top:4px}

.mods{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.mods.two{grid-template-columns:repeat(2,1fr)}
.mod{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:11px; transition:border-color .18s ease, transform .18s ease; text-decoration:none; color:inherit}
.mod:hover{border-color:var(--line-2); transform:translateY(-2px)}
.mod .ic{width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center}
.mod p{font-size:15.5px; color:var(--ink-2)}
.mod ul{margin:6px 0 0; padding-left:18px; color:var(--muted); font-size:14.5px; display:flex; flex-direction:column; gap:4px}
.mod .more{font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--accent); margin-top:auto; padding-top:6px}

.steps{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.step{padding:26px 24px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:10px}
.step:last-child{border-right:0}
.step .n{font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--accent)}
.step p{font-size:15px; color:var(--ink-2)}

.logos{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.logo-cell{background:var(--surface); padding:20px 12px; text-align:center; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink-2)}
.logo-cell small{display:block; font-family:var(--font-mono); font-weight:400; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px}

.split{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.checklist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:16px; color:var(--ink-2)}
.checklist li{display:flex; gap:10px; align-items:flex-start}
.checklist li svg{flex:none; margin-top:5px; color:var(--good)}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}

.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start}
.plan{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:14px}
.plan.feat{border-color:var(--accent); box-shadow:var(--shadow-lg); position:relative}
.plan.feat::before{content:attr(data-tag); position:absolute; top:-11px; left:26px; background:var(--accent); color:var(--accent-fg); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:999px}
.plan .cost{font-family:var(--font-display); font-weight:700; font-size:38px; letter-spacing:-.035em; font-variant-numeric:tabular-nums; line-height:1}
.plan .cost span{font-size:15px; font-weight:500; color:var(--muted); letter-spacing:0}
.plan .desc{font-size:15px; color:var(--ink-2)}
.plan ul{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:15px; color:var(--ink-2)}
.plan li{display:flex; gap:9px; align-items:flex-start}
.plan li svg{flex:none; margin-top:4px; color:var(--good)}
.plan .btn{margin-top:6px}

.faq{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); max-width:880px}
details{border-bottom:1px solid var(--line)}
details:last-child{border-bottom:0}
summary{cursor:pointer; padding:18px 22px; font-family:var(--font-display); font-weight:600; font-size:16.5px; list-style:none; display:flex; align-items:center; gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+'; margin-left:auto; color:var(--accent); font-family:var(--font-mono); font-size:19px}
details[open] summary::after{content:'\2212'}
details p{padding:0 22px 20px; color:var(--ink-2); font-size:15.5px; max-width:70ch}

.cta{background:var(--accent); color:var(--accent-fg); border-radius:var(--radius); padding:52px 44px; display:flex; gap:32px; align-items:center; flex-wrap:wrap}
.cta h2{color:var(--accent-fg); font-size:clamp(26px,3vw,34px)}
.cta p{color:color-mix(in srgb, var(--accent-fg) 82%, transparent); margin-top:10px; max-width:52ch; font-size:16.5px}
.cta .btn{background:var(--accent-fg); color:var(--accent); margin-left:auto}

footer.site{border-top:1px solid var(--line); padding:44px 0 52px}
.fgrid{display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:28px}
.fcol h4{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:400; margin:0 0 12px}
.fcol a{display:block; color:var(--ink-2); text-decoration:none; font-size:14.5px; padding:4px 0}
.fcol a:hover{color:var(--accent)}
.fbot{display:flex; gap:16px; align-items:center; margin-top:36px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); flex-wrap:wrap}

.notice{background:var(--signal-soft); color:var(--signal); border:1px solid color-mix(in srgb, var(--signal) 30%, transparent); border-radius:var(--radius-sm); padding:12px 16px; font-size:14.5px; display:flex; gap:10px; align-items:flex-start}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label{font-family:var(--font-mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{background:var(--bg); border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:11px 12px; font-size:15.5px; width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-grid .full{grid-column:1 / -1}

@media (max-width:1000px){
  .hero-grid,.split{grid-template-columns:1fr; gap:36px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .mods,.plans,.mods.two{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2){border-right:0}
  .step:nth-child(1),.step:nth-child(2){border-bottom:1px solid var(--line)}
  .logos{grid-template-columns:repeat(3,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:640px){
  body{font-size:16px}
  .sec{padding:56px 0}
  .hero{padding:40px 0 48px}
  .mods,.plans,.steps,.stats,.mods.two,.form-grid{grid-template-columns:1fr}
  .step{border-right:0; border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .logos{grid-template-columns:1fr 1fr}
  .cta{padding:34px 22px}
  .cta .btn{margin-left:0}
  .fgrid{grid-template-columns:1fr}
  .nav-cta .btn-ghost{display:none}
}

/* ---------- AI call panel ---------- */
.call{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden}
.call-top{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.dot-live{width:9px; height:9px; border-radius:50%; background:var(--good); animation:ping 2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.call-top .who{font-family:var(--font-display); font-weight:600; font-size:15px}
.call-top .num{margin-left:auto; font-family:var(--font-mono); font-size:12.5px; color:var(--muted)}
.wave{display:flex; align-items:flex-end; gap:3px; height:16px}
.wave span{width:3px; background:var(--accent); border-radius:2px; height:30%; animation:bar 1.1s ease-in-out infinite}
.wave span:nth-child(2){animation-delay:.12s} .wave span:nth-child(3){animation-delay:.24s}
.wave span:nth-child(4){animation-delay:.36s} .wave span:nth-child(5){animation-delay:.48s}
@keyframes bar{0%,100%{height:25%}50%{height:100%}}
.transcript{padding:18px; display:flex; flex-direction:column; gap:12px; min-height:268px}
.line{display:flex; gap:11px; opacity:0; transform:translateY(6px); animation:rise .45s ease forwards}
@keyframes rise{to{opacity:1; transform:none}}
.line .av{flex:none; width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-family:var(--font-mono); font-size:10.5px; font-weight:500}
.line.caller .av{background:var(--surface-3); color:var(--ink-2)}
.line.agent .av{background:var(--accent); color:var(--accent-fg)}
.line .txt{font-size:15px; line-height:1.5; color:var(--ink-2); padding-top:2px}
.line.agent .txt{color:var(--ink)}
.call-result{margin:0 18px 18px; border:1px solid var(--line); border-left:3px solid var(--good); border-radius:var(--radius-sm); background:var(--good-soft); padding:13px 15px; opacity:0; animation:rise .5s ease forwards}
.call-result .rt{font-family:var(--font-display); font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:8px}
.call-result .rd{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-2); margin-top:6px}
@media (prefers-reduced-motion: reduce){
  .line,.call-result{opacity:1; transform:none; animation:none}
  .wave span{animation:none; height:60%}
  .dot-live{animation:none}
}

/* ---------- booking engine ---------- */
.demo{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.tabs{display:flex; border-bottom:1px solid var(--line); background:var(--surface-2); overflow-x:auto}
.tab{appearance:none; background:transparent; border:0; border-bottom:2px solid transparent; padding:15px 22px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--muted); cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:8px}
.tab[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent); background:var(--surface)}
.tab:hover{color:var(--ink)}
.searchbar{padding:22px; display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)) auto; align-items:end}
.searchbar .go .btn{width:100%; white-space:nowrap}
.results{border-top:1px solid var(--line); display:none}
.results.on{display:block}
.results-bar{display:flex; align-items:center; gap:14px; padding:14px 22px; border-bottom:1px solid var(--line); background:var(--surface-2); flex-wrap:wrap}
.results-bar .cnt{font-size:14.5px; color:var(--ink-2)}
.results-bar .cnt b{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.results-bar .sort{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted)}
.results-bar select{background:var(--surface); border:1px solid var(--line-2); border-radius:7px; padding:6px 10px; font-size:14px}
.rlist{display:flex; flex-direction:column}
.row{display:grid; grid-template-columns:76px 1fr auto; gap:18px; padding:18px 22px; border-bottom:1px solid var(--line); align-items:center}
.row:last-child{border-bottom:0}
.thumb{width:76px; height:76px; border-radius:10px; background:var(--surface-3); display:grid; place-items:center; color:var(--accent)}
.row .name{font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-.015em}
.row .meta{font-size:14.5px; color:var(--muted); margin-top:3px}
.row .tags{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap}
.tag{font-family:var(--font-mono); font-size:11px; padding:3px 8px; border-radius:6px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}
.tag.free{background:var(--good-soft); border-color:transparent; color:var(--good)}
.price{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.price .amt{font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.price .per{font-size:13px; color:var(--muted); margin-top:-6px}
.stars{color:var(--signal); font-size:13px; letter-spacing:.06em}
.booking{border-top:1px solid var(--line); padding:24px 22px; background:var(--surface-2); display:none}
.booking.on{display:block}
.booking .selected{font-size:14.5px; color:var(--ink-2); margin:4px 0 20px}
.guest-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.booking-foot{display:flex; align-items:center; gap:16px; margin-top:20px; flex-wrap:wrap}
.booking-foot .total{font-family:var(--font-display); font-weight:700; font-size:22px; font-variant-numeric:tabular-nums}
.booking-foot .total small{display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:400}
.booking-foot .btn{margin-left:auto}
.voucher{border-top:1px solid var(--line); padding:28px 22px; display:none; background:var(--surface)}
.voucher.on{display:block}
.vhead{display:flex; align-items:center; gap:12px}
.vcheck{width:34px; height:34px; border-radius:50%; background:var(--good-soft); color:var(--good); display:grid; place-items:center; flex:none}
.vgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; margin:20px 0 0}
.vcell{background:var(--surface-2); padding:14px 16px}
.vcell dt{font-family:var(--font-mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.vcell dd{margin:5px 0 0; font-family:var(--font-display); font-weight:600; font-size:16px; font-variant-numeric:tabular-nums}
.vnote{margin-top:16px; font-size:14px; color:var(--muted)}
.empty{padding:34px 22px; text-align:center; color:var(--muted); font-size:15.5px}
.spinner{display:inline-block; width:15px; height:15px; border:2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color:currentColor; border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.form-ok{margin-top:14px; color:var(--good); font-size:15px; font-weight:600}
.form-err{margin-top:14px; color:var(--bad); font-size:15px}

@media (max-width:1000px){
  .searchbar{grid-template-columns:1fr 1fr}
  .searchbar .go{grid-column:1 / -1}
  .vgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .searchbar,.guest-grid{grid-template-columns:1fr}
  .searchbar .go label{display:none}
  .row{grid-template-columns:56px 1fr; gap:14px}
  .thumb{width:56px; height:56px}
  .price{grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; width:100%}
  .vgrid{grid-template-columns:1fr}
}

/* ---------- sign-in hub and traveller account ---------- */
.roles{display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:18px; align-items:start}
.role{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:12px}
.role.main{border-color:var(--accent); box-shadow:var(--shadow-lg)}
.role .ic{width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center}
.role p{font-size:15.5px; color:var(--ink-2)}
.role .btn{margin-top:auto}
.switcher{display:flex; gap:0; border-bottom:1px solid var(--line); margin:4px 0 18px}
.switcher button{appearance:none; background:transparent; border:0; border-bottom:2px solid transparent; padding:10px 2px; margin-right:22px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--muted); cursor:pointer}
.switcher button[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent)}
.authform{display:none; flex-direction:column; gap:14px}
.authform.on{display:flex}

.acct-head{display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:26px}
.acct-head .who h1{font-size:clamp(26px,3.4vw,36px); margin:0}
.acct-head .who p{color:var(--muted); font-size:15.5px; margin-top:6px}
.acct-head .right{margin-left:auto; display:flex; gap:10px}
.acct-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:26px}
.acct-stat{background:var(--surface); padding:20px 22px}
.acct-stat .n{font-family:var(--font-display); font-weight:700; font-size:28px; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.acct-stat .l{font-size:14px; color:var(--muted); margin-top:3px}

.trip{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.trip + .trip{margin-top:12px}
.trip.past{opacity:.72}
.trip .ti{width:44px; height:44px; border-radius:11px; background:var(--surface-2); color:var(--accent); display:grid; place-items:center; flex:none}
.trip .body{flex:1; min-width:230px}
.trip h3{font-size:17.5px}
.trip .meta{font-size:14.5px; color:var(--muted); margin-top:4px}
.trip .ref{font-family:var(--font-mono); font-size:12.5px; color:var(--accent); margin-top:8px}
.trip .side{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:10px; margin-left:auto}
.trip .amt{font-family:var(--font-display); font-weight:700; font-size:20px; font-variant-numeric:tabular-nums}
.badge-pill{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:3px 10px; border-radius:999px}
.badge-pill.ok{background:var(--good-soft); color:var(--good)}
.badge-pill.hold{background:var(--warn-soft); color:var(--warn)}
.badge-pill.bad{background:var(--bad-soft); color:var(--bad)}
.free-note{font-size:13px; color:var(--good); margin-top:2px}
.free-note.no{color:var(--muted)}

.trav{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line)}
.trav:last-child{border-bottom:0}
.trav .av{width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-family:var(--font-mono); font-size:12.5px; flex:none}
.trav b{font-size:15.5px}
.trav small{display:block; color:var(--muted); font-size:13px}
.trav button{margin-left:auto}
.acct-sec{margin-top:34px}
.acct-sec h2{font-size:22px; margin-bottom:6px}
.acct-sec .hint{color:var(--muted); font-size:14.5px; margin-bottom:16px}
.empty-trips{background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--radius); padding:36px 22px; text-align:center; color:var(--muted)}
.acct-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:22px; align-items:start}
@media (max-width:1000px){ .roles{grid-template-columns:1fr} .acct-grid{grid-template-columns:1fr} }
@media (max-width:640px){ .acct-stats{grid-template-columns:1fr} .trip .side{margin-left:0; align-items:flex-start; text-align:left} }
.nav-signin{color:var(--ink-2); text-decoration:none; font-size:15px; font-family:var(--font-display); font-weight:600; white-space:nowrap; padding:0 4px}
.nav-signin:hover{color:var(--accent)}
@media (max-width:760px){ .nav-signin{display:none} }

/* Keep the header on one line — nav items and buttons never wrap mid-label,
   and the secondary CTA steps aside before anything is forced to fold. */
.nav-item > a, .nav-cta .btn, .brand{white-space:nowrap}
@media (max-width:1260px){ .nav-cta .btn-ghost{display:none} }

/* ============================================================================
   UI polish — motion and box treatment.
   Palette is unchanged; this layer only adds depth, hover feedback and
   entrance motion. Everything degrades to static under prefers-reduced-motion.
   ========================================================================= */

/* ---------- scroll reveal ----------
   app.js adds .reveal to section children, then .in when they scroll into
   view. Elements stay visible if JS never runs — see .no-js fallback below. */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1; transform:none}
/* Stagger children of a grid so cards arrive in sequence, not all at once. */
.reveal.d1{transition-delay:.06s} .reveal.d2{transition-delay:.12s}
.reveal.d3{transition-delay:.18s} .reveal.d4{transition-delay:.24s}
.reveal.d5{transition-delay:.30s} .reveal.d6{transition-delay:.36s}

/* ---------- header ----------
   Flat until the page scrolls, then it lifts off the content. */
header.site{transition:box-shadow .25s ease, background .25s ease}
header.site.scrolled{box-shadow:0 1px 0 var(--line), 0 10px 30px -18px rgba(13,27,33,.35)}
.nav-item > a{transition:color .15s ease, background .15s ease}
/* Underline grows from the centre on hover. */
.nav-item > a::after{content:''; position:absolute; left:12px; right:12px; bottom:3px; height:2px; border-radius:2px; background:var(--accent); transform:scaleX(0); transform-origin:center; transition:transform .22s cubic-bezier(.2,.6,.2,1)}
.nav-item.on > a::after, .nav-item:hover > a::after{transform:scaleX(1)}

/* ---------- buttons ---------- */
.btn{position:relative; overflow:hidden}
.btn:hover{transform:translateY(-1px)}
.btn-primary:hover{box-shadow:0 6px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent)}
.btn-signal:hover{box-shadow:0 6px 18px -8px color-mix(in srgb, var(--signal) 70%, transparent)}
/* A light sweep passes across the button on hover. */
.btn::before{content:''; position:absolute; inset:0; background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform:translateX(-120%); transition:transform .6s ease}
.btn:hover::before{transform:translateX(120%)}
.btn-ghost::before{display:none}

/* ---------- cards and boxes ----------
   Cards get a soft top-edge highlight, a lift on hover, and an accent rule
   that draws in from the left. */
.mod, .plan, .panel, .step, .stat, .logo-cell{position:relative; background-image:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 55%, transparent), transparent 42%)}
.mod, .plan{transition:border-color .2s ease, transform .2s cubic-bezier(.2,.6,.2,1), box-shadow .2s ease}
.mod::after, .plan::after{content:''; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, var(--accent), var(--signal)); border-radius:var(--radius) var(--radius) 0 0; transform:scaleX(0); transform-origin:left; transition:transform .32s cubic-bezier(.2,.6,.2,1)}
.mod:hover::after, .plan:hover::after, .plan.feat::after{transform:scaleX(1)}
.mod:hover, .plan:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--line-2)}
/* The icon tile tilts and warms up with the card. */
.mod .ic{transition:transform .28s cubic-bezier(.2,.6,.2,1), background .2s ease, color .2s ease}
.mod:hover .ic{transform:translateY(-2px) rotate(-6deg) scale(1.06); background:var(--accent); color:var(--accent-fg)}
/* "Learn more" nudges right, so the card reads as clickable. */
.mod .more{transition:transform .2s ease, color .2s ease}
.mod:hover .more{transform:translateX(4px)}

/* Stat cells brighten one at a time on hover. */
.stat{transition:background .2s ease}
.stat:hover{background:var(--surface-2)}
.stat .n{transition:color .2s ease}
.stat:hover .n{color:var(--accent)}

/* Numbered steps: the number chip fills in on hover. */
.step{transition:background .2s ease}
.step:hover{background:var(--surface-2)}
.step .n{display:inline-flex; align-items:center; gap:7px; transition:color .2s ease, letter-spacing .2s ease}
.step:hover .n{color:var(--signal); letter-spacing:.18em}

.panel{transition:box-shadow .25s ease, transform .25s ease}
.panel:hover{box-shadow:var(--shadow-lg)}

.logo-cell{transition:background .2s ease, color .2s ease}
.logo-cell:hover{background:var(--surface-2); color:var(--accent)}

/* Checklist ticks pop in as the list reveals. */
.checklist li{transition:transform .18s ease}
.checklist li:hover{transform:translateX(3px)}
.checklist li svg{transition:transform .22s cubic-bezier(.2,.6,.2,1)}
.checklist li:hover svg{transform:scale(1.25)}

/* ---------- counters ----------
   app.js counts .stat .n up from zero the first time it is seen. */
.stat .n[data-count]{font-variant-numeric:tabular-nums}

/* ---------- reduced motion ----------
   One switch that turns the whole layer off for anyone who asks for it. */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none}
  .btn::before, .mod::after, .plan::after, .nav-item > a::after{display:none}
  .btn:hover, .mod:hover, .plan:hover, .checklist li:hover{transform:none}
  .mod:hover .ic, .mod:hover .more, .checklist li:hover svg{transform:none}
  header.site{transition:none}
}

/* ============================================================================
   Ambient background + headline motion.
   ========================================================================= */

/* ---------- animated background ----------
   Two slow-drifting colour fields behind everything, plus a faint grid that
   creeps sideways. Fixed so it never affects layout or scroll height, and
   pointer-events:none so it can never intercept a click. */
/* The page background lives on <html> so body's own background box stays
   transparent — otherwise the negative-z-index layers below would be painted
   behind an opaque body and never seen. */
html{background:var(--bg)}
body{position:relative; background:transparent}
body::before{
  content:''; position:fixed; inset:-20vmax; z-index:-2; pointer-events:none;
  background:
    radial-gradient(42vmax 42vmax at 16% 10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 64%),
    radial-gradient(36vmax 36vmax at 86% 16%, color-mix(in srgb, var(--signal) 20%, transparent), transparent 64%),
    radial-gradient(38vmax 38vmax at 64% 86%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 64%);
  animation:drift 34s ease-in-out infinite alternate;
}
@keyframes drift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(2.5vmax,-2vmax,0) scale(1.06)}
  100%{transform:translate3d(-2vmax,2.5vmax,0) scale(1.02)}
}
/* Dotted world map with live flight routes, sitting above the colour fields,
   plus the faint engineering grid drifting one cell over ~40s.
   The map is the first background layer, so the grid animation below has to
   name a position for every layer or it would drag the map too. */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    url('/assets/art/world-routes.svg'),
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-repeat:no-repeat, repeat, repeat;
  background-position:50% -4vh, 0 0, 0 0;
  background-size:min(1600px, 130%) auto, 64px 64px, 64px 64px;
  -webkit-mask-image:radial-gradient(130vmax 95vmax at 50% 0%, #000 12%, transparent 74%);
          mask-image:radial-gradient(130vmax 95vmax at 50% 0%, #000 12%, transparent 74%);
  animation:grid-drift 40s linear infinite;
}
@keyframes grid-drift{to{background-position:50% -4vh, 64px 64px, 64px 64px}}

/* ---------- footer skyline ----------
   A city silhouette anchored to the bottom of the footer, behind the text. */
footer.site{position:relative; overflow:hidden}
footer.site::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:220px; z-index:0;
  pointer-events:none; opacity:.5;
  background:url('/assets/art/skyline.svg') repeat-x bottom center / auto 220px;
  -webkit-mask-image:linear-gradient(to top, #000 25%, transparent 100%);
          mask-image:linear-gradient(to top, #000 25%, transparent 100%);
}
footer.site .wrap{position:relative; z-index:1}
/* Sections sit on the page background, so the field shows through the gaps
   rather than behind text. Cards keep their solid surface. */
.sec, header.site, footer{background-color:transparent}

/* ---------- headline word reveal ----------
   app.js wraps each word of the h1 in .w. Words rise and unblur in sequence. */
h1 .w{display:inline-block; opacity:0; transform:translateY(.5em); filter:blur(5px); animation:word-in .62s cubic-bezier(.2,.65,.25,1) forwards}
@keyframes word-in{to{opacity:1; transform:none; filter:blur(0)}}
/* The emphasised phrase gets an underline that sweeps in once the words land. */
h1 em{position:relative; white-space:nowrap}
h1 em::after{
  content:''; position:absolute; left:0; right:0; bottom:-.06em; height:.09em; border-radius:.05em;
  background:linear-gradient(90deg, var(--accent), var(--signal));
  transform:scaleX(0); transform-origin:left;
  animation:underline-in .7s cubic-bezier(.2,.65,.25,1) forwards; animation-delay:.85s;
}
@keyframes underline-in{to{transform:scaleX(1)}}
/* Supporting copy follows the headline in. */
.hero .sub, .hero-actions, .hero-note, .hero .pill{opacity:0; animation:word-in .6s ease forwards}
.hero .pill{animation-delay:.05s}
.hero .sub{animation-delay:.55s}
.hero-actions{animation-delay:.68s}
.hero-note{animation-delay:.8s}

/* ---------- stat cells ----------
   Each cell slides up as the row reveals, so the counters read as a sequence. */
.stats .stat{transition:background .2s ease, transform .2s ease}
.stat .n{display:inline-block}

@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
  body::after{animation:none}
  h1 .w{opacity:1; transform:none; filter:none; animation:none}
  h1 em::after{transform:scaleX(1); animation:none}
  .hero .sub, .hero-actions, .hero-note, .hero .pill{opacity:1; animation:none}
}

/* ============================================================================
   Site-wide interaction polish — footer, forms, tabs, results, FAQ, CTA.
   ========================================================================= */

/* ---------- footer ----------
   Columns reveal in sequence; links slide right behind a growing rule. */
footer.site .fcol h4{position:relative; display:inline-block; padding-bottom:6px}
footer.site .fcol h4::after{content:''; position:absolute; left:0; bottom:0; width:22px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--accent), var(--signal)); transform:scaleX(.55); transform-origin:left; transition:transform .35s cubic-bezier(.2,.6,.2,1)}
footer.site .fcol:hover h4::after{transform:scaleX(1)}
.fcol a{position:relative; width:fit-content; transition:color .18s ease, transform .18s cubic-bezier(.2,.6,.2,1), padding-left .18s ease}
/* A small caret slides out of the left edge as the link steps aside. */
.fcol a::before{content:'→'; position:absolute; left:0; opacity:0; transform:translateX(-6px); transition:opacity .18s ease, transform .18s ease; color:var(--signal); font-size:13px}
.fcol a:hover{color:var(--accent); transform:translateX(2px); padding-left:16px}
.fcol a:hover::before{opacity:1; transform:translateX(0)}
/* The mark rotates a touch and warms on hover. */
.brand svg{transition:transform .4s cubic-bezier(.2,.6,.2,1), filter .3s ease}
.brand:hover svg{transform:rotate(-8deg) scale(1.07); filter:drop-shadow(0 6px 14px color-mix(in srgb, var(--accent) 45%, transparent))}
.brand .bt b{transition:letter-spacing .3s ease}
.brand:hover .bt b{letter-spacing:.01em}
.fbot a{position:relative; text-decoration:none}
.fbot a::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .25s ease}
.fbot a:hover::after{transform:scaleX(1); transform-origin:left}

/* ---------- forms ----------
   The whole field responds to focus, not just the input outline. */
.field{transition:transform .18s ease}
.field label{transition:color .18s ease, letter-spacing .18s ease}
.field:focus-within label{color:var(--accent); letter-spacing:.14em}
.field input,.field select,.field textarea{transition:border-color .18s ease, box-shadow .22s ease, background .18s ease}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-2); background:var(--surface)}
.field:focus-within{transform:translateY(-1px)}

/* ---------- tabs ----------
   The active underline slides and thickens instead of snapping. */
.tab{position:relative; transition:color .2s ease, background .2s ease}
.tab::after{content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; border-radius:2px; background:var(--accent); transform:scaleX(0); transition:transform .28s cubic-bezier(.2,.6,.2,1)}
.tab:hover::after{transform:scaleX(.6)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tab:hover{background:color-mix(in srgb, var(--accent-soft) 60%, transparent)}

/* ---------- search results ----------
   Rows arrive one after another as the list renders (app.js stamps the
   per-row delay), and lift slightly under the pointer. */
.results.on .row{opacity:0; transform:translateY(8px); animation:row-in .42s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes row-in{to{opacity:1; transform:none}}
.row{transition:background .18s ease, box-shadow .2s ease, transform .18s ease; position:relative}
.row::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--accent), var(--signal)); transform:scaleY(0); transform-origin:top; transition:transform .25s cubic-bezier(.2,.6,.2,1)}
.row:hover{background:var(--surface-2)}
.row:hover::before{transform:scaleY(1)}
.row .name{transition:color .18s ease}
.row:hover .name{color:var(--accent)}

/* ---------- FAQ ----------
   The +/- rotates into an x-free minus and the answer slides open. */
summary{transition:background .18s ease, color .18s ease}
summary:hover{background:var(--surface-2); color:var(--accent)}
summary::after{transition:transform .3s cubic-bezier(.2,.6,.2,1), color .2s ease}
details[open] summary::after{transform:rotate(180deg); color:var(--signal)}
details[open] p{animation:answer-in .38s ease}
@keyframes answer-in{from{opacity:0; transform:translateY(-5px)}to{opacity:1; transform:none}}

/* ---------- closing CTA ----------
   A slow sheen crosses the navy panel so the strongest call to action moves. */
.cta{position:relative; overflow:hidden}
.cta::before{content:''; position:absolute; inset:0; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%); transform:translateX(-100%); animation:cta-sheen 7s ease-in-out infinite}
@keyframes cta-sheen{0%,72%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.cta > *{position:relative; z-index:1}

/* ---------- role cards, notices, tags ---------- */
.role{transition:border-color .2s ease, transform .2s cubic-bezier(.2,.6,.2,1), box-shadow .2s ease}
.role:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent)}
.notice{transition:transform .2s ease}
.notice:hover{transform:translateX(2px)}
.pill{transition:border-color .2s ease, transform .2s ease}
.pill:hover{border-color:var(--accent); transform:translateY(-1px)}

@media (prefers-reduced-motion: reduce){
  .fcol a:hover, .field:focus-within, .row:hover, .role:hover, .notice:hover, .pill:hover{transform:none}
  .brand:hover svg{transform:none}
  .fcol a::before, .row::before, .cta::before, .fbot a::after{display:none}
  .results.on .row{opacity:1; transform:none; animation:none}
  details[open] p{animation:none}
  details[open] summary::after{transform:none}
}

/* ============================================================================
   Touch and small-screen behaviour.
   ========================================================================= */

/* ---------- touch devices ----------
   On a phone there is no pointer to leave, so :hover latches on after a tap
   and the card stays lifted until you tap elsewhere. Neutralise the movement
   and reveal the decorative bars permanently instead of on hover. */
@media (hover:none){
  .mod:hover, .plan:hover, .role:hover, .btn:hover, .row:hover,
  .checklist li:hover, .pill:hover, .notice:hover, .fcol a:hover{transform:none}
  .mod:hover .ic{transform:none; background:var(--accent-soft); color:var(--accent)}
  .mod:hover .more{transform:none}
  .mod:hover, .plan:hover, .role:hover{box-shadow:var(--shadow)}
  /* The accent bar is a nice cue, so show it rather than hide it. */
  .mod::after, .plan::after{transform:scaleX(1); opacity:.55}
  .btn::before{display:none}
  /* The sliding caret has nothing to slide on a tap — drop it. */
  .fcol a::before{display:none}
  .fcol a:hover{padding-left:0}
  .row:hover::before{transform:scaleY(0)}
  .step:hover .n{letter-spacing:.14em}
}

/* ---------- artwork on small screens ----------
   At phone width the map would shrink to a few hundred pixels and read as
   noise, so scale it up and let it crop. The skyline gets shorter so it does
   not swallow the footer text. */
@media (max-width:760px){
  body::after{
    background-size:900px auto, 48px 48px, 48px 48px;
    background-position:60% -2vh, 0 0, 0 0;
    opacity:.42;
  }
  @keyframes grid-drift{to{background-position:60% -2vh, 48px 48px, 48px 48px}}
  footer.site::before{height:130px; background-size:auto 130px}
  /* Fixed background layers repaint on every scroll frame; on a phone that
     costs battery for something barely visible. Hold them still. */
  body::before{animation:none}
}

@media (max-width:520px){
  /* The stats row is one column here, so the counters need room to breathe. */
  .stat{padding:20px}
  .fbot{gap:8px}
  .fbot span[style*="margin-left"]{margin-left:0 !important}
  /* Long headlines were splitting awkwardly at the smallest sizes. */
  h1{font-size:clamp(28px,8vw,34px)}
  .hero p.sub{font-size:17px}
  .cta{padding:34px 22px}
  .cta .btn{margin-left:0}
}