/* =========================================================
   Morehaus — project-specific CSS
   Loaded AFTER app.css so it can override Tailwind utilities.
   Put anything Figma-specific here that the compiled
   Tailwind doesn't include (exact widths, SOFT gradients, etc).
   ========================================================= */

/* ----- Typography defaults ----- */
body, h1, h2, h3, h4, h5, h6, p, a, span, button, input, textarea, select {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
}
.font-display-serif {
    font-family: 'Instrument Serif', Georgia, serif;
}

/* =========================================================
   Feature rows (Index page, section below Intro).
   Four Figma frames, four patterns. Desktop-first from 768px.
   ========================================================= */

/* --- Pattern 1: "More than just a house" — Frame 130 (1392x648)
       Image 916x648 (65.8%) on left + text 476x392 (34.2%) right,
       text VERTICALLY CENTERED, no internal padding. --- */
.mh-row-more {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.mh-row-more__img {
    width: 100%;
    height: 648px;
    object-fit: cover;
    flex-shrink: 0;
}
.mh-row-more__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .mh-row-more {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }
    .mh-row-more__img { width: 65%; }
    .mh-row-more__text { width: 32%; }
}

/* --- Pattern 2: Text column + image pair row — Frames 129 & 141.
       Text ~36% on left + image pair ~60% on right (24px gap between images).
       Shared by "Spaces for work" and "Designed for intentional living". --- */
.mh-row-pair {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.mh-row-pair__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    flex-shrink: 0;
}
.mh-row-pair__imgs {
    display: flex;
    gap: 24px;
    width: 100%;
    flex-shrink: 0;
}
.mh-row-pair__img {
    flex: 1;
    height: 573px;
    object-fit: cover;
    min-width: 0;
}
@media (min-width: 768px) {
    .mh-row-pair {
        flex-direction: row;
        align-items: center;
        justify-content: space-between; /* push imgs flush right so the
                                           CTA below aligns with their edge
                                           (designer note 4) */
        gap: 40px;
    }
    .mh-row-pair__text { width: 36%; }
    .mh-row-pair__imgs { width: 60%; }
}

/* --- Pattern 3: "Health built into the home" — Frame 135 (1392x464)
       Image 916x464 (65.8%) on left + text 476x464 (34.2%) right,
       text TOP-ALIGNED with padding 24/32/24/40. --- */
.mh-row-health {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.mh-row-health__img {
    width: 100%;
    height: 464px;
    object-fit: cover;
    flex-shrink: 0;
}
.mh-row-health__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    padding: 24px 32px 24px 40px;
    box-sizing: border-box;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .mh-row-health {
        flex-direction: row;
        align-items: stretch;
    }
    .mh-row-health__img { width: 65.8%; }
    .mh-row-health__text {
        width: 34.2%;
        height: 464px;
    }
}

/* "Designed for intentional living" uses the same .mh-row-pair classes above. */

/* =========================================================
   Figma-spec crop wrappers — used inside .mh-row-pair__imgs to
   replicate the over-zoomed image positioning Figma uses on
   mobile (e.g. frame 427:727 sets the rooftop image to
   width:250.61%, left:-70.18%). Behaves like an .mh-row-pair__img
   on desktop (cover crop) and switches to Figma's absolute layout
   on mobile inside the @media block below.
   ========================================================= */
.mh-figcrop {
    position: relative;
    overflow: hidden;
    display: block;
}
.mh-figcrop > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================================
   Shared feature-row title rule (H6 per Figma).
   ========================================================= */
.mh-feature-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.01em;
    color: #0c0c0c;
}

/* =========================================================
   "Two ways to live in a Morehaus home" — Figma Frame 174.
   Oversized bold wordmark, 2 lines, alternating colors.
   ========================================================= */
.mh-projects-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 80px;
    line-height: 88px;
    letter-spacing: -0.02em;
    color: #2a1510;
}
@media (min-width: 1280px) {
    .mh-projects-title {
        font-size: 96px;
        line-height: 104px;
    }
}
.mh-projects-title__accent {
    color: #df4015;  /* bright red-orange: "to live", "home" */
}
.mh-projects-title__mid {
    color: #af2f15;  /* dark red mid-tone: "ways", "Morehaus" */
}

/* SVG version — the exact Figma-exported vector letterforms.
   Natural size 739.6 × 149.5; cap at the Figma width on wide screens. */
.mh-projects-title-svg {
    display: block;
    width: 100%;
    max-width: 739px;
    height: auto;
}

/* =========================================================
   Hero CTA buttons — Figma Buttons L (h:52, rounded-100).
   Primary: radial orange gradient. Secondary: glass + white border.
   Used on home/motto/developers/about hero rows.
   ========================================================= */
.mh-hero-btn-primary,
.mh-hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 16px 20px;
    border-radius: 100px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 16px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease, background 0.2s ease;
}

/* =========================================================
   Hover-revealed arrow icon — drop a <span class="mh-btn-arrow mh-btn-arrow--white|--black" />
   inside any inline-flex button to get the Figma-prototype
   affordance (arrow slides out from inside the button on
   hover/focus). Uses BlackArrow.png on white pills and
   WhiteArrow.png on orange/red pills.
   ========================================================= */
.mh-btn-arrow {
    width: 0;
    height: 14px;
    overflow: hidden;
    flex-shrink: 0;
    margin-left: 0;
    opacity: 0;
    transform: translateX(-4px);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 19px 14px;
    transition: width 0.25s ease, margin-left 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}
.mh-btn-arrow--white { background-image: url('/images/WhiteArrow.png'); }
.mh-btn-arrow--black { background-image: url('/images/BlackArrow.png'); }
:hover > .mh-btn-arrow,
:focus-visible > .mh-btn-arrow {
    width: 19px;
    margin-left: 10px;
    opacity: 1;
    transform: translateX(0);
}
.mh-hero-btn-primary {
    background-color: #df4015;
    background-image: radial-gradient(ellipse at 100% 100%, #df4015 0%, #af2f15 50%, #7f1e14 100%);
}
.mh-hero-btn-primary:hover { opacity: 0.92; }
.mh-hero-btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.mh-hero-btn-secondary:hover { background: rgba(255, 255, 255, 0.18); }

/* Override Tailwind's flat .btn-primary so the "Check out a morehaus project"
   CTA picks up the same orange radial gradient as the hero / motto buttons
   (designer note 4). */
.btn-primary {
    background-color: #df4015;
    background-image: radial-gradient(ellipse at 100% 100%, #df4015 0%, #af2f15 50%, #7f1e14 100%);
}
.btn-primary:hover {
    opacity: 0.92;
}

/* Hero headline forced break — only effective on mobile (Figma frame 423:580). */
.mh-hero-br-mobile { display: none; }
@media (max-width: 767px) {
    .mh-hero-br-mobile { display: inline; }
}

/* =========================================================
   Motto page — hero CTA button (orange radial gradient pill)
   Figma Frame 181:1066 (Buttons L, 276x52)
   ========================================================= */
.mh-motto-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 16px 20px;
    border-radius: 100px;
    background-color: #df4015; /* solid fallback */
    background-image: radial-gradient(ellipse at 100% 100%, #df4015 0%, #af2f15 50%, #7f1e14 100%);
    color: #fff !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 16px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    transition: opacity 0.2s ease;
}
.mh-motto-cta-primary:hover { opacity: 0.92; }

/* =========================================================
   Motto features — Figma Frame 136 (181:1070).
   Three 416-wide columns, 32px gap between.
   Each: H6 Bold 32/40 title + Body 16/24 Medium text.
   ========================================================= */
.mh-motto-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 900px) {
    .mh-motto-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}
.mh-motto-feature {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 416px;
}
.mh-motto-feature p {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #0c0c0c;
}

/* =========================================================
   Motto integrated-model section — Figma Frame 137 (607:369).
   ========================================================= */
.mh-motto-model {
    padding: clamp(40px, 6vh, 104px) 0;
}
.mh-motto-model__head {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(36px, 2rem + 2vw, 64px);
    line-height: 1.25; /* roomier so g/y descenders don't clip */
    letter-spacing: -0.01em;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: radial-gradient(ellipse 90% 180% at 95% 100%,
        #DF4015 0%,
        #AF2F15 35%,
        #7F1E14 65%,
        #2a1510 90%,
        #0C0C0C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    padding: 0 40px 8px;
    margin-bottom: clamp(56px, 8vh, 104px);
    max-width: 1312px;
}
.mh-motto-model__figure {
    width: 100%;
    aspect-ratio: 2784 / 1146; /* match motto-interior.jpg so cover doesn't crop */
    border-radius: 32px;
    overflow: hidden;
    background: #e5ddd1;
    margin-bottom: 24px;
}
.mh-motto-model__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ----- Accordion (5 categories) ----- */
.mh-motto-accordion {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 40px;
}
.mh-motto-accordion__item {
    border-bottom: 1px solid #d9d9d9;
}
.mh-motto-accordion__summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 24px 24px 0;
    cursor: pointer;
    list-style: none;
}
.mh-motto-accordion__summary::-webkit-details-marker { display: none; }
.mh-motto-accordion__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.01em;
    color: #0c0c0c;
    flex: 1;
}
.mh-motto-accordion__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 8px;
    background-image: url('/images/plus.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.mh-motto-accordion__item[open] .mh-motto-accordion__icon {
    background-image: url('/images/minus.png');
}
.mh-motto-accordion__body {
    list-style: disc;
    padding: 0 24px 32px 48px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mh-motto-accordion__body li {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    color: #0c0c0c;
}
.mh-motto-accordion__body strong {
    font-weight: 700;
}

/* =========================================================
   Motto manifesto card — Figma Frame 101 (229:1495).
   Same base as home manifesto. Two differences from home:
     1. Content is TOP-aligned (top:254, not vertical-center)
     2. Subtract mark sits at middle-right (top:650, not 722)
   ========================================================= */
.mh-manifesto--motto .mh-manifesto__content {
    top: 254px;
    transform: none;
}
.mh-manifesto--motto .mh-manifesto__mark {
    top: 650px;
}
@media (max-width: 1199px) {
    .mh-manifesto--motto .mh-manifesto__content { top: auto; transform: none; }
}

/* =========================================================
   Developers page
   ========================================================= */

/* "Differentiation / Built by a developer / Health-focused infra" — Frame 176 (535:170) */
.mh-dev-pitch {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding: 0 40px 80px;
}
.mh-dev-pitch__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}
@media (min-width: 900px) {
    .mh-dev-pitch__top { grid-template-columns: 1fr 1fr; gap: 80px; }
}
.mh-dev-pitch__block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 616px;
}
.mh-dev-pitch__wide {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 945px;
}
.mh-dev-pitch__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.01em;
    color: #0c0c0c;
}
.mh-dev-pitch__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #0c0c0c;
}
.mh-dev-pitch__body .font-medium { font-weight: 500; }
.mh-dev-pitch__link {
    color: #df4015;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}
.mh-dev-pitch__link:hover { color: #af2f15; }

/* Dark-blue "Standing out today" card — Frame 101 (535:218) */
.mh-dev-challenge {
    background:
        radial-gradient(ellipse at 75% 25%, rgba(120, 165, 195, 0.45) 0%, rgba(120, 165, 195, 0) 55%),
        linear-gradient(135deg, #1d3a52 0%, #2c5876 50%, #1d3a52 100%);
    border-radius: 32px;
    padding: 84px 64px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.mh-dev-challenge__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 56px;
    line-height: 64px;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom: 64px;
    max-width: 813px;
}
.mh-dev-challenge__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}
@media (min-width: 900px) {
    .mh-dev-challenge__grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.mh-dev-challenge__col {
    list-style: disc;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.mh-dev-challenge__col li {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: #fff;
}

/* "What the morehaus model includes" — Frame 161 (250:1921) */
.mh-dev-includes {
    padding-top: clamp(80px, 10vh, 120px);
    padding-bottom: clamp(80px, 10vh, 120px);
}
.mh-dev-includes__head {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(56px, 3rem + 2vw, 80px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    /* Same dark-red → bright-orange → black radial-gradient text fill as
       "Wellness-driven homes" on About and the home-page intro paragraph. */
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 377 320' preserveAspectRatio='none'><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-9.5139 -50.643 17.101 -74.639 205.99 444.29)'><stop offset='0' stop-color='%237f1e14'/><stop offset='0.27644' stop-color='%23af2f15'/><stop offset='0.55288' stop-color='%23df4015'/><stop offset='0.66466' stop-color='%23aa3313'/><stop offset='0.77644' stop-color='%23762611'/><stop offset='0.83233' stop-color='%235b200f'/><stop offset='0.88822' stop-color='%2341190e'/><stop offset='0.94411' stop-color='%2326130d'/><stop offset='1' stop-color='%230c0c0c'/></radialGradient></defs><rect width='100%25' height='100%25' fill='url(%23g)'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    margin-bottom: clamp(40px, 5vh, 64px);
    max-width: 853px;
}
.mh-dev-includes__head-accent { font-weight: 700; }
.mh-dev-includes__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px 24px;
}
@media (min-width: 900px) {
    .mh-dev-includes__grid { grid-template-columns: repeat(3, 1fr); gap: 64px 32px; }
}
.mh-dev-includes__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 395px;
}
.mh-dev-includes__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.01em;
    color: #0c0c0c;
}
.mh-dev-includes__item p {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #0c0c0c;
}

/* Developers manifesto — same orange card base, shorter per AY review
   (the website was rendering taller than the Figma frame). Subtract mark
   centered vertically to match. */
.mh-manifesto.mh-manifesto--dev {
    min-height: 500px;
}
.mh-manifesto.mh-manifesto--dev .mh-manifesto__content {
    top: 50%;
    transform: translateY(-50%);
    width: 608px;
    gap: 56px;
}
.mh-manifesto.mh-manifesto--dev .mh-manifesto__title { max-width: 514px; }
.mh-manifesto.mh-manifesto--dev .mh-manifesto__mark {
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width: 1199px) {
    .mh-manifesto.mh-manifesto--dev { min-height: 0; padding: 80px 48px; }
    .mh-manifesto.mh-manifesto--dev .mh-manifesto__content {
        top: auto; transform: none; width: 100%; max-width: 608px;
    }
}

/* About Us manifesto — uses the same vertically-centred dev layout (Figma
   frame 439:450). No override needed; kept here as a hook for future
   tweaks to about-specific overrides. */

/* =========================================================
   About Us page
   ========================================================= */

/* "Wellness-driven homes" intro — Frame 168 (252:2083) */
.mh-about-intro {
    padding: clamp(80px, 10vh, 120px) 0 clamp(60px, 8vh, 96px);
}
.mh-about-intro__head {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(56px, 3rem + 2vw, 72px);
    line-height: 1.22;
    letter-spacing: -0.02em;
    /* Same dark-red → bright-orange → black radial-gradient text fill as
       the home-page intro paragraph (Figma frame 427:663). */
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 377 320' preserveAspectRatio='none'><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-9.5139 -50.643 17.101 -74.639 205.99 444.29)'><stop offset='0' stop-color='%237f1e14'/><stop offset='0.27644' stop-color='%23af2f15'/><stop offset='0.55288' stop-color='%23df4015'/><stop offset='0.66466' stop-color='%23aa3313'/><stop offset='0.77644' stop-color='%23762611'/><stop offset='0.83233' stop-color='%235b200f'/><stop offset='0.88822' stop-color='%2341190e'/><stop offset='0.94411' stop-color='%2326130d'/><stop offset='1' stop-color='%230c0c0c'/></radialGradient></defs><rect width='100%25' height='100%25' fill='url(%23g)'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    max-width: 984px;
    margin-bottom: 24px;
}
.mh-about-intro__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 984px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    color: #0c0c0c;
}
/* Per AY review: second paragraph is smaller than the first. */
.mh-about-intro__body p:first-child {
    font-size: 20px;
    line-height: 30px;
}
.mh-about-intro__body p + p {
    font-size: 16px;
    line-height: 24px;
}

/* Alexandra founder quote — Frame 63 (252:2099) */
.mh-about-founder {
    padding: clamp(60px, 8vh, 96px) 0;
}
.mh-about-founder__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
}
@media (min-width: 900px) {
    .mh-about-founder__row {
        grid-template-columns: 392px 1fr;
        gap: 129px;
        align-items: start; /* keep portrait at its native aspect; don't stretch to match bio column */
    }
}
/* Portrait container sized to the photo's native dimensions (392x533) so
   the image isn't stretched/cropped on desktop. */
.mh-about-founder__portrait {
    width: 100%;
    max-width: 392px;
    aspect-ratio: 392 / 533;
    border-radius: 24px;
    overflow: hidden;
    background: #efe9dd;
}
.mh-about-founder__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.mh-about-founder__quote {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 678px;
    padding-top: clamp(0px, 4vh, 59px);
    margin: 0;
}
.mh-about-founder__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #0c0c0c;
}
/* First paragraph (the "I believe..." quote) is larger and bolder; the
   remaining paragraphs sit at 16/24 until the Alexandra Yonkov signature. */
.mh-about-founder__text p:first-child {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}
.mh-about-founder__attribution {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 24px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.mh-about-founder__name {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #df4015;
}
/* Generic accent for "Alexandra Yonkov" wherever it appears in body copy. */
.mh-name-accent {
    color: #df4015;
    font-weight: 600;
}
.mh-about-founder__role {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #5a5a5a;
}
.mh-about-founder__creds {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #5a5a5a;
    margin-top: 4px;
}
.mh-about-founder__dot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #5a5a5a;
    display: inline-block;
}

/* Our Mission — Frame 161 (252:2167) */
.mh-about-mission {
    padding: clamp(60px, 8vh, 96px) 0 clamp(80px, 10vh, 120px);
}
.mh-about-mission__head {
    max-width: 940px;
    margin-bottom: 64px;
}
.mh-about-mission__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(56px, 3rem + 2vw, 72px);
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: #0c0c0c;
    margin-bottom: 24px;
}
.mh-about-mission__lede {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    color: #0c0c0c;
    max-width: 940px;
}
.mh-about-mission__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}
@media (min-width: 900px) {
    .mh-about-mission__grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }
}
.mh-about-mission__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 624px;
}
.mh-about-mission__col-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.01em;
    color: #0c0c0c;
}
.mh-about-mission__col-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #0c0c0c;
}

/* =========================================================
   Intro paragraph ("Every morehaus home combines...")
   Radial gradient text, same 3-stop palette as the title SVG
   (#7F1E14 → #DF4015 → #0C0C0C). Positioned so bright orange
   sits to the right and burgundy → black sweeps to the left.
   ========================================================= */
.mh-intro-text {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 64px; /* roomier so g/y/p descenders aren't clipped (designer note 3) */
    padding-bottom: 6px;
    letter-spacing: -0.01em;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Figma frame 427:663 — sheared radial gradient with dark red at center,
       bright orange (#df4015) at ~55% radius, fading to black at the edges,
       centered at (206, 444) in a 377×320 box. CSS radial-gradient can't
       represent the shear, so we port the SVG verbatim and stretch it
       (preserveAspectRatio='none') across the text bounding box for both
       mobile and desktop, giving the same colour band on every viewport. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 377 320' preserveAspectRatio='none'><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-9.5139 -50.643 17.101 -74.639 205.99 444.29)'><stop offset='0' stop-color='%237f1e14'/><stop offset='0.27644' stop-color='%23af2f15'/><stop offset='0.55288' stop-color='%23df4015'/><stop offset='0.66466' stop-color='%23aa3313'/><stop offset='0.77644' stop-color='%23762611'/><stop offset='0.83233' stop-color='%235b200f'/><stop offset='0.88822' stop-color='%2341190e'/><stop offset='0.94411' stop-color='%2326130d'/><stop offset='1' stop-color='%230c0c0c'/></radialGradient></defs><rect width='100%25' height='100%25' fill='url(%23g)'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    /* Clip decoration so underlines etc. don't bleed weirdly */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Screen-reader-only fallback text (for a11y when only the SVG is shown) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   Project-type sections (Single-Family / Townhomes).
   Figma: 1440x984 absolute-positioned layouts, stacked.
   ========================================================= */
.mh-project {
    position: relative;
    width: 100%;
    height: 984px;
    overflow: hidden;
    color: #fff;
}
.mh-project[hidden] {
    display: none;
}
.mh-project__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.mh-project__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Light base dim + two subtle vignettes (top-left and bottom-right)
       to keep title and body-text legible without darkening the image. */
    background:
        linear-gradient(90deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.22) 100%),
        radial-gradient(ellipse at 15% 20%, rgba(12,12,12,0.35) 0%, rgba(12,12,12,0) 55%),
        radial-gradient(ellipse at 85% 80%, rgba(12,12,12,0.35) 0%, rgba(12,12,12,0) 55%);
}

/* Title text — sits directly on the project image, no card background
   or glow (per AY's May 6 review: "the text should be directly on the
   image"). Title and subtitle rely on the photo's own dark areas plus
   the section scrim for contrast. */
.mh-project__title-card {
    position: absolute;
    left: 64px;
    top: 101px;
    width: 648px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
    z-index: 3;
}
.mh-project__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 72px;
    letter-spacing: -0.01em;
    color: #fff;
}
.mh-project__subtitle {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #fff;
}

/* Hero subtitle — shared by _Hero, _MottoHero, _DevelopersHero, _AboutHero.
   Matches .mh-project__subtitle so subheads read consistently across the site. */
.mh-hero-subtitle {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #fff;
}

/* Switcher — tabs top-right */
.mh-project__switcher {
    position: absolute;
    left: 952px;
    top: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 0.5px solid #fff;
    border-radius: 100px;
    z-index: 3;
}
.mh-project__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border-radius: 100px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    border: 0.5px solid transparent;
    transition: background 0.2s ease;
}
.mh-project__tab--active {
    background: radial-gradient(circle at 100% 100%, #df4015 0%, #af2f15 50%, #7f1e14 100%);
}
.mh-project__tab--ghost {
    border-color: #fff;
}
.mh-project__tab--ghost:hover {
    background: rgba(255,255,255,0.1);
}

/* Body text + CTA — bottom right */
.mh-project__body {
    position: absolute;
    left: 792px;
    top: 660px;
    width: 584px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    z-index: 3;
}
.mh-project__body-text {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    text-shadow: 0 4px 20.5px rgba(0,0,0,0.9);
}
.mh-project__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 100px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    background: radial-gradient(circle at 100% 100%, #df4015 0%, #af2f15 50%, #7f1e14 100%);
    transition: opacity 0.2s ease;
}
.mh-project__cta:hover {
    opacity: 0.9;
}

/* =========================================================
   "Building healthier homes together" — Figma Frame 174:294.
   Rounded orange card, 1392x1009, radial-gradient background,
   two large decorative ellipses, absolute content at left:112,
   vertically centered + Subtract mark at (1152, 722).
   ========================================================= */
.mh-manifesto {
    position: relative;
    width: 100%;
    min-height: 1009px;
    border-radius: 32px;
    overflow: hidden;
    /* Figma frame 174:294 — sheared radial gradient with the dark-red
       origin off the bottom-left corner, brightening toward the upper
       right. Ported as inline SVG (preserveAspectRatio='none') because
       CSS radial-gradient cannot represent the matrix shear. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1392 1009' preserveAspectRatio='none'><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(162.25 -82.316 43.313 177.58 -135 1180.6)'><stop offset='0' stop-color='%237f1e14'/><stop offset='0.5' stop-color='%23af2f15'/><stop offset='1' stop-color='%23df4015'/></radialGradient></defs><rect width='100%25' height='100%25' fill='url(%23g)'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #7f1e14; /* fallback while SVG loads */
    color: #fff;
    isolation: isolate;
}
/* Soft decorative halos — actual Figma Ellipse 1 / Ellipse 2 SVGs (each
   is a blurred ellipse with a #6A2012 → #DF4015 radial gradient). */
.mh-manifesto__halo-1,
.mh-manifesto__halo-2 {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
}
.mh-manifesto__halo-1 {
    left: 376px;
    top: -664px;
    width: 1254px;
    height: 948px;
    transform: rotate(30deg);
    background-image: url('/images/manifesto-halo-1.svg');
}
.mh-manifesto__halo-2 {
    left: -636px;
    top: 340px;
    width: 1730px;
    height: 1308px;
    transform: rotate(-165deg);
    background-image: url('/images/manifesto-halo-2.svg');
}
.mh-manifesto__content {
    position: absolute;
    left: 112px;
    top: 50%;
    transform: translateY(-50%);
    width: 608px;
    display: flex;
    flex-direction: column;
    gap: 104px;
    align-items: flex-start;
    z-index: 2;
}
.mh-manifesto__head {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: flex-start;
    width: 100%;
}
.mh-manifesto__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 56px;
    line-height: 64px;
    letter-spacing: -0.01em;
    color: #fff;
    width: 514px;
}
.mh-manifesto__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-right: 24px;
    width: 100%;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #fff;
}
.mh-manifesto__result-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-right: 24px;
    align-items: flex-start;
    width: 100%;
}
.mh-manifesto__result {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    color: #fff;
}
.mh-manifesto__result-label {
    font-weight: 700;
}
.mh-manifesto__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 16px 20px;
    border-radius: 100px;
    background: #fff;
    color: #0c0c0c;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}
.mh-manifesto__cta:hover {
    opacity: 0.92;
}
.mh-manifesto__mark {
    position: absolute;
    left: 1152px;
    top: 722px;
    width: 120px;
    height: 120px;
    pointer-events: none;
    z-index: 1;
}

/* Responsive fallback for narrow viewports */
@media (max-width: 1199px) {
    .mh-manifesto {
        min-height: 0;
        padding: 80px 48px;
    }
    .mh-manifesto__content {
        position: static;
        transform: none;
        width: 100%;
        max-width: 608px;
        gap: 64px;
    }
    .mh-manifesto__title { width: 100%; }
    .mh-manifesto__mark { display: none; }
}

/* =========================================================
   Founder bio — Figma Frame 174:280 inside Frame 140.
   Two columns flex px-88 gap-48, dark background.
   ========================================================= */
.mh-founder {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 0 88px;
    align-items: stretch;
    color: #fff;
}
@media (min-width: 1024px) {
    .mh-founder { flex-direction: row; }
}
.mh-founder__col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.mh-founder__col--bio { gap: 40px; }
.mh-founder__headline {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    max-width: 584px;
    letter-spacing: -0.01em;
}
.mh-founder__headline .regular { font-weight: 400; }
.mh-founder__headline .name { color: #df4015; font-weight: 700; }
.mh-founder__kicker {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
}
.mh-founder__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 16px;
    color: #fff;
    align-self: stretch;
}
.mh-founder__body p { line-height: 24px; }
.mh-founder__body p + p { line-height: 28px; }
.mh-founder__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 16px 20px;
    border-radius: 100px;
    background: radial-gradient(circle at 95% 100%, #df4015 0%, #af2f15 50%, #7f1e14 100%);
    color: #fff;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    align-self: flex-start;
}
.mh-founder__cta:hover { opacity: 0.92; }

/* =========================================================
   Footer nav + contact — Figma Frame 174:269.
   flex justify-end with two 416.67 columns, gap 31.
   Contact uses Montserrat, white 80% opacity.
   ========================================================= */
.mh-foot-grid {
    display: flex;
    justify-content: flex-end;
    gap: 31px;
    flex-wrap: wrap;
}
.mh-foot-nav {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: 416.667px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.01em;
}
.mh-foot-nav a {
    display: block;
    width: 100%;
    max-width: 375px;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.mh-foot-nav a:hover { opacity: 0.7; }
.mh-foot-nav a.is-current {
    /* Radial gradient text per Figma (bright orange center → dark red) */
    background: radial-gradient(ellipse at 85% 100%, #df4015 0%, #af2f15 50%, #7f1e14 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.mh-foot-contact {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 416.667px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 20px;
    line-height: 25px;
}
.mh-foot-contact__label {
    font-weight: 600;
    color: #fff;
}
.mh-foot-contact__value {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
}
.mh-foot-contact__value a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.mh-foot-contact__value a:hover { color: #fff; }
/* Country code prefix gets a reliable visible gap from the digits that follow.
   Montserrat's space glyph reads as near-zero width between "+1" and a digit
   run, so we use margin instead of depending on a regular or &nbsp; space. */
.mh-tel-cc { margin-right: 0.35em; }

/* Legal info strip — Figma Frame 174:266 */
.mh-foot-legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.21px;
    color: rgba(255, 255, 255, 0.8);
    gap: 16px;
    flex-wrap: wrap;
}
.mh-foot-legal a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.mh-foot-legal a:hover { color: #fff; }
.mh-foot-legal__links {
    display: inline-flex;
    gap: 40px;
}

/* =========================================================
   Closing interior image — Figma Frame 174:264.
   Full-bleed lifestyle photo below the legal strip.
   Figma: 1790x979 positioned with 175px negative x (bleeds
   beyond the 1440 artboard on both sides) — we use 100vw here.
   ========================================================= */
.mh-closing {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 0;
    height: clamp(460px, 41vw, 790px);
    overflow: visible; /* allow watermark to bleed above the image */
    background: #0a1219;
}
.mh-closing__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: block;
    z-index: 0;
}
/* Big-screen asset (bg_footer.jpg) already has the morehaus wordmark
   baked into its top section — hide the SVG watermark overlay there to
   avoid a duplicate. The smaller frame76.png has no wordmark, so the
   overlay still shows below 1441px. */
@media (min-width: 1441px) {
    .mh-closing__watermark-clip { display: none; }
}
/* Morehaus wordmark cutout — Figma Subtract 174:265.
   SVG is 1440×2433 tall with the letterforms in the bottom ~200px.
   Clip container shows only the bottom slice so the rest of the
   dark-filled SVG doesn't block the footer nav/legal above it. */
.mh-closing__watermark-clip {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;             /* aligned to the top of the closing image */
    height: 220px;      /* tight to the letters so the SVG's dark fill above doesn't leak up */
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}
.mh-closing__watermark {
    position: absolute;
    left: 50%;
    bottom: 0;          /* anchor to the bottom of the clip box = letters visible */
    transform: translateX(-50%);
    width: 100%;
    max-width: 1440px;
    height: auto;
}

/* =========================================================
   MOBILE OVERRIDES — Figma mobile frame at 393px (iPhone).
   Breakpoint: < 768px (below Tailwind's md:).
   Targets Home page sections; same patterns apply to other
   pages since they share partial structure.
   ========================================================= */
@media (max-width: 767px) {

    /* ----- HERO (all four pages) -----
       Desktop: absolute-positioned title (top:281/397) + button (top:822).
       Mobile: collapse to vertical flow with padding.
       Target all four heroes via style-attribute selector. */
    section[style*="min-height: 880px"][style*="margin-top: -88px"] {
        min-height: 906px !important;
        padding: 132px 0 64px !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 80px;
    }
    section[style*="min-height: 880px"][style*="margin-top: -88px"] > div.z-10 {
        position: static !important;
        top: auto !important;
    }
    /* Stack the two hero CTAs vertically on mobile (Figma 427:650). */
    .mh-hero-buttons {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    /* Tighten side padding inside hero on mobile so text wraps to match
       Figma (377px content area on a 393px frame, i.e. 8px each side). */
    section[style*="margin-top: -88px"] .container-main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    /* Hero scrim — match Figma frame 423:580.
       Figma keeps the photo bright across the whole frame (bricks and
       walking figure clearly visible) with only a soft, very large radial
       vignette under the headline area. Keep the flat tint light and the
       radial peak modest so the image isn't overdarkened. */
    .mh-hero-scrim {
        background: none !important;
    }
    /* Brighten the mobile hero image so the brickwork, sidewalk and walking
       figure all read clearly — matches the Figma editor preview which is
       brighter than the raw source asset. */
    section[style*="margin-top: -88px"] picture img {
        filter: brightness(1.28) saturate(1.08);
    }
    /* Hero title */
    section[style*="margin-top: -88px"] h1 {
        font-size: 40px !important;
        line-height: 48px !important;
    }
    /* Hero subtitle */
    section[style*="margin-top: -88px"] p.font-medium {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    /* ----- INTRO (home page) -----
       Gradient is in the base rule and stretches via preserveAspectRatio. */
    .mh-intro-text {
        font-size: 28px !important;
        line-height: 36px !important;
    }

    /* ----- FEATURE ROWS (home) -----
       Already stack via flex-col at mobile; shrink image heights. */
    .mh-row-more__img,
    .mh-row-health__img { height: 244px !important; }
    .mh-row-pair__img {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 501px !important;
        object-fit: cover !important;
    }
    /* Rooftop (intentional-living-2) — Figma frame 427:727 zooms the source
       to 250.61% width and shifts it left by 70.18% to crop out the brick
       walls and tighten the framing on the dining table. */
    .mh-figcrop--rooftop > img {
        position: absolute;
        top: 0;
        left: -70.18%;
        width: 250.61%;
        height: 100%;
        max-width: none;
        object-fit: fill;
    }
    /* Figma mobile (frames 427:696 / 427:697) places the two image cards
       BEFORE the section text and stacks them vertically. Same treatment
       applies to "Spaces for work, movement, and reset" and "Designed for
       intentional living" since they share .mh-row-pair. */
    .mh-row-pair {
        flex-direction: column-reverse !important;
        gap: 32px !important;
    }
    .mh-row-pair__imgs {
        flex-direction: column !important;
        gap: 16px !important;
    }
    /* Tighten the inter-section gap on mobile (desktop uses gap-[200px]).
       Figma mobile uses 72px between feature sections. */
    .mh-features-stack {
        gap: 72px !important;
    }
    .mh-feature-title {
        font-size: 28px !important;
        line-height: 36px !important;
    }
    .mh-row-health__text {
        padding: 24px 16px !important;
        height: auto !important;
    }

    /* ----- PROJECT TYPES (home Single-Family / Townhomes) -----
       Desktop: full-bleed 984px section with absolute-positioned
       title card, switcher, and body. Mobile: natural vertical flow. */
    .mh-project {
        height: auto !important;
        padding: 96px 16px 48px;
    }
    /* Same fix as the hero: source images for the project sections are
       dark, and the desktop scrim's two corner vignettes pile on top of
       that. Drop the scrim and lift the image's brightness so the photo
       reads closer to the Figma render. */
    .mh-project__scrim {
        background: none !important;
    }
    .mh-project__bg {
        filter: brightness(1.22) saturate(1.06);
    }
    .mh-project__switcher {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: fit-content;
        margin: 0 auto 24px;
        padding: 4px !important;
        gap: 4px !important;
        flex-wrap: wrap;
    }
    .mh-project__tab {
        padding: 10px 14px !important;
        font-size: 14px !important;
        line-height: 18px !important;
    }
    .mh-project__title-card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 16px !important;
        margin-bottom: 320px; /* room for body copy below image */
    }
    .mh-project__body {
        padding: 0 !important;
    }
    .mh-project__title {
        font-size: 40px !important;
        line-height: 48px !important;
    }
    .mh-project__subtitle,
    .mh-hero-subtitle {
        font-size: 18px !important;
        line-height: 26px !important;
    }
    .mh-project__body {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        margin-top: 24px;
    }
    .mh-project__body-text {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    /* ----- "Two ways to live" title ----- */
    .mh-projects-title-svg {
        max-width: 100%;
    }

    /* ----- MANIFESTO CARD -----
       Already has 1199px fallback; tighten further for phones. */
    .mh-manifesto {
        padding: 48px 24px !important;
        border-radius: 20px !important;
    }
    .mh-manifesto__title {
        font-size: 36px !important;
        line-height: 42px !important;
        width: 100% !important;
    }
    .mh-manifesto__body {
        font-size: 16px !important;
        line-height: 22px !important;
        padding-right: 0 !important;
    }
    .mh-manifesto__result {
        font-size: 18px !important;
        line-height: 26px !important;
    }
    .mh-manifesto__content { gap: 40px !important; }

    /* ----- FOUNDER BIO ----- */
    .mh-founder { padding: 0 16px !important; gap: 32px !important; }
    .mh-founder__headline {
        font-size: 32px !important;
        line-height: 40px !important;
    }
    .mh-founder__kicker {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    .mh-founder__cta {
        width: 100%;
        font-size: 16px !important;
        height: 48px !important;
    }

    /* ----- FOOTER -----
       Nav and contact columns stack full-width on mobile. */
    .mh-foot-grid {
        flex-direction: column !important;
        gap: 40px !important;
    }
    .mh-foot-nav,
    .mh-foot-contact {
        max-width: 100% !important;
    }
    .mh-foot-nav {
        font-size: 32px !important;
        line-height: 40px !important;
        gap: 24px !important;
    }
    .mh-foot-nav a { max-width: 100%; }
    .mh-foot-contact { font-size: 16px !important; line-height: 22px !important; }
    .mh-foot-legal {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 16px !important;
        gap: 12px !important;
    }
    .mh-foot-legal__links { gap: 16px !important; }

    /* ----- CLOSING IMAGE -----
       Keep full-bleed; watermark auto-scales. */
    .mh-closing {
        height: clamp(320px, 80vw, 520px) !important;
        margin-top: 0 !important;
    }
    .mh-closing__watermark-clip {
        height: 140px !important;
    }

    /* =============================
       DEVELOPERS page — mobile
       ============================= */
    .mh-dev-pitch {
        padding: 0 0 48px !important;
        gap: 48px !important;
    }
    .mh-dev-pitch__top {
        gap: 48px !important;
    }
    .mh-dev-pitch__title {
        font-size: 28px !important;
        line-height: 36px !important;
    }
    .mh-dev-pitch__body {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    /* Dark "Standing out…" challenge card */
    .mh-dev-challenge {
        padding: 48px 24px !important;
        border-radius: 20px !important;
    }
    .mh-dev-challenge__title {
        font-size: 36px !important;
        line-height: 42px !important;
        margin-bottom: 40px !important;
        max-width: 100% !important;
    }
    .mh-dev-challenge__grid {
        gap: 32px !important;
    }
    .mh-dev-challenge__col {
        gap: 20px !important;
    }
    .mh-dev-challenge__col li {
        font-size: 18px !important;
        line-height: 26px !important;
    }

    /* =============================
       MOTTO page — mobile
       ============================= */
    /* Feature tiles: already collapse to 1fr; tighten title + body */
    .mh-motto-features { gap: 40px !important; }
    .mh-motto-feature { max-width: 100% !important; }
    .mh-motto-feature p {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    /* Integrated model section */
    .mh-motto-model {
        padding: 0 !important;
    }
    .mh-motto-model__head {
        font-size: 28px !important;
        line-height: 36px !important;
        padding: 0 !important;
        margin-bottom: 32px !important;
    }
    .mh-motto-model__figure {
        height: 244px !important;
        border-radius: 20px !important;
        margin-bottom: 16px !important;
    }

    /* Accordion: slimmer padding, smaller titles */
    .mh-motto-accordion {
        padding: 0 !important;
    }
    .mh-motto-accordion__summary {
        padding: 20px 0 !important;
        gap: 16px !important;
    }
    .mh-motto-accordion__title {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    .mh-motto-accordion__icon {
        margin-top: 2px !important;
        width: 20px !important;
        height: 20px !important;
    }
    .mh-motto-accordion__body {
        padding: 0 0 24px 24px !important;
        gap: 10px !important;
    }
    .mh-motto-accordion__body li {
        font-size: 14px !important;
        line-height: 22px !important;
    }

    /* =============================
       ABOUT US page — mobile
       ============================= */
    .mh-about-intro {
        padding: 64px 0 48px !important;
    }
    .mh-about-intro__head {
        font-size: 40px !important;
        line-height: 48px !important;
        max-width: 100% !important;
        margin-bottom: 16px !important;
    }
    .mh-about-intro__body {
        font-size: 18px !important;
        line-height: 28px !important;
        gap: 16px !important;
    }

    /* Founder section — portrait centered above quote */
    .mh-about-founder {
        padding: 32px 0 !important;
    }
    .mh-about-founder__row {
        gap: 32px !important;
    }
    .mh-about-founder__portrait {
        margin: 0 auto !important;
        max-width: 392px !important;
        height: auto !important;
        border-radius: 20px !important;
    }
    .mh-about-founder__quote {
        padding-top: 0 !important;
        max-width: 100% !important;
    }
    .mh-about-founder__text {
        font-size: 16px !important;
        line-height: 24px !important;
    }
    .mh-about-founder__text p:first-child {
        font-size: 18px !important;
        line-height: 28px !important;
    }
    .mh-about-founder__name { font-size: 18px !important; }
    .mh-about-founder__role { font-size: 14px !important; }
    .mh-about-founder__creds { font-size: 13px !important; }

    /* Our Mission section */
    .mh-about-mission {
        padding: 48px 0 80px !important;
    }
    .mh-about-mission__head { margin-bottom: 40px !important; }
    .mh-about-mission__title {
        font-size: 40px !important;
        line-height: 48px !important;
        margin-bottom: 16px !important;
    }
    .mh-about-mission__lede {
        font-size: 18px !important;
        line-height: 28px !important;
    }
    .mh-about-mission__grid { gap: 40px !important; }
    .mh-about-mission__col { max-width: 100% !important; }
    .mh-about-mission__col-title {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    .mh-about-mission__col-body {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    /* "What the morehaus model includes" */
    .mh-dev-includes {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }
    .mh-dev-includes__head {
        font-size: 36px !important;
        line-height: 1.15 !important;
        margin-bottom: 40px !important;
    }
    .mh-dev-includes__grid {
        gap: 40px !important;
    }
    .mh-dev-includes__title {
        font-size: 22px !important;
        line-height: 30px !important;
    }
    .mh-dev-includes__item p {
        font-size: 16px !important;
        line-height: 24px !important;
    }
}

/* Small-phone tightening (≤ 380px) */
@media (max-width: 380px) {
    section[style*="margin-top: -88px"] h1 {
        font-size: 32px !important;
        line-height: 40px !important;
    }
    .mh-projects-title-svg { max-width: 95%; }
}

/* =========================================================
   Legal pages — Privacy Policy, Legal, Terms.
   Cream background, narrow reading column, brand typography.
   ========================================================= */
.mh-legal {
    background: #f1ead8;
    padding: clamp(80px, 10vh, 140px) 0 clamp(80px, 10vh, 140px);
    min-height: calc(100vh - 88px);
}
.mh-legal__inner {
    max-width: 800px;
    margin: 0 auto;
}
.mh-legal__head { margin-bottom: 48px; }
.mh-legal__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 2.5rem + 2vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #0c0c0c;
    margin-bottom: 8px;
}
.mh-legal__effective {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #5a5a5a;
}
.mh-legal__body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #2b2b2b;
}
.mh-legal__body p { margin-bottom: 16px; }
.mh-legal__body a { color: #df4015; text-decoration: underline; text-underline-offset: 3px; }
.mh-legal__body a:hover { color: #af2f15; }
.mh-legal__body strong { font-weight: 700; color: #0c0c0c; }
.mh-legal__body ul {
    list-style: disc;
    padding-left: 24px;
    margin: 0 0 24px;
}
.mh-legal__body li { margin-bottom: 8px; }
.mh-legal__h2 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 1rem + 0.8vw, 24px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #0c0c0c;
    margin: 40px 0 12px;
}
@media (max-width: 767px) {
    .mh-legal { padding: 56px 0 80px !important; }
    .mh-legal__title { font-size: 32px !important; }
    .mh-legal__body { font-size: 15px !important; line-height: 24px !important; }
    .mh-legal__h2 { font-size: 20px !important; margin-top: 32px !important; }
}

/* =========================================================
   Contact page — form on a light section
   ========================================================= */
.mh-contact {
    background: #f1ead8;
    padding: clamp(80px, 10vh, 140px) 0 clamp(80px, 10vh, 140px);
    min-height: calc(100vh - 88px);
}
.mh-contact__inner {
    max-width: 720px;
    margin: 0 auto;
}
.mh-contact__head { margin-bottom: 48px; }
.mh-contact__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 2.5rem + 2vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #0c0c0c;
    margin-bottom: 16px;
}
.mh-contact__lede {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: #2b2b2b;
    max-width: 560px;
}

.mh-contact__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.mh-contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 640px) {
    .mh-contact__grid { grid-template-columns: 1fr 1fr; }
}

.mh-contact__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mh-contact__field label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #0c0c0c;
    letter-spacing: 0.01em;
}
.mh-contact__field label span[aria-hidden] { color: #df4015; margin-left: 2px; }

.mh-contact__field input,
.mh-contact__field textarea {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #0c0c0c;
    background: #fff;
    border: 1px solid rgba(12, 12, 12, 0.15);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}
.mh-contact__field input::placeholder,
.mh-contact__field textarea::placeholder {
    color: rgba(12, 12, 12, 0.4);
}
.mh-contact__field textarea {
    resize: vertical;
    min-height: 140px;
    font-family: inherit;
}
.mh-contact__field input:focus,
.mh-contact__field textarea:focus {
    outline: none;
    border-color: #df4015;
    box-shadow: 0 0 0 3px rgba(223, 64, 21, 0.15);
}
.mh-contact__field input.input-validation-error,
.mh-contact__field textarea.input-validation-error {
    border-color: #df4015;
    background: #fef5f2;
}

.mh-contact__error {
    display: block;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #b53416;
    min-height: 0;
}
.mh-contact__error:empty { display: none; }

.mh-contact__hint {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: rgba(12, 12, 12, 0.55);
    margin: -8px 0 0;
}

.mh-contact__summary {
    background: #fef5f2;
    border: 1px solid rgba(181, 52, 22, 0.35);
    border-radius: 12px;
    padding: 16px 20px;
    color: #7e2a16;
    font-size: 14px;
    line-height: 20px;
}
.mh-contact__summary:empty,
.mh-contact__summary ul:empty { display: none; }
.mh-contact__summary ul { margin: 0; padding: 0; list-style: none; }

.mh-contact__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 16px 24px;
    border-radius: 100px;
    background: radial-gradient(ellipse at 100% 100%, #df4015 0%, #af2f15 50%, #7f1e14 100%);
    color: #fff;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    border: none;
    cursor: pointer;
    align-self: flex-start;
    min-width: 220px;
    transition: opacity 0.2s ease, transform 0.1s ease;
}
.mh-contact__submit:hover { opacity: 0.94; }
.mh-contact__submit:active { transform: translateY(1px); }
.mh-contact__submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Honeypot — hidden from real users but visible to naive bots */
.mh-contact__hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Success panel */
.mh-contact__success {
    background: #fff;
    border: 1px solid rgba(12, 12, 12, 0.08);
    border-radius: 16px;
    padding: 40px 32px;
    text-align: left;
}
.mh-contact__success h2 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: #0c0c0c;
    margin-bottom: 12px;
}
.mh-contact__success p {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #2b2b2b;
}

@media (max-width: 767px) {
    .mh-contact { padding: 56px 0 80px !important; }
    .mh-contact__title { font-size: 36px !important; }
    .mh-contact__lede { font-size: 16px !important; line-height: 24px !important; }
    .mh-contact__submit { width: 100%; }
}

/* =========================================================
   Header — transparent on top of hero photo by default,
   fades to dark/blurred backdrop after the user scrolls past
   the first few pixels. Pages without a dark hero (e.g. the
   Contact form) opt in to the solid look via .mh-header--solid
   (set when ViewData["SolidHeader"] is true).
   The .is-open state used by the mobile menu also forces solid
   so the overlay panel reads cleanly.
   ========================================================= */
.mh-header {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateY(0);
    transition: background-color 0.25s ease, backdrop-filter 0.25s ease, padding 0.25s ease, transform 0.3s ease;
}
/* Auto-hide while scrolling DOWN past the hero — reappears on any
   upward scroll (designer note 1, "scroll-up" state). */
.mh-header.mh-header--hidden {
    transform: translateY(-100%);
}
/* Extra breathing room above/below the logo and nav while the header is
   floating over the hero image. Collapses back to flush when the header
   gains its dark backdrop (scrolled, solid pages, or mobile menu open). */
.mh-header:not(.mh-header--scrolled):not(.mh-header--solid):not(.is-open) {
    padding-top: 32px;
    padding-bottom: 32px;
}
.mh-header.mh-header--scrolled,
.mh-header.mh-header--solid,
.mh-header.is-open {
    background-color: rgba(26, 26, 26, 0.9); /* bg-brand-dark / 90 */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Desktop nav links + current-page highlight. */
.mh-header__nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 100px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.mh-header__nav-link:hover { background-color: rgba(255, 255, 255, 0.1); }
.mh-header__nav-link.is-current {
    color: #df4015;
}

/* =========================================================
   Hamburger toggle + mobile menu overlay
   Hidden on desktop, revealed at < 768px.
   ========================================================= */
.mh-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 100px;
    border: 0.5px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.mh-menu-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.mh-menu-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.mh-menu-toggle__icon {
    display: block;
    transition: transform 0.25s ease;
}
/* Cross animation when menu is open */
header.is-open .mh-menu-toggle__icon { transform: rotate(90deg); }

.mh-mobile-menu {
    display: none;
}
.mh-mobile-menu[hidden] { display: none; }

/* =========================================================
   Header + container tweaks for mobile.
   Figma's mobile frames omit a desktop-style nav (it lives
   in the footer on small screens). Hide the top nav tabs
   and slim the header to a simple logo bar.
   ========================================================= */
@media (max-width: 767px) {
    header.fixed > .container-main {
        height: 64px !important;
    }
    /* Desktop nav tabs hidden on mobile; keep the mobile overlay nav visible */
    .mh-header__desktop-nav { display: none !important; }
    /* Show hamburger toggle */
    .mh-menu-toggle { display: inline-flex !important; }
    /* Spacer below header: match new 64px height */
    header.fixed + div[class*="h-[88px]"] {
        height: 64px !important;
    }
    /* Pull hero up under the shorter mobile header */
    section[style*="margin-top: -88px"] {
        margin-top: -64px !important;
    }
    /* Logo shrinks slightly */
    header.fixed img[alt="Morehaus"] {
        height: 24px !important;
    }

    /* Mobile menu overlay — full-screen dark panel */
    .mh-mobile-menu:not([hidden]) {
        display: flex !important;
        position: fixed;
        inset: 64px 0 0 0;           /* below the header bar */
        z-index: 48;
        background: #020a11;
        padding: 56px 24px 48px;
        flex-direction: column;
    }
    .mh-mobile-menu__nav {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .mh-mobile-menu__nav a {
        color: #fff;
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        font-weight: 700;
        font-size: 40px;
        line-height: 48px;
        letter-spacing: -0.01em;
        text-decoration: none;
    }
    .mh-mobile-menu__nav a:hover { color: #df4015; }

    /* When menu is open, freeze body scroll */
    body.mh-menu-open { overflow: hidden; }

    /* ----- Hero subtitle: 20/30 per Figma mobile (not 16/24 like I had) ----- */
    section[style*="margin-top: -88px"] p.font-medium {
        font-size: 20px !important;
        line-height: 30px !important;
    }
}