/* ==========================================================================
   NH Woodworks — custom cabinetry
   Elite Closets & Cabinetry — semi-custom & retail division
   Site stylesheet
   Palette: bright warm white · warm near-black · walnut (NHW) · brass (Elite)
   ========================================================================== */

:root {
  /* ---- Ink family. Warm near-blacks, lifted a step for a brighter page. ---- */
  --ink:        #1A1611;
  --ink-soft:   #3B342C;
  --muted:      #766C61;

  /* ---- NH Woodworks: the parent accent. Walnut is a muted taupe-brown, and
         unlike the deeper brown it replaced it is NOT text-safe on the cream
         and sand grounds (4.36:1 and 4.04:1, both under AA). It therefore
         splits the way Brass already does: Walnut fills, marks, icons, rules
         and display-size figures; Walnut Text carries anything set at body
         size or smaller. See The Walnut-Text Rule. ---- */
  --walnut:     #8A7355;   /* 4.50:1 on white — fills and marks only */
  --walnut-tx:  #7E6A4D;   /* 5.18 white / 5.01 cream / 4.65 sand — type */
  --walnut-dk:  #6A5840;   /* hover and pressed; 6.81:1 under white type */

  /* ---- Elite Closets & Cabinetry: the division accent. Brass is brighter
         and reads retail rather than workshop, but only clears 3.2:1 on
         white — see The Brass-Is-Not-Text Rule. Fills, rules, marks and
         large display figures only; Brass Deep is its text-safe stand-in. ---- */
  --brass:      #B47C3C;
  --brass-dk:   #8A5D28;
  --tan:        #C8A275;
  --tan-pale:   #E4D3B8;

  /* ---- Grounds. All three lifted toward white; Sand is now barely a tint,
         which is what does most of the "bright" work. ---- */
  --cream:      #FDFBF8;
  --sand:       #F7F2EA;
  --line:       #EDE5D9;
  /* Line is a hairline for dividers and card edges. A control that a visitor
     has to find and click needs a boundary they can actually see: Line reads
     1.28:1 against a white field, below the 3:1 WCAG 1.4.11 asks for. This is
     the same warm neutral, stepped down until it clears the bar at 3.16:1. */
  --line-control: #9C8F80;
  --white:      #FFFFFF;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Softer and wider than before — on near-white grounds the old shadows read
     as smudges rather than lift. */
  --shadow-sm: 0 2px 12px rgba(26,22,17,.05);
  --shadow-md: 0 14px 36px rgba(26,22,17,.09);
  --shadow-lg: 0 30px 70px rgba(26,22,17,.14);

  --wrap: 1200px;
  --section:    clamp(76px, 9vw, 132px);
  --section-sm: clamp(56px, 6vw, 84px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2.7rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(2.05rem, 3.9vw, 3.15rem); }
h3 { font-size: clamp(1.24rem, 2vw, 1.55rem); }

a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* build.ps1 wraps job photos in <picture> for their WebP copies. The wrapper
   takes no box of its own, so every rule that sizes an <img> by its parent
   (heroes, splits, room cards, photo tiles) still sees the same parent. */
picture { display: contents; }
ul  { list-style: none; }

::selection { background: var(--walnut); color: #fff; }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 28px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--walnut-tx);
  margin-bottom: 14px;
}
.eyebrow.on-dark { color: var(--tan-pale); }
.lede { font-size: 1.12rem; color: var(--muted); }
.center { text-align: center; }

.rule {
  width: 52px; height: 2px; background: var(--walnut);
  border: 0; margin: 20px 0;
}
.center .rule, .rule.center { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px;
  font-family: var(--sans);
  font-size: .92rem; font-weight: 600; letter-spacing: .02em;
  border: 1.5px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary  { background: var(--walnut); color: #fff; border-color: var(--walnut); }
.btn-primary:hover { background: var(--walnut-dk); border-color: var(--walnut-dk); }

.btn-dark     { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover { background: var(--walnut); border-color: var(--walnut); }

.btn-ghost    { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

.btn-outline  { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

.btn-lg { padding: 18px 38px; font-size: 1rem; }
.btn-block { width: 100%; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .92rem; color: var(--walnut-tx);
  border-bottom: 1.5px solid transparent; padding-bottom: 2px;
  transition: border-color .22s var(--ease), gap .22s var(--ease);
}
.arrow-link:hover { border-color: var(--walnut-tx); gap: 13px; }
.arrow-link::after { content: "→"; }

/* ==========================================================================
   HEADER
   ========================================================================== */
/* The topbar was a near-black band across the very top of every page — the
   single heaviest element above the fold. Bright mode inverts it to a warm
   tint, which is most of why the site now reads light on first paint. */
.topbar {
  background: var(--sand);
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .01em;
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 42px; gap: 18px;
}
.topbar a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.topbar a:hover { color: var(--walnut-tx); }
.topbar-links { display: flex; gap: 22px; align-items: center; }
/* The header used to carry a second, larger phone number. Seven nav items no
   longer leave room for it, so this one inherits the Fraunces treatment and
   becomes the single phone number in the masthead — visible at every width,
   which the header copy never was. */
.topbar-phone { font-family: var(--serif); font-size: 1.06rem; letter-spacing: -.01em; }

.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; min-height: 84px;
}

/* Logo */
.logo { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; }
.logo-name {
  font-family: var(--serif); font-size: 1.42rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
}
.logo-name em { font-style: normal; color: var(--walnut); }
.logo-sub {
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-top: 6px;
}

/* Primary nav */
/* The masthead may run wider than the 1200px page column (both rows, so the
   topbar phone still lines up with the header's right edge). Seven items
   since Design Your Space got its own (2026-10-07) need ~1250px of row,
   more than the column's 1144px inside its gutters. */
.topbar .wrap, .site-header .nav { max-width: 1340px; }
.nav-menu { display: flex; align-items: center; gap: 26px; }
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  font-size: .92rem; font-weight: 600; color: var(--ink-soft);
  padding: 30px 0; display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 2px solid transparent;
  /* Without this a tight header wraps "Fully Custom" onto two lines instead
     of letting the row overflow, which hides the problem rather than showing
     it — and looks broken. */
  white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav-menu > li > a:hover,
.nav-menu > li > a[aria-current="page"] { color: var(--walnut-tx); border-color: var(--walnut-tx); }
/* The Elite entry answers in its own accent, so the brand split is legible in
   the masthead and not only once you land on the page. */
.nav-menu > li > a.nav-elite:hover,
.nav-menu > li > a.nav-elite[aria-current="page"] { color: var(--brass-dk); border-color: var(--brass); }
.caret { width: 9px; height: 9px; transition: transform .25s var(--ease); }
.nav-menu > li:hover .caret { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute; top: 100%; left: -22px;
  min-width: 268px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.nav-menu > li:hover .dropdown,
.nav-menu > li:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear 0s;
}
.dropdown a {
  display: block; padding: 11px 16px; font-size: .88rem; font-weight: 500;
  color: var(--ink-soft); border-radius: 2px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.dropdown a:hover { background: var(--cream); color: var(--walnut-tx); }
.dropdown a span { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }

.nav-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.nav-phone {
  font-family: var(--serif); font-size: 1.06rem; font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
.nav-phone:hover { color: var(--walnut-tx); }

/* Mobile toggle */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; position: relative; flex-shrink: 0;
}
.nav-toggle span {
  position: absolute; left: 10px; width: 24px; height: 2px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  display: none;
  position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px);
  background: #fff; z-index: 300;
  transform: translateX(100%);
  transition: transform .34s var(--ease);
  overflow-y: auto;
  padding: 26px 26px 60px;
  box-shadow: var(--shadow-lg);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav li + li { border-top: 1px solid var(--line); }
/* :not(.btn) — this rule is more specific than .btn-primary, so without the
   guard the drawer's walnut CTA would render ink-on-walnut at 2.7:1. */
.mobile-nav a:not(.btn) {
  display: block; padding: 16px 4px; font-size: 1.06rem; font-weight: 600; color: var(--ink);
}
.mobile-nav a.sub { padding-left: 20px; font-weight: 500; font-size: .92rem; color: var(--muted); }
.mobile-nav .btn { margin-top: 26px; }
.mobile-nav-head { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.mobile-nav-close {
  background: none; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--ink);
  padding: 6px 10px;
}
.nav-scrim {
  position: fixed; inset: 0; background: rgba(22,19,15,.45); z-index: 290;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   HERO — homepage
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex; align-items: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
  animation: heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-media img { animation: none; }
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* The copy block sits inside the first 60% of this gradient, so that stretch
     carries the density and the right side stays bright. Tuned against the
     green lakeside hero, whose windows and marble backsplash fall directly
     behind the eyebrow — at .62 by 36% the eyebrow disappeared into them. */
  background:
    linear-gradient(100deg, rgba(18,13,9,.90) 0%, rgba(18,13,9,.78) 38%,
                            rgba(18,13,9,.42) 66%, rgba(18,13,9,.08) 100%),
    linear-gradient(to top, rgba(18,13,9,.42) 0%, rgba(18,13,9,0) 44%);
}
.hero-inner { max-width: 700px; padding: 130px 0 120px; }
.hero h1 { color: #fff; margin-bottom: 22px; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--tan-pale); }
.hero p {
  font-size: 1.12rem; color: #E8DED0; max-width: 545px; margin-bottom: 36px;
}
.hero-cta { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 52px; }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,.22);
}
.hero-trust li {
  display: flex; align-items: center; gap: 9px;
  font-size: .88rem; font-weight: 600; color: #E8DED0; letter-spacing: .01em;
}
.hero-trust svg { width: 16px; height: 16px; color: var(--tan-pale); flex-shrink: 0; }

.scroll-hint {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 2; color: rgba(255,255,255,.7); font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.scroll-hint::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(to bottom, rgba(255,255,255,.7), transparent);
  animation: hintPulse 2.2s ease-in-out infinite;
}
@keyframes hintPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  position: relative; color: #fff; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: 430px;
}
.page-hero img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(14,11,9,.92) 0%, rgba(14,11,9,.60) 45%, rgba(14,11,9,.32) 100%);
}
.page-hero-inner { padding: 76px 0 60px; max-width: 760px; }
.page-hero h1 { color: #fff; margin-bottom: 16px; }
/* :not(.crumbs) — the breadcrumb is also a <p> here, and without the guard this
   rule wins on specificity and blows it up to lede size. */
.page-hero p:not(.crumbs) { color: #E4D9C9; font-size: 1.06rem; max-width: 600px; }

.crumbs {
  font-size: .78rem; color: #BFB2A2; margin-bottom: 18px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.crumbs a:hover { color: #fff; }
.crumbs span { opacity: .5; margin: 0 8px; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { padding: var(--section) 0; }
.section-sm { padding: var(--section-sm) 0; }
.bg-cream { background: var(--cream); }
.bg-sand  { background: var(--sand); }
.bg-ink   { background: var(--ink); color: #C8BCAE; }
.bg-ink h2, .bg-ink h3 { color: #fff; }

/* Warm tinted band — the bright-mode stand-in for a full ink section. Used
   where a section needs to separate itself but the page would go heavy if one
   more near-black band landed on it. */
/* The dark stop is held at #F8F1E6 rather than anything deeper: Muted body
   copy sits on this band, and at #F6EDE0 it measured 4.43:1, just under AA. */
.bg-warm  { background: linear-gradient(168deg, #FCF8F2 0%, #F8F1E6 100%); }

.section-head { max-width: 660px; margin-bottom: clamp(38px, 5vw, 60px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: 16px; text-wrap: balance; }
.section-head p { color: var(--muted); font-size: 1.06rem; }

/* ---------- Intro / value strip ---------- */
.value-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px 34px;
}
.value-item svg { width: 30px; height: 30px; color: var(--walnut); margin-bottom: 16px; }
.value-item h3 { font-size: 1.12rem; margin-bottom: 9px; }
.value-item p { font-size: .96rem; color: var(--muted); }

/* ---------- Room cards ---------- */
.room-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px;
}
.room-card {
  position: relative; display: block; overflow: hidden;
  border-radius: 3px; background: var(--ink);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.room-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.room-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease), opacity .3s var(--ease);
}
.room-card:hover img { transform: scale(1.06); }
.room-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,11,9,.88) 0%, rgba(14,11,9,.34) 46%, rgba(14,11,9,.05) 100%);
  transition: opacity .3s var(--ease);
}
.room-card-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 26px 24px; color: #fff;
}
.room-card-body h3 { color: #fff; font-size: 1.35rem; margin-bottom: 6px; }
.room-card-body p { font-size: .88rem; color: #DCD1C2; margin-bottom: 12px; }
.room-card-body .more {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tan-pale); display: inline-flex; gap: 8px; align-items: center;
}
.room-card-body .more::after { content: "→"; transition: transform .25s var(--ease); }
.room-card:hover .more::after { transform: translateX(5px); }

.room-card.tall { aspect-ratio: 3 / 4; }
@media (min-width: 900px) {
  /* Fixed row height + aspect-ratio:auto on the children, so the small cards
     fill their grid row instead of collapsing to their 4:3 intrinsic height. */
  .room-grid.feature { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 252px); }
  .room-grid.feature > * { aspect-ratio: auto; height: 100%; }
  .room-grid.feature > :first-child { grid-column: span 2; grid-row: span 2; }
  .room-grid.feature > :first-child .room-card-body h3 { font-size: 1.8rem; }
}

/* ---------- Tier cards ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.tier {
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  padding: 38px 32px 34px; position: relative;
  display: flex; flex-direction: column;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tier.featured { border-color: var(--walnut); border-width: 1.5px; box-shadow: var(--shadow-md); }
.tier-flag {
  position: absolute; top: -12px; left: 32px;
  background: var(--walnut); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 15px; border-radius: 2px;
}
.tier-num {
  font-family: var(--serif); font-size: .96rem; color: var(--tan);
  letter-spacing: .1em; margin-bottom: 10px; display: block;
}
.tier h3 { font-size: 1.5rem; margin-bottom: 6px; }
.tier .tier-lead { font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--walnut-tx); margin-bottom: 16px; }
.tier > p { font-size: .96rem; color: var(--muted); margin-bottom: 22px; }
.tier ul { margin-bottom: 26px; display: flex; flex-direction: column; gap: 10px; }
.tier ul li {
  font-size: .92rem; display: flex; gap: 11px; align-items: flex-start; color: var(--ink-soft);
}
.tier ul li svg { width: 16px; height: 16px; color: var(--walnut); flex-shrink: 0; margin-top: 4px; }
.tier-foot {
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px;
}
.tier-foot div { font-size: .88rem; font-weight: 700; color: var(--ink); }
.tier-foot div span {
  display: block; font-size: .72rem; font-weight: 500; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px;
}

/* ==========================================================================
   DUAL BRAND — NH Woodworks (custom) vs Elite (semi-custom & retail)
   The two brands are separated by accent and ground, never by a new hue:
   NHW carries Walnut on white, Elite carries Brass on a warm tint.
   ========================================================================== */

/* The maker's mark that labels which brand builds a given thing. */
.brand-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 2px; border: 1px solid transparent;
  white-space: nowrap;
}
.brand-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  flex-shrink: 0;
}
.brand-tag.nhw   { color: var(--walnut-tx);   background: #F6EFE7; border-color: #E7D8C6; }
.brand-tag.elite { color: var(--brass-dk); background: #FBF3E8; border-color: #EEDCC2; }
.brand-tag.on-dark {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); color: var(--tan-pale);
}
/* A long tag ("NH Woodworks · our fully custom collection") is wider than a
   phone; let it wrap there instead of pushing the page sideways. */
@media (max-width: 620px) {
  .brand-tag { white-space: normal; max-width: 100%; }
}

/* The two-door chooser: full custom, or semi-custom & retail. */
.brand-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 26px; }
.brand-door {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 40px 36px 34px; position: relative; overflow: hidden;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.brand-door::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.brand-door.nhw::before   { background: var(--walnut); }
.brand-door.elite::before { background: var(--brass); }
.brand-door.elite { background: linear-gradient(160deg, #FFFFFF 0%, #FDF7EE 100%); }
.brand-door:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.brand-door.nhw:hover   { border-color: var(--walnut); }
.brand-door.elite:hover { border-color: var(--brass); }

.brand-door h3 {
  font-size: clamp(1.6rem, 2.4vw, 2.05rem); margin: 18px 0 4px;
}
.brand-door .brand-door-sub {
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 18px;
}
.brand-door.nhw   .brand-door-sub { color: var(--walnut-tx); }
.brand-door.elite .brand-door-sub { color: var(--brass-dk); }
.brand-door > p { color: var(--muted); font-size: 1rem; margin-bottom: 24px; }
.brand-door > p a { color: var(--walnut-tx); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.brand-door.elite > p a { color: var(--brass-dk); }
.brand-door > p a:hover { color: var(--ink); }
.brand-door ul { display: flex; flex-direction: column; gap: 11px; margin-bottom: 30px; }
.brand-door ul li { font-size: .96rem; display: flex; gap: 11px; align-items: flex-start; }
.brand-door ul li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; }
.brand-door.nhw   ul li svg { color: var(--walnut); }
.brand-door.elite ul li svg { color: var(--brass-dk); }
.brand-door .brand-door-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; }

.btn-brass { background: var(--brass-dk); color: #fff; border-color: var(--brass-dk); }
.btn-brass:hover { background: #744D1E; border-color: #744D1E; }

/* Tier cards inherit their brand's accent instead of always reading Walnut. */
.tier.is-elite .tier-lead { color: var(--brass-dk); }
.tier.is-elite ul li svg  { color: var(--brass-dk); }
.tier.is-elite .tier-num  { color: var(--brass); }
.tier.featured.is-elite   { border-color: var(--brass); }
.tier.featured.is-elite .tier-flag { background: var(--brass-dk); }

/* ---------- Design Your Space teaser (homepage) ----------
   Every room the tool does, as six real 3D renders from it, each a link into
   that room. No mono, no 4px radius, no shadow on a resting card: the panel is
   ordinary marketing vocabulary, white ground on Sand with a 1px Line border. */
.cfg-teaser {
  /* Same ratio and gap as .split, so this section shares the page's rhythm
     rather than introducing a second two-column measure. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.cfg-teaser-copy .brand-tag { margin-bottom: 20px; }
.cfg-teaser-copy h2 { margin-bottom: 18px; text-wrap: balance; }
.cfg-teaser-copy p  { color: var(--muted); margin-bottom: 16px; }
.cfg-teaser-copy .btn { margin-top: 12px; }

.cfg-teaser-note { margin: 20px 0 0; font-size: .88rem; color: var(--muted); }
.cfg-teaser-note a { color: var(--walnut-tx); text-decoration: underline; text-underline-offset: 3px; }
.cfg-teaser-note a:hover { color: var(--walnut-dk); }

.cfg-teaser-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 16px 16px 15px;
}
.cfg-teaser-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; margin-bottom: 11px;
}
.cfg-teaser-head span {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.cfg-teaser-head span + span { color: var(--brass-dk); }

/* The renders are drawn on Sand, so each tile is a Sand card the picture
   sits flush in; the name sits under it in the same label style as the head. */
.cfg-rooms {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.cfg-rooms a {
  display: block; background: var(--sand); border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden; color: var(--ink);
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.cfg-rooms a:hover { border-color: var(--walnut); transform: translateY(-2px); }
.cfg-rooms a:focus-visible { outline: 2.5px solid var(--walnut); outline-offset: 2px; }
.cfg-rooms img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.cfg-rooms span {
  display: block; padding: 8px 10px 9px; border-top: 1px solid var(--line);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.cfg-rooms a:hover span { color: var(--walnut-tx); }
@media (max-width: 560px) { .cfg-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Split (image + copy) ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media { position: relative; }
.split-media img {
  width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 3px;
  box-shadow: var(--shadow-md);
}
.split-media.tall img { aspect-ratio: 3 / 4; }
.split-copy h2 { margin-bottom: 18px; }
.split-copy p { color: var(--muted); margin-bottom: 16px; }
.split-copy .btn { margin-top: 14px; }

.badge-stat {
  position: absolute; right: -20px; bottom: -24px;
  background: var(--walnut); color: #fff;
  padding: 24px 30px; border-radius: 3px; box-shadow: var(--shadow-md);
  text-align: center;
}
.badge-stat strong { display: block; font-family: var(--serif); font-size: 2.2rem; line-height: 1; }
.badge-stat span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; }
.stat { text-align: center; }
.stat strong {
  display: block; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--walnut); line-height: 1; margin-bottom: 10px;
}
.bg-ink .stat strong { color: var(--tan-pale); }
.stat span { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.bg-ink .stat span { color: #A99B8A; }

/* ---------- Process ---------- */
.process { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 34px; position: relative; }
.step { position: relative; }
/* Full-strength Brass, not Tan at 55%. These numerals carry the order of the
   process, so they are content, not ornament — and now that the process bands
   are light rather than ink, the faded version measured about 2:1. */
.step-num {
  font-family: var(--serif); font-size: 2.6rem; color: var(--brass);
  line-height: 1; margin-bottom: 14px; display: block;
}
.step h3 { font-size: 1.22rem; margin-bottom: 9px; }
.step p { font-size: .96rem; color: var(--muted); }
.bg-ink .step p { color: #A99B8A; }
.bg-ink .step-num { color: var(--tan); opacity: .75; }

/* ---------- Gallery ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 44px;
}
.filter {
  background: transparent; border: 1.5px solid var(--line-control); color: var(--ink-soft);
  padding: 10px 22px; border-radius: 40px; cursor: pointer;
  font-family: var(--sans); font-size: .88rem; font-weight: 600;
  transition: all .22s var(--ease);
}
.filter:hover { border-color: var(--walnut-tx); color: var(--walnut-tx); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.masonry { columns: 3; column-gap: 20px; }
.masonry .shot { break-inside: avoid; margin-bottom: 20px; }

.shot {
  position: relative; overflow: hidden; border-radius: 3px; cursor: zoom-in;
  background: var(--sand); display: block; width: 100%; border: 0; padding: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.shot img { width: 100%; height: auto; transition: transform .6s var(--ease); }
.shot:hover img { transform: scale(1.045); }
.shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,11,9,.78) 0%, rgba(14,11,9,0) 48%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.shot:hover::after { opacity: 1; }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 20px; color: #fff; text-align: left;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.shot:hover figcaption { opacity: 1; transform: translateY(0); }
.shot figcaption strong { display: block; font-family: var(--serif); font-size: 1.06rem; font-weight: 600; }
.shot figcaption em {
  font-style: normal; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tan-pale); font-weight: 700;
}
.shot.is-hidden { display: none; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.grid-3 .shot img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(10,8,7,.94);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  /* visibility flips instantly on open (so the close button is focusable right
     away) and is held back until the fade finishes on close. */
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility 0s linear .28s;
}
.lightbox.is-open {
  opacity: 1; visibility: visible;
  transition: opacity .28s var(--ease), visibility 0s linear 0s;
}
.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 2px; }
.lightbox-cap {
  color: #DCD1C2; text-align: center; margin-top: 18px; font-size: .88rem;
}
.lightbox-cap strong { display: block; font-family: var(--serif); color: #fff; font-size: 1.12rem; }
.lightbox-close, .lightbox-nav {
  position: absolute; background: rgba(255,255,255,.1); border: 0; color: #fff;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  font-size: 1.42rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.24); }
.lightbox-close { top: 22px; right: 22px; }
.lightbox-nav.prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: 22px; top: 50%; transform: translateY(-50%); }
.lightbox-fig { max-width: 1100px; }

/* ---------- Testimonials ---------- */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; }
.review {
  background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 34px 30px;
  display: flex; flex-direction: column;
}
.bg-cream .review { background: #fff; }
.stars { color: var(--walnut-tx); letter-spacing: 3px; font-size: .96rem; margin-bottom: 18px; }
.review blockquote {
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.55; color: var(--ink);
  margin-bottom: 22px; flex: 1;
}
.review-who { font-size: .88rem; font-weight: 700; color: var(--ink); }
.review-who span { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; margin-top: 2px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 24px 44px 24px 0; position: relative;
  font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 1.5rem; font-weight: 300; color: var(--walnut);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 44px 26px 0; color: var(--muted); font-size: .96rem; }

/* ---------- Tool promo band (closet configurator) ---------- */
/* The configurator promo belongs to Elite, so it carries the Brass accent and
   a light ground rather than the ink panel it used to be. */
.tool-promo {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 36px; align-items: center;
  background: linear-gradient(150deg, #FFFFFF 0%, #FBF3E8 100%);
  color: var(--ink-soft);
  /* No accent tab on the left edge: the Elite signal is already carried three
     times over by the brass eyebrow, the brass button and the brass drawing,
     and a thick one-sided rule on top of that is decoration, not information. */
  border: 1px solid var(--line);
  border-radius: 4px; padding: 40px 44px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.tool-promo > * { position: relative; }
.tool-promo-art {
  width: 116px; height: 152px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 3px;
  background: #fff; padding: 8px;
}
.tool-promo-art svg { width: 100%; height: 100%; display: block; }
.tool-promo .eyebrow { color: var(--brass-dk); margin-bottom: 10px; }
.tool-promo h2 { font-size: clamp(1.55rem, 2.6vw, 2.15rem); margin-bottom: 10px; }
.tool-promo p { font-size: 1rem; color: var(--muted); max-width: 52ch; }
.tool-promo p a { color: var(--brass-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tool-promo p a:hover { color: var(--ink); }
.tool-promo .btn { white-space: nowrap; }
/* Two tools, one promo: the closet builder keeps the brass button because it
   is the older, more finished tool; the room planner sits under it in outline. */
.tool-promo-btns { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 900px) {
  .tool-promo { grid-template-columns: 1fr; text-align: center; gap: 24px; padding: 34px 26px; }
  .tool-promo-art { display: none; }
  .tool-promo p { margin: 0 auto; }
  .tool-promo .btn { width: 100%; }
}

/* ---------- CTA band ---------- */
/* Deep walnut rather than near-black. The closing band still has to hold the
   page down, but at #16130F it read as a second footer stacked on the first. */
.cta-band {
  background: #4A3218; color: #fff; text-align: center;
  padding: clamp(68px, 7.5vw, 104px) 0;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(180,124,60,.42), transparent 64%);
}
.cta-band .wrap { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: 16px; }
.cta-band p { color: #C8BCAE; max-width: 560px; margin: 0 auto 32px; font-size: 1.06rem; }
.cta-actions { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }

/* ---------- Forms ---------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow-md);
}
.form-card h2 { font-size: 1.7rem; margin-bottom: 8px; }
.form-card > p { color: var(--muted); font-size: .96rem; margin-bottom: 26px; }
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 8px;
}
.field label .req { color: var(--walnut-tx); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px;
  border: 1.5px solid var(--line-control); border-radius: 2px;
  font-family: var(--sans); font-size: .96rem; color: var(--ink);
  background: #fff; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--walnut); box-shadow: 0 0 0 3px rgba(138,115,85,.12);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: .8rem; color: var(--muted); margin-top: 16px; text-align: center; }
.form-status {
  margin-top: 18px; padding: 14px 16px; border-radius: 2px; font-size: .92rem;
  background: var(--cream); border: 1px solid var(--line); display: none;
}
.form-status.is-visible { display: block; }
/* The contact page's own consultation buttons jump here (#request); stop the
   sticky header from landing on top of the form's heading. */
#request { scroll-margin-top: 104px; }

/* ---------- Call / Text bar (phones) ----------
   A floating layer, so it earns the Lifted shadow, turned to face up. White
   at 96% with the header's blur rather than ink: the brightness budget has no
   room for a fourth dark band. Left out of Design Your Space by build.ps1,
   because that page pins its own Back / Next bar to the bottom. */
.call-bar, .call-bar-space { display: none; }
@media (max-width: 620px) {
  .call-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
    padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(140%) blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 30px rgba(26,22,17,.10);
  }
  .call-bar .btn { padding: 13px 14px; }
  .call-bar .btn:hover { transform: none; }
  .call-bar svg { width: 18px; height: 18px; flex-shrink: 0; }
  .call-bar-space { display: block; height: calc(70px + env(safe-area-inset-bottom)); background: var(--ink); }
}

/* ---------- Contact info list ---------- */
.info-list { display: flex; flex-direction: column; gap: 24px; }
.info-item { display: flex; gap: 16px; align-items: flex-start; }
.info-item svg { width: 21px; height: 21px; color: var(--walnut); flex-shrink: 0; margin-top: 4px; }
.bg-ink .info-item svg { color: var(--tan-pale); }
.info-item h3 { font-size: 1rem; font-family: var(--sans); font-weight: 700; margin-bottom: 3px; }
.bg-ink .info-item h3 { color: #fff; }
.info-item p, .info-item a { font-size: .96rem; color: var(--muted); }
.bg-ink .info-item p, .bg-ink .info-item a { color: #B4A695; }
.info-item a:hover { color: var(--walnut-tx); }
.bg-ink .info-item a:hover { color: var(--tan-pale); }

/* ---------- Service areas ---------- */
.towns {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.towns li {
  font-size: .8rem; padding: 7px 15px; border: 1px solid var(--line);
  border-radius: 40px; color: var(--muted); background: #fff;
}

/* ---------- Checklist ---------- */
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 28px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; }
.checks li svg { width: 17px; height: 17px; color: var(--walnut); flex-shrink: 0; margin-top: 5px; }
.bg-ink .checks li svg { color: var(--tan-pale); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--ink); color: #9C8F80; padding: 72px 0 0; font-size: .92rem; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 44px;
  padding-bottom: 52px;
}
.site-footer h4 {
  color: #fff; font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 20px;
}
.site-footer .logo-name { color: #fff; }
.site-footer .logo-name em { color: var(--tan); }
.site-footer .logo-sub { color: #8A7D6D; }
.footer-about p { margin: 20px 0; max-width: 320px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a:hover { color: var(--tan-pale); }
.socials { display: flex; gap: 11px; margin-top: 22px; }
.socials a {
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.socials a:hover { background: var(--walnut); border-color: var(--walnut); }
.socials svg { width: 17px; height: 17px; color: #C8BCAE; }
.socials a:hover svg { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.11); padding: 26px 0 32px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .8rem; color: #8A7D6D;
}

/* ---------- Service-area strip ----------
   A link to every town page from every page on the site. This is the
   internal linking that makes the town pages rank; without it they are
   reachable only from the service-area hub and the sitemap. Kept visually
   quiet on purpose — it is for the visitor who wants their town, and for
   the crawler, not for the design. */
.footer-towns {
  border-top: 1px solid rgba(255,255,255,.11); padding: 22px 0 4px;
  display: flex; align-items: baseline; gap: 10px 16px; flex-wrap: wrap;
  font-size: .8rem; color: #8A7D6D;
}
/* Inherits the .site-footer h4 label style — only the stacked margin has to
   go, since this heading sits inline at the start of a row. */
.footer-towns h4 { margin-bottom: 0; }
.footer-towns ul { display: flex; gap: 10px 16px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer-towns a { color: #9C8F80; text-decoration: none; transition: color .2s var(--ease); }
.footer-towns a:hover, .footer-towns a:focus-visible { color: #fff; text-decoration: underline; }
@media (max-width: 720px) {
  .footer-towns { justify-content: center; text-align: center; }
  .footer-towns ul { justify-content: center; }
}

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
/* Only hide content when JS is present to un-hide it — without this a script
   failure would leave the page blank. The `js` class is set inline in <head>. */
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* The nav carries seven top-level items now that both brands are addressable
   from it, so it needs more room than the old five did. Two thresholds, in
   order: the header phone goes first (it is a duplicate of the topbar one,
   which is visible at every width), then the whole menu becomes a drawer. */
/* Below the masthead's full width the row tightens (gaps, type, button) and
   below 1240px the menu becomes the drawer. Measured 2026-10-07 at 1241,
   1400 and 1401px: the row ends inside its gutter at all three. */
@media (max-width: 1400px) {
  .nav-phone { display: none; }
  .nav { gap: 18px; }
  .nav-menu { gap: 18px; }
  .nav-menu > li > a { font-size: .88rem; }
  .nav-actions .btn { padding: 13px 20px; font-size: .88rem; }
}

@media (max-width: 1240px) {
  /* Below this the seven items overflow, and body's overflow-x:hidden clips
     the Free Consultation button rather than revealing the overflow. */
  .nav-menu { display: none; }
  /* The empty <nav> wrapper is still a flex item, and its two gaps were
     pushing the menu button off the right edge of a phone (by 24px at 375px
     before 2026-10-07). */
  .site-header .nav > nav { display: none; }
  .nav-toggle { display: block; }
  .mobile-nav { display: block; }
  .nav { min-height: 76px; }
  .nav-actions .btn { padding: 13px 22px; font-size: .88rem; }
}
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  body { font-size: 16px; }
  .nav { min-height: 72px; }
  .nav-actions .btn { display: none; }
  .topbar-links .hide-sm { display: none; }

  .hero { min-height: 78vh; }
  .hero-inner { padding: 92px 0 88px; }
  .hero p { font-size: 1.06rem; }
  .scroll-hint { display: none; }

  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }

  /* Stacked, the words lead: six room pictures above the heading would push
     it, and the button, most of a phone screen down. */
  .cfg-teaser { grid-template-columns: 1fr; }
  .badge-stat { right: 16px; bottom: -20px; padding: 18px 22px; }

  .masonry { columns: 2; }
  .page-hero { min-height: 340px; }
  .page-hero-inner { padding: 56px 0 44px; }
}

@media (max-width: 620px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
  .topbar { font-size: .72rem; }
  .topbar .wrap { min-height: 36px; }
  .logo-name { font-size: 1.22rem; }
  /* .1em, not .18em: at .18em the sub-line was the widest thing in the
     masthead (283px) and left no room for the menu button on a 375px phone. */
  .logo-sub { font-size: .52rem; letter-spacing: .1em; }
  .nav { gap: 12px; }

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-trust { gap: 12px 20px; }
  .hero-trust li { font-size: .8rem; }

  .masonry { columns: 1; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-nav.prev { left: 8px; }
  .lightbox-nav.next { right: 8px; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .topbar, .mobile-nav, .nav-scrim, .cta-band, .site-footer, .scroll-hint,
  .call-bar, .call-bar-space { display: none; }
  .hero, .page-hero { min-height: auto; color: var(--ink); }
  .reveal { opacity: 1; transform: none; }
}