/* =====================================================================
   ASN AESTHETICS — luxury medical aesthetics clinic
   Brand colours extracted from the booklet logo: olive #595841 + beige #d4c7b3
   Light airy medical-luxury theme with dark olive feature bands.
   Fonts: Cormorant Garamond (display) · Jost (UI/body)
   ===================================================================== */
:root{
  --olive:#595841; --olive-d:#45452f; --olive-l:#6d6c51;
  --beige:#d4c7b3; --sand:#c7b9a0; --gold:#a9986f;
  /* sampled from the clinic's own lamps across 8 interior photos: #F3C790 */
  --lume:243,199,144;
  --cream:#f7f3ea; --cream-2:#efe9dc; --white:#fffdf8;
  --ink:#33321f; --muted:#7c7a66;
  --line:rgba(89,88,65,.14); --line-d:rgba(212,199,179,.16);
  --radius:20px; --shadow:0 24px 60px rgba(69,69,47,.14); --shadow-sm:0 10px 30px rgba(69,69,47,.10);
  --maxw:1220px; --ease:cubic-bezier(.16,.84,.34,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Jost',system-ui,Arial,sans-serif;background:var(--cream);color:var(--ink);
  line-height:1.75;overflow-x:hidden;letter-spacing:.2px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.12;color:var(--olive);letter-spacing:.4px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.center{text-align:center}
.gold{color:var(--gold)}
/* trimmed from 104px — with a doubling rule below for neighbours that
   share a background, which was creating 200px+ of dead space */
.section{padding:74px 0;content-visibility:auto;contain-intrinsic-size:auto 620px}
/* the first screens must always paint immediately */
.hero,.page-banner,.section.promo-band{content-visibility:visible}
.soft + .soft,.section + .section.soft.tight{padding-top:0}
.band + .band{padding-top:0}
.band{background:linear-gradient(160deg,#5f5e46,var(--olive) 60%,var(--olive-d));color:var(--cream)}
.band h1,.band h2,.band h3,.band h4{color:#fff}
.soft{background:var(--cream-2)}

/* ---- shared bits ---- */
.tag{display:inline-flex;align-items:center;gap:10px;color:var(--gold);letter-spacing:.32em;text-transform:uppercase;font-size:11.5px;font-weight:500}
.tag::before{content:"";width:26px;height:1px;background:var(--gold)}
.tag.mx::after{content:"";width:26px;height:1px;background:var(--gold)}
.band .tag{color:var(--beige)}.band .tag::before,.band .tag.mx::after{background:var(--beige)}
.sec-title{font-size:clamp(32px,4.6vw,54px);margin:8px 0}
.sec-sub{color:var(--muted);max-width:640px;margin:0 auto;font-size:16.5px}
.band .sec-sub{color:#d9d4c4}
.divider{width:64px;height:2px;background:var(--gold);margin:16px 0 22px}
.divider.mx{margin-left:auto;margin-right:auto}
.band .divider{background:var(--beige)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;justify-content:center;padding:15px 30px;border-radius:999px;
  font-weight:500;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .35s var(--ease),background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);font-family:'Jost',sans-serif}
.btn-primary{background:var(--olive);color:var(--cream);box-shadow:0 12px 30px rgba(89,88,65,.28)}
.btn-primary:hover{background:var(--olive-d);transform:translateY(-3px);box-shadow:0 18px 40px rgba(89,88,65,.36)}
.btn-ghost{background:transparent;color:var(--olive);border-color:var(--olive)}
.btn-ghost:hover{background:var(--olive);color:var(--cream);transform:translateY(-3px)}
.band .btn-primary,.hero .btn-primary,.page-banner .btn-primary{background:var(--beige);color:var(--olive-d);box-shadow:0 14px 34px rgba(0,0,0,.30)}
.band .btn-primary:hover,.hero .btn-primary:hover,.page-banner .btn-primary:hover{background:rgba(var(--lume),1);color:var(--olive-d)}
.band .btn-ghost,.hero .btn-ghost,.page-banner .btn-ghost{color:#fff;border-color:rgba(212,199,179,.8);background:rgba(255,255,255,.06)}
.band .btn-ghost:hover,.hero .btn-ghost:hover,.page-banner .btn-ghost:hover{background:var(--beige);color:var(--olive-d);border-color:var(--beige)}
.btn-wa{background:#25d366;color:#fff}.btn-wa:hover{background:#1fb457;transform:translateY(-3px)}

/* ===================================================================== */
/* HEADER (dark olive bar so the logo blends)                            */
/* ===================================================================== */
.topbar{background:var(--olive-d);color:#d9d4c4;font-size:12.5px;letter-spacing:.03em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:14px}
.topbar a:hover{color:var(--beige)} .topbar .tb-right{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
header.nav{position:sticky;top:0;z-index:70;background:rgba(69,69,47,.985);
  border-bottom:1px solid var(--line-d);transition:transform .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),opacity .4s var(--ease)}
header.nav.scrolled{background:rgba(60,60,40,.99);box-shadow:0 12px 40px rgba(0,0,0,.28)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:46px;width:auto;object-fit:contain}
.brand .bt{font-family:'Cormorant Garamond',serif;font-size:23px;letter-spacing:3px;color:var(--beige);font-weight:600;line-height:1}
.brand .bt small{display:block;font-family:'Jost',sans-serif;font-size:8.5px;letter-spacing:.34em;color:#b5b09c;margin-top:2px}
.menu{display:flex;align-items:center;gap:30px}
.menu>a,.menu .has-dd>a{font-size:12.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:#e7e2d3;position:relative;padding:8px 0;display:inline-flex;align-items:center;gap:5px}
.menu>a::after,.menu .has-dd>a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--beige);transition:transform .35s var(--ease),background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),opacity .35s var(--ease)}
.menu>a:hover,.menu .has-dd>a:hover,.menu a.active{color:var(--beige)}
.menu>a:hover::after,.menu a.active::after,.menu .has-dd:hover>a::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:12px}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.hamburger span{width:26px;height:2px;background:var(--beige);transition:transform .3s,background-color .3s,color .3s,border-color .3s,box-shadow .3s,opacity .3s}

/* ---- SERVICES MEGA MENU ---------------------------------------------
   Full header-width panel. `.has-dd` goes static so the panel can span
   `.nav-inner`; the hover bridge lives on the panel itself instead. */
.has-dd{position:static}
.nav-inner{position:relative}
.has-dd .cv{font-size:9px;transition:transform .35s var(--ease)}
.has-dd:hover .cv{transform:rotate(180deg)}

.mega{position:absolute;top:calc(100% + 15px);left:0;right:0;z-index:80;
  background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 40px 90px rgba(38,38,26,.30),0 2px 0 rgba(255,255,255,.5) inset;
  opacity:0;visibility:hidden;transform:translateY(-14px) scale(.985);transform-origin:top center;
  transition:opacity .34s var(--ease),transform .46s cubic-bezier(.19,.9,.26,1),visibility .34s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.has-dd:hover .mega,.has-dd:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

/* a gold hairline that draws across the top as the panel settles */
.mega-line{position:absolute;top:0;left:0;right:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(var(--lume),.9) 22%,var(--gold) 50%,rgba(var(--lume),.9) 78%,transparent);
  transform:scaleX(0);transform-origin:center;
  transition:transform .8s cubic-bezier(.19,.9,.26,1) .1s}
.has-dd:hover .mega-line,.has-dd:focus-within .mega-line{transform:scaleX(1)}

/* the clinic lamp, inside the menu */
.mega-lume{position:absolute;inset:-20%;pointer-events:none;z-index:0;
  background:radial-gradient(460px 240px at 24% -6%,rgba(var(--lume),.30),transparent 68%),
             radial-gradient(380px 220px at 72% 106%,rgba(var(--lume),.18),transparent 70%);
  opacity:0;transition:opacity .7s ease .12s;
  animation:lumeDrift 24s ease-in-out infinite;animation-play-state:paused}
.has-dd:hover .mega-lume,.has-dd:focus-within .mega-lume{animation-play-state:running}
.has-dd:hover .mega-lume,.has-dd:focus-within .mega-lume{opacity:1}

.mega-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr 1fr 318px;padding:14px 14px 6px}

.mega-col{position:relative;padding:20px 20px 14px}
/* a hairline that fades out at both ends rather than a hard rule */
.mega-col::after{content:"";position:absolute;right:0;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
/* everything inside lifts in on a stagger: column index × item index */
.mega-h,.mega-col a,.mega-feat{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .55s cubic-bezier(.19,.9,.26,1),
             background-color .28s,border-color .28s}
.has-dd:hover .mega-h,.has-dd:hover .mega-col a,.has-dd:hover .mega-feat,
.has-dd:focus-within .mega-h,.has-dd:focus-within .mega-col a,.has-dd:focus-within .mega-feat{
  opacity:1;transform:translateY(0);
  transition-delay:calc(90ms + (var(--c,0) * 55ms) + (var(--i,0) * 45ms))}

.mega-h{display:block;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  font-weight:500;margin-bottom:14px;padding-left:13px}
.mega-col a{display:block;position:relative;padding:12px 13px;border-radius:11px;color:var(--ink)}
.mega-col a::after{display:none}
.mega-col a::before{content:"";position:absolute;left:0;top:50%;width:3px;height:26px;
  background:linear-gradient(180deg,rgba(var(--lume),1),var(--gold));border-radius:3px;
  transform:translateY(-50%) scaleY(0);transition:transform .34s var(--ease)}
.mega-col a:hover{background:linear-gradient(90deg,rgba(var(--lume),.16),rgba(var(--lume),.04))}
.mega-col a:hover::before{transform:translateY(-50%) scaleY(1)}
.mega-col a b{display:block;font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--olive-d);
  font-weight:600;line-height:1.2;transition:transform .35s var(--ease)}
.mega-col a:hover b{transform:translateX(5px)}
.mega-col a span{display:block;font-size:11.5px;color:var(--muted);letter-spacing:.02em;text-transform:none;
  margin-top:3px;transition:transform .35s var(--ease) .03s}
.mega-col a:hover span{transform:translateX(5px)}

/* featured panel */
.mega-feat{position:relative;border-radius:15px;overflow:hidden;display:block;min-height:250px;margin:12px}
.mega-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.19,.9,.26,1)}
.mega-feat:hover img{transform:scale(1.09)}
.mega-feat::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(24,24,16,.97) 8%,rgba(24,24,16,.80) 38%,rgba(24,24,16,.34) 66%,rgba(var(--lume),.14))}
/* a slow light sweeping over the glass, like a lamp passing */
.mega-feat::before{content:"";position:absolute;top:-60%;bottom:-60%;left:-30%;width:28%;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(var(--lume),.30),transparent);
  transform:translateX(0) rotate(14deg);opacity:0;pointer-events:none}
.has-dd:hover .mega-feat::before{animation:megaSheen 1.5s cubic-bezier(.3,.7,.4,1) .55s}
@keyframes megaSheen{
  0%{opacity:0;transform:translateX(0) rotate(14deg)}
  18%{opacity:1}
  100%{opacity:0;transform:translateX(560%) rotate(14deg)}
}
.mega-feat-body{position:relative;z-index:4;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;padding:24px}
.mega-feat-body em{font-style:normal;font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(var(--lume),1)}
.mega-feat-body b{font-family:'Cormorant Garamond',serif;font-size:26px;color:#fff;font-weight:600;
  line-height:1.15;margin-top:8px}
.mega-feat-body>span{font-size:11.5px;color:#d9d3c2;margin-top:6px}
.mega-feat-body i{display:inline-flex;align-items:center;gap:8px;font-style:normal;font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(var(--lume),1);margin-top:15px}
.mega-feat-body i svg{width:15px;height:15px;transition:transform .38s var(--ease)}
.mega-feat:hover i svg{transform:translateX(6px)}

html.dark .mega{background:#1a1a13;box-shadow:0 40px 90px rgba(0,0,0,.6)}
html.dark .mega-col a:hover{background:linear-gradient(90deg,rgba(var(--lume),.13),rgba(var(--lume),.03))}
html.dark .mega-col a b{color:#e8dabb}
html.dark .mega-col a:hover{background:rgba(212,199,179,.08)}

@media(max-width:1200px){
  .mega-in{grid-template-columns:1fr 1fr 1fr}
  .mega-feat{display:none}
  .mega-col:last-of-type{border-right:0}
}
@media(prefers-reduced-motion:reduce){
  .mega{transition:opacity .15s linear!important;transform:none!important}
  .mega-h,.mega-col a,.mega-feat{opacity:1!important;transform:none!important;transition:none!important}
  .mega-line{transform:scaleX(1)!important;transition:none!important}
  .mega-lume{animation:none!important}
  .has-dd:hover .mega-feat::before{animation:none!important}
  .mega-feat img{transition:none!important}
}

/* ===================================================================== */
/* HERO                                                                  */
/* ===================================================================== */
/* the hero is sized to the screen minus the header, so it always lands
   fully in view instead of being clipped on shorter laptops */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:calc(100svh - var(--chrome,124px));
  background:linear-gradient(160deg,#605f47,var(--olive) 55%,var(--olive-d));color:var(--cream)}
@supports not (height:100svh){.hero{min-height:calc(100vh - var(--chrome,124px))}}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 460px at 82% 20%,rgba(212,199,179,.18),transparent 60%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
  padding:clamp(40px,5.5vh,78px) 24px;width:100%;max-width:var(--maxw);margin:0 auto}
.hero h1{font-size:clamp(44px,6.4vw,84px);color:#fff;margin:12px 0 18px;font-weight:600;letter-spacing:1px}
.hero h1 em{font-style:italic;color:var(--beige)}
.hero p{font-size:clamp(16px,1.9vw,19px);color:#e2ddce;max-width:520px;margin-bottom:30px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;margin-top:34px;flex-wrap:wrap}
.hero-stats b{font-family:'Cormorant Garamond',serif;font-size:34px;color:var(--beige);display:block;line-height:1}
.hero-stats span{font-size:12px;color:#c7c2b1;letter-spacing:.05em}
.hero-visual{position:relative}
.hero-visual .glass{background:rgba(255,253,248,.08);border:1px solid rgba(212,199,179,.28);border-radius:24px;
  padding:30px;box-shadow:var(--shadow)}
.hero-visual .glass img{border-radius:16px;height:420px;width:100%;object-fit:cover}
/* glass trust chips that sit over the arch, not under it */
.floaty{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;
  padding:12px 20px 12px 12px;border-radius:999px;
  background:rgba(255,253,248,.96);
  border:1px solid rgba(255,255,255,.65);color:var(--ink);
  box-shadow:0 18px 42px rgba(28,28,19,.34),0 0 30px rgba(var(--lume),.30);
  animation:floaty 4s ease-in-out infinite;white-space:nowrap}
.floaty .ic{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  color:var(--cream);background:linear-gradient(150deg,var(--olive-l),var(--olive-d));
  box-shadow:0 6px 14px rgba(69,69,47,.34)}
.floaty>div{display:flex;flex-direction:column;gap:2px}
.floaty b{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--olive-d);line-height:1.1;font-weight:600}
.floaty span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);line-height:1}
.floaty.f1{top:14%;left:-26px}
.floaty.f2{bottom:16%;right:-26px;animation-delay:1.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ===================================================================== */
/* CARDS / GRIDS                                                         */
/* ===================================================================== */
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;
  transition:transform .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),opacity .4s var(--ease);box-shadow:var(--shadow-sm)}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--sand)}
.card .ic{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--cream-2);color:var(--olive);transition:transform .4s,background-color .4s,color .4s,border-color .4s,box-shadow .4s,opacity .4s}
.card:hover .ic{background:var(--olive);color:var(--beige)}
.card h3{font-size:25px;margin-bottom:8px}
.card p{color:var(--muted);font-size:14.5px;margin-bottom:16px}
.card .lnk{color:var(--olive);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center}
.card:hover .lnk{gap:14px;color:var(--gold)}

/* image service card */

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),background-color .7s var(--ease),color .7s var(--ease),border-color .7s var(--ease),box-shadow .7s var(--ease),opacity .7s var(--ease)}
.frame:hover img{transform:scale(1.05)}
.flist{margin-top:24px;display:grid;gap:16px}
.flist li{display:flex;gap:15px;align-items:flex-start}
.flist .fi{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--cream-2);color:var(--olive)}
.band .flist .fi{background:rgba(212,199,179,.16);color:var(--beige)}
.flist b{display:block;font-family:'Cormorant Garamond',serif;font-size:21px;color:var(--olive)}
.band .flist b{color:#fff}
.flist span{color:var(--muted);font-size:14px}.band .flist span{color:#d0cbba}

/* ---- pricing (treatment menu) ---- */
.menu-wrap{max-width:860px;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm)}
.menu-head{background:var(--olive);color:var(--beige);padding:18px 28px;display:flex;justify-content:space-between;align-items:center;
  font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.menu-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:20px 28px;border-bottom:1px solid var(--line);transition:transform .2s,background-color .2s,color .2s,border-color .2s,box-shadow .2s,opacity .2s}
.menu-row:last-child{border-bottom:0}.menu-row:hover{background:var(--cream-2)}
.menu-row .mn b{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--olive);font-weight:600;display:block}
.menu-row .mn small{color:var(--muted);font-size:12.5px;letter-spacing:.02em}
.menu-row .amt{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold);white-space:nowrap;text-align:right;font-weight:600}
.menu-row .amt span{display:block;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---- deals ---- */
.deal{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),opacity .4s var(--ease)}
.deal:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.deal .ribbon{position:absolute;top:18px;right:-38px;background:var(--olive);color:var(--beige);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 44px;transform:rotate(45deg)}
.deal .no{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:16px;letter-spacing:.2em}
.deal h3{font-size:26px;margin:4px 0 10px}
.deal p{color:var(--muted);font-size:14px;margin-bottom:18px}
.deal .price{font-family:'Cormorant Garamond',serif;font-size:40px;color:var(--olive);line-height:1}
.deal .price small{font-family:'Jost',sans-serif;font-size:12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}

/* testimonials */
.tcard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-sm);transition:transform .4s,background-color .4s,color .4s,border-color .4s,box-shadow .4s,opacity .4s}
.tcard:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.tcard .q{font-family:'Cormorant Garamond',serif;font-size:56px;color:var(--sand);line-height:.4;height:26px}
.tcard .stars{color:var(--gold);letter-spacing:4px;margin:6px 0 12px}
.tcard p{font-style:italic;color:#4a4936;margin-bottom:18px}
.tcard .who{display:flex;align-items:center;gap:13px}
.tcard .who .av{width:48px;height:48px;border-radius:50%;background:var(--olive);color:var(--beige);display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600}
.tcard .who b{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--olive)}
.tcard .who span{font-size:12.5px;color:var(--muted)}

/* stat counters */
.stat b{font-family:'Cormorant Garamond',serif;font-size:clamp(40px,5vw,64px);color:var(--beige);line-height:1;display:block}
.stat span{color:#d0cbba;font-size:13px;letter-spacing:.06em}

/* page banner */
.page-banner{padding:104px 0 66px;text-align:center;position:relative;
  background:linear-gradient(160deg,#605f47,var(--olive) 55%,var(--olive-d));color:var(--cream)}
.page-banner h1{color:#fff;font-size:clamp(42px,6vw,74px)}
.crumbs{color:#cdc8b7;font-size:13px;margin-top:12px;letter-spacing:.04em}.crumbs a:hover{color:var(--beige)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery a{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),background-color .7s var(--ease),color .7s var(--ease),border-color .7s var(--ease),box-shadow .7s var(--ease),opacity .7s var(--ease)}
.gallery a::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:var(--beige);font-size:24px;background:rgba(69,69,47,.55);opacity:0;transition:transform .4s,background-color .4s,color .4s,border-color .4s,box-shadow .4s,opacity .4s}
.gallery a:hover img{transform:scale(1.12)}.gallery a:hover::after{opacity:1}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;background:var(--white);border:1px solid var(--line);border-radius:12px;color:var(--ink);font-family:'Jost',sans-serif;font-size:15px;transition:transform .2s,background-color .2s,color .2s,border-color .2s,box-shadow .2s,opacity .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--olive);box-shadow:0 0 0 3px rgba(89,88,65,.12)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.info-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
.info-card .ir{display:flex;gap:15px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.info-card .ir:last-child{border-bottom:0}
.info-card .ir .ii{width:46px;height:46px;border-radius:50%;background:var(--cream-2);color:var(--olive);display:grid;place-items:center;flex:0 0 auto}
.info-card .ir b{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--olive)}
.info-card .ir a,.info-card .ir span{color:var(--muted);font-size:14px}
.map-frame{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;line-height:0;box-shadow:var(--shadow-sm)}
.map-frame iframe{width:100%;height:360px;border:0}

/* faq / accordion */
.acc{max-width:860px;margin:0 auto}
.acc-item{background:var(--white);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.acc-q{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--olive);font-weight:600}
.acc-q .pl{transition:transform .3s,background-color .3s,color .3s,border-color .3s,box-shadow .3s,opacity .3s;color:var(--gold);font-size:24px;flex:0 0 auto}
.acc-item.open .acc-q .pl{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);padding:0 24px}
.acc-item.open .acc-a{max-height:260px;padding-bottom:22px}
.acc-a p{color:var(--muted);font-size:15px}

/* blog cards */

/* footer */
footer.ft{background:linear-gradient(180deg,var(--olive-d),#3a3a28);color:#cfcab9;padding:62px 0 0}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:38px}
.ft h4{color:#fff;font-family:'Cormorant Garamond',serif;font-size:22px;margin-bottom:18px}
.ft p{color:#b9b4a2;font-size:14px;margin-top:16px;max-width:300px}
.ft ul li{margin-bottom:11px}.ft ul a{color:#c3beac;font-size:14px}.ft ul a{display:inline-block;transition:color .25s,transform .25s var(--ease)}
.ft ul a:hover{color:var(--beige);transform:translateX(5px)}
.ft .fc div{display:flex;gap:11px;font-size:14px;margin-bottom:12px;color:#c3beac}.ft .fc .gold{color:var(--beige)}
.ft .socials{display:flex;gap:11px;margin-top:18px}
.ft .socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(212,199,179,.25);display:grid;place-items:center;color:var(--beige);transition:transform .25s,background-color .25s,color .25s,border-color .25s,box-shadow .25s,opacity .25s}
.ft .socials a:hover{background:var(--beige);color:var(--olive-d);transform:translateY(-3px)}
.ft-bottom{border-top:1px solid rgba(212,199,179,.14);margin-top:38px;padding:22px 0;text-align:center;font-size:13px;color:#a7a291}
.ft-bottom .gold{color:var(--beige)}

/* floating actions + mobile bar */
.fabs{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:12px}
.fab{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.3);transition:transform .3s var(--ease),background-color .3s;border:0;cursor:pointer;position:relative}
.fab.wa{background:#25d366;color:#fff}.fab.wa::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:ping 1.8s infinite}
.fab.call{background:var(--olive);color:var(--beige)}
.fab:hover{transform:scale(1.1)}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.mbar{display:none}

/* scroll reveal */
[data-anim]{opacity:0;transition:transform .85s var(--ease),background-color .85s var(--ease),color .85s var(--ease),border-color .85s var(--ease),box-shadow .85s var(--ease),opacity .85s var(--ease)}
[data-anim="up"]{transform:translateY(38px)}
[data-anim="left"]{transform:translateX(-46px)}
[data-anim="right"]{transform:translateX(46px)}
[data-anim="zoom"]{transform:scale(.93)}
[data-anim].in{opacity:1;transform:none}

/* ===================================================================== */
/* RESPONSIVE                                                            */
/* ===================================================================== */
@media(max-width:1024px){
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{max-width:460px;margin:0 auto}
  .grid-4{grid-template-columns:repeat(2,1fr)}.ft-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .hero{--chrome:84px}
  .section{padding:56px 0}
  .hero-visual .glass{padding:18px}
  .hero-visual .glass img{height:320px}
  .hero-grid{gap:30px}
  .topbar{display:none}
  .menu{position:fixed;inset:78px 0 auto 0;background:var(--olive-d);flex-direction:column;gap:0;padding:8px 0;
    border-bottom:1px solid var(--line-d);transform:translateY(-135%);transition:transform .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),opacity .4s var(--ease);max-height:82vh;overflow:auto}
  .menu.open{transform:none}
  .menu>a,.menu .has-dd>a{padding:15px 26px;width:100%;border-bottom:1px solid rgba(212,199,179,.08)}
  .menu>a::after{display:none}
  .hamburger{display:flex}.nav-cta .btn{display:none}
  .has-dd{width:100%}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:1fr}.row2{grid-template-columns:1fr}
  .section{padding:70px 0}.floaty{display:none}
  .fabs{bottom:74px}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--olive-d);border-top:1px solid var(--line-d)}
  .mbar a{flex:1;padding:15px;text-align:center;font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    display:flex;align-items:center;justify-content:center;gap:8px;color:var(--cream)}
  .mbar a.c1{background:var(--beige);color:var(--olive-d)}
  body{padding-bottom:52px}
}
@media(max-width:480px){.gallery{grid-template-columns:1fr}}

/* ===================================================================== */
/* ANNOUNCE RIBBON (auto-sliding specialties)                            */
/* ===================================================================== */
.ribbon{background:linear-gradient(160deg,#5f5e46,var(--olive) 60%,var(--olive-d));overflow:hidden;position:relative;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.ribbon::before{left:0;background:linear-gradient(90deg,var(--olive-d),transparent)}
.ribbon::after{right:0;background:linear-gradient(270deg,var(--olive-d),transparent)}
.ribbon-track{display:flex;align-items:center;width:max-content;animation:ribbon-slide 32s linear infinite;will-change:transform}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon-item{display:inline-flex;align-items:center;gap:10px;color:var(--beige);font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(16px,1.7vw,22px);letter-spacing:.5px;white-space:nowrap;margin:15px 11px;padding:8px 22px;border:1px solid rgba(212,199,179,.32);border-radius:999px;background:rgba(212,199,179,.06)}
.ribbon-item .rb-ic{display:inline-flex;color:var(--gold)}.ribbon-item .rb-ic svg{width:15px;height:15px}
@keyframes ribbon-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ribbon-track{animation:none}}

/* ===================================================================== */
/* OUR TEAM                                                              */
/* ===================================================================== */
@media(max-width:900px){}
@media(max-width:560px){}
.socials a{transition:transform .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),opacity .3s var(--ease)}
.socials a:hover{color:var(--beige);transform:translateY(-2px)}

/* ===================================================================== */
/* CERTIFICATIONS & TRAINING                                             */
/* ===================================================================== */
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.cert{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .45s var(--ease),background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),opacity .45s var(--ease);position:relative}
.cert:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--sand)}
.cert-img{aspect-ratio:7/5;background:var(--cream-2);overflow:hidden;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.cert-img img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease),background-color .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease),opacity .6s var(--ease)}
.cert:hover .cert-img img{transform:scale(1.04)}
.cert-view{position:absolute;top:14px;right:14px;background:rgba(69,69,47,.86);color:var(--beige);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px;opacity:0;transform:translateY(-6px);transition:transform .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),opacity .4s var(--ease);}
.cert:hover .cert-view{opacity:1;transform:translateY(0)}
.cert-cap{padding:20px 22px 22px}
.cert-cap b{display:block;color:var(--olive);font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;line-height:1.2;margin-bottom:4px}
.cert-cap span{color:var(--muted);font-size:12.5px}
@media(max-width:900px){.cert-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cert-grid{grid-template-columns:1fr}}

/* ===================================================================== */
/* OUR CLINIC GALLERY                                                     */
/* ===================================================================== */
/* CLINIC GALLERY — an editorial spread rather than a row of thumbnails.
   First tile spans two columns so the grid has rhythm; each frame carries
   an inset gold hairline, the clinic's own lamp light, and a caption that
   rises on hover. */
.clinic-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.clinic-gallery a{position:relative;display:block;border-radius:14px;overflow:hidden;
  box-shadow:0 16px 40px rgba(69,69,47,.14);border:1px solid var(--line);aspect-ratio:4/5;
  transition:transform .55s var(--ease),box-shadow .55s}
.clinic-gallery a:hover{transform:translateY(-5px);box-shadow:0 30px 66px rgba(69,69,47,.24);z-index:2}
.clinic-gallery img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.19,.9,.26,1)}
.clinic-gallery a:hover img{transform:scale(1.08)}

/* warm wash + darkening only where the caption sits */
.clinic-gallery a::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(28,28,19,.82) 2%,rgba(28,28,19,.18) 42%,transparent 68%),
             radial-gradient(70% 50% at 78% 8%,rgba(var(--lume),.20),transparent 70%);
  opacity:.55;transition:opacity .5s var(--ease)}
.clinic-gallery a:hover::after{opacity:1}

/* inset gold frame that draws in on hover */
.clinic-gallery a::before{content:"";position:absolute;inset:11px;z-index:2;border-radius:8px;
  border:1px solid rgba(var(--lume),.55);opacity:0;transform:scale(1.03);pointer-events:none;
  transition:opacity .5s var(--ease),transform .6s var(--ease)}
.clinic-gallery a:hover::before{opacity:1;transform:scale(1)}

.cg-cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:3;pointer-events:none;
  transform:translateY(10px);opacity:0;transition:transform .5s var(--ease),opacity .45s var(--ease)}
.clinic-gallery a:hover .cg-cap{transform:translateY(0);opacity:1}
.cg-cap b{display:block;font-family:'Cormorant Garamond',serif;font-size:20px;color:#fff;font-weight:600;line-height:1.2}
.cg-cap span{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(var(--lume),1);margin-top:5px}
.cg-no{position:absolute;top:14px;left:16px;z-index:3;font-family:'Cormorant Garamond',serif;
  font-size:15px;color:var(--beige);opacity:.65;letter-spacing:.1em}

@media(max-width:900px){.clinic-gallery{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.clinic-gallery{grid-template-columns:1fr;gap:16px}}

/* ---- Areas We Serve (local SEO) ---- */
.areas{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;max-width:940px;margin:34px auto 0}
.areas span{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-size:13.5px;color:var(--olive);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),opacity .35s var(--ease)}
.areas span:hover{background:var(--olive);color:var(--cream);transform:translateY(-2px)}

/* footer credit */

/* ==================================================================== */
/* PREMIUM ENHANCEMENTS                                                  */
/* ==================================================================== */

/* ---- Scroll progress indicator ---- */
/* driven with transform:scaleX (compositor only) — never width, which
   would force a layout + paint on every scroll frame */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;background:linear-gradient(90deg,var(--gold),var(--beige));box-shadow:0 0 10px rgba(169,152,111,.55);transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* ---- Page loader (logo) ---- */
.page-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--cream);transition:opacity .6s ease,visibility .6s ease;animation:plAuto 0s linear 3.8s forwards}
.page-loader.done{opacity:0;visibility:hidden;pointer-events:none}
@keyframes plAuto{to{opacity:0;visibility:hidden;pointer-events:none}}
.pl-inner{display:flex;flex-direction:column;align-items:center;gap:30px}
.pl-logo{position:relative;width:172px;height:172px;border-radius:50%;overflow:hidden;background:#595841;box-shadow:0 20px 55px rgba(89,88,65,.28),inset 0 0 0 1px rgba(169,152,111,.22);animation:plPulse 1.9s ease-in-out infinite}
.pl-logo::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2.5px solid rgba(169,152,111,.18);border-top-color:var(--gold);border-right-color:var(--gold);animation:plSpin 1s linear infinite;z-index:2}
.pl-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
@keyframes plSpin{to{transform:rotate(360deg)}}
.pl-bar{width:150px;height:3px;background:rgba(89,88,65,.16);border-radius:3px;overflow:hidden}
.pl-bar span{display:block;height:100%;width:38%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--olive));animation:plBar 1.15s ease-in-out infinite}
@keyframes plBar{0%{transform:translateX(-130%)}100%{transform:translateX(360%)}}
@keyframes plPulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.06);opacity:1}}

/* ---- Smooth page transition ---- */
body{opacity:1;transition:opacity .34s ease}
body.pt-out{opacity:0}

/* ---- Custom cursor (desktop, fine pointer) ---- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:9997;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .35s}
.cursor-dot{width:7px;height:7px;background:var(--gold)}
.cursor-ring{width:34px;height:34px;border:1.5px solid rgba(169,152,111,.6);transition:width .25s var(--ease),height .25s var(--ease),background .25s,border-color .25s,opacity .35s}
.cursor-ring.hov{width:56px;height:56px;background:rgba(169,152,111,.12);border-color:var(--gold)}
.cursor-ring.click{width:24px;height:24px}
body.has-cursor,body.has-cursor a,body.has-cursor button,body.has-cursor .btn,body.has-cursor input,body.has-cursor textarea,body.has-cursor select,body.has-cursor label,body.has-cursor [role=button]{cursor:none}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none!important}}

/* ---- Back-to-top with progress ring ---- */
.to-top{position:fixed;left:18px;bottom:18px;z-index:92;width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--olive);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);transition:transform .5s var(--ease),background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),opacity .5s var(--ease);cursor:pointer}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--olive);color:var(--cream);transform:translateY(-4px)}
.to-top>svg{width:20px;height:20px;position:relative;z-index:2}
.to-top .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.to-top .ring circle{fill:none;stroke:var(--gold);stroke-width:2.5}

/* ---- Dark-mode toggle ---- */
.theme-tog{position:fixed;left:18px;bottom:80px;z-index:92;width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--olive);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .45s var(--ease),background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),opacity .45s var(--ease)}
.theme-tog:hover{transform:translateY(-4px) rotate(-14deg);color:var(--gold)}
.theme-tog svg{width:22px;height:22px}

/* ---- Glassmorphism cards ---- */
/* backdrop-filter was deliberately REMOVED from these selectors.
   It made the browser re-blur the page behind every single card on
   every scroll frame — the main cause of stutter on phones. The frosted
   look comes from the translucent gradient below, which is free.
   Do not put backdrop-filter back on bulk/repeated elements. */
.card,.rcat,.info-card{background:linear-gradient(155deg,rgba(255,253,248,.72),rgba(247,243,234,.5))!important}
.acc-item{background:rgba(255,253,248,.6)!important}

/* ---- Elegant hover effects ---- */
.card,.rcat,.info-card{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease),background .5s}
.card:hover,.rcat:hover,.info-card:hover{transform:translateY(-9px);box-shadow:var(--shadow);border-color:var(--gold)}
.menu a{position:relative}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;background:var(--beige);transition:right .35s var(--ease)}
.menu a:hover::after,.menu a.active::after{right:0}

/* ---- Button micro-interactions ---- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;top:0;left:0;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-215%) skewX(-18deg);transition:transform .65s var(--ease);
  will-change:transform;z-index:1}
.btn:hover::before{transform:translateX(250%) skewX(-18deg)}
.btn:active{transform:scale(.95)}
.btn>*{position:relative;z-index:2}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:translate(-50%,-50%);width:12px;height:12px;animation:rip .6s ease-out forwards;pointer-events:none;z-index:1}
@keyframes rip{to{transform:translate(-50%,-50%) scale(16);opacity:0}}

/* ---- Premium typography ---- */
h1{letter-spacing:.6px}
.sec-title{letter-spacing:.5px}
::selection{background:var(--gold);color:#fff}

/* ---- Dark mode ---- */
html.dark{--cream:#131310;--cream-2:#1a1a14;--white:#23231b;--ink:#e9e4d6;--muted:#a8a590;--line:rgba(212,199,179,.13);--shadow:0 24px 60px rgba(0,0,0,.55);--shadow-sm:0 12px 30px rgba(0,0,0,.42)}
html.dark body{background:var(--cream)}
html.dark h1,html.dark h2,html.dark h3,html.dark h4,html.dark .ba-cap b,html.dark .rcat b,html.dark .cert-cap b,html.dark .price b,html.dark .acc-q{color:#e8dabb}
html.dark .card,html.dark .rcat,html.dark .info-card{background:linear-gradient(155deg,rgba(40,40,31,.72),rgba(28,28,22,.55))!important}
html.dark .acc-item{background:rgba(35,35,27,.6)!important}
html.dark .btn-ghost{color:#e8dabb;border-color:#6d6c51}
html.dark .btn-ghost:hover{background:#2a2a20;color:#e8dabb}
html.dark .field input,html.dark .field select,html.dark .field textarea{background:#23231b;color:var(--ink)}
html.dark .to-top,html.dark .theme-tog{background:#23231b;color:#e8dabb;border-color:var(--line)}
html.dark .page-loader{background:#131310}
html.dark ::selection{background:var(--gold);color:#131310}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.cursor-dot,.cursor-ring{display:none!important}}

/* ==================================================================== */
/* PREMIUM MOBILE NAV — unique button + right-side drawer               */
/* ==================================================================== */

/* ---- Signature hamburger button ---- */
.hamburger{display:none;width:52px;height:52px;border-radius:50%;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;position:relative;overflow:hidden;border:1px solid rgba(212,199,179,.34);background:linear-gradient(155deg,rgba(212,199,179,.18),rgba(212,199,179,.04));-webkit-transition:transform .45s var(--ease),background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),opacity .45s var(--ease);box-shadow:inset 0 0 0 0 rgba(169,152,111,0)}
.hamburger::before{content:"";position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 220deg,transparent,rgba(169,152,111,.55),transparent 55%);opacity:0;transition:transform .5s var(--ease),background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),opacity .5s var(--ease);z-index:0}
.hamburger:hover{border-color:var(--gold);box-shadow:0 10px 26px rgba(0,0,0,.32)}
.hamburger:hover::before{opacity:1;animation:hbSpin 3s linear infinite}
@keyframes hbSpin{to{transform:rotate(360deg)}}
.hamburger span{display:block;height:2px;border-radius:2px;background:var(--beige);position:relative;z-index:1;transition:transform .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),opacity .4s var(--ease)}
.hamburger span:nth-child(1){width:24px}
.hamburger span:nth-child(2){width:13px;background:var(--gold);box-shadow:0 0 8px rgba(169,152,111,.7)}
.hamburger span:nth-child(3){width:24px}
.hamburger:hover span:nth-child(1){width:13px}
.hamburger:hover span:nth-child(2){width:24px}
.hamburger:hover span:nth-child(3){width:13px}
.hamburger:active{transform:scale(.93)}

/* ---- Off-canvas drawer ---- */
.m-overlay{position:fixed;inset:0;z-index:96;background:rgba(18,18,11,.55);-webkit-opacity:0;visibility:hidden;transition:transform .5s var(--ease),background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),opacity .5s var(--ease)}
.m-overlay.open{opacity:1;visibility:visible}
.m-drawer{position:fixed;top:0;right:0;bottom:0;width:min(87vw,368px);z-index:97;display:flex;flex-direction:column;padding:22px 24px 28px;background:linear-gradient(165deg,#50503b,var(--olive-d) 52%,#2f2f1d);border-left:1px solid rgba(212,199,179,.16);box-shadow:-34px 0 90px rgba(0,0,0,.5);transform:translateX(106%);transition:transform .55s var(--ease);overflow-y:auto}
.m-drawer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.m-drawer.open{transform:none}
.m-drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;margin-bottom:6px;border-bottom:1px solid rgba(212,199,179,.14)}
.m-logo{width:54px;height:54px;border-radius:50%;object-fit:cover;border:1px solid rgba(169,152,111,.45);box-shadow:0 8px 22px rgba(0,0,0,.4)}
.m-close{width:46px;height:46px;border-radius:50%;border:1px solid rgba(212,199,179,.3);background:rgba(212,199,179,.06);color:var(--beige);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),opacity .4s var(--ease)}
.m-close:hover{background:var(--gold);color:#2a2a1c;transform:rotate(90deg);border-color:var(--gold)}
.m-close svg{width:20px;height:20px}
.m-links{display:flex;flex-direction:column;flex:1;padding:16px 0}
.m-links a{display:flex;align-items:baseline;gap:14px;padding:15px 4px;color:#e8e3d4;border-bottom:1px solid rgba(212,199,179,.09);opacity:0;transform:translateX(34px);transition:opacity .55s var(--ease),transform .55s var(--ease),color .3s}
.m-drawer.open .m-links a{opacity:1;transform:none;transition-delay:calc(var(--i) * .07s + .12s)}
.m-links a .num{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.14em;color:var(--gold);opacity:.75;min-width:22px}
.m-links a .lbl{font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;letter-spacing:.5px;line-height:1;position:relative}
.m-links a .lbl::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:var(--gold);transition:transform .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),opacity .4s var(--ease)}
.m-links a:hover .lbl,.m-links a.active .lbl{color:var(--beige)}
.m-links a:hover .lbl::after,.m-links a.active .lbl::after{width:100%}
.m-links a.active .num{opacity:1}
.m-foot{padding-top:18px;border-top:1px solid rgba(212,199,179,.14)}
.m-foot .btn{width:100%;justify-content:center}
.m-foot .m-contact{margin-top:16px;display:flex;flex-direction:column;gap:9px;font-size:13px;color:#bcb7a4;letter-spacing:.02em}
.m-foot .m-contact a{color:#ddd8c8;display:inline-flex;align-items:center;gap:9px}
.m-foot .m-contact a:hover{color:var(--beige)}
.m-foot .m-contact svg{width:15px;height:15px;color:var(--gold);flex:0 0 auto}
.m-foot .m-social{display:flex;gap:14px;margin-top:16px}
.m-foot .m-social a{color:#cfcab9;transition:transform .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),opacity .3s var(--ease)}
.m-foot .m-social a:hover{color:var(--gold);transform:translateY(-2px)}
body.m-open{overflow:hidden}

@media(max-width:768px){.hamburger{display:flex}.menu{display:none!important}}

/* ---- nav breathing room now that Shop is in the menu ---- */
@media(max-width:1120px){
  .menu{gap:20px}
  .menu>a,.menu .has-dd>a{font-size:11.5px;letter-spacing:.1em}
  .nav-cta .btn{padding:13px 20px;font-size:11.5px}
}

/* =====================================================================
   PRACTITIONER CARDS — each specialist linked to what they actually treat.
   Transform/opacity only, so the hover work stays on the compositor.
   ===================================================================== */
.tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px}
.tm{position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.tm:hover{transform:translateY(-7px);border-color:var(--sand);box-shadow:0 30px 66px rgba(69,69,47,.18)}

/* branded header band — the clinic's olive and its own lamp light, with the
   ASN roundel embossed into it. This is what stops the card reading generic. */
.tm-head{position:relative;height:112px;overflow:hidden;
  background:linear-gradient(150deg,#565541,var(--olive-d) 62%,#3c3c28)}
.tm-lume{position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:radial-gradient(300px 170px at 22% -10%,rgba(var(--lume),.34),transparent 70%),
             radial-gradient(240px 150px at 88% 120%,rgba(var(--lume),.18),transparent 72%);
}
.tm-mark{position:absolute;right:-22px;top:-20px;width:132px;height:132px;z-index:1;
  opacity:.16;pointer-events:none;
  transition:transform .9s var(--ease),opacity .6s}
.tm:hover .tm-mark{transform:rotate(-12deg) scale(1.08);opacity:.2}
.tm-ghost{position:absolute;left:14px;bottom:-46px;z-index:1;font-family:'Cormorant Garamond',serif;
  font-size:150px;line-height:1;font-weight:600;color:#fff;opacity:.08;pointer-events:none;
  transition:transform .8s var(--ease),opacity .6s}
.tm:hover .tm-ghost{transform:translateX(6px);opacity:.13}
.tm-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(var(--lume),.9),var(--gold),transparent)}
.tm-flag{position:absolute;top:16px;right:16px;z-index:4;font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--olive-d);background:var(--beige);border-radius:999px;
  padding:6px 13px;font-weight:500;white-space:nowrap}

/* the seal straddles the band edge */
.tm-seal{position:relative;z-index:4;width:78px;height:78px;display:grid;place-items:center;
  margin:-39px 0 0 26px}
.tm-seal::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px dashed rgba(169,152,111,.65);transition:border-color .5s}
.tm-seal i{position:relative;z-index:2;width:62px;height:62px;border-radius:50%;font-style:normal;
  display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;
  letter-spacing:1.4px;color:var(--olive-d);background:var(--cream);
  border:2px solid var(--beige);box-shadow:0 10px 24px rgba(40,40,28,.30);
  transition:transform .55s var(--ease),background-color .5s,color .5s}
@keyframes tmSpin{to{transform:rotate(360deg)}}
.tm:hover .tm-seal::before{border-color:var(--gold);animation:tmSpin 11s linear infinite}
.tm:hover .tm-seal i{transform:scale(1.07);background:var(--beige)}

.tm-body{padding:14px 26px 24px;display:flex;flex-direction:column;flex:1}
.tm h3{font-size:26px;margin:0;color:var(--olive-d);line-height:1.15}
.tm-role{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  margin-top:8px;font-weight:500}
.tm-rule{display:block;width:60px;height:2px;background:var(--gold);opacity:.5;margin:16px 0;
  transform:scaleX(.4667);transform-origin:left;
  transition:transform .5s var(--ease),opacity .5s}
.tm:hover .tm-rule{transform:scaleX(1);opacity:.75}
.tm-label{display:block;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  margin-bottom:11px}
.tm-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px;flex:1;align-content:flex-start}
.tm-chip{display:inline-block;font-size:11.5px;letter-spacing:.03em;color:var(--olive-d);
  background:var(--cream-2);border:1px solid transparent;border-radius:999px;padding:7px 13px;
  transition:background-color .3s,border-color .3s,transform .3s var(--ease),color .3s}
a.tm-chip:hover{background:var(--olive);color:var(--cream);border-color:var(--olive);transform:translateY(-2px)}
.tm:hover .tm-chip{border-color:rgba(169,152,111,.4)}
.tm-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  margin-top:auto;padding:14px 20px;border-radius:999px;border:1px solid var(--olive);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--olive-d);
  transition:background-color .4s var(--ease),color .4s var(--ease)}
.tm-cta i{display:grid;place-items:center;transition:transform .4s var(--ease)}
.tm-cta i svg{width:15px;height:15px;display:block}
.tm-cta:hover{background:var(--olive);color:var(--cream)}
.tm-cta:hover i{transform:translateX(5px)}

.tm-foot{text-align:center;margin-top:38px;font-size:14.5px;color:var(--muted)}
.tm-foot a{color:var(--olive-d);border-bottom:1px solid var(--sand);transition:transform .25s,background-color .25s,color .25s,border-color .25s,box-shadow .25s,opacity .25s}
.tm-foot a:hover{color:var(--gold);border-color:var(--gold)}

html.dark .tm{background:linear-gradient(155deg,rgba(40,40,31,.72),rgba(28,28,22,.55))}
html.dark .tm-seal i{background:#23231b;color:#e8dabb;border-color:#3a3a2a}
html.dark .tm h3,html.dark .tm-cta{color:#e8dabb}
html.dark .tm-chip{background:rgba(212,199,179,.09);color:#e8dabb}
html.dark .tm-ghost{opacity:.1}
html.dark .tm-foot a{color:#e8dabb}

@media(max-width:1000px){.tm-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .tm-grid{grid-template-columns:1fr;gap:18px}
  .tm-head{height:96px}
  .tm-body{padding:12px 22px 22px}
  .tm h3{font-size:23px}
  .tm-ghost{font-size:124px;bottom:-38px}
  .tm-seal{width:68px;height:68px;margin:-34px 0 0 22px}
  .tm-seal i{width:54px;height:54px;font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .tm,.tm-ghost,.tm-seal i,.tm-rule,.tm-chip,.tm-cta i{transition:none!important}
  .tm:hover .tm-seal::before{animation:none!important}
}

/* =====================================================================
   CLINIC LIGHT
   The warm lamp glow from the treatment rooms, sampled straight off the
   interior photos (#F3C790). Layered onto the dark olive sections so the
   site feels lit rather than flat.

   Cost: each is one absolutely-positioned pseudo-element carrying a
   radial-gradient, moved with transform only — composited, no repaint,
   no layout. The drift is 26-34s so it reads as ambience, not motion.
   ===================================================================== */
@keyframes lumeDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(2.5%,-2%,0) scale(1.09)}
}

.band{position:relative;overflow:hidden}

.page-banner{overflow:hidden}

footer.ft{position:relative;overflow:hidden}

/* phones: keep the glow, drop the drift — one less compositor layer to
   animate on a mid-range Android */
@media(max-width:768px){
}
@media(prefers-reduced-motion:reduce){
}

/* =====================================================================
   PRODUCT PROMO BAND
   An in-content advert, not an interstitial. Sits in the page flow so it
   gets read without costing anything in mobile rankings.
   ===================================================================== */
.promo-slot{margin:0}
.promo{position:relative;overflow:hidden;isolation:isolate;display:grid;
  grid-template-columns:290px 1fr;gap:0;align-items:stretch;
  background:linear-gradient(150deg,#4b4b33,var(--olive-d) 55%,#3d3d29);
  border-radius:20px;box-shadow:0 34px 74px rgba(38,38,26,.30)}
.promo-lume{position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(520px 300px at 30% -10%,rgba(var(--lume),.26),transparent 68%),
             radial-gradient(420px 260px at 88% 110%,rgba(var(--lume),.16),transparent 70%);
}
.promo::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(var(--lume),.85) 30%,var(--gold) 50%,rgba(var(--lume),.85) 70%,transparent)}

.promo-media{position:relative;z-index:2;display:block;overflow:hidden;min-height:290px}
.promo-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.19,.9,.26,1)}
.promo:hover .promo-media img{transform:scale(1.07)}
.promo-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 55%,rgba(61,61,41,.75))}
.promo-off{position:absolute;top:0;left:0;z-index:3;background:rgba(26,26,17,.72);color:#fff;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;padding:9px 15px;
  border-right:1px solid rgba(212,199,179,.3);border-bottom:1px solid rgba(212,199,179,.3)}

.promo-body{position:relative;z-index:2;padding:36px 40px 34px;display:flex;flex-direction:column;justify-content:center}
.promo-eyebrow{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(var(--lume),1)}
.promo-body h3{font-size:31px;margin:11px 0 0;line-height:1.1;color:#fff}
.promo-body h3 a{color:inherit;transition:color .3s}
.promo-body h3 a:hover{color:rgba(var(--lume),1)}
.promo-tag{display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(var(--lume),.92);margin-top:9px;font-weight:500}
.promo-body p{font-size:14px;color:#d5d0be;line-height:1.65;margin-top:13px;max-width:520px}
.promo-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:18px}
.promo-price b{font-family:'Cormorant Garamond',serif;font-size:34px;color:#fff;font-weight:600;line-height:1}
.promo-price s{font-family:'Cormorant Garamond',serif;font-size:18px;color:#b3ad9a}
.promo-price em{font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--beige);border:1px solid rgba(212,199,179,.45);border-radius:999px;padding:3px 10px}

.promo-act{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:22px}
.promo-cta{display:inline-flex;align-items:center;gap:11px;padding:15px 26px;border-radius:999px;
  background:var(--beige);color:var(--olive-d);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;transition:transform .3s var(--ease),background-color .3s}
.promo-cta i{display:grid;place-items:center;transition:transform .35s var(--ease)}
.promo-cta i svg{width:15px;height:15px;display:block}
.promo-cta:hover{background:rgba(var(--lume),1);transform:translateY(-2px)}
.promo-cta:hover i{transform:translateX(5px)}
.promo-alt{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--beige);
  border-bottom:1px solid rgba(212,199,179,.4);padding-bottom:3px;transition:color .3s,border-color .3s}
.promo-alt:hover{color:rgba(var(--lume),1);border-color:rgba(var(--lume),1)}
.promo-note{font-size:11px;color:#a9a391;margin-top:18px;letter-spacing:.03em}

@media(max-width:900px){
  .promo{grid-template-columns:1fr}
  .promo-media{min-height:0;aspect-ratio:16/10}
  .promo-media::after{background:linear-gradient(180deg,transparent 45%,rgba(61,61,41,.8))}
  .promo-body{padding:28px 26px 26px}
  .promo-body h3{font-size:26px}
  .promo-lume{animation:none}
}
@media(max-width:520px){
  .promo-body{padding:24px 20px 22px}
  .promo-body h3{font-size:23px}
  .promo-price b{font-size:28px}
  .promo-act{gap:14px}
  .promo-cta{padding:13px 20px;font-size:9.5px}
}
@media(prefers-reduced-motion:reduce){
  .promo-lume{animation:none!important}
  .promo-media img,.promo-cta,.promo-cta i{transition:none!important}
}

/* =====================================================================
   FLOATING PRODUCT TILE
   Joins the WhatsApp / call stack. Round product photo + discount badge;
   slides a price card out on hover or tap. Transform/opacity only.
   ===================================================================== */
.pfab{position:relative;display:flex;align-items:center;justify-content:flex-end;
  opacity:0;transform:translateY(14px) scale(.85);pointer-events:none;
  transition:opacity .5s var(--ease),transform .55s cubic-bezier(.19,.9,.26,1)}
.pfab.in{opacity:1;transform:none;pointer-events:auto}

.pfab-btn{position:relative;width:56px;height:56px;border-radius:50%;overflow:hidden;display:block;
  box-shadow:0 12px 30px rgba(0,0,0,.3);border:2px solid var(--beige);background:var(--cream-2);
  transition:transform .35s var(--ease),border-color .35s}
.pfab-btn img{width:100%;height:100%;object-fit:cover;display:block}
.pfab:hover .pfab-btn{transform:scale(1.07);border-color:rgba(var(--lume),1)}
/* a soft pulse so the eye finds it, then it settles */
.pfab-btn::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid rgba(var(--lume),.9);animation:pfabPing 2.6s ease-out infinite;pointer-events:none}
@keyframes pfabPing{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}
.pfab:hover .pfab-btn::after,.pfab.open .pfab-btn::after{animation:none;opacity:0}

.pfab-badge{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);z-index:3;
  background:var(--olive-d);color:rgba(var(--lume),1);font-family:'Jost',sans-serif;font-size:9px;
  font-weight:500;letter-spacing:.06em;padding:2px 7px;border-radius:999px;
  border:1px solid rgba(var(--lume),.55);white-space:nowrap}

/* the price card that slides out */
.pfab-card{position:absolute;right:66px;top:50%;transform:translateY(-50%) translateX(12px) scale(.96);
  transform-origin:right center;width:236px;border-radius:16px;overflow:hidden;
  background:linear-gradient(150deg,#4b4b33,var(--olive-d) 60%,#3d3d29);
  box-shadow:0 22px 52px rgba(0,0,0,.36);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .34s var(--ease),transform .44s cubic-bezier(.19,.9,.26,1),visibility .34s}
.pfab.open .pfab-card{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%) translateX(0) scale(1)}
.pfab-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(220px 120px at 20% -10%,rgba(var(--lume),.28),transparent 70%)}
.pfab-card-in{position:relative;z-index:2;display:block;padding:16px 18px}
.pfab-eyebrow{display:block;font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:rgba(var(--lume),1)}
.pfab-name{display:block;font-family:'Cormorant Garamond',serif;font-size:19px;color:#fff;font-weight:600;
  line-height:1.2;margin-top:6px}
.pfab-price{display:flex;align-items:baseline;gap:9px;margin-top:9px}
.pfab-price s{font-family:'Cormorant Garamond',serif;font-size:15px;color:#a9a391}
.pfab-price i{font-style:normal;font-family:'Cormorant Garamond',serif;font-size:24px;color:#fff;font-weight:600;line-height:1}
.pfab-go{display:inline-flex;align-items:center;gap:7px;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(var(--lume),1);margin-top:12px}
.pfab-go svg{width:13px;height:13px;transition:transform .35s var(--ease)}
.pfab-card:hover .pfab-go svg{transform:translateX(4px)}
/* crossfade as it rotates through the range */
.pfab.swap .pfab-btn img,.pfab.swap .pfab-card-in{animation:pfabSwap .55s var(--ease)}
@keyframes pfabSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.pfab:hover .pfab-x,.pfab.open 
@media(max-width:768px){
  .pfab-btn{width:52px;height:52px}
  .pfab-card{right:60px;width:208px}
  .pfab-name{font-size:17px}
  .pfab-price i{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .pfab,.pfab-card,.pfab-btn{transition:none!important}
  .pfab-btn::after{animation:none!important;opacity:0}
  .pfab.swap .pfab-btn img,.pfab.swap .pfab-card-in{animation:none!important}
}

/* =====================================================================
   COVE LIGHTING — the clinic's arched wall niches
   In the treatment rooms an LED strip is hidden behind an arched panel,
   so the warm light traces the EDGE of the shape rather than washing the
   middle. That is the motif here: arch-topped frames with a halo that
   spills from behind them.

   Built with box-shadow, not filter:blur — a shadow follows the
   border-radius for free and never forces an expensive blur pass.
   ===================================================================== */
:root{--arch:190px}

/* --- hero image becomes a lit arch, the way the treatment room reads --- */
.hero-visual .glass{border-radius:calc(var(--arch) + 18px) calc(var(--arch) + 18px) 26px 26px}
.hero-visual .glass img{border-radius:var(--arch) var(--arch) 16px 16px}
.hero-visual::before{content:"";position:absolute;inset:-6px -8px 10px -8px;z-index:0;pointer-events:none;
  border-radius:calc(var(--arch) + 26px) calc(var(--arch) + 26px) 34px 34px;
  box-shadow:0 0 70px 14px rgba(var(--lume),.42), 0 0 160px 40px rgba(var(--lume),.18);
  animation:coveBreathe 9s ease-in-out infinite}
.hero-visual .glass{position:relative;z-index:2}
.hero-visual .floaty{z-index:4}
@keyframes coveBreathe{0%,100%{opacity:.72}50%{opacity:1}}

/* --- clinic gallery: each frame is an arched niche, lit from behind --- */
.clinic-gallery a{border-radius:var(--arch) var(--arch) 14px 14px}
.clinic-gallery a::before{border-radius:calc(var(--arch) - 10px) calc(var(--arch) - 10px) 8px 8px}
.clinic-gallery a{box-shadow:0 16px 40px rgba(69,69,47,.14),0 0 0 0 rgba(var(--lume),0)}
.clinic-gallery a:hover{box-shadow:0 30px 66px rgba(69,69,47,.22),
  0 0 54px 6px rgba(var(--lume),.45),0 0 120px 24px rgba(var(--lume),.16)}

/* --- practitioner cards: an arched niche behind the monogram ---------- */
.tm-head::before{content:"";position:absolute;left:22px;bottom:-30px;z-index:2;
  width:86px;height:104px;border-radius:43px 43px 10px 10px;
  background:linear-gradient(180deg,rgba(var(--lume),.20),rgba(var(--lume),.05));
  box-shadow:0 0 34px 6px rgba(var(--lume),.34);
  transition:box-shadow .55s var(--ease),transform .6s var(--ease)}
.tm:hover .tm-head::before{box-shadow:0 0 46px 10px rgba(var(--lume),.52);transform:translateY(-2px)}

@media(max-width:900px){
  :root{--arch:130px}
}
@media(max-width:768px){
  :root{--arch:110px}
  .hero-visual::before{animation:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-visual::before{animation:none!important}
  .tm-head::before{transition:none!important}
}

/* =====================================================================
   TREATMENT WHEEL ("the bloom")
   Eight petals laid out radially, each one a link into a service page.
   Hovering lifts a petal out of the flower; the hub stays put.

   Placement uses the rotate → translate → counter-rotate trick rather
   than sin()/cos(), so it works on older Android browsers too. Only
   transform and opacity animate, so lifting a petal never triggers
   layout.
   ===================================================================== */
.bloom{position:relative;width:min(680px,93vw);aspect-ratio:1;margin:44px auto 0;
  --r:190px;--petal:214px}
/* soft light pooling behind the whole flower, like the clinic cove */
.bloom::before{content:"";position:absolute;left:50%;top:50%;width:640px;height:640px;
  margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--lume),.30),rgba(var(--lume),.09) 46%,transparent 68%)}
/* two rims: a still gold hairline and a slow dashed orbit */
.bloom-ring{position:absolute;left:50%;top:50%;width:400px;height:400px;margin:-200px 0 0 -200px;
  border-radius:50%;border:1px dashed rgba(169,152,111,.45);pointer-events:none;
  animation:bloomSpin 90s linear infinite}
.bloom-ring::before,.bloom-ring::after{content:"";position:absolute;border-radius:50%;
  border:1px solid rgba(169,152,111,.26)}
.bloom-ring::before{inset:-46px}
.bloom-ring::after{inset:34px;border-style:dotted;border-color:rgba(169,152,111,.34)}
@keyframes bloomSpin{to{transform:rotate(360deg)}}

/* ── the hub: a lit medallion with three rims ── */
.bloom-hub{position:absolute;left:50%;top:50%;width:236px;height:236px;margin:-118px 0 0 -118px;
  z-index:5;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  background:radial-gradient(120% 120% at 32% 4%,#63614a,var(--olive-d) 58%,#33331f);
  box-shadow:0 26px 60px rgba(40,40,28,.40),0 0 70px 10px rgba(var(--lume),.30),
             inset 0 1px 0 rgba(255,247,232,.22);
  border:1px solid rgba(212,199,179,.34)}
.bloom-hub::before{content:"";position:absolute;inset:9px;border-radius:50%;
  border:1px solid rgba(var(--lume),.34);pointer-events:none}
.bloom-hub::after{content:"";position:absolute;inset:16px;border-radius:50%;
  border:1px dotted rgba(212,199,179,.22);pointer-events:none}
.bloom-lume{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;
  background:radial-gradient(150px 110px at 50% -6%,rgba(var(--lume),.52),transparent 72%)}
.bloom-hub img{position:relative;z-index:2;width:56px;height:56px;opacity:.92;margin-bottom:9px}
.bloom-hub b{position:relative;z-index:2;font-family:'Cormorant Garamond',serif;font-size:28px;
  color:#fff;font-weight:600;line-height:1.08}
.bloom-hub span{position:relative;z-index:2;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:rgb(var(--lume));margin-top:7px}

/* ── petals ── */
.petal{position:absolute;left:50%;top:50%;width:var(--petal);height:var(--petal);
  margin:calc(var(--petal) / -2) 0 0 calc(var(--petal) / -2);
  border-radius:50%;display:grid;place-items:center;text-align:center;
  background:linear-gradient(168deg,var(--white) 40%,var(--cream-2));
  border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(69,69,47,.13),inset 0 0 0 1px rgba(255,253,248,.9),
             inset 0 0 34px rgba(var(--lume),.10);
  transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
  transition:transform .55s cubic-bezier(.19,.9,.26,1),box-shadow .5s,border-color .5s}
/* a gold hairline crescent that fills in on hover — opacity only */
.petal::before{content:"";position:absolute;inset:7px;border-radius:50%;pointer-events:none;
  border:1px solid var(--gold);opacity:0;transition:opacity .45s}
.petal:hover::before,.petal:focus-visible::before{opacity:.55}
/* lift out of the flower */
.petal:hover,.petal:focus-visible{z-index:6;border-color:var(--sand);
  transform:rotate(var(--a)) translateY(calc(-1 * (var(--r) + 30px))) rotate(calc(-1 * var(--a))) scale(1.07);
  box-shadow:0 32px 68px rgba(69,69,47,.26),0 0 56px 8px rgba(var(--lume),.46),
             inset 0 0 0 1px rgba(255,253,248,.9),inset 0 0 40px rgba(var(--lume),.20)}
.petal:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* entrance animates OPACITY only — animating transform here would fight
   the radial placement above */
.petal{opacity:0}
.bloom.in .petal{animation:petalIn .55s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes petalIn{from{opacity:0}to{opacity:1}}

.petal-in{display:block;padding:0 24px;max-width:184px}
/* the number sits behind the icon as a watermark rather than above it */
.petal-no{position:absolute;left:50%;top:26px;transform:translateX(-50%);
  font-family:'Cormorant Garamond',serif;font-style:normal;font-size:38px;font-weight:600;
  color:var(--gold);opacity:.16;letter-spacing:.02em;pointer-events:none;transition:opacity .45s}
.petal:hover .petal-no{opacity:.3}

/* icon medallion */
.petal-ic{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 9px;border-radius:50%;
  background:linear-gradient(150deg,#fffdf8,var(--cream-2));
  border:1px solid var(--sand);color:var(--olive);
  box-shadow:0 4px 12px rgba(69,69,47,.12);
  transition:transform .5s var(--ease),background-color .45s,color .45s,border-color .45s}
.petal-ic svg{width:23px;height:23px}
.petal-ic svg .g{opacity:.62}
.petal:hover .petal-ic,.petal:focus-visible .petal-ic{
  transform:translateY(-2px) scale(1.09);background:var(--olive-d);color:rgb(var(--lume));
  border-color:var(--gold)}

.petal b{display:block;font-family:'Cormorant Garamond',serif;font-size:21px;color:var(--olive-d);
  font-weight:600;line-height:1.15;letter-spacing:.005em}
.petal span{display:block;font-size:10.5px;color:var(--muted);line-height:1.5;margin-top:6px}
.petal::after{content:"";position:absolute;left:50%;bottom:24px;width:36px;height:1px;background:var(--gold);
  transform:translateX(-50%) scaleX(0);transform-origin:center;opacity:.85;
  transition:transform .45s var(--ease)}
.petal:hover::after,.petal:focus-visible::after{transform:translateX(-50%) scaleX(1)}

.bloom-foot{text-align:center;margin-top:34px;font-size:14.5px;color:var(--muted)}
.bloom-foot a{color:var(--olive-d);border-bottom:1px solid var(--sand);transition:transform .25s,background-color .25s,color .25s,border-color .25s,box-shadow .25s,opacity .25s}
.bloom-foot a:hover{color:var(--gold);border-color:var(--gold)}

html.dark .petal{background:linear-gradient(168deg,rgba(44,44,34,.94),rgba(28,28,22,.86));
  box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 0 34px rgba(var(--lume),.09)}
html.dark .petal-ic{background:rgba(255,253,248,.06);color:rgb(var(--lume));border-color:rgba(169,152,111,.5)}
html.dark .petal span{color:#a8a590}
html.dark .petal b{color:#e8dabb}
html.dark .bloom-foot a{color:#e8dabb}

/* --- below 900px a wheel stops working: fall back to a clean grid --- */
@media(max-width:900px){
  .bloom{width:100%;aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
  .bloom-ring{display:none}
  .bloom-hub{position:static;width:auto;height:auto;margin:0;grid-column:1 / -1;
    border-radius:16px;flex-direction:row;gap:14px;padding:18px 22px;justify-content:flex-start;text-align:left}
  .bloom-hub img{width:44px;height:44px;margin:0}
  .bloom-hub b{font-size:22px}
  .bloom-hub span{margin-top:2px}
  .bloom-hub .bloom-lume{inset:0}
  .petal{position:static;width:auto;height:auto;margin:0;border-radius:14px;
    transform:none!important;padding:22px 16px 20px;min-height:150px}
  .petal-no{top:12px;left:auto;right:14px;transform:none;font-size:30px}
  .bloom::before{display:none}
  .petal:hover,.petal:focus-visible{transform:translateY(-4px)!important}
  .petal-in{max-width:none;padding:0}
  .petal b{font-size:18px}
}
@media(max-width:420px){
  .bloom{grid-template-columns:1fr}
  .petal{min-height:0;padding:18px 16px}
}
@media(prefers-reduced-motion:reduce){
  .bloom-ring,.bloom-lume{animation:none!important}
  .petal{transition:none!important;opacity:1}
  .bloom.in .petal{animation:none!important}
}

/* =====================================================================
   BEFORE / AFTER CARDS — same frame language as the clinic gallery
   The component shipped with almost no CSS, so the images filled the
   page. Now they sit in an even grid of arched cards.
   ===================================================================== */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.ba{position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--arch) var(--arch) 14px 14px;overflow:hidden;
  box-shadow:0 16px 40px rgba(69,69,47,.14);
  transition:transform .55s var(--ease),box-shadow .55s,border-color .55s}
.ba:hover{transform:translateY(-6px);border-color:var(--sand);
  box-shadow:0 30px 66px rgba(69,69,47,.22),0 0 54px 6px rgba(var(--lume),.40)}
.ba-media{position:relative;aspect-ratio:4/5;overflow:hidden;cursor:ew-resize;
  touch-action:none;user-select:none;-webkit-user-select:none;background:var(--cream-2);
  border-radius:var(--arch) var(--arch) 0 0}
.ba-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;display:block;pointer-events:none}
.ba-cap{padding:18px 22px 20px}
.ba-cap b{display:block;font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--olive-d);
  font-weight:600;line-height:1.15}
.ba-cap>span{display:block;font-size:13px;color:var(--muted);line-height:1.6;margin-top:7px}
.ba-link{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--olive-d);
  border-bottom:1px solid var(--sand);padding-bottom:3px;transition:transform .25s,background-color .25s,color .25s,border-color .25s,box-shadow .25s,opacity .25s}
.ba-link:hover{color:var(--gold);border-color:var(--gold)}
html.dark .ba{background:linear-gradient(155deg,rgba(40,40,31,.72),rgba(28,28,22,.55))}
html.dark .ba-cap b,html.dark .ba-link{color:#e8dabb}
@media(max-width:900px){.ba-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ba-grid{grid-template-columns:1fr;gap:16px}}

/* =====================================================================
   TRUST PILLARS  (replaces the old bare 4-column text block)
   ===================================================================== */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pillar{position:relative;text-align:center;padding:34px 24px 30px;border-right:1px solid var(--line);
  transition:background-color .45s var(--ease)}
.pillar:last-child{border-right:0}
.pillar::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--gold);
  transform:scaleX(0);transition:transform .5s var(--ease)}
.pillar:hover::before{transform:scaleX(1)}
.pillar:hover{background:rgba(var(--lume),.10)}
.pillar-ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 16px;
  border-radius:28px 28px 8px 8px;color:var(--olive-d);
  background:var(--white);border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s,color .4s,background .4s}
.pillar-ic svg{width:26px;height:26px}
.pillar:hover .pillar-ic{transform:translateY(-4px);color:var(--cream);
  background:linear-gradient(150deg,var(--olive-l),var(--olive-d));
  box-shadow:0 14px 30px rgba(69,69,47,.3),0 0 26px rgba(var(--lume),.4)}
.pillar h3{font-size:21px;color:var(--olive-d);margin:0}
.pillar p{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.6}
html.dark .pillar-ic{background:#23231b;color:#e8dabb}
html.dark .pillar h3{color:#e8dabb}
@media(max-width:900px){
  .pillars{grid-template-columns:1fr 1fr}
  .pillar:nth-child(2){border-right:0}
  .pillar:nth-child(1),.pillar:nth-child(2){border-bottom:1px solid var(--line)}
}
@media(max-width:520px){
  .pillars{grid-template-columns:1fr}
  .pillar{border-right:0;border-bottom:1px solid var(--line)}
  .pillar:last-child{border-bottom:0}
}

/* =====================================================================
   SIGNATURE SERVICES — custom icon set in an arch niche
   Every icon is a matching pair: a .d body path that redraws itself on
   hover via stroke-dashoffset, and a .g gold accent that lifts with it.
   ===================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.svc{position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:30px 28px 26px;border-radius:16px;background:var(--white);
  border:1px solid var(--line);box-shadow:0 12px 32px rgba(69,69,47,.09);
  transition:transform .5s var(--ease),box-shadow .5s,border-color .5s}
.svc:hover{transform:translateY(-8px);border-color:var(--sand);
  box-shadow:0 34px 70px rgba(69,69,47,.20),0 0 46px rgba(var(--lume),.30)}

.svc-ic{position:relative;width:72px;height:82px;display:grid;place-items:center;margin-bottom:20px;
  color:var(--olive-d)}
.svc-arch{position:absolute;inset:0;border-radius:36px 36px 10px 10px;
  background:linear-gradient(180deg,var(--cream-2),var(--white));border:1px solid var(--line);
  transition:background .5s var(--ease),box-shadow .5s,transform .55s var(--ease)}
.svc:hover .svc-arch{transform:translateY(-3px);
  background:linear-gradient(165deg,var(--olive-l),var(--olive-d));
  box-shadow:0 16px 34px rgba(69,69,47,.34),0 0 30px rgba(var(--lume),.45)}
.svc-ic svg{position:relative;z-index:2;width:34px;height:34px;transition:color .45s var(--ease)}
.svc:hover .svc-ic{color:var(--cream)}
.svc-ic .d{stroke-dasharray:120;stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease)}
.svc:hover .svc-ic .d{stroke-dashoffset:240}
.svc-ic .g{stroke:var(--gold);opacity:.85;transform-origin:center;
  transition:opacity .45s var(--ease),stroke .45s,transform .6s var(--ease)}
.svc:hover .svc-ic .g{opacity:1;stroke:rgb(var(--lume));transform:scale(1.16)}

.svc h3{font-size:24px;color:var(--olive-d);margin:0;line-height:1.15}
.svc p{font-size:13.5px;color:var(--muted);line-height:1.65;margin:10px 0 18px;flex:1}
.svc-go{display:inline-flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;color:var(--olive-d);
  padding-top:14px;border-top:1px solid var(--line);transition:color .4s}
.svc-go svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.svc:hover .svc-go{color:var(--gold)}
.svc:hover .svc-go svg{transform:translateX(6px)}
.svc-no{position:absolute;top:18px;right:22px;font-family:'Cormorant Garamond',serif;font-size:34px;
  color:var(--olive-d);opacity:.07;line-height:1;pointer-events:none;
  transition:opacity .5s,transform .6s var(--ease)}
.svc:hover .svc-no{opacity:.15;transform:translateY(3px)}
html.dark .svc{background:linear-gradient(155deg,rgba(40,40,31,.72),rgba(28,28,22,.55))}
html.dark .svc h3,html.dark .svc-go{color:#e8dabb}
html.dark .svc-arch{background:#23231b}
html.dark .svc-no{color:var(--beige)}
@media(max-width:1000px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.svc-grid{grid-template-columns:1fr;gap:16px}}

/* =====================================================================
   TESTIMONIALS — a spotlight moves through the cards on its own
   ===================================================================== */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.tst{position:relative;overflow:hidden;margin:0;padding:34px 30px 28px;border-radius:16px;
  background:var(--white);border:1px solid var(--line);box-shadow:0 12px 32px rgba(69,69,47,.09);
  transition:transform .5s var(--ease),box-shadow .5s,border-color .5s}
/* the lit state lives on a pseudo-element so only OPACITY animates */
.tst::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  box-shadow:0 26px 60px rgba(69,69,47,.20),0 0 40px rgba(var(--lume),.34);
  border:1px solid var(--sand);opacity:0}
.tst>*{position:relative;z-index:1}
@keyframes tstSpot{0%,22%{opacity:1}33%,100%{opacity:0}}
.tst-grid.in .tst::before{animation:tstSpot 13.5s ease-in-out infinite;
  animation-delay:calc(var(--s) * 4.5s)}
.tst:hover::before{animation-play-state:paused;opacity:0}
.tst:hover{transform:translateY(-8px);border-color:var(--sand);
  box-shadow:0 34px 70px rgba(69,69,47,.20),0 0 46px rgba(var(--lume),.34)}
.tst-mark{position:absolute;top:-30px;right:8px;font-family:'Cormorant Garamond',serif;font-size:150px;
  line-height:1;color:var(--olive-d);opacity:.07;pointer-events:none;
  transition:transform .7s var(--ease),opacity .5s}
.tst:hover .tst-mark{transform:translate(-6px,6px);opacity:.13}
.tst-stars{position:relative;display:inline-block;color:#d8d1c1;font-size:15px;letter-spacing:3px;
  line-height:1;white-space:nowrap}
.tst-stars i{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--gold);
  font-style:normal;width:100%;transform:scaleX(0);transform-origin:left}
.tst-grid.in .tst-stars i{animation:starFill 1.1s var(--ease) forwards;
  animation-delay:calc(.25s + var(--s) * .16s)}
@keyframes starFill{to{transform:scaleX(1)}}
.tst blockquote{margin:16px 0 22px;font-size:15px;line-height:1.8;color:#4a4936;font-style:italic}
.tst figcaption{display:flex;align-items:center;gap:13px;padding-top:16px;border-top:1px solid var(--line)}
.tst-av{position:relative;width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;
  color:var(--cream);background:linear-gradient(150deg,var(--olive-l),var(--olive-d));
  box-shadow:0 8px 18px rgba(69,69,47,.28)}
.tst-av::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px dashed rgba(169,152,111,.6);opacity:0;transition:opacity .4s}
.tst:hover .tst-av::after{opacity:1;animation:tmSpin 9s linear infinite}
.tst-who b{display:block;font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--olive-d);line-height:1.2}
.tst-who span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:3px}
html.dark .tst{background:linear-gradient(155deg,rgba(40,40,31,.72),rgba(28,28,22,.55))}
html.dark .tst blockquote{color:#cdc8b7}
html.dark .tst-who b{color:#e8dabb}
html.dark .tst-mark{color:var(--beige)}
@media(max-width:900px){.tst-grid{grid-template-columns:1fr;gap:16px}}

@media(prefers-reduced-motion:reduce){
  .tst-grid.in .tst{animation:none!important}
  .tst-grid.in .tst-stars i{animation:none!important;transform:scaleX(1)}
  .svc-ic .d{transition:none!important}
  .tst:hover .tst-av::after{animation:none!important}
}

/* =====================================================================
   FOUNDER — Dr Ahsan
   An arched portrait sitting in a pool of the clinic's cove light, with
   a slow gold orbit, a monogram seal and a floating credential chip.
   Everything that moves is transform/opacity only.
   ===================================================================== */
#founder{position:relative;overflow:hidden}
#founder::before{content:"";position:absolute;left:-14%;top:-28%;width:620px;height:620px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--lume),.22),transparent 66%)}
.fnd{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,5vw,74px);
  align-items:center}

/* ---------- portrait side ---------- */
.fnd-visual{position:relative;padding:26px 30px 30px}
.fnd-glow{position:absolute;left:50%;top:50%;width:118%;aspect-ratio:1;margin-left:-59%;
  transform:translateY(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--lume),.42),rgba(var(--lume),.12) 48%,transparent 70%)}
.fnd-ring{position:absolute;left:50%;top:50%;width:104%;aspect-ratio:1;margin-left:-52%;
  transform:translateY(-50%);border-radius:50%;pointer-events:none;
  border:1px dashed rgba(169,152,111,.42);
  animation:fndOrbit 110s linear infinite}
@keyframes fndOrbit{to{transform:translateY(-50%) rotate(360deg)}}

.fnd-portrait{position:relative;z-index:2;aspect-ratio:4/5;overflow:hidden;
  border-radius:calc(var(--arch) + 40px) calc(var(--arch) + 40px) 18px 18px;
  border:1px solid var(--sand);background:var(--cream-2);
  box-shadow:0 30px 70px rgba(69,69,47,.24),0 0 70px 10px rgba(var(--lume),.30)}
.fnd-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;
  transition:transform 1.1s var(--ease)}
.fnd-visual:hover .fnd-portrait img{transform:scale(1.045)}
/* warm light washing down the portrait, matching the clinic wall coves */
.fnd-portrait::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(178deg,rgba(var(--lume),.30),transparent 34%),
             linear-gradient(0deg,rgba(45,45,32,.46),transparent 46%)}

/* monogram seal */
.fnd-sig{position:absolute;z-index:3;left:14px;top:8px;width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:600;
  color:rgb(var(--lume));background:linear-gradient(150deg,#5c5b45,var(--olive-d));
  border:1px solid rgba(var(--lume),.5);
  box-shadow:0 10px 26px rgba(40,40,28,.34),0 0 30px rgba(var(--lume),.34)}

/* credential chip */
.fnd-chip{position:absolute;z-index:3;right:6px;bottom:16px;display:flex;align-items:center;gap:11px;
  padding:12px 18px 12px 13px;border-radius:999px;background:var(--white);
  border:1px solid var(--sand);box-shadow:0 16px 38px rgba(69,69,47,.20)}
.fnd-chip-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(150deg,#5c5b45,var(--olive-d));color:rgb(var(--lume))}
.fnd-chip-ic svg{width:19px;height:19px}
.fnd-chip>span{display:flex;flex-direction:column;line-height:1.25}
.fnd-chip b{font-size:13.5px;color:var(--olive-d);letter-spacing:.02em}
.fnd-chip span{font-size:10.5px;color:var(--muted)}

/* ---------- copy side ---------- */
.fnd-body .sec-title{font-size:clamp(32px,4.4vw,52px);margin-top:6px}
.fnd-role{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-top:8px}
.fnd-body p{color:var(--muted);margin-bottom:14px}
.fnd-lead{position:relative;padding-left:20px;margin-bottom:18px!important;
  font-family:'Cormorant Garamond',serif;font-size:clamp(19px,2vw,23px);line-height:1.5;
  color:var(--olive-d)!important;font-style:italic}
.fnd-lead::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;
  background:linear-gradient(var(--gold),rgba(169,152,111,0))}

.fnd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:26px 0 28px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}
.fnd-stats>div{padding:0 16px;border-left:1px solid var(--line)}
.fnd-stats>div:first-child{border-left:0;padding-left:0}
.fnd-stats b{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(28px,3.2vw,38px);
  font-weight:600;color:var(--olive-d);line-height:1}
.fnd-stats i{font-style:normal;font-size:.56em;color:var(--gold);margin-left:2px;vertical-align:super}
.fnd-stats span{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:8px}

.fnd-act{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.fnd-alt{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--olive-d);
  padding-bottom:3px;border-bottom:1px solid var(--sand);transition:color .3s,border-color .3s}
.fnd-alt svg{width:17px;height:17px;transition:transform .4s var(--ease)}
.fnd-alt:hover{color:var(--gold);border-color:var(--gold)}
.fnd-alt:hover svg{transform:translateX(4px)}

html.dark .fnd-chip{background:#23231b}
html.dark .fnd-chip b,html.dark .fnd-stats b,html.dark .fnd-lead{color:#e8dabb!important}
html.dark .fnd-alt{color:#e8dabb}

@media(max-width:980px){
  .fnd{grid-template-columns:1fr;gap:34px}
  .fnd-visual{max-width:460px;margin:0 auto;width:100%}
  .fnd-body{text-align:left}
}
@media(max-width:520px){
  .fnd-visual{padding:18px 16px 22px}
  .fnd-chip{right:0;bottom:6px;padding:9px 14px 9px 10px}
  .fnd-chip b{font-size:12.5px}
  .fnd-sig{width:52px;height:52px;font-size:25px;left:4px;top:2px}
  .fnd-stats>div{padding:0 9px}
  .fnd-stats span{font-size:9.5px;letter-spacing:.05em}
}
@media(prefers-reduced-motion:reduce){
  .fnd-ring{animation:none!important}
  .fnd-portrait img{transition:none!important}
}

/* =====================================================================
   REFINEMENT LAYER
   Typographic and interaction detail applied site-wide. Nothing here
   changes layout structure — it tightens what is already there.
   ===================================================================== */

/* ---- 1. type ---- */
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;font-feature-settings:"kern" 1,"liga" 1}
h1,h2,h3,h4,.sec-title{text-wrap:balance}
/* large display sizes need NEGATIVE tracking; the old positive value was
   set for small text and made the big serif headings look spaced out */
h1,.sec-title{letter-spacing:-.012em;font-feature-settings:"kern" 1,"liga" 1,"dlig" 1}
h3,h4{letter-spacing:-.004em}
p{text-wrap:pretty}
/* a comfortable measure — long lines are the clearest tell of a template */
.section p:not([class]){max-width:64ch}
.center p:not([class]),.page-banner p:not([class]){margin-left:auto;margin-right:auto}
/* lining, tabular figures wherever numbers line up in a column */
.fnd-stats b,.pillar b,.stat b,.p-price,.price{font-variant-numeric:lining-nums tabular-nums}
.tag{font-feature-settings:"kern" 1}

/* ---- 2. in-copy links get a gold underline that draws in ---- */
.section p a:not(.btn):not([class]){position:relative;color:var(--olive-d);
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--ease),color .3s}
.section p a:not(.btn):not([class]):hover{background-size:100% 1px;color:var(--gold)}

/* ---- 3. one focus ring for the whole site ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---- 4. anchors must clear the sticky header ---- */
section[id],h1[id],h2[id],h3[id],a[id],div.wrap[id]{
  scroll-margin-top:calc(var(--chrome, 124px) + 24px)}

/* ---- 5. brand-tinted scrollbar ---- */
html{scrollbar-color:var(--sand) var(--cream-2);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--cream-2)}
::-webkit-scrollbar-thumb{background:var(--sand);border-radius:99px;
  border:3px solid var(--cream-2)}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ---- 6. photos get a warm placeholder while they decode. Scoped to
        photographic frames only — a blanket img rule paints a box behind
        every transparent PNG, which is what happened to the logo. ---- */
.frame img,.fnd-portrait img,.ba-media img,.cg-tile img,.tm-photo img,
.p-media img,.hero-media img{background-color:var(--cream-2)}

/* ---- 7. primary buttons get a fine inner rim, the way foil-stamped
          print does. Static, so it costs nothing to animate around. ---- */
.btn-primary{box-shadow:0 12px 30px rgba(89,88,65,.28),
  inset 0 1px 0 rgba(255,247,232,.16),inset 0 0 0 1px rgba(212,199,179,.14)}
.btn-primary:hover{box-shadow:0 18px 40px rgba(89,88,65,.36),
  inset 0 1px 0 rgba(255,247,232,.22),inset 0 0 0 1px rgba(var(--lume),.30)}

/* ---- 8. the tag/eyebrow reads as a printed rule, not a label ---- */
.tag{font-size:11px;letter-spacing:.34em}
.divider{width:64px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(169,152,111,.15))}
.band .divider{background:linear-gradient(90deg,var(--beige),rgba(212,199,179,.15))}

/* ---- 9. footer: a gold hairline and a pool of the clinic's light ---- */
footer.ft{border-top:1px solid rgba(212,199,179,.22)}
footer.ft::after{content:"";position:absolute;left:50%;top:-1px;width:min(760px,86%);
  height:1px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--lume),.85),transparent)}
.ft h4{letter-spacing:.01em}
.ft-bottom{letter-spacing:.02em}

/* ---- 10. selection and highlight in the brand's gold ---- */
::selection{background:rgba(169,152,111,.9);color:#fff;text-shadow:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn::before{display:none}
}

/* =====================================================================
   MEGA MENU — second pass
   Three columns of bare text read as a plain list. These add the same
   icon language as the treatment wheel, a rule under each column head,
   and a strip along the bottom that closes the panel with an action.
   Everything that moves is transform/opacity.
   ===================================================================== */

/* ---- column headings get a printed rule ---- */
.mega-h{position:relative;display:flex;align-items:center;gap:10px;
  padding-left:13px;margin-bottom:12px}
.mega-h::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(169,152,111,0))}

/* ---- icon medallion on each link ----
   An explicit grid, not flex: the icon is itself a <span>, so a
   `a > span` flex rule would catch it as well as the subtitle. */
.mega-col a{display:grid;grid-template-columns:36px minmax(0,1fr);
  column-gap:12px;row-gap:2px;align-items:center;
  grid-template-areas:"ic title" "ic sub"}
.mega-col a>.mi{grid-area:ic;align-self:center;
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(150deg,var(--white),var(--cream-2));
  border:1px solid var(--line);color:var(--olive);
  transition:transform .38s var(--ease),background-color .34s,color .34s,border-color .34s}
.mega-col a>.mi svg{width:19px;height:19px}
.mega-col a:hover>.mi{background:var(--olive-d);color:rgb(var(--lume));
  border-color:var(--gold);transform:scale(1.07)}
.mega-col a>b{grid-area:title;margin:0}
.mega-col a>span{grid-area:sub;margin-top:0}

/* ---- the closing strip ---- */
.mega-foot{position:relative;z-index:2;display:flex;align-items:center;gap:22px;
  margin:4px 14px 14px;padding:15px 20px;border-radius:14px;
  background:linear-gradient(100deg,rgba(var(--lume),.15),rgba(var(--lume),.05) 52%,transparent);
  border:1px solid var(--line);
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .55s cubic-bezier(.19,.9,.26,1)}
.has-dd:hover .mega-foot,.has-dd:focus-within .mega-foot{
  opacity:1;transform:translateY(0);transition-delay:330ms}

.mf-all{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--olive-d);font-weight:500;white-space:nowrap;
  padding-bottom:2px;border-bottom:1px solid var(--sand);
  transition:color .3s,border-color .3s}
.mf-all svg{width:16px;height:16px;transition:transform .38s var(--ease)}
.mf-all:hover{color:var(--gold);border-color:var(--gold)}
.mf-all:hover svg{transform:translateX(5px)}

.mf-meta{display:flex;align-items:center;gap:22px;margin-left:auto;flex-wrap:wrap}
.mf-meta>span{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
  white-space:nowrap}
.mf-meta svg{width:15px;height:15px;color:var(--gold);flex:none}

.mf-cta{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:11px 22px;border-radius:999px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;
  background:var(--olive-d);color:var(--cream);
  box-shadow:0 8px 20px rgba(69,69,47,.26),inset 0 0 0 1px rgba(212,199,179,.18);
  transition:transform .32s var(--ease),background-color .32s,box-shadow .32s}
.mf-cta:hover{transform:translateY(-2px);background:var(--olive);
  box-shadow:0 14px 30px rgba(69,69,47,.34),inset 0 0 0 1px rgba(var(--lume),.34)}

html.dark .mi{background:rgba(255,253,248,.05);color:rgb(var(--lume));border-color:rgba(169,152,111,.4)}
html.dark .mega-foot{background:linear-gradient(100deg,rgba(var(--lume),.10),transparent);
  border-color:rgba(212,199,179,.14)}
html.dark .mf-all{color:#e8dabb}
html.dark .mf-cta{background:#e8dabb;color:#23231b}

/* the strip stacks before it ever gets cramped */
@media(max-width:1120px){
  .mega-foot{flex-wrap:wrap;gap:14px}
  .mf-meta{margin-left:0;order:3;width:100%}
  .mf-cta{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){
  .mega-foot,.mi{transition:none!important}
  .mega-foot{opacity:1;transform:none}
}

/* One subtitle ("7 / 10 / 14 steps · BBGlow · Carbon") wrapped to a second
   line and pushed its column taller than the other two. A little more room
   and a slightly smaller subtitle keeps all nine on one line each. */
.mega-in{grid-template-columns:1fr 1fr 1fr 304px}
.mega-col{padding-left:16px;padding-right:16px}
.mega-col a{padding-left:11px;padding-right:11px}
.mega-col a>span{font-size:11px;letter-spacing:0}

/* =====================================================================
   QUICK ANSWER / KEY TAKEAWAYS
   A direct answer near the top of each service page. Search engines and
   AI systems lift short, self-contained answers like this; readers who
   only want the price get it without scrolling.
   ===================================================================== */
.qa-band{padding:34px 0 10px}
.qa{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(22px,3.4vw,46px);
  align-items:start;padding:clamp(22px,3vw,34px);border-radius:18px;
  background:linear-gradient(120deg,rgba(var(--lume),.13),rgba(var(--lume),.04) 55%,transparent);
  border:1px solid var(--line)}
.qa-q{font-size:clamp(21px,2.5vw,27px);line-height:1.25;margin:10px 0 12px;color:var(--olive-d)}
.qa-a{color:var(--ink);font-size:clamp(15px,1.6vw,16.5px);line-height:1.75;max-width:62ch}
.qa-side{border-left:1px solid var(--line);padding-left:clamp(18px,2.4vw,30px)}
.qa-h{display:block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin-bottom:14px}
.qa-side ul{list-style:none;margin:0;padding:0}
.qa-side li{position:relative;padding-left:26px;margin-bottom:11px;font-size:14px;
  line-height:1.6;color:var(--muted)}
.qa-side li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  border-radius:50%;background:var(--gold);opacity:.55}
html.dark .qa-q{color:#e8dabb}
@media(max-width:820px){
  .qa{grid-template-columns:1fr;gap:22px}
  .qa-side{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:20px}
}
.qa-rel{margin-top:16px;font-size:13.5px;color:var(--muted)}
.qa-rel a{color:var(--olive-d);border-bottom:1px solid var(--sand);transition:color .3s,border-color .3s}
.qa-rel a:hover{color:var(--gold);border-color:var(--gold)}
html.dark .qa-rel a{color:#e8dabb}

/* =====================================================================
   BLOG — index cards and article body
   ===================================================================== */
.pc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:34px}
.pc{position:relative;display:flex;flex-direction:column;padding:30px 30px 26px;border-radius:18px;
  background:var(--white);border:1px solid var(--line);overflow:hidden;
  box-shadow:0 14px 34px rgba(69,69,47,.10);
  transition:transform .5s var(--ease),box-shadow .5s,border-color .5s}
.pc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(150deg,rgba(var(--lume),.16),transparent 60%);transition:opacity .5s}
.pc:hover{transform:translateY(-6px);border-color:var(--sand);
  box-shadow:0 30px 62px rgba(69,69,47,.20)}
.pc:hover::before{opacity:1}
.pc>*{position:relative;z-index:1}
.pc-cat{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:500}
.pc-t{font-family:'Cormorant Garamond',serif;font-size:clamp(21px,2.2vw,26px);line-height:1.24;
  color:var(--olive-d);margin:12px 0 10px;font-weight:600}
.pc-d{font-size:14px;color:var(--muted);line-height:1.65;flex:1}
.pc-more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--olive-d);font-weight:500}
.pc-more svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.pc:hover .pc-more{color:var(--gold)}
.pc:hover .pc-more svg{transform:translateX(5px)}

.post{max-width:760px;margin:0 auto}
.post-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.post-lead{font-family:'Cormorant Garamond',serif;font-size:clamp(19px,2.1vw,23px);line-height:1.55;
  color:var(--olive-d);font-style:italic}
.post h2{font-size:clamp(23px,2.6vw,30px);margin:34px 0 12px;color:var(--olive-d);line-height:1.25}
.post p{color:var(--ink);font-size:16px;line-height:1.8;margin-bottom:14px}
.post-note{margin-top:30px;padding:16px 20px;border-left:2px solid var(--sand);
  background:var(--cream-2);border-radius:0 10px 10px 0;
  font-size:13.5px!important;color:var(--muted)!important;line-height:1.65!important}
.crumbs{margin-top:14px;font-size:12.5px;color:var(--beige);letter-spacing:.04em}
.crumbs a{color:var(--beige);border-bottom:1px solid rgba(212,199,179,.4)}
.crumbs a:hover{color:#fff}
html.dark .pc-t,html.dark .post h2,html.dark .post-lead{color:#e8dabb}
@media(max-width:820px){.pc-grid{grid-template-columns:1fr}}

/* Seven cards in a three-column grid leaves one alone on the last row.
   This centres it only in that case — :nth-child(3n+1) matches a card in
   the first column, and :last-child means nothing follows it. */
@media(min-width:981px){
  .tm-grid .tm:last-child:nth-child(3n+1){grid-column:2}
}
.pc-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.pc-grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.pc-grid-3{grid-template-columns:1fr}}

/* =====================================================================
   ARTICLE CARDS
   Arched like the frames elsewhere on the site, with the same icon set as
   the treatment wheel so the blog reads as part of one system. The index
   numeral sits behind the content as a watermark. Only transform and
   opacity animate.
   ===================================================================== */
.pc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:38px}
.pc{position:relative;display:flex;flex-direction:column;isolation:isolate;
  /* the arch radius used on photo frames is far too deep here: at 30px down
     a 190px curve pushes content 87px inward. 104px clears at 54px. */
  padding:54px 30px 26px;overflow:hidden;
  border-radius:104px 104px 16px 16px;
  background:linear-gradient(168deg,var(--white) 42%,var(--cream-2));
  border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(69,69,47,.11),inset 0 0 0 1px rgba(255,253,248,.9);
  transition:transform .55s var(--ease),box-shadow .55s,border-color .55s}
/* warm pool that fades up on hover — opacity only */
.pc::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  background:radial-gradient(420px 260px at 50% -10%,rgba(var(--lume),.34),transparent 68%);
  transition:opacity .55s}
/* gold hairline crescent tracing the arch */
.pc::after{content:"";position:absolute;inset:7px;z-index:-1;pointer-events:none;opacity:0;
  border:1px solid var(--gold);border-radius:inherit;transition:opacity .5s}
.pc:hover{transform:translateY(-7px);border-color:var(--sand);
  box-shadow:0 32px 66px rgba(69,69,47,.22),0 0 54px 6px rgba(var(--lume),.34),
             inset 0 0 0 1px rgba(255,253,248,.9)}
.pc:hover::before{opacity:1}
.pc:hover::after{opacity:.5}
.pc:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.pc-no{position:absolute;right:26px;top:40px;z-index:-1;
  font-family:'Cormorant Garamond',serif;font-size:74px;font-weight:600;line-height:1;
  color:var(--gold);opacity:.13;pointer-events:none;transition:opacity .5s,transform .6s var(--ease)}
.pc:hover .pc-no{opacity:.24;transform:translateY(-3px)}

.pc-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pc-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;
  background:linear-gradient(150deg,#fffdf8,var(--cream-2));
  border:1px solid var(--sand);color:var(--olive);
  box-shadow:0 4px 12px rgba(69,69,47,.10);
  transition:transform .5s var(--ease),background-color .45s,color .45s,border-color .45s}
.pc-ic svg{width:23px;height:23px}
.pc:hover .pc-ic{transform:translateY(-2px) scale(1.08);background:var(--olive-d);
  color:rgb(var(--lume));border-color:var(--gold)}
.pc-cat{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:500}

.pc-t{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,2.3vw,27px);line-height:1.22;
  color:var(--olive-d);margin:0 0 10px;font-weight:600;letter-spacing:-.005em}
.pc-d{font-size:14px;color:var(--muted);line-height:1.66;flex:1;margin:0}

.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.pc-more{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--olive-d);font-weight:500;transition:color .35s}
.pc-more svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.pc:hover .pc-more{color:var(--gold)}
.pc:hover .pc-more svg{transform:translateX(5px)}
.pc-read{font-size:11px;color:var(--muted);letter-spacing:.06em;white-space:nowrap}

.pc-grid-3{grid-template-columns:repeat(3,1fr)}

html.dark .pc{background:linear-gradient(168deg,rgba(44,44,34,.94),rgba(28,28,22,.86))}
html.dark .pc-t{color:#e8dabb}
html.dark .pc-ic{background:rgba(255,253,248,.06);color:rgb(var(--lume));border-color:rgba(169,152,111,.5)}

@media(max-width:980px){.pc-grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:820px){
  .pc-grid,.pc-grid-3{grid-template-columns:1fr}
  .pc{border-radius:80px 80px 16px 16px;padding:44px 24px 22px}
  .pc-no{font-size:58px;right:18px;top:30px}
}
@media(prefers-reduced-motion:reduce){
  .pc,.pc-ic,.pc-no,.pc-more svg{transition:none!important}
}