
/* Layout: a gift being unwrapped. Mobile-first chapters, one screen each on a phone; a single oxblood-and-gold ribbon is the only ornament, appearing at the hero and at each chapter opening. */
:root{
  --pine:#0a1712; --pine-2:#10231c; --pine-3:#173027; --line:#22382f;
  --ivory:#f5efe3; --mist:#a7b2aa;
  --champagne:#dcc79c; --gold:#b8914a; --oxblood:#6e1f22; --oxblood-2:#8c2a2e;
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(18px,5vw,72px);
  --tap:52px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--pine);color:var(--ivory);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
.wrap{padding-inline:var(--gutter);max-width:1280px;margin-inline:auto}
.kicker{font:500 .7rem/1.4 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--champagne)}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;line-height:1.02;letter-spacing:-.01em}
h2{font-size:clamp(2.3rem,8.5vw,4.6rem)}
h2 em,h1 em{font-style:italic;color:var(--champagne)}
h3{font-size:clamp(1.45rem,5vw,1.9rem)}
p{margin:0}
.lede{color:var(--mist);max-width:56ch;font-size:1.02rem}
.chapter{padding-block:clamp(84px,16vw,150px)}
.chapter>.wrap>.kicker+h2{margin-top:1rem}
.chapter .lede{margin-top:1.1rem}
/* the ribbon: chapter opener */
.ribbon{display:block;height:10px;width:min(180px,40vw);margin-bottom:1.6rem;background:linear-gradient(var(--gold),var(--gold)) top/100% 1px no-repeat,linear-gradient(var(--gold),var(--gold)) bottom/100% 1px no-repeat,var(--oxblood);transform-origin:left;transform:scaleX(var(--r,1));transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:var(--tap);padding:0 1.6rem;border:1px solid var(--champagne);background:var(--champagne);color:var(--pine);font:600 .74rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .3s,color .3s}
.btn:hover{background:transparent;color:var(--champagne)}
.btn.line{background:transparent;color:var(--ivory);border-color:rgba(245,239,227,.32)}
.btn.line:hover{border-color:var(--champagne);color:var(--champagne)}
.ph{display:inline-block;font:500 .6rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;padding:.32rem .55rem;border:1px dashed rgba(220,199,156,.55);color:var(--champagne);background:rgba(10,23,18,.72)}
.proto{background:#20180a;color:var(--champagne);font-size:.76rem;text-align:center;padding:.55rem var(--gutter);border-bottom:1px solid #3b2e12}

/* nav */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem var(--gutter);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(10,23,18,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.brand img{width:32px;height:32px}
.brand b{font:400 1rem var(--display);letter-spacing:.2em}
.nav ul{display:none;gap:1.8rem;list-style:none;margin:0;padding:0}
.nav ul a{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;opacity:.85}
.nav ul a:hover{color:var(--champagne);opacity:1}
.nav .btn{display:none;min-height:42px;padding:0 1.1rem}
.menu{width:44px;height:44px;border:1px solid var(--line);background:rgba(10,23,18,.6);color:var(--ivory);display:grid;place-items:center;cursor:pointer}
.menu i,.menu i::before,.menu i::after{display:block;width:18px;height:1px;background:currentColor;position:relative;content:""}
.menu i::before{position:absolute;top:-6px}.menu i::after{position:absolute;top:6px}
.drawer{position:fixed;inset:0;z-index:70;background:var(--pine);display:grid;align-content:center;gap:1.4rem;padding:var(--gutter)}
.drawer a{font:400 2rem var(--display);text-decoration:none}
.drawer button{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:var(--gutter)}
@media(min-width:980px){.nav ul{display:flex}.nav .btn{display:inline-flex}.menu{display:none}}

/* 1 hero: the unwrapping */
.hero{height:165vh}
.hero .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:center 35%/cover no-repeat;transform:scale(calc(1.12 - var(--p,0)*.12));filter:brightness(calc(.62 + var(--p,0)*.3))}
.hero .bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.06 - var(--p,0)*.06));filter:brightness(calc(.72 + var(--p,0)*.22))}
.hero .shade{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,var(--pine) 0%,rgba(10,23,18,.75) 30%,rgba(10,23,18,.1) 60%,rgba(10,23,18,.45) 100%)}
.band{position:absolute;z-index:1;background:var(--oxblood);box-shadow:inset 0 0 0 1px rgba(184,145,74,.0),0 0 40px rgba(0,0,0,.35)}
.band::before,.band::after{content:"";position:absolute;background:var(--gold)}
.band.v{top:-5%;bottom:-5%;left:50%;width:clamp(34px,7vw,64px);transform:translateX(-50%) translateY(calc(var(--p,0)*-115%))}
.band.v::before,.band.v::after{top:0;bottom:0;width:1px}.band.v::before{left:5px}.band.v::after{right:5px}
.band.h{left:-5%;right:-5%;top:var(--bt,22%);height:clamp(34px,7vw,64px);transform:translateX(calc(var(--p,0)*115%))}
.band.h::before,.band.h::after{left:0;right:0;height:1px}.band.h::before{top:5px}.band.h::after{bottom:5px}
.bow{position:absolute;z-index:1;left:50%;top:calc(var(--bt,22%) + clamp(17px,3.5vw,32px));width:clamp(110px,24vw,190px);transform:translate(-50%,-50%) scale(calc(1 - var(--p,0)*.6)) rotate(calc(var(--p,0)*-35deg));opacity:calc(1 - var(--p,0)*1.6)}
.hero .copy{position:absolute;inset:auto 0 0;padding:0 var(--gutter) calc(clamp(96px,14vh,130px) + env(safe-area-inset-bottom,0px));display:grid;gap:1.1rem;z-index:3}
.hero h1{font-size:clamp(3.1rem,15vw,8.2rem);line-height:.92}
.hero .lede{color:#cfd5cf}
.hero .row{display:grid;gap:.6rem}
.hero .ph{position:absolute;top:84px;left:var(--gutter);z-index:3}
@media(min-width:700px){.hero .row{display:flex;flex-wrap:wrap}.hero{height:200vh}.hero .stage{--bt:36%}}

/* 2 offers: swipe on phones */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:2rem calc(var(--gutter)*-1) 0;padding:0 var(--gutter) .5rem;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.offer{position:relative;scroll-snap-align:center;aspect-ratio:3/4.3;overflow:hidden;text-decoration:none;border:1px solid var(--line);display:block}
.offer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62);transition:transform 1.2s,filter .6s}
.offer:hover img{transform:scale(1.05);filter:brightness(.78)}
.offer .in{position:absolute;inset:auto 0 0;padding:1.4rem;display:grid;gap:.55rem;background:linear-gradient(to top,rgba(10,23,18,.96) 30%,transparent)}
.offer .in p{color:#c4ccc6;font-size:.94rem}
.offer .go{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne)}
.offer.star{border-color:rgba(220,199,156,.6)}
.offer .flag{position:absolute;top:1rem;left:1rem;background:var(--oxblood);color:var(--ivory);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;padding:.42rem .65rem;border:1px solid var(--gold)}
.dots{display:flex;justify-content:center;gap:8px;margin-top:1rem}
.dots i{width:22px;height:2px;background:var(--line);transition:background .3s}
.dots i.on{background:var(--champagne)}
@media(min-width:900px){.rail{grid-auto-flow:row;grid-template-columns:1fr 1.15fr 1fr;overflow:visible;margin-inline:0;padding:0}.offer{aspect-ratio:3/4.4}.dots{display:none}}

/* 3 spaces */
.seg{display:flex;gap:4px;margin-top:2rem;border:1px solid var(--line);padding:4px;max-width:560px}
.seg button{flex:1;min-height:46px;background:transparent;border:0;color:var(--mist);font:500 .7rem var(--body);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.seg button[aria-selected="true"]{background:var(--pine-3);color:var(--champagne)}
.space{position:relative;margin-top:12px;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line)}
.space img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s,transform 6s ease-out}
.space img.fade{opacity:0}
.space .in{position:absolute;inset:auto 0 0;padding:1.4rem;display:grid;gap:.8rem;background:linear-gradient(to top,rgba(10,23,18,.95) 35%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:.72rem;letter-spacing:.06em;padding:.4rem .7rem;border:1px solid rgba(220,199,156,.4);background:rgba(10,23,18,.6)}
.space .ph{position:absolute;top:1rem;left:1rem}
@media(min-width:900px){.space{aspect-ratio:16/8}}

/* 4 the vessel */
.vessel .grid{display:grid;gap:2.4rem;align-items:center;margin-top:2rem}
.stagebox{position:relative;aspect-ratio:1;max-width:520px;width:100%;margin-inline:auto;display:grid;place-items:center}
.halo{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(220,199,156,.22),transparent 65%);opacity:calc(.3 + var(--o,0)*.7);transition:opacity 1.4s}
.vsl{position:relative;width:58%;aspect-ratio:1.15}
.vsl .body{position:absolute;inset:28% 0 0;background:linear-gradient(160deg,#18342a,#0b1913);border:1px solid var(--gold)}
.vsl .body::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:12%;transform:translateX(-50%);background:var(--oxblood);border-inline:1px solid var(--gold)}
.vsl .lid{position:absolute;left:-4%;right:-4%;top:14%;height:18%;background:linear-gradient(160deg,#1f3f33,#10241c);border:1px solid var(--champagne);transform:translateY(calc(var(--o,0)*-120%)) rotate(calc(var(--o,0)*-9deg));transition:transform 1.4s cubic-bezier(.2,.7,.1,1)}
.vsl .lid::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:11.5%;transform:translateX(-50%);background:var(--oxblood);border-inline:1px solid var(--gold)}
.vsl .glow{position:absolute;left:8%;right:8%;top:27%;height:6%;background:radial-gradient(ellipse,rgba(240,210,150,.9),transparent 70%);opacity:var(--o,0);filter:blur(6px);transition:opacity 1.4s}
.contents{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.contents li{background:var(--pine);padding:1rem;display:grid;gap:.2rem;opacity:calc(.25 + var(--o,0)*.75);transform:translateY(calc((1 - var(--o,0))*10px));transition:opacity .9s,transform .9s}
.contents small{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)}
.contents b{font-weight:500;font-size:.95rem}
.vessel .acts{display:grid;gap:.6rem;margin-top:1.4rem}
@media(min-width:900px){.vessel .grid{grid-template-columns:1fr 1fr}.vessel .acts{display:flex}}

/* appreciation collection */
.gift{display:grid;grid-template-columns:1.1fr .9fr;gap:6px;margin-top:2rem}
.gift figure{position:relative;margin:0;overflow:hidden;border:1px solid var(--line);aspect-ratio:9/14}
.gift video,.gift img{width:100%;height:100%;object-fit:cover;display:block}
.gift .ph{position:absolute;left:.6rem;bottom:.6rem}
.gift .gi{align-self:end;aspect-ratio:9/13}
.depths{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.depths li{background:var(--pine);padding:1.3rem 0;display:grid;gap:.3rem}
.depths span{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--champagne)}
.depths b{font:400 1.45rem var(--display)}
.depths p{color:var(--mist);font-size:.94rem;max-width:46ch}
.vessel .acts{display:grid;gap:.6rem;margin-top:1.6rem}
@media(min-width:900px){.gift{grid-template-columns:1fr 1fr;max-width:860px}.depths{grid-template-columns:repeat(3,1fr);background:none;border:0;gap:2rem}.depths li{border-top:1px solid var(--gold);padding-top:1.3rem}.vessel .acts{display:flex}}

/* 5 one program */
.pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:2rem}
.pair figure{margin:0;position:relative;aspect-ratio:3/4.2;overflow:hidden}
.pair img{width:100%;height:100%;object-fit:cover;filter:brightness(.82)}
.pair figcaption{position:absolute;left:.7rem;bottom:.7rem;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;background:rgba(10,23,18,.8);padding:.35rem .55rem}
.pair .knot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--oxblood);border:1px solid var(--gold);display:grid;place-items:center;font:400 1.6rem var(--display);color:var(--champagne)}
.flow{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:0;border-left:1px solid var(--line)}
.flow li{position:relative;padding:0 0 1.6rem 1.6rem;display:grid;gap:.25rem}
.flow li::before{content:"";position:absolute;left:-6px;top:.4rem;width:11px;height:11px;border-radius:50%;border:1px solid var(--champagne);background:var(--pine)}
.flow li.on::before{background:var(--champagne)}
.flow b{font:400 1.35rem var(--display)}
.flow span{color:var(--mist);font-size:.94rem}
.program .acts{display:grid;gap:.6rem;margin-top:.6rem}
@media(min-width:900px){.flow{grid-template-columns:repeat(4,1fr);border-left:0;border-top:1px solid var(--line);gap:2rem}.flow li{padding:1.8rem 0 0}.flow li::before{left:0;top:-6px}.program .acts{display:flex;align-items:center;gap:1rem}}

/* 6 proof */
.proof .figs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.proof .figs div{background:var(--pine);padding:1.4rem;display:grid;gap:.3rem}
.proof .figs b{font:400 clamp(2.2rem,8vw,3.4rem)/1 var(--display);color:var(--champagne);font-variant-numeric:tabular-nums}
.proof .figs span{color:var(--mist);font-size:.88rem}
.proof .figs .wide{grid-column:1/-1}
.quotes{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:12px calc(var(--gutter)*-1) 0;padding:0 var(--gutter) .4rem;scrollbar-width:none}
.quotes::-webkit-scrollbar{display:none}
.quotes blockquote{margin:0;scroll-snap-align:center;border:1px solid var(--line);background:var(--pine-2);padding:1.5rem;display:grid;gap:1rem}
.quotes q{font:italic 400 1.2rem/1.45 var(--display);color:#d9ddd8}
.quotes cite{font-style:normal;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)}
.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.logos div{aspect-ratio:2.4;border:1px dashed var(--line);display:grid;place-items:center;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);text-align:center;padding:.3rem}
@media(min-width:900px){.proof .figs{grid-template-columns:repeat(3,1fr)}.proof .figs .wide{grid-column:auto}.quotes{grid-auto-columns:calc((100% - 24px)/3);margin-inline:0;padding-inline:0}.logos{grid-template-columns:repeat(6,1fr)}}

/* 7 standards */
.std{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.std li{background:var(--pine);padding:1.3rem 0;display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:baseline}
.std b{font:400 1.3rem var(--display)}
.std span{color:var(--mist);font-size:.94rem}
.assure{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.assure span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.55rem .8rem;border:1px solid var(--line)}
@media(min-width:900px){.std{grid-template-columns:repeat(4,1fr);background:none;border:0;gap:2rem}.std li{grid-template-columns:1fr;border-top:1px solid var(--gold);padding-top:1.3rem}}

/* 8 key dates */
.dates{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.dates div{background:var(--pine-2);padding:1.2rem 1.3rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.dates b{font:400 1.15rem var(--display)}
.dates span{color:var(--champagne);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.95rem}
@media(min-width:900px){.dates{grid-template-columns:repeat(4,1fr)}.dates div{display:grid;gap:.6rem}}

/* 9 inquiry */
.inq{margin-top:2rem;border:1px solid rgba(220,199,156,.35);background:linear-gradient(180deg,var(--pine-2),var(--pine));padding:clamp(1.2rem,4vw,2.6rem);max-width:860px}
.bar{display:flex;gap:5px;margin-bottom:1.6rem}.bar i{flex:1;height:2px;background:var(--line)}.bar i.on{background:var(--champagne)}
.step{display:grid;gap:1.2rem}
.step[hidden]{display:none}
fieldset{border:0;margin:0;padding:0;min-width:0}
.step legend,.step .q{font:400 clamp(1.6rem,6vw,2.2rem)/1.1 var(--display);padding:0;margin-bottom:.2rem}
.opts{display:grid;gap:8px}
.opts label{position:relative;min-height:62px;border:1px solid var(--line);padding:.9rem 1rem;cursor:pointer;display:grid;gap:.15rem;align-content:center;transition:border-color .25s,background .25s}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts label:has(input:checked){border-color:var(--champagne);background:rgba(220,199,156,.1)}
.opts label:has(input:focus-visible){outline:2px solid var(--champagne);outline-offset:2px}
.opts b{font-weight:500}
.opts small{color:var(--mist)}
.fields{display:grid;gap:10px}
.fields label{display:grid;gap:.35rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.fields input,.fields textarea{min-height:var(--tap);background:transparent;border:1px solid var(--line);color:var(--ivory);padding:.8rem;font:400 16px var(--body);letter-spacing:0;text-transform:none}
.fields input:focus,.fields textarea:focus{border-color:var(--champagne);outline:none}
.err{color:#f0b38a;font-size:.86rem;min-height:1.2em}
.navs{display:flex;gap:.6rem}.navs #next{flex:1}
.brief{border:1px solid var(--line);padding:1.2rem;display:grid;gap:.5rem}
.brief div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.5rem;font-size:.94rem}
.brief div span:first-child{color:var(--mist);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.brief .flagline{color:var(--champagne)}
@media(min-width:700px){.opts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.fields{grid-template-columns:1fr 1fr}.fields .full{grid-column:1/-1}}

/* 10 beyond */
.beyond .cards{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:2rem calc(var(--gutter)*-1) 0;padding:0 var(--gutter) .4rem;scrollbar-width:none}
.beyond .cards::-webkit-scrollbar{display:none}
.beyond article{scroll-snap-align:start;border:1px solid var(--line);background:var(--pine-2);padding:1.5rem;display:grid;gap:.55rem;align-content:start}
.beyond article span{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne)}
.beyond article b{font:400 1.4rem var(--display)}
.beyond article p{color:var(--mist);font-size:.93rem}
@media(min-width:900px){.beyond .cards{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);margin-inline:0;padding-inline:0;overflow:visible}}

/* 11 reach: the globe */
.reach{overflow:hidden}
.reach .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;margin-top:1.6rem;align-items:center}
.globe{position:relative;width:calc(100% + 2*var(--gutter));aspect-ratio:1;margin-inline:calc(var(--gutter)*-1);touch-action:pan-y;cursor:grab}
.globe canvas{width:100%;height:100%;display:block}
.globe{-webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 58%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 50% 58%,#000 62%,transparent 100%)}
.hq{position:absolute;transform:translate(14px,-50%);display:flex;gap:.6rem;align-items:center;background:rgba(10,23,18,.9);border:1px solid var(--champagne);padding:.4rem;pointer-events:none;max-width:210px;transition:opacity .3s}
.hq img{width:58px;height:40px;object-fit:cover}
.hq b{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);font-weight:500}
.hq small{display:block;color:var(--mist);font-size:.64rem;line-height:1.3}
.chapters{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;border-left:1px solid var(--line)}
.chapters li{position:relative;padding-left:1.3rem;display:grid;gap:.15rem}
.chapters li::before{content:"";position:absolute;left:-5px;top:.45rem;width:9px;height:9px;border-radius:50%;border:1px solid var(--champagne);background:var(--pine)}
.chapters li.now::before{background:var(--champagne)}
.chapters em{font-style:normal;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne)}
.chapters b{font:400 1.2rem var(--display)}
.chapters span{color:var(--mist);font-size:.92rem}
.cities{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
.cities::-webkit-scrollbar{display:none}
.cities button{flex:none;min-height:40px;background:transparent;border:1px solid var(--line);color:var(--ivory);font:400 .8rem var(--body);padding:0 .9rem;cursor:pointer}
.cities button.on{border-color:var(--champagne);color:var(--champagne);background:rgba(220,199,156,.08)}
.reach .story{display:grid;gap:1.4rem;min-width:0}
@media(max-width:699px){.hq img{display:none}.hq{max-width:150px;transform:translate(calc(-100% - 14px),-50%)}}
@media(min-width:900px){.reach .grid{grid-template-columns:1.2fr 1fr}.globe{width:100%;margin-inline:0}.cities{flex-wrap:wrap;margin-inline:0;padding-inline:0}}

/* 12 close */
.close{text-align:center;padding-block:clamp(100px,18vw,180px) 120px}
.close .ribbon{margin-inline:auto}
.close h2{max-width:14ch;margin:1rem auto 0}
.close .acts{display:grid;gap:.6rem;max-width:420px;margin:2rem auto 0}
.contact{margin-top:1.6rem;color:var(--mist);font-size:.92rem;display:grid;gap:.3rem;user-select:all}
footer{border-top:1px solid var(--line);padding-block:2rem calc(5.5rem + env(safe-area-inset-bottom,0px));color:var(--mist);font-size:.8rem}
footer .wrap{display:grid;gap:1rem}
footer nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
footer a{text-decoration:none}footer a:hover{color:var(--champagne)}
@media(min-width:900px){footer .wrap{display:flex;justify-content:space-between}.close .acts{display:flex;justify-content:center;max-width:none}}

/* mobile dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:1fr 1fr 1.7fr;gap:1px;background:var(--line);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(calc(var(--hide,0)*110%));transition:transform .4s}
.dock a{background:var(--pine);min-height:56px;display:grid;place-items:center;font:600 .66rem var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.dock .main{background:var(--champagne);color:var(--pine)}
@media(min-width:900px){.dock{display:none}}

/* lead sheet */
.lead{position:fixed;inset:0;z-index:80;display:grid;align-items:end;background:rgba(4,9,7,.7);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.lead[hidden]{display:none}
.lead .sheet{background:var(--pine-2);border-top:1px solid var(--champagne);max-height:92svh;overflow:auto;animation:up .45s cubic-bezier(.2,.7,.1,1);padding-bottom:env(safe-area-inset-bottom,0px)}
@keyframes up{from{transform:translateY(100%)}}
.lead .sheet>img{width:100%;height:150px;object-fit:cover}
.lead .in{padding:1.4rem var(--gutter) 1.6rem;display:grid;gap:.9rem}
.lead h3{font-size:clamp(1.6rem,6vw,2rem)}
.lead p{color:var(--mist);font-size:.92rem}
.lead form{display:grid;gap:.55rem}
.lead input,.lead select{min-height:var(--tap);background:transparent;border:1px solid var(--line);color:var(--ivory);padding:0 .8rem;font:400 16px var(--body)}
.lead select option{background:var(--pine-2)}
.lead input:focus,.lead select:focus{border-color:var(--champagne);outline:none}
.lead .fine{font-size:.7rem}
.lead .x{position:absolute;top:.7rem;right:.7rem;width:44px;height:44px;background:rgba(10,23,18,.85);border:1px solid var(--line);color:var(--ivory);font-size:1.2rem;cursor:pointer}
.lead .skip{background:none;border:0;color:var(--mist);text-decoration:underline;font-size:.84rem;cursor:pointer;justify-self:start;padding:.4rem 0}
.lead .sheet{position:relative}
@media(min-width:760px){.lead{align-items:center;justify-items:center;padding:16px}.lead .sheet{display:grid;grid-template-columns:.9fr 1.1fr;max-width:840px;border:1px solid rgba(220,199,156,.5);animation:none}.lead .sheet>img{height:100%;min-height:420px}}

.reveal{transition:opacity 1s,transform 1s}
.reveal.pre{opacity:.001;transform:translateY(22px)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero{height:auto}.hero .stage{position:relative}.band,.bow{display:none}.reveal.pre{opacity:1;transform:none}}

/* ===== inner pages ===== */
.brand img.mk{width:auto;height:34px}
.nav ul a[aria-current="page"]{color:var(--champagne);opacity:1}
.phero{position:relative;min-height:92vh;min-height:92svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.phero>img,.phero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.04);animation:settle 2.4s cubic-bezier(.2,.7,.1,1) forwards}
@keyframes settle{to{transform:scale(1)}}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--pine) 2%,rgba(10,23,18,.82) 34%,rgba(10,23,18,.18) 66%,rgba(10,23,18,.55) 100%)}
.phero .copy{padding:0 var(--gutter) calc(clamp(88px,12vh,120px) + env(safe-area-inset-bottom,0px));display:grid;gap:1.05rem;max-width:1280px;width:100%;margin-inline:auto}
.phero h1{font-size:clamp(2.9rem,13vw,7rem);line-height:.94}
.phero .lede{color:#cfd5cf;max-width:52ch}
.phero .row{display:grid;gap:.6rem}
.phero .ph{position:absolute;top:calc(84px + env(safe-area-inset-top,0px));left:var(--gutter)}
.phero .strap{position:absolute;left:0;right:0;top:calc(30% + 0px);height:clamp(28px,5vw,46px);background:var(--oxblood);z-index:-1;opacity:.92;transform-origin:left;animation:strap 1.6s .2s cubic-bezier(.2,.7,.1,1) both}
.phero .strap::before,.phero .strap::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--gold)}.phero .strap::before{top:4px}.phero .strap::after{bottom:4px}
@keyframes strap{from{transform:scaleX(0)}}
@media(min-width:700px){.phero .row{display:flex;flex-wrap:wrap}}

.crumbs{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--champagne)}

/* alternating space rows */
.rows{display:grid;gap:clamp(56px,10vw,110px);margin-top:2.4rem}
.rowx{display:grid;gap:1.4rem;align-items:center}
.rowx figure{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line)}
.rowx figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.7,.1,1)}
.rowx figure:hover img{transform:scale(1.04)}
.rowx figure .ph{position:absolute;left:.8rem;top:.8rem}
.rowx .txt{display:grid;gap:.9rem}
.rowx .txt p{color:var(--mist);max-width:48ch}
.rowx .num{font:italic 400 1rem var(--display);color:var(--champagne)}
@media(min-width:900px){.rowx{grid-template-columns:1.1fr .9fr;gap:4rem}.rowx.flip figure{order:2}.rowx figure{aspect-ratio:5/4}}

/* included grid */
.incl{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.incl li{background:var(--pine);padding:1.4rem 1.3rem;display:grid;gap:.35rem}
.incl small{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne)}
.incl b{font:400 1.35rem var(--display)}
.incl span{color:var(--mist);font-size:.94rem}
@media(min-width:700px){.incl{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.incl{grid-template-columns:repeat(3,1fr)}}

/* proof gallery (real work only) */
.season .gal{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:2rem}
.season .gal figure{position:relative;margin:0;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4;background:var(--pine-2)}
.season .gal figure.w{grid-column:1/-1;aspect-ratio:4/5}
.season .gal img,.season .gal video{width:100%;height:100%;object-fit:cover;display:block}
.season .gal figcaption{position:absolute;left:.6rem;bottom:.6rem;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;background:rgba(10,23,18,.82);padding:.35rem .55rem;border:1px solid rgba(220,199,156,.4);color:var(--champagne)}
.real{display:inline-flex;align-items:center;gap:.45rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);margin-top:1rem}
.real::before{content:"";width:7px;height:7px;border-radius:50%;background:#7fbf8e;box-shadow:0 0 0 3px rgba(127,191,142,.18)}
@media(min-width:900px){.season .gal{grid-template-columns:repeat(4,1fr);grid-auto-flow:dense}.season .gal figure.w{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}}

/* occasions rail reuses .beyond .cards */
.occ article a{color:var(--champagne);font-size:.8rem;text-decoration:none;letter-spacing:.06em}

/* depth cards with image */
.deep{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.deep article{background:var(--pine);padding:1.6rem 1.3rem;display:grid;gap:.6rem;align-content:start;position:relative}
.deep article span{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--champagne)}
.deep article b{font:400 clamp(1.6rem,6vw,2rem)/1.05 var(--display)}
.deep article p{color:var(--mist);font-size:.95rem}
.deep article.hi{background:linear-gradient(180deg,var(--pine-2),var(--pine))}
.deep article.hi::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold)}
@media(min-width:900px){.deep{grid-template-columns:repeat(3,1fr)}.deep article{padding:2.2rem 1.8rem}}

/* cross-sell band */
.xsell{position:relative;overflow:hidden;border:1px solid rgba(220,199,156,.4);display:grid;margin-top:2rem}
.xsell img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:brightness(.45)}
.xsell .in{position:relative;padding:clamp(1.6rem,5vw,3.2rem);display:grid;gap:1rem;max-width:620px}
.xsell .in p{color:#cfd5cf}
.xsell .acts{display:grid;gap:.6rem}
@media(min-width:700px){.xsell .acts{display:flex;flex-wrap:wrap}}

/* faq */
.faq{margin-top:2rem;border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:1rem;font:400 clamp(1.15rem,4.4vw,1.35rem)/1.25 var(--display);padding:.9rem 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 1.6rem var(--body);color:var(--champagne);transition:transform .3s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--mist);padding:0 0 1.3rem;max-width:62ch}

/* quick inquiry */
.qform{margin-top:2rem;border:1px solid rgba(220,199,156,.35);background:linear-gradient(180deg,var(--pine-2),var(--pine));padding:clamp(1.2rem,4vw,2.6rem);max-width:860px;display:grid;gap:1rem}
.qform .fields select{min-height:var(--tap);background:transparent;border:1px solid var(--line);color:var(--ivory);padding:0 .8rem;font:400 16px var(--body);letter-spacing:0;text-transform:none;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--champagne) 50%),linear-gradient(135deg,var(--champagne) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.qform .fields select option{background:var(--pine-2)}
.qform .fields select:focus{border-color:var(--champagne);outline:none}
.qform .fine{color:var(--mist);font-size:.78rem}
.qform .done{display:grid;gap:.9rem}
.qform .done h3{font-size:clamp(1.7rem,6vw,2.3rem)}
.qform .done p{color:var(--mist)}
.qform .done a{color:var(--champagne)}

/* redirect notice */
.moved{min-height:100svh;display:grid;place-items:center;text-align:center;padding:var(--gutter)}
.moved .in{display:grid;gap:1rem;justify-items:center;max-width:520px}
.moved img{height:72px;width:auto}
.moved p{color:var(--mist)}
.btn{text-align:center}
@media(max-width:699px){.phero .strap{display:none}}
.ph.real-tag{border-style:solid;border-color:rgba(127,191,142,.6);color:#cfe8d4}
.season .gal img,.season .gal video{position:absolute;inset:0}

/* design preview slider */
.ba{position:relative;margin-top:2rem;aspect-ratio:3/4;max-width:860px;overflow:hidden;border:1px solid rgba(220,199,156,.4);--x:50%;user-select:none;touch-action:pan-y}
.ba>img,.ba-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba-h{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--champagne);pointer-events:none}
.ba-h::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--pine);border:1px solid var(--champagne);color:var(--champagne);display:grid;place-items:center;font:500 1rem var(--body);letter-spacing:.1em}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-l,.ba-r{position:absolute;bottom:.8rem;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;background:rgba(10,23,18,.82);padding:.35rem .55rem;pointer-events:none}
.ba-l{left:.8rem}.ba-r{right:.8rem;color:var(--champagne)}
.ba-tag{position:absolute;top:.8rem;left:.8rem;pointer-events:none}
@media(min-width:900px){.ba{aspect-ratio:4/3}.ba>img,.ba-top img{object-position:center 60%}}
.cdir{display:grid;grid-auto-flow:column;grid-auto-columns:62%;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:1rem calc(var(--gutter)*-1) 0;padding:0 var(--gutter) .4rem;scrollbar-width:none}
.cdir::-webkit-scrollbar{display:none}
.cdir figure{position:relative;margin:0;aspect-ratio:3/4.4;overflow:hidden;border:1px solid var(--line);scroll-snap-align:start}
.cdir img{width:100%;height:100%;object-fit:cover}
.cdir figcaption{position:absolute;left:.6rem;bottom:.6rem;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;background:rgba(10,23,18,.82);padding:.35rem .55rem;border:1px dashed rgba(220,199,156,.55);color:var(--champagne)}
.cdir figcaption::before{content:"Concept · "}
.cnote{color:var(--mist);font-size:.8rem;margin-top:.9rem}
@media(min-width:900px){.cdir{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);margin-inline:0;padding-inline:0;overflow:visible}}
