/* =========================================================================
   SayarHub — public showroom
   Tailwind handles spacing/layout utilities. Everything with a point of view
   lives here.
   ========================================================================= */

/* ---------------------------------------------------------------- base -- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Lenis drives scroll position; let it. */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* The HTML `hidden` attribute, made to actually mean it.
   Tailwind's preflight is off, so this base layer is the only thing that can
   supply it — and without it `hidden` is merely a suggestion. It comes from the
   BROWSER's stylesheet, and any author rule that sets `display` beats it no
   matter how weak the selector, because author origin wins over user-agent
   origin outright.
   That is not theoretical: `.lightbox { display: grid }` kept the photo viewer
   in the layout while it carried `hidden` — a full-viewport, z-index 130,
   opacity 0 sheet over the vehicle page. The page looked perfectly normal and
   nothing on it could be clicked, because every click landed on the invisible
   lightbox. `.tabpanel[hidden]` further down is the same bug, found once and
   patched for one element; this is the general form. */
[hidden] { display: none !important; }

::selection { background: var(--accent); color: #12100A; }

/* A focus ring that is visible on both the dark canvas and on photography. */
:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  z-index: 200;
  background: var(--accent); color: #12100A;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm); font-weight: 600;
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- type -- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 90;
  letter-spacing: -.02em;
  line-height: 1.02;
}

.kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-bottom: var(--s-10);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: var(--s-3) 0 0;
}
.section-note { color: var(--text-secondary); font-size: 14px; margin-top: var(--s-2); }

/* Rules that stop short of the edge — a full-bleed hairline reads as a
   framework default, a tapering one reads as drawn. */
.rule-fade {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg,
    transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: #12100A;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-2), var(--shadow-inset);
  transition:
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-3); }
.btn:active {
  transform: scale(.97);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.36), var(--shadow-1);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  border-color: var(--border-strong);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.2);
  box-shadow: var(--shadow-2);
}

.btn--wa {
  --btn-bg: transparent;
  --btn-fg: var(--whatsapp);
  border-color: rgba(37,211,102,.42);
  box-shadow: none;
}
.btn--wa:hover {
  background: rgba(37,211,102,.1);
  border-color: var(--whatsapp);
  color: var(--whatsapp);
}
.btn--wa-solid {
  --btn-bg: var(--whatsapp);
  --btn-fg: #06301A;
}
.btn--wa-solid:hover { background: #2ee674; }

.btn--sm { padding: 9px var(--s-4); font-size: 13px; border-radius: var(--r-sm); }
.btn--block { width: 100%; }
.btn svg { width: 17px; height: 17px; flex: none; }

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--t-slow) var(--ease-out),
    border-color var(--t-slow) var(--ease-out),
    backdrop-filter var(--t-slow) var(--ease-out),
    height var(--t-slow) var(--ease-out);
}
.nav.is-stuck {
  height: 64px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--border-hairline);
}
.nav__inner {
  width: 100%; max-width: var(--page-max);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--s-8);
}

.brand { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.brand__mark {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--accent-hover), #A8823A 70%);
  color: #12100A;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 800; letter-spacing: -.03em;
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.35);
}
/* A dealer who has uploaded a logo gets the logo, not the logo ON our gold plate.

   AND THE SLOT TAKES THE LOGO'S SHAPE. It used to stay 34x34 with the image
   letterboxed inside it, which is fine for a square mark and quietly awful for the
   wide ovals most dealers actually have: a 2:1 logo came out 34px wide and 17px
   tall - half the height of the monogram it replaced, and unreadable.

   Cropping to a square was the alternative and it is worse. A wide wordmark loses
   its ends to a centre crop, so "FAWMY TRADERS" becomes "WMY TRADE" and nobody
   notices until a customer does.

   So: fixed HEIGHT, automatic width, capped so a very wide banner cannot push the
   name out of the header. A square logo is unaffected - auto width on a square
   image at 34px tall is 34px. */
.brand__mark.has-logo {
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  /* display:block, NOT the grid the monogram uses. There is nothing left to
     centre once the plate is gone, and a grid box here sized itself wrongly -
     see below. */
  display: block;
  width: auto;
  height: auto;
  max-width: var(--logo-max-w);
}

/* THE IMAGE carries the height, and the box shrink-wraps it.

   The other way round - a fixed-height box with `img { height: 100% }` - looks
   equivalent and is not. An image with a percentage height and an auto width
   contributes its NATURAL width to the box's intrinsic size, so a 300px-wide
   logo made the box want 300px, `max-width` clamped it to 104px, and the 60px
   logo then sat centred inside a 104px box with 44px of dead space beside it.
   In the header that read as the logo not lining up with the name; in the
   footer's 190px column it ate the room the name needed and pushed it to wrap.

   With a definite height on the image itself, its used width is the natural
   ratio times that height, and the box is exactly as wide as the artwork. */
.brand__mark img {
  display: block;
  width: auto;
  height: var(--logo-h);
  max-width: 100%;
  object-fit: contain;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: -.015em;
  position: relative;
}
/* Pen-stroke underline: an SVG squiggle that draws itself, not a solid bar. */
.brand__name::after {
  content: "";
  position: absolute; left: -2px; right: -2px; bottom: -5px; height: 6px;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2c22-2.6 44-3.4 66-2.2 18 1 34 2.4 52 1.1' fill='none' stroke='%23C9A24B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  clip-path: inset(0 100% 0 0);
  transition: clip-path 420ms var(--ease-out);
}
.brand:hover .brand__name::after { clip-path: inset(0 0 0 0); }
.brand__sub {
  display: block;
  font-family: var(--font-ui);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  /* Was --text-muted (#6B7280). At 9.5px with .18em tracking that is below the
     size where a mid grey still reads on this canvas — the letters are thin and
     far apart, so there is very little ink for the eye to work with. Muted is the
     right weight for a paragraph and the wrong one for a caption this small. */
  color: var(--text-primary);
  margin-top: 1px;
}

.nav__links { display: flex; align-items: center; gap: var(--s-7, 28px); margin-inline: auto; }
.nav__link {
  position: relative;
  font-size: 13.5px; font-weight: 500;
  color: var(--text-secondary);
  padding: var(--s-2) 0;
  transition: color var(--t-base) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-spring);
}
.nav__link:hover { color: var(--text-primary); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border-hairline);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.icon-btn:hover { background: rgba(255,255,255,.08); border-color: var(--border-strong); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn--wa { color: var(--whatsapp); }

.nav__burger { display: none; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(11,12,14,.72);
  backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.drawer.is-open { opacity: 1; pointer-events: auto; }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(84vw, 340px);
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-4);
  padding: var(--s-6) var(--s-6) var(--s-10);
  display: flex; flex-direction: column; gap: var(--s-2);
  transform: translateX(100%);
  transition: transform var(--t-modal) var(--ease-spring);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__link {
  padding: var(--s-4) 0;
  font-size: 20px; font-family: var(--font-display); font-weight: 600;
  border-bottom: 1px solid var(--border-hairline);
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: -6% 0 -6% 0; z-index: -2; will-change: transform; }
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  /* Hidden until the real photograph has decoded. The hero's gradient is a
     designed backdrop in its own right, so an imageless first paint looks
     deliberate rather than broken - and nothing is shown that then changes. */
  opacity: 0;
  transition: opacity 520ms var(--ease-out);
}
.hero__img.is-ready { opacity: 1; }
/* Graduated key light: warm pool bottom-left, deep falloff top-right —
   directional, like a studio, rather than a symmetric vignette. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 18% 108%, rgba(201,162,75,.20), transparent 55%),
    radial-gradient(90% 70% at 82% -10%, rgba(0,0,0,.72), transparent 60%),
    linear-gradient(to top, rgba(11,12,14,.97) 2%, rgba(11,12,14,.72) 26%, rgba(11,12,14,.18) 60%, rgba(11,12,14,.55) 100%);
}
.hero__body {
  position: relative;
  padding-block: var(--s-24) clamp(80px, 14vh, 132px);
  max-width: 820px;
  /* Centred, because the block is now built around the showroom's name rather than
     around one car. .wrap already centres the box; this centres what is in it. */
  text-align: center;
}

/* ---- the showroom's name, the largest thing on the page ------------------ */
/* Sized ABOVE the featured car deliberately. The car used to be the display type
   here and the name appeared nowhere on the first screen at all - so a visitor
   arriving from a shared link read a model name and had to hunt the header to find
   out whose floor it was on. The car is the illustration; the name is the page. */
.hero__brand { margin-bottom: clamp(22px, 4.5vh, 46px); }
.hero__brandname {
  font-family: var(--font-display);
  font-size: clamp(38px, 7vw, 84px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}
/* The same drawn pen-stroke the header's mark carries, at hero scale. Always drawn
   rather than revealed on hover: nothing here is hovered, and the stroke is what
   makes the two lockups read as the same mark. */
.hero__brandname::after {
  content: "";
  display: block;
  height: .1em; min-height: 7px;
  margin: .16em auto 0;
  width: min(100%, 15ch);
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2c22-2.6 44-3.4 66-2.2 18 1 34 2.4 52 1.1' fill='none' stroke='%23C9A24B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.hero__brandsub {
  font-family: var(--font-ui);
  font-size: clamp(10px, 1.15vw, 12.5px);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--text-secondary);
  /* Letter-spacing is added AFTER the last letter too, so a centred line sits half a
     space left of true centre. The indent puts it back. */
  text-indent: .34em;
  margin: var(--s-4) 0 0;
}

.hero__kicker { margin-bottom: var(--s-4); }
/* The featured car: secondary to the name above it now, so it steps down from
   display size to a strong sub-head. Still the biggest thing after the name. */
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(25px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}
.hero__title em {
  display: block;
  font-style: normal;
  font-size: .62em;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -.01em;
  margin-top: var(--s-2);
}
.hero__price {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 var(--s-8);
}
.hero__price .cur { color: var(--accent); font-size: .62em; margin-right: .4em; letter-spacing: .06em; }
.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5);
  color: var(--text-secondary); font-size: 13.5px;
  margin: calc(var(--s-8) * -1) 0 var(--s-8);
  padding-top: var(--s-4);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero__meta span::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* The hero is exactly one screen tall and clips what does not fit, and the name
   block is a new 90-odd pixels in it. On a short window - a phone in landscape, a
   laptop with the browser chrome showing - that is enough to push the top of the
   name out of sight, which is the one thing this change exists to prevent. So the
   spacing tightens rather than the content going missing. */
@media (max-height: 760px), (max-width: 560px) {
  .hero__body { padding-block: var(--s-12) clamp(52px, 9vh, 92px); }
  .hero__brand { margin-bottom: clamp(14px, 2.4vh, 26px); }
  .hero__brandname { font-size: clamp(32px, 8.6vw, 54px); }
  .hero__price { margin-bottom: var(--s-6); }
}

.scroll-cue {
  position: absolute; left: 50%; bottom: var(--s-6);
  transform: translateX(-50%);
  display: grid; place-items: center; gap: var(--s-2);
  color: var(--text-muted);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
}
.scroll-cue__line {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: cue-bob 2.4s var(--ease-in-out) infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* --------------------------------------------------------------- filters -- */

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  margin-bottom: var(--s-8);
}
.chips {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
}
.chip {
  padding: 9px var(--s-4);
  border-radius: 10px;
  border: 1px solid var(--border-hairline);
  background: rgba(255,255,255,.02);
  color: var(--text-secondary);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: color var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #12100A;
  font-weight: 600;
  box-shadow: inset 0 2px 5px rgba(94,72,20,.42), 0 1px 0 rgba(255,255,255,.12);
}
.chip__n {
  font-variant-numeric: tabular-nums;
  opacity: .55; margin-left: 6px; font-size: 11.5px;
}

.select {
  appearance: none;
  padding: 10px 38px 10px var(--s-4);
  border-radius: 10px;
  border: 1px solid var(--border-hairline);
  background: rgba(255,255,255,.02)
    no-repeat right 13px center/13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  color: var(--text-primary);
  font-size: 13px; cursor: pointer;
  transition: border-color var(--t-base) var(--ease-out);
}
.select:hover { border-color: var(--border-strong); }
.select option { background: var(--bg-surface); }

/* ------------------------------------------------------------------ grid --
   Deliberately asymmetric: the first tile is a 2-col hero card, and a
   full-width band interrupts the rhythm every six vehicles.                  */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: var(--s-6);
  /* stretch, not start. With `start` each card was only as tall as its own
     content, so one car whose name wrapped to two lines grew and the rest of the
     row stayed short — the grid stopped reading as a grid. Stretching makes every
     card in a row the height of the tallest; .card is already a flex column and
     .card__foot already has margin-top:auto, so the price still sits on the
     bottom edge of whichever card it is in. */
  align-items: stretch;
}
/* Every card is the same size, featured included. The featured one used to span
   two columns with a wider photo and a larger title, which made the grid read as
   a layout with a mistake in it rather than as a list of stock — and the car it
   was promoting already has the whole hero at the top of the page. One emphasis
   is enough; two competing ones just cost the grid its rhythm.
   .band still spans the full width: it is an interrupt, not a car. */
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .grid > .band { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

/* ----------------------------------------------------------------- card -- */

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  /* --tint is set per-card from the vehicle's dominant colour, so the
     ambient shadow picks up the paint. */
  --tint: 201, 162, 75;
  transition:
    transform var(--t-base) var(--ease-spring),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}
.card:hover,
.card:focus-within {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow:
    0 4px 10px rgba(0,0,0,.44),
    0 26px 56px rgba(0,0,0,.40),
    0 22px 60px -18px rgba(var(--tint), .34);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-surface-2);
}
.card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 640ms var(--ease-out);
}
.card:hover .card__img { transform: scale(1.08); }

/* the accent hairline that wipes in beneath the photo on hover */
.card__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(201,162,75,0));
  transform: scaleX(0); transform-origin: left;
  transition: transform 460ms var(--ease-out);
}
.card:hover .card__media::after { transform: scaleX(1); }

.card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,12,14,.55), transparent 42%);
  pointer-events: none;
}

/* Which showroom the car is standing in.

   BOTTOM-LEFT, opposite corner to .badge — the two are independent (a car can be
   new AND in Kandy) and the top-left is already taken. Sits on the scrim, which is
   darkest at the bottom, so it reads without a heavier background of its own.

   Quieter than .badge on purpose: it is a fact about where, not a claim about the
   car. Only rendered at all when the dealer has more than one branch. */
.card__branch {
  position: absolute; bottom: var(--s-3); left: var(--s-3);
  z-index: 1;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 10px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  background: rgba(11,12,14,.52);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.86);
  pointer-events: none;
}

.badge {
  position: absolute; top: var(--s-3); left: var(--s-3);
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: rgba(11,12,14,.66);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text-primary);
}
.badge--new       { background: rgba(201,162,75,.92); color: #12100A; border-color: transparent; }
.badge--certified { background: rgba(74,222,128,.16); color: var(--success); border-color: rgba(74,222,128,.34); }

.heart {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(11,12,14,.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring),
              background-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
}
.heart:hover { background: rgba(11,12,14,.78); transform: scale(1.08); }
.heart:active { transform: scale(.9); }
.heart svg { width: 16px; height: 16px; }
.heart[aria-pressed="true"] { color: var(--danger); }
.heart[aria-pressed="true"] svg { fill: currentColor; }

.card__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.card__title {
  font-size: 18px; font-weight: 600; letter-spacing: -.015em;
  margin: 0; line-height: 1.25;
  /* Two lines' worth of space whether the name needs it or not, so the specs and
     the price below start at the same height on every card rather than only the
     card outline matching. Capped at two as well: a very long name would otherwise
     push a third line and reintroduce the same misalignment it is fixing. */
  min-height: calc(2 * 1.25em);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.card__sub { font-size: 12px; color: var(--text-muted); margin: 5px 0 0; }

.card__specs {
  /* auto-fill, not a fixed three: the row now carries every spec the car has —
     mileage, fuel, gearbox, drivetrain, year, body — and wraps onto a second line
     rather than dropping the rest. minmax keeps a lone chip from stretching across
     the whole card. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--s-2);
  margin: var(--s-4) 0;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.spec { display: flex; align-items: center; gap: 7px; min-width: 0; }
.spec svg { width: 15px; height: 15px; color: var(--text-muted); flex: none; }
.spec b {
  font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.card__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3); margin-top: auto;
}
.price {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.price .cur { font-size: .62em; color: var(--accent); margin-right: .35em; font-weight: 600; letter-spacing: .05em; }
.price__was {
  display: block;
  font-size: 12px; font-weight: 500; color: var(--text-muted);
  text-decoration: line-through; margin-top: 2px;
}

.wa-fab {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #06301A;
  cursor: pointer;
  border: none;
  box-shadow: 0 3px 10px rgba(37,211,102,.3), var(--shadow-inset);
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out);
}
.wa-fab svg { width: 21px; height: 21px; }
.wa-fab:hover { transform: scale(1.07); box-shadow: 0 6px 20px rgba(37,211,102,.45); }
.wa-fab:active { transform: scale(.92); }
/* the gentle pulse only while the parent card is hovered — never ambient,
   never more than one thing moving in the tile at a time */
.card:hover .wa-fab { animation: wa-pulse 2.1s var(--ease-in-out) infinite; }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(37,211,102,.3), 0 0 0 0 rgba(37,211,102,.34); }
  60%      { box-shadow: 0 3px 10px rgba(37,211,102,.3), 0 0 0 9px rgba(37,211,102,0); }
}

.card__link { position: absolute; inset: 0; z-index: 1; }
.card__body .heart, .card__foot .wa-fab, .card__media .heart { position: relative; z-index: 2; }
.card__media .heart { position: absolute; }

/* full-width interrupt band */
/* The two promo bands now sit in their own #offers section instead of being spliced
   into #grid every sixth card. Inside the grid they were grid items and inherited its
   gap; on their own they need one. Stacked full width, which is the shape they were
   designed at: side by side, the title, copy, button and the big index numeral do not
   fit without wrapping badly. */
.bands { display: grid; gap: var(--s-6); }

.band {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  background:
    radial-gradient(90% 160% at 8% 50%, rgba(201,162,75,.16), transparent 60%),
    linear-gradient(100deg, var(--bg-surface), var(--bg-elevated));
  padding: clamp(28px, 5vw, 52px);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-8); flex-wrap: wrap;
  box-shadow: var(--shadow-2);
}
.band__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 38px); font-weight: 700;
  letter-spacing: -.025em; margin: var(--s-2) 0 0; line-height: 1.08;
}
.band__copy { color: var(--text-secondary); max-width: 46ch; margin: var(--s-3) 0 0; font-size: 14.5px; }
.band__deco {
  position: absolute; right: -40px; top: 50%; translate: 0 -50%;
  font-family: var(--font-display);
  font-size: 190px; font-weight: 800; letter-spacing: -.06em;
  color: rgba(255,255,255,.022);
  pointer-events: none; user-select: none;
}

/* empty state */
.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--s-20) var(--s-6);
  color: var(--text-secondary);
}
.empty svg { width: 68px; height: 68px; margin: 0 auto var(--s-5); color: var(--text-muted); opacity: .7; }
.empty h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 var(--s-2); color: var(--text-primary); }

/* skeleton — champagne shimmer, not the usual grey */
.skel {
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  overflow: hidden; position: relative;
  min-height: 340px;
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 20%, rgba(201,162,75,.09) 45%, rgba(201,162,75,.15) 50%,
    rgba(201,162,75,.09) 55%, transparent 80%);
  transform: translateX(-100%);
  animation: shimmer 1.5s var(--ease-in-out) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ----------------------------------------------------------- categories -- */

.cats {
  display: flex; gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-4);
  scrollbar-width: none;
  cursor: grab;
}
.cats::-webkit-scrollbar { display: none; }
.cats.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.cats.is-dragging a { pointer-events: none; }

.cat {
  position: relative; flex: none;
  width: clamp(200px, 26vw, 268px);
  aspect-ratio: 2 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-2);
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out);
}
.cat:hover { transform: translateY(-5px); box-shadow: var(--shadow-3); }
.cat img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.cat:hover img { transform: scale(1.06); }
.cat__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,12,14,.9) 4%, rgba(11,12,14,.28) 46%, transparent 72%);
}
/* Name over count, not name-then-count on one line.
   Both children are spans, so they were inline and ran together — "Sedan2
   available" — and the margin-top below did nothing at all, because margin-top is
   ignored on an inline box. A column here is what that margin was reaching for. */
.cat__label {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-5);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 3px;
}
.cat__name {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.15;
}
.cat__n { font-size: 12px; color: var(--text-secondary); }

.drag-cursor {
  position: fixed; z-index: 80; top: 0; left: 0;
  width: 74px; height: 74px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(201,162,75,.92);
  color: #12100A;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none;
  opacity: 0; scale: .6;
  transition: opacity var(--t-base) var(--ease-out), scale var(--t-base) var(--ease-spring);
  backdrop-filter: blur(4px);
}
.drag-cursor.is-on { opacity: 1; scale: 1; }

/* ---------------------------------------------------------------- trust -- */

.trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.trust__item {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-8) var(--s-6);
  border-left: 1px solid var(--border-hairline);
}
.trust__item:first-child { border-left: 0; }
.trust__item svg { width: 24px; height: 24px; color: var(--accent); flex: none; stroke-width: 1.4; }
.trust__item b { display: block; font-size: 14.5px; font-weight: 600; }
.trust__item span { font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 720px) {
  .trust__item { border-left: 0; border-top: 1px solid var(--border-hairline); padding: var(--s-5) 0; }
  .trust__item:first-child { border-top: 0; }
}

/* ---------------------------------------------------------------- about -- */

.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}
@media (min-width: 900px) { .about { grid-template-columns: .92fr 1fr; } }

/* One image. Sized and rotated on .about__stack img itself rather than on
   :first-child / :last-child - with a single child BOTH of those match it, and
   the old pair of rules would have laid the one photograph out as the small
   absolutely-positioned corner inset. */
.about__stack img {
  display: block;
  /* Not 100%: the tilt makes the box wider than the image, and at full width the
     corners push past the column and give the page a horizontal scrollbar. */
  width: 96%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-4);
  rotate: -1.8deg;
}
.about__copy p { color: var(--text-secondary); font-size: 15.5px; line-height: 1.7; }
.about__sig {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 600;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--accent);
  margin-top: var(--s-6);
  rotate: -1.6deg;
  display: inline-block;
}
.about__role { font-size: 12px; color: var(--text-muted); letter-spacing: .1em; text-transform: uppercase; }

.stat-row { display: flex; gap: var(--s-10); flex-wrap: wrap; margin-top: var(--s-8); }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 34px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: 12px; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; }

/* -------------------------------------------------------------- contact -- */

/* The "or message us on WhatsApp" block under the enquiry form. The rule sits
   here rather than in the form styles because showroom.js only inserts it when
   the dealer has the WhatsApp channel switched on. */
.wa-direct { margin-top: var(--s-5); }
.wa-direct__or {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--s-4);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.wa-direct__or::before,
.wa-direct__or::after {
  content: ""; flex: 1; height: 1px; background: var(--border-hairline);
}

.contact {
  display: grid; grid-template-columns: 1fr; gap: var(--s-10);
}
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; } }

.map {
  height: 100%; min-height: 380px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-2);
  background: var(--bg-surface);
  z-index: 0;
}
/* The map is a Google Maps iframe now, not Leaflet tiles, so none of the
   .leaflet-* overrides that used to live here apply any more.

   IT IS DELIBERATELY NOT FILTERED DARK. The old rule inverted only the tile pane and
   left Leaflet's own controls legible; an iframe is cross-origin, so the only lever
   left is a filter over the whole box — which would invert Google's logo and every
   street name with it. A legible, familiar map that does not match the canvas beats a
   stylish one nobody can read. The container's border and radius still frame it. */
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- the contact section's branch cards -------------------------------------

   One card per branch the dealer lists. auto-fit rather than a fixed column count:
   a one-branch showroom gets a single wide card and a three-branch one gets a row,
   with no breakpoint doing the deciding. */
.branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-5);
}

.branchcard {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  background: var(--bg-surface);
  box-shadow: var(--shadow-2);
}

/* A fixed aspect rather than a fixed height: the card sits in a grid column whose
   width the browser decides, and a 220px map in a 600px card looks like a mistake. */
.branchcard__map { aspect-ratio: 16 / 10; background: var(--bg-elevated); }
.branchcard__map iframe { width: 100%; height: 100%; border: 0; display: block; }

.branchcard__body { padding: var(--s-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.branchcard__name { font-size: 17px; font-weight: 700; margin: 0; color: var(--text-primary); }
.branchcard__addr { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.branchcard__who  { margin: 0; color: var(--text-muted); font-size: 13px; }

/* margin-top:auto pins the buttons to the bottom, so cards in a row line up even
   when one address runs to three lines and another to one. */
.branchcard__acts {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: auto; padding-top: 4px;
}

.branchhours {
  margin-top: var(--s-6);
  color: var(--text-secondary); font-size: 14px;
}
.branchhours__title {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 8px;
}
.branchhours p { margin: 0 0 2px; }

/* The enquiry form's own section. Capped and centred: a single column of inputs
   stretched to the full page width is a form nobody can scan. */
.enquirebox { max-width: 640px; margin: 0 auto; }
.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 640px) { .frow2 { grid-template-columns: 1fr; } }

.field { display: block; margin-bottom: var(--s-4); }
.field > span {
  display: block;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
.input, .textarea {
  width: 100%;
  padding: 13px var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-hairline);
  background: rgba(255,255,255,.025);
  color: var(--text-primary);
  font: inherit; font-size: 14.5px;
  transition: border-color var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  background: rgba(255,255,255,.045);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.textarea { resize: vertical; min-height: 118px; }

/* --------------------------------------------------------------- footer -- */

.footer {
  border-top: 1px solid var(--border-hairline);
  background: linear-gradient(to bottom, var(--bg-canvas), #08090B);
  padding-block: var(--s-16) var(--s-8);
  margin-top: var(--s-24);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-10);
}
.footer h3 {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 var(--s-4);
}
.footer a { color: var(--text-secondary); font-size: 14px; display: block; padding: 5px 0; transition: color var(--t-base) var(--ease-out); }
.footer a:hover { color: var(--accent); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-5); flex-wrap: wrap;
  margin-top: var(--s-12); padding-top: var(--s-6);
  border-top: 1px solid var(--border-hairline);
  color: var(--text-muted); font-size: 12.5px;
}
/* The vendor's mark. It is a LINK, and the only place SayarHub/FikrFusion appears
   on a dealer's own site - deliberately quiet, but followable. */
.powered {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--text-muted);
  transition: color var(--t-base) var(--ease-out);
}
.powered:hover { color: var(--text-secondary); }
.powered b { color: var(--text-secondary); font-weight: 600; letter-spacing: .04em; }
.powered:hover b { color: var(--accent); }

/* ---------------------------------------------------------------- modal -- */

.modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: var(--s-5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.modal.is-open { opacity: 1; pointer-events: auto; }
/* soft vignette rather than a flat black wash */
.modal__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 46%, rgba(11,12,14,.62), rgba(6,7,8,.9) 78%);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.modal__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(88svh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-4);
  padding: var(--s-6);
  transform: translateY(14px) scale(.965);
  opacity: 0;
  transition: transform var(--t-modal) var(--ease-spring), opacity var(--t-modal) var(--ease-out);
}
.modal.is-open .modal__panel { transform: none; opacity: 1; }
@media (max-width: 640px) {
  .modal { place-items: end center; padding: 0; }
  .modal__panel {
    width: 100%;
    max-height: 92svh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
    transform: translateY(100%);
    padding-bottom: max(var(--s-6), env(safe-area-inset-bottom));
  }
}
.modal__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5);
}
.modal__title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0;
}
.modal__sub { color: var(--text-secondary); font-size: 13.5px; margin: 4px 0 0; }
.modal__grab {
  width: 38px; height: 4px; border-radius: 2px;
  background: var(--border-strong);
  margin: 0 auto var(--s-4);
}
@media (min-width: 641px) { .modal__grab { display: none; } }

.pick {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.pick__opt {
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-hairline);
  background: rgba(255,255,255,.02);
  text-align: left; cursor: pointer;
  transition: border-color var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.pick__opt:hover { border-color: var(--border-strong); background: rgba(255,255,255,.05); }
.pick__opt:active { transform: scale(.98); }
.pick__opt[aria-pressed="true"] {
  border-color: var(--accent-line);
  background: var(--accent-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pick__opt svg { width: 19px; height: 19px; color: var(--accent); margin-bottom: var(--s-2); }
.pick__opt b { display: block; font-size: 14px; font-weight: 600; }
.pick__opt span { font-size: 12px; color: var(--text-muted); }

.msg-preview {
  width: 100%;
  min-height: 210px;
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-hairline);
  background: #0F1518;
  color: #DDE6E4;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: 12.5px; line-height: 1.62;
  resize: vertical;
}
.msg-preview:focus { outline: none; border-color: rgba(37,211,102,.4); box-shadow: 0 0 0 3px rgba(37,211,102,.12); }

.qr-box {
  display: grid; place-items: center; gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: #fff;
  margin-bottom: var(--s-4);
}
.qr-box canvas, .qr-box img { width: 168px; height: 168px; image-rendering: pixelated; }
.qr-box p { color: #4B5563; font-size: 12px; margin: 0; text-align: center; }

.hint { font-size: 12px; color: var(--text-muted); margin: var(--s-3) 0 0; }

/* --------------------------------------------------------------- toasts -- */

.toasts {
  position: fixed; z-index: 200;
  left: 50%; bottom: var(--s-6); translate: -50% 0;
  display: grid; gap: var(--s-2); justify-items: center;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 12px var(--s-5);
  border-radius: var(--r-md);
  background: rgba(27,30,36,.94);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-3);
  font-size: 13.5px; font-weight: 500;
  animation: toast-in 420ms var(--ease-spring);
}
.toast svg { width: 17px; height: 17px; color: var(--success); flex: none; }
.toast.is-out { animation: toast-out 260ms var(--ease-in-out) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px)  scale(.97); } }

/* gold ripple when the price is tapped */
.ripple {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,75,.5), rgba(201,162,75,0) 68%);
  pointer-events: none;
  animation: ripple 620ms var(--ease-out) forwards;
}
@keyframes ripple {
  from { transform: scale(0); opacity: .95; }
  to   { transform: scale(2.6); opacity: 0; }
}

.confetti-bit {
  position: fixed; z-index: 210;
  width: 7px; height: 7px; border-radius: 1.5px;
  pointer-events: none;
}

/* ------------------------------------------------------- scroll reveals -- */

.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-spring);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__img { transform: none !important; }
}

/* ------------------------------------------------------------- sections -- */

.section { padding-block: clamp(64px, 10vw, 128px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }

/* ADJACENT SECTIONS SHARE ONE GAP, not two.

   padding-block applies top AND bottom, so two sections in a row put up to 128px of
   padding below the first and another 128px above the second — 256px of nothing
   between them, which reads as the page having ended. Vertical margins would have
   collapsed into each other; padding does not.

   Dropping the top padding on any section that FOLLOWS another leaves one 128px gap
   doing the work of two. The first section on a page keeps its full top padding,
   because what is above it is the hero rather than another section.

   Safe because no .section carries a background or a border of its own — the padding
   is space, not a band, so removing half of it cannot leave a colour looking clipped. */
.section + .section { padding-top: 0; }

/* ------------------------------------------------ responsive nav collapse -- */

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .nav__right .btn { display: none; }
}

/* =========================================================================
   Vehicle detail
   ========================================================================= */

.detail-page { padding-top: calc(var(--nav-h) + var(--s-6)); }

.crumbs {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 12.5px; color: var(--text-muted);
  margin-bottom: var(--s-6); flex-wrap: wrap;
}
/* The LINK is the brighter of the two, and the page you are already on is the
   dimmer. It was the other way round: "Inventory" — the only thing here worth
   clicking — was painted in the muted trail colour while the current page, which
   goes nowhere, was the lighter one. */
.crumbs a { color: var(--text-secondary); transition: color var(--t-base) var(--ease-out); }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-current] { color: var(--text-muted); }

.detail {
  display: grid;
  /* minmax(0, 1fr), NEVER a bare 1fr.
     A bare "1fr" is minmax(auto, 1fr), and "auto" as a minimum is MIN-CONTENT - so
     the track cannot shrink below the widest thing in it. The gallery is a Swiper:
     its slides sit in one horizontal row, so its min-content width is every photo
     side by side. On a phone that made this column about three viewports wide, and
     .gal-main's aspect-ratio: 3/2 then made it as tall as it was wide - a single
     empty black box past the bottom of the screen with the whole page below it.
     The desktop rule below already got this right; the mobile default did not. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .detail { grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr); gap: var(--s-10); }
}

/* ------------------------------------------------------------- gallery -- */

.gal-main {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-3);
  background: var(--bg-surface);
  aspect-ratio: 3 / 2;
  cursor: zoom-in;
}
.gal-main .swiper, .gal-main .swiper-wrapper, .gal-main .swiper-slide { height: 100%; }
.gal-main img { width: 100%; height: 100%; object-fit: cover; }

.gal-count {
  position: absolute; z-index: 3; right: var(--s-4); bottom: var(--s-4);
  padding: 6px 12px; border-radius: 8px;
  background: rgba(11,12,14,.7); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.gal-expand { position: absolute; z-index: 3; right: var(--s-4); top: var(--s-4); }

.gal-thumbs {
  display: flex; gap: var(--s-3);
  margin-top: var(--s-3);
  overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
}
.gal-thumbs::-webkit-scrollbar { display: none; }
.gal-thumb {
  flex: none; width: 104px; aspect-ratio: 3 / 2;
  border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--border-hairline);
  opacity: .5; cursor: pointer; padding: 0; background: none;
  transition: opacity var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumb:hover { opacity: .85; }
.gal-thumb[aria-current="true"] {
  opacity: 1; border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(201,162,75,.22);
}

/* ---------------------------------------------------------------- rail -- */

@media (min-width: 1024px) {
  .rail { position: sticky; top: calc(var(--nav-h) + var(--s-4)); }
}
.rail__card {
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  padding: var(--s-6);
}
.rail__status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--success); margin-bottom: var(--s-3);
}
/* The halo follows the status. It was a fixed green rgba, so a Reserved car had an
   amber dot inside a green glow and a Sold one a grey dot inside the same green. */
.rail__status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}
.rail__status[data-status="Reserved"] { color: var(--warning); }
/* Neutral, like the Sold pill in the console — a sale is not a warning and not an
   error. But --text-secondary, not --text-muted: this is 11px uppercase with wide
   letter-spacing, which is the hardest text on the page to read, and it had the
   dimmest colour on the page. */
.rail__status[data-status="Sold"]     { color: var(--text-secondary); }

.rail__title {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  margin: 0 0 var(--s-2);
}
.rail__trim { color: var(--text-secondary); font-size: 14px; margin: 0 0 var(--s-5); }

.price-big {
  position: relative;
  font-size: 36px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1;
  margin: 0; cursor: copy;
  display: inline-block; overflow: hidden; border-radius: 6px;
  padding: 2px 4px; margin-left: -4px;
  border: 0; background: none; color: inherit; font-family: inherit;
}
.price-big .cur { font-size: .48em; color: var(--accent); margin-right: .4em; font-weight: 600; letter-spacing: .05em; }
.price-note { font-size: 12px; color: var(--text-muted); margin: var(--s-2) 0 var(--s-6); }
.price-note s { color: var(--text-muted); margin-right: 8px; }

.keyspecs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md); overflow: hidden;
  margin-bottom: var(--s-6);
}
.keyspecs > div { background: var(--bg-elevated); padding: var(--s-4); }
.keyspecs dt {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 5px;
}
.keyspecs dd { margin: 0; font-size: 14.5px; font-weight: 500; }

.rail__cta { display: grid; gap: var(--s-3); }

.dealer-card {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-hairline);
  background: rgba(255,255,255,.02);
  display: flex; align-items: center; gap: var(--s-4);
}
.dealer-card img {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; flex: none;
  border: 2px solid var(--accent-line);
}
.dealer-card b { display: block; font-size: 14.5px; }
.dealer-card span { font-size: 12px; color: var(--text-muted); display: block; }
.dealer-card a { margin-left: auto; flex: none; }

/* ---------------------------------------------------------------- tabs -- */

.tabs {
  display: flex; gap: var(--s-2);
  border-bottom: 1px solid var(--border-hairline);
  margin: var(--s-10) 0 var(--s-6);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabbtn {
  position: relative;
  padding: var(--s-4) var(--s-2);
  margin-right: var(--s-5);
  background: none; border: 0;
  color: var(--text-muted);
  font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: color var(--t-base) var(--ease-out);
}
.tabbtn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform 320ms var(--ease-spring);
}
.tabbtn:hover { color: var(--text-secondary); }
.tabbtn[aria-selected="true"] { color: var(--text-primary); font-weight: 600; }
.tabbtn[aria-selected="true"]::after { transform: scaleX(1); }

.tabpanel[hidden] { display: none; }
.tabpanel { animation: panel-in 400ms var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.tabpanel p { color: var(--text-secondary); line-height: 1.75; font-size: 15.5px; max-width: 68ch; }

.spectable {
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md); overflow: hidden;
}
@media (min-width: 640px) { .spectable { grid-template-columns: 1fr 1fr; } }
.spectable > div {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: 13px var(--s-4);
  border-bottom: 1px solid var(--border-hairline);
  font-size: 14px;
}
@media (min-width: 640px) { .spectable > div:nth-child(odd) { border-right: 1px solid var(--border-hairline); } }
.spectable dt { color: var(--text-muted); }
.spectable dd { margin: 0; font-weight: 500; text-align: right; }

.featgroup { margin-bottom: var(--s-8); }
.featgroup h4 {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 var(--s-4);
}
.featlist {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-2) var(--s-6);
}
.featlist li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text-secondary); padding: 5px 0;
}
.featlist li::before {
  content: ""; flex: none; margin-top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-line);
}

.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--s-6); position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 4px; top: 6px; bottom: 12px; width: 1px;
  background: linear-gradient(to bottom, var(--accent-line), transparent);
}
.timeline li { position: relative; padding-bottom: var(--s-6); }
.timeline li::before {
  content: ""; position: absolute; left: calc(var(--s-6) * -1); top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg-canvas); border: 2px solid var(--accent);
}
.timeline time {
  display: block; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px;
}
.timeline b { font-size: 15px; font-weight: 600; }
.timeline span { display: block; font-size: 13.5px; color: var(--text-secondary); }

/* -------------------------------------------------------- similar rail -- */

.carousel-nav { display: flex; gap: var(--s-2); }
#similar .swiper-slide { width: 300px; height: auto; }
#similar .card { height: 100%; }

/* ------------------------------------------------------- preview band -- */

/* Shown only to a signed-in staff member previewing a listing, and deliberately
   loud: this page looks identical whether a customer can reach it or not, and the
   whole reason to open it is to find out which. */
.previewbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: 10px clamp(16px, 4vw, 40px);
  background: var(--accent);
  color: #12100A;
  font-size: 13px;
}
.previewbar b { font-weight: 700; }
.previewbar span { opacity: .85; }
.previewbar a { margin-left: auto; text-decoration: underline; font-weight: 600; }
.previewbar--draft { background: #B45309; color: #fff; }
.previewbar--draft span { opacity: .9; }

/* The nav is fixed at the top, so it would sit under the band without this. */
body.has-previewbar .nav { top: 44px; }

/* ------------------------------------------------------------ lightbox -- */

.lightbox {
  position: fixed; inset: 0; z-index: 130;
  background: radial-gradient(70% 60% at 50% 50%, rgba(8,9,11,.94), #060708 80%);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--t-base) var(--ease-out);
  display: grid; place-items: center;
  /* Belt and braces alongside the [hidden] rule in the base layer: this element
     is still laid out during its own fade-out, and a transparent sheet that is
     merely on its way out still swallows clicks. .modal and .drawer both do the
     same; this one was the odd one out, which is how it became the bug. */
  pointer-events: none;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__swiper { width: 100%; height: 82vh; }
.lightbox__swiper .swiper-slide { display: grid; place-items: center; overflow: hidden; }
.lightbox__swiper img { max-width: 94vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; }
.lightbox__close { position: absolute; top: var(--s-5); right: var(--s-5); z-index: 5; }
.lightbox__hint {
  position: absolute; bottom: var(--s-5); left: 50%; translate: -50% 0;
  font-size: 11.5px; color: var(--text-muted); margin: 0; letter-spacing: .05em;
}
.lightbox .swiper-button-prev,
.lightbox .swiper-button-next { color: var(--text-primary); }
.lightbox .swiper-button-prev::after,
.lightbox .swiper-button-next::after { font-size: 22px; }

.swiper-pagination-bullet-active { background: var(--accent) !important; }

/* =========================================================================
   Quick login floater — "try the dealer console"
   Only rendered when /api/config carries a quickLogin block.
   ========================================================================= */

.ql { position: fixed; inset: auto 0 0 auto; z-index: 140; }

.ql__veil {
  position: fixed; inset: 0;
  background: rgba(6, 7, 8, .5);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.ql.is-open .ql__veil { opacity: 1; }

/* ------------------------------------------------------------------ fab -- */

.ql__fab {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px;
  border: 1px solid rgba(201, 162, 75, .42);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
  color: var(--text-primary);
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.ql__fab:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-4);
}
.ql__fab:active { transform: scale(.97); }

.ql__fabIcon {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
}
.ql__fabIcon svg { width: 15px; height: 15px; }

/* A slow, once-every-9s glint along the border — enough to be noticed by
   someone who has stopped scrolling, not enough to compete with the hero. */
.ql__fab::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, transparent 40%, rgba(201,162,75,.85) 50%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  animation: ql-glint 9s var(--ease-in-out) 3s infinite;
  pointer-events: none;
}
@keyframes ql-glint {
  0%, 88%, 100% { opacity: 0; }
  92%           { opacity: 1; }
}
.ql.is-open .ql__fab::after { animation: none; }

@media (max-width: 480px) {
  .ql__fabLabel { display: none; }
  .ql__fab { padding: 12px; border-radius: 50%; }
}

/* ---------------------------------------------------------------- panel -- */

.ql__panel {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: calc(clamp(16px, 4vw, 28px) + 62px);
  z-index: 3;
  width: min(360px, calc(100vw - 32px));
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-4);
  padding: var(--s-5);
  transform: translateY(10px) scale(.97);
  opacity: 0;
  transform-origin: bottom right;
  transition: transform var(--t-modal) var(--ease-spring),
              opacity var(--t-base) var(--ease-out);
}
.ql.is-open .ql__panel { transform: none; opacity: 1; }

.ql__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-3);
}
.ql__kicker {
  font-size: 10px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 4px;
}
.ql__title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 0;
}
.ql__x {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
  background: rgba(255, 255, 255, .03);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease-out);
}
.ql__x:hover { background: rgba(255, 255, 255, .08); color: var(--text-primary); }
.ql__x svg { width: 13px; height: 13px; }

.ql__note {
  font-size: 13px; line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 var(--s-4);
}

/* --------------------------------------------------------------- account -- */

.ql__card {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-hairline);
  background: rgba(255, 255, 255, .025);
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.ql__card:hover {
  border-color: var(--accent-line);
  background: var(--accent-dim);
}
.ql__card:active { transform: scale(.985); }
.ql__card[aria-busy="true"] { opacity: .7; pointer-events: none; }

.ql__avatar {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--accent-hover), #A8823A 70%);
  color: #12100A;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: -.02em;
}

.ql__who { display: grid; gap: 1px; min-width: 0; flex: 1; }
.ql__who b { font-size: 14px; font-weight: 600; }
.ql__role { font-size: 11.5px; color: var(--text-muted); }
.ql__email {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ql__go {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border-radius: 8px;
  color: var(--accent);
  transition: transform var(--t-base) var(--ease-spring);
}
.ql__go svg { width: 16px; height: 16px; }
.ql__card:hover .ql__go { transform: translateX(3px); }

.ql__warn {
  font-size: 11.5px; line-height: 1.55;
  color: var(--text-muted);
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-hairline);
}

/* On the light admin canvas the panel keeps the showroom's dark register —
   it is the same control in both places and should not change identity. */
body.adm .ql__panel,
body.adm .ql__fab { color: var(--text-primary); }

/* The branch label on the VEHICLE PAGE's main photograph.

   Deliberately the same .card__branch as the showroom's grid cards — the fact should
   look identical wherever a customer meets it, rather than being restyled per screen.
   Only the inset changes: .gal-main's own overlays (.gal-expand, .gal-count) sit at
   --s-4, so this lines up with them instead of the card's tighter --s-3.

   z-index 3 to match them too: Swiper puts its slides in a stacking context and an
   unlayered overlay disappears behind the photograph on the second slide. */
.gal-main .gal-branch {
  bottom: var(--s-4); left: var(--s-4);
  z-index: 3;
}

/* ---------------------------------------------------------- back to top -- */
/* BOTTOM-LEFT, and not as a style choice: bottom-right is taken twice over, by
   .ql__fab here and by .fab in the console on mobile. Stacking above whichever of
   those happens to be rendered would make this button's position depend on whether
   the quick-login demo is switched on. */
.totop {
  position: fixed;
  left: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  z-index: 60;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  cursor: pointer;

  /* The glass. A translucent ground plus a blur of what is behind it, which is what
     makes it read as sitting ON the page rather than in it. The hairline is what
     stops it dissolving into a pale photograph. */
  background: rgba(20, 22, 26, .55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--text-primary);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .34);

  opacity: 0; translate: 0 10px;
  transition: opacity 180ms var(--ease-out), translate 180ms var(--ease-out),
              background 160ms var(--ease-out);
}
.totop.is-in { opacity: 1; translate: 0 0; }
.totop:hover { background: rgba(28, 31, 36, .72); }
.totop svg { width: 19px; height: 19px; }

@media (prefers-reduced-motion: reduce) {
  .totop { transition: opacity 120ms linear; translate: none; }
}