/* ============================================================
   Fly & Smile TLV — colour system
   ============================================================

   Seven colours, from the Brand Book §3.1. They are declared once,
   here, and nowhere else in this file: every rule below reaches a
   colour through a role token, never through a literal.

     #FFFFFF  white   background, text on dark
     #E0DFD4  ivory   main light ground
     #B5B49F  sage    secondary text, borders
     #7A786B  stone   body text, visual emphasis
     #4F5F4B  green   CTAs, buttons, headlines, dark grounds
     #3A302B  brown   dark headlines, deep partner in gradients
     #0B0700  black   deepest ground, luxury contrast only

   The role tokens below are written for a LIGHT ground. Every dark
   section re-declares the same names for a dark ground — see
   "Dark ground" further down — so one rule serves both: a hairline
   is stone over ivory and ivory over green without the rule knowing
   which section it landed in.

   Two exceptions are deliberate and are the only colours on the site
   outside the seven: #B23B3B / #882222 on form validation. Nothing in
   the palette reads as an error, and a form that cannot signal one is
   worse than a form with one colour off-palette.
   ============================================================ */

:root {
  /* ---- the palette ---- */
  --fs-white: #FFFFFF;  --fs-white-rgb: 255, 255, 255;
  --fs-ivory: #E0DFD4;  --fs-ivory-rgb: 224, 223, 212;
  --fs-sage:  #B5B49F;  --fs-sage-rgb:  181, 180, 159;
  --fs-stone: #7A786B;  --fs-stone-rgb: 122, 120, 107;
  --fs-green: #4F5F4B;  --fs-green-rgb:  79,  95,  75;
  --fs-brown: #3A302B;  --fs-brown-rgb:  58,  48,  43;
  --fs-black: #0B0700;  --fs-black-rgb:  11,   7,   0;

  /* The accent family. The seven greens and neutrals above are the grounds and
     the type; gold is what the design has always used to draw on them — rules,
     frames, ornaments, highlighted words, the CTA. Three tones, as the original
     had: the base, a highlight for gradients and hover, and a deeper one that
     stays legible where the ground is light. */
  --fs-gold:       #C9A462;  --fs-gold-rgb:       201, 164,  98;
  --fs-gold-light: #E4C892;  --fs-gold-light-rgb: 228, 200, 146;
  --fs-gold-deep:  #B0873F;  --fs-gold-deep-rgb:  176, 135,  63;

  /* ---- roles on a light ground ---- */
  /* The Brand Book names Neutral Stone as body text and Primary Light as the
     main ground — but that pairing measures 3.2:1, under the 4.5:1 that
     IS 5568 asks of body copy, so it cannot carry running text. The ladder
     below keeps every step inside the palette and every step above AA:
     headlines 14.7:1, body 9.2:1, and stone kept for the large, secondary
     type it can still carry. */
  --ink:          var(--fs-black);      --ink-rgb:      var(--fs-black-rgb);
  --ink-body:     var(--fs-brown);      --ink-body-rgb: var(--fs-brown-rgb);
  --ink-mute:     var(--fs-stone);
  --accent:       var(--fs-gold-deep);  --accent-rgb:   var(--fs-gold-deep-rgb);
  --accent-hi:    var(--fs-gold);
  --line:         var(--fs-gold);       --line-rgb:     var(--fs-gold-rgb);
  --shadow-rgb:   var(--fs-brown-rgb);

  /* The primary CTA, as it always was: a gold sweep carrying near-black. */
  --cta-bg:  linear-gradient(135deg, var(--fs-gold-light) 0%, var(--fs-gold) 60%, var(--fs-gold-deep) 100%);
  --cta-ink: var(--fs-black);

  /* ---- legacy names, kept so the rules below read unchanged ---- */
  --color-deep-green:         var(--fs-brown);
  --color-deep-green-darkest: var(--fs-green);
  --color-primary:            var(--fs-green);
  --color-gold:               var(--fs-gold);
  --color-gold-light:         var(--fs-gold-light);
  --text-light:               var(--fs-white);
  --text-secondary:           var(--fs-ivory);

  --font-he: 'Assistant', sans-serif;
  --font-latin: 'Montserrat', 'Inter', sans-serif;

  --container-max: 1400px;
  --space-8: 8px;
}

/* ---- Dark ground --------------------------------------------
   Every section that sits on green, brown or black. Re-declaring the
   role tokens here is the whole mechanism: custom properties inherit,
   so every descendant rule resolves its hairlines, accents and body
   copy against the ground it is actually on. Adding a dark section
   later means adding its selector to this list — nothing else. */

.hero,
.site-header,
.mobile-nav,
.fcase,
.testimonials__stage,
.site-footer,
.site-header--simple,
.why,
.voices,
.vmotion,
.vlightbox,
.tcreed,
.tbeyond,
.tgroup__frame,
.abhero,
.abintro,
.abappr__panel,
.ablab,
.abteam,
.abwhy,
.ablight,
.svohero,
.svhpage,
.svflagship,
.pagehero__bar,
.pageoutro,
.tor-band,
.toronto__panel,
.abmap__frame,
.a11y-fab,
.testimonials-modal__panel {
  --ink:          var(--fs-white);      --ink-rgb:      var(--fs-white-rgb);
  --ink-body:     var(--fs-ivory);      --ink-body-rgb: var(--fs-ivory-rgb);
  --ink-mute:     var(--fs-sage);
  --accent:       var(--fs-gold);       --accent-rgb:   var(--fs-gold-rgb);
  --accent-hi:    var(--fs-gold-light);
  --line:         var(--fs-gold);       --line-rgb:     var(--fs-gold-rgb);
  --shadow-rgb:   var(--fs-black-rgb);

  --cta-bg:  linear-gradient(135deg, var(--fs-gold-light) 0%, var(--fs-gold) 60%, var(--fs-gold-deep) 100%);
  --cta-ink: var(--fs-black);
}

/* ---- Light ground, restated -----------------------------------
   A dark wrapper such as .svhpage contains light sections further down the
   page, and custom properties inherit straight through it. These sections
   declare their own ground rather than depending on what encloses them. */

.trustband,
.team,
.treatments,
.testimonials,
.patients,
.about,
.consult,
.location,
.journey,
.quickform,
.legal-page,
.revwidget,
.svhpage .consult,
.svhpage .svfaq,
.tor .tor-cream {
  --ink:          var(--fs-black);      --ink-rgb:      var(--fs-black-rgb);
  --ink-body:     var(--fs-brown);      --ink-body-rgb: var(--fs-brown-rgb);
  --ink-mute:     var(--fs-stone);
  --accent:       var(--fs-gold-deep);  --accent-rgb:   var(--fs-gold-deep-rgb);
  --accent-hi:    var(--fs-gold);
  --line:         var(--fs-gold);       --line-rgb:     var(--fs-gold-rgb);
  --shadow-rgb:   var(--fs-brown-rgb);

  --cta-bg:  linear-gradient(135deg, var(--fs-gold-light) 0%, var(--fs-gold) 60%, var(--fs-gold-deep) 100%);
  --cta-ink: var(--fs-black);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

/* ---- Skip link + global keyboard focus (IS 5568 / WCAG 2.4.1, 2.4.7) ---- */

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  inset-inline-start: 12px;
  transform: translateY(-140%);
  background: var(--color-deep-green-darkest);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 200ms ease-out;
}

.skip-link:focus {
  transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

body {
  font-family: var(--font-he);
  background: var(--color-deep-green-darkest);
  color: var(--ink);
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; margin: 0; padding: 0; }

/* Numbers / latin fragments stay LTR inside RTL flow.

   Only .ltr changes family: Montserrat has no Hebrew, so putting bare <strong>
   on it made every bold Hebrew phrase fall back to a system face. Bold Hebrew
   now stays in the page's own family and is simply bolder. */
.ltr {
  font-family: var(--font-latin);
  unicode-bidi: isolate;
}

/* A hyphenated Latin term ("E-max") offers a line break after its hyphen, and
   in RTL the stranded "E-" is reordered at the line end so the heading reads
   "ב--E" over "max". Only the break is removed: no dir, no isolation — an
   isolate would split "E-max Ivoclar" into two runs and print it backwards —
   and no change of face, unlike .ltr. */
.nobr { white-space: nowrap; }

strong { unicode-bidi: isolate; }

/* Form controls do not inherit type from their container by default, which is
   why the consultation form's submit label was rendering in the UA default. */
button, input, select, textarea, optgroup {
  font-family: inherit;
}

/* ============ SCROLL CUE ============
   One component for every first screen on the site. The mouse-and-dot was
   designed for the about page hero; it is defined here, once, so that every
   hero shows the identical mark rather than a family of near-copies.

   The pill itself never changes. Only where it is anchored does: over a
   full-bleed hero it floats at the foot of the screen, and in a hero that ends
   on the page's own background it closes the block in normal flow. */

.scrolldown {
  display: flex;
  flex: none;
  justify-content: center;
  width: 26px;
  height: 44px;
  padding-top: 9px;
  border: 1px solid rgba(var(--line-rgb), 0.5);
  border-radius: 14px;
}

.scrolldown span {
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
  animation: scrolldown-dot 1900ms ease-in-out infinite;
}

@keyframes scrolldown-dot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%      { transform: translateY(13px); opacity: 0.15; }
}

.scrolldown:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}

/* Anchored to the foot of the hero — or to the foot of the first screen, when
   the hero runs longer than one. A cue sitting below the fold is telling the
   visitor something they have already worked out for themselves. */
.scrolldown--float {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: min(100%, 100svh);
  transform: translate(-50%, calc(-100% - 30px));
}

/* The home hero is a two-column grid, so 50% is exactly the seam — the cue
   stood on the edge of her hair. It moves under the copy column instead, onto
   the plain ground below the direct line. */
@media (min-width: 901px) {
  .hero .scrolldown--float { left: calc(75% - 20px); }
}

.scrolldown--flow {
  margin-inline: auto;
  margin-top: clamp(28px, 3.6vw, 48px);
}

/* Gold on cream is decorative rather than legible, so on the light page heroes
   the ring takes the deep green and the dot the darker gold. */
.scrolldown--ink { border-color: rgba(var(--line-rgb), 0.32); }
.scrolldown--ink span { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .scrolldown span { animation: none; }
}

.a11y-reduce-motion .scrolldown span { animation: none; }

/* ============ HERO SECTION ============ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 760px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* ---- Atmospheric background (no photo background available — built with CSS) ---- */

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(88% 108% at 20% 34%,
      var(--fs-green) 0%,
      var(--fs-green) 34%,
      rgba(var(--fs-brown-rgb), 0.55) 72%,
      rgba(var(--fs-brown-rgb), 0.9) 100%),
    linear-gradient(152deg,
      var(--fs-green) 0%,
      var(--fs-brown) 62%,
      var(--fs-black) 100%);
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.hero-glow--main {
  width: 66%;
  height: 84%;
  left: -8%;
  top: 2%;
  background: radial-gradient(closest-side, rgba(var(--fs-sage-rgb), 0.30), rgba(var(--fs-green-rgb), 0.22) 58%, transparent 84%);
}

.hero-glow--warm {
  width: 36%;
  height: 48%;
  left: 4%;
  top: 8%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.24), transparent 75%);
  filter: blur(70px);
}

.hero-ray {
  position: absolute;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.05), transparent 70%);
  filter: blur(18px);
}

.hero-ray--1 {
  width: 140%;
  height: 60px;
  left: -20%;
  top: 18%;
  transform: rotate(18deg);
}

.hero-ray--2 {
  width: 140%;
  height: 90px;
  left: -20%;
  top: 46%;
  transform: rotate(14deg);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), transparent 65%);
}

.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 15%, transparent 42%, rgba(var(--fs-black-rgb), 0.5) 100%),
    radial-gradient(90% 70% at 78% 60%, rgba(var(--fs-brown-rgb), 0.34), transparent 62%),
    /* the seam: a soft pool of ground under the model, so the cut-out sits in
       the space rather than on top of it */
    radial-gradient(46% 38% at 24% 96%, rgba(var(--fs-black-rgb), 0.42), transparent 70%);
}

/* ---- Header ---- */

/* ---- The header is pinned to the viewport on every page ----
   It used to scroll away with the hero it sits inside, which on pages that run
   to eighteen thousand pixels meant scrolling all the way back to reach the
   menu. It is now fixed, and the block it used to occupy in flow is given back
   as padding on its parent, so nothing on any page moves.

   At the top of the page it stays transparent, exactly as designed, sitting
   over the hero photograph. Once the page has moved it takes a dark translucent
   ground so the white logo and the nav stay legible over whatever happens to be
   under it, and tightens up so it costs less of a phone screen. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  width: 100%;
  transition: background-color 320ms ease, box-shadow 320ms ease;
}

.site-header__inner {
  transition: padding-block 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header.is-stuck {
  background: linear-gradient(180deg, rgba(var(--fs-green-rgb), 0.94), rgba(var(--fs-brown-rgb), 0.94));
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 rgba(var(--shadow-rgb), 0.22), 0 14px 34px -22px rgba(var(--shadow-rgb), 0.9);
}

.site-header.is-stuck .site-header__inner {
  padding-top: clamp(10px, 1.1vw, 16px);
  padding-bottom: clamp(10px, 1.1vw, 16px);
}

/* The Toronto page carries its breadcrumbs inside the header. They belong to
   the top of the page, not to a bar that follows the reader down it. */
.site-header.is-stuck .tor-crumbs { display: none; }

/* The space the header no longer takes in flow, handed back to whatever it sits
   inside — measured from the header itself at load, so a page whose header is
   taller (Toronto's breadcrumbs, the legal pages' back-link) gets the right
   amount without a special case. */
:root { --header-h: 88px; }

.hero,
.abhero,
.svohero,
.svhpage,
.pagehero__bar,
.tor-band,
body > .site-header--simple + main {
  padding-top: var(--header-h);
}

/* The home and about heroes isolate themselves so their glows and scrims stack
   cleanly, and an isolated ancestor traps a fixed descendant inside it: the
   header would paint under every section that follows. Lifting those two heroes
   above the rest of the page frees it. They sit at the top of the document and
   never overlap anything below them, so nothing else changes — only the header
   they contain, which is the point. */
.hero,
.abhero { z-index: 90; }

/* Anything the page scrolls to by anchor — the scroll cue, the nav links —
   stops below the bar rather than under it. */
:target,
section[id],
div[id],
main[id] {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

@media (max-width: 640px) {
  :root { --header-h: 66px; }
}

.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 32px 64px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header__group {
  display: flex;
  align-items: center;
  gap: 56px;
}

.logo img {
  height: 50px;
  width: auto;
}

/* Direct child only — as a descendant selector this also matched
   .main-nav__dropdown and laid the submenu out as a horizontal row. */
.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 38px;
}

.main-nav a {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-body);
  padding-bottom: 8px;
  border-bottom: 1px solid transparent;
  transition: color 250ms ease-out, border-color 250ms ease-out;
  white-space: nowrap;
}

.main-nav a:hover {
  color: var(--ink);
}

.main-nav a.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  padding-inline: 6px;
  margin-inline: -6px;
}

.nav-cta {
  flex-shrink: 0;
}

/* ---- Nav dropdown: "שירותים" submenu — opens on mouse hover (pure CSS)
   and on keyboard focus (JS-managed .is-open, see main.js: a plain
   :focus-within would reopen right after Escape returns focus to the
   trigger, since the trigger sits inside the same <li>). Trigger link
   still navigates to services.html on click. ---- */

.main-nav__item--dropdown {
  position: relative;
}

.main-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.main-nav__chevron {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  transition: transform 250ms ease-out;
}

.main-nav__item--dropdown:hover .main-nav__chevron,
.main-nav__item--dropdown.is-open .main-nav__chevron {
  transform: rotate(180deg);
}

.main-nav__dropdown {
  display: block;   /* vertical stack, per min-width / li + li / divider below */
  position: absolute;
  top: calc(100% + 18px);
  inset-inline-start: 50%;
  transform: translateX(50%) translateY(-8px);
  min-width: 240px;
  padding: 10px;
  background: linear-gradient(160deg, var(--color-deep-green) 0%, var(--color-deep-green-darkest) 100%);
  border: 1px solid rgba(var(--line-rgb), 0.35);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(var(--shadow-rgb), 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease-out, transform 220ms ease-out, visibility 220ms;
  z-index: 20;
}

html[dir="rtl"] .main-nav__dropdown {
  inset-inline-start: auto;
  inset-inline-end: 50%;
  transform: translateX(-50%) translateY(-8px);
}

.main-nav__item--dropdown:hover .main-nav__dropdown,
.main-nav__item--dropdown.is-open .main-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(50%) translateY(0);
}

html[dir="rtl"] .main-nav__item--dropdown:hover .main-nav__dropdown,
html[dir="rtl"] .main-nav__item--dropdown.is-open .main-nav__dropdown {
  transform: translateX(-50%) translateY(0);
}

.main-nav__dropdown li + li {
  margin-top: 2px;
}

.main-nav__dropdown a {
  display: block;
  padding: 11px 16px;
  border-radius: 9px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-body);
  white-space: nowrap;
  border-bottom: none !important;
}

.main-nav__dropdown a:hover,
.main-nav__dropdown a:focus-visible {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--ink);
}

.main-nav__dropdown a.is-active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.main-nav__dropdown-divider {
  height: 1px;
  margin: 8px 6px;
  background: rgba(var(--accent-rgb), 0.22);
}

/* ---- Buttons ---- */

/* ---- Unified CTA button system — one canonical box model for every
   primary/secondary CTA on the site (height, padding, radius, font, icon
   placement, hover/focus/active). Section-specific classes below only ever
   change fill color, never the box model. ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 250ms ease-out, box-shadow 250ms ease-out, background 250ms ease-out, border-color 250ms ease-out, color 250ms ease-out;
}

.btn:active {
  transform: translateY(0);
}

.btn .icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.btn--ghost-gold {
  border: 1px solid rgba(var(--line-rgb), 0.55);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
}

.btn--ghost-gold:hover {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: var(--accent);
}

.btn--gold,
.btn--why,
.btn--toronto,
.btn--journey,
.btn--patients,
.btn--about {
  background: var(--cta-bg);
  color: var(--cta-ink);
}

.btn--gold:hover,
.btn--why:hover,
.btn--toronto:hover,
.btn--journey:hover,
.btn--patients:hover,
.btn--about:hover {
  box-shadow: 0 10px 28px rgba(var(--shadow-rgb), 0.32);
  transform: translateY(-2px);
}

.btn--gold:active,
.btn--why:active,
.btn--toronto:active,
.btn--journey:active,
.btn--patients:active,
.btn--about:active {
  box-shadow: 0 4px 14px rgba(var(--shadow-rgb), 0.22);
}

.btn--outline {
  border: 1px solid rgba(var(--line-rgb), 0.35);
  color: var(--ink);
  background: transparent;
}

.btn--outline:hover {
  border-color: var(--ink);
  background: rgba(var(--fs-ivory-rgb), 0.06);
}

/* ---- Hero content grid ---- */

.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 56px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 32px;
}

.hero-text {
  align-self: center;
  padding-top: 12px;
  padding-bottom: 24px;
}

.hero-copy {
  max-width: 600px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--accent);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.07em;
  margin: 0 0 28px;
}

.eyebrow__line {
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  flex-shrink: 0;
}

.eyebrow__line:last-child {
  background: linear-gradient(90deg, var(--accent), transparent);
}

.hero-title {
  margin: 0 0 28px;
  font-weight: 300;
  font-size: 92px;
  line-height: 1;
}

.hero-title span {
  display: block;
}

.hero-title__light {
  color: var(--ink);
}

.hero-title__gold {
  background: linear-gradient(90deg, var(--accent-hi), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-desc {
  font-size: 23px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-body);
  margin: 0 0 36px;
  max-width: 520px;
}

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 44px;
}

.hero-buttons .btn {
  min-width: 240px;
}

/* ---- Hero image ---- */

.hero-image {
  position: relative;
  z-index: 2;
  height: 100%;
}

.hero-image img {
  position: absolute;
  left: -14%;
  top: -3%;
  width: 138%;
  max-width: none;
  height: 112%;
  object-fit: cover;
  object-position: top center;
  filter: drop-shadow(0 30px 60px rgba(var(--ink-rgb), 0.45));
}

/* ---- Stats row (inline, inside hero-text — no separate bar) ---- */

.hero-stats {
  display: flex;
  align-items: center;
  direction: ltr;
}

.stat {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 14px;
  position: relative;
  direction: rtl;
}

.stat:first-child {
  padding-inline-start: 0;
}

.stat:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 38px;
  background: rgba(var(--fs-ivory-rgb), 0.16);
}

.stat__icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.stat__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  white-space: nowrap;
}

.stat__text strong {
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

.stat__text span {
  font-size: 15px;
  color: var(--ink-body);
  white-space: nowrap;
}

.stat__stars {
  display: flex;
  align-items: center;
  gap: 3px;
  direction: ltr;
}

/* ============ RESPONSIVE ============ */

@media (max-width: 1180px) {
  .site-header__inner,
  .hero-content {
    padding-left: 40px;
    padding-right: 40px;
  }

  .site-header__group { gap: 32px; }
  .main-nav > ul { gap: 20px; }
  .main-nav a { font-size: 16px; }
  .hero-title { font-size: 68px; }
  .hero-desc { font-size: 19px; }
  .hero-buttons .btn { min-width: 200px; }
  .stat__text strong { font-size: 26px; }
  .stat__icon { width: 32px; height: 32px; }
}

@media (max-width: 960px) {
  .main-nav { display: none; }

  .hero {
    height: auto;
    min-height: 100vh;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    padding: 0 40px;
    padding-top: 24px;
  }

  .hero-text {
    order: 3;
    max-width: 100%;
    text-align: center;
    padding-bottom: 32px;
  }

  /* The home hero stacks photograph over copy and runs to nearly two screens on
     a phone, so its foot is nowhere near the first one. The cue leaves the
     corner and joins the column instead, in the band between the photograph and
     the headline — on the first screen, clear of her face above it and of the
     headline and both buttons below. */
  .hero .scrolldown--float {
    position: static;
    order: 2;
    transform: none;
    margin: 20px auto 4px;
  }

  .eyebrow { justify-content: center; }
  .hero-buttons { justify-content: center; }
  .hero-desc { margin-inline: auto; }

  .hero-image {
    order: 1;
    height: 52vh;
    min-height: 340px;
  }

  .hero-image img {
    position: static;
    width: 100%;
    height: 100%;
    left: auto;
    top: auto;
    object-position: top center;
  }

  .hero-stats { flex-wrap: wrap; justify-content: center; row-gap: 20px; }
  .stat { flex: 1 1 50%; justify-content: center; padding: 0 12px; }
  .stat:nth-child(2)::after { display: none; }
}

@media (max-width: 640px) {
  .site-header__inner { padding-top: 20px; }
  .logo img { height: 36px; }

  .eyebrow { font-size: 15px; }
  .hero-title { font-size: 44px; }
  .hero-desc { font-size: 16px; }

  .hero-buttons { flex-direction: column; width: 100%; }
  .hero-buttons .btn { width: 100%; min-width: 0; }

  .hero-stats { padding: 0; }
  .stat { flex: 1 1 100%; justify-content: flex-start; padding: 14px 0; }
  .stat:not(:last-child)::after { display: none; }
  .stat:not(:last-child) { border-bottom: 1px solid rgba(var(--line-rgb), 0.12); }
}

/* ============ PATIENTS SECTION (second screen) ============ */

.patients {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 18% 20%, rgba(var(--fs-white-rgb), 0.92) 0%, rgba(var(--fs-white-rgb), 0) 42%),
    linear-gradient(135deg, var(--fs-white) 0%, var(--fs-ivory) 52%, var(--fs-ivory) 100%);
  padding: 90px 72px;
  display: flex;
  align-items: center;
  font-family: "Assistant", sans-serif;
}

.patients__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.patients__bg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.patients__container {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  min-height: 850px;
  display: grid;
  /* direction: rtl (inherited) places grid track 1 on the right and track 2
     on the left — so track 1 is sized for the text column, track 2 for the
     gallery, and each element gets an explicit `order` below to land in the
     correct track regardless of DOM order. */
  grid-template-columns: 1fr 1.38fr;
  align-items: center;
  gap: 80px;
}

/* ---- Gallery ---- */

.patients__gallery {
  order: 2;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}

.patients__gallery.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.patients__main {
  width: 100%;
  aspect-ratio: 780 / 545;
  border-radius: 26px;
  overflow: hidden;
  background: var(--fs-ivory);
}

.patients__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The four 3:2 frames are wider than this box, so cover crops them
     horizontally and the vertical value never applies to them. It only bites on
     the one portrait frame in the set, where a low value would cut the top of
     the head off. */
  object-position: center top;
  display: block;
  /* No filter. These are treatment results: a brightness/saturation lift
     here whitened the teeth and pushed the skin orange, which is exactly
     the kind of retouching a clinical result must never carry. */
  transition: opacity 420ms ease, transform 420ms ease;
}

.patients__main img.is-switching {
  opacity: 0;
  transform: scale(0.985);
}

.patients__thumbs {
  display: flex;
  gap: 13px;
  margin-top: 14px;
  direction: ltr;
}

.patients__thumb {
  flex: 1;
  aspect-ratio: 185 / 280;
  border-radius: 17px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 250ms ease-out, transform 250ms ease-out, border-color 250ms ease-out;
}

.patients__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The thumb box (185/280) is far narrower than the 3:2 source, so cover fits
   the height and crops the width — the vertical half of object-position can
   never apply here. The window is 44% of the frame; centred, its right edge
   landed on the first letter of the wall logo (x 0.70–0.96 in every frame of
   the set), leaving a stray gold "F" in each corner. At 40% it spans 0.22–0.66:
   the logo is wholly out and every face is still wholly in. One rule for every
   image rather than per slot — main.js swaps images between slots, and all
   five share the same wall. */
.patients__thumb img { object-position: 40% 50%; }

.patients__thumb:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.patients__thumb.is-active {
  opacity: 1;
  border-color: var(--line);
}

/* ---- Text ---- */

.patients__text {
  order: 1;
  max-width: 490px;
  text-align: right;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease-out 130ms, transform 700ms ease-out 130ms;
}

.patients__text.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.patients__rule {
  width: 90px;
  height: 1px;
  background: rgba(var(--fs-green-rgb), 0.45);
  margin: 0 0 32px;
  margin-inline-start: auto;
}

.patients__title {
  font-family: "Assistant", sans-serif;
  font-weight: 300;
  font-size: 76px;
  line-height: 1;
  color: var(--accent);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 32px;
}

.patients__divider {
  width: 100%;
  height: 1px;
  background: rgba(var(--fs-green-rgb), 0.18);
  margin: 0 0 28px;
}

.patients__desc {
  font-family: "Assistant", sans-serif;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0 0 40px;
}

.btn--patients {
  font-family: "Assistant", sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .patients__gallery,
  .patients__text,
  .patients__text[data-reveal] > * {
    transition: none;
  }
}

/* ---- Responsive: tablet 768–1199 ---- */

@media (max-width: 1199px) {
  .patients { padding: 80px 48px; }
  .patients__container { gap: 48px; min-height: 0; }
  .patients__title { font-size: 60px; }
  .patients__main { aspect-ratio: 700 / 500; }
}

/* ---- Single column below ~860px ---- */

@media (max-width: 860px) {
  .patients { padding: 64px 40px; }

  .patients__container {
    display: flex;
    flex-direction: column;
    gap: 44px;
  }

  /* `display: contents` lets the four copy elements take their own place in
     the single column — but it also means the host paints nothing, so the
     reveal transition above has no box to run on. Below this width the same
     transition runs on the children instead. */
  .patients__text {
    display: contents;
  }

  .patients__text[data-reveal] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms ease-out 130ms, transform 700ms ease-out 130ms;
  }

  .patients__text[data-reveal].is-revealed > * {
    opacity: 1;
    transform: translateY(0);
  }

  .patients__rule,
  .patients__title,
  .patients__divider,
  .patients__desc {
    order: 1;
  }

  .patients__rule { margin-inline-start: unset; margin-inline-end: auto; }

  .patients__gallery { order: 2; width: 100%; }
  .btn--patients { order: 3; }

  .patients__title { font-size: 52px; }
}

@media (max-width: 767px) {
  .patients { padding: 56px 24px; }
  .patients__title { font-size: 46px; }
  .patients__desc { font-size: 19px; }
  .patients__main { border-radius: 20px; aspect-ratio: 4 / 3; }
  /* 4:3 keeps 89% of the 3:2 frame's width — too much to leave the wall logo
     out, so it is brought wholly in: centred, "SM)LE" ran into the rounded
     corner. The faces sit left of the logo and stay near the middle. */
  .patients__main img { object-position: 70% top; }
  .patients__thumb { border-radius: 14px; }
  .btn--patients { width: 100%; }
}

@media (max-width: 420px) {
  .patients__thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ============ WHY-US SECTION (third screen) ============ */

.why {
  position: relative;
  overflow: hidden;
  min-height: clamp(720px, 95vh, 1040px);
  display: flex;
  align-items: center;
  padding-block: 100px;
  padding-inline: clamp(32px, 6vw, 100px);
  background: var(--color-deep-green-darkest);
  font-family: "Assistant", sans-serif;
}

.why__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 140% at 12% 8%, rgba(var(--fs-green-rgb), 0.55), transparent 55%),
    radial-gradient(110% 130% at 88% 92%, rgba(var(--fs-black-rgb), 0.5), transparent 60%);
}

.why__bg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.why__grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.why__container {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 72px;
}

/* ---- Text column (right) ---- */

.why__text {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.why__title {
  font-family: "Assistant", sans-serif;
  font-weight: 300;
  font-size: clamp(54px, 5vw, 78px);
  line-height: 1;
  color: var(--ink);
  text-align: right;
  margin: 0;
}

.why__lead {
  font-family: "Assistant", sans-serif;
  font-weight: 300;
  font-size: 23px;
  line-height: 1.5;
  color: var(--ink-body);
  text-align: right;
  max-width: 600px;
  margin: 26px 0 0;
}

.why__intro[data-reveal] {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.why__intro.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ---- Features ---- */

.why__features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.why__feature {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  border: 1px solid rgba(var(--line-rgb), 0.25);
  border-radius: 16px;
  background: rgba(var(--accent-rgb), 0.04);
}

.why__feature[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}

.why__feature.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.why__feature:nth-child(1) { transition-delay: 0ms; }
.why__feature:nth-child(2) { transition-delay: 90ms; }
.why__feature:nth-child(3) { transition-delay: 180ms; }
.why__feature:nth-child(4) { transition-delay: 270ms; }

.why__feature-num {
  flex-shrink: 0;
  min-width: 26px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-align: center;
  direction: ltr;
}

.why__feature-divider {
  align-self: stretch;
  width: 1px;
  flex-shrink: 0;
  background: rgba(var(--accent-rgb), 0.3);
}

.why__feature-title {
  font-family: "Assistant", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 6px;
}

.why__feature-desc {
  font-family: "Assistant", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-body);
  margin: 0;
}

/* ---- CTA ---- */

.why__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.why__cta[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}

.why__cta.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.btn--why {
  font-family: "Assistant", sans-serif;
}

.why__caption {
  font-family: "Assistant", sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: var(--ink-body);
  opacity: 0.8;
  margin: 14px 0 0;
}

/* ---- Photo column (left) ---- */

.why__photo {
  position: relative;
}

.why__photo[data-reveal] {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.why__photo.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

.why__photo-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.35);
  box-shadow: 0 0 0 1px rgba(var(--shadow-rgb), 0.08) inset,
    0 25px 60px rgba(var(--shadow-rgb), 0.45),
    0 0 70px rgba(var(--shadow-rgb), 0.12);
}

.why__photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.why__photo-arc {
  position: absolute;
  top: -8%;
  left: -8%;
  width: 116%;
  height: 116%;
  pointer-events: none;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .why__intro,
  .why__feature,
  .why__cta,
  .why__photo {
    transition: none;
  }
}

/* ---- Responsive: tablet 768–1199 ---- */

@media (max-width: 1199px) {
  .why { padding-block: 80px; }
  .why__container { gap: 48px; }
  .why__text { gap: 36px; }
  .why__lead { font-size: 20px; }
  .why__feature { padding: 16px 20px; }
}

/* ---- Single column below ~860px ---- */

@media (max-width: 860px) {
  .why { padding-block: 64px; min-height: 0; }

  .why__container {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .why__text {
    display: contents;
  }

  .why__intro { order: 1; }
  .why__photo { order: 2; }
  .why__features { order: 3; }
  .why__cta { order: 4; align-items: flex-start; }
}

@media (max-width: 767px) {
  .why { padding-inline: 22px; }
  .why__title { font-size: clamp(42px, 11vw, 50px); }
  .why__lead { font-size: 19px; }
  .why__photo-frame { border-radius: 22px; }
  .why__feature { padding: 16px 18px; gap: 14px; }
  .why__feature-title { font-size: 17px; }
  .why__feature-desc { font-size: 14px; }
  .btn--why { width: 100%; min-width: 0; }
  .why__cta { align-items: stretch; }
  .why__caption { text-align: right; }
}

/* ============ ABOUT / MISSION SECTION ============ */

.about {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 18% 20%, rgba(var(--fs-white-rgb), 0.92) 0%, rgba(var(--fs-white-rgb), 0) 42%),
    linear-gradient(135deg, var(--fs-white) 0%, var(--fs-ivory) 52%, var(--fs-ivory) 100%);
  padding-block: 100px;
  padding-inline: clamp(32px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.about__container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 64px;
}

/* ---- Text column (right) ---- */

.about__text[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.about__text.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.about__eyebrow {
  font-family: "Assistant", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-align: right;
  margin: 0 0 18px;
}

.about__title {
  font-family: "Assistant", sans-serif;
  font-weight: 400;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1.15;
  color: var(--ink);
  text-align: right;
  margin: 0;
}

.about__rule {
  width: 70px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  margin: 26px 0 26px auto;
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
  margin-inline-start: auto;
}

.about__body p {
  font-family: "Assistant", sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-body);
  text-align: right;
  margin: 0;
}

.btn--about {
  margin-top: 32px;
  font-family: "Assistant", sans-serif;
}

/* ---- Photo column (left) ---- */

.about__photo[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out 120ms, transform 800ms ease-out 120ms;
}

.about__photo.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.about__photo {
  height: clamp(420px, 38vw, 650px);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(var(--shadow-rgb), 0.14);
}

.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 400ms ease, transform 400ms ease;
}

.about__photo img.is-switching {
  opacity: 0;
  transform: scale(0.99);
}

/* ---- Gallery strip ---- */

.about__gallery {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
}

.about__gallery[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out 200ms, transform 800ms ease-out 200ms;
}

.about__gallery.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.about__thumbs {
  flex: 1;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.about__thumbs::-webkit-scrollbar {
  display: none;
}

.about__thumb {
  flex: 0 0 calc((100% - 4 * 16px) / 5);
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  transition: border-color 250ms ease-out, opacity 250ms ease-out;
}

.about__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about__thumb.is-active {
  border-color: var(--line);
}

.about__nav {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
  border-radius: 50%;
  transition: background 200ms ease-out;
}

.about__nav svg {
  width: 22px;
  height: 22px;
}

.about__nav:hover {
  background: rgba(var(--fs-green-rgb), 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .about__text,
  .about__photo,
  .about__gallery,
  .about__thumb img {
    transition: none;
  }
}

/* ---- Responsive: tablet 768–1199 ---- */

@media (max-width: 1199px) {
  .about { padding-block: 80px; }
  .about__grid { gap: 40px; }
  .about__photo { height: clamp(380px, 42vw, 560px); }
  .about__thumb { flex-basis: calc((100% - 3 * 14px) / 4); }
  .about__thumbs { gap: 14px; }
}

/* ---- Single column below ~860px ---- */

@media (max-width: 860px) {
  .about { padding-block: 64px; }

  .about__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about__body { max-width: 100%; }

  .about__photo { height: clamp(320px, 70vw, 480px); }

  .about__thumb { flex-basis: calc((100% - 2 * 14px) / 3); }
}

@media (max-width: 640px) {
  .about { padding-inline: 22px; }
  .about__title { font-size: clamp(32px, 9vw, 42px); }
  .about__body p { font-size: 16px; }
  .btn--about { width: 100%; }
  .about__nav { width: 34px; height: 34px; }
  .about__nav svg { width: 18px; height: 18px; }
  .about__thumb { flex-basis: calc((100% - 2 * 12px) / 2.4); }
  .about__thumbs { gap: 12px; }
  .about__gallery { gap: 10px; }
}

/* ============ TEAM SECTION ============ */

.team {
  --team-dark: var(--fs-brown);
  --team-dark-2: var(--fs-brown);
  --team-soft: var(--fs-sage);
  --team-gold: var(--accent);

  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 82% 12%, rgba(var(--fs-white-rgb), 0.9) 0%, rgba(var(--fs-white-rgb), 0) 45%),
    linear-gradient(160deg, var(--fs-white) 0%, var(--fs-ivory) 55%, var(--fs-ivory) 100%);
  padding-block: 72px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.team__container {
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
}

/* ---- Intro ---- */

.team__intro {
  max-width: 680px;
  margin: 0 auto 32px;
  text-align: center;
}

.team__intro[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.team__intro.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.team__eyebrow {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin: 0;
}

.team__title {
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--team-dark);
  margin: 14px 0 0;
}

.team__rule {
  width: 56px;
  height: 2px;
  background: var(--team-gold);
  border-radius: 2px;
  margin: 18px auto;
}

.team__subtitle {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--team-dark-2);
  opacity: 0.9;
  margin: 0;
}

/* ---- Composition (photo only — no overlay cards) ---- */

.team__composition {
  max-width: 1180px;
  margin: 0 auto;
}

.team__composition[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 850ms ease-out, transform 850ms ease-out;
}

.team__composition.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.team__composition picture,
.team__composition img {
  display: block;
  width: 100%;
  height: auto;
}

.team__composition img {
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}

/* ---- Doctor cards — one shared design for every breakpoint ---- */
/* Only the column count / row-vs-scroll layout changes per breakpoint;
   the card itself (photo + name + role + years) never changes shape. */

/* Seven cards laid out 4 + 3. Each card spans two of eight columns, so the
   second row sits centred under the first, and grid-auto-rows keeps both rows —
   and therefore every card — exactly the same height. */
.team__cards {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
  max-width: 1180px;
  margin: 40px auto 0;
}

.team__card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 14px 20px;
  background: var(--fs-white);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.05);
  text-align: center;
  text-decoration: none;
  transition: transform 300ms ease-out, box-shadow 300ms ease-out, background 300ms ease-out;
}

/* The cards are presentational, not links (there are no doctor pages yet), so
   each card is a link to that doctor's own section on the team page, so the
   hover state answers a click the visitor will actually get. It stays a warm
   settle rather than a lift — the row is a line-up, not a set of buttons. */
.team__card:hover {
  box-shadow: 0 10px 22px rgba(var(--shadow-rgb), 0.08);
  background: var(--fs-white);
}

.team__card[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease-out, transform 600ms ease-out, box-shadow 300ms ease-out, background 300ms ease-out;
}

.team__card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}


/* First card of the second row — the half-column offset that centres it. */
.team__card:nth-of-type(5) {
  grid-column: 2 / span 2;
}

.team__card:nth-of-type(1)[data-reveal] { transition-delay: 0ms; }
.team__card:nth-of-type(2)[data-reveal] { transition-delay: 90ms; }
.team__card:nth-of-type(3)[data-reveal] { transition-delay: 180ms; }
.team__card:nth-of-type(4)[data-reveal] { transition-delay: 270ms; }
.team__card:nth-of-type(5)[data-reveal] { transition-delay: 360ms; }
.team__card:nth-of-type(6)[data-reveal] { transition-delay: 450ms; }
.team__card:nth-of-type(7)[data-reveal] { transition-delay: 540ms; }

.team__card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 12;
  margin-bottom: 10px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--fs-ivory);
}

.team__card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.team__card-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--team-dark);
}

.team__card-role {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-body);
}

.team__card-years {
  position: relative;
  /* Pinned to the bottom so the gold experience line reads as one level across
     the row even when a name or specialty wraps onto a second line. */
  margin-top: auto;
  padding-top: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--team-gold);
}

.team__card-years::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 1px;
  background: var(--team-gold);
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .team__intro,
  .team__composition,
  .team__card {
    transition: none;
  }
}

/* ---- Responsive: tablet — 3 then 2 cards per row ---- */

@media (max-width: 1199px) {
  .team { padding-block: 64px; }
  .team__intro { margin-bottom: 28px; }
  .team__subtitle { font-size: 17px; }

  .team__cards {
    gap: 16px;
    margin-top: 32px;
  }

  .team__composition img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 899px) {
  .team__cards {
    gap: 12px;
  }

  .team__card {
    padding: 14px 10px 16px;
  }
}

/* ---- Mobile: same card, horizontal swipe, one per view ---- */

@media (max-width: 767px) {
  .team { padding-block: 56px; }
  .team__intro { margin-bottom: 24px; }
  .team__title { font-size: clamp(30px, 8.5vw, 40px); }
  .team__subtitle { font-size: 16px; }

  .team__composition { max-width: 100%; }
  /* Seven people across a phone-width frame: show the photo whole rather than
     cropping the doctors at either end of the line-up. */
  .team__composition img {
    width: 100%;
    height: auto;
  }

  .team__cards {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    gap: 14px;
    margin: 24px calc(-1 * clamp(24px, 6vw, 100px)) 0;
    padding-inline: 20px;
    direction: rtl;
    scrollbar-width: none;
  }

  .team__cards::-webkit-scrollbar {
    display: none;
  }

  .team__card,
  .team__card:nth-of-type(5) {
    grid-column: auto;
    flex: 0 0 auto;
    width: 78vw;
    max-width: 260px;
    padding: 18px 14px 20px;
    scroll-snap-align: start;
  }
}

@media (max-width: 420px) {
  .team__card { width: 80vw; }
}

/* ============ TREATMENTS / TECHNOLOGY / TORONTO BRIDGE SECTION ============ */

.treatments {
  --tr-dark: var(--fs-brown);
  --tr-dark-2: var(--fs-brown);
  --tr-soft: var(--fs-sage);
  --tr-gold: var(--accent);
  --tr-gold-light: var(--accent);

  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 14% 10%, rgba(var(--fs-white-rgb), 0.9) 0%, rgba(var(--fs-white-rgb), 0) 42%),
    linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 55%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.treatments__container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* ---- Head ---- */

.treatments__head {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.treatments__head[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.treatments__head.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.treatments__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 150px;
  margin: 0 auto 22px;
}

.treatments__ornament span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tr-gold));
}

.treatments__ornament span:last-child {
  background: linear-gradient(90deg, var(--tr-gold), transparent);
}

.treatments__ornament i {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--tr-gold);
  transform: rotate(45deg);
  border-radius: 1px;
}

.treatments__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--tr-dark);
  margin: 0;
}

.treatments__accent {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  font-style: italic;
  color: var(--tr-gold);
  margin: 14px 0 0;
}

.treatments__subtitle {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--tr-dark-2);
  opacity: 0.85;
  max-width: 540px;
  margin: 20px auto 0;
}

/* ---- Treatment cards grid ---- */

.treatments__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.treatment-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 24px 28px;
  background: var(--fs-white);
  border: 1px solid rgba(var(--line-rgb), 0.18);
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(var(--shadow-rgb), 0.05);
  transition: transform 300ms cubic-bezier(.2,.7,.3,1), box-shadow 300ms cubic-bezier(.2,.7,.3,1), border-color 300ms ease-out;
}

.treatment-card[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease-out, transform 600ms ease-out, box-shadow 300ms ease-out, border-color 300ms ease-out;
}

.treatment-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.treatment-card:nth-of-type(1)[data-reveal] { transition-delay: 0ms; }
.treatment-card:nth-of-type(2)[data-reveal] { transition-delay: 60ms; }
.treatment-card:nth-of-type(3)[data-reveal] { transition-delay: 120ms; }
.treatment-card:nth-of-type(4)[data-reveal] { transition-delay: 180ms; }
.treatment-card:nth-of-type(5)[data-reveal] { transition-delay: 0ms; }
.treatment-card:nth-of-type(6)[data-reveal] { transition-delay: 60ms; }
.treatment-card:nth-of-type(7)[data-reveal] { transition-delay: 120ms; }
.treatment-card:nth-of-type(8)[data-reveal] { transition-delay: 180ms; }

.treatment-card:hover,
.treatment-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(var(--shadow-rgb), 0.10);
  border-color: rgba(var(--line-rgb), 0.4);
}

.treatment-card.is-revealed:hover,
.treatment-card.is-revealed:focus-visible {
  transform: translateY(-5px);
}

.treatment-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  margin-bottom: 18px;
}

.treatment-card__icon img {
  height: 100%;
  width: auto;
  object-fit: contain;
  transition: transform 300ms cubic-bezier(.2,.7,.3,1);
}

.treatment-card:hover .treatment-card__icon img {
  transform: scale(1.06);
}

.treatment-card__title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tr-dark);
  margin: 0 0 10px;
}

.treatment-card__desc {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--tr-dark-2);
  opacity: 0.88;
  margin: 0;
  flex-grow: 1;
}

.treatment-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--line-rgb), 0.25);
  font-size: 14px;
  font-weight: 600;
  color: var(--tr-gold);
  transition: gap 250ms ease-out, color 250ms ease-out;
}

.treatment-card__link .icon {
  width: 15px;
  height: 15px;
  transition: transform 250ms ease-out;
}

.treatment-card:hover .treatment-card__link {
  gap: 12px;
  color: var(--accent);
}

.treatment-card:hover .treatment-card__link .icon {
  transform: translateX(-3px);
}

/* ---- Technology strip ---- */

.treatments__tech {
  margin-top: 76px;
}

.treatments__tech[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.treatments__tech.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.tech-head {
  max-width: 620px;
  margin: 0 auto 40px;
  text-align: center;
}

.tech-head__title {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 500;
  color: var(--tr-dark);
  margin: 0 0 12px;
}

.tech-head__subtitle {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--tr-dark-2);
  opacity: 0.82;
  margin: 0;
}

.tech-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.tech-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 14px;
  position: relative;
}

.tech-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 26px;
  inset-inline-end: 0;
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.28), transparent);
}

.tech-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-bottom: 16px;
  transition: transform 300ms cubic-bezier(.2,.7,.3,1);
}

.tech-item__icon img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.tech-item:hover .tech-item__icon {
  transform: scale(1.05);
}

.tech-item__title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--tr-dark);
  margin: 0 0 8px;
}

.tech-item__desc {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--tr-dark-2);
  opacity: 0.82;
  margin: 0;
}

/* ---- Toronto Bridge accent block ---- */

.toronto {
  margin-top: 76px;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  align-items: stretch;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(var(--shadow-rgb), 0.16);
}

.toronto[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.toronto.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.toronto__panel {
  order: 1;
  background: linear-gradient(150deg, var(--tr-dark) 0%, var(--tr-dark-2) 100%);
  padding: clamp(36px, 4vw, 56px) clamp(32px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.toronto__eyebrow {
  font-size: 20px;
  font-weight: 300;
  color: var(--fs-ivory);
  opacity: 0.85;
  margin: 0;
}

.toronto__title {
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  background: linear-gradient(90deg, var(--accent-hi), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 4px 0 16px;
}

.toronto__lead {
  font-size: 18px;
  font-weight: 500;
  color: var(--fs-ivory);
  margin: 0 0 16px;
}

.toronto__desc {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--fs-ivory);
  max-width: 460px;
  margin: 0 0 30px;
}

.toronto__benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin: 0 0 34px;
}

.toronto__benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--fs-ivory);
  line-height: 1.4;
}

.toronto__benefits img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.btn--toronto {
  align-self: flex-start;
  font-family: "Assistant", sans-serif;
}

.toronto__photo {
  order: 2;
  min-height: 320px;
}

.toronto__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
  filter: brightness(1.03) contrast(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .treatments__head,
  .treatment-card,
  .treatments__tech,
  .toronto {
    transition: none;
  }
}

/* ---- Responsive: tablet 900–1199 ---- */

@media (max-width: 1199px) {
  .treatments { padding-block: 80px; }
  .treatments__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .tech-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; column-gap: 8px; }
  .tech-item::after { display: none; }
}

/* ---- Small tablet / large mobile 640–899 ---- */

@media (max-width: 899px) {
  .toronto { grid-template-columns: 1fr; }
  .toronto__photo { order: 1; min-height: 280px; }
  .toronto__panel { order: 2; }
  .toronto__desc { max-width: 100%; }
}

/* ---- Mobile ---- */

@media (max-width: 767px) {
  .treatments { padding-inline: 22px; padding-block: 64px; }
  .treatments__head { margin-bottom: 40px; }
  .treatments__subtitle { font-size: 16px; }

  .treatments__grid { grid-template-columns: 1fr; gap: 16px; }
  .treatment-card { padding: 30px 22px 24px; }

  .treatments__tech { margin-top: 56px; }
  .tech-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }

  .toronto { margin-top: 56px; border-radius: 20px; }
  .toronto__benefits { grid-template-columns: 1fr; gap: 12px; }
  .btn--toronto { width: 100%; }
}

@media (max-width: 420px) {
  .treatments__ornament { width: 120px; }
}

/* ============ JOURNEY / "HOW TREATMENT BEGINS" SECTION ============ */
/* Heading system matches .treatments__title / .treatments__subtitle exactly
   (same font-size scale, weight, line-height, spacing) — only the title
   color changes to gold per this section's spec. Dark text reuses the same
   #0E2B24 already used as --tr-dark / --team-dark site-wide. */

.journey {
  --jr-dark: var(--fs-brown);

  position: relative;
  background: var(--fs-white);
  padding-block: 80px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.journey__container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* ---- Head (mirrors .treatments__head sizing system) ---- */

.journey__head {
  max-width: 680px;
  margin: 0 auto 52px;
  text-align: center;
}

.journey__head[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.journey__head.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.journey__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--accent);
  margin: 0;
}

.journey__subtitle {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--jr-dark);
  opacity: 0.85;
  max-width: 540px;
  margin: 20px auto 0;
}

/* ---- Steps: desktop single horizontal line, 6 equal columns ---- */

.journey__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.journey__steps[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.journey__steps.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.journey__line {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(var(--accent-rgb), 0.35);
  z-index: 0;
}

.journey__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.journey__marker {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: var(--fs-white);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  direction: ltr;
  unicode-bidi: isolate;
  margin-bottom: 18px;
}

.journey__step-title {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--jr-dark);
  margin: 0 0 8px;
}

.journey__step-desc {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--jr-dark);
  opacity: 0.78;
  margin: 0;
}

/* ---- CTA ---- */

.journey__cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.btn--journey {
  font-family: "Assistant", sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .journey__head,
  .journey__steps {
    transition: none;
  }
}

/* ---- Responsive: tablet — two rows of three, line removed ---- */

@media (max-width: 1199px) {
  .journey { padding-block: 72px; }
  .journey__head { margin-bottom: 44px; }

  .journey__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 40px;
    column-gap: 16px;
  }

  .journey__line { display: none; }
}

/* ---- Mobile: vertical RTL path, marker on the right ---- */

@media (max-width: 767px) {
  .journey { padding-inline: 22px; padding-block: 60px; }
  .journey__head { margin-bottom: 36px; }
  .journey__subtitle { font-size: 16px; }

  .journey__steps {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .journey__line {
    display: block;
    top: 4px;
    bottom: 4px;
    right: 19px;
    left: auto;
    width: 1px;
    height: auto;
  }

  .journey__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: right;
    gap: 16px;
  }

  .journey__marker { margin-bottom: 0; }

  .journey__step-body { flex: 1; min-width: 0; }

  .journey__cta { margin-top: 40px; }
  .btn--journey { width: 100%; }
}

/* ============ VIDEO TESTIMONIALS SECTION ============ */
/* Heading system matches .treatments__title / .treatments__subtitle exactly,
   same as the rest of the light-background sections. */

.testimonials {
  --ts-dark: var(--fs-brown);

  position: relative;
  background: radial-gradient(circle at 14% 10%, rgba(var(--fs-white-rgb), 0.9) 0%, rgba(var(--fs-white-rgb), 0) 42%),
    linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 55%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.testimonials__container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* ---- Head (same system as .treatments__head) ---- */

.testimonials__head {
  max-width: 680px;
  margin: 0 auto 52px;
  text-align: center;
}

.testimonials__head[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.testimonials__head.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.testimonials__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 150px;
  margin: 0 auto 22px;
}

.testimonials__ornament span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

.testimonials__ornament span:last-child {
  background: linear-gradient(90deg, var(--accent), transparent);
}

.testimonials__ornament i {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--accent);
  transform: rotate(45deg);
  border-radius: 1px;
}

.testimonials__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ts-dark);
  margin: 0;
}

.testimonials__subtitle {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ts-dark);
  opacity: 0.75;
  max-width: 480px;
  margin: 20px auto 0;
}

/* ---- Gallery: dark stage holding the 4-card row ---- */

.testimonials__gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}

.testimonials__gallery[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.testimonials__gallery.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.testimonials__stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(155deg, var(--fs-green) 0%, var(--fs-brown) 100%);
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 40px);
  box-shadow: 0 30px 60px rgba(var(--shadow-rgb), 0.28);
}

.testimonials__stage::before,
.testimonials__stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(var(--line-rgb), 0.28);
  pointer-events: none;
}

.testimonials__stage::before {
  width: 280px;
  height: 280px;
  top: -120px;
  inset-inline-end: -80px;
}

.testimonials__stage::after {
  width: 180px;
  height: 180px;
  top: -40px;
  inset-inline-end: 60px;
  border-color: rgba(var(--line-rgb), 0.18);
}

.testimonials__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  align-items: center;
}

/* ---- Reusable video-frame component (main hero + modal grid cells) ---- */

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.4);
  box-shadow: 0 22px 46px rgba(var(--shadow-rgb), 0.18);
  background: var(--fs-green);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), border-color 250ms ease-out, box-shadow 250ms ease-out;
}

.video-frame__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-frame__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--fs-green-rgb), 0.05), rgba(var(--fs-green-rgb), 0.28));
  transition: opacity 250ms ease-out;
  pointer-events: none;
}

.video-frame.is-playing .video-frame__scrim {
  opacity: 0;
}

.video-frame__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: rgba(var(--fs-green-rgb), 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 250ms ease-out, background 250ms ease-out, opacity 250ms ease-out;
}

.video-frame__play svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.video-frame__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(var(--fs-green-rgb), 0.5);
}

.video-frame.is-playing .video-frame__play {
  opacity: 0;
  pointer-events: none;
}

/* While the muted preview runs, a play button parked mid-frame sits on the
   patient's face and reads as "paused". It fades for as long as the preview
   moves and is back the moment the clip stops, ends or scrolls away. The whole
   frame still opens the lightbox, and the button reappears on keyboard focus
   and, where there is a mouse, on hover. */
.video-frame.is-previewing .video-frame__play { opacity: 0; }
.video-frame.is-previewing .video-frame__play:focus-visible { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .video-frame.is-previewing:hover .video-frame__play { opacity: 1; }
}

.video-frame__corner {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 16px;
  height: 16px;
  border-top: 1px solid rgba(var(--line-rgb), 0.5);
  border-right: 1px solid rgba(var(--line-rgb), 0.5);
  pointer-events: none;
}

.video-frame.is-playing .video-frame__corner {
  opacity: 0;
  transition: opacity 250ms ease-out;
}

/* ---- Card: video + quote, one per testimonial ---- */

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 350ms ease-out;
}

.testimonial-card .video-frame {
  width: 100%;
  margin-bottom: 16px;
}

.testimonial-card {
  cursor: pointer;
}

.testimonial-card.is-active {
  z-index: 1;
}

.testimonial-card.is-active .video-frame {
  border: 2px solid var(--accent);
  box-shadow: 0 18px 38px rgba(var(--shadow-rgb), 0.35), 0 0 24px rgba(var(--shadow-rgb), 0.25);
  transform: scale(1.12);
}

/* ---- Shared quote panel: fades to the active card's quote ---- */

.testimonials__quote-panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 720px;
  margin: 36px auto 0;
  padding: 4px 8px;
}

.testimonials__quote-mark {
  flex-shrink: 0;
  width: 26px;
  height: 18px;
  color: var(--accent);
}

.testimonials__quote-mark--close {
  transform: scaleX(-1);
}

.testimonials__quote-text {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--fs-white);
  text-align: center;
  margin: 0;
  transition: opacity 300ms ease-out;
}

.testimonials__quote-text.is-switching {
  opacity: 0;
}

/* ---- Mobile dots ---- */

.testimonials__dots {
  display: none;
  position: relative;
  z-index: 1;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.testimonials__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(var(--accent-rgb), 0.35);
  cursor: pointer;
  transition: background 250ms ease-out, transform 250ms ease-out;
}

.testimonials__dot.is-active {
  background: var(--accent);
  transform: scale(1.25);
}

/* ---- "See all" CTA pill, centered below the stage ---- */

.testimonials__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: none;
  font-family: "Assistant", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: background 250ms ease-out, gap 250ms ease-out, color 250ms ease-out;
}

.testimonials__cta .icon {
  width: 16px;
  height: 16px;
  transition: transform 250ms ease-out;
}

.testimonials__cta:hover {
  background: var(--accent);
  gap: 14px;
  color: var(--ts-dark);
}

.testimonials__cta:hover .icon {
  transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .testimonials__head,
  .testimonials__gallery,
  .video-frame,
  .video-frame__scrim,
  .video-frame__play,
  .testimonial-card,
  .testimonials__dot,
  .testimonials__cta,
  .testimonials__quote-text {
    transition: none;
  }
}

/* ---- Responsive: tablet, 2x2 grid ---- */

@media (max-width: 1199px) {
  .testimonials { padding-block: 80px; }

  .testimonials__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* ---- Mobile: single-card swipeable carousel ---- */

@media (max-width: 767px) {
  .testimonials { padding-inline: 22px; padding-block: 64px; }
  .testimonials__head { margin-bottom: 40px; }
  .testimonials__subtitle { font-size: 16px; }
  .testimonials__stage { padding: 28px 0; border-radius: 22px; }

  .testimonials__row {
    grid-template-columns: none;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 22px 20px;
  }

  .testimonial-card {
    flex: 0 0 100%;
    max-width: 280px;
    scroll-snap-align: center;
    padding: 0 4px;
  }

  .testimonial-card.is-active .video-frame { transform: scale(1.08); }

  .testimonials__dots { display: flex; }

  .testimonials__quote-panel { margin-top: 28px; padding: 0 24px; }
}

@media (max-width: 380px) {
  .testimonials__cta { padding: 12px 22px; font-size: 14px; }
}

/* ============ TESTIMONIALS MODAL ============ */

.testimonials-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.testimonials-modal[hidden] {
  display: none;
}

.testimonials-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--fs-green-rgb), 0.55);
  opacity: 0;
  transition: opacity 280ms ease-out;
}

.testimonials-modal.is-open .testimonials-modal__backdrop {
  opacity: 1;
}

.testimonials-modal__panel {
  position: relative;
  width: 100%;
  max-width: 960px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--fs-white);
  border-radius: 24px;
  padding: 32px clamp(20px, 4vw, 44px) 40px;
  box-shadow: 0 30px 70px rgba(var(--shadow-rgb), 0.3);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 280ms ease-out, transform 280ms ease-out;
  font-family: "Assistant", sans-serif;
}

.testimonials-modal.is-open .testimonials-modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.testimonials-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.testimonials-modal__title {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  color: var(--ts-dark);
  margin: 0;
}

.testimonials-modal__close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(var(--line-rgb), 0.35);
  background: none;
  color: var(--ts-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease-out, transform 200ms ease-out;
}

.testimonials-modal__close svg {
  width: 18px;
  height: 18px;
}

.testimonials-modal__close:hover {
  background: rgba(var(--accent-rgb), 0.1);
  transform: rotate(90deg);
}

.testimonials-modal__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
}

.testimonial-card .video-frame {
  margin-bottom: 12px;
}

.testimonial-card__quote {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ts-dark);
  opacity: 0.85;
  margin: 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-modal__backdrop,
  .testimonials-modal__panel,
  .testimonials-modal__close {
    transition: none;
  }
}

@media (max-width: 899px) {
  .testimonials-modal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .testimonials-modal { padding: 16px; }
  .testimonials-modal__panel { padding: 24px 18px 32px; border-radius: 18px; }
  .testimonials-modal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .testimonial-card__quote { font-size: 12px; }
}

/* ============ CONSULTATION BOOKING SECTION ============ */
/* Layout mirrors .about (photo + text, 2-column grid, rounded photo frame);
   heading scale mirrors .journey__title / .testimonials__title; background
   family mirrors .testimonials for a seamless hand-off between the two sections. */

.consult {
  --cs-dark: var(--fs-brown);

  position: relative;
  background: radial-gradient(circle at 88% 92%, rgba(var(--fs-white-rgb), 0.9) 0%, rgba(var(--fs-white-rgb), 0) 45%),
    linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 55%, var(--fs-ivory) 100%);
  padding-block: 100px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.consult__container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.consult__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 64px;
}

/* ---- Panel: head + form (right column) ---- */

.consult__panel[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.consult__panel.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.consult__head {
  margin-bottom: 36px;
}

.consult__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--accent);
  text-align: right;
  margin: 0;
}

.consult__rule {
  width: 70px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  margin: 20px 0 0 auto;
}

.consult__subtitle {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--cs-dark);
  opacity: 0.8;
  text-align: right;
  max-width: 460px;
  margin: 20px 0 0 auto;
}

/* ---- Form ---- */

.consult-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.consult-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.consult-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.consult-form__label {
  font-family: "Assistant", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--cs-dark);
  text-align: right;
  padding: 0;
}

.consult-form__input,
.consult-form__select {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid rgba(var(--line-rgb), 0.35);
  background: var(--fs-white);
  font-family: "Assistant", sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  color: var(--cs-dark);
  text-align: right;
  transition: border-color 250ms ease-out, box-shadow 250ms ease-out;
}

.consult-form__input::placeholder {
  color: var(--ink-mute);
}

.consult-form__input[type="tel"] {
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
}

.consult-form__input:focus,
.consult-form__select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--shadow-rgb), 0.14);
}

.consult-form__select-wrap {
  position: relative;
}

.consult-form__select {
  appearance: none;
  -webkit-appearance: none;
  padding-left: 44px;
  cursor: pointer;
}

.consult-form__select option[value=""] {
  color: var(--ink-mute);
}

.consult-form__select-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--accent);
  pointer-events: none;
}

.consult-form__fieldset {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: none;
  padding: 0;
  margin: 0;
}

.consult-form__fieldset legend {
  padding: 0;
  width: 100%;
}

.consult-form__pills {
  display: flex;
  gap: 12px;
}

.consult-form__pill {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 10px;
  border: 1px solid rgba(var(--line-rgb), 0.35);
  background: var(--fs-white);
  font-size: 15px;
  font-weight: 600;
  color: var(--cs-dark);
  cursor: pointer;
  transition: border-color 250ms ease-out, background 250ms ease-out, color 250ms ease-out;
}

.consult-form__pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.consult-form__pill.is-active {
  border-color: var(--accent);
  background: var(--cta-bg);
  color: var(--cta-ink);
}

/* ---- Consent checkbox ---- */

.consult-form__checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.consult-form__checkbox input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.consult-form__checkbox-box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid rgba(var(--line-rgb), 0.5);
  background: var(--fs-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease-out, border-color 200ms ease-out;
}

.consult-form__checkbox-box svg {
  width: 13px;
  height: 13px;
  color: var(--fs-white);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}

.consult-form__checkbox input:checked ~ .consult-form__checkbox-box {
  background: var(--accent);
  border-color: var(--accent);
}

.consult-form__checkbox input:checked ~ .consult-form__checkbox-box svg {
  opacity: 1;
  transform: scale(1);
}

.consult-form__checkbox input:focus-visible ~ .consult-form__checkbox-box {
  box-shadow: 0 0 0 4px rgba(var(--shadow-rgb), 0.18);
}

.consult-form__checkbox-text {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--cs-dark);
  opacity: 0.85;
}

/* ---- Submit button (reuses .btn / .btn--gold exactly; adds width + loading state) ---- */

.consult-form__submit {
  width: 100%;
  margin-top: 4px;
}

.consult-form__submit.is-loading {
  pointer-events: none;
  opacity: 0.85;
}

.consult-form__submit.is-loading .consult-form__submit-label {
  opacity: 0.7;
}

.consult-form__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(var(--line-rgb), 0.25);
  border-top-color: var(--line);
  animation: consult-spin 700ms linear infinite;
}

.consult-form__submit.is-loading .consult-form__spinner {
  display: inline-block;
}

@keyframes consult-spin {
  to { transform: rotate(360deg); }
}

.consult-form__note {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--cs-dark);
  opacity: 0.85;
  text-align: center;
  margin: 2px 0 0;
}

.consult-form__status {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  min-height: 1.4em;
}

.consult-form__status:empty {
  display: none;
}

.consult-form__status.is-success {
  color: var(--ink-body);
}

.consult-form__status.is-error {
  color: #B23B3B;
}

/* ---- Photo (left column) ---- */

.consult__photo[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out 120ms, transform 800ms ease-out 120ms;
}

.consult__photo.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.consult__photo {
  position: relative;
  min-height: clamp(420px, 40vw, 620px);
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.4);
  box-shadow: 0 24px 60px rgba(var(--shadow-rgb), 0.16);
}

.consult__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--fs-black-rgb), 0) 55%, rgba(var(--fs-black-rgb), 0.22) 100%);
  pointer-events: none;
}

.consult__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: brightness(1.04) saturate(1.05) contrast(1.02);
  display: block;
}

/* The about page's consultation photograph is now cut from the same original
   set and graded onto the same wall standard as the gallery series above it.
   The shared lift the other pages' photographs still get would push it off that
   standard — measured at 0.7 L* and 0.9 a* away from the frames it sits under —
   so this one instance is served flat. */
.abcta .consult__photo img { filter: none; }

/* The branded Lancet photo is full-length: the gold wordmark sits at the top of
   the backdrop and the shoes are at the very bottom. In the shared landscape box
   object-fit:cover would have to cut one end or the other. That file is exactly
   4:5 (1122x1402), so giving the box the same ratio shows all of it — wordmark,
   hands and feet — with no crop at all and no letterboxing. */
.consult__photo--full {
  min-height: 0;
  aspect-ratio: 4 / 5;
}

.consult__photo--full img {
  object-position: 50% 50%;
}

/* Oral surgery page CTA: the replacement photo is a portrait doctor+patient
   shot, so this instance swaps the shared landscape min-height sizing for
   a fixed portrait ratio — scoped so every other page's .consult__photo
   (all landscape) is untouched. */
.consult__photo--portrait {
  min-height: 0;
  aspect-ratio: 3 / 4;
}

.consult__photo--portrait img {
  object-position: 50% 22%;
}

/* Every consultation form now closes on the same brand-wall set in
   assets/אודות/, cut by tools_prep_form_photos.py. Those files are all
   1000x1502 and already framed with the wordmark above the heads and the shoes
   above the bottom edge, so pinning the box to that exact ratio leaves
   object-fit:cover nothing to crop — the people are shown full length, feet
   included, at every width. Do not give this box a fixed height. */
.consult__photo--odot {
  min-height: 0;
  aspect-ratio: 1000 / 1502;
}

.consult__photo--odot img {
  object-position: 50% 50%;
}

/* Our-work page CTA: a wide group shot composed on the Avodot backdrop, with
   the three figures reaching almost edge to edge. The shared landscape sizing
   is height-driven, so on wide viewports object-fit:cover would crop ~20% off
   the sides and cut into the outer two people — pin the frame to the photo's
   own 4:3 instead so nothing is lost. Scoped to this instance only. */
.consult__photo--ratio-4x3 {
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.consult__photo--ratio-4x3 img {
  object-position: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .consult__panel,
  .consult__photo {
    transition: none;
  }
}

/* ---- Responsive: tablet 768–1199 ---- */

@media (max-width: 1199px) {
  .consult { padding-block: 80px; }
  .consult__grid { gap: 40px; }
  .consult__photo { min-height: clamp(380px, 42vw, 560px); }
  .consult__photo--portrait { min-height: 0; }
  .consult__photo--full { min-height: 0; }
  .consult__photo--ratio-4x3 { min-height: 0; }
  .consult__photo--odot { min-height: 0; }
}

/* ---- Single column below ~860px ---- */

@media (max-width: 860px) {
  .consult { padding-block: 64px; }

  .consult__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .consult__title,
  .consult__subtitle {
    text-align: right;
  }

  .consult__rule,
  .consult__subtitle {
    margin-inline: 0 auto;
  }

  .consult__photo { min-height: clamp(320px, 70vw, 480px); }
  .consult__photo--portrait { min-height: 0; }
  .consult__photo--full { min-height: 0; }
  .consult__photo--ratio-4x3 { min-height: 0; }
  .consult__photo--odot { min-height: 0; }
}

@media (max-width: 640px) {
  .consult { padding-inline: 22px; }
  .consult__title { font-size: clamp(28px, 9vw, 36px); }
  .consult-form__row { grid-template-columns: 1fr; gap: 18px; }
}

/* ============ LOCATION / CONTACT SECTION ============ */
/* Heading system matches .treatments__title / .journey__title exactly;
   background family matches .consult for a seamless hand-off into the footer. */

.location {
  --lc-dark: var(--fs-brown);

  position: relative;
  background: radial-gradient(circle at 12% 8%, rgba(var(--fs-white-rgb), 0.9) 0%, rgba(var(--fs-white-rgb), 0) 42%),
    linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 55%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.location__container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.location__head {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.location__head[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.location__head.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.location__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 150px;
  margin: 0 auto 22px;
}

.location__ornament span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

.location__ornament span:last-child {
  background: linear-gradient(90deg, var(--accent), transparent);
}

.location__ornament i {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--accent);
  transform: rotate(45deg);
  border-radius: 1px;
}

.location__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--lc-dark);
  margin: 0;
}

.location__subtitle {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--lc-dark);
  opacity: 0.75;
  max-width: 480px;
  margin: 20px auto 0;
}

/* ---- Grid: photo + facts/actions panel ---- */

.location__grid {
  display: grid;
  /* direction: rtl (inherited) places grid track 1 on the right and track 2
     on the left — explicit order below guarantees the facts/actions panel
     lands on the right (primary reading content, matching .about__grid /
     .why__container) and the photo on the left, regardless of DOM order. */
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  gap: 56px;
  margin-bottom: 56px;
}

.location__photo {
  order: 2;
}

.location__panel {
  order: 1;
}

.location__photo[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.location__photo.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.location__photo {
  position: relative;
  min-height: clamp(360px, 34vw, 520px);
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.35);
  box-shadow: 0 22px 54px rgba(var(--shadow-rgb), 0.14);
}

.location__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(1.03) saturate(1.05);
  display: block;
}

.location__panel[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out 120ms, transform 800ms ease-out 120ms;
}

.location__panel.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.location__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
}

/* ---- Facts list ---- */

.location__facts {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.location__fact {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.22);
}

.location__fact:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.location__fact dt {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 150px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lc-dark);
  opacity: 0.75;
}

.location__fact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex-shrink: 0;
}

.location__fact-icon svg {
  width: 100%;
  height: 100%;
}

.location__fact dd {
  margin: 0;
  flex: 1;
  min-width: 160px;
  font-size: 17px;
  font-weight: 400;
  color: var(--lc-dark);
}

.location__fact-link {
  font-weight: 600;
  color: var(--lc-dark);
  transition: color 200ms ease-out;
}

.location__fact-link:hover {
  color: var(--accent);
}

/* ---- Actions: unified CTA row (call / WhatsApp / directions / social) ---- */

.location__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.location__action {
  flex: 0 0 auto;
}

/* ---- Map embed ---- */

.location__map[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.location__map.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.location__map {
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.35);
  box-shadow: 0 22px 54px rgba(var(--shadow-rgb), 0.1);
}

.location__map iframe {
  display: block;
  width: 100%;
  height: clamp(300px, 32vw, 420px);
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .location__head,
  .location__photo,
  .location__panel,
  .location__map {
    transition: none;
  }
}

/* ---- Responsive: tablet 768–1199 ---- */

@media (max-width: 1199px) {
  .location { padding-block: 80px; }
  .location__grid { gap: 40px; margin-bottom: 40px; }
  .location__photo { min-height: clamp(320px, 42vw, 440px); }
}

/* ---- Single column below ~860px ---- */

@media (max-width: 860px) {
  .location { padding-block: 64px; }

  .location__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .location__photo { min-height: clamp(280px, 60vw, 400px); }
}

@media (max-width: 640px) {
  .location { padding-inline: 22px; }
  .location__head { margin-bottom: 40px; }
  .location__title { font-size: clamp(28px, 9vw, 36px); }

  .location__fact { flex-direction: column; align-items: flex-start; gap: 8px; }
  .location__fact dt { min-width: 0; }
  .location__fact dd { min-width: 0; }

  .location__actions { flex-direction: column; }
  .location__action { width: 100%; }

  .location__map iframe { height: 280px; }
}

/* ============ SITE FOOTER ============ */

.site-footer {
  position: relative;
  background: linear-gradient(160deg, var(--color-deep-green-darkest) 0%, var(--color-deep-green) 120%);
  padding-block: 72px 32px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
  color: var(--ink-body);
}

.site-footer__container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr auto;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.14);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.site-footer__logo img {
  height: 42px;
  width: auto;
}

.site-footer__tagline {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-body);
  opacity: 0.8;
  margin: 0;
  max-width: 240px;
}

.site-footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__nav a {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-body);
  transition: color 200ms ease-out;
}

.site-footer__nav a:hover {
  color: var(--accent);
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.site-footer__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  transition: color 200ms ease-out;
  min-height: 44px;
}

.site-footer__contact-link .icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex-shrink: 0;
}

.site-footer__contact-link:hover {
  color: var(--accent);
}

.site-footer__address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-body);
  margin: 0;
  max-width: 260px;
}

.site-footer__address .icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.site-footer__social {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(var(--line-rgb), 0.35);
  color: var(--accent);
  flex-shrink: 0;
  transition: background 200ms ease-out, border-color 200ms ease-out, transform 200ms ease-out;
}

.site-footer__social-link svg {
  width: 19px;
  height: 19px;
}

.site-footer__social-link:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
}

.site-footer__copyright {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--ink-body);
  opacity: 0.75;
  margin: 0;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.site-footer__legal a {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-body);
  opacity: 0.85;
  transition: color 200ms ease-out, opacity 200ms ease-out;
}

.site-footer__legal a:hover {
  color: var(--accent);
  opacity: 1;
}

.site-footer__a11y-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(var(--line-rgb), 0.4);
  background: transparent;
  color: var(--accent);
  font-family: "Assistant", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease-out, border-color 200ms ease-out;
}

.site-footer__a11y-btn svg {
  width: 17px;
  height: 17px;
}

.site-footer__a11y-btn:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
}

@media (max-width: 1199px) {
  .site-footer { padding-block: 64px 28px; }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
}

@media (max-width: 767px) {
  .site-footer { padding-inline: 22px; padding-block: 56px 24px; }
  .site-footer__top { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__brand, .site-footer__contact { align-items: flex-start; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .site-footer__legal { gap: 10px 18px; }
}

/* ============ ACCESSIBILITY WIDGET (IS 5568 / Regulation 35) ============ */
/* A user-preference comfort tool: every visual change is a CSS class toggled
   on <html>. It never mutates content DOM, alt text, or ARIA — see
   knowledge base / israeli-accessibility-compliance skill for the scope
   rules this widget must respect. */

.a11y-fab {
  /* Physical left in RTL (inset-inline-end, not -start) — matches the
     common placement convention for Israeli accessibility widgets, and
     keeps it clear of the footer's right-aligned brand/contact columns. */
  position: fixed;
  z-index: 150;
  bottom: 24px;
  inset-inline-end: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(var(--shadow-rgb), 0.28);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, background 200ms ease-out;
}

.a11y-fab svg {
  width: 26px;
  height: 26px;
}

.a11y-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(var(--shadow-rgb), 0.32);
}

.a11y-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.a11y-panel[hidden] {
  display: none;
}

.a11y-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--fs-green-rgb), 0.55);
  opacity: 0;
  transition: opacity 280ms ease-out;
}

.a11y-panel.is-open .a11y-panel__backdrop {
  opacity: 1;
}

.a11y-panel__box {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--fs-white);
  border-radius: 22px;
  padding: 28px clamp(20px, 4vw, 32px) 32px;
  box-shadow: 0 30px 70px rgba(var(--shadow-rgb), 0.3);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 280ms ease-out, transform 280ms ease-out;
  font-family: "Assistant", sans-serif;
  text-align: right;
}

.a11y-panel.is-open .a11y-panel__box {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.a11y-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.a11y-panel__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.a11y-panel__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(var(--line-rgb), 0.35);
  background: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease-out, transform 200ms ease-out;
}

.a11y-panel__close svg {
  width: 16px;
  height: 16px;
}

.a11y-panel__close:hover {
  background: rgba(var(--accent-rgb), 0.1);
  transform: rotate(90deg);
}

.a11y-panel__hint {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink);
  opacity: 0.65;
  margin: 0 0 22px;
}

.a11y-panel__stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1px solid rgba(var(--line-rgb), 0.25);
  background: rgba(var(--accent-rgb), 0.05);
}

.a11y-panel__stepper-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.a11y-panel__stepper-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.a11y-step {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(var(--line-rgb), 0.4);
  background: var(--fs-white);
  color: var(--ink);
  font-family: "Assistant", sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 200ms ease-out, border-color 200ms ease-out;
}

.a11y-step:hover {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: var(--accent);
}

.a11y-panel__stepper-value {
  min-width: 44px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  direction: ltr;
  unicode-bidi: isolate;
}

.a11y-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.a11y-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
  border-radius: 14px;
  border: 1px solid rgba(var(--line-rgb), 0.25);
  background: var(--fs-white);
  color: var(--ink);
  font-family: "Assistant", sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  cursor: pointer;
  min-height: 44px;
  transition: background 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.a11y-toggle__icon {
  font-size: 19px;
  line-height: 1;
  color: var(--accent);
}

.a11y-toggle:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
}

.a11y-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.a11y-panel__reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(var(--line-rgb), 0.35);
  background: none;
  color: var(--ink);
  font-family: "Assistant", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease-out;
}

.a11y-panel__reset svg {
  width: 16px;
  height: 16px;
}

.a11y-panel__reset:hover {
  background: rgba(var(--accent-rgb), 0.1);
}

.a11y-panel__status {
  min-height: 1.2em;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-body);
  text-align: center;
}

.a11y-panel__footer-note {
  margin: 16px 0 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.6;
  text-align: center;
}

.a11y-panel__footer-note a {
  color: var(--accent);
  text-decoration: underline;
}

/* Widget stays readable even when invert/high-contrast is active on the page */
html.a11y-contrast-invert .a11y-fab,
html.a11y-contrast-invert .a11y-panel {
  filter: invert(1) hue-rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .a11y-fab, .a11y-panel__backdrop, .a11y-panel__box, .a11y-panel__close {
    transition: none;
  }
}

@media (max-width: 640px) {
  .a11y-fab { bottom: 16px; inset-inline-end: 16px; width: 48px; height: 48px; }
  .a11y-fab svg { width: 22px; height: 22px; }
  .a11y-panel { padding: 16px; }
  .a11y-panel__box { padding: 24px 18px 28px; border-radius: 18px; }
  .a11y-panel__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ---- Accessibility preference effect classes — applied to <html> ---- */

html.a11y-contrast-high {
  filter: contrast(1.25) saturate(1.05);
}

html.a11y-contrast-invert {
  filter: invert(1) hue-rotate(180deg);
}

html.a11y-contrast-invert img,
html.a11y-contrast-invert video,
html.a11y-contrast-invert iframe {
  filter: invert(1) hue-rotate(180deg);
}

/* Uses `zoom` rather than a body font-size percentage: the site's type
   scale is defined in fixed px per element (WEBSITE_DESIGN_SYSTEM.md §3.2),
   so a body-level relative font-size would not cascade into any of it.
   `zoom` scales the whole rendered page — text included — reliably across
   current Chrome, Safari, Edge and Firefox. */
html.a11y-text-112 { zoom: 1.12; }
html.a11y-text-125 { zoom: 1.25; }
html.a11y-text-137 { zoom: 1.37; }
html.a11y-text-150 { zoom: 1.5; }

html.a11y-underline-links a:not(.btn):not(.a11y-toggle):not(.a11y-step) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

html.a11y-highlight-focus *:focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(var(--shadow-rgb), 0.25) !important;
}

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

@media print {
  html[class*="a11y-"] { filter: none !important; }
  html[class*="a11y-text-"] { zoom: 1 !important; }
}

/* ============ LEGAL PAGES (privacy / terms / accessibility statement) ============ */

.site-header--simple {
  background: var(--color-deep-green-darkest);
}

.site-header--simple .site-header__inner {
  justify-content: flex-start;
  gap: 24px;
  padding-block: 24px;
}

.site-header__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-body);
  transition: color 200ms ease-out;
}

.site-header__back svg {
  width: 18px;
  height: 18px;
}

.site-header__back:hover {
  color: var(--ink);
}

.legal-page {
  background: radial-gradient(circle at 12% 8%, rgba(var(--fs-white-rgb), 0.9) 0%, rgba(var(--fs-white-rgb), 0) 42%),
    linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 55%, var(--fs-ivory) 100%);
  padding-block: 72px 100px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.legal-page__container {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}

.legal-page__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 14px;
}

.legal-page__updated {
  font-size: 14px;
  font-weight: 400;
  color: var(--accent);
  opacity: 0.9;
  margin: 0 0 40px;
}

.legal-page__rule {
  display: none;
}

.legal-page__body h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 40px 0 14px;
}

.legal-page__body h2:first-child {
  margin-top: 0;
}

.legal-page__body p {
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 14px;
}

.legal-page__body ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
  padding-inline-start: 22px;
  list-style: disc;
}

.legal-page__body li {
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink);
}

.legal-page__body a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
}

.legal-page__body strong {
  font-family: inherit;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 640px) {
  .legal-page { padding-block: 48px 72px; padding-inline: 22px; }
  .legal-page__body h2 { font-size: 19px; margin-top: 32px; }
  .legal-page__body p, .legal-page__body li { font-size: 15.5px; }
}

/* ============================================================
   SERVICES PAGE (services.html) — short overview: hero + grid + CTA.
   Deep per-service pages (dental-implants.html etc.) reuse the
   component classes further below (svflagship, svbanner, svsteps,
   svcosmetic, svrows, svaligners, svgum, svmyths).
   ============================================================ */

/* ---- Overview hero: large contained photo banner with the title
   overlaid in the image's own negative space, short intro + CTA
   below the frame (never beside/behind the nav). ---- */

.svohero {
  position: relative;
  background: linear-gradient(180deg, var(--color-deep-green-darkest) 0%, var(--fs-black) 100%);
}

.svohero__split {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  min-height: 620px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.svohero__panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px clamp(32px, 5vw, 80px);
}

.svohero__title {
  margin: 0 0 28px;
  font-weight: 300;
  font-size: clamp(40px, 4.6vw, 70px);
  line-height: 1.1;
}

.svohero__title-light,
.svohero__title-gold {
  display: block;
}

.svohero__title-light {
  color: var(--ink);
}

.svohero__title-gold {
  background: linear-gradient(90deg, var(--accent-hi), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.svohero__desc {
  font-family: "Assistant", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-body);
  max-width: 480px;
  margin: 0 0 36px;
}

.svohero__visual {
  position: relative;
  overflow: hidden;
}

.svohero__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 48%;
  filter: brightness(0.98) saturate(1.05);
}

.svohero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, var(--color-deep-green-darkest) 100%);
}

/* E-max hero photo is a tight lips/teeth close-up, already centred —
   the shared 58%/48% offset (tuned for a different photo) would push
   part of the smile out of frame, so this instance keeps it centred. */
.svohero__visual--emax img {
  object-position: center;
}

.svohero__panel[data-reveal],
.svohero__visual[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svohero__visual[data-reveal] {
  transition-delay: 120ms;
}

.svohero__panel.is-revealed,
.svohero__visual.is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 899px) {
  .svohero__split { grid-template-columns: 1fr; min-height: 0; }
  .svohero__visual { height: 320px; order: 2; }
  .svohero__visual img { object-position: 62% 50%; }
  .svohero__visual--emax img { object-position: center; }
  .svohero__visual::after { background: linear-gradient(0deg, var(--color-deep-green-darkest) 2%, transparent 45%); }
  .svohero__panel { order: 1; padding: 56px 24px 40px; text-align: center; align-items: center; }
  .svohero__desc { max-width: 100%; }
  .svohero__title { font-size: clamp(32px, 6vw, 48px); }
}

@media (max-width: 480px) {
  .svohero__visual { height: 260px; }
  .svohero__panel { padding: 48px 20px 32px; }
}

/* ---- Grid size modifier: slightly larger cards on the overview page,
   same visual recipe as .treatment-card everywhere else. ---- */

.treatments__grid--lg .treatment-card {
  padding: 40px 28px 32px;
}

.treatments__grid--lg .treatment-card__icon img {
  height: 60px;
}

.treatments__grid--lg .treatment-card__title {
  font-size: 21px;
}

.treatments__grid--lg .treatment-card__desc {
  font-size: 15px;
}

/* ---- Flagship: Full Mouth Rehabilitation — full-bleed dark, cinematic ---- */

.svflagship {
  position: relative;
  background: linear-gradient(155deg, var(--fs-green) 0%, var(--fs-green) 100%);
  padding-block: 110px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
  overflow: hidden;
}

.svflagship__container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}

.svflagship__eyebrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}

.svflagship__title {
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 300;
  color: var(--fs-white);
  margin: 0 0 32px;
}

.svflagship__shift {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.svflagship__before {
  font-size: 18px;
  font-weight: 300;
  color: rgba(var(--fs-ivory-rgb), 0.5);
  text-decoration: line-through;
  text-decoration-color: rgba(var(--line-rgb), 0.4);
  margin: 0;
}

.svflagship__arrow {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0;
  transform: scaleX(-1);
}

.svflagship__after {
  font-size: 21px;
  font-weight: 500;
  color: var(--fs-white);
  margin: 0;
}

.svflagship__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.svflagship__desc {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-body);
  max-width: 480px;
  margin: 0 0 28px;
}

.svflagship__chain {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.svflagship__chain span {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  padding: 8px 14px;
  border: 1px solid rgba(var(--line-rgb), 0.3);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.06);
}

.svflagship__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.3);
  box-shadow: 0 25px 60px rgba(var(--shadow-rgb), 0.45), 0 0 70px rgba(var(--shadow-rgb), 0.10);
  position: sticky;
  top: 40px;
}

.svflagship__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.05);
}

.svflagship__text[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svflagship__photo[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out 120ms;
}

.svflagship__text.is-revealed,
.svflagship__photo.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- Banner: Dental Implants — full-width photo banner + info + steps ---- */

.svbanner {
  position: relative;
  background: linear-gradient(180deg, var(--fs-white) 0%, var(--fs-white) 100%);
  font-family: "Assistant", sans-serif;
}

.svbanner__photo {
  position: relative;
  height: clamp(340px, 46vw, 560px);
  overflow: hidden;
}

.svbanner__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.75) saturate(1.05);
}

.svbanner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(var(--fs-black-rgb), 0.75), rgba(var(--fs-black-rgb), 0.15) 55%);
}

.svbanner__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 100px) 44px;
}

.svbanner__eyebrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}

.svbanner__title {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 300;
  color: var(--fs-white);
  margin: 0;
}

.svbanner__body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px clamp(24px, 6vw, 100px) 96px;
}

.svbanner__lead {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  max-width: 720px;
  margin: 0 0 40px;
}

.svbanner__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 64px;
}

.svbanner__cols p:last-child,
.svbanner__footrow p {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0;
}

.svbanner__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.svbanner__footrow {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
  margin-top: 64px;
}

.svbanner__footrow p {
  margin-bottom: 20px;
}

.svbanner__footphoto {
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.25);
  box-shadow: 0 18px 40px rgba(var(--shadow-rgb), 0.12);
}

.svbanner__footphoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.02) saturate(1.05);
}

.svbanner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  transition: gap 250ms ease-out, color 250ms ease-out;
  margin-top: 4px;
}

.svbanner__cta svg { width: 15px; height: 15px; }
.svbanner__cta:hover { gap: 12px; color: var(--accent); }

.svbanner__intro[data-reveal],
.svbanner__footrow[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svbanner__intro.is-revealed,
.svbanner__footrow.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- Steps: horizontal numbered process strip (reused across services) ---- */

.svsteps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 36px 0;
  border-top: 1px solid rgba(var(--line-rgb), 0.22);
  border-bottom: 1px solid rgba(var(--line-rgb), 0.22);
}

.svsteps__item {
  position: relative;
  padding-inline-start: 20px;
  border-inline-start: 2px solid rgba(var(--line-rgb), 0.3);
}

.svsteps__num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  direction: ltr;
  margin-bottom: 8px;
}

.svsteps__item p {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.svsteps[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svsteps.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- Cosmetic dentistry: gallery-led ---- */

.svcosmetic {
  position: relative;
  background: linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 55%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.svcosmetic__head {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}

.svcosmetic__eyebrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}

.svcosmetic__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.svcosmetic__lead {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.8;
  margin: 20px auto 0;
}

.svcosmetic__gallery {
  max-width: 1180px;
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 20px;
}

.svcosmetic__photo {
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.22);
  box-shadow: 0 18px 40px rgba(var(--shadow-rgb), 0.12);
}

.svcosmetic__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.03) saturate(1.05);
}

.svcosmetic__foot {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 40px;
  align-items: center;
}

.svcosmetic__foot p {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0;
}

.svcosmetic__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.svcosmetic__gallery[data-reveal],
.svcosmetic__foot[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svcosmetic__gallery.is-revealed,
.svcosmetic__foot.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- Cosmetic dentistry: what can change (6-card grid) ---- */

.svchanges {
  position: relative;
  background: linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 55%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.svchanges__head {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}

.svchanges__eyebrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}

.svchanges__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.svchanges__grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.svchanges__card {
  background: var(--fs-white);
  border: 1px solid rgba(var(--line-rgb), 0.22);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 14px 32px rgba(var(--shadow-rgb), 0.08);
}

.svchanges__card-mark {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-bottom: 16px;
}

.svchanges__card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}

.svchanges__card p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-body);
  margin: 0;
}

.svchanges__grid[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svchanges__grid.is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 899px) {
  .svchanges__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .svchanges { padding-inline: 22px; padding-block: 64px; }
  .svchanges__grid { grid-template-columns: 1fr; }
}

/* ---- Cosmetic dentistry: how we plan the smile (4 large cards) ---- */

.svplan {
  position: relative;
  background: linear-gradient(180deg, var(--fs-white) 0%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.svplan__head {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}

.svplan__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.svplan__grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.svplan__card {
  background: var(--fs-white);
  border: 1px solid rgba(var(--line-rgb), 0.22);
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 14px 32px rgba(var(--shadow-rgb), 0.08);
}

.svplan__card-num {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--line-rgb), 0.4);
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  direction: ltr;
  margin-bottom: 18px;
}

.svplan__card h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
}

.svplan__card p {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0 0 10px;
}

.svplan__card p:last-child {
  margin-bottom: 0;
}

.svplan__grid[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svplan__grid.is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 899px) {
  .svplan__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .svplan { padding-inline: 22px; padding-block: 64px; }
  .svplan__card { padding: 32px 26px; }
}

/* ---- Rows: generic alternating editorial photo/text (E-max Crowns, Oral Surgery) ---- */

.svrows {
  position: relative;
  background: linear-gradient(180deg, var(--fs-white) 0%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.svrows__head {
  max-width: 680px;
  margin: 0 auto 64px;
  text-align: center;
}

.svrows__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

.svrows__subtitle {
  font-size: 17px;
  font-weight: 300;
  color: var(--ink);
  opacity: 0.75;
  margin: 20px auto 0;
}

.svrows__row {
  max-width: 1180px;
  margin: 0 auto 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.svrows--single .svrows__row {
  margin-bottom: 0;
}

.svrows__row:last-child {
  margin-bottom: 0;
}

.svrows__row--reverse .svrows__photo {
  order: 2;
}

.svrows__row--reverse .svrows__body {
  order: 1;
}

.svrows__photo {
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.25);
  box-shadow: 0 20px 46px rgba(var(--shadow-rgb), 0.14);
}

.svrows__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.02) saturate(1.05);
}

/* Spark "who is it for" photo: the replacement shot is portrait-oriented
   (doctor, assistant and patient stacked vertically) and doesn't fit the
   shared 4:3 landscape frame without losing one of the three people, so
   this instance gets a taller ratio — scoped so the shared .svrows__photo
   default (used by other pages) is untouched. */
.svrows__photo--who {
  aspect-ratio: 1 / 1;
}

/* Same reason as --who, and the mirror of the rule already present in the
   narrow-viewport block: lancet-loupes.jpg is a 3:4 portrait, and the shared
   4:3 frame takes 44% off the top and bottom of it — enough to cut the crown
   of the head off. The modifier existed only below the breakpoint, so desktop
   kept the sliced crop. */
.svrows__photo--portrait {
  aspect-ratio: 4 / 5;
}

.svrows__eyebrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}

.svrows__rowtitle {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 18px;
}

.svrows__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin: 20px 0 8px;
}

.svrows__body p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0;
  max-width: 460px;
}

.svrows__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  transition: gap 250ms ease-out, color 250ms ease-out;
  margin-top: 20px;
}

.svrows__cta svg { width: 15px; height: 15px; }
.svrows__cta:hover { gap: 12px; color: var(--accent); }

.svrows__row[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svrows__row.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- Spark Aligners: infographic tray-progression ---- */

.svaligners {
  position: relative;
  background: linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 55%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}

.svaligners__eyebrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}

.svaligners__title {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 20px;
}

.svaligners__lead {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.85;
  margin: 0 0 24px;
}

.svaligners__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.svaligners__desc {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0 0 20px;
}

.svaligners__trays {
  display: flex;
  align-items: center;
  justify-content: center;
}

.svaligners__tray {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--line-rgb), 0.4);
  background: var(--fs-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
  box-shadow: 0 8px 20px rgba(var(--shadow-rgb), 0.08);
}

.svaligners__tray--final {
  background: var(--cta-bg);
  color: var(--cta-ink);
  border-color: transparent;
}

.svaligners__track {
  flex: 1;
  height: 2px;
  min-width: 20px;
  background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.5) 0 6px, transparent 6px 12px);
}

.svaligners__text[data-reveal],
.svaligners__trays[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svaligners__text.is-revealed,
.svaligners__trays.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- Gum treatment: calm, checklist-led ---- */

.svgum {
  position: relative;
  background: linear-gradient(180deg, var(--fs-white) 0%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.svgum__container {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}

.svgum__eyebrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}

.svgum__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 20px;
}

.svgum__lead {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 480px;
  margin: 0 0 28px;
}

.svgum__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  transition: gap 250ms ease-out, color 250ms ease-out;
}

.svgum__cta svg { width: 15px; height: 15px; }
.svgum__cta:hover { gap: 12px; color: var(--accent); }

.svgum__checklist {
  background: var(--fs-white);
  border: 1px solid rgba(var(--line-rgb), 0.22);
  border-radius: 22px;
  padding: 36px 32px;
  box-shadow: 0 18px 40px rgba(var(--shadow-rgb), 0.08);
}

.svgum__checklist-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 20px;
}

.svgum__checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.svgum__checklist li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}

.svgum__checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.svgum__container[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svgum__container.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- Root canal: myth vs fact ---- */

.svmyths {
  position: relative;
  background: linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 55%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
  text-align: center;
}

.svmyths__head {
  max-width: 680px;
  margin: 0 auto 56px;
}

.svmyths__eyebrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}

.svmyths__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.svmyths__lead {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.8;
  margin: 20px auto 0;
}

.svmyths__grid {
  max-width: 1080px;
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: right;
}

.svmyths__card {
  background: var(--fs-white);
  border: 1px solid rgba(var(--line-rgb), 0.2);
  border-radius: 20px;
  padding: 30px 26px;
}

.svmyths__myth {
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink-body);
  text-decoration: line-through;
  text-decoration-color: rgba(var(--line-rgb), 0.5);
  margin: 0 0 16px;
}

.svmyths__fact {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.svmyths__grid[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svmyths__grid.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- Final CTA ---- */

.svconsult__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.svconsult__intro[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svconsult__intro.is-revealed {
  opacity: 1;
  transform: none;
}

.svconsult__statement {
  font-family: "Assistant", sans-serif;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 300;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 20px;
}

.svconsult__statement em {
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
}

.svconsult__links {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-body);
  margin: 0;
}

.svconsult__links a {
  color: var(--accent);
  font-weight: 600;
}

.svconsult__links a:hover {
  color: var(--accent);
}

.svconsult__links span {
  margin: 0 10px;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .svhero__cycler-phrase,
  .svapproach__photo,
  .svapproach__text,
  .svflagship__text,
  .svflagship__photo,
  .svbanner__intro,
  .svbanner__footrow,
  .svsteps,
  .svcosmetic__gallery,
  .svcosmetic__foot,
  .svrows__row,
  .svaligners__text,
  .svaligners__trays,
  .svgum__container,
  .svmyths__grid,
  .svconsult__intro {
    transition: none;
  }
}

/* ---- Responsive: tablet ---- */

@media (max-width: 1199px) {
  .svapproach__container,
  .svflagship__container,
  .svbanner__cols,
  .svbanner__footrow,
  .svcosmetic__gallery,
  .svrows__row,
  .svaligners,
  .svgum__container {
    gap: 40px;
  }

  .svmyths__grid { grid-template-columns: repeat(2, 1fr); }
  .svcosmetic__foot { grid-template-columns: 1fr 1fr; }
  .svcosmetic__foot .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ---- Responsive: single column below 860px ---- */

@media (max-width: 899px) {
  .svcosmetic__gallery { grid-template-columns: 1fr 1fr; }
  .svcosmetic__photo--tall { grid-row: span 2; }
}

@media (max-width: 860px) {
  .svapproach__container,
  .svbanner__cols,
  .svbanner__footrow,
  .svrows__row,
  .svaligners,
  .svgum__container {
    grid-template-columns: 1fr;
  }

  .svapproach__photo { aspect-ratio: 16 / 10; }

  .svflagship__container { grid-template-columns: 1fr; }
  .svflagship__photo { aspect-ratio: 16 / 10; order: -1; position: static; }

  .svsteps { grid-template-columns: repeat(2, 1fr); }

  .svbanner__footphoto { aspect-ratio: 16 / 10; }

  .svrows__row--reverse .svrows__photo,
  .svrows__row--reverse .svrows__body {
    order: 0;
  }
  .svrows__photo { aspect-ratio: 16 / 10; }
  .svrows__photo--who { aspect-ratio: 1 / 1; }
  .svrows__photo--today { aspect-ratio: 3 / 4; }
  /* same reason as --today: a 2:3 portrait source needs a portrait frame here,
     or the shared 16/10 takes 29% off the top and bottom */
  .svrows__photo--portrait { aspect-ratio: 3 / 4; }

  .svaligners__trays { order: -1; }

  .svcosmetic__foot { grid-template-columns: 1fr; text-align: center; }
  .svcosmetic__foot .btn { justify-self: center; }
}

/* ---- Mobile ---- */

@media (max-width: 767px) {
  .svhero { min-height: auto; padding-bottom: 48px; }
  .svapproach,
  .svcosmetic,
  .svrows,
  .svgum,
  .svmyths { padding-inline: 22px; padding-block: 64px; }
  .svflagship,
  .svaligners { padding-inline: 22px; padding-block: 72px; }
  .svbanner__body { padding: 56px 22px 72px; }
  .svbanner__caption { padding-inline: 22px; }

  .svflagship__shift { flex-direction: column; align-items: flex-start; gap: 10px; }
  .svflagship__arrow { transform: scaleX(-1) rotate(90deg); }

  .svbanner__cols { gap: 28px; }
  .svsteps { grid-template-columns: 1fr; gap: 20px; }

  .svcosmetic__gallery { grid-template-columns: 1fr; }
  .svcosmetic__photo--tall { grid-row: auto; }

  .svmyths__grid { grid-template-columns: 1fr; }

  .svaligners__trays { flex-wrap: wrap; gap: 10px 0; }
  .svaligners__track { min-width: 14px; }
}

/* ============================================================
   INDIVIDUAL SERVICE PAGES (dental-implants.html and siblings)
   ============================================================ */

/* ---- Page hero: reuses .svbanner__photo/__scrim/__caption/__eyebrow/__title,
   contained + rounded (unlike the mid-page full-bleed .svbanner usage),
   with header breathing room + a short lead under the photo. ---- */

.svhpage {
  position: relative;
  background: var(--color-deep-green-darkest);
  padding-bottom: 88px;
}

.svhpage .svbanner__photo {
  max-width: 1360px;
  height: auto;
  aspect-ratio: 2.1 / 1;
  margin: 48px auto 0;
  border-radius: 28px;
  border: 1px solid rgba(var(--line-rgb), 0.3);
  box-shadow: 0 30px 70px rgba(var(--shadow-rgb), 0.5);
}

.svhpage .svbanner__caption {
  padding: 0 clamp(48px, 6vw, 96px) 48px;
}

.svhpage__lead {
  max-width: 720px;
  margin: 44px auto 0;
  padding-inline: 24px;
  text-align: center;
  font-family: "Assistant", sans-serif;
}

.svhpage__lead p {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0 0 16px;
}

.svhpage__lead p:last-child {
  margin-bottom: 0;
}

.svhpage__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}

.svhpage__cta-note {
  font-size: 14px !important;
  color: var(--ink-body);
  opacity: 0.8;
  margin: 0 !important;
}

.svbanner__photo[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svhpage__lead[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out 120ms;
}

.svbanner__photo.is-revealed,
.svhpage__lead.is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 899px) {
  .svhpage .svbanner__photo { aspect-ratio: 4 / 3; }
  .svhpage .svbanner__title { font-size: clamp(28px, 5vw, 38px); }
}

@media (max-width: 640px) {
  .svhpage { padding-bottom: 64px; }
  .svhpage .svbanner__photo { margin-top: 32px; margin-inline: 16px; width: calc(100% - 32px); }
  .svhpage__lead { padding-inline: 22px; }
}

/* ---- Materials: implant systems / material brands ---- */

.svmat {
  position: relative;
  background: linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 55%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.svmat__container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.svmat__eyebrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}

.svmat__title {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.svmat__lead {
  font-size: 17px;
  font-weight: 300;
  color: var(--ink-body);
  margin: 20px 0 0;
}

.svmat__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 40px 0 28px;
}

.svmat__card {
  background: var(--fs-white);
  border: 1px solid rgba(var(--line-rgb), 0.22);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 14px 32px rgba(var(--shadow-rgb), 0.08);
}

.svmat__brand {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 10px;
  direction: ltr;
}

.svmat__card p:last-child {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-body);
  margin: 0;
}

.svmat__note {
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink-body);
  margin: 0;
}

.svmat__grid[data-reveal],
.svmat__note[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svmat__grid.is-revealed,
.svmat__note.is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  .svmat__grid { grid-template-columns: 1fr; }
}

/* ---- Journey: detailed numbered treatment stages (long-form, with
   sub-bullets/chips where the stage needs them) — distinct from the
   short 4-item .svsteps strip used elsewhere. ---- */

.svjourney {
  position: relative;
  background: linear-gradient(180deg, var(--fs-white) 0%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.svjourney__head {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.svjourney__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.svjourney__list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.svjourney__item {
  display: flex;
  gap: 28px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.2);
}

.svjourney__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.svjourney__num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--line-rgb), 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  direction: ltr;
}

.svjourney__body h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 8px 0 10px;
}

.svjourney__body p {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0 0 12px;
}

.svjourney__body p:last-child {
  margin-bottom: 0;
}

.svjourney__body ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.svjourney__body ul li {
  position: relative;
  padding-inline-start: 22px;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
}

.svjourney__body ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.svjourney__chips {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 8px !important;
}

.svjourney__chips li {
  padding: 6px 14px !important;
  border: 1px solid rgba(var(--line-rgb), 0.3);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.06);
}

.svjourney__chips li::before {
  content: none;
}

.svjourney__item[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}

.svjourney__item.is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  .svjourney__item { gap: 18px; }
  .svjourney__num { width: 36px; height: 36px; font-size: 13px; }
}

/* ---- E-max page only: 3-photo showcase row above the process steps,
   and the steps themselves as a compact card grid instead of the base
   long horizontal rows. Scoped under .svjourney--emax so the shared
   .svjourney component keeps its original row layout on the other two
   pages that reuse it (full-mouth-rehabilitation, dental-implants). ---- */

.svjourney__gallery {
  max-width: 1180px;
  margin: 0 auto 56px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.svjourney__gallery-tile {
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.25);
  box-shadow: 0 16px 34px rgba(var(--shadow-rgb), 0.1);
}

.svjourney__gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.02) saturate(1.05);
}

.svjourney__gallery[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svjourney__gallery.is-revealed {
  opacity: 1;
  transform: none;
}

.svjourney--emax .svjourney__list {
  max-width: 1180px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.svjourney--emax .svjourney__item {
  align-items: flex-start;
  min-height: 216px;
  gap: 14px;
  padding: 26px 22px;
  border: 1px solid rgba(var(--line-rgb), 0.22);
  border-radius: 18px;
  background: var(--fs-white);
  box-shadow: 0 10px 26px rgba(var(--shadow-rgb), 0.06);
}

.svjourney--emax .svjourney__item:last-child {
  border: 1px solid rgba(var(--line-rgb), 0.22);
  padding: 26px 22px;
}

.svjourney--emax .svjourney__num {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

.svjourney--emax .svjourney__body h3 {
  font-size: 17px;
  margin-top: 0;
}

.svjourney--emax .svjourney__body p {
  font-size: 14.5px;
}

@media (max-width: 1099px) {
  .svjourney__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .svjourney--emax .svjourney__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .svjourney__gallery {
    grid-template-columns: none;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin-bottom: 40px;
  }
  .svjourney__gallery-tile { flex: 0 0 78%; scroll-snap-align: center; }
  .svjourney--emax .svjourney__list { grid-template-columns: 1fr; }
}

/* ---- FAQ: native accordion ---- */

.svfaq {
  position: relative;
  background: linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 55%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.svfaq__container {
  max-width: 780px;
  margin: 0 auto;
}

.svfaq__head {
  text-align: center;
  margin-bottom: 40px;
}

.svfaq__title {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.svfaq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.svfaq__item {
  background: var(--fs-white);
  border: 1px solid rgba(var(--line-rgb), 0.2);
  border-radius: 16px;
  padding: 6px 24px;
}

.svfaq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.svfaq__item summary::-webkit-details-marker {
  display: none;
}

.svfaq__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
  transition: transform 250ms ease-out;
}

.svfaq__item[open] summary::after {
  transform: rotate(45deg);
}

.svfaq__item p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0 0 22px;
}

.svfaq__list[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svfaq__list.is-revealed {
  opacity: 1;
  transform: none;
}

/* ============================================================
   FULL-MOUTH REHABILITATION PAGE — additional components
   (reference template for all sibling service pages)
   ============================================================ */

/* ---- Journey photo variant: adds an optional rounded photo beside a
   .svjourney__item's text, for the stages that have supporting imagery.
   Falls back to the plain text-only item (base .svjourney__item rules
   above still apply) when no photo is present. ---- */

.svjourney__item--photo {
  gap: 32px;
}

.svjourney__item--photo .svjourney__body {
  flex: 1;
}

.svjourney__photo {
  flex-shrink: 0;
  /* the row stretches its items to the tallest one, which overrode the 1:1
     ratio wherever a step's text ran past 172px — the square became 216 or
     271px tall next to its 172px neighbours */
  align-self: flex-start;
  width: 172px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.3);
  box-shadow: 0 14px 32px rgba(var(--shadow-rgb), 0.12);
}

.svjourney__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.02) saturate(1.05);
}

@media (max-width: 640px) {
  .svjourney__item--photo { flex-wrap: wrap; }
  /* 16/9 against the 2:3 portrait sources in this rail cut 31% off the top and
     31% off the bottom — enough to take the crown off two people on the implants
     page and slice a doctor through the forehead on the rehabilitation page.
     4/5 leaves 8% top and bottom, which every source survives. */
  .svjourney__photo { width: 100%; aspect-ratio: 4 / 5; order: -1; }
}

/* ---- Technologies: reuses the homepage's .tech-head/.tech-row/.tech-item
   icon-card system inside a standalone section (same --tr-dark vars,
   same light gradient background family as .svmat/.svrows/.svfaq). ---- */

.svtech {
  position: relative;
  background: linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 55%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.svtech__container {
  --tr-dark: var(--fs-brown);
  --tr-dark-2: var(--fs-brown);
  max-width: 1180px;
  margin: 0 auto;
}

.svtech .tech-row[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svtech .tech-row.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- Before/After comparison slider: draggable divider (pointer + touch +
   keyboard), image sources swap via plain <img src>, no other markup change
   needed to replace placeholder photos with real case photography later. ---- */

.svba {
  position: relative;
  background: linear-gradient(180deg, var(--fs-white) 0%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.svba__head {
  max-width: 680px;
  margin: 0 auto 20px;
  text-align: center;
}

.svba__eyebrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}

.svba__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.svba__lead {
  font-size: 16px;
  font-weight: 300;
  color: var(--ink-body);
  max-width: 620px;
  margin: 44px auto 40px;
  text-align: center;
}

/* States plainly that the comparisons in this section are illustrations, not
   documented patient outcomes. Kept quiet visually but not hidden. */
.svba__disclaimer {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 760px;
  margin: 36px auto 0;
  text-align: center;
}

.svba__grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.svba__case {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.28);
  box-shadow: 0 20px 46px rgba(var(--shadow-rgb), 0.16);
  direction: ltr; /* comparison mechanics stay left→right regardless of page direction */
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Full-mouth rehabilitation: those frames are landscape, and at the shared 1:1
   the outer teeth of the arch fall outside the box and object-fit:cover trims
   them off. 3:2 matches the source, so nothing is cropped. Scoped to that page
   — the veneers page still uses square frames and must keep 1:1. */
.ba-slider--wide {
  aspect-ratio: 3 / 2;
}

.ba-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.ba-slider__img--before {
  clip-path: inset(0 50% 0 0);
  transition: clip-path 300ms ease-out;
}

.ba-slider.is-dragging .ba-slider__img--before {
  transition: none;
}

.ba-slider__handle {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 0;
  transform: translateX(-50%);
  transition: left 300ms ease-out;
  pointer-events: none;
}

.ba-slider.is-dragging .ba-slider__handle {
  transition: none;
}

.ba-slider__handle::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: -1px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent), var(--accent), var(--accent), transparent);
}

.ba-slider__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fs-white);
  border: 1.5px solid var(--accent);
  box-shadow: 0 8px 20px rgba(var(--shadow-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.ba-slider__grip svg { width: 18px; height: 18px; }

.ba-slider__tag {
  position: absolute;
  top: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fs-white);
  background: rgba(var(--fs-green-rgb), 0.55);
  backdrop-filter: blur(3px);
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
}

.ba-slider__tag--before { left: 16px; }
.ba-slider__tag--after { right: 16px; }

.ba-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.svba__caption {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.svba__note {
  max-width: 680px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--ink-body);
}

.svba__grid[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svba__grid.is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 899px) {
  .svba__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .svba { padding-inline: 22px; padding-block: 64px; }
  .svba__grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* ============================================================
   DENTAL IMPLANTS PAGE — additional components
   ============================================================ */

/* ---- Anatomy: reuses .svrows for the photo+text row; this just adds a
   legend list (part name + description) inside .svrows__body. ---- */

.svanatomy__legend {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.svanatomy__legend li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.svanatomy__legend-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--line-rgb), 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  direction: ltr;
}

.svanatomy__legend-body p:first-child {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}

.svanatomy__legend-body p:last-child {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-body);
  margin: 0;
  max-width: 420px;
}

.svanatomy__diagram {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Risk infographic: full-width annotated diagram + consequence list ---- */

.svrisk {
  position: relative;
  background: linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 55%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.svrisk__head {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}

.svrisk__eyebrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}

.svrisk__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.svrisk__diagram-wrap {
  max-width: 900px;
  margin: 0 auto 48px;
  background: var(--fs-white);
  border: 1px solid rgba(var(--line-rgb), 0.22);
  border-radius: 22px;
  padding: clamp(20px, 4vw, 44px);
  box-shadow: 0 18px 40px rgba(var(--shadow-rgb), 0.08);
}

.svrisk__diagram {
  width: 100%;
  height: auto;
  display: block;
}

.svrisk__grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.svrisk__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.svrisk__item-mark {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 8px;
}

.svrisk__item p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-body);
  margin: 0;
}

.svrisk__item strong {
  font-weight: 600;
  color: var(--ink);
}

.svrisk__note {
  max-width: 680px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
}

.svrisk__diagram-wrap[data-reveal],
.svrisk__grid[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svrisk__diagram-wrap.is-revealed,
.svrisk__grid.is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 899px) {
  .svrisk__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .svrisk { padding-inline: 22px; padding-block: 64px; }
  .svrisk__grid { grid-template-columns: 1fr; }
}

/* ---- When: 3-option comparison cards (reuses .svmat card look) ---- */

.svwhen {
  position: relative;
  background: linear-gradient(180deg, var(--fs-white) 0%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.svwhen__container {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

.svwhen__eyebrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}

.svwhen__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.svwhen__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 44px 0 28px;
}

.svwhen__card {
  background: var(--fs-white);
  border: 1px solid rgba(var(--line-rgb), 0.22);
  border-radius: 20px;
  padding: 32px 26px;
  box-shadow: 0 14px 32px rgba(var(--shadow-rgb), 0.08);
  text-align: right;
}

.svwhen__card-num {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--line-rgb), 0.4);
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  direction: ltr;
  margin-bottom: 16px;
}

.svwhen__card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}

.svwhen__card p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-body);
  margin: 0;
}

.svwhen__note {
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink-body);
  margin: 0;
}

.svwhen__grid[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svwhen__grid.is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 899px) {
  .svwhen__grid { grid-template-columns: 1fr; }
  .svwhen__card { text-align: center; }
  .svwhen__card-num { margin-inline: auto; margin-bottom: 16px; }
}

@media (max-width: 640px) {
  .svwhen { padding-inline: 22px; padding-block: 64px; }
}

/* ---- Journey highlight variant: the laser step gets its own emphasized
   gold-bordered card instead of the plain border-bottom row. ---- */

.svjourney__item--highlight {
  background: linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 100%);
  border: 1px solid rgba(var(--line-rgb), 0.35);
  border-radius: 20px;
  padding: 32px;
  margin-block: 8px;
  box-shadow: 0 14px 32px rgba(var(--shadow-rgb), 0.08);
}

.svjourney__item--highlight:last-child {
  padding-bottom: 32px;
}

.svjourney__item--highlight .svjourney__num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fs-white);
}

.svjourney__highlight-chips {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.svjourney__highlight-chips li {
  padding: 6px 14px;
  border: 1px solid rgba(var(--line-rgb), 0.3);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 640px) {
  .svjourney__item--highlight { padding: 24px; }
}

/* ---- E-max veneers / Zirconia crowns page: small icon badge, used inside
   .svplan__card and .svchanges__card instead of a number/dot where the card
   needs a treatment icon (e.g. indication cards, material comparison cards) ---- */

.sv-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--line-rgb), 0.3);
  margin-bottom: 16px;
}

.sv-icon-badge img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ---- Spark aligners: "why patients choose it" — 4 rows separated by
   hairlines instead of cards, kept deliberately light (no icons, no
   background fills) per this page's minimal editorial brief. ---- */

.svchanges--points {
  padding-bottom: 0;
}

.svpoints {
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid rgba(var(--line-rgb), 0.28);
}

.svpoints__item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 28px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.28);
  align-items: baseline;
}

.svpoints__num {
  font-family: "Assistant", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  direction: ltr;
  text-align: right;
}

.svpoints__title {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.svpoints__item p {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0;
}

.svpoints[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svpoints.is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  .svpoints__item { grid-template-columns: 44px 1fr; gap: 18px; padding: 24px 0; }
  .svpoints__title { font-size: 17.5px; }
}

/* ---- Spark aligners: process strip — 5-column variant of the shared
   .svsteps horizontal/vertical numbered strip (base rule already
   collapses to 2 cols at 860px and 1 col at 767px; this only overrides
   the desktop column count). Adds an item title, which the base
   .svsteps (num + paragraph only) doesn't otherwise define. ---- */

.svstepsec {
  position: relative;
  background: linear-gradient(180deg, var(--fs-white) 0%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.svstepsec__head {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}

.svstepsec__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.svstepsec .svsteps {
  max-width: 1280px;
  margin: 0 auto;
}

.svsteps--5 { grid-template-columns: repeat(5, 1fr); }

.svsteps__item h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}

/* .svsteps--5 must re-collapse at the SAME breakpoints as the base
   .svsteps rules further up this file (860px -> 2 cols, 767px -> 1 col).
   Because these overrides come later in the cascade than those base
   media rules, without them the 5-column rule above would keep winning
   at every width and the strip would never go vertical on mobile. */
@media (max-width: 860px) {
  .svsteps--5 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .svsteps--5 { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
  .svsteps--5 { gap: 20px; }
}

@media (max-width: 640px) {
  .svstepsec { padding-inline: 22px; padding-block: 64px; }
}

/* ---- Spark aligners: Spark-vs-bridge comparison — reuses .svplan's
   two-card grid (same recipe as the E-max/Zirconia comparison on
   emax-crowns.html) but with bullet lists instead of paragraphs. ---- */

.svplan__card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.svplan__card li {
  position: relative;
  padding-inline-start: 22px;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

.svplan__card li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.svba__lead--spaced {
  margin-top: 48px;
}

/* ---- Spark aligners: plain bullet list inside a .svrows__body (same
   thin gold-dot mark as .svplan__card li above), used for the "who is
   this treatment for" row. ---- */

.svrows__body ul {
  list-style: none;
  margin: 4px 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svrows__body li {
  position: relative;
  padding-inline-start: 22px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink);
}

.svrows__body li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- Root canal page: some source photos are portrait (vertical) while
   .svrows__photo/.consult__photo are landscape-ish frames. object-fit:cover
   would crop the doctor's head or body out of frame on those, so this
   modifier switches to object-fit:contain (the whole photo shrinks to fit,
   nothing gets cut off) with a cream backdrop so any letterboxing blends
   into the surrounding section instead of showing as bare white bars. ---- */

.svrows__photo--contain,
.consult__photo--contain {
  background: var(--fs-ivory);
}

.svrows__photo--contain img,
.consult__photo--contain img {
  object-fit: contain;
}

/* "Root canal today" photo: pre-cropped tight portrait shot (doctor +
   assistant centred, overhead lamp mostly excluded) — needs a taller
   frame than the shared 4:3/16:10 .svrows__photo default so object-fit:
   cover fills it edge-to-edge instead of leaving letterboxing. Scoped to
   this instance only. */
.svrows__photo--today {
  aspect-ratio: 3 / 4;
}

/* ---- Oral & maxillofacial surgery page ---- */

/* Bold gold callout line used inside a .svrows__body or .svtext block to set
   a single statement apart from the surrounding paragraphs. Needs the extra
   specificity (element + two classes) to beat .svrows__body p / .svtext__lead,
   which otherwise win the cascade and leave it looking like a plain paragraph. */
p.sv-accent,
.svrows__body p.sv-accent,
.svtext__lead.sv-accent {
  font-weight: 600;
  color: var(--accent);
  opacity: 1;
}

/* Centered text-only section (title + lead paragraph(s), no photo, no
   card grid) for content that doesn't need a supporting image — same
   head/title/lead recipe as .svmyths__head so it still reads as part of
   the same family of sections. */
.svtext {
  position: relative;
  background: linear-gradient(180deg, var(--fs-white) 0%, var(--fs-ivory) 100%);
  padding-block: 96px;
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
  text-align: center;
}

.svtext__head {
  max-width: 720px;
  margin: 0 auto;
}

.svtext__title {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.svtext__lead {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 20px 0 0;
}

.svtext__head[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.svtext__head.is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  .svtext { padding-inline: 22px; padding-block: 64px; }
}

/* ============================================================
   OUR WORK — portfolio page (our-work.html)
   Standalone page with its own visual identity: a calm, photo-free
   hero and an editorial gallery grid. Deliberately does not reuse
   the svhpage/hero patterns used by service pages or the homepage.
   ============================================================ */

/* ---- Hero (calm, light, no photo) ---- */

/* Shared intro block for the interior content pages (works, testimonials):
   dark header bar over a light editorial title block. */
.pagehero {
  background: var(--fs-white);
}

.pagehero__bar {
  background: var(--color-deep-green-darkest);
  padding-bottom: 26px;
}

.pagehero__content {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 32px 92px;
  text-align: center;
}

.pagehero__eyebrow {
  font-family: var(--font-he);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
}

.pagehero__title {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: clamp(44px, 6vw, 68px);
  line-height: 1.15;
  color: var(--color-deep-green);
  margin: 0 0 20px;
}

.pagehero__lead {
  font-family: var(--font-he);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--color-primary);
  margin: 0 0 18px;
}

.pagehero__text {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-primary);
  opacity: 0.85;
  max-width: 460px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .pagehero__content { padding: 64px 24px 56px; }
}

/* ---- Gallery ---- */

.workshow-gallery {
  background: linear-gradient(180deg, var(--fs-white) 0%, var(--fs-ivory) 100%);
  padding-block: 130px;
  padding-inline: clamp(24px, 6vw, 100px);
}

.workshow-gallery__container {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 160px;
}

.workshow-item__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin: 0 0 36px;
}

.workshow-item--reverse .workshow-item__head {
  flex-direction: row-reverse;
}

.workshow-item__index {
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--accent);
  flex-shrink: 0;
}

.workshow-item__caption {
  font-family: var(--font-he);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.3;
  color: var(--color-deep-green);
  margin: 0;
}

.workshow-item__grid {
  display: flex;
  align-items: stretch;
  gap: 56px;
  /* Physical (non-logical) left/right composition — deliberately
     independent of the page's RTL text direction, so odd/even items
     alternate which side the portrait sits on, as specified. */
  direction: ltr;
}

.workshow-item--reverse .workshow-item__grid {
  direction: rtl;
}

.workshow-item__face {
  flex: 1.15 1 0;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--fs-ivory);
  box-shadow: 0 30px 60px -30px rgba(var(--shadow-rgb), 0.32);
}

.workshow-item__face img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: var(--fs-ivory);
}

.workshow-item__teeth {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.6fr 1fr;
  gap: 14px;
  direction: ltr; /* left tile stays physically left, right tile physically right */
}

.workshow-item__teeth-tile {
  border-radius: 14px;
  overflow: hidden;
  background: var(--fs-ivory);
}

.workshow-item__teeth-tile--center { grid-column: 1 / span 2; grid-row: 1; order: 2; }
.workshow-item__teeth-tile--left { grid-column: 1; grid-row: 2; order: 1; }
.workshow-item__teeth-tile--right { grid-column: 2; grid-row: 2; order: 3; }

.workshow-item__teeth-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: var(--fs-ivory);
}

@media (max-width: 1180px) {
  .workshow-gallery { padding-block: 100px; }
  .workshow-gallery__container { gap: 120px; }
  .workshow-item__grid { gap: 36px; }
}

@media (max-width: 860px) {
  .workshow-item__grid,
  .workshow-item--reverse .workshow-item__grid {
    flex-direction: column;
    direction: rtl;
  }
  /* In row layout, flex-basis:0 on the main (horizontal) axis is what
     lets these two columns share width proportionally. Once the axis
     flips to vertical here, that same basis:0 collides with
     aspect-ratio on the (now) main axis and collapses the box to zero
     height — so drop back to a plain auto-sized block. */
  .workshow-item__face,
  .workshow-item__teeth {
    flex: none;
  }
  .workshow-item__teeth {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 767px) {
  .workshow-gallery { padding-block: 72px; }
  .workshow-gallery__container { gap: 96px; }
  .workshow-item__head { margin-bottom: 22px; }
  .workshow-item__grid,
  .workshow-item--reverse .workshow-item__grid { gap: 20px; }
  .workshow-item__teeth { gap: 10px; aspect-ratio: 3 / 2; }
}

/* ---- Gallery v2: the container hugs the photo's real proportions —
   no cropping, no forced aspect-ratio, no equal-height boxes. Photos
   are shown at width:100%/height:auto, so every image keeps its own
   natural height. Opt-in via .workshow-item--natural, so it can be
   rolled out one item at a time without touching the older items
   still using the fixed-box system above. ---- */

.workshow-item--natural .workshow-item__face,
.workshow-item--natural .workshow-item__teeth-tile {
  background: none;
  box-shadow: none;
  border-radius: 10px;
  aspect-ratio: auto;
}

.workshow-item--natural .workshow-item__face img,
.workshow-item--natural .workshow-item__teeth-tile img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: none;
}

/* The photographs are lazy and carry no width/height, so until each one
   arrives its box is 0px tall and the page jumps as the visitor scrolls into
   it. `auto` means the ratio is only a placeholder — once the file loads its
   own proportions win, so nothing changes for a loaded image. */
.workshow-item--natural .workshow-item__face img { aspect-ratio: auto 3 / 2; }
.workshow-item--natural .workshow-item__teeth-tile img { aspect-ratio: auto 1 / 1; }

.workshow-item--natural .workshow-item__grid {
  align-items: flex-start;
  flex: initial;
}

.workshow-item--natural .workshow-item__face {
  flex: 1.15 1 0;
  min-width: 0;
}

.workshow-item--natural .workshow-item__teeth {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  direction: ltr;
}

.workshow-item--natural .workshow-item__teeth-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.workshow-item--natural .workshow-item__teeth-row .workshow-item__teeth-tile {
  flex: 1 1 0;
  min-width: 0;
}

/* Template: wide/landscape portrait — photo sits full width on top,
   the three teeth photos form one adaptive row underneath. */
.workshow-item--natural.workshow-item--top .workshow-item__grid {
  flex-direction: column;
  gap: 24px;
}

.workshow-item--natural.workshow-item--top .workshow-item__teeth {
  flex-direction: row;
  gap: 16px;
}

.workshow-item--natural.workshow-item--top .workshow-item__teeth-tile--center,
.workshow-item--natural.workshow-item--top .workshow-item__teeth-tile--left,
.workshow-item--natural.workshow-item--top .workshow-item__teeth-tile--right {
  flex: 1 1 0;
}

/* .workshow-item__face/__teeth carry flex-basis:0 for the side-by-side
   template, where the main flex axis is horizontal (width). Here the
   grid's axis is flipped to vertical (column), so that same basis:0
   would zero out their HEIGHT instead — reset to a plain full-width
   block for both direct children of the column. */
.workshow-item--natural.workshow-item--top .workshow-item__face,
.workshow-item--natural.workshow-item--top .workshow-item__teeth {
  flex: none;
  width: 100%;
}

@media (max-width: 860px) {
  .workshow-item--natural .workshow-item__grid {
    flex-direction: column;
  }
  .workshow-item--natural .workshow-item__face,
  .workshow-item--natural .workshow-item__teeth {
    flex: none;
    width: 100%;
  }
  /* The fixed-box system above gives the close-up block a 16:10 (and, on
     phones, 3:2) ratio. Natural items size to their photographs, so that
     ratio only forced the square close-ups into a shorter box — cropping
     their chins on phones and leaving a ~200px empty band under them at
     tablet widths. */
  .workshow-item--natural .workshow-item__teeth {
    aspect-ratio: auto;
  }
}

@media (max-width: 767px) {
  .workshow-item--natural.workshow-item--top .workshow-item__teeth {
    flex-direction: column;
  }

  .workshow-item--natural.workshow-item--top .workshow-item__teeth-tile--center,
  .workshow-item--natural.workshow-item--top .workshow-item__teeth-tile--left,
  .workshow-item--natural.workshow-item--top .workshow-item__teeth-tile--right {
    flex: none;
    width: 100%;
  }
}

/* ---- Closing statement + CTA (before the standard consult form) ---- */

/* Shared closing statement + CTA band for the interior content pages. */
.pageoutro {
  background: var(--color-deep-green-darkest);
  padding-block: 110px;
  padding-inline: clamp(24px, 6vw, 100px);
  text-align: center;
}

.pageoutro__container {
  max-width: 620px;
  margin: 0 auto;
}

.pageoutro__title {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 22px;
}

.pageoutro__text {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-body);
  margin: 0 0 56px;
}

.pageoutro__rule {
  width: 60px;
  height: 1px;
  background: rgba(var(--accent-rgb), 0.4);
  margin: 0 auto 40px;
}

.pageoutro__cta-title {
  font-family: var(--font-he);
  font-weight: 500;
  font-size: 22px;
  color: var(--accent);
  margin: 0 0 12px;
}

.pageoutro__cta-text {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: 16px;
  color: var(--ink-body);
  margin: 0 0 32px;
}

.pageoutro__disclaimer {
  font-family: var(--font-he);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-body);
  opacity: 0.65;
  max-width: 560px;
  margin: 40px auto 0;
}

@media (max-width: 767px) {
  .pageoutro { padding-block: 72px; }
  .pageoutro__text { margin-bottom: 40px; }
}
/* ============================================================================
   TORONTO SYSTEM PAGE (toronto-bridge.html)
   Web adaptation of brand book page 11 — "מערכת טורונטו".
   Editorial, RTL-first: every text block is right-anchored, the photography
   runs large down the left. Everything here is namespaced .tor* and is used
   by that page only.
   ============================================================================ */

.tor-band {
  background: var(--color-deep-green-darkest);
  padding-bottom: 26px;
}

/* ---- Breadcrumbs ---- */

.tor-crumbs {
  max-width: var(--container-max);
  margin: 26px auto 0;
  padding-inline: 64px;
}

.tor-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: "Assistant", sans-serif;
  font-size: 14px;
  color: var(--ink-body);
}

.tor-crumbs li + li::before {
  content: "\203A";
  margin-inline-end: 10px;
  color: rgba(var(--accent-rgb), 0.75);
}

.tor-crumbs a:hover { color: var(--accent); }
.tor-crumbs [aria-current="page"] { color: var(--accent); }

/* ============ The cream editorial spread ============ */

.tor {
  --tor-cream: var(--fs-ivory);
  --tor-cream-hi: var(--fs-white);
  --tor-cream-lo: var(--fs-ivory);
  --tor-ink: var(--fs-black);
  --tor-green: var(--fs-green);
  --tor-gold-text: var(--fs-green);   /* accent text, legible on cream (IS 5568) */
  --tor-gold-line: var(--fs-stone);   /* decorative rules, frames, icons */

  --tor-max: 1480px;
  --tor-pad: clamp(22px, 5vw, 76px);
  /* gutter from the page edge to the container — the value the copy is
     right-anchored against in every band */
  --tor-gutter: max(calc((100% - var(--tor-max)) / 2), var(--tor-pad));

  position: relative;
  overflow-x: clip;
  background: radial-gradient(105% 62% at 44% 26%, var(--tor-cream-hi) 0%, rgba(var(--accent-rgb), 0) 70%),
    linear-gradient(196deg, var(--tor-cream) 0%, var(--tor-cream-lo) 100%);
  padding-block: clamp(44px, 5.5vw, 92px) clamp(56px, 6vw, 104px);
  color: var(--tor-ink);
  font-family: "Assistant", sans-serif;
}

/* ---- Shared type ---- */

.tor-rule {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tor-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0) 0%, var(--tor-gold-line) 55%, rgba(var(--accent-rgb), 0) 100%);
}

.tor-rule i {
  flex: none;
  width: 13px;
  height: 13px;
  background: var(--tor-gold-line);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

/* ============ BAND 1 — headline + hero photograph ============ */

/* The hero shot is a wide lab photograph, so it earns its size in width:
   the headline takes a full-width row above it, then the shot runs from the
   opposite page edge with the opening statement beside it. */
.tor-hero {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "say  shot";
  align-items: center;
  column-gap: clamp(8px, 1vw, 20px);
  row-gap: clamp(20px, 2.6vw, 40px);
  /* padding only on the reading edge (right in RTL); the artwork carries its
     own transparent margin, so it needs no gutter on the opposite side */
  padding-inline-start: var(--tor-gutter);
}

.tor-hero__head {
  grid-area: head;
  max-width: 820px;
  margin-inline-end: auto;   /* flush to the reading edge */
}

.tor-hero__orn {
  margin-bottom: clamp(18px, 2.2vw, 34px);
  margin-inline-end: clamp(40px, 10%, 120px);
}

.tor-hero__title {
  margin: 0;
  font-family: var(--font-he);
  font-weight: 700;
  font-size: clamp(48px, 7.6vw, 112px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--tor-green);
}

.tor-hero__sub {
  margin: clamp(14px, 1.8vw, 26px) 0 0;
  font-family: var(--font-he);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 64px);
  line-height: 1.14;
  color: var(--tor-gold-text);
}

.tor-hero__statement {
  grid-area: say;
  margin: 0;
  font-size: clamp(20px, 1.75vw, 26px);
  font-weight: 400;
  line-height: 1.75;
  color: var(--tor-ink);
}

.tor-hero__shot { grid-area: shot; margin: 0; }

/* Both Toronto photographs are finished PNGs with their own transparent
   margin. They are only ever scaled, never cropped: intrinsic ratio via
   height:auto, and object-fit:contain as a guard should a height ever be
   imposed on them. */
.tor-hero__shot img,
.tor-lab__shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(var(--accent-rgb), 0.16));
}

/* ============ BAND 2 — what it is + why + the clinic card ============ */

.tor-essence {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  column-gap: clamp(32px, 5vw, 96px);
  padding-inline: var(--tor-gutter);
  margin-top: clamp(44px, 5vw, 84px);
}

.tor-essence__copy { max-width: 660px; margin-inline-end: auto; }

.tor-essence__rule { margin-bottom: clamp(24px, 3vw, 40px); }

.tor-body {
  margin: 0;
  font-size: clamp(19px, 1.65vw, 25px);
  font-weight: 400;
  line-height: 1.72;
}

.tor-body__mark {
  font-family: var(--font-he);
  font-weight: 700;
  color: var(--tor-gold-text);
}

.tor-why {
  margin: clamp(28px, 3.2vw, 48px) 0 clamp(16px, 1.8vw, 24px);
  font-family: var(--font-he);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.25;
  color: var(--tor-gold-text);
}

.tor-list { display: grid; gap: clamp(10px, 1.1vw, 16px); }

.tor-list li {
  position: relative;
  padding-inline-start: 30px;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--tor-ink);
}

.tor-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  width: 13px;
  height: 13px;
  background: var(--tor-gold-line);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

/* ---- The gold-framed clinic statement ---- */

.tor-card {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 480px;
  margin-inline-end: auto;   /* sits toward the middle of the spread */
  padding: clamp(38px, 3.4vw, 52px) clamp(24px, 2.6vw, 38px) clamp(28px, 2.6vw, 38px);
  text-align: center;
}

/* The frame is a pseudo-element so the diamond can sit in a real gap in the
   rule, as on p.11, rather than on an opaque patch over the gradient. */
.tor-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--tor-gold-line);
  border-radius: 20px;
  -webkit-mask-image: radial-gradient(circle 40px at 50% 0, transparent 97%, #000 100%);
  mask-image: radial-gradient(circle 40px at 50% 0, transparent 97%, #000 100%);
  pointer-events: none;
}

.tor-card__gem {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 56px;
  height: 46px;
  color: var(--tor-gold-line);
}

.tor-card__gem svg { width: 100%; height: 100%; }

.tor-card__title,
.tor-card__accent {
  margin: 0;
  font-family: var(--font-he);
  font-weight: 700;
  font-size: clamp(22px, 1.9vw, 29px);
  line-height: 1.25;
}

.tor-card__title  { color: var(--tor-green); }
.tor-card__accent { color: var(--tor-gold-text); margin: 8px 0 12px; }

.tor-card__text {
  margin: 0;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  color: var(--tor-ink);
}

/* ============ BAND 3 — the pull quote + the two lab models ============ */

.tor-lab {
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 1.56fr);
  align-items: center;
  column-gap: clamp(24px, 4vw, 72px);
  padding-inline: var(--tor-gutter);
  margin-top: clamp(48px, 5.5vw, 92px);
}

.tor-quote {
  margin: 0;
  padding: 0;
  max-width: 420px;
  margin-inline-end: auto;
}

.tor-quote__mark {
  display: block;
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: clamp(58px, 5vw, 78px);
  line-height: 0.55;
  color: var(--tor-gold-line);
}

.tor-quote p {
  margin: clamp(16px, 1.6vw, 24px) 0 0;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.6;
  color: var(--tor-ink);
}

.tor-quote .tor-rule { margin-top: clamp(18px, 2vw, 28px); max-width: 220px; }

/* One finished composition holding both models — shown whole, never cropped */
.tor-lab__shot {
  margin: 0;
  width: 100%;
}

/* ---- Closing marks ---- */

.tor-marks {
  direction: ltr;   /* decorative row — keeps p.11's tooth / shield / diamond order */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(34px, 4vw, 64px);
  margin-top: clamp(44px, 5vw, 76px);
  color: var(--tor-gold-line);
}

.tor-marks svg { width: clamp(32px, 3.2vw, 44px); height: auto; }

/* ---- Reveal-on-scroll, matching the site's [data-reveal] behaviour ---- */

.tor [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.tor [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tor [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- Tablet ---- */

/* ---- Tablet: the reading columns narrow before the photographs do ---- */

@media (max-width: 1180px) {
  .tor-hero { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); }
  .tor-essence { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .tor-lab { grid-template-columns: minmax(0, 0.4fr) minmax(0, 1.6fr); }
}

@media (max-width: 1000px) {
  /* below this the statement no longer has a usable column beside the photo,
     so the hero stacks: headline, photograph, then the opening lines */
  .tor-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "shot" "say";
    padding-inline: var(--tor-gutter);
  }

  .tor-hero__shot { margin-inline: calc(-1 * var(--tor-gutter)); }
  .tor-hero__statement { max-width: 620px; margin-inline-end: auto; }

  .tor-lab {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(24px, 4vw, 40px);
  }

  .tor-lab__shot { margin-inline: calc(-1 * var(--tor-gutter)); }
  .tor-quote { max-width: 620px; margin-inline-end: auto; }
}

@media (max-width: 960px) {
  .tor-crumbs { padding-inline: 40px; }
}

/* ---- Mobile: one vertical column, everything centred or right-aligned ---- */

@media (max-width: 899px) {
  .tor { padding-block: clamp(28px, 7vw, 44px) clamp(44px, 9vw, 64px); }

  .tor-essence,
  .tor-lab {
    display: block;
    padding-inline: var(--tor-pad);
    margin-top: 0;
  }

  /* headline, then the hero shot, then the opening lines */
  .tor-hero {
    display: flex;
    flex-direction: column;
    padding-inline: var(--tor-pad);
    margin-top: 0;
  }

  .tor-hero__head      { order: 1; max-width: none; }
  .tor-hero__shot      { order: 2; }
  .tor-hero__statement { order: 3; }

  .tor-essence__copy,
  .tor-quote { max-width: none; }

  .tor-hero__title { font-size: clamp(42px, 12.4vw, 68px); }
  .tor-hero__sub   { font-size: clamp(26px, 7.6vw, 42px); }
  .tor-hero__statement { font-size: clamp(19px, 4.7vw, 24px); }

  /* the shot keeps its own proportions and is allowed to run edge to edge */
  .tor-hero__shot {
    margin: clamp(22px, 5.5vw, 36px) calc(-1 * var(--tor-pad)) clamp(22px, 5.5vw, 36px);
  }

  /* 1.png carries ~13% transparent margin on each side. Letting the artwork
     run 10% past the viewport on each side brings the models up to a
     readable size on a phone while staying inside that margin, so nothing
     visible is lost — .tor clips the overflow, so there is no side-scroll.
     Measured at 390px: subject sits at x 14..347 of 390. */
  .tor-hero__shot img {
    width: 120%;
    max-width: none;      /* the global img { max-width:100% } would cap this */
    margin-inline: -10%;  /* symmetric, so RTL doesn't push it all to one side */
  }

  .tor-essence { margin-top: clamp(28px, 7vw, 44px); }
  .tor-essence__rule { margin-bottom: clamp(20px, 5vw, 30px); }

  .tor-card {
    max-width: 520px;
    margin: clamp(34px, 8vw, 52px) auto 0;
  }

  .tor-lab { margin-top: clamp(36px, 8vw, 56px); }

  .tor-quote { text-align: center; }
  .tor-quote .tor-rule { margin-inline: auto; }

  /* the composition runs edge to edge so both models stay as large as the
     screen allows — scaled, never cropped */
  .tor-lab__shot {
    margin: clamp(24px, 6vw, 38px) calc(-1 * var(--tor-pad)) 0;
    width: auto;
  }

  .tor-marks { margin-top: clamp(34px, 8vw, 50px); }
}

@media (max-width: 640px) {
  .tor-crumbs { padding-inline: 22px; font-size: 13px; }
  .tor-crumbs ol { gap: 8px; }
}

/* Toronto accent block: photo is a link to the Toronto page */
a.toronto__photo img { transition: transform 600ms ease-out; }
a.toronto__photo:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  a.toronto__photo img,
  a.toronto__photo:hover img { transition: none; transform: none; }
}

/* Inline links inside FAQ answers must be distinguishable (IS 5568 / WCAG 1.4.1) */
.svfaq__item p a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.svfaq__item p a:hover { color: var(--accent); }

/* ============ MOBILE NAVIGATION ============
   Below 960px .main-nav is hidden; before this the site had no replacement,
   so phones and tablets could only reach the homepage sections they happened
   to scroll past. Burger + inline-start drawer, RTL-aware. */

.nav-burger {
  display: none;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(var(--line-rgb), 0.42);
  border-radius: 12px;
  background: rgba(var(--fs-black-rgb), 0.35);
  color: var(--accent);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: border-color 200ms ease-out, background-color 200ms ease-out;
}

.nav-burger:hover { border-color: var(--accent); background: rgba(var(--fs-black-rgb), 0.55); }

.nav-burger__box {
  display: block;
  width: 20px;
  height: 14px;
  position: relative;
}

.nav-burger__box span {
  position: absolute;
  inset-inline: 0;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
}

.nav-burger__box span:nth-child(1) { top: 0; }
.nav-burger__box span:nth-child(2) { top: 6.2px; }
.nav-burger__box span:nth-child(3) { top: 12.4px; }

@media (max-width: 960px) {
  .nav-burger { display: inline-flex; }
}

/* On a phone the bar only fits logo + burger; the gold CTA still reaches the
   visitor from inside the drawer and from the hero. Tablets keep both. */
@media (max-width: 640px) {
  .nav-cta { display: none; }
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 120;
}

.mobile-nav[hidden] { display: none; }

.mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--fs-black-rgb), 0.62);
  opacity: 0;
  transition: opacity 260ms ease-out;
}

.mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; }

.mobile-nav__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: radial-gradient(120% 60% at 100% 0%, rgba(var(--fs-green-rgb), 0.55), transparent 62%),
    var(--color-deep-green-darkest);
  border-inline-end: 1px solid rgba(var(--line-rgb), 0.22);
  box-shadow: 0 0 60px rgba(var(--shadow-rgb), 0.5);
  transform: translateX(var(--mobile-nav-offset, 100%));
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
  font-family: "Assistant", sans-serif;
}

html[dir="rtl"] .mobile-nav__panel { --mobile-nav-offset: 100%; }
html[dir="ltr"] .mobile-nav__panel { --mobile-nav-offset: -100%; }

.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.1);
}

.mobile-nav__logo { height: 34px; width: auto; }

.mobile-nav__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(var(--line-rgb), 0.16);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.mobile-nav__close svg { width: 18px; height: 18px; }
.mobile-nav__close:hover { border-color: var(--accent); color: var(--accent); }

.mobile-nav__list { padding: 10px 0 4px; }

.mobile-nav__item + .mobile-nav__item { border-top: 1px solid rgba(var(--line-rgb), 0.07); }

.mobile-nav__item > a,
.mobile-nav__row > a {
  display: block;
  padding: 15px 2px;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}

.mobile-nav__item > a:hover,
.mobile-nav__row > a:hover { color: var(--accent); }

.mobile-nav__item > a.is-active,
.mobile-nav__row > a.is-active { color: var(--accent); }

.mobile-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-nav__toggle {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(var(--line-rgb), 0.16);
  border-radius: 10px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.mobile-nav__toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 240ms ease-out;
}

.mobile-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.mobile-nav__sub {
  padding: 2px 0 12px;
  margin-inline-start: 10px;
  border-inline-start: 1px solid rgba(var(--line-rgb), 0.28);
}

.mobile-nav__sub[hidden] { display: none; }

.mobile-nav__sub a {
  display: block;
  padding: 10px 14px;
  font-size: 15.5px;
  font-weight: 300;
  color: var(--ink-body);
}

.mobile-nav__sub a:hover { color: var(--accent); }

.mobile-nav__foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--line-rgb), 0.1);
}

.mobile-nav__cta { width: 100%; justify-content: center; }

.mobile-nav__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
  font-size: 15px;
  color: var(--ink-body);
}

.mobile-nav__contact a:hover { color: var(--accent); }

body.has-mobile-nav { overflow: hidden; }

/* ---- One scroll lock, shared by every overlay ----
   `overflow: hidden` on <body> holds a desktop wheel still but does not hold a
   touch browser still, and it loses the reading position the moment the page
   is allowed to move again. Taking the body out of flow at a negative offset
   does both: nothing scrolls behind the overlay on any device, and JS puts the
   visitor back on exactly the pixel they left. */
body.is-scroll-locked {
  position: fixed;
  top: var(--lock-y, 0px);
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav__panel,
  .mobile-nav__backdrop,
  .mobile-nav__toggle svg { transition: none; }
}

/* The header logo is a flex item; without this it gets squeezed narrower than
   its aspect ratio on small screens. */
.logo { flex: 0 0 auto; }
.logo img { flex: 0 0 auto; }

/* ============ TESTIMONIALS PAGE (testimonials.html) ============ */


.voices {
  --ts-dark: var(--fs-brown);

  position: relative;
  background: radial-gradient(120% 80% at 82% 0%, rgba(var(--fs-green-rgb), 0.45), transparent 60%),
    linear-gradient(180deg, var(--fs-black) 0%, var(--color-deep-green-darkest) 100%);
  padding-block: clamp(64px, 8vw, 104px);
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.voices__container {
  max-width: 1280px;
  margin: 0 auto;
}

.voices__head {
  max-width: 620px;
  margin: 0 auto clamp(40px, 5vw, 60px);
  text-align: center;
}

.voices__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 150px;
  margin: 0 auto 22px;
}

.voices__ornament span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

.voices__ornament span:last-child {
  background: linear-gradient(90deg, var(--accent), transparent);
}

.voices__ornament i {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--accent);
  transform: rotate(45deg);
  border-radius: 1px;
}

.voices__title {
  font-family: var(--font-he);
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 14px;
}

.voices__subtitle {
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
  margin: 0;
}

/* auto-fit + centred justification lets five cards settle as 3 + 2 without a
   hand-written offset for the second row */
.voices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  justify-content: center;
  gap: clamp(28px, 3vw, 44px);
}

.voices__card {
  display: flex;
  flex-direction: column;
}

.voices__card .video-frame {
  border-color: rgba(var(--line-rgb), 0.34);
  box-shadow: 0 26px 50px rgba(var(--shadow-rgb), 0.4);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), border-color 250ms ease-out;
}

.voices__card:hover .video-frame {
  transform: translateY(-4px);
  border-color: var(--accent);
}

.voices__quote {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 2px 0;
}

.voices__quote-mark {
  width: 20px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 5px;
  color: rgba(var(--accent-rgb), 0.6);
}

.voices__quote p {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink);
}

.voices__note {
  max-width: 720px;
  margin: clamp(44px, 5vw, 64px) auto 0;
  text-align: center;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
  opacity: 0.8;
}

@media (max-width: 700px) {
}

@media (prefers-reduced-motion: reduce) {
  .voices__card .video-frame,
  .voices__card:hover .video-frame { transition: none; transform: none; }
}

/* The accessibility launcher sits above everything at z-index 150; while the
   mobile drawer (a modal dialog) is open it would float over the panel. */
body.has-mobile-nav .a11y-fab { display: none; }

/* ============================================================
   TEAM PAGE (team.html) — an editorial section per clinician.
   Palette rhythm: cream / warm-cream alternating for the member
   bands, deep green for the two philosophy bands between them.
   ============================================================ */

.pagehero--team {
  background: var(--fs-white);
}

/* ---- Group portrait ---- */

/* One wide studio frame of the whole clinic, used twice on this page: closing
   the hero and closing the roster section. The source is a single 1958x803
   file in which the outer two people stand almost at the edges, so the frame
   is deliberately ratio-driven rather than height-driven — object-fit:cover
   would have to eat into those two on any viewport narrower than 2.44:1, and
   on a phone it would crop them out entirely. Letting the image keep its own
   aspect means no crop and no distortion at any breakpoint, on either use. */

.tgroup {
  margin: 0 auto;
  max-width: var(--container-max);
  padding: 0 clamp(16px, 4vw, 56px);
}

.tgroup__frame {
  position: relative;
  border-radius: clamp(16px, 2vw, 26px);
  overflow: hidden;
  /* matches the studio backdrop, so the frame reads as one field while the
     image decodes and on any sub-pixel rounding at the edges */
  background: var(--fs-green);
  box-shadow: 0 34px 70px -38px rgba(var(--shadow-rgb), 0.6);
}

/* The index band is the one group photograph on a cream ground rather than the
   studio green, so its placeholder matches it — otherwise the frame flashes
   deep green behind a cream picture while it decodes. */
.tgroup--index .tgroup__frame { background: var(--fs-ivory); }

.tgroup__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(var(--line-rgb), 0.34);
  pointer-events: none;
}

.tgroup__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* The hero copy sits on cream and the philosophy band below is deep green;
   the portrait's own backdrop is green too, so letting it cross the seam
   makes the two bands read as one spread instead of two stacked blocks. */
.tgroup--hero {
  position: relative;
  z-index: 2;
  margin-top: clamp(36px, 5vw, 64px);
  margin-bottom: calc(-1 * clamp(24px, 4vw, 68px));
}

.tgroup--index {
  margin-top: clamp(28px, 3.5vw, 48px);
  padding: 0;
}

.tgroup__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  margin-top: clamp(18px, 2vw, 26px);
  font-family: "Assistant", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-body);
}

.tgroup__caption a {
  padding: 0 14px;
  color: var(--color-deep-green);
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}

.tgroup__caption a + a {
  border-inline-start: 1px solid rgba(var(--line-rgb), 0.22);
}

.tgroup__caption a:hover,
.tgroup__caption a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---- Philosophy band ---- */

.tcreed {
  background: var(--fs-green);
  color: var(--ink);
  padding: clamp(72px, 9vw, 128px) 0;
}

.tcreed__container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

.tcreed__head {
  text-align: center;
  margin-bottom: 48px;
}

.tcreed__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}

.tcreed__ornament span {
  width: 52px;
  height: 1px;
  background: rgba(var(--accent-rgb), 0.55);
}

.tcreed__ornament i {
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--accent);
}

.tcreed__title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.2;
  color: var(--ink);
}

.tcreed__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.tcreed__lead {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--accent);
}

.tcreed__body p {
  margin: 0 0 18px;
  font-family: "Assistant", sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-body);
}

.tcreed__body p:last-child { margin-bottom: 0; }

/* ---- One clinician ---- */

.tmember {
  padding: clamp(64px, 8vw, 116px) 0;
  background: var(--fs-white);
}

/* tied to the layout side rather than nth-of-type: the member sections are
   siblings of every other section on the page, so a positional selector would
   flip the whole rhythm the moment a band is added above them. */
.tmember.is-image-end { background: var(--fs-ivory); }

.tmember__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 56px);
  display: grid;
  /* portrait column first, copy column second */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* Alternating sides are done with `order`, so on the reversed bands the media
   lands in track 2. The two tracks are therefore mirrored as well — otherwise
   every second portrait would be rendered in the wider copy track and the set
   would read as random sizes rather than one consistent portrait format. */
.tmember.is-image-end .tmember__container { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); }
.tmember.is-image-end .tmember__media { order: 2; }
.tmember.is-image-end .tmember__body { order: 1; }

.tmember__media {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}

.tmember__frame {
  position: relative;
  width: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: var(--fs-ivory);
  box-shadow: 0 26px 60px -34px rgba(var(--shadow-rgb), 0.55);
}

.tmember__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  border: 1px solid rgba(var(--line-rgb), 0.28);
  pointer-events: none;
}

.tmember__frame {
  aspect-ratio: 4 / 5;
}

/* The `-team` cuts are written at this exact ratio (see
   tools_prep_team_portraits.py), so cover has nothing to discard and the
   framing in the file is the framing on screen — on every breakpoint. The
   1.02/1.05 hover zoom eats into the 10% headroom the cuts carry, never into
   the hair. */
.tmember__frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.02);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tmember:hover .tmember__frame img { transform: scale(1.05); }

.tmember__badge {
  position: absolute;
  inset-inline-start: -10px;
  top: 26px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-deep-green);
  color: var(--accent);
  font-family: "Assistant", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  box-shadow: 0 10px 26px -14px rgba(var(--shadow-rgb), 0.8);
}

.tmember__eyebrow {
  margin: 0 0 12px;
  font-family: "Assistant", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--accent);
}

.tmember__name {
  margin: 0 0 8px;
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.15;
  color: var(--color-deep-green);
}

.tmember__role {
  margin: 0 0 6px;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 500;
  color: var(--color-primary);
}

.tmember__years {
  display: inline-block;
  font-family: "Assistant", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}

.tmember__rule {
  width: 64px;
  height: 2px;
  margin: 24px 0 24px;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0));
}

.tmember__para {
  margin: 0 0 16px;
  font-family: "Assistant", sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-body);
  max-width: 62ch;
}

.tmember__para:last-child { margin-bottom: 0; }

.tmember__panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 32px 0 28px;
}

.tmember__panel {
  padding: 22px 24px;
  border-radius: 18px;
  background: rgba(var(--fs-white-rgb), 0.72);
  border: 1px solid rgba(var(--line-rgb), 0.13);
}

.tmember.is-image-end .tmember__panel { background: rgba(var(--fs-white-rgb), 0.8); }

.tmember__panel--when { border-color: rgba(var(--line-rgb), 0.34); }

.tmember__panel:only-child { max-width: 560px; }

.tmember__panel-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-deep-green);
}

.tmember__areas,
.tmember__when {
  display: grid;
  gap: 9px;
}

.tmember__areas li,
.tmember__when li {
  position: relative;
  padding-inline-start: 20px;
  font-family: "Assistant", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

.tmember__areas li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--fs-green-rgb), 0.45);
}

.tmember__when li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--accent);
}

.tmember__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tmember__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid rgba(var(--line-rgb), 0.26);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-deep-green);
  transition: border-color 220ms ease, color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.tmember__link svg {
  width: 16px;
  height: 16px;
  transition: transform 220ms ease;
}

.tmember__link:hover,
.tmember__link:focus-visible {
  border-color: var(--accent);
  background: var(--fs-white);
  transform: translateY(-2px);
}

.tmember__link:hover svg { transform: translateX(3px); }

/* ---- Reveal ---- */

.tmember__media[data-reveal],
.tmember__body[data-reveal],
.tcreed__head[data-reveal],
.tcreed__lead[data-reveal],
.tcreed__body[data-reveal],
.tbeyond__head[data-reveal],
.tbeyond__card[data-reveal],
.tindex__head[data-reveal],
.tgroup[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tmember__body[data-reveal] { transition-delay: 110ms; }
.tgroup--index[data-reveal] { transition-delay: 110ms; }
.tbeyond__card[data-reveal]:nth-child(2) { transition-delay: 110ms; }
.tbeyond__card[data-reveal]:nth-child(3) { transition-delay: 220ms; }

.tmember__media.is-revealed,
.tmember__body.is-revealed,
.tcreed__head.is-revealed,
.tcreed__lead.is-revealed,
.tcreed__body.is-revealed,
.tbeyond__head.is-revealed,
.tbeyond__card.is-revealed,
.tindex__head.is-revealed,
.tgroup.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- Support roles ---- */

.tbeyond {
  background: var(--fs-green);
  color: var(--ink);
  padding: clamp(72px, 9vw, 120px) 0;
}

.tbeyond__container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.tbeyond__head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 52px;
}

.tbeyond__eyebrow {
  margin: 0 0 14px;
  font-family: "Assistant", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--accent);
}

.tbeyond__title {
  margin: 0 0 14px;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--ink);
}

.tbeyond__sub {
  margin: 0;
  font-family: "Assistant", sans-serif;
  font-size: 17px;
  font-weight: 300;
  color: var(--ink-body);
}

.tbeyond__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.tbeyond__card {
  position: relative;
  padding: 34px 28px 30px;
  border-radius: 20px;
  background: rgba(var(--fs-white-rgb), 0.045);
  border: 1px solid rgba(var(--line-rgb), 0.2);
  transition: transform 320ms ease, border-color 320ms ease, background-color 320ms ease;
}

.tbeyond__card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--line-rgb), 0.5);
  background: rgba(var(--fs-white-rgb), 0.07);
}

.tbeyond__num {
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.tbeyond__card h3 {
  margin: 14px 0 12px;
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
}

.tbeyond__card p {
  margin: 0;
  font-family: "Assistant", sans-serif;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-body);
}

.tbeyond__note {
  margin: 46px 0 0;
  text-align: center;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 300;
  color: var(--accent);
}

/* ---- Compact roster ---- */

.tindex {
  background: var(--fs-white);
  padding: clamp(64px, 8vw, 104px) 0;
}

.tindex__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 56px);
}

.tindex__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.tindex__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.tindex__ornament span {
  width: 46px;
  height: 1px;
  background: rgba(var(--accent-rgb), 0.55);
}

.tindex__ornament i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.tindex__title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 38px);
  color: var(--color-deep-green);
}

.tindex__sub {
  margin: 14px 0 0;
  font-family: "Assistant", sans-serif;
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

/* ---- Team page responsive ---- */

@media (max-width: 1100px) {
  .tcreed__grid { grid-template-columns: 1fr; gap: 24px; }
  .tmember__container,
  .tmember.is-image-end .tmember__container { grid-template-columns: 1fr; gap: 32px; }
  .tmember.is-image-end .tmember__media,
  .tmember.is-image-end .tmember__body { order: initial; }
  /* width:100% matters as much as the max-width here. The auto start-margin
     below right-aligns the reversed bands, but an auto margin also takes a grid
     item off `stretch` — without an explicit width the three reversed portraits
     fall back to shrink-to-fit and render up to 26% narrower than the other
     four, so one portrait format reads as two. */
  .tmember__media { width: 100%; max-width: 560px; }
  .tmember.is-image-end .tmember__media { margin-inline-start: auto; }
}

@media (max-width: 720px) {
  .tmember { padding: 52px 0; }
  .tmember__media { max-width: none; }
  /* Nothing left to right-align once the frame is the full column. */
  .tmember.is-image-end .tmember__media { margin-inline-start: 0; }
  .tmember__panels { grid-template-columns: 1fr; gap: 14px; margin: 26px 0 22px; }
  .tmember__badge { top: 16px; inset-inline-start: -6px; font-size: 11px; padding: 7px 13px; }
  .tbeyond__card { padding: 26px 22px; }
  /* A twelve-person group shot cannot be both large and uncropped on a phone.
     Cropping would drop the people standing at the two ends, so the frame goes
     edge to edge instead and buys back the gutters — the photo stays whole. */
  .tgroup { padding: 0; }
  .tgroup__frame { border-radius: 0; }
  .tgroup__frame::after { border-inline: 0; }
  .tgroup--index { margin-inline: calc(-1 * clamp(24px, 4vw, 56px)); }
  .tgroup__caption { font-size: 13px; padding: 0 18px; }
  .tgroup__caption a { padding: 0 10px; }
}


/* ============================================================
   ABOUT PAGE (about.html) — the clinic's own story, told as an
   editorial spread. Deliberately shares no block with the
   homepage: the homepage introduces, this page explains.
   Rhythm: dark photographic hero → cream → warm cream → deep
   green → cream → deep green → cream gallery → green → cream.
   ============================================================ */

/* ---- Shared small type used across the about sections ---- */

.ab-eyebrow {
  font-family: var(--font-he);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}

.ab-eyebrow--dark { color: var(--accent); }

.ab-rule {
  width: 62px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0));
  margin: 0 0 30px;
}

.ab-rule--dark {
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0));
}

.ab-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid rgba(var(--line-rgb), 0.4);
  padding-bottom: 4px;
  transition: color 220ms ease, border-color 220ms ease, gap 220ms ease;
}

.ab-link svg { width: 18px; height: 18px; }

.ab-link:hover,
.ab-link:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  gap: 14px;
}

/* ---- Gold line icons: one system, one stroke width, drawn on reveal ---- */

.abicon__mark {
  display: block;
  width: 54px;
  height: 54px;
  color: var(--accent);
}

.abicon__mark svg { width: 100%; height: 100%; }

.abicon__mark--sm { width: 40px; height: 40px; }

[data-reveal] .abicon__mark svg [pathLength],
[data-reveal] .abicon__mark svg path,
[data-reveal] .abicon__mark svg circle,
[data-reveal] .abicon__mark svg rect {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1200ms cubic-bezier(0.33, 1, 0.68, 1) 180ms;
}

[data-reveal].is-revealed .abicon__mark svg path,
[data-reveal].is-revealed .abicon__mark svg circle,
[data-reveal].is-revealed .abicon__mark svg rect {
  stroke-dashoffset: 0;
}

/* ============ HERO — the owners ============ */

.abhero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-deep-green-darkest);
  overflow: hidden;
  isolation: isolate;
}

/* The documentary frame already puts the clinician and the patient in its
   left half and the scanner and cabinetry in its right, so the photograph is
   no longer over-sized and pushed sideways to make room — it is used whole,
   and the RTL column lands on the equipment rather than on a face. */
.abhero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 0;
}

.abhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 40%;
  animation: abhero-in 1800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes abhero-in {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

/* The scrim darkens the right (reading) side and the bottom so the Hebrew
   column stays legible. With the treatment-room frame the heavy end of the
   gradient falls on white cabinetry and the scanner, not on anybody's face,
   so it can stay as strong as the type needs. */
.abhero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(var(--fs-black-rgb), 0.9) 0%, rgba(var(--fs-black-rgb), 0.66) 30%, rgba(var(--fs-black-rgb), 0.1) 58%, rgba(var(--fs-black-rgb), 0.04) 100%),
    linear-gradient(to top, rgba(var(--fs-black-rgb), 0.68) 0%, rgba(var(--fs-black-rgb), 0) 40%),
    linear-gradient(to bottom, rgba(var(--fs-black-rgb), 0.78) 0%, rgba(var(--fs-black-rgb), 0.42) 11%, rgba(var(--fs-black-rgb), 0) 26%);
}


/* The copy is pinned to the foot of the hero rather than its centre, where it
   would cross the clinician. Only the title, the rule and the photo caption
   ride on the photograph; the opening paragraphs live in .abintro below it. */
.abhero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: flex-end;
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px) clamp(104px, 13vw, 168px);
}

.abhero__text { max-width: 560px; }

.abhero__eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin: 0 0 22px;
}

.abhero__title {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 26px;
}

.abhero__title em {
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
}

/* Set one word to a line. Read as a single line the title is 450px wide, and in
   RTL that runs its far end straight into the second founder's face at every
   width between a laptop and a large desktop; stacked, no line reaches past his
   shoulder. Words are broken with block spans rather than <br> so that dropping
   the stack on a phone — where the column is narrow and the faces are well
   above the copy — restores the spaces between them. */
.abhero__title span,
.abhero__title em { display: block; }

.abhero__rule {
  width: 74px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0));
  margin-bottom: 28px;
}



.abhero__caption {
  margin: 4px 0 0;
  font-family: var(--font-he);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.8);
}

/* ============ HERO INTRO ============
   The two opening paragraphs, lifted off the hero photograph. They keep
   the hero's dark ground so hero and intro still read as one opening spread,
   and the gold rule carries the eye down from the title above. */

.abintro {
  background: var(--color-deep-green-darkest);
  padding: clamp(34px, 4.5vw, 62px) 0 clamp(64px, 8vw, 112px);
}

.abintro__container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 56px);
}

.abintro__lead {
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink);
  margin: 0 0 20px;
}

.abintro__body {
  font-family: "Assistant", sans-serif;
  font-size: clamp(15.5px, 1.2vw, 17px);
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-body);
  max-width: 760px;
  margin: 0;
}

/* ============ PHILOSOPHY ============ */

.abphil {
  background: var(--fs-white);
  padding: clamp(76px, 9vw, 138px) 0;
}

.abphil__container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
}

.abphil__title {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.25;
  color: var(--color-deep-green);
  margin: 0 0 24px;
}

.abphil__text p {
  font-family: "Assistant", sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-body);
  margin: 0 0 16px;
}

.abphil__text p:first-of-type {
  font-weight: 400;
  color: var(--color-primary);
}

.abphil__text p:last-child { margin-bottom: 0; }

.abphil__media {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(var(--shadow-rgb), 0.16);
}

.abphil__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.abphil__media:hover img { transform: scale(1.03); }

/* ============ INTERNATIONAL APPROACH ============ */

.abappr {
  position: relative;
  background: var(--fs-ivory);
  padding: clamp(0px, 4vw, 64px) 0 clamp(76px, 9vw, 130px);
}

.abappr__media {
  margin: 0;
  overflow: hidden;
}

.abappr__media img {
  width: 100%;
  /* a little taller than the frame so the parallax has somewhere to travel */
  height: calc(clamp(320px, 44vw, 600px) + 20px);
  margin-top: -10px;
  object-fit: cover;
  object-position: 50% 34%;
  will-change: transform;
}

.abappr__panel {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: clamp(-90px, -7vw, -40px) auto 0;
  margin-inline-end: clamp(24px, 9vw, 140px);
  margin-inline-start: clamp(24px, 5vw, 56px);
  background: var(--color-deep-green);
  color: var(--ink);
  border-radius: 24px;
  padding: clamp(34px, 4vw, 58px);
  box-shadow: 0 34px 80px rgba(var(--shadow-rgb), 0.32);
}

.abappr__title {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 22px;
}

.abappr__panel p {
  font-family: "Assistant", sans-serif;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-body);
  margin: 0 0 16px;
}

.abappr__panel p:last-child { margin-bottom: 0; }

/* ============ TEAM AROUND ONE PLAN ============ */

.abteam {
  background: var(--fs-green);
  color: var(--ink);
  padding: clamp(76px, 9vw, 138px) 0;
}

.abteam__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}

.abteam__head { max-width: 760px; }

.abteam__title {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 24px;
}

.abteam__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(12px, 2vw, 26px);
}

.abteam__body p {
  font-family: "Assistant", sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-body);
  margin: 0 0 16px;
}

.abteam__media {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.22);
}

.abteam__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
}

.abteam__icons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(46px, 6vw, 84px);
  padding-top: clamp(34px, 4vw, 54px);
  border-top: 1px solid rgba(var(--line-rgb), 0.2);
}

.abicon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.abicon__label {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* ============ TECHNOLOGY ============ */

.abtech {
  background: linear-gradient(180deg, var(--fs-white) 0%, var(--fs-ivory) 100%);
  padding: clamp(76px, 9vw, 138px) 0;
}

.abtech__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}

.abtech__head { max-width: 820px; }

.abtech__title {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: clamp(27px, 3.2vw, 43px);
  line-height: 1.28;
  color: var(--color-deep-green);
  margin: 0 0 24px;
}

.abtech__lead {
  font-family: "Assistant", sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-body);
  margin: 0;
  max-width: 640px;
}

.abtech__spread {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
  margin-top: clamp(46px, 6vw, 80px);
}

.abtech__hero {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(var(--shadow-rgb), 0.18);
  position: sticky;
  top: 40px;
}

.abtech__hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.abtech__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.abtech__item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.16);
}

.abtech__item:first-child { padding-top: 0; }
.abtech__item:last-child { border-bottom: 0; padding-bottom: 0; }

.abtech__num {
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 4px;
}

.abtech__item h3 {
  font-family: var(--font-he);
  font-size: 19px;
  font-weight: 500;
  color: var(--color-deep-green);
  margin: 0 0 8px;
}

.abtech__item p {
  font-family: "Assistant", sans-serif;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-body);
  margin: 0;
}

.abtech__strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(46px, 6vw, 80px);
}

.abtech__cell {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--fs-white);
  box-shadow: 0 14px 34px rgba(var(--shadow-rgb), 0.1);
}

.abtech__cell img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.abtech__cell:hover img { transform: scale(1.04); }

.abtech__cell figcaption {
  padding: 14px 18px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
}

/* ============ THE LABORATORY ============ */

.ablab {
  background: var(--color-deep-green);
  color: var(--ink);
  padding: clamp(76px, 9vw, 138px) 0;
}

.ablab__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}

.ablab__head { max-width: 700px; }

.ablab__title {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 24px;
}

/* Two deliberate bands. The opening band pairs the wide bench frame with the
   text; the band under it is a fixed-height pair — 62 / 38 — so both frames
   share a top line, a bottom line, a radius and a gap. Nothing is left to the
   images' own proportions. */
.ablab__lead {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 52px);
  align-items: center;
  margin-top: clamp(38px, 5vw, 62px);
}

.ablab__band {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(18px, 2.2vw, 30px);
}

.ablab__main,
.ablab__cell {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.2);
}

.ablab__main img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.ablab__cell {
  height: clamp(230px, 27vw, 420px);
}

.ablab__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ablab__body p {
  font-family: "Assistant", sans-serif;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-body);
  margin: 0 0 16px;
}

.ablab__body p:first-child {
  font-weight: 400;
  color: var(--ink);
}

.ablab__body p:last-child { margin-bottom: 0; }

.ablab__note {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  font-family: "Assistant", sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(var(--fs-sage-rgb), 0.62);
}

/* ============ GALLERY — real people ============ */

.abgal {
  background: var(--fs-white);
  padding: clamp(76px, 9vw, 130px) 0 clamp(56px, 7vw, 92px);
}

.abgal__head {
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: 0 24px;
  text-align: center;
}

.abgal__head .ab-rule { margin-inline: auto; }

.abgal__title {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: clamp(29px, 3.6vw, 48px);
  line-height: 1.22;
  color: var(--color-deep-green);
  margin: 0 0 18px;
}

.abgal__lead {
  font-family: "Assistant", sans-serif;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-body);
  margin: 0;
}

.abgal__stage {
  position: relative;
  padding-inline: clamp(16px, 4vw, 72px);
}

/* The track is the scroll container itself, so touch gets native momentum and
   scroll-snap always parks a photograph square in the frame. */
.abgal__track {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  margin: 0;
  padding: 4px 0 26px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
}

.abgal__track::-webkit-scrollbar { display: none; }

.abgal__track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 20px;
}

.abgal__slide {
  flex: 0 0 auto;
  width: clamp(200px, 21vw, 292px);
  scroll-snap-align: center;
}

.abgal__open {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--fs-ivory);
  cursor: zoom-in;
  box-shadow: 0 18px 40px rgba(var(--shadow-rgb), 0.12);
  transition: box-shadow 420ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.abgal__open:hover,
.abgal__open:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 24px 52px rgba(var(--shadow-rgb), 0.2);
}

.abgal__open img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.abgal__open:hover img { transform: scale(1.035); }

.abgal__zoom {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-deep-green);
  background: rgba(var(--fs-white-rgb), 0.9);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.abgal__zoom svg { width: 18px; height: 18px; }

.abgal__open:hover .abgal__zoom,
.abgal__open:focus-visible .abgal__zoom {
  opacity: 1;
  transform: none;
}

.abgal__nav {
  position: absolute;
  top: calc(50% - 13px);
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(var(--line-rgb), 0.24);
  background: rgba(var(--fs-white-rgb), 0.96);
  color: var(--color-deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(var(--shadow-rgb), 0.14);
  transition: background-color 220ms ease, border-color 220ms ease,
              transform 220ms ease, opacity 220ms ease;
}

.abgal__nav svg { width: 20px; height: 20px; }

/* 42px on phones; an invisible ring takes the hit area to 46 without changing
   the button that is drawn. */
.abgal__nav::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
}

.abgal__nav:hover {
  border-color: var(--accent);
  background: var(--fs-white);
  transform: translateY(-50%) scale(1.06);
}

.abgal__nav--prev { inset-inline-start: clamp(2px, 1.2vw, 22px); }
.abgal__nav--next { inset-inline-end: clamp(2px, 1.2vw, 22px); }

.abgal__stage.is-at-start .abgal__nav--prev,
.abgal__stage.is-at-end .abgal__nav--next {
  opacity: 0.3;
  pointer-events: none;
}

.abgal__progress {
  width: min(300px, 46vw);
  height: 2px;
  margin: 6px auto 0;
  background: rgba(var(--fs-green-rgb), 0.16);
  border-radius: 2px;
  overflow: hidden;
}

.abgal__progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: right center;
  transform: scaleX(0.08);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.abgal__note {
  margin: clamp(24px, 3.4vw, 40px) auto 0;
  text-align: center;
  font-family: "Assistant", sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--ink-body);
}

/* ---- Lightbox ---- */

.ablight {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 320ms ease;
}

.ablight[hidden] { display: none; }
.ablight.is-open { opacity: 1; }

.ablight__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--fs-black-rgb), 0.94);
  cursor: zoom-out;
}

.ablight__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(88vw, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform: scale(0.97);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ablight.is-open .ablight__figure { transform: none; }

.ablight__img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 40px 90px rgba(var(--shadow-rgb), 0.55);
}

.ablight__caption {
  font-family: "Assistant", sans-serif;
  font-size: 14.5px;
  font-weight: 300;
  color: var(--ink-body);
  text-align: center;
  max-width: 46ch;
}

.ablight__close,
.ablight__nav {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(var(--line-rgb), 0.4);
  background: rgba(var(--fs-black-rgb), 0.7);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.ablight__close svg,
.ablight__nav svg { width: 20px; height: 20px; }

.ablight__close:hover,
.ablight__nav:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: var(--accent);
  transform: scale(1.06);
}

.ablight__close {
  top: clamp(16px, 3vw, 32px);
  inset-inline-end: clamp(16px, 3vw, 32px);
}

.ablight__nav { top: 50%; margin-top: -24px; }
.ablight__nav--prev { inset-inline-start: clamp(10px, 3vw, 40px); }
.ablight__nav--next { inset-inline-end: clamp(10px, 3vw, 40px); }

.ablight__count {
  position: absolute;
  z-index: 2;
  bottom: clamp(16px, 3vw, 30px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(var(--accent-rgb), 0.8);
  /* "5 / 12" is a latin fragment inside an RTL page — keep it in reading order */
  direction: ltr;
  unicode-bidi: isolate;
}

/* ============ WHY FLY & SMILE ============ */

.abwhy {
  background: var(--fs-green);
  color: var(--ink);
  padding: clamp(76px, 9vw, 138px) 0;
}

.abwhy__container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 56px);
}

.abwhy__head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto clamp(44px, 5.5vw, 72px);
}

.abwhy__head .ab-rule { margin-inline: auto; margin-bottom: 0; }

.abwhy__title {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 24px;
}

.abwhy__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}

.abwhy__item {
  border: 1px solid rgba(var(--line-rgb), 0.2);
  border-radius: 20px;
  padding: clamp(26px, 2.6vw, 38px);
  background: rgba(var(--fs-white-rgb), 0.02);
  transition: border-color 320ms ease, background-color 320ms ease, transform 320ms ease;
}

.abwhy__item:hover {
  border-color: rgba(var(--line-rgb), 0.48);
  background: rgba(var(--fs-white-rgb), 0.045);
  transform: translateY(-3px);
}

.abwhy__item h3 {
  font-family: var(--font-he);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin: 22px 0 12px;
}

.abwhy__item p {
  font-family: "Assistant", sans-serif;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-body);
  margin: 0;
}

/* ============ LOCATION & ACCESSIBILITY ============ */

.abloc {
  background: var(--fs-white);
  padding: clamp(76px, 9vw, 138px) 0;
}

.abloc__container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}

.abloc__title {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.22;
  color: var(--color-deep-green);
  margin: 0 0 24px;
}

.abloc__text > p {
  font-family: "Assistant", sans-serif;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-body);
  margin: 0 0 14px;
}

.abloc__closing {
  font-weight: 400 !important;
  color: var(--color-primary) !important;
  border-inline-start: 2px solid rgba(var(--line-rgb), 0.55);
  padding-inline-start: 16px;
  margin-top: 22px !important;
}

.abloc__ways {
  display: grid;
  gap: 4px;
  margin: clamp(30px, 3.5vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}

.abloc__way {
  display: grid;
  grid-template-columns: 34px 40px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(var(--line-rgb), 0.16);
}

.abloc__way:last-child { border-bottom: 1px solid rgba(var(--line-rgb), 0.16); }

.abloc__num {
  font-family: var(--font-latin);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.abloc__way .abicon__mark { color: var(--accent); }

.abloc__way h3 {
  font-family: var(--font-he);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-deep-green);
  margin: 0 0 4px;
}

.abloc__way p {
  font-family: "Assistant", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0;
}

.abloc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: clamp(28px, 3.5vw, 40px);
}

.abloc__actions .icon { width: 22px; height: 22px; }

.abloc__address {
  font-family: "Assistant", sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-body);
  margin: 0;
}

.abloc__media {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(var(--shadow-rgb), 0.16);
}

.abloc__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ---- The map of Israel ----
   Drawn rather than photographed, and drawn rather than generated: the outline
   is real geometry, the nine dots sit on their own coordinates, and the names
   are live text in the page's typeface. The frame keeps the 4:5 the photograph
   held, so the block's proportions do not move — which also means the labels
   can be positioned in per-cent of the frame and land exactly on their dots at
   every width. */

.abmap {
  overflow: visible;
  box-shadow: none;
}

.abmap__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background: radial-gradient(120% 80% at 62% 22%, rgba(var(--fs-green-rgb), 0.85) 0%, rgba(var(--fs-black-rgb), 0) 62%),
    linear-gradient(168deg, var(--fs-black) 0%, var(--fs-black) 46%, var(--fs-black) 100%);
  box-shadow: 0 26px 60px rgba(var(--shadow-rgb), 0.22);
}

.abmap__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(var(--line-rgb), 0.28);
  pointer-events: none;
}

.abmap__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The land: a gold-tinted field, a drawn edge, and a soft second copy sitting a
   little low and blurred behind it, which is what gives the country weight on
   the green instead of looking pasted onto it. */
.abmap__relief {
  fill: var(--ink);
  opacity: 0.5;
  transform: translate(6px, 12px);
  filter: blur(9px);
}

.abmap__fill { fill: url(#abmapLand); }

.abmap__stroke {
  fill: none;
  stroke: url(#abmapEdge);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.abmap__arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.42;
}

.abmap__dot {
  fill: var(--accent);
  stroke: rgba(var(--ink-rgb), 0.85);
  stroke-width: 1.6;
}

.abmap__hub {
  fill: var(--accent);
  stroke: rgba(var(--ink-rgb), 0.9);
  stroke-width: 1.8;
}

.abmap__halo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  opacity: 0.55;
}

.abmap__labels {
  position: absolute;
  inset: 0;
  font-family: "Assistant", sans-serif;
  pointer-events: none;
}

.abmap__label {
  position: absolute;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: clamp(11px, 1.05vw, 15px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(var(--fs-ivory-rgb), 0.88);
  text-shadow: 0 1px 6px rgba(var(--shadow-rgb), 0.9);
}

/* Names sit clear of their dot on the side the country leaves free. */
.abmap__label--east { margin-left: 14px; }
.abmap__label--west { margin-right: 14px; }

.abmap__label.is-hub {
  font-weight: 600;
  font-size: clamp(12px, 1.2vw, 17px);
  color: var(--accent);
}

/* ---- The map arrives in the page's own language ----
   The same two moves the rest of this page already makes: a line that draws
   itself, the way every gold icon on the page does, and a short rise into place
   on a stagger. Nothing spins, bounces or zooms; the country is drawn, the
   routes follow it, then the dots and their names settle in behind. */

.abmap__fill,
.abmap__relief { opacity: 0; }

.abmap [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.abmap__dot,
.abmap__hub,
.abmap__halo {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.55);
}

.abmap__label {
  opacity: 0;
  transform: translateY(calc(-50% + 7px));
}

.abmap.is-revealed .abmap__fill,
.abmap.is-revealed .abmap__relief {
  opacity: 1;
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 620ms;
}

.abmap.is-revealed .abmap__relief { opacity: 0.5; }

.abmap.is-revealed .abmap__stroke {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1900ms cubic-bezier(0.33, 1, 0.68, 1) 140ms;
}

.abmap.is-revealed .abmap__arc {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1150ms cubic-bezier(0.33, 1, 0.68, 1);
}

.abmap.is-revealed .abmap__dot,
.abmap.is-revealed .abmap__hub,
.abmap.is-revealed .abmap__halo,
.abmap.is-revealed .abmap__label {
  opacity: 1;
  transform: none;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.abmap.is-revealed .abmap__label { transform: translateY(-50%); }
.abmap.is-revealed .abmap__halo { opacity: 0.55; }

/* North to south, one after another, so the eye travels the length of the
   country the way the sentence beside it says the patients do. */
.abmap.is-revealed .abmap__arcs path:nth-child(1)  { transition-delay: 1000ms; }
.abmap.is-revealed .abmap__arcs path:nth-child(2)  { transition-delay: 1090ms; }
.abmap.is-revealed .abmap__arcs path:nth-child(3)  { transition-delay: 1180ms; }
.abmap.is-revealed .abmap__arcs path:nth-child(4)  { transition-delay: 1270ms; }
.abmap.is-revealed .abmap__arcs path:nth-child(5)  { transition-delay: 1360ms; }
.abmap.is-revealed .abmap__arcs path:nth-child(6)  { transition-delay: 1450ms; }
.abmap.is-revealed .abmap__arcs path:nth-child(7)  { transition-delay: 1540ms; }
.abmap.is-revealed .abmap__arcs path:nth-child(8)  { transition-delay: 1630ms; }

.abmap.is-revealed .abmap__dots > *:nth-child(1)  { transition-delay: 1180ms; }
.abmap.is-revealed .abmap__dots > *:nth-child(2)  { transition-delay: 1250ms; }
.abmap.is-revealed .abmap__dots > *:nth-child(3)  { transition-delay: 1320ms; }
.abmap.is-revealed .abmap__dots > *:nth-child(4)  { transition-delay: 1390ms; }
.abmap.is-revealed .abmap__dots > *:nth-child(5)  { transition-delay: 1460ms; }
.abmap.is-revealed .abmap__dots > *:nth-child(6)  { transition-delay: 1530ms; }
.abmap.is-revealed .abmap__dots > *:nth-child(7)  { transition-delay: 1600ms; }
.abmap.is-revealed .abmap__dots > *:nth-child(8)  { transition-delay: 1670ms; }
.abmap.is-revealed .abmap__dots > *:nth-child(9)  { transition-delay: 1740ms; }
.abmap.is-revealed .abmap__dots > *:nth-child(10) { transition-delay: 1810ms; }

.abmap.is-revealed .abmap__label:nth-child(1) { transition-delay: 1260ms; }
.abmap.is-revealed .abmap__label:nth-child(2) { transition-delay: 1330ms; }
.abmap.is-revealed .abmap__label:nth-child(3) { transition-delay: 1400ms; }
.abmap.is-revealed .abmap__label:nth-child(4) { transition-delay: 1470ms; }
.abmap.is-revealed .abmap__label:nth-child(5) { transition-delay: 1540ms; }
.abmap.is-revealed .abmap__label:nth-child(6) { transition-delay: 1610ms; }
.abmap.is-revealed .abmap__label:nth-child(7) { transition-delay: 1680ms; }
.abmap.is-revealed .abmap__label:nth-child(8) { transition-delay: 1750ms; }
.abmap.is-revealed .abmap__label:nth-child(9) { transition-delay: 1820ms; }

/* Reduced motion gets the finished map, not a faster one. */
@media (prefers-reduced-motion: reduce) {
  .abmap__fill { opacity: 1; }
  .abmap__relief { opacity: 0.5; }
  .abmap [pathLength] { stroke-dashoffset: 0; }
  .abmap__dot, .abmap__hub { opacity: 1; transform: none; }
  .abmap__halo { opacity: 0.55; transform: none; }
  .abmap__label { opacity: 1; transform: translateY(-50%); }
}

html.a11y-reduce-motion .abmap__fill { opacity: 1; }
html.a11y-reduce-motion .abmap__relief { opacity: 0.5; }
html.a11y-reduce-motion .abmap [pathLength] { stroke-dashoffset: 0; }
html.a11y-reduce-motion .abmap__dot,
html.a11y-reduce-motion .abmap__hub { opacity: 1; transform: none; }
html.a11y-reduce-motion .abmap__halo { opacity: 0.55; transform: none; }
html.a11y-reduce-motion .abmap__label { opacity: 1; transform: translateY(-50%); }

.abmap__caption {
  margin-top: 16px;
  font-family: "Assistant", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-body);
  text-align: center;
}

/* ============ FINAL CTA ============ */

.abcta__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 68px);
}

.abcta__statement {
  font-family: var(--font-he);
  font-weight: 300;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.2;
  color: var(--color-deep-green);
  margin: 0 0 20px;
}

.abcta__statement em {
  font-style: normal;
  font-weight: 400;
  color: var(--accent);
}

.abcta__lead {
  font-family: "Assistant", sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-body);
  margin: 0;
}

.abcta__whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  border: 1px solid rgba(var(--line-rgb), 0.32);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-deep-green);
  background: rgba(var(--fs-white-rgb), 0.6);
  transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}

.abcta__whatsapp svg { width: 21px; height: 21px; }

.abcta__whatsapp:hover,
.abcta__whatsapp:focus-visible {
  background: var(--fs-white);
  border-color: var(--accent);
  color: var(--color-primary);
}

/* ============ REVEAL ============ */

.abphil__text[data-reveal],
.abphil__media[data-reveal],
.abappr__media[data-reveal],
.abappr__panel[data-reveal],
.abteam__head[data-reveal],
.abteam__body[data-reveal],
.abteam__media[data-reveal],
.abteam__icons[data-reveal],
.abtech__head[data-reveal],
.abtech__hero[data-reveal],
.abtech__list[data-reveal],
.abtech__cell[data-reveal],
.ablab__head[data-reveal],
.ablab__main[data-reveal],
.ablab__body[data-reveal],
.ablab__cell[data-reveal],
.abgal__head[data-reveal],
.abwhy__head[data-reveal],
.abwhy__item[data-reveal],
.abloc__text[data-reveal],
.abloc__media[data-reveal],
.abintro__container[data-reveal],
.abcta__intro[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 820ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

.abphil__media[data-reveal],
.abteam__media[data-reveal],
.abappr__panel[data-reveal],
.abloc__media[data-reveal] { transition-delay: 130ms; }

.abtech__cell[data-reveal]:nth-child(2) { transition-delay: 90ms; }
.abtech__cell[data-reveal]:nth-child(3) { transition-delay: 180ms; }
.abtech__cell[data-reveal]:nth-child(4) { transition-delay: 270ms; }
.abwhy__item[data-reveal]:nth-child(2) { transition-delay: 80ms; }
.abwhy__item[data-reveal]:nth-child(3) { transition-delay: 160ms; }
.abwhy__item[data-reveal]:nth-child(4) { transition-delay: 240ms; }
.abwhy__item[data-reveal]:nth-child(5) { transition-delay: 320ms; }
.abwhy__item[data-reveal]:nth-child(6) { transition-delay: 400ms; }
.ablab__cell[data-reveal]:nth-child(2) { transition-delay: 120ms; }

.abphil__text.is-revealed,
.abphil__media.is-revealed,
.abappr__media.is-revealed,
.abappr__panel.is-revealed,
.abteam__head.is-revealed,
.abteam__body.is-revealed,
.abteam__media.is-revealed,
.abteam__icons.is-revealed,
.abtech__head.is-revealed,
.abtech__hero.is-revealed,
.abtech__list.is-revealed,
.abtech__cell.is-revealed,
.ablab__head.is-revealed,
.ablab__main.is-revealed,
.ablab__body.is-revealed,
.ablab__cell.is-revealed,
.abgal__head.is-revealed,
.abwhy__head.is-revealed,
.abwhy__item.is-revealed,
.abloc__text.is-revealed,
.abloc__media.is-revealed,
.abintro__container.is-revealed,
.abcta__intro.is-revealed {
  opacity: 1;
  transform: none;
}

/* The location "ways" list draws its own icons, so it reveals as a unit with
   the surrounding text block rather than carrying its own offset. */
.abloc__way[data-reveal] { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */

@media (max-width: 1100px) {
  .abphil__container,
  .abteam__grid,
  .abloc__container { grid-template-columns: 1fr; }

  .abphil__media { order: -1; }
  .abloc__media { order: -1; }

  .abtech__spread { grid-template-columns: 1fr; }
  .abtech__hero { position: static; }
  .abtech__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .abwhy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ablab__lead { grid-template-columns: 1fr; }

  .abteam__icons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; }
}

@media (max-width: 900px) {
  .abhero { min-height: auto; }
  .abhero__media img { object-position: 46% 22%; }
  /* On a phone the column runs the full width, so the side gradient that keeps
     the desktop copy off the clinician has nothing left to do — it only
     flattened the whole room. The weight moves to the foot, under the copy,
     and to a thin band under the navigation. */
  .abhero__scrim {
    background: linear-gradient(to top, rgba(var(--fs-black-rgb), 0.88) 0%, rgba(var(--fs-black-rgb), 0.6) 30%, rgba(var(--fs-black-rgb), 0.12) 58%, rgba(var(--fs-black-rgb), 0.06) 100%),
      linear-gradient(to bottom, rgba(var(--fs-black-rgb), 0.7) 0%, rgba(var(--fs-black-rgb), 0.24) 13%, rgba(var(--fs-black-rgb), 0) 27%);
  }
  .abhero__inner {
    align-items: flex-end;
    padding-top: clamp(360px, 92vw, 520px);
    /* deep enough that the scroll cue at the foot of the hero clears the credit
       line rather than landing on top of it */
    padding-bottom: clamp(112px, 15vw, 150px);
  }
  .abhero__text { max-width: 100%; }

  .abappr { padding-top: 0; }
  .abappr__panel {
    margin-inline: clamp(16px, 4vw, 32px);
    margin-top: -34px;
  }
}

@media (max-width: 640px) {
  .abhero__title span,
  .abhero__title em { display: inline; }
  .abhero__inner { padding-inline: 22px; }
  .abhero__title { font-size: clamp(31px, 8.4vw, 42px); }

  .abphil__container,
  .abloc__container { padding-inline: 22px; }

  .abtech__strip { grid-template-columns: 1fr; }
  .abtech__item { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }

  .abwhy__grid { grid-template-columns: 1fr; }
  .abwhy__item { padding: 24px 22px; }

  .ablab__band { grid-template-columns: 1fr; }
  .ablab__cell { height: clamp(220px, 58vw, 320px); }

  .abteam__icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .abgal__stage { padding-inline: 0; }
  .abgal__track { padding-inline: 16px; scroll-padding-inline: 16px; }
  .abgal__slide { width: clamp(210px, 66vw, 270px); }
  .abgal__nav { width: 42px; height: 42px; }
  .abgal__nav--prev { inset-inline-start: 6px; }
  .abgal__nav--next { inset-inline-end: 6px; }
  .ablight__nav { width: 42px; height: 42px; margin-top: -21px; }

  .abloc__way { grid-template-columns: 30px 34px minmax(0, 1fr); gap: 12px; }
  .abloc__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .abhero__media img { animation: none; }
  .abgal__track { scroll-behavior: auto; }
  .abgal__open,
  .abgal__open img,
  .ablight,
  .ablight__figure { transition: none; }
}

/* ============================================================
   VIDEO LIGHTBOX — testimonials open in a modal instead of
   playing inline inside a small card.
   ============================================================ */

body.has-vlightbox { overflow: hidden; }

/* `display: flex` below outbids the UA's [hidden] { display: none }, so the
   attribute has to be honoured explicitly — without this a closed lightbox
   stays a full-screen, invisible click trap over the whole page. */
.vlightbox[hidden] { display: none; }

.vlightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}

.vlightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--fs-black-rgb), 0.86);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.vlightbox.is-open .vlightbox__backdrop { opacity: 1; }

.vlightbox__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: min(560px, 100%);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vlightbox.is-open .vlightbox__panel { opacity: 1; transform: none; }

.vlightbox__stage {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.4);
  box-shadow: 0 40px 90px -30px rgba(var(--shadow-rgb), 0.9);
  background: var(--fs-black);
}

.vlightbox__video {
  display: block;
  width: 100%;
  max-height: min(74vh, 900px);
  height: auto;
}

.vlightbox__caption {
  margin: 0;
  max-width: 46ch;
  text-align: center;
  font-family: "Assistant", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

.vlightbox__close {
  position: absolute;
  top: -14px;
  inset-inline-end: -14px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--line-rgb), 0.5);
  border-radius: 50%;
  background: rgba(var(--fs-green-rgb), 0.92);
  color: var(--accent);
  cursor: pointer;
  transition: background-color 220ms ease, transform 220ms ease, border-color 220ms ease;
}

.vlightbox__close svg { width: 19px; height: 19px; }

.vlightbox__close:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  transform: rotate(90deg);
}

@media (max-width: 620px) {
  .vlightbox__close { top: -10px; inset-inline-end: -6px; width: 40px; height: 40px; }
  .vlightbox__caption { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .vlightbox__backdrop,
  .vlightbox__panel { transition: none; }
  .vlightbox__close:hover { transform: none; }
}

/* ---- Testimonials page: treatment tag + featured card ---- */

.voices__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); }

.voices__card .video-frame { position: relative; }

.voices__tag {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(var(--fs-green-rgb), 0.82);
  border: 1px solid rgba(var(--line-rgb), 0.4);
  color: var(--accent);
  font-family: "Assistant", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.voices__card--featured .video-frame { border-color: var(--accent); }

/* ---- Results-in-motion band ---- */

.vmotion {
  background: var(--fs-black);
  padding-block: clamp(60px, 7vw, 96px);
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
  border-top: 1px solid rgba(var(--line-rgb), 0.12);
}

.vmotion__container { max-width: 1100px; margin: 0 auto; }

.vmotion__head { max-width: 640px; margin: 0 auto 44px; text-align: center; }

.vmotion__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--accent);
}

.vmotion__title {
  margin: 0 0 14px;
  font-family: var(--font-he);
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 40px);
  color: var(--ink);
}

.vmotion__lead {
  margin: 0;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-body);
}

.vmotion__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
  justify-content: center;
  gap: clamp(24px, 3vw, 40px);
}

.vmotion__card .video-frame {
  border-color: rgba(var(--line-rgb), 0.28);
  box-shadow: 0 26px 50px rgba(var(--shadow-rgb), 0.42);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), border-color 250ms ease-out;
}

.vmotion__card:hover .video-frame {
  transform: translateY(-4px);
  border-color: var(--accent);
}

.vmotion__caption {
  margin: 16px 2px 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

.vmotion__link {
  display: flex;
  width: max-content;
  margin: 40px auto 0;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid rgba(var(--line-rgb), 0.45);
  color: var(--accent);
  font-size: 15px;
  font-weight: 500;
  transition: background-color 240ms ease, transform 240ms ease, border-color 240ms ease;
}

.vmotion__link svg { width: 17px; height: 17px; transition: transform 240ms ease; }

.vmotion__link:hover,
.vmotion__link:focus-visible {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.vmotion__link:hover svg { transform: translateX(3px); }

/* ---- Homepage team section: link through to the full team page ---- */

.team__cta { display: flex; justify-content: center; margin-top: 44px; }

.btn--outline-dark {
  border: 1px solid rgba(var(--line-rgb), 0.34);
  color: var(--color-deep-green);
  background: transparent;
  transition: border-color 240ms ease, background-color 240ms ease, transform 240ms ease;
}

.btn--outline-dark:hover,
.btn--outline-dark:focus-visible {
  border-color: var(--accent);
  background: var(--fs-white);
  transform: translateY(-2px);
}

.btn--outline-dark .icon { transition: transform 240ms ease; }
.btn--outline-dark:hover .icon { transform: translateX(3px); }

.team__cta[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.team__cta.is-revealed { opacity: 1; transform: none; }

/* ---- Carousel dots need a real tap target, not a 10px dot ---- */

.testimonials__dot {
  position: relative;
  isolation: isolate;
}

.testimonials__dot::after {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
}

/* ============================================================
   TOUCH TARGETS — every control reachable by finger gets at
   least a 44px-high hit area on touch layouts. The visual size
   of the link is unchanged; only the padding around it grows.
   ============================================================ */

@media (max-width: 900px) {
  .site-footer__nav a,
  .site-footer__legal a,
  .location__fact-link,
  .site-header__back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .site-footer__nav li,
  .site-footer__legal li { line-height: 1; }

  .consult-form__checkbox { min-height: 44px; }
  .consult-form__checkbox input[type="checkbox"] { min-height: 24px; }
}

/* ============================================================
   ICON MICRO-ANIMATION — one behaviour for every small mark
   on the site.

   Most of the blocks on the site already fade up as they come
   into view, but the marks inside them — the badges on the
   treatment cards, the step numbers, the little line icons —
   arrived flat and all at once with the block, which read as
   unfinished next to the about page, where the icons draw
   themselves. They now arrive a beat after their block and one
   after another: a short rise out of nothing, settling from
   just under full size. No new observer and no new script runs
   for it; it hangs off the reveal class the block already gets,
   and the running order comes from a single index set once at
   load (see js/main.js).
   ============================================================ */

[data-reveal] .sv-icon-badge,
[data-reveal] .tech-item__icon,
[data-reveal] .treatment-card__icon,
[data-reveal] .location__fact-icon,
[data-reveal] .journey__marker,
[data-reveal] .why__feature-num,
[data-reveal] .svjourney__num,
[data-reveal] .svsteps__num,
[data-reveal] .svpoints__num,
[data-reveal] .abtech__num,
[data-reveal] .tbeyond__num,
[data-reveal] .svchanges__num {
  opacity: 0;
  transform: translateY(9px) scale(0.88);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  /* --mark-i is written once at load; the fallback keeps the marks correct if
     scripting never runs, they simply all arrive together. */
  transition-delay: calc(var(--mark-i, 0) * 70ms + 150ms);
}

[data-reveal].is-revealed .sv-icon-badge,
[data-reveal].is-revealed .tech-item__icon,
[data-reveal].is-revealed .treatment-card__icon,
[data-reveal].is-revealed .location__fact-icon,
[data-reveal].is-revealed .journey__marker,
[data-reveal].is-revealed .why__feature-num,
[data-reveal].is-revealed .svjourney__num,
[data-reveal].is-revealed .svsteps__num,
[data-reveal].is-revealed .svpoints__num,
[data-reveal].is-revealed .abtech__num,
[data-reveal].is-revealed .tbeyond__num,
[data-reveal].is-revealed .svchanges__num {
  opacity: 1;
  transform: none;
}

/* The home hero is the one first screen with no reveal to hang off — it is
   already in view when the page paints. Its four figures come in on a timer
   instead, late enough that the headline has landed first. */

@keyframes mark-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes mark-settle {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: none; }
}

.hero-stats .stat {
  animation: mark-rise 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-stats .stat__icon {
  animation: mark-settle 820ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-stats .stat:nth-child(1) { animation-delay: 560ms; }
.hero-stats .stat:nth-child(2) { animation-delay: 660ms; }
.hero-stats .stat:nth-child(3) { animation-delay: 760ms; }
.hero-stats .stat:nth-child(4) { animation-delay: 860ms; }
.hero-stats .stat:nth-child(1) .stat__icon { animation-delay: 700ms; }
.hero-stats .stat:nth-child(2) .stat__icon { animation-delay: 800ms; }
.hero-stats .stat:nth-child(3) .stat__icon { animation-delay: 900ms; }
.hero-stats .stat:nth-child(4) .stat__icon { animation-delay: 1000ms; }

/* The five stars under the rating fill in left to right, once. */
.stat__stars img {
  animation: mark-settle 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.stat__stars img:nth-child(1) { animation-delay: 980ms; }
.stat__stars img:nth-child(2) { animation-delay: 1040ms; }
.stat__stars img:nth-child(3) { animation-delay: 1100ms; }
.stat__stars img:nth-child(4) { animation-delay: 1160ms; }
.stat__stars img:nth-child(5) { animation-delay: 1220ms; }

/* Hover, on pointers only: the badge on a card the cursor is over lifts a
   little and its ring warms. Touch screens get nothing — there is no hover to
   answer, and a sticky :hover state on tap looks like a bug. */
@media (hover: hover) and (pointer: fine) {
  .sv-icon-badge {
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 420ms ease, background-color 420ms ease;
  }

  .svplan__card:hover .sv-icon-badge,
  .svchanges__card:hover .sv-icon-badge,
  .svrows__row:hover .sv-icon-badge {
    transform: translateY(-3px) scale(1.06);
    border-color: rgba(var(--line-rgb), 0.85);
  }

  .tech-item__icon { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stats .stat,
  .hero-stats .stat__icon,
  .stat__stars img { animation: none; }

  [data-reveal] .sv-icon-badge,
  [data-reveal] .tech-item__icon,
  [data-reveal] .treatment-card__icon,
  [data-reveal] .location__fact-icon,
  [data-reveal] .journey__marker,
  [data-reveal] .why__feature-num,
  [data-reveal] .svjourney__num,
  [data-reveal] .svsteps__num,
  [data-reveal] .svpoints__num,
  [data-reveal] .abtech__num,
  [data-reveal] .tbeyond__num,
  [data-reveal] .svchanges__num {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   MICRO-INTERACTIONS — small, slow, and only where they help
   the eye find the thing it is about to click. Nothing bounces
   and nothing flies.
   ============================================================ */

/* Journey: the step under the cursor lifts its marker out of the rail. */

.journey__step {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.journey__marker,
.journey__step-title {
  transition: color 300ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 300ms ease, background-color 300ms ease;
}

.journey__step:hover .journey__marker {
  transform: translateY(-3px) scale(1.06);
  border-color: var(--accent);
}

.journey__step:hover .journey__step-title { color: var(--accent); }

/* Treatment cards: the icon settles a touch as the card lifts. */

.treatment-card__icon img {
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.treatment-card:hover .treatment-card__icon img { transform: scale(1.08); }

.treatment-card__link .icon { transition: transform 260ms ease; }
.treatment-card:hover .treatment-card__link .icon { transform: translateX(4px); }

/* Why-us list: the gold rule between number and text draws out on hover. */

/* the divider is a vertical hairline — it brightens, it does not grow sideways */
.why__feature-divider { transition: background-color 320ms ease, opacity 320ms ease; }
.why__feature:hover .why__feature-divider {
  background-color: var(--accent);
  opacity: 1;
}
.why__feature-num { transition: color 300ms ease; }
.why__feature:hover .why__feature-num { color: var(--accent); }

/* Gallery thumbnails on the homepage: soften the swap, not just the border. */

.patients__thumb img,
.about__thumb img { transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1); }
.patients__thumb:hover img,
.about__thumb:hover img { transform: scale(1.06); }

/* The main gallery photo already cross-fades on swap; give it the same easing
   as everything else so the whole page moves at one speed. */

#patientsMainPhoto,
#aboutMainPhoto {
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .journey__step,
  .journey__marker,
  .journey__step-title,
  .treatment-card__icon img,
  .treatment-card__link .icon,
  .why__feature-divider,
  .patients__thumb img,
  .about__thumb img,
  #patientsMainPhoto,
  #aboutMainPhoto { transition: none !important; }
}

/* Carousel dots: keep the 8px dot, give the finger a 30px target. */

.testimonials__dot {
  width: 30px;
  height: 30px;
  background: none;
  display: grid;
  place-items: center;
}

.testimonials__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.35);
  transition: background 250ms ease-out, transform 250ms ease-out;
}

.testimonials__dot.is-active {
  /* the visual dot lives in ::before now — the button itself stays a plain
     30px target so the earlier scale rule must not double up */
  background: none;
  transform: none;
}

.testimonials__dot.is-active::before {
  background: var(--accent);
  transform: scale(1.25);
}

.testimonials__dot:hover::before { background: rgba(var(--accent-rgb), 0.7); }

.testimonials__dot::after { content: none; }

@media (max-width: 900px) {
  .tor-crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .tor-crumbs li { line-height: 1; }
}

/* ============================================================
   PATIENT STORIES — the full video set (17 testimonials)
   Home: one horizontal editorial rail, arrows + progress rule.
   עדויות: featured tier (approved quotes) + a compact story wall.
   ============================================================ */

/* ---- Home rail ------------------------------------------------------- */

/* The row was a 4-up grid built for three cards. With the full set it becomes
   a snap rail at every breakpoint, so one gesture reaches all of them and the
   section keeps its height. */
.testimonials__row {
  display: flex;
  grid-template-columns: none;
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 8px;
  -webkit-overflow-scrolling: touch;
  padding: 24px 8px 8px;
  scrollbar-width: none;
  align-items: flex-start;
}

.testimonials__row::-webkit-scrollbar { display: none; }

.testimonials__row .testimonial-card {
  flex: 0 0 clamp(178px, 20vw, 232px);
  scroll-snap-align: center;
}

/* the active card scales up, so the rail needs room for it not to be clipped */
.testimonials__stage { overflow: visible; }
.testimonials__gallery { overflow: hidden; border-radius: 28px; width: 100%; }

.testimonials__nav {
  position: absolute;
  top: calc(50% - 46px);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--line-rgb), 0.55);
  background: rgba(var(--fs-green-rgb), 0.82);
  color: var(--accent);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 250ms ease-out, border-color 250ms ease-out, opacity 250ms ease-out;
}

.testimonials__nav:hover { background: var(--accent); color: var(--ts-dark); }
.testimonials__nav:disabled { opacity: 0.25; cursor: default; }
.testimonials__nav svg { width: 19px; height: 19px; }

/* RTL: "previous" sits on the right, "next" on the left */
.testimonials__nav--prev { inset-inline-start: auto; inset-inline-end: -6px; }
.testimonials__nav--next { inset-inline-end: auto; inset-inline-start: -6px; }
.testimonials__nav--next svg { transform: scaleX(-1); }

.testimonials__progress {
  position: relative;
  z-index: 1;
  height: 2px;
  margin: 20px auto 0;
  width: min(320px, 60%);
  border-radius: 2px;
  background: rgba(var(--accent-rgb), 0.18);
  overflow: hidden;
}

.testimonials__progress span {
  display: block;
  height: 100%;
  width: 18%;
  border-radius: 2px;
  background: var(--accent);
  transition: transform 180ms ease-out, width 180ms ease-out;
}

@media (max-width: 900px) {
  .testimonials__row { padding: 22px 20px 8px; gap: 12px; }
  .testimonials__row .testimonial-card { flex: 0 0 min(74vw, 268px); }
  .testimonials__dots { display: none; }
}

/* Arrows stay down to tablet — 900px is as often a narrow laptop window as a
   touch device, and there the rail needs a visible control. */
@media (max-width: 700px) {
  .testimonials__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials__row { scroll-behavior: auto; }
  .testimonials__progress span { transition: none; }
}

/* ---- עדויות: the compact story wall under the featured tier ---------- */

.voices__wall-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(56px, 6vw, 84px) 0 clamp(26px, 3vw, 36px);
}

.voices__wall-head h3 {
  font-family: var(--font-he);
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}

.voices__wall-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.45), transparent);
}

/* Flex rather than grid: 14 cards rarely divide evenly into whatever column
   count fits, and only flex wrapping centres the short final row instead of
   leaving it hanging off the start edge. */
.voices__wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 1.8vw, 26px);
}

.voices__wall .voices__card {
  flex: 0 1 clamp(148px, 15vw, 190px);
}

.voices__wall .video-frame {
  border-radius: 16px;
  border-color: rgba(var(--line-rgb), 0.28);
  box-shadow: 0 16px 32px rgba(var(--shadow-rgb), 0.34);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), border-color 250ms ease-out;
}

.voices__wall .voices__card:hover .video-frame {
  transform: translateY(-4px);
  border-color: var(--accent);
}

/* the wall's play button is smaller than the featured tier's, so the two
   levels of the hierarchy stay distinguishable at a glance. It also sits in
   the lower part of the frame rather than dead centre: in these narrow
   portrait cards the centre is the patient's chin or face, and a dark disc
   there hides the one thing a testimonial has to show. */
.voices__wall .video-frame__play {
  width: 46px;
  height: 46px;
  top: auto;
  bottom: 12%;
  transform: translateX(-50%);
}

.voices__wall .video-frame__play:hover {
  transform: translateX(-50%) scale(1.08);
}

@media (max-width: 700px) {
  .voices__wall { gap: 12px; }
  .voices__wall .voices__card { flex: 0 1 calc(50% - 6px); }
  .voices__wall .video-frame { border-radius: 13px; }
  .voices__wall .video-frame__play { width: 38px; height: 38px; }
  .voices__wall-head { margin-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .voices__wall .video-frame,
  .voices__wall .voices__card:hover .video-frame { transition: none; transform: none; }
}

/* Cards without a clinic-approved quote show the standing line instead; it is
   an instruction, not a patient's words, so the quote marks step back. */
.testimonials__quote-text.is-standing {
  font-style: normal;
  font-size: 0.92em;
  opacity: 0.72;
  letter-spacing: 0.02em;
}

.testimonials__quote-panel:has(.is-standing) .testimonials__quote-mark {
  opacity: 0;
}

/* The 1.12 scale was tuned for a static three-card row; inside a snap rail it
   clips against the scroll container and makes the row jitter as cards pass.
   The active card is marked by the gold frame and a small lift instead. */
.testimonials__row .testimonial-card.is-active .video-frame {
  transform: scale(1.045);
}

.testimonials__row .testimonial-card {
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* room for the lift and the gold glow, so neither is cropped by the rail --
   the active card grows past its own box on all four sides */
.testimonials__row {
  padding-block: 26px 14px;
  padding-inline: 20px;
  scroll-padding-inline: 20px;
}

/* keep the arrows clear of the stage's rounded corners */
.testimonials__nav--prev { inset-inline-end: 12px; }
.testimonials__nav--next { inset-inline-start: 12px; }

@media (prefers-reduced-motion: reduce) {
  .testimonials__row .testimonial-card.is-active .video-frame { transform: none; }
}

/* ============================================================
   CLOSE-UP FRAMING — the three places where the stylesheet, not
   the image file, was doing the cropping. Everything else in the
   dental close-up set is re-cropped at the asset level instead.
   ============================================================ */

/* Toronto bridge photo: a 1080x1080 file inside a 1.27 box lost 21% of its
   height, so the arch ran off both side edges. Taking the square shows all
   of it — the file's own edge is the limit, there is no more to reveal. */
.toronto__photo {
  aspect-ratio: 1 / 1;
  min-height: 0;
  align-self: start;
}

.toronto__photo img {
  object-position: center center;
}

/* Services hero: 1536x1024 (1.5) in a 1.161 box hid 23% of the width.
   Scoped to this page — the emax hero shares the base rule and is already
   well framed, so it must not move with it. */
@media (min-width: 901px) {
  .svohero__visual--wide {
    align-self: center;
    aspect-ratio: 3 / 2;
    height: auto;
    min-height: 0;
  }
  .svohero__visual--wide img {
    height: 100%;
    object-position: center center;
  }
}

/* Veneers collage: a square file in a 4/3 box lost 25% of its height on
   desktop and 37% on mobile — the tightest CSS crop on the site. */
.svrows__photo--collage { aspect-ratio: 1 / 1; }

@media (max-width: 899px) {
  .svrows__photo--collage { aspect-ratio: 1 / 1; }
}

/* ============================================================
   ABOUT PAGE — framing corrections
   ============================================================ */

@media (max-width: 900px) {
  /* approach.jpg is 2.16 wide; at 390px the box fell to 1.15 and cover threw
     away 47% of the width, putting the right frame edge across the second
     clinician's face. A taller box brings the crop down to ~17% and keeps
     both people whole. */
  .abappr__media img { height: calc(56vw + 20px); }

  /* team-space.jpg rendered 340x219 on a phone -- three people at that height
     are unreadable, so the photograph carried no information at all. */
  .abteam__media img { aspect-ratio: 4 / 3; }
}

/* Two frames were using `object-fit: contain` against the cream plate to avoid
   cropping a head. The intent was right, the mechanism wasn't: it pillarboxed
   one photo across 34% of its box and letterboxed the other top and bottom.
   Giving the container the file's own ratio shows the whole image with no bars. */
.svrows__photo--ratio-3-2  { aspect-ratio: 3 / 2; }     /* tooth-cross-section-model.jpg 1400x933 */
.svrows__photo--ratio-22-25 { aspect-ratio: 22 / 25; }  /* calm-consultation.jpg 1232x1400 */

@media (max-width: 860px) {
  .svrows__photo--ratio-3-2  { aspect-ratio: 3 / 2; }
  .svrows__photo--ratio-22-25 { aspect-ratio: 22 / 25; }
}

/* Section heroes: at ≤899px the 4/3 box pulls the subject to centre, so the
   eyebrow and headline — which sit at the bottom of the frame — land across a
   face. Biasing the crop upward puts the type back on the backdrop. */
@media (max-width: 899px) {
  .svhpage .svbanner__photo img { object-position: 50% 22%; }
}

/* The shared 16/10 mobile frame squeezes 4:3 sources by 17% of their height,
   which is exactly enough to take the crown off the people in these three
   photographs. Matching the file's ratio shows all of them. */
.svrows__photo--ratio-4-3 { aspect-ratio: 4 / 3; }

@media (max-width: 860px) {
  .svrows__photo--ratio-4-3 { aspect-ratio: 4 / 3; }
}

/* Home preview shows five stories, not the whole library. When they fit, the
   rail stops behaving like a rail: the row centres and its controls step away. */
.testimonials__row.is-static {
  justify-content: center;
  overflow-x: hidden;
}

.testimonials__row.is-static ~ .testimonials__progress,
.testimonials__stage:has(.testimonials__row.is-static) .testimonials__nav {
  display: none;
}

/* Five cards should land inside the stage exactly, not overflow it by a
   hundred pixels — a rail that scrolls a sliver reads as a layout fault. */
@media (min-width: 901px) {
  .testimonials__row .testimonial-card { flex: 0 0 clamp(178px, 20vw, 210px); }
}

/* The visit block's frame goes from 1.18 wide on desktop to 1.84 on tablet, so
   one object-position cannot serve both: the tablet box crops the height, and at
   40% it clipped the top of the clinician's hair. Bias the crop upward there. */
@media (max-width: 900px) and (min-width: 601px) {
  .location__photo img { object-position: center 14%; }
}

/* Aesthetic-dentistry hero — no type on a face, at any width.

   The shared section-hero frame is 2.1:1 above 899px and 4:3 below it. On the
   narrow frame that 4:3 box did two things to this five-person group shot: it
   sliced the outer two patients in half, and it dropped the eyebrow and headline
   straight across the faces of the other three. Neither is fixable by nudging
   the crop — the caption is bottom-anchored and taller than the clear band the
   photograph has left.

   So below 900px the hero stops being an overlay and becomes a card: the frame
   drops its fixed ratio, the photograph runs full width at its own 16:9 with
   nobody cropped out, and the eyebrow and headline sit underneath it on the
   section's green. Without a scrim over the picture the photo no longer has to
   carry white text, so it also comes back up to near its own exposure. */
@media (max-width: 899px) {
  .svhpage .svbanner__photo--card {
    aspect-ratio: auto;
    height: auto;
    background: var(--color-deep-green-darkest);
  }

  .svhpage .svbanner__photo--card img {
    height: auto;
    object-position: 50% 50%;
    filter: brightness(0.94) saturate(1.05);
  }

  .svhpage .svbanner__photo--card .svbanner__scrim { display: none; }

  .svhpage .svbanner__photo--card .svbanner__caption {
    position: static;
    padding: 22px clamp(18px, 5vw, 30px) 26px;
  }
}

/* ============================================================================
   VERIFIED REVIEWS — external MedReviews widget (2026-09-01)

   An independent, third-party proof block. The widget's own text colour is
   fixed at #15272e by MedReviews and cannot be themed, so the frame is kept on
   a light surface; only the surrounding card, the stars and the carousel arrows
   are brought onto the brand palette via the bg / controls-color parameters.
   ========================================================================= */

.revwidget {
  max-width: 860px;
  margin-inline: auto;
}

.revwidget__head {
  text-align: center;
  margin-bottom: 22px;
}

.revwidget__eyebrow {
  margin: 0 0 10px;
  font-family: "Assistant", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--accent);
}

.revwidget__title {
  margin: 0;
  font-family: "Assistant", sans-serif;
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-deep-green);
}

.revwidget__note {
  margin: 10px auto 0;
  max-width: 52ch;
  font-family: "Assistant", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.68);
}

.revwidget__frame {
  position: relative;
  background: var(--fs-white);
  border: 1px solid rgba(var(--line-rgb), 0.34);
  border-radius: 20px;
  box-shadow: 0 18px 44px -30px rgba(var(--shadow-rgb), 0.45);
  overflow: hidden;
}

.revwidget__iframe {
  display: block;
  width: 100%;
  height: 272px;
  border: 0;
}

/* The link back to the source the score is quoted from. Colour is inherited so
   the same anchor reads correctly on the dark hero and on the light trust band. */
.stat__source,
.revwidget__verify {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.5);
  padding-bottom: 2px;
  transition: border-color 180ms ease;
}

.stat__source:hover,
.stat__source:focus-visible,
.revwidget__verify:hover,
.revwidget__verify:focus-visible {
  border-bottom-color: var(--accent);
}

.stat__source svg,
.revwidget__verify svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--accent);
}

.revwidget__foot {
  margin: 18px 0 0;
  text-align: center;
  font-family: "Assistant", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-deep-green);
}

.tmember .revwidget__foot { text-align: start; }

.revwidget__verify svg { color: var(--accent); }

/* Homepage: the block sits under the video testimonials, on the cream band. */
.testimonials .revwidget {
  margin-top: clamp(52px, 6vw, 76px);
}

/* Team page: the block closes Dr. Lantset's profile column. */
.tmember .revwidget {
  margin-top: 30px;
  max-width: none;
}

.tmember .revwidget__head {
  text-align: start;
}

.tmember .revwidget__note {
  margin-inline: 0;
}

@media (max-width: 700px) {
  .revwidget__iframe { height: 344px; }
  .revwidget__frame { border-radius: 16px; }
  .revwidget__note { font-size: 14.5px; }
}

/* At a 360px screen the widget's header wraps one line more and its page is
   348px tall — four pixels over the frame, which is enough to make the frame
   a scroller of its own: the first thumb-flick that lands on it scrolls the
   widget instead of the page. The widget's height does not change as its
   reviews rotate, so a fixed allowance holds. */
@media (max-width: 374px) {
  .revwidget__iframe { height: 360px; }
}

/* ---- Star rating rendered from the score, not a row of hollow icons ---- */
.starrow {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  direction: ltr;
}

.starrow svg {
  width: 15px;
  height: 15px;
  flex: none;
  display: block;
}

.starrow .starrow__off { fill: rgba(var(--accent-rgb), 0.28); }
.starrow .starrow__on  { fill: var(--accent); }

/* ============================================================================
   MOBILE UX POLISH — phone-only refinements (2026-08-31)

   Everything below is scoped to phone widths. Desktop and tablet layouts are
   deliberately untouched: this pass is about how the existing design behaves in
   one hand, not about changing what it is.
   ========================================================================= */

/* ---- 1. Home hero: one first screen, not two ----

   The stacked mobile hero read as two separate blocks — a portrait card floating
   on the green with 40px gutters and a hard horizontal cut across her arm, then
   ~150px of empty green holding only a scroll cue, and only then the headline,
   which started below the fold.

   Three changes make it one picture: the portrait goes full-bleed (wider, not
   smaller), its cut edge dissolves into the section's own green through a mask,
   and the copy rises into that fade. The cue leaves the column entirely — a
   scroll hint occupying prime space between the face and the headline was the
   thing splitting them. */
@media (max-width: 900px) {
  .hero-content { padding-top: 16px; }

  .hero-image {
    /* full-bleed: cancel the column's inline padding for the photograph only */
    height: min(46vh, 420px);
    min-height: 300px;
    width: auto;
    margin-inline: -40px;
    /* the mask does the transition; a hard bottom edge is what read as a card */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0) 99%);
    mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0) 99%);
  }

  .hero-image img {
    /* the drop shadow described a rectangle that is no longer there */
    filter: none;
  }

  .hero .scrolldown--float { display: none; }

  .hero-text {
    /* copy rises into the tail of the fade, so photo and message read together */
    margin-top: -34px;
    padding-top: 0;
    padding-bottom: 24px;
  }

  .eyebrow { margin-bottom: 16px; }
  .hero-title { margin-bottom: 18px; }
  .hero-desc { margin-bottom: 26px; }
  .hero-buttons { margin-bottom: 30px; }
}

@media (max-width: 640px) {
  .hero-image { margin-inline: -40px; }
  /* two comfortable lines at every phone width, never three */
  .hero-title { font-size: clamp(38px, 11.2vw, 48px); line-height: 1.04; }
  .eyebrow { font-size: 14.5px; letter-spacing: 0.05em; }
}

/* 360px is the narrowest Android width in real use; the gutters shrink there so
   the headline keeps its two lines instead of breaking to three. */
@media (max-width: 374px) {
  .hero-content { padding-inline: 26px; }
  .hero-image { margin-inline: -26px; }
}

/* ---- 2. One mobile hero system for the treatment pages ----

   Every section hero used the same recipe: a 4:3 mobile crop, a full-frame
   scrim at 0.75 alpha, brightness 0.75 on the photograph itself, and a
   bottom-anchored caption. On a phone the headline wraps to three lines, and
   three lines of 28px type is taller than the clear band any of these
   photographs has. The result was type running across a doctor's chin
   (כירורגיית פה ולסת), across two clinicians mid-treatment (טיפולי שורש), and
   across the patient's mouth that is the subject of the picture (השתלות).

   The aesthetic-dentistry page already solved this by making the hero a card
   with the caption underneath (--card, above). --stack applies the same rule to
   the pages whose photographs need a deliberate mobile crop rather than their
   own full ratio: the crop stays, the type moves off the faces, and because the
   photograph no longer has to carry white text it comes back up to its real
   exposure instead of being darkened twice. */
@media (max-width: 899px) {
  .svhpage .svbanner__photo--stack {
    /* the shared mobile rule puts a 4:3 ratio on the frame; here the ratio
       belongs to the photograph and the frame grows to fit the caption too,
       which overflow:hidden would otherwise clip away */
    aspect-ratio: auto;
    height: auto;
    background: var(--color-deep-green-darkest);
    display: flex;
    flex-direction: column;
  }

  .svhpage .svbanner__photo--stack img {
    aspect-ratio: 4 / 3;
    height: auto;
    /* no second darkening pass — the type is off the picture now */
    filter: brightness(0.97) saturate(1.04);
  }

  .svhpage .svbanner__photo--stack .svbanner__scrim { display: none; }

  .svhpage .svbanner__photo--stack .svbanner__caption {
    position: static;
    max-width: none;
    padding: 20px clamp(18px, 5vw, 30px) 24px;
  }

  .svhpage .svbanner__photo--stack .svbanner__title {
    font-size: clamp(25px, 6.4vw, 31px);
    line-height: 1.22;
  }

  .svhpage .svbanner__photo--stack .svbanner__eyebrow {
    font-size: 13.5px;
    margin-bottom: 8px;
  }
}

/* Per-page mobile crops. A 2.1:1 press photograph re-cropped to 4:3 loses a
   third of its width, so where the subject is off-centre the crop is aimed
   rather than left at 50% — one crop for desktop and phone does not work here. */
@media (max-width: 899px) {
  .svhpage .svbanner__photo--stack img { object-position: 50% 42%; }
}

/* The site header is fixed and 66px tall below 900px, but the card and stack
   heroes started 32px down the page, so their top edge, border and the first
   band of the photograph ran under the menu button and the logo — and on the
   step-and-repeat backdrops the header's wordmark sat right on top of the
   printed one. A card is a framed object: it starts below the bar. Spark's
   hero keeps its type over the photograph, but its frame is the same inset,
   rounded card, so it starts below the bar too. */
/* 900, not 899: the shared phone rule that sets the 32px start runs to
   max-width 900px, so at exactly 900 the card was under the bar again */
@media (max-width: 900px) {
  .svhpage .svbanner__photo { margin-top: 80px; }
}

/* the bar grows to 88px from 641px up */
@media (min-width: 641px) and (max-width: 900px) {
  .svhpage .svbanner__photo { margin-top: 102px; }
}

/* Spark's hero is a product shot — floating aligners, no face anywhere in the
   frame — so it keeps the overlay treatment. Type over a photograph is the
   nicer hero when the photograph can carry it; the rule this pass enforces is
   about faces, not about overlays. Only the measure is capped so the headline
   holds two lines. */
@media (max-width: 899px) {
  .svhpage .svbanner__photo:not(.svbanner__photo--stack):not(.svbanner__photo--card) .svbanner__title {
    font-size: clamp(26px, 6.6vw, 34px);
    line-height: 1.2;
    max-width: 15ch;
  }
  .svhpage .svbanner__photo:not(.svbanner__photo--stack):not(.svbanner__photo--card) .svbanner__scrim {
    /* a local gradient under the type, not a veil over the whole picture */
    background: linear-gradient(0deg, rgba(var(--fs-black-rgb), 0.82) 0%, rgba(var(--fs-black-rgb), 0.45) 34%, rgba(var(--fs-black-rgb), 0) 62%);
  }
}

/* ---- 3. Our work: one case, one card, one swipe ----

   Ten cases, each a portrait plus three close-ups, stacked vertically at full
   width, made a 13,000px page — 15 screens of pure scrolling in which every
   case looked exactly like the one before it. Nothing is removed here: the
   portrait still leads the case, and the three close-ups move into a rail the
   thumb flicks through, with a counter so the visitor knows how many there are.
   Desktop keeps its side-by-side composition untouched. */
@media (max-width: 767px) {
  .workshow-gallery { padding-block: 56px; }
  .workshow-gallery__container { gap: 56px; }

  .workshow-item__head { margin-bottom: 16px; }
  .workshow-item__caption { font-size: 23px; }

  .workshow-item--natural.workshow-item--top .workshow-item__grid { gap: 16px; }

  .workshow-item--natural.workshow-item--top .workshow-item__teeth {
    flex-direction: row;
    /* RTL like every other rail on the site: the first close-up rests at the
       right edge and the next one peeks in from the left. The desktop row
       stays physically left-to-right (see the grid rules above). */
    direction: rtl;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* the rail runs to both screen edges so a half-visible next tile shows
       there is more — the gutters come back as scroll padding. width:auto
       matters: the column rule above pins width:100%, and a fixed width with
       two negative margins only slides the box sideways, which set the first
       close-up 48px in from the portrait's edge instead of level with it.
       stretch, because the column aligns flex-start: an auto width would
       shrink to the not-yet-loaded photos and main.js would read the tile
       order off that collapsed layout */
    width: auto;
    align-self: stretch;
    margin-inline: calc(clamp(24px, 6vw, 100px) * -1);
    padding-inline: clamp(24px, 6vw, 100px);
    scroll-padding-inline: clamp(24px, 6vw, 100px);
  }

  .workshow-item--natural.workshow-item--top .workshow-item__teeth::-webkit-scrollbar {
    display: none;
  }

  .workshow-item--natural.workshow-item--top .workshow-item__teeth-tile--center,
  .workshow-item--natural.workshow-item--top .workshow-item__teeth-tile--left,
  .workshow-item--natural.workshow-item--top .workshow-item__teeth-tile--right {
    flex: 0 0 88%;
    width: auto;
    scroll-snap-align: start;
  }

  /* One at a time, the frontal view is the one that says most about the
     case, so it leads; the side views follow. */
  .workshow-item--natural.workshow-item--top .workshow-item__teeth-tile--center { order: 1; }
  .workshow-item--natural.workshow-item--top .workshow-item__teeth-tile--left { order: 2; }
  .workshow-item--natural.workshow-item--top .workshow-item__teeth-tile--right { order: 3; }

  .workshow-item__teeth-tile img { cursor: zoom-in; }
}

/* Rail controls — built by js/main.js only where a rail actually exists, so
   the markup carries no dead elements on desktop. */
.wsrail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.wsrail__dots {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.wsrail__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(var(--fs-green-rgb), 0.22);
  transition: background 220ms ease-out, transform 220ms ease-out;
}

.wsrail__dot.is-active {
  background: var(--accent);
  transform: scale(1.28);
}

.wsrail__count {
  font-family: var(--font-latin);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-body);
  font-variant-numeric: tabular-nums;
  /* "2 / 3" is a Latin-ordered counter; inside the RTL document it would
     otherwise be reordered on screen and read as 3 / 2 */
  direction: ltr;
  unicode-bidi: isolate;
  /* at 360px the hint beside it squeezed it onto two lines, "1 /" over "3" */
  white-space: nowrap;
  flex-shrink: 0;
}

/* Shown once, on the first case only — a swipe affordance repeated ten times
   is clutter, and it disappears the moment the visitor swipes. */
.wsrail__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Assistant", sans-serif;
  font-size: 13px;
  color: var(--ink-body);
  transition: opacity 300ms ease-out;
}

.wsrail__hint svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  animation: wsrail-nudge 2200ms ease-in-out infinite;
}

.wsrail.is-swiped .wsrail__hint { opacity: 0; pointer-events: none; }

/* Below 375px dots, counter and hint no longer fit one line and the hint broke
   onto two; the tile peeking in from the edge already says there is more. */
@media (max-width: 374px) {
  .wsrail__hint { display: none; }
}

@keyframes wsrail-nudge {
  0%, 100% { transform: translateX(0); }
  55%      { transform: translateX(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .wsrail__hint svg { animation: none; }
}

.a11y-reduce-motion .wsrail__hint svg { animation: none; }

/* ---- Image lightbox (tap a close-up to see it large) ---- */
.imgbox[hidden] { display: none; }

.imgbox {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(var(--fs-black-rgb), 0.92);
  opacity: 0;
  transition: opacity 220ms ease-out;
}

.imgbox.is-open { opacity: 1; }

.imgbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  display: block;
}

.imgbox__close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  inset-inline-end: 16px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(var(--line-rgb), 0.45);
  background: rgba(var(--fs-black-rgb), 0.55);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.imgbox__close svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .imgbox { transition: none; }
}

/* ---- 4. Team: the whole doctor, one screen at a time ----

   Each doctor ran ~1,800px on a phone: portrait, name, role, years, three
   paragraphs of biography and two list panels — seven of those is 12,000px
   before the page's own sections. Nothing is cut. What a visitor needs to
   choose a doctor (face, name, field, experience, the opening paragraph and the
   treatment links) stays open; the depth folds behind one control. Desktop is
   untouched — there the two-column band shows all of it at once and reads well. */
.tmore {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms cubic-bezier(.2,.7,.3,1);
}

.tmore__inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 380ms;
}

.tmore.is-open { grid-template-rows: 1fr; }
.tmore.is-open .tmore__inner { visibility: visible; transition-delay: 0s; }

.tmore-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-family: "Assistant", sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
}

/* Physical borders, not logical ones: this is a down/up chevron, and under RTL
   the logical pair would rotate it into a sideways arrow instead. */
.tmore-toggle::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 300ms ease-out;
}

.tmore-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* A hairline under the open paragraph signals there is more below without
   spending a whole block of vertical space saying so. */
.tmore-toggle {
  border-block-start: 1px solid rgba(var(--line-rgb), 0.1);
  width: 100%;
  justify-content: flex-start;
  padding-top: 14px;
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .tmore, .tmore__inner, .tmore-toggle::after { transition: none; }
}

@media (max-width: 900px) {
  .tmember { padding: 44px 0; }
  .tmember__container { gap: 22px; }
  .tmember__text .tmember__para { margin-bottom: 14px; }
  .tmember__panels { margin-top: 18px; }
  .tmember__links { margin-top: 18px; }
}

/* ---- 5. Mobile conversion bar ----

   On a phone the "קבעו ייעוץ" button lives in the drawer and at the foot of the
   page; between them a visitor five screens into a treatment page has no way to
   act without hunting. The bar is deliberately quiet: one line, the section's
   own green and gold, no shadowbox, no animation beyond a single slide. It
   stays out of the way of the first screen — the hero has to stay clean — and
   it stands down again over the consultation form, whose own submit button it
   would otherwise sit on top of. */
.mcta {
  position: fixed;
  z-index: 140;
  inset-inline: 0;
  bottom: 0;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  background: rgba(var(--fs-black-rgb), 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(var(--line-rgb), 0.28);
  transform: translateY(110%);
  transition: transform 320ms cubic-bezier(.2,.7,.3,1);
}

.mcta.is-live { display: flex; }
.mcta.is-visible { transform: translateY(0); }

.mcta__book {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 12px;
  background: linear-gradient(100deg, var(--accent), var(--accent));
  color: var(--ink);
  font-family: "Assistant", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.mcta__wa {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(var(--line-rgb), 0.45);
  color: var(--accent);
  text-decoration: none;
}

.mcta__wa svg { width: 22px; height: 22px; }

/* The bar owns the bottom of the screen while it is up, so the page gets the
   same amount of room back at its foot — otherwise it covers the last line of
   the footer, which on this site carries the clinic's address and phone. */
body.has-mcta .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

/* Nothing else may share the bottom edge with it. */
body.has-mobile-nav .mcta { display: none; }

@media (min-width: 901px) { .mcta { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .mcta { transition: none; }
}

.a11y-reduce-motion .mcta { transition: none; }

/* ---- 6. Accessibility button: out of everyone's way ----

   At bottom:16px it sat on gallery photographs, on the doctors' treatment links
   and, once the conversion bar existed, on the bar itself. It keeps its corner
   and its function; it just respects the phone's own safe area and steps up
   when the bar is showing. */
@media (max-width: 640px) {
  .a11y-fab {
    bottom: calc(16px + env(safe-area-inset-bottom));
    inset-inline-end: 14px;
    width: 46px;
    height: 46px;
    box-shadow: 0 6px 18px rgba(var(--shadow-rgb), 0.34);
    transition: transform 320ms cubic-bezier(.2,.7,.3,1),
                box-shadow 200ms ease-out, background 200ms ease-out;
  }
  .a11y-fab svg { width: 21px; height: 21px; }

  /* Parked above the bar it floated over the ends of the body-text lines — in
     RTL the lines end on its side — for the whole length of every page. While
     the bar is up the button sits in the bar's own row instead, in room the bar
     keeps free at its end; it is the same button, and floats again wherever the
     bar stands down (the first screen, the forms). */
  .mcta { padding-inline-end: calc(14px + 46px + 10px); }
  body.has-mcta-up .a11y-fab { transform: translateY(7px); }
}

/* While a full-screen overlay is up, the floating button is not reachable
   anyway and only adds visual noise on top of the image. */
body.has-imgbox .a11y-fab,
body.has-imgbox .mcta { display: none; }

/* ---- 7. Mobile typography ----

   The desktop scale was carried down proportionally, which left running text at
   13–14.5px on a phone — readable at arm's length on a 27" monitor, not for a
   55-year-old reading a treatment page one-handed. Body copy comes up to a 15px
   floor with a looser leading; genuinely secondary microcopy (legal notes,
   disclaimers, captions) stays smaller but no longer drops under 14px. Nothing
   above 900px is touched. */
@media (max-width: 900px) {
  .tech-item__desc,
  .journey__step-desc,
  .svwhen__note { font-size: 15px; line-height: 1.6; }

  .why__feature-desc,
  .treatment-card__desc,
  .svmyths__myth,
  .consult-form__checkbox-text,
  .site-footer__tagline,
  .site-footer__address { font-size: 15.5px; line-height: 1.6; }

  .consult-form__note,
  .svba__disclaimer,
  .pageoutro__disclaimer,
  .site-footer__copyright,
  .svhpage__cta-note,
  .a11y-panel__hint { font-size: 14px; line-height: 1.55; }

  .a11y-panel__footer-note { font-size: 13.5px; line-height: 1.5; }

  .abmap__caption,
  .tgroup__caption,
  .voices__note,
  .ablab__note,
  .abgal__note { font-size: 14.5px; line-height: 1.55; }

  /* The step-by-step treatment journeys and the implant anatomy legend are the
     explanatory heart of those pages, not footnotes — they read as body copy. */
  .svjourney__body p,
  .svanatomy__legend-body { font-size: 15px; line-height: 1.62; }

  /* A phone line already holds about 40 characters at 16px; the constraint
     that matters on a narrow screen is leading, not measure. */
  .svhpage__lead p,
  .svbanner__lead,
  .treatments__subtitle,
  .pagehero__text { line-height: 1.7; }
}

/* H1 and H2 read at nearly the same size once both hit the low end of their
   clamps, which flattens the page — a visitor scanning a treatment page can no
   longer tell the title from a section heading. Re-open the gap on phones. */
@media (max-width: 640px) {
  .tor-hero__sub { font-size: clamp(23px, 6vw, 30px); }
  .tor-hero__title { font-size: clamp(40px, 11.5vw, 56px); }
}

/* ---- 8. Touch targets ----

   Every control a thumb has to find gets the 44px it needs. Sizes below were
   measured on the live pages, not assumed: the play button on the testimonial
   wall was 38px, the gallery arrows 34px, the footer's accessibility button
   36px, and the doctors' index links 18px. */
@media (max-width: 900px) {
  .logo { display: inline-flex; align-items: center; min-height: 44px; }

  .about__nav { width: 44px; height: 44px; }
  .about__nav svg { width: 20px; height: 20px; }

  .voices__wall .video-frame__play { width: 56px; height: 56px; }
  .voices__wall .video-frame__play svg { width: 21px; height: 21px; }

  .site-footer__a11y-btn { height: 44px; padding: 0 18px; border-radius: 22px; }

  /* The doctors' index is a list of names, each one a link — at 18px tall they
     were a coin toss between two adjacent doctors. */
  .tindex a,
  .tindex li > a { display: inline-flex; align-items: center; min-height: 44px; }

  .ab-link { min-height: 44px; display: inline-flex; align-items: center; }

  .site-footer__nav a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 640px) {
  .voices__wall .video-frame__play { width: 60px; height: 60px; }
}

/* ---- 9. Mobile spacing rhythm ----

   Most sections had already been brought down to 64px of block padding for
   phones, but three families were never included and still carried their
   desktop air: the treatment journeys, technology and FAQ bands at 96px, the
   about-page sections at 76px, and the team/outro bands at 72px. Two of those
   back to back put nearly 200px of empty ground between one thought and the
   next — a whole swipe spent on nothing. This brings the stragglers onto the
   same rhythm and then takes the whole set down one step on small phones.
   Premium design keeps its air; it just should not cost a separate swipe. */
@media (max-width: 900px) {
  .svjourney, .svtech, .svfaq,
  .abloc, .abphil, .abappr, .abteam, .abtech, .ablab, .abgal, .abwhy,
  .tcreed, .tbeyond, .pageoutro { padding-block: 64px; }

  .abappr { padding-top: 0; }
  .svhpage { padding-top: 0; }
}

@media (max-width: 640px) {
  .svjourney, .svtech, .svfaq, .svrows, .svrisk, .svwhen, .svplan,
  .svchanges, .svba, .svstepsec, .svgum, .svmyths, .svtext,
  .abloc, .abphil, .abteam, .abtech, .ablab, .abwhy,
  .tcreed, .tbeyond, .tindex, .pageoutro,
  .why, .about, .treatments, .testimonials, .consult, .location,
  .voices, .journey, .patients, .team { padding-block: 54px; }

  .abappr, .abintro, .abgal, .svhpage { padding-bottom: 54px; }

  /* The band where one section's closing line meets the next section's
     heading is where the emptiness was most obvious. */
  .pageoutro { padding-block: 48px; }
}

/* The text-only page heroes (team, our work, testimonials) ended in ~180px of
   empty ground holding nothing but the scroll cue, on a page whose next section
   starts immediately below. The cue stays — it is part of the page's manner —
   but it stops being the tallest thing on the first screen. */
@media (max-width: 900px) {
  .pagehero__content { padding: 56px 26px 44px; }
  .scrolldown--flow { margin-top: 22px; }
}

@media (max-width: 640px) {
  .pagehero__content { padding: 48px 24px 36px; }
  .scrolldown--flow { margin-top: 18px; }
}

/* ---- 10. Home: the treatment grid ----

   Nine cards at full width ran five screens on a phone. No treatment is
   removed and no description is cut — the cards simply stop carrying desktop
   padding, and the icon comes down to a size that suits a 44px-tall card
   header rather than a 300px-wide desktop tile. */
@media (max-width: 640px) {
  .treatments__grid { gap: 14px; }

  .treatment-card {
    padding: 22px 20px 20px;
    border-radius: 16px;
  }

  .treatment-card__icon { margin-bottom: 12px; }
  .treatment-card__icon img { width: 40px; height: 40px; }
  .treatment-card__title { margin-bottom: 8px; }
  .treatment-card__desc { margin-bottom: 14px; }
}

/* ---- 11. Typography: the last of the small print ----

   These four are the step-by-step explanations of what a treatment actually
   involves — the passages a nervous patient reads most closely — and they were
   the smallest type on their pages. The higher-specificity selectors match the
   desktop rules they have to sit after (.svjourney--emax .svjourney__body p is
   a three-class selector). The accessibility panel's own controls are raised
   too: a widget for people who need larger text should not be set in 13px. */
@media (max-width: 900px) {
  .svjourney--emax .svjourney__body p,
  .svjourney__body p,
  .svsteps__item p,
  .svanatomy__legend-body p,
  .svanatomy__legend-body { font-size: 15px; line-height: 1.62; }

  .a11y-toggle { font-size: 14.5px; }
  .a11y-panel__hint { font-size: 14.5px; }
}

/* ---- 12. The last of the small touch targets ----

   The scroll cue is a 26px-wide ring by design — the ring is the graphic, so it
   keeps its size and gains an invisible 44px pad around it instead. The rail
   dots are the same idea: a 7px dot with a thumb-sized reach. */
@media (max-width: 900px) {
  .scrolldown { position: relative; }

  .scrolldown::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
  }

  .wsrail__dots { gap: 0; }

  .wsrail__dot {
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wsrail__dot::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(var(--fs-green-rgb), 0.22);
    transition: background 220ms ease-out, transform 220ms ease-out;
  }

  .wsrail__dot.is-active { background: none; transform: none; }

  .wsrail__dot.is-active::before {
    background: var(--accent);
    transform: scale(1.28);
  }
}

/* ---- 13. The drawer's own touch targets ----

   The drawer is the only navigation a phone gets, so every row in it has to be
   a comfortable target. The nine service links sat at 40px and the phone and
   WhatsApp lines at 19px — the latter two being exactly the rows a visitor
   reaches for when they have decided to make contact. The panel already
   scrolls, so the extra height costs nothing but a little more scrolling with
   the services list open. */
.mobile-nav__sub a { padding: 12px 14px; min-height: 44px; }

.mobile-nav__toggle { width: 44px; height: 44px; }

.mobile-nav__contact {
  gap: 8px;
  margin-top: 8px;
}

.mobile-nav__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
}

/* ---- 14. Reveal animations, at phone pace ----

   The reveal transitions were tuned for a desktop scroll, where a block enters
   slowly and the visitor's eye is still elsewhere. On a phone the same 800ms
   fade with a stagger of up to half a second runs while the block is already
   being read: scrolling the home page at a normal flick pace left most of what
   was on screen under 60% opacity. The animations stay — this only stops them
   running longer than the visitor's own scroll. The decorative map on the about
   page keeps its full choreography; nothing there is text. */
@media (max-width: 900px) {
  [data-reveal],
  [data-reveal] * {
    transition-duration: 420ms !important;
    transition-delay: 0ms !important;
  }

  /* One short stagger is still worth having — it is what makes a row of cards
     feel composed rather than switched on. It just has to finish. */
  [data-reveal] > *:nth-child(2) { transition-delay: 60ms !important; }
  [data-reveal] > *:nth-child(3) { transition-delay: 120ms !important; }
  [data-reveal] > *:nth-child(4) { transition-delay: 180ms !important; }
  [data-reveal] > *:nth-child(n+5) { transition-delay: 220ms !important; }

  /* The marks keep their running order too. The blanket rule above zeroes
     every delay, which left a row of eight icons switching on as one — the
     one thing the micro-animation exists to avoid. A third of the desktop
     step still reads as a sequence and still finishes inside the scroll. */
  [data-reveal] .sv-icon-badge,
  [data-reveal] .tech-item__icon,
  [data-reveal] .treatment-card__icon,
  [data-reveal] .location__fact-icon,
  [data-reveal] .journey__marker,
  [data-reveal] .why__feature-num,
  [data-reveal] .svjourney__num,
  [data-reveal] .svsteps__num,
  [data-reveal] .svpoints__num,
  [data-reveal] .abtech__num,
  [data-reveal] .tbeyond__num,
  [data-reveal] .svchanges__num {
    transition-delay: calc(var(--mark-i, 0) * 26ms + 90ms) !important;
  }

  /* The map is drawing, not text, and it is the one place on the site where
     the order *is* the content — the country, then the routes down it, then
     the towns. Zeroing its delays collapsed all three into one flat fade, so
     it keeps the choreography and only loses the length. --seq is written
     once at load, next to --mark-i (see js/main.js). */
  .abmap[data-reveal] *,
  .abmap.is-revealed * { transition-duration: 760ms !important; }

  .abmap.is-revealed .abmap__stroke {
    transition-duration: 1100ms !important;
    transition-delay: 80ms !important;
  }

  .abmap.is-revealed .abmap__fill,
  .abmap.is-revealed .abmap__relief { transition-delay: 420ms !important; }

  .abmap.is-revealed .abmap__arc {
    transition-delay: calc(620ms + var(--seq, 0) * 55ms) !important;
  }

  .abmap.is-revealed .abmap__dots > * {
    transition-delay: calc(780ms + var(--seq, 0) * 45ms) !important;
  }

  .abmap.is-revealed .abmap__label {
    transition-delay: calc(840ms + var(--seq, 0) * 45ms) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal] * {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }
}

/* ============================================================================
   HOMEPAGE CONVERSION PASS — trust-first running order (2026-09-01)

   New homepage-only components, plus the small adjustments the reordering
   asked of blocks that already existed. Nothing here is loaded by another
   page: every selector below is either a homepage section or scoped to one.
   ========================================================================= */

/* ---- Hero: the direct line ----

   Under the two buttons, not inside them. For an audience that still treats a
   phone call as the first channel, the number has to be on the first screen —
   it used to appear at screen 20.2 — but it is not a third button competing
   with the consultation CTA. */

.hero-reach {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  font-family: "Assistant", sans-serif;
  font-size: 15.5px;
  color: var(--ink-body);
}

.hero-reach__label {
  font-weight: 300;
  opacity: 0.85;
}

.hero-reach__sep {
  width: 1px;
  height: 16px;
  background: rgba(var(--accent-rgb), 0.45);
}

.hero-reach__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.4);
  padding-bottom: 2px;
  transition: border-color 200ms ease, color 200ms ease;
}

.hero-reach__link:hover,
.hero-reach__link:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.hero-reach__link svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* ---- 2. External trust band ----

   Two platforms, their real numbers, and a link to each. It reads as one
   verification layer rather than two review sections, and it stays a band:
   the reviews themselves are read further down, next to the video. */

.trustband {
  --tb-dark: var(--fs-brown);
  position: relative;
  background: var(--fs-white);
  padding-block: clamp(44px, 5vw, 66px);
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.18);
}

.trustband__container {
  max-width: 1160px;
  margin: 0 auto;
}

.trustband__head {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 34px);
}

.trustband__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--accent);
}

.trustband__title {
  margin: 0;
  font-size: clamp(21px, 2.5vw, 29px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--tb-dark);
}

.trustband__sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.trustsrc {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "score platform"
    "score stars"
    "go    count";
  align-items: center;
  column-gap: 18px;
  row-gap: 2px;
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(var(--line-rgb), 0.34);
  border-radius: 18px;
  background: linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 100%);
  color: var(--tb-dark);
  text-decoration: none;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.trustsrc:hover,
.trustsrc:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 16px 36px -26px rgba(var(--shadow-rgb), 0.6);
  transform: translateY(-2px);
}

.trustsrc__score {
  grid-area: score;
  align-self: center;
  font-family: var(--font-latin);
  font-size: clamp(38px, 4.6vw, 52px);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.trustsrc__platform {
  grid-area: platform;
  align-self: end;
  font-family: var(--font-latin);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tb-dark);
}

.trustsrc__stars {
  grid-area: stars;
  align-self: start;
  justify-self: start;
}

.trustsrc__stars svg {
  width: 15px;
  height: 15px;
}

.trustsrc__count {
  grid-area: count;
  font-size: 14.5px;
  font-weight: 400;
  color: rgba(var(--ink-rgb), 0.7);
}

.trustsrc__go {
  grid-area: go;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.trustsrc__go svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.trustband__note {
  margin: 18px auto 0;
  max-width: 78ch;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.66);
}

/* The two numbers that describe the clinic rather than its reviews. They used
   to sit in the hero, where they had no room to say where they came from. */

.trustband__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(26px, 3vw, 36px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid rgba(var(--line-rgb), 0.24);
}

.trustfact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.trustfact strong {
  font-family: var(--font-latin);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1;
  color: var(--tb-dark);
}

.trustfact span {
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(var(--ink-rgb), 0.66);
}

/* ---- 3. Team: the lead of the medical team, marked on his card ---- */

.team__card-lead {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--accent);
}

/* ---- 4. Flagship case ----

   The one dark section between the hero and the footer. It carries the weight
   the deleted `why` block used to carry visually, and it is the emotional peak
   of the page: one patient, large, in her own voice. */

.fcase {
  --ts-dark: var(--fs-brown);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 120% at 18% 30%, rgba(var(--fs-sage-rgb), 0.16), transparent 62%),
    linear-gradient(162deg, var(--fs-green) 0%, var(--fs-brown) 100%);
  padding-block: clamp(64px, 7vw, 104px);
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.fcase__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fcase__bg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fcase__glow {
  position: absolute;
  inset-inline-start: -10%;
  top: -20%;
  width: 70%;
  height: 90%;
  background: radial-gradient(circle, rgba(var(--fs-green-rgb), 0.22) 0%, rgba(var(--fs-green-rgb), 0) 62%);
}

/* The text track used to be 1fr, which made it 820px at 1440 and 950px at
   1600 while the text inside it only ever measures ~500px. The leftover sat on
   one side and the whole pair read as pushed to the left edge of the section.
   Sizing the track to the text it holds and centring the two tracks in the
   container puts the composition on the page's centre line instead, without
   changing the width of either the text or the portrait. */
.fcase__container {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(280px, 360px);
  justify-content: center;
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}

/* the quote and the note are read, not scanned — they keep a measure rather
   than running the full width of a 1400px column.
   No auto inline margin here: inline-start is the RIGHT edge under dir="rtl",
   so `margin-inline-start: auto` pushed the block away from the reading edge
   and opened the gap this rule now avoids. The centred track does the job. */
.fcase__text {
  max-width: 640px;
}

.fcase__eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--accent);
}

.fcase__title {
  margin: 0;
  font-family: var(--font-he);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 300;
  line-height: 1.18;
  color: var(--ink);
}

.fcase__title em {
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
}

.fcase__rule {
  width: 62px;
  height: 1px;
  margin: 26px 0;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0));
}

.fcase__quote {
  margin: 0;
  position: relative;
  padding-inline-start: 30px;
  border-inline-start: 1px solid rgba(var(--line-rgb), 0.4);
}

.fcase__quote p {
  margin: 0;
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
}

.fcase__mark {
  width: 26px;
  height: auto;
  margin-bottom: 12px;
  color: rgba(var(--accent-rgb), 0.55);
}

.fcase__meta {
  margin: 22px 0 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-body);
}

.fcase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.fcase__media {
  position: relative;
}

/* ---- 5. Early mini-form ----

   Two fields. The dropdown of twelve clinical options belongs to the form at
   the foot of the page, where the visitor has read enough to answer it; here
   it would ask a patient to diagnose himself before he has spoken to anyone. */

.quickform {
  --cs-dark: var(--fs-brown);
  position: relative;
  background: radial-gradient(circle at 86% 10%, rgba(var(--fs-white-rgb), 0.9) 0%, rgba(var(--fs-white-rgb), 0) 44%),
    linear-gradient(150deg, var(--fs-ivory) 0%, var(--fs-ivory) 60%, var(--fs-ivory) 100%);
  padding-block: clamp(46px, 5vw, 72px);
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.quickform__container {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 420px);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.quickform__title {
  margin: 0 0 14px;
  font-size: clamp(24px, 3vw, 35px);
  font-weight: 500;
  line-height: 1.24;
  color: var(--cs-dark);
}

.quickform__lead {
  margin: 0;
  max-width: 54ch;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.78);
}

.quickform__marks {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quickform__marks li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(var(--ink-rgb), 0.78);
}

.quickform__marks li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.quickform__form {
  background: var(--fs-white);
  border: 1px solid rgba(var(--line-rgb), 0.34);
  border-radius: 20px;
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: 0 22px 50px -34px rgba(var(--shadow-rgb), 0.5);
}

.quickform__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 18px;
}

.quickform__submit {
  width: 100%;
}

.quickform__note {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(var(--ink-rgb), 0.62);
}

.quickform__note a {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.5);
}

/* ---- 10. Clinic block: the technology strip, moved here from the catalogue,
   where it now sits next to the rooms and the scanner it describes ---- */

.about {
  --tr-dark: var(--fs-brown);
  --tr-dark-2: var(--fs-brown);
}

.about__tech {
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: clamp(40px, 4vw, 60px);
  border-top: 1px solid rgba(var(--line-rgb), 0.24);
}

.about__tech[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.about__tech.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---- 11. Final form: room to say it in your own words ---- */

.consult-form__textarea {
  height: auto;
  min-height: 96px;
  padding: 14px 18px;
  line-height: 1.55;
  resize: vertical;
}

.consult-form__label em {
  font-style: normal;
  font-weight: 400;
  color: rgba(var(--ink-rgb), 0.74);
}

/* ---- Responsive ---- */

@media (max-width: 1099px) {
  .fcase__container,
  .quickform__container { grid-template-columns: 1fr; }
  /* width alongside the cap on purpose: auto inline margins switch off grid
     stretch, and the frame has no in-flow content to size itself from */
  .fcase__media { width: 100%; max-width: 340px; margin-inline: auto; }
}

@media (max-width: 767px) {
  .trustband__sources { grid-template-columns: 1fr; }

  .trustsrc {
    grid-template-areas:
      "score platform"
      "score stars"
      "score count";
    row-gap: 3px;
    column-gap: 16px;
  }

  /* the link target is the whole card on a phone; a separate "go" line inside
     it is a control that cannot be pressed on its own */
  .trustsrc__go { display: none; }

  .trustband__note { text-align: start; }

  .fcase__actions .btn { width: 100%; }
  .fcase__media { max-width: 300px; }
}

@media (max-width: 900px) {
  /* the hero's direct line stays on one row at every phone width */
  .hero-reach { gap: 10px 12px; font-size: 15px; }
  .hero-reach__label { width: 100%; margin: 0; }
}

/* ---- Homepage treatment grid: six cells, not nine ----

   The catalogue was the longest block on the page — 1 871 characters and five
   phone screens for nine treatments, sitting between the visitor and the
   proof. Five directions and a door to the rest cover the same ground.

   Six cells want three columns, not the four the services page uses, and on a
   phone a stack of six tall cards is the same wall in a narrower frame: there
   the card lies down into a row, so the whole set is read in one screen and
   the arrow is still a 44px target. */

.treatments__grid--six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1199px) {
  .treatments__grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .treatments__grid--six {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .treatments__grid--six .treatment-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "icon title arrow"
      "icon desc  arrow";
    align-items: center;
    column-gap: 16px;
    row-gap: 4px;
    text-align: start;
    padding: 18px 20px;
  }

  .treatments__grid--six .treatment-card__icon {
    grid-area: icon;
    height: 40px;
    margin: 0;
  }

  .treatments__grid--six .treatment-card__title {
    grid-area: title;
    align-self: end;
    margin: 0;
    font-size: 17px;
  }

  .treatments__grid--six .treatment-card__desc {
    grid-area: desc;
    align-self: start;
    font-size: 13.5px;
    line-height: 1.45;
    /* the line that lets a visitor recognise his own situation has to finish;
       clamping it at two cut every card mid-sentence, and it was always the
       second half that carried the point */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* the label collapses to the chevron alone — the card itself is the link */
  .treatments__grid--six .treatment-card__link {
    grid-area: arrow;
    margin: 0;
    padding: 0;
    border: 0;
    width: 24px;
    justify-content: center;
  }

  .treatments__grid--six .treatment-card__link > span { display: none; }

}

/* ---- Homepage: the door to the treatments that are not in the grid ---- */

.treatments__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: clamp(28px, 3vw, 40px);
  text-align: center;
}

.treatments__more-note {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  color: var(--tr-dark-2);
  opacity: 0.82;
}

.treatments__more[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.treatments__more.is-revealed { opacity: 1; transform: translateY(0); }

/* ---- Location: Instagram and Facebook are one row, not two ----

   Everything above them removes a practical barrier to walking in — the
   address, the hours, the phone, the route. These two are the social profiles
   and do not need the same weight, or a full-width row each. */

.location__social {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* ---- Clinic block: the technology strip lies down on a phone ----

   Six centred tiles stacked two-up ran to 836px — an eighth of the page for a
   supporting list. As rows they read in one screen and keep every word. */

@media (max-width: 767px) {
  .about__tech .tech-row {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .about__tech .tech-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-areas:
      "icon title"
      "icon desc";
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    text-align: start;
    padding: 14px 0;
    border-bottom: 1px solid rgba(var(--line-rgb), 0.18);
  }

  .about__tech .tech-item:last-child { border-bottom: 0; }

  .about__tech .tech-item__icon {
    grid-area: icon;
    height: 30px;
    margin: 0;
  }

  .about__tech .tech-item__title {
    grid-area: title;
    align-self: end;
    margin: 0;
  }

  .about__tech .tech-item__desc {
    grid-area: desc;
    align-self: start;
  }
}

/* ---- Text links that are real controls get a real target ----

   The phone number and WhatsApp in the hero, and the phone under the mini
   form, are 22px of text. The hit area is grown with a pseudo-element rather
   than with padding so the gold underline stays under the word instead of
   floating 11px below it. */

.hero-reach__link,
.quickform__note a,
.revwidget__verify {
  position: relative;
}

.hero-reach__link::after,
.quickform__note a::after,
.revwidget__verify::after {
  content: '';
  position: absolute;
  inset-block: -12px;
  inset-inline: -8px;
}

/* ---- Team card: what this person does in your treatment ----

   The cards answered "who works here". This line answers the question the
   visitor is actually holding — which part of my treatment is his. Text is a
   one-line compression of each doctor's own published profile on team.html.
   It sits under the specialty and above the gold experience line, which stays
   pinned to the foot of the card. */

.team__card-does {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--ink-body);
}

@media (max-width: 767px) {
  .team__card-does { font-size: 13px; }
}

/* ---- Location: the one fact in this list the clinic pays for ----

   Parking in Tel Aviv is a real errand, and the clinic covering it is a
   service rather than an offer — so it gets typographic weight inside the
   existing list, not a badge. The lead clause carries the block's own gold;
   the sentence after it says plainly who pays. */

.location__fact-lead {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--accent);
}

/* ============================================================================
   SITE TRUST & CONVERSION PASS — treatment and content pages (2026-09-02)

   The homepage pass established the running order "who you are → proof →
   action". These components carry the same reasoning onto the inner pages,
   without turning them into copies of the homepage: each page keeps its own
   sections, and only gains the pieces its own visitor was missing.
   ========================================================================= */

/* ---- Hero: the direct line on an inner page ----
   The .hero-reach component is authored for a dark hero and the treatment
   heroes are dark too, so only the centring differs. */

.svhpage__cta .hero-reach { justify-content: center; text-align: center; }

/* The E-max hero is a split panel whose copy runs from the start edge, so its
   direct line follows the button rather than centring under it. */
.svohero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* ---- "They already told me it can't be done" ----

   A full-mouth visitor very often arrives having been refused somewhere else,
   and disqualifies themselves before reading anything. One aside, inside the
   text they are already reading, is enough — it does not deserve a section of
   its own. Content is a compression of Dr. Lancet's published profile. */

.svsaid {
  margin-top: 26px;
  padding: 20px 22px;
  border-inline-start: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.07);
  border-radius: 12px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.svsaid__title {
  margin: 0 0 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

.svsaid p:last-child { margin-bottom: 0 !important; }

.svsaid a {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.4);
  white-space: nowrap;
}

.svsaid a:hover, .svsaid a:focus-visible { border-bottom-color: var(--line); }

/* ---- Journey: who performs this stage ----

   The timeline used to answer "what happens" and leave "to whom am I actually
   handing this" open. Naming the doctor per stage answers both the fear of
   being passed between strangers and the question of who is accountable —
   and it does it inside a block that already existed, rather than adding a
   second doctors section under the homepage's one. */

.svjourney__lead {
  max-width: 720px;
  margin: 16px auto 0;
  font-family: "Assistant", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

.svjourney__who {
  margin: 12px 0 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: var(--ink-body) !important;
}

.svjourney__who a {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.35);
  transition: border-color 200ms ease;
}

.svjourney__who a:hover,
.svjourney__who a:focus-visible { border-bottom-color: var(--line); }

.svjourney__foot {
  max-width: 760px;
  margin: 28px auto 0;
  font-family: "Assistant", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

.svjourney__foot a {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.35);
}

/* ---- Mid-page step, not a second form ----

   After the stages the visitor is at peak "and what about mine?". A whole
   duplicate form there would compete with the real one at the foot of the
   page, so this is one sentence, the existing button, and the phone number
   for the people who will never fill a form in. */

.svmid {
  max-width: 760px;
  margin: clamp(34px, 4vw, 52px) auto 0;
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 34px);
  border: 1px solid rgba(var(--line-rgb), 0.32);
  border-radius: 18px;
  background: linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 100%);
  text-align: center;
  font-family: "Assistant", sans-serif;
}

.svmid__text {
  margin: 0 0 18px;
  font-size: clamp(16px, 1.9vw, 19px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}

.svmid__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.svmid__tel {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid rgba(var(--line-rgb), 0.45);
  padding-bottom: 2px;
}

.svmid__tel::after {
  content: '';
  position: absolute;
  inset-block: -13px;
  inset-inline: -10px;
}

.svmid__tel:hover, .svmid__tel:focus-visible { border-bottom-color: var(--line); }

/* ---- The one errand the clinic takes off the visitor ----

   Parking in Tel Aviv is a real cost and a real hassle, and the clinic paying
   for it is service design rather than a promotion — so it sits at the moment
   of committing to come, in the form's own quiet type, not in a badge. */

.consult-form__perk {
  margin: 10px 0 0;
  font-family: "Assistant", sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-body);
}

.consult-form__perk strong {
  font-weight: 600;
  color: var(--accent);
}

@media (max-width: 767px) {
  .svmid__actions { flex-direction: column; gap: 14px; }
  .svjourney__who { font-size: 13.5px !important; }
}

/* ---- Who performs this treatment ----

   Every treatment page answered "what happens" and left "to whom am I
   handing this" open, while the answer was sitting on team.html one click
   away. This block puts the one or two people who actually do this treatment
   on the page that sells it — with the sentence that matters to a stranger
   (which part of my treatment is theirs), not a CV. Each page carries its own
   doctors and its own sentences, so the component repeats but the pages do
   not read alike. */

.svdocs {
  background: var(--fs-white);
  padding-block: clamp(52px, 6vw, 88px);
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
}

.svdocs__container { max-width: 1060px; margin: 0 auto; }

.svdocs__head { text-align: center; margin-bottom: clamp(28px, 3.4vw, 42px); }

.svdocs__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--accent);
}

.svdocs__title {
  margin: 0;
  font-family: var(--font-he);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

.svdocs__lead {
  max-width: 680px;
  margin: 16px auto 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

.svdocs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.svdoc {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid rgba(var(--line-rgb), 0.12);
  border-radius: 18px;
  background: linear-gradient(150deg, var(--fs-white) 0%, var(--fs-ivory) 100%);
  text-decoration: none;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.svdoc:hover,
.svdoc:focus-visible {
  border-color: rgba(var(--line-rgb), 0.6);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(var(--shadow-rgb), 0.08);
}

.svdoc__photo {
  flex: none;
  width: 88px;
  height: 110px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--fs-ivory);
}

.svdoc__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

.svdoc__body { display: block; min-width: 0; }

.svdoc__lead {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 5px;
}

.svdoc__name {
  display: block;
  font-family: var(--font-he);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.svdoc__role {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-body);
}

.svdoc__does {
  display: block;
  margin-top: 9px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-body);
}

.svdoc__years {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.svdocs__note {
  max-width: 760px;
  margin: clamp(22px, 2.6vw, 30px) auto 0;
  padding: 18px 22px;
  border-inline-start: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.07);
  border-radius: 12px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
}

.svdocs__note a, .svdocs__lead a {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.4);
}

@media (max-width: 520px) {
  .svdoc { gap: 14px; padding: 16px; }
  .svdoc__photo { width: 72px; height: 92px; }
  .svdoc__name { font-size: 17px; }
}

/* ---- Team page: which of these seven is mine ----

   Seven long profiles in a fixed order ask the visitor to read a surgeon's
   biography before reaching the periodontist their bleeding gums actually
   need. This is the shortcut, and every line in it is lifted from the
   "when to come to them" panel already published inside that doctor's own
   section further down the page — a map of existing content, not new claims. */

.troute {
  background: var(--fs-white);
  padding-block: clamp(48px, 5.5vw, 78px);
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.18);
}

.troute__container { max-width: 940px; margin: 0 auto; }

.troute__head { text-align: center; margin-bottom: clamp(24px, 3vw, 36px); }

.troute__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--accent);
}

.troute__title {
  margin: 0;
  font-family: var(--font-he);
  font-size: clamp(23px, 2.9vw, 33px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

.troute__lead {
  max-width: 620px;
  margin: 14px auto 0;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

.troute__list { list-style: none; margin: 0; padding: 0; }

.troute__list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.1);
}

.troute__list li:last-child { border-bottom: none; }

.troute__case {
  flex: 1 1 auto;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
}

.troute__to {
  flex: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid rgba(var(--line-rgb), 0.4);
  transition: border-color 200ms ease;
}

.troute__to:hover, .troute__to:focus-visible { border-bottom-color: var(--line); }

.troute__note {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding: 18px 22px;
  border-inline-start: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.07);
  border-radius: 12px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
}

@media (max-width: 640px) {
  .troute__list li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0; }
  .troute__case { font-size: 15px; }
}

/* ---- Our work: what the gallery is, and what it is not ----

   Three short columns before the photographs. The middle one names the
   absence of "before" frames, which is the question a stranger asks silently
   while scrolling; answering it first costs one paragraph and buys more than
   another eleven photographs would. */

.wnote {
  background: var(--fs-white);
  padding-block: clamp(44px, 5vw, 70px);
  padding-inline: clamp(24px, 6vw, 100px);
  font-family: "Assistant", sans-serif;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.18);
}

.wnote__container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(22px, 3vw, 40px);
}

.wnote__item { padding-inline-start: 18px; border-inline-start: 2px solid rgba(var(--line-rgb), 0.45); }

.wnote__title {
  margin: 0 0 9px;
  font-family: var(--font-he);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.wnote__item p {
  margin: 0;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

.wnote__item a {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.4);
}

/* The captions the index used to sit beside are gone, so the number no longer
   needs to hold a line of its own height. */
.workshow-item__head { margin-bottom: 22px; }


/* A single doctor should not stretch to the full width of a two-up grid. */
.svdocs__grid--single { max-width: 560px; margin-inline: auto; }

/* ---- Aesthetics page: the route out of each card ----

   Each complaint card ends by naming the page that treats it, so the visitor
   can follow their own symptom instead of guessing which treatment name
   applies to them. */

.svchanges__go {
  margin: 12px 0 0 !important;
  font-size: 14px !important;
}

.svchanges__go a {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.4);
  transition: border-color 200ms ease;
}

.svchanges__go a:hover,
.svchanges__go a:focus-visible { border-bottom-color: var(--line); }

/* ---- About: the parking line, at the foot of the practical block ----

   The three cards above it say what the clinic does; this says the one thing
   the clinic pays for. It sits on the dark band, so it borrows that band's
   own light type rather than the form's. */

.abwhy__note {
  max-width: 760px;
  margin: clamp(26px, 3vw, 38px) auto 0;
  text-align: center;
  font-family: "Assistant", sans-serif;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-body);
}

.abwhy__note strong { font-weight: 600; color: var(--accent); }

/* ---- Visualization sliders: the label that has to be readable ----

   The sliders on the rehabilitation and E-max pages are explanations, not
   results. The caption under each one carries that in plain words, in the
   same gold the rest of the section uses for its own labels — visible at a
   glance, and not blown up into a warning. */

.svba__sim {
  display: inline-block;
  margin-inline-end: 8px;
  padding: 3px 10px;
  border: 1px solid rgba(var(--line-rgb), 0.5);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  vertical-align: middle;
}

.svba__lead strong { font-weight: 600; color: var(--ink); }

.svba__lead a {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.4);
}

/* ---- What the first visit actually costs ----

   The consultation and the CT are free, and that is the last fact a visitor
   weighs before typing a phone number — so it sits at the head of every form
   on the site, in the same hairline-gold pill the pages already use for a
   quiet label (.svba__sim), not in a promotional band. Text stays in the
   form's own dark green so it reads at full contrast; only the frame and the
   mark are gold. One line, never wrapped — the size steps down on narrow
   phones so it still fits on a single line at 320px. */

.consult-form__free {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid rgba(var(--line-rgb), 0.5);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  font-family: "Assistant", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
}

.consult-form__free svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

/* The home-page mini-form is a white card, not a flex column — it carries the
   gap itself. */
.quickform__form .consult-form__free {
  margin: 0 0 18px;
}

@media (max-width: 640px) {
  .consult-form__free {
    gap: 8px;
    padding: 8px 14px;
    font-size: 13.5px;
  }

  .consult-form__free svg { width: 16px; height: 16px; }
}

@media (max-width: 359px) {
  .consult-form__free { font-size: 12.5px; padding: 7px 12px; }
}

/* ============================================================
   Toronto panel — the photograph and the panel as one composition
   ============================================================

   When the palette moved, --tr-dark and --tr-dark-2 both resolved to the same
   brown, so the panel's two-stop gradient collapsed into a flat rectangle. A
   flat warm slab butted against a warm close-up photograph gives a hard
   vertical seam down the middle of the block, and the two halves read as a text
   card and a cut-out photo sitting next to each other rather than as one
   designed composition — which is what this used to be, when the panel was deep
   green and the photograph's own shadows ran into it.

   Rebuilt here in the approved palette: the panel gets a real gradient again
   (#4F5F4B into #3A302B, the sanctioned pairing), and the photograph is given a
   soft dissolve on the edge that meets it, so the image ends by turning into
   the panel instead of stopping at a line. Colour only — no geometry, no crop,
   no markup. */

.toronto__panel {
  background: linear-gradient(150deg, var(--fs-green) 0%, var(--fs-brown) 100%);
}

.toronto__photo {
  position: relative;
}

/* Desktop: the panel sits to the right of the picture, so the picture fades
   out on its right edge. The stop is late and the alpha never reaches 1 —
   enough to kill the seam, not enough to crop the photograph with colour. */
.toronto__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(var(--fs-brown-rgb), 0) 62%, rgba(var(--fs-brown-rgb), 0.72) 100%),
    linear-gradient(to bottom, rgba(var(--fs-green-rgb), 0.16) 0%, rgba(var(--fs-green-rgb), 0) 42%);
}

/* Stacked layout: the panel is underneath, so the dissolve turns with it. */
@media (max-width: 899px) {
  .toronto__photo::after {
    background:
      linear-gradient(to bottom, rgba(var(--fs-brown-rgb), 0) 58%, rgba(var(--fs-brown-rgb), 0.72) 100%),
      linear-gradient(to bottom, rgba(var(--fs-green-rgb), 0.16) 0%, rgba(var(--fs-green-rgb), 0) 38%);
  }
}

/* ============================================================
   QA pass — corrections from the art-direction, retouching and
   responsive reviews. Colour, depth and layout faults only; no
   content, no copy, no restructuring.
   ============================================================ */

/* ---- 1. The flat slabs ----------------------------------------
   Seven full-width sections were painting one unmodulated #4F5F4B,
   while every comparable dark ground on the homepage is graded. Two
   more declared a gradient whose two stops were the same colour, so
   they resolved to flat as well. On About and Team these are 300-800px
   tall, which is what made those pages read cheaper than the homepage.
   They now take the same sweep the testimonials stage already uses. */

.abintro,
.abteam,
.abwhy,
.tcreed,
.tbeyond,
.svhpage,
.svflagship {
  background: linear-gradient(150deg, var(--fs-green) 0%, var(--fs-brown) 100%);
}

/* the mobile sticky CTA declared accent -> accent; it sat flat-gold
   beside the sheened hero button it is meant to echo */
.mcta__book {
  background: var(--cta-bg);
  color: var(--cta-ink);
}

/* ---- 2. Gold that is carrying text on green -------------------
   #C9A462 measures 2.92:1 on #4F5F4B — under 3:1 even for large type,
   and the eyebrows using it are ~11px letterspaced caps. The lighter
   gold reaches 4.2:1 on the same ground. Hairlines, rules and
   ornaments keep the base gold, where contrast is not the point. */

.abteam,
.abwhy,
.tcreed,
.tbeyond,
.svhpage,
.svflagship,
.abintro {
  --accent: var(--fs-gold-light);
  --accent-rgb: var(--fs-gold-light-rgb);
}

/* ---- 3. Service-page hero -------------------------------------
   The gradient ended on near-black, which painted a solid bar across
   the foot of the hero under the photograph — it read as an overflow
   artefact rather than a design. It now closes on the brand brown, the
   same pairing used everywhere else. The block was also 620px against
   the 100vh heroes on index and about, so the page started short. */

.svohero {
  background: linear-gradient(180deg, var(--fs-green) 0%, var(--fs-brown) 100%);
}

.svohero__split {
  min-height: 760px;
}

/* The 760px is the side-by-side hero's height. Stacked, the panel and the
   photograph are shorter than that together, and the rest was left as an
   empty dark band under the photograph (55px on services, 19px on E-max) —
   this rule outranked the stacked layout's own min-height:0. */
@media (max-width: 899px) {
  .svohero__split { min-height: 0; }
}

/* ---- 4. The scroll cue's dead band ----------------------------
   A tap-target rule at &lt;=900px set .scrolldown to position:relative,
   which beat .scrolldown--float's absolute on equal specificity and
   later source order. The cue was thrown 150-350px off-screen and
   clipped, leaving its 44px box behind as an empty strip at the foot
   of the hero on services, about and emax-crowns. */

@media (max-width: 900px) {
  .scrolldown--float {
    position: absolute;
  }

  /* On the split heroes (E-max, services) the panel stacks over the photograph
     on a phone, so the foot of the first screen — where the cue anchors — is
     the photograph: it sat on the patient's chin. As on the home hero, the
     picture already running off the screen is the cue. */
  .svohero .scrolldown--float { display: none; }
}

/* ---- 5. The accessibility button over the sticky bar ----------
   Between 641 and 899px the FAB (z-index 150) painted over the sticky
   CTA bar (140) and swallowed most of the WhatsApp button's tap area.
   Above the bar's own height it clears cleanly. */

@media (min-width: 641px) and (max-width: 999px) {
  .a11y-fab {
    bottom: 86px;
  }
}

/* ---- 6. Columns that shrink-to-fit on small screens -----------
   Both blocks keep align-items:center from their desktop grid when the
   media query switches them to a flex column, so the copy shrinks to
   its content while the rules and galleries around it stay full width.
   A narrow centred block between two full-width rules reads as a fault. */

@media (max-width: 899px) {
  .tor-hero {
    align-items: stretch;
  }

  .tor-hero__statement {
    max-width: none;
    margin-inline-end: 0;
  }
}

@media (max-width: 991px) {
  .patients__container {
    align-items: stretch;
  }
}

/* ---- 7. A 25% CSS dim standing in for colour grading ----------
   brightness(0.75) was darkening the service-page banner photograph so
   white type could sit on it. That is a scrim hiding an image problem,
   and it flattens the shadows into mud. A gradient scrim behind the
   type does the same job without touching the photograph. */

.svbanner__photo img {
  filter: saturate(1.05);
}

.svbanner__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--fs-black-rgb), 0.50) 0%,
    rgba(var(--fs-black-rgb), 0.18) 45%,
    rgba(var(--fs-black-rgb), 0.55) 100%);
}

/* ---- 8. Five gold buttons in one block -------------------------
   The location block rendered Call, WhatsApp, Directions, Instagram
   and Facebook as five identically weighted gold fills — roughly 350px
   of continuous gold down a phone screen. Gold stopped being an accent
   and became the section's field colour. One primary stays filled; the
   rest step down to ghost and to icon-weight, which is the hierarchy
   the rest of the site already uses. */

/* WhatsApp stays the one filled primary; everything else steps down to
   ghost. Matched on the destination rather than on position, because the
   social pair sits in its own row wrapper and any nth-child rule picks
   up the first button of that row as well. */
.location__actions .location__action:not([href*="wa.me"]),
.location__social .btn {
  background: transparent;
  color: var(--ink-body);
  border: 1px solid rgba(var(--line-rgb), 0.55);
}

.location__actions .location__action:not([href*="wa.me"]):hover,
.location__social .btn:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

.location__actions .location__action:not([href*="wa.me"]) .icon,
.location__social .btn .icon {
  color: var(--accent);
}

/* ---- 9. Text measure on the legal pages -----------------------
   Body copy ran ~110 characters at 1440. */

.legal-page__body p,
.legal-page__body li {
  max-width: 68ch;
}

/* ---- 10. The footer's mirrored contact row --------------------
   The phone row put its gold icon on the opposite side from the other
   two, because an LTR-direction number flips the flex row it sits in.
   Pinning the row's direction restores one alignment for all three. */

.site-footer__contact-link,
.site-footer__address {
  direction: rtl;
}

/* ---- 12. Orphaned fourth card ---------------------------------
   Two three-column grids carry four cards, leaving one hanging under
   the last column with two empty cells beside it. Two-up reads as a
   set. */

/* Matched only where the grid actually holds four cards, so the same
   component keeps its three-up layout on the pages that carry three. */
@media (min-width: 900px) {
  .svchanges__grid:has(> :last-child:nth-child(4)),
  .svmyths__grid:has(> :last-child:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- 13. Tap targets under 24px -------------------------------
   Standalone route links and the hero contact links were 20-22px tall.
   The padding is added through the element's own box so nothing moves:
   the extra height is taken from the existing gap. */

.troute__to,
.hero-reach__link {
  padding-block: 6px;
}

/* 32px was still under a thumb's width for what are the primary links of
   their section. The hero links already reach 44px+ through a pseudo-element;
   the route links get the same invisible extension — the rows sit ~60px
   apart, so the grown areas never meet. */
.troute__to { position: relative; }

.troute__to::after {
  content: '';
  position: absolute;
  inset-block: -8px; /* 32 + 16: clear of 44 at any rounding */
  inset-inline: -8px;
}

/* ---- 14. The submenu row you had to hit exactly ---------------
   Every other row in the mobile menu is a full-width target; the one
   row with a submenu was 58px wide, and its chevron sat ~200px away at
   the far end of the panel with nothing tying it to its label. */

@media (max-width: 999px) {
  .mobile-nav__row {
    justify-content: flex-start;
    gap: 6px;
  }

  .mobile-nav__row > a {
    flex: 1 1 auto;
  }

  .mobile-nav__toggle {
    order: 2;
    margin-inline-start: 0;
  }
}

/* ---- 15. The play control over the subject's mouth ------------
   A low-contrast gold ring sat on the chin or lips of every video card
   and was close to invisible against skin. A solid ground behind it
   separates it from the photograph without moving it. */

.video-frame__play {
  background: rgba(var(--fs-black-rgb), 0.55);
  border-color: rgba(var(--line-rgb), 0.85);
}

.video-frame__play svg {
  color: var(--fs-gold-light);
}

/* ---- 16. Four cards at tablet leave a ten-character measure ---
   The homepage team grid stayed four-up at 768, which left each card
   body 140px wide — about ten Hebrew characters a line. */

@media (min-width: 700px) and (max-width: 900px) {
  .team__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- 17. The services hero photograph ------------------------
   `--wide` pinned the picture to a 3:2 box centred in its column, so a
   strip of ground showed above it and below it and the image read as a
   card dropped into the hero rather than as the hero's left half. It
   now fills the column, as it does on the other hero that uses this
   component. The edge bridge also fades to the brown the surrounding
   gradient has actually reached by that height, instead of to green. */

@media (min-width: 900px) {
  .svohero__visual--wide {
    align-self: stretch;
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }
}

.svohero__visual::after {
  background: linear-gradient(90deg, transparent 58%, rgba(var(--fs-brown-rgb), 0.92) 100%);
}

/* The hero CTA was a 576px gold slab carrying a 130px label — the
   largest unbroken gold area on the site, because it stretched to its
   flex column. Sized to its content it reads as a button again, and
   flex-start puts it on the reading edge in RTL. */
.svohero__panel > .btn {
  align-self: flex-start;
  width: auto;
}

/* ============================================================================
   HOME HERO — PHONE RECOMPOSITION (2026-09-15)

   The stacked hero measured 956px against an 844px screen, so the first
   impression was never one picture: the reader met a portrait, then a long
   run of evenly-spaced blocks, and the gold CTA arrived at 705px with the
   outline button clipped by the fold. Three faults did most of the damage.

   1. The kicker wrapped. "מרפאת שיניים רב תחומית · תל אביב" plus two 52px
      rules cannot hold one line in a 310px column, so it broke after the
      middot and the rules sat across the middle of line one. It also landed
      on the portrait's shoulder, which is the one thing the brief forbids.
   2. Everything was spaced the same. 16 / 18 / 26 / 24 / 30 between kicker,
      headline, sentence, buttons and the direct line is a list, not a
      composition — no group read as belonging to another.
   3. Two full-bleed buttons of equal width and equal height is two primary
      actions. The gold one cannot be the obvious move while an outlined slab
      of the same size sits under it.

   The fix is hierarchy, not shrinkage. The kicker loses its rules and holds
   one line. The headline and the sentence close up into a single block of
   message. The gold CTA keeps every pixel it had and stays full-bleed; the
   secondary steps down to a content-width ghost button, which is what makes
   the gold one read as the decision. The portrait loses a little height and
   none of its face — the crop comes off the bottom of the frame, below the
   shoulder, and the mask now finishes fading before any type begins.

   Desktop and tablet are untouched: every rule below is inside a phone query.
   ========================================================================= */

@media (max-width: 640px) {

  /* Sized to its content. At 100vh the reclaimed space came back as a band of
     empty green under the direct line, which is the same fault in a new place;
     ending the section where it ends lets the trust band show its top edge and
     say there is more. */
  .hero { min-height: 0; }

  .hero-content { padding-top: 6px; }

  /* The cut comes off the foot of the frame — below the shoulder, nowhere near
     the hair or the jaw.

     The fade holds the photograph solid to 78% and then runs a smoothstep out
     to the frame's edge. The 66% version still had her shoulders
     half-transparent by the middle of the frame, and they dissolved into a
     ground that was already darkening, so her upper body read as sinking into
     black. Holding longer keeps the shoulders and the top of her chest whole;
     a smoothstep has no onset and no landing, so there is still no line. */
  .hero-image {
    height: min(41vh, 356px);
    min-height: 272px;
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%, #000 78%,
      rgba(0,0,0,.972) 80.2%, rgba(0,0,0,.896) 82.4%, rgba(0,0,0,.784) 84.6%,
      rgba(0,0,0,.648) 86.8%, rgba(0,0,0,.5) 89%, rgba(0,0,0,.352) 91.2%,
      rgba(0,0,0,.216) 93.4%, rgba(0,0,0,.104) 95.6%, rgba(0,0,0,.028) 97.8%,
      rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(180deg,
      #000 0%, #000 78%,
      rgba(0,0,0,.972) 80.2%, rgba(0,0,0,.896) 82.4%, rgba(0,0,0,.784) 84.6%,
      rgba(0,0,0,.648) 86.8%, rgba(0,0,0,.5) 89%, rgba(0,0,0,.352) 91.2%,
      rgba(0,0,0,.216) 93.4%, rgba(0,0,0,.104) 95.6%, rgba(0,0,0,.028) 97.8%,
      rgba(0,0,0,0) 100%);
  }

  /* What she fades *into*. The desktop ground is a 152-degree sweep plus a
     radial centred on the left, built for a wide frame with the model standing
     at one side. Stood on end in a phone column that sweep runs nearly top to
     bottom, so it was already brown behind her shoulders, and the radial's far
     edge put brown on her right arm.

     Here the ground is set vertically: plain brand green behind the whole
     photograph, then one long ease-in layer of the palette's own black that
     starts where the photograph ends (44%, a whisper under her last few
     translucent pixels) and only gets heavy behind the buttons — green, deep
     green, near-black, with no stop to see. The brown base arrives after 64%,
     under enough black that it only warms the near-black. The first line of
     type (the gold kicker) sits on ~10% black and the body sentence on ~30%,
     which keeps both readable. */
  .hero-bg {
    background:
      radial-gradient(130% 58% at 50% 20%, rgba(var(--fs-sage-rgb), 0.10), transparent 72%),
      linear-gradient(180deg,
        rgba(var(--fs-black-rgb), 0) 0%,
        rgba(var(--fs-black-rgb), 0) 44%,
        rgba(var(--fs-black-rgb), .045) 49.6%,
        rgba(var(--fs-black-rgb), .107) 55.2%,
        rgba(var(--fs-black-rgb), .178) 60.8%,
        rgba(var(--fs-black-rgb), .254) 66.4%,
        rgba(var(--fs-black-rgb), .336) 72%,
        rgba(var(--fs-black-rgb), .422) 77.6%,
        rgba(var(--fs-black-rgb), .512) 83.2%,
        rgba(var(--fs-black-rgb), .605) 88.8%,
        rgba(var(--fs-black-rgb), .701) 94.4%,
        rgba(var(--fs-black-rgb), .80) 100%),
      linear-gradient(180deg, var(--fs-green) 0%, var(--fs-green) 64%, var(--fs-brown) 100%);
  }

  /* The desktop vignette is centred high and closes in from 42%, which on a
     phone column is the level of her shoulders; its second layer is a pool of
     shadow under a model standing at the left of a wide frame, which a phone
     does not have. Here it only touches the outer corners, from 70% out, so
     the green beside her shoulders stays green. */
  .hero-vignette {
    background: radial-gradient(150% 110% at 50% 30%, transparent 70%, rgba(var(--fs-black-rgb), 0.26) 100%);
  }

  /* Still rising into the tail of the fade, but 12px less far: at -34 the
     kicker reached fabric that had not finished dissolving. */
  .hero-text {
    margin-top: -22px;
    padding-bottom: 18px;
  }

  /* One line at 360px, and a kicker rather than a divider: the flanking rules
     cost 104px of a 310px row and were the reason it wrapped. */
  .eyebrow {
    display: block;
    font-size: 13px;
    letter-spacing: 0.09em;
    margin-bottom: 14px;
    white-space: nowrap;
  }

  .eyebrow__line { display: none; }

  /* Headline and sentence are one thought, so they are set as one block:
     12px inside it, 22px after it. Both spans are display:block, so the
     headline is two lines at every width in range by construction. */
  .hero-title {
    font-size: clamp(34px, 10.2vw, 44px);
    line-height: 1.03;
    margin-bottom: 12px;
  }

  .hero-desc {
    font-size: 15.5px;
    line-height: 1.45;
    margin-bottom: 22px;
  }

  .hero-buttons {
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
  }

  /* The primary keeps its full width and gains the only shadow in the stack,
     so it is the one object on the screen that sits above the green. */
  .hero-buttons .btn--gold {
    min-height: 56px;
    box-shadow: 0 10px 24px rgba(var(--fs-black-rgb), 0.28);
  }

  /* The secondary stops being a slab. Content width, a hairline instead of a
     border, and a smaller label: still a button, plainly the second one. */
  .hero-buttons .btn--outline {
    width: auto;
    height: 46px;
    padding-inline: 20px;
    font-size: 14.5px;
    font-weight: 500;
    background: transparent;
    border-color: rgba(var(--line-rgb), 0.22);
    box-shadow: none;
  }

  .hero-buttons .btn--outline .icon {
    width: 18px;
    height: 18px;
    opacity: 0.75;
  }

  /* The direct line is the quietest row on the screen and is set that way —
     the label a half-tone under the links it introduces. WhatsApp stays where
     it was, reachable and not competing. */
  .hero-reach {
    gap: 6px 12px;
    font-size: 14px;
  }

  .hero-reach__label {
    font-size: 12.5px;
    letter-spacing: 0.02em;
    opacity: 0.68;
  }
}

/* At 360px the gutters are already 26px, so the kicker is the only thing that
   needs the extra half-point to stay on its single line. */
@media (max-width: 374px) {
  .eyebrow { font-size: 12.5px; letter-spacing: 0.07em; }
}

/* ============================================================================
   VISUAL RECOVERY (2026-09-16)

   Regressions and awkward placements found in the owner's walkthrough of the
   preview. Each rule restores an approved state or fixes a placement; nothing
   here introduces a new visual direction.
   ============================================================================ */

/* ---- R1. Toronto: the approved warm spread -------------------------------
   The 2026-09-14 palette migration remapped this page's own tokens: the gold
   sub-headline, the "מה זה אומר בפועל" heading, the rules, frames and icons all
   went to sage green or stone, and the warm cream ground went to grey ivory. The
   page lost its gold hierarchy and a 112px headline became the largest green
   type on the site. These are the values the page was approved with
   (css/style.css.pre-brand-palette), restored verbatim and scoped to .tor. */
.tor {
  --tor-cream: #F0DCC4;
  --tor-cream-hi: #F8E8D4;
  --tor-cream-lo: #EBD5BA;
  --tor-ink: #2E2A24;
  --tor-green: #0C3129;
  --tor-gold-text: #9E6A1B;   /* darkened for legibility on cream (IS 5568) */
  --tor-gold-line: #C09A56;   /* decorative rules, frames, icons */
}

/* ---- R2. Split hero (services, E-max): one picture, not two panels ------
   The photograph ended in a hard vertical edge against the copy panel, and the
   fade laid over it went to a flat brown while the hero behind it runs green to
   brown — so the seam changed colour down its length. The photograph now
   dissolves into the hero's own ground instead: masked, so whatever the
   gradient is at that height is exactly what the image fades into. */
@media (min-width: 900px) {
  .svohero__visual {
    -webkit-mask-image:
      linear-gradient(to left, transparent 0%, #000 42%),
      linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to left, transparent 0%, #000 42%),
      linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-composite: intersect;
  }

  /* The cue stood exactly on the old seam, on the edge of the lips. It moves
     under the copy column, onto plain ground — the same place as the home hero. */
  .svohero .scrolldown--float { left: 75%; }
}

@media (max-width: 899px) {
  /* Stacked, the photograph met the panel above it in a straight line. */
  .svohero__visual {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
  }
}

.svohero__visual::after { background: none; }

/* ---- R3. About hero cue ---------------------------------------------------
   Centred, it sat on the patient beside his ear (desktop) and on top of his
   head (phone). Desktop: under the copy column, where the frame is cabinetry.
   Phone: the hero ends above the fold and the next section already shows, so
   the cue has nothing to announce — as on the home and services heroes. */
@media (min-width: 901px) {
  .abhero .scrolldown--float { left: 75%; }
}

@media (max-width: 900px) {
  .abhero .scrolldown--float { display: none; }
}

/* ---- R4. Cues stranded below the first screen -----------------------------
   On the seven treatment pages and on Toronto the hero runs longer than the
   screen, so the cue arrived after the reader had already scrolled past the
   fold, as a loose mark between two blocks (1,130-1,260px down on desktop,
   850-1,080px on a phone). A cue nobody sees on arrival is decoration. */
.svhpage > .scrolldown,
.tor > .scrolldown {
  display: none;
}

/* ---- R5. About carousel shows the whole frame ------------------------------
   The slides are now the full-length consult frames (tools_contact_shadow_
   photos.py). At 3:4 a pair standing under the wall mark cannot keep both the
   mark and their shoes, and every old slide cut people off at the feet. */
.abgal__open img { aspect-ratio: 2 / 3; }

/* ---- R6. No enhancement on clinical photographs ----------------------------
   Seven containers that show teeth, lips or a finished result still carried a
   brightness/saturation lift (1.02-1.05), left over from earlier colour
   passes. On a smile that is a whitening of the result, which the site must
   never do: clinical photographs render exactly as delivered. */
.toronto__photo img,
.svohero__visual img,
.svflagship__photo img,
.svcosmetic__photo img,
.svrows__photo img,
.svjourney__gallery-tile img,
.svjourney__photo img {
  filter: none;
}

/* The cards' shadow (18px down, 40px blur) was clipped by the scroll track's
   26px foot and by its two ends, so it showed as a grey band under the row
   with hard left, right and bottom edges. The track now has room for the
   whole shadow (the extra foot is taken back with a negative margin, so the
   progress bar does not move). At the two ends the shadow is cut exactly
   where the partly visible cards are cut; a negative spread keeps the shadow
   inside each card's own footprint, so nothing spills past that cut. */
.abgal__track {
  padding-bottom: 64px;
  margin-bottom: -38px;
}

.abgal__open { box-shadow: 0 24px 34px -14px rgba(var(--shadow-rgb), 0.26); }
.abgal__open:hover,
.abgal__open:focus-visible { box-shadow: 0 30px 44px -14px rgba(var(--shadow-rgb), 0.32); }

/* ---- R7. Home testimonial showcase: the same clipped shadow ----------------
   .testimonials__gallery clips (overflow:hidden, for the scaled active card)
   and it is exactly as wide as the stage, so the stage's 60px shadow was cut
   off square on both sides and read as a grey slab behind the "all
   testimonials" button. The gallery has to keep clipping (it holds the
   stage's decorative rings inside the page), so the shadow is tightened
   instead: its spread cancels its blur sideways, and it only falls below. */
.testimonials__stage { box-shadow: 0 26px 28px -24px rgba(var(--shadow-rgb), 0.5); }

/* The rail scrolls, so it clips the video cards' own shadow at its 8px foot —
   a faint lighter strip ran under the row inside the dark card. Room for the
   shadow, taken back with a negative margin so nothing below moves. */
.testimonials__row { padding-bottom: 72px; margin-bottom: -64px; }
/* when every card already fits (desktop), the rail does not scroll and has
   no reason to clip at all — the shadows then fall on the card's own ground */
.testimonials__row.is-static { overflow: visible; }

/* ---- R8. Treatment-page banner title under its own scrim ------------------
   The scrim added to .svbanner__photo as ::after (QA pass 7) is generated
   after the caption, so at equal stacking it painted over the headline: the
   white title on all seven treatment pages rendered as ~55% grey. The caption
   goes back above the scrim, where the approved version had it. */
.svbanner__caption { z-index: 2; }

/* On phones the card and stack banners put the title under the photograph and
   drop the full-frame scrim (mobile polish rule). The later ::after scrim still
   covered the whole card there, caption included — on cosmetic-dentistry it
   greyed the title. It goes with the scrim it duplicates. */
@media (max-width: 899px) {
  .svhpage .svbanner__photo--card::after,
  .svhpage .svbanner__photo--stack::after { display: none; }
}

/* The same pass also stacked this scrim on top of the banner's own
   .svbanner__scrim, so desktop banners ran ~10% darker than the approved
   version (mean luminance 67.7 against 75.5, measured). Lightened to land back
   on the approved exposure — no brightness filter on the photograph. */
.svbanner__photo::after {
  background: linear-gradient(180deg,
    rgba(var(--fs-black-rgb), 0.37) 0%,
    rgba(var(--fs-black-rgb), 0.13) 45%,
    rgba(var(--fs-black-rgb), 0.41) 100%);
}

/* ============================================================================
   FINAL VISUAL PASS (2026-09-16, afternoon)

   Owner's final walkthrough, reviewed by the art director before and after
   each change. Restores approved states; no new visual direction.
   ============================================================================ */

/* ---- F1. Toronto: the approved warm lower half ------------------------------
   R1 gave the hero back its warm tokens, but the doctor cards and the consult
   block below it are shared components and still resolved through the
   palette's cool ivory (#E0DFD4): the cards faded to grey stone, names went to
   near-black, the consult ground to cool grey-white. Values are the computed
   ones of the approved page (css/style.css.pre-brand-palette), scoped to the
   sections that follow the Toronto hero, so no other page moves. */
.tor ~ .svdocs .svdocs__title,
.tor ~ .svdocs .svdoc__name,
.tor ~ .consult .svconsult__statement { color: #0E2B24; }
.tor ~ .svdocs .svdocs__lead,
.tor ~ .svdocs .svdoc__role { color: #4F5D56; }
.tor ~ .svdocs .svdoc__does { color: #6B6759; }
.tor ~ .svdocs .svdoc {
  background: linear-gradient(150deg, #FBF8F2 0%, #F8F3EA 100%);
  border-color: rgba(22, 49, 38, 0.12);
}
.tor ~ .svdocs .svdocs__note {
  background-color: rgba(201, 164, 98, 0.07);
  border-inline-start-color: #C9A462;
  color: #38423E;
}
.tor ~ .consult {
  background:
    radial-gradient(circle at 88% 92%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(150deg, #FBF8F2 0%, #F5EFE3 55%, #F8F3EA 100%);
}
.tor ~ .consult .svconsult__statement em,
.tor ~ .consult .consult__title { color: #C9A462; }
.tor ~ .consult .consult__rule { background-color: #C9A462; }
.tor ~ .consult .consult__subtitle,
.tor ~ .consult .consult-form__label,
.tor ~ .consult .consult-form__input,
.tor ~ .consult .consult-form__pill { color: #0E2B24; }

/* ---- F2. Play buttons off the patients' mouths -------------------------------
   The testimonial wall already parks its play disc in the lower part of the
   frame. The home slider, the home featured video and the testimonials page's
   featured trio still centred it, which on a talking-head poster is exactly
   the mouth — the smile a dental testimonial exists to show. Same placement
   everywhere now. */
.video-frame__play {
  top: auto;
  bottom: 14%;
  transform: translateX(-50%);
}

.video-frame__play:hover {
  transform: translateX(-50%) scale(1.08);
}

/* ---- F3. Full-mouth rehabilitation banner keeps the doctor's head -----------
   At desktop the 1.5:1 photograph sits in a ~2.1:1 frame, centred, which took
   the top of the doctor's white hair into the banner's top edge. The crop now
   comes off the bottom (scrub pocket and hands, under the caption). */
@media (min-width: 900px) {
  .svbanner__photo img[src*="hero-patient-doctor"] { object-position: 50% 6%; }
}

/* ---- F4. Services hero on phones: one axis --------------------------------
   Title and description are centred on a phone, but the CTA kept the desktop
   rule that sends it to the reading edge, so it hung off to the right. */
@media (max-width: 899px) {
  .svohero__panel > .btn { align-self: center; }
}

/* ---- F5. Patient thumbnails at full exposure --------------------------------
   Inactive thumbs sat at 78% opacity over the cream band, which read as milky
   faces — permanently so on phones, where there is no hover to lift them.
   The active one is already marked by its gold border. */
.patients__thumb { opacity: 1; }

/* ---- F6. Home "real patients" on phones: no dead band -----------------------
   In the single column the 44px flex gap stacked on each copy element's own
   28-40px bottom margin, so rule, title, divider, text and gallery sat ~75px
   apart: ~520px of near-empty cream before the first photograph. */
@media (max-width: 767px) {
  .patients__container { gap: 22px; }
  .patients__rule,
  .patients__title,
  .patients__divider,
  .patients__desc { margin-bottom: 0; }
  .patients__gallery { margin-top: 14px; }
  .btn--patients { margin-top: 18px; }
}

/* ---- F7. About hero on phones and tablets: face first, text second ---------
   Below 900px the title and the room caption ran across the patient's nose
   and brow, over a scrim that also muddied his face. The hero now follows the
   house rule the treatment banners use: the photograph at its own exposure,
   the copy on the green ground under it. The intro band below starts on the
   exact green the hero ends on, so there is no seam between them. */
@media (max-width: 900px) {
  .abhero { padding-top: 0; }
  .abhero__media { position: relative; inset: auto; aspect-ratio: 5 / 6; overflow: hidden; }
  .abhero__media img { position: absolute; inset: 0; object-position: 46% 30%; }
  .abhero__scrim {
    background:
      linear-gradient(to bottom, rgba(var(--fs-black-rgb), 0.62) 0%, rgba(var(--fs-black-rgb), 0.2) 14%, rgba(var(--fs-black-rgb), 0) 28%),
      linear-gradient(to top, var(--color-deep-green-darkest) 0%, rgba(var(--fs-green-rgb), 0) 11%);
  }
  .abhero__inner { padding-top: 8px; padding-bottom: 28px; }
  .abintro { background: linear-gradient(180deg, var(--fs-green) 0%, var(--fs-brown) 100%); }
}

@media (min-width: 641px) and (max-width: 900px) {
  .abhero__media { aspect-ratio: 1 / 1; }
  .abhero__media img { object-position: 46% 48%; }
}

/* ---- F8. Split hero (services, E-max): a seam, not a haze -------------------
   R2's fade ran from the copy edge across 42% of the photograph, so the right
   half of the smile went grey-brown, and its 16% top/bottom fades dulled the
   lips. The dissolve now lives only in the last 13% of the photo column, on a
   smoothstep curve so the lip line has no soft wall; top and bottom keep a 7%
   feather. The scroll cue stands at the centre of the whole hero — at every
   width that is plain ground just past the photograph, never on lips or teeth.
   (Phones keep R2's stacked treatment and hide the cue, as before.) */
@media (min-width: 900px) {
  .svohero__visual {
    -webkit-mask-image:
      linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.16) 3.25%, rgba(0, 0, 0, 0.5) 6.5%, rgba(0, 0, 0, 0.84) 9.75%, #000 13%),
      linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image:
      linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.16) 3.25%, rgba(0, 0, 0, 0.5) 6.5%, rgba(0, 0, 0, 0.84) 9.75%, #000 13%),
      linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
  }

  .svohero .scrolldown--float { left: 50%; }
}

/* Past 1600px the split stops growing and the photograph ended in a hard
   vertical cut 160px+ in from the screen edge. It bleeds to the edge instead,
   as it does at every narrower desktop width. */
@media (min-width: 1601px) {
  .svohero { overflow-x: clip; }
  .svohero__visual { margin-left: calc((1600px - 100vw) / 2); }
}

/* ---- F9. Root canal "today" photograph: both people whole -------------------
   The tight crop pushed the doctor to the left edge and halved the assistant's
   face, with a laptop playing a video at the centre. The full frame (screen
   switched off) is used instead; the crop comes off the empty wall above. */
.svrows__photo--today img[src*="modern-treatment-room-v2"] { object-position: 50% 72%; }

/* ---- F10. Our-work: a case with two close-ups keeps the set's scale ---------
   Case 09 lost its mirrored third close-up (a clinical photograph is never
   flipped). Two tiles at flex:1 grew half again as large as every other
   case's; they keep the one-third width and sit centred instead. */
@media (min-width: 768px) {
  .workshow-item--natural.workshow-item--top .workshow-item__teeth:not(:has(> .workshow-item__teeth-tile:nth-child(3))) { justify-content: center; }
  .workshow-item--natural.workshow-item--top .workshow-item__teeth:not(:has(> .workshow-item__teeth-tile:nth-child(3))) > .workshow-item__teeth-tile { flex: 0 0 calc((100% - 32px) / 3); }
}

/* ============================================================================
   ART-DIRECTOR DECISIONS (2026-09-17)
   Each contested visual was judged against "does this look like a finished
   premium dental website?" — only the ones that failed were changed.
   ============================================================================ */

/* ---- D1. Services hero: a real case photograph ------------------------------
   The generated macro (lacquered lips, opaque teeth, 1536px master soft on 2x
   screens) is replaced by the clinic's own DSLR close-up of case 1. On phones
   the stacked fade is shortened so it stops above the upper lip. */

/* ---- D2. E-max process gallery: real clinic frames at 3:2 ------------------ */
.svjourney--emax .svjourney__gallery-tile img[src*="digital-planning"] { object-position: 50% 34%; }
.svjourney--emax .svjourney__gallery-tile img[src*="treatment-step-preparation"] { object-position: 50% 33%; }

/* ---- D3. Rehabilitation on phones ------------------------------------------
   The stacked hero sat the pair off-centre in a 4:3 box; 5:4 centres them and
   gives them more of the card. Step 05 no longer repeats the loupes photo used
   higher on the page. */
@media (max-width: 899px) {
  .svbanner__photo img[src*="hero-patient-doctor"] { aspect-ratio: 5 / 4; object-position: 69% 0%; }
}
.svjourney__photo img[src*="hero-edith-crown-model"] { object-position: 50% 62%; }
@media (max-width: 640px) {
  .svjourney__photo img[src*="hero-edith-crown-model"] { object-position: 50% 100%; }
}

/* ---- D4. Implants risk diagram on phones -----------------------------------
   Its baked labels shrink to ~6px at phone width; the text list directly below
   carries the same content, so the phone shows the list alone. */
@media (max-width: 640px) {
  .svrisk__diagram-wrap { display: none; }
}

/* ---- D5. Team page doctor names on phones -----------------------------------
   Wrapped onto several lines, each new line began with a stray divider. On a
   phone the names read as a centred list without the rules. */
@media (max-width: 900px) {
  .tgroup__caption a + a { border-inline-start: 0; }
  .tgroup__caption { gap: 8px 18px; }
}

/* ---- D6. Submit buttons without the browser's bevel ------------------------
   The two form submits are real <button>s and kept the user agent's 2px
   outset border — a black bevel round the gold, at the main conversion point.
   Focus stays visible with a gold ring. */
button.btn--gold { border: 0; }
button.btn--gold:focus-visible {
  outline: 2px solid var(--color-gold, #C9A462);
  outline-offset: 3px;
}

/* ---- D7. Spark steps: the number on the reading edge ------------------------
   direction:ltr pushed "01"–"05" to the left edge, away from their titles on
   the right. Isolated instead, so the digits stay in order and align with
   the step. */
.svsteps__num { direction: rtl; unicode-bidi: isolate; text-align: start; }

/* ---- D8. Form message box on phones: no resize grip -------------------------- */
@media (max-width: 899px) {
  .consult-form__textarea { resize: none; }
}

/* ---- D9. Small finishing details from the final pass ------------------------ */
@media (max-width: 640px) {
  /* the assistant's hair bun sat 6px from the top edge */
  .svrows__photo img[src*="daniel-laser-work"] { object-position: 50% 35%; }
}

/* short intro paragraphs had no leading of their own */
.svba__lead { line-height: 1.8; }

@media (max-width: 899px) {
  /* no single word stranded on the last line of a heading or the footer line */
  h1, h2, h3, .site-footer__tagline { text-wrap: balance; }
}

/* the calendar icon on the gold CTAs was gold on gold; it takes the label's ink */
.btn--gold img.icon { filter: brightness(0) opacity(0.82); }
.site-header__back span { white-space: nowrap; }

/* ---- D10. Last corrections from the final art-director QA -------------------- */
/* Implants hero: the clinician's crown touched the banner's top edge on desktop */
@media (min-width: 900px) {
  .svbanner__photo img[src*="hero-scan"] { object-position: 50% 2%; }
}

/* E-max process gallery: at 3:2 the reclining patient's face fell off the
   bottom of the preparation photo. 4:3 keeps both people in every tile. */
.svjourney--emax .svjourney__gallery-tile { aspect-ratio: 4 / 3; }
.svjourney--emax .svjourney__gallery-tile img[src*="treatment-step-preparation"] { object-position: 50% 41%; }

/* Rehabilitation step 03: a real frame of Dr Dimerman with his whole head */
.svjourney__photo img[src*="daniel-examination"] { object-position: 45% 62%; }
@media (max-width: 640px) { .svjourney__photo img[src*="daniel-examination"] { object-position: 45% 30%; } }

/* E-max hero on phones: button and phone line on the same centre as the title */
@media (max-width: 899px) {
  .svohero__cta { align-items: center; }
  .svohero__cta .hero-reach { justify-content: center; }
}
/* no single word stranded on a section heading's last line at any width */
main h2 { text-wrap: balance; }

/* ============================================================================
   TARGETED FIXES (2026-09-22) — four items, nothing else touched.
   ============================================================================ */

/* ---- T1. About map: the relief behind the country is a shadow, not a light --
   `fill: var(--ink)` resolves to the page's light ivory inside this dark
   section, so the blurred copy under the land read as a grey wash inside the
   country and a white glow around it, flattening the coastline and the city
   names. It takes the deep ink it was meant to have. */
.abmap__relief { fill: var(--fs-black); }
.abmap.is-revealed .abmap__relief { opacity: 0.62; }

/* T4 withdrawn: the services hero keeps the clinic's own approved smile photograph. */

/* ---- T5. Toronto card on services: the hover zoom stays inside its frame ----
   a.toronto__photo had no clipping, so the 1.03 scale pushed the photograph
   past its own box — out from under the dissolve that joins it to the panel,
   which turned the soft seam into a hard edge for as long as the pointer was
   on the card. */
a.toronto__photo { overflow: hidden; }
/* The owner's call: the card does not move at all on hover. */
a.toronto__photo img,
a.toronto__photo:hover img { transform: none; transition: none; }