/* =========================================================
   Corshelle Realty — Style Sheet
   Canyon Dusk · Grounded land specialist · Quiet, high-craft feel
   ========================================================= */

/* --- Palette & Tokens ----------------------------------- */
:root {
    --sand:        #EDE2CC;
    --sand-deep:   #E2D3B2;
    --saddle:      #5C3A21;
    --saddle-deep: #4A2E1A;
    --mesquite:    #3F4D33;
    --clay:        #8C3A2C;
    --clay-deep:   #722F23;
    --ember:       #C2703D;
    --iron:        #2B1F16;
    --iron-deep:   #1B130D;
    --iron-mid:    #261B12;
    --iron-soft:   #32251A;

    --text-light:  #EDE2CC;
    --text-dark:   #2B1F16;
    /* --text-muted (#8A7560) was removed: measured under 4.5:1 against
       every background it was used on, light or dark (WCAG 1.4.3). Muted
       text now uses --saddle (light backgrounds) or an rgba(sand, X)
       tint (dark backgrounds) instead — see individual rules. */

    --ff-serif:    'Fraunces', Georgia, 'Times New Roman', serif;
    --ff-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --ease:        cubic-bezier(.25,.46,.45,.94);
    --ease-out:    cubic-bezier(.16,1,.3,1);

    --nav-h:       112px;
}

/* --- Reset ---------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
    font-family: var(--ff-sans);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-dark);
    background: var(--sand);
    overflow-x: hidden;
}
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font:inherit; border:none; background:none; cursor:pointer; color:inherit; }
address { font-style:normal; }

/* --- Typography ----------------------------------------- */
h1,h2,h3,h4 {
    font-family: var(--ff-serif);
    font-weight: 400;
    line-height: 1.15;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.3rem); letter-spacing: .01em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem);  letter-spacing: .01em; }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem);  font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }

/* --- Focus Visibility (WCAG 2.4.7) -----------------------
   A single flat color can't guarantee 3:1 contrast against both
   this site's light (sand) and dark (iron) section backgrounds,
   so every keyboard focus indicator is a layered light+dark ring —
   whichever ring lands against the busier backdrop stays visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--sand), 0 0 0 6px var(--iron-deep);
}

/* --- Layout --------------------------------------------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 60px);
}

/* --- Buttons -------------------------------------------- */
.btn {
    display: inline-block;
    font-family: var(--ff-sans);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 16px 40px;
    border: 1px solid;
    transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
    will-change: transform;
}
.btn--primary {
    color: var(--sand);
    border-color: var(--sand);
    background: transparent;
}
.btn--primary:hover {
    background: var(--sand);
    color: var(--iron-deep);
}
.btn--dark {
    color: var(--sand);
    border-color: var(--iron);
    background: var(--iron);
}
.btn--dark:hover {
    background: var(--saddle-deep);
    border-color: var(--saddle-deep);
}
.btn--submit {
    color: var(--sand);
    border-color: var(--clay);
    background: var(--clay);
    width: 100%;
}
.btn--submit:hover {
    background: var(--clay-deep);
    border-color: var(--clay-deep);
}

/* --- Navigation ----------------------------------------- */
.main-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    transition: background .5s var(--ease), box-shadow .5s var(--ease);
    /* Before the user scrolls, .scrolled hasn't been added yet and the nav
       has no background at all — nav text sits directly on whatever part
       of the hero photo happens to be behind it, with no guaranteed
       contrast. This permanent scrim gives it a floor; .scrolled below
       replaces it with a stronger, fully opaque one. */
    background: linear-gradient(rgba(27,19,13,.55), rgba(27,19,13,0));
}
.main-nav.scrolled {
    background: rgba(27,19,13,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(237,226,204,.08);
}
.nav-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 60px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 16px;
}
.nav-logo img {
    height: 90px;
    width: auto;
    transition: opacity .3s;
}
.nav-logo:hover img { opacity: .8; }
.nav-logo-name {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--sand);
    opacity: .8;
    padding-left: 16px;
    border-left: 1px solid rgba(237,226,204,.25);
    white-space: nowrap;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
}
.nav-links a {
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sand);
    opacity: .85;
    transition: opacity .3s;
    position: relative;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 1px;
    background: var(--ember);
    transition: width .3s var(--ease);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
    border: 1px solid rgba(237,226,204,.3) !important;
    padding: 10px 22px !important;
    opacity: 1 !important;
}
.nav-cta:hover { background: rgba(237,226,204,.08); }
.nav-cta::after { display: none !important; }
.nav-phone {
    opacity: 1 !important;
    font-weight: 500 !important;
    letter-spacing: .06em !important;
}
.nav-phone::after { display: none !important; }

/* Mobile toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    z-index: 1001;
}
.nav-toggle span {
    display: block;
    width: 24px; height: 1.5px;
    background: var(--sand);
    transition: transform .3s, opacity .3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Hero (scroll-driven canvas sequence) --------------- */
.hero {
    position: relative;
    height: 500vh;
}
.hero-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--iron-deep);
}
.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.hero-fallback-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-loader {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .6s var(--ease);
}
.hero-loader.done {
    opacity: 0;
    pointer-events: none;
}
.hero-loader-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.35);
}
.hero-loader-ui {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.hero-loader-track {
    width: 120px;
    height: 2px;
    background: rgba(237,226,204,.15);
    border-radius: 1px;
    overflow: hidden;
}
.hero-loader-fill {
    height: 100%;
    width: 0%;
    background: var(--ember);
    transition: width .15s linear;
}
.hero-loader-pct {
    font-family: var(--ff-sans);
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(237,226,204,.5);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Darkened slightly from the original pass — with a bright patch of
       photo behind it (e.g. a sunset sky frame), the text sitting on top
       could otherwise dip under 4.5:1 (WCAG 1.4.3). This alone can't
       *guarantee* contrast against arbitrary photo content; see the
       .hero-content / .hero-milestone panels below for the main fix. */
    background: linear-gradient(
        180deg,
        rgba(27,19,13,.32) 0%,
        rgba(27,19,13,.15) 35%,
        rgba(27,19,13,.2) 65%,
        rgba(27,19,13,.42) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--sand);
    padding: 48px 48px;
    will-change: opacity, transform;
    /* Darkened from .38 — against a bright frame of the photo sequence,
       .hero-sub (regular-weight, under the 24px large-text threshold) could
       fall under 4.5:1. Still an approximation, not a guarantee, against
       arbitrary photo content (WCAG 1.4.3). */
    background: rgba(27,19,13,.6);
    border-radius: 4px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.hero-pre {
    font-family: var(--ff-sans);
    font-size: .75rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: 20px;
    opacity: .75;
    color: var(--ember);
}
.hero h1 { margin-bottom: 24px; }
.hero-sub {
    font-family: var(--ff-serif);
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
    font-weight: 400;
    font-style: italic;
    opacity: .85;
    margin-bottom: 48px;
}

.hero-milestone {
    position: absolute;
    z-index: 2;
    color: var(--sand);
    opacity: 0;
    will-change: opacity, transform;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 4px;
    pointer-events: none;
    max-width: 500px;
    padding: 38px 44px;
}
.hero-milestone h2 {
    font-family: var(--ff-serif);
    font-size: clamp(1.3rem, 2.8vw, 2rem);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 14px;
}
.hero-milestone p {
    font-family: var(--ff-sans);
    font-size: .92rem;
    font-weight: 300;
    line-height: 1.75;
    opacity: .82;
}

.hero-milestone--bl { bottom: 12%; left: 6%; text-align: left; }
.hero-milestone--tl { top: 18%; left: 6%; text-align: left; }
.hero-milestone--br { bottom: 12%; right: 6%; text-align: right; }

.scroll-cue {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--sand);
    will-change: opacity;
}
.scroll-cue span {
    font-size: .65rem;
    letter-spacing: .25em;
    text-transform: uppercase;
}
.scroll-line {
    width: 1px;
    height: 40px;
    background: var(--sand);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%,100% { transform: scaleY(.4); opacity:.3; }
    50% { transform: scaleY(1); opacity:.8; }
}

.hero-progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    z-index: 3;
    background: rgba(226,211,178,.12);
}
.hero-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--ember);
    will-change: width;
}

/* --- Intro ---------------------------------------------- */
.intro {
    padding: 120px 0 100px;
    background: var(--sand);
}
.intro-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.intro-rule {
    width: 50px;
    height: 1px;
    background: var(--clay);
    margin: 0 auto 32px;
}
.intro .section-tag { justify-content: center; display: flex; }
.intro-quote {
    font-family: var(--ff-serif);
    font-size: clamp(1.3rem, 2.6vw, 1.85rem);
    font-weight: 400;
    line-height: 1.55;
    color: var(--iron);
    margin: 20px 0 56px;
}
.intro-line {
    font-family: var(--ff-sans);
    font-size: .95rem;
    letter-spacing: .04em;
    color: var(--saddle);
    text-transform: uppercase;
    font-weight: 400;
}
.intro-line-strong {
    display: block;
    margin-top: 10px;
    font-family: var(--ff-serif);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    color: var(--clay);
}

/* --- Section Headers ------------------------------------ */
.section-head {
    text-align: center;
    margin-bottom: 68px;
}
.section-head--light { color: var(--sand); }
.section-head--light .section-tag { color: var(--ember); }
.section-head--light .section-desc { color: rgba(237,226,204,.6); }
.section-tag {
    display: block;
    font-family: var(--ff-sans);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--clay);
    margin-bottom: 16px;
}
.section-head h2 {
    margin-bottom: 18px;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s var(--ease-out);
}
.section-head h2.visible { clip-path: inset(0 0 0 0); }
.section-desc {
    font-size: .95rem;
    /* --text-muted (#8A7560) is under 4.5:1 against every light background
       this site uses; --saddle passes comfortably (WCAG 1.4.3). */
    color: var(--saddle);
    max-width: 600px;
    margin: 0 auto;
}

/* --- Land We Know (static cards) -------------------------- */
.land {
    padding: 110px 0;
    background: var(--sand-deep);
    position: relative;
}
.land-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.land-card {
    position: relative;
    background: #F7F1E2;
    border: 1px solid var(--sand-deep);
    border-top: 3px solid var(--clay);
    border-radius: 3px;
    padding: 36px 38px 38px;
    box-shadow: 0 1px 2px rgba(43,31,22,.04);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.land-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px -16px rgba(43,31,22,.22);
}
.land-num {
    display: block;
    font-family: var(--ff-serif);
    font-size: 2.2rem;
    font-weight: 300;
    color: var(--clay);
    opacity: .35;
    margin-bottom: 14px;
}
.land-card h3 {
    font-family: var(--ff-serif);
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-weight: 400;
    color: var(--iron);
    margin-bottom: 14px;
}
.land-card p {
    font-size: .92rem;
    line-height: 1.75;
    color: var(--saddle);
}

/* --- Before You Buy --------------------------------------- */
.before {
    padding: 110px 0;
    background: var(--iron-deep);
    color: var(--sand);
}
.before-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}
.before-card {
    background: var(--iron-soft);
    border: 1px solid rgba(237,226,204,.08);
    border-top: 3px solid var(--ember);
    border-radius: 3px;
    padding: 36px 38px 38px;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}
.before-card:hover {
    transform: translateY(-4px);
    background: var(--iron-mid);
    box-shadow: 0 18px 32px -16px rgba(0,0,0,.35);
}
.before-num {
    display: block;
    font-family: var(--ff-serif);
    font-size: 2.2rem;
    font-weight: 300;
    color: var(--ember);
    opacity: .5;
    margin-bottom: 14px;
}
.before-card h3 {
    color: var(--sand);
    margin-bottom: 12px;
}
.before-card p {
    font-size: .92rem;
    line-height: 1.8;
    color: rgba(237,226,204,.65);
}

/* --- Meet Michelle --------------------------------------- */
.michelle {
    padding: 120px 0;
    background: var(--sand-deep);
}
.michelle-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 60px;
    align-items: center;
}
.michelle-img {
    border-radius: 2px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}
.michelle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
    transform: scale(1.08);
    transition: transform .15s linear;
}
.michelle-text .section-tag { color: var(--clay); margin-bottom: 16px; display: block; }
.michelle-text h2 { margin-bottom: 24px; }
.michelle-text p {
    font-size: .95rem;
    line-height: 1.8;
    /* --text-muted measured at ~3.0:1 against --sand-deep (WCAG 1.4.3). */
    color: var(--saddle);
    margin-bottom: 24px;
}
.michelle-text p:last-of-type { margin-bottom: 36px; }

/* --- Gallery -------------------------------------------- */
.gallery {
    padding: 120px 0;
    background: var(--sand);
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
    gap: 14px;
}
.gallery-cell {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 2px;
}
.gallery-cell--hero { grid-column: span 2; grid-row: span 2; }
.gallery-cell--wide { grid-column: span 2; }
.gallery-cell img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.gallery-cell:not(.gallery-cell--hero):hover img { transform: scale(1.05); }
.gallery-cell--hero img { transform: scale(1.08); transition: transform .15s linear; }
.gallery-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px 24px;
    background: linear-gradient(transparent, rgba(27,19,13,.75));
    opacity: 0;
    transform: translateY(8px);
    transition: all .4s var(--ease);
}
.gallery-cell:hover .gallery-label,
.gallery-cell:focus-visible .gallery-label { opacity: 1; transform: translateY(0); }
.gallery-label span {
    font-family: var(--ff-serif);
    font-size: 1rem;
    color: var(--sand);
    font-style: italic;
}

/* --- Lightbox ------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(27,19,13,.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s var(--ease);
}
.lightbox.active { opacity: 1; pointer-events: auto; }
.lb-body { max-width: 90vw; max-height: 85vh; text-align: center; }
.lb-body img { max-width: 100%; max-height: 80vh; object-fit: contain; margin: 0 auto; }
.lb-caption {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 1rem;
    color: rgba(237,226,204,.6);
    margin-top: 16px;
}
.lb-close, .lb-prev, .lb-next {
    position: absolute;
    color: var(--sand);
    opacity: .6;
    transition: opacity .3s;
    z-index: 10;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { opacity: 1; }
.lb-close { top: 24px; right: 32px; font-size: 2rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 3rem; padding: 16px; }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }

/* --- Macoyosh Family ------------------------------------- */
.family {
    padding: 120px 0;
    background: var(--iron-deep);
    color: var(--sand);
}
.family .section-tag { color: var(--ember); }
.family .section-head h2 { color: var(--sand); }
.family-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.family-label {
    display: block;
    text-align: center;
    margin-top: 18px;
    font-family: var(--ff-serif);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 500;
    color: rgba(237,226,204,.9);
}
.family-card {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    aspect-ratio: 3 / 4;
    display: block;
    cursor: pointer;
}
.family-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .5s var(--ease), transform .5s var(--ease);
}
.family-card:hover .family-card-img {
    filter: blur(6px) brightness(.55);
    transform: scale(1.05);
}
.family-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.family-card:hover .family-card-overlay,
.family-card:focus-visible .family-card-overlay { opacity: 1; transform: translateY(0); }
.family-card-overlay h3 {
    font-family: var(--ff-serif);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    color: var(--sand);
    margin-bottom: 8px;
}
.family-card-overlay p {
    font-family: var(--ff-sans);
    font-size: .85rem;
    font-weight: 300;
    color: rgba(237,226,204,.7);
    letter-spacing: .06em;
}

/* --- Contact -------------------------------------------- */
.contact {
    padding: 120px 0;
    background: var(--iron-mid);
    color: var(--sand);
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.contact-info .section-tag { color: var(--ember); }
.contact-info h2 { margin-bottom: 24px; }
.contact-lead {
    font-size: .95rem;
    color: rgba(237,226,204,.6);
    margin-bottom: 48px;
    line-height: 1.8;
}
.contact-details { display: flex; flex-direction: column; gap: 26px; }
.contact-block { display: flex; flex-direction: column; gap: 4px; }
.contact-label {
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    /* --text-muted is under 4.5:1 against this section's dark background too
       (it's too light for light backgrounds AND too dark for dark ones) —
       use a sand-based tint instead, matching the pattern used elsewhere
       in this section (WCAG 1.4.3). */
    color: rgba(237,226,204,.65);
}
.contact-val {
    font-family: var(--ff-serif);
    font-size: 1.05rem;
    color: var(--sand);
    transition: color .3s;
}
a.contact-val:hover { color: var(--ember); }
.contact-note {
    font-size: .68rem;
    letter-spacing: .04em;
    font-style: italic;
    /* .35 alpha measured at ~2.8:1 against this section's background —
       bumped to match the already-passing .6 used elsewhere (WCAG 1.4.3). */
    color: rgba(237,226,204,.6);
}

.contact-form-wrap {
    background: var(--iron-soft);
    padding: 48px;
    border: 1px solid rgba(237,226,204,.06);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block;
    min-height: 1.7em;
    line-height: 1.7em;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    /* --text-muted measured at ~3.4:1 against this panel's background —
       under 4.5:1 (WCAG 1.4.3). Same fix as .contact-label. */
    color: rgba(237,226,204,.65);
    margin-bottom: 8px;
}
.form-group input,
.form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(237,226,204,.2);
    padding: 12px 0;
    font-family: var(--ff-sans);
    font-size: .92rem;
    font-weight: 300;
    color: var(--sand);
    transition: border-color .3s;
    outline: none;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--ember); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] { border-bottom-color: #FF6B4A; }
.field-error {
    display: block;
    min-height: 1.2em;
    margin-top: 6px;
    font-size: .75rem;
    /* #FF6B4A measured at ~5.3:1 against this panel's background
       (WCAG 1.4.3). The error is never conveyed by color alone — this
       text is the primary signal, paired with aria-invalid +
       aria-describedby so it's exposed to assistive tech too. */
    color: #FF6B4A;
}
.form-status {
    margin-top: 16px;
    font-size: .85rem;
    color: rgba(237,226,204,.85);
    min-height: 1.4em;
}

/* --- Footer --------------------------------------------- */
.footer {
    padding: 80px 0 40px;
    background: var(--iron-deep);
    /* .5 alpha measured at ~4.4:1 against this background — just under the
       4.5:1 threshold; bumped to .6 for a clear pass (WCAG 1.4.3). */
    color: rgba(237,226,204,.6);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}
.footer-logo {
    height: 96px;
    width: auto;
    opacity: .9;
    margin-bottom: 20px;
}
.footer-brand p { font-size: .85rem; line-height: 1.7; max-width: 320px; }
.footer-col h3 {
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ember);
    margin-bottom: 20px;
    /* opacity: .8 dropped this to ~3.6:1 against the footer background —
       full-strength --ember passes at ~5:1 (WCAG 1.4.3). */
}
.footer-col li { font-size: .85rem; margin-bottom: 10px; }
.footer-col a { transition: color .3s; }
.footer-col a:hover { color: var(--sand); }
.footer-bottom {
    border-top: 1px solid rgba(237,226,204,.06);
    padding-top: 24px;
    font-size: .75rem;
    letter-spacing: .06em;
}

/* --- Section vignette bleed (seamless section transitions) --- */
.intro, .land, .before, .michelle, .gallery, .family, .contact {
    position: relative;
}
.intro::before, .land::before, .before::before, .michelle::before,
.gallery::before, .family::before, .contact::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.intro > .container, .land > .container, .before > .container, .michelle > .container,
.gallery > .container, .family > .container, .contact > .container {
    position: relative;
    z-index: 1;
}
.intro::before, .land::before {
    box-shadow: inset 0 90px 130px -20px rgba(43,31,22,.22), inset 0 -90px 130px -20px rgba(43,31,22,.22);
}
.michelle::before, .gallery::before {
    box-shadow: inset 0 90px 130px -20px rgba(43,31,22,.2), inset 0 -90px 130px -20px rgba(43,31,22,.2);
}
.before::before, .family::before {
    box-shadow: inset 0 80px 120px -20px rgba(194,112,61,.16), inset 0 -80px 120px -20px rgba(194,112,61,.16);
}
.contact::before {
    box-shadow: inset 0 60px 90px -20px rgba(194,112,61,.07), inset 0 -60px 90px -20px rgba(194,112,61,.07);
}

/* --- Reveal Animations ----------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0) translateX(0) scale(1); }
.reveal-left { transform: translateX(-40px) translateY(0); }
.reveal-right { transform: translateX(40px) translateY(0); }
.reveal-scale { transform: translateY(24px) scale(0.97); }
.reveal-line {
    transform: none;
    transform-origin: left center;
    transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
}
.reveal-line:not(.visible) { transform: scaleX(0); }

/* Parallax drift (subtle, grounded — no 3D) */
.parallax-img { will-change: transform; }

/* Magnetic CTA buttons (JS sets --mx/--my) */
.btn--magnetic {
    transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px));
}

/* --- Responsive ------------------------------------------ */

/* The full desktop nav (long broker name + 4 links + a bordered CTA button
   + phone number) needs roughly 1350px of clear width to lay out on one
   line without wrapping. That's wider than a lot of real laptop screens
   (1280px, 1366px), so without this step it wraps and overlaps well before
   the mobile hamburger breakpoint kicks in at 768px. This trims it down in
   stages instead of jumping straight to the hamburger menu. */
@media (max-width: 1450px) {
    .nav-logo-name { display: none; }
    .nav-logo img { height: 74px; }
    .nav-links { gap: 22px; }
    .nav-links a { font-size: .76rem; letter-spacing: .1em; }
    .nav-cta { padding: 9px 16px !important; }
}

@media (max-width: 1024px) {
    .land-grid { grid-template-columns: 1fr; }
    .before-grid { grid-template-columns: 1fr; }
    .michelle-grid { grid-template-columns: 1fr; gap: 40px; }
    .michelle-img { aspect-ratio: 16/10; }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; }
    .gallery-cell--hero { grid-column: span 2; grid-row: span 2; }
    .gallery-cell--wide { grid-column: span 1; }
    .contact-grid { grid-template-columns: 1fr; gap: 48px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer-brand { grid-column: span 2; }
}

/* Nav-only breakpoint, separate from the general 768px layout breakpoint
   below. The trimmed desktop nav (previous block) still can't fit the four
   links + CTA + phone number once the viewport gets much narrower than
   this — verified empirically: it wraps starting at 880px. Switching to
   the hamburger menu a bit earlier avoids that gap entirely. */
@media (max-width: 900px) {
    :root { --nav-h: 76px; }
    .nav-logo img { height: 58px; }
    .nav-logo-name { display: none; }
    .nav-toggle { display: flex; }
    .nav-links {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(27,19,13,.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 28px;
        opacity: 0;
        pointer-events: none;
        transition: opacity .4s var(--ease);
    }
    .nav-links.open { opacity: 1; pointer-events: auto; }
    .nav-links a { font-size: .9rem; letter-spacing: .2em; }
    .nav-cta { margin-top: 12px; }
}

@media (max-width: 768px) {
    .hero { height: 350vh; }
    .hero-sticky { min-height: 100svh; }
    .hero-loader-track { width: 80px; }
    .hero-milestone { max-width: 340px; padding: 26px 30px; }
    .hero-milestone--bl, .hero-milestone--tl { left: 5%; }
    .hero-milestone--br { right: 5%; }
    .hero-milestone h2 { font-size: 1.2rem; }
    .hero-milestone p { font-size: .85rem; }

    .intro { padding: 80px 0; }
    .intro-line-strong { font-size: 1.3rem; }

    .land { padding: 80px 0; }
    .land-card { padding: 32px 26px; }

    .before { padding: 80px 0; }
    .before-card { padding: 30px 26px; }

    .michelle { padding: 80px 0; }

    .gallery { padding: 80px 0; }
    .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
    .gallery-cell--hero { grid-column: span 2; grid-row: span 1; }

    .family { padding: 80px 0; }
    .family-grid { grid-template-columns: 1fr; gap: 20px; }
    .family-card { aspect-ratio: 4/3; }

    .contact { padding: 80px 0; }
    .contact-form-wrap { padding: 32px 24px; }
    .form-row { grid-template-columns: 1fr; }

    .footer { padding: 60px 0 32px; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-brand { grid-column: span 1; }

    .section-head { margin-bottom: 48px; }
    .section-desc br { display: none; }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.55rem; }
    .hero-sub { font-size: .92rem; margin-bottom: 36px; }
    .btn { padding: 14px 30px; font-size: .75rem; }
    .gallery-grid { grid-auto-rows: 140px; gap: 8px; }
}