/* hiburim.fit — design "קרוב", chosen by בן־איש on 28.10.2026 out of two alternatives drawn from the
   archetype file. The one who stands beside the person "sees and shows" and also "stays close"; this design
   puts first what the person goes through: a physical experience, outdoors, in motion.
   Deep pine, warm white, one sun-amber action colour with dark text, a strong rounded display face,
   large rounded photos (on a phone the photo comes first), alternating bands, a thrown-ball arc motif.
   Never: red-yellow stripes, rainbow, gold-and-black, gradients or glitter (archetypes §4). */
:root {
  --bg: #FFFDF8;
  --surface: #FFFFFF;
  --tint: #E7EFE8;          /* leaf */
  --tint-warm: #FBEFD5;     /* sun */
  --ink: #17302A;
  /* secondary text: #46594F until 5.11.2026 (7.37:1, but APCA Lc 85 on paper and 71–77 on the tinted bands and cards,
     "נבלע" — qa/בדיקה ויזואלית של הטקסט - ממצאים). Still a step lighter than --ink; Lc 97 on paper, 83–91 on the tints. */
  --ink-soft: #263A31;
  --line: #E2E6DF;
  --line-strong: #AFBDB3;   /* decorative rules only */
  --field-border: #7E8D84;  /* form fields: 3.48:1 on white (WCAG 1.4.11) */
  --accent: #F2B13A;        /* the one action colour; --on-accent on it is 7.45:1 */
  --accent-hover: #E39E22;
  --accent-ink: #1F4D3F;    /* links: pine, 9.43:1 */
  --on-accent: #17302A;
  --mark: #F2B13A;          /* decorative only */
  --band: #1F4D3F;          /* pine band; white on it is 9.58:1 */
  --on-band: #FFFFFF;
  --on-band-soft: #EEF5F1;  /* was #D6E4DC (Lc 77 on the pine band); now Lc 89 (5.11.2026) */
  --page-tint: var(--tint);
  --radius: 20px;
  --radius-photo: 28px;
  --radius-btn: 999px;
  --font-head: "Secular One", "Assistant", system-ui, sans-serif;
  --font-body: "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --container: 1120px;
  --gutter: 16px;
}

/* Each product keeps the shared voice with its own flavour (archetypes §3): the opening band changes tone.
   Circus: joy as the door · אבא ואני: warmth · teens: courage, grounded · school: structure. */
body[data-page="circus"] { --page-tint: #FBEFD5; }
body[data-page="fathers-sons"] { --page-tint: #F7E8DF; }
body[data-page="martial-arts-teens"] { --page-tint: #E1E7E4; }
body[data-page="annual-programs"] { --page-tint: #F1F5EF; } /* a shade off the leaf band, so the band below the opening rises over it as a ridge */
body[data-page="bar-mitzvah"], body[data-page="about"] { --page-tint: #F1F4EE; }

*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding: the sticky header must not cover whatever receives focus or a #link */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; -webkit-tap-highlight-color: rgba(31, 77, 63, .15); }
a, button, summary, input, select, textarea { touch-action: manipulation; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7;
  font-weight: 500; /* Assistant 400 read thin (5.11.2026); 500 comes from the same variable file, no extra download */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-ink); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; line-height: 1.2; margin: 0 0 .5em; text-wrap: balance; }
p, blockquote { text-wrap: pretty; }
h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 3.6rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
/* html's scroll-padding-top already clears the sticky header; a scroll-margin on top of it doubled the gap. */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 720px; }
.section { padding-block: 56px; }
main > .section:nth-of-type(even):not(.contact):not(.band):not(.band-warm):not(.plain):not(.band-pine) { background: var(--tint); }
/* A page can set its bands by what the section is, instead of by position. */
main > .section.band { background: var(--tint); }
main > .section.band-warm { background: var(--tint-warm); }
main > .section.plain { background: var(--bg); }
.lead { font-size: 1.2rem; color: var(--ink-soft); }
.eyebrow { font: 600 1rem/1.4 var(--font-body); color: var(--accent-ink); margin-bottom: 12px; }
.skip-link {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius-btn); border: 2px solid transparent;
  font: 600 1.05rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
}
.btn .icon { flex: none; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.15rem; }
.btn-sm { min-height: 44px; padding: 0 14px; font-size: .95rem; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--surface); }
.btn-dark { background: var(--ink); color: var(--surface); }
.text-link { font-weight: 600; text-underline-offset: 4px; }
.text-link::after, .door-more::after { content: " ←"; }

/* Logo: one colour, painted through the transparent mask, so it follows the design. */
.logo {
  display: block; width: 84px; aspect-ratio: 371 / 293; background: var(--ink);
  -webkit-mask: url(/assets/img/logo-mask.png) center / contain no-repeat;
  mask: url(/assets/img/logo-mask.png) center / contain no-repeat;
}
.footer-id .logo { width: 120px; margin-bottom: 12px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 12px; min-height: 76px; }
.brand { display: block; flex: none; padding-block: 6px; }
.site-nav { margin-inline-start: auto; position: relative; }
.nav-toggle {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
  background: var(--surface); color: var(--ink); font: 600 .95rem var(--font-body); cursor: pointer;
}
.nav-list {
  display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 10px);
  min-width: 220px; padding: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(20, 40, 30, .12);
}
.nav-list.is-open { display: block; }
.nav-list a { display: block; padding: 12px 14px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; }
.nav-list a:hover { background: var(--tint); }
.nav-list a[aria-current="page"] {
  color: var(--accent-ink); text-decoration: underline; text-underline-offset: 6px;
  text-decoration-color: var(--accent); text-decoration-thickness: 3px;
}
.header-wa { flex: none; }
@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .nav-list { display: flex; position: static; gap: 4px; padding: 0; min-width: 0; background: none; border: 0; box-shadow: none; }
  .nav-list a { padding: 8px 12px; }
}

/* Hero */
.hero { padding-block: 32px 48px; }
.page-hero { background: var(--page-tint); }
.hero-grid { display: grid; gap: 28px; align-items: center; }
.hero h1 { margin-bottom: .45em; }
.hero .lead { margin-bottom: 1.2em; }
.hero-text > p:not(.lead):not(.eyebrow):not(.price-line):not(.brand-line) { color: var(--ink-soft); }
.brand-line { margin: 1.4em 0 0; color: var(--ink-soft); font-size: 1rem; }
/* --focus / --focus-sm on the <img> set the crop per photo; -sm is the phone's 4:3 crop. */
.hero-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--focus, center 45%); border-radius: var(--radius-photo); }
.price-line { margin: 16px 0 0; font-weight: 600; color: var(--ink-soft); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
  .hero { padding-block: 64px 80px; }
  .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 64px; }
  .hero-media img { max-height: 640px; }
}

/* The brand-sentence motif under the home headline: a thrown ball's arc, from a starting point on the right. */
.motif { margin: 6px 0 22px; color: var(--mark); }
.motif svg { display: block; width: 240px; max-width: 70%; height: auto; }

/* Home: the opening is on warm paper, the photo first and edge to edge on a phone. Along its foot a range of
   hills is brushed in pine ink (ink-ridges.js), with an amber sun rising out of them as the page scrolls.
   Chosen by בן־איש on 29.10.2026 over the pine band the opening had before. */
body[data-page="index"] .hero { padding-top: 0; }
body[data-page="index"] .hero .hero-media { order: -1; margin-inline: calc(var(--gutter) * -1); }
body[data-page="index"] .hero .hero-media img { aspect-ratio: 4 / 3; border-radius: 0 0 var(--radius-photo) var(--radius-photo); }
body[data-page="index"] .hero h1 { margin-top: 8px; }
@media (min-width: 900px) {
  body[data-page="index"] .hero { padding-top: 48px; }
  body[data-page="index"] .hero .hero-media { order: 0; margin-inline: 0; }
  body[data-page="index"] .hero .hero-media img { aspect-ratio: 4 / 5; max-height: 540px; border-radius: var(--radius-photo); }
}
/* An opening that ends in hills (.ink-hero, home and circus): the content sits above the strip, and the strip
   is the bottom of the section. Each page brushes its own hills (data-ink-ridges in the page). */
.ink-hero { position: relative; isolation: isolate; padding-bottom: 0; }
.ink-hero .hero-grid { position: relative; z-index: 1; }
@media (min-width: 900px) { .ink-hero { padding-bottom: 0; } .ink-hero .hero-media img { max-height: 560px; } }
/* The hills: a strip under the content whose sky is the same paper, so it reads as the land below the opening.
   It starts a little under the photo, so the far ridge seems to go on behind it; the nearest ridge thins out at
   its foot, as ink does, instead of ending in a cut against the next section. */
.ink-land { position: relative; z-index: 0; height: clamp(230px, 36svh, 360px); margin-top: -36px; color: var(--band); }
.ink-land canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
@media (min-width: 900px) { .ink-land { margin-top: -110px; height: clamp(280px, 40svh, 400px); } }
/* Product pages: the photo is big and rounded, and on a phone it comes first. */
@media (max-width: 899px) {
  .page-hero { padding-top: 0; }
  .page-hero .hero-grid { gap: 20px; }
  .page-hero .hero-media { order: -1; margin-inline: calc(var(--gutter) * -1); }
  .page-hero .hero-media img { aspect-ratio: 4 / 3; object-position: var(--focus-sm, var(--focus, center 45%)); border-radius: 0 0 var(--radius-photo) var(--radius-photo); }
}
/* The product name the coordinator will repeat, and the answer to her first practical worry, carry weight. */
.page-hero .eyebrow { font-size: 1.1rem; font-weight: 700; }
.page-hero .brand-line { color: var(--ink); font-weight: 600; font-size: 1.05rem; }
@media (max-width: 599px) {
  .logo { width: 64px; }
  .header-row { min-height: 64px; }
  /* The bar at the bottom of the screen is the phone's WhatsApp button; the header one would be a second. */
  .header-wa { display: none; }
  /* One action leads: the secondary path reads as a link, not as an equal button. */
  .cta-row .btn-outline {
    min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent-ink);
    text-decoration: underline; text-underline-offset: 5px; font-size: 1.05rem;
  }
  .cta-row .btn-outline:hover { background: none; color: var(--ink); }
}

/* Doors (home): cards with large rounded photos on a leaf tint */
.doors { background: var(--tint); }
.door-grid { display: grid; gap: 16px; margin-top: 20px; }
.door {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: var(--ink);
}
.door img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.door-body { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; flex: 1; }
.door-title { font: 400 1.3rem/1.25 var(--font-head); }
.door-text { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.55; }
.door-more { margin-top: auto; padding-top: 6px; color: var(--accent-ink); font-weight: 600; }
.door:hover .door-title { text-decoration: underline; text-underline-offset: 5px; }
@media (min-width: 760px) { .door-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .door-grid { grid-template-columns: repeat(4, 1fr); } }

/* Home: what happens in a meeting */
.about-teaser { background: var(--bg); }
.about-teaser .hero-media img { aspect-ratio: 4 / 5; }

/* Places worked in (about page) */
.places { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.places li { padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .98rem; }

/* Photo pairs */
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 28px; }
.photo-pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--radius-photo) * .7); }
@media (min-width: 720px) { .photo-pair img { aspect-ratio: 4 / 3; } }

/* The one sentence where someone sees how far a child got (circus: "three throws… fifteen"), under the thrown-ball arc */
.section .motif { margin: 8px 0 6px; }
.section .motif svg { width: 180px; }
.pull { font: 400 clamp(1.3rem, 1.15rem + .7vw, 1.6rem)/1.45 var(--font-head); color: var(--ink); margin-bottom: 1.2em; }

/* Where it fits */
.uses { display: grid; gap: 12px; margin: 20px 0 24px; }
.uses li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.uses h3 { margin-bottom: .2em; }
.uses p { margin: 0; color: var(--ink-soft); }
@media (min-width: 720px) { .uses { grid-template-columns: repeat(2, 1fr); } }

/* FAQ / facts */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 0; padding-inline-end: 36px; position: relative;
  font: 700 1.12rem/1.4 var(--font-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; inset-inline-end: 4px; top: 14px; font: 400 1.6rem/1 var(--font-body); color: var(--accent-ink); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 18px; color: var(--ink-soft); }
.facts-section .faq + p { margin-top: 24px; }
/* Facts the coordinator brings to her manager: all visible, nothing to open or close by mistake. */
.facts { margin: 8px 0 0; border-top: 1px solid var(--line); }
.facts > div { padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
.facts dt { font: 700 1.12rem/1.4 var(--font-body); margin-bottom: 4px; }
.facts dd { margin: 0; color: var(--ink-soft); }

/* How to book: three numbered steps */
.steps { counter-reset: step; display: grid; gap: 14px; margin: 4px 0 28px; padding: 0; list-style: none; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding-top: 6px; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; margin-top: -6px; border-radius: 50%;
  background: var(--band); color: var(--on-band); font: 400 1.2rem/1 var(--font-head);
}
.next-section .btn { margin: 0 0 28px; }

/* The strongest proof for a council coordinator: one order became six */
.proof-fact {
  margin: 8px 0 0; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  font: 400 1.22rem/1.55 var(--font-head); color: var(--ink);
}

/* Proof */
.proof-grid { display: grid; gap: 32px; }
.testimonial { position: relative; margin: 12px 0 20px; padding: 40px 24px 22px; background: var(--tint-warm); border-radius: var(--radius); }
.testimonial::before {
  content: "\201D"; position: absolute; top: 4px; inset-inline-start: 20px;
  font: 400 4rem/1 var(--font-head); color: var(--accent-hover);
}
.testimonial blockquote { margin: 0; }
.testimonial blockquote p { font: 400 clamp(1.25rem, 1.1rem + .7vw, 1.6rem)/1.55 var(--font-head); margin-bottom: .6em; }
.testimonial figcaption { margin-top: 12px; color: var(--ink-soft); }
.testimonial figcaption strong { color: var(--ink); }
/* A second, short quote speaks at reading size, so only one quote on the page is loud. */
.testimonial--short { padding-top: 20px; }
.testimonial--short::before { content: none; }
.testimonial--short blockquote p { font: 600 1.15rem/1.6 var(--font-body); }
.video-lite { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.video-lite iframe, .video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { padding: 0; background: #000; cursor: pointer; display: block; }
.video-play img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
/* Pine, not amber: amber stays the colour of "check a date". */
.play-icon { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--band); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.play-icon::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -7px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--on-band); }
.video-play:hover .play-icon { background: var(--ink); }
/* The button fills a clipped box, so its ring is drawn inside: white over the photo, with a dark edge. */
.video-play:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -8px; box-shadow: inset 0 0 0 5px var(--ink); border-radius: var(--radius); }
.video-caption { margin: 10px 0 0; color: var(--ink-soft); font-size: .95rem; }
@media (min-width: 900px) { .proof-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; } .video-col { position: sticky; top: 100px; } }

/* Contact: on the leaf tint like the page's other bands. It was a pine band that echoed the home opening;
   when the opening moved to paper (29.10.2026) בן־איש asked for this one to match the rest of the page. */
.contact { background: var(--tint); border-top: 1px solid var(--line); } /* the line parts it from a tinted section above */
.contact .lead, .contact-wa p { color: var(--ink-soft); }
.contact-grid { display: grid; gap: 32px; }
.contact-phone { margin: 14px 0 4px; font: 700 1.3rem var(--font-body); }
.contact-phone a { color: var(--ink); text-decoration: none; }
.lead-form { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.optional { font-weight: 400; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--field-border);
  border-radius: 12px; background: #fff; font: 400 1rem var(--font-body); color: var(--ink);
}
.field textarea { min-height: 112px; resize: vertical; }
.field [aria-invalid="true"] { border-color: #A3352B; }
.hint { margin: 6px 0 0; font-size: .92rem; color: var(--ink-soft); }
/* Honeypot: hidden in place. An off-screen offset (-9999px) sits far to the right in RTL and can widen the page. */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-note { margin: 12px 0 0; font-size: .92rem; color: var(--ink-soft); }
.form-status { margin: 10px 0 0; font-weight: 600; }
.form-status.is-error { color: #A3352B; }
.form-status.is-ok { color: #2E6B3A; }
@media (min-width: 900px) {
  .section { padding-block: 88px; }
  .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
  .lead-form { padding: 32px; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 40px 96px; font-size: .98rem; }
.footer-grid { display: grid; gap: 24px; }
.footer-id a, .footer-links a { color: var(--ink); }
.footer-links { display: grid; gap: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-social { display: flex; gap: 16px; }
.footer-social a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.footer-bottom { margin-top: 24px; color: var(--ink-soft); font-size: .9rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr; } }

/* Floating WhatsApp. Desktop: a round button in the corner. Phone: a bar with the words, across the bottom.
   Either way it steps aside (.is-tucked, site.js) while another WhatsApp button or the contact band is on screen. */
.wa-float {
  position: fixed; inset-inline-end: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  text-decoration: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s ease-out;
}
.wa-float:hover { background: var(--accent-hover); }
.wa-float .icon { width: 28px; height: 28px; }
.wa-float-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The ring has to show over the pine band too: dark ring with a white halo. */
.wa-float:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 7px #FFFFFF; }
.wa-float.is-tucked { opacity: 0; transform: translateY(calc(100% + 24px)); pointer-events: none; visibility: hidden; transition-property: transform, opacity, visibility; }
@media (max-width: 899px) {
  .wa-float {
    inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto; height: 56px; border-radius: var(--radius-btn);
    display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 1.08rem/1 var(--font-body);
  }
  .wa-float .icon { width: 24px; height: 24px; }
  .wa-float-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  /* Room under the last line of the page, so the bar never covers text. */
  body { padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

.not-found { min-height: 50vh; }

/* Pending items: never shown on the live site; visible (marked) in the local preview */
.q-pending-inline { display: none; }
.draft .q-pending-inline { display: inline; outline: 2px dashed #C08A1E; background: rgba(255, 233, 160, .45); border-radius: 4px; }
.q-pending { display: none; }
.draft .q-pending { display: block; outline: 2px dashed #C08A1E; outline-offset: 3px; background: rgba(255, 233, 160, .45); border-radius: 4px; cursor: help; margin-top: 14px; }
.draft-bar { background: #FFF3C4; color: #3D2E00; border-bottom: 1px solid #E2C468; padding: 8px 16px; font-size: .92rem; text-align: center; }
.draft .q, .draft .q-block { outline: 2px dashed #C08A1E; outline-offset: 3px; background: rgba(255, 233, 160, .45); border-radius: 4px; cursor: help; }
.draft-alts a { color: inherit; font-weight: 600; margin-inline: 2px; }
.draft-alts a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

/* Layers (30.10.2026, from /impeccable critique → layout; בן־איש: "it feels flat"). Depth here is the hills'
   own language carried down the page, not effects laid on top: the opening photo stands in the landscape (on a
   wide screen its foot goes down behind the ridges; the ink strip is see-through over sky), a band meets the
   one above it along a ridge line (a far ridge, paler, and a near one) instead of a straight cut, and each page
   has one dark pine moment, which is itself a hill. Photos get a hairline keyline so a warm photo never melts
   into warm paper. No shadows, gradients or offset blocks (archetypes §4; an offset block was tried and dropped). */
:root {
  --keyline: rgb(23 48 42 / .12);
  --ridge-far: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V44C90 40 150 22 250 26S420 50 540 40 700 10 820 16 1010 44 1120 36 1330 14 1440 24V80Z'/%3E%3C/svg%3E");
  --ridge-near: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V58C110 54 200 40 330 46S520 66 660 58 860 34 990 42 1210 64 1440 50V80Z'/%3E%3C/svg%3E");
}

/* The opening photo in the landscape: under the strip, the text over it. */
@media (min-width: 900px) {
  .ink-hero .hero-grid { z-index: auto; }
  .ink-hero .hero-text { position: relative; z-index: 2; }
  /* moved, not resized: a negative margin would shrink the row and lift the strip by as much */
  .ink-hero .hero-media { position: relative; z-index: 0; transform: translateY(40px); }
  .ink-land { z-index: 1; pointer-events: none; }
}

/* A hairline inside each photo's edge (an outline drawn over the picture, following its corners). */
.hero-media img, .photo-pair img { outline: 1px solid var(--keyline); outline-offset: -1px; }

/* Photo pairs: one taller, one set lower, so the pair reads composed and not tiled. */
.photo-pair { grid-template-columns: 1.15fr 1fr; align-items: start; gap: 14px; }
.photo-pair img:first-child { aspect-ratio: 4 / 5; }
.photo-pair img:nth-child(2) { aspect-ratio: 1; margin-top: 22%; }
@media (min-width: 720px) {
  .photo-pair { gap: 20px; }
  .photo-pair img:first-child { aspect-ratio: 1; }
  .photo-pair img:nth-child(2) { aspect-ratio: 4 / 3; margin-top: 16%; }
}

/* Cards and the form: a keyline that reads on the leaf tint (the old --line nearly vanished there). */
.door { border: 1px solid var(--keyline); }
.uses li, .proof-fact, .lead-form { border-color: var(--keyline); }

/* Ridges between bands: the band below rises over the one above as two hills, the far one paler. */
.ink-hero + .section, .band-pine, .band-pine + .section { position: relative; }
.ink-hero + .section::before, .ink-hero + .section::after,
.band-pine::before, .band-pine::after,
.band-pine + .section::before, .band-pine + .section::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 100%; pointer-events: none;
  background: inherit; height: clamp(26px, 4vw, 56px);
  -webkit-mask: var(--ridge-near) center bottom / 100% 100% no-repeat; mask: var(--ridge-near) center bottom / 100% 100% no-repeat;
}
.ink-hero + .section::before, .band-pine::before, .band-pine + .section::before {
  height: clamp(38px, 6vw, 84px); opacity: .45;
  -webkit-mask-image: var(--ridge-far); mask-image: var(--ridge-far);
}
/* the hills that close the dark band run the other way, so the two edges are not one shape twice */
.band-pine + .section::before, .band-pine + .section::after { transform: scaleX(-1); }

/* The one dark moment on a page: pine, with white words; cards on it stay paper-white. */
main > .section.band-pine { background: var(--band); color: var(--on-band); }
.band-pine h2, .band-pine h3 { color: var(--on-band); }
.band-pine p { color: var(--on-band-soft); }
.band-pine a { color: var(--accent); }
.band-pine :focus-visible { outline-color: var(--on-band); }
/* cards on the pine band keep their own ink: the band's white headings must not reach into them */
.band-pine .uses li h3 { color: var(--ink); }
.band-pine .uses li p { color: var(--ink-soft); }
.band-pine .proof-fact { color: var(--ink); }
.band-pine .testimonial { background: transparent; border: 1px solid rgb(255 255 255 / .22); }
.band-pine .testimonial blockquote p { color: var(--on-band); }
.band-pine .testimonial figcaption { color: var(--on-band-soft); }
.band-pine .testimonial figcaption strong { color: var(--on-band); }
.band-pine .testimonial::before { color: var(--accent); }

/* Home: how it works beside what people said afterwards, one band instead of two thin ones. */
.split-grid { display: grid; gap: 40px; }
.said { display: grid; gap: 14px; margin: 4px 0 18px; }
.said li { position: relative; padding-inline-start: 24px; font: 400 clamp(1.2rem, 1.05rem + .6vw, 1.45rem)/1.45 var(--font-head); color: var(--on-band); }
.said li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
/* the quotes (copy round, 2.11.2026): the words in the band's quote face, who said it small underneath */
.said .said-who { display: block; margin-top: 4px; font: 500 1.0625rem/1.4 var(--font-body, inherit); color: var(--on-band-soft); } /* was .95rem at 80% opacity: the weakest line on the page (5.11.2026) */
@media (min-width: 900px) { .split-grid { grid-template-columns: 1fr 1.35fr; gap: 72px; align-items: start; } }

/* Motion (30.10.2026, /impeccable animate with emil-design-eng). Feedback only where something is pressed or
   pointed at, plus one authored moment: the thrown ball's arc flies in once, from the hand on the right to the
   catch on the left. Exact properties, strong ease-out, all under 300ms except the arc; hover only under a real
   mouse (a tap on a phone is not a hover); with reduced motion the movement goes and the colour changes stay. */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); }

.btn { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.door { transition: border-color 200ms ease; }
.door img { transition: transform 280ms var(--ease-out); }
/* inline-block (so the arrow can move) drops the leading space of " ←", so the gap is a margin */
.door-more::after, .text-link::after { content: "←"; display: inline-block; margin-inline-start: .3em; transition: transform 200ms var(--ease-out); }
.faq summary, .faq summary::after { transition: color 150ms ease; }
.footer-links a, .footer-social a, .contact-phone a { text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color 150ms ease; }
.nav-list a { transition: background-color 150ms ease, color 150ms ease; }
/* An opened FAQ answer settles in instead of jumping into place (2.11.2026, the animation pass: occasional, so a
   standard 220ms ease-out; on opening only, closing stays instant; nothing with reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] > :not(summary) { animation: faq-open 220ms var(--ease-out); }
}
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } }
/* The phone menu opens out of its button instead of appearing all at once (2.11.2026, same pass): a popover, so it
   grows from the corner under the button, its top right (the site is RTL and the panel is aligned to the button's
   right edge), 180ms ease-out; closing stays instant; nothing with reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .nav-list.is-open { animation: menu-open 180ms var(--ease-out); transform-origin: 100% 0; }
}
@keyframes menu-open { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }

@media (hover: hover) and (pointer: fine) {
  .door:hover { border-color: rgb(23 48 42 / .3); }
  .door:hover img { transform: scale(1.03); }
  /* the arrow leans the way the line reads */
  .door:hover .door-more::after, .text-link:hover::after { transform: translateX(-4px); }
  .faq summary:hover, .faq summary:hover::after { color: var(--accent-ink); }
  .footer-links a:hover, .footer-social a:hover, .contact-phone a:hover { text-decoration: underline; text-decoration-color: currentColor; }
  .btn-dark:hover { background: var(--accent-ink); }
}

/* The arc: hidden only once site.js says it will play (so without script it simply shows), then revealed
   from the thrower's side. */
.motif.is-waiting svg { clip-path: inset(0 0 0 100%); }
/* 1.4s: at 900ms on a phone the throw was over before it was noticed (בן־איש, on his iPhone) */
.motif.is-thrown svg { clip-path: inset(0 0 0 0); transition: clip-path 1400ms var(--ease-in-out); }
/* the opening's arc is thrown as the page arrives, while the eye is still finding the headline: slower, and a beat later */
.hero .motif.is-thrown svg { transition-duration: 2000ms; transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .door:hover img, .door:hover .door-more::after, .text-link:hover::after { transform: none; }
  .motif.is-waiting svg { clip-path: none; }
}

/* Polish (30.10.2026, /impeccable polish after the critique). */
/* The brand allows no soft shadows (archetypes §4); three had slipped in. Edges carry the separation instead. */
.nav-list { box-shadow: none; border-color: var(--line-strong); }
.play-icon { box-shadow: none; border: 2px solid rgb(255 255 255 / .85); }
.wa-float { box-shadow: none; border: 2px solid var(--bg); }
/* The menu button read as disabled in grey; it is a control, so it is drawn in ink. */
.nav-toggle { border-color: var(--ink); }
/* Browser surfaces in the palette, not the browser's blue. */
::selection { background: var(--tint-warm); color: var(--ink); }
.band-pine ::selection { background: var(--accent); color: var(--on-accent); }
input, textarea, select { caret-color: var(--accent-ink); accent-color: var(--accent-ink); }
/* A card title should not leave one word alone on its last line ("ואני""). */
.door-title { text-wrap: balance; }
/* Reading measure: the 720px column ran to about 100 characters a line; this keeps it near 75. */
.narrow { max-width: 600px; }

/* A ridge takes its colour from its band (background: inherit); a plain band had none of its own, so its ridge was
   invisible. Every band gets the paper as a floor, at zero specificity, so any band colour still wins. */
:where(main > .section) { background-color: var(--bg); }

/* Remaining critique items (30.10.2026).
   distill: on a phone the hills strip was about 300px of mostly empty paper before the first card; it is now
   shorter, so the opening ends sooner and the hills read as its foot, not a second screen. */
@media (max-width: 599px) { .ink-land { height: clamp(170px, 26svh, 220px); } }

/* typeset: a reading measure near 70 characters (Hebrew in Assistant runs narrow, so the column and the body
   size both move), sub-headings that read as headings (Secular One, a clear step above body, more room above than
   below), and light text on the pine band given a little more leading. */
@media (min-width: 900px) { body { font-size: 1.125rem; } }
.narrow { max-width: 580px; }
h3 { font-size: clamp(1.25rem, 1.12rem + .45vw, 1.45rem); }
.narrow > h3 { margin-top: 1.8em; margin-bottom: .4em; }
.band-pine p { line-height: 1.8; }

/* bolder, the contact band only: the page's last band is its finale. It rises over the band above as a ridge, like
   the others, its heading is set at full display strength, and the thrown ball's arc closes the page as it opened it. */
.contact { position: relative; border-top: 0; }
.contact::before, .contact::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 100%; pointer-events: none; background: inherit;
  height: clamp(26px, 4vw, 56px);
  -webkit-mask: var(--ridge-near) center bottom / 100% 100% no-repeat; mask: var(--ridge-near) center bottom / 100% 100% no-repeat;
}
.contact::before { height: clamp(38px, 6vw, 84px); opacity: .45; -webkit-mask-image: var(--ridge-far); mask-image: var(--ridge-far); }
.contact .motif { margin: 0 0 10px; }
.contact .motif svg { width: 160px; }
.contact h2 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3rem); }

/* Phone openings (30.10.2026, בן־איש on a real iPhone: "all the opening photos are cut"). The photos are mostly
   upright and a 4:3 strip cut away heads and feet (the child on his father's feet showed only legs). On a phone the
   opening photo is square, and each page aims it at its subject. !important: the pages carry a desktop
   object-position inline, which a stylesheet cannot otherwise override. */
@media (max-width: 599px) {
  .hero .hero-media img, .page-hero .hero-media img { aspect-ratio: 1 / 1; }
  /* the handstand runs from the feet at the top of the frame to the hands on the floor: it needs its own 4:5 */
  body[data-page="index"] .hero .hero-media img { aspect-ratio: 4 / 5; object-position: center 50% !important; }
  body[data-page="circus"] .hero-media img { object-position: center 12% !important; } /* the plates (5.11.2026) sit high in the frame */
  body[data-page="fathers-sons"] .hero-media img { object-position: center 8% !important; }
  body[data-page="annual-programs"] .hero-media img { object-position: center 55% !important; }
  body[data-page="martial-arts-teens"] .hero-media img { object-position: center 22% !important; }
  body[data-page="about"] .hero-media img { object-position: center 30% !important; }
  body[data-page="bar-mitzvah"] .hero-media img { object-position: center 45% !important; }
}

/* Eye path (31.10.2026, /impeccable critique → layout + adapt; בן־איש: "on a phone the headline is pushed down and
   you see only the photo"). On a phone the opening photo came first, square or taller, so the first screen was a
   photo with the floating WhatsApp bar lying across the headline, and the offer was never read before the ask.
   Now the words come first: headline, lead and the opening's own button in the first screen, then the photo whole
   below them (its own corners, not edge to edge). The floating bar already stays away while the opening's button
   is on screen, so it now arrives only after it. */
@media (max-width: 899px) {
  .page-hero { padding-top: 24px; }
  .page-hero .hero-media, body[data-page="index"] .hero .hero-media { order: 0; margin-inline: 0; }
  .page-hero .hero-media img, body[data-page="index"] .hero .hero-media img { border-radius: var(--radius-photo); }
  body[data-page="index"] .hero { padding-top: 24px; }
  body[data-page="index"] .hero h1 { margin-top: 0; }
}
/* distill: the thrown-ball arc sat between the home headline and its lead (about 100px on a phone) and pushed the
   button off the first screen; on a phone it is a small accent under the headline. */
@media (max-width: 599px) {
  .hero .motif { margin: 0 0 10px; }
  .hero .motif svg { width: 120px; }
}
/* The contact band has one action, WhatsApp; the form is the quiet second way, so its submit button is drawn in
   ink outline instead of a dark block that outweighed the amber button beside it. */
.lead-form .btn-dark { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .lead-form .btn-dark:hover { background: var(--ink); color: var(--surface); } }
/* The home cards on a phone were a screen tall each (a 16:10 photo over five lines); a wider crop keeps four of
   them from reading as four identical screens. */
@media (max-width: 599px) { .door img { aspect-ratio: 2 / 1; } }
/* typeset: the lead is the second thing read after the headline, but Assistant 400 in the soft ink read faint on
   cream and sank to the level of the small print under it. It takes the full ink; the paragraphs after it keep the
   soft one, so headline, lead and detail are three clear steps. */
.lead { color: var(--ink); }
.band-pine .lead { color: var(--on-band); }

/* bolder, the opening of every page (31.10.2026, בן־איש: "the opening screen of each page is not strong enough").
   It opted out of the system's own strongest moves: the display face at a modest size with four paragraphs of near
   equal weight around it, and on a phone the photo and the hills as two separate things one after the other.
   One decisive move, in the system's own vocabulary: the headline at full display strength, and on a phone too the
   photo standing in the landscape (its foot behind the near ridges, as on a wide screen), so headline, photo and
   hills read as one scene; everything else in the opening steps back. No new colour, font or effect. */
.hero h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.4rem); line-height: 1.06; letter-spacing: -0.015em; margin-bottom: .35em; }
.hero .lead { font-size: clamp(1.2rem, 1.1rem + .35vw, 1.35rem); line-height: 1.55; }
/* the rest of the opening's words step back, so headline, lead and button are the only loud things */
.hero-text > p:not(.lead):not(.eyebrow):not(.price-line):not(.brand-line) { font-size: 1.0625rem; line-height: 1.6; }
.hero .brand-line { font-size: .95rem; }
/* On a phone the photo stays in front of the strip (its sun and birds are far off, so they must pass behind it)
   and its foot is cut along a ridge line, the same near ridge the bands use, with the strip's hills continuing
   right under it: the photo stands behind the first hill. The mask's flat part is a solid fill, not a gradient. */
@media (max-width: 899px) {
  .ink-hero .hero-media { position: relative; z-index: 1; }
  .ink-hero .hero-media img {
    border-radius: var(--radius-photo) var(--radius-photo) 0 0;
    -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 34px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V58C1210 64 990 42 860 34S660 58 520 66 330 46 200 40 110 54 0 58Z'/%3E%3C/svg%3E") bottom / 100% 36px no-repeat;
    mask: linear-gradient(#000, #000) top / 100% calc(100% - 34px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V58C1210 64 990 42 860 34S660 58 520 66 330 46 200 40 110 54 0 58Z'/%3E%3C/svg%3E") bottom / 100% 36px no-repeat;
  }
  .ink-hero .ink-land { margin-top: -70px; }
}
/* the smallest phones (iPhone SE, 320px): the full-strength headline pushed the home button half off the first screen */
@media (max-width: 359px) { .hero h1 { font-size: 2.25rem; } .hero .motif { margin-bottom: 6px; } }

/* Phone opening, third pass (31.10.2026, בן־איש: "the photo is an important part of the opening; on a phone it was
   pushed down and only peeks at the bottom, and now it hides the sun"). The first screen holds both the picture and
   the offer: the photo first at a measured 4:3 inside the margins, aimed at each page's subject, then headline,
   lead and the button. The opening's smaller paragraphs (and the home arc) move after the button on a phone only,
   a reorder, not a rewrite: they were what pushed the button out of the first screen. The photo no longer touches
   the hills, so the sun in them is seen whole again. Replaces the phone parts of the two passes above. */
@media (max-width: 899px) {
  .page-hero, body[data-page="index"] .hero { padding-top: 12px; }
  .page-hero .hero-media, body[data-page="index"] .hero .hero-media { order: -1; margin-inline: 0; position: static; }
  .page-hero .hero-media img, body[data-page="index"] .hero .hero-media img,
  .ink-hero .hero-media img {
    aspect-ratio: 4 / 3; border-radius: var(--radius-photo);
    -webkit-mask: none; mask: none;
  }
  .ink-hero .ink-land { margin-top: -36px; }
  .hero-text { display: flex; flex-direction: column; }
  .hero-text > * { order: 3; }
  .hero-text > .eyebrow { order: 0; }
  .hero-text > h1 { order: 1; }
  .hero-text > .lead { order: 1; }
  .hero-text > .lead ~ .lead { order: 3; }
  .hero-text > .cta-row, .hero-text > .btn { order: 2; align-self: flex-start; margin-bottom: 18px; }
  .hero-text > .cta-row { align-self: stretch; }
}
@media (max-width: 599px) {
  .hero h1 { font-size: 2.35rem; }
  .hero .lead { font-size: 1.15rem; }
  /* each opening photo aimed at its subject for the 4:3 crop (the desktop position is inline, hence !important) */
  body[data-page="index"] .hero .hero-media img { object-position: center 32% !important; }
  body[data-page="circus"] .hero-media img { object-position: center 12% !important; } /* the plates (5.11.2026) sit high in the frame */
  body[data-page="fathers-sons"] .hero-media img { object-position: center 6% !important; }
  body[data-page="annual-programs"] .hero-media img { object-position: center 55% !important; }
  body[data-page="martial-arts-teens"] .hero-media img { object-position: center 22% !important; }
  body[data-page="about"] .hero-media img { object-position: center 35% !important; }
  body[data-page="bar-mitzvah"] .hero-media img { object-position: center 45% !important; }
}
@media (max-width: 359px) { .hero h1 { font-size: 2.1rem; } }
/* home: a square would push the button out of the first screen by a pixel, so it stays 4:3, aimed at the head and
   the hands on the floor (the face of the handstand) rather than the feet */
@media (max-width: 599px) { body[data-page="index"] .hero .hero-media img { object-position: center 66% !important; } }
/* the smallest phones (320px): a slightly lower photo, so the long circus headline still leaves room for the button */
@media (max-width: 359px) { .page-hero .hero-media img, body[data-page="index"] .hero .hero-media img { aspect-ratio: 16 / 11; } }

/* Phone opening, the landscape in it (31.10.2026, בן־איש: "now on a phone you don't see the hills and the mist in the
   opening screen; they were pushed down too"). On a phone the ink strip sat after all the opening's words, so it
   left the first screen. It now stands between the photo and the headline, as low hills with their mist and sun
   rising right under the photo, the way it closes the opening on a wide screen: photo, landscape and headline read
   as one scene in the first screen. The grid's box steps aside (display: contents) so photo, strip and words can be
   ordered as siblings; each keeps the page margins itself. Phone only; the desktop opening is untouched. */
@media (max-width: 899px) {
  .ink-hero { display: flex; flex-direction: column; }
  .ink-hero .hero-grid { display: contents; }
  .ink-hero .hero-media { order: 1; margin-inline: var(--gutter); }
  .ink-hero .ink-land { order: 2; margin-top: -6px; }
  /* 5.11.2026: the words are the last thing in the opening here, so the hills the next band draws above itself
     (::before/::after at bottom: 100%) were painted over the last line ("מכם צריך רק אולם" faded on every page), and
     the first line sat in the strip's mist. Room under the words for the hills, and a little air above them. */
  .ink-hero .hero-text { order: 3; padding-inline: var(--gutter); margin-top: 6px; padding-bottom: calc(clamp(38px, 6vw, 84px) + 14px); }
}
@media (max-width: 599px) {
  .ink-hero .ink-land { height: 64px; } /* 112px until 5.11.2026: see "phone first screen, calmer" below */
  .ink-hero .hero-media img, body[data-page="index"] .ink-hero .hero-media img { aspect-ratio: 16 / 11; }
  .hero h1 { font-size: 2.2rem; }
  .hero .lead { font-size: 1.1rem; }
}
@media (max-width: 899px) { body[data-page="index"] .ink-hero .hero-media { margin-inline: var(--gutter); } }
/* tablets held upright (600-899px): the wide photo grew tall and the strip kept its desktop height, so the headline
   left the first screen; the photo takes a share of the screen's height and the hills a band, as on a phone */
@media (min-width: 600px) and (max-width: 899px) {
  .ink-hero .hero-media img, body[data-page="index"] .ink-hero .hero-media img { aspect-ratio: auto; width: 100%; height: 40svh; }
  .ink-hero .ink-land { height: 150px; }
}
/* the per-page aim of the opening photo, for tablets too (the crop there is a band of the screen's height) */
@media (min-width: 600px) and (max-width: 899px) {
  body[data-page="index"] .hero .hero-media img { object-position: center 60% !important; }
  body[data-page="circus"] .hero-media img { object-position: center 12% !important; } /* the plates (5.11.2026) sit high in the frame */
  body[data-page="fathers-sons"] .hero-media img { object-position: center 4% !important; }
  body[data-page="annual-programs"] .hero-media img { object-position: center 50% !important; }
  body[data-page="martial-arts-teens"] .hero-media img { object-position: center 20% !important; }
  body[data-page="about"] .hero-media img { object-position: center 30% !important; }
  body[data-page="bar-mitzvah"] .hero-media img { object-position: center 45% !important; }
}

/* distill + typeset (31.10.2026, בן־איש: "it feels busy to the eye… the headings could be bigger"). The phone opening
   had eight or nine things of near-equal weight (arc, two leads, small paragraphs, two buttons, the equipment line,
   photo, hills), and the headings were too close in size to the text around them to lead it. One move: the headings
   grow, and everything that is not headline, lead or the button gets quieter and is set apart, so the eye has three
   stops instead of nine. No words change.
   - headings: the page headline and the section headlines a full step larger; sections get more air around them.
   - phone: the decorative arc leaves the opening (it opens the contact band still); the small paragraphs and the
     equipment line after the button sit together as one quiet block under a hairline, not as a trail of grey lines.
   - the floating WhatsApp bar carries the action whenever the opening's own button is below the first screen. */
h2 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem); line-height: 1.15; }
.hero h1 { font-size: clamp(2.7rem, 1.5rem + 5vw, 4.9rem); line-height: 1.04; }
@media (min-width: 900px) { .section { padding-block: 104px; } }
@media (max-width: 899px) {
  .hero .motif { display: none; }
  .hero-text > .lead ~ .lead, .hero-text > p:not(.lead):not(.eyebrow) { font-size: 1.0625rem; margin-bottom: .5em; }
  .hero-text > .cta-row, .hero-text > .btn { margin-bottom: 22px; }
  .hero-text > .cta-row + *, .hero-text > .btn + * { padding-top: 18px; border-top: 1px solid var(--keyline); }
  .hero .brand-line { margin-top: .4em; }
}
@media (max-width: 599px) {
  .hero h1 { font-size: 2.65rem; }
  .hero .lead { font-size: 1.12rem; }
  h2 { font-size: 2rem; }
  .section { padding-block: 64px; }
}
@media (max-width: 359px) { .hero h1 { font-size: 2.25rem; } }
/* wide screens: the bigger headline broke the home one into three lines beside the photo and pushed its button to
   the bottom edge; it holds at the size where the opening's headlines stay on two lines (the circus one on three) */
@media (min-width: 900px) { .hero h1 { font-size: clamp(3.2rem, 1.6rem + 2.6vw, 4.4rem); } }

/* Video recommendations as YouTube Shorts (1.11.2026): upright cards side by side; on a phone a strip that scrolls
   sideways, each card large enough to see who speaks, the next one peeking in to say there are more. The player
   loads only on a tap (site.js), as with the other videos. */
.shorts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 28px 0 0; }
.video-lite--short { aspect-ratio: 9 / 16; border-radius: var(--radius); }
.video-lite--short .play-icon { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.video-lite--short .play-icon::after { margin: -10px 0 0 -6px; border-width: 10px 0 10px 17px; }
.shorts + .video-caption { margin-top: 12px; }
@media (max-width: 599px) {
  .shorts {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .shorts::-webkit-scrollbar { display: none; }
  .shorts > * { scroll-snap-align: start; }
}

/* a single short: one upright card, not a strip */
.shorts--one { grid-template-columns: minmax(0, 280px); }
@media (max-width: 599px) { .shorts--one { grid-auto-flow: row; grid-template-columns: 72%; overflow: visible; margin-inline: 0; padding-inline: 0; } }

/* Header (1.11.2026, בן־איש: "the site is in Hebrew, so the menu should be on the right and the logo on the left").
   The menu now opens the line where a Hebrew reader starts, the WhatsApp button beside it, and the logo closes the
   line on the left; the dropdown on a phone opens from the right edge, under its button. */
.header-row .site-nav { order: 1; margin-inline-start: 0; }
.header-row .header-wa { order: 2; }
.header-row .brand { order: 3; margin-inline-start: auto; }
.nav-list { inset-inline-end: auto; inset-inline-start: 0; }
/* distill (1.11.2026, בן־איש: "two WhatsApp buttons, maybe one is too many"): the header's WhatsApp button repeated
   the floating one, which already keeps WhatsApp at hand once the opening's button has scrolled away. One action at
   a time: the opening's amber button, then the floating one. (On a phone it was already hidden for this reason.) */
.header-wa { display: none; }

/* Doors (1.11.2026, בן־איש: "make the photo cards more interesting and responsive"; craft floor: identical cards of
   heading and text are the lazy default; bolder: amplify what the system owns; emil: quick, mouse-only feedback).
   Each card now carries the colour of the page it opens (the same tint as that page's opening), so the four read as
   four places, not one template four times; the photo leads (taller, upright like the photos themselves); and the
   card rises out of its photo along a ridge line, the hills' own language, its people standing behind a hill. Under
   a mouse the hill rises a little into the photo, the photo comes a little closer and the arrow leans on; a press
   gives way. No shadows or gradients. */
.doors { background: var(--bg); }
.door { border: 0; background: var(--door-tint, var(--surface)); overflow: hidden; transition: transform 160ms var(--ease-out); }
.door-grid > li:nth-child(1) .door { --door-tint: #FBEFD5; }
.door-grid > li:nth-child(2) .door { --door-tint: #F7E8DF; }
.door-grid > li:nth-child(3) .door { --door-tint: #E7EFE8; }
.door-grid > li:nth-child(4) .door { --door-tint: #E1E7E4; }
.door img { aspect-ratio: 3 / 2; }
@media (min-width: 760px) { .door img { aspect-ratio: 4 / 5; } }
.door-body { position: relative; padding-top: 14px; background: var(--door-tint, var(--surface)); }
.door-body::before {
  content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 26px; background: inherit; pointer-events: none;
  -webkit-mask: var(--ridge-near) center bottom / 100% 100% no-repeat; mask: var(--ridge-near) center bottom / 100% 100% no-repeat;
  transform-origin: bottom; transition: transform 280ms var(--ease-out);
}
.door-grid > li:nth-child(even) .door-body::before { transform: scaleX(-1); }
.door-title { font-size: 1.35rem; }
.door-text { color: var(--ink-soft); }
.door:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .door:hover .door-body::before, .door:focus-visible .door-body::before { transform: scaleY(1.7); }
  .door-grid > li:nth-child(even) .door:hover .door-body::before,
  .door-grid > li:nth-child(even) .door:focus-visible .door-body::before { transform: scale(-1, 1.7); }
  .door:hover img, .door:focus-visible img { transform: scale(1.04); }
  .door:hover .door-title, .door:focus-visible .door-title { text-decoration: none; }
  .door:focus-visible .door-more::after { transform: translateX(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .door, .door img, .door-body::before { transition: none; }
  .door:active, .door:hover img { transform: none; }
}
main > .section.doors { background-color: var(--bg) !important; } /* the band-by-position rule (six :not()s) outranks any plain class */
/* The hill grows from the card's top edge by scaling; at fractional pixel ratios (a 125% screen) the scaled shape and
   the card met with a hairline of photo between them, the photo's old edge showing. The hill now reaches 2px down
   into the card, so the seam is always covered, and both are drawn on their own layer so the scale doesn't drift. */
.door-body::before { bottom: calc(100% - 2px); height: 28px; backface-visibility: hidden; will-change: transform; }
.door img { backface-visibility: hidden; }

/* read by screen readers, not shown */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Logo (1.11.2026, בן־איש: "the logo is really small, not readable"; typeset: the tagline under the name ran at
   about 7px, below any readable size). Larger everywhere, the header a little taller to hold it; on a phone it is
   sized to keep the header from eating the first screen. */
.logo { width: 118px; }
.header-row { min-height: 92px; }
.footer-id .logo { width: 176px; }
html { scroll-padding-top: 104px; }
@media (max-width: 599px) {
  .logo { width: 92px; }
  .header-row { min-height: 76px; }
  html { scroll-padding-top: 88px; }
}
/* The logo lights up (2.11.2026, בן־איש: "something nice and simple when the mouse is on it"; of five options he
   chose this one, "the words coloured too, a softer shade"). Under the mouse the whole header logo, hands and words,
   fills from right to left, as Hebrew reads, with a muted honey, holds a moment and goes back to ink: a layer in that
   colour over the logo, cut by the logo's own mask, revealed by its clip. Honey rather than the action amber: softer,
   and still about 3:1 on the header. site.js plays it once per hover, to its end, with a real mouse only and never
   with reduced motion. The footer's logo does not change. */
.brand .logo { position: relative; }
.brand .logo::after { content: ""; position: absolute; inset: 0; background: #B98B3E; clip-path: inset(0 0 0 100%); }
.brand .logo.is-lit::after { animation: logo-fill 1300ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes logo-fill {
  0% { clip-path: inset(0 0 0 100%); }
  35%, 70% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .brand .logo.is-lit::after { animation: none; } }
/* the larger logo made the phone header 12px taller; the opening gives the same back (less air above the photo, the
   photo a touch lower) so headline, lead and button still fit the first screen */
@media (max-width: 599px) {
  .page-hero, body[data-page="index"] .hero { padding-top: 4px; }
  /* 16 / 9 since 5.11.2026 (was 16 / 10): a lower photo for a calmer first screen, see "Phone first screen, calmer" */
  .ink-hero .hero-media img, body[data-page="index"] .ink-hero .hero-media img { aspect-ratio: 16 / 9; }
}

/* bolder, the circus "what happens in the workshop" section only (1.11.2026, בן־איש: "boring and banal"). It opted out
   of the page's strongest moves: everything sat in a 580px column with empty margins, and the page's best moment,
   "three throws… fifteen", was set barely above paragraph size. Now the section spreads to the full width (heading
   and intro beside the photos, larger), the 3-to-15 sentence is the peak, set in the display face at full strength
   across the width with the thrown ball's arc flying over all of it, and the quote and the video sit side by side.
   No words change; the phone keeps the same order, with the peak sentence and the arc made larger. */
.inside-feature .container { max-width: var(--container); }
.inside-feature .pull { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.18; text-wrap: balance; margin: 0 0 .9em; }
.inside-feature .motif svg { width: min(100%, 520px); max-width: none; }
.inside-feature .motif { margin: 12px 0 4px; }
@media (min-width: 900px) {
  .inside-feature .container {
    display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 64px; align-items: start;
    grid-template-areas: "title photos" "intro photos" "motif motif" "pull pull" "proof video" "quote video" "quote caption" ". caption";
  }
  .inside-feature h2 { grid-area: title; align-self: end; margin-top: 40px; }
  .inside-feature .container > p:not(.pull):not(#proof-title):not(.video-caption) { grid-area: intro; font-size: 1.2rem; }
  .inside-feature .photo-pair { grid-area: photos; margin: 0; }
  .inside-feature .motif { grid-area: motif; margin-top: 56px; }
  .inside-feature .motif svg { width: 100%; height: 120px; }
  .inside-feature .pull { grid-area: pull; max-width: 22ch; margin-bottom: 1.2em; }
  .inside-feature #proof-title { grid-area: proof; }
  .inside-feature .testimonial { grid-area: quote; margin-top: 4px; }
  .inside-feature .video-lite { grid-area: video; align-self: start; }
  .inside-feature .video-caption { grid-area: caption; }
}
@media (min-width: 900px) {
  .inside-feature .container { grid-template-columns: 0.85fr 1.4fr; }
  .inside-feature .photo-pair img:first-child { aspect-ratio: 4 / 5; }
  .inside-feature .photo-pair img:nth-child(2) { aspect-ratio: 1; margin-top: 30%; }
  /* the arc keeps its own proportions, so it is made wide and lets its height follow */
  .inside-feature .motif svg { width: min(78%, 680px); height: auto; }
}
@media (max-width: 899px) { .inside-feature .motif svg { width: 62%; height: auto; } }

/* colorize + animate, the 3-to-15 sentence (1.11.2026, בן־איש: "still a bit flat — contrast and motion"). The
   sentence is about getting from three to fifteen, so colour and motion tell that: "three" in the soft ink (where it
   starts), "fifteen" in full ink over a wide amber mark (where it gets). One authored moment: the arc is thrown as the
   section arrives, and when the ball lands the amber mark draws itself under "fifteen". No words change; with reduced
   motion or no script the mark is simply there. */
.inside-feature .pull { position: relative; isolation: isolate; }
.inside-feature .pull .from { color: var(--ink-soft); }
.inside-feature .pull .to { position: relative; white-space: nowrap; }
.inside-feature .pull .to::after {
  content: ""; position: absolute; z-index: -1; inset-inline: -0.06em; bottom: 0.06em; height: 0.3em;
  background: var(--accent); border-radius: 0.15em; transform-origin: right;
}
.inside-feature:has(.motif.is-waiting) .pull .to::after { transform: scaleX(0); }
.inside-feature:has(.motif.is-thrown) .pull .to::after { transform: scaleX(1); transition: transform 650ms var(--ease-out) 1250ms; }
@media (prefers-reduced-motion: reduce) { .inside-feature .pull .to::after { transform: none !important; transition: none !important; } }
/* the start reads clearly lighter than the arrival (#7E8D84 is 3.4:1 on the paper, enough for display-size text), and
   the amber mark lies behind the lower half of "fifteen" like a highlighter, not under it like an underline */
.inside-feature .pull .from { color: #7E8D84; }
.inside-feature .pull .to::after { bottom: 0.1em; height: 0.42em; }

/* Circus "מה עושים בסדנה": photo motion (impeccable animate, 1.11.2026). When the pair comes into view the
   photos are tossed up one after the other; while scrolling they drift at different speeds, the front photo
   more, which gives depth. Entrance uses `transform`, drift uses `translate`, so they never fight. Visible by
   default; site.js adds the waiting state only when it can run the motion. (A hill-and-sun backdrop behind the
   pair was tried the same day and removed at בן־איש's request.) */
.inside-feature .photo-pair img { translate: 0 calc(var(--drift, 0) * -12px); }
.inside-feature .photo-pair img:nth-child(2) { translate: 0 calc(var(--drift, 0) * -26px); }
.inside-feature .photo-pair.is-waiting img { transform: translateY(56px) rotate(-3deg); opacity: 0; }
.inside-feature .photo-pair.is-waiting img:nth-child(2) { transform: translateY(72px) rotate(4deg); }
.inside-feature .photo-pair.is-up img { transition: transform 750ms cubic-bezier(.16,1,.3,1), opacity 300ms ease-out; }
.inside-feature .photo-pair.is-up img:nth-child(2) { transition-delay: 150ms; }
@media (prefers-reduced-motion: reduce) {
  .inside-feature .photo-pair img { translate: none !important; transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* Circus "גם עם מרחב יצירה" (impeccable layout + delight, 1.11.2026): the section had only words, and there is no
   photo of the craft space, so a drawn mobile, one of the things the section says participants make, hangs from
   the top edge of the band beside the text and turns slowly: felt ball in amber, leaf in pine, a ring. Two
   columns from 900px, with the mobile in the left column; on a phone it hangs at the left edge above the
   heading. It turns only while on screen (site.js) and stands still with reduced motion. Taken from the
   alternative "בתנועה" (src/drafts/assets/motion.css). */
.craft-section { overflow: hidden; }
.craft-section .container { position: relative; }
.craft-section .mobile { display: block; overflow: visible; width: 96px; height: auto; float: left; margin: -64px 28px 8px 0; } /* the ring swings past the drawing, so the text keeps a gap */
/* The mobile, redrawn as a hand-made one (2.11.2026, בן־איש: "draw it again at a higher level"), of the things
   the section names: a driftwood bar, macrame cord wrapped at every tie with a wooden bead, two felted wool balls on
   one cord, and a small balanced twig carrying a leaf and a wooden ring (the felt and the ring shaded in the SVG's
   own gradients). */
.craft-section .mobile .m-cord { fill: none; stroke: var(--ink-soft); stroke-width: .9; stroke-linecap: round; }
.craft-section .mobile .m-knot { fill: var(--ink-soft); }
.craft-section .mobile .m-bead, .craft-section .mobile .m-ring-wood { fill: url(#m-wood-ring); }
.craft-section .mobile .m-wood { fill: var(--ink); }
.craft-section .mobile .m-knot-wood { fill: #4A5C52; }
.craft-section .mobile .m-grain { fill: none; stroke: #5D7066; stroke-width: .45; }
.craft-section .mobile .m-leaf-blade { fill: var(--band); }
.craft-section .mobile .m-leaf-veins { fill: none; stroke: #7FA595; stroke-width: .5; stroke-linecap: round; }
.craft-section .mobile .m-stem { fill: none; stroke: var(--band); stroke-width: 1.1; stroke-linecap: round; }
.craft-section .mobile .m-ring-grain { fill: none; stroke: #B97F2B; stroke-width: .5; stroke-linecap: round; }
/* without the script, or until it starts: a slow keyframe sway of the bar and its two hangings */
.craft-section .mobile .m-arm, .craft-section .mobile .m-hang { transform-box: view-box; }
.craft-section .mobile .m-arm { transform-origin: 56px 34px; animation: craft-sway 7s ease-in-out infinite alternate; }
.craft-section .mobile .m-hang-l { transform-origin: 10px 37px; animation: craft-swing 3.6s ease-in-out infinite alternate; }
.craft-section .mobile .m-hang-r { transform-origin: 100px 36px; animation: craft-swing 4.3s ease-in-out -1.3s infinite alternate; }
.craft-section .mobile:not(.is-on) g { animation-play-state: paused; }
@keyframes craft-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes craft-swing { from { transform: rotate(7deg); } to { transform: rotate(-7deg); } }
@media (min-width: 900px) {
  .craft-section .container.narrow { max-width: 1000px; display: grid; grid-template-columns: 1fr 240px; grid-template-rows: auto auto 1fr; column-gap: 72px; }
  .craft-section .container > :not(.mobile) { grid-column: 1; }
  .craft-section .mobile { grid-column: 2; grid-row: 1 / span 3; float: none; width: 240px; margin: -104px 0 0; }
  .craft-section h2 { font-size: clamp(2.2rem, 1.4rem + 1.8vw, 3rem); margin-top: 8px; }
  .craft-section p { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .craft-section .mobile g { animation: none; } }
/* When site.js runs the mobile as a small physics model, the looping keyframes above step aside. */
.craft-section .mobile.is-sim g { animation: none !important; }
.craft-section .mobile.is-sim { cursor: grab; touch-action: pan-y; }
/* the model writes rotate(angle x y) itself; a CSS transform-origin would be added on top and detach the strings */
.craft-section .mobile.is-sim .m-arm, .craft-section .mobile.is-sim .m-hang, .craft-section .mobile.is-sim .m-sub { transform-origin: 0 0; }

/* Teens "מה עושים בשיעור": martial arts and acrobatics as two programs, each a block with its own heading,
   words and pictures (impeccable layout: one idea per block, separated by space and a keyline, not one
   paragraph that carries both; בן־איש 2.11.2026). Pictures that share a row are cut to one height: the column
   widths are the shapes' ratios (3:4 photo and 9:16 Short; 3:4 and 4:3 photos), so tops and bottoms line up.
   Martial arts: the sparring photo beside the pads Short. Acrobatics: the lesson video (it opens on a partner
   flip), then the two photos, from 900px a little wider than the text column. */
.program { margin-top: 40px; }
.program + .program { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--keyline); }
.program > h3 { font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.1rem); line-height: 1.2; margin: 0 0 .45em; }
.program-media { display: grid; gap: 20px; margin-top: 28px; align-items: start; }
.program-media > img { width: 100%; object-fit: cover; border-radius: calc(var(--radius-photo) * .7); outline: 1px solid var(--keyline); outline-offset: -1px; }
.video-item { margin: 0; min-width: 0; }
.video-item .video-caption { margin-top: 10px; }
.program-video { margin-top: 28px; }
.program-media--ma { grid-template-columns: .75fr .5625fr; gap: 14px; }
.program-media--ma > img { aspect-ratio: 3 / 4; }
.program-media--acro > img:first-child { aspect-ratio: 4 / 5; object-position: center 40%; }
.program-media--acro > img:nth-child(2) { aspect-ratio: 4 / 3; }
@media (min-width: 600px) {
  .program-media--ma { gap: 20px; }
  .program-media--acro { grid-template-columns: .75fr 1.333fr; }
  .program-media--acro > img:first-child { aspect-ratio: 3 / 4; }
}
@media (min-width: 900px) {
  .program-media--acro { margin-inline: calc(50% - min(480px, 50vw - 32px)); }
}

/* copy round (2.11.2026, בן־איש: "נועלים את ד"): the home opening leads with one line on its own, the baby learning to
   walk, a little heavier and close to the line that explains it. On a phone the button moves up after the first lead;
   the line after the punch line stays above the button too, at the lead's size, so it reads as on a computer. */
.hero .lead-punch { font-weight: 600; margin-bottom: .45em; }
@media (max-width: 899px) {
  .hero-text > .lead-punch + .lead { order: 1; font-size: 1.1rem; margin-bottom: 1.2em; }
}

/* Phone first screen, calmer (5.11.2026, בן־איש: "בנייד… עמוס מדי עם הטקסט למטה", chose "ב" of two drafts in
   qa/variants/phone-calm-*.css). It stacked five layers (photo, ink hills with the sun, a small two-line label, a huge
   headline, two paragraphs). Now: lower hills (64px, in the phone opening block) and a lower photo (16 / 9, in the
   block after the larger logo), the small line
   under the headline as its subtitle (a label above a heading is a ban in impeccable's craft floor), and on the home
   page the second paragraph after the button, so the button is in the first screen. Phone only; the desktop is as it was. */
@media (max-width: 599px) {
  .hero-text > h1 { order: 0; margin-bottom: .25em; }
  .hero-text > .eyebrow { order: 1; margin: 0 0 1em; }
  .hero-text > .lead-punch + .lead { order: 3; }
}

/* Circus: photos from the workshops, each beside the sentence it shows (impeccable layout: group by meaning, not a
   gallery where twelve pictures weigh the same; בן־איש approved the draft /circus-photos, 2.11.2026). One treatment
   for all, as the photos already on the page: rounded corners and the thin keyline. From 900px "מה עושים בסדנה"
   gets new grid areas: the slackline under the stations, the diabolo beside the 3-to-15 sentence, the plates beside
   the parents' quote with the video under the quote. */
.shot { display: block; width: 100%; object-fit: cover; border-radius: calc(var(--radius-photo) * .7); outline: 1px solid var(--keyline); outline-offset: -1px; }
.shot--tree { aspect-ratio: 4 / 5; width: min(72%, 360px); margin: 24px 0 0; }
.shot--diabolo { aspect-ratio: 4 / 5; object-position: center 30%; width: min(64%, 300px); margin: 8px 0 32px; }
.shot--plates { aspect-ratio: 5 / 6; object-position: center 20%; width: min(78%, 380px); margin: 28px 0; }
.shot--wide { aspect-ratio: 16 / 10; margin: 32px 0; }
.shot--demo { aspect-ratio: 4 / 5; object-position: center 35%; width: min(70%, 320px); margin: 0 0 28px; }
.shot-duo { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
.shot-duo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--radius-photo) * .7); outline: 1px solid var(--keyline); outline-offset: -1px; }
@media (min-width: 600px) { .shot-duo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  /* "מה קורה בסבב" (5.11.2026, after the steps replaced the intro): text column as wide as the photos so the five steps
     read as paragraphs, not a narrow strip. Each photo sits beside what it shows: the pair (juggling, balance board)
     and the slackline beside the steps about the stations and falling; the diabolo raised high beside the peak
     sentence; the spinning plates, children and adults together, beside the quote that says the adults joined in, with
     the video under them. No column is left empty beside a long block. */
  .inside-feature .container { grid-template-columns: 1fr 1fr; column-gap: 72px; grid-template-areas: "title photos" "intro photos" "intro tree" "motif motif" "pull diabolo" "quote plates" "quote video" "quote caption" ". caption"; }
  .inside-feature .shot--tree { grid-area: tree; justify-self: start; align-self: start; width: 58%; margin: 32px 0 0; }
  .inside-feature .pull { align-self: center; }
  .inside-feature .shot--diabolo { grid-area: diabolo; justify-self: center; align-self: center; width: min(52%, 280px); margin: 0; }
  .inside-feature .testimonial { margin-top: 64px; }
  .inside-feature .shot--plates { grid-area: plates; justify-self: start; width: 68%; margin: 64px 0 32px; }
  .inside-feature .video-lite { margin-top: 0; }
  .shot--wide { margin-inline: calc(50% - min(480px, 50vw - 32px)); width: min(960px, 100vw - 64px); max-width: none; }
  .shot-duo { margin-inline: calc(50% - min(480px, 50vw - 32px)); }
  .next-section .container:has(> .shot--demo) { display: grid; grid-template-columns: 1fr 300px; column-gap: 64px; max-width: 900px; }
  .next-section .container:has(> .shot--demo) > * { grid-column: 1; }
  .next-section .shot--demo { grid-column: 2; grid-row: 1 / span 4; width: 100%; margin: 8px 0 0; }
}

/* Depth round (5.11.2026, בן־איש: "גרסת העומק ממש הרבה יותר טובה"): the new text of six pages goes into the components the
   site already has. Three small additions: a short quote inside the circus door on the home page, plain bulleted lists on
   the about page, and the circus round's numbered steps in the grid place the old opening sentence held (the photos keep
   theirs). */
.door-quote { display: block; margin-top: 6px; font: 400 1.05rem/1.5 var(--font-head); color: var(--ink); }
.door-who { display: block; margin-top: 2px; font: 500 1rem/1.4 var(--font-body); color: var(--ink-soft); }
.bullets { display: grid; gap: 10px; margin: 4px 0 22px; }
.bullets li { position: relative; padding-inline-start: 22px; }
.bullets strong { font-weight: 600; color: var(--ink); }
.bullets li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (min-width: 900px) {
  .inside-feature .steps { grid-area: intro; }
}