/* SM Aesthetic Clinic, shared stylesheet for every page.
 * Palette is the real one from brand/README.md: navy #101F3C, gold #C6A15B,
 * sand #D8C7A8. Deliberately warmer and deeper than Asmo's #0B1E32 so the two
 * client brands do not read as the same company. */

:root{
  --porcelain:#FAF9F6; --paper:#FFFFFF;
  --navy:#1A2B49; --navy-deep:#0D1729; --navy-soft:#24395F;
  --ink:#1A2B49; --gold:#C5A059; --gold-lift:#D4B77A; --sand:#D8C7A8;
  --mut:rgba(22,32,58,.60); --mut-w:rgba(250,248,244,.64);
  --hair:rgba(22,32,58,.12); --hair-w:rgba(250,248,244,.16);
  --hair-gold:rgba(197,160,89,.38);
  --ok:#3F7D5A; --warn:#9A6B2F;
  --r:14px; --rs:10px;
  --shadow:0 1px 2px rgba(16,31,60,.05), 0 12px 34px -18px rgba(16,31,60,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Montserrat',system-ui,sans-serif;font-weight:450;color:var(--ink);
  background:var(--porcelain);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
.serif{font-family:'Playfair Display',Georgia,serif}
.container{max-width:1160px;margin:0 auto;padding:0 28px}
.narrow{max-width:760px}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:12px 20px;z-index:200;border-radius:0 0 var(--rs) 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

/* ---------- type ---------- */
h1,h2,h3,h4,h5{font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:1.08;
  letter-spacing:-.015em;color:var(--navy)}
h1{font-size:clamp(46px,7.4vw,90px)}
h2{font-size:clamp(31px,4.3vw,54px);line-height:1.12}
h3{font-size:20px;line-height:1.25}
em,.em{font-style:italic;color:var(--gold)}
.eyebrow{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px}
.eyebrow::after{content:'';flex:1;height:1px;background:var(--hair-gold);max-width:70px}
.eyebrow.c{justify-content:center}
.eyebrow.c::before{content:'';flex:1;height:1px;background:var(--hair-gold);max-width:70px}
.lede{font-size:17.5px;color:var(--mut);max-width:56ch}
.sec-head{margin-bottom:52px}
.sec-head h2{margin:18px 0 18px}
/* The rates page is a single section, so its heading is the h1 and is sized
   like the section headings around it rather than like a hero. */
h1.as-h2{font-size:clamp(31px,4.3vw,54px);line-height:1.12}
.sec-head h1.as-h2{margin:18px 0 18px}
section{padding:104px 0}
.band-white{background:var(--paper)}
.band-navy{background:var(--navy);color:var(--porcelain)}
.band-navy h2,.band-navy h3{color:var(--porcelain)}
.band-navy .lede{color:var(--mut-w)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Montserrat',sans-serif;font-size:14px;font-weight:550;letter-spacing:.01em;
  padding:15px 30px;border-radius:100px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#B8914C}
.btn-navy{background:var(--navy);color:var(--porcelain)}
.btn-navy:hover{background:var(--navy-soft)}
.btn-ghost{border-color:var(--hair);color:var(--navy);background:transparent}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-ghost-w{border-color:var(--hair-w);color:var(--porcelain);background:transparent}
.btn-ghost-w:hover{border-color:var(--sand);color:var(--sand)}
.btn-wide{width:100%}

/* ---------- monogram ---------- */
/* The SM mark is real vector and carries currentColor, so it takes the colour of
   whatever it sits in. Used at four sizes: nav, section ornament, oversized
   watermark, footer lockup. */
.mono{display:block}
.mono-nav{width:34px;height:34px;color:var(--navy);flex:none}
.band-navy .mono-nav{color:var(--sand)}
.mono-orn{width:26px;height:26px;color:var(--gold);opacity:.9;margin:0 auto 20px}
.mono-foot{width:56px;height:56px;color:var(--sand)}
/* Oversized, cropped, low-contrast. Reads as letterpress rather than clip-art. */
.mono-wm{position:absolute;pointer-events:none;user-select:none;color:var(--navy);opacity:.045;
  width:min(66vw,760px);height:auto;right:-14%;top:50%;transform:translateY(-50%);z-index:0}
.band-navy .mono-wm{color:var(--sand);opacity:.06}
.mono-wm-l{right:auto;left:-16%}
.has-wm{position:relative;overflow:hidden}
.has-wm>.container{position:relative;z-index:1}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;
  transition:background .3s ease,padding .3s ease,border-color .3s ease,backdrop-filter .3s;
  border-bottom:1px solid transparent}
/* Over a dark header or footage the light links carry their own shade. They
   cannot count on the picture behind being dark: a bright frame of the homepage
   video left them unreadable. */
.nav.nav-light:not(.solid){background:linear-gradient(180deg,rgba(13,23,41,.8) 0%,rgba(13,23,41,.58) 65%,rgba(13,23,41,0) 100%)}
.nav.nav-light:not(.solid) .brand-nm,.nav.nav-light:not(.solid) .nav-links a{text-shadow:0 1px 10px rgba(13,23,41,.55)}
.nav.solid{background:rgba(250,248,244,.92);backdrop-filter:blur(14px);
  border-bottom-color:var(--hair);padding:11px 0}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand-tx{display:flex;flex-direction:column;line-height:1.12}
.brand-nm{font-family:'Playfair Display',serif;font-size:16.5px;color:var(--navy);letter-spacing:-.01em}
.brand-sub{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);font-weight:550}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;opacity:.82;
  transition:opacity .18s,color .18s}
.nav-links a:hover{opacity:1;color:var(--gold)}
.nav-cta{display:flex;align-items:center;gap:14px}
.lang{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase}
.lang a,.lang .on{text-decoration:none;color:var(--mut);padding:4px 7px;border-radius:5px}
.lang a:hover{color:var(--gold)}
.lang .on{color:var(--navy);background:rgba(198,161,91,.14)}
.nav-burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--navy)}

/* ---------- homepage reel ---------- */
/* The first screen is his name over the video and nothing else, at his request
   on 17 September. The page scrolls on into its sections below. */
.reel{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  background:var(--navy-deep);color:var(--porcelain)}
.reel-media{position:absolute;inset:0;z-index:0}
.reel-media img,.reel-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-video{z-index:1}
/* Two shallow scrims, one under the name and one under the legal line. The
   middle of the frame is left clear on purpose: the previous hero laid a 42 to
   93 percent overlay across all of it, which is why a moving video read as a
   still photograph. */
.reel-media::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(13,23,41,.8) 0%,rgba(13,23,41,.36) 25%,rgba(13,23,41,0) 45%),
    linear-gradient(0deg,rgba(13,23,41,.7) 0%,rgba(13,23,41,0) 20%)}
.reel .container{position:relative;z-index:3;width:100%}
/* No footage yet: his name on the brand ground, with the monogram behind it.
   Same frame, no video, no pause control. See data/reel.mjs. */
.reel-bare{background:var(--navy-deep)}
.reel-bare .mono-wm{color:var(--sand);opacity:.07;width:62vw;right:-8%;top:12%}
.reel .reel-top{padding-top:clamp(92px,12vh,132px)}

/* The name set as a masthead across the top of the frame, the way a fashion
   title carries its nameplate. Sized to span the container, whose line is 1104px
   wide inside its padding: in Playfair the name measures about 7.97 times its
   font size, so 136px leaves roughly 20px spare.
   Each half refuses to break, and the space between them is the one place the
   line may wrap, which is what happens if Playfair never loads and a wider
   fallback takes its place. On a phone it is two lines by design. */
.nameplate{margin:0;color:var(--porcelain);font-size:min(136px,calc((100vw - 56px) / 8.1));
  line-height:.98;letter-spacing:-.03em}
.nameplate em{color:var(--sand)}
.nameplate{text-shadow:0 2px 28px rgba(13,23,41,.38)}
.np-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;white-space:nowrap}
.np-last{padding-right:.12em;margin-right:-.12em}
.np-w>*{display:inline-block;animation:np-rise 1.15s cubic-bezier(.19,.9,.22,1) both}
.np-last>*{animation-delay:.14s}
.nameplate::after{content:'';display:block;height:1px;margin-top:clamp(12px,1.5vw,22px);
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 40%,rgba(197,160,89,0) 100%);
  transform-origin:left;animation:np-rule 1.5s .5s cubic-bezier(.19,.9,.22,1) both}
@keyframes np-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes np-rule{from{transform:scaleX(0)}to{transform:none}}

/* The pause control and, while the footage is a stand-in, the line that says so.
   Right padding keeps both clear of the WhatsApp button. */
.reel-foot{display:flex;align-items:center;gap:14px;padding-bottom:26px;padding-right:92px}
.reel-standin{font-size:10.5px;letter-spacing:.06em;line-height:1.5;color:var(--sand)}

/* A drawn line at the foot of the frame. A first screen that is exactly one
   screen tall gives no sign that the page goes on. */
.reel-cue{position:absolute;left:50%;bottom:20px;z-index:3;transform:translateX(-50%);
  display:block;width:28px;height:48px}
.reel-cue span{display:block;width:1px;height:100%;margin:0 auto;
  background:linear-gradient(var(--sand),rgba(216,199,168,0));
  transform-origin:top;animation:cue 2.6s cubic-bezier(.19,.9,.22,1) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.reel-toggle{flex:none;width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:var(--porcelain);
  border:1px solid rgba(250,249,246,.36);background:rgba(13,23,41,.34);backdrop-filter:blur(6px);
  transition:border-color .2s,color .2s}
.reel-toggle[hidden]{display:none}
.reel-toggle:hover{border-color:var(--sand);color:var(--sand)}
.reel-toggle svg{width:14px;height:14px;fill:currentColor}
.reel-toggle .i-play,.reel-toggle.is-paused .i-pause{display:none}
.reel-toggle.is-paused .i-play{display:block}

/* ---------- doctor band ---------- */
.dr-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center}
.dr-copy p{color:var(--mut);margin-bottom:16px;max-width:52ch}
.dr-facts{margin-top:32px;border-top:1px solid var(--hair);padding-top:22px}
.dr-facts h4{font-family:'Montserrat',sans-serif;font-size:10.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:16px}
.fact{display:flex;justify-content:space-between;gap:20px;padding:9px 0;
  border-bottom:1px solid var(--hair);font-size:13.5px}
.fact:last-child{border-bottom:0}
.fact b{color:var(--mut);font-weight:500}
.fact span{color:var(--navy);font-weight:550;text-align:right}

/* ---------- placeholders ---------- */
/* Every genuine unknown renders through this, so a missing asset always looks
   deliberate and labelled rather than broken or, worse, quietly invented. */
.ph{border:1px dashed var(--hair-gold);border-radius:var(--r);background:rgba(198,161,91,.045);
  padding:26px;display:flex;flex-direction:column;justify-content:center;gap:9px}
.ph-tag{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:9.5px;font-weight:650;letter-spacing:.2em;text-transform:uppercase;
  color:var(--warn);background:rgba(154,107,47,.1);padding:5px 10px;border-radius:100px}
.ph b{font-family:'Playfair Display',serif;font-weight:400;font-size:18px;color:var(--navy)}
.ph p{font-size:13.5px;color:var(--mut);max-width:46ch}
.ph-photo{aspect-ratio:4/5;align-items:center;text-align:center}
/* His portrait, in the frame the placeholder used to hold. */
.dr-photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);display:block}
.ph-photo .ph-tag{align-self:center}
/* min-width:0 because a fixed ratio turns tall content into a minimum width: on
   a phone this card needed 239px of height and widened itself to 546px to keep
   16:7, which zoomed the whole page out. Phones drop the ratio below. */
.ph-wide{aspect-ratio:16/7;align-items:center;text-align:center;min-width:0}
.ph-wide .ph-tag{align-self:center}

/* ---------- where I practise ---------- */
.where-grid{display:grid;grid-template-columns:1fr .8fr;gap:60px;align-items:center}
.drive{border-top:1px solid var(--hair-w)}
.drive-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--hair-w);font-size:14.5px}
.drive-row b{font-weight:500;color:var(--porcelain)}
.drive-row span{color:var(--sand);font-size:13px;font-variant-numeric:tabular-nums}
.drive-row.here b{color:var(--sand)}
.drive-row.here span{font-style:italic}

/* ---------- method ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hair)}
.step{padding:30px 26px 30px 0;border-right:1px solid var(--hair)}
.step:last-child{border-right:0;padding-right:0}
.step-n{font-family:'Playfair Display',serif;font-size:13px;color:var(--gold);margin-bottom:14px;
  font-variant-numeric:tabular-nums}
.step h3{margin-bottom:10px;font-size:19px}
.step p{font-size:14px;color:var(--mut)}

/* ---------- treatments ---------- */
.tr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tr{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
a.tr{text-decoration:none}
a.tr:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--hair-gold)}
.tr-top{padding:28px 26px 0}
.tr-body{padding:18px 26px 26px;flex:1;display:flex;flex-direction:column}
.tr h3{margin-bottom:9px}
.tr p{font-size:14px;color:var(--mut);flex:1}
.tr-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--hair)}
.price{font-family:'Playfair Display',serif;font-size:21px;color:var(--navy)}
.price small{font-family:'Montserrat',sans-serif;font-size:11px;color:var(--mut);
  letter-spacing:.12em;text-transform:uppercase;margin-right:5px;font-weight:550}
/* The unit after the figure, for a treatment priced per session. */
.price small.pu,.tp-fact small.pu{margin:0 0 0 6px;text-transform:none;letter-spacing:.02em}
.tp-fact small.pu{font-family:'Montserrat',sans-serif;font-size:12px;color:var(--mut-w);font-weight:500}
.tr-more{font-size:13px;font-weight:550;color:var(--gold);display:inline-flex;align-items:center;gap:6px}
a.tr:hover .tr-more{gap:10px}
/* Prescription-medicine card: no price, no book button. Legally required. */
.tr-rx .tr-foot{border-top-color:var(--hair-gold)}
.rx-tag{display:inline-flex;align-items:center;gap:7px;font-size:9.5px;font-weight:650;
  letter-spacing:.16em;text-transform:uppercase;color:var(--warn);
  background:rgba(154,107,47,.1);padding:6px 11px;border-radius:100px}
.rx-note{font-size:12.5px;color:var(--mut);margin-top:12px;font-style:italic}
/* The "adding a fourth is trivial" slot, visible to the client as a promise. */
.tr-next{border:1px dashed var(--hair-gold);background:rgba(198,161,91,.04);
  border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;
  justify-content:center;gap:10px;min-height:100%}

/* ---------- prices ---------- */
.price-list{border-top:1px solid var(--hair)}
.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:22px;
  padding:19px 0;border-bottom:1px solid var(--hair)}
.price-row b{font-family:'Playfair Display',serif;font-weight:400;font-size:20px;color:var(--navy)}
.price-row .amt{font-family:'Playfair Display',serif;font-size:22px;color:var(--gold);white-space:nowrap}
.price-row .amt small{font-family:'Montserrat',sans-serif;font-size:11px;color:var(--mut);
  text-transform:uppercase;letter-spacing:.12em;margin-right:6px}
.price-row .rx-tag{align-self:center}

/* ================= BOOKING ================= */
.bk-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.bk-panel{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);
  padding:30px;box-shadow:var(--shadow)}
.bk-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--mut);margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.bk-updated{display:inline-flex;align-items:center;gap:7px}
.dot-ok{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}

.mon{margin-bottom:26px}
.mon:last-child{margin-bottom:0}
.mon-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.mon-h h3{font-size:22px}
.mon-count{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{font-size:10px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);text-align:center;padding-bottom:7px}
.cal-blank{aspect-ratio:1}
.day{aspect-ratio:1;border:1px solid transparent;border-radius:9px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:13px;color:var(--mut);background:transparent;position:relative}
.day.off{opacity:.32}
.day.clinic{background:rgba(198,161,91,.09);border-color:var(--hair-gold);color:var(--navy);
  font-weight:550;cursor:pointer;transition:background .16s,transform .16s}
.day.clinic:hover{background:rgba(198,161,91,.2);transform:translateY(-1px)}
.day.clinic.sel{background:var(--navy);color:var(--porcelain);border-color:var(--navy)}
.day.full{background:transparent;border-color:var(--hair);color:var(--mut);cursor:default}
.day.full::after{content:'';position:absolute;left:22%;right:22%;height:1px;background:var(--hair);
  transform:rotate(-16deg)}
.day .n{font-variant-numeric:tabular-nums;line-height:1}
.day .pip{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.day.sel .pip{background:var(--sand)}

.slots{margin-top:18px;padding-top:18px;border-top:1px solid var(--hair)}
.slots-h{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);margin-bottom:12px}
.slot-row{display:flex;flex-wrap:wrap;gap:8px}
.slot{font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:500;font-variant-numeric:tabular-nums;
  padding:10px 16px;border-radius:100px;border:1px solid var(--hair);background:var(--paper);
  color:var(--navy);cursor:pointer;transition:all .16s}
.slot:hover{border-color:var(--gold);color:var(--gold)}
.slot.sel{background:var(--navy);color:var(--porcelain);border-color:var(--navy)}

/* Sample-data banner. Removed automatically when `sample` leaves the data file. */
.bk-sample{display:flex;gap:12px;align-items:flex-start;background:rgba(154,107,47,.08);
  border:1px solid rgba(154,107,47,.25);border-radius:var(--rs);padding:13px 15px;margin-bottom:20px}
.bk-sample b{font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--warn)}
.bk-sample p{font-size:12.5px;color:var(--mut);margin-top:3px}

/* The unpublished-month state. This is the default for most of every month and
   on launch day, so it is designed as a real destination, not an error notice. */
.mon-closed{border:1px solid var(--hair);border-radius:var(--r);padding:26px;
  background:linear-gradient(160deg,rgba(16,31,60,.03),rgba(198,161,91,.05))}
.mon-closed h3{font-size:21px;margin-bottom:9px}
.mon-closed p{font-size:14px;color:var(--mut);max-width:44ch}
.mon-closed .btn{margin-top:18px}
.mon-closed-alt{display:block;margin-top:13px;font-size:13px;color:var(--gold);font-weight:500}
.lock-ic{width:30px;height:30px;border-radius:50%;background:rgba(198,161,91,.14);
  display:flex;align-items:center;justify-content:center;color:var(--gold);margin-bottom:14px}

.bk-hold{display:flex;gap:11px;align-items:flex-start;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--hair)}
.bk-hold b{font-size:12.5px;color:var(--navy);font-weight:600}
.bk-hold p{font-size:12.5px;color:var(--mut);margin-top:2px}

/* ---------- form ---------- */
.form{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);
  padding:30px;box-shadow:var(--shadow)}
.form h3{margin-bottom:6px}
.form .sub{font-size:13.5px;color:var(--mut);margin-bottom:22px}
.form label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);margin:16px 0 7px}
.form input,.form select,.form textarea{width:100%;font-family:'Montserrat',sans-serif;font-size:14.5px;
  color:var(--ink);background:var(--porcelain);border:1px solid var(--hair);border-radius:var(--rs);
  padding:12px 14px;transition:border-color .18s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold)}
.form textarea{resize:vertical;min-height:84px}
.form .btn{margin-top:22px}
.form-note{font-size:11.5px;color:var(--mut);margin-top:13px;text-align:center}

/* Consent. GDPR Article 9 wants this deliberate, so it is a normal-weight
   sentence the eye reads rather than the small uppercase treatment the field
   labels get. */
.form .consent{display:flex;align-items:flex-start;gap:10px;margin-top:20px;
  font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--mut);line-height:1.55;cursor:pointer}
.form .consent input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--gold)}

/* Off-screen rather than display:none. Some form fillers skip hidden inputs,
   and a honeypot a bot ignores catches nothing. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* The one place the form reports what actually happened. Never pre-filled with
   a success message: it is written only from a real answer. */
.form-state{margin-top:18px;padding:15px 17px;border-radius:var(--r);font-size:13px;line-height:1.55}
.form-state b{display:block;font-weight:600;font-size:13.5px}
.form-state p{margin-top:5px;color:inherit;opacity:.85}
.form-state .btn{margin-top:14px}
.form-state.good{background:rgba(63,125,90,.09);border:1px solid rgba(63,125,90,.30);color:var(--ok)}
.form-state.bad{background:rgba(180,64,48,.07);border:1px solid rgba(180,64,48,.26);color:#8c3225}
.form-reply{display:flex;align-items:center;gap:9px;justify-content:center;font-size:12.5px;
  color:var(--ok);margin-top:11px;font-weight:500}
/* Carries the chosen slot into the request so the patient never retypes it. */
.chosen{display:none;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(198,161,91,.1);border:1px solid var(--hair-gold);border-radius:var(--rs);
  padding:12px 15px;margin-bottom:4px}
.chosen.on{display:flex}
.chosen b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--warn);display:block}
.chosen .v{font-family:'Playfair Display',serif;font-size:16px;color:var(--navy);margin-top:2px}
.chosen button{background:none;border:0;font-size:12px;color:var(--gold);cursor:pointer;
  text-decoration:underline;font-family:inherit}

/* ---------- contact lines ---------- */
.clines{display:flex;flex-direction:column;gap:2px;margin-top:30px}
.cline{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--hair)}
.cline:last-child{border-bottom:0}
.cic{width:36px;height:36px;border-radius:50%;background:rgba(198,161,91,.12);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--gold)}
.cic svg{width:17px;height:17px}
.cline div b{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut)}
.cline div a,.cline div span{font-size:15px;color:var(--navy);text-decoration:none;font-weight:500}
.cline div a:hover{color:var(--gold)}

/* ---------- proof ---------- */
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}

/* ---------- treatment page ---------- */
.tp-hero{padding:150px 0 62px;background:var(--navy);color:var(--porcelain);position:relative;overflow:hidden}
.tp-hero h1{color:var(--porcelain);font-size:clamp(36px,5.4vw,64px);margin:20px 0 22px;max-width:18ch}
.tp-hero .lede{color:var(--mut-w);font-size:17px}
.crumb{font-size:12px;color:var(--mut-w);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--sand);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.tp-facts{display:flex;gap:0;flex-wrap:wrap;margin-top:34px;border-top:1px solid var(--hair-w);
  padding-top:22px}
.tp-fact{padding-right:44px;margin-right:44px;border-right:1px solid var(--hair-w)}
.tp-fact:last-child{border-right:0;margin-right:0;padding-right:0}
.tp-fact b{display:block;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sand);margin-bottom:7px}
.tp-fact span{font-family:'Playfair Display',serif;font-size:23px;color:var(--porcelain)}
.tp-body{max-width:720px}
.tp-body h2{font-size:clamp(25px,3vw,34px);margin:46px 0 15px}
.tp-body h2:first-child{margin-top:0}
.tp-body p{color:var(--mut);margin-bottom:14px;font-size:16px}
.legal-date{font-size:14px;color:var(--mut);margin-bottom:26px}
.tp-body .legal-date + .legal-date{margin-top:-18px}
.faq{border-top:1px solid var(--hair);margin-top:12px}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{padding:20px 0;cursor:pointer;font-family:'Playfair Display',serif;font-size:19px;
  color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;color:var(--gold);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 22px;color:var(--mut);max-width:64ch;font-size:15.5px}
.tp-cta{background:var(--paper);border:1px solid var(--hair-gold);border-radius:var(--r);
  padding:34px;text-align:center;margin-top:56px}
.tp-cta h3{font-size:25px;margin-bottom:10px}
.tp-cta p{font-size:14.5px;color:var(--mut);max-width:48ch;margin:0 auto 22px}
/* Prescription pages get an information block instead of a booking CTA. */
.tp-rx{background:rgba(154,107,47,.06);border-color:rgba(154,107,47,.3)}

/* ---------- footer ---------- */
footer{background:var(--navy);color:var(--mut-w);padding:74px 0 34px;position:relative;overflow:hidden}
.f-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;margin-bottom:48px}
.f-brand .brand-nm{color:var(--porcelain);font-size:19px}
.f-brand p{font-size:13.5px;color:var(--mut-w);margin-top:14px;max-width:32ch}
footer h5{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:650;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sand);margin-bottom:16px}
.flink{display:block;font-size:13.5px;color:var(--mut-w);text-decoration:none;padding:5px 0;
  transition:color .18s}
.flink:hover{color:var(--sand)}
.f-legal{border-top:1px solid var(--hair-w);padding-top:26px;font-size:11.5px;color:var(--mut-w);
  display:flex;flex-direction:column;gap:8px}
.f-legal .reg{color:rgba(250,248,244,.5)}
.f-demo{color:var(--warn);background:rgba(154,107,47,.14);padding:4px 10px;border-radius:100px;
  align-self:flex-start;font-size:11px}

/* ---------- WhatsApp ---------- */
.wa{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;z-index:90;
  box-shadow:0 8px 26px -8px rgba(37,211,102,.7);transition:transform .2s}
.wa:hover{transform:scale(1.06)}
.wa svg{width:26px;height:26px}

/* ---------- reveal ---------- */
/* Content is visible by default. The hidden starting state is applied only when
   JavaScript is confirmed running (html.js, set by an inline script in <head>),
   so a failed or blocked site.js leaves the page readable instead of blank. */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover,a.tr:hover{transform:none}
  .reel-video{display:none}
  .np-w>*,.nameplate::after,.reel-cue span{animation:none}
}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .dr-grid,.where-grid,.bk-wrap{grid-template-columns:1fr;gap:40px}
  .steps{grid-template-columns:1fr 1fr}
  .step{border-right:0;border-bottom:1px solid var(--hair);padding-right:26px}
  .tr-grid{grid-template-columns:1fr 1fr}
  .f-cols{grid-template-columns:1fr 1fr;gap:34px}
  .mono-wm{width:90vw;right:-30%}
}
@media(max-width:720px){
  section{padding:74px 0}
  .container{padding:0 20px}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--porcelain);border-bottom:1px solid var(--hair);padding:20px 24px;gap:16px;
    align-items:flex-start}
  .nav-burger{display:block}
  /* A phone bar holds the mark, the name, the language and the menu. The
     booking button lives in the menu there, where Prenota already is; left in
     the bar it wrapped to three lines and pushed the bar to 138px. */
  .nav-cta .btn{display:none}
  .brand-nm,.brand-sub{white-space:nowrap}
  /* Over a dark header the links are light, so the open panel needs dark ones. */
  .nav.nav-light:not(.solid) .nav-links.open a{color:var(--ink)}
  .nameplate{font-size:min(86px,calc((100vw - 40px) / 4.8));line-height:1}
  .np-w{display:block}
  .reel-foot{padding-right:80px;padding-bottom:22px;align-items:flex-end}
  .reel-standin{font-size:10px}
  .reel-cue{display:none}
  .tr-grid,.proof-grid{grid-template-columns:1fr}
  .ph-wide{aspect-ratio:auto;min-height:200px}
  .steps{grid-template-columns:1fr}
  .f-cols{grid-template-columns:1fr}
  .tp-fact{padding-right:26px;margin-right:26px}
  .bk-panel,.form{padding:22px}
  .cal{gap:3px}
  .day{font-size:12px}
}
@media print{
  .nav,.wa,.reel-video,.reel-toggle{display:none}
}

/* Only pages that actually put a dark hero behind the nav get the light
   treatment. The rates page starts on porcelain, and without this guard its
   brand name and links were porcelain on porcelain, which is to say invisible. */
.nav.nav-light:not(.solid) .brand-nm{color:var(--porcelain)}
.nav.nav-light:not(.solid) .brand-sub{color:var(--mut-w)}
.nav.nav-light:not(.solid) .mono-nav{color:var(--sand)}
.nav.nav-light:not(.solid) .nav-links a{color:var(--porcelain)}
.nav.nav-light:not(.solid) .lang a,.nav.nav-light:not(.solid) .lang .on{color:var(--mut-w)}
.nav.nav-light:not(.solid) .lang .on{color:var(--porcelain);background:rgba(250,248,244,.14)}
.nav.nav-light:not(.solid) .nav-burger{color:var(--porcelain)}

/* ---------- treatments and rates explorer ---------- */
/* Dr. Moretti's "point at the area" price list. The figure is a filter, the
   whole tariff is in the markup, so with no JavaScript this is three headed
   lists and still complete. */
.t-wrap{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start}
.t-figure{position:sticky;top:96px}
.fig{width:100%;max-width:100%;margin:0 auto 26px;height:auto;display:block}
.fig-hit .hit{fill:transparent;cursor:pointer;transition:fill .2s}
.fig-hit .hit:hover,.fig-hit .hit.on{fill:rgba(197,160,89,.11)}
.fig-zones{display:flex;flex-direction:column;gap:2px}
.fig-zone{padding:11px 13px;border-radius:var(--rs);cursor:pointer;border:1px solid transparent;transition:all .18s}
.fig-zone:hover{background:rgba(197,160,89,.07)}
.fig-zone.on{background:rgba(197,160,89,.12);border-color:var(--hair-gold)}
.fig-zone b{display:block;font-family:'Playfair Display',serif;font-weight:400;font-size:17px;color:var(--navy)}
.fig-zone span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.fig-zone em{display:block;font-style:normal;font-size:12.5px;color:var(--mut);margin-top:3px;line-height:1.45}

.zone-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid var(--hair)}
.zone-btn{font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:500;padding:9px 17px;
  border-radius:100px;border:1px solid var(--hair);background:transparent;color:var(--navy);cursor:pointer;transition:all .18s}
.zone-btn:hover{border-color:var(--gold);color:var(--gold)}
.zone-btn.on{background:var(--navy);color:var(--porcelain);border-color:var(--navy)}

.t-group{margin-bottom:38px}
.t-group[hidden]{display:none}
.t-head h3{font-size:23px;margin-bottom:7px}
.t-head p{font-size:13.5px;color:var(--mut);max-width:56ch}
.t-rx-why{margin-top:10px;font-size:12.5px;color:var(--warn);background:rgba(154,107,47,.07);
  border-left:2px solid rgba(154,107,47,.4);padding:11px 14px;border-radius:0 var(--rs) var(--rs) 0;max-width:60ch}
.t-rx-why a{color:var(--gold);font-weight:600;text-decoration:none;white-space:nowrap}
.t-rx-why a:hover{text-decoration:underline}
.t-rows{margin-top:16px;border-top:1px solid var(--hair)}
.t-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:13px 0;border-bottom:1px solid var(--hair)}
.t-name{font-size:14.5px;color:var(--navy);font-weight:500}
.t-note{display:block;font-size:12.5px;color:var(--mut);font-weight:400;margin-top:2px;font-style:italic}
.t-amt{text-align:right;white-space:nowrap;flex:none}
.t-price{font-family:'Playfair Display',serif;font-size:19px;color:var(--gold)}
.t-price small{font-family:'Montserrat',sans-serif;font-size:10.5px;color:var(--mut);
  letter-spacing:.12em;text-transform:uppercase;margin-right:5px;font-weight:600}
.t-price i{font-style:normal;color:var(--mut);margin:0 1px}
.t-unit{display:block;font-size:11px;color:var(--mut);margin-top:1px}
.t-var{font-size:12.5px;color:var(--mut);font-style:italic}
.t-row.t-rx .t-name{color:var(--mut)}
.t-foot{margin-top:30px;padding-top:20px;border-top:1px solid var(--hair)}
.t-foot p{font-size:12.5px;color:var(--mut);margin-bottom:8px;max-width:70ch}

@media(max-width:900px){
  .t-wrap{grid-template-columns:1fr;gap:32px}
  .t-figure{position:static;display:grid;grid-template-columns:130px 1fr;gap:20px;align-items:center}
  .fig{margin:0}
}
@media(max-width:560px){
  .t-figure{grid-template-columns:1fr}
  .fig{max-width:170px}
  .t-row{flex-direction:column;gap:3px}
  .t-amt{text-align:left}
}

/* ---------- homepage rates teaser ---------- */
/* The homepage carries three zones and a link now, not the whole tariff.
   Dr. Moretti asked for less writing on the homepage on 2 September. */
.tz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tz-card{display:block;text-decoration:none;padding:28px 26px;border:1px solid var(--hair);
  border-radius:var(--r);background:var(--porcelain);transition:all .2s}
.tz-card:hover{border-color:var(--hair-gold);transform:translateY(-3px);box-shadow:var(--shadow)}
.tz-card b{display:block;font-family:'Playfair Display',serif;font-weight:400;font-size:26px;color:var(--navy)}
.tz-card span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:7px 0 10px}
.tz-card em{font-style:normal;font-size:14px;color:var(--mut);line-height:1.55}

/* ---------- dedicated rates page ---------- */
.tp-rates{padding-top:150px}
.rates-stage{display:grid;grid-template-columns:340px 1fr;gap:60px;align-items:start}
.rates-fig{position:sticky;top:100px}
.fig-hint{font-size:12px;color:var(--mut);text-align:center;margin-top:14px;letter-spacing:.02em}
.tap-only{display:none}
@media(hover:none){.hover-only{display:none}.tap-only{display:inline}}
.fig-tabs{display:flex;gap:7px;justify-content:center;margin-top:16px}
.fig-tab{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:500;padding:8px 16px;
  border-radius:100px;border:1px solid var(--hair);background:transparent;color:var(--navy);cursor:pointer;transition:all .18s}
.fig-tab:hover{border-color:var(--gold);color:var(--gold)}
.fig-tab.on{background:var(--navy);color:var(--porcelain);border-color:var(--navy)}

/* The windows. With JavaScript off every one is open, so the page is a complete
   price list rather than an empty stage. `js` is set by the inline head script. */
.rates-windows{display:flex;flex-direction:column;gap:26px}
.tw{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);padding:30px;
  box-shadow:var(--shadow);scroll-margin-top:110px}
.js .tw{display:none}
.js .tw.on{display:block;animation:twIn .28s cubic-bezier(.2,.7,.3,1)}
@keyframes twIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tw-head{padding-bottom:18px;margin-bottom:8px;border-bottom:1px solid var(--hair)}
.tw-head h3{font-size:30px;display:inline-block;margin-right:12px}
.tw-head span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tw-head p{font-size:14px;color:var(--mut);margin-top:7px}
.tw-group{margin-top:26px}
.tw-group h4{font-family:'Playfair Display',serif;font-weight:400;font-size:19px;color:var(--navy);margin-bottom:4px}
.tw-rx{font-size:12.5px;color:var(--warn);background:rgba(154,107,47,.07);
  border-left:2px solid rgba(154,107,47,.4);padding:10px 13px;border-radius:0 var(--rs) var(--rs) 0;margin:8px 0}

@media(max-width:920px){
  .rates-stage{grid-template-columns:1fr;gap:30px}
  .rates-fig{position:static;display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center}
  .fig-hint{text-align:left;margin-top:0}
  .fig-tabs{justify-content:flex-start;flex-wrap:wrap}
  .tz-grid{grid-template-columns:1fr}
  .tp-rates{padding-top:120px}
}
@media(max-width:560px){
  .rates-fig{grid-template-columns:1fr}
  .tw{padding:22px}
  .tw-head h3{font-size:25px}
}

/* First consultation, above the zones. It applies to every treatment and it is
   the first thing a new patient actually buys, so it does not belong inside a
   zone window. */
.consult{display:flex;align-items:center;justify-content:space-between;gap:26px;
  background:var(--navy);color:var(--porcelain);border-radius:var(--r);
  padding:24px 30px;margin-bottom:34px}
.consult b{font-family:'Playfair Display',serif;font-weight:400;font-size:24px;color:var(--porcelain)}
.consult p{font-size:13.5px;color:var(--mut-w);margin-top:4px;max-width:52ch}
.consult-price{font-family:'Playfair Display',serif;font-size:34px;color:var(--sand);flex:none}
@media(max-width:560px){.consult{flex-direction:column;align-items:flex-start;gap:12px;padding:22px}}