/*
Theme Name: Magic FemTouch
Theme URI: https://magicfemtouch.com/
Author: Pinnacle Technologies Group
Description: Config-driven classic theme for Magic FemTouch MedSpa (Oak Lawn, IL). Round-7 design ("Light on skin"): night + blush surfaces, Butler + Karla, photo tiles, no scroll-jacking. No page builder, no jQuery. Pages render from inc/page-data configs; SEO, JSON-LD, lead capture and attribution are built in.
Version: 0.3.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietary
Text Domain: magicfemtouch
*/
/* GENERATED by build_css.py (rollout 10-02): round7/site/assets/css/site.css (round 7.5, commit 1a1a639) ported to the
   theme, then the theme layer (inc/r7.php components the mockup does not have). Edit the sources, not this file.
   Ads landing pages use assets/css/lp.css (the previous design system, unchanged). */
@font-face { font-family: "MFT Display Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"); size-adjust: 100.84%; ascent-override: 72.88%; descent-override: 26.29%; line-gap-override: 0%; }
@font-face { font-family: "MFT Body Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 103.91%; ascent-override: 88.25%; descent-override: 24.25%; line-gap-override: 0%; }
/* Magic FemTouch MedSpa, round 6 "Light on skin" (round 5 + ambient blush sections, frosted header bar, tighter
   rhythm, bigger mobile type + images, Arabic webfont on ar/ pages). Tokens from DIRECTION.md. 8-pt spacing, one
   start edge for every title, logical properties (RTL-safe). Butler 300/400 display, Karla 400/500/600 body;
   Noto Naskh Arabic (variable 400-700, assets/css/ar.css) on Arabic pages. */


:root {
  --night: #12080e; --plum: #22101b; --plum-2: #3a1229;
  --magenta: #e6007e; --magenta-deep: #b5085f; --magenta-hi: #ff2e9a;
  --rose: #ff8ac7; --blush: #f6c9df;
  --on-night: #f8eef4; --on-night-2: #d2bfca;
  /* round 6: no stark white. Light sections are ambient blush with a pink radial glow + grain; cards are frosted, not #fff. */
  --blush-1: #f3e4ea; --blush-2: #ead2dc;
  --porcelain: var(--blush-1); --ivory: var(--blush-2);
  --card: rgba(255, 247, 250, .72); --card-line: rgba(230, 0, 126, .14);
  --ink: #1d1119; --text: #352630; --muted: #54404c;          /* muted darkened from #6f5d68 for AA on blush */
  --magenta-light: #9c0652;                                   /* eyebrows / small accents on blush (AA at 15 px) */
  --line: rgba(230, 0, 126, .18);            /* thin pink line on blush */
  --line-night: rgba(255, 138, 199, .18);    /* thin pink line on dark */
  --grad: radial-gradient(120% 80% at 80% 10%, #5a1040 0%, #2a0f20 45%, #12080e 100%);
  --grad-rose: radial-gradient(120% 80% at 80% 10%, #8a1a5e 0%, #4e1236 48%, #2a0f20 100%);   /* the dark-pink sections */
  --glow-light: radial-gradient(70% 60% at 100% 0%, rgba(255, 138, 199, .40) 0%, rgba(255, 138, 199, 0) 60%),
                radial-gradient(60% 50% at 0% 100%, rgba(230, 0, 126, .18) 0%, rgba(230, 0, 126, 0) 60%);
  --glow-light-2: radial-gradient(70% 60% at 100% 100%, rgba(255, 138, 199, .40) 0%, rgba(255, 138, 199, 0) 60%),
                  radial-gradient(60% 50% at 0% 0%, rgba(230, 0, 126, .14) 0%, rgba(230, 0, 126, 0) 60%);
  --hdr-bg: rgba(18, 8, 14, .74); --hdr-bg-solid: rgba(18, 8, 14, .86); --hdr-line: rgba(255, 138, 199, .35);
  --f-display: "MFT Display", "MFT Display Fallback", Georgia, "Times New Roman", serif;
  --f-body: "MFT Body", "MFT Body Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px; --s9: 160px;
  --margin: clamp(24px, 5.6vw, 80px); --max: 1280px; --gutter: clamp(16px, 1.7vw, 24px);
  --sec: clamp(72px, 7.6vw, 120px);          /* round 6: -20 % on desktop (was clamp(96px, 10vw, 160px)) */
  --head-gap: var(--s5);                     /* section head -> content (was 64) */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --hdr: 88px; --r: 20px;
  --t-display: clamp(64px, 9.6vw, 160px); --t-h2: clamp(44px, 5.6vw, 92px); --t-h3: clamp(26px, 2.2vw, 34px);
  --t-lead: clamp(20px, 1.5vw, 22px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
.reduce, .reduce body { scroll-behavior: auto; }
body { margin: 0; background: var(--night); color: var(--on-night); font: 400 19px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 16px; top: -80px; z-index: 200; background: var(--magenta); color: #fff; padding: 16px 24px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 16px; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--margin) * 2); margin-inline: auto; padding-inline: var(--margin); }
[id] { scroll-margin-top: calc(var(--hdr) + 8px); }   /* the fixed header never covers an anchor target */

/* ---------- surfaces ---------- */
.sec { position: relative; padding-block: var(--sec); }
.dark { position: relative; background: var(--grad); color: var(--on-night); isolation: isolate; }
.dark::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .035; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.dark > .wrap { position: relative; z-index: 2; }
.dark.rose { background: var(--grad-rose); }
/* ambient light: blush base + two soft radial pink glows (one gradient layer) + the same grain as the dark sections */
.light { position: relative; isolation: isolate; color: var(--text); background-color: var(--blush-1); background-image: var(--glow-light); }
.light.ivory { background-color: var(--blush-2); background-image: var(--glow-light-2); }
.light::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.light > .wrap { position: relative; z-index: 2; }
.light .h2, .light .h3, .light .display { color: var(--ink); }
.dark + .dark { border-top: 1px solid var(--line-night); }
.light + .light { border-top: 1px solid rgba(230, 0, 126, .10); }

/* ---------- type ---------- */
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--s3); font: 600 15px/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
.eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: .8; flex: none; }
.light .eyebrow { color: var(--magenta-light); }
.display { font: 300 var(--t-display)/.9 var(--f-display); letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.h2 { font: 300 var(--t-h2)/.98 var(--f-display); letter-spacing: -.02em; margin: 0 0 var(--s3); text-wrap: balance; }
.h3 { font: 300 var(--t-h3)/1.15 var(--f-display); letter-spacing: -.01em; margin: 0 0 var(--s2); }
.lead { font-size: var(--t-lead); line-height: 1.5; max-width: 36rem; margin: 0; color: var(--on-night-2); }
.light .lead { color: var(--muted); }
.accent { color: var(--rose); }
.light .accent { color: var(--magenta); }
p { margin: 0 0 var(--s2); }

/* ---------- buttons + links ---------- */
.btn { --h: 64px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--h); padding: 0 32px; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 18px/1.2 var(--f-body); letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .3s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .3s var(--ease); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--magenta); color: #fff; box-shadow: 0 14px 36px -12px rgba(230, 0, 126, .75); }
.btn--primary:hover { background: var(--magenta-deep); transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(230, 0, 126, .9); }
.btn--ghost { border-color: rgba(255, 138, 199, .45); color: var(--on-night); background: rgba(248, 238, 244, .04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: var(--rose); background: rgba(255, 138, 199, .12); }
.light .btn--ghost { border-color: rgba(29, 17, 25, .35); color: var(--ink); background: transparent; }
.light .btn--ghost:hover { border-color: var(--magenta); color: var(--magenta-deep); background: rgba(230, 0, 126, .05); }
.btn--sm { --h: 56px; padding: 0 24px; font-size: 17px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.arrow { transition: transform .3s var(--ease); }
[dir="rtl"] .arrow { transform: scaleX(-1); }
.btn:hover .arrow, .link-arrow:hover .arrow, .tile:hover .arrow, .concerns__list a:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .btn:hover .arrow, [dir="rtl"] .link-arrow:hover .arrow, [dir="rtl"] .tile:hover .arrow, [dir="rtl"] .concerns__list a:hover .arrow { transform: scaleX(-1) translateX(4px); }
.link-arrow { display: inline-flex; align-items: center; gap: 12px; font: 600 18px/1.2 var(--f-body); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 6px; }
.link-arrow svg { width: 20px; height: 20px; flex: none; }
.link-arrow--sm { font-size: 16px; }
.light .link-arrow { color: var(--ink); }
.light .link-arrow:hover { color: var(--magenta-deep); }
.stars { display: inline-flex; gap: 2px; color: var(--rose); }
.stars svg { width: 18px; height: 18px; }
.light .stars { color: var(--magenta-deep); }

/* ---------- header ---------- */
/* round 6: the bar is a bar from first paint (frosted dark + 1 px pink hairline), a touch more solid once scrolled */
.hdr { position: fixed; top: 0; inset-inline: 0; z-index: 80; height: var(--hdr); background: var(--hdr-bg); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 1px 0 var(--hdr-line), 0 12px 40px -24px rgba(0, 0, 0, .6); transition: background .35s, box-shadow .35s; }
.hdr.is-solid, .hdr.is-open { background: var(--hdr-bg-solid); box-shadow: 0 1px 0 var(--hdr-line), 0 12px 40px -20px rgba(0, 0, 0, .7); }
.hdr__in { height: 100%; display: flex; align-items: center; gap: var(--s3); }
.hdr__logo { display: block; width: 184px; flex: none; --logo-ink: #f8eef4; color: var(--on-night); }
.hdr__logo svg { width: 100%; height: auto; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav > a, .nav > button { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; white-space: nowrap; border: 0; background: none; border-radius: 999px; font: 500 17px/1 var(--f-body); color: var(--on-night); text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.nav > a::after { content: ""; position: absolute; inset-inline: 14px; bottom: 8px; height: 2px; border-radius: 2px; background: var(--rose); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s var(--ease); }
[dir="rtl"] .nav > a::after { transform-origin: 100% 50%; }
.nav > a:hover::after, .nav > a[aria-current="page"]::after { transform: scaleX(1); }
.nav > a[aria-current="page"] { color: #fff; }
.nav > a:hover, .nav > button:hover, .nav > button[aria-expanded="true"] { background: rgba(255, 138, 199, .12); color: #fff; }
.nav .chev { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nav button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr__cta { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; }
.hdr__phone { font: 600 17px/1 var(--f-body); color: var(--on-night); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; height: 40px; white-space: nowrap; word-break: keep-all; }
@media (max-width: 1400px) { .hdr__phone { display: none; } }
.hdr__phone svg { width: 18px; height: 18px; color: var(--rose); }
.lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(255, 138, 199, .32); background: rgba(18, 8, 14, .3); }
.lang a { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 42px; padding: 0 10px; border-radius: 999px; font: 600 14px/1 var(--f-body); letter-spacing: .08em; text-decoration: none; color: var(--on-night-2); transition: background .2s, color .2s; }
.lang a:hover { color: #fff; }
.lang a[aria-current="true"] { background: rgba(255, 138, 199, .22); color: #fff; }
/* mobile: a bordered "Menu" pill (word + icon), not a bare burger */
.burger { display: none; margin-inline-start: auto; height: 48px; padding: 0 16px 0 14px; gap: 10px; border-radius: 999px; border: 1.5px solid rgba(255, 138, 199, .5); background: rgba(18, 8, 14, .35); color: var(--on-night); align-items: center; justify-content: center; cursor: pointer; font: 600 16px/1 var(--f-body); letter-spacing: .02em; }
[dir="rtl"] .burger { padding: 0 14px 0 16px; }
.burger__ic { display: block; width: 20px; height: 1.5px; background: var(--on-night); box-shadow: 0 6px 0 var(--on-night), 0 -6px 0 var(--on-night); }
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(10, 4, 8, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.mega-open .scrim { opacity: 1; }

/* ---------- mega menu ---------- */
.mega { position: absolute; inset-inline: 0; top: var(--hdr); padding: 8px var(--margin) 0; pointer-events: none; }
.mega__panel { max-width: var(--max); margin-inline: auto; border-radius: 28px; overflow: hidden;
  background: rgba(24, 10, 19, .94); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid var(--hdr-line); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06);
  display: grid; grid-template-columns: 280px 1fr 380px; min-height: 540px;
  opacity: 0; transform: translateY(-12px); transform-origin: top center; visibility: hidden;
  transition: opacity .3s var(--ease), transform .38s var(--ease), visibility 0s linear .38s; }
.mega.is-open { pointer-events: auto; }
.mega.is-open .mega__panel { opacity: 1; transform: none; visibility: visible; transition: opacity .3s var(--ease), transform .38s var(--ease); }
.mega__groups { list-style: none; margin: 0; padding: var(--s4) var(--s2) var(--s4) var(--s4); border-inline-end: 1px solid var(--line-night); display: flex; flex-direction: column; gap: 4px; }
.mega__groups button { width: 100%; text-align: start; border: 0; background: none; cursor: pointer; padding: 14px 16px; border-radius: 14px; font: 300 26px/1.1 var(--f-display); color: var(--on-night-2); display: flex; justify-content: space-between; align-items: center; transition: background .2s, color .2s; }
.mega__groups button small { font: 600 15px/1 var(--f-body); letter-spacing: .08em; color: var(--rose); opacity: .8; }
.mega__groups button[aria-selected="true"], .mega__groups button:hover { color: #fff; background: rgba(255, 138, 199, .08); }
.mega__groups button[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--magenta); }
[dir="rtl"] .mega__groups button[aria-selected="true"] { box-shadow: inset -3px 0 0 var(--magenta); }
.mega__lists { position: relative; padding: var(--s4); display: flex; flex-direction: column; align-self: start; }
.mega__item img, .mega__card img { object-position: 50% 30%; }
.mega__list { list-style: none; margin: 0; padding: 0; display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; }
.mega__list.is-active { display: grid; animation: megaIn .32s var(--ease); }
@keyframes megaIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mega__item { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; padding: 10px; border-radius: 16px; text-decoration: none; transition: background .2s; }
.mega__item:hover, .mega__item:focus-visible { background: rgba(255, 138, 199, .08); }
.mega__item img { width: 84px; height: 104px; object-fit: cover; border-radius: 12px; transition: transform .35s var(--ease); }
.mega__item:hover img { transform: scale(1.05); }
.mega__item b { display: block; font: 600 18px/1.25 var(--f-body); color: #fff; }
.mega__item small { display: block; font-size: 15px; line-height: 1.4; color: var(--on-night-2); margin-top: 4px; }
.mega__foot { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line-night); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.mega__foot p { margin: 0; font-size: 16px; color: var(--on-night-2); max-width: 28rem; }
.mega__preview { position: relative; padding: var(--s3); }
.mega__card { position: relative; height: 100%; min-height: 470px; margin: 0; border-radius: 20px; overflow: hidden; background: var(--plum); }
.mega__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .35s var(--ease), transform .4s var(--ease); }
.mega__card img.is-on { opacity: 1; transform: scale(1); }
.mega__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(18, 8, 14, .9)); }
.mega__card figcaption { position: absolute; inset-inline: var(--s3); bottom: var(--s3); z-index: 2; }
.mega__card figcaption b { display: block; font: 300 34px/1.05 var(--f-display); color: #fff; margin-bottom: 8px; }
.mega__card figcaption span { display: block; font-size: 16px; color: var(--on-night-2); margin-bottom: 14px; }
.mega__card .link-arrow { color: var(--rose); }

/* ---------- drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 120; background: var(--grad); overflow-y: auto; padding: 16px var(--margin) 48px; transform: translateY(-100%); transition: transform .38s var(--ease), visibility 0s linear .38s; visibility: hidden; }
.drawer.is-open { transform: none; visibility: visible; transition: transform .38s var(--ease); }
.drawer[hidden] { display: block; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; height: 56px; margin-bottom: var(--s3); }
.drawer__top .hdr__logo { width: 128px; }
.drawer__close { width: 56px; height: 56px; border-radius: 999px; border: 1.5px solid var(--line-night); background: none; font-size: 28px; cursor: pointer; }
.drawer h3, .drawer__h { font: 600 15px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--rose); margin: var(--s4) 0 var(--s2); }
.drawer__row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; margin-inline-end: calc(var(--margin) * -1); scrollbar-width: none; }
.drawer__row a { flex: 0 0 160px; scroll-snap-align: start; text-decoration: none; }
.drawer__row img { width: 160px; height: 200px; object-fit: cover; border-radius: 14px; margin-bottom: 8px; }
.drawer__row b { font: 600 17px/1.3 var(--f-body); }
.drawer__links { list-style: none; padding: 0; margin: var(--s5) 0 var(--s3); border-top: 1px solid var(--line-night); }
.drawer__links a { display: block; padding: 20px 0; border-bottom: 1px solid var(--line-night); font: 300 32px/1 var(--f-display); text-decoration: none; }
.lang--drawer { margin-bottom: var(--s4); }
.lang--drawer a { font-size: 15px; height: 40px; min-width: 52px; }

/* ---------- hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--hdr) + 40px) 0 40px; overflow: hidden; background: var(--night); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__poster, .hero__poster img, .hero__video, .hero__light { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__video.is-playing { opacity: 1; }
.hero__light { z-index: 2; mix-blend-mode: screen; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__light.is-on { opacity: 1; }
/* round 6 hero legibility: the start-side gradient carries the copy; the end side (where the handpiece meets the skin)
   is left open so the action reads at first paint. Bottom gradient only under the buttons/proof row. */
.hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 8, 14, .5) 0%, rgba(18, 8, 14, 0) 22%),
              linear-gradient(90deg, rgba(18, 8, 14, .78) 0%, rgba(18, 8, 14, .36) 40%, rgba(18, 8, 14, 0) 60%),
              linear-gradient(0deg, rgba(18, 8, 14, 1) 0%, rgba(18, 8, 14, .96) 10%, rgba(18, 8, 14, .3) 34%, rgba(18, 8, 14, 0) 52%); }
[dir="rtl"] .hero__shade { background: linear-gradient(180deg, rgba(18, 8, 14, .5) 0%, rgba(18, 8, 14, 0) 22%),
              linear-gradient(270deg, rgba(18, 8, 14, .78) 0%, rgba(18, 8, 14, .36) 40%, rgba(18, 8, 14, 0) 60%),
              linear-gradient(0deg, rgba(18, 8, 14, 1) 0%, rgba(18, 8, 14, .96) 10%, rgba(18, 8, 14, .3) 34%, rgba(18, 8, 14, 0) 52%); }
.hero.dark::after { z-index: 3; }
.hero__in { position: relative; z-index: 4; }
.hero__copy { max-width: 62rem; }
.hero__display { max-width: 11ch; margin-bottom: var(--s4); text-shadow: 0 2px 28px rgba(18, 8, 14, .7), 0 0 60px rgba(18, 8, 14, .5); }
.hero__h1 { margin: 0 0 var(--s3); font: 400 clamp(22px, 2.2vw, 32px)/1.2 var(--f-display); letter-spacing: -.01em; color: var(--blush); max-width: 640px; text-shadow: 0 1px 18px rgba(18, 8, 14, .6); }
.nowrap { white-space: nowrap; }
.hero .lead { margin-bottom: var(--s5); color: #e8d6e0; text-shadow: 0 1px 14px rgba(18, 8, 14, .6); }
.hero__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line-night); }
.rating { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 12px; font: 500 17px/1.2 var(--f-body); color: var(--on-night); text-decoration: none; white-space: nowrap; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 8px var(--s4); list-style: none; margin: 0; padding: 0; font-size: 16px; color: var(--on-night-2); }
.hero__facts li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.hero__facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.motion-toggle { display: inline-flex; flex: 0 0 auto; white-space: nowrap; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 8px; border-radius: 999px; border: 1px solid var(--line-night); background: rgba(18, 8, 14, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 500 15px/1 var(--f-body); color: var(--on-night-2); cursor: pointer; transition: background .2s, color .2s; }
[dir="rtl"] .motion-toggle { padding: 0 8px 0 18px; }
.motion-toggle:hover { background: rgba(255, 138, 199, .14); color: #fff; }
.motion-toggle i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 138, 199, .16); }
.motion-toggle svg { width: 12px; height: 12px; }
.motion-toggle .i-play { display: none; }
.motion-toggle[aria-pressed="true"] .i-play { display: block; }
.motion-toggle[aria-pressed="true"] .i-pause { display: none; }
.hero--laser .hero__display { max-width: 12ch; }
@media (min-width: 768px) and (max-width: 1023px) {
  /* tablet: the 16:9 film cannot clear the copy column, so the shade darkens top-down like mobile */
  .hero__shade, [dir="rtl"] .hero__shade { background: linear-gradient(180deg, rgba(18, 8, 14, .3) 0%, rgba(18, 8, 14, .3) 28%, rgba(18, 8, 14, .74) 50%, rgba(18, 8, 14, .94) 100%); }
  .hero__video, .hero__poster img { object-position: 60% 50%; }
  [dir="rtl"] .hero__video, [dir="rtl"] .hero__poster img { object-position: 40% 50%; transform: scaleX(-1); }
}
@media (min-width: 1024px) {
  /* desktop: the media box starts past the copy's start edge (the hero's own dark fills the gap under the heavy
     scrim), the film keeps its start edge (object-position 0) and is scaled 1.1 from that edge, so the handpiece
     meets the skin in the open end half (~70-80 % of the viewport) instead of under the lead. The start-side scrim
     is heavy only under the display block and falls to zero before the contact point. RTL flips the film. */
  .hero__media { inset-inline-start: var(--hero-shift, 12%); }
  .hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(18, 8, 14, .94) 0%, rgba(18, 8, 14, .86) 30%, rgba(18, 8, 14, .62) 44%, rgba(18, 8, 14, .28) 54%, rgba(18, 8, 14, .06) 64%, transparent 72%); }
  [dir="rtl"] .hero__media::after { background: linear-gradient(270deg, rgba(18, 8, 14, .94) 0%, rgba(18, 8, 14, .86) 30%, rgba(18, 8, 14, .62) 44%, rgba(18, 8, 14, .28) 54%, rgba(18, 8, 14, .06) 64%, transparent 72%); }
  .hero__video, .hero__poster img { object-position: 0% 50%; transform: scale(var(--hero-zoom, 1.1)); transform-origin: 0 50%; }
  /* RTL: flip in place (scaleX(-1) around the end edge, then pulled back by its own width), then zoom from the end edge */
  [dir="rtl"] .hero__video, [dir="rtl"] .hero__poster img { transform: scale(var(--hero-zoom, 1.1)) translateX(-100%) scaleX(-1); transform-origin: 100% 50%; }
  .hero--laser { --hero-shift: 6%; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero { --hero-shift: 6%; --hero-zoom: 1; }
  .hero--laser { --hero-shift: 0%; }
}
@media (min-width: 1800px) {
  .hero { --hero-zoom: 1.2; }
}

/* ---------- section head ---------- */
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: end; margin-bottom: var(--head-gap); }
.sec-head > div { grid-column: 1 / span 8; }
.sec-head > .lead { grid-column: 9 / span 4; margin: 0 0 6px; }
.sec-head--wide > div { grid-column: 1 / span 11; }
.sec-head .h2 { margin: 0; }
.sec-foot { margin-top: var(--s5); }

/* ---------- photo tiles ---------- */
.tiles { display: grid; gap: var(--gutter); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { position: relative; display: block; margin: 0; border-radius: var(--r); text-decoration: none; color: #fff; overflow: hidden; aspect-ratio: 4 / 5; background: var(--plum);
  box-shadow: 0 24px 48px -32px rgba(18, 8, 14, .6); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.tile--wide { grid-column: span 2; aspect-ratio: auto; }
.tile__img { position: absolute; inset: 0; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.tile__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 8, 14, 0) 45%, rgba(18, 8, 14, .82) 100%); }
.tile--photo .tile__img::after { background: linear-gradient(180deg, rgba(18, 8, 14, 0) 70%, rgba(18, 8, 14, .35) 100%); }
.tile--photo .tile__img, .fear .tile__img { inset: -24px 0; will-change: transform; }
.tile--light .tile__img::after { background: linear-gradient(180deg, rgba(18, 8, 14, 0) 30%, rgba(18, 8, 14, .9) 100%); }
.tile--clinic .tile__img::after { background: linear-gradient(180deg, rgba(18, 8, 14, 0), rgba(18, 8, 14, .06)); }
.visit__photos .v1 img { object-position: 35% 45%; }
.visit__photos .v2 img { object-position: 70% 40%; }  /* room for the <= 24 px parallax */
.tile__body { position: absolute; inset-inline: var(--s3); bottom: var(--s3); }
.tile__body b { display: block; font: 300 clamp(26px, 2.2vw, 34px)/1.05 var(--f-display); margin-bottom: 8px; }
.tile__body > span { display: block; font-size: 17px; line-height: 1.4; color: rgba(255, 255, 255, .86); }
.tile__time { display: inline-block; margin-top: 12px; font: 600 15px/1.25 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--rose); font-style: normal; }
.tile__go { position: absolute; top: 20px; inset-inline-end: 20px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; transition: background .3s; }
.tile__go svg { width: 18px; height: 18px; }
a.tile:hover, a.tile:focus-visible { transform: translateY(-4px); box-shadow: 0 32px 64px -28px rgba(230, 0, 126, .55), 0 0 0 1px rgba(255, 138, 199, .25); }
a.tile:hover .tile__go { background: var(--magenta); }
a.tile:hover .tile__img img { transform: scale(1.04); }
.tile--photo:hover { transform: translateY(-4px); box-shadow: 0 32px 64px -28px rgba(230, 0, 126, .5); }

/* ---------- laser flagship ---------- */
.acards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-bottom: var(--s6); }
.acard { padding-top: var(--s3); border-top: 1px solid var(--line-night); }
.acard em { display: block; font: 300 18px/1 var(--f-display); font-style: normal; color: var(--rose); letter-spacing: .06em; margin-bottom: var(--s3); }
.acard .h3 { color: #fff; }
.acard p { margin: 0; color: var(--on-night-2); max-width: 26rem; }
/* Round 5: no line crosses the photos. The scroll-linked value (--beam 0..100%, --beam-a 0..1, set in site.js)
   moves a soft magenta glow in the section background BEHIND the tile row, start edge -> end edge. */
.laser { overflow-x: clip; }   /* the background glow bleeds past the wrap, never past the viewport */
.beamwrap { position: relative; }
.beamwrap .tiles { position: relative; z-index: 1; }
.beamwrap__glow { position: absolute; inset: -12% -8%; z-index: 0; pointer-events: none; opacity: var(--beam-a, 0);
  background: radial-gradient(38% 60% at var(--beam, 0%) 55%, rgba(255, 46, 154, .34) 0%, rgba(255, 46, 154, .12) 45%, rgba(255, 46, 154, 0) 72%);
  filter: blur(24px); transition: opacity .3s linear; }
[dir="rtl"] .beamwrap__glow { background: radial-gradient(38% 60% at calc(100% - var(--beam, 0%)) 55%, rgba(255, 46, 154, .34) 0%, rgba(255, 46, 154, .12) 45%, rgba(255, 46, 154, 0) 72%); }
.laser .tile--photo { box-shadow: 0 24px 48px -32px rgba(18, 8, 14, .6), 0 0 0 1px rgba(255, 138, 199, .10); }

/* ---------- concerns ---------- */
.concerns__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.concerns__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--hdr) + 40px); }
.concerns__list { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.concerns__list a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem) 24px; align-items: center; gap: var(--s2); padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: padding .3s var(--ease), color .3s; }
.concerns__list a:hover { padding-inline-start: 16px; color: var(--magenta-deep); }
.concerns__list b { font: 300 clamp(28px, 2.4vw, 36px)/1.1 var(--f-display); text-wrap: balance; }
.concerns__list span { font-size: 17px; line-height: 1.35; color: var(--muted); text-align: end; justify-self: end; text-wrap: balance; }
.concerns__list .arrow { width: 22px; height: 22px; color: var(--magenta-deep); opacity: 0; transition: opacity .3s, transform .3s var(--ease); }
.concerns__list a:hover .arrow { opacity: 1; }
.concerns__list img { display: none; }
.concerns__preview { margin: var(--s4) 0 0; width: 100%; max-width: none; }
.concerns__pimg { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; background: var(--plum); box-shadow: 0 32px 64px -28px rgba(230, 0, 126, .55), 0 0 0 1px rgba(230, 0, 126, .12); }
.concerns__pimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .24s var(--ease); }
.concerns__pimg img.is-on { opacity: 1; }
.concerns__preview figcaption:empty { display: none; }
.concerns__preview figcaption { margin-top: 12px; font: 600 15px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--magenta-light); }

/* ---------- steps rail (home) ---------- */
.steps__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.steps__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--hdr) + 40px); }
.steps { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before { content: ""; position: absolute; inset-inline-start: 27px; top: 28px; bottom: 28px; width: 1px; background: var(--line-night); }
.steps__rail { position: absolute; inset-inline-start: 27px; top: 28px; width: 1px; height: calc(100% - 56px); background: linear-gradient(180deg, var(--magenta-hi), var(--magenta)); box-shadow: 0 0 12px rgba(255, 46, 154, .6); transform-origin: top; transform: scaleY(0); transition: transform .38s var(--ease); }
.is-in ~ .steps__rail, .steps.is-lit .steps__rail { transform: scaleY(1); }
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--s3); padding: 20px 0; }
.step__n { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 300 24px/1 var(--f-display); background: var(--night); border: 1px solid var(--line-night); transition: background .3s, border-color .3s; }
.step.is-in .step__n { background: var(--magenta); border-color: var(--magenta); color: #fff; box-shadow: 0 10px 24px -10px rgba(230, 0, 126, .8); }
.step b { display: block; font: 300 clamp(28px, 2.4vw, 36px)/1.1 var(--f-display); color: #fff; margin-bottom: 8px; }
.step p { margin: 0; color: var(--on-night-2); max-width: 30rem; }

/* ---------- reviews ---------- */
.reviews__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.reviews__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--hdr) + 24px); }
.score__big { display: block; font: 300 clamp(120px, 14vw, 220px)/.85 var(--f-display); color: var(--ink); letter-spacing: -.04em; margin: 0 0 var(--s2); }
.reviews__head .stars { margin-bottom: var(--s3); }
.reviews__head .stars svg { width: 26px; height: 26px; }
.reviews__head .lead { margin-bottom: var(--s4); }
.quotes { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
/* frosted, tinted cards (never #fff) */
.quote { margin: 0; background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--r); padding: var(--s4); border: 1px solid var(--card-line); box-shadow: 0 24px 60px -40px rgba(120, 20, 70, .35), inset 0 1px 0 rgba(255, 255, 255, .6); display: flex; flex-direction: column; }
.quotes { align-items: start; }
.quote:nth-child(even) { margin-top: var(--s4); }
.quote p { font: 300 21px/1.4 var(--f-display); color: var(--ink); margin: var(--s2) 0 var(--s3); flex: 1; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.quote__more { display: inline-flex; align-items: center; gap: 6px; color: var(--magenta-light); font-weight: 600; text-decoration: none; max-width: 100%; }
.quote__more svg { width: 16px; height: 16px; }
.quote footer { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font-size: 15px; color: var(--muted); flex-wrap: wrap; }
.quote footer b { color: var(--ink); font-weight: 600; }
.quote[dir="ltr"], .who__quote blockquote[dir="ltr"] { text-align: left; }   /* English quotes on the RTL page */
.quote .stars svg { width: 16px; height: 16px; }

/* ---------- visit ---------- */
.visit__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.visit__copy { grid-column: 1 / span 5; }
.visit__photos { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.visit__photos .v1 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.visit .lead { margin-bottom: var(--s4); }
.nap { font-style: normal; font-size: 19px; line-height: 1.6; margin-bottom: var(--s4); }
.nap b { font: 300 clamp(26px, 2.2vw, 34px)/1.15 var(--f-display); color: var(--ink); }
.nap a { color: var(--ink); font-weight: 600; text-decoration: none; }
.hours { width: 100%; max-width: 380px; border-collapse: collapse; margin-bottom: var(--s3); font-size: 18px; }
.hours th, .hours td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: start; }
.hours th { font-weight: 500; color: var(--ink); }
.hours td { color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; }
.visit__facts { display: flex; flex-wrap: wrap; gap: 8px var(--s3); margin-bottom: var(--s4); color: var(--muted); font-size: 17px; }
.visit__facts span { display: inline-flex; align-items: center; gap: 8px; }
.visit__facts span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--magenta); }
/* the visit section is dark-pink (rose) in round 6 so the page alternates dark -> blush -> dark */
.dark .nap b, .dark .nap a, .dark .hours th { color: #fff; }
.dark .hours td, .dark .visit__facts { color: var(--on-night-2); }
.dark .hours th, .dark .hours td { border-color: var(--line-night); }
.dark .visit__facts span::before { background: var(--rose); }
.dark .hours { background: rgba(255, 255, 255, .05); border: 1px solid var(--line-night); border-radius: 16px; max-width: 420px; }
.dark .hours th, .dark .hours td { padding: 12px 18px; }
.dark .hours tr:last-child th, .dark .hours tr:last-child td { border-bottom: 0; }

/* ---------- faq ---------- */
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.faq__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--hdr) + 40px); }
.faq__list { grid-column: 6 / span 7; border-top: 1px solid var(--line); }
/* round 6 final: a portrait fills the space under the sticky heading (desktop only) */
.faq__img { margin: var(--s4) 0 0; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; background: var(--plum); box-shadow: 0 32px 64px -28px rgba(230, 0, 126, .55), 0 0 0 1px rgba(230, 0, 126, .12); }
.faq__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 1023px) { .faq__img { display: none; } }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 24px 0; cursor: pointer; font: 300 clamp(24px, 2vw, 30px)/1.2 var(--f-display); color: var(--ink); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary i { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(29, 17, 25, .3); position: relative; transition: background .25s, border-color .25s; }
.faq__list summary i::before, .faq__list summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.faq__list summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--ease); }
.faq__list details[open] summary i { background: var(--magenta); border-color: var(--magenta); }
.faq__list details[open] summary i::before, .faq__list details[open] summary i::after { background: #fff; }
.faq__list details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq__list details p { margin: 0 0 24px; max-width: 40rem; color: var(--muted); padding-inline-end: 72px; }

/* ---------- request form ---------- */
.book { overflow: hidden; }
.book__film { position: absolute; inset: 0; z-index: 0; }
.book__film img, .book__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; object-position: 70% 50%; }
[dir="rtl"] .book__film img { object-position: 30% 50%; }
.book__film video { opacity: 0; transition: opacity 1.2s var(--ease); }
.book__film video.is-playing { opacity: .55; }
.book::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(18, 8, 14, .92) 0%, rgba(18, 8, 14, .5) 55%, rgba(18, 8, 14, .7) 100%); }
[dir="rtl"] .book::before { background: linear-gradient(270deg, rgba(18, 8, 14, .92) 0%, rgba(18, 8, 14, .5) 55%, rgba(18, 8, 14, .7) 100%); }
.book__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.book__copy { grid-column: 1 / span 5; }
.book__copy .h2 { max-width: 10ch; }
.book__facts { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: 14px; font-size: 18px; }
.book__facts li { display: flex; align-items: center; gap: 14px; }
.book__facts svg { width: 22px; height: 22px; color: var(--rose); flex: none; }
.book__call { display: inline-flex; flex-direction: column; margin-top: var(--s5); text-decoration: none; }
.book__call small { font: 600 15px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--rose); margin-bottom: 6px; }
.book__call b { font: 300 clamp(36px, 3.4vw, 48px)/1.1 var(--f-display); }
.form { grid-column: 7 / span 6; position: relative; padding: var(--s5); border-radius: 28px; background: rgba(34, 16, 27, .62); backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3); border: 1px solid var(--line-night); box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .8); }
.form__prog { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.form__bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 138, 199, .18); overflow: hidden; }
.form__bar i { display: block; height: 100%; width: var(--fp, 0%); background: linear-gradient(90deg, var(--magenta), var(--magenta-hi)); border-radius: 3px; transition: width .38s var(--ease); }
.form__prog span { font: 600 15px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-2); white-space: nowrap; }
.form__title { font: 300 clamp(30px, 2.4vw, 36px)/1.05 var(--f-display); margin: 0 0 8px; color: #fff; }
.form__sub { margin: 0 0 var(--s3); color: var(--on-night-2); font-size: 17px; }
.fieldset { border: 0; margin: 0 0 var(--s4); padding: 0; min-width: 0; }
.legend { width: 100%; display: flex; justify-content: space-between; align-items: baseline; font: 600 15px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--rose); margin-bottom: var(--s2); padding: 0; }
.legend small { font-size: 15px; color: var(--on-night-2); letter-spacing: .1em; }
.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.chip { position: relative; display: block; cursor: pointer; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid rgba(255, 138, 199, .2); background: var(--plum); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.78); transition: transform .4s var(--ease), filter .3s; }
.chip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(18, 8, 14, .9)); }
.chip span { position: absolute; inset-inline: 12px; bottom: 12px; z-index: 2; font: 600 16px/1.2 var(--f-body); color: #fff; }
.chip i { position: absolute; inset-inline-end: 10px; top: 10px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); background: rgba(18, 8, 14, .3); display: grid; place-items: center; color: #fff; transition: background .25s, border-color .25s; }
.chip i svg { width: 14px; height: 14px; opacity: 0; transition: opacity .2s; }
.chip:hover { transform: translateY(-3px); border-color: rgba(255, 138, 199, .5); }
.chip:hover img { transform: scale(1.05); filter: saturate(1) brightness(.9); }
.chip:has(input:checked) { border-color: var(--magenta-hi); box-shadow: 0 0 0 1px var(--magenta-hi), 0 16px 36px -16px rgba(230, 0, 126, .85); }
.chip:has(input:checked) img { filter: saturate(1) brightness(1); }
.chip:has(input:checked) i { background: var(--magenta); border-color: var(--magenta); }
.chip:has(input:checked) i svg { opacity: 1; }
.chip:has(input:focus-visible) { outline: 3px solid var(--rose); outline-offset: 3px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.fl--full { grid-column: 1 / -1; }
.fl { position: relative; }
.fl input { width: 100%; height: 64px; padding: 24px 20px 6px; border-radius: 14px; border: 1px solid rgba(255, 138, 199, .28); background: rgba(255, 255, 255, .06); color: var(--on-night); font: 400 18px/1 var(--f-body); transition: border-color .25s, background .25s; }
.fl input:focus { outline: none; background: rgba(255, 255, 255, .1); border-color: var(--magenta-hi); box-shadow: 0 0 0 3px rgba(255, 46, 154, .2); }
.fl label { position: absolute; inset-inline-start: 20px; top: 21px; font-size: 17px; color: var(--on-night-2); pointer-events: none; transition: top .2s var(--ease), font-size .2s; }
.fl input:focus + label, .fl input:not(:placeholder-shown) + label { top: 9px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.fl.ok input { border-color: rgba(255, 138, 199, .7); }
.consent { display: grid; grid-template-columns: 28px 1fr; gap: 14px; margin: var(--s3) 0; font-size: 16px; line-height: 1.5; color: var(--on-night-2); cursor: pointer; }
.consent input { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; border-radius: 8px; margin: 0; border: 1.5px solid rgba(255, 138, 199, .6); background: rgba(255, 255, 255, .04); cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.consent input:checked { background: var(--magenta); border-color: var(--magenta); }
.consent input:checked::after { content: ""; width: 12px; height: 7px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.consent a { color: var(--on-night); }
.form__submit { width: 100%; --h: 68px; font-size: 19px; }
.form__note { margin: var(--s2) 0 0; font-size: 16px; color: var(--on-night-2); }
.form__done { margin: var(--s2) 0 0; padding: 14px 20px; border-radius: 12px; background: rgba(255, 138, 199, .14); border: 1px solid var(--line-night); font-size: 16px; color: #fff; }

/* ---------- footer ---------- */
.ftr { padding: var(--s7) 0 var(--s5); }
.ftr__big { font: 300 clamp(48px, 7vw, 120px)/.95 var(--f-display); letter-spacing: -.02em; margin: 0 0 var(--s5); }
.ftr__cta { margin-bottom: var(--s7); }
.ftr__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); padding-top: var(--s5); border-top: 1px solid var(--line-night); }
.ftr__grid > div:nth-child(1) { grid-column: 1 / span 4; }
.ftr__grid > div:nth-child(2) { grid-column: 6 / span 2; }
.ftr__grid > div:nth-child(3) { grid-column: 9 / span 2; }
.ftr__grid > div:nth-child(4) { grid-column: 11 / span 2; }
.ftr__logo { width: 180px; height: auto; --logo-ink: #f8eef4; margin-bottom: var(--s3); }
.ftr h4 { font: 600 15px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--rose); margin: 0 0 20px; }
.ftr__h4 { margin-top: var(--s4) !important; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 17px; }
.ftr ul a { text-decoration: none; color: var(--on-night-2); }
.ftr ul a:hover, .ftr ul a[aria-current="true"] { color: #fff; }
.ftr__hours li { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--on-night-2); white-space: nowrap; }
.ftr__hours li span:first-child { color: var(--on-night); }
.ftr address { font-style: normal; color: var(--on-night-2); font-size: 17px; line-height: 1.7; }
.ftr address a { color: #fff; text-decoration: none; font-weight: 600; }
.ftr__brand p { color: var(--on-night-2); margin: 0 0 var(--s2); }
.ftr__legal { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line-night); font-size: 15px; color: var(--on-night-2); opacity: .85; }
.mbar { display: none; }

/* ---------- laser page ---------- */
.fears__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.fear .tile { margin-bottom: var(--s3); }
.fear em { display: block; font: 300 18px/1 var(--f-display); font-style: normal; color: var(--rose); letter-spacing: .06em; margin-bottom: var(--s2); }
.fear .h3 { color: #fff; }
.fear p { margin: 0; color: var(--on-night-2); }
.areas__notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--muted); }
.areas__notes p { margin: 0; max-width: 32rem; }
.hsteps { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.hstep { padding-top: var(--s3); border-top: 1px solid var(--line); }
.hstep em { display: block; font: 300 18px/1 var(--f-display); font-style: normal; color: var(--magenta-light); letter-spacing: .06em; margin-bottom: var(--s3); }
.hstep p { margin: 0; color: var(--muted); font-size: 18px; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.fact { padding: var(--s3); border-radius: var(--r); background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--card-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.fact span { display: block; font: 600 15px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--magenta-light); margin-bottom: 12px; }
.fact b { font: 300 clamp(22px, 1.8vw, 28px)/1.15 var(--f-display); color: var(--ink); }
.prep__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.prep__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--hdr) + 40px); }
.prep__grid > div:last-child { grid-column: 7 / span 6; }
.checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-night); }
.checklist li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s2); align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line-night); font-size: clamp(20px, 1.6vw, 24px); line-height: 1.4; color: #fff; }
.checklist i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--magenta); color: #fff; }
.checklist svg { width: 18px; height: 18px; }
.prep__note { margin: var(--s3) 0 0; color: var(--on-night-2); max-width: 36rem; }
.who__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.who__photo { grid-column: 1 / span 5; }
.who__copy { grid-column: 7 / span 6; }
/* "Who treats you" is a rose (dark-pink) section in round 6; the quote card is frosted dark */
.who__quote { margin: var(--s5) 0 0; padding: var(--s4); border-radius: var(--r); background: rgba(255, 255, 255, .07); border: 1px solid var(--line-night); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.who__quote small { display: block; font: 600 15px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--rose); margin-bottom: var(--s2); }
.who__quote blockquote { margin: 0; }
.who__quote p { font: 300 clamp(20px, 1.7vw, 26px)/1.35 var(--f-display); color: #fff; margin: 0 0 var(--s2); }
.who__quote figcaption { font-size: 15px; color: var(--on-night-2); }
.who .lead { max-width: 34rem; }

/* ---------- reveals ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .36s var(--ease), transform .36s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal], .reduce [data-reveal] { opacity: 1; transform: none; transition: none; }
.reduce .steps__rail { transform: scaleY(1); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav, .hdr__phone, .hdr__cta .lang { display: none; }
  .burger { display: inline-flex; }
  .hdr__cta { margin-inline-start: auto; }
  .hdr__cta .btn { display: none; }
  .mega { display: none; }
  .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega__panel { grid-template-columns: 240px 1fr 320px; }
  /* 1024-1180: the concern sub-line sits under the name (never a 3-line name); reviews one column */
  .concerns__list a { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 4px; }
  .concerns__list span { grid-column: 1; text-align: start; justify-self: start; }
  .concerns__list .arrow { grid-column: 2; grid-row: 1 / span 2; }
  .quotes { grid-template-columns: 1fr; }
  .quote:nth-child(even) { margin-top: 0; }
}
/* 1024-1180: one review column would run ~700 px past the sticky score block; two cards keep the columns level */
@media (min-width: 1024px) and (max-width: 1180px) { .quote:nth-child(n+3) { display: none; } }
@media (max-width: 1023px) {
  :root { --head-gap: var(--s4); }
  .sec-head > div, .sec-head > .lead { grid-column: 1 / -1; }
  .sec-head > .lead { margin-top: var(--s2); }
  .concerns__head, .concerns__list, .steps__head, .steps, .reviews__head, .quotes, .visit__copy, .visit__photos, .faq__head, .faq__list, .book__copy, .form, .prep__head, .prep__grid > div:last-child, .who__photo, .who__copy { grid-column: 1 / -1; }
  .concerns__head, .steps__head, .reviews__head, .faq__head, .prep__head { position: static; margin-bottom: var(--s4); }
  .visit__photos, .form { margin-top: var(--s5); }
  .who__copy { margin-top: var(--s4); }
  .who__photo { max-width: 520px; }
  /* concern rows carry a real thumbnail (96 px) below 1024 */
  .concerns__list a { grid-template-columns: 96px 1fr 24px; padding: 14px 0; }
  .concerns__list img { display: block; width: 96px; height: 96px; border-radius: 14px; object-fit: cover; grid-row: span 2; }
  .concerns__list span { text-align: start; justify-self: start; grid-column: 2; font-size: 16px; }
  .concerns__list .arrow { grid-row: span 2; }
  .concerns__list b { font-size: 28px; }
  .concerns__preview { display: none; }
  .acards, .fears__grid { grid-template-columns: 1fr; }
  .acards { gap: 0; }
  .fears__grid { gap: var(--s4); }
  .hsteps, .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas__notes { grid-template-columns: 1fr; }
  .ftr__grid > div { grid-column: 1 / -1 !important; margin-bottom: var(--s3); }
  .quotes { grid-template-columns: 1fr; }
  .quote:nth-child(even) { margin-top: 0; }
  .reviews__head .score__big { font-size: clamp(96px, 20vw, 160px); }
}
@media (max-width: 767px) {
  /* round 6 mobile: 16 px gutters, section padding -35 %, body 18 / captions >= 15, headings a step up,
     photo rows full-bleed, the film's contact point above the copy, a solid bottom call/book bar */
  :root { --hdr: 72px; --sec: clamp(48px, 12vw, 72px); --margin: 16px; --head-gap: var(--s3); }
  body { font-size: 18px; }
  .hdr__logo { width: 142px; }
  .btn { --h: 60px; padding: 12px 24px; white-space: normal; text-align: center; }
  .btn-row { flex-direction: column; }
  .btn-row .btn, .sec-foot .btn { width: 100%; }
  .display { font-size: clamp(50px, 14vw, 72px); }
  .h2 { font-size: clamp(40px, 11.5vw, 56px); }
  .h3 { font-size: 28px; }
  .lead { font-size: 18px; }
  .hero { padding: calc(var(--hdr) + 24px) 0 var(--s3); }
  .hero__display { margin-bottom: var(--s3); }
  .hero__h1 { font-size: 21px; margin-bottom: var(--s2); }
  .hero .lead { font-size: 17px; margin-bottom: var(--s3); }
  .hero__foot { margin-top: var(--s3); padding-top: var(--s2); display: grid; grid-template-columns: 1fr auto; row-gap: 12px; column-gap: var(--s2); align-items: center; }
  .hero__facts { display: none; }   /* the facts live in Visit; the fold keeps display + h1 + lead + 2 buttons + rating */
  .motion-toggle { grid-column: 2; grid-row: 1; padding: 0 8px; }
  .motion-toggle span { display: none; }
  /* the 9:16 film is scaled from the bottom-end corner so the handpiece-on-skin contact rises into the upper third,
     above the copy; the shade stays light there and only darkens under the text */
  .hero__shade, [dir="rtl"] .hero__shade { background: linear-gradient(180deg, rgba(18, 8, 14, .22) 0%, rgba(18, 8, 14, .22) 30%, rgba(18, 8, 14, .6) 48%, rgba(18, 8, 14, .88) 64%, rgba(18, 8, 14, .97) 100%); }
  .hero__video, .hero__poster img { object-position: 100% 50%; transform: scale(var(--hero-mzoom, 1.2)); transform-origin: 100% 100%; }
  [dir="rtl"] .hero__video, [dir="rtl"] .hero__poster img { object-position: 0% 50%; transform-origin: 0 100%; }
  .hero--laser { --hero-mzoom: 1.3; }
  /* the round-6 laser-9x16 film holds the contact at ~53 % height: lift it 10 % (the gap at the bottom sits under the .97 shade) */
  .hero--laser .hero__video, .hero--laser .hero__poster img { transform: translateY(-10%) scale(var(--hero-mzoom)); }
  /* critic 6A: the laser 9:16 film holds its contact at x~55 %, so RTL keeps the LTR crop (end-corner origin) for this film only */
  [dir="rtl"] .hero--laser .hero__video, [dir="rtl"] .hero--laser .hero__poster img { object-position: 100% 50%; transform-origin: 100% 100%; transform: translateY(-10%) scale(var(--hero-mzoom)); }
  .hero--laser .hero__display { font-size: clamp(46px, 12.5vw, 64px); }
  .rating { font-size: 15px; gap: 8px; }
  .rating .stars svg { width: 15px; height: 15px; }
  .motion-toggle { height: 40px; }
  .motion-toggle i { width: 26px; height: 26px; }
  .tiles--3, .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .laser .tiles--3 { grid-template-columns: 1fr; gap: 8px; margin-inline: calc(var(--margin) * -1); }
  .laser .tile--photo { aspect-ratio: 4 / 3; border-radius: 0; }
  /* round 6 final: laser areas one per row on phones (photo 4:3 at full content width, copy no longer covers the image) */
  .areas .tiles--3 { grid-template-columns: 1fr; gap: 12px; }
  .areas .tile { aspect-ratio: 4 / 3; }
  .tile { border-radius: 16px; }
  .tile__body { inset-inline: 14px; bottom: 14px; }
  .tile__body b { font-size: 24px; }
  .tile__body > span { font-size: 15px; }
  .tile__go { width: 40px; height: 40px; top: 12px; inset-inline-end: 12px; }
  .tile--wide { grid-column: span 2; aspect-ratio: 16 / 10; }
  /* round 6 final ("images small on mobile"): treatments one per row, photo at full content width */
  .treatments .tiles--4 { grid-template-columns: 1fr; }
  .treatments .tile, .treatments .tile--wide { grid-column: auto; aspect-ratio: 16 / 10; }
  .treatments .tile__body b { font-size: 28px; }
  .treatments .tile__body > span { font-size: 16px; }
  .acard { padding: var(--s3) 0; }
  .acards { margin-bottom: var(--s4); }
  .step { grid-template-columns: 48px 1fr; gap: var(--s2); padding: 16px 0; }
  .step__n { width: 48px; height: 48px; font-size: 20px; }
  .steps::before, .steps__rail { inset-inline-start: 23px; }
  .step b { font-size: 28px; }
  .visit__photos { grid-template-columns: 1fr; gap: 8px; margin-inline: calc(var(--margin) * -1); }
  .visit__photos .tile--photo { aspect-ratio: 4 / 3; border-radius: 0; }
  .quote { padding: var(--s3); }
  .quote p { font-size: 20px; }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .chip { aspect-ratio: 4 / 3; border-radius: 12px; }
  .chip span { font-size: 15px; inset-inline: 10px; bottom: 10px; }
  .fields { grid-template-columns: 1fr; }
  .form { padding: var(--s3) var(--s2); border-radius: 20px; }
  .book__facts { display: none; }
  .book__call { margin-top: var(--s3); }
  .book__grid { align-items: start; }
  .faq__list summary { padding: 18px 0; font-size: 23px; }
  .faq__list details p { padding-inline-end: 0; margin-bottom: 20px; }
  .hsteps, .facts { grid-template-columns: 1fr; gap: 12px; }
  .hstep { padding-top: var(--s2); }
  .checklist li { font-size: 19px; padding: 16px 0; }
  .who__photo { max-width: none; margin-inline: calc(var(--margin) * -1); }
  .who__photo.tile { border-radius: 0; aspect-ratio: 4 / 3; }
  .ftr { padding: var(--s6) 0 112px; }
  .ftr__cta { margin-bottom: var(--s5); }
  .ftr__legal { flex-direction: column; gap: 8px; }
  /* sticky bottom bar: solid, edge to edge, a border on top, two big buttons; hidden while the form is on screen */
  .mbar { display: flex; gap: 10px; position: fixed; inset-inline: 0; bottom: 0; z-index: 60; padding: 10px var(--margin) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(18, 8, 14, .96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255, 138, 199, .35); box-shadow: 0 -12px 40px -20px rgba(0, 0, 0, .8); transform: translateY(110%); transition: transform .38s var(--ease); }
  .mbar.is-on { transform: none; }
  .mbar .btn { flex: 1; --h: 56px; padding: 0 16px; font-size: 18px; }
  .mbar .btn--ghost { background: rgba(255, 138, 199, .08); border-color: rgba(255, 138, 199, .55); }
  .drawer { padding-bottom: 120px; }
}
@media (max-width: 400px) {
  .hero--laser .hero__display { font-size: 44px; }
  /* 360: the 96 px thumb stays; the name drops to 25 px so ES/AR names keep two lines, the sub-line may wrap */
  .concerns__list a { grid-template-columns: 96px 1fr 22px; gap: 12px; }
  .concerns__list b { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__video, .book__film video { display: none; }
  .hero__light { display: none; }
}

/* =====================================================================================================
   ROUND 7 (2026-10-01): consult-first strip, reviews beside CTAs, centred Visit, even FAQ / reviews,
   phone image grids one per row, Call / Text / Request bar. Everything below overrides earlier rules.
   ===================================================================================================== */

/* ---- one short verbatim review next to a CTA ---- */
.cta-proof { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; max-width: 30rem; }
.cta-proof .stars svg { width: 14px; height: 14px; }
.cta-proof blockquote { margin: 0; grid-column: 2; }
.cta-proof p { margin: 0; font: 300 19px/1.3 var(--f-display); color: var(--on-night); }
.cta-proof figcaption { grid-column: 2; font-size: 15px; color: var(--on-night-2); }
.cta-proof .stars { grid-row: 1; align-self: start; padding-top: 4px; }
.light .cta-proof p { color: var(--ink); }
.light .cta-proof figcaption { color: var(--muted); }
.light .cta-proof .stars { color: var(--magenta-deep); }

/* ---- hero: review under the buttons, then the concern-finder link ---- */
.hero .lead { margin-bottom: var(--s4); }
.cta-proof--hero { margin-top: var(--s3); max-width: 44rem; }
@media (min-width: 1024px) { .hero__display { margin-bottom: var(--s3); } }
.cta-proof--hero p { text-shadow: 0 1px 14px rgba(18, 8, 14, .7); }
.hero__finder { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s3); font: 500 17px/1.3 var(--f-body); color: var(--rose); text-decoration: none; border-bottom: 1px solid rgba(255, 138, 199, .45); padding-bottom: 4px; text-shadow: 0 1px 14px rgba(18, 8, 14, .7); }
.hero__finder:hover { color: #fff; border-color: #fff; }
.hero__finder .arrow { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.hero__finder:hover .arrow { transform: translateX(4px); }
.hero__foot { margin-top: var(--s4); }

/* ---- first visit: consult -> test spot -> plan in writing ---- */
.fv { padding-block: calc(var(--sec) * .8); }
.fv__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.fv__step { position: relative; display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border-radius: var(--r); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-night);
  box-shadow: 0 0 0 1px rgba(255, 138, 199, .06), 0 30px 60px -36px rgba(230, 0, 126, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fv__step em { flex: none; font: 300 20px/1 var(--f-display); font-style: normal; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--magenta); box-shadow: 0 0 0 6px rgba(230, 0, 126, .18), 0 0 28px rgba(255, 46, 154, .55); }
.fv__step h3 { margin: 6px 0 8px; font: 300 clamp(24px, 2vw, 30px)/1.1 var(--f-display); color: #fff; }
.fv__step p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--on-night-2); }
.fv__foot { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-night); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3) var(--gutter); align-items: center; }
.fv__promise { grid-column: 1 / span 5; }
.fv__promise small { display: block; margin: 8px 0 0 48px; font-size: 15px; color: var(--on-night-2); }
.fv__total { margin: 0; display: flex; align-items: center; gap: 14px; font: 300 clamp(24px, 2.2vw, 32px)/1.2 var(--f-display); color: #fff; }
.fv__total svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(255, 138, 199, .16); color: var(--rose); box-shadow: 0 0 24px rgba(255, 46, 154, .35); }
.fv__act { grid-column: 6 / span 7; display: flex; align-items: center; justify-content: flex-end; gap: var(--s4); }
.fv__act .cta-proof { max-width: 26rem; }

/* ---- review beside a section CTA (home laser) ---- */
.sec-foot--proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }

/* ---- form: review under the call block ---- */
.cta-proof--book { margin-top: var(--s4); }

/* ---- reviews: an even 2 x 2 grid, cards top-aligned and the same height ---- */
.quotes { align-items: stretch; align-self: center; }
.quote:nth-child(even) { margin-top: 0; }
.reviews__grid { align-items: center; }
.reviews__head { position: static; }

/* ---- visit: address + both actions in one column, hours beside it, photos as tall as the copy ---- */
.visit__grid { align-items: stretch; }
.visit__copy { grid-column: 1 / span 6; display: flex; flex-direction: column; }
.visit__photos { grid-column: 7 / span 6; grid-template-rows: auto 1fr; align-self: stretch; }
.visit__photos .v2, .visit__photos .v3 { aspect-ratio: auto; min-height: 280px; }
.visit .lead { max-width: 30rem; }
.visit__info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; margin-top: auto; }
.visit__where .nap { margin-bottom: var(--s2); }
.visit__where .visit__facts { margin-bottom: var(--s3); }
.visit__btns { flex-direction: column; align-items: stretch; gap: 12px; }
.visit__btns .btn { --h: 56px; padding: 0 24px; font-size: 17px; justify-content: center; }
.dark .hours { max-width: none; margin: 0; }
@media (max-width: 1180px) and (min-width: 1024px) { .visit__info { grid-template-columns: 1fr; } }

/* ---- FAQ: the portrait runs the full height of the question list, so both columns end together ---- */
.faq__grid { align-items: stretch; }
.faq__head { position: static; display: flex; flex-direction: column; }
.faq__img { flex: 1 1 auto; aspect-ratio: auto; min-height: 360px; position: relative; }
.faq__img img { position: absolute; inset: 0; }
.faq__list summary { padding: 22px 0; }

/* ---- sticky phone bar: Call / Text / Request ---- */
@media (max-width: 767px) {
  .mbar { gap: 8px; }
  .mbar .btn { --h: 56px; padding: 0 10px; font-size: 17px; gap: 8px; min-width: 0; }
  .mbar .btn svg { width: 18px; height: 18px; flex: none; }
  .mbar .btn--primary { flex: 1.3; }
}

/* ---- tablet / phone layouts ---- */
@media (max-width: 1023px) {
  .fv__steps { grid-template-columns: 1fr; gap: 12px; }
  .fv__promise, .fv__act { grid-column: 1 / -1; }
  .fv__act { justify-content: flex-start; }
  .visit__copy, .visit__photos { grid-column: 1 / -1; }
  .faq__head { margin-bottom: var(--s3); }
}
@media (max-width: 767px) {
  .fv__step { padding: var(--s3); gap: var(--s2); }
  .fv__foot { margin-top: var(--s4); }
  .fv__act { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .fv__act .btn { width: 100%; }
  .fv__act .cta-proof { max-width: none; }
  .sec-foot--proof { flex-direction: column; align-items: stretch; }
  .cta-proof { max-width: none; }
  /* the hero fold keeps display + h1 + lead + 2 buttons + rating; the review sits in the strip right under it */
  .cta-proof--hero { display: none; }
  .hero__finder { margin-top: var(--s2); font-size: 15px; }
  .visit__info { grid-template-columns: 1fr; gap: var(--s3); }
  .visit__photos .v2, .visit__photos .v3 { min-height: 0; aspect-ratio: 4 / 3; }

  /* concerns: full-width photo cards, one per row (the treatment-tile treatment he liked) */
  .concerns__list { border-top: 0; display: grid; gap: 12px; }
  .concerns__list li { border: 0; }
  .concerns__list a, .concerns__list a:hover { position: relative; display: block; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 11; color: #fff; background: var(--plum); box-shadow: 0 24px 48px -32px rgba(18, 8, 14, .6), 0 0 0 1px rgba(230, 0, 126, .12); }
  .concerns__list img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: 50% 30%; }
  .concerns__list a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 8, 14, 0) 42%, rgba(18, 8, 14, .85) 100%); }
  .concerns__list b, .concerns__list span { position: absolute; z-index: 1; inset-inline: var(--s3) 64px; text-align: start; }
  .concerns__list b { bottom: 46px; font-size: 28px; color: #fff; }
  .concerns__list span { bottom: 18px; font-size: 16px; color: rgba(248, 238, 244, .86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .concerns__list .arrow { position: absolute; z-index: 1; inset-inline-end: 18px; bottom: 20px; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: rgba(18, 8, 14, .45); color: #fff; opacity: 1; }
  .concerns__list a:hover { padding-inline-start: 0; }
}
@media (max-width: 400px) {
  .concerns__list a { grid-template-columns: none; }
  .concerns__list b { font-size: 26px; }
}
@media (min-width: 1024px) { .hero { padding-top: calc(var(--hdr) + 24px); } .hero__foot { padding-top: var(--s2); } }

/* first visit sits on blush between two dark sections (dark -> blush -> dark rhythm) */
.light .fv__step { background: var(--card); border-color: var(--card-line); box-shadow: 0 0 0 1px rgba(230, 0, 126, .06), 0 30px 60px -36px rgba(230, 0, 126, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
.light .fv__step h3 { color: var(--ink); }
.light .fv__step p, .light .fv__promise small { color: var(--muted); }
.light .fv__foot { border-color: var(--line); }
.light .fv__total { color: var(--ink); }
.light .fv__total svg { background: rgba(230, 0, 126, .12); color: var(--magenta-deep); box-shadow: 0 0 24px rgba(255, 46, 154, .3); }

/* =====================================================================================================
   ROUND 7.1 (2026-10-01): hero option A (treatment close-up) on home + laser, as a film (index.html) and as the
   still (index-static.html). The photo already leaves its start side dark, so no media shift / zoom: the copy sits on
   the dark room, the handpiece-on-skin contact stays open on the end side. Phones show the top 54 % of the 9:16 crop
   with the contact below the header, then fade to the night colour under the copy.
   ===================================================================================================== */
.hero--a .hero__light.is-on { opacity: .4; }   /* a soft glow, not a haze over a real photo */
.hero--a[data-still] .motion-toggle { display: none; }
/* ROUND 7.2 (2026-10-01): "they're both cut off". The hero A film/still is now the pulled-back outpaint (whole arm, glove,
   full handpiece with headroom, contact on the shin, both lower legs, the room on the left). The media box always starts
   BELOW the fixed header, so the header never covers the handpiece; no zoom, no shift. */
.hero--a .hero__media { top: var(--hdr); inset-inline-start: 0; }
.hero--a .hero__video, .hero--a .hero__poster img { object-position: 72% 30%; transform: none; }
@media (min-width: 1024px) {
  /* desktop: the media box starts just past the display line, so "Light on skin." never sits on the handpiece:
     start = wrap edge + display width (~49vw, capped) + 30px - 0.53 x the image width at full box height (the handpiece
     top sits at 53 % of the frame). The image keeps its start edge (object-position 0) and only loses a sliver of towel on
     the end side. The heavy round-6 ::after scrim becomes a short fade from the night colour into the room, so the room
     reads; the copy keeps the .hero__shade start gradient + its own text-shadow. */
  .hero--a { --a-start: max(0px, max(var(--margin), (100vw - var(--max)) / 2) + min(49vw, 817px) + 30px - .942 * (100svh - var(--hdr))); }
  .hero--a .hero__media { inset-inline-start: var(--a-start); }
  .hero--a .hero__video, .hero--a .hero__poster img { object-position: 0% 30%; }
  .hero--a .hero__media::after { background: linear-gradient(90deg, rgba(18, 8, 14, 1) 0%, rgba(18, 8, 14, .55) 9%, rgba(18, 8, 14, .3) 26%, rgba(18, 8, 14, .08) 40%, transparent 50%); }
  .hero--a .hero__shade { background: linear-gradient(180deg, rgba(18, 8, 14, .28) 0%, rgba(18, 8, 14, 0) 16%),
              linear-gradient(90deg, rgba(18, 8, 14, .72) 0%, rgba(18, 8, 14, .4) 34%, rgba(18, 8, 14, 0) 54%),
              linear-gradient(0deg, rgba(18, 8, 14, 1) 0%, rgba(18, 8, 14, .92) 9%, rgba(18, 8, 14, .25) 26%, rgba(18, 8, 14, 0) 40%); }
}
@media (max-width: 1023px) {
  /* tablet + phone: the media is a full-width box with the film's own aspect (16:9 tablet, native 9:16 phone) directly
     under the header, so object-fit: cover crops nothing. The copy starts low on the box, over a fade to the night colour
     that only covers the lower leg / towel. */
  .hero--a { --hero-ar: .5625; --hero-copy: .72; padding-top: calc(var(--hdr) + 100vw * var(--hero-ar) * var(--hero-copy)); justify-content: flex-start; min-height: 0; }
  .hero--a .hero__media { bottom: auto; height: calc(100vw * var(--hero-ar)); background: var(--night); }
  .hero--a .hero__video, .hero--a .hero__poster img, .hero--laser.hero--a .hero__video, .hero--laser.hero--a .hero__poster img { height: 100%; object-position: 50% 50%; transform: none; }
  .hero--a .hero__shade, [dir="rtl"] .hero--a .hero__shade { top: var(--hdr); bottom: auto; height: calc(100vw * var(--hero-ar));
    background: linear-gradient(180deg, rgba(18, 8, 14, .2) 0%, rgba(18, 8, 14, 0) 10%, rgba(18, 8, 14, 0) 62%, rgba(18, 8, 14, .72) 76%, var(--night) 92%); }
}
@media (max-width: 767px) {
  .hero--a { --hero-ar: 1.7778; --hero-copy: .69; }
}

/* ROUND 7.3 (2026-10-01): Giovanni: "just do the still one, the image needs to be more to the left, like it was in the
   A-D mockup". Hero = the original still A, framed exactly as hero-options.html option A: full-bleed media box (inset 0),
   centred, no shift, no zoom; phones show the 9:16 crop in the top 54 % with the copy below. No film. */
.hero--a3 .hero__media { inset: 0; inset-inline-start: 0; }
.hero--a3 .hero__poster img { transform: none; object-position: 50% 50%; opacity: 1; }
.hero--a3 .hero__light.is-on { opacity: .4; }
.hero--a3 .motion-toggle { display: none; }
@media (min-width: 1024px) {
  .hero--a3 .hero__media { inset-inline-start: 0; }
  .hero--a3 .hero__poster img, [dir="rtl"] .hero--a3 .hero__poster img { transform: none; object-position: 50% 50%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero--a3 .hero__poster img, [dir="rtl"] .hero--a3 .hero__poster img { transform: none; object-position: 50% 50%; }
}
@media (max-width: 767px) {
  .hero--a3 .hero__media { background: var(--night); }
  .hero--a3 .hero__poster img, .hero--laser.hero--a3 .hero__poster img { height: 54%; object-position: 50% 62%; transform: none; }
  .hero--a3 .hero__shade, [dir="rtl"] .hero--a3 .hero__shade { background: linear-gradient(180deg, rgba(18, 8, 14, .35) 0%, rgba(18, 8, 14, 0) 16%, rgba(18, 8, 14, 0) 30%, rgba(18, 8, 14, .75) 44%, var(--night) 54%); }
}
/* 7.3 phones: the 9:16 photo sits in its own box right under the header (glove, full handpiece and the contact all
   visible), then fades into the night colour; the copy starts over the fade. */
@media (max-width: 767px) {
  .hero--a3 { --a3-box: calc(100vw * 1.42); padding-top: calc(var(--hdr) + var(--a3-box) * .8); justify-content: flex-start; min-height: 0; }
  .hero--a3 .hero__media { top: var(--hdr); bottom: auto; height: var(--a3-box); background: var(--night); }
  .hero--a3 .hero__poster img, .hero--laser.hero--a3 .hero__poster img { height: 100%; object-position: 50% 8%; transform: none; }
  .hero--a3 .hero__shade, [dir="rtl"] .hero--a3 .hero__shade { top: var(--hdr); bottom: auto; height: var(--a3-box);
    background: linear-gradient(180deg, rgba(18, 8, 14, 0) 0%, rgba(18, 8, 14, 0) 62%, rgba(18, 8, 14, .7) 80%, var(--night) 100%); }
}

/* ===== ROUND 7.4 (SEO + copy pass, 2026-10-01): blocks the copy needs; no layout change elsewhere ===== */
/* plain answer block at the top of "first visit" (AEO: the 40-60 word answer Google's AI / ChatGPT can lift) */
.answer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s2) var(--gutter); align-items: start;
  padding-bottom: var(--s4); margin-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.answer__q { grid-column: 1 / span 4; margin: 4px 0 0; font: 600 15px/1.35 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--magenta-light); }
.answer__text { grid-column: 5 / span 8; margin: 0; font: 400 clamp(20px, 1.6vw, 24px)/1.55 var(--f-body); color: var(--ink); max-width: 46rem; }
/* breadcrumb above the laser display line (matches the BreadcrumbList JSON-LD) */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 var(--s3); font: 500 15px/1.3 var(--f-body); color: var(--on-night-2); text-shadow: 0 1px 14px rgba(18, 8, 14, .8); }
.crumbs a { color: var(--rose); text-decoration: none; border-bottom: 1px solid rgba(255, 138, 199, .45); }
.crumbs a:hover { color: #fff; border-color: #fff; }
/* "Getting here" under the address + hours */
.visit__routes { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line-night); }
.visit__rh { margin: 0 0 6px; font: 300 clamp(24px, 2vw, 30px)/1.15 var(--f-display); color: #fff; }
.visit__rnote { margin: 0 0 var(--s2); font-size: 16px; color: var(--on-night-2); }
.visit__routes ul { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: 10px; }
.visit__routes li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px var(--s3); font-size: 17px; line-height: 1.45; }
.visit__routes li b { font-weight: 600; color: #fff; }
.visit__routes li span { color: var(--on-night-2); }
.visit__routes .link-arrow { color: var(--rose); }
/* guide links under the laser facts, prep and fear cards */
.more-links { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); }
.more-links p { margin: 0 0 var(--s2); font: 600 15px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--magenta-light); }
.more-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.more-links .link-arrow { color: var(--ink); }
.prep__more { margin: var(--s3) 0 0; }
.prep__more .link-arrow, .fear .link-arrow { color: var(--rose); }
.fear .link-arrow { margin-top: var(--s2); }
.who__more { margin: var(--s3) 0 0; color: var(--on-night-2); max-width: 36rem; }
.reviews__link2 { margin-top: var(--s2); margin-inline-start: 0; display: inline-flex; }
.reviews__head .link-arrow + .link-arrow { margin-top: var(--s3); }
@media (max-width: 1023px) {
  .answer__q, .answer__text { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .visit__routes li { grid-template-columns: 1fr; }
  .answer__text { font-size: 19px; }
}

/* =====================================================================================================
   ROUND 7.5 (2026-10-02): Giovanni: "make the Arabic switch button actually be in Arabic" + "the mobile version
   could be cleaned up quite a bit. The header image doesn't look great on mobile." Everything below overrides.
   ===================================================================================================== */
/* ---- language switch: each language in its own script. The Arabic subset of Noto Naskh only downloads on pages
   that show Arabic text (unicode-range), so English/Spanish pages fetch ~one small file for the one label. ---- */
.lang a { letter-spacing: 0; font-size: 15px; padding: 0 12px; white-space: nowrap; }
.lang a[lang="ar"], .ftr a[lang="ar"] { font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif; font-weight: 600; }
.lang a[lang="ar"] { font-size: 17px; padding-top: 3px; }
.ftr a[lang="ar"] { font-size: 19px; }
/* desktop header 1181-1439: three full names + nav + Request fit on one line (tighter nav pills, no phone) */
@media (min-width: 1181px) and (max-width: 1439px) {
  .hdr__in { gap: var(--s2); }
  .hdr__logo { width: 164px; }
  .nav > a, .nav > button { padding: 0 11px; font-size: 16px; }
  .nav > a::after { inset-inline: 11px; }
  .hdr__cta { gap: 12px; }
  .lang a { padding: 0 10px; min-width: 0; }
  .hdr__cta .btn--sm { padding: 0 20px; font-size: 16px; }
}
/* the phone number joins the bar only when all three names + nav + Request still fit inside the wrap */
@media (max-width: 1599px) { .hdr__phone { display: none; } }
.lang--drawer { display: flex; width: 100%; }
.lang--drawer a { flex: 1; height: 48px; font-size: 16px; }
.lang--drawer a[lang="ar"] { font-size: 19px; }

/* ---- every width: no lone last word in paragraphs and short headings ---- */
p, li, .lead, .h3, summary span, .quote__text { text-wrap: pretty; }
.answer__q { text-wrap: balance; }

@media (max-width: 767px) {
  /* ---- gutters + rhythm: 20 px sides (16 px under 375), one section padding ---- */
  :root { --margin: 20px; --sec: 64px; --head-gap: var(--s4); }

  /* ---- hero: still A as a rounded photo card under the header (glove, handpiece and the contact all in frame,
     nothing written on the photo), a soft pink glow behind it, the headline + both buttons right below ---- */
  .hero--a3 { --card-h: calc((100vw - 2 * var(--margin)) * .88); padding-top: calc(var(--hdr) + 12px + var(--card-h) + 28px); padding-bottom: var(--s4); justify-content: flex-start; min-height: 0;
    background: radial-gradient(90% 34% at 50% 30%, rgba(230, 0, 126, .30), rgba(230, 0, 126, 0) 70%), var(--night); }
  .hero--a3 .hero__media { top: calc(var(--hdr) + 12px); inset-inline: var(--margin); bottom: auto; height: var(--card-h); border-radius: 24px; overflow: hidden; background: var(--plum);
    box-shadow: 0 0 0 1px rgba(255, 138, 199, .25), 0 30px 70px -24px rgba(230, 0, 126, .65), 0 0 80px -16px rgba(255, 46, 154, .45); }
  .hero--a3 .hero__poster img, .hero--laser.hero--a3 .hero__poster img, [dir="rtl"] .hero--a3 .hero__poster img { height: 100%; object-position: 50% 38%; transform: none; }
  .hero--a3 .hero__shade, [dir="rtl"] .hero--a3 .hero__shade { display: none; }
  .hero--a3 .hero__display { text-shadow: none; }
  .hero--a3 .lead { margin-bottom: var(--s3); }
  .hero__finder { font-size: 16px; min-height: 44px; margin-top: var(--s2); }
  .hero__foot { margin-top: var(--s2); }
  .rating { min-height: 44px; font-size: 16px; }
  .crumbs { font-size: 16px; margin-bottom: var(--s1); }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 138, 199, .55); min-width: 44px; justify-content: center; }

  /* ---- type floor: body text 16 px+, labels (eyebrows, chips, legends) stay 14-15 ---- */
  .fv__promise small, .cta-proof figcaption, .who__quote figcaption, .quote footer, .ftr__legal, .visit__rnote { font-size: 16px; }
  .tile__body > span, .treatments .tile__body > span { font-size: 16px; }
  .fv__promise small { margin-inline-start: 48px; }

  /* ---- tap targets 44 px+ ---- */
  .link-arrow { min-height: 44px; align-items: flex-end; }
  .quote__more { min-height: 44px; font-size: 16px; }
  .nap a, .ftr address a { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr ul { gap: 0; }
  .ftr ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .reviews__head .link-arrow + .link-arrow { margin-top: var(--s1); }
  .more-links ul { gap: 0 var(--s4); }

  /* ---- concern cards: the sub-line wraps to two lines instead of running under the arrow ---- */
  .concerns__list a, .concerns__list a:hover { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 0 64px 18px var(--s3); aspect-ratio: 16 / 12; }
  [dir="rtl"] .concerns__list a, [dir="rtl"] .concerns__list a:hover { padding: 0 var(--s3) 18px 64px; }
  .concerns__list b, .concerns__list span { position: relative; z-index: 1; inset: auto; bottom: auto; align-self: stretch; text-align: start; justify-self: auto; }
  .concerns__list span { white-space: normal; overflow: visible; line-height: 1.35; }

  /* ---- laser "three questions": landscape photos, so each answer sits close to its picture ---- */
  .fear .tile--photo { aspect-ratio: 4 / 3; }
  .fear .tile--photo img { object-position: 50% 28%; }

  /* ---- FAQ: bigger tap rows, the toggle never squeezes the question ---- */
  .faq__list summary { min-height: 64px; font-size: 22px; gap: var(--s2); }
  .faq__list details p { font-size: 18px; }

  /* ---- form: big inputs, 16 px+ so iOS never zooms ---- */
  .fl input { height: 60px; font-size: 18px; }
  .consent { font-size: 16px; }
  .consent a { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .form__submit { width: 100%; }

  /* ---- footer + sticky bar: the last line clears the bar (bar height + safe area + air) ---- */
  .ftr { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .ftr__grid > div { margin-bottom: var(--s4); }
  .drawer h3, .drawer__h { font-size: 15px; }
  .drawer__links a { padding: 18px 0; font-size: 30px; }
}
@media (max-width: 374px) {
  :root { --margin: 16px; }
  .hero--a3 .hero__display { font-size: 48px; }
}

/* ROUND 7.6 (2026-10-02): Giovanni picked the full-bleed phone hero (option C, "the far right one looks best"):
   the photo fills the first screen under the header, a strong bottom fade carries the headline + one button.
   Resets the 7.5 card (option B) first. */
@media (max-width: 767px) {
  .hero--a3 { --card-h: auto; min-height: 100svh; padding-top: calc(var(--hdr) + 24px); padding-bottom: var(--s3); justify-content: flex-end; background: var(--night); }
  .hero--a3 .hero__media { top: var(--hdr); bottom: 0; inset-inline: 0; height: auto; border-radius: 0; box-shadow: none; overflow: hidden; }
  .hero--a3 .hero__poster img, .hero--laser.hero--a3 .hero__poster img { height: 100%; object-position: 50% 0%; transform: translateY(-9%); }
  .hero--a3 .hero__shade, [dir="rtl"] .hero--a3 .hero__shade { display: block; top: var(--hdr); bottom: 0; height: auto;
    background: linear-gradient(180deg, rgba(18,8,14,.25) 0%, rgba(18,8,14,0) 12%, rgba(18,8,14,0) 40%, rgba(18,8,14,.8) 56%, rgba(18,8,14,.96) 70%, var(--night) 100%); }
  .hero--a3 .lead, .hero--a3 .hero__finder, .hero--a3 .btn-row .btn--ghost { display: none; }
}

/* ===================== THEME LAYER (inc/r7.php components) ===================== */
/* Theme layer on top of the round-7 mockup CSS: the components the 53 rollout pages need (framed photo hero, text
   band hero, prose, split, compare table, link cards, consult strip...), the WordPress/test hooks, and the header
   phone kept visible from 1024 px (Giovanni 10-02). Same tokens, same 8-pt scale, logical properties. */

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
img[style*="--pos"] { object-position: var(--pos); }
picture { display: contents; }
.site-main { display: block; }

/* ---------- header: phone from 1024 px, compact language menu ---------- */
.hdr__phone { gap: 8px; }
@media (min-width: 1024px) {
  .hdr__phone { display: inline-flex !important; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .hdr__cta { margin-inline-start: auto; }
  .burger { margin-inline-start: 0; }
}
@media (min-width: 1181px) and (max-width: 1439px) {
  .hdr__phone { font-size: 15px; }
  .hdr__phone svg { width: 16px; height: 16px; }
}
@media (min-width: 1181px) and (max-width: 1279px) {
  .hdr__in { gap: 12px; }
  .hdr__logo { width: 148px; }
  .nav > a, .nav > button { padding: 0 9px; font-size: 15px; }
  .hdr__cta .btn--sm { padding: 0 16px; font-size: 15px; }
}
.langdd { position: relative; }
.langdd summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 138, 199, .32); background: rgba(18, 8, 14, .3); font: 600 14px/1 var(--f-body); color: var(--on-night); cursor: pointer; white-space: nowrap; }
.langdd summary::-webkit-details-marker { display: none; }
.langdd summary .chev { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.langdd[open] summary .chev { transform: rotate(180deg); }
.langdd .lang { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 90; flex-direction: column; gap: 2px; padding: 6px; border-radius: 16px; background: rgba(24, 10, 19, .96); min-width: 150px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); }
.langdd .lang a { justify-content: flex-start; height: 40px; }
@media (max-width: 1180px) { .langdd { display: none; } }
.ftr__langs { display: grid; gap: 0; }
.ftr__langs a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; color: var(--on-night-2); font-size: 17px; }
.ftr__langs a:hover, .ftr__langs a[aria-current="true"] { color: #fff; }

/* ---------- breadcrumbs (theme markup: nav.crumbs > ol > li) ---------- */
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; list-style: none; margin: 0; padding: 0; }
.crumbs__list li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs__list li + li::before { content: "/"; color: var(--on-night-2); opacity: .7; }
.reviewed { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s3); font-size: 15px; color: var(--on-night-2); }
.reviewed svg { width: 18px; height: 18px; color: var(--rose); }

/* ---------- hero: framed photo (treatments, concerns) + text band (guides, info, hubs) ---------- */
.hero--frame, .hero--band { min-height: 0; justify-content: flex-start; }
.hero--frame { padding: calc(var(--hdr) + 56px) 0 40px; background: radial-gradient(48% 60% at 82% 42%, rgba(230, 0, 126, .30), rgba(230, 0, 126, 0) 70%), var(--grad); }
.hero--portrait { background: radial-gradient(48% 60% at 82% 42%, rgba(255, 138, 199, .30), rgba(255, 138, 199, 0) 70%), var(--grad-rose); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.hero--frame .hero__copy { grid-column: 1 / span 7; }
.hero__frame { grid-column: 8 / span 5; position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: var(--plum);
  box-shadow: 0 0 0 1px rgba(255, 138, 199, .25), 0 40px 90px -30px rgba(230, 0, 126, .6), 0 0 120px -30px rgba(255, 46, 154, .45); }
.hero__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--frame .hero__display, .hero--band .hero__display { font-size: clamp(54px, 6.2vw, 108px); max-width: 12ch; }
.hero--band { padding: calc(var(--hdr) + 64px) 0 48px; background: radial-gradient(60% 90% at 90% 0%, rgba(230, 0, 126, .26), rgba(230, 0, 126, 0) 70%), var(--grad); }
.hero--band .hero__copy { max-width: 58rem; }
.hero--band .hero__display { max-width: 16ch; }
.hero--nodisplay .hero__h1 { font: 300 clamp(44px, 5.6vw, 92px)/1 var(--f-display); letter-spacing: -.02em; color: var(--on-night); max-width: 18ch; }
.hero--band .hero__foot, .hero--frame .hero__foot { margin-top: var(--s5); }
.hero__jump { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: var(--s4) 0 0; padding: 0; }
.hero__jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 138, 199, .4); background: rgba(255, 138, 199, .06); font: 500 16px/1 var(--f-body); text-decoration: none; color: var(--on-night); transition: background .2s, border-color .2s; }
.hero__jump a:hover { background: rgba(255, 138, 199, .16); border-color: var(--rose); }
@media (max-width: 1023px) {
  .hero--frame .hero__copy { grid-column: 1 / span 7; }
  .hero__frame { grid-column: 8 / span 5; aspect-ratio: 3 / 4; }
}
@media (max-width: 767px) {
  /* round 7.6 (Giovanni 10-02, option C): the photo fills the first screen under the header, a strong bottom fade
     carries display + H1 + one button; the lead, finder link and Call button stay off the phone hero (the sticky bar
     has Call). Page heroes with a photo follow the home/laser pattern. */
  .hero--frame { min-height: 100svh; padding: calc(var(--hdr) + 24px) 0 var(--s3); justify-content: flex-end; background: var(--night); }
  .hero--frame > .wrap.hero__in { position: static; }
  .hero--frame .hero__copy, .hero--frame .hero__foot { position: relative; z-index: 4; }
  .hero__grid { display: block; }
  .hero__frame { position: absolute; top: var(--hdr); bottom: 0; inset-inline: 0; z-index: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .hero__frame img { object-position: var(--pos, 50% 30%); }
  .hero__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,8,14,.25) 0%, rgba(18,8,14,0) 12%, rgba(18,8,14,0) 34%, rgba(18,8,14,.8) 52%, rgba(18,8,14,.96) 68%, var(--night) 100%); }
  .hero--frame .lead, .hero--frame .hero__finder, .hero--frame .btn-row .btn--ghost, .hero--frame .cta-proof--hero { display: none; }
  .hero--frame .hero__display { font-size: clamp(46px, 12.5vw, 64px); text-shadow: 0 2px 28px rgba(18, 8, 14, .7); }
  .hero--frame .hero__facts { display: none; }
  .hero--band .hero__display { font-size: clamp(46px, 12.5vw, 64px); }
  .hero--band { padding: calc(var(--hdr) + 32px) 0 var(--s4); }
  .hero--nodisplay .hero__h1 { font-size: clamp(40px, 11vw, 56px); }
  .hero--band .hero__foot, .hero--frame .hero__foot { margin-top: var(--s3); }
}

/* ---------- section shell extras ---------- */
.h2--sm { font-size: clamp(36px, 3.8vw, 60px); }
.sec-note { margin: var(--s4) 0 0; max-width: 44rem; font-size: 17px; color: var(--muted); }
.dark .sec-note { color: var(--on-night-2); }
.sec-note a, .rte a { color: var(--magenta-deep); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.dark .sec-note a, .dark .rte a { color: var(--rose); }
.rte { max-width: 44rem; font-size: 19px; line-height: 1.65; color: var(--text); }
.dark .rte { color: var(--on-night-2); }
.rte > :last-child { margin-bottom: 0; }
.rte p { margin: 0 0 var(--s2); }
.rte strong { color: var(--ink); font-weight: 600; }
.dark .rte strong { color: #fff; }
.rte ul, .rte ol { margin: 0 0 var(--s3); padding: 0; list-style: none; display: grid; gap: 10px; }
.rte li { position: relative; padding-inline-start: 26px; }
.rte ul li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); }
.dark .rte ul li::before { background: var(--rose); }
.rte ol { counter-reset: n; }
.rte ol li::before { counter-increment: n; content: counter(n); position: absolute; inset-inline-start: 0; top: 0; font: 600 15px/1.65 var(--f-body); color: var(--magenta-light); }
.rte--after { margin-top: var(--s4); }
.rte--lead p { font-size: var(--t-lead); line-height: 1.5; }
@media (max-width: 767px) { .rte { font-size: 18px; } }

/* answer (AEO) as its own section */
.answer-sec { padding-block: calc(var(--sec) * .7); }
.answer-sec .answer { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.answer__body { grid-column: 5 / span 8; }
.answer__body .answer__text { max-width: 46rem; }
.answer__updated { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
@media (max-width: 1023px) { .answer__body { grid-column: 1 / -1; } }

/* prose: sticky heading column + reading column */
.prose__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.prose__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--hdr) + 40px); }
.prose__body { grid-column: 6 / span 7; }
.prose__body > .lead { margin-bottom: var(--s3); }
@media (max-width: 1023px) { .prose__head, .prose__body { grid-column: 1 / -1; position: static; } .prose__head { margin-bottom: var(--s3); } }

/* sub-points (h3 + text) */
.points { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--gutter); }
.points li { padding-top: var(--s2); border-top: 1px solid var(--line); }
.dark .points li { border-color: var(--line-night); }
.points .h3 { font-size: clamp(22px, 1.8vw, 28px); margin-bottom: 8px; }
.dark .points .h3 { color: #fff; }
.points p { margin: 0; color: var(--muted); font-size: 17px; }
.dark .points p { color: var(--on-night-2); }
.points .link-arrow { margin-top: 12px; }
@media (max-width: 767px) { .points { grid-template-columns: 1fr; } }

/* split: photo tile + copy */
.split__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.split__photo { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.split__copy { grid-column: 7 / span 6; }
.split--rev .split__photo { grid-column: 8 / span 5; order: 2; }
.split--rev .split__copy { grid-column: 1 / span 6; order: 1; }
.split__grid--text .split__copy { grid-column: 1 / span 8; }
.split__copy .lead { margin-bottom: var(--s3); }
.split__copy .h2 { margin-bottom: var(--s3); }
.dark .split__copy .h2 { color: #fff; }
@media (max-width: 1023px) {
  .split__photo, .split__copy, .split--rev .split__photo, .split--rev .split__copy, .split__grid--text .split__copy { grid-column: 1 / -1; order: 0; }
  .split__photo { max-width: 560px; aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) { .split__photo { max-width: none; margin-inline: calc(var(--margin) * -1); border-radius: 0; } }

/* numbered text cards (fears without photos) on any surface */
.acards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acards .link-arrow { margin-top: var(--s2); color: var(--rose); }
.fears .acards { margin-bottom: 0; }
.light .acard { border-color: var(--line); }
.light .acard .h3 { color: var(--ink); }
.light .acard p { color: var(--muted); }
.light .acard em { color: var(--magenta-light); }
@media (max-width: 1180px) { .acards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .acards--2, .acards--4 { grid-template-columns: 1fr; } }

/* steps: cards variant column counts */
.hsteps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hsteps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps__head .lead { margin-top: var(--s2); }
.steps__head .rte { margin-top: var(--s3); }
@media (max-width: 767px) { .hsteps--2, .hsteps--3 { grid-template-columns: 1fr; } }

/* compare table: a frosted card, rose header row, first column sticky when it scrolls */
.ctable { overflow-x: auto; border-radius: var(--r); background: var(--card); border: 1px solid var(--card-line); box-shadow: 0 24px 60px -40px rgba(120, 20, 70, .35), inset 0 1px 0 rgba(255, 255, 255, .6); -webkit-overflow-scrolling: touch; }
.ctable table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 17px; line-height: 1.45; }
.ctable th, .ctable td { padding: 18px 20px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--text); }
.ctable thead th { font: 600 15px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--magenta-light); background: rgba(255, 138, 199, .14); }
.ctable tbody th { font-weight: 600; color: var(--ink); position: sticky; inset-inline-start: 0; background: rgba(250, 238, 243, .96); }
.ctable tbody tr:last-child th, .ctable tbody tr:last-child td { border-bottom: 0; }
.dark .ctable { background: rgba(255, 255, 255, .05); border-color: var(--line-night); box-shadow: none; }
.dark .ctable th, .dark .ctable td { color: var(--on-night-2); border-color: var(--line-night); }
.dark .ctable thead th { color: var(--rose); background: rgba(255, 138, 199, .08); }
.dark .ctable tbody th { color: #fff; background: rgba(34, 16, 27, .96); }
.compare__more, .cards__more { margin-top: var(--s5); }
.compare__more--img, .cards__more--img { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.compare__more--img > figure, .cards__more--img > figure { grid-column: 1 / span 4; aspect-ratio: 1 / 1; }
.compare__more--img > .rte, .cards__more--img > .rte { grid-column: 6 / span 7; }
@media (max-width: 1023px) { .compare__more--img > figure, .cards__more--img > figure, .compare__more--img > .rte, .cards__more--img > .rte { grid-column: 1 / -1; } .compare__more--img > figure, .cards__more--img > figure { max-width: 420px; } }
@media (max-width: 767px) { .ctable table { font-size: 16px; } .ctable th, .ctable td { padding: 14px; } }

/* link cards (cards/related without photos) */
.lcards { display: grid; gap: var(--gutter); }
.lcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lcard { position: relative; display: flex; flex-direction: column; gap: 8px; padding: var(--s4); padding-inline-end: 72px; border-radius: var(--r); text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--card-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s; }
.lcard .h3 { margin: 0; color: var(--ink); }
.lcard p { margin: 0; font-size: 17px; color: var(--muted); }
.lcard__go { position: absolute; top: var(--s4); inset-inline-end: var(--s3); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(230, 0, 126, .1); color: var(--magenta-deep); transition: background .25s, color .25s; }
.lcard__go svg { width: 18px; height: 18px; }
a.lcard:hover { transform: translateY(-3px); border-color: rgba(230, 0, 126, .35); box-shadow: 0 24px 48px -28px rgba(230, 0, 126, .45); }
a.lcard:hover .lcard__go { background: var(--magenta); color: #fff; }
.dark .lcard { background: rgba(255, 255, 255, .05); border-color: var(--line-night); box-shadow: none; color: var(--on-night-2); }
.dark .lcard .h3 { color: #fff; }
.dark .lcard p { color: var(--on-night-2); }
.dark .lcard__go { background: rgba(255, 138, 199, .14); color: var(--rose); }
@media (max-width: 1023px) { .lcards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .lcards--2, .lcards--3 { grid-template-columns: 1fr; } .lcard { padding: var(--s3); padding-inline-end: 64px; } }
/* every photo-tile grid on phones: one per row, landscape (the r7 treatments rule, applied to all tile sections) */
@media (max-width: 767px) {
  .cards .tiles--2, .cards .tiles--3, .cards .tiles--4 { grid-template-columns: 1fr; }
  .cards .tile, .cards .tile--wide { grid-column: auto; aspect-ratio: 16 / 10; }
}
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles--2 .tile { aspect-ratio: 16 / 11; }

/* facts: label/value cards, as many as fit */
.facts--auto { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.fact b a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }

/* checklist on blush (rare) + optional bold lead-in */
.checklist b { font-weight: 600; }
.prep__grid .rte { margin-top: var(--s3); }
.light .checklist { border-color: var(--line); }
.light .checklist li { color: var(--ink); border-color: var(--line); }

/* reviews: 2 or 3 cards stay even */
.quotes--2, .quotes--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reviews__head .lead a { color: var(--magenta-deep); font-weight: 600; }

/* FAQ without the portrait: the heading column stays sticky */
.faq__grid--noimg { align-items: start; }
.faq__grid--noimg .faq__head { position: sticky; top: calc(var(--hdr) + 40px); display: block; }
.faq__a p { margin: 0 0 24px; max-width: 40rem; color: var(--muted); padding-inline-end: 72px; }
@media (max-width: 1023px) { .faq__grid--noimg .faq__head { position: static; } }
@media (max-width: 767px) { .faq__a p { padding-inline-end: 0; font-size: 18px; } }

/* consult strip: one line + Request + Call + a review */
.cstrip { padding-block: calc(var(--sec) * .62); }
.cstrip__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3) var(--gutter); align-items: center; }
.cstrip__copy { grid-column: 1 / span 5; }
.cstrip__act { grid-column: 7 / span 6; display: grid; gap: var(--s3); justify-items: start; }
.cstrip__h { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--s2); font: 300 clamp(26px, 2.4vw, 36px)/1.15 var(--f-display); color: #fff; }
.cstrip__h svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(255, 138, 199, .16); color: var(--rose); box-shadow: 0 0 24px rgba(255, 46, 154, .35); }
.cstrip__line { margin: 0; color: var(--on-night-2); max-width: 32rem; }
.cstrip__line a { color: var(--rose); }
@media (max-width: 1023px) { .cstrip__copy, .cstrip__act { grid-column: 1 / -1; } }
@media (max-width: 767px) { .cstrip__act .btn-row { width: 100%; } }

/* who: copy column (body paragraphs) */
.who .rte--lead { max-width: 34rem; }
.who .rte p:first-child { color: var(--on-night); }

/* request form: radio chips, message field, status line, honeypot */
.chip input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.chip picture, .chip img { position: absolute; inset: 0; width: 100%; height: 100%; }
.chip img { object-fit: cover; }
.fl textarea { width: 100%; min-height: 96px; padding: 28px 20px 10px; border-radius: 14px; border: 1px solid rgba(255, 138, 199, .28); background: rgba(255, 255, 255, .06); color: var(--on-night); font: 400 18px/1.4 var(--f-body); resize: vertical; transition: border-color .25s, background .25s; }
.fl textarea:focus { outline: none; background: rgba(255, 255, 255, .1); border-color: var(--magenta-hi); box-shadow: 0 0 0 3px rgba(255, 46, 154, .2); }
.fl textarea:focus + label, .fl textarea:not(:placeholder-shown) + label { top: 9px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.consent label { cursor: pointer; }
.consent label a { color: var(--on-night); }
.field--hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: var(--s2) 0 0; padding: 14px 20px; border-radius: 12px; font-size: 17px; background: rgba(255, 138, 199, .14); border: 1px solid var(--line-night); color: #fff; }
.form-status[hidden] { display: none; }
.form-status.is-error { background: rgba(255, 46, 154, .16); border-color: var(--magenta-hi); }
.form-status a { color: #fff; font-weight: 600; }
.form.is-sent .fieldset, .form.is-sent .consent, .form.is-sent .form__submit, .form.is-sent .form__note, .form.is-sent .form__prog { display: none; }
.form__submit[disabled] { opacity: .7; cursor: progress; }
.book__film picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; object-position: 70% 50%; }

/* footer: the r7 grid columns for any child element (the treatments column is a <nav>) */
.ftr .ftr__h { font: 600 15px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--rose); margin: 0 0 20px; }
.ftr__grid > :nth-child(1) { grid-column: 1 / span 4; }
.ftr__grid > :nth-child(2) { grid-column: 5 / span 3; }
.ftr__grid > :nth-child(3) { grid-column: 8 / span 2; }
.ftr__grid > :nth-child(4) { grid-column: 10 / span 3; }
@media (max-width: 1023px) { .ftr__grid > * { grid-column: 1 / -1 !important; margin-bottom: var(--s3); } }
.drawer__links { margin-top: var(--s4); }

/* plain WordPress views (404, search, posts): a night band + a blush reading area */
.page-head { padding: calc(var(--hdr) + 64px) 0 48px; background: var(--grad); color: var(--on-night); }
.page-head__title { font: 300 clamp(44px, 5.6vw, 92px)/1 var(--f-display); margin: 0; }
.content-area, .page-content { background: var(--blush-1); color: var(--text); padding-block: var(--sec); }
.container { width: 100%; max-width: calc(var(--max) + var(--margin) * 2); margin-inline: auto; padding-inline: var(--margin); }
.content-area a, .page-content a { color: var(--magenta-deep); }

/* ---------- Giovanni 10-02: keyword H1 is the big display line, the human line sits under it ---------- */
h1.hero__display { color: var(--on-night); margin-bottom: var(--s3); }
.hero__display--xl { max-width: 11ch; }
.hero__display--l { font-size: clamp(56px, 6.6vw, 112px); max-width: 13ch; }
.hero__display--m { font-size: clamp(48px, 5.4vw, 92px); max-width: 15ch; }
.hero__display--s { font-size: clamp(42px, 4.6vw, 76px); max-width: 18ch; }
.hero--frame h1.hero__display--l, .hero--band h1.hero__display--l { font-size: clamp(52px, 5.6vw, 96px); }
.hero--frame h1.hero__display--m, .hero--band h1.hero__display--m { font-size: clamp(44px, 4.6vw, 80px); }
.hero--frame h1.hero__display--s, .hero--band h1.hero__display--s { font-size: clamp(40px, 4vw, 68px); }
.hero__tag { margin: 0 0 var(--s3); font: 400 clamp(22px, 2.2vw, 32px)/1.2 var(--f-display); letter-spacing: -.01em; color: var(--blush); max-width: 640px; text-shadow: 0 1px 18px rgba(18, 8, 14, .6); }
@media (max-width: 767px) {
  h1.hero__display, .hero--laser h1.hero__display, .hero--frame h1.hero__display, .hero--band h1.hero__display { font-size: clamp(38px, 10.6vw, 50px); max-width: none; margin-bottom: var(--s2); }
  h1.hero__display--xl { font-size: clamp(44px, 12vw, 60px) !important; }
  .hero__tag { font-size: 21px; margin-bottom: var(--s2); }
}

/* ---------- Giovanni 10-02: the phone bar is pinned from the first screen; content never sits under it ---------- */
@media (max-width: 767px) {
  .mbar, .mbar.is-on { transform: none; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .ftr { padding-bottom: var(--s5); }
  .drawer { padding-bottom: 48px; }
}

/* ---------- Giovanni 10-02: the language pill sits next to Menu on phones and tablets ---------- */
@media (max-width: 1180px) {
  .langdd { display: block; }
  .hdr__cta { gap: 10px; }
}
@media (max-width: 767px) {
  .langdd summary { height: 44px; padding: 0 12px; font-size: 14px; }
  .burger { height: 44px; padding: 0 12px; }
}
@media (max-width: 400px) {
  .hdr__logo { width: 118px; }
  .burger__txt { font-size: 15px; }
  .langdd summary { padding: 0 10px; }
}

/* ---------- fears: the cost card is a text panel the size of a photo tile, not a filler picture ---------- */
.fear__panel { aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s4); border-radius: var(--r); background: radial-gradient(90% 70% at 100% 0%, rgba(230, 0, 126, .22), rgba(230, 0, 126, 0) 70%), rgba(255, 255, 255, .05); border: 1px solid var(--line-night); }
.fear__panel .h3 { color: #fff; }
.fear__panel p { color: var(--on-night-2); }
.fear__panel .link-arrow { margin-top: var(--s2); color: var(--rose); }
@media (max-width: 767px) { .fear__panel { aspect-ratio: auto; padding: var(--s3); } }

/* ---------- hair restoration pages for men (config 'tone' => 'men'): cooler night, less pink ---------- */
.tone-men { --grad: radial-gradient(120% 80% at 80% 10%, #3a2233 0%, #1d1219 45%, #0f0a0d 100%); --grad-rose: radial-gradient(120% 80% at 80% 10%, #4a2a3e 0%, #2a1823 48%, #160d13 100%);
  --rose: #e7a6c6; --blush: #e9d6df; --blush-1: #eee8eb; --blush-2: #e4dbe0; --magenta-light: #8a1150;
  --glow-light: radial-gradient(70% 60% at 100% 0%, rgba(150, 120, 140, .25) 0%, rgba(150, 120, 140, 0) 60%); --glow-light-2: radial-gradient(70% 60% at 100% 100%, rgba(150, 120, 140, .25) 0%, rgba(150, 120, 140, 0) 60%); }
.tone-men .hero--frame, .tone-men .hero--portrait { background: radial-gradient(48% 60% at 82% 42%, rgba(160, 120, 145, .22), rgba(160, 120, 145, 0) 70%), var(--grad); }

.hours td, .ftr__hours li span:last-child { white-space: nowrap; }
.ftr__langs a { width: max-content; }
.quotes--3 .quote:last-child { grid-column: 1 / -1; }
.quotes--1 { grid-template-columns: 1fr; }
.tone-men .hero__frame { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 90px -30px rgba(0, 0, 0, .75), 0 0 120px -40px rgba(160, 120, 145, .35); }
.tone-men .tile, .tone-men .lcard { box-shadow: 0 24px 48px -32px rgba(0, 0, 0, .55); }

/* ---------- Giovanni 10-02: Español · العربية always visible in the header (home + laser), no dropdown ---------- */
.langdd { display: none !important; }
.hdr__cta .langpill { display: inline-flex !important; align-items: center; gap: 0; padding: 3px; flex: none; }
.langpill a { height: 34px; min-width: 0; padding: 0 12px; font-size: 15px; color: var(--on-night); }
.langpill a + a { position: relative; }
.langpill a + a::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px; background: rgba(255, 138, 199, .4); }
.langpill a[lang="ar"] { font-family: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; font-size: 17px; font-weight: 600; padding-top: 2px; }
@media (min-width: 1181px) and (max-width: 1439px) { .hdr__in { gap: 12px; } .nav > a, .nav > button { padding: 0 9px; font-size: 15px; } .hdr__logo { width: 150px; } .hdr__cta { gap: 10px; } .hdr__cta .btn--sm { padding: 0 16px; font-size: 15px; } .langpill a { padding: 0 9px; font-size: 14px; } }
@media (min-width: 1181px) and (max-width: 1279px) { .hdr__logo { width: 132px; } .hdr__phone span { font-size: 14px; } }
@media (max-width: 1180px) { .hdr__cta { margin-inline-start: auto; } .burger { margin-inline-start: 8px; } }
@media (max-width: 767px) { .langpill a { height: 36px; padding: 0 9px; font-size: 14px; } .langpill a[lang="ar"] { font-size: 16px; } .hdr__in { gap: 8px; } .burger { padding: 0 11px; } }
@media (max-width: 400px) { .hdr__logo { width: 104px; } .langpill a { padding: 0 7px; font-size: 13px; } .langpill a[lang="ar"] { font-size: 15px; } .burger { padding: 0 10px; gap: 7px; } .burger__txt { font-size: 14px; } }

/* ---------- Giovanni 10-03: the three-question cards (01 / 02 / 03 The cost) without photos ----------
   Equal-height panels in one row: number, title, text, link pinned to the bottom edge; one card style for all
   three so none reads as a stand-in for a missing photo. Phones: a tight stack, no dead space. */
.acards--panels { align-items: stretch; gap: var(--s3); margin-bottom: 0; }
.acards--panels .acard { display: flex; flex-direction: column; padding: var(--s4); border: 1px solid var(--line-night); border-radius: var(--r, 16px);
  background: radial-gradient(90% 70% at 100% 0%, rgba(230, 0, 126, .16), rgba(230, 0, 126, 0) 70%), rgba(255, 255, 255, .045); }
.acards--panels .acard em { margin-bottom: var(--s2); }
.acards--panels .acard .h3 { margin-bottom: var(--s2); }
.acards--panels .acard p { max-width: none; }
.acards--panels .acard .link-arrow { margin-top: auto; padding-top: var(--s3); align-self: flex-start; }
.light .acards--panels .acard { border-color: var(--line); background: radial-gradient(90% 70% at 100% 0%, rgba(230, 0, 126, .08), rgba(230, 0, 126, 0) 70%), rgba(255, 255, 255, .5); }
.block-flagship .acards--panels { margin-bottom: var(--s5); }
@media (max-width: 767px) {
  .acards--panels { gap: var(--s2); }
  .acards--panels .acard { padding: var(--s3); }
  .acards--panels .acard .link-arrow { padding-top: var(--s2); }
}
/* Giovanni 10-03: Request links land on the form (ui.js, < 1024 px); keep it clear of the fixed header */
#request .form { scroll-margin-top: calc(var(--hdr) + 12px); }

/* ---------- the approved logo (Giovanni 10-03): 56 px tall in the desktop header, scaled down with the bar ----------
   Header: the animated SVG (assets/img/logo-header.svg, plays once, replays on hover, static with reduced motion).
   Drawer + footer: the same drawing, static (<use href="#mft-static">). Width/height fixed: no layout shift. */
.hdr__logo { width: auto; }
.hdr__logo svg, .mft-logo-s { display: block; overflow: visible; }
.hdr__logo .mft-logo { width: 140px; height: 56px; }
.drawer__top .hdr__logo { width: auto; }
.drawer__top .mft-logo-s { width: 110px; height: 44px; }
.ftr__logo { width: 160px; height: 64px; }
@media (min-width: 1181px) and (max-width: 1279px) { .hdr__logo .mft-logo { width: 125px; height: 50px; } }
@media (max-width: 767px) { .hdr__logo .mft-logo { width: 120px; height: 48px; } }
@media (max-width: 400px) { .hdr__logo .mft-logo { width: 105px; height: 42px; } }
@media (min-width: 375px) and (max-width: 400px) { .hdr__logo .mft-logo { width: 115px; height: 46px; } }
/* Giovanni 10-03: review cards show the whole highlight (they are hand-trimmed, verbatim); no 6-line clamp */
.quote p { display: block; -webkit-line-clamp: unset; overflow: visible; }