/* ============================================================
   HUE & CO. STUDIOS  —  "Clinical Bright" design system
   Committed direction. Crisp, airy, premium-clinic, conversion-first.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --bg:#FCFBF9;
  --bg-2:#F4F1EC;
  --card:#FFFFFF;
  --ink:#161410;
  --ink-2:#4C4942;
  --muted:#8B877E;
  --line:#E8E4DC;
  --line-2:#F0EDE6;
  --pink:#E7B6BD;
  --pink-bg:#FBEEF0;
  --pink-deep:#C2727E;
  --teal:#2E6F69;
  --shadow-sm:0 2px 12px rgba(22,20,16,.05);
  --shadow:0 22px 60px -28px rgba(40,26,16,.28);
  --shadow-lg:0 40px 90px -40px rgba(40,26,16,.4);
  --r:16px; --r-lg:26px; --r-xl:34px;
  --disp:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.4,.02,.12,1);
  --gut:clamp(1.3rem,5.5vw,6rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--bg)}

h1,h2,h3,h4{font-family:var(--disp);font-weight:500;line-height:1.03;letter-spacing:-.022em}
.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink-deep);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--pink-deep);display:inline-block}
.eyebrow.solo::before{display:none}
.muted{color:var(--muted)}
.serif-it{font-style:italic}

.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:820px;margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(4rem,9vw,7.5rem)}
.center{text-align:center}
.bg-2{background:var(--bg-2)}
.pink-bg{background:var(--pink-bg)}

/* ===== BUTTONS (pill) ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--sans);
  font-size:.92rem;font-weight:500;letter-spacing:.01em;padding:1.05em 1.9em;border-radius:100px;
  border:1.5px solid var(--ink);cursor:pointer;transition:all .35s var(--ease);white-space:nowrap}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--ink);color:var(--bg);box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:var(--card);color:var(--ink);border-color:var(--card)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-sm{padding:.72em 1.3em;font-size:.82rem}

/* ===== NAV ===== */
nav{position:fixed;inset:0 0 auto 0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--gut);transition:all .4s var(--ease)}
nav.scrolled{background:rgba(252,251,249,.82);backdrop-filter:blur(18px);box-shadow:0 1px 0 var(--line-2);
  padding-block:.75rem}
.brand{font-family:var(--disp);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:.95}
.brand small{display:block;font-family:var(--sans);font-size:.5rem;font-weight:600;letter-spacing:.4em;
  text-transform:uppercase;color:var(--muted);margin-top:.35em;padding-left:.1em}
.nav-links{display:flex;gap:2.1rem;align-items:center}
.nav-links a{font-size:.92rem;font-weight:450;color:var(--ink-2);position:relative;transition:color .3s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:1.2rem}
.nav-phone{font-size:.9rem;font-weight:500;color:var(--ink)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:7px;z-index:210}
.burger span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.4s var(--ease)}

/* ===== HERO (centered, airy) ===== */
.hero{padding:9rem var(--gut) clamp(3rem,6vw,5rem);text-align:center;position:relative;overflow:hidden}
.hero .blob{position:absolute;width:min(720px,90vw);height:520px;border-radius:50%;left:50%;top:-8%;
  transform:translateX(-50%);background:radial-gradient(circle,var(--pink-bg),transparent 66%);z-index:0}
.hero-in{position:relative;z-index:1;max-width:960px;margin:0 auto}
.hero h1{font-size:clamp(2.7rem,6.4vw,5.4rem);font-weight:600;margin:1.6rem 0 1.4rem;letter-spacing:-.03em}
.hero h1 .serif-it{color:var(--pink-deep)}
.hero .sub{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--ink-2);max-width:620px;margin:0 auto 2.4rem}
.hero-cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.trust-row{display:flex;gap:2rem;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:2.8rem;
  padding-top:2.4rem;border-top:1px solid var(--line-2)}
.trust-item{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.trust-item .stars{color:var(--pink-deep);letter-spacing:.12em;font-size:.9rem}
.trust-item b{font-family:var(--disp);font-size:1.3rem;font-weight:600}
.trust-item span{font-size:.74rem;color:var(--muted);letter-spacing:.04em}
.trust-sep{width:1px;height:34px;background:var(--line)}

/* ===== PATH CARDS (the router) ===== */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.path{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:440px;display:flex;
  flex-direction:column;justify-content:flex-end;padding:clamp(1.8rem,3vw,2.8rem);color:#fff;
  text-decoration:none;box-shadow:var(--shadow);isolation:isolate;transition:transform .5s var(--ease)}
.path:hover{transform:translateY(-4px)}
.path .ground{position:absolute;inset:0;z-index:-2;transition:transform 1s var(--ease)}
.path:hover .ground{transform:scale(1.05)}
.path.men .ground{background:linear-gradient(165deg,#3a342d,#181613)}
.path.women .ground{background:linear-gradient(165deg,#caa2a6,#7d5860)}
.path::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(15,12,10,.6),rgba(15,12,10,.05) 65%)}
.path .top{position:absolute;top:clamp(1.8rem,3vw,2.8rem);left:clamp(1.8rem,3vw,2.8rem);right:clamp(1.8rem,3vw,2.8rem);
  display:flex;justify-content:space-between;align-items:center}
.path .label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  padding:.5em 1em;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border-radius:100px}
.path h3{font-family:var(--disp);font-weight:600;font-size:clamp(1.9rem,3.2vw,2.7rem);margin-bottom:.6rem;
  letter-spacing:-.02em}
.path p{font-size:1rem;color:rgba(255,255,255,.82);max-width:32ch;margin-bottom:1.5rem}
.path .go{display:inline-flex;align-items:center;gap:.6em;font-weight:600;font-size:.92rem;
  background:#fff;color:var(--ink);padding:.85em 1.5em;border-radius:100px;width:fit-content;
  transition:gap .35s var(--ease)}
.path:hover .go{gap:1.1em}
.path .mini{position:absolute;top:clamp(1.8rem,3vw,2.8rem);right:clamp(1.8rem,3vw,2.8rem);text-align:right;
  font-size:.72rem;color:rgba(255,255,255,.7);letter-spacing:.04em}

/* ===== STAT BAND ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.stat{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:2.2rem 1.6rem;
  text-align:center;box-shadow:var(--shadow-sm)}
.stat b{font-family:var(--disp);font-size:clamp(2.2rem,4vw,3rem);font-weight:600;display:block;line-height:1;
  letter-spacing:-.03em}
.stat span{font-size:.78rem;color:var(--muted);margin-top:.7rem;display:block;letter-spacing:.02em}

/* ===== SECTION HEAD ===== */
.sec-head{max-width:660px;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:600;margin:1rem 0 1rem;letter-spacing:-.025em}
.sec-head p{font-size:1.08rem;color:var(--ink-2)}

/* ===== SPLIT ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.flip .split-media{order:2}
.split-copy h2{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:600;margin:1rem 0 1.3rem;letter-spacing:-.025em}
.split-copy>p{font-size:1.06rem;color:var(--ink-2);margin-bottom:1.8rem;max-width:480px}
.ticks{list-style:none;margin-bottom:2rem}
.ticks li{display:flex;gap:.9rem;padding:.7rem 0;font-size:1rem;align-items:flex-start}
.ticks .ic{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--pink-bg);color:var(--pink-deep);
  display:grid;place-items:center;font-size:.7rem;font-weight:700;margin-top:.1rem}
.ticks b{font-weight:600}

/* media frames (rounded, clean) */
.frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);aspect-ratio:4/5;
  box-shadow:var(--shadow-sm);display:grid;place-content:center;text-align:center;border:1px solid var(--line-2)}
.frame .ph{font-family:var(--disp);font-weight:500;color:var(--muted);font-size:1.1rem;display:grid;gap:.4rem}
.frame .ph small{font-family:var(--sans);font-weight:500;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.frame.photo{display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(168deg,var(--bg-2),#e9e4db)}
.frame.photo img{position:relative;z-index:2;height:100%;width:100%;object-fit:cover;object-position:50% 12%}

/* before / after */
.ba{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;cursor:ew-resize;
  user-select:none;touch-action:none;box-shadow:var(--shadow)}
.ba-layer{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ba-after{background:linear-gradient(150deg,#39332c,#221e19)}
.ba-before{background:linear-gradient(150deg,var(--bg-2),#e6e0d6)}
.ba .ph{font-family:var(--disp);font-style:normal;color:var(--muted);font-size:1.05rem}
.ba-after .ph{color:rgba(255,255,255,.6)}
.ba-tag{position:absolute;top:1rem;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  padding:.45em 1em;border-radius:100px;background:rgba(255,255,255,.92);color:var(--ink)}
.ba-before .ba-tag{left:1rem}.ba-after .ba-tag{right:1rem;background:rgba(20,18,15,.7);color:#fff}
.ba-handle{position:absolute;inset-block:0;left:50%;width:2px;background:#fff;transform:translateX(-50%);z-index:5}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:#fff;display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.25);color:var(--ink)}

/* ===== SERVICE CARDS ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.cards.two-up{grid-template-columns:1fr 1fr}
.card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:2.2rem;
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);display:flex;
  flex-direction:column;min-height:230px}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ic{width:46px;height:46px;border-radius:14px;background:var(--pink-bg);color:var(--pink-deep);
  display:grid;place-items:center;font-size:1.2rem;margin-bottom:auto}
.card h3{font-size:1.4rem;font-weight:600;margin:1.3rem 0 .6rem;letter-spacing:-.02em}
.card p{font-size:.94rem;color:var(--ink-2);line-height:1.55}
.card.dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.card.dark .ic{background:rgba(255,255,255,.1);color:var(--pink)}
.card.dark p{color:rgba(252,251,249,.72)}
.card .tagline{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-deep);font-weight:600}

/* ===== STEPS ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.step{position:relative;padding-top:2rem}
.step .n{font-family:var(--disp);font-size:1rem;font-weight:600;color:#fff;background:var(--ink);width:34px;height:34px;
  border-radius:50%;display:grid;place-items:center;margin-bottom:1.1rem}
.step h3{font-size:1.3rem;font-weight:600;margin-bottom:.5rem}
.step p{font-size:.94rem;color:var(--ink-2)}

/* ===== GALLERY ===== */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;grid-auto-rows:200px}
.gallery .frame{aspect-ratio:auto;height:100%}
.gallery .tall{grid-row:span 2}
.gallery .frame:nth-child(3n+2){background:linear-gradient(150deg,#39332c,#221e19)}
.gallery .frame:nth-child(3n+2) .ph{color:rgba(255,255,255,.55)}

/* ===== REVIEWS ===== */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.review{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:2.2rem;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.review .stars{color:var(--pink-deep);letter-spacing:.2em;font-size:.85rem;margin-bottom:1.1rem}
.review p{font-size:1.12rem;color:var(--ink);line-height:1.5;margin-bottom:1.4rem;flex-grow:1;font-weight:450}
.review .who{display:flex;align-items:center;gap:.8rem}
.review .av{width:40px;height:40px;border-radius:50%;background:var(--pink-bg);color:var(--pink-deep);
  display:grid;place-items:center;font-weight:600;font-family:var(--disp)}
.review .who b{font-size:.92rem;font-weight:600;display:block}
.review .who span{font-size:.78rem;color:var(--muted)}

/* ===== FINDER ===== */
.finder{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow);max-width:760px;margin:0 auto}
.finder-head{padding:1.6rem 2rem;background:var(--ink);color:var(--bg);display:flex;align-items:center;
  justify-content:space-between;gap:1rem}
.finder-head .eyebrow{color:var(--pink);margin:0}.finder-head .eyebrow::before{background:var(--pink)}
.finder-head .hint{font-size:.74rem;letter-spacing:.04em;color:rgba(252,251,249,.6)}
.finder-step{padding:2.2rem;display:none}.finder-step.active{display:block}
.finder-step .q{font-family:var(--disp);font-size:1.5rem;font-weight:600;margin-bottom:1.4rem;letter-spacing:-.02em}
.finder-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem}
.finder-opt{padding:1.05rem 1.2rem;border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;
  font-size:.96rem;font-family:var(--sans);color:var(--ink);background:var(--bg);text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;transition:all .3s var(--ease);font-weight:450}
.finder-opt:hover{border-color:var(--ink);background:var(--card);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.finder-opt .a{color:var(--pink-deep);opacity:0;transition:opacity .3s}.finder-opt:hover .a{opacity:1}
.finder-result{padding:2.2rem;display:none}.finder-result.active{display:block}
.finder-result .rec{font-family:var(--disp);font-size:1.9rem;font-weight:600;margin:.4rem 0 .7rem;letter-spacing:-.02em}
.finder-result .rec .serif-it{color:var(--pink-deep)}
.finder-result .rec-desc{color:var(--ink-2);margin-bottom:1.6rem;max-width:54ch}
.finder-result .row{display:flex;gap:.9rem;flex-wrap:wrap}
.finder-back{font-size:.78rem;color:var(--muted);cursor:pointer;background:none;border:none;font-family:var(--sans);
  margin-top:1.3rem;display:inline-flex;gap:.4em}.finder-back:hover{color:var(--pink-deep)}

/* ===== FAQ ===== */
.faq{border-bottom:1px solid var(--line);cursor:pointer}
.faq-q{display:flex;justify-content:space-between;gap:2rem;align-items:center;padding:1.5rem 0;
  font-family:var(--disp);font-size:1.25rem;font-weight:600;letter-spacing:-.015em}
.faq-q .pm{flex-shrink:0;width:24px;height:24px;position:relative}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--pink-deep);transition:.4s var(--ease)}
.faq-q .pm::before{top:50%;left:0;right:0;height:2px;transform:translateY(-50%)}
.faq-q .pm::after{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%)}
.faq.open .pm::after{transform:translateX(-50%) scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a p{padding-bottom:1.5rem;color:var(--ink-2);font-size:1rem;max-width:680px}

/* ===== CTA BAND ===== */
.cta-band{background:var(--ink);color:var(--bg);border-radius:var(--r-xl);padding:clamp(3rem,6vw,5.5rem);
  text-align:center;position:relative;overflow:hidden;margin-inline:var(--gut)}
.cta-band .glow{position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(231,182,189,.22),transparent 64%);top:-40%;left:50%;transform:translateX(-50%)}
.cta-band .in{position:relative;z-index:2}
.cta-band h2{font-size:clamp(2.2rem,5vw,4rem);font-weight:600;margin-bottom:1.2rem;letter-spacing:-.03em}
.cta-band p{font-size:1.1rem;color:rgba(252,251,249,.72);max-width:480px;margin:0 auto 2.2rem}
.cta-row{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.cta-band .phone{margin-top:2rem;font-size:1rem;color:rgba(252,251,249,.7)}
.cta-band .phone a{color:#fff;border-bottom:1px solid var(--pink)}

/* ===== FOOTER ===== */
footer{background:var(--ink);color:var(--bg);padding:4.5rem 0 2.2rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem;padding-bottom:3rem;
  border-bottom:1px solid rgba(252,251,249,.12)}
.foot-brand .brand{font-size:1.9rem}.foot-brand .brand small{color:rgba(252,251,249,.5)}
.foot-brand p{font-size:.9rem;color:rgba(252,251,249,.55);max-width:280px;margin-top:1.1rem}
.foot-col h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink);margin-bottom:1.2rem;font-weight:600}
.foot-col a,.foot-col p{display:block;font-size:.92rem;color:rgba(252,251,249,.7);margin-bottom:.75rem;transition:color .3s}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:1.8rem;flex-wrap:wrap;gap:1rem}
.foot-bottom p{font-size:.76rem;color:rgba(252,251,249,.4)}
.foot-social{display:flex;gap:1.3rem}
.foot-social a{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(252,251,249,.6)}
.foot-social a:hover{color:var(--pink)}

/* sticky mobile cta */
.sticky-cta{position:fixed;inset:auto 0 0 0;z-index:180;display:none;grid-template-columns:1fr 1fr;gap:.6rem;
  background:rgba(252,251,249,.92);backdrop-filter:blur(12px);padding:.7rem;box-shadow:0 -6px 24px rgba(40,26,16,.1)}
.sticky-cta a{text-align:center;padding:1em;border-radius:100px;font-size:.86rem;font-weight:600}
.sticky-cta .call{color:var(--ink);border:1.5px solid var(--line)}
.sticky-cta .book{background:var(--ink);color:var(--bg)}

/* interior page hero */
.phero{padding:9.5rem var(--gut) clamp(2.5rem,5vw,4rem);text-align:center;position:relative;overflow:hidden}
.phero .blob{position:absolute;width:min(680px,90vw);height:460px;border-radius:50%;left:50%;top:-6%;
  transform:translateX(-50%);background:radial-gradient(circle,var(--pink-bg),transparent 66%);z-index:0}
.phero .in{position:relative;z-index:1;max-width:760px;margin:0 auto}
.phero h1{font-size:clamp(2.5rem,5.6vw,4.6rem);font-weight:600;margin:1.2rem 0 1.2rem;letter-spacing:-.03em}
.phero p{font-size:1.15rem;color:var(--ink-2);max-width:560px;margin:0 auto}
.crumbs{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}

/* reveal */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* prose */
.prose h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:600;margin:2.4rem 0 1rem;letter-spacing:-.02em}
.prose p{font-size:1.05rem;color:var(--ink-2);margin-bottom:1.1rem;max-width:68ch}

/* ===== RESPONSIVE ===== */
@media(max-width:1000px){
  .stats{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .reviews{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .steps{grid-template-columns:1fr 1fr;gap:2rem 1.2rem}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:780px){
  .nav-links{position:fixed;inset:0;height:100dvh;width:100%;background:var(--bg);display:flex;
    flex-direction:column;justify-content:center;align-items:center;gap:1.6rem;padding:2rem;
    transform:translateX(100%);transition:transform .45s var(--ease);z-index:205}
  .nav-links.open{transform:none}
  .nav-links a{font-size:1.45rem;color:var(--ink);font-weight:500}
  .nav-links .nav-mobile-book{color:var(--bg);background:var(--ink);border-color:var(--ink)}
  .burger{display:flex}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-right .nav-phone,.nav-right .btn{display:none}
  .paths{grid-template-columns:1fr}.path{min-height:380px}
  .split{grid-template-columns:1fr;gap:2.2rem}.split.flip .split-media{order:0}
  .split-media{max-width:460px;margin-inline:auto}
  .cards{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:2.2rem}
  .sticky-cta{display:none}
  body{padding-bottom:0}
  .cta-band{margin-inline:0;border-radius:0}
}
@media(max-width:480px){
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
  .stats{gap:.8rem}.trust-row{gap:1.2rem}.trust-sep{display:none}
}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}

/* ============================================================
   POLISH PASS  —  richer depth, motion, proof, custom icons
   ============================================================ */

/* soften flat panels into subtle warm gradients for depth */
.bg-2{background:linear-gradient(180deg,#F6F3EE,#F1EDE6)}
.hero{background:linear-gradient(180deg,#FFFDFB,var(--bg))}

/* custom icon system */
.ic svg{width:23px;height:23px;display:block}
.ic{transition:transform .4s var(--ease),background .4s var(--ease)}
.card:hover .ic{transform:scale(1.06) rotate(-3deg)}

/* hero social-proof chip */
.hero-proof{display:inline-flex;align-items:center;gap:.85rem;margin-top:2rem;
  padding:.55rem 1.1rem .55rem .65rem;border:1px solid var(--line);border-radius:100px;
  background:var(--card);box-shadow:var(--shadow-sm)}
.avatars{display:flex}
.avatars span{width:32px;height:32px;border-radius:50%;border:2px solid var(--card);margin-left:-11px;
  display:grid;place-items:center;font-size:.74rem;font-weight:600;color:#fff;font-family:var(--disp)}
.avatars span:first-child{margin-left:0}
.avatars .a1{background:linear-gradient(135deg,#caa2a6,#9c7077)}
.avatars .a2{background:linear-gradient(135deg,#7d6f63,#4c463f)}
.avatars .a3{background:linear-gradient(135deg,#d8b8bc,#b98792)}
.avatars .a4{background:linear-gradient(135deg,#3a342d,#1c1814)}
.hero-proof .txt{text-align:left;font-size:.82rem;color:var(--muted);line-height:1.25}
.hero-proof .txt .stars{color:var(--pink-deep);letter-spacing:.08em;font-size:.8rem}
.hero-proof .txt b{color:var(--ink);font-weight:600}

/* CTA reassurance note */
.cta-note{display:flex;gap:.7rem;justify-content:center;align-items:center;flex-wrap:wrap;
  margin-top:1.1rem;font-size:.82rem;color:var(--muted)}
.cta-note .d{width:3px;height:3px;border-radius:50%;background:var(--pink-deep);opacity:.7}
.cta-band .cta-note{color:rgba(252,251,249,.6)}
.cta-band .cta-note .d{background:var(--pink)}

/* refined placeholder frames (intentional, not flat) */
.frame .ph::before{content:"";display:block;width:30px;height:30px;margin:0 auto .8rem;opacity:.5;
  background:currentColor;-webkit-mask:center/contain no-repeat var(--ph-ic);mask:center/contain no-repeat var(--ph-ic)}
.frame .ph{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M3 17l5-4 4 3 3-2 6 4'/%3E%3C/svg%3E")}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-100%);animation:sheen 6s var(--ease) infinite;pointer-events:none}
.frame.photo::after{display:none}
@keyframes sheen{0%,100%{transform:translateX(-100%)}40%,60%{transform:translateX(100%)}}

/* reveal: add a touch of blur for a softer, more premium settle */
.js .reveal{filter:blur(6px)}.reveal.in{filter:blur(0)}
@media(prefers-reduced-motion:reduce){.reveal{filter:none!important}}

/* urgency pill */
.urgency{display:inline-flex;align-items:center;gap:.5em;font-size:.74rem;font-weight:600;
  color:var(--pink-deep);margin-bottom:.4rem}
.urgency .pulse{width:7px;height:7px;border-radius:50%;background:var(--pink-deep);
  box-shadow:0 0 0 0 rgba(194,114,126,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(194,114,126,.5)}70%{box-shadow:0 0 0 8px rgba(194,114,126,0)}100%{box-shadow:0 0 0 0 rgba(194,114,126,0)}}

/* ============================================================
   MOBILE-FIRST + FIXES PASS  (95% of traffic is mobile)
   ============================================================ */

/* Artist section: photo no longer oversized, copy gets room */
.frame.photo{max-width:420px;margin-inline:auto;width:100%}
.split.artist{grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,5rem)}
.split.artist .split-copy{max-width:540px}

/* Visual quiz options: icon + label, big tap targets */
.finder-opt{display:flex;align-items:center;gap:.95rem;justify-content:flex-start;
  padding:1.1rem 1.2rem;min-height:68px;font-weight:500}
.finder-opt .fic{width:42px;height:42px;border-radius:12px;background:var(--pink-bg);
  color:var(--pink-deep);display:grid;place-items:center;flex-shrink:0;transition:background .3s var(--ease)}
.finder-opt .fic svg{width:23px;height:23px}
.finder-opt .lbl{flex:1;text-align:left;line-height:1.25}
.finder-opt:hover .fic{background:var(--pink);color:#fff}
.finder-opts.two{grid-template-columns:1fr 1fr}
.finder-back{font-weight:500}

/* book button inside mobile menu */
.nav-mobile-book{display:none}

@media(max-width:780px){
  /* tighter, taller-impact mobile rhythm */
  .hero{padding:6.5rem var(--gut) 2.5rem}
  .phero{padding:7rem var(--gut) 2rem}
  .hero h1{font-size:clamp(2.4rem,9vw,3.2rem)}
  .phero h1{font-size:clamp(2.2rem,8.5vw,3rem)}
  .hero .sub,.phero p{font-size:1.05rem}
  /* full-width, stacked CTAs convert better on phones */
  .hero-cta,.cta-row{flex-direction:column;width:100%;align-items:stretch}
  .hero-cta .btn,.cta-row .btn{width:100%}
  .hero-proof{margin-top:1.6rem}
  /* artist: photo contained, copy below with room */
  .split.artist{grid-template-columns:1fr;gap:2rem}
  .frame.photo{max-width:360px}
  .cards.two-up{grid-template-columns:1fr}
  .split.artist .split-copy{text-align:left}
  /* quiz: one clear column, large targets */
  .finder-opts,.finder-opts.two{grid-template-columns:1fr}
  .finder-head{padding:1.3rem 1.4rem}
  .finder-step,.finder-result{padding:1.5rem 1.4rem}
  .finder-step .q{font-size:1.3rem}
  /* show Book inside the slide-in menu */
  .nav-mobile-book{display:inline-flex;width:auto;margin-top:.8rem}
  /* calmer section spacing */
  .sec{padding-block:clamp(3.2rem,11vw,5rem)}
  .sec-head{margin-bottom:1.8rem}
  .cards{gap:.9rem}
  .stat{padding:1.6rem 1rem}
}
@media(max-width:480px){
  .cta-note{font-size:.78rem;gap:.5rem}
  .hero-proof{padding:.5rem .9rem .5rem .55rem;gap:.7rem}
  .hero-proof .avatars span{width:28px;height:28px}
  .review p{font-size:1.05rem}
}