/* A spacious, photographic homepage with a quiet editorial rhythm. */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; color: white; background: #282d26; overflow: hidden; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 52%; z-index: -3; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(0,0,0,.77) 0%, rgba(0,0,0,.55) 43%, rgba(0,0,0,.12) 100%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0000005e 0%, transparent 35%, #00000036 70%, #00000099 100%); }
.hero-content { padding-top: 165px; padding-bottom: 160px; }
.hero .eyebrow { color: #e0d7be; margin-bottom: 30px; }
.hero h1 { font-size: clamp(49px, 5.6vw, 88px); line-height: 1.08; letter-spacing: -.045em; max-width: 1050px; }
.hero h1 em { color: #c6a667; }
.hero h1 .strategic { font-size: .85em; }
.hero-copy { max-width: 440px; margin-top: 27px; color: #e3e3da; font-size: 16px; line-height: 1.85; }
.hero .btn-container { margin-top: 36px; }
.hero .text-link { color: white; border-bottom-color: #ffffff66; }
.hero .text-link:hover { color: var(--color-primary-light); }
.hero-bottom { position: absolute; inset: auto 0 0; }
.hero-bottom-inner { display: flex; justify-content: center; align-items: center; gap: 30px; border-top: 1px solid #ffffff36; padding-block: 25px; }
.scroll-cue { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; font-size: 12px; }
.scroll-cue .arrow { transform: rotate(90deg); }
.principles { background: var(--color-paper); border-bottom: 1px solid var(--color-line); }
.principles-inner { display: grid; grid-template-columns: 1fr 1fr 1fr; padding-block: 38px; }
.principle { display: flex; align-items: center; justify-content: center; gap: 24px; padding-inline: 20px; }
.principle + .principle { border-left: 1px solid var(--color-line); }
.principle-number { font-family: var(--serif-font-family); font-style: italic; font-size: 22px; color: #917344; }
.principle p { font-size: 14px; line-height: 1.7; }
.principle p span { display: block; color: var(--color-muted); font-size: 12px; }
.mission {
    padding-block: calc(var(--section-space) + 28px) calc(var(--section-space) - 28px);
    --editorial-rule: linear-gradient(to bottom, transparent, rgb(198 166 103 / 28%) 12%, rgb(198 166 103 / 28%) 88%, transparent);
    background-image: var(--editorial-rule), var(--editorial-rule), var(--editorial-rule), var(--editorial-rule);
    background-size: 1px 100%;
    background-position: var(--page-gutter) 0, 33.333% 0, 66.667% 0, calc(100% - var(--page-gutter)) 0;
    background-repeat: no-repeat;
}
.mission-layout { display: grid; grid-template-columns: .88fr 1fr; gap: clamp(60px, 8vw, 140px); align-items: center; }
.mission-copy .eyebrow { color: #7b6b4a; margin-bottom: 30px; }
.mission-copy { min-width: 0; container-type: inline-size; }
.mission-copy .section-heading { max-width: 560px; font-size: min(68px, 10cqw); }
.mission-title-lead { white-space: nowrap; }
.mission-copy > p:not(.eyebrow) { max-width: 455px; color: var(--color-muted); margin-top: 28px; font-size: 16px; line-height: 1.9; }
.mission-copy .text-link { margin-top: 27px; }
.mission-figure { position: relative; isolation: isolate; padding-left: 27px; padding-bottom: 28px; }
.mission-figure::before { content: ""; position: absolute; inset: 28px 28px 0 0; border: 1px solid #b7a47e; z-index: -1; }
.mission-figure > img { width: 100%; height: clamp(400px, 40vw, 580px); object-fit: cover; object-position: 65% 48%; }
.mission-figure figcaption { display: flex; align-items: center; gap: 16px; position: absolute; left: 50px; bottom: 51px; color: #f8f7f1; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.mission-figure figcaption::before { content: ""; width: 22px; height: 1px; background: #d8c196; }
.mission-seal { position: absolute; right: -24px; top: -25px; width: 110px; height: 110px; border-radius: 50%; background: var(--color-paper); border: 1px solid #b7a47e; display: flex; align-items: center; justify-content: center; flex-direction: column; box-shadow: 0 0 0 8px var(--color-paper); }
.vault { position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden; color: white; background: #222c28; }
.vault-image { position: absolute; inset: 0; z-index: -2; height: 100%; width: 100%; object-fit: cover; object-position: 65% 55%; }
.vault::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #000000eb, #000000b0 42%, #0000001a 100%); }
.vault-inner { padding-block: 100px; }
.vault-accent { width: 64px; height: 2px; margin-bottom: 28px; background: #c6a667; }
.vault h2 { margin-top: 0; font-size: clamp(72px, 8.1vw, 132px); letter-spacing: -.04em; }
.vault-tagline { margin-top: 20px; max-width: 500px; font-family: var(--serif-font-family); font-size: clamp(26px, 2.8vw, 38px); line-height: 1.35; color: #efe9dc; }
.vault-description { color: #d0d5cb; max-width: 420px; margin-top: 24px; font-size: 16px; line-height: 1.85; }
.vault .btn-container { margin-top: 36px; }
.pathways { padding-block: var(--section-space); }
.pathways-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 52px; }
.pathways-heading .eyebrow { color: #7b6b4a; margin-bottom: 24px; }
.pathways-heading > p { max-width: 325px; color: var(--color-muted); font-size: 16px; line-height: 1.8; padding-bottom: 3px; }
.pathways-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.pathway { min-width: 0; }
.pathway-image { overflow: hidden; background: #334031; position: relative; }
.pathway-image img { width: 100%; height: auto; aspect-ratio: 1.3; object-fit: cover; transition: transform 800ms cubic-bezier(.2,.7,.3,1); }
.pathway:hover .pathway-image img { transform: scale(1.035); }
.pathway-image::after { content: ""; position: absolute; inset: 50% 0 0; pointer-events: none; background: linear-gradient(transparent, #1420176b); }
.pathway-sellers img { object-position: 50% 52%; }
.pathway-buyers img { object-position: 60% 50%; }
.pathway-label { position: absolute; top: 24px; left: 24px; z-index: 1; padding: 8px 14px; border: 1px solid #ffffff8c; color: white; background: #13211859; backdrop-filter: blur(5px); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.pathway-content { padding-top: 29px; }
.pathway-title { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.pathway-title h3 { font-size: clamp(30px, 2.8vw, 44px); letter-spacing: -.035em; }
.pathway-title > span { font-family: var(--serif-font-family); color: #9a8151; font-style: italic; font-size: 22px; }
.pathway-content > p { color: var(--color-muted); max-width: 490px; margin-top: 20px; font-size: 16px; line-height: 1.85; }
.pathway-content .btn-container { margin-top: 22px; }
.pathway-content .btn { padding-inline: 22px; }
.pathway-content .text-link { border-bottom-color: #aaa48f; }
@keyframes entrance { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.hero-content > * { animation: entrance 900ms both; }
.hero-content > :nth-child(2) { animation-delay: 100ms; }
.hero-content > :nth-child(3) { animation-delay: 200ms; }
.hero-content > :nth-child(4) { animation-delay: 300ms; }
@media (max-width: 1100px) {
    .mission-layout { gap: 55px; }
    .mission-seal { right: -10px; width: 90px; height: 90px; }
    .pathway-content .btn-container { align-items: flex-start; }
}
@media (max-width: 800px) {
    .hero-content { padding-top: 170px; padding-bottom: 155px; }
    .hero h1 { font-size: clamp(47px, 8vw, 65px); }
    .hero-image { object-position: 65% 50%; }
    .hero::before { background: linear-gradient(90deg, #000000cc, #00000059); }
    .principle { gap: 14px; padding-inline: 12px; }
    .principle p { font-size: 13px; }
    .mission-layout { grid-template-columns: 1fr; gap: 65px; }
    .mission-copy .section-heading { max-width: 650px; }
    .mission-copy > p:not(.eyebrow) { max-width: 550px; }
    .mission-figure { margin-right: 8px; }
    .mission-figure > img { height: 480px; }
    .pathways-heading { align-items: flex-start; flex-direction: column; gap: 25px; }
    .pathways-heading > p { max-width: 470px; }
    .pathways-grid { gap: 25px; }
    .pathway-image img { aspect-ratio: 1; }
    .pathway-title h3 { font-size: 29px; }
    .pathway-content .btn-container { flex-direction: column; }
}
@media (max-width: 600px) {
    .hero-content { padding-top: 144px; padding-bottom: 150px; }
    .hero .eyebrow { max-width: 300px; font-size: 10px; letter-spacing: .14em; margin-bottom: 26px; }
    .hero .eyebrow::before { flex-basis: 22px; }
    .hero h1 { font-size: clamp(39px, 10vw, 58px); line-height: 1.12; }
    .hero-copy { font-size: 16px; max-width: 340px; margin-top: 24px; }
    .hero .btn-container { flex-direction: column; align-items: flex-start; margin-top: 30px; }
    .hero .btn-container > .btn { width: auto; }
    .hero-bottom-inner { padding-block: 19px; gap: 15px; }
    .scroll-cue { font-size: 11px; gap: 10px; }
    .principles-inner { grid-template-columns: 1fr; padding-block: 8px; }
    .principle { justify-content: flex-start; padding: 21px 2px; gap: 24px; }
    .principle + .principle { border-left: 0; border-top: 1px solid var(--color-line); }
    .principle p { font-size: 14px; display: flex; flex-wrap: wrap; column-gap: 14px; align-items: baseline; }
    .principle p span { font-size: 12px; }
    .mission-copy .eyebrow, .pathways-heading .eyebrow { font-size: 11px; }
    .mission-figure { padding-left: 16px; padding-bottom: 18px; }
    .mission-figure::before { inset: 18px 18px 0 0; }
    .mission-figure > img { height: 400px; }
    .mission-figure figcaption { left: 36px; bottom: 38px; font-size: 10px; }
    .mission-seal { top: -24px; width: 80px; height: 80px; }
    .vault-image { object-position: 77% 55%; }
    .vault::after { background: linear-gradient(90deg, #000000e8, #0000008c); }
    .vault-inner { padding-block: 80px; }
    .vault h2 { font-size: 77px; }
    .vault-tagline { font-size: 29px; max-width: 330px; }
    .vault .btn-container { flex-direction: column; align-items: stretch; }
    .pathways-heading { margin-bottom: 35px; }
    .pathways-grid { grid-template-columns: 1fr; gap: 56px; }
    .pathway-image img { aspect-ratio: 1.2; }
    .pathway-title h3 { font-size: 35px; }
    .pathway-label { top: 18px; left: 18px; }
    .pathway-content .btn-container { flex-direction: row; align-items: center; }
    .pathway-content .btn { width: auto; }
}

/* Full-viewport sections, with room to scroll longer content on small screens. */
#main-content > section {
    height: 100vh;
    min-height: 800px;
    overflow-y: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}


.mission, .pathways {
    display: flex;
    flex-direction: column;
}

#main-content > section > .container {
    flex-shrink: 0;
    margin-block: auto;
}

.hero, .vault {
    justify-content: safe center;
}

/* Center a compact layout in the viewport below the fixed navigation. */
@media (min-width: 801px) {
    #main-content > .mission {
        --mission-spacing: clamp(48px, 8vh, 100px);
        padding-block: calc(var(--mission-spacing) + 28px) calc(var(--mission-spacing) - 28px);
        overflow: visible;
    }

    .mission-figure > img {
        height: min(clamp(400px, 40vw, 580px), calc(max(800px, 100vh) - 2 * var(--mission-spacing) - 28px));
    }
}

@media (min-width: 801px) and (max-height: 900px) {
    .mission-copy .eyebrow { margin-bottom: 20px; }
    .mission-copy > p:not(.eyebrow) { margin-top: 20px; line-height: 1.7; }
    .mission-copy .text-link { margin-top: 20px; }
}

#main-content > .pathways {
    position: relative;
    isolation: isolate;
    padding-block: calc(var(--nav-height) + 24px) 24px;
    overflow: clip;
}

.pathways::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -50px;
    height: 65%;
    aspect-ratio: 290 / 488;
    transform: translateY(-50%);
    background: url("../images/shield-watermark.svg") center / contain no-repeat;
    opacity: .15;
    pointer-events: none;
    z-index: -1;
}

#main-content > .pathways > .container {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 22px;
    max-width: 1120px;
    height: 100%;
    max-height: 680px;
    min-height: 0;
    margin-block: auto;
}

.pathways-heading {
    margin-bottom: 0;
    gap: 24px;
}

.pathways-heading .eyebrow { margin-bottom: 8px; }
.pathways-heading .section-heading { font-size: clamp(28px, 3vw, 44px); }
.pathways-heading > p { line-height: 1.5; }

.pathways-grid {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: 0;
}

.pathway {
    display: grid;
    grid-row: 1 / span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    min-height: 0;
}

.pathway-image { min-height: 0; }
.pathway-image img { height: 100%; aspect-ratio: auto; }
.pathway-content { display: flex; flex-direction: column; padding-top: 14px; }
.pathway-title h3 { font-size: clamp(26px, 2.3vw, 34px); }
.pathway-content > p { margin-top: 10px; margin-bottom: 14px; line-height: 1.5; }
.pathway-content .btn-container { margin-top: auto; }
.pathway-content .btn { min-height: 48px; padding: 12px 20px; }

@media (max-width: 800px) {
    #main-content > .pathways { height: auto; padding-bottom: 48px; }
    #main-content > .pathways > .container {
        height: auto;
        max-height: none;
        grid-template-rows: auto auto;
        gap: 32px;
    }
    .pathways-heading { gap: 12px; }
    .pathways-heading > p { max-width: 550px; line-height: 1.5; }
    .pathways-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        grid-auto-flow: row;
        gap: 48px;
        overflow: visible;
    }
    .pathway { grid-row: auto; grid-template-rows: auto auto; }
    .pathway-image img { height: auto; aspect-ratio: 1.3; }
    .pathway-content .btn-container { flex-direction: row; align-items: center; }
    .pathway-content .btn { width: auto; }
}

.mission-seal img { width: 100%; height: 100%; padding: 10px; object-fit: contain; }

@media (max-width: 800px) {
    html, .pathways-grid { scroll-snap-type: none; }
    #main-content > section {
        height: auto;
        min-height: max(800px, 100vh);
        overflow: clip;
    }
    .mission-figure > img, .pathway-image img {
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
    }
    .pathway:hover .pathway-image img { transform: none; }
    #main-content > section, .pathway {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }
}