/* =========================================================
   ROAD & ACRE — Design System
   A quiet, editorial system. Cream is the paper. Green is the
   frame. The interface should almost disappear.
   ========================================================= */

/* Self-hosted, matching the confirmed Road & Acre identity system:
   Fraunces (display), Archivo (body / UI), IBM Plex Mono (labels / meta). */
@font-face{ font-family:'Fraunces'; src:url('../fonts/fraunces-var.woff2') format('woff2'); font-weight:300 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Fraunces'; src:url('../fonts/fraunces-italic.woff2') format('woff2'); font-weight:400 500; font-style:italic; font-display:swap; }
@font-face{ font-family:'Archivo'; src:url('../fonts/archivo-var.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/plexmono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/plexmono-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }

:root{
  /* --- palette v2: cream is the foundation, green is the accent ---
     Refreshed towards a lighter, warmer, more editorial register —
     soft heritage green rather than near-black forest green, cream
     doing most of the work (~70-80% of the page), green reserved for
     navigation, buttons and occasional accents. Every text/background
     pairing below is re-verified against WCAG AA (4.5:1 body text,
     3:1 large text/UI) for the new values — see inline notes. */
  --paper:        #FBF8F2;   /* card surfaces, a touch lighter than the page cream */
  --cream:        #F7F3EC;   /* Primary Cream — warm parchment, the page's foundation */
  --cream-deep:   #EFE7D4;   /* deeper cream for section variation, instead of colour blocks */
  --ink-green:    #3F5445;   /* Deep Heritage Green — nav, masthead, footer only */
  --green-900:    #35473B;
  --green-800:    #3B4F42;
  --green-700:    #46604F;   /* mid heritage green, plate-placeholder gradients */
  --green-line:   #4F6B59;
  --green-soft:   #5F7563;   /* Soft Heritage Green — buttons, accents, the one signature panel */
  --charcoal:     #2F312D;   /* Charcoal — body text */
  --charcoal-70:  rgba(47,49,45,.75);
  --charcoal-66:  rgba(47,49,45,.72); /* WCAG AA: .72 holds 4.5:1+ against the new, lighter cream (was .66 against the old, darker cream) */
  --charcoal-35:  rgba(47,49,45,.34);
  --bronze:       #79613C;   /* literal metal only — never a UI accent */
  --bronze-soft:  rgba(121,97,60,.55);
  --gold-mark:    #B79B63;   /* Warm Gold: small decorative accents and border trims only, never small body text (fails AA at that size) */
  --gold-light:   #DCC79A;   /* AA-safe gold for small text on ink-green (4.94:1) */
  --line:         rgba(47,49,45,.12);
  --line-strong:  rgba(47,49,45,.20);
  --line-on-green:rgba(247,243,236,.20);
  --cream-on-green: rgba(247,243,236,.80); /* WCAG AA: .80 holds 4.5:1+ against the lighter Deep Heritage Green */
  --error:        #8C3123;   /* muted brick, not a harsh system red — 7.4:1 against cream */

  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body:    'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ overflow-x: hidden; }
body.nav-locked{ overflow: hidden; } /* locks background scroll while the mobile menu is open */
body{
  margin: 0;
  background: radial-gradient(130% 60% at 20% 0%, #FBF8F2 0%, var(--cream) 55%);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
button, input, textarea, select{ font-family: inherit; font-size: inherit; color: inherit; }
input, textarea, select{ background: transparent; }

/* fine paper grain, fixed across the whole document */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--charcoal-66);
}
.eyebrow.on-green{ color: var(--cream-on-green); }
.eyebrow.bronze{ color: var(--green-700); }

.display-xl{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(42px, 6.8vw, 96px);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.display-lg{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.display-md{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(25px, 2.9vw, 36px);
  line-height: 1.18;
  letter-spacing: -.008em;
  text-wrap: balance;
}
.display-sm{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.3;
}
em, .italic{ font-style: italic; }
.serif-italic{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

.lede{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--charcoal-70);
}
.body-copy{ font-family: var(--font-body); font-size: 17px; line-height: 1.75; color: var(--charcoal-70); }
.body-copy p + p{ margin-top: 1.3em; }

.label{
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--charcoal-66);
}
.meta{ font-family: var(--font-mono); font-size: 12.5px; color: var(--charcoal-66); letter-spacing: .01em; }

/* ---------- layout ---------- */
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section{ padding: clamp(64px, 10vw, 132px) 0; }
.section.tight{ padding: clamp(40px, 6vw, 76px) 0; }
.on-green{ background: var(--ink-green); color: var(--cream-on-green); }
.on-green .body-copy{ color: rgba(247,243,236,.72); }
.on-cream-deep{ background: var(--cream-deep); }
.on-paper{ background: var(--paper); }

.hairline{ height: 1px; background: var(--line); border: 0; margin: 0; }
.hairline.on-green{ background: var(--line-on-green); }

.rule-divider{ display:flex; align-items:center; gap: 18px; margin: 28px 0; }
.rule-divider::before, .rule-divider::after{ content:""; flex:1; height:1px; background: var(--line); }
.rule-divider span{ font-family: var(--font-display); font-style: italic; color: var(--charcoal-66); font-size: 15px; }

/* ---------- grid utilities ---------- */
.grid{ display: grid; gap: var(--gutter); }
.g2{ grid-template-columns: repeat(2, 1fr); }
.g3{ grid-template-columns: repeat(3, 1fr); }
.g4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .g3{ grid-template-columns: repeat(2,1fr); } .g4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .g2, .g3, .g4{ grid-template-columns: 1fr; } }

/* ---------- masthead (green banner, top of every page) ---------- */
.masthead{
  background: var(--ink-green);
  padding: clamp(24px, 3.4vw, 38px) 0;
  text-align: center;
  border-bottom: 1px solid var(--line-on-green);
}
.masthead-mono{
  height: clamp(46px, 6vw, 68px); width: auto;
  margin: 0 auto 18px;
}
.masthead-word .name{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 2.4vw, 28px); letter-spacing: .15em;
  color: var(--cream);
}
.masthead-word .place{
  display: block; margin-top: 10px;
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(10px, 1vw, 11.5px); letter-spacing: .32em;
  color: var(--gold-light); /* WCAG AA: 4.94:1 against ink-green, holds 4.5:1+ (gold-mark itself only manages 3.07:1 at this size) */
}

/* homepage-only decorative frame around the masthead lockup:
   a single, thin gold rule top and bottom, doubling as the seal's plinth */
.masthead-frame{
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 16px 68px;
  border-top: 1px solid rgba(183,155,99,.5);
  border-bottom: 1px solid rgba(183,155,99,.5);
}

/* ---------- header / nav (sits under the masthead, sticky, same green) ---------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: var(--ink-green);
  border-bottom: 1px solid var(--line-on-green);
}
.site-header .wrap{
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  height: 76px;
}
.brand{ display: flex; align-items: center; justify-self: start; }
.brand-seal{ height: 32px; width: auto; flex-shrink: 0; }

/* footer variant of the mark + wordmark */
.footer-seal{ height: 40px; width: auto; }

.main-nav{ display: flex; align-items: center; justify-content: center; gap: 32px; justify-self: center; }
.main-nav a{
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--cream-on-green);
  position: relative; padding-bottom: 4px;
}
.main-nav a::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--cream); transition: right .28s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{ right: 0; }
.main-nav a.active{ color: var(--cream); }

/* header-right cluster: contact icons + the Enquire action */
.header-actions{ display: flex; align-items: center; gap: 4px; justify-self: end; }
.icon-link{
  display: flex; align-items: center; justify-content: center;
  padding: 8px; margin: -8px; /* grows the tap target to ~33x33 without enlarging the icon or shifting layout (WCAG 2.5.8) */
  opacity: .82; transition: opacity .2s ease;
}
.icon-link:hover, .icon-link:focus-visible{ opacity: 1; }
.icon-link .icon{ height: 17px; width: 17px; display: block; }
.header-actions .btn-enquire{ margin-left: 12px; }
.btn-enquire{
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cream);
  border: 1px solid var(--line-on-green); padding: 9px 18px;
  transition: background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn-enquire:hover{ background: rgba(247,243,236,.1); border-color: rgba(247,243,236,.5); }
.btn-enquire.active{ background: rgba(247,243,236,.12); border-color: var(--cream); }

.nav-toggle{ display: none; background: none; border: 0; cursor: pointer; padding: 8px; justify-self: end; }
.nav-toggle span{ display:block; width: 22px; height: 1px; background: var(--cream); margin: 5px 0; }

/* items that only appear once the mobile menu is open */
.nav-enquire-mobile{ display: none; }
.mobile-contact{ display: none; }

@media (max-width: 880px){
  .site-header .wrap{ grid-template-columns: auto 1fr auto auto; }
  .header-actions .icon-link.hide-mobile,
  .header-actions .btn-enquire{ display: none; }

  .main-nav{
    position: fixed; top: 76px; left: 0; right: 0; width: auto;
    height: calc(100vh - 76px); /* fallback for browsers without dvh (e.g. older Safari) */
    height: calc(100dvh - 76px); /* correct on Mobile Safari, where 100vh includes the address bar */
    justify-self: stretch; margin: 0;
    background: var(--ink-green);
    flex-direction: column; justify-content: flex-start; align-items: center;
    gap: 26px; padding: 56px 24px 40px; overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  /* visibility (not just opacity/pointer-events) keeps the closed menu's
     links out of the Tab order — WCAG 2.4.3 focus order */
  .main-nav.open{ opacity: 1; transform: translateY(0); pointer-events: all; visibility: visible; }
  .main-nav a{ font-size: 16px; }
  .nav-toggle{ display: block; }

  .nav-enquire-mobile{ display: block; }
  .mobile-contact{
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    margin-top: 12px; padding-top: 32px; border-top: 1px solid var(--line-on-green);
    width: 100%; max-width: 280px;
  }
  .mobile-contact a{
    font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em;
    color: var(--cream-on-green); text-transform: none;
  }
}

/* ---------- buttons / links ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 15px 26px; border: 1px solid var(--charcoal);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn:hover{ background: var(--charcoal); color: var(--cream); }
.btn.on-green{ border-color: var(--cream-on-green); color: var(--cream); }
.btn.on-green:hover{ background: var(--cream); color: var(--ink-green); }
.btn.ghost{ border-color: transparent; padding-left: 0; padding-right: 0; }
.btn.ghost:hover{ background: none; color: var(--charcoal); }
.btn.ghost::after{ content: "→"; transition: transform .25s ease; }
.btn.ghost:hover::after{ transform: translateX(4px); }

.text-link{
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--charcoal-35); padding-bottom: 3px;
  transition: border-color .2s ease;
}
.text-link:hover{ border-color: var(--charcoal); }
.text-link.on-green{ color: var(--cream); border-color: rgba(247,243,236,.4); }
.text-link.on-green:hover{ border-color: var(--cream); }

/* ---------- catalogue plates (the photography system) ---------- */
.plate{
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--green-700) 0%, var(--green-900) 46%, var(--ink-green) 100%);
  aspect-ratio: var(--ar, 4/5);
}
.plate img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.plate::before{ /* vignette + grain lift */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 20% 15%, rgba(247,243,236,.14), transparent 55%),
              radial-gradient(90% 70% at 85% 95%, rgba(0,0,0,.35), transparent 60%);
}
.plate::after{
  /* fine film grain, not digital noise — kept subtle */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .065; mix-blend-mode: soft-light;
}
.plate .contour{ position:absolute; inset:0; opacity:.5; z-index: 1; }
.plate .plate-caption{
  position: absolute; left: 20px; right: 20px; bottom: 16px;
  display: flex; justify-content: space-between; align-items: flex-end;
  z-index: 3;
}
.plate .plate-caption .no{
  font-family: var(--font-sans); font-size: 10.5px; letter-spacing: .18em;
  color: rgba(247,243,236,.82); text-transform: uppercase;
}
.plate .plate-caption .cap{
  font-family: var(--font-display); font-style: italic; font-size: 17px;
  color: var(--cream); text-align: right;
}
.plate.--1-1{ --ar: 1/1; }
.plate.--16-9{ --ar: 16/9; }
.plate.--3-4{ --ar: 3/4; }
.plate.--21-9{ --ar: 21/9; }
.plate.tone-cream{
  background: linear-gradient(155deg, #DED2AE 0%, var(--cream-deep) 55%, #C9BC96 100%);
  border: 1px solid var(--line-strong);
}
.plate.tone-cream .plate-caption .no{ color: var(--charcoal-66); }
.plate.tone-cream .plate-caption .cap{ color: var(--charcoal); }
.plate.tone-cream::before{
  background: radial-gradient(120% 90% at 20% 15%, rgba(255,255,255,.45), transparent 55%),
              radial-gradient(90% 70% at 85% 95%, rgba(47,49,45,.16), transparent 60%);
}

/* close-up "detail" plates — leather, paintwork, badges, service records —
   a tighter crop and a deeper vignette to read as a macro shot rather
   than a full vehicle plate. Caption sits like a museum object label. */
.plate.detail{
  background: linear-gradient(200deg, var(--green-800) 0%, var(--ink-green) 55%, var(--green-900) 100%);
}
.plate.detail::before{
  background: radial-gradient(70% 60% at 30% 25%, rgba(247,243,236,.16), transparent 60%),
              radial-gradient(80% 65% at 80% 100%, rgba(0,0,0,.5), transparent 65%);
}
.plate.detail .plate-caption{ left: 18px; right: 18px; bottom: 14px; }
.plate.detail .plate-caption .cap{ font-size: 14px; }
.plate.detail .plate-caption .no{ display: none; }

/* edge-to-edge photographic break — breaks out of .wrap to full viewport
   width, for pacing between written sections. */
.photo-break{
  position: relative;
  width: 100vw;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  height: clamp(320px, 42vw, 560px);
  overflow: hidden;
}
.photo-break .plate{ height: 100%; aspect-ratio: auto; }
/* taller variant for photos with a portrait-leaning or symmetrical
   composition that a short cinematic band would crop into an unreadable sliver */
.photo-break.photo-break-tall{
  height: clamp(420px, 62vw, 780px);
  /* lighter fade than the standard photo-break: a tall crop often carries
     its subject low in the frame, and the standard 14% fade was eating
     into it */
  mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 96%, transparent 100%);
}

/* full-bleed background photography — the photo IS the section, text sits
   directly on it with a scrim for legibility, instead of a framed plate
   beside a block of copy. */
.bg-section{
  position: relative;
  width: 100vw;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  min-height: 74vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.bg-section img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.bg-section::before{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(52% 66% at 24% 70%, rgba(15,17,12,.5), transparent 72%),
    linear-gradient(180deg, rgba(32,36,24,.24) 0%, rgba(32,36,24,.34) 30%, rgba(28,33,22,.52) 60%, rgba(24,28,18,.8) 100%);
}
.bg-section .wrap{
  position: relative; z-index: 2; width: 100%;
  padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px);
}
.bg-section .eyebrow{ color: rgba(247,243,236,.9); text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.bg-section h1, .bg-section h2, .bg-section .display-xl, .bg-section .display-lg, .bg-section .display-md{
  color: var(--cream); text-shadow: 0 2px 24px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.3);
}
.bg-section p{ color: rgba(247,243,236,.92); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.bg-section .btn{ border-color: var(--cream); color: var(--cream); }
.bg-section .btn:hover{ background: var(--cream); color: var(--ink-green); }
.bg-section .btn.ghost{ border-color: rgba(247,243,236,.5); }
.bg-section .btn.ghost:hover{ background: none; color: var(--cream); border-color: var(--cream); }
.bg-section.short{ min-height: 50vh; }
.bg-section.bg-center{ align-items: center; text-align: center; }
.bg-section.bg-center::before{
  background:
    radial-gradient(48% 62% at 50% 50%, rgba(15,17,12,.52), transparent 72%),
    linear-gradient(180deg, rgba(30,34,23,.4), rgba(26,30,20,.52));
}
@media (max-width: 640px){
  .bg-section{ min-height: 62vh; }
  .bg-section.short{ min-height: 44vh; }
}
.photo-break .plate-caption{ left: var(--gutter); right: var(--gutter); bottom: 28px; }
.photo-break .plate-caption .cap{ font-size: 20px; }
/* blend the top/bottom edges into the page rather than cutting hard —
   the photo dissolves into --paper instead of sitting in a box */
.photo-break{
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* editorial spread — an asymmetric, overlapping pair of photographs,
   used where the page wants pure atmosphere rather than a written
   point. Deliberately off-grid: one plate is larger and sits higher,
   the second is smaller, shifted down, and overlaps the first by a
   little at the seam — the layered, magazine-spread feel the reveal
   system alone can't give a *layout*. */
.spread{
  position: relative;
  display: grid; grid-template-columns: 1.3fr .9fr;
  gap: var(--gutter);
  align-items: start;
}
.spread .spread-lead{ aspect-ratio: 4/5; }
.spread .spread-second{
  aspect-ratio: 4/5;
  margin-top: clamp(48px, 9vw, 120px);
  margin-left: clamp(-72px, -6vw, -32px);
}
@media (max-width: 780px){
  .spread{ grid-template-columns: 1fr; gap: 28px; }
  .spread .spread-second{ margin-top: 0; margin-left: 0; }
}

/* ---------- vehicle card ---------- */
.v-card{ display: block; }
.v-card .plate{ margin-bottom: 22px; }
.v-card .v-name{ font-family: var(--font-display); font-size: 24px; font-style: italic; margin-bottom: 4px; }
.v-card .v-spec{ font-family: var(--font-sans); font-size: 12.5px; letter-spacing: .05em; color: var(--charcoal-66); text-transform: uppercase; }
.v-card .v-row{ display:flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.v-card .v-price{ font-family: var(--font-body); font-size: 16px; }
.v-card .v-status{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); }
.v-card:hover .plate::before{ background: radial-gradient(120% 90% at 20% 15%, rgba(247,243,236,.22), transparent 55%), radial-gradient(90% 70% at 85% 95%, rgba(0,0,0,.28), transparent 60%); }

/* ---------- journal card ---------- */
.j-card .plate{ margin-bottom: 20px; }
.j-card .j-cat{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); margin-bottom: 10px; }
.j-card .j-title{ font-family: var(--font-display); font-size: 23px; line-height: 1.25; margin-bottom: 10px; }
.j-card .j-dek{ color: var(--charcoal-66); font-size: 15px; line-height: 1.6; }
.j-card .j-meta{ margin-top: 14px; }

/* ---------- testimonial ---------- */
.testimonial{ max-width: 720px; }
.testimonial blockquote{ font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(21px, 2.6vw, 30px); line-height: 1.4; }
.testimonial cite{ display:block; margin-top: 22px; font-style: normal; }
.testimonial cite .who{ font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: .04em; }
.testimonial cite .where{ font-family: var(--font-sans); font-size: 13px; color: var(--charcoal-66); }

/* ---------- forms ---------- */
.field{ margin-bottom: 26px; }
.field label{ display:block; margin-bottom: 8px; }
.field input, .field textarea, .field select{
  width: 100%; border: 0; border-bottom: 1px solid var(--line-strong);
  padding: 10px 2px; font-size: 16px; font-family: var(--font-body);
  background: transparent; transition: border-color .2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color: var(--charcoal-35); font-family: var(--font-body); }
.field input:focus, .field textarea:focus, .field select:focus{ outline: none; border-color: var(--charcoal); }

/* one consistent, on-brand focus ring — verified-legible on both cream
   and heritage green, rather than relying on the browser default (which
   varies in contrast, especially on the green header/footer) */
:focus-visible{ outline: 2px solid var(--bronze); outline-offset: 3px; }
.on-green :focus-visible, .site-header :focus-visible, .masthead :focus-visible, .site-footer :focus-visible{
  outline-color: var(--cream);
}
.field textarea{ resize: vertical; min-height: 120px; }
.field select{ appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23221F1B' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 620px){ .field-row{ grid-template-columns: 1fr; } }
.field-note{ margin-top: -14px; margin-bottom: 26px; font-size: 13px; color: var(--charcoal-66); }

/* honeypot — invisible to people, present for basic bots. Not display:none
   (some bots skip those) and not aria-hidden alone (kept off the tab order
   via tabindex="-1" instead, since aria-hidden on a focusable field is invalid). */
.field-honeypot{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- enhanced forms: validation, loading, success/error states ---------- */
.field-optional{ text-transform: none; letter-spacing: 0; color: var(--charcoal-35); font-weight: 400; }
.field-error{
  min-height: 0; margin: 8px 0 0; font-family: var(--font-mono); font-size: 12.5px;
  color: var(--error); letter-spacing: .01em;
}
.field-error:empty{ display: none; }
.field.has-error input, .field.has-error textarea, .field.has-error select{
  border-color: var(--error);
}
.field textarea.tall{ min-height: 180px; }

.btn[aria-busy="true"]{ position: relative; color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after{
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  margin: -8px 0 0 -8px; border: 2px solid var(--charcoal); border-top-color: transparent;
  border-radius: 50%; animation: btn-spin .7s linear infinite;
}
.bg-section .btn[aria-busy="true"]::after, .on-green .btn[aria-busy="true"]::after{ border-color: var(--cream); border-top-color: transparent; }
@keyframes btn-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .btn[aria-busy="true"]::after{ animation: none; }
}

.form-success{ max-width: 560px; }
.form-privacy{ font-size: 13.5px; line-height: 1.6; color: var(--charcoal-66); max-width: 560px; }
.form-privacy a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Sell form: calm, clearly separated sections rather than one long list */
.form-section{ margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.form-section:first-of-type{ margin-top: 40px; }
.form-section .eyebrow{ display: block; }
.form-section h3{ font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 25px); margin-top: 10px; }
.form-section-intro{ font-family: var(--font-body); font-size: 15px; color: var(--charcoal-66); margin-top: 10px; max-width: 560px; }

/* utility: visually hidden but available to screen readers / keyboard focus.
   Used by the skip-link, which un-hides itself on focus. */
.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link{
  position: absolute; top: -60px; left: 12px; z-index: 1000;
  background: var(--ink-green); color: var(--cream);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; padding: 12px 20px; border: 1px solid var(--line-on-green);
  transition: top .2s ease;
}
.skip-link:focus{ top: 12px; }

/* ---------- misc components ---------- */
.stat{ text-align: left; }
.stat .num{ font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px); font-style: italic; }
.stat .lbl{ margin-top: 8px; }

.numbered{ counter-reset: step; }
.numbered .step{ counter-increment: step; position: relative; padding-left: 56px; }
.numbered .step::before{
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -6px;
  font-family: var(--font-display); font-style: italic; font-size: 26px; color: var(--green-700);
}

.tag{
  display:inline-block; font-family: var(--font-sans); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--line-strong); color: var(--charcoal-66);
}
.tag.kept{ border-color: var(--green-line); color: var(--green-700); }

/* ---------- the archive ledger — a permanent record, not a sold rail ---------- */
.ledger{ border-top: 1px solid var(--line-strong); }
.ledger-row{
  display:flex; align-items:center; gap: 24px;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.ledger-row .thumb{ width: 64px; flex-shrink: 0; }
.ledger-row .info{
  flex: 1; display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap: wrap; gap: 6px 20px;
}
.ledger-row .name{ font-family: var(--font-display); font-style: italic; font-size: 19px; }
.ledger-row .spec{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .01em; color: var(--charcoal-66); margin-top: 3px; }
.ledger-row .kept-on{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--green-700); white-space: nowrap; text-align: right; }

/* ---------- vehicle detail: specs, timeline, price band ---------- */
.specs{ border-top: 1px solid var(--line); }
.specs .spec-row{ display:flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.specs .spec-row dt{ font-family: var(--font-sans); font-size: 13px; letter-spacing:.04em; color: var(--charcoal-66); }
.specs .spec-row dd{ margin:0; font-family: var(--font-body); font-size: 16px; text-align: right; }

.price-band{
  display:flex; align-items:center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  padding: 28px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}
.price-band .amount{ font-family: var(--font-display); font-size: clamp(28px,3vw,36px); }
.price-band .status{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.1em; text-transform:uppercase; color: var(--green-700); margin-top: 6px; display:block; }

.timeline{ border-left: 1px solid var(--line-strong); }
.timeline .t-item{ position: relative; padding: 4px 0 36px 32px; }
.timeline .t-item::before{ content:""; position:absolute; left:-5px; top:6px; width:9px; height:9px; border-radius:50%; background: var(--paper); border: 1px solid var(--green-700); }
.timeline .t-item:last-child{ padding-bottom: 4px; }
.timeline .t-year{ font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--charcoal); margin-bottom: 6px; display:block; }

/* ---------- journal article ---------- */
.article-body{ max-width: 640px; margin: 0 auto; }
.article-body .body-copy{ font-size: 18px; line-height: 1.72; }
.pull-quote{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.42; color: var(--charcoal);
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  padding: 36px 0; margin: 48px 0;
}
.article-meta{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.article-meta .dot{ width:3px; height:3px; border-radius:50%; background: var(--charcoal-35); }
.byline{ display:flex; align-items:center; gap: 14px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.byline .initials{ width:40px; height:40px; border-radius:50%; background: var(--green-700); color: var(--cream); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-style: italic; font-size:15px; flex-shrink:0; }

/* ---------- footer ---------- */
.site-footer{
  background: linear-gradient(180deg, var(--green-800), var(--ink-green));
  color: var(--cream-on-green);
}
.site-footer .wrap{ padding-top: 84px; padding-bottom: 40px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 64px; }
@media (max-width: 880px){ .footer-grid{ grid-template-columns: 1fr 1fr; row-gap: 40px; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h3{ font-family: var(--font-sans); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(247,243,236,.82); margin-bottom: 18px; }
.footer-grid a, .footer-grid li{ font-size: 14.5px; margin-bottom: 12px; color: rgba(247,243,236,.85); }
.footer-grid a:hover{ color: var(--cream); }
.footer-bottom{ display:flex; justify-content: space-between; align-items:center; padding-top: 28px; border-top: 1px solid var(--line-on-green); font-size: 12.5px; color: rgba(247,243,236,.82); flex-wrap: wrap; gap: 12px; }
.footer-brand{ margin-bottom: 22px; }
.footer-tag{ font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--cream); max-width: 320px; margin-top: 18px; line-height: 1.35; }
.footer-location{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,243,236,.82); margin-top: 12px; }
.footer-legal-text{ font-size: 13px; color: rgba(247,243,236,.76); margin-bottom: 10px; }

/* ---------- editorial reveal system ----------
   Text drifts up and fades in, slowly. Photography is treated
   differently: it settles into frame with a slow scale-down inside
   its own mask (the plate/photo-break's overflow:hidden), rather
   than fading like a UI element. Large photography can additionally
   carry a gentle scroll parallax (.parallax, driven by main.js). */
.reveal{
  opacity: 0; transform: translateY(26px);
  transition: opacity 1.05s cubic-bezier(.22,.61,.36,1), transform 1.05s cubic-bezier(.22,.61,.36,1);
}
.reveal.in{ opacity: 1; transform: translateY(0); }

.reveal-img{
  opacity: 0; transform: scale(1.055);
  transition: opacity 1.3s cubic-bezier(.22,.61,.36,1), transform 1.9s cubic-bezier(.16,.7,.2,1);
}
.reveal-img.in{ opacity: 1; transform: scale(1); }

/* light stagger for repeating grids — a card at a time, not all at once */
.grid > .reveal:nth-child(1), .grid > a.reveal:nth-child(1){ transition-delay: 0ms; }
.grid > .reveal:nth-child(2), .grid > a.reveal:nth-child(2){ transition-delay: 90ms; }
.grid > .reveal:nth-child(3), .grid > a.reveal:nth-child(3){ transition-delay: 180ms; }
.grid > .reveal:nth-child(4), .grid > a.reveal:nth-child(4){ transition-delay: 270ms; }

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

/* ---------- hero ---------- */
.hero{ position: relative; padding-top: clamp(40px, 6vw, 76px); }
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: end; }
@media (max-width: 940px){ .hero-grid{ grid-template-columns: 1fr; } }

.crest-rule{ display:flex; align-items:center; gap:14px; margin-bottom: 22px; }
.crest-rule .ln{ width: 34px; height: 1px; background: currentColor; opacity: .5; }

/* ---------- full-bleed photographic hero (homepage) ---------- */
.hero-full{
  position: relative;
  width: 100vw; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  height: clamp(560px, 92vh, 900px);
}
.hero-full .plate{ height: 100%; aspect-ratio: auto; border-radius: 0; }
.hero-full .plate::before{
  background: linear-gradient(0deg, rgba(15,26,20,.82) 0%, rgba(15,26,20,.32) 38%, rgba(15,26,20,.05) 60%, transparent 75%),
              radial-gradient(120% 90% at 22% 8%, rgba(247,243,236,.12), transparent 55%);
}
.hero-full-copy{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 0 var(--gutter) clamp(48px, 7vw, 92px);
}
.hero-full-copy .eyebrow{ margin-bottom: 20px; display: inline-block; }
.hero-full-copy h1{ color: var(--cream); max-width: 15ch; }
.hero-full-copy .btn{ margin-top: 38px; }

/* utility spacing */
.mt-8{margin-top:8px} .mt-12{margin-top:12px} .mt-16{margin-top:16px} .mt-24{margin-top:24px}
.mt-32{margin-top:32px} .mt-48{margin-top:48px} .mt-64{margin-top:64px} .mt-96{margin-top:96px}
.mb-16{margin-bottom:16px} .mb-24{margin-bottom:24px} .mb-32{margin-bottom:32px}
.max-w-720{max-width:720px} .max-w-560{max-width:560px} .center{ text-align:center; margin-left:auto; margin-right:auto; }