/* Base look: carried over unchanged from the 2026-09-24 mock-up (Sales/Website-Pitches/sky-high-spa-2026-09-24/template.html),
   minus the demo chat bot. Site-specific additions live in site.css. */
:root{
  --cream:#F6F1E8; --ground:#F6F1E8; --paper:#F6F1E8; --card:#FBF8F2; --parch:#EFE7DA; --parch2:#E6DAC6;
  --ink:#2B211B; --mute:#6B5D50; --gold:#9C7A4A; --gold-ink:#7A5A30; --brown:#271C15;
  --line:rgba(43,33,27,.15); --gline:rgba(156,122,74,.55);
  --rose:var(--gold); --rose-ink:var(--gold-ink); --blush:var(--parch); --blush2:var(--parch2);
  --display:'Cormorant Garamond','Cormorant','Garamond','Times New Roman',serif; --text:'EB Garamond','Garamond','Georgia',serif; --caps:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:var(--display); --sans:var(--caps);
  --ease:cubic-bezier(.22,.7,.2,1); --wrap:1240px; --edge:max(22px,calc((100vw - 1240px)/2)); --z-nav:50; --z-mbar:60; --z-bella:70;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{font-family:var(--text);font-size:18.5px;line-height:1.65;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;z-index:99;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.wrap{width:min(var(--wrap),100% - 44px);margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.08}
h2{text-transform:uppercase;letter-spacing:.08em;font-size:clamp(1.85rem,3.5vw,2.8rem)}
h2 em{font-style:italic;text-transform:none;letter-spacing:.01em;color:var(--gold-ink);font-weight:500}
.kick{font-family:var(--caps);font-size:11.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink)}
.orn{display:block;width:120px;height:16px;color:var(--gold)}
.warm{filter:sepia(.2) saturate(.86) contrast(.97)}
.tick{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.14em;color:var(--gold)}
.fine{font-size:.92rem;color:var(--mute);margin-top:16px;line-height:1.5;font-style:italic}
.link{color:var(--gold-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* buttons: thin outlines, like the reference */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 26px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--caps);font-weight:500;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn .ar{width:16px;height:16px;transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn.soft{border-color:var(--gline);background:rgba(255,255,255,.4)}
.btn.soft:hover{background:var(--ink);border-color:var(--ink)}
.btn.fill{background:var(--ink);color:var(--cream)}
.btn.fill:hover{background:var(--gold-ink);border-color:var(--gold-ink)}
.btn.sm{min-height:44px;padding:0 18px;font-size:11px}
.btn.cream{background:var(--cream);color:var(--brown);border-color:var(--cream)}
.btn.cream:hover{background:transparent;color:var(--cream)}

/* header */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:rgba(246,241,232,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--line)}
.nav .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:88px;gap:28px}
.brand{text-decoration:none;display:grid;justify-items:center;line-height:1;color:var(--ink)}
.brand svg{width:46px;height:12px;color:var(--gold);margin-bottom:7px}
.brand .w{font-family:var(--display);font-weight:500;font-size:27px;letter-spacing:.14em;text-transform:uppercase;padding-left:.14em}
.brand .s{font-family:var(--caps);font-size:9px;letter-spacing:.44em;text-transform:uppercase;color:var(--gold-ink);margin-top:7px;padding-left:.44em}
.nav-links{justify-self:center;display:flex;gap:clamp(20px,3vw,40px)}
.nav-links a{font-family:var(--caps);font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;padding:8px 0;transition:color .3s}
.nav-links a:hover{color:var(--gold)}
@media (max-width:980px){.nav-links{display:none}.nav .wrap{grid-template-columns:auto 1fr;height:72px}.nav .btn{justify-self:end}.brand .w{font-size:22px}}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);background:linear-gradient(100deg,#EBE1D0 0%,#F1E9DD 34%);min-height:clamp(540px,43vw,660px);border-bottom:1px solid var(--line)}
.hero-txt{position:relative;z-index:2;padding:clamp(48px,6vw,90px) clamp(20px,3vw,48px) clamp(48px,6vw,90px) var(--edge);display:flex;flex-direction:column;justify-content:center}
.hero-kick{margin-bottom:18px}
.hero h1{text-transform:uppercase;font-size:clamp(2.5rem,4.5vw,4.4rem);line-height:1;letter-spacing:.035em;font-weight:500;max-width:9.5em;text-wrap:balance}
.hero h1 .g{color:#8A6737;display:block}
.hero .orn{margin:26px 0 24px}
.hero .tagline{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.3em;font-size:clamp(.95rem,1.2vw,1.08rem);color:#4C3F35;line-height:1.95}
.hero .svc{font-style:italic;color:var(--mute);margin-top:12px;font-size:1.08rem;max-width:28em}
.hero .cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.status{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:22px;font-family:var(--caps);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:#b5a49f;flex-shrink:0}
.status.open::before{background:#5b8f5f;box-shadow:0 0 0 4px rgba(91,143,95,.18)}
.status .txt{color:var(--ink);font-weight:500}
.status .sep{opacity:.4}
.hero-img{position:relative;overflow:hidden;margin-left:-6vw}
.hero-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.vid-btn{position:absolute;right:clamp(16px,2vw,28px);top:clamp(16px,2vw,28px);z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid rgba(251,246,238,.75);background:rgba(28,19,13,.28);color:#FBF6EE;display:grid;place-items:center;cursor:pointer;transition:background .3s}
.vid-btn:hover{background:rgba(28,19,13,.55)}
.vid-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.vid-btn .pl{display:none;fill:currentColor;stroke:none}
.vid-btn[aria-pressed="true"] .pa{display:none}.vid-btn[aria-pressed="true"] .pl{display:block}
.hero-img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#F1E9DD 0%,#F1E9DD 7%,rgba(241,233,221,.7) 20%,rgba(241,233,221,0) 46%)}
.hero-img::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(28,19,13,.5),rgba(28,19,13,0) 40%)}
.hero-cap{position:absolute;right:clamp(20px,3vw,44px);bottom:clamp(20px,3vw,36px);z-index:2;color:#FBF6EE;text-align:right;font-family:var(--caps);font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;line-height:2.1}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-img{order:-1;margin-left:0;min-height:0;aspect-ratio:4/3.3}
  .hero-img::before{background:linear-gradient(0deg,#EEE5D6 0%,rgba(238,229,214,0) 26%)}
  .hero-img::after{background:none}
  .hero-cap{display:none}
  .vid-btn{right:14px;top:14px}
  .hero-txt{padding:10px 22px 52px}
}

/* strip */
.strip{background:var(--parch);border-bottom:1px solid var(--line)}
.strip ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;padding:16px 0}
.strip li{font-family:var(--caps);font-size:11px;letter-spacing:.24em;text-transform:uppercase;display:flex;align-items:center}
.strip li+li::before{content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg);margin:0 clamp(14px,2.4vw,30px)}
@media (max-width:640px){.strip li+li::before{margin:0 12px}.strip li{font-size:10px;letter-spacing:.18em}}

/* sections */
.sec{padding:clamp(70px,9vw,120px) 0}
.head-c{text-align:center;max-width:820px;margin:0 auto clamp(36px,5vw,60px)}
.head-c h2{margin-top:12px}
.head-c .orn{margin:20px auto 0}
.head-c p:not(.kick){color:var(--mute);margin:16px auto 0;font-style:italic;font-size:1.1rem;max-width:34em}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* signature treatments */
.tr-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;margin-bottom:clamp(34px,4.5vw,52px)}
.tr-head .head-c{grid-column:2;margin:0}
.tr-head h2{font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:.12em}
.view-all{grid-column:3;justify-self:end;font-family:var(--caps);font-size:11px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--gold-ink);display:inline-flex;gap:10px;align-items:center;padding:8px 0}
.view-all svg{width:15px;height:15px}
@media (max-width:760px){.tr-head{grid-template-columns:1fr}.tr-head .head-c,.view-all{grid-column:1;justify-self:center}}
.cards{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.card{padding:0 clamp(12px,1.8vw,26px);text-align:center;border-left:1px solid var(--line)}
.card:first-child{border-left:0}
.card a{display:block;text-decoration:none}
.card img{width:100%;height:auto;aspect-ratio:4/2.7;object-fit:cover}
.card h3{text-transform:uppercase;letter-spacing:.16em;font-size:1.14rem;margin:22px 0 8px}
.card p{font-size:1rem;color:var(--mute);line-height:1.5;max-width:17em;margin:0 auto}
.card .from{display:block;margin-top:12px;font-family:var(--caps);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.card .ar{width:20px;height:20px;margin:12px auto 0;transition:transform .35s var(--ease)}
.card a:hover .ar{transform:translateX(5px)}
.card a:hover h3{color:var(--gold-ink)}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr;row-gap:44px}.card{border-left:0;padding:0 10px}.card:nth-child(odd){padding-left:0}.card:nth-child(even){padding-right:0}}
@media (max-width:480px){.cards{grid-template-columns:1fr}.card{padding:0}}

/* about split */
.about{background:var(--parch);border-block:1px solid var(--line);position:relative;overflow:hidden}
.about .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,6vw,96px);align-items:center;position:relative;z-index:1}
.gilt{padding:9px;border-radius:999px 999px 6px 6px;background:linear-gradient(150deg,#e8d7b0 0%,#a9854f 28%,#f1e3c2 52%,#96733f 76%,#d8c092 100%);box-shadow:0 36px 60px -34px rgba(43,33,27,.6)}
.gilt .in{border-radius:999px 999px 2px 2px;overflow:hidden;border:1px solid rgba(60,40,20,.4);aspect-ratio:3/3.9;background:var(--parch2)}
.gilt img{width:100%;height:100%;object-fit:cover}
.about-photo{max-width:420px;width:100%;justify-self:center}
.about-photo figcaption{text-align:center;font-style:italic;color:var(--mute);font-size:.95rem;margin-top:16px}
.about h2{margin-top:14px;max-width:14em}
.about p.b{margin-top:18px;max-width:34em}
.rule-s{width:46px;height:1px;background:var(--gold);margin:28px 0}
.about .acts{display:flex;gap:12px;flex-wrap:wrap}
.wm{position:absolute;right:-150px;top:50%;transform:translateY(-50%);width:560px;height:560px;color:var(--gold);opacity:.11;pointer-events:none;z-index:0}
@media (max-width:900px){.about .wrap{grid-template-columns:1fr}.about-photo{max-width:340px}.wm{width:380px;height:380px;right:-160px;top:auto;bottom:-60px;transform:none}}

/* laser */
.laser-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,76px);align-items:start}
.laser-grid>*,.pedi-grid>*,.visit-grid>*,.about .wrap>*{min-width:0}
.laser-copy h2{margin-top:14px}
.laser-copy p.lc{margin-top:18px;max-width:34em}
.ticks{list-style:none;margin:24px 0 0;border-top:1px solid var(--line)}
.ticks li{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
.ticks li .tick{flex-shrink:0;margin-top:.32em}
.ticks li b{font-weight:500}
.men{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;margin-top:36px}
.men img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid var(--gline);padding:5px;background:var(--card)}
.men h3{text-transform:uppercase;letter-spacing:.14em;font-size:1.15rem}
.men h3 em{text-transform:none;letter-spacing:0;color:var(--gold-ink)}
.men p{font-size:1rem;color:var(--mute);margin-top:6px;line-height:1.55}
@media (max-width:480px){.men{grid-template-columns:96px 1fr;gap:16px}}
.build{background:var(--card);border:1px solid var(--gline);box-shadow:inset 0 0 0 7px var(--card),inset 0 0 0 8px var(--gline),0 30px 60px -44px rgba(43,33,27,.5);padding:clamp(26px,3.4vw,42px)}
.b-top{text-align:center}
.b-top h3{text-transform:uppercase;letter-spacing:.14em;font-size:1.45rem}
.b-top .orn{margin:12px auto 0;width:96px}
.build .sub-l{text-align:center;font-style:italic;color:var(--mute);margin-top:10px;font-size:1rem}
.seg{display:flex;justify-content:center;margin:20px auto 0;width:max-content;border:1px solid var(--ink)}
.seg button{border:0;background:transparent;padding:10px 24px;min-height:44px;font-family:var(--caps);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s}
.seg button+button{border-left:1px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.b-lab{display:block;font-family:var(--caps);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:var(--gold-ink);margin:24px 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid rgba(43,33,27,.3);background:transparent;padding:7px 14px;min-height:40px;font-family:var(--text);font-size:16px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chip[aria-pressed="true"]::before{content:"✓";font-size:12px}
.sess{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink)}
.sess button{border:0;background:transparent;padding:12px 14px;cursor:pointer;text-align:left;min-height:60px;transition:background .2s}
.sess button+button{border-left:1px solid var(--ink)}
.sess button b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:500;line-height:1.1}
.sess button span{font-size:14px;color:var(--mute);font-style:italic}
.sess button[aria-checked="true"]{background:var(--ink);color:var(--cream)}
.sess button[aria-checked="true"] span{color:#d8ccbd}
.result{margin-top:26px;border-top:1px solid var(--gline);padding-top:22px;display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:end}
.result .tot{font-family:var(--display);font-size:clamp(3rem,5.6vw,4.2rem);line-height:.9;font-weight:500}
.result .tot small{display:block;font-family:var(--caps);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:var(--gold-ink);margin-bottom:10px}
.result .meta{font-size:1.02rem;color:var(--mute);text-align:right;line-height:1.5}
.result .meta b{color:var(--ink);font-weight:500}
.result .save{color:#4d7a52;font-weight:500}
.result .note{grid-column:1/-1;font-size:1rem;background:var(--parch);padding:11px 16px;font-style:italic}
.result .empty{grid-column:1/-1;color:var(--mute);font-style:italic}
.build .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
@media (max-width:900px){.laser-grid{grid-template-columns:1fr}.result{grid-template-columns:1fr}.result .meta{text-align:left}}
@media (max-width:420px){.sess button{padding:10px 9px}.sess button b{font-size:1.1rem}}

/* pedicure */
.pedi{background:var(--parch);border-block:1px solid var(--line)}
.pedi-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,6vw,96px);align-items:center}
.pedi-photo{max-width:400px;width:100%;justify-self:center}
.pedi h2{margin-top:14px}
.pedi p.lc{margin-top:18px;max-width:35em}
.pedi-list{margin:20px 0 0;list-style:none;font-family:var(--display);font-style:italic;font-size:1.3rem;line-height:1.55;color:var(--gold-ink)}
.pedi-list li{display:inline}
.pedi-list li+li::before{content:" · ";color:var(--ink);font-style:normal;opacity:.45}
.pedi-price{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--gline);margin-top:26px}
.pedi-price div{padding:16px 0}
.pedi-price div+div{border-left:1px solid var(--gline);padding-left:22px}
.pedi-price b{font-family:var(--display);font-size:2.8rem;font-weight:500;display:block;line-height:1}
.pedi-price span{font-family:var(--caps);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);display:block;margin-top:8px;line-height:1.5}
.pedi .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
@media (max-width:900px){.pedi-grid{grid-template-columns:1fr}.pedi-photo{max-width:320px}}

/* prices */
.prices{background:var(--card)}
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:0 clamp(14px,2.6vw,34px);border-bottom:1px solid var(--line);margin-bottom:28px}
.tabs button{border:0;background:transparent;padding:14px 0;min-height:48px;font-family:var(--caps);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;color:var(--mute);position:relative;transition:color .25s}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .35s var(--ease)}
.tabs button:hover,.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.panel-note{font-size:1.05rem;color:var(--mute);max-width:44em;margin:0 auto 22px;font-style:italic;text-align:center}
.panel-note b{color:var(--ink);font-weight:500;font-style:normal}
.sub{display:flex;width:max-content;margin:0 auto 8px;border:1px solid var(--ink)}
.sub button{border:0;background:transparent;padding:8px 24px;min-height:42px;font-family:var(--caps);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.sub button+button{border-left:1px solid var(--ink)}
.sub button.on{background:var(--ink);color:var(--cream)}
.ph{font-size:1.5rem;margin:22px 0 6px;display:flex;align-items:baseline;gap:14px;text-transform:uppercase;letter-spacing:.12em}
.ph span{font-family:var(--caps);font-size:10.5px;color:var(--mute);letter-spacing:.2em}
.ltable{list-style:none}
.lhead,.lrow{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(100px,.55fr));gap:12px;align-items:center}
.lhead.w,.lrow.wrow{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(100px,.55fr))}
.lrow.srow{grid-template-columns:minmax(0,1fr) auto}
.lhead{font-family:var(--caps);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);font-weight:500;padding:10px 0;border-bottom:1px solid var(--gline)}
.lhead span:not(:first-child){text-align:right}
.lrow{padding:15px 0;border-bottom:1px solid var(--line)}
.lrow:hover{background:linear-gradient(90deg,transparent,var(--parch) 25%,var(--parch) 75%,transparent)}
.row-n b{font-family:var(--display);font-weight:500;font-size:1.32rem;display:block}
.row-d{display:block;font-size:.98rem;color:var(--mute);line-height:1.45;margin-top:3px;max-width:42em;font-style:italic}
.row-m{display:block;font-family:var(--caps);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.c{text-align:right;line-height:1.2}
.c em,.result .tot,.pedi-price b,.sess button b,.addr{font-variant-numeric:lining-nums}
.c em{font-style:normal;font-family:var(--display);font-weight:500;font-size:1.45rem}
.c small{display:block;font-size:.88rem;color:var(--mute);margin-top:3px;font-style:italic}
.c .na{color:#b8aa98}
.was{font-size:.88rem;color:var(--mute)}
.tag{font-style:normal;display:inline-block;margin-left:8px;font-family:var(--caps);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--gline);color:var(--gold-ink);padding:1px 8px;vertical-align:3px;font-weight:500}
@media (max-width:700px){
  .lhead{display:none}
  .lrow{grid-template-columns:repeat(3,1fr);gap:8px 6px}
  .lrow.wrow{grid-template-columns:repeat(2,1fr)}
  .lrow .row-n{grid-column:1/-1}
  .lrow.srow{grid-template-columns:1fr auto;align-items:start}
  .lrow.srow .row-n{grid-column:auto}
  .lrow:not(.srow) .c{text-align:left;border:1px solid var(--line);padding:8px 10px}
  .lrow:not(.srow) .c::before{content:attr(data-l);display:block;font-family:var(--caps);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:3px;font-weight:500}
  .tabs{justify-content:flex-start}
}
.js .panel[hidden],.js .subpanel[hidden]{display:none}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px)}
.gal figure{background:#fff;padding:10px 10px 0;border:1px solid var(--line);box-shadow:0 22px 40px -32px rgba(43,33,27,.45)}
.gal img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.gal figcaption{text-align:center;font-style:italic;color:var(--mute);font-size:.95rem;padding:10px 0 12px}
.gal-foot{text-align:center;margin-top:34px}
.gal-foot p{color:var(--mute);font-style:italic;margin-bottom:16px}
@media (max-width:760px){.gal{grid-template-columns:1fr 1fr}.gal figure{padding:6px 6px 0}.gal figcaption{font-size:.85rem;padding:6px 0 8px}}

/* promise band (their own words — not reviews) */
.promise{background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.5),transparent 60%),#E9DFCF;border-block:1px solid var(--line);padding:clamp(56px,7vw,92px) 0;text-align:center}
.q-wrap{position:relative;max-width:920px;margin:0 auto;padding:0 64px}
.q{display:none}
.q.on{display:block;animation:qfade .9s var(--ease)}
@keyframes qfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.q p{font-family:var(--display);font-style:italic;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.35}
.q cite{display:block;margin-top:16px;font-style:normal;font-family:var(--caps);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink)}
.q-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;background:none;color:var(--gold);cursor:pointer;display:grid;place-items:center}
.q-nav svg{width:22px;height:44px}
.q-prev{left:0}.q-next{right:0}
.q-dots{display:flex;gap:4px;justify-content:center;margin-top:24px}
.q-dots button{width:26px;height:26px;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.q-dots button::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--ink)}
.q-dots button[aria-current="true"]::before{background:var(--ink)}
@media (prefers-reduced-motion:reduce){.q.on{animation:none}}
@media (max-width:600px){.q-wrap{padding:0 40px}.q-nav{width:34px}}

/* steps + faq */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);counter-reset:s;text-align:center}
.steps li{padding:0 clamp(16px,2.6vw,40px);counter-increment:s;border-left:1px solid var(--line)}
.steps li:first-child{border-left:0}
.steps li::before{content:counter(s,upper-roman);font-family:var(--display);font-style:italic;color:var(--gold);font-size:2.6rem;line-height:1;display:block;margin-bottom:12px}
.steps h3{text-transform:uppercase;letter-spacing:.14em;font-size:1.2rem;margin-bottom:10px}
.steps p{color:var(--mute);font-size:1.02rem}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:34px}.steps li{border-left:0}}
.faq{max-width:860px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--gline)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.55rem);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-52%);font-family:var(--caps);font-weight:300;font-size:28px;color:var(--gold);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-52%) rotate(45deg)}
.faq .a{padding:0 44px 22px 0;color:var(--mute);max-width:42em}

/* visit */
.visit{background:var(--parch);border-top:1px solid var(--line)}
.visit-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start}
.visit h2{margin:14px 0 24px}
.addr{font-family:var(--display);font-weight:500;font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.25}
.addr small{display:block;font-family:var(--text);color:var(--mute);font-size:1.02rem;font-weight:400;margin-top:6px;font-style:italic}
#hours{list-style:none;max-width:420px;margin:12px 0 22px;border-top:1px solid var(--gline)}
#hours li{display:flex;justify-content:space-between;padding:9px 10px;border-bottom:1px solid var(--line);font-size:1.05rem}
#hours li.today{background:var(--card);font-weight:500}
.contact{list-style:none;margin:22px 0;display:grid;gap:10px}
.contact a{text-decoration:none;font-size:1.1rem;border-bottom:1px solid var(--gold)}
.map{border:1px solid var(--gline);padding:8px;background:var(--card);aspect-ratio:4/3.7}
.map iframe{width:100%;height:100%;border:0;display:block;filter:sepia(.35) saturate(.7) contrast(.98)}
@media (max-width:900px){.visit-grid{grid-template-columns:1fr}}

/* closing band */
.cta-band{background:var(--brown);color:#F3ECE1;display:grid;grid-template-columns:1.05fr .95fr;min-height:clamp(380px,32vw,470px);overflow:hidden}
.cta-txt{position:relative;z-index:2;padding:clamp(52px,6vw,86px) 24px clamp(52px,6vw,86px) var(--edge);display:flex;flex-direction:column;justify-content:center}
.cta-band h2{font-weight:400;font-size:clamp(2.2rem,4.4vw,3.7rem);letter-spacing:.05em;line-height:1.04}
.cta-band .cta-sub{font-family:var(--caps);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;line-height:2;color:#DED0BC;margin:18px 0 28px}
.cta-band .btn{align-self:flex-start}
.cta-img{position:relative;margin-left:-14vw}
.cta-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:sepia(.3) saturate(.8) brightness(.85)}
.cta-img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--brown) 0%,var(--brown) 14%,rgba(39,28,21,.6) 36%,rgba(39,28,21,0) 70%)}
@media (max-width:900px){.cta-band{grid-template-columns:1fr}.cta-img{order:-1;aspect-ratio:16/10;margin-left:0}.cta-img::before{background:linear-gradient(0deg,var(--brown) 0%,rgba(39,28,21,0) 55%)}.cta-txt{padding:4px 22px 56px}}

footer{padding:60px 0 calc(52px + env(safe-area-inset-bottom));text-align:center;background:var(--cream)}
footer .brand{margin:0 auto 22px;width:max-content}
footer .brand .w{font-size:34px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:center;margin:20px 0 22px}
.foot-links a{font-family:var(--caps);font-size:11px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;font-weight:500;padding:8px 0}
.foot-links a:hover{color:var(--gold-ink)}
.foot-small{font-family:var(--caps);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
footer .orn{margin:0 auto}
@media (max-width:760px){footer{padding-bottom:110px}}

/* mobile action bar */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mbar);padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(246,241,232,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .mbar a,.mbar button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid var(--ink);background:transparent;font-family:var(--caps);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer}
  .mbar .book{background:var(--ink);color:var(--cream)}
  .mbar svg{width:18px;height:18px}
}

/* Additions for the multi-page site. base.css is the mock-up's look, untouched. */
body{padding-bottom:0}
.nav-links a[aria-current="page"]{color:var(--gold-ink)}
.nav .wrap{grid-template-columns:auto 1fr auto auto}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;display:grid;place-items:center;font-family:var(--caps);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--ink);padding:0 14px}
.mnav summary::-webkit-details-marker{display:none}
.mnav nav{position:absolute;right:0;top:calc(100% + 14px);width:min(320px,calc(100vw - 44px));background:var(--card);border:1px solid var(--gline);box-shadow:0 30px 50px -30px rgba(43,33,27,.55);display:grid;padding:8px 0}
.mnav nav a{font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:15px 22px;border-bottom:1px solid var(--line)}
.mnav nav a:last-child{border-bottom:0}
.nav-links a{white-space:nowrap}
@media (max-width:1180px){.nav-links{display:none}.mnav{display:block;justify-self:end}.nav .wrap{grid-template-columns:auto 1fr auto}.nav .wrap>.btn{justify-self:end}}
@media (max-width:980px){.nav .wrap{grid-template-columns:auto 1fr}.nav .wrap>.btn{display:none}}

/* page header band for inside pages */
.phero{background:linear-gradient(100deg,#EBE1D0 0%,#F1E9DD 46%);border-bottom:1px solid var(--line);padding:clamp(34px,5vw,64px) 0 clamp(40px,5.5vw,72px)}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,80px);align-items:center}
.phero.solo .wrap{grid-template-columns:1fr}
.phero h1{text-transform:uppercase;letter-spacing:.04em;font-size:clamp(2.1rem,4vw,3.5rem);line-height:1.04;margin-top:14px;max-width:13em;text-wrap:balance}
.phero h1 .g{color:#8A6737;display:block}
.phero .orn{margin:22px 0 20px}
.phero .lead{font-size:1.14rem;max-width:36em;color:#4C3F35}
.phero .facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:20px;font-family:var(--caps);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.phero .facts b{color:var(--ink);font-weight:500}
.phero .cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.phero-photo{max-width:330px;width:100%;justify-self:center}
@media (max-width:900px){.phero .wrap{grid-template-columns:1fr}.phero-photo{max-width:240px;order:-1;justify-self:start}}
.crumbs{font-family:var(--caps);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 10px}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.5}
.crumbs a{text-decoration:none;color:var(--gold-ink)}

/* text blocks */
.sec.tight{padding:clamp(48px,6vw,84px) 0}
.sec.alt{background:var(--parch);border-block:1px solid var(--line)}
.prose{max-width:820px;margin:0 auto}
.prose h2{margin-bottom:6px}
.prose .orn{margin:18px 0 22px}
.prose p{margin-top:16px}
.prose p:first-of-type{margin-top:0}
.prose ul{margin:16px 0 0 1.1em}
.prose li{margin-top:6px}
.prose a,.faq .a a,.fine a{color:var(--gold-ink);text-underline-offset:4px;text-decoration-thickness:1px}
.table-block{max-width:1040px;margin:0 auto}
.table-block+.table-block{margin-top:clamp(40px,5vw,64px)}
.table-block h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.table-block .panel-note{text-align:left;margin:12px 0 18px}
.rb{color:var(--gold-ink);font-weight:500;text-underline-offset:3px;white-space:nowrap}
.c .rb{display:block;font-family:var(--caps);font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-top:5px}
.asof{font-family:var(--caps);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:16px}
.tag.hold{border-color:#b4532a;color:#b4532a}

/* link tiles */
.tiles{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--gline);border-left:1px solid var(--line)}
.tiles li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tiles a{display:block;text-decoration:none;padding:24px 22px 22px;height:100%;transition:background .3s}
.tiles a:hover{background:var(--parch)}
.tiles b{display:block;font-family:var(--display);font-weight:500;font-size:1.4rem;line-height:1.15}
.tiles span{display:block;color:var(--mute);font-size:1rem;line-height:1.45;margin-top:6px}
.tiles i{display:block;font-style:normal;font-family:var(--caps);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin-top:12px}

/* closing band without a photo */
.cta-band.solo{grid-template-columns:1fr;min-height:0;text-align:center}
.cta-band.solo .cta-txt{padding:clamp(56px,7vw,96px) 22px;align-items:center}
.cta-band.solo .btn{align-self:center}
.cta-band .cta-h{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.2rem,4.4vw,3.7rem);letter-spacing:.05em;line-height:1.04}
.foot-links+.foot-links{margin-top:-10px}
.cta-band .acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* phone action bar: Book, plus Call once the number is confirmed */
@media (max-width:760px){.mbar{grid-template-columns:1fr 1.3fr}.mbar.one{grid-template-columns:1fr}}

/* Google reviews: display only */
.rvws{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.rvws.n1{grid-template-columns:1fr;max-width:760px;margin:0 auto}
.rvws.n2{grid-template-columns:1fr 1fr}
.rvw{background:var(--card);border:1px solid var(--line);padding:26px 24px 22px;display:flex;flex-direction:column;box-shadow:0 22px 40px -34px rgba(43,33,27,.4)}
.st{color:var(--gold);letter-spacing:.2em;font-size:14px}
.rvw blockquote p{font-family:var(--display);font-style:italic;font-size:1.28rem;line-height:1.42;margin-top:12px}
.rvw cite{display:block;margin-top:auto;padding-top:18px;font-style:normal;font-family:var(--caps);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.rvw-foot{text-align:center;margin-top:28px;color:var(--mute);font-style:italic}
.rvw-foot a{color:var(--gold-ink);text-underline-offset:4px;text-decoration-thickness:1px}
.gline{margin-top:20px;font-family:var(--caps);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.gline a{text-decoration:none;color:var(--ink);border-bottom:1px solid var(--gline);padding-bottom:3px}
.gline .st{letter-spacing:0;margin-right:4px}
.hero .gline{margin:-4px 0 20px}
@media (max-width:900px){.rvws,.rvws.n2{grid-template-columns:1fr}}

/* preview-only strip */
.pv{background:#2B211B;color:#F3ECE1;font-family:var(--caps);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:8px 14px}
.hero.still .hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.policy-list{list-style:none;border-top:1px solid var(--gline);margin-top:18px}
.policy-list li{padding:14px 0;border-bottom:1px solid var(--line)}
.policy-list b{font-weight:500}

@media (max-width:860px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tiles{grid-template-columns:1fr}}

/* her Instagram reels and the clip in a service page's frame (2026-10-14) */
.reels{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,22px)}
.reels.n3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;margin:0 auto}
.reels.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;margin:0 auto}
.reels.n1{grid-template-columns:minmax(0,320px);justify-content:center}
.reel figure{margin:0}
.reel-media{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:16px;background:var(--parch2);cursor:pointer}
.reel-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel figcaption{margin-top:10px;font-size:.95rem;color:var(--mute);text-align:center}
@media (max-width:760px){.reels,.reels.n3,.reels.n2{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:64%;overflow-x:auto;scroll-snap-type:x mandatory;max-width:none;padding-bottom:8px}.reel{scroll-snap-align:center}}
.phero-photo.clip .gilt .in{aspect-ratio:4/5}
.phero-photo.clip video,.pedi-photo.clip video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
@media (max-width:900px){.phero-photo.clip .gilt .in{aspect-ratio:4/5}.phero-photo.clip{max-width:340px}}

.card .noimg{aspect-ratio:4/2.7;background:var(--parch);display:grid;place-items:center;color:var(--gold)}.card .noimg svg{width:88px;height:88px}
.pedi.plain{background:transparent;border:0}

/* look-core: the modern structure shared by every src/look-*.css (2026-10-14, "make it more modern").
   Layered after base.css + site.css; a look file sets the variables below and may add its own rules after this.
   Removes the old-world details (ornaments, gilt arches, sepia grade, wide-tracked capitals) and restyles each
   component the pages use. No markup changes: build.py renders the same HTML for every look. */
:root{
  --cream:var(--bg);--ground:var(--bg);--paper:var(--bg);--card:var(--surface);--parch:var(--bg2);--parch2:var(--bg3);
  --gold:var(--accent);--gold-ink:var(--accent-ink);--brown:var(--deep);--gline:var(--line);
  --display:var(--f-display);--text:var(--f-body);--caps:var(--f-body);--serif:var(--f-display);--sans:var(--f-body);
}
body{font-family:var(--f-body);font-size:17px;line-height:1.6;background:var(--bg);color:var(--ink)}
::selection{background:var(--accent-soft);color:var(--ink)}
.skip{background:var(--ink);color:var(--bg);border-radius:var(--r-sm)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:4px}
.warm{filter:none}
.orn,.brand svg{display:none}
h1,h2,h3{font-family:var(--f-display);font-weight:var(--h-w);letter-spacing:var(--h-track);line-height:var(--h-lh)}
h2{text-transform:none;font-size:clamp(2rem,3.8vw,3.1rem);text-wrap:balance}
h2 em{color:var(--accent-ink);letter-spacing:inherit;font-weight:inherit}
p{text-wrap:pretty}
.kick{font-family:var(--f-body);font-size:13.5px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--accent-ink);display:inline-flex;align-items:center;gap:8px}
.kick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
.fine,.panel-note,.head-c p:not(.kick),.row-d,.c small,.rvw-foot,.about-photo figcaption{font-style:normal}
.pv{background:var(--deep);color:var(--on-deep);font-family:var(--f-body);font-size:12.5px;letter-spacing:.01em;text-transform:none;font-weight:500}

/* buttons: pills, one solid and one quiet */
.btn{border-radius:var(--r-btn);min-height:50px;padding:0 24px;gap:10px;font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;border:1px solid var(--line-strong);background:transparent;color:var(--ink);transition:background .25s var(--ease),color .25s var(--ease),border-color .25s,transform .15s}
.btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn.fill{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-ink)}
.btn.fill:hover{background:var(--btn-bg-h);border-color:var(--btn-bg-h);color:var(--btn-ink)}
.btn.soft{background:transparent;border-color:var(--line-strong)}
.btn.soft:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.sm{min-height:42px;padding:0 18px;font-size:14px}
.btn.cream{background:var(--on-deep);color:var(--deep);border-color:var(--on-deep)}
.btn.cream:hover{background:transparent;color:var(--on-deep);border-color:var(--on-deep)}
.btn .ar{width:17px;height:17px}

/* header */
.nav{background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.nav.scrolled{border-color:var(--line)}
.nav .wrap{height:76px}
.brand{justify-items:start}
.brand .w{font-family:var(--f-display);font-weight:var(--h-w);font-size:25px;letter-spacing:var(--brand-track,-.02em);text-transform:none;padding:0}
.brand .s{font-family:var(--f-body);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:5px;padding:0}
.nav-links{gap:clamp(18px,2.4vw,32px)}
.nav-links a{font-family:var(--f-body);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--accent-ink)}
.mnav summary{border-radius:var(--r-btn);border-color:var(--line-strong);font-family:var(--f-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;padding:0 18px}
.mnav nav{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden}
.mnav nav a{font-family:var(--f-body);font-size:16px;font-weight:500;letter-spacing:0;text-transform:none;border-color:var(--line)}
@media (max-width:980px){.nav .wrap{height:66px}.brand .w{font-size:22px}}

/* home hero: text beside a rounded video card */
.hero{background:var(--bg);border:0;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(24px,3.4vw,56px);padding:clamp(10px,1.4vw,20px) var(--edge) clamp(48px,6vw,88px);align-items:stretch}
.hero-txt{padding:clamp(24px,4vw,64px) 0}
.hero h1{text-transform:none;font-size:clamp(2.6rem,5.2vw,4.8rem);line-height:var(--h1-lh);letter-spacing:var(--h1-track);max-width:11em;font-weight:var(--h-w)}
.hero h1 .g{color:var(--accent-ink);display:inline}
.hero .tagline{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:1.18rem;line-height:1.45;color:var(--ink);font-weight:500;margin-top:22px}
.hero .tagline br{display:none}
.hero .svc{font-style:normal;color:var(--mute);font-size:1.02rem;max-width:31em;margin-top:10px}
.hero .cta{margin-top:28px}
.hero-img{margin-left:0;border-radius:var(--r-lg);min-height:clamp(440px,44vw,640px);background:var(--bg3)}
.hero-img::before{display:none}
.hero-img::after{background:linear-gradient(0deg,rgba(0,0,0,.38),rgba(0,0,0,0) 42%)}
.hero-cap{font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.14em}
.status{font-family:var(--f-body);font-size:14px;letter-spacing:0;text-transform:none}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:0;padding:8px 14px 40px}
  .hero-img{min-height:0;aspect-ratio:4/3.5}
  .hero-txt{padding:24px 6px 0}
}
.gline{font-family:var(--f-body);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}
.gline a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px 6px 12px}
.gline .st,.st{color:var(--star)}
.hero .gline{margin:0 0 18px}

/* proof chips */
.strip{background:transparent;border:0}
.strip ul{gap:10px;padding:0 0 6px}
.strip li{font-family:var(--f-body);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 16px}
.strip li+li::before{display:none}
@media (max-width:640px){.strip li{font-size:13px;letter-spacing:0;padding:7px 13px}.strip ul{gap:8px}}

/* sections: tinted panels sit inset with round corners instead of full-width bands */
.sec{padding:clamp(64px,8vw,112px) 0}
.sec.alt,.pedi,.visit{background:var(--bg2);border:0;border-radius:var(--r-xl);margin-inline:clamp(8px,1.4vw,20px)}
.sec.tight{padding:clamp(52px,6vw,88px) 0}
.head-c p:not(.kick){color:var(--mute);font-size:1.08rem}
.tr-head{grid-template-columns:1fr auto;align-items:end}
.tr-head .head-c{grid-column:1;text-align:left;margin:0}
.tr-head h2{letter-spacing:var(--h-track);font-size:clamp(2rem,3.8vw,3.1rem)}
.view-all{grid-column:2;font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);border-bottom:1px solid var(--line-strong);padding:4px 0}
@media (max-width:760px){.tr-head{grid-template-columns:1fr}.tr-head .head-c,.view-all{grid-column:1;justify-self:start}}

/* treatment cards */
.cards{gap:clamp(14px,1.8vw,22px)}
.cards .card:nth-child(n){padding:0;border:0;text-align:left}
.card a{position:relative;display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px 8px 22px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.card img,.card .noimg{border-radius:calc(var(--r-lg) - 6px);aspect-ratio:4/4.4;width:100%;object-fit:cover}
.card .noimg{background:var(--accent-soft);color:var(--accent-ink)}
.card h3{text-transform:none;letter-spacing:var(--h-track);font-size:1.38rem;margin:18px 12px 6px}
.card p{margin:0 12px;max-width:none;font-size:.98rem}
.card .from{font-family:var(--f-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent-ink);margin:14px 12px 0;padding-right:30px}
.card .ar{position:absolute;right:20px;bottom:22px;margin:0;width:20px;height:20px}
.card a:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.card a:hover h3{color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.card a:hover{transform:translateY(-4px)}}
@media (max-width:480px){.card img,.card .noimg{aspect-ratio:16/10}}

/* photo + text splits (about, Kart) */
.gilt{padding:0;background:none;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.gilt .in{border:0;border-radius:var(--r-lg);aspect-ratio:4/4.9;background:var(--bg3)}
.pedi-grid{gap:clamp(30px,5vw,80px)}
.pedi-photo{max-width:440px}
.pedi p.lc{color:var(--ink)}
.pedi-list{font-family:var(--f-body);font-style:normal;font-size:1.05rem;color:var(--ink)}
.pedi-price{border-color:var(--line)}
.pedi-price div+div{border-color:var(--line)}
.pedi-price b{font-family:var(--f-display);font-weight:var(--h-w);letter-spacing:var(--h-track)}
.pedi-price span{font-family:var(--f-body);font-size:13px;letter-spacing:0;text-transform:none}

/* link tiles */
.tiles{border:0;gap:12px}
.tiles li{border:0}
.tiles a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 22px 20px;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.tiles a:hover{background:var(--surface);border-color:var(--accent);box-shadow:var(--shadow)}
.tiles b{font-family:var(--f-display);font-weight:var(--h-w);letter-spacing:var(--h-track);font-size:1.32rem}
.tiles i{font-family:var(--f-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent-ink)}
@media (prefers-reduced-motion:no-preference){.tiles a:hover{transform:translateY(-2px)}}

/* reviews */
.rvw{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:none;padding:26px 24px 22px}
.rvw blockquote p{font-family:var(--f-body);font-style:normal;font-size:1.08rem;line-height:1.55;color:var(--ink)}
.rvw cite{font-family:var(--f-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.rvw-foot a{color:var(--accent-ink)}

/* steps, gallery, faq */
.steps{gap:14px;text-align:left}
.steps li:nth-child(n){border:0;background:var(--surface);border-radius:var(--r-lg);padding:26px 24px}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--f-body);font-style:normal;font-weight:600;font-size:14px;color:var(--accent-ink);margin-bottom:14px}
.steps h3{text-transform:none;letter-spacing:var(--h-track);font-size:1.3rem}
.gal figure{background:none;border:0;padding:0;box-shadow:none}
.gal img{border-radius:var(--r-lg)}
.gal figcaption{font-style:normal;text-align:left;padding:10px 2px 0;font-size:.95rem}
.faq details,.faq details:first-child{border-color:var(--line)}
.faq summary{font-family:var(--f-body);font-weight:600;font-size:1.12rem;letter-spacing:0;padding:22px 56px 22px 0}
.faq summary::after{width:34px;height:34px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;font-family:var(--f-body);font-weight:400;font-size:20px;line-height:1;color:var(--ink)}
.faq .a{padding:0 56px 22px 0}

/* visit */
.addr{font-family:var(--f-display);font-weight:var(--h-w);letter-spacing:var(--h-track)}
.addr small{font-family:var(--f-body);font-style:normal}
#hours{border-color:var(--line)}
#hours li{border-color:var(--line)}
#hours li.today{background:var(--surface);border-radius:var(--r-sm)}
.contact a{border-color:var(--accent)}
.map{border:0;padding:0;border-radius:var(--r-lg);overflow:hidden;background:var(--bg3)}
.map iframe{filter:saturate(.85)}

/* inside-page header */
.phero{background:var(--bg);border:0;padding:clamp(26px,4vw,52px) 0 clamp(40px,5vw,72px)}
.phero h1{text-transform:none;letter-spacing:var(--h1-track);line-height:var(--h1-lh);font-size:clamp(2.3rem,4.6vw,4.1rem);max-width:14em}
.phero h1 .g{color:var(--accent-ink);display:inline}
.phero .lead{color:var(--mute);font-size:1.12rem;margin-top:18px}
.prose h2{margin-bottom:16px}
.head-c h2+p{margin-top:14px}
.phero .facts{gap:8px;font-family:var(--f-body);font-size:14px;letter-spacing:0;text-transform:none}
.phero .facts li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.phero-photo{max-width:400px}
.crumbs{font-family:var(--f-body);font-size:13.5px;letter-spacing:0;text-transform:none}
.crumbs a{color:var(--mute)}
.crumbs a:hover{color:var(--ink)}
@media (max-width:900px){.phero-photo{max-width:100%;width:100%}.phero-photo .gilt .in{aspect-ratio:4/3}}

/* prices */
.prices{background:var(--bg)}
.table-block h2,.ph{text-transform:none;letter-spacing:var(--h-track)}
.ph span{font-family:var(--f-body);font-size:13px;letter-spacing:0;text-transform:none}
.lhead{font-family:var(--f-body);font-size:12px;letter-spacing:.06em;color:var(--mute);border-color:var(--line-strong)}
.lrow{border-color:var(--line)}
.lrow:hover{background:color-mix(in srgb,var(--bg2) 75%,transparent)}
.row-n b{font-family:var(--f-body);font-weight:600;font-size:1.06rem}
.row-d{font-size:.95rem}
.row-m{font-family:var(--f-body);font-size:13px;letter-spacing:0;text-transform:none}
.c em{font-family:var(--f-body);font-weight:600;font-size:1.12rem;font-variant-numeric:tabular-nums lining-nums}
.c .na{color:var(--mute);opacity:.55}
.c .rb{font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
.rb{color:var(--accent-ink)}
.tag{font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.01em;text-transform:none;border-radius:999px;padding:1px 9px;border-color:var(--line-strong)}
.asof{font-family:var(--f-body);font-size:13px;letter-spacing:0;text-transform:none}
@media (max-width:700px){
  .lrow:not(.srow) .c{border-color:var(--line);border-radius:var(--r-sm);background:var(--surface)}
  .lrow:not(.srow) .c::before{font-family:var(--f-body);font-size:12px;letter-spacing:0;text-transform:none;color:var(--mute)}
}
.prose a,.faq .a a,.fine a{color:var(--accent-ink)}
.policy-list,.policy-list li{border-color:var(--line)}

/* closing band: a rounded deep panel */
.cta-band{background:var(--deep);color:var(--on-deep);border-radius:var(--r-xl);margin:0 clamp(8px,1.4vw,20px) clamp(8px,1.4vw,20px)}
.cta-band .cta-h{font-family:var(--f-display);font-weight:var(--h-w);text-transform:none;letter-spacing:var(--h1-track);line-height:var(--h1-lh);font-size:clamp(2.3rem,4.8vw,4rem)}
.cta-band .cta-sub{font-family:var(--f-body);font-size:1.05rem;letter-spacing:0;text-transform:none;line-height:1.5;color:var(--on-deep-mute)}

/* footer */
footer{background:var(--bg);text-align:left}
footer .brand{margin:0 0 20px}
.foot-links{justify-content:flex-start;gap:4px 22px;margin:14px 0}
.foot-links a{font-family:var(--f-body);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--mute)}
.foot-links a:hover{color:var(--ink)}
.foot-small{font-family:var(--f-body);font-size:13px;letter-spacing:0;text-transform:none}

/* phone action bar */
@media (max-width:760px){
  .mbar{background:color-mix(in srgb,var(--bg) 90%,transparent);border-color:var(--line)}
  .mbar a,.mbar button{border-radius:var(--r-btn);border-color:var(--line-strong);font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none}
  .mbar .book{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-ink)}
}

/* fonts: https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@1&display=swap */
/* Look "sky", heaven version (2026-10-14: "a cool style of blue with clouds", "type of heaven vibe"). Luminous pale
   blue, deep navy text, Geist with Instrument Serif italics for the accent words, soft glowing shadows. The home hero
   and inside-page headers are a heavenly sky (assets/heaven-*.webp, generated in Gemini) with drawn clouds drifting
   over it (assets/clouds-*.webp, tools/make_clouds.py); the video card floats in a cloud bank. Structure: look-core.css. */
:root{
  --f-display:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;--f-body:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-accent:'Instrument Serif',Georgia,'Times New Roman',serif;
  --bg:#F4F8FD;--bg2:#E9F2FC;--bg3:#D8E7F7;--surface:#FFFFFF;--ink:#0F2440;--mute:#4D627E;
  --line:rgba(15,36,64,.1);--line-strong:rgba(15,36,64,.22);
  --accent:#5E9DE2;--accent-ink:#2361AC;--accent-soft:#DCEBFB;
  --deep:#123A6B;--on-deep:#F4F8FD;--on-deep-mute:#BBD0EA;
  --btn-bg:#0F2440;--btn-ink:#FFFFFF;--btn-bg-h:#2361AC;--star:#E2A31E;
  --r-sm:12px;--r-md:20px;--r-lg:28px;--r-xl:40px;--r-btn:999px;
  --h-w:500;--h-track:-.035em;--h-lh:1.05;--h1-track:-.045em;--h1-lh:.98;--brand-track:-.03em;
  --shadow:0 30px 60px -30px rgba(35,97,172,.38);
  --glow:0 0 0 1px rgba(255,255,255,.7),0 30px 70px -28px rgba(35,97,172,.45);
}
/* accent words in a light italic serif: the airy note */
.hero h1 .g,.phero h1 .g,h2 em,.cta-band .cta-h{font-family:var(--f-accent);font-style:italic;font-weight:400;letter-spacing:-.01em}
.hero h1 .g,.phero h1 .g{font-size:1.08em;color:var(--accent-ink)}
.hero .tagline{font-family:var(--f-accent);font-style:italic;font-weight:400;font-size:1.6rem;line-height:1.2;letter-spacing:-.005em;color:var(--ink)}
.kick::before{box-shadow:0 0 0 3px rgba(94,157,226,.18),0 0 12px rgba(94,157,226,.8)}
.btn.fill:hover{box-shadow:0 12px 30px -10px rgba(35,97,172,.65)}
.card a:hover,.tiles a:hover{box-shadow:var(--glow)}

/* ── home hero: heavenly sky, drifting clouds, the video floating in a cloud bank ── */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-bottom:clamp(96px,10vw,150px);
  background:radial-gradient(900px 420px at 30% -8%,rgba(255,253,244,.95),rgba(255,253,244,0) 70%),
             url("/assets/heaven-hero.webp") 62% 40%/cover no-repeat,
             linear-gradient(180deg,#BFD8F3 0%,#DCEAF9 55%,var(--bg) 100%)}
.hero::before{content:"";position:absolute;z-index:-1;left:0;top:4%;width:calc(100% + 1000px);height:380px;
  background:url("/assets/clouds-sky.webp") 0 0/1000px auto repeat-x;opacity:.75;pointer-events:none}
.hero::after{content:"";position:absolute;z-index:1;left:0;bottom:-1px;width:calc(100% + 1100px);height:286px;
  background:url("/assets/clouds-bank.webp") 0 100%/1100px auto repeat-x;pointer-events:none}
.hero-txt{position:relative;z-index:2}
.hero-txt::before{content:"";position:absolute;z-index:-1;inset:-6% -14% -6% -40%;background:radial-gradient(closest-side,rgba(244,248,253,.82),rgba(244,248,253,0));pointer-events:none}
.hero-img{box-shadow:var(--glow);border:6px solid rgba(255,255,255,.55);background-clip:padding-box}
.hero-img::after{background:linear-gradient(0deg,rgba(15,36,64,.18),rgba(15,36,64,0) 40%)}
.hero-cap{display:none}
.hero .gline a{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero .btn.soft{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:900px){
  .hero{padding-bottom:110px;background-position:0 0,70% 0,0 0}
  .hero::before{height:260px;background-size:700px auto;width:calc(100% + 700px);top:0}
  .hero::after{height:182px;background-size:700px auto;width:calc(100% + 700px)}
  .hero-txt::before{display:none}
}

/* ── inside-page headers: the same sky, lighter ── */
.phero{position:relative;overflow:hidden;isolation:isolate;padding-bottom:clamp(70px,8vw,120px);
  background:radial-gradient(800px 360px at 20% -10%,rgba(255,253,244,.9),rgba(255,253,244,0) 70%),
             linear-gradient(180deg,rgba(244,248,253,.35),rgba(244,248,253,.35)),
             url("/assets/heaven-hero.webp") 70% 30%/cover no-repeat,
             linear-gradient(180deg,#C9DFF5 0%,#E3EEFA 60%,var(--bg) 100%)}
.phero::before{content:"";position:absolute;z-index:-1;left:0;top:0;width:calc(100% + 1000px);height:380px;
  background:url("/assets/clouds-sky.webp") 0 0/1000px auto repeat-x;opacity:.6;pointer-events:none}
.phero::after{content:"";position:absolute;z-index:0;left:0;bottom:-1px;width:calc(100% + 1100px);height:200px;
  background:url("/assets/clouds-bank.webp") 0 100%/1100px auto repeat-x;pointer-events:none}
.phero .wrap{position:relative;z-index:1}
.phero .lead{color:#3E5472}
.phero .facts li{background:rgba(255,255,255,.82)}
.gilt{box-shadow:var(--glow);border:6px solid rgba(255,255,255,.6)}
.gilt .in{border-radius:calc(var(--r-lg) - 6px)}
@media (max-width:900px){.phero::after{height:130px;background-size:700px auto;width:calc(100% + 700px)}.phero::before{background-size:700px auto;width:calc(100% + 700px)}}

/* ── panels and closing band ── */
.sec.alt,.pedi,.visit{background:linear-gradient(180deg,#E6F0FB 0%,#EEF5FC 100%)}
.cta-band{position:relative;overflow:hidden;isolation:isolate;color:var(--ink);
  background:radial-gradient(700px 300px at 50% 0%,rgba(255,253,244,.9),rgba(255,253,244,0) 70%),
             url("/assets/heaven-clouds.webp") 50% 55%/cover no-repeat,
             linear-gradient(180deg,#B9D4F1,#E7F0FB)}
.cta-band::before{content:"";position:absolute;z-index:-1;left:0;bottom:-10px;width:calc(100% + 1100px);height:286px;
  background:url("/assets/clouds-bank.webp") 0 100%/1100px auto repeat-x;opacity:.9;pointer-events:none}
.cta-band .cta-txt{position:relative}
.cta-band .cta-h{color:var(--ink);text-shadow:0 2px 30px rgba(255,255,255,.8)}
.cta-band .cta-sub{color:#2F4766}
.cta-band .btn.cream{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.cta-band .btn.cream:hover{background:var(--btn-bg-h);border-color:var(--btn-bg-h);color:#fff}
footer{background:linear-gradient(180deg,var(--bg) 0%,#E1ECF9 100%)}
.pv{background:var(--deep)}

/* ── motion: clouds drift, the video floats, sections ease in (all off for reduced motion) ── */
@keyframes hb-drift{to{transform:translateX(-1000px)}}
@keyframes hb-drift-bank{to{transform:translateX(-1100px)}}
@keyframes hb-float{50%{transform:translateY(-8px)}}
@keyframes hb-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero::before,.phero::before{animation:hb-drift 150s linear infinite}
  .hero::after,.phero::after,.cta-band::before{animation:hb-drift-bank 210s linear infinite}
  .hero-img{animation:hb-float 7s ease-in-out infinite}
  .js .hero-txt>:not(h1){animation:hb-rise .9s var(--ease) both}
  .js .hero-txt>.gline{animation-delay:.08s}.js .hero-txt>.tagline{animation-delay:.16s}.js .hero-txt>.svc{animation-delay:.24s}.js .hero-txt>.cta{animation-delay:.32s}
  .js .rv:is(.cards,.tiles,.rvws)>li{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .js .rv.in:is(.cards,.tiles,.rvws)>li{opacity:1;transform:none}
  .js .rv:is(.cards,.tiles,.rvws)>li:nth-child(2){transition-delay:.08s}
  .js .rv:is(.cards,.tiles,.rvws)>li:nth-child(3){transition-delay:.16s}
  .js .rv:is(.cards,.tiles,.rvws)>li:nth-child(4){transition-delay:.24s}
  .js .rv:is(.cards,.tiles,.rvws)>li:nth-child(5){transition-delay:.32s}
  .js .rv:is(.cards,.tiles,.rvws)>li:nth-child(n+6){transition-delay:.4s}
}

/* ═══════ Sections, 2026-10-14 (later): "make all sections more modern and impressive with animations, heaven vibe".
   Short one-shot choreography plus slow ambient loops; nothing tilts or covers text; look-sky.js inserts the beams,
   motes, ribbon copies, word spans and the "Pause animations" switch. ═══════ */
:root{interpolate-size:allow-keywords}

/* light beams from above and rising motes (hero, closing band) */
.rays{position:absolute;z-index:-1;left:-10%;right:-10%;top:-30%;height:130%;pointer-events:none;opacity:.8;mix-blend-mode:screen;filter:blur(3px);
  background:repeating-conic-gradient(from 168deg at 30% 0%,rgba(255,255,255,0) 0deg,rgba(255,255,255,.34) 3deg,rgba(255,255,255,0) 7deg,rgba(255,255,255,0) 13deg);
  -webkit-mask-image:radial-gradient(70% 75% at 30% 0%,#000 0%,transparent 72%);mask-image:radial-gradient(70% 75% at 30% 0%,#000 0%,transparent 72%)}
.cta-band .rays{background:repeating-conic-gradient(from 160deg at 50% 0%,rgba(255,255,255,0) 0deg,rgba(255,255,255,.4) 3deg,rgba(255,255,255,0) 7deg,rgba(255,255,255,0) 12deg);
  -webkit-mask-image:radial-gradient(60% 80% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(60% 80% at 50% 0%,#000,transparent 75%)}
.glints{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero .glints{left:50%}
.glints i{position:absolute;left:var(--x);bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 6px 2px rgba(255,255,255,.9),0 0 16px 5px rgba(160,200,245,.55)}
@media (max-width:900px){.hero .glints{left:0;height:58%}}

/* proof chips: a slow ribbon */
.strip.has-ribbon{overflow:hidden;padding:2px 0 8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.strip ul.ribbon{width:max-content;max-width:none;margin:0;flex-wrap:nowrap;justify-content:flex-start;gap:0;padding:6px 0}
.strip ul.ribbon li{margin-right:12px;white-space:nowrap;box-shadow:0 10px 24px -18px rgba(35,97,172,.55)}
.strip.has-ribbon li::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 0 0;transform:none;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.strip.has-ribbon:hover ul.ribbon,.strip.has-ribbon:focus-within ul.ribbon{animation-play-state:paused}

/* section headings: words rise out of a mist */
.wc .w,.wc .w>span{display:inline-block}

/* buttons: a light sweep on hover */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn.fill::after,.cta-band .btn.cream::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-70%;width:55%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.32),rgba(255,255,255,0));transition:left .8s var(--ease)}
.btn.fill:hover::after,.cta-band .btn.cream:hover::after{left:120%}

/* treatment cards: photos unveil, a soft glow follows the pointer, the arrow fills */
.card a{isolation:isolate;overflow:hidden}
.card a::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(94,157,226,.18),rgba(94,157,226,0) 65%)}
.card a:hover::before{opacity:1}
.card img{transition:filter .5s var(--ease),clip-path 1.1s var(--ease),scale 1.4s var(--ease)}
.card a:hover img{filter:saturate(1.08) brightness(1.04)}
.card .ar{width:36px;height:36px;padding:9px;right:16px;bottom:14px;border-radius:50%;border:1px solid var(--line-strong);transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease)}
.card a:hover .ar{background:var(--btn-bg);border-color:var(--btn-bg);color:#fff}
.card .from{padding-right:48px}

/* framed photos: a slow halo of light behind, a wisp of cloud at the base, gentle drift with scroll */
.pedi-photo,.phero-photo{position:relative}
.pedi{overflow:clip}   /* the halo and the wisp stay inside the rounded panel (no sideways scroll on a phone) */
.gilt{position:relative;isolation:isolate;transform:translateY(calc(var(--py,0) * -26px))}
.sec.alt,.pedi:not(.plain),.visit,.sec:has(> .wrap > .tiles),.sec:has(.rvws){margin-block:clamp(10px,1.4vw,20px)}
.gilt .in img{transition:scale 1.6s var(--ease)}

/* laser-area tiles: frosted glass on a sky panel */
.sec:has(> .wrap > .tiles){position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);margin-inline:clamp(8px,1.4vw,20px);
  background:radial-gradient(900px 380px at 80% 0%,rgba(255,253,244,.85),rgba(255,253,244,0) 70%),linear-gradient(180deg,#CFE3F7 0%,#E4EFFB 60%,#EEF5FC 100%)}
.sec:has(> .wrap > .tiles)::before{content:"";position:absolute;z-index:-1;left:0;top:0;width:100%;height:380px;opacity:.55;pointer-events:none;
  background:url("/assets/clouds-sky.webp") 0 0/1000px auto repeat-x}
.tiles a{position:relative;overflow:hidden;isolation:isolate;background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:0 18px 40px -28px rgba(35,97,172,.45)}
.tiles a:hover{background:rgba(255,255,255,.88)}
.tiles a::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-70%;width:55%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.7),rgba(255,255,255,0));transition:left .9s var(--ease)}
.tiles a:hover::after{left:120%}

/* reviews: a heavenly panel, floating cards */
.sec:has(.rvws){position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(760px 320px at 50% 0%,rgba(255,253,244,.9),rgba(255,253,244,0) 70%),linear-gradient(180deg,#DCEAF9,#EEF5FC)}
.rvw{position:relative;isolation:isolate;overflow:hidden;background:rgba(255,255,255,.8);border-color:rgba(255,255,255,.95);box-shadow:0 24px 50px -34px rgba(35,97,172,.5)}
.rvw::before{content:"\201C";position:absolute;top:12px;right:18px;font-family:var(--f-accent);font-size:3.4rem;line-height:.8;color:var(--accent);opacity:.3;pointer-events:none}
.rvw::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(94,157,226,.16),rgba(94,157,226,0) 65%)}
.rvw:hover::after{opacity:1}

/* FAQ: glass cards that open smoothly */
.faq details,.faq details:first-child{border:0;border-radius:var(--r-md);background:rgba(255,255,255,.55);margin-bottom:10px;padding:0 20px;transition:background .35s,box-shadow .35s}
.faq details[open]{background:#fff;box-shadow:var(--glow)}
.faq summary{padding:20px 52px 20px 0}
.faq summary::after{right:0;transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s}
.faq details[open] summary::after{background:var(--btn-bg);color:#fff;border-color:var(--btn-bg)}
.faq .a{padding:0 52px 22px 0}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
.faq details[open]::details-content{block-size:auto}

/* visit: a glass hours card and a framed map */
#hours{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);border-radius:var(--r-md);padding:6px 10px;box-shadow:0 20px 40px -30px rgba(35,97,172,.45)}
#hours li:last-child{border-bottom:0}
.map{border:6px solid rgba(255,255,255,.75);box-shadow:var(--glow)}

/* closing band: the sea of clouds drifts a little as you scroll */
.cta-band{background-position:0 0,50% calc(55% + var(--py,0) * 60px),0 0}

/* footer: clouds hanging from the top edge */
footer{position:relative;overflow:hidden;isolation:isolate;padding-top:clamp(120px,12vw,170px)}
footer::before{content:"";position:absolute;z-index:-1;left:0;top:-2px;width:calc(100% + 1100px);height:230px;pointer-events:none;
  background:url("/assets/clouds-bank.webp") 0 100%/1100px auto repeat-x;transform:scaleY(-1)}
.motion-p{margin-top:16px}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);background:rgba(255,255,255,.6);border-radius:999px;padding:7px 14px;font:500 13px/1 var(--f-body);color:var(--mute);cursor:pointer}
.motion-toggle:hover{color:var(--ink);border-color:var(--ink)}
.motion-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.motion-toggle .pl{display:none;fill:currentColor;stroke:none}
.motion-toggle[aria-pressed="true"] .pa{display:none}.motion-toggle[aria-pressed="true"] .pl{display:block}

/* ── the motion itself (none of it under reduced motion) ── */
@keyframes hb-glint{0%{transform:translateY(0);opacity:0}15%{opacity:.9}80%{opacity:.6}100%{transform:translateY(-440px);opacity:0}}
@keyframes hb-breathe{0%,100%{opacity:.8}50%{opacity:.45}}
@keyframes hb-ribbon{to{transform:translateX(-50%)}}
@keyframes hb-spin{to{rotate:360deg}}
@keyframes hb-sway{0%,100%{translate:0 0}50%{translate:14px 0}}
@keyframes hb-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes hb-pulse{0%,100%{box-shadow:0 0 0 3px rgba(94,157,226,.18),0 0 12px rgba(94,157,226,.8)}50%{box-shadow:0 0 0 7px rgba(94,157,226,.08),0 0 18px rgba(94,157,226,.95)}}
@keyframes hb-shimmer{from{background-position:100% 0}to{background-position:0 0}}
@keyframes hb-drift-flip{from{transform:scaleY(-1) translateX(0)}to{transform:scaleY(-1) translateX(-1100px)}}
@media (prefers-reduced-motion:no-preference){
  .glints i{animation:hb-glint var(--d) linear var(--t) infinite}
  .rays{animation:hb-breathe 9s ease-in-out infinite}
  .strip ul.ribbon{animation:hb-ribbon 45s linear infinite}
  .rvw{animation:hb-bob 7s ease-in-out infinite}
  .rvw:nth-child(2n){animation-duration:8.5s;animation-delay:-2.5s}
  .rvw:nth-child(3n){animation-delay:-4.5s}
  .hero-kick::before,.status.open::before{animation:hb-pulse 2.8s ease-in-out infinite}
  footer::before{animation:hb-drift-flip 240s linear infinite}
  .hero h1 .g,.phero h1 .g{background:linear-gradient(100deg,var(--accent-ink) 40%,#9CC8F4 50%,var(--accent-ink) 60%) 0 0/260% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;animation:hb-shimmer 2.6s var(--ease) .5s 1 both}
  .js .wc .w>span{opacity:0;filter:blur(10px);transform:translateY(.45em);transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 60ms)}
  .js .wc.in .w>span,.js .rv.in>.wc .w>span{opacity:1;filter:blur(0);transform:none}
  .js .rv .card img,.js .rv .card .noimg{clip-path:inset(32% 0 0 0 round calc(var(--r-lg) - 6px));scale:1.08}
  .js .rv.in .card img,.js .rv.in .card .noimg{clip-path:inset(0 0 0 0 round calc(var(--r-lg) - 6px));scale:1}
  .js .rv .card:nth-child(2) img{transition-delay:0s,.1s,.1s}.js .rv .card:nth-child(3) img{transition-delay:0s,.2s,.2s}.js .rv .card:nth-child(4) :is(img,.noimg){transition-delay:0s,.3s,.3s}
  .js .rv.pedi-photo .gilt .in img{scale:1.12}
  .js .rv.pedi-photo.in .gilt .in img{scale:1}
  .js .gal.rv figure img{clip-path:inset(30% 0 0 0 round var(--r-lg));transition:clip-path 1.1s var(--ease)}
  .js .gal.rv.in figure img{clip-path:inset(0 0 0 0 round var(--r-lg))}
  .js .gal.rv figure:nth-child(2) img{transition-delay:.12s}.js .gal.rv figure:nth-child(3) img{transition-delay:.24s}.js .gal.rv figure:nth-child(4) img{transition-delay:.36s}
}
/* "Pause animations": every loop stops where it is, the motes go */
.motion-off .hero::before,.motion-off .hero::after,.motion-off .phero::before,.motion-off .phero::after,.motion-off .cta-band::before,.motion-off footer::before,
.motion-off .hero-img,.motion-off .strip ul.ribbon,.motion-off .rays,
.motion-off .rvw,.motion-off .hero-kick::before,.motion-off .status.open::before{animation-play-state:paused}
.motion-off .glints{display:none}

/* ═══════ Cupid scroll journey, 2026-10-14 (the Wix "cosmic scroll journey", "but with cupid"). Home page only; built by
   build.py when the look is "sky". Scroll progress arrives as --p (0 to 1) from look-sky.js; without the script, or under
   reduced motion, every scene is a plain, fully visible section. ═══════ */
:root{--f-hero:'Italiana','Cormorant Garamond',Georgia,serif}
/* loops that use transform, so they add to the scroll-driven translate/scale instead of replacing it */
@keyframes hb-sway-t{0%,100%{transform:translateX(0)}50%{transform:translateX(16px)}}
@keyframes hb-bob-t{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* type: thin classical capitals for the big moments, the italic serif for the accent words */
h2{font-family:var(--f-hero);font-weight:400;text-transform:uppercase;letter-spacing:.015em;line-height:.98;font-size:clamp(2.2rem,4.6vw,4rem)}
.tr-head h2{font-size:clamp(2.2rem,4.6vw,4rem);letter-spacing:.015em}
h2 em{text-transform:none}
.phero h1{font-family:var(--f-hero);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
.phero h1 .g{text-transform:none}

/* the opening scene */
.hero.journey{display:block;height:auto;padding:0;background:none;overflow:clip;isolation:auto}
.hero.journey::before,.hero.journey::after{display:none}
.journey .stage{position:relative;overflow:hidden;isolation:isolate;min-height:min(100svh,920px);display:grid;align-items:center;
  padding:clamp(24px,4vw,56px) var(--edge) clamp(150px,16vh,200px);
  background:radial-gradient(1000px 520px at 30% -12%,rgba(255,253,244,.95),rgba(255,253,244,0) 70%),
             url("/assets/heaven-hero.webp") 60% 30%/cover no-repeat,
             linear-gradient(180deg,#B9CBF1 0%,#D6E3F8 48%,var(--bg) 100%)}
.j-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.j-sky .cl{position:absolute;pointer-events:none}
.cl-back{left:0;top:18%;width:calc(100% + 1000px);height:380px;opacity:.7;background:url("/assets/clouds-sky.webp") 0 0/1000px auto repeat-x}
.cl-l,.cl-r{z-index:2;bottom:-2px;height:clamp(190px,30vh,290px);width:70%;background:url("/assets/clouds-bank.webp") 0 100%/1100px auto repeat-x;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.cl-l{left:-6%}
.cl-r{right:-6%;background-position:520px 100%}
.cupid{position:absolute;z-index:1;right:max(3vw,calc((100vw - 1240px)/2 - 20px));top:calc(50% - min(39svh,380px));height:min(78svh,760px);width:auto;
  filter:drop-shadow(0 40px 50px rgba(35,97,172,.28))}
.journey .hero-txt{position:relative;z-index:3;max-width:min(780px,60vw);padding:0}
.journey .hero-txt::before{inset:-12% -20% -12% -30%}
.journey .svc{max-width:34em}
.hero.journey h1{font-family:var(--f-hero);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.92;font-size:clamp(2.7rem,4.8vw,5.6rem);max-width:none}
.hero.journey h1 .g{display:block;text-transform:none;font-size:.9em;margin-top:.06em}
.journey .tagline{margin-top:18px}
.scroll-cue{position:absolute;z-index:3;left:50%;bottom:22px;translate:-50% 0;display:grid;justify-items:center;gap:8px;text-decoration:none;
  font:600 11px/1 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--ink);opacity:.75}
.scroll-cue i{display:block;width:1px;height:42px;background:linear-gradient(var(--ink),rgba(15,36,64,0))}
@media (max-width:900px){
  .journey .stage{display:block;padding:0 0 44px;min-height:0}
  .j-sky{position:relative;inset:auto}
  .cupid{position:relative;display:block;right:auto;top:auto;height:min(44svh,380px);margin:6px auto 0}
  .journey .hero-txt{max-width:none;padding:0 20px}
  .journey .hero-txt::before{display:none}
  .cl-back{top:0;height:260px;background-size:700px auto}
  .cl-l,.cl-r{height:150px;width:80%;background-size:700px auto}
  .cl-r{background-position:330px 100%}
  .scroll-cue{display:none}
}

/* cupid's arrow across the top of the treatments (inserted by look-sky.js) */
#services{position:relative;overflow:clip}
.arrow-fly{position:absolute;z-index:0;top:clamp(14px,2.4vw,34px);left:0;width:clamp(150px,18vw,230px);pointer-events:none;
  translate:calc(-110% + var(--e,0) * (100vw + 110%)) 0;opacity:calc(var(--e,0) * 6 - .3)}
.arrow-fly svg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(168,124,40,.35))}
.arrow-fly i{position:absolute;right:92%;top:50%;width:min(36vw,420px);height:2px;translate:0 -50%;
  background:linear-gradient(90deg,rgba(255,236,190,0),rgba(255,226,160,.9));filter:blur(.6px)}
.js .arrow-fly{display:block}
.arrow-fly{display:none}

/* statement: giant words, then her studio reel grows in an arched window */
.statement{position:relative;padding:clamp(64px,8vw,112px) 0}
.st-stage{display:grid;justify-items:center;gap:clamp(28px,4vw,48px);padding:0 20px;text-align:center}
.st-words{font-family:var(--f-hero);text-transform:uppercase;font-size:clamp(3rem,11vw,10.5rem);line-height:.9;letter-spacing:.01em;color:var(--ink)}
.st-words span{display:block}
.st-words span:nth-child(2){color:var(--accent-ink)}
.st-window{position:relative;width:min(72vw,460px);margin:0}
.st-window figcaption{margin-top:14px;font-size:14px;color:var(--mute);text-align:center}

/* four facts that count up */
.stats{padding:clamp(48px,6vw,90px) 0}
.stat-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.stat-list li{text-align:center;padding:clamp(22px,3vw,36px) 12px;border-radius:var(--r-lg);background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.95);box-shadow:0 22px 44px -32px rgba(35,97,172,.5)}
.stat-list b{display:block;font-family:var(--f-hero);font-weight:400;font-size:clamp(3.2rem,6.6vw,5.8rem);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.stat-list span{display:block;margin-top:10px;color:var(--mute);font-size:15px;line-height:1.4}
@media (max-width:760px){.stat-list{grid-template-columns:1fr 1fr}}

/* closing band: cupid takes aim at the button */
.cta-band::after{content:"";position:absolute;z-index:0;pointer-events:none;background:url("/assets/cupid-aim.webp") 0 0/contain no-repeat;
  left:clamp(10px,5vw,80px);bottom:4%;width:min(20vw,270px);aspect-ratio:923/1100;filter:drop-shadow(0 26px 30px rgba(35,97,172,.3));
  translate:0 calc(var(--py,0) * -40px)}
@media (max-width:1099px){.cta-band::after{width:110px;left:14px;top:14px;bottom:auto}.cta-band.solo .cta-txt{padding-top:160px}}

/* the scroll-driven version (with the script, and only when motion is welcome) */
@media (prefers-reduced-motion:no-preference) and (min-width:901px){
  .js .hero.journey{height:175vh}
  .js .journey .stage{position:sticky;top:0;height:100svh;min-height:600px}
  .js .journey .hero-txt{translate:0 calc(var(--p,0) * -14vh);opacity:clamp(0,calc(1 - var(--p,0) * 1.8),1)}
  .js .cupid{translate:0 calc(var(--p,0) * -34vh);scale:calc(1 + var(--p,0) * .3)}
  .js .cl-l{translate:calc(var(--p,0) * -42vw) calc(var(--p,0) * -6vh);scale:calc(1 + var(--p,0) * 1.7)}
  .js .cl-r{translate:calc(var(--p,0) * 42vw) calc(var(--p,0) * -6vh);scale:calc(1 + var(--p,0) * 1.7)}
  .js .cl-back{opacity:calc(.7 - var(--p,0) * .4)}
  .js .scroll-cue{opacity:calc(.75 - var(--p,0) * 4)}
  .js .journey .stage::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at 50% 62%,#FFFFFF 0%,var(--bg) 70%);
    opacity:clamp(0,calc((var(--p,0) - .6) * 2.6),1)}
}
@media (prefers-reduced-motion:no-preference){
  .cupid{animation:hb-float 6s ease-in-out infinite}
  .cl-back{animation:hb-drift 150s linear infinite}
  .cl-l,.cl-r{animation:hb-sway-t 12s ease-in-out infinite}
  .cl-r{animation-delay:-6s}
  .scroll-cue i{animation:hb-breathe 2.4s ease-in-out infinite}
  .cta-band::after{animation:hb-bob-t 6s ease-in-out infinite}
  .js .statement{height:240vh;padding:0}
  .js .st-stage{position:sticky;top:0;height:100svh;display:block;padding:0;overflow:hidden;
    background:radial-gradient(900px 520px at 50% 45%,#FFFFFF,rgba(255,255,255,0) 70%),linear-gradient(180deg,var(--bg),#DCE8FA 50%,var(--bg))}
  .js .st-words{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
    translate:0 calc(clamp(0,(var(--p,0) - .38) * 5,1) * -26vh);opacity:calc(1 - clamp(0,(var(--p,0) - .38) * 5,1))}
  .js .st-words span{opacity:clamp(0,(var(--p,0) - .02) * 7,1);translate:0 calc((1 - clamp(0,(var(--p,0) - .02) * 7,1)) * 60px)}
  .js .st-words span:nth-child(2){opacity:clamp(0,(var(--p,0) - .15) * 7,1);translate:0 calc((1 - clamp(0,(var(--p,0) - .15) * 7,1)) * 60px)}
  .js .st-words span:nth-child(3){opacity:clamp(0,(var(--p,0) - .28) * 7,1);translate:0 calc((1 - clamp(0,(var(--p,0) - .28) * 7,1)) * 60px)}
  .js .st-window{position:absolute;left:50%;top:50%;width:min(36vw,440px);
    translate:-50% calc(-50% + (1 - clamp(0,(var(--p,0) - .5) * 2.9,1)) * 75vh);scale:calc(.62 + clamp(0,(var(--p,0) - .5) * 2.9,1) * .38)}
  .js .st-window figcaption{opacity:clamp(0,(var(--p,0) - .78) * 6,1)}
}
@media (prefers-reduced-motion:no-preference) and (max-width:900px){
  .js .statement{height:200vh}
  .js .st-window{width:min(70vw,360px)}
}
.motion-off .cupid,.motion-off .cl-back,.motion-off .cl-l,.motion-off .cl-r,.motion-off .scroll-cue i,.motion-off .cta-band::after{animation-play-state:paused}

/* ═══════ Her reels and photos, 2026-10-14 ("use all of them", "the current images and videos look really bad") ═══════ */
.reel-media{border-radius:var(--r-lg);border:5px solid rgba(255,255,255,.8);box-shadow:var(--glow);background:var(--bg3);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.reel-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(15,36,64,.18),rgba(15,36,64,0) 35%)}
.reel figcaption{font-size:14.5px;font-weight:500;color:var(--ink)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.reel-media:hover{transform:translateY(-6px)}}
.reels-sec{position:relative}
.gal figure img{border:5px solid rgba(255,255,255,.8);box-shadow:0 22px 44px -30px rgba(35,97,172,.5)}
.gal{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (min-width:901px){.gal:has(> figure:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
  .gal:has(> figure:nth-child(9):last-child){grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px;margin:0 auto}}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
.phero-photo.clip .gilt .in{border-radius:calc(var(--r-lg) - 6px)}
@media (prefers-reduced-motion:no-preference){
  .js .rv.reels>li{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .js .rv.in.reels>li{opacity:1;transform:none}
  .js .rv.reels>li:nth-child(2){transition-delay:.1s}.js .rv.reels>li:nth-child(3){transition-delay:.2s}.js .rv.reels>li:nth-child(4){transition-delay:.3s}
  .js .gal.rv figure:nth-child(n+5) img{transition-delay:.48s}
}

/* ═══════ More of the space site, 2026-10-14 late: a services portal in the hero, word-fill type, gliding service names,
   a pinned reel strip, cupid firing the arrow, a cloud passage. Same rules: scroll drives it, nothing covers text,
   reduced motion or no script = plain sections. ═══════ */

/* cupid slides in and fires the arrow across the treatments */
.arrow-cupid{position:absolute;z-index:1;top:0;left:clamp(6px,3vw,40px);height:clamp(64px,8vw,108px);width:auto;pointer-events:none;
  filter:drop-shadow(0 12px 16px rgba(35,97,172,.3));translate:calc((1 - clamp(0,var(--e,0) * 4,1)) * -160%) 0;opacity:clamp(0,var(--e,0) * 4,1)}
.js .arrow-fly{translate:calc(-110% + clamp(0,(var(--e,0) - .24) * 1.4,1) * (100vw + 110%)) 0;opacity:calc(clamp(0,(var(--e,0) - .24) * 1.4,1) * 8 - .2)}

/* her bio line, giant: words fill in as you scroll */
.scrollfill{position:relative;padding:clamp(64px,8vw,110px) 0;overflow:clip}
.sf-stage{position:relative;max-width:1180px;margin:0 auto;padding:0 20px;text-align:center}
.sf-stage .kick{justify-content:center}
.sf-text{margin-top:18px;font-family:var(--f-hero);text-transform:uppercase;font-size:clamp(2.6rem,7vw,7.2rem);line-height:.98;color:var(--ink);text-wrap:balance}
.sf-text span{transition:color .45s var(--ease)}

/* her services, two rows of giant capitals gliding opposite ways */
.kinetic{position:relative;overflow:clip;padding:clamp(24px,4vw,56px) 0;display:grid;gap:clamp(2px,1vw,10px)}
.kn-row{display:flex;align-items:center;gap:.45em;width:max-content;white-space:nowrap;font-family:var(--f-hero);text-transform:uppercase;font-size:clamp(3rem,9vw,8.6rem);line-height:1}
.kn-row i{font-style:normal;font-size:.42em;color:var(--accent)}
.kn-a span{color:rgba(15,36,64,.06);-webkit-text-stroke:1.2px var(--ink)}
.kn-b span{color:var(--accent-ink)}

/* the reel strip (home): a row you slide through */
.reels-sec.pinned{position:relative;padding:clamp(56px,7vw,100px) 0}
.pin-track{overflow-x:auto;padding:6px var(--edge) 14px}
.pinned .reels,.pinned .reels.n13{display:flex;gap:18px;width:max-content;max-width:none;margin:0;grid-template-columns:none}
.pinned .reel{width:clamp(190px,19vw,270px);flex:0 0 auto}

/* a cloud bank to fly through before the closing band */
.passage{position:relative;height:clamp(260px,46vh,460px);overflow:clip;pointer-events:none}
.ps-cl{position:absolute;left:-20%;width:140%;pointer-events:none}
.ps-a{top:0;height:55%;background:url("/assets/clouds-bank.webp") 0 100%/1100px auto repeat-x;transform:scaleY(-1)}
.ps-b{bottom:0;height:55%;background:url("/assets/clouds-bank.webp") 300px 100%/1100px auto repeat-x}
.ps-c{top:22%;height:56%;background:url("/assets/clouds-sky.webp") 0 50%/1000px auto repeat-x;opacity:.85}

@media (prefers-reduced-motion:no-preference){
  .js .scrollfill{height:230vh;padding:0}
  .js .sf-stage{position:sticky;top:0;height:100svh;display:grid;align-content:center;max-width:none}
  .js .sf-stage::before{content:"";position:absolute;left:50%;top:50%;width:min(80vw,900px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
    background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(220,234,250,.5) 55%,rgba(244,248,253,0));z-index:-1}
  .js .sf-text span{color:rgba(15,36,64,.13)}
  .js .sf-text span.on{color:var(--ink)}
  .js .sf-text span.on:last-child{color:var(--accent-ink)}
  .js .kn-a{translate:calc(var(--p,0) * -32%) 0}
  .js .kn-b{translate:calc(-32% + var(--p,0) * 32%) 0}
  .js .kn-a span{color:rgba(15,36,64,calc(var(--p,0) * 1.6 - .5))}
  .js .reels-sec.pinned.on{padding:0;height:var(--pin-h,auto)}
  .js .pinned.on .pin-stage{position:sticky;top:0;height:100svh;display:grid;align-content:center;overflow:hidden}
  .js .pinned.on .pin-track{overflow:visible}
  .js .pinned.on .reels{transform:translateX(calc(var(--p,0) * var(--pin-x,0) * -1px))}
  .js .ps-a{translate:calc(-12% + var(--p,0) * 24%) calc(var(--p,0) * 34%)}
  .js .ps-b{translate:calc(12% - var(--p,0) * 24%) calc(var(--p,0) * -34%)}
  .js .ps-c{scale:calc(.9 + var(--p,0) * .9)}
  .ps-c{animation:hb-drift 160s linear infinite}
}
.motion-off .ps-c{animation-play-state:paused}

/* ═══════ Round 4, 2026-10-14 night: goodlifemeds.com's site, in heaven with cupid, in a Lana Del Rey mood.
   "i want that heavenly vibe with cupid going through the clouds but i want design more similar to goodlifemeds.com",
   "think lana del rey vibes, her songs vibe", "you gotta understand heaven vibe first plus cupid", "i really like clouds
   with cupid", "i liked cupid that you had so don't change how he looks", and of round 3's frames: "i don't even like
   halo, at this point it is too much clouds". So: goodlifemeds' sections and type, crisp media with small corners;
   clouds only where cupid flies (the hero, the laser panel, the closing band); a cream-paper, baby-blue and cherry
   palette, the italic serif for the romantic half of each heading, and a whisper of film grain. ═══════ */
:root{
  --f-hero:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;--f-mono:'Geist Mono',ui-monospace,Menlo,Consolas,monospace;
  --bg:#F8F4EC;--bg2:#F0E9DE;--bg3:#E7DED1;--surface:#FFFFFF;--ink:#221E21;--mute:#665E5F;
  --line:rgba(34,30,33,.1);--line-strong:rgba(34,30,33,.2);
  --accent:#9DBDE0;--accent-ink:#A23F45;--accent-soft:#E9F0F8;--blush:#EBD3CF;--rose-ink:#A23F45;--gold:#B08D57;
  --btn-bg:#221E21;--btn-bg-h:#A23F45;--deep:#221E21;--night:#1F1B21;
  --r-sm:6px;--r-md:10px;--r-lg:12px;--r-xl:14px;--r-btn:7px;
  --shadow:0 30px 60px -36px rgba(34,30,33,.38);--glow:0 30px 60px -36px rgba(34,30,33,.38);
}
body{background:var(--bg)}
[id]{scroll-margin-top:86px}
/* a whisper of film grain over everything (Lana's old-film look); never blocks a click */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;background:url("/assets/grain.png") 0 0/220px 220px repeat}

/* type: one grotesk, sentence case, tight; the romantic half of a heading in the italic serif, cherry */
h1,h2,h3,.hero.journey h1,.phero h1{font-family:var(--f-hero);font-weight:400;text-transform:none}
h2,.tr-head h2{font-size:clamp(2.4rem,5vw,4.4rem);line-height:.98;letter-spacing:-.05em}
h2 em,.hero h1 .g,.phero h1 .g{font-family:var(--f-accent);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--accent-ink)}
.phero h1{font-size:clamp(2.5rem,4.8vw,4.4rem);line-height:.97;letter-spacing:-.05em}
.phero h1 .g{display:block;font-size:1.04em}
.kick{font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.kick::before{width:5px;height:5px;border-radius:0;rotate:45deg;background:var(--accent-ink);box-shadow:none}
.hero-kick::before{animation:none}
.hero .tagline{font-size:1.45rem;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.hero h1 .g,.phero h1 .g{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--accent-ink);animation:none}}

/* buttons and links: near-square, quiet; goodlifemeds' "→" links over a hairline */
.btn{border-radius:var(--r-btn);min-height:44px;padding:0 18px;font-size:14px;font-weight:500}
.btn.sm{min-height:36px;padding:0 13px;font-size:13px}
.btn .ar{width:15px;height:15px}
.btn.soft{background:rgba(255,255,255,.55)}
.view-all{font-family:var(--f-mono);font-size:11.5px;font-weight:400;letter-spacing:.07em;text-transform:uppercase}
.arrow-link,.pc-more{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:500}
.arrow-link::before,.pc-more::before{content:"→";font-weight:400}
.arrow-link{margin:22px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line-strong);max-width:24em;transition:color .25s}
.arrow-link:hover,.pc-more:hover{color:var(--accent-ink)}

/* the strip above the menu: four facts in mono capitals */
.annc{background:var(--night);color:#F3ECE4}
.annc ul{list-style:none;display:flex;justify-content:space-between;gap:16px;width:min(1240px,100% - 32px);margin:0 auto;padding:8px 0;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase}
@media (max-width:760px){.annc li:nth-child(n+2){display:none}.annc ul{justify-content:center}}
.pv{background:#3A3236}

/* the menu: a dark pill floating over the page */
.nav{height:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
.nav .wrap{position:relative;top:12px;height:56px;width:min(1000px,100% - 24px);padding:0 8px 0 18px;gap:18px;border-radius:9px;
  background:rgba(31,27,33,.62);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 18px 40px -24px rgba(20,16,22,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.nav.scrolled .wrap{background:rgba(31,27,33,.8)}
.brand .w{color:#fff;font-size:19px}
.brand .s{color:rgba(255,255,255,.6);font-family:var(--f-mono);font-size:9px;letter-spacing:.13em;margin-top:3px}
.nav-links a{color:rgba(255,255,255,.82);font-size:13.5px}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff}
.nav .wrap>.btn{background:#fff;color:var(--ink);border-color:#fff}
.nav .wrap>.btn:hover{background:var(--blush);border-color:var(--blush);color:var(--ink)}
.mnav summary{color:#fff;border-color:rgba(255,255,255,.35);border-radius:7px;min-height:38px}
.mnav nav{border-radius:var(--r-md)}
@media (max-width:980px){.nav .wrap{height:52px}.brand .w{font-size:18px}}

/* ── the opening scene: goodlifemeds' centred headline in heaven, cupid (as he is) flying up through the clouds
   behind it, her services clip in their floating product card ── */
.journey .stage{display:grid;place-items:center;text-align:center;padding:clamp(100px,13vh,140px) var(--edge) clamp(180px,24vh,240px)}
.journey .hero-txt{max-width:min(980px,100%);margin:0 auto;display:flex;flex-direction:column;align-items:center}
.journey .hero-txt::before{inset:-14% -10%;background:radial-gradient(closest-side,rgba(248,244,236,.62),rgba(248,244,236,0))}
.hero.journey h1{font-size:clamp(2.9rem,6.2vw,6.4rem);line-height:.93;letter-spacing:-.056em;max-width:13em}
.hero.journey h1 .g{display:block;font-size:1.04em;margin-top:.03em}
.journey .tagline{margin-top:16px}
.journey .gline{margin:0 0 16px}
.journey .cta{justify-content:center}
.cupid{right:max(1vw,calc((100vw - 1240px)/2 - 70px))}
.hero-card{position:absolute;z-index:4;left:var(--edge);bottom:clamp(18px,4vh,36px);display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;
  width:min(370px,calc(100% - 2 * var(--edge)));padding:9px;text-align:left;background:rgba(255,255,255,.94);border-radius:10px;
  box-shadow:0 24px 50px -28px rgba(34,30,33,.5)}
.hc-media{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--bg3)}
.hc-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-txt .kick{font-size:10px}
.hc-t{font-size:1.02rem;line-height:1.25;letter-spacing:-.02em;margin-top:6px}
.hc-acts{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.hc-acts .pc-more{font-size:13px}
.scroll-cue{left:auto;right:var(--edge);translate:none}
@media (max-width:900px){
  .journey .stage{display:block;padding:72px 0 30px}
  .j-sky{position:relative;inset:auto;height:auto}
  .cupid{position:relative;display:block;right:auto;top:auto;bottom:auto;height:min(42svh,360px);margin:0 auto}
  .journey .hero-txt{padding:0 20px}
  .hero-card{position:relative;left:auto;bottom:auto;margin:26px auto 0;width:calc(100% - 40px)}
}
@media (prefers-reduced-motion:no-preference) and (min-width:901px){
  .js .hero-card{opacity:clamp(0,calc(1 - var(--p,0) * 3),1);translate:0 calc(var(--p,0) * 8vh)}
}

/* framed photos and clips: crisp, small corners, no cloud round them */
.gilt,.hv .gilt{border:0;padding:0;background:none;border-radius:var(--r-lg);box-shadow:0 34px 60px -38px rgba(34,30,33,.45)}
.gilt::before{display:none}
.gilt .in{border-radius:inherit;overflow:hidden}
.pedi-photo::after,.phero-photo::after{content:none}
.st-window .gilt .in{aspect-ratio:3/4;background:var(--bg3);position:relative}
.st-window video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-window .vid-btn{top:auto;bottom:14px;right:14px}

/* page headers: a soft heaven of baby blue melting into the paper; no drifting clouds (only cupid gets clouds) */
.phero{padding-top:calc(clamp(34px,5vw,64px) + 70px);background:linear-gradient(180deg,#DCE7F3 0%,#EAEDEF 42%,var(--bg) 100%)}
.phero::before,.phero::after{content:none}

/* panels: paper, small corners */
.sec.alt,.pedi,.visit{background:var(--bg2)}
.pedi:not(.plain),.sec.alt,.visit{border-radius:var(--r-xl);margin-inline:clamp(6px,1vw,14px)}
.sec:has(> .wrap > .tiles){background:linear-gradient(180deg,#E3ECF6,var(--bg2));border-radius:var(--r-xl)}
.sec:has(> .wrap > .tiles)::before{content:none}
.sec:has(.rvws){background:var(--bg2)}

/* cards, tiles, reviews, reels, galleries: crisp, hairlines */
.card a{border-radius:var(--r-lg);padding:9px 9px 20px;border-color:var(--line)}
.card img,.card .noimg{border-radius:7px}
.card h3{font-size:1.4rem;letter-spacing:-.035em}
.card .from{font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink)}
.tiles a{border-radius:var(--r-md);background:rgba(255,255,255,.8)}
.tiles b{font-family:var(--f-hero);font-weight:400;letter-spacing:-.03em}
.tiles i{font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.rvw{border-radius:var(--r-lg);animation:none}
.rvw blockquote p{font-family:var(--f-accent);font-style:italic}
.reel-media{border:0;border-radius:var(--r-md);box-shadow:0 26px 50px -32px rgba(34,30,33,.45)}
.reel figcaption{font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.gal figure img{border:0;border-radius:var(--r-md)}
.steps li:nth-child(n){border-radius:var(--r-md)}

/* ── goodlifemeds' "bringing quality care home": heading, then four hairline columns ── */
.features{padding:clamp(70px,9vw,130px) 0}
.ft-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.ft-head h2{font-size:clamp(2.1rem,3.8vw,3.4rem);max-width:11em}
.ft-head h2 em{display:block}
.ft-head p{color:var(--mute);max-width:32em;justify-self:end}
.ft-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.ft-list li{border-top:1px solid var(--line-strong);padding-top:18px}
.ico{width:22px;height:22px;fill:none;stroke:var(--accent-ink);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.ft-list h3{font-size:1.28rem;letter-spacing:-.03em;margin:44px 0 8px}
.ft-list p{font-size:.95rem;color:var(--mute);line-height:1.5}

/* ── goodlifemeds' category panel: a big picture, a huge title, a row of treatment cards; then two columns ── */
.cat{padding:clamp(8px,1.2vw,16px) clamp(6px,1vw,14px) clamp(64px,8vw,120px);position:relative}
.cat-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);min-height:min(94svh,880px);display:flex;flex-direction:column;justify-content:space-between;gap:36px;
  padding:clamp(26px,3.6vw,52px) clamp(16px,2.6vw,40px) clamp(16px,2.4vw,30px);
  background:linear-gradient(180deg,rgba(248,244,236,0) 52%,rgba(34,30,33,.18) 100%),var(--cat-bg) 62% 50%/cover no-repeat,var(--bg3)}
.cat-title{font-size:clamp(3.2rem,9.6vw,9.4rem);line-height:.9;letter-spacing:-.062em;max-width:8.5em;color:var(--ink)}
.cat-top{display:grid;gap:26px;justify-items:start}
.cat-lead{max-width:22em}
.cat-lead .kick{color:var(--ink)}
.cat-lead .kick::before{display:none}
.cat-lead p:last-child{margin-top:8px;font-size:1.04rem;line-height:1.45;color:var(--ink)}
.has-cupid .cat-panel::after{content:"";position:absolute;z-index:-1;right:clamp(10px,7vw,120px);top:clamp(30px,8%,90px);width:min(26vw,330px);aspect-ratio:923/1100;pointer-events:none;
  background:var(--cat-cupid) 0 0/contain no-repeat;filter:drop-shadow(0 26px 30px rgba(60,80,120,.3))}
.pc-row{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pc{display:flex;flex-direction:column;padding:12px;border-radius:9px;background:rgba(255,255,255,.95);box-shadow:0 20px 40px -30px rgba(34,30,33,.5)}
.pc-top h3{font-size:1.14rem;line-height:1.2;letter-spacing:-.025em}
.pc-sub{margin-top:5px;font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink)}
.pc-img{margin:12px 0;aspect-ratio:4/3.3;border-radius:6px;overflow:hidden;background:var(--bg2)}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:scale .8s var(--ease)}
.pc:hover .pc-img img{scale:1.04}
.pc-price{font-size:1.02rem;letter-spacing:-.02em;margin-top:auto}
.pc-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.pc-acts .btn{justify-content:center}
.pc-acts .pc-more{justify-content:center;min-height:36px;border:1px solid var(--line-strong);border-radius:var(--r-btn);font-size:13px}
.cat-more{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,80px);align-items:start;padding-top:clamp(40px,5vw,76px)}
.cat-h{font-family:var(--f-hero);font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:.98;letter-spacing:-.052em}
.cat-h em{display:block;font-family:var(--f-accent);font-style:italic;letter-spacing:-.02em;color:var(--accent-ink)}
.cat-side p{color:var(--mute);max-width:30em}
@media (max-width:900px){
  .cat-panel{min-height:0;gap:26px}
  .has-cupid .cat-panel::after{width:34vw;top:18px;right:10px}
  .pc-row{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:74%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-6px;padding:0 6px 6px}
  .pc{scroll-snap-align:start}
  .cat-more,.ft-head{grid-template-columns:1fr}
  .ft-head p{justify-self:start}
  .ft-list{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){.ft-list{grid-template-columns:1fr}.ft-list h3{margin-top:22px}}

/* ── goodlifemeds' "trusted by thousands": a scattered wall of her clips round the heading, three reviews ── */
.loved{padding:clamp(70px,9vw,140px) 0;overflow:clip}
.lv-stage{position:relative;min-height:clamp(540px,60vw,760px);display:grid;place-items:center}
.lv-wall{list-style:none;position:absolute;inset:0}
.lv{position:absolute}
.lv-m{position:relative;aspect-ratio:9/13;border-radius:8px;overflow:hidden;background:var(--bg3);box-shadow:0 26px 50px -32px rgba(34,30,33,.5)}
.lv-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lv-0{left:0;top:16%;width:11%}
.lv-1{left:12.5%;top:2%;width:17%}
.lv-2{left:24%;bottom:0;width:12%}
.lv-3{right:25%;bottom:3%;width:12%}
.lv-4{right:10.5%;top:0;width:15%}
.lv-5{right:0;top:42%;width:11.5%}
.lv-head{position:relative;z-index:1;max-width:min(520px,40%);text-align:center}
.lv-head h2 em{display:block}
.lv-g{margin-top:18px;font-size:14px}
.lv-g a{color:var(--ink);text-underline-offset:4px}
.lv-quotes{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,40px);margin-top:clamp(40px,5vw,72px)}
.lv-quotes li{border-top:1px solid var(--line-strong);padding-top:18px}
.lv-quotes blockquote p{font-family:var(--f-accent);font-style:italic;font-size:1.3rem;line-height:1.32;margin-top:10px}
.lv-quotes cite{display:block;margin-top:14px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-style:normal;color:var(--mute)}
.lv-more{margin-top:10px}
@media (max-width:900px){
  .lv-stage{display:block;min-height:0}
  .lv-wall{position:static;display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin:0 -2px 26px}
  .lv{position:static;flex:0 0 38%;width:auto}
  .lv-head{max-width:none}
  .lv-quotes{grid-template-columns:1fr}
}

/* ── goodlifemeds' "how it works": heaven at dusk, a huge title, three numbered glass steps stepping down ── */
.how{padding:0 clamp(6px,1vw,14px) clamp(64px,8vw,120px)}
.how-panel{position:relative;overflow:hidden;border-radius:var(--r-xl);min-height:min(100svh,920px);padding:clamp(28px,3.8vw,56px) clamp(16px,2.6vw,40px);color:#fff;
  background:linear-gradient(180deg,rgba(31,27,33,.12),rgba(31,27,33,.5)),var(--how-bg) 50% 50%/cover no-repeat,#4A5878}
.how-title{font-size:clamp(3.2rem,9.6vw,9.4rem);line-height:.9;letter-spacing:-.062em;color:#fff}
.how-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:clamp(40px,7vh,90px);align-items:start}
.how-steps li{position:relative;padding:18px 20px 24px;border-radius:9px;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.how-steps .hw-1{margin-top:clamp(40px,7vh,90px)}
.how-steps .hw-2{margin-top:clamp(80px,14vh,180px)}
.how-steps li:not(:last-child)::after{content:"";position:absolute;left:100%;top:56%;width:22px;border-top:1px dashed rgba(255,255,255,.65)}
.hw-n{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em}
.how-steps h3{font-size:1.5rem;letter-spacing:-.03em;margin:30px 0 10px;color:#fff}
.how-steps p{color:rgba(255,255,255,.88);font-size:.96rem;line-height:1.5}
@media (max-width:900px){.how-steps{grid-template-columns:1fr}.how-steps .hw-1,.how-steps .hw-2{margin-top:0}.how-steps li::after{display:none}.how-panel{min-height:0}}

/* FAQ: goodlifemeds' two columns, heading and our cupid on the left, hairline questions with a chevron on the right */
.sec:has(> .wrap > .faq) > .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,90px);align-items:start}
.sec:has(> .wrap > .faq) .head-c{text-align:left;margin:0;position:sticky;top:110px}
.sec:has(> .wrap > .faq) .head-c h2 em{display:block}
.sec:has(> .wrap > .faq) .head-c::after{content:"";display:block;width:min(200px,50%);aspect-ratio:938/1300;margin-top:36px;
  background:url("/assets/cupid-float.webp") 0 0/contain no-repeat;filter:drop-shadow(0 22px 26px rgba(60,80,120,.25))}
.faq details,.faq details:first-child,.faq details[open]{background:none;box-shadow:none;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;margin:0;padding:0}
.faq details:first-child{border-top:1px solid var(--line-strong)}
.faq summary{font-family:var(--f-body);font-size:1.02rem;font-weight:500;padding:20px 40px 20px 0}
.faq summary::after,.faq details[open] summary::after{content:"";width:8px;height:8px;border:0;border-right:1.4px solid var(--ink);border-bottom:1.4px solid var(--ink);border-radius:0;
  background:none;color:inherit;top:calc(50% - 6px);right:6px;transform:none;rotate:45deg}
.faq details[open] summary::after{rotate:225deg;top:calc(50% - 2px)}
.faq .a{padding:0 40px 22px 0;color:var(--mute)}
@media (max-width:900px){.sec:has(> .wrap > .faq) > .wrap{grid-template-columns:1fr}.sec:has(> .wrap > .faq) .head-c{position:static}.sec:has(> .wrap > .faq) .head-c::after{display:none}}

/* closing band: cupid takes aim from a sea of clouds (clouds stay with cupid), goodlifemeds' big quiet type */
.cta-band{border-radius:var(--r-xl);margin:0 clamp(6px,1vw,14px) 10px}
.cta-band .cta-h{font-family:var(--f-accent);font-style:italic;font-weight:400;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.cta-band .rays{display:none}

/* ── goodlifemeds' footer: one dark panel, the line in big type, columns under mono labels, a card that books ── */
footer.gf{background:none;padding:0 clamp(6px,1vw,14px) clamp(6px,1vw,14px);margin:0;isolation:auto;overflow:visible}
footer.gf::before{content:none}
footer.gf>.wrap{width:auto;max-width:none;margin:0;background:var(--night);color:#F3ECE4;border-radius:var(--r-xl);padding:clamp(26px,3.6vw,52px) clamp(18px,3.6vw,52px) 26px}
.gf-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.gf-social{display:flex;gap:8px}
.gf-social a{color:#F3ECE4;text-decoration:none;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 12px}
.gf-h{font-family:var(--f-hero);font-size:clamp(2.3rem,5.2vw,5rem);line-height:.98;letter-spacing:-.052em;text-align:center;max-width:13em;margin:clamp(56px,9vw,120px) auto}
.gf-h em{display:block;font-family:var(--f-accent);font-style:italic;letter-spacing:-.02em;color:#EBC9C6}
.gf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 1.5fr;gap:28px;border-top:1px solid rgba(255,255,255,.14);padding-top:28px}
.gf-l{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,236,228,.55);margin-bottom:14px;display:block}
.gf-col nav{display:grid;gap:8px}
.gf-col a{color:#F3ECE4;text-decoration:none;font-size:14px}
.gf-col a:hover{color:#EBC9C6}
.gf-col p{font-size:14px;line-height:1.55}
.gf-cta{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:210px;padding:16px;border-radius:9px;text-decoration:none;color:#fff;
  background:url("/assets/cupid-aim.webp") right 10px bottom 8px/auto 62% no-repeat,linear-gradient(160deg,#9DBDE0 0%,#C7A6B8 100%)}
.gf-cta .gf-l{color:rgba(255,255,255,.85)}
.gf-marq{display:flex;width:max-content;font-family:var(--f-hero);font-size:clamp(2rem,3.4vw,3.2rem);letter-spacing:-.045em;white-space:nowrap}
.gf-marq>span{display:flex}
.gf-marq>span>span{margin-right:.5em}
.gf .foot-small{color:rgba(243,236,228,.5);margin-top:34px;font-size:12px}
.gf .motion-toggle{color:rgba(243,236,228,.7);border-color:rgba(255,255,255,.25);background:none}
@media (prefers-reduced-motion:no-preference){.gf-marq{animation:hb-ribbon 22s linear infinite}}
.motion-off .gf-marq{animation-play-state:paused}
@media (max-width:900px){.gf-grid{grid-template-columns:1fr 1fr}.gf-cta{grid-column:1 / -1}}
/* sunlight in the hero: uneven beams from the sun's core (sun-rays.webp, tools/make_heaven_fx.py), turning very slowly */
.journey .rays{inset:auto;left:calc(28% - 75vmax);top:calc(-14% - 75vmax);width:150vmax;height:150vmax;opacity:.8;filter:none;
  background:url("/assets/sun-rays.webp") 50% 50%/100% 100% no-repeat;-webkit-mask-image:none;mask-image:none}
@media (prefers-reduced-motion:no-preference){.journey .rays{animation:hb-breathe 9s ease-in-out infinite,hb-spin 260s linear infinite}}
/* round 4 fixes: the hero card clear of the bottom edge; the little arrow-cupid off (the laser panel has cupid now);
   cupid in the laser panel below the title */
.hero-card{bottom:clamp(64px,10vh,110px)}
.arrow-cupid,.js .arrow-fly{display:none}
@media (min-width:901px){.has-cupid .cat-panel::after{top:auto;bottom:clamp(250px,36%,330px);right:clamp(20px,5vw,90px);width:min(22vw,290px)}}
@media (max-width:900px){.lv-stage{display:block}.lv-wall{width:100%;display:flex}.lv{flex:0 0 38vw;width:38vw}}
.motion-off .journey .rays{animation-play-state:paused}

/* ═══════ Round 5, 2026-10-14 night: "I want transitions between sections animated and maybe some sections should blend
   into each other better". The script gives each panel --en (0 to 1 as it comes in) and --th (0 to 1 through the
   screen). Picture panels open up as they arrive and their pictures drift inside them; huge titles rise; cards, steps
   and reviews come in one after another; cupid flies into place; the clip wall drifts at different speeds. Boxed
   panels became soft bands, and the dusk sky and the closing clouds melt into the page above and below. Reduced
   motion or no script: everything sits still in its final place. ═══════ */

/* the picture moves to a layer of its own, a little taller than the panel, so it can drift */
.cat-panel{background:var(--bg3)}
.cat-panel::before{content:"";position:absolute;z-index:-2;left:0;right:0;top:-9%;bottom:-9%;pointer-events:none;
  background:linear-gradient(180deg,rgba(248,244,236,0) 52%,rgba(34,30,33,.18) 100%),var(--cat-bg) 62% 50%/cover no-repeat}

/* ── blending: bands instead of boxes ── */
.sec.alt,.pedi:not(.plain),.visit,.sec:has(.rvws){border-radius:0;margin-inline:0;margin-block:0;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 22%,var(--bg2) 78%,var(--bg) 100%)}
.sec:has(> .wrap > .tiles){border-radius:0;margin-inline:0;margin-block:0;
  background:linear-gradient(180deg,var(--bg) 0%,#E5EDF6 24%,#E9EDF1 76%,var(--bg) 100%)}
/* the studio flows straight out of the hero's clouds: no box, a breath of sky and blush */
.hero.journey + .pedi{background:radial-gradient(55% 70% at 16% 42%,rgba(157,189,224,.3),rgba(157,189,224,0) 70%),
  radial-gradient(45% 60% at 86% 62%,rgba(235,211,207,.4),rgba(235,211,207,0) 70%),var(--bg)}
/* heaven at dusk: full width, rising out of the cream and sinking back into it */
.how{padding:0 0 clamp(30px,5vw,80px)}
.how-panel{isolation:isolate;border-radius:0;background:var(--night);padding-top:clamp(130px,20vh,220px);padding-bottom:clamp(140px,22vh,240px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.how-panel::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-8%;bottom:-8%;pointer-events:none;
  background:linear-gradient(180deg,rgba(31,27,33,.1),rgba(31,27,33,.45)),var(--how-bg) 50% 50%/cover no-repeat}
.how-title,.how-steps{max-width:1240px;margin-inline:auto}
/* the closing sea of clouds: fades in from the page and out again before the footer */
.cta-band{border-radius:0;margin:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 82%,transparent 100%)}
.cta-band.solo .cta-txt{padding:clamp(120px,15vw,180px) 22px}
@media (min-width:1100px){.cta-band::after{bottom:16%}}
@media (max-width:1099px){.cta-band::after{top:70px}.cta-band.solo .cta-txt{padding-top:200px}}

/* ── transitions ── */
@media (prefers-reduced-motion:no-preference){
  /* picture panels open up from a smaller, rounder window as they arrive; the picture drifts and settles */
  .js .cat-panel{clip-path:inset(calc((1 - var(--en,1)) * 8%) calc((1 - var(--en,1)) * 7%) round calc(14px + (1 - var(--en,1)) * 40px))}
  .js .cat-panel::before,.js .how-panel::before{translate:0 calc((var(--th,.5) - .5) * -14%);scale:calc(1.14 - var(--en,1) * .14)}
  .js .cat-title,.js .how-title{translate:0 calc((1 - var(--en,1)) * 80px);opacity:calc(.1 + var(--en,1) * .9)}
  .js .cat-lead{translate:0 calc((1 - var(--en,1)) * 50px);opacity:var(--en,1)}
  /* cupid flies into his panel, and into the closing band */
  .js .has-cupid .cat-panel::after{translate:calc((1 - var(--en,1)) * 180px) calc((1 - var(--en,1)) * 120px);opacity:var(--en,1)}
  .js .cta-band::after{translate:calc((1 - var(--en,1)) * -160px) calc(var(--py,0) * -40px)}
  /* the studio picture slides in beside the words */
  .js .pedi-photo{translate:calc((1 - var(--en,1)) * -60px) 0;opacity:calc(.2 + var(--en,1) * .8)}
  /* the footer panel rises and grows into place */
  .js footer.gf>.wrap{transform-origin:50% 0;scale:calc(.95 + var(--en,1) * .05);translate:0 calc((1 - var(--en,1)) * 40px)}
  /* (cards, features, reviews and steps: round 6 below, one by one) */
}
@media (prefers-reduced-motion:no-preference) and (min-width:901px){
  /* the clip wall drifts, each clip at its own speed */
  .js .lv-0{translate:0 calc((var(--th,.5) - .5) * -160px)}
  .js .lv-1{translate:0 calc((var(--th,.5) - .5) * 110px)}
  .js .lv-2{translate:0 calc((var(--th,.5) - .5) * -90px)}
  .js .lv-3{translate:0 calc((var(--th,.5) - .5) * 140px)}
  .js .lv-4{translate:0 calc((var(--th,.5) - .5) * -120px)}
  .js .lv-5{translate:0 calc((var(--th,.5) - .5) * 80px)}
  .js .lv-head{translate:0 calc((var(--th,.5) - .5) * -30px)}
}
/* the hero hands over to the studio without a blank screen: a shorter journey, and the light never quite whites it out */
@media (prefers-reduced-motion:no-preference) and (min-width:901px){
  .js .hero.journey{height:155vh}
  .js .journey .stage::after{opacity:clamp(0,calc((var(--p,0) - .5) * 1.4),.62)}
}
/* no line between the hero and the studio: the bottom of the sky melts into the cream */
.j-sky::after{content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:24%;pointer-events:none;background:linear-gradient(180deg,rgba(248,244,236,0),var(--bg) 92%)}
@media (max-width:900px){
  .j-sky::after{display:none}
  .journey .stage::before{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:140px;pointer-events:none;background:linear-gradient(180deg,rgba(248,244,236,0),var(--bg))}
}

/* ═══════ Round 6, 2026-10-14 night: "in part everything in one studio this things have to appear one by one and be
   clicakble, same with how it works". Each feature and each step is now a link card; cards, features, reviews and
   steps arrive one at a time (look-sky.js queues them); on wide screens "How it works" holds still while you scroll
   and the steps appear in turn. Reduced motion or no script: all of them simply there. ═══════ */
.ft-list li{border-top:0;padding-top:0}
.ft-a{display:block;height:100%;padding:20px 16px 22px;border-top:1px solid var(--line-strong);border-radius:0 0 10px 10px;color:inherit;text-decoration:none;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),translate .35s var(--ease),border-color .35s}
.ft-a:hover,.ft-a:focus-visible{background:#fff;box-shadow:0 26px 50px -34px rgba(34,30,33,.45);border-top-color:var(--accent-ink);translate:0 -4px}
.ft-list h3{margin-top:40px}
.ft-a .go,.hw-a .go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.ft-a .go::after,.hw-a .go::after{content:"\2192";font-family:var(--f-body);font-size:14px;letter-spacing:0;transition:translate .35s var(--ease)}
.ft-a:hover .go::after,.ft-a:focus-visible .go::after,.hw-a:hover .go::after,.hw-a:focus-visible .go::after{translate:5px 0}
.how-steps li{padding:0;transition:border-color .35s,background .35s,transform .35s var(--ease)}
.how-steps li:hover,.how-steps li:focus-within{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.22);transform:translateY(-4px)}
.hw-a{display:block;padding:18px 20px 24px;color:#fff;text-decoration:none;border-radius:inherit}
.hw-n{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em}
.hw-a .go{color:#F3D6D2}
@media (prefers-reduced-motion:no-preference){
  .seq :is(.ft-list,.pc-row,.lv-quotes,.how-steps)>li{opacity:0;translate:0 44px;scale:.96;
    transition:opacity .75s var(--ease),translate .75s var(--ease),scale .75s var(--ease),transform .35s var(--ease),border-color .35s,background .35s}
  .seq :is(.ft-list,.pc-row,.lv-quotes,.how-steps)>li.on{opacity:1;translate:0 0;scale:1}
}
@media (prefers-reduced-motion:no-preference) and (min-width:901px){
  .js .how.pin{height:270vh;padding:0}
  .js .how.pin .how-panel{position:sticky;top:0;height:100svh;min-height:0;padding-top:clamp(96px,14vh,150px);padding-bottom:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
  .js .how.pin .how-steps>li{opacity:0;translate:0 70px;scale:.96;transition:opacity .8s var(--ease),translate .8s var(--ease),scale .8s var(--ease),transform .35s var(--ease),border-color .35s,background .35s}
  .js .how.pin .how-steps>li.on{opacity:1;translate:0 0;scale:1}
  .js .how.pin .how-steps li::after{scale:0 1;transform-origin:0 50%;transition:scale .6s var(--ease) .35s}
  .js .how.pin .how-steps li.on::after{scale:1 1}
}

/* ═══════ Round 8, 2026-10-14 late: "on laser treatmnets page we need some cool heavenly animation for laser by the
   area part". A sunlit sky behind the areas, light turning slowly and motes rising; cupid (as he is) glides in and
   looses an arrow of light across them, and each area lights up as it passes, rising out of a bloom of light; hovering
   an area sends a laser-bright sweep across it under a halo. Phones: the areas take their turn as they come into view.
   Reduced motion or no script: everything still and in place. (Not J Beauty's body map.) ═══════ */
.areas{position:relative;isolation:isolate;overflow:clip;padding:clamp(90px,11vw,160px) 0;background:var(--bg)}
.areas .ar-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("/assets/sky-rays.webp") 24% 26%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%)}
.areas .ar-sky::before{content:"";position:absolute;left:calc(20% - 60vmax);top:calc(-12% - 60vmax);width:120vmax;height:120vmax;opacity:.75;
  background:url("/assets/sun-rays.webp") 50% 50%/100% 100% no-repeat}
.areas .ar-sky::after{content:"";position:absolute;left:0;bottom:6%;width:calc(100% + 1100px);height:220px;opacity:.85;
  background:url("/assets/clouds-bank.webp") 0 100%/1100px auto repeat-x}
.areas .head-c{position:relative}
.ar-flight{position:relative;height:clamp(76px,8.6vw,118px);margin:clamp(14px,2vw,26px) 0 8px}
.ar-cupid{position:absolute;left:0;bottom:0;height:100%;width:auto;filter:drop-shadow(0 16px 18px rgba(60,80,120,.3))}
.ar-arrow{position:absolute;left:clamp(66px,7.4vw,100px);right:0;top:48%;height:2px;border-radius:2px;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(255,236,190,0),#EED29A 30%,#FFF7E6 100%);box-shadow:0 0 12px 2px rgba(255,236,190,.75)}
.ar-arrow::after{content:"";position:absolute;right:-5px;top:50%;width:11px;height:11px;translate:0 -50%;border-radius:50%;background:#fff;
  box-shadow:0 0 14px 6px rgba(255,242,210,.95),0 0 40px 12px rgba(255,236,190,.5)}
.areas .tiles>li{position:relative;isolation:isolate}
.areas .tiles a{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
.areas .tiles a:hover,.areas .tiles a:focus-visible{background:rgba(255,255,255,.95);box-shadow:0 0 0 1px #fff,0 0 44px 6px rgba(255,244,214,.8),0 30px 50px -30px rgba(34,30,33,.4)}
.areas .tiles a::after{background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,248,226,.95) 45%,rgba(238,210,154,.6) 52%,rgba(255,255,255,0));width:38%}
@media (prefers-reduced-motion:no-preference){
  .areas .ar-sky::before{animation:hb-spin 220s linear infinite}
  .areas .ar-sky::after{animation:hb-drift-bank 200s linear infinite}
  .js .areas .ar-cupid{opacity:0;translate:-70px 24px}
  .js .areas.go .ar-cupid{animation:ar-cupid-in 1s var(--ease) forwards}
  .js .areas .ar-arrow{scale:0 1;opacity:0}
  .js .areas.go .ar-arrow{animation:ar-shoot 1.1s cubic-bezier(.3,.6,.2,1) .75s forwards}
  .js .areas.go .ar-cupid,.js .areas.go .ar-arrow{animation-play-state:running}
}
@media (prefers-reduced-motion:no-preference) and (min-width:761px){
  .js .areas .tiles>li{opacity:0;translate:0 42px;filter:blur(6px)}
  .js .areas.go .tiles>li{animation:ar-light 1s var(--ease) forwards;animation-delay:calc(1s + var(--i,0) * .2s)}
  .js .areas.go .tiles>li::before{content:"";position:absolute;inset:-22%;z-index:-1;border-radius:50%;pointer-events:none;opacity:0;
    background:radial-gradient(closest-side,rgba(255,250,235,.95),rgba(255,244,214,.5) 50%,rgba(255,250,235,0));
    animation:ar-bloom 1.4s ease-out forwards;animation-delay:calc(1s + var(--i,0) * .2s)}
}
@media (prefers-reduced-motion:no-preference) and (max-width:760px){
  .seq .areas .tiles>li{opacity:0;translate:0 40px;transition:opacity .75s var(--ease),translate .75s var(--ease)}
  .seq .areas .tiles>li.on{opacity:1;translate:0 0}
}
@keyframes ar-cupid-in{to{opacity:1;translate:0 0}}
@keyframes ar-shoot{0%{scale:0 1;opacity:1}75%{scale:1 1;opacity:1}100%{scale:1 1;opacity:.45}}
@keyframes ar-light{0%{opacity:0;translate:0 42px;filter:blur(6px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;translate:0 0;filter:none}}
@keyframes ar-bloom{0%{opacity:0;scale:.5}30%{opacity:1}100%{opacity:0;scale:1.35}}
.motion-off .areas .ar-sky::before,.motion-off .areas .ar-sky::after{animation-play-state:paused}

/* ═══════ Round 9, 2026-10-14 late: "Laser by the area" as goodlifemeds' "Medical support, on your terms" ("we can use
   statue of venera to pinpoint different laser areas"). Words and a list of areas on one side; a marble Venus in heaven
   on the other, a glowing pin on each area with a glass label; cupid (as he is, her son) floats beside her. As the
   section arrives she rises into view and the pins light one by one, their labels sliding out on a hairline; pointing
   at an area in the list lights it on her, and the other way round. Every pin and row is a link. ═══════ */
.areamap{position:relative;isolation:isolate;overflow:clip;padding:clamp(90px,11vw,170px) 0;background:var(--bg)}
.am-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("/assets/sky-rays.webp") 70% 20%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%)}
.am-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,244,236,.9) 0%,rgba(248,244,236,.6) 38%,rgba(248,244,236,0) 62%)}
.am-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,80px);align-items:center}
.am-txt h2 em{display:block}
.am-lead{color:var(--mute);max-width:30em;margin-top:16px}
.am-list{list-style:none;margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line-strong)}
.am-list a{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:baseline;padding:14px 14px 15px;border-bottom:1px solid var(--line-strong);
  color:inherit;text-decoration:none;position:relative;transition:background .3s,padding .3s var(--ease)}
.am-list a::after{content:"\2192";grid-column:2;grid-row:1 / span 3;align-self:center;font-size:16px;color:var(--accent-ink);opacity:.5;transition:translate .3s var(--ease),opacity .3s}
.am-list b{font-family:var(--f-hero);font-weight:400;font-size:1.22rem;letter-spacing:-.025em}
.am-list span{grid-column:1;font-size:.92rem;color:var(--mute)}
.am-list i{grid-column:1;font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink);margin-top:4px}
.am-list a:hover,.am-list a:focus-visible,.am-list a.hl{background:rgba(255,255,255,.75);padding-left:22px}
.am-list a:hover::after,.am-list a:focus-visible::after,.am-list a.hl::after{translate:4px 0;opacity:1}
.am-list a::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;background:var(--accent-ink);scale:1 0;transition:scale .3s var(--ease)}
.am-list a:hover::before,.am-list a:focus-visible::before,.am-list a.hl::before{scale:1 1}
.am-stage{position:relative;margin:0}
.am-fig{position:relative;aspect-ratio:3/4;max-height:min(86svh,820px);margin-inline:auto}
.am-venus{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r-xl);
  -webkit-mask-image:radial-gradient(120% 95% at 50% 45%,#000 62%,transparent 100%);mask-image:radial-gradient(120% 95% at 50% 45%,#000 62%,transparent 100%)}
.am-cupid{position:absolute;right:-4%;top:6%;width:22%;height:auto;pointer-events:none;filter:drop-shadow(0 18px 20px rgba(60,80,120,.3))}
.am-pin{position:absolute;left:var(--x);top:var(--y);z-index:2;width:0;height:0;text-decoration:none;color:var(--ink)}
.am-dot{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.6),0 0 0 5px rgba(176,141,87,.45),0 0 18px 6px rgba(255,244,214,.85);transition:scale .3s var(--ease),box-shadow .3s}
.am-dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(255,255,255,.9);opacity:0}
.am-chip{position:absolute;top:-19px;display:flex;flex-direction:column;gap:2px;white-space:nowrap;padding:8px 12px;border-radius:9px;
  background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 18px 36px -22px rgba(34,30,33,.5);transition:background .3s,box-shadow .3s,translate .3s var(--ease)}
.am-chip::before{content:"";position:absolute;top:19px;width:34px;height:1px;background:rgba(255,255,255,.95);box-shadow:0 0 6px rgba(255,255,255,.9)}
.pin-r .am-chip{left:44px}.pin-r .am-chip::before{right:100%}
.pin-l .am-chip{right:44px}.pin-l .am-chip::before{left:100%}
.am-chip b{font-family:var(--f-hero);font-weight:500;font-size:.95rem;letter-spacing:-.02em}
.am-chip i{font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink)}
.am-pin:hover .am-dot,.am-pin:focus-visible .am-dot,.am-pin.hl .am-dot{scale:1.35;box-shadow:0 0 0 2px #fff,0 0 0 6px rgba(162,63,69,.45),0 0 26px 10px rgba(255,244,214,.95)}
.am-pin:hover .am-chip,.am-pin:focus-visible .am-chip,.am-pin.hl .am-chip{background:#fff;box-shadow:0 0 0 1px #fff,0 0 30px 4px rgba(255,244,214,.8),0 22px 40px -22px rgba(34,30,33,.5)}
.pin-r:hover .am-chip,.pin-r.hl .am-chip{translate:4px 0}.pin-l:hover .am-chip,.pin-l.hl .am-chip{translate:-4px 0}
@media (max-width:900px){
  .am-grid{grid-template-columns:1fr}
  .am-stage{order:-1}
  .am-fig{max-height:none;width:min(100%,460px)}
  .am-chip{padding:6px 9px}.am-chip b{font-size:.85rem}
  .pin-r .am-chip{left:30px}.pin-l .am-chip{right:30px}.am-chip::before{width:20px}
  .am-sky::after{background:linear-gradient(180deg,rgba(248,244,236,0) 30%,rgba(248,244,236,.85) 60%)}
}
@media (prefers-reduced-motion:no-preference){
  .am-dot::after{animation:am-ping 2.8s ease-out infinite;animation-delay:calc(var(--i,0) * .5s)}
  .am-cupid{animation:hb-bob-t 6s ease-in-out infinite}
  /* (entrance: per statue, round 10 below) */
}
@keyframes am-ping{0%{opacity:.9;scale:.6}70%{opacity:0;scale:1.8}100%{opacity:0;scale:1.8}}
.motion-off .am-dot::after,.motion-off .am-cupid{animation-play-state:paused}
.am-cupid{right:auto;left:-7%;top:3%;width:20%}
/* (round 10: cupid no longer floats by Venus; he is over the most-booked list instead) */
.am-cupid{display:none}

/* ═══════ Round 10, 2026-10-14 late: "remove cupid near venus and make also men variation for men treatments", "you can
   add cupid animation to most booked areas". The area map has a Women / Men switch (two statues, each with its own pins
   and list; switching plays the statue's entrance again); the men's page shows the man on his own. Cupid moved to the
   most-booked list: he glides in, looses an arrow of light across it, and a warm glint runs along each row in turn. ═══════ */
.js .areamap [data-v]:not(.on){display:none}
.am-tabs{display:inline-flex;gap:4px;margin-top:clamp(20px,2.6vw,30px);padding:4px;border-radius:10px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 30px -22px rgba(34,30,33,.45)}
.am-tabs button{appearance:none;border:0;background:none;cursor:pointer;min-height:38px;padding:0 18px;border-radius:7px;font:500 14px/1 var(--f-body);color:var(--mute);transition:background .3s,color .3s}
.am-tabs button:hover{color:var(--ink)}
.am-tabs button[aria-selected="true"]{background:var(--btn-bg);color:#fff}
.am-tabs + .am-list{margin-top:18px}
.am-fig{display:block}
.am-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r-xl);
  -webkit-mask-image:radial-gradient(120% 95% at 50% 45%,#000 62%,transparent 100%);mask-image:radial-gradient(120% 95% at 50% 45%,#000 62%,transparent 100%)}
@media (prefers-reduced-motion:no-preference){
  /* each statue plays its own entrance (on .go), so switching plays it again */
  .js .am-fig .am-img{opacity:0;scale:1.06;filter:blur(6px);transition:opacity 1.1s var(--ease),scale 1.5s var(--ease),filter 1.1s var(--ease)}
  .js .am-fig.go .am-img{opacity:1;scale:1;filter:none}
  .js .areamap .am-fig .am-dot{scale:0;transition:scale .5s cubic-bezier(.3,1.6,.5,1),box-shadow .3s;transition-delay:calc(.8s + var(--i,0) * .34s),0s}
  .js .areamap .am-fig.go .am-dot{scale:1}
  .js .areamap .am-fig.go .am-pin:hover .am-dot,.js .areamap .am-fig.go .am-pin.hl .am-dot{scale:1.35;transition-delay:0s}
  .js .areamap .am-fig .am-chip{opacity:0;transition:opacity .6s var(--ease),translate .6s var(--ease),background .3s,box-shadow .3s;transition-delay:calc(1s + var(--i,0) * .34s)}
  .js .areamap .am-fig .pin-r .am-chip{translate:-14px 0}.js .areamap .am-fig .pin-l .am-chip{translate:14px 0}
  .js .areamap .am-fig.go .am-chip{opacity:1;translate:0 0}
  .js .areamap .am-fig.go .am-pin:hover .am-chip,.js .areamap .am-fig.go .am-pin.hl .am-chip{transition-delay:0s}
  .js .areamap .am-fig.go .pin-r:hover .am-chip,.js .areamap .am-fig.go .pin-r.hl .am-chip{translate:4px 0}
  .js .areamap .am-fig.go .pin-l:hover .am-chip,.js .areamap .am-fig.go .pin-l.hl .am-chip{translate:-4px 0}
  .js .areamap .am-fig .am-chip::before{scale:0 1;transition:scale .5s var(--ease);transition-delay:calc(.9s + var(--i,0) * .34s)}
  .js .areamap .am-fig .pin-r .am-chip::before{transform-origin:100% 50%}.js .areamap .am-fig .pin-l .am-chip::before{transform-origin:0 50%}
  .js .areamap .am-fig.go .am-chip::before{scale:1 1}
  .js .areamap .am-list.on{animation:am-list-in .6s var(--ease)}
}
@keyframes am-list-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}

/* cupid over the most-booked list */
.booked .table-block{position:relative}
.mb-flight{position:relative;height:clamp(64px,7vw,98px);margin:4px 0 10px}
.mb-cupid{position:absolute;left:0;bottom:0;height:100%;width:auto;filter:drop-shadow(0 16px 18px rgba(60,80,120,.3))}
.mb-arrow{position:absolute;left:clamp(56px,6.6vw,90px);right:0;top:48%;height:2px;border-radius:2px;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(255,236,190,0),#EED29A 30%,#FFF7E6 100%);box-shadow:0 0 12px 2px rgba(255,236,190,.75)}
.mb-arrow::after{content:"";position:absolute;right:-5px;top:50%;width:11px;height:11px;translate:0 -50%;border-radius:50%;background:#fff;
  box-shadow:0 0 14px 6px rgba(255,242,210,.95),0 0 40px 12px rgba(255,236,190,.5)}
.booked .lrow{position:relative;isolation:isolate}
.booked .lrow::before{content:"";position:absolute;inset:0 -10px;z-index:-1;border-radius:8px;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,rgba(255,248,226,0) 30%,rgba(255,240,205,.95) 48%,rgba(238,210,154,.55) 54%,rgba(255,248,226,0) 70%) 0 0/260% 100% no-repeat}
@media (prefers-reduced-motion:no-preference){
  .js .booked .mb-cupid{opacity:0;translate:-70px 20px}
  .js .booked.go .mb-cupid{animation:ar-cupid-in 1s var(--ease) forwards}
  .js .booked .mb-arrow{scale:0 1;opacity:0}
  .js .booked.go .mb-arrow{animation:ar-shoot 1.1s cubic-bezier(.3,.6,.2,1) .75s forwards}
  .js .booked.go .lrow::before{animation:mb-glint 1.5s ease-out forwards;animation-delay:calc(1.3s + var(--i,0) * .24s)}
}
@keyframes mb-glint{0%{opacity:0;background-position:110% 0}25%{opacity:1}100%{opacity:0;background-position:-10% 0}}
@media (max-width:600px){.am-chip i{display:none}.am-chip{padding:5px 9px}.am-chip::before{top:12px}.am-chip{top:-13px}}

/* ═══════ Round 11, 2026-10-14 late: the waxing and sugaring page ("now we need animation for waxing and sugaring page
   that would also match the vibe of our site"). "Wax or sugar" is two glass cards with heavenly still lifes (a silver
   pot of warm wax, a crystal dish of sugar paste, both on clouds) and a glowing "or" between them; a ribbon of golden
   sugar paste draws itself down the section as you scroll and pours into the areas that cost the same either way,
   which light up in turn. The price list above gets the warm glint along each row. ═══════ */
.waxsugar{position:relative;isolation:isolate;overflow:clip;padding:clamp(90px,11vw,170px) 0;background:var(--bg)}
.ws-sky{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 30%,rgba(214,231,250,.75),rgba(214,231,250,0) 70%),radial-gradient(40% 40% at 80% 75%,rgba(241,220,214,.55),rgba(241,220,214,0) 70%),var(--bg)}
.ws-ribbon{position:absolute;z-index:-1;left:50%;top:clamp(150px,16vw,230px);bottom:clamp(110px,12vw,170px);width:clamp(70px,9vw,130px);translate:-50% 0;overflow:visible;pointer-events:none}
.ws-ribbon path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1 1}
.ws-r1{stroke:url(#wsgold);stroke-width:9;filter:drop-shadow(0 0 8px rgba(238,200,120,.55))}
.ws-r2{stroke:rgba(255,252,240,.85);stroke-width:2.2;translate:-2px 0}
.ws-head{max-width:640px;margin:0 auto;text-align:center}
.ws-head h2 em{display:block}
.ws-head p:last-child{margin-top:14px;color:var(--mute)}
.ws-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,3vw,44px);align-items:center;margin-top:clamp(48px,6vw,90px)}
.ws-card{border-radius:var(--r-xl);overflow:hidden;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 34px 60px -40px rgba(34,30,33,.5);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.ws-card:hover{transform:translateY(-6px);box-shadow:0 0 0 1px #fff,0 0 48px 6px rgba(255,236,190,.7),0 40px 70px -40px rgba(34,30,33,.5)}
.ws-img{aspect-ratio:16/10;overflow:hidden}
.ws-img img{width:100%;height:100%;object-fit:cover;object-position:78% 55%;transition:scale 1.2s var(--ease)}
.ws-card:hover .ws-img img{scale:1.05}
.ws-body{padding:clamp(18px,2.2vw,28px)}
.ws-body h3{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.05em;line-height:1;margin-top:10px}
.ws-body > p:not(.kick){margin-top:8px;color:var(--mute)}
.ws-facts{list-style:none;margin-top:18px;border-top:1px solid var(--line-strong)}
.ws-facts li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.ws-facts span{color:var(--mute);font-size:.95rem}
.ws-facts b{font-weight:500;letter-spacing:-.01em}
.ws-or{position:relative;width:clamp(70px,7vw,96px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff,#FBF3E2 60%,#F1DFB8);box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 0 6px rgba(221,170,78,.25),0 0 40px 10px rgba(255,236,190,.7)}
.ws-or span{font-family:var(--f-accent);font-style:italic;font-size:clamp(1.6rem,2.4vw,2.2rem);color:var(--accent-ink);margin-top:-4px}
.ws-or::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(221,170,78,.5);opacity:0}
.ws-same{margin:clamp(56px,7vw,100px) auto 0;max-width:780px;text-align:center}
.ws-same .kick{justify-content:center}
.ws-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.ws-chips a{position:relative;overflow:hidden;display:inline-flex;align-items:baseline;gap:10px;padding:12px 18px;border-radius:999px;text-decoration:none;color:var(--ink);
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.95);box-shadow:0 16px 30px -22px rgba(34,30,33,.45);font-size:1.02rem;transition:box-shadow .3s,translate .3s var(--ease)}
.ws-chips i{font-style:normal;font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;color:var(--accent-ink)}
.ws-chips a:hover,.ws-chips a:focus-visible{translate:0 -3px;box-shadow:0 0 0 1px #fff,0 0 30px 4px rgba(255,236,190,.8)}
.ws-chips a::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,rgba(255,248,226,0) 30%,rgba(255,240,205,.95) 50%,rgba(255,248,226,0) 70%) 0 0/260% 100% no-repeat}
.ws-note{margin-top:18px;color:var(--mute);font-size:.95rem}
@media (max-width:900px){
  .ws-grid{grid-template-columns:1fr;justify-items:center}
  .ws-card{width:100%;max-width:520px}
}
@media (prefers-reduced-motion:no-preference){
  /* the ribbon of sugar paste draws itself as the section scrolls by */
  .js .waxsugar .ws-ribbon path{stroke-dashoffset:calc(1 - clamp(0,(var(--th,1) - .12) * 1.7,1))}
  .js .ws-grid .ws-or{scale:0;transition:scale .7s cubic-bezier(.3,1.6,.5,1) .35s}
  .js .ws-grid.go .ws-or{scale:1}
  .ws-or::after{animation:am-ping 3.2s ease-out infinite}
  .seq .ws-card{opacity:0;translate:0 50px;transition:opacity .9s var(--ease),translate .9s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
  .seq .ws-card.on{opacity:1;translate:0 0}
  .seq .ws-chips>li{opacity:0;translate:0 24px;scale:.9;transition:opacity .6s var(--ease),translate .6s var(--ease),scale .6s cubic-bezier(.3,1.6,.5,1)}
  .seq .ws-chips>li.on{opacity:1;translate:0 0;scale:1}
  .seq .ws-chips>li.on a::after{animation:mb-glint 1.4s ease-out .3s forwards}
}
.motion-off .ws-or::after{animation-play-state:paused}

/* the price list: a warm glint along each row in turn (like the most-booked list, without cupid) */
.glinted .lrow{position:relative;isolation:isolate}
.glinted .lrow::before{content:"";position:absolute;inset:0 -10px;z-index:-1;border-radius:8px;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,rgba(255,248,226,0) 30%,rgba(255,240,205,.95) 48%,rgba(238,210,154,.55) 54%,rgba(255,248,226,0) 70%) 0 0/260% 100% no-repeat}
@media (prefers-reduced-motion:no-preference){
  .js .glinted.go .lrow::before{animation:mb-glint 1.5s ease-out forwards;animation-delay:calc(.3s + var(--i,0) * .16s)}
}
/* the ribbon flows only between the cards and on toward the one-price chips, never behind the words above */
.ws-grid{position:relative;isolation:isolate}
.ws-ribbon{top:-46px;bottom:-62px}
.ws-grid .ws-ribbon{grid-column:1 / -1}
.ws-ribbon{bottom:auto;height:calc(100% + 108px)}

/* ═══════ Round 13, 2026-10-14 late: "it should show animations of wax dripping down that area of statue it highlights
   and sugar and it can be switched between just like woman and man". On the waxing page's map a Wax / Sugar switch
   flips every price and the drips: warm amber wax, or pale golden sugar paste. Point at an area (its pin or its row)
   and a glossy pool spreads there and three drips run down it, the last drops falling away; as the section arrives it
   drips once down each area in turn. Reduced motion: the pool and drips simply appear, still. ═══════ */
.am-switches{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.am-method button[aria-pressed="true"]{background:var(--btn-bg);color:#fff}
.am-switches + .am-list{margin-top:18px}
.areamap .ps{display:none}
.areamap[data-method="sugar"] .pw{display:none}
.areamap[data-method="sugar"] .ps{display:block}
.am-drip{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .6s ease;
  --d1:#FFE6AE;--d2:#E5A03A;--d3:#B46C17}
.areamap[data-method="sugar"] .am-drip{--d1:#FFF6DF;--d2:#F1D394;--d3:#CFA55A}
.am-drip b{position:absolute;left:-23px;top:-11px;width:46px;height:24px;border-radius:50%;opacity:.94;scale:0;
  background:radial-gradient(ellipse at 38% 32%,rgba(255,255,255,.9) 0 10%,var(--d1) 20%,var(--d2) 62%,var(--d3) 100%);
  box-shadow:0 2px 8px rgba(120,70,10,.28)}
.am-drip i{position:absolute;top:3px;width:7px;height:var(--len,56px);border-radius:0 0 8px 8px;transform-origin:50% 0;scale:1 0;
  background:linear-gradient(90deg,var(--d3) 0%,var(--d2) 28%,var(--d1) 50%,var(--d2) 72%,var(--d3) 100%);box-shadow:0 1px 4px rgba(120,70,10,.22)}
.am-drip i:nth-of-type(1){left:-15px;--len:44px;--n:0}
.am-drip i:nth-of-type(2){left:-4px;width:9px;--len:76px;--n:1}
.am-drip i:nth-of-type(3){left:9px;--len:34px;--n:2}
.am-drip i::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:13px;translate:-50% 0;border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;
  background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.85) 0 14%,var(--d1) 24%,var(--d2) 62%,var(--d3))}
.am-pin:is(.hl,.tour,:hover,:focus-visible) .am-drip{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .am-pin:is(.hl,.tour,:hover,:focus-visible) .am-drip b{animation:dr-pool .7s var(--ease) forwards}
  .am-pin:is(.hl,.tour,:hover,:focus-visible) .am-drip i{animation:dr-run 1.7s cubic-bezier(.55,0,.75,.45) forwards;animation-delay:calc(.25s + var(--n,0) * .2s)}
  .am-pin:is(.hl,.tour,:hover,:focus-visible) .am-drip i::after{animation:dr-drop 1.3s cubic-bezier(.5,0,.85,.5) forwards;animation-delay:calc(1.8s + var(--n,0) * .3s)}
  .areamap[data-method="sugar"] .am-pin:is(.hl,.tour,:hover,:focus-visible) .am-drip i{animation-duration:2.2s}   /* sugar paste is thicker: slower */
}
@media (prefers-reduced-motion:reduce){.am-pin:is(.hl,:hover,:focus-visible) .am-drip b{scale:1}.am-pin:is(.hl,:hover,:focus-visible) .am-drip i{scale:1 1}}
@keyframes dr-pool{from{scale:0}to{scale:1}}
@keyframes dr-run{from{scale:1 0}to{scale:1 1}}
@keyframes dr-drop{0%{translate:-50% 0;opacity:1}100%{translate:-50% 48px;opacity:0;scale:.7}}
@media (max-width:600px){.am-drip{scale:.75}}
/* round 13, bigger: the drips have to read at a glance (first try was too small to notice) */
.am-drip{--d1:#FFD98A;--d2:#E0902A;--d3:#A85C10;filter:drop-shadow(0 0 6px rgba(255,196,110,.55)) drop-shadow(0 3px 4px rgba(110,60,10,.25))}
.areamap[data-method="sugar"] .am-drip{--d1:#FFF2CF;--d2:#EDC97A;--d3:#BF8E3E}
.am-drip b{left:-40px;top:-17px;width:80px;height:36px}
.am-drip i{top:4px}
.am-drip i:nth-of-type(1){left:-28px;width:12px;--len:74px}
.am-drip i:nth-of-type(2){left:-8px;width:15px;--len:124px}
.am-drip i:nth-of-type(3){left:15px;width:11px;--len:58px}
.am-drip i::after{width:18px;height:20px;bottom:-11px}
@media (max-width:600px){.am-drip{scale:.62}}
/* more liquid: slim streams that end in a fuller teardrop */
.am-drip i{border-radius:45% 45% 50% 50% / 6% 6% 20% 20%}
.am-drip i:nth-of-type(1){width:9px}.am-drip i:nth-of-type(2){width:11px}.am-drip i:nth-of-type(3){width:8px}
.am-drip i::after{width:17px;height:21px;bottom:-14px;border-radius:50% 50% 50% 50% / 62% 62% 40% 40%}
.am-drip i::before{content:"";position:absolute;left:28%;top:6%;width:2px;height:70%;border-radius:2px;background:rgba(255,255,255,.55)}

/* ═══════ Round 14, 2026-10-14 late: "You can do a better animation. Use Gemini to generate it." The drips are Gemini
   photographs of real wax and sugar paste (shot on black, keyed by tools/make_drips.py: drip-wax.webp, drip-sugar.webp).
   On the area you point at, the liquid pours down from a glossy pool at the pin: it is revealed from the top as it
   stretches, then keeps creeping a touch longer while you stay, and fades when you move on. The drawn drips of round 13
   are retired. ═══════ */
.am-dripping .am-drip{left:-40px;top:-22px;width:80px;height:132px;scale:1;filter:drop-shadow(0 4px 6px rgba(110,60,10,.3));
  background:url("/assets/drip-wax.webp") 50% 0/contain no-repeat;clip-path:inset(0 0 100% 0);transform-origin:50% 0}
.am-dripping .am-drip>*{display:none}
.am-dripping[data-method="sugar"] .am-drip{background-image:url("/assets/drip-sugar.webp")}
.am-dripping .am-pin:is(.hl,.tour,:hover,:focus-visible) .am-drip{opacity:1;clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:no-preference){
  .am-dripping .am-pin:is(.hl,.tour,:hover,:focus-visible) .am-drip{animation:dr-pour 2.4s cubic-bezier(.5,0,.55,1) forwards,dr-creep 5s ease-in-out 2.4s infinite alternate}
  .am-dripping[data-method="sugar"] .am-pin:is(.hl,.tour,:hover,:focus-visible) .am-drip{animation-duration:3s,5s;animation-delay:0s,3s}
}
@keyframes dr-pour{0%{clip-path:inset(0 0 100% 0);transform:scaleY(.86)}18%{clip-path:inset(0 0 74% 0)}100%{clip-path:inset(0 0 0 0);transform:scaleY(1)}}
@keyframes dr-creep{from{transform:scaleY(1)}to{transform:scaleY(1.05)}}
@media (max-width:600px){.am-dripping .am-drip{scale:.66}}
.motion-off .am-dripping .am-pin .am-drip{animation:none}   /* paused: the drip simply shows, still */
/* the pool melts into the marble instead of sitting on it */
.am-dripping .am-drip{left:-32px;top:-12px;width:64px;height:118px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 9%,#000 22%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 9%,#000 22%)}
.am-dripping .am-drip{left:-48px;top:-14px;width:96px;height:118px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%);mask-image:linear-gradient(180deg,transparent 0,#000 14%)}
.am-dripping .am-drip{left:-56px;top:-16px;width:112px;height:138px}
.am-dripping[data-method="sugar"] .am-drip{filter:saturate(1.35) contrast(1.06) drop-shadow(0 0 1px rgba(150,98,36,.75)) drop-shadow(0 4px 6px rgba(110,60,10,.35))}
@media (max-width:600px){.areamap[data-method="sugar"] .am-chip .ps{display:none}}

/* ═══════ Round 15, 2026-10-15: the waxing chooser ("generate some aesthetic waxing shot that will be dripping on different
   body parts so it is always dripping but you choose different body parts and they appear underneath"). Replaces the
   statue with drips (rounds 12-14). Gemini stills (its video tool refused these); on each, the wax alone lengthens and
   catches the light, on a loop, while the picture drifts in slowly. */
.waxparts{position:relative;padding:clamp(80px,10vw,150px) 0;background:linear-gradient(180deg,var(--bg) 0%,#F4EEEE 50%,var(--bg) 100%)}
.wp-head{max-width:640px;margin:0 auto;text-align:center}
.wp-head h2 em{display:block}
.wp-head p:last-child{margin-top:14px;color:var(--mute)}
.wp-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:clamp(22px,2.6vw,32px)}
.wp-controls .am-tabs{margin-top:0}
.wp-parts{margin-top:clamp(16px,2vw,24px);display:flex;justify-content:center}
.wp-group{display:none;flex-wrap:wrap;justify-content:center;gap:2px clamp(6px,1.4vw,18px)}
.wp-group.on{display:flex}
.wp-group button{appearance:none;border:0;background:none;cursor:pointer;position:relative;padding:10px 6px 14px;
  font-family:var(--f-accent);font-style:italic;font-weight:400;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1;color:var(--mute);transition:color .35s}
.wp-group button:hover{color:var(--ink)}
.wp-group button[aria-selected="true"]{color:var(--accent-ink)}
.wp-group button::after{content:"";position:absolute;left:6px;right:6px;bottom:5px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,#EBCB85,#B08D57);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wp-group button[aria-selected="true"]::after{transform:scaleX(1)}
.waxparts.auto .wp-group button[aria-selected="true"]::after{animation:wp-tick 6s linear both}   /* fills while it waits to move on */
@keyframes wp-tick{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.wp-group button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:4px}
.wp-stage{position:relative;margin:clamp(18px,2.4vw,28px) auto 0;max-width:min(1180px,calc((100vh - 270px) * 1.79));aspect-ratio:1600/894;border-radius:18px;overflow:hidden;isolation:isolate;
  background:#EFE8E0;box-shadow:0 40px 80px -42px rgba(70,44,30,.5),0 0 0 1px rgba(255,255,255,.7)}
.wp-shot{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity 1.1s ease,visibility 0s 1.1s}
.wp-shot.on{opacity:1;visibility:visible;z-index:1;transition:opacity 1.1s ease,visibility 0s}
.wp-media{position:absolute;inset:0;overflow:hidden}
.wp-canvas{position:absolute;top:0;left:0;height:100%;aspect-ratio:1600/894;transform-origin:var(--dx) var(--dy)}
.wp-canvas img{display:block;width:100%;height:100%}
.wp-flow,.wp-glint{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:radial-gradient(ellipse calc(var(--dw) * .62) calc(var(--dh) * .62) at var(--dx) var(--dy),#000 55%,transparent 100%);
          mask:radial-gradient(ellipse calc(var(--dw) * .62) calc(var(--dh) * .62) at var(--dx) var(--dy),#000 55%,transparent 100%)}
.wp-flow{background:var(--src) 0 0/100% 100% no-repeat;opacity:0;transform-origin:var(--dx) calc(var(--dy) - var(--dh) / 2)}
.wp-glint{background:linear-gradient(180deg,transparent 0%,rgba(255,238,196,0) 40%,rgba(255,242,210,.85) 50%,rgba(255,238,196,0) 60%,transparent 100%) 0 100%/100% 260% no-repeat;
  mix-blend-mode:soft-light;opacity:0}
@media (prefers-reduced-motion:no-preference){
  .wp-shot.on .wp-canvas{animation:wp-push 18s ease-in-out infinite alternate}
  .wp-shot.on .wp-flow{animation:wp-drip 5.4s cubic-bezier(.45,.05,.55,.95) infinite}
  .wp-shot.on .wp-glint{animation:wp-glint 5.4s cubic-bezier(.5,0,.5,1) .6s infinite}
}
@keyframes wp-push{from{transform:scale(1.012)}to{transform:scale(1.07)}}
@keyframes wp-drip{0%{opacity:0;transform:none}30%{opacity:.9}70%{opacity:.9;transform:translateY(.4%) scaleY(1.035)}100%{opacity:0;transform:translateY(.55%) scaleY(1.045)}}
@keyframes wp-glint{0%{opacity:0;background-position:0 100%}16%{opacity:1}84%{opacity:1}100%{opacity:0;background-position:0 0}}
.motion-off .wp-canvas,.motion-off .wp-flow,.motion-off .wp-glint{animation-play-state:paused}
.wp-card{position:absolute;left:clamp(14px,2.2vw,28px);bottom:clamp(14px,2.2vw,28px);z-index:2;width:min(330px,36%);padding:18px 20px 16px;border-radius:14px;
  background:rgba(250,246,240,.74);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 20px 40px -24px rgba(50,30,20,.45);
  opacity:0;transform:translateY(12px);transition:opacity .6s ease .3s,transform .7s cubic-bezier(.2,.8,.2,1) .3s}
.wp-shot.on .wp-card{opacity:1;transform:none}
.wp-card .kick{margin:0;font-size:.72rem}
.wp-t{margin:6px 0 0;font-family:var(--f-accent);font-style:italic;font-size:clamp(1.6rem,2.3vw,2.1rem);line-height:1;color:var(--ink)}
.wp-d{margin:8px 0 0;color:var(--mute);font-size:.95rem;line-height:1.45}
.wp-p{margin:10px 0 0;font:500 1.05rem/1.2 var(--f-body);color:var(--accent-ink);font-variant-numeric:tabular-nums}
.wp-p i{font-style:normal}
.wp-card .arrow-link{margin-top:10px;display:inline-flex}
.waxparts .ps{display:none}
.waxparts[data-method="sugar"] .pw{display:none}
.waxparts[data-method="sugar"] .ps{display:inline}
@media (max-width:760px){
  .wp-stage{aspect-ratio:auto;overflow:visible;background:none;box-shadow:none;border-radius:0;display:grid}
  .wp-shot{position:relative;inset:auto;grid-area:1/1}
  .wp-media{position:relative;inset:auto;aspect-ratio:5/4;border-radius:16px;box-shadow:0 30px 60px -36px rgba(70,44,30,.5)}
  .wp-canvas{left:clamp(-43.18%,calc(50% - var(--fxn) * 143.18%),0%)}   /* cropped around where the wax runs */
  .wp-card{position:relative;left:auto;bottom:auto;width:auto;margin:-30px 12px 0}
}

/* ═══════ Round 15, 2026-10-15: the looks rows on the nails and brows pages ("we need some aesthetic animation for manicure
   pedicure too where it will be changing on hand or foot", "same with brows and lashes", "you can use animation from this
   site https://www.fixchocolatier.com/ where you just scroll through and they're changing"). Like FIX's bars: the section
   holds still while you scroll, one picture after another slides into the middle (a little turn, a little blur on the
   move), the next ones wait at the sides, and a giant word behind says which group you are in. */
.looks{position:relative;padding:0;overflow:clip;--lk-w:min(44vh,34vw);--lk-gap:calc(var(--lk-w) * 1.06);
  background:radial-gradient(110% 70% at 50% 62%,#FCF6F1 0%,#F4E9E4 52%,#EBDDD8 100%)}
.lk-head{text-align:center;padding-top:clamp(70px,9vw,120px);position:relative;z-index:2}
.lk-head h2 em{font-family:var(--f-accent);font-style:italic}
.lk-tabs{margin-top:16px}
.lk-tabs button[aria-current="true"]{background:var(--btn-bg);color:#fff}
.lk-word{position:absolute;left:0;right:0;top:56%;margin:0;text-align:center;white-space:nowrap;pointer-events:none;z-index:0;
  font-family:var(--f-accent);font-style:italic;font-weight:400;font-size:clamp(6rem,21vw,21rem);line-height:.8;letter-spacing:-.02em;
  color:rgba(162,63,69,.075);transform:translateY(-50%)}
.lk-track{list-style:none;margin:0;padding:0;position:relative;z-index:1}
.lk-item figure{margin:0}
.lk-pic{aspect-ratio:1;border-radius:22px;overflow:hidden;background:#EFE6DE;
  box-shadow:0 44px 70px -42px rgba(90,44,40,.6),0 0 0 1px rgba(255,255,255,.65)}
.lk-pic img{display:block;width:100%;height:100%;object-fit:cover}
.lk-item figcaption{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;margin-top:18px}
.lk-n{font-family:var(--f-accent);font-style:italic;font-weight:400;font-size:clamp(1.9rem,3vw,2.9rem);line-height:1;color:var(--ink)}
.lk-s{font-size:.95rem;color:var(--mute)}
.lk-s b{font-weight:500;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.lk-s i{font-style:normal;opacity:.55}
.lk-book{font:500 .86rem/1 var(--f-body);color:var(--ink);text-decoration:underline;text-decoration-color:rgba(176,141,87,.7);text-underline-offset:4px}
.lk-book:hover{color:var(--accent-ink)}
.lk-dots{display:flex;justify-content:center;gap:7px;position:relative;z-index:2}
.lk-dots button{appearance:none;width:22px;height:3px;padding:0;border:0;border-radius:2px;background:rgba(34,30,33,.18);cursor:pointer;transition:background .3s,width .3s}
.lk-dots button.on{width:34px;background:var(--accent-ink)}
/* without the script, or under reduced motion: a row you swipe */
.looks:not(.pin){padding-bottom:clamp(60px,8vw,110px)}
.looks:not(.pin) .lk-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:28px max(16px,calc((100vw - 1240px) / 2)) 12px}
.looks:not(.pin) .lk-item{flex:0 0 min(78vw,340px);scroll-snap-align:center}
.looks:not(.pin) .lk-dots,.looks:not(.pin) .lk-word{display:none}
/* pinned: the reader's scroll drives it (it does not stop for "Pause animations") */
.looks.pin .lk-scroll{height:calc(100vh + (var(--n) - 1) * 56vh)}
.looks.pin .lk-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column}
.looks.pin .lk-head{padding-top:clamp(84px,11vh,124px)}
.looks.pin .lk-track{flex:1;perspective:1400px;filter:blur(calc(var(--v,0) * 1px))}
.looks.pin .lk-item{position:absolute;left:50%;top:clamp(12px,3vh,36px);width:var(--lk-w);margin-left:calc(var(--lk-w) / -2);will-change:transform,opacity;
  transform:translateX(calc(var(--d,0) * var(--lk-gap))) rotateY(calc(var(--d,0) * -15deg)) scale(calc(1 - min(var(--ad,0), 2) * .2));
  opacity:calc(1 - min(var(--ad,0), 2) * .36)}
.looks.pin .lk-item:not(.c){cursor:pointer}
.looks.pin .lk-item figcaption{opacity:max(0, calc(1 - var(--ad,0) * 2.6))}
.looks.pin .lk-dots{padding:0 0 clamp(18px,4vh,36px)}
@media (max-width:760px){
  .looks{--lk-w:min(74vw,40vh);--lk-gap:calc(var(--lk-w) * 1.02)}
  .looks.pin .lk-stage{justify-content:center;padding-bottom:84px}   /* clear of the Book online bar */
  .looks.pin .lk-track{flex:0 0 calc(var(--lk-w) + 150px)}
  .looks.pin .lk-head{padding-top:clamp(78px,10vh,96px)}
  .looks.pin .lk-head h2{font-size:clamp(1.9rem,8vw,2.4rem)}
  .lk-word{top:50%}
}
/* round 15: with the "or" and its ribbon gone, the two cards sit side by side ("it is supposed to be wax or sugar side by side") */
.ws-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
@media (max-width:900px){.ws-grid{grid-template-columns:1fr}}
/* round 15b (2026-10-15): the looks rows, easier to move through ("I want it to be very easy to navigate"). Even movement
   with a gentle snap on each picture (markers placed by look-sky.js), the dots under the group buttons (they sat right
   under "Book this"), round arrows beside the middle picture */
html.lk-snapping{scroll-snap-type:y proximity}
.looks{--lk-step:62vh;--lk-w:min(42vh,34vw)}
.looks.pin .lk-scroll{position:relative;height:calc(100vh + (var(--n) - 1) * var(--lk-step))}
.lk-snap{position:absolute;left:0;top:calc(var(--i) * var(--lk-step) + 84px);   /* + base.css's scroll-padding-top, which snapping honours */
  width:1px;height:1px;scroll-snap-align:start;pointer-events:none}
.lk-dots,.looks.pin .lk-dots{margin-top:14px;gap:6px;padding:0}
.lk-dots button{position:relative;width:24px;height:22px;background:none;border-radius:0}
.lk-dots button::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:rgba(34,30,33,.2);transition:background .3s}
.lk-dots button:hover::after{background:rgba(34,30,33,.42)}
.lk-dots button.on{width:36px;background:none}
.lk-dots button.on::after{background:var(--accent-ink)}
.lk-dots button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.lk-arrow{display:none}
.looks.pin .lk-body{position:relative;flex:1}
.looks.pin .lk-track{position:absolute;inset:0}
.looks.pin .lk-arrow{display:grid;place-items:center;position:absolute;z-index:120;top:calc(clamp(12px,3vh,36px) + var(--lk-w) / 2 - 22px);
  width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;color:var(--ink);
  background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 12px 26px -14px rgba(70,34,30,.55);transition:background .3s,opacity .3s,transform .2s}
.looks.pin .lk-prev{left:calc(50% - var(--lk-w) / 2 - 22px - clamp(14px,2.4vw,34px))}
.looks.pin .lk-next{left:calc(50% + var(--lk-w) / 2 - 22px + clamp(14px,2.4vw,34px))}
.lk-arrow:hover{background:#fff}
.lk-arrow:active{transform:scale(.94)}
.lk-arrow:disabled{opacity:0;pointer-events:none}
.lk-arrow:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.lk-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.looks.pin .lk-item figcaption{gap:8px}
.lk-book{margin-top:2px}
@media (max-width:760px){
  .looks{--lk-w:min(72vw,34vh);--lk-step:58vh}
  .looks.pin .lk-stage{justify-content:flex-start;padding-bottom:76px}
  .looks.pin .lk-track{flex:none}
  .looks.pin .lk-arrow{width:40px;height:40px;top:calc(clamp(12px,3vh,36px) + var(--lk-w) / 2 - 20px)}
  .looks.pin .lk-prev{left:max(6px,calc(50% - var(--lk-w) / 2 - 34px))}
  .looks.pin .lk-next{left:auto;right:max(6px,calc(50% - var(--lk-w) / 2 - 34px))}
}
@media (max-width:760px) and (max-height:700px){.looks{--lk-w:min(66vw,30vh)}}
/* round 15c (2026-10-15): a picture for each category on the prices page ("right now it's like a little bit hard to see the
   difference, too much text"). Beside its list on wide screens, staying in view while you read it, sides alternating;
   a banner above the list on phones */
.tb-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start}
.tb-split.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.tb-split.flip .tb-pic{order:2}
.tb-pic{position:sticky;top:104px;margin:0;aspect-ratio:4/5;max-height:calc(100vh - 140px);border-radius:var(--r-xl);overflow:hidden;background:#EFE6DE;
  box-shadow:0 40px 70px -44px rgba(80,40,36,.55),0 0 0 1px rgba(255,255,255,.7)}
.tb-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:scale 1.2s cubic-bezier(.2,.8,.2,1)}
.tb-split:hover .tb-pic img{scale:1.03}
.tb-split .table-block{min-width:0;width:100%;max-width:none;margin:0}
@media (max-width:900px){
  .tb-split,.tb-split.flip{grid-template-columns:1fr;gap:18px}
  .tb-split.flip .tb-pic{order:0}
  .tb-pic{position:relative;top:auto;aspect-ratio:16/9;max-height:none}
}
/* round 15d: the half-body sets show the four areas they cover, a small labelled picture each */
.tb-mosaic{aspect-ratio:auto;max-height:none;background:none;box-shadow:none;border-radius:0;overflow:visible}
.tb-mosaic ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tb-mosaic li{position:relative;aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;background:#EFE6DE;
  box-shadow:0 26px 46px -32px rgba(80,40,36,.55),0 0 0 1px rgba(255,255,255,.7)}
.tb-mosaic img{display:block;width:100%;height:100%;object-fit:cover}
.tb-mosaic span{position:absolute;left:10px;bottom:10px;padding:6px 11px;border-radius:999px;font:500 .8rem/1 var(--f-body);color:var(--ink);
  background:rgba(250,246,240,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)}
@media (max-width:900px){.tb-mosaic ul{gap:10px}.tb-mosaic{aspect-ratio:auto}}

/* ═══════ Round 16, 2026-10-15: one page per service ("now we need deep seo for the site sephora like with separate pages").
   Sephora's category grid on each category page and on /services: a card per service with its own page, price, length and a
   Book link, and filter chips (without the script every card shows). Price rows link their name to the service's page. */
.catalog{position:relative;padding:clamp(70px,9vw,130px) 0;background:linear-gradient(180deg,var(--bg) 0%,#F5EEEC 50%,var(--bg) 100%)}
.catalog .head-c h2 em{font-family:var(--f-accent);font-style:italic}
.cg-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(20px,2.4vw,30px)}
.cg-chips button{appearance:none;cursor:pointer;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,255,255,.62);
  font:500 14px/1 var(--f-body);color:var(--ink);transition:background .25s,color .25s,border-color .25s,transform .15s}
.cg-chips button:hover{background:#fff}
.cg-chips button:active{transform:scale(.97)}
.cg-chips button i{font-style:normal;font-size:12px;color:var(--mute);margin-left:3px}
.cg-chips button[aria-pressed="true"]{background:var(--btn-bg);border-color:var(--btn-bg);color:#fff}
.cg-chips button[aria-pressed="true"] i{color:rgba(255,255,255,.7)}
.cg-chips button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.cg-grid{list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.cg-card{position:relative;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.58));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 22px 40px -32px rgba(80,40,40,.5);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.cg-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px #fff,0 0 34px 2px rgba(255,236,196,.55),0 30px 50px -32px rgba(80,40,40,.55)}
.cg-card[hidden]{display:none}
.cg-a{display:flex;flex-direction:column;gap:7px;height:100%;padding:18px 18px 58px;color:inherit;text-decoration:none;border-radius:16px}
.cg-a:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.cg-f{font:500 10.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.cg-n{font-family:var(--f-accent);font-style:italic;font-weight:400;font-size:clamp(1.45rem,2vw,1.7rem);line-height:1.05;color:var(--ink)}
.cg-l{font-size:.9rem;line-height:1.42;color:var(--mute)}
.cg-p{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.cg-p em{font-style:normal;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.cg-p i{font-style:normal;font-size:.82rem;color:var(--mute)}
.cg-go{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:6px;font:500 .84rem/1 var(--f-body);color:var(--accent-ink)}
.cg-go .ar{width:14px;height:14px}
.cg-book{position:absolute;right:14px;bottom:12px;display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;
  background:var(--btn-bg);color:#fff;font:500 .82rem/1 var(--f-body);text-decoration:none;transition:background .25s,transform .15s}
.cg-book:hover{background:var(--btn-bg-h)}
.cg-book:active{transform:scale(.96)}
@media (prefers-reduced-motion:no-preference){
  .js .catalog .cg-card{animation:cg-in .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(min(var(--i,0), 12) * 40ms)}
}
@keyframes cg-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@media (max-width:600px){.cg-grid{grid-template-columns:1fr 1fr;gap:10px}.cg-a{padding:14px 14px 84px}.cg-n{font-size:1.3rem}.cg-l{display:none}
  .cg-go{left:14px;bottom:52px}.cg-book{left:12px;right:12px;bottom:10px;justify-content:center}}
.row-link{color:inherit;text-decoration:underline;text-decoration-color:rgba(176,141,87,.55);text-underline-offset:4px;text-decoration-thickness:1px}
.row-link:hover{color:var(--accent-ink);text-decoration-color:currentColor}

/* ═══════ Round 17, 2026-10-15: longer service pages ("extensive SEO ... for each page"). Before and after checklists. */
.ticks-block{max-width:820px;margin:0 auto}
.ticks-block h2{margin-top:6px}
.tk-list{list-style:none;margin:clamp(18px,2.2vw,26px) 0 0;padding:0;display:grid;gap:10px}
.tk-list li{position:relative;padding:14px 16px 14px 48px;border-radius:12px;background:rgba(255,255,255,.66);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 14px 30px -26px rgba(80,40,40,.45);line-height:1.5}
.tk-list li::before{content:"";position:absolute;left:16px;top:17px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FFF6DA,#E5C27A 60%,#B08D57);box-shadow:0 0 0 3px rgba(229,194,122,.18)}
.tk-list li::after{content:"";position:absolute;left:21.5px;top:21px;width:6px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tk-note{margin-top:14px;font-size:.88rem;color:var(--mute)}
@media (prefers-reduced-motion:no-preference){
  .js .ticks-block.rv .tk-list li{opacity:0;translate:0 10px;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.8,.2,1)}
  .js .ticks-block.rv.in .tk-list li{opacity:1;translate:0 0}
  .js .ticks-block.rv.in .tk-list li:nth-child(2){transition-delay:.08s}
  .js .ticks-block.rv.in .tk-list li:nth-child(3){transition-delay:.16s}
  .js .ticks-block.rv.in .tk-list li:nth-child(4){transition-delay:.24s}
  .js .ticks-block.rv.in .tk-list li:nth-child(5){transition-delay:.32s}
}

/* round 17: grid cards with a picture (Sephora's "shop by occasion" tiles), only when every card in the grid has one */
.cg-card.has-pic .cg-a{padding-top:0}
.cg-pic{display:block;margin:0 -18px 8px;aspect-ratio:4/3;overflow:hidden;border-radius:16px 16px 0 0;background:#EFE6DE}
.cg-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%;transition:scale .8s cubic-bezier(.2,.8,.2,1)}
.cg-card.has-pic:hover .cg-pic img{scale:1.05}
@media (max-width:600px){.cg-pic{margin:0 -14px 6px}}
/* 2026-10-15: "too much space between the hero section and the next section" on the waxing page: the chooser keeps its big
   top padding only when it is not straight under the hero */
.phero + .waxparts{padding-top:clamp(20px,3vw,40px)}

/* 2026-10-15 evening: "We should put policies at the top as well". With an eighth link the 1000px bar squeezed the
   Book button and the "Spa · Kamloops" line onto two lines; the bar gets 100px more and neither may wrap. */
.nav .wrap{width:min(1100px,100% - 24px)}
.nav .wrap>.btn,.brand .w,.brand .s{white-space:nowrap}

/* Sky High Spa: the on-site booking panel (2026-10-15, booking/booking.js). In site.css only with `build.py --booking`. Sky look tokens. */
.bk{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:0;border-radius:var(--r-lg,28px);padding:clamp(22px,4vw,34px);
  background:var(--surface,#fff);color:var(--ink,#0F2440);box-shadow:0 40px 90px -30px rgba(15,36,64,.55)}
.bk::backdrop{background:rgba(15,36,64,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bk h2{margin:2px 0 4px;font-size:clamp(1.5rem,4vw,1.9rem);line-height:1.1;letter-spacing:-.03em;font-weight:500;padding-right:44px}
.bk h3{font-size:.95rem;font-weight:500;margin:22px 0 10px;display:flex;gap:10px;align-items:baseline}
.bk .bk-tz{font-size:.8rem;color:var(--mute,#4D627E);font-weight:400}
.bk-meta{color:var(--mute,#4D627E);margin:0;font-size:.95rem}
.bk-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line,rgba(15,36,64,.1));
  background:var(--bg,#F4F8FD);color:var(--ink,#0F2440);font-size:22px;line-height:1;cursor:pointer}
.bk{position:fixed;inset:0;margin:auto}   /* base.css resets every margin to 0, which drops the browser's dialog centring */
.bk-days{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(64px,1fr);gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity}
.bk-day,.bk-time{font:inherit;border:1px solid var(--line-strong,rgba(15,36,64,.22));background:var(--surface,#fff);color:var(--ink,#0F2440);
  border-radius:var(--r-sm,12px);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.bk-day{padding:9px 6px;font-size:.82rem;line-height:1.25;text-align:center;scroll-snap-align:start}
.bk-day[aria-pressed="true"]{background:var(--btn-bg,#0F2440);border-color:var(--btn-bg,#0F2440);color:var(--btn-ink,#fff)}
.bk-day:disabled{opacity:.38;cursor:default}
.bk-day:not(:disabled):hover,.bk-time:hover{border-color:var(--accent-ink,#2361AC)}
.bk-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;min-height:48px}
.bk-time{padding:11px 6px;font-size:.92rem}
.bk-sk{display:block;height:52px;border-radius:var(--r-sm,12px);background:linear-gradient(90deg,var(--bg2,#E9F2FC),var(--bg,#F4F8FD),var(--bg2,#E9F2FC));
  background-size:200% 100%;animation:bk-sk 1.2s linear infinite}
@keyframes bk-sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.bk-sk{animation:none}}
.bk-msg{grid-column:1/-1;color:var(--mute,#4D627E);margin:6px 0}
.bk-msg a,.bk-err a,.bk-alt a,.bk-small a{color:var(--accent-ink,#2361AC)}
.bk-back{font:inherit;font-size:.9rem;background:none;border:0;padding:6px 0;color:var(--accent-ink,#2361AC);cursor:pointer;margin-top:14px}
.bk-when,.bk-done-when{font-size:1.05rem;font-weight:500;margin:6px 0 16px}
.bk-form{display:grid;gap:12px}
.bk-form label{display:grid;gap:6px;font-size:.88rem;font-weight:500}
.bk-form input,.bk-form textarea{font:inherit;font-weight:400;font-size:1rem;padding:11px 13px;border:1px solid var(--line-strong,rgba(15,36,64,.22));
  border-radius:var(--r-sm,12px);background:var(--surface,#fff);color:var(--ink,#0F2440);width:100%;box-sizing:border-box}
.bk-form input:focus,.bk-form textarea:focus{outline:2px solid var(--accent,#5E9DE2);outline-offset:1px}
.bk-form [aria-invalid="true"]{border-color:#B3261E;background:#FFF6F5}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.bk-row{grid-template-columns:1fr}}
.bk-opt{font-weight:400;color:var(--mute,#4D627E)}
.bk-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.bk-policy{font-size:.85rem;color:var(--mute,#4D627E);margin:2px 0 4px;line-height:1.5}
.bk-go{justify-self:start}
.bk-form label>span{display:block}
.bk-go:disabled{opacity:.6;cursor:progress}
.bk-err{color:#B3261E;font-size:.92rem;margin:0;min-height:1em}
.bk-ok{font-size:1.6rem;font-weight:500;letter-spacing:-.02em;margin:18px 0 0;outline:none}
.bk-small{font-size:.88rem;color:var(--mute,#4D627E)}
.bk-alt{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line,rgba(15,36,64,.1));font-size:.85rem;color:var(--mute,#4D627E)}
/* 2026-10-16: the treatment list behind "Book online" */
.bk-svcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.bk-svc{font:inherit;font-size:.92rem;text-align:left;padding:11px 14px;border:1px solid var(--line-strong,rgba(15,36,64,.22));background:var(--surface,#fff);
  color:var(--ink,#0F2440);border-radius:var(--r-sm,12px);cursor:pointer;transition:border-color .2s}
.bk-svc:hover{border-color:var(--accent-ink,#2361AC)}
.bk-tomenu{font:inherit;font-size:.9rem;background:none;border:0;padding:6px 0;color:var(--accent-ink,#2361AC);cursor:pointer;margin:10px 0 0}