/* ============================================================
   360 AutoFin — Design System
   "Night Showroom": premium automotive + fintech trust
   Navy #131126 · Gold #c0a772 · White #ffffff
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* core palette */
  --navy:        #131126;
  --navy-950:    #0c0a1b;
  --navy-900:    #110f22;
  --navy-850:    #16142b;
  --navy-800:    #1b1834;
  --navy-700:    #221d40;
  --card:        #181530;
  --card-hi:     #201c3c;

  --gold:        #c0a772;
  --gold-200:    #e7d4a4;
  --gold-100:    #f1e4c4;
  --gold-600:    #a98c52;
  --gold-700:    #8f7541;
  --mint:        #76f0cf;
  --blue:        #82b7ff;

  --white:       #ffffff;
  --cream:       #f6f3ec;
  --paper:       #efe9dd;

  --ink:         #f4f2fb;        /* primary text on dark */
  --muted:       #a7a2c4;        /* secondary text on dark */
  --muted-2:     #756f96;        /* faint text on dark */
  --ink-d:       #1a1733;        /* text on light */
  --muted-d:     #5b5670;        /* secondary text on light */

  --line:        rgba(192,167,114,.20);
  --line-soft:   rgba(255,255,255,.08);
  --glow:        rgba(192,167,114,.16);

  /* type */
  --display: "Sora", "Segoe UI", sans-serif;
  --body: "Open Sans", "Segoe UI", sans-serif;

  /* spacing / radius */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --brand-logo-size: 68px;

  --shadow-1: 0 2px 12px rgba(0,0,0,.25);
  --shadow-2: 0 18px 50px -18px rgba(0,0,0,.65);
  --shadow-gold: 0 18px 50px -22px rgba(192,167,114,.55);

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

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--navy-950);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16.5px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.header-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 25px; pointer-events: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--gold); color: var(--navy-950); }

/* ---------- Atmosphere: grain + page glow ---------- */
body::before {  /* fine grain overlay */
  content: "";
  position: fixed; inset: 0;
  z-index: 9000; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Type ---------- */
h1,h2,h3,h4,h5 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; color: var(--ink); }
h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
p  { color: var(--muted); }
strong { color: var(--ink); font-weight: 700; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600;
  font-size: .78rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-200);
}
.eyebrow::before {
  content: ""; width: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow.center::after {
  content: ""; width: 30px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.text-gold { color: var(--gold-200); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 60ch; }

/* gold gradient text */
.shine {
  background: linear-gradient(100deg, var(--gold-600) 0%, var(--gold-100) 45%, var(--gold) 70%, var(--gold-600) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { position: relative; padding-block: clamp(64px, 9vw, 130px); }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin: 16px 0 18px; }

/* decorative speed-line divider */
.streaks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.streaks span {
  position: absolute; height: 1px; left: -10%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .14;
}
.streaks span:nth-child(1){ top: 22%; animation: slide 9s linear infinite; }
.streaks span:nth-child(2){ top: 48%; width: 28%; animation: slide 7s linear infinite .6s; opacity:.1;}
.streaks span:nth-child(3){ top: 71%; width: 52%; animation: slide 11s linear infinite 1.2s; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(320%);} }

/* radial glow helper */
.glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  padding: 15px 28px; border-radius: 100px; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-200), var(--gold));
  color: var(--navy-950); box-shadow: var(--shadow-gold);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 24px 60px -20px rgba(192,167,114,.7); }
.btn-ghost {
  border: 1px solid var(--line); color: var(--ink);
  background: rgba(255,255,255,.02);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-200); transform: translateY(-3px); background: rgba(192,167,114,.06); }
.btn-hero-outline {
  border: 1px solid rgba(7,6,16,.88);
  color: #f7f3ea;
  background: rgba(12,10,27,.42);
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-hero-outline:hover {
  border-color: #05040c;
  color: #ffffff;
  background: rgba(12,10,27,.68);
  transform: translateY(-3px);
}
.btn-dark { background: var(--navy-900); color: var(--ink); border: 1px solid var(--line-soft); }
.btn-dark:hover { transform: translateY(-3px); border-color: var(--gold); }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { cursor: wait; opacity: .78; }

/* link with arrow */
.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; color: var(--gold-200);
  font-size: .95rem;
}
.tlink svg { width: 16px; transition: transform .3s var(--ease); }
.tlink:hover svg { transform: translateX(5px); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: background .4s var(--ease), border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.site-head.scrolled {
  background: rgba(12,10,27,.82);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
/* refined hairline between the transparent header and the hero — fades out at
   both edges so it reads as a polished divider, not a hard rule. Only at the
   top of the home page; it gives way to the solid border once scrolled. */
body.home .site-head:not(.scrolled)::after {
  content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,167,114,.4) 22%, rgba(192,167,114,.4) 78%, transparent);
  pointer-events: none;
}
/* header spans the full width so the logo hugs the far left and the
   actions hug the far right, with the page padding as the only inset */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 80px; max-width: none; }
.nav .brand { justify-self: start; }
.nav .nav-links { justify-self: center; }
.nav .nav-cta { justify-self: end; }
.nav-cta > * { flex: none; }

/* brand logo */
/* the brand carries the same box in both themes (transparent in dark, a
   chip in light) so the logo never shifts when the theme changes; the header
   pulls it back by the box inset so it still hugs the far left */
.brand { display: inline-flex; align-items: center; gap: 12px; padding: 4px 14px; border: 1px solid transparent; border-radius: 12px; }
.site-head .brand { margin-inline-start: -15px; }
.brand-logo { height: var(--brand-logo-size); width: auto; flex: none; object-fit: contain; }
.site-foot .brand-logo { height: var(--brand-logo-size); }
/* when the real logo image is present, hide the text fallback */
.brand:has(.brand-logo) .gauge-mark,
.brand:has(.brand-logo) .brand-word { display: none; }
.brand .gauge-mark { width: 38px; height: 38px; flex: none; }
.brand-word { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em; line-height: 1; }
.brand-word .n { color: var(--gold); }
.brand-word .a { color: var(--white); }
.brand-word .f { color: var(--gold); }
.brand-sub { display:block; font-family: var(--body); font-weight:600; font-size:.5rem; letter-spacing:.34em; color: var(--muted-2); margin-top: 3px; text-transform: uppercase; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  position: relative; font-family: var(--display); font-weight: 500;
  font-size: .92rem; color: var(--muted); padding: 8px 13px; border-radius: 100px;
  transition: color .25s; white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--gold-200); }

.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-cta .switch {
  display:inline-flex; align-items:center; gap:7px; font-family:var(--display); font-weight:500;
  font-size:.8rem; color: var(--muted); padding: 7px 12px; border:1px solid var(--line-soft); border-radius:100px;
  transition: border-color .25s, color .25s;
}
.nav-cta .switch:hover { color: var(--gold-200); border-color: var(--gold); }
.nav-cta .switch .dot { width:6px; height:6px; border-radius:50%; background: var(--gold); }
/* ---- the gold capsule ----------------------------------------------------
   ONE rule drives both the header CTA and the floating CTA (.float-cta), so
   the two can never drift to different sizes. .float-cta adds only its
   position and motion; everything about how the capsule looks lives here.
   Literal gold + dark ink so it reads the same in both themes. */
.nav-cta .btn-gold,
.float-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  padding: 14px 24px; border: 0; border-radius: 100px; white-space: nowrap;
  background: linear-gradient(180deg, #e7d4a4, #c0a772);
  color: #14101f;
  box-shadow: 0 12px 34px -12px rgba(12,10,27,.55), 0 18px 50px -22px rgba(192,167,114,.55);
}
.nav-cta .btn-gold svg,
.float-cta svg { width: 17px; height: 17px; flex: none; }
.nav-cta .btn-gold:hover,
.float-cta:hover {
  box-shadow: 0 16px 40px -14px rgba(12,10,27,.6), 0 24px 60px -20px rgba(192,167,114,.7);
}
/* one shared step down; both shrink at the same width, together */
@media (max-width: 640px) {
  .nav-cta .btn-gold,
  .float-cta { padding: 13px 20px; font-size: .88rem; }
}

.burger { display:none; width:44px; height:44px; border:1px solid var(--line-soft); border-radius:12px; position:relative; }
.burger span { position:absolute; left:11px; right:11px; height:1.5px; background: var(--ink); transition: .3s var(--ease); }
.burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:21px; } .burger span:nth-child(3){ top:27px; }
.burger.open span:nth-child(1){ top:21px; transform: rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ top:21px; transform: rotate(-45deg); }

/* mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 999; background: rgba(10,8,22,.97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(80px + 18px) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  gap: 0; transform: translateY(-110%); transition: transform .42s var(--ease), visibility .42s var(--ease);
  visibility: hidden; pointer-events: none;
}
.mobile-nav.open { transform: translateY(0); visibility: visible; pointer-events: auto; }
.mobile-nav a {
  display: flex; align-items: baseline;
  font-family: var(--display); font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em;
  color: var(--ink); padding: 15px 2px; border-bottom: 1px solid var(--line-soft);
  transition: color .2s, padding-left .2s var(--ease);
}
.mobile-nav a:hover, .mobile-nav a:active { color: var(--gold-200); padding-left: 8px; }
.mobile-nav a .idx { font-size: .68rem; color: var(--gold); margin-right: 16px; font-family: var(--body); min-width: 20px; letter-spacing: .04em; }
.mobile-nav .m-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 11px; }
.mobile-nav .m-actions .btn { width: 100%; justify-content: center; padding: 13px 22px; font-size: .92rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: clamp(118px, 16vh, 168px) 0 clamp(60px, 9vh, 110px); overflow: hidden;
}

/* full-bleed cinematic background */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; transform: scale(1.12); transform-origin: right center; filter: brightness(1.16) contrast(1.04) saturate(1.06); }
.hero-img-light { display: none; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--navy-950) 0%, var(--navy-950) 30%, rgba(12,10,27,.9) 44%, rgba(12,10,27,.45) 62%, rgba(12,10,27,.1) 82%, transparent 100%),
    linear-gradient(0deg, rgba(12,10,27,.55) 0%, transparent 26%),
    radial-gradient(120% 80% at 0% 50%, rgba(192,167,114,.06), transparent 55%);
}

/* animated headline shine */
.shine.shine-anim { background-size: 220% auto; animation: shineMove 5.5s linear infinite; }
@keyframes shineMove { to { background-position: 220% center; } }

/* hero copy — pinned hard to the left edge of the viewport */
.hero-content {
  position: relative; z-index: 2;
  width: 100%;
  max-width: calc(720px + 2 * var(--pad));
  margin-right: auto;            /* keep the column hugging the left */
  padding-inline: var(--pad);
}
.hero .eyebrow { margin-bottom: 22px; }
.hero h1 {
  margin: 0 0 24px;
  font-size: clamp(2.7rem, 5.35vw, 4.45rem);
  font-weight: 800; line-height: .98; letter-spacing: -.028em;
  max-width: 620px;
}
.hero h1 .ln { display: block; white-space: nowrap; }
.hero h1 .shine { display: inline; }
.hero-desc { font-size: clamp(1.05rem, 1.45vw, 1.22rem); line-height: 1.6; color: var(--muted); max-width: 39ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* integrated credibility row */
.hero-proof {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
.hero-proof-ic {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 11px; color: var(--gold-200);
  background: linear-gradient(160deg, rgba(192,167,114,.2), rgba(192,167,114,.05));
  border: 1px solid var(--line);
}
.hero-proof-ic svg { width: 21px; height: 21px; }
.hero-proof-txt {
  font-size: .92rem; color: var(--muted); line-height: 1.5; max-width: 46ch;
}
.hero-proof-txt b { color: var(--gold-200); font-weight: 700; }

/* floating glass badge — bottom right, over the car */
.hero-badge {
  position: absolute; z-index: 3;
  bottom: clamp(34px, 6vh, 56px); right: clamp(28px, 5vw, 64px);
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 20px 14px 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(27,24,52,.72), rgba(16,14,34,.66));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-soft);
  box-shadow: 0 22px 60px -24px rgba(0,0,0,.85);
}
.hero-badge-ic {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(192,167,114,.12); border: 1px solid var(--line);
  color: var(--gold-200);
}
.hero-badge-ic svg { width: 22px; height: 22px; }
.hero-badge-txt { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; color: var(--muted); line-height: 1.3; max-width: 18ch; }
.hero-badge-txt b { font-family: var(--display); font-size: .95rem; font-weight: 700; color: var(--white); letter-spacing: .01em; }

/* ---------- Marquee ribbon ---------- */
.ribbon { border-block: 1px solid var(--line-soft); background: var(--navy-900); overflow: hidden; }
.ribbon-track { display: flex; gap: 0; white-space: nowrap; animation: marq 30s linear infinite; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-track .it { display:inline-flex; align-items:center; gap: 18px; padding: 18px 0; }
.ribbon-track .it span { font-family: var(--display); font-weight:600; font-size: clamp(1rem,2vw,1.4rem); color: var(--muted); letter-spacing:.02em; }
.ribbon-track .it .star { color: var(--gold); padding-inline: 30px; }
@keyframes marq { to { transform: translateX(-50%);} }

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid { display: grid; gap: clamp(18px, 2.4vw, 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); }

.card {
  position: relative; background: linear-gradient(180deg, var(--card), var(--navy-900));
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(24px,3vw,34px);
  overflow: hidden; transition: transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.card::after { /* gold corner sheen */
  content:""; position:absolute; top:0; left:0; width:120px; height:120px;
  background: radial-gradient(circle at top left, var(--glow), transparent 70%);
  opacity:0; transition: opacity .45s;
}
.card:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: var(--shadow-2); }
.card:hover::after { opacity:1; }

.card .ico {
  position: relative; width: 58px; height: 58px; border-radius: 16px; display:grid; place-items:center;
  background: linear-gradient(160deg, rgba(192,167,114,.22), rgba(192,167,114,.05));
  border: 1px solid var(--line); margin-bottom: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 22px -14px rgba(192,167,114,.6);
  transition: background .4s, box-shadow .4s, transform .4s var(--ease);
}
.card:hover .ico { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px -14px rgba(192,167,114,.85); }
.card .ico svg { width: 27px; height: 27px; color: var(--gold-200); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .96rem; }
.card .num-tag { position:absolute; top: 22px; right: 26px; font-family: var(--display); font-weight:800; font-size: 2.4rem; color: rgba(192,167,114,.12); line-height:1; }

/* feature list with check */
.flist { display:grid; gap: 13px; margin-top: 8px; }
.flist li { display:flex; gap: 12px; align-items:flex-start; color: var(--muted); font-size: .96rem; }
.flist li svg { width:20px; height:20px; flex:none; color: var(--gold); margin-top: 2px; }

/* ---------- Stats band ---------- */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
.stats .s { background: var(--navy-900); padding: clamp(26px,3vw,40px); text-align:center; }
.stats .s b { font-family: var(--display); font-weight:800; font-size: clamp(2.2rem,4vw,3.2rem); color: var(--white); display:block; line-height:1; }
.stats .s b .u { color: var(--gold); }
.stats .s span { display:block; margin-top: 10px; color: var(--muted); font-size: .9rem; letter-spacing:.02em; }

/* ============================================================
   SPLIT / FEATURE SECTIONS
   ============================================================ */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.split.rev .split-media { order: 2; }
.media-card {
  position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--navy-800), var(--navy-950)); min-height: 420px;
  display:grid; place-items:center; box-shadow: var(--shadow-2);
}
.media-card .glow { width: 70%; height: 70%; background: var(--glow); }

/* real-photo feature panel */
.media-photo {
  position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-2); aspect-ratio: 16 / 9;
  background: var(--navy-900);
}
.media-photo.media-photo-portrait { aspect-ratio: 4 / 5; }
.media-photo img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  display: block; filter: brightness(1.04) saturate(1.05);
  transition: transform .9s var(--ease);
}
.media-photo video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; filter: brightness(1.04) saturate(1.05);
}
.media-photo:hover img { transform: none; }
.media-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(12,10,27,.78) 100%);
  pointer-events: none;
}
.media-photo figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: flex; align-items: baseline; gap: 10px;
  padding: 26px clamp(22px,3vw,32px);
}
.media-photo .mp-k { font-family: var(--display); font-weight: 800; font-size: 2rem; color: var(--gold-200); line-height: 1; }
.media-photo .mp-v { font-size: .92rem; color: var(--muted); }
.media-video-player::after { display: none; }

/* ---------- Process / steps ---------- */
.steps { display: grid; gap: 0; }
.step { display:grid; grid-template-columns: 120px 1fr; gap: 30px; padding: 34px 0; border-top: 1px solid var(--line-soft); align-items:start; }
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.step .st-num { font-family: var(--display); font-weight:800; font-size: clamp(2.4rem,5vw,3.6rem); color: transparent; -webkit-text-stroke: 1px var(--gold-600); line-height:1; }
.step:hover .st-num { color: var(--gold); -webkit-text-stroke: 1px var(--gold); transition: .4s; }
.step h3 { margin-bottom: 8px; }
.step p { max-width: 60ch; }

/* ============================================================
   FINSUB CROSS-BRAND BANNER
   ============================================================ */
.bridge {
  position: relative; border-radius: var(--r-xl); overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(192,167,114,.12), transparent 45%),
    linear-gradient(135deg, var(--navy-800), var(--navy-950));
  border: 1px solid var(--line); padding: clamp(34px,5vw,64px);
}
.bridge .b-grid { display:grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items:center; }
.bridge .tag { color: var(--gold-200); }
.bridge h2 { margin: 14px 0 16px; }
.bridge .b-side { display:flex; flex-direction:column; gap: 14px; }
.b-360 { display:flex; align-items:center; gap: 16px; padding: 18px 22px; border:1px solid var(--line-soft); border-radius: var(--r); background: rgba(255,255,255,.02); transition: .35s var(--ease); }
.b-360:hover { border-color: var(--gold); transform: translateX(4px); background: rgba(192,167,114,.05); }
.b-360 .b-logo { font-family: var(--display); font-weight:800; font-size: 1.1rem; }
.b-360 .b-logo .n { color: var(--gold); }
.b-360 .b-logo .x { color: var(--white); }
.b-360 small { display:block; color: var(--muted-2); font-size:.78rem; font-family:var(--body); font-weight:400; letter-spacing:0; }
.b-360 .go { margin-left:auto; color: var(--gold); flex:none; transition: transform .35s var(--ease); }
.b-360:hover .go { transform: translateX(3px); }

/* icon + service-name variant (kills the repeated "360 FinSub" look) */
.b-360 .b-ic {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; color: var(--gold-200);
  background: linear-gradient(160deg, rgba(192,167,114,.2), rgba(192,167,114,.05));
  border: 1px solid var(--line);
}
.b-360 .b-ic svg { width: 22px; height: 22px; }
.b-360 .b-txt { display: flex; flex-direction: column; gap: 3px; }
.b-360 .b-txt strong { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--white); line-height: 1.2; }
.b-360 .b-txt small { color: var(--gold-200); font-size: .74rem; font-family: var(--display); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

/* --- 360 Group: About banner (horizontal strip) --- */
.group-banner {
  position: relative; display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(30px, 4vw, 46px) clamp(28px, 4vw, 54px);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: linear-gradient(110deg, var(--navy-850), var(--navy-950));
  overflow: hidden;
}
.group-banner::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--gold-200), var(--gold-700));
}
.group-banner::after {
  content: ""; position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 65%); pointer-events: none;
}
.group-banner .gb-txt { flex: 1 1 440px; position: relative; z-index: 1; }
.group-banner .gb-txt h2 { margin: 12px 0 12px; }
.group-banner .gb-txt p { max-width: 64ch; }
.group-banner .gb-cta { display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 1; }

/* --- 360 Group: Team symmetrical split --- */
.group-split {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(18px, 4vw, 50px);
  padding: clamp(34px, 5vw, 58px) clamp(28px, 4vw, 56px);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: radial-gradient(120% 130% at 50% -10%, var(--navy-800), var(--navy-950));
}
.group-split .gs-brand { text-align: center; padding: 8px clamp(6px,2vw,20px); transition: transform .35s var(--ease); }
.group-split .gs-brand:hover { transform: translateY(-4px); }
.group-split .gs-brand .nm { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--white); display: block; }
.group-split .gs-brand .nm .n { color: var(--gold); }
.group-split .gs-brand p { margin: 10px auto 16px; max-width: 30ch; font-size: .92rem; }
.group-split .gs-brand .tlink { justify-content: center; }
.group-split .gs-mid {
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(192,167,114,.08); box-shadow: var(--shadow-gold);
}
.group-split .gs-mid b { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--gold-200); line-height: 1; }
.group-split .gs-mid small { font-size: .58rem; letter-spacing: .2em; color: var(--muted-2); margin-top: 2px; }

/* ============================================================
   TEAM
   ============================================================ */
.team-card { text-align:center; display: flex; flex-direction: column; height: 100%; }
.team-card .photo {
  width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 22px; position:relative;
  display:grid; place-items:center;
  background:
    linear-gradient(160deg, var(--navy-700), var(--navy-950)) padding-box,
    linear-gradient(150deg, var(--gold-200), var(--gold-700)) border-box;
  border: 2px solid transparent;
  font-family:var(--display); font-weight:800; font-size:1.9rem;
  background-clip: padding-box, border-box;
  color: var(--gold-200);
  box-shadow: 0 16px 40px -20px rgba(192,167,114,.7), inset 0 2px 10px rgba(0,0,0,.4);
}
.team-card .photo::after { content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid var(--line); }
/* real-photo founder cards */
.team-card .t-photo {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden;
  margin: 0 0 18px; border: 1px solid var(--line); background: var(--navy-800);
}
.team-card .t-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform .6s var(--ease);
}
.team-card .team-photo-placeholder {
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(231,212,164,.14), transparent 34%),
    linear-gradient(145deg, var(--navy-800), var(--navy-950));
}
.team-photo-placeholder span {
  color: var(--gold-200);
  font-family: var(--display);
  font-size: clamp(3rem,6vw,5rem);
  font-weight: 800;
  line-height: 1;
}
.team-photo-placeholder small {
  color: var(--muted-2);
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.team-card .t-photo img.team-portrait-focus { object-position: center 36%; }
.team-card .t-photo img.team-portrait-amit { object-position: center 22%; }
.team-card:hover .t-photo img { transform: scale(1.04); }
.team-card:has(.t-photo) { text-align: left; }

/* group team photo banner */
.team-group {
  position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-2); background: var(--navy-900);
}
.team-group img { width: 100%; max-height: 620px; object-fit: cover; object-position: center 30%; display: block; }
.team-group::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(12,10,27,.85) 100%); }
.team-group figcaption { position: absolute; left: 0; bottom: 0; z-index: 2; padding: clamp(22px,3vw,40px); }
.team-group .tg-k { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem,3vw,2.4rem); color: var(--white); line-height: 1; }
.team-group .tg-v { display: block; margin-top: 8px; color: var(--gold-200); font-size: clamp(.9rem,1.4vw,1.05rem); }

.office-photo img { object-fit: cover !important; min-height: 420px; }

.team-card h3 { font-size: 1.2rem; }
.team-card .role { color: var(--gold-200); font-family:var(--display); font-weight:500; font-size: .88rem; margin: 4px 0 14px; }
.team-card p { font-size: .9rem; }

/* ============================================================
   DEALS / VEHICLE CARDS
   ============================================================ */
.deal {
  position:relative; border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line-soft);
  background: var(--card); transition: transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.deal:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: var(--shadow-2); }
.deal .d-media { height: 200px; position:relative; display:grid; place-items:center; overflow:hidden;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-950)); }
.deal .d-media .badge { position:absolute; top:14px; left:14px; z-index:2; font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:6px 12px; border-radius:100px; background: rgba(192,167,114,.16); color: var(--gold-100); border:1px solid var(--line); }
.deal .d-media svg.car { width: 70%; color: rgba(255,255,255,.14); }
.deal .d-body { padding: 22px 24px 26px; }
.deal .d-body h3 { font-size: 1.25rem; }
.deal .d-meta { display:flex; gap: 16px; margin: 12px 0 16px; flex-wrap:wrap; }
.deal .d-meta span { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color: var(--muted); }
.deal .d-meta span svg { width:15px; color: var(--gold); }
.deal .d-foot { display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--line-soft); }
.deal .d-foot .price { font-family:var(--display); font-weight:800; font-size: 1.3rem; color: var(--white); }
.deal .d-foot .price small { color: var(--muted-2); font-weight:400; font-size:.7rem; display:block; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,4vw,56px); }
.field { margin-bottom: 18px; }
.field label { display:block; font-family:var(--display); font-weight:500; font-size:.82rem; letter-spacing:.04em; color: var(--muted); margin-bottom: 8px; text-transform:uppercase; }
.field input, .field select, .field textarea {
  width:100%; font-family:var(--body); font-size:.98rem; color: var(--ink);
  background: var(--navy-900); border:1px solid var(--line-soft); border-radius: var(--r);
  padding: 14px 16px; transition: border-color .25s, box-shadow .25s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(192,167,114,.1); }
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid { border-color: #b33b46; box-shadow: 0 0 0 4px rgba(179,59,70,.1); }
.field-error {
  display: block;
  min-height: 1.25em;
  margin-top: 6px;
  color: #b33b46;
  font-size: .78rem;
  line-height: 1.35;
}
:root:not([data-theme="light"]) .field-error { color: #ff9ba4; }
.field select { appearance:none; 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='%23c0a772' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 16px center; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap: 16px; }

.info-card { display:flex; gap: 18px; padding: 22px; border:1px solid var(--line-soft); border-radius: var(--r); background: var(--card); transition:.35s; }
.info-card:hover { border-color: var(--line); }
.info-card .ii { width:48px; height:48px; flex:none; border-radius:12px; display:grid; place-items:center; background: rgba(192,167,114,.1); border:1px solid var(--line); }
.info-card .ii svg { width:22px; color: var(--gold-200); }
.info-card h4 { font-family:var(--display); font-weight:600; font-size:1.02rem; margin-bottom:4px; }
.info-card p, .info-card a { color: var(--muted); font-size:.92rem; }
.info-card a:hover { color: var(--gold-200); }

/* form note */
.form-note { font-size:.82rem; color: var(--muted-2); margin-top: 14px; }
.toast { margin-top:16px; padding:14px 18px; border-radius:var(--r); border:1px solid var(--gold); background: rgba(192,167,114,.1); color: var(--gold-100); font-size:.92rem; display:none; }
.toast.show { display:block; animation: pop .4s var(--ease); }
@keyframes pop { from{ opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }

/* ============================================================
   CUSTOMER STORIES
   Four quote cards drifting on their own slow loops, staggered
   into a cluster rather than a row.
   Cards stay dark in BOTH themes: on the light page they read as
   objects lifted off the surface (white cards on #eceef3 were
   near-invisible mush), and in the dark theme they sit above the
   page the way the site's other cards already do.
   The drift lives on .tq and the site-wide [data-reveal] entrance
   lives on the .tq-slot wrapper, so the two transforms never
   fight over the same element.
   Copy is placeholder — the "Sample" tag and the sample
   figcaptions must stay until verified quotes replace them.
   ============================================================ */
.testimonial-section { padding-top: 0; }
.testimonial-stage {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.45fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 92px);
  border-top: 1px solid var(--line-soft);
}
.testimonial-intro h2 { max-width: 12ch; margin-bottom: 16px; text-wrap: balance; }
.testimonial-intro > p { max-width: 42ch; color: var(--muted); }
.testimonial-note {
  display: flex; align-items: baseline; gap: 10px;
  max-width: 40ch;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted-2); font-size: .78rem; line-height: 1.55;
}
.sample-tag {
  flex: none;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 100px;
  font-family: var(--display); font-weight: 700; font-size: .6rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-200);
}

/* --- the cluster --- */
.tq-cluster {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(14px, 1.6vw, 20px);
  align-items: start;
}
/* drop the right-hand column so the four cards read as a cluster
   instead of a 2x2 grid */
.tq-cluster .tq-slot:nth-child(2),
.tq-cluster .tq-slot:nth-child(4) { margin-top: clamp(24px, 3.6vw, 50px); }

.tq {
  position: relative;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--r);
  background: linear-gradient(158deg, #272355 0%, #191634 60%, #131128 100%);
  box-shadow: 0 16px 34px -14px rgba(12,10,27,.55), 0 3px 8px -3px rgba(12,10,27,.4);
  animation: tqDrift var(--q-dur, 8s) ease-in-out var(--q-delay, 0s) infinite;
}
@keyframes tqDrift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--q-lift, 8px) * -1)); }
}
/* each card gets its own period + a negative delay, so they start
   mid-cycle and never drift in lockstep */
.tq-slot:nth-child(1) .tq { --q-dur: 7.4s;  --q-delay: -0.3s; --q-lift: 10px; }
.tq-slot:nth-child(2) .tq { --q-dur: 9.2s;  --q-delay: -3.4s; --q-lift: 7px;  }
.tq-slot:nth-child(3) .tq { --q-dur: 8.1s;  --q-delay: -1.7s; --q-lift: 8px;  }
.tq-slot:nth-child(4) .tq { --q-dur: 10.3s; --q-delay: -5.2s; --q-lift: 6px;  }

.tq-lead { box-shadow: 0 22px 44px -16px rgba(12,10,27,.6), 0 4px 10px -3px rgba(12,10,27,.45); }
.tq-lead::before {
  content: "\201C";
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(42px, 3.6vw, 56px); line-height: .62;
  color: var(--gold);
  margin-bottom: 10px;
}
.tq blockquote {
  font-family: var(--display); font-weight: 500;
  font-size: .96rem; line-height: 1.6;
  color: #efedfa;
  text-wrap: pretty;
}
.tq-lead blockquote {
  font-weight: 600; letter-spacing: -.01em; line-height: 1.5;
  font-size: clamp(1.06rem, 1.35vw, 1.24rem);
}
/* stacked, not wrapped: the cards are different widths, so a
   flex caption broke to two lines on some and not others */
.tq figcaption {
  display: grid; gap: 4px;
  margin-top: 16px;
  font-family: var(--display); font-size: .78rem;
}
.tq figcaption strong { font-weight: 600; color: #ffffff; }
.tq figcaption span { font-weight: 500; color: #a9a3cd; }
.tq figcaption span::before {
  content: ""; display: inline-block;
  width: 4px; height: 4px; margin-right: 9px; border-radius: 50%;
  background: var(--gold); vertical-align: middle;
}

@media (max-width: 900px) {
  .testimonial-stage { grid-template-columns: 1fr; gap: 32px; }
  .testimonial-intro h2 { max-width: 18ch; }
}
@media (max-width: 620px) {
  .tq-cluster { grid-template-columns: 1fr; }
  .tq-cluster .tq-slot:nth-child(2),
  .tq-cluster .tq-slot:nth-child(4) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tq { animation: none; }
}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero { position:relative; padding-top: clamp(140px, 18vh, 200px); padding-bottom: clamp(50px,7vw,90px); overflow:hidden; }
.page-hero .glow-1 { width:520px; height:520px; right:-140px; top:-120px; background: var(--glow); }
.page-hero h1 { font-size: clamp(2.4rem,6vw,4.4rem); margin: 18px 0 20px; }
.page-hero .lead { max-width: 64ch; }
.crumbs { display:flex; gap:10px; align-items:center; font-family:var(--display); font-size:.82rem; color: var(--muted-2); }
.crumbs a:hover { color: var(--gold-200); }
.crumbs .sep { color: var(--gold-600); }

/* ============================================================
   CTA STRIP
   ============================================================ */
.cta-strip { position: relative; padding: clamp(24px,5vw,56px) 0; text-align:center; }
.cta-strip h2 { max-width: 18ch; margin: 14px auto 18px; }
.cta-strip .lead { margin: 0 auto 32px; }
.cta-strip .row { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot {
  position: relative;
  overflow: hidden;
  padding-top: clamp(50px, 7vw, 82px);
  color: #f4f2fb;
  background:
    radial-gradient(80% 70% at 12% 0%, rgba(192,167,114,.14), transparent 48%),
    linear-gradient(180deg, #151225 0%, #0c0a1b 58%, #080713 100%);
  border-top: 1px solid rgba(192,167,114,.18);
}
.site-foot p { color: #b8b2d0; }
.site-foot .brand { padding: 0; border-color: transparent; background: transparent; }
.site-foot .brand-logo { height: var(--brand-logo-size); }
.foot-wrap { position: relative; z-index: 1; max-width: none; }
.foot-main {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.55fr);
  gap: clamp(34px, 6vw, 78px);
  align-items: start;
  padding-bottom: clamp(34px, 5vw, 52px);
}
.foot-brand-block {
  justify-self: start;
  text-align: left;
}
.foot-tag {
  margin-top: 18px;
  max-width: 43ch;
  font-size: .98rem;
  line-height: 1.65;
}
.foot-links {
  display: grid;
  grid-template-columns: minmax(145px, .8fr) minmax(220px, 1.2fr);
  gap: clamp(24px, 4vw, 42px);
}
.foot-col h3 {
  margin-bottom: 16px;
  color: #f4f2fb;
  font-family: var(--display);
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
}
.foot-col a,
.foot-contact p {
  display: block;
  color: #b8b2d0;
  font-size: .94rem;
  line-height: 1.55;
}
.foot-col a { padding: 5px 0; transition: color .25s var(--ease), transform .25s var(--ease); }
.foot-col a:hover { color: #e7d4a4; transform: translateX(3px); }
.foot-contact p { margin: 6px 0 0; max-width: 38ch; }
.foot-contact-lines {
  display: grid;
  gap: 12px;
  max-width: 34ch;
}
.foot-contact-lines a,
.foot-contact-lines p {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  color: #d5cee8;
  line-height: 1.45;
}
.foot-contact-lines span {
  color: #8f89aa;
  font-family: var(--display);
  font-size: .76rem;
  font-weight: 650;
}
.foot-contact-lines a:hover {
  color: #e7d4a4;
  transform: none;
}
.foot-soc {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.foot-soc a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #f4f2fb;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  transition: transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.foot-soc a:hover {
  transform: translateY(-2px);
  color: #e7d4a4;
  border-color: rgba(231,212,164,.62);
  background: rgba(192,167,114,.09);
}
.foot-soc a svg { width: 18px; height: 18px; }
.foot-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-wrap: wrap;
}
.foot-bot p,
.foot-legal {
  color: #8983a8;
  font-size: .84rem;
}
.foot-legal { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.foot-legal a { color: #cdb986; }
.foot-legal a:hover { color: #f1e4c4; }
.foot-legal span { color: #8f7541; }
:root[data-theme="light"] .site-foot .brand {
  background: transparent;
  border-color: transparent;
}
:root[data-theme="light"] .site-foot .brand-logo { height: var(--brand-logo-size); }

/* legal / policy pages */
.legal { max-width: 820px; }
.legal h2 { font-size: clamp(1.3rem,2.2vw,1.6rem); margin: 36px 0 12px; }
.legal h2:first-of-type { margin-top: 8px; }
.legal p { margin-bottom: 14px; }
.legal a { color: var(--gold-200); text-decoration: underline; text-underline-offset: 3px; }
.legal-meta { color: var(--muted-2); font-size: .86rem; }
.legal-list { display: grid; gap: 10px; margin: 6px 0 18px; padding-left: 4px; }
.legal-list li { position: relative; padding-left: 22px; color: var(--muted); font-size: .96rem; }
.legal-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-d="1"]{ transition-delay:.08s;} [data-reveal][data-d="2"]{ transition-delay:.16s;}
[data-reveal][data-d="3"]{ transition-delay:.24s;} [data-reveal][data-d="4"]{ transition-delay:.32s;}
[data-reveal][data-d="5"]{ transition-delay:.40s;} [data-reveal][data-d="6"]{ transition-delay:.48s;}

/* hero load animation */
.hero [data-load] { opacity:0; transform: translateY(28px); animation: heroUp .9s var(--ease) forwards; }
.hero [data-load="1"]{ animation-delay:.1s;} .hero [data-load="2"]{ animation-delay:.24s;}
.hero [data-load="3"]{ animation-delay:.38s;} .hero [data-load="4"]{ animation-delay:.52s;}
.hero [data-load="5"]{ animation-delay:.66s;} .hero [data-load="6"]{ animation-delay:.8s;}
@keyframes heroUp { to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .hero-content { max-width: 560px; }
  .hero-media img { object-position: 72% center; }
  .bridge .b-grid { grid-template-columns: 1fr; }
  .group-split { grid-template-columns: 1fr; gap: clamp(20px,5vw,32px); text-align: center; }
  .group-split .gs-mid { margin: 0 auto; }
  .foot-links { gap: 28px; }
}
/* collapse primary nav to the drawer before it can crowd the CTA */
@media (max-width: 1180px) {
  .nav-links { display:none; }
  .nav-cta .switch { display:none; }
  .burger { display:block; }
}
@media (max-width: 900px) {
  .nav-links, .nav-cta .switch { display:none; }
  .burger { display:block; }
  /* mobile header: logo (left) · Enquire + menu grouped together (right).
     switch to flex so the hidden nav-links column can't strand the CTA in
     the middle — space-between pins the logo left and the CTA group right */
  .nav { display: flex; justify-content: space-between; align-items: center; }
  .nav-cta { gap: 10px; }
  .g-4 { grid-template-columns: repeat(2,1fr); }
  .g-3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .split { grid-template-columns: 1fr; }
  .split.rev .split-media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .foot-main { grid-template-columns: 1fr; }
  .foot-links { grid-template-columns: minmax(145px, .8fr) minmax(220px, 1.2fr); }

  /* stack the hero so copy never sits on top of the car */
  .hero { flex-direction: column; min-height: 0; padding: clamp(100px, 14vh, 132px) 0 0; align-items: stretch; }
  .hero-badge { display: none; }
  .hero-content { order: 1; max-width: 100%; padding-bottom: clamp(30px, 6vw, 46px); }
  .hero-proof { margin-top: 32px; padding-top: 24px; }
  .hero-media { order: 2; position: relative; inset: auto; width: 100%; height: clamp(250px, 46vw, 380px); overflow: hidden; }
  .hero-media img { object-position: right center; transform: scale(1.6); transform-origin: right center; }
  .hero-scrim {
    background:
      linear-gradient(180deg, var(--navy-950) 0%, rgba(12,10,27,.35) 22%, transparent 46%),
      linear-gradient(0deg, var(--navy-950) 0%, transparent 32%);
  }
}
@media (max-width: 620px) {
  :root { --brand-logo-size: 48px; }
  .g-2, .g-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .form-row { grid-template-columns: 1fr; }
  .foot-links { grid-template-columns: 1fr; gap: 24px; }
  .foot-contact p { max-width: none; }
  .foot-bot { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hero h1 { font-size: clamp(2.05rem, 8.8vw, 2.55rem); line-height: 1; letter-spacing: -.024em; }
  .hero h1 .ln { white-space: normal; }
  .hero .eyebrow { font-size: .68rem; letter-spacing: .16em; }
  .hero .eyebrow::before { width: 22px; }
  .hero-media { height: clamp(220px, 56vw, 320px); }
  .hero-actions { flex-direction: column; gap: 12px; align-items: stretch; }
  .hero-actions .btn { width: 100%; max-width: 100%; flex: 0 1 auto; justify-content: center; padding: 14px 22px; font-size: .92rem; }
  .hero-proof { gap: 14px; }
}

/* ============================================================
   SERVICE LIST (services page canonical list — row style,
   deliberately not another card grid)
   ============================================================ */
.svc-list { display: grid; gap: clamp(22px, 3vw, 34px); margin-top: 6px; }
.svc-row {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
  padding: clamp(18px, 2.8vw, 28px) 0;
  border-top: 1px solid var(--line-soft);
}
.svc-row:last-child { border-bottom: 1px solid var(--line-soft); }
.svc-media {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
}
.svc-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.svc-row:hover .svc-media img { transform: scale(1.035); filter: saturate(1.04); }
.svc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,6,18,0) 42%, rgba(7,6,18,.72) 100%),
    linear-gradient(90deg, rgba(7,6,18,.38), rgba(7,6,18,0) 46%);
  pointer-events: none;
}
.svc-media figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(231,212,164,.34);
  background: rgba(7,6,18,.62);
  color: #f5edda;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}
.svc-copy {
  align-self: center;
  display: grid;
  gap: 16px;
  min-width: 0;
}
.svc-row h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.55rem, 2.6vw, 2.25rem);
  line-height: 1.06;
}
.svc-row p { margin: 0; }
.svc-intro {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.72;
  max-width: 70ch;
}
.svc-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.svc-detail-grid > div {
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.svc-detail-grid h4 {
  margin: 0 0 6px;
  color: var(--ink);
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 700;
}
.svc-detail-grid p {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}
.svc-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.svc-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(192,167,114,.08);
  color: var(--muted);
  font-family: var(--display);
  font-weight: 600;
  font-size: .82rem;
}
.svc-points li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 999px;
  background: var(--gold);
}
@media (max-width: 900px) {
  .svc-row { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .svc-list { gap: 16px; }
  .svc-row { gap: 18px; padding: 26px 0; }
  .svc-copy { gap: 14px; }
  .svc-row h3 { font-size: 1.45rem; }
  .svc-detail-grid { grid-template-columns: 1fr; }
  .svc-points li { width: 100%; }
}

/* kicker on the featured service spotlights (a real 01-06 sequence) */
.svc-kicker {
  display: inline-flex; align-items: center; font-family: var(--display);
  font-weight: 600; font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-200);
}

/* ============================================================
   THEME TOGGLE (button)
   ============================================================ */
.theme-toggle {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-soft); border-radius: 12px;
  color: var(--muted); background: rgba(255,255,255,.02);
  transition: color .25s, border-color .25s, background .25s;
}
.theme-toggle:hover { color: var(--gold-200); border-color: var(--gold); background: rgba(192,167,114,.06); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .ic-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ic-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .ic-moon { display: block; }

/* ============================================================
   LIGHT THEME
   Day Showroom: the same navy + gold identity, inverted onto a
   clean light surface. Token-driven, so the whole UI follows.
   The home hero stays cinematic-dark in both themes (see below).
   ============================================================ */
:root[data-theme="light"] {
  --navy:        #e7e9ef;
  --navy-950:    #eceef3;   /* page background */
  --navy-900:    #f6f7fa;   /* raised surface  */
  --navy-850:    #ffffff;
  --navy-800:    #ffffff;
  --navy-700:    #eef0f5;
  --card:        #ffffff;
  --card-hi:     #f7f8fb;

  --ink:         #191627;   /* primary text on light */
  --muted:       #54516a;   /* secondary text        */
  --muted-2:     #6f6c84;   /* faint text            */

  --gold-200:    #806331;   /* gold-as-text/icon, darkened for contrast */
  --gold-100:    #6b531f;

  /* text set to white-on-dark in the dark theme must become ink on the
     light surfaces it now sits on (stats, FinSub badges, group names, prices) */
  --white:       #191627;

  --line:        rgba(160,130,70,.34);
  --line-soft:   rgba(24,21,39,.10);
  --glow:        rgba(192,167,114,.18);

  --shadow-1:    0 2px 12px rgba(24,21,45,.08);
  --shadow-2:    0 18px 50px -22px rgba(24,21,45,.22);
  --shadow-gold: 0 18px 46px -22px rgba(160,130,70,.5);
}

/* keep gold buttons + selection legible (their text must stay dark) */
:root[data-theme="light"] .btn-gold   { color: #14101f; }
:root[data-theme="light"] ::selection  { background: var(--gold); color: #14101f; }

/* signature gold text: darken the ramp so it reads on white */
:root[data-theme="light"] .shine {
  background: linear-gradient(100deg, #6f5526 0%, #9a7836 45%, #806331 70%, #6f5526 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* glassy bars need a light tint when the theme flips */
:root[data-theme="light"] .site-head.scrolled {
  background: rgba(246,247,250,.85);
  border-bottom-color: var(--line-soft);
}
:root[data-theme="light"] .mobile-nav { background: rgba(240,241,245,.97); }

/* theme logos use the same canvas and displayed height in header and footer */
:root[data-theme="light"] .brand {
  background: transparent;
  border-color: transparent;
}
:root:not([data-theme="light"]) .brand-logo {
  content: url("../img/autofin-logo-dark-theme.png");
  height: var(--brand-logo-size);
  filter: none;
}
:root[data-theme="light"] .site-head .brand-logo {
  content: url("../img/autofin-logo-light-theme.png");
  height: var(--brand-logo-size);
  filter: none;
}
:root[data-theme="light"] .site-foot .brand-logo {
  content: url("../img/autofin-logo-dark-theme.png");
  height: var(--brand-logo-size);
  filter: none;
}
.media-photo.about-office-photo img { object-fit: cover; object-position: center; }

/* hero badge: a light glass panel to sit cleanly on the light hero, with a
   readable gold icon and dark copy */
:root[data-theme="light"] .hero-badge {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.74));
  border-color: var(--line-soft);
  box-shadow: 0 22px 60px -28px rgba(24,21,45,.45);
}
:root[data-theme="light"] .hero-badge-ic {
  background: linear-gradient(160deg, rgba(192,167,114,.26), rgba(192,167,114,.08));
  border-color: var(--line);
  color: var(--gold-200);
}
:root[data-theme="light"] .hero-badge-txt { color: var(--muted); }
:root[data-theme="light"] .hero-badge-txt b { color: var(--ink); }

/* LIGHT THEME: the generated car image stays full-bleed behind the whole hero. */
:root[data-theme="light"] .hero-img-dark  { display: none; }
:root[data-theme="light"] .hero-img-light {
  display: block;
  object-position: left center;
  transform: scale(1.035);
  filter: brightness(1.02) contrast(1.09) saturate(1.06);
}
:root[data-theme="light"] .hero { background: var(--navy-950); }
:root[data-theme="light"] .hero-scrim {
  background:
    linear-gradient(90deg, rgba(236,238,243,.78) 0%, rgba(236,238,243,.66) 32%, rgba(236,238,243,.28) 54%, rgba(236,238,243,.08) 78%, transparent 100%),
    linear-gradient(180deg, rgba(236,238,243,.28) 0%, transparent 18%),
    linear-gradient(0deg, rgba(236,238,243,.3) 0%, transparent 24%),
    radial-gradient(120% 80% at 0% 50%, rgba(192,167,114,.10), transparent 55%);
}
:root[data-theme="light"] .hero h1 { color: var(--ink); }
:root[data-theme="light"] .hero-desc,
:root[data-theme="light"] .hero-proof-txt { color: var(--muted); }
:root[data-theme="light"] .hero .eyebrow,
:root[data-theme="light"] .hero-proof-ic { color: var(--gold-200); }
:root[data-theme="light"] .hero .shine {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #8f7541;
}
:root[data-theme="light"] .hero-proof { border-color: var(--line-soft); }
:root[data-theme="light"] .hero-proof-ic {
  background: linear-gradient(160deg, rgba(192,167,114,.18), rgba(192,167,114,.04));
  border-color: var(--line);
}

/* hero CTA: warm and quiet, visible without pulling attention from the car. */
:root[data-theme="light"] .hero .btn-hero-outline {
  border: 1px solid rgba(143,117,65,.28);
  background: linear-gradient(180deg, rgba(241,228,196,.88), rgba(192,167,114,.7));
  color: #191627;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-theme="light"] .hero .btn-hero-outline:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(246,234,204,.98), rgba(192,167,114,.84));
  border-color: rgba(143,117,65,.56);
  color: #14101f;
}

/* Light theme keeps the car as a full hero background on mobile too. */
@media (max-width: 900px) {
  :root[data-theme="light"] .hero {
    min-height: 100svh;
    padding: clamp(100px, 14vh, 132px) 0 clamp(52px, 10vh, 76px);
  }
  :root[data-theme="light"] .hero-content {
    padding-bottom: 0;
  }
  :root[data-theme="light"] .hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    order: 0;
  }
  :root[data-theme="light"] .hero-media img {
    object-position: 57% center;
    transform: scale(1.08);
  }
  :root[data-theme="light"] .hero-scrim {
    background:
      linear-gradient(180deg, rgba(236,238,243,.94) 0%, rgba(236,238,243,.86) 36%, rgba(236,238,243,.62) 66%, rgba(236,238,243,.34) 100%),
      linear-gradient(90deg, rgba(236,238,243,.88) 0%, rgba(236,238,243,.66) 56%, rgba(236,238,243,.26) 100%);
  }
}

/* ============================================================
   FLOATING ENQUIRY CTA
   Fixed pill that rides along while the services list is being
   scrolled, and steps aside once the page's own CTA strip or the
   footer is on screen. Shown/hidden from main.js via .show.
   ============================================================ */
/* position + motion only; the capsule's look and size come from the shared
   rule next to .nav-cta .btn-gold */
.float-cta {
  position: fixed;
  right: clamp(16px, 3vw, 34px);
  bottom: calc(clamp(16px, 3vw, 30px) + env(safe-area-inset-bottom, 0px));
  z-index: 900; /* under the fixed header (1000) and mobile drawer (999) */
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.float-cta.show {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .45s var(--ease), transform .45s var(--ease), box-shadow .35s var(--ease);
}
.float-cta:hover { transform: translateY(-3px); }
.float-cta .arr { transition: transform .35s var(--ease); }
.float-cta:hover .arr { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .float-cta { transform: none; transition: opacity .25s linear, visibility 0s linear .25s; }
  .float-cta.show { transform: none; transition: opacity .25s linear; }
  .float-cta:hover { transform: none; }
}