/* ============================================================
   Barndos Direct — dark / cinematic build
   Plain CSS, no build step, mobile-first.
   Brand red is their exact original: #C2272D (rgb 194,39,45).
   ============================================================ */

:root {
  /* --- Brand palette (dark-dominant) --- */
  --black:    #0d0d0d;   /* page background */
  --surface:  #161616;   /* raised sections */
  --surface2: #1e1e1e;   /* cards */
  --red:      #c2272d;   /* EXACT brand red */
  --red-dark: #9e1e23;   /* hover */
  --wood:     #c99a5b;   /* warm timber accent */
  --white:    #f6f4f1;
  --muted:    #a6a099;   /* secondary text */
  --line:     rgba(255,255,255,0.10);
  --line-2:   rgba(255,255,255,0.18);

  /* --- Type --- */
  --display: "Oswald", "Arial Narrow", sans-serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Layout --- */
  --wrap: 1240px;
  /* Capped against the viewport for the same reason the headings are: the
     clamp minimum is in rem, so the text-size control inflates it, and on a
     narrow screen the two gutters alone can push .wrap past the edge. */
  --gutter: min(clamp(1.15rem, 4vw, 3rem), 6vw);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--white);
  background: var(--black);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--white); text-decoration: none; transition: color .18s; }

/* Display headings: condensed, uppercase, punchy */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 0 0 0.4em;
  /* Last-resort safety net. "BARNDOMINIUMS" is one unbreakable word; if it ever
     can't fit, break it rather than let it push the layout past the viewport,
     because body has overflow-x:hidden and the overflow is CLIPPED — unreadable
     and unreachable, not merely off to one side. */
  overflow-wrap: break-word;
}
/* The vw cap is what actually keeps headings inside a phone screen.
   A clamp() MINIMUM in rem cannot shrink for a narrow viewport, and
   html{font-size: calc(100% * var(--ui-scale))} multiplies it — so at the 150%
   text setting h1's 2.7rem minimum became 64.8px on a 375px screen and won the
   clamp outright, rendering the hero heading ~466px wide and clipping it.
   min() caps against the viewport, so the heading can never outgrow the screen.
   Inert on desktop: at 1440px the cap is 173px and the clamp maximum (96px)
   still wins. It only engages exactly where the overflow happened. */
h1 { font-size: min(clamp(2.7rem, 8vw, 6rem), 11vw); font-weight: 700; }
h2 { font-size: min(clamp(2rem, 5vw, 3.6rem), 10vw); }
h3 { font-size: min(clamp(1.3rem, 3vw, 1.9rem), 7vw); }
p  { margin: 0 0 1rem; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 9vw, 7.5rem); }
.eyebrow {
  font-family: var(--display); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--red); margin: 0 0 1.1rem; display: flex; align-items: center; gap: 0.7rem;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--red); display: inline-block; }
.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted); max-width: 58ch; }
.muted { color: var(--muted); }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 1rem;
  padding: 0.95rem 1.9rem; border: 2px solid transparent; cursor: pointer;
  transition: all 0.18s ease;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); color: #fff; transform: translateY(-2px); }
.btn-outline { background: transparent; color: #fff; border-color: var(--line-2); }
/* Hover washes the button in its OWN ink instead of filling it solid white.
   Two reasons: the solid fill was a harsh flash, and it set color:var(--black)
   which the later .band-red/.hero/.site-footer rules overrode back to #fff —
   white label on a white fill, so the text vanished on exactly the bands where
   these buttons are used most. Deriving the wash from currentColor means the
   label keeps its colour and the highlight adapts to whatever ground it sits
   on: white ink on dark, dark ink in light mode, white on the red band. */
.btn-outline:hover {
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px); /* match .btn-primary */
}
/* Light mode the wash has to darken rather than lighten, or it is invisible.
   The red band, hero and footer stay dark grounds in both themes, so they keep
   the white wash — see the colour rules further down. */
:root[data-theme="light"] .btn-outline:hover { background: rgba(0, 0, 0, 0.07); }
:root[data-theme="light"] .band-red .btn-outline:hover,
:root[data-theme="light"] .hero .btn-outline:hover,
:root[data-theme="light"] .site-footer .btn-outline:hover { background: rgba(255, 255, 255, 0.16); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn .arrow { transition: transform .18s; }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled { background: rgba(13,13,13,0.96); border-color: var(--line); }
.site-header.nav-open { background: rgba(13,13,13,0.98); border-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 78px; }
/* 52px in a 78px bar leaves 13px of breathing room top and bottom. Applies to
   every state — light and dark, white wordmark and dark-ink — since they all
   render through this one class. */
.brand-logo { height: 52px; width: auto; flex-shrink: 0; }
.nav > a:first-child { flex-shrink: 0; }
.nav-cta { display: flex; align-items: center; gap: 1.2rem; flex-shrink: 0; }
.brand-text { font-family: var(--display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; color: #fff; letter-spacing: 0.02em; }
.brand-text span { color: var(--red); }
.nav-links { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.05em; color: var(--white); }
.nav-links a:hover { color: var(--red); }
.nav-phone { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: #fff; white-space: nowrap; letter-spacing: 0.03em; }
.nav-phone:hover { color: var(--red); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0.4rem; z-index: 110; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: #fff; margin: 6px 0; transition: background 0.3s, transform 0.25s, opacity 0.25s; }
/* ---- Hamburger colour ----
   The hamburger IS the nav at mobile width, so it follows the same rule the nav
   links follow at desktop width: contrast against whatever the bar actually is.
   Anything else means the same header reads one way on a laptop and another on
   a phone, which is the bug this replaces.

     transparent over the hero photo   -> white
     transparent over a dark page      -> white
     transparent over a LIGHT page     -> dark   (only case that differs)
     red, once scrolled — every page   -> white  (nav links are white here too)
     near-black, menu open             -> white

   The rules this replaced were written when the home page scrolled to a DARK
   bar and only subpages went red. The header was later unified to red site-wide
   (see "Header, unified across the whole site") and these were never updated, so
   subpages put DARK bars on the red bar while desktop kept white links on it. */
.site-header.nav-open .nav-toggle span,
.site-header.scrolled .nav-toggle span { background: #fff; }
/* The one ground that needs dark bars: a light-mode page showing through a
   still-transparent header. The home page is excluded — its hero is a photo. */
:root[data-theme="light"] body.subpage
  .site-header:not(.scrolled):not(.nav-open) .nav-toggle span { background: #1a1a1a; }
.nav-socials { display: flex; align-items: center; gap: 0.55rem; }
.nav-mobile-socials { display: none; }
/* Header already carries a Get a Quote button on desktop, and hides it on small
   screens — so this one only exists inside the open mobile menu. */
.nav-mobile-quote { display: none; }
.nav-socials a { display: flex; align-items: center; justify-content: center; color: #fff; transition: color .18s; }
.nav-socials svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.nav-socials a:hover { color: var(--red); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  color: #fff; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background: #000 center/cover no-repeat;
  background-image: url("../images/builds/hero.jpg");
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0.25) 40%, rgba(13,13,13,0.85) 100%);
}
.hero-inner { padding-block: clamp(3rem, 10vh, 8rem) clamp(3.5rem, 8vh, 6rem); max-width: 60rem; }
.hero h1 { color: #fff; margin-bottom: 0.3em; text-shadow: 0 2px 30px rgba(0,0,0,0.4); }
.hero h1 em { font-style: normal; color: var(--red); }
.hero .sub { font-size: clamp(1.1rem, 2.2vw, 1.4rem); color: rgba(255,255,255,0.9); margin-bottom: 2rem; max-width: 40ch; font-weight: 400; }
.hero .btn-row { margin-top: 1.8rem; }
.scroll-cue { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); font-family: var(--display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem; color: rgba(255,255,255,0.6); display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.scroll-cue::after { content: ""; width: 1px; height: 34px; background: linear-gradient(rgba(255,255,255,0.6), transparent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100%{opacity:.3;transform:scaleY(.6)} 50%{opacity:1;transform:scaleY(1)} }
@keyframes navSlideIn {
  from { transform: translateX(-18px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* ============================================================
   Stat strip (red band)
   ============================================================ */
.stat-strip { background: var(--red); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat {
  padding: clamp(1.8rem, 4vw, 2.8rem) var(--gutter); text-align: center;
  border-right: 1px solid rgba(255,255,255,0.18);
}
.stat:last-child { border-right: 0; }
.stat .big { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; color: #fff; }
.stat .lbl { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; color: rgba(255,255,255,0.85); margin-top: 0.5rem; }

/* ============================================================
   Qualifier — bold numbered
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.qual-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.qual-list li { display: flex; gap: 1.2rem; align-items: baseline; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.qual-list li:last-child { border-bottom: 1px solid var(--line); }
.qual-list .n { font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--red); min-width: 2.2rem; }
.qual-list p { margin: 0; font-size: 1.1rem; }
.media-frame { position: relative; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; }
.media-frame.tall img { aspect-ratio: 4/5; }
/* .plate — for charts, spec plates and any image whose edges carry meaning.
   The default frame crops to 3/4 with object-fit:cover, which silently ate the
   "A" off "AVAILABLE GRID PATTERNS". Plates keep their natural aspect and are
   never cropped; they're artwork on white, so they get a white ground. */
.media-frame.plate img {
  aspect-ratio: auto; height: auto; object-fit: contain; background: #fff;
}
.media-frame::before { content: ""; position: absolute; inset: -14px -14px auto auto; width: 60%; height: 60%; border: 2px solid var(--red); z-index: -1; }

/* ============================================================
   Feature (image + text)
   ============================================================ */
.feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.feature.reverse .feature-media { order: 2; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
/* Responsive 16:9 YouTube embed (Build of the Month) */
.video-embed { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; overflow: hidden; border: 1px solid var(--line); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.3rem 0; list-style: none; padding: 0; }
.chips li { background: var(--surface2); border: 1px solid var(--line); color: var(--white); padding: 0.4rem 0.9rem; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }

/* Big price */
.price { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 7vw, 4.8rem); line-height: 0.9; color: #fff; }
.price sup { color: var(--red); font-size: 0.45em; vertical-align: super; }
.price small { display: block; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.12em; color: var(--wood); margin-top: 0.6rem; }
.incl { list-style: none; padding: 0; margin: 1.6rem 0; }
.incl li { padding: 0.65rem 0; border-bottom: 1px solid var(--line); display: flex; gap: 0.8rem; align-items: flex-start; }
.incl li::before { content: "→"; color: var(--red); font-weight: 700; }

/* ============================================================
   Process — big numbered steps
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; counter-reset: step; }
.step { border-top: 3px solid var(--red); padding-top: 1.4rem; }
.step .sn { font-family: var(--display); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--surface2); -webkit-text-stroke: 1px var(--line-2); }
.step h3 { margin: 0.5rem 0 0.6rem; }
.step p { color: var(--muted); margin: 0; }

/* ============================================================
   Gallery strip
   ============================================================ */
.gallery-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.gallery-strip a { position: relative; overflow: hidden; aspect-ratio: 3/4; }
.gallery-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s; filter: grayscale(0.15); }
.gallery-strip a:hover img { transform: scale(1.08); filter: grayscale(0); }

/* ============================================================
   Subpages — transparent at top, red when scrolled
   ============================================================ */
body.subpage .site-header { background: transparent; border-color: transparent; transition: background .4s, border-color .4s, backdrop-filter .4s; }
body.subpage .site-header.scrolled { background: rgba(194,39,45,0.94); border-color: rgba(255,255,255,0.15); }
body.subpage .site-header.nav-open { background: rgba(13,13,13,0.98); border-color: var(--line); }
/* The white wordmark drowns once the header turns red, so swap to the dark-ink
   version for that state. `content` on a replaced element repoints the img
   without touching markup — otherwise this needs a second <img> in all 34 pages.
   Deliberately NOT scoped to body.subpage: the header is unified site-wide (see
   "Header, unified across the whole site" near the end of this file), so the
   home page goes red on scroll too. The nav-open state stays near-black, which
   is why that one is excluded — white is still correct there. */
.site-header.scrolled:not(.nav-open) .brand-logo {
  content: url("../images/logo-header-black.png");
  /* Light mode sits the white wordmark on a dark chip (see the light-mode block
     near the end). That patch exists only because no dark-ink logo did — on this
     state one now does, so drop the chip or it boxes the logo in black on red. */
  background: none;
  padding: 0;
}
.page-head { padding-top: calc(78px + clamp(2.5rem, 6vw, 4.5rem)); padding-bottom: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: min(clamp(2.6rem, 7vw, 5rem), 12vw); }
.page-head .lead { margin-top: 0.5rem; }

/* ============================================================
   Gallery — masonry columns + lightbox
   ============================================================ */
.gallery-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.gallery-head h2 { margin: 0; }
.gallery-head .count { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-size: 0.85rem; }
.masonry { column-count: 3; column-gap: 14px; }
.masonry .gallery-item { break-inside: avoid; margin-bottom: 14px; display: block; position: relative; overflow: hidden; cursor: zoom-in; background: #000; }
.masonry .gallery-item img { width: 100%; height: auto; display: block; transition: transform .5s ease, filter .3s; }
.masonry .gallery-item::after { content: ""; position: absolute; inset: 0; background: rgba(194,39,45,0); transition: background .3s; }
.masonry .gallery-item:hover img { transform: scale(1.05); }
.masonry .gallery-item:hover::after { background: rgba(194,39,45,0.12); }

@media (max-width: 900px) { .masonry { column-count: 2; } }
@media (max-width: 560px) { .masonry { column-count: 1; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6,6,6,0.96); display: none; align-items: center; justify-content: center; padding: 4vw; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.lb-btn { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; font-family: var(--display); user-select: none; transition: color .2s; }
.lb-btn:hover { color: var(--red); }
.lb-close { top: 1.4rem; right: 1.8rem; font-size: 2.6rem; line-height: 1; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 3.5rem; padding: 0 1.2rem; }
.lb-prev { left: 0.5rem; } .lb-next { right: 0.5rem; }
.lb-count { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); font-family: var(--display); letter-spacing: 0.15em; color: var(--muted); font-size: 0.85rem; }
@media (max-width: 560px) { .lb-prev, .lb-next { font-size: 2.4rem; } }

/* ============================================================
   Contact / lead form
   ============================================================ */
.band-red { background: var(--red); }
.band-surface { background: var(--surface); }
.form-wrap { max-width: 760px; margin-inline: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field.full { grid-column: 1 / -1; }
/* Any direct child of the form grid can span it, not just .field (e.g. a
   .form-note sitting inside the grid on ask.html). */
.form-grid > .full { grid-column: 1 / -1; }
.field label { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; }
.field .req { color: var(--red); }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 1rem; color: var(--white);
  padding: 0.85rem 1rem; border: 1px solid var(--line-2); background: var(--black); width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: #6b6660; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--red); outline-offset: 0; border-color: var(--red); }
.field textarea { min-height: 130px; resize: vertical; }
.field select option { background: var(--black); }
.consent { font-size: 0.78rem; color: var(--muted); line-height: 1.6; }
.form-note { font-style: italic; color: var(--muted); }

/* Pill selectors — replaces the single dropdown */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.3rem;
}
.pill-group input[type="radio"],
.pill-group input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.pill-group label {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  background: var(--surface2);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}
.pill-group label:hover {
  border-color: rgba(194,39,45,0.6);
  color: var(--white);
}
.pill-group input:checked + label {
  border-color: var(--red);
  background: rgba(194,39,45,0.18);
  color: var(--white);
  font-weight: 500;
}

/* ============================================================
   Contact page — details + map
   ============================================================ */
.contact-detail { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.contact-detail:first-of-type { border-top: 1px solid var(--line); }
.contact-detail .k { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; color: var(--red); margin-bottom: 0.4rem; }
.contact-detail .v { font-size: 1.2rem; }
.contact-detail a.v:hover { color: var(--red); }
.map-embed { aspect-ratio: 16 / 10; width: 100%; margin-top: 1.8rem; border: 1px solid var(--line-2); overflow: hidden; background: #000; }
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.4) invert(0.9) hue-rotate(180deg) contrast(0.9); }

/* ============================================================
   Barndominiums — plan cards
   ============================================================ */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.plan-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  padding: 1.8rem 1.6rem; transition: border-color .2s, transform .2s;
}
.plan-card:hover { border-color: var(--red); transform: translateY(-3px); }
.plan-card .plan-thumb { display: block; margin: -1.8rem -1.6rem 1.3rem; aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.plan-card .plan-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.plan-card:hover .plan-thumb img { transform: scale(1.05); }
.plan-card .plan-name { font-family: var(--display); text-transform: uppercase; font-weight: 600; font-size: 1.5rem; line-height: 1.05; margin: 0; }
.plan-card .plan-sub { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--muted); margin: 0.3rem 0 0; }
.plan-card .plan-price { font-family: var(--display); font-weight: 700; font-size: 1.9rem; color: var(--red); margin: 1.1rem 0 0.2rem; line-height: 1; }
.plan-card .plan-price small { display: block; font-family: var(--sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); margin-top: 0.35rem; text-transform: uppercase; }
.plan-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.9rem; margin: 1.3rem 0; padding: 1.2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.plan-specs li { display: flex; flex-direction: column; }
.plan-specs .sv { font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--white); line-height: 1; }
.plan-specs .sk { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; color: var(--muted); margin-top: 0.25rem; }
.plan-card .btn { margin-top: auto; justify-content: center; }
.plan-note { background: var(--surface); border-left: 3px solid var(--red); padding: 1.2rem 1.5rem; margin-bottom: 2.5rem; color: var(--muted); }

@media (max-width: 900px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plan-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Plan detail pages
   ============================================================ */
.plan-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.plan-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plan-photos .gallery-item { aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; display: block; background: #000; }
.plan-photos .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.plan-photos .gallery-item:hover img { transform: scale(1.05); }
.plan-sidebar { position: sticky; top: 96px; background: var(--surface); border: 1px solid var(--line); padding: 1.8rem 1.6rem; }
.plan-sidebar .price { margin-top: 0; }
.plan-sidebar .btn { width: 100%; justify-content: center; }
.plan-sidebar .sidebar-call { text-align: center; margin-top: 1rem; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; }
.floorplan-band { background: var(--surface); }
.floorplan-img { background: #fff; border: 1px solid var(--line-2); cursor: zoom-in; max-width: 940px; margin-inline: auto; display: block; }
.floorplan-img img { width: 100%; height: auto; display: block; }
.plan-flag { font-size: 0.8rem; color: var(--muted); text-align: center; margin-top: 0.8rem; }

@media (max-width: 900px) {
  .plan-layout { grid-template-columns: 1fr; }
  .plan-sidebar { position: static; }
}
@media (max-width: 560px) { .plan-photos { grid-template-columns: 1fr; } }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: #080808; border-top: 1px solid var(--line); padding-block: 3.5rem 2rem; color: var(--muted); font-size: 0.93rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
.site-footer h4 { font-family: var(--display); color: #fff; font-size: 0.9rem; letter-spacing: 0.18em; margin: 0 0 1.1rem; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--red); }
.footer-logo { height: 46px; margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.55rem; }
.socials { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
.socials a { width: 40px; height: 40px; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: #fff; }
.socials svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.socials a:hover { background: var(--red); border-color: var(--red); }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; font-size: 0.82rem; }

/* ============================================================
   RESPONSIVE — mobile-first hardening
   ============================================================ */
@media (max-width: 980px) {
  .split, .feature { grid-template-columns: 1fr; }
  .feature.reverse .feature-media { order: 0; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { padding: 1.4rem 0; }
  .gallery-strip { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .media-frame { max-width: 460px; }

  /* Mobile nav */
  .nav-links, .nav-phone, .nav-socials { display: none; }
  .nav-links.open {
    display: flex; position: fixed; inset: 78px 0 0 0; flex-direction: column;
    padding: 1rem var(--gutter); gap: 0.45rem;
    background: transparent; overflow-y: auto; z-index: 200;
  }
  .nav-links.open li { border-bottom: 0; }
  .nav-links.open a {
    display: block; padding: 0.95rem 1.4rem; font-size: 1.2rem;
    background: rgba(10,10,10,0.97); color: var(--white);
    border-left: 3px solid var(--red);
  }
  .nav-links.open a:hover { background: var(--red); color: #fff; border-left-color: rgba(255,255,255,0.35); }
  /* Primary action inside the menu — solid red, not another list item, so it
     reads as the thing to tap. */
  .nav-mobile-quote { display: block; margin-top: 0.35rem; }
  .nav-links.open .nav-mobile-quote a {
    background: var(--red);
    color: #fff;
    border-left-color: var(--red);
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
  }
  .nav-links.open .nav-mobile-quote a:hover,
  .nav-links.open .nav-mobile-quote a:focus-visible {
    background: var(--red-dark);
    border-left-color: var(--red-dark);
    color: #fff;
  }

  /* Mobile social icons row */
  .nav-mobile-socials {
    display: flex; flex-direction: row; gap: 1.6rem; align-items: center;
    background: rgba(10,10,10,0.97); border-left: 3px solid var(--red);
    padding: 0.95rem 1.4rem;
  }
  .nav-mobile-socials a { display: flex; align-items: center; padding: 0; color: #fff; transition: color .18s; }
  .nav-mobile-socials a:hover { color: var(--red); }
  .nav-mobile-socials svg { width: 26px; height: 26px; fill: currentColor; display: block; }
  .nav-toggle { display: block; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
@media (max-width: 620px) {
  .stat-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
  .stat:last-child { border-bottom: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
  .btn { width: 100%; justify-content: center; }
  .hero .btn-row { flex-direction: column; }
}

/* ============================================================
   PLAN DESIGNER
   Photo-real finish selector for the plan builds.
   ============================================================ */
.pd {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

/* --- Stage --- */
.pd-stage {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.pd-canvas { width: 100%; height: auto; display: block; }
.pd-status {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  margin: 0; padding: 1rem;
  text-align: center;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  color: var(--muted);
  background: rgba(13,13,13,0.86);
}
.pd-status[hidden] { display: none; }

/* Marks an illustration so it can't be mistaken for a build photo */
.pd-badge {
  position: absolute; top: 0; left: 0;
  margin: 0; padding: 0.4rem 0.8rem;
  background: rgba(13,13,13,0.82);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.66rem;
  color: var(--wood);
}
.pd-badge[hidden] { display: none; }

/* View switcher — one button per photographed angle */
.pd-views {
  display: flex; flex-wrap: wrap; gap: 1px;
  border-top: 1px solid var(--line);
}
.pd-views:empty { display: none; }
.pd-view {
  flex: 1 1 auto;
  padding: 0.6rem 0.7rem;
  background: var(--surface);
  color: var(--muted);
  border: 0;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.74rem;
  cursor: pointer;
  transition: color .18s, background .18s;
}
.pd-view:hover { color: var(--white); background: var(--surface2); }
.pd-view.is-on { color: var(--white); background: var(--surface2); box-shadow: inset 0 2px 0 var(--red); }
/* Angles with nothing traced yet still browsable, just marked */
.pd-view.is-bare::after { content: ' ·'; color: var(--red); }

/* --- Panel --- */
.pd-panel { display: flex; flex-direction: column; gap: 1.15rem; }
.pd-label {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.pd-select {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--surface2);
  color: var(--white);
  border: 1px solid var(--line-2);
  font-family: var(--sans);
  font-size: 1rem;
}
.pd-select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* --- Surface tabs --- */
.pd-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pd-tab {
  padding: 0.5rem 0.85rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line-2);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.pd-tab:hover:not(:disabled) { color: var(--white); border-color: var(--white); }
.pd-tab.is-active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.pd-tab:disabled { opacity: 0.32; cursor: not-allowed; }

/* --- Swatches --- */
.pd-swatches { display: flex; flex-direction: column; gap: 1.1rem; }
.pd-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35rem;
}
.pd-group-name {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.86rem;
}
.pd-group-meta { font-size: 0.74rem; color: var(--muted); }
.pd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(38px, 100%), 1fr));
  gap: 6px;
}
.pd-swatch {
  aspect-ratio: 1;
  border: 1px solid var(--line-2);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform .14s, box-shadow .14s;
}
.pd-swatch:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.pd-swatch.is-light { border-color: rgba(0,0,0,0.28); }
.pd-swatch.is-on { box-shadow: 0 0 0 2px var(--black), 0 0 0 4px var(--red); }
/* Metallic and unpainted finishes get a sheen so they don't read as flat paint */
.pd-swatch.is-metallic::after,
.pd-swatch.is-unpainted::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg,
    rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 42%,
    rgba(0,0,0,0.16) 68%, rgba(255,255,255,0.28) 100%);
}
.pd-chosen {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* --- Spec summary --- */
.pd-spec {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.pd-spec-head {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.pd-spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.pd-spec-list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.pd-chip {
  width: 15px; height: 15px; flex: none;
  border: 1px solid var(--line-2);
}
.pd-spec-surface { color: var(--muted); min-width: 6.5em; }
.pd-spec-color { color: var(--white); }
.pd-cta { align-self: start; }
.pd-reset {
  align-self: start;
  background: none; border: 0; padding: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pd-reset:hover { color: var(--white); }

@media (max-width: 900px) {
  .pd { grid-template-columns: 1fr; }
}

/* ============================================================
   Team page
   ============================================================ */
.team-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
}
.team-card {
  background: var(--surface2); border: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.team-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.team-photo {
  /* height:auto is required — the width/height HTML attributes (kept so the
     browser can reserve space and avoid layout shift) otherwise win over
     aspect-ratio, which only applies when one dimension is auto. */
  width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 22%;
  display: block; background: var(--surface);
  filter: grayscale(0.18) contrast(1.04);
  transition: filter .3s, transform .5s;
}
.team-card:hover .team-photo { filter: grayscale(0) contrast(1); transform: scale(1.02); }
/* Red rule under the photo, tying the card back to the brand accent. */
.team-photo-wrap { position: relative; overflow: hidden; border-bottom: 3px solid var(--red); }
.team-card.is-designer .team-photo-wrap { border-bottom-color: var(--wood); }
.team-body { padding: 1.6rem 1.7rem 1.9rem; display: flex; flex-direction: column; flex: 1; }
.team-name {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: 1.35rem; line-height: 1.1; margin: 0 0 0.3rem;
}
.team-role {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: 0.82rem; letter-spacing: 0.16em; color: var(--red);
  margin: 0 0 1rem;
}
.team-card.is-designer .team-role { color: var(--wood); }
.team-bio { font-size: 0.97rem; color: var(--muted); margin: 0; }
.team-quote {
  margin: 1.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: 0.9rem; font-style: italic; color: var(--muted);
}
.team-quote::before { content: "\201C"; color: var(--red); font-size: 1.4em; line-height: 0; vertical-align: -0.25em; margin-right: 0.1em; }

/* ---- Team bio dropdown ---- */
.team-details { margin-top: 0.6rem; }
.team-details summary { cursor: pointer; font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--red); list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0; }
.team-details summary::-webkit-details-marker { display: none; }
.team-details summary::after { content: "\25BC"; font-size: 0.6em; transition: transform 0.2s; }
.team-details[open] summary::after { transform: rotate(180deg); }
/* Card-scale button — .btn at full size overwhelms a 290px card. */
.btn-sm { font-size: 0.8rem; padding: 0.6rem 1.1rem; border-width: 1px; letter-spacing: 0.08em; }
.team-cta { margin: 1.1rem 0 0; }
.team-bio-full { margin-top: 0.6rem; }
.team-bio-full p { font-size: 0.93rem; color: var(--muted); margin: 0 0 0.8rem; line-height: 1.6; }
.team-bio-full p:last-child { margin-bottom: 0; }
.highlight-military { color: #d4a017; font-weight: 600; }
.veteran-badge {
  position: absolute; bottom: 0; right: 0;
  background: rgba(13,13,13,0.85);
  border-top: 1px solid #d4a017; border-left: 1px solid #d4a017;
  padding: 0.35rem 0.75rem;
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.7rem; font-weight: 600;
  color: #d4a017;
}

/* ============================================================
   FAQ page
   ============================================================ */
.faq-list { max-width: 900px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.5rem 3rem 1.5rem 0;
  position: relative; font-family: var(--display); font-weight: 600;
  text-transform: uppercase; font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.2; transition: color .18s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--red); }
.faq-item summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
/* Plus (closed) / minus (open) marker. margin-top handles the centering so the
   transform is free to do the rotation. */
.faq-item summary::before,
.faq-item summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%; margin-top: -1px;
  width: 14px; height: 2px; background: var(--red); transition: transform .2s;
}
.faq-item summary::after { transform: rotate(90deg); }
.faq-item[open] summary { color: var(--red); }
.faq-item[open] summary::after { transform: rotate(0deg); }
.faq-answer { padding: 0 3rem 1.7rem 0; color: var(--muted); max-width: 68ch; }
.faq-answer :last-child { margin-bottom: 0; }
.faq-answer strong { color: var(--white); font-weight: 600; }

/* ============================================================
   Legal / long-form prose
   ============================================================ */
.legal { max-width: 78ch; }
.legal h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-top: 3.2rem; padding-top: 2.2rem; border-top: 1px solid var(--line);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 {
  font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--white);
  margin-top: 2rem; margin-bottom: 0.5rem;
}
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.5rem; }
.legal a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--white); }
.legal-updated {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.8rem; color: var(--muted); margin-bottom: 2.5rem;
}

/* ============================================================
   Materials page
   ============================================================ */
.mat-tier { margin-bottom: clamp(2.8rem, 6vw, 4.5rem); }
.mat-tier-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem 1.2rem;
  padding-bottom: 1rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--line);
}
.mat-tier-head h3 { margin: 0; }
.mat-spec {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.78rem; color: var(--muted);
}
.mat-spec b { color: var(--wood); font-weight: 600; }
.mat-swatches {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(126px, 100%), 1fr));
}
.mat-swatch { text-align: left; }
.mat-chip {
  aspect-ratio: 3 / 2; width: 100%; border: 1px solid var(--line);
  display: block; margin-bottom: 0.55rem; position: relative;
}
.mat-chip.is-light { border-color: rgba(0,0,0,0.3); }
.mat-chip.is-metallic { background-image: linear-gradient(115deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,0.22) 100%); }
.mat-chip.is-textured::after {
  content: ""; position: absolute; inset: 0; opacity: 0.32;
  background-image: radial-gradient(rgba(0,0,0,0.5) 0.6px, transparent 0.7px);
  background-size: 3px 3px;
}
.mat-name {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: 0.85rem; letter-spacing: 0.04em; line-height: 1.25;
}
.mat-note { font-size: 0.74rem; color: var(--muted); display: block; margin-top: 0.15rem; }
.mat-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.mat-table caption {
  text-align: left; font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82rem;
  color: var(--red); padding-bottom: 0.9rem;
}
.mat-table th, .mat-table td { text-align: left; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--line); }
.mat-table th {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.78rem; color: var(--muted); white-space: nowrap;
}
.mat-table td { color: var(--muted); }
.mat-table td:first-child { color: var(--white); font-weight: 500; }
.mat-table-scroll { overflow-x: auto; }
.mat-trim-cols { display: grid; gap: 2rem clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.mat-trim-list {
  list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.5rem;
  font-size: 0.9rem; color: var(--muted);
}
.mat-trim-list li { break-inside: avoid; padding: 0.2rem 0; }
@media (max-width: 560px) { .mat-trim-list { columns: 1; } }

/* ============================================================
   Materials — hub, subnav and product pages
   ============================================================ */

/* --- Category hub cards --- */
.cat-grid {
  display: grid; gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.cat-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 320px; padding: 1.8rem 1.7rem;
  border: 1px solid var(--line); background: var(--surface2);
  overflow: hidden; isolation: isolate;
  transition: border-color .2s, transform .2s;
}
.cat-card:hover { border-color: var(--red); transform: translateY(-4px); }
.cat-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.35) brightness(.55); transition: filter .4s, transform .6s;
}
.cat-card:hover img { filter: grayscale(0) brightness(.68); transform: scale(1.05); }
.cat-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13,13,13,.15) 0%, rgba(13,13,13,.55) 45%, rgba(13,13,13,.93) 100%);
}
.cat-card h3 { margin: 0 0 .35rem; font-size: clamp(1.4rem, 3vw, 1.85rem); }
.cat-card p { margin: 0; color: var(--muted); font-size: .95rem; }
.cat-card .cat-go {
  margin-top: 1.1rem; font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--red);
}
.cat-card:hover .cat-go { color: #fff; }

/* --- Subnav shared by the materials pages ---
   The site header is fixed and 78px tall at every breakpoint. .page-head
   normally pads itself by that much to clear it, but on these pages the subnav
   comes first — so the subnav takes over clearing the header, sticks just below
   it on scroll, and the following .page-head drops its now-duplicate offset. */
.subnav {
  border-bottom: 1px solid var(--line); background: var(--surface);
  margin-top: 78px; position: sticky; top: 78px; z-index: 90;
}
.subnav + .page-head { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.subnav ul {
  display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  display: block; white-space: nowrap; padding: 1rem .95rem;
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .08em; font-size: .85rem; color: var(--muted);
  border-bottom: 3px solid transparent; transition: color .18s, border-color .18s;
}
.subnav a:hover { color: var(--white); }
.subnav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--red); }

/* --- Product cards (windows, doors, garage) --- */
.prod-grid {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.prod-card {
  background: var(--surface2); border: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
}
.prod-card > img {
  width: 100%; height: auto; display: block;
  border-bottom: 3px solid var(--red); background: #fff;
}
.prod-body { padding: 1.5rem 1.6rem 1.7rem; flex: 1; display: flex; flex-direction: column; }
.prod-card h3 { margin: 0 0 .2rem; font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.prod-kicker {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .14em; font-size: .76rem; color: var(--wood); margin: 0 0 .9rem;
}
.prod-card p { color: var(--muted); font-size: .95rem; margin: 0 0 .9rem; }
.prod-card p:last-child { margin-bottom: 0; }

/* --- Spec list (key/value pairs) --- */
.spec-list { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.spec-list div {
  display: grid; grid-template-columns: minmax(9rem, 40%) 1fr; gap: .5rem 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.spec-list dt {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .74rem; color: var(--muted); align-self: center;
}
.spec-list dd { margin: 0; font-size: .92rem; color: var(--white); }
@media (max-width: 420px) {
  .spec-list div { grid-template-columns: 1fr; gap: .1rem; }
}

/* --- Stone patterns --- */
.stone-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.stone-card { background: var(--surface2); border: 1px solid var(--line); overflow: hidden; }
.stone-figs { display: grid; grid-template-columns: 1.35fr 1fr; gap: 2px; background: var(--line); }
.stone-figs img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.stone-body { padding: 1.2rem 1.4rem 1.5rem; }
.stone-body h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.stone-body p { margin: 0 0 .9rem; color: var(--muted); font-size: .9rem; }
.spec-link {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: .78rem; color: var(--red);
}
.spec-link:hover { color: var(--white); }
.spec-link::after { content: " ↗"; }

/* --- Brand row --- */
.brand-row {
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.brand-chip {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: .82rem; color: var(--white);
  border: 1px solid var(--line-2); padding: .55rem 1.1rem;
}

/* ============================================================
   Real-estate partner
   ============================================================ */
.partner-head {
  display: flex; gap: clamp(1.4rem, 4vw, 2.6rem); align-items: center;
  flex-wrap: wrap; margin-bottom: 2.2rem;
}
/* Source headshot is only 214px (cropped out of a business-card graphic), so
   it is displayed smaller than native rather than upscaled. Do not enlarge. */
.partner-avatar {
  width: 170px; height: 170px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--red); background: #fff;
}
.partner-id h2 { margin: 0 0 .3rem; }
.partner-id .partner-role {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .16em; font-size: .85rem; color: var(--red); margin: 0 0 .7rem;
}
.partner-id .partner-firm { margin: 0; color: var(--muted); font-size: 1rem; }
.partner-id .partner-firm b { color: var(--white); font-weight: 600; }
.partner-body { max-width: 68ch; }
.partner-body p { color: var(--muted); }

/* ---- Partner card ----
   Nicole gets the crew card component verbatim (.team-card and its children,
   see the team-grid block above) so the partner page reads as part of the same
   team, not a separate treatment. Only the surrounding layout differs: the crew
   sit in an auto-fill grid, she sits beside her contact details, so the card is
   held to a single-column width instead of stretching. */
.partner-layout {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.partner-card { max-width: 360px; }
/* Brokerage line closes the card the way .team-quote closes a crew card. */
.team-firm {
  margin: 1.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: 0.9rem; color: var(--muted);
}
.team-firm b { color: var(--white); font-weight: 600; }
@media (max-width: 760px) {
  .partner-layout { grid-template-columns: 1fr; }
  .partner-card { max-width: none; }
}

/* ============================================================
   Collapsible spec blocks (materials pages)
   ------------------------------------------------------------
   Specs, size tables, trim lists and color tiers all collapse
   behind a summary that states what's inside, so the pages read
   as a scannable index instead of a wall of data — the
   difference is most of a screen on mobile.
   Uses <details>, so it works with JS disabled.
   ============================================================ */
.spec-drop { border-top: 1px solid var(--line); }
.spec-drop + .spec-drop { border-top: 1px solid var(--line); }
.spec-drop > summary {
  cursor: pointer; list-style: none; position: relative;
  padding: .85rem 2.2rem .85rem 0;
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .1em; font-size: .78rem; color: var(--muted);
  transition: color .18s;
}
.spec-drop > summary::-webkit-details-marker { display: none; }
.spec-drop > summary:hover { color: var(--white); }
.spec-drop > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.spec-drop[open] > summary { color: var(--white); }

/* Plus (closed) / minus (open). margin-top centers, so transform is free to rotate. */
.spec-drop > summary::before,
.spec-drop > summary::after {
  content: ""; position: absolute; right: .2rem; top: 50%; margin-top: -1px;
  width: 11px; height: 2px; background: var(--red); transition: transform .2s;
}
.spec-drop > summary::after { transform: rotate(90deg); }
.spec-drop[open] > summary::after { transform: rotate(0deg); }

.spec-drop-body { padding: .2rem 0 1.2rem; }
.spec-drop-body > .spec-list { border-top: 0; }
.spec-drop-body > :last-child { margin-bottom: 0; }

/* A count/qualifier after the label, e.g. "Standard — 18 colors" */
.spec-drop .drop-meta { color: var(--wood); letter-spacing: .06em; }

/* Inside a product card the divider should span the card's padding */
.prod-body .spec-drop { margin-top: auto; }

/* ============================================================
   ACCESSIBILITY & THEMING
   ------------------------------------------------------------
   Dark is the brand and stays the default. Light is opt-in via
   the toggle only — the visitor's OS preference is deliberately
   NOT followed, so the approved dark design is what everyone
   sees unless they ask for otherwise.
   ============================================================ */

:root {
  /* Small red text on black measures 3.35:1 with the brand red —
     below the 4.5:1 AA floor. Same hue, lifted until it clears:
     4.64:1. Brand red is still used for fills, buttons and large
     display type, where it passes. */
  --red-text:  #da484e;
  --header-bg: rgba(194,39,45,0.94);   /* brand red bar on scroll, every page */
  --hero-ink:  #ffffff;
  /* Visitor text-size control multiplies this. */
  --ui-scale: 1;
}

html { font-size: calc(100% * var(--ui-scale)); }

/* Was a hard 17px, which silently overrode the visitor's own browser
   text-size setting — the single worst thing for older readers. In rem it
   scales with both the browser setting and the on-page control. */
body { font-size: 1.0625rem; }

/* ---------- Light theme ---------- */
:root[data-theme="light"] {
  --black:    #f4f2ef;
  --surface:  #ffffff;
  --surface2: #e9e5e0;
  --white:    #14120f;
  --muted:    #56504a;
  --line:     rgba(0,0,0,0.13);
  --line-2:   rgba(0,0,0,0.26);
  --red-text: #a81f25;
  --wood:     #7a5a1f;

}

/* Surfaces that hardcoded dark values need to follow the token. */
.site-header.scrolled,
.site-header.nav-open { background: var(--header-bg); }

/* The hero sits on a photograph with its own dark scrim, so it stays
   light-on-dark in both themes. */
.hero h1, .hero .sub { color: var(--hero-ink); }

/* --- Ink that sits on media or a colored bar -------------------------------
   Some surfaces are dark in BOTH themes: the hero photo, the red header bar,
   the near-black footer, and the category cards, which are photographs behind
   a dark scrim. Their text must stay light regardless of theme — reading it
   from --white is what turned it dark-on-dark in light mode. */
:root { --on-dark: #f6f4f1; --on-dark-muted: #b9b2aa; }

/* Header: only the transparent state on a subpage sits over a light page, so
   that's the only case that takes dark ink. Scrolled (red bar), nav-open
   (near-black) and the whole home page (hero photo) stay light. */
:root[data-theme="light"] body.subpage .site-header:not(.scrolled):not(.nav-open) .nav-links a,
:root[data-theme="light"] body.subpage .site-header:not(.scrolled):not(.nav-open) .nav-phone,
:root[data-theme="light"] body.subpage .site-header:not(.scrolled):not(.nav-open) .nav-socials a {
  color: var(--white);
}
/* (light-mode hamburger is set once in the header block, with the other states) */
.site-header.scrolled .nav-links a,
.site-header.scrolled .nav-phone,
.site-header.scrolled .nav-socials a,
.site-header.nav-open .nav-links a,
.site-header.nav-open .nav-phone,
.site-header.nav-open .nav-socials a { color: var(--on-dark); }

/* Footer is deliberately near-black in both themes — an anchor at the foot of
   the page. Keep its text light rather than letting it follow the theme. */
:root[data-theme="light"] .site-footer,
:root[data-theme="light"] .site-footer a { color: var(--on-dark-muted); }
:root[data-theme="light"] .site-footer h4 { color: var(--on-dark); }
:root[data-theme="light"] .site-footer a:hover { color: var(--red-text); }

/* Category cards are photographs behind a dark gradient. */
:root[data-theme="light"] .cat-card h3 { color: var(--on-dark); }
:root[data-theme="light"] .cat-card p { color: var(--on-dark-muted); }
:root[data-theme="light"] .mat-chip.is-light { border-color: rgba(0,0,0,0.35); }
/* Band sections keep their own grounds — they're deliberate colour blocks. */
:root[data-theme="light"] .band-surface { background: var(--surface2); }

/* Small red text uses the AA-safe tint; fills keep the exact brand red. */
.eyebrow, .spec-link, .cat-go, .prod-kicker,
.mat-table caption, .team-role { color: var(--red-text); }
.eyebrow::before { background: var(--red-text); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 0.5rem; top: -100px; z-index: 200;
  background: var(--red); color: #fff; padding: 0.8rem 1.3rem;
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em;
  transition: top .15s;
}
.skip-link:focus { top: 0.5rem; }

/* ---------- Visible focus everywhere ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--red-text);
  outline-offset: 2px;
  border-radius: 1px;
}
/* Target of the skip link shouldn't show a ring when focused programmatically. */
main:focus, [role="main"]:focus { outline: none; }

/* ---------- Accessibility control panel ---------- */
/* Booking bubble — a circle, not a pill. The wide labelled version ate a strip
   of every screen and had to be dodged around the accessibility bar; a bubble
   costs one thumb-width and reads instantly as "help".

   Bottom RIGHT is where people look for it, so it sits stacked above .a11y-bar
   rather than beside it — that bar owns the very corner. The label lives in
   aria-label and title; the "?" is decorative, so nothing is lost when the glyph
   alone isn't enough. z-index stays under the bar and under Calendly's own
   overlay (9998+). */
.sales-badge {
  position: fixed; right: 18px; bottom: 58px; z-index: 140;
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.sales-badge:hover {
  background: var(--red-dark); transform: translateY(-2px);
  box-shadow: 0 9px 26px rgba(0,0,0,0.5);
}
.sales-badge:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Still a 44px+ touch target at the smaller size — below that it stops being
   reliably tappable with a thumb. */
@media (max-width: 40rem) {
  .sales-badge { width: 46px; height: 46px; font-size: 1.3rem; right: 14px; bottom: 52px; }
}

.a11y-bar {
  position: fixed; right: 0; bottom: 0; z-index: 150;
  display: flex; align-items: stretch;
  background: var(--surface2); border: 1px solid var(--line-2);
  border-right: 0; border-bottom: 0;
  border-radius: 4px 0 0 0;
  box-shadow: 0 -2px 18px rgba(0,0,0,0.35);
}
.a11y-bar button {
  background: transparent; border: 0; cursor: pointer;
  color: var(--white); font-family: var(--display); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.6rem 0.75rem; font-size: 0.78rem; line-height: 1;
  display: flex; align-items: center; gap: 0.35rem;
  border-right: 1px solid var(--line);
}
.a11y-bar button:last-child { border-right: 0; }
.a11y-bar button:hover { background: var(--surface); color: var(--red-text); }
.a11y-bar button[aria-pressed="true"] { background: var(--red); color: #fff; }
.a11y-bar .a11y-size { font-variant-numeric: tabular-nums; }
.a11y-bar svg { width: 15px; height: 15px; fill: currentColor; display: block; }
/* Desktop shows the state word ("Light"/"Dark"); the short label is mobile-only. */
.a11y-lbl-short { display: none; }

/* Percentage toast — the mobile stand-in for the always-on readout. Anchored to
   the bar itself, which is position:fixed and so is its own containing block.
   aria-hidden: the sr-only live region already announces the change. */
.a11y-toast {
  display: none;
  position: absolute; bottom: calc(100% + 8px); right: 8px;
  background: var(--surface2); color: var(--white);
  border: 1px solid var(--line-2); border-radius: 3px;
  font-family: var(--display); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
  padding: 0.4rem 0.7rem; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  opacity: 0; transform: translateY(5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Shown state is set inline by flashSize() in main.js — see the note there. */

/* ---- Mobile: keep the bar out of the way ----
   It shares the bottom of the screen with the booking badge and sits over the
   page content, so it loses the always-on percentage and the state word. The
   icon still carries theme state, and A+/A&minus; still carry their own meaning. */
@media (max-width: 40rem) {
  .a11y-bar button { padding: 0.45rem 0.55rem; font-size: 0.68rem; gap: 0.28rem; }
  .a11y-bar svg { width: 13px; height: 13px; }
  /* The readout is a tabIndex -1, aria-hidden button wrapping .a11y-size —
     hide the button, or an empty padded box is left behind. */
  .a11y-bar button[aria-hidden="true"] { display: none; }
  .a11y-lbl-full { display: none; }
  .a11y-lbl-short { display: inline; }
  .a11y-toast { display: block; }
}
@media (max-width: 30rem) {
  .a11y-bar button { padding: 0.4rem 0.5rem; font-size: 0.66rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .scroll-cue::after { animation: none; }
}

/* ---------- Screen-reader-only text ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Light mode, header transparent over a white page: the white wordmark has
   nothing to sit on. This used to be patched with a dark chip behind the logo;
   a dark-ink lockup now exists, so use the real thing instead of the box.
   Only the unscrolled state needs it — once scrolled the bar is brand red and
   the black/silver mark takes over, and nav-open goes near-black where white is
   already right. The footer keeps logo-white.png: .site-footer is a hardcoded
   #080808 in BOTH themes, so it never needed the chip either.

   body.subpage is the qualifier that matters: those pages open on the page
   ground, which is white in light mode. The home page opens on a full-bleed
   hero photograph, where the white wordmark is still the readable one — a dark
   lockup fights the picture. */
:root[data-theme="light"] body.subpage .site-header:not(.scrolled):not(.nav-open) .brand-logo {
  content: url("../images/logo-header-light.png");
}
/* Footer sits on the light ground too. */
:root[data-theme="light"] .site-footer { border-top: 1px solid var(--line); }

/* ============================================================
   Reflow: keep the menu reachable when the viewport shrinks
   ------------------------------------------------------------
   Zooming (pinch or browser zoom) shrinks the CSS viewport. The
   header row could not shrink with it — .nav-cta was flex-shrink:0
   and the Get a Quote button keeps a fixed width — so below ~370px
   the hamburger was pushed clean off the right edge and the page
   scrolled sideways. At that point a magnifying visitor cannot open
   the menu at all.

   WCAG 2.2 AA (1.4.10 Reflow) expects content to stay usable down to
   a 320px-equivalent viewport, which is roughly 400% zoom on a phone.
   ============================================================ */
@media (max-width: 26rem) {
  .nav { gap: 0.6rem; }
  /* The quote button is the widest fixed item and the least essential here —
     it appears again inside the menu and in every page's CTA. */
  .nav-cta .btn-primary { display: none; }
  .brand-logo { height: 40px; }
}

/* Belt and braces: the toggle must survive any width. */
.nav-cta { min-width: 0; }
.nav-toggle { flex-shrink: 0; }
.nav > a:first-child { min-width: 0; overflow: hidden; }

/* Outline buttons hardcoded white text, which vanished on light grounds.
   Follow the theme, except on the dark bands where white is correct. */
.btn-outline { color: var(--white); }
.band-red .btn-outline,
.hero .btn-outline,
.site-footer .btn-outline { color: #fff; }

/* ------------------------------------------------------------------
   Light-mode fixes: text that hardcoded white, or used a token that
   collides with its own background once the theme flips.
   ------------------------------------------------------------------ */

/* .price sat on the ordinary page ground with color:#fff — invisible in light
   mode. It follows the theme now; on the red band it's overridden below. */
.price { color: var(--white); }
.band-red .price, .hero .price { color: #fff; }

/* The big ghost step numbers were painted in --surface2, which in light mode is
   the exact color of the .band-surface they sit on: 1:1 contrast, invisible.
   A dedicated token keeps them a hair off the ground in both themes. */
:root { --ghost: #1e1e1e; }
:root[data-theme="light"] { --ghost: #d3ccc4; }
.step .sn { color: var(--ghost); }

/* Socials chips are outlined on the page ground, not on a dark band. */
:root[data-theme="light"] .socials a { color: var(--white); }
:root[data-theme="light"] .site-footer .socials a { color: var(--on-dark); }

/* ------------------------------------------------------------------
   Header, unified across the whole site
   ------------------------------------------------------------------
   The home page used to scroll to a dark bar while every subpage went
   red, and in light mode it went white — so the nav read black on a
   pale bar. One behaviour now: transparent over the hero, red once
   scrolled, near-black while the menu is open.
   ------------------------------------------------------------------ */
.site-header.scrolled {
  background: var(--header-bg);
  border-color: rgba(255,255,255,0.15);
}
.site-header.nav-open {
  background: rgba(13,13,13,0.98);
  border-color: var(--line);
}

/* Top of the home page: the bar is transparent over the hero photograph, so
   everything in it stays light in BOTH themes — the photo is the background,
   not the page color. */
body:not(.subpage) .site-header:not(.scrolled):not(.nav-open) .nav-links a,
body:not(.subpage) .site-header:not(.scrolled):not(.nav-open) .nav-phone,
body:not(.subpage) .site-header:not(.scrolled):not(.nav-open) .nav-socials a {
  color: var(--on-dark);
}
body:not(.subpage) .site-header:not(.scrolled):not(.nav-open) .nav-toggle span { background: #fff; }

/* Hamburger colour is decided in one place — see "Hamburger colour" up in the
   header block. It used to be set here as dark-on-red, which contradicted the
   white nav links on that same bar. */