:root {
  --forest: #153b31;
  --forest-deep: #09241d;
  --sage: #93a891;
  --mist: #dce5dc;
  --cream: #f4efe3;
  --paper: #fcfaf4;
  --gold: #bd9660;
  --ink: #18221e;
  --line: rgba(21, 59, 49, 0.2);
  --display: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link { position: fixed; z-index: 100; top: 0.75rem; left: 0.75rem; padding: 0.8rem 1rem; background: var(--paper); color: var(--forest); transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.site-header { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 6.2rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 0 4vw; color: #fff; border-bottom: 1px solid rgba(255,255,255,.3); }
.brand { justify-self: start; display: flex; align-items: center; gap: 0.75rem; text-decoration: none; font: 600 0.85rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.brand img { width: 2.8rem; height: 2.8rem; object-fit: cover; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); }
.site-header nav { display: flex; gap: 2rem; }
.site-header nav a, .header-action { font-size: .73rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.header-action { justify-self: end; padding: .9rem 1.15rem; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; }
.site-header a:focus-visible, .button:focus-visible, .visit-cta:focus-visible, .reveal-card:focus-visible, footer a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.scroll-story { position: relative; height: 330svh; background: var(--forest-deep); }
.scroll-stage { position: sticky; top: 0; width: 100%; height: 100svh; min-height: 42rem; overflow: hidden; color: #fff; }
.scroll-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.video-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,25,20,.88) 0%, rgba(7,25,20,.67) 42%, rgba(7,25,20,.25) 72%, rgba(7,25,20,.48) 100%); }
.grain { position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(circle at 20% 30%, #fff 0 .6px, transparent .9px), radial-gradient(circle at 76% 64%, #fff 0 .5px, transparent .8px); background-size: 7px 7px, 11px 11px; mix-blend-mode: soft-light; pointer-events: none; }
.story-copy { position: absolute; z-index: 2; inset: 0; margin: auto; width: min(92vw, 86rem); pointer-events: none; }
.story-beat { position: absolute; top: 50%; left: 0; width: min(47rem, 70vw); opacity: 0; visibility: hidden; transform: translateY(-44%); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.65,.25,1); }
.story-beat.is-active { opacity: 1; visibility: visible; transform: translateY(-50%); }
.story-beat a { pointer-events: auto; }
.scene-label, .kicker { margin: 0 0 1.4rem; font-size: .7rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.scene-label { display: inline-flex; align-items: center; gap: .7rem; }
.scene-label::before { content: ""; width: 2.4rem; border-top: 1px solid currentColor; }
h1 { max-width: 12ch; margin: 0; font: 400 clamp(3.5rem, 7.7vw, 7.6rem)/.9 var(--display); letter-spacing: -.055em; text-wrap: balance; }
h1 em, h2 em, .display-line em { color: #d7c39a; font-weight: 400; }
.hero-intro { max-width: 39rem; margin: 1.65rem 0 0; font: 400 clamp(1rem, 1.4vw, 1.25rem)/1.6 var(--sans); color: rgba(255,255,255,.86); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-width: 11rem; padding: 1rem 1.2rem; border-radius: 999px; font-size: .76rem; font-weight: 750; letter-spacing: .06em; text-decoration: none; }
.button-primary { background: var(--cream); color: var(--forest-deep); }
.button-quiet { border: 1px solid rgba(255,255,255,.48); color: #fff; backdrop-filter: blur(8px); }
.display-line { max-width: 12ch; margin: 0 0 1.2rem; font: 400 clamp(3.3rem, 6.3vw, 6.6rem)/.94 var(--display); letter-spacing: -.045em; }
.story-beat > p:last-of-type:not(.display-line) { max-width: 33rem; font-size: 1.15rem; line-height: 1.65; color: rgba(255,255,255,.82); }
.motion-controls { position: absolute; z-index: 5; right: 3vw; bottom: 4.5rem; max-width: 18rem; padding: .75rem; font-size: .74rem; color: #fff; }
.motion-controls p { margin: 0 0 .5rem; }
.motion-controls button { padding: .7rem .9rem; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; color: #fff; background: rgba(9,36,29,.7); font: 700 .7rem var(--sans); cursor: pointer; }
.concept-chip { position: absolute; z-index: 3; right: 3vw; top: 7.5rem; margin: 0; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; background: rgba(9,36,29,.45); backdrop-filter: blur(8px); }
.scroll-cue { position: absolute; z-index: 3; left: 4vw; bottom: 2rem; display: flex; align-items: center; gap: .8rem; font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; }
.scroll-cue span { display: inline-block; width: 2.8rem; border-top: 1px solid; }

.intro-section { position: relative; display: grid; grid-template-columns: .3fr 1.3fr 1fr; gap: 4vw; padding: clamp(6rem, 12vw, 11rem) 5vw; background: var(--cream); }
.section-number { font: italic 4rem/1 var(--display); color: var(--gold); }
.intro-copy h2, .reveal-copy h2, .spirit-section h2, .visit-heading h2 { margin: 0; font: 400 clamp(3rem, 5.7vw, 6rem)/.96 var(--display); letter-spacing: -.045em; }
.intro-copy h2 em, .reveal-copy h2 em, .spirit-section h2 em, .visit-heading h2 em { color: var(--forest); }
.kicker { color: var(--forest); }
.lede { max-width: 42rem; margin: 2rem 0 0; font: 400 1.12rem/1.75 var(--sans); color: #425048; }
.category-list { align-self: end; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.category-list li { display: grid; grid-template-columns: 2.4rem 1fr; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--line); font: 400 clamp(1.2rem, 2vw, 1.75rem) var(--display); }
.category-list span { font: 700 .65rem var(--sans); letter-spacing: .12em; color: var(--gold); }

.reveal-section { display: grid; grid-template-columns: .75fr 1.4fr; align-items: end; gap: 7vw; padding: 3rem 5vw 10rem; background: var(--cream); }
.reveal-copy { padding-bottom: 2rem; }
.reveal-copy > p:last-child { max-width: 30rem; margin-top: 2rem; line-height: 1.7; color: #536159; }
.reveal-card { position: relative; overflow: hidden; min-height: 42rem; margin: 0; background: var(--forest); cursor: pointer; isolation: isolate; }
.reveal-card img { width: 100%; height: 100%; min-height: 42rem; object-fit: cover; transition: filter .65s ease, transform .9s cubic-bezier(.2,.7,.25,1); }
.reveal-card figcaption { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; color: #fff; background: linear-gradient(180deg, rgba(9,36,29,.12), rgba(9,36,29,.9)); clip-path: inset(100% 0 0 0); transition: clip-path .65s cubic-bezier(.16,.74,.28,1); }
.reveal-card:is(:hover, :focus-visible, .is-revealed) figcaption { clip-path: inset(0); }
.reveal-card:is(:hover, :focus-visible, .is-revealed) img { filter: saturate(.72) brightness(.7); transform: scale(1.025); }
.reveal-index, .reveal-hint { align-self: flex-end; font-size: .65rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.reveal-card figcaption div { max-width: 31rem; }
.reveal-card h3 { margin: 0 0 .8rem; font: 400 clamp(2.2rem, 4vw, 4.4rem)/.98 var(--display); }
.reveal-card figcaption p { line-height: 1.6; color: rgba(255,255,255,.83); }
.reveal-card figcaption a { display: inline-block; margin-top: .5rem; font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }

.spirit-section { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; padding: clamp(7rem, 12vw, 11rem) 5vw; color: #fff; background: var(--forest); }
.spirit-section .kicker { color: var(--mist); }
.spirit-section h2 em { color: #d7c39a; }
.spirit-note { position: relative; align-self: center; min-height: 17rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); padding: 3rem; overflow: hidden; }
.spirit-note p { position: relative; z-index: 1; margin: 0; font: 400 1.08rem/1.7 var(--sans); }
.large-mark { position: absolute; right: -1rem; bottom: -3.8rem; font: italic 16rem/1 var(--display); color: rgba(255,255,255,.065); }

.visit-section { padding: clamp(6rem, 10vw, 9rem) 5vw 5rem; background: var(--paper); }
.visit-heading { max-width: 70rem; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3vw; margin-top: 5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.visit-block h3 { margin: 0 0 1.4rem; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--forest); }
.visit-block address, .visit-block > a, .hours { font: 400 1.12rem/1.7 var(--sans); font-style: normal; }
.visit-block > a { display: block; width: fit-content; margin-top: .55rem; }
.hours { margin: 0; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; }
.hours dd { margin: 0; }
.fine-print { max-width: 25rem; font-size: .75rem; line-height: 1.5; color: #667169; }
.visit-cta { display: flex; justify-content: space-between; align-items: center; margin-top: 5rem; padding: 1.4rem 0; border-top: 1px solid var(--forest); border-bottom: 1px solid var(--forest); font: 400 clamp(2rem, 4vw, 4rem) var(--display); text-decoration: none; }

footer { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 4rem 5vw; color: rgba(255,255,255,.72); background: var(--forest-deep); }
.footer-brand { color: #fff; font: 400 clamp(2rem, 4vw, 4rem)/1 var(--display); }
.footer-meta { max-width: 42rem; font-size: .76rem; line-height: 1.65; }
.noscript-note { position: fixed; z-index: 40; right: 1rem; bottom: 1rem; max-width: 25rem; padding: 1rem; color: var(--ink); background: var(--cream); border: 1px solid var(--forest); }

[data-motion-state="static"] video { opacity: 0; }
[data-motion-state="static"] .story-beat { transition: none; }
[data-motion-state="static"] .scroll-story { height: 100svh; }

@media (max-width: 780px) {
  .site-header { grid-template-columns: 1fr auto; height: 5rem; padding: 0 1rem; }
  .site-header nav { display: none; }
  .header-action { padding: .7rem .8rem; }
  .brand img { width: 2.3rem; height: 2.3rem; }
  .brand span { font-size: .68rem; }
  .scroll-stage { min-height: 38rem; }
  .video-wash { background: linear-gradient(180deg, rgba(7,25,20,.48), rgba(7,25,20,.86) 74%, rgba(7,25,20,.93)); }
  .story-copy { width: calc(100% - 2rem); }
  .story-beat { top: auto; bottom: 7.2rem; width: 100%; transform: translateY(1rem); }
  .story-beat.is-active { transform: none; }
  h1 { font-size: clamp(3.1rem, 14.5vw, 5rem); }
  .display-line { font-size: clamp(3rem, 13vw, 5rem); }
  .hero-intro { font-size: .96rem; line-height: 1.5; }
  .hero-actions { margin-top: 1.25rem; }
  .button { padding: .85rem 1rem; min-width: 0; }
  .concept-chip { top: 6.2rem; right: 1rem; }
  .scroll-cue { left: 1rem; bottom: 1.4rem; }
  .motion-controls { right: .5rem; bottom: 4.2rem; }
  .intro-section { grid-template-columns: 1fr; padding: 6rem 1.2rem; }
  .section-number { font-size: 2.6rem; }
  .category-list { margin-top: 2rem; }
  .reveal-section { grid-template-columns: 1fr; padding: 1rem 1.2rem 6rem; }
  .reveal-card, .reveal-card img { min-height: 31rem; }
  .spirit-section { grid-template-columns: 1fr; padding: 6rem 1.2rem; }
  .spirit-note { min-height: 14rem; padding: 2rem; }
  .visit-section { padding: 6rem 1.2rem 3rem; }
  .visit-grid { grid-template-columns: 1fr; gap: 2.5rem; margin-top: 3rem; }
  footer { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .video-wash { background: Canvas; opacity: .7; }
  .button, .header-action, .reveal-card { border: 2px solid currentColor; }
}