/* ============================================
   Opportunity Island Falls - Main Stylesheet
   ============================================ */

/* --- CSS Variables / Design Tokens --- */
:root {
    /* Colors — matched to hathornblock.com's government-navy palette
       (its styles.css :root), so both public sites share one look.
       The old gold accent maps to HB's muted steel accent. */
    --color-primary: #1b3252;
    --color-primary-dark: #0f1f38;
    --color-primary-light: #476a92;
    --color-gold: #d6b25e;
    --color-gold-dark: hsl(42, 50%, 30%);
    --color-accent-on-dark: hsl(210, 45%, 82%);  /* readable steel on the dark navy — 65% measured 2.9:1 */
    --color-success: hsl(140, 40%, 40%);
    --color-error: hsl(0, 50%, 45%);
    --color-warning: hsl(35, 50%, 50%);
    --color-white: hsl(0, 0%, 100%);
    --color-gray-50: hsl(220, 2%, 98%);
    --color-gray-100: hsl(220, 2%, 97%);
    --color-gray-200: hsl(220, 3%, 92%);
    --color-gray-300: hsl(220, 4%, 85%);
    --color-gray-500: hsl(220, 6%, 65%);
    --color-gray-700: hsl(220, 10%, 45%);
    --color-gray-900: hsl(220, 15%, 25%);
    --color-dark: hsl(210, 20%, 15%);

    /* Typography */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Newsreader", "GT Sectra", Georgia, serif;  /* was Inter — a sans in the display slot broke the family on every page using it */

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 6rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-gray-700);
    background: var(--color-white);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.skip-link {
    position: fixed;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    z-index: 1002;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-white);
    background: var(--color-primary-dark);
    transform: translateY(-150%);
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-gray-900);
    line-height: 1.3;
    font-weight: 700;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.125rem; }

p {
    margin-bottom: var(--spacing-md);
}

ul {
    padding-left: var(--spacing-lg);
}

strong {
    font-weight: 700;
}

/* --- Layout --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.section {
    padding: var(--spacing-4xl) 0;
}

.section-light {
    background: var(--color-gray-50);
}

.section-dark {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: var(--color-white);
}

.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: var(--color-white);
}

.section-dark p {
    color: rgba(255, 255, 255, 0.85);
}

.section-accent {
    background: linear-gradient(180deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
}

/* --- Section Header --- */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-gold-dark);
    background: hsla(210, 20%, 50%, 0.1);
    padding: 0.35rem 1rem;
    border-radius: 20px;
    margin-bottom: var(--spacing-md);
}

.section-dark .section-label {
    color: var(--color-accent-on-dark);
    /* No tinted pill here: it raises the local background luminance and drags the
       label back under 4.5:1. The uppercase/letter-spaced treatment is enough. */
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}

.section-title {
    margin-bottom: var(--spacing-md);
}

.section-subtitle {
    font-size: 1.15rem;
    /* gray-500 renders this at ~2.4:1 on the light section backgrounds — a WCAG AA
       failure on a civic page read by an older-than-average audience. gray-700 is
       ~5.1:1 on the same backgrounds. */
    color: var(--color-gray-700);
    max-width: 700px;
    margin: 0 auto;
}

.section-dark .section-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

/* --- Public parcel comparison entry --- */
/* Starch Factory committed-record performance story */
.starch-performance {
    --starch-gold: #b7791f;
    --starch-green: #2f6b4f;
    --starch-slate: #516b8b;
    /* 2026-08-14: was clamp(3rem, 7vw, 5.5rem) — 88px at desktop, against a
       page whose blocks otherwise sit 64px apart, and it had NO bottom margin
       at all so the next block butted straight into it. Both sides now match
       the rhythm. */
    margin-top: 4rem;
    margin-bottom: 4rem;
    padding: clamp(1.25rem, 4vw, 3rem);
    color: var(--color-gray-900);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(31, 41, 55, 0.12);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.starch-performance-header {
    max-width: 760px;
}

.starch-performance-header h3 {
    margin: 0.35rem 0 0.75rem;
    font-size: clamp(1.75rem, 4vw, 2.7rem);
    line-height: 1.08;
}

.starch-performance-header p,
.starch-performance-notes p {
    color: var(--color-gray-700);
}

.starch-performance-cards {
    /* 2026-08-14: three cards — Starch Factory, Downtown Residents, Other
       downtown. Rest of town was removed at Casey's request; the comparison is
       between the holding and the downtown around it, not the whole town. */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

/* Residents-only FY2025 row: four cohorts across, muted provenance line. */
.starch-performance-cards--residents {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.starch-performance-residents-head {
    margin-top: 2.5rem;
}

/* 2026-08-14: the residents header is now the wrapper's first child wherever the
   FY2025 comparison cards were relocated out from above it — drop the spacer
   margin it needed when a source note used to sit above it in the same card. */
.starch-performance > .starch-performance-residents-head:first-child {
    margin-top: 0;
}

.starch-performance-source {
    font-size: 0.82rem;
    color: var(--color-gray-700);
    margin: 0.75rem 0 0;
    line-height: 1.5;
}

.starch-performance-subgroup {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-gray-200);
}

.starch-performance-subgroup h5 {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gray-700);
}

@media (max-width: 980px) {
    .starch-performance-cards,
    .starch-performance-cards--residents {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.starch-performance-card {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(31, 41, 55, 0.14);
    border-top: 5px solid var(--starch-slate);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.starch-performance-card[data-group-card="starch_factory"] {
    border-top-color: var(--starch-gold);
}

.starch-performance-card[data-group-card="other_downtown"] {
    border-top-color: var(--starch-green);
}

.starch-performance-card h4 {
    margin: 0 0 0.7rem;
    font-size: 1.15rem;
}

.starch-performance-card-tax {
    min-height: 4.5rem;
    margin-bottom: 1rem;
}

.starch-performance-card-tax strong {
    display: block;
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.1;
}

.starch-performance-card dl {
    display: grid;
    gap: 0.7rem;
    margin: 0;
}

.starch-performance-card dl div {
    padding-top: 0.65rem;
    border-top: 1px solid rgba(31, 41, 55, 0.1);
}

.starch-performance-card dt {
    color: var(--color-gray-600);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.starch-performance-card dd {
    margin: 0.2rem 0 0;
    font-weight: 700;
}

.starch-performance-explorer,
.starch-performance-mill-rate,
.starch-performance-notes {
    margin-top: 2.25rem;
}

.starch-performance-explorer h4,
.starch-performance-mill-rate h4,
.starch-performance-notes h4 {
    margin-bottom: 0.65rem;
    font-size: 1.35rem;
}

.starch-performance-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 1rem 0;
}

.starch-performance-metric {
    min-height: 44px;
    padding: 0.65rem 0.9rem;
    color: var(--color-gray-800);
    background: #fff;
    border: 1px solid var(--color-gray-300);
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.starch-performance-metric[aria-pressed="true"] {
    color: #fff;
    background: var(--color-gray-900);
    border-color: var(--color-gray-900);
}

.starch-performance-metric:hover {
    border-color: var(--starch-gold);
}

.starch-performance-metric:focus-visible,
.starch-performance-table-wrap:focus-visible {
    outline: 3px solid #8a5a11;
    outline-offset: 3px;
}

.starch-performance-chart {
    min-height: 300px;
    padding: 0.75rem;
    overflow: hidden;
    background: #fbfaf7;
    border: 1px solid rgba(31, 41, 55, 0.12);
    border-radius: var(--radius-lg);
}

.starch-performance-chart > p {
    margin: 5rem auto;
    max-width: 36rem;
    text-align: center;
}

.starch-performance-chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.starch-chart-grid {
    stroke: #d9d6cf;
    stroke-width: 1;
}

.starch-chart-axis-label,
.starch-chart-axis-title {
    fill: #4b5563;
    font-family: inherit;
    font-size: 13px;
}

.starch-chart-axis-title {
    font-weight: 700;
}

.starch-chart-series,
.starch-chart-point {
    transition: opacity 180ms ease;
}

.starch-performance-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.25rem;
    margin-top: 0.8rem;
    color: var(--color-gray-700);
    font-size: 0.9rem;
    font-weight: 700;
}

.starch-performance-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.starch-performance-legend-swatch {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
}

.starch-performance-finding {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    background: #fff8e8;
    border-left: 4px solid var(--starch-gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-weight: 650;
}

.starch-performance-mill-list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.starch-performance-mill-list li {
    padding: 0.75rem 0.4rem;
    text-align: center;
    background: #f4f6f8;
    border-radius: var(--radius-md);
}

.starch-performance-mill-list span,
.starch-performance-mill-list strong {
    display: block;
}

.starch-performance-mill-list span {
    color: var(--color-gray-600);
    font-size: 0.78rem;
}

.starch-performance-table-wrap {
    margin-top: 2.25rem;
    overflow-x: auto;
    border: 1px solid rgba(31, 41, 55, 0.14);
    border-radius: var(--radius-lg);
}

.starch-performance-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.88rem;
}

.starch-performance-tax-acre-table {
    table-layout: auto;
}

.starch-performance-table caption {
    padding: 1rem;
    color: var(--color-gray-900);
    background: #f4f6f8;
    font-size: 1rem;
    font-weight: 800;
    text-align: left;
}

.starch-performance-table th,
.starch-performance-table td {
    padding: 0.72rem;
    border-bottom: 1px solid rgba(31, 41, 55, 0.1);
    text-align: right;
    white-space: nowrap;
}

.starch-performance-table th:first-child {
    text-align: left;
}

.starch-performance-table thead th {
    color: #fff;
    background: var(--color-gray-900);
}

.starch-performance-tax-acre-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 230px;
    background: #f8f7f3;
    box-shadow: 1px 0 rgba(31, 41, 55, 0.12);
}

.starch-performance-tax-acre-table thead th:first-child {
    z-index: 2;
    color: #fff;
    background: var(--color-gray-900);
}

.starch-performance-notes {
    padding-top: 0.5rem;
    border-top: 1px solid rgba(31, 41, 55, 0.14);
}

.starch-performance-notes p {
    margin: 0.65rem 0;
    font-size: 0.92rem;
}

@media (max-width: 900px) {
    .starch-performance-cards {
        grid-template-columns: 1fr;
    }

    .starch-performance-card-tax {
        min-height: 0;
    }

    .starch-performance-mill-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .starch-performance {
        padding: 1rem;
        border-radius: var(--radius-lg);
    }

    .starch-performance-cards {
        grid-template-columns: 1fr;
    }

    .starch-performance-controls {
        display: grid;
        grid-template-columns: 1fr;
    }

    .starch-performance-metric {
        width: 100%;
        border-radius: var(--radius-md);
        text-align: left;
    }

    .starch-performance-chart {
        min-height: 230px;
        padding: 0.25rem;
    }

    .starch-chart-axis-label,
    .starch-chart-axis-title {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .starch-performance-mill-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.lot-comparison-card {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    color: var(--color-gray-700);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.lot-comparison-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-md);
    align-items: end;
}

.lot-comparison-field {
    min-width: 0;
}

.lot-comparison-field label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--color-gray-900);
    font-weight: 700;
}

.lot-comparison-field input {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.85rem;
    color: var(--color-gray-900);
    background: var(--color-white);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font: inherit;
}

.lot-comparison-field input:focus-visible {
    border-color: var(--color-primary);
    outline: 3px solid hsla(210, 45%, 50%, 0.35);
    outline-offset: 2px;
}

/* The form sits on a white card inside a dark section, so `.section-dark p`
   was painting this hint near-white on white — invisible at ~1.07:1. */
.section-dark .lot-comparison-example,
.lot-comparison-example {
    margin: var(--spacing-xs) 0 0;
    color: var(--color-gray-700);
    font-size: 0.875rem;
}

.lot-comparison-form .btn {
    min-height: 48px;
    border: 0;
    font-family: inherit;
    white-space: nowrap;
}

.lot-comparison-browse {
    margin: var(--spacing-lg) 0 0;
    text-align: center;
}

.lot-comparison-browse a {
    color: var(--color-primary-dark);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.2em;
}

.lot-comparison-browse a:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .lot-comparison-card {
        padding: var(--spacing-lg);
    }

    .lot-comparison-form {
        grid-template-columns: 1fr;
    }

    .lot-comparison-form .btn {
        width: 100%;
        max-width: none;
    }
}

/* --- Navigation --- */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: hsl(210, 20%, 15%); /* HB: solid government-navy band, always */
    transition: box-shadow 0.3s ease;
    padding: var(--spacing-md) 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav.scrolled {
    background: hsl(210, 20%, 15%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-white);
    transition: color 0.3s ease;
}

.nav.scrolled .nav-logo {
    color: var(--color-white);
}

.nav-logo-img {
    height: 36px;
    width: auto;
}

.nav-collaboration-marks {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

.nav-collaboration-pine {
    height: 34px;
    width: auto;
}

.nav-collaboration-divider {
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, 0.28);
}

.nav-collaboration-seal {
    width: auto;
    height: 42px;
    display: block;
    object-fit: contain;
}

@media (max-width: 768px) {
    .nav-collaboration-marks { gap: 5px; }
    .nav-collaboration-pine { height: 28px; }
    .nav-collaboration-divider { height: 22px; }
    .nav-collaboration-seal { height: 34px; }
}

.nav-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-text {
    font-weight: 700;
    font-size: 1.1rem;
}

.logo-subtitle {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.7;
}

.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0;
    margin: 0;
}

.nav-menu li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-md);
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-menu li a:hover {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
}

.nav-menu a[aria-current="page"] {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
}

.nav.scrolled .nav-menu li a {
    color: rgba(255, 255, 255, 0.85);
}

.nav.scrolled .nav-menu li a:hover {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
}

.nav-login-btn {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    font-weight: 600 !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: var(--radius-md) !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.nav-login-btn:hover {
    background: var(--color-primary-dark) !important;
    transform: translateY(-1px);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 1001;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--color-white);
    transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    border-radius: 2px;
}

.nav.scrolled .nav-toggle span {
    background: var(--color-white);
}

/* --- Hero --- */
.hero {
    min-height: 100vh;
    /* iOS Safari resolves 100vh to the toolbar-HIDDEN viewport, so a centred
       hero renders lower than the visible centre while the toolbar is up —
       which is what put the title "pretty far down the page" on Casey's
       iPhone (CR#28, 2026-08-16). svh is the visible area; older browsers
       ignore this line and keep the vh value above. */
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, hsl(210, 50%, 96%) 0%, hsl(0, 0%, 100%) 100%); /* HB hero */
}

.hero-background {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, hsla(210, 50%, 35%, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, hsla(210, 45%, 50%, 0.07) 0%, transparent 50%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-4xl) var(--spacing-xl);
    text-align: center;
}

.hero-quote {
    margin-bottom: var(--spacing-2xl);
}

.hero-title {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.hero-title-main {
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.25;
}

.hero-title-author {
    font-size: 1rem;
    font-weight: 400;
    color: hsl(220, 10%, 42%);
    letter-spacing: 0.05em;
}

.hero-description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-2xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-body);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px hsla(210, 55%, 25%, 0.35);
}

.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background: hsla(210, 50%, 35%, 0.08);
    transform: translateY(-2px);
}

.section-light .btn-secondary,
.section-accent .btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.section-light .btn-secondary:hover,
.section-accent .btn-secondary:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* On a dark section the base rule painted navy text inside a navy border on a
   navy ground — 1.28:1, an invisible button. "Contact PIA Industries" under
   The Strategy was unreadable in production. */
.section-dark .btn-secondary {
    background: transparent;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.section-dark .btn-secondary:hover {
    background: var(--color-white);
    color: var(--color-primary-dark);
    border-color: var(--color-white);
}

/* --- Content Cards --- */
.content-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-gray-200);
}

.section-dark .content-card {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
}

.lead-text {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-xl);
    line-height: 1.8;
}

.highlight-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    text-align: center;
    padding: var(--spacing-lg);
    border-left: 4px solid var(--color-gold);
    background: hsla(210, 20%, 50%, 0.05);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.section-dark .highlight-text {
    color: var(--color-white);
    background: hsla(210, 20%, 50%, 0.1);
}

/* --- Two Column --- */
.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
}

/* --- Callout --- */
.callout {
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-lg);
}

.callout-primary {
    background: rgba(26, 58, 92, 0.06);
    border-left: 4px solid var(--color-primary);
}

.callout-warning {
    background: rgba(230, 126, 34, 0.06);
    border-left: 4px solid var(--color-warning);
}

/* --- Benefits Grid --- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: 4rem;   /* was --spacing-2xl (48px); the page's rhythm is 64 */
}

.benefit-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.benefit-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--spacing-md);
    background: hsla(210, 20%, 50%, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-gold);
}

.benefit-card h3 {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-sm);
}

.benefit-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

/* --- Tabs --- */
.tabs {
    max-width: 960px;
    margin: 0 auto;
}

.tab-buttons {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    justify-content: center;
}

.tab-button {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-button:hover {
    color: var(--color-primary);
    background: var(--color-gray-200);
}

.tab-button.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Parameter Cards --- */
.parameter-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.parameter-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}

.parameter-card h3 {
    font-size: 1.15rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
}

.parameter-detail {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

/* --- Motivation Grid --- */
.motivation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

.motivation-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    position: relative;
}

.motivation-number {
    position: absolute;
    top: -12px;
    left: var(--spacing-lg);
    width: 32px;
    height: 32px;
    background: var(--color-gold);
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.motivation-card h3 {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.motivation-card p {
    font-size: 0.9rem;
}

/* --- Building / Property Showcase --- */
.building-image {
    margin-bottom: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.building-photo {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
}

.building-showcase {
    margin-bottom: var(--spacing-3xl);
}

.building-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.building-stat {
    text-align: center;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gold-dark);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--color-gray-700);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.building-description p {
    font-size: 1.05rem;
    margin-bottom: var(--spacing-md);
}

/* --- Challenge Section --- */
/* The question, the explanation, the Critical Barrier and the verdict on it are
   one argument, so they are bounded as one card. */
.challenge-card {
    margin-bottom: var(--spacing-3xl);
    padding: var(--spacing-2xl);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.challenge-card > .challenge-section {
    margin-bottom: 0;
}

.challenge-section {
    margin-bottom: var(--spacing-3xl);
}

.challenge-section h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-lg);
}

.challenge-explanation p {
    font-size: 1rem;
    margin-bottom: var(--spacing-lg);
}

/* --- Economic Perspective --- */
.economic-perspective h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xl);
}

.definition-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.definition-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}

.definition-term {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.definition-meaning {
    font-size: 0.9rem;
    color: var(--color-gray-700);
}

.impact-statement {
    font-size: 1.05rem;
    line-height: 1.8;
    padding: var(--spacing-lg);
    background: rgba(26, 58, 92, 0.04);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-primary);
}

/* --- Options Comparison --- */
.options-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.option-card {
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: transform 0.2s ease;
}

.option-card:hover {
    transform: translateY(-2px);
}

.option-teardown {
    border-top: 4px solid var(--color-error);
}

.option-rebuild {
    border-top: 4px solid var(--color-success);
}

.option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.option-header h3 {
    font-size: 1.15rem;
}

.option-cost {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-gold-dark);
}

.option-impact {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

.option-impact.negative {
    background: rgba(192, 57, 43, 0.06);
    border-left: 3px solid var(--color-error);
}

.option-impact.positive {
    background: rgba(45, 80, 22, 0.06);
    border-left: 3px solid var(--color-success);
}

/* --- Analysis Grid --- */
/* A card inside the challenge card: it answers the Critical Barrier directly
   above it, and nesting shows that instead of letting it read as the next
   topic. Tinted, so the white verdict cards inside still separate from it —
   white on white on white would have flattened all three levels. */
.motivation-analysis {
    margin-top: var(--spacing-2xl);
    padding: var(--spacing-xl);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

.motivation-analysis h3 {
    font-size: 1.35rem;
    margin-bottom: var(--spacing-xl);
}

/* Two nested cards eat 160px of a 390px screen, leaving the verdict cards
   about 178px to work in. Both boxes give up padding on small screens; the
   nesting still reads from the tint and the borders. */
@media (max-width: 720px) {
    .panel-group + .panel-group,
    .motivation-analysis { margin-top: var(--spacing-xl); }
}

.analysis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.analysis-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    /* The three cards stretch to the tallest, so the two shorter ones would
       hang their text from the top over a pool of empty space. Centring splits
       that space above and below instead. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.analysis-verdict {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 auto var(--spacing-md);
}

.analysis-verdict.negative {
    background: rgba(192, 57, 43, 0.1);
    color: var(--color-error);
}

.analysis-verdict.positive {
    background: rgba(45, 80, 22, 0.1);
    color: var(--color-success);
}

.analysis-card h4 {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
}

.analysis-card p {
    font-size: 0.875rem;
}

/* --- Conclusion Card --- */
.conclusion-card {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    text-align: center;
    margin-bottom: var(--spacing-3xl);
}

.conclusion-card h3 {
    color: var(--color-white);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
}

.conclusion-text {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto;
}

/* --- Benefits List --- */
.rebuild-benefits h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xl);
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.benefit-item {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.benefit-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.benefit-icon-small {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: rgba(45, 80, 22, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-icon-small svg {
    width: 18px;
    height: 18px;
    color: var(--color-success);
}

.benefit-content h4 {
    margin-bottom: var(--spacing-xs);
}

.benefit-content p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* --- Strategy Steps ---
   2026-08-14: converted from a tall vertical timeline to horizontal
   scroll-snap cards (Casey). .strategy-scroller is the non-scrolling
   positioning context for the right-edge "more content" fade;
   .strategy-steps is the actual overflow-x scroller. */
.strategy-scroller {
    position: relative;
}

.strategy-scroller::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: var(--spacing-lg);
    width: 3.5rem;
    background: linear-gradient(to right, transparent, rgba(15, 31, 56, 0.85));
    pointer-events: none;
}

.strategy-steps {
    display: flex;
    gap: var(--spacing-lg);
    margin: 0;
    padding: var(--spacing-xs) 0 var(--spacing-lg);
    position: relative;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--spacing-xs);
    scroll-behavior: smooth;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.strategy-steps::-webkit-scrollbar {
    display: none;
    height: 0;
}

.strategy-steps:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
    border-radius: var(--radius-md);
}

.step-card {
    display: flex;
    gap: var(--spacing-lg);
    flex: 0 0 auto;
    width: min(380px, 85vw);
    scroll-snap-align: start;
    position: relative;
}

.step-number {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--color-gold);
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.step-content {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}

.step-content h3 {
    font-size: 1.15rem;
    margin-bottom: var(--spacing-sm);
}

.step-content p {
    font-size: 0.95rem;
    margin-bottom: var(--spacing-sm);
}

.step-detail {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: var(--spacing-sm);
}

/* --- Call to Action Section --- */
.call-to-action-section {
    text-align: center;
    margin-top: var(--spacing-3xl);
    padding: var(--spacing-2xl);
    background: hsla(210, 20%, 50%, 0.08);
    border-radius: var(--radius-lg);
    border: 1px solid hsla(210, 20%, 50%, 0.15);
}

.call-to-action-section h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
}

.cta-description {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto var(--spacing-xl);
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Footer --- */
.footer {
    background: var(--color-dark);
    color: rgba(255, 255, 255, 0.65);
    padding: var(--spacing-3xl) 0 var(--spacing-xl);
    border-top: 3px solid var(--color-gold);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    align-items: start;
}

.footer h4 {
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer p {
    font-size: 0.875rem;
    margin-bottom: 0;
    line-height: 1.6;
}

.footer a {
    color: var(--color-accent-on-dark);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease, opacity 0.2s ease;
    opacity: 0.9;
}

.footer a:hover {
    color: var(--color-white);
    opacity: 1;
}

.footer-brand {
    text-align: right;
}

.footer-logo {
    height: 44px;
    width: auto;
    margin-left: auto;
    margin-bottom: var(--spacing-sm);
    opacity: 0.9;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.footer-bottom p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    gap: var(--spacing-lg);
}

.footer-bottom-links a {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
    color: rgba(255, 255, 255, 0.95);
}

/* --- Tools Hero (tools.html) --- */
.tools-hero {
    min-height: 60vh;
    background: linear-gradient(135deg, hsl(210, 25%, 8%) 0%, hsl(210, 22%, 12%) 40%, hsl(210, 20%, 17%) 100%);
}

.tools-hero .hero-background {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%),
        radial-gradient(circle at 20% 80%, hsla(210, 20%, 50%, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(42, 90, 140, 0.15) 0%, transparent 50%);
}

.tools-hero .hero-title-main {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.tools-hero .hero-description {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* --- Tool Cards (tools.html) --- */
.tool-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    border: 2px solid var(--color-gray-200);
    border-top: 3px solid var(--color-primary);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tool-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border-top-color: var(--color-primary-dark);
}

a.tool-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.tool-icon {
    width: 70px;
    height: 70px;
    background: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.tool-icon svg {
    width: 40px;
    height: 40px;
    color: var(--color-white);
}

.tool-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--spacing-md);
}

.tool-card p {
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-lg);
    flex-grow: 1;
}

.tool-features {
    list-style: none;
    margin: var(--spacing-md) 0;
    padding: 0;
}

.tool-features li {
    padding: var(--spacing-xs) 0;
    color: var(--color-gray-700);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.tool-features li::before {
    content: "\2713";
    color: var(--color-success);
    font-weight: 700;
    font-size: 1.2rem;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-3xl);
}

/* --- CTA Banner (tools.html) --- */
.cta-banner {
    background: var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3xl);
    text-align: center;
    margin-top: var(--spacing-3xl);
    color: var(--color-white);
    border-top: 4px solid var(--color-primary-dark);
}

.cta-banner h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
}

.cta-banner p {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-2xl);
    opacity: 0.9;
}

/* --- Attribute Scoring Matrix (tools.html) --- */
.asm-definitions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.asm-def-card {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.asm-def-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.asm-def-abbr {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--color-gold);
    color: var(--color-primary-dark);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.asm-def-body h4 {
    color: var(--color-white);
    font-size: 1.05rem;
    margin-bottom: var(--spacing-xs);
}

.asm-def-body p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0;
}

.asm-attr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.asm-attr-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.asm-attr-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.asm-attr-card-wide {
    grid-column: 1 / -1;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.asm-attr-icon {
    width: 48px;
    height: 48px;
    background: hsla(210, 20%, 50%, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.asm-attr-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-gold);
}

.asm-attr-card h3 {
    font-size: 1.15rem;
    color: var(--color-white);
    margin-bottom: var(--spacing-sm);
}

.asm-attr-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0;
}

.asm-equation-box {
    background: var(--color-white);
    border: 2px solid var(--color-gold);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    text-align: center;
}

.asm-equation-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.asm-eq-label {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary);
    min-width: 140px;
    text-align: right;
}

.asm-eq-symbol {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--color-gray-700);
}

.asm-eq-fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.asm-eq-num {
    padding: var(--spacing-xs) var(--spacing-md);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

.asm-eq-den {
    padding: var(--spacing-xs) var(--spacing-md);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-gray-700);
}

.asm-eq-sum {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: 0.03em;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

@media (max-width: 1024px) {
    .benefits-grid {
        grid-template-columns: 1fr 1fr;
    }

    .motivation-grid {
        grid-template-columns: 1fr;
    }

    .analysis-grid {
        grid-template-columns: 1fr;
    }

    .building-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   Homepage — pinned editorial story slides
   ============================================================ */

/* min-height, not height: on a short laptop (1280x720 is common) several of
   these chapters are taller than the viewport, and a fixed 100vh pin with
   overflow:hidden silently CLIPPED their closing element — the "Why this
   matters" aside, the recommendation, the closing call to action — with no
   scrollbar and no way to reach them. Sized as a minimum instead, a tall
   viewport is unaffected (the pin is exactly 100vh and still travels inside
   its taller parent, so the pinned-cinema effect is identical), while a short
   one lets the section grow to fit its content and the page simply scrolls
   through it. Nothing is ever hidden. */
.home-page .story-slide {
    position: relative;
    min-height: calc(100vh + 80px);
    height: auto;
    padding: 0 !important;
}

.home-page .story-slide-pin {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    min-height: max(100vh, 620px);
    box-sizing: border-box;
    overflow: hidden;
    padding-top: clamp(5rem, 10vh, 7rem);
    padding-bottom: clamp(2.5rem, 6vh, 5rem);
    align-content: center;
}

.home-page .story-slide--statement {
    min-height: calc(100vh + 80px);
}

.home-page .story-slide--statement .story-slide-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: var(--spacing-xl);
}

.home-page .story-slide--manifesto .home-heading,
.home-page .story-slide--timeline .home-heading,
.home-page .story-slide--proof .home-heading {
    position: static;
}

.home-page .story-slide--opportunity .home-property-layout {
    height: 100%;
    align-content: center;
}

.home-page .story-slide--timeline .timeline {
    align-self: center;
}

.home-page .story-slide--proof .proof {
    align-self: center;
}

.home-page .story-slide--proof .home-insight {
    margin-top: var(--spacing-lg) !important;
}

.home-page .story-slide--funding .home-heading {
    margin-bottom: clamp(1.5rem, 4vh, 3rem);
}

.home-page .story-slide--funding .chain {
    width: min(92%, 1080px);
}

.home-page .story-slide--estimate {
    min-height: calc(100vh + 240px);
    height: auto;
}

/* Was `sticky`, left over from the retired pinned-cinema system. The flatten
   block below sets every .story-slide-pin to static, but at two classes it
   loses to this three-class selector — so the estimate section alone kept
   pinning, and stuck with its top at viewport 0, i.e. 119px of it behind the
   fixed nav + chapter bar. The mobile and reduced-motion blocks already force
   it static; this makes the default desktop path agree with them. */
.home-page .story-slide--estimate .story-slide-pin {
    position: static;
}

.home-page .story-slide--estimate .estimate-phase {
    position: absolute;
    inset: clamp(5rem, 10vh, 7rem) max(var(--spacing-xl), calc((100vw - 1200px) / 2))
        clamp(2.5rem, 6vh, 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(36px) scale(0.985);
    transition:
        opacity 520ms ease,
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 520ms;
}

.home-page .story-slide--estimate[data-story-phase="unlock"] .estimate-phase--unlock,
.home-page .story-slide--estimate[data-story-phase="precedent"] .estimate-phase--precedent,
.home-page .story-slide--estimate[data-story-phase="return"] .estimate-phase--return {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.home-page .story-slide--estimate .unlock,
.home-page .story-slide--estimate .stack,
.home-page .story-slide--estimate .stack-sources {
    width: 100%;
    margin: 0;
}

.home-page .story-slide--estimate .estimate-phase--return {
    gap: var(--spacing-lg);
}

.home-page .story-slide--estimate .estimate-phase--return .home-insight {
    margin-top: 0 !important;
}

.home-page .story-slide--decision .home-heading,
.home-page .story-slide--resources .home-heading {
    margin-bottom: clamp(1.5rem, 4vh, 3rem);
}

.home-page .story-slide--decision .home-choice-card-featured {
    margin-top: clamp(1rem, 3vh, 2.5rem);
}

.home-page .story-slide--decision .home-direction {
    margin-top: clamp(1.5rem, 4vh, 3rem);
    padding: clamp(1.5rem, 3vh, 2.5rem);
}

.home-page .story-slide--action .story-slide-pin {
    align-items: center;
}

.home-page .story-slide--resources .home-resource-card {
    padding: clamp(1rem, 2vh, 1.5rem);
}

.home-page .story-slide--resources .home-closing {
    margin-top: clamp(1.5rem, 3vh, 2.5rem);
    padding-top: clamp(1.5rem, 3vh, 2.5rem);
}

.home-page .story-slide--resources .home-closing > p:not(.home-eyebrow) {
    margin-bottom: var(--spacing-lg);
}

/* The homepage now reads as one continuous document. Higgsfield remains the
   only scroll-linked treatment, in the separate .sitephotos sequence. */
.home-page .story-slide,
.home-page .story-slide--estimate,
.home-page .story-slide--resources {
    min-height: 0;
    height: auto;
    padding: clamp(4.5rem, 9vw, 7.5rem) 0 !important;
}

.home-page .story-slide-pin {
    position: static;
    display: block;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding: 0;
}

.home-page .container.story-slide-pin {
    padding-inline: var(--spacing-xl);
}

.home-page .story-slide--estimate .estimate-phase {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin: 0 0 var(--spacing-2xl);
    transition: none;
}

@media (max-width: 900px) {
    .home-page .story-slide {
        height: calc(100svh + 80px);
        min-height: 0;
    }

    .home-page .story-slide-pin {
        min-height: 100svh;
        height: 100svh;
        padding-top: 5.5rem;
        padding-bottom: 2rem;
        overflow-y: auto;
    }

    .home-page .story-slide--manifesto .story-slide-pin,
    .home-page .story-slide--timeline .story-slide-pin,
    .home-page .story-slide--proof .story-slide-pin,
    .home-page .story-slide--action .story-slide-pin {
        display: block;
        overflow-y: auto;
    }

    .home-page .story-slide--estimate {
        height: calc(100svh + 240px);
        min-height: 0;
    }

    .home-page .story-slide--estimate .estimate-phase {
        inset: 5.5rem var(--spacing-lg) 2rem;
        overflow-y: auto;
        justify-content: flex-start;
    }

    .home-page .story-slide--resources {
        height: calc(100svh + 80px);
        min-height: 0;
    }

    .home-page .story-slide--resources .story-slide-pin {
        overflow-y: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .story-slide,
    .home-page .story-slide--estimate,
    .home-page .story-slide--resources {
        height: auto;
        min-height: 0;
    }

    .home-page .story-slide-pin {
        position: static;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .home-page .story-slide--estimate .estimate-phase {
        position: static;
        margin-bottom: var(--spacing-2xl);
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* ============================================================
   Homepage cinematic reveal system
   ============================================================ */

.motion-ready body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: var(--color-dark);
    transform-origin: top;
    transform: scaleY(1);
    transition: transform 720ms cubic-bezier(0.76, 0, 0.24, 1);
}

.motion-ready.motion-loaded body::before {
    transform: scaleY(0);
}

.motion-ready .home-hero .home-eyebrow,
.motion-ready .home-hero .hero-title-main,
.motion-ready .home-hero .hero-description,
.motion-ready .home-hero .hero-cta {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(8px);
    transition:
        opacity 700ms ease,
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 700ms ease;
}

.motion-ready.motion-loaded .home-hero .home-eyebrow,
.motion-ready.motion-loaded .home-hero .hero-title-main,
.motion-ready.motion-loaded .home-hero .hero-description,
.motion-ready.motion-loaded .home-hero .hero-cta {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.motion-ready.motion-loaded .home-hero .home-eyebrow { transition-delay: 280ms; }
.motion-ready.motion-loaded .home-hero .hero-title-main { transition-delay: 380ms; }
.motion-ready.motion-loaded .home-hero .hero-description { transition-delay: 520ms; }
.motion-ready.motion-loaded .home-hero .hero-cta { transition-delay: 650ms; }

.motion-ready .home-motion-reveal {
    opacity: 0;
    transform: translateY(42px);
    filter: blur(7px);
    transition:
        opacity 700ms ease var(--motion-delay, 0ms),
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay, 0ms),
        filter 700ms ease var(--motion-delay, 0ms);
}

.motion-ready .home-motion-reveal.is-motion-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.motion-ready .home-motion-mask {
    position: relative;
    overflow: hidden;
    transform: translateY(30px) scale(0.985);
    transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-ready .home-motion-mask::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: var(--color-primary-dark);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 1100ms cubic-bezier(0.76, 0, 0.24, 1);
}

.motion-ready .home-motion-mask.is-motion-visible {
    transform: translateY(0) scale(1);
}

.motion-ready .home-motion-mask.is-motion-visible::after {
    transform: scaleX(0);
}

.motion-ready .home-motion-count {
    opacity: 0.35;
    transform: translateY(12px);
    transition: opacity 500ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-ready .home-motion-count.is-motion-visible {
    opacity: 1;
    transform: translateY(0);
}

.motion-ready .home-chapter--timeline .timeline {
    position: relative;
}

.motion-ready .home-chapter--timeline .timeline::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    z-index: 1;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-ready .home-chapter--timeline .timeline.is-motion-visible::before {
    transform: scaleX(1);
}

.motion-ready .home-chapter--timeline .tl-step {
    z-index: 2;
}

@media (max-width: 900px) {
    .motion-ready .home-chapter--timeline .timeline::before {
        top: 0;
        right: auto;
        bottom: 0;
        left: 0;
        width: 2px;
        height: auto;
        transform: scaleY(0);
        transform-origin: top;
    }

    .motion-ready .home-chapter--timeline .timeline.is-motion-visible::before {
        transform: scaleY(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .motion-ready body::before {
        display: none !important;
    }

    .motion-ready .home-motion-reveal,
    .motion-ready .home-motion-mask,
    .motion-ready .home-motion-count,
    .motion-ready .home-hero .home-eyebrow,
    .motion-ready .home-hero .hero-title-main,
    .motion-ready .home-hero .hero-description,
    .motion-ready .home-hero .hero-cta {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .motion-ready .home-motion-mask::after {
        display: none !important;
    }

    .motion-ready .home-chapter--timeline .timeline::before {
        display: none !important;
    }
}

/* ============================================================
   Site photography — four pinned editorial slides
   ============================================================ */

.sitephotos .sv-slide {
    position: relative;
    height: calc(100vh + 80px);
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
    background: var(--color-dark);
}

.home-page .sitephotos {
    overflow: clip;
}

.sitephotos .sv-slide-pin {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    min-height: 620px;
    overflow: hidden;
}

.sitephotos .sv-slide--aerial .sv-slide-pin {
    display: flex;
    align-items: flex-end;
}

.sitephotos .sv-slide--entrance .sv-frame {
    position: absolute;
    inset: 0;
    border-radius: 0;
}

.sitephotos .sv-slide--entrance .sv-frame::after,
.sitephotos .sv-slide--concept .concept-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sitephotos .sv-slide--entrance .sv-frame::after {
    background: linear-gradient(90deg,
        hsla(210, 25%, 8%, 0.18) 0%,
        hsla(210, 25%, 8%, 0.48) 48%,
        hsla(210, 25%, 8%, 0.92) 100%);
}

.sitephotos .sv-slide--entrance .sv-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(calc(1.11 - 0.08 * var(--p, 0.5)))
        translateX(calc(-2% + 4% * var(--p, 0.5)));
}

.sitephotos .sv-slide-copy {
    position: relative;
    z-index: 2;
    width: min(42rem, 48vw);
    margin-left: auto;
    padding: clamp(5rem, 12vh, 9rem) clamp(2rem, 7vw, 7rem) 3rem 2rem;
    opacity: clamp(0, calc((var(--p, 0.5) - 0.12) * 5), 1);
    transform: translateX(calc(70px * (1 - var(--p, 0.5))));
}

.sitephotos .sv-slide-copy h3 {
    font-size: clamp(2rem, 4.8vw, 4.8rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.sitephotos .sv-slide-copy p {
    max-width: 42ch;
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.65;
}

.sitephotos .sv-slide--buildings .sv-slide-pin {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: center;
    padding-block: clamp(2rem, 6vh, 4rem);
}

.sitephotos .sv-buildings-pair {
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vh, 1.25rem);
}

.sitephotos .sv-slide--buildings .sv-pano {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    border-radius: 0;
}

.sitephotos .sv-slide--buildings .sv-pano + .sv-pano {
    margin-top: 0;
}

.sitephotos .sv-slide--buildings .sv-pano img {
    width: 132%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: translateX(calc(-24.25% * var(--p, 0.5)));
}

.sitephotos .sv-slide--buildings .sv-pano--reverse img {
    transform: translateX(calc(-24.25% * (1 - var(--p, 0.5))));
}

.sitephotos .sv-slide--buildings .sv-caption {
    width: min(100%, 1200px);
    padding: var(--spacing-lg) var(--spacing-xl) 0;
    font-size: clamp(0.88rem, 1.2vw, 1rem);
    opacity: clamp(0.45, calc(var(--p, 0.5) * 1.5), 1);
}

.sitephotos .sv-slide--concept .sv-slide-pin {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    padding: clamp(2rem, 6vh, 4rem) var(--spacing-xl);
}

.sitephotos .sv-slide--concept .concept {
    width: min(100%, 1400px);
    min-height: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.5fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.sitephotos .sv-slide--concept .concept-frame {
    position: relative;
    overflow: hidden;
    transform: scale(calc(0.94 + 0.06 * var(--p, 0.5)));
}

.sitephotos .sv-slide--concept .concept-frame::after {
    background: linear-gradient(90deg, transparent 55%, hsla(210, 25%, 8%, 0.45));
}

.sitephotos .sv-slide--concept .concept-frame img {
    width: 100%;
    display: block;
    transform: scale(calc(1.08 - 0.05 * var(--p, 0.5)));
}

.sitephotos .sv-slide--concept .concept figcaption {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(0.95rem, 1.3vw, 1.12rem);
    line-height: 1.65;
    opacity: clamp(0, calc((var(--p, 0.5) - 0.1) * 4), 1);
    transform: translateY(calc(55px * (1 - var(--p, 0.5))));
}

.sitephotos .sv-slide--concept .concept figcaption b {
    display: block;
    margin-bottom: var(--spacing-md);
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.sitephotos .sv-slide--concept .concept-tag {
    z-index: 3;
}

.sitephotos .sv-slide--concept .sv-credit {
    width: min(100%, 1400px);
    padding: var(--spacing-lg) 0 0;
}

@media (max-width: 860px) {
    .sitephotos .sv-slide {
        height: calc(100svh + 80px);
    }

    .sitephotos .sv-slide-pin {
        min-height: 560px;
    }

    .sitephotos .sv-slide--entrance .sv-frame::after {
        background: linear-gradient(to top,
            hsla(210, 25%, 8%, 0.92) 0%,
            hsla(210, 25%, 8%, 0.58) 48%,
            hsla(210, 25%, 8%, 0.12) 100%);
    }

    .sitephotos .sv-slide-copy {
        width: 100%;
        margin: 0;
        padding: 0 var(--spacing-xl) clamp(3rem, 8vh, 5rem);
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateY(calc(55px * (1 - var(--p, 0.5))));
    }

    .sitephotos .sv-slide-copy h3 {
        font-size: clamp(2rem, 9vw, 3.5rem);
    }

    .sitephotos .sv-slide--concept .concept {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .sitephotos .sv-slide--concept .concept-frame {
        align-self: end;
    }

    .sitephotos .sv-slide--concept .concept figcaption {
        align-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sitephotos .sv-slide {
        height: auto;
    }

    .sitephotos .sv-slide-pin {
        position: static;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .sitephotos .sv-slide--entrance .sv-frame {
        position: relative;
    }

    .sitephotos .sv-slide--entrance .sv-frame::after,
    .sitephotos .sv-slide--concept .concept-frame::after {
        display: none;
    }

    .sitephotos .sv-slide-copy {
        position: static;
        width: min(100%, 1200px);
        margin: 0 auto;
        padding: var(--spacing-2xl) var(--spacing-xl);
        opacity: 1;
        transform: none;
    }

    .sitephotos .sv-slide--buildings .sv-slide-pin,
    .sitephotos .sv-slide--concept .sv-slide-pin {
        padding-block: var(--spacing-2xl);
    }

    .sitephotos .sv-slide--concept .concept figcaption {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 768px) {
    .asm-definitions {
        grid-template-columns: 1fr;
    }

    .asm-attr-grid {
        grid-template-columns: 1fr;
    }

    .asm-attr-card-wide {
        max-width: none;
    }

    .asm-equation-formula {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .asm-eq-label {
        min-width: auto;
        text-align: center;
    }

    .nav-menu {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100vh;
        background: var(--color-primary-dark);
        flex-direction: column;
        padding: 5rem var(--spacing-xl) var(--spacing-xl);
        gap: var(--spacing-xs);
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3);
        z-index: 1000;
    }

    .nav-menu.open {
        display: flex;
    }

    .nav-menu li a {
        color: rgba(255, 255, 255, 0.85) !important;
        padding: 0.75rem 1rem;
        width: 100%;
        border-radius: var(--radius-md);
    }

    .nav-menu li a:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--color-white) !important;
    }

    .nav-menu a[aria-current="page"] {
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--color-white) !important;
    }

    .nav-toggle {
        display: flex;
        /* 44x44 minimum touch target (WCAG 2.2 AA 2.5.8 asks 24x24; Apple and
           Material both say 44). The bars are 24x2 with 5px gaps = 24x26 of ink,
           and 5px of padding left it a 34x26 target — small enough to miss on
           the one control that opens navigation on a phone. Centre the same ink
           inside a full-size box rather than growing the bars. */
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
        margin-right: -10px;   /* keep the ICON optically flush with the edge */
        box-sizing: border-box;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .two-column {
        grid-template-columns: 1fr;
    }

    .parameter-cards {
        grid-template-columns: 1fr;
    }

    .options-comparison {
        grid-template-columns: 1fr;
    }

    .definition-cards {
        grid-template-columns: 1fr;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .building-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* On a phone the hero stops centring: a centred block absorbs half of any
       padding you remove, so the header still loaded ~a fifth of the way down
       even after the padding cut. Top-aligned, it opens where the reader is
       already looking. The hero keeps a tall-but-not-full stature so it still
       reads as a hero without a screen of empty space under the buttons.
       (CR#28, Casey 2026-08-16.) */
    .hero {
        align-items: flex-start;
    }

    .hero-content {
        /* Clears the fixed nav (~67px) with breathing room and no more; the
           old 6rem+2rem pushed the header a quarter of the way down an
           iPhone screen (CR#28). */
        padding: 6rem var(--spacing-lg) var(--spacing-2xl);
    }

    .section {
        padding: var(--spacing-3xl) 0;
    }

    .container {
        padding: 0 var(--spacing-lg);
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand {
        text-align: center;
    }

    .footer-logo {
        margin: 0 auto var(--spacing-sm);
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--spacing-sm);
    }

    .footer-bottom-links {
        justify-content: center;
    }

    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .step-card {
        gap: var(--spacing-md);
        /* 76vw (not a rounder 80-85vw) deliberately leaves a visible sliver of
           the next card in view on phones, so the row reads as scrollable
           without relying on the edge fade alone. */
        width: min(320px, 76vw);
    }

    .tools-grid {
        grid-template-columns: 1fr;
    }

    .tab-buttons {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .building-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero-cta,
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 280px;
    }
}

/* ============================================
   Homepage civic refactor
   ============================================ */

.home-page {
    background: var(--color-white);
}

.home-page .home-hero {
    min-height: min(820px, 88svh);
    padding-top: 72px;
}

.home-page .home-hero .hero-content {
    max-width: 960px;
}

.home-page .home-hero .hero-title {
    align-items: center;
}

.home-page .home-hero .hero-title-main {
    max-width: 16ch;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.home-page .home-eyebrow {
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-page .hero-description {
    max-width: 620px;
    margin-bottom: var(--spacing-xl);
    line-height: 1.65;
}

.home-page .home-fact-band {
    position: relative;
    z-index: 3;
    background: var(--color-primary-dark);
    color: var(--color-white);
    border-top: 1px solid hsla(0, 0%, 100%, 0.08);
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.08);
}

.home-page .home-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.home-page .home-fact {
    min-height: 150px;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid hsla(0, 0%, 100%, 0.12);
}

.home-page .home-fact:last-child {
    border-right: 1px solid hsla(0, 0%, 100%, 0.12);
}

.home-page .home-fact strong {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.home-page .home-fact span {
    margin-top: var(--spacing-sm);
    color: var(--color-accent-on-dark);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-page .home-section {
    padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}

.home-page .home-heading {
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
}

.home-page .home-heading .section-title {
    letter-spacing: -0.035em;
}

.home-page .home-copy {
    max-width: 68ch;
}

.home-page .home-impact-grid,
.home-page .home-choice-grid,
.home-page .home-steps,
.home-page .home-resource-grid {
    display: grid;
    gap: var(--spacing-lg);
}

.home-page .home-impact-grid,
.home-page .home-resource-grid {
    grid-template-columns: repeat(3, 1fr);
}

.home-page .home-impact-card {
    min-height: 270px;
    padding: var(--spacing-xl);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
}

.home-page .home-card-number {
    display: block;
    margin-bottom: var(--spacing-2xl);
    color: var(--color-gold-dark);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.home-page .home-impact-card h3 {
    margin-bottom: var(--spacing-sm);
    font-size: 1.25rem;
}

.home-page .home-impact-card p {
    margin: 0;
    font-size: 0.95rem;
}

.home-page .home-property-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}

.home-page .home-property-figure {
    margin: 0;
}

.home-page .home-property-figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.home-page .home-property-figure figcaption {
    padding-top: var(--spacing-sm);
    /* gray-500 measures ~2.3:1 on the section backgrounds; gray-700 is ~5.1:1. */
    color: var(--color-gray-700);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.home-page .home-property-copy .section-title {
    margin-bottom: var(--spacing-lg);
    letter-spacing: -0.035em;
}

.home-page .home-property-copy > p {
    font-size: 1.02rem;
}

.home-page .home-insight {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--color-white);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-gray-700);
    font-size: 0.92rem;
}

.home-page .home-choice-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 980px;
    margin: 0 auto;
}

.home-page .home-choice-card {
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-top: 4px solid var(--color-gray-500);
    border-radius: var(--radius-lg);
}

.home-page .home-choice-card-featured {
    border-top-color: var(--color-primary);
}

.home-page .home-choice-label,
.home-page .home-direction-kicker {
    display: block;
    margin-bottom: var(--spacing-lg);
    color: var(--color-gold-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-page .home-choice-card h3 {
    margin-bottom: var(--spacing-sm);
}

.home-page .home-choice-card p {
    margin: 0;
}

.home-page .home-direction {
    max-width: 840px;
    margin: var(--spacing-2xl) auto 0;
    padding: clamp(2rem, 5vw, 3.5rem);
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    border-radius: var(--radius-lg);
    color: rgba(255, 255, 255, 0.84);
    text-align: center;
}

.home-page .home-direction .home-direction-kicker {
    color: var(--color-accent-on-dark);
}

.home-page .home-direction h3 {
    max-width: 620px;
    margin: 0 auto var(--spacing-md);
    color: var(--color-white);
}

.home-page .home-direction p {
    max-width: 680px;
    margin: 0 auto;
}

.home-page .home-steps {
    grid-template-columns: repeat(4, 1fr);
}

.home-page .home-step {
    padding: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--radius-lg);
}

.home-page .home-step > span {
    display: inline-flex;
    width: 36px;
    height: 36px;
    margin-bottom: var(--spacing-2xl);
    align-items: center;
    justify-content: center;
    background: var(--color-accent-on-dark);
    border-radius: 50%;
    color: var(--color-primary-dark);
    font-size: 0.85rem;
    font-weight: 700;
}

.home-page .home-step h3 {
    margin-bottom: var(--spacing-sm);
    font-size: 1.15rem;
}

.home-page .home-step p {
    margin: 0;
    font-size: 0.9rem;
}

.home-page .home-resource-grid {
    grid-template-columns: repeat(3, 1fr);
}

.home-page .home-resource-card {
    min-height: 290px;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-page .home-resource-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-lg);
}

.home-page .home-resource-card > span {
    margin-bottom: var(--spacing-2xl);
    color: var(--color-gold-dark);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.home-page .home-resource-card h3 {
    margin-bottom: var(--spacing-sm);
    font-size: 1.2rem;
}

.home-page .home-resource-card p {
    margin-bottom: var(--spacing-lg);
    font-size: 0.92rem;
}

.home-page .home-resource-card strong {
    margin-top: auto;
    color: var(--color-primary);
    font-size: 0.85rem;
}

.home-page .home-closing {
    max-width: 820px;
    margin: clamp(4rem, 9vw, 7rem) auto 0;
    padding-top: clamp(3rem, 7vw, 5rem);
    border-top: 1px solid var(--color-gray-300);
    text-align: center;
}

.home-page .home-closing h2 {
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.035em;
}

.home-page .home-closing > p:not(.home-eyebrow) {
    max-width: 620px;
    margin: 0 auto var(--spacing-xl);
}

.home-page a:focus-visible,
.home-page button:focus-visible {
    outline: 3px solid var(--color-accent-on-dark);
    outline-offset: 3px;
}

@media (max-width: 1024px) {
    .home-page .home-facts,
    .home-page .home-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-page .home-fact:nth-child(3) {
        border-top: 1px solid hsla(0, 0%, 100%, 0.12);
    }

    .home-page .home-fact:nth-child(4) {
        border-top: 1px solid hsla(0, 0%, 100%, 0.12);
        border-right: 1px solid hsla(0, 0%, 100%, 0.12);
    }

    .home-page .home-impact-card,
    .home-page .home-resource-card {
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    .home-page .home-hero {
        min-height: 720px;
    }

    .home-page .home-hero .hero-title-main {
        font-size: clamp(2.4rem, 12vw, 4rem);
    }

    .home-page .home-impact-grid,
    .home-page .home-property-layout,
    .home-page .home-choice-grid,
    .home-page .home-resource-grid {
        grid-template-columns: 1fr;
    }

    .home-page .home-impact-card,
    .home-page .home-resource-card {
        min-height: 0;
    }

    .home-page .home-card-number,
    .home-page .home-resource-card > span,
    .home-page .home-step > span {
        margin-bottom: var(--spacing-lg);
    }

    .home-page .home-property-layout {
        gap: var(--spacing-2xl);
    }
}

@media (max-width: 480px) {
    .home-page .home-facts,
    .home-page .home-steps {
        grid-template-columns: 1fr;
    }

    .home-page .home-fact {
        min-height: 112px;
        padding: var(--spacing-lg);
        border-right: 1px solid hsla(0, 0%, 100%, 0.12);
        border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
    }

    .home-page .home-fact:last-child {
        border-bottom: 0;
    }

    .home-page .home-section {
        padding: 4rem 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    .home-page *,
    .home-page *::before,
    .home-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    /* The 7-step strategy scroller sets its own scroll-behavior (it's not a
       descendant of html's scrolling box), so it needs its own override. */
    .strategy-steps {
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Site photography — scroll-driven
   ============================================================
   Native CSS scroll-driven animations (view-timeline). No library, no JS, no
   scroll listeners. Where the browser lacks support the images simply render
   static and fully visible — the fallback is the plain layout, and every
   enhancement is additive inside @supports. Motion is switched off entirely
   for prefers-reduced-motion.

   The horizontal pan on the panoramas is not decoration: those sources are
   2000px wide and 480–560px tall. Panning them on scroll is the only way a
   phone shows the whole frame without shrinking it to a stripe. */

.sitephotos {
    background: var(--color-dark);
    color: #fff;
    overflow: hidden;
}

/* ── the pinned aerial ─────────────────────────────────────── */
.sv-stage {
    position: relative;
    height: 190vh;                 /* scroll distance the pinned frame consumes */
}

.sv-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.sv-media {
    position: absolute;
    inset: 0;
}

.sv-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: 58% 42%;     /* hold the scrap yard, not the treeline */
}

/* Scrim so the overlaid type keeps its contrast over any part of the photo. */
.sv-pin::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        hsla(210, 25%, 8%, 0.92) 0%,
        hsla(210, 25%, 8%, 0.72) 28%,
        hsla(210, 25%, 8%, 0.15) 60%,
        hsla(210, 25%, 8%, 0.35) 100%);
    pointer-events: none;
}

.sv-copy {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl) clamp(3rem, 9vh, 6rem);
    width: 100%;
}

.sv-copy .section-label {
    color: var(--color-accent-on-dark);
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}

.sv-copy h2 {
    color: #fff;
    font-size: clamp(1.9rem, 5.2vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-md);
    max-width: 18ch;
}

.sv-copy p {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    max-width: 60ch;
    margin-bottom: 0;
}

/* ── first-impression frame ────────────────────────────────── */
.sv-impression {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(3rem, 9vh, 6rem) var(--spacing-xl);
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.sv-frame {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.sv-frame img {
    width: 100%;
    display: block;
}

.sv-impression h3 {
    color: #fff;
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    line-height: 1.18;
    margin-bottom: var(--spacing-md);
}

.sv-impression p {
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: var(--spacing-md);
}

.sv-impression p:last-child { margin-bottom: 0; }

/* ── panorama strips ───────────────────────────────────────── */
.sv-pano {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    max-width: 1400px;
}

.sv-pano + .sv-pano { margin-top: var(--spacing-lg); }

.sv-pano img {
    width: 100%;
    display: block;
}

.sv-caption {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-xl) 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.78);
}

.sv-panos {
    padding: 0 var(--spacing-xl) clamp(3rem, 9vh, 6rem);
}

.sv-credit {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-xl) 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

@media (max-width: 860px) {
    .sv-impression { grid-template-columns: 1fr; }
    .sv-stage { height: 150vh; }
}

/* ── the motion ────────────────────────────────────────────
   Driven by a scroll progress custom property (--p, 0 to 1) set by
   sitephotos.js. CSS scroll-driven animations (animation-timeline) would avoid
   the script, but they are not yet available everywhere and could not be
   verified in this project's test browser, so the effect is expressed here in
   terms a plain transform can honour. If the script never runs, --p holds its
   0.5 default and every image renders at a sensible mid-position rather than
   at one extreme. */

.sv-media img {
    transform: scale(calc(1.04 + 0.18 * var(--p, 0.5)));
}

.sv-frame img {
    transform: scale(calc(1.06 - 0.06 * var(--p, 1)));
}

.sv-pano img {
    width: 140%;
    max-width: none;
    transform: translateX(calc(-28.57% * var(--p, 0.5)));
}

.sv-pano--reverse img {
    transform: translateX(calc(-28.57% * (1 - var(--p, 0.5))));
}

@media (prefers-reduced-motion: reduce) {
    .sv-stage { height: auto; }
    .sv-pin { position: static; height: auto; min-height: 0; }
    .sv-media { position: static; }
    .sv-media img { height: auto; }
    .sv-pin::after { display: none; }
    .sv-copy {
        padding-top: clamp(2rem, 6vh, 3rem);
        padding-bottom: clamp(2rem, 6vh, 3rem);
    }
    .sv-media img,
    .sv-frame img,
    .sv-pano img {
        animation: none !important;
        width: 100%;
        transform: none !important;
    }
}

@media print {
    .sitephotos { background: #fff !important; color: #000 !important; }
    .sv-stage { height: auto; }
    .sv-pin { position: static; height: auto; }
    .sv-media { position: static; }
    .sv-media img { height: auto; }
    .sv-pin::after { display: none; }
    .sv-copy h2, .sv-copy p, .sv-impression h3, .sv-impression p,
    .sv-caption, .sv-credit { color: #000 !important; }
    .sv-pano img, .sv-media img, .sv-frame img {
        animation: none !important; width: 100%; transform: none !important;
    }
}

/* ============================================================
   Homepage section forms
   ============================================================
   Four consecutive sections previously shared one 3-up card grid with 01/02/03
   markers. Only one of the four is actually a sequence, so the numbering was
   decorative on three of them and the repetition flattened four different kinds
   of argument into one shape. Each now takes the form its content has:

     why it matters  → a quiet ruled list (parallel consequences, no order)
     why now         → a dated timeline (the order is the point, and it is years)
     the obstacle    → an inequality and a deed ledger (a proof, then evidence)
     paying for it   → a proportional bar (the argument IS the proportion)

   Colours are mixed from the existing tokens rather than introduced. */

/* Visually hidden, still announced. The inequality above is drawn with a
   symbol; this carries the same statement to a screen reader. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── shared: figures ───────────────────────────────────────── */
.fig-num {
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.02em;
}

.home-page .home-section h2,
.home-page .home-section h3 { text-wrap: balance; }

/* ── 1. consequences: a ruled list ─────────────────────────── */
.consequences {
    max-width: 940px;
    margin: var(--spacing-2xl) auto 0;
    border-top: 1px solid var(--color-gray-300);
}

.consequence {
    display: grid;
    grid-template-columns: minmax(9rem, 15rem) 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--color-gray-300);
    align-items: baseline;
}

.consequence dt {
    font-weight: 700;
    color: var(--color-primary-dark);
    font-size: 1.05rem;
    margin: 0;
}

.consequence dd {
    margin: 0;
    color: var(--color-gray-700);
}

@media (max-width: 700px) {
    .consequence { grid-template-columns: 1fr; gap: var(--spacing-xs); }
}

/* ── 2. timeline ───────────────────────────────────────────── */
.timeline {
    margin: var(--spacing-2xl) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    container-type: inline-size;
}

.tl-step {
    position: relative;
    padding: var(--spacing-2xl) var(--spacing-md) 0 0;
    border-top: 2px solid var(--color-primary);
}

.tl-step::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* The open question is drawn as a break in the line, not another step. */
.tl-step--gap {
    border-top-style: dashed;
    border-top-color: var(--color-warning);
}

.tl-step--gap::before {
    background: var(--color-white);
    border: 2px solid var(--color-warning);
    top: -8px;
}

.tl-year {
    display: block;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.tl-step--gap .tl-year { color: hsl(35, 60%, 32%); }

.tl-step p {
    font-size: 0.94rem;
    color: var(--color-gray-700);
    margin: 0;
}

@container (max-width: 780px) {
    .timeline { grid-template-columns: 1fr; }
    .tl-step {
        border-top: 0;
        border-left: 2px solid var(--color-primary);
        padding: 0 0 var(--spacing-lg) var(--spacing-lg);
    }
    .tl-step::before { top: 4px; left: -7px; }
    .tl-step--gap { border-left-style: dashed; border-left-color: var(--color-warning); }
    .tl-step--gap::before { left: -8px; }
}

/* ── 3. the arithmetic ─────────────────────────────────────── */
.proof {
    max-width: 880px;
    margin: var(--spacing-2xl) auto 0;
}

.inequality {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 3vw, 2rem);
    flex-wrap: wrap;
    padding: var(--spacing-xl) var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    text-align: center;
}

.ineq-term { max-width: 15rem; }

.ineq-term strong {
    display: block;
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: var(--color-primary-dark);
    line-height: 1.2;
}

.ineq-term span {
    display: block;
    font-size: 0.82rem;
    color: var(--color-gray-700);
    margin-top: var(--spacing-xs);
}

.ineq-op {
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 300;
    color: var(--color-error);
    line-height: 1;
}

.consequence-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

/* The two boxes above are the two halves of the lending squeeze. This one is
   the closing move — it rules out the escape route people reach for next
   ("just pay cash") — so it spans the pair rather than sitting beside them as
   a third equal item. */
.consequence-pair .consequence-span {
    grid-column: 1 / -1;
    background: color-mix(in srgb, var(--color-error) 10%, var(--color-white));
    border-left: 3px solid var(--color-error);
}

.consequence-pair div {
    padding: var(--spacing-lg);
    background: color-mix(in srgb, var(--color-error) 6%, var(--color-white));
    border-radius: var(--radius-md);
}

.consequence-pair b {
    display: block;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-xs);
}

.consequence-pair p { margin: 0; font-size: 0.94rem; color: var(--color-gray-700); }

@media (max-width: 700px) { .consequence-pair { grid-template-columns: 1fr; } }

/* the deed record, set as a ledger */
.ledger {
    margin-top: var(--spacing-xl);
    width: 100%;
    border-collapse: collapse;
    font-size: 0.98rem;
}

.ledger caption {
    text-align: left;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-700);
    padding-bottom: var(--spacing-sm);
}

.ledger th, .ledger td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-gray-300);
    text-align: left;
}

.ledger th { font-weight: 700; color: var(--color-primary-dark); width: 6rem; }
.ledger .amt { text-align: right; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.ledger tr:last-child th, .ledger tr:last-child td {
    border-bottom: 0;
    border-top: 2px solid var(--color-primary);
    color: var(--color-error);
    font-weight: 700;
}

/* ── 4. the proportional bar ───────────────────────────────── */
.stack {
    max-width: 960px;
    margin: var(--spacing-2xl) auto 0;
}

.stack-bar {
    display: flex;
    height: clamp(3.5rem, 7vw, 5rem);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-primary-dark);
}

.stack-seg {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    color: #fff;
    font-weight: 700;
    font-size: clamp(0.85rem, 1.6vw, 1.05rem);
    white-space: nowrap;
    overflow: hidden;
    /* No fill animation here. A proportional bar caught part-way through a
       scroll is showing a proportion that is not true, and it reads as a
       rendering fault rather than an effect. The bar states 80/20 at all
       times. */
    flex-basis: var(--seg);
    justify-content: center;
}

.stack-seg .pct {
    font-size: clamp(1.1rem, 2.6vw, 1.6rem);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.02em;
}

.stack-seg--grant { background: var(--color-primary); }
.stack-seg--town  { background: var(--color-primary-dark); }

.stack-key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md) var(--spacing-xl);
    margin-top: var(--spacing-md);
}

.stack-key div { display: flex; align-items: baseline; gap: var(--spacing-sm); }

.stack-key i {
    width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto;
    transform: translateY(1px);
}

.stack-key b {
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-primary-dark);
}

.stack-key span { color: var(--color-gray-700); font-size: 0.92rem; }

.stack-lede {
    margin-top: var(--spacing-lg);
    font-size: 1.05rem;
    color: var(--color-gray-700);
    max-width: 62ch;
}

.stack-sources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-300);
}

.stack-sources h3 { font-size: 1.02rem; color: var(--color-primary-dark); margin-bottom: var(--spacing-xs); }
.stack-sources p { font-size: 0.94rem; color: var(--color-gray-700); margin: 0; }



/* ============================================================
   Sequencing, leverage, and the concept illustration
   ============================================================
   The funding argument is a deadlock: private capital will not move before the
   town does, and the town has been waiting for private capital to appear. The
   chain below is genuinely ordered — unlike the three "sources", which are not —
   so it is the one place on this page where numbering earns its keep.

   The leverage panel is deliberately drawn UNLIKE the audited figures elsewhere:
   dashed rule, explicit status chip. An estimate of intent must not be able to
   pass for a bank balance. */

.chain {
    counter-reset: chain;
    list-style: none;
    padding: 0;
    margin: var(--spacing-2xl) 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

.chain li {
    position: relative;
    counter-increment: chain;
    padding-top: var(--spacing-lg);
    border-top: 2px solid var(--color-primary);
}

.chain li::before {
    content: counter(chain);
    position: absolute;
    top: -0.95rem;
    left: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The connector reads "and only then" — the order is a precondition, not a date. */
.chain li + li::after {
    content: "";
    position: absolute;
    top: -2px;
    left: calc(-1 * var(--spacing-xl));
    width: var(--spacing-xl);
    border-top: 2px dotted var(--color-gray-300);
}

.chain h3 {
    font-size: 1.08rem;
    color: var(--color-primary-dark);
    margin: var(--spacing-md) 0 var(--spacing-xs);
}

.chain p { font-size: 0.95rem; color: var(--color-gray-700); margin: 0; }

@media (max-width: 780px) {
    .chain { grid-template-columns: 1fr; gap: var(--spacing-lg); }
    .chain li + li::after { display: none; }
}

/* ── the unlock: an estimate, drawn as one ─────────────────── */
.unlock {
    margin: var(--spacing-2xl) 0 0;
    padding: var(--spacing-xl);
    border: 2px dashed var(--color-gray-300);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.unlock-chip {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: hsl(35, 60%, 28%);
    background: hsl(35, 70%, 92%);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    margin-bottom: var(--spacing-md);
}

.unlock-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--spacing-md) var(--spacing-xl);
}

.unlock-fig b {
    display: block;
    font-size: clamp(1.8rem, 4.4vw, 2.9rem);
    line-height: 1.05;
    color: var(--color-primary-dark);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.02em;
}

.unlock-fig span { display: block; font-size: 0.9rem; color: var(--color-gray-700); max-width: 24ch; }

.unlock-arrow {
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--color-gray-700);
    align-self: center;
}

.unlock-note {
    margin: var(--spacing-lg) 0 0;
    font-size: 0.92rem;
    color: var(--color-gray-700);
    max-width: 72ch;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-gray-200);
}

.unlock-note b { color: var(--color-primary-dark); }

/* ── concept illustration ──────────────────────────────────── */
.concept { margin: 0; }

.concept-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.concept-frame img { width: 100%; display: block; }

.concept-tag {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    z-index: 2;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: hsl(210, 25%, 12%);
    background: hsla(0, 0%, 100%, 0.94);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
}

.concept figcaption {
    margin-top: var(--spacing-md);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 76ch;
}

.concept figcaption b { color: #fff; }

/* ============================================================
   Statement bands
   ============================================================
   A single sentence, full width, nothing else. Used twice as punctuation
   between argument sections so the page has a beat that is neither a heading
   nor a card. Both lines are ARGUMENT, not evidence, and are deliberately set
   apart from the sourced figures around them rather than mixed in with them. */

.statement {
    background: var(--color-dark);
    color: #fff;
    padding: clamp(4rem, 11vh, 7rem) var(--spacing-xl);
    text-align: center;
}

.statement p {
    max-width: 22ch;
    margin: 0 auto;
    font-size: clamp(1.9rem, 5.2vw, 3.4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.statement--paper {
    background: var(--color-gray-50);
    color: var(--color-primary-dark);
    border-top: 1px solid var(--color-gray-300);
    border-bottom: 1px solid var(--color-gray-300);
}

.statement small {
    display: block;
    margin-top: var(--spacing-lg);
    font-size: 0.86rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
}

.statement--paper small { color: var(--color-gray-700); }


/* ============================================================
   Video hero
   ============================================================
   The flyover is the hero background, scrubbed by scroll: the camera pulls back
   off the site as the reader moves through the first screen. The clip is an
   ILLUSTRATION of buildings that do not exist, and it is now the first thing
   anyone sees, so the label sits on it rather than under it and never scrolls
   away from the frame it describes.

   The hero flips to a dark treatment here -- the base sheet styles it for a
   light gradient, and every text colour on it would fail against footage. */

.home-page .home-hero--video {
    background: var(--color-dark);
}

.home-page .home-hero--video .hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.home-page .home-hero--video .hero-media video,
.home-page .home-hero--video .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-page .home-hero--video .hero-media img { display: none; }

/* Scrim: strong enough at the foot, where the copy sits, to hold white text
   over any frame of the clip. Measured, not eyeballed. */
.home-page .home-hero--video .hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Top stop is heavier than it looks like it needs to be: measured against
       the actual video pixels, the eyebrow sat at 2.71:1 over the bright sky
       frames at 0.72. A scrim tuned by eye passes on the frame you happened to
       be looking at. */
    background: linear-gradient(180deg,
        hsla(210, 25%, 8%, 0.84) 0%,
        hsla(210, 25%, 8%, 0.60) 38%,
        hsla(210, 25%, 8%, 0.78) 100%);
}

.home-page .home-hero--video .hero-background { display: none; }

.home-page .home-hero--video .hero-content { position: relative; z-index: 2; }

.home-page .home-hero--video .home-eyebrow { color: #fff; }
.home-page .home-hero--video .hero-title-main { color: #fff; }
.home-page .home-hero--video .hero-description { color: rgba(255, 255, 255, 0.94); }

.home-page .home-hero--video .btn-primary {
    background: #fff;
    color: var(--color-primary-dark);
}

.home-page .home-hero--video .btn-primary:hover {
    background: hsl(210, 30%, 94%);
    box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.35);
}

.home-page .home-hero--video .btn-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.75);
}

.home-page .home-hero--video .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
}

/* Bottom-right, the conventional corner for an image credit, and the one
   place in the hero no copy reaches. Top-left put it on the eyebrow line,
   where it covered the first character of "Proposed downtown waterfront
   strategy". */
.hero-illus {
    position: absolute;
    right: var(--spacing-xl);
    bottom: var(--spacing-xl);
    z-index: 3;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: hsl(210, 25%, 12%);
    background: hsla(0, 0%, 100%, 0.94);
    border-radius: 999px;
    padding: 0.32rem 0.8rem;
}

/* No video on a coarse pointer or under reduced motion: the poster frame
   stands in, so nobody downloads 2 MB to animate a background. */
@media (pointer: coarse) {
    .home-page .home-hero--video .hero-media video { display: none; }
    .home-page .home-hero--video .hero-media img { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .home-hero--video .hero-media video { display: none; }
    .home-page .home-hero--video .hero-media img { display: block; }
}

@media print {
    .home-page .home-hero--video { background: #fff; }
    .home-page .home-hero--video .hero-media { display: none; }
    .home-page .home-hero--video .hero-title-main,
    .home-page .home-hero--video .hero-description,
    .home-page .home-hero--video .home-eyebrow { color: #000 !important; }
    .hero-illus { position: static; display: inline-block; margin-bottom: 1rem; }
    .statement { background: #fff !important; color: #000 !important; }
    .statement small { color: #333 !important; }
}

/* ============================================================
   Homepage editorial chapters
   ============================================================
   Layout-only pacing for the long-form homepage. These chapter treatments
   deliberately preserve the page's copy, CMS hooks and scroll-driven media. */

.home-page .home-chapter--manifesto > .container {
    display: grid;
    grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
}

.home-page .home-chapter--manifesto .home-heading {
    position: sticky;
    top: 7.5rem;
    margin: 0;
    text-align: left;
}

.home-page .home-chapter--manifesto .consequences {
    margin: 0;
}

.home-page .home-chapter--manifesto .consequence {
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.home-page .home-chapter--manifesto .consequence:first-child {
    padding-top: 0;
}

.home-page .home-chapter--opportunity {
    padding-block: clamp(6rem, 12vw, 11rem);
}

.home-page .home-chapter--opportunity .home-property-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
    align-items: end;
}

.home-page .home-chapter--opportunity .home-property-figure {
    margin-left: min(-7vw, -3rem);
}

.home-page .home-chapter--opportunity .home-property-figure img {
    aspect-ratio: 16 / 11;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.home-page .home-chapter--timeline > .container,
.home-page .home-chapter--proof > .container {
    display: grid;
    grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
}

.home-page .home-chapter--timeline .home-stage-marker,
.home-page .home-chapter--proof .home-stage-marker {
    grid-column: 1 / -1;
}

.home-page .home-chapter--timeline .home-heading,
.home-page .home-chapter--proof .home-heading {
    grid-column: 1;
    position: sticky;
    top: 7.5rem;
    margin: 0;
    text-align: left;
}

.home-page .home-chapter--timeline .timeline {
    grid-column: 2;
    margin-top: 0;
}

.home-page .home-chapter--proof .proof {
    grid-column: 2;
    margin-top: 0;
}

.home-page .home-chapter--proof .home-insight {
    grid-column: 2;
    margin-top: var(--spacing-xl) !important;
}

.home-page .home-chapter--funding .home-heading {
    max-width: 980px;
    margin-left: 0;
    text-align: left;
}

.home-page .home-chapter--funding .home-heading .section-title {
    max-width: 15ch;
    font-size: clamp(2.5rem, 5.5vw, 5rem);
    line-height: 0.98;
}

.home-page .home-chapter--funding .chain {
    width: min(88%, 980px);
    margin-left: auto;
}

.home-page .home-chapter--funding .unlock {
    margin-block: clamp(5rem, 10vw, 9rem);
}

.home-page .home-chapter--funding .stack {
    width: min(92%, 1040px);
    margin-left: 0;
}

.home-page .home-chapter--funding .stack-sources {
    width: min(88%, 980px);
    margin-left: auto;
}

.home-page .home-chapter--decision .home-heading {
    margin-left: 0;
    text-align: left;
}

.home-page .home-chapter--decision .home-choice-grid {
    max-width: none;
    grid-template-columns: 0.82fr 1.18fr;
    align-items: start;
}

.home-page .home-chapter--decision .home-choice-card-featured {
    margin-top: clamp(3rem, 7vw, 6rem);
    padding: clamp(2.5rem, 5vw, 4.5rem);
}

.home-page .home-chapter--decision .home-direction {
    margin-right: 0;
}

.home-page .home-chapter--action > .container {
    display: grid;
    grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.home-page .home-chapter--action .home-heading {
    margin: 0;
    text-align: left;
}

.home-page .home-chapter--resources .home-heading {
    margin-left: 0;
    text-align: left;
}

.home-page .home-chapter--resources .home-resource-grid {
    grid-template-columns: repeat(6, 1fr);
    align-items: start;
}

.home-page .home-chapter--resources .home-resource-card {
    grid-column: span 2;
}

.home-page .home-chapter--resources .home-resource-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.home-page .home-chapter--resources .home-resource-card:nth-child(5) {
    grid-column: 4 / span 2;
}

@media (max-width: 1100px) {
    .home-page .home-chapter--timeline > .container,
    .home-page .home-chapter--proof > .container {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-2xl);
    }

    .home-page .home-chapter--timeline .home-stage-marker,
    .home-page .home-chapter--proof .home-stage-marker,
    .home-page .home-chapter--timeline .home-heading,
    .home-page .home-chapter--proof .home-heading,
    .home-page .home-chapter--timeline .timeline,
    .home-page .home-chapter--proof .proof,
    .home-page .home-chapter--proof .home-insight {
        grid-column: 1;
    }

    .home-page .home-chapter--timeline .home-heading,
    .home-page .home-chapter--proof .home-heading {
        position: static;
    }
}

@media (max-width: 900px) {
    .home-page .home-chapter--manifesto > .container,
    .home-page .home-chapter--timeline > .container,
    .home-page .home-chapter--proof > .container,
    .home-page .home-chapter--action > .container {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .home-page .home-chapter--manifesto .home-heading,
    .home-page .home-chapter--timeline .home-heading,
    .home-page .home-chapter--proof .home-heading {
        position: static;
    }

    .home-page .home-chapter--proof .home-insight {
        grid-column: auto;
    }

    .home-page .home-chapter--timeline .timeline {
        grid-template-columns: 1fr;
    }

    .home-page .home-chapter--timeline .tl-step {
        border-top: 0;
        border-left: 2px solid var(--color-primary);
        padding: 0 0 var(--spacing-lg) var(--spacing-lg);
    }

    .home-page .home-chapter--timeline .tl-step::before {
        top: 4px;
        left: -7px;
    }

    .home-page .home-chapter--timeline .tl-step--gap {
        border-left-style: dashed;
        border-left-color: var(--color-warning);
    }

    .home-page .home-chapter--opportunity .home-property-figure {
        margin-left: 0;
    }

    .home-page .home-chapter--opportunity .home-property-figure img {
        border-radius: var(--radius-lg);
    }

    .home-page .home-chapter--funding .chain,
    .home-page .home-chapter--funding .stack,
    .home-page .home-chapter--funding .stack-sources {
        width: 100%;
    }

    .home-page .home-chapter--resources .home-resource-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-page .home-chapter--resources .home-resource-card,
    .home-page .home-chapter--resources .home-resource-card:nth-child(4),
    .home-page .home-chapter--resources .home-resource-card:nth-child(5) {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .home-page .home-chapter--decision .home-choice-grid,
    .home-page .home-chapter--resources .home-resource-grid {
        grid-template-columns: 1fr;
    }

    .home-page .home-chapter--decision .home-choice-card-featured {
        margin-top: 0;
    }
}

/* Final viewport-fit tuning for the pinned editorial stages. */
.home-page .story-slide--proof .story-slide-pin {
    padding-top: 4.5rem;
    padding-bottom: 1.5rem;
}

.home-page .story-slide--proof .home-heading {
    margin-bottom: 1.5rem;
}

.home-page .story-slide--decision .story-slide-pin {
    padding-top: 4.5rem;
    padding-bottom: 1.5rem;
}

.home-page .story-slide--decision .home-heading {
    margin-bottom: 1rem;
}

.home-page .story-slide--decision .home-choice-card {
    padding: 1.5rem;
}

.home-page .story-slide--decision .home-choice-card-featured {
    margin-top: 0;
}

.home-page .story-slide--decision .home-direction {
    margin-top: 1rem;
    padding: 1.5rem;
}

.home-page .story-slide--resources .story-slide-pin {
    padding-top: 4rem;
    padding-bottom: 0.5rem;
}

.home-page .story-slide--resources .home-heading {
    margin-bottom: 1rem;
}

.home-page .story-slide--resources .home-resource-grid {
    gap: 0.75rem;
}

.home-page .story-slide--resources .home-resource-card {
    padding: 0.9rem;
    font-size: 0.88rem;
}

.home-page .story-slide--resources .home-resource-card > span,
.home-page .story-slide--resources .home-resource-card p {
    margin-bottom: 0.45rem;
}

.home-page .story-slide--resources .home-closing {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.home-page .story-slide--resources .home-closing .home-eyebrow,
.home-page .story-slide--resources .home-closing h2,
.home-page .story-slide--resources .home-closing > p:not(.home-eyebrow) {
    margin-bottom: 0.5rem;
}

/* Full-bleed treatment for the final two Higgsfield photo slides. */
.sitephotos .sv-slide--buildings .sv-slide-pin {
    display: block;
    padding: 0;
}

.sitephotos .sv-slide--buildings .sv-buildings-pair {
    position: absolute;
    inset: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.sitephotos .sv-slide--buildings .sv-slide-pin::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, hsla(210, 25%, 8%, 0.94), transparent);
}

.sitephotos .sv-slide--buildings .sv-caption {
    position: absolute;
    right: 0;
    bottom: clamp(2rem, 7vh, 5rem);
    left: 0;
    z-index: 2;
    width: min(100%, 1200px);
    padding: 0 var(--spacing-xl);
    color: #fff;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    line-height: 1.6;
}

.sitephotos .sv-slide--concept .sv-slide-pin {
    display: block;
    padding: 0;
}

.sitephotos .sv-slide--concept .concept {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    display: block;
}

.sitephotos .sv-slide--concept .concept-frame {
    position: absolute;
    inset: 0;
    height: 100%;
    align-self: stretch;
    transform: none;
}

.sitephotos .sv-slide--concept .concept-frame::after {
    background: linear-gradient(90deg,
        hsla(210, 25%, 8%, 0.08) 0%,
        hsla(210, 25%, 8%, 0.22) 46%,
        hsla(210, 25%, 8%, 0.94) 100%);
}

.sitephotos .sv-slide--concept .concept-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(calc(1.1 - 0.07 * var(--p, 0.5)));
}

.sitephotos .sv-slide--concept .concept figcaption {
    position: absolute;
    top: 50%;
    right: clamp(2rem, 8vw, 8rem);
    z-index: 2;
    width: min(34rem, 38vw);
    color: rgba(255, 255, 255, 0.92);
    transform: translateY(-50%) translateX(calc(65px * (1 - var(--p, 0.5))));
}

.sitephotos .sv-slide--concept .sv-credit {
    position: absolute;
    right: clamp(2rem, 8vw, 8rem);
    bottom: clamp(1.25rem, 3vh, 2rem);
    z-index: 2;
    width: min(34rem, 38vw);
    padding: var(--spacing-sm) 0 0;
}

.sitephotos .sv-slide--concept .concept-tag {
    top: clamp(5rem, 10vh, 7rem);
    left: clamp(2rem, 6vw, 6rem);
}

@media (max-width: 860px) {
    .sitephotos .sv-slide--concept .concept-frame::after {
        background: linear-gradient(to top,
            hsla(210, 25%, 8%, 0.96) 0%,
            hsla(210, 25%, 8%, 0.58) 48%,
            hsla(210, 25%, 8%, 0.08) 100%);
    }

    .sitephotos .sv-slide--concept .concept figcaption {
        top: auto;
        right: var(--spacing-xl);
        bottom: 6.5rem;
        left: var(--spacing-xl);
        width: auto;
        transform: translateY(calc(45px * (1 - var(--p, 0.5))));
    }

    .sitephotos .sv-slide--concept .sv-credit {
        right: var(--spacing-xl);
        bottom: 1.25rem;
        left: var(--spacing-xl);
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sitephotos .sv-slide--buildings .sv-buildings-pair,
    .sitephotos .sv-slide--concept .concept,
    .sitephotos .sv-slide--concept .concept-frame {
        position: relative;
        inset: auto;
    }

    .sitephotos .sv-slide--buildings .sv-slide-pin::after,
    .sitephotos .sv-slide--concept .concept-frame::after {
        display: none;
    }

    .sitephotos .sv-slide--buildings .sv-caption,
    .sitephotos .sv-slide--concept .concept figcaption,
    .sitephotos .sv-slide--concept .sv-credit {
        position: static;
        width: min(100%, 1200px);
        margin: 0 auto;
        padding: var(--spacing-lg) var(--spacing-xl);
        transform: none;
    }

    .sitephotos .sv-slide--concept .concept-frame img {
        height: auto;
    }
}

/* ── The three human motivations ──────────────────────────────
   Built on .consequences/.consequence, the ruled definition list the manifesto
   chapter already uses, rather than a card grid: these are definitions, and the
   argument is that they are a closed set of three, one of which is struck out.
   A row of equal cards would say the opposite — that they are alternatives of
   equal standing, when the whole point is that the first is unavailable. */
.motivations .mot-verdict {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0.35rem 0 0;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
    vertical-align: 0.12em;
    white-space: normal;
}

.motivations .mot-verdict--out {
    color: hsl(0, 62%, 32%);
    background: color-mix(in srgb, var(--color-error) 14%, var(--color-white));
}

.motivations .mot-verdict--live {
    color: var(--color-primary-dark);
    background: hsl(210, 45%, 92%);
}

/* Struck out, not greyed out: the row has to stay fully legible — it carries
   the reason the other two matter — so the signal is a rule through the term
   and a bar in the margin, never a drop in text contrast. */
.motivations .consequence--ruled-out {
    position: relative;
    padding-left: var(--spacing-md);
}

.motivations .consequence--ruled-out::before {
    content: "";
    position: absolute;
    top: var(--spacing-lg);
    bottom: var(--spacing-lg);
    left: 0;
    width: 3px;
    background: var(--color-error);
}

@media (max-width: 768px) {
    .home-page .container.story-slide-pin {
        padding-inline: var(--spacing-lg);
    }
}

/* ============================================================
   Mobile — a static document, no scroll-driven motion
   ============================================================
   On a phone, a tablet, or any touch device the homepage is a plain
   scrolling document: no pinned sections, no snapping, no parallax, no
   scrubbed video. This restates the treatment the prefers-reduced-motion
   blocks above apply, because the reasons hold on touch as well:

   - The pinned sections are `position: sticky` panes inside 100vh+ parents,
     and several needed `overflow-y: auto` to fit their content on a small
     screen. That is a scroll container inside a scroll container: a drag
     that starts on the inner pane never reaches the page, so the reader
     gets stuck in a section with no way to tell why.
   - Scroll-linked transforms repaint on every frame of a momentum fling —
     exactly when a phone has the least headroom to spare.
   - Snapping fights momentum scrolling. iOS and Android already own the
     physics; overriding them reads as the page grabbing at the finger.

   The matching JS bail-outs are at the top of sitephotos.js and
   home-motion.js and use this exact query, so the two never disagree.

   This block is deliberately LAST in the file: every selector here has to
   beat the pinned-layout rules above it, and several of those are written
   at three-class specificity.
   ============================================================ */
@media (max-width: 900px), (pointer: coarse) {

    /* ── Story slides: normal document flow ──────────────────────── */
    .home-page .story-slide,
    .home-page .story-slide--estimate,
    .home-page .story-slide--resources {
        height: auto;
        min-height: 0;
    }

    .home-page .story-slide-pin,
    .home-page .story-slide--manifesto .story-slide-pin,
    .home-page .story-slide--timeline .story-slide-pin,
    .home-page .story-slide--proof .story-slide-pin,
    .home-page .story-slide--decision .story-slide-pin,
    .home-page .story-slide--action .story-slide-pin,
    .home-page .story-slide--resources .story-slide-pin,
    .home-page .story-slide--estimate .story-slide-pin {
        position: static;
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
        padding-top: clamp(3rem, 8vh, 4.5rem);
        padding-bottom: clamp(3rem, 8vh, 4.5rem);
    }

    /* The three "estimate" phases cross-fade in place on desktop, driven by
       a scroll-progress attribute. Static, they simply stack and all read. */
    .home-page .story-slide--estimate .estimate-phase {
        position: static;
        inset: auto;
        overflow: visible;
        justify-content: flex-start;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .home-page .story-slide--estimate .estimate-phase + .estimate-phase {
        margin-top: var(--spacing-2xl);
    }

    /* Sticky sidebar headings belong to the two-column desktop layout. */
    .home-page .home-chapter--manifesto .home-heading,
    .home-page .home-chapter--timeline .home-heading,
    .home-page .home-chapter--proof .home-heading {
        position: static;
    }

    /* ── Site photography: images in flow, captions beneath ──────── */
    .sitephotos .sv-slide,
    .sv-stage {
        height: auto;
        min-height: 0;
    }

    .sitephotos .sv-slide-pin,
    .sitephotos .sv-slide--aerial .sv-slide-pin,
    .sv-pin {
        position: static;
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    /* Scrims exist so overlaid type keeps contrast against the photo. The
       type is no longer overlaid, so they would only darken the image. */
    .sv-pin::after,
    .sitephotos .sv-slide--buildings .sv-slide-pin::after,
    .sitephotos .sv-slide--entrance .sv-frame::after,
    .sitephotos .sv-slide--concept .concept-frame::after {
        display: none;
    }

    .sv-media,
    .sitephotos .sv-slide--entrance .sv-frame,
    .sitephotos .sv-slide--buildings .sv-buildings-pair,
    .sitephotos .sv-slide--concept .concept,
    .sitephotos .sv-slide--concept .concept-frame {
        position: relative;
        inset: auto;
        height: auto;
        display: block;
    }

    .sv-media img,
    .sv-frame img,
    .sv-pano img,
    .sitephotos .sv-slide--entrance .sv-frame img,
    .sitephotos .sv-slide--concept .concept-frame img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: fill;
        transform: none;
        animation: none !important;
    }

    /* The two panoramas are 2000x~500. At full width on a phone that is a
       100px-tall stripe. The desktop treatment solves it by panning across
       the frame on scroll; standing still, the answer is to crop instead of
       shrink, so the buildings stay legible at a readable size. */
    .sitephotos .sv-slide--buildings .sv-buildings-pair {
        gap: var(--spacing-md);
    }

    .sitephotos .sv-slide--buildings .sv-pano {
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }

    .sitephotos .sv-slide--buildings .sv-pano img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: none;
    }

    .sitephotos .sv-slide--buildings .sv-pano + .sv-pano {
        margin-top: 0;
    }

    .sv-copy,
    .sitephotos .sv-slide-copy,
    .sitephotos .sv-slide--buildings .sv-caption,
    .sitephotos .sv-slide--concept .concept figcaption,
    .sitephotos .sv-slide--concept .sv-credit {
        position: static;
        inset: auto;
        width: auto;
        max-width: none;
        margin: 0;
        padding: var(--spacing-xl) var(--spacing-lg);
        opacity: 1;
        transform: none;
    }

    /* ── Hero: the poster frame, never the scrubbed video ────────── */
    .home-page .home-hero--video .hero-media video {
        display: none;
    }

    .home-page .home-hero--video .hero-media img {
        display: block;
    }
}

/* ── Sister-company display face ───────────────────────────────────────────
   Newsreader is portlandinvestmentadvisors.com's display serif (its
   --pp-display). Headings are what a reader recognises first, so this is the
   strongest single family signal. Body text is untouched — Portland's own body
   face differs from its display face too. Georgia is the fallback, so a blocked
   font request degrades to the serif these pages already used. */
h1, h2, h3,
.section-title, .hero-title, .su-title, .tf-title, .ci-h1, .pc-title {
  font-family: "Newsreader", "GT Sectra", Georgia, "Times New Roman", serif;
  letter-spacing: -0.005em;
}

/* ── Narrow-screen reflow (2026-08-10) ──────────────────────────────────────
   Reported on a Pixel with a custom DPI, which makes the CSS viewport narrower
   than a stock phone. Below ~375px these grids could not shrink any further and
   pushed the page wider than the screen; body{overflow-x:hidden} then clipped
   the overflow instead of fixing it, which is what produced the dead white band
   beside the content. minmax(min(100%, N), 1fr) lets each track collapse to a
   single column instead of forcing a floor. */
.pair-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--spacing-lg);
}

@media (max-width: 380px) {
    .building-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* Form controls must never set the page's minimum width. */
input, select, textarea { max-width: 100%; }

@media (max-width: 380px) {
    /* 48px of padding per side eats a third of a small phone's width and is
       what pushes these cards past the screen edge. Tighten the frame; the
       type inside is unchanged. */
    .parameter-card,
    .content-card,
    .step-content,
    .contact-info,
    .callout {
        padding: var(--spacing-md);
        min-width: 0;
    }
    /* A long unbroken string (URL, map/lot id) must wrap rather than widen the page. */
    body {
        overflow-wrap: break-word;
    }
}

@media (max-width: 380px) {
    /* Flex rows that pair a marker with a body must stack, not squeeze. */
    .step-card {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }
    .step-card > * { min-width: 0; }
    .option-card,
    .step-item {
        min-width: 0;
        padding: var(--spacing-md);
    }
}

/* ── "What We Believe" pull-quote (#solution) ───────────────────────────────
   Casey's ask, 2026-08-14: the Solution argument closes on the principle it
   rests on. Mirrors the same block on piaindustries.com, rebuilt in this
   site's own tokens rather than importing the hub's inline styles. */
.believe-quote {
    max-width: 900px;
    /* Sitting directly under the section heading, it belongs TO that heading —
       so it is pulled up close to it (the header's own 3xl bottom margin is
       cancelled) and given the full rhythm gap below, before the block it
       introduces. Casey, 2026-08-14. */
    margin: 0 auto 4rem;
    padding: 2rem 2.25rem;
    background: linear-gradient(135deg, rgba(27, 50, 82, 0.05), rgba(214, 178, 94, 0.07));
    border-radius: var(--radius-lg);
}
#overview .section-header { margin-bottom: 1.5rem; }

.believe-quote-title {
    text-align: center;
    margin: 0 0 1.5rem;
    color: var(--color-primary);
}
.believe-quote blockquote {
    margin: 0;
    padding-left: 1.5rem;
    border-left: 4px solid var(--color-gold);
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--color-gray-900);
}
.believe-quote figcaption {
    margin: 1rem 0 0 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
}
@media (max-width: 720px) {
    .believe-quote { padding: 1.5rem 1.25rem; margin-top: 2rem; }
    .believe-quote blockquote { font-size: 1rem; padding-left: 1rem; }
    .believe-quote figcaption { margin-left: 1rem; }
}

/* Arrow nav for the strategy scroller (Casey, 2026-08-14). The buttons start
   hidden and are revealed by script — if JS never runs, no dead controls are
   left on the page and the scroller is still usable by touch and keyboard. */
.strategy-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(214, 178, 94, 0.45);
    border-radius: 50%;
    background: rgba(15, 31, 56, 0.92);
    color: var(--color-gold);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.strategy-arrow--prev { left: -0.5rem; }
.strategy-arrow--next { right: -0.5rem; }
.strategy-arrow:hover {
    background: rgba(27, 50, 82, 0.98);
    border-color: var(--color-gold);
}
.strategy-arrow:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}
/* At either end the arrow stays in place but reads as unavailable, so the row
   does not jump sideways as buttons appear and disappear. */
.strategy-arrow[disabled] {
    opacity: 0.28;
    cursor: default;
}
/* The fade stays even with arrows live. Without it the track simply clips the
   next card mid-word against the container edge, which reads as broken text
   rather than as more content to the right. It is widened to pass under the
   arrow, which sits above it on z-index. */
.strategy-scroller.has-arrows::after { width: 5.5rem; }

.strategy-arrow {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

@media (max-width: 720px) {
    .strategy-arrow { width: 2.25rem; height: 2.25rem; font-size: 1.3rem; }
    .strategy-arrow--prev { left: -0.25rem; }
    .strategy-arrow--next { right: -0.25rem; }
}

/* ── Property story cards (#property) ───────────────────────────────────────
   Casey, 2026-08-14: these two paragraphs were loose text between card blocks
   and read as an unstyled gap in the page. Carded so they sit in the same
   visual system as everything around them. Two columns on desktop because the
   pair is a before/after — what the town was, then what the property became —
   and stacked on narrow screens where side-by-side would squeeze the measure. */
.building-story {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-lg);
}
.building-story .building-story-card {
    margin: 0;
    padding: 1.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-left: 3px solid var(--color-gold);
    border-radius: var(--radius-lg);
    line-height: 1.75;
}
.building-story .building-story-card strong { color: var(--color-primary); }

@media (max-width: 900px) {
    .building-story { grid-template-columns: 1fr; }
    .building-story .building-story-card { padding: 1.35rem; }
}

/* ── The claim under the map (#property) ───────────────────────────────────
   Casey, 2026-08-14: he did not want the map swapped out as you scroll, so the
   sentence it supports simply sits beneath it — a full-bleed band inside the
   figure, between the map and the caption that footnotes them both, so image,
   claim and footnote read as one object. The band states the claim only; the
   map already prints both per-acre figures as badges, and repeating them here
   was redundant. The figure clips to a rounded corner, so the band squares off
   against it. */
.building-image .building-swap-card {
    margin-top: 0;
    border-radius: 0;
}

.building-swap-card {
    margin-top: var(--spacing-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-lg);
    color: var(--color-white);
    text-align: center;
}
.building-swap-lead {
    margin: 0 auto;
    /* No fixed measure: any ch cap forces a wrap that the screen has not asked
       for — 34ch broke this across three lines on a monitor wide enough to set
       it in one. The band's own padding is the constraint, and `balance` keeps
       the lines even whenever it does have to wrap. */
    max-width: 100%;
    text-wrap: balance;
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(1.15rem, 2.4vw, 1.75rem);
    line-height: 1.35;
}
.building-swap-lead strong { color: var(--color-gold); white-space: nowrap; }
/* ── Tab change is visible, not a single frame ──────────────────────────────
   The swap used to be instantaneous, which read as a rendering fault rather
   than a deliberate change. The incoming panel rises and fades in instead.
   (The automatic switch this was first written for is gone — Casey asked for
   it removed on 2026-08-14 — but a clicked tab deserves the same courtesy.) */
/* The panels are different heights, so a plain swap moves everything below —
   the same "jerk" as the map. The tab strip is therefore given a fixed height
   equal to the tallest panel while a change is in flight, and the incoming
   panel dissolves upward into place over the same slow curve the map uses.
   Nothing below the tabs moves during the transition. */
.tabs { position: relative; }
.tab-panels { position: relative; }
.tab-panels.is-locked { overflow: hidden; }

.tab-content.is-entering {
    animation: tab-panel-in .9s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes tab-panel-in {
    from { opacity: 0; transform: translateY(14px) scale(.995); }
    to   { opacity: 1; transform: none; }
}
.tab-content.is-leaving {
    position: absolute;
    inset: 0 0 auto 0;
    pointer-events: none;
    animation: tab-panel-out .9s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes tab-panel-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-14px) scale(.995); }
}

@media (prefers-reduced-motion: reduce) {
    .tab-content.is-entering { animation: none; }
}

/* ── Glossary term with a definition card ──────────────────────────────────
   Casey, 2026-08-14: "contribution sources" carries a specific meaning that
   the surrounding prose assumes. The term is a real button — it opens on
   hover, on keyboard focus and on tap — so the dotted underline is an honest
   affordance rather than decoration on inert text. */
.glossary {
    position: relative;
    display: inline;
}

.glossary-term {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: help;
    border-bottom: 1px dashed var(--color-gold-dark);
    text-underline-offset: 2px;
}

.glossary-term:hover,
.glossary-term:focus-visible {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.glossary-term:focus-visible {
    outline: 2px solid var(--color-gold-dark);
    outline-offset: 3px;
    border-radius: 2px;
}

.glossary-card {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    z-index: 60;
    display: block;
    width: max-content;
    max-width: min(24rem, 78vw);
    padding: var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px rgba(15, 31, 56, 0.18);
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-gray-700);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.glossary:hover .glossary-card,
.glossary:focus-within .glossary-card,
.glossary.is-open .glossary-card {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Near the right edge the card would run off the page, so it hangs from the
   right instead. JS sets this by measuring, not by guessing at breakpoints. */
.glossary-card.is-flipped {
    left: auto;
    right: 0;
}

.glossary-card-title {
    display: block;
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.05rem;
    color: var(--color-primary-dark);
    margin-bottom: 0.35rem;
}

.glossary-card-lead {
    display: block;
    margin-bottom: 0.75rem;
}

.glossary-card-def {
    display: block;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-gray-200);
}

.glossary-card-def + .glossary-card-def {
    margin-top: 0.6rem;
}

.glossary-card-def strong {
    display: block;
    color: var(--color-primary);
}

/* ── The same term as a section heading (Casey, CR27 2026-08-15) ───────────
   "Anchor Property" names the #property section. Two differences from the
   inline term: the heading is centred, so the card hangs from the middle of
   the term rather than its left edge; and the control is a real <a> to the
   full definition further down the section, so a click goes somewhere while
   hover still opens the card. The card must re-declare the body font — it
   inherits the display serif and the heading's weight otherwise. */
.glossary-heading {
    display: inline-block;
}

.glossary-heading .glossary-term {
    text-decoration: none;
    border-bottom-width: 2px;
    cursor: pointer;
}

.glossary-heading .glossary-card {
    left: 50%;
    right: auto;
    transform: translate(-50%, -4px);
    font-family: var(--font-body, system-ui, sans-serif);
    font-weight: 400;
    letter-spacing: normal;
}

.glossary-heading:hover .glossary-card,
.glossary-heading:focus-within .glossary-card,
.glossary-heading.is-open .glossary-card {
    transform: translateX(-50%);
}

/* Centred, the card only reaches the right edge on a viewport narrower than
   the inline layout survives anyway — but the measuring in script.js is
   shared, so the flipped state has to stay coherent here too. */
.glossary-heading .glossary-card.is-flipped {
    left: auto;
    right: 0;
    transform: translateY(-4px);
}

.glossary-heading:hover .glossary-card.is-flipped,
.glossary-heading:focus-within .glossary-card.is-flipped,
.glossary-heading.is-open .glossary-card.is-flipped {
    transform: none;
}

/* The nav is fixed, so the jump target has to clear it. script.js offsets the
   scroll it drives itself; this covers the path it does not — a native hash
   navigation, e.g. arriving from another page. */
#economic-perspective,
#definition-anchor-property {
    scroll-margin-top: 6.5rem;
}

/* On a phone the floating card cannot work: it is anchored to an inline span
   that starts mid-sentence, so a 304px card hung 63px off the right edge of a
   390px screen — and because it is only visibility:hidden when closed, it
   widened the document and gave the whole page a horizontal scroll even
   before anyone tapped it. Below 720px it stops floating and opens inline
   under the paragraph instead, where it cannot overflow anything. display is
   what changes, so the closed card takes up no space at all. */
@media (max-width: 720px) {
    .glossary-card {
        display: none;
        position: static;
        width: auto;
        max-width: none;
        margin: 0.75rem 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        box-shadow: none;
    }

    .glossary.is-open .glossary-card {
        display: block;
    }

    .glossary-term {
        cursor: pointer;
    }

    /* The heading variant's centring is absolute-position maths; once the card
       is static it has to be undone, or the card sits half off the screen. */
    .glossary-heading .glossary-card,
    .glossary-heading .glossary-card.is-flipped,
    .glossary-heading:hover .glossary-card,
    .glossary-heading:focus-within .glossary-card,
    .glossary-heading.is-open .glossary-card,
    .glossary-heading.is-open .glossary-card.is-flipped {
        left: auto;
        right: auto;
        transform: none;
    }

    /* The heading is centred; a left-aligned card under it reads as debris. */
    .glossary-heading {
        display: block;
    }

    /* The heading term has somewhere to go on a phone — it is a link to the
       full definition further down the same section — so it never opens a
       card here. Letting it open one also broke the jump: the inline card
       added ~270px inside #property, the pointer left the term mid-scroll,
       the card closed, and the landing overshot the definition by that much. */
    .glossary-heading .glossary-card,
    .glossary-heading.is-open .glossary-card {
        display: none;
    }
}

/* ── Scroll reveal ─────────────────────────────────────────────────────────
   Casey, 2026-08-14: sections arrive as the reader reaches them, and grouped
   items arrive in sequence rather than all at once.

   The hidden state is scoped to .js-reveal, a class JS adds to <html> only
   once it knows it can also remove it. No JS, no IntersectionObserver, or
   reduced motion preferred, and the page is simply visible — content is never
   left hidden by a script that failed to run. */
.js-reveal [data-reveal],
.js-reveal [data-reveal-child] {
    opacity: 0;
    transform: translateY(18px);
}

.js-reveal [data-reveal-child] {
    transform: translateY(14px);
}

.js-reveal [data-reveal].is-revealed,
.js-reveal [data-reveal-child].is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity .55s cubic-bezier(.4, 0, .2, 1),
                transform .55s cubic-bezier(.4, 0, .2, 1);
}

/* The stagger lives here; JS only counts the children. */
.js-reveal [data-reveal-child].is-revealed {
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal [data-reveal],
    .js-reveal [data-reveal-child] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Tab panels as cards within cards ──────────────────────────────────────
   Casey, 2026-08-14: each tab is one argument, so it is bounded as one card,
   and each part of that argument is a card inside it. Same three-level system
   as the challenge card: the section is gray-50, the panel is white, and the
   groups inside it are gray-50 again, so every level separates from the one
   holding it without needing a heavier border. */
.panel-card {
    padding: var(--spacing-2xl);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.panel-group {
    padding: var(--spacing-xl);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

.panel-group + .panel-group {
    margin-top: var(--spacing-2xl);
}

/* The groups already carry the separation, so the cards inside them do not
   need their own outer margin as well. */
.panel-group > .parameter-cards,
.panel-group > .motivation-grid {
    margin-bottom: 0;
}



/* ── Every anchored section is a card ──────────────────────────────────────
   Casey, 2026-08-14: one shape for every section, so formatting, reveal and
   scrolling all behave the same from top to bottom. The card is the
   container, not the <section>, so each section's background still runs full
   width behind it — and it is the same element the scroll reveal already
   observes, which makes a section arrive as one object.

   Sections that already held their own top-level white card hand that job
   over to this one and step down a level, keeping the cards-within-cards
   reading rather than stacking white on white. */
main section[id] > .container {
    padding: var(--spacing-2xl);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* A section's colour identity now lives on its card, not on the section. Left
   on the section it showed as a bare band above and below every card, so each
   seam crossed four surfaces — inner card, outer card, this section's ground,
   the next section's ground — in about 200px of scroll. One page ground and
   one card per section means a seam is a single change of tone.

   Must out-specify `main section[id] > .container` above (0,2,2): as a plain
   `.section-dark > .container` (0,2,0) this lost the cascade, and the dark
   sections got a white card under their white text. */
main section[id].section-dark {
    background: none;
    background-color: transparent;
}

main section[id].section-dark > .container {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: var(--shadow-md);
}

main section[id].section-light,
main section[id].section-accent {
    background: none;
    background-color: transparent;
}

/* One ground for the whole page, so the only tone change at a seam is the
   card's own edge. */
body {
    background: var(--color-gray-100);
}

/* With the sections no longer painting bands, this padding is simply the gap
   between cards; 6rem top and bottom was reading as dead space. */
.section {
    padding: var(--spacing-xl) 0;
}

/* The hero centres its content in a full viewport, which left the buttons
   floating above a screen-third of nothing before the first card. */
.hero {
    min-height: min(100vh, 760px);
    min-height: min(100svh, 760px);   /* iOS: cap against the VISIBLE height */
}

/* Phones: the hero is tall enough to read as one without leaving a screen of
   empty gradient under the buttons. This must sit AFTER the rule above —
   same specificity, so source order decides (CR#28). */
@media (max-width: 768px) {
    .hero {
        min-height: min(72vh, 620px);
        min-height: min(72svh, 620px);
    }
}

/* Step-down: first-level cards inside a section card become the tinted group. */
main section[id] > .container > .content-card,
main section[id] > .container > .challenge-card,
main section[id] > .container > .starch-performance,
main section[id] > .container .panel-card {
    background: var(--color-gray-50);
    box-shadow: none;
}

main section[id].section-dark > .container > .content-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

/* The section header sits on the card now, so it no longer needs to clear the
   section's own padding as well. */
main section[id] > .container > .section-header {
    margin-top: 0;
}

@media (max-width: 720px) {
    /* Vertical padding stays; horizontal padding is what a phone cannot spare.
       Each nested level takes only 12px a side, so the innermost card keeps
       ~280px of a 360px screen instead of ~210px. The nesting still reads —
       it is carried by the tint and the border, not by the inset. */
    main section[id] > .container {
        padding: var(--spacing-lg) 1rem;
        border-radius: var(--radius-md);
    }

    .panel-card,
    .panel-group,
    .challenge-card,
    .motivation-analysis {
        padding: var(--spacing-lg) 0.75rem;
    }
}

/* --- Credit section: "… extended version" disclosure (Casey, CR#56 2026-08-22) ---
   A native <details>. The lead sentence IS the summary, so the whole line is the
   control; the cue after it is the part that reads as clickable, and it says what
   opening does rather than pointing at an arrow. Opening replaces the two-column
   short body, which the long form restates almost word for word. */
.credit-extended { margin-bottom: var(--spacing-xl); }
.credit-extended > summary.lead-text {
    margin-bottom: 0;
    cursor: pointer;
    list-style: none;               /* the cue is the affordance, not a triangle */
}
.credit-extended > summary.lead-text::-webkit-details-marker { display: none; }
.credit-extended > summary:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm, 4px);
}
.credit-extended-cue {
    color: var(--color-primary-light);   /* 5.3:1 on white — bold blue, and readable */
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.credit-extended[open] > summary .credit-extended-cue::after {
    content: " (close)";
    text-decoration: none;
    font-weight: 500;
    color: var(--color-gray-700);
}
.credit-extended-body { margin-top: var(--spacing-lg); }
.credit-extended-body p { margin-bottom: var(--spacing-md); line-height: 1.8; }
.credit-extended-body p:last-child { margin-bottom: 0; font-weight: 600; }
.credit-extended[open] ~ .two-column { display: none; }

/* --- Per-acre lens (Casey, CR#55 2026-08-22) ---------------------------------
   The three cards present four equal-weight rows, so the per-acre comparison —
   the thing the section exists to show — had to be hunted for. One sentence
   names the measure before the reader meets it, and the same colour marks the
   row it is about inside each card, so the sentence and its three figures read
   as one object. Deep bronze, not the brand gold: gold on white measures
   1.94:1 and is never used for text here. */
.starch-performance-lens {
    margin: 1.75rem 0 0;
    padding: 0.85rem 1.1rem;
    color: var(--color-gold-dark);          /* 6.4:1 on white */
    background: rgba(214, 178, 94, 0.13);
    border-left: 4px solid var(--color-gold-dark);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.6;
}

.starch-performance-lens + .starch-performance-cards { margin-top: 1rem; }

.starch-performance-card dl div.is-per-acre {
    margin: 0 -0.55rem;
    padding: 0.65rem 0.55rem 0.55rem;
    background: rgba(214, 178, 94, 0.13);
    border-top-color: var(--color-gold-dark);
    border-radius: var(--radius-sm);
}

.starch-performance-card dl div.is-per-acre dt,
.starch-performance-card dl div.is-per-acre dd {
    color: var(--color-gold-dark);
}

.starch-performance-card dl div.is-per-acre dd {
    font-size: 1.2rem;
    line-height: 1.2;
}