/* ==========================================================================
   drarnonagmon.com — shared stylesheet (built from content-source/designs/)
   RTL-first: logical properties only (inline-start = right in Hebrew).
   Font sizes in rem so the a11y widget's text-size control works.
   Contrast ratios (WCAG 2.1) are noted next to text/background tokens.
   ========================================================================== */

/* ---------- 1. Fonts: Rubik only (self-hosted variable woff2, Hebrew + Latin subsets;
   same files as the skirot landing page) */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/rubik-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/rubik-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Design tokens (from home-final.html) --------------------- */
:root {
  --navy-900: #002241;   /* text, footer bg — 14.54:1 on --bg, 16.09:1 on #fff */
  --navy-700: #004581;   /* buttons, links — 7.96:1 on --bg-contact, 9.69:1 on #fff */
  --blue-500: #018abd;   /* design accent; decorative only (3.53:1 on --bg) */
  --link: #01719a;       /* landing #018ABD darkened to pass 4.5:1 on every light bg here (min 4.51 on --bg-contact) */
  --link-hover: #004581; /* landing hover colour */
  --text: #33495a;       /* body text (landing) — 7.70:1 on --bg-contact, 9.37:1 on #fff */
  --hero-sub: #bfe6f5;   /* hero subtitle (landing) */
  --card-bg: #f7fcff;    /* landing cards */
  --card-border: #e2eef4;
  --btn-blue: #017fae;   /* landing #018ABD button bg, darkened: white text 4.52:1 (was 3.91) */
  --btn-wa: #188842;     /* landing #25D366 button bg, darkened: white text 4.53:1 (was 1.98) */
  --cyan: #00c2ff;       /* decorative */
  --royal: #032b7e;      /* decorative */
  --grey-nav: #b8b9b9;   /* design nav grey — now used only for dividers (nav links are white) */
  --bg: #eef4fc;
  --bg-reviews: #f7f8f9;
  --bg-contact: #ddeafd;
  --line: #dce6ec;
  --card-line: #dce2e8;
  --rule: #c9d6e3;       /* inner-page list / FAQ dividers (design) */
  --label: #3a4a5c;      /* 7.46:1 on --bg-contact */
  --muted: #5e5e60;      /* 6.47:1 on #fff */
  --field-border: #6f829a;/* 3.24:1 on --bg-contact, 3.94:1 on #fff (1.4.11; design #B8C6D6 was 1.4:1) */
  --error: #b42318;      /* 5.4:1 on --bg-contact */
  --success: #1a7f37;
  --on-dark-muted: #cfe3f2; /* 12.2:1 on --navy-900 */
  --focus: var(--navy-700);
  --focus-on-dark: #ffffff;

  --font-body: "Rubik", system-ui, "Segoe UI", Arial, sans-serif;
  --font-head: var(--font-body);

  /* Type scale = skirot landing page: phone sizes, x1.25 above 900px.
     rem (not px) so the a11y widget's text-size control still scales everything. */
  --fs-scale: 1;
  --fs-h1:    calc(clamp(1.625rem, 4.4vw, 2.25rem) * var(--fs-scale));      /* 26–36px */
  --fs-lead:  calc(clamp(.9375rem, 2.2vw, 1.0625rem) * var(--fs-scale));    /* 15–17px */
  --fs-h2:    calc(1.5rem * var(--fs-scale));                               /* 24px */
  --fs-sub:   calc(1rem * var(--fs-scale));                                 /* 16px */
  --fs-body:  calc(1rem * var(--fs-scale));                                 /* 16px */
  --fs-small: calc(.9375rem * var(--fs-scale));                             /* 15px */
  --fs-btn:   calc(clamp(.875rem, 3.4vw, 1rem) * var(--fs-scale));          /* 14–16px */
  --fs-input: calc(.9375rem * var(--fs-scale));                             /* 15px */
  --container: 75rem;    /* 1200px */
  --gutter: 2rem;        /* 32px */
  --pad-wide: clamp(1.25rem, 6.67vw, 6rem);   /* design 96px at 1440 */
  --tap: 44px;
  --mbar-h: 72px;
  --ease-drift: cubic-bezier(.22, .8, .25, 1);
}
@media (min-width: 901px) { :root { --fs-scale: 1.25; } }

/* ---------- 3. Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 1rem;
}
body {
  min-block-size: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.8;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;            /* nav drift starts off-screen */
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, picture, video, svg, iframe { display: block; max-inline-size: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .75; }
/* in-text links (landing: #018ABD / hover #004581, darkened for AA) */
.text-link, .form__privacy a, .cookie-banner__text a, .mr-strip__caption a, .legal a, .a11y-panel a { color: var(--link); }
.text-link:hover, .form__privacy a:hover, .cookie-banner__text a:hover, .mr-strip__caption a:hover, .legal a:hover, .a11y-panel a:hover { color: var(--link-hover); opacity: 1; }
::selection { background: var(--navy-700); color: #fff; }

/* ---------- 4. Accessibility utilities ------------------------------- */
.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-start: .5rem;
  z-index: 1000;
  padding: .75rem 1.5rem;
  border-radius: .5rem;
  background: var(--navy-900);
  color: #fff;
  font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
.site-header :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: var(--focus-on-dark); }

/* ---------- 5. Shared pieces ------------------------------------------ */
.container { inline-size: 100%; max-inline-size: calc(var(--container)); margin-inline: auto; padding-inline: var(--gutter); }
h1, h2, h3 { color: var(--navy-900); }
.h2 {
  margin: 0 0 1.5rem;
  font-weight: 800;
  font-size: var(--fs-h2);                    /* 24px */
  line-height: 1.3;
  color: var(--navy-900);
}
.sub { font-weight: 700; font-size: var(--fs-sub); color: var(--navy-900); }   /* sub-heading / FAQ question */
.text-small { font-size: var(--fs-small); line-height: 1.8; color: var(--text); } /* secondary text, steps, FAQ answers */
.card { padding: 30px 32px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; }
.pill--blue { background: var(--btn-blue); border-color: var(--btn-blue); color: #fff; }
.pill--wa { background: var(--btn-wa); border-color: var(--btn-wa); color: #fff; }

/* pill buttons */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: var(--tap);
  border: 1.5px solid transparent;
  border-radius: 28px;
  font-weight: 700;
  font-size: var(--fs-btn);                   /* 14–16px */
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}
.pill img { inline-size: 26px; block-size: 26px; object-fit: contain; flex: none; }
.pill--lg { padding: 12px 28px; }
.pill--light { background: #fff; color: var(--navy-900); }
.pill--light.pill--lg { padding-inline: 28px 22px; }
.pill--outline { border-color: #fff; color: #fff; background: transparent; }
.pill--primary { background: var(--navy-700); color: #fff; border-color: var(--navy-700); padding: 10px 28px; }
.pill--ghost { background: #fff; color: var(--navy-700); border-color: var(--navy-700); padding: 10px 28px; }
.pill:disabled { opacity: .6; cursor: progress; }
.link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.link-btn:hover { opacity: .75; }

/* ---------- 6. Header (over the hero video) -------------------------- */
.site-header { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 20; }
.site-header__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding: 24px var(--gutter);
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { inline-size: 60px; block-size: 60px; object-fit: contain; }
.site-nav { flex: 1 1 600px; }
.site-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; list-style: none; padding: 0; }
.site-nav__mobile-only { display: none; }
.site-nav a, .bot-nav a {
  display: inline-block;
  white-space: nowrap;
  padding: 8px 4px;
  font-weight: 700;
  font-size: var(--fs-btn);                   /* nav = button size (14–16px) */
  line-height: 1.4;
  color: #fff;                                /* was design #B8B9B9 */
  text-shadow: 0 1px 3px rgba(0, 20, 40, .45);
}
.site-header__cta { padding: 10px 24px; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: var(--tap);
  block-size: var(--tap);
  margin-inline-start: auto;
  padding: 0;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: transparent;
  color: #fff;
}

/* ---------- 7. Video hero ------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: 780px;
  overflow: hidden;
  background: var(--navy-900);
}
.hero__video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; }
/* design overlay (.48 navy) + soft scrims behind the header and the text/bottom nav,
   so #B8B9B9 nav links and the subtitle keep AA contrast over bright frames (measured per frame) */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 34, 65, .66) 0, rgba(0, 34, 65, .66) 100px, rgba(0, 34, 65, 0) 200px),
    linear-gradient(to top, rgba(0, 34, 65, .66) 0, rgba(0, 34, 65, .66) 90px, rgba(0, 34, 65, .46) 160px, rgba(0, 34, 65, .46) 400px, rgba(0, 34, 65, 0) 540px),
    rgba(0, 34, 65, .48);
}
.hero__txt {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding: 130px var(--gutter) 110px;
  color: #fff;
}
.hero h1 {
  max-inline-size: 900px;
  font-weight: 800;
  font-size: var(--fs-h1);                    /* 26–36px */
  line-height: 1.25;
  color: #fff;
}
.hero__lead {
  max-inline-size: 640px;
  font-size: var(--fs-lead);                  /* 15–17px */
  font-weight: 500;
  color: var(--hero-sub);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 10px; }
.hero__toggle {
  position: absolute;
  inset-block-end: 32px;
  inset-inline-end: 32px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--navy-900);
}
.bot-nav {
  position: absolute;
  inset-block-end: 36px;
  inset-inline: 100px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 32px;
}

/* nav "drift": links float in from scattered positions (design: random
   offsets, 0.9 s delay, 1.8 s ease). Pure CSS — no flash before JS runs;
   transforms don't cause layout shift. */
@keyframes drift-move { from { transform: translate(var(--dx, 0), var(--dy, 0)); } }
@keyframes drift-fade { from { opacity: .85; } }
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .drift { animation: drift-move 1.8s var(--ease-drift) .9s backwards, drift-fade .6s ease .9s backwards; }
  .site-nav li:nth-child(1) .drift { --dx: -340px; --dy: 310px; }
  .site-nav li:nth-child(2) .drift { --dx: 420px;  --dy: 120px; }
  .site-nav li:nth-child(3) .drift { --dx: -150px; --dy: 400px; }
  .site-nav li:nth-child(4) .drift { --dx: 260px;  --dy: 230px; }
  .site-nav li:nth-child(5) .drift { --dx: -480px; --dy: 90px; }
  .site-nav li:nth-child(6) .drift { --dx: 90px;   --dy: 360px; }
  .site-nav li:nth-child(7) .drift { --dx: 330px;  --dy: 280px; }
  .bot-nav .drift:nth-child(1)    { --dx: 380px;  --dy: -330px; }
  .bot-nav .drift:nth-child(2)    { --dx: -270px; --dy: -150px; }
}

/* ---------- 8. Reviews (MedReviews strip, as on the skirot landing) ---- */
.reviews { padding-block: 67px; background: var(--bg-reviews); }   /* 120 (vertical space −20%, as the inner pages) */
/* 10% wider than the content column (1136 → 1250px at desktop); on phones capped at the viewport minus 16px each side */
.mr-strip { --mr-w: min(110%, 100vw - 2rem); inline-size: var(--mr-w); margin-inline: calc((100% - var(--mr-w)) / 2); }
.mr-strip__box {
  block-size: var(--mr-h, 313px);
  padding: 16px;
  overflow: hidden;
  border-radius: 16px;
  background: #eaf6fb;
}
/* Height = bottom of the widget's logo + rating row (measured inside the iframe) + 16px space.
   The widget reflows on its own width: row bottom 208px (iframe >= 759px wide), 227 (388–758),
   246 (272–387), 285 (< 272). Box = row bottom + 12 (16px padding, -4px frame offset) + 16.
   Breakpoints sit a little above the measured switch points (823 / 452 / 341px viewport),
   so the row is never cut. Same height before and after loading: no layout shift. */
@media (min-width: 360px) { .mr-strip__box { --mr-h: 274px; } }
@media (min-width: 470px) { .mr-strip__box { --mr-h: 255px; } }
@media (min-width: 840px) { .mr-strip__box { --mr-h: 236px; } }
.mr-strip__frame { display: block; inline-size: 100%; block-size: 420px; margin-block-start: -4px; border: 0; }
/* shown until cookie consent / click */
.mr-strip__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; block-size: 100%; text-align: center; }
.mr-strip__note { font-size: var(--fs-small); color: var(--text); }        /* 8.51:1 on #eaf6fb */
.mr-strip__caption { margin-block-start: 6px; text-align: center; font-size: max(1rem, var(--fs-small)); color: var(--text); }   /* >=16px; 8.81:1 on --bg-reviews */
.mr-strip__caption a { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- 9. "Our way" pull quote + wave -------------------------- */
.ethos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;                                  /* 24 */
  padding-block: 78px;                       /* 140 */
  text-align: center;
}
.ethos__eyebrow { font-size: var(--fs-sub); font-weight: 700; line-height: 1.5; color: var(--link); }   /* 4.96:1 on --bg */
.ethos__body { inline-size: 100%; padding-inline: var(--pad-wide); }
.ethos__quote {
  font-weight: 500;
  font-size: var(--fs-h2);                    /* quote = H2 size */
  line-height: 1.5;
  color: var(--navy-900);
}
.wave-ethos { inline-size: 100%; block-size: 170px; margin-block-start: 20px; }   /* 36 */

/* ---------- 10. About ----------------------------------------------- */
.about {
  position: relative;
  overflow: hidden;
  padding-block: 67px;                        /* 120 */
  border-block-start: 1px solid var(--line);
}
.about__text { display: flex; flex-direction: column; gap: 13px; padding-inline: var(--pad-wide); }
.about__text .h2 { margin: 0; }
.about__text p {
  font-weight: 400;
  font-size: var(--fs-body);                  /* 16px */
  line-height: 1.8;
  color: var(--text);
}
.about__media {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-block-start: 31px;                   /* 56 */
  padding-inline-start: var(--pad-wide);
}
.about__photo {
  flex: 0 1 380px;
  min-inline-size: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1.5px solid #000;
  border-radius: 24px;
}
.about__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 60% 30%; }
.about__waves { flex: 0 1 auto; block-size: 507px; inline-size: auto; max-inline-size: 40%; object-fit: contain; object-position: 0 0; }
/* desktop: text and photo side by side (text at the start/right, photo, then the waves flush with the edge) */
@media (min-width: 1100px) {
  .about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 56px;
  }
  .about__text { padding-inline-end: 0; }
  .about__media { margin-block-start: 0; padding-inline-start: 0; gap: 40px; }
  .about__photo { flex: 0 0 340px; }
  .about__waves { max-inline-size: none; block-size: 453px; }
}
@media (min-width: 1280px) { .about__photo { flex-basis: 380px; } .about__waves { block-size: 507px; } }

/* ---------- 11. Contact + form -------------------------------------- */
.wave-top { inline-size: 100%; block-size: 60px; }
.contact { position: relative; overflow: hidden; padding-block: 39px 62px; background: var(--bg-contact); }
.contact__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;                                  /* 18 */
  max-inline-size: calc(1000px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.contact__title {
  text-align: center;
  font-weight: 800;
  font-size: var(--fs-h2);                    /* H2 */
  line-height: 1.3;
  color: var(--navy-900);
}
.contact__sub { margin-block-end: 6px; text-align: center; font-size: var(--fs-body); color: var(--text); }

.form { display: flex; flex-direction: column; gap: 13px; }
.form__hint { font-size: var(--fs-small); color: var(--text); }
.form__row { display: flex; flex-wrap: wrap; gap: 16px; }
.form__row .field { flex: 1 1 200px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-input); color: var(--text); }
.field__req { color: var(--error); }
.field__input {
  inline-size: 100%;
  block-size: 54px;
  padding: 0 22px;
  border: 1px solid var(--field-border);
  border-radius: 999px;
  background: #fff;
  color: var(--navy-900);
  font-size: max(1rem, var(--fs-input));     /* 16px on phones (iOS zooms into fields under 16px); landing 18.75px above 900px */
}
.field__input::placeholder { color: #6a6f76; opacity: 1; }   /* 5.1:1 on #fff */
.field__input:focus-visible {
  outline: 3px solid var(--focus);            /* 9.69:1 on #fff */
  outline-offset: 2px;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 7px rgba(0, 69, 129, .18);
}
input[type="tel"].field__input, input[type="email"].field__input { direction: ltr; text-align: end; }
.field__input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.field__error { display: flex; gap: .25rem; font-size: var(--fs-small); font-weight: 600; color: var(--error); }
.field__error:empty { display: none; }
.field__error::before { content: "⚠"; flex: none; }   /* not colour alone */

.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.8; color: var(--text); }
.check input { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 5px; accent-color: var(--navy-700); }
.check label { cursor: pointer; }
.form__submit { align-self: center; margin-block-start: 6px; padding: 14px 44px; }
.form__privacy { text-align: center; font-size: var(--fs-small); color: var(--text); }
.form__privacy a { text-decoration: underline; text-underline-offset: .2em; }

/* honeypot — off-screen, NOT display:none */
.hp-field { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

.form-status { padding: 1rem; border-radius: 16px; border-inline-start: 4px solid currentColor; font-weight: 600; }
.form-status:empty { display: none; }
.form-status[data-state="sending"] { background: #fff; color: var(--navy-700); }
.form-status[data-state="success"] { background: #eaf6ee; color: var(--success); }
.form-status[data-state="error"] { background: #fdeeec; color: var(--error); }
.form-status a { color: inherit; text-decoration: underline; }

/* ---------- 12. Footer ---------------------------------------------- */
.site-footer { background: var(--navy-900); color: #fff; font-size: var(--fs-small); }   /* 15px */
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 40px;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding: 28px var(--gutter) 11px;
}
/* links to the six procedure pages (same on every page) */
.site-footer__pages { display: flex; flex-wrap: wrap; gap: 0 24px; max-inline-size: var(--container); margin-inline: auto; padding: 22px var(--gutter) 8px; font-weight: 600; }
.site-footer__pages a { display: inline-flex; align-items: center; min-block-size: var(--tap); color: #fff; }
.site-footer__pages + .site-footer__inner, .site-footer__contact + .site-footer__inner { padding-block-start: 11px; border-block-start: 1px solid rgba(255, 255, 255, .15); }
/* clinic details (same on every page; matches the Google Business Profile) */
.site-footer__contact { display: flex; flex-direction: column; gap: 2px; max-inline-size: var(--container); margin-inline: auto; padding: 14px var(--gutter) 16px; border-block-start: 1px solid rgba(255, 255, 255, .15); font-style: normal; line-height: 1.7; }
.site-footer__contact a { display: inline-flex; align-items: center; min-block-size: var(--tap); color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.site-footer__brand { display: flex; align-items: center; gap: 10px; }
.site-footer__brand img { inline-size: 32px; block-size: 32px; object-fit: contain; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.site-footer__nav a, .site-footer__nav .link-btn { display: inline-flex; align-items: center; min-block-size: var(--tap); }
.site-footer__disclaimer {
  max-inline-size: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter) 22px;
  font-size: var(--fs-small);
  color: var(--on-dark-muted);
}

/* ---------- 13. Floating side buttons (desktop) --------------------- */
.fab-col { position: fixed; inset-block-start: 160px; inset-inline-end: 20px; z-index: 50; display: flex; flex-direction: column; gap: 12px; }
.fab { display: block; inline-size: 54px; block-size: 54px; filter: drop-shadow(0 2px 6px rgba(0, 34, 65, .22)); }
.fab img { inline-size: 54px; block-size: 54px; object-fit: contain; }
.fab--a11y {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 34, 65, .18);
  filter: none;
}
.fab--a11y img { inline-size: 48px; block-size: 48px; }

/* ---------- 14. Mobile bottom bar ----------------------------------- */
.mbar { display: none; }

/* ---------- 15a. Burger menu (≤1199px) ---------------------------------
   Seven header links (incl. "ייעוצים") don't fit on one line next to the
   logo and the CTA below 1200px, so the burger menu takes over from there.
   The desktop CTA stays visible down to 761px; phones keep the sticky bar. */
@media (max-width: 1199px) {
  .nav-toggle { display: flex; }
  .site-nav { flex-basis: 100%; }
  .site-nav:not([data-open="true"]) { display: none; }  /* closed, and hidden before script.js runs */
  .site-nav[data-open="true"] {
    position: absolute;
    inset-block-start: calc(100% - 12px);
    inset-inline: 12px;
    padding: 8px 20px;
    border-radius: 20px;
    background: var(--navy-900);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__mobile-only { display: block; }
  .site-nav a {
    display: flex;
    align-items: center;
    min-block-size: 48px;
    padding: 6px 4px;
    color: #fff;
    font-size: var(--fs-body);                /* 16px */
    white-space: normal;
  }
  .site-nav li + li { border-block-start: 1px solid rgba(255, 255, 255, .15); }
}
@media (min-width: 761px) and (max-width: 1199px) {
  .site-nav[data-open="true"] { inset-inline-start: auto; inline-size: min(360px, calc(100% - 24px)); }
  html.nav-open .fab-col { visibility: hidden; }   /* the floating buttons would sit over the open menu */
}
/* ≥1200px: all seven links on one line — nav text at the token's 14px end (×1.25 = 17.5px) */
@media (min-width: 1200px) { .site-nav a { font-size: calc(.875rem * var(--fs-scale)); } }

/* ---------- 15. Mobile (≤760px, as in the design) ------------------- */
@media (max-width: 760px) {
  body { padding-block-end: var(--mbar-h); }
  .fab-col, .bot-nav, .site-header__cta { display: none !important; }
  /* text at the top of the box, under the header (header 108px + 36px, as the inner-page top boxes) */
  .hero__txt { justify-content: flex-start; padding-block: 144px 48px; }
  /* scrim follows the text: header band, then the text block, fading out below it */
  .hero__overlay {
    background:
      linear-gradient(to bottom, rgba(0, 34, 65, .66) 0, rgba(0, 34, 65, .66) 100px, rgba(0, 34, 65, .5) 150px, rgba(0, 34, 65, .5) 560px, rgba(0, 34, 65, 0) 680px),
      rgba(0, 34, 65, .48);
  }

  .mbar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-block-start: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(0, 34, 65, .08);
  }
  .mbar__cta {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    block-size: 48px;
    border-radius: 999px;
    background: var(--navy-700);
    color: #fff;
    font-weight: 700;
    font-size: var(--fs-btn);
  }
  .mbar__cta img { inline-size: 22px; block-size: 22px; object-fit: contain; filter: invert(1); }
  .mbar__icon { flex: 0 0 48px; display: flex; align-items: center; justify-content: center; block-size: 48px; padding: 0; border: 0; background: transparent; }
  .mbar__icon img { inline-size: 48px; block-size: 48px; object-fit: contain; }
  .mbar__a11y img { inline-size: 46px; block-size: 46px; }
  .mbar :focus-visible { outline-offset: 0; }
}
/* no-JS: the menu can't open, so show the links inline under the logo */
@media (scripting: none) and (max-width: 1199px) {
  .site-nav:not([data-open]) { display: block; }
  .site-nav__list { flex-direction: row; flex-wrap: wrap; gap: 0 16px; }
  .site-nav__list a { color: #fff; }
  .nav-toggle { display: none; }
}

/* ---------- 16. Cookie banner --------------------------------------- */
.cookie-banner {
  position: fixed;
  inset-inline: 12px;
  inset-block-end: 12px;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  max-inline-size: 40rem;
  padding: 16px 20px;
  background: #fff;
  color: var(--navy-900);
  border: 1px solid var(--card-line);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 34, 65, .16);
  font-size: var(--fs-small);
}
@media (min-width: 761px) { .cookie-banner { inset-inline-end: auto; inset-inline-start: 24px; inset-block-end: 24px; } }
@media (max-width: 760px) { .cookie-banner { inset-block-end: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px) + 8px); } }
.cookie-banner__text { flex: 1 1 16rem; }
.cookie-banner__text a { text-decoration: underline; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 17. Accessibility widget (a11y.js) ----------------------- */
/* Fallback floating button: only on pages without a [data-a11y-open] opener */
.a11y-btn {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  z-index: 150;
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  font-size: 1.5rem;
}
.a11y-panel {
  position: fixed;
  inset-block-start: 160px;
  inset-inline-end: 86px;              /* beside the floating side buttons */
  z-index: 150;
  inline-size: min(18rem, calc(100vw - 2rem));
  max-block-size: calc(100vh - 180px);
  overflow-y: auto;
  padding: 1rem;
  background: #fff;
  color: var(--navy-900);
  border: 1px solid var(--card-line);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 34, 65, .16);
}
@media (max-width: 760px) {
  .a11y-panel {
    inset-block-start: auto;
    inset-inline-end: 8px;
    inset-block-end: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px) + 8px);
    max-block-size: calc(100vh - var(--mbar-h) - 24px);
  }
}
.a11y-panel h2 { margin-block-end: .75rem; font-size: calc(1.0625rem * var(--fs-scale)); font-weight: 800; }   /* 17px (landing) */
.a11y-panel button {
  display: block;
  inline-size: 100%;
  min-block-size: var(--tap);
  margin-block: .25rem;
  padding: .5rem .75rem;
  border: 1.5px solid var(--field-border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: start;
}
.a11y-panel button:hover { background: var(--bg-contact); }
.a11y-panel button[aria-pressed="true"] { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.a11y-panel button[aria-pressed="true"]::before { content: "✓ "; }
.a11y-panel a { display: inline-flex; align-items: center; min-block-size: var(--tap); font-size: var(--fs-small); text-decoration: underline; }

/* widget modes */
html.a11y-contrast body,
html.a11y-contrast .reviews,
html.a11y-contrast .mr-strip__box,
html.a11y-contrast .contact,
html.a11y-contrast .site-footer,
html.a11y-contrast .site-nav[data-open="true"],
html.a11y-contrast .cookie-banner,
html.a11y-contrast .mbar,
html.a11y-contrast .legal,
html.a11y-contrast .pg-white, html.a11y-contrast .pg-sec, html.a11y-contrast .card,
html.a11y-contrast .pg-sec--grey, html.a11y-contrast .pg-tip, html.a11y-contrast .pg-mini, html.a11y-contrast .pg-alert, html.a11y-contrast .pg-podcast,
html.a11y-contrast .pg-hero--light, html.a11y-contrast .pg-adv, html.a11y-contrast .pg-adv__item, html.a11y-contrast .pg-linkcard, html.a11y-contrast .pg-badge, html.a11y-contrast .pg-table-wrap, html.a11y-contrast .pg-table th, html.a11y-contrast .pg-table td,
html.a11y-contrast .field__input { background: #000 !important; color: #fff !important; border-color: #fff !important; }
html.a11y-contrast .hero__overlay { background: rgba(0, 0, 0, .85); }
html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3,
html.a11y-contrast .ethos__eyebrow, html.a11y-contrast .contact__sub, html.a11y-contrast .field__label,
html.a11y-contrast .check, html.a11y-contrast .form__hint, html.a11y-contrast .form__privacy,
html.a11y-contrast .mr-strip__note, html.a11y-contrast .mr-strip__caption,
html.a11y-contrast .eyebrow, html.a11y-contrast .pg-hero__lead, html.a11y-contrast .cta-icon__label, html.a11y-contrast .weeks__num, html.a11y-contrast .weeks__unit,
html.a11y-contrast .pg-quote, html.a11y-contrast .yt__caption, html.a11y-contrast .yt__by, html.a11y-contrast .faq__btn, html.a11y-contrast .faq__a, html.a11y-contrast .pg-disclaimer,
html.a11y-contrast .pg-hero__text, html.a11y-contrast .pg-note__title, html.a11y-contrast .pg-card p, html.a11y-contrast .pg-card__big,
html.a11y-contrast .pg-split p, html.a11y-contrast .pg-steps__n, html.a11y-contrast .pg-chips li, html.a11y-contrast .pg-podcast__title, html.a11y-contrast .pg-podcast__sub, html.a11y-contrast .pg-lead-accent, html.a11y-contrast .sec-head__lead,
html.a11y-contrast .pg-adv__label, html.a11y-contrast .pg-adv__num, html.a11y-contrast .pg-adv__unit, html.a11y-contrast .pg-linkcard__title, html.a11y-contrast .pg-linkcard__desc, html.a11y-contrast .pg-mini__label, html.a11y-contrast .pg-mini__value, html.a11y-contrast .pg-mini__note, html.a11y-contrast .pg-card__n, html.a11y-contrast .weeks__sub, html.a11y-contrast .pg-badge { color: #fff !important; }
html.a11y-contrast a, html.a11y-contrast .link-btn, html.a11y-contrast .site-nav a, html.a11y-contrast .bot-nav a { color: #ffeb3b !important; }
html.a11y-contrast .pill { background: #ffeb3b !important; color: #000 !important; border-color: #ffeb3b !important; }
html.a11y-contrast .wave-ethos, html.a11y-contrast .wave-top, html.a11y-contrast .about__waves,
html.a11y-contrast .pg-divider, html.a11y-contrast .pg-dots, html.a11y-contrast .pg-lines, html.a11y-contrast .contact__deco, html.a11y-contrast .pg-deco { visibility: hidden; }
html.a11y-contrast .pg-hero::before { display: none; }
html.a11y-contrast :focus-visible { outline-color: #ffeb3b !important; }
html.a11y-contrast .a11y-panel a { color: var(--link) !important; }
html.a11y-links a { text-decoration: underline !important; text-decoration-thickness: 2px !important; outline: 2px dashed currentColor; outline-offset: 2px; }
html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3 { outline: 2px solid var(--blue-500); outline-offset: 4px; }
html.a11y-font body, html.a11y-font h1, html.a11y-font h2, html.a11y-font h3, html.a11y-font p, html.a11y-font .pill {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: .02em;
  word-spacing: .08em;
}

/* ---------- 18. Legal pages (migrated from site.css) ----------------- */
.legal { max-inline-size: 48rem; line-height: 1.85; }
.legal h1 { margin-block: .5rem; font-size: var(--fs-h1); font-weight: 800; line-height: 1.25; }
.legal h2 { margin-block: 2rem .75rem; font-size: var(--fs-h2); font-weight: 800; color: var(--navy-900); }
.legal p { margin-block-end: 1rem; }
.legal ul { margin-block-end: 1rem; padding-inline-start: 1.4em; }
.legal li { margin-block: .5rem; }
.legal a { text-decoration: underline; }
.updated { margin-block-start: 3rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--grey-nav); font-size: var(--fs-small); color: var(--text); }
.disclaimer {
  margin-block-start: 3rem;
  padding: 1rem 1.5rem;
  border-inline-start: 4px solid var(--blue-500);
  border-radius: .5rem;
  background: #fff;
  font-size: var(--fs-small);
  color: var(--text);
}

/* ---------- 18b. Inner (procedure) pages ------------------------------
   Built from content-source/designs/<page>.html; typography from the site rule.
   Vertical space (section padding, margins, gaps) is the design's minus ~20%
   (design value in the comment); font sizes, line heights and horizontal
   spacing are unchanged. Pages opt in with <body class="page-inner">. */
/* the shared header sits on a solid navy bar (no full-height hero under it) */
.site-header--solid { position: relative; background: var(--navy-900); }
.site-header--solid .site-nav a { text-shadow: none; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }

.eyebrow { font-size: var(--fs-sub); font-weight: 700; line-height: 1.5; color: var(--link); }   /* small accent label (like "הדרך שלנו") */
.sec-head { display: flex; flex-direction: column; gap: 8px; }                  /* 10 */
.sec-head .h2, .pg-intro .h2, .pg-about .h2 { margin: 0; }
.pg-hero__inner, .pg-intro, .pg-scans__inner, .pg-about {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* top box, as in each page design: navy (targeted-scan) or light blue with a wave decoration (.pg-hero--light) */
.pg-hero { position: relative; overflow: hidden; background: var(--navy-900); }
.pg-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; padding-block: 36px 54px; }   /* gap 22, padding 64/96 */
.pg-hero :focus-visible { outline-color: var(--focus-on-dark); }
.pg-hero .eyebrow { color: var(--hero-sub); }
.pg-hero h1 { font-weight: 800; font-size: var(--fs-h1); line-height: 1.25; color: #fff; }
.pg-hero__lead { font-size: var(--fs-lead); font-weight: 500; color: var(--hero-sub); }   /* hero subtitle (landing #BFE6F5) */
.pg-hero .cta-icon__label { color: #fff; }

/* "לקביעת תור" + calendar tile */
.cta-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; }   /* 8 */
.pg-hero .cta-icon { margin-block-start: 8px; }                                /* 14 */
.pg-about .cta-icon { align-self: flex-start; margin-block-start: 6px; }
.cta-icon__label { font-size: var(--fs-sub); font-weight: 700; color: var(--navy-700); }
.cta-icon img { inline-size: 84px; block-size: 84px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 34, 65, .22)); }

/* part 1 */
.pg-intro { display: flex; flex-wrap: wrap; gap: 18px 64px; padding-block: 67px; }   /* gap 32, padding 120 */
.pg-intro__head { flex: 1 1 300px; min-inline-size: 0; }
.pg-intro__body { flex: 2 1 520px; min-inline-size: 0; display: flex; flex-direction: column; gap: 11px; }   /* 20 */

/* part 2 */
.pg-scans { border-block-start: 1px solid var(--line); }
.pg-scans__inner { display: flex; flex-direction: column; gap: 31px; padding-block: 67px; }   /* 56, 120 */
.pg-scans__row { display: flex; flex-wrap: wrap; gap: 31px 56px; align-items: flex-start; }   /* 56 */
.weeks { flex: 999 1 560px; min-inline-size: 0; list-style: none; padding: 0; border-block-start: 1px solid var(--rule); }
.weeks__item { display: flex; flex-wrap: wrap; gap: 6px 32px; padding-block: 18px; border-block-end: 1px solid var(--rule); }   /* 8, 32 */
.weeks__when { flex: 0 0 180px; display: flex; flex-direction: column; line-height: 1.2; }
.weeks__num { align-self: flex-start; font-size: var(--fs-h2); font-weight: 700; color: var(--link); }   /* 4.96:1 on --bg */
.weeks__unit { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.weeks__text { flex: 1 1 300px; min-inline-size: 0; display: flex; flex-direction: column; gap: 6px; }   /* 8 */
.pg-quote {
  align-self: center;
  max-inline-size: 900px;
  margin-block-start: 13px;                   /* 24 */
  text-align: center;
  font-size: var(--fs-h2);                    /* pull quote = H2 size, as "הדרך שלנו" */
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy-900);
}

/* YouTube Short: click-to-load facade */
.yt { flex: 1 1 280px; max-inline-size: 320px; margin-inline: auto; display: flex; flex-direction: column; gap: 8px; }   /* 14 */
.yt__facade, .yt__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1.5px solid #000;
  border-radius: 24px;
  background: var(--navy-900);
}
.yt__facade:hover { opacity: 1; }
.yt__thumb { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.yt__facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 34, 65, .8) 0, rgba(0, 34, 65, 0) 30%); }
.yt__play {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy-900);
  box-shadow: 0 4px 16px rgba(0, 34, 65, .3);
  transition: transform .2s ease;
}
.yt__facade:hover .yt__play, .yt__facade:focus-visible .yt__play { transform: scale(1.08); }
.yt__label { position: absolute; z-index: 1; inset-block-end: 18px; inset-inline-start: 18px; font-size: var(--fs-small); font-weight: 700; color: var(--bg-contact); }
.yt__frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.yt__caption { font-size: var(--fs-body); font-weight: 700; line-height: 1.5; color: var(--navy-700); }
.yt__by { font-size: var(--fs-small); font-weight: 400; color: var(--text); }

/* decorations */
.pg-divider { display: flex; justify-content: center; padding-inline: var(--gutter); }
.pg-divider img { inline-size: min(760px, 100%); block-size: auto; }
.pg-dots { display: flex; justify-content: flex-end; max-inline-size: var(--container); margin-inline: auto; padding: 27px var(--gutter) 0; }   /* 48 */
.pg-dots img { inline-size: min(220px, 40%); block-size: auto; }

/* part 3: about (the "לקביעת תור" tile sits under the text) */
.pg-about { display: flex; flex-wrap: wrap; gap: 36px 64px; padding-block: 67px; }   /* gap 64, padding 120 */
.pg-about__text { flex: 1 1 520px; min-inline-size: 0; display: flex; flex-direction: column; justify-content: center; gap: 13px; }   /* 22 */
.pg-about__media { flex: 0 1 380px; min-inline-size: 0; display: flex; justify-content: center; align-items: center; }
.pg-photo { inline-size: min(380px, 100%); aspect-ratio: 3 / 4; overflow: hidden; border: 1.5px solid #000; border-radius: 24px; }
.pg-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 60% 30%; }

/* reviews: the design's "all reviews" link under the strip */
.reviews__more { margin-block-start: 11px; font-weight: 700; }                  /* 20 */
.reviews__more a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; }

/* part 4: FAQ (real buttons with aria-expanded; script.js toggles the panels) */
.pg-faq { display: flex; flex-direction: column; gap: 18px; max-inline-size: 900px; margin-inline: auto; padding: 67px var(--gutter); }   /* gap 32, padding 120 */
.faq { border-block-start: 1px solid var(--rule); }
.faq__item { padding-block: 16px; border-block-end: 1px solid var(--rule); }   /* 20 */
.faq__q { font-size: inherit; }
.faq__btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  inline-size: 100%;
  min-block-size: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
  font-size: var(--fs-sub);                   /* FAQ question */
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-900);
}
.faq__icon { position: relative; flex: none; inline-size: 20px; block-size: 20px; color: var(--navy-700); transition: transform .2s ease; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; inset-block-start: 9px; inset-inline-start: 0; inline-size: 20px; block-size: 2px; border-radius: 1px; background: currentColor; }
.faq__icon::after { transform: rotate(90deg); }
.faq__btn[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__a { display: flex; flex-direction: column; gap: 8px; margin-block-start: 10px; font-size: var(--fs-small); line-height: 1.8; color: var(--text); }   /* 10, 12 */
.faq__source { font-size: calc(.875rem * var(--fs-scale)); }   /* source note, one step below the answer (design: 15 vs 18px) */
@media (scripting: none) { .faq__a[hidden] { display: flex !important; } }
.pg-disclaimer { font-size: var(--fs-small); color: var(--text); }


/* contact: the design's corner curves (inner pages only) */
.contact__deco { position: absolute; inset-block-start: 0; inset-inline-start: 0; block-size: 520px; inline-size: auto; pointer-events: none; }
@media (max-width: 1439px) { .contact__deco { display: none; } }   /* below 1440 it would sit over the form title and labels */
.contact__inner { position: relative; }

/* ---------- 18c. Inner-page building blocks (targeted-scan and later pages) ----
   Same rule as 18b: vertical space = design minus ~20% (design value in the
   comment); font sizes from the --fs-* tokens; horizontal spacing unchanged. */
:root { --bg-soft: #f1f5fa; --bg-tint: #e6f1fa; }   /* design section / note backgrounds */
.pg-white, .pg-sec { background: #fff; }                                      /* design: white sections */

/* hero extras: body paragraph + pill buttons over the video */
.pg-hero__text { max-inline-size: 640px; font-size: var(--fs-body); line-height: 1.8; color: var(--on-dark-muted); }
.pg-hero .hero__actions { margin-block-start: 6px; }                            /* 18 → 14 incl. gap */
.eyebrow--badge { padding: 4px 14px; border: 1px solid rgba(91, 194, 238, .35); border-radius: 999px; background: rgba(91, 194, 238, .12); }   /* design: light cyan tint on navy */

/* generic content section */
.pg-sec__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sec-gap, 31px);                    /* 56 */
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding: var(--sec-pad, 78px) var(--gutter); /* 140 */
}
.pg-split { display: flex; flex-wrap: wrap; gap: 22px 72px; }                   /* 40 72 */
.pg-split__head { flex: 1 1 300px; min-inline-size: 0; display: flex; flex-direction: column; gap: 8px; }   /* 14 */
.pg-split__body { flex: 2 1 520px; min-inline-size: 0; display: flex; flex-direction: column; gap: 13px; }   /* 22 */
.pg-split .h2, .sec-head .h2 { margin: 0; }
.sec-head--center { align-items: center; text-align: center; }
.sec-head__lead { max-inline-size: 760px; margin-block-start: 5px; }            /* 6 */

/* note boxes (shield icon + text) */
.pg-note__title { font-size: var(--fs-sub); font-weight: 700; color: var(--navy-700); }

/* card grids */
.pg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 13px 24px; list-style: none; padding: 0; }   /* 24 */
.pg-cards--wide { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 13px 22px; }   /* 22 */
.pg-card { display: flex; flex-direction: column; gap: 7px; padding-block: 17px; }   /* 12–14, 30–36 */
.pg-card__big { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; color: var(--link); }   /* 4.96:1 on #F7FCFF */
.pg-card p, .pg-card li { font-size: var(--fs-small); line-height: 1.8; color: var(--text); }
.pg-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-block-start: 5px; font-weight: 700; }
.pg-links .text-link { display: inline-flex; align-items: center; min-block-size: var(--tap); }   /* 44px tap target */
.pg-links a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; }



/* sections on the page background with a top rule (designs with 120px / 48px section spacing) */
.pg-sec--plain { --sec-pad: 67px; --sec-gap: 27px; background: none; border-block-start: 1px solid var(--line); }   /* 120, 48 */
/* text beside a figure (YouTube Short, scan image) */
.pg-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 31px 56px; }   /* 56 */
.pg-row--center { align-items: center; }
.pg-row__text { flex: 999 1 560px; min-inline-size: 0; display: flex; flex-direction: column; gap: 13px; }   /* 24 */
.pg-row__fig { flex: 1 1 460px; min-inline-size: 0; display: flex; flex-direction: column; gap: 8px; margin: 0; }   /* 14 */
.pg-shot { position: relative; overflow: hidden; border: 1.5px solid #000; border-radius: 24px; background: #000; }
.pg-shot img { display: block; inline-size: 100%; block-size: auto; }
.pg-shot__tm { position: absolute; inset-inline-end: 18px; inset-block-end: 14px; font-size: var(--fs-h2); font-weight: 500; line-height: 1; color: rgba(255, 255, 255, .85); }
/* ruled list (heading + text per row) */
.pg-rules { display: flex; flex-direction: column; border-block-start: 1px solid var(--rule); list-style: none; padding: 0; }
.pg-rules--col { flex: 1 1 420px; min-inline-size: 0; }
.pg-rules__item { display: flex; flex-direction: column; gap: 5px; padding-block: 15px; border-block-end: 1px solid var(--rule); }   /* 6, 28 */
.weeks--single .weeks__item { padding-block: 22px; }                            /* 40 */
/* big-number stats */
.pg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px 40px; }   /* 40 */
.pg-stat { display: flex; flex-direction: column; gap: 6px; padding-block-start: 13px; border-block-start: 1px solid var(--rule); }   /* 8, 24 */
.pg-sec__note { max-inline-size: 820px; margin-block-start: 6px; }              /* 8 */
/* links inside running text: underlined, not colour alone (WCAG 1.4.1) */
.pg-inline-link { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; font-weight: 600; }
/* thin-line wave dividers */
.pg-lines { max-inline-size: var(--container); margin-inline: auto; padding: 0 var(--gutter) 22px; }   /* 40 */
.pg-lines::before { content: ""; display: block; block-size: 170px; opacity: .7; background: center / 100% 100% no-repeat; }   /* decorative, stretched to 170px like the design */
.pg-lines--b::before { background-image: url("/assets/img/lines-divider-b-1200.webp"); }
@media (max-width: 760px) {
  .pg-lines--b::before { background-image: url("/assets/img/lines-divider-b-600.webp"); }
}

/* section variants */
.pg-sec--flush { border-block-start: 0; }
/* tighter joins between sections (nuchal, fertility) */
.pg-sec--join > .pg-sec__inner { padding-block-end: 0; }
.pg-sec--snug-start > .pg-sec__inner { padding-block-start: 22px; }
.pg-sec--snug-end > .pg-sec__inner { padding-block-end: 22px; }
.pg-divider--wide.pg-divider--slim img { inline-size: min(560px, 100%); }
/* a week list directly in a section must not stretch: its flex-basis is meant for rows, not the column (fixed a ~500px empty gap) */
.pg-sec__inner > .weeks { flex: none; }
.pg-sec--grey { background: var(--bg-reviews); border-block-start: 0; }
.pg-sec--loose { --sec-gap: 41px; }                                             /* 72 */
.pg-narrow { max-inline-size: 860px; }
.pg-lead-accent { color: var(--navy-700); }
/* 16:9 YouTube video (same click-to-load facade as the Shorts) */
.yt--wide { flex: none; inline-size: 100%; max-inline-size: 860px; margin-inline: 0; }
.yt--wide .yt__facade, .yt--wide .yt__frame { aspect-ratio: 16 / 9; }
/* expandable panel built from the FAQ component (design: <details>) */
.faq--panel .faq__btn { font-size: var(--fs-sub); }
.faq--panel .faq__a { gap: 18px; font-size: var(--fs-body); }                   /* 22 */
.pg-sub-block { display: flex; flex-direction: column; gap: 4px; }
/* checklist + tip */
.pg-day { display: flex; flex-direction: column; gap: 10px; }                   /* 18 */
.pg-checks { display: flex; flex-direction: column; gap: 7px; padding: 0; list-style: none; }   /* 12 */
.pg-checks li { display: flex; align-items: baseline; gap: 12px; }
.pg-checks svg { flex: none; color: var(--link); transform: translateY(3px); }
.pg-tip { display: flex; flex-direction: column; gap: 4px; padding: 13px 28px; border-radius: 24px; background: #fff; }   /* 24 */
/* numbered steps */
.pg-steps { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; }   /* 14 */
.pg-steps li { display: flex; gap: 16px; }
.pg-steps__n { flex: 0 0 32px; font-size: var(--fs-sub); font-weight: 700; color: var(--link); }
.pg-steps--ruled { gap: 0; border-block-start: 1px solid var(--rule); }
.pg-steps--ruled li { gap: 20px; padding-block: 13px; border-block-end: 1px solid var(--rule); }   /* 24 */
/* wide photo with caption */
.pg-photo-wide { aspect-ratio: 16 / 9; overflow: hidden; border: 1.5px solid #000; border-radius: 24px; }
.pg-photo-wide img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 40%; }
/* small white cards */
.pg-minis { display: flex; flex-wrap: wrap; gap: 11px 20px; }
.pg-mini { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; padding: 15px 28px; border-radius: 24px; background: #fff; }   /* 28, 8 */
/* "when to get checked" alert card with chips */
.pg-alert { display: flex; flex-direction: column; gap: 9px; max-inline-size: 900px; padding: 20px 36px; border: 1.5px solid var(--navy-900); border-radius: 24px; background: #fff; }   /* 36, 16 */
.pg-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0; list-style: none; }
.pg-chips li { padding: 6px 18px; border: 1px solid #b8c6d6; border-radius: 999px; font-size: var(--fs-small); font-weight: 600; color: var(--navy-900); }
.weeks--narrow { max-inline-size: 900px; }
/* two text columns */
.pg-cols { display: flex; flex-wrap: wrap; gap: 31px 80px; }                    /* 56 */
.pg-cols > div { flex: 1 1 420px; min-inline-size: 0; display: flex; flex-direction: column; gap: 10px; }   /* 18 */
.pg-cols .h2 { margin: 0; }
/* podcast link pill */
.pg-podcast { align-self: flex-start; display: flex; align-items: center; gap: 16px; margin-block-start: 8px; padding: 8px 10px; padding-inline-end: 26px; border-radius: 999px; background: #fff; }   /* 10 */
.pg-podcast__icon { flex: none; display: flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--navy-700); color: #fff; }
.pg-podcast__text { display: flex; flex-direction: column; line-height: 1.35; }
.pg-podcast__title { font-size: var(--fs-body); font-weight: 700; color: var(--navy-700); }
.pg-podcast__sub { font-size: var(--fs-small); color: var(--text); }
.pg-photo--center img { object-position: 50% 30%; }
.pg-rule-top { border-block-start: 1px solid var(--line); }

/* disclaimer as the last line of the content (pages whose FAQ is not the last section) */
.pg-disclaimer--end { padding-block-end: 31px; }
/* related tests + "reviewed by" line, just above the disclaimer on procedure pages */
.pg-related { display: flex; flex-direction: column; gap: 2px; margin-block: 26px 6px; }
.pg-related__title { margin: 0; }
.pg-related ul, .pg-links--list, .pg-clinic { list-style: none; padding: 0; }
.pg-reviewed { margin-block-end: 6px; font-size: var(--fs-small); color: var(--text); }
.pg-clinic { display: flex; flex-direction: column; gap: 6px; margin-block-end: 8px; }
.pg-clinic a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
.pg-reviewed a { text-decoration: underline; text-underline-offset: .25em; }
.nowrap { white-space: nowrap; }
/* /about/: services without a page (plain text in the links list) + other work locations */
.pg-more__head { margin-block-start: 26px; }
.pg-more { list-style: none; padding: 0; margin-block: 12px 8px; display: flex; flex-wrap: wrap; gap: 16px; }
.pg-more__item { flex: 1 1 280px; padding: 20px 24px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; }
.pg-more__item p { margin: 0; }
.pg-more__name { margin-block-end: 4px !important; }
.pg-more__note { font-size: var(--fs-small); color: var(--text); }
.pg-more__note a { text-decoration: underline; text-underline-offset: .25em; }
/* "according to the literature" note under a figure in a table cell */
.pg-table__note { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--text); }
html.a11y-contrast .pg-more__item { background: #000 !important; border-color: #fff !important; }
html.a11y-contrast html.a11y-contrast .pg-more__item, html.a11y-contrast .pg-more__name, html.a11y-contrast .pg-more__note, html.a11y-contrast .pg-table__note { color: #fff !important; }
/* top box with a YouTube Short beside the text (cvs design) */
.pg-hero__inner--row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 27px 72px; }   /* 48 */
.pg-hero__col { flex: 999 1 560px; min-inline-size: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.pg-hero .yt { flex: 1 1 260px; max-inline-size: 300px; }
.pg-hero .yt__caption { color: #fff; }
.pg-hero .yt__by { color: var(--on-dark-muted); }
/* "the big advantage" box with a two-item comparison */
.pg-adv { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 56px; padding: 25px 48px; border-radius: 32px; background: #fff; }   /* 44, 32 */
.pg-adv__text { flex: 1 1 320px; min-inline-size: 0; display: flex; flex-direction: column; gap: 6px; }   /* 8 */
.pg-adv__cmp { flex: 1 1 360px; display: flex; margin: 0; padding: 0; list-style: none; gap: 20px; align-items: stretch; }
.pg-adv__item { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; padding: 18px 24px; border: 1px solid var(--bg-contact); border-radius: 24px; background: var(--bg-contact); }   /* 22 */
.pg-adv__item--muted { border-color: var(--rule); background: none; }
.pg-adv__label { font-size: var(--fs-small); font-weight: 700; color: var(--navy-700); }
.pg-adv__num { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; color: var(--navy-700); }
.pg-adv__unit { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.pg-adv__item--muted .pg-adv__label, .pg-adv__item--muted .pg-adv__num, .pg-adv__item--muted .pg-adv__unit { color: var(--muted); }
/* link card to a related page */
.pg-linkcard { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; max-inline-size: 900px; padding: 15px 30px; border-radius: 24px; background: #fff; }   /* 26 */
.pg-linkcard__text { display: flex; flex-direction: column; gap: 4px; }
.pg-linkcard__title { font-weight: 700; color: var(--navy-700); }
.pg-linkcard__desc { color: var(--text); }
.pg-linkcard__btn { display: flex; align-items: center; gap: 10px; min-block-size: var(--tap); padding: 8px 22px; border: 1.5px solid var(--navy-700); border-radius: 999px; font-size: var(--fs-btn); font-weight: 700; color: var(--navy-700); }
/* "must" badge */
.pg-badge { align-self: flex-start; padding: 4px 14px; border-radius: 999px; background: var(--bg-contact); font-size: var(--fs-small); font-weight: 700; color: var(--navy-700); }
.pg-help { display: flex; flex-direction: column; gap: 13px; }                  /* 24 */
.pg-help .h2 { margin: 0; }
.pg-mini__label { font-weight: 700; color: var(--navy-700); }
.pg-mini__value { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; color: var(--link); }
.pg-mini__note { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
/* comparison table (scrolls sideways on phones) */
.pg-table-wrap { overflow-x: auto; border-radius: 20px; background: #fff; }
.pg-table { inline-size: 100%; min-inline-size: 480px; border-collapse: collapse; text-align: start; font-size: var(--fs-small); color: var(--navy-900); }
.pg-table th, .pg-table td { padding: 13px 22px; border-block-end: 1px solid #e3ebf2; text-align: start; }   /* 16 */
.pg-table thead th { padding-block: 14px; border-block-end-color: var(--rule); font-size: var(--fs-sub); font-weight: 700; }   /* 18 */
.pg-table tbody tr:last-child > * { border-block-end: 0; }
.pg-table tbody th { font-weight: 700; color: var(--muted); white-space: nowrap; }
.pg-table .pg-table__hl { background: #f2f7fe; }
.pg-table thead .pg-table__hl { background: var(--bg-contact); color: var(--navy-700); }

.pg-hero .yt__facade { border-color: rgba(255, 255, 255, .4); }
/* light top box (legal pages) */
.pg-hero--light { background: var(--bg-contact); }
.pg-hero--wave-dark .pg-hero__inner { padding-block: 67px 84px; }      /* 120/150 (targeted-scan) */
/* procedure pages: navy top box with a YouTube Short to the left of the text (desktop) / under it (phones) */
.pg-hero--wave-dark .pg-hero__inner--video { flex-wrap: nowrap; padding-block: 45px 56px; }
.pg-hero__inner--video .pg-hero__col { flex: 1 1 auto; }
.pg-hero__video.yt { flex: 0 0 auto; inline-size: 280px; max-inline-size: 100%; margin-inline: auto; }
@media (min-width: 901px) { .pg-hero__inner--video { gap: 72px; } }
@media (max-width: 900px) { .pg-hero--wave-dark .pg-hero__inner--video { flex-direction: column; align-items: stretch; gap: 31px; padding-block: 36px 45px; } }
/* design wave decorations: CSS backgrounds, so phones (where the designs hide them) never download them */
@media (min-width: 901px) {
  .pg-hero--wave-dark::before { content: ""; position: absolute; z-index: 0; background: center / contain no-repeat; pointer-events: none; }
  .pg-hero--wave-dark::before { aspect-ratio: 1059 / 355; background-image: image-set(url("/assets/img/wave-hero-540.webp") 1x, url("/assets/img/wave-hero-1059.webp") 2x); }
  .pg-hero--wave-dark::before { inset-inline-end: 2%; inset-block-end: 30px; inline-size: min(38%, 500px); opacity: .16; }
}
.pill--accent { background: #5bc2ee; border-color: #5bc2ee; color: var(--navy-900); }   /* design accent; 8.2:1 */
.pg-hero--light :focus-visible { outline-color: var(--focus); }
.pg-hero--light .eyebrow { color: var(--navy-700); }
.pg-hero--light h1 { color: var(--navy-900); }
.pg-hero--light .pg-hero__lead { color: var(--navy-700); }
.pg-hero--light .pg-hero__text { color: var(--text); }
.pg-hero--light .cta-icon__label { color: var(--navy-700); }
/* four small numbered cards */
.pg-cards--four { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 11px 20px; }
.pg-card__n { font-size: var(--fs-sub); font-weight: 700; color: var(--navy-700); }
.pg-card .sub { margin: 0; }
/* row label with a small English subtitle ("חלק 1 / 2D Ultrasound") */
.weeks__sub { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
/* centred "לקביעת תור" between sections */
.pg-cta-row { display: flex; justify-content: center; padding: 0 var(--gutter) 56px; }   /* 100 */
/* targeted-scan "לקביעת תור" section: centred heading, text and buttons on the page background */
/* decorative waves */
.pg-sec--deco { position: relative; overflow: hidden; }
.pg-sec--deco > .pg-sec__inner { position: relative; z-index: 1; }
.pg-deco { position: absolute; z-index: 0; block-size: auto; pointer-events: none; }
.pg-deco--videos { inset-block-start: 40px; inset-inline-end: -60px; inline-size: 760px; opacity: .55; }
.pg-deco--safety { inset-block-end: -40px; inset-inline-end: -80px; inline-size: 620px; opacity: .45; }
@media (max-width: 760px) { .pg-deco { display: none; } }
.pg-divider--wide img { inline-size: min(1100px, 100%); opacity: .8; }
/* two videos side by side: 16:9 + Short */
.pg-alert .pg-strong { font-weight: 700; color: var(--navy-900); }

/* photo with a soft shadow instead of the black frame */

/* ---------- 19. Motion preferences ---------------------------------- */
/* ---------- Legal pages (accessibility statement, privacy policy) ---- */
.legal { display: flex; flex-direction: column; gap: 13px; max-inline-size: calc(860px + 2 * var(--gutter)); margin-inline: auto; padding: 45px var(--gutter) 67px; font-size: var(--fs-body); line-height: 1.8; color: var(--text); }
.legal h2 { margin-block-start: 22px; font-size: var(--fs-h2); font-weight: 800; line-height: 1.3; color: var(--navy-900); }
.legal h2:first-child { margin-block-start: 0; }
.legal ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-inline-start: 1.25em; list-style: disc; }
.legal li::marker { color: var(--navy-700); }
.legal strong { font-weight: 700; color: var(--navy-900); }
.legal a { color: var(--link); text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.legal a:hover { color: var(--link-hover); opacity: 1; }
.legal__updated { margin-block-start: 13px; font-size: var(--fs-small); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 20. Windows high-contrast / forced colours ---------------- */
@media (forced-colors: active) {
  .pill, .nav-toggle, .field__input, .cookie-banner, .mr-strip__box, .hero__toggle, .yt__play { border: 1px solid CanvasText; }
  :focus-visible { outline-color: Highlight; }
  .hero__overlay { display: none; }
}

/* ---------- 21. Print ----------------------------------------------- */
@media print {
  .site-header, .mbar, .fab-col, .cookie-banner, .a11y-btn, .a11y-panel, .hero__video, .hero__toggle, .bot-nav, .wave-ethos, .wave-top, .about__waves,
  .pg-divider, .pg-dots, .pg-lines, .contact__deco, .yt, .pg-deco, .site-footer__pages { display: none !important; }
  .faq__a[hidden] { display: flex !important; }
  .pg-hero { background: none; }
  .pg-hero::before { display: none; }
  .pg-hero h1, .pg-hero__lead, .pg-hero__text, .pg-hero .eyebrow, .pg-hero .cta-icon__label { color: #000; }

  .hero { min-block-size: 0; background: none; }
  .hero__txt { padding: 0; color: #000; }
  .hero h1, .hero__lead { color: #000; }
  body { padding: 0; background: #fff; }
}
/* Waze / phone links in cards (44px tap height) */
.pg-more__item a { display: inline-flex; align-items: center; min-block-size: var(--tap); text-decoration: underline; text-underline-offset: .25em; font-weight: 700; }
.pg-clinic a[href^="https://waze"] { text-decoration: underline; text-underline-offset: .25em; font-weight: 700; }
/* Insurer logo on a white tile (Phoenix box, /gynecology-consultations/) */
.pg-partner-logo { align-self: flex-start; box-sizing: content-box; inline-size: 112px; block-size: auto; padding: 8px 12px; background: #fff; border: 1px solid var(--card-border); border-radius: 12px; }
@media (min-width: 901px) { .pg-partner-logo { inline-size: 140px; padding: 10px 14px; } }