@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap');

:root{
  --lime:#f2f0e9;
  --paper:#fbfaf6;
  --graphite:#2f3538;
  --euca:#cbd8d0;
  --lav:#d8d6de;
  --clay:#d2a399;
  --ocean:#526875;
  --amber:#d9a34a;
  --muted:#6f7476;
  --line:rgba(47,53,56,.16);
  --max:1460px;
  --pad:clamp(1.05rem,4vw,4.6rem);
  --sec:clamp(5rem,9vw,9.2rem);
  --serif:"Newsreader",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;
  --mono:"IBM Plex Mono","Courier New",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--graphite);
  font-family:var(--sans);line-height:1.6;overflow-x:hidden
}
img{display:block;width:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600}
ul{list-style:none;margin:0;padding:0}
address{font-style:normal}
a:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.shell{width:min(100%,var(--max));margin:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:1rem;top:-10rem;z-index:999;background:var(--paper);padding:.75rem 1rem;border:1px solid var(--graphite)}
.skip:focus{top:1rem}
.code{font:400 .64rem var(--mono);text-transform:uppercase;letter-spacing:.11em}
.ref{display:flex;align-items:center;gap:.7rem;font:400 .66rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ocean);margin-bottom:1.8rem}
.ref:before{content:"";width:24px;height:2px;background:var(--amber)}

/* header */
.top{background:var(--graphite);color:var(--paper)}
.top .shell{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.header{background:rgba(251,250,246,.96);border-bottom:1px solid var(--graphite)}
.header-grid{min-height:92px;display:grid;grid-template-columns:.82fr 1.18fr}
.brand{display:flex;flex-direction:column;justify-content:center;padding-right:2rem;font:600 1.9rem/.8 var(--serif);text-transform:uppercase}
.brand small{font:400 .58rem var(--mono);letter-spacing:.14em;margin-top:.58rem}
.nav{display:grid;grid-template-columns:repeat(5,1fr);border-left:1px solid var(--line)}
.nav a{position:relative;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);font-size:.76rem;text-transform:uppercase;letter-spacing:.07em}
.nav a:after{content:"";position:absolute;left:24%;right:24%;bottom:13px;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:.2s}
.nav a:hover:after{transform:scaleX(1)}

/* hero */
.hero{padding:clamp(2rem,4vw,4rem) 0 clamp(5rem,9vw,9rem)}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto;gap:1rem}
.hero-title{grid-column:1/8;grid-row:1/3;min-height:590px;padding:clamp(2rem,5vw,5rem);background:var(--lime);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.hero-title:after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;border:1px solid rgba(82,104,117,.26);right:-90px;bottom:-70px;box-shadow:0 0 0 42px rgba(82,104,117,.045),0 0 0 84px rgba(82,104,117,.035)}
.hero h1{font:600 clamp(4.7rem,9.6vw,9.8rem)/.78 var(--serif);letter-spacing:-.055em;max-width:7ch;position:relative;z-index:2}
.hero h1 span{display:block;color:var(--ocean);margin-left:clamp(1rem,5vw,5rem)}
.hero-intro{display:grid;grid-template-columns:5rem 1fr;gap:1rem;max-width:34rem;position:relative;z-index:2}
.hero-intro p{font-size:clamp(1rem,1.2vw,1.16rem)}
.hero-main{grid-column:8/13;grid-row:1/4;min-height:760px;position:relative;overflow:hidden;background:var(--lav)}
.hero-main img{height:100%;min-height:760px;filter:saturate(.55) contrast(.98)}
.hero-main:before{content:"";position:absolute;z-index:2;left:0;right:0;top:39%;height:2px;background:var(--amber)}
.hero-main figcaption{position:absolute;z-index:3;left:1rem;top:calc(39% + 1rem);background:rgba(47,53,56,.88);color:var(--paper);padding:.6rem .7rem}
.hero-small{grid-column:1/5;grid-row:3;min-height:210px;position:relative;overflow:hidden}
.hero-small img{height:100%;min-height:210px;filter:saturate(.55)}
.hero-small figcaption{position:absolute;right:0;bottom:0;background:var(--ocean);color:white;padding:.55rem .7rem}
.hero-cta{grid-column:5/8;grid-row:3;background:var(--euca);min-height:210px;padding:1.4rem;display:flex;flex-direction:column;justify-content:space-between}
.hero-cta a{font:600 1.5rem var(--serif)}
.hero-cta a:after{content:" →"}

/* intro */
.intro{padding:var(--sec) 0;background:var(--lime)}
.intro-grid{display:grid;grid-template-columns:.34fr 1fr .74fr;gap:clamp(1.5rem,5vw,5.5rem)}
.big{font:600 clamp(6rem,12vw,12rem)/.67 var(--serif);color:rgba(47,53,56,.1)}
.intro h2,.treatments h2,.triad h2,.ritual h2,.studio h2,.visit h2{font-family:var(--serif);letter-spacing:-.045em}
.intro h2{font-size:clamp(3.2rem,6.5vw,6.8rem);line-height:.9;max-width:8ch}
.intro-copy{max-width:29rem}
.intro-copy p:first-child{font-size:1.14rem}
.intro-copy p+p{margin-top:1.25rem;color:var(--muted)}

/* treatments */
.treatments{padding:var(--sec) 0;background:var(--paper)}
.treat-head{display:grid;grid-template-columns:1fr .72fr;gap:3rem;align-items:end;margin-bottom:3.4rem}
.treatments h2{font-size:clamp(3.4rem,7vw,7.2rem);line-height:.87}
.treat-head p{max-width:31rem;justify-self:end;color:var(--muted)}
.treat-index{border-top:2px solid var(--graphite)}
.treat-row{display:grid;grid-template-columns:6.5rem minmax(220px,.8fr) minmax(250px,1.2fr);gap:1.5rem;align-items:center;min-height:122px;border-bottom:1px solid var(--line);position:relative}
.treat-row:before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--euca)}
.treat-row:nth-child(2):before{background:var(--lav)}
.treat-row:nth-child(3):before{background:var(--clay)}
.treat-row:nth-child(4):before{background:var(--ocean)}
.treat-row .code{padding-left:1.2rem;color:var(--ocean)}
.treat-row h3{font:600 clamp(1.3rem,2.2vw,2rem) var(--serif)}
.treat-row p{max-width:38rem;color:var(--muted);font-size:.91rem}

/* triad */
.triad{display:grid;grid-template-columns:1.05fr .95fr 1fr}
.triad-panel{min-height:620px;padding:var(--sec) var(--pad);position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.triad-panel:after{content:"";position:absolute;width:220px;height:220px;border:1px solid currentColor;border-radius:50%;opacity:.12;right:-55px;bottom:-55px}
.triad-panel.body{background:var(--ocean);color:var(--paper)}
.triad-panel.face{background:var(--clay)}
.triad-panel.rest{background:var(--lav)}
.triad-panel h2{font-size:clamp(4.6rem,8.6vw,8.2rem);line-height:.78}
.triad-panel p{max-width:24rem;position:relative;z-index:2}
.triad-panel.body p{color:rgba(251,250,246,.76)}

/* ritual */
.ritual{padding:var(--sec) 0;background:var(--euca)}
.ritual-head{display:grid;grid-template-columns:.82fr 1.18fr;gap:3rem;align-items:end;margin-bottom:4rem}
.ritual h2{font-size:clamp(3.4rem,7vw,7.2rem);line-height:.87}
.ritual-head p{justify-self:end;max-width:31rem;color:#4e5b54}
.ritual-line{display:grid;grid-template-columns:repeat(5,1fr);position:relative;min-height:390px}
.ritual-line:before{content:"";position:absolute;left:5%;right:5%;top:49%;height:2px;background:var(--graphite)}
.ritual-step{position:relative;padding:1rem;align-self:start}
.ritual-step:nth-child(even){align-self:end}
.ritual-step:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:rgba(251,250,246,.8);border:4px solid var(--euca);box-shadow:0 0 0 1px var(--graphite);left:1rem}
.ritual-step:nth-child(odd):after{bottom:-39px}
.ritual-step:nth-child(even):after{top:-39px}
.ritual-step b{font:600 4rem/.8 var(--serif);color:rgba(47,53,56,.23)}
.ritual-step h3{font:600 1.45rem var(--serif);margin:.8rem 0 .5rem}
.ritual-step p{font-size:.84rem;color:#4e5b54;max-width:12rem}

/* studio */
.studio{padding:var(--sec) 0;background:var(--paper)}
.studio-head{display:flex;justify-content:space-between;align-items:end;gap:3rem;margin-bottom:3rem}
.studio h2{font-size:clamp(3.4rem,7vw,7.2rem);line-height:.87}
.studio-head p{max-width:30rem;color:var(--muted)}
.studio-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;grid-template-rows:280px 220px 190px;gap:1rem}
.studio-shot{position:relative;overflow:hidden;background:var(--lav)}
.studio-shot img{height:100%;filter:saturate(.5) contrast(.98)}
.studio-shot.a{grid-row:1/3}
.studio-shot.b{grid-column:2/4}
.studio-shot.c{grid-column:2;grid-row:2/4}
.studio-shot.e{grid-column:1;grid-row:3}
.studio-shot.f{grid-column:3;grid-row:3}
.studio-shot figcaption{position:absolute;left:0;bottom:0;background:rgba(47,53,56,.88);color:var(--paper);padding:.55rem .7rem}

/* visit */
.visit{background:var(--lav)}
.visit-grid{display:grid;grid-template-columns:.76fr 1.24fr;min-height:610px}
.visit-info{padding:var(--sec) var(--pad);display:flex;flex-direction:column;justify-content:space-between}
.visit-info h2{font-size:clamp(4rem,7.6vw,8rem);line-height:.83;max-width:6ch;color:var(--ocean)}
.visit-info address{font:600 clamp(2rem,3.8vw,4rem)/1 var(--serif)}
.visit-map{position:relative;padding:var(--sec) var(--pad);background:linear-gradient(rgba(251,250,246,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(251,250,246,.14) 1px,transparent 1px),var(--ocean);background-size:58px 58px;color:var(--paper);overflow:hidden}
.visit-map:before{content:"";position:absolute;left:8%;right:8%;top:56%;height:2px;background:var(--paper)}
.visit-map:after{content:"";position:absolute;width:96px;height:96px;border-radius:50%;background:var(--amber);left:62%;top:calc(56% - 48px);border:13px solid var(--ocean);box-shadow:0 0 0 2px var(--paper)}
.visit-word{position:relative;z-index:2;font:600 clamp(5rem,10vw,11rem)/.73 var(--serif);letter-spacing:-.05em}
.visit-note{position:absolute;right:var(--pad);bottom:var(--pad);max-width:26rem;color:rgba(251,250,246,.78);font-size:.9rem}

/* footer */
.footer{background:var(--ocean);color:var(--paper);padding:3.6rem 0 2rem;border-top:1px solid rgba(251,250,246,.14)}
.footer-title{font:600 clamp(4.8rem,10vw,10rem)/.7 var(--serif);text-transform:uppercase;padding-bottom:2rem;border-bottom:1px solid rgba(251,250,246,.18)}
.footer-title span{display:block}
.footer-title small{display:block;font:400 .11em var(--mono);letter-spacing:.15em;margin-top:1rem;color:#ebc979}
.footer-row{display:grid;grid-template-columns:1fr 1.5fr auto;gap:2rem;padding-top:1.5rem}
.footer-address{font-size:.78rem;line-height:1.7;color:rgba(251,250,246,.72)}
.footer-links{display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;font-size:.78rem}
.footer-links a:hover{color:#ebc979}
.footer-code{text-align:right;color:rgba(251,250,246,.56)}

/* legal */
.legal-hero{padding:clamp(4rem,8vw,8rem) 0 3rem;background:var(--lime);border-bottom:1px solid var(--graphite)}
.legal-back{display:inline-block;font:400 .66rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ocean);margin-bottom:3rem}
.legal-hero h1{font:600 clamp(4rem,8vw,8.5rem)/.82 var(--serif);max-width:8ch}
.legal-hero p{max-width:44rem;margin-top:1.8rem;color:var(--muted)}
.legal-layout{display:grid;grid-template-columns:.3fr .7fr;gap:clamp(2.5rem,7vw,8rem);padding:clamp(3rem,7vw,7rem) 0 var(--sec)}
.legal-index{position:sticky;top:2rem;align-self:start;border-top:1px solid var(--graphite)}
.legal-index a{display:block;padding:1rem 0;border-bottom:1px solid var(--line);font-size:.82rem}
.legal-copy{max-width:800px}
.legal-copy>section{scroll-margin-top:2rem;padding-bottom:4rem}
.legal-copy>section+section{padding-top:4rem;border-top:2px solid var(--graphite)}
.legal-copy h2{font:600 clamp(2.8rem,5vw,5.4rem)/.9 var(--serif);margin-bottom:2rem}
.legal-copy h3{font:600 1.6rem var(--serif);margin:2rem 0 .8rem}
.legal-copy p+p{margin-top:1rem}

@media(max-width:980px){
  .header-grid{grid-template-columns:.72fr 1.28fr}
  .nav{grid-template-columns:repeat(3,1fr)}
  .intro-grid{grid-template-columns:.3fr 1fr}
  .intro-copy{grid-column:2}
}
@media(max-width:760px){
  .top .shell span:last-child{display:none}
  .header-grid{grid-template-columns:1fr}
  .brand{min-height:76px;border-bottom:1px solid var(--line)}
  .nav{border-left:0;grid-template-columns:repeat(3,1fr)}
  .nav a{min-height:54px}
  .hero-grid{display:flex;flex-direction:column}
  .hero-title{order:1;min-height:520px}
  .hero h1{font-size:clamp(4.6rem,20vw,7.2rem)}
  .hero h1 span{margin-left:0}
  .hero-main{order:2;min-height:500px}
  .hero-main img{min-height:500px}
  .hero-small{order:3;min-height:230px}
  .hero-cta{order:4}
  .intro-grid{grid-template-columns:1fr}.intro-copy{grid-column:auto}.big{font-size:5.5rem}
  .treat-head,.ritual-head{display:block}
  .treat-head p,.ritual-head p{margin-top:1.4rem}
  .treat-row{grid-template-columns:5rem 1fr;padding:1rem 0}.treat-row p{grid-column:2}.treat-row .code{padding-left:1rem}
  .triad{grid-template-columns:1fr}.triad-panel{min-height:420px}
  .ritual-line{display:block;min-height:0;border-left:2px solid var(--graphite);margin-left:.5rem}.ritual-line:before{display:none}.ritual-step,.ritual-step:nth-child(even){padding:0 0 2.5rem 2rem}.ritual-step:after,.ritual-step:nth-child(odd):after,.ritual-step:nth-child(even):after{left:-10px;top:.3rem;bottom:auto}.ritual-step p{max-width:30rem}
  .studio-head{display:block}.studio-head p{margin-top:1.4rem}
  .studio-grid{grid-template-columns:1fr 1fr;grid-template-rows:280px 220px 220px}.studio-shot.a{grid-column:1/-1;grid-row:1}.studio-shot.b{grid-column:1/-1}.studio-shot.c{grid-row:3;grid-column:1}.studio-shot.e{grid-row:3;grid-column:2}.studio-shot.f{display:none}
  .visit-grid{grid-template-columns:1fr}.visit-info{min-height:430px}.visit-map{min-height:430px}
  .footer-row{grid-template-columns:1fr auto}.footer-links{grid-column:1/-1;grid-row:2}
  .legal-layout{grid-template-columns:1fr}.legal-index{position:static}
}
@media(max-width:500px){
  .nav{grid-template-columns:1fr 1fr}
  .hero-title{min-height:470px}
  .hero h1{font-size:clamp(4.2rem,22vw,6rem)}
  .studio-grid{display:block}.studio-shot{height:250px;margin-bottom:1rem}
  .footer-row{grid-template-columns:1fr}.footer-code{text-align:left}
}