/* ==========================================================================
   שירי פלס — טיפולי וואטסו

   The values here were measured off the live WordPress site (fonts, sizes,
   colours, column widths, the banner slideshow timing) rather than invented,
   so the rebuild reads as the same site.
   ========================================================================== */

/* Varela Round, self-hosted (SIL OFL 1.1 — see assets/fonts/OFL.txt).
   The whole site is set in it: headings, body copy, buttons and menu alike. */
@font-face {
  font-family: "Varela Round";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/varela-round-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Varela Round";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/varela-round-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --teal: #10767c;          /* buttons, section headings, current menu item */
  /* The live site uses #419d9f for menu links and #1b8b91 for blog titles.
     Both fall below the 4.5:1 contrast WCAG AA needs on white (3.21 and 4.08),
     so this rebuild darkens them to the brand teal, which clears it at 5.38.
     The current menu item is marked with an underline as well as colour, so
     the active state does not rely on colour alone. */
  --teal-nav: #10767c;      /* menu links at rest */
  --teal-blog: #10767c;     /* blog post titles */
  --rose: #cc3366;          /* footer links */

  --ink: #000;              /* body copy */
  --ink-soft: #333;
  --card-title: #3f444b;
  --white: #fff;
  --rule: #e3ecec;

  --font: "Varela Round", "Segoe UI", system-ui, sans-serif;

  --radius: 3px;
  --panel-radius: 25px;

  --wrap: 1300px;           /* outer container on the live site */
  --measure: 667px;         /* the text column on inner pages */

  --banner-height: 466px;
  --header-height: 109px;

  /* The photos are shown untinted, so the white title has to carry itself
     over whatever frame is behind it — including the brightest one. Four
     layers, smallest first: a hard edge so the glyphs stay crisp, then two
     halos that darken the photo immediately around the letters, then a wide
     soft pool that separates the block of text from a busy background. All
     black and centred, so nothing reads as an offset drop shadow. */
  --title-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(0, 0, 0, 0.7),
    0 0 44px rgba(0, 0, 0, 0.5);

  /* Scaled by the accessibility widget text-size buttons. */
  --font-scale: 1;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: calc(100% * var(--font-scale));
  scroll-behavior: smooth;
  /* The header is pinned, so anchored jumps stop below it, not under it. */
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.1875rem;
  line-height: 2.0625rem;
  color: var(--ink);
  background: var(--white);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 400;
  margin: 0 0 0.6em;
}

p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal); }

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

:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--teal);
  color: var(--white);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; color: var(--white); }

/* --------------------------------------------------------------------------
   Buttons — 15px white on teal, 12/24 padding, 3px radius
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1;
  padding: 12px 24px;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.btn:hover,
.btn:focus-visible {
  background: #0b565a;
  border-color: #0b565a;
  color: var(--white);
}

.cta-row {
  text-align: center;
  padding-block: 0 70px;
}

/* --------------------------------------------------------------------------
   Header — white, 109px tall (84px on phones), logo right, menu left
   -------------------------------------------------------------------------- */

/* Pinned to the top of the viewport, so the menu stays reachable however far
   down the page you are. Sticky, not fixed: the header keeps its place in the
   flow, so nothing below it needs a compensating offset. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
}

/* Lifted off the page only once it has scrolled — at rest the header sits
   flush on the banner, as it does on the live site. Class set in site.js. */
.site-header.is-stuck {
  box-shadow: 0 6px 18px rgba(8, 63, 66, 0.13);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-height);
}

.brand img {
  width: 190px;
  height: auto;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: block;
  font-family: var(--font);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--teal-nav);
  text-decoration: none;
  padding: 0.4rem 0;
  transition: color 0.15s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible { color: #0b565a; }

.site-nav a[aria-current="page"] {
  color: var(--teal);
  border-bottom: 2px solid var(--teal);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  height: 2px;
  background: var(--teal);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Eight menu items need this much room; below it the nav wraps onto a
   second line and crowds the logo, so it becomes the hamburger instead. */
@media (max-width: 1250px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    inset-inline: -1.25rem;
    top: 100%;
    background: var(--white);
    border-top: 1px solid var(--rule);
    box-shadow: 0 10px 30px rgba(8, 63, 66, 0.14);
  }
  /* Eight items are taller than a phone screen once the header is pinned, so
     the open panel scrolls inside whatever room is left below the header. */
  .site-nav.is-open {
    display: block;
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.25rem 1.25rem;
  }
  .site-nav li + li { border-top: 1px solid var(--rule); }
  .site-nav a { padding: 0.9rem 0.25rem; }
}

/* A pinned bar has to stay out of the way on a phone: 109px of a 667px screen
   is too much to give up permanently, so the header and logo shrink here. */
@media (max-width: 700px) {
  :root { --header-height: 84px; }
  .brand img { width: 160px; }
}

/* --------------------------------------------------------------------------
   Banner — the cross-fading photo slideshow that heads every page.
   No dark scrim over the photos: they show at full strength, as on the live
   site. The title carries itself over them on --title-shadow instead.
   -------------------------------------------------------------------------- */

.banner {
  position: relative;
  height: var(--banner-height);
  display: grid;
  place-items: center;
  overflow: hidden;
  /* The first slide also sits here as a still base layer, so nothing but
     photography is ever visible behind the cross-fade. */
  background-color: #0f6e73;
  background-image: var(--bg-pool-sm);
  background-size: cover;
  background-position: center;
}

@media (min-width: 700px) {
  .banner { background-image: var(--bg-pool); }
}

.banner-slides {
  position: absolute;
  inset: 0;
  /* Its own stacking context, so the slides' z-indexes stay inside it and
     never rise above the title. */
  z-index: 0;
}

.banner-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: banner-fade 24s infinite;
}

/* Each slide stacks above the one before it and fades in over it. The slide
   underneath stays fully opaque until it is completely covered, so the two
   never sit at partial opacity together — which would let the background
   show through and wash the photo out.

   Four seconds per slide, six slides, so a 24s cycle. */
.banner-slide:nth-child(1) { z-index: 1; animation-delay: 0s; }
.banner-slide:nth-child(2) { z-index: 2; animation-delay: 4s; }
.banner-slide:nth-child(3) { z-index: 3; animation-delay: 8s; }
.banner-slide:nth-child(4) { z-index: 4; animation-delay: 12s; }
.banner-slide:nth-child(5) { z-index: 5; animation-delay: 16s; }
.banner-slide:nth-child(6) { z-index: 6; animation-delay: 20s; }

@keyframes banner-fade {
  0%      { opacity: 0; }   /* 0s — start of this slide's turn */
  4.17%   { opacity: 1; }   /* 1s — faded in, then held for three seconds */
  20.83%  { opacity: 1; }   /* 5s — the next slide has just covered it */
  20.84%  { opacity: 0; }   /* drop out unseen, beneath the slide above */
  100%    { opacity: 0; }
}

/* With animation off, the still background image is the whole banner. */
@media (prefers-reduced-motion: reduce) {
  .banner-slide { animation: none; opacity: 0; }
}

/* A pool of shade behind the title, so the white text does not depend on the
   frame that happens to be showing. An ellipse rather than a flat overlay:
   it reaches nothing at the edges of the band, so the photography is still
   seen untinted there, and only the middle — where the text sits — is
   darkened. Painted between the slides and the title: it shares z-index 0
   with .banner-slides and comes later in paint order, so it covers them,
   while .banner-text at z-index 1 stays above it. */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 72% 62% at 50% 50%,
    rgba(0, 0, 0, 0.52) 0%,
    rgba(0, 0, 0, 0.34) 48%,
    rgba(0, 0, 0, 0.12) 72%,
    rgba(0, 0, 0, 0) 88%
  );
}

/* The portrait banner is a plain brand band with no photo behind the text. */
.banner-portrait::after { display: none; }

.banner-text {
  position: relative;
  z-index: 1;   /* above .banner-slides, whatever the slides do inside it */
  text-align: center;
  padding-inline: 1.25rem;
}

.banner-text h1 {
  font-size: 4.0625rem;
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--white);
  text-shadow: var(--title-shadow);
  margin: 0;
}

.banner-sub {
  font-size: 2.1875rem;
  line-height: 1.15;
  color: var(--white);
  text-shadow: var(--title-shadow);
  margin: 20px 0 0;
}

@media (max-width: 900px) {
  .banner { height: 360px; }
  .banner-text h1 { font-size: 2.625rem; letter-spacing: -0.6px; }
  .banner-sub { font-size: 1.5rem; margin-top: 14px; }
}

@media (max-width: 560px) {
  .banner { height: 300px; }
  .banner-text h1 { font-size: 2rem; }
  .banner-sub { font-size: 1.1875rem; }
}

/* --------------------------------------------------------------------------
   Content sections — white background, centred column
   -------------------------------------------------------------------------- */

.section { padding-block: 70px; }
.section-tight { padding-block: 45px; }

.prose {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: justify;
}

.prose > h2,
.prose > h3 {
  font-size: 2.0625rem;
  line-height: 1.3;
  color: var(--teal);
  text-align: center;
  margin: 0 0 30px;
}

.prose > h2:not(:first-child),
.prose > h3:not(:first-child) { margin-top: 50px; }

.prose ul { padding-inline-start: 1.2em; }

/* A wide, centred paragraph block — the closing text on the home page. */
.prose-wide {
  max-width: 1250px;
  margin-inline: auto;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.875rem;
}

.lead {
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 28px;
}

/* The watercolour badge that separates paragraph groups on inner pages. */
.divider {
  display: block;
  width: 140px;
  height: auto;
  margin: 55px auto;
}

/* --------------------------------------------------------------------------
   Home — the three cards over an inset photo panel
   -------------------------------------------------------------------------- */

/* Full-bleed, like the banner: the photo runs edge to edge and only the
   cards are held to the container width. */
.cards-panel {
  position: relative;
  background-image: var(--bg-cards-sm);
  background-size: cover;
  background-position: center;
  padding: 140px 0;
}

@media (min-width: 700px) {
  .cards-panel { background-image: var(--bg-cards); }
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* 84% white with 35px padding, as measured; the rounding lives on the
     Elementor wrapper around that box, so it is applied here instead. */
  background: rgba(255, 255, 255, 0.84);
  border-radius: 20px;
  padding: 35px;
}

.card h2 {
  font-size: 1.4375rem;
  line-height: 1.3;
  color: var(--card-title);
  margin: 0 0 18px;
}

.card p {
  flex: 1 1 auto;
  font-size: 1.0625rem;
  line-height: 1.75rem;
  color: var(--ink);
  margin: 0;
}

.card .btn { margin-top: 26px; }

@media (max-width: 900px) {
  .cards-panel { padding: 50px 0; }
  .cards { grid-template-columns: 1fr; gap: 22px; }
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact-intro {
  text-align: center;
  font-size: 1.1875rem;
  line-height: 2.5rem;
  margin: 0 0 34px;
}

.contact-heading {
  text-align: center;
  font-size: 1.4375rem;
  color: var(--teal);
  margin: 0 0 24px;
}

.contact-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: fit-content;
  display: grid;
  gap: 14px;
}

.contact-list a {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.1875rem;
  color: var(--ink);
  text-decoration: none;
}
.contact-list a:hover span,
.contact-list a:focus-visible span { text-decoration: underline; }

.contact-list svg {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--teal);
}

/* --------------------------------------------------------------------------
   Blog — cards over a photo panel, mirroring the live layout
   -------------------------------------------------------------------------- */

.blog-panel {
  background-image: var(--bg-pool-sm);
  background-size: cover;
  background-position: center;
  padding: 90px 0 120px;
}

@media (min-width: 700px) {
  .blog-panel { background-image: var(--bg-pool); }
}

.post-list {
  list-style: none;
  margin-inline: auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 289px);
  justify-content: center;
  gap: 62px;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 11px;
  overflow: hidden;
}

.post-card img {
  width: 100%;
  aspect-ratio: 289 / 280;
  object-fit: cover;
}

.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px 22px 26px;
}

.post-card h2 {
  font-size: 1.3125rem;
  line-height: 1.35;
  margin: 0 0 14px;
}

.post-card h2 a {
  color: var(--teal-blog);
  text-decoration: none;
}
.post-card h2 a:hover { text-decoration: underline; }

.post-card p {
  flex: 1 1 auto;
  font-size: 1rem;
  line-height: 1.625rem;
  margin: 0 0 18px;
}

.post-more {
  align-self: flex-start;
  font-size: 1rem;
  color: var(--teal-blog);
  text-decoration: none;
}
.post-more:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .blog-panel { padding: 40px 20px 60px; }
  .post-list { grid-template-columns: 1fr; }
}

/* Single post */

.post-body h1 {
  font-size: 2.5rem;
  line-height: 1.25;
  color: var(--teal);
  text-align: start;
  margin: 0 0 30px;
}

.post-figure {
  margin: 0 0 34px;
  max-width: 300px;
}

.post-back {
  display: inline-block;
  margin-top: 45px;
  color: var(--teal);
}

/* --------------------------------------------------------------------------
   Footer — bright pool photo with a translucent panel floating on it
   -------------------------------------------------------------------------- */

.site-footer {
  background-image: var(--bg-pool);
  background-size: cover;
  background-position: 50% 100%;
  padding: 80px 20px;
}

.footer-panel {
  width: min(100%, 1054px);
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.69);
  border-radius: var(--panel-radius);
  padding: 55px 65px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 30px;
  align-items: start;
}

.footer-col h2 {
  font-size: 1.4375rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 16px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li + li { margin-top: 10px; }

.footer-col a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
}
.footer-col a:hover span,
.footer-col a:focus-visible span { text-decoration: underline; }

.footer-col svg {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--teal);
}

.footer-brand { justify-self: center; }
.footer-brand img { width: 130px; }

@media (max-width: 820px) {
  .site-footer { padding: 50px 16px; }
  .footer-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 36px 26px;
    gap: 34px;
  }
  .footer-col a { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Accessibility widget
   -------------------------------------------------------------------------- */

/* Bottom-left, matching where the original site put it. Deliberately a
   physical `left` and not `inset-inline-start`: in an RTL document the logical
   property would flip it to the right-hand side. */
.a11y-widget {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 150;
}

.a11y-toggle {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  box-shadow: 0 10px 30px rgba(8, 63, 66, 0.25);
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.a11y-toggle:hover { background: #0b565a; }

.a11y-panel {
  position: absolute;
  left: 0;
  bottom: 62px;
  width: 230px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(8, 63, 66, 0.2);
  padding: 1rem;
}

.a11y-panel h2 {
  font-size: 1.05rem;
  margin-bottom: 0.6em;
}

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

.a11y-panel button {
  width: 100%;
  text-align: start;
  font-family: var(--font);
  font-size: 0.95rem;
  background: transparent;
  color: var(--ink-soft);
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem;
  cursor: pointer;
}
.a11y-panel button:hover { background: #e7f2f2; }
.a11y-panel button[aria-pressed="true"] {
  background: var(--teal);
  color: var(--white);
}

.a11y-reset {
  margin-top: 0.4rem;
  border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important;
}

.a11y-note {
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
}

/* Modes applied by the widget to the <html> element.

   The two filter modes are applied to <html> itself, not to <body>. A filter
   on any element other than the root makes that element the containing block
   for the fixed-position descendants inside it, which dropped the floating
   accessibility button to the foot of the document. The root element is
   exempt, so the button stays anchored to the viewport.

   Filtering the root also inverts the page canvas. Filtering <body> did not:
   body background propagates to the canvas, which is painted outside the
   filtered element, so the page stayed white while every colour on it
   lightened — which left the section headings almost invisible. */
.a11y-grayscale { filter: grayscale(1); }

.a11y-contrast body {
  --ink: #000;
  --ink-soft: #000;
  --teal-nav: #04383b;
  --teal: #04383b;
  --rose: #8c0033;
  background: #fff;
}
.a11y-contrast .banner-slide { filter: brightness(0.45); }
.a11y-contrast .banner-text h1,
.a11y-contrast .banner-sub { text-shadow: 0 2px 6px #000; }
.a11y-contrast .card,
.a11y-contrast .footer-panel { background: #fff; }
.a11y-contrast .site-footer { background-image: none; background-color: #04383b; }

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

.a11y-light .banner { background: #f4f9f9; }
.a11y-light .banner-slides { display: none; }
.a11y-light .banner-text h1,
.a11y-light .banner-sub {
  color: var(--teal);
  text-shadow: none;
}
.a11y-light .cards-panel,
.a11y-light .blog-panel,
.a11y-light .site-footer {
  background-image: none;
  background-color: #f4f9f9;
}
.a11y-light .footer-panel { background: #fff; }

.a11y-links a {
  text-decoration: underline !important;
  font-weight: 700 !important;
}

.a11y-readable,
.a11y-readable body,
.a11y-readable h1,
.a11y-readable h2,
.a11y-readable h3,
.a11y-readable .btn,
.a11y-readable .site-nav a {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* --------------------------------------------------------------------------
   Motion + print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Slides stay hidden; the banner's own background image shows instead. */
  .banner-slide { opacity: 0 !important; }
}

@media print {
  .site-header, .a11y-widget, .cta-row, .skip-link { display: none !important; }
  .banner { height: auto; background: none; }
  .banner::after { display: none; }
  .banner-slides { display: none; }
  .banner-text h1, .banner-sub { color: #000 !important; text-shadow: none !important; }
  .cards-panel, .blog-panel, .site-footer { background-image: none !important; }
  .footer-panel { background: none !important; }
}

/* --------------------------------------------------------------------------
   Small shared helpers
   -------------------------------------------------------------------------- */

.center { text-align: center; }

.section-title {
  font-size: 2.0625rem;
  line-height: 1.3;
  color: var(--teal);
  text-align: center;
  margin: 0 0 30px;
}

@media (max-width: 700px) {
  .section-title { font-size: 1.625rem; }
  .lead { font-size: 1.25rem; }
  body { font-size: 1.0625rem; line-height: 1.875rem; }
  .prose-wide { font-size: 1.125rem; line-height: 1.75rem; }
  .section { padding-block: 45px; }
  .cta-row { padding-bottom: 45px; }
}

/* Per-page text column tweaks, matching the live site page by page. */
.prose-688 { max-width: 688px; }
.prose-center { text-align: center; }

/* The blog has no separate banner: its title sits on the same photo panel
   as the post cards, the way the live site lays it out. */
.blog-panel-title {
  font-size: 4.0625rem;
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--white);
  text-align: center;
  text-shadow: var(--title-shadow);
  margin: 0 0 70px;
}

@media (max-width: 900px) {
  .blog-panel-title { font-size: 2.625rem; margin-bottom: 40px; }
}

/* Blog page: the photo panel runs from just under the header. */
.blog-section { padding-bottom: 70px; }

.blog-panel-inner {
  width: min(100% - 2.5rem, 1300px);
  margin-inline: auto;
}

.contact-intro-block {
  width: fit-content;
  margin-inline: auto;
  text-align: start;
  line-height: 3rem;
}

/* --------------------------------------------------------------------------
   Intake form (/intake/)
   Unlisted medical questionnaire. The accessibility statement covers this
   page too, so every control is labelled, errors are announced in text and
   tied to their field, and the whole thing works by keyboard alone.
   -------------------------------------------------------------------------- */

.form-wrap {
  max-width: 700px;
  margin-inline: auto;
}

.form-header-img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 0 0 30px;
}

.form-title {
  font-size: 2.0625rem;
  line-height: 1.3;
  color: var(--teal);
  text-align: center;
  margin: 0 0 24px;
}

.form-intro {
  text-align: center;
  margin-bottom: 22px;
}

.form-privacy {
  background: #f2f9f9;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 1rem;
  line-height: 1.6875rem;
  margin-bottom: 34px;
}

.form-required-note {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 0 0 24px;
}

.req { color: #b3003c; }

.field {
  margin: 0 0 26px;
  border: 0;
  padding: 0;
}

.field > label,
.field > legend {
  display: block;
  font-size: 1.125rem;
  line-height: 1.5;
  margin-bottom: 8px;
  padding: 0;
}

.intake-form input[type="text"],
.intake-form input[type="email"],
.intake-form input[type="tel"],
.intake-form input[type="date"],
.intake-form textarea,
.voucher-form input[type="text"],
.voucher-form select {
  width: 100%;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #b9cccc;
  border-radius: 6px;
  padding: 11px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.intake-form input:focus,
.intake-form textarea:focus,
.voucher-form input:focus,
.voucher-form select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(16, 118, 124, 0.16);
  outline: none;
}

/* The shared :focus-visible ring still applies for keyboard users. */
.intake-form input:focus-visible,
.intake-form textarea:focus-visible,
.voucher-form input:focus-visible,
.voucher-form select:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 2px;
}

.intake-form textarea { resize: vertical; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 9px;
}

.choice input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 4px 0 0;
  accent-color: var(--teal);
}

.choice label {
  font-size: 1.0625rem;
  line-height: 1.6;
}

.declaration {
  background: #f2f9f9;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 20px;
}
.declaration .choice { margin-bottom: 0; }

/* Errors ------------------------------------------------------------------ */

.field-error {
  display: block;
  font-size: 0.96875rem;
  line-height: 1.5;
  color: #b3003c;
  margin-top: 6px;
}

.field.has-error input:not([type="checkbox"]):not([type="radio"]),
.field.has-error textarea {
  border-color: #b3003c;
}

.error-summary {
  border: 2px solid #b3003c;
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 28px;
}

.error-summary h2 {
  font-size: 1.25rem;
  color: #b3003c;
  margin: 0 0 10px;
}

.error-summary ul { margin: 0; padding-inline-start: 1.2em; }
.error-summary li { margin-bottom: 5px; }
.error-summary a { color: #b3003c; }

/* Status ------------------------------------------------------------------ */

.form-status {
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 28px;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.form-status.is-success {
  background: #eaf6f0;
  border: 2px solid #1d7a4f;
}

.form-status.is-error {
  background: #fdeef2;
  border: 2px solid #b3003c;
}

.form-status h2 {
  font-size: 1.3125rem;
  margin: 0 0 8px;
  color: var(--teal);
}
.form-status.is-error h2 { color: #b3003c; }

.form-actions { margin-top: 34px; }

.intake-form button[type="submit"] {
  font-size: 1.0625rem;
  padding: 14px 40px;
  cursor: pointer;
}
.intake-form button[disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* Honeypot: off-screen rather than display:none, so bots still fill it. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .form-title { font-size: 1.625rem; }
  .field > label,
  .field > legend { font-size: 1.0625rem; }
}

/* --------------------------------------------------------------------------
   Yes/No cards in the intake form
   Each health question is a real radio group styled as a segmented pill. The
   inputs stay in the page (just visually hidden) so arrow keys, tabbing and
   screen readers all behave as they would for any radio group.
   -------------------------------------------------------------------------- */

.yn-heading {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 14px;
}

.yn-card {
  border: 0;
  background: #f2f9f9;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 14px;
}

.yn-legend {
  float: right;
  width: 100%;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  padding: 0;
  margin: 0 0 14px;
}

/* The number sits directly against the question it belongs to, not out at
   the card's edge. Decorative — the question text is the accessible name.
   Laid out with flex rather than vertical-align, which needed a per-font-size
   correction and so drifted on mobile. */
.yn-legend-inner {
  display: flex;
  align-items: center;
  gap: 9px;
}

.yn-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-size: 0.875rem;
  line-height: 1;
}

.yn-control {
  clear: both;
  display: flex;
  gap: 6px;
  background: var(--white);
  border: 1px solid #d4e4e4;
  border-radius: 999px;
  padding: 5px;
}

/* Hidden from sight, still focusable and still a radio. */
.yn-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.yn-control label {
  flex: 1 1 0;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--teal);
  background: transparent;
  border-radius: 999px;
  padding: 11px 8px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.yn-control label:hover { background: #e7f2f2; }

.yn-control input:checked + label {
  background: var(--teal);
  color: var(--white);
}

.yn-control input:focus-visible + label {
  outline: 3px solid var(--rose);
  outline-offset: 2px;
}

.yn-card.has-error {
  background: #fdeef2;
  box-shadow: inset 0 0 0 2px #b3003c;
}
.yn-card.has-error .yn-control { border-color: #b3003c; }
.yn-card .field-error { margin-top: 10px; }

@media (max-width: 600px) {
  .yn-card { padding: 16px; }
  .yn-legend { font-size: 1rem; }
  .yn-control label { font-size: 1rem; padding: 12px 8px; }
}
}

/* --------------------------------------------------------------------------
   FAQ accordions (/faq/)
   Native <details>/<summary>: keyboard support, find-in-page expansion and
   no-JS behaviour all come for free.
   -------------------------------------------------------------------------- */

.faq-wrap {
  max-width: 780px;
  margin-inline: auto;
}

.faq-intro {
  text-align: center;
  font-size: 1.1875rem;
  line-height: 2rem;
  margin: 0 0 44px;
}

.faq-topic { margin-bottom: 46px; }
.faq-topic:last-of-type { margin-bottom: 0; }

.faq-topic-title {
  font-size: 1.625rem;
  line-height: 1.35;
  color: var(--teal);
  margin: 0 0 18px;
}

.faq-item {
  border: 1px solid var(--rule);
  border-radius: 12px;
  margin-bottom: 10px;
  background: var(--white);
  transition: border-color 0.15s ease;
}

.faq-item[open] {
  border-color: #bcd8d8;
  background: #f7fbfb;
}

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
}

/* Safari draws its own triangle unless this is removed. */
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover { color: var(--teal); }

.faq-item summary:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: -3px;
  border-radius: 12px;
}

/* The chevron is drawn rather than typed, so it rotates smoothly and never
   picks up the bidi reordering a character would.
   Deliberately physical borders: "down" and "up" mean the same thing in RTL
   as in LTR, and border-inline-end flipped the arrow sideways. */
.faq-item summary::after {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  margin-inline-start: auto;
  margin-bottom: 4px;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after { transform: rotate(225deg); }

.faq-answer {
  padding: 0 20px 20px;
  font-size: 1.0625rem;
  line-height: 1.875rem;
  color: var(--ink);
}

.faq-answer p { margin: 0; }

.faq-footnote {
  text-align: center;
  margin: 46px 0 0;
  font-size: 1.0625rem;
}

@media (max-width: 600px) {
  .faq-intro { font-size: 1.0625rem; line-height: 1.8125rem; margin-bottom: 32px; }
  .faq-topic-title { font-size: 1.375rem; }
  .faq-item summary { font-size: 1.03125rem; padding: 14px 16px; }
  .faq-answer { padding: 0 16px 16px; font-size: 1rem; line-height: 1.75rem; }
}

/* --------------------------------------------------------------------------
   Portrait banner (/about/)
   Same 466px band as everywhere else, but the photo keeps its own square crop
   and sits beside the title instead of being stretched behind it.
   -------------------------------------------------------------------------- */

.banner-portrait {
  background: linear-gradient(150deg, #14848a 0%, #0b565a 100%);
  background-size: cover;
  background-position: center;
}

.banner-portrait-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 3.75rem);
}

.banner-portrait-img {
  flex: 0 0 auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.22),
              0 18px 42px rgba(0, 0, 0, 0.28);
}

.banner-portrait-text { text-align: start; }

.banner-portrait-text h1 {
  font-size: 3.625rem;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--white);
  margin: 0;
}

/* On a flat band the title carries itself; the drop shadow the photo banners
   need would only muddy it here. */
.banner-portrait-text .banner-sub {
  font-size: 1.625rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: none;
  margin: 14px 0 0;
  max-width: 22ch;
}

@media (max-width: 979px) {
  .banner-portrait { height: auto; padding-block: 48px; }
  .banner-portrait-inner { flex-direction: column; gap: 26px; }
  .banner-portrait-img { width: 190px; height: 190px; }
  .banner-portrait-text { text-align: center; }
  .banner-portrait-text h1 { font-size: 2.375rem; }
  .banner-portrait-text .banner-sub { font-size: 1.25rem; max-width: none; }
}

/* --------------------------------------------------------------------------
   About page portrait
   Two placements of the same file — beside the text on desktop, inside the
   banner on phones. Identical src, so it is fetched once and the second copy
   comes from cache. Only one is ever in the accessibility tree, since
   display:none removes the other.
   -------------------------------------------------------------------------- */

.about-portrait { display: none; }

@media (min-width: 980px) {
  /* Desktop: a photo of Shiri at work behind the title, and the round
     portrait moves down to sit with the words it belongs to. The image is
     declared only inside this query, so phones never fetch it. */
  .banner-portrait {
    background-image: var(--bg-about);
  }

  .banner-portrait-inner {
    justify-content: center;
    align-items: center;
  }

  .banner-portrait-text {
    text-align: center;
    max-width: none;
  }

  /* The base rule caps this at 22ch to make it wrap on phones; on desktop it
     belongs on one line. */
  .banner-portrait-text .banner-sub { max-width: none; }

  .banner-portrait-text h1,
  .banner-portrait-text .banner-sub {
    text-shadow: var(--title-shadow);
  }

  .banner-portrait-img { display: none; }

  /* The text column keeps the same 688px measure as the rest of the site;
     the portrait sits beside it and the pair is centred in the container. */
  .about-layout {
    display: grid;
    grid-template-columns: minmax(0, 688px) 210px;
    justify-content: center;
    gap: clamp(1.75rem, 3vw, 2.75rem);
    align-items: start;
  }

  /* Column 2 is the left-hand one in an RTL grid. */
  .about-portrait { grid-column: 2; grid-row: 1; }
  .about-text { grid-column: 1; grid-row: 1; }

  /* Roughly the height of the opening paragraphs it sits beside, and it
     scrolls away with them rather than following the viewport. */
  .about-portrait {
    display: block;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 5px rgba(16, 118, 124, 0.12),
                0 12px 28px rgba(8, 63, 66, 0.16);
  }

  /* Beside a photo the copy reads better ranged than centred. */
  .about-text {
    margin-inline: 0;
    max-width: none;
    text-align: start;
  }

}

/* Price block on /watsu/ — set apart from the body copy, since it is the
   thing a visitor is looking for rather than something to read through. */
.price-note {
  background: #f2f9f9;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px 28px;
  /* All three lines start at the same point rather than each centring on its
     own length. */
  text-align: start;
  font-size: 1.1875rem;
  line-height: 2.125rem;
}

.price-note p { margin: 0 0 10px; }

/* The duration and the series note frame the figures; both are set quieter
   than the prices themselves. */
.price-note p:first-child,
.price-note p:last-child {
  font-size: 1.0625rem;
  color: var(--ink-soft);
}
.price-note p:first-child { margin-bottom: 14px; }
.price-note p:last-child { margin: 14px 0 0; }

@media (max-width: 600px) {
  .price-note { padding: 20px; font-size: 1.0625rem; line-height: 1.875rem; }
  .price-note p:first-child,
  .price-note p:last-child { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   Facility gallery (/where/)
   -------------------------------------------------------------------------- */

.gallery-section { padding-top: 0; }

.gallery-hint {
  text-align: center;
  font-size: 1.0625rem;
  color: var(--ink-soft);
  margin: -18px 0 28px;
}

/* One centred row whatever the number of photos: the items shrink to fit
   rather than wrapping a lone orphan onto a second line, and once they would
   go below 160px the row scrolls instead. `safe center` keeps the first photo
   reachable when that happens. */
.gallery-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: safe center;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
}

.gallery-strip > li {
  flex: 1 1 260px;
  min-width: 160px;
  max-width: 260px;
  scroll-snap-align: center;
}

.gallery-item {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #e7f2f2;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.gallery-item:hover,
.gallery-item:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(8, 63, 66, 0.2);
}

@media (max-width: 700px) {
  /* A scrolling row rather than a stack, so the strip stays a strip. */
  .gallery-strip {
    justify-content: start;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
  }
  .gallery-strip > li {
    flex: 0 0 62vw;
    min-width: 0;
    max-width: none;
  }
}

/* Enlarged view ----------------------------------------------------------- */

.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.lightbox::backdrop { background: rgba(4, 34, 36, 0.92); }

.lightbox-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.lightbox-figure img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  border-radius: 6px;
}

.lightbox-counter {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9375rem;
}

.lightbox-nav,
.lightbox-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.lightbox-nav:hover,
.lightbox-close:hover { background: rgba(255, 255, 255, 0.28); }

.lightbox-nav svg,
.lightbox-close svg { width: 22px; height: 22px; }

.lightbox-close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 1;
}

.lightbox-nav:focus-visible,
.lightbox-close:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .lightbox-inner { padding: 10px; gap: 4px; }
  .lightbox-nav, .lightbox-close { width: 42px; height: 42px; }
  .lightbox-figure img { max-height: calc(100vh - 150px); }
}

/* --------------------------------------------------------------------------
   Gift voucher builder (/voucher/) — unlisted, for Shiri's own use.
   The form reuses the intake form's field styles; what is particular here is
   the preview and the two actions under it.
   -------------------------------------------------------------------------- */

.voucher-page .wrap { max-width: 760px; }

.voucher-lead {
  text-align: center;
  margin-bottom: 34px;
}

/* Two fields to a row where there is room; each still fills the width on a
   phone, where a 50% text input is too narrow to read what you typed. */
.voucher-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 24px;
}

.hint {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

.voucher-preview {
  margin: 10px 0 26px;
}

.voucher-preview figcaption {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

/* The canvas is drawn at the artwork's own pixel size and scaled down to fit
   here, so what is shared is always full resolution whatever the screen. */
#voucher-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(8, 63, 66, 0.16);
}

.voucher-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* The second action, so it reads as the alternative to the primary one. */
.btn-quiet {
  background: transparent;
  color: var(--teal);
}
.btn-quiet:hover,
.btn-quiet:focus-visible {
  background: #eef6f6;
  color: #0b565a;
  border-color: #0b565a;
}

.voucher-status {
  margin: 16px 0 0;
  min-height: 1.5em;
}
.voucher-status.is-error { color: #b3003c; }

.voucher-note {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 14px 0 0;
}

button.btn { cursor: pointer; }

/* The select inherits the text inputs' box above; these are the parts a
   select needs on its own — its own arrow, and room for it at the inline
   end, which is the left on an RTL page. */
.voucher-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2310767c' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 12px 8px;
  padding-inline-end: 38px;
  cursor: pointer;
}