: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.doctor-profile-body .site-footer:not(.dynamic-footer) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  body.home-page .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.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.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.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.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);
}

.hero h1 {
  max-width: 780px;
  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 130px;
  background: var(--cream-100);
}

.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;
}

.team-lead-card {
  max-width: clamp(920px, 40vw, 1040px);
  margin: 0 0 42px 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 h3 {
  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;
  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 {
  margin: 0 0 38px;
  color: var(--charcoal);
  font-size: var(--fs-label);
}

.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;
  margin-top: 10px;
  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;
}

.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;
}

.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 {
    flex-wrap: nowrap;
    overflow-x: auto;
    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 h3 {
    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; }
  .hero h1 { font-size: 40px; }
  .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;
}

body.accessibility-page-body .floating-contact {
  position: fixed;
  left: 18px;
  z-index: 1250;
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  color: var(--green-900);
  background: var(--white);
  border: 1px solid rgba(31, 61, 52, 0.15);
  border-radius: 50%;
}

body.accessibility-page-body .floating-phone {
  bottom: 84px;
}

body.accessibility-page-body .floating-whatsapp {
  bottom: 20px;
}

body.accessibility-page-body .floating-contact svg {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  fill: currentColor;
}

@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;
  }

  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(6, 1fr);
  gap: 30px 20px;
}

.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);
}

.home-page-compact-roster .team-lead-card {
  margin-bottom: 34px;
}

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

@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.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.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.team-page .brand { width: 284px; height: 122px; }
  body.home-page .brand img,
  body.doctor-profile-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.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.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.team-page .brand { width: 310px; height: 134px; }
  body.home-page .brand img,
  body.doctor-profile-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(--paper);
}

.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. */
  --review-scale: 1.2;
  --review-h: 272px;
  width: 100%;
  height: calc(var(--review-h) * var(--review-scale));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
}

.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;
  }

  /* On a phone our own body text is far smaller, so the gap the scale exists to
     close is mostly gone - and a large scale would push the cards off the frame. */
  .reviews-frame {
    /* 1.15 left the frame's content 1px wider than the frame itself. */
    --review-scale: 1.1;
    --review-h: 360px;
  }
}

.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;
  }
}


/* Frame fills the canvas at every tier; the scale rises with it so the element
   inside stays in the widget's own safe width band. */
@media (min-width: 1441px) {
  .reviews-frame { --review-scale: 1.35; }
}

@media (min-width: 1721px) {
  .reviews-frame { --review-scale: 1.5; }
}

@media (min-width: 2200px) {
  .reviews-frame { --review-scale: 1.7; }
}


/* ---- 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;
}

.lead-form-done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

/* 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. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
}

.service-picker-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  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-count {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--sage-500);
  letter-spacing: .04em;
}

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

.service-picker-note {
  margin-top: 12px;
  flex: 1 1 auto;
  line-height: 1.6;
  color: var(--charcoal, #474748);
}

.service-picker-more {
  margin-top: 18px;
  align-self: flex-start;
  padding-bottom: 2px;
  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-highlight {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.service-highlight h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--green-900);
}

.service-highlight p {
  margin: 0;
  line-height: 1.7;
}

.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;
}

.service-doctor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-doctor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 24px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

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

.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: 168px;
  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;
  }
}

/* Every area the page covers, named. Before this only the one area that happened
   to have a paragraph appeared, in a card of its own, and the other four were
   nowhere - which read as if dermatology had been split off rather than included. */
.service-areas-title {
  margin: 48px 0 14px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 21px;
  color: var(--green-800);
}

.service-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-areas li {
  margin: 0;
}

/* Each area is a link to the doctor who covers it. Yuval: "אנשים יחפשו רפואה
   יועצת ילחצו על הרופא" - the area is what someone searched for, so it is the
   thing that should be clickable. */
.service-area-item {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: var(--fs-label);
  color: var(--green-800);
}

.service-area-link {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--green-800);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

.service-area-link:hover {
  border-color: var(--accent);
  background: var(--white);
}

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