/* ============================================================
   Site v7 — shared stylesheet. Cream/clay palette (designer direction §5).
   ============================================================ */

:root{
  --paper:#FAF7F1;
  --paper-alt:#F1ECE1;
  --ink:#2A2724;
  --ink-soft:#55504A;
  /* #857E74 failed AA as text on EVERY surface it lands on (3.38-4.01:1) —
     13 pairings across the site, all from this one token. #6B645C clears it
     everywhere: 5.45 on --paper, 4.95 on --paper-alt, 4.90 on --sage-bg,
     5.83 on white. Audit a token against every surface, not one. */
  --muted:#6B645C;
  /* Was #A65640: 4.43 on --paper-alt and 4.39 on --sage-bg, i.e. the global
     LINK colour failed AA on two of the four surfaces it lands on. #A2543E is
     the smallest darkening that clears 4.5 on all four (4.60 / 4.56 / 5.07 /
     5.42) — chosen over jumping to --clay-deep (8.03) so the brand hue is
     preserved and links do not visibly change colour. */
  --clay:#A2543E;       /* links + active */
  --clay-cta:#8F4632;   /* filled button, white text */
  --clay-deep:#6E3627;  /* hover / headings */
  --sage:#5E7A6F;       /* support only */
  /* Track-B CTA. --sage itself CANNOT carry this: as text it is 4.37/3.97/3.94
     on --paper/--paper-alt/--sage-bg — three AA failures. #4A6459 gives white
     -on-fill 6.45:1 (clay's filled CTA is 6.80) and 6.03/5.47/5.42 as text, so
     the fill also clears 1.4.11 against every surface it lands on. --sage-cta-deep
     is ONLY ever a .cta background — it never touches a:hover, so the link
     hover affordance that --clay-deep owns is untouched. */
  --sage-cta:#4A6459;
  --sage-cta-deep:#3F5A50;
  --sage-bg:#E7EDE7;    /* support only */
  --brown-deep:#2A211C; /* footer */
  --line:#E3DCCE;
  /* Control BORDERS (form fields, the slot chips): --line is a hairline for
     dividers and measures 1.28:1 on --paper — a 1.4.11 failure as the sole
     shape of a control. #7D766C: 4.49 white · 4.20 paper · 3.81 paper-alt ·
     3.77 sage-bg (Designer M2 §1.5). */
  --field-line:#7D766C;
  /* ⚠ name/value trap: in dark this token is #262019, i.e. NOT white — it is
     the raised card surface. Any remaining #fff hardcode bypasses it on
     purpose (footer/crisis plinth, photo overlays). */
  --white:#FFFFFF;
  /* Label colour on every FILLED cta. #fff on the lightened dark fills would
     measure ~2.12:1 — hence a token instead of the old color:#fff hardcodes. */
  --on-cta:#FFFFFF;
  /* The topbar/mobilebar creams were rgba hardcodes — a theming hole (bright
     cream bars pinned to a near-black page). Tokenized, both themes. */
  --topbar-bg:rgba(250,247,241,.94);
  --mobilebar-bg:rgba(250,247,241,.96);
  --sans:'Heebo',system-ui,sans-serif;
  --cta-pad:30px;      /* .cta inline padding — the CTA-group alignment reference */
  color-scheme:light;  /* UA-rendered controls (form fields, scrollbars) follow the theme */
}

/* ============================================================
   Dark theme — designer palette 2026-08-10. Every value measured, AA-verified
   per token × per surface. Default is LIGHT: absent data-theme ⇒ light, and
   prefers-color-scheme is deliberately NOT read (manual toggle only).
   Band direction inverts — bands step LIGHTER than the page — band RANK does
   not. The footer/crisis plinth stays on its four hardcoded text values
   (#D3CCC0 / #EDE7DD / #A79C8C / #fff): re-verified against the dark
   --brown-deep at 9.31 / 12.07 / 5.50 / 14.85 — do NOT re-theme them.
   ============================================================ */
html[data-theme="dark"]{
  color-scheme:dark;
  --paper:#17130F;
  --paper-alt:#201B16;
  --white:#262019;      /* raised surface — see the name/value trap note above */
  --brown-deep:#2E2620; /* footer plinth barely moves — it was already dark */
  --sage-bg:#1F2E28;
  --line:#3A322A;
  --field-line:#8F857B;  /* 4.46 white · 5.11 paper · 4.72 paper-alt · 3.93 sage-bg */
  --ink:#F0EAE0;
  --ink-soft:#B8AFA3;
  --muted:#9C9285;      /* floor surface is --sage-bg at 4.64 — do not soften */
  --clay:#E0937A;
  --clay-deep:#F0B29C;  /* hover goes LIGHTER in dark */
  --clay-cta:#D98468;
  --sage:#7EA294;
  --sage-cta:#6FA08D;
  --sage-cta-deep:#86B7A2;
  --on-cta:#17130F;
  --topbar-bg:rgba(23,19,15,.92);
  --mobilebar-bg:rgba(23,19,15,.94);
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms !important;transition-duration:.01ms !important} }
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--clay)}
a:hover{color:var(--clay-deep)}
button{font-family:var(--sans)}
ul,ol{list-style:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--clay);outline-offset:3px;border-radius:4px
}

/* ---------- layout helpers ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section-tight{padding:56px 0}
.center{text-align:center}
@media (max-width:640px){ .section{padding:56px 0} }

/* ---------- type scale ---------- */
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);font-weight:700}
h1{font-size:clamp(32px,5vw,46px);line-height:1.25}
h2{font-size:clamp(26px,3.6vw,34px);line-height:1.3;font-weight:700}
h3{font-size:20px;font-weight:500}
h4{font-size:17px;font-weight:500}
.kicker{display:block;font-size:14px;font-weight:600;color:var(--clay);margin-bottom:10px}
.lead{margin:14px auto 0;font-size:16px;max-width:56ch;color:var(--ink-soft)}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;top:-100px;right:16px;z-index:100;background:var(--clay-cta);color:var(--on-cta);
  padding:12px 20px;border-radius:8px;text-decoration:none;font-weight:600;transition:top .15s
}
.skip-link:focus{top:16px}

/* ---------- buttons ---------- */
.cta{
  background:var(--clay-cta);color:var(--on-cta);text-decoration:none;font-weight:700;font-size:15px;
  padding:14px var(--cta-pad);border-radius:999px;white-space:nowrap;border:0;cursor:pointer;
  font-family:var(--sans);display:inline-block;line-height:1.2
}
.cta:hover{background:var(--clay-deep);color:var(--on-cta)}
.cta.opinion{background:var(--sage-cta)}
.cta.opinion:hover{background:var(--sage-cta-deep);color:var(--on-cta)}
.cta.ghost{background:transparent;color:var(--clay-cta);border:1.5px solid var(--clay-cta)}
.cta.ghost:hover{background:var(--paper-alt);color:var(--clay-deep);border-color:var(--clay-deep)}
.quiet{color:var(--clay);text-decoration:none;font-weight:600;font-size:14.5px;border-bottom:1.5px solid var(--clay);padding-bottom:2px}
.quiet:hover{color:var(--clay-deep);border-color:var(--clay-deep)}
.linkline{color:var(--ink);text-decoration:none;font-weight:600;border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.linkline:hover{color:var(--clay-deep);border-color:var(--clay-deep)}
.actions{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
/* Co-equal means EQUAL: same fill weight, same geometry, and equal rendered
   width. flex:1 1 200px on both gives identical widths on one line and two
   full-width pills once the container drops under ~414px. A ghost outline
   here would read as a demotion, which is the one thing the client asked
   us not to do to the opinions track. */
.cta-pair{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}
.cta-pair .cta{flex:1 1 200px;text-align:center}
.hero .cta-pair{max-width:470px}

/* ---------- header / nav ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--topbar-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}
/* The clinic mark leads, the doctor's name follows: he is the primary identity
   (the hero h1 is his name), the clinic is the business entity and carries the
   full lockup in the footer. Two wordmarks on one surface would compete. */
.brand{display:flex;align-items:center;gap:12px;min-block-size:44px;
  font-family:var(--sans);font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand img{inline-size:34px;block-size:auto;flex-shrink:0}
.brand:hover{color:var(--clay-deep)}
.nav{display:flex;gap:26px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500;white-space:nowrap;padding-bottom:4px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--clay)}
.nav a[aria-current="page"]{color:var(--clay);border-bottom-color:var(--clay)}
.topbar-cta{display:flex;align-items:center;gap:14px}
@media (max-width:1060px){ .nav{display:none} .topbar-cta .cta{display:none} .brand img{inline-size:28px} }
@media (max-width:520px){ .topbar .wrap{gap:10px} .brand{font-size:17px;gap:10px} }

/* hamburger — 44px, not 42: 2.5.8 target-size floor (bumped with the theme
   toggle, which shares this exact box so no new geometry enters the system) */
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;background:transparent;border:1px solid var(--line);border-radius:8px;cursor:pointer;flex-shrink:0}
.hamburger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1060px){ .hamburger{display:flex} }

/* theme toggle — chrome, not accent: hamburger's box verbatim. Glyph names the
   ACTION (moon = go dark, sun = go light), matching the הצגה/הסתרה precedent.
   No fill and no clay at rest — clay is spent on the CTA. Two placements
   (topbar + mobile-menu-top), one control, because .mobile-menu covers the
   topbar. Focus-visible inherits the global clay outline for free. */
.theme-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--ink);flex-shrink:0}
.theme-toggle:hover{border-color:var(--clay);color:var(--clay)}
.theme-toggle .tt-sun{display:none}
html[data-theme="dark"] .theme-toggle .tt-moon{display:none}
html[data-theme="dark"] .theme-toggle .tt-sun{display:block}

.mobile-menu{position:fixed;inset:0;z-index:50;background:var(--paper);display:flex;flex-direction:column;overflow-y:auto}
.mobile-menu-top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:78px;padding:0 24px;border-bottom:1px solid var(--line)}
/* keep brand at the reading edge, toggle + × grouped at the far end */
.mobile-menu-top .theme-toggle{margin-inline-start:auto}
.mobile-menu-close{width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:transparent;font-size:22px;line-height:1;color:var(--ink);cursor:pointer}
.mobile-menu-body{padding:36px 24px;display:flex;flex-direction:column;gap:34px;flex:1}
.mobile-menu-body nav{display:flex;flex-direction:column;gap:4px}
.mobile-menu-body nav a{color:var(--ink);text-decoration:none;font-size:21px;font-weight:600;padding:12px 0;border-bottom:1px solid var(--line)}
.mobile-menu-body nav a[aria-current="page"]{color:var(--clay)}
.mobile-menu-contact{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.mobile-menu-contact a.quiet{width:auto}
.mobile-menu-contact a.cta{width:100%;text-align:center}

/* ---------- image placeholders ---------- */
.imgbox{background:var(--paper-alt);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-align:center;padding:24px}

/* ---------- hero ---------- */
.hero{padding:60px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero-grid .hero-img{order:2}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:32px} .hero-grid .hero-img{order:1} }
.hero h1{margin-top:2px}
.hero .sub{margin-top:20px;font-size:16.5px;color:var(--ink-soft);max-width:46ch;line-height:1.75}
.cred-list{margin:22px 0 0;display:flex;flex-direction:column;gap:9px}
.cred-list li{position:relative;padding-inline-start:20px;font-size:14.5px;color:var(--ink-soft)}
.cred-list li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--sage)}
.hero .actions,.hero .cta-pair{margin-top:28px}
.hero .reassure{margin-top:18px;font-size:13px;color:var(--muted)}
.hero-img{aspect-ratio:1/1;block-size:auto;inline-size:min(100%,460px)}
/* Real portrait (2026-07-27). The photo arrived as a cutout on pure white;
   the outer white was flood-filled to --paper-alt so it sits in the palette
   instead of reading as a pasted white rectangle on cream. object-position
   keeps his eyes in the upper third when the box crops. */
/* FIXED light photo-mat, deliberately NOT var(--paper-alt): the portrait's
   pixels carry a cream flood-fill baked to light --paper-alt (#F1ECE1), so a
   themed container would show a broken cream rectangle on a dark page. Pinning
   the mat to the same #F1ECE1 makes dark mode read as a deliberate framed
   photo. The real fix is re-cutting the asset with an alpha channel
   (transparent WebP + PNG fallback) — CEO/designer decision owed; once that
   lands, this reverts to background:var(--paper-alt). */
picture.hero-img,picture.about-img{display:block;overflow:hidden;border-radius:14px;background:#F1ECE1}
picture.hero-img img,picture.about-img img{inline-size:100%;block-size:100%;object-fit:cover;object-position:center 18%;display:block}
/* No fixed height at any width: the grid stacks at 900px and the image column
   goes full-bleed, so a locked height turned a square portrait into a
   letterbox (measured 852x300 = 2.84:1 at 900px). aspect-ratio keeps the frame
   square and the cap keeps it from becoming enormous when stacked. */
@media (max-width:900px){ .hero-img{margin-inline:auto} }

/* ---------- page header (inner pages) ---------- */
.page-head{background:var(--paper-alt);padding:64px 0 52px;border-bottom:1px solid var(--line);text-align:right}
.page-head h1::before{content:"";display:block;width:46px;height:3px;background:var(--clay);border-radius:2px;margin-bottom:20px}
.page-head h1{max-width:22ch;margin:0;font-size:clamp(30px,4.6vw,44px);line-height:1.2;text-wrap:balance}
.page-head .lead{margin:16px 0 0;margin-inline:0;text-align:right;max-width:52ch;font-size:16.5px;color:var(--ink-soft)}

/* ---------- condition / card grid ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:right;margin-top:40px}
@media (max-width:900px){ .cards{grid-template-columns:1fr} }
/* 8 cards in a 3-col grid left a hole in the last row. A 6-col grid with
   each card spanning 2 lets the trailing pair sit centred instead. */
.cards-centered-last{grid-template-columns:repeat(6,1fr)}
.cards-centered-last .card{grid-column:span 2}
.cards-centered-last .card:nth-last-child(2){grid-column:2/span 2}
@media (max-width:900px){
  .cards-centered-last{grid-template-columns:1fr}
  .cards-centered-last .card,.cards-centered-last .card:nth-last-child(2){grid-column:auto}
}
.card{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--sage);border-radius:12px;padding:28px 26px 30px}
.card h3{margin-bottom:8px}
.card p{font-size:14.5px;color:var(--ink-soft)}

/* ---------- tinted band (opinions — the single accent moment) ---------- */
.band-tint{background:var(--sage-bg)}
.flag-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center;text-align:right}
@media (max-width:900px){ .flag-grid{grid-template-columns:1fr} }
.flag-grid .lead2{margin:14px 0 16px;font-size:15.5px;color:var(--ink-soft);max-width:56ch}
.flag-list{display:flex;flex-direction:column;gap:8px;color:var(--ink-soft);font-size:14.5px;margin-top:4px}
.flag-list li{position:relative;padding-inline-start:16px}
.flag-list li::before{content:"";position:absolute;inset-inline-start:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--clay)}
.flag-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.flag-side .muted{font-size:13.5px;color:var(--muted);max-width:32ch}
/* The pill carries 30px of inline padding, so its LABEL sits 30px inside the
   column while the note beneath it started at the full margin — the two lines
   of the CTA group did not line up. Indent the note to the label, not to the
   pill's edge. NOTE inline-START, not end: this document is RTL, so the
   reading edge is the right one. Applied to BOTH places this idiom appears (home
   band and /opinions); --cta-pad keeps them from drifting apart. */
.flag-side .muted,.opinions-cta .muted{padding-inline-start:var(--cta-pad)}

/* ---------- opinions page ----------
   Right-aligned against the wrap edge, same as every other page head. */
.opinions-body{text-align:right}
.opinions-body .flag-list{gap:10px;font-size:15.5px}
.opinions-body .lead{margin:26px 0 0;max-width:56ch}
.opinions-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:32px}
.opinions-cta .muted{max-width:44ch}

/* Two audiences, one page: the client's own split is ~half private applicants
   and half lawyers, so /opinions stops being one funnel. Both cards keep the
   FORM as the front door — the lawyer mail addresses are for sending case
   material afterwards, never a replacement for the inquiry rail (an emailed
   first contact would leave no board row, no audit, no confirm gate). */
.routes-h{text-align:right;margin-bottom:4px}
.routes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:26px;text-align:right;align-items:stretch}
.route-card{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--sage);border-radius:12px;padding:28px 26px 30px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.route-card h3{margin:0}
.route-card p{font-size:14.5px;color:var(--ink-soft);margin:0;max-width:42ch}
.route-card .cta{margin-top:6px}
.route-mails{display:flex;flex-direction:column;gap:8px;width:100%}
.route-mails a{color:var(--clay);font-weight:600;font-size:14px;text-decoration:none;border-bottom:1px solid var(--clay);padding-bottom:2px;overflow-wrap:anywhere}
.route-mails a:hover{color:var(--clay-deep);border-color:var(--clay-deep)}
.channels-mail{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.channels-mail a{overflow-wrap:anywhere}
@media (max-width:820px){ .routes{grid-template-columns:1fr} }

/* ---------- teaser rows (home) ---------- */
.teaser-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.teaser-head .lead{margin-inline:0;text-align:right}
.teaser-head.center{justify-content:center;flex-direction:column;align-items:center;text-align:center}

/* ---------- videos ---------- */
.videos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.videos-grid.teaser-2{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto}
@media (max-width:900px){ .videos-grid,.videos-grid.teaser-2{grid-template-columns:1fr} }
.vid{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--paper-alt);border:0;padding:0;cursor:pointer}
.vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* play knob: FIXED light in both themes — its surface is the photo thumbnail,
   and a photograph doesn't have a theme (var(--white) would turn it near-black
   on a dark thumbnail). Triangle likewise pinned to light clay-deep: the dark
   token flips to a pale peach that would vanish on the light knob. */
.vid .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:#F0EAE0;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.28)}
/* playback icon: physical border-left triangle — never mirrors in RTL */
.vid .play::before{content:"";display:block;width:0;height:0;border-block:10px solid transparent;border-left:16px solid #6E3627;margin-left:4px}
.vid-card h4{margin-top:14px;font-size:15px;font-weight:600;color:var(--ink)}
.vid-card .src{margin-top:4px;font-size:12.5px;color:var(--muted)}
.vid-links{margin-top:40px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.vid-links a{color:var(--clay);font-size:14.5px;text-decoration:none;border-bottom:1px solid transparent}
.vid-links a:hover{color:var(--clay-deep);border-bottom-color:var(--clay-deep)}

/* ---------- video lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(20,16,13,.92)}
.lightbox-content{position:relative;z-index:1;width:min(1100px,94vw);max-width:100%}
.lightbox-frame-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
.lightbox-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox-close{
  position:absolute;top:-52px;inset-inline-start:0;z-index:2;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);font-size:24px;line-height:1;cursor:pointer
}
.lightbox-close:hover{background:rgba(255,255,255,.22)}
@media (max-width:640px){
  .lightbox-content{width:100vw}
  .lightbox-frame-wrap{border-radius:0;aspect-ratio:auto;height:56.25vw}
  .lightbox-close{top:10px;inset-inline-end:10px;inset-inline-start:auto}
}

/* ---------- approach / diff items ---------- */
.diff-items{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:36px}
@media (max-width:900px){ .diff-items{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .diff-items{grid-template-columns:1fr} }
.diff-items h4{margin-bottom:6px}
.diff-items p{font-size:14px;color:var(--ink-soft)}
.diff-titles{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:32px;justify-content:center}
.diff-titles span{font-size:15px;font-weight:600;color:var(--ink);position:relative;padding-inline-start:16px}
.diff-titles span::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--sage)}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center;text-align:right;margin-top:40px}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr} }
.about-img{aspect-ratio:1/1;block-size:auto;inline-size:min(100%,420px)}
@media (max-width:900px){ .about-img{margin-inline:auto} }
.about-list{display:flex;flex-direction:column;gap:14px}
.about-list li{position:relative;padding-inline-start:20px;font-size:15.5px;color:var(--ink-soft);line-height:1.75}
.about-list li::before{content:"";position:absolute;inset-inline-start:0;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--sage)}

/* ---------- process ---------- */
.light-band{background:var(--paper-alt)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:40px}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }
.steps .n{font-size:34px;font-weight:700;color:var(--clay);line-height:1}
.steps h3{margin:12px 0 6px}
.steps p{font-size:13.5px;color:var(--ink-soft)}
.process-note{margin-top:30px;font-size:13.5px;color:var(--muted);max-width:70ch;margin-inline:auto}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:36px auto 0;text-align:right}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-weight:600;font-size:16px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--clay);font-size:20px;flex-shrink:0;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 18px;color:var(--ink-soft);font-size:15px;max-width:64ch}

/* ---------- booking / contact form ---------- */
.tracks{display:flex;gap:12px;max-width:760px;margin:0 auto 38px;text-align:right}
/* --field-line, not --line: unchecked these are 1.36:1 on --white (1.4.11 needs 3:1 for a control's sole shape); --field-line is 4.49. Checked keeps --clay + its --sage-bg fill. */
.tracks label{flex:1;margin:0;border:1px solid var(--field-line);border-radius:12px;padding:16px 18px;cursor:pointer;background:var(--white);position:relative}
.tracks input{position:absolute;opacity:0;width:1px;height:1px}
.tracks .t{display:block;font-weight:700;font-size:15.5px;color:var(--ink)}
.tracks .d{display:block;font-size:13px;margin-top:5px;color:var(--ink-soft)}
.tracks label:has(input:checked){border-color:var(--clay);background:var(--sage-bg)}
.tracks input:focus-visible + .t{outline:2px solid var(--clay);outline-offset:4px;border-radius:4px}
@media (max-width:600px){ .tracks{flex-direction:column} }

.booking{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;text-align:right;margin-top:8px}
@media (max-width:900px){ .booking{grid-template-columns:1fr} }
.booking-intro p{margin-bottom:14px;color:var(--ink-soft)}
.assure{display:flex;flex-direction:column;gap:10px;margin:20px 0}
.assure li{display:flex;gap:10px;align-items:baseline;font-size:14.5px;color:var(--ink)}
.assure li::before{content:"✓";color:var(--sage);font-weight:700;flex-shrink:0}
.channels{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-top:22px}
.channels a{color:var(--clay);text-decoration:none;font-weight:600;font-size:14.5px;border-bottom:1px solid var(--clay);padding-bottom:2px}
.channels a:hover{color:var(--clay-deep);border-color:var(--clay-deep)}
.channels .muted-d{font-size:13px;color:var(--muted)}
.crisis-inline{margin-top:26px;font-size:13px;color:var(--ink-soft);max-width:56ch}
.crisis-inline strong{color:var(--ink)}

.bform{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:14px}
.bform label{font-weight:600;font-size:13.5px;display:block;margin-bottom:5px;color:var(--ink)}
.bform .opt{font-weight:400;color:var(--muted)}
.bform input,.bform select,.bform textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--field-line);border-radius:10px;padding:10px 14px
}
.bform textarea{min-height:84px;resize:vertical}
.bform .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:4px}
.bform .privacy{font-size:12.5px;color:var(--muted)}
.bform .privacy.error{color:var(--clay-deep);font-weight:600}
.segs{display:flex;gap:8px}
/* --field-line, not --line: unchecked these are 1.28:1 on --paper; --field-line is 4.20. Checked keeps --clay + weight 700. */
.segs label{flex:1;margin:0;font-weight:500;font-size:14.5px;text-align:center;border:1px solid var(--field-line);border-radius:10px;padding:9px 10px;cursor:pointer;background:var(--paper);color:var(--ink-soft);position:relative}
.segs input{position:absolute;opacity:0;width:1px;height:1px}
.segs input:checked + span{color:var(--clay-deep);font-weight:700}
.segs label:has(input:checked){border-color:var(--clay)}
.segs input:focus-visible + span{outline:2px solid var(--clay);outline-offset:6px;border-radius:4px}
/* Slot picker (M2, Designer §1.4): one radio group `name="slot"` across six
   day fieldsets — the .tracks/.segs idiom (hidden input + styled span), 44px
   chips, selected = --clay-cta fill. Open at rest; its own role=status line. */
.slot-picker{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--white)}
.slot-picker .slot-label{font-weight:600;font-size:13.5px;margin:0 0 4px;color:var(--ink)}
.slot-picker .slot-label:focus{outline:2px solid var(--clay);outline-offset:4px;border-radius:4px}
.slot-picker .privacy{margin:0 0 6px}
.slot-day{border:0;padding:0;margin:10px 0 0;min-width:0}
.slot-day legend{padding:0;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.slot-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.bform .slot-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;margin:0;min-height:44px;min-width:64px;padding:0 14px;border:1.5px solid var(--field-line);border-radius:10px;background:var(--white);color:var(--ink);font-weight:500;font-size:15px;cursor:pointer}
.slot-chip input{position:absolute;opacity:0;width:1px;height:1px}
.slot-chip:hover{border-color:var(--clay)}
.slot-chip:has(input:checked){background:var(--clay-cta);border-color:var(--clay-cta);color:var(--on-cta)}
.slot-chip input:focus-visible + span{outline:2px solid var(--clay);outline-offset:6px;border-radius:4px}
.slot-none{display:inline-block;margin-top:12px;padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--clay);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.slot-none:hover{color:var(--clay-deep)}
.slot-picker .slot-retry{margin-top:10px;font-size:14px;padding:8px 16px}
.slot-picker .privacy.status{margin:8px 0 0;min-height:1.2em}
.bform-done p{margin-bottom:10px;color:var(--ink)}
.hp-field{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* Contact page #privacy block (M3, D-10): reuses the .bform .privacy type
   scale via the .privacy class on its own <p>; these are the only
   declarations this block needs, plus the anchor scroll offset so the
   heading is not hidden under the sticky topbar when /contact#privacy loads. */
.privacy-block{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);scroll-margin-block-start:5rem}
.privacy-block p{font-size:13.5px;color:var(--muted);max-width:70ch}

/* process strip on /contact */
.process-strip{margin-bottom:56px}

/* ---------- contact details ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;text-align:right;margin-top:36px}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }
.contact-grid dt{font-weight:600;font-size:13px;color:var(--muted);margin-bottom:4px}
.contact-grid dd{margin:0 0 18px;font-size:16px;color:var(--ink)}
.muted{color:var(--muted);font-size:14px}

/* ---------- closing CTA band ---------- */
.footer-cta{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.footer-cta h3{font-size:17px;font-weight:700;color:#fff;line-height:1.4;margin:0 0 10px}
.footer-cta p{font-size:14.5px;line-height:1.8;color:#D3CCC0;margin:0 0 20px;max-width:32ch}
.footer-cta .cta{font-size:14px;padding:11px 24px}
.footer-cta .cta-pair{flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:262px}
.footer-cta .cta-pair .cta{flex:0 0 auto}
/* .footer-grid a{color:#D3CCC0} (0-1-1) outranks .cta{color:#fff} (0-1-0), so
   the ONE call-to-action in the footer rendered its label at 4.26:1 while the
   four identical buttons elsewhere on the page were pure white at 6.8:1. */
/* var(--on-cta), not #fff: this label sits on the THEMED cta fill, not on the
   plinth — in dark the fill lightens to #D98468 and a forced #fff label would
   fail. Light renders identically (--on-cta is #FFFFFF there). */
.footer-grid a.cta{color:var(--on-cta)}
/* 1.4.11: fixing the LABEL (1.4.3) does not fix the button's SHAPE. The fill
   #8F4632 sits at 2.32:1 on the dark footer with border:0, so the control has
   no discernible boundary — the same button on paper is 6.36:1 and fine. A
   45% white ring composites to #8A8582 = 4.32:1 against the footer. */
.footer-grid a.cta{border:1px solid rgba(255,255,255,.45)}

/* ---------- crisis strip ---------- */
.crisis-strip{background:var(--brown-deep);color:#EDE7DD}
.crisis-strip .wrap{padding:18px 24px;font-size:13.5px;text-align:center}
.crisis-strip strong{color:#fff}

/* ---------- footer ---------- */
footer{background:var(--brown-deep);color:#D3CCC0;padding:76px 0 36px;line-height:1.8}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:40px 52px}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr} }
.footer-grid h4{color:#fff;font-size:15px;margin-bottom:16px}
.footer-grid p{font-size:15px;line-height:1.9;color:#D3CCC0}
.footer-grid ul{display:flex;flex-direction:column;gap:13px}
.footer-grid > div:last-child ul{display:grid;grid-template-columns:1fr 1fr;gap:13px 24px}
.footer-grid a{
  color:#D3CCC0;text-decoration:none;font-size:15px;line-height:1.8;
  /* 2.5.8 AA wants 24x24; these nav links measured 22px tall (and "בית" was
     22x22, failing on both axes). Padding, not a new element. */
  display:inline-block;padding-block:1px;min-block-size:24px;min-inline-size:24px;text-align:start
}
.footer-grid a:hover{color:#fff}
.footer-map{display:flex;flex-direction:column;gap:13px;margin-top:14px}
/* the number was breaking after "050-" in the narrow footer column */
.footer-grid [dir="ltr"],.channels [dir="ltr"],.hero [dir="ltr"]{white-space:nowrap}
/* Knockout variant only: the lockup's own wordmark is a flat dark grey and
   sits at ~1.15:1 on --brown-deep. Recoloured to #EDE7DD (12.0:1, the same
   token the crisis strip uses); the watercolour art is left untouched. A
   cream plate behind it was rejected — that is the pasted-rectangle defect
   this site already fixed once on the portrait. */
.footer-legal{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:13px;color:#A79C8C;margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}
.footer-logo{inline-size:200px;block-size:auto;flex-shrink:0}
@media (max-width:760px){ .footer-logo{inline-size:170px} }
@media (max-width:480px){ .footer-legal{flex-direction:column;align-items:flex-start;gap:14px} }

/* ---------- sticky mobile action bar ---------- */
.mobilebar{display:none}
@media (max-width:900px){
  .mobilebar{position:fixed;bottom:0;inset-inline:0;z-index:30;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--mobilebar-bg);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
  .mobilebar a{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:14px;text-decoration:none;
    border-radius:999px;padding:11px 8px;border:1px solid var(--clay-cta);color:var(--clay-cta);background:var(--white)}
  .mobilebar a.primary{background:var(--clay-cta);color:var(--on-cta)}
  body{padding-bottom:76px}
  footer{padding-bottom:90px}
}

/* ---------- hairline seams ---------- */
.seam-top{border-top:1px solid var(--line)}

/* Arrival details on /contact — restored 2026-07-30 after the design pass
   dropped the old contact block. Deliberately a plain prose strip, not the
   two-column dl the pass removed. */
/* Mobile: the booking grid stacks, and .booking-intro is first in the DOM —
   so "the form comes first" was true at desktop only. 327px of reassurance
   sat above the form on a phone. */
@media (max-width:900px){ .booking-intro{order:2} .booking form,.booking .bform{order:1} }

.arrive{max-width:62ch}
.arrive p{margin:0 0 8px}
.arrive .muted{font-size:14px}
.arrive-links{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}