/* ============================================================
   GREEN LIGHT — Baunfire-style system
   Dark-led, bold Inter type, wide-tracked caps labels, green as
   the single hot accent, decorative + grids / watermarks / ring
   cursor, full-bleed color sections.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;line-height:1.6;font-size:17px}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:#fff}

/* ---- loading splash screen (Baunfire-style: white splash, bold mark,
   dark theme wipes in from the left to reveal the hero underneath) ---- */
.preloader{position:fixed;inset:0;z-index:9999;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--ink);transition:opacity .5s cubic-bezier(.22,1,.36,1) .1s,visibility .5s .1s}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
/* Big "LG" mark, stacked and bold — sized to touch the top/bottom edges of
   the screen. */
.preloader__mark{position:absolute;top:50%;right:11%;z-index:6;display:flex;flex-direction:column;align-items:center;font-weight:800;letter-spacing:-.04em;line-height:.78;pointer-events:none;user-select:none;transform:translateY(-50%) scale(.94);opacity:0;animation:preMarkIn 1.3s cubic-bezier(.22,1,.36,1) .1s forwards;font-size:clamp(220px,66vh,780px)}
@keyframes preMarkIn{to{opacity:1;transform:translateY(-50%) scale(1)}}
/* Dark wipe: covers the white splash from the left, matching the hero
   underneath, so removing the preloader afterward is seamless. */
.preloader__wipe{position:absolute;inset:0;z-index:5;background:var(--dark);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.preloader.is-wiping .preloader__wipe{transition:transform .62s cubic-bezier(.65,0,.35,1)}
.preloader.is-wiping .preloader__wipe,.preloader.is-done .preloader__wipe{transform:scaleX(1)}
/* Each letter is two stacked glyphs: a "base" layer (reads on the white
   splash) and a "final" layer already colored to match the hero's on-dark
   tone, clipped to its own text shape.
   L gets its own decorative curtain: a plain CSS transition sweeping
   right-to-left (opposite the main wipe), independent of the wipe's actual
   position — light grey base reading subtly on the white splash, swept by
   a black shutter that reads clearly since this plays out almost entirely
   against the still-white splash (the mark sits on the right edge, so the
   real wipe doesn't reach it until late in the sequence).
   G has no decorative flourish (solid ink throughout); JS (inline preloader
   script) drives its final layer's clip-path every frame from the wipe's
   actual on-screen edge so it's always exactly in sync — it needs the exact
   match since a mistimed edge would otherwise black out against the dark
   curtain.
   Inter has no italic font file loaded, so L's `font-style:italic` is
   browser-synthesized via skew — the glyph visually leans past its own box
   on the right. The base layer (unclipped) shows that overflow fine, but
   the final layer's clip-path clips strictly to its box, cutting off the
   same overflow and leaving a grey sliver even at full reveal — hence the
   extra `right:-22%` so the shutter's box is wide enough to cover it. */
.mark__l,.mark__g{display:block;position:relative}
.mark__l-base,.mark__l-final,.mark__g-base,.mark__g-final{display:block;font-style:normal}
.mark__l-base,.mark__l-final{font-style:italic}
.mark__l-base{color:#f0f0f0}
.mark__g-base{color:var(--ink)}
.mark__l-final,.mark__g-final{position:absolute;inset:0}
.mark__l-final{right:-22%}
.mark__l-final{clip-path:inset(0 0 0 100%)}
.mark__g-final{clip-path:inset(0 100% 0 0)}
.preloader.is-wiping .mark__l-final{transition:clip-path .62s cubic-bezier(.65,0,.35,1)}
.preloader.is-wiping .mark__l-final,.preloader.is-done .mark__l-final{clip-path:inset(0 0 0 0)}
.mark__l-final{color:var(--ink)}
.mark__g-final{color:rgba(255,255,255,.045)}
.preloader__num{position:relative;z-index:1;font-weight:800;font-size:clamp(40px,7vw,84px);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:flex;align-items:flex-start;color:var(--ink)}
.preloader__num i{font-style:normal;font-size:.34em;color:var(--muted);margin-left:.12em;margin-top:.35em}
.preloader__bar{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--line);z-index:1}
.preloader__bar span{display:block;height:100%;width:0;background:var(--accent)}

body.theme-green{
  --bg:#ffffff;--bg-warm:#f7f7f5;--tint:#f1f4f0;--panel:#fff;
  --ink:#161613;--text:#3a3930;--muted:#6f6f6f;
  --line:rgba(22,21,15,.12);--line-strong:rgba(22,21,15,.22);
  --accent:#0f8a47;--accent-bright:#23c769;--band:#0c9a4c;
  --dark:#0f130e;--dark-soft:#1b211a;--d-text:#f4f3ee;--d-muted:#97a89c;--d-line:rgba(255,255,255,.16);
}

h1,h2{font-weight:800;letter-spacing:-.024em;line-height:1.0;color:var(--ink)}
h3{font-weight:700;letter-spacing:-.012em;color:var(--ink)}
h2{font-size:clamp(34px,5.6vw,68px)}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--muted);font-weight:400}
.eyebrow{font-weight:600;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:26px}
.wrap{max-width:1260px;margin:0 auto;padding:0 46px;width:100%}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.02em;padding:16px 30px;border-radius:999px;transition:transform .25s,background .25s,color .25s,border-color .25s;cursor:pointer;border:1px solid transparent;will-change:transform}
.btn--fill{background:var(--accent);color:#fff}
.btn--fill:hover{background:#0c7a3e}
.btn--ghost{border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--ondark{border-color:rgba(255,255,255,.32);color:#fff}
.btn--ondark:hover{background:#fff;color:var(--dark);border-color:#fff}
.btn--light{background:#fff;color:var(--accent);border-color:#fff}
.btn--light:hover{transform:translateY(-2px)}

/* round arrow button (Baunfire pill/circle motif) */
.round-btn{width:50px;height:50px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);color:var(--ink);text-decoration:none;transition:.25s;flex:0 0 auto}
.round-btn svg{width:18px;height:18px}
.round-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}

.txt-link{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;transition:opacity .2s}
.txt-link:hover{opacity:.65}

.arrow-link{display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.arrow-link i{display:inline-block;transition:transform .3s}
.arrow-link:hover i{transform:translateX(6px)}

/* ---- decorative ---- */
.plusgrid{position:absolute;pointer-events:none;z-index:2}
.deco-ring{position:absolute;border:1px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.deco-ring::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-bright)}
.watermark{position:absolute;font-weight:800;line-height:.78;letter-spacing:-.05em;pointer-events:none;user-select:none;z-index:1}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:30px 46px;transition:background .3s,padding .3s,border-color .3s;border-bottom:1px solid transparent}
.nav__left{display:flex;align-items:center;gap:18px}
/* brand lockup: car badge + wordmark (horizontal, Datreon-style) */
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand__badge{display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#1bb45e}
.brand__car{height:34px;width:auto;display:block}
.brand__name{display:flex;flex-direction:column;justify-content:center;color:#fff;font-weight:800;font-size:18px;line-height:1;letter-spacing:.04em;text-transform:uppercase}
.brand__name em{font-style:normal;font-weight:600;font-size:9.5px;letter-spacing:.32em;color:var(--accent-bright);margin-top:5px}
.nav__right{display:flex;align-items:center;gap:26px}
.nav .txt-link{color:#fff}
.nav__round{width:48px;height:48px;border-radius:50%;background:#fff;color:var(--dark);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:.25s}
.nav__round svg{width:17px;height:17px}
.nav__round:hover{background:var(--accent-bright)}
.nav .txt-link:hover,.nav.is-solid .txt-link:hover{color:var(--accent-bright);border-bottom-color:var(--accent-bright);opacity:1}
.nav.is-solid{background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line);padding-top:16px;padding-bottom:16px}
.nav.is-solid .brand__name{color:var(--ink)}
.nav.is-solid .txt-link{color:var(--ink)}
.nav.is-solid .nav__round{background:var(--dark);color:#fff}

/* ============================================================
   HERO (dark)
   ============================================================ */
/* Hero is PINNED (sticky) — the next section slides up and curtains over it
   (Baunfire-style shutter transition). The sticky element's release point is
   governed by its containing block, not by "its own height" — as a bare
   child of body (which spans the whole document) it would stay pinned for
   almost the entire page, painting over every section after it. The
   containing block's height beyond the hero's own 100svh is dead scroll
   distance where the hero just sits pinned with nothing visibly happening
   before .pcars starts curtaining over it (that slide-up always takes
   exactly one more hero-height, however tall this box is) — kept short so
   the pin doesn't feel sluggish. */
.hero-pin{position:relative;height:110svh}
.hero{position:sticky;top:0;height:100svh;display:flex;align-items:center;background:var(--dark);color:var(--d-text);overflow:hidden;padding:104px 0 58px;z-index:0}
.hero__fluid{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block}
.hero__inner{position:relative;z-index:3}
.hero .eyebrow{color:var(--accent-bright)}
.hero__title{font-size:clamp(38px,6.4vw,82px);line-height:1.06;letter-spacing:-.02em;color:#fff;font-weight:500;max-width:18ch}
.hero__title em{font-style:normal;color:var(--accent-bright)}
.hero__sub{margin-top:22px;max-width:46ch;font-size:clamp(16px,1.4vw,19px);color:var(--d-muted);line-height:1.6}
.hero__cta{margin-top:30px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero__signals{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px 34px}
.hero__signals span{font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--d-muted);display:flex;align-items:center;gap:10px}
.hero__signals span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-bright)}
.hero .watermark{right:1%;top:50%;transform:translateY(-50%);font-size:48vw;color:#fff;opacity:.028;transition:color .7s cubic-bezier(.22,1,.36,1),opacity .7s cubic-bezier(.22,1,.36,1)}
.hero .watermark--gl{font-size:31vw;line-height:.82;text-align:center;color:var(--accent-bright);opacity:.11}
.hero .watermark--gl.is-bright{color:#fff;opacity:.2}
.hero .plusgrid{top:23%;right:8%;color:rgba(255,255,255,.28)}
.scroll-ind{position:absolute;right:40px;bottom:30px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--d-muted)}
.scroll-ind i{width:1px;height:46px;background:linear-gradient(var(--d-muted),transparent)}
/* Baunfire-style hero entrance: per-word line masks + typewriter chars */
.msk{display:inline-block;overflow:hidden;vertical-align:bottom}
.msk__in{display:inline-block;will-change:transform}
.ch{display:inline-block;white-space:pre}
/* Hero watermark — the SAME stacked "LG" mark as the splash screen, same
   position/shape, so the splash hands off into the hero without a jump cut. */
.hero__mark{position:absolute;top:50%;right:11%;z-index:2;display:flex;flex-direction:column;align-items:center;font-weight:800;letter-spacing:-.04em;line-height:.78;pointer-events:none;user-select:none;transform:translateY(-50%);font-size:clamp(220px,66vh,780px)}
.hero__mark span{display:block}
.hero__mark-g{color:rgba(255,255,255,.045)}
/* Hero's L gets its own scroll-scrubbed shutter (JS, inline main.js): a
   "base" glyph (same subtle on-dark tone as G) with a solid white "final"
   glyph swept over it via clip-path, left-to-right as you scroll down and reversed
   right-to-left scrolling back up. `right:-22%` on the final layer covers the
   same synthetic-italic overflow as the preloader's L (Inter has no italic
   font file, so font-style:italic is a browser-synthesized skew that leans
   past the glyph's own box on the right; clip-path clips strictly to that
   box, so without the extra width a sliver of the base layer would peek
   through even at full reveal). */
.hero__mark-l{position:relative;font-style:italic}
.hero__mark-l-base,.hero__mark-l-final{display:block;font-style:italic}
.hero__mark-l-base{color:rgba(255,255,255,.045)}
.hero__mark-l-final{position:absolute;top:0;left:0;bottom:0;right:-22%;color:#fff;clip-path:inset(0 100% 0 0)}
/* Giant ghost word behind a light section (Baunfire "Websites"/"Creative") */
.ghostword{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:17vw;font-weight:800;letter-spacing:-.03em;color:rgba(15,19,14,.05);pointer-events:none;white-space:nowrap;z-index:0}
/* Full-screen menu overlay with giant staggered links */
.menu-btn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:0 0 auto;transition:background .25s}
.nav.is-solid .menu-btn,body.menu-open .menu-btn{background:var(--dark)}
.menu-btn:hover,.nav.is-solid .menu-btn:hover,body.menu-open .menu-btn:hover{background:var(--accent-bright)}
.menu-btn span{display:block;width:16px;height:1.6px;background:#fff;border-radius:2px;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s,width .25s}
.menu-btn span:nth-child(2){width:12.8px;align-self:center}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
.menu-ov{position:fixed;inset:0;background:var(--bg);z-index:50;opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.22,1,.36,1);display:flex;align-items:center}
/* Nav sits above the white overlay — flip its light-on-dark pieces to ink */
body.menu-open .brand__name{color:var(--ink)}
body.menu-open .nav .txt-link{color:var(--ink)}
body.menu-open .nav__round{border-color:var(--ink);color:var(--ink)}
body.menu-open .menu-ov{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}
.menu-ov__label{position:absolute;left:46px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;letter-spacing:.32em;text-transform:uppercase;font-size:11px;font-weight:600;color:var(--muted)}
.menu-ov__links{display:flex;flex-direction:column;gap:4px;margin-left:14vw}
.menu-ov__links a{font-size:clamp(38px,5.6vw,68px);font-weight:800;color:var(--ink);text-decoration:none;line-height:1.18;letter-spacing:-.02em;width:max-content;transition:color .25s}
.menu-ov__links a:hover{color:var(--accent)}
.menu-ov__info{position:absolute;right:9vw;bottom:16vh;display:flex;flex-direction:column;gap:11px;font-size:15px;color:var(--muted)}
.menu-ov__info .g{color:var(--accent);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
/* Footer lead row: monogram + tagline | get-in-touch links */
.footer__lead{display:grid;grid-template-columns:1.3fr 1fr;gap:44px;padding-bottom:54px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:56px;align-items:start}
.footer__mono{display:block;margin-bottom:26px}
.footer__mono img{width:88px;display:block}
.footer__tag{font-size:clamp(23px,2.5vw,33px);font-weight:600;color:#fff;line-height:1.35;letter-spacing:-.01em}
.footer__touch{display:flex;flex-direction:column;gap:13px;justify-self:end;align-items:flex-start}
.footer__touch .lab{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--d-muted);font-weight:600}
.footer__touch .g{color:var(--accent-bright);font-size:clamp(17px,1.5vw,20px);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{position:relative;padding:clamp(84px,11vw,150px) 0;overflow:hidden}
.section--tint{background:var(--tint)}
.section--warm{background:var(--bg-warm)}
.section__head{max-width:760px;margin-bottom:62px}
.section__head .lead{margin-top:20px}
.section--center .section__head{margin-left:auto;margin-right:auto;text-align:center}
.section .watermark{color:var(--ink);opacity:.035}

/* ---- featured cars ---- */
.featured__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:56px;flex-wrap:wrap;position:relative;z-index:2}
.featured__head h2{max-width:14ch}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative;z-index:2}
.feat{position:relative;border-radius:8px;overflow:hidden;background:var(--panel);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.feat:hover{transform:translateY(-7px)}
.feat__img{aspect-ratio:16/11;background:#eef2ee;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;border-radius:8px}
.feat__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.feat:hover .feat__img img{transform:scale(1.05)}
.feat__tag{position:absolute;top:16px;left:16px;z-index:2;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;background:rgba(15,19,14,.82);color:#fff;padding:8px 13px;border-radius:7px;backdrop-filter:blur(4px)}
.feat__body{padding:20px 4px 4px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.feat__body h3{font-size:21px}
.feat__body .sub{font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:7px}

/* ---- multi-column parallax sold-cars grid (columns drift on page scroll) ---- */
/* The curtain: opaque, above the hero, rises to cover it as the shutter
   wipe (Baunfire-style). */
.pcars{position:relative;z-index:2;background:var(--bg);overflow:hidden;padding:clamp(84px,11vw,150px) 0;box-shadow:0 -30px 60px rgba(0,0,0,.22)}
.pcars .watermark{left:-3%;top:1%;font-size:24vw;color:var(--ink);opacity:.035}
.pcars__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:56px;position:relative;z-index:2}
.pcars__head h2{max-width:14ch}
.pcars__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.6vw,26px);position:relative;z-index:2;align-items:start}
.pcars__col{display:flex;flex-direction:column;gap:clamp(18px,1.8vw,30px);will-change:transform}
.pcars__col:nth-child(2){margin-top:70px}
.pcars__col:nth-child(3){margin-top:28px}
.pcars__col:nth-child(4){margin-top:98px}
.pcard{position:relative}
.pcard__img{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:#eef2ee}
.pcard__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pcard__img img{transform:scale(1.05)}
.pcard__tag{position:absolute;top:14px;left:14px;z-index:2;font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:rgba(15,19,14,.82);color:#fff;padding:7px 12px;border-radius:6px;backdrop-filter:blur(4px)}
.pcard__body{padding:14px 2px 0}
.pcard__body h3{font-size:18px}
.pcard__body .sub{font-weight:500;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* tablet: 2 columns, gentler stagger; mobile: single column, no parallax */
@media (max-width:900px){
  .pcars__grid{grid-template-columns:repeat(2,1fr)}
  .pcars__col{transform:none!important}
  .pcars__col:nth-child(2){margin-top:54px}
  .pcars__col:nth-child(3),.pcars__col:nth-child(4){margin-top:0}
}
@media (max-width:560px){
  .pcars__grid{grid-template-columns:1fr;gap:22px}
  .pcars__col{margin-top:0!important;gap:22px}
}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;position:relative;z-index:2}
.step{padding:36px 30px;background:var(--bg)}
.step__n{font-weight:700;font-size:14px;color:var(--accent);letter-spacing:.04em;margin-bottom:36px}
.step h3{margin-bottom:10px;font-size:21px}
.step p{font-size:15px;color:var(--muted);margin:0;line-height:1.6}

/* ---- green statement band ---- */
.band{position:relative;background:var(--band);color:#fff;padding:clamp(96px,13vw,176px) 0;overflow:hidden}
.band__inner{position:relative;z-index:3}
.band .eyebrow{color:rgba(255,255,255,.82)}
.band h2{color:#fff;font-size:clamp(36px,5.8vw,78px);max-width:17ch;line-height:1.04}
.band__cta{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.band .watermark{right:-2%;bottom:-12%;font-size:40vw;color:#fff;opacity:.06}
.band .plusgrid{top:14%;right:7%;color:rgba(255,255,255,.3)}
.band .deco-ring{top:24%;left:18%;width:70px;height:70px;color:rgba(255,255,255,.32)}

/* ---- compare ---- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:880px;margin:0;position:relative;z-index:2}
.cmp{padding:46px 40px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.cmp .lab{font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.cmp .big{font-weight:800;font-size:1.9rem;color:var(--ink);line-height:1.08;letter-spacing:-.02em}
.cmp--win{background:var(--dark);border-color:var(--dark)}
.cmp--win .lab{color:var(--accent-bright)}
.cmp--win .big{color:#fff}

/* ---- features ---- */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;position:relative;z-index:2}
.feature .fico{width:52px;height:52px;border-radius:12px;background:var(--bg);border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.feature .fico svg{width:24px;height:24px}
.feature h3{font-size:17px;margin-bottom:9px}
.feature p{font-size:15px;color:var(--muted);margin:0;line-height:1.6}

/* ---- quote ---- */
.quote{max-width:980px;margin:0;text-align:left;position:relative;z-index:2}
.quote .q{font-weight:800;font-size:clamp(28px,4vw,50px);line-height:1.18;color:var(--ink);letter-spacing:-.025em}
.quote .q em{font-style:normal;color:var(--accent)}
.quote .who{font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:32px}

/* ---- CTA (dark, echoes hero) ---- */
.cta{position:relative;background:var(--dark);color:#fff;text-align:left;padding:clamp(96px,12vw,164px) 0;overflow:hidden}
.cta__inner{position:relative;z-index:3}
.cta h2{color:#fff;font-size:clamp(38px,6.2vw,88px);letter-spacing:-.03em}
.cta .lead{color:var(--d-muted);max-width:540px;margin:22px 0 38px}
.cta .watermark{left:50%;bottom:-16%;transform:translateX(-50%);font-size:34vw;color:#fff;opacity:.03}
.cta .plusgrid{top:16%;left:8%;color:rgba(255,255,255,.22)}

/* ============================================================
   FOOTER (dark)
   ============================================================ */
.footer{background:var(--dark);color:var(--d-muted);padding:90px 0 38px;border-top:1px solid var(--d-line)}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:42px}
.footer__brand .fw{font-weight:800;font-size:1.4rem;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.footer__brand .fw em{font-style:normal;color:var(--accent-bright)}
.footer__brand p{margin-top:18px;max-width:320px;font-size:14.5px;color:#8c9a90;line-height:1.7}
.footer__brand .contact{margin-top:20px;font-size:14.5px;line-height:1.9}
.footer__brand .contact a{color:#cfd4cb;text-decoration:none}
.footer__brand .contact a:hover{color:#fff}
.footer h4{color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px}
.footer ul{list-style:none}
.footer li{margin-bottom:12px;font-size:14.5px}
.footer a{color:#c9cdc3;text-decoration:none;transition:color .2s}
.footer a:hover{color:#fff}
.footer__social{margin-top:24px;display:flex;gap:11px}
.footer__social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--d-line);display:flex;align-items:center;justify-content:center;color:#c9cdc3;transition:background .25s,color .25s,border-color .25s}
.footer__social a:hover{background:var(--accent-bright);border-color:var(--accent-bright);color:var(--dark)}
.footer__social svg{width:16px;height:16px}
.footer__legal{border-top:1px solid var(--d-line);margin-top:50px;padding-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#7c8a80;letter-spacing:.04em;text-transform:uppercase}

/* ============================================================
   CUSTOM RING CURSOR (fine pointers)
   ============================================================ */
.cursor{position:fixed;top:0;left:0;width:40px;height:40px;border:1px solid rgba(140,140,140,.7);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .25s,height .25s,opacity .3s;opacity:0}
.cursor__dot{position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;background:var(--accent-bright);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s}
.cursor.is-on,.cursor__dot.is-on{opacity:1}
.cursor.is-hover{width:64px;height:64px}
body.has-cursor,body.has-cursor a,body.has-cursor button,body.has-cursor .btn{cursor:none}

/* ============================================================
   INNER PAGES (page hero, prose, about, pricing, contact, blog)
   ============================================================ */
.page-hero{position:relative;background:var(--dark);color:var(--d-text);overflow:hidden;padding:180px 0 96px}
.page-hero__inner{position:relative;z-index:3}
.page-hero .eyebrow{color:var(--accent-bright)}
.page-hero h1{font-size:clamp(40px,6.6vw,88px);color:#fff;font-weight:800;letter-spacing:-.032em;line-height:1.0;max-width:18ch}
.page-hero .sub{margin-top:26px;max-width:56ch;font-size:clamp(17px,1.5vw,20px);color:var(--d-muted);line-height:1.6}
.page-hero .watermark{right:-2%;bottom:-34%;font-size:32vw;color:#fff;opacity:.03}
.page-hero .plusgrid{top:38%;right:7%;color:rgba(255,255,255,.22)}

.prose{max-width:760px;margin:0 auto}
.prose>p:first-child{font-size:19px;color:var(--ink)}
.prose h2{font-size:clamp(24px,3vw,34px);margin:50px 0 16px}
.prose h3{font-size:20px;margin:34px 0 12px}
.prose p{margin-bottom:18px;color:var(--text);font-size:16.5px;line-height:1.75}
.prose ul,.prose ol{margin:0 0 20px 22px}
.prose li{margin-bottom:10px;color:var(--text);line-height:1.7}
.prose a{color:var(--accent);text-decoration:underline}
.prose strong{color:var(--ink)}
.prose .updated{font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:34px}
.prose figure{margin:44px 0;border-radius:12px;overflow:hidden;line-height:0}
.prose figure img{width:100%;display:block;border-radius:12px}
.prose figcaption{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;letter-spacing:.05em;line-height:1.5;font-style:italic}

.split{display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;align-items:start}
.split h2{max-width:15ch}
.split .lead+.lead{margin-top:18px}

.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid var(--line);padding-top:48px;margin-top:8px}
.stat .num{font-weight:800;font-size:clamp(38px,5vw,62px);color:var(--ink);letter-spacing:-.03em;line-height:1}
.stat .num em{font-style:normal;color:var(--accent)}
.stat .lab{margin-top:12px;font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative;z-index:2}
.price{border:1px solid var(--line);border-radius:12px;padding:40px 34px;background:var(--panel)}
.price--feature{background:var(--dark);border-color:var(--dark);color:#fff}
.price .pname{font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.price--feature .pname{color:var(--accent-bright)}
.price .pbig{font-weight:800;font-size:clamp(34px,4vw,52px);margin:18px 0 4px;letter-spacing:-.02em;color:var(--ink)}
.price--feature .pbig{color:#fff}
.price .pnote{font-size:14.5px;color:var(--muted)}
.price--feature .pnote{color:var(--d-muted)}
.price ul{list-style:none;margin-top:24px}
.price li{padding:11px 0;border-top:1px solid var(--line);font-size:15px;color:var(--muted);display:flex;gap:11px;align-items:flex-start}
.price--feature li{border-top-color:rgba(255,255,255,.14);color:#cfd4cb}
.price li::before{content:"✓";color:var(--accent);font-weight:700}
.price--feature li::before{color:var(--accent-bright)}
.price .btn{margin-top:28px;width:100%;justify-content:center}

.contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:64px;align-items:start}
.contact-info .ci{margin-bottom:32px}
.contact-info .ci .l{font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.contact-info .ci a,.contact-info .ci p{font-size:18px;color:var(--ink);text-decoration:none;line-height:1.5}
.contact-info .ci a:hover{color:var(--accent)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .field{margin-bottom:18px}
.form label{display:block;font-weight:500;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.form input,.form textarea{width:100%;border:1px solid var(--line-strong);border-radius:10px;padding:14px 16px;font-family:inherit;font-size:16px;color:var(--ink);background:var(--bg);transition:border-color .2s}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.form button[disabled]{opacity:.6;cursor:default}
.form label .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);opacity:.7}
.form__note{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.form__status{margin:16px 0 0;font-size:14.5px;line-height:1.5}
.form__status.is-ok{color:var(--accent)}
.form__status.is-err{color:#c0392b}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.post{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);transition:transform .4s cubic-bezier(.2,.7,.2,1);text-decoration:none}
.post:hover{transform:translateY(-6px)}
.post__img{aspect-ratio:16/10;background:linear-gradient(140deg,#e8f1ea,#cbe2d4);overflow:hidden}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.post:hover .post__img img{transform:scale(1.05)}
.post__b{padding:26px;display:flex;flex-direction:column;flex:1}
.post__cat{font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:block}
.post__b h3{font-size:19px;line-height:1.28;margin-bottom:12px;color:var(--ink)}
.post__b p{font-size:14.5px;color:var(--muted);margin-bottom:18px;line-height:1.6}
.post__more{margin-top:auto;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .steps,.features,.feat-grid,.price-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .hero .watermark{font-size:70vw}
  .split,.contact-grid{grid-template-columns:1fr;gap:40px}
  .statrow{gap:24px}
}
@media (max-width:680px){
  .nav{padding:18px 22px}
  .nav__right{gap:16px}
  /* "List your car" text-link is dropped from the compact mobile header
     (it was crowding/overlapping the brand name) — it's the first link in
     the full-screen hamburger menu instead. */
  .nav__right .txt-link{display:none}
  .wrap{padding:0 22px}
  body{font-size:16px}
  .hero{padding:120px 0 60px;min-height:92vh}
  .compare{grid-template-columns:1fr}
  .steps,.feat-grid,.price-grid,.blog-grid{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr;gap:28px}
  .page-hero{padding:140px 0 70px}
  .scroll-ind{display:none}
  .featured__head{align-items:flex-start}
  .menu-ov__label{display:none}
  .menu-ov__links{margin-left:9vw}
  .menu-ov__links a{font-size:clamp(34px,9vw,52px)}
  .menu-ov__info{position:static;margin-left:9vw;margin-top:34px}
  .menu-ov{flex-direction:column;align-items:flex-start;justify-content:center}
  .footer__lead{grid-template-columns:1fr;gap:30px}
  .footer__touch{justify-self:start}
}
@media (max-width:680px){ body.has-cursor,body.has-cursor *{cursor:auto} .cursor,.cursor__dot{display:none} }
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .cursor,.cursor__dot{display:none}
}