/*
 * NeuSkin Clinic — base + component styles (dark editorial reskin).
 * Faithful port of the "NeuSkin Clinic (standalone)" design. English / LTR.
 * Google Sans Flex for all English type. See tokens.css.
 */

/* ============================ base ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: #3a2f33; }
::-webkit-scrollbar-thumb:hover { background: #5a4a4f; }

h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; }
/* white rim on display headings so they hold up over photos/video and dark grounds */
h1, h2 { -webkit-text-stroke: 1px rgba(255,255,255,.9); }
/* h3/h4 use the text serif: sturdier strokes at small sizes,
   so no white-rim compensation is needed */
h3, h4 { font-family: var(--serif-text); font-weight: 500; margin: 0; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 820px; }

/* ===== expanding panel gallery (Seline-style): images side by side; the
   active panel is wide with its copy shown and image zoomed in; hovering a
   neighbour hands the expansion (and the zoom) over to it ===== */
.ns-expand { display: flex; gap: 14px; height: clamp(380px, 44vw, 540px); }
.ns-panel { position: relative; overflow: hidden; flex: 1 1 0; background: var(--card); transition: flex-grow .8s var(--ease-soft); }
.ns-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-soft); transform: scale(1); }
.ns-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,33,38,.85), rgba(43,33,38,.32) 52%, rgba(43,33,38,.08)); }
.ns-panel-copy { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: clamp(22px, 2.6vw, 38px); }
/* .ns-expand prefix keeps these light-on-scrim colors ahead of the
   .section--light ink rules that appear later in the file */
.ns-expand .ns-panel-copy .num { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: #DCC6C9; }
.ns-expand .ns-panel-copy h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.22; margin: 14px 0 0; color: #F7F1EC; -webkit-text-stroke: 0; text-wrap: balance; }
.ns-expand .ns-panel-copy p { color: #EBE0DC; line-height: 1.8; margin: 14px 0 0; max-width: 46ch; opacity: 0; transition: opacity .45s var(--ease-soft); }
/* resting state: the first panel holds the expansion */
.ns-panel:first-child { flex-grow: 2.4; }
.ns-panel:first-child img { transform: scale(1.08); }
.ns-panel:first-child p { opacity: 1; transition-delay: .25s; }
/* hovering the group hands expansion + zoom to the hovered panel */
.ns-expand:hover .ns-panel { flex-grow: 1; }
.ns-expand:hover .ns-panel img { transform: scale(1); }
.ns-expand:hover .ns-panel p { opacity: 0; transition-delay: 0s; }
.ns-expand .ns-panel:hover { flex-grow: 2.4; }
.ns-expand .ns-panel:hover img { transform: scale(1.08); }
.ns-expand .ns-panel:hover p { opacity: 1; transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .ns-panel, .ns-panel img, .ns-panel p { transition: none; } }
@media (max-width: 760px) {
  .ns-expand { flex-direction: column; height: auto; }
  .ns-panel { min-height: 230px; }
  .ns-expand .ns-panel p, .ns-expand:hover .ns-panel p { opacity: 1; }
  .ns-panel-copy h3 { white-space: normal; }
}

/* ========== slide carousel (Seline-style "Our history" glide) ==========
   One item per full-width slide; the track translates sideways. Direction-
   aware transform is set by carousel_controller.js. */
.ns-carousel-window { overflow: hidden; }
.ns-carousel-track { display: flex; transition: transform .75s var(--ease-soft); }
.ns-slide { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: 42% 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.ns-slide-media { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--card); }
.ns-slide-media img { width: 100%; height: 100%; object-fit: cover; }
.ns-slide-copy .num { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.ns-slide-copy h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin: 18px 0 16px; color: var(--text-bright); }
.ns-slide-copy p { color: var(--text-muted); line-height: 1.85; margin: 0; max-width: 52ch; }
.ns-carousel-nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: clamp(26px, 3vw, 40px); }
.ns-carousel-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--text-muted); cursor: pointer; transition: color .3s, border-color .3s; }
.ns-carousel-arrow:hover { color: var(--text-bright); border-color: var(--accent); }
[dir="rtl"] .ns-carousel-arrow svg { transform: scaleX(-1); }
.ns-carousel-dots { display: flex; gap: 10px; }
.ns-carousel-dot { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; background: var(--line-strong); cursor: pointer; transition: background .3s, transform .3s; }
.ns-carousel-dot.is-active { background: var(--accent); transform: scale(1.35); }
@media (max-width: 760px) {
  .ns-slide { grid-template-columns: 1fr; gap: 22px; }
  .ns-slide-media { aspect-ratio: 16/10; }
}

/* ============== decorative ornaments (shared/_orn partial) ==============
   Mauve line art in section whitespace. .orn-host creates the stacking
   context; the negative z-index tucks the ornament above the section's own
   background but beneath every piece of content. */
.orn-host { position: relative; z-index: 0; }
.orn { position: absolute; z-index: -1; pointer-events: none; color: var(--accent); opacity: .13; width: 320px; height: 320px; }
.orn--tr { top: clamp(20px, 4vw, 60px); inset-inline-end: clamp(16px, 4vw, 70px); }
.orn--tl { top: clamp(20px, 4vw, 60px); inset-inline-start: clamp(16px, 4vw, 70px); }
.orn--br { bottom: clamp(20px, 4vw, 60px); inset-inline-end: clamp(16px, 4vw, 70px); }
.orn--bl { bottom: clamp(20px, 4vw, 60px); inset-inline-start: clamp(16px, 4vw, 70px); }
.orn--halo { top: -30px; left: 50%; transform: translateX(-50%); }
.orn-spin { animation: ns-spin 140s linear infinite; }
@media (prefers-reduced-motion: reduce) { .orn-spin { animation: none; } }
html[data-theme="light"] .orn { opacity: .17; }
@media (max-width: 720px) { .orn { width: 190px; height: 190px; opacity: .09; } }

/* ============================ keyframes ============================ */
@keyframes ns-floaty { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(9px); opacity: 1; } }
@keyframes ns-spin { to { transform: rotate(360deg); } }
@keyframes ns-glow { 0%,100% { opacity: .4; transform: scale(.9); } 50% { opacity: .85; transform: scale(1.05); } }
/* slow Ken-Burns drift on hero / gallery imagery (design ns-kb / ns-kb2) */
@keyframes ns-kb  { 0% { transform: scale(1.02) translate(0,0); } 100% { transform: scale(1.16) translate(-1.5%,-1.5%); } }
@keyframes ns-kb2 { 0% { transform: scale(1.14) translate(1.5%,1%); } 100% { transform: scale(1.02) translate(0,0); } }
@keyframes ns-intro-mark { 0% { opacity: 0; transform: translateY(18px) scale(.86); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ns-intro-line { 0% { width: 0; opacity: 0; } 100% { width: 170px; opacity: 1; } }

/* ============================ eyebrow / label ============================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--accent); }
.eyebrow.no-rule::before { display: none; }
.eyebrow.center { justify-content: center; }
.label { font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }

/* ============================ buttons + links ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  padding: 17px 34px; border: 1px solid var(--btn-bg);
  background: var(--btn-bg); color: var(--btn-ink);
  cursor: pointer; transition: background .3s var(--ease-soft), color .3s, border-color .3s;
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.arrowlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent-rose);
  transition: color .3s, gap .3s;
}
.arrowlink:hover { color: var(--text-bright); gap: 16px; }

.wa-link { display: inline-flex; align-items: center; gap: 11px; color: var(--text-muted); font-family: var(--sans); font-size: 13px; letter-spacing: .04em; transition: color .3s; }
.wa-link:hover { color: var(--text-soft); }
.wa-link svg { flex: none; }

/* ============================ header ============================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px clamp(20px, 5vw, 56px);
  /* slight tint even before scroll so links read over the hero video */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .5s var(--ease-soft), padding .4s var(--ease-soft), border-color .5s;
  border-bottom: 1px solid transparent;
}
.site-header.solid {
  background: rgba(20, 16, 17, .82);
  backdrop-filter: blur(14px);
  padding: 15px clamp(20px, 5vw, 56px);
  border-bottom-color: var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.brand-logo { height: 42px; width: auto; transition: height .4s var(--ease-soft); }
.site-header.solid .brand-logo { height: 34px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-family: var(--serif); font-size: 21px; letter-spacing: .02em; color: var(--text-bright); }
.brand-sub { font-family: var(--sans); font-size: 8.5px; letter-spacing: .42em; color: var(--accent-dusty); text-transform: uppercase; }

.site-nav { display: flex; gap: 38px; align-items: center; }
.site-nav a { font-family: var(--sans); font-size: 12.5px; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); transition: color .3s; }
.site-nav a:hover { color: var(--text-bright); }

.header-actions { display: flex; gap: 18px; align-items: center; }
.locale-switch {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: 19px; color: var(--text-muted);
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .12em;
  transition: color .3s, border-color .3s, background .3s;
}
.locale-switch:hover { color: var(--text-bright); border-color: var(--accent); background: rgba(159, 132, 136, .15); }
.locale-switch svg { flex: none; opacity: .8; }
.locale-switch .ar { letter-spacing: 0; font-size: 13px; line-height: 1; }
.wa-icon {
  display: flex; width: 38px; height: 38px; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line); color: var(--whatsapp);
  transition: border-color .3s, background .3s;
}
.wa-icon:hover { border-color: var(--accent); background: rgba(159, 132, 136, .15); }
.btn-inquire {
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  padding: 10px 22px; border: 1px solid var(--line-strong); color: var(--text); cursor: pointer;
  transition: background .3s, border-color .3s, color .3s;
}
.btn-inquire:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 880px) { .site-nav { display: none; } }

/* ============================ sections ============================ */
.section { padding: 50px; }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }
.section--surface { background: var(--surface); }
/* light contrast band (design uses #f4efea / dark ink for "what it is not") */
.section--light { background: #f4efea; color: #2a2224; }
.section--light .eyebrow { color: #8a6e72; }
.section--light .eyebrow::before { background: #8a6e72; }
.section--light h2, .section--light h3,
.section--light .sec-head h2, .section--light .sec-head h3 { color: #2a2224; }
/* dark ink on cream needs no white rim — it inverts the contrast and blurs the type */
.section--light h1, .section--light h2, .section--light h3, .section--light h4 { -webkit-text-stroke: 0; }
.section--light .em, .section--light .sec-head .em { color: #8a6e72; }
.section--light .exclude li { color: #5c4f52; border-block-end-color: rgba(42,34,36,.14); }
.section--light .exclude li::before { color: #8a6e72; }
.section--light .lead, .section--light p,
.section--light .sec-head .lead, .section--light .sec-head p { color: #5c4f52; }
/* child components on the cream band (design: rose headings var(--accent), ink body #5a4d4f) */
.section--light .cols { background: rgba(42,34,36,.14); border-block-color: rgba(42,34,36,.14); }
.section--light .col { background: #f4efea; }
.section--light .col .num { color: var(--accent); }
.section--light .col h3 { color: #2a2224; }
.section--light .col p { color: #5a4d4f; }
.section--light .feature .num { color: var(--accent); }
.section--light .feature h3 { color: #2a2224; }
.section--light .feature p { color: #5a4d4f; }
.section--light .tier { background: #efe7e1; border-color: rgba(42,34,36,.14); }
.section--light .tier .badge { color: var(--accent); }
.section--light .tier h3 { color: #2a2224; }
.section--light .tier .line { color: #8a6e72; }
.section--light .tier p { color: #5a4d4f; }
.section--light .arrowlink { color: #8a6e72; }
.section--light .arrowlink:hover { color: #2a2224; }
.section--light a:not(.btn) { color: #8a6e72; }
.section--light .note, .section--light .by { color: #7a6d6f; }
/* testimonials on the cream band */
.section--light .quote .mark { color: var(--accent); }
.section--light .quote p { color: #4a3f41; }
.section--light .quote .by { color: #8a6e72; }
/* founder split-media caption + signature on cream */
.section--light .split-text .sign { color: #8a6e72; }
.section--light .split-media .cap .nm { color: var(--text); }
.section--light .split-media .cap .rl { color: var(--accent-rose); }
.section-inner { max-width: var(--maxw); margin-inline: auto; }

.sec-head { margin-block-end: var(--space-block); }
.sec-head.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.sec-head .eyebrow { margin-block-end: 22px; }
.sec-head h2 {
  font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 400; line-height: 1.12;
  letter-spacing: -.01em; color: var(--text-bright); max-width: 18ch;
}
.sec-head.center h2 { max-width: 22ch; }
.sec-head .em { font-style: italic; color: var(--accent-soft); }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }

.lead { font-size: clamp(15px, 1.15vw, 18px); font-weight: 400; line-height: 1.7; color: var(--text-muted); max-width: 56ch; }
.body-copy { color: var(--text-muted); font-weight: 400; line-height: 1.8; }
.body-copy p { margin: 0 0 1.2em; }
.body-copy p:last-child { margin-bottom: 0; }
.sign { font-family: var(--serif); font-style: italic; color: var(--accent-soft); }

/* ============================ hero (full-bleed overlay) ============================ */
/* Copy sits over the photo/video, so its colors are fixed creams — the same in
   both themes; theme tokens would flip the type dark over the same bright media. */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--card-2); }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media-img,
.hero-media-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-copy { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; width: min(100%, 1120px); padding: 150px clamp(22px, 5vw, 60px) 90px; }
.hero-copy .eyebrow { margin-block-end: 34px; color: #fff; }
.hero h1 { font-weight: 400; font-size: clamp(48px, 7.2vw, 104px); line-height: 1.06; letter-spacing: .002em; color: #fff; }
.hero h1 .ln { display: block; }
.hero-sub { margin: 36px 0 0; font-weight: 400; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.75; color: #fff; max-width: 64ch; }
.hero-cta { margin-block-start: 46px; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
/* Figma CTA pair: lowercase letterspaced — solid cream + outlined glass */
.hero .btn { background: #efe3da; border-color: #efe3da; color: #241c1e; padding: 18px 46px; font-size: 12px; letter-spacing: .16em; text-transform: lowercase; }
.hero .btn:hover { background: #fff; border-color: #fff; }
.hero .btn--ghost { background: rgba(20,16,17,.1); border-color: rgba(255,255,255,.55); color: #fff; gap: 11px; padding-inline: 34px; }
.hero .btn--ghost:hover { background: rgba(20,16,17,.28); border-color: #fff; color: #fff; }
.hero .btn--ghost svg { flex: none; }
@media (max-width: 880px) {
  .hero-copy { padding-top: 130px; }
  .hero h1 { font-size: clamp(40px, 10.5vw, 64px); }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero .btn, .hero .btn--ghost { width: min(100%, 360px); }
}

/* centered hero for interior pages */
.page-hero { position: relative; padding: 180px var(--gutter) clamp(60px, 8vw, 110px); max-width: var(--maxw); margin-inline: auto; }
/* faint top glow behind interior heroes, matching the design */
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 18%, rgba(159,132,136,.1), transparent 70%); }
.page-hero > * { position: relative; z-index: 1; }
/* atmospheric hero: a photo bleeds through under a radial glow (Private Care) */
.page-hero.has-bg { position: relative; max-width: none; padding-block: 120px clamp(48px, 7vh, 80px); padding-inline: var(--gutter); overflow: hidden; min-height: var(--hero-h); display: flex; flex-direction: column; justify-content: flex-end; }
.page-hero.has-bg > * { position: relative; z-index: 1; }
.page-hero.has-bg::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--hero-bg); background-size: cover; background-position: center; }
/* photo shows at full strength — no dimming filter; copy is pinned white in both themes */
.page-hero.has-bg::after { content: none; }
/* hub heroes (protocols, treatments): copy pinned to the page's left edge,
   matching the clinic hero — not floated in a centered container */
.page-hero.has-bg .section-inner { max-width: 1040px; margin-inline: 0; }
.page-hero.has-bg.center-inner { max-width: var(--maxw); margin-inline: auto; }
.page-hero.has-bg .eyebrow { color: #fff; }
.page-hero.has-bg .eyebrow::before { background: #fff; }
.page-hero.has-bg h1, .page-hero.has-bg h1 .em { color: #fff; }
.page-hero.has-bg .lead { color: #fff; }
.page-hero.has-bg .mm-hero-sub, .page-hero.has-bg .mm-hero-main { color: #fff; }
.page-hero .eyebrow { margin-block-end: 30px; }
.page-hero h1 { font-weight: 300; font-size: clamp(2.4rem, 5.2vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; color: var(--text-bright); max-width: 18ch; }
.page-hero h1 .em { font-style: italic; color: var(--accent-soft); }
.page-hero .lead { margin-block-start: 34px; }

/* split hero with image for detail pages */
.split-hero { display: grid; grid-template-columns: .9fr 1.1fr; min-height: var(--hero-h); }
/* ============================ landscape overlay hero ============================ */
.over-hero { position: relative; min-height: var(--hero-h); display: flex; align-items: flex-end; overflow: hidden; background: var(--card-2); }
.over-hero-media { position: absolute; inset: 0; z-index: 0; }
.over-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
/* darken for legible overlaid text: bottom-weighted + soft left gradient */
.over-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,16,17,.28) 0%, rgba(20,16,17,0) 32%, rgba(20,16,17,.55) 72%, rgba(20,16,17,.86) 100%),
    linear-gradient(90deg, rgba(20,16,17,.6) 0%, rgba(20,16,17,.12) 46%, rgba(20,16,17,0) 72%);
}
[dir="rtl"] .over-hero::after {
  background:
    linear-gradient(180deg, rgba(20,16,17,.28) 0%, rgba(20,16,17,0) 32%, rgba(20,16,17,.55) 72%, rgba(20,16,17,.86) 100%),
    linear-gradient(270deg, rgba(20,16,17,.6) 0%, rgba(20,16,17,.12) 46%, rgba(20,16,17,0) 72%);
}
.over-hero-copy { position: relative; z-index: 2; width: 100%; max-width: 760px; padding: 0 clamp(28px, 8vw, 120px) clamp(52px, 8vh, 92px); }
.over-hero-eyebrow { display: flex; align-items: center; gap: 18px; margin-block-end: clamp(20px, 3vh, 34px); }
.over-hero-eyebrow .rule { width: 40px; height: 1px; background: var(--accent-dusty); }
.over-hero-copy h1 {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(52px, 6.8vw, 122px); line-height: .88; letter-spacing: -.022em;
  color: var(--text-bright);
}
.over-hero-copy h1 .line { display: block; overflow: hidden; padding-block-end: .02em; }
.over-hero-copy h1 .line.em { font-style: italic; font-weight: 400; color: var(--accent-soft); margin-block-start: .04em; padding-block-end: .06em; }
.over-hero-lead { margin: clamp(28px, 4vh, 42px) 0 0; font-weight: 400; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.78; color: #fff; max-width: 440px; }
.over-hero .date-ask { margin-block-start: clamp(28px, 4vh, 42px); }
@media (max-width: 880px) {
  .over-hero { min-height: var(--hero-h); }
  .over-hero-media img { object-position: center 30%; }
  .over-hero-copy { max-width: 100%; }
}

/* ==================== Dr. Maysa — 1:1 port of design §isMaysa ==================== */
/* hero: full-bleed portrait, quote overlaid at bottom */
.over-hero--maysa { min-height: var(--hero-h); }
.over-hero--maysa .over-hero-media img { object-position: center 25%; }
.over-hero-copy--wide { max-width: 1040px; }
.over-hero-copy .mysa-hero-eyebrow { font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: #cda9a6; margin-bottom: 26px; }
.over-hero-copy h1.mysa-hero-quote {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(34px, 5vw, 72px); line-height: 1.08; letter-spacing: normal;
  font-style: normal; color: var(--text-bright); max-width: 1000px;
}
.over-hero-copy .mysa-hero-sign { margin-top: 26px; font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--accent-pink); }

/* ==================== The Clinic hero — 1:1 port of design §isClinic ==================== */
.over-hero--clinic { min-height: var(--hero-h); }
.over-hero--outcome { min-height: var(--hero-h); }
.over-hero-copy .clinic-hero-eyebrow { font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: #cda9a6; margin-bottom: 26px; }
.over-hero-copy h1.clinic-hero-title {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 4.4vw, 58px); line-height: 1.18; letter-spacing: normal;
  font-style: normal; color: var(--text-bright); max-width: 980px;
}
.over-hero-copy h1.clinic-hero-title .em { font-style: italic; font-weight: 300; color: var(--accent-pink); }
/* hero copy sits on photography in both themes — pinned white */
.over-hero-copy h1,
.over-hero-copy h1.clinic-hero-title,
.over-hero-copy h1.mysa-hero-quote,
.over-hero-copy .mysa-hero-eyebrow,
.over-hero-copy .mysa-hero-sign,
.over-hero-copy h1 .line.em,
.over-hero-copy h1.clinic-hero-title .em,
.over-hero-copy .clinic-hero-eyebrow,
.over-hero-eyebrow .eyebrow { color: #fff; }
.over-hero-eyebrow .rule { background: #fff; }

/* credentials thin band under the hero */
.creds-band { background: rgba(13,10,11,0.7); padding: 46px 8vw; border-bottom: 1px solid var(--line-soft); }
.creds-row { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; align-items: center; }
.creds-row div { font-size: 13px; letter-spacing: .04em; color: var(--text-muted); }

/* Maysa Method light band: centered columns, 48px serif numbers, rose button */
.mysa-method .mysa-method-eyebrow { font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; text-align: center; }
.mysa-method .mysa-method-title { margin: 0 0 70px; font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.6vw, 46px); color: #2a2224; text-align: center; }
.mysa-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1100px; margin: 0 auto; }
.mysa-step { text-align: center; padding: 26px 22px; transition: background .35s var(--ease-soft); }
.mysa-step .n { font-family: var(--serif); font-size: 48px; color: var(--accent); margin-bottom: 18px; transition: color .35s var(--ease-soft); }
.mysa-step h3 { margin: 0 0 12px; font-family: var(--serif-text); font-weight: 500; font-size: 25px; color: #2a2224; transition: color .35s var(--ease-soft); }
.mysa-step p { margin: 0; font-weight: 400; font-size: 15px; line-height: 1.75; color: #6a5b5d; transition: color .35s var(--ease-soft); }
/* hover inverts the step — cream band flips to the dark ground with cream type */
.mysa-step:hover { background: var(--ground); }
.mysa-step:hover .n { color: var(--accent-soft); }
.mysa-step:hover h3 { color: var(--text-bright); }
.mysa-step:hover p { color: var(--text-soft); }
.mysa-method-cta { text-align: center; margin-top: 64px; }
.btn--rose { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn--rose:hover { background: #7d6469; border-color: #7d6469; color: #fff; }
@media (max-width: 760px) { .mysa-steps { grid-template-columns: 1fr; gap: 40px; } }

/* soft mauve "cloud" glow behind the copy side, matching the design's atmosphere */
.split-hero-copy { position: relative; }
.split-hero-copy::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 60% at 50% 35%, rgba(159,132,136,.16), transparent 70%); }
.split-hero-copy > * { position: relative; z-index: 1; }
.split-hero-media { position: relative; overflow: hidden; background: var(--card-2); }
.split-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(90px, 12vh, 120px) clamp(28px, 5vw, 84px) clamp(40px, 6vh, 70px); }
.split-hero-copy .eyebrow { margin-block-end: 28px; }
.split-hero-copy h1 { font-weight: 300; font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.04; letter-spacing: -.02em; color: var(--text-bright); }
.split-hero-copy h1 .em { font-style: italic; color: var(--accent-soft); }
@media (max-width: 880px) {
  .split-hero { grid-template-columns: 1fr; min-height: auto; }
  .split-hero-media { height: 52vh; }
  .split-hero-copy { padding-top: 60px; }
}

/* ============================ column grids (dividers) ============================ */
.cols { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
/* pillars variant (home "The Promise"): flip cards — image + title on the front,
   body copy on a cream back face; hovering flips the card, leaving flips it back */
.pillars { counter-reset: pillar; }
.pillars .col.flipcard { counter-increment: pillar; padding: 0; background: transparent; perspective: 1400px; }
.flipcard .flip-inner { position: relative; min-height: clamp(380px, 30vw, 460px); height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease-soft); }
.flipcard:hover .flip-inner { transform: rotateY(180deg); }
[dir="rtl"] .flipcard:hover .flip-inner { transform: rotateY(-180deg); }
.flip-front, .flip-back { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: clamp(26px, 2.6vw, 38px); display: flex; flex-direction: column; justify-content: flex-end; }
/* positioned children get their own compositing layer and don't inherit the
   face's backface-visibility (Chrome) — hide their backs explicitly, or the
   front's labels show through mirrored once the card is flipped */
.flip-front > *, .flip-back > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* belt and braces: some GPUs still composite the front's text through the back,
   so hide the whole front face outright once the flip passes ~70° (and reveal
   it at the same point on the way back) */
.flip-front { visibility: visible; transition: visibility 0s .12s; }
.flipcard:hover .flip-front { visibility: hidden; }
.flip-front { background: var(--card); }
.flip-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flip-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,17,.85), rgba(20,16,17,.4) 50%, rgba(20,16,17,.08)); }
.flip-front .num, .flip-front h3 { position: relative; z-index: 1; }
.flip-front h3 { margin-block-end: 0; }
.flip-cue { position: absolute; top: 20px; inset-inline-end: 20px; z-index: 1; color: var(--text-soft); opacity: .7; }
.flip-back { transform: rotateY(180deg); background: #f4efea; justify-content: center; }
[dir="rtl"] .flip-back { transform: rotateY(-180deg); }
.pillars .flip-back::before {
  content: counter(pillar, decimal-leading-zero);
  position: absolute; top: 2px; inset-inline-end: 12px; font-family: var(--serif);
  font-size: clamp(100px, 8vw, 150px); line-height: 1; color: rgba(138,110,114,.14); pointer-events: none;
}
/* .flipcard prefix outweighs the generic .col .num/h3/p rules that follow later */
.flipcard .flip-back .num { color: #8a6e72; }
.flipcard .flip-back h3 { color: #2a2224; -webkit-text-stroke: 0; }
.flipcard .flip-back p { color: #5a4d4f; line-height: 1.8; margin: 0; }
/* tier / timeline card vocab gets the same two-face recoloring as num/h3/p */
.flip-front .badge, .flip-front .line, .flip-front .q { position: relative; z-index: 1; }
.flipcard .flip-back .badge, .flipcard .flip-back .line, .flipcard .flip-back .q { color: #8a6e72; }
.flipcard:hover .flip-front .badge, .flipcard:hover .flip-front .q { color: var(--accent); }
.flipcard:hover .flip-front .line { color: var(--accent-soft); }
/* ghost numeral tint on dark backs (cream tint instead of mauve-on-cream) */
.pillars .flipcard--dark .flip-back::before { color: rgba(201,166,169,.1); }
/* Dr. Maysa sits left-of-frame in the wide portrait — keep her in the crop */
.pillars .col:nth-child(1) .flip-img { object-position: 22% center; }
/* the generic .col inversion hover must not recolor the front face mid-flip */
.flipcard:hover .flip-front .num { color: var(--accent); }
.flipcard:hover .flip-front h3 { color: var(--text-bright); }
@media (prefers-reduced-motion: reduce) { .flipcard .flip-inner { transition: none; } }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.col { background: var(--ground); padding: clamp(34px, 4vw, 56px) clamp(26px, 3vw, 44px); transition: background .35s var(--ease-soft); }
.col .num { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); transition: color .35s var(--ease-soft); }
.col h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 400; margin: 22px 0 14px; color: var(--text-bright); transition: color .35s var(--ease-soft); }
.col p { color: var(--text-muted); font-weight: 400; line-height: 1.8; margin: 0; transition: color .35s var(--ease-soft); }
/* hover inverts the card — dark cards flip to cream with ink type, light cards flip to dark */
.col:hover { background: #f4efea; }
.col:hover .num { color: #8a6e72; }
.col:hover h3 { color: #2a2224; -webkit-text-stroke: 0; }
.col:hover p { color: #5a4d4f; }
.section--light .col:hover { background: var(--ground); }
.section--light .col:hover .num { color: var(--accent); }
.section--light .col:hover h3 { color: var(--text-bright); }
.section--light .col:hover p { color: var(--text-soft); }
@media (max-width: 880px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

/* free-standing feature grid (no dividers) */
.feature-grid { display: grid; gap: clamp(32px, 4vw, 56px); }
.feature-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.feature-grid.g4 { grid-template-columns: repeat(4, 1fr); }
.feature .num { font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.feature h3 { font-size: 1.5rem; font-weight: 400; margin: 18px 0 12px; color: var(--text-bright); }
.feature p { color: var(--text-muted); font-weight: 400; margin: 0; }
@media (max-width: 880px) { .feature-grid.g3, .feature-grid.g4 { grid-template-columns: 1fr; } }

/* ============================ split text-media (founder etc.) ============================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.split.media-left { grid-template-columns: 1fr 1.1fr; }
.split-media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--card-2); }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-media .cap { position: absolute; inset-inline-start: 24px; bottom: 22px; z-index: 1; }
.split-media .cap .nm { font-family: var(--serif); font-size: 17px; color: var(--text-soft); }
.split-media .cap .rl { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-rose); margin-block-start: 5px; }
.split-text .eyebrow { margin-block-end: 26px; }
.split-text .sign { font-size: 1.3rem; margin: 26px 0 0; }
@media (max-width: 880px) { .split, .split.media-left { grid-template-columns: 1fr; gap: 40px; } }

/* application: quote (left) + form (right) */
.apply-split { align-items: start; }
.apply-quote .eyebrow { margin-block-end: 28px; }
.apply-quote blockquote { margin: 0; font-family: var(--serif-text); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.32; letter-spacing: -.01em; color: var(--text-bright); }
.apply-quote cite { display: block; font-style: normal; font-family: var(--serif); font-size: 1.3rem; color: var(--accent); margin-block-start: 22px; }
.apply-quote .apply-note { margin-block-start: 34px; color: var(--text-muted); font-weight: 400; line-height: 1.8; max-width: 42ch; }

/* ============================ protocol cards ============================ */
.proto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.proto-card { display: flex; flex-direction: column; background: #1c1719; border: 1px solid var(--line); overflow: hidden; transition: transform .4s var(--ease-soft), border-color .4s; }
.proto-card:hover { transform: translateY(-5px); border-color: var(--line-strong); }
/* image area with tag chip overlaid top-left + bottom gradient (design) */
.proto-card-img { position: relative; height: 230px; overflow: hidden; background: #1c1719; }
.proto-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-soft); }
.proto-card:hover .proto-card-img img { transform: scale(1.06); }
.proto-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20,16,17,.7)); }
.proto-card-tag { position: absolute; top: 16px; inset-inline-start: 16px; z-index: 1; padding: 8px 14px; background: #000; color: var(--text); font-family: var(--sans); font-size: 9.5px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; }
.proto-card-body { padding: 30px 28px 34px; display: flex; flex-direction: column; flex: 1; }
.proto-card h3 { font-size: 26px; font-weight: 400; margin: 0 0 14px; color: var(--text-bright); }
.proto-card h3 .tm { font-size: .55em; vertical-align: super; color: var(--accent-rose); }
.proto-card .promise { color: var(--text-muted); font-weight: 400; font-size: 14.5px; line-height: 1.65; flex: 1; margin: 0 0 24px; }
.proto-card-meta { display: flex; justify-content: space-between; gap: 18px; padding-block-start: 18px; border-block-start: 1px solid var(--line); font-family: var(--sans); font-size: 11.5px; letter-spacing: .04em; }
.proto-card-meta .dur { color: var(--text-faint); }
.proto-card-meta .for { color: var(--accent-dusty); }
@media (max-width: 980px) { .proto-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .proto-grid { grid-template-columns: 1fr; } }

/* outcome grid (Treatments) — 2 columns, taller tiles per design */
.outcome-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.outcome-grid .proto-card-img { height: auto; aspect-ratio: 16/10; }
/* warm dark tone over every outcome image so mixed stock reads as one set */
.outcome-grid .proto-card-img img { filter: saturate(.82) contrast(.96); }
.outcome-grid .proto-card-img::after { background: linear-gradient(180deg, rgba(42,28,30,.2), rgba(42,28,30,.2) 40%, rgba(20,16,17,.72)); }
/* one-line invitation under the headline; clamped so cards stay even */
.proto-card-lead { color: var(--text-muted); font-weight: 400; font-size: 14.5px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.proto-card-go { margin-top: auto; padding-top: 18px; font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-soft); opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease-soft), transform .35s var(--ease-soft); }
.proto-card:hover .proto-card-go { opacity: 1; transform: none; }
/* "Advanced devices" runs full-width as a horizontal feature band */
.outcome-grid .outcome-feature { grid-column: 1 / -1; flex-direction: row; }
.outcome-feature .proto-card-img { aspect-ratio: auto; flex: 0 0 52%; min-height: 340px; }
/* absolute so the (portrait) source can't stretch the band — body sets height */
.outcome-feature .proto-card-img img { position: absolute; inset: 0; }
.outcome-feature .proto-card-body { justify-content: center; padding-block: 44px; }
@media (max-width: 720px) {
  .outcome-grid { grid-template-columns: 1fr; }
  .outcome-grid .outcome-feature { flex-direction: column; }
  .outcome-feature .proto-card-img { aspect-ratio: 16/10; flex: none; }
}

/* Maysa Method hero — stacked + centered: eyebrow, "Skin is data." (h2), "Read it…" (h1) */
.mm-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mm-hero .eyebrow { margin-block-end: 34px; }
.mm-hero-sub { font-weight: 400; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.02em; color: var(--text-bright); margin: 0; }
.mm-hero-main { font-weight: 300; font-style: italic; font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: 1; letter-spacing: -.02em; color: var(--accent-soft); margin: .12em 0 0; }
.mm-hero-sub > *, .mm-hero-main > * { display: block; }

/* The Clinic — opening statement, set large and bold like a hero line */
.clinic-statement { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; color: var(--text-bright); margin: 0 0 clamp(36px, 5vw, 60px); max-width: 18ch; }
.clinic-statement .em { font-style: italic; font-weight: 500; color: var(--accent-soft); }
.clinic-statement [data-reveal="mask"] > * { display: block; }

/* home "Six Protocols" — row list + sticky swapping image panel */
.proto-index { display: grid; grid-template-columns: 1fr 1.05fr; gap: 6vw; align-items: start; margin-block-start: var(--space-block); }
.proto-list { display: flex; flex-direction: column; border-block-start: 1px solid var(--line); }
.proto-row { display: flex; align-items: baseline; gap: 22px; padding: 26px 4px; border-block-end: 1px solid var(--line); cursor: pointer; transition: padding-inline-start .35s var(--ease-soft), background .35s; }
.proto-row:hover, .proto-row.is-active { padding-inline-start: 16px; background: linear-gradient(90deg, rgba(159,132,136,.08), transparent); }
[dir="rtl"] .proto-row:hover, [dir="rtl"] .proto-row.is-active { background: linear-gradient(270deg, rgba(159,132,136,.08), transparent); }
.proto-row .ix { font-family: var(--sans); font-size: 11px; letter-spacing: .18em; color: var(--accent); min-width: 34px; }
.proto-row h3 { flex: 1; margin: 0; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 400; color: var(--text-soft); transition: color .35s; }
.proto-row:hover h3, .proto-row.is-active h3 { color: var(--text-bright); }
.proto-row .dur { font-family: var(--sans); font-size: 11px; letter-spacing: .05em; color: var(--text-faint); white-space: nowrap; }
.proto-row .tm { font-size: .55em; vertical-align: super; color: var(--accent-rose); }

.proto-stage { position: sticky; top: 110px; aspect-ratio: 4/5; overflow: hidden; background: var(--card-2); }
.proto-stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease-soft), transform 1.2s var(--ease-soft); }
.proto-stage-img.is-shown { opacity: 1; transform: none; }
.proto-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20,16,17,.85)); pointer-events: none; }
.proto-stage-cap { position: absolute; inset-inline: 34px; bottom: 36px; z-index: 1; }
.proto-stage-cap .cap-tag { font-family: var(--sans); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-rose); }
.proto-stage-cap .cap-promise { margin: 12px 0 20px; font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.3; color: #fff; }
.proto-stage-cap .cap-cta { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #CD8CA7; }
@media (max-width: 880px) {
  .proto-index { grid-template-columns: 1fr; gap: 36px; }
  .proto-stage { position: relative; top: 0; order: -1; aspect-ratio: 16/11; }
}

/* filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 11px 22px; border: 1px solid var(--line); color: var(--text-muted); background: transparent; cursor: pointer; transition: all .3s; }
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-item[hidden] { display: none; }

/* ============================ horizontal scroll gallery (pinned) ============================ */
/* The section is tall; an inner sticky wrapper pins to the viewport and its
   flex track is translated sideways as the user scrolls vertically through the
   section's extra height — so photos move past as you scroll down. */
.hscroll { position: relative; height: 260vh; background: var(--surface); }
.hscroll-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.hscroll-track { display: flex; align-items: center; gap: 30px; padding: 0 var(--gutter); will-change: transform; }
.hscroll-intro { flex: none; width: 38vw; min-width: 360px; padding-inline-end: 30px; }
.hscroll-intro .eyebrow { margin-block-end: 26px; }
.hscroll-intro h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; line-height: 1.12; color: var(--text-bright); margin: 0 0 24px; }
.hscroll-intro h2 .em { font-style: italic; color: var(--accent-soft); }
.hscroll-intro p { color: var(--text-muted); font-weight: 400; margin: 0; max-width: 38ch; }
.hscroll-intro .cue { margin-block-start: 34px; font-family: var(--sans); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--text-faint); }
.hshot { position: relative; flex: none; width: 30vw; min-width: 300px; height: 78vh; overflow: hidden; background: var(--card-2); }
.hshot.narrow { width: 24vw; min-width: 260px; }
.hshot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-soft); }
.hscroll:hover .hshot img, .hshot img { transform: none; }
.hshot figcaption { position: absolute; inset-inline-start: 22px; bottom: 20px; z-index: 1; font-family: var(--sans); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(244,236,232,.92); }
.hshot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,17,.55), transparent 50%); }
/* text quarter-panel inside a pinned hscroll (Maysa Method timeline) */
.hpanel { flex: none; width: 19vw; min-width: 250px; height: 30vh; display: flex; flex-direction: column; justify-content: center; padding: 32px; background: var(--card); border: 1px solid var(--line); }
.hpanel .q { margin: 0; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.hpanel h3 { font-size: clamp(2.1rem, 3vw, 2.9rem); font-weight: 400; color: var(--text-bright); margin: 18px 0 16px; }
.hpanel p { color: var(--text-muted); font-weight: 400; line-height: 1.7; margin: 0; font-size: 1.05rem; }
.hshot-outro { flex: none; width: 30vw; min-width: 320px; display: flex; flex-direction: column; justify-content: center; padding-inline: 20px; }
.hshot-outro blockquote { font-family: var(--serif-text); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.4; color: var(--text-bright); margin: 0 0 24px; }
/* Static variant: no pinned scroll-jack, no sideways track — a normal section
   on ALL widths. Photos flow in a responsive grid; intro + outro read as plain
   blocks. Used by the home "Inside the clinic" section. */
.hscroll--static { height: auto; }
.hscroll--static .hscroll-pin { position: static; height: auto; display: block; overflow: visible; }
.hscroll--static .hscroll-track {
  transform: none !important; will-change: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  padding: var(--space-block, 60px) var(--gutter);
}
.hscroll--static .hscroll-intro,
.hscroll--static .hshot-outro { width: auto; min-width: 0; padding: 0; grid-column: 1 / -1; }
.hscroll--static .hshot,
.hscroll--static .hshot.narrow { width: auto; min-width: 0; height: 300px; }
@media (max-width: 880px) {
  .hscroll--static .hscroll-track { grid-template-columns: 1fr; gap: 16px; }
  .hscroll--static .hshot, .hscroll--static .hshot.narrow { height: 60vw; }
}

/* Mobile: drop the pinned scroll-jack AND the sideways carousel — stack every
   panel vertically as a normal column. Keeping text (intro + outro quote) in a
   horizontal scroller pushed the outro off-screen and made it "move" on swipe. */
@media (max-width: 880px) {
  .hscroll { height: auto; }
  .hscroll-pin { position: static; height: auto; display: block; }
  .hscroll-track {
    transform: none !important;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    overflow-x: hidden; gap: 20px; padding-block: 30px;
  }
  .hscroll-intro { width: auto; min-width: 0; padding-inline-end: 0; }
  .hshot, .hshot.narrow { width: 100%; min-width: 0; height: 60vw; }
  .hshot-outro { width: auto; min-width: 0; padding-inline: 0; }
}

/* image grid (the space) */
/* The Space — fixed-row mosaic per design: 6 cols, 200px auto-rows, 16px gap */
.shot-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 200px; gap: 16px; }
.shot { position: relative; overflow: hidden; background: var(--card-2); }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-soft); }
.shot:hover img { transform: scale(1.04); }
.shot figcaption { position: absolute; inset-inline-start: 22px; bottom: 20px; z-index: 1; font-family: var(--sans); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(244,236,232,.92); }
.shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,17,.55), transparent 55%); }
.shot.w4 { grid-column: span 4; grid-row: span 2; }  /* big hero tile, 4 wide × 2 tall */
.shot.w3 { grid-column: span 3; }
.shot.w2 { grid-column: span 2; }
@media (max-width: 760px) {
  .shot-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .shot.w4 { grid-column: span 2; grid-row: span 2; }
  .shot.w3, .shot.w2 { grid-column: span 1; grid-row: span 1; }
}

/* ============================ testimonials / quotes ============================ */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(34px, 4vw, 60px); }
.quote .mark { font-family: var(--serif); font-size: 3.4rem; line-height: .6; color: var(--accent); display: block; height: 30px; }
.quote p { font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.55; color: var(--text-soft); margin: 0; }
.quote .by { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-rose); margin-block-start: 22px; }
@media (max-width: 880px) { .quotes { grid-template-columns: 1fr; } }

/* inline pull-quote inside body copy — bold, h2-scale serif accent */
/* pull-quotes in Dr. Maysa's essay — centered pink italic (design §isMaysa) */
.pull-quote { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.4; color: var(--accent-pink); margin: 34px 0; text-align: center; }

/* big single pull-quote band */
.pull-band { text-align: center; padding: var(--space-section) var(--gutter); }
.pull-band blockquote { max-width: 24ch; margin: 0 auto; font-family: var(--serif-text); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.25; color: var(--text-bright); }
.pull-band .by { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-rose); margin-block-start: 32px; }

/* ============================ closing CTA band ============================ */
.cta-band { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; overflow: hidden; }
.cta-band-media { position: relative; overflow: hidden; background: var(--card-2); }
.cta-band-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(60px, 8vw, 110px) clamp(28px, 5vw, 84px); }
.cta-band-copy h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); font-weight: 400; line-height: 1.14; color: var(--text-bright); max-width: 20ch; }
.cta-band-copy .em { font-style: italic; color: var(--accent-soft); }
.cta-band-copy p { color: var(--text-muted); font-weight: 400; margin: 26px 0 36px; max-width: 46ch; }
.cta-band-copy .sign { margin-block-start: 30px; }
@media (max-width: 880px) { .cta-band { grid-template-columns: 1fr; } .cta-band-media { height: 44vh; order: -1; } }

/* simple centered CTA (no media) */
.cta-center { text-align: center; }
/* nested inside a .section the wrapper already provides the vertical rhythm —
   without this the closing CTAs (clinic, dr-maysa) are double-padded */
.section .cta-center { padding-block: 0; }
.cta-center h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 400; line-height: 1.16; color: var(--text-bright); max-width: 22ch; margin-inline: auto; }
.cta-center .em { font-style: italic; color: var(--accent-soft); }
.cta-center p { color: var(--text-muted); font-weight: 400; margin: 24px auto 34px; max-width: 50ch; }
.codeword { font-family: var(--sans); font-size: 14px; color: var(--text-muted); }
.codeword strong { color: var(--accent-soft); letter-spacing: .2em; }

/* ============================ detail rows / specs ============================ */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; gap: 24px; align-items: baseline; padding: 22px 0; border-block-end: 1px solid var(--line); }
.rows li:last-child { border-block-end: none; }
.rows .n { font-family: var(--sans); font-size: 12px; letter-spacing: .1em; color: var(--accent); flex: none; min-width: 30px; }
.rows .t { color: var(--text-soft); font-weight: 400; }
.rows .t b { color: var(--text-bright); font-weight: 400; }
.specs { list-style: none; margin: 30px 0; padding: 0; }
.specs li { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-block-end: 1px solid var(--line); }
.specs .k { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); }
.specs .v { margin: 0; font-family: var(--sans); font-size: 14px; color: var(--text-soft); text-align: end; }

/* stages / timeline cards */
.stages { display: grid; gap: 18px; }
.stage { background: var(--card); border: 1px solid var(--line); padding: 30px 32px; }
.stage .wk { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.stage h3 { font-size: 1.4rem; font-weight: 400; margin: 12px 0 10px; color: var(--text-bright); }
.stage p { color: var(--text-muted); font-weight: 400; margin: 0; }

/* mother & sister concierge card */
.concierge-card {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 38px 40px;
  align-items: center;
  transition: border-color .4s var(--ease-soft);
}
.concierge-card:hover { border-color: var(--line-strong); }
@media (max-width: 700px) {
  .concierge-card { padding: 30px 26px; }
}

/* exclusions */
.exclude { list-style: none; margin: 0; padding: 0; }
.exclude li { display: flex; gap: 18px; align-items: baseline; padding: 18px 0; border-block-end: 1px solid var(--line); color: var(--text-muted); font-weight: 400; }
.exclude li::before { content: "—"; color: var(--accent); flex: none; }

/* ============================ patient journey (4 steps) ============================ */
/* four-step patient journey — 1:1 port of design §isClinic light band */
.journey-eyebrow { font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.journey-title { margin: 0 0 70px; font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 4vw, 50px); color: #2a2224; }
.journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(42,34,36,.15); }
.journey .step { padding-block: 42px 32px; padding-inline: 30px; border-inline-end: 1px solid rgba(42,34,36,.12); transition: background .35s var(--ease-soft); }
.journey .step:last-child { border-inline-end: none; }
.journey .step .n { display: block; font-family: var(--serif); font-size: 34px; color: var(--accent); margin-bottom: 22px; letter-spacing: 0; text-transform: none; transition: color .35s var(--ease-soft); }
.journey .step h3 { font-family: var(--serif-text); font-weight: 500; font-size: 24px; margin: 0 0 14px; color: #2a2224; transition: color .35s var(--ease-soft); }
.journey .step p { font-weight: 400; font-size: 14.5px; line-height: 1.75; color: #6a5b5d; margin: 0; transition: color .35s var(--ease-soft); }
/* hover inverts the step — cream band flips to the dark ground with cream type */
.journey .step:hover { background: var(--ground); }
.journey .step:hover .n { color: var(--accent-soft); }
.journey .step:hover h3 { color: var(--text-bright); }
.journey .step:hover p { color: var(--text-soft); }
@media (max-width: 880px) {
  .journey { grid-template-columns: 1fr 1fr; }
  .journey .step { padding-block: 42px 0 !important; padding-inline: 24px !important; border-inline-end: none; }
  .journey .step:nth-child(odd) { padding-inline-start: 0 !important; border-inline-end: 1px solid rgba(42,34,36,.12); }
}
@media (max-width: 520px) {
  .journey { grid-template-columns: 1fr; }
  .journey .step, .journey .step:nth-child(odd) { padding: 36px 0 0 !important; border-inline-end: none; }
}

/* tiers (private care) as flip cards */
.tier.flipcard, .tier.flipcard:hover { padding: 0; background: transparent; border: none; }
.tier.flipcard { perspective: 1400px; }
.tier .flip-inner { min-height: 380px; }

/* pinned-timeline quarter panels (maysa method) as flip cards */
.hpanel.flipcard, .hpanel.flipcard:hover { padding: 0; background: transparent; border: none; }
.hpanel.flipcard { perspective: 1200px; }
.hpanel .flip-inner { height: 100%; min-height: 100%; }
.hpanel .flip-front, .hpanel .flip-back { padding: 28px; }
.hpanel .flip-back h3 { font-size: clamp(1.5rem, 2vw, 2rem); }

/* flip cards on cream bands (clinic journey, maysa-method steps): image fronts,
   dark backs — brighter type than the old taupe-on-cream for readability */
.journey.journey-flip { border-top: 0; gap: 18px; }
.journey-flip .step, .journey-flip .step:nth-child(odd) { padding: 0 !important; border: none !important; background: transparent; perspective: 1400px; }
.journey-flip .step:hover { background: transparent; }
.mysa-steps.steps-flip { gap: 18px; }
.steps-flip .mysa-step, .steps-flip .mysa-step:hover { text-align: start; padding: 0; background: transparent; perspective: 1400px; }
.flipcard--dark .flip-front .n, .flipcard--dark .flip-front h3 { position: relative; z-index: 1; }
.flipcard--dark .flip-front .n { color: var(--accent-soft); margin-bottom: 12px; }
.flipcard--dark .flip-front h3 { color: var(--text-bright); margin: 0; }
.flipcard--dark .flip-back { background: var(--card); }
.flipcard--dark .flip-back .n { color: var(--accent-soft); margin-bottom: 10px; }
.flipcard--dark .flip-back h3 { color: var(--text-bright); margin: 0 0 14px; }
.flipcard--dark .flip-back p { color: var(--text-soft); font-size: 15.5px; line-height: 1.85; margin: 0; }

/* ============================ FAQ accordion ============================ */
.faq-group { margin-block-end: clamp(40px, 5vw, 64px); }
.faq-group > h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 400; color: var(--text-bright); margin-block-end: 16px; }
.faq-group[hidden] { display: none; }
.faq { border-block-end: 1px solid var(--line); }
.faq[hidden] { display: none; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-family: var(--serif); font-size: 1.15rem; color: var(--text-soft); transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--text-bright); }
.faq summary .sign { font-family: var(--sans); font-size: 1.4rem; font-weight: 300; color: var(--accent); flex: none; transition: transform .3s; font-style: normal; }
.faq[open] summary { color: var(--text-bright); }
.faq[open] summary .sign { transform: rotate(45deg); }
.faq-a { padding: 0 0 26px; max-width: 64ch; color: var(--text-muted); font-weight: 400; line-height: 1.8; }
.faq:not([open]) .faq-a { display: none; }
.faq-search { width: 100%; max-width: 480px; margin-block-start: 36px; font-family: var(--sans); font-size: 15px; color: var(--text); background: var(--card); border: 1px solid var(--line); padding: 16px 20px; }
.faq-search::placeholder { color: var(--text-faint); }
.faq-search:focus { outline: none; border-color: var(--accent); }
.faq-empty { color: var(--text-faint); font-style: italic; padding: 20px 0; }

/* ==================== FAQ — 1:1 port of design §isFaq ==================== */
.fq-hero { padding: 170px 8vw 60px; }
.fq-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.fq-eyebrow .rule { width: 40px; height: 1px; background: var(--accent); }
.fq-eyebrow .lbl { font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--accent-dusty); }
.fq-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 100px); line-height: .98; color: var(--text); }
.fq-title .em { font-style: italic; color: var(--accent-soft); }
.fq-search { margin-top: 42px; max-width: 520px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line-strong); padding-bottom: 14px; }
.fq-search svg { flex: none; }
.fq-search input { flex: 1; background: transparent; border: none; color: var(--text-soft); font-family: var(--sans); font-size: 15px; outline: none; }
.fq-search input::placeholder { color: #8a7c79; }

.fq-groups { padding: 40px 8vw 130px; }
.fq-group { display: grid; grid-template-columns: 0.5fr 1.5fr; gap: 4vw; padding: 56px 0; border-top: 1px solid var(--line); }
.fq-group[hidden] { display: none; }
.fq-group-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); color: var(--accent-soft); align-self: start; position: sticky; top: 120px; }
.fq-item { border-bottom: 1px solid var(--line); }
.fq-item[hidden] { display: none; }
.fq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 0; }
.fq-item summary::-webkit-details-marker { display: none; }
.fq-item .fq-q { font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 1.7vw, 22px); color: var(--text-soft); }
.fq-item .fq-sign { font-size: 22px; color: var(--accent); line-height: 1; flex: none; transition: transform .3s; }
.fq-item[open] .fq-sign { transform: rotate(45deg); }
.fq-item .fq-a { margin: 0 0 24px; font-weight: 400; font-size: 15px; line-height: 1.8; color: var(--text-muted); max-width: 640px; }
.fq-item:not([open]) .fq-a { display: none; }

@media (max-width: 760px) {
  .fq-hero { padding: 130px 6vw 50px; }
  .fq-groups { padding: 20px 6vw 90px; }
  .fq-group { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
  .fq-group-title { position: static; top: auto; }
}

/* ============================ team grid ============================ */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3vw, 44px); }
.member-photo { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--card-2); margin-block-end: 24px; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-soft); }
.member:hover .member-photo img { transform: scale(1.04); }
.member h3 { font-size: 1.5rem; font-weight: 400; color: var(--text-bright); }
.member .role { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-block-start: 8px; }
.member .cred { font-family: var(--sans); font-size: 12px; color: var(--text-faint); margin-block-start: 6px; }
.member .focus { font-family: var(--sans); font-size: 12px; color: var(--text-muted); margin-block-start: 14px; }
.member .bio { color: var(--text-muted); font-weight: 400; margin-block-start: 14px; font-size: .95rem; }
@media (max-width: 880px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

/* ============================ video clips ============================ */
.clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.clip { position: relative; aspect-ratio: 9/11; overflow: hidden; background: var(--card-2); display: flex; align-items: flex-end; }
.clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,17,.7), rgba(20,16,17,.15)); }
.clip .play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(244,236,232,.7); display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform .3s, background .3s; }
.clip:hover .play { transform: scale(1.08); background: rgba(159,132,136,.3); }
.clip .play::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent rgba(244,236,232,.92); margin-left: 3px; }
.clip .ctitle { position: relative; z-index: 2; padding: 22px; font-family: var(--serif); font-size: 1.05rem; color: var(--text-soft); }
@media (max-width: 880px) { .clips { grid-template-columns: 1fr; } }

/* ============================ journal grid ============================ */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3vw, 44px); }
.article-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--card-2); margin-block-end: 22px; }
.article-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-soft); }
.article:hover .article-img img { transform: scale(1.05); }
.article .meta { display: flex; gap: 14px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.article .meta .dot { color: var(--text-faint); }
.article h3 { font-size: 1.4rem; font-weight: 400; margin: 14px 0 10px; color: var(--text-bright); }
.article p { color: var(--text-muted); font-weight: 400; font-size: .95rem; margin: 0; }
@media (max-width: 880px) { .journal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .journal-grid { grid-template-columns: 1fr; } }

/* ==================== Journal — 1:1 port of design §isJournal ==================== */
.jr-hero { padding: 170px 8vw 70px; }
.jr-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.jr-eyebrow .rule { width: 40px; height: 1px; background: var(--accent); }
.jr-eyebrow .lbl { font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--accent-dusty); }
.jr-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 104px); line-height: .98; color: var(--text); }
.jr-title .em { font-style: italic; color: var(--accent-soft); }
.jr-lead { margin: 34px 0 0; font-weight: 400; font-size: 17px; line-height: 1.8; color: var(--text-muted); max-width: 560px; }
.jr-filters { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 40px; }
.jr-filter { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8a7c79; cursor: pointer; padding-bottom: 6px; transition: color .3s; }
.jr-filter:hover { color: #cdbfbb; }
.jr-filter.is-active { color: #cdbfbb; border-bottom: 1px solid var(--accent); }

.jr-grid-wrap { padding: 20px 8vw 140px; }
.jr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px 30px; }
.jr-card { display: block; cursor: pointer; text-decoration: none; }
.jr-card[hidden] { display: none; }
.jr-card-img { position: relative; height: 300px; overflow: hidden; background: linear-gradient(135deg, #2a2024, #6d565b); margin-bottom: 24px; }
.jr-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.19,1,.22,1); }
.jr-card:hover .jr-card-img img { transform: scale(1.06); }
.jr-card-meta { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.jr-card-meta .cat { color: #b5827f; }
.jr-card-meta .read { color: #8a7c79; }
.jr-card h3 { margin: 0 0 12px; font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.15; color: var(--text-soft); }
.jr-card p { margin: 0; font-weight: 400; font-size: 14.5px; line-height: 1.7; color: var(--text-muted); }

@media (max-width: 880px) { .jr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .jr-grid { grid-template-columns: 1fr; } .jr-hero { padding: 130px 6vw 50px; } .jr-grid-wrap { padding: 20px 6vw 90px; } }

/* Journal article page — single quiet column */
.jra { padding: 170px 8vw 120px; }
.jra-head { max-width: 820px; }
.jra-title { font-size: clamp(34px, 4.6vw, 72px); }
.jr-eyebrow .lbl.faint { color: #8a7c79; letter-spacing: .2em; }
.jra-date { margin: 26px 0 0; font-size: 11px; letter-spacing: .2em; color: #8a7c79; }
.jra-cover { margin: clamp(40px, 6vw, 70px) 0; max-height: 62vh; overflow: hidden; background: var(--card-2); }
.jra-cover img { width: 100%; height: 100%; max-height: 62vh; object-fit: cover; }
.jra-body { max-width: 720px; font-size: 16.5px; }
.jra-body p { margin: 0 0 1.5em; }
.jra-figure { margin: clamp(28px, 4vw, 44px) 0; }
.jra-figure img { width: 100%; object-fit: cover; background: var(--card-2); }
.jra-figure figcaption { margin-top: 10px; font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8a7c79; }
.jra-foot { margin-top: clamp(40px, 6vw, 64px); }
@media (max-width: 560px) { .jra { padding: 130px 6vw 90px; } }

/* ============================ patient stories (text over image) ============================ */
.stories { display: grid; gap: 26px; }
.story { position: relative; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; background: var(--card-2); }
.story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,17,.85), rgba(20,16,17,.2) 70%); }
.story-copy { position: relative; z-index: 1; padding: clamp(30px, 5vw, 56px); max-width: 60ch; }
.story-copy .intro { font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-rose); }
.story-copy blockquote { font-family: var(--serif-text); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.4; color: var(--text-bright); margin: 16px 0; }
.story-copy .tag { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.story-copy .by { font-family: var(--sans); font-size: 12px; color: var(--text-muted); margin-block-start: 10px; }

/* ==================== Patient Stories — 1:1 port of design §isStories ==================== */
.st-hero { padding: 170px 8vw 80px; text-align: center; }
.st-eyebrow { font-size: 10.5px; letter-spacing: .4em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; }
.st-title { margin: 0 auto; max-width: 980px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 76px); line-height: 1.06; color: var(--text); }
.st-title .em { font-style: italic; color: var(--accent-soft); }
.st-lead { margin: 32px auto 0; font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--text-muted); max-width: 560px; }

.st-rows { padding: 40px 8vw 130px; }
.st-row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 5vw; align-items: center; padding: 60px 0; border-top: 1px solid var(--line); }
.st-row-img { aspect-ratio: 4/5; overflow: hidden; background: linear-gradient(135deg, #2a2024, #6d565b); }
.st-row-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.st-intro { margin: 0 0 26px; font-weight: 400; font-size: 15px; line-height: 1.85; color: #8a7c79; font-style: italic; }
.st-quote { margin: 0 0 26px; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.4; color: var(--text-soft); }
.st-protocol { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #b5827f; margin-bottom: 22px; }
.st-close { margin: 0 0 20px; font-weight: 400; font-size: 15px; line-height: 1.8; color: var(--text-muted); }
.st-by { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

@media (max-width: 760px) {
  .st-hero { padding: 130px 6vw 50px; }
  .st-rows { padding: 20px 6vw 90px; }
  .st-row { grid-template-columns: 1fr; gap: 32px; padding: 44px 0; }
}

/* ============================ VIP / private care ============================ */
.vip-rows { list-style: none; margin: 0; padding: 0; }
.vip-rows li { display: flex; gap: 18px; align-items: baseline; padding: 20px 0; border-block-end: 1px solid var(--line); color: var(--text-soft); font-weight: 400; }
.vip-rows li::before { content: "✦"; color: var(--accent); flex: none; font-size: .9em; }
.vip-rows--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 72px); }
@media (max-width: 700px) { .vip-rows--2col { grid-template-columns: 1fr; } }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tier { background: var(--card); border: 1px solid var(--line); padding: 38px 32px; transition: background .35s var(--ease-soft), border-color .35s var(--ease-soft); }
.tier .badge { font-family: var(--sans); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); transition: color .35s var(--ease-soft); }
.tier h3 { font-size: 1.6rem; font-weight: 400; margin: 18px 0 8px; color: var(--text-bright); transition: color .35s var(--ease-soft); }
.tier .line { font-family: var(--serif); font-style: italic; color: var(--accent-soft); margin-block-end: 16px; transition: color .35s var(--ease-soft); }
/* hover inverts the tier — dark cards flip to cream with ink type, light cards flip to dark */
.tier:hover { background: #f4efea; border-color: rgba(42,34,36,.14); }
.tier:hover .badge { color: #8a6e72; }
.tier:hover h3 { color: #2a2224; -webkit-text-stroke: 0; }
.tier:hover .line { color: #8a6e72; }
.tier:hover p { color: #5a4d4f; }
.section--light .tier:hover { background: var(--card); border-color: var(--line); }
.section--light .tier:hover .badge { color: var(--accent); }
.section--light .tier:hover h3 { color: var(--text-bright); }
.section--light .tier:hover .line { color: var(--accent-soft); }
.section--light .tier:hover p { color: var(--text-soft); }
.tier p { color: var(--text-muted); font-weight: 400; margin: 0; font-size: .95rem; transition: color .35s var(--ease-soft); }
@media (max-width: 880px) { .tiers { grid-template-columns: 1fr; } }

/* ============================ forms ============================ */
.form { display: grid; gap: 18px; max-width: 620px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 15px; color: var(--text);
  background: var(--card); border: 1px solid var(--line); padding: 14px 16px;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field select { appearance: none; cursor: pointer; }
.mobile-field { display: flex; align-items: stretch; border: 1px solid var(--line); background: var(--card); }
.mobile-field:focus-within { border-color: var(--accent); }
.mobile-field .prefix { display: flex; align-items: center; padding-inline: 14px; font-family: var(--sans); font-size: 14px; color: var(--text-muted); border-inline-end: 1px solid var(--line); }
.mobile-field input { border: none; flex: 1; background: transparent; }
.mobile-field input:focus { outline: none; }
.form .btn { margin-block-start: 8px; justify-self: start; }
.form-errors { background: rgba(159,132,136,.1); border: 1px solid var(--accent); padding: 14px 16px; color: var(--accent-soft); font-family: var(--sans); font-size: 14px; }
.form-errors p { margin: 4px 0; }

/* two-path contact layout */
.paths { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.path .ptag { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.path h3 { font-size: 1.6rem; font-weight: 400; margin: 16px 0 14px; color: var(--text-bright); }
.path p { color: var(--text-muted); font-weight: 400; margin: 0 0 24px; }
.path-phone { font-family: var(--serif); font-size: 1.4rem; color: var(--text-soft); margin-block-start: 18px; }
@media (max-width: 820px) { .paths { grid-template-columns: 1fr; } }

/* trust strip */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 4vw, 56px); }
.trust h4 { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--text-bright); }
.trust p { color: var(--text-muted); font-weight: 400; margin-block-start: 10px; font-size: .95rem; }
@media (max-width: 760px) { .trust { grid-template-columns: 1fr; } }

/* ============================ bridal date picker ============================ */
.date-ask { display: flex; flex-direction: column; gap: 14px; margin-block-start: 36px; max-width: 360px; }
.date-ask label { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.date-ask input[type="date"] { font-family: var(--sans); font-size: 16px; color: var(--text); background: var(--card); border: 1px solid var(--line); padding: 14px 18px; color-scheme: dark; }
.date-ask input[type="date"]:focus { outline: none; border-color: var(--accent); }
.countdown { font-family: var(--serif); font-size: 1.3rem; color: var(--accent-soft); }
.countdown .days { font-size: 2.2rem; }

/* ============================ legal ============================ */
.legal-block { margin-block-end: clamp(40px, 5vw, 64px); max-width: 70ch; }
.legal-block h2 { font-size: 1.5rem; font-weight: 400; color: var(--text-bright); margin-block-end: 14px; }
.legal-block p { color: var(--text-muted); font-weight: 400; line-height: 1.8; margin: 0 0 1em; }
.license-line { display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; border-block: 1px solid var(--line); font-family: var(--sans); font-size: 13px; color: var(--text-muted); }

/* ============================ floating book + cookie ============================ */
.floating-book {
  position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 80;
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  padding: 15px 26px; background: var(--accent); color: #fff;
  box-shadow: 0 14px 40px -16px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft);
}
.floating-book.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.cookie-banner {
  position: fixed; inset-inline: 24px; bottom: 24px; z-index: 95;
  max-width: 540px; margin-inline: auto;
  background: var(--card-2); border: 1px solid var(--line);
  padding: 20px 24px; display: flex; flex-direction: column; gap: 14px;
  font-family: var(--sans); font-size: 13px; color: var(--text-muted);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.7);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cookie-banner a { color: var(--accent-soft); }
.cookie-banner .cookie-btn { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 20px; background: var(--btn-bg); color: var(--btn-ink); border: none; cursor: pointer; }
.cookie-banner .cookie-btn:hover { background: var(--btn-bg-hover); }

/* ============================ footer ============================ */
.site-footer { background: var(--ground); border-block-start: 1px solid var(--line); padding: clamp(60px, 8vw, 96px) var(--gutter) 40px; }
.footer-inner { max-width: var(--maxw); margin-inline: auto; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-brand .brand-logo { height: 54px; margin-block-end: 18px; }
.footer-brand .blurb { color: var(--text-faint); font-weight: 400; font-size: .9rem; max-width: 28ch; margin-block-end: 18px; }
.footer-socials { display: flex; gap: 14px; font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.footer-socials a:hover { color: var(--accent-soft); }
.site-footer h4 { font-family: var(--sans); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-block-end: 11px; }
.site-footer li a, .footer-visit p { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--text-muted); transition: color .3s; }
.site-footer li a:hover { color: var(--text-soft); }
.footer-visit p { margin: 0 0 11px; line-height: 1.6; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-block-start: clamp(40px, 5vw, 64px); padding-block-start: 26px; border-block-start: 1px solid var(--line); font-family: var(--sans); font-size: 11px; letter-spacing: .06em; color: var(--text-faint); }
.footer-bottom-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-bottom-nav a:hover { color: var(--accent-soft); }
@media (max-width: 880px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }

/* ============================ reveal motion ============================ */
/* Legacy .reveal (still used widely): fade-up on enter. Opt-in via .reveal-ready
   added by the reveal controller, so JS-off never hides content. */
.reveal-ready .reveal { opacity: 0; transform: translateY(24px); }
.reveal-ready .reveal.in { opacity: 1; transform: none; transition: opacity 1s var(--ease-soft), transform 1.1s var(--ease-soft); }
.d1 { transition-delay: .1s; --reveal-delay: .1s; } .d2 { transition-delay: .22s; --reveal-delay: .22s; } .d3 { transition-delay: .34s; --reveal-delay: .34s; } .d4 { transition-delay: .46s; --reveal-delay: .46s; }
/* revealed cards: keep the stagger on opacity/transform but let hover recolors
   run undelayed — .reveal.in's transition shorthand would otherwise clobber them */
.reveal-ready :is(.col, .tier).reveal.in {
  transition: opacity 1s var(--ease-soft) var(--reveal-delay, 0s),
              transform 1.1s var(--ease-soft) var(--reveal-delay, 0s),
              background .35s var(--ease-soft),
              border-color .35s var(--ease-soft);
}

/* signature underline: a rose ink stroke signs the last word of a title on reveal */
.sig-word { position: relative; display: inline-block; }
.sig-stroke { position: absolute; inset-inline: -3%; bottom: -.14em; width: 106%; height: .34em; overflow: visible; pointer-events: none; }
.sig-stroke path { fill: none; stroke: var(--accent-soft); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.reveal-ready .sig-stroke path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal-ready .reveal.in .sig-stroke path { animation: ns-sig-draw 1.2s .55s var(--ease-soft) forwards; }
@keyframes ns-sig-draw { to { stroke-dashoffset: 0; } }
.d4 { transition-delay: .46s; } .d5 { transition-delay: .58s; } .d6 { transition-delay: .7s; }

/* Design data-reveal vocabulary (fade / up / left / scale / mask). The reveal
   controller adds .reveal-ready to the scope and .is-in to each item when it
   enters; per-item delay comes from data-reveal-delay (ms), applied inline. */
.reveal-ready [data-reveal] { opacity: 0; will-change: opacity, transform; transition: opacity .9s var(--ease-soft), transform 1s var(--ease-soft); }
.reveal-ready [data-reveal="fade"]  { transform: none; }
.reveal-ready [data-reveal="up"]    { transform: translateY(28px); }
.reveal-ready [data-reveal="left"]  { transform: translateX(-34px); }
[dir="rtl"] .reveal-ready [data-reveal="left"]:not(.is-in) { transform: translateX(34px); }
.reveal-ready [data-reveal="scale"] { transform: scale(1.04); }
.reveal-ready [data-reveal].is-in   { opacity: 1; transform: none; }
/* mask: the element is the clip window; an inner wrapper wipes up from behind it */
.reveal-ready [data-reveal="mask"] { opacity: 1; overflow: hidden; }
.reveal-ready [data-reveal="mask"] > * { display: block; transform: translateY(105%); transition: transform 1s var(--ease-soft); }
.reveal-ready [data-reveal="mask"].is-in > * { transform: none; }

/* Ken-Burns: add .kb / .kb2 to an <img> inside an overflow-hidden frame */
.kb  { animation: ns-kb  28s var(--ease-soft) infinite alternate; }
.kb2 { animation: ns-kb2 32s var(--ease-soft) infinite alternate; }

/* parallax target — controller nudges --py; element translates by it */
[data-parallax] { will-change: transform; transform: translate3d(0, var(--py, 0), 0); }

/* ============================ intro splash ============================ */
.intro-splash {
  position: fixed; inset: 0; z-index: 200; background: var(--ground);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transition: opacity .8s var(--ease-soft), visibility .8s;
}
.intro-splash.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-splash .mark { width: 120px; height: auto; animation: ns-intro-mark 1s var(--ease-out) both; }
.intro-splash .line { height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: ns-intro-line 1.2s var(--ease-soft) .25s both; }
.intro-splash .wordmark { font-family: var(--serif); font-size: 26px; letter-spacing: .04em; color: var(--text-soft); opacity: 0; animation: ns-intro-mark .9s var(--ease-out) .5s both; }
.intro-splash .wordmark .sub { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: .42em; text-transform: uppercase; color: var(--accent-dusty); text-align: center; margin-block-start: 8px; }

/* ============================ RTL (Arabic) type fixes ============================ */
/* Arabic is a joined script: tracking (positive or negative) breaks letter
   connections, and the sub-1 display line-heights clip vowel marks. Reset both
   for the display faces when the document runs right-to-left. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] blockquote, [dir="rtl"] .clinic-statement { letter-spacing: 0; }
[dir="rtl"] .hero h1, [dir="rtl"] .over-hero-copy h1 { line-height: 1.12; }
[dir="rtl"] .fq-title, [dir="rtl"] .jr-title { line-height: 1.1; }
[dir="rtl"] .sec-head h2, [dir="rtl"] .page-hero h1 { line-height: 1.25; }
/* Phone numbers and the +966 mobile input group always read left-to-right;
   isolate so surrounding RTL text can't reorder the digits. */
.path-phone, .mobile-field { direction: ltr; unicode-bidi: isolate; }

@media (prefers-reduced-motion: reduce) {
  .reveal, [data-reveal], [data-reveal="mask"] > * { opacity: 1 !important; transform: none !important; }
  .intro-splash { display: none !important; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ============================ theme toggle button ============================ */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--text-muted);
  background: transparent; cursor: pointer;
  transition: border-color .3s, background .3s, color .3s;
}
.theme-toggle:hover { border-color: var(--accent); background: rgba(159,132,136,.15); color: var(--accent); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ============================ light mode overrides ============================ */
/* Scrollbar — warm instead of dark */
html[data-theme="light"] ::-webkit-scrollbar-thumb        { background: #C4AAAF; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover  { background: #8E6E76; }

/* Text-stroke: white rim ruins legibility on a light ground — remove it */
html[data-theme="light"] h1,
html[data-theme="light"] h2  { -webkit-text-stroke: 0; }
html[data-theme="light"] h3,
html[data-theme="light"] h4  { -webkit-text-stroke: 0; }
/* But hover-inverted cards still darken to the dark ground — keep their white rim there */
html[data-theme="light"] .col:hover h3,
html[data-theme="light"] .section--light .col:hover h3,
html[data-theme="light"] .tier:hover h3,
html[data-theme="light"] .flipcard--dark .flip-back h3,
html[data-theme="light"] .journey .step:hover h3,
html[data-theme="light"] .mysa-step:hover h3 { }

/* Header glass — use ivory tint instead of near-black */
html[data-theme="light"] .site-header {
  background: rgba(244,238,233,.75);
  border-bottom-color: transparent;
}
html[data-theme="light"] .site-header.solid {
  background: rgba(244,238,233,.92);
  border-bottom-color: var(--line);
}
/* Nav links visible on light header */
html[data-theme="light"] .site-nav a         { color: var(--text-muted); }
html[data-theme="light"] .site-nav a:hover   { color: var(--text); }
html[data-theme="light"] .brand-name          { color: var(--text); }
html[data-theme="light"] .brand-sub           { color: var(--accent); }
html[data-theme="light"] .btn-inquire         { color: var(--text); }

/* Page-hero radial glow — mauve tint fits the light ground */
html[data-theme="light"] .page-hero::after {
  background: radial-gradient(ellipse 60% 50% at 50% 18%, rgba(142,110,118,.1), transparent 70%);
}

/* Over-hero dark overlays — darken for legibility but use warmer tones */
html[data-theme="light"] .over-hero::after {
  background:
    linear-gradient(180deg, rgba(43,33,38,.22) 0%, rgba(43,33,38,0) 30%, rgba(43,33,38,.45) 70%, rgba(43,33,38,.78) 100%),
    linear-gradient(90deg,  rgba(43,33,38,.5)  0%, rgba(43,33,38,.1) 46%, rgba(43,33,38,0) 72%);
}

/* Proto-card dark body — swap to ivory card */
html[data-theme="light"] .proto-card               { background: var(--card); }
html[data-theme="light"] .proto-card-tag           { background: var(--ground); color: var(--text); }
html[data-theme="light"] .proto-card-img::after    { background: linear-gradient(180deg, transparent 40%, rgba(43,33,38,.65)); }

/* hshot overlays */
html[data-theme="light"] .hshot::after { background: linear-gradient(to top, rgba(43,33,38,.48), transparent 50%); }
html[data-theme="light"] .shot::after  { background: linear-gradient(to top, rgba(43,33,38,.48), transparent 55%); }

/* Cream contrast bands: on the ivory ground the hardcoded cream is invisible —
   step them down to the surface tone so the banding rhythm survives */
html[data-theme="light"] .section--light { background: var(--surface); }
html[data-theme="light"] .section--light .col,
html[data-theme="light"] .section--light .tier { background: var(--ground); }


/* Proto-stage bottom scrim */
html[data-theme="light"] .proto-stage::after { background: linear-gradient(180deg, transparent 40%, rgba(43,33,38,.78)); }

/* Flip card back — ivory already correct (it was always #f4efea), dark-back variant swaps to card */
html[data-theme="light"] .flipcard--dark .flip-back { background: var(--card); }

/* Story overlays */
html[data-theme="light"] .story::after { background: linear-gradient(to top, rgba(43,33,38,.8), rgba(43,33,38,.15) 70%); }

/* Clip overlays */
html[data-theme="light"] .clip::after { background: linear-gradient(to top, rgba(43,33,38,.65), rgba(43,33,38,.1)); }

/* Intro splash — ivory background */
html[data-theme="light"] .intro-splash { background: var(--ground); }

/* Stage card */
html[data-theme="light"] .stage        { background: var(--card); border-color: var(--line); }
html[data-theme="light"] .concierge-card { background: var(--card); border-color: var(--line); }

/* Proto-row hover band */
html[data-theme="light"] .proto-row:hover,
html[data-theme="light"] .proto-row.is-active {
  background: linear-gradient(90deg, rgba(142,110,118,.1), transparent);
}

/* Creds band */
html[data-theme="light"] .creds-band { background: rgba(244,238,233,.85); border-bottom-color: var(--line); }
html[data-theme="light"] .creds-row div { color: var(--text-muted); }

/* hpanel */
html[data-theme="light"] .hpanel { background: var(--card); border-color: var(--line); }

/* hscroll intro section bg */
html[data-theme="light"] .hscroll { background: var(--surface); }

/* floating book button — already uses --accent which remaps */

/* cookie banner */
html[data-theme="light"] .cookie-banner { background: var(--card); box-shadow: 0 20px 50px -20px rgba(43,33,38,.2); }

/* section--light hover inversion: in light mode it should flip the card TO the dark ground */
html[data-theme="light"] .section--light .col:hover     { background: var(--ground); }
html[data-theme="light"] .section--light .tier:hover    { background: var(--ground); }
/* mysa-step hover — keep dark flip */
html[data-theme="light"] .mysa-step:hover { background: var(--card); }

/* FAQ search field */
html[data-theme="light"] .faq-search { background: var(--card); border-color: var(--line); color: var(--text); }

/* date picker */
html[data-theme="light"] .date-ask input[type="date"] { color-scheme: light; background: var(--card); }

/* Flip-card faces: photos are theme-neutral, so fronts keep a warm dark scrim
   with light type in both themes; backs are light cards with ink type (no
   white text-stroke anywhere on the light ground) */
html[data-theme="light"] .flip-front::after { background: linear-gradient(to top, rgba(43,33,38,.84), rgba(43,33,38,.34) 52%, rgba(43,33,38,.1)); }
html[data-theme="light"] .flip-front h3 { color: #F7F1EC; -webkit-text-stroke: 0; }
html[data-theme="light"] .flipcard:hover .flip-front h3 { color: #F7F1EC; -webkit-text-stroke: 0; }
html[data-theme="light"] .flip-front .num,
html[data-theme="light"] .flip-front .n,
html[data-theme="light"] .flip-front .q,
html[data-theme="light"] .flip-front .line,
html[data-theme="light"] .flip-front .badge,
html[data-theme="light"] .flipcard:hover .flip-front .num,
html[data-theme="light"] .flipcard:hover .flip-front .n,
html[data-theme="light"] .flipcard:hover .flip-front .q,
html[data-theme="light"] .flipcard:hover .flip-front .line,
html[data-theme="light"] .flipcard:hover .flip-front .badge { color: #DCC6C9; }
html[data-theme="light"] .flip-cue { color: #F7F1EC; opacity: .8; }
html[data-theme="light"] .flip-back { background: var(--card); border: 1px solid var(--line); }
html[data-theme="light"] .flip-back h3 { color: var(--text); -webkit-text-stroke: 0; }
html[data-theme="light"] .flip-back p { color: var(--text-soft); }
html[data-theme="light"] .flip-back .num,
html[data-theme="light"] .flip-back .n,
html[data-theme="light"] .flip-back .q,
html[data-theme="light"] .flip-back .badge,
html[data-theme="light"] .flip-back .line { color: var(--accent); }
html[data-theme="light"] .pillars .flip-back::before { color: rgba(142,110,118,.12); }

/* Pull-quote pink — remap to brand accent */
html[data-theme="light"] .pull-quote { color: var(--accent-soft); }


/* ============================ Our Technologies ============================ */
/* Full-bleed composite hero, matched to the clinic hero: the four device-room
   shots tile edge to edge behind the copy (branded shot widest), a bottom
   scrim carries the text, and the copy sits bottom-left like every other
   interior hero. */
.tech-hero { position: relative; min-height: var(--hero-h); display: flex; align-items: flex-end; overflow: hidden; background: var(--card-2); }
.tech-hero-slices { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1.55fr; gap: 3px; }
.tech-hero-slices span { display: block; background-size: cover; background-position: center; }
.tech-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(20,16,17,.82), rgba(20,16,17,.3) 48%, rgba(20,16,17,.06)); }
.tech-hero-copy { position: relative; z-index: 2; width: 100%; max-width: 1040px; padding: 0 clamp(28px, 8vw, 120px) clamp(52px, 8vh, 92px); text-align: start; }
.tech-hero-copy .eyebrow { justify-content: flex-start; margin-block-end: 26px; color: #fff; }
.tech-hero-copy .eyebrow::before { background: #fff; }
.tech-hero-copy h1 { font-weight: 300; font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.tech-hero-copy h1 .em { display: block; font-style: italic; color: var(--accent-pink); }
.tech-hero-copy .lead { margin: 22px 0 30px; max-width: 56ch; color: #fff; }
@media (max-width: 760px) { .tech-hero-slices { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } }

/* centered intro lead under "The Science of You" */
.tech-intro-lead { margin-inline: auto; text-align: center; max-width: 68ch; }

/* Device flip cards: product story on the front, technical specs (with an
   in-clinic photo strip) on the back. Reuses the site-wide .flipcard flip;
   the flip Stimulus controller adds .is-flipped for touch and keyboard. */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1020px) { .tech-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 660px)  { .tech-grid { grid-template-columns: 1fr; } }
.tech-card { perspective: 1400px; cursor: pointer; }
.tech-card .flip-inner { min-height: clamp(450px, 36vw, 540px); }
.tech-card .flip-front, .tech-card .flip-back { padding: 0; justify-content: flex-start; border: 1px solid var(--line); background: var(--card); }
.tech-card .flip-front::after { content: none; }
/* front product shots (July 26 batch) all sit on a pure-white studio
   background — the media box is the same white, so every card shows the
   full device on one seamless, uniform stage */
.tech-card .tech-media { display: block; height: clamp(190px, 16vw, 240px); background: #fff; }
.tech-card .tech-media img { width: 100%; height: 100%; object-fit: contain; }
/* the clinic photo fills whatever the spec text leaves free — as large as the
   card allows without ever clipping the copy */
.tech-card .tech-back-media { display: block; flex: 1 1 auto; min-height: clamp(180px, 15vw, 240px); background-size: cover; background-position: center; }
.tech-card .tech-copy { padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 10px; }
.tech-card .badge { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.tech-card h3 { margin: 0; font-family: var(--serif-text); font-weight: 500; font-size: 22px; color: var(--text-bright); }
.tech-card .tech-copy p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text-soft); }
.tech-card .flip-back { background: #f4efea; }
.tech-card .flip-back .badge { color: #8a6e72; }
.tech-card .flip-back h3 { color: #2a2224; -webkit-text-stroke: 0; }
.tech-card .flip-back p { color: #5a4d4f; }
/* tap / keyboard flip (mirrors the :hover flip) */
.flipcard.is-flipped .flip-inner { transform: rotateY(180deg); }
[dir="rtl"] .flipcard.is-flipped .flip-inner { transform: rotateY(-180deg); }
.flipcard.is-flipped .flip-front { visibility: hidden; }
/* light theme: back face follows the theme's card surface (matches site-wide
   flip-back remap at the end of the theme block) */
html[data-theme="light"] .tech-card .flip-back { background: var(--card); }
html[data-theme="light"] .tech-card .tech-media { background: #fff; }
html[data-theme="light"] .tech-card h3 { color: var(--text); -webkit-text-stroke: 0; }
/* compact "The Science of You" band — tight padding, full-size type, so the
   copy fills the band instead of white space */
.tech-intro { padding-block: clamp(30px, 4vw, 48px); }
.tech-intro .sec-head { margin-block-end: 14px; }
.tech-intro .sec-head .eyebrow { margin-block-end: 12px; }
.tech-intro .sec-head h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.tech-intro .tech-intro-lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.8; max-width: 66ch; }
/* front badge reads like the back one — override the light-theme
   .flip-front .badge remap (#DCC6C9, meant for badges over dark photos):
   these fronts are plain cards, not photo faces */
html[data-theme="light"] .tech-card .flip-front .badge { color: var(--accent); }

/* Journal article hero — half copy, half cover image (the same cover the
   post's card shows on the Journal grid) */
.jra-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; margin-block-end: clamp(36px, 5vw, 60px); }
.jra-hero-media { margin: 0; overflow: hidden; background: var(--card-2); border-radius: 2px; }
.jra-hero-media img { display: block; width: 100%; height: 100%; min-height: 340px; max-height: 56vh; object-fit: cover; }
@media (max-width: 860px) {
  .jra-hero { grid-template-columns: 1fr; gap: 28px; }
  .jra-hero-media img { min-height: 0; height: 52vw; }
}

/* Protocol detail pages — motion retouch (July 2026). Hover micro-lift on the
   stage cards, matching the site's card language; scoped so shared classes on
   other pages are untouched. */
.proto-detail .stage { transition: transform .45s var(--ease-soft), border-color .45s var(--ease-soft), background .45s var(--ease-soft); }
.proto-detail .stage:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--card-2); }
.proto-detail .stage:hover .wk { color: var(--accent-soft); }
.proto-detail .rows li .n { transition: color .3s var(--ease-soft); }
.proto-detail .rows li:hover .n { color: var(--accent-soft); }
html[data-theme="light"] .proto-detail .stage:hover { background: #fff; box-shadow: 0 14px 34px rgba(43,33,37,.08); }
/* protocol patient-story band — the .section wrapper already pads the block;
   .pull-band stacked a second full section padding on top of it. One tight
   rhythm instead. */
.proto-story { padding-block: clamp(40px, 6vw, 72px); }
.proto-story .pull-band { padding-block: 0; }
/* protocol closing CTA — tighter than the default full section rhythm */
.cta-center--tight { padding-block: clamp(44px, 6vw, 80px); }

/* NeuSkin Method timeline — the flip quarters, a step larger than the
   original cards, in a shorter scroll run than the default hscroll */
.hscroll--method { height: 200vh; }
.hscroll--method .hpanel { width: 25vw; min-width: 300px; height: clamp(340px, 44vh, 430px); }
.hscroll--method .hpanel .flip-inner { min-height: 0; height: 100%; }

/* clinic philosophy — sticky statement column with a photo underneath */
.clinic-statement-col { position: sticky; top: 110px; }
.clinic-statement-media { margin: clamp(26px, 4vw, 42px) 0 0; overflow: hidden; }
.clinic-statement-media img { display: block; width: 100%; max-height: 400px; object-fit: cover; transition: transform 1.2s var(--ease-soft); }
.clinic-statement-media:hover img { transform: scale(1.04); }
@media (max-width: 880px) { .clinic-statement-col { position: static; } }

/* ============================ custom cursor ============================ */
/* Injected by cursor_controller (fine pointers, motion-safe only): a cream
   dot rides the pointer; the mauve ring trails it and swells over anything
   clickable. .ns-cursor-on hides the native arrow — but never over form
   fields, where the pair goes .is-muted and the I-beam returns. */
html.ns-cursor-on body, html.ns-cursor-on body * { cursor: none !important; }
html.ns-cursor-on input, html.ns-cursor-on textarea, html.ns-cursor-on select { cursor: auto !important; }
.ns-cursor-dot, .ns-cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 240; /* above the intro splash (200) */
  border-radius: 50%; pointer-events: none; opacity: 0;
}
.ns-cursor-dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #efe3da;
  transition: opacity .35s var(--ease-soft), width .25s var(--ease-soft), height .25s var(--ease-soft), margin .25s var(--ease-soft);
}
.ns-cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid var(--accent-dusty); background: transparent;
  transition: opacity .35s var(--ease-soft), width .35s var(--ease-soft), height .35s var(--ease-soft),
              margin .35s var(--ease-soft), border-color .35s var(--ease-soft), background .35s var(--ease-soft);
}
.ns-cursor-dot.is-shown { opacity: 1; }
.ns-cursor-ring.is-shown { opacity: .9; }
.ns-cursor-dot.is-muted, .ns-cursor-ring.is-muted { opacity: 0; }
.ns-cursor-ring.is-hot {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-color: var(--accent-soft); background: rgba(159,132,136,.14);
}
.ns-cursor-dot.is-down { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
.ns-cursor-ring.is-down { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.ns-cursor-ring.is-hot.is-down { width: 48px; height: 48px; margin: -24px 0 0 -24px; }

/* ============================ hover motion pass ============================ */
/* Buttons lift with a soft shadow; settle back while pressed. The transition
   list restates the color moves so this shorthand doesn't clobber them. */
.btn, .btn-inquire, .locale-switch {
  transition: background .3s var(--ease-soft), color .3s, border-color .3s,
              transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.btn:hover, .btn-inquire:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.55); }
.btn:active, .btn-inquire:active { transform: translateY(0); box-shadow: 0 6px 16px -10px rgba(0,0,0,.45); }
html[data-theme="light"] .btn:hover,
html[data-theme="light"] .btn-inquire:hover { box-shadow: 0 14px 30px -16px rgba(43,33,37,.35); }

/* Nav links: a hairline underline sweeps in from the reading edge. */
.site-nav a { position: relative; }
.site-nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -7px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .45s var(--ease-soft);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
[dir="rtl"] .site-nav a::after { transform-origin: 0 50%; }
[dir="rtl"] .site-nav a:hover::after, [dir="rtl"] .site-nav a:focus-visible::after { transform-origin: 100% 50%; }

/* Magnetic pull (magnetic_controller): the standalone translate property
   keeps this clear of transform-based show/hide animations. */
.is-magnetic { transition: translate .4s var(--ease-out); will-change: translate; }

/* ============================ ambient / floating motion ============================ */
/* Slow drift utilities for decorative accents — transform-only, and the global
   reduced-motion block above already freezes them. */
@keyframes ns-float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ns-float-drift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(8px, -10px) rotate(2deg); } }
@keyframes ns-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.float-slow  { animation: ns-float-slow 7s ease-in-out infinite; }
.float-drift { animation: ns-float-drift 11s ease-in-out infinite; }
.breathe     { animation: ns-breathe 9s ease-in-out infinite; }
.float-delay-1 { animation-delay: 1.2s; } .float-delay-2 { animation-delay: 2.4s; } .float-delay-3 { animation-delay: 3.6s; }
/* ornaments keep their spin — drift wraps them without fighting it */
.orn.float-drift { animation: ns-float-drift 14s ease-in-out infinite; }

/* ============================ marquee strip ============================ */
/* Seamless loop: the track holds two identical segments and slides one
   segment-width; pauses on hover; direction flips for RTL. Under reduced
   motion the global block freezes it into a static word band. */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(18px, 2.4vw, 30px); }
.marquee-track { display: flex; width: max-content; animation: ns-marquee 42s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-seg { display: flex; align-items: baseline; flex: none; }
.marquee-word {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.2; color: var(--text-soft); white-space: nowrap;
}
.marquee-word.em { font-style: italic; color: var(--accent-soft); }
.marquee-sep { color: var(--accent); margin-inline: clamp(20px, 2.6vw, 40px); font-size: .9em; }
@keyframes ns-marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee-track { animation-name: ns-marquee-rtl; }
@keyframes ns-marquee-rtl { to { transform: translateX(50%); } }

/* ============================ motion pass II ============================ */
/* Header tucks away while scrolling down; any scroll-up brings it back
   (header_controller adds/removes .is-tucked). */
.site-header {
  transition: background .5s var(--ease-soft), padding .4s var(--ease-soft),
              border-color .5s, transform .5s var(--ease-soft);
}
.site-header.is-tucked { transform: translateY(-100%); }

/* Hero headline word cascade: each word is its own mask window rising in
   sequence (home hero). Slight padding keeps descenders out of the clip. */
.hero h1 .wd { display: inline-block; padding-block-end: .06em; margin-block-end: -.06em; vertical-align: top; }

/* Ken Burns on page heroes — interior pages open with a slow drift-zoom on
   their hero media. Composes with the wrapper's parallax (this transform
   lives on the img / ::before, parallax on the wrapper); frozen under
   reduced motion by the global block above. */
.page-hero.has-bg::before { animation: ns-kb 30s var(--ease-soft) infinite alternate; }
.over-hero-media img { animation: ns-kb 32s var(--ease-soft) infinite alternate; }
.split-hero-media img { animation: ns-kb2 34s var(--ease-soft) infinite alternate; }
.hero-media-img { animation: ns-kb 36s var(--ease-soft) infinite alternate; }

/* Six-protocols index: rows cascade in (per-row data-reveal in the view);
   once the reveal lands, hand the row's own hover transitions back. */
.reveal-ready .proto-row[data-reveal].is-in {
  transition: opacity .9s var(--ease-soft), transform 1s var(--ease-soft),
              padding-inline-start .35s var(--ease-soft), background .35s;
}
/* while the pointer wanders the list, the sticky stage image leans in */
.proto-index:hover .proto-stage-img.is-shown { transform: scale(1.045); }

/* ============================ smooth scrolling (Lenis) ============================ */
/* Recommended Lenis host styles; .lenis-smooth turns the CSS smooth-anchor
   behavior off so the two smoothers never fight. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============================================================
 * Sept 2026 — client UX audit pass
 * ============================================================ */

/* ---- Header: booking button + submenus + mobile panel (audit 9, 12) ---- */
.btn-book {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  padding: 10px 22px; background: var(--accent); border: 1px solid var(--accent); color: #fff; cursor: pointer;
  transition: background .3s var(--ease-soft), border-color .3s, transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.btn-book:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.45); }
html[data-theme="light"] .btn-book { color: #fff; }
[dir="rtl"] .btn-book, [dir="rtl"] .btn-inquire, [dir="rtl"] .site-nav a, [dir="rtl"] .btn { letter-spacing: 0; }

.site-nav { position: relative; }
.nav-item { position: relative; display: flex; align-items: center; gap: 4px; }
.nav-item .nav-parent { display: inline-block; }
.nav-caret {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  padding: 0; border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
  transition: transform .3s var(--ease-soft), color .3s;
}
.nav-item:hover .nav-caret, .nav-item.is-open .nav-caret { color: var(--text-bright); transform: rotate(180deg); }
.nav-sub {
  position: absolute; top: calc(100% + 18px); inset-inline-start: -18px; z-index: 5;
  min-width: 280px; padding: 14px 8px; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 60px -24px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease-soft), transform .3s var(--ease-soft), visibility .3s;
}
/* hover bridge so the pointer can travel from the parent to the panel */
.nav-sub::before { content: ""; position: absolute; top: -20px; inset-inline: 0; height: 20px; }
.nav-item:hover .nav-sub, .nav-item.is-open .nav-sub, .nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; }
.site-nav .nav-sub a {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 16px;
  font-size: 13px; letter-spacing: .02em; text-transform: none; color: var(--text);
  transition: background .25s, color .25s;
}
.site-nav .nav-sub a::after { display: none; }
.site-nav .nav-sub a:hover { background: var(--surface); color: var(--text-bright); }
.site-nav .nav-sub a small { font-size: 11.5px; color: var(--text-muted); letter-spacing: 0; text-transform: none; line-height: 1.4; }
.site-nav .nav-sub .nav-sub-all { font-family: var(--sans); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; padding-bottom: 12px; }
[dir="rtl"] .site-nav .nav-sub .nav-sub-all { letter-spacing: 0; }
html[data-theme="light"] .nav-sub { box-shadow: 0 30px 60px -28px rgba(43,33,37,.28); }
.nav-mobile-actions { display: none; }

/* burger (hidden on desktop) */
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 38px; padding: 0 9px; border: 1px solid var(--line); border-radius: 19px; background: transparent; cursor: pointer; }
.nav-burger span { display: block; height: 1.5px; background: var(--text); transition: transform .3s var(--ease-soft), opacity .3s; }
.site-header.is-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-header.is-open .nav-burger span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1180px) {
  .site-nav { gap: 26px; }
  .site-nav a { font-size: 11.5px; letter-spacing: .1em; }
  .btn-book { display: none; }
}
@media (max-width: 880px) {
  .site-header { flex-wrap: wrap; }
  .nav-burger { display: flex; order: 3; }
  .header-actions { order: 2; gap: 10px; }
  .header-actions .btn-inquire { display: none; }
  html.nav-open .site-header { background: var(--ground); border-bottom-color: var(--line); }
  html.nav-open .site-header.is-tucked { transform: none; }
  /* the nav panel */
  .site-nav {
    display: none; order: 4; flex-direction: column; align-items: stretch; gap: 0;
    width: 100%; margin-top: 18px; padding: 8px 0 22px; border-top: 1px solid var(--line);
    max-height: calc(100vh - 110px); overflow-y: auto;
  }
  .site-header.is-open .site-nav { display: flex; }
  .site-nav > a, .nav-item .nav-parent { display: block; padding: 15px 4px; font-size: 13px; letter-spacing: .14em; }
  .site-nav > a::after, .nav-item .nav-parent::after { display: none; }
  .nav-item { flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
  .nav-item .nav-parent { flex: 1; }
  .nav-caret { width: 44px; height: 44px; }
  .nav-sub {
    position: static; display: none; min-width: 0; width: 100%; padding: 0 0 14px 0;
    border: 0; box-shadow: none; background: transparent; opacity: 1; visibility: visible; transform: none;
  }
  .nav-sub::before { display: none; }
  .nav-item.is-open .nav-sub { display: flex; }
  .nav-item:hover .nav-sub:not(.is-open) { display: none; }
  .nav-item.is-open:hover .nav-sub { display: flex; }
  .site-nav .nav-sub a { padding: 10px 14px; }
  .nav-mobile-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
  .nav-mobile-actions .btn { width: 100%; }
}

/* ---- Floating WhatsApp (audit 9) — replaces the floating booking pill ---- */
.floating-wa {
  position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 80;
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px;
  border-radius: 26px; background: #25D366; color: #fff;
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.55);
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), background .3s;
}
[dir="rtl"] .floating-wa { padding: 0 16px 0 20px; letter-spacing: 0; font-size: 13px; }
.floating-wa:hover { background: #1fb85a; transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(0,0,0,.6); }
.floating-wa svg { flex: none; }
@media (max-width: 640px) {
  .floating-wa { width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 50%; }
  .floating-wa-label { display: none; }
  /* keep clear of the cookie banner while it shows */
  .cookie-banner { inset-inline: 16px; bottom: 90px; }
}

/* ---- Hero: poster-first media (audit 1, 2) ---- */
.hero-media-poster { position: absolute; inset: 0; margin: 0; }
.hero-media-poster img { width: 100%; height: 100%; object-fit: cover; }
.hero-media-video { opacity: 0; transition: opacity 1.2s var(--ease-soft); }
.hero-media-video:not([poster=""]) { background: transparent; }
.hero-media-video.is-playing { opacity: 1; }
/* the poster keeps a gentle drift so phones (no video) still breathe */
.hero-media-poster img { animation: ns-kb 36s var(--ease-soft) infinite alternate; }

/* ---- Home: latest journal band (audit 8, 13) ---- */
.home-journal { padding-block: var(--space-section); }
.home-journal-grid { margin-top: var(--space-block); }
.home-journal .jr-card-img { height: 260px; }
@media (max-width: 880px) { .home-journal .jr-card-img { height: 220px; } }

/* ---- Footer: clinic location (audit 6) ---- */
.footer-map-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-soft); font-family: var(--sans); font-size: 13px; transition: color .3s; }
.footer-map-link:hover { color: var(--text-soft); }
.footer-map-link svg { flex: none; }

/* ---- Technologies: header submenu anchors land below the fixed header ---- */
.tech-card[id] { scroll-margin-top: 120px; }

/* ---- Arabic display type (audit 4, 7, 11) ----
   Kufi is now the single Arabic face (tokens.css). Arabic letterforms are tall:
   the masked reveals (overflow: hidden windows) need head-room, the sub-1 line
   heights that suit Latin display type clip the ascenders, and the 122px
   over-hero size broke Arabic titles into one word per line. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] .jr-title, [dir="rtl"] .fq-title, [dir="rtl"] .st-title { -webkit-text-stroke: 0; }
[dir="rtl"] .hero h1 { font-size: clamp(38px, 6vw, 84px); line-height: 1.3; font-weight: 700; }
[dir="rtl"] .hero h1 .wd { padding-block: .12em; margin-block: -.12em; line-height: 1.3; }
[dir="rtl"] .reveal-ready [data-reveal="mask"] { padding-block: .1em; margin-block: -.1em; }
[dir="rtl"] .over-hero-copy h1 { font-size: clamp(34px, 4.6vw, 72px); line-height: 1.28; letter-spacing: 0; font-weight: 700; }
[dir="rtl"] .over-hero-copy h1 .line { padding-block: .08em; }
[dir="rtl"] .over-hero-copy h1 .line.em { font-style: normal; font-weight: 400; color: var(--accent-pink); margin-block-start: .1em; }
[dir="rtl"] .over-hero-copy { max-width: 860px; }
[dir="rtl"] .page-hero h1 { font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.3; letter-spacing: 0; max-width: 24ch; font-weight: 700; }
[dir="rtl"] .page-hero h1 .em, [dir="rtl"] .sec-head .em, [dir="rtl"] .cta-band-copy .em, [dir="rtl"] .cta-center .em,
[dir="rtl"] .hscroll-intro h2 .em, [dir="rtl"] .split-hero-copy h1 .em, [dir="rtl"] .tech-hero-copy h1 .em,
[dir="rtl"] .jr-title .em, [dir="rtl"] .fq-title .em, [dir="rtl"] .st-title .em, [dir="rtl"] .mm-hero-main { font-style: normal; }
[dir="rtl"] .sec-head h2, [dir="rtl"] .cta-band-copy h2, [dir="rtl"] .cta-center h2, [dir="rtl"] .hscroll-intro h2,
[dir="rtl"] .split-hero-copy h1, [dir="rtl"] .tech-hero-copy h1, [dir="rtl"] .clinic-statement,
[dir="rtl"] .jr-title, [dir="rtl"] .fq-title, [dir="rtl"] .st-title, [dir="rtl"] .jra-title { line-height: 1.32; letter-spacing: 0; font-weight: 700; }
[dir="rtl"] .jr-title, [dir="rtl"] .fq-title { font-size: clamp(34px, 4.8vw, 72px); }
[dir="rtl"] h3, [dir="rtl"] .proto-row h3, [dir="rtl"] .proto-card h3, [dir="rtl"] .jr-card h3 { line-height: 1.4; }
[dir="rtl"] .eyebrow, [dir="rtl"] .label, [dir="rtl"] .arrowlink, [dir="rtl"] .chip, [dir="rtl"] .ptag,
[dir="rtl"] .field label, [dir="rtl"] .jr-card-meta, [dir="rtl"] .jr-eyebrow .lbl, [dir="rtl"] .fq-eyebrow .lbl,
[dir="rtl"] .st-eyebrow, [dir="rtl"] .footer-socials, [dir="rtl"] .site-footer h4, [dir="rtl"] .proto-card-tag,
[dir="rtl"] .proto-card-go, [dir="rtl"] .hshot figcaption, [dir="rtl"] .shot figcaption, [dir="rtl"] .col .num,
[dir="rtl"] .ns-expand .ns-panel-copy .num, [dir="rtl"] .proto-stage-cap .cap-tag, [dir="rtl"] .proto-stage-cap .cap-cta,
[dir="rtl"] .cookie-banner .cookie-btn, [dir="rtl"] .locale-switch, [dir="rtl"] .marquee-word { letter-spacing: 0; }
[dir="rtl"] .marquee-word { font-style: normal; font-size: clamp(1.3rem, 2.2vw, 2rem); }
[dir="rtl"] .sign, [dir="rtl"] .quote p, [dir="rtl"] .pull-band blockquote, [dir="rtl"] .apply-quote blockquote,
[dir="rtl"] .story-copy blockquote, [dir="rtl"] .hshot-outro blockquote, [dir="rtl"] .proto-stage-cap .cap-promise,
[dir="rtl"] .tier .line { font-style: normal; }
[dir="rtl"] .body-copy, [dir="rtl"] .lead, [dir="rtl"] p { line-height: 1.9; }

/* ---- Inquiry form (shared partial; compact variant in the article aside) ---- */
.form--compact { gap: 14px; max-width: none; }
.form--compact .form-row { grid-template-columns: 1fr; }
.form--compact .btn { width: 100%; }

/* header density: keep nav labels on one line and give the two header
   buttons room on laptop widths */
.site-nav > a, .nav-item .nav-parent { white-space: nowrap; }
@media (max-width: 1500px) {
  .site-nav { gap: 24px; }
  .btn-book, .btn-inquire { padding-inline: 16px; letter-spacing: .12em; }
  .site-header { padding-inline: clamp(16px, 2.5vw, 36px); }
}
/* mobile panel buttons: the nav link colour/underline rules must not bleed
   into the two action buttons */
.nav-mobile-actions .btn { color: var(--btn-ink); padding: 15px 20px; justify-content: center; }
.nav-mobile-actions .btn::after, .nav-mobile-actions .btn--ghost::after { display: none; }
.nav-mobile-actions .btn--ghost { color: var(--text); background: transparent; }
@media (max-width: 880px) {
  .nav-caret { width: 40px; height: 40px; border: 0; border-radius: 0; }
}

/* ---- Landscape overlay hero on short viewports (client follow-up) ----
   The copy is bottom-aligned inside a 78vh box with overflow hidden; on a
   laptop (≈1280×650) three headline lines plus the lead were taller than the
   box and the first line vanished under the fixed header. Give the copy the
   header's height as top padding so the section grows instead of clipping,
   and size the Arabic title so it fits comfortably. */
.over-hero-copy { padding-top: clamp(110px, 16vh, 150px); }
[dir="rtl"] .over-hero-copy h1 { font-size: clamp(30px, 3.6vw, 58px); line-height: 1.3; }
[dir="rtl"] .over-hero-copy h1 .line.em { font-size: .92em; }
[dir="rtl"] .over-hero-lead { font-size: clamp(14px, 1.05vw, 17px); line-height: 1.8; }
.over-hero-copy h1 { font-size: clamp(40px, 5.6vw, 96px); }
@media (max-height: 760px) {
  .over-hero-copy h1 { font-size: clamp(34px, 4.8vw, 72px); }
  [dir="rtl"] .over-hero-copy h1 { font-size: clamp(28px, 3.2vw, 48px); }
  .over-hero-copy { padding-bottom: clamp(32px, 5vh, 56px); }
  .over-hero-eyebrow { margin-block-end: 16px; }
  .over-hero-lead { margin-top: 18px; }
}

/* ---- Every photo hero: room for the fixed header + short-viewport sizes ---- */
.tech-hero-copy { padding-top: clamp(110px, 16vh, 150px); }
.page-hero.has-bg { padding-top: clamp(110px, 16vh, 150px); }
[dir="rtl"] .tech-hero-copy h1 { font-size: clamp(28px, 3.2vw, 52px); line-height: 1.3; letter-spacing: 0; font-weight: 700; }
[dir="rtl"] .tech-hero-copy h1 .em { font-style: normal; }
[dir="rtl"] .over-hero-copy h1.clinic-hero-title { font-size: clamp(28px, 3.4vw, 54px); line-height: 1.3; }
@media (max-height: 760px) {
  .tech-hero-copy h1 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
  [dir="rtl"] .tech-hero-copy h1 { font-size: clamp(26px, 2.8vw, 44px); }
  .page-hero.has-bg h1 { font-size: clamp(2rem, 4.4vw, 3.6rem); }
  .split-hero-copy { padding-top: clamp(110px, 16vh, 140px); }
}
/* header submenu rows: both lines start-aligned in RTL as well */
.site-nav .nav-sub a { align-items: flex-start; text-align: start; }
.site-nav .nav-sub a bdi { display: block; }

/* ---- Device pages (/technologies/:slug) ---- */
.over-hero--device .over-hero-media img { object-position: center 40%; }
.device-split { align-items: center; }
.device-shot { background: #fff; border: 1px solid var(--line); padding: clamp(20px, 3vw, 44px); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.device-shot img { width: 100%; height: 100%; object-fit: contain; }
.device-specs { margin-top: 12px; }
.device-specs li .t { font-size: 15px; }
.device-others { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: var(--space-block); }
.device-other { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--card); border: 1px solid var(--line); transition: transform .4s var(--ease-soft), border-color .4s; }
.device-other:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.device-other-media { display: block; height: 150px; background: #fff; }
.device-other-media img { width: 100%; height: 100%; object-fit: contain; }
.device-other .badge { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-top: 8px; }
[dir="rtl"] .device-other .badge { letter-spacing: 0; }
.device-other h3 { margin: 0; font-size: 20px; color: var(--text-bright); }
@media (max-width: 1020px) { .device-others { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .device-others { grid-template-columns: 1fr; } }
.tech-card .tech-more { margin-top: auto; padding-top: 12px; font-size: 10.5px; position: relative; z-index: 2; }
[dir="rtl"] .tech-card .tech-more { letter-spacing: 0; }
/* Arabic eyebrows over photo heroes: no tracking (breaks letter joins) */
[dir="rtl"] .clinic-hero-eyebrow, [dir="rtl"] .mysa-hero-eyebrow, [dir="rtl"] .journey-eyebrow,
[dir="rtl"] .mysa-method-eyebrow, [dir="rtl"] .badge, [dir="rtl"] .tech-card .badge { letter-spacing: 0; }