/* Apple-style motion layer: glass header, scroll-linked hero, spring reveals, big editorial type.
   Everything is progressive: without JS nothing is hidden; with reduced motion nothing moves. */
:root{--ease:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.25,.1,.25,1)}

/* glass header */
.top{background:rgb(20 24 31/.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .4s var(--ease-soft),box-shadow .4s var(--ease-soft)}
.top.sc{background:rgb(20 24 31/.88);box-shadow:0 10px 30px -18px rgb(0 0 0/.7)}
.top .bar{transition:padding .4s var(--ease)}
.top.sc .bar{padding-block:6px}
.brand b{letter-spacing:-.01em}

/* hero: huge type, scroll-linked art */
.hero{--hp:0;min-height:min(92vh,820px);display:grid;align-items:center}
.hero-in{padding-block:clamp(36px,8vh,90px)}
.hero h1{font-size:clamp(2.6rem,7.6vw,5.8rem);line-height:1.08;letter-spacing:-.02em;margin:18px 0 16px}
.hero h1 span+span{padding-bottom:.1em;animation-iteration-count:1,3!important}
.hero p.lead{font-size:clamp(1.05rem,2.2vw,1.35rem);line-height:1.5;max-width:34ch;color:#d9d2c2}
.hero .hero-in>div:first-child{will-change:transform,opacity}
.hero .art{will-change:transform,opacity}
.hero{grid-template-rows:1fr auto;align-items:stretch}
.hero-in{align-self:center}
@media (min-width:761px){.hero-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.hero .art{height:min(520px,60vh)}}
.hero.off *,.hero.off::before{animation-play-state:paused!important}
.hero .cta .btn.primary{padding:15px 30px;font-size:1.1rem;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.hero .cta .btn.primary:hover{transform:scale(1.04);box-shadow:0 18px 40px -12px rgb(200 150 45/.9)}

/* story section */
.story{padding-block:clamp(70px,14vh,150px) clamp(30px,6vh,70px);text-align:center;display:grid;gap:clamp(60px,12vh,130px)}
.story .kick{margin:0 0 10px;color:var(--brass-3);font-weight:800;letter-spacing:.04em;font-size:.95rem}
.story .big{font-size:clamp(2.2rem,7.6vw,5.2rem);line-height:1.04;letter-spacing:-.035em;color:var(--ink)}
.story .big em{font-style:normal;background:linear-gradient(90deg,var(--brass-3),var(--brass),#e7c26b);-webkit-background-clip:text;background-clip:text;color:transparent}
.story .sub{margin:18px auto 0;max-width:36ch;font-size:clamp(1.05rem,2.4vw,1.4rem);color:#4a4e57;line-height:1.5}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(18px,4vw,40px)}
.stat{display:grid;gap:4px;justify-items:center}
.stat b{font-family:var(--f-display);font-weight:400;font-size:clamp(3.4rem,11vw,6.2rem);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.stat b small{font-size:.38em;letter-spacing:0;margin-inline-start:4px;color:var(--brass-3)}
.stat span{color:var(--muted);font-weight:700;font-size:1.05rem}

/* team */
.team{padding-block:clamp(40px,8vh,90px);text-align:center}
.team h2{font-size:clamp(2rem,6vw,3.6rem);letter-spacing:-.03em;margin-bottom:28px}
.team .tms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:18px;max-width:760px;margin:0 auto}
.tm{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:30px 20px;display:grid;justify-items:center;gap:10px;box-shadow:0 30px 60px -40px rgb(20 24 31/.5);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tm:hover{transform:translateY(-6px);box-shadow:0 40px 70px -36px rgb(20 24 31/.55)}
.tm .av{width:92px;height:92px;font-size:2rem}
.tm b{font-family:var(--f-display);font-weight:400;font-size:1.5rem}
.tm span{color:var(--muted);font-weight:600}

/* reveals */
html.mo .rv{opacity:0;transform:translateY(34px) scale(.985);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
html.mo .rv.in{opacity:1;transform:none}
html.mo .rv.done{transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .2s;transition-delay:0s}

/* booking: calmer, larger steps */
.step.card{border-radius:26px;padding:clamp(18px,3vw,30px)}
.step-h h2{font-size:clamp(1.4rem,3.2vw,1.9rem);letter-spacing:-.02em}
.svc,.bp,.day,.time{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .2s,background .2s}
.svc{border-radius:20px;padding:18px}
.svc:hover,.bp:hover{transform:translateY(-3px)}
.summary{border-radius:22px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgb(20 24 31/.94)}
.btn{transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .2s}
.btn:active{transform:scale(.97)}

/* page transition between views */
#app.swap>*{animation:swapIn .6s var(--ease) both}
@keyframes swapIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (max-width:760px){
  .hero{min-height:auto}
  .hero .hero-in>div:first-child{transform:none;opacity:1}
  .hero .art{height:170px}
  .hero h1{font-size:clamp(2.5rem,12vw,3.3rem)}
}
@media (prefers-reduced-motion:reduce){
  html.mo .rv{opacity:1;transform:none;transition:none}
  .hero .hero-in>div:first-child,.hero .art,.hero .ticker{transform:none;opacity:1}
  #app.swap>*{animation:none}
}

/* lite mode: weak phone / slow network / in-app browser */
.lite .hair,.lite .spark,.lite .art::before,.lite .hero::after{display:none}
.lite .hero::before{inset:0;animation:none}
.lite .top,.lite .summary,.lite .modal,.lite .cut{-webkit-backdrop-filter:none;backdrop-filter:none}
.lite .top::after,.lite .pole .glass,.lite .ticker .track,.lite .hero h1 span+span,.lite .sc .bl,.lite .art .sc,.lite .eyebrow::before{animation:none}
.lite .art .sc,.lite .pole{filter:none}
.lite .hero{min-height:auto}

/* browsers without dvh / prefixed blur */
.modal,.cut{-webkit-backdrop-filter:blur(6px)}

/* forced colors / high contrast */
@media (forced-colors:active){
  .hero h1 span+span,.story .big em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:Highlight;forced-color-adjust:none}
  .input:focus{outline:3px solid Highlight}
  .btn,.time,.seg button,.tabs button,.svc,.day,.bp{border:1px solid ButtonText}
  [aria-pressed=true],.tabs [aria-current=page]{outline:2px solid Highlight}
  .av,.step-h .n{border:1px solid CanvasText}
}
@media (prefers-contrast:more){:root{--muted:#4a4e57;--line:#9a927f;--line-2:#6f6857}.hero p.lead,.hero .facts{color:#fff}.hero .cover{opacity:.12}}
@media print{.top,.hero .art,.toast,.modal,.cut,.ticker,.spark,.summary{display:none!important}body{background:#fff}*{animation:none!important}.hero{background:#fff;color:#000}.hero h1 span+span{color:#000;background:none}}