:root {
  --green-900: #1f3d34;
  --green-800: #1f3d34;
  --green-650: #1f3d34;
  --sage-500: #7c8c7c;
  --paper: #f4f4f0;
  --white: #ffffff;
  --cream-50: #ffffff;
  --cream-100: #f4f4f0;
  --cream-200: #d4cdbb;
  --sand-200: #d4cdbb;
  --sand-100: #f4f4f0;
  --stone-500: #474748;
  --charcoal: #474748;
  --accent: #33b3ac;
  --line: rgba(31, 61, 52, 0.18);
  --shell: 1280px;

  /* Typefaces — approved brand faces, now with a real fallback so Hebrew
     never drops to the browser's default serif if Google Fonts is slow. */
  --font-headline: "Heebo", "Assistant", system-ui, sans-serif;
  --font-body: "Assistant", "Heebo", system-ui, sans-serif;
  --font-display: var(--font-headline);

  /* Type scale — 8 steps replacing 24 ad-hoc sizes.
     Floor is 15px: nothing on this site is small enough to squint at. */
  --fs-display: clamp(46px, 6.8vw, 104px);
  --fs-h2:      clamp(34px, 3.9vw, 68px);
  --fs-h3:      clamp(25px, 2.2vw, 38px);
  --fs-lead:    clamp(21px, 1.9vw, 32px);
  --fs-body:    clamp(20px, 1.75vw, 29px);
  --fs-sm:      clamp(18px, 1.5vw, 25px);
  --fs-label:   clamp(17px, 1.35vw, 22px);
  --fs-micro:   clamp(17px, 1.2vw, 20px);

  /* Leading — 4 values replacing 23. Hebrew needs more air than Latin;
     1.65 for running text, and never below 1.15 on Heebo headlines
     (final letters ק ן ך ף ץ collide under that). */
  --lh-display: 1.15;
  --lh-heading: 1.25;
  --lh-tight:   1.4;
  --lh-body:    1.65;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 1100px;
  color: var(--charcoal);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  text-align: right;
}

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

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

button,
input,
textarea,
select {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--green-900);
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  right: 12px;
  padding: 10px 16px;
  color: var(--white);
  background: var(--green-900);
  border-radius: 4px;
  transform: translateY(-180%);
}

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

.accessibility-launcher {
  position: fixed;
  z-index: 2147483644;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 18px;
  color: var(--white);
  background: var(--green-900);
  border: 3px solid var(--white);
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--green-900), 0 8px 22px rgba(0, 0, 0, 0.24);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.accessibility-launcher svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}

.accessibility-launcher:hover {
  background: var(--accent);
  /* White on #33b3ac measures 2.57:1. The dark green on the same fill is
     4.61:1 — the same pairing .button-accent and .header-cta already use. */
  color: var(--green-900);
  border-color: var(--green-900);
}

.accessibility-launcher:focus-visible {
  /* Turquoise as the OUTERMOST edge measured 2.04:1 against the page. The dark
     green reads 9.4-11.8:1 on every ground the site uses — same as the
     site-wide focus ring. */
  outline: 4px solid var(--green-900);
  outline-offset: 4px;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 7px var(--green-900);
}

.shell {
  width: min(calc(100% - 96px), var(--shell));
  margin-inline: auto;
}

/* The WordPress theme narrows generic site headers and footers; custom pages own their full desktop width. */
@media (min-width: 901px) {
  body.home-page .site-header:not(.dynamic-header),
  body.home-page .site-footer:not(.dynamic-footer),
  body.doctor-profile-body .site-header:not(.dynamic-header),
  body.service-page-body .site-header:not(.dynamic-header),
  body.service-page-body .site-footer:not(.dynamic-footer),
  body.doctor-profile-body .site-footer:not(.dynamic-footer) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  body.home-page .site-header .header-inner,
  body.service-page-body .site-header .header-inner,
  body.doctor-profile-body .site-header .header-inner {
    width: min(calc(100% - 96px), var(--shell));
    max-width: none;
  }
}

/* Grow the custom-page canvas smoothly on wide desktop displays without affecting mobile. */
@media (min-width: 1441px) {
  body.home-page .shell,
  body.home-page .site-header .header-inner,
  body.team-page .shell,
  body.team-page .site-header .header-inner,
  body.doctor-profile-body .shell,
  body.service-page-body .shell,
  body.service-page-body .site-header .header-inner,
  body.doctor-profile-body .site-header .header-inner {
    width: min(calc(100% - 160px), 1720px);
  }

  /* Preserve the full open-entrance image on wide desktop displays. */
  body.home-page .about-image-wrap img {
    height: auto;
  }
}

.preview-badge {
  position: absolute;
  z-index: 50;
  top: 110px;
  left: 16px;
  padding: 8px 14px;
  color: var(--white);
  background: var(--green-900);
  border: 1px solid rgba(255, 255, 255, 0.34);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  height: 94px;
  color: var(--white);
  background: var(--green-800);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.header-inner {
  display: grid;
  grid-template-columns: 188px 1fr 332px;
  align-items: center;
  height: 100%;
  gap: 30px;
}

.brand {
  display: flex;
  align-items: center;
  align-self: stretch;
  width: 188px;
  padding: 15px 20px;
  background: var(--white);
}

.brand img {
  display: block;
  width: 148px;
  height: auto;
}

.brand picture {
  display: block;
  line-height: 0;
}

/* Desktop header: use the official light logo directly on the brand colour. */
@media (min-width: 901px) {
  /* Keep anchor destinations clear of the fixed-height desktop bar. */
  html {
    scroll-padding-top: 118px;
  }

  /*
   * The WordPress theme also styles generic headers.  These selectors are
   * deliberately page-specific and explicit so the custom header remains a
   * full-width sticky bar on both the home and doctor-profile templates.
   */
  body.home-page .site-header,
  body.doctor-profile-body .site-header,
  body.service-page-body .site-header,
  body.team-page .site-header,
  body.team-page .site-header {
    position: sticky !important;
    top: 0;
    z-index: 100;
    display: block;
    width: 100% !important;
    min-width: 100%;
    max-width: none !important;
    height: 112px !important;
    min-height: 112px;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  body.home-page .site-header .header-inner,
  body.service-page-body .site-header .header-inner,
  body.doctor-profile-body .site-header .header-inner {
    height: 100%;
    margin-inline: auto !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* Keep the open door and the clinic reception visible in the desktop crop. */
  .about-image-wrap img {
    object-position: center;
  }

  .preview-badge {
    top: 128px;
  }

  .header-inner {
    grid-template-columns: 232px minmax(0, 1fr) 342px;
    gap: 22px;
  }

  .brand {
    align-self: center;
    justify-content: flex-start;
    width: 220px;
    height: 96px;
    padding: 0;
    background: transparent;
  }

  .brand img {
    width: 220px;
    max-height: 96px;
    object-fit: contain;
    filter: none;
  }
}

@media (min-width: 1441px) {
  html {
    scroll-padding-top: 140px;
  }

  body.home-page .site-header,
  body.doctor-profile-body .site-header,
  body.service-page-body .site-header,
  body.team-page .site-header,
  body.team-page .site-header {
    height: 124px !important;
    min-height: 124px;
  }

  .preview-badge {
    top: 140px;
  }

  .header-inner {
    grid-template-columns: 276px minmax(0, 1fr) 360px;
    gap: 30px;
  }

  .brand {
    width: 260px;
    height: 112px;
  }

  .brand img {
    width: 260px;
    max-height: 112px;
  }

}

.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Fluid, not fixed. A constant 30px gap left the four links huddled in the
     middle of an 1,820px column on a wide monitor, with roughly 660px of dead
     space on each side of the cluster. The gap now grows with the canvas that
     created the space. */
  /* The gap is the shock absorber. `.main-nav a` is flex:0 0 auto + nowrap, so
     when space runs short the links cannot shrink or wrap - they overflow the
     track SILENTLY. Measured at 1201px: +8px of slack with Heebo/Assistant but
     -13px on the fallback stack, i.e. two links outside the track whenever
     Google Fonts fails. This slope yields ~14px at 1201 and ~87px at 2560. */
  gap: clamp(14px, calc(5.37vw - 50px), 92px);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.main-nav a {
  /* A menu item is a label, not a paragraph: it must never break across two
     lines. Flex items shrink below their content width by default, which is
     what wrapped every link at 1024px. */
  flex: 0 0 auto;
  padding-block: 12px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.main-nav a:hover {
  border-bottom-color: var(--accent);
}

.header-actions {
  display: grid;
  grid-template-columns: 1fr 126px;
  align-items: center;
  gap: 12px;
}

.header-phone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* WCAG 2.2 AA (2.5.8) floor. On the accessibility statement, whose header is
     shorter, the two stacked lines came to 23px - one pixel short. */
  justify-content: center;
  min-height: 24px;
  line-height: 1.2;
}

.header-phone span {
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--fs-label);
  font-weight: 700;
}

.header-phone strong {
  margin-top: 4px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 700;
}

.header-cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  color: var(--green-900);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.menu-toggle,
.mobile-nav {
  display: none;
}

.hero {
  position: relative;
  display: flex;
  min-height: 710px;
  overflow: hidden;
  color: var(--white);
  background: var(--green-900) url("assets/site/hero-afik-desktop.webp") 50% 45% / cover no-repeat;
}

.hero-shade {
  position: absolute;
  inset: 0;
  /* A light wash only — it lifts the whole frame slightly without greying out
     the landscape. The contrast work is done by the panel behind the text. */
  /* No wash at all. The contrast is carried entirely by the panel behind the
     text — measured 6.03:1 even over a pure-white pixel — so any tint over the
     rest of the photograph was doing no accessibility work whatsoever and only
     dulled the Golan landscape. The photograph now renders exactly as shot. */
  background: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-block: 110px 125px;
}

.hero-content::before {
  position: absolute;
  z-index: -1;
  /* The container carries 110px/125px of padding to place the block in the hero;
     insetting by that much minus the breathing room leaves an even 56px of card
     around the content itself, whatever height the content turns out to be. */
  top: 54px;
  right: -44px;
  bottom: 69px;
  width: min(800px, 61vw);
  content: "";
  pointer-events: none;
  background: rgba(31, 61, 52, 0.78);
  border-radius: 18px;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--green-650);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
}

.hero-eyebrow {
  color: var(--white);
  text-shadow: 0 1px 8px rgba(12, 30, 25, 0.62);
}

/* THREE EXPLICIT LINES, 15/09/2026. The heading is broken in the markup, not
   left to the browser, and that is the third attempt at this line.
   Attempt one let it wrap freely: on a phone it split after "לרפואה" and left
   "מקצועית" hanging alone. Attempt two joined the phrase with a non-breaking
   space, which fixed the phone and broke the desktop - an unbreakable token
   wider than its box cannot wrap, so on a tall window, where the font reaches
   its ceiling, it ran straight out of the card and onto the photograph.
   Explicit breaks have neither failure: every line is decided here, nothing is
   unbreakable, and if a line ever did outgrow its box it would wrap inside the
   card rather than escape it. text-wrap: balance was measured first and changes
   nothing - the width cap, not the balancer, is what decides this break. */

.hero h1 {
  /* DERIVED FROM THE CARD, 15/09/2026, after I broke this on 14/09.
     The heading became one long phrase and I raised the cap to 980px to stop
     "מקצועית" landing on a line of its own. That fixed the wrap and broke
     something worse: the dark panel behind the hero is .hero-content::before,
     width min(800px, 61vw), inset right by -44px - and a 980px heading simply
     runs out of it. Yuval saw the ת of "מקצועית" sitting on the photograph.
     My measurement had missed it because I compared the heading to its
     container; the visible card is a PSEUDO-ELEMENT and has no box of its own
     in getBoundingClientRect. Measured properly, through
     getComputedStyle(el, '::before'): the text hung 111-138px outside the card
     at every width from 1024 to 2560.
     The cap is now the card's own formula minus the 44px overhang and the 56px
     of breathing room the card is built to keep - so it tracks the card instead
     of guessing at it. Re-measured at 1024, 1200, 1440, 1920 and 2560: the text
     sits 58-81px inside the card's left edge everywhere. */
  max-width: min(700px, calc(61vw - 100px));
  margin: 0;
  font-family: var(--font-headline);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  text-shadow: 0 2px 12px rgba(12, 30, 25, 0.56);
}

.hero-copy {
  max-width: 52ch;
  margin: 28px 0 0;
  color: var(--white);
  font-size: var(--fs-lead);
  line-height: 1.55;
  text-shadow: 0 1px 8px rgba(12, 30, 25, 0.62);
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 36px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  cursor: pointer;
}

.button-primary {
  color: var(--white);
  background: var(--green-800);
  border-color: var(--green-800);
}

.button-primary:hover,
.button-primary:focus-visible {
  /* --green-900 and --green-800 resolve to the SAME hex, so hovering repainted the
     button in the colour it already had. A visible change plus a slight lift is
     what tells someone the control is live. */
  background: var(--green-800);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.button-light {
  color: var(--green-900);
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--white);
}

.button-accent {
  color: var(--green-900);
  background: var(--accent);
  border-color: var(--accent);
}

.button-accent:hover,
.header-cta:hover {
  color: var(--white);
  background: var(--green-800);
  border-color: var(--white);
}

#main-content,
#paths,
#services,
#doctors,
#about,
#contact {
  scroll-margin-top: 110px;
}

.hero-scroll {
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  transform: translateX(50%);
  color: var(--white);
  font-size: var(--fs-label);
  /* Its own backing: it sits on bare photograph, where it measured 1.94:1.
     0.78 green behind it puts white above 4.5:1 regardless of the pixel under it. */
  background: rgba(31, 61, 52, 0.78);
  border-radius: 999px;
}

.hero-scroll span {
  color: var(--accent);
  font-size: var(--fs-lead);
}

.section-heading h2,
.about-copy h2,
.contact-copy h2,
.all-services h2 {
  margin: 0;
  color: var(--green-800);
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-heading);
}

.path-index,
.service-number {
  align-self: start;
  color: var(--green-800);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
}

.services-section {
  padding: 120px 0 72px;
  background: var(--cream-100);
}

/* The highlighted service and the full service list, below the team. Yuval,
   07/09/2026: "בין תחומי טיפול לסקירות הריון תכניס את הצוות הרפואי." */
.services-detail {
  padding: 96px 0 130px;
  background: var(--cream-100);
}

@media (max-width: 900px) {
  .services-detail {
    padding: 56px 0 64px;
  }
}

.split-heading {
  /* Was a two-column grid pinned to opposite edges. On a wide canvas the
     heading sat on one side and its own subtitle on the other, far enough
     apart that they read as two unrelated things. The subtitle belongs to the
     heading, so it now sits directly under it. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 54px;
}

.split-heading > p {
  max-width: 46ch;
}

.split-heading > p {
  margin: 0 0 6px;
  color: var(--stone-500);
  font-size: var(--fs-body);
}

.service-feature {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  min-height: 500px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.service-feature::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 7px;
  height: 100%;
  content: "";
  background: var(--accent);
}

.service-feature-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 66px 76px 62px;
}

.service-feature-copy .service-number {
  position: static;
  margin-bottom: 42px;
}

.service-feature .service-kicker,
.service-mini-card .service-kicker {
  margin: 0 0 8px;
  color: var(--green-800);
  font-size: var(--fs-label);
  font-weight: 700;
}

.service-feature h3 {
  max-width: 22ch;
  margin: 0;
  color: var(--green-800);
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.17;
}

.service-feature .service-doctor {
  margin: 20px 0 0;
  color: var(--charcoal);
  font-size: var(--fs-body);
  font-weight: 600;
}

.service-feature-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 30px 0 36px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.service-feature-items span {
  padding: 0 18px;
  color: var(--green-800);
  border-left: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.service-feature-items span:first-child {
  padding-right: 0;
}

.service-feature-items span:last-child {
  border-left: 0;
}

.service-feature-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 50px 42px;
  background: var(--green-800);
}

.service-feature-portrait img {
  /* Fluid, like the roster portraits. The green panel grows with the canvas -
     384px wide at 1280, 792px at 2560 - but this was pinned at 310px, so the
     visible disc (77.4% of the box, see the clip-path) stayed 240px and fell from
     0.60 of the panel to 0.35. The face ended up floating in a field of green. */
  width: min(100%, clamp(310px, 24vw, 520px));
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.service-feature-portrait figcaption {
  margin-top: 14px;
  color: var(--white);
  font-family: var(--font-headline);
  font-size: var(--fs-body);
  font-weight: 700;
}

.service-mini-card .service-number {
  position: absolute;
  top: 34px;
  left: 22px;
}

.all-services {
  padding: 100px 0 88px;
  color: var(--charcoal);
  background: var(--cream-200);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.all-services h2 {
  color: var(--green-800);
}

.light-eyebrow {
  color: var(--accent);
}

.service-list-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* The three groups hold 8 / 16 / 6 items. Stretching them to equal height
     left two boxes with large empty areas — pure visual noise. */
  align-items: start;
  gap: 22px;
  padding: 48px 0 54px;
}

.service-list-columns > div {
  padding: 30px 28px;
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.service-list-columns h3 {
  margin: 0;
  color: var(--green-800);
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.service-list-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.service-list-head span {
  flex: none;
  color: var(--green-900);
  font-size: var(--fs-label);
  font-weight: 700;
}

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

.service-list-columns li {
  position: relative;
  margin: 9px 0;
  padding-right: 18px;
  color: var(--charcoal);
  font-size: var(--fs-sm);
}

.service-list-columns li::before {
  position: absolute;
  top: 12px;
  right: 0;
  width: 5px;
  height: 5px;
  content: "";
  background: var(--accent);
  border-radius: 50%;
}

.text-link-light {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 5px;
  color: var(--green-800);
  border-bottom: 1px solid var(--sand-200);
  font-weight: 700;
}

.text-link-light span {
  /* Turquoise on the sand surface measured 1.62:1, under the 3:1 required for
     large text. */
  color: var(--green-800);
}

.doctors-section {
  padding: 128px 0 140px;
  background: var(--cream-50);
}

.doctors-heading {
  margin-bottom: 34px;
}

.lead-doctor-section {
  padding: 72px 0 64px;
  background: var(--cream-50);
}

@media (max-width: 900px) {
  .lead-doctor-section {
    padding: 44px 0 40px;
  }
}

.team-lead-card {
  max-width: clamp(920px, 40vw, 1040px);
  margin-inline: auto;
  /* clip (not hidden) so the focus ring is not shaved off the card edge */
  overflow: clip;
  overflow-clip-margin: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.team-lead-link {
  display: grid;
  grid-template-columns: clamp(200px, 13vw, 300px) minmax(0, 1fr);
  align-items: stretch;
  min-height: 220px;
}

.team-lead-portrait {
  display: grid;
  place-items: center;
  padding: 12px;
  background: var(--cream-100);
  border-left: 1px solid var(--line);
}

.team-lead-portrait img {
  width: clamp(188px, 12vw, 276px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  clip-path: none;
}

.team-lead-copy {
  padding: 34px 40px;
  text-align: right;
}

.team-lead-label {
  margin: 0 0 8px;
  color: var(--green-900);
  font-size: var(--fs-label);
  font-weight: 700;
}

.team-lead-copy h2 {
  margin: 0;
  color: var(--green-800);
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 42px);
  line-height: var(--lh-display);
}

.team-lead-role {
  margin: 10px 0 0;
  color: var(--stone-500);
  font-size: var(--fs-body);
  line-height: 1.45;
}

.team-lead-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding-bottom: 6px;
  color: var(--green-800);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

.team-lead-link:hover .team-lead-more,
.team-lead-link:focus-visible .team-lead-more {
  color: var(--green-900);
  border-bottom-color: var(--accent);
}

.doctor-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  /* Back to 12px on 13/09/2026: the status line under this row is visible
     again on the home page and carries its own 30px, so this row no longer
     has to stand in for it. */
  margin-bottom: 12px;
}

.doctor-filter {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  color: var(--green-800);
  background: var(--white);
  border: 1px solid var(--sage-500);
  border-radius: 999px;
  font-size: var(--fs-label);
  font-weight: 700;
  cursor: pointer;
}

.doctor-filter:hover,
.doctor-filter.is-active {
  color: var(--white);
  background: var(--green-800);
  border-color: var(--green-800);
}

.doctor-filter-status {
  /* 13/09/2026: visible again on the HOME page only, and carrying a number.
     The journey, so nobody re-litigates it: 08/09 "stop counting" removed the
     counts; 09/09 the sentence "מוצג כל הצוות" was hidden at his request;
     13/09 "רק בדף הזה תחזיר את המספור" brings the number back - here alone.
     Elsewhere it stays visually hidden and keeps announcing to screen readers,
     which is why the hidden rules live on in the block below. */
  margin: 0 0 30px;
  color: var(--charcoal);
  font-size: var(--fs-label);
}

/* Every template except the home page keeps the line for screen readers only. */
body:not(.home-page):not(.home-page-compact-roster):not(.home-page-full-roster) .doctor-filter-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.doctor-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px 24px;
}

.doctor-card {
  min-width: 0;
  padding-top: 4px;
  text-align: center;
}

.doctor-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.doctor-card[hidden] {
  display: none;
}

.doctor-card img {
  width: 92%;
  /* Capped: at 4 columns an uncapped 92% portrait rendered 275px and pushed the
     team block to 2,238px on its own. The cap is the single biggest height saving
     on the page and costs nothing — the face is still the largest thing on the card. */
  /* Fluid. The visible disc is 77.4% of this box (see the clip-path below), so a
     frozen 184px cap rendered a 142px face under a 38px name - a ratio of 3.7
     where a portrait card wants roughly 6. */
  max-width: clamp(184px, 14vw, 300px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

/*
 * The approved 500x500 portrait assets already contain their own ring, centred
 * at (250, 266) with a 387px outer diameter. Clip to that same geometry so
 * extraction pixels outside the baked-in ring cannot appear as a second edge.
 */
.doctor-card img,
.service-feature-portrait img,
.service-doctor-portrait img,
.profile-portrait {
  clip-path: circle(38.7% at 50% 53.2%);
}

/* Some approved source portraits have natural hair above the ring. Their source-based
 * head-over-ring composition must remain visible rather than being clipped to the disc. */
.doctor-card img.portrait-head-over-ring,
.service-feature-portrait img.portrait-head-over-ring,
.profile-portrait.portrait-head-over-ring {
  clip-path: none;
}

.doctor-card h3 {
  margin: 14px 0 4px;
  color: var(--green-800);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
}

.doctor-card p {
  min-height: 42px;
  margin: 0;
  color: var(--stone-500);
  font-size: var(--fs-label);
  line-height: 1.45;
}

.doctor-card-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* auto, not a fixed gap: a name that wraps to two lines used to push this
     44px lower than its neighbours, and the row read as ragged. Yuval:
     "יש בלאגן בעיניים". The cards are already equal height, so pushing the
     link to the foot lines them all up however the name wraps. */
  margin-top: auto;
  padding-bottom: 2px;
  color: var(--green-800);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-label);
  font-weight: 600;
}

.doctor-card-link:hover .doctor-card-more {
  color: var(--green-900);
  border-color: var(--accent);
}

.doctor-cta .eyebrow {
  margin-bottom: 7px;
}

.about-section {
  padding: 120px 0;
  background: var(--cream-200);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5.4vw, 90px);
}

/* The photograph can take the larger share again once there is room for both. */
@media (min-width: 1441px) {
  .about-grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.about-copy h2 {
  max-width: 20ch;
}

.about-copy > p:not(.eyebrow) {
  max-width: 56ch;
  margin: 22px 0 0;
  color: var(--charcoal);
}

.about-copy .lead-copy {
  color: var(--green-800);
  font-size: var(--fs-lead);
  font-weight: 600;
}

.inline-link {
  display: inline-flex;
  gap: 10px;
  margin-top: 32px;
  padding-bottom: 6px;
  color: var(--green-800);
  border-bottom: 1px solid var(--sage-500);
  font-weight: 700;
}

.inline-link span {
  color: var(--green-800);
}

.about-image-wrap {
  margin: 0;
}

.about-image-wrap img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 10px;
}

.about-image-wrap figcaption {
  margin-top: 12px;
  color: var(--stone-500);
  font-size: var(--fs-label);
}

.contact-section {
  padding: 120px 0;
  color: var(--white);
  background: var(--green-900);
}

.contact-flow {
  display: grid;
  justify-items: center;
  gap: 34px;
}

.contact-flow .contact-copy {
  width: min(clamp(900px, 42vw, 1100px), 100%);
  text-align: center;
}

.contact-flow .contact-copy h2,
.contact-flow .contact-copy > p:not(.eyebrow) {
  max-width: 54ch;
  margin-inline: auto;
}

.contact-whatsapp {
  min-width: 240px;
}

.contact-flow > .lead-form-card {
  /* The lead form is the point of the site. It was pinned at 900px, so on a
     2,440px canvas it sat as a small island in the middle of the page. */
  width: min(clamp(900px, 46vw, 1180px), 100%);
  margin: 0;
  scroll-margin-top: 126px;
}

.lead-form-intro {
  margin: -10px 0 28px;
  color: var(--stone-500);
  font-size: var(--fs-sm);
}

.lead-form-grid .lead-form-wide {
  grid-column: 1 / -1;
}

.contact-routing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  /* Frozen at 900px, this row let the booking button SHRINK on wide screens:
     the text beside it grew with the type scale and took the space out of the
     button (609px at 1440, 568px at 2560). It now matches the lead form. */
  width: min(clamp(900px, 46vw, 1180px), 100%);
}

.contact-routing .contact-routing-phone {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-sm);
}

.contact-location-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: min(1100px, 100%);
  padding-top: 30px;
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--fs-body);
}

.contact-copy h2 {
  max-width: 20ch;
  color: var(--white);
  font-size: var(--fs-h2);
}

.contact-copy > p:not(.eyebrow) {
  max-width: 56ch;
  margin: 20px 0 28px;
  color: rgba(255, 255, 255, 0.76);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.contact-details {
  display: flex;
  gap: 70px;
  margin: 34px 0 0;
}

.contact-details div {
  padding-right: 18px;
  border-right: 2px solid var(--accent);
}

.contact-details dt {
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--fs-label);
  font-weight: 700;
}

.contact-details dd {
  margin: 4px 0 0;
  color: var(--white);
  font-size: var(--fs-body);
}

.contact-location {
  display: grid;
  gap: 9px;
}

.location-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.location-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 4px;
  font-size: var(--fs-label);
  font-weight: 700;
}

.location-links a:hover {
  color: var(--green-900);
  background: var(--accent);
  border-color: var(--accent);
}

.contact-card {
  padding: 44px;
  color: var(--charcoal);
  background: var(--paper);
  border-radius: 10px;
}

.form-note {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 10px;
  color: var(--green-800);
  background: rgba(51, 179, 172, 0.18);
  border-radius: 3px;
  font-size: var(--fs-label);
  font-weight: 700;
}

.contact-card h3 {
  margin: 0 0 24px;
  color: var(--green-800);
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.contact-card label {
  display: block;
  margin-bottom: 15px;
  color: var(--green-800);
  font-size: var(--fs-label);
  font-weight: 700;
}

.contact-card input,
.contact-card textarea,
.contact-card select {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 13px 14px;
  color: var(--charcoal);
  background: var(--white);
  /* --sand-200 gave the field a 1.20:1 edge against the card — below the 3:1
     WCAG 1.4.11 floor, i.e. a form field a sighted user cannot actually see.
     --stone-500 measures 6.32:1 against the card and 6.89:1 against the fill. */
  border: 1px solid var(--stone-500);
  border-radius: 4px;
  resize: vertical;
}

.contact-card input::placeholder,
.contact-card textarea::placeholder {
  color: var(--stone-500);
}

.contact-card button:disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.full-button {
  width: 100%;
}

.privacy-note {
  margin: 12px 0 0;
  color: var(--stone-500);
  font-size: var(--fs-label);
  text-align: center;
}

/* 22px tall as inline text, which is under the 24px minimum for a tap target
   (WCAG 2.5.8). Padding gives it a hittable box without moving the words. */
.privacy-note a {
  display: inline-block;
  padding-block: 4px;
}

.lead-form-card {
  width: 100%;
  margin: 0;
  scroll-margin-top: 126px;
}

.contact-grid > .lead-form-card {
  grid-column: 1 / -1;
  /* The lead form is the point of the site; it should not stay a 760px island
     on a 2,440px canvas. */
  width: min(clamp(760px, 46vw, 1040px), 100%);
  justify-self: center;
}

.lead-form-intro {
  margin: -10px 0 28px;
  color: var(--stone-500);
}

.lead-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.lead-form-grid .field-wide {
  grid-column: 1 / -1;
}

.lead-form textarea {
  min-height: 132px;
}

/* TOUCH TARGETS (19/09/2026). The fields were sitting at the browser default - 32px, and the
   select at 25px - while 82% of this site's traffic is mobile (Search Console, August: 186 of 226
   clicks). Anything under about 44px is a field people mis-tap, and mis-tapping a contact form is
   indistinguishable from deciding not to write.

   Scoped deliberately to .lead-form: this is the one form on the site, and no other control
   anywhere changes. Height comes from padding plus line-height rather than a fixed height, so the
   field still grows with the user's own font size instead of clipping the text - the same reason
   the rest of this stylesheet avoids fixed heights. */
/* The honeypot is excluded EXPLICITLY, not left to the clipping container. It is hidden today by
   .lead-form-trap (1x1, overflow:hidden, clip) so a 48px input inside it renders nothing - but a
   future edit to that container would silently expose a full-size field named "website", and a
   patient who filled it would have their enquiry classed as a bot and never mailed. The plugin's
   own comment calls that outcome worse than filing one piece of spam; it should not depend on a
   rule three selectors away. */
.lead-form input[type="text"]:not([name="website"]),
.lead-form input[type="tel"],
.lead-form input[type="email"],
.lead-form select {
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}

.lead-form textarea {
  padding: 10px 12px;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* The submit button is what every filled-in form ends on; it should never be the smallest thing
   on the page. */
.lead-form button[type="submit"] {
  min-height: 52px;
}

.lead-form-trap {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.form-status {
  margin: 0 0 24px;
  padding: 13px 15px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-weight: 700;
}

.form-status-success {
  color: var(--green-800);
  background: rgba(51, 179, 172, 0.14);
}

.form-status-error {
  color: var(--charcoal);
  background: var(--sand-200);
}

.contact-options-card > p:not(.privacy-note) {
  margin: -8px 0 26px;
  color: var(--stone-500);
  font-size: var(--fs-sm);
}

.contact-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* This is the one thing a visitor can finish without waiting for anyone, so
     it is sized as a primary action rather than a footnote. */
  min-height: 104px;
  padding: 24px 28px;
  /* Measured: turquoise fill is 5.66:1 against the dark-green section it sits
     on, and dark-green text on it is 4.61:1. The previous dark-on-dark version
     measured 1.00:1 — literally invisible. */
  color: var(--green-900);
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 8px;
}

.contact-option:hover,
.contact-option:focus-visible {
  background: var(--white);
  color: var(--green-900);
  border-color: var(--white);
}

.contact-option strong,
.contact-option small {
  display: block;
}

.contact-option strong {
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}

.contact-option small {
  margin-top: 2px;
  color: var(--green-900);
  font-size: var(--fs-sm);
}

.contact-option .contact-phone-number {
  margin-top: 4px;
  color: var(--green-900);
  font-size: var(--fs-body);
  font-weight: 700;
}

.contact-routing-phone {
  display: inline-flex;
  gap: 5px;
  margin: 16px 2px 0 0;
  color: var(--green-800);
  font-size: var(--fs-label);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-routing-phone:hover {
  color: var(--accent);
}

.contact-option > span:last-child {
  /* Was var(--accent) on a var(--accent) button: 1.00:1, invisible. This is the
     same token the button already uses for its text, measured at 4.61:1 here. */
  color: var(--green-900);
  font-size: var(--fs-lead);
}

/* ------------------------------------------------------------------
   Supporting text — every role routed through the scale.
   Replaces the old "readability pass", six rules of which were dead
   (overridden further down by SMALLER values than they intended).
   ------------------------------------------------------------------ */
.main-nav,
.button                       { font-size: var(--fs-sm); font-weight: 600; }
.eyebrow                      { font-size: var(--fs-sm); }
.service-feature .service-kicker { font-size: var(--fs-sm); }
.service-list-head span       { font-size: var(--fs-label); }
.service-list-columns li      { font-size: var(--fs-body); line-height: var(--lh-tight); }
.doctor-filter,
.doctor-filter-status         { font-size: var(--fs-sm); }
.doctor-card h3               { font-size: var(--fs-h3); line-height: var(--lh-heading); }
.doctor-card p                { font-size: var(--fs-sm); line-height: var(--lh-tight); }
.doctor-card-more             { font-size: var(--fs-label); }
.about-image-wrap figcaption,
.contact-details dt,
.location-links a,
.form-note                    { font-size: var(--fs-label); }
.contact-card label           { font-size: var(--fs-sm); }
.privacy-note                 { font-size: var(--fs-label); line-height: var(--lh-tight); }
.contact-option small         { font-size: var(--fs-label); }
.footer-grid h2               { font-size: var(--fs-sm); }
.footer-grid > div:not(.footer-brand) { font-size: var(--fs-sm); }
.profile-back                 { font-size: var(--fs-sm); }
.profile-role                 { font-size: var(--fs-h3); }
.profile-bio                  { font-size: var(--fs-lead); line-height: var(--lh-body); max-width: 620px; }
.profile-services li          { font-size: var(--fs-body); }

/* Measure — Hebrew running text stays inside a comfortable 65-72 characters.
   Four blocks previously ran 78-97 characters per line. */
.about-copy > p               { max-width: 34ch; }
.contact-copy > p             { max-width: 34ch; }
.hero-copy                    { max-width: 32ch; font-size: var(--fs-lead); }
.accessibility-article p      { max-width: 36ch; font-size: var(--fs-body); }
.accessibility-lead           { max-width: 34ch; }

.site-footer {
  padding: 72px 0 24px;
  color: var(--charcoal);
  background: var(--cream-50);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.65fr 0.75fr 0.85fr;
  gap: 72px;
  padding-bottom: 54px;
}

.footer-brand img {
  /* Was a flat 240px in a column that reaches 763px - 0.37 of the space, and
     smaller than the header logo above it. Three times over would be 840px, wider
     than the column itself, so this caps where it still breathes. */
  width: min(100%, clamp(240px, 22vw, 600px));
  height: auto;
}

.footer-brand p {
  max-width: 34ch;
  margin: 22px 0 0;
  color: var(--charcoal);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.55;
}

.footer-grid h2 {
  margin: 0 0 18px;
  color: var(--green-800);
  font-family: var(--font-headline);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.footer-grid > div:not(.footer-brand) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  color: var(--stone-500);
  font-size: var(--fs-body);
  line-height: 1.55;
}

.footer-grid a:hover {
  color: var(--green-800);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  color: var(--stone-500);
  border-top: 1px solid var(--sand-100);
  font-size: var(--fs-label);
  line-height: 1.5;
}

@media (min-width: 1441px) {
  .footer-grid {
    grid-template-columns: 1.4fr 0.75fr 0.85fr 0.95fr;
    gap: 96px;
  }

  .footer-brand img {
    /* Overrode the fluid base rule and pinned the logo back to 280px, which is
       where it ended up smaller than the header logo above it. */
    width: min(100%, clamp(300px, 24vw, 600px));
  }

  .footer-brand p {
    max-width: 42ch;
    font-size: var(--fs-lead);
  }

  .footer-grid h2 {
    font-size: var(--fs-lead);
  }

  .footer-grid > div:not(.footer-brand) {
    gap: 14px;
    font-size: var(--fs-body);
  }

  .footer-bottom {
    font-size: var(--fs-sm);
  }
}

/* Doctor profile pages */
.profile-not-found {
  min-height: 520px;
  padding-block: 140px;
}

.profile-not-found[hidden],
.profile-page[hidden] {
  display: none;
}

.profile-not-found h1,
.profile-heading h1,
.profile-content-section h2,
.profile-media-section h2,
.profile-contact-band h2 {
  font-family: var(--font-headline);
  font-weight: 700;
}

.profile-hero {
  min-height: 590px;
  background: var(--sand-200);
  border-bottom: 1px solid var(--line);
}

.profile-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) clamp(420px, 25vw, 600px);
  align-items: center;
  min-height: 590px;
  gap: 100px;
}

.profile-heading {
  max-width: clamp(720px, 48vw, 1120px);
}

.profile-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 54px;
  color: var(--green-800);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.profile-heading h1 {
  margin: 8px 0 12px;
  color: var(--green-800);
  font-size: clamp(56px, 5vw, 76px);
  line-height: var(--lh-display);
}

.profile-role {
  max-width: 26ch;
  margin: 0 0 36px;
  color: var(--green-800);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.4;
}

.profile-portrait-wrap {
  display: grid;
  place-items: center;
}

.profile-portrait {
  width: clamp(390px, 23vw, 560px);
  height: clamp(390px, 23vw, 560px);
  object-fit: contain;
}

/* Keep the portrait ring optically centred in the desktop profile hero. */
@media (min-width: 901px) {
  .profile-portrait-wrap {
    transform: translateY(-12px);
  }
}

.profile-content-section {
  padding: 116px 0;
  background: var(--cream-50);
}

.profile-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(350px, 0.75fr);
  align-items: start;
  gap: 110px;
}

.profile-bio-column h2,
.profile-media-section h2 {
  max-width: 20ch;
  margin: 8px 0 28px;
  color: var(--green-800);
  font-size: var(--fs-h2);
  line-height: 1.18;
}

.profile-bio {
  max-width: 60ch;
  color: var(--charcoal);
  font-size: var(--fs-body);
  line-height: 1.8;
}

.profile-bio p {
  margin: 0 0 18px;
}

.profile-services-card {
  padding: 46px 44px;
  color: var(--white);
  background: var(--green-800);
  border-top: 6px solid var(--accent);
}

.profile-services-card h2 {
  margin: 8px 0 28px;
  font-size: var(--fs-h3);
  line-height: 1.25;
}

.profile-services {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-services li {
  position: relative;
  padding: 15px 22px 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--fs-body);
  line-height: 1.45;
}

.profile-services li::before {
  position: absolute;
  top: 21px;
  right: 0;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  content: "";
}

.profile-media-section {
  padding: 106px 0;
  background: var(--white);
  border-block: 1px solid var(--line);
}

.profile-media-section[hidden] {
  display: none;
}

.profile-media-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(520px, 1.05fr);
  align-items: center;
  gap: 100px;
}

.profile-media-grid > div:first-child > p:last-child {
  max-width: 56ch;
  margin: 0;
  color: var(--stone-500);
  font-size: var(--fs-body);
}

.profile-media-placeholder {
  display: grid;
  place-items: center;
  min-height: 340px;
  /* sage measures 3.27:1 here — a dormant AA failure that would activate the
     moment this (currently hidden) section is switched on. sage cannot pass as
     small text on any light ground on this site; keep it for rules and icons. */
  color: var(--stone-500);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: var(--fs-label);
  font-weight: 600;
}

.profile-contact-band {
  padding: 76px 0;
  color: var(--white);
  background: var(--green-800);
}

.profile-contact-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}

.profile-contact-band h2 {
  margin: 8px 0 0;
  font-size: var(--fs-h2);
  line-height: 1.15;
}

.profile-contact-actions {
  display: flex;
  gap: 18px;
}

/* The two contact controls are the only thing on a doctor page that a visitor
   is meant to ACT on, and at the shared .button size they read as footer trim.
   Yuval asked for them much larger (07/09/2026). The icon is sized in em, so it
   grows with the label on its own. */
.profile-contact-actions .button {
  min-height: 74px;
  padding: 0 44px;
  font-size: clamp(20px, 1.6vw, 25px);
  border-radius: 7px;
}

.profile-contact-actions .link-icon {
  width: 1.25em;
  height: 1.25em;
}

.profile-footer {
  padding: 28px 0;
}

.profile-footer .footer-bottom {
  padding-top: 0;
  border-top: 0;
}

.main-nav,
.header-cta,
.eyebrow,
.hero h1,
.button,
.section-heading h2,
.about-copy h2,
.contact-copy h2,
.all-services h2,
.path-index,
.service-number,
.path-card h3,
.fact-item strong,
.service-card h3,
.service-list-columns h3,
.doctor-card h3,
.doctor-cta h3,
.contact-card h3,
.footer-grid h2 {
  font-family: var(--font-headline);
  font-weight: 700;
}

.hero h1 {
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 900px) {
  body {
    min-width: 0;
    overflow-x: hidden;
    font-size: 16px;
  }

  .shell {
    width: calc(100% - 36px);
  }

  .site-header {
    height: 78px;
    min-height: 78px;
    /* Hello Elementor adds vertical padding to generic headers; remove it so the mobile logo stays inside the 78px bar. */
    padding: 0 !important;
    box-sizing: border-box;
  }

  .accessibility-launcher {
    right: 16px;
    bottom: 16px;
    min-height: 52px;
    width: 52px;
    padding-inline: 0;
    font-size: 16px;
  }

  .header-inner {
    display: flex;
    justify-content: space-between;
    height: 100%;
    gap: 18px;
  }

  .brand {
    align-self: center;
    width: 168px;
    height: 72px;
    padding: 0;
    background: transparent;
  }

  .brand img {
    width: 168px;
    max-height: 72px;
    object-fit: contain;
    filter: none;
  }

  .main-nav,
  .header-actions {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 12px;
    color: var(--white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 5px;
    font-size: var(--fs-label);
    font-weight: 700;
  }

  .menu-toggle-icon,
  .menu-toggle-icon::before,
  .menu-toggle-icon::after {
    display: block;
    width: 19px;
    height: 2px;
    background: currentColor;
    content: "";
  }

  .menu-toggle-icon {
    position: relative;
  }

  .menu-toggle-icon::before,
  .menu-toggle-icon::after {
    position: absolute;
    right: 0;
  }

  .menu-toggle-icon::before { top: -6px; }
  .menu-toggle-icon::after { top: 6px; }

  .menu-toggle[aria-expanded="true"] .menu-toggle-icon {
    background: transparent;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .mobile-nav:not([hidden]) {
    position: absolute;
    z-index: 30;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    padding: 10px 18px 18px;
    color: var(--white);
    background: var(--green-800);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .mobile-nav a {
    min-height: 48px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-weight: 700;
  }

  .preview-badge {
    top: 92px;
    left: 18px;
    padding: 6px 9px;
    font-size: var(--fs-micro);
  }

  #main-content,
  #paths,
  #services,
  #doctors,
  #about,
  #contact {
    scroll-margin-top: 88px;
  }

  .hero {
    min-height: 690px;
    background-image: url("assets/site/hero-afik-mobile.webp");
    background-position: 50% 50%;
  }

  .hero-shade {
    background: none;
  }

  .hero-content {
    justify-content: center;
    padding-block: 118px 90px;
  }

  .hero-content::before {
    top: 62px;
    right: -12px;
    bottom: 34px;
    left: -12px;
    width: auto;
    height: auto;
    background: rgba(31, 61, 52, 0.78);
    border-radius: 12px;
  }

  .eyebrow {
    margin-bottom: 12px;
    font-size: 16px;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(42px, 12vw, 54px);
    line-height: var(--lh-display);
  }

  .hero-copy {
    margin-top: 22px;
    font-size: 18px;
    line-height: 1.55;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    margin-top: 28px;
  }

  .hero-actions .button,
  .doctor-cta .button,
  .profile-contact-actions .button {
    width: 100%;
  }

  .hero-scroll {
    bottom: 16px;
  }

  .paths-section,
  .services-section,
  .doctors-section,
  .about-section,
  .contact-section,
  .profile-content-section,
  .profile-media-section {
    padding-block: 72px;
  }

  .section-heading h2,
  .about-copy h2,
  .contact-copy h2,
  .all-services h2,
  .profile-bio-column h2,
  .profile-media-section h2 {
    font-size: 34px;
    line-height: 1.18;
  }

  .compact-heading,
  .split-heading {
    margin-bottom: 30px;
  }

  .path-grid,
  .facts-grid,
  .split-heading,
  .service-feature,
  .service-secondary-grid,
  .service-list-columns,
  .about-grid,
  .contact-grid,
  .footer-grid,
  .profile-hero-grid,
  .profile-content-grid,
  .profile-media-grid {
    grid-template-columns: 1fr;
  }

  .path-grid,
  .service-secondary-grid {
    gap: 14px;
  }

  .path-card {
    min-height: 150px;
    padding: 24px 20px;
    grid-template-columns: 34px 1fr 20px;
  }

  .path-card h3 { font-size: 21px; }

  .facts-section {
    padding-bottom: 72px;
  }

  .facts-grid {
    border-bottom: 0;
  }

  .fact-item {
    min-height: 118px;
    padding: 22px 4px;
    border-bottom: 1px solid var(--line);
    border-left: 0;
  }

  .fact-item strong { font-size: 38px; }
  .fact-item-text strong { font-size: 23px; }

  .split-heading {
    align-items: start;
    gap: 14px;
  }

  .split-heading > p {
    font-size: 16px;
  }

  .service-feature {
    min-height: 0;
  }

  .service-feature-copy {
    padding: 36px 24px 40px;
  }

  .service-feature h3 {
    font-size: 36px;
  }

  .service-feature-items {
    display: grid;
    grid-template-columns: 1fr;
  }

  .service-feature-items span {
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .service-feature-portrait {
    min-height: 310px;
  }

  .service-secondary-grid {
    margin-top: 16px;
  }

  .service-mini-card {
    min-height: 230px;
    padding: 28px 22px;
    border-left: 1px solid var(--line);
  }

  .all-services {
    padding-block: 76px;
  }

  .service-list-columns {
    gap: 52px;
  }

  .doctor-filters {
    /* wrap, not scroll: a strip that runs off-screen with no affordance hid
       three of the five filters at 390px. Measured 08/09/2026. */
    flex-wrap: wrap;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }

  .team-lead-card {
    max-width: none;
    margin-bottom: 32px;
  }

  .team-lead-link {
    grid-template-columns: 150px minmax(0, 1fr);
    min-height: 176px;
  }

  .team-lead-portrait {
    padding: 8px;
  }

  .team-lead-portrait img {
    width: 140px;
  }

  .team-lead-copy {
    padding: 22px;
  }

  .team-lead-copy h2 {
    font-size: 30px;
  }

  .team-lead-role {
    font-size: 17px;
  }

  .doctor-filter {
    flex: 0 0 auto;
    min-height: 42px;
  }

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

  .doctor-card img {
    width: 100%;
  }

  .doctor-card h3 {
    font-size: 17px;
  }

  .doctor-card p {
    min-height: 46px;
    font-size: 15px;
  }

  .doctor-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin-top: 54px;
    padding: 30px 24px;
  }

  .doctor-cta h3 { font-size: 24px; }

  .about-grid,
  .contact-grid,
  .profile-content-grid,
  .profile-media-grid {
    gap: 46px;
  }

  .about-copy .lead-copy {
    font-size: 19px;
  }

  /* Use the dedicated portrait entrance photo on phones without cropping the open doorway. */
  .about-image-wrap img {
    height: auto;
    /* Reserve the real 4:3 of the reception photograph so the content below it
       does not jump when the lazy image decodes — worst on the narrowest screen. */
    aspect-ratio: 4 / 3;
    object-position: center;
  }

  .contact-copy h2 {
    font-size: 38px;
  }

  .contact-details {
    flex-direction: column;
    gap: 18px;
  }

  .contact-flow {
    gap: 28px;
  }

  .contact-routing {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contact-routing .contact-routing-phone {
    justify-self: center;
  }

  .contact-location-bar {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .lead-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-card {
    padding: 30px 20px;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .lead-form-card {
    margin-top: 46px;
    scroll-margin-top: 96px;
  }

  .lead-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .lead-form-grid .field-wide {
    grid-column: auto;
  }

  .site-footer {
    padding-top: 58px;
  }

  .footer-grid {
    gap: 34px;
    padding-bottom: 40px;
  }

  .footer-brand img {
    width: 210px;
  }

  .footer-brand p {
    margin-top: 16px;
    font-size: 18px;
  }

  .footer-grid h2 {
    font-size: 20px;
  }

  .footer-grid > div:not(.footer-brand) {
    gap: 10px;
    font-size: 17px;
  }

  .footer-bottom {
    font-size: var(--fs-label);
    flex-direction: column;
    gap: 8px;
  }

  .profile-hero {
    min-height: 0;
    padding-block: 58px 68px;
  }

  .profile-hero-grid {
    min-height: 0;
    gap: 38px;
  }

  .profile-back {
    margin-bottom: 34px;
  }

  .profile-heading h1 {
    /* 36px is the largest size at which ALL EIGHTEEN doctors' names fit on one
       line in the 354px a phone gives this heading - measured, name by name. At
       40px one name wraps, at 44px three do, and the wrap orphans the last word
       on a line of its own ("ד"ר ענבל מלמד / טרץ"), which reads as a mistake.
       balance is the safety net for a longer name added later. */
    font-size: 36px;
    text-wrap: balance;
  }

  .profile-role {
    margin-bottom: 28px;
    font-size: 22px;
  }

  .profile-portrait {
    width: min(280px, 78vw);
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .profile-bio {
    font-size: 18px;
    line-height: 1.7;
  }

  .profile-services-card {
    padding: 36px 24px;
  }

  .profile-media-placeholder {
    min-height: 240px;
  }

  .profile-contact-band {
    padding-block: 58px;
  }

  .profile-contact-inner,
  .profile-contact-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  .profile-contact-band h2 {
    font-size: 32px;
  }

  .profile-contact-actions .button {
    min-height: 66px;
    padding: 0 24px;
    font-size: 20px;
  }

  .profile-footer .footer-bottom {
    align-items: flex-start;
  }
}

@media (max-width: 380px) {
  .shell { width: calc(100% - 28px); }
  .brand, .brand img { width: 154px; }
  .menu-toggle { padding-inline: 9px; }
  /* 40px still fits "לרפואה מקצועית" on a 360px phone but not on a 320px one:
     the phrase runs about 7.5x the font size, so 40px gives ~300px against a
     292px shell and the heading falls to four lines with "מקצועית" alone.
     36px brings it to ~270 and keeps the same three-line shape as every other
     screen. Measured 15/09/2026 at 320, 360, 390 and 414. */
  .hero h1 { font-size: 40px; }

  @media (max-width: 340px) {
    .hero h1 { font-size: 36px; }
  }
  .doctor-grid { grid-template-columns: 1fr; }
  .doctor-card img { width: min(250px, 78vw); }
}

/* Accessibility statement page */
.accessibility-page-body {
  background: var(--paper);
}

.accessibility-page-body main {
  background: var(--paper);
}

.accessibility-hero {
  padding: clamp(72px, 7vw, 112px) 0 clamp(54px, 6vw, 84px);
  background:
    radial-gradient(circle at 12% 15%, rgba(51, 179, 172, 0.12), transparent 34%),
    linear-gradient(135deg, var(--paper) 0%, #d4cdbb 100%);
  border-bottom: 1px solid var(--line);
}

.accessibility-hero-inner {
  max-width: 980px;
}

.accessibility-hero .eyebrow {
  margin: 0 0 16px;
  color: var(--green-900);
  font-size: var(--fs-body);
  font-weight: 700;
}

.accessibility-hero h1 {
  margin: 0;
  max-width: 780px;
  color: var(--green-900);
  font-family: var(--font-headline);
  font-size: clamp(52px, 6vw, 76px);
  font-weight: 700;
  line-height: var(--lh-display);
}

.accessibility-lead {
  max-width: 780px;
  margin: 24px 0 0;
  color: var(--charcoal);
  font-size: var(--fs-lead);
  line-height: 1.65;
}

.accessibility-updated {
  display: inline-flex;
  margin: 28px 0 0;
  padding: 8px 14px;
  color: var(--stone-500);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-sm);
}

.accessibility-content-section {
  padding: 96px 0 112px;
}

.accessibility-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 80px;
  align-items: start;
}

.accessibility-article section + section {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.accessibility-article h2 {
  margin: 0 0 20px;
  color: var(--green-900);
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.25;
}

.accessibility-article p,
.accessibility-list li {
  /* Real running text, so it takes a reading measure like every other
     paragraph. Uncapped it ran to 86 characters on a wide monitor. */
  max-width: 62ch;
  color: var(--charcoal);
  font-size: var(--fs-body);
  line-height: 1.9;
}

.accessibility-article p {
  margin: 0;
}

.accessibility-article p + p {
  margin-top: 14px;
}

.accessibility-list {
  margin: 22px 0 0;
  padding-right: 26px;
}

.accessibility-list li + li {
  margin-top: 10px;
}

/* The phone and email here are inline links inside a <dd>, so they had no padding
   of their own and measured 21px tall on a phone - under the 24x24 CSS px floor in
   WCAG 2.2 AA (2.5.8). This is the accessibility statement itself; it does not get
   to fail the standard it declares. */
.accessibility-contact-details a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
}

/* At 320px the brand link on this page collapsed to 14px wide - it is the link home,
   and it has to stay a real target (WCAG 2.5.8). Everywhere else it was already fine. */
@media (max-width: 900px) {
  body.accessibility-page-body .brand {
    min-width: 32px;
  }

  body.accessibility-page-body .brand img {
    min-width: 32px;
    object-fit: contain;
  }
}

.accessibility-center-note {
  padding: 32px;
  background: var(--cream-50);
  border-right: 4px solid var(--accent);
  border-radius: 10px;
}

.accessibility-contact-card {
  position: sticky;
  top: 152px;
  padding: 34px;
  color: var(--white);
  background: var(--green-900);
  border-radius: 12px;
}

.accessibility-contact-card .eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.accessibility-contact-card h2 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
}

.accessibility-contact-card > p:not(.eyebrow) {
  margin: 18px 0 0;
  color: var(--white);
  font-size: var(--fs-body);
  line-height: 1.7;
}

.accessibility-contact-actions {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.accessibility-contact-actions .button {
  width: 100%;
  justify-content: center;
}

.accessibility-contact-details {
  display: grid;
  gap: 0;
  margin: 30px 0 0;
}

.accessibility-contact-details div {
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.accessibility-contact-details dt {
  color: var(--accent);
  font-size: var(--fs-label);
  font-weight: 700;
}

.accessibility-contact-details dd {
  margin: 6px 0 0;
  color: var(--white);
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.accessibility-contact-details a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.accessibility-page-body .header-phone > .contact-icon {
  display: none;
}

body.accessibility-page-body .header-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

body.accessibility-page-body .header-whatsapp .contact-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  fill: currentColor;
}

/* The .floating-contact buttons were removed from the three legal templates on
   09/09/2026 - they duplicated the site-wide Elementor contact widget. Their
   rules are gone with them; nothing else in the CSS targets that class. */

@media (min-width: 901px) {
  body.accessibility-page-body .site-header:not(.dynamic-header),
  body.accessibility-page-body .site-footer:not(.dynamic-footer) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  body.accessibility-page-body .site-header .header-inner {
    width: min(calc(100% - 96px), var(--shell));
    max-width: none;
  }

  body.accessibility-page-body .site-header {
    position: sticky;
    top: 0;
    height: 112px;
    z-index: 1200;
    border-radius: 0;
    overflow: visible;
    /* CLIPPED LOGO 09/09/2026. The theme puts padding: 16px 0 on a generic
       header. The home, doctor and service bodies each cancel it with an
       explicit padding: 0 !important; this block never did. So on the three
       legal pages the header stayed 124px tall while its content box shrank to
       92px - and the 112px brand overflowed and was cut 4px short at the
       bottom, which is exactly the clipped logo Yuval circled. Measured: brand
       bottom 128 against header bottom 124. min-height keeps the bar from
       collapsing if the padding ever returns. */
    margin: 0 !important;
    padding: 0 !important;
    min-height: 112px;
  }

  body.accessibility-page-body .site-header .header-inner {
    height: 100%;
    min-height: 0;
    padding-block: 0;
    align-items: center;
  }
}

@media (min-width: 1441px) {
  body.accessibility-page-body .shell,
  body.accessibility-page-body .site-header .header-inner {
    width: min(calc(100% - 160px), 1720px);
  }

  body.accessibility-page-body .site-header {
    height: 124px;
  }
}

@media (max-width: 900px) {
  .accessibility-hero {
    padding: 48px 0 42px;
  }

  .accessibility-hero-inner {
    max-width: none;
  }

  .accessibility-hero .eyebrow {
    font-size: 16px;
  }

  .accessibility-hero h1 {
    font-size: 42px;
  }

  .accessibility-lead {
    margin-top: 18px;
    font-size: 20px;
    line-height: 1.6;
  }

  .accessibility-updated {
    margin-top: 22px;
    font-size: 15px;
  }

  .accessibility-content-section {
    padding: 54px 0 70px;
  }

  .accessibility-layout {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .accessibility-article section + section {
    margin-top: 38px;
    padding-top: 34px;
  }

  .accessibility-article h2 {
    font-size: 28px;
  }

  .accessibility-article p,
  .accessibility-list li {
    font-size: 18px;
    line-height: 1.78;
  }

  .accessibility-center-note {
    padding: 24px;
  }

  .accessibility-contact-card {
    position: static;
    top: auto;
    padding: 28px 24px;
  }

  .accessibility-contact-card h2 {
    font-size: 28px;
  }

  .accessibility-contact-card > p:not(.eyebrow),
  .accessibility-contact-details dd {
    font-size: 17px;
  }
}

@media (max-width: 380px) {
  .accessibility-hero h1 {
    font-size: 36px;
  }

  .accessibility-article h2 {
    font-size: 25px;
  }

  .accessibility-contact-card {
    padding: 24px 20px;
  }
}

/* ------------------------------------------------------------------
   Inner page head (team.html) and the "see the whole team" row.
   Added 03/09/2026: the roster finally has a page of its own, so the
   home page can show a preview instead of the entire staff.
   ------------------------------------------------------------------ */
.page-head {
  padding: 96px 0 40px;
  background: var(--cream-100);
  border-bottom: 1px solid var(--line);
}

.page-head h1 {
  margin: 6px 0 18px;
  color: var(--green-900);
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
}

.page-head-copy {
  max-width: 56ch;
  margin: 0;
  color: var(--stone-500);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.team-page .doctors-section {
  padding-top: 52px;
}

@media (max-width: 900px) {
  .page-head {
    padding: 64px 0 28px;
  }
}

/* Screen-reader-only text. Used for headings that must exist for a correct
   document outline but would be visual noise on the page. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The home page shows a curated eight (Yuval, 03/09/2026), which divides into
   two clean rows of four and lets each card — and each name — be larger.
   team.html keeps five columns because it carries the full seventeen. */
.home-page .doctor-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 28px;
}

.home-page .doctor-card img {
  max-width: clamp(208px, 15vw, 300px);
}

@media (max-width: 900px) {
  .home-page .doctor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Variant B only: the home page carrying the entire roster uses the same
   five-column grid as the team page rather than the curated four. */
.home-page-full-roster .doctor-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 40px 24px;
}

.home-page-full-roster .doctor-card img {
  max-width: clamp(184px, 14vw, 300px);
}

@media (max-width: 900px) {
  .home-page-full-roster .doctor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Variant C only: the whole team on the home page, compactly.
   Nobody is left off the page, and the block still costs less height than the
   curated eight — because height comes from portrait size, not head count. */
.home-page-compact-roster .doctor-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 34px 22px;
}

.home-page-compact-roster .doctor-card img {
  max-width: clamp(150px, 15.5vw, 296px);
}

.home-page-compact-roster .doctor-card h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}

.home-page-compact-roster .doctor-card p {
  font-size: var(--fs-sm);
  min-height: calc(2 * var(--fs-sm) * 1.35);
  text-wrap: balance;
}

/* REMOVED 09/09/2026. This block dropped the roster to four columns below
   1101px, and that silently broke the FIRST ROW Yuval dictated on 08/09 -
   five people, not four. On a 1100-1300px screen (a laptop, or a large
   screen at 125-150% browser zoom) the fifth doctor was pushed down into
   row two, and he reported that the order had never been published. The
   order in the markup was correct the whole time; the grid was re-wrapping
   it, which is why every source-level check passed while the screen
   disagreed. Five columns now hold down to the 900px mobile boundary.
   Measured across 930-1440px: the card never falls below 149px and the page
   never overflows, so nothing is traded away for keeping his row. Below
   900px the mobile block takes over at three columns, as decided. */

@media (max-width: 900px) {
  .home-page-compact-roster .doctor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-page-compact-roster .doctor-card img {
    /* min() so the cap can never exceed the card that contains it. At 320px the
       card is 79px and a flat 104px overflowed the page by 11px - a WCAG 1.4.10
       reflow failure, which also fires at 400% zoom on a 1280px screen. */
    max-width: min(104px, 100%);
  }
}

.lead-form-required-note {
  margin: 0 0 18px;
  color: var(--stone-500);
  font-size: var(--fs-label);
}


/* ---------------------------------------------------------------------------
   Very wide displays.
   The canvas used to stop growing at 1720px, so on a large monitor the site sat
   in a band with wide empty margins — it did not use the page. It keeps growing
   now, and the gutters shrink as a proportion rather than staying fixed.
   Running TEXT is still capped separately, so lines never become unreadable.
   ------------------------------------------------------------------------ */
@media (min-width: 1721px) {
  body.home-page .shell,
  body.home-page .site-header .header-inner,
  body.team-page .shell,
  body.team-page .site-header .header-inner,
  body.doctor-profile-body .shell,
  body.service-page-body .shell,
  body.service-page-body .site-header .header-inner,
  body.doctor-profile-body .site-header .header-inner {
    width: min(calc(100% - 120px), 2100px);
  }

  /* The bar stopped growing at 1441px. Against a 2,100px canvas a 124px header
     reads as a thin strip, so the bar, the logo and the menu keep scaling. */
  html { scroll-padding-top: 154px; }

  body.home-page .site-header,
  body.doctor-profile-body .site-header,
  body.service-page-body .site-header,
  body.team-page .site-header {
    height: 138px !important;
    min-height: 138px;
  }

  .preview-badge { top: 154px; }

  .header-inner { grid-template-columns: 300px minmax(0, 1fr) 380px; }
  /* Scoped to the same three bodies as the header height above. Left unscoped,
     accessibility.html - which keeps its own 124px bar - received the 122px logo
     and it painted below the header onto the page. */
  body.home-page .brand,
  body.doctor-profile-body .brand,
  body.service-page-body .brand,
  body.team-page .brand { width: 284px; height: 122px; }
  body.home-page .brand img,
  body.doctor-profile-body .brand img,
  body.service-page-body .brand img,
  body.team-page .brand img { width: 284px; max-height: 122px; }
}

@media (min-width: 2200px) {
  body.home-page .shell,
  body.home-page .site-header .header-inner,
  body.team-page .shell,
  body.team-page .site-header .header-inner,
  body.doctor-profile-body .shell,
  body.service-page-body .shell,
  body.service-page-body .site-header .header-inner,
  body.doctor-profile-body .site-header .header-inner {
    width: min(calc(100% - 120px), 2560px);
  }

  /* Reverted to six. Adding columns was backwards: it made every cell NARROWER,
     which is what shrank the faces on the widest screens, and it laid 17 people
     out as 8 + 8 + 1 with an orphan on the last row. Six gives 6 + 6 + 5. */

  html { scroll-padding-top: 168px; }

  body.home-page .site-header,
  body.doctor-profile-body .site-header,
  body.service-page-body .site-header,
  body.team-page .site-header {
    height: 152px !important;
    min-height: 152px;
  }

  .preview-badge { top: 168px; }

  .header-inner { grid-template-columns: 326px minmax(0, 1fr) 400px; }
  /* Scoped to the same three bodies as the header height above. Left unscoped,
     accessibility.html - which keeps its own 124px bar - received the 134px logo
     and it painted below the header onto the page. */
  body.home-page .brand,
  body.doctor-profile-body .brand,
  body.service-page-body .brand,
  body.team-page .brand { width: 310px; height: 134px; }
  body.home-page .brand img,
  body.doctor-profile-body .brand img,
  body.service-page-body .brand img,
  body.team-page .brand img { width: 310px; max-height: 134px; }
}


/* ---------------------------------------------------------------------------
   901-1280px: the band where the desktop header did not fit.
   The desktop header switches on at 901px, but brand (232) + nav min-content
   (~500) + actions (342) + gaps (44) needs about 1,118px. Below that the grid
   refused to shrink, pushed the body to a 1,100px min-width and gave EVERY page
   a horizontal scrollbar - most visibly at 1024px, i.e. an iPad in landscape.
   This band shrinks the three groups to fit instead of overflowing. That part is
   a pre-existing fault, unrelated to the wide-screen work.

   The upper bound is 1200, NOT 1100. An earlier version stopped at 1100 and left
   1101-1125 broken: there the nav is unshrinkable (flex:0 0 auto + nowrap) inside
   a 387px track it needs 453px for, so it spilled across .header-actions and the
   leftmost link sat on top of the phone number - clicking "צור קשר" dialled the
   clinic instead of navigating. Measured 11.3px overlap at 1101, 0 at 1126, clear
   at 1128. It was reachable by zoom alone too: 1440px at 130% = 1108 CSS px.
   1130 was then still too tight - at 1131 the links cleared .header-actions by
   only 2px while STILL sitting outside their own grid track. Measured properly,
   the full-size header needs about 1167px before its links fit their track with
   any margin (232 + 342 fixed columns + 44 gap + ~453 unshrinkable nav + 96 shell
   margin). 1200 is that number with room to spare.
   ------------------------------------------------------------------------ */
@media (min-width: 901px) and (max-width: 1280px) {
  /* body carried a hard `min-width: 1100px`, so every viewport in this band got
     a horizontal scrollbar no matter what the content did. With the header now
     fitting, the floor can go. */
  body {
    min-width: 0;
  }

  .header-inner {
    grid-template-columns: 158px minmax(0, 1fr) auto;
    gap: 12px;
  }

  .brand,
  .brand img {
    width: 168px;
  }

  .brand {
    height: 74px;
  }

  .brand img {
    max-height: 74px;
  }

  .main-nav {
    gap: 14px;
    font-size: 17px;
  }

  .header-actions {
    grid-template-columns: auto 96px;
    gap: 8px;
  }

  .header-cta {
    padding-inline: 14px;
  }

  .header-phone strong {
    font-size: 19px;
  }

  .header-phone span {
    font-size: 15px;
  }
}


/* ---------------------------------------------------------------------------
   Print.
   A doctor profile and the accessibility statement are the two pages people
   actually print or save as PDF. Without any print rules they came out carrying
   the sticky header, both navigations, the hero and the whole footer.
   ------------------------------------------------------------------------ */
/* The doctor profile is 18 public URLs; until now none of them linked to the
   accessibility statement, the privacy policy or the terms. */
/* Phone and WhatsApp in the footer contact column. The icon is decorative — the
   link keeps its own text, so nothing depends on the glyph being understood. */
.link-icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  fill: currentColor;
}

.button:has(> .link-icon),
.contact-routing-phone:has(> .link-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.site-footer a:has(> .link-icon) {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Patient reviews (draft). The frame is third-party, so it gets a fixed reserved
   height rather than being allowed to reflow the page as it loads - a widget that
   grows after paint pushes the rest of the page down under the reader's cursor. */
.reviews-section {
  padding: 88px 0 96px;
  background: var(--cream-200);
}

.reviews-section .eyebrow {
  margin-bottom: 8px;
}

.reviews-section h2 {
  margin: 0 0 34px;
  max-width: 20ch;
  color: var(--green-800);
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
}

.reviews-frame {
  /* The frame is cross-origin, so its typography cannot be reached from here: its
     body text renders at 16px inside a page whose own body is 29px, which is why it
     read as a small island. The whole frame is therefore SCALED instead - laid out
     narrow and blown up - so the reviews land near our own reading size.
     transform-origin is top right because the page is RTL. */
  /* 2.2 was chosen by measurement, not by eye: at 1.7 the frame's own content
     overflowed it by 22px, and at 2.8 the carousel drops from five review cards to
     three. At 2.2 the reviews read at ~35px against our 29px body, five cards stay
     visible, and nothing overflows. */
  /* The scale is tiered, not fixed, and the tiers are not arbitrary: the widget
     re-lays-out at its own internal breakpoints, and an element width between
     roughly 975px and 1161px makes its carousel wider than the box holding it.
     Each tier below is chosen so the element lands under 975px while the frame
     still fills the shell. Measured, not guessed. */
  /* CAPPED, 08/09/2026. Yuval: "אפשר להקטין קצת את הביקורות הן גדולות מדי".
     A full-width frame forced the scale UP, to keep the widget's own element
     out of its bad 975-1161px band - and a wide frame at a high scale is what
     read as oversized. Measured at 1600px: frame 1425 wide, element 1054, which
     is inside that band and is the scrollbar along the bottom of the widget in
     his screenshot. Capping the frame decouples the two, so the scale comes
     DOWN instead of up and the element still lands near 950px. */
/* INSET 09/09/2026, at Yuval's request: the reviews read as too wide and had
   to move away from the page edges. A flat max-width only helps while the
   shell is wider than the cap: at a 1200px viewport the shell is 1104 and the
   frame was 1100, so it sat 2px from each edge - and below 1180px the frame
   WAS the shell, edge to edge. The width is now the smaller of the cap and
   the shell minus a fixed inset, so 60px of margin survives at every desktop
   width. It also pulls the widget's own element further below its bad
   975-1161px band (855px at a 1200px viewport) - the band that put the
   scrollbar across the widget in his screenshot. */
  --review-scale: 1.15;
  margin-inline: auto;
  --review-h: 272px;
  width: min(1100px, 100% - 120px);
  height: calc(var(--review-h) * var(--review-scale));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
}

/* WIDER ON BIG SCREENS 09/09/2026. Yuval, looking at a ~2560px screen:
   "את החוות דעת הקטנת מאוד, עדיף גודל בין לבין". At that width the capped
   frame is only 43% of the screen and reads as a small island.

   Why this is a separate tier and not just a bigger cap: the widget re-lays-out
   badly when ITS OWN element lands between roughly 975px and 1161px - that is
   the band that puts a scrollbar across the carousel. element = frame / scale,
   so a frame simply grown from 1100 walks straight INTO the band before it
   clears it. The frame therefore stays below the band on ordinary screens and
   jumps clean OVER it here, with the scale lowered to 1.05 so the element lands
   near 1330px - well past 1161 - instead of inside it.

   1640px is where the shell is finally wide enough for that jump to clear with
   room to spare: at 1640 the element is 1280, at 1920 and above it is 1333.
   Measured, not guessed. Below this width the base rule above still applies. */
@media (min-width: 1640px) {
  .reviews-frame {
    --review-scale: 1.05;
    width: min(1400px, 100% - 200px);
  }
}

.reviews-frame iframe {
  display: block;
  width: calc(100% / var(--review-scale));
  height: var(--review-h);
  border: 0;
  transform: scale(var(--review-scale));
  transform-origin: top right;
}

@media (max-width: 900px) {
  .reviews-section {
    padding: 60px 0 64px;
  }

  /* NOT SCALED on a phone, 13/09/2026. Yuval, twice: "המדריוויו נראה חתוך".
     Measured inside the cross-origin frame - Playwright can read it - the
     widget needs about 307px of its own width. Below that ITS content, not
     ours, overflows sideways and our overflow:hidden cuts it off, and its
     review paragraph loses a line too (45px shown of 60px needed).

     The scale was what starved it: the element is frame/scale, so 1.1 on a
     326px frame left only 295px inside. Measured across 320-430px: at scale
     1 with a 16px inset the element is 314-376px and nothing is cut at 360px
     and up, and the paragraph comes back whole. The inset is smaller than
     the old 28px for the same reason - every pixel of it came out of the
     widget's own width - and the shell gutter still keeps it off the edge.
     A phone loses nothing by not scaling: our own body text is small here,
     which is why the scale existed on desktop in the first place. */
  .reviews-frame {
    --review-scale: 1;
    --review-h: 400px;
    /* 14/09/2026, Yuval: "עדיין הצד הימני של המדריוויו נראה חתוך".
       Measured inside the frame: the widget's own "136 חוות דעת" column ends at
       exactly 0px from the frame's border, at 390 and 412 alike. Nothing is
       clipped - scrollWidth equals clientWidth - but text pressed against a
       drawn border reads as cut, and the column is narrow enough to wrap to
       three lines there. The widget is cross-origin, so its padding cannot be
       reached from here; the breathing room has to come from our side.
       The inset moves from the margin to the padding: width goes back to 100%
       and 8px of padding takes its place, so the widget keeps exactly the
       internal width it had (311-358px across 320-412, all above the ~307 it
       needs) and gains 9px of frame background before the border. */
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
  }
}

/* Under ~340px there is no inset to give back: the shell itself is only
   292px, so the element has to be won by scaling DOWN instead. 0.88 puts
   332px inside a 292px frame. Rare width, but it is the one that was worst
   before - 69px of the widget was being cut off there. */
@media (max-width: 340px) {
  .reviews-frame {
    --review-scale: 0.88;
    width: 100%;
  }
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-bottom: 18px;
  font-size: var(--fs-sm);
}

/* These were white on white and therefore invisible - 1:1 - on all eighteen
   doctor pages. The rule was written for a dark footer; .site-footer's background
   is --cream-50, which is #ffffff. The three links it hid are the privacy policy,
   the accessibility statement and the terms of use, so this was not a cosmetic
   bug. --charcoal gives 9.28:1 on white. */
.footer-legal a {
  color: var(--charcoal);
  border-bottom: 1px solid rgba(71, 71, 72, 0.32);
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--green-800);
  border-bottom-color: var(--accent);
}

@media print {
  .site-header,
  .mobile-nav,
  .main-nav,
  .header-actions,
  .menu-toggle,
  .preview-badge,
  .accessibility-launcher,
  .site-footer,
  .profile-contact-band,
  .contact-section,
  .hero-shade,
  .doctor-card-more {
    display: none !important;
  }

  html,
  body {
    background: #fff;
    color: #000;
  }

  .shell {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  main {
    padding-top: 0;
  }

  /* A URL is worthless on paper unless it is written out. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  a[href^="#"]::after,
  a[href^="tel:"]::after,
  a[href^="mailto:"]::after {
    content: "";
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  p,
  li {
    orphans: 3;
    widows: 3;
  }
}


/* The scale tiers for wide screens are gone. They existed only to keep a
   FULL-WIDTH frame out of the widget's bad band; a capped frame never enters
   it, so raising the scale would now only make the block big again. */


/* ---- Per-doctor reviews ------------------------------------------------- */

.profile-reviews-section {
  padding: 96px 0;
  background: var(--paper);
  border-block: 1px solid var(--line);
}

.profile-reviews-section[hidden] {
  display: none;
}

.profile-reviews-section .eyebrow {
  margin-bottom: 8px;
}

.profile-reviews-section h2 {
  margin: 0 0 34px;
  max-width: 24ch;
  color: var(--green-800);
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
}

/* A doctor's widget is NOT the clinic's widget: it carries fewer reviews and a
   different header, so it lays out at its own heights - measured at 266px once
   its element is 800px or wider, 286-290px between 500 and 760, and up to 347px
   on a phone. 290px is reserved on desktop because every desktop tier below
   produces an element in the 555-883px range, and 290 is the tallest the widget
   draws anywhere in that range. The spare space is invisible: bg= is set to our
   own paper colour, so an under-filled frame reads as page background.

   The written rule for the tiers is the same one the clinic frame follows - keep
   the element under the width where the widget's carousel outgrows its own box.
   For this widget that threshold sits between 900px (1px over) and 975px (15px
   over), so every tier here lands the element at 883px or less.

   Selector is doubled on purpose: it must beat the base .reviews-frame tiers
   regardless of where either block ends up in the file. */
/* Sized against the doctor page's own body text, not against the shell. On the
   home page the reviews ARE the section; here they support a profile, and the
   home page's tiers made them 1.38x the body text at 1920 and 1.55x at 2560.

   An earlier version of this block capped the frame's width to hold the widget's
   element under 900px, on the belief that the carousel broke above that. It does
   not. Rendered and looked at, the widget lays out correctly at every width up to
   2440px - five cards, header, logo. What the 15px "overflow" actually is: above
   ~980px the widget switches to a six-card layout and parks BOTH carousel arrows
   half outside its own viewport, at -15px and at viewport+15px. A fixed 15px on
   each side, identical at 1000px and at 2440px. That is a bug in their widget,
   not a limit on ours, and the cap it caused is gone.

   The compensation is below: the element is laid out 30px narrower than the frame
   would otherwise need, and pushed 15px x scale off the right edge, so the frame
   ends up showing the widget's true content box - arrow to arrow - instead of
   clipping an arrow at each end. In the four-card layout, where the arrows are
   already inside, the same 30px simply reads as a little breathing room; the
   widget's bg is set to our paper colour, so it is invisible either way.

   Scales track the page's own body text - 20px, 25px and 29px across these bands,
   against the widget's native 16px - so the reviews read at the size of the
   paragraph above them, at full width. */
.reviews-frame.reviews-frame--doctor {
  --review-scale: 1.25;
  --review-h: 290px;
}

.reviews-frame.reviews-frame--doctor iframe {
  width: calc(100% / var(--review-scale) - 30px);
  margin-right: calc(15px * var(--review-scale));
}

@media (max-width: 900px) {
  /* Every other section on the profile page uses 72px of vertical padding on a
     phone; this one was shipping 96px and read as a gap rather than a section. */
  .profile-reviews-section {
    padding: 72px 0;
  }

  .reviews-frame.reviews-frame--doctor {
    /* Header off on phones (see doctor-profile.js), which both fixes a clipped
       link and makes the widget shorter: measured 273px at its tallest across
       all four doctors and every phone width, against 347px with the header.
       280px is that maximum plus a little headroom. */
    --review-scale: 1.1;
    --review-h: 280px;
  }
}

/* One gentle scale for every desktop width, chosen by Yuval from a rendered
   comparison of 1.85 / 1.35 / none.

   Why the tiers that used to be here are gone: a CSS transform on a cross-origin
   iframe can make the browser rasterise the frame at its pre-transform size and
   stretch the bitmap, and the softness that produces grows with the stretch
   factor. At 1.85 it was visible on Yuval's screen - stars and all - even though
   the widget's stars are SVG and should scale cleanly. 1.35 stretches roughly
   half as far and still lifts the text to about 22px against the page's own
   18-29px, which is the reason the scale exists at all. */
@media (min-width: 1101px) {
  .reviews-frame.reviews-frame--doctor { --review-scale: 1.35; }
}

/* ---------------------------------------------------------------------------
   Two fixes Yuval asked for on 07/09/2026, both about things being hard to see.
   --------------------------------------------------------------------------- */

/* 1. The floating phone and WhatsApp controls come from Elementor's contact
   buttons widget, and it ships them with a TRANSPARENT background, a black icon
   and grey text. Over the hero photograph - bright sky on the left edge, which
   is exactly where they sit - they all but disappear. Measured: fill #000000 on
   sky, no background at all. A solid brand-green pill with a white icon reads on
   any ground the page can put behind it. !important is needed because the widget
   writes its own colours. */
.e-contact-buttons__contact-icon-link {
  background: var(--green-900) !important;
  color: var(--white) !important;
  /* The white ring is not decoration. These buttons are fixed to the viewport
     and travel over everything the page has: a bright sky at the top and the
     dark green contact band further down - and --green-900 IS that band's
     colour, so a plain green pill vanishes there. Dark fill carries the bright
     grounds, the white edge carries the dark ones. Yuval caught this on the
     contact section within minutes of the first version. */
  border: 2px solid var(--white) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

.e-contact-buttons__contact-icon-link svg,
.e-contact-buttons__contact-icon-link .e-font-icon-svg {
  fill: var(--white) !important;
}

.e-contact-buttons__contact-title {
  color: var(--white) !important;
}

.e-contact-buttons__contact-icon-link:hover {
  background: var(--accent) !important;
  color: var(--green-900) !important;
  border-color: var(--green-900) !important;
}

.e-contact-buttons__contact-icon-link:hover svg,
.e-contact-buttons__contact-icon-link:hover .e-font-icon-svg {
  fill: var(--green-900) !important;
}

.e-contact-buttons__contact-icon-link:focus-visible {
  outline: 3px solid var(--white) !important;
  outline-offset: 3px;
}

/* 2. The accessibility launcher loses its printed word. The icon carries the
   meaning, and the accessible name lives in aria-label, so nothing is lost to a
   screen reader - only the visible label. The span stays in the DOM, hidden the
   accessible way rather than with display:none. */
.accessibility-launcher {
  gap: 0;
  padding: 0;
  width: 56px;
  justify-content: center;
}

.accessibility-launcher span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

/* The accessibility launcher is fixed to the bottom-right corner, so when the
   page is scrolled all the way down it lands on top of the last line of the
   footer. Measured on 07/09/2026 at 1024, 1440 and 1920: the copyright span
   ends at the same pixels the button starts. Phones already clear it - the row
   wraps well above - so the corner is reserved only from the tablet width up.
   Reserved on the inline START because the page is RTL and that is the right
   edge, which is where the button sits. */
@media (min-width: 901px) {
  .footer-bottom {
    padding-inline-start: 96px;
  }
}

/* The confirmation that replaces the lead form once it has been sent. It has to
   read as an answer, not as another form field - so it gets its own heading
   weight, a mark, and the two faster routes as real controls. */
.lead-form-done {
  text-align: center;
}

.lead-form-done-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 18px;
}

.lead-form-done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--green-900);
  color: var(--white);
  font-size: 24px;
  line-height: 1;
}

.lead-form-done-body {
  margin: 0 auto 10px;
  max-width: 46ch;
}

/* Something outside this stylesheet repaints link text when the pointer is over
   it. Measured 07/09/2026 on the "השאירו פרטים" control: at rest white on the
   dark green at 11.8:1, on hover rgb(51,51,102) on the same green - about
   1.3:1, which is unreadable at exactly the moment somebody is about to click.
   The colour appears in no stylesheet the page loads, so it arrives as an
   inline style from a script; !important is what beats that. Each variant is
   pinned to the colour it already uses at rest. */
.button-primary:hover,
.button-primary:focus-visible,
.button-primary:active {
  color: var(--white) !important;
}

.button-accent:hover,
.button-accent:focus-visible,
.button-accent:active,
.button-light:hover,
.button-light:focus-visible,
.button-light:active {
  color: var(--green-900) !important;
}

/* ---------------------------------------------------------------------------
   Header, 07/09/2026.
   --------------------------------------------------------------------------- */

/* A global a:hover repaints link text rgb(51,51,102) - measured 1.02:1 against
   the header's #1f3d34, so a menu item all but disappears at the moment the
   pointer reaches it. Every header link is pinned to the colour it already has
   at rest. The same script-injected style is why !important is needed. */
.site-header a:hover,
.site-header a:focus-visible,
.site-header a:active,
.main-nav a:hover,
.main-nav a:focus-visible,
.mobile-nav a:hover,
.mobile-nav a:focus-visible {
  color: var(--white) !important;
}

.header-cta:hover,
.header-cta:focus-visible,
.header-cta:active {
  color: var(--green-900) !important;
}

/* The underline was the turquoise accent, which measures about 2.3:1 on the
   header green - visible to some eyes, not to others. White reads 11.8:1 and
   the accent stays where it has room to work. */
.main-nav a:hover,
.main-nav a:focus-visible {
  border-bottom-color: var(--white);
}

/* Two phone controls, one shown at a time. On a phone tel: opens the dialler and
   is exactly right. On a desktop there is usually no handler for tel:, and
   Chrome answers with a system "open which application?" dialog instead of a
   call - a confusing dead end on the most prominent control on the screen. Wide
   screens therefore get the same number, wired to the contact form that is
   already on the page. */
.header-phone-jump {
  display: none;
}

@media (min-width: 901px) {
  .header-phone-tel {
    display: none;
  }

  .header-phone-jump {
    display: flex;
  }
}

/* Three ways in, at the top of the treatment section. Before this the section
   opened with a single featured area numbered 01, and Yuval's reading of it was
   the right one: "נראה כאילו אנחנו מטפלים רק בזה". His next question - "איך אני
   מגיע לשיניים" - had no answer at all, because nothing in the section was a
   link. Two cards go to the pages that exist; the third opens the full list
   further down the same page, because no page exists for it and inventing one
   would mean a new URL on a site with no redirect mechanism. */
.service-picker {
  display: grid;
  /* Five categories, and they must not become five thin columns. auto-fit with a
     floor lets the browser choose 3+2 on a laptop and 5 across on a wide screen,
     without a breakpoint per width. */
  /* The max was 1fr, so four cards stretched to fill the whole shell and each one
     became a wide bar with the title pinned right and the link pinned left, a
     hand-span of empty space between them. Yuval: "למה המלבנים כל כך רחבים?".
     Capping the track stops the stretch; justify-content keeps the row packed to
     the right in RTL instead of spreading. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 230px));
  justify-content: space-evenly;
  gap: 14px;
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
}

.service-picker-card {
  display: flex;
  /* Column, not row: the name reads first and "לעמוד התחום ←" sits under it.
     In a row the two were pushed to opposite edges and the eye had to travel
     the width of the card to connect a title with its own link. */
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  height: 100%;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.service-picker-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(31, 61, 52, .12);
}

.service-picker-card:focus-visible {
  outline: 3px solid var(--green-900);
  outline-offset: 3px;
}

.service-picker-name {
  font-size: clamp(21px, 1.7vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--green-900);
}

/* The team size beside the "תחומי טיפול" heading. Written by the plugin from
   the roster itself (brcs_roster_total), so it can never drift from the team.
   Lighter and smaller than the heading: it qualifies it, it is not part of it.
   14/09/2026 - this replaced a count on each of the four area cards, which
   Yuval rejected: "אני לא רוצה ליד כל תחום". */
.services-count {
  /* An absolute size, not an em: these headings are very different sizes, and a
     relative one made the count large beside the large one. Yuval on that
     version: "הפרופורציות של ה-10 רופאים לא נכון ... זה לא אמור להיות חלק
     מהמשפט המקורי". Fixed and small, it stays a footnote to any heading. */
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 500;
  color: var(--stone-500, #474748);
  white-space: nowrap;
}

.service-picker-more {
  align-self: flex-start;
  padding-bottom: 2px;
  font-size: var(--fs-label);
  line-height: 1.4;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  color: var(--green-800);
}

.service-picker-card:hover .service-picker-more {
  border-bottom-color: var(--accent);
}

/* The dental column head is now the way into that page. */
.service-list-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.service-list-link:hover,
.service-list-link:focus-visible {
  border-bottom-color: var(--accent);
}

@media (max-width: 900px) {
  .service-picker {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 40px;
  }
}

/* ===========================================================================
   Service pages, rebuilt on the home page's design (07/09/2026).
   The type scale, the cream ground and the dark green bands are the home page's
   own; nothing new is invented here, so the two pages read as one site.
   =========================================================================== */

.service-page-body {
  background: var(--paper);
}

.service-hero {
  /* The doctor pages open on --sand-200 with a hairline below, not on a dark
     band. Same ground, same border, so the two page types read as one site. */
  padding: 92px 0 84px;
  background: var(--sand-200);
  border-bottom: 1px solid var(--line);
}

.service-hero-inner > * {
  max-width: clamp(720px, 48vw, 1120px);
}

.service-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--green-800);
}

.service-crumb a {
  color: inherit;
  border-bottom: 1px solid transparent;
}

.service-crumb a:hover,
.service-crumb a:focus-visible {
  border-bottom-color: var(--accent);
}

/* Same declaration as .profile-heading h1 on the doctor pages. */
.service-hero h1 {
  margin: 8px 0 12px;
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--green-800);
  font-size: clamp(56px, 5vw, 76px);
  line-height: var(--lh-display);
  text-wrap: balance;
}

/* And the same size as .profile-role, which is what sits under the doctor h1. */
.service-hero-lede {
  margin: 0;
  max-width: 34ch;
  font-size: var(--fs-h3);
  /* 1.4 is what .profile-role resolves to on the doctor pages. */
  line-height: 1.4;
  color: var(--green-800);
}

.service-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.service-intro {
  /* .profile-content-section is 116px top and bottom on white. */
  padding: 116px 0;
  background: var(--white);
}

.service-intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* Matches .profile-content-section h2 - same family, weight and leading. */
.service-intro h2 {
  margin: 0 0 18px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.18;
  color: var(--green-800);
  text-wrap: balance;
}

.service-intro p {
  margin: 0 0 16px;
  line-height: 1.8;
}

.service-doctors {
  padding: 0 0 116px;
  background: var(--white);
}

.service-doctors h2 {
  margin: 6px 0 28px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.18;
  color: var(--green-800);
  text-wrap: balance;
}

/* Yuval, 08/09/2026: "עמוס מאוד, תסדר את זה בגודל כמו הדף הראשי, לא נוח."
   auto-fit packed ten cards into a single row on a wide monitor, each with a
   168px portrait. These are the home page roster's own numbers - six columns,
   the same portrait scale, the same breakpoints - so the two pages agree. */
.service-doctor-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1100px) {
  .service-doctor-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .service-doctor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .service-doctor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* No box. The home page roster is portrait, name, role, link on the open ground -
   eleven bordered boxes in a row were the other half of what Yuval called
   "עמוס מאוד". */
.service-doctor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 4px 0 0;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.service-doctor-card:hover .service-doctor-name {
  color: var(--green-800);
}

.service-doctor-card:focus-visible {
  outline: 3px solid var(--green-900);
  outline-offset: 3px;
}

.service-doctor-portrait {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* No border here. The ring is drawn into the portrait file, and the home page
   simply clips the image - see the clip-path rule shared with .doctor-card img
   below. Adding a CSS circle on top produced a ring inside a ring. */
.service-doctor-portrait img {
  width: 92%;
  max-width: clamp(150px, 15.5vw, 296px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
  background: transparent;
  display: block;
}

.service-doctor-name {
  margin-top: 16px;
  font-weight: 700;
  font-size: 19px;
  color: var(--green-900);
}

.service-doctor-role {
  margin-top: 4px;
  font-size: var(--fs-label);
  line-height: 1.45;
  color: var(--charcoal, #474748);
}

.service-doctor-more {
  margin-top: 14px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: var(--fs-label);
  color: var(--green-800);
}

.service-doctor-card:hover .service-doctor-more {
  border-bottom-color: var(--accent);
}

.service-contact-band {
  padding: 76px 0;
  color: var(--white);
  background: var(--green-800);
}

.service-contact-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.service-contact-band h2 {
  margin: 8px 0 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.15;
}

/* Same enlarged controls the doctor pages got on 07/09/2026. */
.service-hero-actions .button {
  min-height: 62px;
  padding: 0 32px;
  font-size: clamp(18px, 1.3vw, 21px);
}

.service-contact-note {
  margin: 12px 0 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, .86);
}

@media (max-width: 900px) {
  .service-hero {
    padding: 64px 0 56px;
  }

  .service-intro {
    padding: 72px 0;
  }

  .service-intro-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-doctors {
    padding-bottom: 72px;
  }

  .service-contact-band {
    padding: 56px 0;
  }

  .service-hero-actions .button,
  .service-contact-inner .button {
    width: 100%;
  }
}

/* The FAQ block inside a rebuilt service page. Same section rhythm and the same
   heading scale as everything else on the page, so it stops looking like a
   panel that wandered in from another site. */
.service-page-body .brcs-faq {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 116px !important;
  background: var(--white) !important;
  border-radius: 0 !important;
}

/* Same width formula as .shell, so the block lines up with every other section
   on the page instead of approximating it. */
.service-page-body .brcs-faq > * {
  width: min(calc(100% - 96px), var(--shell));
  margin-inline: auto;
}

.service-page-body .brcs-faq h2 {
  margin: 0 0 28px !important;
  font-family: var(--font-headline) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h2) !important;
  line-height: 1.18 !important;
  color: var(--green-800) !important;
  text-wrap: balance;
}

.service-page-body .brcs-faq h3 {
  margin: 28px 0 8px !important;
  font-family: var(--font-headline) !important;
  font-weight: 700 !important;
  font-size: 21px !important;
  color: var(--green-800) !important;
}

.service-page-body .brcs-faq p {
  margin: 0 !important;
  max-width: 68ch;
  line-height: 1.8 !important;
}

@media (max-width: 900px) {
  .service-page-body .brcs-faq {
    padding-bottom: 72px !important;
  }
}

/* A group placed in the MAIN column, under the intro text. Deliberately NOT the
   green card: Yuval, 08/09/2026, asked for the dental treatments "בצורה אחרת",
   and two identically-styled lists stacked together read as one list of twelve.
   Two light columns on the page ground, so the eye separates them at a glance. */
.service-inline-list {
  margin-top: 34px;
}

.service-inline-list h3 {
  margin: 0 0 14px;
  font-family: var(--font-headline);
  font-size: 21px;
  font-weight: 700;
  color: var(--green-800);
}

.service-inline-list ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-inline-list li {
  position: relative;
  padding: 7px 18px 7px 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--charcoal);
}

.service-inline-list li::before {
  position: absolute;
  top: 15px;
  right: 0;
  width: 5px;
  height: 5px;
  content: "";
  background: var(--accent);
  border-radius: 50%;
}

@media (max-width: 620px) {
  .service-inline-list ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The same card the doctor pages use for "תחומי עיסוק ושירותים". It replaced a
   wrapping row of pills, which Yuval read as clutter on 08/09/2026: "גם את המכון
   צילומים לא נוח ככה אולי בבולטים ליד כמו שרותים" and "המלל עמוס ולא ברור,
   בולטים כמו בדפי רופאים". Bullets in a column are scannable; a wrapped row of
   pills is not. Every area the page covers is still named - that part was the
   point of the block and has not changed. */
.service-areas-card {
  padding: 46px 44px;
  color: var(--white);
  background: var(--green-800);
  border-top: 6px solid var(--accent);
}

/* The card can hold more than one group - the dental page holds the treatments
   and the imaging institute. The second group needs a rule above it, or the two
   lists read as one long list under the first heading. */
.service-areas-group + .service-areas-group {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.service-areas-group h3 {
  margin: 0 0 22px;
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
}

.service-areas-card h2 {
  margin: 0 0 28px;
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
}

.service-areas {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-areas li {
  position: relative;
  margin: 0;
  padding: 15px 22px 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--fs-body);
  line-height: 1.45;
}

.service-areas li::before {
  position: absolute;
  top: 21px;
  right: 0;
  width: 7px;
  height: 7px;
  content: "";
  background: var(--accent);
  border-radius: 50%;
}

/* An area that HAS a doctor stays a link. Yuval: "אנשים יחפשו רפואה יועצת ילחצו
   על הרופא" - the area is what someone searched for, so it is the thing that
   should be clickable. Underlined, because colour alone cannot mark a link
   inside a block of same-coloured text. */
.service-area-link {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.service-area-link:hover {
  text-decoration-color: var(--accent);
}

.service-area-link:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .service-areas-card {
    padding: 32px 26px;
  }
}

/* ---------------------------------------------------------------------------
   Privacy policy page. Built 08/09/2026 after Yuval asked for one - the URL
   /מדיניות-פרטיות.../ was serving the terms of use, so the site had no privacy
   policy at all while it ran Google Analytics, Google Ads and a Meta pixel.
   It reuses the accessibility page's chrome; only these pieces are its own.
   --------------------------------------------------------------------------- */
.privacy-updated {
  margin: 14px 0 0;
  color: var(--stone-500);
  font-size: var(--fs-sm);
}

/* The one instruction on the page a visitor must not miss. */
.privacy-callout {
  margin: 18px 0;
  padding: 16px 20px;
  background: var(--white);
  border-inline-start: 4px solid var(--accent);
  border-radius: 6px;
}

/* The table is the honest part of the document - it names every third party
   that actually runs on the page. It scrolls inside itself rather than pushing
   the page sideways. */
.privacy-table-wrap {
  overflow-x: auto;
  margin: 18px 0;
}

.privacy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  text-align: start;
}

.privacy-table th,
.privacy-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}

.privacy-table thead th {
  color: var(--green-800);
  font-weight: 700;
  border-bottom: 2px solid var(--green-800);
  white-space: nowrap;
}

.privacy-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.privacy-contact-list li {
  margin: 8px 0;
}

/* ---------------------------------------------------------------------------
   The hero has to fit the screen it is on, not just the width of it.

   Yuval, 08/09/2026, comparing his machine with a friend's: "ככה זה נראה במחשב
   של חבר. אצלי זה נראה מלא על כל המסך." Measured on the live site, and it was a
   real defect: min-height 710px and a 6.8vw display face size the hero from the
   viewport WIDTH alone, so a screen that is wide but short gets a hero taller
   than itself and the two CTA buttons fall below the fold.

       1440 x 900   hero 903px   buttons visible
       1536 x 864   hero 938px   BELOW THE FOLD   ← 1080p at 125% scaling
       1280 x 720   hero 842px   BELOW THE FOLD
       1152 x 648   hero 793px   BELOW THE FOLD

   A fixed height breakpoint was tried first and was the wrong tool - it left a
   gap either side of wherever the line was drawn, and 1536x864 fell straight
   into it. Taking the SMALLER of a width term and a height term has no cliff:
   the type grows with the window until the window's height says stop.
   --------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .hero {
    min-height: min(710px, 74vh);
  }

  .hero h1 {
    /* 92, not 104, since 15/09/2026. The heading's longest phrase - "לרפואה
       מקצועית" - measures about 7.5 times the font size, and the width cap the
       card allows is 700px. At 104 that phrase is 780px and does not fit.
       The ceiling is reached on any window about 1600px wide AND 1080 tall or
       more, which is why every test I ran at height 900 passed: 10vh held the
       font at 90 there. Yuval's window is taller, and he saw the ת of
       "מקצועית" sitting on the photograph. Measured: 1600x1100, 1920x1080,
       1920x1200, 2000x1300 and 2560x1400 all overflowed the card by 24px.
       At 92 the phrase is about 690px and clears the cap. */
    font-size: clamp(38px, min(6.8vw, 10vh), 92px);
  }

  .hero-copy {
    font-size: clamp(15px, min(1.35vw, 2.1vh), 21px);
  }
}

/* ---------------------------------------------------------------------------
   Keep Yuval's grouping on narrow screens.

   He dictated the roster as rows: "שורה ראשונה: שיר, אמילי, רוח, ענבל, טל.
   אחרי שיניים, דנה, לירון...". Five across holds on a desktop grid of five, but
   a phone shows three, so his first group ran over into the second row and דנה -
   the first of the dental block - landed beside the women's-health doctors.
   Yuval, 08/09/2026: "סדר הרופאים במובייל לא כמו שסיכמנו בוואב".

   The SEQUENCE was never wrong; it is identical to desktop, measured. What broke
   was the grouping. Forcing the sixth card to start a row keeps the two blocks
   apart at any column count, at the cost of one empty cell.

   Only while the full roster is shown: under a filter every card is from one
   field, and the break would be a hole with nothing to separate.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .home-page-compact-roster .doctor-grid[data-showing="all"] .doctor-card:nth-child(6) {
    grid-column-start: 1;
  }
}
/* ---------------------------------------------------------------------------
   Mobile: the floating contact widget steps aside while the hero's own buttons
   are on screen. Measured 12/09/2026 at 360-430px: Elementor's widget sits at
   bottom:100 with z-index 10000 and covers 148x54 of BOTH hero buttons - their
   full height - so the left half of each was not tappable. The class is set by
   an IntersectionObserver in script.js, only under 900px.

   visibility, not display: it keeps the fade, and it also takes the widget out
   of the tab order while it is invisible.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .e-contact-buttons {
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  body.hero-actions-in-view .e-contact-buttons {
    opacity: 0;
    visibility: hidden;
  }
}
/* ---------------------------------------------------------------------------
   Doctor names: one fluid size instead of a step, at every width.

   Two separate defects, measured on the live site across 320-2560 on
   13/09/2026, and they turned out to be the same defect.

   1. THE 900/901 CLIFF. At 900px the grid is three columns, the card is 273px
      and every name sits on one line - the best the roster looks anywhere. At
      901px it becomes five columns, the card drops to 143px (-48%) and the
      name jumped from 15px to 25px, because the name size was stepped at the
      same breakpoint. The page got HARDER to read as the screen got BIGGER.

      The column count is NOT the thing to change: Yuval dictated a first row
      of five on 08/09, and the four-column rule was removed on 09/09 for
      exactly that reason. What jumps is the name-size-to-card-width ratio, so
      that is what is fixed - clamp() instead of a step. 15px at 901 (was 25),
      rising smoothly to 26px at 1920.

   2. RAGGED ROWS. Names broke to different depths, so the 18 cards came out in
      up to six heights. min-height in em reserves two lines whatever the
      font resolves to, so a one-line name occupies the same box as a two-line
      one at every width.

   Verified at 320, 360, 390, 414, 600, 768, 900, 901, 1024, 1200, 1440, 1920
   and 2560: no name exceeds two lines, card heights differ by at most 2px of
   line-height rounding, and there is no horizontal overflow anywhere.
   ------------------------------------------------------------------------ */
.home-page-compact-roster .doctor-card h3 {
  font-size: clamp(15px, 1.6vw, 26px);
  line-height: 1.25;
  min-height: calc(2 * 1.25em);
}

.home-page-compact-roster .doctor-card p {
  font-size: clamp(12px, 1.05vw, 17px);
  /* EXPLICIT 13/09/2026. Without it the role paragraph inherited a line-height
     the browser recomputed per card, and a card whose role contains a glyph the
     body font does not carry - the middle dot in "מנהלת מרפאה · רפואת שיניים
     ואסתטיקה" comes from a fallback face - got a taller line box than its
     neighbours. That was the whole of the residual card-height spread the
     verification run reported: 2px at 320 and 360, 1px at 390. Pinning the
     line-height makes the box depend on the font size alone, and the spread
     measured 0px at 320, 360 and 390. */
  line-height: 1.35;
  min-height: calc(2 * 1.35em);
}

/* Under 380px the card is 83-96px wide, and Dr Shir Kerner's role - the
   longest on the roster - takes three lines where everyone else takes two.
   Reserving the third line there makes all 18 cards equal again. */
@media (max-width: 380px) {
  .home-page-compact-roster .doctor-card p {
    min-height: calc(3 * 1.35em);
  }
}

/* ---------------------------------------------------------------------------
   ROSTER DISCLOSURE - two rows on a phone, the rest behind a button.

   Yuval, 13/09/2026: "הגלילה מאוד ארוכה במובייל. אולי תשאיר את השורות רופאים
   הראשונה ותעשה כפתור שמציג את כולם."

One row, at every width - three cards on a phone, five from 901px up, because
   that is what a row holds there. Both are full rows with no gap, and three
   stays clear of the rule further up that forces the sixth card to start a new
   row.

   The button itself is BUILT BY script.js, not written here, so a visitor whose
   JavaScript fails sees all eighteen doctors and no dead control - which is
   also what a crawler that does not run scripts sees.

   Above 900px nothing collapses: that is where the grid goes to five columns
   and the whole roster already fits without a long scroll.
   ------------------------------------------------------------------------ */
.roster-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(320px, 100%);
  /* 48px, not the 36px the filter pills use: this one is the only way to reach
     twelve doctors, so it gets a full-size target. */
  min-height: 48px;
  /* 48px BELOW, not 0. The grid used to end the section, and the band that
     follows it - .all-services, on its own beige - began right there. With the
     button in that position its bottom edge measured 0px from that colour
     change, at 390 and at 1440 alike, and it read as the control colliding with
     the next block. 48 is the 28 above it, doubled, so the button sits nearer
     the roster it belongs to than the band it does not. */
  margin: 28px auto 48px;
  padding: 0 24px;
  color: var(--green-800);
  background: var(--white);
  border: 1px solid var(--sage-500);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  cursor: pointer;
}

/* display:flex above would otherwise beat the hidden attribute, and the button
   is hidden by script.js whenever the roster is short enough not to need it. */
.roster-toggle[hidden] {
  display: none;
}

.roster-toggle:hover {
  color: var(--white);
  background: var(--green-800);
  border-color: var(--green-800);
}

.roster-toggle:focus-visible {
  outline: 3px solid var(--green-900);
  outline-offset: 3px;
}

/* The button used to be hidden above 901px, back when only phones collapsed.
   Yuval, 14/09/2026: "התכוונתי גם במחשב, תעשה את זה" - so it shows at every
   width now, and script.js decides the preview size from the column count. */


/* The footer's service links (19/09/2026). Styled off .footer-legal, which sits directly below it,
   so the two rows read as one block rather than a bolt-on. Wraps on a phone by design: 186 of
   August's 226 clicks were mobile. */
.footer-services {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  padding-bottom: 10px;
}

.footer-services a {
  opacity: 0.92;
  /* min-height rather than guessed padding: measured 38px with padding alone, which is under the
     comfortable tap size and would have been inconsistent with the lead form fixed the same day. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  text-decoration: none;
}

.footer-services a:hover,
.footer-services a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}