/* GENERATED by scripts/build_static.py from the files named below —
   edit those, not this, then run the script. */

/* ── css/fonts.css ── */
/* ============================================================
   FONTS — served from this site, not from Google Fonts.

   One request fewer before the page can draw (Google's stylesheet blocked
   rendering, from another server), and no visitor's browser contacts Google
   just to read the site — as the privacy policy promises.

   Files: assets/fonts/, Hebrew and Latin subsets only (the site is in
   Hebrew and English); a browser downloads only the files a page uses.
   Heebo and DM Sans are variable fonts — one file covers every weight.
   All four families are under the SIL Open Font License 1.1
   (assets/fonts/OFL-*.txt), which allows serving them like this.
   ============================================================ */

@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

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

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

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

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

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

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

/* ── css/base.css ── */
/* ============================================================
   BASE — variables, reset, shared elements (buttons, sections)
   ============================================================ */
:root {
  --yellow: #F5C800;
  --yellow-dim: #c9a300;
  --black: #0a0a0a;
  --dark: #111111;
  --dark2: #1a1a1a;
  --dark3: #222222;
  --white: #f0f0f0;
  --grey: #888;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
  cursor: default;
}

/* Noise overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 1;
}

/* ─── Section scaffolding ─── */
section:not(.hero):not(.schedule) { padding: 100px 5%; }

.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 16px;
}
.section-label::before {
  content: ''; display: block; width: 24px; height: 1px; background: var(--yellow);
}
.section-title {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--white); margin-bottom: 20px;
}
.section-title .accent { color: var(--yellow); }

/* ─── Shared buttons ─── */
.btn-primary {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 16px 36px;
  background: var(--yellow); color: var(--black);
  border: none; cursor: pointer;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  transition: all 0.25s;
  text-decoration: none; display: inline-block;
}
.btn-primary:hover {
  background: #fff; transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(245,200,0,0.25);
}
.btn-secondary {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 15px 32px;
  background: transparent; color: var(--white);
  border: 1px solid rgba(255,255,255,0.25); cursor: pointer;
  transition: all 0.25s; text-decoration: none; display: inline-block;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
.btn-secondary:hover { border-color: var(--yellow); color: var(--yellow); }
.btn-dark {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 16px 40px;
  background: var(--black); color: var(--yellow);
  border: none; cursor: pointer;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  transition: all 0.25s; text-decoration: none;
  display: inline-block; position: relative;
}
.btn-dark:hover { background: var(--dark2); transform: translateY(-2px); }

/* ─── Scroll-in animation ─── */
.fade-in {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ─── Responsive shared ─── */
@media (max-width: 760px) {
  /* Tighter section padding on phones */
  section:not(.hero):not(.schedule) { padding: 64px 6%; }
  .section-title { font-size: clamp(2rem, 8vw, 3rem); }
  .btn-primary, .btn-secondary, .btn-dark { padding: 14px 26px; font-size: 0.85rem; }
}
@media (max-width: 420px) {
  section:not(.hero):not(.schedule) { padding: 52px 6%; }
}

/* ── css/logo.css ── */
/* ============================================================
   LOGO — single source for the academy mark.
   Converted from logo.pdf into several web-sized PNGs by
   convert_logo.py. Every logo on the site uses the .logo-img
   class; per-use sizing is set in each section's CSS.

   To regenerate after replacing logo.pdf:
       python convert_logo.py

   Available files (frontend/assets/img/):
       logo-512.png  512px  (about panel — renders large)
       logo.png      320px  (hero)
       logo-160.png  160px
       logo-96.png    96px  (footer)
       logo-48.png    48px  (navbar)
       favicon-32.png 32px  (browser tab)
   ============================================================ */
:root {
  /* Default / largest. Sections below override with a smaller file. */
  --logo: url("../assets/img/logo.png");
  --logo-512: url("../assets/img/logo-512.png");
  --logo-160: url("../assets/img/logo-160.png");
  --logo-96: url("../assets/img/logo-96.png");
  --logo-48: url("../assets/img/logo-48.png");
}

/* WebP copies are a tenth of the size (logo-512: 298 KB → 29 KB). Browsers
   that understand image-set() with type() take them; older ones keep the PNGs
   above. Regenerate both when the logo changes (convert_logo.py, then save
   each PNG as WebP). */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  :root {
    --logo: image-set(url("../assets/img/logo.webp") type("image/webp"), url("../assets/img/logo.png") type("image/png"));
    --logo-512: image-set(url("../assets/img/logo-512.webp") type("image/webp"), url("../assets/img/logo-512.png") type("image/png"));
    --logo-160: image-set(url("../assets/img/logo-160.webp") type("image/webp"), url("../assets/img/logo-160.png") type("image/png"));
    --logo-96: image-set(url("../assets/img/logo-96.webp") type("image/webp"), url("../assets/img/logo-96.png") type("image/png"));
    --logo-48: image-set(url("../assets/img/logo-48.webp") type("image/webp"), url("../assets/img/logo-48.png") type("image/png"));
  }
}

.logo-img {
  background-image: var(--logo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  display: block;
}

/* Use a source image ~2× the display size so the small logos stay crisp on
   high-DPI / retina phone screens (navbar shows 48px, footer ~80px). */
.nav-logo .logo-img    { background-image: var(--logo-96); }   /* 48px box */
.footer-brand .logo-img { background-image: var(--logo-160); } /* ~80px box */
/* About panel renders large (~400px) — use the 512px file so it stays sharp */
.about-img-frame .logo-img { background-image: var(--logo-512); }
.hero-logo             { background-image: var(--logo); }

/* ── css/nav.css ── */
/* ============================================================
   NAVBAR
   ============================================================ */
/* Scoped to #navbar so other <nav> elements (e.g. footer legal links) are unaffected */
#navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; height: 72px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,0,0,0));
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  transition: background 0.4s, backdrop-filter 0.4s, -webkit-backdrop-filter 0.4s;
}
#navbar.scrolled {
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(245,200,0,0.15);
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.nav-logo .logo-img {
  width: 48px; height: 48px;
  filter: drop-shadow(0 0 8px rgba(245,200,0,0.4));
}
.nav-logo span {
  font-family: 'Barlow', sans-serif; font-size: 1.3rem; font-weight: 900;
  letter-spacing: -0.01em; color: var(--white);
}
.nav-logo span em { color: var(--yellow); font-style: normal; }

/* Menu container: holds links + actions. Row on desktop. */
.nav-menu { display: flex; align-items: center; gap: 32px; }

.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--grey); text-decoration: none;
  transition: color 0.2s; position: relative; white-space: nowrap;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
.nav-links a:hover { color: var(--yellow); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 14px; }

.nav-cta {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 10px 24px; background: var(--yellow); color: var(--black);
  border: none; cursor: pointer; white-space: nowrap;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { background: #fff; transform: translateY(-1px); }

/* ─── Hamburger toggle (hidden on desktop) ─── */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px;
  background: transparent; border: 1px solid rgba(245,200,0,0.4);
  border-radius: 4px; cursor: pointer; flex-shrink: 0;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--yellow); border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
/* Animate to an X when open */
#navbar.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#navbar.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
#navbar.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MOBILE NAV (≤ 1100px) — hamburger reveals a dropdown drawer

   The switch used to be at 900px, but the row did not actually fit that
   narrow: measured at 901px the navbar overflowed its own box by 103px with
   #navbar's overflow clipped, so the links nearest the edge were cut off and
   unreachable — a small-laptop-only bug that predates the Membership link.
   Adding a seventh link pushed the true fit boundary to ~1050px, so the
   drawer now takes over below 1100 where every item is reachable.
   ============================================================ */
@media (max-width: 1100px) {
  .nav-toggle { display: flex; }

  .nav-menu {
    position: fixed; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(10,10,10,0.99);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(245,200,0,0.2);
    padding: 8px 5% 24px;
    max-height: calc(100vh - 72px); overflow-y: auto;
    /* Hidden by default: collapsed + non-interactive */
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
  }
  #navbar.menu-open .nav-menu {
    transform: translateY(0); opacity: 1; visibility: visible;
  }

  .nav-links {
    flex-direction: column; gap: 0; width: 100%;
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block; padding: 16px 4px; font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-links a::after { display: none; }

  .nav-actions {
    width: 100%; margin-top: 18px; gap: 12px;
  }
  .lang-toggle { flex-shrink: 0; }
  .nav-cta { flex: 1; text-align: center; padding: 14px 24px; font-size: 0.9rem; }
}

/* ── css/hero.css ── */
/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh; display: grid; place-items: center;
  position: relative; overflow: hidden; background: var(--black);
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 48px,
    rgba(245,200,0,0.025) 48px, rgba(245,200,0,0.025) 50px);
  pointer-events: none;
}
.hero-glow {
  position: absolute; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(245,200,0,0.12) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -55%); pointer-events: none;
}
.hero-content {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 60px;
  max-width: 1200px; padding: 100px 5% 60px; width: 100%;
}
.hero-text { flex: 1; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--yellow); margin-bottom: 20px;
}
.hero-tag::before { content: ''; display: block; width: 32px; height: 1px; background: var(--yellow); }
.hero-title {
  font-family: 'Barlow', sans-serif; font-size: clamp(4rem, 9vw, 8.5rem);
  font-weight: 900; line-height: 0.9; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--white); margin-bottom: 24px;
}
.hero-title .accent { color: var(--yellow); }
.hero-sub {
  font-size: 1.05rem; font-weight: 300; line-height: 1.7;
  color: #aaa; max-width: 440px; margin-bottom: 40px;
}
.hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

.hero-logo-wrap { flex: 0 0 380px; display: flex; justify-content: center; align-items: center; position: relative; }
.hero-logo-ring {
  position: absolute; width: 420px; height: 420px;
  border: 1px solid rgba(245,200,0,0.15); border-radius: 50%;
  animation: spin 30s linear infinite;
}
.hero-logo-ring2 {
  width: 360px; height: 360px; border-color: rgba(245,200,0,0.08);
  animation-duration: 20s; animation-direction: reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hero-logo {
  width: 320px; height: 320px; position: relative; z-index: 1;
  filter: drop-shadow(0 0 24px rgba(245,200,0,0.5));
  animation: pulse-glow 4s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(245,200,0,0.4)); }
  50% { filter: drop-shadow(0 0 36px rgba(245,200,0,0.7)); }
}
.hero-stats {
  display: flex; gap: 40px; margin-top: 48px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.stat-num {
  font-family: 'Barlow', sans-serif; font-size: 2.4rem; font-weight: 900;
  color: var(--yellow); line-height: 1; letter-spacing: -0.03em;
}
.stat-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--grey); margin-top: 4px;
}

@media (max-width: 900px) {
  .hero-content { flex-direction: column-reverse; gap: 40px; padding-top: 120px; }
  .hero-logo-wrap { flex: none; width: 220px; }
  .hero-logo { width: 220px; height: 220px; }
  .hero-logo-ring { width: 260px; height: 260px; }
  .hero-logo-ring2 { width: 230px; height: 230px; }
}
@media (max-width: 600px) {
  /* Tighten the hero's vertical rhythm so its two CTA buttons clear the fixed
     corner FABs (accessibility + WhatsApp) instead of sitting under them. */
  .hero-content { padding-top: 100px; gap: 26px; }
  .hero-logo-wrap { width: 150px; }
  .hero-logo { width: 150px; height: 150px; }
  .hero-logo-ring { width: 180px; height: 180px; }
  .hero-logo-ring2 { width: 160px; height: 160px; }
  .hero-title { margin-bottom: 18px; }
  .hero-sub { font-size: 0.98rem; margin-bottom: 26px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn-primary, .hero-actions .btn-secondary { flex: 1; text-align: center; }
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
  .stat-num { font-size: 1.9rem; }
}

/* ── css/strip.css ── */
/* ============================================================
   DISCIPLINES MARQUEE STRIP
   ============================================================ */
.strip { background: var(--yellow); padding: 14px 0; overflow: hidden; position: relative; }
.strip-inner { display: flex; gap: 0; width: max-content; animation: marquee 20s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.strip-item {
  font-family: 'Barlow', sans-serif; font-size: 1rem; letter-spacing: 0.25em;
  color: var(--black); padding: 0 32px; white-space: nowrap;
}
.strip-dot { color: var(--black); font-size: 0.5rem; vertical-align: middle; }

/* ── css/programs.css ── */
/* ============================================================
   PROGRAMS
   ============================================================ */
.programs { background: var(--dark); }
.programs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2px; margin-top: 60px;
}
/* The card is a <button> (it selects the discipline in the sign-up form), so
   the browser's button chrome has to be reset back to a block-level card. */
.program-card {
  background: var(--dark2); padding: 40px 32px;
  position: relative; overflow: hidden;
  transition: transform 0.3s ease; cursor: pointer;
  display: block; width: 100%; height: 100%;
  border: 0; margin: 0; font: inherit; color: inherit;
  text-align: inherit;
}
.program-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--yellow); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
}
.program-card:hover { transform: translateY(-4px); }
.program-card:hover::before { transform: scaleX(1); }
.program-icon { font-size: 2.5rem; margin-bottom: 20px; display: block; }
.program-num {
  position: absolute; top: 20px; right: 24px;
  font-family: 'Barlow', sans-serif; font-size: 5rem;
  color: rgba(245,200,0,0.05); line-height: 1; pointer-events: none;
}
.program-title {
  font-family: 'Barlow', sans-serif; font-size: 1.8rem; font-weight: 900;
  letter-spacing: -0.02em; color: var(--white); margin-bottom: 12px;
}
.program-desc { font-size: 0.9rem; line-height: 1.7; color: #777; }
.program-tag {
  display: inline-block; margin-top: 20px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--yellow);
  padding: 4px 12px; border: 1px solid rgba(245,200,0,0.3);
}

/* Links to the program pages (/jiu-jitsu, /mma…) under the cards. */
.program-pages {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: 36px; font-size: 0.95rem; color: var(--grey);
}
.program-pages a {
  color: var(--white); text-decoration: none;
  padding: 8px 16px; border: 1px solid rgba(245,200,0,0.3);
  transition: border-color 0.2s, color 0.2s;
}
.program-pages a:hover, .program-pages a:focus-visible {
  color: var(--yellow); border-color: var(--yellow);
}

/* ─── Responsive ─── */
@media (max-width: 760px) {
  .programs-grid { grid-template-columns: 1fr; margin-top: 36px; gap: 12px; }
  .program-card { padding: 32px 24px; }
  .program-title { font-size: 1.5rem; }
  .program-num { font-size: 4rem; top: 16px; right: 18px; }
}

/* ── css/about.css ── */
/* ============================================================
   ABOUT / WHY
   ============================================================ */
.about {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: center; max-width: 1200px; margin: 0 auto; padding: 100px 5%;
}
.about-visual { position: relative; padding-bottom: 20px; }
.about-visual::after {
  content: ''; position: absolute; top: -2px; right: -2px;
  width: 60px; height: 60px;
  border-top: 3px solid var(--yellow); border-right: 3px solid var(--yellow);
  pointer-events: none;
}
.about-visual::before {
  content: ''; position: absolute; bottom: 18px; left: -2px;
  width: 60px; height: 60px;
  border-bottom: 3px solid var(--yellow); border-left: 3px solid var(--yellow);
  pointer-events: none; z-index: 2;
}
.about-img-frame {
  width: 100%; aspect-ratio: 4/5; background: var(--dark3);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.about-img-frame .logo-img { width: 70%; aspect-ratio: 1; }
.about-badge {
  position: absolute; bottom: -8px; right: -20px;
  width: 120px; height: 120px; background: var(--yellow); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 3;
}
.about-badge-num { font-family: 'Barlow', sans-serif; font-size: 2.4rem; color: var(--black); line-height: 1; }
.about-badge-text {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); text-align: center;
}
.about-text p { font-size: 1rem; font-weight: 300; line-height: 1.8; color: #999; margin-bottom: 20px; }
.features-list { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.feature-item {
  display: flex; align-items: flex-start; gap: 16px; padding: 16px;
  background: var(--dark2); border-left: 2px solid var(--yellow);
}
.feature-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.feature-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin-bottom: 2px;
}
.feature-text { font-size: 0.82rem; color: #666; line-height: 1.5; }

@media (max-width: 900px) { .about { grid-template-columns: 1fr; gap: 40px; } }

/* ── css/schedule.css ── */
/* ============================================================
   SCHEDULE  — day-per-column grid (Sunday → Friday)
   ============================================================ */
.schedule { background: var(--dark); padding: 100px 5%; }
.schedule-inner { max-width: 1200px; margin: 0 auto; }
.schedule-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 48px; flex-wrap: wrap; gap: 20px;
}

/* ─── Announcement banner (admin-managed, running ticker) ─── */
.sched-announce {
  display: flex; align-items: center; gap: 14px;
  background: rgba(245,200,0,0.08);
  border: 1px solid rgba(245,200,0,0.35);
  border-radius: 6px;
  padding: 12px 16px; margin-bottom: 28px;
  overflow: hidden;
}
.sched-announce-icon { font-size: 1.2rem; flex: 0 0 auto; line-height: 1; }
.sched-announce-viewport { flex: 1 1 auto; overflow: hidden; min-width: 0; }
.sched-announce-track {
  display: flex; width: max-content;
  animation: sched-marquee 22s linear infinite;
}
.sched-announce:hover .sched-announce-track { animation-play-state: paused; }
.sched-announce-item {
  white-space: nowrap; padding: 0 40px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  letter-spacing: 0.04em; font-size: 1rem; color: var(--white);
}
@keyframes sched-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Short message that already fits: show it once, centered, no scroll. */
.sched-announce.is-static .sched-announce-track { animation: none; width: 100%; justify-content: center; }
.sched-announce.is-static .sched-announce-item { padding: 0; }
.sched-announce.is-static .sched-announce-item + .sched-announce-item { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sched-announce-track { animation: none; width: 100%; justify-content: center; }
  .sched-announce-item { padding: 0; white-space: normal; }
  .sched-announce-item + .sched-announce-item { display: none; }
}

/* ─── Adults / Kids toggle ─── */
.schedule-tabs { display: flex; gap: 8px; margin-bottom: 24px; }
.sched-tab {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #aaa; background: var(--dark2);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 3px;
  padding: 10px 24px; cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.sched-tab:hover { color: var(--white); border-color: rgba(245,200,0,0.4); }
.sched-tab.is-active {
  color: var(--black); background: var(--yellow); border-color: var(--yellow);
}

/* ─── Grid: one column per weekday ─── */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.sched-col {
  display: flex; flex-direction: column;
  background: var(--dark2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 4px; overflow: hidden;
}
.sched-col-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; text-align: center;
  color: var(--yellow); padding: 12px 8px;
  background: rgba(245,200,0,0.05);
  border-bottom: 1px solid rgba(245,200,0,0.2);
}
.sched-col-body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; flex: 1;
}
.sched-card {
  display: flex; flex-direction: column; gap: 4px;
  align-items: center; text-align: center;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px; padding: 12px 8px;
  transition: border-color .2s ease, transform .2s ease;
}
.sched-card:hover { border-color: var(--yellow); transform: translateY(-2px); }
.sched-card-name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 0.95rem; line-height: 1.15; letter-spacing: 0.03em;
  color: var(--white);
}
.sched-card-sub {
  font-size: 0.78rem; line-height: 1.15; color: #b8b8b8;
}
.sched-card-time {
  font-size: 0.8rem; font-weight: 600; color: var(--yellow);
  direction: ltr; /* keep 20:00–21:15 readable in RTL */
}
.sched-empty-day {
  color: rgba(255,255,255,0.15); text-align: center;
  padding: 18px 0; font-size: 1.1rem;
}
.schedule-empty, .schedule-error {
  grid-column: 1 / -1; padding: 24px 20px;
  color: var(--grey); font-size: 0.9rem;
}

/* ─── Responsive: fewer columns on smaller screens ─── */
@media (max-width: 900px) {
  .schedule-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .schedule { padding: 70px 5%; }
  .schedule-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .schedule-header { margin-bottom: 28px; }
  .schedule-header .btn-primary { width: 100%; text-align: center; }
}

/* ── css/faq.css ── */
/* ─── FAQ accordion ─── */
.faq { background: var(--dark); }
.faq-inner { max-width: 860px; margin: 0 auto; }

.faq-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: var(--dark2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-inline-start: 3px solid transparent;
  transition: border-color 0.25s, background 0.25s;
}
.faq-item[open] {
  border-inline-start-color: var(--yellow);
  background: var(--dark3);
}

/* Question row (native <summary>, no JS needed) */
.faq-q {
  list-style: none;
  cursor: pointer;
  padding: 22px 24px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.2s;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--yellow); }

/* +/× toggle marker — flips on open (flex respects RTL/LTR automatically) */
.faq-q::after {
  content: '+';
  font-family: 'Barlow', sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--yellow);
  flex: none;
  transition: transform 0.25s;
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }

.faq-a {
  padding: 0 24px 24px;
  color: var(--grey);
  font-size: 1rem;
  line-height: 1.7;
}

@media (max-width: 600px) {
  .faq-q { font-size: 1.05rem; padding: 18px; }
  .faq-a { padding: 0 18px 20px; }
}

/* ── css/gallery.css ── */
/* ============================================================
   GALLERY — responsive masonry-style grid with hover effects
   and a full-screen lightbox. Matches the site's dark/gold theme.
   ============================================================ */
.gallery {
  background: var(--black);
  position: relative;
  z-index: 2;
}
.gallery-inner { max-width: 1200px; margin: 0 auto; }

.gallery-head { margin-bottom: 44px; max-width: 640px; }
.gallery-head .section-intro {
  color: var(--grey);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-top: 6px;
}

/* ─── Subjects (albums) ─── */
.gallery-album { margin-bottom: 54px; }
.gallery-album:last-child { margin-bottom: 0; }

.gallery-album-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gallery-album-title {
  font-family: 'Barlow', sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  letter-spacing: -0.01em;
  color: var(--white);
  text-transform: uppercase;
}
.gallery-album-count {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
  white-space: nowrap;
}

/* ─── Collage mosaic — dense grid, some tiles span extra cells ─── */
.gallery-collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 130px;
  grid-auto-flow: dense;
  gap: 10px;
}
/* Feature tiles create the montage rhythm. Scoped per-collage so every
   subject leads with a hero tile regardless of how many photos it has. */
.gallery-collage .collage-tile:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.gallery-collage .collage-tile:nth-child(6n+4) { grid-row: span 2; }
/* A lone photo shouldn't stretch full-bleed and tiny-tall. */
.gallery-collage[data-count="1"] { grid-template-columns: minmax(0, 520px); grid-auto-rows: 340px; }
.gallery-collage[data-count="1"] .collage-tile { grid-column: auto; grid-row: auto; }

@media (max-width: 900px) {
  .gallery-collage { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 115px; }
}
@media (max-width: 520px) {
  .gallery-collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; gap: 8px; }
  .gallery-collage .collage-tile:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
  .gallery-collage .collage-tile:nth-child(6n+4) { grid-row: span 1; }
}

.collage-tile {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  cursor: pointer;
  background: var(--dark);
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.collage-tile:hover,
.collage-tile:focus-visible {
  border-color: rgba(245,200,0,0.5);
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
  z-index: 2;
  outline: none;
}

.collage-tile img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
  filter: saturate(0.9) brightness(0.9);
}
.collage-tile:hover img,
.collage-tile:focus-visible img {
  transform: scale(1.08);
  filter: saturate(1.05) brightness(1);
}

/* Gradient + caption overlay revealed on hover */
.collage-tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.collage-tile:hover::after,
.collage-tile:focus-visible::after { opacity: 1; }

.collage-cap {
  position: absolute;
  bottom: 0; inset-inline: 0;
  padding: 12px 14px;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  z-index: 1;
  text-align: start;
}
.collage-tile:hover .collage-cap,
.collage-tile:focus-visible .collage-cap { transform: translateY(0); opacity: 1; }

/* A tiny "view" glyph in the corner */
.collage-tile .collage-zoom {
  position: absolute;
  top: 10px; inset-inline-end: 10px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: 0.8rem;
  background: rgba(10,10,10,0.6);
  color: var(--yellow);
  border: 1px solid rgba(245,200,0,0.4);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 1;
}
.collage-tile:hover .collage-zoom,
.collage-tile:focus-visible .collage-zoom { opacity: 1; transform: scale(1); }

.gallery-empty, .gallery-error {
  color: var(--grey);
  padding: 40px 0;
  text-align: center;
}
.gallery-error { color: #e0736b; }

/* ─── Lightbox ─── */
.lightbox {
  position: fixed; inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(5,5,5,0.94);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.open { display: flex; opacity: 1; }

.lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lightbox-img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 24px 70px rgba(0,0,0,0.7);
  animation: lb-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes lb-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.lightbox-cap {
  color: var(--white);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-align: center;
  max-width: 70ch;
}

.lightbox-btn {
  position: absolute;
  background: rgba(20,20,20,0.7);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.15);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  user-select: none;
}
.lightbox-btn:hover { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.lightbox-close { top: 20px; inset-inline-end: 20px; border-radius: 50%; font-size: 1.3rem; }
.lightbox-prev { inset-inline-start: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-next { inset-inline-end: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-count {
  position: absolute;
  bottom: 22px; inset-inline: 0;
  text-align: center;
  color: var(--grey);
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.15em;
  font-size: 0.85rem;
}

/* RTL: flip the nav chevrons so ‹ / › still point the intuitive way */
[dir="rtl"] .lightbox-prev,
[dir="rtl"] .lightbox-next { transform: translateY(-50%) scaleX(-1); }

@media (max-width: 620px) {
  .lightbox-btn { width: 44px; height: 44px; font-size: 1.25rem; }
  .lightbox-prev { inset-inline-start: 8px; }
  .lightbox-next { inset-inline-end: 8px; }
}

/* ─── Video entries ─── */

/* Unlike .collage-zoom, the play badge is visible at rest. It is the only
   thing distinguishing a video tile from a photo, and on touch devices there
   is no hover state to reveal it. */
.collage-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(10,10,10,0.55);
  border: 2px solid var(--yellow);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s ease;
  z-index: 1;
}
/* The triangle, drawn with borders so it needs no glyph or asset. Nudged
   right of centre because a triangle's optical centre sits left of its box. */
.collage-play::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--yellow);
}
.collage-tile:hover .collage-play,
.collage-tile:focus-visible .collage-play {
  transform: translate(-50%, -50%) scale(1.12);
  background: rgba(10,10,10,0.75);
}
/* The play badge is the affordance on a video tile, so the caption should not
   slide up over it on hover the way it does on a photo. */
.collage-tile.is-video .collage-cap { padding-inline-end: 12px; }

/* Keep the badge from swamping the small tiles in a dense collage */
@media (max-width: 620px) {
  .collage-play { width: 48px; height: 48px; }
  .collage-play::after { border-width: 9px 0 9px 14px; }
}

/* 16:9 embed sized to fit the viewport in whichever direction runs out first,
   so the player is never letterboxed inside its own box. */
.lightbox-video {
  width: min(92vw, calc(78vh * 16 / 9));
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 24px 70px rgba(0,0,0,0.7);
  background: #000;
  animation: lb-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lightbox-video iframe {
  display: block;
  width: 100%; height: 100%;
  border: 0;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .gallery-item, .gallery-item img, .gallery-cap, .gallery-zoom,
  .lightbox, .lightbox-img, .lightbox-video, .collage-play {
    transition: none; animation: none;
  }
}

/* ── css/cta.css ── */
/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: var(--yellow); padding: 80px 5%; text-align: center;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: 'TRAIN HARD'; position: absolute;
  font-family: 'Barlow', sans-serif; font-size: 18vw; color: rgba(0,0,0,0.06);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  white-space: nowrap; pointer-events: none;
}
.cta-band h2 {
  font-family: 'Barlow', sans-serif; font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--black); letter-spacing: 0.05em; margin-bottom: 16px; position: relative;
}
.cta-band p {
  font-size: 1rem; font-weight: 400; color: rgba(0,0,0,0.6);
  margin-bottom: 36px; position: relative;
}

/* Secondary link under the button — membership purchase for existing members. */
.cta-alt { position: relative; margin-top: 18px; }
.cta-alt a {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(0,0,0,0.65); text-decoration: underline;
  text-underline-offset: 3px;
}
.cta-alt a:hover { color: var(--black); }

/* ─── Responsive ─── */
@media (max-width: 760px) {
  .cta-band { padding: 60px 6%; }
  .cta-band::before { font-size: 26vw; }
  .cta-band .btn-dark { width: 100%; }
}

/* ── css/reviews.css ── */
/* ============================================================
   GOOGLE RATING & REVIEWS — the hero rating chip, and the reviews
   section on the home page. Everything starts hidden; js/main.js (and
   js/landing.js for the chip) shows it once Google's data arrives.
   ============================================================ */
.hero-rating[hidden], .reviews[hidden], .reviews-grid[hidden] { display: none; }

/* ─── Rating chip (hero of the home and program pages) ─── */
.hero-rating {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px; padding: 9px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(245,200,0,0.35); border-radius: 999px;
  color: var(--white); text-decoration: none; font-size: 0.95rem;
  transition: border-color 0.2s, background 0.2s;
}
.hero-rating:hover, .hero-rating:focus-visible {
  border-color: var(--yellow); background: rgba(245,200,0,0.08);
}
.hero-rating-score { font-weight: 800; font-size: 1.1rem; }
.hero-rating-stars, .reviews-stars, .review-stars { color: var(--yellow); letter-spacing: 1px; }
.hero-rating-count { color: #bbb; }

/* ─── Section ─── */
.reviews { background: var(--dark); }
.reviews-inner { max-width: 1200px; margin: 0 auto; }

.reviews-summary {
  display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-top: 4px; color: var(--white); text-decoration: none;
}
.reviews-score { font-size: 3rem; font-weight: 900; line-height: 1; }
.reviews-stars { font-size: 1.4rem; }
.reviews-count { color: var(--grey); font-size: 1rem; }
.reviews-summary:hover .reviews-count { color: var(--yellow); text-decoration: underline; }

.reviews-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-top: 36px;
}
.review-card {
  background: var(--dark2); padding: 24px;
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 3px solid var(--yellow);
}
.review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.review-avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--black); font-weight: 800; font-size: 1.1rem;
}
.review-author { font-weight: 700; color: var(--white); line-height: 1.3; }
.review-author a { color: inherit; text-decoration: none; }
.review-author a:hover { color: var(--yellow); text-decoration: underline; }
.review-meta { font-size: 0.85rem; color: var(--grey); display: flex; gap: 8px; flex-wrap: wrap; }
.review-text {
  color: rgba(240,240,240,0.82); line-height: 1.7; font-size: 0.98rem;
  /* Long reviews are cut at eight lines; "All reviews" has the rest. */
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-line;
}

.reviews-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
/* "Google Maps" is a name: keep its case where the button style would capitalise it. */
.reviews-actions .btn-secondary { text-transform: none; }
/* Google Maps asks for its name to be shown as written, as attribution. */
.reviews-source { margin-top: 18px; font-size: 0.8rem; color: var(--grey); }

html[lang="he"] .reviews-score,
html[lang="he"] .hero-rating,
html[lang="he"] .review-card { font-family: 'Heebo', sans-serif; }

@media (max-width: 600px) {
  .hero-rating { margin-top: 18px; font-size: 0.9rem; }
  .reviews-score { font-size: 2.4rem; }
  .reviews-actions > a { flex: 1 1 100%; text-align: center; }
}

/* ── css/footer.css ── */
/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact-footer { background: var(--black); padding: 80px 5% 40px; max-width: 1200px; margin: 0 auto; }
.contact-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px; margin-bottom: 60px; }

.footer-brand .logo-img {
  width: 80px; height: 80px; margin-bottom: 20px;
  filter: drop-shadow(0 0 12px rgba(245,200,0,0.3));
}
.footer-brand .footer-name {
  font-family: 'Barlow', sans-serif; font-weight: 900; font-size: 1.5rem;
  letter-spacing: 0.08em; color: var(--white); margin-bottom: 12px;
}
.footer-brand .footer-name span { color: var(--yellow); }
.footer-brand p { font-size: 0.85rem; color: #555; line-height: 1.7; max-width: 280px; }

/* ─── Social icons ─── */
.footer-social { display: flex; gap: 12px; margin-top: 22px; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; color: #888;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.02);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.social-link svg { width: 18px; height: 18px; display: block; }
.social-link:hover, .social-link:focus-visible {
  color: var(--black); background: var(--yellow);
  border-color: var(--yellow); transform: translateY(-2px);
}

/* ─── Contact links (phone / email) ─── */
.footer-col a.footer-link { color: inherit; text-decoration: none; }
.footer-col li:hover a.footer-link { color: var(--white); }

/* h3: the footer columns sit under the page's h2 sections. */
.footer-col h3 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--yellow); margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col li {
  font-size: 0.88rem; color: #666; padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04); transition: color 0.2s;
}
.footer-col li:hover { color: var(--white); }

.footer-legal {
  display: flex; flex-wrap: wrap; gap: 24px; padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-legal a {
  color: var(--grey); font-size: 0.82rem; text-decoration: none; transition: color 0.2s;
}
.footer-legal a:hover { color: var(--yellow); text-decoration: underline; }
/* Program pages row, above the legal links; its label reads as a heading. */
.footer-train span { color: var(--white); font-size: 0.82rem; font-weight: 700; }
.footer-bottom {
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
/* #8a8a8a, not #444: readable on the black footer (contrast 5.9:1, AA). */
.footer-bottom p { font-size: 0.75rem; color: #8a8a8a; }
.footer-bottom span { color: var(--yellow); }

/* ─── Contact form ─── */
.contact-form { display: flex; flex-direction: column; gap: 14px; max-width: 420px; margin-top: 8px; }
.contact-form input:not([type="checkbox"]), .contact-form select, .contact-form textarea {
  background: var(--dark2); border: 1px solid rgba(255,255,255,0.08);
  color: var(--white); padding: 12px 14px; font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem; border-radius: 2px;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--yellow);
}
.contact-form textarea { resize: vertical; min-height: 90px; }

/* Submit button: white by default, brand-yellow on hover */
.contact-form .btn-primary { background: #fff; color: var(--black); transition: background .2s, color .2s, opacity .2s; }
.contact-form .btn-primary:hover:not(:disabled) { background: var(--yellow); }

/* Incomplete form: the button reads as inert — flat, dimmed, no hover, and a
   cursor that says so before the visitor tries. */
.contact-form .btn-primary:disabled {
  background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.45);
  cursor: not-allowed; box-shadow: none;
}
/* Complete form: a quiet yellow nudge that it is now sendable. */
.contact-form .btn-primary.is-ready { background: var(--yellow); color: var(--black); }

.contact-form .form-hint {
  margin: -6px 0 0; font-size: 0.78rem; line-height: 1.4; color: var(--grey);
}
.contact-form .form-hint:empty { display: none; }

/* Invalid field highlight (paired with the styled alert below) */
.contact-form input.invalid, .contact-form select.invalid, .contact-form textarea.invalid {
  border-color: #ff8080;
}
.contact-form .form-consent.invalid { color: #ff8080; }
.contact-form .form-consent.invalid input[type="checkbox"] {
  outline: 2px solid #ff8080; outline-offset: 2px;
}

/* Inline per-field error, shown directly under the offending field */
.contact-form .field-error {
  color: #ff8080; font-size: 0.78rem; line-height: 1.35;
  margin: -8px 0 0; /* pull up close to its field (the form's row gap is 14px) */
}
.contact-form .field-error:empty { display: none; }
.form-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.82rem; line-height: 1.4; color: rgba(255,255,255,0.75);
  cursor: pointer;
}
/* 22px + the label's padding clears the 24x24 minimum target size (WCAG 2.5.8);
   16px was fiddly to hit on a phone. */
.form-consent input[type="checkbox"] {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
  accent-color: var(--yellow); cursor: pointer;
}
.form-consent a { color: var(--yellow); text-decoration: underline; }
.form-status { font-size: 0.85rem; line-height: 1.4; }
.form-status:empty { display: none; }
/* Success / error render as a styled in-site alert (not a native popup) */
.form-status.success, .form-status.error {
  padding: 10px 12px; border-radius: 3px; border: 1px solid;
}
.form-status.success { color: var(--yellow); background: rgba(245,200,0,0.08); border-color: rgba(245,200,0,0.35); }
.form-status.error { color: #ff8080; background: rgba(255,80,80,0.08); border-color: rgba(255,80,80,0.35); }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-footer { padding: 60px 6% 32px; }
  .contact-form { max-width: 100%; }
  .footer-legal { gap: 16px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── css/i18n.css ── */
/* ============================================================
   I18N — language toggle button, Hebrew font, RTL overrides.
   Loaded last so its [dir="rtl"] / [lang="he"] rules win.
   ============================================================ */

/* ─── Language toggle button ─── */
.nav-actions { display: flex; align-items: center; gap: 14px; }
.lang-toggle {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  /* min-height keeps it a comfortable tap target on a phone */
  padding: 8px 14px; min-width: 56px; min-height: 44px;
  background: transparent; color: var(--white);
  border: 1px solid rgba(245,200,0,0.4); cursor: pointer;
  transition: all 0.2s;
}
.lang-toggle:hover { background: var(--yellow); color: var(--black); border-color: var(--yellow); }

/* ─── Hebrew typography (Barlow has no Hebrew glyphs → use Heebo) ─── */
html[lang="he"] body,
html[lang="he"] .hero-sub,
html[lang="he"] .program-desc,
html[lang="he"] .feature-text,
html[lang="he"] .footer-brand p,
html[lang="he"] .sched-card-time,
html[lang="he"] .sched-card-sub {
  font-family: 'Heebo', sans-serif;
}
html[lang="he"] .hero-title,
html[lang="he"] .section-title,
html[lang="he"] .program-title,
html[lang="he"] .nav-logo span,
html[lang="he"] .cta-band h2,
html[lang="he"] .footer-name,
html[lang="he"] .about-badge-num,
html[lang="he"] .stat-num,
html[lang="he"] .cta-band::before {
  font-family: 'Heebo', sans-serif;
  font-weight: 900;
}
html[lang="he"] .section-label,
html[lang="he"] .hero-tag,
html[lang="he"] .nav-links a,
html[lang="he"] .nav-cta,
html[lang="he"] .btn-primary,
html[lang="he"] .btn-secondary,
html[lang="he"] .btn-dark,
html[lang="he"] .lang-toggle,
html[lang="he"] .sched-col-head,
html[lang="he"] .sched-card-name,
html[lang="he"] .sched-tab,
html[lang="he"] .footer-col h3,
html[lang="he"] .program-tag,
html[lang="he"] .stat-label,
html[lang="he"] .feature-title {
  font-family: 'Heebo', sans-serif;
  letter-spacing: normal; /* Hebrew shouldn't be letter-spaced */
}

/* ─── RTL layout fixes ─── */
[dir="rtl"] .feature-item { border-left: none; border-right: 2px solid var(--yellow); }
[dir="rtl"] .program-num { right: auto; left: 24px; }

/* About panel corner brackets mirror horizontally */
[dir="rtl"] .about-visual::after {
  right: auto; left: -2px;
  border-right: none; border-left: 3px solid var(--yellow);
}
[dir="rtl"] .about-visual::before {
  left: auto; right: -2px;
  border-left: none; border-right: 3px solid var(--yellow);
}
[dir="rtl"] .about-badge { right: auto; left: -20px; }

/* Keep the marquee strip flowing left-to-right regardless of language */
[dir="rtl"] .strip-inner { direction: ltr; }

/* Phone/email stay LTR so digits read correctly inside an RTL list */
[dir="rtl"] .footer-col li { direction: rtl; }

/* tel inputs default to LTR — keep the phone placeholder right-aligned in Hebrew */
[dir="rtl"] .contact-form input[type="tel"] { direction: rtl; text-align: right; }

/* ── css/a11y.css ── */
/* ============================================================
   ACCESSIBILITY — skip link, focus rings, sr-only, the floating
   accessibility widget, and the toggleable user preferences
   (font size, contrast, link highlight, reduced motion).
   Loaded last so its body[data-a11y-*] rules win.
   ============================================================ */

/* ─── Screen-reader-only (visually hidden, still announced) ─── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ─── Skip-to-content link ─── */
.skip-link {
  position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
  z-index: 2000;
  background: var(--yellow); color: var(--black);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 12px 24px; text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; outline: 3px solid #fff; }

/* ─── Visible keyboard focus everywhere ─── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   ACCESSIBILITY WIDGET
   ============================================================ */
/* ── Position rules ──────────────────────────────────────────────
   Both launchers live permanently in the bottom corners — a recognised,
   predictable pattern that never jumps on scroll or by language:
     • Accessibility  → bottom-LEFT
     • WhatsApp       → bottom-RIGHT
   Mobile shrinks them and honours the safe-area insets; the accessibility
   panel opens upward from its button.
   ----------------------------------------------------------------- */
.a11y-fab, .wa-fab {
  position: fixed;
  bottom: 24px; top: auto; transform: none;
  z-index: 1500;
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, background 0.2s, box-shadow 0.2s, opacity 0.2s;
}

/* Accessibility → bottom-left */
.a11y-fab {
  left: 24px; right: auto;
  background: var(--yellow); color: var(--black);
  font-size: 1.7rem; line-height: 1;
}
.a11y-fab:hover { background: #fff; box-shadow: 0 8px 28px rgba(245,200,0,0.55); transform: translateY(-3px); }

/* WhatsApp → bottom-right */
.wa-fab {
  right: 24px; left: auto;
  background: #25D366; color: #fff; text-decoration: none;
}
.wa-fab svg { width: 30px; height: 30px; display: block; }
.wa-fab:hover { background: #1ebe5d; box-shadow: 0 8px 28px rgba(37,211,102,0.55); transform: translateY(-3px); }

/* Accessibility panel — opens upward from the bottom-left button */
.a11y-panel {
  position: fixed;
  bottom: 92px; top: auto; transform: none;
  left: 24px; right: auto;
  z-index: 1500;
  width: 300px; max-width: calc(100vw - 48px);
  background: var(--dark); color: var(--white);
  border: 1px solid rgba(245,200,0,0.3);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  padding: 20px; max-height: 70vh; overflow-y: auto;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 {
  font-family: 'Barlow', sans-serif; font-size: 1.2rem; color: var(--yellow);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
html[lang="he"] .a11y-panel h2,
html[lang="he"] .a11y-btn { font-family: 'Heebo', sans-serif; }

.a11y-group { display: flex; flex-direction: column; gap: 8px; }
.a11y-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.04em;
  text-align: start;
  background: var(--dark2); color: var(--white);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;
  padding: 11px 14px; cursor: pointer; transition: all 0.15s;
}
.a11y-btn:hover { border-color: var(--yellow); }
.a11y-btn[aria-pressed="true"] { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.a11y-btn .a11y-ico { font-size: 1.2rem; flex-shrink: 0; }

.a11y-reset {
  margin-top: 14px; width: 100%;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8rem;
  background: transparent; color: var(--grey);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 4px;
  padding: 10px; cursor: pointer; transition: all 0.15s;
}
.a11y-reset:hover { color: var(--white); border-color: var(--white); }

/* ============================================================
   USER PREFERENCE EFFECTS (toggled via body attributes)
   ============================================================ */

/* Font scaling — scales rem-based + key fixed sizes */
body[data-a11y-font="large"]  { font-size: 112.5%; }
body[data-a11y-font="larger"] { font-size: 125%; }
body[data-a11y-font="large"]  .hero-sub,
body[data-a11y-font="larger"] .hero-sub,
body[data-a11y-font="large"]  .program-desc,
body[data-a11y-font="larger"] .program-desc,
body[data-a11y-font="large"]  .sched-card-name,
body[data-a11y-font="larger"] .sched-card-name,
body[data-a11y-font="large"]  .feature-text,
body[data-a11y-font="larger"] .feature-text { font-size: 1.05rem; }

/* High contrast */
body[data-a11y-contrast="on"] {
  --black: #000; --dark: #000; --dark2: #000; --dark3: #000;
  --white: #fff; --grey: #ddd; --yellow: #ffe600;
}
body[data-a11y-contrast="on"] .program-desc,
body[data-a11y-contrast="on"] .feature-text,
body[data-a11y-contrast="on"] .footer-brand p,
body[data-a11y-contrast="on"] .sched-card-name { color: #fff; }
body[data-a11y-contrast="on"] body::before,
body[data-a11y-contrast="on"] .hero::after,
body[data-a11y-contrast="on"] .hero-glow { display: none; }
body[data-a11y-contrast="on"] .program-card,
body[data-a11y-contrast="on"] .feature-item { border: 1px solid #fff; }

/* Highlight links — make every link unmistakable */
body[data-a11y-links="on"] a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: 1px dashed currentColor; outline-offset: 2px;
}

/* Reduced motion — stop marquee, spin, pulse, fade transitions */
body[data-a11y-motion="off"] * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
body[data-a11y-motion="off"] .fade-in { opacity: 1 !important; transform: none !important; }

/* Respect the OS-level reduced-motion preference by default */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Mobile (≤760px) ───────────────────────────────────────────────
   Same bottom corners, slightly smaller, honouring the safe-area insets.
   While the mobile nav drawer is open both launchers fade out so they
   never sit over the menu (.menu-open is toggled from JS). ------------ */
@media (max-width: 760px) {
  .a11y-fab, .wa-fab {
    width: 52px; height: 52px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
  .a11y-fab { left: max(16px, env(safe-area-inset-left)); font-size: 1.5rem; }
  .wa-fab   { right: max(16px, env(safe-area-inset-right)); }
  .wa-fab svg { width: 27px; height: 27px; }

  .a11y-fab.menu-open, .wa-fab.menu-open {
    opacity: 0; pointer-events: none; transform: scale(0.85);
  }

  .a11y-panel {
    left: max(16px, env(safe-area-inset-left)); right: auto;
    bottom: 84px;
    width: calc(100vw - 32px); max-width: 320px;
  }
}