/* ============ HOME — marketplace ============ */

/* brand chip row under the hero search (the only survivor of the deleted
   ignition-hero block, renamed to .fchips) */
.fchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}

/* ---------- section scaffolding ---------- */
.hsec{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,8vw,104px) clamp(20px,4vw,56px) 0}
.hsec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.hsec__head .eyebrow{margin-bottom:14px}

/* horizontal card row */
.hrow{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,23vw,340px);gap:16px;
  overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity;scrollbar-width:none;
  mask-image:linear-gradient(90deg,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 96%,transparent)}
.hrow::-webkit-scrollbar{display:none}
.hrow .card{scroll-snap-align:start}

/* rail arrows — click to scroll a horizontal car row sideways (mouse users have
   no native way; trackpad + touch swipe still work). Built by motion.js:
   .railx wraps the row; arrows reveal on hover and self-hide at each edge. */
.railx{position:relative}
.railx__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(12,12,12,.68);border:1px solid rgba(255,255,255,.18);
  cursor:pointer;opacity:0;box-shadow:0 8px 26px rgba(0,0,0,.5);
  transition:opacity .3s var(--ease),background .25s var(--ease),transform .25s var(--ease),border-color .25s}
.railx:hover .railx__nav{opacity:.94}
.railx__nav:hover{background:rgba(20,20,20,.92);border-color:rgba(255,255,255,.4);transform:translateY(-50%) scale(1.06)}
.railx__nav:active{transform:translateY(-50%) scale(.95)}
.railx__nav.is-off{opacity:0 !important;pointer-events:none}
.railx__nav--prev{left:6px}
.railx__nav--next{right:6px}
@media (hover:none){.railx__nav{display:none}}   /* touch swipes — no arrows */

/* browse-by — compact: one pill row of brands + a slim type row (replaced the
   two tall auto-fill tile grids that ate ~2 screens of height) */
.brz__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.brz__all{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);transition:color .3s}
.brz__all:hover{color:var(--text)}
.brz__brands{display:flex;flex-wrap:wrap;gap:8px}
.brzchip{display:inline-flex;align-items:center;gap:.6em;border:1px solid var(--line);border-radius:100px;
  padding:.62em 1.05em;color:var(--text);font-size:.9rem;letter-spacing:-.005em;
  transition:border-color .3s,background .3s,transform .35s var(--ease-out)}
.brzchip:hover{border-color:var(--line-2);background:rgba(255,255,255,.03);transform:translateY(-2px)}
.brzchip__n{font-family:var(--mono);font-size:.68rem;color:var(--text-3);font-variant-numeric:tabular-nums}
.brzchip--all{border-style:dashed;color:var(--text-2)}
.brzchip--all:hover{color:var(--text)}
.brz__bodies{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.brzbody{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-3);border:1px solid transparent;border-radius:100px;padding:.5em .85em;
  transition:color .3s,border-color .3s,background .3s}
.brzbody:hover{color:var(--text);border-color:var(--line);background:rgba(255,255,255,.02)}
.brzbody__n{font-size:.64rem;color:var(--text-3);opacity:.7}

/* legends strip */
.lgstrip-wrap{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-top:clamp(56px,8vw,104px);padding:clamp(48px,6vw,84px) 0}
.lgstrip-head{max-width:var(--maxw);margin:0 auto 26px;padding:0 clamp(20px,4vw,56px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.lgstrip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,30vw,420px);gap:14px;
  overflow-x:auto;padding:0 clamp(20px,4vw,56px) 8px;scroll-snap-type:x proximity;scrollbar-width:none}
.lgstrip::-webkit-scrollbar{display:none}
.lgcard{position:relative;aspect-ratio:16/11;border-radius:16px;overflow:hidden;background:var(--bg-3);scroll-snap-align:start;display:block}
.lgcard img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out);opacity:0}
.lgcard img.ld{opacity:1}
.lgcard:hover img{transform:scale(1.05)}
.lgcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,8,.88),rgba(8,8,8,.12) 55%)}
.lgcard__meta{position:absolute;left:20px;right:20px;bottom:17px;z-index:2}
.lgcard__tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.lgcard__name{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;margin-top:5px;line-height:1.2}

/* stats */
.stats{display:flex;gap:clamp(24px,5vw,72px);flex-wrap:wrap;padding-top:44px;border-top:1px solid var(--line)}
.stats__live{margin-top:18px;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--text-3);text-transform:uppercase}
.stats__live b{color:var(--text-2)}

/* services teaser */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svccard{position:relative;border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3vw,36px);
  display:flex;flex-direction:column;gap:12px;overflow:hidden;transition:border-color .3s,background .3s,transform .35s var(--ease-out)}
.svccard:hover{border-color:var(--line-2);background:rgba(255,255,255,.02);transform:translateY(-4px)}
.svccard__idx{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--accent)}
.svccard__t{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:600;letter-spacing:-.015em}
.svccard__b{color:var(--text-2);font-size:.98rem;max-width:44ch}
.svccard__go{margin-top:auto;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--text-2);display:flex;align-items:center;gap:8px;transition:color .3s,gap .3s}
.svccard:hover .svccard__go{color:var(--text);gap:13px}

/* showroom / trust */
.show{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.show__media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line)}
.show__media img{width:100%;height:100%;object-fit:cover}
.show__badge{position:absolute;right:16px;bottom:16px;background:rgba(10,10,10,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line-2);border-radius:14px;padding:14px 18px;display:flex;flex-direction:column;line-height:1}
.show__badge-num{font-size:2rem;font-weight:700}
.show__badge-txt{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin-top:6px}
.show__list{list-style:none;margin-top:28px;border-top:1px solid var(--line)}
.show__list li{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.show__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.show__v{font-size:.95rem;text-align:right}

/* contact strip */
.cstrip{margin-top:clamp(64px,9vw,120px);border-top:1px solid var(--line);background:var(--bg-2)}
.cstrip__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,6vw,80px) clamp(20px,4vw,56px);
  display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.cstrip__t{font-size:clamp(1.7rem,3.6vw,2.8rem);font-weight:650;letter-spacing:-.02em;line-height:1.06}
.cstrip__meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--text-3);margin-top:12px;display:flex;gap:18px;flex-wrap:wrap}
.cstrip__ctas{display:flex;gap:12px;flex-wrap:wrap}

.accent{font-style:italic;font-weight:300}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .svc{grid-template-columns:1fr}
  .show{grid-template-columns:1fr}
  .show__media{order:-1}
}
@media (max-width:640px){
  .nav__brand{will-change:transform;transition:transform .42s var(--ease)}
  .nav__brand img{width:80px;transition:width .42s var(--ease)}
  .nav.scrolled{padding-top:6px;padding-bottom:6px}
  .hsec{padding-top:52px}
}

/* ============================================================
   THE NIGHT VISIT — film hero (js/hero/film.js)
   arrival → portal → vault → showroom floor. Stations are UI
   LIGHT over the footage — they never conceal the cars.
   ============================================================ */
.fhero{position:relative;background:#000}
.fhero__sticky{position:relative;height:100dvh;overflow:hidden;background:#000}
/* poster: WebP (~140KB) with JPG fallback for browsers without image-set */
.fhero__poster{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;
  background-image:url('/assets/film-poster/poster.jpg');
  background-image:-webkit-image-set(url('/assets/film-poster/poster.webp') 1x);
  background-image:image-set(url('/assets/film-poster/poster.webp') type('image/webp'),
                             url('/assets/film-poster/poster.jpg') type('image/jpeg'))}
.fhero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.fhero__veil{position:absolute;inset:0;z-index:3;background:#050505;opacity:0;pointer-events:none;will-change:opacity}
/* grain: a STATIC alpha overlay — no mix-blend-mode (blending against the
   playing video every frame was the main scroll-jank source) */
.fhero__grain{position:absolute;inset:0;z-index:2;opacity:.045;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fhero__stations{position:absolute;inset:0;z-index:3;pointer-events:none}
.fstation{position:absolute;opacity:0;will-change:transform,opacity}

/* Nga qielli — cinematic title, lower-left (never centered) */
.fstation--title{left:clamp(20px,6vw,84px);bottom:20vh;max-width:min(680px,84vw);text-align:left}
.fhero__eyebrow{display:inline-flex;align-items:center;gap:14px;color:var(--text-2);margin-bottom:18px;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 20px rgba(0,0,0,.78)}
.fhero__eyebrow .hairline{width:34px;height:1px;background:var(--accent)}
.fhero__title{font-size:clamp(2.2rem,5.2vw,4.6rem);font-weight:650;line-height:1.02;letter-spacing:-.028em;
  text-shadow:0 1px 4px rgba(0,0,0,.9),0 3px 28px rgba(0,0,0,.78)}
.fhero__title .accent{font-style:italic;font-weight:300}

/* Zbritja — stat beats (ledger register types itself on) */
.fstation--stat{right:clamp(20px,7vw,110px);top:26vh;text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.fstation--stat2{right:auto;left:clamp(20px,7vw,110px);top:auto;bottom:30vh;text-align:left;align-items:flex-start}
.fstat__num{font-size:clamp(2.6rem,6vw,4.4rem);font-weight:700;letter-spacing:-.03em;line-height:1;
  text-shadow:0 1px 4px rgba(0,0,0,.9),0 3px 26px rgba(0,0,0,.78)}
.fstat__lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-2);min-height:1.2em;text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.72)}

/* Salla e Ikonave — the featured cars named as the camera passes: clean, elegant
   text, no red accents, no car-anchored pin/line — a quiet luxury caption. */
/* a near-solid, compact glass panel — hugs the text, reads as a deliberate label
   and never dissolves into the dark cars behind. No backdrop-filter (that forced
   a per-frame readback over the playing video); opacity does the separating. */
.fdossier{position:absolute;left:var(--dx,50%);top:var(--dy,55%);pointer-events:none;opacity:0;
  display:flex;flex-direction:column;gap:2px;max-width:260px;padding:10px 14px 11px;
  border-radius:5px;border:1px solid rgba(255,255,255,.16);
  background:rgba(7,7,7,.96);
  box-shadow:0 14px 40px rgba(0,0,0,.66),0 2px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  will-change:transform,opacity;transition:opacity .3s}
.fdossier__k{font-family:var(--mono);font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.fdossier__name{font-family:var(--serif);font-size:1.2rem;font-weight:500;letter-spacing:.01em;line-height:1.18;color:rgba(246,246,246,.97)}
.fdossier__spec{font-family:var(--mono);font-size:.6rem;color:var(--text-3);letter-spacing:.09em;font-variant-numeric:tabular-nums;margin-top:5px;text-transform:uppercase}
.fdossier__go{display:none}

/* Ikona — the finale plaque over the red carpet: a larger sibling of the caption
   (elegant neutral glass, no red accent) with a serif title. */
.fplaque{position:absolute;right:clamp(20px,7vw,110px);top:18vh;pointer-events:none;opacity:0;
  display:flex;flex-direction:column;gap:7px;text-align:right;align-items:flex-end;
  padding:18px 24px 19px;border-radius:5px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(7,7,7,.95);
  box-shadow:0 16px 50px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  will-change:transform,opacity;transition:opacity .3s}
.fplaque__k{font-family:var(--mono);font-size:.56rem;letter-spacing:.32em;text-transform:uppercase;color:var(--text-3)}
.fplaque__t{font-family:var(--serif);font-size:clamp(1.35rem,2.7vw,2.05rem);font-weight:500;line-height:1.12;
  letter-spacing:.05em;color:rgba(245,245,245,.95)}
.fplaque__b{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.fplaque__go{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);margin-top:7px;transition:color .3s}
.fplaque:hover .fplaque__go{color:var(--text)}

/* car-anchored popups — a pin sits on the car + a hairline connects it to the
   card. Quiet luxury, no red: a warm-white breathing dot + a pale hairline,
   matching the neutral glass captions. Positions are set by film.js from the
   source-frame projection (left/top for the pin; the SVG line in viewBox %). */
.fhero__leads{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.flead__line{stroke:rgba(246,246,246,.42);stroke-width:1;stroke-linecap:round;opacity:0}
.fhero__pins{position:absolute;inset:0;z-index:3;pointer-events:none}
.flead__pin{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:rgba(248,246,242,.95);opacity:0;pointer-events:none;will-change:transform,opacity;
  box-shadow:0 0 0 3px rgba(248,246,242,.14),0 0 10px 1px rgba(248,240,225,.5);
  animation:fpin 2.2s var(--ease) infinite}
@keyframes fpin{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@media (prefers-reduced-motion:reduce){.flead__pin{animation:none}}

/* the showroom floor — THE SETTLE. The engine drives a staggered choreography
   over the film's last scroll: --fLb (letterbox) → --fLead (headline) →
   --fSearch (search bloom) → --fChips (brand chips, per-chip --i stagger).
   Every consumer below animates transform+opacity only. */
.fhero__final{position:absolute;inset:0;z-index:4;--fLb:0;--fLead:0;--fSearch:0;--fChips:0;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;opacity:0;pointer-events:none;padding:0 20px;text-align:center;
  background:radial-gradient(78% 58% at 50% 55%,transparent 0%,rgba(3,3,3,.5) 62%,rgba(2,2,2,.86) 100%)}
/* cinematic letterbox closes in as the film settles — fixed-height bars scaled
   on transform (the old per-frame height animation relayouted every frame) */
.fhero__final::before,.fhero__final::after{content:"";position:absolute;left:0;right:0;
  height:46px;background:#040404;pointer-events:none;z-index:1;
  transform:scaleY(var(--fLb));will-change:transform}
.fhero__final::before{top:0;transform-origin:top}
.fhero__final::after{bottom:0;transform-origin:bottom}
.fhero__final>*{position:relative;z-index:2}
.fhero__welcome{color:var(--text-2);margin-bottom:2px;opacity:var(--fLead)}
.fhero__lead{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.012em;line-height:1.04;
  font-size:clamp(1.9rem,4.4vw,3.4rem);color:rgba(245,245,245,.97);text-shadow:0 2px 30px rgba(0,0,0,.6);
  opacity:var(--fLead);
  transform:translate3d(0,calc((1 - var(--fLead))*18px),0) scale(calc(.95 + var(--fLead)*.05))}
.fhero__lead .accent{font-style:italic;font-weight:300;color:var(--accent)}
/* ★ THE TYPEAHEAD HAS TO OUTRANK ITS OWN SIBLINGS.

   `.fhero__final > *` above gives EVERY child `z-index: 2`, and this element
   additionally builds its own stacking context (it has both `opacity` and a
   `transform`). So the suggestions panel's `z-index: 60` is scoped INSIDE this
   box and cannot compete outside it: against siblings that also sit at 2, the
   ones later in the DOM win — which is why typing in the hero drew the button,
   the brand marks and the Hall of Icons pill straight through the results.

   Raising this box (not the panel) is the fix, because the panel's z-index was
   never the thing being compared. Only matters while the panel is open; closed,
   nothing here overlaps anything. */
.fhero__search{width:100%;max-width:660px;opacity:var(--fSearch);
  transform:translate3d(0,calc((1 - var(--fSearch))*14px),0) scale(calc(.93 + var(--fSearch)*.07))}
.fhero__final .fhero__search{z-index:6}

/* ★ …and the rest of the hero gets out of the way while it is open. Raising the
   box fixed the unreadable overlap, but the brand marks are WIDER than the
   660px panel, so their ends still poked out on either side of it — the same
   defect, half solved. `:has()` keeps this in CSS: the typeahead already
   toggles `.open` on its own box and knows nothing about the hero, and adding a
   second place that has to remember to tell the hero is how these drift apart.
   Where `:has()` is unsupported the page simply keeps today's behaviour. */
.fhero__final:has(.ta.open) .fhero__acts,
.fhero__final:has(.ta.open) .fchips,
.fhero__final:has(.ta.open) .fmarks,
.fhero__final:has(.ta.open) .fhero__hatch{
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
/* the bloom glow is PRE-RENDERED at full strength on its own layer and only
   crossfaded in (opacity) — the old per-frame box-shadow recompute repainted
   the whole bar at the settle, the moment the client watches most. The box's
   base backdrop-filter is also dropped here (it sat blurred over the video). */
.fhero__search .searchbar__box{position:relative;
  backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(21,21,21,.92);
  border-color:rgba(255,255,255,.25)}
.fhero__search .searchbar__box::after{content:"";position:absolute;inset:-1px;border-radius:16px;
  pointer-events:none;opacity:var(--fSearch);will-change:opacity;
  box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 46px rgba(209,26,47,.16)}
/* brand chips arrive last, each a beat behind the one before (--i set by home.js) */
.fhero__final .fchips .chip{
  opacity:clamp(0,calc((var(--fChips) - var(--i,0)*.05)*1.9),1);
  transform:translate3d(0,calc((1 - clamp(0,calc((var(--fChips) - var(--i,0)*.05)*1.9),1))*8px),0)}
.fhero__hatch{display:inline-flex;align-items:center;gap:.5em;margin-top:14px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-2);border:1px solid var(--line-2);border-radius:100px;padding:.7em 1.4em;
  transition:border-color .3s,color .3s,background .3s,transform .4s var(--ease-out)}
.fhero__hatch:hover{color:var(--text);border-color:var(--text);background:rgba(255,255,255,.05);transform:translateY(-2px)}
/* browse-the-whole-stock — the primary action for a visitor with no car in
   mind; fades in with the search on the settle (more prominent than the chips).
   ★ The opacity lives on the ROW, not the button: «Ofertat aktuale» sits beside
   it and the two have to arrive together, or the second one pops in late over a
   hero that has already settled. */
/* Side by side, with the weight doing the ranking: «Stoku» is the filled
   primary, «Ofertat» the accent-outlined second. Same size, same shape — only
   the material differs, which is what tells the eye which one to press. */
.fhero__acts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;
  margin-top:4px;opacity:var(--fSearch)}
.fhero__browse{margin-top:0}
/* the accent dot: the offers button's one perpetual mark, transform/opacity
   only so it stays on the compositor and never touches the pinned hero's frame
   budget. `[hidden]` has to beat the button's own inline-flex. */
.fhero__offers[hidden]{display:none}
.fhero__offers::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--accent);margin-right:.05em;
  animation:offerPulse 3.2s var(--ease) infinite}
@keyframes offerPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}

/* ---------- the phone's first screen ----------
   ★ Measured at 360px this screen carried NINE tap targets: the search, two
   full-width stacked buttons, five brand chips wrapping into three ragged
   centred rows, and the Hall of Icons pill. Everything full-width and centred,
   so nothing led — it read as a wall rather than a welcome.

   Two changes, mobile only (the desktop hero is unchanged):

   1. The two actions SHARE A ROW at a smaller size, using the short labels.
      Stacked full-width they were two equal walls, and the red one outweighed
      the white primary it was supposed to sit beside.
   2. The brand chips LEAVE the hero. They are the least valuable thing on the
      screen and the only duplicated one — the same brands, with the same
      counts, are a section further down the same page. Desktop keeps them:
      there they cost a row nobody has to scroll past. */
/* the marks are a phone-only stand-in for the chips — see paintMarks() */
.fmarks{display:none}

@media (max-width:560px){
  /* one row, the short labels, and the primary takes ~40% more width — with
     both pills the same size the pair reads as one undifferentiated block */
  .fhero__acts{flex-wrap:nowrap;gap:9px;width:100%}
  .fhero__acts .btn{flex:1 1 0;min-width:0;justify-content:center;
    padding:.92em .6em;font-size:.88rem}
  /* ★ `.fhero__acts .fhero__browse`, not `.fhero__browse`: the rule above is
     (0,2,0) and its `flex` SHORTHAND resets flex-grow, so a single class here
     loses and the split silently stays a perfect 50/50. */
  .fhero__acts .fhero__browse{flex-grow:1.4}

  .fhero__final .fchips{display:none}

  .fmarks{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
    gap:clamp(14px,5vw,26px);margin-top:22px;opacity:var(--fChips)}
  /* one line, one row, never wrapping — a logo strip that wraps is the ragged
     stack this replaced */
  .fmark{display:inline-flex;align-items:center;justify-content:center;
    position:relative;flex:0 0 auto;transition:opacity .3s,transform .4s var(--ease-out)}
  /* the thumb floor without changing a pixel of layout (same trick as .lang) */
  .fmark::after{content:"";position:absolute;inset:-12px -8px}
  .fmark .blogo{height:24px;max-width:46px;margin:0;opacity:.62;
    transition:opacity .3s}
  .fmark:active{transform:scale(.94)}
  .fmark:active .blogo{opacity:1}

  /* ★ OPTICAL SIZING, not box sizing. One height for every mark looks wrong,
     because these logos do not share an aspect ratio: Aston Martin's wings are
     ~4:1 and read as twice the size of the Rolls-Royce badge at ~1:1, which
     fills almost none of its box. `object-fit: contain` equalises the BOX and
     that is exactly the problem — what has to match is the ink on screen. So
     the tall marks gain height. Any brand without a rule here falls back to the
     24px default, which suits a roughly square badge; add a line when a new
     logo joins MARK_ORDER.

     ★ There are no rules for wide wordmarks (Aston Martin, Bentley, Audi, Land
     Rover) because WIDE_MARKS in home.js keeps them out of this row entirely —
     optical height could not save them: at the same visual weight they still
     spanned three neighbours and broke the row's rhythm. */
  .fmark[href*="rolls-royce"]  .blogo{height:27px}
  .fmark[href*="ferrari"]      .blogo{height:27px}
  .fmark[href*="lamborghini"]  .blogo{height:27px}
  .fmark[href*="porsche"]      .blogo{height:26px}
}
@media (max-width:380px){
  .fmarks{gap:12px}
  .fmark .blogo{height:21px;max-width:40px}
  .fmark[href*="rolls-royce"]  .blogo{height:24px}
  .fmark[href*="ferrari"]      .blogo{height:24px}
  .fmark[href*="lamborghini"]  .blogo{height:24px}
  .fmark[href*="porsche"]      .blogo{height:23px}
}

/* skip lives bottom-CENTER (clear of the WhatsApp pill in the bottom-right) and
   reads clearly: brighter text, solid glass pill, soft shadow */
.fhero__skip{position:absolute;z-index:6;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));
  transform:translateX(-50%);pointer-events:none;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text);
  border:1px solid var(--line-3);border-radius:100px;padding:.72em 1.5em;
  background:rgba(12,12,12,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 10px 34px rgba(0,0,0,.45);
  transition:border-color .3s,color .3s,background .3s,transform .4s var(--ease-out)}
.fhero__skip:hover{border-color:var(--text);background:rgba(24,24,24,.9);transform:translateX(-50%) translateY(-2px)}
.fhero__skip:active{transform:translateX(-50%) scale(.98)}
.fhero__hint{position:absolute;z-index:4;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translateX(-50%);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);
  cursor:pointer;animation:fhint 2.6s var(--ease) infinite}
@keyframes fhint{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* night-air loader — the mark rising out of the dark into the light.
   The dark wash lives on a CHILD overlay (.film-loader__bg) that animates
   opacity only: animating background-color on the fixed parent rasterized the
   whole viewport every frame of the handoff, right at the first decode burst. */
.film-loader{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;overflow:hidden;transition:opacity .8s var(--ease),visibility .8s;
  animation:ldrSelfClear .8s var(--ease) 14s forwards}
.film-loader.is-done{opacity:0;visibility:hidden}
/* JS-dead safety: if no script ever runs, the loader dissolves by itself at
   ~14s so the page below stays reachable. Every live JS path (film, poster,
   fetch-fail fallback) adds .js-alive immediately and cancels this. */
html.js-alive .film-loader{animation:none}
@keyframes ldrSelfClear{to{opacity:0;visibility:hidden}}
.film-loader__bg{position:absolute;inset:0;background:#050505;transition:opacity .7s var(--ease);will-change:opacity}
/* loading → WELCOME: the black backdrop dissolves to the first film frame under a
   soft wash; the vignette fades, the mark + cue stay */
/* WELCOME (cinematic title card): the start screen sits DARK and moody (the mark
   carries it); on the first scroll the .is-flying state fades this wash to 0 over
   .7s, smoothly lightening into the live film */
.film-loader.is-ready .film-loader__bg{opacity:.86}
.film-loader.is-ready .film-loader__vig{opacity:1}
/* WELCOME → flight: the wash clears, the welcome chrome fades, only the logo sails to the nav */
.film-loader.is-flying .film-loader__bg{opacity:0}
.film-loader.is-flying .film-loader__eyebrow,
.film-loader.is-flying .film-loader__scroll,
.film-loader.is-flying .film-loader__rule{opacity:0;transition:opacity .35s var(--ease)}
.film-loader__vig{position:absolute;inset:0;pointer-events:none;transition:opacity .6s var(--ease);
  background:radial-gradient(ellipse 76% 72% at 50% 50%,transparent 28%,rgba(0,0,0,.5) 68%,rgba(0,0,0,.85) 100%)}
.film-loader__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;padding:0 20px}
.film-loader__eyebrow{font-size:.6rem;opacity:0;text-shadow:0 1px 16px rgba(0,0,0,.65);animation:ldrEyebrow .8s var(--ease) 1.9s forwards}
@keyframes ldrEyebrow{from{opacity:0;transform:translateY(6px)}to{opacity:.8;transform:none}}
/* the mark rises out of the dark into the beams, then one soft warm shade glides over the silver */
.film-loader__logo{position:relative;width:min(280px,52vw);opacity:0;filter:blur(10px);
  transform:translateY(8px) scale(.99);animation:ldrLogo 1.6s var(--ease) .5s forwards;
  -webkit-mask:url("/assets/logo.png") center/contain no-repeat;mask:url("/assets/logo.png") center/contain no-repeat}
.film-loader__logo img{display:block;width:100%;height:auto}
/* soft warm sheen — one gentle pass over the mark, like the car photos (base.css .sheen) */
.film-loader__logo::after{content:"";position:absolute;top:-8%;bottom:-8%;left:0;width:45%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,233,196,.5) 50%,transparent);
  transform:translateX(-160%) skewX(-14deg);will-change:transform,opacity;
  animation:ldrSheen 2.4s var(--ease) 2s 1 forwards}
@keyframes ldrLogo{to{opacity:1;filter:blur(0);transform:none}}
@keyframes ldrSheen{0%{opacity:0;transform:translateX(-160%) skewX(-14deg)}20%{opacity:.9}100%{opacity:0;transform:translateX(360%) skewX(-14deg)}}
@media (prefers-reduced-motion:reduce){
  .film-loader__logo::after{display:none}
  .film-loader__logo{animation:ldrLogoStill .4s ease .1s forwards}
  @keyframes ldrLogoStill{to{opacity:1;filter:blur(0);transform:none}}
  /* the offers dot stops breathing but stays visible — it is a marker first
     and an animation second */
  .fhero__offers::before{animation:none;opacity:.9}
}
/* the hairline under the mark — draws in after the logo settles */
.film-loader__rule{width:0;height:1px;margin-top:2px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,233,196,.72),transparent);
  animation:ldrRule 1s var(--ease) 1.5s forwards}
@keyframes ldrRule{to{width:clamp(120px,18vw,190px);opacity:.9}}
.film-loader__scroll-t{opacity:1}
@media (prefers-reduced-motion:reduce){.film-loader__rule{animation:none;width:clamp(120px,18vw,190px);opacity:.9}}
/* welcome cue — appears once the film is ready; scroll (or tap) to begin.
   Deliberately prominent: brighter + larger text and a bold, pronounced
   bouncing down-chevron so first-time visitors read it as "scroll down". */
.film-loader__scroll{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text);
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 18px rgba(0,0,0,.7);
  background:none;border:0;cursor:pointer;opacity:0;transition:opacity .6s var(--ease),color .3s}
.film-loader__scroll.is-in{opacity:1}
.film-loader__scroll:hover{color:var(--drita)}
.film-loader__chev{width:13px;height:13px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);animation:ldrCue 1.5s var(--ease) infinite;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.75))}
@keyframes ldrCue{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.55}50%{transform:rotate(45deg) translate(6px,6px);opacity:1}}
@media (prefers-reduced-motion:reduce){.film-loader__chev{animation:none}}
/* welcome hand-off: hide the real nav mark until the flight lands (crossfades under the dissolving loader) */
.nav__brand{transition:opacity .5s var(--ease)}
html.film-loading .nav__brand{opacity:0}

/* poster tier — no pin, no frames: graded still + title + search */
.fhero.is-poster .fhero__sticky{height:100dvh}
.fhero.is-poster .fhero__video{display:none}
.fhero.is-poster .fhero__veil{display:none}
.fhero.is-poster .fhero__poster{opacity:1}
.fhero.is-poster .fhero__poster::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(5,5,5,.82),rgba(5,5,5,.15) 40%,rgba(5,5,5,.35))}
.fhero.is-poster .fstation--stat,.fhero.is-poster .fdossier,.fhero.is-poster .fplaque{display:none}
.fhero.is-poster .fstation--title{opacity:1;bottom:14vh}
.fhero.is-poster .fhero__final{opacity:1;pointer-events:auto;justify-content:flex-start;padding-top:22vh;background:none;
  --fLead:1;--fSearch:1;--fChips:9}   /* settle fully open on the poster tier (chips: window+stagger cleared) */
.fhero.is-poster .fhero__skip,.fhero.is-poster .fhero__hint{display:none}

/* phones: tighter stations. The dossier card is a fixed lower-third chip
   (.fdossier--m, set by film.js on the m tier) — its PIN still tracks the car
   via the source-frame projection, with the connector rising from the card's
   top edge. No !important: the class simply wins over the base anchors. */
.fdossier--m{left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));
  top:auto;bottom:calc(13vh + env(safe-area-inset-bottom));max-width:none}
@media (max-width:640px){
  .fstation--title{bottom:24vh;left:calc(20px + env(safe-area-inset-left));right:calc(20px + env(safe-area-inset-right))}
  .fstation--stat{top:20vh;right:calc(20px + env(safe-area-inset-right))}
  .fstation--stat2{bottom:32vh;left:calc(20px + env(safe-area-inset-left))}
  .fplaque{right:calc(16px + env(safe-area-inset-right));left:calc(16px + env(safe-area-inset-left));top:14vh;align-items:flex-start;text-align:left}
  /* the escape hatch earns thumb size — it was a 10px pill nobody found */
  .fhero__skip{font-size:.72rem;padding:.85em 1.6em;bottom:calc(18px + env(safe-area-inset-bottom))}
  .fhero.is-poster .fhero__final{padding-top:16vh}
  /* legibility floor: data-bearing mono never below 11px on glass */
  .fdossier__k{font-size:.62rem}
  .fdossier__spec{font-size:.7rem}
}

/* ── hero → site separator: a clean, visible hairline marking where the pinned hero
   ends and the browsable site begins — brightest at centre, fades at the edges ── */
.herosep{max-width:var(--maxw);margin:26px auto;height:1px;
  background:linear-gradient(90deg,transparent 4%, rgba(255,255,255,.14) 28%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.14) 72%, transparent 96%)}