/* ============================================================
   FIVE STAR CARS — design system
   Concept: "Landed in Vienna". Signature element = the window sticker.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Colour — brand blues + light greys, one warm note for "paper" */
  --ink:        #0A0C10;
  --ink-2:      #10141D;
  --ink-3:      #1A1D24;
  --navy:       #0B2E8F;
  --blue:       #3B6FE8;
  --blue-lift:  #5E8BF2;
  --electric:   #7FA1F5;
  --paper:      #F3F4F6;
  --mist:       #E7EAF0;
  --mist-2:     #DCE0E7;
  --white:      #FFFFFF;
  --steel:      #9AA3B2;
  --slate:      #333A45;
  --sticker:    #FAF9F5;   /* window-sticker stock — the only warm value */

  --grad: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);

  /* Type */
  --display: "Michroma", "Archivo", system-ui, sans-serif;
  --sans: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --t--1: 0.8125rem;
  --t-0:  1.0625rem;
  --t-1:  1.1875rem;
  --t-2:  1.5rem;
  --t-3:  clamp(1.65rem, 1.1rem + 2.2vw, 2.35rem);
  --t-4:  clamp(2.1rem, 1.2rem + 4vw, 3.4rem);
  /* Michroma is a wide, heavy face — it reads a good deal larger than its
     point size, so the display step tops out well below where a grotesque
     would. 80px was shouting; 54px still carries the hero. */
  --t-5:  clamp(1.9rem, .95rem + 3.1vw, 3.4rem);

  /* Space */
  --s1: .375rem;  --s2: .75rem;   --s3: 1.125rem; --s4: 1.75rem;
  --s5: 2.5rem;   --s6: 3.75rem;  --s7: 5.5rem;   --s8: 8rem;

  --wrap: 1320px;
  --gut: clamp(1.125rem, 4vw, 2.5rem);
  --hair: 1px solid var(--mist-2);
  --hair-dark: 1px solid rgba(255,255,255,.13);
  --r: 3px;                       /* near-square: catalogue, not consumer app */
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--slate);
  font-family:var(--sans); font-size:var(--t-0); line-height:1.6;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4{ margin:0; color:var(--ink); line-height:1.08; font-weight:700 }
p{ margin:0 0 var(--s3) }
p:last-child{ margin-bottom:0 }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px }
::selection{ background:var(--blue); color:#fff }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.wrap--narrow{ max-width:860px }

/* ---------- 3. Type roles ---------- */
.display{ font-family:var(--display); font-weight:400; letter-spacing:-.01em; line-height:1.02 }
.h-xl{ font-size:var(--t-5) }
.h-lg{ font-size:var(--t-4) }
.h-md{
  font-size:var(--t-3); font-variation-settings:"wdth" 118; font-weight:700;
  letter-spacing:-.015em;
}
.h-sm{ font-size:var(--t-2); font-variation-settings:"wdth" 112; font-weight:700 }
.lede{ font-size:var(--t-1); color:var(--slate); max-width:62ch }

.eyebrow{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--blue);
  display:flex; align-items:center; gap:var(--s2); margin:0 0 var(--s3);
}
.eyebrow::before{ content:""; width:1.75rem; height:2px; background:var(--blue); flex:none }
.eyebrow--light{ color:var(--electric) }
.eyebrow--light::before{ background:var(--electric) }
.eyebrow--plain::before{ display:none }

.data{
  font-family:var(--mono); font-size:var(--t--1); letter-spacing:.06em;
  text-transform:uppercase; color:var(--steel);
}
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em }

/* ---------- 4. Sections ---------- */
.section{ padding-block:var(--s7) }
section[id],div[id]{ scroll-margin-top:5.5rem }   /* clears the sticky header */
.section--tight{ padding-block:var(--s6) }
.section--dark{ background:var(--ink); color:var(--mist) }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color:var(--white) }
.section--line{ border-top:var(--hair) }

/* A dark band with a photograph behind it. The gradient keeps the copy side
   near-solid and lets the image live on the side the text does not occupy,
   so nothing needs a text-shadow to stay readable. */
.section--photo{ position:relative; overflow:hidden }
.section--photo>.wrap{ position:relative; z-index:1 }
.section__bg{ position:absolute; inset:0 }
.section__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 62%;
  opacity:.5 }
.section__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(96deg, rgba(10,12,16,.97) 0%, rgba(10,12,16,.92) 34%,
             rgba(10,12,16,.72) 62%, rgba(11,46,143,.46) 88%, rgba(10,12,16,.78) 100%);
}

.sec-head{ display:flex; flex-wrap:wrap; gap:var(--s4); align-items:flex-end;
  justify-content:space-between; margin-bottom:var(--s5) }
.sec-head>*:first-child{ flex:1 1 24rem; min-width:0 }
.sec-head p{ max-width:52ch }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.625rem; cursor:pointer;
  font-family:var(--mono); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.9375rem 1.5rem; border-radius:var(--r); border:1px solid transparent;
  background:transparent;   /* <button> otherwise inherits the UA's grey buttonface */
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{ transform:translateY(-1px) }
.btn--primary{ background:var(--navy); color:#fff }
.btn--primary:hover{ background:var(--blue) }
.btn--line{ border-color:var(--mist-2); color:var(--ink); background:transparent }
.btn--line:hover{ border-color:var(--navy); background:var(--white) }
.btn--onDark{ border-color:rgba(255,255,255,.28); color:#fff }
.btn--onDark:hover{ background:#fff; color:var(--ink); border-color:#fff }
.btn--sm{ padding:.6875rem 1.125rem; font-size:.6875rem }
.btn__arrow{ transition:transform .2s var(--ease) }
.btn:hover .btn__arrow{ transform:translateX(3px) }

/* ---------- 6. Header ---------- */
.util{
  background:var(--ink); color:var(--steel); font-family:var(--mono);
  font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase;
}
.util__in{ display:flex; justify-content:space-between; gap:var(--s3);
  padding-block:.5625rem; flex-wrap:wrap }
.util a{ color:var(--electric) }
.util a:hover{ color:#fff }

.site-header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px); border-bottom:var(--hair) }
.site-header__in{ display:flex; align-items:center; gap:var(--s4);
  justify-content:space-between; padding-block:var(--s3) }
.brand{ display:flex; align-items:center; gap:.6875rem; flex:none }
.brand img{ height:30px; width:auto }
.brand__mark{ font-family:var(--display); font-size:.9375rem; color:var(--ink); letter-spacing:.02em }

.nav{ display:flex; gap:var(--s4); align-items:center }
.nav a{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--slate); padding-block:.25rem;
  border-bottom:2px solid transparent; transition:color .18s, border-color .18s;
}
.nav a:hover,.nav a[aria-current]{ color:var(--navy); border-color:var(--blue) }
.header-cta{ display:flex; align-items:center; gap:var(--s3); flex:none }

/* ---------- 7. Hero ---------- */
.hero{ position:relative; background:var(--ink); color:#fff; overflow:hidden }
.hero__media{ position:absolute; inset:0 }
.hero__media img{ width:100%; height:100%; object-fit:cover; opacity:.62 }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,12,16,.96) 0%, rgba(10,12,16,.72) 42%,
             rgba(11,46,143,.28) 78%, rgba(10,12,16,.55) 100%);
}
.hero__in{ position:relative; display:grid; gap:var(--s6);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center;
  padding-block:clamp(4rem,10vw,7.5rem) }
.hero__in--wide{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) }
.hero h1{ color:#fff; margin-bottom:var(--s4) }
.hero__lede{ color:#C9CFDA; font-size:var(--t-1); max-width:46ch; margin-bottom:var(--s5) }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s3) }

/* ---------- 8. THE SIGNATURE: window sticker ---------- */
.sticker{
  background:var(--sticker); color:var(--ink); margin:0; border-radius:var(--r);
  box-shadow:0 24px 60px -20px rgba(10,12,16,.5), 0 0 0 1px rgba(10,12,16,.08);
  padding:var(--s4) var(--s4) var(--s3);
  font-family:var(--mono); position:relative;
}
.sticker--flat{ box-shadow:0 0 0 1px var(--mist-2) }
.sticker__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2);
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy); border-bottom:2px solid var(--ink); padding-bottom:.625rem;
}
.sticker__head b{ font-weight:600 }
.sticker__title{
  font-family:var(--sans); font-size:1.0625rem; font-variation-settings:"wdth" 112;
  font-weight:700; margin:var(--s3) 0 .25rem; line-height:1.2;
}
.sticker__sub{ font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel); margin-bottom:var(--s3) }
.sticker__rows{ margin:0; border-top:1px dashed rgba(10,12,16,.22) }
.srow{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3);
  padding:.5rem 0; border-bottom:1px dashed rgba(10,12,16,.16); font-size:.8125rem;
}
.srow dt{ color:var(--slate); letter-spacing:.02em }
.srow dd{ margin:0; font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap }
.srow--muted dd{ color:var(--steel) }
.sticker__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3);
  margin-top:var(--s3); padding-top:var(--s3); border-top:2px solid var(--ink);
}
.sticker__total span{ font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--navy) }
.sticker__total strong{ font-size:1.75rem; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  white-space:nowrap }   /* never let the € break away from the figure */
/* Every price on this site is an estimate, and the page has to say so
   right next to the number — not in a footnote nobody reads. */
.sticker__est{ margin:.875rem 0 0; font-size:.6875rem; letter-spacing:.02em; color:var(--navy);
  background:rgba(59,111,232,.09); border-radius:2px; padding:.5rem .625rem; text-align:center }
.sticker__cta{ width:100%; justify-content:center; margin-top:.625rem }
.sticker__foot{ margin-top:var(--s3); display:flex; align-items:flex-end;
  justify-content:space-between; gap:var(--s3) }
.sticker__note{ font-size:.5625rem; line-height:1.5; letter-spacing:.04em;
  text-transform:uppercase; color:var(--steel); max-width:28ch }
/* QR — replaces the decorative barcode. Encodes a real URL, so it works
   on screen (continue on your phone) and on paper (the sticker prints as
   an actual windscreen card for shows). */
.qr{ flex:none; text-align:center }
.qr img{ width:76px; height:76px; display:block }
.qr__id{ display:block; font-size:.5rem; letter-spacing:.18em; color:var(--steel);
  margin-top:.3125rem; text-transform:uppercase }

/* ---------- 9. Stat bar ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:var(--hair);
  border-bottom:var(--hair) }
.stat{ padding:var(--s4) var(--s3) var(--s4) var(--s4); border-left:var(--hair) }
.stat:first-child{ border-left:0; padding-left:0 }
.stat__n{ font-family:var(--mono); font-size:clamp(1.6rem,3.2vw,2.3rem); color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; display:block; line-height:1 }
.stat__l{ font-family:var(--mono); font-size:.625rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--steel); margin-top:.625rem; display:block }
.section--dark .stat{ border-color:rgba(255,255,255,.13) }
.section--dark .stat__n{ color:#fff }
.section--dark .stats{ border-color:rgba(255,255,255,.13) }

/* ---------- 10. Car cards ---------- */
.grid-cars{ display:grid; gap:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr)) }

/* "see everything" tile — closes the grid so no unit is ever orphaned */
.more-tile{ background:var(--ink); color:#fff; border-radius:var(--r); padding:var(--s4);
  display:flex; flex-direction:column; justify-content:space-between; min-height:220px;
  transition:background .22s var(--ease) }
.more-tile:hover{ background:var(--navy) }
.more-tile__n{ font-family:var(--mono); font-size:3rem; line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums }
.more-tile__l{ font-family:var(--mono); font-size:.625rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel); margin-top:.625rem; display:block }
.more-tile__go{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; border-top:var(--hair-dark); padding-top:var(--s3); margin-top:var(--s4) }
.car{
  background:var(--white); border:var(--hair); border-radius:var(--r);
  display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.car:hover{ border-color:var(--blue); transform:translateY(-3px);
  box-shadow:0 18px 40px -24px rgba(11,46,143,.5) }
.car__media{ position:relative; aspect-ratio:4/3; background:var(--mist); overflow:hidden }
.car__media img{ width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease) }
.car:hover .car__media img{ transform:scale(1.035) }
.car__flag{
  /* z-index matters: the image gets transform:scale on hover, which creates a
     stacking context and would otherwise paint straight over this badge — and
     keep covering it for the whole 0.5s transition back. */
  position:absolute; z-index:2; top:var(--s2); left:var(--s2); background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.3125rem .5rem; border-radius:2px;
}
.car__flag--blue{ background:var(--grad) }

/* A car on order has no photograph yet — that is normal, so it gets a
   designed plate rather than a broken frame or a grey box. */
.car__media--pending{ display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.625rem; text-align:center; padding:var(--s4);
  background:linear-gradient(140deg,#10141D 0%,#0A0C10 62%,#152046 100%) }
.car__media--pending span{ font-family:var(--mono); font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel) }
.car__media--pending b{ font-family:var(--display); font-size:.9375rem; color:#fff;
  line-height:1.5; font-weight:400 }
.car__body{ padding:var(--s3); display:flex; flex-direction:column; gap:.625rem; flex:1 }
.car__yr{ font-family:var(--mono); font-size:.625rem; letter-spacing:.17em; color:var(--steel);
  text-transform:uppercase }
.car__name{ font-size:1.0625rem; font-variation-settings:"wdth" 108; font-weight:700;
  line-height:1.25 }
.car__specs{ display:flex; flex-wrap:wrap; gap:.25rem .875rem; font-family:var(--mono);
  font-size:.6875rem; letter-spacing:.07em; text-transform:uppercase; color:var(--steel);
  margin-top:auto; padding-top:var(--s2) }
.car__price{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2);
  border-top:var(--hair); padding-top:var(--s2) }
.car__price b{ font-family:var(--mono); font-size:1.1875rem; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.car__price span{ font-family:var(--mono); font-size:.5625rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--steel) }

/* ---------- 11. Ad units ------------------------------------
   Naming is deliberately neutral (.slot / .slot-unit / /go/) —
   "ad", "banner", "sponsor" and "promo" are all killed by the
   default uBlock/AdGuard lists. Heights are reserved so a
   creative can never shift layout (CLS).
   ------------------------------------------------------------ */
/* The disclosure label sits above the frame, not on top of the creative —
   legible on any artwork, and it never eats a corner of what the client paid for. */
.slot{ position:relative; padding-top:1.0625rem }
.slot::before{
  content:attr(data-label); position:absolute; top:0; left:0;
  font-family:var(--mono); font-size:.5rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--steel);
}
.slot__in{ display:flex; align-items:center; justify-content:center; overflow:hidden;
  border:var(--hair); border-radius:var(--r); background:var(--white) }
.slot--leader .slot__in{ min-height:90px }
.slot--strip .slot__in{ min-height:200px }
.slot--rail .slot__in{ min-height:600px }
.slot--mid .slot__in{ min-height:90px }
.slot--news{ max-width:600px }
.slot--news .slot__in{ min-height:150px }
.slot--onDark::before{ color:var(--steel) }
.slot--onDark .slot__in{ background:var(--ink-2); border-color:rgba(255,255,255,.14) }

/* ---- Advertiser creatives ----------------------------------------
   One structural system; each advertiser injects its own brand colour
   through --brand / --brand-ink. Typographic only — the site carries
   no stock photography, so neither do the ads sitting inside it.
   ------------------------------------------------------------------- */
.cr-jur  { --brand:#A88430; --brand-ink:#305460 }   /* Aviajur  — gold on slate  */
.cr-tax  { --brand:#249CA8; --brand-ink:#305460 }   /* Aviatax  — teal on slate  */
.cr-swarm{ --brand:#3B6FE8; --brand-ink:#0A0C10 }   /* The Swarm — blue on ink   */

.cre{
  position:relative; width:100%; height:100%; display:flex; align-items:center;
  gap:var(--s4); padding:var(--s3) var(--s4) var(--s3) calc(var(--s4) + 6px);
  text-decoration:none; overflow:hidden;
}
.cre::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:var(--brand) }                          /* the accent spine */
.cre__logo{ height:26px; width:auto; flex:none; position:relative; z-index:1 }
.cre__msg{ font-size:1rem; font-weight:600; line-height:1.3;
  font-variation-settings:"wdth" 106; position:relative; z-index:1 }
.cre__msg small{ display:block; font-family:var(--mono); font-size:.5625rem;
  letter-spacing:.16em; text-transform:uppercase; font-weight:400; margin-top:.375rem;
  opacity:.72 }
.cre__cta{
  margin-left:auto; flex:none; position:relative; z-index:1;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.5625rem .875rem; border-radius:2px; border:1px solid var(--brand);
  color:var(--brand); white-space:nowrap; transition:background .2s var(--ease), color .2s var(--ease);
}
.cre:hover .cre__cta{ background:var(--brand); color:#fff }

.cre--light{ background:var(--white); color:var(--ink) }
.cre--dark{ background:linear-gradient(112deg, var(--brand-ink) 0%, #0A0C10 76%); color:#fff }
.cre--dark .cre__logo{ filter:brightness(0) invert(1) }   /* knockout the colour lockup */
.cre--dark .cre__logo--asis{ filter:none }                /* logos already supplied white */
.cre--dark .cre__cta{ border-color:rgba(255,255,255,.42); color:#fff }
.cre--dark:hover .cre__cta{ background:var(--brand); border-color:var(--brand); color:#fff }

/* tall and large units stack instead of running in a row */
.cre--stack{ flex-direction:column; align-items:flex-start; justify-content:space-between;
  padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 6px) }
.cre--stack .cre__cta{ margin-left:0 }
.cre--stack .cre__logo{ height:30px }
.cre--stack .cre__msg{ font-size:1.25rem; line-height:1.25 }

/* a headline figure, set like every other number on the site */
.cre__fig{ font-family:var(--mono); font-size:2.25rem; line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--brand); display:block; margin-bottom:.5rem }

/* The Swarm — dot field echoing the pixel dissolve in their logotype */
.cr-swarm.cre--dark{
  background:
    radial-gradient(circle at 86% 50%, rgba(59,111,232,.30), transparent 56%),
    linear-gradient(112deg,#0A0C10 0%,#131826 72%);
}
.cr-swarm.cre--dark::after{
  content:""; position:absolute; right:-4%; top:-25%; width:48%; height:150%;
  background-image:radial-gradient(rgba(255,255,255,.38) 1px, transparent 1.3px);
  background-size:12px 12px; pointer-events:none;
  -webkit-mask-image:linear-gradient(100deg,transparent 4%,#000 52%,transparent 96%);
          mask-image:linear-gradient(100deg,transparent 4%,#000 52%,transparent 96%);
}

/* Native in-feed unit — matches the car card so it reads as content, not clutter */
.native{ background:var(--white); border:var(--hair); border-radius:var(--r);
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  transition:border-color .22s var(--ease) }
.native:hover{ border-color:var(--blue) }
.native__media{ aspect-ratio:4/3; position:relative; display:flex;
  align-items:center; justify-content:center; color:#fff; font-family:var(--display);
  font-size:1.125rem; letter-spacing:.04em; text-align:center; padding:var(--s3);
  background:linear-gradient(120deg, var(--brand-ink, #0B2E8F) 0%, #0A0C10 82%) }
.native__media::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:var(--brand, var(--blue)) }
.native__media img{ height:30px; width:auto; filter:brightness(0) invert(1) }
.native__media img.asis{ filter:none }
.native__body{ padding:var(--s3); display:flex; flex-direction:column; gap:.625rem; flex:1 }
.native__tag{ font-family:var(--mono); font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel) }
.native__title{ font-size:1.0625rem; font-weight:700; font-variation-settings:"wdth" 108;
  line-height:1.25; color:var(--ink) }
.native__txt{ font-size:.875rem; color:var(--slate) }
.native__cta{ margin-top:auto; padding-top:var(--s2); border-top:var(--hair);
  font-family:var(--mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand, var(--navy)) }

/* Partner spotlight — the premium full-width unit */
.spotlight{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:var(--s5); align-items:center; background:var(--ink-2); border-radius:var(--r);
  border:1px solid rgba(255,255,255,.12); padding:var(--s5); position:relative;
  overflow:hidden }
.spotlight::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:var(--brand, var(--blue)) }
.spotlight__logo{ font-family:var(--display); font-size:1.5rem; color:#fff; line-height:1.3 }
.spotlight__logo img{ height:38px; width:auto; filter:brightness(0) invert(1) }
.spotlight__logo img.asis{ filter:none }
.spotlight .btn--onDark:hover{ background:var(--brand, #fff); border-color:var(--brand, #fff); color:#fff }
.spotlight__kicker{ font-family:var(--mono); font-size:.5625rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--steel); margin-bottom:var(--s3) }
.spotlight p{ color:#C9CFDA }

/* ---------- 12. Route rail (import process) ---------- */
.route{ display:grid; grid-template-columns:repeat(5,1fr); border-top:2px solid var(--mist-2);
  counter-reset:stage }
.route__leg{ position:relative; padding:var(--s4) var(--s3) 0 0 }
.route__leg::before{
  content:""; position:absolute; top:-6px; left:0; width:10px; height:10px;
  background:var(--white); border:2px solid var(--blue); border-radius:50%;
}
.route__leg:last-child::before{ background:var(--blue); border-color:var(--electric) }
.section--dark .route__leg::before{ background:var(--ink); border-color:var(--electric) }
.section--dark .route__leg:last-child::before{ background:var(--electric) }
.route__no{ font-family:var(--mono); font-size:.625rem; letter-spacing:.18em; color:var(--blue);
  display:block; margin-bottom:.5rem }
.route__t{ font-size:1.0625rem; font-weight:700; font-variation-settings:"wdth" 112;
  color:var(--ink); margin-bottom:.375rem }
.route__d{ font-size:.875rem; color:var(--slate); margin-bottom:.75rem }
.route__time{ font-family:var(--mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel); border-top:var(--hair); padding-top:.625rem;
  display:block }

/* ---------- 13. Service index ---------- */
.services{ border-top:var(--hair) }
.svc{ display:grid; grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.35fr) auto;
  gap:var(--s4); align-items:baseline; padding:var(--s4) 0; border-bottom:var(--hair);
  transition:background .2s var(--ease), padding-inline .2s var(--ease) }
.svc:hover{ background:var(--white); padding-inline:var(--s3) }
.svc__no{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; color:var(--blue) }
.svc__t{ font-size:1.1875rem; font-weight:700; font-variation-settings:"wdth" 110; color:var(--ink) }
.svc__d{ font-size:.9375rem; color:var(--slate) }
.svc__go{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy); white-space:nowrap }

/* ---------- 14. Magazine cards ---------- */
.grid-3{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.post{ background:var(--white); border:var(--hair); border-radius:var(--r); padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s2);
  transition:border-color .2s var(--ease), transform .2s var(--ease) }
.post:hover{ border-color:var(--blue); transform:translateY(-3px) }
.post__meta{ font-family:var(--mono); font-size:.625rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); display:flex; gap:var(--s2); flex-wrap:wrap }
.post__t{ font-size:1.1875rem; font-weight:700; font-variation-settings:"wdth" 108;
  line-height:1.28; color:var(--ink) }
.post__x{ font-size:.9375rem; color:var(--slate) }

/* ---------- 15. Forms ---------- */
.field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:var(--s3) }
.field label{ font-family:var(--mono); font-size:.625rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel) }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--white);
  border:var(--hair); border-radius:var(--r); padding:.875rem 1rem; width:100%;
  min-height:3rem;                       /* 48px — comfortable, and a real touch target */
  transition:border-color .18s, box-shadow .18s;
}
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--steel) }
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:0 0 0 3px rgba(59,111,232,.14) }
.field textarea{ min-height:0; line-height:1.55; resize:vertical }

/* The native select is cramped and its arrow is tiny. Draw our own. */
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2.75rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239AA3B2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:12px 8px;
}
.field select:hover{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230B2E8F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E");
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--blue); outline:none }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) }

/* ---------- 16. Table (rate card) ---------- */
.rates{ width:100%; border-collapse:collapse; background:var(--white);
  border:var(--hair); border-radius:var(--r); overflow:hidden }
.rates th,.rates td{ padding:.9375rem var(--s3); text-align:left; border-bottom:var(--hair);
  font-size:.9375rem }
.rates thead th{ background:var(--ink); color:#fff; font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:500 }
.rates tbody th{ font-weight:600; color:var(--ink) }
.rates td{ text-align:center; color:var(--slate) }
.rates .yes{ color:var(--navy); font-weight:700 }
.rates .no{ color:var(--mist-2) }
.rates tr:last-child td,.rates tr:last-child th{ border-bottom:0 }
.rates .price{ font-family:var(--mono); font-size:1.375rem; color:var(--ink);
  font-variant-numeric:tabular-nums }
.rates col.feature{ width:34% }
.rates .col-hi{ background:rgba(59,111,232,.06) }

/* ---------- 17. Footer ---------- */
.site-footer{ background:var(--ink); color:var(--steel); padding-block:var(--s7) var(--s5) }
.site-footer h4{ font-family:var(--mono); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--electric); margin-bottom:var(--s3); font-weight:500 }
.foot-grid{ display:grid; gap:var(--s5); grid-template-columns:1.6fr 1fr 1fr 1.4fr;
  padding-bottom:var(--s5); border-bottom:var(--hair-dark) }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.625rem }
.foot-grid a:hover{ color:#fff }
.foot-word{ font-family:var(--display); font-size:clamp(1.15rem,3.2vw,2.4rem); color:#fff;
  line-height:1.1; margin:var(--s5) 0 var(--s4); letter-spacing:.01em;
  overflow-wrap:break-word }
.foot-base{ display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase }

/* ---------- 18. Utility ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s6);
  align-items:center }
.split--lead{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) }
.split--top{ align-items:start }
.split--end{ align-items:end }
@media (max-width:900px){ .split,.split--lead{ grid-template-columns:1fr } }

.menu-btn{ display:none }
@media (max-width:820px){ .menu-btn{ display:inline-flex } }
.stack-4>*+*{ margin-top:var(--s4) }
.stack-3>*+*{ margin-top:var(--s3) }
.sticky-rail{ position:sticky; top:calc(var(--s6) + 1rem) }
.pill{ display:inline-flex; align-items:center; gap:.4375rem; font-family:var(--mono);
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
  background:rgba(59,111,232,.09); padding:.375rem .625rem; border-radius:2px }
.hr{ border:0; border-top:var(--hair); margin:var(--s5) 0 }

/* ---------- 19. Responsive ---------- */
@media (max-width:1080px){
  .hero__in,.hero__in--wide{ grid-template-columns:1fr }
  .route{ grid-template-columns:repeat(2,1fr) }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .spotlight{ grid-template-columns:1fr }
  .svc{ grid-template-columns:3rem 1fr auto; }
  .svc__d{ display:none }
}
@media (max-width:820px){
  .nav{ display:none }
  .stats{ grid-template-columns:repeat(2,1fr) }
  .stat:nth-child(3){ border-left:0; padding-left:0 }
  .stat{ border-top:var(--hair) }
  .stat:nth-child(-n+2){ border-top:0 }
  .section{ padding-block:var(--s6) }
}
@media (max-width:560px){
  /* Michroma is a wide face — it must be stepped down hard or it forces
     the whole document wider than the viewport */
  :root{ --t-5:2.05rem; --t-4:1.7rem; --t-3:1.5rem }
  .display{ overflow-wrap:break-word }
  .route{ grid-template-columns:1fr }
  .foot-grid{ grid-template-columns:1fr }
  .field--row{ grid-template-columns:1fr }
  .hero__actions .btn{ width:100%; justify-content:center }
  .util__in span:nth-child(2){ display:none }
  .header-cta{ flex:0 1 auto; min-width:0 }
  .header-cta .btn--primary{ display:none }
  .brand img{ height:24px }
  .creative{ flex-wrap:wrap; gap:var(--s2); padding:var(--s3) }
  .creative__cta{ margin-left:0 }
  .slot--rail .slot__in{ min-height:420px }
  .grid-cars{ grid-template-columns:1fr }
  .stat__n{ font-size:1.75rem }
}

/* Wide content must scroll inside its own box, never the page */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.table-scroll .rates{ min-width:640px }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .car:hover,.post:hover,.btn:hover{ transform:none }
}

/* ---------- 20. Calculator ---------- */
.calc-fields{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-top:var(--s3) }
.calc-fields .field{ margin:0 }
.calc-fields input,.calc-fields select{ font-family:var(--mono); font-size:.9375rem }
.calc-flag{ font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
  border:1px solid var(--mist-2); border-radius:2px; padding:.0625rem .25rem; margin-left:.375rem }
@media (max-width:480px){ .calc-fields{ grid-template-columns:1fr } }
.co2-note{ margin:.75rem 0 0; font-size:.6875rem; line-height:1.55; border-radius:2px;
  padding:.5625rem .6875rem }
.co2-note--ok{ background:rgba(59,111,232,.08); color:var(--navy) }
.co2-note--warn{ background:#FBF3E4; color:#6A4B12; border-left:3px solid #A88430 }

/* ---------- 21. Interior page furniture ---------- */
.page-head{ position:relative; background:var(--ink); color:#fff; overflow:hidden }
.page-head__bg{ position:absolute; inset:0 }
.page-head__bg img{ width:100%; height:100%; object-fit:cover; opacity:.42 }
.page-head__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,12,16,.96) 0%, rgba(10,12,16,.8) 48%,
             rgba(11,46,143,.4) 82%, rgba(10,12,16,.7) 100%) }
.page-head__in{ position:relative; padding-block:clamp(2.75rem,6vw,4.5rem) }
.page-head h1{ color:#fff; margin-bottom:var(--s3) }
.page-head p{ color:#C9CFDA; max-width:56ch; font-size:var(--t-1) }

/* filter bar */
.filters{ display:flex; gap:var(--s3); flex-wrap:wrap; align-items:flex-end;
  padding:var(--s4) 0; border-bottom:var(--hair) }
.filters .field{ margin:0; min-width:9.5rem; flex:1 1 9.5rem }
.filters select,.filters input{ font-family:var(--mono); font-size:.875rem }
.filters__count{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel); margin-left:auto; padding-bottom:.875rem }

/* numbered process — only where order is real information */
.steps{ counter-reset:step; border-top:2px solid var(--ink) }
.step{ display:grid; grid-template-columns:4.5rem minmax(0,1fr); gap:var(--s4);
  padding:var(--s4) 0; border-bottom:var(--hair) }
.step__n{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em; color:var(--blue) }
.step h3{ font-size:1.1875rem; font-variation-settings:"wdth" 110; margin-bottom:.5rem }
.step__t{ font-family:var(--mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel); margin-top:.625rem; display:block }

/* prose for article and service bodies */
.prose{ max-width:68ch }
.prose h2{ font-size:var(--t-2); font-variation-settings:"wdth" 112;
  margin:var(--s6) 0 var(--s3) }
.prose h3{ font-size:1.1875rem; margin:var(--s5) 0 var(--s2) }
.prose ul{ padding-left:1.125rem; margin:0 0 var(--s3) }
.prose li{ margin-bottom:.5rem }
.prose blockquote{ margin:var(--s4) 0; padding:var(--s3) var(--s4); background:var(--white);
  border-left:3px solid var(--blue); font-size:.9375rem }

/* faq */
.faq{ border-top:var(--hair) }
.faq details{ border-bottom:var(--hair); padding:var(--s3) 0 }
.faq summary{ cursor:pointer; font-weight:700; font-size:1.0625rem; color:var(--ink);
  font-variation-settings:"wdth" 106; list-style:none; display:flex;
  justify-content:space-between; gap:var(--s3); align-items:baseline }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--blue); flex:none }
.faq details[open] summary::after{ content:"–" }
.faq p{ margin:var(--s2) 0 0; max-width:64ch; font-size:.9375rem }

/* team */
.person{ background:var(--white); border:var(--hair); border-radius:var(--r); overflow:hidden }
.person__ph{ aspect-ratio:1/1; background:linear-gradient(150deg,#10141D,#0A0C10 60%,#152046);
  display:flex; align-items:flex-end; padding:var(--s3) }
.person__ph span{ font-family:var(--mono); font-size:.5625rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel) }
.person__b{ padding:var(--s3) }
.person__b h3{ font-size:1.0625rem; margin-bottom:.25rem }
.person__b p{ font-size:.875rem; color:var(--slate) }
.person__r{ font-family:var(--mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); display:block; margin-bottom:.5rem }

/* two-column article + rail */
.with-rail{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--s6);
  align-items:start }
@media (max-width:980px){ .with-rail{ grid-template-columns:1fr } }

/* ---------- 22. Magazine ---------- */
.post--img{ padding:0; overflow:hidden }
.post__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--mist) }
.post__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease) }
.post--img:hover .post__media img{ transform:scale(1.035) }
.post__body{ padding:var(--s4) }
.feature{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--s5);
  background:var(--white); border:var(--hair); border-radius:var(--r); overflow:hidden;
  align-items:center; transition:border-color .22s var(--ease) }
.feature:hover{ border-color:var(--blue) }
.feature__media{ aspect-ratio:4/3; overflow:hidden; background:var(--mist) }
.feature__media img{ width:100%; height:100%; object-fit:cover }
.feature__body{ padding:var(--s5) var(--s5) var(--s5) 0 }
@media (max-width:900px){
  .feature{ grid-template-columns:1fr }
  .feature__body{ padding:var(--s4) }
}

/* ---------- 23. Shared blocks that were page-local ----------
   These started life inside individual pages' <style> tags; generated pages
   need them too, so they live here now. */
.note{ background:var(--white); border-left:3px solid var(--blue); padding:var(--s3) var(--s4);
  font-size:.9375rem; margin:var(--s4) 0 }
.demo{ background:var(--white); border:var(--hair); border-radius:var(--r); padding:var(--s4) }

.unit__bar{ display:flex; gap:var(--s4); align-items:baseline; flex-wrap:wrap; margin-bottom:var(--s3) }
.unit__name{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink) }
.unit__size{ font-family:var(--mono); font-size:.625rem; letter-spacing:.12em; color:var(--steel) }
.unit__where{ font-family:var(--mono); font-size:.625rem; letter-spacing:.12em;
  color:var(--steel); margin-left:auto }

.chart{ display:flex; align-items:flex-end; gap:6px; height:96px }
.chart span{ flex:1; background:var(--grad); border-radius:2px 2px 0 0; min-height:4px }
.chart-x{ display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:.5625rem; letter-spacing:.14em; color:var(--steel); margin-top:.5rem }
.dash{ background:var(--white); border:var(--hair); border-radius:var(--r); padding:var(--s4) }
.dash__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3);
  border-bottom:var(--hair); padding-bottom:var(--s4); margin-bottom:var(--s4) }
.dash__n{ font-family:var(--mono); font-size:1.5rem; color:var(--ink); display:block;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.dash__l{ font-family:var(--mono); font-size:.5625rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); margin-top:.375rem; display:block }
@media (max-width:900px){ .dash__grid{ grid-template-columns:repeat(2,1fr) } }

/* Partner logotypes sitting side by side. Matching their HEIGHT is wrong —
   Aviajur and Aviatax are 6.8:1 and The Swarm is 4.5:1, so equal height makes
   the two wide ones overbearing and the Swarm look undersized. Capping width
   and height together balances them optically. */
.plogo{ height:auto; width:auto; max-width:132px; max-height:30px; margin-bottom:var(--s3) }
.plogo--knock{ filter:brightness(0) invert(1) }

/* Section sub-navigation. The car pages are siblings — order book, new models,
   past imports, compare — and were only reachable from the footer. */
.subnav{ border-bottom:var(--hair); background:var(--white) }
.subnav__in{ display:flex; gap:var(--s4); flex-wrap:wrap; align-items:center;
  overflow-x:auto; padding-block:.875rem }
.subnav a{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--slate); white-space:nowrap; padding-block:.25rem;
  border-bottom:2px solid transparent; transition:color .18s, border-color .18s }
.subnav a:hover{ color:var(--navy) }
.subnav a[aria-current]{ color:var(--navy); border-color:var(--blue) }
.subnav__cta{ margin-left:auto }

/* Team photographs. The plate stays as the fallback: if the image is missing
   the card still looks finished rather than broken. */
.person__ph--img{ position:relative; padding:0 }
.person__ph--img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.person__ph--img span{ position:relative; z-index:1; opacity:0 }
.person__ph--img.is-empty{ padding:var(--s3) }
.person__ph--img.is-empty span{ opacity:1 }


/* A QR code on a phone is pointless — you are already holding the device it
   would send you to. Hide it there and let the footnote use the full width. */
@media (max-width:820px){
  .qr{ display:none }
  .sticker__note{ max-width:none }
}

/* Currency figures never break across lines. */
.car__price b,.rates td,.rates .price,.stat__n,.dash__n,.cre__fig{ white-space:nowrap }

/* ---------- 24. Fly-in menu ----------------------------------------
   The 7-item bar cannot hold 47 pages, and the old "Menu" button did
   nothing at all on mobile. This is the real navigation: available at
   every width, so Events, the tools and the guides stop hiding. */
.menu-btn{ display:inline-flex }          /* now shown at all widths */

.nav-panel{ position:fixed; inset:0; z-index:200; visibility:hidden; pointer-events:none }
.nav-panel[data-open]{ visibility:visible; pointer-events:auto }
.nav-panel__scrim{
  position:absolute; inset:0; background:rgba(10,12,16,.55); opacity:0;
  backdrop-filter:blur(2px); transition:opacity .32s var(--ease);
}
.nav-panel[data-open] .nav-panel__scrim{ opacity:1 }

.nav-panel__sheet{
  position:absolute; top:0; right:0; height:100%; width:min(560px,100%);
  background:var(--ink); color:var(--mist); overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%); transition:transform .38s var(--ease);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.7); display:flex; flex-direction:column;
}
.nav-panel[data-open] .nav-panel__sheet{ transform:none }

.nav-panel__top{ display:flex; align-items:center; justify-content:space-between;
  padding:var(--s3) var(--s5); border-bottom:var(--hair-dark); flex:none }
.nav-panel__top img{ height:26px; width:auto }
.nav-close{
  background:transparent; border:1px solid rgba(255,255,255,.24); color:#fff; cursor:pointer;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.5625rem .875rem; border-radius:var(--r); transition:background .2s, border-color .2s;
}
.nav-close:hover{ background:#fff; color:var(--ink); border-color:#fff }

.nav-panel__body{ padding:var(--s5); display:grid; gap:var(--s5);
  grid-template-columns:repeat(2,minmax(0,1fr)); flex:1 }
.nav-group h3{
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--electric); margin-bottom:var(--s3); font-weight:500;
}
.nav-group a{
  display:block; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.07);
  transition:padding-left .18s var(--ease), color .18s;
}
.nav-group a:hover{ padding-left:.375rem }
.nav-group b{ display:block; color:#fff; font-size:.9375rem; font-weight:600;
  font-variation-settings:"wdth" 106 }
.nav-group a:hover b{ color:var(--electric) }
.nav-group span{ display:block; font-size:.75rem; color:var(--steel); line-height:1.45;
  margin-top:.0625rem }

.nav-panel__foot{ padding:var(--s4) var(--s5) var(--s5); border-top:var(--hair-dark); flex:none }
.nav-panel__foot .btn{ width:100%; justify-content:center; margin-bottom:var(--s3) }
.nav-panel__meta{ font-family:var(--mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel); line-height:2 }
.nav-panel__meta a{ color:var(--electric) }

@media (max-width:560px){
  .nav-panel__body{ grid-template-columns:1fr; gap:var(--s4); padding:var(--s4) }
  .nav-panel__top,.nav-panel__foot{ padding-inline:var(--s4) }
}
@media (prefers-reduced-motion:reduce){
  .nav-panel__sheet{ transition:none }
  .nav-panel__scrim{ transition:none }
}
body.nav-open{ overflow:hidden }

/* Six-item guide grids read better as 3 + 3 than 4 + 2. */
.grid-3--wide{ display:grid; gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr)) }

/* Byline. Who wrote advice that costs money is a ranking signal and, more to
   the point, the thing a cautious buyer looks for. */
.byline{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em; color:var(--steel);
  margin:0 0 var(--s4); line-height:1.8 }
.byline a{ color:var(--navy); border-bottom:1px solid var(--mist-2) }
.byline a:hover{ border-color:var(--navy) }
.person__link{ display:inline-block; margin-top:var(--s2); font-family:var(--mono);
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--navy) }
.person__link:hover{ text-decoration:underline }


/* ---- 25. Forms that send ------------------------------------------------ */

/* Honeypot. Hidden from people and from screen readers, visible to the kind of
   bot that fills in every field it can find. Not display:none — some bots skip
   those — but off-canvas and untabbable. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-done{background:var(--white);border:var(--hair);border-left:3px solid var(--navy);
  border-radius:var(--r);padding:var(--s5)}
.form-done b{font-family:var(--sans);font-size:1.0625rem;color:var(--ink)}

button[type="submit"][disabled]{opacity:.55;cursor:progress}

.form-error{margin-top:var(--s3);font-size:.875rem;color:#8a1c1c;
  background:#fdf3f3;border-left:3px solid #8a1c1c;padding:.75rem 1rem;border-radius:3px}
.form-error a{color:#8a1c1c;text-decoration:underline}


/* A mock report has to announce itself. An advertiser glancing at this page
   must never take these numbers for their own. */
.preview-note{background:#fff8e6;border-bottom:1px solid #e8d9a8;padding:.75rem 0;
  font-size:.875rem;color:#5a4a1a}
.preview-note b{font-family:var(--sans)}
.preview-note a{color:#5a4a1a;text-decoration:underline}


/* ---- 26. Consent ---------------------------------------------------------
   Bottom sheet rather than a full-screen interruption: the visitor can read
   the page while deciding, and "Only necessary" is as easy to hit as "Accept
   all" — a banner that hides the refusal is not a choice. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--white);
  border-top:1px solid var(--mist-2);box-shadow:0 -8px 40px rgba(10,26,47,.13);
  transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.consent[data-in]{transform:none}
.consent__in{max-width:var(--wrap);margin:0 auto;padding:var(--s4) var(--gut);
  display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:center}
.consent__text b{display:block;font-family:var(--sans);font-size:1rem;margin-bottom:.25rem}
.consent__text p{font-size:.875rem;line-height:1.6;max-width:70ch;margin:0}
.consent__text a{color:var(--navy);text-decoration:underline}
.consent__btns{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.consent__opts[hidden]{display:none}
.consent__opts{grid-column:1/-1;display:grid;gap:var(--s3);
  border-top:var(--hair);padding-top:var(--s4)}
.consent__opts label{display:flex;gap:.75rem;align-items:flex-start;font-size:.875rem;line-height:1.5}
.consent__opts input{margin-top:.2rem;accent-color:var(--navy);width:1rem;height:1rem;flex:none}
.consent__opts b{display:block;font-family:var(--sans);font-size:.9375rem}
@media (max-width:767px){
  .consent__in{grid-template-columns:1fr;gap:var(--s3)}
  .consent__btns{justify-content:stretch}
  .consent__btns .btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.consent{transition:none}}

/* Credits table: reads as a list of people, so left-aligned rather than the
   centred numeric layout the rate cards use. */
.rates--left td{text-align:left}
.rates--left tbody th{font-weight:500}
.rates--left td:first-child{width:104px;padding-right:0}
.rates--left a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}

.credit-thumb{width:88px;height:56px;object-fit:cover;border-radius:3px;
  border:var(--hair);display:block}