/*
 * Henley Contracting - site stylesheet
 *
 * 1. Fonts          Self-hosted copies of the prototype's Google Fonts files
 * 2. Base           Browser reset (same as the prototype build)
 * 3. Tokens         Colour palette taken from the prototype + semantic aliases
 * 4. Prototype      The approved prototype's stylesheet, unchanged except where
 *                   noted (hero/photo use <img> instead of background images)
 * 5. Controls       Tabs, slider and select styling the prototype got from its
 *                   UI library, reproduced from computed styles
 * 6. Templates      Phase 2 additions for inner pages, built only from the
 *                   prototype's own values
 *
 * Unlayered rules (sections 3, 4, 6) always win over @layer base / utilities,
 * which is how the prototype's cascade works.
 */

@layer base, utilities;

/* ==== 1. Fonts ========================================================= */

/* DM Sans is a variable font: one file serves weights 400-700. */
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/dm-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Libre Caslon Display";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/libre-caslon-display-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Libre Caslon Display";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/libre-caslon-display-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==== 2. Base ========================================================== */

@layer base {
    *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: "DM Sans", Arial, sans-serif; -webkit-tap-highlight-color: transparent; }
    hr { height: 0; color: inherit; border-top-width: 1px; }
    h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
    a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }
    b, strong { font-weight: bolder; }
    small { font-size: 80%; }
    table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
    summary { display: list-item; }
    ol, ul, menu { list-style: none; }
    img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; }
    img, video { max-width: 100%; height: auto; }
    button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: transparent; border-radius: 0; }
    ::placeholder { opacity: 1; color: color-mix(in oklab, currentcolor 50%, transparent); }
    textarea { resize: vertical; }
    button, input:where([type="button"], [type="reset"], [type="submit"]) { -webkit-appearance: button; appearance: button; }
    [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
}

/* ==== 3. Tokens ======================================================== */

/* Semantic aliases: use these in new templates. */
:root {
    --color-primary: #1e2b34;          /* navy: CTA, dark sections */
    --color-text: #1b2730;             /* body text */
    --color-background: #f4f3ef;       /* page background */
    --color-surface: #e8ebe8;          /* tinted section (portal) */
    --color-accent: #ae936c;           /* brass accent */
    --color-accent-hover: #a88a5e;
    --color-accent-light: #d5b883;
    --color-muted: #5f696a;            /* secondary copy */
    --color-rule: #aeb6b6;             /* hairline rules */
    --color-footer: #17232b;

    --font-sans: "DM Sans", Arial, sans-serif;
    --font-serif: "Libre Caslon Display", Georgia, serif;
}

/* Full palette, every value exactly as used by the prototype. */
:root {
  --hc-brass: #ae936c;
  --hc-brass-46: #997951;
  --hc-brass-49: #9c815e;
  --hc-brass-51: #a58a61;
  --hc-brass-51-2: #a4875e;
  --hc-brass-51-3: #a8895e;
  --hc-brass-52: #ab8c60;
  --hc-brass-54: #ad9065;
  --hc-brass-58: #ba9b6c;
  --hc-brass-hover: #a88a5e;
  --hc-brass-overline: #9e8057;
  --hc-ink: #1b2730;
  --hc-mist-78: #c3cccd;
  --hc-mist-85: #d5dcda;
  --hc-mist-88: #dde3e1;
  --hc-mist-90: #e2e8e6;
  --hc-navy: #1e2b34;
  --hc-navy-15: #192832;
  --hc-navy-15-2: #1b2931;
  --hc-navy-18: #243039;
  --hc-navy-18-2: #22313a;
  --hc-navy-19: #26333b;
  --hc-navy-19-2: #25333a;
  --hc-navy-deep: #17232b;
  --hc-paper: #f4f3ef;
  --hc-sand: #d5b883;
  --hc-sand-62: #c4a87a;
  --hc-sand-62-2: #c6a977;
  --hc-sand-62-3: #c3a47a;
  --hc-sand-64: #c5ac83;
  --hc-sand-64-2: #c9aa7b;
  --hc-sand-67: #c9b18c;
  --hc-sand-71: #d4bd98;
  --hc-sand-75: #e0c9a0;
  --hc-sand-79: #e4d0ad;
  --hc-sand-88: #e7e4db;
  --hc-sand-88-2: #eee5d4;
  --hc-sand-90: #eee9df;
  --hc-sand-93: #f3f1e9;
  --hc-slate-30: #41515a;
  --hc-slate-39: #5d696b;
  --hc-slate-39-2: #5f696a;
  --hc-slate-39-3: #5e696a;
  --hc-slate-40: #5e6a6e;
  --hc-slate-40-2: #5f6b6e;
  --hc-slate-41: #5e6c73;
  --hc-slate-43: #667174;
  --hc-slate-43-2: #637078;
  --hc-slate-44: #65737a;
  --hc-slate-49: #77817e;
  --hc-slate-50: #7b8684;
  --hc-slate-52: #808a89;
  --hc-slate-58: #8b9a9d;
  --hc-slate-59: #899ca2;
  --hc-slate-66: #9eaeb3;
  --hc-slate-72: #afbbc0;
  --hc-slate-72-2: #b1bfc0;
  --hc-slate-73: #b5c0c0;
  --hc-stone-63: #9da5a4;
  --hc-stone-66: #a1adae;
  --hc-stone-69: #adb5b4;
  --hc-stone-70: #aeb6b6;
  --hc-stone-79: #c5ccca;
  --hc-stone-81: #cbd0cd;
  --hc-stone-82: #cfd1cf;
  --hc-stone-84: #d3d8d5;
  --hc-stone-85: #d8dbd8;
  --hc-stone-87: #dce2df;
  --hc-stone-88: #e0e2de;
  --hc-stone-88-2: #e1e3df;
  --hc-stone-89: #e0e4e2;
  --hc-stone-89-2: #e3e5e1;
  --hc-stone-90: #e8e9e4;
  --hc-stone-91: #e8e9e5;
  --hc-stone-92: #e8ebe8;
  --hc-stone-95: #f1f3ef;
  --hc-stone-97: #f8f8f5;
  --hc-white: #ffffff;
}

/* ==== 4. Prototype stylesheet ========================================= */

html { scroll-behavior: smooth; }
body { color: var(--hc-ink); background: var(--hc-paper); margin: 0; font-family: "DM Sans", Arial, sans-serif; }
* { box-sizing: border-box; }
a { text-decoration: none; }
button { cursor: pointer; }
section { scroll-margin-top: 76px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, .stats-grid strong, .dashboard-greeting h3, .project-caption h3 { font-family: "Libre Caslon Display", Georgia, serif; font-weight: 400; }
h1 em, h2 em { font-weight: 400; }
::selection { color: var(--hc-white); background: var(--hc-brass-58); }
.section-shell { width: min(100% - 100px, 1380px); margin: auto; }
.site-nav { z-index: 40; background: var(--hc-paper); border-bottom: 1px solid var(--hc-stone-82); justify-content: space-between; align-items: center; gap: 24px; height: 76px; padding: 0 50px; display: flex; position: sticky; top: 0; }
.brand { color: var(--hc-navy-15); white-space: nowrap; align-items: center; gap: 12px; display: flex; }
.brand-mark { font-family: Georgia, serif; font-size: 39px; line-height: 1; }
.brand-mark span, .footer-brand span { color: var(--hc-brass); }
.brand-name { letter-spacing: 0.18em; font-size: 13px; font-weight: 700; }
.brand-name span { letter-spacing: 0.13em; font-size: 11px; font-weight: 500; }
.nav-links { align-items: center; gap: 35px; display: flex; }
.nav-links a { letter-spacing: 0.06em; color: var(--hc-navy-19); font-size: 12px; transition: color 0.2s; }
.nav-links a:hover { color: var(--hc-brass-54); }
.nav-cta, .light-button, .submit-button { letter-spacing: 0.055em; justify-content: space-between; align-items: center; gap: 28px; font-size: 12px; font-weight: 600; transition: background 0.25s, color 0.25s, transform 0.25s; display: inline-flex; }
.nav-cta { color: var(--hc-white); background: var(--hc-navy); padding: 15px 18px; }
.nav-cta:hover, .submit-button:hover { color: var(--hc-white); background: var(--hc-brass-hover); transform: translateY(-2px); }
.menu-button { color: var(--hc-navy); background: none; border: 0; display: none; }
.brand img { object-fit: contain; width: 184px; height: auto; max-height: 55px; display: block; }
.nav-services { position: relative; }
.nav-services summary { cursor: pointer; letter-spacing: 0.06em; color: var(--hc-navy-19); align-items: center; gap: 7px; font-size: 12px; list-style: none; display: flex; }
.nav-services summary::-webkit-details-marker { display: none; }
.nav-services summary svg { transition: transform 0.2s; }
.nav-services[open] summary svg { transform: rotate(180deg); }
.nav-services summary:hover, .nav-services[open] summary { color: var(--hc-brass-54); }
:is(.nav-services summary:focus-visible, .nav-links a:focus-visible) { outline-offset: 5px; outline: var(--hc-brass-hover) solid 2px; }
.services-menu { z-index: 50; background: var(--hc-paper); border: 1px solid var(--hc-stone-82); min-width: 245px; padding: 9px 0; position: absolute; top: calc(100% + 27px); left: -20px; box-shadow: rgba(20, 35, 42, 0.125) 0 14px 24px; }
.services-menu a { white-space: nowrap; padding: 12px 20px; font-size: 13px; display: block; }
.services-menu a:hover { background: var(--hc-stone-90); }
.services-menu--grouped { display: grid; grid-template-columns: repeat(2, auto); min-width: 0; padding: 0; }
.services-group { padding: 20px 0 10px; }
.services-group + .services-group { border-left: 1px solid var(--hc-stone-84); }
.services-group-label { letter-spacing: 0.18em; color: var(--hc-brass-46); text-transform: uppercase; padding: 0 20px 8px; font-size: 10px; font-weight: 700; display: block; }
@media (max-width: 760px) {
  .brand img { width: 148px; }
}
@media (min-width: 1251px) and (max-width: 1450px) {
  .site-nav { padding: 0 32px; }
  .nav-links { gap: 21px; }
}
.hero { color: var(--hc-white); background: var(--hc-navy); height: min(790px, -76px + 100svh); min-height: 620px; position: relative; overflow: hidden; }
.hero-image { object-fit: cover; object-position: 50% 53%; width: 100%; height: 100%; max-width: none; animation: 22s ease-in-out 0s infinite alternate none running heroPan; position: absolute; inset: 0; }
.hero-shade { background: linear-gradient(90deg, rgba(12, 23, 30, 0.84), rgba(12, 23, 30, 0.52) 47%, rgba(12, 23, 30, 0.08) 100%), linear-gradient(rgba(0, 0, 0, 0) 58%, rgba(12, 23, 30, 0.48)); position: absolute; inset: 0; }
@keyframes heroPan { 
  0% { transform: scale(1); }
  100% { transform: scale(1.065); }
}
.hero-topline { letter-spacing: 0.18em; color: var(--hc-sand-88); border-top: 1px solid rgba(255, 255, 255, 0.47); justify-content: space-between; padding-top: 15px; font-size: 10px; display: flex; position: absolute; top: 35px; left: 50px; right: 50px; }
.hero-content { max-width: 990px; position: absolute; bottom: 155px; left: clamp(42px, 8vw, 125px); }
.eyebrow, .overline { letter-spacing: 0.2em; font-size: 11px; font-weight: 700; }
.eyebrow { color: var(--hc-sand-75); align-items: center; gap: 10px; display: flex; }
.dash { background: var(--hc-sand); width: 21px; height: 1px; }
.hero h1 { letter-spacing: -0.04em; max-width: 990px; margin: 31px 0 43px; font-size: clamp(60px, 7vw, 116px); line-height: 0.99; }
.hero h1 em { color: var(--hc-sand-79); }
.hero-bottom { align-items: end; gap: 65px; display: flex; }
.hero-bottom p { color: var(--hc-stone-89); max-width: 390px; margin: 0; font-size: 16px; line-height: 1.65; }
.light-button { color: var(--hc-ink); white-space: nowrap; background: var(--hc-paper); padding: 18px 21px; }
.light-button:hover { background: var(--hc-sand); transform: translateY(-2px); }
.hero-scroll, .hero-index, .image-disclaimer { letter-spacing: 0.18em; font-size: 10px; position: absolute; bottom: 34px; }
.hero-scroll { color: var(--hc-white); align-items: center; gap: 13px; display: flex; left: 50px; }
.hero-index { right: 50px; }
.image-disclaimer { letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.686); font-size: 10px; left: 50%; transform: translate(-50%); }
.section-kicker { letter-spacing: 0.18em; color: var(--hc-slate-40); border-top: 1px solid var(--hc-stone-70); justify-content: space-between; padding-top: 16px; font-size: 10px; font-weight: 700; display: flex; }
.intro { padding-top: 100px; padding-bottom: 115px; }
.intro-heading { grid-template-columns: 1.2fr 0.8fr; column-gap: 60px; margin: 87px 0 70px; display: grid; }
.intro-heading .overline { color: var(--hc-brass-overline); grid-column: 1 / -1; margin-bottom: 22px; }
.intro-heading h2, .split-heading h2, .portal h2, .portfolio h2, .consult h2 { letter-spacing: -0.035em; margin: 0; font-size: clamp(56px, 6vw, 91px); line-height: 1.03; }
.intro-copy { color: var(--hc-slate-39); align-self: end; max-width: 410px; margin: 0; font-size: 17px; line-height: 1.75; }
.stats-grid { border-top: 1px solid var(--hc-stone-70); border-bottom: 1px solid var(--hc-stone-70); grid-template-columns: repeat(3, 1fr); display: grid; }
.stats-grid article { min-height: 210px; padding: 28px 42px 30px 0; }
.stats-grid article + article { border-left: 1px solid var(--hc-stone-70); padding-left: 42px; }
.stat-no { letter-spacing: 0.18em; color: var(--hc-brass-51); font-size: 10px; font-weight: 700; }
.stats-grid strong { white-space: nowrap; margin: 25px 0 8px; font-size: clamp(43px, 4vw, 68px); line-height: 1; display: block; }
.stats-grid strong i { font-weight: 400; }
.stats-grid strong span { vertical-align: top; color: var(--hc-brass); font-size: 0.55em; }
.stats-grid p { color: var(--hc-slate-40-2); max-width: 300px; margin: 0; font-size: 14px; line-height: 1.65; }
.behind { padding-bottom: 120px; }
.split-heading, .portfolio-heading { grid-template-columns: 1.3fr 0.7fr; align-items: end; gap: 70px; padding: 75px 0 49px; display: grid; }
.split-heading .overline, .portfolio-heading .overline { color: var(--hc-brass-overline); margin-bottom: 23px; }
.split-heading > p, .portfolio-heading > p { color: var(--hc-slate-39-2); max-width: 410px; margin: 0; font-size: 16px; line-height: 1.75; }
.compare { background: var(--hc-navy-18); aspect-ratio: 2 / 1; height: auto; max-height: 720px; position: relative; overflow: hidden; } /* v1.82: same shape as the photos (2:1), so nothing is cropped */
.compare-base, .compare-top, .compare-top img { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0; }
.compare-top { overflow: hidden; }
.compare-line { pointer-events: none; border-left: 2px solid var(--hc-white); position: absolute; top: 0; bottom: 0; }
.compare-handle { color: var(--hc-navy); background: var(--hc-white); border-radius: 50%; place-items: center; width: 50px; height: 50px; font-size: 20px; display: grid; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.267) 0 4px 24px; }
.compare-label { color: var(--hc-navy-15); letter-spacing: 0.16em; background: rgba(244, 243, 239, 0.93); padding: 11px 14px; font-size: 10px; font-weight: 700; position: absolute; bottom: 22px; }
.left-label { left: 22px; }
.right-label { right: 22px; }
.slider-row { border-bottom: 1px solid var(--hc-stone-82); align-items: center; gap: 22px; padding: 25px 0 16px; display: flex; }
.slider-row button { color: var(--hc-navy-18-2); letter-spacing: 0.16em; background: none; border: 0; padding: 10px 0; font-size: 11px; font-weight: 700; }
.slider-row button:hover { color: var(--hc-brass); }
.compare-slider { flex: 1 1 0%; }
.section-note { justify-content: space-between; gap: 20px; padding-top: 20px; display: flex; }
.section-note span { letter-spacing: 0.16em; font-size: 10px; font-weight: 700; }
.section-note p { color: var(--hc-slate-43); max-width: 470px; margin: 0; font-size: 12px; line-height: 1.5; }
.portal { background: var(--hc-stone-92); padding: 95px 0 110px; }
.portal-grid { grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 8%; padding-top: 80px; display: grid; }
.portal-story .overline { color: var(--hc-brass-overline); margin-bottom: 25px; }
.portal-story > p:not(.overline) { color: var(--hc-slate-39-3); max-width: 390px; margin: 27px 0 74px; font-size: 17px; line-height: 1.7; }
.portal-foot { letter-spacing: 0.14em; border-top: 1px solid var(--hc-stone-70); align-items: center; gap: 15px; padding-top: 17px; font-size: 10px; font-weight: 700; display: flex; }
.dashboard { background: var(--hc-stone-97); border: 1px solid var(--hc-stone-81); box-shadow: rgba(23, 37, 43, 0.125) 0 23px 55px; }
.dashboard-header { letter-spacing: 0.13em; border-bottom: 1px solid var(--hc-stone-85); justify-content: space-between; align-items: center; height: 60px; padding: 0 28px; font-size: 10px; font-weight: 700; display: flex; }
.dashboard-header > span:first-child { align-items: center; gap: 13px; display: flex; }
.dashboard-logo { color: var(--hc-white); letter-spacing: 0; background: var(--hc-navy); place-items: center; width: 31px; height: 31px; font-family: Georgia, serif; font-size: 21px; display: grid; }
.dashboard-demo { color: var(--hc-brass-46); }
.dashboard-body { padding: 30px; }
.dashboard-greeting { justify-content: space-between; align-items: center; margin-bottom: 27px; display: flex; }
.dashboard-greeting small { letter-spacing: 0.16em; color: var(--hc-brass-overline); font-size: 10px; font-weight: 700; }
.dashboard-greeting h3 { margin: 6px 0 0; font-size: 38px; }
.week-label { letter-spacing: 0.1em; align-items: center; gap: 6px; font-size: 10px; display: flex; }
.dashboard-main { grid-template-columns: 1.2fr 0.8fr; gap: 15px; display: grid; }
.activity, .photo-preview { background: var(--hc-white); border: 1px solid var(--hc-stone-88); }
.activity-title, .photo-head { letter-spacing: 0.13em; border-bottom: 1px solid var(--hc-stone-89-2); justify-content: space-between; align-items: center; min-height: 52px; padding: 17px; font-size: 9px; font-weight: 700; display: flex; }
.activity-title span { color: var(--hc-stone-63); font-size: 9px; }
.log { text-align: left; color: var(--hc-navy-19-2); background: var(--hc-white); border-width: 0 0 1px; border-style: none none solid; border-color: currentcolor currentcolor var(--hc-stone-91); border-image: none; align-items: center; gap: 12px; width: 100%; padding: 16px; display: flex; }
.log:hover, .log.active { background: var(--hc-stone-95); }
.log > span:nth-child(2) { flex: 1 1 0%; }
.log-icon { color: var(--hc-brass-49); background: var(--hc-sand-90); place-items: center; width: 34px; height: 34px; display: grid; }
.log strong, .log small { display: block; }
.log strong { margin-bottom: 4px; font-size: 11px; }
.log small { color: var(--hc-slate-52); font-size: 10px; }
.photo-head { justify-content: flex-start; gap: 8px; }
.photo-head span { margin-left: auto; }
.photo-image { object-fit: cover; object-position: 50% center; width: 100%; height: 180px; display: block; }
.photo-preview p { margin: 14px 14px 2px; font-size: 12px; font-weight: 700; }
.photo-preview > small { color: var(--hc-slate-50); margin: 0 14px 14px; font-size: 10px; display: block; }
.portfolio { padding-top: 105px; padding-bottom: 105px; }
.portfolio-heading { padding-top: 70px; }
.filter-tabs { border-top: 1px solid var(--hc-stone-69); border-bottom: 1px solid var(--hc-stone-69); flex-wrap: wrap; gap: 0 !important; width: 100% !important; height: auto !important; padding: 0 !important; display: flex !important; }
.filter-tab { letter-spacing: 0.05em; border-width: 0 1px 0 0 !important; border-style: none solid none none !important; border-color: currentcolor var(--hc-stone-79) currentcolor currentcolor !important; border-image: none !important; border-radius: 0 !important; flex: 0 1 auto !important; height: 56px !important; padding: 18px 28px !important; font-size: 11px !important; }
.filter-tab[data-state="active"] { color: var(--hc-navy-15) !important; background: var(--hc-stone-88-2) !important; }
.filter-tab::after { background: var(--hc-brass) !important; height: 2px !important; bottom: 0 !important; }
.project-grid { grid-template-columns: repeat(3, 1fr); gap: 23px; padding-top: 28px; display: grid; }
.project-image { background: var(--hc-navy-18); height: clamp(240px, 30vw, 410px); position: relative; overflow: hidden; }
.project-image img { object-fit: cover; width: 100%; height: 100%; transition: transform 0.6s; }
.project-card:hover img { transform: scale(1.05); }
.project-overlay { color: var(--hc-white); background: rgba(30, 43, 52, 0.86); justify-content: space-between; padding: 17px; font-size: 12px; transition: transform 0.3s; display: flex; position: absolute; bottom: 0; left: 0; right: 0; transform: translateY(100%); }
.project-card:hover .project-overlay, .project-card:focus-within .project-overlay { transform: translateY(0px); }
.project-caption { justify-content: space-between; gap: 12px; padding-top: 18px; display: flex; }
.project-caption span { letter-spacing: 0.16em; color: var(--hc-brass-51-2); font-size: 10px; font-weight: 700; }
.project-caption h3 { margin: 8px 0 0; font-size: 28px; }
.project-area { white-space: nowrap; align-items: start; gap: 8px; margin-top: 3px; font-size: 11px; display: flex; }
.portfolio-disclaimer { color: var(--hc-slate-49); margin: 22px 0 0; font-size: 12px; line-height: 1.5; }
.region-strip { background: var(--hc-stone-87); }
.region-inner { justify-content: space-between; align-items: center; gap: 25px; padding-top: 31px; padding-bottom: 31px; display: flex; }
.region-inner > span, .region-inner a { letter-spacing: 0.15em; font-size: 10px; font-weight: 700; }
.region-inner p { margin: 0; font-family: "Libre Caslon Display", Georgia, serif; font-size: 25px; }
.region-inner p span { color: var(--hc-brass-52); padding: 0 10px; }
.region-inner a { color: var(--hc-navy); align-items: center; gap: 8px; display: flex; }
.region-inner a:hover { color: var(--hc-brass-51-3); }
.consult { color: var(--hc-sand-93); background: var(--hc-navy); padding: 90px 0 105px; }
.consult .section-kicker { color: var(--hc-slate-72); border-color: var(--hc-slate-43-2); }
.consult-grid { grid-template-columns: 1fr 1fr; gap: 12%; padding-top: 82px; display: grid; }
.consult .overline { color: var(--hc-sand-62); }
.consult h2 { font-size: clamp(58px, 6vw, 94px); }
.consult h2 em { color: var(--hc-sand-67); }
.consult-grid > div > p:not(.overline) { color: var(--hc-slate-73); max-width: 390px; margin: 31px 0 42px; font-size: 17px; line-height: 1.75; }
.direct-email { color: var(--hc-sand-88-2); border-bottom: 1px solid var(--hc-slate-58); align-items: center; gap: 15px; width: max-content; padding-bottom: 10px; font-size: 15px; display: flex; }
.direct-email:hover { color: var(--hc-sand-62-2); }
.consult-form { border-top: 1px solid var(--hc-slate-41); padding-top: 17px; }
.consult-form > p { color: var(--hc-sand-64); letter-spacing: 0.15em; margin-bottom: 34px; font-size: 10px; font-weight: 700; }
.consult-form label { letter-spacing: 0.17em; color: var(--hc-mist-78); margin: 24px 0 8px; font-size: 10px; font-weight: 700; display: block; }
.consult-form input, .custom-select { text-align: left; color: var(--hc-white) !important; width: 100% !important; height: 50px !important; box-shadow: none !important; background: none !important; border-width: 0 0 1px !important; border-style: none none solid !important; border-color: currentcolor currentcolor var(--hc-slate-44) !important; border-image: none !important; border-radius: 0 !important; padding: 8px 0 !important; font-size: 16px !important; }
.consult-form input::placeholder { color: var(--hc-stone-66); }
.custom-select[data-placeholder] { color: var(--hc-stone-66) !important; }
.form-two { grid-template-columns: 1fr 1fr; gap: 28px; display: grid; }
.submit-button { color: var(--hc-navy-15-2); background: var(--hc-sand-71); border: 0; width: 100%; margin-top: 38px; padding: 19px; }
.form-helper { color: var(--hc-slate-72-2); margin-top: 15px; font-size: 11px; line-height: 1.5; }
.footer { color: var(--hc-mist-90); background: var(--hc-navy-deep); }
.footer-main { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 50px; padding: 65px 0 75px; display: grid; }   /* v1.51: + services column */
.footer-brand { letter-spacing: 0.2em; font-size: 26px; font-weight: 700; }
.footer-main p { color: var(--hc-slate-66); margin: 16px 0 0; font-size: 13px; line-height: 1.75; }
.footer-main > div:not(:first-child) { flex-direction: column; align-items: start; gap: 12px; display: flex; }
.footer-main > div > span { color: var(--hc-sand-62-3); letter-spacing: 0.16em; margin-bottom: 11px; font-size: 10px; font-weight: 700; }
.footer-main a { color: var(--hc-mist-88); font-size: 13px; }
.footer-main a:hover { color: var(--hc-sand-64-2); }
.footer-main > div:nth-child(3) p { margin: 0; }
.footer-portal { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--hc-sand-62-3) !important; font-size: 12px !important; letter-spacing: 0.04em; }   /* v1.29 */
.footer-portal:hover { color: var(--hc-sand-64-2) !important; }
.portal-foot { justify-content: space-between; flex-wrap: wrap; row-gap: 14px; }   /* v1.32: text + Client Login button */
.portal-foot > span { display: inline-flex; align-items: center; gap: 15px; }
.portal-login { letter-spacing: 0.055em; }
.footer-social { display: flex; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }   /* v1.23 */
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--hc-slate-30); border-radius: 50%; color: var(--hc-mist-88); font-size: 11px; transition: color 0.2s, border-color 0.2s; }
.footer-social a:hover { color: var(--hc-sand-64-2); border-color: var(--hc-sand-64-2); }
.footer-social a:focus-visible { outline: 2px solid var(--hc-sand-64-2); outline-offset: 3px; }
.footer-base { letter-spacing: 0.12em; color: var(--hc-slate-59); border-top: 1px solid var(--hc-slate-30); justify-content: space-between; gap: 15px; padding: 25px 0; font-size: 10px; display: flex; }
.footer-base a { color: var(--hc-mist-85); }
@media (max-width: 1250px) {
  .nav-cta { margin-left: auto; }
  .menu-button { display: block; }
  .nav-links { background: var(--hc-paper); flex-direction: column; align-items: stretch; gap: 0; padding: 18px 32px 24px; display: none; position: absolute; top: 76px; left: 0; right: 0; box-shadow: rgba(20, 35, 42, 0.145) 0 16px 20px; }
  .nav-links.is-open { display: flex; }
  .nav-links a { border-bottom: 1px solid var(--hc-stone-84); padding: 13px 0; font-size: 14px; }
  .nav-services summary { border-bottom: 1px solid var(--hc-stone-84); justify-content: space-between; padding: 13px 0; font-size: 14px; }
  .services-menu { min-width: 0; box-shadow: none; background: var(--hc-stone-90); border: 0; padding: 2px 16px; position: static; }
  .services-menu a { white-space: normal; font-size: 14px; }
  .services-menu--grouped { display: block; padding: 2px 16px; }
  .services-group { padding: 14px 0 6px; }
  .services-group + .services-group { border-left: 0; border-top: 1px solid var(--hc-stone-84); }
  .services-group-label { padding: 0 0 4px; }
  .services-group a:last-child { border-bottom: 0; }
  .menu-button { margin-left: auto; }
}
@media (max-width: 1100px) {
  .brand-name span { display: none; }
  .section-shell { width: min(100% - 64px, 1380px); }
  .site-nav { padding: 0 32px; }
  .hero-topline { left: 32px; right: 32px; }
  .hero-scroll { left: 32px; }
  .hero-index { right: 32px; }
  .portal-grid { gap: 4%; }
  .dashboard-main { grid-template-columns: 1fr; }
  .photo-preview { display: none; }
  .region-inner p { font-size: 21px; }
}
@media (max-width: 760px) {
  .site-nav { height: 68px; padding: 0 20px; }
  .brand-name { font-size: 11px; }
  .nav-cta { margin-left: auto; padding: 12px; font-size: 10px; }
  .menu-button { display: block; }
  .nav-links { background: var(--hc-paper); flex-direction: column; align-items: stretch; gap: 0; padding: 22px; display: none; position: absolute; top: 68px; left: 0; right: 0; box-shadow: rgba(20, 35, 42, 0.145) 0 16px 20px; }
  .nav-links.is-open { display: flex; }
  .nav-links a { border-bottom: 1px solid var(--hc-stone-84); padding: 14px; font-size: 14px; }
  .services-group-label { padding: 0 14px 4px; }
  .section-shell { width: calc(100% - 40px); }
  .hero { height: 690px; min-height: 0; }
  .hero-image { object-position: 56% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(12, 23, 30, 0.86), rgba(12, 23, 30, 0.43)), linear-gradient(rgba(0, 0, 0, 0), rgba(12, 23, 30, 0.533)); }
  .hero-topline { top: 24px; left: 20px; right: 20px; }
  .hero-topline span:last-child { display: none; }
  .hero-content { bottom: 105px; left: 25px; right: 25px; }
  .hero h1 { margin: 23px 0; font-size: clamp(54px, 10vw, 78px); }
  .hero-bottom { display: block; }
  .hero-bottom p { margin-bottom: 25px; font-size: 14px; }
  .hero-scroll { bottom: 25px; left: 20px; }
  .hero-index { bottom: 25px; right: 20px; }
  .image-disclaimer { display: none; }
  .intro { padding-top: 70px; padding-bottom: 75px; }
  .intro-heading, .split-heading, .portfolio-heading { margin: 0; padding: 65px 0 36px; display: block; }
  .intro-heading .intro-copy, .split-heading > p, .portfolio-heading > p { margin-top: 25px; }
  .intro-heading h2, .split-heading h2, .portal h2, .portfolio h2, .consult h2 { font-size: clamp(52px, 11vw, 74px); }
  .stats-grid { grid-template-columns: 1fr; }
  .stats-grid article, .stats-grid article + article { border-bottom: 1px solid var(--hc-stone-69); border-left: 0; min-height: 0; padding: 26px 0; }
  .stats-grid article:last-child { border-bottom: 0; }
  .stats-grid strong { font-size: 55px; }
  .behind { padding-bottom: 75px; }
  .compare { aspect-ratio: 3 / 2; height: auto; min-height: 0; } /* v1.82: phones: small side trim only (was a tall 400px crop) */
  .compare-base, .compare-top img { object-position: center center; }
  .compare-label { padding: 8px; font-size: 8px; bottom: 12px; }
  .left-label { left: 10px; }
  .right-label { right: 10px; }
  .slider-row { gap: 12px; }
  .slider-row button { font-size: 9px; }
  .section-note { display: block; }
  .section-note p { margin-top: 8px; }
  .portal { padding: 70px 0; }
  .portal-grid { padding-top: 65px; display: block; }
  .portal-story > p:not(.overline) { margin-bottom: 25px; }
  .portal-foot { margin-bottom: 35px; }
  .dashboard-body { padding: 18px; }
  .dashboard-header { padding: 0 18px; }
  .dashboard-greeting h3 { font-size: 30px; }
  .project-grid { grid-template-columns: 1fr; gap: 35px; }
  .project-image { height: 300px; }
  .project-overlay { transform: none; }
  .portfolio { padding: 75px 0; }
  .portfolio-heading { padding: 50px 0 35px; }
  .filter-tab { height: 47px !important; padding: 14px !important; font-size: 10px !important; }
  .region-inner { display: block; }
  .region-inner p { margin: 13px 0 17px; font-size: 22px; }
  .region-inner a { display: inline-flex; }
  .consult { padding: 70px 0; }
  .consult-grid { padding-top: 60px; display: block; }
  .consult-grid > div { margin-bottom: 55px; }
  .form-two { gap: 16px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 45px; padding: 55px 0; }
  .footer-main > div:first-child { grid-column: 1 / -1; }
  .footer-base { flex-wrap: wrap; line-height: 1.5; }
  .footer-base span:nth-child(2) { display: none; }
}
@media (max-width: 430px) {
  .brand-mark { font-size: 33px; }
  .brand-name { letter-spacing: 0.1em; }
  .nav-cta { gap: 0; padding: 10px; font-size: 0; }
  .nav-cta svg { width: 19px; height: 19px; }
  .hero h1 { font-size: 53px; }
  .dashboard-header, .activity-title { font-size: 8px; }
  .dashboard-greeting h3 { font-size: 26px; }
  .week-label { display: none; }
  .form-two { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-image { animation: none; }
  *, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==== 5. Controls ====================================================== */
/* Values measured from the prototype's rendered tabs, slider and select. */

@layer utilities {
    .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

    /* --- Reveal slider (native range input) --- */
    .compare-slider { --reveal: 52%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 0; background: transparent; cursor: pointer; touch-action: none; }
    .compare-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 9999px; background: linear-gradient(to right, #1b2730 var(--reveal), #e9e9e4 var(--reveal)); }
    .compare-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 16px; height: 16px; margin-top: -5px; border: 1px solid #1b2730; border-radius: 9999px; background: #ffffff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
    .compare-slider:hover::-webkit-slider-thumb, .compare-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(169, 145, 106, 0.5), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
    .compare-slider::-moz-range-track { height: 6px; border-radius: 9999px; background: #e9e9e4; }
    .compare-slider::-moz-range-progress { height: 6px; border-radius: 9999px; background: #1b2730; }
    .compare-slider::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 16px; border: 1px solid #1b2730; border-radius: 9999px; background: #ffffff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
    .compare-slider:hover::-moz-range-thumb, .compare-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(169, 145, 106, 0.5), 0 1px 3px 0 rgba(0, 0, 0, 0.1); }
    .compare-slider:focus-visible { outline: none; }

    /* --- Project category tabs --- */
    .portfolio-tabs { display: flex; flex-direction: column; gap: 8px; }
    .filter-tabs { display: inline-flex; align-items: center; justify-content: center; color: #5f686b; }
    .filter-tab { position: relative; display: inline-flex; flex: 1 1 0%; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; font-size: 14px; line-height: calc(1.25 / 0.875); font-weight: 500; white-space: nowrap; color: #5f686b; background: transparent; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
    .filter-tab:hover { color: #1b2730; }
    .filter-tab:focus-visible { border-color: #a9916a; outline: 1px solid #a9916a; box-shadow: 0 0 0 3px rgba(169, 145, 106, 0.5); }
    .filter-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: #1b2730; opacity: 0; transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
    .filter-tab[data-state="active"]::after { opacity: 1; }
    .project-panel { flex: 1 1 0%; outline: none; }

    /* --- Select trigger (form) --- */
    .custom-select { display: flex; width: fit-content; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #d8dad8; border-radius: 6px; padding: 8px 12px; font-size: 14px; line-height: calc(1.25 / 0.875); white-space: nowrap; transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1); outline: none; }
    .custom-select[data-placeholder] { color: #5f686b; }
    .custom-select .select-value { display: flex; align-items: center; gap: 8px; overflow: hidden; pointer-events: none; }
    .custom-select svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.5; color: #5f686b; pointer-events: none; }
    select.custom-select option { color: #1b2730; }

    /* --- Select dropdown --- */
    .select-content { position: absolute; z-index: 50; min-width: 8rem; overflow-x: hidden; overflow-y: auto; border: 1px solid #1b2730; border-radius: 6px; background: #ffffff; color: #1b2730; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); animation: select-in 0.15s ease; }
    .select-viewport { padding: 4px; }
    .select-item { position: relative; display: flex; width: 100%; cursor: default; align-items: center; gap: 8px; border-radius: 4px; padding: 6px 32px 6px 8px; font-size: 14px; line-height: 20px; outline: none; user-select: none; }
    .select-item[data-highlighted] { background: #e3d6bf; color: #1b2730; }
    .select-item-indicator { position: absolute; right: 8px; display: flex; width: 14px; height: 14px; align-items: center; justify-content: center; }
    .select-item-indicator svg { width: 16px; height: 16px; color: #5f686b; }
}

@keyframes select-in {
    from { opacity: 0; transform: scale(0.95); }
}

/* ==== 6. Templates (Phase 2) =========================================== */
/* Inner-page patterns. Every value below is borrowed from a prototype rule
   (noted in comments) so new pages stay inside the approved design. */

/* Accessibility helpers */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--color-primary); color: #ffffff; padding: 15px 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.055em; }
.skip-link:focus { left: 12px; top: 12px; }
.visually-hidden, .select-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
address { font-style: normal; }
button.custom-select:focus-visible { outline: 2px solid var(--hc-brass-hover); outline-offset: 4px; }

/* Page header: kicker + split heading (as .intro / .split-heading) */
.page-hero { padding-top: 100px; }
.page-hero h1 { letter-spacing: -0.035em; margin: 0; font-size: clamp(56px, 6vw, 91px); line-height: 1.03; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 0 8px; }
.breadcrumb a { transition: color 0.2s; }
.breadcrumb a:hover { color: var(--hc-brass-54); }
.page-section { padding-bottom: 120px; }

/* Ledger list: services / locations (as .stats-grid) */
.ledger-grid { border-top: 1px solid var(--hc-stone-70); border-bottom: 1px solid var(--hc-stone-70); grid-template-columns: repeat(2, 1fr); display: grid; }
.ledger-grid article { min-height: 210px; padding: 28px 42px 30px 0; scroll-margin-top: 76px; }
.ledger-grid article:nth-child(even) { border-left: 1px solid var(--hc-stone-70); padding-left: 42px; }
.ledger-grid article:nth-child(n+3) { border-top: 1px solid var(--hc-stone-70); }
.ledger-grid h2 { margin: 25px 0 8px; font-family: var(--font-serif); font-size: 38px; font-weight: 400; } /* as .dashboard-greeting h3 */
.ledger-grid p { color: var(--hc-slate-40-2); max-width: 410px; margin: 0; font-size: 14px; line-height: 1.65; }

/* Image placeholder inside a project card (as .project-image) */
.image-placeholder { display: grid; place-items: center; color: var(--hc-stone-70); letter-spacing: 0.16em; font-size: 10px; font-weight: 700; }

@media (max-width: 760px) {
    .page-hero { padding-top: 70px; }
    .page-hero h1 { font-size: clamp(52px, 11vw, 74px); }
    .page-section { padding-bottom: 75px; }
    .ledger-grid { grid-template-columns: 1fr; }
    .ledger-grid article, .ledger-grid article:nth-child(even), .ledger-grid article:nth-child(n+3) { border-top: 0; border-left: 0; border-bottom: 1px solid var(--hc-stone-69); min-height: 0; padding: 26px 0; }
    .ledger-grid article:last-child { border-bottom: 0; }
    .ledger-grid h2 { font-size: 30px; }
}

/* Error pages */
.error-page { padding-bottom: 120px; }

/* /system-test/ (technical page, not public-facing) */
.system-test { padding: 70px 0 120px; }
.system-test h1 { font-size: 56px; margin-bottom: 24px; }
.system-test h2 { margin: 36px 0 10px; font-size: 13px; letter-spacing: 0.16em; font-weight: 700; text-transform: uppercase; }
.system-test__summary { padding: 12px 16px; font-weight: 600; margin-bottom: 12px; }
.system-test__summary--pass { background: #e6efe9; color: #1e5b3a; }
.system-test__summary--fail { background: #f6e3e1; color: #8a2a22; }
.system-test__table { width: 100%; font-size: 14px; }
.system-test__table th, .system-test__table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hc-stone-82); vertical-align: top; overflow-wrap: anywhere; }
.system-test__table th { width: 30%; font-weight: 600; }
.system-test__links { list-style: disc; padding-left: 20px; line-height: 1.9; }
.system-test__links a { text-decoration: underline; }
.system-test__form { margin-top: 28px; }
.system-test__form button { padding: 15px 18px; background: var(--color-primary); color: #ffffff; font-size: 12px; font-weight: 600; letter-spacing: 0.055em; }
.status { display: inline-block; min-width: 52px; text-align: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #ffffff; }
.status--pass { background: #2f7a4f; }
.status--warn { background: #a3621c; }
.status--fail { background: #a22525; }

/* Reveal slider starting position (52%); app.js takes over from here. */
.compare-top { clip-path: inset(0 48% 0 0); }
.compare-line { left: 52%; }

/* Contact page: the consult heading is the page H1 (same style as .consult h2) */
.consult h1 { letter-spacing: -0.035em; margin: 0; font-size: clamp(58px, 6vw, 94px); line-height: 1.03; }
.consult h1 em { color: var(--hc-sand-67); }
/* Header-only pages: same gap as .intro-heading's bottom margin */
.page-hero + .region-strip { margin-top: 70px; }
@media (max-width: 760px) {
    .consult h1 { font-size: clamp(52px, 11vw, 74px); }
    .page-hero + .region-strip { margin-top: 36px; }
}

/* CMS rich text (page content). Type values from the prototype's body copy. */
.prose { max-width: 760px; color: var(--hc-slate-39-2); font-size: 17px; line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 { color: var(--hc-ink); font-family: var(--font-serif); font-weight: 400; line-height: 1.15; margin-top: 1.6em; }
.prose h2 { font-size: 38px; }
.prose h3 { font-size: 28px; }
.prose h4 { font-size: 22px; }
.prose a { color: var(--hc-ink); border-bottom: 1px solid var(--hc-stone-70); }
.prose a:hover { color: var(--hc-brass-54); }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose ol { list-style: decimal; padding-left: 1.2em; }
.prose blockquote { border-left: 2px solid var(--hc-brass); padding-left: 20px; font-family: var(--font-serif); font-size: 24px; line-height: 1.4; color: var(--hc-ink); }
/* v1.25: tables and images in blog posts (imported from the old site). */
.prose li + li { margin-top: 0.4em; }
.prose img { display: block; width: 100%; max-width: 100%; height: auto; margin: 1.6em 0; }
.prose p > img { margin: 0; }
.prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; line-height: 1.55; -webkit-overflow-scrolling: touch; }
.prose th, .prose td { min-width: 150px; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hc-stone-70); text-align: left; vertical-align: top; }
.prose th { color: var(--hc-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-bottom-color: var(--hc-ink); }
.prose th strong { font-weight: 700; }
.prose td strong { color: var(--hc-ink); }
/* v1.25: blog post = article column + sticky side column (contents + call to action). */
.post-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(240px, 300px); justify-content: space-between; column-gap: 80px; align-items: start; }
.post-body h2 { scroll-margin-top: 100px; }
.post-aside { align-self: stretch; }   /* full height, so the inner column can stick */
.post-aside__inner { position: sticky; top: 110px; padding-top: 6px; }
.post-toc { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: toc; border-top: 1px solid var(--hc-stone-82); max-height: calc(100vh - 430px); min-height: 120px; overflow-y: auto; overscroll-behavior: contain; }
.post-toc li { counter-increment: toc; border-bottom: 1px solid var(--hc-stone-82); }
.post-toc a { display: grid; grid-template-columns: 28px 1fr; padding: 11px 0; color: var(--hc-slate-39-2); font-size: 14px; line-height: 1.45; transition: color 0.2s; }
.post-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--hc-brass-51); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; padding-top: 3px; }
.post-toc a:hover, .post-toc a[aria-current] { color: var(--hc-ink); }
.post-aside__cta { margin-top: 34px; padding: 26px 24px 28px; background: var(--hc-navy-deep); color: var(--hc-mist-90); }
.post-aside__cta .stat-no { color: var(--hc-sand-62-3); }
.post-aside__cta p:not(.stat-no) { margin: 12px 0 20px; color: var(--hc-mist-85); font-size: 14px; line-height: 1.65; }
.post-aside__cta .light-button { display: inline-flex; }
/* v1.28: blog list: 4 smaller cards per row */
.project-grid.project-grid--blog { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.project-grid--blog .project-image { height: auto; aspect-ratio: 3 / 2; }
.project-grid--blog .project-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding-top: 14px; }
.project-grid--blog .project-caption > div:first-child { display: contents; }   /* label | date on one line, title below */
.project-grid--blog .project-caption span { grid-row: 1; grid-column: 1; }
.project-grid--blog .project-area { grid-row: 1; grid-column: 2; margin-top: 0; color: var(--hc-slate-59); }
.project-grid--blog .project-caption h3 { grid-row: 2; grid-column: 1 / -1; margin-top: 10px; font-size: 21px; line-height: 1.25; }
@media (max-width: 1100px) { .project-grid.project-grid--blog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .project-grid.project-grid--blog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } }
@media (max-width: 540px) { .project-grid.project-grid--blog { grid-template-columns: 1fr; } .project-grid--blog .project-caption h3 { font-size: 23px; } }
/* v1.28: blog list "Load more" */
.load-more { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 56px; }
.load-more[hidden] { display: none; }
.load-more__count { margin: 0; color: var(--hc-slate-59); }
.load-more__button { border: 0; cursor: pointer; font-family: inherit; }
.load-more__button:focus-visible { outline: 2px solid var(--hc-brass-54); outline-offset: 3px; }
/* v1.27: related articles under a post */
.post-related__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.post-related__head .svc-title { margin: 0; }
.post-related__head .svc-more { margin-top: 0; }
@media (max-width: 1000px) {
    .post-layout { grid-template-columns: minmax(0, 1fr); }
    .post-aside { margin-top: 50px; }
    .post-aside__inner { position: static; }
    .post-toc { display: none; }
    .post-aside .stat-no:first-child { display: none; }
    .post-aside__cta { margin-top: 0; }
}
@media (max-width: 760px) {
    .prose { font-size: 16px; }
    .prose h2 { font-size: 30px; }
}

/* ==== 7. Detail pages (Phase 4) ======================================== */
/* Services, projects, locations, lakes and insights. Same rule as section 6:
   every value is borrowed from a prototype rule (noted in comments). */

/* Whole card / ledger cell is clickable; the link text keeps the heading style. */
.project-card, .ledger-grid article { position: relative; }
.card-link { color: inherit; transition: color 0.2s; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ledger-grid article:hover .card-link { color: var(--hc-brass-54); }                /* as .nav-links a:hover */
.card-link:focus-visible { outline: 2px solid var(--hc-brass-hover); outline-offset: 5px; }

/* Section rhythm (as .behind / .page-section) */
.detail-media, .detail-section { padding-bottom: 120px; }
.detail-section > .section-kicker + .ledger-grid { border-top: 0; }                    /* the kicker rule is the top line */
.ledger-grid h3 { margin: 25px 0 8px; font-family: var(--font-serif); font-size: 38px; font-weight: 400; } /* as .ledger-grid h2 */
.detail-section > .section-kicker + .prose,
.detail-section > .section-kicker + .detail-tags { margin-top: 28px; }        /* as .project-grid padding-top */
.page-hero + .detail-section, .page-hero + .detail-media { padding-top: 0; }

/* Featured image frame (as .compare) */
.detail-figure { margin: 0; }
.detail-figure__frame { background: var(--hc-navy-18); height: min(51vw, 620px); min-height: 350px; overflow: hidden; }
.detail-figure__frame img { object-fit: cover; width: 100%; height: 100%; display: block; }
.media-grid figure { margin: 0; }
.media-grid figcaption { margin-top: 14px; }

/* Fact row (as .stats-grid ledger) */
.detail-facts { padding-bottom: 70px; }                                             /* as .intro-heading margin-bottom */
.detail-facts dl { border-top: 1px solid var(--hc-stone-70); border-bottom: 1px solid var(--hc-stone-70); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0; }
.detail-facts dl > div { padding: 28px 42px 30px 0; }
.detail-facts dl > div + div { border-left: 1px solid var(--hc-stone-70); padding-left: 42px; }
.detail-facts dd { margin: 14px 0 0; font-family: "Libre Caslon Display", Georgia, serif; font-size: 25px; line-height: 1.2; } /* as .region-inner p */
.detail-facts dd a { color: inherit; border-bottom: 1px solid var(--hc-stone-70); transition: color 0.2s; }
.detail-facts dd a:hover { color: var(--hc-brass-54); }
.detail-note { padding-bottom: 28px; }
.detail-note .portfolio-disclaimer { margin: 0; }

/* Tags (as .compare-label) */
.detail-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.detail-tags li { color: var(--hc-navy-15); letter-spacing: 0.16em; border: 1px solid var(--hc-stone-70); padding: 11px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; }

/* Services page: one ledger per category */
.services-group-section > .section-kicker + .ledger-grid { margin-top: 28px; }

@media (max-width: 760px) {
    .detail-media, .detail-section { padding-bottom: 75px; }                          /* as .behind (mobile) */
    .detail-figure__frame { height: 400px; min-height: 0; }                            /* as .compare (mobile) */
    .detail-facts { padding-bottom: 36px; }
    .detail-facts dl { grid-template-columns: 1fr 1fr; }
    .detail-facts dl > div, .detail-facts dl > div + div { border-left: 0; padding: 22px 16px 22px 0; }
    .detail-facts dd { font-size: 22px; }
    .ledger-grid h3 { font-size: 30px; }
}

/* ==== 8. Start Your Project (Phase 5) ================================== */
/* The funnel is the consultation section (.consult / .consult-form) of the approved
   design. New pieces reuse its values: option "chips" as .filter-tab on the dark band,
   review rows as the dashboard ledger, links as .direct-email. */

.funnel { padding-top: 90px; }                                                       /* as .consult */
.funnel-grid { align-items: start; }
.funnel-intro h1 em { color: var(--hc-sand-67); }                                    /* as .consult h2 em */
.funnel-intro > p:not(.overline) { color: var(--hc-slate-73); max-width: 390px; margin: 31px 0 42px; font-size: 17px; line-height: 1.75; }

/* Progress (as .section-kicker labels) */
.funnel-steps { list-style: none; padding: 0; margin: 0 0 42px; border-top: 1px solid var(--hc-slate-41); }
.funnel-steps li { border-bottom: 1px solid var(--hc-slate-41); padding: 13px 0; letter-spacing: 0.15em; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--hc-slate-58); }
.funnel-steps li span { display: inline-block; min-width: 32px; }
.funnel-steps li.is-done, .funnel-steps li.is-done a { color: var(--hc-mist-78); }
.funnel-steps li.is-done a:hover { color: var(--hc-sand-62-2); }
.funnel-steps li.is-current { color: var(--hc-sand-64); }
.funnel-contact { color: var(--hc-slate-73); font-size: 14px; line-height: 1.75; max-width: 390px; }
.funnel-contact a, .funnel-inline-link { color: var(--hc-sand-88-2); border-bottom: 1px solid var(--hc-slate-58); }
.funnel-contact a:hover, .funnel-inline-link:hover { color: var(--hc-sand-62-2); }

/* Questions and fields */
.funnel-question { font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 1.1; margin: 0 0 8px; color: var(--hc-sand-93); } /* as .dashboard-greeting h3 */
.funnel-fieldset { border: 0; padding: 0; margin: 28px 0 0; min-width: 0; }
.funnel-fieldset legend { letter-spacing: 0.17em; color: var(--hc-mist-78); margin: 0 0 12px; padding: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; } /* as .consult-form label */
.funnel-form label:not(.funnel-option):not(.funnel-check) { text-transform: uppercase; }
.funnel-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.funnel-options--inline { grid-template-columns: repeat(2, minmax(0, 140px)); }
.funnel-option { position: relative; margin: 0 !important; display: block !important; letter-spacing: 0.02em !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none; }
.funnel-form .funnel-option input { position: absolute !important; opacity: 0; width: 1px !important; height: 1px !important; margin: 0; padding: 0 !important; border: 0 !important; }
.funnel-option span { display: flex; align-items: center; min-height: 52px; padding: 12px 16px; border: 1px solid var(--hc-slate-44); color: var(--hc-sand-93); line-height: 1.35; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.funnel-option:hover span { border-color: var(--hc-sand-71); }
.funnel-option input:checked + span { background: var(--hc-sand-71); border-color: var(--hc-sand-71); color: var(--hc-navy-15-2); }   /* as .submit-button */
.funnel-option input:focus-visible + span { outline: 2px solid var(--hc-sand-71); outline-offset: 3px; }
.funnel-form textarea { width: 100%; min-height: 110px; resize: vertical; color: var(--hc-white); background: none; border: 1px solid var(--hc-slate-44); border-radius: 0; padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.6; }
.funnel-form textarea:focus, .funnel-form input:focus { outline: 2px solid var(--hc-sand-71); outline-offset: 2px; }
.funnel-form select.custom-select { appearance: none; }
.funnel-form select.custom-select option { color: var(--hc-ink); }
.funnel-help { color: var(--hc-slate-72-2); font-size: 12px; line-height: 1.5; margin: 0 0 10px; }       /* as .form-helper */
.funnel-optional { letter-spacing: 0.05em; text-transform: none; font-weight: 500; color: var(--hc-slate-58); }
.funnel-lake[hidden] { display: none; }
.funnel-error { color: #f1c6b8; font-size: 12px; line-height: 1.5; margin: 8px 0 0; }
.funnel-alert { border: 1px solid #c98f7f; color: #f1c6b8; padding: 12px 14px; font-size: 13px; line-height: 1.5; margin: 0 0 8px; }
.funnel-form [aria-invalid="true"] { border-bottom-color: #c98f7f !important; }

/* Review (as the dashboard ledger rows) */
.funnel-review { border-top: 1px solid var(--hc-slate-41); padding: 16px 0 6px; }
.funnel-review__head { display: flex; justify-content: space-between; letter-spacing: 0.15em; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--hc-sand-64); margin-bottom: 8px; }
.funnel-review__head a { color: var(--hc-mist-78); border-bottom: 1px solid var(--hc-slate-58); }
.funnel-review__head a:hover { color: var(--hc-sand-62-2); }
.funnel-review dl { margin: 0; }
.funnel-review dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 6px 0; font-size: 14px; line-height: 1.55; }
.funnel-review dt { color: var(--hc-slate-72); }
.funnel-review dd { margin: 0; color: var(--hc-sand-93); overflow-wrap: anywhere; }
.funnel-check { display: flex !important; gap: 12px; align-items: flex-start; margin: 28px 0 0 !important; letter-spacing: 0 !important; text-transform: none; font-size: 14px !important; font-weight: 400 !important; line-height: 1.6; color: var(--hc-slate-73) !important; }
.funnel-form .funnel-check input { width: 18px !important; height: 18px !important; flex: 0 0 18px; margin-top: 3px; padding: 0 !important; border: 1px solid var(--hc-slate-44) !important; accent-color: var(--hc-sand-71); }
.funnel-check a { color: var(--hc-sand-88-2); border-bottom: 1px solid var(--hc-slate-58); }
.funnel-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Actions: Continue first in the markup, Back shown on the left */
.funnel-actions { display: flex; flex-direction: row-reverse; align-items: center; gap: 22px; margin-top: 38px; }
.funnel-actions .submit-button { margin-top: 0; flex: 1; cursor: pointer; }
.funnel-back { display: inline-flex; align-items: center; gap: 10px; color: var(--hc-mist-78); background: none; border: 0; padding: 10px 0; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; text-transform: uppercase; cursor: pointer; } /* as .slider-row button */
.funnel-back:hover { color: var(--hc-sand-62-2); }

/* Thank you */
.funnel-thanks-body p { color: var(--hc-slate-73); font-size: 17px; line-height: 1.75; margin: 0 0 18px; max-width: 520px; }
.funnel-thanks-links { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 38px; }

@media (max-width: 760px) {
    .funnel { padding-top: 70px; }
    .funnel-question { font-size: 30px; }
    .funnel-options { grid-template-columns: 1fr; }
    .funnel-options--inline { grid-template-columns: 1fr 1fr; }
    .funnel-review dl > div { grid-template-columns: 1fr; gap: 0; }
    .funnel-actions { gap: 12px; }
}

/* ==== 9. Service FAQs (Phase 9) ======================================== */
/* Built from existing tokens: headings as .prose h2/h4, rules as the ledger lines. */
.faq-heading { max-width: 760px; margin: 36px 0 28px; color: var(--hc-ink); font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 1.15; } /* as .prose h2 */
.faq-list { max-width: 760px; border-bottom: 1px solid var(--hc-stone-70); }
.faq-item { border-top: 1px solid var(--hc-stone-70); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; color: var(--hc-ink); font-family: var(--font-serif); font-size: 22px; line-height: 1.3; } /* as .prose h4 */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { flex: 0 0 auto; color: var(--hc-brass-54); transition: transform 0.2s; }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item summary:hover { color: var(--hc-brass-54); }
.faq-item summary:focus-visible { outline: 2px solid var(--hc-brass-54); outline-offset: 4px; }
.faq-answer { max-width: 680px; padding: 0 0 26px; color: var(--hc-slate-39-2); font-size: 17px; line-height: 1.75; } /* as .prose */
@media (max-width: 760px) {
    .faq-heading { font-size: 30px; }
    .faq-item summary { font-size: 19px; }
}

/* Closing call to action on detail pages (Phase 9): approved split heading + header button. */
.closing-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 40px; }
.closing-cta-link { color: var(--hc-ink); font-size: 15px; border-bottom: 1px solid var(--hc-stone-70); padding-bottom: 2px; } /* as .prose a */
.closing-cta-link:hover { color: var(--hc-brass-54); }

/* ==== 10. Service page design ========================================== */
/* Service detail content on a 12-column grid. Existing tokens and type only:
   serif headings as .ledger-grid h3 / .split-heading h2, rules as the ledger lines,
   dark band as .consult. Splits vary by section (5/7, 5/6, 4/8, 3 x 2, 2 x 2, full). */
.svc { padding-bottom: 110px; }                                                   /* as .detail-section */
.page-hero + .svc { padding-top: 0; }
.svc-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 40px; align-items: start; padding-top: 56px; }
.svc-split > :first-child { grid-column: 1 / span 5; }
.svc-split > :nth-child(2) { grid-column: 7 / -1; }
.svc-split > :only-child { grid-column: 1 / span 8; }
.svc-split--intro > :nth-child(2), .svc-split--rows > :nth-child(2), .svc-split--text > :nth-child(2) { grid-column: 6 / -1; }
.svc-split--intro > :nth-child(2) { padding-top: 38px; }
.svc-split--media { align-items: center; }
.svc-split--media > :nth-child(2) { grid-column: 6 / -1; }
.svc--faq .svc-split > :first-child { grid-column: 1 / span 4; }
.svc--faq .svc-split > :nth-child(2) { grid-column: 6 / -1; }

.svc-head .overline { color: var(--hc-brass-overline); margin-bottom: 23px; }   /* as .split-heading .overline */
.svc-title { color: var(--hc-ink); margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(38px, 3.4vw, 50px); line-height: 1.08; letter-spacing: -0.02em; }
.svc-title--lg { font-size: clamp(44px, 4.4vw, 66px); line-height: 1.04; letter-spacing: -0.035em; }
.svc-title--block { max-width: 18ch; padding: 56px 0 8px; }
.svc-head .svc-copy, .svc-head .svc-figure { margin-top: 28px; }
.svc-copy.prose { max-width: 62ch; }
.svc-copy > :first-child, .svc-after > :first-child { margin-top: 0; }
.svc-after { margin-top: 36px; }
.svc .stat-no { display: block; }

/* Intro: the points row under the copy */
.svc-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; margin-top: 64px; }
.svc-points li { border-top: 1px solid var(--hc-stone-70); padding-top: 22px; }
.svc-points p { margin: 14px 0 0; color: var(--hc-slate-39-2); font-size: 15px; line-height: 1.65; max-width: 34ch; }

/* 2 x 2 blocks (as .ledger-grid) */
.svc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 52px; border-top: 1px solid var(--hc-stone-70); border-bottom: 1px solid var(--hc-stone-70); }
.svc-card { display: grid; grid-template-columns: 64px 1fr; gap: 0 18px; padding: 36px 56px 42px 0; }
.svc-card:nth-child(even) { border-left: 1px solid var(--hc-stone-70); padding-left: 56px; padding-right: 0; }
.svc-card:nth-child(n+3) { border-top: 1px solid var(--hc-stone-70); }
.svc-card h3 { margin: 2px 0 12px; color: var(--hc-ink); font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1.15; }
.svc-card .prose { font-size: 16px; }

/* Numbers */
.svc-num { display: block; color: var(--hc-brass-46); font-family: var(--font-serif); font-size: 40px; line-height: 1; }

/* Numbered grid, 3 x 2 */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; row-gap: 8px; margin-top: 56px; }
.svc-grid li { border-top: 1px solid var(--hc-stone-70); padding: 24px 24px 36px 0; }
.svc-grid h3 { margin: 16px 0 10px; color: var(--hc-ink); font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.2; }
.svc-grid p { margin: 0; color: var(--hc-slate-39-2); font-size: 15px; line-height: 1.7; max-width: 40ch; }

/* Numbered rows beside the heading */
.svc-numbered { border-bottom: 1px solid var(--hc-stone-70); }
.svc-numbered li { display: grid; grid-template-columns: 76px 1fr; gap: 0 20px; padding: 26px 0; border-top: 1px solid var(--hc-stone-70); }
.svc-numbered h3, .svc-timeline h3 { margin: 0 0 8px; color: var(--hc-ink); font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.2; }
.svc-numbered p, .svc-timeline p, .svc-feature-grid p { margin: 0; max-width: 60ch; color: var(--hc-slate-39-2); font-size: 16px; line-height: 1.7; }
.svc-timeline p a, .svc-numbered p a { color: var(--hc-ink); border-bottom: 1px solid var(--hc-stone-70); }   /* as .prose a */
.svc-timeline p a:hover, .svc-numbered p a:hover { color: var(--hc-brass-54); }

/* Images (as .detail-figure__frame) */
.svc-figure { margin: 0; }
.svc-figure__frame { background: var(--hc-navy-18); aspect-ratio: 4 / 3; overflow: hidden; }
.svc-split--media .svc-figure__frame { aspect-ratio: 3 / 2; }
.svc-figure__frame img { object-fit: cover; width: 100%; height: 100%; display: block; }

/* Text sections: a plain list as ruled lines (beside an image) or a row of points (no image) */
.svc-checks { margin-top: 28px; border-bottom: 1px solid var(--hc-stone-70); }
.svc-checks li { border-top: 1px solid var(--hc-stone-70); padding: 12px 0 12px 22px; position: relative; color: var(--hc-slate-39-2); font-size: 16px; line-height: 1.6; }
.svc-checks li::before { content: ""; position: absolute; left: 0; top: 23px; width: 8px; height: 1px; background: var(--hc-brass); }
.svc-checks--row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 32px; margin-top: 52px; border-bottom: 0; }
.svc-checks--row li { padding: 22px 0 0; font-size: 15px; }
.svc-checks--row li::before { top: -1px; width: 28px; height: 2px; }
.svc-split--after { padding-top: 36px; }
.svc-split--rows > .svc-head { position: sticky; top: 110px; }

/* Horizontal process */
.svc-timeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 48px 28px; margin-top: 56px; }
.svc-timeline--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.svc-timeline--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-timeline li { position: relative; padding-top: 28px; border-top: 1px solid var(--hc-stone-70); }
.svc-timeline li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--hc-brass); }
.svc-timeline li:not(:last-child)::after { content: "\2192"; position: absolute; top: -13px; right: -2px; padding-left: 8px; background: var(--hc-paper); color: var(--hc-brass-46); font-size: 16px; line-height: 24px; }
.svc-timeline .svc-num { font-size: 46px; margin-bottom: 20px; }
.svc-timeline h3 { font-size: 22px; }
.svc-timeline p { font-size: 15px; line-height: 1.65; }

/* Service areas, two columns */
.svc-regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 52px; border-top: 1px solid var(--hc-stone-70); }
.svc-region { padding: 30px 56px 6px 0; }
.svc-region:nth-child(even) { border-left: 1px solid var(--hc-stone-70); padding-left: 56px; padding-right: 0; }
.svc-region h3 { margin: 20px 0 14px; color: var(--hc-ink); font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 1.1; }   /* as .ledger-grid h3 */
.svc-region .prose { font-size: 16px; max-width: 54ch; }
.svc-region__text { margin: 0; color: var(--hc-slate-39-2); font-size: 16px; line-height: 1.75; max-width: 54ch; }   /* as .svc-region .prose */
.svc-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin: 26px 0 0; border-top: 1px solid var(--hc-stone-70); }
.svc-places li { border-bottom: 1px solid var(--hc-stone-70); padding: 12px 0; color: var(--hc-ink); font-family: var(--font-serif); font-size: 19px; line-height: 1.3; }
.svc-region--lakes { grid-column: 1 / -1; border-top: 1px solid var(--hc-stone-70); border-left: 0 !important; padding: 30px 0 6px !important; }
.svc-places--lakes { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.svc-places a { color: inherit; }
.svc-places a:hover { color: var(--hc-brass-54); }
.svc-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; color: var(--hc-ink); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--hc-stone-70); padding-bottom: 3px; transition: color 0.2s; }
.svc-more:hover { color: var(--hc-brass-54); }

/* Dark numbered band (as .consult) */
.svc-band { color: var(--hc-sand-93); background: var(--hc-navy); padding: 90px 0 100px; margin-bottom: 110px; }
.svc-band .svc { padding-bottom: 0; }
.svc-band .section-kicker { color: var(--hc-slate-72); border-color: var(--hc-slate-43-2); }
.svc-band .svc-title { color: var(--hc-sand-93); }
.svc-band .prose { color: var(--hc-slate-73); }
.svc-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 56px; }
.svc-feature-grid > article, .svc-feature-head { padding: 26px 24px 44px 0; border-top: 1px solid var(--hc-slate-43-2); }
.svc-feature-grid .svc-num { color: var(--hc-sand-62); font-size: 44px; margin-bottom: 22px; }
.svc-feature-grid h3 { margin: 0 0 10px; color: var(--hc-sand-93); font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.2; }
.svc-band .svc-feature-grid p { color: var(--hc-slate-73); max-width: 42ch; }

/* Related services */
.svc-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; margin-top: 52px; border-top: 1px solid var(--hc-stone-70); }
.svc-links li { position: relative; padding: 24px 44px 30px 0; border-bottom: 1px solid var(--hc-stone-70); }
.svc-links .card-link { display: block; margin-top: 14px; font-family: var(--font-serif); font-size: 26px; line-height: 1.2; }
.svc-links p { margin: 10px 0 0; color: var(--hc-slate-39-2); font-size: 15px; line-height: 1.65; }
.svc-links svg { position: absolute; top: 26px; right: 0; color: var(--hc-brass-54); transition: transform 0.2s; }
.svc-links li:hover .card-link { color: var(--hc-brass-54); }
.svc-links li:hover svg { transform: translate(2px, -2px); }

/* Related projects, two-up */
.project-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }

/* Hero buttons (service pages) */
.split-heading__side > p { color: var(--hc-slate-39-2); max-width: 410px; margin: 0; font-size: 16px; line-height: 1.75; }   /* as .split-heading > p */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 30px; }

/* FAQ: heading left, questions right */
.svc--faq .faq-heading { margin: 0; max-width: 12ch; font-size: clamp(38px, 3.4vw, 50px); line-height: 1.08; letter-spacing: -0.02em; }
.svc--faq .faq-list { max-width: none; }
.faq-side { position: sticky; top: 110px; }
.faq-intro { margin: 22px 0 0; color: var(--hc-slate-39-2); font-size: 15px; line-height: 1.7; max-width: 30ch; }
.faq-intro a { color: var(--hc-ink); border-bottom: 1px solid var(--hc-stone-70); }
.faq-intro a:hover { color: var(--hc-brass-54); }

/* Closing call to action: heading left, text and buttons right */
.closing-cta-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 40px; align-items: end; padding-top: 75px; }
.closing-cta-grid > :first-child { grid-column: 1 / span 7; }
.closing-cta-grid > :nth-child(2) { grid-column: 8 / -1; }
.closing-cta-grid .overline { color: var(--hc-brass-overline); margin-bottom: 23px; }
.closing-cta-grid h2 { margin: 0; color: var(--hc-ink); letter-spacing: -0.035em; font-size: clamp(52px, 5.4vw, 82px); line-height: 1.03; }   /* as .split-heading h2 */
.closing-cta-body > p { color: var(--hc-slate-39-2); max-width: 46ch; margin: 0; font-size: 16px; line-height: 1.75; }
.closing-cta-body .closing-cta-actions { margin-top: 32px; }

@media (max-width: 1250px) {
    .svc-timeline, .svc-timeline--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .svc-timeline li::after { display: none; }
}
@media (max-width: 1100px) {
    .svc-split, .closing-cta-grid { column-gap: 32px; }
    .svc-split > :first-child, .svc--faq .svc-split > :first-child { grid-column: 1 / span 6; }
    .svc-split > :nth-child(2), .svc-split--intro > :nth-child(2), .svc-split--rows > :nth-child(2), .svc-split--text > :nth-child(2), .svc-split--media > :nth-child(2), .svc--faq .svc-split > :nth-child(2) { grid-column: 7 / -1; }
    .svc-points { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .svc-checks--row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
    .svc-grid, .svc-feature-grid, .svc-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .closing-cta-grid > :first-child { grid-column: 1 / span 6; }
    .closing-cta-grid > :nth-child(2) { grid-column: 7 / -1; }
}
@media (max-width: 900px) {
    .svc-split > :first-child, .svc-split > :nth-child(2), .svc-split > :only-child,
    .svc-split--intro > :nth-child(2), .svc-split--rows > :nth-child(2), .svc-split--text > :nth-child(2), .svc-split--media > :nth-child(2),
    .svc--faq .svc-split > :first-child, .svc--faq .svc-split > :nth-child(2),
    .closing-cta-grid > :first-child, .closing-cta-grid > :nth-child(2) { grid-column: 1 / -1; }
    .svc-split > :nth-child(2), .closing-cta-grid > :nth-child(2) { margin-top: 32px; }
    .svc-split--intro > :nth-child(2) { padding-top: 0; }
    .svc--faq .faq-heading, .faq-intro { max-width: none; }
    .faq-side, .svc-split--rows > .svc-head { position: static; }
    .svc-split--after > :first-child { display: none; }
    .svc-regions { grid-template-columns: 1fr; }
    .svc-region, .svc-region:nth-child(even) { border-left: 0; padding: 30px 0 34px; }
    .svc-region + .svc-region { border-top: 1px solid var(--hc-stone-70); }
}
@media (max-width: 760px) {
    .svc { padding-bottom: 75px; }                                                    /* as .detail-section (mobile) */
    .svc-split, .svc-title--block { padding-top: 40px; }
    .svc-title { font-size: 34px; }
    .svc-title--lg { font-size: clamp(40px, 10vw, 52px); }
    .svc-points { grid-template-columns: 1fr; margin-top: 40px; row-gap: 22px; }
    .svc-checks--row { grid-template-columns: 1fr; margin-top: 32px; row-gap: 0; border-bottom: 1px solid var(--hc-stone-70); }
    .svc-checks--row li { padding: 12px 0 12px 22px; }
    .svc-checks--row li::before { top: 23px; width: 8px; height: 1px; }
    .svc-cards { grid-template-columns: 1fr; margin-top: 36px; }
    .svc-card, .svc-card:nth-child(even) { border-left: 0; grid-template-columns: 48px 1fr; padding: 28px 0 30px; }
    .svc-card + .svc-card { border-top: 1px solid var(--hc-stone-70); }
    .svc-card h3 { font-size: 26px; }
    .svc-region h3 { font-size: 30px; }
    .svc-grid, .svc-feature-grid, .svc-links { grid-template-columns: 1fr; margin-top: 36px; }
    .svc-grid li { padding: 22px 0 26px; }
    .svc-numbered li { grid-template-columns: 52px 1fr; gap: 0 14px; padding: 24px 0; }
    .svc-num { font-size: 32px; }
    .svc-timeline, .svc-timeline--5, .svc-timeline--4 { grid-template-columns: 1fr; gap: 0; margin-top: 36px; border-left: 1px solid var(--hc-stone-70); }
    .svc-timeline li { border-top: 0; padding: 0 0 32px 26px; display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; }
    .svc-timeline li::before { top: 8px; left: -4px; }
    .svc-timeline .svc-num { font-size: 32px; margin: 0; grid-row: span 2; }
    .svc-places li { font-size: 17px; }
    .svc-places--lakes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-region--lakes { padding: 30px 0 34px !important; }
    .svc-band { padding: 65px 0 70px; margin-bottom: 75px; }
    .svc-feature-grid > article, .svc-feature-head { padding: 24px 0 30px; }
    .svc-links .card-link { font-size: 23px; }
    .project-grid--two { grid-template-columns: minmax(0, 1fr); gap: 35px; }
    .svc--faq .faq-heading { font-size: 34px; }
    .split-heading__side { margin-top: 25px; }                                        /* as .split-heading > p (mobile) */
    .closing-cta-grid { padding-top: 50px; }
    .closing-cta-grid h2 { font-size: clamp(44px, 11vw, 64px); }
}

/* The closing button keeps its label on small screens (the header's .nav-cta collapses to an icon). */
.closing-cta .nav-cta, .closing-cta .nav-cta svg, .hero-actions .nav-cta { margin-left: 0; }
@media (max-width: 1250px) {
    .closing-cta .nav-cta, .hero-actions .nav-cta { margin-left: 0; padding: 15px 18px; gap: 28px; font-size: 12px; }
    .closing-cta .nav-cta svg, .hero-actions .nav-cta svg { width: 15px; height: 15px; }
}
/* v1.32: homepage Client Login button and client portal buttons keep their labels too. */
.portal-foot .nav-cta, .pp .nav-cta { margin-left: 0; }
@media (max-width: 1250px) {
    .portal-foot .nav-cta, .pp .nav-cta { margin-left: 0; padding: 15px 18px; gap: 28px; font-size: 12px; }
    .portal-foot .nav-cta svg, .pp .nav-cta svg { width: 15px; height: 15px; }
}

/* Grid columns never grow past the section (a card image's intrinsic size could push a
   1fr column wider than the screen). Same column counts as the prototype rules above. */
.project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-grid.project-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
    .project-grid, .project-grid.project-grid--two { grid-template-columns: minmax(0, 1fr); }
}

/* Work With Us (v1.15): built from existing parts — section kicker, intro points,
   region columns, the consultation band and the funnel's fields, chips and button. */
.wwu-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 52px; border-top: 1px solid var(--hc-stone-70); }
.wwu-path { padding: 30px 40px 6px 0; scroll-margin-top: 110px; }
.wwu-path + .wwu-path { border-left: 1px solid var(--hc-stone-70); padding-left: 40px; }
.wwu-path .stat-no { display: block; }
.wwu-path h3 { margin: 20px 0 14px; color: var(--hc-ink); font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1.12; }   /* as .svc-region h3, one size down */
.wwu-label { margin: 30px 0 0; color: var(--hc-slate-39-2); letter-spacing: 0.15em; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.wwu-list { grid-template-columns: 1fr; margin-top: 12px; }
.wwu-list li { font-size: 18px; }
.wwu-include { margin: 12px 0 0; padding: 0; list-style: none; }
.wwu-include li { position: relative; padding-left: 18px; color: var(--hc-slate-39-2); font-size: 15px; line-height: 1.75; }
.wwu-include li::before { content: "–"; position: absolute; left: 0; color: var(--hc-brass-54); }
.wwu-response { margin: 24px 0 0; color: var(--hc-ink); font-size: 14px; line-height: 1.6; }
.wwu-apply { scroll-margin-top: 0; }
.wwu-apply h2 em { color: var(--hc-sand-67); }
.wwu-tabs { display: grid; gap: 8px; margin: 0 0 30px; max-width: 390px; }
.wwu-tabs .funnel-option span { letter-spacing: 0.02em; }
.wwu-tabs .funnel-option[aria-current] span { background: var(--hc-sand-71); border-color: var(--hc-sand-71); color: var(--hc-navy-15-2); }   /* as a chosen funnel chip */
.wwu-tabs .funnel-option:focus-visible { outline: none; }
.wwu-tabs .funnel-option:focus-visible span { outline: 2px solid var(--hc-sand-71); outline-offset: 3px; }
.wwu-form input[type="file"] { height: auto !important; padding: 14px 0 !important; color: var(--hc-mist-78) !important; font-size: 14px !important; cursor: pointer; }
.wwu-form input[type="file"]::file-selector-button { margin-right: 16px; padding: 10px 16px; border: 1px solid var(--hc-slate-44); background: none; color: var(--hc-sand-93); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.055em; cursor: pointer; transition: border-color 0.2s; }
.wwu-form input[type="file"]::file-selector-button:hover { border-color: var(--hc-sand-71); }
.wwu-form input[type="date"] { color-scheme: dark; }
.wwu-form .funnel-question { margin-bottom: 4px; }
.wwu-form .funnel-alert { margin-top: 18px; }
.wwu-sent { outline: none; }
.wwu-apply [data-wwu-panel][hidden], .wwu-apply [data-wwu-response][hidden] { display: none !important; }   /* v1.22: forms switched in place */
.wwu-sent__text { color: var(--hc-slate-73); font-size: 17px; line-height: 1.75; margin: 18px 0 28px; max-width: 46ch; }
@media (max-width: 900px) {
    .wwu-paths { grid-template-columns: 1fr; border-top: 0; }
    .wwu-path, .wwu-path + .wwu-path { border-left: 0; border-top: 1px solid var(--hc-stone-70); padding: 30px 0 34px; }
    .wwu-tabs { max-width: none; }
}

/* About (v1.18): team photos in the region columns. */
.about-team__photo { width: 100%; max-width: 340px; aspect-ratio: 5 / 4; overflow: hidden; margin-bottom: 26px; background: var(--hc-stone-70); }
.about-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Three-figure ledger: one column below 900px as well (at 761–900px the figures ran past the
   screen edge on the homepage and About page). Same rules as the 760px layout. */
@media (max-width: 900px) {
    .stats-grid { grid-template-columns: 1fr; }
    .stats-grid article, .stats-grid article + article { border-bottom: 1px solid var(--hc-stone-69); border-left: 0; min-height: 0; padding: 26px 0; }
    .stats-grid article:last-child { border-bottom: 0; }
}

/* ==========================================================================
   Client portal (v1.29): /clients/ — the homepage "Project overview" dashboard, live.
   ========================================================================== */
.pp { padding: 70px 0 110px; min-height: 70vh; }
.portal h1 { letter-spacing: -0.035em; margin: 0; font-size: clamp(56px, 6vw, 91px); line-height: 1.03; }   /* as .portal h2 */
.pp .portal-grid { padding-top: 70px; }
.pp-card { max-width: 560px; width: 100%; justify-self: end; }
.pp-narrow { max-width: 620px; margin: 70px auto 0; }
.pp-narrow .pp-card { max-width: none; }
.pp .pp-card-title { margin: 0 0 18px; color: var(--hc-ink); font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; }
.pp-text { color: var(--hc-slate-39-3); font-size: 15px; line-height: 1.7; margin: 0 0 22px; }
.pp-small { color: var(--hc-slate-52); font-size: 13px; line-height: 1.6; margin: 26px 0 0; }
.pp-notice, .pp-alert { margin: 0 0 18px; padding: 12px 14px; font-size: 14px; line-height: 1.55; border-left: 3px solid var(--hc-brass-49); background: var(--hc-sand-90); color: var(--hc-ink); }
.pp-alert { border-left-color: #a33a2b; background: #f6e7e3; }
.pp-form label { display: block; margin: 20px 0 7px; color: var(--hc-slate-39-3); font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.pp-form input[type="email"], .pp-form input[type="password"], .pp-form input[type="text"] { width: 100%; height: 48px; padding: 8px 12px; border: 1px solid var(--hc-stone-81); background: var(--hc-white); color: var(--hc-ink); font: inherit; font-size: 16px; border-radius: 0; }
.pp-form input[readonly] { background: var(--hc-stone-95); color: var(--hc-slate-52); }
.pp-form input:focus-visible { outline: 2px solid var(--hc-brass-54); outline-offset: 1px; border-color: var(--hc-brass-54); }
.pp-form input[aria-invalid="true"] { border-color: #a33a2b; }
.pp-help { margin: 6px 0 0; color: var(--hc-slate-52); font-size: 12px; }
.pp-error { margin: 6px 0 0; color: #a33a2b; font-size: 13px; font-weight: 600; }
.pp-check { display: flex !important; gap: 10px; align-items: flex-start; margin-top: 22px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5; color: var(--hc-slate-39-3) !important; }
.pp-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--hc-navy); }
.pp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.pp-actions .nav-cta { border: 0; cursor: pointer; font-family: inherit; }
.pp-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--hc-ink); border-bottom: 1px solid var(--hc-stone-70); }
.pp-link:hover { color: var(--hc-brass-54); }

/* Project page */
.pp-topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 40px; flex-wrap: wrap; padding: 56px 0 34px; }
.pp-topbar .overline { color: var(--hc-brass-overline); margin-bottom: 16px; }
.pp-h1 { margin: 0; color: var(--hc-ink); font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -0.03em; }
.pp-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; color: var(--hc-slate-39-3); font-size: 14px; }
.pp-meta span + span::before { content: "·"; margin-right: 20px; color: var(--hc-stone-63); }
.pp-account { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--hc-slate-39-3); }
.pp-account form { margin: 0; }
.pp-head-right { color: var(--hc-slate-52); }
.pp-dash .dashboard-greeting h2 { margin: 6px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: 38px; letter-spacing: 0; line-height: 1.1; color: var(--hc-ink); }
.pp-weeknav { display: flex; align-items: center; gap: 10px; }
.pp-weeknav a, .pp-weeknav .is-off { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--hc-stone-81); color: var(--hc-ink); background: var(--hc-white); }
.pp-weeknav a:hover { border-color: var(--hc-ink); }
.pp-weeknav .is-off { opacity: 0.35; }
.pp-weeknav .week-label { display: flex !important; padding: 0 6px; font-weight: 700; }
.pp-dash .log { text-decoration: none; }
.pp-dash .log:focus-visible { outline: 2px solid var(--hc-brass-54); outline-offset: -2px; }
.pp-dash .log strong { font-size: 13px; }
.pp-dash .log small { font-size: 11px; }
.pp-photos { display: block !important; }
.pp-gallery[hidden] { display: none; }
.pp-stage { position: relative; background: var(--hc-navy-18); }
.pp-slide { display: block; }
.pp-slide[hidden] { display: none; }
.pp-slide img { display: block; width: 100%; height: 260px; object-fit: cover; }
.pp-prev, .pp-next { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: rgba(250, 250, 248, 0.92); color: var(--hc-ink); cursor: pointer; }
.pp-prev { left: 10px; }
.pp-next { right: 10px; }
.pp-prev:focus-visible, .pp-next:focus-visible { outline: 2px solid var(--hc-brass-54); }
.pp-gallery > p { margin: 14px 14px 2px; font-size: 13px; font-weight: 700; }
.pp-gallery > small { color: var(--hc-slate-50); margin: 0 14px 14px; font-size: 11px; display: block; }
.pp-nophoto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 260px; background: var(--hc-stone-95); color: var(--hc-slate-52); font-size: 12px; }
.pp-empty-state { display: flex; gap: 16px; align-items: flex-start; padding: 26px; background: var(--hc-white); border: 1px solid var(--hc-stone-88); }
.pp-empty-state strong { display: block; font-size: 15px; color: var(--hc-ink); }
.pp-empty-state p { margin: 6px 0 0; color: var(--hc-slate-39-3); font-size: 14px; line-height: 1.6; max-width: 60ch; }

.pp-detail { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 60px; margin-top: 70px; align-items: start; }
.pp .pp-section-title { margin: 0 0 10px; color: var(--hc-ink); font-family: var(--font-serif); font-weight: 400; font-size: 38px; }
.pp-update { padding: 30px 0; border-top: 1px solid var(--hc-stone-70); scroll-margin-top: 100px; }
.pp-update h3 { margin: 12px 0 0; color: var(--hc-ink); font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.2; }
.pp-update__summary { margin: 8px 0 0; color: var(--hc-slate-39-3); font-size: 15px; }
.pp-update__body { margin-top: 14px; color: var(--hc-slate-39-3); font-size: 16px; line-height: 1.75; max-width: 70ch; }
.pp-update__body p { margin: 0 0 12px; }
.pp-grid { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.pp-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: var(--hc-navy-18); }
.pp-grid span { display: block; margin-top: 6px; color: var(--hc-slate-52); font-size: 12px; line-height: 1.4; }
.pp-grid a:focus-visible { outline: 2px solid var(--hc-brass-54); outline-offset: 2px; }
.pp-weeks { position: sticky; top: 110px; }
.pp-weeks ol { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--hc-stone-70); }
.pp-weeks li { border-bottom: 1px solid var(--hc-stone-81); }
.pp-weeks a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 0; color: var(--hc-slate-39-3); font-size: 14px; }
.pp-weeks a small { color: var(--hc-slate-52); font-size: 12px; }
.pp-weeks a[aria-current] { color: var(--hc-ink); font-weight: 700; }
.pp-weeks a:hover { color: var(--hc-brass-54); }

.pp-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.pp-project-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; color: var(--hc-ink); transition: transform 0.2s; }
.pp-project-card:hover { transform: translateY(-3px); }
.pp-project-card__name { font-family: var(--font-serif); font-size: 30px; line-height: 1.15; }
.pp-project-card__meta { color: var(--hc-slate-52); font-size: 13px; }
.pp-project-card__go { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.pp-empty { padding: 10px; }

@media (max-width: 1100px) {
    .pp-detail { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .pp-weeks { position: static; }
}
@media (max-width: 760px) {
    .pp { padding: 40px 0 70px; }
    .pp-card { justify-self: stretch; max-width: none; }
    .pp-dash .dashboard-greeting { flex-direction: column; align-items: flex-start; gap: 16px; }
    .pp-dash .dashboard-greeting h2 { font-size: 30px; }
    .pp-slide img, .pp-nophoto { height: 220px; }
    .pp-account { width: 100%; justify-content: space-between; }
    .pp-meta { flex-direction: column; }
    .pp-meta span + span::before { display: none; }
}
.pp .pp-weeks h2 { margin: 0; font-family: inherit; font-size: 10px; letter-spacing: 0.18em; line-height: 1.4; color: var(--hc-brass-51); }   /* not .portal h2 */
.pp-dash .dashboard-main { align-items: start; }   /* v1.32: short activity lists don't stretch */

/* v1.33: everything inside the Project overview box + photo viewer */
.pp-dash .pp-main { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
.pp-side { display: grid; gap: 15px; }
.pp-weeklist ol { list-style: none; margin: 0; padding: 0; }
.pp-weeklist li + li { border-top: 1px solid var(--hc-stone-91); }
.pp-weeklist a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 16px; color: var(--hc-navy-19-2); font-size: 12px; }
.pp-weeklist a small { color: var(--hc-slate-52); font-size: 11px; }
.pp-weeklist a:hover, .pp-weeklist a[aria-current] { background: var(--hc-stone-95); }
.pp-weeklist a[aria-current] span { font-weight: 700; }
.pp-panels { display: block !important; }
.pp-panel[hidden] { display: none; }
.pp-panel { scroll-margin-top: 100px; }
.pp-panels .pp-slide { position: relative; cursor: zoom-in; }
.pp-panels .pp-slide img { height: 340px; }
.pp-zoomhint { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 32px; height: 32px; background: rgba(250, 250, 248, 0.92); color: var(--hc-ink); }
.pp-panels .pp-nophoto { height: 150px; }
.pp-thumbs { display: flex; gap: 6px; padding: 8px 14px 0; overflow-x: auto; }
.pp-thumbs button { flex: 0 0 auto; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; line-height: 0; }
.pp-thumbs img { width: 64px; height: 48px; object-fit: cover; }
.pp-thumbs button[aria-current] { border-color: var(--hc-brass-54); }
.pp-thumbs button:focus-visible { outline: 2px solid var(--hc-brass-54); outline-offset: 1px; }
.pp-photo-actions { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 14px 0; font-size: 12px; color: var(--hc-slate-50); }
.pp-photo-actions [data-pp-caption] { margin-right: auto; }
.pp-tool { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--hc-stone-81); background: var(--hc-white); color: var(--hc-ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.pp-tool:hover { border-color: var(--hc-ink); }
.pp-tool:focus-visible { outline: 2px solid var(--hc-brass-54); outline-offset: 2px; }
.pp-panel__body { padding: 18px 16px 20px; }
.pp-panel__body h3 { margin: 10px 0 0; color: var(--hc-ink); font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.2; }
.pp-panel__body .pp-update__body { font-size: 15px; line-height: 1.7; }
.pp-help-line { margin-top: 18px; }

.pp-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12, 18, 22, 0.96); color: #fff; }
.pp-lightbox::backdrop { background: rgba(12, 18, 22, 0.9); }
.pp-lb-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: linear-gradient(rgba(12, 18, 22, 0.85), rgba(12, 18, 22, 0)); }
.pp-lb-caption { margin-right: auto; font-size: 14px; }
.pp-lb-count { font-size: 12px; letter-spacing: 0.1em; opacity: 0.8; margin-right: 8px; }
.pp-lb-btn, .pp-lb-nav { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; }
.pp-lb-btn:hover, .pp-lb-nav:hover { background: rgba(255, 255, 255, 0.2); }
.pp-lb-btn:disabled { opacity: 0.35; cursor: default; }
.pp-lb-btn:focus-visible, .pp-lb-nav:focus-visible { outline: 2px solid var(--hc-sand-71); outline-offset: 2px; }
.pp-lb-stage { position: absolute; inset: 66px 0 0; overflow: auto; display: flex; align-items: center; justify-content: center; touch-action: pinch-zoom pan-x pan-y; }
.pp-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.pp-lightbox.is-zoomed .pp-lb-stage { display: block; }
.pp-lightbox.is-zoomed .pp-lb-stage img { max-width: none; max-height: none; height: auto; cursor: zoom-out; }
.pp-lb-nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: 48px; height: 48px; }
.pp-lb-nav[hidden] { display: none; }
.pp-lb-prev { left: 14px; }
.pp-lb-next { right: 14px; }
@media (max-width: 1100px) {
    .pp-dash .pp-main { grid-template-columns: minmax(0, 1fr); }
    .pp-panels .pp-slide img { height: 260px; }
}
@media (max-width: 760px) {
    .pp-panels .pp-slide img { height: 220px; }
    .pp-lb-bar { flex-wrap: wrap; }
    .pp-lb-caption { width: 100%; order: 9; }
    .pp-lb-stage { inset: 110px 0 0; }
}

/* v1.34: written-only updates (no photos) */
.pp .pp-textonly { color: var(--hc-muted, #7a7f85); font-weight: 500; letter-spacing: 0.04em; text-transform: none; }
.pp-panel--text .pp-panel__body { padding: 28px 26px 30px; }
.pp-panel--text .pp-panel__body h3 { font-size: 30px; }
/* Update text lines up and reads as normal text (not the photo-caption style) */
.photo-preview .pp-panel__body p { margin: 0; }
.photo-preview .pp-panel__body .stat-no { font-size: 10px; font-weight: 700; }
.photo-preview .pp-panel__body .pp-update__summary { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--hc-ink); }
.photo-preview .pp-panel__body .pp-update__body { margin-top: 14px; }
.photo-preview .pp-panel__body .pp-update__body p { margin: 0 0 12px; font-size: 15px; font-weight: 400; line-height: 1.7; }
.photo-preview .pp-panel__body .pp-update__body p:last-child { margin-bottom: 0; }

/* v1.36: consultation form result (sent by the website) */
.consult-form .form-helper.is-sent { color: var(--hc-sand, #d4bc97); font-size: 14px; }
.consult-form .form-helper.is-error { color: #f2b8a8; font-size: 14px; }
.consult-form[aria-busy="true"] .submit-button { opacity: 0.7; cursor: progress; }

/* v1.40: drag the compare handle / image directly (the separate slider bar is gone) */
.compare { cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.compare img { -webkit-user-drag: none; pointer-events: none; }
.compare-handle { pointer-events: auto; cursor: grab; transition: box-shadow 0.15s; }
.compare-handle:hover { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0.267) 0 4px 24px; }
.compare-handle:focus-visible { outline: 2px solid var(--hc-brass); outline-offset: 3px; }
.compare.is-dragging, .compare.is-dragging .compare-handle { cursor: grabbing; }
.compare + .section-note { margin-top: 22px; }

/* v1.41: location page draft preview note (CMS users only) */
.sa-preview { margin-top: 18px; padding: 12px 16px; background: #fff7e6; border: 1px solid #f0d9a8; color: #6b4e16; font-size: 13px; }

/* v1.42: towns that have their own page are links */
/* v1.49: linked towns = whole row clickable, small arrow instead of an underline (the row line is enough) */
.svc-places a, .sa-nearby__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: inherit; text-decoration: none; transition: color 0.2s; }
.svc-places a svg, .sa-nearby__list a svg { flex: none; color: var(--hc-stone-70); transition: color 0.2s, transform 0.2s; }
.svc-places a:hover, .svc-places a:focus-visible, .sa-nearby__list a:hover, .sa-nearby__list a:focus-visible { color: var(--hc-brass); }
.svc-places a:hover .icon, .svc-places a:focus-visible .icon, .sa-nearby__list a:hover .icon, .sa-nearby__list a:focus-visible .icon { color: var(--hc-brass); transform: translate(2px, -2px); }
.svc-more + .svc-more { margin-left: 22px; }
@media (max-width: 760px) { .svc-more + .svc-more { margin-left: 0; margin-top: 10px; } }

/* v1.45: location pages - nearby areas, compact link lists grouped by region */
.sa-nearby__groups { display: grid; gap: 36px; }
.sa-nearby__group .stat-no { margin: 0 0 6px; }
.sa-nearby__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hc-stone-70); }
.sa-nearby__list li { border-bottom: 1px solid var(--hc-stone-70); padding: 11px 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.3; color: var(--hc-ink); }
.sa-nearby__list [aria-current] { color: var(--hc-slate-39-2); } /* this page */
@media (max-width: 900px) { .sa-nearby__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sa-nearby__list li { font-size: 16px; } }

/* v1.47: location pages show the whole featured photo (16:9), never cropped */
.detail-figure--full .detail-figure__frame { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
@media (max-width: 760px) { .detail-figure--full .detail-figure__frame { height: auto; } }
.sa-sections .svc-figure__frame, .svc--text .svc-figure__frame { aspect-ratio: 16 / 9; } /* section photos uncropped too (location + service pages) */

/* v1.50: portfolio before real projects are published */
.portfolio-empty { border-top: 1px solid var(--hc-stone-70); padding: 32px 0 8px; max-width: 62ch; }
.portfolio-empty p { margin: 0; color: var(--hc-slate-39-2); font-size: 17px; line-height: 1.7; }
.portfolio-empty a { color: var(--hc-ink); text-decoration: underline; text-underline-offset: 4px; }

/* v1.51: memberships & accreditations band above the footer */
.affiliations { background: #fff; border-top: 1px solid var(--hc-stone-70); }
.affiliations-inner { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 32px; padding: 34px 0; }
.affiliations-label { margin: 0; color: var(--hc-slate-39-2); font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.6; }
.affiliations-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.affiliations-list li { display: flex; align-items: center; justify-content: center; height: 112px; padding: 14px; border: 1px solid var(--hc-stone-82, #d9d6cf); background: #fff; }
.affiliations-list img { max-width: 100%; max-height: 80px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 1000px) { .affiliations-inner { grid-template-columns: 1fr; gap: 18px; } }
@media (max-width: 760px) { .affiliations-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .affiliations-list li { height: 92px; padding: 10px; } .affiliations-list img { max-height: 64px; } }
@media (max-width: 420px) { .affiliations-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v1.51: old-site footer details (about text, offices, hours) */
.footer-main .footer-about { max-width: 38ch; }
.footer-main .footer-note { margin: 0; color: var(--hc-mist-88); font-size: 13px; }
.footer-main .footer-hours { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0; color: var(--hc-slate-66); font-size: 12px; line-height: 1.7; }
.footer-main .footer-hours svg { margin-top: 4px; flex: none; color: var(--hc-sand-62-3); }
@media (max-width: 900px) { .footer-main > div:last-child { grid-column: 1 / -1; } }
/* v1.54: footer uses the header logo, in white on the dark footer */
.footer-logo { display: inline-block; line-height: 0; }
.footer-logo img { width: 200px; height: auto; filter: brightness(0) invert(1); opacity: 0.95; }
@media (max-width: 760px) { .footer-logo img { width: 170px; } }
.footer-main address p { margin: 0; }   /* v1.54: contact is now the 4th column */

/* v1.59/v1.60: homepage client reviews, Google-style (summary left, cards right) */
.reviews { padding-top: 105px; padding-bottom: 0; } /* v1.61: Selected work below already adds its own top space */
.reviews:not(:has(+ .portfolio)) { padding-bottom: 105px; } /* when Selected work is hidden */
.gr { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 56px; font-family: var(--font-sans); }
.gr-summary { display: flex; gap: 16px; align-items: flex-start; }
.gr-logo { width: 84px; flex: 0 0 84px; padding-top: 6px; }
.gr-logo img { width: 100%; height: auto; display: block; }
.gr-business { margin: 0 0 8px; font-family: var(--font-sans); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--hc-ink); }
.gr-stars { display: inline-flex; gap: 1px; color: #f6bb06; font-size: 20px; line-height: 1; }
.gr-card .gr-stars { font-size: 17px; }
.gr-count { margin: 8px 0 14px; font-size: 14px; color: var(--hc-ink); }
.gr-count a { color: inherit; text-decoration: none; }
.gr-count a:hover, .gr-count a:focus-visible { text-decoration: underline; }
.gr-write { display: inline-block; padding: 8px 16px; border: 1px solid #555; border-radius: 4px; background: #fff; color: var(--hc-ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.gr-write:hover, .gr-write:focus-visible { background: var(--hc-ink); border-color: var(--hc-ink); color: #fff; }
.gr-carousel { position: relative; min-width: 0; }
.gr-track { list-style: none; margin: 0; padding: 2px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; align-items: start; }
.gr-track::-webkit-scrollbar { display: none; }
.gr-track:focus-visible { outline: 2px solid var(--hc-brass); outline-offset: 4px; }
.gr-card { position: relative; scroll-snap-align: start; background: #ecebe7; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 236px; }
.gr-head { display: flex; align-items: center; gap: 12px; }
.gr-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.gr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gr-avatar--initial { color: #fff; font-size: 18px; font-weight: 500; background: #7b5ea7; }
.gr-avatar--c1 { background: #3f7d6e; } .gr-avatar--c2 { background: #b0624a; } .gr-avatar--c3 { background: #4b6a8f; } .gr-avatar--c4 { background: #8a7a3c; } .gr-avatar--c5 { background: #6d5a4b; }
.gr-who { min-width: 0; flex: 1; }
.gr-name { margin: 0; font-size: 15px; font-weight: 700; color: var(--hc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-meta { margin: 2px 0 0; font-size: 13px; color: var(--hc-slate-43); }
.gr-g { flex: 0 0 20px; }
.gr-text { margin: 0; color: var(--hc-ink); font-size: 15px; line-height: 1.55; }
/* v1.61: clamp on the text element itself (Safari ignores line-clamp on a wrapper) + max-height fallback */
.gr-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; max-height: 6.2em; }
.gr-more { align-self: flex-start; margin-top: auto; padding: 0; border: 0; background: none; color: #8a8a8a; font: inherit; font-size: 14px; cursor: pointer; }
.gr-more:hover, .gr-more:focus-visible { color: var(--hc-ink); text-decoration: underline; }
.gr-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #ddd; background: #fff; color: #555; display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.gr-arrow[hidden] { display: none; }
.gr-arrow--next { right: -17px; }
.gr-arrow--prev { left: -17px; }
.gr-arrow--prev svg { transform: rotate(180deg); }
.gr-arrow:hover, .gr-arrow:focus-visible { color: var(--hc-ink); border-color: var(--hc-ink); }
.reviews-note { justify-content: flex-end; margin-top: 20px; }
.reviews-google { display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.16em; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--hc-ink); text-decoration: none; }
.reviews-google:hover, .reviews-google:focus-visible { color: var(--hc-brass-hover); }
@media (max-width: 1100px) {
  .gr { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .gr-track { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 700px) {
  .reviews { padding-top: 70px; padding-bottom: 0; }
  .gr-track { grid-auto-columns: 86%; }
  .gr-card { min-height: 236px; padding: 18px; }
  .gr { padding-top: 32px; }
  .reviews-note { margin-top: 20px; }
  .gr-logo { width: 72px; flex-basis: 72px; }
  .gr-arrow { display: none !important; }
}
/* v1.65: reviews on location pages sit between the page sections and the FAQ (their own spacing) */
.sa-sections + .reviews { padding-top: 0; padding-bottom: 90px; }
@media (max-width: 700px) { .sa-sections + .reviews { padding-bottom: 60px; } }

/* v1.97: real project pages: lead paragraph + photo/text chapters */
.project-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 72px; }
.project-lead__text { max-width: 860px; font-size: 20px; line-height: 1.7; color: var(--hc-ink); }
.project-lead__title { font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.1; margin: 0; }
.project-chapters { padding-top: 56px; }
.project-chapter { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px 0; border-top: 1px solid var(--hc-stone-70); }
.project-chapter--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.project-chapter--flip .project-chapter__media { order: 2; }
.project-chapter--text { grid-template-columns: minmax(0, 1fr); }
.project-chapter__media { margin: 0; }
.project-chapter__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.project-chapter__text h2 { font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: 1.1; margin: 12px 0 18px; color: var(--hc-ink); }
.project-chapter__text .stat-no { color: var(--hc-brass-46); }
@media (max-width: 900px) {
    .project-chapter, .project-chapter--flip { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 36px 0; }
    .project-chapter--flip .project-chapter__media { order: 0; }
    .project-lead { padding-top: 40px; }
    .project-lead__text { font-size: 18px; }
    .project-chapter__text h2 { font-size: 30px; }
}
.media-grid--full .project-image { height: auto; aspect-ratio: 3 / 2; }
.media-grid--full .project-image img { height: 100%; object-fit: cover; }

/* v1.100: project pages – smaller gap between the hero photo and the intro text (was 192px) */
.detail-media:has(+ .project-lead) { padding-bottom: 0; }
.detail-media + .project-lead { padding-top: 56px; }
@media (max-width: 760px) { .detail-media + .project-lead { padding-top: 32px; } }

/* v1.101: project pages – intro paragraphs centred */
.project-lead__text { margin-left: auto; margin-right: auto; text-align: center; }

/* v1.104: homepage shows the 3 latest projects, then a "See All Projects" button */
.portfolio-more { display: flex; justify-content: center; margin-top: 48px; }
@media (max-width: 760px) { .portfolio-more { margin-top: 32px; } }

/* v1.105: portrait (phone) photos on project pages are shown whole inside the fixed frames */
.detail-figure__frame img.is-portrait,
.project-chapter__media img.is-portrait,
.media-grid--full .project-image img.is-portrait { object-fit: contain; background: transparent; }
.detail-figure--full .detail-figure__frame:has(img.is-portrait) { aspect-ratio: auto; height: min(78vh, 760px); background: transparent; }
.project-chapter__media:has(img.is-portrait), .media-grid--full .project-image:has(img.is-portrait) { background: transparent; }
@media (max-width: 760px) { .detail-figure--full .detail-figure__frame:has(img.is-portrait) { height: auto; aspect-ratio: 3 / 4; } }

/* v1.106: project cards – number and location on one line, title full width below (fits on one line) */
.project-grid:not(.project-grid--blog) .project-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; }
.project-grid:not(.project-grid--blog) .project-caption > div:first-child { display: contents; }
.project-grid:not(.project-grid--blog) .project-caption span { grid-row: 1; grid-column: 1; }
.project-grid:not(.project-grid--blog) .project-caption .project-area { grid-row: 1; grid-column: 2; }
.project-grid:not(.project-grid--blog) .project-caption h3 { grid-row: 2; grid-column: 1 / -1; margin-top: 10px; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.25; }

/* v1.107: header phone number beside the header button */
.nav-phone { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 22px; color: var(--hc-navy); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.nav-phone svg { flex: none; }
.nav-phone:hover { color: var(--hc-brass-hover); }
.site-nav .nav-phone + .nav-cta { margin-left: 0; }
@media (max-width: 1250px) { .nav-phone { margin-right: 16px; } }
@media (max-width: 760px) { .nav-phone { margin-right: 10px; } .nav-phone span { display: none; } .nav-phone svg { width: 20px; height: 20px; } }
.site-nav .nav-cta + .menu-button { margin-left: 8px; }

/* v1.109: the one short lead form (Nov 2 change list #1, #3) */
.lead-form textarea { width: 100%; min-height: 84px; color: var(--hc-white); background: none; border: 0; border-bottom: 1px solid var(--hc-slate-44); border-radius: 0; padding: 8px 0; font: inherit; font-size: 16px; resize: vertical; }
.lead-form textarea:focus, .lead-form input:focus { outline: none; border-bottom-color: var(--hc-sand-64) !important; }
.lead-form .lead-optional { letter-spacing: 0.08em; color: var(--hc-stone-66); font-weight: 600; }
.lead-form [aria-invalid="true"] { border-bottom-color: #f2b8a8 !important; }
.lead-form .lead-error { display: block; margin-top: 6px; color: #f2b8a8; font-size: 13px; }
.lead-consents { margin-top: 26px; display: grid; gap: 12px; }
.lead-form label.lead-check { display: flex; gap: 12px; align-items: flex-start; margin: 0; letter-spacing: 0; text-transform: none; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--hc-mist-85, #dfe3e6); cursor: pointer; }
.lead-form label.lead-check input { flex: none; width: 18px !important; height: 18px !important; margin: 2px 0 0; padding: 0 !important; accent-color: var(--hc-sand-64, #c9ac80); border: 1px solid var(--hc-slate-44) !important; }
.lead-form label.lead-check input[aria-invalid="true"] { outline: 2px solid #f2b8a8; outline-offset: 2px; }
.lead-privacy { margin: 0; font-size: 13px; color: var(--hc-stone-66); }
.lead-privacy a { color: var(--hc-sand-64, #c9ac80); text-decoration: underline; }
.lead-turnstile { margin-top: 22px; }
.lead-form .submit-button { margin-top: 28px; }
.lead-band { padding-top: 80px; }

/* v1.111: header menu centred. Wide screens: centred on the page; narrower desktops: centred between the logo and the phone number. */
@media (min-width: 1251px) { .site-nav .nav-links { margin-left: auto; } }
@media (min-width: 1400px) { .site-nav .nav-links { position: absolute; left: 50%; transform: translateX(-50%); margin-left: 0; } }

/* v1.131: generic CMS pages (privacy policy): one centred reading column. */
.page-basic .split-heading { display: block; max-width: 820px; margin: 0 auto; text-align: center; }
.page-basic .split-heading > p { max-width: 560px; margin: 24px auto 0; }
.page-basic .page-section .prose { max-width: 820px; margin: 0 auto; }
.page-basic + .region-strip { margin-top: 70px; }