/* ============================================================
   RENOVAR CONSTRUCTION — main site
   Design: "Blueprint Bold" — white / ink / brand red (#F14C34),
   Bebas Neue condensed display + Archivo body, edge-to-edge
   real photography, drafting-label details, squared geometry.
   ============================================================ */

:root {
  --red:        #F14C34;
  --red-deep:   #D5371F;
  --red-soft:   #FCE5E0;
  --ink:        #1E1E1E;
  --ink-2:      #141416;
  --paper:      #FFFFFF;
  --paper-2:    #F6F5F2;
  --mut:        #5F5C58;
  --mut-dark:   #A8A49E;   /* muted text on ink */
  --line:       rgba(30, 30, 30, 0.16);
  --line-dark:  rgba(255, 255, 255, 0.16);
  --display:    "Bebas Neue", "Arial Narrow", sans-serif;
  --body:       "Archivo", "Helvetica Neue", Arial, sans-serif;
  --maxw:       1280px;
  --gut:        clamp(20px, 4.5vw, 56px);
  --header-h:   76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--red); color: #fff; }
html { scroll-padding-top: calc(var(--header-h) + 12px); } /* keep section eyebrows clear of the sticky header on anchor jumps */

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

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

/* ---------- Type ---------- */
.d-hero, .d-xl, .d-lg, .d-md {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0.012em;
  text-transform: uppercase;
}
.d-hero { font-size: clamp(3.4rem, 8vw, 6.2rem); }
/* Desktop: tighter hero type so the CTA row clears the fold on short viewports (1366×768 etc.) */
@media (min-width: 761px) {
  .d-hero { line-height: 0.88; }
}
/* Short desktop viewports (720–760px tall laptops): step the hero down one more notch */
@media (min-width: 761px) and (max-height: 760px) {
  .d-hero { font-size: clamp(3rem, 6.6vw, 5.2rem); }
}
.d-xl   { font-size: clamp(2.9rem, 6.5vw, 5.4rem); }
.d-lg   { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.d-md   { font-size: clamp(1.7rem, 3.2vw, 2.5rem); letter-spacing: 0.02em; }

.d-hero em, .d-xl em, .d-lg em, .d-md em { font-style: normal; color: var(--red); }
.on-dark .d-xl em, .on-dark .d-lg em { color: var(--red); }

.eyebrow {
  display: inline-flex;
  align-items: flex-start; /* multi-line text wraps under itself, not centered against the chevron */
  gap: 12px;
  margin-bottom: 0.5em;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow::before {
  content: "";
  width: 14px; height: 14px;
  margin-top: 3px; /* optical alignment with the cap-height of line 1 now that align-items is flex-start */
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 50% 100%);   /* faceted-logo chevron */
  flex: none;
}
.eyebrow.on-dark { color: #fff; text-shadow: 0 1px 14px rgba(20, 20, 22, 0.55); } /* legibility insurance over photos */

@media (max-width: 520px) {
  .eyebrow { font-size: 0.66rem; letter-spacing: 0.14em; gap: 8px; }
  .eyebrow::before { width: 11px; height: 11px; margin-top: 2px; }
}

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.65;
  color: var(--mut);
  max-width: 62ch;
}
.on-dark .lede { color: var(--mut-dark); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.section { padding: clamp(72px, 9vw, 128px) 0; }
.section-tight { padding: clamp(56px, 7vw, 96px) 0; }
.section-ink { background: var(--ink); color: #fff; }
.section-paper2 { background: var(--paper-2); }

.section-head { max-width: 880px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .d-xl, .section-head .d-lg { margin-top: 18px; }
.section-head .lede { margin-top: 18px; }

.index-no {
  font-family: var(--display);
  font-size: 1.25em;
  color: var(--red-deep); /* on white: deeper red passes WCAG AA */
  margin-right: 0.18em;
}
.on-dark .index-no { color: var(--red); } /* on dark: keep brighter red (higher contrast) */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  font-family: var(--body);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 2px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform 0.2s ease; }
.btn:hover svg { transform: translateX(4px); }

/* Brand-faithful primary: red field, near-black text (matches live brand; AA-large) */
.btn-red { background: var(--red); color: var(--ink-2); border-color: var(--red); }
.btn-red:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }

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

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.65); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn-ghost-ink { background: transparent; color: var(--ink); border-color: rgba(30,30,30,0.4); }
.btn-ghost-ink:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ---------- Header ---------- */
.site-header { /* z-index raised above .mobile-menu so the toggle/close-X stays clickable */
  position: sticky;
  top: 0;
  z-index: 130;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(20, 20, 22, 0.09); }
.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: auto; height: 42px; }

.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav-links a {
  position: relative;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--red);
  transition: right 0.22s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right: 0; }

.header-cta { padding: 12px 22px; }
.header-actions { display: flex; align-items: center; gap: 12px; }

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 2px solid var(--red);
  border-radius: 2px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--red-deep);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav-phone svg { width: 15px; height: 15px; flex: none; }
.nav-phone:hover { background: var(--red); border-color: var(--red); color: var(--ink-2); }

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px; height: 44px;
  position: relative;
  z-index: 130;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 8px;
  width: 28px; height: 3px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.2s ease;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { left: 0; top: -9px; }
.nav-toggle span::after { left: 0; top: 9px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(9px) rotate(45deg); background: var(--ink); }
body.nav-open .nav-toggle span::after { transform: translateY(-9px) rotate(-45deg); background: var(--ink); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--ink-2);
  padding: calc(var(--header-h) + 24px) var(--gut) 40px;
  flex-direction: column;
  gap: 6px;
}
body.nav-open .mobile-menu { display: flex; }
body.nav-open { overflow: hidden; }
.mobile-menu a,
.mobile-menu .mm-acc-btn {
  font-family: var(--display);
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-dark);
  line-height: 1.1;
}
.mobile-menu a:hover,
.mobile-menu .mm-acc-btn:hover { color: var(--red); }

/* "What We Build" — a link-styled accordion toggle */
.mobile-menu .mm-acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mm-chev {
  width: 0.62em;
  height: 0.62em;
  flex: none;
  color: var(--red);
  transition: transform 0.28s ease;
}
.mm-acc-btn[aria-expanded="true"] .mm-chev { transform: rotate(180deg); }
/* Collapsible panel. The clip lives on the panel (which has no padding) so the
   padded .mm-sub collapses to a true 0 — clipping .mm-sub itself would leave a
   sliver equal to its own padding. max-height (generous cap over the real
   content height) is used rather than the grid 0fr->1fr trick, whose fr track
   resolves to 0 for this auto-height flex item. */
.mm-acc-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.mm-acc-btn[aria-expanded="true"] + .mm-acc-panel { max-height: 460px; }
.mobile-menu .mm-cta {
  /* restore button styling — .mobile-menu a's display typography must not cascade in */
  margin-top: 12px;
  border-bottom: 0;
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 18px 30px;
  justify-content: center;
  text-align: center;
  align-self: stretch;
}
.mobile-menu .mm-phone {
  /* same cascade-reset as .mm-cta: keep menu-link display typography out */
  margin-top: 28px;
  border-bottom: 0;
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 16px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: stretch;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  color: #fff;
  text-transform: uppercase;
}
.mobile-menu .mm-phone svg { width: 16px; height: 16px; flex: none; }
.mobile-menu .mm-phone:hover { border-color: #fff; color: #fff; }
.mobile-menu .mm-note {
  margin-top: auto;
  color: var(--mut-dark);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .nav-links, .header-cta, .nav-phone { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background: var(--ink-2);
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: heroZoom 9s ease-out forwards;
}
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(14,14,16,0.92) 0%, rgba(14,14,16,0.66) 38%, rgba(14,14,16,0.44) 68%, rgba(14,14,16,0.48) 100%);
}
.hero-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(90px, 14vh, 150px) var(--gut) clamp(48px, 7vh, 84px);
  color: #fff;
}
.hero h1 { color: #fff; max-width: 14ch; text-shadow: 0 1px 12px rgba(0,0,0,0.28); } /* white already high-contrast: keep shadow light */
.hero h1 em { font-style: normal; color: var(--red); text-shadow: 0 1px 9px rgba(0,0,0,0.4), 0 2px 26px rgba(0,0,0,0.34); } /* red lower-contrast: more shadow */
.hero-sub {
  margin-top: 22px;
  max-width: 54ch;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
}
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-strip {
  margin-top: clamp(36px, 6vh, 60px);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.28);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 44px;
}
.hero-strip span {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-strip span::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  flex: none;
}

@media (max-width: 760px) {
  /* Relax the svh lock so Safari's dynamic address/tab bars can't cram hero
     content — let the hero size to its content with generous padding instead. */
  .hero { min-height: auto; }
  .hero-inner { padding: clamp(56px, 13vh, 88px) var(--gut) 48px; }
  /* On mobile the headline sits high in the photo (bright sky zone) — the
     desktop bottom-weighted scrim leaves it thin. Use an even, stronger scrim. */
  .hero::after {
    background:
      linear-gradient(to bottom, rgba(14,14,16,0.66) 0%, rgba(14,14,16,0.52) 45%, rgba(14,14,16,0.9) 100%);
  }
  .hero h1 { text-shadow: 0 1px 14px rgba(0,0,0,0.32); }
  .hero h1 em { text-shadow: 0 1px 10px rgba(0,0,0,0.48), 0 2px 24px rgba(0,0,0,0.36); }
  .hero-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 30px;
  }
  .hero-strip span { letter-spacing: 0.14em; font-size: 0.78rem; }
}

/* Hero load stagger */
[data-hero] { opacity: 0; transform: translateY(26px); animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
[data-hero="1"] { animation-delay: 0.15s; }
[data-hero="2"] { animation-delay: 0.3s; }
[data-hero="3"] { animation-delay: 0.48s; }
[data-hero="4"] { animation-delay: 0.64s; }
[data-hero="5"] { animation-delay: 0.8s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-reveal].in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: 0.12s; }
[data-delay="2"] { transition-delay: 0.24s; }
[data-delay="3"] { transition-delay: 0.36s; }

/* ---------- What we build: edge-to-edge photo panels ---------- */
.build-panels { display: grid; gap: 8px; }
.build-panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 46vw, 560px);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  background: var(--ink-2);
}
.build-panel.tall { min-height: clamp(420px, 52vw, 640px); }
.build-panel img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.build-panel::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(12,12,14,0.92) 0%, rgba(12,12,14,0.62) 38%, rgba(12,12,14,0.18) 70%, rgba(12,12,14,0.08) 100%);
  transition: background-color 0.3s ease;
}
.build-panel:hover img { transform: scale(1.045); }
.bp-body { padding: clamp(24px, 3.5vw, 44px); color: #fff; width: 100%; }
.bp-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #FF7A63;   /* lightened brand red for on-photo legibility */
  text-shadow: 0 1px 8px rgba(0,0,0,0.75);
  display: block;
}
.bp-title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin-top: 8px;
  text-shadow: 0 2px 22px rgba(0,0,0,0.45);
}
.bp-half .bp-title { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.bp-sub { margin-top: 10px; max-width: 52ch; color: rgba(255,255,255,0.93); font-size: 0.99rem; }
.bp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.bp-link .bp-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: var(--red);
  color: var(--ink-2);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.bp-link .bp-box svg { width: 15px; height: 15px; }
.build-panel:hover .bp-box { transform: translateX(5px); }
.build-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 760px) {
  .build-row-2 { grid-template-columns: 1fr; }
  .build-panel, .build-panel.tall { min-height: 380px; }
  .build-panel::after {
    background: linear-gradient(to top, rgba(12,12,14,0.94) 0%, rgba(12,12,14,0.72) 45%, rgba(12,12,14,0.32) 78%, rgba(12,12,14,0.16) 100%);
  }
}

/* ---------- Featured projects (ink band, zero-gutter grid) ---------- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.pj-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  text-decoration: none;
  isolation: isolate;
  background: #26262a;
}
.pj-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pj-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,12,0.86) 0%, rgba(10,10,12,0.28) 40%, rgba(10,10,12,0) 65%);
}
.pj-card:hover img { transform: scale(1.05); }
.pj-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 18px 20px;
  color: #fff;
}
.pj-meta .pj-addr {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}
.pj-meta .pj-loc {
  display: block;
  margin-top: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
@media (max-width: 900px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .projects-grid { grid-template-columns: 1fr; } .pj-card { aspect-ratio: 3 / 2; } }

/* ---------- Spotlight (featured build w/ specs) ---------- */
.spotlight {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.spot-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spot-photos .main { grid-column: 1 / -1; border: 1px solid var(--line); }
.spot-photos img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--line); }
.spot-photos .main img { aspect-ratio: 3 / 2; }
.spot-photos .sub img { aspect-ratio: 4 / 3; }
.spec-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.spec {
  border: 1px solid var(--line);
  padding: 14px 18px;
  min-width: 108px;
}
.spec b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink);
}
.spec span {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mut);
}
@media (max-width: 880px) { .spotlight { grid-template-columns: 1fr; } }

/* ---------- Stats / positioning ---------- */
.pos-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.pos-grid .lede + p { margin-top: 16px; color: var(--mut); }
.pos-grid p + p { margin-top: 16px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 36px; }
.stat {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 22px 20px;
}
.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--red);
}
.stat span {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 880px) {
  .pos-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) { .stat-row { grid-template-columns: 1fr; } }

/* ---------- Process ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.step {
  border: 1px solid var(--line-dark);
  padding: clamp(22px, 2.6vw, 34px);
  background: rgba(255,255,255,0.02);
}
.step-num {
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--red);
  display: block;
}
.step h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 14px;
  color: #fff;
}
.step p { margin-top: 10px; font-size: 0.95rem; color: var(--mut-dark); }
@media (max-width: 900px) { .process-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .process-grid { grid-template-columns: 1fr; } }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.partner {
  border: 1px solid var(--line);
  background: var(--paper);
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 24px;
  padding: clamp(22px, 2.6vw, 34px);
  align-items: start;
}
.partner .headshot {
  width: 168px; height: 168px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.p-role {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-deep); /* on white: deeper red passes WCAG AA */
}
.partner h3 {
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  text-transform: uppercase;
  margin-top: 6px;
}
.p-sub { font-size: 0.86rem; font-weight: 600; color: var(--mut); margin-top: 6px; }
.partner .bio { margin-top: 12px; font-size: 0.95rem; color: var(--mut); }
@media (max-width: 1020px) { .team-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .partner { grid-template-columns: 1fr; }
  .partner .headshot { width: 128px; height: 128px; }
}

.values-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.value {
  border: 1px solid var(--line);
  padding: 18px;
  background: var(--paper);
}
.value b {
  display: block;
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.value span { display: block; margin-top: 6px; font-size: 0.84rem; color: var(--mut); line-height: 1.5; }
@media (max-width: 1020px) { .values-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .values-row { grid-template-columns: 1fr; } }

/* ---------- Testimonial ---------- */
.quote-band { text-align: left; max-width: 900px; }
.quote-band blockquote {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.5;
  font-weight: 500;
  color: #fff;
}
.quote-band .mark {
  font-family: var(--display);
  font-size: 5rem;
  line-height: 0.6;
  color: var(--red);
  display: block;
  margin-bottom: 18px;
}
.quote-band .cite {
  margin-top: 22px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mut-dark);
}
.quote-band .cite b { color: #fff; }

/* ---------- Contact / quote ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.info-list { margin-top: 34px; display: grid; gap: 0; border: 1px solid var(--line-dark); }
.info-item { padding: 18px 22px; }
.info-item + .info-item { border-top: 1px solid var(--line-dark); }
.info-item .lab {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
.info-item p, .info-item a { color: #fff; font-size: 1rem; margin-top: 5px; display: inline-block; }
.info-item a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); }
.info-item a:hover { border-color: var(--red); color: var(--red); }
.socials { display: flex; gap: 14px; margin-top: 8px; }
.socials a { display: inline-flex; padding: 6px; color: rgba(255,255,255,0.8); }
.socials a:hover { color: var(--red); }
.socials svg { width: 21px; height: 21px; }

.quote-form {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(26px, 3.4vw, 44px);
  border: 1px solid var(--line);
}
.quote-form h3 {
  font-family: var(--display);
  font-size: 1.9rem;
  text-transform: uppercase;
  line-height: 1;
}
.quote-form .form-note { margin-top: 8px; font-size: 0.92rem; color: var(--mut); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.field label .req { color: var(--red); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 13px 14px;
  width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--red);
  outline-offset: 0;
  border-color: var(--red);
}
.quote-form .btn { margin-top: 24px; width: 100%; justify-content: center; }
.form-fallback { margin-top: 14px; font-size: 0.85rem; color: var(--mut); text-align: center; }
.form-fallback a { color: var(--ink); font-weight: 600; }
@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  isolation: isolate;
  padding: clamp(84px, 12vw, 160px) 0;
  background: var(--ink-2);
}
.cta-band .media { position: absolute; inset: 0; z-index: -2; }
.cta-band .media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(14,14,16,0.72);
}
.cta-band .wrap { text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band .btn { margin-top: 32px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-2); color: #fff; padding: clamp(56px, 7vw, 88px) 0 36px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.footer-brand img { height: 44px; width: auto; }
.footer-brand .fb-word {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff;
}
.footer-brand .fb-word span { display: block; font-size: 0.85rem; letter-spacing: 0.42em; color: var(--mut-dark); }
.footer-blurb { margin-top: 18px; font-size: 0.93rem; color: var(--mut-dark); max-width: 40ch; }
.footer-col h4 {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 5px 0;
}
.footer-col a:hover { color: var(--red); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding-top: 26px;
  font-size: 0.82rem;
  color: var(--mut-dark);
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; } }

/* ============================================================
   GALLERY PAGE
   ============================================================ */
.gal-hero {
  position: relative;
  isolation: isolate;
  background: var(--ink-2);
  padding: clamp(72px, 10vw, 130px) 0;
}
.gal-hero .media { position: absolute; inset: 0; z-index: -2; }
.gal-hero .media img { width: 100%; height: 100%; object-fit: cover; }
.gal-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(14,14,16,0.9) 25%, rgba(14,14,16,0.55) 100%);
}
.gal-hero h1 { color: #fff; margin-top: 16px; }
.gal-hero .lede { color: rgba(255,255,255,0.88); margin-top: 16px; }

.filter-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-row .count {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mut);
}
@media (max-width: 700px) {
  .filter-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .filter-row::-webkit-scrollbar { display: none; }
  .fbtn { white-space: nowrap; flex: none; }
  .filter-row .count { flex: none; padding-left: 10px; }
}
.fbtn {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  padding: 10px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.fbtn:hover { border-color: var(--ink); }
.fbtn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.fbtn[aria-pressed="true"]::before { content: "▾ "; color: var(--red); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.g-tile {
  border: 1px solid var(--line);
  background: var(--paper);
  text-align: left;
  padding: 0;
  cursor: zoom-in;
  display: flex;
  flex-direction: column;
}
.g-tile .ph { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #e8e6e2; }
.g-tile .ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.g-tile:hover .ph img { transform: scale(1.05); }
.g-tile .album-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
}
.g-tile figcaption {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.g-tile .addr {
  font-family: var(--display);
  font-size: 1.18rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.05;
}
.g-tile .loc {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mut);
  white-space: nowrap;
}
.g-tile.hidden { display: none; }
@media (max-width: 980px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: 1fr; } }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  background: rgba(10,10,12,0.94);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox.open { display: flex; }
/* Sticky header can paint above the fixed lightbox overlay in some browsers'
   compositing order despite its lower z-index — hide it outright while open. */
body.lb-open .site-header { visibility: hidden; }
.lb-img {
  max-width: min(1100px, 92vw);
  max-height: 74vh;
  object-fit: contain;
  border: 1px solid var(--line-dark);
  background: #000;
}
.lb-caption {
  margin-top: 16px;
  color: #fff;
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.lb-sub { color: var(--mut-dark); font-family: var(--body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.16em; display: block; margin-top: 4px; }
.lb-btn {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line-dark);
  color: #fff;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
}
.lb-btn:hover { background: var(--red); color: var(--ink-2); border-color: var(--red); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
  .lb-btn { width: 44px; height: 44px; }
}

/* ---------- Motion guard ---------- */
/* QA/no-JS override: append ?noanim to the URL to render everything visible immediately */
.no-anim [data-hero], .no-anim [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.no-anim .hero-media img { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-hero], [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   SITE EXPANSION — service pages, project details, blog, about
   (extends "Blueprint Bold"; same tokens, no restyling of the above)
   ============================================================ */

/* ---------- Header dropdown (What We Build) ---------- */
.nav-item { position: relative; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 6px 0;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
}
.nav-drop-btn svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.nav-drop-btn::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--red);
  transition: right 0.22s ease;
}
.nav-item:hover .nav-drop-btn::after,
.nav-item.open .nav-drop-btn::after,
.nav-item.is-current .nav-drop-btn::after { right: 0; }
.drop-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 260px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(20, 20, 22, 0.14);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 140;
}
.drop-panel::before { /* hover bridge so the panel doesn't close crossing the gap */
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}
.nav-item:hover .drop-panel,
.nav-item.open .drop-panel,
.nav-item:focus-within .drop-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.drop-panel a {
  display: block;
  padding: 10px 22px;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.drop-panel a:hover, .drop-panel a[aria-current="page"] { background: var(--paper-2); color: var(--red-deep); }
.drop-panel .drop-ext { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; color: var(--mut); }

/* Mobile menu: services sub-list */
.mobile-menu { overflow-y: auto; }
/* Inner grid of service links — clipped so the panel can collapse to 0.
   visibility keeps the links out of tab order + a11y tree when collapsed. */
.mm-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 18px;
  padding: 6px 0 10px;
  visibility: hidden; /* keeps collapsed links out of tab order + a11y tree */
  transition: visibility 0.3s ease;
}
.mm-acc-btn[aria-expanded="true"] + .mm-acc-panel .mm-sub { visibility: visible; }
.mm-sub a {
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 0;
  line-height: 1.3;
}
.mm-sub a:hover { color: var(--red); }

/* ---------- Breadcrumbs ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.crumbs a { color: inherit; opacity: 0.72; text-decoration: none; }
.crumbs a:hover { opacity: 1; color: var(--red); }
.crumbs span[aria-current] { opacity: 0.95; }
.crumbs .c-sep { color: var(--red); opacity: 0.9; }
.gal-hero .crumbs, .pd-hero .crumbs, .svc-hero .crumbs { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.section .crumbs, .section-tight .crumbs { color: var(--mut); }

/* ---------- Inline link helpers ---------- */
.text-link { color: var(--red-deep); font-weight: 700; text-decoration: none; border-bottom: 2px solid rgba(213,55,31,0.35); }
.text-link:hover { border-color: var(--red-deep); }
.plain-link { text-decoration: none; color: inherit; }
.plain-link:hover { color: var(--red-deep); }

/* ---------- Homepage service strip ---------- */
.svc-strip {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.svc-strip a {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  padding: 16px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.svc-strip a::before {
  content: "";
  width: 10px; height: 10px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  flex: none;
}
.svc-strip a:hover { border-color: var(--ink); color: var(--red-deep); }
@media (max-width: 1020px) { .svc-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-strip { grid-template-columns: 1fr; } }

/* ---------- Team: 3-up grid + testimonials ---------- */
.team-grid-3 { grid-template-columns: repeat(3, 1fr); }
.team-grid-3 .partner { grid-template-columns: 1fr; gap: 18px; }
.team-grid-3 .partner .headshot { width: 148px; height: 148px; }
@media (max-width: 1020px) { .team-grid-3 { grid-template-columns: 1fr; } .team-grid-3 .partner { grid-template-columns: 168px 1fr; } }
@media (max-width: 560px) { .team-grid-3 .partner { grid-template-columns: 1fr; } }

.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.t-card {
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,0.02);
  padding: clamp(20px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.t-card blockquote { font-size: 0.97rem; line-height: 1.6; color: rgba(255,255,255,0.92); }
.t-card blockquote::before { content: "\201C"; font-family: var(--display); font-size: 2.2rem; line-height: 0.4; color: var(--red); display: block; margin-bottom: 12px; }
.t-card figcaption { margin-top: auto; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut-dark); }
.t-card figcaption b { color: #fff; display: block; }
@media (max-width: 900px) { .t-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .t-grid { grid-template-columns: 1fr; } }

/* ---------- Service page hero ---------- */
.svc-hero, .pd-hero {
  position: relative;
  isolation: isolate;
  background: var(--ink-2);
  display: flex;
  align-items: flex-end;
  min-height: clamp(480px, 62vh, 640px);
}
.svc-hero .media, .pd-hero .media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.svc-hero .media img, .pd-hero .media img { width: 100%; height: 100%; object-fit: cover; }
.svc-hero::after, .pd-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* Top-weighted, dual scrim: the H1/eyebrow/breadcrumb block sits high in the hero
     (large display type routinely pushes total content height past min-height, which
     defeats the flex-end bottom alignment), so the darkest scrim needs to be at the
     TOP, not the bottom, to keep white text legible against bright photo regions. */
  background: linear-gradient(to bottom, rgba(14,14,16,0.80) 0%, rgba(14,14,16,0.76) 68%, rgba(14,14,16,0.58) 90%, rgba(14,14,16,0.68) 100%);
}
.svc-hero .wrap, .pd-hero .wrap {
  width: 100%;
  color: #fff;
  padding-top: clamp(64px, 9vh, 110px);
  padding-bottom: clamp(44px, 6vh, 72px);
}
.svc-hero h1, .pd-hero h1 { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,0.26); } /* white: light */
.svc-hero h1 em, .pd-hero h1 em { text-shadow: 0 1px 9px rgba(0,0,0,0.4), 0 2px 26px rgba(0,0,0,0.34); } /* red: more */
.pd-loc {
  margin-top: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
@media (max-width: 760px) {
  .svc-hero::after, .pd-hero::after {
    background: linear-gradient(to bottom, rgba(14,14,16,0.84) 0%, rgba(14,14,16,0.80) 75%, rgba(14,14,16,0.62) 92%, rgba(14,14,16,0.70) 100%);
  }
}

.svc-body p { color: var(--mut); }
.svc-body p + p { margin-top: 16px; }
.svc-body p:first-child { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.65; color: var(--ink); font-weight: 500; }

.values-auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.values-dark .value { border-color: var(--line-dark); background: rgba(255,255,255,0.02); }
.values-dark .value b { color: #fff; }
.values-dark .value span { color: var(--mut-dark); }

.callout {
  margin-top: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--paper-2);
  padding: clamp(20px, 2.6vw, 30px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.callout p { max-width: 58ch; color: var(--mut); }
.callout b { color: var(--ink); }

.fineprint { margin-top: clamp(26px, 3vw, 40px); font-size: 0.85rem; color: var(--mut); max-width: 68ch; }
.fineprint b { color: var(--ink); }

/* ---------- Remodeling categories ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.cat-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  background: #26262a;
}
.cat-tile.cat-wide { grid-column: span 2; aspect-ratio: auto; }
.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.cat-tile:hover img { transform: scale(1.05); }
.cat-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,12,0.82) 0%, rgba(10,10,12,0.2) 44%, rgba(10,10,12,0) 66%);
}
.cat-tile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 18px 20px;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}
@media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr 1fr; } .cat-tile.cat-wide { grid-column: span 2; aspect-ratio: 16 / 9; } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } .cat-tile.cat-wide { grid-column: span 1; aspect-ratio: 4 / 3; } }

/* ---------- Plan cards (factory build) ---------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.plan-grid-2 { grid-template-columns: repeat(2, 1fr); }
.plan-card {
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.plan-ph { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.plan-ph img { width: 100%; height: 100%; object-fit: cover; }
.plan-body { padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan-body h3 {
  font-family: var(--display);
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.plan-specs {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.plan-desc { font-size: 0.93rem; color: var(--mut); }
.plan-pdf {
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.plan-pdf:hover { color: var(--red-deep); }
@media (max-width: 980px) { .plan-grid, .plan-grid-2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .plan-grid, .plan-grid-2 { grid-template-columns: 1fr; } }

/* ---------- Project detail ---------- */
.pd-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
}
.pd-desc { margin-top: 22px; }
.pd-desc p { color: var(--mut); }
.pd-desc p + p { margin-top: 16px; }
.pd-desc p:first-child { font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.65; color: var(--ink); font-weight: 500; }
.pd-copy .spec-row { margin-top: 30px; }
.pd-facts { position: sticky; top: calc(var(--header-h) + 24px); }
.facts-card { border: 1px solid var(--line); background: var(--paper-2); padding: clamp(22px, 2.6vw, 32px); }
.facts-card h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.fact { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.fact .f-lab { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mut); padding-top: 3px; }
.fact .f-val { font-weight: 600; font-size: 0.95rem; text-align: right; }
@media (max-width: 880px) { .pd-grid { grid-template-columns: 1fr; } .pd-facts { position: static; } }

/* ---------- Photo grid + lightbox tiles ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.photo-grid.pg-3 { grid-template-columns: repeat(3, 1fr); }
.pg-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #26262a;
  cursor: zoom-in;
  padding: 0;
  border: 0;
}
.pg-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1), opacity 0.3s ease; }
.pg-item:hover img, .pg-item:focus-visible img { transform: scale(1.04); opacity: 0.88; }
@media (max-width: 1020px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .photo-grid, .photo-grid.pg-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .photo-grid, .photo-grid.pg-3 { grid-template-columns: 1fr; } .pg-item { aspect-ratio: 3 / 2; } }

/* ---------- Prev / next ---------- */
.prevnext { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.pn-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.pn { display: flex; flex-direction: column; gap: 4px; padding: 22px 8px; text-decoration: none; min-width: 0; }
.pn-prev { align-items: flex-start; text-align: left; }
.pn-all { align-items: center; text-align: center; border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding-left: 26px; padding-right: 26px; }
.pn-next { align-items: flex-end; text-align: right; grid-column: 3; }
.pn-lab { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mut); }
.pn-name {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pn:hover .pn-name { color: var(--red-deep); }
@media (max-width: 640px) {
  .pn-row { grid-template-columns: 1fr 1fr; }
  .pn-all { display: none; }
  .pn-next { grid-column: 2; }
  .pn-name { white-space: normal; font-size: 1rem; }
}

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 8px; }
.faq { border: 1px solid var(--line); background: var(--paper); }
.section-ink .faq { border-color: var(--line-dark); background: rgba(255,255,255,0.02); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red-deep); }
.section-ink .faq summary { color: #fff; }
.faq-x { position: relative; width: 16px; height: 16px; flex: none; }
.faq-x::before, .faq-x::after {
  content: "";
  position: absolute;
  background: var(--red);
  transition: transform 0.22s ease;
}
.faq-x::before { left: 0; right: 0; top: 7px; height: 2px; }
.faq-x::after { top: 0; bottom: 0; left: 7px; width: 2px; }
.faq[open] .faq-x::after { transform: scaleY(0); }
.faq p { padding: 0 22px 20px; color: var(--mut); max-width: 72ch; }
.section-ink .faq p { color: var(--mut-dark); }

/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.post-card {
  border: 1px solid var(--line);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.post-card .ph { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.post-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1); }
.post-card:hover .ph img { transform: scale(1.05); }
.pc-body { padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pc-date { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-deep); }
.post-card h2 {
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.post-card:hover h2 { color: var(--red-deep); }
.pc-ex { font-size: 0.92rem; color: var(--mut); }
.pc-body .text-link { margin-top: auto; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 0; }
@media (max-width: 980px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }

.byline { margin-top: 14px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); }
.post-cover { margin-top: 26px; border: 1px solid var(--line); }
.post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-body { margin-top: clamp(26px, 4vw, 40px); }
.article-body p { color: var(--ink); font-size: 1.04rem; line-height: 1.75; }
.article-body p + p { margin-top: 18px; }
.article-body a { color: var(--red-deep); }

/* ---------- Team bio page ---------- */
.bio-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: center;
  margin-top: 10px;
}
.bio-photo { width: 220px; height: 220px; object-fit: cover; border: 1px solid var(--line); }
.bio-body { margin-top: clamp(28px, 4vw, 44px); max-width: 72ch; }
.bio-body p { color: var(--ink); line-height: 1.75; }
.bio-body p + p { margin-top: 18px; }
.bio-others { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--mut); }
@media (max-width: 640px) {
  .bio-head { grid-template-columns: 1fr; }
  .bio-photo { width: 168px; height: 168px; }
}

/* ---------- Footer: 4 columns ---------- */
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
@media (max-width: 1020px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- CTA band heading em ---------- */
.cta-band h2 em { font-style: normal; color: var(--red); }

/* Article headings reconstructed from the Wix export */
.article-body h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-top: clamp(28px, 4vw, 40px);
}
.article-body h2 + p { margin-top: 12px; }

/* Gallery tiles are links now (they navigate to project pages) */
a.g-tile { text-decoration: none; cursor: pointer; }
a.g-tile:hover .addr { color: var(--red-deep); }

/* Desktop (full nav visible, >900px): tighten the gap between the header and the
   hero eyebrow across all hero variants. Placed at end of file so it wins on
   source order over the base hero rules above (media queries add no specificity).
   Mobile/tablet spacing is unchanged. */
@media (min-width: 901px) {
  .hero-inner { padding-top: clamp(60px, 8vh, 96px); }
  .svc-hero .wrap, .pd-hero .wrap { padding-top: clamp(44px, 6vh, 72px); }
  /* Short-content heroes (project detail pages) bottom-pin against min-height, so
     trimming it is what actually lifts their eyebrow toward the nav. */
  .svc-hero, .pd-hero { min-height: clamp(420px, 54vh, 560px); }
  .gal-hero { padding-top: clamp(52px, 6.5vw, 92px); }
}