:root {
  color-scheme: only light;
  --jh-white: #fbfaf6;
  --jh-warm-white: #f7f4ee;
  --jh-ivory: #f1ede5;
  --jh-concrete-light: #deddd8;
  --jh-concrete-soft: #d3d1cb;
  --jh-concrete-line: #c4c1ba;
  --jh-charcoal: #191918;
  --jh-ink-soft: #393733;
  --jh-brass: #8f642e;
  --jh-brass-dark: #704c24;
  --jh-wood-light: #d7b68e;
  --jh-success: #355b45;
  --jh-error: #8b3a32;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-sans: "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;
  --focus: 0 0 0 3px rgba(167, 123, 61, 0.35);
  --line: rgba(25, 25, 24, 0.13);
  --shadow-panel: 0 22px 64px rgba(38, 33, 25, 0.12);
}

* { box-sizing: border-box; }
html {
  background: var(--jh-white);
  color-scheme: only light;
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}
body {
  margin: 0;
  background: var(--jh-white);
  color: var(--jh-charcoal);
  color-scheme: only light;
  font-family: var(--font-sans);
  line-height: 1.62;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  text-rendering: optimizeLegibility;
}
body.nav-open { overflow: hidden; }
body, button, input, select, textarea { font: 400 1rem/1.62 var(--font-sans); }
button, input, select, textarea {
  color: var(--jh-charcoal);
  color-scheme: only light;
}
input, select, textarea { accent-color: var(--jh-brass); }
a { color: inherit; text-underline-offset: 0.24em; }
a:hover { color: var(--jh-brass-dark); }
button { cursor: pointer; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
img, video {
  -webkit-user-drag: none;
  user-select: none;
}
:focus-visible { outline: none; box-shadow: var(--focus); }
.skip-link {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 1000;
  transform: translateY(-160%); background: var(--jh-charcoal); color: var(--jh-white);
  padding: 0.75rem 1rem;
}
.skip-link:focus { transform: translateY(0); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.container { width: min(calc(100% - (var(--gutter) * 2)), var(--container)); max-width: 100%; min-width: 0; margin-inline: auto; }
.section-pad { padding-block: clamp(4rem, 8vw, var(--space-8)); }
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--jh-white);
  border-bottom: 1px solid var(--line);
  color: var(--jh-charcoal);
}
.header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.8rem, 2.5vw, 2rem);
}
.brand-lockup { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { width: clamp(84px, 7vw, 108px); height: auto; }
.footer-brand .brand-logo { width: clamp(135px, 14vw, 210px); }
.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.8rem, 2vw, 1.75rem);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.nav-details { position: relative; }
.nav-details summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  list-style: none;
  cursor: pointer;
}
.nav-details summary::-webkit-details-marker { display: none; }
.nav-details summary::after {
  content: ""; width: 0.45rem; height: 0.45rem; margin-left: 0.45rem;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-0.16rem) rotate(45deg);
}
.nav-submenu {
  position: absolute; top: calc(100% + 0.8rem); left: 0; z-index: 55;
  min-width: 286px;
  display: grid;
  padding: 0.65rem;
  border: 1px solid var(--line);
  background: var(--jh-white);
  color: var(--jh-charcoal);
  box-shadow: var(--shadow-panel);
}
.nav-submenu a { padding: 0.7rem 0.78rem; }
.nav-submenu a:hover { background: rgba(167, 123, 61, 0.1); color: var(--jh-charcoal); }
.nav-cta, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid transparent;
  padding: 0.86rem 1.15rem;
  background: var(--jh-white);
  color: var(--jh-charcoal);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-cta, .button-primary { background: var(--jh-brass); color: var(--jh-white); }
.nav-cta:hover, .button-primary:hover { background: var(--jh-brass-dark); color: var(--jh-white); }
.button-secondary { border-color: var(--jh-brass); background: rgba(251, 250, 246, 0.35); color: var(--jh-charcoal); }
.button-secondary:hover { background: rgba(167, 123, 61, 0.12); color: var(--jh-charcoal); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-5) var(--space-3); }
.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  background: var(--jh-white);
  color: var(--jh-charcoal);
}
.menu-toggle-lines, .menu-toggle-lines::before, .menu-toggle-lines::after {
  display: block; width: 23px; height: 2px; margin-inline: auto; background: var(--jh-charcoal); content: "";
}
.menu-toggle-lines::before { transform: translateY(-7px); }
.menu-toggle-lines::after { transform: translateY(5px); }
h1, h2, h3 {
  margin: 0;
  color: var(--jh-charcoal);
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0;
  overflow-wrap: break-word;
}
h1 { max-width: 12.5ch; font-size: clamp(2.7rem, 5.7vw, 6.1rem); line-height: 0.96; }
.home-hero h1 { max-width: 13.5ch; font-size: clamp(2.65rem, 4.6vw, 4.95rem); }
h2 { font-size: clamp(2rem, 3.55vw, 4.1rem); line-height: 1.04; }
h3 { font-size: clamp(1.25rem, 1.6vw, 1.75rem); line-height: 1.13; }
p { margin: 0; }
.eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--jh-brass-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.eyebrow.light, .light .eyebrow { color: #d4aa6d; }
.brass-rule { width: 74px; height: 2px; margin-block: var(--space-4); background: var(--jh-brass); }
.hero-lede, .section-copy, .body-copy, .section-heading p, .microcopy, .service-card p, .material-card p, .white-card-grid p, .faq-grid p, .site-footer p, .stack-list p, .form-intro p, .form-actions p {
  color: var(--jh-ink-soft);
}
.text-link {
  display: inline-flex;
  margin-top: var(--space-4);
  color: var(--jh-brass-dark);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.text-link::after { content: "->"; margin-left: 0.45rem; }
.text-link.light { color: #e6c085; }
.home-hero {
  position: relative;
  min-height: calc(100svh - 108px);
  display: grid;
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4.75rem);
  background:
    linear-gradient(90deg, rgba(251, 250, 246, 0) 0 34%, rgba(251, 250, 246, 0.7) 34% 100%),
    var(--jh-white);
  color: var(--jh-charcoal);
}
.hero-rail {
  position: absolute;
  inset: 0 auto 0 0;
  width: 60px;
  display: grid;
  place-items: center;
  background: #143d2b url("../images/wood-green.webp") center / cover;
  color: #d1a768;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1.22fr);
  align-items: stretch;
  gap: 0;
}
.hero-grid > *, .process-hero-grid > *, .about-hero-grid > *, .two-column > *, .management-grid > *, .detail-showcase-grid > *, .overview-grid > *, .checklist-grid > *, .faq-layout > *, .form-layout > *, .owner-grid > *, .final-cta > *, .footer-grid > *, .quote-grid > * {
  min-width: 0;
}
.concrete-panel {
  background:
    linear-gradient(rgba(247, 244, 238, 0.72), rgba(247, 244, 238, 0.76)),
    url("../images/concrete-light.webp") center / cover,
    var(--jh-concrete-light);
}
.hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4.5vw, 4.6rem);
  border-left: 1px solid rgba(167, 123, 61, 0.34);
  color: var(--jh-charcoal);
}
.hero-lede { max-width: 58ch; font-size: clamp(1.02rem, 1.3vw, 1.22rem); }
.microcopy { margin-top: var(--space-3); font-size: 0.92rem; }
.kitchen-photo-frame {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--jh-concrete-soft);
  box-shadow: var(--shadow-panel);
}
.hero-photo { min-height: clamp(620px, 55vw, 820px); }
.kitchen-photo-frame.compact { min-height: clamp(420px, 44vw, 620px); }
.kitchen-photo-frame picture, .kitchen-photo-frame img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: 38% 50%; }
.photo-note {
  position: absolute;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  max-width: min(420px, calc(100% - 2rem));
  padding: 1rem 1.2rem;
  border: 1px solid rgba(167, 123, 61, 0.72);
  background: rgba(17, 16, 14, 0.9) url("../images/wood-ebonized.webp") center / cover;
  color: var(--jh-white);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.hero-comparison-panel {
  min-width: 0;
  display: grid;
  align-items: stretch;
  background: var(--jh-concrete-soft);
}
.before-after-comparison {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--jh-white);
  box-shadow: var(--shadow-panel);
}
.before-after-stage {
  position: relative;
  min-height: clamp(620px, 55vw, 820px);
  overflow: hidden;
  background: var(--jh-concrete-soft);
  touch-action: pan-y;
}
.before-after-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.before-after-before-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
  clip-path: inset(0 50% 0 0);
}
.before-after-before { width: 100%; max-width: none; }
.comparison-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: 0;
  transform: translateX(-50%);
  border-left: 2px solid var(--jh-white);
  box-shadow: 0 0 0 1px rgba(25, 25, 24, 0.28);
  pointer-events: none;
}
.before-after-comparison[data-split="0"] .before-after-before-wrap { clip-path: inset(0 100% 0 0); }
.before-after-comparison[data-split="0"] .comparison-divider { left: 0%; }
.before-after-comparison[data-split="1"] .before-after-before-wrap { clip-path: inset(0 99% 0 0); }
.before-after-comparison[data-split="1"] .comparison-divider { left: 1%; }
.before-after-comparison[data-split="2"] .before-after-before-wrap { clip-path: inset(0 98% 0 0); }
.before-after-comparison[data-split="2"] .comparison-divider { left: 2%; }
.before-after-comparison[data-split="3"] .before-after-before-wrap { clip-path: inset(0 97% 0 0); }
.before-after-comparison[data-split="3"] .comparison-divider { left: 3%; }
.before-after-comparison[data-split="4"] .before-after-before-wrap { clip-path: inset(0 96% 0 0); }
.before-after-comparison[data-split="4"] .comparison-divider { left: 4%; }
.before-after-comparison[data-split="5"] .before-after-before-wrap { clip-path: inset(0 95% 0 0); }
.before-after-comparison[data-split="5"] .comparison-divider { left: 5%; }
.before-after-comparison[data-split="6"] .before-after-before-wrap { clip-path: inset(0 94% 0 0); }
.before-after-comparison[data-split="6"] .comparison-divider { left: 6%; }
.before-after-comparison[data-split="7"] .before-after-before-wrap { clip-path: inset(0 93% 0 0); }
.before-after-comparison[data-split="7"] .comparison-divider { left: 7%; }
.before-after-comparison[data-split="8"] .before-after-before-wrap { clip-path: inset(0 92% 0 0); }
.before-after-comparison[data-split="8"] .comparison-divider { left: 8%; }
.before-after-comparison[data-split="9"] .before-after-before-wrap { clip-path: inset(0 91% 0 0); }
.before-after-comparison[data-split="9"] .comparison-divider { left: 9%; }
.before-after-comparison[data-split="10"] .before-after-before-wrap { clip-path: inset(0 90% 0 0); }
.before-after-comparison[data-split="10"] .comparison-divider { left: 10%; }
.before-after-comparison[data-split="11"] .before-after-before-wrap { clip-path: inset(0 89% 0 0); }
.before-after-comparison[data-split="11"] .comparison-divider { left: 11%; }
.before-after-comparison[data-split="12"] .before-after-before-wrap { clip-path: inset(0 88% 0 0); }
.before-after-comparison[data-split="12"] .comparison-divider { left: 12%; }
.before-after-comparison[data-split="13"] .before-after-before-wrap { clip-path: inset(0 87% 0 0); }
.before-after-comparison[data-split="13"] .comparison-divider { left: 13%; }
.before-after-comparison[data-split="14"] .before-after-before-wrap { clip-path: inset(0 86% 0 0); }
.before-after-comparison[data-split="14"] .comparison-divider { left: 14%; }
.before-after-comparison[data-split="15"] .before-after-before-wrap { clip-path: inset(0 85% 0 0); }
.before-after-comparison[data-split="15"] .comparison-divider { left: 15%; }
.before-after-comparison[data-split="16"] .before-after-before-wrap { clip-path: inset(0 84% 0 0); }
.before-after-comparison[data-split="16"] .comparison-divider { left: 16%; }
.before-after-comparison[data-split="17"] .before-after-before-wrap { clip-path: inset(0 83% 0 0); }
.before-after-comparison[data-split="17"] .comparison-divider { left: 17%; }
.before-after-comparison[data-split="18"] .before-after-before-wrap { clip-path: inset(0 82% 0 0); }
.before-after-comparison[data-split="18"] .comparison-divider { left: 18%; }
.before-after-comparison[data-split="19"] .before-after-before-wrap { clip-path: inset(0 81% 0 0); }
.before-after-comparison[data-split="19"] .comparison-divider { left: 19%; }
.before-after-comparison[data-split="20"] .before-after-before-wrap { clip-path: inset(0 80% 0 0); }
.before-after-comparison[data-split="20"] .comparison-divider { left: 20%; }
.before-after-comparison[data-split="21"] .before-after-before-wrap { clip-path: inset(0 79% 0 0); }
.before-after-comparison[data-split="21"] .comparison-divider { left: 21%; }
.before-after-comparison[data-split="22"] .before-after-before-wrap { clip-path: inset(0 78% 0 0); }
.before-after-comparison[data-split="22"] .comparison-divider { left: 22%; }
.before-after-comparison[data-split="23"] .before-after-before-wrap { clip-path: inset(0 77% 0 0); }
.before-after-comparison[data-split="23"] .comparison-divider { left: 23%; }
.before-after-comparison[data-split="24"] .before-after-before-wrap { clip-path: inset(0 76% 0 0); }
.before-after-comparison[data-split="24"] .comparison-divider { left: 24%; }
.before-after-comparison[data-split="25"] .before-after-before-wrap { clip-path: inset(0 75% 0 0); }
.before-after-comparison[data-split="25"] .comparison-divider { left: 25%; }
.before-after-comparison[data-split="26"] .before-after-before-wrap { clip-path: inset(0 74% 0 0); }
.before-after-comparison[data-split="26"] .comparison-divider { left: 26%; }
.before-after-comparison[data-split="27"] .before-after-before-wrap { clip-path: inset(0 73% 0 0); }
.before-after-comparison[data-split="27"] .comparison-divider { left: 27%; }
.before-after-comparison[data-split="28"] .before-after-before-wrap { clip-path: inset(0 72% 0 0); }
.before-after-comparison[data-split="28"] .comparison-divider { left: 28%; }
.before-after-comparison[data-split="29"] .before-after-before-wrap { clip-path: inset(0 71% 0 0); }
.before-after-comparison[data-split="29"] .comparison-divider { left: 29%; }
.before-after-comparison[data-split="30"] .before-after-before-wrap { clip-path: inset(0 70% 0 0); }
.before-after-comparison[data-split="30"] .comparison-divider { left: 30%; }
.before-after-comparison[data-split="31"] .before-after-before-wrap { clip-path: inset(0 69% 0 0); }
.before-after-comparison[data-split="31"] .comparison-divider { left: 31%; }
.before-after-comparison[data-split="32"] .before-after-before-wrap { clip-path: inset(0 68% 0 0); }
.before-after-comparison[data-split="32"] .comparison-divider { left: 32%; }
.before-after-comparison[data-split="33"] .before-after-before-wrap { clip-path: inset(0 67% 0 0); }
.before-after-comparison[data-split="33"] .comparison-divider { left: 33%; }
.before-after-comparison[data-split="34"] .before-after-before-wrap { clip-path: inset(0 66% 0 0); }
.before-after-comparison[data-split="34"] .comparison-divider { left: 34%; }
.before-after-comparison[data-split="35"] .before-after-before-wrap { clip-path: inset(0 65% 0 0); }
.before-after-comparison[data-split="35"] .comparison-divider { left: 35%; }
.before-after-comparison[data-split="36"] .before-after-before-wrap { clip-path: inset(0 64% 0 0); }
.before-after-comparison[data-split="36"] .comparison-divider { left: 36%; }
.before-after-comparison[data-split="37"] .before-after-before-wrap { clip-path: inset(0 63% 0 0); }
.before-after-comparison[data-split="37"] .comparison-divider { left: 37%; }
.before-after-comparison[data-split="38"] .before-after-before-wrap { clip-path: inset(0 62% 0 0); }
.before-after-comparison[data-split="38"] .comparison-divider { left: 38%; }
.before-after-comparison[data-split="39"] .before-after-before-wrap { clip-path: inset(0 61% 0 0); }
.before-after-comparison[data-split="39"] .comparison-divider { left: 39%; }
.before-after-comparison[data-split="40"] .before-after-before-wrap { clip-path: inset(0 60% 0 0); }
.before-after-comparison[data-split="40"] .comparison-divider { left: 40%; }
.before-after-comparison[data-split="41"] .before-after-before-wrap { clip-path: inset(0 59% 0 0); }
.before-after-comparison[data-split="41"] .comparison-divider { left: 41%; }
.before-after-comparison[data-split="42"] .before-after-before-wrap { clip-path: inset(0 58% 0 0); }
.before-after-comparison[data-split="42"] .comparison-divider { left: 42%; }
.before-after-comparison[data-split="43"] .before-after-before-wrap { clip-path: inset(0 57% 0 0); }
.before-after-comparison[data-split="43"] .comparison-divider { left: 43%; }
.before-after-comparison[data-split="44"] .before-after-before-wrap { clip-path: inset(0 56% 0 0); }
.before-after-comparison[data-split="44"] .comparison-divider { left: 44%; }
.before-after-comparison[data-split="45"] .before-after-before-wrap { clip-path: inset(0 55% 0 0); }
.before-after-comparison[data-split="45"] .comparison-divider { left: 45%; }
.before-after-comparison[data-split="46"] .before-after-before-wrap { clip-path: inset(0 54% 0 0); }
.before-after-comparison[data-split="46"] .comparison-divider { left: 46%; }
.before-after-comparison[data-split="47"] .before-after-before-wrap { clip-path: inset(0 53% 0 0); }
.before-after-comparison[data-split="47"] .comparison-divider { left: 47%; }
.before-after-comparison[data-split="48"] .before-after-before-wrap { clip-path: inset(0 52% 0 0); }
.before-after-comparison[data-split="48"] .comparison-divider { left: 48%; }
.before-after-comparison[data-split="49"] .before-after-before-wrap { clip-path: inset(0 51% 0 0); }
.before-after-comparison[data-split="49"] .comparison-divider { left: 49%; }
.before-after-comparison[data-split="50"] .before-after-before-wrap { clip-path: inset(0 50% 0 0); }
.before-after-comparison[data-split="50"] .comparison-divider { left: 50%; }
.before-after-comparison[data-split="51"] .before-after-before-wrap { clip-path: inset(0 49% 0 0); }
.before-after-comparison[data-split="51"] .comparison-divider { left: 51%; }
.before-after-comparison[data-split="52"] .before-after-before-wrap { clip-path: inset(0 48% 0 0); }
.before-after-comparison[data-split="52"] .comparison-divider { left: 52%; }
.before-after-comparison[data-split="53"] .before-after-before-wrap { clip-path: inset(0 47% 0 0); }
.before-after-comparison[data-split="53"] .comparison-divider { left: 53%; }
.before-after-comparison[data-split="54"] .before-after-before-wrap { clip-path: inset(0 46% 0 0); }
.before-after-comparison[data-split="54"] .comparison-divider { left: 54%; }
.before-after-comparison[data-split="55"] .before-after-before-wrap { clip-path: inset(0 45% 0 0); }
.before-after-comparison[data-split="55"] .comparison-divider { left: 55%; }
.before-after-comparison[data-split="56"] .before-after-before-wrap { clip-path: inset(0 44% 0 0); }
.before-after-comparison[data-split="56"] .comparison-divider { left: 56%; }
.before-after-comparison[data-split="57"] .before-after-before-wrap { clip-path: inset(0 43% 0 0); }
.before-after-comparison[data-split="57"] .comparison-divider { left: 57%; }
.before-after-comparison[data-split="58"] .before-after-before-wrap { clip-path: inset(0 42% 0 0); }
.before-after-comparison[data-split="58"] .comparison-divider { left: 58%; }
.before-after-comparison[data-split="59"] .before-after-before-wrap { clip-path: inset(0 41% 0 0); }
.before-after-comparison[data-split="59"] .comparison-divider { left: 59%; }
.before-after-comparison[data-split="60"] .before-after-before-wrap { clip-path: inset(0 40% 0 0); }
.before-after-comparison[data-split="60"] .comparison-divider { left: 60%; }
.before-after-comparison[data-split="61"] .before-after-before-wrap { clip-path: inset(0 39% 0 0); }
.before-after-comparison[data-split="61"] .comparison-divider { left: 61%; }
.before-after-comparison[data-split="62"] .before-after-before-wrap { clip-path: inset(0 38% 0 0); }
.before-after-comparison[data-split="62"] .comparison-divider { left: 62%; }
.before-after-comparison[data-split="63"] .before-after-before-wrap { clip-path: inset(0 37% 0 0); }
.before-after-comparison[data-split="63"] .comparison-divider { left: 63%; }
.before-after-comparison[data-split="64"] .before-after-before-wrap { clip-path: inset(0 36% 0 0); }
.before-after-comparison[data-split="64"] .comparison-divider { left: 64%; }
.before-after-comparison[data-split="65"] .before-after-before-wrap { clip-path: inset(0 35% 0 0); }
.before-after-comparison[data-split="65"] .comparison-divider { left: 65%; }
.before-after-comparison[data-split="66"] .before-after-before-wrap { clip-path: inset(0 34% 0 0); }
.before-after-comparison[data-split="66"] .comparison-divider { left: 66%; }
.before-after-comparison[data-split="67"] .before-after-before-wrap { clip-path: inset(0 33% 0 0); }
.before-after-comparison[data-split="67"] .comparison-divider { left: 67%; }
.before-after-comparison[data-split="68"] .before-after-before-wrap { clip-path: inset(0 32% 0 0); }
.before-after-comparison[data-split="68"] .comparison-divider { left: 68%; }
.before-after-comparison[data-split="69"] .before-after-before-wrap { clip-path: inset(0 31% 0 0); }
.before-after-comparison[data-split="69"] .comparison-divider { left: 69%; }
.before-after-comparison[data-split="70"] .before-after-before-wrap { clip-path: inset(0 30% 0 0); }
.before-after-comparison[data-split="70"] .comparison-divider { left: 70%; }
.before-after-comparison[data-split="71"] .before-after-before-wrap { clip-path: inset(0 29% 0 0); }
.before-after-comparison[data-split="71"] .comparison-divider { left: 71%; }
.before-after-comparison[data-split="72"] .before-after-before-wrap { clip-path: inset(0 28% 0 0); }
.before-after-comparison[data-split="72"] .comparison-divider { left: 72%; }
.before-after-comparison[data-split="73"] .before-after-before-wrap { clip-path: inset(0 27% 0 0); }
.before-after-comparison[data-split="73"] .comparison-divider { left: 73%; }
.before-after-comparison[data-split="74"] .before-after-before-wrap { clip-path: inset(0 26% 0 0); }
.before-after-comparison[data-split="74"] .comparison-divider { left: 74%; }
.before-after-comparison[data-split="75"] .before-after-before-wrap { clip-path: inset(0 25% 0 0); }
.before-after-comparison[data-split="75"] .comparison-divider { left: 75%; }
.before-after-comparison[data-split="76"] .before-after-before-wrap { clip-path: inset(0 24% 0 0); }
.before-after-comparison[data-split="76"] .comparison-divider { left: 76%; }
.before-after-comparison[data-split="77"] .before-after-before-wrap { clip-path: inset(0 23% 0 0); }
.before-after-comparison[data-split="77"] .comparison-divider { left: 77%; }
.before-after-comparison[data-split="78"] .before-after-before-wrap { clip-path: inset(0 22% 0 0); }
.before-after-comparison[data-split="78"] .comparison-divider { left: 78%; }
.before-after-comparison[data-split="79"] .before-after-before-wrap { clip-path: inset(0 21% 0 0); }
.before-after-comparison[data-split="79"] .comparison-divider { left: 79%; }
.before-after-comparison[data-split="80"] .before-after-before-wrap { clip-path: inset(0 20% 0 0); }
.before-after-comparison[data-split="80"] .comparison-divider { left: 80%; }
.before-after-comparison[data-split="81"] .before-after-before-wrap { clip-path: inset(0 19% 0 0); }
.before-after-comparison[data-split="81"] .comparison-divider { left: 81%; }
.before-after-comparison[data-split="82"] .before-after-before-wrap { clip-path: inset(0 18% 0 0); }
.before-after-comparison[data-split="82"] .comparison-divider { left: 82%; }
.before-after-comparison[data-split="83"] .before-after-before-wrap { clip-path: inset(0 17% 0 0); }
.before-after-comparison[data-split="83"] .comparison-divider { left: 83%; }
.before-after-comparison[data-split="84"] .before-after-before-wrap { clip-path: inset(0 16% 0 0); }
.before-after-comparison[data-split="84"] .comparison-divider { left: 84%; }
.before-after-comparison[data-split="85"] .before-after-before-wrap { clip-path: inset(0 15% 0 0); }
.before-after-comparison[data-split="85"] .comparison-divider { left: 85%; }
.before-after-comparison[data-split="86"] .before-after-before-wrap { clip-path: inset(0 14% 0 0); }
.before-after-comparison[data-split="86"] .comparison-divider { left: 86%; }
.before-after-comparison[data-split="87"] .before-after-before-wrap { clip-path: inset(0 13% 0 0); }
.before-after-comparison[data-split="87"] .comparison-divider { left: 87%; }
.before-after-comparison[data-split="88"] .before-after-before-wrap { clip-path: inset(0 12% 0 0); }
.before-after-comparison[data-split="88"] .comparison-divider { left: 88%; }
.before-after-comparison[data-split="89"] .before-after-before-wrap { clip-path: inset(0 11% 0 0); }
.before-after-comparison[data-split="89"] .comparison-divider { left: 89%; }
.before-after-comparison[data-split="90"] .before-after-before-wrap { clip-path: inset(0 10% 0 0); }
.before-after-comparison[data-split="90"] .comparison-divider { left: 90%; }
.before-after-comparison[data-split="91"] .before-after-before-wrap { clip-path: inset(0 9% 0 0); }
.before-after-comparison[data-split="91"] .comparison-divider { left: 91%; }
.before-after-comparison[data-split="92"] .before-after-before-wrap { clip-path: inset(0 8% 0 0); }
.before-after-comparison[data-split="92"] .comparison-divider { left: 92%; }
.before-after-comparison[data-split="93"] .before-after-before-wrap { clip-path: inset(0 7% 0 0); }
.before-after-comparison[data-split="93"] .comparison-divider { left: 93%; }
.before-after-comparison[data-split="94"] .before-after-before-wrap { clip-path: inset(0 6% 0 0); }
.before-after-comparison[data-split="94"] .comparison-divider { left: 94%; }
.before-after-comparison[data-split="95"] .before-after-before-wrap { clip-path: inset(0 5% 0 0); }
.before-after-comparison[data-split="95"] .comparison-divider { left: 95%; }
.before-after-comparison[data-split="96"] .before-after-before-wrap { clip-path: inset(0 4% 0 0); }
.before-after-comparison[data-split="96"] .comparison-divider { left: 96%; }
.before-after-comparison[data-split="97"] .before-after-before-wrap { clip-path: inset(0 3% 0 0); }
.before-after-comparison[data-split="97"] .comparison-divider { left: 97%; }
.before-after-comparison[data-split="98"] .before-after-before-wrap { clip-path: inset(0 2% 0 0); }
.before-after-comparison[data-split="98"] .comparison-divider { left: 98%; }
.before-after-comparison[data-split="99"] .before-after-before-wrap { clip-path: inset(0 1% 0 0); }
.before-after-comparison[data-split="99"] .comparison-divider { left: 99%; }
.before-after-comparison[data-split="100"] .before-after-before-wrap { clip-path: inset(0 0% 0 0); }
.before-after-comparison[data-split="100"] .comparison-divider { left: 100%; }
.comparison-divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--jh-white);
  background: rgba(17, 16, 14, 0.86);
}
.comparison-divider span::before,
.comparison-divider span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--jh-white);
  border-left: 2px solid var(--jh-white);
}
.comparison-divider span::before { left: 14px; transform: translateY(-50%) rotate(-45deg); }
.comparison-divider span::after { right: 14px; transform: translateY(-50%) rotate(135deg); }
.before-after-stage:focus-within .comparison-divider span {
  outline: 3px solid var(--jh-brass);
  outline-offset: 4px;
}
.comparison-label {
  position: absolute;
  top: 1rem;
  z-index: 2;
  padding: 0.5rem 0.7rem;
  background: rgba(17, 16, 14, 0.82);
  color: var(--jh-white);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.comparison-label-before { left: 1rem; }
.comparison-label-after { right: 1rem; }
.comparison-control {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  margin: 0;
  padding: 0;
  cursor: ew-resize;
}
.comparison-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.before-after-comparison > figcaption {
  padding: 0 clamp(1rem, 2vw, 1.35rem) 1.2rem;
  color: var(--jh-ink-soft);
  font-size: 0.92rem;
}
.before-after-fallback {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
  max-width: 100%;
  overflow: clip;
}
.before-after-fallback figure { min-width: 0; margin: 0; }
.before-after-fallback img { width: 100%; height: auto; }
.credibility { background: var(--jh-white); border-block: 1px solid var(--line); }
.credibility-grid { display: grid; }
.credibility-grid.five { grid-template-columns: repeat(5, 1fr); }
.credibility-grid.four { grid-template-columns: repeat(4, 1fr); }
.credibility-grid > div {
  min-height: 158px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 1px solid var(--line);
}
.credibility-grid > div:last-child { border-right: 1px solid var(--line); }
.fact-kicker, .card-number {
  display: block;
  color: var(--jh-brass-dark);
  font: 400 1.25rem/1 var(--font-serif);
  margin-bottom: 1rem;
}
.credibility strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.credibility p { color: var(--jh-ink-soft); font-size: 0.92rem; }
.credential-strip {
  background:
    linear-gradient(rgba(251, 250, 246, 0.92), rgba(251, 250, 246, 0.94)),
    url("../images/concrete-light.webp") center / 900px auto,
    var(--jh-white);
  border-block: 1px solid var(--line);
}
.credential-strip .container { padding-block: 0; }
.credential-badge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
  box-shadow: var(--shadow-subtle);
}
.credential-badge {
  min-width: 0;
  min-height: 158px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 1.05rem;
  align-items: start;
  padding: clamp(1.15rem, 2.1vw, 1.6rem);
  background: rgba(255, 255, 255, 0.92);
}
.credential-logo-frame {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  align-self: start;
}
.credential-logo-frame picture {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.credential-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.credential-logo-seal { width: 54px; height: 54px; }
.credential-logo-osha { width: 56px; max-height: 24px; }
.credential-logo-enviro { width: 56px; height: 56px; }
.credential-badge strong {
  display: block;
  color: var(--jh-charcoal);
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.24;
  text-transform: uppercase;
}
.credential-badge p {
  margin-top: 0.5rem;
  color: var(--jh-ink-soft);
  font-size: 0.9rem;
  line-height: 1.48;
}
.detail-showcase-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.6fr);
  align-items: stretch;
}
.detail-intro {
  padding: clamp(2rem, 5vw, 4.75rem);
  min-height: 100%;
}
.material-oak {
  background:
    linear-gradient(rgba(247, 235, 214, 0.76), rgba(247, 235, 214, 0.76)),
    url("../images/wood-light-oak.webp") center / cover,
    #ead2ad;
}
.detail-photo-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  min-width: 0;
}
.detail-photo-strip figure { position: relative; margin: 0; min-height: 100%; overflow: hidden; background: var(--jh-charcoal); }
.detail-photo-strip picture, .detail-photo-strip img { width: 100%; height: 100%; object-fit: cover; }
.detail-photo-strip figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.9rem 1rem;
  background: rgba(17, 16, 14, 0.88);
  color: var(--jh-white);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.photo-work-band { background: var(--jh-white); }
.photo-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.photo-card-grid.technical { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.photo-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--jh-white);
}
.photo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.photo-card div { display: grid; gap: 0.65rem; padding: 1rem; }
.photo-card h3 {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}
.photo-card p { margin: 0; color: var(--jh-ink-soft); font-size: 0.93rem; }
.photo-card small { color: var(--jh-brass-dark); font-size: 0.78rem; line-height: 1.45; }
.work-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.work-tile-grid.dense { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.work-tile {
  position: relative;
  min-width: 0;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--jh-charcoal);
}
.work-tile img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}
.work-tile div {
  position: absolute;
  inset: auto 0 0;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(17, 16, 14, 0), rgba(17, 16, 14, 0.9) 28%, rgba(17, 16, 14, 0.95));
  color: var(--jh-white);
}
.work-tile span {
  display: block;
  margin-bottom: 0.35rem;
  color: #d4aa6d;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.work-tile p { margin: 0; color: rgba(251, 250, 246, 0.9); font-size: 0.9rem; }
.trade-photo-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.section-heading {
  max-width: 850px;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-heading.left { margin-inline: 0; }
.section-heading.light h2, .section-heading.light p, .material-dark h2, .material-dark p, .material-walnut h2, .material-walnut p, .material-green h2, .material-green p, .light p, .light strong { color: var(--jh-white); }
.section-heading.light p:not(.eyebrow) { color: rgba(251, 250, 246, 0.82); }
.concrete-texture {
  background:
    linear-gradient(rgba(241, 237, 229, 0.82), rgba(241, 237, 229, 0.84)),
    url("../images/concrete-light.webp") center / 900px auto,
    var(--jh-ivory);
}
.material-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
}
.material-card {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 5px solid var(--jh-brass);
  box-shadow: var(--shadow-panel);
}
.material-card h3 { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.material-card p { margin-top: 0.8rem; }
.material-ebonized {
  background:
    linear-gradient(rgba(17, 16, 14, 0.78), rgba(17, 16, 14, 0.78)),
    url("../images/wood-ebonized.webp") center / cover,
    #12110f;
}
.material-green {
  background:
    linear-gradient(rgba(15, 61, 41, 0.82), rgba(15, 61, 41, 0.84)),
    url("../images/wood-green.webp") center / cover,
    #123a29;
}
.material-walnut {
  background:
    linear-gradient(rgba(25, 18, 14, 0.74), rgba(25, 18, 14, 0.76)),
    url("../images/wood-dark-walnut.webp") center / cover,
    #1b130f;
}
.material-dark {
  background:
    linear-gradient(rgba(13, 12, 10, 0.78), rgba(13, 12, 10, 0.82)),
    url("../images/wood-ebonized.webp") center / cover,
    #11100e;
}
.material-card.material-ebonized h3, .material-card.material-ebonized p, .material-card.material-green h3, .material-card.material-green p { color: var(--jh-white); }
.material-card.material-ebonized .card-number, .material-card.material-green .card-number { color: #d4aa6d; }
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.project-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  background: var(--jh-white);
}
.project-card-media { display: block; overflow: hidden; background: var(--jh-concrete-soft); text-decoration: none; }
.project-card-media picture, .project-card-media img { width: 100%; height: 100%; }
.project-card-media img { aspect-ratio: 4 / 3; object-fit: cover; }
.project-card-copy { display: grid; gap: 0.75rem; padding: 1.2rem; }
.project-card h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.12; }
.project-card h3 a { text-decoration: none; }
.project-card p { color: var(--jh-ink-soft); }
.project-card dl, .project-facts { display: grid; gap: 0.55rem; margin: 0; }
.project-card dl div, .project-facts div { display: grid; gap: 0.1rem; }
.project-card dt, .project-facts dt {
  color: var(--jh-brass-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.project-card dd, .project-facts dd { margin: 0; color: var(--jh-ink-soft); }
.project-detail-grid, .project-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.project-detail-grid article {
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--jh-white);
  border: 1px solid var(--line);
}
.project-detail-grid h2 { font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.12; }
.project-detail-grid p:last-child { color: var(--jh-ink-soft); }
.project-photo-grid figure, .comparison-pair figure {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  background: var(--jh-white);
  border: 1px solid var(--line);
}
.project-photo-grid img, .comparison-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.project-photo-grid figcaption, .comparison-pair figcaption {
  padding: 0 1rem 1rem;
  color: var(--jh-ink-soft);
  font-size: 0.92rem;
}
.project-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.project-video-card {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  background: var(--jh-white);
  border: 1px solid var(--line);
}
.project-video-trigger {
  position: relative;
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--jh-charcoal);
  color: inherit;
  aspect-ratio: var(--project-video-aspect, 16 / 9);
  cursor: pointer;
}
.project-video-card video,
.project-video-poster,
.project-video-poster img {
  width: 100%;
  height: 100%;
  display: block;
}
.project-video-poster img,
.project-video-card video {
  object-fit: cover;
  background: var(--jh-charcoal);
}
.project-video-card figcaption {
  padding: 0 1rem 1rem;
  color: var(--jh-ink-soft);
  font-size: 0.92rem;
}
.project-video-card figcaption strong {
  display: block;
  color: var(--jh-ink);
  margin-bottom: 0.2rem;
}
.comparison-grid { display: grid; gap: 1.25rem; }
.comparison-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.project-link-list {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.project-link-list a { color: var(--jh-white); font-weight: 700; text-underline-offset: 0.22em; }
.project-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--jh-ink-soft);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.project-pagination a { color: var(--jh-brass-dark); }
.process-ribbon { background: var(--jh-white); }
.two-column {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.align-start { align-items: start; }
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.timeline-five { grid-template-columns: repeat(5, 1fr); }
.timeline-eight { grid-template-columns: repeat(8, 1fr); }
.timeline li {
  position: relative;
  display: grid;
  gap: 0.35rem;
  min-height: 112px;
  padding-top: 2.4rem;
  color: var(--jh-ink-soft);
  font-size: 0.82rem;
}
.timeline li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border: 1px solid var(--jh-brass);
  border-radius: 50%;
  background: var(--jh-white);
}
.timeline li::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 34px;
  width: calc(100% - 34px);
  height: 1px;
  background: rgba(167, 123, 61, 0.55);
}
.timeline li:last-child::after { display: none; }
.timeline span {
  color: var(--jh-charcoal);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.timeline small { color: var(--jh-ink-soft); }
.management-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.framed-photo {
  margin: 0;
  padding: clamp(0.85rem, 2vw, 1.35rem);
  background: var(--jh-white);
  box-shadow: var(--shadow-panel);
}
.framed-photo img { width: 100%; aspect-ratio: 1024 / 671; object-fit: cover; object-position: 38% 50%; }
.trade-band { color: var(--jh-white); }
.white-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 1.8rem);
}
.white-card-grid article {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--jh-white);
  color: var(--jh-charcoal);
  box-shadow: 0 16px 42px rgba(13, 12, 10, 0.12);
}
.white-card-grid h3 { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.055em; text-transform: uppercase; }
.white-card-grid p { margin-top: 0.75rem; }
.material-green .white-card-grid p, .trade-band .white-card-grid p { color: var(--jh-ink-soft); }
.white-card-grid.bordered article { border: 1px solid var(--line); box-shadow: none; }
.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: clamp(1.3rem, 3vw, 2rem);
  border-left: 16px solid #173e2d;
  background: var(--jh-white);
  box-shadow: var(--shadow-panel);
}
.area-list a, .area-list span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--line);
  color: var(--jh-ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}
.area-list a:hover { color: var(--jh-brass-dark); background: rgba(167, 123, 61, 0.1); }
.owner-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.owner-photo {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--jh-concrete-soft);
  box-shadow: var(--shadow-panel);
}
.owner-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 42%;
}
.logo-plaque {
  padding: clamp(1rem, 3vw, 2rem);
  color: var(--jh-white);
  text-align: center;
}
.logo-plaque img { width: min(210px, 100%); margin-inline: auto; background: var(--jh-white); }
.logo-plaque p { margin-top: 1rem; color: var(--jh-white); font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.2; }
.swatch-stack { display: grid; gap: 0.9rem; }
.swatch { display: block; width: 120px; height: 94px; background: var(--jh-concrete-soft); }
.swatch.burl, .swatch-panel.burl { background: url("../images/wood-burl.webp") center / cover; }
.swatch.oak, .swatch-panel.oak { background: url("../images/wood-light-oak.webp") center / cover; }
.swatch.green, .swatch-panel.green { background: url("../images/wood-green.webp") center / cover; }
.swatch.ebonized, .swatch-panel.ebonized { background: url("../images/wood-ebonized.webp") center / cover; }
.faq-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.faq-grid { display: grid; gap: 0.75rem; }
.faq-grid details {
  border: 1px solid var(--line);
  background: var(--jh-white);
}
.faq-grid summary {
  min-height: 58px;
  padding: 1rem 1.2rem;
  color: var(--jh-charcoal);
  font-weight: 800;
  cursor: pointer;
}
.faq-grid p { padding: 0 1.2rem 1.1rem; }
.final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.final-cta h2 { color: var(--jh-white); }
.final-cta p { max-width: 760px; color: rgba(251, 250, 246, 0.82); }
.site-footer {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: var(--jh-white);
  border-top: 1px solid var(--line);
  color: var(--jh-charcoal);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(220px, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.footer-brand-block p { max-width: 420px; margin-top: var(--space-3); }
.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 2rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: var(--space-4); font-size: 0.82rem; }
.breadcrumbs {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding-block: 1rem;
  background: var(--jh-white);
  color: var(--jh-ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.breadcrumbs a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.breadcrumbs a::after { content: "/"; margin-left: 0.65rem; color: var(--jh-brass); }
.page-hero { padding-block: clamp(4rem, 8vw, 7rem); background: var(--jh-white); }
.split-page-hero { background: var(--jh-ivory); }
.process-hero { padding-block: clamp(3rem, 6vw, 5rem); background: var(--jh-white); }
.process-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 0;
  align-items: stretch;
}
.process-hero-media { display: grid; grid-template-rows: minmax(320px, 1fr) auto; }
.process-hero-media picture, .process-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
.process-video-frame {
  position: relative;
  min-height: inherit;
  margin: 0;
  overflow: hidden;
  background: var(--jh-charcoal);
}
.process-video-trigger {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--jh-charcoal);
  color: inherit;
}
.process-video-frame video,
.process-video-poster {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: 45% 50%;
  background: var(--jh-charcoal);
}
.process-video-trigger picture { width: 100%; height: 100%; min-height: inherit; }
.video-play-cue {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.video-play-cue span {
  width: clamp(62px, 7vw, 94px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid rgba(251, 250, 246, 0.92);
  border-radius: 50%;
  background: rgba(17, 16, 14, 0.48);
  box-shadow: 0 16px 42px rgba(17, 16, 14, 0.28);
}
.video-play-cue span::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.22rem;
  border-block: 0.72rem solid transparent;
  border-left: 1.05rem solid var(--jh-white);
}
.process-video-frame:focus-within .video-play-cue,
.process-video-frame:hover .video-play-cue { opacity: 0.42; }
.process-promise { padding: clamp(1.3rem, 3vw, 2rem); color: var(--jh-white); }
.overview-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1.42fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.6vw, 2rem);
}
.process-card {
  background: var(--jh-white);
  box-shadow: var(--shadow-panel);
}
.process-card header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
}
.process-card header span { color: #d4aa6d; font-family: var(--font-serif); font-size: 1.25rem; }
.process-card header h3 { color: var(--jh-white); font-size: 1.25rem; }
.stage-green { background: linear-gradient(rgba(15, 61, 41, 0.84), rgba(15, 61, 41, 0.84)), url("../images/wood-green.webp") center / cover; }
.stage-oak { background: linear-gradient(rgba(223, 179, 124, 0.76), rgba(223, 179, 124, 0.76)), url("../images/wood-light-oak.webp") center / cover; }
.stage-oak h3 { color: var(--jh-charcoal) !important; }
.stage-dark { background: linear-gradient(rgba(17, 16, 14, 0.82), rgba(17, 16, 14, 0.82)), url("../images/wood-ebonized.webp") center / cover; }
.stage-burl { background: linear-gradient(rgba(78, 44, 24, 0.76), rgba(78, 44, 24, 0.78)), url("../images/wood-burl.webp") center / cover; }
.process-card > div { display: grid; gap: 0.75rem; padding: 1.4rem; }
.process-card p { color: var(--jh-ink-soft); font-size: 0.93rem; }
.checklist-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 5vw, 4rem);
}
.check-panel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.check-panel li {
  padding: 0.9rem 1rem 0.9rem 3rem;
  border: 1px solid var(--line);
  background: var(--jh-white);
  position: relative;
}
.check-panel li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  width: 18px;
  height: 18px;
  border: 1px solid var(--jh-brass);
  border-radius: 50%;
}
.about-hero { padding-block: clamp(3rem, 6vw, 5rem); background: var(--jh-white); }
.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(310px, 0.8fr) minmax(0, 1.2fr);
  align-items: stretch;
}
.portrait-panel {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(2rem, 5vw, 4.5rem);
  background: #123a29;
  color: var(--jh-white);
}
.portrait-ring {
  width: min(100%, 430px);
  aspect-ratio: 1;
  margin: 0;
  padding: 0.72rem;
  border: 3px solid var(--jh-white);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px var(--jh-brass);
  overflow: hidden;
  background: var(--jh-white);
}
.portrait-ring picture, .portrait-ring img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; border-radius: 50%; }
.portrait-panel > p { margin-top: 1.4rem; color: var(--jh-white); text-align: center; font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.25; }
.portrait-panel span { color: #d4aa6d; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.about-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 5rem); background: var(--jh-ivory); }
.about-copy h1 { max-width: 14ch; }
.heritage-section { content-visibility: auto; contain-intrinsic-size: 900px; }
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--jh-white);
  box-shadow: var(--shadow-panel);
}
.swatch-grid article { padding: 1rem; }
.swatch-panel { display: block; aspect-ratio: 0.72; margin-bottom: 1rem; }
.swatch-grid h3 { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.swatch-grid p { color: var(--jh-ink-soft); font-size: 0.9rem; }
.heritage-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.8rem, 2vw, 1.2rem);
}
.heritage-grid figure { margin: 0; background: var(--jh-white); padding: 0.65rem; box-shadow: var(--shadow-panel); }
.heritage-grid picture, .heritage-grid img { width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; }
.heritage-grid figcaption { padding-top: 0.65rem; color: var(--jh-ink-soft); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.form-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.52fr) minmax(0, 1.48fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.form-guide {
  position: sticky;
  top: 138px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--jh-white);
}
.review-form {
  display: grid;
  gap: clamp(1.35rem, 2.2vw, 2rem);
  padding: clamp(1.2rem, 4vw, 2.5rem);
  background: var(--jh-white);
  color: var(--jh-charcoal);
  box-shadow: var(--shadow-panel);
}
.form-intro {
  display: grid;
  gap: 0.75rem;
  max-width: 74ch;
}
.form-progress {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}
.form-progress li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.72rem;
  border: 1px solid var(--line);
  background: var(--jh-ivory);
  color: var(--jh-ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.form-progress span {
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--jh-white);
  color: var(--jh-brass-dark);
}
.form-progress li[aria-current="step"] {
  border-color: var(--jh-brass);
  background: rgba(167, 123, 61, 0.12);
  color: var(--jh-charcoal);
}
.preview-notice, .form-status {
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--jh-brass);
  background: rgba(167, 123, 61, 0.1);
  color: var(--jh-charcoal);
}
.form-errors {
  min-height: 0;
  color: var(--jh-error);
  font-weight: 800;
}
.form-errors:empty, .form-status:empty { display: none; }
.form-errors a { color: var(--jh-error); }
.error-summary-list { margin: 0.55rem 0 0; padding-left: 1.25rem; }
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.form-step {
  display: grid;
  gap: clamp(1.2rem, 2vw, 1.65rem);
}
.form-step[hidden], .conditional-panel[hidden] { display: none !important; }
legend {
  margin-bottom: 0.35rem;
  color: var(--jh-charcoal);
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.4vw, 1.8rem);
  line-height: 1.08;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.1rem, 2.5vw, 1.8rem);
  row-gap: clamp(1.05rem, 2vw, 1.35rem);
  min-width: 0;
}
.form-row {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  min-width: 0;
}
.form-row.full { grid-column: 1 / -1; }
.honeypot-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
label, .field-label {
  color: var(--jh-charcoal);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.field-label { margin: 0; }
input, select, textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--jh-concrete-line);
  background: var(--jh-white);
  color: var(--jh-charcoal);
  padding: 0.75rem 0.85rem;
}
textarea {
  min-height: 210px;
  resize: vertical;
}
input[type="file"] { padding: 0.65rem; }
.form-row small, .form-step-note {
  color: var(--jh-ink-soft);
  font-size: 0.84rem;
  line-height: 1.45;
}
.form-row small {
  min-height: 1.25rem;
}
.required-note {
  color: var(--jh-brass-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.25;
  text-transform: uppercase;
}
.radio-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.radio-card-grid label {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--jh-ivory);
  letter-spacing: 0.03em;
}
.radio-card-grid input {
  width: 22px;
  min-height: 22px;
  flex: 0 0 auto;
}
.conditional-panel {
  display: grid;
  gap: var(--space-3);
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid var(--line);
  background: var(--jh-ivory);
}
.conditional-panel h3 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.turnstile-panel {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 0.75rem 1.2rem;
  align-items: center;
  padding: clamp(1rem, 2vw, 1.2rem);
  border: 1px solid var(--line);
  background: var(--jh-ivory);
}
.turnstile-panel .field-label {
  grid-column: 1 / -1;
}
.turnstile-panel .cf-turnstile {
  min-height: 65px;
}
.turnstile-panel .form-step-note {
  margin: 0;
  max-width: 52ch;
}
.checkbox-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.8rem;
}
.checkbox-row input { width: 22px; min-height: 22px; margin-top: 0.15rem; }
.field-error { border-color: var(--jh-error) !important; box-shadow: 0 0 0 3px rgba(139, 58, 50, 0.13); }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0.2rem;
}
.form-actions .button[disabled] {
  cursor: not-allowed;
  opacity: 0.58;
}
.review-summary-grid {
  display: grid;
  gap: 1rem;
}
.review-summary-grid article {
  display: grid;
  gap: 0.7rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--line);
  background: var(--jh-ivory);
}
.review-summary-grid h3 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.review-summary-grid a {
  justify-self: start;
  color: var(--jh-brass-dark);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.review-summary-grid dl {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}
.review-summary-grid dl div {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}
.review-summary-grid dt {
  color: var(--jh-brass-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.review-summary-grid dd {
  margin: 0;
  color: var(--jh-ink-soft);
  overflow-wrap: anywhere;
}

@media (max-width: 1120px) {
  .site-nav { gap: 0.8rem; }
  .brand-logo { width: clamp(78px, 8vw, 94px); }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid, .process-hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr); }
  .credibility-grid.five { grid-template-columns: repeat(3, 1fr); }
  .heritage-grid { grid-template-columns: repeat(3, 1fr); }
  .photo-card-grid.technical, .work-tile-grid.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 0; }
  .site-header { position: relative; }
  .header-inner { min-height: 72px; }
  .brand-logo { width: 72px; }
  .menu-toggle { width: 42px; height: 42px; }
  .menu-toggle { display: inline-grid; place-items: center; }
  .site-nav {
    position: fixed;
    inset: 72px 0 auto 0;
    display: none;
    max-height: calc(100svh - 72px);
    overflow: auto;
    padding: 1rem var(--gutter) 1.4rem;
    background: var(--jh-white);
    color: var(--jh-charcoal);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-panel);
  }
  .site-nav.is-open { display: grid; justify-content: stretch; gap: 0.2rem; }
  .site-nav a, .nav-details summary, .nav-cta { min-height: 52px; width: 100%; justify-content: flex-start; }
  .nav-submenu { position: static; min-width: 0; margin: 0.25rem 0 0.75rem; box-shadow: none; }
  .home-hero { padding-top: 0; }
  .hero-rail { display: none; }
  .hero-grid, .process-hero-grid, .about-hero-grid, .two-column, .management-grid, .detail-showcase-grid, .overview-grid, .checklist-grid, .faq-layout, .form-layout, .owner-grid, .final-cta, .footer-grid, .quote-grid, .project-grid, .project-detail-grid, .project-photo-grid, .project-video-grid, .comparison-pair, .trade-photo-grid {
    grid-template-columns: 1fr;
  }
  .home-hero .hero-grid { display: flex; flex-direction: column-reverse; }
  .about-hero-grid { display: flex; flex-direction: column-reverse; }
  .hero-copy { border-left: 0; border-top: 8px solid #173e2d; }
  .hero-photo, .before-after-stage { min-height: clamp(360px, 82vw, 560px); }
  .kitchen-photo-frame.compact { min-height: clamp(320px, 70vw, 500px); }
  .credential-badge-grid { grid-template-columns: 1fr; }
  .credential-badge { min-height: auto; }
  .credibility-grid.five, .credibility-grid.four { grid-template-columns: repeat(2, 1fr); }
  .material-card-grid, .white-card-grid, .process-grid, .swatch-grid { grid-template-columns: 1fr; }
  .photo-card-grid, .photo-card-grid.technical, .work-tile-grid, .work-tile-grid.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-photo-strip { grid-template-columns: repeat(2, 1fr); }
  .timeline-five, .timeline-eight { grid-template-columns: 1fr; }
  .timeline li { min-height: auto; padding: 0 0 0 3.2rem; }
  .timeline li::before { left: 0; top: 0.1rem; }
  .timeline li::after { left: 17px; top: 34px; width: 1px; height: calc(100% - 20px); }
  .form-guide { position: static; }
  .form-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .turnstile-panel { grid-template-columns: 1fr; }
  .turnstile-panel .form-step-note { max-width: none; }
  .radio-card-grid { grid-template-columns: 1fr; }
  .review-summary-grid dl div { grid-template-columns: 1fr; gap: 0.2rem; }
  .owner-photo img { aspect-ratio: 16 / 11; }
  .footer-nav { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { --gutter: 1.1rem; }
  h1 { font-size: clamp(2.35rem, 13vw, 3.55rem); }
  h2 { font-size: clamp(1.9rem, 10vw, 2.8rem); }
  .about-copy h1 { font-size: 2.25rem; }
  .section-pad { padding-block: 3.5rem; }
  .hero-copy, .detail-intro, .portrait-panel, .about-copy { padding: 1.4rem; }
  .review-form { padding: 1rem; }
  .form-grid, .form-progress { grid-template-columns: 1fr; }
  .button-row, .button { width: 100%; }
  .credential-badge { grid-template-columns: 58px minmax(0, 1fr); gap: 0.85rem; }
  .credential-logo-frame { width: 58px; height: 58px; }
  .credential-logo-seal { width: 48px; height: 48px; }
  .credential-logo-osha { width: 50px; max-height: 22px; }
  .credential-logo-enviro { width: 50px; height: 50px; }
  .credibility-grid.five, .credibility-grid.four, .detail-photo-strip, .heritage-grid, .photo-card-grid, .photo-card-grid.technical, .work-tile-grid, .work-tile-grid.dense { grid-template-columns: 1fr; }
  .credibility-grid > div { border-right: 1px solid var(--line); }
  .area-list { border-left-width: 8px; }
  .area-list span { width: 100%; }
  .swatch-stack { grid-template-columns: repeat(3, 1fr); }
  .swatch { width: 100%; height: 78px; }
  .form-grid { grid-template-columns: 1fr; }
  .photo-note { position: static; max-width: none; }
  .portrait-ring { width: min(100%, 320px); }
  .work-tile { min-height: 300px; }
  .before-after-fallback { grid-template-columns: 1fr; }
  .comparison-label { top: 0.65rem; }
}

@media (scripting: none) and (max-width: 900px) {
  .header-inner { flex-wrap: wrap; }
  .menu-toggle { display: none; }
  .site-nav {
    position: static;
    display: grid;
    flex: 1 0 100%;
    max-height: none;
    overflow: visible;
    padding: 0.7rem 0 1rem;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}