/* ==========================================================================
   KARVIO - shared stylesheet
   World: "Forecourt Pop". White canvas, violet gradient panels, a fixed
   five-accent set where each accent owns specific slots rather than being
   sprinkled. Energy comes from colour and scale, never from noise.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --ink:            #16123a;
  --ink-2:          #4e4a72;
  --ink-3:          #6f6b91;

  --canvas:         #ffffff;
  --surface:        #f6f4ff;   /* violet-tinted card fill */
  --surface-2:      #ece8ff;
  --sand:           #fff8ec;

  /* Primary. The gradient is the brand's signature surface. */
  --violet:         #5a31f4;
  --violet-deep:    #2f1a8f;
  --violet-hover:   #4a24e0;
  --violet-soft:    #ece7ff;
  --grad:           linear-gradient(112deg, #5a31f4 0%, #7a3ff0 46%, #9b2fd0 100%);
  --grad-warm:      linear-gradient(100deg, #6a2ff0 0%, #b232c8 55%, #ff4d8d 100%);

  /* Accent set. Each owns a slot, named beside it. */
  --pink:           #e83a7d;   /* step 1, best price */
  --yellow:         #ffb114;   /* step 2, speed, every CTA on violet */
  --mint:           #0d9e70;   /* step 3, payment, every affirmative tick */
  --sky:            #1683da;   /* step 4, security */
  --orange:         #e2600f;   /* paperwork, fifth slot */

  --pink-soft:      #ffe6ef;
  --yellow-soft:    #fff2d6;
  --mint-soft:      #d9f6ec;
  --sky-soft:       #ddeeff;
  --orange-soft:    #ffe9de;

  --on-violet:      #ffffff;
  --on-violet-2:    #d5c9ff;
  --on-yellow:      #2b1a00;

  --line:           rgba(22, 18, 58, .10);
  --line-strong:    rgba(22, 18, 58, .18);
  --line-on-violet: rgba(255, 255, 255, .24);

  /* Shape lock: panels 30px, cards 20px, inputs 14px, buttons full pill. */
  --r-card:         20px;
  --r-panel:        30px;
  --r-input:        14px;
  --r-pill:         999px;

  /* Shadows carry offset and blur, tinted to the violet ground. */
  --shadow-sm:      0 2px 6px -2px rgba(38, 22, 96, .16);
  --shadow-md:      0 14px 34px -14px rgba(38, 22, 96, .34);
  --shadow-lg:      0 30px 70px -28px rgba(38, 22, 96, .46);

  /* Motion. One curve per job: entrances ease out, on-screen movement eases
     in and out, hovers and colour use the plain curve. */
  --ease:           cubic-bezier(.16, 1, .3, 1);   /* long reveals only */
  --ease-out:       cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:    cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:    cubic-bezier(0.32, 0.72, 0, 1);
  --shell:          1200px;

  --font-display:   "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:      "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:          #f2f0ff;
    --ink-2:        #c2bde0;
    --ink-3:        #9d98be;

    --canvas:       #0f0d1f;
    --surface:      #191634;
    --surface-2:    #221e42;
    --sand:         #241d17;

    --violet:       #9c80ff;
    --violet-hover: #b39dff;
    --violet-soft:  #241f4d;

    --pink:         #ff6ba0;
    --yellow:       #ffc043;
    --mint:         #34d29b;
    --sky:          #5cb6ff;
    --orange:       #ff9155;

    --pink-soft:    #3a1226;
    --yellow-soft:  #362506;
    --mint-soft:    #0c3328;
    --sky-soft:     #0b2740;
    --orange-soft:  #3a1e10;

    --line:         rgba(242, 240, 255, .12);
    --line-strong:  rgba(242, 240, 255, .24);

    --shadow-sm:    0 2px 6px -2px rgba(0, 0, 0, .6);
    --shadow-md:    0 14px 34px -14px rgba(0, 0, 0, .8);
    --shadow-lg:    0 30px 70px -28px rgba(0, 0, 0, .9);
  }
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* No scroll-behavior here. js/main.js owns easing for anchor jumps: a CSS
     curve on top of a smooth-scroll library's curve is two easings fighting
     over the same scrollTop, which is what made Lenis read as lag last time. */
  scroll-padding-top: 96px;         /* sticky nav never covers the target */
}

/* Stop the rubber-band at the ends of the page from chaining to the browser UI. */
body { overscroll-behavior-y: none; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, picture { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.5rem + 3.8vw, 4.25rem); font-weight: 800; }
h2 { font-size: clamp(1.95rem, 1.35rem + 2.5vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.4rem); }

p { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding-block: clamp(44px, 2.2rem + 2.4vw, 66px); }

/* Skip rendering work for sections that are nowhere near the viewport. The
   size hint keeps the scrollbar honest so nothing jumps as they come into
   range. This is the single biggest win for scroll smoothness on a long page. */
@supports (content-visibility: auto) {
  .section:not(.hero) {
    content-visibility: auto;
    contain-intrinsic-size: auto 620px;
    /* Render further ahead so each section's height correction lands before
       the smooth-scroll loop is interpolating through it rather than during,
       which is the other thing that made Lenis judder here. Progressive:
       browsers without it behave exactly as before. */
    content-visibility-auto-state-change-margin: 100vh;
  }
}

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--violet); color: #fff;
  padding: 10px 18px; border-radius: var(--r-pill);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.lede {
  font-size: clamp(1.02rem, .97rem + .35vw, 1.2rem);
  color: var(--ink-2);
  max-width: 48ch;
}

.section-head { max-width: 720px; margin-bottom: clamp(28px, 3vw, 46px); }
.section-head h2 { max-width: 20ch; }
.section-head p { margin-top: 14px; max-width: 54ch; text-wrap: pretty; }
.section-head--wide { max-width: 860px; }
.section-head--center { max-width: 720px; margin-inline: auto; text-align: center; }
.section-head--center h2 { margin-inline: auto; }
.section-head--center p { margin-inline: auto; max-width: 46ch; }

/* One highlighted word inside a heading. Weight alone cannot carry it against
   a gradient ground, so the emphasis is a drawn swash behind the word. */
.mark { position: relative; white-space: nowrap; }
.mark::after {
  content: "";
  position: absolute;
  left: -.06em; right: -.06em; bottom: .05em;
  height: .16em;
  border-radius: var(--r-pill);
  background: var(--yellow);
  z-index: -1;
}
.mark--pink::after { background: var(--pink); }

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 700; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease,
              translate 140ms var(--ease-out), transform 140ms var(--ease-out),
              box-shadow .18s ease, color .18s ease;
}
.btn i { font-size: 1.2em; }
/* Touch fires :hover on tap and holds it, so the lift is fine-pointer only.
   The lift rides the `translate` channel and press feedback rides `transform`,
   which is what lets the magnetic pull below share the element without either
   rule wiping the other out. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { translate: 0 -2px; }
}
.btn:active { translate: 0 0; transform: scale(.97); }

/* Violet on white. */
.btn--primary { background: var(--violet); color: #fff; box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--violet-hover); }

/* Yellow on violet. The only CTA that appears on a gradient panel. */
.btn--pop { background: var(--yellow); color: var(--on-yellow); box-shadow: 0 12px 28px -12px rgba(120, 70, 0, .8); }
.btn--pop:hover { background: #ffc23f; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--violet); color: var(--violet); background: var(--violet-soft); }

.btn--outline-light { background: transparent; color: #fff; border-color: var(--line-on-violet); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

.btn--full { width: 100%; }

/* --------------------------------------------------------------------------
   4. NAVIGATION
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}

.nav__inner { height: 74px; display: flex; align-items: center; gap: 24px; }

/* Wordmark. Letters are individually coloured from the accent set in a fixed
   order, so the mark is identical on every page. */
.brand {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 800; letter-spacing: .04em;
  text-decoration: none;
  margin-right: auto;
}
.brand span:nth-child(1) { color: var(--violet); }
.brand span:nth-child(2) { color: var(--pink); }
.brand span:nth-child(3) { color: var(--yellow); }
.brand span:nth-child(4) { color: var(--mint); }
.brand span:nth-child(5) { color: var(--sky); }
.brand span:nth-child(6) { color: var(--orange); }

.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__link {
  padding: 10px 14px;
  border-radius: var(--r-pill);
  font-size: .95rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}
.nav__link:hover { color: var(--violet); background: var(--violet-soft); }
.nav__link[aria-current="page"] { color: var(--violet); }

.nav__cta { display: inline-flex; min-height: 46px; font-size: .94rem; padding: 0 20px; }

.nav__toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent; color: var(--ink);
  font-size: 1.4rem; cursor: pointer;
}

@media (max-width: 940px) {
  .nav__links {
    position: absolute; inset: 74px 0 auto;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 14px 20px 22px;
    background: var(--canvas);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .nav__links[hidden] { display: none; }

  /* The panel comes out from under the bar it hangs off, and goes back the
     same way. `display ... allow-discrete` is what makes the exit possible at
     all: without it the hidden attribute kills the element on frame zero. */
  @media (prefers-reduced-motion: no-preference) {
    .nav__links {
      opacity: 1;
      translate: 0 0;
      transition: opacity 200ms ease,
                  translate 200ms var(--ease-out),
                  display 200ms allow-discrete;
    }
    .nav__links[hidden] {
      opacity: 0;
      translate: 0 -8px;
    }
    @starting-style {
      .nav__links:not([hidden]) {
        opacity: 0;
        translate: 0 -8px;
      }
    }
  }
  .nav__link { padding: 14px; font-size: 1.05rem; }
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   5. HERO - gradient panel
   -------------------------------------------------------------------------- */
.hero { padding-top: 22px; }

.hero__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--grad);
  color: #fff;
  padding: clamp(34px, 4vw, 62px) clamp(24px, 4vw, 58px) clamp(116px, 9vw, 148px);
}

/* Soft colour fields behind the content. They give the panel depth without
   the noise of scattered decorative confetti. */
.hero__panel::before,
.hero__panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
}
.hero__panel::before {
  width: 52%; aspect-ratio: 1;
  right: -10%; top: -26%;
  background: radial-gradient(circle at 42% 48%, rgba(255, 177, 20, .92), rgba(255, 122, 60, .45) 46%, transparent 70%);
}
.hero__panel::after {
  width: 38%; aspect-ratio: 1;
  right: 2%; bottom: -18%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 77, 141, .75), transparent 68%);
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(28px, 3vw, 46px);
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: center;
}

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px 9px 13px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  border: 1px solid var(--line-on-violet);
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
}
.badge i { color: var(--yellow); font-size: 1.1rem; }

.hero h1 {
  margin-top: 20px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  max-width: 13ch;
}
.hero__sub {
  margin-top: 18px;
  color: var(--on-violet-2);
  font-size: clamp(1.02rem, .97rem + .35vw, 1.16rem);
  max-width: 40ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 420px) { .hero__actions .btn { width: 100%; } }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 20px 0 0; padding: 0; list-style: none;
  font-size: .88rem; font-weight: 600; color: var(--on-violet-2);
}
.hero__trust li { display: flex; align-items: center; gap: 7px; }
.hero__trust i { color: #6ff0c0; font-size: 1.1rem; }

/* The car is a cutout, so it sits directly on the gradient with no frame. The
   drop shadow replaces the studio floor it used to stand on and keeps it from
   floating; it is offset and blurred rather than a flat halo. */
.hero__art { position: relative; }
.hero__art picture { width: 100%; }
.hero__art img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 34px 30px rgba(28, 8, 60, .42));
  /* The parent animates on load. Promoting the filtered image to its own layer
     means the drop-shadow is rasterised once instead of on every frame of the
     entrance, when the page is also decoding images and doing first paint. */
  transform: translateZ(0);
}

/* Let the car break out of its column a little at desktop, so it reads as an
   object in the panel rather than a picture in a box. */
@media (min-width: 941px) {
  .hero__art { margin-right: clamp(-56px, -3vw, -20px); }
  .hero__art img { transform: scale(1.08) translateZ(0); transform-origin: center left; }
}

/* Two facts pinned to the photo. Both are true claims, not invented metrics. */
.hero__tag {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: #fff; color: #16123a;
  font-weight: 700; font-size: .9rem;
  box-shadow: var(--shadow-md);
}
.hero__tag i { font-size: 1.3rem; }
/* The car runs on a diagonal - nose bottom-left, roofline top-right - so the
   two tags take the corners it leaves free, not the ones it fills. */
.hero__tag--paid { right: 0; bottom: 2%; }
.hero__tag--paid i { color: #0d9e70; }
.hero__tag--years { left: 0; top: 2%; background: var(--yellow); color: var(--on-yellow); }
.hero__tag--years i { color: var(--on-yellow); }

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
  .hero__tag--paid { right: 10px; }
  .hero__tag--years { left: 10px; }
}
@media (max-width: 560px) {
  .hero__tag { font-size: .8rem; padding: 9px 14px; }
}

/* --------------------------------------------------------------------------
   6. FEATURE STRIP - overlaps the hero panel
   -------------------------------------------------------------------------- */
.strip {
  position: relative; z-index: 2;
  margin-top: clamp(-108px, -8vw, -88px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 12px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) { .strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .strip { grid-template-columns: 1fr; } }

.strip__item { display: flex; gap: 14px; align-items: flex-start; padding: 18px 16px; border-radius: 14px; }
.strip__item strong { display: block; font-family: var(--font-display); font-size: 1rem; letter-spacing: -.01em; }
.strip__item span { font-size: .87rem; color: var(--ink-2); }

.chip {
  flex: none;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  font-size: 1.4rem;
}
.chip--pink   { background: var(--pink-soft);   color: var(--pink); }
.chip--yellow { background: var(--yellow-soft); color: #a86800; }
.chip--mint   { background: var(--mint-soft);   color: var(--mint); }
.chip--sky    { background: var(--sky-soft);    color: var(--sky); }
.chip--orange { background: var(--orange-soft); color: var(--orange); }
.chip--violet { background: var(--violet-soft); color: var(--violet); }

/* --------------------------------------------------------------------------
   7. STEP FLOW - the numbers carry the sequence, so they stay
   -------------------------------------------------------------------------- */
.flow { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } }

.flow__step {
  padding: 30px 26px 28px;
  border-radius: var(--r-card);
  transition: transform .24s var(--ease-out), box-shadow .24s ease;
}
.flow__step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.flow__step h3 { margin: 16px 0 8px; }
.flow__step p { color: var(--ink-2); font-size: .95rem; }

.flow__num {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 800;
  color: #fff;
}
.flow__step:nth-child(1) { background: var(--pink-soft); }
.flow__step:nth-child(1) .flow__num { background: var(--pink); }
.flow__step:nth-child(2) { background: var(--yellow-soft); }
.flow__step:nth-child(2) .flow__num { background: var(--yellow); color: var(--on-yellow); }
.flow__step:nth-child(3) { background: var(--mint-soft); }
.flow__step:nth-child(3) .flow__num { background: var(--mint); }
.flow__step:nth-child(4) { background: var(--sky-soft); }
.flow__step:nth-child(4) .flow__num { background: var(--sky); }

/* --------------------------------------------------------------------------
   8. COMPARISON TABLE
   -------------------------------------------------------------------------- */
.compare-wrap { overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--line); }
.compare { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--canvas); }

.compare th, .compare td { padding: 18px 20px; text-align: center; }
.compare thead th {
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 700;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
.compare tbody th {
  text-align: left;
  font-family: var(--font-body);
  font-size: .96rem; font-weight: 600;
  color: var(--ink);
}
.compare tbody tr + tr th, .compare tbody tr + tr td { border-top: 1px solid var(--line); }

/* The Karvio column is the point of the table, so it is lifted the whole
   height rather than marked cell by cell. */
.compare .col-us { background: var(--violet-soft); }
.compare thead .col-us {
  color: var(--violet);
  border-bottom-color: transparent;
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding-top: 22px;
}
.compare thead .col-us span { display: block; font-size: 1.2rem; letter-spacing: .05em; }
.compare tbody tr:last-child .col-us { border-radius: 0 0 var(--r-card) var(--r-card); }

.tick, .cross { font-size: 1.45rem; line-height: 1; }
.tick { color: var(--mint); }
.cross { color: var(--ink-3); }
.compare .col-us .tick { color: var(--violet); }

.compare__note { margin-top: 14px; font-size: .86rem; color: var(--ink-3); }

@media (max-width: 700px) { .compare th, .compare td { padding: 14px 12px; } }

/* --------------------------------------------------------------------------
   9. CARDS, BAND, SPLIT
   -------------------------------------------------------------------------- */
.cards { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px;
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: var(--r-card);
  transition: transform .24s var(--ease-out), border-color .24s ease, box-shadow .24s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--violet); box-shadow: var(--shadow-md); }
.card p { color: var(--ink-2); font-size: .96rem; }
.card .chip { margin-bottom: 6px; }
/* A tinted chip on a card of the same tint disappears. On coloured cards the
   chip sits on white so the icon keeps its shape. */
.card--pink .chip, .card--yellow .chip, .card--mint .chip, .card--sky .chip {
  background: rgba(255, 255, 255, .8);
}
@media (prefers-color-scheme: dark) {
  .card--pink .chip, .card--yellow .chip, .card--mint .chip, .card--sky .chip {
    background: rgba(255, 255, 255, .12);
  }
}

.card--pink   { background: var(--pink-soft); }
.card--yellow { background: var(--yellow-soft); }
.card--mint   { background: var(--mint-soft); }
.card--sky    { background: var(--sky-soft); }

.card--price strong { font-family: var(--font-display); font-size: 1.15rem; }
.card__figure {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
}

.band {
  position: relative; overflow: hidden;
  background: var(--grad-warm);
  color: #fff;
  border-radius: var(--r-panel);
  padding: clamp(36px, 4.5vw, 64px) clamp(24px, 4vw, 56px);
}
.band p { color: rgba(255, 255, 255, .84); }
.band__grid {
  display: grid; gap: 28px clamp(32px, 5vw, 60px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
}
.band h2 { max-width: 16ch; }
@media (max-width: 900px) { .band__grid { grid-template-columns: 1fr; } }

.tags { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.tags li {
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  border: 1px solid var(--line-on-violet);
  font-size: .93rem; font-weight: 600;
  transition: background-color .2s ease;
}
.tags li:hover { background: rgba(255, 255, 255, .3); }

.split {
  display: grid; gap: clamp(32px, 4vw, 58px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.split--reverse > *:first-child { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > *:first-child { order: 0; }
}
.split__art picture, .split__art img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 60% center;
  border-radius: var(--r-card);
}

.reasons { display: grid; gap: 4px; margin: 26px 0 0; padding: 0; list-style: none; }
.reasons li {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px;
  align-items: start; padding: 16px 0;
  border-top: 1px solid var(--line);
}
.reasons li:last-child { border-bottom: 1px solid var(--line); }
.reasons i { font-size: 1.4rem; line-height: 1.15; }
.reasons li:nth-child(1) i { color: var(--pink); }
.reasons li:nth-child(2) i { color: var(--yellow); }
.reasons li:nth-child(3) i { color: var(--mint); }
.reasons li:nth-child(4) i { color: var(--sky); }
.reasons strong { display: block; font-family: var(--font-display); font-size: 1.08rem; }
.reasons span { font-size: .94rem; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   10. ENQUIRY FORM
   -------------------------------------------------------------------------- */
.enquiry { background: var(--surface); }
.enquiry__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.enquiry__inner .lede { margin-inline: auto; }

.form {
  margin-top: 32px;
  text-align: left;
  display: grid; gap: 18px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--canvas);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
}
.form__row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 7px; }
.field label { font-size: .89rem; font-weight: 700; color: var(--ink); }
.field input {
  min-height: 52px; padding: 0 16px;
  font-family: inherit; font-size: 1rem;
  color: var(--ink);
  background: var(--canvas);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-input);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input::placeholder { color: var(--ink-3); }
.field input:hover { border-color: var(--ink-3); }
.field input:focus-visible {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px var(--violet-soft);
}
.field input[aria-invalid="true"] { border-color: #d0213f; }

.field__error { display: none; font-size: .84rem; font-weight: 600; color: #d0213f; }
.field input[aria-invalid="true"] ~ .field__error { display: block; }
@media (prefers-color-scheme: dark) {
  .field input[aria-invalid="true"] { border-color: #ff8a9e; }
  .field__error { color: #ff8a9e; }
}

.form__note { font-size: .87rem; color: var(--ink-3); text-align: center; }

.form__status {
  display: none; gap: 10px; align-items: center;
  padding: 15px 16px;
  border-radius: var(--r-input);
  background: var(--mint-soft);
  color: var(--ink);
  font-size: .93rem; font-weight: 600;
}
.form__status[data-visible] { display: flex; }

/* The reply to a submitted form is the most loaded moment on the site. It
   arrives rather than blinking on, and stays instantly focusable. */
@media (prefers-reduced-motion: no-preference) {
  .form__status {
    opacity: 0;
    translate: 0 -6px;
    transition: opacity 200ms ease,
                translate 220ms var(--ease-out),
                display 220ms allow-discrete;
  }
  .form__status[data-visible] {
    opacity: 1;
    translate: 0 0;
  }
  @starting-style {
    .form__status[data-visible] {
      opacity: 0;
      translate: 0 -6px;
    }
  }
}
.form__status i { color: var(--mint); font-size: 1.3rem; flex: none; }

/* Failure names the problem and gives a way through it. */
.form__status--error { background: var(--pink-soft); align-items: flex-start; }
.form__status--error i { color: var(--pink); }
.form__status--error a { color: var(--pink); font-weight: 700; }

.btn[data-loading] { pointer-events: none; opacity: .75; }

/* --------------------------------------------------------------------------
   11. REVIEWS
   -------------------------------------------------------------------------- */
.reviews { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); align-items: start; }
.reviews > *:nth-child(2) { margin-top: clamp(0px, 2vw, 30px); }
@media (max-width: 900px) {
  .reviews { grid-template-columns: 1fr; }
  .reviews > *:nth-child(2) { margin-top: 0; }
}

.review {
  display: grid; gap: 14px;
  padding: 28px;
  border-radius: var(--r-card);
  background: var(--surface);
}
.review:nth-child(2) { background: var(--yellow-soft); }
.review:nth-child(3) { background: var(--mint-soft); }
.review__stars { display: flex; gap: 3px; color: #e09000; font-size: 1.05rem; }
.review blockquote { margin: 0; font-size: 1.04rem; line-height: 1.55; font-weight: 500; }
.review figcaption { padding-top: 14px; border-top: 1px solid var(--line); }
.review strong { display: block; font-size: .95rem; font-weight: 700; }
.review span { font-size: .85rem; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details {
  padding: 4px 24px;
  background: var(--surface);
  border-radius: var(--r-card);
  border: 2px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.faq details[open] { border-color: var(--violet); background: var(--canvas); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0;
  font-family: var(--font-display);
  font-size: 1.08rem; font-weight: 700;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { color: var(--violet); font-size: 1.35rem; transition: transform .22s var(--ease-in-out); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; color: var(--ink-2); max-width: 62ch; }

/* The answer opens rather than appearing, so the questions below it slide
   instead of jumping. interpolate-size is what makes height:auto animatable;
   browsers without it get today's instant open, which is a fine floor. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq details { interpolate-size: allow-keywords; }
    .faq details::details-content {
      block-size: 0;
      overflow: hidden;
      opacity: 0;
      transition: block-size 260ms var(--ease-in-out),
                  opacity 180ms ease,
                  content-visibility 260ms allow-discrete;
    }
    .faq details[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
}

/* --------------------------------------------------------------------------
   13. CTA BAND + FOOTER
   -------------------------------------------------------------------------- */
.closer {
  position: relative; overflow: hidden;
  background: var(--grad-warm);
  color: #fff;
  border-radius: var(--r-panel);
  padding: clamp(36px, 4.5vw, 60px) clamp(24px, 4vw, 56px);
  display: flex; flex-wrap: wrap; gap: 26px;
  align-items: center; justify-content: space-between;
}
.closer h2 { max-width: 18ch; }
.closer p { color: rgba(255, 255, 255, .86); margin-top: 12px; max-width: 42ch; }

.footer {
  margin-top: clamp(48px, 5vw, 78px);
  background: var(--surface);
  padding-block: 52px 0;
}
.footer__grid { display: grid; gap: 32px; grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer__grid { grid-template-columns: 1fr; } }

.footer h4 { font-size: .95rem; font-family: var(--font-display); }
.footer ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.footer a { color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 500; }
.footer a:hover { color: var(--violet); }
.footer__blurb { color: var(--ink-2); font-size: .95rem; max-width: 34ch; margin-top: 14px; }
.footer__base {
  margin-top: 40px; padding-top: 22px; padding-bottom: 56px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .86rem; color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   14. WHATSAPP PILL
   -------------------------------------------------------------------------- */
.wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 24px;
  border-radius: var(--r-pill);
  background: var(--mint); color: #fff;
  font-size: .97rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 16px 34px -14px rgba(10, 90, 65, .9);
  transition: background-color .18s ease, translate 140ms var(--ease-out);
}
.wa:hover { background: #0b8a61; }
@media (hover: hover) and (pointer: fine) {
  .wa:hover { translate: 0 -2px; }
}
.wa i { font-size: 1.4rem; }
@media (max-width: 560px) { .wa span { display: none; } .wa { padding: 0; width: 58px; justify-content: center; } }

/* --------------------------------------------------------------------------
   15. INNER PAGES
   -------------------------------------------------------------------------- */
.page-hero {
  background: var(--grad);
  color: #fff;
  border-radius: var(--r-panel);
  padding: clamp(38px, 4.5vw, 62px) clamp(24px, 4vw, 56px);
  margin-top: 22px;
}
.page-hero { margin-bottom: clamp(12px, 2vw, 26px); }
.page-hero h1 { max-width: 24ch; text-transform: uppercase; }

/* Confirmation variant: centred, with the tick as the first thing you see. */
.page-hero--center { text-align: center; padding-block: clamp(48px, 6vw, 84px); }
.page-hero--center h1 { max-width: 16ch; margin-inline: auto; }
.page-hero--center .lede { margin-inline: auto; max-width: 46ch; }

.thanks__mark {
  display: grid; place-items: center;
  width: 76px; height: 76px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-yellow);
  font-size: 2.4rem;
  box-shadow: 0 18px 40px -16px rgba(120, 70, 0, .9);
}
.thanks__actions { justify-content: center; }
.page-hero .lede { margin-top: 18px; color: var(--on-violet-2); }

.steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 62px 1fr; gap: clamp(16px, 2vw, 28px);
  align-items: start;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: var(--r-card);
}
.steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 800;
  color: #fff;
}
.steps li:nth-child(1) { background: var(--pink-soft); }
.steps li:nth-child(1)::before { background: var(--pink); }
.steps li:nth-child(2) { background: var(--yellow-soft); }
.steps li:nth-child(2)::before { background: var(--yellow); color: var(--on-yellow); }
.steps li:nth-child(3) { background: var(--mint-soft); }
.steps li:nth-child(3)::before { background: var(--mint); }
.steps li:nth-child(4) { background: var(--sky-soft); }
.steps li:nth-child(4)::before { background: var(--sky); }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--ink-2); max-width: 54ch; }
@media (max-width: 520px) { .steps li { grid-template-columns: 1fr; gap: 12px; } }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.stat { background: var(--canvas); padding: 26px 24px; }
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
}
.stat:nth-child(1) strong { color: var(--pink); }
.stat:nth-child(2) strong { color: var(--yellow); }
.stat:nth-child(3) strong { color: var(--mint); }
.stat:nth-child(4) strong { color: var(--sky); }
.stat span { font-size: .9rem; color: var(--ink-2); }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .stats { grid-template-columns: 1fr; } }

.contacts { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .contacts { grid-template-columns: 1fr; } }
.contacts .card strong { font-family: var(--font-display); font-size: 1.15rem; }
.contacts .card a { color: var(--violet); font-weight: 700; text-decoration: none; }
.contacts .card a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   16. MOTION
   Two moments, and no more: the hero assembles once on load, and each section
   rises and sharpens as it arrives. Nothing loops and nothing replays on the
   way back up.
   -------------------------------------------------------------------------- */
/* One reveal path for every browser. Scroll-driven timelines were tried here
   and removed: their progress is a function of scroll position, so sections
   un-revealed on the way back up and froze half-faded when scrolling stopped,
   which is the opposite of the intent above. A one-shot IntersectionObserver
   costs a single callback per element; the transition it triggers still runs
   on the compositor. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal],
  [data-hero] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
  }
  [data-reveal] { transition-delay: var(--reveal-delay, 0ms); }
  [data-hero]   { transition-delay: var(--hero-delay, 0ms); }

  [data-reveal].is-in,
  [data-hero].is-in { opacity: 1; transform: none; }

  /* will-change is set by JS only while an element is still pending, then
     dropped. Leaving it on every section permanently costs GPU memory and is
     a common cause of heavy scrolling. */
  [data-reveal].is-pending, [data-hero].is-pending { will-change: transform, opacity; }

  /* The photo arrives from slightly further out, so it reads as settling
     rather than sliding. */
  .hero__art[data-hero] { transform: translateY(24px); }
  .hero__art[data-hero].is-in { transform: none; }
}

/* Reduced motion keeps the arrival legible but removes all movement: opacity
   only, no transform, no stagger. Fewer and gentler, not none. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-hero] {
    opacity: 1;
    transition: opacity 200ms ease;
  }
  @starting-style {
    [data-reveal],
    [data-hero] { opacity: 0; }
  }
}

/* --------------------------------------------------------------------------
   17. INTERACTIVE BUTTONS
   A light tracks the cursor across the button and the button leans a few
   pixels toward it. Both run off custom properties written by pointermove, so
   there is no scroll listener and no layout-affecting property in the loop.
   -------------------------------------------------------------------------- */
[data-magnetic] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Pixels from the button's top-left, written by pointermove. The light is
     transparent until the pointer is over the button, so the start value is
     never seen. */
  --mx: 0px;
  --my: 0px;
  --pull-x: 0px;
  --pull-y: 0px;
}
[data-magnetic]::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(closest-side circle, rgba(255, 255, 255, .38), transparent 70%);
  translate: var(--mx) var(--my);
  transition: opacity .28s ease;
}
[data-magnetic]:hover::after { opacity: 1; }
.btn--pop[data-magnetic]::after {
  background: radial-gradient(closest-side circle, rgba(255, 255, 255, .75), transparent 70%);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-magnetic] {
    transition: background-color .18s ease, box-shadow .24s ease,
                translate 140ms var(--ease-out), transform 140ms var(--ease-out),
                color .18s ease;
  }
  /* The hover lift is folded into the pull's Y channel, so the CTA leans and
     lifts at once instead of the two rules cancelling each other. */
  [data-magnetic]:hover { translate: var(--pull-x) calc(var(--pull-y) - 2px); }
  [data-magnetic]:active { translate: 0 0; transform: scale(.97); }
}

/* --------------------------------------------------------------------------
   18. LOADING
   No overlay and no gate: the page renders as it always did. The only signal
   is a dot beside the wordmark that breathes while the page is still fetching,
   and it is not shown at all unless loading runs past 220ms - an indicator
   that appears for two frames is a flicker, which reads worse than nothing.
   -------------------------------------------------------------------------- */
.nav .brand { position: relative; }

/* Absolutely positioned so appearing and disappearing shifts no layout. */
.brand__status {
  position: absolute;
  top: 50%;
  left: calc(100% + 9px);
  width: 7px;
  height: 7px;
  margin-top: -3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}
html[data-page-loading] .brand__status { opacity: 1; }

/* The blink lives on the inner element so the outer one can own the fade in
   and out. Handing an element from an infinite animation to a transition on
   the same property is the kind of thing that flashes on one browser in three. */
.brand__status i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--violet);
  animation: brand-breathe 1.15s var(--ease-in-out) infinite;
  animation-play-state: paused;
}
html[data-page-loading] .brand__status i { animation-play-state: running; }

@keyframes brand-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .22; }
}

/* A pulsing dot is movement in the periphery, which is exactly what reduced
   motion is asking to be spared. The dot still appears and still disappears,
   so the signal survives without the blink. */
@media (prefers-reduced-motion: reduce) {
  .brand__status i { animation: none; opacity: .75; }
}

/* --------------------------------------------------------------------------
   19. UTILITY
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}