/* Arete Mortgage Solutions - Main Styles */

/* Self-hosted fonts (latin subset). Fraunces (display serif) + Hanken Grotesk (UI sans).
   Variable-range @font-face — browser selects weight from a single file.
   Files: assets/fonts/*.woff2 */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fonts/Fraunces-300-700.woff2") format("woff2"); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 600; font-display: swap; src: url("assets/fonts/Fraunces-300-600-italic.woff2") format("woff2"); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/HankenGrotesk-400-700.woff2") format("woff2"); }

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --navy: #152238;
    --red: #E31837;
    --red-dark: #C11430;
    --gold: #C0975A;
    --cream: #FAF7F2;
    --light-gray: #F5F5F5;
    --text: #333;
    --text-light: #666;
}

body {
    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--text);
    line-height: 1.8;
    background: white;
}

h1, h2, h3, h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    line-height: 1.3;
}

/* Navigation */
nav {
    background: white;
    padding: 5px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.logo img {
    height: 60px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 40px;
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: var(--navy);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    white-space: nowrap;
    text-transform: uppercase;
    transition: color 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--red);
}

.nav-cta {
    background: var(--navy);
    color: white !important;
    padding: 12px 28px;
    border-radius: 0;
}

.nav-cta:hover {
    background: var(--red);
    color: white !important;
}

.nav-cta.active {
    background: var(--red);
}

/* Mobile Navigation */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--navy);
}

/* The nav switches to the hamburger at a WIDER breakpoint than everything else
   on the site, and it has to.

   The desktop nav needs 996px to lay out. Below that the "Get Started" button
   runs off the right edge — measured on 2026-08-20: at 769-925px it was 0 of
   93px visible, and the document overflowed to 866px causing sideways scroll on
   every page. That band is iPhone landscape (844, 852, 926) and iPad portrait
   (820, 834), so the primary call to action was invisible to a large part of a
   mortgage site's audience.

   1023px, not 996px, so there is margin — and 1024px is a real device width
   (iPad landscape) that lays out cleanly. Do not merge this block back into the
   768px queries below; they are for content, and content is fine at 800px. */
@media (max-width: 1023px) {
    nav {
        padding: 15px 20px;
    }

    .mobile-menu-btn {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        gap: 0;
        border-top: 1px solid #eee;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        border-bottom: 1px solid #eee;
    }

    .nav-links a {
        display: block;
        padding: 20px;
    }

    .nav-cta {
        margin: 20px;
        text-align: center;
    }
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, var(--navy) 0%, #111d31 100%);
    color: white;
    padding: 120px 60px 80px;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.03)"/></svg>');
    background-size: 50px 50px;
}

.hero-content {
    max-width: 900px;
    position: relative;
    z-index: 1;
}

.hero-tagline {
    font-size: 14px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 30px;
    font-weight: 500;
}

.hero h1 {
    font-size: 64px;
    font-weight: 400;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.hero-subtitle {
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 20px;
    opacity: 0.9;
    font-style: italic;
    font-family: 'Fraunces', serif;
}

.hero p {
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto 50px;
    opacity: 0.85;
    line-height: 1.9;
    font-weight: 300;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .hero {
        padding: 100px 20px 60px;
    }

    .hero h1 {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .hero p {
        font-size: 16px;
    }
}

/* Case studies — the decision path is the page's signature element. */
.case-study-hero {
    margin-top: 71px;
    padding: 96px 60px 88px;
    color: white;
    background:
        linear-gradient(105deg, rgba(16, 28, 46, 0.98) 0%, rgba(21, 34, 56, 0.94) 62%, rgba(21, 34, 56, 0.88) 100%),
        url("assets/fthb/your-first-home.jpg") center 47% / cover;
}

.case-study-hero-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.55fr 0.75fr;
    gap: 90px;
    align-items: end;
}

.case-study-eyebrow,
.case-study-section-label,
.case-study-meta,
.case-study-path-label {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.case-study-eyebrow {
    margin-bottom: 22px;
    color: #FF3152;
}

.case-study-hero h1 {
    max-width: 760px;
    font-size: clamp(44px, 5.8vw, 76px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.case-study-hero-intro {
    margin-bottom: 12px;
    padding-left: 26px;
    border-left: 3px solid var(--red);
    font-size: 18px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.86);
}

.case-study-section {
    width: min(1180px, calc(100% - 64px));
    margin-inline: auto;
}

.case-study-reader-note {
    position: relative;
    z-index: 2;
    margin-top: -34px;
    display: grid;
    grid-template-columns: 190px 1fr;
    background: white;
    border: 1px solid #E2E5E9;
    box-shadow: 0 18px 48px rgba(21, 34, 56, 0.12);
}

.case-study-reader-note h2 {
    display: flex;
    align-items: center;
    padding: 30px;
    background: var(--cream);
    color: var(--navy);
    font-size: 21px;
}

.case-study-reader-note p {
    padding: 26px 34px;
    color: #515B67;
    font-size: 14px;
    line-height: 1.75;
}

.case-study-reader-note strong {
    color: var(--navy);
}

.case-study-intro {
    padding: 104px 0 58px;
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 80px;
    align-items: start;
}

.case-study-section-label {
    margin-top: 6px;
    color: var(--red-dark);
}

.case-study-intro h2 {
    margin-bottom: 22px;
    color: var(--navy);
    font-size: clamp(32px, 4vw, 49px);
    line-height: 1.12;
}

.case-study-intro div > p {
    max-width: 700px;
    color: var(--text-light);
    font-size: 17px;
}

.case-study-list {
    padding-bottom: 116px;
}

.case-study {
    margin-top: 44px;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    background: white;
    border: 1px solid #DDE1E6;
    box-shadow: 0 14px 42px rgba(21, 34, 56, 0.07);
}

.case-study:nth-child(even) {
    grid-template-columns: 1.2fr 0.8fr;
}

.case-study:nth-child(even) .case-study-visual {
    order: 2;
}

.case-study-visual {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    background: var(--navy);
}

.case-study-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.case-study-number {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 18px 26px;
    color: white;
    background: var(--red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.case-study-body {
    padding: 55px 64px 48px;
    align-self: center;
}

.case-study-meta {
    margin-bottom: 18px;
    color: var(--gold);
}

.case-study-body > h2 {
    margin-bottom: 22px;
    color: var(--navy);
    font-size: clamp(31px, 3.7vw, 48px);
    line-height: 1.12;
}

.case-study-summary {
    color: #5A6470;
    font-size: 16px;
    line-height: 1.9;
}

.case-study-path {
    margin: 32px 0 28px;
    padding: 22px 24px;
    background: var(--cream);
    border-left: 3px solid var(--gold);
}

.case-study-path-label {
    display: block;
    margin-bottom: 14px;
    color: var(--navy);
    font-size: 10px;
}

.case-study-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
    color: #53606D;
    font-size: 12px;
    font-weight: 600;
}

.case-study-steps strong {
    padding: 5px 10px;
    color: white;
    background: var(--red);
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 700;
}

.case-study-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #D9DDE2;
}

.case-study-facts > div {
    padding: 16px 18px;
}

.case-study-facts > div + div {
    border-left: 1px solid #D9DDE2;
}

.case-study-facts strong,
.case-study-facts span {
    display: block;
}

.case-study-facts strong {
    margin-bottom: 2px;
    color: var(--navy);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 24px;
    font-weight: 600;
}

.case-study-facts span {
    color: #69737D;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.case-study-detail {
    margin-top: 30px;
    border-top: 1px solid #D9DDE2;
}

.case-study-detail summary {
    position: relative;
    padding: 22px 42px 12px 0;
    color: var(--navy);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    list-style: none;
    text-transform: uppercase;
}

.case-study-detail summary::-webkit-details-marker {
    display: none;
}

.case-study-detail summary::after {
    content: '+';
    position: absolute;
    right: 6px;
    color: var(--red);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}

.case-study-detail[open] summary::after {
    content: '−';
}

.case-study-detail-grid {
    padding: 18px 0 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.case-study-detail-grid h3 {
    margin-bottom: 8px;
    color: var(--navy);
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.case-study-detail-grid p {
    color: #5F6873;
    font-size: 14px;
    line-height: 1.75;
}

.case-study-principle {
    padding: 108px 60px;
    text-align: center;
    background: var(--cream);
}

.case-study-principle blockquote {
    max-width: 840px;
    margin: 0 auto 24px;
    color: var(--navy);
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 500;
    line-height: 1.08;
}

.case-study-principle p {
    color: var(--red-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.case-study-caution {
    padding: 34px 60px;
    background: #F2F4F6;
}

.case-study-caution p {
    max-width: 980px;
    margin: 0 auto;
    color: #5B6570;
    font-size: 13px;
    line-height: 1.8;
    text-align: center;
}

.case-study-cta {
    padding: 92px 40px 100px;
    color: white;
    text-align: center;
    background: var(--navy);
}

.case-study-cta h2 {
    margin-bottom: 18px;
    font-size: clamp(36px, 5vw, 58px);
}

.case-study-cta p {
    max-width: 720px;
    margin: 0 auto 34px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
}

@media (max-width: 1400px) {
    nav {
        padding-inline: 30px;
    }

    .nav-links {
        gap: 20px;
    }
}

@media (max-width: 1180px) {
    .case-study-body {
        padding-inline: 42px;
    }
}

@media (max-width: 980px) {
    .case-study-hero-inner,
    .case-study-intro {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .case-study-hero-intro {
        max-width: 650px;
    }

    .case-study,
    .case-study:nth-child(even) {
        grid-template-columns: 0.85fr 1.15fr;
    }
}

@media (max-width: 768px) {
    .case-study-hero {
        margin-top: 91px;
        padding: 70px 24px 76px;
    }

    .case-study-hero h1 {
        font-size: 42px;
    }

    .case-study-section {
        width: min(100% - 28px, 1180px);
    }

    .case-study-reader-note {
        margin-top: 0;
        grid-template-columns: 1fr;
    }

    .case-study-reader-note h2 {
        padding: 24px 24px 12px;
        background: white;
    }

    .case-study-reader-note p {
        padding: 0 24px 24px;
    }

    .case-study-intro {
        padding-top: 76px;
    }

    .case-study,
    .case-study:nth-child(even) {
        display: flex;
        flex-direction: column;
    }

    .case-study:nth-child(even) .case-study-visual {
        order: 0;
    }

    .case-study-visual {
        min-height: 270px;
        max-height: 330px;
    }

    .case-study-body {
        padding: 34px 26px 40px;
    }

    .case-study-facts,
    .case-study-detail-grid {
        grid-template-columns: 1fr;
    }

    .case-study-facts > div + div {
        border-top: 1px solid #D9DDE2;
        border-left: 0;
    }

    .case-study-principle {
        padding: 82px 24px;
    }

    .case-study-caution,
    .case-study-cta {
        padding-inline: 24px;
    }
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background: var(--red);
    color: white;
    padding: 18px 45px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s;
    border: 2px solid var(--red);
}

.btn-primary:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.btn-secondary {
    display: inline-block;
    background: transparent;
    color: white;
    padding: 18px 45px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 2px solid rgba(255,255,255,0.4);
    transition: all 0.3s;
}

.btn-secondary:hover {
    border-color: white;
    background: rgba(255,255,255,0.1);
}

/* Page Header (for interior pages) */
.page-header {
    padding: 180px 60px 100px;
    background: linear-gradient(135deg, var(--navy) 0%, #111d31 100%);
    color: white;
    text-align: center;
}

.page-header h1 {
    font-size: 56px;
    margin-bottom: 20px;
    font-weight: 400;
    letter-spacing: 2px;
}

.page-header p {
    font-size: 20px;
    opacity: 0.8;
    font-style: italic;
    font-family: 'Fraunces', serif;
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .page-header {
        padding: 120px 20px 60px;
    }

    .page-header h1 {
        font-size: 36px;
    }
}

/* Common Elements */
.divider {
    width: 60px;
    height: 2px;
    background: var(--red);
    margin: 0 auto 30px;
}

.section-label {
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--red-dark);
    margin-bottom: 20px;
    font-weight: 600;
}

/* Philosophy Section */
.philosophy {
    padding: 120px 60px;
    background: white;
}

.philosophy-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.philosophy h2 {
    font-size: 48px;
    color: var(--navy);
    margin-bottom: 40px;
}

.philosophy p {
    font-size: 19px;
    color: var(--text-light);
    margin-bottom: 25px;
    line-height: 1.9;
}

@media (max-width: 768px) {
    .philosophy {
        padding: 60px 20px;
    }

    .philosophy h2 {
        font-size: 32px;
    }

    .philosophy p {
        font-size: 16px;
    }
}

/* Pillars Section */
.pillars {
    padding: 100px 60px;
    background: var(--cream);
}

/* auto-fit, not repeat(3, 1fr). A 1fr column has an implicit auto minimum, so it
   cannot shrink below its content's min-content width — at 769-925px the three
   columns refused to shrink and pushed the page 22px wider than the viewport,
   giving every visitor sideways scroll. auto-fit reflows 3 -> 2 -> 1 on its own
   and cannot overflow, so no breakpoint has to guess where that happens. */
.pillars-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 60px;
}

.pillar {
    text-align: center;
    padding: 50px 40px;
    background: white;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

.pillar-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    border: 2px solid var(--navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--navy);
}

.pillar-icon i {
    line-height: 1;
}

.pillar h3 {
    font-size: 26px;
    color: var(--navy);
    margin-bottom: 20px;
}

.pillar p {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.8;
}

@media (max-width: 768px) {
    .pillars {
        padding: 60px 20px;
    }

    .pillars-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pillar {
        padding: 30px 20px;
    }
}

/* Who We Serve */
.serve {
    padding: 120px 60px;
    background: white;
}

.serve-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 80px;
}

.serve h2 {
    font-size: 48px;
    color: var(--navy);
    margin-bottom: 20px;
}

.serve-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.serve-card {
    padding: 45px;
    border: 1px solid #eee;
    transition: all 0.3s;
}

.serve-card:hover {
    border-color: var(--navy);
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
}

.serve-card h3 {
    font-size: 24px;
    color: var(--navy);
    margin-bottom: 15px;
}

.serve-card p {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.8;
}

@media (max-width: 768px) {
    .serve {
        padding: 60px 20px;
    }

    .serve h2 {
        font-size: 32px;
    }

    .serve-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .serve-card {
        padding: 30px 20px;
    }
}

/* CTA Section */
.cta-section {
    padding: 120px 60px;
    background: var(--navy);
    text-align: center;
    color: white;
}

.cta-section h2 {
    font-size: 48px;
    margin-bottom: 25px;
}

.cta-section p {
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto 45px;
    opacity: 0.85;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .cta-section {
        padding: 60px 20px;
    }

    .cta-section h2 {
        font-size: 32px;
    }
}

/* Footer */
footer {
    text-align: center;
}

.footer-brand {
    background: #111d31;
    color: white;
    padding: 60px;
}

/* Compliance strip — required by Fair Housing / GLBA / NMLS / ECOA */
.footer-compliance {
    background: #FAF7F2;
    color: #152238;
    padding: 36px 60px 24px;
    text-align: left;
    border-top: 4px solid #E31837;
}

.compliance-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1.4fr 1fr;
    gap: 36px;
    align-items: center;
}

.compliance-col strong {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    /* #C11430 (not #E31837): at 11px bold on cream, the brighter red is 4.41:1 — just under
       the 4.5:1 WCAG AA threshold. The darker red clears it. (axe scan, 2026-08-01) */
    color: #C11430;
    margin-bottom: 6px;
    font-weight: 700;
}

.compliance-eho-col {
    display: flex;
    gap: 14px;
    align-items: center;
}

.eho-mark {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.compliance-text {
    font-size: 12px;
    line-height: 1.5;
    color: #152238;
}

.compliance-licensing-col .lic-line {
    font-size: 12px;
    color: #152238;
    line-height: 1.7;
}

/* inline-block plus vertical padding so these clear the 24px minimum target
   size (WCAG 2.2 SC 2.5.8) on a phone. At 12px/1.7 the "Verify on NMLS Consumer
   Access" link was a 16px-tall strip with ~18.6px of safe space around it —
   measured 2026-08-20, and it is the licence-verification link, so it is the
   one people most need to hit on a small screen. Padding, not line-height: it
   grows the hit area without opening gaps in the block. */
.compliance-licensing-col a {
    color: #152238;
    text-decoration: underline;
    display: inline-block;
    padding: 5px 0;
}

.compliance-licensing-col .pending {
    color: #b3261e;
    font-style: italic;
}

.compliance-mba-col {
    text-align: right;
}

.mba-mark {
    width: 140px;
    height: auto;
    /* MBA usage guide: min 0.5" height, black-and-gold only, no patterns, clear space = width of M */
}

.compliance-fineprint {
    max-width: 1100px;
    margin: 28px auto 0;
    padding-top: 18px;
    border-top: 1px solid #E0D8C7;
    text-align: center;
}

.compliance-fineprint p {
    font-size: 10px;
    color: #5a6573;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 900px;
}

@media (max-width: 768px) {
    .compliance-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }
    .compliance-eho-col {
        justify-content: center;
        flex-direction: column;
    }
    .compliance-mba-col {
        text-align: center;
    }
    .footer-compliance {
        padding: 28px 20px;
    }
}

.footer-logo {
    font-family: 'Fraunces', serif;
    font-size: 24px;
    margin-bottom: 20px;
    letter-spacing: 3px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.footer-links a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: white;
}

.footer-copy {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

@media (max-width: 768px) {
    footer {
        padding: 40px 20px;
    }

    .footer-links {
        gap: 20px;
    }
}

/* Story Section (About page) */
.story {
    padding: 100px 60px;
    background: white;
}

.story-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.story h2 {
    font-size: 44px;
    color: var(--navy);
    margin-bottom: 40px;
}

.story p {
    font-size: 18px;
    color: var(--text-light);
    margin-bottom: 25px;
    line-height: 1.9;
}

.story p.highlight {
    font-size: 24px;
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: var(--navy);
    margin: 40px 0;
}

/* Meaning Section (About page) */
.meaning {
    padding: 100px 60px;
    background: var(--cream);
}

.meaning-content {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.meaning-text h2 {
    font-size: 44px;
    color: var(--navy);
    margin-bottom: 30px;
}

.meaning-text p {
    font-size: 17px;
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1.9;
}

.meaning-visual {
    text-align: center;
    padding: 60px;
    background: white;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

.meaning-visual .greek {
    font-size: 72px;
    font-family: 'Fraunces', serif;
    color: var(--navy);
    margin-bottom: 20px;
}

.meaning-visual .pronunciation {
    font-size: 18px;
    color: var(--text-light);
    font-style: italic;
    margin-bottom: 10px;
}

.meaning-visual .definition {
    font-size: 16px;
    color: var(--text);
    font-weight: 500;
}

@media (max-width: 768px) {
    .meaning {
        padding: 60px 20px;
    }

    .meaning-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .meaning-visual {
        padding: 40px 20px;
    }

    .meaning-visual .greek {
        font-size: 48px;
    }
}

/* Values Section (About page) */
.values {
    padding: 100px 60px;
    background: white;
}

.values-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 70px;
}

.values-header h2 {
    font-size: 44px;
    color: var(--navy);
}

.values-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.value-card {
    padding: 40px;
    border-left: 3px solid var(--red);
    background: var(--cream);
}

.value-card h3 {
    font-size: 28px;
    color: var(--navy);
    margin-bottom: 15px;
}

.value-card p {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.8;
}

@media (max-width: 768px) {
    .values {
        padding: 60px 20px;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .value-card {
        padding: 30px 20px;
    }
}

/* Leadership Section (About page) */
.leadership {
    padding: 100px 60px;
    background: var(--navy);
    color: white;
}

.leadership-header {
    text-align: center;
    margin-bottom: 70px;
}

.leadership-header .section-label {
    color: var(--red);
}

.leadership-header h2 {
    font-size: 44px;
}

.leader-cards {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.leader-card {
    background: rgba(255,255,255,0.05);
    padding: 50px;
    text-align: center;
}

.leader-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: rgba(255,255,255,0.3);
    border: 2px solid rgba(255,255,255,0.2);
}

/* Real headshot variant. Without .has-photo the block keeps rendering the
   initials placeholder, so leaders whose photos haven't arrived yet are
   unaffected. */
.leader-photo.has-photo {
    overflow: hidden;
    border-color: rgba(255,255,255,0.35);
}

.leader-photo.has-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.leader-card h3 {
    font-size: 28px;
    margin-bottom: 8px;
}

.leader-card .title {
    font-size: 14px;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.leader-card p {
    font-size: 15px;
    opacity: 0.8;
    line-height: 1.8;
    margin-bottom: 15px;
}

.leader-card .linkedin {
    display: inline-block;
    margin-top: 20px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--red);
    padding-bottom: 3px;
    transition: all 0.3s;
}

.leader-card .linkedin:hover {
    color: var(--red);
}

@media (max-width: 768px) {
    .leadership {
        padding: 60px 20px;
    }

    .leader-cards {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .leader-card {
        padding: 30px 20px;
    }
}

/* Services Page */
.intro {
    padding: 80px 60px;
    background: white;
    text-align: center;
}

.intro-content {
    max-width: 800px;
    margin: 0 auto;
}

.intro p {
    font-size: 18px;
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 20px;
}

.service-section {
    padding: 100px 60px;
}

.service-section:nth-child(odd) {
    background: var(--cream);
}

.service-section:nth-child(even) {
    background: white;
}

.service-content {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.service-content.reverse {
    direction: rtl;
}

.service-content.reverse > * {
    direction: ltr;
}

.service-text h2 {
    font-size: 40px;
    color: var(--navy);
    margin-bottom: 15px;
}

.service-text .tagline {
    font-size: 18px;
    font-style: italic;
    color: var(--red-dark);
    margin-bottom: 30px;
    font-family: 'Fraunces', serif;
}

.service-text p {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 20px;
}

.service-visual {
    background: var(--navy);
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.service-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.03) 50%, transparent 52%);
    background-size: 20px 20px;
}

.service-icon {
    font-size: 100px;
    color: rgba(255,255,255,0.15);
}

.service-label {
    position: absolute;
    bottom: 30px;
    left: 30px;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 600;
    z-index: 2;
}

/* Photo fills the service-visual panel; label overlays on a navy scrim */
.service-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Photo rotator — a stack of .service-photo in one .service-visual, cross-faded
   by scripts.js. A single static photo needs none of this and is unaffected:
   without .photo-rotator on the parent, the rules below never apply. */
.photo-rotator .service-photo {
    opacity: 0;
    transition: opacity 900ms ease-in-out;
}

.photo-rotator .service-photo.is-active {
    opacity: 1;
}

/* One source image has its headline baked into the artwork. A cover-fit crop
   takes from the top by default and beheads the wording, so that image is
   pinned top and loses ground at the bottom instead. */
.service-photo.pin-top {
    object-position: center top;
}

/* No JS: the first photo must still be visible, so it is opaque until the
   script marks the rotator live. */
.photo-rotator:not(.rotator-ready) .service-photo:first-child {
    opacity: 1;
}

/* Pause control. 44x44 so it is a comfortable touch target well clear of the
   24px minimum, and dark-on-light rather than translucent so it stays legible
   over whichever photo happens to be showing. */
.rotator-pause {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(21, 34, 56, 0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.rotator-pause:hover {
    background: #fff;
    transform: scale(1.06);
}

.rotator-pause:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Nothing is moving under this preference, so a pause button would be a
   control for a state that cannot occur. */
@media (prefers-reduced-motion: reduce) {
    .photo-rotator .service-photo {
        transition: none;
    }

    .rotator-pause {
        display: none;
    }
}

.service-visual:has(.service-photo)::before {
    display: none;
}

.features {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.feature {
    font-size: 14px;
    color: var(--text);
    padding-left: 20px;
    position: relative;
}

.feature::before {
    content: '\25C6';
    position: absolute;
    left: 0;
    color: var(--red);
    font-size: 8px;
    top: 4px;
}

@media (max-width: 768px) {
    .service-section {
        padding: 60px 20px;
    }

    .service-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .service-content.reverse {
        direction: ltr;
    }

    .service-visual {
        height: 200px;
        order: -1;
    }

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

/* Contact Page */
.contact-section {
    padding: 100px 60px;
    background: white;
}

.contact-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
}

.contact-info h2 {
    font-size: 36px;
    color: var(--navy);
    margin-bottom: 25px;
}

.contact-info > p {
    font-size: 17px;
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 40px;
}

.info-block {
    margin-bottom: 35px;
}

.info-block h3 {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 12px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 600;
}

.info-block p, .info-block a {
    font-size: 17px;
    color: var(--text);
    text-decoration: none;
    line-height: 1.7;
}

.info-block a:hover {
    color: var(--red);
}

.social-links {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--navy);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 20px;
    border: 1px solid #ddd;
    transition: all 0.3s;
}

.social-link:hover {
    border-color: var(--navy);
    background: var(--cream);
}

.social-link .icon {
    font-size: 18px;
}

/* Contact Form */
.contact-form-wrapper {
    background: var(--cream);
    padding: 50px;
}

.contact-form-wrapper h2 {
    font-size: 32px;
    color: var(--navy);
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 10px;
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    font-family: 'Hanken Grotesk', sans-serif;
    border: 1px solid #ddd;
    background: white;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--navy);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.btn-submit {
    background: var(--navy);
    color: white;
    padding: 18px 45px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    width: 100%;
    margin-top: 10px;
}

.btn-submit:hover {
    background: var(--red);
}

.form-disclaimer {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 20px;
    font-style: italic;
}

@media (max-width: 768px) {
    .contact-section {
        padding: 60px 20px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-form-wrapper {
        padding: 30px 20px;
    }

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

/* Map/Service Areas Section */
.map-section {
    background: var(--navy);
    padding: 80px 60px;
    text-align: center;
    color: white;
}

.map-section h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.map-section > p {
    font-size: 18px;
    opacity: 0.8;
    margin-bottom: 40px;
}

.service-areas {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.area {
    text-align: center;
}

.area-icon {
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
}

.area h3 {
    font-size: 24px;
    margin-bottom: 5px;
}

.area p {
    font-size: 14px;
    opacity: 0.6;
}

.expansion-note {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 16px;
    opacity: 0.7;
    font-style: italic;
    font-family: 'Fraunces', serif;
}

/* Form Messages */
.form-message {
    background: var(--cream);
    border-left: 3px solid var(--gold);
    padding: 20px 25px;
    margin-bottom: 25px;
}

.form-message p {
    font-size: 15px;
    color: var(--text);
    line-height: 1.7;
    margin: 0;
}

/* Skip Link (keyboard/screen-reader accessibility) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 200000;
    background: var(--navy);
    color: white;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.skip-link:focus {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    overflow: visible;
}

/* Form Success State */
.form-error {
    margin-top: 16px;
    padding: 14px 16px;
    background: #FDF2F4;
    border-left: 3px solid var(--red-dark);
    color: var(--navy);
    font-size: 15px;
    line-height: 1.6;
}

.form-success {
    text-align: center;
    padding: 60px 20px;
}

.form-success h2 {
    font-size: 36px;
    color: var(--navy);
    margin-bottom: 15px;
}

.form-success p {
    font-size: 17px;
    color: var(--text-light);
    line-height: 1.8;
}

/* Legal pages (Privacy Policy, Disclosures) */
.legal {
    padding: 80px 60px 100px;
    background: white;
}

.legal-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
}

.legal-draft-notice {
    background: #FFF8E6;
    border: 1px solid var(--gold);
    border-left: 4px solid var(--gold);
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 50px;
    font-size: 14px;
    color: var(--text);
    line-height: 1.7;
}

.legal-draft-notice strong {
    color: var(--navy);
}

.legal-content h2 {
    font-size: 26px;
    color: var(--navy);
    margin: 48px 0 18px;
    font-weight: 600;
}

.legal-content h2:first-of-type {
    margin-top: 0;
}

.legal-content h3 {
    font-size: 19px;
    color: var(--navy);
    margin: 30px 0 12px;
    font-weight: 600;
}

.legal-content p,
.legal-content li {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 18px;
}

.legal-content ul {
    margin: 0 0 18px 24px;
}

.legal-content li {
    margin-bottom: 10px;
}

/* Underlined, not just red. Red on the #666 body text of a legal page is only
   1.21:1 against the surrounding words, so colour alone does not mark these as
   links for a colourblind reader (WCAG 1.4.1). */
.legal-content a {
    color: var(--red-dark);
    text-decoration: underline;
}

.legal-content a:hover {
    color: var(--red);
}

/* The 404 page's call to action is a link that lives inside .legal-content, so
   the rule above wins on specificity (0-1-1 over .btn-primary's 0-1-0) and
   paints red text on the button's red background — 1.00:1, an invisible
   button. Restore the button's own colours. */
.legal-content a.btn-primary {
    color: white;
    text-decoration: none;
}

.legal-content a.btn-primary:hover {
    color: white;
}

.legal-updated {
    font-size: 14px;
    color: var(--text-light);
    font-style: italic;
    margin-bottom: 8px;
}

/* Sharing table on the GLBA / Reg P notice. The Reg P model form is a table by
   regulation, so it stays a real <table> rather than a styled list — screen
   readers and examiners both expect the row/column relationships. */
.legal-table-scroll {
    overflow-x: auto;
    margin: 28px 0 8px;
}

.legal-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 520px;
    font-size: 15px;
}

.legal-table th,
.legal-table td {
    border: 1px solid #DDD;
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
}

.legal-table thead th {
    background: var(--cream);
    color: var(--navy);
    font-weight: 600;
}

.legal-table tbody th {
    font-weight: 500;
    color: var(--text);
}

/* Marks the one value Mary still owes before counsel can date this notice. */
.legal-placeholder {
    background: #FFF8E6;
    color: var(--text);
    padding: 1px 6px;
    border-radius: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .legal {
        padding: 50px 20px 60px;
    }

    .legal-content h2 {
        font-size: 22px;
    }
}

/* 404 page. Reuses .legal's centred column so the not-found page inherits the
   same reading width and padding as every other simple content page. */
.notfound-content {
    text-align: center;
}

.notfound-links {
    list-style: none;
    padding: 0;
    margin: 32px 0;
}

.notfound-links li {
    padding: 10px 0;
    border-bottom: 1px solid #EEE;
}

.notfound-links li:last-child {
    border-bottom: 0;
}

.notfound-links a {
    font-weight: 600;
}

.notfound-cta {
    margin-top: 40px;
}

/* FAQ Page */
.faq-section {
    padding: 80px 60px 100px;
    background: white;
}

.faq-container {
    max-width: 860px;
    margin: 0 auto;
}

.faq-group {
    margin-bottom: 60px;
}

.faq-group-heading {
    font-size: 32px;
    color: var(--navy);
    margin-bottom: 28px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--red);
    display: inline-block;
}

.faq-item {
    border-bottom: 1px solid #e8e8e8;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
    line-height: 1.35;
    gap: 20px;
}

/* Remove default marker in all browsers */
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { display: none; }

/* Custom toggle indicator */
.faq-question::after {
    content: '+';
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 300;
    color: var(--red);
    flex-shrink: 0;
    transition: transform 0.2s ease;
    line-height: 1;
}

details[open] > .faq-question::after {
    content: '\2212'; /* minus sign */
}

.faq-answer {
    padding: 0 0 24px 0;
}

.faq-answer p {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.9;
    margin: 0;
}

/* Bottom CTA inside FAQ section */
.faq-cta {
    max-width: 860px;
    margin: 20px auto 0;
    padding-top: 50px;
    border-top: 1px solid #e8e8e8;
    text-align: center;
}

.faq-cta p {
    font-family: 'Fraunces', serif;
    font-size: 26px;
    font-style: italic;
    color: var(--navy);
    margin-bottom: 28px;
}

@media (max-width: 768px) {
    .faq-section {
        padding: 50px 20px 60px;
    }

    .faq-group-heading {
        font-size: 26px;
    }

    .faq-question {
        font-size: 18px;
        padding: 18px 0;
    }
}

/* Introduction / Partner page */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.introduction-partners {
    background: var(--light-gray);
}

.partner-grid {
    max-width: 1100px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.partner-card {
    background: #fff;
    border: 1px solid #eee;
    border-top: 3px solid var(--red);
    padding: 32px 26px;
    text-align: center;
}

.partner-icon {
    font-size: 40px;
    color: var(--red);
    display: block;
    margin-bottom: 14px;
}

.partner-card h3 {
    color: var(--navy);
    font-size: 22px;
    margin-bottom: 10px;
}

.partner-card p {
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.7;
}

.partner-cta {
    max-width: 760px;
    margin: 44px auto 0;
    text-align: center;
}

.partner-cta p {
    color: var(--navy);
    margin-bottom: 22px;
    font-size: 16px;
}

@media (max-width: 768px) {
    .partner-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


/* ============================================================
   Tools & Resources page
   ============================================================ */
.tools-section { padding: 90px 60px; background: #fff; }
.tools-section.alt { background: var(--cream); }
.tools-container { max-width: 1000px; margin: 0 auto; }
.tools-section .section-label { display: block; }
.tools-heading { font-size: 40px; color: var(--navy); margin-bottom: 18px; font-weight: 500; }
.tools-sub { font-size: 18px; color: var(--text-light); line-height: 1.8; max-width: 720px; margin-bottom: 40px; }

/* report vs score */
.explainer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; }
.explain-card { background: var(--cream); border: 1px solid #E0D8C7; border-left: 4px solid var(--gold); padding: 34px 36px; }
.tools-section.alt .explain-card { background: #fff; }
.explain-card h3 { font-size: 26px; color: var(--navy); margin-bottom: 14px; }
.explain-card p { font-size: 16px; color: var(--text); line-height: 1.8; }

/* free-report highlight band */
.highlight-band { background: linear-gradient(135deg, var(--navy) 0%, #111d31 100%); color: #fff; padding: 56px 56px 50px; }
.highlight-band h2 { font-size: 38px; color: #fff; margin-bottom: 18px; font-weight: 500; }
.highlight-band p { font-size: 18px; line-height: 1.85; opacity: .9; max-width: 760px; margin-bottom: 32px; }
.section-label.light { color: var(--gold); }
.highlight-band .tips { list-style: none; padding: 0; margin: 36px 0 0; border-top: 1px solid rgba(255,255,255,.15); }
.highlight-band .tips li { padding: 16px 0 16px 28px; position: relative; font-size: 15.5px; line-height: 1.6; opacity: .92; border-bottom: 1px solid rgba(255,255,255,.08); }
.highlight-band .tips li:last-child { border-bottom: none; }
.highlight-band .tips li::before { content: "\2713"; position: absolute; left: 0; top: 16px; color: var(--gold); font-weight: 700; }
.highlight-band .tips li strong { color: #fff; }

/* three bureaus */
.bureau-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 14px; }
.bureau-card { background: #fff; border: 1px solid #E0D8C7; padding: 32px 30px; text-align: center; transition: all .25s; }
.tools-section.alt .bureau-card { background: var(--cream); }
.bureau-card:hover { border-color: var(--navy); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(21,34,56,.1); }
.bureau-card h3 { font-size: 28px; color: var(--navy); margin-bottom: 10px; }
.bureau-card p { font-size: 14.5px; color: var(--text-light); line-height: 1.6; margin-bottom: 18px; }
.resource-link { display: inline-block; color: var(--red); font-weight: 600; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; }
.resource-link:hover { color: var(--navy); }
.bureau-phone { display: block; margin-top: 12px; font-size: 13px; color: var(--text-light); letter-spacing: 1px; }

/* score list + educational note */
.score-list { list-style: none; padding: 0; margin: 0; max-width: 820px; }
.score-list li { padding: 18px 0 18px 30px; position: relative; font-size: 16.5px; line-height: 1.75; color: var(--text); border-bottom: 1px solid #E0D8C7; }
.score-list li:last-child { border-bottom: none; }
.score-list li::before { content: ""; position: absolute; left: 0; top: 27px; width: 9px; height: 9px; background: var(--red); border-radius: 50%; }
.score-list li strong { color: var(--navy); }
.edu-note { margin-top: 34px; background: #fff; border-left: 4px solid var(--red); padding: 22px 28px; font-size: 16px; line-height: 1.75; color: var(--text); }
.edu-note strong { color: var(--navy); }

@media (max-width: 768px) {
  .tools-section { padding: 60px 20px; }
  .tools-heading { font-size: 30px; }
  .highlight-band { padding: 40px 26px; }
  .highlight-band h2 { font-size: 28px; }
  .explainer-grid, .bureau-grid { grid-template-columns: 1fr; }
}

/* ---- Mortgage calculator ---- */
/* minmax(0, …) on both columns: a bare 1fr keeps an implicit auto minimum, so
   the 58px total in .calc-result refused to shrink and pushed tools-resources
   past the viewport at 769-842px. Explicit 0 minimums let the columns give. */
.calc-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 38px; margin-top: 30px; align-items: start; }
.calc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.calc-field { display: flex; flex-direction: column; gap: 7px; }
.calc-field label { font-size: 13px; font-weight: 600; color: var(--navy); letter-spacing: .5px; }
.calc-hint { font-weight: 400; color: var(--text-light); font-size: 12px; letter-spacing: 0; }
.calc-input { display: flex; align-items: stretch; border: 1px solid #d8d2c5; background: #fff; border-radius: 4px; overflow: hidden; transition: border-color .2s; }
.calc-input:focus-within { border-color: var(--navy); }
.calc-pre, .calc-post { display: flex; align-items: center; padding: 0 12px; color: var(--text-light); font-size: 15px; background: #f3efe6; }
.calc-input input { flex: 1; min-width: 0; border: none; outline: none; padding: 12px; font-size: 16px; font-family: 'Hanken Grotesk', sans-serif; color: var(--navy); background: transparent; }
#calc-term { padding: 12px; font-size: 16px; border: 1px solid #d8d2c5; border-radius: 4px; background: #fff; font-family: 'Hanken Grotesk', sans-serif; color: var(--navy); width: 100%; cursor: pointer; }
#calc-term:focus { outline: none; border-color: var(--navy); }

.calc-result { background: linear-gradient(135deg, var(--navy) 0%, #111d31 100%); color: #fff; padding: 36px 34px; border-radius: 6px; position: sticky; top: 110px; }
.calc-total-label { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; opacity: .65; margin-bottom: 10px; }
.calc-total { font-family: 'Fraunces', serif; font-size: 58px; font-weight: 600; line-height: 1; margin-bottom: 2px; }
.calc-breakdown { margin-top: 26px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 16px; }
.calc-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 15px; }
.calc-row span:first-child { opacity: .8; }
.calc-row span:last-child { font-weight: 600; }
.calc-meta { margin-top: 16px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.calc-meta div { display: flex; justify-content: space-between; font-size: 13.5px; opacity: .85; }
.calc-meta strong { color: #fff; font-weight: 600; }
.calc-disclaimer { margin-top: 28px; font-size: 13px; color: var(--text-light); line-height: 1.7; max-width: 780px; font-style: italic; }
.calc-disclaimer a { color: var(--red); text-decoration: none; font-weight: 600; }
.calc-disclaimer a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .calc-wrap { grid-template-columns: 1fr; gap: 28px; }
  .calc-form { grid-template-columns: 1fr; }
  .calc-result { position: static; }
  .calc-total { font-size: 46px; }
}

/* ─── Give Back page ──────────────────────────────────────────────────────── */
.giving { padding: 100px 60px; background: #fff; }
.giving-header { text-align: center; margin-bottom: 56px; }
.giving-header .divider { margin-left: auto; margin-right: auto; }
.giving-intro { max-width: 680px; margin: 22px auto 0; color: var(--text-light); font-size: 17px; line-height: 1.8; }
.giving-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.give-card { display: block; padding: 34px 34px 30px; background: var(--cream); border-left: 3px solid var(--red); text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.give-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(21, 34, 56, 0.10); }
.give-card h3 { font-size: 22px; color: var(--navy); margin-bottom: 12px; }
.give-card p { font-size: 15px; color: var(--text-light); line-height: 1.75; margin-bottom: 18px; }
.give-card .visit { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red-dark); font-weight: 700; }
/* a lone 5th card spans the full row so it never sits orphaned */
.giving-grid .give-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 768px) {
    .giving { padding: 60px 20px; }
    .giving-grid { grid-template-columns: 1fr; }
    .giving-grid .give-card:last-child:nth-child(odd) { grid-column: auto; }
}
.turnstile-verification {
    margin: 1rem 0;
}

.turnstile-status {
    margin: 0.5rem 0 0;
    color: #4a4a4a;
    font-size: 0.95rem;
}

.turnstile-status[data-state="error"] {
    color: #8b1e1e;
    font-weight: 600;
}

.turnstile-retry {
    margin-top: 0.5rem;
    border: 2px solid currentColor;
    border-radius: 0.25rem;
    background: transparent;
    color: #214f45;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.6rem 0.85rem;
}

.turnstile-retry:focus-visible {
    outline: 3px solid #c69c5d;
    outline-offset: 2px;
}