/* Esteticare USA — client mockup by daysgraphic.
   EDITORIAL CLINIC. One marine family: --sea carries every action, --deep every
   dark panel, --sea-lite is the same accent inverted for dark grounds. The
   porcelain leans warm on purpose; a clinic rendered entirely cool reads cold.

   Reserving is the only primary action on the page. Instagram is always the
   compact secondary next to it, never equal weight. WhatsApp appears in the
   location details as a phone number and nowhere else.

   Type is inverted from the usual clinic pairing: Jost (geometric sans) does
   display and all structure, Newsreader (serif) does the reading.

   The line illustrations are a single hand-drawn set — 1.5px strokes, round
   caps, currentColor — kept decorative and always behind the real footage.

   Single theme by design: this is a brand surface, not a document. */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&display=swap');

:root{
  --paper:#F4F4F1; --white:#FEFEFD; --wash:#EAEEEC;
  --ink:#0B2A2E; --soft:#526A6D; --faint:#8A9B9C;
  --sea:#0F7D88; --sea-deep:#0A5A63; --sea-lite:#7FD3DA; --mist:#E1EEED;
  --deep:#072A2E;

  --line:rgba(11,42,46,.14); --line2:rgba(11,42,46,.07);
  --line-inv:rgba(255,255,255,.16);

  --r:8px; --r-cta:11px; --r-pill:999px;
  --shadow-soft:0 16px 40px rgba(7,42,46,.10);
  --shadow-float:0 12px 30px rgba(7,42,46,.18);
  --ease-out:cubic-bezier(.22,1,.36,1);

  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;

  --gap:clamp(66px,8vw,124px);
  --navh:72px;
  --gutter:34px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;font-family:var(--serif);font-size:18px;line-height:1.65;color:var(--ink);
  background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sea);outline-offset:3px;border-radius:3px}

.wrap{width:min(1480px,100%);margin:0 auto;padding-inline:var(--gutter)}
.wrap--tight{width:min(1040px,100%)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── type ─────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--sans);font-weight:300;margin:0;line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
.display{font-size:clamp(40px,5.6vw,76px);letter-spacing:-.035em}
.h2{font-size:clamp(29px,3.8vw,46px)}
.h3{font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1.22}
.h4{font-size:17px;font-weight:500;letter-spacing:0;line-height:1.3}
.display em,.h2 em{color:var(--sea);font-family:var(--serif);font-weight:300;font-style:italic;letter-spacing:-.01em}
.label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sea);margin:0}
.lead{font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.9vw,22px);line-height:1.55;color:var(--soft);max-width:54ch}
.body{color:var(--soft);max-width:64ch}
.small{font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--soft)}
.tiny{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--faint)}
.num{font-variant-numeric:tabular-nums}

/* ── illustrations ────────────────────────────────────────────
   Two families that do not mix. .ic / .il--sm are the stroked UI icons —
   calendar, Instagram, arrows, pin. .il--art is the client's own filled
   artwork, a single-colour set recoloured through currentColor.

   The artwork is sized by HEIGHT, not width: the pieces run from 1:1 to
   roughly 1:2.7, so a fixed width makes the tall ones tower over a heading
   and the wide ones disappear. Each host <svg> carries its own viewBox —
   a symbol's viewBox does not give the host an intrinsic ratio, so without
   it `height:auto` would resolve to zero. */
.il{display:block;color:var(--sea);flex:0 0 auto}
.il--art{height:clamp(104px,12vw,164px);width:auto;opacity:.92}
.il--art-sm{height:clamp(62px,7vw,86px)}
.il--sm{width:26px;height:26px}
.ic{width:18px;height:18px;flex:0 0 auto}

/* ── buttons ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  padding:15px 26px;border:1px solid transparent;border-radius:var(--r-cta);cursor:pointer;
  background:none;transition:background .22s var(--ease-out),color .22s var(--ease-out),
    border-color .22s var(--ease-out),transform .22s var(--ease-out),box-shadow .22s var(--ease-out)}
.btn--sea{background:var(--sea);color:#fff}
.btn--sea:hover{background:var(--sea-deep);transform:translateY(-2px);box-shadow:var(--shadow-float)}
.btn--line{border-color:var(--line);color:var(--ink)}
.btn--line:hover{border-color:var(--sea);color:var(--sea);transform:translateY(-2px)}
.btn--inv{background:#fff;color:var(--deep)}
.btn--inv:hover{background:var(--mist);transform:translateY(-2px)}
.btn--sm{padding:11px 18px;font-size:12.5px}
.btn{white-space:nowrap}
.btn--lg{min-height:56px;padding-inline:34px;font-size:15px}
.btn--block{width:100%}

/* ── the CTA pair — one control, two unequal parts ────────── */
.cta{display:flex;align-items:stretch;gap:8px}
.cta__go{flex:1 1 auto;min-height:56px}
.cta__ig{flex:0 0 56px;width:56px;min-height:56px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-cta);border:1px solid var(--line);color:var(--ink);background:transparent;
  transition:background .22s var(--ease-out),color .22s var(--ease-out),
    border-color .22s var(--ease-out),transform .22s var(--ease-out)}
.cta__ig:hover{background:var(--mist);border-color:var(--sea);color:var(--sea-deep);transform:translateY(-2px)}
.cta__ig .ic{width:22px;height:22px}
/* over dark grounds */
.cta--inv .cta__ig{border-color:rgba(255,255,255,.42);color:#fff}
.cta--inv .cta__ig:hover{background:#fff;color:var(--deep);border-color:#fff}
.cta{width:100%}
.cta--tight{max-width:460px}

/* ── nav ──────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:rgba(244,244,241,.88);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 rgba(0,0,0,0);transition:box-shadow .25s,background .25s}
.nav.is-stuck,.nav.is-menu{box-shadow:0 1px 0 var(--line);background:rgba(244,244,241,.96)}
.nav .wrap{display:flex;align-items:center;gap:26px;min-height:var(--navh)}
.brand{display:flex;flex-direction:column;gap:1px;margin-right:auto}
.brand__n{font-family:var(--sans);font-size:19px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;line-height:1}
.brand__s{font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:.19em;text-transform:uppercase;color:var(--faint)}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{font-family:var(--sans);font-size:14px;color:var(--soft);position:relative;padding:4px 0;white-space:nowrap}
.nav__links a:hover{color:var(--ink)}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--sea);transition:right .25s var(--ease-out)}
.nav__links a:hover::after{right:0}
.nav__cta{display:flex;align-items:center;gap:10px}
.burger{display:none;border:1px solid var(--line);border-radius:var(--r);
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);background:none}

/* reversed only while genuinely floating over the hero */
.nav:not(.is-stuck):not(.is-menu){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav:not(.is-stuck):not(.is-menu) .brand__n{color:#fff}
.nav:not(.is-stuck):not(.is-menu) .brand__s{color:rgba(255,255,255,.6)}
.nav:not(.is-stuck):not(.is-menu) .nav__links a{color:rgba(255,255,255,.86)}
.nav:not(.is-stuck):not(.is-menu) .nav__links a:hover{color:#fff}
.nav:not(.is-stuck):not(.is-menu) .burger{color:#fff;border-color:rgba(255,255,255,.34)}

/* ── hero ─────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;margin-top:calc(-1 * var(--navh));background:var(--deep)}
.hero__bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 14% 6%, rgba(127,211,218,.30) 0%, rgba(127,211,218,0) 58%),
    radial-gradient(100% 90% at 86% 92%, rgba(15,125,136,.42) 0%, rgba(15,125,136,0) 62%),
    linear-gradient(150deg,#0A3B42 0%,#0B4A52 44%,#062226 100%)}
.hero__bgimg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  object-position:72% 50%}
/* Weighted left: the copy sits over the darkest part while the right side of
   the photograph stays readable. */
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(97deg,rgba(6,34,38,.93) 0%,rgba(6,34,38,.86) 30%,
    rgba(6,34,38,.62) 62%,rgba(6,34,38,.42) 100%)}
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;
  gap:clamp(32px,5vw,76px);align-items:center;min-height:min(84vh,780px);
  padding-top:calc(var(--navh) + clamp(46px,6vh,84px));padding-bottom:clamp(54px,7vh,94px)}
/* the framed portrait is a mobile-only device now */
.hero__frame{display:none}
.hero__l{display:flex;flex-direction:column;gap:22px;color:#fff;max-width:660px}
.hero__l .display{color:#fff;max-width:15ch}
.hero__l .display em{color:var(--sea-lite)}
.hero__l .label{color:var(--sea-lite)}
.hero__l .lead{color:rgba(255,255,255,.84)}
.hero__note{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13.5px;color:rgba(255,255,255,.72)}
.hero__note .ic{color:var(--sea-lite)}

.hero__frame{position:relative;width:100%;max-width:404px;margin-left:auto;aspect-ratio:9/16;
  border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 90px rgba(0,0,0,.5)}
.hero__vid,.hero__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* desktop takes the still; the mobile block below swaps them */
.hero__vid{display:none}
.hero__tag{position:absolute;left:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:var(--r-pill);background:rgba(6,34,38,.62);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);
  font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.hero__tag .ic{width:15px;height:15px;color:var(--sea-lite)}
/* The footage is bright and warm against a deep marine page, so it carries a
   tint of its own — not only a gradient at the foot for the caption. */
.hero__frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,34,38,.34) 0%,rgba(6,34,38,.24) 44%,rgba(6,34,38,.74) 100%)}

/* ── trust strip ──────────────────────────────────────────── */
.trust{background:var(--white);border-bottom:1px solid var(--line)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust__i{display:flex;gap:15px;align-items:flex-start;padding:28px 30px 30px;border-right:1px solid var(--line)}
.trust__i:last-child{border-right:0}
.trust__t{font-family:var(--sans);font-size:16px;font-weight:500;color:var(--ink);display:block;margin-bottom:2px}
.trust__d{font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--soft)}

/* ── section frame ────────────────────────────────────────── */
.band{padding:var(--gap) 0}
.band--line{border-top:1px solid var(--line)}
.band--wash{background:var(--wash)}
.band--deep{background:var(--deep);color:#fff}
.band--deep .lead,.band--deep .body,.band--deep .small{color:rgba(255,255,255,.74)}
.band--deep .label{color:var(--sea-lite)}
.band--deep .tiny{color:rgba(255,255,255,.5)}
.band--deep .h2,.band--deep .h3,.band--deep .h4{color:#fff}

.shead{display:flex;flex-direction:column;gap:13px;margin-bottom:38px;max-width:62ch}
.shead--split{max-width:none;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:34px;flex-wrap:wrap}
/* :not(.rail__nav) is load-bearing — this rule was also catching the arrow
   group and turning it into a column, which is why the arrows stacked */
.shead--split>div:not(.rail__nav){display:flex;flex-direction:column;gap:13px;max-width:56ch}
.shead--split>.rail__nav{margin-left:auto;align-self:flex-end}
.shead--il{flex-direction:row;align-items:center;gap:26px;max-width:none}
.shead--il>div{display:flex;flex-direction:column;gap:13px;max-width:58ch}

/* ── filter chips ─────────────────────────────────────────── */
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--white);cursor:pointer;
  font-family:var(--sans);font-size:13.5px;color:var(--soft);white-space:nowrap;
  transition:background .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out)}
.chip:hover{border-color:var(--sea);color:var(--sea)}
.chip .ic{width:16px;height:16px}
.chip[aria-pressed="true"]{background:var(--sea);border-color:var(--sea);color:#fff}

/* ── rails (desktop grid → mobile snap carousel) ──────────── */
.rail{display:grid;gap:20px}
.rail--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rail--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rail__nav{display:flex;gap:8px}
.rnav{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out),background .2s var(--ease-out)}
.rnav:hover{border-color:var(--sea);color:var(--sea)}
.rnav[disabled]{opacity:.34;cursor:default}
.rnav[disabled]:hover{border-color:var(--line);color:var(--ink)}

/* ── treatment card ───────────────────────────────────────── */
.tcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .22s var(--ease-out),box-shadow .22s var(--ease-out),transform .22s var(--ease-out)}
.tcard:hover{border-color:rgba(15,125,136,.38);box-shadow:var(--shadow-soft);transform:translateY(-3px)}
/* [hidden] alone loses to the display on .tcard and .ccard, so it is set for
   any tile in the rail rather than for the card class */
#trail > [hidden]{display:none}
.tcard[hidden]{display:none}

/* the reveal below the grid — desktop only; mobile scrolls the rail instead */
.railmore{display:flex;justify-content:center;margin-top:30px}
.railmore [hidden]{display:none}
.tcard__media{position:relative;height:196px;overflow:hidden;background:var(--deep)}
.tcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease-out)}
.tcard:hover .tcard__media img{transform:scale(1.04)}
/* a soft wash off the top so the category chip always has something to sit on */
.tcard__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,34,38,.34) 0%,rgba(6,34,38,0) 42%)}
.tcard__plate{position:absolute;inset:0;
  background:
    radial-gradient(110% 90% at 18% 10%, rgba(127,211,218,.42) 0%, rgba(127,211,218,0) 58%),
    linear-gradient(148deg,#0A3B42 0%,#0F5B64 48%,#072A2E 100%)}
.tcard__plate--soft{background:
    radial-gradient(110% 90% at 22% 14%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(150deg,#E9F2F1 0%,#DBE9E8 54%,#CDE0DF 100%)}
.tcard__il{position:absolute;right:14px;bottom:12px;z-index:2;width:64px;height:64px;color:rgba(255,255,255,.5)}
.tcard__plate--soft ~ .tcard__il{color:rgba(15,125,136,.42)}
.tcard__cat{position:absolute;left:12px;top:12px;z-index:2;padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(6,34,38,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:var(--sans);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#fff}
.tcard__b{padding:20px 20px 22px;display:flex;flex-direction:column;gap:11px;flex:1}
.tcard__d{font-size:16px;line-height:1.55;color:var(--soft)}
.tcard__meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:12px;border-top:1px solid var(--line2);margin-top:auto}
.tcard__price{font-family:var(--sans);font-size:20px;color:var(--ink);white-space:nowrap}
.tcard__price small{font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block}
.tcard__dur{font-family:var(--sans);font-size:12.5px;color:var(--faint)}
/* the reserve button takes the full card width and the detail link sits under
   it — sharing a row made the primary action look like one of two equals */
.tcard__acts{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:4px}
.tcard__acts .btn{width:100%;padding-block:14px}
.tcard__acts .tlink{align-self:flex-start}
.tlink{font-family:var(--sans);font-size:13px;color:var(--sea);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tlink:hover{color:var(--sea-deep)}

/* consultation card — the catch-all at the end of the rail */
.ccard{background:var(--deep);color:#fff;border-radius:var(--r);padding:26px 24px 28px;
  display:flex;flex-direction:column;gap:14px;justify-content:center;border:1px solid var(--deep)}
/* the card is a flex column with no align-items, so a block-level <svg> would
   stretch to the full column width and blow the artwork's ratio */
.ccard .il{align-self:flex-start}
.ccard .h3{color:#fff}
.ccard p{font-family:var(--sans);font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.76)}
.ccard .il{color:var(--sea-lite);margin-bottom:2px}

/* ── showcase ─────────────────────────────────────────────── */
.showcase{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(360px,42vw,520px)}
.showcase__bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(110% 90% at 78% 12%, rgba(127,211,218,.28) 0%, rgba(127,211,218,0) 56%),
    linear-gradient(140deg,#0A3B42 0%,#0D525A 50%,#062226 100%)}
.showcase__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,rgba(6,34,38,.90) 0%,rgba(6,34,38,.68) 48%,rgba(6,34,38,.34) 100%)}
.showcase__inner{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(26px,4vw,60px);
  padding-block:clamp(54px,6vw,86px)}
.showcase__t{display:flex;flex-direction:column;gap:17px;color:#fff;max-width:56ch}
.showcase__t .h2{color:#fff}
.showcase__t p{color:rgba(255,255,255,.8)}
.showcase__il{color:var(--sea-lite);opacity:.85;height:clamp(160px,20vw,280px);width:auto;flex:0 0 auto}

/* ── results ──────────────────────────────────────────────── */
.rcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white);
  display:flex;flex-direction:column}
.rcard__pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);height:330px}
.rcard__half{position:relative;overflow:hidden;background:var(--deep)}
.rcard__half .tcard__plate{position:absolute;inset:0}
.rcard__k{position:absolute;left:10px;top:10px;z-index:2;padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(6,34,38,.6);font-family:var(--sans);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:#fff}
.rcard__b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.rcard__t{font-family:var(--sans);font-size:15.5px;font-weight:500;color:var(--ink)}
.rcard__s{font-family:var(--sans);font-size:12.5px;color:var(--faint)}

/* ── pricing ──────────────────────────────────────────────── */
.psum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.psum__i{background:var(--white);padding:24px 22px 26px;display:flex;flex-direction:column;gap:7px}
.psum__k{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.psum__v{font-family:var(--sans);font-size:clamp(26px,2.6vw,32px);font-weight:300;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.psum__d{font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--soft)}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px;min-width:600px}
caption{caption-side:bottom;text-align:left;padding:15px 22px 17px;font-size:12.5px;line-height:1.55;
  color:var(--faint);border-top:1px solid var(--line2)}
th,td{text-align:left;padding:14px 22px;border-bottom:1px solid var(--line2)}
thead th{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
td.t-name{font-weight:500;color:var(--ink)}
td.t-name span{display:block;font-weight:400;font-size:13px;color:var(--soft);margin-top:3px;max-width:46ch}
td.t-dur,th.t-dur{white-space:nowrap;color:var(--soft);font-variant-numeric:tabular-nums}
td.t-price,th.t-price{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:17px;color:var(--ink)}
tbody tr.t-group td{background:var(--wash);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sea)}

/* ── financing ────────────────────────────────────────────── */
.fcard{background:rgba(255,255,255,.05);border:1px solid var(--line-inv);border-radius:var(--r);
  padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px}
.fcard__n{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--sea-lite);
  font-variant-numeric:tabular-nums}
.fcard .il{color:var(--sea-lite);margin-bottom:2px}
.fcard p{font-family:var(--sans);font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.74)}

/* ── clinic + location ────────────────────────────────────── */
.clinic{display:grid;grid-template-columns:1fr 1.04fr;gap:clamp(32px,4.5vw,68px);align-items:start}
/* min-width:0 or the timeline's edge-bleed margins set a min-content floor on
   the grid track and push the whole column past the viewport on phones */
.clinic>*{min-width:0}
.tl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.tlc{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px 22px;
  display:flex;flex-direction:column;gap:7px}
.tlc__y{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sea)}
.tlc p{font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--soft)}

.locbox{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.locbox__map{position:relative;height:290px;background:var(--deep)}
.locbox__frame{width:100%;height:100%;border:0;display:block}
.locbox__pin{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;color:#fff;text-align:center}
.locbox__pin span{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.locbox__b{padding:22px 22px 24px;display:flex;flex-direction:column}
.locrow{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line2);align-items:flex-start}
.locrow:last-of-type{border-bottom:0}
.locrow .ic{color:var(--sea);margin-top:2px}
.locrow__k{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);display:block;margin-bottom:3px}
.locrow__v{font-family:var(--sans);font-size:14.5px;line-height:1.5;color:var(--ink)}
.locrow__v a:hover{color:var(--sea)}

/* ── faq ──────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line2)}
.faq summary{list-style:none;cursor:pointer;padding:21px 44px 21px 0;position:relative;
  font-family:var(--sans);font-size:17.5px;color:var(--ink);transition:color .2s var(--ease-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--sea)}
.faq summary::after{content:"";position:absolute;right:8px;top:29px;width:10px;height:10px;
  border-right:1.5px solid var(--sea);border-bottom:1.5px solid var(--sea);
  transform:rotate(45deg);transition:transform .25s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(225deg);top:32px}
.faq__a{padding:0 0 22px;max-width:70ch;color:var(--soft);font-size:17px}

/* ── final CTA ────────────────────────────────────────────── */
.final{position:relative;overflow:hidden;background:var(--deep);text-align:center}
.final__bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(70% 120% at 50% 0%, rgba(15,125,136,.5) 0%, rgba(15,125,136,0) 62%)}
.final__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px;
  padding-block:clamp(66px,8vw,110px)}
.final__inner .h2{color:#fff;max-width:20ch}
.final__inner p{color:rgba(255,255,255,.76);max-width:52ch}
.final .il{color:var(--sea-lite);opacity:.9}
.final .cta{width:min(430px,100%)}

/* ── footer ───────────────────────────────────────────────── */
.foot{background:#051D20;color:#fff;padding:clamp(52px,6vw,80px) 0 30px}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:38px}
.foot__c{display:flex;flex-direction:column;gap:10px}
.foot__c .brand__n{color:#fff}
.foot__c .brand__s{color:rgba(255,255,255,.5)}
.foot h4{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sea-lite);margin-bottom:3px}
.foot a,.foot p{font-family:var(--sans);font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72)}
.foot a:hover{color:#fff}
.foot__bar{margin-top:40px;padding-top:20px;border-top:1px solid var(--line-inv);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot__bar p,.foot__bar a{font-size:12.5px;color:rgba(255,255,255,.5)}

/* ── mobile action bar ────────────────────────────────────── */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:8px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(244,244,241,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 -1px 0 var(--line);transform:translateY(110%);transition:transform .3s var(--ease-out)}
.actionbar.is-up{transform:none}
.actionbar .cta__go{flex:1 1 auto;min-height:52px}
.actionbar .cta__ig{flex:0 0 52px;width:52px;min-height:52px}

/* ── dialogs ──────────────────────────────────────────────── */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;color:inherit}
dialog::backdrop{background:rgba(6,34,38,.62);backdrop-filter:blur(4px)}
/* showModal() blocks interaction but not the scroll behind it, which on a
   phone lets the page drift under the sheet. The JS adds this while open and
   restores the scroll position on close. */
body.is-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.sheet{background:var(--paper);border-radius:16px;width:min(620px,calc(100vw - 32px));
  max-height:min(86vh,780px);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-float)}
.sheet--wide{width:min(880px,calc(100vw - 32px))}
.sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:30px 24px 18px;border-bottom:1px solid var(--line)}
.sheet__head h2{font-size:22px}
.sheet__x{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;color:var(--ink)}
.sheet__x:hover{border-color:var(--sea);color:var(--sea)}
.sheet__body{padding:22px 24px;overflow-y:auto;flex:1}
/* extra bottom padding, plus the safe-area inset — on a phone the sheet is
   anchored to the bottom edge and the button otherwise sits on the home bar */
.sheet__foot{padding:18px 24px calc(28px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);display:flex;gap:10px;
  align-items:center;justify-content:space-between;background:var(--white)}

/* booking panel — single step, so no progress rail */
.panel{display:none;flex-direction:column;gap:16px}
.panel.is-on{display:flex}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.opt{display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px 16px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--white);cursor:pointer;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
.opt:hover{border-color:var(--sea)}
.opt[aria-pressed="true"]{border-color:var(--sea);background:var(--mist)}
.opt b{font-family:var(--sans);font-size:14.5px;font-weight:500}
.opt span{font-family:var(--sans);font-size:12.5px;color:var(--soft)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.field input{font-family:var(--sans);font-size:15px;padding:13px 14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--white);color:var(--ink)}
.field input:focus{outline:2px solid var(--sea);outline-offset:1px;border-color:var(--sea)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:14px 0 6px}
.done .il{color:var(--sea)}
.demo{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--faint);
  background:var(--wash);border-radius:var(--r);padding:11px 14px}

/* ── reveal ───────────────────────────────────────────────── */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .rv.is-in{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero__l>*{animation:rise .8s var(--ease-out) backwards}
.hero__l>*:nth-child(1){animation-delay:.08s}
.hero__l>*:nth-child(2){animation-delay:.17s}
.hero__l>*:nth-child(3){animation-delay:.26s}
.hero__l>*:nth-child(4){animation-delay:.35s}
.hero__l>*:nth-child(5){animation-delay:.44s}
.hero__frame{animation:rise .9s var(--ease-out) .3s backwards}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:1180px){
  .rail--4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1040px){
  .clinic{grid-template-columns:1fr}
  .showcase__inner{flex-direction:column;align-items:flex-start}
  .trust__grid{grid-template-columns:1fr 1fr}
  .trust__i:nth-child(2n){border-right:0}
  .trust__i:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .psum{grid-template-columns:1fr 1fr}
}
@media (max-width:940px){
  /* hero goes full bleed — a phone viewport is portrait, so the 9:16 source
     fills it at or below native size and never upscales */
  .hero{min-height:90vh}
  .hero__inner{position:static;grid-template-columns:1fr;gap:0;align-items:stretch;
    padding-top:calc(var(--navh) + clamp(40px,8vh,84px));padding-bottom:clamp(40px,6vh,76px)}
  /* the copy holds the top of the frame and the CTA is pushed to the bottom by
     margin-top:auto, so the two are not bunched together in the upper half */
  .hero__l{position:relative;z-index:2;min-height:calc(90vh - var(--navh) - clamp(80px,14vh,160px))}
  .hero__l .cta{margin-top:auto;padding-top:10px;max-width:none}
  .hero__l .display{max-width:none;font-size:clamp(36px,8.4vw,52px)}
  .hero__l .lead{font-size:17.5px}
  /* the clip comes back and takes the whole frame; the wide still is desktop-only */
  .hero__bgimg{display:none}
  .hero__frame{display:block;position:absolute;inset:0;z-index:0;width:auto;max-width:none;margin:0;
    aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
  .hero__vid{display:block}
  .hero__still{display:none}
  .hero__l{max-width:none}
  .hero__frame::after{background:linear-gradient(180deg,rgba(6,34,38,.66) 0%,rgba(6,34,38,.50) 32%,
    rgba(6,34,38,.82) 64%,rgba(6,34,38,.96) 100%)}
  .hero__scrim{background:none}
  .hero__tag{left:auto;right:16px;top:calc(var(--navh) + 14px);bottom:auto}

  .nav__links{display:none}
  .nav__links.is-open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:flex-start;gap:0;background:var(--paper);box-shadow:0 1px 0 var(--line);padding:8px var(--gutter) 18px}
  .nav__links.is-open a{padding:14px 0;font-size:16px;width:100%;border-bottom:1px solid var(--line2)}
  .burger{display:inline-flex}
  .nav .wrap{position:relative}
  .nav__cta .btn{display:none}
  .actionbar{display:flex}

  /* rails become snap carousels, bleeding to the page edge */
  .rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter);scrollbar-width:none;-ms-overflow-style:none}
  .rail::-webkit-scrollbar{display:none}
  .rail>*{flex:0 0 82%;scroll-snap-align:start}
  .rail__nav{display:none}
  .railmore{display:none}
  .tl{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .tl::-webkit-scrollbar{display:none}
  .tl>*{flex:0 0 78%;scroll-snap-align:start}
  .rcard__pair{height:270px}
}
@media (max-width:620px){
  body{font-size:17px}
  :root{--navh:62px;--gutter:20px}
  .brand__n{font-size:17px;letter-spacing:.24em}
  .trust__grid{grid-template-columns:1fr}
  .trust__i{border-right:0;border-bottom:1px solid var(--line)}
  .trust__i:last-child{border-bottom:0}
  .psum{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr;gap:30px}
  .shead--il{flex-direction:column;align-items:flex-start;gap:16px}
  .shead--split{flex-direction:column;align-items:flex-start}
  .shead--split>.rail__nav{align-self:flex-end}
  .cta--tight{max-width:none}
  .grid2{grid-template-columns:1fr}
  .rail>*{flex:0 0 86%}
  .tl>*{flex:0 0 84%}
  .sheet{width:100vw;max-width:100vw;max-height:92vh;border-radius:16px 16px 0 0;
    margin-top:auto;margin-bottom:0}
  dialog{align-items:flex-end}

  /* The price table stops being a table on a phone. Each row becomes a block
     with the name across the top and the sessions and price on the line under
     it, so the price is never behind a sideways scroll. */
  .tablewrap{overflow-x:visible;border-radius:var(--r)}
  table{min-width:0;display:block}
  thead{display:none}
  tbody{display:block}
  tbody tr{display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"name name" "dur price";gap:4px 14px;
    padding:15px 18px;border-bottom:1px solid var(--line2)}
  tbody tr:last-child{border-bottom:0}
  tbody tr:hover td{background:none}
  td{display:block;border:0;padding:0}
  td.t-name{grid-area:name}
  td.t-name span{max-width:none}
  td.t-dur{grid-area:dur;align-self:end}
  td.t-price{grid-area:price;text-align:right;align-self:end}
  tbody tr.t-group{display:block;padding:12px 18px;background:var(--wash)}
  tbody tr.t-group td{background:none;padding:0}
  /* the table is display:block here, so a table-caption has no table box to
     measure against and collapses to a one-word-wide column on the left */
  caption{display:block;width:auto;padding:14px 18px 16px}
  /* the note repeats the caption, and squeezing it beside the button wrapped
     the label onto two lines */
  .sheet__foot{flex-wrap:wrap}
  .sheet__foot .tiny{display:none}
  .sheet__foot .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .rv{opacity:1;transform:none}
  .actionbar{transition:none}
}