/* ==========================================================================
   Afripart Sourcing — public stylesheet
   Taking you back to the road.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* BRAND FILLS — the droplet gradient. Used where dark text sits on top of
     the colour: buttons, badges, chips, the switch track. */
  --brand-1: #9fc91c;          /* lime, from the logo */
  --brand-2: #e2d500;          /* gold-yellow, from the logo */
  --brand-grad: linear-gradient(140deg, var(--brand-1) 0%, var(--brand-2) 100%);

  /* BRAND INK — a deeper gold for text and hairlines. The bright lime above
     is far too pale to read on white (about 1.6:1), so anything that is
     *text* uses these instead, which clear 4.5:1 on white. */
  --gold:      #8a6f10;
  --gold-soft: #a8861a;
  --gold-grad: linear-gradient(115deg, #6f7d05 0%, #9a7a10 55%, #b3901f 100%);

  --ink:      #ffffff;         /* page background */
  --ink-2:    #f6f7f2;         /* alternating band */
  --surface:  #ffffff;         /* cards and panels */
  --surface-2:#f2f4ec;
  --raised:   #ffffff;

  --line:     rgba(20, 24, 16, .10);
  --line-2:   rgba(20, 24, 16, .17);
  --gold-line: rgba(138, 111, 16, .34);

  --text:     #000000;   /* was #14180f — primary copy is now true black */
  --muted:    #1a1d13;   /* was #33372b, before that #565c4d — ordinary body copy, now near-black */
  --faint:    #201e14;   /* was #404536, #565c4d, #868c78 — labels/placeholders, now near-black */

  --radius:   14px;
  --radius-lg:22px;
  --shadow:      0 16px 40px -18px rgba(20, 24, 16, .22);
  --shadow-lift: 0 26px 58px -22px rgba(20, 24, 16, .30);

  --display: 'Cormorant Garamond', 'Georgia', serif;
  --sans: 'Jost', 'Segoe UI', system-ui, sans-serif;

  --wrap: 1240px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

/* The decorative layers (hero parallax frame, glow, brand marquee) are wider
   than the screen by design. Clipping on BOTH html and body is what actually
   stops the page sliding sideways on a phone — overflow-x on body alone still
   lets the document grow, which is what caused the drift. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  overflow-x: clip;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}
/* Fallback for browsers without overflow: clip */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Explicit color, not just inherited: headings inside a locally-rescoped
   dark section (.hero, .page-head--img, .cta-band) need their OWN var(--text)
   lookup to pick up that section's override — plain inheritance only carries
   the already-resolved value down from <body>, so it would stay dark. */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -.01em; color: var(--text); }
p { margin: 0 0 1rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

::selection { background: var(--brand-2); color: #000; }

/* The grain existed to stop large dark fields banding. On white it only makes
   text look dirty, so it is gone. */

/* --- Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--tight { padding: clamp(44px, 6vw, 72px) 0; }
.grid { display: grid; gap: 28px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.stack > * + * { margin-top: 1rem; }

/* --- Typography helpers --------------------------------------------------- */
.eyebrow {
  font-size: .78rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; margin: 0 0 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
@media (max-width: 520px) { .eyebrow { letter-spacing: .18em; font-size: .70rem; gap: 10px; } }
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--brand-grad); }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ""; width: 34px; height: 2px; background: var(--brand-grad); }

.h-display { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 700; }
.h-1 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 700; }
.h-2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.h-3 { font-size: 1.35rem; }
.lead { font-size: 1.06rem; color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.faint { color: var(--faint); font-size: .92rem; }
.gold { color: var(--gold); }

/* Text accent uses the deep gold ramp, never the pale logo lime — that would
   be unreadable on white. Falls back to a solid gold without background-clip. */
.gradient-text { color: var(--gold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gradient-text {
    background-image: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.center { text-align: center; }
.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px; border-radius: 100px; border: 1px solid var(--line-2);
  background: var(--btn-bg); color: var(--text); cursor: pointer;
  font-size: .86rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  transition: all .38s var(--ease); position: relative; overflow: hidden; white-space: nowrap;
}
.btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(138, 111, 16, .05); transform: translateY(-2px); }
.btn--primary {
  background: var(--brand-grad); color: #14180a; border-color: transparent; font-weight: 600;
  box-shadow: 0 10px 26px -12px rgba(154, 122, 16, .45);
}
.btn--primary:hover { color: #14180a; filter: brightness(1.05); box-shadow: 0 16px 34px -14px rgba(154, 122, 16, .55); background: var(--brand-grad); }
.btn--ghost { background: rgba(20, 24, 16, .03); }
.btn--wa { background: #1faa54; border-color: transparent; color: #fff; box-shadow: 0 10px 24px -14px rgba(31, 170, 84, .55); }
.btn--wa:hover { background: #189146; color: #fff; }

/* The primary buy action gets a soft pulse so it reads as the main move */
.btn--buy { box-shadow: 0 0 0 0 rgba(31, 170, 84, .55); animation: buyPulse 2.8s ease-out infinite; }
.btn--buy:hover { animation-play-state: paused; }
@keyframes buyPulse {
  0%   { box-shadow: 0 0 0 0 rgba(31, 170, 84, .5); }
  70%  { box-shadow: 0 0 0 14px rgba(31, 170, 84, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 170, 84, 0); }
}
.btn--sm { padding: 10px 20px; font-size: .78rem; }
.btn--block { width: 100%; }
.btn--danger { border-color: rgba(255, 110, 110, .4); color: #ff9a9a; }
.btn--danger:hover { border-color: #ff6e6e; color: #ff6e6e; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; color: var(--gold);
  font-size: .84rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
}
.link-arrow span { transition: transform .35s var(--ease); }
.link-arrow:hover span { transform: translateX(6px); }

/* --- Header --------------------------------------------------------------- */
/* The frosted-glass blur lives on ::before, not on .site-header itself.
   A filter/backdrop-filter on an element creates a new containing block for
   any position:fixed descendant (here, the mobile .nav-links drawer) — on
   many mobile browsers that fixed descendant then fails to repaint in the
   right place until a scroll event forces it, so the drawer looked empty
   until you scrolled. Keeping the blur off .site-header itself avoids it. */
.site-header {
  position: sticky; top: 0; z-index: 900;
  border-bottom: 1px solid transparent; transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(18px) saturate(140%);
  transition: background .4s var(--ease);
}
.site-header.scrolled::before { background: rgba(255, 255, 255, .96); }
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 0 var(--line), var(--shadow); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 84px; flex-wrap: nowrap; }
.nav > nav { min-width: 0; }
.brand { display: flex; align-items: center; gap: 13px; flex: none; }
.brand img { height: 44px; width: auto; }
.brand-text { line-height: 1.12; display: block; }
.brand-name {
  display: block; font-family: var(--display); font-size: 1.12rem; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; white-space: nowrap; color: var(--text);
}
.brand-motto {
  display: block; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
}

.nav-links { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  position: relative; padding: 10px 11px; font-size: .80rem; letter-spacing: .08em; font-weight: 500;
  text-transform: uppercase; color: #000; transition: color .3s var(--ease); white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 1px;
  background: var(--brand-grad); transform: scaleX(0); transform-origin: left; transition: transform .38s var(--ease);
}
@media (min-width: 1280px) {
  .nav-links a { padding: 10px 14px; font-size: .84rem; }
  .nav-links a::after { left: 14px; right: 14px; }
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 9px; }
.nav-drawer-foot { display: none; } /* drawer-only; revealed in the mobile block */

/* Header buttons sit beside the links, so they stay noticeably smaller
   than a normal .btn--sm and never compete with the navigation itself. */
.nav-actions .btn {
  padding: 6px 12px; font-size: .62rem; letter-spacing: .07em; gap: 5px; border-radius: 100px;
}
.nav-actions .btn svg { width: 11px; height: 11px; }
@media (min-width: 1280px) {
  .nav-actions .btn { padding: 7px 14px; font-size: .66rem; }
}

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%;
  background: none; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle i { display: block; width: 17px; height: 1px; background: var(--text); transition: .3s var(--ease); }
.nav-toggle.open i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open i:nth-child(2) { opacity: 0; }
.nav-toggle.open i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Dark sections ---------------------------------------------------------
   The hero and the photographic page headers / CTA band stay dark on purpose
   even though the rest of the site is now white — a full-bleed dark panel
   reads as premium and gives the gold accent somewhere to glow; washing a
   photo out to white would lose it entirely.

   Because every component below (eyebrow, buttons, .gradient-text, borders…)
   is built on the shared --text / --gold / --line tokens, and those tokens
   now default to dark-on-white, these three sections re-point them to their
   original light-on-dark values. Everything nested inside just works without
   being touched individually — this is the one place that override lives. */
.hero, .page-head--img, .cta-band, .site-footer, .marquee {
  --text:      #ffffff;  /* was #eef0ea — true white on these dark sections */
  --muted:     #e4e7dc;  /* was #b9bfb2 — brighter, closer to white */
  --faint:     #a8ae9c;  /* was #8b9184 */
  --gold:      #e2d500;
  --gold-soft: #f0e670;
  --gold-grad: linear-gradient(115deg, #9fc91c 0%, #e2d500 100%);
  --line:      rgba(255, 255, 255, .14);
  --line-2:    rgba(255, 255, 255, .22);
}

/* --- Hero ------------------------------------------------------------------ */
.hero { position: relative; min-height: min(66vh, 620px); display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 18% 45%, rgba(10, 12, 10, .92) 0%, rgba(10, 12, 10, .55) 55%, transparent 100%),
    linear-gradient(to top, var(--ink) 4%, rgba(10, 12, 10, .35) 55%, rgba(10, 12, 10, .8) 100%);
}

/* --- Hero slideshow ------------------------------------------------------- */
/* Each frame cross-fades, drifts (Ken Burns) and responds to the pointer.     */
.hero-slider {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--ink);
  perspective: 1200px;
}
.hero-parallax {
  position: absolute; inset: -5%;
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--sy, 0px)), 0) scale(1.05);
  transition: transform .9s cubic-bezier(.16, .8, .3, 1);
  will-change: transform;
}
.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.4s var(--ease);
  will-change: opacity;
}
.hero-slide.active { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover; opacity: .72;
  transform-origin: var(--kb-origin, 50% 50%);
}
/* Alternating drift directions so consecutive frames never feel identical */
.hero-slide.active img { animation: kenburnsIn 9s cubic-bezier(.22,.61,.36,1) forwards; }
.hero-slide:nth-child(even).active img { animation-name: kenburnsOut; }
.hero-slide:nth-child(3n).active img   { animation-name: kenburnsPan; }
@keyframes kenburnsIn  { from { transform: scale(1.02) rotate(0deg); }        to { transform: scale(1.17) rotate(.4deg); } }
@keyframes kenburnsOut { from { transform: scale(1.18) translateX(1.5%); }    to { transform: scale(1.03) translateX(-1%); } }
@keyframes kenburnsPan { from { transform: scale(1.12) translate(-2%, 1%); }  to { transform: scale(1.12) translate(2%, -1%); } }

/* Depth + readability wash */
/* Dark enough on the left for the copy to read, clear on the right so the
   vehicle is actually the hero. */
.hero-slider::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(100deg, rgba(8, 10, 8, .94) 0%, rgba(8, 10, 8, .82) 34%, rgba(8, 10, 8, .34) 62%, rgba(8, 10, 8, .12) 100%),
    linear-gradient(to top, var(--ink) 2%, rgba(10, 12, 10, .1) 42%, rgba(10, 12, 10, .55) 100%);
}

/* Slow-breathing aurora of brand light behind the copy */
.hero-aurora { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-aurora span {
  position: absolute; border-radius: 50%; filter: blur(80px);
  will-change: transform;
}
.hero-aurora span:nth-child(1) {
  width: 42vw; height: 42vw; top: -16%; right: -10%;
  background: radial-gradient(circle, rgba(226, 213, 0, .085), transparent 70%);
  animation: drift1 22s ease-in-out infinite alternate;
}
.hero-aurora span:nth-child(2) {
  width: 34vw; height: 34vw; bottom: -20%; left: 0%;
  background: radial-gradient(circle, rgba(159, 201, 28, .07), transparent 70%);
  animation: drift2 28s ease-in-out infinite alternate;
}
.hero-aurora span:nth-child(3) {
  width: 24vw; height: 24vw; top: 28%; left: 46%;
  background: radial-gradient(circle, rgba(226, 213, 0, .045), transparent 72%);
  animation: drift3 19s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(-8vw, 6vh) scale(1.2); } }
@keyframes drift2 { to { transform: translate(7vw, -5vh) scale(1.15); } }
@keyframes drift3 { to { transform: translate(-5vw, -7vh) scale(.85); } }

/* Horizon hairline that sweeps a highlight across the hero */
.hero-sweep {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 3; overflow: hidden;
  background: linear-gradient(to right, transparent, var(--gold-line), transparent);
}
.hero-sweep::after {
  content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 100%;
  background: linear-gradient(to right, transparent, var(--brand-2), transparent);
  animation: sweep 6s var(--ease) infinite;
}
@keyframes sweep { 0% { left: -30%; } 60%, 100% { left: 110%; } }

/* Thin vertical light beams for depth */
.hero-beams { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-beams i {
  position: absolute; top: -20%; width: 1px; height: 140%;
  background: linear-gradient(to bottom, transparent, rgba(226, 213, 0, .16), transparent);
  animation: beam 9s ease-in-out infinite;
}
.hero-beams i:nth-child(1) { left: 16%; animation-delay: 0s; }
.hero-beams i:nth-child(2) { left: 41%; animation-delay: 2.4s; }
.hero-beams i:nth-child(3) { left: 68%; animation-delay: 4.1s; }
.hero-beams i:nth-child(4) { left: 87%; animation-delay: 6.3s; }
@keyframes beam {
  0%, 100% { opacity: 0; transform: translateY(-12%) scaleY(.7); }
  50%      { opacity: 1; transform: translateY(0) scaleY(1); }
}
/* Brand caption for the frame currently showing */
.hero-caption {
  position: absolute; right: 100px; bottom: 30px; z-index: 4; text-align: right;
  font-size: .70rem; letter-spacing: .26em; text-transform: uppercase; color: var(--faint);
  transition: opacity .5s var(--ease); max-width: 40vw;
}
@media (max-width: 1240px) { .hero-caption { display: none; } }
.hero-caption strong { display: block; font-size: .84rem; color: var(--brand-2); letter-spacing: .2em; font-weight: 500; }

/* Slide indicators */
.hero-dots { position: absolute; left: 24px; bottom: 30px; z-index: 4; display: flex; gap: 9px; }
.hero-dot {
  width: 30px; height: 3px; border: 0; padding: 0; border-radius: 3px; cursor: pointer;
  background: rgba(255, 255, 255, .2); position: relative; overflow: hidden; transition: background .3s var(--ease);
}
.hero-dot:hover { background: rgba(255, 255, 255, .38); }
.hero-dot::after {
  content: ""; position: absolute; inset: 0; background: var(--brand-grad);
  transform: scaleX(0); transform-origin: left;
}
.hero-dot.active::after { animation: dotFill 6s linear forwards; }
@keyframes dotFill { to { transform: scaleX(1); } }

/* Staggered entrance for the hero copy.
   The resting state is *visible*: the hidden state lives only inside the
   keyframes, applied via animation-fill-mode: both. If animations never run
   — JS off, reduced motion, an old browser — the copy simply shows. Motion
   must never be the thing standing between a visitor and the content. */
.hero-inner { transform: translateY(var(--scrollY, 0)); }
.hero-inner > * { animation: heroRise .95s cubic-bezier(.16, .8, .3, 1) both; }
.hero-inner > *:nth-child(1) { animation-delay: .08s; }
.hero-inner > *:nth-child(2) { animation-delay: .18s; }
.hero-inner > *:nth-child(3) { animation-delay: .62s; }
.hero-inner > *:nth-child(4) { animation-delay: .74s; }
.hero-inner > *:nth-child(5) { animation-delay: .86s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(34px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Word-by-word reveal: each word rises out of its own clipped line */
.hero h1 .wm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.hero h1 .w {
  display: inline-block;
  animation: wordRise 1.05s cubic-bezier(.16, .84, .28, 1) both;
}
@keyframes wordRise {
  from { opacity: 0; transform: translateY(105%) rotate(4deg); }
  to   { opacity: 1; transform: none; }
}

/* NOTE: an animated background-clip:text "shine" across the whole headline was
   tried here and dropped. Over a multi-line heading made of inline-block words
   it left most of the text unpainted — an invisible headline. The gradient
   accent is applied to a single short phrase instead (.gradient-text), which
   paints reliably, and the motion is carried by the per-word reveal below. */

/* Light sweep across the eyebrow rule instead — cheap and safe */
.hero .eyebrow::before { position: relative; overflow: hidden; }

/* Hero CTA buttons get a light sweep on hover */
.hero-cta .btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-120%);
}
.hero-cta .btn:hover::after { animation: btnSweep .85s var(--ease); }
@keyframes btnSweep { to { transform: translateX(120%); } }

/* Stats count in behind a rising hairline */
.hero-stats { position: relative; }
.hero-stats::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
  background: var(--brand-grad); animation: ruleGrow 1.4s var(--ease) 1.3s forwards;
}
@keyframes ruleGrow { to { width: 100%; } }

/* --- Brand marquee ---------------------------------------------------------
   A solid black band between the hero and the light content below, echoing
   the footer — the ticker of makes we source reads as a confident, premium
   strip rather than blending into the white page. */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: #0a0c08; padding: 22px 0; }
.marquee-track { display: flex; gap: 64px; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span {
  font-family: var(--display); font-size: 1.5rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); white-space: nowrap; transition: color .3s var(--ease);
}
.marquee span:hover { color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Testimonials — Trustpilot-style widget: a fixed rating summary on the
   left, a horizontally-scrolling row of cards on the right (scroll-snap,
   so it works by touch/drag with no JS required — the arrow buttons just
   nudge scrollLeft by one card). Each card is a <button> so the whole
   thing is keyboard-operable and opens the full review in a modal. */
.review-widget { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center; }
.review-summary { text-align: center; }
.review-summary-word { font-family: var(--display); font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.review-summary-score { display: flex; align-items: center; justify-content: center; gap: 12px; }
.review-summary-number { font-family: var(--display); font-size: 2.6rem; color: var(--gold); line-height: 1; }

.review-carousel { display: flex; align-items: center; gap: 10px; }
.review-nav {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer;
  transition: all .25s var(--ease);
}
.review-nav svg { width: 16px; height: 16px; }
.review-nav:hover { border-color: var(--gold); color: var(--gold); }

.review-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 4px 2px 14px;
}
.review-track::-webkit-scrollbar { display: none; }
.review-card {
  scroll-snap-align: start; flex: none; width: min(80vw, 300px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.review-card:hover { border-color: var(--gold-line); box-shadow: var(--shadow); transform: translateY(-4px); }
.review-card p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.hero-glow {
  position: absolute; z-index: 0; width: 620px; height: 620px; right: -140px; top: -120px;
  background: radial-gradient(circle, rgba(200, 210, 20, .14) 0%, transparent 65%); filter: blur(30px);
}
.hero-inner { position: relative; z-index: 2; padding: 72px 0 56px; max-width: 760px; }
.hero h1 { margin-bottom: 24px; }
.hero h1 em { font-style: italic; }
.hero .lead { font-size: clamp(1rem, 1.6vw, 1.18rem); margin-bottom: 38px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 56px; }

.hero-stats { display: flex; flex-wrap: wrap; gap: 48px; padding-top: 34px; border-top: 1px solid var(--line); }
.hero-stat .n {
  font-family: var(--display); font-size: 2.3rem; line-height: 1; color: var(--text);
  /* Cormorant's default figures read oddly at this size; force lining numerals. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.hero-stat .l { font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin-top: 8px; }

/* Sits in the right gutter so it can never land on top of the stats row */
.scroll-hint {
  position: absolute; bottom: 30px; left: 24px; z-index: 3;
  font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--faint);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
@media (max-width: 1100px) { .scroll-hint { display: none; } }
.scroll-hint::after {
  content: ""; width: 1px; height: 46px; background: linear-gradient(to bottom, var(--brand-2), transparent);
  animation: scrollPulse 2.4s var(--ease) infinite;
}
@keyframes scrollPulse { 0%, 100% { opacity: .3; transform: scaleY(.5); } 50% { opacity: 1; transform: scaleY(1); } }

/* --- Service pillars ------------------------------------------------------ */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.pillar { background: var(--surface); padding: 44px 32px; transition: background .4s var(--ease); position: relative; }
.pillar:hover { background: var(--ink-2); }
.pillar .ico { width: 34px; height: 34px; color: var(--gold); margin-bottom: 22px; }
.pillar h3 { font-size: 1.28rem; margin-bottom: 10px; font-weight: 700; }
.pillar p { font-size: .9rem; color: var(--muted); margin: 0 0 16px; }

/* --- Colourful icon boxes --------------------------------------------------
   A rounded, tinted box behind a lead icon, used anywhere a card/step opens
   with a bare glyph. Six accents cycle round so a grid of cards never reads
   as a monotone wall of gold. Accent 1 is the brand gradient itself, so nothing
   ever feels disconnected from the rest of the palette. */
.icon-box {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px; box-shadow: 0 8px 20px -10px rgba(20, 24, 16, .35);
}
.icon-box svg { width: 24px; height: 24px; }
.icon-accent-1 { background: var(--brand-grad); color: #12160a; }
.icon-accent-2 { background: linear-gradient(135deg, #5fc2ea, #1f7fc4); color: #fff; }
.icon-accent-3 { background: linear-gradient(135deg, #ffab6b, #e8622c); color: #fff; }
.icon-accent-4 { background: linear-gradient(135deg, #bd8bf2, #7c3fd4); color: #fff; }
.icon-accent-5 { background: linear-gradient(135deg, #ff8fb3, #e0417a); color: #fff; }
.icon-accent-6 { background: linear-gradient(135deg, #5fe0bb, #14a37e); color: #fff; }
.icon-box.round { border-radius: 50%; }
.icon-box.sm { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 0; }
.icon-box.sm svg { width: 18px; height: 18px; }
.icon-box.center { margin-inline: auto; }

/* A coloured top rule for any panel carrying an icon-box, same six accents,
   same idea as the .choice cards in the shipping wizard — a card "holding
   information" gets a colour top-to-bottom, not just a coloured glyph. */
.panel[class*="panel-accent-"], .pillar[class*="panel-accent-"] { position: relative; overflow: hidden; }
[class*="panel-accent-"]::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.panel-accent-1::before { background: var(--brand-grad); }
.panel-accent-2::before { background: linear-gradient(90deg, #5fc2ea, #1f7fc4); }
.panel-accent-3::before { background: linear-gradient(90deg, #ffab6b, #e8622c); }
.panel-accent-4::before { background: linear-gradient(90deg, #bd8bf2, #7c3fd4); }
.panel-accent-5::before { background: linear-gradient(90deg, #ff8fb3, #e0417a); }
.panel-accent-6::before { background: linear-gradient(90deg, #5fe0bb, #14a37e); }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  display: flex; flex-direction: column; position: relative;
}
.card:hover { transform: translateY(-8px); border-color: var(--gold-line); box-shadow: var(--shadow-lift); }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.card:hover .card-media img { transform: scale(1.07); }
.card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 12, 10, .85) 0%, transparent 48%);
}
.card-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card-title { font-size: 1.28rem; line-height: 1.25; }
.card-title a:hover { color: var(--gold); }
.card-price { font-family: var(--display); font-size: 1.5rem; color: var(--gold); letter-spacing: .01em; }
.card-foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* Buy row pinned under the card footer */
.card-buy {
  display: flex; gap: 8px; padding: 14px 24px 20px; margin-top: -4px;
}
.card-buy .btn { flex: 1; padding-inline: 12px; }
.card-buy .btn--wa { flex: 2; }

/* Part artwork tiles are drawings, not photos — let them breathe */
.card-media img[src$=".svg"] { object-fit: contain; padding: 0; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 100px;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  border: 1px solid var(--line-2); color: var(--muted); background: rgba(10, 12, 10, .6);
  backdrop-filter: blur(6px);
}
.badge--brand { background: var(--brand-grad); color: #0a0c0a; border-color: transparent; font-weight: 600; }
.badge--sold { background: rgba(200, 40, 40, .9); color: #fff; border-color: transparent; }
.badge--reserved { background: rgba(230, 150, 20, .92); color: #1a1200; border-color: transparent; }
.badge--stock { color: #5f7a0a; border-color: rgba(95, 122, 10, .35); background: rgba(95, 122, 10, .06); }
.badge--out { color: #ff9a9a; border-color: rgba(255, 110, 110, .35); }
.card-tags { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 28px); }

/* Spec strip inside a card */
.spec-row { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .84rem; color: var(--muted); }
.spec-row span { display: inline-flex; align-items: center; gap: 6px; }
.spec-row svg { width: 14px; height: 14px; opacity: .7; }

/* Meta (views / likes) */
.meta { display: flex; align-items: center; gap: 16px; font-size: .80rem; color: var(--faint); }
.meta span { display: inline-flex; align-items: center; gap: 6px; }
.meta svg { width: 14px; height: 14px; }

/* --- Stars ---------------------------------------------------------------- */
.stars { display: inline-flex; gap: 3px; vertical-align: middle; }
.star {
  width: 13px; height: 13px; display: block; background: var(--line-2);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star.on { background: var(--gold-soft); }
.star.half { background: linear-gradient(90deg, var(--gold-soft) 50%, var(--line-2) 50%); }
.stars-count { font-size: .80rem; color: var(--faint); margin-left: 8px; }

/* Interactive rating widget */
.rate { display: flex; align-items: center; gap: 6px; }
.rate button {
  background: none; border: 0; padding: 2px; cursor: pointer; line-height: 0;
  transition: transform .2s var(--ease);
}
.rate button:hover { transform: scale(1.25); }
.rate .star { width: 20px; height: 20px; }

/* Star-picker for the review form — radio inputs in reverse DOM order,
   displayed left-to-right via row-reverse, so a pure-CSS sibling selector
   can light up every star up to the hovered/checked one. */
.star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { cursor: pointer; padding: 2px; }
.star-input label .star { width: 32px; height: 32px; transition: background .15s var(--ease); }
.star-input label:hover .star,
.star-input label:hover ~ label .star,
.star-input input:checked ~ label .star { background: var(--gold-soft); }

/* --- Like button ---------------------------------------------------------- */
.like-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--line-2); background: rgba(20, 24, 16, .025); cursor: pointer;
  font-size: .82rem; letter-spacing: .08em; transition: all .3s var(--ease);
}
.like-btn svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.like-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(138, 111, 16, .05); }
.like-btn.liked { border-color: #ff5f7a; color: #ff5f7a; background: rgba(255, 95, 122, .08); }
.like-btn.liked svg { fill: #ff5f7a; }
.like-btn.pop svg { animation: pop .42s var(--ease); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* --- Filters -------------------------------------------------------------- */
.filters {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; margin-bottom: 44px;
}
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; align-items: end; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.input, .select, .textarea {
  width: 100%; padding: 13px 16px; background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 10px; color: var(--text); font-size: .98rem; font-weight: 400;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--gold); background: var(--ink);
  box-shadow: 0 0 0 3px rgba(138, 111, 16, .1);
}
.textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23565c4d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
.select option { background: var(--ink-2); }
::placeholder { color: var(--faint); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 16px; border-radius: 100px; border: 1px solid var(--line-2); font-size: .80rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: pointer;
  transition: all .3s var(--ease); background: none;
}
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip.active { background: var(--brand-grad); color: #0a0c0a; border-color: transparent; font-weight: 500; }

.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }

/* --- Booking wizard ------------------------------------------------------- */
.wizard { position: relative; }

/* Progress rail — deliberately more colourful than a typical grey stepper:
   every node carries a brand tint even before it is reached, the rail is a
   soft permanent gradient rather than flat grey, and each state (pending /
   active / done) has a distinct, saturated look rather than shades of grey. */
.wiz-steps {
  display: flex; gap: 0; margin-bottom: 34px; counter-reset: wiz; list-style: none; padding: 0;
}
.wiz-steps li {
  flex: 1; position: relative; padding-top: 34px; text-align: center;
  font-size: .70rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft);
  transition: color .4s var(--ease);
}
.wiz-steps li::before { /* the connecting rail — always a soft brand gradient */
  content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, rgba(159, 201, 28, .3), rgba(226, 213, 0, .3));
  border-radius: 2px;
}
.wiz-steps li:first-child::before { left: 50%; }
.wiz-steps li:last-child::before { right: 50%; }
.wiz-steps li::after { /* the node */
  counter-increment: wiz; content: counter(wiz);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(159, 201, 28, .1); border: 1.5px solid rgba(154, 122, 16, .4); color: var(--gold);
  font-size: .76rem; font-weight: 600; transition: all .4s var(--ease); z-index: 1;
}
.wiz-steps li.active { color: var(--gold); }
.wiz-steps li.active::before { background: var(--brand-grad); }
.wiz-steps li.active::after {
  background: var(--brand-grad); border-color: transparent; color: #14180a; font-weight: 700;
  box-shadow: 0 0 0 6px rgba(226, 213, 0, .18), 0 6px 16px -6px rgba(154, 122, 16, .5);
  transform: translateX(-50%) scale(1.08);
}
.wiz-steps li.done { color: #5f7a0a; }
.wiz-steps li.done::before { background: linear-gradient(to right, #9fc91c, rgba(159, 201, 28, .3)); }
.wiz-steps li.done::after {
  /* Both layers in ONE declaration: the tick icon paints on top of the green
     fill. Two separate `background`/`background-image` declarations would
     have the second silently replace the first's gradient with the icon
     alone, leaving the node see-through except for the tick. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%2314180a' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(140deg, #9fc91c, #7ba310);
  background-size: 15px, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  border-color: transparent; color: #14180a;
  box-shadow: 0 4px 12px -4px rgba(95, 122, 10, .5);
  content: "";
}

/* Panels */
.wiz-panel { display: none; animation: wizIn .45s var(--ease); }
.wiz-panel.active { display: block; }
@keyframes wizIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.wiz-panel > h3 { font-size: 1.45rem; margin-bottom: 6px; }
.wiz-panel > .hint { color: var(--muted); font-size: .92rem; margin-bottom: 26px; }

.wiz-nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.wiz-nav .spacer { flex: 1; }

/* Choice cards (radio buttons that look like tiles) — 3 options, so 3 even
   columns rather than 2, which would leave the third card orphaned on its
   own row. Each carries its own accent colour (icon chip + top rule) so the
   row reads as three distinct choices rather than one plain repeated card. */
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .choice-grid { grid-template-columns: 1fr 1fr; } }
.choice {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 18px; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface); cursor: pointer; transition: all .3s var(--ease);
  overflow: hidden;
}
.choice::before { /* coloured top rule, one per card */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent, var(--brand-grad));
}
.choice:nth-child(1) { --accent: linear-gradient(90deg, #9fc91c, #c7dd3a); }
.choice:nth-child(2) { --accent: linear-gradient(90deg, #e2d500, #f0e670); }
.choice:nth-child(3) { --accent: linear-gradient(90deg, #1faa54, #5fce8a); }
.choice:hover { border-color: var(--gold-line); box-shadow: var(--shadow); transform: translateY(-2px); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .ic {
  flex: none; margin-top: 2px; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; background: var(--accent, var(--brand-grad)); color: #14180a;
}
.choice .ic svg { width: 20px; height: 20px; }
.choice .tx b { display: block; font-weight: 700; font-size: 1rem; margin-bottom: 3px; }
.choice .tx span { font-size: .86rem; color: var(--muted); line-height: 1.5; }
.choice input:checked ~ .tx b { color: var(--gold); }
.choice:has(input:checked) {
  border-color: var(--gold); background: rgba(138, 111, 16, .05);
  box-shadow: 0 0 0 3px rgba(138, 111, 16, .1);
}
/* Fallback for browsers without :has() */
.choice.is-checked {
  border-color: var(--gold); background: rgba(138, 111, 16, .05);
  box-shadow: 0 0 0 3px rgba(138, 111, 16, .1);
}

/* Yes/no toggles inside the wizard */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.toggle-row:last-child { border-bottom: 0; }
.toggle-row .tx b { display: block; font-weight: 400; margin-bottom: 2px; }
.toggle-row .tx span { font-size: .84rem; color: var(--muted); }

/* Review list on the final step */
.review { list-style: none; margin: 0 0 22px; padding: 0; }
.review li {
  display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--line); font-size: .9rem;
}
.review li:last-child { border-bottom: 0; }
.review .k { color: var(--faint); }
.review .v { text-align: right; color: var(--text); }
.review .v:empty::after { content: "—"; color: var(--faint); }

/* Success panel */
.wiz-done { text-align: center; padding: 30px 10px; }
.wiz-done .tick {
  width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--brand-grad); display: grid; place-items: center; color: #0a0c0a;
  animation: tickPop .5s var(--ease);
}
.wiz-done .tick svg { width: 32px; height: 32px; }
@keyframes tickPop { from { transform: scale(.5); opacity: 0; } }
.wiz-ref {
  display: inline-block; margin: 16px 0 22px; padding: 12px 26px; border-radius: 10px;
  border: 1px dashed var(--gold-line); background: rgba(138, 111, 16, .06);
  font-family: var(--display); font-size: 1.6rem; color: var(--gold); letter-spacing: .08em;
}

@media (max-width: 640px) {
  .choice-grid { grid-template-columns: 1fr; }
  .wiz-steps li { font-size: 0; padding-top: 30px; }
  .wiz-steps li.active { font-size: .68rem; }
}

/* --- Listing detail ------------------------------------------------------- */
.detail-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 48px; align-items: start; }
/* align-items:start means a shorter side column just sits at the top of the
   row, leaving dead space below it whenever the other column runs longer.
   Pin it near the header instead, same idea as .buy-panel, so it travels
   with the scroll rather than stranding empty space under it. */
.detail-grid > aside { position: sticky; top: 108px; }
.gallery-main {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10;
  background: var(--ink-2); border: 1px solid var(--line);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.gallery-thumb {
  aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); opacity: .55; transition: all .3s var(--ease); background: none; padding: 0;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover, .gallery-thumb.active { opacity: 1; border-color: var(--gold); }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  background: rgba(10, 12, 10, .68); border: 1px solid var(--line-2); backdrop-filter: blur(8px);
  display: grid; place-items: center; cursor: pointer; transition: all .3s var(--ease); z-index: 2;
}
.gallery-nav:hover { background: var(--brand-grad); color: #0a0c0a; border-color: transparent; }
.gallery-nav.prev { left: 16px; } .gallery-nav.next { right: 16px; }

.buy-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px; position: sticky; top: 108px;
}
.buy-price { font-family: var(--display); font-size: 2.5rem; color: var(--gold); line-height: 1; margin: 6px 0 4px; }

.spec-table { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.spec-cell { background: var(--surface); padding: 18px 20px; }
.spec-cell .k { font-size: .70rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.spec-cell .v { font-size: .98rem; color: var(--text); }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.feature-list li { display: flex; align-items: flex-start; gap: 11px; font-size: .92rem; color: var(--muted); }
.feature-list li::before {
  content: ""; flex: none; width: 17px; height: 17px; margin-top: 4px; border-radius: 50%;
  background: var(--brand-grad); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.feature-list--risk li::before {
  background: linear-gradient(135deg, #ff6e6e, #ff9a9a);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* --- Panels / prose ------------------------------------------------------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); }
.panel--flat { background: none; }
.prose { color: var(--text); font-size: 1.08rem; font-weight: 400; line-height: 1.85; }
.prose h2, .prose h3 { color: #000; font-weight: 700; margin: 2.2rem 0 .9rem; }
.prose h2 { font-size: 1.8rem; } .prose h3 { font-size: 1.35rem; }
.prose a { color: var(--gold); border-bottom: 1px solid var(--gold-line); }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: .5rem; }
.prose img { border-radius: var(--radius); margin: 1.6rem 0; }
.prose blockquote {
  margin: 1.8rem 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--gold);
  font-family: var(--display); font-size: 1.3rem; font-style: italic; color: var(--text);
}

/* --- Steps ---------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: step; }
.step { position: relative; padding-top: 30px; border-top: 1px solid var(--line); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--display); font-size: 2.6rem; color: var(--gold);
  display: block; line-height: 1; margin-bottom: 14px; opacity: .85;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .step::before {
    color: transparent; background: var(--brand-grad);
    -webkit-background-clip: text; background-clip: text;
  }
}
.step .icon-box { margin: 4px 0 14px; }
.step h3 { font-size: 1.18rem; margin-bottom: 8px; }
.step p { font-size: .92rem; color: var(--muted); margin: 0; }

/* --- Page header (inner pages) -------------------------------------------- */
.page-head { position: relative; padding: clamp(76px, 10vw, 128px) 0 clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--line); overflow: hidden; }
.page-head::before {
  content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -220px;
  background: radial-gradient(circle, rgba(200, 210, 20, .11) 0%, transparent 65%); filter: blur(24px);
}
.page-head .wrap { position: relative; z-index: 2; }

/* Photographic variant: image behind, slow drift, readable wash on top */
.page-head--img { padding-top: clamp(96px, 12vw, 168px); padding-bottom: clamp(56px, 7vw, 88px); }
.page-head-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.page-head-bg img {
  width: 100%; height: 100%; object-fit: cover; opacity: .5;
  animation: headDrift 26s ease-in-out infinite alternate;
}
@keyframes headDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}
.page-head-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8, 10, 8, .95) 0%, rgba(8, 10, 8, .84) 38%, rgba(8, 10, 8, .42) 72%, rgba(8, 10, 8, .2) 100%),
    linear-gradient(to top, var(--ink) 2%, rgba(10, 12, 10, .2) 45%, rgba(10, 12, 10, .6) 100%);
}
.page-head--img .lead { color: #c3c9bb; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 20px; }
.crumbs a:hover { color: var(--gold); }
.crumbs span { opacity: .4; }

/* --- Prominent phone numbers (contact page) --------------------------------
   Ordinary body-size text is too easy to miss for the one thing a lot of
   visitors came for: the number to call. This is deliberately large. */
.call-strip {
  display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px) clamp(24px, 4vw, 40px);
}
.call-strip-numbers { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); }
.call-strip-numbers .lbl {
  display: block; font-size: .70rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px;
}
.big-number {
  font-family: var(--display); font-weight: 600; color: var(--gold); line-height: 1;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: .01em; transition: color .25s var(--ease);
}
.big-number:hover { color: var(--gold-soft); }
.big-number.sm { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

/* --- Alerts --------------------------------------------------------------- */
.alert { padding: 15px 20px; border-radius: 12px; font-size: .92rem; border: 1px solid; margin-bottom: 22px; display: flex; gap: 12px; align-items: flex-start; }
.alert--success { background: rgba(159, 201, 28, .09); border-color: rgba(159, 201, 28, .35); color: #cfe66f; }
.alert--error { background: rgba(255, 90, 90, .08); border-color: rgba(255, 90, 90, .32); color: #ffaaaa; }
.alert--info { background: rgba(20, 24, 16, .03); border-color: var(--line-2); color: var(--muted); }

/* --- Empty state ---------------------------------------------------------- */
.empty { text-align: center; padding: 80px 24px; border: 1px dashed var(--line-2); border-radius: var(--radius-lg); color: var(--muted); }
.empty h3 { margin-bottom: 10px; color: var(--text); }

/* --- Pagination ----------------------------------------------------------- */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 56px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 44px; height: 44px; display: grid; place-items: center; padding-inline: 14px;
  border: 1px solid var(--line); border-radius: 10px; font-size: .90rem; color: var(--muted); transition: all .3s var(--ease);
}
.pagination a:hover { border-color: var(--gold); color: var(--gold); }
.pagination .current { background: var(--brand-grad); color: #0a0c0a; border-color: transparent; font-weight: 600; }

/* --- Message centre ------------------------------------------------------- */
.chat-shell { display: grid; grid-template-columns: 320px 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); min-height: 620px; }
.chat-side { border-right: 1px solid var(--line); background: var(--ink-2); display: flex; flex-direction: column; }
.chat-side-head { padding: 22px; border-bottom: 1px solid var(--line); }
.chat-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.chat-list li a { display: block; padding: 17px 22px; border-bottom: 1px solid var(--line); transition: background .25s var(--ease); }
.chat-list li a:hover { background: rgba(20, 24, 16, .03); }
.chat-list li a.active { background: rgba(138, 111, 16, .08); border-left: 2px solid var(--gold); }
.chat-list .t { font-size: .92rem; color: var(--text); margin-bottom: 3px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.chat-list .p { font-size: .84rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-main { display: flex; flex-direction: column; min-height: 0; }
.chat-head { padding: 20px 26px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.chat-body { flex: 1; overflow-y: auto; padding: 26px; display: flex; flex-direction: column; gap: 14px; max-height: 520px; scroll-behavior: smooth; }
.bubble { max-width: 74%; padding: 13px 18px; border-radius: 16px; font-size: .94rem; line-height: 1.6; position: relative; word-wrap: break-word; }
.bubble .time { display: block; font-size: .74rem; color: var(--faint); margin-top: 7px; letter-spacing: .06em; }
.bubble--them { background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.bubble--me { background: var(--brand-grad); color: #0a0c0a; border-bottom-right-radius: 4px; align-self: flex-end; }
.bubble--me .time { color: rgba(10, 12, 10, .6); }
.chat-day { text-align: center; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin: 8px 0; }
.chat-compose { padding: 18px 26px; border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-end; background: var(--ink-2); }
.chat-compose .textarea { min-height: 52px; max-height: 150px; border-radius: 14px; }
.chat-send {
  flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--brand-grad);
  color: #0a0c0a; display: grid; place-items: center; cursor: pointer; transition: all .3s var(--ease);
}
.chat-send:hover { transform: scale(1.06) rotate(8deg); }
.chat-empty { flex: 1; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 40px; }

/* Code input for email verification */
.code-input { display: flex; gap: 10px; justify-content: center; }
.code-input input {
  width: 54px; height: 62px; text-align: center; font-size: 1.5rem; font-family: var(--display);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; color: var(--gold);
}
.code-input input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(138, 111, 16, .12); }

.auth-card { max-width: 480px; margin: 0 auto; }

/* --- Floating actions ----------------------------------------------------- */
.float-stack { position: fixed; right: 22px; bottom: 22px; z-index: 950; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.fab {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
  box-shadow: var(--shadow); cursor: pointer; transition: all .35s var(--ease); position: relative;
}
.fab:hover { transform: translateY(-4px) scale(1.05); }
.fab--wa { background: #1faa54; border-color: transparent; color: #fff; }
.fab--wa::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #1faa54;
  animation: ring 2.6s var(--ease) infinite; pointer-events: none;
}
@keyframes ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.45); opacity: 0; } }
.fab svg { width: 24px; height: 24px; }
.fab-label {
  position: absolute; right: 68px; top: 50%; transform: translateY(-50%) translateX(8px);
  background: var(--raised); border: 1px solid var(--line); padding: 7px 14px; border-radius: 8px;
  font-size: .78rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: all .3s var(--ease);
}
.fab:hover .fab-label { opacity: 1; transform: translateY(-50%) translateX(0); }

/* --- Modal ---------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.modal.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 4, .82); backdrop-filter: blur(6px); }
.modal-card {
  position: relative; max-width: 540px; margin: 7vh auto; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 34px;
  max-height: 86vh; overflow-y: auto; box-shadow: var(--shadow-lift);
  animation: modalIn .38s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.modal-close {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: none; cursor: pointer; color: var(--muted); font-size: 1.1rem;
  transition: all .3s var(--ease);
}
.modal-close:hover { color: var(--gold); border-color: var(--gold); transform: rotate(90deg); }

/* --- Toast ---------------------------------------------------------------- */
.toast-wrap { position: fixed; top: 100px; right: 22px; z-index: 1100; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--raised); border: 1px solid var(--line-2); border-left: 3px solid var(--gold);
  padding: 14px 20px; border-radius: 10px; font-size: .92rem; box-shadow: var(--shadow);
  animation: toastIn .4s var(--ease); max-width: 340px;
}
.toast.err { border-left-color: #ff6e6e; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } }

/* --- CTA band ------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; border-block: 1px solid var(--line); }
.cta-bg { position: absolute; inset: 0; z-index: 0; }
.cta-bg img {
  width: 100%; height: 100%; object-fit: cover; opacity: .3;
  animation: headDrift 30s ease-in-out infinite alternate;
}
.cta-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(10, 12, 10, .9), rgba(10, 12, 10, .74), rgba(10, 12, 10, .9));
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(60% 120% at 50% 0%, rgba(200, 210, 20, .14), transparent 70%);
}
.cta-band .wrap { position: relative; z-index: 2; text-align: center; padding: clamp(60px, 8vw, 104px) 24px; }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  background: #0a0c08; border-top: 1px solid var(--line); padding-top: 72px;
  /* Brighter than the hero's muted/faint — footer copy is smaller and denser,
     so it needs more contrast against solid black to stay easily readable. */
  --muted: #f5f6f1;
  --faint: #c3c8b7;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 44px; padding-bottom: 56px; }
.footer-grid h4 { font-family: var(--sans); font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; font-weight: 500; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-links a { font-size: .9rem; color: var(--muted); transition: all .3s var(--ease); }
.footer-links a:hover { color: var(--gold); padding-left: 6px; }
.footer-bottom {
  border-top: 1px solid var(--line); padding: 24px 0; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 14px; font-size: .84rem; color: var(--faint);
}
.socials { display: flex; gap: 10px; }
.socials a {
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center; color: var(--muted); transition: all .3s var(--ease);
}
.socials a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }
.socials svg { width: 16px; height: 16px; }

/* --- Reveal animation -----------------------------------------------------
   Only hidden once JS has confirmed it is running and can reveal it again.
   Without the .js flag the content is simply visible. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-aurora, .hero-beams, .hero-sweep { display: none; }
  .marquee-track { animation: none; }
  .review-track { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid > aside { position: static; }
  .buy-panel { position: static; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .review-widget { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 900px) {
  .nav { height: 70px; }
  .nav-toggle { display: flex; }
  .brand img { height: 38px; }
  .brand-name { font-size: 1rem; }
  .brand-motto { font-size: .60rem; }

  /* Full-height drawer rather than a cramped dropdown.
     Kept deliberately dark against the now-light site — a dramatic full-bleed
     panel that reads as premium and gives the gold accent something to sit
     against — so its text/border tokens are overridden locally rather than
     inherited from the (now light) global --text and --line. */
  .nav-links {
    position: fixed; top: 70px; left: 0; right: 0; bottom: 0; height: calc(100dvh - 70px);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    background: rgba(10, 12, 8, .985); backdrop-filter: blur(24px) saturate(140%);
    padding: 20px 24px calc(28px + env(safe-area-inset-bottom));
    transform: translateX(100%); transition: transform .48s var(--ease); z-index: 899;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a:not(.btn) {
    padding: 18px 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 1.05rem;
    letter-spacing: .06em; color: #ffffff; display: flex; align-items: center; justify-content: space-between;
  }
  .nav-links a { opacity: 0; transform: translateX(26px); }
  .nav-links.open a { animation: navItemIn .5s var(--ease) forwards; }
  .nav-links.open li:nth-child(1) a { animation-delay: .06s; }
  .nav-links.open li:nth-child(2) a { animation-delay: .11s; }
  .nav-links.open li:nth-child(3) a { animation-delay: .16s; }
  .nav-links.open li:nth-child(4) a { animation-delay: .21s; }
  .nav-links.open li:nth-child(5) a { animation-delay: .26s; }
  .nav-links.open li:nth-child(6) a { animation-delay: .31s; }
  .nav-links.open li:nth-child(7) a { animation-delay: .36s; }
  .nav-links.open li:nth-child(8) a { animation-delay: .41s; }
  @keyframes navItemIn { to { opacity: 1; transform: none; } }
  .nav-links a::after { display: none; }
  .nav-links a.active { color: var(--brand-2); }
  .nav-links a:not(.btn)::before {
    content: ""; order: 2; width: 16px; height: 16px; opacity: .4; flex: none;
    background: var(--brand-2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  }
  /* Contact block pinned under the links inside the drawer */
  .nav-drawer-foot {
    margin-top: auto; padding-top: 26px; display: flex; flex-direction: column; gap: 12px;
    border-bottom: 0;
  }
  .nav-drawer-foot .btn { width: 100%; opacity: 0; }
  /* The plain (non-brand) call button has no fill of its own, so on the dark
     drawer it needs light text/border rather than the site's default dark ones. */
  .nav-drawer-foot .btn:not(.btn--primary):not(.btn--wa) {
    color: #ffffff; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04);
  }
  .nav-drawer-foot .btn:not(.btn--primary):not(.btn--wa):hover {
    color: var(--brand-2); border-color: var(--brand-2); background: rgba(226, 213, 0, .08);
  }
  .nav-links.open .nav-drawer-foot .btn:nth-child(1) { animation-delay: .46s; }
  .nav-links.open .nav-drawer-foot .btn:nth-child(2) { animation-delay: .51s; }
  .nav-links.open .nav-drawer-foot .btn:nth-child(3) { animation-delay: .56s; }
  body.nav-open { overflow: hidden; }

  .nav-actions .btn { display: none; }
  .chat-shell { grid-template-columns: 1fr; }
  .chat-side { border-right: 0; border-bottom: 1px solid var(--line); max-height: 210px; }
  .hero { min-height: auto; }
  .hero-inner { padding: 56px 0 48px; }
  /* On a narrow viewport the copy stacks full-width over the frame, so the
     desktop left-to-right wash (built for text-left/car-right) would hide
     most of the vehicle. Switch to a lighter top-to-bottom wash instead. */
  .hero-slide img { opacity: .88; }
  .hero-slider::after {
    background:
      linear-gradient(180deg, rgba(8, 10, 8, .82) 0%, rgba(8, 10, 8, .38) 32%, rgba(8, 10, 8, .3) 62%, rgba(8, 10, 8, .68) 100%),
      linear-gradient(to top, var(--ink) 2%, rgba(10, 12, 10, .05) 40%, rgba(10, 12, 10, .35) 100%);
  }
  .hero-bg img { opacity: .58; }
  .hero-stats { gap: 26px 34px; padding-top: 26px; }
  .hero-stat .n { font-size: 1.7rem; }
  .hero-stat .l { font-size: .68rem; letter-spacing: .16em; }
  .hero-caption { display: none; }
  .scroll-hint { display: none; }
  .section { padding: clamp(52px, 11vw, 80px) 0; }
  .marquee span { font-size: 1.15rem; }
  .marquee-track { gap: 40px; }
}

@media (max-width: 640px) {
  .g-2, .g-3, .g-4, .pillars, .steps, .footer-grid, .spec-table, .feature-list { grid-template-columns: 1fr; }
  .wrap { padding-inline: 18px; }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { width: 100%; }
  .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .code-input { gap: 7px; }
  .code-input input { width: 100%; max-width: 52px; height: 56px; font-size: 1.3rem; }
  .bubble { max-width: 90%; }
  .float-stack { right: 14px; bottom: 14px; gap: 10px; }
  .fab { width: 50px; height: 50px; }
  .fab svg { width: 21px; height: 21px; }
  .fab-label { display: none; }
  .filters { padding: 18px; }
  .results-bar { flex-direction: column; align-items: flex-start; }
  .pillar { padding: 32px 22px; }
  .buy-panel { padding: 22px; }
  .buy-price { font-size: 2rem; }
  .panel { padding: 22px; }
  .modal-card { margin: 0; min-height: 100dvh; border-radius: 0; padding: 28px 20px; }
  .pagination a, .pagination span { min-width: 40px; height: 40px; font-size: .84rem; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; align-items: center; }
  .chat-body { max-height: 58dvh; padding: 18px; }
  .chat-compose { padding: 14px 16px; }
  .hero-dots { left: 18px; bottom: 20px; }
}

/* Touch devices: hover lifts feel broken, so drop them */
@media (hover: none) {
  .card:hover { transform: none; }
  .card:hover .card-media img { transform: none; }
  .btn:hover { transform: none; }
  .fab:hover { transform: none; }
}