/* =====================================================================
   London Real Skin — homepage
   Design system: "The Examination"

   The organising idea is the dermatoscope. This is a clinic whose whole
   argument is that it looks at skin properly before it treats it, so the
   page is built around magnification: macro skin plates, a clinical index
   set in mono, and one circular lens that does the remembering.

   Type roles
     Bodoni Moda   — display. Didone contrast, used large and sparingly.
     Hanken Grotesk— body and UI. Carried over from the client's own brand.
     IBM Plex Mono — utility. Index numbers, prices, labels. Reads as
                     clinical record-keeping, not decoration.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:#2A4664;
  --ink-deep:#16293C;
  --ink-mid:#3A5878;
  --focus:#1DB0BA;
  --focus-deep:#15828A;
  --paper:#E7EEF5;
  --paper-pure:#F5F9FC;
  --white:#FFFFFF;
  --muted:#5F7B92;

  --line:rgba(42,70,100,.15);
  --line-soft:rgba(42,70,100,.07);
  --line-light:rgba(231,238,245,.22);

  --disp:"Bodoni Moda",Didot,"Times New Roman",serif;
  --body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:clamp(20px,4vw,60px);
  --wrap:1480px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  font-size:clamp(15.5px,1.02vw,17px);
  line-height:1.62;
  color:var(--ink);
  background:var(--paper-pure);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- 2. Typography primitives ---------- */
.u-display{
  font-family:var(--disp);
  font-weight:400;
  font-optical-sizing:auto;
  line-height:.98;
  letter-spacing:-.018em;
}
.u-display em{font-style:italic}

.u-h1{font-size:clamp(3rem,7.6vw,7.4rem)}
.u-h2{font-size:clamp(2.3rem,4.6vw,4.3rem)}
.u-h3{font-size:clamp(1.45rem,2.1vw,2.05rem)}

/* An eyebrow sitting directly above a heading gets the house gap. Every section
   that predates this rule set the same 20px on its own h2 class; this catches
   the headings that carry no section class of their own, which were otherwise
   butting straight up against the eyebrow.
   The :where() wraps only the second half, so the specificity is exactly one
   class — enough to beat the `h1,h2,h3,h4,p{margin:0}` reset above, and low
   enough that a section's own h2 rule wins on source order, since every one of
   those is declared further down this file. Scoped to .u-h2 rather than every
   display heading, so the hero h1s keep the spacing their own eyebrow already
   gives them. */
.u-eyebrow + :where(.u-h2){margin-top:20px}

.u-eyebrow{
  font-family:var(--mono);
  font-size:clamp(.76rem,.86vw,.85rem);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--focus-deep);
  display:flex;
  align-items:center;
  gap:.9em;
}
.u-eyebrow::before{
  content:"";
  width:36px;height:1px;
  background:var(--focus);
  flex:none;
}
.u-eyebrow--light{color:var(--focus)}
.u-eyebrow--bare::before{display:none}

.u-lede{
  font-size:clamp(1.02rem,1.32vw,1.2rem);
  line-height:1.58;
  color:var(--muted);
  text-wrap:pretty;
}
.u-idx{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  color:var(--focus-deep);
  font-weight:500;
}

/* ---------- 3. Layout primitives ---------- */
.u-wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.u-sec{padding-block:clamp(72px,10vw,152px)}
.u-sec--tight{padding-block:clamp(52px,6vw,92px)}

/* 12-col grid used for every asymmetric section */
.u-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(20px,2.4vw,38px);
}

.u-dark{background:var(--ink-deep);color:var(--paper)}
.u-dark .u-lede{color:rgba(231,238,245,.66)}

/* ---------- 4. Buttons ---------- */
.u-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.75em;
  font-family:var(--body);
  font-weight:700;
  font-size:.735rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  line-height:1;
  padding:1.24em 2.05em;
  border:1px solid transparent;
  border-radius:100px;
  position:relative;
  overflow:hidden;
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
  will-change:transform;
}
.u-btn > span{position:relative;z-index:2}
.u-btn::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .55s var(--ease-out);
}
.u-btn:hover{transform:translateY(-2px)}
.u-btn:hover::after{transform:scaleX(1);transform-origin:left center}

.u-btn--focus{background:var(--focus);color:#04252A}
.u-btn--focus::after{background:var(--ink)}
.u-btn--focus:hover{color:var(--paper)}

.u-btn--ink{
  background:var(--ink);
  color:var(--paper);
  box-shadow:0 14px 30px -16px rgba(42,70,100,.75);
}
.u-btn--ink::after{background:var(--focus)}
.u-btn--ink:hover{color:#04252A}

.u-btn--ghost{border-color:var(--line);color:var(--ink)}
.u-btn--ghost::after{background:var(--ink)}
.u-btn--ghost:hover{color:var(--paper);border-color:var(--ink)}

.u-btn--light{border-color:var(--line-light);color:var(--paper)}
.u-btn--light::after{background:var(--paper)}
.u-btn--light:hover{color:var(--ink-deep);border-color:var(--paper)}

/* Text link with a rule that draws in */
.u-link{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  padding-bottom:.5em;
  position:relative;
  color:var(--ink);
}
.u-link::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:currentColor;
  opacity:.28;
  transform-origin:right;
  transform:scaleX(1);
  transition:transform .45s var(--ease-out),opacity .45s var(--ease);
}
.u-link:hover::after{transform:scaleX(0)}
.u-link .u-link__ar{transition:transform .45s var(--ease-out)}
.u-link:hover .u-link__ar{transform:translateX(5px)}
.u-link--light{color:var(--paper)}

/* ---------- 5. Scroll reveal ---------- */
.r{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .95s var(--ease-out),transform .95s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.r.is-in{opacity:1;transform:none}

.r-clip{
  opacity:0;
  transform:scale(1.045);
  transition:opacity 1s var(--ease),transform 1.35s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.r-clip.is-in{opacity:1;transform:none}

/* Line-by-line headline reveal */
.r-line{display:block;overflow:hidden}
.r-line > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.05s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.is-in .r-line > span,.r-line.is-in > span{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .r,.r-clip,.r-line > span{opacity:1;transform:none}
}

/* (The left scroll-progress rail was removed at the client's request.) */
.page{margin-left:0}

/* =====================================================================
   7. Header
   ===================================================================== */
/* The masthead floats over the hero, then resolves into a frosted bar once
   you scroll past it. The hero is pulled up under it by --mast-h (set in JS). */
.masthead{
  position:sticky;
  top:0;
  z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  color:var(--paper);
  transition:background .55s var(--ease),border-color .55s var(--ease),
             box-shadow .55s var(--ease),color .55s var(--ease);
}
.masthead:not(.is-stuck) .brand{position:relative}
.brand__logo{
  height:clamp(30px,3vw,40px);
  width:auto;
  display:block;
  transition:opacity .45s var(--ease);
}
.brand__logo--dark{position:absolute;top:0;left:0;opacity:0}
.masthead.is-stuck .brand__logo--light{opacity:0}
.masthead.is-stuck .brand__logo--dark{opacity:1}

.brand__mark{border-color:rgba(231,238,245,.45)}
.masthead:not(.is-stuck) .brand:hover .brand{position:relative}
.brand__logo{
  height:clamp(30px,3vw,40px);
  width:auto;
  display:block;
  transition:opacity .45s var(--ease);
}
.brand__logo--dark{position:absolute;top:0;left:0;opacity:0}
.masthead.is-stuck .brand__logo--light{opacity:0}
.masthead.is-stuck .brand__logo--dark{opacity:1}

.brand__mark{background:var(--paper);color:var(--ink-deep)}
.masthead:not(.is-stuck) .brand__name small{color:rgba(231,238,245,.6)}
.masthead:not(.is-stuck) .icon-btn{border-color:rgba(231,238,245,.28)}
.masthead:not(.is-stuck) .icon-btn:hover{background:var(--paper);color:var(--ink-deep);border-color:var(--paper)}
.masthead:not(.is-stuck) .burger{border-color:rgba(231,238,245,.28)}
.masthead:not(.is-stuck) .nav__a[aria-current="page"]{color:var(--focus)}

.masthead.is-stuck{
  background:rgba(245,249,252,.88);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--line-soft);
  color:var(--ink);
  box-shadow:0 12px 40px -30px rgba(22,41,60,.7);
}
.masthead__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(16px,3vw,44px);
  min-height:clamp(70px,7vw,92px);
}
.brand{display:flex;align-items:center;gap:.72rem;flex:none}
.brand{position:relative}
.brand__logo{
  height:clamp(30px,3vw,40px);
  width:auto;
  display:block;
  transition:opacity .45s var(--ease);
}
.brand__logo--dark{position:absolute;top:0;left:0;opacity:0}
.masthead.is-stuck .brand__logo--light{opacity:0}
.masthead.is-stuck .brand__logo--dark{opacity:1}

.brand__mark{
  width:40px;height:40px;
  border:1px solid var(--ink);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--disp);
  font-size:.86rem;
  letter-spacing:.02em;
  flex:none;
  transition:background .45s var(--ease),color .45s var(--ease);
}
.brand:hover .brand{position:relative}
.brand__logo{
  height:clamp(30px,3vw,40px);
  width:auto;
  display:block;
  transition:opacity .45s var(--ease);
}
.brand__logo--dark{position:absolute;top:0;left:0;opacity:0}
.masthead.is-stuck .brand__logo--light{opacity:0}
.masthead.is-stuck .brand__logo--dark{opacity:1}

.brand__mark{background:var(--ink);color:var(--paper)}
.brand__name{
  font-family:var(--disp);
  font-size:1.06rem;
  line-height:1.02;
  letter-spacing:.01em;
}
.brand__name small{
  display:block;
  font-family:var(--mono);
  font-size:.535rem;
  letter-spacing:.3em;
  color:var(--muted);
  margin-top:.34em;
}

.nav{display:flex;align-items:center;gap:clamp(12px,1.55vw,26px)}
.nav__a{
  font-size:.715rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.11em;
  position:relative;
  padding-block:.5em;
  white-space:nowrap;
}
.nav__a::after{
  content:"";
  position:absolute;
  left:0;bottom:.1em;
  width:100%;height:1px;
  background:var(--focus);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav__a:hover::after,.nav__a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__a[aria-current="page"]{color:var(--focus-deep)}

/* ---- Treatments dropdown ----
   The parent stays a real link to the index; the caret is decoration and the
   invisible button beside it is what keyboard and touch users operate, so the
   link is never hijacked into a toggle. Hover opens it on pointer devices;
   the button's aria-expanded is the single source of truth for the open state. */
.nav__has{position:relative;display:flex;align-items:center}
.nav__car{
  width:11px;height:11px;margin-left:.45em;vertical-align:middle;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--ease);
}
.nav__has:hover .nav__car{transform:rotate(180deg)}
/* Sits over the caret only, so clicking the word still follows the link. */
.nav__toggle{position:absolute;right:-2px;top:0;bottom:0;width:18px;z-index:2}
.nav__menu{
  position:absolute;top:100%;left:-14px;z-index:60;
  min-width:210px;padding:8px;margin-top:10px;
  background:var(--paper-pure);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 26px 50px -28px rgba(22,41,60,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
/* Hover for pointers, the toggle's own state for everyone else. Deliberately
   no :focus-within here — with it, Escape could never close the panel, because
   closing returns focus to the toggle and focus-within reopened it at once. */
.nav__has:hover .nav__menu,
.nav__toggle[aria-expanded="true"] ~ .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__item{
  display:block;padding:9px 12px;border-radius:3px;
  font-size:.8rem;font-weight:600;color:var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.nav__item:hover,.nav__item:focus-visible{background:var(--paper);color:var(--focus-deep)}
.nav__item + .nav__item{margin-top:1px}
/* The bar is transparent over a hero until it sticks, so the panel needs its
   own solid ground either way; only the trigger colour follows the bar. */
@media (prefers-reduced-motion:reduce){
  .nav__menu{transition:none}
  .nav__car{transition:none}
}

/* Drawer: a child row indented under its parent. */
.drawer__sub{
  display:block;
  padding-left:calc(2.6em + 6px);
  margin-top:-.2em;
  font-family:var(--body);
  font-size:clamp(.95rem,2.4vw,1.05rem);
  font-weight:500;
  color:rgba(231,238,245,.62);
  padding-block:.5em;
  transition:color .3s var(--ease);
}
.drawer__sub::before{content:"\2014";margin-right:.6em;opacity:.5}
.drawer__sub:hover{color:var(--focus)}
@media (max-width:1180px){.nav{display:none}}

.masthead__act{display:flex;align-items:center;gap:clamp(8px,1.1vw,16px);flex:none}
.icon-btn{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.icon-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.masthead__phone{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  text-align:right;
  padding-right:.2em;
}
.masthead__phone small{
  font-family:var(--mono);
  font-size:.535rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  opacity:.6;
  margin-bottom:.34em;
}
.masthead__phone b{
  font-size:clamp(1rem,1.15vw,1.18rem);
  font-weight:800;
  letter-spacing:-.005em;
  white-space:nowrap;
  transition:color .35s var(--ease);
}
.masthead__phone:hover b{color:var(--focus)}
@media (max-width:1300px){.masthead__phone{display:none}}

.masthead__cta{padding:1.05em 1.55em;font-size:.7rem}
@media (max-width:620px){.masthead__cta{display:none}}

.burger{display:none;width:40px;height:40px;place-items:center;border-radius:50%;border:1px solid var(--line)}
.burger span{display:block;width:17px;height:1.5px;background:currentColor;position:relative;transition:background .3s}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:currentColor;
  transition:transform .45s var(--ease-out);
}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger.is-open span{background:transparent}
.burger.is-open span::before{transform:translateY(5.5px) rotate(45deg)}
.burger.is-open span::after{transform:translateY(-5.5px) rotate(-45deg)}
@media (max-width:1180px){.burger{display:grid}}

/* Mobile drawer */
.drawer{
  position:fixed;
  inset:0;
  z-index:70;
  background:var(--ink-deep);
  color:var(--paper);
  padding:clamp(24px,6vw,56px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  transform:translateY(-100%);
  transition:transform .72s var(--ease-out);
  overflow-y:auto;
}
.drawer.is-open{transform:none}
.drawer__close{position:absolute;top:22px;right:22px;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-light);border-radius:50%}
.drawer__a{
  font-family:var(--disp);
  font-size:clamp(1.9rem,7vw,2.9rem);
  line-height:1.22;
  border-bottom:1px solid var(--line-light);
  padding-block:.36em;
  display:flex;
  align-items:baseline;
  gap:.7em;
}
.drawer__a .u-idx{color:var(--focus);font-size:.62rem}
.drawer__foot{margin-top:26px;display:flex;flex-direction:column;gap:14px}

/* =====================================================================
   8. Hero
   ===================================================================== */
.hero{
  position:relative;
  margin-top:calc(-1 * var(--mast-h,88px));
  min-height:min(100svh,940px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--ink-deep);
  color:var(--paper);
  isolation:isolate;
}
.hero__stage{position:absolute;inset:0;z-index:-2}
.hero__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .9s var(--ease);
  /* --flip:-1 mirrors a slide so its subject sits clear of the headline.
     Applied on the slide, not the ::before, so the Ken Burns pan is untouched. */
  transform:scaleX(var(--flip,1));
}
.hero__slide.is-on{opacity:1}
.hero__slide::before{
  content:"";
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:var(--pos,center);
  background-image:var(--img);
  /* real clinic photography is warm and mixed-source; a light cool grade
     pulls the whole slideshow into the brand palette without gutting it */
  filter:saturate(.78) contrast(1.05) brightness(.94) hue-rotate(-6deg);
  transform:scale(1.05);
  animation:kb 5.4s var(--ease) forwards paused;
  will-change:transform;
}
.hero__slide.is-on::before{animation-play-state:running}
@keyframes kb{
  from{transform:scale(1.05) translate3d(0,0,0)}
  to{transform:scale(1.22) translate3d(-2%,-1.4%,0)}
}

/* Legibility scrim — heavier on the left, where the type sits */
.hero__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(100deg,rgba(12,26,40,.96) 0%,rgba(12,26,40,.93) 28%,rgba(12,26,40,.74) 45%,rgba(12,26,40,.34) 66%,rgba(12,26,40,.52) 100%),
    linear-gradient(to top,rgba(12,26,40,.82) 0%,transparent 44%);
}
.hero__in{
  width:100%;
  padding-top:clamp(80px,13vw,150px);
  padding-bottom:clamp(30px,4vw,54px);
}
.hero__grid{align-items:end}
.hero__copy{grid-column:1/span 6;max-width:640px}
@media (max-width:1080px){.hero__copy{grid-column:1/span 8}}
@media (max-width:760px){.hero__copy{grid-column:1/-1}}

.hero__eyebrow{margin-bottom:clamp(18px,2.4vw,30px);color:var(--focus)}
.hero__eyebrow::before{background:var(--focus)}

/* Sized so "Expertly Cared For" holds one line inside the copy column at every
   width. The column stops growing once --wrap caps the page, so the clamp's
   upper bound is what actually decides it above ~1480px, not the vw term. */
.hero__h1{
  font-size:clamp(2.4rem,5.4vw,4.9rem);
  margin-bottom:clamp(18px,2.2vw,28px);
}
.hero__h1 em{
  font-style:italic;
  color:var(--focus);
}
.hero__lede{
  color:rgba(231,238,245,.76);
  max-width:47ch;
  margin-bottom:clamp(22px,2.6vw,32px);
}

.hero__points{
  display:flex;
  flex-direction:column;
  gap:.62em;
  margin-bottom:clamp(26px,3vw,38px);
  border-left:1px solid rgba(231,238,245,.2);
  padding-left:clamp(16px,1.6vw,24px);
}
.hero__point{
  display:flex;
  align-items:flex-start;
  gap:.8em;
  font-size:.905rem;
  line-height:1.42;
  color:rgba(231,238,245,.93);
}
.hero__point svg{
  width:13px;height:13px;
  flex:none;
  margin-top:.34em;
  stroke:var(--focus);
  fill:none;
  stroke-width:2.2;
}

.hero__actions{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.6vw,22px);
  flex-wrap:wrap;
  margin-bottom:clamp(24px,2.8vw,34px);
}

/* Google reviews widget */
.gwidget{
  display:inline-flex;
  align-items:center;
  gap:.95rem;
  padding:.8rem 1.15rem;
  border:1px solid rgba(231,238,245,.2);
  border-radius:6px;
  background:rgba(12,26,40,.42);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.gwidget__g{
  width:30px;height:30px;flex:none;
  display:grid;place-items:center;
  background:var(--white);
  border-radius:50%;
  padding:6px;
}
.gwidget__g svg{width:100%;height:100%;display:block}
.gwidget__score{
  font-family:var(--disp);
  font-size:1.42rem;
  line-height:1;
}
.gwidget__stars{display:flex;gap:1.5px;margin-bottom:3px}
.gwidget__stars svg{width:12px;height:12px;fill:#F5B544}
.gwidget__txt{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.09em;
  color:rgba(231,238,245,.66);
  text-transform:uppercase;
}

/* Promo slider, bottom-right of hero */
.promo{
  grid-column:9/span 4;
  max-width:400px;
  justify-self:end;
  position:relative;
  align-self:end;
}
@media (max-width:1080px){.promo{grid-column:1/span 7;margin-top:30px}}
@media (max-width:760px){.promo{grid-column:1/-1}}

.promo__win{
  position:relative;
  background:rgba(231,238,245,.72);
  border:1px solid rgba(255,255,255,.28);
  color:var(--ink-deep);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 34px 70px -40px rgba(0,0,0,.85);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
}
.promo__track{display:flex;transition:transform .8s var(--ease-out)}
.promo__item{
  flex:0 0 100%;
  padding:clamp(14px,1.35vw,18px);
  display:flex;
  gap:clamp(12px,1.1vw,16px);
  align-items:stretch;
}
.promo__thumb{
  flex:none;
  width:clamp(56px,4.6vw,68px);
  align-self:stretch;
  height:auto;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 10px 16px rgba(22,41,60,.22));
}
.promo__text{display:flex;flex-direction:column;gap:.28rem;min-width:0}
.promo__kicker{
  font-family:var(--mono);
  font-size:.545rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--focus-deep);
}
.promo__title{
  font-family:var(--disp);
  font-size:clamp(1rem,1.2vw,1.16rem);
  line-height:1.14;
}
.promo__price{
  font-family:var(--mono);
  font-size:.735rem;
  font-weight:600;
  color:var(--ink);
  letter-spacing:.01em;
}
.promo__blurb{font-size:.735rem;color:var(--muted);line-height:1.44}
.promo__cta{
  margin-top:.15rem;
  align-self:flex-start;
  font-family:var(--mono);
  font-size:.585rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  border-bottom:1px solid var(--focus);
  padding-bottom:.28em;
  color:var(--focus-deep);
}
.promo__cta:hover{gap:.85em}
.promo__nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem clamp(14px,1.35vw,18px);
  border-top:1px solid rgba(42,70,100,.1);
}
.promo__dots{display:flex;gap:7px}
.promo__dot{
  width:22px;height:2px;
  background:var(--line);
  transition:background .4s var(--ease);
}
.promo__dot.is-on{background:var(--focus)}
.promo__arrows{display:flex;gap:5px}
.promo__arrow{
  width:28px;height:28px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.promo__arrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.promo__arrow svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.7}

.hero__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:clamp(26px,3vw,40px);
  padding-top:16px;
  border-top:1px solid rgba(231,238,245,.16);
}
.hero__scroll{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-family:var(--mono);
  font-size:.615rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(231,238,245,.6);
}
.hero__scroll svg{width:12px;height:12px;stroke:var(--focus);fill:none;stroke-width:1.8;animation:bob 2.3s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.hero__count{
  display:flex;
  align-items:center;
  gap:.65em;
  font-family:var(--mono);
  font-size:.615rem;
  letter-spacing:.14em;
  color:rgba(231,238,245,.6);
}
.hero__count b{color:var(--focus);font-weight:500}
@media (max-width:620px){.hero__count{display:none}}

/* =====================================================================
   8b. As featured in
   ===================================================================== */
.seen{
  background:var(--paper-pure);
  border-bottom:1px solid var(--line-soft);
}
.seen__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(18px,3vw,44px);
  flex-wrap:wrap;
  padding-block:clamp(18px,2.2vw,28px);
}
.seen__lbl{
  font-family:var(--mono);
  font-size:.635rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  flex:none;
}
.seen__logo{
  height:clamp(20px,2.1vw,29px);
  width:auto;
  max-width:clamp(96px,13vw,158px);
  object-fit:contain;
  /* the mastheads arrive in assorted blacks; multiply drops the white boxes
     and the filter settles them into one weight against the pale ground */
  mix-blend-mode:multiply;
  opacity:.72;
  filter:grayscale(1) contrast(1.08);
  transition:opacity .4s var(--ease),filter .4s var(--ease);
}
.seen__logo:hover{opacity:1;filter:grayscale(0) contrast(1)}
@media (max-width:760px){
  .seen__in{justify-content:center;gap:22px}
  .seen__lbl{flex:0 0 100%;text-align:center;margin-bottom:2px}
}

/* =====================================================================
   9. Reviews marquee
   ===================================================================== */
.revs{
  background:var(--paper);
  border-block:1px solid var(--line-soft);
  padding-block:clamp(46px,5.4vw,78px);
  overflow:hidden;
}
.revs__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:clamp(26px,3vw,40px);
}
.revs__score{
  display:flex;
  align-items:center;
  gap:1rem;
}
.revs__num{font-family:var(--disp);font-size:clamp(2.4rem,4vw,3.4rem);line-height:.9}
.revs__stars{display:flex;gap:2px;margin-bottom:5px}
.revs__stars svg{width:15px;height:15px;fill:#F5B544}
.revs__meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}

.revs__viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.revs__track{display:flex;gap:clamp(16px,1.8vw,26px);width:max-content;animation:marquee 74s linear infinite}
.revs__viewport:hover .revs__track,.revs__viewport:focus-within .revs__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.rev{
  flex:0 0 clamp(290px,26vw,378px);
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:4px;
  padding:clamp(20px,2vw,28px);
  display:flex;
  flex-direction:column;
  gap:.85rem;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease);
}
.rev:hover{transform:translateY(-4px);box-shadow:0 26px 50px -38px rgba(22,41,60,.6)}
.rev__top{display:flex;align-items:center;gap:.7rem}
.rev__av{
  width:34px;height:34px;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--mono);
  font-size:.72rem;
  flex:none;
}
.rev__who{font-weight:700;font-size:.845rem;line-height:1.2}
.rev__when{font-family:var(--mono);font-size:.6rem;color:var(--muted);letter-spacing:.06em}
.rev__stars{display:flex;gap:1.5px}
.rev__stars svg{width:12px;height:12px;fill:#F5B544}
.rev__body{
  font-size:.855rem;
  line-height:1.56;
  color:var(--ink-mid);
  display:-webkit-box;
  -webkit-line-clamp:6;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.rev.is-open .rev__body{-webkit-line-clamp:unset;overflow:visible}
.rev__more{
  align-self:flex-start;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--focus-deep);
  border-bottom:1px solid var(--focus);
  padding-bottom:.25em;
  transition:color .35s var(--ease)}
.rev__more:hover{color:var(--ink)}
.rev__g{
  margin-top:auto;
  font-family:var(--mono);
  font-size:.575rem;
  letter-spacing:.13em;
  color:var(--muted);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:.55em;
}
.rev__g-mark{width:14px;height:14px;flex:none;display:block}

/* =====================================================================
   10. About
   ===================================================================== */
.about{position:relative;overflow:hidden}
.about__grid{align-items:center;row-gap:clamp(30px,4vw,54px)}
.about__media{grid-column:1/span 5;position:relative}
@media (max-width:900px){.about__media{grid-column:1/-1}}
.about__img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:3px;
}
.about__inset{
  position:absolute;
  right:-14%;
  bottom:-9%;
  width:56%;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:3px;
  border:7px solid var(--paper-pure);
  box-shadow:0 30px 60px -40px rgba(22,41,60,.75);
}
@media (max-width:900px){.about__inset{right:0;width:44%}}

.about__copy{grid-column:7/span 6}
@media (max-width:900px){.about__copy{grid-column:1/-1}}
.about__h2{margin:clamp(16px,1.8vw,24px) 0 clamp(16px,1.8vw,22px)}
.about__p{color:var(--muted);margin-bottom:1.05em;max-width:52ch;text-wrap:pretty}
/* The clinic's second heading in this column. Deliberately a step down from
   .about__h2 rather than a match for it: the section still has one lead
   heading, and the hairline does the work of separating the two blocks. */
.about__sub{
  font-size:clamp(1.2rem,1.6vw,1.5rem);
  line-height:1.2;
  color:var(--ink-deep);
  text-wrap:balance;
  margin-top:clamp(24px,2.8vw,34px);
  padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line-soft);
  margin-bottom:clamp(14px,1.6vw,20px);
}

.about__stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,20px);
  margin:clamp(26px,3vw,38px) 0 clamp(22px,2.4vw,30px);
  padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line);
}
@media (max-width:560px){.about__stats{grid-template-columns:repeat(2,1fr);row-gap:22px}}
.about__stat b{
  display:block;
  font-family:var(--disp);
  font-size:clamp(1.7rem,2.8vw,2.5rem);
  line-height:1;
  margin-bottom:.34em;
}
.about__stat span{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1.42;
  display:block;
}
.about__sig{
  font-family:var(--mono);
  font-size:.645rem;
  letter-spacing:.1em;
  color:var(--focus-deep);
  margin-bottom:clamp(20px,2.2vw,26px);
}

/* =====================================================================
   11. Before & after — dark plate, matching the client's own layout
   ===================================================================== */
.ba{background:var(--ink);color:var(--paper)}   /* mid navy — Treatments below is --ink-deep */
.ba__head{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(20px,2.4vw,38px);
  align-items:end;
  margin-bottom:clamp(28px,3.2vw,44px);
}
.ba__intro{grid-column:1/span 6}
.ba__note{grid-column:8/span 4;align-self:end}
.ba__head-ctrl{grid-column:12/span 1;justify-self:end;align-self:end}
@media (max-width:900px){
  .ba__intro,.ba__note{grid-column:1/-1}
  .ba__head-ctrl{grid-column:1/-1;justify-self:start}
}
.ba__h2{margin:clamp(14px,1.6vw,20px) 0 0}

.ba__tabs{
  display:flex;
  gap:clamp(8px,.9vw,12px);
  margin-bottom:clamp(28px,3.2vw,44px);
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:4px;
}
.ba__tabs::-webkit-scrollbar{display:none}
.ba__tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.92em 1.55em;
  border:1px solid rgba(231,238,245,.26);
  border-radius:100px;
  font-size:clamp(.83rem,.95vw,.92rem);
  font-weight:600;
  letter-spacing:.005em;
  white-space:nowrap;
  color:rgba(231,238,245,.72);
  background:rgba(231,238,245,.05);
  transition:color .35s var(--ease),background .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease-out);
}
.ba__tab:hover{
  color:var(--paper);
  border-color:rgba(231,238,245,.55);
  background:rgba(231,238,245,.12);
  transform:translateY(-2px);
}
.ba__tab[aria-selected="true"]{
  background:var(--paper);
  border-color:var(--paper);
  color:var(--ink-deep);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.6);
}
.ba__tab em{
  font-style:normal;
  font-family:var(--mono);
  font-size:.56rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--focus);
  background:rgba(29,176,186,.15);
  border-radius:100px;
  padding:.35em .7em;
  line-height:1;
}
.ba__tab[aria-selected="true"] em{color:var(--focus-deep);background:rgba(29,176,186,.16)}

.ba__panel[hidden]{display:none}
.ba__viewport{overflow:hidden}
.ba__cases{
  display:flex;
  gap:clamp(18px,2.2vw,32px);
  transition:transform .8s var(--ease-out);
}
.ba__case{flex:0 0 calc((100% - clamp(18px,2.2vw,32px)) / 2)}
@media (max-width:900px){.ba__case{flex:0 0 100%}}
.ba__ctrl{display:flex;gap:10px}
.ba__arrow{
  width:46px;height:46px;
  display:grid;place-items:center;
  border:1px solid var(--line-light);
  border-radius:50%;
  color:var(--paper);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),opacity .3s;
}
.ba__arrow:hover:not(:disabled){background:var(--paper);color:var(--ink-deep);border-color:var(--paper)}
.ba__arrow:disabled{opacity:.28;cursor:default}
.ba__arrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}

.ba__frame{
  background:rgba(231,238,245,.075);
  border:1px solid var(--line-light);
  border-radius:14px;
  padding:clamp(12px,1.2vw,18px);
  height:100%;
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
.ba__case:hover .ba__frame{background:rgba(231,238,245,.085);border-color:rgba(231,238,245,.3)}

.cmp{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:8px;
  background:var(--ink);
  cursor:ew-resize;
  user-select:none;
  touch-action:pan-y;
}
.cmp__side{position:absolute;inset:0;background-size:cover;background-position:center}
.cmp__after{clip-path:inset(0 0 0 var(--pos,50%))}
.cmp__tag{
  position:absolute;
  bottom:12px;
  font-family:var(--body);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:.5em .9em;
  border-radius:100px;
  background:rgba(12,26,40,.62);
  color:var(--paper);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
.cmp__tag--b{left:12px}
.cmp__tag--a{right:12px}
.cmp__handle{
  position:absolute;
  top:0;bottom:0;
  left:var(--pos,50%);
  width:2px;
  background:var(--paper);
  transform:translateX(-1px);
  pointer-events:none;
}
.cmp__knob{
  position:absolute;
  top:50%;left:50%;
  width:44px;height:44px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--paper);
  color:var(--ink-deep);
  display:grid;
  place-items:center;
  box-shadow:0 8px 26px -8px rgba(0,0,0,.7);
}
.cmp__knob svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.ba__cap{padding:clamp(14px,1.4vw,20px) 4px 4px}
.ba__cap h3{
  font-family:var(--disp);
  font-size:clamp(1.12rem,1.5vw,1.36rem);
  margin-bottom:.42em;
}
.ba__cap p{font-size:.85rem;color:rgba(231,238,245,.66);line-height:1.56}

.ba__soon{
  border:1px dashed var(--line-light);
  border-radius:14px;
  padding:clamp(38px,6vw,72px) 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.7rem;
  text-align:center;
}
.ba__soon svg{width:26px;height:26px;stroke:var(--focus);fill:none;stroke-width:1.3}
.ba__soon-t{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--focus);
}
.ba__soon-d{font-size:.85rem;color:rgba(231,238,245,.6);max-width:44ch;line-height:1.55}

.ba__foot{
  margin-top:clamp(30px,3.4vw,46px);
  padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--line-light);
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(20px,3vw,48px);
  align-items:center;
}
@media (max-width:820px){.ba__foot{grid-template-columns:1fr}}
.ba__disc{
  font-size:.725rem;
  line-height:1.62;
  color:rgba(231,238,245,.5);
  max-width:82ch;
  margin:0;
}

/* =====================================================================
   12. Treatments — interactive group switcher
   ===================================================================== */
.svc{background:var(--ink-deep);color:var(--paper);overflow:hidden}
.svc__head{margin-bottom:clamp(30px,3.6vw,50px);max-width:60ch}
.svc__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(12px,1.4vw,18px)}

.svc__body{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,3.4vw,64px);
  align-items:start;
}
@media (max-width:980px){.svc__body{grid-template-columns:1fr}}

.svc__list{border-top:1px solid var(--line-light)}
.svc__row{
  border-bottom:1px solid var(--line-light);
  position:relative;
}
.svc__trigger{
  width:100%;
  display:flex;
  align-items:center;
  gap:clamp(12px,1.6vw,24px);
  padding-block:clamp(18px,2.1vw,28px);
  text-align:left;
  position:relative;
  z-index:2;
}
.svc__name{
  font-family:var(--disp);
  font-size:clamp(1.6rem,3.1vw,2.7rem);
  line-height:1;
  flex:1;
  transition:transform .55s var(--ease-out),color .45s var(--ease);
}
.svc__plus{
  width:26px;height:26px;
  flex:none;
  position:relative;
  transition:transform .55s var(--ease-out);
}
.svc__plus::before,.svc__plus::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:opacity .4s var(--ease),background .4s var(--ease);
}
.svc__plus::before{width:13px;height:1.4px}
.svc__plus::after{width:1.4px;height:13px}
.svc__row.is-on .svc__plus::after{opacity:0}
.svc__row.is-on .svc__plus{transform:rotate(180deg)}
.svc__row:hover .svc__name,.svc__row.is-on .svc__name{transform:translateX(9px)}
.svc__row.is-on .svc__name{color:var(--focus)}

.svc__panel{
  overflow:hidden;
  height:0;
  transition:height .6s var(--ease-out);
}
.svc__panel-in{padding:0 0 clamp(20px,2.4vw,30px)}
.svc__tag{
  font-family:var(--disp);
  font-style:italic;
  font-size:1.02rem;
  color:rgba(231,238,245,.72);
  margin-bottom:.9em;
  display:block;
}
.svc__items{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem}
.svc__item{
  font-size:.775rem;
  padding:.5em .95em;
  border:1px solid var(--line-light);
  border-radius:100px;
  color:rgba(231,238,245,.88);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.svc__item:hover{background:var(--focus);color:#04252A;border-color:var(--focus)}
.svc__from{
  display:inline-flex;
  align-items:center;
  font-family:var(--mono);
  font-size:clamp(.74rem,.85vw,.82rem);
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--focus);
  background:rgba(29,176,186,.13);
  border:1px solid rgba(29,176,186,.34);
  border-radius:100px;
  padding:.66em 1.15em;
}

/* Sticky image stack that swaps with the active group */
.svc__viz{
  position:sticky;
  top:clamp(96px,11vw,132px);
  aspect-ratio:4/5;
  border-radius:3px;
  overflow:hidden;
  background:var(--ink);
}
@media (max-width:980px){.svc__viz{position:relative;top:0;aspect-ratio:16/10;order:-1}}
.svc__viz-img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.05);
  transition:opacity 1s var(--ease),transform 1.6s var(--ease-out);
}
.svc__viz-img.is-on{opacity:1;transform:scale(1)}
.svc__viz::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(12,26,40,.6),transparent 55%);
  pointer-events:none;
}
.svc__viz-cap{
  position:absolute;
  left:0;bottom:0;
  z-index:2;
  padding:clamp(16px,1.8vw,24px);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--paper);
}
/* The "other treatments" row. Chips rather than another accordion group: these
   are single links, and the switcher above already owns the section's structure. */
.svc__other{
  margin-top:clamp(30px,3.4vw,46px);
  padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--line-light);
}
.svc__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(14px,1.6vw,20px)}
.svc__chip{
  font-size:.82rem;
  color:rgba(231,238,245,.82);
  border:1px solid var(--line-light);
  border-radius:999px;
  padding:.5em 1.05em;
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.svc__chip:hover{border-color:var(--focus);color:var(--focus)}
.svc__foot{margin-top:clamp(26px,3vw,40px)}

/* =====================================================================
   13. Why choose us
   ===================================================================== */
.why__head{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(20px,2.4vw,38px);
  margin-bottom:clamp(30px,3.6vw,52px);
}
.why__intro{grid-column:1/span 5}
@media (max-width:900px){.why__intro{grid-column:1/-1}}
.why__h2{margin-top:clamp(14px,1.6vw,20px)}

.why__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (max-width:900px){.why__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.why__grid{grid-template-columns:1fr}}
.why__card{
  background:var(--paper-pure);
  padding:clamp(24px,2.6vw,38px);
  display:flex;
  flex-direction:column;
  gap:.75rem;
  position:relative;
  transition:background .5s var(--ease);
}
.why__card:hover{background:var(--white)}
.why__card::before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:100%;height:2px;
  background:var(--focus);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.why__card:hover::before{transform:scaleX(1)}
.why__ico{
  width:34px;height:34px;
  stroke:var(--focus);
  fill:none;
  stroke-width:1.2;
  margin-bottom:.3rem;
}
.why__card h3{
  font-family:var(--disp);
  font-size:clamp(1.12rem,1.5vw,1.32rem);
  line-height:1.16;
}
.why__card p{font-size:.85rem;color:var(--muted);line-height:1.56}

/* =====================================================================
   14. Team
   ===================================================================== */
.team{background:var(--paper);overflow:hidden}
.team__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:clamp(28px,3.4vw,46px);
}
.team__intro{max-width:56ch}
.team__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(10px,1.2vw,16px)}
.team__ctrl{display:flex;gap:10px}
.team__arrow{
  width:46px;height:46px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),opacity .3s;
}
.team__arrow:hover:not(:disabled){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.team__arrow:disabled{opacity:.3;cursor:default}
.team__arrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}

.team__viewport{overflow:hidden}
.team__track{
  display:flex;
  gap:clamp(14px,1.7vw,26px);
  transition:transform .8s var(--ease-out);
}
.team__card{
  flex:0 0 clamp(240px,24vw,320px);
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:4px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease);
}
.team__card:hover{transform:translateY(-6px);box-shadow:0 34px 62px -44px rgba(22,41,60,.6)}
.team__portrait{aspect-ratio:1;overflow:hidden;background:var(--paper)}
.team__portrait img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 22%;
  transition:transform 1.1s var(--ease-out);
}
.team__card:hover .team__portrait img{transform:scale(1.05)}
.team__body{padding:clamp(18px,1.9vw,24px);display:flex;flex-direction:column;gap:.42rem;flex:1}
.team__name{font-family:var(--disp);font-size:1.2rem;line-height:1.12}
.team__role{
  font-family:var(--mono);
  font-size:.575rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--focus-deep);
}
.team__bio{
  font-size:.82rem;
  color:var(--muted);
  line-height:1.55;
  margin-top:.3rem;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.team__card.is-open .team__bio{-webkit-line-clamp:unset;overflow:visible}
.team__more{
  margin-top:auto;
  padding-top:.9rem;
  align-self:flex-start;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--focus-deep);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  transition:color .35s var(--ease);
}
.team__more::after{content:"→";transition:transform .4s var(--ease-out)}
.team__more:hover{color:var(--ink)}
.team__more:hover::after{transform:translateX(4px)}
.team__card.is-open .team__more::after{transform:rotate(-90deg)}

/* =====================================================================
   15. Shop banner
   ===================================================================== */
.shop{
  position:relative;
  min-height:clamp(400px,46vw,580px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--ink-deep);
  color:var(--paper);
  isolation:isolate;
}
.shop__bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background-size:cover;
  background-position:center right;
  background-image:var(--img);
  filter:brightness(.66) saturate(.85) contrast(1.06);
}
.shop::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(95deg,rgba(12,26,40,.95) 0%,rgba(12,26,40,.88) 34%,rgba(12,26,40,.45) 60%,rgba(12,26,40,.12) 100%);
}
.shop__in{width:100%;padding-block:clamp(50px,6vw,84px)}
.shop__copy{max-width:min(560px,54%)}
@media (max-width:820px){.shop__copy{max-width:100%}}
.shop__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(14px,1.6vw,20px)}
.shop__p{color:rgba(231,238,245,.74);margin-bottom:clamp(20px,2.2vw,28px);max-width:48ch}
.shop__prices{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .5rem;
  margin-bottom:clamp(24px,2.6vw,32px);
}
.shop__chip{
  font-family:var(--mono);
  font-size:.63rem;
  letter-spacing:.06em;
  padding:.46em .8em;
  border:1px solid var(--line-light);
  border-radius:100px;
  color:rgba(231,238,245,.82);
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.shop__chip:hover{border-color:var(--focus);color:var(--focus)}

/* =====================================================================
   16. Conditions — THE SIGNATURE
   A dermatoscope field. Moving through the index re-focuses the lens on a
   new macro plate, exactly as a clinician would change field of view.
   ===================================================================== */
.cond{position:relative;overflow:hidden}
.cond__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(20px,2.4vw,38px);
  align-items:center;
}
.cond__copy{grid-column:1/span 6}
.cond__scope{grid-column:8/span 5;position:relative}
@media (max-width:980px){
  .cond__copy{grid-column:1/-1}
  .cond__scope{grid-column:1/-1;order:-1;max-width:440px;margin-inline:auto}
}
.cond__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(12px,1.4vw,18px)}
.cond__lede{margin-bottom:clamp(24px,2.6vw,34px);max-width:44ch}

.cond__cta{margin-top:clamp(26px,3vw,38px)}
.cond__list{
  border-top:1px solid var(--line);
  column-count:2;
  column-gap:clamp(18px,2vw,30px);
}
@media (max-width:600px){.cond__list{column-count:1}}
.cond__item{break-inside:avoid}
.cond__btn{
  width:100%;
  display:flex;
  align-items:baseline;
  gap:.85em;
  padding-block:.72em;
  border-bottom:1px solid var(--line-soft);
  text-align:left;
  transition:color .4s var(--ease);
}
.cond__btn .u-idx{
  color:var(--muted);
  transition:color .4s var(--ease);
  flex:none;
}
.cond__label{
  font-size:.885rem;
  font-weight:600;
  line-height:1.32;
  transition:transform .5s var(--ease-out);
}
.cond__btn:hover .cond__label,.cond__btn.is-on .cond__label{transform:translateX(6px)}
.cond__btn:hover .u-idx,.cond__btn.is-on .u-idx{color:var(--focus)}
.cond__btn.is-on{color:var(--focus-deep)}

/* the lens */
.scope{
  position:relative;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  background:var(--ink-deep);
  box-shadow:
    0 0 0 1px var(--line),
    0 0 0 clamp(8px,1vw,14px) var(--paper-pure),
    0 0 0 calc(clamp(8px,1vw,14px) + 1px) var(--line),
    0 46px 90px -50px rgba(22,41,60,.85);
}
.scope__plate{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.14);
  transition:opacity .85s var(--ease),transform 1.5s var(--ease-out);
}
.scope__plate.is-on{opacity:1;transform:scale(1)}
/* the optical ring + reticle sold as glass, not decoration */
.scope__glass{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.2) 0%,transparent 34%),
    radial-gradient(circle at 50% 50%,transparent 56%,rgba(12,26,40,.55) 100%);
}
.scope__ret{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.5;
}
.scope__ret::before,.scope__ret::after{
  content:"";
  position:absolute;
  background:rgba(231,238,245,.4);
}
.scope__ret::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.scope__ret::after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)}
.scope__circle{
  position:absolute;
  top:50%;left:50%;
  width:36%;height:36%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(231,238,245,.4);
  border-radius:50%;
  pointer-events:none;
  opacity:.5;
}
.scope__hud{
  position:absolute;
  left:0;right:0;bottom:12%;
  text-align:center;
  z-index:3;
  pointer-events:none;
  padding-inline:16%;
}
.scope__name{
  font-family:var(--disp);
  font-size:clamp(1.15rem,1.9vw,1.62rem);
  color:var(--paper);
  line-height:1.1;
  text-shadow:0 2px 18px rgba(0,0,0,.7);
}
.scope__no{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.24em;
  color:var(--focus);
  margin-bottom:.5em;
}

/* =====================================================================
   17. Devices slider
   ===================================================================== */
.dev{background:var(--paper);overflow:hidden}
.dev__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:clamp(26px,3vw,42px);
}
.dev__intro{max-width:54ch}
.dev__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(10px,1.2vw,16px)}
.dev__ctrl{display:flex;align-items:center;gap:10px}
.dev__arrow{
  width:46px;height:46px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),opacity .3s;
}
.dev__arrow:hover:not(:disabled){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dev__arrow:disabled{opacity:.3;cursor:default}
.dev__arrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}

.dev__viewport{overflow:hidden}
.dev__track{
  display:flex;
  gap:clamp(14px,1.7vw,26px);
  transition:transform .8s var(--ease-out);
}
.dev__card{
  flex:0 0 clamp(250px,25vw,340px);
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:3px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease);
}
.dev__card:hover{transform:translateY(-6px);box-shadow:0 34px 62px -44px rgba(22,41,60,.65)}
.dev__img{aspect-ratio:1;width:100%;object-fit:cover;background:var(--paper)}
.dev__body{padding:clamp(18px,1.9vw,26px);display:flex;flex-direction:column;gap:.6rem;flex:1}
.dev__name{font-family:var(--disp);font-size:1.22rem;line-height:1.12}
.dev__desc{font-size:.82rem;color:var(--muted);line-height:1.54;flex:1}
.dev__price{
  font-family:var(--mono);
  font-size:.63rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--focus-deep);
  padding-top:.7rem;
  border-top:1px solid var(--line-soft);
}
.dev__prog{
  height:1px;
  background:var(--line);
  margin-top:clamp(22px,2.4vw,32px);
  position:relative;
}
.dev__prog-bar{
  position:absolute;
  left:0;top:-1px;
  height:3px;
  background:var(--focus);
  transition:width .5s var(--ease),transform .5s var(--ease-out);
}
.dev__note{
  margin-top:1.1rem;
  font-size:.71rem;
  color:var(--muted);
  line-height:1.6;
}

/* =====================================================================
   18. Journal
   ===================================================================== */
.jr__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:clamp(26px,3vw,42px);
}
.jr__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(10px,1.2vw,16px)}
.jr__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,1.9vw,30px);
}
@media (max-width:980px){.jr__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.jr__grid{grid-template-columns:1fr}}
.jr__card{display:flex;flex-direction:column;gap:.9rem}
.jr__thumb{
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:3px;
  background:var(--paper);
}
.jr__thumb img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.jr__card:hover .jr__thumb img{transform:scale(1.06)}
.jr__meta{
  display:flex;
  align-items:center;
  gap:.7em;
  font-family:var(--mono);
  font-size:.585rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
}
.jr__meta b{color:var(--focus-deep);font-weight:500}
.jr__t{
  font-family:var(--disp);
  font-size:clamp(1.08rem,1.4vw,1.26rem);
  line-height:1.2;
}
.jr__card:hover .jr__t{color:var(--focus-deep)}

/* =====================================================================
   19. Closing CTA
   ===================================================================== */
.cta{position:relative;overflow:hidden;color:var(--paper);background:var(--ink-deep)}
.cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 12% 15%,rgba(29,176,186,.13) 0%,transparent 60%),
    linear-gradient(200deg,var(--ink-deep) 0%,var(--ink) 78%);
  pointer-events:none;
}
.cta__in{
  position:relative;
  z-index:1;
  padding-block:clamp(70px,9vw,140px);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(24px,3vw,56px);
  align-items:center;
}
.cta__copy{grid-column:1/span 6}
.cta__media{grid-column:8/span 5;margin:0;position:relative}
@media (max-width:940px){
  .cta__copy{grid-column:1/-1}
  .cta__media{grid-column:1/-1;max-width:460px}
}
.cta__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(16px,1.8vw,22px)}
.cta__h2 em{font-style:italic;color:var(--focus)}
.cta__p{color:rgba(231,238,245,.74);max-width:46ch;margin-bottom:clamp(24px,2.6vw,32px)}
.cta__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,38px)}
.cta__addr{
  padding-top:clamp(20px,2.2vw,26px);
  border-top:1px solid var(--line-light);
  font-size:.87rem;
  color:rgba(231,238,245,.72);
  line-height:1.62;
}
.cta__addr-h{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--focus);
  margin-bottom:.6em;
}
.cta__addr a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-light)}
.cta__addr a:hover{color:var(--focus);text-decoration-color:currentColor}
.cta__media img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:4px;
  filter:saturate(.8) contrast(1.04) brightness(.95);
}
.cta__media figcaption{
  position:absolute;
  left:14px;bottom:14px;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper);
  background:rgba(12,26,40,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:.55em .9em;
  border-radius:3px;
}
.cta__strip{
  position:relative;
  z-index:1;
  border-top:1px solid var(--line-light);
  padding-block:1.15rem;
  display:flex;
  flex-wrap:wrap;
  gap:.8rem clamp(18px,2.4vw,38px);
  font-family:var(--mono);
  font-size:.615rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(231,238,245,.66);
}
.cta__strip span{display:inline-flex;align-items:center;gap:.6em}
.cta__strip svg{width:12px;height:12px;stroke:var(--focus);fill:none;stroke-width:2}

/* =====================================================================
   20. Footer
   ===================================================================== */
.ft{background:var(--ink-deep);color:rgba(231,238,245,.72);padding-top:clamp(52px,6vw,84px)}
.ft__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.1fr;
  gap:clamp(24px,3vw,52px);
  padding-bottom:clamp(38px,4.4vw,60px);
}
@media (max-width:1000px){.ft__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft__grid{grid-template-columns:1fr}}
.ft__logo{
  height:clamp(38px,3.4vw,46px);
  width:auto;
  display:block;
  margin-bottom:1.75rem;
}
.ft__cqc{
  display:block;
  width:clamp(150px,12vw,182px);
  height:auto;
  margin-top:1.6rem;
  border-radius:10px;
  background:var(--white);
  overflow:hidden;
}
.ft__omd{display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.ft__omd a{display:inline-flex;align-items:center;gap:.4em}
.ft__omd a:hover{color:var(--focus)}
.ft__omd img{height:14px;width:14px;flex:none}
.ft__strap{font-size:.86rem;line-height:1.6;max-width:34ch;margin-bottom:1.4rem}
.ft__accred{display:flex;flex-wrap:wrap;gap:.45rem}
.ft__badge{
  font-family:var(--mono);
  font-size:.555rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.5em .75em;
  border:1px solid var(--line-light);
  border-radius:2px;
}
.ft__h{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--focus);
  margin-bottom:1.15rem;
}
.ft__li{padding-block:.32em;font-size:.86rem}
.ft__li a{transition:color .35s var(--ease),padding-left .35s var(--ease)}
.ft__li a:hover{color:var(--focus);padding-left:5px}
.ft__hours{display:flex;justify-content:space-between;gap:12px;font-size:.79rem;padding-block:.3em;border-bottom:1px solid rgba(231,238,245,.07)}
.ft__hours span:last-child{font-family:var(--mono);font-size:.72rem;color:rgba(231,238,245,.85)}
.ft__hours--closed span:last-child{color:var(--muted)}
.ft__social{display:flex;gap:8px;margin-top:1.2rem}
.ft__soc{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid var(--line-light);
  border-radius:50%;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease-out);
}
.ft__soc:hover{background:var(--focus);color:#04252A;border-color:var(--focus);transform:translateY(-3px)}
.ft__soc svg{width:15px;height:15px;fill:currentColor}
.ft__bar{
  border-top:1px solid var(--line-light);
  padding-block:1.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:.615rem;
  letter-spacing:.09em;
  color:rgba(231,238,245,.5);
}
.ft__bar a:hover{color:var(--focus)}

/* =====================================================================
   21. Back to top
   ===================================================================== */
.to-top{
  position:fixed;
  right:clamp(16px,2vw,30px);
  bottom:clamp(16px,2vw,30px);
  z-index:45;
  width:clamp(44px,3.6vw,52px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  border:1px solid rgba(231,238,245,.16);
  box-shadow:0 18px 38px -18px rgba(12,26,40,.75);
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.9);
  transition:opacity .45s var(--ease),transform .55s var(--ease-out),
             visibility .45s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--focus);color:#04252A;border-color:var(--focus)}
.to-top svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .2s linear,visibility .2s linear}}

/* =====================================================================
   22. About page
   ===================================================================== */

/* ---- Page hero ----
   THE STANDARD for every page below the homepage: full viewport height, the
   masthead sitting over it, content bottom-left, breadcrumb above the eyebrow.
   Only the background image and the copy change from page to page. Do not
   introduce a shorter variant. */
.phero{
  position:relative;
  margin-top:calc(-1 * var(--mast-h,88px));
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--ink-deep);
  color:var(--paper);
  isolation:isolate;
}
.phero__bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background-size:cover;
  background-position:center 55%;
  background-image:var(--img);
  filter:saturate(.72) contrast(1.05) brightness(.9) hue-rotate(-6deg);
  transform:scale(1.04);
}
.phero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(100deg,rgba(12,26,40,.95) 0%,rgba(12,26,40,.9) 34%,rgba(12,26,40,.62) 60%,rgba(12,26,40,.4) 100%),
    linear-gradient(to top,rgba(12,26,40,.8) 0%,transparent 46%);
}
.phero__in{
  width:100%;
  padding-top:calc(var(--mast-h,88px) + clamp(40px,6vw,80px));
  padding-bottom:clamp(44px,6vw,84px);
  max-width:var(--wrap);
}
.crumb{
  display:flex;
  align-items:center;
  gap:.7em;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(231,238,245,.55);
  margin-bottom:clamp(20px,2.6vw,32px);
}
.crumb a:hover{color:var(--focus)}
.crumb span[aria-current]{color:rgba(231,238,245,.85)}
/* Portrait viewports crop hard horizontally; hold the seating rather than the
   reception desk at the left edge. */
@media (max-width:760px){.phero__bg{background-position:64% 52%}}
.phero__eyebrow{margin-bottom:clamp(14px,1.8vw,22px)}
.phero__h1{
  font-size:clamp(2.5rem,5.8vw,5rem);
  margin-bottom:clamp(18px,2.2vw,26px);
  max-width:16ch;
}
.phero__h1 em{font-style:italic;color:var(--focus)}
.phero__lede{color:rgba(231,238,245,.78);max-width:56ch;margin-bottom:clamp(24px,3vw,34px)}
.phero__actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---- Our story ---- */
.story__grid{align-items:center;row-gap:clamp(30px,4vw,54px)}
.story__copy{grid-column:1/span 6}
.story__media{grid-column:8/span 5;position:relative}
@media (max-width:940px){
  .story__copy{grid-column:1/-1}
  .story__media{grid-column:1/-1;order:-1}
}
.story__h2{margin:clamp(16px,1.8vw,24px) 0 clamp(16px,1.8vw,22px)}
.story__p{color:var(--muted);margin-bottom:1.05em;max-width:54ch;text-wrap:pretty}
.story__stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,20px);
  margin-top:clamp(26px,3vw,38px);
  padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line);
}
@media (max-width:600px){.story__stats{grid-template-columns:repeat(2,1fr);row-gap:22px}}
.story__img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:3px;
}
.story__inset{
  position:absolute;
  left:-16%;
  bottom:-8%;
  width:56%;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:3px;
  border:7px solid var(--paper-pure);
  box-shadow:0 30px 60px -40px rgba(22,41,60,.75);
}
@media (max-width:940px){.story__inset{left:auto;right:0;width:44%}}

/* ---- Mission & vision ---- */
.mv{background:var(--ink-deep);color:var(--paper)}
.mv__head{max-width:60ch;margin-bottom:clamp(30px,3.6vw,50px)}
.mv__h2{margin-top:clamp(14px,1.6vw,20px)}
.mv__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,2.6vw,40px);
}
@media (max-width:900px){.mv__grid{grid-template-columns:1fr}}
.mv__card{
  background:rgba(231,238,245,.06);
  border:1px solid var(--line-light);
  border-radius:6px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .55s var(--ease-out);
}
.mv__card:hover{background:rgba(231,238,245,.09);border-color:rgba(231,238,245,.3);transform:translateY(-4px)}
/* Both cards align top and stretch to the taller of the two. The vision copy is
   shorter, so its body takes the slack rather than the card shrinking. */
.mv__grid{align-items:stretch}
.mv__body{flex:1}
.mv__fig{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.mv__fig img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 32%;   /* both sources are shot low; hold the faces */
  transition:transform 1.1s var(--ease-out);
}
.mv__card:hover .mv__fig img{transform:scale(1.05)}
.mv__body{padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:.85rem}
.mv__label{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--focus);
}
.mv__t{font-family:var(--disp);font-size:clamp(1.35rem,2vw,1.85rem);line-height:1.14}
.mv__p{font-size:.9rem;line-height:1.62;color:rgba(231,238,245,.72)}

/* ---- Process: a real sequence, so the numbering earns its place ---- */
.proc{background:var(--paper)}
.proc__head{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(20px,2.4vw,38px);
  align-items:end;
  margin-bottom:clamp(30px,3.6vw,52px);
}
.proc__head > div{grid-column:1/span 6}
.proc__note{grid-column:8/span 5;align-self:end}
@media (max-width:900px){.proc__head > div,.proc__note{grid-column:1/-1}}
.proc__h2{margin-top:clamp(14px,1.6vw,20px)}
.proc__list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  counter-reset:none;
}
@media (max-width:960px){.proc__list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.proc__list{grid-template-columns:1fr}}
.proc__step{
  background:var(--paper);
  padding:clamp(24px,2.6vw,36px);
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:relative;
  transition:background .5s var(--ease);
}
.proc__step:hover{background:var(--white)}
.proc__step::before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:100%;height:2px;
  background:var(--focus);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.proc__step:hover::before{transform:scaleX(1)}
.proc__no{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--focus-deep);
  font-weight:500;
}
.proc__t{font-family:var(--disp);font-size:clamp(1.18rem,1.6vw,1.45rem);line-height:1.16;margin-bottom:.5rem}
.proc__p{font-size:.87rem;color:var(--muted);line-height:1.6}

/* ---- Team note under the carousel ---- */
.team__note{
  margin-top:clamp(26px,3vw,38px);
  padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line);
  font-size:.87rem;
  color:var(--muted);
  line-height:1.62;
  max-width:78ch;
}

/* A seventh reason would otherwise sit alone on its own row, so it runs
   full width and reads as the closing note. Only grids of 7 are affected. */
.why__grid > .why__card:nth-child(7):last-child{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:auto minmax(0,22ch) minmax(0,1fr);
  align-items:center;
  gap:clamp(16px,2.4vw,40px);
}
.why__grid > .why__card:nth-child(7):last-child .why__ico{margin-bottom:0}
@media (max-width:900px){
  .why__grid > .why__card:nth-child(7):last-child{
    grid-column:1 / -1;
    display:flex;
    flex-direction:column;
  }
}

/* ---- Why choose us, full-bleed variant (About page only) ----
   The homepage keeps the light hairline grid. Here the section sits on a
   photograph, so the cards become glass and every colour flips to the light
   end of the palette. Scoped to .why--bleed so the homepage is untouched. */
.why--bleed{
  position:relative;
  overflow:hidden;
  background:var(--ink-deep);
  color:var(--paper);
  isolation:isolate;
}
.why--bleed > .u-wrap{position:relative;z-index:1}
.why__bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--img);
  background-size:cover;
  background-position:center;
  filter:saturate(.62) contrast(1.04) brightness(.78) hue-rotate(-6deg);
  transform:scale(1.03);
}
.why--bleed::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(105deg,rgba(12,26,40,.9) 0%,rgba(12,26,40,.74) 40%,rgba(12,26,40,.5) 100%),
    linear-gradient(to bottom,rgba(12,26,40,.55) 0%,transparent 30%,rgba(12,26,40,.45) 100%);
}
.why--bleed .why__grid{
  background:rgba(231,238,245,.16);          /* the 1px gap lines */
  border-color:rgba(231,238,245,.16);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.why--bleed .why__card{background:rgba(16,32,49,.62)}
.why--bleed .why__card:hover{background:rgba(16,32,49,.82)}
.why--bleed .why__card h3{color:var(--paper)}
.why--bleed .why__card p{color:rgba(231,238,245,.72)}

/* =====================================================================
   23. Treatments page
   ===================================================================== */

/* ---- Sticky category nav ---- */
.tnav{
  position:sticky;
  top:var(--mast-h,88px);
  z-index:40;
  background:rgba(245,249,252,.86);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.tnav__in{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,28px);
  padding-block:12px;
}
.tnav__label{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  flex:none;
}
.tnav__chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.tnav__chips::-webkit-scrollbar{display:none}
.tnav__chip{
  flex:none;
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:100px;
  color:var(--ink);
  white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.tnav__chip:hover{border-color:var(--focus);color:var(--focus-deep)}
.tnav__chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (max-width:700px){.tnav__label{display:none}}

/* ---- Category sections ---- */
/* Alternate the ground with the layout flip, so the tone change and the
   side change always happen together. nth-of-type would count the hero. */
.trt{background:var(--paper-pure)}
.trt--flip{background:var(--paper)}
.trt--dark{background:var(--ink-deep);color:var(--paper)}
/* scroll-margin so the sticky chip bar never covers a heading */
.trt{scroll-margin-top:calc(var(--mast-h,88px) + 66px)}

.trt__grid{row-gap:clamp(26px,3.4vw,48px)}
.trt__media{
  grid-column:1/span 4;
  grid-row:1/span 2;
  margin:0;
  align-self:start;
  position:sticky;
  top:calc(var(--mast-h,88px) + 110px);
}
.trt__copy{grid-column:6/span 7;grid-row:1}
.trt__listwrap{grid-column:6/span 7;grid-row:2}

/* Alternate the weight left and right so no two categories read the same. */
.trt--flip .trt__media{grid-column:9/span 4}
.trt--flip .trt__copy,
.trt--flip .trt__listwrap{grid-column:1/span 7}

@media (max-width:1020px){
  .trt__media,.trt--flip .trt__media{grid-column:1/-1;grid-row:auto;position:static}
  .trt__copy,.trt__listwrap,
  .trt--flip .trt__copy,.trt--flip .trt__listwrap{grid-column:1/-1;grid-row:auto}
}

.trt__media img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:3px;
}
@media (max-width:1020px){.trt__media img{aspect-ratio:16/10}}
.trt__cap{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:12px;
}
.trt--dark .trt__cap{color:rgba(231,238,245,.6)}

.trt__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(14px,1.6vw,20px)}
.trt__lede{max-width:52ch}
.trt--dark .trt__lede{color:rgba(231,238,245,.8)}
.trt__note{
  margin-top:1.1em;
  max-width:52ch;
  font-size:.88rem;
  color:var(--muted);
  padding-left:clamp(14px,1.4vw,20px);
  border-left:2px solid var(--focus);
}
.trt--dark .trt__note{color:rgba(231,238,245,.66)}
.trt__count{
  margin-top:clamp(18px,2vw,26px);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--focus-deep);
}
.trt--dark .trt__count{color:var(--focus)}

/* ---- The list ---- */
.trt__list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:0 clamp(22px,2.8vw,52px);
  border-top:1px solid var(--line);
}
.trt--dark .trt__list{border-top-color:var(--line-light)}
.trt__li{border-bottom:1px solid var(--line)}
.trt--dark .trt__li{border-bottom-color:var(--line-light)}
.trt__link{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(12px,1.4vw,20px);
  padding:clamp(13px,1.5vw,19px) 6px;
  transition:padding-left .45s var(--ease-out),color .35s var(--ease);
}
.trt__no{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.12em;
  color:var(--muted);
  transition:color .35s var(--ease);
}
.trt--dark .trt__no{color:rgba(231,238,245,.5)}
.trt__label{
  font-size:clamp(.95rem,1.08vw,1.06rem);
  font-weight:500;
  line-height:1.35;
  text-wrap:pretty;
}
.trt__arrow{
  width:17px;height:17px;
  flex:none;
  stroke:currentColor;
  fill:none;
  stroke-width:1.5;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .4s var(--ease),transform .5s var(--ease-out);
}
.trt__link:hover,.trt__link:focus-visible{padding-left:14px;color:var(--focus-deep)}
.trt--dark .trt__link:hover,.trt--dark .trt__link:focus-visible{color:var(--focus)}
.trt__link:hover .trt__no,.trt__link:focus-visible .trt__no{color:var(--focus)}
.trt__link:hover .trt__arrow,.trt__link:focus-visible .trt__arrow{opacity:1;transform:none}

/* ---- Where to start ---- */
.start{background:var(--paper)}
.start__grid{align-items:center;row-gap:clamp(28px,3.4vw,48px)}
.start__copy{grid-column:1/span 6}
.start__media{grid-column:8/span 5;margin:0}
@media (max-width:940px){
  .start__copy,.start__media{grid-column:1/-1}
  .start__media{order:-1}
}
.start__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(16px,1.8vw,22px)}
.start__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,32px)}
.start__media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 32%;border-radius:3px}

@media (prefers-reduced-motion:reduce){
  .trt__media{position:static}
  .trt__arrow{transition:none}
}

/* ---- 404 ---- */
.e404__links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:clamp(24px,3vw,38px);
}
.e404__link{
  background:var(--paper-pure);
  padding:clamp(20px,2.4vw,30px);
  font-family:var(--disp);
  font-size:clamp(1.15rem,1.5vw,1.4rem);
  transition:background .45s var(--ease),color .35s var(--ease);
}
.e404__link:hover{background:var(--white);color:var(--focus-deep)}

/* =====================================================================
   24. Conditions page
   ===================================================================== */

/* ---- Position band ---- */
.pos{background:var(--paper-pure)}
.pos__l{grid-column:1/span 5}
.pos__r{grid-column:7/span 6}
@media (max-width:940px){.pos__l,.pos__r{grid-column:1/-1}}
.pos__h2{margin-top:clamp(14px,1.6vw,20px)}
.pos__p{color:var(--muted);margin-top:1.05em;max-width:56ch}
.pos__facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,20px);
  margin-top:clamp(26px,3vw,38px);
  padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line);
}
@media (max-width:600px){.pos__facts{grid-template-columns:1fr;row-gap:20px}}

/* ---- The twelve ---- */
.cnd{background:var(--paper)}
.cnd__head{max-width:62ch;margin-bottom:clamp(34px,4vw,58px)}
.cnd__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(16px,1.8vw,22px)}

.cnd__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,2.8vw,48px) clamp(20px,2.4vw,40px);
  align-items:stretch;      /* every card in a row starts and ends on the same line */
}
@media (max-width:1100px){.cnd__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.cnd__grid{grid-template-columns:1fr}}

.cnd__card{
  background:var(--paper-pure);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  scroll-margin-top:calc(var(--mast-h,88px) + 24px);
  transition:border-color .5s var(--ease),transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
.cnd__card:hover{
  border-color:rgba(29,176,186,.45);
  transform:translateY(-4px);
  box-shadow:0 34px 60px -46px rgba(22,41,60,.65);
}
.cnd__fig{position:relative;margin:0;overflow:hidden;background:var(--ink)}
.cnd__fig img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.cnd__card:hover .cnd__fig img{transform:scale(1.05)}
/* The index number reads as a specimen label, not a caption. */
.cnd__no{
  position:absolute;
  left:0;top:0;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.16em;
  color:var(--paper);
  background:rgba(12,26,40,.72);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  padding:7px 12px;
}
.cnd__body{
  padding:clamp(20px,2.2vw,30px);
  display:flex;
  flex-direction:column;
  flex:1;
}
.cnd__name{
  font-size:clamp(1.3rem,1.9vw,1.7rem);
  line-height:1.12;
  margin-bottom:.6rem;
}
.cnd__p{
  font-size:.88rem;
  line-height:1.6;
  color:var(--muted);
  text-wrap:pretty;
}
.cnd__lab{
  margin-top:auto;
  padding-top:clamp(18px,2vw,26px);
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--focus-deep);
  margin-bottom:.7rem;
}
.cnd__chips{display:flex;flex-wrap:wrap;gap:6px}
.cnd__chip{
  font-size:.74rem;
  line-height:1.3;
  padding:6px 11px;
  border:1px solid var(--line);
  border-radius:100px;
  color:var(--muted);
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease);
}
.cnd__chip:hover{border-color:var(--focus);color:var(--ink);background:var(--white)}
.cnd__more{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:clamp(18px,2vw,24px);
  padding-top:clamp(14px,1.6vw,18px);
  border-top:1px solid var(--line-soft);
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  transition:color .35s var(--ease),gap .4s var(--ease-out);
}
.cnd__more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.cnd__more:hover{color:var(--focus-deep);gap:15px}

/* ---- When it is not cosmetic ---- */
.med{background:var(--ink-deep);color:var(--paper)}
.med__grid{align-items:center;row-gap:clamp(28px,3.4vw,48px)}
.med__copy{grid-column:1/span 6}
.med__media{grid-column:8/span 5;margin:0}
@media (max-width:940px){
  .med__copy,.med__media{grid-column:1/-1}
  .med__media{order:-1}
}
.med__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(16px,1.8vw,22px)}
.med__lede{color:rgba(231,238,245,.82)}
.med__p{color:rgba(231,238,245,.68);margin-top:1.05em;max-width:56ch}
.med__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(24px,2.8vw,34px)}
.med__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}

/* ---- Cross-link ----
   A closing rule rather than a section: it carries its own hairline and its own
   internal padding, so a full section's padding above it just opened a void. */
.xlink{background:var(--paper-pure);padding-top:0}
.xlink__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(20px,3vw,48px);
  flex-wrap:wrap;
  padding:clamp(26px,3vw,42px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.xlink__h2{font-size:clamp(1.6rem,2.6vw,2.4rem);margin-top:clamp(10px,1.2vw,16px)}

/* =====================================================================
   25. Devices page
   ===================================================================== */

.dvc{background:var(--ink-deep);color:var(--paper)}
.dvc__head{max-width:60ch;margin-bottom:clamp(40px,5vw,72px)}
.dvc__h2{margin-top:clamp(14px,1.6vw,20px)}

.dvc__rows{display:grid;gap:clamp(48px,6vw,104px)}
.dvc__row{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(24px,3vw,56px);
  align-items:center;
  scroll-margin-top:calc(var(--mast-h,88px) + 24px);
}
/* grid-row is explicit on both. Without it, a flipped row places the media in
   columns 8-12 first, and auto-placement will not walk backwards to columns 1-6
   for the copy, so the copy drops to a second row. */
.dvc__media{grid-column:1/span 5;grid-row:1;margin:0}
.dvc__copy{grid-column:7/span 6;grid-row:1}
/* Alternate, so the eye crosses the page rather than running down one gutter. */
.dvc--flip .dvc__media{grid-column:8/span 5}
.dvc--flip .dvc__copy{grid-column:1/span 6}
@media (max-width:1020px){
  .dvc__media,.dvc--flip .dvc__media,
  .dvc__copy,.dvc--flip .dvc__copy{grid-column:1/-1;grid-row:auto}
  .dvc__media{order:-1}
}

/* The artwork is transparent, so the ground is drawn here rather than baked
   into the file. A soft pool of light behind the device, no white plate. */
.dvc__media{
  position:relative;
  border:1px solid var(--line-light);
  border-radius:4px;
  background:
    radial-gradient(58% 52% at 50% 46%,rgba(29,176,186,.16),transparent 70%),
    linear-gradient(160deg,rgba(231,238,245,.09),rgba(231,238,245,.02));
  padding:clamp(18px,2.6vw,40px);
  overflow:hidden;
}
.dvc__media img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  transition:transform 1s var(--ease-out);
}
.dvc__row:hover .dvc__media img{transform:scale(1.03)}

.dvc__no{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--focus);
}
.dvc__name{
  font-size:clamp(1.9rem,3.2vw,3rem);
  line-height:1.06;
  margin:clamp(10px,1.2vw,16px) 0 clamp(14px,1.6vw,20px);
}
.dvc__p{color:rgba(231,238,245,.78);max-width:54ch;line-height:1.62}

/* The spec block reads as a data sheet, which is the whole point of the page. */
.dvc__spec{
  margin:clamp(22px,2.6vw,34px) 0 0;
  border-top:1px solid var(--line-light);
}
.dvc__spec-row{
  display:grid;
  grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:clamp(12px,1.6vw,24px);
  padding:clamp(10px,1.2vw,14px) 0;
  border-bottom:1px solid var(--line-light);
}
@media (max-width:520px){.dvc__spec-row{grid-template-columns:1fr;gap:4px}}
.dvc__spec dt{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(231,238,245,.5);
  align-self:center;
}
.dvc__spec dd{margin:0;font-size:.92rem;color:var(--paper)}

.dvc__lab{
  margin-top:clamp(22px,2.4vw,30px);
  margin-bottom:.7rem;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--focus);
}
.dvc__chips{display:flex;flex-wrap:wrap;gap:7px}
.dvc__chip{
  font-size:.76rem;
  line-height:1.3;
  padding:7px 13px;
  border:1px solid var(--line-light);
  border-radius:100px;
  color:rgba(231,238,245,.8);
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease);
}
.dvc__chip:hover{border-color:var(--focus);color:var(--paper);background:rgba(29,176,186,.14)}
.dvc__chip--cn{border-style:dashed}

/* ---- Also in the clinic ---- */
/* The list already closes on a hairline, so it needs less air beneath it than a
   section that ends on running text. */
.also{background:var(--paper-pure);padding-bottom:clamp(44px,5vw,88px)}
.also__head{max-width:62ch;margin-bottom:clamp(30px,3.6vw,52px)}
.also__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(16px,1.8vw,22px)}
.also__list{border-top:1px solid var(--line)}
.also__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.4vw,40px);
  padding:clamp(22px,2.6vw,34px) 0;
  border-bottom:1px solid var(--line);
}
.also__no{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  color:var(--muted);
  padding-top:.35em;
}
.also__name{
  font-family:var(--disp);
  font-size:clamp(1.25rem,1.9vw,1.65rem);
  line-height:1.14;
  margin-bottom:.5rem;
}
.also__item p{color:var(--muted);max-width:64ch;font-size:.92rem}
.also__link{
  display:inline-block;
  margin-top:.8rem;
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--focus-deep);
  border-bottom:1px solid rgba(29,176,186,.4);
  padding-bottom:3px;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.also__link:hover{color:var(--ink);border-color:var(--ink)}

.xlink__acts{display:flex;gap:12px;flex-wrap:wrap}

/* =====================================================================
   26. Pricing page
   ===================================================================== */

/* ---- How pricing works ---- */
.how{background:var(--ink-deep);color:var(--paper)}
.how__l{grid-column:1/span 4}
.how__r{grid-column:6/span 7}
@media (max-width:940px){.how__l,.how__r{grid-column:1/-1}}
.how__h2{margin-top:clamp(14px,1.6vw,20px)}
.how__list{border-top:1px solid var(--line-light)}
.how__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2vw,32px);
  padding:clamp(18px,2.2vw,28px) 0;
  border-bottom:1px solid var(--line-light);
}
.how__no{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.16em;
  color:var(--focus);
  padding-top:.4em;
}
.how__item h3{
  font-family:var(--disp);
  font-size:clamp(1.1rem,1.5vw,1.35rem);
  line-height:1.16;
  margin-bottom:.45rem;
}
.how__item p{color:rgba(231,238,245,.7);font-size:.9rem;max-width:60ch}

/* ---- The price list ---- */
.prc{background:var(--paper-pure)}
.prc--alt{background:var(--paper)}
.prc__head{max-width:60ch;margin-bottom:clamp(30px,3.6vw,50px)}
.prc__h2{margin:clamp(12px,1.4vw,18px) 0 clamp(12px,1.4vw,18px)}
.prc__note{color:var(--muted);font-size:1rem}

/* Multi-column so a long list reads as a page rather than a scroll. Groups
   are kept whole; only the gaps between them break. */
.prc__groups{columns:2;column-gap:clamp(30px,4vw,72px)}
@media (max-width:900px){.prc__groups{columns:1}}
.prc__group{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  margin-bottom:clamp(28px,3.2vw,46px);
}
.prc__gname{
  font-family:var(--disp);
  font-size:clamp(1.15rem,1.6vw,1.4rem);
  line-height:1.16;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--ink);
}
.prc__gnote{
  margin-top:.6rem;
  font-size:.82rem;
  color:var(--muted);
}
.prc__list{margin-top:.35rem}
.prc__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:12px;
  padding:clamp(9px,1vw,12px) 0;
  border-bottom:1px solid var(--line-soft);
}
.prc__row dt{font-size:.92rem;line-height:1.4;text-wrap:pretty}
.prc__row dd{
  margin:0;
  font-family:var(--mono);
  font-size:.88rem;
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
}

/* ---- Small print ---- */
.fine{background:var(--ink)}
.fine,.fine .u-eyebrow{color:var(--paper)}
.fine .u-eyebrow{color:var(--focus)}
.fine__cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,52px);
  margin-top:clamp(20px,2.4vw,30px);
}
@media (max-width:860px){.fine__cols{grid-template-columns:1fr;gap:18px}}
.fine__cols p{color:rgba(231,238,245,.74);font-size:.88rem;line-height:1.6}

/* =====================================================================
   27. Blog
   ===================================================================== */

.jrnl{background:var(--paper-pure)}

/* ---- Lead article ---- */
.jlead{margin-bottom:clamp(44px,5vw,80px)}
.jlead__link{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(24px,3vw,56px);
  align-items:center;
}
.jlead__fig{grid-column:1/span 7;grid-row:1;margin:0;overflow:hidden;border-radius:3px}
.jlead__body{grid-column:9/span 4;grid-row:1}
@media (max-width:1020px){
  .jlead__fig,.jlead__body{grid-column:1/-1;grid-row:auto}
}
.jlead__fig img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.jlead__link:hover .jlead__fig img{transform:scale(1.04)}
.jlead__kicker{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--focus-deep);
  margin-bottom:clamp(12px,1.4vw,18px);
}
.jlead__title{
  font-size:clamp(1.7rem,2.9vw,2.7rem);
  line-height:1.08;
  margin-bottom:clamp(12px,1.4vw,18px);
  transition:color .4s var(--ease);
}
.jlead__link:hover .jlead__title{color:var(--focus-deep)}
.jlead__ex{color:var(--muted);margin-bottom:clamp(20px,2.4vw,30px);text-wrap:pretty}
.jlead__btn{pointer-events:none}

/* ---- Filter ---- */
.jf{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,26px);
  padding-bottom:clamp(20px,2.4vw,30px);
  margin-bottom:clamp(26px,3vw,42px);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.jf__label{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  flex:none;
}
.jf__chips{display:flex;gap:8px;flex-wrap:wrap}
.jf__chip{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:100px;
  color:var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.jf__chip:hover{border-color:var(--focus);color:var(--focus-deep)}
.jf__chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.jf__n{opacity:.55;margin-left:.4em}
.jf__empty{color:var(--muted);padding:clamp(30px,4vw,60px) 0}

/* ---- Article cards ---- */
.jc__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,2.8vw,44px) clamp(20px,2.4vw,36px);
  align-items:stretch;          /* rows start and end on one line */
}
@media (max-width:1020px){.jc__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.jc__grid{grid-template-columns:1fr}}

.jc{display:flex}
.jc__link{
  display:flex;
  flex-direction:column;
  flex:1;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  transition:border-color .5s var(--ease),transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
.jc__link:hover{
  border-color:rgba(29,176,186,.45);
  transform:translateY(-4px);
  box-shadow:0 34px 60px -46px rgba(22,41,60,.6);
}
.jc__fig{margin:0;overflow:hidden;background:var(--paper)}
.jc__fig img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.jc__link:hover .jc__fig img{transform:scale(1.05)}
.jc__body{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;flex:1}
.jc__cat{
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--focus-deep);
  margin-bottom:.7rem;
}
.jc__title{
  font-size:clamp(1.1rem,1.45vw,1.28rem);
  line-height:1.16;
  margin-bottom:.65rem;
  text-wrap:pretty;
}
.jc__ex{
  font-size:.85rem;
  line-height:1.56;
  color:var(--muted);
  text-wrap:pretty;
  display:-webkit-box;
  -webkit-line-clamp:4;         /* keeps the card faces even without cropping the source */
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.jc__more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:clamp(16px,1.8vw,22px);
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  transition:color .35s var(--ease),gap .4s var(--ease-out);
}
.jc__more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.jc__link:hover .jc__more{color:var(--focus-deep);gap:14px}

/* =====================================================================
   28. Contact page
   ===================================================================== */

.ct{background:var(--paper-pure)}
.ct__grid{align-items:start;row-gap:clamp(34px,4vw,56px)}
.ct__form-col{grid-column:1/span 7}
.ct__aside{grid-column:9/span 4}
@media (max-width:1020px){.ct__form-col,.ct__aside{grid-column:1/-1}}
.ct__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(14px,1.6vw,20px)}
.ct__lede{max-width:56ch;margin-bottom:clamp(26px,3vw,40px)}

/* ---- Form ---- */
.frm__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px)}
@media (max-width:600px){.frm__row{grid-template-columns:1fr}}
.frm__field{margin-bottom:clamp(14px,1.6vw,22px);display:flex;flex-direction:column}
.frm__field label{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.frm__field input,
.frm__field select,
.frm__field textarea{
  font:inherit;
  font-size:.95rem;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  padding:13px 14px;
  width:100%;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.frm__field textarea{resize:vertical;min-height:120px}
.frm__field select{appearance:none;background-image:none;cursor:pointer}
.frm__field input:focus,
.frm__field select:focus,
.frm__field textarea:focus{
  outline:none;
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(29,176,186,.16);
}
/* Only flag a field once it has actually been submitted, not while typing. */
.frm.is-checked :invalid{border-color:#C4574B}
.frm.is-checked :invalid:focus{box-shadow:0 0 0 3px rgba(196,87,75,.18)}

.frm__check{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:11px;
  align-items:start;
  margin:clamp(6px,1vw,12px) 0 clamp(20px,2.4vw,30px);
  font-size:.86rem;
  color:var(--muted);
  cursor:pointer;
}
.frm__check input{width:18px;height:18px;margin-top:2px;accent-color:var(--focus-deep);flex:none}
.frm.is-checked .frm__check input:invalid{outline:2px solid #C4574B;outline-offset:2px}

.frm__submit{border:0}
.frm__note{margin-top:clamp(16px,2vw,24px);font-size:.85rem;color:var(--muted)}
.frm__note a{color:var(--ink);border-bottom:1px solid var(--line)}
.frm__note a:hover{color:var(--focus-deep);border-color:var(--focus)}

.frm__done{
  margin-top:clamp(18px,2.2vw,26px);
  padding:clamp(18px,2vw,26px);
  background:var(--white);
  border:1px solid var(--focus);
  border-left-width:3px;
  border-radius:3px;
}
.frm__done-h{
  font-family:var(--disp);
  font-size:1.15rem;
  margin-bottom:.5rem;
}
.frm__done p{font-size:.88rem;color:var(--muted);line-height:1.6}
.frm__done a{color:var(--ink);border-bottom:1px solid var(--line)}

/* ---- Aside ---- */
.ct__card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  padding:clamp(22px,2.4vw,32px);
  margin-bottom:clamp(16px,1.8vw,24px);
}
.ct__card-h{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--focus-deep);
  margin-bottom:clamp(14px,1.6vw,18px);
}
.ct__addr{line-height:1.65;margin-bottom:clamp(16px,1.8vw,22px)}
.ct__big{
  display:block;
  font-family:var(--disp);
  font-size:clamp(1.5rem,2.2vw,1.95rem);
  line-height:1.1;
  margin-bottom:.4rem;
  transition:color .35s var(--ease);
}
.ct__big:hover{color:var(--focus-deep)}
.ct__mail{
  display:block;
  font-size:.9rem;
  color:var(--muted);
  margin-bottom:clamp(18px,2vw,26px);
  transition:color .35s var(--ease);
}
.ct__mail:hover{color:var(--focus-deep)}
.ct__dir{width:100%;justify-content:center}
.ct__hours{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:9px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:.86rem;
}
.ct__hours:last-child{border-bottom:0}
.ct__hours span:last-child{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.ct__hours--closed span:last-child{color:var(--focus-deep)}
.ct__tip{
  font-size:.85rem;
  color:var(--muted);
  line-height:1.6;
  padding-left:clamp(14px,1.4vw,18px);
  border-left:2px solid var(--focus);
}

/* ---- Getting here ---- */
.gh{background:var(--ink-deep);color:var(--paper)}
.gh__head{max-width:56ch;margin-bottom:clamp(30px,3.6vw,52px)}
.gh__h2{margin-top:clamp(14px,1.6vw,20px)}
.gh__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line-light);
  border:1px solid var(--line-light);
}
@media (max-width:900px){.gh__grid{grid-template-columns:1fr}}
.gh__card{
  background:var(--ink-deep);
  padding:clamp(24px,2.6vw,38px);
  display:flex;
  flex-direction:column;
  gap:.75rem;
  transition:background .5s var(--ease);
}
.gh__card:hover{background:rgba(231,238,245,.05)}
.gh__ico{width:32px;height:32px;stroke:var(--focus);fill:none;stroke-width:1.2}
.gh__card h3{font-family:var(--disp);font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.16}
.gh__card p{font-size:.88rem;color:rgba(231,238,245,.72);line-height:1.58}

.ct__strip-wrap{background:var(--ink);padding-block:clamp(10px,1.4vw,18px)}

/* ---- Full-bleed map ---- */
.map{
  position:relative;
  background:var(--ink-deep);
  isolation:isolate;
}
.map__frame{
  height:clamp(380px,56vh,660px);
  line-height:0;
}
.map__frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
/* The card floats over the map on wide screens and drops below it on narrow
   ones, so it never covers the pin or Google's attribution. */
.map__over{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  pointer-events:none;   /* the map stays draggable around the card */
}
.map__card{
  pointer-events:auto;
  width:min(400px,100%);
  background:rgba(16,32,49,.92);
  backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  color:var(--paper);
  border:1px solid var(--line-light);
  border-radius:4px;
  padding:clamp(24px,2.6vw,36px);
  box-shadow:0 40px 70px -50px rgba(6,14,24,.9);
}
.map__kicker{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--focus);
  margin-bottom:clamp(12px,1.4vw,16px);
}
.map__addr{
  font-family:var(--disp);
  font-size:clamp(1.25rem,1.8vw,1.6rem);
  line-height:1.28;
  margin-bottom:clamp(12px,1.4vw,16px);
}
.map__near{
  font-size:.85rem;
  color:rgba(231,238,245,.68);
  line-height:1.55;
  margin-bottom:clamp(18px,2vw,26px);
}
.map__btn{width:100%;justify-content:center}

@media (max-width:820px){
  .map__frame{height:clamp(300px,42vh,420px)}
  .map__over{position:static;padding-block:clamp(24px,4vw,40px)}
  .map__card{width:100%}
}

/* =====================================================================
   29. Shop
   ===================================================================== */

.sp{background:var(--paper)}
.sp__head{max-width:62ch;margin-bottom:clamp(34px,4vw,58px)}
.sp__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(16px,1.8vw,22px)}

/* ---- Filter ---- */
.pf{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,26px);
  padding-bottom:clamp(20px,2.4vw,30px);
  margin-bottom:clamp(26px,3vw,42px);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.pf__label{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  flex:none;
}
.pf__chips{display:flex;gap:8px;flex-wrap:wrap}
.pf__chip{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:100px;
  color:var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.pf__chip:hover{border-color:var(--focus);color:var(--focus-deep)}
.pf__chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pf__n{opacity:.55;margin-left:.4em}
.pf__empty{color:var(--muted);padding:clamp(30px,4vw,60px) 0}

/* ---- Product cards ---- */
.pc__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.4vw,36px);
  align-items:stretch;   /* every card in a row starts and ends on the same line */
}
@media (max-width:1180px){.pc__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.pc__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pc__grid{grid-template-columns:1fr}}

.pc{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  transition:border-color .5s var(--ease),box-shadow .55s var(--ease-out);
}
.pc:hover{border-color:rgba(29,176,186,.45);box-shadow:0 34px 60px -46px rgba(22,41,60,.5)}
.pc__media{position:relative;background:var(--white);padding:clamp(10px,1.4vw,20px)}
.pc__media img{
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  transition:transform 1s var(--ease-out);
}
.pc:hover .pc__media img{transform:scale(1.04)}
.pc__body{padding:clamp(16px,1.8vw,24px);display:flex;flex-direction:column;flex:1;border-top:1px solid var(--line-soft)}
.pc__name{
  font-family:var(--disp);
  font-size:clamp(1.02rem,1.3vw,1.2rem);
  line-height:1.18;
  text-wrap:pretty;
}
.pc__price{
  font-family:var(--mono);
  font-size:.88rem;
  font-weight:500;
  color:var(--focus-deep);
  margin-top:.45rem;
}
.pc__sum{
  font-size:.83rem;
  line-height:1.55;
  color:var(--muted);
  margin-top:.7rem;
  text-wrap:pretty;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* ---- How to buy ---- */
.buy{background:var(--ink-deep);color:var(--paper)}
.buy__grid{align-items:center;row-gap:clamp(28px,3.4vw,48px)}
.buy__copy{grid-column:1/span 6;grid-row:1}
.buy__media{grid-column:8/span 5;grid-row:1;margin:0}
@media (max-width:940px){
  .buy__copy,.buy__media{grid-column:1/-1;grid-row:auto}
  .buy__media{order:-1}
}
.buy__h2{margin:clamp(14px,1.6vw,20px) 0 clamp(16px,1.8vw,22px)}
.buy__lede{color:rgba(231,238,245,.82)}
.buy__p{color:rgba(231,238,245,.68);margin-top:1.05em;max-width:56ch}
.buy__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(24px,2.8vw,34px)}
.buy__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}

@media (prefers-reduced-motion:reduce){
  .sp__ghead{position:static}
  .sp__arrow{transition:none}
}

/* =====================================================================
   30. Product detail and basket
   ===================================================================== */

/* ---- Product detail ----
   No page hero here. A product page has one job, which is to show the product
   and the price above the fold; a full-height hero would bury both. */
.pd{background:var(--paper-pure);padding-top:calc(var(--mast-h,88px) + clamp(28px,3.4vw,54px))}
.crumb--dark{color:var(--muted);margin-bottom:clamp(22px,2.6vw,34px)}
.crumb--dark a:hover{color:var(--focus-deep)}
.crumb--dark span[aria-current]{color:var(--ink)}

.pd__grid{align-items:start;row-gap:clamp(28px,3.4vw,48px)}
.pd__media{
  grid-column:1/span 6;grid-row:1;margin:0;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  padding:clamp(20px,3vw,52px);
}
.pd__buy{grid-column:8/span 5;grid-row:1;position:sticky;top:calc(var(--mast-h,88px) + 26px)}
@media (max-width:1020px){
  .pd__media,.pd__buy{grid-column:1/-1;grid-row:auto;position:static}
}
.pd__media img{width:100%;aspect-ratio:1;object-fit:contain}

.pd__name{font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.06;margin:clamp(10px,1.2vw,16px) 0 0}
.pd__price{
  font-family:var(--mono);
  font-size:clamp(1.1rem,1.5vw,1.35rem);
  font-weight:500;
  color:var(--focus-deep);
  margin-top:clamp(10px,1.2vw,16px);
}
.pd__sum{color:var(--muted);line-height:1.62;margin-top:clamp(14px,1.6vw,20px);max-width:46ch}

.pd__cart{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,32px)}
.pd__qty{
  display:flex;align-items:center;
  border:1px solid var(--line);
  border-radius:100px;
  background:var(--white);
  padding:3px;
  flex:none;
}
.pd__step{
  width:38px;height:38px;
  border-radius:50%;
  font-size:1.05rem;
  color:var(--ink);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.pd__step:hover{background:var(--paper);color:var(--focus-deep)}
.pd__qtyin{
  width:44px;
  border:0;background:none;
  text-align:center;
  font-family:var(--mono);
  font-size:.9rem;
  color:var(--ink);
  -moz-appearance:textfield;
}
.pd__qtyin::-webkit-outer-spin-button,
.pd__qtyin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pd__qtyin:focus{outline:none}
.pd__add{border:0}
.pd__ship{margin-top:clamp(18px,2vw,26px);font-size:.85rem;color:var(--muted);line-height:1.6;max-width:44ch}
.pd__ship a{color:var(--ink);border-bottom:1px solid var(--line)}
.pd__ship a:hover{color:var(--focus-deep);border-color:var(--focus)}
.pd__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:clamp(18px,2vw,26px)}
.pd__tag{
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:100px;
  padding:6px 12px;
}

.pd__detail{margin-top:clamp(44px,5vw,84px);row-gap:clamp(26px,3vw,42px)}
.pd__about{grid-column:1/span 6}
.pd__spec{grid-column:8/span 5}
@media (max-width:1020px){.pd__about,.pd__spec{grid-column:1/-1}}
.pd__h2{font-size:clamp(1.4rem,2.2vw,1.95rem);line-height:1.1;margin-bottom:clamp(14px,1.6vw,20px)}
.pd__p{color:var(--muted);line-height:1.66;margin-bottom:1em;max-width:56ch}
.pd__note{
  display:grid;
  gap:.4rem;
  margin-top:clamp(16px,1.8vw,22px);
  padding:clamp(14px,1.6vw,20px);
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--focus);
  border-radius:3px;
  font-size:.88rem;
  font-weight:500;
}
.pd__note span{
  font-family:var(--mono);
  font-size:.56rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--focus-deep);
  font-weight:400;
}
.pd__spec{border-top:1px solid var(--line)}
.pd__row{padding:clamp(12px,1.4vw,17px) 0;border-bottom:1px solid var(--line-soft)}
.pd__row dt{
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.45rem;
}
.pd__row dd{margin:0;font-size:.87rem;line-height:1.58}
.pd__ul{display:grid;gap:.45rem}
.pd__ul li{position:relative;padding-left:15px}
.pd__ul li::before{content:"";position:absolute;left:0;top:.64em;width:6px;height:1px;background:var(--focus)}

/* ---- Related ---- */
.rel{background:var(--paper)}
.rel__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:clamp(22px,2.6vw,34px);
}
.rel__all{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--focus-deep);border-bottom:1px solid rgba(29,176,186,.4);padding-bottom:3px;
}
.rel__all:hover{color:var(--ink);border-color:var(--ink)}
.rel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,32px)}
@media (max-width:760px){.rel__grid{grid-template-columns:1fr}}
.rc{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  transition:border-color .5s var(--ease),transform .55s var(--ease-out);
}
.rc:hover{border-color:rgba(29,176,186,.45);transform:translateY(-3px)}
.rc__media{padding:clamp(10px,1.4vw,18px)}
.rc__media img{width:100%;aspect-ratio:1;object-fit:contain}
.rc__body{padding:clamp(14px,1.6vw,20px);border-top:1px solid var(--line-soft)}
.rc__name{font-family:var(--disp);font-size:1rem;line-height:1.18}
.rc__price{font-family:var(--mono);font-size:.82rem;color:var(--focus-deep);margin-top:.35rem}

/* ---- Card actions on the shop grid ---- */
.pc{position:relative}
/* A full-card hit area, sitting under the buttons so they stay clickable. */
.pc__hit{position:absolute;inset:0;z-index:0}
.pc__media,.pc__body{position:relative;z-index:1;pointer-events:none}
.pc__name a,.pc__acts{pointer-events:auto}
.pc__name a:hover{color:var(--focus-deep)}
.pc__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding-top:clamp(14px,1.6vw,20px)}
.pc__add{border:0;font-size:.58rem;padding:11px 17px}

/* ---- Basket ---- */
.icon-btn--cart{position:relative}
.icon-btn__n{
  position:absolute;
  top:-3px;right:-3px;
  min-width:18px;height:18px;
  display:grid;place-items:center;
  padding:0 5px;
  border-radius:100px;
  background:var(--focus);
  color:#08222B;
  font-family:var(--mono);
  font-size:.58rem;
  font-weight:500;
}
.bk{position:fixed;inset:0;z-index:120}
.bk__scrim{position:absolute;inset:0;background:rgba(8,18,30,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .45s var(--ease)}
.bk.is-on .bk__scrim{opacity:1}
.bk__panel{
  position:absolute;
  top:0;right:0;bottom:0;
  width:min(430px,100%);
  background:var(--paper-pure);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .5s var(--ease-out);
  box-shadow:-30px 0 60px -40px rgba(8,18,30,.7);
}
.bk.is-on .bk__panel{transform:none}
.bk__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(20px,2.4vw,28px);
  border-bottom:1px solid var(--line);
}
.bk__title{font-family:var(--disp);font-size:1.3rem}
.bk__n{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-left:.3em}
.bk__close{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line)}
.bk__close svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
.bk__close:hover{border-color:var(--focus);color:var(--focus-deep)}
.bk__body{flex:1;overflow-y:auto;padding:clamp(16px,2vw,24px)}
.bk__empty{color:var(--muted);font-size:.9rem;padding:clamp(20px,3vw,40px) 0;text-align:center}
.bki{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.bki__img{width:64px;height:64px;object-fit:contain;background:var(--white);border:1px solid var(--line);border-radius:3px}
.bki__n{font-family:var(--disp);font-size:.98rem;line-height:1.2}
.bki__p{font-family:var(--mono);font-size:.78rem;color:var(--focus-deep);margin-top:.25rem}
.bki__row{display:flex;align-items:center;gap:10px;margin-top:.55rem}
.bki__q{display:flex;align-items:center;border:1px solid var(--line);border-radius:100px;background:var(--white)}
.bki__s{width:26px;height:26px;font-size:.9rem;border-radius:50%}
.bki__s:hover{color:var(--focus-deep)}
.bki__v{font-family:var(--mono);font-size:.76rem;min-width:20px;text-align:center}
.bki__x{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bki__x:hover{color:#C4574B}
.bk__foot{padding:clamp(18px,2.2vw,26px);border-top:1px solid var(--line);background:var(--white)}
.bk__sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.8rem}
.bk__sum b{font-family:var(--mono);font-size:1.1rem}
.bk__note{font-size:.78rem;color:var(--muted);line-height:1.55;margin-bottom:.9rem}
.bk__note a{color:var(--ink);border-bottom:1px solid var(--line)}
.bk__go{width:100%;justify-content:center;border:0}
.bk__go[disabled]{opacity:.45;cursor:not-allowed}
.bk__cont{display:block;text-align:center;margin-top:.8rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bk__cont:hover{color:var(--focus-deep)}
body.bk-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .bk__panel,.bk__scrim{transition:none}
  .pd__buy{position:static}
}

/* ---- Treatment sub-groups ----
   Injectables and Body now split into the client's own sub-categories, so each
   group carries a label above its own list rather than one flat run. */
.trt__sub + .trt__sub{margin-top:clamp(26px,3vw,44px)}
.trt__subname{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--focus-deep);
  padding-bottom:clamp(10px,1.2vw,14px);
  border-bottom:1px solid var(--ink);
  margin-bottom:2px;
}
.trt--dark .trt__subname{color:var(--focus);border-bottom-color:var(--line-light)}

/* =====================================================================
   31. Team biography pages
   ===================================================================== */

/* No page hero, for the same reason product pages have none: the portrait and
   the name are the point, and a full-height hero would push both under. */
.bio{background:var(--paper-pure);padding-top:calc(var(--mast-h,88px) + clamp(28px,3.4vw,54px))}
.bio__grid{align-items:start;row-gap:clamp(28px,3.4vw,48px)}
.bio__media{
  grid-column:1/span 5;grid-row:1;margin:0;
  position:sticky;top:calc(var(--mast-h,88px) + 26px);
  border-radius:4px;overflow:hidden;
}
.bio__copy{grid-column:7/span 6;grid-row:1}
@media (max-width:1020px){
  .bio__media,.bio__copy{grid-column:1/-1;grid-row:auto;position:static}
  .bio__media{max-width:420px}
}
.bio__media img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.bio__name{font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.05;margin:clamp(10px,1.2vw,16px) 0 0}
.bio__role{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--focus-deep);
  margin-top:clamp(10px,1.2vw,14px);
  padding-bottom:clamp(18px,2.2vw,28px);
  border-bottom:1px solid var(--line);
}
.bio__p{color:var(--muted);line-height:1.68;margin-top:1.05em;max-width:62ch;text-wrap:pretty}
/* A subheading inside a long biography. Sized between .bio__role and .bio__name
   so it breaks the column without competing with the h1, and it carries its own
   rule above rather than extra space, which reads as a new chapter. No max-width:
   the hairline is meant to run the full copy column, the way .bio__role's does,
   and a ch cap set in the display face would not line up with the paragraphs'. */
.bio__h2{
  font-family:var(--disp);
  font-size:clamp(1.24rem,1.7vw,1.6rem);
  line-height:1.2;
  color:var(--ink-deep);
  text-wrap:balance;
  margin-top:clamp(30px,3.4vw,46px);
  padding-top:clamp(24px,2.8vw,34px);
  border-top:1px solid var(--line-soft);
}
.bio__h2 + .bio__p{margin-top:.9em}
.bio__lab{
  margin-top:clamp(22px,2.6vw,32px);
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--focus-deep);
}
.bio__roles{margin-top:.9rem;border-top:1px solid var(--line-soft)}
.bio__roles li{
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:.88rem;
  color:var(--ink);
}
.bio__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,3vw,38px)}

/* ---- The rest of the team ---- */
.rest{background:var(--paper)}
.rest__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-bottom:clamp(22px,2.6vw,34px);
}
.rest__all{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--focus-deep);border-bottom:1px solid rgba(29,176,186,.4);padding-bottom:3px;
}
.rest__all:hover{color:var(--ink);border-color:var(--ink)}
.rest__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(12px,1.4vw,20px)}
@media (max-width:1100px){.rest__grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:700px){.rest__grid{grid-template-columns:repeat(2,1fr)}}
.tc{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  transition:border-color .5s var(--ease),transform .55s var(--ease-out);
}
.tc:hover{border-color:rgba(29,176,186,.45);transform:translateY(-3px)}
.tc__img img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 22%;display:block}
.tc__body{padding:clamp(10px,1.2vw,15px);border-top:1px solid var(--line-soft)}
.tc__name{font-family:var(--disp);font-size:.95rem;line-height:1.16}
.tc__role{
  font-family:var(--mono);font-size:.52rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-top:.3rem;
}

@media (prefers-reduced-motion:reduce){.bio__media{position:static}}

/* The team card now links to a full biography, so the portrait, the name and
   the read-more all point at the same page. */
.team__portrait a{display:block;height:100%}
.team__name a{transition:color .35s var(--ease)}
.team__name a:hover{color:var(--focus-deep)}
.team__more{text-decoration:none}

/* ---------- 32. Microneedling treatment page ----------
   One page, fifteen sections, and a deliberate rule: no two sections share a
   layout. What follows is therefore long, but each block is small and only
   ever used once. The shared primitives (.u-grid, .u-btn, .r) do the heavy
   lifting; these classes only describe the arrangement.                     */

/* ---- Hero ----
   The homepage hero frame, reused wholesale: one static slide instead of six,
   so the slideshow timer in main.js bails on `slides.length < 2` and nothing
   else needs a guard. Only the headline scale and the right-hand
   column differ. */
.hero--mn{min-height:100svh}
.hero--mn .hero__h1{font-size:clamp(2.05rem,3.9vw,3.35rem);letter-spacing:-.008em;max-width:15ch}
.hero--mn .hero__h1 em{display:block}
.hero--mn .hero__copy{grid-column:1/span 8;max-width:none}
.hero--mn .hero__lede{max-width:56ch}
@media (max-width:1080px){.hero--mn .hero__copy{grid-column:1/span 10}}
@media (max-width:760px){.hero--mn .hero__copy{grid-column:1/-1}}

/* ---- Before & after ----
   The layout from the client's own microneedling landing page: a horizontal
   snap-scrolling track of cards, arrows in the section head, the disclaimer and
   a CTA along the foot. Each composite is a single image with the two halves
   already joined, so the chips are positioned by whether the join runs down the
   middle or across it. */
.mnba{background:var(--ink-deep);color:var(--paper)}
.mnba__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,3vw,48px);flex-wrap:wrap;
  margin-bottom:clamp(28px,3.4vw,46px);
}
.mnba__h2{margin-top:14px}
.mnba__nav{display:flex;gap:10px}
.mnba__btn{
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line-light);background:transparent;color:var(--paper);
  display:grid;place-items:center;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.mnba__btn:hover{background:var(--paper);color:var(--ink-deep);border-color:var(--paper)}
.mnba__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mnba__track{
  display:flex;gap:26px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:12px;scrollbar-width:none;
}
.mnba__track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.mnba__track{scroll-behavior:auto}}
.mnba__fig{
  scroll-snap-align:start;flex:0 0 clamp(280px,46%,520px);margin:0;
  background:rgba(231,238,245,.06);border:1px solid var(--line-light);
  border-radius:4px;padding:16px;
}
@media (max-width:720px){.mnba__fig{flex:0 0 86%}}
.mnba__shot{position:relative;border-radius:3px;overflow:hidden;background:#000}
.mnba__shot img{width:100%;height:auto;display:block}
.mnba__lab{
  position:absolute;bottom:12px;z-index:2;
  font-family:var(--body);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--paper);
  padding:6px 13px;border-radius:3px;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.6);
}
/* Side-by-side composite: before on the left half, after on the right. */
.mnba__lab--b{left:12px;background:var(--ink)}
.mnba__lab--a{left:calc(50% + 12px);background:var(--focus-deep)}
/* Stacked composite: before on top, after underneath. */
.mnba__shot--v .mnba__lab--b{top:12px;bottom:auto;left:12px}
.mnba__shot--v .mnba__lab--a{top:auto;bottom:12px;left:12px}
@media (max-width:420px){
  .mnba__lab{font-size:.55rem;padding:5px 10px}
  .mnba__lab--b{left:8px}
  .mnba__lab--a{left:calc(50% + 8px)}
  .mnba__shot--v .mnba__lab--b,.mnba__shot--v .mnba__lab--a{left:8px}
}
.mnba__fig figcaption{
  padding:16px 6px 4px;font-size:.88rem;line-height:1.55;
  color:rgba(231,238,245,.78);
}
.mnba__fig figcaption b{
  display:block;margin-bottom:4px;font-family:var(--disp);font-weight:400;
  font-size:1.1rem;color:var(--paper);
}
.mnba__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,56px);margin-top:28px;flex-wrap:wrap;
}
.mnba__disc{
  font-size:.72rem;line-height:1.6;color:rgba(231,238,245,.6);
  max-width:80ch;flex:1 1 420px;
}
.mnba__disc a{color:var(--focus);text-decoration:underline;text-underline-offset:3px}
.mnba__cta{flex:0 0 auto}

/* ---- What is microneedling ----
   Copy left, one tall macro right, and a single pulled sentence sitting in the
   gutter between them, which is the one idea the section exists to land. */
/* Mirrors .mnopen exactly, flipped: the image leads on the left and the copy
   follows on the right, so two consecutive prose sections do not read as the
   same layout twice. Same column span and same 4:5 crop as .mnopen__media, so
   the two images are the same size down the page. */
.mnwhat{background:var(--paper-pure)}
.mnwhat__media{grid-column:1/span 5;margin:0}
.mnwhat__copy{grid-column:7/span 6}
@media (max-width:960px){
  .mnwhat__copy,.mnwhat__media{grid-column:1/-1;grid-row:auto}
  .mnwhat__media{max-width:440px;margin-bottom:clamp(24px,3vw,34px)}
}
.mnwhat__media img{width:100%;display:block;border-radius:4px;aspect-ratio:4/5;object-fit:cover}
.mnwhat__media figcaption{
  margin-top:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;
  line-height:1.7;color:var(--muted);
}
.mnwhat__p{color:var(--muted);line-height:1.68;margin-top:1.05em;max-width:52ch;text-wrap:pretty}
.mnwhat__pull{
  margin-top:clamp(26px,3vw,38px);
  padding-left:clamp(16px,1.6vw,22px);border-left:2px solid var(--focus);
  font-family:var(--disp);font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.42;
  color:var(--ink-deep);max-width:34ch;
}

/* ---- Conditions ----
   A dark full-bleed plate carrying a four-column index. Each entry is a row
   with its own hairline, numbered in mono, so the list reads as a reference
   rather than as decoration. */
.mncond{position:relative;isolation:isolate;color:var(--paper);overflow:hidden}
.mncond__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.mncond::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,26,40,.93),rgba(12,26,40,.88));
}
.mncond__head{grid-column:1/span 5}
.mncond__lede{grid-column:7/span 6;align-self:end;color:rgba(231,238,245,.7);line-height:1.7}
@media (max-width:900px){.mncond__head,.mncond__lede{grid-column:1/-1}}
.mncond__grid{
  margin-top:clamp(34px,4vw,58px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(20px,2.4vw,38px);
}
@media (max-width:1000px){.mncond__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.mncond__grid{grid-template-columns:1fr}}
.mncond__i{
  display:flex;align-items:baseline;gap:12px;
  padding:15px 0;border-bottom:1px solid rgba(231,238,245,.14);
  color:var(--paper);font-size:.94rem;line-height:1.35;
  transition:color .35s var(--ease);
}
.mncond__i span{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  color:rgba(231,238,245,.34);flex:none;
}
a.mncond__i:hover{color:var(--focus)}
a.mncond__i:hover span{color:var(--focus)}
a.mncond__i::after{content:"→";margin-left:auto;color:var(--focus);opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease);transform:translateX(-4px)}
a.mncond__i:hover::after{opacity:1;transform:none}

/* ---- Benefits ----
   Ten short claims. A plain grid would read as a shopping list, so the cards
   sit in a five-column band where every second column is dropped by half a
   card — the stagger is the whole layout. */
.mnben{background:var(--paper)}
.mnben__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,54px);align-items:end}
@media (max-width:820px){.mnben__head{grid-template-columns:1fr}}
.mnben__grid{
  margin-top:clamp(38px,4.6vw,68px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,22px);
}
@media (max-width:1100px){.mnben__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.mnben__grid{grid-template-columns:repeat(2,1fr)}}
.mnben__c{
  background:var(--paper-pure);border:1px solid var(--line-soft);border-radius:4px;
  padding:clamp(20px,1.9vw,26px);display:flex;flex-direction:column;gap:12px;
}
.mnben__n{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;color:var(--focus-deep);
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.mnben__t{font-size:.96rem;line-height:1.42;color:var(--ink-deep)}

/* ---- How it works ----
   Three phases, so three columns joined by one continuous hairline that runs
   behind the numerals. The rule is drawn on the container, not on the cards,
   which is why it does not break in the gaps. */
.mnwork{position:relative;isolation:isolate;color:var(--paper);overflow:hidden}
.mnwork__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.mnwork::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,26,40,.9),rgba(12,26,40,.94));
}
.mnwork__head{max-width:44ch}
.mnwork__rail{position:relative;margin-top:clamp(40px,5vw,74px);padding-top:clamp(28px,3vw,42px)}
.mnwork__rail::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--focus),rgba(29,176,186,.2));
}
.mnwork__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,50px)}
@media (max-width:860px){.mnwork__steps{grid-template-columns:1fr;gap:clamp(26px,4vw,38px)}}
.mnwork__s{position:relative;padding-top:clamp(14px,1.6vw,20px)}
.mnwork__s::before{
  content:"";position:absolute;top:calc(-1 * clamp(28px,3vw,42px));left:0;
  width:2px;height:clamp(28px,3vw,42px);background:var(--focus);
}
.mnwork__n{font-family:var(--disp);font-size:clamp(2.1rem,3.4vw,3rem);line-height:1;color:var(--focus)}
.mnwork__t{margin-top:12px;font-size:1.02rem;color:var(--paper);font-weight:600}
.mnwork__sub{
  margin-top:7px;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(231,238,245,.44);
}
.mnwork__foot{
  margin-top:clamp(30px,3.6vw,50px);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,54px);
}
@media (max-width:860px){.mnwork__foot{grid-template-columns:1fr}}
.mnwork__foot p{color:rgba(231,238,245,.72);line-height:1.72;text-wrap:pretty}

/* ---- Device ----
   Product photography of the actual unit, so it is given the room a real
   photograph deserves: image left across five columns, four spec panels
   stacked right in a 2×2 that collapses to one. */
.mndev{background:var(--paper-pure)}
/* The photograph holds while the copy and specs scroll past it. The figure
   spans all three rows, so its grid area is the full height of the column,
   while align-self:start keeps the box itself only as tall as the image —
   that gap is the distance it has to travel. Same mechanism as .bio__media. */
.mndev__media{
  grid-column:1/span 5;grid-row:1/span 3;margin:0;align-self:start;
  position:sticky;top:calc(var(--mast-h,88px) + 26px);
}
.mndev__copy{grid-column:7/span 6;grid-row:1}
.mndev__specs{grid-column:7/span 6;grid-row:3;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:clamp(24px,2.6vw,34px)}
@media (max-width:1000px){
  .mndev__media,.mndev__copy,.mndev__specs,.mndev__lead{grid-column:1/-1;grid-row:auto}
  .mndev__media{max-width:520px;position:static}
}
@media (max-width:520px){.mndev__specs{grid-template-columns:1fr}}
.mndev__media img{width:100%;display:block;border-radius:4px;border:1px solid var(--line-soft)}
.mndev__media figcaption{
  margin-top:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;
  color:var(--muted);line-height:1.7;
}
.mndev__p{color:var(--muted);line-height:1.68;margin-top:1.05em;max-width:56ch;text-wrap:pretty}
.mndev__spec{background:var(--paper-pure);padding:clamp(18px,1.9vw,26px)}
.mndev__spec b{
  display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--focus-deep);margin-bottom:10px;
}
.mndev__spec span{display:block;font-size:.95rem;line-height:1.45;color:var(--ink-deep)}

/* ---- Serums ----
   Five formulations on a dark ground, each with its own still. A row of five
   at desktop; below that it becomes a horizontal snap-scroller rather than a
   two-up grid, because five is an odd number and a 2/2/1 grid looks broken. */
.mnser{background:var(--ink);color:var(--paper)}
.mnser__head{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,3vw,54px);align-items:end}
@media (max-width:900px){.mnser__head{grid-template-columns:1fr}}
.mnser__intro{color:rgba(231,238,245,.72);line-height:1.72;text-wrap:pretty}
.mnser__intro + .mnser__intro{margin-top:1.05em}
.mnser__row{
  margin-top:clamp(36px,4.4vw,64px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.5vw,22px);
}
@media (max-width:1080px){
  .mnser__row{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:14px;margin-inline:calc(-1 * var(--gutter));
    padding-inline:var(--gutter);
  }
  .mnser__c{flex:0 0 clamp(230px,66vw,300px);scroll-snap-align:start}
}
.mnser__c{
  background:rgba(231,238,245,.05);border:1px solid var(--line-light);
  border-radius:4px;overflow:hidden;display:flex;flex-direction:column;
}
.mnser__img{aspect-ratio:1;overflow:hidden;background:#12283c}
.mnser__img img{width:100%;height:100%;object-fit:cover;display:block}
.mnser__body{padding:clamp(16px,1.7vw,22px);display:flex;flex-direction:column;flex:1}
.mnser__name{font-size:.98rem;line-height:1.32;color:var(--paper);font-weight:600}
.mnser__lab{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--focus);margin-bottom:9px;
}
.mnser__p{margin-top:10px;font-size:.86rem;line-height:1.62;color:rgba(231,238,245,.64)}

/* ---- Serum match ----
   A two-column table, set as a table because it is one. Mono on the left for
   the concern, body face on the right for the recommendation. */
.mnmatch{background:var(--paper)}
.mnmatch__grid{align-items:start}
.mnmatch__copy{grid-column:1/span 4}
.mnmatch__table{grid-column:6/span 7}
@media (max-width:960px){.mnmatch__copy,.mnmatch__table{grid-column:1/-1}}
.mnmatch__table table{width:100%;border-collapse:collapse}
.mnmatch__table caption{
  text-align:left;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--focus-deep);padding-bottom:14px;
}
.mnmatch__table th{
  text-align:left;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
  padding-bottom:12px;border-bottom:1px solid var(--ink);
}
.mnmatch__table td{padding:16px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.mnmatch__table tr td:first-child{color:var(--ink-deep);font-size:.95rem;padding-right:20px;line-height:1.45}
.mnmatch__table tr td:last-child{
  color:var(--focus-deep);font-weight:600;font-size:.95rem;text-align:right;white-space:nowrap;
}
@media (max-width:520px){
  .mnmatch__table tr td:last-child{white-space:normal}
}
.mnmatch__note{
  margin-top:clamp(18px,2vw,26px);font-family:var(--mono);font-size:.62rem;
  line-height:1.75;color:var(--muted);
}
.mnmatch__p{color:var(--muted);line-height:1.68;margin-top:1.05em;text-wrap:pretty}

/* ---- Suitability ----
   Two panels that answer the two halves of the question, side by side, with
   the image running full-bleed underneath them rather than beside. */
.mnsuit{background:var(--paper-pure)}
.mnsuit__panels{
  margin-top:clamp(30px,3.4vw,48px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,30px);
}
@media (max-width:820px){.mnsuit__panels{grid-template-columns:1fr}}
.mnsuit__p{border-radius:4px;padding:clamp(24px,2.6vw,36px)}
.mnsuit__p--yes{background:var(--ink-deep);color:var(--paper)}
.mnsuit__p--no{background:var(--paper);border:1px solid var(--line)}
.mnsuit__lab{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:16px;display:flex;align-items:center;gap:.7em;
}
.mnsuit__p--yes .mnsuit__lab{color:var(--focus)}
.mnsuit__p--no .mnsuit__lab{color:var(--muted)}
.mnsuit__lab svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.mnsuit__p p{line-height:1.7;text-wrap:pretty}
.mnsuit__p--yes p{color:rgba(231,238,245,.78)}
.mnsuit__p--no p{color:var(--muted)}
.mnsuit__fig{margin:clamp(30px,3.4vw,48px) 0 0;position:relative;border-radius:4px;overflow:hidden}
.mnsuit__fig img{width:100%;display:block;aspect-ratio:21/8;object-fit:cover;object-position:center}
@media (max-width:760px){.mnsuit__fig img{aspect-ratio:3/2}}
.mnsuit__fig figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(18px,2vw,28px);
  background:linear-gradient(to top,rgba(12,26,40,.9),transparent);
  color:var(--paper);font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;line-height:1.7;
}

/* ---- The journey ----
   Five stages, alternating sides down a centre line — the one layout on this
   page where the eye is meant to travel vertically rather than across. Below
   900px the centre line moves to the left edge and every stage sits right of
   it, because alternating on a narrow screen just reads as misalignment. */
/* Three tracks, not two: the middle one is a fixed 1px gutter that the rail is
   drawn inside. With two tracks and an uneven ratio the line sat at 50% of the
   row while the column boundary sat somewhere else, so it ran straight through
   the copy. Giving the line its own track makes the two agree by construction
   at any width. */
.mnjour{background:var(--paper)}
.mnjour__rail{position:relative;margin-top:clamp(38px,4.4vw,66px)}
.mnjour__s{
  position:relative;display:grid;
  grid-template-columns:1fr 1px 1fr;
  column-gap:clamp(24px,4vw,64px);align-items:center;
}
.mnjour__s + .mnjour__s{margin-top:clamp(34px,4vw,64px)}
/* The line lives in the middle track and is drawn tall enough to close the gap
   to the next stage, so the rail reads as continuous. */
.mnjour__s::after{
  content:"";grid-column:2;grid-row:1;justify-self:center;
  width:1px;background:var(--line);
  height:calc(100% + clamp(34px,4vw,64px));
}
.mnjour__s:last-child::after{height:100%}
.mnjour__s::before{
  content:"";position:absolute;top:50%;left:50%;z-index:1;
  width:9px;height:9px;border-radius:50%;
  background:var(--focus);transform:translate(-50%,-50%);box-shadow:0 0 0 5px var(--paper);
}
.mnjour__txt{grid-column:1;grid-row:1}
.mnjour__fig{grid-column:3;grid-row:1;margin:0}
/* Odd stages swap sides. grid-column is set explicitly on both children,
   because auto-placement will not walk backwards to fill column 1. */
.mnjour__s--flip .mnjour__txt{grid-column:3}
.mnjour__s--flip .mnjour__fig{grid-column:1}
.mnjour__fig img{width:100%;display:block;border-radius:4px;aspect-ratio:3/2;object-fit:cover}
.mnjour__n{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--focus-deep);
}
.mnjour__h{margin-top:10px;font-size:clamp(1.1rem,1.5vw,1.36rem);line-height:1.25;color:var(--ink-deep)}
.mnjour__p{margin-top:12px;color:var(--muted);line-height:1.68;text-wrap:pretty}
@media (max-width:900px){
  .mnjour__s,.mnjour__s--flip{grid-template-columns:1px 1fr;column-gap:26px}
  .mnjour__fig img{aspect-ratio:4/3}
  .mnjour__txt,.mnjour__fig,.mnjour__s--flip .mnjour__txt,.mnjour__s--flip .mnjour__fig{
    grid-column:2;grid-row:auto;
  }
  .mnjour__s{align-items:start}
  .mnjour__s::after{grid-row:1/-1;height:calc(100% + clamp(34px,4vw,64px))}
  .mnjour__s::before{left:0;top:9px;transform:translate(-50%,0)}
  .mnjour__fig{margin-top:20px}
}

/* ---- Risks ----
   Deliberately the quietest section on the page. Side effects are not a
   feature, so they get inline pills on paper rather than cards, and no image. */
.mnrisk{background:var(--paper-pure)}
.mnrisk__grid{align-items:start}
.mnrisk__copy{grid-column:1/span 6}
.mnrisk__list{grid-column:8/span 5}
@media (max-width:900px){.mnrisk__copy,.mnrisk__list{grid-column:1/-1}}
.mnrisk__p{color:var(--muted);line-height:1.68;margin-top:1.05em;max-width:54ch;text-wrap:pretty}
.mnrisk__lab{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--focus-deep);padding-bottom:14px;border-bottom:1px solid var(--ink);
}
.mnrisk__pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.mnrisk__pills li{
  border:1px solid var(--line);border-radius:100px;padding:.62em 1.05em;
  font-size:.84rem;color:var(--ink);background:var(--paper);
}

/* ---- Cost ----
   Price rows on a dark plate, the figure set in the display face so it is the
   thing the eye lands on. A leader rule joins name to price. */
.mncost{position:relative;isolation:isolate;color:var(--paper);overflow:hidden}
.mncost__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.mncost::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,26,40,.92),rgba(12,26,40,.95));
}
.mncost__grid{align-items:start}
.mncost__copy{grid-column:1/span 4}
.mncost__rows{grid-column:6/span 7}
@media (max-width:960px){.mncost__copy,.mncost__rows{grid-column:1/-1}}
.mncost__p{color:rgba(231,238,245,.72);line-height:1.72;margin-top:1.05em;text-wrap:pretty}
.mncost__r{
  display:flex;align-items:baseline;gap:14px;
  padding:17px 0;border-bottom:1px solid rgba(231,238,245,.14);
}
.mncost__r:first-child{border-top:1px solid var(--focus)}
.mncost__name{color:var(--paper);font-size:.98rem;line-height:1.35}
.mncost__dots{flex:1;height:1px;background:repeating-linear-gradient(90deg,rgba(231,238,245,.25) 0 2px,transparent 2px 6px)}
.mncost__fig{font-family:var(--disp);font-size:1.28rem;color:var(--focus);flex:none;line-height:1}
.mncost__note{
  margin-top:clamp(20px,2.2vw,30px);font-family:var(--mono);font-size:.62rem;
  line-height:1.8;color:rgba(231,238,245,.46);
}
.mncost__note a{color:var(--focus)}

/* ---- Why choose us ----
   Full-bleed photograph, dark scrim, and the ten reasons as a two-column
   checklist with the copy sitting above rather than beside it. */
.mnwhy{position:relative;isolation:isolate;color:var(--paper);overflow:hidden}
.mnwhy__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.mnwhy::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(12,26,40,.95) 0%,rgba(12,26,40,.88) 52%,rgba(12,26,40,.72) 100%);
}
.mnwhy__head{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,3vw,54px);align-items:end}
@media (max-width:900px){.mnwhy__head{grid-template-columns:1fr}}
.mnwhy__p{color:rgba(231,238,245,.74);line-height:1.72;text-wrap:pretty}
.mnwhy__p + .mnwhy__p{margin-top:1.05em}
.mnwhy__lab{
  margin-top:clamp(32px,3.8vw,54px);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--focus);padding-bottom:14px;border-bottom:1px solid var(--line-light);
}
.mnwhy__list{
  margin-top:clamp(18px,2vw,26px);
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3.4vw,64px);
}
@media (max-width:760px){.mnwhy__list{grid-template-columns:1fr}}
.mnwhy__list li{
  display:flex;align-items:flex-start;gap:13px;
  padding:14px 0;border-bottom:1px solid rgba(231,238,245,.12);
  color:var(--paper);font-size:.96rem;line-height:1.45;
}
.mnwhy__list svg{width:16px;height:16px;flex:none;margin-top:2px;fill:none;stroke:var(--focus);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- FAQs ----
   Fourteen questions. One column would run for a screen and a half, so they
   are balanced across two with CSS columns; break-inside keeps an item whole. */
/* Also used by the homepage FAQ section — the accordion is a shared pattern,
   not a microneedling-only one, despite the mn- prefix it was born with. */
.mnfaq{background:var(--paper-pure)}
.mnfaq__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,54px);align-items:end}
@media (max-width:820px){.mnfaq__head{grid-template-columns:1fr}}
.mnfaq__cols{
  margin-top:clamp(30px,3.6vw,52px);
  columns:2;column-gap:clamp(30px,4vw,72px);
}
@media (max-width:900px){.mnfaq__cols{columns:1}}
.mnfaq__i{break-inside:avoid;-webkit-column-break-inside:avoid;border-bottom:1px solid var(--line-soft)}
.mnfaq__q{
  width:100%;text-align:left;display:flex;align-items:flex-start;gap:16px;
  padding:19px 0;font-family:var(--body);font-size:1rem;font-weight:600;
  line-height:1.42;color:var(--ink-deep);background:none;border:0;cursor:pointer;
}
.mnfaq__q::after{
  content:"";flex:none;width:11px;height:11px;margin-top:5px;margin-left:auto;
  border-right:1.5px solid var(--focus-deep);border-bottom:1.5px solid var(--focus-deep);
  transform:rotate(45deg);transition:transform .4s var(--ease);
}
.mnfaq__i.is-open .mnfaq__q::after{transform:rotate(-135deg)}
.mnfaq__a{height:0;overflow:hidden;transition:height .45s var(--ease)}
.mnfaq__a p{padding-bottom:20px;color:var(--muted);line-height:1.7;max-width:52ch;text-wrap:pretty}
.mnfaq__a a{color:var(--focus-deep);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.mnfaq__a{transition:none}}

/* ---- Booking band ----
   The one section with nothing but a sentence and two buttons. */
.mnbook{background:var(--focus-deep);color:var(--paper)}
.mnbook__in{
  display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,3.4vw,64px);align-items:center;
}
@media (max-width:900px){.mnbook__in{grid-template-columns:1fr}}
.mnbook__h2{color:var(--paper);max-width:18ch}
.mnbook__p{margin-top:clamp(14px,1.6vw,20px);color:rgba(231,238,245,.86);line-height:1.72;text-wrap:pretty}
.mnbook__p a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.mnbook__acts{display:flex;flex-wrap:wrap;gap:14px}
.mnbook .u-btn--light:hover{color:var(--focus-deep)}

/* ---- Opening statement ----
   The page's first block of prose. Display heading and two paragraphs across
   six columns, one tall portrait across four, and nothing else. */
.mnopen{background:var(--paper-pure)}
.mnopen__grid{align-items:center}
.mnopen__copy{grid-column:1/span 6}
.mnopen__media{grid-column:8/span 5;margin:0}
@media (max-width:900px){
  .mnopen__copy,.mnopen__media{grid-column:1/-1}
  .mnopen__media{max-width:440px;margin-top:clamp(24px,3vw,34px)}
}
.mnopen__media img{width:100%;display:block;border-radius:4px;aspect-ratio:4/5;object-fit:cover}
.mnopen__h2{
  font-size:clamp(1.7rem,3vw,2.7rem);line-height:1.12;
  margin-top:clamp(12px,1.4vw,18px);max-width:20ch;
}
.mnopen__h2 em{font-style:italic;color:var(--focus-deep)}
.mnopen__p{color:var(--muted);line-height:1.72;margin-top:1.15em;max-width:60ch;text-wrap:pretty}
/* The treatment-areas / course / price line from the copy deck. It was a card
   floating over the hero image, which the client did not want, so it reads as a
   spec strip under the opening paragraphs instead. Same content, no card. */
.mnopen__facts{
  margin-top:clamp(28px,3.2vw,42px);
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 clamp(24px,3vw,48px);
  border-top:1px solid var(--ink);
}
@media (max-width:620px){.mnopen__facts{grid-template-columns:1fr}}
.mnopen__fact{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.mnopen__fact dt{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--focus-deep);
}
.mnopen__fact dd{margin:6px 0 0;font-size:.94rem;line-height:1.45;color:var(--ink-deep)}
.mnopen__fact dd b{font-family:var(--disp);font-weight:400;font-size:1.5rem;line-height:1;color:var(--focus-deep)}


/* ---- Cross-link cards ----
   A card variant of the closing band, for pages long enough that a single
   flex row of two links would look like an afterthought. */
.xlink__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-block:1px solid var(--line);
}
@media (max-width:960px){.xlink__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.xlink__grid{grid-template-columns:1fr}}
.xlink__c{
  background:var(--paper-pure);padding:clamp(24px,2.6vw,36px);
  display:flex;flex-direction:column;gap:10px;
  transition:background .4s var(--ease);
}
.xlink__c:hover{background:var(--paper)}
.xlink__k{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--focus-deep);
}
.xlink__n{
  font-family:var(--disp);font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.2;
  color:var(--ink-deep);
}
.xlink__c:hover .xlink__n{color:var(--focus-deep)}
.xlink__p{font-size:.87rem;line-height:1.6;color:var(--muted)}
/* The question is a heading that happens to be operable, so the h3 carries the
   semantics and the button inside it carries the behaviour. The h3 itself must
   not add type styling of its own or it fights the button's. */
.mnfaq__h{margin:0;font:inherit}
.mndev__lead{
  grid-column:7/span 6;grid-row:2;
  margin-top:clamp(24px,2.6vw,34px);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--focus-deep);
}
.mndev__lead + .mndev__specs{margin-top:14px}
.mnser__link{color:var(--focus);text-decoration:underline;text-underline-offset:3px}
.mnser__link:hover{color:var(--paper)}
.mnwhy__p a{color:var(--focus);text-decoration:underline;text-underline-offset:3px}
.mnwhy__p a:hover{color:var(--paper)}
.mnba__btn:disabled{opacity:.32;cursor:default}
.mnba__btn:disabled:hover{background:transparent;color:var(--paper);border-color:var(--line-light)}
/* The score is a Google rating, so it says so with the mark as well as the
   caption — the same treatment the hero badge already uses. */
.revs__g{flex:none;width:26px;height:26px;display:grid;place-items:center;align-self:center}
.revs__g svg{width:100%;height:100%}
.nav__has.is-open .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__has.is-open .nav__car{transform:rotate(180deg)}

/* ---------- 33. Article page ----------
   The first of the 32 blog articles, and the template for the rest: a compact
   header rather than a full-bleed hero, a measured single column of prose, and
   a sidebar that holds while the article scrolls. Leaf pages on this site do
   not carry the page hero — same reasoning as the product and biography pages. */

/* ---- Header ---- */
.art{background:var(--paper-pure);padding-top:calc(var(--mast-h,88px) + clamp(26px,3.2vw,50px))}
.art__head{max-width:56rem}
.art__cat{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--focus-deep);
}
.art__cat::before{content:"";width:26px;height:1px;background:var(--focus)}
.art__h1{
  font-size:clamp(1.95rem,3.7vw,3.2rem);line-height:1.12;
  margin-top:clamp(14px,1.6vw,20px);text-wrap:balance;
}
.art__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7em clamp(14px,1.6vw,22px);
  margin-top:clamp(18px,2vw,26px);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.art__meta span{display:inline-flex;align-items:center;gap:.55em}
.art__meta svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.art__fig{margin:clamp(26px,3.2vw,44px) 0 0;border-radius:4px;overflow:hidden}
.art__fig img{width:100%;display:block;aspect-ratio:16/7;object-fit:cover}
@media (max-width:760px){.art__fig img{aspect-ratio:3/2}}

/* ---- Body: article and sidebar ---- */
.art__body{padding-block:clamp(38px,4.4vw,64px) clamp(60px,7vw,104px);background:var(--paper-pure)}
/* Two tracks, not the 12-column grid, and a narrower container than the rest of
   the site. On the full-width grid an eight-column track came out around 870px
   while a readable measure is nearer 640, so the article sat in the left half of
   its own column with a void beside it. Sizing the container so the column IS
   the measure removes the gap instead of papering over it. */
.art__body .u-wrap,.art .u-wrap{max-width:1160px}
.art__grid{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(36px,4.4vw,72px);
}
.art__main{min-width:0}
/* The sidebar scrolls with the article rather than sticking. Measured at about
   1500px against roughly 880px of viewport below the masthead: pinning its top
   would park the last 600px, the whole booking card, permanently out of reach,
   and sticking it by the bottom edge does not engage for a box this much taller
   than the scrollport. Left to scroll, every card is reachable and the
   behaviour is the same in every browser. align-self:start stops it stretching
   to the article's height and spacing the cards out. */
.art__side{align-self:start}
@media (max-width:1020px){
  .art__grid{grid-template-columns:minmax(0,1fr)}
  .art__side{position:static;margin-top:clamp(48px,6vw,80px)}
  /* With the sidebar gone the track is the full container, which would run the
     measure past 100 characters. Above this width the column already is the
     measure, so the cap is only needed here. */
  .art__prose,.art__faq{max-width:70ch}
}

/* ---- Prose ----
   One measure, one rhythm. Everything here is the article's own typography, so
   the copy can be dropped in unchanged from the source. */
.art__prose{font-size:1.02rem}
.art__prose > p{color:var(--muted);line-height:1.78;margin-top:1.15em;text-wrap:pretty}
.art__prose > p:first-child{margin-top:0}
.art__prose .art__lede{
  font-size:clamp(1.04rem,1.35vw,1.2rem);line-height:1.62;color:var(--ink);
}
.art__prose h2{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(1.35rem,2.05vw,1.85rem);line-height:1.22;color:var(--ink-deep);
  margin-top:clamp(38px,4.2vw,60px);
  padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid var(--line-soft);
  text-wrap:balance;
}
.art__prose h2 + p{margin-top:.9em}
.art__prose h3{
  font-size:1.02rem;font-weight:700;color:var(--ink-deep);
  margin-top:clamp(24px,2.6vw,32px);
}
.art__prose ul{margin-top:1.1em;display:grid;gap:11px}
.art__prose ul li{
  position:relative;padding-left:26px;color:var(--muted);line-height:1.65;
}
.art__prose ul li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:50%;
  border:1.5px solid var(--focus);
}
.art__prose ul li strong{color:var(--ink-deep);font-weight:700}
.art__prose a{
  color:var(--focus-deep);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.art__prose a:hover{color:var(--ink-deep)}

/* ---- Article FAQs ----
   Native <details>, so the answers are in the DOM for search engines and open
   without JavaScript. The marker is replaced rather than hidden, because
   ::-webkit-details-marker alone still leaves a bullet in Firefox. */
.art__faq{margin-top:clamp(38px,4.2vw,60px);padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line-soft)}
.art__faqlist{margin-top:clamp(18px,2vw,26px);border-top:1px solid var(--line-soft)}
.art__q{border-bottom:1px solid var(--line-soft)}
.art__q > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:16px;
  padding:18px 0;font-weight:600;font-size:.98rem;line-height:1.45;color:var(--ink-deep);
}
.art__q > summary::-webkit-details-marker{display:none}
.art__q > summary::after{
  content:"";flex:none;width:10px;height:10px;margin-top:5px;margin-left:auto;
  border-right:1.5px solid var(--focus-deep);border-bottom:1.5px solid var(--focus-deep);
  transform:rotate(45deg);transition:transform .35s var(--ease);
}
.art__q[open] > summary::after{transform:rotate(-135deg)}
.art__q > summary:hover{color:var(--focus-deep)}
.art__q p{padding:0 0 20px;color:var(--muted);line-height:1.7}
@media (prefers-reduced-motion:reduce){.art__q > summary::after{transition:none}}

/* ---- Article footer: share and back ---- */
.art__foot{
  margin-top:clamp(38px,4.4vw,58px);padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}

/* ---- Sidebar ---- */
.side{display:grid;gap:clamp(20px,2.2vw,28px)}
.side__card{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:4px;
  padding:clamp(20px,1.9vw,26px);
}
.side__h{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--focus-deep);padding-bottom:14px;border-bottom:1px solid var(--ink);
}

/* Categories: a row per category with its live count */
.side__cats{margin-top:4px}
.side__cat{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--line-soft);
  font-size:.92rem;color:var(--ink);
  transition:color .3s var(--ease);
}
.side__cat:last-child{border-bottom:0;padding-bottom:0}
.side__cat:hover{color:var(--focus-deep)}
.side__n{
  margin-left:auto;flex:none;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  color:var(--muted);
  background:var(--paper-pure);border:1px solid var(--line-soft);
  border-radius:100px;padding:2px 9px;
}
.side__cat:hover .side__n{border-color:var(--focus);color:var(--focus-deep)}

/* Recent posts: thumbnail, title, date */
.side__posts{margin-top:6px;display:grid}
.side__post{
  display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
}
.side__post:last-child{border-bottom:0;padding-bottom:0}
.side__thumb{
  width:64px;height:64px;border-radius:3px;overflow:hidden;background:var(--paper-pure);
}
.side__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.side__post:hover .side__thumb img{transform:scale(1.06)}
.side__pt{
  font-size:.87rem;line-height:1.4;color:var(--ink-deep);font-weight:600;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.side__post:hover .side__pt{color:var(--focus-deep)}
.side__pd{
  margin-top:6px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.side__all{
  display:inline-flex;align-items:center;gap:.6em;margin-top:16px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--focus-deep);
}
.side__all:hover{color:var(--ink-deep)}
.side__all span{transition:transform .4s var(--ease-out)}
.side__all:hover span{transform:translateX(4px)}

/* The one card that asks for the appointment */
.side__card--cta{background:var(--ink-deep);border-color:var(--ink-deep);color:var(--paper)}
.side__card--cta .side__h{color:var(--focus);border-bottom-color:var(--line-light)}
.side__ctap{margin-top:16px;font-size:.9rem;line-height:1.62;color:rgba(231,238,245,.74)}
.side__card--cta .u-btn{width:100%;margin-top:18px}
.side__tel{
  display:block;margin-top:12px;text-align:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:rgba(231,238,245,.62);
}
.side__tel:hover{color:var(--focus)}

/* Publication dates, recovered from the client's live site. Set in mono beside
   the category so the card meta reads as one line of record. */
.jc__date,.jlead__date{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.jc__date::before,.jlead__date::before{content:"·";margin:0 .6em;opacity:.6}
.jlead__date{color:rgba(231,238,245,.6)}

/* ---- About the author ----
   Closes the article with the clinician behind it. Portrait left at a fixed
   width so the copy measure is unaffected by it, and the whole block sits on
   the paper tone so it reads as a card rather than more article. */
.auth{
  margin-top:clamp(38px,4.4vw,58px);
  background:var(--paper);border:1px solid var(--line-soft);border-radius:4px;
  padding:clamp(24px,2.6vw,34px);
  display:grid;grid-template-columns:104px minmax(0,1fr);
  gap:clamp(20px,2.4vw,30px);align-items:start;
}
@media (max-width:600px){
  .auth{grid-template-columns:1fr;gap:18px}
  .auth__portrait{width:88px}
}
.auth__portrait{
  width:104px;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--paper-pure);border:1px solid var(--line-soft);
}
.auth__portrait img{width:100%;height:100%;object-fit:cover;display:block}
.auth__lab{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--focus-deep);
}
.auth__name{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.2;color:var(--ink-deep);
  margin-top:8px;
}
.auth__name a:hover{color:var(--focus-deep)}
.auth__role{
  margin-top:6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.auth__p{margin-top:14px;color:var(--muted);line-height:1.7;font-size:.94rem;text-wrap:pretty}
.auth__creds{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:8px;
}
.auth__cred{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  color:var(--muted);background:var(--paper-pure);
  border:1px solid var(--line-soft);border-radius:100px;padding:5px 11px;
}
.auth__more{
  display:inline-flex;align-items:center;gap:.6em;margin-top:16px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--focus-deep);
}
.auth__more:hover{color:var(--ink-deep)}
.auth__more span{transition:transform .4s var(--ease-out)}
.auth__more:hover span{transform:translateX(4px)}
/* The byline is a link now, so it needs to look like one in the meta row. */
.art__meta a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.art__meta a:hover{color:var(--focus-deep)}