/* Ginga Escola – v4 "open air"
   Clean and light: lots of white, one sans family (Heebo) in two voices,
   soft rounded photos, a single red panel, and one sticky window for the ages. */

:root {
  --red: #E3141A;
  --red-deep: #B30F15;
  --white: #FFFFFF;
  --paper: #FAF9F6; /* page white, one step softer than pure white */
  --footer: #232323;
  --ink: #141414;
  --soft: #F4F4F5;
  --muted: #5A5A5E;
  --line: #E2E2E5;
  --whatsapp: #25D366;

  --font: 'Heebo', 'Arial Hebrew', Arial, sans-serif;

  --step-0: 1.125rem;
  --step-1: 1.3rem;
  --step-2: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  --step-3: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem);
  --step-4: clamp(2.6rem, 1.4rem + 4.6vw, 6.2rem);

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 1240px;
  --radius: clamp(18px, 2.4vw, 32px);
  --header-h: 76px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); -webkit-tap-highlight-color: transparent; }
/* the page stays put behind the open menu or a dialog, with or without Lenis */
html:has(body.menu-open), html:has(dialog[open]) { overflow: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--step-0); line-height: 1.7; overflow-x: clip;
}
@media (min-width: 900px) { body { font-size: 1.1875rem; } }
img, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.intro :focus-visible, .tile-edu :focus-visible, .mobile-menu :focus-visible { outline-color: var(--white); }

.skip-link {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 200;
  background: var(--ink); color: var(--white); padding: .6em 1em; border-radius: 8px;
  transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

.container { width: min(100% - 2 * var(--gutter) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px), var(--max)); margin-inline: auto; }
.narrow { max-width: 820px; }
.section { padding-block: clamp(5rem, 10vw, 9rem); }
.h2 { font-weight: 900; font-size: var(--step-3); line-height: 1.08; letter-spacing: -.025em; margin-block-end: .6em; }
.lead { font-size: var(--step-1); color: var(--muted); max-width: 58ch; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--red); --fg: var(--white); --bd: var(--red);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: .65em 1.5em;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd); border-radius: 999px;
  font: 500 1.05rem/1.2 var(--font); text-decoration: none; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), scale .15s var(--ease);
}
/* buttons press with `scale`, so a GSAP entrance (which moves `transform`) never reads a half-done press */
.btn:active { scale: .97; }
.chip:active, .wa-float:active { transform: scale(.97); }
.btn-white { --bg: var(--white); --fg: var(--ink); --bd: var(--white); }
.btn-ghost { --bg: transparent; --fg: var(--white); --bd: rgb(255 255 255 / .7); }
.btn-outline { --bg: transparent; --fg: var(--ink); --bd: var(--ink); }
/* hover only for a real mouse, so a tap never leaves a button "stuck" dark */
@media (hover: hover) and (pointer: fine) {
  .btn-red:hover { --bg: var(--red-deep); --bd: var(--red-deep); }
  .btn-white:hover { --bg: var(--ink); --fg: var(--white); --bd: var(--ink); }
  .btn-ghost:hover { --bg: var(--white); --fg: var(--ink); --bd: var(--white); }
  .btn-outline:hover { --bg: var(--ink); --fg: var(--white); }
}
.btn-small { min-height: 44px; padding: .45em 1.15em; font-size: .98rem; }
.btn-large { min-height: 58px; padding: .75em 1.8em; font-size: 1.12rem; }
.btn-huge { min-height: 74px; padding: .9em 2.4em; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); }
.wa-icon { width: 1.25em; height: 1.25em; flex: none; }
.btn .wa-icon { background: var(--whatsapp); color: var(--white); border-radius: 50%; padding: 3px; box-sizing: content-box; width: 1em; height: 1em; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

.text-link {
  display: inline-flex; align-items: center; gap: .4em; font-weight: 500; color: var(--red-deep); text-decoration: none;
  border-block-end: 1.5px solid currentColor; padding-block-end: 1px; transition: color .25s;
}
.text-link { position: relative; }
.text-link::after { content: ""; position: absolute; inset: -10px -6px; } /* 44px tap area */
@media (hover: hover) and (pointer: fine) { .text-link:hover { color: var(--ink); } }
/* touch: controls press instead of flashing the browser's tap box (see html above) */
.rail-toggle { transition: transform .12s var(--ease); }
.rail-toggle:active { transform: scale(.94); }
.mobile-menu a:not(.btn):active, .text-link:active, .site-footer ul a:active { opacity: .6; }
@media (pointer: coarse) {
  .slide-btn, .cert { transition: transform .12s var(--ease); }
  .slide-btn:active, .cert:active, .letter-page:active { transform: scale(.98); transition-duration: .12s; }
}
/* long-press on a control doesn't select its label, a double tap doesn't zoom */
button, .btn, .chip, .round-btn, .menu-toggle, .wa-float, .rail-toggle, .mobile-menu a { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.slide-btn img, .cert img, .letter-page img { -webkit-touch-callout: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: rgb(250 249 246 / .9); backdrop-filter: blur(14px);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner {
  width: min(100% - 2 * var(--gutter) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px), var(--max)); margin-inline: auto;
  height: var(--header-h); display: flex; align-items: center; gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
/* the header keeps one height (a shrinking header shifted the whole page); only the logo scales down */
.brand img { width: 50px; height: 50px; transition: transform .35s var(--ease); }
.is-scrolled .brand img { transform: scale(.84); }
.brand-name { font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; }
.main-nav { margin-inline-start: auto; }
.main-nav ul { display: flex; gap: .3rem; }
.main-nav a { display: block; text-decoration: none; font-weight: 500; padding: .45em .95em; border-radius: 999px; transition: background-color .25s; }
@media (hover: hover) and (pointer: fine) { .main-nav a:hover { background: var(--soft); } }
.main-nav a[aria-current="page"] { background: var(--soft); }
.menu-toggle { display: none; }
@media (max-width: 899px) {
  :root { --header-h: 64px; }
  .main-nav, .brand-name { display: none; }
  .header-cta { margin-inline-start: auto; min-height: 42px; padding: .35em .95em; }
  .brand img { width: 44px; height: 44px; }
  .menu-toggle {
    display: grid; place-content: center; gap: 6px; width: 46px; height: 46px; flex: none;
    background: var(--soft); border: 0; border-radius: 50%; cursor: pointer; padding: 0; color: var(--ink);
  }
  .menu-toggle span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease); }
  .menu-open .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-open .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .menu-open .site-header { background: transparent; backdrop-filter: none; box-shadow: none; }
  .menu-open .menu-toggle { background: var(--white); }
}
.mobile-menu {
  position: fixed; inset: 0; z-index: 40; background: var(--red); color: var(--white);
  display: flex; flex-direction: column; justify-content: safe center; gap: 2.5rem; /* safe: starts at the top when it overflows */
  padding: calc(var(--header-h) + 1rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { clip-path: inset(0 0 0 0); }
.mobile-menu ul { display: grid; gap: .2rem; }
.mobile-menu a:not(.btn) { font-weight: 900; font-size: clamp(2.1rem, 10vw, 3rem); letter-spacing: -.02em; text-decoration: none; line-height: 1.35; }
.mobile-menu li { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mobile-menu.is-open li { opacity: 1; transform: none; }
.mobile-menu.is-open li:nth-child(2) { transition-delay: .07s; }
.mobile-menu.is-open li:nth-child(3) { transition-delay: .14s; }
.mobile-menu.is-open li:nth-child(4) { transition-delay: .21s; }
.mobile-menu .btn { align-self: flex-start; }
/* phone in landscape: smaller links so the whole menu fits (beats font-v1.css) */
@media (max-height: 500px) {
  .mobile-menu { gap: 1.2rem; }
  .mobile-menu li a:not(.btn) { font-size: clamp(1.8rem, 9vh, 2.6rem); }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) 0; }
.hero-title { display: block; margin-block-end: clamp(1.8rem, 4vw, 3rem); }
.hero-title-main {
  display: block; font-weight: 900; font-size: var(--step-4); line-height: 1.02; letter-spacing: -.035em; max-width: 17ch;
}
.hero-title-main .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block-end: .1em; margin-block-end: -.1em; }
.hero-title-main .w > span { display: inline-block; }
.hero-title-sub { display: block; margin-block-start: .9em; font-weight: 500; font-size: var(--step-1); line-height: 1.4; color: var(--red-deep); }
.hero-row { display: grid; gap: 1.2rem 4rem; padding-block-start: clamp(1.4rem, 3vw, 2rem); border-block-start: 1px solid var(--line); }
.hero-question { font-weight: 800; font-size: var(--step-2); line-height: 1.25; letter-spacing: -.015em; max-width: 18ch; }
.hero-question-accent { display: block; color: var(--red); }
.hero-text { color: var(--ink); font-size: var(--step-1); line-height: 1.7; max-width: 40ch; margin-block-end: .9rem; }
.hero-cta { margin-block-start: .4rem; }
.hero-text-strong { font-weight: 800; font-size: var(--step-1); color: var(--red-deep); margin-block-end: 1.6rem; }
@media (min-width: 900px) { .hero-row { grid-template-columns: 1fr 1.15fr; align-items: start; } }
.hero-media {
  width: min(100% - 2 * var(--gutter), var(--max)); margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--soft);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 699px) { .hero-media { aspect-ratio: 4 / 3; } }

/* ---------- Intro: the one red panel ---------- */
.intro { padding-block: clamp(5rem, 10vw, 8rem); }
.intro-panel {
  width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto;
  background: var(--red); color: var(--white); border-radius: var(--radius);
  padding: clamp(2.5rem, 7vw, 6.5rem) clamp(1.4rem, 6vw, 6rem);
}
.intro-inner { max-width: 50rem; }
.intro-p { font-size: var(--step-2); font-weight: 500; line-height: 1.5; letter-spacing: -.01em; }
.intro-p .ln { display: block; }
.intro-big { font-weight: 900; font-size: var(--step-3); line-height: 1.08; letter-spacing: -.03em; margin: clamp(2rem, 5vw, 3.4rem) 0 2rem; }

/* ---------- Photos ---------- */
.photo { border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-wide { aspect-ratio: 3 / 2; }
.photo-tall { aspect-ratio: 4 / 5; }
.photo-tall img { object-position: 50% 30%; }

/* ---------- School: soft grey band, a big photo running to the screen edge ---------- */
.school { background: var(--soft); padding-block: clamp(5rem, 10vw, 9rem); overflow: hidden; }
.school-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.pre-count [data-count] { visibility: hidden; }
.since { margin: 0 0 .5rem; font-weight: 900; font-size: clamp(4rem, 2rem + 8vw, 9rem); line-height: .9; letter-spacing: -.05em; color: var(--red); font-variant-numeric: tabular-nums; }
.school-text p:not(.since) { color: var(--muted); }
/* (Bar 2026-10-18) a small "משנת" sits above the "15" of 2015 (the right end of the number) */
.since-from { display: block; width: fit-content; font-size: max(1.35rem, .2em); line-height: 1; letter-spacing: 0; color: var(--ink); margin: 0; }
.since [data-count] { display: block; width: fit-content; margin-block-start: -.1em; }
.school-text .school-lead { color: var(--ink); font-size: var(--step-1); font-weight: 700; }
.school-photo { position: relative; aspect-ratio: 4 / 3; }
.school-badge {
  position: absolute; inset-block-end: clamp(1rem, 2.5vw, 2rem); inset-inline-start: clamp(1rem, 2.5vw, 2rem);
  background: var(--red); color: var(--white); border-radius: 18px; padding: .8em 1.2em;
  font-weight: 800; font-size: var(--step-1); line-height: 1.25; box-shadow: 0 18px 40px -18px rgb(0 0 0 / .45);
}
@media (min-width: 900px) {
  .school-grid { grid-template-columns: .85fr 1.35fr; }
  /* the photo runs past the column to the end edge of the screen */
  .school-photo {
    aspect-ratio: auto; min-height: clamp(420px, 42vw, 640px);
    margin-inline-end: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2));
    border-start-end-radius: 0; border-end-end-radius: 0;
  }
}

/* ---------- Ran: a wide cinematic photo, then a dark band with the bio and his method ---------- */
.ran { background: var(--paper); color: var(--ink); }
.ran-stage { position: relative; }
/* Ran is never cut to a low strip (Bar 2026-10-19): the photo is at most 2.1 times as wide as it is tall,
   growing up to the full screen height when needed (laptops at Windows 125%, 1366 screens, 2560 at 100%) */
.ran-photo { margin: 0; height: max(520px, min(92svh, 1000px), min(100vw / 2.1, 100svh)); overflow: hidden; }
.ran-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 57% 60%; transform-origin: 57% 50%; }
.ran-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  /* the photo stays clear down to the feet and the instruments, then a short soft fade into the white band */
  background: linear-gradient(180deg, rgb(250 249 246 / .22) 0%, rgb(250 249 246 / 0) 24%, rgb(250 249 246 / 0) 80%,
    rgb(250 249 246 / .1) 86%, rgb(250 249 246 / .35) 92%, rgb(250 249 246 / .72) 97%, var(--paper) 100%); }
.ran-head { position: absolute; inset-inline: 0; inset-block-start: clamp(2rem, 9vh, 6rem); z-index: 1; color: var(--ink);
  /* the name sits over the open sea on the left, clear of Ran himself */
  display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.ran-head > * { max-width: 38%; }
.ran-name span { display: block; }
.ran-kicker { font-weight: 800; font-size: var(--step-1); color: var(--red-deep); margin-block-end: .2em; }
.ran-name { font-weight: 900; font-size: clamp(3rem, 1.6rem + 6vw, 7.5rem); line-height: .95; letter-spacing: -.03em; margin: 0; }
.ran-name span { color: var(--red); }
.ran-body { padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 10vw, 8rem); }
.ran-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (min-width: 900px) { .ran-grid { grid-template-columns: .9fr 1.3fr; } }
.ran-bio p { font-size: var(--step-1); color: var(--muted); }
.ran-facts dd { color: var(--muted); }
.ran-method { border-inline-start: 4px solid var(--red); padding-inline-start: clamp(1.2rem, 3vw, 2.4rem); }
.ran-method-label { color: var(--muted); font-size: var(--step-1); margin-block-end: .4em; }
.ran-method-name { margin: 0; font-weight: 900; font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem); line-height: 1; letter-spacing: -.03em; color: var(--red); }
.ekg { display: block; width: 100%; max-width: 560px; height: auto; margin-block: .6rem 1rem; overflow: visible; }
.ekg path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgb(227 20 26 / .35)); }
.ran-method-text { font-size: var(--step-1); color: var(--ink); max-width: 44ch; }
@media (max-width: 899px) {
  .ran-photo { height: auto; aspect-ratio: 4 / 5; }
  .ran-photo img { object-position: 57% 50%; }
  /* phones: the name moves under the photo so it never covers Ran */
  .ran-head { position: relative; inset-block-start: auto; color: var(--ink); align-items: flex-start; text-align: start; margin-block-start: -3.5rem; }
  .ran-head > * { max-width: none; }
  .ran-stage::after { background: linear-gradient(180deg, rgb(250 249 246 / 0) 72%, rgb(250 249 246 / .15) 82%, rgb(250 249 246 / .5) 91%, rgb(250 249 246 / .85) 97%, var(--paper) 100%); bottom: auto; height: 100%; }
}
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2.4rem 0 0; padding-block-start: 1.8rem; border-block-start: 1px solid #D4D4D8; }
.facts dt { font-weight: 900; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; letter-spacing: -.03em; color: var(--red); }
.facts dd { margin: .45em 0 0; font-weight: 500; }

/* ---------- Special ---------- */
.ran-body { padding-block-end: clamp(2rem, 4vw, 3.5rem); }
.ran + .special { padding-block-start: clamp(1.5rem, 3vw, 3rem); }
.special-head { display: grid; gap: 1rem 4rem; margin-block-end: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .special-head { grid-template-columns: 1fr 1.3fr; align-items: end; } .special-head .h2 { margin: 0; } .special-head .lead { margin: 0; } }
.elements { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.2rem); }
@media (max-width: 760px) { .elements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.el {
  background: var(--soft); border-radius: calc(var(--radius) * .8); padding: clamp(1rem, 2vw, 1.5rem) clamp(.9rem, 2vw, 1.4rem) clamp(1.1rem, 2vw, 1.5rem);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: box-shadow .5s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .el:hover { box-shadow: 0 18px 40px -24px rgb(227 20 26 / .45); } }
.el-art { width: clamp(96px, 11vw, 132px); aspect-ratio: 1; border-radius: 50%; background: var(--white); display: grid; place-items: center; margin-block-end: .9rem; }
.el-art svg { width: 94%; height: 94%; overflow: visible; fill: none; stroke: var(--red); stroke-linecap: round; stroke-linejoin: round; }
.el h3 { font-weight: 800; font-size: var(--step-2); line-height: 1.1; }
.el p { margin: .35em 0 0; color: var(--muted); font-size: 1rem; line-height: 1.45; }
/* the icons move a few times (under 5 seconds) each time they come into view, then rest
   (main.js adds .is-live on the way in and removes it once they are off screen; accessibility, Bar 2026-10-16).
   With a mouse, pointing at an icon plays it again (main.js adds .el-hover, Bar 2026-10-18) */
.el-art svg * { transform-box: view-box; }
.el-reset * { animation: none !important; }

/* Movement: a capoeirista throws a kick (meia lua) and comes back to the ginga */
.el-move .fill { fill: var(--red); stroke: none; }
.el-move .limb { stroke-width: 9; }
.el-move .limb.thin { stroke-width: 7; }
.el-move .trail { stroke-width: 2.5; stroke-dasharray: 3 7; opacity: 0; }
.el-move .kick { transform-origin: 64px 62px; }
.el-move .body { transform-origin: 64px 62px; }
:is(.is-live .el-move, .el-move.el-hover) .trail { animation: trail 2.4s var(--ease) 2; }
:is(.is-live .el-move, .el-move.el-hover) .kick { animation: kick 2.4s var(--ease) 2; }
:is(.is-live .el-move, .el-move.el-hover) .body { animation: lean 2.4s var(--ease) 2; }
@keyframes kick { 0%, 18% { transform: rotate(0); } 45% { transform: rotate(118deg); } 62% { transform: rotate(150deg); } 85%, 100% { transform: rotate(0); } }
@keyframes lean { 0%, 18% { transform: rotate(0); } 45%, 62% { transform: rotate(14deg); } 85%, 100% { transform: rotate(0); } }
@keyframes trail { 0%, 30% { opacity: 0; } 50% { opacity: .55; } 75%, 100% { opacity: 0; } }

/* Music: the stick strikes the berimbau, the string shivers, notes float up */
.el-music .bow { stroke-width: 5; }
.el-music .string { stroke-width: 1.6; }
:is(.is-live .el-music, .el-music.el-hover) .string { animation: shiver 1.2s linear 4; }
.el-music .gourd { fill: var(--red); stroke: none; }
.el-music .stick { stroke-width: 4; stroke: var(--ink); transform-origin: 72px 30px; transform: rotate(-18deg); }
.el-music .note { stroke-width: 2.6; opacity: 0; }
:is(.is-live .el-music, .el-music.el-hover) .stick { animation: strike 1.2s var(--ease) 4; }
:is(.is-live .el-music, .el-music.el-hover) .n1 { animation: float 2.4s ease-out 2; }
:is(.is-live .el-music, .el-music.el-hover) .n2 { animation: float 2.4s ease-out .8s 1; }
:is(.is-live .el-music, .el-music.el-hover) .n3 { animation: float 2.4s ease-out 1.6s 1; }
@keyframes strike { 0%, 100% { transform: rotate(-18deg); } 22% { transform: rotate(0); } 40% { transform: rotate(-12deg); } }
@keyframes shiver { 0%, 20% { d: path("M44 12 Q44 59 44 106"); } 26% { d: path("M44 12 Q50 59 44 106"); } 32% { d: path("M44 12 Q39 59 44 106"); } 38% { d: path("M44 12 Q47 59 44 106"); } 46%, 100% { d: path("M44 12 Q44 59 44 106"); } }
/* Safari can't animate `d`: the string shakes a little instead */
@supports not (d: path("M0 0")) {
  :is(.is-live .el-music, .el-music.el-hover) .string { animation: shake 1.2s linear 4; }
  @keyframes shake { 0%, 20% { transform: none; } 26% { transform: translateX(1.5px); } 32% { transform: translateX(-1.2px); } 38% { transform: translateX(.8px); } 46%, 100% { transform: none; } }
}
@keyframes float { 0% { opacity: 0; transform: translate(0, 10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -26px); } }

/* Culture: the Brazilian flag waves, its stars twinkle */
.el-culture .pole { stroke: var(--ink); stroke-width: 4; }
.el-culture .flag { transform-origin: 22px 50px; }
:is(.is-live .el-culture, .el-culture.el-hover) .flag { animation: wave 2.4s ease-in-out 2; }
.el-culture .cloth { stroke-width: 4; fill: rgb(227 20 26 / .06); }
.el-culture .diamond { stroke-width: 3.5; fill: var(--white); }
.el-culture .globe { fill: var(--red); stroke: none; }
.el-culture .band { stroke: var(--white); stroke-width: 3; }
.el-culture .star { fill: var(--white); stroke: none; transform-origin: center; }
:is(.is-live .el-culture, .el-culture.el-hover) .s1 { animation: twinkle 1.2s ease-in-out 4; }
:is(.is-live .el-culture, .el-culture.el-hover) .s2 { animation: twinkle 1.2s ease-in-out .5s 3; }
:is(.is-live .el-culture, .el-culture.el-hover) .s3 { animation: twinkle 1.2s ease-in-out 1s 3; }
@keyframes wave { 0%, 100% { transform: skewY(0) scaleX(1); } 30% { transform: skewY(-4deg) scaleX(.97); } 65% { transform: skewY(3deg) scaleX(.99); } }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Community: the roda turns slowly around a beating heart */
.el-roda .ring { stroke-width: 2; stroke-dasharray: 4 6; opacity: .5; }
.el-roda .people { transform-origin: 60px 60px; }
/* a third of a turn at the old speed: the six people land on each other's places, so the rest pose is the same */
:is(.is-live .el-roda, .el-roda.el-hover) .people { animation: turn 4.8s linear 1; }
.el-roda .p circle { fill: var(--red); stroke: none; }
.el-roda .p path { stroke-width: 5; }
.el-roda .heart { fill: var(--red); stroke: none; transform-origin: 60px 60px; }
:is(.is-live .el-roda, .el-roda.el-hover) .heart { animation: beat 1.2s ease-in-out 4; }
@keyframes turn { to { transform: rotate(120deg); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(.96); } 45% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .el-art svg * { animation: none !important; } }

/* ---------- Activities ---------- */
.activities { background: #FBF0EF; }
.age-first { display: block; font-weight: 800; font-size: 1rem; color: var(--ink); margin-block-end: .5rem; }
.activities-title { max-width: 16ch; }
.ages-window { display: none; }
.ages-list { display: grid; gap: clamp(3rem, 8vw, 4.5rem); }
.age-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--soft); margin-block-end: 1.5rem; }
.age-media img, .age-media video { width: 100%; height: 100%; object-fit: cover; }
.age:nth-child(3) .age-media img { object-position: 50% 90%; } /* keeps the whole handstand in frame */
.age-body h3 { font-weight: 900; font-size: var(--step-3); letter-spacing: -.03em; line-height: 1.05; margin-block-end: .45em; }
.age-body p { color: var(--muted); max-width: 46ch; }
.age-body .btn { margin-block-start: .4rem; }
.age-place { font-weight: 500; color: var(--red-deep) !important; margin-block-end: .5em; }
.tag { display: inline-block; background: var(--red); color: var(--white); font-weight: 800; font-size: .95rem; padding: .3em .9em; border-radius: 999px; margin-block-end: 1rem; }

@media (min-width: 900px) {
  .ages { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .ages-window {
    display: block; position: sticky; inset-block-start: calc(var(--header-h) + 3vh);
    height: min(76vh, 720px);
    /* (Bar 2026-10-16) on short windows (1366x768 laptops) the frame went wide and low and cut the portrait clips
       (the child's head at age 3, the hands in the handstand): it keeps the tall shape of big screens instead */
    width: min(100%, (min(76vh, 720px) - 3.4rem) * .9);
  }
  .ages-frames { position: absolute; inset: 0 0 3.4rem; border-radius: var(--radius); overflow: hidden; background: var(--white); }
  .ages-frames .age-media { position: absolute; inset: 0; margin: 0; border-radius: 0; aspect-ratio: auto; clip-path: inset(100% 0 0 0); }
  .ages-frames.is-up .age-media { clip-path: inset(0 0 100% 0); }
  .ages-frames .age-media.is-active { clip-path: inset(0 0 0 0); z-index: 2; transition: clip-path .8s var(--ease); }
  .ages-frames .age-media.was-active { clip-path: inset(0 0 0 0); z-index: 1; }
  .ages-frames .age-media img, .ages-frames .age-media video { transform: scale(1.08); transition: transform 1.4s var(--ease); }
  .ages-frames .age-media.is-active img, .ages-frames .age-media.is-active video { transform: scale(1); }
  .ages-dots { position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
  .ages-dots li { font-size: .92rem; font-weight: 500; color: var(--muted); padding-block-start: .7rem; position: relative; transition: color .3s; }
  .ages-dots li::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px; border-radius: 3px; background: rgb(20 20 20 / .1); }
  .ages-dots li::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px; border-radius: 3px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
  .ages-dots li.on { color: var(--ink); }
  .ages-dots li.on::after { transform: scaleX(1); }
  .ages-list { gap: 0; }
  .ages-list .age { min-height: min(52vh, 500px); display: flex; flex-direction: column; justify-content: center; padding-block: 2rem; }
  /* cards not in view are grey but still readable (contrast 4.5:1 and up, accessibility, Bar 2026-10-16);
     the active card keeps its dark title and red button */
  .js-age .ages-list .age-body :is(h3, p:not(.age-place)) { transition: color .8s var(--ease); }
  .js-age .ages-list .age:not(.is-active) .age-body h3 { color: #808085; }
  .js-age .ages-list .age:not(.is-active) .age-body p:not(.age-place) { color: #6E6E73; }
  .js-age .ages-list .age:not(.is-active) .age-body .btn { --bg: transparent; --fg: var(--red-deep); --bd: var(--red-deep); }
}
.schedule-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem;
  margin-block-start: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: var(--radius); background: var(--soft);
}

/* ---------- Weekly schedule (layout from Bar's version, in v4 colours) ---------- */
.eyebrow { font-weight: 800; font-size: .9rem; letter-spacing: .06em; color: var(--red); display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.sched-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-block-end: 2rem; }
.sched-head .h2 { margin: 0; }
.sched-head .lead { margin: 0; max-width: 40ch; }
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-end: 1.6rem; }
.chip { font: inherit; font-weight: 700; font-size: .95rem; border: 0; background: var(--white); color: var(--ink); padding: .6rem 1.1rem; border-radius: 999px; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .2s, color .2s, box-shadow .2s; }
@media (hover: hover) and (pointer: fine) { .chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); box-shadow: none; }
.days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
@media (max-width: 1000px) { .days { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } }
.day { background: var(--soft); border-radius: calc(var(--radius) * .6); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.day-in { display: contents; } /* wrapper for the phone collapse in css/motion.css */
.day-h { background: var(--ink); color: var(--white); padding: 1rem 1.1rem .9rem; display: grid; gap: .1rem; }
.day-h b { font-weight: 900; font-size: 1.7rem; line-height: 1; }
.day-h span { font-size: .88rem; color: #D4D4D8; font-weight: 500; }
.day.today .day-h { background: var(--red); }
.day.today .day-h span { color: var(--white); }
.today-pill { justify-self: start; font-size: .75rem; font-weight: 800; background: var(--white); color: var(--red) !important; padding: .1rem .6rem; border-radius: 999px; margin-block-end: .25rem; }
.slots { display: flex; flex-direction: column; gap: .6rem; padding: .9rem; }
.slot { border-radius: 12px; padding: .75rem .9rem; background: var(--white); display: grid; gap: .1rem; transition: opacity .3s, transform .3s, background-color .3s; }
.slot .t { font-weight: 800; font-size: .95rem; color: var(--red); font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
.slot .g { font-weight: 800; font-size: 1.1rem; line-height: 1.2; }
.slot.dim { opacity: .22; transform: scale(.97); }
.slot.hit { background: #FCE8E8; }
.slot.hit .t { color: var(--red-deep); }
.sched-note { margin-block-start: 1.3rem; display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; color: var(--muted); font-size: .95rem; font-weight: 500; }
.sched-note li { display: inline-flex; align-items: center; gap: .5rem; }
.sched-note svg { width: 18px; height: 18px; fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.schedule-q { font-weight: 800; font-size: var(--step-2); line-height: 1.25; letter-spacing: -.015em; margin: 0; max-width: 24ch; }

/* ---------- More: bento ---------- */
.more { background: var(--soft); }
.bento { display: grid; gap: clamp(.9rem, 1.6vw, 1.3rem); }
.tile { background: var(--white); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.tile-media { overflow: hidden; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.tile-handstand .tile-media { aspect-ratio: 3 / 2; }
.tile-events .tile-media { aspect-ratio: 4 / 3; }
.tile-events .tile-media img { object-position: 50% 35%; }
.tile-body { padding: clamp(1.4rem, 3vw, 2.2rem); }
.tile h3 { font-weight: 800; font-size: var(--step-2); line-height: 1.2; letter-spacing: -.015em; margin-block-end: .45em; }
.tile-body p, .plain-list { color: var(--muted); }
.plain-list { margin-block-end: 1.3rem; display: grid; gap: .2rem; }
.plain-list li { padding-inline-start: 1.1rem; position: relative; }
.plain-list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.tile-edu { background: var(--red); color: var(--white); padding: clamp(1.4rem, 3vw, 2.2rem); gap: 1.5rem 4rem; display: grid; }
.tile-edu .tile-body { padding: 0; }
.tile-edu .tile-body p { color: var(--white); }
.edu-name { display: block; font-weight: 900; font-size: clamp(2.6rem, 1.4rem + 4.5vw, 5.6rem); line-height: 1; letter-spacing: -.04em; }
.pulse { display: block; width: 100%; max-width: 560px; height: auto; margin-block-start: 1.2rem; overflow: visible; }
.pulse path { fill: none; stroke: var(--white); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.edu-format strong { display: inline-block; font-weight: 800; font-size: var(--step-1); background: var(--white); color: var(--red-deep); border-radius: 999px; padding: .15em .8em; margin-inline-end: .5rem; }
@media (min-width: 900px) {
  .bento { grid-template-columns: 1.45fr 1fr; }
  .tile-events { grid-row: span 1; }
  .tile-edu { grid-column: 1 / -1; grid-template-columns: 1.15fr 1fr; align-items: center; padding: clamp(2.4rem, 4vw, 3.6rem); }
}

/* ---------- Testimonials ---------- */
.testimonials { overflow: hidden; }
.testimonials .h2, .testimonials .lead { text-align: center; margin-inline: auto; }
.rail { overflow: hidden; padding-block: 3rem 1.5rem; }
.rail-track { display: flex; align-items: stretch; width: max-content; }
.quote-card { margin-inline-start: 1.2rem; }
.js-motion .rail-track { animation: rail 52s linear infinite reverse; } /* right to left (Bar) */
.rail.is-paused .rail-track { animation-play-state: paused; }
/* hover pauses only with a real mouse (a tap on a phone left it "hovered" and stuck, Bar 2026-10-13) */
@media (hover: hover) and (pointer: fine) { .rail:hover .rail-track, .rail:focus-within .rail-track { animation-play-state: paused; } }
@keyframes rail { to { transform: translateX(50%); } }
.quote-card {
  width: min(440px, 84vw); flex: none; text-align: start; margin-block: 0;
  background: #F7F2F1; color: var(--ink); border-radius: calc(var(--radius) * .85); padding: 30px;
  display: flex; flex-direction: column; gap: 1.1rem;
  transition: transform .35s var(--ease), background-color .35s;
}
@media (hover: hover) and (pointer: fine) { .quote-card:hover { transform: translateY(-6px); background: #FCE8E8; } }
.quote-card .mark { font-family: 'Karantina', var(--font); font-weight: 700; font-size: 110px; line-height: .5; color: var(--red); height: 40px; }
.quote-card blockquote { margin: 0; font-size: 1.125rem; line-height: 1.6; font-weight: 500; }
/* the rail fades out at both edges (from Bar's version) */
.rail { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rail-controls { display: flex; justify-content: center; }
/* icon only (Bar 2026-10-18); 48px round, so it is easy to hit and its name comes from aria-label */
.rail-toggle { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; color: var(--ink); background: var(--white); border: 1.5px solid #F1D3D3; border-radius: 50%; cursor: pointer; margin-block-start: 1.2rem; transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .12s var(--ease); }
.rail-icon { width: 18px; height: 18px; fill: currentColor; flex: none; }
.rail-toggle .i-play, .rail-toggle[data-paused] .i-pause { display: none; }
.rail-toggle[data-paused] .i-play { display: inline; }
@media (hover: hover) and (pointer: fine) { .rail-toggle:hover { border-color: var(--red); background: #FFF7F7; } }
@media (max-width: 899px) {
  .rail { overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .js-motion .rail-track { animation: none; }
  .quote-card { scroll-snap-align: center; }
  .quote-card:first-child { margin-inline-start: 0; }
  .rail-track { padding-inline-end: var(--gutter); }
  .quote-card[aria-hidden="true"] { display: none; }
  .rail-controls { display: none; }
}
.final-cta { display: flex; justify-content: center; margin-block-start: clamp(2.5rem, 6vw, 4rem); }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); color: var(--white); overflow: hidden; padding-block-start: clamp(3.5rem, 7vw, 5.5rem); display: flex; flex-direction: column; }
.footer-word {
  order: 3; font-weight: 900; color: var(--red); white-space: nowrap; letter-spacing: -.05em;
  font-size: clamp(3.4rem, 15vw, 15rem); line-height: .8; margin: .2rem 0 -0.12em; text-align: center;
}
.footer-grid { display: grid; gap: 2.5rem; padding-block-end: 2.5rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-brand img { width: clamp(120px, 12vw, 150px); height: auto; margin-block-end: 1rem; }
.footer-motto { font-weight: 800; font-size: var(--step-2); line-height: 1.2; letter-spacing: -.015em; margin-block-end: .4rem; }
.footer-area { color: rgb(255 255 255 / .72); }
.footer-h { font-weight: 500; font-size: .95rem; color: rgb(255 255 255 / .6); margin-block-end: 1rem; }
.site-footer ul { display: grid; gap: .55rem; }
.site-footer ul a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-footer ul a:hover { color: #FF8A8D; } }
.socials a { display: inline-flex; align-items: center; gap: .6rem; }
/* (Bar 2026-10-18) both footer columns use the same row height, so each social link sits level with its nav link */
.footer-grid :is(nav, div) > ul li { display: flex; align-items: center; min-height: 2rem; }
.socials svg { width: 22px; height: 22px; flex: none; }
.footer-bottom { border-block-start: 1px solid rgb(255 255 255 / .16); padding-block: 1.2rem .3rem; font-size: .9rem; color: rgb(255 255 255 / .65); }
.footer-bottom p { margin: 0; }
.site-footer :focus-visible { outline-color: var(--white); }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed; inset-block-end: calc(22px + env(safe-area-inset-bottom, 0px)); left: calc(22px + env(safe-area-inset-left, 0px)); z-index: 45;
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--red); color: var(--white); box-shadow: 0 14px 30px -10px rgb(227 20 26 / .6);
  opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), background-color .3s;
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .wa-float:hover { background: var(--red-deep); } }
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--red); opacity: 0; }
.wa-float.is-pulsing::after { animation: pulse 1.6s var(--ease) .4s 2; } /* twice as it appears (main.js), no endless loop: accessibility, Bar 2026-10-16 */
@keyframes pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.menu-open .wa-float { opacity: 0; pointer-events: none; }

/* ---------- Dialogs ---------- */
.modal { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); max-height: 92svh; overflow: visible; }
.modal::backdrop { background: rgb(20 20 20 / .7); backdrop-filter: blur(4px); }
.modal[open] .modal-box { animation: pop .45s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(10px); } }
.modal-box { background: var(--white); border-radius: var(--radius); padding: 1.5rem; position: relative; max-height: 92svh; overflow: auto; overscroll-behavior: contain; }
.modal-title { font-weight: 800; font-size: var(--step-2); margin-block-end: 1rem; padding-inline-end: 3rem; }
.modal-close {
  position: absolute; inset-block-start: .9rem; inset-inline-end: .9rem; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--soft); font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink);
}
@media (hover: hover) and (pointer: fine) { .modal-close:hover { background: var(--ink); color: var(--white); } }
.modal-wide img { width: 100%; height: auto; border-radius: 12px; touch-action: pinch-zoom; }
.modal-quote { max-width: 640px; padding: 3.2rem 2rem 2rem; }
.quote-full { margin: 0 0 1rem; font-size: var(--step-1); line-height: 1.65; }
.modal-quote .quote-src { font-weight: 500; color: var(--red-deep); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-property: opacity, color, background-color, border-color, box-shadow !important; transition-duration: .2s !important; }
}

/* =========================================================
   About page (about.html)
   ========================================================= */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.h3 { font-weight: 800; font-size: var(--step-2); line-height: 1.2; letter-spacing: -.015em; margin-block-end: 1.4rem; }

.hero-about .hero-title { margin-block-end: 0; }
.hero-about .hero-title-sub { font-size: var(--step-2); font-weight: 500; color: var(--red-deep); }
.hero-about .hero-media img { object-position: 50% 35%; }

/* Story */
.story { overflow-x: clip; } /* the facts slide in from the side without widening the page on phones */
.story-grid { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 900px) {
  .story-grid { grid-template-columns: .85fr 1.15fr; align-items: start; }
  .story-head { position: sticky; inset-block-start: calc(var(--header-h) + 2rem); }
}
.facts-stack { grid-template-columns: 1fr; gap: 1.2rem; margin-block-start: 1.6rem; border-block-start-color: var(--line); }
.facts-stack > div { display: flex; align-items: baseline; gap: 1rem; }
.facts-stack dd { margin: 0; color: var(--muted); }
.story-lead { font-weight: 800; font-size: var(--step-1); color: var(--red-deep); margin-block-end: .6em; }
.story-body p[data-read] { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.75; }
.story-body .wd { transition: color .3s; }
.js-motion .story-body .wd { color: #6E6E73; } /* still readable before its turn (4.8:1, accessibility, Bar 2026-10-18) */
.js-motion .story-body .wd.on { color: var(--ink); }

/* Why capoeira */
.why { background: var(--soft); }
.why { overflow-x: clip; }
.why-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
/* the photo takes most of the row and the extra width of big screens (Bar, 2026-10-13: bigger again) */
@media (min-width: 900px) { .why-grid { grid-template-columns: 1.9fr 1fr; gap: clamp(2.5rem, 4vw, 4rem); } }
@media (min-width: 1320px) { .why .why-grid { width: min(100% - 2 * var(--gutter), 1560px); } }
.why-photo { aspect-ratio: 4 / 3; will-change: transform; }
.why-photo img { transform-origin: 50% 60%; }
.why-lead { font-weight: 800; font-size: var(--step-2); line-height: 1.3; letter-spacing: -.015em; }
.why-text p:not(.why-lead) { color: var(--muted); }
.values { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: 1.6rem; }
.values li { background: var(--white); border-radius: 999px; padding: .4em 1.2em; font-weight: 800; color: var(--red-deep); }

/* Method: the red panel with a portrait video */
.method { padding-block: clamp(5rem, 10vw, 8rem) 0; }
.method-grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.method-media { border-radius: calc(var(--radius) * .8); overflow: hidden; aspect-ratio: 9 / 16; max-height: 78vh; width: min(100%, 420px); justify-self: center; background: var(--red-deep); }
.method-media video { width: 100%; height: 100%; object-fit: cover; }
.method-text .h2 { color: var(--white); }
.method-lead { font-size: var(--step-1); font-weight: 500; line-height: 1.6; }
.method-text p:not(.method-lead):not(.method-close) { color: var(--white); }
.method-close { font-weight: 900; font-size: var(--step-2); line-height: 1.25; letter-spacing: -.02em; margin: 1.6rem 0 0; }
@media (min-width: 900px) { .method-grid { grid-template-columns: .8fr 1.2fr; } }

/* Gallery carousel */
.gallery { overflow: hidden; }
.gallery-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-block-end: clamp(1.6rem, 3vw, 2.4rem); }
.gallery-head .h2 { margin: 0; }
.carousel-nav { display: flex; gap: .6rem; }
.round-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--white); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: background-color .25s, color .25s, opacity .25s;
}
.round-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .round-btn:hover { background: var(--ink); color: var(--white); } }
.round-btn:disabled { opacity: .3; cursor: default; background: var(--white); color: var(--ink); }
.carousel {
  display: flex; gap: clamp(.8rem, 1.5vw, 1.2rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* starts close to the right edge of the screen rather than under the heading (Bar, 2026-10-13) */
  padding-inline: clamp(1rem, 3vw, 2.5rem) max(var(--gutter), (100vw - var(--max)) / 2); scroll-padding-inline: clamp(1rem, 3vw, 2.5rem) max(var(--gutter), (100vw - var(--max)) / 2);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; } /* mouse drag scrolls, never drags the photo */
.slide { flex: none; scroll-snap-align: start; }
.slide-btn { display: block; padding: 0; border: 0; background: var(--soft); border-radius: calc(var(--radius) * .8); overflow: hidden; cursor: zoom-in; height: clamp(300px, 64svh, 620px); }
.slide-btn img { height: 100%; width: auto; max-width: none; object-fit: cover; transition: transform .8s var(--ease); }
@media (hover: hover) and (pointer: fine) { .slide-btn:hover img { transform: scale(1.04); } }
@media (max-width: 699px) { .slide-btn { height: 58svh; max-width: 86vw; } .slide-btn img { width: 100%; } }
.carousel-progress { height: 3px; border-radius: 3px; background: var(--line); margin-block-start: 1.6rem; overflow: hidden; }
.carousel-progress i { display: block; height: 100%; width: 100%; background: var(--red); transform-origin: right; transform: scaleX(.1); transition: transform .3s var(--ease); }

/* Through others' eyes */
.others { background: var(--paper); border-block-start: 1px solid var(--line); }
.others-title { max-width: 18ch; }
.others-block { margin-block-start: clamp(3rem, 6vw, 4.5rem); }
.others .rail { padding-block-start: 1rem; }
.letters { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .letters { grid-template-columns: 1fr 1fr; } }
.letter { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: clamp(1rem, 2.5vw, 1.8rem); background: var(--soft); border-radius: var(--radius); padding: clamp(1rem, 2.5vw, 1.6rem); align-items: start; }
.letter-page { padding: 0; border: 0; background: var(--white); border-radius: 10px; overflow: hidden; cursor: zoom-in; box-shadow: 0 12px 30px -18px rgb(20 20 20 / .4); transition: transform .4s var(--ease); }
@media (hover: hover) and (pointer: fine) { .letter-page:hover { transform: translateY(-4px) rotate(-1deg); } }
.letter-page img { width: 100%; height: auto; }
.letter-org { font-weight: 800; margin-block-end: .6rem; }
.letter blockquote { margin: 0 0 .8rem; font-size: 1.05rem; line-height: 1.6; }
.letter blockquote::before { content: '"'; display: block; font-weight: 900; color: var(--red); font-size: 2.8rem; line-height: .6; margin-block-end: .2rem; }
.letter-sign { font-size: .95rem; color: var(--muted); }
.letter-actions { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-block-start: .4rem; }
.letter-more { font-weight: 600; }
button.text-link { background: none; border-inline: 0; border-block-start: 0; padding-inline: 0; font: inherit; font-weight: 500; cursor: pointer; }
.muted-link { color: var(--muted); }
@media (max-width: 520px) { .letter { grid-template-columns: 1fr; } .letter-page { max-width: 220px; } }
.certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr)); gap: clamp(.7rem, 1.4vw, 1.1rem); }
/* wide screens: five a row, the shorter last row centred (Bar, 2026-10-13) */
@media (min-width: 900px) {
  .certs { display: flex; flex-wrap: wrap; justify-content: center; --cg: clamp(.7rem, 1.4vw, 1.1rem); }
  .certs li { flex: 0 0 calc((100% - 4 * var(--cg)) / 5); }
}
.cert { display: block; width: 100%; padding: 0; border: 0; background: var(--soft); border-radius: calc(var(--radius) * .6); overflow: hidden; aspect-ratio: 3 / 4; cursor: zoom-in; }
.cert img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
@media (hover: hover) and (pointer: fine) { .cert:hover img { transform: scale(1.05); } }

/* Lightbox + letter dialog */
.lightbox-box { padding: 1rem; display: grid; gap: .8rem; justify-items: center; }
.lightbox-fig { margin: 0; display: grid; gap: .6rem; justify-items: center; }
.lightbox-fig img { max-height: 76svh; width: auto; max-width: 100%; border-radius: 12px; }
.lightbox-fig figcaption { color: var(--muted); font-size: .95rem; text-align: center; max-width: 60ch; padding-inline: 3rem; }
.lightbox-nav { display: flex; gap: .6rem; }
.letter-box { max-width: 760px; }
.letter-box img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; margin-block-end: 1rem; }
@media (max-width: 899px) { .method-media { width: min(100%, 300px); max-height: none; } }

/* ---------- "תנועה בקצב הלב" in Hebrew handwriting (Gveret Levin) (wins over both font versions) ---------- */
.text-red { color: var(--red); }
.ran .ran-method-name, .tile-edu .edu-name, .act-edu .edu-name {
  font-family: 'Gveret Levin', var(--font); font-weight: 400; letter-spacing: 0;
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.8rem); line-height: 1.2;
}
/* about page: the method's name in the same handwriting, on its own line */
.method .method-name { display: block; font-family: 'Gveret Levin', var(--font); font-weight: 400; letter-spacing: 0; font-size: 1.08em; line-height: 1.25; margin-block-start: .15em; }
@media (min-width: 900px) { .method .method-name { white-space: nowrap; font-size: .9em; } }

/* Gallery arrows: white circles with a soft red ring and a red arrow, filled red on hover */
.car-btn { width: 56px; height: 56px; border: 1.5px solid #F1D3D3; color: var(--red); box-shadow: 0 6px 18px rgb(120 20 20 / .08); }
.car-btn svg { width: 22px; height: 22px; stroke-width: 2.2; }
@media (hover: hover) and (pointer: fine) { .car-btn:not(:disabled):hover { background: var(--red); border-color: var(--red); color: var(--white); } }
.car-btn:disabled { opacity: .35; box-shadow: none; color: var(--red); }
@media (max-width: 699px) { .car-btn { width: 48px; height: 48px; } }

/* ---------- "Read more" (about page, phones only; Bar 2026-10-13): on wide screens everything shows ---------- */
.more-btn { display: none; }
@media (max-width: 899px) {
  .readmore { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
  .readmore.is-open { grid-template-rows: 1fr; }
  .more-inner { overflow: hidden; min-height: 0; }
  .more-btn { display: inline-flex; margin-block: .4rem 1.2rem; font-weight: 700; }
  .readmore.is-open + .more-btn { margin-block-start: 1rem; }
  /* the method: title centred, the method's name on one line, the closing line centred in two lines */
  .method-text .h2 { text-align: center; }
  .method .method-name { white-space: nowrap; font-size: .82em; }
  .method-text .more-btn { display: flex; margin-inline: auto; }
  .method-close { text-align: center; }
  .method-close .close-line { display: block; }
}
@media (prefers-reduced-motion: reduce) { .readmore { transition: none; } }

/* =========================================================
   Activities page (activities.html) and contact page (contact.html)
   ========================================================= */
.hero-page { padding-block-end: clamp(3rem, 6vw, 5rem); }
/* things that slide in from the side never widen the page on phones */
.hero-page, .act, .act-edu, .where, .follow { overflow-x: clip; }
.hero-page .hero-title-main { max-width: none; }

/* the five activities as picture links under the title */
.act-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.6rem, 1.2vw, 1rem); margin-block-start: clamp(2rem, 4vw, 3.2rem); }
.act-index a { display: flex; flex-direction: column; gap: .7rem; text-decoration: none; font-weight: 800; line-height: 1.2; -webkit-touch-callout: none; touch-action: manipulation; }
.act-index img { -webkit-user-drag: none; }
.act-index a:active img, .act-index a:active .act-index-heart { scale: .97; }
.place:active { scale: .98; }
.act-index img, .act-index-heart { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius) * .6); background: var(--soft); transition: transform .6s var(--ease), border-radius .6s var(--ease), scale .15s var(--ease); }
.act-index-heart { background: var(--red); display: grid; place-items: center; padding: 0 12%; }
.act-index-heart svg { width: 100%; height: auto; overflow: visible; }
.act-index-heart path { fill: none; stroke: var(--white); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.act-index span { display: flex; align-items: center; gap: .4rem; }
.act-index span::after { content: ""; flex: none; width: .5em; height: .5em; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: translateY(-.15em) rotate(45deg); transition: transform .3s var(--ease); } /* points down: the link jumps further down the page */
@media (hover: hover) and (pointer: fine) {
  .act-index a:hover img, .act-index a:hover .act-index-heart { transform: translateY(-6px); border-radius: calc(var(--radius) * 1.2); }
  .act-index a:hover span::after { transform: translateY(.1em) rotate(45deg); }
}

/* one section per activity: photo and words side by side, alternating */
.act:nth-of-type(even) { background: var(--soft); }
.act-grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .act-grid { grid-template-columns: 1.9fr 1fr; gap: clamp(2.5rem, 4vw, 4rem); }
  .act-flip .act-photo { order: 2; }
  .act-flip .act-grid { grid-template-columns: 1fr 1.9fr; }
  .act-tall .act-grid { grid-template-columns: .75fr 1fr; }
}
.act-photo { aspect-ratio: 4 / 3; will-change: transform; }
/* big photos get the same wide row as the "why capoeira" section on the about page (Bar, 2026-10-14); the events photo keeps its size */
@media (min-width: 1320px) { .act:not(.act-tall) .act-grid { width: min(100% - 2 * var(--gutter), 1560px); } }
.act-tall .act-photo { aspect-ratio: 4 / 5; width: min(100%, 64vh); justify-self: center; }
.act-tall .act-photo img { object-position: 50% 35%; }
.act-text { max-width: 36rem; }
.act-text .h2 { margin-block-end: .3em; }
.act-lead { font-size: var(--step-2); color: var(--red-deep); line-height: 1.2; margin-block-end: 1rem; }
.act-text > p:not(.act-lead), .act-text .readmore p { color: var(--muted); }
.act-list { display: grid; gap: .55rem; color: var(--muted); margin-block-end: .55rem; }
.act-list li { padding-inline-start: 1.2rem; position: relative; }
.act-list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.act-cta { margin-block-start: .5rem; }
.tag-white { background: var(--white); color: var(--red-deep); }

/* the education programme: the red panel */
.act-edu { padding-block: clamp(5rem, 10vw, 8rem); }
.edu-panel :focus-visible { outline-color: var(--white); }
.edu-panel .edu-plan :focus-visible { outline-color: var(--red); }
.edu-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .edu-grid { grid-template-columns: 1.35fr 1fr; } .edu-plan { position: sticky; inset-block-start: calc(var(--header-h) + 2rem); } }
.edu-text .h2 { color: var(--white); margin-block-end: .2em; }
.edu-text p:not(.edu-visual) { font-size: var(--step-1); line-height: 1.65; }
.edu-text .edu-visual { margin-block-end: 1.6rem; }
/* the heartbeat line spans exactly the width of "תנועה בקצב הלב" above it (Bar 2026-10-19) */
.edu-text .edu-visual { width: fit-content; max-width: 100%; }
.edu-text .pulse { width: 0; min-width: 100%; max-width: none; margin-block-start: .4rem; } /* width 0 + min-width: the line never widens the title box */
.edu-plan { background: var(--white); color: var(--ink); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: 0 30px 60px -30px rgb(60 0 0 / .55); }
.edu-plan-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-block-end: 1rem; }
.edu-plan-h { font-size: var(--step-2); line-height: 1.1; }
.edu-plan-pill { font-family: var(--font); font-size: .9rem; font-weight: 800; background: #FCE8E8; color: var(--red-deep); border-radius: 999px; padding: .2em .8em; }
.edu-plan-big { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); line-height: 1; margin-block-end: .8rem; }
.edu-plan-big b { color: var(--red); font-size: 1.5em; }
.edu-plan-big i { font-style: normal; color: var(--muted); margin-inline: .1em; }
.edu-plan p:not(.edu-plan-big) { color: var(--muted); }

.act-end-in { text-align: center; display: grid; justify-items: center; }
.act-end-in .lead { margin-block-end: 2rem; }

/* ---------- Contact ---------- */
.contact-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-block-start: clamp(1.8rem, 4vw, 2.8rem); }
.contact-cta .btn { gap: .7rem; }
.contact-cta .wa-icon { width: 1.5em; height: 1.5em; background: none; color: var(--white); padding: 0; border-radius: 0; box-sizing: border-box; } /* plain white glyph, no green circle (Bar, 2026-10-14) */
.contact-phone { margin: 0; color: var(--muted); font-weight: 600; }
.contact-phone a { color: var(--ink); font-weight: 800; text-underline-offset: .2em; display: inline-flex; align-items: center; min-height: 44px; padding-inline: .25em; }

.where { background: var(--soft); }
.where-head { margin-block-end: clamp(1.8rem, 4vw, 3rem); }
.where-head .lead { margin: 0; }
.where-grid { display: grid; gap: 1.2rem clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 900px) { .where-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
.places { display: grid; gap: .7rem; }
.place {
  width: 100%; font: inherit; text-align: start; cursor: pointer; border: 0; border-radius: calc(var(--radius) * .7);
  background: var(--white); color: var(--ink); padding: 1.1rem 1.2rem; display: grid; grid-template-columns: auto 1fr; gap: .1rem .9rem; align-items: center;
  box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .3s, color .3s, box-shadow .3s, translate .3s var(--ease), scale .15s var(--ease);
}
/* (hover moves use `translate`, not `transform`: a CSS transition on transform confuses the GSAP entrance) */
.place svg { grid-row: span 2; width: 28px; height: 28px; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.place-name { font-size: 1.9rem; line-height: 1; }
.place-days { color: var(--muted); font-weight: 600; font-size: .98rem; transition: color .3s; }
.place[aria-pressed="true"] { background: var(--red); color: var(--white); box-shadow: 0 18px 36px -20px rgb(150 10 10 / .7); }
.place[aria-pressed="true"] svg { stroke: var(--white); }
.place[aria-pressed="true"] .place-days { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .place[aria-pressed="false"]:hover { box-shadow: inset 0 0 0 1.5px var(--ink); translate: -4px 0; } }
.map-frame { border-radius: var(--radius); overflow: hidden; background: #E9E7E1; aspect-ratio: 16 / 10; box-shadow: 0 30px 60px -40px rgb(20 20 20 / .5); }
.map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: 1rem; }

.follow-list { display: grid; gap: clamp(.9rem, 1.6vw, 1.3rem); }
@media (min-width: 700px) { .follow-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.follow-card {
  position: relative; display: grid; gap: .3rem; text-decoration: none; color: var(--ink); background: var(--white);
  border-radius: var(--radius); padding: clamp(1.6rem, 3.5vw, 2.6rem); box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background-color .35s, color .35s, box-shadow .35s, translate .5s var(--ease), scale .3s var(--ease);
}
.follow-icon { width: 54px; height: 54px; padding: 12px; border-radius: 50%; background: var(--red); color: var(--white); margin-block-end: .9rem; transition: background-color .35s, color .35s; }
.follow-name { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); line-height: 1; }
.follow-handle { color: var(--muted); font-weight: 600; transition: color .35s; justify-self: start; }
.follow-arrow { position: absolute; inset-block-start: clamp(1.4rem, 3vw, 2.2rem); inset-inline-end: clamp(1.4rem, 3vw, 2.2rem); width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .follow-card:hover { background: var(--red); color: var(--white); box-shadow: none; translate: 0 -4px; }
  .follow-card:hover .follow-icon { background: var(--white); color: var(--red); }
  .follow-card:hover .follow-handle { color: var(--white); }
  .follow-card:hover .follow-arrow { transform: translate(-4px, -4px); }
}
.follow-card:active { scale: .98; }

/* the floating WhatsApp button keeps a paper ring, so it stays visible over the red panels */
.wa-float { box-shadow: 0 0 0 3px var(--paper), 0 14px 30px -10px rgb(227 20 26 / .6); }

/* ---------- About page on short desktop windows (Bar, 2026-10-15) ----------
   On a laptop with Windows zoom the red "תנועה בקצב הלב" card was taller than the screen, so on windows
   under 1200px tall its spacing, type and video follow the window height. Taller screens (Bar's 2560x1600)
   are untouched. (Ran's opening photo was tried here too and returned to its original look, Bar 2026-10-16.) */
@media (min-width: 900px) and (max-height: 1199px) {
  /* the red card fits the screen under the header: a slimmer video column gives the text more width */
  .method-panel { --mp: min(clamp(2.5rem, 7vw, 6.5rem), max(1.5rem, 7.2vh)); padding-block: var(--mp); }
  .method-grid { grid-template-columns: auto minmax(0, 1fr); }
  .method-media { --mh: min(78vh, calc(100svh - var(--header-h) - 2 * var(--mp) - 1.5rem)); max-height: var(--mh); width: min(420px, 32vw, calc(var(--mh) * 9 / 16)); }
  .method-text .h2 { font-size: clamp(2.3rem, min(2rem + 3.3vw, 8.5vh), 4.8rem); }
  .method-text p:not(.method-close) { font-size: clamp(1rem, min(1.3rem, 2.8vh), 1.3rem); line-height: 1.55; }
  .method-close { font-size: clamp(1.5rem, min(1.6rem + 1.4vw, 4.6vh), 2.7rem); margin-block-start: min(1.6rem, 2.6vh); }
}

/* Hero photo depth (about page, 2026-10-15): the img is a little taller than its frame and js/main.js
   moves it with --hm-y, so the drift never shows an empty edge */
.hero-about [data-hero-media] img { height: 108%; translate: 0 var(--hm-y, -7%); scale: var(--hm-s, 1); }

/* ---------- Accessibility round (Bar, 2026-10-16) ---------- */
/* looping videos: a small pause / play icon in the corner (moving content needs a way to stop it) */
.age-media, .method-media { position: relative; }
.vid-toggle {
  position: absolute; inset-block-end: 12px; inset-inline-end: 12px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--white); background: rgb(20 20 20 / .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color .25s var(--ease), transform .12s var(--ease);
}
.vid-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.vid-toggle .i-play, .vid-toggle[aria-pressed="true"] .i-pause { display: none; }
.vid-toggle[aria-pressed="true"] .i-play { display: inline; }
.vid-toggle:active { transform: scale(.92); }
.vid-toggle:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
@media (hover: hover) and (pointer: fine) { .vid-toggle:hover { background: var(--red); } }

/* phone schedule row: it can be reached with Tab and scrolled with the arrow keys (js/mobile.js) */
.days:focus-visible { outline-offset: -3px; }

/* footer: legal pages and credit */
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 2rem; }
.site-footer .footer-legal { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.footer-legal a { display: inline-block; padding-block: .35rem; color: inherit; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .35); text-underline-offset: .25em; }
@media (hover: hover) and (pointer: fine) { .footer-legal a:hover { color: var(--white); text-decoration-color: currentColor; } }
@media (max-width: 899px) {
  .footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: .1rem; }
  .site-footer .footer-legal { justify-content: center; gap: 0 1.1rem; }
}

/* contact page: "rate us on Google" */
.review-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 3rem;
  margin-block-start: clamp(1.6rem, 3vw, 2.4rem); padding: clamp(1.4rem, 3.5vw, 2.4rem); border-radius: var(--radius); background: var(--soft);
}
.review-strip p { margin: 0; }
.review-q { font-weight: 800; font-size: var(--step-2); line-height: 1.25; letter-spacing: -.015em; }
.review-sub { color: var(--muted); margin-block-start: .2rem !important; }
.review-stars { display: flex; gap: 3px; margin-block-end: .5rem; color: var(--red); }
.review-stars svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 899px) { .review-strip { padding: 1.3rem; gap: 1rem; } .review-strip .btn { width: 100%; } }

/* legal pages (accessibility statement, privacy, terms) */
.legal { padding-block: 0 clamp(4rem, 8vw, 7rem); }
.legal-body { max-width: 46rem; }
.legal-updated { color: var(--muted); font-weight: 600; margin-block-end: 2rem; }
.legal-body h2 { font-weight: 900; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1.1; margin: 2.4rem 0 .7rem; }
.legal-body h3 { font-weight: 800; font-size: var(--step-1); margin: 1.6rem 0 .4rem; }
.legal-body p, .legal-body li { color: #3C3C40; }
.legal-body ul { display: grid; gap: .45rem; margin: 0 0 1.2em; }
.legal-body li { padding-inline-start: 1.2rem; position: relative; }
.legal-body li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.legal-body a { color: var(--red-deep); font-weight: 600; text-underline-offset: .2em; }
.legal-contact { background: var(--soft); border-radius: calc(var(--radius) * .7); padding: 1.3rem 1.5rem; margin-block: 1rem 1.5rem; }
.legal-contact p { margin: 0 0 .3rem; }
.legal-contact p:last-child { margin: 0; }

/* error page */
.err { padding-block: 0 clamp(4rem, 8vw, 7rem); }
.err-code { display: block; margin: 0 0 .2rem; font-weight: 900; font-size: clamp(6rem, 3rem + 14vw, 14rem); line-height: .85; letter-spacing: -.04em; color: var(--red); }
.err .lead { margin-block-end: 2rem; }
.err-links { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-block-start: 2.4rem; padding-block-start: 1.4rem; border-block-start: 1px solid var(--line); }
.err-links a { font-weight: 700; color: var(--ink); text-underline-offset: .25em; padding-block: .3rem; display: inline-block; }

/* "גרסת טקסט" in the letter dialog and the lightbox: the full wording of a scanned page (accessibility, Bar 2026-10-18) */
.text-toggle { display: inline-flex; align-items: center; gap: .5em; }
.text-toggle svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; flex: none; }
.text-toggle[data-on] { --bg: var(--ink); --fg: var(--white); }
.text-toggle[hidden], .letter-box img[hidden], .lightbox-fig[hidden], .long-text[hidden] { display: none; }
.letter-box .text-toggle { margin-block-end: 1rem; }
.long-text { max-width: 62ch; font-size: 1.05rem; line-height: 1.75; text-align: start; }
.long-text h3 { font-weight: 800; font-size: var(--step-1); line-height: 1.3; margin-block: .6em .5em; }
.long-text p, .long-text ul { margin: 0 0 .9em; }
.long-text ul { padding-inline-start: 1.3em; list-style: disc; }
.long-text .lt-meta { color: var(--muted); font-size: .95rem; }
.long-text .lt-sign { margin-block-start: 1.4em; }
.lightbox-box .long-text { width: min(62ch, 86vw); padding-inline: .4rem; }