/* Alphys landing page — transcribed from "Alphys Landing.dc.html".
   Colours and sizes are the values the design uses inline. Radii and shadows are not: the design
   had grown seven corner radii and four large float shadows, which is what made the hero and its
   CTA read as dated. Both are now systems, defined as tokens below. */

:root {
  --page: #EDF0F1;
  --white: #FFFFFF;
  --ink: #1B2022;
  --blue: #183A52;
  --blue-deep: #0F2940;
  --blue-light: #B6C2CC;
  --blue-tint: #C6D0D8;
  --text-muted: #3A444A;
  --text-soft: #2E3A41;
  --grey: #6A757C;
  /* The design's #8FA0AC scores 2.7:1 on white — below the 3:1 WCAG 1.4.11 needs for an input
     boundary. Reusing the existing --grey value clears it (4.72 on white, 3.02 on the hero form
     tint, 4.12 on the page) without introducing a colour the palette doesn't already have. */
  --grey-line: #6A757C;
  --line: rgba(27, 32, 34, 0.14);
  --line-soft: rgba(27, 32, 34, 0.08);
  /* Three radius steps, not the seven the page had grown. Small for controls and for photos
     nested inside a padded card (a child's radius has to sit below its parent's minus the padding,
     or the corners fight); medium for cards, panels and forms; large for full-bleed photography.
     Shadows are down to two: one tight lift for a panel that genuinely sits on top of a photo, and
     one for the mobile dropdown. The old 0 24px 48px float shadows were the card-era idiom. */
  --r-sm: 6px;
  --r-md: 16px;
  --r-lg: 24px;
  --shadow-overlap: 0 2px 10px rgba(24, 58, 82, 0.16);
  --shadow-pop: 0 8px 20px rgba(24, 58, 82, 0.14);
  --font-display: Heebo, sans-serif;
  --font-body: 'Noto Sans Hebrew', sans-serif;
  /* One vertical rhythm for every band. Sections used to carry their own clamps, which is
     why the spacing between them never quite matched. */
  --section-y: clamp(52px, 6vw, 96px);
  --gutter: clamp(16px, 4vw, 48px);
  --container: 1360px;
  /* Every section between the hero and the footer measures its content to the same column, so the
     page has one reading width rather than the two it had grown (1160 and 1360). */
  --content: 1160px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--link-hover); }
button, input { font: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; }
p { margin: 0; }
/* Focus ring. An author outline overrides Chrome's adaptive UA ring, so a single colour would be
   invisible somewhere: deep blue scores 1.0 against the blue treatments/footer bands and 1.38
   against the near-black method band. --focus flips to the pale page colour inside the dark
   sections, keeping the ring above 10:1 everywhere (WCAG 2.4.11 asks for 3:1).
   The same applies to the hover colour: --blue-deep is 1.1:1 on the ink ground the skip link sits
   on, so --link-hover flips with it. */
:root { --focus: var(--blue); --link-hover: var(--blue-deep); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.container { max-width: var(--content); margin: 0 auto; }
.section-title { font-size: clamp(32px, 3.6vw, 56px); line-height: 1.14; letter-spacing: -0.01em; font-weight: 500; }
.eyebrow {
  display: inline-block; width: fit-content; margin: 0 0 20px; padding: 7px 15px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--blue);
  border: 1px solid rgba(24, 58, 82, 0.22); border-radius: 999px;
}
.eyebrow--light { color: var(--blue); border-color: rgba(24, 58, 82, 0.22); }

.photo { display: block; width: 100%; height: 100%; object-fit: cover; background: #DCE2E6; }

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 8px; z-index: 60;
  background: var(--ink); color: var(--page); padding: 10px 18px;
  border-radius: var(--r-sm); font-size: 13px;
}
.skip-link:focus { inset-inline-start: 16px; }
/* It carries its own ink ground, so it opts out of the page-level hover colour. */
.skip-link { --link-hover: var(--page); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500; font-family: var(--font-body);
  cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.15s;
}
.btn--outline { border: 1px solid var(--blue); background: transparent; color: var(--blue); }
.btn--outline:hover { background: var(--blue); color: var(--white); }
.btn--solid { border: none; background: var(--blue); color: var(--white); min-height: 52px; font-size: 16px; }
.btn--solid:hover { background: var(--blue-deep); color: var(--white); }
.btn--solid:active { transform: scale(0.98); }
.btn--solid:focus-visible { outline-color: var(--ink); }
.btn--solid:disabled { opacity: 0.7; cursor: progress; transform: none; }
/* For the dark photographic hero: pale fill, deep-blue label. 10.38:1 either way round. */
.btn--light { border: none; background: var(--page); color: var(--blue); min-height: 52px; font-size: 16px; }
.btn--light:hover { background: var(--white); color: var(--blue); }
.btn--light:active { transform: scale(0.98); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 13.5px; font-weight: 500; color: var(--blue); }
.form-hint { font-weight: 400; color: var(--grey); }
.input {
  width: 100%; min-height: 48px; border: 1px solid var(--grey-line); border-radius: var(--r-sm);
  background: var(--white); padding: 0 14px; font-size: 16px; color: var(--ink);
}
.input::placeholder { color: var(--grey); }
.input:focus { border-color: var(--blue); outline: 2px solid var(--blue); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--ink); }
.input--tel { direction: ltr; text-align: end; }
.form-intro { margin: 0 0 4px; font-size: 14.5px; line-height: 1.55; color: var(--text-soft); }
.form-status {
  margin: 2px 0 0; background: var(--page); border: 1px solid var(--blue); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 13.5px; line-height: 1.5; color: var(--blue);
}
.form-status[hidden] { display: none; }
.form-status[data-state="error"] { border-color: var(--ink); color: var(--ink); }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Header ---------- */
/* The header rides on the hero photograph rather than sitting in a band above it, which is what
   lets the hero own the whole first screen. It scrolls away with the page; a sticky bar would
   need its own solid ground and would put a band back. Everything in it flips to pale, and the
   logo is a dark PNG so it is inverted to white rather than swapped for a second asset. */
.site-header { position: absolute; top: 0; inset-inline: 0; z-index: 30; background: transparent; }
.site-header .logo img { filter: brightness(0) invert(1); }
.site-header .nav a { color: var(--page); }
.site-header .nav a:hover { color: var(--white); }
.site-header .header-cta { border-color: rgba(237, 240, 241, 0.55); color: var(--white); background: rgba(15, 41, 64, 0.32); }
.site-header .header-cta:hover { background: var(--page); color: var(--blue); border-color: var(--page); }
.site-header .menu-btn { border-color: rgba(237, 240, 241, 0.7); color: var(--page); }
.site-header { --focus: var(--page); }
.site-header__bar {
  max-width: var(--container); margin: 0 auto; height: 108px; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo { display: flex; align-items: center; min-height: 44px; }
.logo img { height: 36px; width: auto; }
.nav { display: flex; gap: clamp(18px, 2.4vw, 38px); font-size: 15px; }
.nav a { color: var(--ink); padding: 12px 2px; }
.nav a:hover { color: var(--blue); }
.menu-btn {
  display: none; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; padding: 0 18px;
  border: 1px solid var(--blue); border-radius: var(--r-sm); background: transparent;
  color: var(--blue); font-size: 15px; cursor: pointer;
}
.mobile-nav {
  position: absolute; top: calc(100% - 18px); inset-inline-end: var(--gutter);
  width: min(340px, calc(100vw - var(--gutter) * 2));
  background: var(--white); border-radius: var(--r-md); padding: 10px 14px 14px;
  display: flex; flex-direction: column; z-index: 40; box-shadow: var(--shadow-pop);
}
/* The panel animates, so it can't be display:none while open/closing. It stays laid out and is
   taken out of the tree with [hidden] only once the close transition has finished; pointer-events
   and the transform keep it inert in between. Each row eases in just behind the one above it. */
.mobile-nav {
  opacity: 0; transform: translateY(-10px) scale(0.98); transform-origin: top left;
  pointer-events: none; transition: opacity 240ms ease, transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
[dir="rtl"] .mobile-nav { transform-origin: top right; }
.mobile-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  min-height: 48px; display: flex; align-items: center; font-size: 17px;
  border-bottom: 1px solid rgba(27, 32, 34, 0.07);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mobile-nav.is-open a { opacity: 1; transform: none; }
.mobile-nav.is-open a:nth-child(1) { transition-delay: 40ms; }
.mobile-nav.is-open a:nth-child(2) { transition-delay: 80ms; }
.mobile-nav.is-open a:nth-child(3) { transition-delay: 120ms; }
.mobile-nav.is-open a:nth-child(4) { transition-delay: 160ms; }
.mobile-nav.is-open a:nth-child(5) { transition-delay: 200ms; }
.mobile-nav .btn { margin-top: 16px; min-height: 50px; border-bottom: 0; font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav a { transition: none; transform: none; opacity: 1; }
}

/* ---------- Hero ---------- */
/* One photographic surface rather than a text band stacked above an image band. The stacked version
   was the reason the hero read as dated, and no amount of radius or shadow work fixed it. Type,
   label, CTA and the proof figures all sit on the photograph inside a single rounded container.
   The scrim is a solid deep-blue gradient, not a blur: the brief bans glassmorphism, and a flat
   gradient is also the only version whose contrast can actually be calculated. */
.hero { background: var(--blue); padding: 0; }
/* svh, not vh: on iOS vh measures the viewport with the browser chrome retracted, so a 100vh hero
   is taller than the screen on first paint and the proof row starts below the fold. */
.hero__stage {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
}
/* Framed left of centre so the subject sits away from the reading side, leaving the type a
   cleaner field than it gets on a centred crop. */
/* Mirrored above 920px so the therapist falls on the empty side of the type rather than under it.
   The frame carries no lettering, so nothing reads backwards. On a phone the type sits centred over
   the bottom of the frame, so there is nothing to move out from under and the photo stays as shot. */
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 32% center; z-index: -2; }
@media (min-width: 921px) { .hero__bg { transform: scaleX(-1); } }
/* Text sits at the inline start, which is the right edge in RTL, so the scrim is heaviest there.
   At its densest the worst case is a white pixel under the type, which still composites to a
   ground giving white better than 7:1. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  /* Three gradients, each with a job: one under the type at the inline start, one under the proof
     row, one thin band under the header. The old version also laid a 14% tint across the far side
     of the frame, which is what made the whole photograph read as blue-washed. Past 58% it is now
     clean. */
  background:
    linear-gradient(to left, rgba(15, 41, 64, 0.74) 0%, rgba(15, 41, 64, 0.46) 30%, rgba(15, 41, 64, 0.08) 58%, rgba(15, 41, 64, 0) 100%),
    linear-gradient(to top, rgba(15, 41, 64, 0.58) 0%, rgba(15, 41, 64, 0) 36%),
    linear-gradient(to bottom, rgba(15, 41, 64, 0.34) 0%, rgba(15, 41, 64, 0) 20%);
}
/* align-items must stay stretch: on a flex column, flex-start sizes each child to its own content
   width, which squeezed the Hebrew headline into a 272px ribbon four lines deep. The CTA opts out
   individually instead. */
/* Vertically centred in the frame. It used to be pushed to the top by an auto bottom margin, so
   the type sat high with a large empty middle under it. */
.hero__content {
  padding: 0 clamp(20px, 4vw, 68px);
  /* Not ch: that unit resolves against this container's 16px font, not the 66px headline's, which
     collapsed the column to ~310px. */
  width: min(660px, 100%); display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 1.6vw, 22px); text-align: center;
}
.hero__label {
  font-size: clamp(12px, 1vw, 13.5px); font-weight: 600; letter-spacing: 0.12em;
  color: var(--blue-light); margin: 0;
}
/* 4.6vw, not the 6.4vw this started at. The reference sets its headline near 3.6vw; Hebrew needs a
   little more presence than Latin at the same measure, but 6.4vw was reading as shouting. */
.hero__title {
  color: var(--white); font-size: clamp(38px, 4.6vw, 68px); line-height: 1.08;
  letter-spacing: -0.01em; text-wrap: balance; margin: 0;
}
.hero__lead { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.6; color: var(--blue-light); max-width: 46ch; margin: 0 auto; }
.hero__cta { margin-top: clamp(6px, 1vw, 12px); align-self: center; }
.hero__proof {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(20px, 3vw, 56px);
  padding: clamp(18px, 2vw, 26px) 0 clamp(24px, 3vw, 40px);
  border-top: 1px solid rgba(237, 240, 241, 0.22);
  margin: 0 clamp(20px, 4vw, 68px);
}
.hero__stat { display: flex; align-items: baseline; gap: 10px; }
.hero__stat-num { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 3vw, 44px); line-height: 1; color: var(--white); }
.hero__stat-label { font-size: clamp(13px, 1.05vw, 15px); color: var(--blue-light); }
.hero__specialties { font-size: clamp(13px, 1.05vw, 15px); color: var(--blue-light); margin: 0; margin-inline-start: auto; }

/* ---------- Approach ---------- */
/* ---------- Treatments ---------- */
.treatments { background: transparent; color: var(--ink); padding: var(--section-y) 0; overflow: hidden; }
.treatments__inner { max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); }
/* Six services in equal tiles, three across. The title and its line of copy sit on the photograph
   itself rather than in a padded card below it, so the row reads as six photographs and the page
   gets its one block of full-bleed imagery between the hero and the clinic gallery. */
.treatments__head { text-align: center; margin-bottom: clamp(36px, 4.5vw, 64px); }
.treatments__head > * { margin-inline: auto; }
.treatments__head .section-title { margin: 0 auto; max-width: 24ch; text-wrap: balance; }
.treatments__head .eyebrow { margin-bottom: 18px; }
.nowrap { white-space: nowrap; }
.treatments__sub { margin: 16px auto 0; font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.65; color: var(--text-muted); max-width: 46ch; }

.treatments__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 900px) { .treatments__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .treatments__grid { grid-template-columns: 1fr; } }

.card {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: var(--r-md);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(18px, 1.9vw, 26px);
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 260ms ease;
}
.card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1); }
/* The type sits on photographs the clinic did not shoot for this purpose, so the scrim has to hold
   up over a bright pilates studio as well as a dark treatment room. At 0.92 over the worst case —
   a white pixel — white text still clears 9:1. */
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(15, 41, 64, 0.92) 0%, rgba(15, 41, 64, 0.72) 26%, rgba(15, 41, 64, 0.28) 54%, rgba(15, 41, 64, 0.06) 100%);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-overlap); }
.card:hover .card__photo { transform: scale(1.05); }
.card__body { display: flex; flex-direction: column; gap: 8px; }
.card__title { font-weight: 400; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.25; color: var(--white); }
.card__text { font-size: clamp(14.5px, 1.05vw, 16px); line-height: 1.6; color: rgba(255, 255, 255, 0.86); text-wrap: pretty; }
@media (max-width: 560px) { .card { aspect-ratio: 4 / 3; } }

/* ---------- Method ---------- */
.method { background: transparent; color: var(--ink); padding: var(--section-y) var(--gutter); }
.method__inner { max-width: var(--content); margin: 0 auto; }
/* The circled "03" that sat here was a frozen odometer counter in the source template. Static it
   was an unexplained number floating beside the heading, so the count now lives on the three steps
   themselves, in the same 01/02/03 idiom the process section already uses. */
.method__head { margin-bottom: clamp(40px, 5vw, 72px); }
.method__title { max-width: 16ch; text-wrap: balance; }
/* One photograph, then the three points as text. This was three portrait photos in a row, which is
   the same shape as the treatments tiles two sections above it, so the page read as two versions of
   one section. A single wide image over a typographic row is a different object entirely, and it
   also stops the page spending nine photographs on two adjacent sections. */
.method__photo { margin: 0 0 clamp(28px, 3.2vw, 48px); aspect-ratio: 21 / 9; border-radius: var(--r-lg); overflow: hidden; }
.method__photo img { width: 100%; height: 100%; object-fit: cover; }
.method__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Rules on both sides of each column, four in all, so the three read as one ruled band. The border
   sits on the column itself and the padding keeps the text off it. */
.method__point { padding: 4px clamp(16px, 2.4vw, 36px); border-inline-start: 1px solid var(--line); text-align: center; }
.method__point:last-child { border-inline-end: 1px solid var(--line); }
.method__point h3 { margin: 0 0 10px; font-weight: 400; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3; }
.method__point p { font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.65; color: var(--text-muted); margin-inline: auto; max-width: 34ch; }
@media (max-width: 760px) {
  .method__photo { aspect-ratio: 4 / 3; }
  .method__points { grid-template-columns: 1fr; }
  .method__point { padding: 22px 4px; border-inline: 0; border-top: 1px solid var(--line); }
  .method__point:last-child { border-inline-end: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Process + founder ---------- */
.process { background: transparent; padding: var(--section-y) var(--gutter); }
.process__inner { max-width: var(--content); margin: 0 auto; }
.process__title { margin-bottom: 18px; max-width: 26ch; text-wrap: balance; }
.process__intro { margin: 0 0 clamp(32px, 4vw, 52px); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; color: var(--text-muted); max-width: 62ch; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* A spine down the inline-start edge with a marker on each step. The rows carried a small
   photograph each, which made three tiny crops compete with the six full-size ones two sections
   later; a drawn line says "sequence" without spending another photograph on it. */
/* A photograph beside the list. The section had none, and three small thumbnails inside the rows
   put tiny crops in competition with the six full-size ones a section later. One tall image holds
   the eye and leaves the list to read as a list. */
.process__body {
  display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px); align-items: stretch;
}
/* The list stretches to the photograph's height and its three rows share that height equally, so
   the markers run the full length of the image instead of stopping halfway down it. */
.process__body .steps { display: flex; flex-direction: column; }
.process__body .step { flex: 1; }
.process__photo { margin: 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 5; }
.process__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .process__body { grid-template-columns: 1fr; gap: 26px; }
  .process__photo { aspect-ratio: 3 / 2; }
}
.steps { position: relative; padding-inline-start: clamp(22px, 3vw, 40px); }
.steps::before {
  content: ""; position: absolute; inset-block: 14px; inset-inline-start: 5px;
  border-inline-start: 1px solid var(--line);
}
.step {
  position: relative;
  display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px);
  padding: clamp(20px, 2.5vw, 32px) 4px; flex-wrap: wrap;
}
.step::before {
  content: ""; position: absolute; top: calc(clamp(20px, 2.5vw, 32px) + 10px);
  inset-inline-start: calc(-1 * clamp(22px, 3vw, 40px));
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--blue);
}
.step + .step { border-top: 1px solid var(--line); }
.step__body { flex: 1; min-width: 240px; }
.step__body h3 { margin: 0 0 8px; font-weight: 400; font-size: clamp(21px, 1.8vw, 26px); }
.step__body p { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65; color: var(--text-muted); max-width: 52ch; }

.founder {
  margin-top: clamp(56px, 6vw, 96px); display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
}
.founder__body { display: flex; flex-direction: column; gap: 18px; }
.founder__title { text-wrap: balance; }
.founder__bio { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; color: var(--text-muted); max-width: 52ch; }
.founder__quote {
  margin: 8px 0 0; padding: 18px 22px; background: var(--page); border-radius: var(--r-md);
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--blue);
}
.founder__quote footer { margin-top: 8px; font-size: 13.5px; color: var(--grey); }
.founder__photo { height: clamp(360px, 40vw, 520px); border-radius: var(--r-lg); overflow: hidden; }

/* ---------- FAQ ---------- */
.faq { background: transparent; padding: var(--section-y) var(--gutter); }
.faq__inner { max-width: var(--content); margin: 0 auto; }
.faq__head { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }
.faq__title { margin: 0; }
.faq__sub { margin: 16px auto 0; font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.65; color: var(--text-muted); max-width: 46ch; }
/* Two columns of standalone cards rather than one full-width list of rules. align-items: start is
   what keeps an opened card from stretching the closed one beside it to match. */
.faq__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start; gap: clamp(12px, 1.4vw, 18px);
}
@media (max-width: 780px) { .faq__grid { grid-template-columns: 1fr; } }
.faq__item {
  background: var(--page); border-radius: var(--r-md);
  padding: clamp(4px, 0.6vw, 8px) clamp(16px, 1.7vw, 24px);
  transition: background 200ms ease;
}
.faq__item:hover { background: #E4E9EB; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: clamp(16px, 1.25vw, 18px); font-weight: 500; line-height: 1.4;
  padding: clamp(16px, 1.6vw, 22px) 0; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__q { text-wrap: pretty; }
.faq__icon {
  font-family: var(--font-display); font-weight: 300; font-size: 26px; line-height: 1;
  color: var(--blue); flex: none;
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq__item[open] .faq__icon { transform: rotate(45deg); }
/* The height animation runs on this wrapper from script, so it has to clip its own content. The
   padding lives on the paragraph inside, not here: an animated element cannot also hold padding
   that would keep it visibly open at height zero. */
.faq__answer { overflow: hidden; }
.faq__answer p { margin: 0; padding: 0 0 clamp(16px, 1.6vw, 22px); font-size: clamp(15px, 1.1vw, 16px); line-height: 1.7; color: var(--text-muted); }

/* ---------- Closing CTA ---------- */
.lead { background: transparent; padding: var(--section-y) var(--gutter); }
.lead__inner { max-width: var(--content); margin: 0 auto; }
.lead__title { margin: 0 0 12px; max-width: 18ch; text-wrap: balance; }
.lead__sub { margin: 0 0 clamp(30px, 3.5vw, 46px); font-size: clamp(16px, 1.3vw, 19px); color: var(--text-muted); font-weight: 500; }
.lead__form {
  background: var(--page); border-radius: var(--r-md); padding: clamp(20px, 2.6vw, 30px);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: flex-end;
  border: 1px solid rgba(24, 58, 82, 0.10); text-align: start; position: relative;
}
.lead__form .field { flex: 1; min-width: 200px; }
.lead__form .btn--solid { min-height: 50px; padding: 0 30px; }
.lead__form .form-status { flex-basis: 100%; margin: 4px 0 0; }

/* ---------- Footer ---------- */
.footer {
  width: 100%; max-width: none; margin: 0; border-radius: 0;
  background: var(--white); color: var(--ink);
  padding: clamp(48px, 5vw, 72px) var(--gutter) clamp(24px, 3vw, 32px);
}
.footer__inner { max-width: var(--container); margin: 0 auto; }
/* Centred: the footer holds a wordmark, one line about the clinic, an address and four icons —
   too little to justify two facing columns, which left a wide empty middle. */
.footer__top {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(22px, 2.6vw, 30px);
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.footer__brand { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.footer__logo { height: 30px; width: auto; filter: brightness(0); }
.footer__where { display: flex; flex-direction: column; gap: 8px; margin: 0; font-size: 16px; }
.footer__where > span:first-child { font-weight: 500; }
.footer__addr { color: var(--text-muted); font-size: 15px; }
.footer__contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 15px; }
.footer__contact a { color: var(--blue); min-height: 44px; display: flex; align-items: center; font-weight: 500; }
.footer__contact a:hover { color: var(--blue-deep); text-decoration: underline; }
/* Phone and WhatsApp are actions, so they read as a pair of buttons; the address stays written out
   because an email is something you copy, not something you tap. The link is 44px square even
   though the glyph is 20px, so the tap target meets the minimum on a phone. */
.footer__icon { width: 44px; justify-content: center; border: 1px solid rgba(24, 58, 82, 0.22); border-radius: 999px; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.footer__icon:hover { background: var(--page); color: var(--blue-deep); border-color: var(--blue); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-overlap); }
.footer__icon:active { transform: none; box-shadow: none; }
.footer__icon svg { display: block; }
.footer__base {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-top: clamp(18px, 2.2vw, 24px); border-top: 1px solid rgba(24, 58, 82, 0.12);
}
.footer__legal { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.footer__legal-link { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.footer__legal-link:hover { color: var(--blue); }
.built-by { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.built-by img { height: 22px; width: auto; opacity: 0.8; }
.built-by { direction: ltr; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .nav { display: none; }
  .header-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .founder { grid-template-columns: 1fr; }
  /* A tall narrow crop of a landscape photo cuts horizontally, and at 32% that landed on empty
     wall with no one in frame. Centre keeps the subject visible. */
  .hero__bg { object-position: 55% center; }
  /* No room for a horizontal scrim at this width, so it runs vertical and the type sits on the
     darkened lower half. */
  .hero__scrim {
    background: linear-gradient(to top, rgba(24, 58, 82, 0.94) 0%, rgba(24, 58, 82, 0.84) 38%, rgba(24, 58, 82, 0.46) 66%, rgba(24, 58, 82, 0.20) 100%);
  }
  .hero__stage { justify-content: flex-end; }
  /* Centred at this width. The column already spans the screen, so left-aligned type sat against
     one edge with the proof row centred under it, and the two never lined up. */
  .hero__content { width: 100%; padding-bottom: clamp(120px, 18vh, 170px); }
  .hero__proof { gap: 10px 22px; }
  .hero__stat-num { font-size: clamp(26px, 7vw, 34px); }
  .hero__specialties { margin-inline-start: 0; flex-basis: 100%; }
}
@media (max-width: 600px) {
  .step { flex-wrap: nowrap; gap: 16px; }
  .step__body { min-width: 0; }
  .steps { padding-inline-start: 22px; }
}
@media (max-width: 560px) {
  /* utility strip removed with the full-screen hero; its address lives in the footer */
}

/* ---------- Floating CTA (phones) ----------
   Fixed to the bottom edge under 920px, where the header button is folded into the menu and the form
   is a long scroll away. It hides while the form itself is on screen; a button pointing at something
   already in view is noise. */
.float-cta {
  position: fixed; inset-inline: 0; bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 35; display: none; margin-inline: auto; width: fit-content; max-width: calc(100% - 32px);
  align-items: center; gap: 14px; min-height: 56px; padding: 6px 8px 6px 22px;
  border-radius: 999px; color: var(--white); text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%), var(--blue-deep);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 34px rgba(15, 41, 64, 0.34), 0 2px 6px rgba(15, 41, 64, 0.18);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 240ms ease, box-shadow 200ms ease;
}
[dir="rtl"] .float-cta { padding: 6px 22px 6px 8px; }
.float-cta:hover, .float-cta:focus, .float-cta:active, .float-cta:visited { color: var(--white); }
.float-cta:hover .float-cta__hint, .float-cta:focus .float-cta__hint { color: var(--blue-light); }
/* The press: the pill settles down a touch, the arrow nudges the way the page is about to scroll,
   and a ring spreads from the chip. Enough to confirm the tap landed, over before the scroll starts. */
.float-cta:active, .float-cta.is-pressed { transform: scale(0.97); box-shadow: 0 6px 16px rgba(15, 41, 64, 0.3); }
.float-cta:active .float-cta__chip, .float-cta.is-pressed .float-cta__chip { transform: translateX(-4px); background: var(--blue-light); }
.float-cta.is-pressed .float-cta__chip::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7); animation: chip-ring 420ms ease-out forwards;
}
.float-cta__text { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; }
.float-cta__text strong { font-weight: 500; font-size: 15.5px; letter-spacing: 0.01em; }
.float-cta__hint { font-size: 12px; color: var(--blue-light); margin-top: 3px; }
/* The chip is the "here" of "press here": a small lit circle with the arrow pointing the way the
   page will scroll. It breathes once every few seconds so the eye finds it without a bounce. */
.float-cta__chip {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--blue-deep);
  transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1), background 180ms ease;
  animation: chip-breathe 3.2s ease-in-out 1.4s infinite;
}
.float-cta.is-hidden { transform: translateY(calc(100% + 28px)); opacity: 0; pointer-events: none; }
@keyframes chip-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@keyframes chip-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
  45% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}
@media (max-width: 920px) { .float-cta { display: flex; } }
@media (prefers-reduced-motion: reduce) { .float-cta__chip, .float-cta.is-pressed .float-cta__chip::after { animation: none; } }

/* ---------- Sticky header (desktop) ----------
   The header rides the hero as transparent white-on-photo. Once the hero has scrolled away it comes
   back pinned, on white, with the booking button turned solid: the one thing the bar is for once the
   reader is deep in the page. Desktop only; a phone gets the floating button instead. */
@media (min-width: 921px) {
  .site-header.is-stuck {
    position: fixed; top: 0; background: var(--white);
    box-shadow: 0 1px 0 rgba(24, 58, 82, 0.10), 0 8px 24px rgba(24, 58, 82, 0.08);
    animation: header-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .site-header.is-stuck .site-header__bar { height: 76px; }
  .site-header.is-stuck .logo img { filter: none; height: 30px; }
  .site-header.is-stuck .nav a { color: var(--ink); }
  .site-header.is-stuck .nav a:hover { color: var(--blue); }
  .site-header.is-stuck .header-cta { background: var(--blue); color: var(--white); border-color: var(--blue); }
  .site-header.is-stuck .header-cta:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--white); }
  .site-header.is-stuck { --focus: var(--blue); }
}
@keyframes header-in { from { transform: translateY(-100%); } to { transform: none; } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .float-cta.is-hidden { transform: none; }
}

/* ---------- Entrance motion ----------
   Sections fade and rise a little as they enter. Transform and opacity only, so it stays off the
   main thread, and each element is unobserved once it has fired: no scroll listener, nothing
   running after the first pass. The brief bans infinite animation and parallax, and this is
   neither. Targets are only hidden once JS confirms it can run (html.js), so the page reads
   normally if the script fails, and prefers-reduced-motion turns the whole thing off. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(18px); }
  html.js [data-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  /* Children stagger behind their container. */
  html.js [data-reveal-group] > * { opacity: 0; transform: translateY(16px); }
  html.js [data-reveal-group].is-in > * {
    opacity: 1; transform: none;
    transition: opacity 560ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  html.js [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 70ms; }
  html.js [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 140ms; }
  html.js [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 210ms; }
  html.js [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 280ms; }
  html.js [data-reveal-group].is-in > *:nth-child(6) { transition-delay: 350ms; }
  /* A photograph settles out of a very slight overscale rather than sliding. */
  html.js [data-reveal-photo] img { transform: scale(1.06); transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1); }
  html.js [data-reveal-photo].is-in img { transform: none; }
}

/* ---------- Gallery ---------- */
/* ---------- Testimonials ----------
   Ten real Google reviews, every one of them five stars, quoted as written and each linking back to
   the listing. One on screen at a time: ten cards side by side would be a wall nobody reads. */
.voices { background: transparent; padding: var(--section-y) var(--gutter); }
.voices__head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.voices__title { text-wrap: balance; }
.voices__stage { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 24px); }
/* All ten in one grid cell, so the stage is as tall as the longest and nothing jumps when the
   quotation changes. visibility, not display: it keeps the nine that are off screen out of the
   accessibility tree while leaving them laid out. */
.voices__slides { flex: 1; display: grid; min-width: 0; }
.voice {
  grid-area: 1 / 1; margin: 0;
  background: var(--page); border-radius: var(--r-md);
  padding: clamp(28px, 3.6vw, 56px) clamp(24px, 3.4vw, 52px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 2vw, 26px);
  text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity 420ms ease, visibility 0s linear 420ms;
}
.voice.is-active { opacity: 1; visibility: visible; transition: opacity 420ms ease; }
.voice__stars { display: flex; gap: 3px; color: var(--blue); }
.voice__text { margin: 0; max-width: 60ch; }
.voice__text p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(18px, 1.65vw, 25px); line-height: 1.5; text-wrap: pretty;
}
.voice__by { display: flex; align-items: center; gap: 12px; }
.voice__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.voice__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.voice__who { font-size: 15px; font-weight: 500; }
.voice__src { font-size: 13px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.voice__src:hover { color: var(--blue); }
.voices__btn {
  flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(24, 58, 82, 0.22); border-radius: 999px; background: var(--white);
  color: var(--blue); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.voices__btn:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }
.voices__btn:active { transform: scale(0.96); }
.voices__dots { display: flex; justify-content: center; gap: 8px; margin-top: clamp(20px, 2.4vw, 30px); }
.voices__dots { gap: 0; }
.voices__dot {
  width: 22px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.voices__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(24, 58, 82, 0.22); transition: background 0.25s, transform 0.25s;
}
.voices__dot.is-on::before { background: var(--blue); transform: scale(1.25); }
.voices__dot:hover::before { background: rgba(24, 58, 82, 0.45); }
.voices__dot:focus-visible { outline: 2px solid var(--focus); outline-offset: -6px; border-radius: 8px; }
@media (max-width: 700px) {
  /* The arrows move under the card so the quotation keeps the full width of a phone. */
  .voices__stage { flex-wrap: wrap; justify-content: center; }
  .voices__slides { flex-basis: 100%; }
  .voices__btn--prev { order: 2; }
  .voices__btn--next { order: 3; }
  .voices__stage { row-gap: 18px; }
  .voices__dots { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .voices__btn:active { transform: none; }
  .voice { transition: none; }
}

/* Address in the closing section, since the maps block is gone. */
/* Notice at the point of collection: what the details are for, with the full policy one tap away. */
.lead__note { margin: 14px auto 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); text-align: center; text-wrap: balance; }
.lead__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.lead__note a:hover { color: var(--blue); }
.lead__where { margin: 22px 0 0; font-size: 14.5px; color: var(--text-muted); }
.lead__where a, .footer__addr a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(24, 58, 82, 0.35); }
.lead__where a:hover, .footer__addr a:hover { color: var(--blue); text-decoration-color: currentColor; }

/* ---------- Founder, its own band ---------- */
/* It used to sit inside the first-appointment section, so Lior's story and the description of the
   visit read as one undifferentiated block. */
.founder-band { background: transparent; padding: var(--section-y) var(--gutter); }
.founder { margin-top: 0; }
.founder__title { margin-bottom: 4px; }

/* ---------- Closing form ---------- */
.lead__form { align-items: end; }
.lead__form .field { flex: 1 1 220px; }
.lead__form .btn--solid { flex: 0 0 auto; }

/* Motion is off for anyone who asked for it off, hover included. */
@media (prefers-reduced-motion: reduce) {
  .card, .card__photo { transition: none; }
  .card:hover { transform: none; box-shadow: none; }
  .card:hover .card__photo { transform: none; }
}

/* ---------- Composition: panels, not bands ----------
   Sections used to run edge to edge as alternating full-bleed bands, which is the layout signature
   that read as dated. The page now has one continuous ground and each section is an inset rounded
   panel sitting on it, so the margins are visible down both sides and the page reads as a stack of
   surfaces rather than a stack of stripes. The hero stays full-bleed: it is the one element that
   should own the whole screen. */
main > section:not(.hero) {
  width: calc(100% - var(--gutter) * 2);
  max-width: 1560px;
  margin-inline: auto;
  margin-block-end: clamp(10px, 1.2vw, 16px);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding-inline: clamp(24px, 4vw, 72px);
}
main > section:not(.hero) > .container,
main > section:not(.hero) > .treatments__inner,
main > section:not(.hero) > .method__inner,
main > section:not(.hero) > .process__inner,
main > section:not(.hero) > .faq__inner,
main > section:not(.hero) > .lead__inner { padding-inline: 0; }
.hero { margin-block-end: clamp(10px, 1.2vw, 16px); }
/* Full width: it closes the page, so it should meet both edges rather than float like the panels. */
.footer { width: 100%; max-width: none; margin: 0; border-radius: 0; }

/* ---------- Section heads ----------
   A head that introduces a full-width section is centred; a two-column block like the founder
   reads from the inline start, because centring one half of a side-by-side layout looks accidental.
   The pill needs auto inline margins to centre, since it is fit-content wide. */
.method__head, .voices__head { text-align: center; }
.method__head > *, .voices__head > * { margin-inline: auto; }
.voices__title { max-width: 26ch; }
.method__title { max-width: 22ch; }
.voices__sub { margin-inline: auto; }

.process__inner > .eyebrow, .process__title, .process__intro { margin-inline: auto; text-align: center; }
.process__inner > .eyebrow { display: block; width: fit-content; }
.process__title { max-width: 26ch; }

.faq__head > .eyebrow { margin-inline: auto; display: block; width: fit-content; }
.faq__title { max-width: 24ch; margin-inline: auto; }

.lead__inner > .eyebrow, .lead__title, .lead__sub { margin-inline: auto; text-align: center; }
.lead__inner > .eyebrow { display: block; width: fit-content; }
.lead__title { max-width: 22ch; }
.lead__form { margin-inline: auto; max-width: 820px; }
.lead__where { text-align: center; }

/* ---------- Founder head ----------
   Its label and heading used to live inside the left column of the two-column block, so the section
   never got a head like every other one. They are lifted out and centred to match. */
.founder__head { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }
.founder__head > * { margin-inline: auto; }
.founder__head .section-title { max-width: 22ch; }
.founder__body { gap: 20px; }
.founder__bio, .founder__quote { max-width: none; }

/* ---------- Closing section ----------
   Full bleed, full viewport, and the one deep-blue moment in the body of the page, so the point
   where someone actually converts doesn't read as just another white panel. */
/* main > section:not(.hero) outranks a bare .lead, so this has to match on the same ground to
   escape the panel treatment. Width 100% of <main> rather than 100vw: vw includes the scrollbar
   and would push the page sideways. */
main > section.lead {
  width: 100%; max-width: none; margin-inline: 0; margin-block-end: 0; border-radius: 0;
  background: var(--page); color: var(--ink);
  padding: var(--section-y) var(--gutter);
}
.lead__inner { width: 100%; }
.lead__form {
  background: var(--white); border: 1px solid rgba(24, 58, 82, 0.10);
  box-shadow: var(--shadow-overlap);
}