:root {
    --green:#26372b;
    --dark:#17251d;
    --red:#8b3435;
    --cream:#f4f0e6;
    --gold:#c5a46a;
    --ink:#263129
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:Georgia,serif
}

a {
    color:inherit
}

.top {
    height:7px;
    background:linear-gradient(90deg,var(--red),var(--gold),var(--green))
}

header {
    position:absolute;
    z-index:5;
    top:7px;
    width:100%;
    padding:20px 5vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:white;
    background:linear-gradient(#1119,transparent)
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none
}

.brand img {
    width:66px;
    height:66px;
    object-fit:contain
}

.brand b {
    font-weight:400;
    font-size:21px;
    letter-spacing:.13em;
    text-transform:uppercase
}

.brand small {
    display:block;
    font:10px Arial;
    letter-spacing:.24em;
    margin-top:6px
}

nav {
    display:flex;
    gap:26px;
    font:11px Arial;
    letter-spacing:.14em;
    text-transform:uppercase
}

nav a {
    text-decoration:none;
    padding:10px 0;
    border-bottom:1px solid transparent
}

nav a:hover {
    border-color:var(--gold)
}

.toggle {
    display:none;
    background:transparent;
    color:white;
    border:1px solid #fff9;
    border-radius:50%;
    width:44px;
    height:44px;
    font-size:22px
}

.hero {
    height:96svh;
    min-height:650px;
    position:relative;
    overflow:hidden;
    background:var(--green);
    color:white;
    display:flex;
    align-items:center
}

.hero img {
    position:absolute;
    inset:-12% 0;
    width:100%;
    height:124%;
    object-fit:cover;
    will-change:transform
}

.hero:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#101b15c9,#101b1550 65%,#101b1510),linear-gradient(0deg,#101b154d,transparent 55%)
}

.copy {
    position:relative;
    z-index:2;
    margin:100px 10vw 0;
    max-width:750px
}

.eyebrow,.kicker {
    font:11px Arial;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--gold)
}

h1 {
    font-size:xx-large;
    line-height:1.2;
    font-weight:400;
    letter-spacing:-.04em;
    margin:22px 0
}

.copy p {
    font-size:20px;
    line-height:1.65;
    max-width:520px
}

.cta {
    display:inline-block;
    margin-top:20px;
    padding:16px 22px;
    background:var(--red);
    color:white;
    text-decoration:none;
    font:11px Arial;
    letter-spacing:.16em;
    text-transform:uppercase
}

.scroll {
    position:absolute;
    z-index:2;
    right:5vw;
    bottom:30px;
    writing-mode:vertical-rl;
    font:10px Arial;
    letter-spacing:.2em
}

section {
    scroll-margin-top:20px
}

.intro {
    padding:120px 9vw;
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:8vw
}

.kicker {
    color:var(--red)
}

h2 {
    font-size:clamp(40px,5vw,68px);
    line-height:1.02;
    font-weight:400;
    letter-spacing:-.03em;
    margin:18px 0 25px
}

.intro p,.story p {
    font-size:18px;
    line-height:1.8;
    color:#596157
}

.intro .lead {
    font-size:26px;
    line-height:1.5;
    color:var(--green)
}

.feature {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    background:var(--green);
    color:var(--cream);
    min-height:540px
}

.photo {
    min-height:500px;
    overflow:hidden
}

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

.feature-copy {
    align-self:center;
    padding:7vw
}

.feature-copy h2 {
    color:var(--cream)
}

.feature-copy p {
    font-size:17px;
    line-height:1.8;
    color:#d5d7cd
}

.cards {
    padding:110px 9vw
}

.cardgrid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:42px
}

.card {
    background:#e9e2d2;
    padding:34px;
    min-height:270px;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}

.card:nth-child(2) {
    background:#dce0d4
}

.card:nth-child(3) {
    background:#e6d8d0
}

.card h3 {
    font-size:30px;
    font-weight:400;
    margin:12px 0
}

.card p {
    font:15px/1.7 Arial;
    color:#596157
}

.textlink {
    font:10px Arial;
    letter-spacing:.16em;
    text-transform:uppercase;
    text-decoration:none;
    border-bottom:1px solid var(--red);
    padding-bottom:8px;
    align-self:flex-start
}

.story {
    background:#e9e2d2;
    padding:110px 9vw;
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:9vw;
    align-items:center
}

.year {
    font-size:clamp(100px,15vw,185px);
    color:#c6bba5
}

.visit {
    background:var(--red);
    color:white;
    text-align:center;
    padding:100px 20px
}

.visit h2 {
    font-size:clamp(42px,6vw,74px)
}

.visit p {
    font-size:18px;
    line-height:1.7;
    color:#f0ded8
}

.visit .cta {
    background:var(--cream);
    color:var(--green)
}

footer {
    background:var(--dark);
    color:var(--cream);
    padding:48px 9vw;
    display:flex;
    justify-content:space-between;
    gap:20px
}

footer a.brand, footer div.extracted-inline-3 {
	margin: auto;
}

.reveal {
    opacity:0;
    transform:translateY(25px);
    transition:.8s
}

.reveal.visible {
    opacity:1;
    transform:none
}

@media(max-width:800px) {
    header {
        padding:13px 18px
    }

    .brand img {
        width:52px;
        height:52px
    }

    .brand b {
        font-size:15px
    }

    .toggle {
        display:block
    }

    nav {
        display:none;
        position:absolute;
        top:76px;
        left:14px;
        right:14px;
        background:var(--dark);
        padding:20px;
        flex-direction:column;
        gap:4px
    }

    nav.open {
        display:flex
    }

    nav a {
        padding:13px;
        border-bottom:1px solid #fff2
    }

    .hero {
        height:92svh;
        min-height:650px
    }

    .copy {
        margin:90px 25px 0
    }

    .intro,.feature,.story {
        grid-template-columns:1fr
    }

    .intro {
        padding:80px 25px;
        gap:15px
    }

    .photo {
        min-height:330px
    }

    .feature-copy {
        padding:55px 28px
    }

    .cards {
        padding:80px 25px
    }

    .cardgrid {
        grid-template-columns:1fr
    }

    .card {
        min-height:220px
    }

    .story {
        padding:80px 25px;
        gap:20px
    }

    .year {
        font-size:100px
    }

    footer {
        padding:40px 25px;
        flex-direction:column
    }

}

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

    .reveal {
        opacity:1;
        transform:none;
        transition:none
    }

    .hero img {
        transform:none!important
    }

}

/* V4: Original transparent-gradient navigation, fixed while scrolling. */
.top {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1100
}

header {
    position:fixed;
    top:7px;
    left:0;
    right:0;
    z-index:1099;
    background:linear-gradient(to bottom,rgba(15,26,20,.91) 0%,rgba(15,26,20,.68) 52%,rgba(15,26,20,0) 100%);
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    padding-bottom:30px;
    pointer-events:none
}

header .brand,header nav,header .toggle {
    pointer-events:auto
}

.brand img {
    width:72px;
    height:72px;
    object-fit:contain;
    object-position:center;
    flex-shrink:0
}

/* Each entire section becomes a scroll-stacking panel. Text and cards stay
   stationary relative to their own panel; no independently moving text. */
main {
    position:relative;
    isolation:isolate
}

main > section {
    position:sticky;
    top:0;
    min-height:72svh;
    scroll-margin-top:110px;
    box-shadow:0 -14px 32px rgba(13,26,19,.14)
}

main > section:nth-child(1) {
    z-index:1
}

main > section:nth-child(2) {
    z-index:2;
    background:var(--cream)
}

main > section:nth-child(3) {
    z-index:3
}

main > section:nth-child(4) {
    z-index:4;
    background:var(--cream)
}

main > section:nth-child(5) {
    z-index:5
}

main > section:nth-child(6) {
    z-index:6
}

.hero {
    min-height:650px;
    box-shadow:none
}

footer {
    position:relative;
    z-index:8
}

@media(max-width:800px) {
    header {
        padding:13px 18px 24px
    }

    .brand img {
        width:56px;
        height:56px
    }

    nav {
        top:76px
    }

    main > section {
        min-height:0;
        scroll-margin-top:86px
    }

    .hero {
        min-height:650px
    }

}

@media(prefers-reduced-motion:reduce) {
    main > section {
        position:relative;
        top:auto
    }

}

/* Presentation extracted from inline attributes. */
.extracted-inline-1 {
    color:#f3e6d4;
    border-color:#c5a46a
}

.extracted-inline-2 {
    letter-spacing:.13em;
    text-transform:uppercase
}

.extracted-inline-3 {
    font:10px Arial;
    letter-spacing:.12em
}

/* Mobile progressive sticky behavior: panels scroll through their first 25%
   before pinning. Tall panels wait until all their content can be seen. */
@media (max-width: 800px) {
    main > section {
        position: sticky;
        top: calc(-1 * var(--sticky-offset, 0px));
    }
}

/* Motion preferences always override the sticky effect. */
@media (prefers-reduced-motion: reduce) {
    main > section {
        position: relative;
        top: auto;
    }
}