/* ==========================================================================
   Younger Sensation Laser Clinic
   --------------------------------------------------------------------------
   Written against the same discipline as zuiden.co.za, because the Codex build
   this replaces had none: 64 distinct font-sizes and 43 separately invented
   rgba() values on top of 12 hex colours. That is not a palette, it is 55
   unrelated decisions, and it is exactly why the page read as "inconsistent,
   does not match each other". Every colour below comes from her Palette B and
   every size resolves to one of eight steps.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts -- */
@font-face{font-family:Jost;src:url(fonts/jost.woff2) format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant.woff2) format('woff2-variations');
  font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant-italic.woff2) format('woff2-variations');
  font-weight:300 700;font-style:italic;font-display:swap}

/* ================================================================ tokens === */
:root{
  /* --- Palette B, as held in ClientBook's businesses.config.brand. The site
     and the booking form embedded in it now draw from the same nine values. */
  --ink:#002324;          /* deepest — dark panels, and the button on light   */
  --khaki-deep:#56624B;   /* the serif accent on light grounds                */
  --khaki:#A1AD95;        /* labels and quiet type on dark grounds            */
  --lime:#EBFACF;         /* the one bright — used sparingly, never as a wash  */
  --cream:#F2F1E8;        /* the page ground                                  */
  --paper:#FAFCF6;        /* panel surfaces                                   */
  --white:#FFFFFF;        /* cards inside panels                              */
  --mauve:#E5DDDE;        /* a single accent panel, nothing more              */
  --wa:#25D366;           /* WhatsApp's own green, only ever on a WhatsApp    */
                          /* button — a recognised affordance, not a site     */
                          /* colour. Ink on it measures 8.4:1.                */

  /* --- Two translucency ladders, one per ground. Every see-through colour in
     this file is one of these six. The old stylesheet had 43. */
  --on-light-line:rgba(0,35,36,.14);
  --on-light-mute:rgba(0,35,36,.62);
  --on-light-soft:rgba(0,35,36,.05);
  --on-dark-line:rgba(242,241,232,.18);
  --on-dark-mute:rgba(242,241,232,.70);
  --on-dark-soft:rgba(242,241,232,.06);

  /* --- Eight steps, ~1.25 ratio. A ninth means changing the scale on purpose
     rather than typing a number. */
  --t-micro:11px;                  /* eyebrows, meta, legal                   */
  --t-small:13px;                  /* captions, notes, small print            */
  --t-body:16px;                   /* body copy                               */
  --t-lead:20px;                   /* ledes, card headings                    */
  --t-h3:25px;                     /* prices, sub-headings                    */
  --t-display:34px;                /* standalone numbers                      */
  --t-h2:clamp(28px,3.4vw,42px);   /* section headings                        */
  --t-h1:clamp(36px,5.2vw,62px);   /* the hero, once per page                 */

  --sans:Jost,'Helvetica Neue',Arial,sans-serif;
  --serif:Cormorant,'Iowan Old Style',Georgia,serif;

  --gutter:clamp(10px,1.3vw,18px);
  --pad-x:clamp(20px,5vw,72px);
  --pad-y:clamp(48px,5vw,78px);
  --radius:clamp(14px,1.8vw,24px);
}

/* ================================================================== base === */
/* The HTML hidden attribute loses to any display rule on the element, and this
   stylesheet sets display on things the script also hides. */
[hidden]{display:none !important}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button,a{touch-action:manipulation}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.02}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-lead);letter-spacing:-.02em;line-height:1.25}
p{margin:0}
em{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--lime);padding:12px 18px;border-radius:0 0 12px 0}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.panel--ink :focus-visible,.hero :focus-visible,.sub-hero :focus-visible{outline-color:var(--lime)}

/* ============================================================== eyebrows === */
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.14em;
  font-weight:500;color:var(--on-light-mute)}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.panel--ink .eyebrow,.hero .eyebrow,.sub-hero .eyebrow{color:var(--khaki)}

.lede{margin-top:20px;max-width:52ch;color:var(--on-light-mute);line-height:1.65}
.panel--ink .lede,.sub-hero .lede{color:var(--on-dark-mute)}

/* ================================================================ buttons === *
 * Three buttons, one shape. The Codex build had five variants across four
 * colours, which is most of what "the colours don't match each other" was.  */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 24px;border-radius:999px;border:1px solid transparent;
  font-size:var(--t-small);font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;cursor:pointer;
  transition:filter .2s ease,background .2s ease,color .2s ease}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--line{border-color:var(--on-light-line);color:var(--ink)}
.btn:hover{filter:brightness(1.08)}
.btn--line:hover{background:var(--on-light-soft);filter:none}
/* On dark grounds the solid button becomes the bright one, so contrast is
   carried by the button rather than by a border nobody can see. */
.panel--ink .btn--solid,.hero .btn--solid,.sub-hero .btn--solid{background:var(--lime);color:var(--ink)}
.panel--ink .btn--line,.hero .btn--line,.sub-hero .btn--line{border-color:var(--on-dark-line);color:var(--paper)}
.panel--ink .btn--line:hover,.hero .btn--line:hover{background:var(--on-dark-soft)}

/* One arrow, everywhere. The old build mixed → and ↗ inside a single row and
   rendered them at whatever size the surrounding type happened to be, which is
   why they did not match between desktop and phone. Drawn, not typed. */
.btn::after,.textlink::after{content:"";width:15px;height:15px;flex:none;
  background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;
  mask:var(--arrow) center/contain no-repeat;
  transition:transform .22s ease}
:root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M12.5 5.5 19 12l-6.5 6.5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.btn:hover::after,.textlink:hover::after{transform:translateX(3px)}

.textlink{display:inline-flex;align-items:center;gap:9px;
  font-size:var(--t-small);font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;padding:12px 0;min-height:44px}
.textlink:hover{color:var(--khaki-deep)}
.panel--ink .textlink:hover,.hero .textlink:hover,.sub-hero .textlink:hover{color:var(--lime)}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:28px}

/* =============================================================== header === *
 * A floating pill, inset on the same gutter as the panels below it, so the
 * page reads as one system rather than a bar bolted to a document.          */
.site-header{position:sticky;top:var(--gutter);z-index:40;
  margin:var(--gutter) var(--gutter) 0;
  padding:10px 10px 10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--paper);border:1px solid var(--on-light-line);
  border-radius:999px;box-shadow:0 10px 30px rgba(0,35,36,.05);
  transition:box-shadow .28s ease}
.site-header.is-tight{box-shadow:0 14px 38px rgba(0,35,36,.12)}
.wordmark{display:flex;align-items:center;gap:13px;font-weight:600;
  font-size:var(--t-body);letter-spacing:.1em;text-transform:uppercase}
.wordmark img{width:48px;height:48px;border-radius:50%}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{padding:12px 15px;font-size:var(--t-body);border-radius:999px}
.site-nav a:hover{background:var(--on-light-soft)}
.site-nav .btn{margin-left:6px}
.menu-btn{display:none;align-items:center;gap:9px;min-height:44px;padding:0 18px;
  background:transparent;border:1px solid var(--on-light-line);border-radius:999px;
  font-size:var(--t-small);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.menu-btn b{font-weight:600;width:11px;text-align:center}
#mobile-nav{display:none}

/* ================================================================ panels === *
 * main is the gutter; each section is a panel with its own ground, and the
 * cream page shows through between them as the gap.                         */
main{display:flex;flex-direction:column;gap:var(--gutter);padding:var(--gutter)}
main>section{border-radius:var(--radius);overflow:hidden;
  padding:var(--pad-y) var(--pad-x)}
.panel--paper{background:var(--paper)}
.panel--ink{background:var(--ink);color:var(--paper)}
.panel--lime{background:var(--lime)}
/* Mauve is the darkest of the light grounds, so the shared muted value lands
   at 4.29:1 on it against the 4.5 needed for body text. The panel darkens its
   own muted ink rather than the whole site lightening its ground. */
.panel--mauve{background:var(--mauve);--on-light-mute:rgba(0,35,36,.72)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,72px);align-items:start}
.split h2{max-width:15ch}

/* ================================================================== hero === */
.hero{background:var(--ink);color:var(--paper);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,64px);align-items:center;
  padding:clamp(52px,6vw,86px) var(--pad-x)}
.hero h1{max-width:12ch}
.hero h1 em{display:block;color:var(--khaki);font-size:1.06em;margin-top:-.06em}
.hero .lede{color:var(--on-dark-mute);font-size:var(--t-lead);max-width:44ch}

/* Three facts, not a decorated card. "Human" was one of them — a word doing a
   job it cannot do: it is not a quantity, so it read as a category error next
   to R160 and Free. It says what actually happens instead. */
.facts{display:grid;grid-template-columns:repeat(3,auto);gap:0 clamp(20px,3vw,44px);
  margin-top:clamp(34px,4vw,52px);justify-content:start}
.facts div{padding-right:clamp(20px,3vw,44px);border-right:1px solid var(--on-dark-line)}
.facts div:last-child{border-right:0;padding-right:0}
.facts b{display:block;font-family:var(--serif);font-size:var(--t-display);
  font-weight:600;letter-spacing:-.02em;line-height:1}
.facts span{display:block;margin-top:6px;font-size:var(--t-micro);
  text-transform:uppercase;letter-spacing:.13em;color:var(--khaki)}

/* The first-visit card. Flat, on its own ground, no beams and no halo — the
   glow was three 2px bars with a 14px box-shadow plus a text-shadow on the
   heading, and it read as a stock laser graphic rather than as her clinic. */
.hero-card{background:var(--paper);color:var(--ink);border-radius:18px;
  padding:clamp(24px,3vw,34px);box-shadow:0 24px 60px rgba(0,35,36,.3)}
.hero-card>span{font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:.14em;color:var(--on-light-mute)}
.hero-card ol{list-style:none;margin:18px 0 0;padding:0}
.hero-card li{display:flex;gap:14px;align-items:baseline;padding:14px 0;
  border-top:1px solid var(--on-light-line)}
.hero-card li i{font-style:normal;font-size:var(--t-micro);font-weight:600;
  color:var(--on-light-mute);font-variant-numeric:tabular-nums}
.hero-card li b{font-size:var(--t-body);font-weight:600;letter-spacing:-.01em}
.hero-card>p{margin-top:18px;padding-top:16px;border-top:1px solid var(--on-light-line);
  font-size:var(--t-small);color:var(--on-light-mute);line-height:1.6}

/* =============================================================== promises === */
.promises{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:center;
  padding:22px var(--pad-x)}
.promises span{display:flex;align-items:center;gap:11px;
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.13em;
  font-weight:500}
.promises span::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--khaki-deep);flex:none}

/* ================================================================ gallery === */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
  margin-top:clamp(28px,3.4vw,44px)}
.gallery figure{margin:0;position:relative;border-radius:16px;overflow:hidden;
  aspect-ratio:3/4;background:var(--on-light-soft)}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{position:absolute;left:12px;bottom:12px;
  background:rgba(0,35,36,.86);color:var(--paper);
  padding:6px 12px;border-radius:999px;
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em}

/* ================================================================= picker === */
.picker{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:var(--gutter);margin-top:clamp(28px,3.4vw,44px)}
.picker-tabs{display:flex;flex-direction:column;gap:8px}
.picker-tabs button{display:flex;align-items:center;gap:14px;text-align:left;
  min-height:62px;padding:0 20px;border-radius:14px;cursor:pointer;
  background:var(--white);border:1px solid var(--on-light-line);
  font-size:var(--t-body);font-weight:500;letter-spacing:-.01em;
  transition:background .2s ease,border-color .2s ease}
.picker-tabs button i{font-style:normal;font-size:var(--t-micro);font-weight:600;
  color:var(--on-light-mute);font-variant-numeric:tabular-nums}
.picker-tabs button:hover{border-color:var(--khaki)}
.picker-tabs button[aria-selected=true]{background:var(--ink);color:var(--paper);
  border-color:var(--ink)}
.picker-tabs button[aria-selected=true] i{color:var(--khaki)}
.picker-result{background:var(--white);border:1px solid var(--on-light-line);
  border-radius:16px;padding:clamp(24px,3vw,36px);
  display:flex;flex-direction:column}
.picker-result>span{font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:.14em;color:var(--on-light-mute)}
.picker-result h3{margin:14px 0 0;font-size:var(--t-h3)}
.picker-result strong{display:block;margin:6px 0 16px;font-family:var(--serif);
  font-size:var(--t-display);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.picker-result p{color:var(--on-light-mute);max-width:46ch}
.picker-result small{display:block;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--on-light-line);
  font-size:var(--t-small);color:var(--on-light-mute)}
.picker-result .actions{margin-top:auto;padding-top:22px}

/* ============================================================== price peek === */
.peek{display:grid;gap:8px;margin-top:clamp(24px,3vw,36px)}
.peek a{display:flex;align-items:center;gap:16px;min-height:62px;
  padding:0 clamp(16px,2vw,24px);border-radius:14px;background:var(--white);
  border:1px solid var(--on-light-line);
  transition:border-color .2s ease,transform .2s ease}
.peek a:hover{border-color:var(--ink);transform:translateX(3px)}
.peek span{flex:1;font-size:var(--t-body);letter-spacing:-.01em}
.peek strong{font-family:var(--serif);font-size:var(--t-h3);font-weight:600;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ================================================================== laser === *
 * "too big, glow is ugly". The heading was clamp(3.3rem,6vw,6.7rem) — 107px,
 * against a scale whose largest step is 62 — inside 144px of padding, with a
 * 28px halo behind the italic. It is a section on the page now, not a poster.
 */
.laser__lead{font-family:var(--serif);font-size:var(--t-h3);line-height:1.4;
  font-weight:400;color:var(--on-dark-mute);max-width:40ch;margin-top:20px}
.steps{list-style:none;margin:clamp(28px,3.4vw,42px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.steps li{background:var(--on-dark-soft);border:1px solid var(--on-dark-line);
  border-radius:16px;padding:clamp(20px,2.2vw,26px)}
.steps small{display:block;font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:.14em;color:var(--khaki)}
.steps h3{margin:12px 0 8px;font-size:var(--t-lead)}
.steps p{font-size:var(--t-small);line-height:1.65;color:var(--on-dark-mute)}
.realistic{margin:clamp(24px,3vw,34px) 0 0;padding:20px 24px;border-radius:14px;
  background:var(--on-dark-soft);border-left:2px solid var(--lime)}
.realistic small{display:block;font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:.14em;color:var(--khaki);margin-bottom:6px}
.realistic strong{font-weight:500;font-size:var(--t-body);line-height:1.6}
/* The same three-step list on a light panel. Surfaces AND type, together —
   swapping only the surfaces is what left the copy white on cream. */
.steps--light li{background:var(--white);border-color:var(--on-light-line)}
.steps--light small{color:var(--on-light-mute)}
.steps--light p{color:var(--on-light-mute)}

/* =================================================================== faq === */
.faq{margin-top:clamp(24px,3vw,36px)}
.faq details{border-top:1px solid var(--on-light-line)}
.faq details:last-child{border-bottom:1px solid var(--on-light-line)}
.faq summary{display:flex;align-items:center;gap:16px;padding:20px 0;
  cursor:pointer;list-style:none;font-size:var(--t-lead);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font-style:normal;margin-left:auto;font-size:var(--t-h3);
  font-weight:300;color:var(--on-light-mute);transition:transform .22s ease}
.faq details[open] summary i{transform:rotate(45deg)}
.faq summary b{font-size:var(--t-micro);font-weight:600;color:var(--on-light-mute);
  font-variant-numeric:tabular-nums}
.faq details p{padding:0 0 22px 34px;max-width:62ch;color:var(--on-light-mute)}

/* ================================================================= visit === */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,56px);align-items:center}
.visit-mark{margin:0;position:relative;border-radius:18px;overflow:hidden;
  aspect-ratio:4/3;background:var(--on-light-soft)}
.visit-mark img{width:100%;height:100%;object-fit:cover}
.visit-mark figcaption{position:absolute;left:14px;bottom:14px;
  background:rgba(0,35,36,.86);color:var(--paper);padding:8px 14px;
  border-radius:999px;font-size:var(--t-micro);
  text-transform:uppercase;letter-spacing:.1em}
.facts-list{margin:clamp(24px,3vw,34px) 0 0;display:grid}
.facts-list div{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  align-items:baseline;padding:14px 0;border-top:1px solid var(--on-light-line)}
.facts-list div:last-child{border-bottom:1px solid var(--on-light-line)}
.facts-list dt{font-size:var(--t-small);color:var(--on-light-mute)}
.facts-list dd{margin:0;font-weight:500;letter-spacing:-.01em}
.facts-list dd a{border-bottom:1px solid var(--on-light-line)}
.facts-list dd a:hover{border-color:var(--ink)}

/* ============================================================== book band === */
.book-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px 40px}
.book-band h2{max-width:16ch}

/* ================================================================ footer === */
.site-footer{background:var(--ink);color:var(--paper);
  border-radius:var(--radius);margin:0 var(--gutter) var(--gutter);
  padding:clamp(48px,5vw,76px) var(--pad-x) clamp(26px,3vw,38px)}
.foot-name{font-family:var(--serif);font-size:clamp(48px,9vw,110px);
  font-weight:600;letter-spacing:-.045em;line-height:.88;color:var(--lime);margin:0}
.foot-row{display:flex;flex-wrap:wrap;gap:28px 60px;justify-content:space-between;
  margin-top:clamp(30px,4vw,50px)}
.foot-row p{max-width:26ch;color:var(--on-dark-mute)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 36px}
.foot-links a{color:var(--on-dark-mute);padding:6px 0}
.foot-links a:hover{color:var(--paper)}
.foot-hours{font-size:var(--t-small);color:var(--khaki);margin-top:10px}
.foot-fine{margin-top:clamp(28px,3.4vw,44px);padding-top:20px;
  border-top:1px solid var(--on-dark-line);
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em;
  color:var(--on-dark-mute)}

/* WhatsApp is a button, not a phone number to copy out by hand. */
.wa{display:inline-flex;align-items:center;gap:10px;min-height:48px;
  padding:0 22px;border-radius:999px;background:var(--wa);color:var(--ink);
  font-size:var(--t-small);font-weight:600;letter-spacing:.02em;
  text-transform:uppercase}
.wa:hover{filter:brightness(1.06)}
.wa svg{width:17px;height:17px;flex:none;fill:currentColor}
.btn--line .wa,.wa.wa--line{background:transparent;border:1px solid var(--on-light-line);
  color:var(--ink)}

/* =============================================================== sub-hero === */
/* Sized to its content: at 14ch the heading used half the panel width and the
   padding then made a 300px band around 180px of copy. */
.sub-hero{background:var(--ink);color:var(--paper);
  padding:clamp(44px,4.6vw,68px) var(--pad-x)}
.sub-hero h1{max-width:19ch}
.sub-hero .lede{max-width:56ch}
.sub-hero h1 em{color:var(--khaki)}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.jump a{padding:11px 18px;border-radius:999px;border:1px solid var(--on-dark-line);
  font-size:var(--t-small)}
.jump a:hover{background:var(--on-dark-soft)}

/* ========================================================== price explorer === */
.tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:clamp(24px,3vw,34px)}
.search{position:relative;flex:1;min-width:230px}
.search input{width:100%;min-height:50px;padding:0 44px 0 18px;border-radius:999px;
  background:var(--white);border:1px solid var(--on-light-line);
  font-size:var(--t-body);-webkit-appearance:none}
.search span{position:absolute;right:18px;top:50%;transform:translateY(-50%);
  color:var(--on-light-mute);pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{min-height:44px;padding:0 17px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--on-light-line);
  font-size:var(--t-small);font-weight:500;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.chips button:hover{border-color:var(--khaki)}
.chips button[aria-pressed=true]{background:var(--ink);color:var(--paper);
  border-color:var(--ink)}
.count{margin:clamp(22px,2.6vw,32px) 0 12px;font-size:var(--t-micro);
  text-transform:uppercase;letter-spacing:.14em;color:var(--on-light-mute)}
.prices{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.prices article{display:flex;align-items:center;gap:16px;min-height:66px;
  padding:0 clamp(16px,2vw,22px);border-radius:14px;background:var(--white);
  border:1px solid var(--on-light-line)}
.prices div{flex:1;min-width:0}
.prices small{display:block;font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:.11em;color:var(--on-light-mute)}
.prices h3{margin-top:3px;font-size:var(--t-body);font-weight:500}
.prices strong{font-family:var(--serif);font-size:var(--t-h3);font-weight:600;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.empty{grid-column:1/-1;padding:38px 0;text-align:center;color:var(--on-light-mute)}
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.notes p{font-size:var(--t-small);line-height:1.65;color:var(--on-light-mute)}
.notes strong{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}

/* ============================================================== treatments === */
.story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,64px);align-items:start}
.story-num{font-family:var(--serif);font-size:var(--t-display);font-weight:600;
  color:var(--khaki-deep);letter-spacing:-.02em;margin-bottom:10px}
.panel--ink .story-num{color:var(--khaki)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.cards article{border-top:1px solid var(--on-light-line);padding-top:16px}
.cards h3{font-size:var(--t-body);font-weight:600;margin-bottom:8px}
.cards p{font-size:var(--t-small);line-height:1.65;color:var(--on-light-mute)}
.panel--ink .cards article{border-color:var(--on-dark-line)}
.panel--ink .cards p{color:var(--on-dark-mute)}
.price-line{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;
  margin-top:clamp(26px,3vw,36px);padding-top:22px;
  border-top:1px solid var(--on-light-line)}
.panel--ink .price-line{border-color:var(--on-dark-line)}
.price-line strong{font-family:var(--serif);font-size:var(--t-h3);font-weight:600;
  letter-spacing:-.02em;margin-right:auto}
.menu-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  margin-top:clamp(24px,3vw,34px)}
.menu-list a{display:flex;align-items:center;gap:16px;min-height:60px;
  padding:0 clamp(16px,2vw,22px);border-radius:14px;background:var(--white);
  border:1px solid var(--on-light-line);transition:border-color .2s ease}
.menu-list a:hover{border-color:var(--ink)}
.menu-list span{flex:1}
.menu-list strong{font-family:var(--serif);font-size:var(--t-h3);font-weight:600;
  letter-spacing:-.02em}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.tags+.small{margin:18px 0 0;font-size:var(--t-small);line-height:1.6;color:var(--on-light-mute)}
.tags span{padding:8px 15px;border-radius:999px;background:var(--on-light-soft);
  border:1px solid var(--on-light-line);font-size:var(--t-small)}

/* ================================================================= book === */
.booking{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:var(--gutter);align-items:start}
.guide ol{list-style:none;margin:22px 0 0;padding:0}
.guide li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--on-light-line)}
.guide li i{font-style:normal;font-size:var(--t-micro);font-weight:600;
  color:var(--on-light-mute);font-variant-numeric:tabular-nums;padding-top:3px}
.guide li b{display:block;font-weight:600;margin-bottom:3px}
.guide li p{font-size:var(--t-small);line-height:1.6;color:var(--on-light-mute)}
.cb-shell{background:var(--white);border:1px solid var(--on-light-line);
  border-radius:18px;overflow:hidden}
.cb-top{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  padding:14px clamp(16px,2vw,22px);border-bottom:1px solid var(--on-light-line);
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.12em;
  color:var(--on-light-mute)}
/* After a request is sent the form asks the page to scroll it back into view;
   the margin keeps the floating header from covering the confirmation. */
.cb-mount{padding:clamp(8px,1.4vw,16px);min-height:420px;position:relative;
  scroll-margin-top:calc(var(--gutter) * 2 + 72px)}
/* book.zuiden.co.za answers in about 1.3s and the iframe is a second trip to
   it, so there is a real wait no amount of markup here removes. This at least
   says the form is coming rather than leaving a blank panel. */
.cb-mount::before{content:"Loading the request form…";position:absolute;
  inset:0;display:grid;place-items:center;font-size:var(--t-small);
  color:var(--on-light-mute)}
.cb-mount iframe{position:relative}
.cb-fallback{padding:0 clamp(16px,2vw,22px) 18px;font-size:var(--t-small);
  color:var(--on-light-mute)}
.cb-fallback a{border-bottom:1px solid var(--on-light-line)}

/* ============================================================== privacy === */
.legal{max-width:66ch}
.legal section{padding:24px 0;border-top:1px solid var(--on-light-line)}
.legal h2{font-size:var(--t-lead);margin-bottom:10px}
.legal p{color:var(--on-light-mute);margin-bottom:10px}
.legal p:last-child{margin-bottom:0}
.legal a{border-bottom:1px solid var(--on-light-line)}

/* ============================================================== movement === */
.rise{opacity:0;transform:translateY(18px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.68,.34,1)}
.rise.is-in{opacity:1;transform:none}

/* =============================================================== responsive = *
 * The old build set 33 font-size floors at desktop sizes, so a phone was
 * served 48 and 64px headings. The scale's clamps handle that on their own;
 * what is left here is layout.                                              */
@media(max-width:1020px){
  .hero,.split,.picker,.visit,.story,.booking{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .steps,.cards,.notes{grid-template-columns:1fr}
  .site-nav{display:none}
  .menu-btn{display:inline-flex}
  .site-header{flex-wrap:wrap}
  #mobile-nav{display:none;width:100%;flex-direction:column;gap:2px;
    padding:10px 4px 4px;border-top:1px solid var(--on-light-line);margin-top:11px}
  #mobile-nav.is-open{display:flex}
  #mobile-nav a{padding:14px 12px;border-radius:12px;font-size:var(--t-body)}
  #mobile-nav a:hover{background:var(--on-light-soft)}
  #mobile-nav .btn{margin-top:6px}
  .site-header.is-open{border-radius:26px}
  .visit-mark{aspect-ratio:16/10}
}
@media(max-width:720px){
  /* Sancha, 15 September: the phone page "feels long, it takes long to reach
     the bottom". It was 8 577px — ten screens. Everything below trades
     desktop staging for reach: the same content, less of the screen each.  */
  :root{--pad-y:clamp(36px,9vw,48px)}
  .prices,.menu-list{grid-template-columns:1fr}
  /* Three facts stay a row — stacked they were a screen on their own. */
  .facts{grid-template-columns:repeat(3,1fr);gap:0 14px;margin-top:30px}
  .facts div{padding-right:12px}
  .facts b{font-size:var(--t-h3)}
  /* The first-visit card repeats the three steps on the booking page. */
  .hero-card{display:none}
  /* The gallery swipes sideways instead of stacking three portrait photos
     into two screens of scrolling. */
  .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:10px;margin-inline:calc(-1 * var(--pad-x));padding-inline:var(--pad-x);
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gallery::-webkit-scrollbar{display:none}
  .gallery figure{flex:0 0 66%;scroll-snap-align:start}
  /* The three laser steps as a list, not three cards. */
  .steps{gap:0;margin-top:22px}
  .steps li{background:none;border:0;border-radius:0;padding:14px 0;
    border-top:1px solid var(--on-dark-line)}
  .steps--light li{border-color:var(--on-light-line)}
  .steps h3{margin:4px 0 4px;font-size:var(--t-body)}
  .steps p{line-height:1.55}
  .realistic{margin-top:18px}
  .visit-mark{aspect-ratio:16/9}
  .foot-row{gap:22px 40px;margin-top:22px}
  .foot-row>p{display:none}
  .foot-fine{margin-top:22px}
  .promises{gap:10px 24px;justify-content:flex-start}
  .btn,.wa{width:100%}
  .actions{gap:10px}
  .actions .textlink{width:100%;justify-content:center;
    border:1px solid var(--on-light-line);border-radius:999px;min-height:50px}
  .panel--ink .actions .textlink,.hero .actions .textlink{border-color:var(--on-dark-line)}
  .book-band .btn{width:100%}
  .foot-links{gap:2px 24px}
  .price-line .btn{width:100%}
}
@media(max-width:480px){
  /* The header is flex-wrap so the open menu can take its own row. That also
     let the wordmark and the Menu button wrap apart when they were 5px wider
     than the pill — 313px of content in 355px minus 29px padding and an 18px
     gap. They are held to one row instead. */
  .site-header{gap:10px;padding-left:14px}
  #mobile-nav{flex-basis:100%}
  .wordmark{font-size:var(--t-small);letter-spacing:.08em;gap:10px}
  .wordmark img{width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.rise.is-in{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important}
}