/* ============================================================================
   CARABAJAL MOTOR CO. — Cinematic design system
   Lubbock, Texas · "Your word is the whole deal."
   ----------------------------------------------------------------------------
   Layered, architectural, West-Texas dark luxury. Mobile-first.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Ink — deepened, warm-undertoned near-blacks */
  --ink:        #0B0806;
  --ink-2:      #100B08;
  --ink-3:      #15100B;
  --panel:      #16110C;
  --panel-2:    #1B140D;
  --espresso:   #241A12;
  --line:       rgba(245,241,234,0.08);
  --line-2:     rgba(245,241,234,0.12);

  /* Bone / text */
  --bone:       #F5F1EA;
  --bone-soft:  #E7E0D6;
  --bone-dim:   #CFC8C0;
  --taupe:      #9A8F84;
  --taupe-dk:   #6F655C;

  /* Crimson */
  --red:        #C8102E;
  --red-deep:   #9E0B22;
  --red-bright: #E0162F;

  /* Antique gold / bronze */
  --gold:       #C2803F;
  --gold-lt:    #F2C079;
  --gold-hi:    #E6A85C;
  --gold-dk:    #8A5A24;
  --bronze:     #9A6A2F;

  /* Type */
  --f-display: 'Saira', 'Arial Narrow', sans-serif;
  --f-serif:   'Cormorant Garamond', Georgia, serif;
  --f-body:    'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, monospace;

  /* Motion */
  --ease:      cubic-bezier(.2,.7,.2,1);
  --ease-arch: cubic-bezier(.16,1,.3,1);

  --nav-h: 70px;
  --gutter: 7vw;
  --maxw: 1340px;
}

/* ---------- 2. Reset / base --------------------------------------------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--ink);
  color:var(--bone-dim);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
input,textarea,select { font-family:var(--f-body); }
input::placeholder,textarea::placeholder { color:var(--taupe-dk); }
input:focus,textarea:focus,select:focus { outline:none; border-color:var(--gold)!important; }
::selection { background:var(--red); color:var(--bone); }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-track { background:var(--ink); }
*::-webkit-scrollbar-thumb { background:#3a2f27; border-radius:10px; }
*::-webkit-scrollbar-thumb:hover { background:#4d3f33; }

/* ---------- 3. Texture layers (fixed, behind everything) ---------------- */
.tex { position:fixed; inset:0; pointer-events:none; z-index:1; }
.tex-grain {
  inset:-50%; width:200%; height:200%; opacity:.42; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(2) infinite;
}
.tex-blueprint {
  z-index:1;
  background-image:
    linear-gradient(rgba(245,241,234,0.020) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,241,234,0.020) 1px,transparent 1px),
    repeating-linear-gradient(45deg,rgba(194,128,63,0.012) 0,rgba(194,128,63,0.012) 1px,transparent 1px,transparent 9px);
  background-size:70px 70px,70px 70px,auto;
}
.tex-vignette {
  z-index:2;
  background:radial-gradient(135% 108% at 50% 44%,transparent 58%,rgba(4,2,1,0.62));
}
.tex-ct { position:fixed; width:14px; height:14px; z-index:6; opacity:.6; pointer-events:none; }
.tex-ct.bl { bottom:16px; left:16px; border-left:1px solid rgba(194,128,63,.55); border-bottom:1px solid rgba(194,128,63,.55); }
.tex-ct.br { bottom:16px; right:16px; border-right:1px solid rgba(194,128,63,.55); border-bottom:1px solid rgba(194,128,63,.55); }

@keyframes grain {
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-3%,-4%)} 30%{transform:translate(4%,-2%)}
  50%{transform:translate(-2%,3%)} 70%{transform:translate(3%,2%)} 90%{transform:translate(-4%,2%)}
}

/* scroll progress bar */
.scroll-progress {
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:120;
  background:linear-gradient(90deg,var(--red),var(--gold-lt));
  box-shadow:0 0 12px rgba(230,168,92,.6);
  transition:width .1s linear;
}

/* ---------- 4. Layout helpers ------------------------------------------- */
.shell { position:relative; z-index:5; min-height:100vh; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); width:100%; }
.wrap-sm { max-width:1100px; margin:0 auto; padding:0 var(--gutter); }
section { position:relative; }
.divider { border-bottom:1px solid var(--line); }

/* eyebrow / figure label (drafting motif) */
.eyebrow {
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold);
}
.eyebrow .fig { color:var(--taupe-dk); }
.eyebrow .tick { width:26px; height:1px; background:rgba(194,128,63,.5); }
.eyebrow.center { justify-content:center; }

/* headings */
.h-display { font-family:var(--f-display); font-weight:800; color:var(--bone); line-height:.96; letter-spacing:-.015em; }
.h-serif   { font-family:var(--f-serif); font-weight:600; color:var(--bone); line-height:1.06; }
.gold {
  background:linear-gradient(100deg,#9a6a2f 0%,#E6A85C 28%,#C2803F 46%,#F2C079 60%,#C2803F 78%,#9a6a2f 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 6s linear infinite;
}
.serif-italic { font-family:var(--f-serif); font-style:italic; color:var(--gold); }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.lead { font-size:clamp(16px,1.6vw,19px); line-height:1.72; color:var(--bone-dim); }
.muted { color:var(--taupe); }

/* ---------- 5. Buttons --------------------------------------------------- */
.cta {
  position:relative; display:inline-flex; align-items:center; gap:11px; overflow:hidden; isolation:isolate;
  font-family:var(--f-body); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  padding:17px 34px; border-radius:2px; border:1px solid transparent; cursor:pointer;
  transition:transform .45s var(--ease),box-shadow .45s,color .4s,border-color .45s,background .3s;
  will-change:transform;
}
.cta::after {
  content:""; position:absolute; top:0; left:-65%; width:42%; height:100%; z-index:-1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg); transition:left .65s cubic-bezier(.4,0,.1,1); pointer-events:none;
}
.cta:hover::after { left:135%; }
.cta:hover { transform:translateY(-3px); }
.cta:active { transform:translateY(-1px); }
.cta .arr { display:inline-block; transition:transform .45s var(--ease); }
.cta:hover .arr { transform:translateX(5px); }

.cta--primary {
  color:#F8F1EA;
  background:linear-gradient(180deg,#d01531,#a30e25);
  border-color:rgba(255,150,160,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -3px 9px rgba(110,0,11,.5),0 16px 40px -16px rgba(200,16,46,.7);
}
.cta--primary:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -3px 9px rgba(110,0,11,.5),0 26px 56px -16px rgba(200,16,46,.9); }
.cta--cream {
  color:#14100E; background:linear-gradient(180deg,#f7f3ed,#e3dccf); border-color:rgba(0,0,0,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 16px 40px -18px rgba(0,0,0,.6);
}
.cta--cream:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 26px 56px -18px rgba(0,0,0,.72); }
.cta--ghost { color:var(--bone); background:transparent; border-color:rgba(245,241,234,.28); }
.cta--ghost::before {
  content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  transform:translateY(101%); transition:transform .5s cubic-bezier(.5,0,.1,1);
}
.cta--ghost:hover { color:#14100E; border-color:var(--gold); }
.cta--ghost:hover::before { transform:translateY(0); }
.cta--sm { padding:13px 24px; font-size:12px; }

.link-arrow {
  font-family:var(--f-body); font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border-bottom:1px solid rgba(194,128,63,.5); padding-bottom:6px;
  transition:color .2s,border-color .2s;
}
.link-arrow:hover { color:var(--bone); border-color:var(--bone); }

/* ---------- 6. Navigation ----------------------------------------------- */
.nav {
  position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px var(--gutter); background:rgba(14,10,8,.72);
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line); transition:background .3s,box-shadow .3s,padding .3s;
}
.nav.scrolled { background:rgba(11,8,6,.92); box-shadow:0 12px 40px -20px rgba(0,0,0,.9); }
.brand { display:flex; align-items:center; gap:13px; }
.brand .coin-mark {
  position:relative; display:inline-flex; width:44px; height:44px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  background:radial-gradient(60% 60% at 36% 28%,#2c2219,#15100c 72%); border:2px solid rgba(230,168,92,.55);
  box-shadow:inset 0 1px 7px rgba(255,225,180,.26),inset 0 -6px 14px rgba(0,0,0,.55),0 7px 18px -8px rgba(0,0,0,.85);
  align-items:center; justify-content:center;
}
.brand .coin-mark svg { position:relative; width:27px; height:27px; }
.brand .name { display:flex; flex-direction:column; line-height:1; }
.brand .name b { font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:.12em; color:var(--bone); }
.brand .name small { font-family:var(--f-mono); font-size:9px; letter-spacing:.34em; color:var(--gold); margin-top:4px; }

.nav-links { display:flex; gap:30px; align-items:center; }
.nav-links a {
  font-size:13px; font-weight:500; letter-spacing:.03em; color:var(--taupe); white-space:nowrap;
  padding-bottom:4px; border-bottom:2px solid transparent; transition:color .2s,border-color .2s;
}
.nav-links a:hover { color:var(--bone); }
.nav-links a.active { color:var(--bone); border-bottom-color:var(--gold); }
.nav-actions { display:flex; align-items:center; gap:14px; }

.nav-toggle {
  display:none; width:46px; height:46px; border:1px solid var(--line-2); border-radius:4px; background:transparent;
  position:relative; flex:0 0 auto;
}
.nav-toggle span { position:absolute; left:12px; right:12px; height:1.5px; background:var(--bone); transition:transform .35s var(--ease),opacity .2s; }
.nav-toggle span:nth-child(1){ top:16px; } .nav-toggle span:nth-child(2){ top:22px; } .nav-toggle span:nth-child(3){ top:28px; }
body.menu-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* mobile drawer */
body.menu-open { overflow:hidden; }      /* lock background scroll */
.drawer {
  position:fixed; inset:0; z-index:90; background:rgba(8,5,4,.96);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  display:flex; flex-direction:column; justify-content:center; padding:96px 10vw 40px; overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease),visibility .45s;
  background-image:radial-gradient(120% 80% at 80% 0%,rgba(194,128,63,.12),transparent 55%),radial-gradient(100% 70% at 0% 100%,rgba(200,16,46,.10),transparent 55%);
}
body.menu-open .drawer { opacity:1; visibility:visible; }
.drawer a.nav-item {
  font-family:var(--f-display); font-weight:800; font-size:clamp(32px,8.5vw,56px); color:var(--bone-dim);
  letter-spacing:-.01em; padding:12px 0; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:18px;
  opacity:0; transform:translateY(16px); transition:color .25s,padding-left .25s,opacity .5s var(--ease),transform .5s var(--ease);
}
body.menu-open .drawer a.nav-item { opacity:1; transform:none; }
body.menu-open .drawer a.nav-item:nth-child(1){ transition-delay:.10s; }
body.menu-open .drawer a.nav-item:nth-child(2){ transition-delay:.16s; }
body.menu-open .drawer a.nav-item:nth-child(3){ transition-delay:.22s; }
body.menu-open .drawer a.nav-item:nth-child(4){ transition-delay:.28s; }
body.menu-open .drawer a.nav-item:nth-child(5){ transition-delay:.34s; }
.drawer a .n { font-family:var(--f-mono); font-size:13px; letter-spacing:.2em; color:var(--gold); width:34px; }
.drawer a.nav-item:hover,.drawer a.nav-item.active { color:var(--bone); padding-left:10px; }
.drawer a.nav-item.active .n { color:var(--bone); }
.drawer .drawer-foot { margin-top:40px; display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease) .4s,transform .5s var(--ease) .4s; }
body.menu-open .drawer .drawer-foot { opacity:1; transform:none; }
.drawer .drawer-foot span { font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--taupe-dk); text-transform:uppercase; }
.drawer .drawer-foot a.tel { font-family:var(--f-serif); font-size:30px; color:var(--gold); border:none; padding:0; }

/* route cross-fade (smoother view changes) */
#app { transition:opacity .26s var(--ease); will-change:opacity; }
#app.route-fade { opacity:0; }

/* ---------- 7. Pages / view transitions --------------------------------- */
.view { display:none; }
.view.active { display:block; animation:viewIn .6s var(--ease) both; }
@keyframes viewIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

/* ---------- 8. Reveal on scroll ----------------------------------------- */
[data-reveal] { opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease),transform .9s var(--ease); will-change:opacity,transform; }
[data-reveal].shown { opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }

/* ---------- 9. HERO 1 (brand) ------------------------------------------- */
.hero {
  position:relative; height:calc(100vh - var(--nav-h)); min-height:620px; max-height:1060px;
  overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; perspective:1500px;
}
.hero-bg {
  position:absolute; inset:-6%; background-image:url('../img/hero-shop.jpg'); background-size:cover; background-position:center 60%;
  filter:saturate(1.08) contrast(1.06) brightness(.92); will-change:transform;
}
.hero-veil-1 { position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,8,6,.82) 0%,rgba(11,8,6,.42) 30%,rgba(11,8,6,.55) 60%,rgba(11,8,6,.98) 100%); }
.hero-veil-2 { position:absolute; inset:0; background:radial-gradient(120% 82% at 50% 38%,transparent 22%,rgba(6,3,2,.74) 100%); }
.hero-scan { position:absolute; inset:0; mix-blend-mode:overlay; opacity:.4; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,transparent 2px,transparent 4px); }
.hero-sweep { position:absolute; top:-24%; left:6%; width:46%; height:150%; pointer-events:none; will-change:transform;
  background:radial-gradient(closest-side,rgba(230,168,92,.20),transparent 70%); filter:blur(26px); }
.hero-ghost {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; will-change:transform;
}
.hero-ghost span { font-family:var(--f-display); font-weight:800; font-size:34vw; line-height:.8; color:rgba(245,241,234,.045); letter-spacing:.05em; white-space:nowrap; }
.hero-content { position:relative; z-index:3; padding:0 6vw; display:flex; flex-direction:column; align-items:center; will-change:transform; }
.hero h1 { font-size:clamp(46px,8.2vw,140px); letter-spacing:-.015em; line-height:.86; color:var(--bone); text-shadow:0 10px 50px rgba(0,0,0,.7); white-space:nowrap; }
.hero-sub { display:flex; align-items:center; gap:18px; margin-top:16px; }
.hero-sub .rule { width:clamp(30px,6vw,90px); height:1px; }
.hero-sub .rule.l { background:linear-gradient(90deg,transparent,rgba(194,128,63,.8)); }
.hero-sub .rule.r { background:linear-gradient(90deg,rgba(194,128,63,.8),transparent); }
.hero-sub .mc { font-family:var(--f-display); font-weight:700; font-size:clamp(15px,2.4vw,30px); letter-spacing:.46em; padding-left:.46em; }
.hero p.tag { margin-top:28px; max-width:34ch; font-size:clamp(15px,1.6vw,19px); line-height:1.6; color:var(--bone-soft); }
.hero-btns { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
.hero-wordmark { position:relative; }
.scroll-cue { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:5; pointer-events:none; animation:cue 2.4s ease-in-out infinite; }
.scroll-cue span { display:block; width:1px; height:36px; background:linear-gradient(180deg,var(--gold),transparent); }
@keyframes cue { 0%,100%{transform:translate(-50%,0);opacity:.5} 50%{transform:translate(-50%,8px);opacity:1} }

/* coin */
.coin-wrap { margin-bottom:30px; animation:floaty 6s ease-in-out infinite; }
.coin { position:relative; width:150px; height:150px; cursor:grab; perspective:700px; touch-action:none; }
.coin.lg { width:188px; height:188px; perspective:820px; }
.coin .halo { position:absolute; inset:-16px; border-radius:50%; background:radial-gradient(closest-side,rgba(230,168,92,.38),transparent 72%); filter:blur(8px); pointer-events:none; }
.coin .orbit { position:absolute; inset:-8px; border-radius:50%; border:1px dashed rgba(230,168,92,.32); animation:spin 20s linear infinite; pointer-events:none; }
.coin-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; }
.coin-face { position:absolute; inset:0; border-radius:50%; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center; border:2px solid rgba(230,168,92,.55);
  box-shadow:inset 0 2px 12px rgba(255,225,180,.28),inset 0 -12px 26px rgba(0,0,0,.6),0 24px 54px -16px rgba(0,0,0,.9); }
.coin-face.front { background:radial-gradient(60% 60% at 36% 28%,#2c2219,#15100c 72%); }
.coin-face.back { background:radial-gradient(60% 60% at 36% 28%,#261d15,#120d09 72%); transform:rotateY(180deg); flex-direction:column; gap:5px; }
.coin-face .lume { position:absolute; inset:0; mix-blend-mode:screen; }
.coin-face.front .lume { background:conic-gradient(from 210deg,rgba(255,255,255,.2),transparent 60deg,transparent 300deg,rgba(255,255,255,.1)); }
.coin-face.back .lume { background:conic-gradient(from 30deg,rgba(255,255,255,.16),transparent 70deg,transparent 290deg,rgba(255,255,255,.1)); }
.coin-face.back b { font-family:var(--f-display); font-weight:800; font-size:36px; color:var(--gold); line-height:1; position:relative; }
.coin.lg .coin-face.back b { font-size:44px; }
.coin-face.back small { font-family:var(--f-mono); font-size:8px; letter-spacing:.26em; color:#8a7c6c; position:relative; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- 10. HERO 2 (architectural) ---------------------------------- */
.arch { position:relative; height:100vh; min-height:680px; max-height:1080px; overflow:hidden; display:flex; align-items:center; background:var(--ink); perspective:1300px; }
.arch-grid-lg { position:absolute; inset:0; background-image:linear-gradient(rgba(245,241,234,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(245,241,234,.035) 1px,transparent 1px); background-size:78px 78px; }
.arch-grid-sm { position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(245,241,234,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(245,241,234,.022) 1px,transparent 1px); background-size:26px 26px; }
.arch-wash { position:absolute; inset:0; background:radial-gradient(78% 70% at 20% 16%,rgba(194,128,63,.16),transparent 56%),radial-gradient(70% 80% at 92% 104%,rgba(200,16,46,.12),transparent 60%); }
.arch-vign { position:absolute; inset:0; pointer-events:none; background:radial-gradient(125% 95% at 46% 50%,transparent 44%,rgba(4,2,1,.74)); }
.arch-plan { position:absolute; right:-3%; top:50%; transform:translateY(-50%); width:min(58vh,620px); height:min(58vh,620px); pointer-events:none; will-change:transform; }
.arch-tick { position:absolute; width:18px; height:18px; }
.arch-tick.tl { top:22px; left:22px; border-left:1px solid rgba(194,128,63,.5); border-top:1px solid rgba(194,128,63,.5); }
.arch-tick.tr { top:22px; right:22px; border-right:1px solid rgba(194,128,63,.5); border-top:1px solid rgba(194,128,63,.5); }
.arch-tick.bl { bottom:22px; left:22px; border-left:1px solid rgba(194,128,63,.5); border-bottom:1px solid rgba(194,128,63,.5); }
.arch-tick.brr { bottom:22px; right:22px; border-right:1px solid rgba(194,128,63,.5); border-bottom:1px solid rgba(194,128,63,.5); }
.arch-coord { position:absolute; bottom:26px; right:54px; font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; color:var(--taupe-dk); }
.arch-content { position:relative; z-index:3; width:100%; max-width:1220px; margin:0 auto; padding:0 var(--gutter); will-change:transform; }
.arch h2 { margin:0; font-size:clamp(40px,7.4vw,118px); line-height:.9; letter-spacing:-.022em; }
.arch h2 .ln { display:block; overflow:hidden; padding-bottom:.04em; }
.arch h2 .ln > span { display:block; }
.arch-rule { height:1px; transform-origin:left; }
.arch-row { display:flex; flex-wrap:wrap; gap:34px 48px; align-items:flex-end; justify-content:space-between; max-width:840px; }
.arch .ovh { overflow:hidden; }

/* arch animated bits (JS-driven) */
.arch [data-arch-line]{ transform:translateY(115%); transition:transform 1.15s var(--ease-arch); }
.arch [data-arch-rule]{ transform:scaleX(0); transition:transform 1.3s var(--ease-arch); }
.arch.lit [data-arch-line]{ transform:translateY(0); }
.arch.lit [data-arch-rule]{ transform:scaleX(1); }

/* ---------- 11. Marquee trust strip + galleries ------------------------- */
.trust-strip { overflow:hidden; border-bottom:1px solid var(--line); background:var(--ink-2); padding:18px 0; }
.trust-track { display:flex; width:max-content; animation:marquee 32s linear infinite; }
.trust-track .item { display:flex; align-items:center; }
.trust-track .item span { font-family:var(--f-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe); padding:0 30px; }
.trust-track .item i { width:5px; height:5px; border-radius:50%; background:var(--gold); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.gallery { position:relative; padding:100px 0 110px; overflow:hidden;
  background:radial-gradient(120% 80% at 50% -10%,rgba(194,128,63,.12),transparent 55%),linear-gradient(180deg,var(--ink-2),var(--ink-3)); }
.gallery-head { max-width:var(--maxw); margin:0 auto 46px; padding:0 var(--gutter); display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; }
.gallery-head h2 { font-size:clamp(30px,3.8vw,56px); margin-top:14px; white-space:nowrap; }
.gallery-head p { max-width:44ch; font-size:15px; line-height:1.75; color:var(--taupe); }
.marq-row { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.marq-row + .marq-row { margin-top:20px; }
.marq-track { display:flex; gap:20px; width:max-content; padding:10px; will-change:transform; }
.marq-track.a { animation:marqA 80s linear infinite; }
.marq-track.b { animation:marqB 96s linear infinite; }
.marq-row:hover .marq-track { animation-play-state:paused; }
@keyframes marqA { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes marqB { from{transform:translateX(-50%)} to{transform:translateX(0)} }

.car-card {
  position:relative; flex:0 0 auto; width:322px; height:215px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line-2); background:var(--panel); box-shadow:0 24px 50px -24px rgba(0,0,0,.8);
  transition:transform .5s var(--ease),box-shadow .5s,border-color .5s;
}
.car-card img { width:100%; height:100%; object-fit:cover; }
.car-card .glaze { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 24%,transparent 70%,rgba(8,5,4,.45)); }
.car-card:hover { transform:translateY(-10px) scale(1.025); box-shadow:0 38px 70px -22px rgba(0,0,0,.92); border-color:rgba(194,128,63,.55); }
.gallery-foot { max-width:var(--maxw); margin:46px auto 0; padding:0 var(--gutter); display:flex; align-items:center; gap:12px; justify-content:center; flex-wrap:wrap; }
.gallery-foot .plus { display:inline-flex; width:24px; height:24px; border-radius:50%; border:1px solid rgba(194,128,63,.5); align-items:center; justify-content:center; color:var(--gold); }
.gallery-foot span { font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--taupe-dk); }

/* ---------- 12. Buy/Sell split ------------------------------------------ */
.split { display:flex; flex-wrap:wrap; height:min(72vh,580px); min-height:420px; width:100%; }
.split-side { flex:1 1 320px; position:relative; overflow:hidden; display:flex; align-items:flex-end; transition:flex .55s var(--ease); }
.split-side.buy { flex-grow:1.3; border-right:1px solid rgba(14,10,8,.6); }
.split:hover .split-side { flex:1 1 0; }
.split:hover .split-side:hover { flex:2.4 1 0; }
.split-img { position:absolute; inset:0; overflow:hidden; transition:transform .7s var(--ease); }
.split-img img { width:100%; height:100%; object-fit:cover; filter:brightness(.62) saturate(1.05); }
.split-side:hover .split-img { transform:scale(1.06); }
.split-img.buy::after { content:""; position:absolute; inset:0; background:radial-gradient(130% 110% at 18% 8%,rgba(200,16,46,.30),transparent 52%); }
.split-img.sell::after { content:""; position:absolute; inset:0; background:radial-gradient(130% 110% at 82% 8%,rgba(194,128,63,.32),transparent 54%); }
.split-veil { position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,10,8,.25) 0%,rgba(14,10,8,.4) 50%,rgba(14,10,8,.92) 100%); }
.split-body { position:relative; padding:46px 44px; width:100%; }
.split-body .k { font-family:var(--f-mono); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.split-body h3 { font-family:var(--f-display); font-weight:800; font-size:clamp(30px,4vw,52px); line-height:.95; color:var(--bone); text-shadow:0 6px 24px rgba(0,0,0,.6); }
.split-cta { opacity:0; transform:translateY(12px); transition:opacity .4s,transform .4s; margin-top:18px; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone); }
.split-side:hover .split-cta { opacity:1; transform:none; }
.split-cta i { display:inline-flex; width:34px; height:34px; border-radius:50%; align-items:center; justify-content:center; }
.split-cta.buy i { background:var(--red); }
.split-cta.sell i { background:var(--gold); color:#14100E; }

/* ---------- 13. Garage doors -------------------------------------------- */
.bays { padding:118px var(--gutter); max-width:var(--maxw); margin:0 auto; }
.section-head { text-align:center; max-width:680px; margin:0 auto 54px; }
.section-head h2 { font-size:clamp(28px,3.6vw,50px); margin-top:16px; }
.section-head p { margin:16px auto 0; font-size:15px; line-height:1.7; color:var(--taupe); max-width:46ch; }
.bay-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.bay {
  position:relative; height:clamp(380px,40vw,470px); overflow:hidden; border-radius:8px; border:1px solid var(--line-2);
  background:var(--ink-2); cursor:pointer; box-shadow:0 26px 54px -30px rgba(0,0,0,.9); outline:none;
}
.bay-int { position:absolute; inset:0; z-index:1; padding:40px 32px; display:flex; flex-direction:column; justify-content:flex-end;
  background:radial-gradient(130% 72% at 50% -8%,rgba(230,168,92,.24),transparent 56%),linear-gradient(180deg,#1d150f,#100b08); }
.bay-int .light { position:absolute; top:0; left:12%; right:12%; height:5px; border-radius:0 0 6px 6px; background:linear-gradient(90deg,transparent,rgba(255,222,170,.92),transparent); box-shadow:0 0 36px 9px rgba(255,200,120,.32); }
.bay-in { transition:transform .7s var(--ease),opacity .5s; transform:translateY(18px); opacity:.55; }
.bay:hover .bay-in,.bay:focus-within .bay-in { transform:none; opacity:1; }
.bay-in .n { font-family:var(--f-mono); font-size:12px; letter-spacing:.2em; color:var(--gold); }
.bay-in h3 { font-family:var(--f-display); font-weight:800; font-size:28px; color:var(--bone); margin:14px 0 6px; }
.bay-in .s { font-family:var(--f-serif); font-style:italic; font-size:18px; color:var(--gold); margin-bottom:16px; }
.bay-in p { font-size:14.5px; line-height:1.7; color:var(--bone-dim); }
.bay-in .c { display:inline-block; margin-top:22px; font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); border-bottom:1px solid rgba(194,128,63,.55); padding-bottom:6px; }
.bay-door {
  position:absolute; inset:0; z-index:3; border-radius:7px; overflow:hidden; border-bottom:3px solid rgba(0,0,0,.55);
  background:linear-gradient(100deg,#241a13 0%,#34281a 38%,#241a12 60%,#2c2118 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  box-shadow:inset 0 2px 0 rgba(255,225,180,.12); transition:transform .7s cubic-bezier(.4,0,.05,1),box-shadow .7s; will-change:transform;
}
.bay:hover .bay-door,.bay:focus-within .bay-door { transform:translateY(-103%); box-shadow:0 30px 40px -10px rgba(0,0,0,.7); }
.bay-door .slats { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 30px,rgba(0,0,0,.42) 31px,rgba(255,255,255,.06) 33px,rgba(0,0,0,0) 34px); }
.bay-door .dsheen { position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.07) 47%,transparent 58%); }
.bay-door .lab { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:15px; }
.bay-door .emblem { position:relative; display:inline-flex; width:54px; height:54px; border-radius:50%; background:radial-gradient(60% 60% at 36% 28%,#2a2018,#15100c 72%); border:2px solid rgba(230,168,92,.5); box-shadow:inset 0 1px 8px rgba(255,225,180,.2); align-items:center; justify-content:center; }
.bay-door .wt { font-family:var(--f-display); font-weight:800; font-size:26px; letter-spacing:.12em; color:var(--bone); text-shadow:0 2px 10px rgba(0,0,0,.5); }
.bay-door .hint { font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; color:var(--gold); transition:opacity .4s; }
.bay:hover .bay-door .hint { opacity:0; }
.bay-door .handle { position:absolute; bottom:64px; left:28%; right:28%; height:13px; border-radius:7px; background:linear-gradient(180deg,#1a130d,#0c0805); box-shadow:inset 0 1px 0 rgba(255,225,180,.18),0 4px 10px rgba(0,0,0,.5); z-index:2; }

/* ---------- 14. Process steps ------------------------------------------- */
.process { position:relative; padding:120px var(--gutter); background:linear-gradient(180deg,var(--ink-3),#181109); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.process-inner { max-width:1240px; margin:0 auto; }
.process-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:62px; }
.process-head h2 { font-size:clamp(26px,3.3vw,44px); line-height:1.02; margin-top:16px; max-width:18ch; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.step { background:var(--ink-3); padding:44px 38px; }
.step .n { font-family:var(--f-serif); font-weight:600; font-size:56px; color:rgba(194,128,63,.34); line-height:1; }
.step h3 { font-family:var(--f-display); font-weight:800; font-size:21px; color:var(--bone); margin:14px 0 12px; }
.step p { font-size:15px; line-height:1.7; color:var(--taupe); }

/* ---------- 15. Comparison table ---------------------------------------- */
.compare { position:relative; padding:118px var(--gutter); background:linear-gradient(180deg,var(--ink-3),#181109); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.compare-inner { max-width:1140px; margin:0 auto; }
.compare-table { border:1px solid var(--line-2); border-radius:10px; overflow:hidden; background:var(--ink-3); box-shadow:0 30px 60px -34px #000; }
.compare-row { display:grid; grid-template-columns:1.1fr 1fr 1fr; }
.compare-row + .compare-row { border-top:1px solid var(--line); }
.compare-row .label { padding:21px 24px; display:flex; align-items:center; font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe); }
.compare-row .us, .compare-row .them { padding:21px 24px; display:flex; align-items:center; gap:11px; }
.compare-row .us { background:rgba(194,128,63,.06); border-left:1px solid rgba(194,128,63,.28); border-right:1px solid rgba(194,128,63,.28); }
.compare-row .us .mk { flex:0 0 auto; display:inline-flex; width:22px; height:22px; border-radius:50%; background:rgba(194,128,63,.22); color:var(--gold-hi); align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.compare-row .them .mk { flex:0 0 auto; display:inline-flex; width:22px; height:22px; border-radius:50%; background:rgba(245,241,234,.06); color:var(--taupe-dk); align-items:center; justify-content:center; font-size:11px; }
.compare-row .us span:last-child { font-size:15px; color:var(--bone); }
.compare-row .them span:last-child { font-size:15px; color:#857a70; }
.compare-row.head .label { padding:22px 24px; }
.compare-row.head .us { justify-content:center; background:linear-gradient(180deg,rgba(194,128,63,.2),rgba(194,128,63,.04)); }
.compare-row.head .us b { font-family:var(--f-display); font-weight:800; font-size:16px; letter-spacing:.07em; color:var(--bone); }
.compare-row.head .them { justify-content:center; }
.compare-row.head .them b { font-family:var(--f-display); font-weight:700; font-size:15px; letter-spacing:.07em; color:var(--taupe-dk); }

/* ---------- 16. Detailing before/after ---------------------------------- */
.detail { padding:112px var(--gutter); background:var(--ink-2); border-bottom:1px solid var(--line); }
.detail-grid { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:center; }
.detail-copy h2 { font-size:clamp(28px,3.4vw,48px); line-height:.96; margin:16px 0 18px; }
.detail-copy p { font-size:16px; line-height:1.75; color:var(--bone-dim); max-width:42ch; }
.ba {
  position:relative; width:100%; max-width:520px; aspect-ratio:4/3; border-radius:14px; overflow:hidden; user-select:none;
  border:1px solid var(--line-2); box-shadow:0 30px 60px -28px #000; touch-action:none; margin:0 auto;
}
.ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba .after { clip-path:inset(0 45% 0 0); }
.ba .tag { position:absolute; top:12px; font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:5px 10px; border-radius:3px; background:rgba(8,5,4,.7); color:var(--bone); }
.ba .tag.l { left:12px; } .ba .tag.r { right:12px; }
.ba .handle { position:absolute; top:0; bottom:0; left:55%; width:2px; background:var(--bone); cursor:ew-resize; transform:translateX(-50%); }
.ba .handle .grip { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:var(--bone); display:flex; align-items:center; justify-content:center; color:#14100E; font-size:15px; box-shadow:0 6px 18px rgba(0,0,0,.5); }
.detail-media .fb-frame { position:relative; padding:12px; border-radius:16px; border:1px solid var(--line-2); background:linear-gradient(180deg,#16110d,#100b08); box-shadow:0 30px 60px -28px #000,inset 0 1px 0 rgba(255,225,180,.08); width:max-content; margin:0 auto; }
.detail-media iframe { border:none; border-radius:9px; display:block; background:#000; }

/* ---------- 17. Generic feature cards / panels -------------------------- */
.panel { border:1px solid var(--line-2); border-radius:8px; background:linear-gradient(180deg,var(--panel-2),var(--ink-3)); }
.cross-sell { padding:96px var(--gutter); max-width:var(--maxw); margin:0 auto; }
.cross-card { position:relative; overflow:hidden; border:1px solid var(--line-2); border-radius:6px; padding:54px 56px;
  background:radial-gradient(120% 140% at 0% 0%,rgba(194,128,63,.12),transparent 50%),linear-gradient(180deg,var(--panel-2),var(--ink-3));
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; }
.cross-card h3 { font-family:var(--f-serif); font-weight:600; font-size:clamp(26px,3vw,40px); line-height:1.1; color:var(--bone); margin:12px 0 10px; }
.cross-card p { font-size:16px; line-height:1.7; color:var(--bone-dim); max-width:60ch; }
.kicker { font-family:var(--f-mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--taupe); }

/* tilt cards (real photos) */
.tilt { transition:transform .3s var(--ease),box-shadow .3s; transform-style:preserve-3d; will-change:transform; }

/* ---------- 18. Inner page heroes --------------------------------------- */
.page-hero { position:relative; overflow:hidden; padding:120px var(--gutter) 70px; border-bottom:1px solid var(--line); }
.page-hero .bg { position:absolute; inset:0; background:radial-gradient(110% 90% at 80% 0%,rgba(194,128,63,.14),transparent 55%),linear-gradient(180deg,var(--panel-2),var(--ink-3)); }
.page-hero .scan { position:absolute; inset:0; opacity:.4; background-image:repeating-linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 26px,rgba(0,0,0,.3) 27px,rgba(0,0,0,0) 30px); }
.page-hero .inner { position:relative; max-width:1000px; margin:0 auto; }
.page-hero.center .inner { text-align:center; max-width:880px; }
.page-hero h1 { font-family:var(--f-serif); font-weight:600; font-size:clamp(40px,5.6vw,84px); line-height:1.02; color:var(--bone); }
.page-hero p { margin-top:24px; max-width:56ch; font-size:18px; line-height:1.7; color:var(--bone-dim); }
.page-hero.center p { margin-left:auto; margin-right:auto; }
.page-eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.page-eyebrow.center { justify-content:center; }
.page-eyebrow .tick { width:38px; height:1px; background:var(--gold); }
.page-eyebrow span { font-family:var(--f-mono); font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); }

/* ---------- 19. Sell wizard --------------------------------------------- */
.wizard-sec { padding:64px var(--gutter) 110px; }
.wizard { max-width:760px; margin:0 auto; background:linear-gradient(180deg,var(--panel-2),var(--ink-3)); border:1px solid var(--line-2); border-radius:8px; overflow:hidden; box-shadow:0 40px 90px -50px rgba(0,0,0,.9); }
.wiz-progress { padding:30px 40px 24px; border-bottom:1px solid var(--line); }
.wiz-progress .top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.wiz-progress .title { font-family:var(--f-serif); font-weight:600; font-size:26px; color:var(--bone); }
.wiz-progress .eyebrow-s { font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.wiz-bar { height:3px; width:100%; background:rgba(245,241,234,.1); border-radius:3px; overflow:hidden; }
.wiz-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--red),var(--gold)); border-radius:3px; transition:width .5s var(--ease); width:14%; }
.wiz-body { padding:38px 40px 12px; min-height:280px; }
.wiz-step { display:none; }
.wiz-step.active { display:block; animation:viewIn .4s var(--ease) both; }
.field label { display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe); margin-bottom:10px; }
.field label .opt { color:var(--taupe-dk); }
.field input, .field textarea, .form input, .form textarea {
  width:100%; background:#0f0b09; border:1px solid var(--line-2); border-radius:3px; padding:15px 16px;
  color:var(--bone); font-size:16px; transition:border-color .2s;
}
.field textarea, .form textarea { resize:vertical; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.col { display:flex; flex-direction:column; gap:30px; }
.col-sm { display:flex; flex-direction:column; gap:22px; max-width:480px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { font-family:var(--f-body); font-size:14px; font-weight:500; padding:13px 20px; border-radius:2px; transition:all .18s;
  color:var(--bone-dim); background:transparent; border:1px solid var(--line-2); }
.chip:hover { border-color:rgba(194,128,63,.7); color:var(--bone); }
.chip.on { color:#14100E; background:var(--gold); border-color:var(--gold); }
.dropzone { cursor:pointer; border:1.5px dashed rgba(194,128,63,.45); border-radius:6px; padding:46px 24px; text-align:center; background:rgba(194,128,63,.04); transition:border-color .2s,background .2s; }
.dropzone:hover { border-color:var(--gold); background:rgba(194,128,63,.08); }
.dropzone .t { font-family:var(--f-serif); font-size:24px; color:var(--bone); margin-bottom:6px; }
.dropzone .s { font-size:14px; color:var(--taupe); }
.wiz-ballpark { display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:6px; background:linear-gradient(135deg,rgba(194,128,63,.14),rgba(200,16,46,.08)); border:1px solid rgba(194,128,63,.3); margin-bottom:28px; }
.wiz-ballpark .k { font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.wiz-ballpark .v { font-family:var(--f-serif); font-weight:600; font-size:34px; color:var(--bone); line-height:1; }
.wiz-ballpark .d { font-size:12px; color:var(--taupe); margin-top:8px; max-width:46ch; }
.review-row { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); }
.review-row:last-child { border-bottom:none; }
.review-row .k { font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe); }
.review-row .v { font-size:15px; color:var(--bone); text-align:right; }
.wiz-nav { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 40px 30px; }
.btn-ghost { font-family:var(--f-body); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--taupe); background:transparent; border:1px solid var(--line-2); padding:14px 26px; border-radius:2px; transition:color .2s,border-color .2s; }
.btn-ghost:hover { color:var(--bone); border-color:rgba(245,241,234,.4); }
.btn-next { font-family:var(--f-body); font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#14100E; background:var(--gold); border:none; padding:16px 34px; border-radius:2px; transition:background .2s,transform .2s; }
.btn-next:hover { background:var(--gold-hi); transform:translateY(-2px); }
.wiz-note { max-width:760px; margin:26px auto 0; text-align:center; font-size:13px; color:var(--taupe-dk); line-height:1.6; }
.wiz-success { padding:60px 48px; text-align:center; }
.wiz-success h2 { font-family:var(--f-serif); font-weight:600; font-size:clamp(32px,4.4vw,52px); line-height:1.05; color:var(--bone); margin-bottom:18px; }
.wiz-success p { max-width:48ch; margin:0 auto 14px; font-size:17px; line-height:1.7; color:var(--bone-dim); }
.pill { display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:40px; border:1px solid rgba(194,128,63,.3); background:rgba(194,128,63,.06); margin:10px 0 32px; }
.pill .k { font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--taupe); }
.pill .v { font-family:var(--f-body); font-weight:600; font-size:15px; color:var(--gold); }

/* ---------- 20. Inventory / about / contact specifics ------------------- */
.filter-bar { max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:16px 18px; border:1px solid var(--line); border-radius:6px; background:var(--panel); opacity:.75; }
.filter-bar .f-label { font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe-dk); margin-right:6px; }
.filter-bar .f-chip { font-size:14px; color:var(--taupe); border:1px solid var(--line-2); border-radius:40px; padding:9px 18px; }
.filter-bar .f-soon { margin-left:auto; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--gold); }
.inv-grid { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.inv-card { position:relative; border-radius:6px; overflow:hidden; border:1px solid var(--line); background:var(--panel); }
.inv-card .ph { position:relative; aspect-ratio:16/10; overflow:hidden; }
.inv-card .ph img { width:100%; height:100%; object-fit:cover; filter:brightness(.85); }
.inv-card .soon { position:absolute; top:14px; left:14px; font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#14100E; background:var(--gold); padding:5px 10px; border-radius:2px; }
.inv-card .body { padding:20px 22px; }
.inv-card .body .t { font-family:var(--f-serif); font-weight:600; font-size:22px; color:var(--bone); }
.inv-card .body .row { margin-top:8px; display:flex; justify-content:space-between; align-items:center; }
.inv-card .body .row .mi { font-size:14px; color:var(--taupe); }
.inv-card .body .row .pr { font-family:var(--f-mono); font-size:13px; color:var(--gold); }
.notify { max-width:760px; margin:0 auto; text-align:center; border:1px solid var(--line-2); border-radius:8px; padding:54px 44px; background:radial-gradient(120% 130% at 50% 0%,rgba(194,128,63,.1),transparent 55%),linear-gradient(180deg,var(--panel-2),var(--ink-3)); }
.notify h2 { font-family:var(--f-serif); font-weight:600; font-size:clamp(28px,3.4vw,42px); line-height:1.08; color:var(--bone); margin-bottom:14px; }
.notify p { max-width:46ch; margin:0 auto 28px; font-size:16px; line-height:1.7; color:var(--bone-dim); }
.notify-form { display:flex; gap:12px; max-width:460px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
.notify-form input { flex:1; min-width:240px; }
.confirm-pill { display:inline-flex; align-items:center; gap:12px; padding:15px 26px; border-radius:40px; border:1px solid rgba(194,128,63,.4); background:rgba(194,128,63,.08); }
.confirm-pill i { width:8px; height:8px; border-radius:50%; background:var(--gold); }
.confirm-pill span { font-size:15px; color:var(--bone); }

.story { padding:100px var(--gutter); max-width:1100px; margin:0 auto; }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.story-img { position:relative; aspect-ratio:4/3; border:1px solid var(--line-2); border-radius:6px; overflow:hidden; box-shadow:0 30px 60px -30px #000; }
.story-img img { width:100%; height:100%; object-fit:cover; }
.story-img .glaze { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 28%,transparent 72%,rgba(8,5,4,.42)); }
.story-img .badge { position:absolute; top:14px; left:14px; font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; color:var(--bone); background:rgba(8,5,4,.6); padding:5px 10px; border-radius:3px; }
.story-copy h2 { font-family:var(--f-serif); font-weight:600; font-size:clamp(28px,3.4vw,42px); line-height:1.1; color:var(--bone); margin-bottom:20px; }
.story-copy p { font-size:17px; line-height:1.8; color:var(--bone-dim); }
.story-copy p + p { margin-top:18px; }

.values { padding:30px var(--gutter) 100px; }
.values-inner { max-width:var(--maxw); margin:0 auto; }
.values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.value { background:var(--panel); padding:34px 26px; }
.value .n { font-family:var(--f-mono); font-size:12px; color:var(--gold); margin-bottom:14px; }
.value h3 { font-family:var(--f-serif); font-weight:600; font-size:26px; color:var(--bone); margin-bottom:10px; }
.value p { font-size:14px; line-height:1.65; color:var(--taupe); }

.keyhole-meaning { padding:0 var(--gutter) 110px; }
.keyhole-card { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:.7fr 1.3fr; gap:50px; align-items:center; border:1px solid var(--line-2); border-radius:8px; padding:54px 56px; background:linear-gradient(180deg,var(--panel-2),var(--ink-3)); }
.keyhole-card .coin-col { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.keyhole-card .coin-col .drag { font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--taupe-dk); }
.keyhole-card h3 { font-family:var(--f-serif); font-weight:600; font-size:clamp(26px,3vw,40px); line-height:1.1; color:var(--bone); margin:14px 0 16px; }
.keyhole-card p { font-size:17px; line-height:1.8; color:var(--bone-dim); }

.contact-sec { padding:64px var(--gutter) 110px; }
.contact-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:54px; }
.contact-info { display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom:24px; }
.contact-info .cell { background:var(--panel); padding:28px 30px; }
.contact-info .cell .k { font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe-dk); margin-bottom:10px; }
.contact-info .cell .v { font-family:var(--f-serif); font-size:26px; color:var(--bone); }
.contact-info .cell a.v { color:var(--gold); }
.contact-info .cell .s { font-size:15px; color:var(--taupe); margin-top:4px; }
.map-frame { position:relative; aspect-ratio:16/9; border:1px solid var(--line-2); border-radius:6px; overflow:hidden; box-shadow:0 24px 50px -28px #000; }
.map-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.32) contrast(1.06) brightness(.86); }
.map-badge { position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:8px; pointer-events:none; }
.map-badge span { font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone); background:rgba(8,5,4,.78); padding:6px 11px; border-radius:3px; backdrop-filter:blur(4px); }
.map-dir { position:absolute; bottom:12px; right:12px; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#14100E; background:var(--gold); padding:8px 13px; border-radius:3px; box-shadow:0 6px 16px rgba(0,0,0,.4); transition:transform .2s,background .2s; }
.map-dir:hover { background:var(--gold-hi); transform:translateY(-2px); }
.form { border:1px solid var(--line-2); border-radius:8px; padding:40px; background:linear-gradient(180deg,var(--panel-2),var(--ink-3)); }
.form h2 { font-family:var(--f-serif); font-weight:600; font-size:30px; color:var(--bone); margin-bottom:8px; }
.form .sub { font-size:15px; color:var(--taupe); margin-bottom:26px; }
.form .stack { display:flex; flex-direction:column; gap:18px; }
.form label { display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe); margin-bottom:9px; }
.form .sent { text-align:center; padding:30px 10px; }
.form .sent h2 { margin-bottom:12px; }
.form .sent p { font-size:16px; line-height:1.7; color:var(--bone-dim); max-width:36ch; margin:0 auto; }

/* ---------- 21. Footer --------------------------------------------------- */
.footer { border-top:1px solid var(--line); background:var(--ink); padding:74px var(--gutter) 40px; position:relative; z-index:5; }
.footer-grid { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer .brand-line { display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.footer .brand-line .coin-mark { width:42px; height:42px; }
.footer .brand-line .coin-mark svg { width:26px; height:26px; }
.footer blockquote { font-family:var(--f-serif); font-style:italic; font-size:22px; color:var(--bone-dim); max-width:24ch; line-height:1.3; }
.footer h4 { font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe-dk); margin-bottom:18px; }
.footer p { font-size:15px; line-height:1.9; color:var(--bone-dim); }
.footer a:hover { color:var(--gold); }
.footer-bottom { max-width:var(--maxw); margin:54px auto 0; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; }
.footer-bottom span { font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--taupe-dk); }
.footer-bottom a { color:var(--taupe-dk); }
.footer-bottom a:hover { color:var(--gold); }

/* ---------- 22. Responsive ---------------------------------------------- */
@media (max-width:1100px) {
  .detail-grid, .story-grid, .contact-grid, .keyhole-card { grid-template-columns:1fr; gap:40px; }
  .values-grid { grid-template-columns:repeat(2,1fr); }
  .keyhole-card .coin-col { order:2; }
}
@media (max-width:880px) {
  :root { --nav-h:64px; --gutter:6vw; }
  .nav-links, .nav-actions .cta { display:none; }
  .nav-toggle { display:block; }
  .bay-grid, .steps, .inv-grid { grid-template-columns:1fr; }
  .compare { padding-left:0; padding-right:0; }
  .compare-inner { max-width:none; }
  .compare-table { border-radius:0; border-left:none; border-right:none; }
  .compare-row { grid-template-columns:1.2fr .9fr .9fr; }
  .compare-row .label { padding:14px 16px; font-size:10px; }
  .compare-row .us, .compare-row .them { padding:14px 12px; gap:7px; }
  .compare-row .us span:last-child, .compare-row .them span:last-child { font-size:13px; }
  .arch h2 { font-size:clamp(34px,9vw,72px); }
  .arch-plan { opacity:.4; right:-20%; }
  .gallery-head h2, .detail-copy h2 { white-space:normal; }
  .hero h1 { white-space:normal; }
  .split { height:auto; flex-direction:column; }
  .split-side, .split-side.buy { flex:1 1 auto; min-height:340px; border-right:none; border-bottom:1px solid rgba(14,10,8,.6); }
  .split:hover .split-side, .split:hover .split-side:hover { flex:1 1 auto; }
  .split-cta { opacity:1; transform:none; }
  .wiz-body, .wiz-progress, .wiz-nav { padding-left:24px; padding-right:24px; }
  .grid-2 { grid-template-columns:1fr; gap:18px; }
  .process, .compare-inner { }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-grid > div:first-child { grid-column:1 / -1; }
}
@media (max-width:560px) {
  body { font-size:15px; }
  .values-grid { grid-template-columns:1fr; }
  .cross-card, .keyhole-card, .notify, .form { padding:34px 26px; }
  .story, .bays, .process, .compare, .detail, .values, .gallery { padding-top:80px; padding-bottom:80px; }
  .page-hero { padding-top:96px; }
  .detail { padding-left:var(--gutter); padding-right:var(--gutter); }
  .bay-int { padding:30px 24px; }
  .footer-grid { grid-template-columns:1fr; }
  .filter-bar .f-soon { margin-left:0; width:100%; }
  .car-card { width:264px; height:176px; }
  .wiz-ballpark { flex-direction:column; align-items:flex-start; }
}

/* ============================================================================
   24. GRAPHICS UPGRADE — animated backgrounds, depth, 3D, premium texture
   ========================================================================== */

/* ---- 24.1 Drifting aurora (lives behind transparent sections) ---------- */
.bg-aurora { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-aurora span { position:absolute; display:block; border-radius:50%; filter:blur(90px); mix-blend-mode:screen; opacity:.55; will-change:transform; }
.bg-aurora span:nth-child(1){ width:60vmax; height:60vmax; left:-15vmax; top:-22vmax; background:radial-gradient(closest-side,rgba(200,16,46,.20),transparent 70%); animation:aur1 28s ease-in-out infinite alternate; }
.bg-aurora span:nth-child(2){ width:54vmax; height:54vmax; right:-18vmax; top:18vmax;  background:radial-gradient(closest-side,rgba(194,128,63,.18),transparent 70%); animation:aur2 34s ease-in-out infinite alternate; }
.bg-aurora span:nth-child(3){ width:48vmax; height:48vmax; left:22vmax; bottom:-24vmax; background:radial-gradient(closest-side,rgba(150,52,24,.16),transparent 70%); animation:aur3 42s ease-in-out infinite alternate; }
@keyframes aur1 { to { transform:translate(18vmax,14vmax) scale(1.2); } }
@keyframes aur2 { to { transform:translate(-16vmax,-10vmax) scale(1.15); } }
@keyframes aur3 { to { transform:translate(-12vmax,-16vmax) scale(1.25); } }

/* ---- 24.2 Cursor-follow bloom (desktop) -------------------------------- */
.cursor-glow {
  position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%;
  pointer-events:none; z-index:3; opacity:0; mix-blend-mode:screen; will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(230,168,92,.10),rgba(200,16,46,.04) 45%,transparent 72%);
  transition:opacity .5s ease;
}

/* ---- 24.3 Hero cinematics: ember canvas + volumetric god-rays ---------- */
.hero-fx { position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero h1 { text-shadow:0 10px 50px rgba(0,0,0,.7), 0 0 60px rgba(230,168,92,.06); }

/* ---- 24.4 Premium gradient ring (key panels) --------------------------- */
.cross-card, .notify, .keyhole-card, .wiz-ballpark { position:relative; }
.cross-card::before, .notify::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:.6;
  background:conic-gradient(from 140deg, rgba(194,128,63,.55), rgba(200,16,46,.28) 35%, rgba(194,128,63,.12) 55%, rgba(194,128,63,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
}

/* ---- 24.5 3D tilt glare ------------------------------------------------ */
.tilt { position:relative; }
.tilt-glare {
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s; mix-blend-mode:screen; z-index:4;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%), rgba(255,236,200,.22), transparent 60%);
}
.tilt:hover .tilt-glare { opacity:1; }

/* ---- 24.6 Upgraded buy/sell placeholders (no photos) ------------------- */
.split-img.buy  { background:radial-gradient(120% 120% at 16% 6%,rgba(40,20,14,.9),transparent 60%),linear-gradient(135deg,#251710,#120c09 55%,#1d130e); }
.split-img.sell { background:radial-gradient(120% 120% at 84% 6%,rgba(40,28,16,.9),transparent 60%),linear-gradient(135deg,#261b12,#130d09 55%,#1e150e); }
.split-hatch { position:absolute; inset:0; opacity:.55; }
.split-side.buy  .split-hatch { background:repeating-linear-gradient(115deg,rgba(255,255,255,.032) 0,rgba(255,255,255,.032) 2px,transparent 2px,transparent 11px); }
.split-side.sell .split-hatch { background:repeating-linear-gradient(245deg,rgba(255,255,255,.032) 0,rgba(255,255,255,.032) 2px,transparent 2px,transparent 11px); }
.split-keyhole { position:absolute; bottom:-15%; width:64%; height:auto; opacity:.12; animation:floaty 8s ease-in-out infinite; }
.split-side.buy  .split-keyhole { right:-6%; }
.split-side.sell .split-keyhole { left:-6%; }
.split-sheen { position:absolute; inset:0; pointer-events:none; transform:translateX(-35%); transition:transform 1.1s var(--ease);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.07) 50%,transparent 62%); }
.split-side:hover .split-sheen { transform:translateX(35%); }

/* ---- 24.7 Coming-soon cards (for-sale sections) ------------------------ */
.soon-card {
  position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--line-2); aspect-ratio:16/11;
  background:linear-gradient(135deg,#1b140e,#100b08); box-shadow:0 24px 50px -28px #000; transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;
}
.soon-card:hover { transform:translateY(-8px); border-color:rgba(194,128,63,.5); box-shadow:0 34px 64px -26px rgba(0,0,0,.9); }
.soon-card .mesh { position:absolute; inset:0; background:radial-gradient(80% 62% at 28% 18%,rgba(194,128,63,.20),transparent 60%),radial-gradient(72% 60% at 82% 92%,rgba(200,16,46,.14),transparent 60%); }
.soon-card .bp { position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(245,241,234,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(245,241,234,.045) 1px,transparent 1px); background-size:30px 30px; }
.soon-card .ghost { position:absolute; right:-10%; bottom:-22%; width:64%; height:auto; opacity:.10; }
.soon-card .shine { position:absolute; top:0; left:-60%; width:46%; height:100%; pointer-events:none; transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent); animation:soonShine 5s ease-in-out infinite; }
.soon-card .label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:0 20px; }
.soon-card .label .tag { font-family:var(--f-mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
.soon-card .label .ln { font-family:var(--f-serif); font-style:italic; font-size:21px; color:var(--bone-dim); }
@keyframes soonShine { 0%{ left:-60%; } 55%,100%{ left:150%; } }

/* ---- 24.8 Car-card hover sheen (gallery) ------------------------------- */
.car-card::after { content:""; position:absolute; top:0; left:-60%; width:42%; height:100%; pointer-events:none; transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent); transition:left .7s var(--ease); }
.car-card:hover::after { left:150%; }

/* ---- 24.9 Section depth accents --------------------------------------- */
.bays, .cross-sell, .story, .values, .keyhole-meaning { position:relative; z-index:1; }
.gallery { box-shadow:inset 0 1px 0 rgba(255,225,180,.05), inset 0 -60px 120px -60px rgba(0,0,0,.6); }

@media (max-width:880px) { .cursor-glow { display:none; } .bg-aurora span { filter:blur(70px); opacity:.45; } }

/* ---------- 23. Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .tex-grain, .hero-wordmark .sheen, .coin-wrap, .coin .orbit, .scroll-cue { animation:none!important; }
  [data-reveal] { opacity:1!important; transform:none!important; }
  .arch [data-arch-line]{ transform:none; } .arch [data-arch-rule]{ transform:scaleX(1); }
  .trust-track, .marq-track { animation:none!important; }
}