@import url("../fonts/fonts.css");

/* ============================================================
   BHOLA CAR SEAT COVERS LTD — DESIGN SYSTEM
   Charcoal / Brass / Bone / Stitch-red
   ============================================================ */

:root {
  /* ---- surface: light showroom ---- */
  --ink:        #FFFFFF;
  --ink-2:      #F7F5F1;
  --panel:      #FFFFFF;
  --panel-2:    #F4F1EB;
  --panel-3:    #EDE9E1;
  --line:       #E6E1D8;
  --line-hi:    #CFC7B9;

  /* ---- content: ink on paper ---- */
  --bone:       #0B0D0E;
  --bone-2:     #333A40;
  --smoke:      #6A7278;
  --smoke-2:    #949BA1;

  /* ---- accent: sampled straight off the logo ----
     The gold in the Bhola script measures #D2912A (dominant #D89018).
     It sits at 2.7:1 on white, so it can never carry small text —
     --brass is the same hue darkened to 4.6:1 for type, while
     --brass-bright is the true logo gold, used for fills and blocks. */
  --brass:        #9E6A19;
  --brass-hi:     #E3A83C;
  --brass-bright: #D8931E;
  --brass-deep:   #7A5112;
  --brass-glow:   rgba(216,147,30,.20);
  --stitch:       #C0442E;

  /* ---- accent band ----
     Was a dark chapter; now a warmer shade of the same paper, so the
     whole site reads in one tone and the rhythm comes from spacing
     rather than from flipping to black. */
  --paper:      #F2EFE8;
  --paper-2:    #E9E5DC;
  --paper-line: #DED9CE;
  --paper-ink:  #0B0D0E;

  /* ---- type ---- */
  --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --sans:    "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- rhythm ---- */
  --shell:  clamp(1.25rem, 5vw, 5.5rem);
  --maxw:   1500px;
  --maxw-narrow: 860px;
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);

  --shadow-1: 0 1px 2px rgba(11,13,14,.06);
  --shadow-2: 0 18px 44px -20px rgba(11,13,14,.20);
  --shadow-3: 0 44px 110px -40px rgba(11,13,14,.24);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  background: var(--ink);
  color: var(--bone-2);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

main { display: block; width: 100%; max-width: 100%; overflow-x: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--brass-bright); color: #1A1206; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 99px; border: 3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--brass-deep); }

.sr-only {
  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: fixed; top: -100%; left: 1rem; z-index: 999;
  background: var(--brass-bright); color: #1A1206;
  padding: .75rem 1.25rem; border-radius: var(--r-sm);
  font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -0.028em;
  color: var(--bone);
  text-wrap: balance;
}

.t-hero {
  font-size: clamp(2.75rem, 1.3rem + 5.2vw, 5.8rem);
  font-weight: 800;
  letter-spacing: -0.036em;
  line-height: .95;
}
.t-h1 { font-size: clamp(2.35rem, 1.25rem + 4.1vw, 4.5rem); font-weight: 800; letter-spacing: -0.034em; }
.t-h2 { font-size: clamp(1.95rem, 1.15rem + 3vw, 3.6rem); letter-spacing: -0.032em; }
.t-h3 { font-size: clamp(1.45rem, 1.08rem + 1.4vw, 2.15rem); letter-spacing: -0.026em; }
.t-h4 { font-size: clamp(1.14rem, 1rem + .55vw, 1.45rem); letter-spacing: -0.016em; font-weight: 700; }

.lede {
  font-size: clamp(1.09rem, 1rem + .55vw, 1.42rem);
  line-height: 1.55;
  color: var(--bone-2);
  font-weight: 400;
  letter-spacing: -0.012em;
  max-width: 60ch;
}

.body-lg { font-size: clamp(1.03rem, 1rem + .3vw, 1.16rem); line-height: 1.68; }

.muted  { color: var(--smoke); }
.muted-2 { color: var(--smoke-2); }
.brass  { color: var(--brass); }
.bone   { color: var(--bone); }

.kicker {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
/* No rule before the label. The client does not want decorative lines
   anywhere on the site — kicker dashes, divider flourishes or similar.
   The `kicker--plain` class is still accepted in the markup so nothing
   breaks, but it is now a no-op: every kicker is plain. */

.spec {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--smoke);
  font-variant-numeric: tabular-nums;
}

.underline-brass {
  display: inline;
  background-image: linear-gradient(var(--brass), var(--brass));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 92%;
  padding-bottom: .05em;
}

/* italic display accent used for one word in a heading */
.accent-word {
  color: var(--brass);
  font-style: normal;
}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--shell);
}
.wrap--narrow { max-width: var(--maxw-narrow); }
.wrap--wide { max-width: 1720px; }

.section { padding-block: clamp(5rem, 3rem + 9vw, 11.5rem); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--paper {
  background: var(--paper);
  color: var(--bone-2);
}
.section--paper h1, .section--paper h2, .section--paper h3, .section--paper h4 { color: var(--paper-ink); }
.section--paper .lede { color: var(--bone-2); }
.section--paper .muted { color: var(--smoke); }
.section--paper .spec { color: var(--smoke-2); }
.section--paper .kicker { color: var(--brass); }

.section--panel { background: var(--ink-2); }

.rule { height: 1px; background: var(--line); border: 0; }
.rule--fade { background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent); }

/* section head: label left, heading + lede right — editorial rhythm */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-bottom: clamp(2.75rem, 2rem + 3vw, 5rem);
}
@media (min-width: 940px) {
  .sec-head {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
  .sec-head--stack { grid-template-columns: minmax(0,1fr); }
}
.sec-head__body { max-width: 74ch; display: grid; gap: 1.35rem; }

.sec-head--center {
  text-align: center;
  grid-template-columns: minmax(0,1fr) !important;
  justify-items: center;
}
.sec-head--center .sec-head__body { justify-items: center; }
.sec-head--center .lede { margin-inline: auto; }

/* ============================================================
   AMBIENT BACKGROUNDS
   ============================================================ */
.amb { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.amb--grid::before {
  content: "";
  position: absolute; inset: -1px;
  background-image:
    linear-gradient(to right, rgba(11,13,14,.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,13,14,.022) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
}
.amb--glow::after {
  content: "";
  position: absolute;
  width: 120vw; height: 70vh;
  left: 50%; top: -22%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--brass-glow), transparent 62%);
  filter: blur(28px);
}
.amb--glow-left::after {
  content: "";
  position: absolute;
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  left: -18vw; top: 10%;
  background: radial-gradient(circle at center, rgba(216,147,30,.11), transparent 60%);
  filter: blur(30px);
}

.grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* thin brass hairline used to separate cinematic chapters */
.hair {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,147,30,.5) 30%, rgba(216,147,30,.5) 70%, transparent);
  border: 0;
}

/* ============================================================
   NAVIGATION — split nav that condenses into a floating glass pill
   ============================================================ */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: padding .5s var(--ease);
  padding-block: 1.35rem;
}
.nav__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--shell);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav__shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .55rem .55rem .55rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease),
              box-shadow .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav.is-stuck { padding-block: .55rem; }
/* detached, floating pill: inset from the edges with real elevation */
.nav.is-stuck .nav__inner { padding-inline: clamp(.75rem, 2.5vw, 1.75rem); }
.nav.is-stuck .nav__shell {
  background: rgba(255, 255, 255, .86);
  border-color: rgba(11,13,14,.07);
  box-shadow: 0 10px 30px -12px rgba(11,13,14,.16), 0 2px 8px -4px rgba(11,13,14,.10);
  transform: scale(.985);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
/* The configurator never scrolls the window (its panel scrolls internally),
   so the nav would never pick up its background and would float unreadably
   over the 3D stage. Pages like that opt into a permanent solid shell. */
body[data-nav="solid"] .nav__shell {
  background: rgba(255, 255, 255, .90);
  border-color: var(--line);
  box-shadow: 0 14px 40px -26px rgba(11,13,14,.35);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}


/* .is-hidden retired — the bar stays put and simply floats */
.nav { transition: transform .55s var(--ease), padding .5s var(--ease); }

.brand { display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand__mark { width: 38px; height: 38px; flex-shrink: 0; }
.brand__type { display: grid; line-height: 1; }
.brand__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.075rem;
  letter-spacing: -0.03em;
  color: var(--bone);
}
.brand__sub {
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: .28rem;
}

.nav__links { display: none; align-items: center; gap: .15rem; }
@media (min-width: 1100px) { .nav__links { display: flex; } }

.nav__link {
  position: relative;
  padding: .55rem .85rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--bone-2);
  border-radius: var(--r-pill);
  transition: color .3s var(--ease), background .3s var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: var(--bone); background: rgba(11,13,14,.055); }
.nav__link[aria-current="page"] { color: var(--brass); }

/* dropdown */
.nav__group { position: relative; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: .35rem;
}
.nav__toggle svg { width: 10px; height: 10px; transition: transform .3s var(--ease); opacity: .6; }
.nav__group:hover .nav__toggle svg,
.nav__group:focus-within .nav__toggle svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + .7rem);
  left: 0;
  min-width: 268px;
  padding: .5rem;
  background: rgba(255, 255, 255, .98);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__menu a {
  display: grid;
  gap: .12rem;
  padding: .6rem .8rem;
  border-radius: var(--r-sm);
  transition: background .22s var(--ease);
}
.nav__menu a:hover { background: rgba(216,147,30,.1); }
.nav__menu strong { font-size: .875rem; font-weight: 600; color: var(--bone); }
.nav__menu span { font-size: .74rem; color: var(--smoke); line-height: 1.4; }

.nav__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.nav__phone {
  display: none;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .01em;
  color: var(--bone-2);
  padding: .5rem .8rem;
  border-radius: var(--r-pill);
  transition: color .3s var(--ease), background .3s var(--ease);
}
.nav__phone:hover { color: var(--brass); background: rgba(216,147,30,.09); }
@media (min-width: 780px) { .nav__phone { display: inline-flex; align-items: center; gap: .45rem; } }
.nav__phone svg { width: 13px; height: 13px; }

/* ---- "Visit" button + map/hours popover ----
   Icon only where the nav pill is tight; the label appears once the phone
   number does. The wrapper is the positioning context for the panel. */
.nav__visit-wrap { position: relative; display: inline-flex; }
.nav__visit {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .5rem .7rem;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .01em;
  color: var(--bone-2);
  background: transparent; border: 0; cursor: pointer;
  border-radius: var(--r-pill);
  transition: color .3s var(--ease), background .3s var(--ease);
}
.nav__visit:hover,
.nav__visit[aria-expanded="true"] { color: var(--brass); background: rgba(216,147,30,.09); }
.nav__visit svg { width: 15px; height: 15px; }
.nav__visit-label { display: none; }
@media (min-width: 780px) { .nav__visit-label { display: inline; } }

.navpop {
  position: absolute; top: calc(100% + .7rem); right: 0;
  z-index: 120;
  width: min(19rem, calc(100vw - 2rem));
  padding: 1.1rem 1.15rem 1rem;
  display: grid; gap: 1rem;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 26px 70px -26px rgba(11,13,14,.4);
  transform-origin: top right;
  animation: navpop-in .28s var(--ease);
}
@keyframes navpop-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .navpop { animation: none; } }
.navpop__sec { display: grid; gap: .5rem; }
.navpop__label {
  font-family: var(--mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass); margin: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
}
.navpop__status { letter-spacing: .06em; text-transform: none; color: var(--smoke-2); }
.navpop__status[data-open="1"] { color: #2E8B57; }
.navpop__map { display: grid; gap: .35rem; }
.navpop__addr { font-size: .88rem; line-height: 1.45; color: var(--bone); font-weight: 500; }
.navpop__go {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brass);
}
.navpop__go svg { width: 12px; height: 12px; }
.navpop__map:hover .navpop__go { color: var(--brass-bright); }

.navpop__hours { display: grid; gap: .1rem; margin: 0; }
.navpop__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .18rem 0;
  font-size: .8rem; color: var(--smoke);
}
.navpop__row dt, .navpop__row dd { margin: 0; }
.navpop__row.is-today { color: var(--bone); font-weight: 600; }
.navpop__contact {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bone-2);
  padding-top: .75rem; border-top: 1px solid var(--line);
}
.navpop__contact:hover { color: var(--brass); }

/* On a phone the button is not the rightmost thing in the pill — the burger is
   — so hanging the panel off the button's own right edge pushed it past the
   left of the screen. Anchor it to the pill instead and it lines up with the
   nav on both edges, whatever else sits in the row. */
@media (max-width: 779px) {
  .nav__visit-wrap { position: static; }
  .nav__shell { position: relative; }
  .navpop {
    left: 0; right: 0; width: auto;
    top: calc(100% + .55rem);
  }
}

/* the hours list on the contact page shares the today highlight */
.hours__row.is-today { color: var(--bone); font-weight: 600; }

/* Two rules, no ring. The 44px box stays — it is the tap target, and dropping
   below it fails WCAG 2.5.8 — but it carries no border or fill, so what shows
   is the mark alone. */
.nav__burger {
  /* flex, not grid. As `inline-grid` each line landed in its own implicit row
     and the rows stretched to fill the 44px box, so the lines sat 22px apart
     and `margin-top` did nothing at all. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 1100px) { .nav__burger { display: none; } }
.nav__burger span {
  display: block; width: 20px; height: 1.6px;
  background: var(--bone); border-radius: 2px;
  transition: transform .35s var(--ease), background-color .3s var(--ease);
}
/* 1.6px rule + 3.4px gap = 5px between centres, so each line travels half
   that — 2.5px — to meet in the middle and close the X. */
.nav__burger span + span { margin-top: 3.4px; }
.nav__burger:hover span { background: var(--brass); }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(2.5px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); }

/* mobile drawer */
/* A column, not a scrolling block: the links take whatever height is left and
   scroll inside themselves, so the call button at the foot is on screen on a
   short phone instead of below the fold. */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(255, 255, 255, .985);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  padding: 6rem var(--shell) calc(1.75rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .42s var(--ease), visibility .42s;
}
body.menu-open .drawer { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
.drawer__grid {
  display: grid; gap: 2rem;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 700px) { .drawer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 3rem; } }
.drawer h4, .drawer .footer__label {
  font-family: var(--mono);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}
.drawer ul { display: grid; gap: .1rem; }
/* a second group in the same column needs air above its label */
.drawer ul + .footer__label { margin-top: 1.6rem; }
/* scoped to the lists on purpose. As `.drawer a` this rule out-specified
   `.btn` and stripped the call button of its flex centring and padding —
   the label sat hard left and clipped. Buttons are not nav links. */
.drawer ul a {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--bone);
  padding: .45rem 0;
  transition: color .25s var(--ease), transform .35s var(--ease);
}
.drawer ul a:hover { color: var(--brass); transform: translateX(7px); }
.drawer .btn--brass { color: #FFFFFF; }
.drawer__foot {
  flex: 0 0 auto;
  margin-top: 1.5rem; padding-top: 1.35rem;
  border-top: 1px solid var(--line);
  display: grid; gap: .75rem;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
}
.drawer__foot .spec { text-align: center; margin: 0; }
/* on a short phone the two lists plus the foot do not fit at full size, so the
   type steps down rather than pushing the call button off the bottom */
@media (max-width: 699px) {
  .drawer { padding-top: 5.5rem; }
  .drawer__grid { gap: 1.5rem; }
  .drawer h4, .drawer .footer__label { margin-bottom: .7rem; padding-bottom: .55rem; }
  .drawer ul a { font-size: 1.2rem; padding: .3rem 0; }
}
@media (max-width: 699px) and (max-height: 700px) {
  .drawer ul a { font-size: 1.08rem; padding: .22rem 0; }
  .drawer__grid { gap: 1.1rem; }
}

/* ============================================================
   BUTTONS — contrast guaranteed
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.65rem;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .3s var(--ease), background .3s var(--ease),
              color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:active { transform: translateY(1px) scale(.99); }

/* primary: brass fill, near-black text */
.btn--brass {
  /* Weathered copper, at the client's request. The texture averages
     #7E5135, so the label is WHITE — 5.3:1 even against the lightest
     patch in the photograph, where the old dark label managed 2.9:1
     and would have failed. The flat colour underneath is the texture's
     own average, so a button still looks right if the image is slow. */
  background-color: #7E5135;
  background-image: url("/assets/img/texture-rust.jpg");
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  border-color: rgba(11,13,14,.18);
  text-shadow: 0 1px 2px rgba(11,13,14,.35);
  box-shadow: 0 10px 24px -14px rgba(90,52,30,.85);
}
.btn--brass:hover {
  background-color: #8E5C3C;
  /* shifting the crop rather than the colour keeps the metal reading as
     metal on hover instead of flashing a flat tint over it */
  background-position: 30% center;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(90,52,30,.95);
}

/* bone fill on dark, dark text */
.btn--bone {
  background: var(--bone);
  color: #FFFFFF;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.7);
}
.btn--bone:hover { background: #262E34; color: #FFFFFF; transform: translateY(-2px); }

/* ghost on dark: bone text, hairline border */
.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--line-hi);
}
.btn--ghost:hover {
  background: rgba(11,13,14,.045);
  border-color: var(--brass);
  color: var(--bone);
  transform: translateY(-2px);
}

/* ink fill for use on paper sections */
.btn--ink { background: var(--paper-ink); color: var(--paper); }
.btn--ink:hover { background: #000; color: #fff; transform: translateY(-2px); }

.btn--outline-ink { border-color: var(--paper-line); color: var(--paper-ink); background: transparent; }
.btn--outline-ink:hover { background: rgba(20,24,27,.06); border-color: var(--paper-ink); color: var(--paper-ink); }

.btn--lg { padding: 1.12rem 2.1rem; font-size: 1rem; }
.btn--sm { padding: .62rem 1.1rem; font-size: .84rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* text link with animated arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .93rem; font-weight: 600; color: var(--brass);
  transition: gap .3s var(--ease);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.link-arrow:hover { gap: .85rem; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ============================================================
   CHIPS / PILLS / BADGES
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.028);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bone-2);
}
.chip--brass { border-color: rgba(216,147,30,.4); color: var(--brass); background: rgba(216,147,30,.09); }
.chip__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brass-bright); }
.chip__dot--live { background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.18); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  position: relative;
  background: linear-gradient(165deg, var(--panel), var(--ink-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .45s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card:hover { border-color: var(--line-hi); }
a.card:hover, .card--lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(216,147,30,.38);
}
.card__pad { padding: clamp(1.35rem, 1rem + 1vw, 2.1rem); }
.card__media { position: relative; overflow: hidden; background: var(--ink); }
.card__media img, .card__media canvas {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease), filter .9s var(--ease);
}
.card:hover .card__media img, .card:hover .card__media canvas { transform: scale(1.055); }

/* ---- "Also fitted here" cards ----
   Stacked they run about 450px each, so the pair could never share a phone
   screen. On small screens they turn side-on — thumbnail left, copy right —
   which roughly halves them and lets both sit in one view. */
.also-card__media { aspect-ratio: 3 / 2; }
@media (max-width: 699px) {
  .also-card {
    display: grid;
    grid-template-columns: 36% 1fr;
    align-items: stretch;
  }
  /* the thumbnail takes its height from the copy beside it rather than from a
     ratio of its own, so the two columns always finish level */
  .also-card__media { aspect-ratio: auto; height: 100%; min-height: 100%; }
  .also-card .card__pad { padding: .85rem .95rem; }
  .also-card .t-h3 { font-size: 1.02rem; line-height: 1.2; }
  .also-card .muted { font-size: .8rem; line-height: 1.45; }
  /* the mono CTA has to clear 'Ask about a wrap \2014 778-926-2662' inside a
     column ~184px wide, so it steps down and loses a little tracking */
  .also-card .spec { font-size: .62rem; letter-spacing: .05em; }
  /* the label alone fits the narrow column; the number is already in the
     nav, the call bar and the footer, so it steps aside here */
  .also-card__num { display: none; }
  .also-card .stack-sm { gap: .4rem; }
  /* heading plus both cards should land inside one phone screen, so this
     section carries less air than the rest of the page on mobile only */
  .section--also { padding-block: 3.25rem; }
  .section--also .sec-head { gap: .9rem; margin-bottom: 1.5rem; }
}

.card--glow::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(216,147,30,.10), transparent 45%);
  opacity: 0; transition: opacity .5s var(--ease);
  pointer-events: none;
}
.card--glow:hover::before { opacity: 1; }

/* ============================================================
   GAPLESS BENTO — grid-auto-flow: dense, mathematically interlocked
   ============================================================ */
.bento {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(112px, auto);
  gap: 14px;
}
.bento > * { min-width: 0; }

/* mobile: everything full width, auto height */
.b-1, .b-2, .b-3, .b-4, .b-5, .b-6 { grid-column: span 6; }
.r-1 { grid-row: span 1; } .r-2 { grid-row: span 2; }
.r-3 { grid-row: span 3; } .r-4 { grid-row: span 4; }

@media (max-width: 760px) {
  .r-1, .r-2, .r-3, .r-4 { grid-row: span 1; }
}
@media (min-width: 761px) {
  .b-1 { grid-column: span 2; }
  .b-2 { grid-column: span 3; }
  .b-3 { grid-column: span 3; }
  .b-4 { grid-column: span 4; }
  .b-5 { grid-column: span 6; }
  .b-6 { grid-column: span 6; }
}
@media (min-width: 1080px) {
  .bento { gap: 16px; grid-auto-rows: minmax(126px, auto); }
  .b-1 { grid-column: span 2; }
  .b-2 { grid-column: span 2; }
  .b-3 { grid-column: span 3; }
  .b-4 { grid-column: span 4; }
  .b-5 { grid-column: span 5; }
  .b-6 { grid-column: span 6; }
}

.bento-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .7rem;
  padding: clamp(1.25rem, 1rem + .9vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--panel), var(--ink-2) 85%);
  overflow: hidden;
  transition: border-color .45s var(--ease), transform .5s var(--ease);
  min-height: 168px;
}
.bento-tile:hover { border-color: rgba(216,147,30,.34); }
.bento-tile--media { justify-content: flex-end; padding: 0; }
.bento-tile__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.05s var(--ease);
}
.bento-tile--media:hover .bento-tile__img { transform: scale(1.06); }
.bento-tile__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,10,12,.94) 0%, rgba(8,10,12,.5) 40%, rgba(8,10,12,.1) 75%);
}
.bento-tile__body { position: relative; padding: clamp(1.25rem, 1rem + .9vw, 1.9rem); display: grid; gap: .55rem; }
.bento-tile h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.45rem); }
.bento-tile p { font-size: .93rem; line-height: 1.55; color: var(--smoke); margin: 0; }

.bento-tile--brass {
  background: linear-gradient(155deg, #EFC069, var(--brass-bright) 48%, #B87A12);
  border-color: rgba(0,0,0,.10);
}
.bento-tile--brass h3, .bento-tile--brass .stat__num { color: #1A1206; }
.bento-tile--brass p, .bento-tile--brass .spec { color: rgba(26,18,6,.72); }
.bento-tile--brass .kicker { color: rgba(26,18,6,.80); }

.bento-tile--bone {
  background: linear-gradient(155deg, #FBF9F4, var(--paper) 55%, var(--paper-2));
  border-color: rgba(0,0,0,.1);
}
.bento-tile--bone h3 { color: var(--paper-ink); }
.bento-tile--bone p { color: #5A6268; }
.bento-tile--bone .spec { color: #7A838A; }
.bento-tile--bone .kicker { color: var(--brass-deep); }

.tile-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(216,147,30,.3);
  background: rgba(216,147,30,.1);
  color: var(--brass);
  flex-shrink: 0;
}
.tile-icon svg { width: 20px; height: 20px; }
.bento-tile--brass .tile-icon { border-color: rgba(26,18,6,.24); background: rgba(26,18,6,.10); color: #1A1206; }
.bento-tile--bone .tile-icon { border-color: rgba(138,98,33,.28); background: rgba(216,147,30,.14); color: var(--brass-deep); }

/* ============================================================
   STATS
   ============================================================ */
.stat { display: grid; gap: .3rem; }
.stat__num {
  font-family: var(--display);
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: .9;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.stat__num em { font-style: normal; color: var(--brass); }
.stat__label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--smoke);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 800px) { .stat-row { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stat-row > * { background: var(--ink-2); padding: clamp(1.3rem, 1rem + 1vw, 2rem); }

/* ============================================================
   NUMBERED PROCESS RAIL
   ============================================================ */
.rail { display: grid; gap: 0; border-top: 1px solid var(--line); }
.rail__row {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 1rem;
  padding-block: clamp(1.6rem, 1.2rem + 1.6vw, 2.7rem);
  border-bottom: 1px solid var(--line);
  transition: background .5s var(--ease);
  position: relative;
}
.rail__row::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--brass-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--ease);
}
.rail__row:hover::after { transform: scaleX(1); }
@media (min-width: 880px) {
  .rail__row {
    grid-template-columns: 96px minmax(0, 30ch) minmax(0, 1fr) auto;
    gap: 2.5rem;
    align-items: baseline;
  }
}
.rail__num {
  font-family: var(--display);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--line-hi);
  transition: -webkit-text-stroke-color .5s var(--ease), color .5s var(--ease);
}
.rail__row:hover .rail__num { -webkit-text-stroke-color: var(--brass); }
.rail__row h3 { font-size: clamp(1.28rem, 1.1rem + .8vw, 1.85rem); }
.rail__row p { color: var(--smoke); font-size: .97rem; line-height: 1.62; margin: 0; }
.rail__meta { font-family: var(--mono); font-size: .72rem; color: var(--smoke-2); letter-spacing: .06em; white-space: nowrap; }

/* ============================================================
   HORIZONTAL ACCORDION — vertical slices expanding on hover
   ============================================================ */
.haccord {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .haccord {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: 540px;
    gap: 12px;
  }
  .haccord__panel { transition: flex-grow .8s var(--ease); }
  .haccord:has(.haccord__panel:hover) { grid-auto-columns: auto; }
}
.haccord__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  min-height: 0;
  background: var(--panel);
  transition: border-color .5s var(--ease), flex .8s var(--ease);
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
}
@media (min-width: 900px) {
  .haccord { display: flex; }
  .haccord__panel { flex: 1 1 0; min-width: 0; }
  .haccord__panel.is-open { flex: 3.4 1 0; }
}
.haccord__panel:hover, .haccord__panel.is-open { border-color: rgba(216,147,30,.4); }
.haccord__bg {
  /* the swatch is a band at the top; the copy sits on paper beneath it,
     rather than being overlaid on near-black. On a light site a full-bleed
     dark scrim reads as a hole in the page. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  transition: filter .9s var(--ease), transform 1.1s var(--ease);
}
.haccord__panel.is-open .haccord__bg,
.haccord__panel:hover .haccord__bg { filter: saturate(1.05) contrast(1.02); transform: scale(1.03); }

/* the swatch runs full-bleed; the copy sits on its own light plate */
.haccord__scrim { display: none; }

.haccord__content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .8rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  /* A light plate anchored to the bottom, sized by its own content and
     growing upward as the panel opens. Reserving space with margin-top
     plus height:100% made the box taller than its 540px parent, so the
     heading was pushed clean out of an overflow:hidden panel. */
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: auto;
  margin: 0;
  justify-content: flex-start;
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.haccord__idx {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  color: var(--brass);
}
.haccord__content h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.6rem); }
.haccord__reveal {
  display: grid; gap: .9rem;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .8s var(--ease), opacity .55s var(--ease);
}
.haccord__panel.is-open .haccord__reveal { max-height: 340px; opacity: 1; }
@media (max-width: 899px) {
  .haccord__reveal { max-height: 340px; opacity: 1; }
  .haccord__panel { min-height: 420px; }
  .haccord__content { position: absolute; }
}
.haccord__reveal p { color: var(--bone-2); font-size: .95rem; margin: 0; max-width: 46ch; }
.haccord__content h3 { color: var(--bone); }
.haccord__list { display: grid; gap: .4rem; }
.haccord__list li {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .88rem; color: var(--smoke);
}
.haccord__list li::before { content: "—"; color: var(--brass); flex-shrink: 0; }
.haccord__panel { background: var(--panel); }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: clamp(2.2rem, 4vw, 4.5rem);
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee__item {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--display);
  font-size: clamp(1.05rem, .9rem + .6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--smoke-2);
  white-space: nowrap;
  transition: color .35s var(--ease);
}
.marquee:hover .marquee__item { color: var(--smoke); }
.marquee__item svg { width: 15px; height: 15px; color: var(--brass-deep); }

/* ---- marque emblem row ---- */
.marquee-band { position: relative; padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.marquee-band__label {
  text-align: center;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--smoke-2);
  margin-bottom: 1.5rem;
}
.marquee-band .marquee { padding-block: clamp(1rem, .8rem + .8vw, 1.6rem); }
/* An 8% ramp is only 30px on a phone — wider than an emblem but not by enough,
   so a mark still met the screen edge half-lit and read as chopped in two.
   Give the fade room to finish before the edge. */
@media (max-width: 699px) {
  .marquee-band .marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  }
  /* a wider fade means fewer marks at full strength, so the ones that are
     lit have to carry the row */
  .marquee-band .marquee__item .marque { height: 25px; opacity: .7; }
}
.marquee-band .marquee__track { gap: clamp(2.2rem, 4vw, 4.4rem); align-items: center; }

/* two classes, so this beats the generic `.marquee__item svg` sizing */
.marquee__item .marque {
  width: auto;
  height: clamp(21px, 1.5vw, 26px);
  color: var(--smoke-2);
  opacity: .55;
  transition: color .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.marquee-band .marquee__item { gap: 0; }
.marquee-band .marquee__item:hover .marque {
  color: var(--brass);
  opacity: 1;
  transform: translateY(-2px);
}

/* ============================================================
   SCRUBBING TEXT REVEAL
   ============================================================ */

/* fade-up primitive (IntersectionObserver / GSAP driven) */
.fx-up { opacity: 0; transform: translateY(26px); }
.fx-up.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.no-motion .fx-up { opacity: 1 !important; transform: none !important; }

/* image scale + fade on scroll */
.fx-scale { will-change: transform, opacity; }

/* ============================================================
   HERO — editorial split
   ============================================================ */
.hero {
  position: relative;
  padding-top: clamp(8.5rem, 7rem + 8vw, 13rem);
  padding-bottom: clamp(3.5rem, 3rem + 4vw, 7rem);
  overflow: hidden;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 62%, var(--ink-2) 100%);
}
.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 2rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 1040px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    gap: clamp(3rem, 2rem + 4vw, 6rem);
  }
}
.hero__copy { display: grid; gap: 1.9rem; max-width: 42rem; }
/* H1 gets a wide box so it flows in 2–3 lines, never a 6-line wall */
.hero__title { max-width: 22ch; }
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  max-width: 34rem;
}
.hero__stats .stat__num { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); }

.hero__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 640px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, #22282D, #0B0E10 72%);
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,.05);
}
@media (min-width: 1040px) { .hero__stage { aspect-ratio: 4 / 5; max-height: 720px; } }
.hero__stage canvas { width: 100% !important; height: 100% !important; display: block; }
.hero__stage-label {
  position: absolute;
  left: 1.15rem; bottom: 1.15rem;
  display: flex; gap: .5rem; flex-wrap: wrap;
  z-index: 2;
}
.hero__stage-hint {
  position: absolute;
  right: 1.15rem; top: 1.15rem;
  z-index: 2;
}
.stage-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 2rem;
  text-align: center;
  z-index: 3;
}
/* Any component class that sets a display value beats the [hidden] attribute,
   which is only a UA-stylesheet display:none. Every element the JS hides —
   order-flow panels, the bolster/headrest fields on universal, the WhatsApp
   hand-off — is one of those, so hidden is made to win outright. */
[hidden] { display: none !important; }

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.phead {
  position: relative;
  padding-top: clamp(8rem, 6.5rem + 7vw, 12rem);
  padding-bottom: clamp(3rem, 2.5rem + 3vw, 5.5rem);
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--ink-2), #FFFFFF);
  border-bottom: 1px solid var(--line);
}
.phead__inner { position: relative; display: grid; gap: 1.6rem; }
.phead h1 { max-width: 24ch; }
.phead .lede { max-width: 62ch; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .71rem; letter-spacing: .05em;
  color: var(--smoke-2);
}
.crumbs a { color: var(--smoke); transition: color .25s var(--ease); }
.crumbs a:hover { color: var(--brass); }
.crumbs span[aria-current] { color: var(--bone-2); }
.crumbs svg { width: 10px; height: 10px; opacity: .5; }

/* ============================================================
   MATERIAL SWATCHES
   ============================================================ */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}
.swatch {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  transition: border-color .35s var(--ease), transform .4s var(--ease);
  text-align: left;
  width: 100%;
}
.swatch:hover { transform: translateY(-3px); border-color: rgba(216,147,30,.45); }
.swatch__tex { aspect-ratio: 4/3; width: 100%; background: #1A1F24; }
.swatch__tex canvas, .swatch__tex img { width: 100%; height: 100%; object-fit: cover; }
.swatch__meta { padding: .75rem .85rem; display: grid; gap: .2rem; }
.swatch__name { font-size: .87rem; font-weight: 600; color: var(--bone); letter-spacing: -0.012em; }
.swatch__note { font-family: var(--mono); font-size: .65rem; letter-spacing: .07em; color: var(--smoke-2); text-transform: uppercase; }
.swatch.is-active { border-color: var(--brass-bright); box-shadow: 0 0 0 1px var(--brass-bright), 0 14px 34px -16px rgba(216,147,30,.5); }
.swatch.is-active::after {
  content: "";
  position: absolute; top: .55rem; right: .55rem;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brass-bright);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1206' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px; background-repeat: no-repeat; background-position: center;
}

/* ============================================================
   CONFIGURATOR
   ============================================================ */
.cfg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 100vh;
  background: var(--ink);
}
@media (min-width: 1100px) {
  .cfg {
    grid-template-columns: minmax(0, 1fr) 440px;
    height: calc(100vh - 0px);
    min-height: 760px;
  }
}
@media (min-width: 1500px) {
  .cfg { grid-template-columns: minmax(0, 1fr) 480px; }
}

.cfg__viewport {
  position: relative;
  min-height: 58vh;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, #FFFFFF 0%, #F6F3EE 55%, #EAE5DC 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1100px) {
  .cfg__viewport { min-height: 0; height: 100%; border-bottom: 0; border-right: 1px solid var(--line); }
}
.cfg__canvas { position: absolute; inset: 0; }
.cfg__canvas canvas { width: 100% !important; height: 100% !important; display: block; touch-action: none; }

.cfg__hud {
  position: absolute;
  inset-inline: 0;
  top: 0;
  /* clears the fixed nav, which floats over this full-bleed viewport */
  padding: calc(clamp(.8rem, .6rem + .6vw, 1.15rem) + 4.9rem)
           clamp(.8rem, .6rem + .6vw, 1.15rem)
           clamp(.8rem, .6rem + .6vw, 1.15rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .7rem;
  pointer-events: none;
  z-index: 3;
}
.cfg__hud > * { pointer-events: auto; }

.cfg__hud-bottom {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: clamp(.8rem, .6rem + .6vw, 1.15rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: .7rem;
  flex-wrap: wrap;
  pointer-events: none;
  z-index: 3;
}
.cfg__hud-bottom > * { pointer-events: auto; }

.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 20px -12px rgba(11,13,14,.4);
}
.seg__btn {
  padding: .5rem .95rem;
  border-radius: var(--r-pill);
  font-size: .8rem;
  font-weight: 600;
  color: var(--smoke);
  white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease);
  display: inline-flex; align-items: center; gap: .4rem;
}
.seg__btn svg { width: 14px; height: 14px; }
.seg__btn:hover { color: var(--bone); }
.seg__btn.is-active { background: var(--bone); color: #FFFFFF; }
.seg__btn.is-active:hover { color: #FFFFFF; }

.icon-btn {
  width: 38px; height: 38px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--bone-2);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.icon-btn:hover { background: rgba(216,147,30,.12); color: var(--brass-deep); border-color: var(--brass); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.is-active { background: var(--brass-bright); color: #1A1206; border-color: var(--brass-bright); }

.cfg__panel {
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@media (min-width: 1100px) { .cfg__panel { height: 100%; } }

.cfg__panel-head {
  padding: 1.15rem clamp(1.1rem, 1rem + .6vw, 1.6rem) .9rem;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: .85rem;
  flex-shrink: 0;
}
.cfg__steps { display: flex; gap: .3rem; }
.cfg__step {
  flex: 1;
  display: grid;
  gap: .45rem;
  text-align: left;
}
.cfg__step-bar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.cfg__step-bar i { display: block; height: 100%; width: 0; background: var(--brass-bright); transition: width .6s var(--ease); }
.cfg__step.is-done .cfg__step-bar i, .cfg__step.is-active .cfg__step-bar i { width: 100%; }
.cfg__step-label {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--smoke-2); transition: color .3s var(--ease);
}
.cfg__step.is-active .cfg__step-label { color: var(--brass); }
.cfg__step.is-done .cfg__step-label { color: var(--smoke); }

.cfg__scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.1rem, 1rem + .6vw, 1.6rem);
  display: grid;
  gap: 1.9rem;
  align-content: start;
}

.cfg__foot {
  border-top: 1px solid var(--line);
  padding: clamp(.95rem, .8rem + .5vw, 1.3rem) clamp(1.1rem, 1rem + .6vw, 1.6rem);
  background: var(--ink);
  display: grid;
  gap: .85rem;
  flex-shrink: 0;
}
.cfg__price {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.cfg__price-num {
  font-family: var(--display);
  font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.cfg__price-num small { font-size: .95rem; font-weight: 700; color: var(--smoke); letter-spacing: 0; }

.field { display: grid; gap: .55rem; }
.field__label {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--smoke);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.field__label b { color: var(--bone-2); font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: .72rem; }

.control {
  width: 100%;
  padding: .8rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--bone);
  font-size: .92rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
  appearance: none;
}
.control:hover { border-color: var(--line-hi); }
.control:focus { border-color: var(--brass); outline: none; background: var(--panel-2); }
.control::placeholder { color: var(--smoke-2); }
select.control {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A949B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 14px;
  padding-right: 2.4rem;
  cursor: pointer;
}
select.control:disabled { opacity: .45; cursor: not-allowed; }
textarea.control { resize: vertical; min-height: 108px; line-height: 1.55; }

.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.opt-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.opt-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.opt {
  position: relative;
  display: grid;
  gap: .3rem;
  padding: .75rem .8rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.opt:hover { border-color: var(--line-hi); background: var(--panel-2); }
.opt.is-active { border-color: var(--brass); background: rgba(216,147,30,.09); }
.opt__name { font-size: .855rem; font-weight: 600; color: var(--bone); line-height: 1.25; letter-spacing: -0.012em; }
.opt__sub { font-family: var(--mono); font-size: .63rem; letter-spacing: .06em; color: var(--smoke-2); text-transform: uppercase; }
.opt.is-active .opt__sub { color: var(--brass); }
.opt__icon { color: var(--smoke); margin-bottom: .15rem; }
.opt__icon svg { width: 26px; height: 26px; }
.opt.is-active .opt__icon { color: var(--brass); }

/* color dots */
.dots { display: flex; flex-wrap: wrap; gap: 7px; }
.dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--line);
  cursor: pointer;
  position: relative;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
  flex-shrink: 0;
}
.dot:hover { transform: scale(1.12); border-color: var(--line-hi); }
.dot.is-active { border-color: var(--brass); transform: scale(1.1); }
.dot.is-active::after {
  content: ""; position: absolute; inset: -6px;
  border-radius: 50%; border: 1px solid rgba(216,147,30,.45);
}

/* toggle switch */
.switch {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel);
  cursor: pointer; width: 100%; text-align: left;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.switch:hover { border-color: var(--line-hi); }
.switch.is-on { border-color: rgba(216,147,30,.45); background: rgba(216,147,30,.07); }
.switch__text { display: grid; gap: .12rem; min-width: 0; }
.switch__text strong { font-size: .855rem; font-weight: 600; color: var(--bone); letter-spacing: -0.012em; }
.switch__text span { font-family: var(--mono); font-size: .63rem; color: var(--smoke-2); letter-spacing: .05em; }
.switch__track {
  width: 40px; height: 23px; border-radius: 99px;
  background: var(--line-hi); position: relative; flex-shrink: 0;
  transition: background .3s var(--ease);
}
.switch.is-on .switch__track { background: var(--brass-bright); }
.switch__track i {
  position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--bone);
  transition: transform .3s var(--ease);
}
.switch.is-on .switch__track i { transform: translateX(17px); background: #1A1206; }

/* summary lines */
.sum { display: grid; gap: .4rem; }
.sum__row {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .84rem; padding-block: .3rem;
  border-bottom: 1px dashed var(--line);
}
.sum__row:last-child { border-bottom: 0; }
.sum__row dt { color: var(--smoke); font-family: var(--mono); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; padding-top: .1rem; }
.sum__row dd { color: var(--bone); font-weight: 500; text-align: right; margin: 0; }

/* toast */
/* `translateY(140%)` is 140% of the toast's OWN height (~60px) but it sits
   `bottom: 2rem` up from the edge, so 15px of near-black stayed on screen at
   all times — the dark smudge under the call bar. Push it past its own height
   PLUS that offset, and take it out of the paint entirely when it is resting. */
.toast {
  position: fixed;
  left: 50%; bottom: 2rem;
  transform: translate(-50%, calc(100% + 2rem + 12px));
  opacity: 0;
  visibility: hidden;
  z-index: 200;
  padding: .85rem 1.35rem;
  border-radius: var(--r-pill);
  background: var(--bone);
  color: #FFFFFF;
  font-size: .88rem;
  font-weight: 600;
  box-shadow: var(--shadow-3);
  transition: transform .5s var(--ease), opacity .35s var(--ease), visibility 0s .5s;
  display: flex; align-items: center; gap: .6rem;
  max-width: calc(100vw - 2rem);
}
.toast.is-up {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: transform .5s var(--ease), opacity .35s var(--ease), visibility 0s;
}
.toast svg { width: 16px; height: 16px; color: #5FD39A; flex-shrink: 0; }

/* loading veil for 3D */
.veil {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  gap: 1rem;
  background: linear-gradient(180deg, #FFFFFF, #F2EFE9);
  transition: opacity .8s var(--ease), visibility .8s;
}
.veil.is-gone { opacity: 0; visibility: hidden; }
.veil__inner { display: grid; gap: 1rem; justify-items: center; text-align: center; padding: 2rem; }
.veil__bar { width: 168px; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.veil__bar i {
  display: block; height: 100%; width: 40%;
  background: var(--brass-bright);
  animation: veilslide 1.35s var(--ease-io) infinite;
}
@keyframes veilslide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

/* ============================================================
   TABLES
   ============================================================ */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.tbl { min-width: 620px; font-size: .91rem; }
.tbl th, .tbl td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); }
.tbl thead th {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brass); background: var(--ink-2); font-weight: 500; white-space: nowrap;
}
.tbl tbody tr { transition: background .3s var(--ease); }
.tbl tbody tr:hover { background: rgba(255,255,255,.022); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td:first-child { color: var(--bone); font-weight: 500; }
.tbl .yes { color: #62D48C; }
.tbl .no  { color: var(--smoke-2); }

.section--paper .table-scroll { border-color: var(--paper-line); background: #FFFFFF; }
.section--paper .tbl th, .section--paper .tbl td { border-bottom-color: var(--paper-line); }
.section--paper .tbl thead th { background: var(--paper-2); color: var(--brass); }
.section--paper .tbl td:first-child { color: var(--paper-ink); }
.section--paper .tbl tbody tr:hover { background: rgba(11,13,14,.025); }

/* ============================================================
   FAQ / DISCLOSURE
   ============================================================ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  text-align: left;
  font-family: var(--display);
  font-size: clamp(1.05rem, .98rem + .45vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--bone);
  transition: color .3s var(--ease);
}
.faq__q:hover { color: var(--brass); }
.faq__icon {
  flex-shrink: 0; width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line-hi);
  position: relative;
  transition: border-color .3s var(--ease), transform .4s var(--ease);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute;
  background: currentColor; border-radius: 2px;
}
.faq__icon::before { width: 11px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 11px; transition: transform .4s var(--ease); }
.faq__item.is-open .faq__icon { border-color: var(--brass); transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: scaleY(0); }
.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .55s var(--ease);
}
.faq__item.is-open .faq__a { max-height: 620px; }
.faq__a-inner { padding-bottom: 1.6rem; max-width: 68ch; display: grid; gap: .85rem; }
.faq__a-inner p { color: var(--smoke); margin: 0; }
.faq__a-inner a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }

.section--paper .faq, .section--paper .faq__item { border-color: var(--paper-line); }
.section--paper .faq__q { color: var(--paper-ink); }
.section--paper .faq__icon { border-color: #C6BFB2; }
.section--paper .faq__a-inner p { color: var(--bone-2); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */

/* ============================================================
   PROSE (guides / articles)
   ============================================================ */
.prose { max-width: 72ch; display: grid; gap: 1.5rem; }
.prose > * { margin: 0; }
.prose h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  margin-top: 1.9rem;
  scroll-margin-top: 7rem;
}
.prose h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); margin-top: 1.1rem; scroll-margin-top: 7rem; }
.prose p { color: var(--bone-2); line-height: 1.75; }
.prose strong { color: var(--bone); font-weight: 600; }
.prose a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { display: grid; gap: .7rem; padding-left: 0; }
.prose li { display: flex; gap: .8rem; color: var(--bone-2); line-height: 1.7; }
.prose ul li::before { content: "—"; color: var(--brass); flex-shrink: 0; }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; }
.prose ol li::before {
  content: counter(n);
  font-family: var(--mono); font-size: .78rem; color: var(--brass);
  flex-shrink: 0; min-width: 1.4rem; padding-top: .18rem;
}
.prose blockquote {
  border-left: 2px solid var(--brass);
  padding: .3rem 0 .3rem 1.5rem;
  font-size: 1.1rem;
  color: var(--bone);
  letter-spacing: -0.015em;
}
.prose figure { display: grid; gap: .7rem; }
.prose figure img { border-radius: var(--r); border: 1px solid var(--line); width: 100%; }
.prose figcaption { font-family: var(--mono); font-size: .7rem; color: var(--smoke-2); letter-spacing: .05em; }
.prose .callout {
  padding: 1.25rem 1.4rem;
  border: 1px solid rgba(216,147,30,.3);
  border-left: 3px solid var(--brass);
  border-radius: var(--r);
  background: rgba(216,147,30,.055);
  display: grid; gap: .5rem;
}
.prose .callout strong { color: var(--brass-hi); }
.prose .callout p { color: var(--bone-2); font-size: .96rem; }

.toc {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.5rem;
  background: var(--ink-2);
  display: grid; gap: .75rem;
  position: sticky; top: 6.5rem;
}
.toc h4 {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass);
}
.toc ul { display: grid; gap: .5rem; }
.toc a { font-size: .87rem; color: var(--smoke); transition: color .25s var(--ease); display: block; line-height: 1.4; }
.toc a:hover { color: var(--brass); }

.article-layout { display: grid; gap: 3rem; }
@media (min-width: 1040px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 272px; gap: 4.5rem; align-items: start; }
}

/* ============================================================
   FORMS
   ============================================================ */
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.form__hint { font-size: .78rem; color: var(--smoke-2); }
.form__err { font-size: .78rem; color: #E8836E; display: none; }
.field.has-err .control { border-color: #C0442E; }
.field.has-err .form__err { display: block; }

/* ============================================================
   CONTACT / INFO BLOCKS
   ============================================================ */
.info-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.info-list > * {
  background: var(--ink-2);
  padding: 1.15rem 1.3rem;
  display: flex; gap: 1rem; align-items: flex-start;
  transition: background .3s var(--ease);
}
a.info-row:hover { background: var(--panel-2); }
.info-row__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 9px;
  background: rgba(216,147,30,.11); border: 1px solid rgba(216,147,30,.25);
  color: var(--brass);
}
.info-row__icon svg { width: 17px; height: 17px; }
.info-row__body { display: grid; gap: .18rem; min-width: 0; }
.info-row__label { font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--smoke-2); }
.info-row__value { font-size: .95rem; color: var(--bone); font-weight: 500; word-break: break-word; }
.info-row__note { font-size: .8rem; color: var(--smoke); }

.hours { display: grid; gap: 0; }
.hours__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px dashed var(--line);
  font-size: .9rem;
}
.hours__row:last-child { border-bottom: 0; }
.hours__row dt { color: var(--smoke); }
.hours__row dd { color: var(--bone); font-family: var(--mono); font-size: .82rem; margin: 0; }
.hours__row.is-today dt { color: var(--brass); }
.hours__row.is-today dd { color: var(--brass); }

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--panel);
  aspect-ratio: 16 / 10;
  position: relative;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 3.5rem + 7vw, 9rem);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(216,147,30,.10), transparent 62%),
    linear-gradient(180deg, #FFFFFF, var(--ink-2));
  border-top: 1px solid var(--line);
}
.cta-band__inner { position: relative; display: grid; gap: 2.1rem; justify-items: center; text-align: center; }
.cta-band h2 { max-width: 26ch; }
.cta-band .lede { max-width: 56ch; margin-inline: auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-top: clamp(3.5rem, 3rem + 3vw, 5.5rem);
}
/* Even on a phone the three link groups sit side by side rather than
   stacking into one very long column — the brand blurb takes the full
   width above them, then Seat covers / Shop share a row and Visit us
   takes the one below, so the address still has room to breathe. */
.footer__grid {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer__about { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.75rem; }
}
@media (min-width: 1040px) {
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; }
  .footer__about { grid-column: auto; }
}
/* the narrowest phones cannot hold two columns of "Van & fleet covers" */
@media (max-width: 360px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4, .footer__label {
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--brass);
  margin-bottom: 1.15rem;
}
.footer ul { display: grid; gap: .62rem; }
.footer ul a { font-size: .89rem; color: var(--smoke); transition: color .25s var(--ease); }
.footer ul a:hover { color: var(--brass); }
.footer__about { display: grid; gap: 1.25rem; max-width: 34ch; }
.footer__about p { font-size: .89rem; color: var(--smoke); line-height: 1.6; }
.socials { display: flex; gap: .5rem; }
.social {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--smoke);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.social:hover { color: var(--brass); border-color: var(--brass-deep); background: rgba(216,147,30,.1); transform: translateY(-2px); }
.social svg { width: 16px; height: 16px; }

.footer__bar {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid var(--line);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
}
.footer__bar p, .footer__bar a { font-size: .79rem; color: var(--smoke-2); }
.footer__bar a:hover { color: var(--brass); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ---- sticky mobile call bar ----
   A floating pill rather than a full-bleed slab with a seam down the middle:
   it echoes the nav pill at the top, and clearing the screen edges keeps it
   off the iOS home indicator. `env(safe-area-inset-bottom)` is 0 on every
   browser that does not have one, so the fallback needs no query. */
.callbar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(.85rem + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  margin-inline: .85rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset,
              0 10px 34px -12px rgba(11,13,14,.28),
              0 0 0 1px rgba(11,13,14,.06);
  overflow: hidden;
  transform: translateY(calc(100% + 1.5rem));
  transition: transform .5s var(--ease);
}
.callbar.is-up { transform: none; }
@media (min-width: 1100px) { .callbar { display: none; } }
.callbar a {
  padding: .85rem .6rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .86rem; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bone);
  background: transparent;
}
.callbar a svg { width: 15px; height: 15px; }
/* the same weathered copper the primary buttons carry everywhere else, so the
   bar's main action does not read as a different control from the one in the
   hero. White label with a shadow, as on .btn--brass — a dark label drops to
   2.9:1 against the lightest patch of the photograph. */
.callbar a.is-primary {
  background-color: #7E5135;
  background-image: url("/assets/img/texture-rust.jpg");
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(11,13,14,.35);
  border-radius: var(--r-pill);
}
body.has-callbar { padding-bottom: 0; }

/* ============================================================
   GALLERY
   ============================================================ */
.gal {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.gal__item {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  aspect-ratio: 4/3;
  transition: border-color .4s var(--ease);
}
.gal__item:hover { border-color: rgba(216,147,30,.4); }
.gal__item canvas, .gal__item img { width: 100%; height: 100%; object-fit: cover; }
.gal__cap {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 1rem 1.1rem;
  background: linear-gradient(to top, rgba(8,10,12,.92) 0%, rgba(8,10,12,.55) 55%, transparent 100%);
  display: grid; gap: .18rem;
}
.gal__cap strong { font-size: .9rem; color: #FFFFFF; font-weight: 600; }
.gal__cap span { font-family: var(--mono); font-size: .65rem; letter-spacing: .07em; color: var(--brass-hi); text-transform: uppercase; }
.gal__item--tall { aspect-ratio: 3/4; }

.filterbar { display: flex; flex-wrap: wrap; gap: .5rem; }
.filterbar button {
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: .84rem; font-weight: 500;
  color: var(--smoke);
  transition: all .3s var(--ease);
}
.filterbar button:hover { color: var(--bone); border-color: var(--line-hi); }
.filterbar button.is-active { background: var(--bone); color: #FFFFFF; border-color: var(--bone); font-weight: 600; }

/* ============================================================
   BRAND BOARD (identity deck page)
   ============================================================ */
.board {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, minmax(0,1fr));
  grid-auto-flow: dense;
}
.board__panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel);
  min-height: 190px;
  padding: clamp(1.15rem, 1rem + .8vw, 1.75rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem;
  grid-column: span 6;
}
@media (min-width: 720px) {
  .board__panel { grid-column: span 3; }
  .board__panel--wide { grid-column: span 6; }
  .board__panel--third { grid-column: span 2; }
}
@media (min-width: 1080px) {
  .board__panel { grid-column: span 2; }
  .board__panel--wide { grid-column: span 4; }
  .board__panel--full { grid-column: span 6; }
  .board__panel--half { grid-column: span 3; }
  .board__panel--tall { grid-row: span 2; }
}
.board__panel--bone { background: var(--paper); border-color: rgba(0,0,0,.09); }
.board__panel--bone .board__tag { color: #8A6221; }
.board__panel--bone h3, .board__panel--bone .board__big { color: var(--paper-ink); }
.board__panel--bone p { color: #5A6268; }
.board__panel--brass { background: linear-gradient(150deg, #EFC069, var(--brass-bright) 50%, #B87A12); border-color: rgba(0,0,0,.10); }
.board__panel--brass .board__tag, .board__panel--brass h3, .board__panel--brass .board__big { color: #1A1206; }
.board__panel--brass p { color: rgba(26,18,6,.74); }
.board__tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass);
}
.board__big {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.045em;
  line-height: .92; color: var(--bone);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.9rem);
}
.board__panel p { font-size: .85rem; color: var(--smoke); line-height: 1.5; margin: 0; }
.board__pn { font-family: var(--mono); font-size: .6rem; color: var(--smoke-2); letter-spacing: .1em; }

.pal-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 92px; border-radius: var(--r-sm); overflow: hidden; }
.pal-strip > div { position: relative; }
.pal-strip span {
  position: absolute; bottom: .35rem; left: .4rem;
  font-family: var(--mono); font-size: .55rem; letter-spacing: .06em;
}

.type-spec { display: grid; gap: .5rem; }
.type-spec__row { display: flex; align-items: baseline; gap: 1rem; justify-content: space-between; }
.type-spec__glyph { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 1.5rem + 2.5vw, 3.6rem); letter-spacing: -0.05em; line-height: .85; color: var(--bone); }

/* ============================================================
   UTILITIES
   ============================================================ */
.grid-2 { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.grid-2--wide-left { }
@media (min-width: 900px) { .grid-2--wide-left { grid-template-columns: 1.25fr 1fr; } }
@media (min-width: 900px) { .grid-2--wide-right { grid-template-columns: 1fr 1.25fr; } }
.grid-3 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid-4 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); }

.stack { display: grid; gap: 1rem; align-content: start; }
.stack-sm { display: grid; gap: .55rem; align-content: start; }
.stack-lg { display: grid; gap: 2rem; align-content: start; }
.stack-xl { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); align-content: start; }

.center { text-align: center; }
.items-center { align-items: center; }
.sticky-top { position: sticky; top: 6.5rem; }
.rel { position: relative; }
.z1 { position: relative; z-index: 1; }
.mt-0 { margin-top: 0; }
.full-bleed-img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); }

.checklist { display: grid; gap: .7rem; }
.checklist li { display: flex; gap: .75rem; align-items: flex-start; font-size: .95rem; color: var(--bone-2); line-height: 1.55; }
.checklist li svg { width: 17px; height: 17px; color: var(--brass); flex-shrink: 0; margin-top: .22rem; }
.section--paper .checklist li { color: var(--bone-2); }

.media-frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.media-frame img, .media-frame canvas { width: 100%; display: block; }
.media-frame--tall { aspect-ratio: 4/5; }
.media-frame--wide { aspect-ratio: 16/10; }
.media-frame--square { aspect-ratio: 1/1; }
.media-frame img { height: 100%; object-fit: cover; }
.media-frame__badge { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; }

/* duotone treatment for ambient photography */
.duotone { position: relative; }
.duotone img { filter: grayscale(1) contrast(1.18) brightness(.68); }
.duotone::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(216,147,30,.20), transparent 45%, rgba(12,25,38,.42));
  mix-blend-mode: color;
  pointer-events: none;
}
.duotone--soft img { filter: grayscale(.72) contrast(1.08) brightness(.78); }

/* inline typographic image pill (used inside a heading) */
.inline-pill {
  display: inline-block;
  width: clamp(58px, 8vw, 108px);
  height: clamp(30px, 4.2vw, 56px);
  border-radius: var(--r-pill);
  vertical-align: middle;
  margin-inline: .18em;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.14);
  transform: translateY(-.06em);
  filter: saturate(.9) contrast(1.05);
}

/* ============================================================
   HERO — SHOWROOM
   White page, one very large uppercase headline, a small centred
   subhead, a single pill CTA, then the product sitting underneath.
   ============================================================ */
.hero--showroom {
  position: relative;
  background: #FFFFFF;
  padding-top: clamp(7rem, 5.5rem + 7vw, 10.5rem);
  padding-bottom: 0;
  overflow: hidden;
  text-align: center;
}

.hero__lede-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .45rem .9rem;
  margin-bottom: clamp(1.35rem, 1rem + 1.4vw, 2.4rem);
}
@media (min-width: 700px) { .hero__lede-top { gap: .5rem 1.6rem; } }
.hero__pillar {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--smoke);
  white-space: nowrap;
}
@media (min-width: 700px) {
  .hero__pillar { font-size: .68rem; letter-spacing: .14em; gap: .5rem; }
}
.hero__pillar svg { width: 13px; height: 13px; color: var(--brass); flex-shrink: 0; }
@media (min-width: 700px) { .hero__pillar svg { width: 15px; height: 15px; } }

/* the headline. uppercase, very heavy, very tight — 2 lines desktop, 3 mobile */
.t-display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.25rem, .9rem + 6.2vw, 7rem);
  line-height: .92;
  letter-spacing: -0.035em;
  color: var(--bone);
  /* full width on small screens, then reined in so desktop holds 2 lines */
  max-width: 100%;
  margin-inline: auto;
  text-wrap: balance;
}
@media (min-width: 760px) { .t-display { max-width: 15ch; } }
/* No block behind the accent phrase — the headline reads as one solid
   run of black type. Emphasis comes from the size alone. */
/* <em> in a heading is emphasis, not italics — this typeface carries it
   with weight and colour instead. Covers every heading, not just the
   hero, so a new one cannot slip through italic. */
.t-display em,
h1 em, h2 em, h3 em, h4 em, h5 em,
.t-hero em, .t-h1 em, .t-h2 em, .t-h3 em, .t-h4 em {
  font-style: normal;
  color: inherit;
}

.hero__sub {
  font-size: clamp(1.02rem, .96rem + .4vw, 1.22rem);
  line-height: 1.55;
  color: var(--smoke);
  max-width: 52ch;
  margin: clamp(1.35rem, 1rem + 1.2vw, 2rem) auto 0;
}

.hero__cta { margin-top: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.hero__cta .btn-row { justify-content: center; }
.hero__note {
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--smoke-2);
}
.hero__note a { color: var(--bone); border-bottom: 1px solid var(--line-hi); }
.hero__note a:hover { color: var(--brass); border-color: var(--brass); }

/* the product, sitting on the page like a showroom shot */
.hero__product {
  position: relative;
  margin-top: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  display: block;
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
  height: auto;
}
.hero__product-wrap { position: relative; }
/* soft contact shadow so the seat is grounded rather than floating */
.hero__product-wrap::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 4%;
  transform: translateX(-50%);
  width: 58%; height: 42px;
  background: radial-gradient(ellipse at center, rgba(11,13,14,.18), transparent 70%);
  filter: blur(10px);
  z-index: -1;
}

/* ============================================================
   HERO — CINEMATIC CENTER VARIANT
   Text centred in a wide box (2–3 lines, never a text wall),
   two CTAs, then a full-bleed 3D stage beneath.
   ============================================================ */
.hero--center { padding-bottom: 0; }
.hero--center .hero__grid { display: block; }
.hero__center {
  position: relative;
  display: grid;
  gap: 1.9rem;
  justify-items: center;
  text-align: center;
  max-width: 1100px;
  margin-inline: auto;
}
/* 20ch at the clamped display size resolves to 2 lines desktop / 3 mobile */
.hero__center .hero__title { max-width: 20ch; margin-inline: auto; }
.hero__center .lede { max-width: 62ch; margin-inline: auto; }
.hero__center .btn-row { justify-content: center; }

.hero__stage--wide {
  position: relative;
  margin-top: clamp(2.75rem, 2rem + 3.5vw, 5rem);
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 76vh;
  min-height: 340px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: radial-gradient(ellipse 72% 58% at 50% 46%, #FFFFFF, #F4F1EA 78%);
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,.055);
}
@media (min-width: 900px) { .hero__stage--wide { aspect-ratio: 21 / 9; } }
.hero__stage--wide canvas { width: 100% !important; height: 100% !important; display: block; }

/* floor fade so the stage melts into the next section */
.hero__stage--wide::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 26%;
  background: linear-gradient(to top, var(--ink), transparent);
  pointer-events: none;
  z-index: 2;
}

.stage-bar {
  position: absolute;
  left: 50%; bottom: clamp(.9rem, .6rem + 1vw, 1.6rem);
  transform: translateX(-50%);
  z-index: 4;
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 1.5rem);
}

/* ============================================================
   CARD STACKING DECK (GSAP pinned)
   ============================================================ */

@media (min-width: 900px) {

}

/* ============================================================
   LOGO — real brand assets extracted from the card artwork
   ============================================================ */
.brand__mark {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  /* the badge's own outer ring is charcoal, so it needs a hairline
     to separate it from the near-black nav */
  box-shadow: 0 0 0 1px rgba(216,147,30,.30), 0 6px 18px -8px rgba(0,0,0,.9);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.brand__mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand:hover .brand__mark {
  box-shadow: 0 0 0 1px rgba(216,147,30,.62), 0 8px 22px -8px rgba(0,0,0,.95);
  transform: translateY(-1px);
}

/* the wordmark carries the nav on its own, so it runs a little larger */
.brand__wordmark {
  height: 30px; width: auto; display: block;
  transform: translateY(1px);
}
@media (min-width: 700px) { .brand__wordmark { height: 36px; } }

.footer .brand__mark { width: 54px; height: 54px; }
.footer .brand__wordmark { height: 34px; }
.drawer .brand__mark { width: 48px; height: 48px; }

/* toast message span */
.toast__msg { min-width: 0; }

/* two-up feature split used on interior pages */
.split-figure {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 5 / 6;
  background: var(--panel);
}
.split-figure canvas { width: 100% !important; height: 100% !important; }

/* compact spec list */
.speclist { display: grid; gap: 0; border-top: 1px solid var(--line); }
.speclist > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
  font-size: .9rem;
}
.speclist dt { color: var(--smoke); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.speclist dd { color: var(--bone); margin: 0; text-align: right; font-weight: 500; }
.section--paper .speclist, .section--paper .speclist > div { border-color: var(--paper-line); }
.section--paper .speclist dd { color: var(--paper-ink); }

/* ============================================================
   CONFIGURATOR — VEHICLE GATE
   ============================================================ */
.gate {
  position: relative;
  padding-top: clamp(7.5rem, 6rem + 7vw, 11rem);
  padding-bottom: clamp(4rem, 3rem + 5vw, 8rem);
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--ink-2), #FFFFFF 62%);
}
.gate__head { display: grid; gap: 1.5rem; justify-items: center; text-align: center; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.gate__head h1 { max-width: 18ch; }
.gate__head .lede { max-width: 56ch; }

.gate-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.gate-card {
  position: relative;
  display: grid;
  gap: .7rem;
  align-content: start;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  min-height: 210px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--panel), var(--ink-2) 88%);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .4s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.gate-card::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--brass), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.gate-card:hover {
  border-color: rgba(216,147,30,.45);
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
.gate-card:hover::after { transform: scaleX(1); }
.gate-card__icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(216,147,30,.3);
  background: rgba(216,147,30,.1);
  color: var(--brass);
  margin-bottom: .35rem;
}
.gate-card__icon svg { width: 28px; height: 28px; }
.gate-card__name {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  letter-spacing: -0.03em; color: var(--bone);
}
.gate-card__blurb { font-size: .9rem; color: var(--smoke); line-height: 1.5; }

/* ============================================================
   CONFIGURATOR — PANEL SECTIONS + MATERIAL CARDS
   ============================================================ */
.cfg__section { display: grid; gap: .85rem; }
.cfg__section > h3 {
  font-family: var(--mono);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}

.matgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
@media (min-width: 1500px) { .matgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.matcard {
  position: relative;
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.matcard:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.matcard.is-active { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
.matcard__tex {
  width: 100%; height: 62px; display: block;
  background: #1A1F24;
}
.matcard__body { display: grid; gap: .15rem; padding: .55rem .65rem .6rem; }
.matcard__name { font-size: .8rem; font-weight: 600; color: var(--bone); letter-spacing: -0.012em; line-height: 1.2; }
.matcard__note { font-family: var(--mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--smoke-2); }
.matcard.is-active .matcard__note { color: var(--brass); }

.cfg__price-note { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--smoke-2); }
.cfg__from { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); }

.cfg__viewport-title {
  position: absolute; left: 50%;
  bottom: clamp(4.2rem, 3.6rem + 2vw, 5.2rem);
  transform: translateX(-50%);
  max-width: calc(100% - 2rem);
  text-align: center;
  z-index: 3; text-align: center;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--smoke);
  pointer-events: none;
  white-space: nowrap;
}
.cfg__vt-long { display: none; }
@media (min-width: 700px) {
  .cfg__viewport-title { font-size: .68rem; letter-spacing: .16em; }
  .cfg__vt-long { display: inline; }
}

/* print */
@media print {
  .nav, .drawer, .callbar, .cta-band, .footer__grid { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   VEHICLE SELECTOR BAND
   The single highest-intent element on the page: three dropdowns
   straight into the configurator, no page in between.
   ============================================================ */
.vsel {
  position: relative;
  background: var(--ink-2);
  border-block: 1px solid var(--line);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.vsel__inner { display: grid; gap: 1.6rem; justify-items: center; text-align: center; }
.vsel__head { display: grid; gap: .7rem; justify-items: center; }
.vsel__head h2 { font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.6rem); }
.vsel__head p { color: var(--smoke); max-width: 46ch; }

.vsel__form {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 940px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .vsel__form { grid-template-columns: repeat(2, 1fr) auto; } }
@media (min-width: 1000px) { .vsel__form { grid-template-columns: repeat(4, 1fr) auto; } }
.vsel__form .control {
  background: #FFFFFF;
  border-color: var(--line-hi);
  padding-block: .95rem;
  font-weight: 500;
}
.vsel__form .btn { white-space: nowrap; }
.vsel__note {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--smoke-2);
}

/* ============================================================
   WORK STRIP — real installs, edge to edge
   ============================================================ */
.workstrip { padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem); }
.workstrip__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .workstrip__grid { grid-template-columns: repeat(4, 1fr); } }
.workstrip__item {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.workstrip__item:first-child { grid-column: span 2; aspect-ratio: 1 / 1; }
@media (min-width: 760px) {
  .workstrip__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}
.workstrip__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.workstrip__item:hover img { transform: scale(1.05); }
.workstrip__cap {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 1rem 1.1rem;
  background: linear-gradient(to top, rgba(8,10,12,.88), transparent);
  color: #fff;
  display: grid; gap: .1rem;
}
.workstrip__cap strong { font-size: .92rem; font-weight: 600; }
.workstrip__cap span {
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.72);
}

/* ============================================================
   PRICE / GUARANTEE BAND
   ============================================================ */
.pband { background: var(--paper); color: var(--bone-2); padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); }
.pband__grid { display: grid; gap: 2rem; text-align: center; }
@media (min-width: 620px) { .pband__grid { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; } }
@media (min-width: 1000px) { .pband__grid { grid-template-columns: repeat(4, 1fr); gap: 2.6rem; } }
.pband__item { display: grid; gap: .5rem; justify-items: center; }
.pband__num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  letter-spacing: -0.04em; line-height: 1; color: var(--bone);
}
.pband__num small { font-size: .42em; font-weight: 700; color: var(--brass); letter-spacing: 0; }
.pband__label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass);
}
.pband__note { font-size: .9rem; color: var(--smoke); max-width: 34ch; }

/* ============================================================
   POPULAR VEHICLES — internal link mesh
   ============================================================ */

@media (min-width: 900px) { .vlinks { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

/* ============================================================
   2D SEAT PREVIEW
   ============================================================ */
/* Reserve the nav at the top and the disclaimer at the bottom so the seat
   is centred in the space actually available. Both heights are measured
   at runtime by site.js — they shift with breakpoint and text wrapping. */
.cfg__canvas {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding:
    calc(var(--nav-h, 84px) + .75rem)
    clamp(1rem, 2vw, 2.5rem)
    calc(var(--disc-h, 64px) + .75rem);
}
.seat2d__canvas { display: block; max-width: 100%; height: auto; }

/* ============================================================
   NAMED COLOUR GRID  (Kolorizer-style)
   Swatches carry their real name, show it on hover, and mark the
   selected one — far clearer than anonymous dots.
   ============================================================ */
/* the old .dots container was flex, which laid the name label out
   beside the grid instead of under it */
.swwrap { display: block; }
.swgrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  max-width: 340px;   /* keeps swatches thumb-sized, not tiles */
}
@media (min-width: 1500px) { .swgrid { grid-template-columns: repeat(8, minmax(0,1fr)); max-width: 380px; } }

.swgrid__sw {
  position: relative;
  aspect-ratio: 1;
  border-radius: 7px;
  border: 1px solid rgba(11,13,14,.16);
  cursor: pointer;
  padding: 0;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.swgrid__sw:hover { transform: scale(1.12); z-index: 3; box-shadow: 0 6px 16px -6px rgba(11,13,14,.45); }
.swgrid__sw.is-active {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--bone);
  z-index: 2;
}
/* tick sits on top of the colour, in whichever of black/white reads */
.swgrid__sw.is-active::after {
  content: "";
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 54%;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.swgrid__sw.is-active.is-light::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0D0E' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* name bubble on hover */
.swgrid__sw::before {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: var(--bone);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .32rem .5rem;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  z-index: 10;
}
.swgrid__sw:hover::before,
.swgrid__sw:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); }

.swgrid__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: .6rem;
}
.swgrid__label b { font-size: .85rem; font-weight: 600; color: var(--bone); }
.swgrid__label span { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--smoke-2); }

/* ============================================================
   STEPPED WIZARD
   ============================================================ */
.cfg__stepnav {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.cfg__stepnav-title { display: grid; gap: .15rem; min-width: 0; }
.cfg__stepnav-title b {
  font-family: var(--display); font-weight: 800;
  font-size: 1.05rem; letter-spacing: -0.02em; color: var(--bone);
}
.cfg__stepnav-title span {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--smoke-2);
}
.cfg__arrows { display: flex; gap: .4rem; flex-shrink: 0; }
.cfg__arrow {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-hi);
  background: #FFFFFF;
  color: var(--bone);
  transition: background .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.cfg__arrow:hover:not(:disabled) { background: var(--panel-2); border-color: var(--bone); }
.cfg__arrow:disabled { opacity: .3; cursor: not-allowed; }
.cfg__arrow svg { width: 17px; height: 17px; }

.cfg__step-panel { display: none; }
.cfg__step-panel.is-current { display: grid; gap: 1.9rem; }

/* honesty note under the preview */
.cfg__disclaimer {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: .7rem clamp(.9rem, 2vw, 1.6rem);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  font-size: .7rem;
  line-height: 1.4;
  color: var(--smoke);
  text-align: center;
  z-index: 4;
  text-wrap: balance;
}
@media (min-width: 700px) { .cfg__disclaimer { font-size: .76rem; } }

/* ============================================================
   VEHICLE SILHOUETTE ICONS
   Real cut-outs driven as CSS masks, so they still inherit
   currentColor and keep their active / hover states.
   ============================================================ */
.vicon {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-image: var(--icon);
          mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.opt__icon { width: 100%; height: 30px; margin-bottom: .3rem; }
.gate-card__icon { width: 74px; height: 46px; border-radius: 12px; }
.gate-card__icon .vicon { width: 100%; height: 100%; }
.vcard__icon { width: 100%; height: 40px; color: var(--smoke); transition: color .35s var(--ease); }
.card--lift:hover .vcard__icon { color: var(--brass); }

/* ============================================================
   CARDS INSIDE THE INVERTED BAND
   .section--paper is the one dark chapter on a light site, so it
   forces headings light. A default .card is white, which left those
   headings light-on-white and effectively invisible. Cards in that
   band get a dark surface to match.
   ============================================================ */
.section--paper .card {
  background: #FFFFFF;
  border-color: var(--paper-line);
}
.section--paper .card p,
.section--paper .card .muted { color: var(--smoke); }
.section--paper .card:hover,
.section--paper a.card:hover {
  border-color: rgba(216,147,30,.55);
  box-shadow: 0 18px 40px -24px rgba(11,13,14,.28);
}
.section--paper .vcard__icon { color: var(--smoke); }
.section--paper a.card:hover .vcard__icon { color: var(--brass); }

/* the silhouettes want a bit more room than a glyph did */
.vcard__icon { height: 48px; margin-bottom: .35rem; }
.vcard__icon .vicon { -webkit-mask-position: left center; mask-position: left center; }

/* the 3D stage wants the reference's neutral grey cyclorama */
.cfg__canvas.is-3d {
  background: radial-gradient(ellipse 78% 66% at 50% 42%, #55585B 0%, #45484B 55%, #383A3D 100%);
}
.cfg__canvas.is-3d canvas { width: 100% !important; height: 100% !important; }
.cfg__canvas.is-3d + .veil { background: linear-gradient(180deg, #4C4F52, #3A3D40); }

/* ============================================================
   BENTO TEXTURE WASHES
   Real material swatches behind the flat tiles, so the grid reads
   as upholstery rather than a wall of empty cards. Kept faint —
   the copy has to stay first in the hierarchy.
   ============================================================ */
.bento-tile__tex {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity .6s var(--ease), transform 1.1s var(--ease);
}
/* Real leather carries its own light and shade, so it needs far less
   opacity than the flat generated swatches did — much above this and the
   body copy stops holding its contrast. */
.bento-tile--tex .bento-tile__tex { opacity: .30; mix-blend-mode: multiply; }
.bento-tile--wash .bento-tile__tex { opacity: .16; mix-blend-mode: multiply; }
.bento-tile--tex:hover .bento-tile__tex,
.bento-tile--wash:hover .bento-tile__tex { transform: scale(1.05); }
.bento-tile--tex > *:not(.bento-tile__tex),
.bento-tile--wash > *:not(.bento-tile__tex) { position: relative; z-index: 1; }

/* copy on the full-bleed media tile needs its own surface */
.bento-tile__body--plate {
  background: linear-gradient(to top, rgba(255,255,255,.97) 62%, rgba(255,255,255,0));
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.bento-tile__body--plate h3 { color: var(--bone); }
.bento-tile__body--plate p { color: var(--bone-2); }
.bento-tile__body--plate .kicker { color: var(--brass); }

/* ============================================================
   LEATHER ON BUTTONS ONLY
   The section-background versions were removed: grain behind body copy
   fought the text on every one of them, and flat surfaces read as more
   deliberate. Buttons keep it — small area, high impact, no text cost.
   ============================================================ */

/* dark pill buttons wear black hide */
.btn--bone {
  background: var(--bone);
  color: #FFFFFF;
}
.btn--bone:hover { background: #262E34; color: #FFFFFF; }


/* ============================================================
   TOUCH MOTION
   Only applied when site.js confirms a touch/narrow context, so
   desktop keeps its GSAP choreography untouched.
   ============================================================ */
.touch-motion .tm-in {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(.985);
  transition:
    opacity .6s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.touch-motion .tm-in.tm-on {
  opacity: 1;
  transform: none;
}

/* press feedback replaces hover on touch */
.touch-motion .tm-press {
  transform: scale(.972) !important;
  transition: transform .12s ease-out !important;
}
.touch-motion .btn.tm-press { filter: brightness(.94); }

/* leather drifts as it passes, driven from rAF in site.js */
.touch-motion .bento-tile__tex,
.touch-motion .bento-tile__img,
.touch-motion .workstrip__item img {
  will-change: transform;
  transition: none;
}

/* the marquee runs a touch slower on small screens so it reads */
@media (max-width: 899px) {
  .marquee__track { animation-duration: 34s; }
  .touch-motion .hero__product { animation: heroFloat 7s ease-in-out infinite; }
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .touch-motion .tm-in { opacity: 1 !important; transform: none !important; }
  .touch-motion .hero__product { animation: none !important; }
}

/* ============================================================
   HERO SHOT
   A real install replaces the generic render. Cropped wide so the
   seat reads at a glance rather than making people scroll a portrait.
   ============================================================ */
.hero__shot {
  position: relative;
  margin: clamp(2rem, 1.5rem + 3vw, 3.75rem) auto 0;
  max-width: 1100px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -46px rgba(11,13,14,.5);
  background: var(--panel-2);
}
.hero__shot-img {
  display: block;
  width: 100%;
  height: clamp(300px, 44vw, 620px);
  object-fit: cover;
  object-position: 54% 56%;
  transition: transform 1.4s var(--ease);
}
.hero__shot:hover .hero__shot-img { transform: scale(1.03); }

.hero__shot-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(2.4rem, 5vw, 3.4rem) clamp(1.1rem, 2.5vw, 1.9rem) clamp(.9rem, 2vw, 1.3rem);
  background: linear-gradient(to top, rgba(8,10,12,.88) 30%, rgba(8,10,12,0));
  color: #fff;
  font-size: .88rem;
  text-align: left;
}
.hero__shot-cap span {
  display: block;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-hi);
  margin-bottom: .2rem;
}

/* ============================================================
   REVIEWS BLOCK
   ============================================================ */
.revblock {
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2.2rem, 1.8rem + 2.5vw, 3.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--ink-2);
}
.revblock__stars { display: flex; gap: 3px; color: var(--brass-bright); }
.revblock__stars svg { width: 22px; height: 22px; }
.revblock .lede { max-width: 46ch; }

/* ============================================================
   WORKSHOP SHOT (About page)
   Sits in a simple stacked column, so it has no layout of its own
   to break — the version wedged beside the process rail squeezed
   that rail's four-column rows into unreadable slivers.
   ============================================================ */
.shopshot {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.shopshot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.shopshot:hover img { transform: scale(1.04); }
.shopshot figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2rem 1rem .85rem;
  background: linear-gradient(to top, rgba(8,10,12,.86) 35%, transparent);
  color: #fff;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase;
}

/* ============================================================
   MATERIAL VIEWER
   One screen: seat on the left, choices on the right. No steps.
   ============================================================ */
.mv { display: grid; gap: clamp(1.5rem, 1.2rem + 2vw, 2.5rem); }
@media (min-width: 1040px) {
  .mv { grid-template-columns: minmax(0, 1.15fr) minmax(0, 380px); align-items: start; }
}

.mv__stage {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--paper-line);
  background: radial-gradient(ellipse 70% 60% at 50% 42%, #FFFFFF, #EFEBE3 78%);
  aspect-ratio: 4 / 3;
  min-height: 320px;
  touch-action: none;
}
@media (min-width: 1040px) { .mv__stage { aspect-ratio: 1 / 1; position: sticky; top: 6.5rem; } }
.mv__stage canvas { width: 100% !important; height: 100% !important; display: block; }

.mv__veil {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: inherit;
  transition: opacity .6s var(--ease), visibility .6s;
}
.mv__veil.is-gone { opacity: 0; visibility: hidden; }

.mv__hint {
  position: absolute; left: 50%; bottom: .9rem;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--smoke-2); pointer-events: none;
}

.mv__panel { display: grid; gap: 1.5rem; align-content: start; }
.mv__panel .field__label b {
  color: var(--bone); font-weight: 600; letter-spacing: -0.01em;
  text-transform: none; font-size: .78rem;
}
.mv__panel .swgrid { max-width: 100%; }

.mv__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mv__chip {
  padding: .48rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--paper-line);
  background: #FFFFFF;
  font-size: .82rem;
  color: var(--bone-2);
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.mv__chip:hover { border-color: var(--brass); color: var(--brass-deep); }
.mv__chip.is-active {
  background: var(--bone); border-color: var(--bone); color: #FFFFFF; font-weight: 600;
}

.mv__note {
  font-size: .76rem; line-height: 1.5; color: var(--smoke);
  padding-top: .25rem; border-top: 1px solid var(--paper-line);
}

/* the viewer is the one place a bought 3D asset earns its weight, so it
   is never fetched until it is actually scrolled to */
.mv__stage[data-state="idle"] { cursor: default; }

/* ==========================================================
   ORDER FLOW  (/order/, five steps)
   One decision per page. The rail is the whole idea: what has
   been chosen stays on screen and the estimate moves with it,
   so it reads like placing an order rather than filling a form.
   ========================================================== */

/* --- progress rail --- */
.ostrip {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  padding: 0; list-style: none;
}
.ostrip__item { display: flex; align-items: center; }
.ostrip__item + .ostrip__item::before {
  content: ''; width: clamp(.6rem, 2vw, 1.6rem); height: 1px;
  background: var(--line-hi); margin: 0 .3rem;
}
.ostrip__link {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .8rem .42rem .5rem;
  border-radius: var(--r-pill);
  font-size: .82rem; color: var(--smoke-2);
  text-decoration: none; white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.ostrip__num {
  display: grid; place-items: center;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  border: 1px solid var(--line-hi);
  font-family: var(--mono); font-size: .68rem; color: var(--smoke-2);
}
.ostrip__item.is-done .ostrip__link { color: var(--brass); }
.ostrip__item.is-done .ostrip__num {
  background: rgba(216,147,30,.12); border-color: rgba(216,147,30,.4); color: var(--brass);
}
a.ostrip__link:hover { background: var(--panel-2); color: var(--bone); }
.ostrip__item.is-now .ostrip__link { color: var(--bone); font-weight: 600; }
.ostrip__item.is-now .ostrip__num {
  background: var(--paper-ink); border-color: var(--paper-ink); color: #fff;
}
@media (max-width: 560px) { .ostrip__label { display: none; } }

/* --- layout --- */
.order__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.6rem); align-items: start; }
@media (min-width: 1040px) { .order__grid { grid-template-columns: minmax(0, 1fr) 25rem; } }
.order__main { display: grid; gap: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); min-width: 0; }

.ostep {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel);
  padding: clamp(1.3rem, 1rem + 1.1vw, 2.1rem);
  display: grid; gap: 1.15rem; min-width: 0;
}
.ostep--flush { padding-inline: clamp(1rem, .6rem + 1vw, 1.5rem); }
.ostep__legend {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--display);
  font-size: clamp(1.05rem, .98rem + .3vw, 1.28rem);
  font-weight: 600; letter-spacing: -.01em; color: var(--bone);
  padding: 0 .5rem; margin-inline-start: -.5rem;
}
.ostep__legend span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  color: var(--brass); background: rgba(216,147,30,.12);
  border: 1px solid rgba(216,147,30,.28);
  border-radius: var(--r-pill); padding: .2rem .5rem; min-width: 1.9rem; text-align: center;
}
.ostep__nav { display: flex; gap: .8rem; }
.ostep__nav:empty { display: none; }

/* --- fit tiers --- */
.ofits { display: grid; gap: .75rem; }
@media (min-width: 720px) { .ofits { grid-template-columns: 1fr 1fr; } }
.ofit {
  display: grid; gap: .4rem; align-content: start; text-align: left;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.ofit:hover { border-color: var(--line-hi); transform: translateY(-1px); }
.ofit.is-active {
  border-color: var(--brass-bright); background: rgba(216,147,30,.07);
  box-shadow: inset 0 0 0 1px rgba(216,147,30,.4);
}
.ofit__head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.ofit__head strong { font-size: 1.02rem; font-weight: 600; color: var(--bone); }
.ofit__from {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--smoke-2); white-space: nowrap;
}
.ofit__from b { color: var(--brass); font-size: .82rem; letter-spacing: 0; }
.ofit__sub { font-size: .84rem; color: var(--brass); }
.ofit__blurb { font-size: .84rem; line-height: 1.6; color: var(--smoke); }

/* --- seat arrangement cards --- */
.ocards { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.ocard {
  display: grid; gap: .22rem; text-align: left;
  padding: .95rem 1.05rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.ocard:hover { border-color: var(--line-hi); transform: translateY(-1px); }
.ocard strong { font-size: .95rem; font-weight: 600; color: var(--bone); }
.ocard span { font-size: .8rem; color: var(--smoke); }
.ocard.is-active {
  border-color: var(--brass-bright); background: rgba(216,147,30,.07);
  box-shadow: inset 0 0 0 1px rgba(216,147,30,.4);
}

/* --- extras --- */
.ochecks { display: flex; flex-wrap: wrap; gap: .5rem; }
.ocheck {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--panel); cursor: pointer;
  font-size: .85rem; color: var(--bone-2);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ocheck:hover { border-color: var(--line-hi); }
.ocheck input { accent-color: var(--brass-bright); width: 15px; height: 15px; cursor: pointer; }
.ocheck:has(input:checked) {
  border-color: var(--brass-bright); background: rgba(216,147,30,.08); color: var(--bone);
}

/* --- material cards --- */
.omats { display: grid; gap: .7rem; }
@media (min-width: 640px) { .omats { grid-template-columns: 1fr 1fr; } }
.omat {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem;
  align-items: start; text-align: left;
  padding: .85rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.omat:hover { border-color: var(--line-hi); transform: translateY(-1px); }
.omat.is-active {
  border-color: var(--brass-bright); background: rgba(216,147,30,.07);
  box-shadow: inset 0 0 0 1px rgba(216,147,30,.4);
}
.omat__media {
  aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--panel-2);
}
.omat__media canvas { width: 100%; height: 100%; display: block; }
.omat__body { display: grid; gap: .28rem; min-width: 0; }
.omat__body strong { font-size: .95rem; font-weight: 600; color: var(--bone); }
.omat__blurb {
  font-size: .8rem; line-height: 1.55; color: var(--smoke);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.omat__best {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brass);
}

/* --- summary rail --- */
@media (min-width: 1040px) { .order__rail { position: sticky; top: 6.5rem; } }
.osum {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); overflow: hidden; box-shadow: var(--shadow-2);
}
.osum__media { aspect-ratio: 16 / 9; background: var(--panel-2); }
.osum__media canvas { width: 100%; height: 100%; display: block; }
.osum__body { padding: clamp(1.2rem, 1rem + .8vw, 1.7rem); display: grid; gap: 1.1rem; }
.osum__list { display: grid; gap: 0; margin: 0; }
.osum__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .58rem 0; border-bottom: 1px solid var(--line);
}
.osum__row:last-child { border-bottom: 0; }
.osum__row dt {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--smoke-2); padding-top: .18rem;
}
.osum__row dd {
  margin: 0; font-size: .9rem; font-weight: 500; color: var(--bone);
  text-align: right; min-width: 0; overflow-wrap: anywhere;
}
.osum__list--wide .osum__row dd { font-size: .95rem; }
.osum__note { font-size: .78rem; line-height: 1.6; color: var(--smoke); }

/* --- the estimate --- */
.oest {
  display: grid; gap: .2rem;
  padding: .95rem 1.05rem;
  border: 1px solid rgba(216,147,30,.34); border-radius: var(--r);
  background: rgba(216,147,30,.07);
}
.oest__label {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brass);
}
.oest__value {
  font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem);
  font-weight: 700; letter-spacing: -.02em; color: var(--bone); line-height: 1.1;
}
.oest__note { font-size: .74rem; line-height: 1.5; color: var(--smoke); }

/* The site-wide mobile call bar would sit on top of the Continue button. */
body:has(.order) .callbar { display: none; }

/* --- WhatsApp, the only way an order leaves the last step --- */
.btn--wa { background: #25D366; color: #06301A; border-color: #25D366; }
.btn--wa:hover { background: #1FA855; border-color: #1FA855; color: #fff; transform: translateY(-2px); }

/* ==========================================================
   HERO ON A PHOTOGRAPH  (.hero--shot)
   The install is the product, so it carries the hero rather
   than sitting in a frame beneath it. Everything below only
   applies when .hero--shot is present, so the plain light
   hero is still there if the photo is ever pulled.
   ========================================================== */

.hero--shot {
  background: #0B0D0E;
  padding-bottom: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  isolation: isolate;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* the seats sit low-left in the frame, so hold that rather than centre */
  object-position: 58% 46%;
  display: block;
  /* the original is a shaded interior; a touch of lift keeps the quilt
     legible once the scrim goes over it */
  filter: brightness(1.14) saturate(1.06);
}

/* Two passes, not one. A flat tint would grey the leather; this keeps the
   red saturated at the edges and only darkens the band the type runs
   through, which is the only place contrast actually has to be won. */
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,9,10,.72) 0%, rgba(8,9,10,.34) 40%,
                            rgba(8,9,10,.42) 70%, rgba(8,9,10,.76) 100%),
    radial-gradient(115% 85% at 50% 40%, rgba(8,9,10,.34), transparent 66%);
}

.hero--shot .wrap { position: relative; z-index: 1; }

/* type inverts to run over the photograph */
.hero--shot .t-display,
.hero--shot .t-display em { color: #FFFFFF; }
.hero--shot .hero__sub { color: rgba(255,255,255,.86); }
.hero--shot .hero__pillar { color: rgba(255,255,255,.78); }
.hero--shot .hero__pillar svg { color: var(--brass-hi); }
.hero--shot .hero__note { color: rgba(255,255,255,.66); }
.hero--shot .hero__note a { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.hero--shot .hero__note a:hover { color: var(--brass-hi); border-color: var(--brass-hi); }

/* the headline needs to hold its own against a busy photograph */
.hero--shot .t-display { text-shadow: 0 2px 40px rgba(0,0,0,.45); }

/* the ambient grid and grain read as noise over a photograph */
.hero--shot .amb, .hero--shot .grain { display: none; }

/* --- nav over a photographic hero ---
   Before it sticks the bar has no background. The badge needs no treatment —
   its own dark disc and white lettering read on either ground — but the
   wordmark beside it is dark ink, so the white artwork is swapped in until
   the pill appears. */
.brand__wordmark--light { display: none; }
body:has(.hero--shot) .nav:not(.is-stuck) .brand__wordmark--dark { display: none; }
body:has(.hero--shot) .nav:not(.is-stuck) .brand__wordmark--light { display: block; }
body:has(.hero--shot) .nav:not(.is-stuck) .nav__link,
body:has(.hero--shot) .nav:not(.is-stuck) .nav__phone { color: rgba(255,255,255,.9); }
body:has(.hero--shot) .nav:not(.is-stuck) .nav__link:hover,
body:has(.hero--shot) .nav:not(.is-stuck) .nav__phone:hover { color: #fff; }
body:has(.hero--shot) .nav:not(.is-stuck) .nav__burger span {
  background: #fff;
  /* the only thing separating a white mark from a bright photograph */
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}

/* --- mobile: the hero is the whole first screen ---
   Everything else starts below the fold, so the photograph and the one
   action get the full screen and the rest is reached by scrolling.
   `svh` is the viewport height with the browser chrome showing, so the
   content still fits when the address bar is expanded; `vh` is kept
   first as the fallback for anything that does not know the unit. */
@media (max-width: 760px) {
  .hero--shot {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    align-content: center;
    /* clears the fixed nav sitting over the top of it */
    padding-top: clamp(6rem, 4rem + 12vw, 8rem);
    padding-bottom: clamp(2rem, 1rem + 6vw, 3.5rem);
  }
}

/* --- the nav badge ---
   A circular mark with a lot inside it — a seat, a car, scissors, a sewing
   machine — so it is given real size rather than being shrunk to wordmark
   height, where the detail would turn to mush. */
.brand__badge {
  height: 46px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: transform .35s var(--ease);
}
@media (max-width: 700px) { .brand__badge { height: 38px; } }
.brand:hover .brand__badge { transform: scale(1.04); }
/* the floating pill is tighter than the open bar, so the badge comes in a
   little with it rather than crowding the edge */
.nav.is-stuck .brand__badge { height: 42px; }
@media (max-width: 700px) { .nav.is-stuck .brand__badge { height: 35px; } }

/* the wordmark rides beside the badge, sized off it rather than off the bar */
.nav .brand__wordmark { height: 27px; width: auto; }
@media (max-width: 700px) { .nav .brand__wordmark { height: 22px; } }
.nav.is-stuck .brand__wordmark { height: 25px; }
@media (max-width: 700px) { .nav.is-stuck .brand__wordmark { height: 20px; } }
/* on the narrowest phones the pair crowds the burger — the badge alone
   still says the name, so the wordmark steps aside */
@media (max-width: 380px) { .nav .brand__wordmark { display: none; } }

/* ==========================================================
   SOCIAL STRIP + REEL
   The shop's own vertical reel beside the channels it lives
   on. Portrait because it was shot for social — framing it as
   a reel is honest to the source and avoids cropping a person
   out of their own video.
   ========================================================== */

.social-strip__grid { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .social-strip__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
}

.social-strip__body { display: grid; gap: 1.1rem; align-content: start; }
.social-strip__body .lede { margin-bottom: .6rem; }

.sociallist { display: grid; gap: .6rem; padding: 0; margin: 0; list-style: none; }

.sociallist__item {
  display: flex; align-items: center; gap: 1rem;
  padding: .95rem 1.15rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel);
  text-decoration: none;
  transition: border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.sociallist__item:hover {
  border-color: var(--line-hi);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

/* the mark is the point of this section, so it is given real size */
.sociallist__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 54px; height: 54px;
  border-radius: 14px;
  color: #fff;
  background: var(--paper-ink);
}
.sociallist__icon svg { width: 27px; height: 27px; }
@media (max-width: 520px) {
  .sociallist__icon { width: 46px; height: 46px; border-radius: 12px; }
  .sociallist__icon svg { width: 23px; height: 23px; }
}

/* each platform in its own colour — a grid of identical grey tiles reads
   as a footer, not as an invitation to follow */
.sociallist__item--ig .sociallist__icon {
  background: linear-gradient(135deg, #F9CE34 0%, #EE2A7B 48%, #6228D7 100%);
}
.sociallist__item--tt .sociallist__icon { background: #0B0D0E; }
.sociallist__item--wa .sociallist__icon { background: #25D366; color: #06301A; }

.sociallist__text { display: grid; gap: .1rem; min-width: 0; }
.sociallist__text strong { font-size: 1rem; font-weight: 700; color: var(--bone); }
.sociallist__text span {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--smoke); overflow-wrap: anywhere;
}
.sociallist__go {
  width: 18px; height: 18px; margin-left: auto; flex-shrink: 0;
  color: var(--smoke-2);
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.sociallist__item:hover .sociallist__go { color: var(--brass); transform: translateX(4px); }

/* --- the reel --- */
.reel {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
}
.reel__video { width: 100%; height: 100%; object-fit: cover; display: block; }

.reel__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(8,9,10,.12), rgba(8,9,10,.42));
  transition: opacity .3s var(--ease);
}
.reel__play svg {
  width: 30px; height: 30px;
  color: var(--paper-ink);
  margin-left: 4px; /* optical centring of a triangle */
}
.reel__play::before {
  content: ''; position: absolute;
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.55);
  transition: transform .3s var(--ease);
}
.reel__play svg { position: relative; z-index: 1; }
.reel__play:hover::before { transform: scale(1.07); }
.reel.is-playing .reel__play { opacity: 0; pointer-events: none; }

/* ==========================================================
   REVIEW WALL
   Two rows of cards drifting in opposite directions. The
   content comes from one JSON block; with no reviews the wall
   hides itself and the plain Google block carries the section.
   ========================================================== */

/* clamp() needs whitespace around the operator — `1rem+2vw` is invalid and
   the browser drops the whole declaration silently. */
.revwall {
  display: grid;
  gap: .75rem;
  margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 clamp(2rem, 1.5rem + 2vw, 3rem);
  overflow: hidden;
}
.revwall__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* every card is the same box. `stretch` alone would let the longest review
   set the height for the whole row, so the quote is capped at a fixed number
   of lines and the card gets an explicit height to match. */
.revwall__track { display: flex; align-items: stretch; gap: .75rem; width: max-content; animation: revdrift 42s linear infinite; }
.revwall__row[data-dir="right"] .revwall__track { animation-direction: reverse; }
.revwall__row:hover .revwall__track { animation-play-state: paused; }
@keyframes revdrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .revwall__track { animation: none; }
  .revwall__row { overflow-x: auto; }
}

.revcard {
  flex: 0 0 auto;
  width: clamp(13.5rem, 56vw, 19rem);
  height: 14.5rem;   /* six clamped lines + stars + byline, with nothing sheared */
  margin: 0;
  padding: 1.05rem 1.15rem;
  border-radius: var(--r);
  background: var(--panel-2);
  border: 1px solid var(--line);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .6rem;
  --q-fs: .845rem;
  --q-lh: 1.55;
}
.revcard__stars { display: flex; gap: 3px; color: var(--brass-bright); }
.revcard__stars svg { width: 13px; height: 13px; }
.revcard__quote {
  margin: 0;
  font-size: var(--q-fs);
  line-height: var(--q-lh);
  color: var(--bone-2);
  /* Two belts for one job. The clamp puts an ellipsis on a long review so it
     trails off instead of stretching the row; the max-height pins the box to a
     whole number of lines, because the grid row is taller than the clamp and
     the leftover was showing the top of a seventh line sliced in half. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  max-height: calc(var(--q-fs) * var(--q-lh) * 6);
  overflow: hidden;
}
.revcard__quote::before { content: '\201C'; }
.revcard__quote::after  { content: '\201D'; }
.revcard__by { display: grid; gap: .2rem; }
.revcard__by strong {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bone); font-weight: 500;
}
.revcard__by span {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--smoke-2);
}

/* a touch smaller again on phones — two rows of these plus the heading is a
   lot of screen otherwise */
@media (max-width: 699px) {
  .revcard {
    width: clamp(12.25rem, 52vw, 15rem);
    height: 11.75rem;
    padding: .9rem .95rem;
    gap: .5rem;
  }
  .revcard { --q-fs: .78rem; --q-lh: 1.5; }
  .revcard__quote {
    -webkit-line-clamp: 5;
    line-clamp: 5;
    max-height: calc(var(--q-fs) * var(--q-lh) * 5);
  }
  .revcard__stars svg { width: 11px; height: 11px; }
  .revcard__by strong { font-size: .61rem; }
  .revcard__by span { font-size: .54rem; }
  .revwall, .revwall__track { gap: .55rem; }
}

/* once the wall is showing, the Google block is a footnote, not the event */
.revblock--compact { padding-top: .5rem; }
.revblock--compact .revblock__stars { display: none; }