/* ════════════════════════════════════════════════════════════
   YOUR SUV CLUB — v2 stylesheet
   Heritage Luxury design system + design-taste-frontend pass
   (asymmetric layout support, kinetic CSS motion, hardware-
   accelerated transforms only, prefers-reduced-motion safe)
═══════════════════════════════════════════════════════════════ */

:root {
  --cream:#f3ede0; --cream2:#e9e1cf; --green:#1f4032; --green-dk:#142b22;
  --brass:#b08c4a; --brass-dk:#8a6a32; --ink:#1f2e26; --muted:#6b7570;
  --ease:cubic-bezier(.16,1,.3,1);
}

*       { box-sizing:border-box; }
html    { scroll-behavior:smooth; }
body {
  background:var(--cream);
  color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ── Film grain — fixed, pointer-events-none (never on scroll containers) ── */
body::after {
  content:""; position:fixed; inset:0; z-index:70; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.5; mix-blend-mode:overlay;
}

/* ── Scroll progress bar — pure CSS scroll-timeline, gracefully absent ── */
@supports (animation-timeline:scroll()) {
  .scroll-progress {
    position:fixed; top:0; left:0; right:0; height:2px; z-index:80;
    background:var(--brass); transform:scaleX(0); transform-origin:0 50%;
    animation:progress-grow linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes progress-grow { to { transform:scaleX(1); } }
}

/* ── Typographic primitives ── */
.display {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500; font-style:italic;
  line-height:1.04; letter-spacing:-.012em;
}
.display b { font-style:normal; font-weight:600; }

.smallcaps {
  font-family:'Manrope',sans-serif; font-weight:600; font-size:10.5px;
  letter-spacing:.3em; text-transform:uppercase; color:#6e4f1f;
}
.smallcaps-cream { color:var(--brass); }

.vstamp {
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.34em; text-transform:uppercase;
}

/* ── Hairline rules ── */
.rule     { height:1px; background:var(--brass); opacity:.45; }
.rule-dim { height:1px; background:var(--green);  opacity:.16; }

/* ── Brass corner ornaments ── */
.corner { position:absolute; width:26px; height:26px; border:0 solid var(--brass); }
.corner.tl { top:16px;    left:16px;  border-top-width:1px;    border-left-width:1px;  }
.corner.tr { top:16px;    right:16px; border-top-width:1px;    border-right-width:1px; }
.corner.bl { bottom:16px; left:16px;  border-bottom-width:1px; border-left-width:1px;  }
.corner.br { bottom:16px; right:16px; border-bottom-width:1px; border-right-width:1px; }

/* ── Scroll reveal, staggered via --i ── */
.reveal {
  opacity:0; transform:translateY(20px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal.in { opacity:1; transform:none; }

/* ── Liquid-glass nav (inner edge refraction) ── */
.nav-glass {
  background:rgba(243,237,224,.92);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(31,64,50,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

/* ── Buttons — tactile :active, magnetic-ready ── */
.btn {
  display:inline-flex; align-items:center; gap:10px; padding:15px 28px;
  font-family:'Manrope',sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.26em; text-transform:uppercase; cursor:pointer;
  border-radius:1px; text-decoration:none;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .15s var(--ease);
}
.btn:active            { transform:translateY(1px) scale(.985); }
.btn-brass             { background:var(--brass);    color:var(--ink);   border:1px solid var(--brass); }
.btn-brass:hover       { background:var(--brass-dk); border-color:var(--brass-dk); }
.btn-green             { background:var(--green);    color:var(--cream); border:1px solid var(--green); }
.btn-green:hover       { background:var(--green-dk); border-color:var(--green-dk); }
.btn-ghost-cream       { background:transparent; color:var(--cream); border:1px solid rgba(243,237,224,.6); }
.btn-ghost-cream:hover { background:var(--cream); color:var(--ink);   border-color:var(--cream); }
.btn-ghost-green       { background:transparent; color:var(--green); border:1px solid rgba(31,64,50,.4); }
.btn-ghost-green:hover { background:var(--green); color:var(--cream); border-color:var(--green); }
.btn .arr              { transition:transform .3s var(--ease); }
.btn:hover .arr        { transform:translateX(4px); }

.magnetic { will-change:transform; transition:transform .35s var(--ease); }

/* ── Animated underline link ── */
.ulink {
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:3px; transition:background-size .4s var(--ease); text-decoration:none;
}
.ulink:hover     { background-size:0 1px; }
.ulink .arr      { display:inline-block; transition:transform .3s var(--ease); }
.ulink:hover .arr{ transform:translateX(4px); }

/* ── Kinetic marquee (trust strip) ── */
.marquee        { overflow:hidden; }
.marquee-track  { display:flex; width:max-content; animation:marquee 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-group  { display:flex; align-items:center; flex-shrink:0; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ── Ken Burns drift for full-bleed photo beds ── */
.kenburns { animation:kenburns 28s var(--ease) infinite alternate; }
@keyframes kenburns {
  from { transform:scale(1.02) translate3d(0,0,0); }
  to   { transform:scale(1.11) translate3d(-1.6%,1.2%,0); }
}

/* ── Hero photo → cream fade ── */
.hero-fade {
  position:absolute; left:0; right:0; bottom:0; height:36%;
  background:linear-gradient(to bottom, transparent, var(--cream));
  pointer-events:none;
}

/* ── Atmospheric CSS beds — robust, no remote image dependency ── */
.hero-bed {
  position:absolute; inset:0; overflow:hidden;
  background:
    radial-gradient(120% 85% at 12% 105%, rgba(8,18,13,.92), transparent 60%),
    linear-gradient(168deg, #1c3a2c 0%, #142b22 48%, #0e1f17 100%);
}
.hero-bed::before {
  content:""; position:absolute; top:-12%; right:-8%; width:75%; height:75%;
  background:radial-gradient(closest-side, rgba(176,140,74,.26), transparent 70%);
  animation:glow-drift 22s var(--ease) infinite alternate;
}
.heritage-bed {
  position:absolute; inset:0; overflow:hidden;
  background:
    radial-gradient(110% 100% at 92% 50%, rgba(176,140,74,.15), transparent 62%),
    linear-gradient(90deg, #0c1c14 0%, #142b22 56%, #1c3a2c 100%);
}
.heritage-bed::before {
  content:""; position:absolute; top:8%; right:-6%; width:55%; height:82%;
  background:radial-gradient(closest-side, rgba(176,140,74,.18), transparent 72%);
  animation:glow-drift 26s var(--ease) infinite alternate;
}
@keyframes glow-drift {
  from { transform:translate3d(0,0,0) scale(1);     opacity:.82; }
  to   { transform:translate3d(-7%,6%,0) scale(1.12); opacity:1; }
}

/* ════════════════════════════════════════════════════════════
   Editorial furniture — bold, static-readable design moves
═══════════════════════════════════════════════════════════════ */

/* Persistent margin spine (xl+ only, lives in the page gutter) */
.spine {
  position:fixed; left:0; top:0; bottom:0; width:30px; z-index:40;
  display:none; flex-direction:column; align-items:center;
  justify-content:space-between; padding:118px 0 40px; pointer-events:none;
}
@media (min-width:1440px) { .spine { display:flex; } }
.spine-mark {
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.4em; text-transform:uppercase;
  color:var(--brass); opacity:.7;
}
.spine-line { width:1px; flex:1; margin:20px 0; background:var(--brass); opacity:.32; }
.spine-meta {
  writing-mode:vertical-rl; font-family:'JetBrains Mono',monospace;
  font-size:9.5px; letter-spacing:.3em; color:var(--brass); opacity:.6;
}

/* Oversized display variant — tighter tracking for big headlines */
.display-xl {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500; font-style:italic; line-height:.98; letter-spacing:-.026em;
}
.display-xl b { font-style:normal; font-weight:600; }

/* Running section-index numeral */
.section-no {
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
  font-weight:500; line-height:.78; letter-spacing:-.02em; color:var(--brass);
}

/* Oversized ghosted typographic furniture (background layer) */
.ghost-num {
  position:absolute; font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic; font-weight:500; line-height:.7;
  color:var(--brass); opacity:.11;
  user-select:none; pointer-events:none; z-index:0;
}

/* Hero arc graphic bed */
.hero-arc {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}

/* ── Mobile menu — hamburger + slide-in panel (< lg only) ── */
.mobile-menu-toggle {
  width:44px; height:44px; display:flex; flex-direction:column;
  justify-content:center; align-items:center; gap:5px;
  background:transparent; border:none; cursor:pointer; padding:8px;
  z-index:60;
}
.mobile-menu-toggle span {
  display:block; width:22px; height:1.5px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position:fixed; inset:0; z-index:55;
  background:rgba(243,237,224,.985);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  transform:translateX(100%);
  transition:transform .5s var(--ease);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-menu.open {
  transform:translateX(0);
}
.mobile-menu-inner {
  padding:108px 28px 60px;
  max-width:600px;
  margin:0 auto;
  min-height:100%;
  display:flex;
  flex-direction:column;
}
.mobile-menu .corner { display:none; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition:none; }
  .mobile-menu-toggle span { transition:none; }
}

/* ── Service rows — directional brass bar on hover ── */
.svc-row { position:relative; }
.svc-row::before {
  content:""; position:absolute; left:-1px; top:0; bottom:0; width:2px;
  background:var(--brass); transform:scaleY(0); transform-origin:50% 0;
  transition:transform .5s var(--ease);
}
.svc-row:hover::before { transform:scaleY(1); }

/* ── Fleet zig-zag imagery ── */
.fleet-img      { overflow:hidden; background:linear-gradient(135deg,#1a3528,#0e1f17); }
.fleet-img img  {
  width:100%; height:100%; object-fit:cover;
  filter:contrast(.96) saturate(.82);
  transition:transform 1.3s var(--ease), filter 1.3s var(--ease);
}
.fleet-row:hover .fleet-img img { transform:scale(1.06); filter:contrast(1) saturate(.95); }

/* ── Armored panel — CSS-art bed + cursor spotlight ── */
.armored-panel {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0e1f17,#1a3528 50%,#0e1f17);
  border:1px solid rgba(176,140,74,.28);
}
.armored-panel::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
            rgba(176,140,74,.22), transparent 70%);
  opacity:0; transition:opacity .4s var(--ease);
}
.armored-panel:hover::after { opacity:1; }

/* ── Corridor map — SVG route self-draw + breathing markers ── */
.route-path {
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 2.3s var(--ease);
}
.route-path.drawn { stroke-dashoffset:0; }
.pulse-ring {
  transform-box:fill-box; transform-origin:center;
  animation:pulse-ring 3.6s var(--ease) infinite;
}
@keyframes pulse-ring {
  0%   { transform:scale(.7);  opacity:.55; }
  70%  { transform:scale(1.5); opacity:0;   }
  100% { transform:scale(1.5); opacity:0;   }
}
.map-grid {
  background-image:
    linear-gradient(rgba(176,140,74,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(176,140,74,.10) 1px,transparent 1px);
  background-size:34px 34px;
}

/* ── FAQ accordion ── */
details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }
.faq-toggle { transition:transform .4s var(--ease); }
details[open] .faq-toggle { transform:rotate(45deg); }

/* ── Focus visibility (a11y) ── */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:2px solid var(--brass); outline-offset:3px; border-radius:1px;
}

/* ════════════════════════════════════════════════════════════
   Carried forward for pages migrating into v2 later
═══════════════════════════════════════════════════════════════ */

/* Editorial body text */
.prose-editorial {
  font-family:'Manrope',sans-serif; font-size:16.5px;
  line-height:1.75; color:rgba(31,46,38,.85);
}
.prose-editorial p          { margin-bottom:1.4em; }
.prose-editorial p:last-child { margin-bottom:0; }
.prose-editorial strong     { color:var(--green); font-weight:600; }

/* Drop cap for editorial pages */
.dropcap::first-letter {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic; font-weight:500; font-size:4.5em; line-height:.8;
  float:left; margin:.1em .12em 0 0; color:var(--brass);
}

/* Form fields (used on /quote and /contact) */
.field-group { margin-bottom:28px; }
.field-label {
  display:block; font-family:'Manrope',sans-serif; font-size:11px;
  font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--green); margin-bottom:10px;
}
.field-input, .field-textarea, .field-select {
  width:100%; padding:14px 16px; background:transparent;
  border:1px solid rgba(31,64,50,.25); border-radius:1px;
  font-family:'Manrope',sans-serif; font-size:15px; color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field-input:focus, .field-textarea:focus, .field-select:focus {
  outline:none; border-color:var(--brass); background:rgba(255,255,255,.4);
}
.field-textarea     { resize:vertical; min-height:120px; }
.field-radio-group  { display:flex; flex-wrap:wrap; gap:10px; }
.field-radio        { position:relative; }
.field-radio input  { position:absolute; opacity:0; pointer-events:none; }
.field-radio label {
  display:inline-block; padding:10px 18px;
  border:1px solid rgba(31,64,50,.25); border-radius:1px;
  font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:500; color:var(--ink);
  cursor:pointer; transition:all .2s var(--ease);
}
.field-radio input:checked + label {
  background:var(--green); color:var(--cream); border-color:var(--green);
}
.field-radio label:hover { border-color:var(--brass); }

/* ── Reduced-motion: strip all kinetic behaviour ── */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .marquee-track, .kenburns, .pulse-ring { animation:none !important; }
  .hero-bed::before, .heritage-bed::before { animation:none !important; }
  .route-path { transition:none; stroke-dashoffset:0; }
  .scroll-progress { display:none; }
  .magnetic { transition:none; }
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}