/* Northside Auto Care: example site (Complete package)
   Palette
   --bay-0   #0A1115  Bay at night: hero, deepest surfaces
   --steel   #1D2B33  Bay Steel: dark sections, body text family
   --floor   #ECEDE8  Shop Floor: light page background
   --paper   #FBFAF5  Work Order: tags, estimates, repair orders
   --lift    #F4C430  Lift Yellow: the one primary action, highlights on dark
   --coolant #0F6E6A  Coolant Teal: links, secondary accents
   --gasket  #A8341D  Gasket Red: stamps, warnings
   Fonts: Barlow Condensed (display), IBM Plex Sans (body), IBM Plex Mono (times, prices, paperwork)
   Signature: shop paperwork (service tag, written estimate, APPROVED stamp) lit inside a dark bay. */

:root {
  --bay-0: #0A1115;
  --bay-1: #0F181D;
  --steel: #1D2B33;
  --steel-2: #263842;
  --steel-3: #3A4F5A;
  --floor: #ECEDE8;
  --floor-2: #E1E3DD;
  --paper: #FBFAF5;
  --lift: #F4C430;
  --lift-2: #FFD95A;
  --lift-dark: #D9A90F;
  --coolant: #0F6E6A;
  --gasket: #A8341D;
  --pen: #0B3B8C;
  --ink: #172228;
  --muted: #47565E;
  --line: #C9CEC8;
  --on-dark: #E9EEF0;
  --on-dark-muted: #AEBCC3;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --r: 6px;
  --wrap: 1240px;
  --hdr: 72px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --grain-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .36 0 0 0 -.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0 0 0 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --plate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cg fill-rule='evenodd'%3E%3Crect x='2.5' y='6.5' width='13' height='4' rx='2' transform='rotate(45 9 8.5)' fill='%23000' fill-opacity='.5'/%3E%3Crect x='2' y='6' width='13' height='4' rx='2' transform='rotate(45 8.5 8)' fill='%23fff' fill-opacity='.32'/%3E%3Crect x='19.5' y='23.5' width='13' height='4' rx='2' transform='rotate(-45 26 25.5)' fill='%23000' fill-opacity='.5'/%3E%3Crect x='19' y='23' width='13' height='4' rx='2' transform='rotate(-45 25.5 25)' fill='%23fff' fill-opacity='.32'/%3E%3C/g%3E%3C/svg%3E");
  --blueprint:
    linear-gradient(rgba(150,200,205,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,200,205,.06) 1px, transparent 1px),
    linear-gradient(rgba(150,200,205,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,200,205,.11) 1px, transparent 1px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 24px); }
body {
  margin: 0; background: var(--floor) var(--grain-d); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html.nav-open body { overflow: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: var(--coolant); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--steel); }
:focus-visible { outline: 3px solid var(--coolant); outline-offset: 3px; border-radius: 3px; }
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .page-hero :focus-visible { outline-color: var(--lift); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1; margin: 0 0 .5em; letter-spacing: -.003em; }
h1, h2 { text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); text-transform: uppercase; line-height: .9; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); text-transform: uppercase; line-height: .92; }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
@media (max-width: 520px) { .wrap { width: calc(100% - 32px); } }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--lift); color: var(--steel); padding: 10px 16px; font-weight: 600; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 56ch; line-height: 1.55; }
.on-dark { color: var(--on-dark); }
.on-dark .lede { color: var(--on-dark-muted); }
.on-dark a:not(.btn) { color: var(--lift); }
.note { font-family: var(--mono); font-size: .82rem; color: var(--muted); line-height: 1.5; }
.on-dark .note { color: var(--on-dark-muted); }
.kicker { font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 14px; }
.on-dark .kicker { color: var(--on-dark-muted); }
.sample-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .76rem; background: rgba(29,43,51,.08); color: var(--muted); padding: 4px 10px; border-radius: 3px; letter-spacing: .02em; }
.on-dark .sample-label { background: rgba(255,255,255,.08); color: var(--on-dark-muted); }
.section { padding: clamp(72px, 10vw, 140px) 0; position: relative; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: var(--r); border: 2px solid transparent;
  font: 600 1.05rem/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn .arr { width: 18px; height: 18px; transition: transform .35s var(--ease); flex-shrink: 0; }
.btn:hover .arr { transform: translateX(4px); }
.btn-lift {
  background: var(--lift); color: #14100A; border-color: var(--lift); overflow: hidden; isolation: isolate;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 24px -12px rgba(244,196,48,.55);
}
.btn-lift::before { /* hazard sweep on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-101%);
  background: repeating-linear-gradient(-45deg, var(--lift-2) 0 10px, var(--lift) 10px 20px);
  transition: transform .5s var(--ease);
}
.btn-lift:hover { color: #14100A; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 16px 30px -14px rgba(244,196,48,.7); }
.btn-lift:hover::before { transform: translateX(0); }
.btn-lift:active { transform: translateY(1px); }
.btn-dark { background: var(--steel); color: #fff; border-color: var(--steel); }
.btn-dark:hover { background: var(--bay-0); border-color: var(--bay-0); color: #fff; }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover { background: rgba(127,127,127,.14); color: inherit; }
.on-dark .btn-ghost, .hero .btn-ghost, .page-hero .btn-ghost { color: var(--on-dark); border-color: rgba(233,238,240,.45); }
.on-dark .btn-ghost:hover, .hero .btn-ghost:hover, .page-hero .btn-ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.06); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-note { font-family: var(--mono); font-size: .8rem; color: var(--muted); margin: 12px 0 0; }
.on-dark .btn-note, .hero .btn-note, .page-hero .btn-note { color: var(--on-dark-muted); }
.textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--coolant); background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 calc(100% - 8px); transition: background-size .4s var(--ease); }
.textlink:hover { background-size: 100% 2px; color: var(--coolant); }
.textlink .arr { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.textlink:hover .arr { transform: translateX(3px); }
.on-dark .textlink, .on-dark .textlink:hover { color: var(--lift); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60; color: var(--on-dark);
  border-bottom: 1px solid rgba(233,238,240,.08);
}
/* blur lives on a pseudo-element so the fixed mobile menu isn't trapped inside the header box */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10,17,21,.88); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(244,196,48,.55) 20%, rgba(244,196,48,.55) 80%, transparent); opacity: .5; }
.hdr { display: flex; align-items: center; gap: 10px; min-height: var(--hdr); }
.hdr > * { flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; margin-right: auto; min-width: 0; flex-shrink: 1; }
.brand:hover { color: #fff; }
.brand svg { width: 38px; height: 38px; flex-shrink: 0; transition: transform .8s var(--ease); }
.brand:hover svg { transform: rotate(60deg); }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: .88; text-transform: uppercase; letter-spacing: .02em; }
.brand-name small { display: block; font-size: .72rem; font-family: var(--mono); font-weight: 500; letter-spacing: .16em; color: var(--lift); margin-top: 4px; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav-list > li > a, .sub-toggle {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; color: var(--on-dark);
  text-decoration: none; font: 500 .97rem/1 var(--body); border-radius: 4px; background: none; border: 0; cursor: pointer;
}
.nav-list > li > a::after, .sub-toggle::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--lift); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-list > li > a:hover, .sub-toggle:hover { color: #fff; }
.nav-list > li > a:hover::after, .sub-toggle:hover::after { transform: scaleX(1); }
.nav-list > li > a[aria-current="page"], .sub-toggle.is-current { color: var(--lift); }
.nav-list > li > a[aria-current="page"]::after, .sub-toggle.is-current::after { transform: scaleX(1); }
.sub-toggle svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.has-sub { position: relative; }
.sub-label { display: none; }
.sub {
  list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 10px); right: 0; width: 300px;
  background: var(--paper) var(--grain-d); color: var(--ink); border-radius: 8px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.06);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.has-sub.open .sub { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s; }
.sub a { display: block; padding: 12px 14px; border-radius: 5px; text-decoration: none; color: var(--ink); }
.sub a b { display: block; font-weight: 600; }
.sub a span { display: block; font-size: .88rem; color: var(--muted); margin-top: 2px; }
.sub a:hover { background: var(--floor); }
.sub a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--lift); background: var(--floor); }
.nav-extra { display: none; }
.hdr-phone { color: #fff; text-decoration: none; font-family: var(--mono); font-weight: 500; font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 8px; border-radius: 4px; }
.hdr-phone:hover { color: var(--lift); }
.hdr-phone svg { width: 18px; height: 18px; }
.hdr-book { min-height: 46px; padding: 0 18px; font-size: .98rem; }
.hdr-book[aria-current="page"] { box-shadow: 0 0 0 2px var(--bay-0), 0 0 0 4px var(--lift); }
.nav-toggle { display: none; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px; background: transparent; color: #fff; border: 1px solid rgba(233,238,240,.25); border-radius: var(--r); font: 600 .95rem var(--body); cursor: pointer; }
.burger { position: relative; width: 18px; height: 12px; display: block; }
.burger i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease), top .35s var(--ease); }
.burger i:first-child { top: 1px; } .burger i:last-child { top: 9px; }
.nav-toggle[aria-expanded="true"] .burger i:first-child { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger i:last-child { top: 5px; transform: rotate(-45deg); }
@media (max-width: 1320px) { .hdr-phone .num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

@media (max-width: 1100px) {
  :root { --hdr: 64px; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; left: 0; right: 0; top: var(--hdr); bottom: 0; overflow-y: auto; padding: 12px 20px 120px;
    background: var(--bay-0) var(--grain-l); visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s .45s;
  }
  .nav.open { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li > a { min-height: 60px; font: 700 2rem/1 var(--display); text-transform: uppercase; padding: 0 4px; border-bottom: 1px solid rgba(233,238,240,.1); border-radius: 0; }
  .nav-list > li > a::after { left: 4px; right: auto; width: 32px; bottom: 10px; }
  .sub-toggle { display: none; }
  .sub-label { display: block; font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); margin: 24px 4px 6px; }
  .sub { position: static; width: auto; opacity: 1; visibility: visible; transform: none; background: rgba(255,255,255,.04); color: var(--on-dark); box-shadow: none; border: 1px solid rgba(233,238,240,.1); padding: 4px; }
  .sub a { color: var(--on-dark); padding: 14px 12px; }
  .sub a span { color: var(--on-dark-muted); }
  .sub a:hover, .sub a[aria-current="page"] { background: rgba(255,255,255,.06); }
  .sub a[aria-current="page"] b { color: var(--lift); }
  .nav-extra { display: block; margin-top: 28px; }
  .nav-call { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border: 1px solid rgba(233,238,240,.3); border-radius: var(--r); color: #fff; text-decoration: none; font-weight: 600; }
  .nav-call svg { width: 20px; height: 20px; color: var(--lift); }
  .nav-hours { font-family: var(--mono); font-size: .85rem; color: var(--on-dark-muted); margin: 12px 0 0; }
}
@media (max-width: 640px) {
  .hdr { gap: 6px; }
  .brand-name { font-size: 1.22rem; }
  .brand-name small { font-size: .62rem; letter-spacing: .12em; }
  .brand svg { width: 32px; height: 32px; }
  .hdr-phone { display: none; }
  .hdr-book { padding: 0 12px; font-size: .9rem; min-height: 44px; gap: 6px; }
  .hdr-book .arr { display: none; }
  .nav-toggle { width: 44px; padding: 0; justify-content: center; }
  .nav-toggle .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 360px) { .brand-name small { display: none; } .brand svg { display: none; } }

/* ---------- Breadcrumbs ---------- */
.crumbs ol { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .03em; color: var(--on-dark-muted); }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 10px; opacity: .5; }
.crumbs a { color: var(--on-dark); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.crumbs a:hover { color: var(--lift); text-decoration: underline; }
.page-hero.light .crumbs ol { color: var(--muted); }
.page-hero.light .crumbs a { color: var(--ink); }
.page-hero.light .crumbs a:hover { color: var(--coolant); }

/* ---------- Home hero: dark bay, roll-up door, light on the floor ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark); background: var(--bay-0); }
.bay { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bay-wall { position: absolute; inset: 0; background:
  radial-gradient(70% 55% at 72% 58%, rgba(255,214,120,.07), transparent 70%),
  linear-gradient(180deg, #091014 0%, #0E171C 60%, #0B1317 60.2%, #121C22 100%); }
.bay-door { position: absolute; left: 50%; right: 3%; top: 9%; height: 51%; }
.bay-door::before { /* frame */ content: ""; position: absolute; inset: -14px -14px 0; border: 14px solid #141F25; border-bottom: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.bay-gap { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; overflow: hidden;
  background: linear-gradient(180deg, #CDB57A 0%, #E8D7A2 40%, #B9A36C 100%); filter: saturate(.85) brightness(.82); }
.bay-gap::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(40,40,30,.35) 46px 52px); } /* posts/trees outside */
.bay-slats { position: absolute; left: 0; right: 0; top: 0; height: 78%; overflow: hidden; }
.bay-slats-in { position: absolute; left: 0; right: 0; top: 0; height: 100%;
  background:
    linear-gradient(90deg, rgba(0,0,0,.35), transparent 12%, transparent 88%, rgba(0,0,0,.35)),
    repeating-linear-gradient(180deg, #1C2930 0 20px, #121C21 20px 22px, #26353D 22px 24px);
  box-shadow: inset 0 -10px 0 #2B3A42, inset 0 -12px 0 #0C1418; }
.bay-beams { position: absolute; left: 34%; right: -20%; top: 55%; bottom: -5%;
  clip-path: polygon(30% 0, 88% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(97deg, rgba(255,232,170,.0) 0 38px, rgba(255,232,170,.06) 38px 70px, rgba(255,232,170,0) 70px 120px),
    linear-gradient(180deg, rgba(255,226,150,.26), rgba(255,226,150,.06) 55%, transparent 90%);
  filter: blur(2px); mix-blend-mode: screen; }
.bay-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background:
    radial-gradient(28% 22% at 64% 74%, rgba(15,110,106,.22), rgba(140,110,40,.12) 45%, rgba(15,110,106,.10) 62%, transparent 72%),
    radial-gradient(60% 70% at 70% 10%, rgba(255,220,140,.12), transparent 70%),
    var(--grain-l); }
.bay-line { position: absolute; bottom: 0; height: 40%; width: 6px; background: linear-gradient(180deg, rgba(244,196,48,.0), rgba(244,196,48,.45)); transform-origin: bottom; }
.bay-line.l { left: 47%; transform: skewX(-38deg); }
.bay-line.r { left: 99%; transform: skewX(30deg); }
.bay-print { position: absolute; left: 53%; width: 44%; top: 34%; opacity: .9; color: rgba(214,232,235,.17); }
.bay-print svg { width: 100%; height: auto; }
.bay-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,17,21,.94) 0%, rgba(10,17,21,.78) 38%, rgba(10,17,21,.15) 62%, transparent 80%); }
.bay-grain { position: absolute; inset: 0; background: var(--grain-l); opacity: .55; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 80px); align-items: end; min-height: min(860px, calc(100svh - var(--hdr))); padding: clamp(48px, 8vh, 96px) 0 clamp(44px, 7vh, 80px); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-family: var(--mono); font-size: .82rem; color: var(--on-dark-muted); margin: 0 0 26px; letter-spacing: .02em; }
.hero-meta .dot { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark); }
.hero-meta .dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6FCF97; box-shadow: 0 0 0 4px rgba(111,207,151,.18); }
.hero-meta .dot.closed::before { background: #E0A458; box-shadow: 0 0 0 4px rgba(224,164,88,.18); }
.hero-title { font-size: clamp(3.4rem, 9.2vw, 8.6rem); line-height: .84; letter-spacing: -.012em; margin: 0 0 .28em; }
.hero-title .ln { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.hero-title .ln > span { display: inline-block; }
.hero-title .hl { color: var(--lift); position: relative; }
.hero-title .ln-sub { font-size: max(.25em, 1.25rem); line-height: 1.12; margin-top: .7em; }
.hero-title .h1-sub { display: block; font-size: 1em; line-height: 1.12; letter-spacing: .01em; color: var(--on-dark); max-width: 22ch; margin-top: 0; font-weight: 600; }
.hero-lede { color: var(--on-dark-muted); font-size: clamp(1.08rem, 1.4vw, 1.22rem); max-width: 50ch; margin-bottom: 30px; }
.hero .btn-lift { min-height: 60px; padding: 0 28px; font-size: 1.12rem; }
.hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero-call { color: var(--on-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-family: var(--mono); font-size: .95rem; }
.hero-call svg { width: 18px; height: 18px; color: var(--lift); }
.hero-call:hover { color: var(--lift); }

/* Slot card: the first thing to act on */
.slotcard {
  position: relative; background: var(--paper) var(--grain-d); color: var(--ink); border-radius: 4px;
  padding: 22px 22px 18px; box-shadow: 0 40px 70px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.2);
  transform: rotate(-1.2deg);
}
.slotcard::before { content: ""; position: absolute; top: -10px; left: 50%; width: 92px; height: 22px; margin-left: -46px; background: linear-gradient(180deg, #8E9AA0, #5D6A71); border-radius: 3px 3px 6px 6px; box-shadow: 0 2px 0 rgba(0,0,0,.3); } /* clipboard clip */
.slotcard-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 4px; }
.slotcard h2 { font-size: 1.7rem; margin: 0; }
.slotcard .sample-label { font-size: .7rem; padding: 3px 8px; }
.slot-list { list-style: none; margin: 0; padding: 0; }
.slot-list a {
  display: grid; grid-template-columns: 1fr auto 28px; align-items: center; gap: 12px; min-height: 64px; padding: 10px 6px;
  border-bottom: 1px dashed #B9BFB8; color: var(--ink); text-decoration: none; position: relative; transition: background-color .25s var(--ease), padding .35s var(--ease);
}
.slot-list a:hover { background: #FFF3C4; padding-left: 12px; }
.slot-list .sl-day { font-family: var(--display); font-size: 1.45rem; font-weight: 700; text-transform: uppercase; line-height: 1; }
.slot-list .sl-day small { display: block; font-family: var(--mono); font-size: .74rem; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--muted); margin-top: 4px; }
.slot-list .sl-time { font-family: var(--mono); font-weight: 500; font-size: 1.05rem; }
.slot-list .arr { width: 20px; height: 20px; color: var(--coolant); transition: transform .35s var(--ease); }
.slot-list a:hover .arr { transform: translateX(4px); }
.slotcard-foot { font-size: .88rem; color: var(--muted); margin: 12px 0 0; }
.slotcard-foot a { font-weight: 600; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; align-items: start; padding-top: 40px; }
  .bay-door { left: 30%; right: -10%; top: 4%; height: 36%; }
  .bay-beams { left: 10%; top: 36%; }
  .bay-print { left: 36%; width: 70%; top: 18%; }
  .bay-shade { background: linear-gradient(180deg, rgba(10,17,21,.55) 0%, rgba(10,17,21,.82) 30%, rgba(10,17,21,.9) 60%, rgba(10,17,21,.6) 100%); }
  .slotcard { max-width: 460px; transform: rotate(-.8deg); }
}

/* Hero intro: hidden only when JS motion is on (never inside the pricing preview) */
.motion .hero [data-intro] { opacity: 0; }
.motion .hero-title .ln > span { transform: translateY(108%); }

/* ---------- Story: your visit, start to finish (pinned on desktop) ---------- */
.story { position: relative; color: var(--on-dark); background: var(--bay-1); overflow: hidden; isolation: isolate; }
.story::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(42% 60% at 74% 42%, rgba(255,236,190,.10), transparent 70%),
  linear-gradient(180deg, var(--bay-0), #111C22 30%, #0F181D 100%); }
.story::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain-l); opacity: .5; }
.story-light { position: absolute; top: 0; left: 58%; width: 32%; height: 7px; border-radius: 0 0 4px 4px; background: #EEF0E6; box-shadow: 0 0 24px 6px rgba(255,240,200,.35), 0 0 80px 20px rgba(255,236,190,.12); z-index: -1; }
.story-light::after { content: ""; position: absolute; left: -30%; right: -30%; top: 7px; height: 90vh; background: linear-gradient(180deg, rgba(255,240,200,.10), transparent 75%); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.story-pin { padding: clamp(80px, 10vw, 120px) 0; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.story-head h2 { font-size: clamp(2.3rem, 4.6vw, 4rem); max-width: 13ch; margin-bottom: .35em; }
.story-head p { color: var(--on-dark-muted); max-width: 44ch; margin-bottom: 30px; }
.steps-wrap { position: relative; }
.story-steps { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.story-steps::before { content: ""; position: absolute; left: 4px; top: 22px; bottom: 30px; width: 2px; background: rgba(233,238,240,.12); }
.story-progress { position: absolute; z-index: 1; left: 4px; top: 22px; bottom: 30px; width: 2px; background: var(--lift); transform-origin: top; }
.st::before { z-index: 2; }
.voices-label { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.voices-label .kicker { margin: 0; font-size: .8rem; }
.st { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 4px 18px; padding: 11px 0; }
.st::before { content: ""; position: absolute; left: -26px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--bay-1); border: 2px solid var(--lift); }
.st-time { font-family: var(--mono); font-size: .8rem; color: var(--lift); padding-top: 4px; letter-spacing: .02em; }
.st h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); text-transform: uppercase; margin: 0; line-height: 1.02; }
.st p { grid-column: 2; margin: 2px 0 0; color: var(--on-dark-muted); font-size: .98rem; line-height: 1.5; max-width: 46ch; }
.story-cta { margin-top: 30px; padding-left: 26px; }

.story-stage { position: relative; }
.track { position: relative; height: 70px; margin: 0 auto 26px; width: min(460px, 100%); border-bottom: 2px dashed rgba(233,238,240,.18); }
.track-bay { position: absolute; left: 50%; bottom: -2px; width: 150px; margin-left: -75px; height: 64px; border: 2px solid rgba(244,196,48,.55); border-bottom: 0; border-radius: 3px 3px 0 0; }
.track-bay::before { content: "BAY 3"; position: absolute; top: -22px; left: 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--lift); }
.track-car { position: absolute; left: calc(50% - 64px); bottom: 4px; width: 128px; color: var(--on-dark); }
.track-car svg { width: 100%; height: auto; }

/* The repair-order tag (paper) */
.ro-tag {
  position: relative; margin: 0 auto; width: min(440px, 100%); background: var(--paper) var(--grain-d); color: var(--ink);
  border-radius: 12px 12px 4px 4px; padding: 56px 28px 24px; font-family: var(--mono); font-size: .88rem;
  box-shadow: 0 50px 80px -40px rgba(0,0,0,.9), 0 2px 0 rgba(0,0,0,.1); transform: rotate(1.6deg);
}
.ro-tag::before { content: ""; position: absolute; top: 18px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--bay-1); box-shadow: inset 0 0 0 3px #CFC9B8; }
.ro-tag::after { content: ""; position: absolute; left: 14px; right: 14px; top: 46px; border-top: 2px dashed #D0CBBC; }
.ro-tag .string { position: absolute; top: -70px; left: 50%; width: 2px; height: 90px; background: linear-gradient(#C6B48A, #A8956A); transform: rotate(-7deg); transform-origin: bottom; }
.rt-head { display: flex; justify-content: space-between; gap: 10px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.rt-title { font-family: var(--display); font-weight: 700; font-size: 1.9rem; text-transform: uppercase; line-height: 1; margin: 0 0 12px; }
.rt-rows { margin: 0; border-top: 1.5px solid var(--ink); }
.rt-row { display: grid; grid-template-columns: 104px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.rt-row dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rt-row dd { margin: 0; color: var(--pen); font-weight: 500; }
.rt-photo { display: flex; align-items: center; gap: 10px; }
.rt-photo .ph { width: 54px; height: 40px; flex-shrink: 0; border-radius: 3px; background: linear-gradient(160deg, #6B7A82 0 45%, #3D4C55 45% 100%); position: relative; }
.rt-photo .ph::after { content: ""; position: absolute; left: 12px; top: 7px; width: 24px; height: 24px; border-radius: 50%; border: 5px solid #A9B4B9; }
.rt-est { margin-top: 12px; }
.rt-est ul { list-style: none; margin: 0; padding: 0; }
.rt-est li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dotted var(--line); }
.rt-est li span:last-child { white-space: nowrap; }
.rt-total { display: flex; justify-content: space-between; font-weight: 500; font-size: 1.08rem; padding: 10px 0 2px; border-top: 1.5px solid var(--ink); margin-top: 6px; }
.rt-ready { margin-top: 14px; padding: 10px 12px; background: var(--steel); color: #fff; border-radius: 3px; display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; }
.rt-ready b { color: var(--lift); font-weight: 500; }
.stamp {
  position: absolute; right: 18px; top: 140px; padding: 6px 12px 5px; border: 3px solid var(--gasket); color: var(--gasket);
  font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  border-radius: 4px; transform: rotate(-12deg); background: rgba(251,250,245,.82); text-align: center; mix-blend-mode: multiply;
}
.stamp small { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; font-weight: 500; margin-top: 3px; }

@media (max-width: 959px), (max-height: 679px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-light { left: 10%; width: 80%; }
}
@media (max-width: 520px) {
  .st { grid-template-columns: 1fr; }
  .st p { grid-column: 1; }
  .ro-tag { padding: 52px 18px 20px; transform: rotate(.8deg); }
  .rt-row { grid-template-columns: 88px 1fr; }
  .stamp { right: 8px; top: 150px; font-size: 1.35rem; }
}

/* ---------- Price board ---------- */
.board { background: var(--paper) var(--grain-d); position: relative; }
.board::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--plate), linear-gradient(180deg, #7C878C, #4E5A60); background-size: 34px 34px, auto; }
.board-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 7vw, 110px); align-items: start; }
.board-intro { position: sticky; top: calc(var(--hdr) + 40px); }
.board-intro h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.rules { list-style: none; counter-reset: r; margin: 30px 0 28px; padding: 18px 20px; border: 2px solid var(--ink); border-radius: 3px; background: #fff; box-shadow: 6px 6px 0 var(--ink); }
.rules h3 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.rules li { counter-increment: r; display: grid; grid-template-columns: 30px 1fr; padding: 7px 0; border-top: 1px solid var(--line); font-size: .98rem; }
.rules li::before { content: counter(r, decimal-leading-zero); font-family: var(--mono); font-size: .8rem; color: var(--coolant); padding-top: 3px; }
.rules ol { list-style: none; margin: 0; padding: 0; }
.price-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.price-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "desc price"; column-gap: 24px; row-gap: 4px; align-items: end;
  padding: 22px 8px 20px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; position: relative;
  transition: background-color .3s var(--ease);
}
.price-list a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--lift); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.price-list a:hover { background: rgba(244,196,48,.08); }
.price-list a:hover::after { transform: scaleX(1); }
.pl-name { grid-area: name; font-family: var(--display); font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 700; text-transform: uppercase; line-height: 1; transition: transform .4s var(--ease); }
.price-list a:hover .pl-name { transform: translateX(6px); }
.pl-desc { grid-area: desc; color: var(--muted); font-size: .98rem; max-width: 46ch; }
.pl-price { grid-area: price; font-family: var(--mono); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; text-align: right; white-space: nowrap; }
.pl-price small { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.pl-price .free { font-size: .8em; color: var(--coolant); }
@media (max-width: 900px) { .board-grid { grid-template-columns: 1fr; } .board-intro { position: static; } }
@media (max-width: 480px) { .price-list a { grid-template-areas: "name price" "desc desc"; } }

/* ---------- AI front desk (blueprint) ---------- */
.desk { background-color: #0E191F; color: var(--on-dark); position: relative; overflow: hidden; isolation: isolate;
  background-image: var(--blueprint); background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px; }
.desk::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 20% 0%, rgba(15,110,106,.22), transparent 70%), radial-gradient(40% 40% at 90% 100%, rgba(244,196,48,.06), transparent 70%); }
.desk-art { position: absolute; right: -80px; top: -60px; width: 520px; color: rgba(170,215,220,.13); z-index: -1; pointer-events: none; }
.desk-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.desk-head h2 { font-size: clamp(2.5rem, 5.6vw, 5rem); margin: 0; }
.desk-head h2 em { font-style: normal; color: var(--lift); }
.desk-head p { color: var(--on-dark-muted); margin: 0; }
.desk-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.transcript { background: var(--paper) var(--grain-d); color: var(--ink); border-radius: 6px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(0,0,0,.8); }
.transcript-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; background: #E6E8E1; font-family: var(--mono); font-size: .82rem; border-bottom: 1px solid var(--line); }
.transcript-head .live { display: inline-flex; align-items: center; gap: 8px; }
.transcript-head .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gasket); }
.call-timer { font-variant-numeric: tabular-nums; font-weight: 500; }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 3px; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; background: var(--lift); color: var(--steel); }
.transcript ol { list-style: none; margin: 0; padding: 20px; display: grid; gap: 14px; }
.transcript li { display: grid; grid-template-columns: 74px 1fr; gap: 12px; }
.who { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 4px; }
.who.ai { color: var(--coolant); font-weight: 500; }
.transcript li p { margin: 0; }
.transcript li.ai-line p { background: #EEF4F2; padding: 8px 12px; border-radius: 3px 12px 12px 12px; }
.transcript-foot { padding: 12px 20px 16px; border-top: 1px dashed var(--line); font-size: .88rem; color: var(--muted); margin: 0; }
@media (max-width: 480px) { .transcript li { grid-template-columns: 1fr; gap: 2px; } }
.desk-side { display: grid; gap: 18px; }
.owner-text { background: rgba(255,255,255,.04); border: 1px solid rgba(233,238,240,.14); border-radius: 6px; padding: 18px 20px; }
.desk-side h3 { font-size: 1.3rem; text-transform: uppercase; margin-bottom: .5em; }
.bubble { padding: 12px 14px; border-radius: 14px; font-size: .95rem; line-height: 1.45; margin: 0; }
.owner-text .bubble { background: var(--lift); color: var(--steel); border-bottom-left-radius: 4px; font-family: var(--mono); font-size: .82rem; }
.textback { border: 1.5px dashed rgba(233,238,240,.3); border-radius: 6px; padding: 18px 20px; }
.textback p { color: var(--on-dark-muted); }
.textback .bubble { background: #E1E6E3; color: var(--ink); margin-top: 10px; }
.missed { font-family: var(--mono); font-size: .8rem; color: var(--on-dark-muted); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.missed::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #E06A4E; box-shadow: 0 0 0 3px rgba(224,106,78,.3); }
.desk-note { font-size: .95rem; color: var(--on-dark-muted); border-left: 3px solid var(--lift); padding-left: 14px; margin: 0; }
@media (max-width: 900px) { .desk-head, .desk-grid { grid-template-columns: 1fr; } .desk-art { width: 360px; right: -120px; } }

/* ---------- Voices (reviews on home) ---------- */
.voices { background: var(--floor) var(--grain-d); }
.voices-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.bigquote { margin: 0; position: relative; padding-top: clamp(40px, 6vw, 70px); }
.bigquote::before { content: "\201C"; position: absolute; left: -.06em; top: -.15em; font-family: var(--display); font-weight: 800; font-size: clamp(9rem, 18vw, 16rem); line-height: 1; color: var(--lift); }
.bigquote blockquote { margin: 0; position: relative; }
.bigquote p { font-family: var(--display); font-weight: 600; font-size: clamp(2.1rem, 5vw, 4.4rem); line-height: 1; text-transform: uppercase; max-width: 25ch; margin: 0; }
.bigquote .w { display: inline; }
.bigquote figcaption { margin-top: 22px; font-family: var(--mono); font-size: .85rem; color: var(--muted); }
.stars { color: #7A5D00; letter-spacing: 2px; }
.minor-quotes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: clamp(48px, 7vw, 90px); }
.minor-quotes figure { margin: 0; padding-top: 18px; border-top: 2px solid var(--ink); }
.minor-quotes figure:nth-child(1) { grid-column: 2 / span 5; }
.minor-quotes figure:nth-child(2) { grid-column: 8 / span 5; margin-top: 60px; }
.minor-quotes blockquote { margin: 0; font-size: 1.15rem; line-height: 1.5; }
.minor-quotes figcaption { font-family: var(--mono); font-size: .8rem; color: var(--muted); margin-top: 12px; }
@media (max-width: 760px) { .minor-quotes { grid-template-columns: 1fr; } .minor-quotes figure:nth-child(n) { grid-column: 1; margin-top: 0; } }

/* ---------- Closer: diamond plate + steel sign ---------- */
.closer { position: relative; padding: clamp(64px, 9vw, 120px) 0; background-color: #59656B; background-image: var(--plate), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), linear-gradient(135deg, #6E7A80, #48545A 45%, #707C82 60%, #434F55); background-size: 34px 34px, auto, auto; }
.closer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.14), transparent 70%), linear-gradient(180deg, rgba(0,0,0,.25), transparent 25%, transparent 75%, rgba(0,0,0,.35)); pointer-events: none; }
.sign { position: relative; background: var(--bay-0) var(--grain-l); color: var(--on-dark); border-radius: 6px; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 28px 48px; align-items: end; box-shadow: 0 2px 0 rgba(255,255,255,.15) inset, 0 40px 60px -30px rgba(0,0,0,.8); }
.sign::before, .sign::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #C9D1D4, #5F6B70 70%); top: 14px; left: 14px; }
.sign::after { left: auto; right: 14px; }
.sign h2 { font-size: clamp(2.4rem, 5.4vw, 4.8rem); margin: 0 0 .25em; }
.sign h2 em { font-style: normal; color: var(--lift); }
.sign p { color: var(--on-dark-muted); margin: 0; max-width: 46ch; }
.sign .btn-row { justify-content: flex-end; }
@media (max-width: 820px) { .sign { grid-template-columns: 1fr; } .sign .btn-row { justify-content: flex-start; } }

/* ---------- Footer ---------- */
.site-footer { background: #080E11; color: var(--on-dark-muted); padding: 72px 0 100px; font-size: .97rem; position: relative; }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--lift); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); gap: 48px; }
.foot-brand p { margin: 18px 0 22px; max-width: 36ch; }
.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.site-footer h2 { font-size: 1rem; font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--on-dark-muted); margin-bottom: 14px; }
.foot-visit h2 { font-family: var(--display); font-size: 1.6rem; letter-spacing: .01em; color: #fff; font-weight: 700; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; min-height: 40px; align-items: center; text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; }
.foot-hours { margin: 14px 0 0; font-family: var(--mono); font-size: .88rem; }
.foot-hours div { display: flex; justify-content: space-between; max-width: 240px; padding: 5px 0; border-bottom: 1px solid #1E2C33; }
.foot-hours dd { margin: 0; color: var(--on-dark); }
.open-now { font-family: var(--mono); font-size: .82rem; margin-top: 12px; color: var(--lift); }
.foot-base { margin-top: 56px; padding-top: 20px; border-top: 1px solid #1E2C33; font-size: .86rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
@media (max-width: 960px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: 1fr; } .foot-nav { grid-template-columns: 1fr 1fr; } }

/* ---------- Inner page heroes ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark); background: var(--bay-0); padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 96px); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 90% at 85% 0%, rgba(255,226,160,.10), transparent 65%), linear-gradient(180deg, #0B1317, #111C22); }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain-l); opacity: .5; pointer-events: none; }
.page-hero h1 { max-width: 15ch; margin-bottom: .3em; }
.page-hero .lede { color: var(--on-dark-muted); }
.page-hero .btn-row { margin-top: 28px; }
.ph-art { position: absolute; z-index: -1; right: max(-60px, calc((100vw - var(--wrap)) / 2 - 40px)); top: 50%; transform: translateY(-50%); width: min(520px, 46vw); color: rgba(190,225,230,.16); pointer-events: none; }
.ph-art svg { width: 100%; height: auto; }
.page-hero.blueprint { background-color: #0E191F; }
.page-hero.blueprint::before { background-image: radial-gradient(50% 80% at 80% 20%, rgba(15,110,106,.25), transparent 70%), var(--blueprint); background-size: auto, 24px 24px, 24px 24px, 120px 120px, 120px 120px; }
.page-hero.plate { padding-bottom: clamp(80px, 10vw, 130px); }
.page-hero.plate .plate-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; z-index: -1; background-color: #59656B; background-image: var(--plate), linear-gradient(180deg, #7A868B, #4A565C); background-size: 34px 34px, auto; box-shadow: inset 0 2px 0 rgba(255,255,255,.18); }
.page-hero.light { color: var(--ink); background: var(--paper); }
.page-hero.light::before { background: radial-gradient(70% 100% at 90% 0%, rgba(244,196,48,.16), transparent 60%), linear-gradient(180deg, #F4F2EA, var(--paper)); }
.page-hero.light::after { background: var(--grain-d); opacity: .9; }
.page-hero.light .lede { color: var(--muted); }
.page-hero.light .ph-art { color: rgba(29,43,51,.12); }
.page-hero.light .btn-ghost { color: var(--ink); border-color: var(--ink); }
.page-hero.light .btn-ghost:hover { background: rgba(29,43,51,.08); border-color: var(--ink); }
.page-hero.light :focus-visible { outline-color: var(--coolant); }
.ph-door { position: absolute; z-index: -1; right: 4%; top: 12%; width: min(560px, 44vw); height: 70%; pointer-events: none; }
.ph-slats { position: absolute; left: 0; right: 0; top: 0; height: 72%; background: linear-gradient(90deg, rgba(0,0,0,.35), transparent 14%, transparent 86%, rgba(0,0,0,.35)), repeating-linear-gradient(180deg, #1C2930 0 18px, #121C21 18px 20px, #26353D 20px 22px); box-shadow: inset 0 -8px 0 #2B3A42; }
.ph-gap { position: absolute; left: 0; right: 0; top: 72%; height: 12%; overflow: hidden; background: linear-gradient(180deg, #8F7F57 0%, #CDB98A 45%, #8C7B52 100%); filter: saturate(.8); }
.ph-gap::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(30,30,22,.45) 46px 52px), linear-gradient(90deg, rgba(10,17,21,.5), transparent 20%, transparent 80%, rgba(10,17,21,.5)); }
.ph-beam { position: absolute; left: -20%; right: -20%; top: 84%; height: 90%; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); background: repeating-linear-gradient(97deg, transparent 0 38px, rgba(255,232,170,.05) 38px 70px, transparent 70px 120px), linear-gradient(180deg, rgba(255,226,150,.16), transparent 75%); }
.page-hero.door .lede, .page-hero.door h1 { text-shadow: 0 2px 20px rgba(10,17,21,.8); }
@media (max-width: 860px) { .ph-door { opacity: .35; width: 70vw; right: -16vw; } }
.page-hero.compact { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(32px, 4vw, 48px); }
.split > .invoice { position: sticky; top: calc(var(--hdr) + 32px); }
.page-hero.compact h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
.hero-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .hero-split { grid-template-columns: 1fr; } .ph-art { opacity: .55; width: 80vw; right: -30vw; } }

/* ---------- Reveal (CSS + IntersectionObserver) ---------- */
.motion [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion [data-reveal="fade"] { transform: none; }
.motion [data-reveal="left"] { transform: translateX(-26px); }
.motion [data-reveal="left"].is-in { transform: none; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; margin-bottom: 16px; align-content: start; }
.field label, .legend { font-weight: 600; font-size: .98rem; }
.hint { font-size: .88rem; color: var(--muted); margin: 0; }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea {
  width: 100%; min-height: 50px; padding: 11px 13px; font: 400 1rem/1.4 var(--body); color: var(--ink);
  background: #fff; border: 1.5px solid #8C9A94; border-radius: var(--r); transition: border-color .2s, box-shadow .2s;
}
input:hover, select:hover, textarea:hover { border-color: var(--steel); }
textarea { min-height: 110px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--coolant); outline-offset: 1px; border-color: var(--coolant); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--gasket); box-shadow: 0 0 0 1px var(--gasket); }
.err { color: var(--gasket); font-size: .92rem; font-weight: 600; margin: 0 0 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .row2, .row3 { grid-template-columns: 1fr; } }
fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
legend { padding: 0; }
.check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--coolant); flex-shrink: 0; }
.form-card { background: #fff; border-radius: 8px; padding: clamp(22px, 4vw, 40px); box-shadow: 0 30px 60px -40px rgba(29,43,51,.5), 0 0 0 1px rgba(29,43,51,.08); color: var(--ink); }
.form-card :focus-visible { outline-color: var(--coolant); }
.confirm { background: #E2F0EE; border-left: 6px solid var(--coolant); padding: 18px 20px; border-radius: 4px; margin-top: 16px; color: var(--ink); }
.confirm h3 { font-size: 1.5rem; text-transform: uppercase; margin-bottom: .3em; }
.confirm p:last-child { margin: 0; }
.form-section-title { display: flex; align-items: baseline; gap: 12px; font-size: 1.9rem; text-transform: uppercase; margin: 8px 0 14px; }
.form-section-title span { font-family: var(--mono); font-size: .8rem; color: var(--coolant); font-weight: 500; }

/* Choice chips (booking) */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.chip { position: relative; display: block; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: flex; flex-direction: column; gap: 3px; min-height: 66px; justify-content: center; padding: 12px 14px; background: #fff; border: 1.5px solid #A7B2AD; border-radius: var(--r); cursor: pointer; font-weight: 600; transition: border-color .2s, background-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease); }
.chip span:hover { border-color: var(--steel); transform: translateY(-1px); box-shadow: 0 8px 16px -12px rgba(29,43,51,.5); }
.chip span small { font-family: var(--mono); font-size: .78rem; color: var(--muted); font-weight: 400; }
.chip input:checked + span { border-color: var(--coolant); background: #E7F2F0; box-shadow: inset 0 0 0 1px var(--coolant); }
.chip input:checked + span::after { content: "\2713"; position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--coolant); color: #fff; font-size: .8rem; display: grid; place-items: center; }
.chip input:focus-visible + span { outline: 3px solid var(--coolant); outline-offset: 2px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.slots .chip span { min-height: 50px; align-items: center; font-family: var(--mono); font-weight: 500; }
.slots .chip input:checked + span::after, .days .chip input:checked + span::after { content: none; }
.slots .chip input:checked + span, .days .chip input:checked + span { background: var(--steel); color: #fff; border-color: var(--steel); box-shadow: none; }
.days .chip input:checked + span small { color: var(--on-dark-muted); }
.slots .chip input:disabled + span { opacity: .55; cursor: not-allowed; text-decoration: line-through; transform: none; box-shadow: none; }
.days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; }
.days .chip span { min-width: 92px; min-height: 66px; align-items: center; text-align: center; font-weight: 400; }
.days .chip span b { font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; }

/* Booking wizard */
.booking { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.booking-side { position: sticky; top: calc(var(--hdr) + 28px); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--muted); font-weight: 500; transition: color .3s; }
.steps li::before { content: counter(s); width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border: 1.5px solid #A7B2AD; border-radius: 50%; font-family: var(--mono); font-size: .88rem; transition: background-color .35s var(--ease), border-color .35s, color .35s; }
.steps li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.steps li[aria-current="step"]::before { background: var(--lift); border-color: var(--lift); color: var(--steel); }
.steps li.done::before { content: "\2713"; background: var(--coolant); border-color: var(--coolant); color: #fff; }
.side-help { margin-top: 26px; padding: 18px; background: var(--paper) var(--grain-d); border: 1px solid var(--line); border-radius: 6px; font-size: .95rem; }
.side-help p { margin: 0 0 8px; }
.side-help a { font-weight: 600; }
.progress { height: 4px; background: var(--floor-2); border-radius: 2px; overflow: hidden; margin: -8px 0 26px; }
.progress i { display: block; height: 100%; width: 0; background: var(--lift); transition: width .6s var(--ease); }
.held { display: flex; gap: 12px; align-items: flex-start; background: #FFF6D6; border: 1.5px solid var(--lift-dark); border-radius: 6px; padding: 12px 14px; margin-bottom: 22px; font-size: .96rem; }
.held svg { width: 22px; height: 22px; flex-shrink: 0; color: #7A5D00; margin-top: 2px; }
.held p { margin: 0; }
@media (max-width: 860px) {
  .booking { grid-template-columns: minmax(0, 1fr); }
  .booking-side { position: static; }
  .steps { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
  .steps li { flex-direction: column; gap: 4px; font-size: .76rem; min-width: 66px; text-align: center; padding: 0; }
  .side-help { display: none; }
}
.step-panel h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.step-panel:focus { outline: none; }
.motion .step-panel.enter { animation: stepIn .55s var(--ease) both; }
.motion .step-panel.enter.back { animation-name: stepBack; }
@keyframes stepIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.step-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.summary { list-style: none; margin: 0; padding: 16px 18px; font-family: var(--mono); font-size: .95rem; background: var(--paper) var(--grain-d); border: 1px solid var(--line); border-radius: 4px; }
.summary li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.summary li:last-child { border-bottom: 0; }
.summary li span:first-child { color: var(--muted); text-transform: uppercase; font-size: .76rem; letter-spacing: .05em; padding-top: 3px; }
.summary li span:last-child { color: var(--pen); }
@media (max-width: 480px) { .summary li { grid-template-columns: 1fr; gap: 2px; } }
.booked { position: relative; overflow: hidden; }
.booked .stamp { position: static; display: inline-block; margin-bottom: 14px; transform: rotate(-6deg); }
.motion .booked .stamp { animation: stampIn .55s cubic-bezier(.2,.9,.3,1.3) .15s both; }
@keyframes stampIn { from { opacity: 0; transform: rotate(-6deg) scale(2); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }

/* ---------- Services page ---------- */
.jumpbar { position: sticky; top: var(--hdr); z-index: 30; background: rgba(236,237,232,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.jumpbar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.jumpbar ul::-webkit-scrollbar { display: none; }
.jumpbar a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 14px; white-space: nowrap; font-weight: 500; font-size: .95rem; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; }
.jumpbar a:hover { border-bottom-color: var(--ink); }
.jumpbar a.is-active { border-bottom-color: var(--lift-dark); color: var(--ink); font-weight: 600; }
.svc-block { display: grid; grid-template-columns: 80px minmax(0, .9fr) minmax(0, 1.3fr); gap: 24px clamp(20px, 4vw, 56px); padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line); }
.svc-block:first-child { border-top: 2px solid var(--ink); }
.svc-num { font-family: var(--mono); font-size: .85rem; color: var(--muted); padding-top: 10px; }
.svc-block h2 { font-size: clamp(2.1rem, 3.8vw, 3.2rem); margin-bottom: 18px; }
.price-tag { position: relative; display: inline-block; font-family: var(--mono); background: var(--paper) var(--grain-d); border: 1.5px solid var(--ink); padding: 10px 16px 10px 34px; border-radius: 3px 10px 10px 3px; font-weight: 500; margin: 0; }
.price-tag::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--floor); }
.price-tag small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.svc-body > p:first-child { font-size: 1.12rem; }
.incl { margin: 0 0 18px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.incl li { padding-left: 22px; position: relative; }
.incl li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border: 2px solid var(--coolant); transform: rotate(45deg); }
@media (max-width: 860px) { .svc-block { grid-template-columns: 1fr; gap: 12px; } .svc-num { padding: 0; } }
@media (max-width: 560px) { .incl { grid-template-columns: 1fr; } }
.faq-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 2px solid var(--ink); }
.faq summary { cursor: pointer; padding: 20px 4px; font-weight: 600; font-size: 1.08rem; min-height: 48px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; flex-shrink: 0; background: linear-gradient(var(--coolant), var(--coolant)) center/14px 2px no-repeat, linear-gradient(var(--coolant), var(--coolant)) center/2px 14px no-repeat; transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 4px 20px; color: var(--muted); max-width: 64ch; }

/* ---------- Two-col generic ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li { padding: 10px 0 10px 30px; border-bottom: 1px solid var(--line); position: relative; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 12px; height: 7px; border-left: 2.5px solid var(--coolant); border-bottom: 2.5px solid var(--coolant); transform: rotate(-45deg); }
.on-dark .ticks li { border-color: rgba(233,238,240,.14); }
.on-dark .ticks li::before { border-color: var(--lift); }
.dark-band { background: var(--bay-1) var(--grain-l); color: var(--on-dark); }

/* ---------- Fleet ---------- */
.spec { margin: 28px 0; border: 1.5px solid var(--ink); background: var(--paper) var(--grain-d); }
.spec div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.spec div:last-child { border-bottom: 0; }
.spec dt { font-family: var(--display); font-size: 1.35rem; font-weight: 700; text-transform: uppercase; line-height: 1.1; }
.spec dd { margin: 0; color: var(--muted); }
@media (max-width: 520px) { .spec div { grid-template-columns: 1fr; gap: 4px; } }
.invoice { background: var(--paper) var(--grain-d); font-family: var(--mono); font-size: .88rem; border-radius: 3px; padding: 24px; color: var(--ink); box-shadow: 0 30px 60px -36px rgba(29,43,51,.6), 0 0 0 1px rgba(29,43,51,.08); transform: rotate(.8deg); }
.invoice-head { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 8px; }
.invoice-head b { font-family: var(--display); font-size: 1.6rem; text-transform: uppercase; line-height: 1; }
.invoice table { width: 100%; border-collapse: collapse; }
.invoice th, .invoice td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--line); }
.invoice td:last-child, .invoice th:last-child { text-align: right; }
.invoice caption { text-align: left; padding-bottom: 10px; color: var(--muted); }
.invoice tfoot th, .invoice tfoot td { border-bottom: 0; border-top: 1.5px solid var(--ink); font-weight: 500; }

/* ---------- Reviews page ---------- */
.gbp { background: #fff; color: var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(29,43,51,.5), 0 0 0 1px rgba(29,43,51,.08); max-width: 420px; justify-self: end; width: 100%; }
.gbp-map { height: 120px; position: relative; background:
  linear-gradient(90deg, transparent 48%, #fff 48% 52%, transparent 52%),
  linear-gradient(0deg, transparent 58%, #fff 58% 63%, transparent 63%),
  linear-gradient(25deg, transparent 30%, #F4E3A1 30% 34%, transparent 34%), #DDE5DF; }
.gbp-map::after { content: ""; position: absolute; left: 50%; top: 40%; width: 22px; height: 22px; margin: -22px 0 0 -11px; background: var(--gasket); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.gbp-body { padding: 18px 20px 20px; }
.gbp-body h2 { font-family: var(--body); text-transform: none; font-size: 1.35rem; font-weight: 600; margin-bottom: 4px; }
.gbp-rating { display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--muted); }
.gbp-rating b { color: var(--ink); }
.gbp-meta { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: .95rem; display: grid; gap: 6px; }
.gbp-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.gbp-actions span { flex: 1; text-align: center; padding: 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; color: var(--coolant); font-weight: 600; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 30px; }
.filter button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 500 .95rem var(--body); cursor: pointer; transition: background-color .25s, color .25s; }
.filter button:hover { background: rgba(29,43,51,.08); }
.filter button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.review-grid { columns: 3 300px; column-gap: 28px; }
.review { break-inside: avoid; margin: 0 0 28px; padding: 22px 0 0; border-top: 2px solid var(--ink); }
.review blockquote { margin: 0; }
.review blockquote p { font-size: 1.1rem; line-height: 1.5; margin: 6px 0 0; }
.review.lg blockquote p { font-family: var(--display); font-size: 1.9rem; line-height: 1.02; text-transform: uppercase; font-weight: 600; }
.review figcaption { font-family: var(--mono); font-size: .8rem; color: var(--muted); margin-top: 12px; }
.svc-tagline { display: inline-block; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--coolant); margin-right: 8px; }
.motion .review.flash { animation: fadeUp .5s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Blog ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0; background: var(--paper) var(--grain-d); border: 1.5px solid var(--ink); border-radius: 4px; overflow: hidden; }
.feature-art { min-height: 300px; background-color: #0E191F; background-image: var(--blueprint); background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px; color: rgba(190,225,230,.4); display: grid; place-items: center; padding: 30px; position: relative; }
.feature-art svg { width: min(300px, 80%); }
.feature-art .label { position: absolute; left: 16px; top: 16px; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lift); }
.feature-body { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.feature-body h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.feature-body h2 a { color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--lift), var(--lift)); background-size: 0 .14em; background-repeat: no-repeat; background-position: 0 92%; transition: background-size .5s var(--ease); }
.feature-body h2 a:hover { background-size: 100% .14em; }
@media (max-width: 820px) { .feature { grid-template-columns: 1fr; } .feature-art { min-height: 200px; } }
.post-meta { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.post-index { list-style: none; margin: 40px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.post-index li a { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 8px 28px; align-items: baseline; padding: 22px 6px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color .3s var(--ease); }
.post-index li a:hover { background: rgba(244,196,48,.1); }
.post-index .topic { font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--coolant); }
.post-index h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 0; text-transform: uppercase; }
.post-index p { grid-column: 2; margin: 0; color: var(--muted); }
.post-index .post-meta { grid-column: 3; grid-row: 1; }
@media (max-width: 700px) { .post-index li a { grid-template-columns: 1fr; } .post-index p, .post-index .post-meta { grid-column: 1; grid-row: auto; } }
.article { background: var(--paper) var(--grain-d); border-radius: 4px; padding: clamp(24px, 5vw, 64px); max-width: 820px; margin-inline: auto; box-shadow: 0 30px 60px -44px rgba(29,43,51,.5), 0 0 0 1px rgba(29,43,51,.08); }
.article h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.article h3 { font-size: 1.6rem; text-transform: uppercase; margin-top: 1.4em; }
.article p, .article li { font-size: 1.1rem; }
.article .callout { border-left: 6px solid var(--lift); background: #FBF3D2; padding: 14px 18px; margin: 1.5em 0; }
.sound-table { width: 100%; border-collapse: collapse; margin: 1em 0 1.5em; font-size: 1rem; }
.sound-table th, .sound-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sound-table th { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.table-scroll { overflow-x: auto; }

/* ---------- Drop-off ---------- */
.keysteps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(233,238,240,.18); max-width: 860px; }
.keysteps li { padding: 16px 20px 0 0; }
.keysteps b { display: block; font-family: var(--mono); font-size: .78rem; color: var(--lift); font-weight: 500; margin-bottom: 4px; }
.keysteps span { color: var(--on-dark); }
@media (max-width: 640px) { .keysteps { grid-template-columns: 1fr; } .keysteps li { padding: 12px 0; border-bottom: 1px solid rgba(233,238,240,.12); } }
.dropoff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 980px) { .dropoff { grid-template-columns: 1fr; } }
.ro-wrap { position: sticky; top: calc(var(--hdr) + 24px); }
@media (max-width: 980px) { .ro-wrap { position: static; } }
.ro { background: var(--paper) var(--grain-d); color: #111; aspect-ratio: 8.5 / 11; width: 100%; padding: 6%; box-shadow: 0 30px 60px -32px rgba(29,43,51,.6), 0 0 0 1px #D5DAD6; font-family: var(--mono); font-size: clamp(.62rem, 1.1vw, .78rem); display: flex; flex-direction: column; gap: 3%; overflow: hidden; transform: rotate(.6deg); }
@media (max-width: 980px) { .ro { aspect-ratio: auto; font-size: .78rem; gap: 14px; transform: none; } }
.ro-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid #111; padding-bottom: 8px; gap: 8px; }
.ro-head b { font-family: var(--display); font-size: 2em; text-transform: uppercase; line-height: 1; display: block; }
.ro-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #111; }
.ro-cell { padding: 5px 7px; border-right: 1px solid #111; border-bottom: 1px solid #111; min-height: 2.8em; }
.ro-cell:nth-child(2n) { border-right: 0; }
.ro-cell.full { grid-column: 1 / -1; border-right: 0; }
.ro-cell .k { display: block; font-size: .78em; text-transform: uppercase; color: #555; letter-spacing: .04em; }
.ro-cell .v { display: block; min-height: 1.3em; color: var(--pen); font-weight: 500; word-break: break-word; }
.ro-cell .v:empty::before { content: "\00a0"; }
.ro-concern .v { min-height: 4.5em; white-space: pre-wrap; }
.ro-sign { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: end; margin-top: auto; }
.ro-sign .line { border-bottom: 1px solid #111; min-height: 2.4em; font-family: "Caveat", cursive; font-size: 1.9em; color: var(--pen); line-height: 1; }
.ro-sign small { font-size: .8em; color: #555; text-transform: uppercase; }
.ro-limit { border: 2px solid #111; padding: 6px 8px; font-weight: 500; }
.ro-limit .v { display: inline; color: var(--pen); }
.ro-foot { font-size: .8em; color: #555; border-top: 1px dashed #999; padding-top: 6px; }

/* ---------- About ---------- */
.about-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.pull { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; text-transform: uppercase; margin: 0 0 28px; padding-left: 22px; border-left: 6px solid var(--lift); }
@media (max-width: 860px) { .about-story { grid-template-columns: 1fr; } }
.photo-ph { aspect-ratio: 4/3; border-radius: 3px; display: grid; place-items: center; text-align: center; padding: 16px; font-family: var(--mono); font-size: .8rem; color: var(--muted);
  background: repeating-linear-gradient(135deg, #DCE1DD 0 12px, #E6EAE7 12px 24px); }
.photo-ph b { display: block; font-family: var(--display); font-size: 2.8rem; color: var(--steel); line-height: 1; }
.team { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.team li:nth-child(even) { margin-top: 40px; }
.team h3 { font-size: 1.5rem; margin: 14px 0 2px; text-transform: uppercase; }
.team p { margin: 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 900px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .team li:nth-child(even) { margin-top: 0; } }
.certs { display: flex; flex-wrap: wrap; gap: 12px; }
.cert { border: 1.5px dashed #8C9A94; border-radius: 4px; padding: 12px 16px; font-family: var(--mono); font-size: .86rem; color: var(--muted); background: var(--paper); }
.hours { width: 100%; border-collapse: collapse; font-family: var(--mono); }
.hours th, .hours td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.hours td { text-align: right; }
.map-ph { aspect-ratio: 16/10; border-radius: 4px; position: relative; overflow: hidden; background:
  linear-gradient(90deg, transparent 38%, #fff 38% 41%, transparent 41%),
  linear-gradient(90deg, transparent 74%, #fff 74% 76%, transparent 76%),
  linear-gradient(0deg, transparent 45%, #F4E3A1 45% 50%, transparent 50%),
  linear-gradient(0deg, transparent 80%, #fff 80% 82%, transparent 82%), #D9E2DC; }
.map-ph .pin { position: absolute; left: 39.5%; top: 47.5%; transform: translate(-50%, -100%); background: var(--steel); color: #fff; font-family: var(--mono); font-size: .8rem; padding: 6px 10px; border-radius: 4px; white-space: nowrap; }
.map-ph .pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--steel); }
.map-ph .cap { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.92); font-family: var(--mono); font-size: .75rem; padding: 4px 8px; border-radius: 3px; color: var(--muted); }
.oldsite { border-left: 4px solid var(--coolant); padding: 4px 0 4px 16px; margin-top: 20px; color: var(--muted); }
.oldsite p { margin: 0; }

/* ---------- Chat assistant ---------- */
.chat-launch {
  position: fixed; right: 16px; bottom: 16px; z-index: 2147482000; display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 20px 0 16px; border-radius: 999px; border: 1.5px solid rgba(244,196,48,.8);
  background: rgba(10,17,21,.94); color: #fff; font: 600 1rem var(--body); cursor: pointer;
  box-shadow: 0 18px 36px -14px rgba(0,0,0,.6); transition: transform .35s var(--ease), background-color .25s;
}
.motion .chat-launch { animation: launchIn .7s var(--ease) 1.2s both; }
@keyframes launchIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.chat-launch:hover { background: var(--steel); transform: translateY(-2px); }
.chat-launch:focus-visible { outline: 3px solid var(--lift); outline-offset: 3px; }
.chat-launch svg { width: 24px; height: 24px; color: var(--lift); }
.chat-launch .pulse { position: absolute; top: 6px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: #6FCF97; box-shadow: 0 0 0 2px rgba(10,17,21,.94); }
.chat-launch[aria-expanded="true"] { display: none; }
html.in-preview .chat-launch, html.in-preview .chat-panel { display: none !important; }
html.nav-open .chat-launch { display: none; }
.chat-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 2147483100; width: 390px; max-height: min(660px, calc(100vh - 32px));
  display: flex; flex-direction: column; background: var(--floor) var(--grain-d); border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 80px -24px rgba(0,0,0,.6), 0 0 0 1px rgba(29,43,51,.15); transform-origin: 100% 100%;
}
.motion .chat-panel:not([hidden]) { animation: chatIn .5s var(--ease) both; }
@keyframes chatIn { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
.chat-top { background: var(--bay-0) var(--grain-l); color: #fff; padding: 12px 12px 12px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--lift); }
.chat-top .av { width: 38px; height: 38px; border-radius: 50%; background: var(--steel); display: grid; place-items: center; flex-shrink: 0; position: relative; }
.chat-top .av svg { width: 26px; height: 26px; }
.chat-top .av::after { content: ""; position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: #6FCF97; border: 2px solid var(--bay-0); }
.chat-top h2 { font-family: var(--body); text-transform: none; font-size: 1.02rem; font-weight: 600; margin: 0; line-height: 1.2; }
.chat-top p { margin: 2px 0 0; font-family: var(--mono); font-size: .72rem; color: var(--on-dark-muted); }
.chat-top .x { margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 6px; background: transparent; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; flex-shrink: 0; }
.chat-top .x:hover { background: var(--steel-2); }
.chat-top .x:focus-visible { outline: 3px solid var(--lift); outline-offset: -3px; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 240px; }
.msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: .97rem; line-height: 1.45; }
.motion .msg { animation: msgIn .4s var(--ease) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg.bot { background: #fff; align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.msg.user { background: var(--coolant); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.bot b { font-weight: 600; }
.msg.bot a { color: var(--coolant); }
.msg-card { font-family: var(--mono); font-size: .85rem; background: var(--paper) !important; border: 1.5px solid var(--steel); position: relative; }
.msg-card .stamp { position: static; display: inline-block; font-size: 1rem; padding: 3px 8px; margin-bottom: 6px; transform: rotate(-4deg); }
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 14px 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #8C9A94; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.chat-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.chat-quick button { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--coolant); background: #fff; color: var(--coolant); font: 600 .9rem var(--body); cursor: pointer; text-align: left; transition: background-color .2s, transform .25s var(--ease); }
.chat-quick button:hover { background: #E2F0EE; transform: translateY(-1px); }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.chat-form input { min-height: 46px; }
.chat-form button { min-height: 46px; padding: 0 16px; border: 0; border-radius: var(--r); background: var(--lift); color: var(--steel); font: 600 .98rem var(--body); cursor: pointer; }
.chat-form button:hover { background: var(--lift-dark); }
.chat-fields { display: grid; gap: 8px; padding: 0 16px 12px; }
.chat-fields label { font-weight: 600; font-size: .9rem; }
.chat-fields input { min-height: 46px; }
@media (max-width: 1000px) { .chat-launch { bottom: 72px; } }
@media (max-width: 520px) {
  .chat-launch { bottom: 72px; right: 12px; padding: 0; width: 56px; justify-content: center; }
  .chat-launch .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .chat-launch .pulse { top: 4px; right: 4px; }
  .chat-panel { left: 0; right: 0; bottom: 0; width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 16px 16px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}