/* Chambliss Redesign. Vercel-style technical industrial */

/* ── Display face (nav + section headings + every page's hero) ───────────
   Orbitron (Google Fonts, SIL Open Font License, commercial use included).
   Squarer and noticeably narrower than Michroma at the same point size, and
   it ships real weights 400-900, so headings use 700 rather than faking bold.
   Sizes below are retuned upward to match: Orbitron runs roughly 0.7x the
   advance width of Michroma, so the old values rendered visibly small.

   To switch to Ethnocentric legally, use Adobe Fonts, NOT the .otf from
   dafont: that download ships a Typodermic *Desktop* EULA whose permissions
   table lists "web page (embedded)" under Not allowed, so @font-face on the
   .otf is a license violation. Adobe Fonts licenses the same face for web
   embedding under any Creative Cloud subscription:
     1. fonts.adobe.com -> Ethnocentric -> Add to Web Project
     2. paste the kit <link> into index.html (a commented stub is there)
     3. put `ethnocentric` first in --font-display below
   Nothing else needs to change; the sizing here is already tuned for it. */

:root {
  --font-display: 'Orbitron', 'Geist', system-ui, sans-serif;
}

:root {
  --bg: #0a0a0a;
  --bg-elev: #111111;
  --bg-card: #141414;
  --border: #262626;
  --border-strong: #3a3a3a;
  --fg: #ededed;
  --fg-dim: #a1a1a1;
  /* #6b6b6b was 3.7:1 on --bg, under the 4.5:1 WCAG AA floor, and it is used
     for real 10-13px copy (eyebrows, footer meta, captions), not just decor. */
  --fg-faint: #808080;   /* 5.0:1 on #0a0a0a */
  --accent: #6ba6cf;
  --accent-dim: #3c7ba6;
  --warn: #f4a526;
  --ok: #4ade80;
}

html[data-theme="paper"] {
  --bg: #f5f1ea;
  --bg-elev: #ece7dd;
  --bg-card: #ffffff;
  --border: #d8d2c5;
  --border-strong: #b9b0a0;
  --fg: #1a1a1a;
  --fg-dim: #4a4a4a;
  --fg-faint: #6b6b6b;   /* was #8a8a8a = 3.1:1 on the paper bg; now 4.7:1 */
  --accent: #3c7ba6;
  --accent-dim: #20557a;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Geist', 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: 'Geist Mono', ui-monospace, monospace; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ── Keyboard focus (WCAG 2.4.7 / 2.4.11) ───────────────────────────────
   Nothing on the site drew a focus ring before this, so a keyboard or
   switch user had no way to tell where they were. :focus-visible keeps it
   invisible for mouse users. The white outer ring guarantees the indicator
   itself stays visible on the accent buttons and over the hero video, where
   an accent-only ring would vanish. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}
.btn-primary:focus-visible,
.hero-media :focus-visible,
.footer :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.85);
}
/* Inputs get a ring on top of the existing border-colour change, since a
   1px colour shift alone is not a reliable indicator. */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Off-screen but still in the accessibility tree (display:none would remove it) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link (WCAG 2.4.1) so keyboard users can jump the nav on every page */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 14px;
  font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* Selection */
::selection { background: var(--accent); color: #0a0a0a; }

/* Scrollbar, subtle */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0; }

/* Top Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
html[data-theme="paper"] .nav { background: rgba(245, 241, 234, 0.78); }

.nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  flex-shrink: 0;
  white-space: nowrap;
}
.brand > span { white-space: nowrap; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Nav logo mark. The source artwork is drawn for a dark background (its arc
   and the CHAMBLISS wordmark are white), so there are two cuts of it and only
   the one that suits the current theme is shown. */
.brand-logo {
  display: block;
  width: auto;
  flex-shrink: 0;
}
.brand-logo--on-light { display: none; }
html[data-theme="paper"] .brand-logo--on-dark { display: none; }
html[data-theme="paper"] .brand-logo--on-light { display: block; }

.brand-mark {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fg);
}
/* Logo styling. SVG inherits color from text */
.brand { color: var(--fg); }
.brand-name { font-size: 14px; }
.brand-name .sub { color: var(--fg-faint); font-weight: 400; }

.nav-links {
  display: flex;
  gap: 4px;
  margin-left: 8px;
  flex-shrink: 0;
}
.nav-link {
  /* 5px, not 6px: Specs was added as an EIGHTH link (Jul 2026) and at 6px the
     row pushed "Get a quote" 3px past the right edge at exactly 1280px, the
     most common laptop width. 1px off each side of eight links buys 16px back,
     which clears it at 1280 with room to spare. */
  padding: 8px 5px;
  /* Display face here too. It is much wider per character than Geist, so the
     size and horizontal padding come down to keep all eight links on one row. */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-dim);
  border: 1px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--fg); }
.nav-link.active { color: var(--fg); }

/* Nav CTA in the display face, matched to the nav links beside it. */
.nav-inner .btn-primary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nav-spacer { flex: 1; }
.nav-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--fg-faint);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(74,222,128,0.12); }

/* Mobile hamburger + dropdown (shows the links .nav-links hides ≤900px) */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg);
  flex-shrink: 0;
  transition: border-color .15s;
}
.nav-burger:hover { border-color: var(--fg); }
.nav-mobile-menu { display: none; }
.nav-mobile-link {
  padding: 15px 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-dim);
  border-top: 1px solid var(--border);
  transition: color .12s, background .12s;
}
.nav-mobile-link:first-child { border-top: none; }
.nav-mobile-link:hover,
.nav-mobile-link.active { color: var(--fg); background: var(--bg-elev); }
/* Kept in step with the .nav-links breakpoint below, or a viewport lands in a
   band with no link bar and no burger. */
@media (max-width: 1260px) {
  .nav-burger { display: inline-flex; }
  .nav-mobile-menu {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  }
}
/* Keep the mobile bar (brand + Get a quote + burger) from overflowing narrow phones. */
@media (max-width: 640px) {
  /* The display face is ~1.6x wider than Geist, so on one line the wordmark
     alone ran 208px and pushed the bar past a 375px screen. Let it wrap to two
     lines inside a fixed width instead of shrinking the type into illegibility. */
  .nav .brand > span {
    font-size: 11px !important;
    white-space: normal;
    line-height: 1.2;
    max-width: 132px;
  }
  .nav-inner .btn-primary { padding: 9px 12px; }
  .nav-inner .btn-primary svg { display: none; }
  /* Lighter home CTA padding on mobile */
  .home-cta-page { padding: 44px 16px !important; }
  .home-cta-card { padding: 24px !important; }
  /* Stop the sticky category header from overlapping content when stacked */
  .cat-sticky { position: static !important; top: auto !important; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg);
  transition: all .15s;
  letter-spacing: -0.005em;
}
.btn:hover { border-color: var(--fg); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
  font-weight: 600;
}
.btn-primary:hover { background: #fff; border-color: #fff; }
.btn-ghost { border-color: transparent; color: var(--fg-dim); }
.btn-ghost:hover { color: var(--fg); }
.btn-lg { padding: 14px 22px; font-size: 14px; }

/* Layout */
.page { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; border-bottom: 1px solid var(--border); }
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}
.section-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent);
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.025em; margin: 0; }

/* Every page's hero headline is its <h1>, so the display face is applied here
   once rather than per page. It runs ~1.6x wider per character than Geist, so
   the size drops and the negative tracking is reset or the line overflows. */
h1 {
  font-family: var(--font-display);
  font-weight: 700;            /* Orbitron ships 400-900 */
  font-size: clamp(30px, 4.6vw, 70px);
  line-height: 1.14;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
/* Section headings ride the same display face as the hero. Sized well below the
   old 32-56px because this face is ~1.6x wider per character than Geist. */
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 3vw, 41px);
  line-height: 1.18;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
h3 { font-size: 22px; line-height: 1.2; }

/* Services card + featured titles are h3 rather than h2, but read as headings
   in the same family, so they take the display face too. Team names, product
   names and portfolio titles stay in Geist, they are labels, not headings. */
.cap-card-title,
.featured-row-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1.3;
}
.cap-card-title { font-size: 17px; }
.featured-row-title { font-size: clamp(19px, 2.2vw, 27px); }

/* Home "why us" pillars: 100% Quality / Best Rates / 100% Satisfaction */
.pillar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Large CTAs ("What we build", "Get a quote", "Get a quote today"). Kept a
   step smaller than the surrounding body copy because the caps + wide face
   already carry the emphasis. */
.btn-lg {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Header phone number. Overrides the .mono family it also carries. */
.nav-inner .nav-phone {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
}

p { margin: 0; color: var(--fg-dim); }

/* Footer */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.footer-col h5 {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  margin: 0 0 16px;
  font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { padding: 4px 0; font-size: 13px; color: var(--fg-dim); }
.footer-col li a:hover { color: var(--fg); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fg-faint);
  font-family: 'Geist Mono', monospace;
}

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .field-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}
.field label .req, .field .field-label .req { color: var(--accent); margin-left: 2px; }
.input, .select, .textarea {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s, background .15s;
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
}
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-faint) 50%), linear-gradient(135deg, var(--fg-faint) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* Spec card / blueprint motifs */
.spec-card {
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 24px;
  position: relative;
}
.spec-card .crosshair {
  position: absolute;
  width: 9px;
  height: 9px;
}
.spec-card .crosshair::before, .spec-card .crosshair::after {
  content: '';
  position: absolute;
  background: var(--accent);
}
.spec-card .crosshair::before { left: 4px; top: 0; width: 1px; height: 9px; }
.spec-card .crosshair::after  { top: 4px; left: 0; height: 1px; width: 9px; }
.spec-card .ch-tl { top: -5px; left: -5px; }
.spec-card .ch-tr { top: -5px; right: -5px; }
.spec-card .ch-bl { bottom: -5px; left: -5px; }
.spec-card .ch-br { bottom: -5px; right: -5px; }

/* Grid background utility */
.grid-bg {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ── Hero background video ── */
.hero-media {
  position: relative;
  min-height: clamp(520px, 74vh, 800px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0a0a0a; /* fallback while the poster/video loads */
  color: #f5f5f6;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* darken top→bottom for legibility, plus a left wash under the headline */
  background:
    linear-gradient(to bottom, rgba(10,10,10,0.60) 0%, rgba(10,10,10,0.28) 42%, rgba(10,10,10,0.92) 100%),
    linear-gradient(to right, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 66%);
}
.hero-content { width: 100%; padding-top: 56px; padding-bottom: 56px; }
/* Force legible light text over the video, independent of the paper/dark theme */
.hero-media h1 { color: #f6f6f7; }

/* Home hero: sizing comes from the global h1 rule, only the per-line colours
   over the video are set here. */
.hero-display .hero-line-2 { color: rgba(255,255,255,0.62); }
.hero-display .hero-line-3 { color: var(--accent); }
.hero-media .btn {
  color: #f4f4f5;
  border-color: rgba(255,255,255,0.4);
  background: rgba(10,10,10,0.28);
}
.hero-media .btn:hover { border-color: #fff; }
.hero-media .btn-primary {
  color: #0a0a0a;
  border-color: var(--accent);
  background: var(--accent);
}
.hero-media .btn-primary:hover { background: #fff; border-color: #fff; }

/* Pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
}
.pill .led { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Image placeholder */
.img-slot {
  position: relative;
  background: var(--bg-elev);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 12px,
    rgba(255,255,255,0.02) 12px,
    rgba(255,255,255,0.02) 24px
  );
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-faint);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  overflow: hidden;
}
.img-slot .label-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* LoopVideo fills its ImgSlot frame exactly like ImgSlot's <img> does. The
   poster is painted by the same object-fit, so the still → motion handoff
   doesn't shift the framing. */
.loop-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-slot .corner-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--fg-faint);
}
.img-slot .corner-dims {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--fg-faint);
}

/* Inline text link, used for the manufacturer credits in the /specs feature
   blocks. The global `a` rule strips underlines, which is right for nav links
   and card wrappers and wrong mid-paragraph, where the underline is the only
   thing marking the link at all. */
.inline-link {
  color: var(--fg-dim);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}
.inline-link:hover,
.inline-link:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }

/* The /specs feature blocks pair a long text column with a single photo. Left
   to stretch, the photo grew past 800px tall next to the doors copy and the
   crop fell apart. Cap the frame and let it stick to the top of the viewport
   instead: the photo stays a photo while the copy scrolls past it. */
.spec-media {
  position: sticky;
  top: 88px;
  height: min(72vh, 520px);
}
@media (max-width: 640px) {
  /* Stacked, there is no long column to track, and sticky would just pin the
     photo over the copy underneath it. */
  .spec-media { position: static; height: 280px; }
}

/* Hover lift */
.lift { transition: transform .25s ease, border-color .25s; }
.lift:hover { transform: translateY(-2px); border-color: var(--border-strong); }

/* Image hover zoom, the overflow-hidden .img-slot / .hover-zoom containers clip
   the scaled image, giving a subtle zoom on hover. */
.img-slot img,
.hover-zoom img {
  transition: transform .55s cubic-bezier(.2, .6, .2, 1);
}
.img-slot:hover img,
.hover-zoom:hover img {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .img-slot img, .hover-zoom img { transition: none; }
  .img-slot:hover img, .hover-zoom:hover img { transform: none; }

  /* WCAG 2.2.2: the marquee is an indefinite auto-moving animation with no
     pause control, so it must stop outright when motion is not wanted.
     Everything else is reduced to a near-instant transition rather than 0,
     so state changes are still perceivable. */
  .marquee-track { animation: none; transform: none; }
  .page-anim { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .lift:hover { transform: none; }
}

/* Marquee row */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.marquee-track {
  display: flex;
  gap: 64px;
  padding: 16px 0;
  animation: marquee 40s linear infinite;
  white-space: nowrap;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
}
.marquee-track span { display: inline-flex; align-items: center; gap: 16px; }
.marquee-track .sep { color: var(--accent); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Stat */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.stat-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px;
}
.stat-num { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.stat-num .unit { font-size: 18px; color: var(--fg-faint); margin-left: 4px; }
.stat-label {
  margin-top: 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}

/* Step indicator */
.steps {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-faint);
}
.step .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-strong);
  font-size: 11px;
}
.step.active { color: var(--fg); }
.step.active .n { border-color: var(--accent); color: var(--accent); }
.step.done { color: var(--fg-dim); }
.step.done .n { border-color: var(--ok); color: var(--ok); background: rgba(74,222,128,0.08); }
.step .bar { flex: 1; width: 36px; height: 1px; background: var(--border-strong); }

/* ── Leaflet dark map (About page) ── */
.about-map { position: absolute; inset: 0; z-index: 0; }
.leaflet-container { background: #0b1a24; font-family: inherit; }
.leaflet-bar a {
  background: #12222e !important;
  color: #cdd9e4 !important;
  border-bottom-color: #263943 !important;
}
.leaflet-bar a:hover { background: #1a2e3a !important; }
.leaflet-control-attribution {
  background: rgba(4, 20, 31, 0.7) !important;
  color: var(--fg-faint) !important;
}
.leaflet-control-attribution a { color: var(--fg-dim) !important; }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: #12222e !important;
  color: #e6edf3 !important;
  border: 1px solid #263943;
}
.leaflet-popup-content { font-size: 13px; }
.leaflet-container a.leaflet-popup-close-button { color: #90a4b3; }

/* ── Store (merch) ── */
.store-grid { align-items: stretch; }

.store-stage {
  position: relative;
  height: 300px;
  background: var(--bg-elev);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* The logo shown on each product's colourway. */
.store-logo-art {
  position: relative;
  z-index: 1;
  width: 60%;
  max-width: 230px;
  height: auto;
  opacity: 0.97;
}
/* Logo knocked to white on dark colourways. */
.store-print-img--knock { filter: brightness(0) invert(1); opacity: 0.94; }

/* Real product photography (gear). Contained, never cropped, and the stage
   behind it goes white (see StoreMockup) so a shot on a white studio backdrop
   sits flush instead of showing its own rectangle. */
.store-photo-art {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px 20px;
}

/* Colour swatches */
.store-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform .12s, box-shadow .12s;
}
.store-swatch:hover { transform: scale(1.08); }
.store-swatch.active {
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px var(--accent);
}

/* Size chips */
.store-size {
  min-width: 34px;
  padding: 6px 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid var(--border-strong);
  transition: color .12s, border-color .12s, background .12s;
}
.store-size:hover { color: var(--fg); border-color: var(--fg-dim); }
.store-size.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(107, 166, 207, 0.08);
}

/* Floating cart button */
.store-cart-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #0a0a0a;
  background: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: background .15s, transform .15s;
}
.store-cart-fab:hover { background: #fff; border-color: #fff; transform: translateY(-1px); }
.store-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 100px;
  background: #0a0a0a;
  color: var(--accent);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
}

/* Cart drawer */
.store-cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 96;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}
.store-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 97;
  width: min(400px, 92vw);
  height: 100%;
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  /* visibility:hidden pulls the closed drawer out of the tab order and stops it
     widening the document. Without it the panel sits off-screen but still
     focusable inside aria-hidden="true" (a WCAG 4.1.2 violation: keyboard users
     tab into content screen readers are told does not exist) and its off-screen
     box gave the whole page a horizontal scrollbar. */
  visibility: hidden;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), visibility 0s linear .28s;
}
.store-cart-drawer.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), visibility 0s;
}
.store-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}
.store-cart-body { flex: 1; overflow-y: auto; padding: 8px 20px; }
.store-cart-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.store-cart-remove {
  display: inline-flex;
  padding: 5px;
  color: var(--fg-faint);
  background: transparent;
  border: 1px solid var(--border-strong);
  transition: color .12s, border-color .12s;
}
.store-cart-remove:hover { color: var(--warn); border-color: var(--warn); }
.store-cart-foot { padding: 20px; border-top: 1px solid var(--border); background: var(--bg); }

@media (max-width: 900px) {
  .store-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .store-grid { grid-template-columns: 1fr !important; }
  .store-cart-fab { right: 16px; bottom: 16px; }
}

/* ── Build-film picker (home "Featured builds") ──
   A thumbnail strip under the main player: click one and it becomes the player's
   video. Hairline dividers come from a 1px gap over a border-coloured backdrop,
   which keeps the grid look without per-cell border juggling when it reflows. */
.film-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
@media (max-width: 1024px) { .film-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .film-strip { grid-template-columns: repeat(2, 1fr); } }

.film-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
  background: var(--bg-card);
  color: var(--fg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease;
}
.film-card:hover { background: var(--bg-elev); }
/* The active card is marked twice over, an accent rule on top and full-opacity
   art, so it doesn't rely on the background shift alone (which is also the
   hover state, and is only ~1.2:1 against the resting one). */
.film-card.is-active { background: var(--bg-elev); box-shadow: inset 0 2px 0 var(--accent); }

.film-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #04141f;
  border-bottom: 1px solid var(--border);
}
.film-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  transition: opacity .25s ease, transform .55s cubic-bezier(.2, .6, .2, 1);
}
.film-card:hover .film-card-thumb img { opacity: 1; transform: scale(1.05); }
.film-card.is-active .film-card-thumb img { opacity: 1; }

.film-card-play {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding-left: 2px;
  background: rgba(4, 20, 31, 0.72);
  border: 1px solid var(--accent);
  color: var(--accent);
  transition: background .2s ease, color .2s ease;
}
.film-card:hover .film-card-play,
.film-card.is-active .film-card-play { background: var(--accent); color: #04141f; }

.film-card-now {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 7px;
  font-size: 9px;
  letter-spacing: 0.08em;
  background: var(--accent);
  color: #04141f;
}

.film-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 15px 16px;
}
/* Video titles are labels, not headings, so they stay in Geist. Clamped to
   three lines so one long title can't stretch the whole row. */
.film-card-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.film-card-chan {
  font-size: 10px;
  color: var(--fg-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .film-card:hover .film-card-thumb img { transform: none; }
}

/* Page enter animation */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-anim { animation: pageIn .35s ease-out; }

/* Responsive */
@media (max-width: 1180px) {
  .nav-meta { display: none; }
}
@media (max-width: 1024px) {
  .nav-phone { display: none; }
}
/* The link bar needs its own breakpoint, 20px wider than the old shared one.
   With all seven links, the phone and the CTA on the row, the bar ran a couple
   of dozen pixels past the container between 1241px and ~1272px. */
@media (max-width: 1260px) {
  .nav-links { display: none; }
}
@media (max-width: 1240px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 64px 0; }
}

/* ── Mobile responsive ── */
@media (max-width: 640px) {
  .page { padding: 0 16px; }
  .section { padding: 48px 0; }
  /* Retuned for the display face: the old 36-56px was sized for Geist and
     overflows badly at ~1.6x the advance width. */
  h1 { font-size: clamp(22px, 7vw, 34px); }
  .nav-link { font-size: 11px; }

  /* Stack any grid to 1 column */
  .mob-stack { grid-template-columns: 1fr !important; }
  .mob-2col  { grid-template-columns: repeat(2, 1fr) !important; }
  .mob-4col  { grid-template-columns: repeat(4, 1fr) !important; }
  .mob-3col  { grid-template-columns: repeat(3, 1fr) !important; }

  /* Remove side-by-side gap on stacked grids */
  .mob-stack { gap: 24px !important; }
  .mob-stack > [style*="borderRight"] { border-right: none !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-bottom { flex-direction: column; gap: 8px; }

  /* Nav tighter */
  .nav-inner { padding: 0 16px; gap: 12px; }

  /* Buttons full width on mobile */
  .mob-stack .btn-lg { width: 100%; justify-content: center; }

  /* Credential rows */
  .mob-cred { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Reduce card padding */
  .spec-card { padding: 16px; }

  /* Smaller hero image */
  .img-slot { min-height: 0; }

  /* Steps: compact progress on mobile */
  .steps { display: none !important; }
  .steps-mobile { display: flex !important; }

  /* Quote summary: hide on mobile */
  .quote-summary { display: none !important; }

  /* Quote nav: sticky bottom */
  .quote-nav {
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    background: var(--bg) !important;
    border-top: 1px solid var(--border) !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    z-index: 90;
  }

  /* Bottom padding so sticky nav doesn't cover content */
  .quote-body { padding-bottom: 80px !important; }

  /* Building grid: remove right borders when stacked */
  .mob-stack > button[style*="borderRight"],
  .mob-stack > div[style*="borderRight"] {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* CTA card: less padding */
  .mob-stack > div[style*="padding: 48"] { padding: 24px !important; }

  /* Hero padding reduce */
  .page[style*="paddingTop: 80"] { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Fix building card bottom borders when stacked */
  .mob-stack > button { border-bottom: 1px solid var(--border) !important; }
  .mob-stack > button:last-child { border-bottom: none !important; }
}

/* ── Narrow phones: the nav bar itself ──────────────────────────────────
   Measured, not guessed. With the link bar, phone number and status dot all
   already hidden, .nav-inner still had a 402px floor: brand 188 + "Get a
   quote" 123 + burger 40, plus 2x12px gap and 2x16px padding. Anything under
   ~414px (iPhone SE at 375, most Androids at 360) therefore put the WHOLE
   PAGE into a horizontal scroll, not just the nav.

   These live at the very end of the file on purpose. The ≤640px block above
   re-sets .nav-inner padding and gap, and at equal specificity the later rule
   wins, so anywhere earlier in the file this silently does nothing.

   Two things needed !important and are easy to miss:
   - the <img> carries an inline height={40} from components.jsx
   - the wordmark wrapper carries an inline display:flex, so `display: none`
     alone will not hide it
   Also note the ≤640px rule sets font-size on `.brand > span`, but that is
   the flex-column WRAPPER, and the two spans inside it carry their own inline
   font sizes, so it never actually shrank the type. Hence the child
   selectors below. */
@media (max-width: 430px) {
  .nav-inner { padding: 0 12px; gap: 8px; }
  /* "Chambliss" at 11px in the display face measures ~85px, so the cap leaves
     a little slack and still holds it on one line. */
  .nav .brand > span { max-width: 104px !important; }
  .nav .brand > span > span:first-child { font-size: 11px !important; }
  .nav .brand > span > span:last-child  { font-size: 7px !important; }
  .nav .brand .brand-logo { height: 32px !important; }
  .nav-inner .btn-primary { padding: 8px 10px; font-size: 11.5px; }
}

/* Below ~355px even the trimmed row does not fit, so the brand falls back to
   the mark on its own. Dropping the wordmark beats dropping the CTA: getting a
   quote is the point of the page, and the mark still links home. */
@media (max-width: 355px) {
  .nav .brand > span { display: none !important; }
}