/* ==========================================================================
   Davis Chase Group — davischase.com
   Phase 6 site stylesheet. Built from design-system/tokens + guidelines.
   Restyle only: this replaces the placeholder styling. Copy is untouched.
   Foundation authored on the About page; later pages reuse these primitives.
   ========================================================================== */

/* Webfonts — Playfair Display (display serif) + Mulish (caps + body).
   Mirrors design-system/tokens/fonts.css. Canela is the approved commercial
   substitution for the display face at build time, at the principals' option. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Mulish:wght@400;500;600&display=swap');

/* ---------- Tokens (inlined from design-system/tokens/) ---------- */
:root {
  /* Palette */
  --ink: #14130f;
  --ink-soft: #24221d;
  --paper: #f4f1e9;
  --paper-warm: #ece7db;
  --paper-bright: #fbfaf5;
  --stone: #a89f8e;
  --stone-deep: #7d7362;   /* the single accent */
  --taupe: #57524a;

  --text-primary: var(--ink);
  --text-secondary: var(--taupe);
  --text-muted: #8b8375;
  --text-inverse: var(--paper);
  --text-inverse-soft: rgba(244, 241, 233, 0.76);
  --text-accent: var(--stone-deep);

  --surface-page: var(--paper);
  --surface-alt: var(--paper-warm);
  --surface-raised: var(--paper-bright);
  --surface-dark: var(--ink);

  /* Hairlines — the only borders in the system */
  --hairline: rgba(20, 19, 15, 0.16);
  --hairline-strong: rgba(20, 19, 15, 0.34);
  --hairline-inverse: rgba(244, 241, 233, 0.22);
  --hairline-inverse-strong: rgba(244, 241, 233, 0.44);

  /* Scrims — flat, near-black, never gradient */
  --scrim-photo: rgba(16, 15, 12, 0.34);
  --scrim-photo-strong: rgba(16, 15, 12, 0.52);

  /* Interaction */
  --hover-wash-dark: rgba(244, 241, 233, 0.07);
  --hover-wash-light: rgba(20, 19, 15, 0.05);
  --focus-ring: var(--stone-deep);

  /* Type */
  --font-display: "Playfair Display", Georgia, serif;
  --font-sans: "Mulish", "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  --text-display-2: clamp(44px, 6vw, 84px);
  --text-title: clamp(32px, 4vw, 56px);
  --text-heading: clamp(24px, 2.6vw, 38px);
  --leading-title: 1.12;
  --tracking-display: -0.01em;
  --tracking-title: 0em;
  --text-kicker: 11px;
  --tracking-caps: 0.32em;
  --leading-caps: 1.4;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12.5px;
  --leading-body: 1.8;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Layout */
  --max-width: 1460px;
  --page-gutter: clamp(24px, 4.5vw, 80px);
  --section-pad: clamp(72px, 9vw, 136px);
  --section-pad-tight: clamp(52px, 6.5vw, 92px);
  --measure: 64ch;
  --radius: 0px;

  /* Motion — opacity + border-color only */
  --ease-quiet: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
  font-synthesis: none;   /* real weights loaded (Playfair 400/500, Mulish 400/500/600) — never faux-bold */
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
strong { font-weight: var(--weight-medium); color: var(--text-primary); }
button, input, textarea, select { font: inherit; color: inherit; }

/* ---------- Focus — adaptive :focus-visible ring (WCAG 2.4.7) ---------- */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.site-header.on-dark :focus-visible,
.site-footer :focus-visible,
.dark-section :focus-visible { outline-color: var(--hairline-inverse-strong); }

/* ---------- Typography ---------- */
.kicker, .small-caps, .form-label, .nav a, .menu-toggle {
  font-family: var(--font-sans);
  font-size: var(--text-kicker);
  line-height: var(--leading-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}
.kicker { color: var(--text-muted); }
.small-caps { color: var(--text-primary); }
.serif, .display { font-family: var(--font-display); font-weight: var(--weight-regular); }
.display { letter-spacing: var(--tracking-display); line-height: 1.05; }
.h2 { font-size: var(--text-display-2); line-height: 1.06; letter-spacing: var(--tracking-display); }
.h3 { font-size: var(--text-title); line-height: var(--leading-title); }
.h4 { font-size: var(--text-heading); line-height: var(--leading-title); }
.body { color: var(--text-secondary); font-size: var(--text-body); line-height: var(--leading-body); }
.body.light { color: var(--text-inverse-soft); }
.body-lede { color: var(--text-secondary); max-width: 60ch; }
.body-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.4;
  color: var(--text-secondary);
  text-align: center;
  max-width: 40ch;
  margin-inline: auto;
}

/* ---------- Layout primitives ---------- */
.container { max-width: var(--max-width); margin: 0 auto; padding-inline: var(--page-gutter); }
.section { padding-block: var(--section-pad); }
.section.tight { padding-block: var(--section-pad-tight); }
.ivory-section { background: var(--surface-page); color: var(--text-primary); }
.warm-section { background: var(--surface-alt); color: var(--text-primary); }
.white-section { background: var(--surface-raised); color: var(--text-primary); }
.dark-section { background: var(--surface-dark); color: var(--text-inverse); }
.measure-block { max-width: 62ch; }
.hero-measure { max-width: none; }   /* full container width; hero measures live on the children */

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 64px); }

.mt-xs { margin-top: 18px; }
.mt-sm { margin-top: 24px; }
.mt-md { margin-top: 40px; }
.mt-lg { margin-top: clamp(48px, 6vw, 80px); }
.hidden { display: none !important; }

/* ---------- Header ---------- */
.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 18px var(--page-gutter);
  background: var(--surface-page);
  color: var(--text-primary);
  border-bottom: 1px solid var(--hairline);
}
.site-header.on-dark { background: var(--surface-dark); color: var(--text-inverse); border-bottom-color: var(--hairline-inverse); }

/* DCG monogram — production aperture mark (SVG); §7 commission executed 2026-07-07.
   ~2.32:1 landscape mark, sized to the header by HEIGHT (width auto); no box. */
.monogram {
  justify-self: start;
  display: inline-flex; align-items: center;
  height: 42px;
}
.monogram img { display: block; height: 42px; width: auto; }

/* Wordmark — the comp's two-size Playfair lockup, executed by a principal-sanctioned
   span split of the frozen text node (rendered bytes unchanged; §7). Uppercase is
   display casing only. .l1 "DAVIS CHASE" is the dominant line; .l2 "GROUP" is the
   comp's smaller, wider-tracked line (22/11 ratio scaled into the site's clamp system,
   so it holds at desktop and 375px). Shared selector → every page inherits it. */
.wordmark-link { justify-self: center; }
.wordmark-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);   /* 400 — subpixel rendering restored (smoothing removed); see §7 */
}
.wordmark-text .l1 { font-size: clamp(17px, 1.8vw, 21px); letter-spacing: 0.09em; white-space: nowrap; }   /* comp l1 22px scaled to the wordmark clamp */
.wordmark-text .l2 { font-size: clamp(8.5px, 0.9vw, 11px); letter-spacing: 0.40em; text-indent: 0.40em; margin-top: 8px; white-space: nowrap; }   /* comp l2: half-scale, wide track + indent compensation */

/* Nav — letterspaced caps, hairline underline for hover + current page */
.nav { display: flex; justify-content: end; gap: clamp(16px, 2vw, 30px); }
.nav a {
  font-weight: var(--weight-semibold);   /* 600 — 11px caps rendering compensation, not a redesign (see §7) */
  opacity: 0.85;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: opacity var(--duration-fast) var(--ease-quiet),
              border-color var(--duration-fast) var(--ease-quiet);
}
.nav a:hover { opacity: 1; border-bottom-color: currentColor; }
.nav a[aria-current="page"] { opacity: 1; border-bottom-color: currentColor; }

/* Mobile toggle — letterspaced MENU / CLOSE text control, no icon.
   Label is CSS-generated so the HTML carries no extra copy. */
.menu-toggle {
  display: none;
  justify-self: end;
  background: transparent;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  color: inherit;
}
.menu-toggle::after { content: "Menu"; }
.menu-toggle[aria-expanded="true"]::after { content: "Close"; }

/* ---------- Page hero (interior pages) ---------- */
/* Values lifted from design-system/homepage_directions/about.html .div-hero */
.page-hero-light {
  position: relative;
  background: var(--surface-page);
  border-bottom: 1px solid var(--hairline);
  padding-block: clamp(48px, 6vw, 96px) clamp(40px, 5vw, 72px);
}
.page-hero-light .h2 {
  max-width: 20ch;
  margin-top: 20px;
  font-size: clamp(38px, 5vw, 78px);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
}
.page-hero-light .body-lede {
  max-width: 58ch;
  margin-top: 28px;
  font-size: var(--text-body-sm);
  line-height: 1.78;
  color: var(--text-secondary);
}

/* Aperture — the system's one hairline signature. Decorative only. */
.aperture { display: inline-flex; line-height: 0; }
.aperture svg { width: 30px; height: auto; }
.aperture path { fill: none; stroke: var(--hairline-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.aperture.inv path { stroke: var(--hairline-inverse-strong); }
.section-break {
  display: flex; justify-content: center;
  padding-block: clamp(40px, 6vw, 72px);
}
/* Hero aperture — pinned to the hero's bottom hairline, straddling the rule on an
   ivory chip. Mirrors design-system/homepage_directions/about.html .div-hero .aperture.
   The in-flow wrapper is collapsed so no empty band forms below the lede. */
.page-hero-light .section-break { padding: 0; min-height: 0; }
.page-hero-light .aperture {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  background: var(--surface-page);
  padding: 0 14px;
}

/* ---------- Feature columns — hairline top rule, small-caps label, body ---------- */
.feature { border-top: 1px solid var(--hairline); padding-top: 26px; }
.feature .body { margin-top: 18px; max-width: 40ch; }
/* One-rule convention: a feature triad directly under the hero's border-bottom
   would double the boundary hairline — drop the feature top-rule there so the
   section border is the single rule (BUILD §0 hairline convention). */
.page-hero-light + .section .feature { border-top: 0; }

/* ---------- Principals ---------- */
.principals-grid { align-items: start; }
.principal .photo { min-height: clamp(360px, 40vw, 520px); }
.principal .small-caps { color: var(--text-muted); }

/* ---------- Photography — full-bleed / hairline-boxed, flat scrim, no radius ---------- */
.photo {
  position: relative;
  background-color: var(--ink-soft);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.photo-portrait { background-position: center top; }   /* never crop a head (0A rule 5) */
.photo-stuart { background-image: url("../photos/principal-stuart.jpg"); }
.photo-jeff   { background-image: url("../photos/principal-jeff.jpg"); }

/* ---------- Quote / italic standfirst ---------- */
.quote-shell { display: flex; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface-dark);
  color: var(--text-inverse);
  padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
}
.site-footer .kicker { color: var(--text-inverse-soft); }
.footer-sig { display: block; margin: 0 auto clamp(36px, 5vw, 60px) var(--page-gutter); }
.footer-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 8vw, 120px);
}
.email-link { border-bottom: 1px solid var(--hairline-inverse-strong); padding-bottom: 2px; }
.email-link:hover { border-bottom-color: var(--text-inverse); }
.footer-fine { font-size: 12.5px; line-height: 1.7; opacity: 0.72; max-width: 62ch; }
.footer-legal { margin-top: clamp(40px, 5vw, 64px); }
.copyright-line { font-size: 12px; opacity: 0.6; }

/* ---------- Forms — hairline underline fields (bottom-border only) ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.form-field.full { grid-column: 1 / -1; }
.form-label { display: block; margin-bottom: 12px; color: var(--text-inverse-soft); }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  background: transparent;
  color: var(--text-inverse);
  border: 0;
  border-bottom: 1px solid var(--hairline-inverse-strong);
  border-radius: var(--radius);
  padding: 10px 0 12px;
  transition: border-color var(--duration-fast) var(--ease-quiet);
}
.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover { border-bottom-color: var(--text-inverse); }
.form-field textarea { min-height: 96px; resize: vertical; }

/* ---------- Buttons — hairline box, faint wash on hover, no radius ---------- */
.button {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--text-inverse);
  background: transparent;
  border: 1px solid var(--hairline-inverse-strong);
  border-radius: var(--radius);
  padding: 16px 24px;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-quiet),
              border-color var(--duration-fast) var(--ease-quiet);
}
.button:hover { background: var(--hover-wash-dark); border-color: var(--text-inverse); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .site-header { grid-template-columns: auto 1fr auto; gap: 16px; }
  /* Mobile unaffected by the two-size lockup: both lines reset to the prior uniform 16px
     stacked treatment (l1/l2 same size + track), so the header reads as before at ≤768px. */
  .wordmark-text .l1, .wordmark-text .l2 { font-size: 16px; letter-spacing: 0.14em; }
  .wordmark-text .l2 { text-indent: 0.14em; margin-top: 3px; }
  .page-hero-light .h2 { font-size: clamp(32px, 8.8vw, 44px); }   /* locked .div-hero mobile size */
  .menu-toggle {
    display: inline-flex;
    font-size: var(--text-kicker);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    display: none;
    flex-direction: column;
    gap: 0;
    background: var(--surface-page);
    border-bottom: 1px solid var(--hairline);
    z-index: 30;
  }
  .site-header { position: relative; }
  .nav.open { display: flex; }
  .nav a {
    padding: 16px var(--page-gutter);
    border-bottom: 1px solid var(--hairline);
    opacity: 1;
  }
  .nav a[aria-current="page"] { border-bottom-color: var(--hairline); color: var(--text-accent); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-3 { gap: 0; }
  .feature { padding-block: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* ==========================================================================
   Homepage (site/index.html) — the one bespoke composition.
   Measures/paddings lifted from design-system/homepage_directions/homepage.html.
   Reuses the foundation (tokens/type/footer/nav/focus/header) unchanged; adds
   home-only layout below. The header is the shared light ruled header on its own
   ivory row above the full-bleed hero — identical to interior pages.
   Hairline convention: each section carries a single border-bottom; triads use
   vertical column border-right only — never a section border AND a column
   top-rule together, so no doubled hairlines.
   ========================================================================== */
.sheet { max-width: 1360px; margin: 0 auto; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }
.sheet .body { font-size: var(--text-body-sm); line-height: 1.78; }

/* Wordmark lockup now lives on the shared .wordmark-text (see Header section)
   so About and every interior page render the identical frozen identity. */

/* Hero — full-bleed photograph, flat near-black scrim, ivory type at the foot */
.hero { position: relative; border-bottom: 1px solid var(--hairline); }
.hero .photo-home-hero {
  position: absolute; inset: 0;
  background-image: url("../photos/home-hero.jpg");
  /* comp's own hero value governs; edge-grazing chimney tip at the top is acceptable (0A rule 3) */
  background-size: cover; background-position: center 58%;
}
.hero .photo-home-hero::after { content: ""; position: absolute; inset: 0; background: var(--scrim-photo); }
.hero-content {
  position: relative; z-index: 1;
  min-height: clamp(460px, 52vw, 680px);
  display: flex; align-items: flex-end;
  padding: clamp(44px, 5vw, 84px) clamp(24px, 3vw, 44px);
  color: var(--text-inverse);
}
.hero-content h1 { margin: 0; font-size: clamp(46px, 6vw, 96px); line-height: 1.02; letter-spacing: var(--tracking-display); }

/* Subtitle band — the letterspaced line lifted onto ivory, aperture on the rule */
.subtitle-band { position: relative; border-bottom: 1px solid var(--hairline); padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 44px); }
.subtitle-band p { margin: 0; max-width: 620px; font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; line-height: 2.05; color: var(--text-muted); }
.subtitle-band .aperture { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); background: var(--surface-page); padding: 0 14px; }

/* Statement — measured cell with side label */
.statement { display: grid; grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr); border-bottom: 1px solid var(--hairline); }
.statement .side { padding: clamp(28px, 3vw, 44px); border-right: 1px solid var(--hairline); }
.statement .side .kicker { color: var(--text-muted); }
.statement .main { padding: clamp(44px, 5vw, 80px) clamp(24px, 3vw, 44px); }
.statement h2 { margin: 0; max-width: 24ch; font-size: clamp(28px, 2.9vw, 44px); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
.statement p { max-width: 58ch; margin: 24px 0 0; }

/* Divisions — shared-border triad (section border-bottom + vertical rules only) */
.divisions { border-bottom: 1px solid var(--hairline); }
.divisions .lead { padding: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--hairline); }
.divisions .lead .kicker { display: block; color: var(--text-muted); }
.divisions .lead h2 { margin: 12px 0 0; font-size: clamp(24px, 2.4vw, 36px); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
.division-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.division-cell { padding: clamp(28px, 3vw, 44px); border-right: 1px solid var(--hairline); min-height: 230px; display: flex; flex-direction: column; }
.division-cell:last-child { border-right: 0; }
.division-cell .small-caps { color: var(--text-primary); }
.division-cell p { margin: 18px 0 0; flex: 1; }
.division-cell p strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.division-cell .link { align-self: start; margin-top: 24px; border-bottom: 1px solid var(--hairline-strong); padding-bottom: 7px; }

/* Selected Situations — framed plates; type on ivory, never on the photo */
.situations { border-bottom: 1px solid var(--hairline); }
.situations .label { padding: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--hairline); }
.situation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plate { display: flex; flex-direction: column; border-right: 1px solid var(--hairline); color: inherit; }
.plate:last-child { border-right: 0; }
.plate .plate-photo { height: clamp(260px, 26vw, 400px); margin: clamp(20px, 2vw, 32px); margin-bottom: 0; background-size: cover; background-position: center; border: 1px solid var(--hairline); transition: border-color var(--duration-fast) var(--ease-quiet); }
.photo-indian-card { background-image: url("../photos/indian-hero.jpg"); background-position: center; }   /* covered-porch view reads symmetric */
.photo-spring-card { background-image: url("../photos/spring-122-round-hill.jpg"); background-position: center 42%; }   /* estate chimneys/ridge held high; any vertical crop eats foreground lawn, not roof */
.plate .data { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; padding: clamp(20px, 2vw, 32px); }
.plate h3 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.16; letter-spacing: var(--tracking-title); }
.plate .data-main .small-caps { display: block; margin-top: 12px; color: var(--text-accent); }
.plate .view { border-bottom: 1px solid var(--hairline-strong); padding-bottom: 7px; color: var(--text-primary); }
.plate:hover .plate-photo { border-color: var(--hairline-strong); }

/* The dark band — flat ink, inset within the sheet */
.work { padding: clamp(20px, 2vw, 32px); border-bottom: 1px solid var(--hairline); }
.work .cell { position: relative; background: var(--surface-dark); color: var(--text-inverse); padding: clamp(56px, 7vw, 104px) clamp(28px, 4vw, 64px); }
.work h2 { margin: 0; max-width: 22ch; font-size: clamp(28px, 3vw, 46px); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
.work p { max-width: 62ch; margin: 24px 0 0; }
.work .axis-v { position: absolute; right: 44px; top: 0; bottom: 0; width: 1px; background: var(--hairline-inverse); }
.work .axis-h { position: absolute; right: 0; top: 50%; width: 88px; height: 1px; background: var(--hairline-inverse); }

/* Principles — shared-border triad (section border-bottom + vertical rules only) */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--hairline); }
.principle { padding: clamp(28px, 3vw, 44px); border-right: 1px solid var(--hairline); }
.principle:last-child { border-right: 0; }
.principle .small-caps { color: var(--text-primary); }
.principle p { max-width: 340px; margin: 16px 0 0; }

/* Homepage mobile — hero flips to type-on-ivory with the photo below.
   The header is the shared light ruled row above the hero (foundation mobile rules). */
@media (max-width: 768px) {
  .sheet { border-left: 0; border-right: 0; }
  .hero { display: flex; flex-direction: column; }
  .hero-content { order: 1; position: static; min-height: 0; color: var(--text-primary); background: var(--surface-page); padding: clamp(40px, 9vw, 60px) 24px clamp(32px, 7vw, 48px); }
  .hero-content h1 { font-size: clamp(26px, 7vw, 46px); }   /* longer full-sentence hero — sized so "residential investment" (longest line) fits ≤375px without clipping */
  .hero .photo-home-hero { position: static; order: 2; height: clamp(240px, 62vw, 360px); border-top: 1px solid var(--hairline); }
  .hero .photo-home-hero::after { display: none; }
  .statement, .division-grid, .situation-grid, .principles { grid-template-columns: 1fr; }
  .statement .side, .division-cell, .plate, .principle { border-right: 0; }
  .statement .side, .division-cell, .principle, .plate { border-bottom: 1px solid var(--hairline); }
  .division-cell:last-child, .principle:last-child, .plate:last-child { border-bottom: 0; }
  .work .axis-v { right: 24px; }
}


/* ==========================================================================
   Division pages (development / homes / capital) — the sheet composition.
   Measures lifted from design-system/homepage_directions/{development,homes,
   capital}.html. Reuses the foundation unchanged: the shared light ruled
   .site-header inside the sheet, the frozen identity, the aperture-on-hairline
   signature, the .situations plates, and the shared .site-footer outside the
   sheet (all identical to the homepage). Hairline convention holds: each
   section owns a single border-bottom; ruled cells add vertical border-right
   only — never a section border AND a column top-rule together.
   The three pages share ONE hero treatment (.div-hero) at the foundation's
   20ch/58ch measure — the comps' per-page 16–18ch heroes are deliberately
   NOT forked in.
   ========================================================================== */

/* Division hero — typographic, on ivory; the foundation 20ch/58ch measure,
   set in the sheet idiom (section padding, aperture straddling the bottom rule). */
.div-hero {
  position: relative;
  background: var(--surface-page);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(48px, 6vw, 96px) clamp(24px, 3vw, 44px) clamp(40px, 5vw, 72px);
}
.div-hero .kicker { color: var(--text-muted); }
.div-hero h1 {
  max-width: 20ch;
  margin-top: 20px;
  font-size: clamp(38px, 5vw, 78px);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
}
.div-hero p {
  max-width: 58ch;
  margin-top: 28px;
  font-size: var(--text-body-sm);
  line-height: 1.78;
  color: var(--text-secondary);
}
.div-hero .aperture {
  position: absolute; left: 50%; bottom: 0;
  transform: translate(-50%, 50%);
  background: var(--surface-page);
  padding: 0 14px;
}

/* Split row — a framed photo cell beside a measured copy cell, sharing a rule.
   The vertical rule sits on the visual-left cell; DOM order drives desktop
   sides; .reverse lets a copy-first DOM (mobile copy-on-top) still show the
   photo on the left at desktop. */
.split { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--hairline); }
/* Vertical divider between the two equal cells, drawn as a centered pseudo-rule
   so it can start below the hero aperture without a border touching the mark. */
.split::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px; background: var(--hairline); }
/* When a split sits directly under the hero, drop the divider below the aperture
   row so the mark breathes (matches the un-collided aperture on home/About). */
.div-hero + .split::before { top: 30px; }
.split .photo-cell { padding: clamp(20px, 2vw, 32px); }
.split .photo-cell .photo { display: block; width: 100%; height: 100%; min-height: clamp(300px, 30vw, 480px); border: 1px solid var(--hairline); }
.split .copy-cell { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 4vw, 64px) clamp(24px, 3vw, 44px); }
.split .copy-cell .kicker { color: var(--text-muted); }
.split h2 { max-width: 22ch; margin-top: 18px; font-size: clamp(26px, 2.6vw, 40px); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
.split p { max-width: 54ch; margin-top: 24px; }
/* The divider is the .split::before rule above; variants only set cell order. */
.split.reverse .photo-cell { order: -1; }

/* Triad — three ruled cells on warm paper */
.triad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--hairline); background: var(--surface-alt); }
.triad .cell { padding: clamp(28px, 3vw, 44px); border-right: 1px solid var(--hairline); }
.triad .cell:last-child { border-right: 0; }
.triad .small-caps { display: block; line-height: 1.7; color: var(--text-primary); }
.triad p { max-width: 340px; margin-top: 16px; }

/* Review (Capital) — a lead cell over an ivory triad, more generous cells */
.review { border-bottom: 1px solid var(--hairline); }
.review .lead { padding: clamp(44px, 6vw, 88px) clamp(24px, 3vw, 44px) clamp(36px, 4vw, 64px); border-bottom: 1px solid var(--hairline); }
.review .lead .kicker { color: var(--text-muted); }
.review .lead h2 { max-width: 26ch; margin-top: 18px; font-size: clamp(26px, 2.6vw, 40px); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
.review .triad { background: transparent; border-bottom: 0; }
.review .triad .cell { padding: clamp(36px, 4.5vw, 66px) clamp(28px, 3vw, 44px); }
.review .triad p { max-width: 320px; }

/* Dark band — flat ink, inset within the sheet; kicker + heading + copy + a
   caps action link. .spacious is Capital's deliberately airier close. */
.band { padding: clamp(20px, 2vw, 32px); border-bottom: 1px solid var(--hairline); }
.band .cell { position: relative; overflow: hidden; background: var(--surface-dark); color: var(--text-inverse); padding: clamp(48px, 6vw, 90px) clamp(28px, 4vw, 64px); }
.band .kicker { color: var(--text-inverse-soft); }
.band h2 { max-width: 22ch; margin-top: 20px; font-size: clamp(28px, 3vw, 46px); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
.band p { max-width: 62ch; margin-top: 24px; color: var(--text-inverse-soft); font-size: var(--text-body-sm); line-height: 1.78; }
.band .action {
  display: inline-flex; margin-top: 30px;
  font-family: var(--font-sans); font-size: var(--text-kicker);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-medium);
  color: var(--text-inverse);
  border-bottom: 1px solid var(--hairline-inverse-strong); padding-bottom: 7px;
  transition: border-color var(--duration-fast) var(--ease-quiet);
}
.band .action:hover { border-bottom-color: var(--text-inverse); }
.band .axis-v { position: absolute; right: 44px; top: 0; bottom: 0; width: 1px; background: var(--hairline-inverse); }
.band .axis-h { position: absolute; right: 0; top: 50%; width: 88px; height: 1px; background: var(--hairline-inverse); }
.band.spacious .cell { padding: clamp(56px, 8vw, 120px) clamp(28px, 4vw, 64px); }
.band.spacious p { max-width: 58ch; }

/* Division split photos — CSS backgrounds (decorative; no new alt copy).
   Deliberate focal points per Section 0A rules 3–4 (one position per class). */
.photo-spring-land { background-image: url("../photos/spring-122-round-hill.jpg"); background-position: center 42%; }   /* estate chimneys/ridge held high; crop eats foreground lawn, not roof */
.photo-homes-build { background-image: url("../photos/indian-kitchen.jpg"); background-position: center 55%; }   /* interior down-bias; holds island + view, keeps ceiling from dominating */
.photo-capital-room { background-image: url("../photos/indian-gallery-07-full.jpg"); background-position: center 85%; }   /* full-frame portrait original of the dark sink; bottom-bias grounds counter in lower third + vanity base + floor sliver (indian-dark-room.jpg is a landscape re-crop where vertical position is inert) */

@media (max-width: 768px) {
  .div-hero h1 { font-size: clamp(32px, 8.8vw, 46px); }
  .split, .triad, .review .triad { grid-template-columns: 1fr; }
  .split::before, .div-hero + .split::before { display: none; }   /* no vertical divider when stacked */
  .split.reverse .photo-cell { order: 0; }        /* mobile: DOM order — copy on top */
  .split > * + * { border-top: 1px solid var(--hairline); }   /* rule between stacked cells */
  .split .photo-cell .photo { min-height: clamp(220px, 58vw, 300px); }
  .triad .cell { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .triad .cell:last-child { border-bottom: 0; }
  .review .triad .cell:last-child { border-bottom: 0; }
  .band .axis-v { right: 24px; }
}


/* ==========================================================================
   Contact page — typographic hero + hairline-divided info/form grid.
   Measures lifted from design-system/homepage_directions/contact.html. Reuses
   the shared header, .div-hero (foundation 20ch/58ch), aperture, footer, and
   the shared .form-grid/.form-field system — recolored here for the ivory
   surface. The duplicate footer form is hard-removed (BUILD §4, sanctioned
   deletion); .no-footer-form just collapses the footer grid to one column. The
   hero aperture is lifted to the comp's bottom-right placement; the .info
   divider sits at 45% (0.9fr of 2.0fr), well clear of it — no collision.
   ========================================================================== */

/* Contact hero — the comp's bottom-right aperture (design-system contact.html
   .hero-band): inside the frame, above the bottom padding, hidden on mobile. */
.div-hero-contact { padding-bottom: clamp(48px, 6vw, 96px); }
.div-hero-contact .aperture {
  left: auto; right: clamp(24px, 3vw, 44px); bottom: clamp(48px, 6vw, 96px);
  transform: none; background: none; padding: 0;
}
.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border-bottom: 1px solid var(--hairline); }
.contact .info { padding: clamp(40px, 5vw, 76px) clamp(24px, 3vw, 44px); border-right: 1px solid var(--hairline); }
.contact .info .kicker { color: var(--text-muted); }
.contact .info p { margin-top: 18px; }
.contact .info .group + .group { margin-top: clamp(36px, 4vw, 56px); }
.contact .info a { border-bottom-color: var(--hairline-strong); }
.contact .info a:hover { border-bottom-color: var(--text-primary); }
.contact .form-cell { padding: clamp(40px, 5vw, 76px) clamp(24px, 3vw, 44px); }
.contact .form-cell .kicker { color: var(--text-muted); }

/* Light-surface form fields (the shared field system is styled for the dark footer) */
.contact .form-label { color: var(--text-muted); }
.contact .form-field input,
.contact .form-field textarea,
.contact .form-field select { color: var(--text-primary); border-bottom-color: var(--hairline-strong); }
.contact .form-field input:hover,
.contact .form-field textarea:hover,
.contact .form-field select:hover { border-bottom-color: var(--text-primary); }
.contact .button { color: var(--text-primary); border-color: var(--hairline-strong); }
.contact .button:hover { background: var(--hover-wash-light); border-color: var(--text-primary); }

/* Footer form is hard-removed on Contact + Thank-You (BUILD §4); collapse the
   footer grid to the single remaining column. */
.no-footer-form .footer-grid { grid-template-columns: 1fr; }

@media (max-width: 768px) {
  .contact { grid-template-columns: 1fr; }
  .contact .info { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .div-hero-contact .aperture { display: none; }   /* comp hides the hero aperture on mobile */
}


/* ==========================================================================
   Thank-You — a single quiet confirmation on ivory, then the footer. The page
   is short, so <main> fills the viewport (.fill-viewport): the bordered sheet
   grows and the full-width footer sits at the base (mirrors the comp's
   min-height sheet). Footer form hard-removed per BUILD §4. Measures lifted
   from design-system/homepage_directions/thank-you.html.
   ========================================================================== */
.fill-viewport { display: flex; flex-direction: column; min-height: 100vh; }
.fill-viewport > .sheet { flex: 1 0 auto; }

.confirm { padding: clamp(72px, 11vw, 168px) clamp(24px, 3vw, 44px); border-bottom: 1px solid var(--hairline); }
.confirm .kicker { color: var(--text-muted); }
.confirm h1 { max-width: 18ch; margin-top: 26px; font-size: clamp(40px, 5vw, 76px); line-height: 1.05; letter-spacing: var(--tracking-display); }
.confirm p { max-width: 58ch; margin-top: 26px; }
.confirm .return {
  display: inline-flex; margin-top: 34px;
  font-family: var(--font-sans); font-size: var(--text-kicker);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-medium);
  color: var(--text-primary);
  border-bottom: 1px solid var(--hairline-strong); padding-bottom: 7px;
  transition: border-color var(--duration-fast) var(--ease-quiet);
}
.confirm .return:hover { border-bottom-color: var(--text-primary); }

@media (max-width: 768px) {
  .confirm h1 { font-size: clamp(34px, 9.6vw, 48px); }
}


/* ==========================================================================
   Project page — 1 Indian Chase Drive. Sheet composition matching
   design-system/homepage_directions/project-1-indian-chase.html: a location
   kicker strip, a full-bleed photo hero (type-on-ivory below the photo on
   mobile), a dek band, the reused .statement + .band primitives, an ink
   recognition award grid, and the nine-image gallery in a 1·2·3·2·1 rhythm.
   Gallery anchors keep the baseline photo-only-item + href (main.js lightbox)
   and aria-labels, so copy stays byte-identical.
   ========================================================================== */

/* Location kicker strip — caps on ivory, above the hero photo (never fine type over a photo) */
.kicker-strip { padding: clamp(20px, 2.4vw, 34px) clamp(24px, 3vw, 44px); border-bottom: 1px solid var(--hairline); }
.kicker-strip .kicker { color: var(--text-muted); }

/* Full-bleed photo hero — display name over a flat scrim */
.proj-hero { position: relative; border-bottom: 1px solid var(--hairline); }
.proj-hero-media { position: absolute; inset: 0; background-size: cover; background-position: center 55%; }  /* comp's hero value (0A rule 3: full-bleed follows the comp) */
.proj-hero-media::after { content: ""; position: absolute; inset: 0; background: var(--scrim-photo); }
.proj-hero-inner { position: relative; z-index: 1; min-height: clamp(440px, 56vw, 720px); display: flex; align-items: flex-end; padding: clamp(44px, 5vw, 84px) clamp(24px, 3vw, 44px); color: var(--text-inverse); }
.proj-hero-inner h1 { margin: 0; max-width: 12ch; font-size: clamp(46px, 6.4vw, 104px); line-height: 1.02; letter-spacing: var(--tracking-display); }
.photo-indian-bleed { background-image: url("../photos/indian-hero.jpg"); }

/* Dek band — narrative line + division link, aperture straddling the rule */
.dek-band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 44px); border-bottom: 1px solid var(--hairline); }
.dek-band p { margin: 0; max-width: 62ch; font-size: var(--text-body-sm); line-height: 1.78; color: var(--text-secondary); }
.dek-band .division { white-space: nowrap; color: var(--text-primary); }   /* static division attribution — de-linked, no underline/hover */
.dek-band .aperture { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); background: var(--surface-page); padding: 0 14px; }
.dek-links { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 16px; }   /* division attribution + boxed brochure action, stacked in the dek's auto column */
/* Boxed action on light ground (brochure) — hairline box, caps; hover darkens border only. No radius, no shadow. */
.dek-action { display: inline-flex; font-size: var(--text-kicker); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-medium); color: var(--text-primary); background: transparent; border: 1px solid var(--hairline-strong); padding: 15px 22px; transition: border-color var(--duration-fast) var(--ease-quiet); }
.dek-action:hover { border-color: var(--text-primary); }

/* Recognition award grid — inside the shared .band ink cell */
.award-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--hairline-inverse); }
.award { padding: clamp(24px, 2.6vw, 38px) clamp(20px, 2.2vw, 32px) 0 0; border-right: 1px solid var(--hairline-inverse); }
.award:last-child { border-right: 0; }
.award .small-caps { display: block; line-height: 1.7; color: var(--text-inverse); }
.award p { margin-top: 12px; color: var(--text-inverse-soft); font-size: var(--text-body-sm); line-height: 1.7; }
.award:nth-child(2), .award:nth-child(3) { padding-left: clamp(20px, 2.2vw, 32px); }

/* ---------- Homes enrichment (2026-07-07 package) — reuses existing primitives ---------- */

/* Process band — the ink .band + numbered .award cells (Indian Chase HOBI grammar), widened
   to five steps; same hairline-divided numbered cells, no new visual vocabulary. */
.process .award-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.process .award:nth-child(n+2) { padding-left: clamp(16px, 1.6vw, 26px); }   /* uniform left pad across 5 cells */

/* Photo band — full-width still in the Indian Chase bleed-row grammar (not a lightbox).
   indian-gallery-05-full.jpg is 2000×1501 (1.33:1); in a ~1360×598 bleed band (2.27:1) the
   width binds under cover → ~423px vertical overflow (live axis). center 45% holds the
   covered soffit + water horizon (~52% of frame), cropping the redundant foreground decking. */
.photo-band { border-bottom: 1px solid var(--hairline); }
.photo-band-img { display: block; width: 100%; height: clamp(300px, 44vw, 640px); object-fit: cover; object-position: center 45%; }

/* Testimonial band — quiet ivory, hairline rules; three serif quotes, caps attributions. */
.testimonials { border-bottom: 1px solid var(--hairline); }
.testimonials .label { padding: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--hairline); }
.testimonials .label .kicker { color: var(--text-muted); }
.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.q-cell { margin: 0; padding: clamp(32px, 3.4vw, 56px) clamp(24px, 2.6vw, 40px); border-right: 1px solid var(--hairline); }
.q-cell:last-child { border-right: 0; }
.q-text { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; letter-spacing: 0.005em; color: var(--text-primary); }
.q-cell cite { display: block; margin-top: 20px; font-style: normal; color: var(--text-muted); }
.t-note { padding: 0 clamp(24px, 3vw, 44px) clamp(28px, 3vw, 44px); text-align: center; font-size: var(--text-caption); letter-spacing: 0.02em; color: var(--text-muted); }

/* Gallery — nine images, 1·2·3·2·1 rhythm; bleed rows edge-to-edge, framed rows hairline plates */
.gallery { border-bottom: 1px solid var(--hairline); padding-bottom: clamp(24px, 2.6vw, 40px); }
.gallery .label { position: relative; padding: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--hairline); }
.gallery .label .kicker { color: var(--text-muted); }
.gallery .label .aperture { position: absolute; right: clamp(24px, 3vw, 44px); top: 50%; transform: translateY(-50%); }
.g-row { display: grid; border-bottom: 1px solid var(--hairline); }
.g-row:last-child { border-bottom: 0; }
.g-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-cell { display: block; border-right: 1px solid var(--hairline); }
.g-cell:last-child { border-right: 0; }
.g-img { display: block; transition: opacity var(--duration-fast) var(--ease-quiet); }   /* .photo gives cover/position */
.g-img:hover { opacity: 0.9; }
.g-row.bleed .g-cell { border-right: 0; }
.g-row.bleed .g-img { height: clamp(300px, 44vw, 640px); }
.g-row.framed .g-cell { padding: clamp(20px, 2vw, 32px); }
.g-row.framed .g-img { height: clamp(220px, 22vw, 340px); border: 1px solid var(--hairline); }
.g-row.cols-3.framed .g-img { height: clamp(180px, 17vw, 260px); }

/* Per-image gallery crops — deliberate focal points per §0A (architecture biases up
   to hold rooflines; interiors bias down). One commented position per image. */
.gp-01 { background-position: center 55%; }   /* exterior — hold roofline but ground it with foreground */
.gp-02 { background-position: center 65%; }   /* portico — bring in the steps/base of the entry */
.gp-03 { background-position: center 62%; }   /* kitchen — hold pendant silhouettes, keep island/floor */
.gp-04 { background-position: center 60%; }   /* stair — favor the rail run below */
.gp-05 { background-position: center 60%; }   /* breezeway — more deck */
.gp-06 { background-position: center 65%; }   /* white bath — more of the room below the window */
.gp-07 { background-position: center 85%; }   /* dark sink — the sink IS the subject; it sits low in frame */
.gp-08 { background-position: center 75%; }   /* marble powder room — full basin block */
.gp-09 { background-position: center 85%; }   /* wood bar — faucet + counter, lose ceiling wood */

/* ---------- Lightbox — dependency-free (main.js), opacity fades only (BUILD §4) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: clamp(20px, 5vw, 72px);
  background: rgba(16, 15, 12, 0.92);      /* flat near-black scrim, no gradient/blur */
  opacity: 0; transition: opacity var(--duration-base) var(--ease-quiet);
}
.lightbox.open { display: flex; opacity: 1; }
body.lightbox-lock { overflow: hidden; }
.lightbox-inner { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; max-width: min(1100px, 100%); max-height: 100%; }
.lightbox-close {
  order: -1; background: transparent; border: 0; padding: 6px 2px; cursor: pointer;
  color: var(--text-inverse);
  font-family: var(--font-sans); font-size: var(--text-kicker);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-medium);
}
.lightbox-image-wrap { max-width: 100%; max-height: 82vh; }
.lightbox-image { display: block; max-width: 100%; max-height: 82vh; object-fit: contain; border: 1px solid var(--hairline-inverse-strong); }
.lightbox-caption { color: var(--text-inverse-soft); font-size: var(--text-caption); letter-spacing: 0.04em; }
.lightbox :focus-visible { outline-color: var(--hairline-inverse-strong); }

@media (max-width: 768px) {
  .proj-hero { display: flex; flex-direction: column; }
  .proj-hero-media { position: static; order: 2; height: clamp(240px, 62vw, 360px); border-top: 1px solid var(--hairline); }
  .proj-hero-media::after { display: none; }
  .proj-hero-inner { order: 1; position: static; min-height: 0; color: var(--text-primary); background: var(--surface-page); padding: clamp(36px, 8vw, 56px) 24px clamp(32px, 7vw, 48px); }
  .proj-hero-inner h1 { font-size: clamp(40px, 11vw, 56px); }
  .dek-band { grid-template-columns: 1fr; align-items: start; }
  .award-grid { grid-template-columns: 1fr; }
  .award { border-right: 0; border-bottom: 1px solid var(--hairline-inverse); padding: 22px 0; }
  .award:nth-child(2), .award:nth-child(3) { padding-left: 0; }
  .award:last-child { border-bottom: 0; padding-bottom: 0; }
  .quote-grid { grid-template-columns: 1fr; }
  .q-cell { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .q-cell:last-child { border-bottom: 0; }
  .photo-band-img { height: clamp(240px, 60vw, 360px); }
  .g-row.cols-2, .g-row.cols-3 { grid-template-columns: 1fr; }
  .g-cell { border-right: 0; }
  .g-row.framed .g-cell { border-bottom: 1px solid var(--hairline); }
  .g-row.framed .g-cell:last-child { border-bottom: 0; }
  .g-row.framed .g-img, .g-row.cols-3.framed .g-img { height: clamp(220px, 58vw, 300px); }
}


/* ==========================================================================
   Project page — Spring Farms at Round Hill. Restyled to
   design-system/homepage_directions/spring-farms.html, reusing the project
   foundation (.kicker-strip, .proj-hero, .dek-band, .statement, .band) and
   adding the parcels + partner primitives. Copy stays byte-identical to the
   baseline; the site plan keeps its photo-only-item anchor (main.js lightbox).
   ========================================================================== */

/* Full-bleed hero — clean estate twin of the hero rendering. spring-hero.jpg and
   spring-detail-hero.jpg both carry a baked-in "Davis Chase Homes" disclaimer, which
   BUILD §3 forbids rendering; this is the same rendering, watermark-free and already
   shipped on Homes/Development. Comp hero value center 62% (§0A rule 3: full-bleed
   follows the comp) — chimneys/ridgeline sit at ~40% of frame, held safely. */
.photo-spring-bleed { background-image: url("../photos/spring-122-round-hill.jpg"); background-position: center 62%; }

/* The Parcels — label row, intro, framed site plan, four hairline-boxed parcel cards */
.parcels { border-bottom: 1px solid var(--hairline); }
.parcels .label { position: relative; padding: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--hairline); }
.parcels .label .kicker { color: var(--text-muted); }
.parcels .label .aperture { position: absolute; right: clamp(24px, 3vw, 44px); top: 50%; transform: translateY(-50%); }
.parcels .intro { padding: clamp(44px, 5vw, 72px) clamp(24px, 3vw, 44px) clamp(32px, 3.4vw, 48px); }
.parcels .intro h2 { margin: 0; max-width: 26ch; font-size: clamp(28px, 2.9vw, 44px); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
.parcels .intro p { max-width: 66ch; margin: 24px 0 0; }

/* Framed site plan — aspect-ratio matches the source (3183:2060) so cover shows the
   whole plan (labels + all four pins) uncropped; stays a photo-only-item lightbox. */
.siteplan-frame { display: block; margin: 0 clamp(24px, 3vw, 44px) clamp(24px, 2.6vw, 40px); aspect-ratio: 3183 / 2060; border: 1px solid var(--hairline); background-position: center; transition: opacity var(--duration-fast) var(--ease-quiet); }
.siteplan-frame:hover { opacity: 0.94; }

/* Parcel cards — 4-across, hairline boxes, 210px photo, centered text, hover = border only */
.parcel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2vw, 30px); padding: clamp(8px, 1vw, 12px) clamp(24px, 3vw, 44px) clamp(36px, 4vw, 56px); }
.parcel { display: block; border: 1px solid var(--hairline); background: var(--surface-raised); transition: border-color var(--duration-fast) var(--ease-quiet); }
.parcel:hover { border-color: var(--hairline-strong); }   /* hover = border-color only (parcel anchors lightbox to the front master) */
/* Parcel front elevations: card cell ~1.40:1 vs image ~1.71:1 → height binds, vertical
   position INERT; horizontal-center holds the symmetric façade whole. */
.parcel .photo { display: block; height: 210px; background-size: cover; background-position: center; }
.parcel-body { padding: 26px 22px 30px; text-align: center; }
.parcel-body .acres { color: var(--text-muted); }
.parcel-body h3 { margin: 14px 0 0; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.16; letter-spacing: var(--tracking-title); }
.parcel-body .meta { display: block; margin-top: 14px; color: var(--text-accent); }

/* Design Partner — one quiet centered section on a narrow measure */
.partner { padding: clamp(56px, 7vw, 110px) clamp(24px, 3vw, 44px); border-bottom: 1px solid var(--hairline); text-align: center; }
.partner .kicker { color: var(--text-muted); }
.partner h2 { margin: 20px auto 0; max-width: 22ch; font-size: clamp(28px, 2.9vw, 44px); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
.partner p { max-width: 62ch; margin: 24px auto 0; }

@media (max-width: 1080px) {
  .parcel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Process band tablet wrap — 5 → 2 columns (parcel-grid precedent); switch the divider
     grammar to horizontal rules like the ≤768 stack, since cells wrap across rows. */
  .process .award-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process .award { border-right: 0; border-bottom: 1px solid var(--hairline-inverse); padding: 22px 0; }
  .process .award:nth-child(n+2) { padding-left: 0; }
  .process .award:nth-child(even) { padding-left: clamp(20px, 3vw, 32px); }
  .process .award:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 768px) {
  .parcel-grid { grid-template-columns: 1fr; }
  .process .award-grid { grid-template-columns: 1fr; }
  .process .award:nth-child(even) { padding-left: 0; }   /* single column — no col-2 indent */
}