:root{
  --paper:#f3eee4; --paper2:#ebe4d5; --ink:#1f1c15; --olive:#56602f; --olive-d:#3d4521;
  --terra:#c4713a; --gold:#d9a35c; --mute:#6d675a;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--paper);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.narrow{width:min(760px,100% - 48px)}
.center{text-align:center}
.sr{position:absolute;left:-9999px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic;font-weight:300}
h2{font-size:clamp(2.4rem,5vw,4.2rem);margin-bottom:1.4rem}
.hero-copy p,.center p,.sea-copy .eyebrow{margin-inline:auto}
.sea-copy .eyebrow,.sea-copy p,.sea-copy h2{margin-inline:0}
.eyebrow{font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--terra);font-weight:500;margin-bottom:1.2rem}
p{max-width:58ch}
.center p{margin-inline:auto}

/* reveal */
.reveal{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}

/* buttons */
.btn{display:inline-block;padding:1rem 2.1rem;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;border:1px solid transparent;border-radius:999px;cursor:pointer;font-family:var(--sans);transition:all .4s var(--ease)}
.btn.solid{background:var(--terra);color:#fff}
.btn.solid:hover{background:var(--olive);transform:translateY(-2px)}
.btn.ghost{border-color:rgba(255,255,255,.7);color:#fff}
.btn.ghost:hover{background:#fff;color:var(--ink)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:1.4rem clamp(24px,4vw,56px);color:#fff;transition:background .5s,padding .5s,color .5s,box-shadow .5s}
.nav.solid{background:rgba(243,238,228,.92);backdrop-filter:blur(14px);color:var(--ink);padding-block:.9rem;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.brand{font-family:var(--serif);font-size:1.7rem;letter-spacing:.02em}
.nav nav{display:flex;gap:2.2rem;align-items:center;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.nav nav a{position:relative;padding:.3rem 0}
.nav nav a:not(.pill)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .4s var(--ease)}
.nav nav a:not(.pill):hover::after{width:100%}
.pill{border:1px solid currentColor;padding:.6rem 1.3rem!important;border-radius:999px;transition:all .3s}
.pill:hover{background:var(--terra);border-color:var(--terra);color:#fff}
.burger{display:none;background:none;border:0;width:32px;height:22px;position:relative;cursor:pointer;color:inherit}
.burger span{position:absolute;left:0;width:100%;height:1.5px;background:currentColor;transition:.3s}
.burger span:first-child{top:6px}.burger span:last-child{top:15px}
.burger[aria-expanded=true] span:first-child{top:10px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:10px;transform:rotate(-45deg)}

/* hero */
.hero{position:relative;height:100svh;min-height:600px;color:#fff;overflow:hidden;background:#111}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,8,.55) 0%,rgba(15,12,8,.15) 30%,rgba(15,12,8,.35) 60%,rgba(15,12,8,.82) 100%)}
.hero-copy{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:min(900px,100% - 48px);text-align:center}
.hero-copy .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(3.2rem,9vw,7.4rem);text-shadow:0 2px 40px rgba(0,0,0,.35);margin-bottom:1.6rem}
.lede{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:300;font-style:italic;margin:0 auto 2.2rem;max-width:36ch;color:rgba(255,255,255,.92)}
.cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.sound{position:absolute;right:clamp(20px,4vw,56px);bottom:2.2rem;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.2);color:#fff;font-size:.6rem;cursor:pointer;backdrop-filter:blur(6px);transition:.3s}
.sound:hover{background:#fff;color:#111}
.scroll{position:absolute;left:50%;bottom:1.6rem;width:1px;height:64px;background:rgba(255,255,255,.3);overflow:hidden;transform:translateX(-50%)}
.scroll span{position:absolute;top:-100%;left:0;width:1px;height:100%;background:#fff;animation:drip 2.2s infinite var(--ease)}
@keyframes drip{to{top:100%}}

/* intro */
.intro{padding:clamp(80px,12vw,160px) 0 clamp(60px,8vw,110px);background:var(--paper)}
.mark{width:min(300px,60vw);margin:0 auto 2.5rem;mix-blend-mode:multiply}
.statement{font-family:var(--serif);font-size:clamp(1.8rem,3.8vw,3rem);line-height:1.2;max-width:24ch;margin:0 auto 1.6rem}
.statement em{color:var(--terra)}
.body{color:var(--mute);margin-inline:auto}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.split.rev .frame{order:2}
.frame{position:relative;overflow:hidden;border-radius:220px 220px 6px 6px;box-shadow:0 40px 80px -30px rgba(40,30,10,.45)}
.frame.wide{border-radius:6px 160px 6px 160px}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.frame:hover img{transform:scale(1.05)}
.frame.tall{aspect-ratio:4/5}
.frame.wide{aspect-ratio:3/2}
.frame figcaption{position:absolute;left:0;right:0;bottom:0;padding:.5rem 1rem;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));text-align:center}
.town,.legend,.walk{padding:clamp(60px,9vw,130px) 0}
.text p{margin-bottom:1.1rem;color:#3d382c}
.facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid rgba(0,0,0,.12)}
.facts li{font-family:var(--serif);font-size:1.25rem;line-height:1.25}
.facts span{display:block;font-family:var(--sans);font-size:.65rem;letter-spacing:.24em;text-transform:uppercase;color:var(--terra);margin-bottom:.3rem}

/* parallax band */
.parallax{position:relative;height:80vh;min-height:480px;overflow:hidden;display:grid;place-items:center;color:#fff}
.parallax img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform}
.parallax::after{content:"";position:absolute;inset:0;background:rgba(20,12,4,.35)}
.parallax-copy{position:relative;z-index:2;text-align:center}
blockquote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2rem,5.5vw,4.6rem);line-height:1.1;max-width:18ch;margin:auto;text-shadow:0 2px 30px rgba(0,0,0,.4)}

/* moments grid */
.moments{padding:clamp(70px,9vw,130px) 0;background:var(--paper2)}
.moments .head{margin-bottom:3rem}
.grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(150px,19vw,260px);gap:clamp(12px,1.6vw,22px)}
.g{position:relative;overflow:hidden;border-radius:4px}
.g img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.g:hover img{transform:scale(1.07)}
.g figcaption{position:absolute;left:1.2rem;bottom:1rem;color:#fff;font-family:var(--serif);font-style:italic;font-size:1.3rem;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.g::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.45));pointer-events:none}
.g figcaption{z-index:2}
.g1{grid-column:1/8;grid-row:1/3}
.g2{grid-column:8/13;grid-row:1/3}
.g3{grid-column:1/6;grid-row:3/5}
.g4{grid-column:6/13;grid-row:3/5}

/* sea */
.sea{position:relative;min-height:90vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.sea>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sea-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,8,2,.8) 0%,rgba(15,8,2,.25) 60%,transparent 100%)}
.sea-copy{position:relative;padding:0 0 clamp(60px,9vw,120px)}
.sea-copy .eyebrow{color:var(--gold)}
.sea-copy p{color:rgba(255,255,255,.88)}

/* phone video */
.phone{width:min(380px,80%);margin-inline:auto;aspect-ratio:1/1;border-radius:6px;overflow:hidden;box-shadow:0 50px 90px -30px rgba(40,30,10,.5);border:10px solid #fff;background:#fff}
.phone video{width:100%;height:100%;object-fit:cover}
.walk{background:linear-gradient(180deg,var(--paper),var(--paper2))}
.walk .btn{margin-top:1rem}

/* journey */
.journey{padding:clamp(70px,9vw,130px) 0;background:var(--olive-d);color:#f3eee4}
.journey .eyebrow{color:var(--gold)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:3.5rem;border-top:1px solid rgba(243,238,228,.25)}
.steps li{padding:2.2rem 1.6rem 0 0;position:relative}
.steps li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.n{font-family:var(--serif);font-size:3.4rem;color:var(--gold);font-weight:300;line-height:1;display:block;margin-bottom:.8rem}
.steps h3{font-size:1.8rem;margin-bottom:.6rem}
.steps p{font-size:.95rem;color:rgba(243,238,228,.75)}

/* follow */
.follow{position:relative;padding:clamp(80px,11vw,150px) 0;overflow:hidden;background:var(--paper)}
.follow .bgimg{position:absolute;right:-8%;top:50%;transform:translateY(-50%);height:130%;width:auto;opacity:.09;mix-blend-mode:multiply;pointer-events:none}
.follow .wrap{position:relative}
.follow p{color:#3d382c}
#form{display:flex;gap:.8rem;margin:2.2rem auto 0;max-width:560px;flex-wrap:wrap;justify-content:center}
#form input{flex:1 1 280px;padding:1rem 1.5rem;border-radius:999px;border:1px solid rgba(0,0,0,.2);background:#fff;font:inherit;font-size:1rem;outline:none;transition:.3s}
#form input:focus{border-color:var(--terra);box-shadow:0 0 0 4px rgba(196,113,58,.15)}
.note{flex-basis:100%;min-height:1.5em;font-size:.9rem;color:var(--olive)}

footer{background:var(--ink);color:rgba(243,238,228,.7);padding:3rem 0;font-size:.85rem}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem}
.foot .brand{color:#f3eee4}
.small{flex-basis:100%;font-size:.75rem;opacity:.6;max-width:none}

/* responsive */
@media(max-width:900px){
  .nav nav{position:fixed;inset:0;background:var(--olive-d);color:#f3eee4;flex-direction:column;justify-content:center;gap:2rem;font-size:1rem;opacity:0;pointer-events:none;transition:opacity .4s}
  .nav nav.open{opacity:1;pointer-events:auto}
  .burger{display:block;z-index:60}
  .nav:has(nav.open){color:#f3eee4}
  .split{grid-template-columns:1fr}
  .split.rev .frame{order:0}
  .frame.tall{aspect-ratio:1/1;border-radius:160px 160px 6px 6px}
  .frame.wide{border-radius:6px 90px 6px 90px}
  .steps{grid-template-columns:1fr 1fr;row-gap:2.5rem}
  .grid{grid-auto-rows:42vw}
  .g1,.g2,.g3,.g4{grid-column:1/13;grid-row:auto}
  .g1,.g4{grid-row:span 1}
  .sea-shade{background:linear-gradient(0deg,rgba(15,8,2,.85),rgba(15,8,2,.1) 70%)}
  .hero-copy{top:46%}
  .facts{grid-template-columns:1fr 1fr 1fr;font-size:.9rem}
  .facts li{font-size:1.05rem}
}
@media(max-width:520px){
  body{font-size:16px}
  .steps{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .grid{grid-auto-rows:62vw}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}