/* Purple Rain — "Monsoon". Deep purple field, one grotesk, fine rules, butterscotch only for calls to action. */
:root{
  --field:#2B0538; --field-2:#24042F; --violet:#5D4580; --lav:#E8E3EF; --lav2:#C9BCDB;
  --butter:#E69C3E; --ink:#2B0538; --white:#fff; --paper:#FBFAFC;
  --muted:#6E6479; --rule:rgba(43,5,56,.15); --rule-d:rgba(232,227,239,.2); --soft:#BFB3CF;
  --font:'Hanken Grotesk',system-ui,sans-serif;
  --max:1440px; --gut:clamp(20px,3.4vw,52px); --hdr:76px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--white);color:var(--ink);font:400 18px/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:400;letter-spacing:-.035em;text-wrap:balance}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--butter);color:var(--ink);padding:10px 14px;z-index:999}
:focus-visible{outline:2px solid var(--butter);outline-offset:3px}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{font-size:14px;color:var(--muted);letter-spacing:0}
.field .label,.hero .label{color:var(--soft)}

/* links and buttons */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:56px;padding:0 22px;background:var(--butter);color:var(--ink);font:500 16px/1 var(--font);text-decoration:none;border:0;cursor:pointer;transition:background .2s}
.btn:hover{background:#F3B160}
.btn svg{width:18px;height:18px;transition:transform .25s}
.btn:hover svg{transform:translateX(4px)}
.btn:disabled{opacity:.6;cursor:wait}
.ul{text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;padding-bottom:3px;transition:background-size .3s}
.ul:hover{background-size:0 1px;background-position:right bottom}
.more{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:500}
.more svg{width:18px;height:18px;transition:transform .25s}
.more:hover svg{transform:translateX(4px)}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hdr);color:var(--white);transition:background .3s,color .3s,border-color .3s;border-bottom:1px solid transparent}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:40px}
.hdr .logo img{height:30px;width:auto}
.hdr .logo .dk{display:none}
.hdr nav{display:flex;gap:32px;font-size:16px}
.hdr nav a{text-decoration:none;opacity:.85;transition:opacity .2s}
.hdr nav a:hover,.hdr nav a[aria-current=page]{opacity:1}
.hdr nav a[aria-current=page]{background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;padding-bottom:3px}
.hdr .talk{margin-left:auto;font-size:16px;font-weight:500;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.hdr .talk i{width:8px;height:8px;border-radius:50%;background:var(--butter)}
.hdr .menu-btn{display:none;margin-left:auto;background:none;border:0;color:inherit;font:500 16px var(--font);cursor:pointer;padding:8px 0}
.hdr.solid{background:var(--white);color:var(--ink);border-color:var(--rule)}
.hdr.solid .logo .lt{display:none}.hdr.solid .logo .dk{display:block}
.drop{position:fixed;top:var(--hdr);left:0;right:0;z-index:59;background:var(--field);color:#fff;padding:8px var(--gut) 28px;display:none}
.drop.open{display:block}
.drop a{display:block;text-decoration:none;font-size:30px;letter-spacing:-.03em;padding:14px 0;border-bottom:1px solid var(--rule-d)}
.drop .btn{margin-top:20px;width:100%;font-size:16px;letter-spacing:0;border:0;padding:0 22px}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;background:var(--field);color:var(--white);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.rain{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rain i{position:absolute;top:-30%;width:1px;height:var(--h,90px);background:linear-gradient(180deg,rgba(201,188,219,0),rgba(201,188,219,.6));transform:rotate(14deg);animation:fall var(--d,2.6s) linear var(--delay,0s) infinite}
@keyframes fall{to{top:120%}}
.hero .wrap{position:relative;width:100%}
.wordmark{width:100%;aspect-ratio:1420/331;-webkit-mask:url(/img/logo-reverse.png) center/contain no-repeat;mask:url(/img/logo-reverse.png) center/contain no-repeat;background:linear-gradient(100deg,#C9BCDB 0%,#FFFFFF 16%,#E8E3EF 30%,#E69C3E 46%,#E0A982 58%,#C9BCDB 74%,#FFFFFF 88%,#C9BCDB 100%);background-size:320% 100%;animation:hue 16s ease-in-out infinite alternate}
@keyframes hue{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.hero .base{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px;align-items:end;margin-top:clamp(40px,7vh,88px);padding:28px 0 clamp(28px,5vh,52px);border-top:1px solid var(--rule-d)}
.hero h1{font-size:clamp(28px,2.8vw,42px);line-height:1.12;max-width:16em}
.hero .side{display:flex;justify-content:flex-end;align-items:end;gap:32px;flex-wrap:wrap}
.hero .side p{color:var(--soft);font-size:16px;max-width:20em}
@media (prefers-reduced-motion:reduce){.rain i{display:none}.wordmark{animation:none}}

/* statement */
.sec{padding:clamp(96px,12vw,176px) 0}
.statement h2{font-size:clamp(36px,4.6vw,72px);line-height:1.06;max-width:17em}
.statement .meta{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;margin-top:clamp(56px,7vw,104px)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.facts div{border-top:1px solid var(--ink);padding-top:18px}
.facts b{display:block;font-weight:500;font-size:20px;letter-spacing:-.01em;margin-bottom:6px}
.facts span{color:var(--muted);font-size:16px}

/* service chapters */
.chapter{display:block;text-decoration:none;color:inherit}
.chapter .img{position:relative;overflow:hidden;background:var(--field)}
.chapter .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.chapter .img .rain{opacity:0;transition:opacity .6s;z-index:1}
.chapter:hover .img .rain,.chapter:focus-visible .img .rain{opacity:1}
.chapter:hover .img img{transform:scale(1.03)}
.chapter.full .img{height:clamp(420px,82vh,860px)}
.chapter .cap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,2fr);gap:32px;align-items:start;padding:24px 0 0}
.chapter h3{font-size:clamp(30px,3.2vw,52px);line-height:1.04}
.chapter .cap p{color:var(--muted);font-size:17px;max-width:30em;padding-top:6px}
.chapter .cap .more{justify-self:end;padding-top:10px}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pair .chapter .img{aspect-ratio:4/5}
.pair .chapter .cap{grid-template-columns:minmax(0,1fr) auto}
.pair .chapter .cap p{grid-column:1/-1;grid-row:2;padding-top:0}
.chapters{display:grid;gap:clamp(72px,9vw,128px)}
.chapters .full-bleed .wrap{padding:0 var(--gut)}
.sec-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.sec-head h2{font-size:clamp(36px,4.6vw,72px);line-height:1.04}
.sec-head .label{align-self:start;padding-top:12px}

/* corridor */
.field{background:var(--field);color:var(--white);position:relative;overflow:hidden}
.corridor{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:center}
.corridor h2{font-size:clamp(34px,4vw,60px);line-height:1.05;margin:16px 0 24px}
.corridor p.lead{color:var(--soft);max-width:28em}
.mlist{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--rule-d)}
.mlist li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--rule-d)}
.mlist b{font-weight:500}
.mlist span{color:var(--soft);font-size:16px}
.map{width:100%;height:auto;overflow:visible}
.map .grid circle{fill:#4E2A64}
.map .arc{fill:none;stroke:var(--lav2);stroke-width:1.3;stroke-linecap:round}
.map .city circle{fill:var(--lav2)}
.map .city text{fill:#E4DCEE;font:400 15px var(--font)}
.map .hq circle.core{fill:var(--butter)}
.map .hq circle.ring{fill:none;stroke:var(--butter);stroke-opacity:.5}
.map .hq text{fill:#fff;font:500 17px var(--font)}
.js .map .arc{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js .map.go .arc{animation:draw 1.6s cubic-bezier(.6,0,.2,1) forwards}
.js .map .city{opacity:0}
.js .map.go .city{animation:fade .5s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.js .map .arc{stroke-dashoffset:0;animation:none!important}.js .map .city{opacity:1;animation:none!important}}

/* process */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.steps li{border-top:1px solid var(--ink);padding-top:20px}
.steps .label{display:block;margin-bottom:40px}
.steps h3{font-size:clamp(24px,2vw,30px);line-height:1.12;margin-bottom:12px}
.steps p{color:var(--muted);font-size:16px}

/* price list */
.plist{border-top:1px solid var(--ink)}
.pitem{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,2fr) auto;gap:32px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--rule)}
.pitem h3{font-size:clamp(22px,1.9vw,28px);line-height:1.15}
.pitem p{color:var(--muted);font-size:16px}
.pitem .price{font-size:clamp(20px,1.6vw,24px);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.pitem .price small{display:block;font-size:14px;color:var(--muted);letter-spacing:0}
.pitem .order{background:none;border:0;padding:0;font:500 16px var(--font);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;gap:10px;align-items:center}
.pitem .order svg{width:18px;height:18px;transition:transform .25s}
.pitem .order:hover svg{transform:translateX(4px)}
.group+.group{margin-top:clamp(72px,8vw,120px)}
.group .gh{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;margin-bottom:24px;align-items:end}
.group h2{font-size:clamp(28px,2.8vw,44px)}
.group .gh p{color:var(--muted)}

/* commitments + faq */
.paper{background:var(--paper)}
.pledges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 56px}
.pledges div{border-top:1px solid var(--ink);padding-top:20px}
.pledges h3{font-size:clamp(24px,2vw,30px);line-height:1.15;margin-bottom:10px}
.pledges p{color:var(--muted)}
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex-shrink:0;width:18px;height:18px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .3s}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{padding:0 0 28px;color:var(--muted);max-width:44em}

/* closing + footer */
.closing{padding:clamp(112px,14vw,200px) 0 clamp(72px,8vw,112px)}
.closing .wrap{position:relative}
.closing h2{font-size:clamp(48px,7.4vw,124px);line-height:.98;max-width:11em}
.closing .act{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;margin-top:clamp(40px,5vw,64px)}
.closing .act a.ul{font-size:18px}
.foot{border-top:1px solid var(--rule-d)}
.foot .cols{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.6fr));gap:40px;padding:56px 0 48px}
.foot img{height:34px;width:auto;margin-bottom:18px}
.foot p,.foot li{color:var(--soft);font-size:15px}
.foot h3{font-size:15px;font-weight:500;letter-spacing:0;color:#fff;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none;color:var(--soft)}.foot a:hover{color:#fff}
.nl{display:grid;gap:12px}
.nl .row{display:flex;border-bottom:1px solid var(--soft)}
.nl input[type=email]{flex:1;min-width:0;background:none;border:0;color:#fff;font:400 16px var(--font);padding:10px 0}
.nl input[type=email]::placeholder{color:#9D90AF}
.nl input[type=email]:focus{outline:none}
.nl .row button{background:none;border:0;color:#fff;font:500 15px var(--font);cursor:pointer;padding:0 0 0 12px}
.nl .check{font-size:13px;color:var(--soft)}
.foot .bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding:22px 0 32px;border-top:1px solid var(--rule-d);font-size:14px;color:#9D90AF}
.foot .bottom a{color:var(--soft)}

/* forms */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
.form .full{grid-column:1/-1}
.f{display:grid;gap:2px;font-size:14px;color:var(--muted)}
.f input,.f textarea,.f select{font:400 20px/1.4 var(--font);letter-spacing:-.01em;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:10px 0;width:100%}
.f select{appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232B0538' stroke-width='1.5'/%3E%3C/svg%3E") right 2px center no-repeat}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-bottom:2px solid var(--butter);padding-bottom:9px}
.f textarea{min-height:110px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5}
.check input{width:17px;height:17px;margin:2px 0 0;flex-shrink:0;accent-color:var(--butter)}
.notice{padding:14px 16px;font-size:16px;background:var(--lav);color:var(--ink)}
.notice.err{background:#FBE9E4}
.form .btn{justify-self:start}

/* inner pages */
.phero{position:relative;background:var(--field);color:#fff;overflow:hidden;padding:calc(var(--hdr) + clamp(72px,12vh,140px)) 0 clamp(48px,6vw,80px)}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(48px,7.4vw,124px);line-height:.98;max-width:11em}
.phero .base{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px;margin-top:clamp(48px,7vw,96px);padding-top:24px;border-top:1px solid var(--rule-d)}
.phero .base p{color:var(--soft);max-width:30em}
.phero .jump{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:flex-end}
.phero .jump a{text-decoration:none;color:#fff;font-size:16px}
.phero .jump a:hover{color:var(--butter)}
.svc{padding:clamp(72px,9vw,128px) 0;border-bottom:1px solid var(--rule)}
.svc .img{height:clamp(360px,64vh,680px);overflow:hidden;position:relative;background:var(--field);margin-bottom:clamp(32px,4vw,56px)}
.svc .img img{width:100%;height:100%;object-fit:cover}
.svc .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px)}
.svc h2{font-size:clamp(40px,4.8vw,76px);line-height:1;margin-bottom:24px}
.svc .intro{font-size:clamp(20px,1.7vw,24px);line-height:1.45;letter-spacing:-.01em;color:var(--muted);margin-bottom:32px}
.svc .lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.svc .lists .label{display:block;margin-bottom:12px}
.svc ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.svc li{padding:13px 0;border-bottom:1px solid var(--rule)}
.svc .note{color:var(--muted);font-size:15px;margin-top:20px}
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(48px,7vw,128px);align-items:start}
.cinfo{display:grid;gap:0;border-top:1px solid var(--ink)}
.cinfo div{padding:20px 0;border-bottom:1px solid var(--rule)}
.cinfo span{display:block;font-size:14px;color:var(--muted);margin-bottom:4px}
.cinfo a,.cinfo p{font-size:20px;letter-spacing:-.01em;text-decoration:none}
.prose{max-width:46em}
.prose h2{font-size:32px;margin:44px 0 12px}
.prose p{color:var(--muted);margin-bottom:16px}

/* dialog */
.dlg{border:none;padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100vh - 24px);background:var(--white);color:var(--ink)}
.dlg::backdrop{background:rgba(43,5,56,.78)}
.dlg .in{padding:clamp(24px,4vw,44px)}
.dlg .dh{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:8px}
.dlg h2{font-size:clamp(28px,3vw,38px);line-height:1.08}
.dlg .x{background:none;border:0;font:400 30px/1 var(--font);cursor:pointer;color:var(--ink);padding:0 4px}
.dlg .about{color:var(--muted);margin-bottom:28px}

/* responsive */
@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .pitem{grid-template-columns:minmax(0,1fr) auto;gap:8px 24px}
  .pitem p{grid-column:1/-1;grid-row:2}
  .pitem .price{grid-column:1;grid-row:3}
  .pitem .order{grid-column:2;grid-row:3}
  .foot .cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot .cols>div:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  :root{--hdr:64px}
  .hdr nav,.hdr .talk{display:none}
  .hdr .menu-btn{display:block}
  .hdr .logo img{height:24px}
  .hero .base,.statement .meta,.sec-head,.corridor,.phero .base,.svc .grid,.contact-grid,.group .gh{grid-template-columns:minmax(0,1fr)}
  .hero .side{justify-content:flex-start}
  .phero .jump{justify-content:flex-start}
  .chapter .cap{grid-template-columns:minmax(0,1fr) auto;gap:8px 20px}
  .chapter .cap p{grid-column:1/-1;grid-row:2}
  .chapter .cap .more{grid-row:1;grid-column:2}
  .chapter.full .img{height:auto;aspect-ratio:4/5}
  .pair{grid-template-columns:minmax(0,1fr);gap:72px}
}
@media (max-width:620px){
  body{font-size:17px}
  .facts,.steps,.pledges,.svc .lists,.form,.foot .cols{grid-template-columns:minmax(0,1fr)}
  .hero .btn,.closing .btn{width:100%}
  .map .city text{font-size:20px}.map .hq text{font-size:22px}
  .mlist li{grid-template-columns:minmax(0,1fr);gap:2px}
}