/* =========================================================
   جمعية كشافة الفينيق — Phoenix Scouts Association
   Shared stylesheet (RTL, mobile-first)
   Colours sampled from images/logo.svg
   ========================================================= */

:root {
  /* Brand (sampled from the logo) */
  --navy: #2c3178;          /* logo ring */
  --navy-900: #1b1f52;      /* deep navy for footer / hero */
  --navy-700: #232864;
  --navy-100: #e6e7f3;
  --red: #ed2024;           /* phoenix red — decorative use */
  --red-600: #c8161d;       /* accessible red for buttons / text (5.3:1 on white) */
  --red-700: #a51217;
  --yellow: #f4ea0b;        /* logo ring yellow — accents only */
  --yellow-soft: #fff6b8;
  --green: #24743a;         /* logo ring green (5.7:1 on white) */
  --green-100: #e3f0e6;

  /* Neutrals */
  --paper: #fbf7ef;         /* warm off-white */
  --paper-2: #f3ecdf;
  --card: #ffffff;
  --ink: #1e2140;
  --ink-soft: #4c5170;      /* 7:1 on paper */
  --line: #e5dccb;

  /* Placeholders */
  --ph-bg: #fff8cc;
  --ph-border: #b38f00;
  --ph-ink: #574500;

  /* Type */
  --font-body: "Tajawal", "IBM Plex Sans Arabic", "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --font-display: "Cairo", "Tajawal", "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;

  /* Spacing & shape */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6rem;
  --radius-sm: 8px; --radius: 16px; --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(30, 33, 64, .06), 0 2px 8px rgba(30, 33, 64, .05);
  --shadow: 0 2px 4px rgba(30, 33, 64, .05), 0 12px 32px rgba(30, 33, 64, .09);
  --container: 1180px;
  --header-h: 68px;
  --header-gap: 12px;                         /* space above the floating header bar */
  --header-stack: calc(var(--header-h) + var(--header-gap));
  --ease: cubic-bezier(.2, .7, .2, 1);
  --tricolor: linear-gradient(to left, var(--yellow) 0 25%, var(--red) 25% 50%, var(--green) 50% 75%, var(--navy) 75% 100%);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-stack) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--navy); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--red-600); }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.35;
  margin: 0 0 var(--space-4);
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.45rem); font-weight: 700; }
p { margin: 0 0 var(--space-4); }
ul { padding-inline-start: 1.25rem; }
:focus-visible {
  outline: 3px solid var(--red-600);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible {
  outline-color: var(--yellow);
}

.visually-hidden {
  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-link {
  position: absolute; inset-inline-start: var(--space-4); top: -100px; z-index: 100;
  background: var(--yellow); color: var(--navy-900); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.narrow { max-width: 760px; }

/* ---------- Placeholders (missing real content) ---------- */
.ph {
  display: inline-block;
  background: var(--ph-bg);
  color: var(--ph-ink);
  border: 2px dashed var(--ph-border);
  border-radius: 6px;
  padding: 0 .45em;
  font-weight: 500;
  line-height: 1.7;
  font-size: .95em;
}
.ph-block { display: block; padding: var(--space-3) var(--space-4); }

.img-ph {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  aspect-ratio: var(--ar, 4 / 3);
  width: 100%;
  margin: 0;
  background:
    repeating-linear-gradient(135deg, rgba(44, 49, 120, .035) 0 12px, transparent 12px 24px),
    var(--paper-2);
  border: 2px dashed #c9bda5;
  border-radius: var(--radius);
  color: #6b6450;
  font-weight: 700;
  font-size: .95rem;
  text-align: center;
  overflow: hidden;
}
.img-ph svg { width: 40px; height: 40px; opacity: .7; }
.img-ph--round { border-radius: 50%; }
.photo { border-radius: var(--radius); width: 100%; object-fit: cover; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .6em 1.5em;
  border-radius: 999px; border: 2px solid transparent;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--red-600); color: #fff; box-shadow: 0 6px 18px rgba(200, 22, 29, .28); }
.btn--primary:hover { background: var(--red-700); color: #fff; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.btn--ghost:hover { background: #fff; color: var(--navy); }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Header (v2, 2026-11-07) ----------
   A floating rounded navy bar ("island") inset from the edges. Frosted and see-through over the photo heroes,
   solid navy with a shadow once the page scrolls. No tricolor stripe. Same markup on all pages. See DESIGN.md §6n. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding-top: var(--header-gap);
  margin-bottom: calc(-1 * var(--header-stack));   /* overlaps the photo hero below */
  color: #fff; pointer-events: none;
}
.header-inner {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--header-h);
  width: min(100% - 24px, calc(var(--container) + 24px));
  padding-inline: 10px 10px;
  border-radius: 999px;
  background: rgba(27, 31, 82, .42);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled .header-inner,
.site-header:has(.nav-toggle[aria-expanded="true"]) .header-inner {
  background: var(--navy);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 12px 30px rgba(15, 18, 50, .28);
}
.brand {
  display: flex; align-items: center; gap: var(--space-3);
  color: #fff; text-decoration: none; min-width: 0;
  padding-inline-end: 4px; border-radius: 999px;
}
.brand:hover { color: #fff; }
.brand img { width: 48px; height: 48px; flex: none; }
.brand-text { display: grid; line-height: 1.25; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; white-space: nowrap; }
.brand-sub { font-size: .78rem; color: #cfd2ef; letter-spacing: .02em; direction: ltr; text-align: end; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--yellow); color: var(--navy-900); border: 0;
  cursor: pointer; transition: transform .2s var(--ease);
}
.nav-toggle:active { transform: scale(.94); }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav {   /* phones: a rounded panel under the bar */
  position: absolute; inset-inline: 16px; top: calc(100% + 8px);
  background: var(--navy-900); border-radius: 24px;
  box-shadow: 0 22px 40px rgba(10, 12, 40, .35);
  display: none;
  max-height: calc(100vh - var(--header-stack) - 24px);
  overflow-y: auto;
}
.site-nav.is-open { display: block; animation: navIn .22s var(--ease); }
@keyframes navIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.site-nav ul { list-style: none; margin: 0; padding: var(--space-3); display: flex; flex-direction: column; gap: 4px; }
.site-nav a {
  display: flex; align-items: center; gap: .55em; min-height: 48px; padding: 0 var(--space-4);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 1.08rem;
  border-radius: 999px; transition: background-color .2s var(--ease), color .2s var(--ease);
}
.site-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.site-nav a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: var(--yellow); }
.site-nav li:not(.nav-cta) a[aria-current="page"]::before {   /* small yellow dot, not a bar */
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); flex: none;
}
.site-nav .nav-cta a {
  background: var(--yellow); color: var(--navy-900); justify-content: center; margin-top: var(--space-2);
}
.site-nav .nav-cta a:hover { background: #fff; color: var(--navy); }
.site-nav .nav-cta a[aria-current="page"] { box-shadow: 0 0 0 3px var(--navy-900), 0 0 0 5px var(--yellow); }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .header-inner { padding-inline: 14px 8px; }
  .site-nav {
    position: static; display: block; background: none; border-radius: 0; box-shadow: none;
    max-height: none; overflow: visible;
  }
  .site-nav.is-open { animation: none; }
  .site-nav ul { flex-direction: row; align-items: center; gap: 2px; padding: 0; }
  .site-nav a { min-height: 44px; padding: 0 .95rem; font-size: 1rem; }
  .site-nav .nav-cta { margin-inline-start: var(--space-2); }
  .site-nav .nav-cta a { margin: 0; min-height: 52px; padding: 0 1.5rem; }
  .brand img { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .site-nav.is-open { animation: none; } }

/* ---------- Sections ---------- */
.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-7); }
.section--alt { background: var(--paper-2); }
.section--white { background: #fff; }
.section-head { max-width: 720px; margin-bottom: var(--space-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-soft); font-size: 1.1rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--green); margin-bottom: var(--space-2);
}
.eyebrow::before {
  content: ""; width: 28px; height: 4px; border-radius: 4px;
  background: linear-gradient(to left, var(--red) 0 50%, var(--yellow) 50%);
}
.section-head--center .eyebrow { justify-content: center; }
.lead { font-size: clamp(1.1rem, 2.4vw, 1.3rem); color: var(--ink-soft); line-height: 1.9; }

/* Cedar divider */
.cedar-divider {
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  color: var(--green); margin-block: var(--space-6);
}
.cedar-divider::before, .cedar-divider::after {
  content: ""; height: 1px; flex: 0 1 120px; background: currentColor; opacity: .35;
}
.cedar-divider svg { width: 34px; height: 34px; }

/* Scout pattern (design-system texture, 2026-11-07, see DESIGN.md)
   Line motifs: tent, campfire, fleur-de-lis, cedar, rope knot, compass, mountains, stars.
   Plain background image (not a CSS mask: browsers block mask images on pages opened from disk, file://).
   White tile on dark surfaces; .scout-pattern--light swaps in the navy tile for light surfaces.
   Tune per surface with --pattern-opacity and --pattern-size. Replaces the old topo.svg contours. */
.scout-pattern { position: relative; isolation: isolate; }
.scout-pattern::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: url("../images/scout-pattern.svg") 0 0 / var(--pattern-size, 300px) repeat;
  opacity: var(--pattern-opacity, .1);
}
.scout-pattern--light { --pattern-opacity: .07; }
.scout-pattern--light::before { background-image: url("../images/scout-pattern-navy.svg"); }

/* ---------- Home: the header bar floats over the hero (fixed, so the hero can start at the very top) ---------- */
.home .site-header { position: fixed; inset-inline: 0; top: 0; margin-bottom: 0; }

/* ---------- Hero (home) — full-bleed photo mosaic ---------- */
.hero {
  --shade: 22, 25, 70;                       /* navy-900 as RGB for overlays */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--navy-900);
  min-height: max(600px, 88svh);   /* leaves the next section peeking in */
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--header-stack) + var(--space-7)) calc(var(--space-8) + 24px);
}

/* Slider: two full-bleed slides that crossfade. */
.hero-slides {
  position: absolute; inset: 0; z-index: -2;
  margin: 0; padding: 0; list-style: none;
  background: var(--navy-900);
}
.hero-slide {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.2s ease, visibility 0s; }
.hero-slide picture { display: block; width: 100%; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
@media (max-width: 599px) { .hero-slide img { object-position: center 40%; } }   /* portrait crops */

/* Slider controls: dots + pause */
.hero-ui {
  position: absolute; z-index: 2;
  inset-inline-start: 16px; bottom: 16px;
  display: flex; align-items: center; gap: var(--space-2);
}
.hero-dots { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.hero-dot, .hero-pause {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; background: none; padding: 0; cursor: pointer; color: #fff;
  border-radius: 999px;
}
.hero-dot::before {
  content: ""; width: 12px; height: 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .8);
  transition: width .3s var(--ease), background-color .3s var(--ease);
}
.hero-dot:hover::before { background: rgba(255, 255, 255, .75); }
.hero-dot[aria-current="true"]::before { width: 30px; background: var(--yellow); border-color: var(--yellow); }
.hero-pause { background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .35); }
.hero-pause:hover { background: rgba(0, 0, 0, .5); }
.hero-pause svg { width: 18px; height: 18px; }
.hero-pause .icon-play { display: none; }
.hero-pause[aria-pressed="true"] .icon-play { display: block; }
.hero-pause[aria-pressed="true"] .icon-pause { display: none; }

/* Readability shade: strongest behind the text (bottom on mobile, start/right side on desktop) */
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(var(--shade), .88) 0%, rgba(var(--shade), .74) 40%, rgba(var(--shade), .4) 62%, rgba(var(--shade), .12) 85%, rgba(var(--shade), .35) 100%);
}

.hero-content { position: relative; width: min(100% - 32px, var(--container)); margin-inline: auto; }
.hero-inner { max-width: 760px; }
.hero-badge {
  width: 76px; height: 76px; margin-bottom: var(--space-4);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .4));
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  margin: 0 0 var(--space-3);
  font-weight: 700; font-size: .98rem; color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; padding: .3em 1em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-eyebrow svg { width: 18px; height: 18px; color: var(--yellow); flex: none; }
.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 7vw, 3.75rem);
  line-height: 1.25;
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero h1 .accent { color: var(--yellow); display: block; }
.hero-motto { margin: 0 0 var(--space-6); }
.hero-motto blockquote { margin: 0; }
.hero-motto p {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.2rem, 3.4vw, 1.6rem); line-height: 1.6; color: #fff;
}
.hero-motto figcaption { margin-top: var(--space-1); color: #e6e8fa; font-size: .98rem; }
.hero-motto p, .hero-motto figcaption { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.hero .btn--primary { box-shadow: 0 10px 28px rgba(200, 22, 29, .45); }

@media (max-width: 899px) {
  .hero-eyebrow .hide-sm { display: none; }
  .hero h1 { margin-bottom: var(--space-3); }
  .hero-motto { margin-bottom: var(--space-5); }
}

.hero-credit {
  display: none; align-items: center; gap: .4em;
  font-size: .85rem; color: #fff; text-decoration: none; opacity: .85;
  padding: .3em .8em; border-radius: 999px; background: rgba(0, 0, 0, .3);
}
.hero-credit:hover { opacity: 1; color: #fff; }
.hero-credit svg { width: 16px; height: 16px; }

@media (min-width: 900px) {
  .hero { align-items: center; padding-block: calc(var(--header-stack) + var(--space-6)) var(--space-8); }
  .hero-ui { inset-inline-start: auto; inset-inline-end: 92px; bottom: 22px; }   /* clear of the WhatsApp button */
  .hero-shade {
    background:
      linear-gradient(to left, rgba(var(--shade), .86) 0%, rgba(var(--shade), .76) 38%, rgba(var(--shade), .45) 56%, rgba(var(--shade), .1) 80%, rgba(var(--shade), 0) 100%),
      linear-gradient(to top, rgba(var(--shade), .45) 0%, rgba(var(--shade), 0) 25%),
      linear-gradient(to bottom, rgba(var(--shade), .55) 0%, rgba(var(--shade), 0) 22%);
  }
  .hero-badge { width: 80px; height: 80px; }
  .hero-credit { display: inline-flex; }
}

/* Motion: slow drift on the photos + staggered entrance for the text */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide.is-active img { animation: heroDrift 9s ease-out both; }
  .hero-inner > * { animation: heroIn .8s var(--ease) both; }
  .hero-inner > :nth-child(2) { animation-delay: .08s; }
  .hero-inner > :nth-child(3) { animation-delay: .16s; }
  .hero-inner > :nth-child(4) { animation-delay: .24s; }
  .hero-inner > :nth-child(5) { animation-delay: .32s; }
  .hero-inner > :nth-child(6) { animation-delay: .4s; }
}
@keyframes heroDrift { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.hero-mountains {
  position: absolute; inset-inline: 0; bottom: -1px; width: 100%; height: clamp(50px, 9vw, 110px);
  color: var(--paper);
}

/* Page banner (inner pages) */
.page-banner {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%);
  color: #fff;
  padding-block: var(--space-7) calc(var(--space-8) + 10px);
  position: relative; overflow: hidden;
}
.page-banner h1 { color: #fff; margin-bottom: var(--space-3); }
.page-banner p { color: #d5d8f3; font-size: 1.15rem; max-width: 60ch; margin: 0; }
.page-banner .eyebrow { color: var(--yellow); }
.page-banner .eyebrow::before { background: linear-gradient(to left, var(--red) 0 50%, #fff 50%); }
.page-banner .hero-mountains { height: clamp(36px, 6vw, 70px); }
.breadcrumbs { font-size: .92rem; margin-bottom: var(--space-3); }
.breadcrumbs ol { list-style: none; display: flex; gap: .5em; padding: 0; margin: 0; flex-wrap: wrap; }
.breadcrumbs li + li::before { content: "‹"; margin-inline-end: .5em; color: #aab0e0; }
.breadcrumbs a { color: #d5d8f3; }
.breadcrumbs [aria-current] { color: #fff; }

/* ---------- Grid helpers ---------- */
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.split { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 880px) {
  .split { grid-template-columns: 1.1fr .9fr; gap: var(--space-8); }
  .split--reverse > :first-child { order: 2; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: inherit; }
.card h3 { margin-bottom: var(--space-2); }
.card p:last-child { margin-bottom: 0; }

/* Age cards */
.age-card { position: relative; overflow: hidden; padding-top: var(--space-6); display: flex; flex-direction: column; }
.age-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 8px; background: var(--accent, var(--navy)); }
.age-card--cubs { --accent: var(--yellow); --accent-ink: #6b5f00; }
.age-card--scouts { --accent: var(--green); --accent-ink: var(--green); }
.age-card--rovers { --accent: var(--red); --accent-ink: var(--red-600); }
.age-badge {
  display: inline-flex; align-items: baseline; gap: .35em;
  font-family: var(--font-display); font-weight: 800; color: var(--accent-ink, var(--navy));
  font-size: 2.3rem; line-height: 1; margin-bottom: var(--space-3);
}
.age-badge small { font-size: 1rem; font-weight: 700; color: var(--ink-soft); }
.card-link { margin-top: auto; padding-top: var(--space-4); display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: var(--navy); }
.card-link svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
a.card:hover .card-link svg { transform: translateX(-4px); }

/* Feature / icon cards */
.icon-bubble {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--navy-100); color: var(--navy);
  margin-bottom: var(--space-4);
}
.icon-bubble svg { width: 30px; height: 30px; }
.icon-bubble--red { background: #fde4e4; color: var(--red-600); }
.icon-bubble--green { background: var(--green-100); color: var(--green); }
.icon-bubble--yellow { background: var(--yellow-soft); color: #6b5f00; }

.feature-card .img-ph, .feature-card .photo { margin-bottom: var(--space-4); }

/* Lists with icons */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.check-list svg { width: 22px; height: 22px; flex: none; color: var(--green); margin-top: .35em; }

.icon-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .icon-list--2 { grid-template-columns: repeat(2, 1fr); } }
.icon-list li {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-4);
}
.icon-list .icon-bubble { margin: 0; flex: none; width: 48px; height: 48px; border-radius: 14px; }
.icon-list .icon-bubble svg { width: 26px; height: 26px; }
.icon-list h3 { font-size: 1.12rem; margin-bottom: var(--space-1); }
.icon-list p { margin: 0; color: var(--ink-soft); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.chips li {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .3em 1em; font-weight: 500;
}

/* ---------- Pull quotes ---------- */
.quote-band {
  background: var(--navy-900); color: #fff; text-align: center;
  padding-block: var(--space-8);
}
.quote-band--red { background: linear-gradient(135deg, var(--red-600), var(--red-700)); }
.quote-band--green { background: linear-gradient(135deg, var(--green), #1a5a2c); }
.pull-quote { margin: 0 auto; max-width: 900px; position: relative; }
.pull-quote blockquote { margin: 0; }
.pull-quote p {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 4.6vw, 2.8rem); line-height: 1.5; margin: 0;
}
.pull-quote figcaption { margin-top: var(--space-4); color: #e3e5f7; font-size: 1.05rem; }
.quote-mark { width: 54px; height: 54px; margin: 0 auto var(--space-4); color: var(--yellow); }

.inline-quote {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  background: #fff;
  border-inline-start: 6px solid var(--red);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.inline-quote--green { border-inline-start-color: var(--green); }
.inline-quote--yellow { border-inline-start-color: var(--yellow); }
.inline-quote blockquote { margin: 0; }
.inline-quote p {
  font-family: var(--font-display); font-weight: 800; color: var(--navy);
  font-size: clamp(1.35rem, 3.4vw, 1.9rem); line-height: 1.5; margin: 0;
}
.inline-quote figcaption { margin-top: var(--space-2); color: var(--ink-soft); font-weight: 500; }

/* ---------- Activities preview ---------- */
.activity-card { display: flex; flex-direction: column; }
.activity-card .img-ph { --ar: 16 / 10; margin-bottom: var(--space-4); }

/* ---------- News ---------- */
.news-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.news-card .img-ph { --ar: 16 / 9; border-radius: 0; border-width: 0 0 2px; }
.news-body { padding: var(--space-5); display: grid; gap: var(--space-2); }
.news-body h3 { margin: 0; }
.news-date { font-size: .92rem; color: var(--ink-soft); display: flex; align-items: center; gap: .4em; }
.news-date svg { width: 16px; height: 16px; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--navy); color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5);
  display: grid; gap: var(--space-5); align-items: center;
  position: relative; overflow: hidden;
}
.cta-band::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 6px; background: var(--tricolor); }
.cta-band h2 { color: #fff; margin-bottom: var(--space-2); }
.cta-band p { color: #d5d8f3; margin: 0; font-size: 1.1rem; }
@media (min-width: 880px) {
  .cta-band { grid-template-columns: 1fr auto; padding: var(--space-7); }
}

/* ---------- About ---------- */
.address-card { display: flex; gap: var(--space-4); align-items: flex-start; }
.address-card .icon-bubble { flex: none; margin: 0; }
.address-card address { font-style: normal; line-height: 1.9; }
.value-grid { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .value-grid { grid-template-columns: repeat(3, 1fr); } }
.value { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4) var(--space-5); }
.value h3 { font-size: 1.1rem; margin-bottom: var(--space-1); }
.value p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

.bp-portrait { max-width: 340px; margin-inline: auto; }
.bp-portrait img { border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
.bp-portrait figcaption { text-align: center; color: var(--ink-soft); margin-top: var(--space-3); font-size: .95rem; }

.team-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-member { text-align: center; }
.team-member .img-ph { --ar: 1; max-width: 170px; margin: 0 auto var(--space-3); border-radius: 50%; font-size: .85rem; }
.team-member .img-ph svg { width: 30px; height: 30px; }
.team-member h3 { font-size: 1.05rem; margin-bottom: var(--space-1); }
.team-member p { margin: 0; font-size: .95rem; }

/* ---------- Sections page ---------- */
.unit {
  display: grid; gap: var(--space-6);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.unit + .unit { margin-top: var(--space-6); }
.unit::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 8px; background: var(--accent); }
@media (min-width: 900px) { .unit { grid-template-columns: 1.2fr .8fr; padding: var(--space-7); } }
.unit-meta { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.meta-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.meta-row svg { width: 22px; height: 22px; color: var(--navy); flex: none; }
.meta-row strong { font-family: var(--font-display); }

/* ---------- Activities page ---------- */
.subnav { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.subnav a {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: 0 1.1em;
  border-radius: 999px; background: #fff; border: 1px solid var(--line);
  text-decoration: none; font-weight: 700; color: var(--navy);
}
.subnav a:hover { border-color: var(--navy); color: var(--navy); }
.subnav svg { width: 18px; height: 18px; }
.camp-types { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .camp-types { grid-template-columns: 1fr 1fr; } }
.camp-type { border-radius: var(--radius-lg); padding: var(--space-5); color: #fff; position: relative; overflow: hidden; }
.camp-type h3 { color: #fff; display: flex; align-items: center; gap: .5em; }
.camp-type h3 svg { width: 30px; height: 30px; }
.camp-type p { margin: 0; color: rgba(255, 255, 255, .92); }
.camp-type--summer { background: linear-gradient(135deg, var(--green), #17532a); }
.camp-type--winter { background: linear-gradient(135deg, var(--navy), var(--navy-900)); }
.skills-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.skill { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); }
.skill h3 { font-size: 1.15rem; margin-bottom: var(--space-2); }
.skill p, .skill ul { margin: 0; color: var(--ink-soft); }
.skill ul { padding-inline-start: 1.1rem; }
.gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .gallery { grid-template-columns: repeat(4, 1fr); } .gallery .wide { grid-column: span 2; } }
.gallery .img-ph { --ar: 1; font-size: .85rem; }
@media (min-width: 800px) { .gallery .wide .img-ph { aspect-ratio: 2 / 1; } }
.gallery figure { margin: 0; }

/* ---------- Join page ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li {
  counter-increment: step; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-5); position: relative;
}
.steps li::before {
  content: counter(step, arabic-indic);
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--red-600); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  margin-bottom: var(--space-3);
}
.steps h3 { font-size: 1.1rem; }
.steps p { margin: 0; }

.faq { display: grid; gap: var(--space-3); }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 var(--space-5);
  transition: box-shadow .2s var(--ease);
}
.faq details[open] { box-shadow: var(--shadow-sm); border-color: #d4c8b1; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 60px; padding-block: var(--space-3);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; flex: none; transition: transform .2s var(--ease); color: var(--red-600); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .answer { padding-bottom: var(--space-5); }
.faq .answer p:last-child, .faq .answer ul:last-child { margin-bottom: 0; }

/* ---------- Contact ---------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.contact-list li { display: flex; gap: var(--space-4); align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.contact-list .icon-bubble { margin: 0; width: 46px; height: 46px; border-radius: 12px; flex: none; }
.contact-list .icon-bubble svg { width: 24px; height: 24px; }
.contact-list .label { display: block; font-size: .9rem; color: var(--ink-soft); }
.map-ph { --ar: 16 / 10; }
@media (min-width: 880px) { .map-ph { --ar: 4 / 3; } }

.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-1); align-content: start; }
.field label { font-weight: 700; color: var(--navy); }
.field .hint { font-size: .9rem; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; color: var(--ink);
  min-height: 50px; padding: .6em .9em;
  background: #fff; border: 1.5px solid #cfc4ae; border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(44, 49, 120, .2);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--red-600); }
.req { color: var(--red-600); }
.form-status { min-height: 1.5em; font-weight: 700; margin: 0; }
.form-status.is-success { color: var(--green); }
.form-status.is-error { color: var(--red-600); }
@media (min-width: 640px) { .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } }
.form-row { display: grid; gap: var(--space-4); }

/* ---------- Footer (v2, 2026-11-07) ----------
   Navy, scout pattern, torn top edge that bites into the section above (replaces the one-sided tricolor stripe).
   Motto row, then three flex columns, then a bottom bar with a back-to-top link. See DESIGN.md §6m. */
.site-footer {
  --pattern-opacity: .06;
  background: var(--navy-900); color: #d5d8f3;
  padding-block: var(--space-7) var(--space-5);
  position: relative; z-index: 1;
}
.site-footer::after {   /* torn paper edge, same outline as the page-hero edge */
  content: ""; position: absolute; inset-inline: 0; top: -27px; height: 28px; background: var(--navy-900);
  clip-path: polygon(0.0% 34.0%, 1.0% 56.4%, 2.8% 41.2%, 4.6% 42.2%, 6.3% 53.3%, 7.4% 24.3%, 8.4% 45.5%, 9.3% 71.3%, 11.3% 27.1%, 13.1% 23.3%, 14.1% 56.4%, 16.2% 20.2%, 17.9% 43.5%, 19.9% 53.6%, 20.9% 46.0%, 22.7% 38.7%, 23.5% 23.7%, 25.3% 35.9%, 26.9% 55.0%, 28.1% 34.3%, 30.1% 54.7%, 31.1% 45.7%, 33.1% 45.5%, 34.8% 35.6%, 36.9% 28.2%, 38.8% 46.6%, 40.2% 58.6%, 41.3% 46.8%, 43.3% 31.7%, 44.7% 55.2%, 46.5% 27.0%, 47.3% 25.6%, 48.2% 28.0%, 49.3% 31.8%, 51.0% 23.0%, 52.6% 47.9%, 54.1% 58.8%, 56.1% 19.3%, 58.2% 44.8%, 59.9% 25.4%, 61.8% 21.0%, 63.4% 32.8%, 65.5% 56.1%, 66.5% 53.9%, 68.5% 54.5%, 70.1% 30.7%, 71.9% 28.0%, 73.5% 27.8%, 75.0% 21.0%, 77.1% 72.6%, 78.9% 66.9%, 80.0% 51.7%, 81.3% 25.2%, 82.4% 54.7%, 83.4% 45.5%, 84.3% 52.6%, 85.1% 50.2%, 86.4% 25.8%, 88.1% 47.0%, 89.6% 48.3%, 90.7% 38.3%, 92.6% 53.8%, 94.4% 22.5%, 95.3% 53.1%, 97.1% 49.6%, 99.0% 21.6%, 100.0% 40.0%, 100% 100%, 0% 100%);
  pointer-events: none;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--yellow); }
.site-footer h2 { color: #fff; font-size: 1.05rem; margin: 0 0 var(--space-3); }
.site-footer p { margin: 0 0 var(--space-4); }

.footer-motto {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5);
  padding-bottom: var(--space-6); margin-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-motto img { width: 96px; height: 96px; flex: none; }
.footer-motto__name { font-family: var(--font-display); font-weight: 700; color: var(--yellow); font-size: 1.05rem; margin: 0 0 var(--space-1) !important; }
.footer-motto__line {
  font-family: var(--font-display); font-weight: 800; color: #fff; line-height: 1.4;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem); margin: 0 !important; text-wrap: balance;
}
.footer-motto__by { color: #b9bde6; font-size: .95rem; margin: var(--space-2) 0 0 !important; }
.footer-motto__line mark { background: var(--yellow); color: var(--navy-900); padding: 0 .25em; border-radius: 8px; }

.footer-cols { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-7); }
.footer-col { flex: 1 1 240px; min-width: 0; }
.footer-col--links { flex: 1.3 1 330px; }
.footer-col--hq { flex: 1.3 1 280px; }

.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.footer-links li { flex: 1 1 calc(50% - var(--space-2)); }
.footer-links a {
  display: flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 .9em;
  border-radius: 999px; background: rgba(255, 255, 255, .06); text-decoration: none;
  font-size: .95rem; white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease);
}
.footer-links a:hover { background: rgba(255, 255, 255, .14); }
.footer-links__arrow { width: 14px; height: 14px; flex: none; color: var(--yellow); }

.footer-hq { display: flex; gap: var(--space-3); align-items: flex-start; }
.footer-hq__icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--green); color: #fff;
}
.footer-hq__icon svg { width: 20px; height: 20px; }
.site-footer address { font-style: normal; line-height: 1.9; }

.social { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .1); transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.social a:hover { background: var(--yellow); color: var(--navy-900); transform: translateY(-2px); }
.social svg { width: 20px; height: 20px; }

.footer-bottom {
  margin-top: var(--space-7); padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5);
  font-size: .92rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom p:first-child { margin-inline-end: auto; }
.to-top {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: 0 1em;
  border-radius: 999px; background: rgba(255, 255, 255, .08); text-decoration: none; font-weight: 600;
}
.to-top:hover { background: rgba(255, 255, 255, .16); }
.to-top svg { width: 18px; height: 18px; }
.site-footer .ph { color: var(--ph-ink); }
@media (max-width: 560px) {
  .footer-motto { flex-direction: column; text-align: center; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-bottom p:first-child { margin-inline-end: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .social a:hover { transform: none; } }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed; z-index: 40;
  inset-inline-end: 16px; bottom: 16px;   /* RTL → bottom-left */
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1f8f4e; color: #fff;        /* 4.6:1 with white */
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
  transition: transform .2s var(--ease), background-color .2s;
}
.wa-float:hover { transform: scale(1.06); background: #177a41; color: #fff; }
.wa-float svg { width: 30px; height: 30px; }
@supports (bottom: env(safe-area-inset-bottom)) {
  .wa-float { bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  a.card:hover, .btn--primary:hover, .wa-float:hover { transform: none; }
}

/* Utilities */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); }
.text-center { text-align: center; }
.muted { color: var(--ink-soft); }

@media print {
  .site-header, .wa-float, .nav-toggle, .hero-mountains { display: none !important; }
  body { background: #fff; }
}

/* ---------- Home intro (من نحن): redesigned 2026-11-07, see DESIGN.md ----------
   Organic photo composition + full editorial paragraph. No one-sided accents. */
.intro { overflow: hidden; }
.intro-grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .intro-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }

.intro-tag {
  display: inline-block; margin: 0 0 var(--space-3);
  padding: .25em .9em; border-radius: 999px;
  background: var(--green-100); color: var(--green);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
}
.intro-text h2 { font-size: clamp(1.75rem, 4.4vw, 2.6rem); margin-bottom: var(--space-3); }
/* Full paragraph, editorial: larger type, one accent (soft yellow highlighter on the three aims) */
.intro-lead {
  max-width: 54ch; margin: 0 0 var(--space-5);
  font-size: clamp(1.12rem, 1.9vw, 1.3rem); line-height: 2; color: var(--ink);
}
.intro-lead .hl {
  font-weight: 700; color: var(--navy);
  background: linear-gradient(to top, rgba(244, 234, 11, .38) 0 34%, transparent 34%);
  border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.intro-belief {
  max-width: 32ch; margin: 0 0 var(--space-6); text-wrap: balance;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.7; color: var(--navy);
}
.intro-belief span { color: var(--green); }

.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; color: var(--navy); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: .45em; text-decoration-color: rgba(44, 49, 120, .3);
}
.text-link:hover { text-decoration-color: currentColor; color: var(--navy); }

/* Photo composition: large photo with organic corners, smaller overlapping photo, experience badge */
.intro-media { position: relative; padding-bottom: 12%; padding-inline-end: 8%; }
.intro-photo { margin: 0; overflow: hidden; box-shadow: var(--shadow); background: var(--paper-2); }
.intro-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro-photo--main { aspect-ratio: 4 / 3; border-radius: 28px 120px 28px 28px; }
.intro-photo--small {
  position: absolute; inset-inline-end: 0; bottom: 0;
  width: 38%; aspect-ratio: 4 / 5;
  border-radius: 24px; border: 6px solid var(--paper);
}
.intro-badge {
  position: absolute; inset-inline-start: -8px; bottom: 6%;
  margin: 0; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--navy); color: #fff; border-radius: 18px; box-shadow: var(--shadow);
  max-width: 230px;
}
.intro-badge b { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--yellow); }
.intro-badge span { font-size: .92rem; line-height: 1.4; font-weight: 500; }
@media (max-width: 520px) {
  .intro-badge { inset-inline-start: 0; bottom: 2%; padding: var(--space-2) var(--space-3); max-width: 190px; }
  .intro-badge b { font-size: 1.6rem; }
  .intro-badge span { font-size: .82rem; }
}

/* Intro photo composition: entrance on scroll + subtle image-only parallax (main.js sets --py-*) */
.js .intro-media.reveal { opacity: 1; transform: none; }          /* children animate instead of the wrapper */
.intro-photo--main .intro-photo__img { scale: 1.12; translate: 0 var(--py-main, 0px); will-change: translate; }
.intro-photo--small { translate: 0 var(--py-small, 0px); }
.intro-badge { translate: 0 var(--py-badge, 0px); }
@media (prefers-reduced-motion: no-preference) {
  .js .intro-media .intro-photo--main { clip-path: inset(0 0 0 100% round 28px 120px 28px 28px); transition: clip-path 1s cubic-bezier(.65, 0, .35, 1); }
  .js .intro-media .intro-photo--small { opacity: 0; transform: translateY(40px) rotate(-4deg); transition: opacity .6s var(--ease) .35s, transform .7s var(--ease) .35s; }
  .js .intro-media .intro-badge { opacity: 0; transform: scale(.8); transform-origin: center; transition: opacity .45s var(--ease) .65s, transform .55s cubic-bezier(.34, 1.56, .64, 1) .65s; }
  .js .intro-media.is-visible .intro-photo--main { clip-path: inset(0 0 0 0 round 28px 120px 28px 28px); }
  .js .intro-media.is-visible .intro-photo--small { opacity: 1; transform: none; }
  .js .intro-media.is-visible .intro-badge { opacity: 1; transform: none; }
}

/* Intro photos: slow zoom on hover (image grows inside its frame, so the layout never shifts).
   Mouse devices only; off for reduced motion. Decorative, not clickable: no pointer cursor. */
.intro-photo img { transition: scale 1.6s cubic-bezier(.2, .7, .2, 1); }
.intro-photo--small img { scale: 1; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .intro-photo--main:hover .intro-photo__img { scale: 1.24; }
  .intro-photo--small:hover img { scale: 1.12; }
}

/* ---------- Home: age groups as full-bleed photo panels (redesigned 2026-11-07, see DESIGN.md) ----------
   Edge-to-edge strip of tall photos; giant yellow age number, title, one line, gradient from the bottom.
   Whole panel is one link. No one-sided accents. */
.ages { padding-block: var(--space-8) 0; background: var(--paper); }
.ages-head { text-align: center; max-width: 720px; margin-bottom: var(--space-6); }
.ages-head h2 { margin-bottom: var(--space-2); }
.ages-head p:last-child { color: var(--ink-soft); font-size: 1.08rem; margin: 0; }

.age-strip { display: grid; gap: 4px; grid-template-columns: 1fr; background: var(--paper); }
@media (min-width: 760px) { .age-strip { grid-template-columns: repeat(3, 1fr); } }

.age-panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 460px; color: #fff; text-decoration: none;
  background: var(--navy-900);
}
@media (min-width: 760px) { .age-panel { min-height: clamp(540px, 78vh, 760px); } }
.age-panel:hover, .age-panel:focus-visible { color: #fff; }
.age-panel:focus-visible { outline: 4px solid var(--yellow); outline-offset: -8px; border-radius: 0; }

.age-panel__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: scale 1.6s cubic-bezier(.2, .7, .2, 1);
}
.age-panel::after {               /* readability gradient, full width, from the bottom */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(22, 25, 70, .94) 0%, rgba(22, 25, 70, .72) 34%, rgba(22, 25, 70, .15) 66%, rgba(22, 25, 70, 0) 100%);
}

.age-panel__body { display: grid; gap: var(--space-2); padding: var(--space-6) var(--space-5) var(--space-6); width: 100%; }
@media (min-width: 1100px) { .age-panel__body { padding: var(--space-7) var(--space-6); } }
.age-panel__num {
  display: flex; align-items: baseline; gap: .3em;
  font-family: var(--font-display); font-weight: 800; line-height: .95;
  font-size: clamp(4rem, 8vw, 7.5rem); color: var(--yellow);
  text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
}
.age-panel__num small { font-size: .2em; font-weight: 700; color: #fff; text-shadow: none; }
.age-panel__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.3; }
.age-panel__text { color: #e6e8fa; font-size: 1rem; line-height: 1.75; max-width: 36ch; }
.age-panel__more {
  display: inline-flex; align-items: center; gap: .45em; margin-top: var(--space-2);
  font-weight: 700; color: #fff;
}
.age-panel__more svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .age-panel:hover .age-panel__img { scale: 1.08; }
  .age-panel:hover .age-panel__more svg { transform: translateX(-6px); }   /* RTL: forward is left */
}

/* Age panels: description revealed on hover (mouse devices) or keyboard focus.
   Touch devices keep it visible, since they have no hover. The panel height is fixed, so nothing on the page moves. */
.age-panel__reveal { display: grid; grid-template-rows: 1fr; }
.age-panel__reveal > .age-panel__text { overflow: hidden; min-height: 0; }
@media (hover: hover) {
  .age-panel__reveal {
    grid-template-rows: 0fr; opacity: 0; transform: translateY(10px);
    transition: grid-template-rows .55s var(--ease), opacity .45s var(--ease), transform .55s var(--ease);
  }
  .age-panel:hover .age-panel__reveal,
  .age-panel:focus-visible .age-panel__reveal { grid-template-rows: 1fr; opacity: 1; transform: none; }
}

/* ---------- Home: activity explorer (redesigned 2026-11-07, see DESIGN.md) ----------
   Dark band. Tabs (start side) switch a stack of photo "prints" (end side) and a panel of chips.
   No icon cards, no one-sided accents. */
.acts { background: var(--navy-900); color: #fff; padding-block: var(--space-8); overflow: hidden; position: relative; isolation: isolate; }
.acts::before {                       /* warm campfire glow behind the photos */
  content: ""; position: absolute; z-index: -1; width: 70vmax; height: 70vmax; border-radius: 50%;
  inset-inline-end: -20vmax; top: 50%; translate: 0 -50%;
  background: radial-gradient(closest-side, rgba(237, 32, 36, .22), rgba(244, 234, 11, .06) 55%, transparent 75%);
  pointer-events: none;
}
.acts-grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 960px) { .acts-grid { grid-template-columns: 1fr 1.05fr; gap: var(--space-8); } }

.intro-tag--dark { background: rgba(255, 255, 255, .1); color: var(--yellow); }
.acts h2 { color: #fff; font-size: clamp(1.75rem, 4.2vw, 2.6rem); margin-bottom: var(--space-3); }
.acts-lead { color: #d5d8f3; font-size: 1.12rem; line-height: 1.9; max-width: 46ch; margin-bottom: var(--space-6); }

/* Tabs */
.act-tabs { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); grid-template-columns: repeat(3, 1fr); }
@media (min-width: 960px) { .act-tabs { grid-template-columns: 1fr; } }
.act-tab {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-3); min-height: 64px;
  font: inherit; color: #fff; text-align: start; cursor: pointer;
  background: transparent; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.act-tab:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); }
.act-tab[aria-selected="true"] { background: rgba(255, 255, 255, .1); border-color: var(--yellow); }
.act-tab:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.act-tab__num {
  flex: none; font-family: var(--font-display); font-weight: 800; line-height: 1; direction: ltr;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem); color: transparent; min-width: 2.2ch; letter-spacing: .02em;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55);
  transition: color .3s var(--ease);
}
.act-tab[aria-selected="true"] .act-tab__num { color: var(--yellow); -webkit-text-stroke: 1.5px var(--yellow); }
.act-tab__label { display: grid; gap: 2px; }
.act-tab__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.35; }
.act-tab__tag { font-size: .9rem; color: #c3c7ec; }
@media (max-width: 959px) {
  .act-tab { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .act-tab__title { font-size: .95rem; }
  .act-tab__tag { display: none; }
}

/* Panel */
.act-panel p { color: #e6e8fa; font-size: 1.05rem; line-height: 1.9; max-width: 52ch; margin-bottom: var(--space-4); }
.act-panel:focus-visible { outline: 3px solid var(--yellow); outline-offset: 6px; border-radius: 8px; }
.act-panel:not([hidden]) { animation: actIn .45s var(--ease); }
@keyframes actIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.act-chips { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.act-chips li {
  padding: .3em .95em; border-radius: 999px; font-size: .95rem;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
}
.act-link {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px;
  font-weight: 700; color: var(--yellow); text-decoration: underline; text-underline-offset: .45em;
  text-decoration-color: rgba(244, 234, 11, .4);
}
.act-link:hover { color: var(--yellow); text-decoration-color: currentColor; }
.act-link svg { width: 18px; height: 18px; }

/* Stage: stacked photo prints with a white frame all round */
.act-stage { position: relative; aspect-ratio: 1 / .9; max-width: 600px; width: 100%; margin-inline: auto; }
.act-prints { position: absolute; inset: 0; visibility: hidden; }
.act-prints.is-active { visibility: visible; }
.act-print {
  position: absolute; margin: 0; padding: 10px; background: #fbf7ef; border-radius: 6px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
}
.act-print img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.act-print--main { width: 82%; aspect-ratio: 4 / 3; inset-inline-start: 0; top: 4%; rotate: -3deg; }
.act-print--small { width: 40%; aspect-ratio: 4 / 5; inset-inline-end: 0; bottom: 0; rotate: 5deg; padding: 8px; }
.act-print--main img { aspect-ratio: auto; }

/* Switching animation: the new stack drops in, the old one fades away */
.act-prints .act-print { opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.act-prints.is-active .act-print { opacity: 1; transform: none; }
.act-prints.is-active .act-print--small { transition-delay: .12s; }
.act-prints:not(.is-active) { transition: visibility 0s linear .5s; }

@media (prefers-reduced-motion: reduce) {
  .act-panel:not([hidden]) { animation: none; }
}
@media (max-width: 959px) { .act-stage { aspect-ratio: 1 / .78; } .act-print--main { top: 0; } }

/* ---------- Home: values trail (مسار القيم), created 2026-11-07, see DESIGN.md ----------
   No grid: six stations along a winding dotted trail. Desktop: horizontal flex row with
   alternating heights over an SVG wave. Phones: vertical stack along a dotted trail line. */
.values { padding-block: var(--space-8); background: var(--paper); overflow: hidden; }
.values-head { text-align: center; max-width: 680px; margin: 0 auto var(--space-7); }
.values-head h2 { margin-bottom: var(--space-2); }
.values-head p:last-child { color: var(--ink-soft); font-size: 1.1rem; margin: 0; }

.values-trail { position: relative; }
.js .values-trail.reveal { opacity: 1; transform: none; }   /* children animate instead */
.value-stops { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: var(--space-5); }

.value-stop { display: flex; align-items: flex-start; gap: var(--space-4); }
.value-stop__mark {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; color: var(--navy);
  border: 2px solid var(--line); box-shadow: 0 6px 18px rgba(30, 33, 64, .08);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  position: relative; z-index: 1;
}
.value-stop__mark svg { width: 30px; height: 30px; }
.value-stop h3 { font-size: 1.2rem; margin: 0 0 var(--space-1); }
.value-stop p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.75; max-width: 34ch; }
.value-stop:hover .value-stop__mark { background: var(--yellow); border-color: var(--yellow); transform: scale(1.06); }

/* Phones: vertical dotted trail behind the markers (a background pattern, not a border) */
.values-path { display: none; }
.values-line {
  position: absolute; inset-inline-start: 30px; top: 32px; bottom: 32px; width: 4px;
  background: radial-gradient(circle, #c9bda5 1.6px, transparent 1.9px) center top / 4px 12px repeat-y;
}

@media (min-width: 1000px) {
  .values-line { display: none; }
  .values-path {
    display: block; position: absolute; inset-inline: 0; top: 0; width: 100%; height: 176px;
    overflow: visible; pointer-events: none;
  }
  .values-path path { fill: none; stroke-width: 3; stroke-linecap: round; }
  .values-path__dots { stroke: #c9bda5; stroke-dasharray: 0 12; }
  .values-path__draw { stroke: var(--green); stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .55; }
  .value-stops { flex-direction: row; gap: 0; }
  .value-stop { flex: 1; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding-inline: var(--space-2); }
  .value-stop:nth-child(even) { margin-top: 100px; }          /* marker centres at y=38 / 138, matching the SVG wave */
  .value-stop__mark { width: 76px; height: 76px; }
  .value-stop__mark svg { width: 34px; height: 34px; }
  .value-stop p { max-width: 22ch; margin-inline: auto; }
}

/* Reveal: the trail draws itself, stations pop in one after another */
@media (prefers-reduced-motion: no-preference) {
  .js .values-trail .values-path__draw { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.45, 0, .2, 1) .2s; }
  .js .values-trail.is-visible .values-path__draw { stroke-dashoffset: 0; }
  .js .values-trail .value-stop { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.25s + var(--i) * .3s); }
  .js .values-trail .value-stop__mark { scale: .6; transition: scale .5s cubic-bezier(.34, 1.56, .64, 1) calc(.25s + var(--i) * .3s), background-color .35s, color .35s, border-color .35s, transform .35s; }
  .js .values-trail.is-visible .value-stop { opacity: 1; transform: none; }
  .js .values-trail.is-visible .value-stop__mark { scale: 1; }
}

/* ---------- Home: shared section head (title on the start side, link on the end side) ---------- */
.split-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-3) var(--space-6); margin-bottom: var(--space-6);
}
.split-head h2 { margin: 0; }

/* ---------- Home: gallery (لحظات من مسيرتنا), created 2026-11-07, see DESIGN.md ----------
   Justified rows with flexbox: each photo grows in proportion to its aspect ratio (--ar),
   so every row fills the width without cropping much. Opens in the lightbox below. */
.moments { padding-block: var(--space-8); background: var(--paper); }
.gallery-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Basis is sized from the gallery's own width (cqw) so the photos always fall into balanced rows:
   4 rows of 2 on phones, 2 rows of 4 from 768px. This depends on the photo ORDER in index.html
   (pairs/fours whose aspect ratios add up to about the same total); see DESIGN.md before reordering. */
.moments .container { container-type: inline-size; }
.gallery-rows > li {
  flex: calc(var(--ar) * 100) 1 calc(var(--ar) * 120px); aspect-ratio: var(--ar); min-width: 0;
  flex-basis: calc(var(--ar) * (100cqw - 12px) / 2.7);
}
@media (min-width: 768px) {
  .gallery-rows > li { flex-basis: calc(var(--ar) * 200px); flex-basis: calc(var(--ar) * (100cqw - 36px) / 4.85); }
}
.gallery-item {
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: var(--radius); overflow: hidden; background: var(--paper-2);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.gallery-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(27, 31, 82, .4), transparent 55%);
  opacity: 0; transition: opacity .3s var(--ease);
}
@media (hover: hover) {
  .gallery-item:hover img { transform: scale(1.06); }
  .gallery-item:hover::after { opacity: 1; }
}
.gallery-item:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.gallery-item:focus-visible::after { opacity: 1; }

/* Lightbox (native <dialog>: focus stays inside, Esc closes) */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0;
  padding: var(--space-8) var(--space-4) var(--space-6); border: 0;
  background: rgba(15, 17, 45, .95); color: #fff;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(15, 17, 45, .6); }
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: min(1100px, 100%); }
.lightbox__img { display: block; max-width: 100%; max-height: calc(100dvh - 190px); width: auto; height: auto; border-radius: var(--radius-sm); }
.lightbox__cap { max-width: 60ch; text-align: center; color: #e6e7f3; font-size: 1rem; line-height: 1.7; }
.lightbox__count { color: var(--yellow); font-weight: 700; margin-inline-start: .4em; }
.lightbox__btn {
  position: absolute; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; transition: background-color .2s var(--ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .28); }
.lightbox__btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.lightbox__btn svg { width: 24px; height: 24px; }
.lightbox__close { top: var(--space-4); inset-inline-end: var(--space-4); }
.lightbox__prev, .lightbox__next { bottom: var(--space-4); }
.lightbox__prev { inset-inline-start: calc(50% - 56px); }
.lightbox__next { inset-inline-end: calc(50% - 56px); }
@media (min-width: 768px) {
  .lightbox { padding-inline: 88px; }
  .lightbox__prev, .lightbox__next { bottom: auto; top: 50%; translate: 0 -50%; }
  .lightbox__prev { inset-inline-start: var(--space-5); }
  .lightbox__next { inset-inline-end: var(--space-5); }
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] .lightbox__img { animation: lb-in .35s var(--ease); }
}
@keyframes lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Home: news board (آخر الأخبار), v2 2026-11-07, see DESIGN.md ----------
   Last section before the footer. One featured story (full photo, dark gradient, white text) beside a column
   of three compact story rows. The title link is stretched over the whole card; keyboard focus rings the card.
   Calendar chip for dates, category pill. Flexbox only. */
.news-board { padding-block: var(--space-8) var(--space-9); background: var(--paper-2); }
.news-layout { display: flex; flex-direction: column; gap: var(--space-5); }
.story { position: relative; }
.story__title a { color: inherit; text-decoration: none; }
.story__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.story__title a:focus-visible { outline: none; }
.story:has(.story__title a:focus-visible) { outline: 3px solid var(--navy); outline-offset: 4px; }
.story__img { display: block; }
.story__more { display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-display); font-weight: 700; }
.story__more svg { width: 18px; height: 18px; transition: translate .25s var(--ease); }
.story__cat {
  display: inline-block; margin: 0; padding: .2em .8em; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem; line-height: 1.6;
}

/* Calendar chip (day big, month under it) */
.news-cal {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 66px;
  padding: .45em .7em .55em; border-radius: 14px; background: #fff; color: var(--navy);
  font-family: var(--font-display); line-height: 1.15; box-shadow: var(--shadow-sm);
}
.news-cal b { font-size: 1.7rem; font-weight: 800; }
.news-cal span:not(.visually-hidden) { font-size: .8rem; font-weight: 700; color: var(--red-600); }

/* Featured story */
.story--lead {
  min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 28px; overflow: hidden; isolation: isolate; color: #fff; box-shadow: var(--shadow);
}
.story--lead .story__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.story--lead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(15, 17, 45, .94) 0%, rgba(15, 17, 45, .6) 42%, rgba(15, 17, 45, 0) 72%);
}
.story--lead .news-cal { position: absolute; top: var(--space-5); inset-inline-start: var(--space-5); }
.story--lead .story__body { padding: var(--space-6) var(--space-5) var(--space-5); }
.story--lead .story__cat { margin-bottom: var(--space-3); background: var(--yellow); color: var(--navy-900); }
.story--lead .story__title { margin: 0 0 var(--space-3); color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.45; text-wrap: balance; }
.story--lead .story__text { margin: 0 0 var(--space-4); max-width: 52ch; color: #e6e7f3; }
.story--lead .story__more { color: var(--yellow); }

/* Compact rows */
.news-side { display: flex; flex-direction: column; gap: var(--space-4); }
.story--row {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3);
  border-radius: 22px; background: var(--card); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.story--row .story__img { flex: none; width: clamp(92px, 26%, 140px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.story--row .story__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-inline-end: var(--space-2); }
.story__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.story--row .story__cat { background: var(--green-100); color: var(--green); }
.story--row .news-cal { flex-direction: row; align-items: baseline; gap: .3em; min-width: 0; padding: 0; background: none; box-shadow: none; }
.story--row .news-cal b { font-size: 1rem; }
.story--row .news-cal span:not(.visually-hidden) { font-size: .85rem; color: var(--ink-soft); }
.story--row .story__title { margin: 0; font-size: 1.08rem; line-height: 1.55; color: var(--ink); }
.story--row .story__more { font-size: .92rem; color: var(--navy); }

@media (hover: hover) {
  .story--lead:hover .story__img { transform: scale(1.05); }
  .story--row:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  .story:hover .story__more svg { translate: -4px 0; }
}
@media (min-width: 900px) {
  .news-layout { flex-direction: row; align-items: stretch; }
  .story--lead { flex: 1.3 1 0; min-height: 460px; }
  .story--lead .story__body { padding: var(--space-7) var(--space-6) var(--space-6); }
  .news-side { flex: 1 1 0; }
  .story--row { flex: 1; }
}

/* ---------- Home: join CTA (لماذا كشافة الفينيق؟), redesigned 2026-11-07, see DESIGN.md ----------
   Green rounded panel with reasons to join; an arched photo breaks out above the panel's top edge.
   Replaces the old navy .cta-band on the home page (the band, with its one-sided tricolor stripe, stays on inner pages). */
.join-cta { padding-block: calc(var(--space-9) + var(--space-4)) var(--space-8); background: var(--paper); }
.join-panel {
  position: relative; display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg);
  background: var(--green); color: #fff;
}
.join-panel { --pattern-opacity: .12; }
.join-panel h2 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin: 0 0 var(--space-3); text-wrap: balance; }
.join-panel__lead { margin: 0 0 var(--space-5); max-width: 46ch; color: #e3f0e6; font-size: 1.1rem; }
.join-reasons { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.join-reasons li { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 500; font-size: 1.05rem; line-height: 1.6; }
.join-reasons__mark {
  flex: none; width: 28px; height: 28px; margin-top: .05em; border-radius: 50%;
  display: grid; place-items: center; background: var(--yellow); color: var(--green);
}
.join-reasons__mark svg { width: 16px; height: 16px; }
.btn--yellow { background: var(--yellow); color: var(--navy-900); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.btn--yellow:hover { background: #fff; color: var(--navy); transform: translateY(-2px); }
/* Torn-paper cutout (2026-11-07, replaces the arch): the photo has a torn top edge and dry-brush streaks
   on its outer (left) side; a paper-coloured layer behind it shows as a torn white strip along the top.
   Built with clip-path polygons in percent (scales with the photo and works when opened from disk;
   no CSS masks). Polygons generated by a script, see DESIGN.md 6i. */
.join-panel__photo {
  position: relative; order: -1; align-self: center; width: min(70%, 280px); aspect-ratio: 4 / 5;
  margin: calc(var(--space-9) * -1) 0 0;
  rotate: -2deg; filter: drop-shadow(0 14px 22px rgba(15, 30, 20, .32));
}
.join-panel__photo::before, .torn-photo::before {
  content: ""; position: absolute; inset: 0; background: var(--paper);
  clip-path: polygon(97.2% 2.6%, 93.9% 2.6%, 91.3% 1.4%, 88.5% 6.8%, 86.8% 4.2%, 85.1% 4.9%, 82.3% 3.3%, 80.7% 5.4%, 78.7% 0.7%, 76.3% 4.3%, 73.5% 2.8%, 71.1% 1.8%, 67.7% 4.3%, 65.5% 1.6%, 63.8% 4.0%, 60.7% 2.3%, 57.6% 0.6%, 54.3% 2.7%, 52.0% 0.9%, 49.0% 4.6%, 45.7% 6.6%, 43.9% 0.9%, 42.0% 3.1%, 40.0% 3.8%, 37.3% 1.1%, 35.3% 1.8%, 32.2% 1.9%, 30.3% 2.3%, 27.5% 1.0%, 25.5% 1.7%, 23.3% 4.1%, 20.7% 1.7%, 18.4% 2.6%, 15.9% 3.1%, 14.0% 1.3%, 10.9% 1.7%, 8.0% 4.7%, 7.0% 6.0%, 8.3% 7.0%, 1.7% 8.0%, 4.8% 8.9%, 1.3% 9.7%, 3.2% 10.9%, 1.0% 12.1%, 2.6% 12.8%, 8.8% 13.5%, 10.6% 14.7%, 4.2% 15.9%, 6.0% 16.5%, 0.0% 17.1%, 1.1% 17.9%, 3.7% 18.7%, 7.4% 19.6%, 7.4% 20.6%, 10.2% 21.9%, 0.0% 23.2%, 2.6% 23.8%, 9.5% 24.4%, 12.4% 25.0%, 1.0% 25.6%, 5.0% 26.6%, 0.4% 27.5%, 4.1% 28.8%, 7.7% 30.2%, 11.5% 31.6%, 0.9% 32.9%, 4.5% 34.4%, 1.2% 35.9%, 3.9% 37.4%, 5.5% 38.9%, 8.3% 40.1%, 0.7% 41.2%, 4.4% 42.8%, 5.5% 44.4%, 8.3% 45.8%, 1.3% 47.1%, 4.6% 47.8%, 0.6% 48.5%, 2.3% 49.5%, 6.3% 50.6%, 10.0% 51.8%, 0.0% 53.1%, 1.9% 54.0%, 0.0% 54.9%, 2.3% 56.4%, 1.5% 57.9%, 4.5% 58.8%, 0.1% 59.7%, 3.8% 61.1%, 5.5% 62.5%, 7.4% 63.7%, 0.3% 64.9%, 3.8% 66.3%, 9.5% 67.8%, 11.0% 68.7%, 0.0% 69.5%, 1.9% 70.3%, 6.3% 71.2%, 9.8% 72.1%, 6.0% 73.0%, 7.1% 73.7%, 3.1% 74.3%, 5.8% 75.6%, 1.2% 77.0%, 2.6% 77.6%, 0.0% 78.2%, 0.6% 79.6%, 0.0% 81.1%, 1.3% 82.3%, 7.4% 83.5%, 11.3% 84.9%, 4.2% 86.3%, 5.7% 87.4%, 0.2% 88.5%, 1.8% 89.8%, 0.0% 91.1%, 2.4% 92.4%, 6.0% 97.6%, 10.4% 96.9%, 14.9% 98.5%, 17.6% 98.6%, 21.9% 96.0%, 25.5% 97.6%, 30.3% 96.8%, 34.2% 98.4%, 38.7% 98.6%, 42.4% 97.7%, 45.4% 97.9%, 49.9% 97.7%, 54.2% 96.3%, 59.0% 98.7%, 63.9% 97.3%, 68.4% 96.6%, 73.2% 98.3%, 76.5% 95.9%, 80.1% 97.4%, 84.6% 97.2%, 87.1% 98.2%, 89.8% 98.2%, 92.7% 96.7%, 98.7% 95.0%, 99.6% 91.6%, 100.0% 86.4%, 100.0% 81.3%, 100.0% 76.8%, 98.9% 73.6%, 99.1% 69.0%, 100.0% 63.8%, 100.0% 59.2%, 99.1% 54.6%, 100.0% 50.4%, 98.8% 44.7%, 100.0% 39.2%, 99.8% 34.6%, 99.7% 31.0%, 99.9% 26.5%, 100.0% 23.4%, 99.3% 18.9%, 99.8% 13.4%, 100.0% 9.0%);
}
.join-panel__photo img, .torn-photo img {
  position: relative; width: 100%; height: 100%; object-fit: cover; display: block;
  clip-path: polygon(96.0% 6.4%, 93.2% 5.5%, 91.0% 5.4%, 89.3% 9.0%, 86.9% 8.2%, 84.9% 7.5%, 82.3% 6.6%, 80.6% 8.3%, 78.8% 5.6%, 75.7% 5.9%, 72.9% 6.5%, 71.2% 5.4%, 68.4% 6.7%, 65.7% 6.8%, 62.7% 7.7%, 60.1% 7.1%, 57.2% 6.2%, 55.4% 6.7%, 53.5% 10.6%, 50.5% 7.3%, 48.3% 7.7%, 45.7% 6.8%, 42.4% 6.9%, 40.7% 7.7%, 37.3% 8.2%, 35.0% 10.8%, 33.1% 9.5%, 31.3% 6.1%, 28.1% 5.5%, 25.5% 8.4%, 22.4% 6.2%, 20.1% 8.4%, 18.2% 5.8%, 16.2% 6.9%, 14.1% 5.2%, 11.9% 7.2%, 9.0% 7.1%, 2.7% 9.0%, 6.3% 10.4%, 6.7% 11.8%, 8.1% 12.8%, 4.4% 13.8%, 6.1% 14.4%, 1.0% 15.1%, 2.0% 15.7%, 0.3% 16.4%, 1.4% 17.4%, 8.3% 18.3%, 10.1% 19.1%, 1.1% 19.8%, 4.6% 20.5%, 7.3% 21.3%, 8.5% 22.4%, 1.0% 23.4%, 4.5% 24.3%, 0.1% 25.2%, 2.7% 26.7%, 1.6% 28.3%, 4.2% 28.9%, 10.0% 29.5%, 11.8% 30.8%, 0.5% 32.1%, 3.1% 33.5%, 6.3% 34.9%, 9.7% 35.7%, 10.0% 36.5%, 13.4% 37.9%, 5.6% 39.3%, 7.7% 40.4%, 0.1% 41.6%, 1.9% 42.4%, 10.7% 43.3%, 14.5% 44.4%, 10.7% 45.4%, 12.3% 46.4%, 0.6% 47.3%, 3.5% 48.1%, 9.9% 48.9%, 12.8% 50.0%, 4.6% 51.1%, 8.3% 52.4%, 9.3% 53.6%, 10.8% 54.7%, 6.3% 55.8%, 10.2% 57.2%, 1.2% 58.6%, 4.4% 60.1%, 0.4% 61.7%, 4.1% 62.4%, 5.0% 63.2%, 9.0% 64.6%, 6.5% 66.0%, 7.8% 67.2%, 2.9% 68.3%, 5.5% 69.6%, 7.0% 70.8%, 10.5% 72.3%, 0.8% 73.8%, 2.5% 74.7%, 5.8% 75.6%, 7.2% 76.6%, 6.5% 77.6%, 9.2% 78.7%, 6.9% 79.7%, 9.4% 81.2%, 1.6% 82.7%, 3.9% 83.4%, 0.0% 84.0%, 1.5% 85.4%, 2.2% 86.8%, 4.2% 87.9%, 1.7% 89.1%, 3.0% 90.5%, 5.7% 91.9%, 9.1% 92.7%, 6.0% 96.0%, 9.9% 96.8%, 14.7% 95.8%, 18.7% 96.0%, 22.5% 96.6%, 26.1% 96.1%, 29.8% 97.4%, 34.1% 97.2%, 38.9% 95.2%, 42.8% 97.4%, 47.4% 94.8%, 50.2% 95.8%, 52.9% 95.2%, 55.6% 96.5%, 60.1% 97.3%, 62.9% 96.7%, 67.1% 94.9%, 71.8% 97.5%, 74.8% 97.4%, 78.3% 96.0%, 83.3% 97.1%, 86.2% 95.8%, 90.0% 95.5%, 93.0% 95.4%, 97.2% 95.0%, 98.2% 90.3%, 98.0% 87.3%, 98.4% 82.4%, 99.7% 79.2%, 99.6% 73.9%, 97.8% 70.5%, 99.1% 67.4%, 97.4% 63.6%, 99.5% 59.3%, 97.8% 53.9%, 99.5% 50.4%, 98.9% 45.7%, 97.2% 42.5%, 98.2% 37.4%, 99.5% 34.2%, 99.2% 29.3%, 99.3% 26.0%, 99.3% 22.8%, 98.0% 18.5%, 99.5% 13.8%, 97.4% 10.0%);
}
@media (min-width: 900px) {
  .join-panel { flex-direction: row; align-items: center; gap: var(--space-8); padding: var(--space-8); }
  .join-panel__body { flex: 1 1 auto; min-width: 0; }
  .join-reasons { flex-direction: row; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
  .join-reasons li { flex: 1 1 calc(50% - var(--space-5)); }
  .join-panel__photo { order: 0; flex: 0 0 36%; width: auto; max-width: 420px; align-self: flex-start; margin-top: calc(var(--space-9) * -1.5); }
}

/* ---------- Join page: troop cards (من يمكنه الانضمام؟), redesigned 2026-11-07, see DESIGN.md ----------
   Modelled on a pricing-plan layout: soft green "sky" gradient, three white rounded cards with a photo,
   the age range where a price would be, an activity list and one button. A troop photo fades in behind
   the lower half, and a torn paper edge leads into the next section (paper-2). Flexbox only, no masks. */
.troops {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--space-8) calc(var(--space-9) + var(--space-6));
  background: linear-gradient(to bottom, var(--paper) 0%, #eaf3ec 55%, #dcebdf 100%);
}
.troops::before {   /* photo band, faded into the gradient at its top */
  content: ""; position: absolute; inset: auto 0 0; height: 58%; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, #eaf3ec 0%, rgba(234, 243, 236, .55) 35%, rgba(234, 243, 236, 0) 70%),
    url("../images/act-trips.jpg") center 35% / cover no-repeat;
}
.troops::after {    /* torn paper edge into the next section */
  content: ""; position: absolute; inset: auto 0 -1px; height: 46px; z-index: 0; pointer-events: none;
  background: var(--paper-2);
  clip-path: polygon(0.0% 58.7%, 2.0% 21.7%, 3.4% 41.3%, 4.5% 37.6%, 5.9% 39.7%, 7.3% 40.6%, 8.6% 20.5%, 10.3% 46.9%, 12.4% 34.0%, 13.7% 43.2%, 15.0% 21.8%, 16.8% 44.0%, 18.5% 26.0%, 19.7% 53.9%, 20.7% 36.5%, 22.3% 54.1%, 23.6% 30.7%, 25.5% 42.2%, 26.5% 52.5%, 28.4% 28.5%, 30.5% 44.1%, 31.5% 77.1%, 32.4% 53.6%, 34.5% 53.4%, 36.1% 61.5%, 37.4% 60.9%, 38.4% 21.3%, 39.5% 59.1%, 40.6% 22.6%, 41.7% 41.9%, 42.8% 36.6%, 44.2% 33.1%, 46.2% 57.4%, 47.6% 48.5%, 49.2% 28.5%, 50.6% 52.0%, 52.2% 54.4%, 53.9% 32.6%, 55.8% 28.9%, 56.8% 42.7%, 57.9% 42.7%, 59.3% 65.3%, 61.2% 24.2%, 62.3% 48.0%, 63.7% 57.1%, 65.2% 48.3%, 66.8% 41.1%, 68.8% 21.8%, 70.8% 39.9%, 72.6% 44.6%, 73.8% 33.4%, 76.0% 33.0%, 77.4% 53.9%, 78.9% 29.2%, 79.9% 27.6%, 81.9% 40.1%, 83.3% 23.3%, 84.7% 55.8%, 86.7% 28.9%, 88.4% 19.9%, 89.6% 33.9%, 91.6% 22.0%, 92.9% 47.9%, 93.8% 58.3%, 94.9% 61.0%, 95.9% 18.8%, 96.9% 50.2%, 98.7% 43.1%, 100.0% 44.1%, 100% 100%, 0% 100%);
}
.troops-head { max-width: 640px; margin: 0 auto var(--space-7); text-align: center; }
.troops-head h2 { margin: 0 0 var(--space-3); text-wrap: balance; }
.troops-head p:last-child { margin: 0; color: var(--ink-soft); font-size: 1.1rem; }

.troop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); }
.troop { flex: 1 1 290px; max-width: 380px; display: flex; }
.troop--cubs { --troop-ink: #6b5f00; --troop-tint: var(--yellow-soft); }
.troop--scouts { --troop-ink: var(--green); --troop-tint: var(--green-100); }
.troop--rovers { --troop-ink: var(--red-600); --troop-tint: #fde4e4; }

.troop-card {
  flex: 1; display: flex; flex-direction: column;
  padding: var(--space-3) var(--space-3) var(--space-5);
  background: var(--card); border-radius: 28px;
  box-shadow: 0 2px 6px rgba(30, 33, 64, .06), 0 18px 40px rgba(30, 60, 40, .14);
}
.troop-card__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; border-radius: 20px; }
.troop-card__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-3) var(--space-3);
}
.troop-card__head h3 { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.troop-card__age { margin: 0; flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.troop-card__age b { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--troop-ink); }
.troop-card__age span { margin-top: .3em; font-size: .85rem; font-weight: 500; color: var(--ink-soft); }
.troop-card__list {
  list-style: none; margin: 0 var(--space-3); padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line);   /* neutral hairline divider, allowed by rule 0 */
  display: flex; flex-direction: column; gap: var(--space-3);
}
.troop-card__list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 1rem; line-height: 1.6; }
.troop-card__tick {
  flex: none; width: 24px; height: 24px; margin-top: .1em; border-radius: 50%;
  display: grid; place-items: center; background: var(--troop-tint); color: var(--troop-ink);
}
.troop-card__tick svg { width: 14px; height: 14px; }
.troop-card__actions {
  margin-top: auto; padding: var(--space-5) var(--space-3) 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
}

/* ---------- Home: founder quote (كلمة المؤسّس), redesigned 2026-11-07, see DESIGN.md ----------
   Replaces the red quote band. Paper with the faint navy scout pattern; quote in large navy Cairo 800 with
   one soft-yellow highlighted phrase; Baden-Powell portrait as a torn-paper cutout (shares the join photo's
   clip-path polygons through .torn-photo). Attribution has no leading dash (rule 0). Flexbox only. */
.founder { padding-block: var(--space-8); background: var(--paper-2); }
.torn-photo { position: relative; margin: 0; filter: drop-shadow(0 14px 22px rgba(30, 33, 64, .22)); }
.founder__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-7); }
.founder__quote { margin: 0; max-width: 40rem; text-align: center; }
.founder__mark { display: block; width: 52px; height: 52px; margin: var(--space-2) auto var(--space-3); color: var(--red-600); }
.founder__quote blockquote { margin: 0; }
.founder__quote blockquote p {
  margin: 0; font-family: var(--font-display); font-weight: 800; color: var(--navy);
  font-size: clamp(1.75rem, 4.2vw, 3rem); line-height: 1.55; text-wrap: balance;
}
.founder__hl {
  color: inherit; padding: 0 .1em; border-radius: 2px;
  background: linear-gradient(to top, rgba(244, 234, 11, .55) 0 32%, transparent 32%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.founder__quote figcaption { margin-top: var(--space-5); display: flex; flex-direction: column; align-items: center; gap: .15em; }
.founder__quote figcaption strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--green); }
.founder__quote figcaption span { color: var(--ink-soft); }
.founder__portrait { width: min(58%, 220px); aspect-ratio: 603 / 807; rotate: 2deg; }
.founder__portrait::before { background: #fff; }  /* white torn edge shows on the paper background */
@media (min-width: 900px) {
  .founder__inner { flex-direction: row; justify-content: center; gap: var(--space-9); }
  .founder__quote { flex: 0 1 36rem; text-align: start; }
  .founder__mark { margin-inline: 0; }
  .founder__quote figcaption { align-items: flex-start; }
  .founder__portrait { flex: 0 0 auto; width: 300px; }
}

/* =====================================================================================
   INNER PAGES v2 (about, sections, activities, join, contact), redesigned 2026-11-07, see DESIGN.md §6l
   Built from the home page language: green pill labels, borderless rounded cards with soft shadows,
   torn-paper edges and photos, the scout pattern, green CTA strip. Flexbox only, no CSS masks.
   ===================================================================================== */

/* ---------- Page hero (replaces .page-banner + mountain ridge) ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(400px, 46vw, 540px); display: flex; align-items: center;
  padding-block: calc(var(--header-stack) + var(--space-7)) calc(var(--space-8) + 30px);
  background: var(--navy-900); color: #fff;
}
.page-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, center); }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to left, rgba(27, 31, 82, .92) 0%, rgba(27, 31, 82, .72) 45%, rgba(27, 31, 82, .35) 100%),
    linear-gradient(to top, rgba(27, 31, 82, .55), transparent 50%);
}
.page-hero::after {   /* torn paper edge into the page */
  content: ""; position: absolute; inset: auto 0 -1px; height: 42px; background: var(--paper);
  clip-path: polygon(0.0% 34.0%, 1.0% 56.4%, 2.8% 41.2%, 4.6% 42.2%, 6.3% 53.3%, 7.4% 24.3%, 8.4% 45.5%, 9.3% 71.3%, 11.3% 27.1%, 13.1% 23.3%, 14.1% 56.4%, 16.2% 20.2%, 17.9% 43.5%, 19.9% 53.6%, 20.9% 46.0%, 22.7% 38.7%, 23.5% 23.7%, 25.3% 35.9%, 26.9% 55.0%, 28.1% 34.3%, 30.1% 54.7%, 31.1% 45.7%, 33.1% 45.5%, 34.8% 35.6%, 36.9% 28.2%, 38.8% 46.6%, 40.2% 58.6%, 41.3% 46.8%, 43.3% 31.7%, 44.7% 55.2%, 46.5% 27.0%, 47.3% 25.6%, 48.2% 28.0%, 49.3% 31.8%, 51.0% 23.0%, 52.6% 47.9%, 54.1% 58.8%, 56.1% 19.3%, 58.2% 44.8%, 59.9% 25.4%, 61.8% 21.0%, 63.4% 32.8%, 65.5% 56.1%, 66.5% 53.9%, 68.5% 54.5%, 70.1% 30.7%, 71.9% 28.0%, 73.5% 27.8%, 75.0% 21.0%, 77.1% 72.6%, 78.9% 66.9%, 80.0% 51.7%, 81.3% 25.2%, 82.4% 54.7%, 83.4% 45.5%, 84.3% 52.6%, 85.1% 50.2%, 86.4% 25.8%, 88.1% 47.0%, 89.6% 48.3%, 90.7% 38.3%, 92.6% 53.8%, 94.4% 22.5%, 95.3% 53.1%, 97.1% 49.6%, 99.0% 21.6%, 100.0% 40.0%, 100% 100%, 0% 100%);
}
.page-hero__inner { max-width: 760px; }
.page-hero h1 { color: #fff; margin: 0 0 var(--space-3); font-size: clamp(2.1rem, 5.4vw, 3.6rem); }
.page-hero p { margin: 0; max-width: 56ch; color: #e6e7f3; font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.9; }
.page-hero .breadcrumbs { margin-bottom: var(--space-4); }
.page-hero .breadcrumbs ol {
  display: inline-flex; padding: .3em .9em; border-radius: 999px;
  background: rgba(255, 255, 255, .12); backdrop-filter: blur(4px);
}

/* Section heads on inner pages now use .intro-tag pills (the old red-dash .eyebrow is gone there) */
.section-head .intro-tag { margin-bottom: var(--space-3); }
.section-head--center .intro-tag { margin-inline: auto; }

/* ---------- Green CTA strip (replaces .cta-band on inner pages) ---------- */
.cta-strip {
  --pattern-opacity: .12;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg);
  background: var(--green); color: #fff;
}
.cta-strip h2 { color: #fff; margin: 0 0 var(--space-2); font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.cta-strip p { margin: 0; color: #e3f0e6; font-size: 1.1rem; }
@media (min-width: 880px) {
  .cta-strip { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-7); }
}

/* ---------- Shared refresh of old components (softer cards, no side bars) ---------- */
.card { border: 0; border-radius: 24px; box-shadow: 0 2px 6px rgba(30, 33, 64, .05), 0 12px 30px rgba(30, 33, 64, .08); }
.address-card { padding: var(--space-5); }
.address-card .icon-bubble { border-radius: 50%; }
.icon-list li { border: 0; border-radius: 20px; box-shadow: var(--shadow-sm); }
.chips li { border: 0; background: #fff; box-shadow: var(--shadow-sm); padding: .45em 1.1em; font-family: var(--font-display); font-weight: 700; color: var(--navy); }
.subnav a { border: 0; box-shadow: var(--shadow-sm); }
.subnav a:hover { background: var(--navy); color: #fff; }

/* Quote card (replaces .inline-quote and its coloured side bar; attribution without a dash) */
.quote-card { position: relative; margin: var(--space-5) 0 0; padding: var(--space-5) var(--space-5) var(--space-5); border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); }
.quote-card__mark { display: block; width: 34px; height: 34px; margin-bottom: var(--space-2); color: var(--red-600); }
.quote-card blockquote { margin: 0; }
.quote-card blockquote p { margin: 0; font-family: var(--font-display); font-weight: 800; color: var(--navy); font-size: clamp(1.3rem, 3vw, 1.75rem); line-height: 1.55; }
.quote-card figcaption { margin-top: var(--space-3); display: flex; flex-direction: column; gap: .1em; }
.quote-card figcaption strong { font-family: var(--font-display); color: var(--green); }
.quote-card figcaption span { color: var(--ink-soft); font-size: .95rem; }
.quote-card__intro { margin: 0 0 var(--space-3); color: var(--ink-soft); }
.quote-card--green { background: var(--green-100); box-shadow: none; }
.quote-card--yellow { background: var(--yellow-soft); box-shadow: none; }

/* ---------- About ---------- */
.pillars-section { background: var(--paper-2); }
.pillars { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-6); }
.pillar { flex: 1 1 280px; padding-top: var(--space-4); border-top: 1px solid #ddd2bd; }  /* neutral divider */
.pillar__num { display: block; margin-bottom: var(--space-2); font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--green); }
.pillar h3 { margin: 0 0 var(--space-2); font-size: 1.2rem; }
.pillar p { margin: 0; color: var(--ink-soft); }
.quote-pair { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 760px) { .quote-pair { flex-direction: row; } .quote-pair > * { flex: 1 1 0; margin: 0; } }
.chaplain-ph .img-ph { border-radius: 28px; }
.bp-portrait { max-width: 320px; margin: 0 auto; }
.bp-portrait .torn-photo { aspect-ratio: 603 / 807; rotate: -2deg; }
.bp-portrait .torn-photo::before { background: #fff; }
.bp-portrait figcaption { margin-top: var(--space-4); text-align: center; color: var(--ink-soft); font-size: .95rem; }
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); max-width: 760px; margin-inline: auto; }
.team-member { flex: 0 1 220px; padding: var(--space-5) var(--space-4); border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm); }
.team-member .img-ph { max-width: 130px; }

/* ---------- Sections page: troop picker + troop chapters ---------- */
.troop-picker { padding-block: var(--space-7) var(--space-5); text-align: center; }
.troop-picker h2 { margin: 0 0 var(--space-5); font-size: clamp(1.4rem, 3vw, 1.9rem); }
.troop-picker ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.troop-picker a {
  display: inline-flex; align-items: center; gap: .6em; min-height: 52px; padding: .4em 1.3em .4em .6em;
  border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.troop-picker a:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink); }
.troop-picker b { display: inline-grid; place-items: center; min-width: 52px; height: 38px; padding: 0 .6em; border-radius: 999px; background: var(--troop-tint); color: var(--troop-ink); font-weight: 800; }

.troop-chapter { padding-block: var(--space-8); scroll-margin-top: calc(var(--header-stack) + 12px); }
.troop-chapter:nth-of-type(odd) { background: var(--paper-2); }
.troop-chapter__inner { display: flex; flex-direction: column; gap: var(--space-7); align-items: center; }
.troop-chapter__media { width: min(80%, 340px); aspect-ratio: 3 / 4; rotate: -2deg; }
.troop-chapter__media::before { background: #fff; }
.troop-chapter__body { flex: 1 1 auto; min-width: 0; max-width: 640px; }
.troop-chapter__age { margin: 0 0 var(--space-2); display: flex; align-items: baseline; gap: .4em; line-height: 1; }
.troop-chapter__age b { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 9vw, 5.5rem); color: var(--troop-ink); }
.troop-chapter__age span { font-family: var(--font-display); font-weight: 700; color: var(--ink-soft); font-size: 1.2rem; }
.troop-chapter__body h2 { margin: 0 0 var(--space-3); }
.troop-chapter__body .lead { margin: 0 0 var(--space-5); }
.troop-chapter__body h3 { margin: 0 0 var(--space-3); font-size: 1.15rem; }
.troop-chapter .check-list { gap: var(--space-3); }
.troop-chapter .check-list svg {
  width: 26px; height: 26px; padding: 5px; margin-top: .15em; border-radius: 50%;
  background: var(--troop-tint); color: var(--troop-ink);
}
.troop-chapter .unit-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.troop-chapter .meta-row { padding: var(--space-3) var(--space-4); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
@media (min-width: 900px) {
  .troop-chapter__inner { flex-direction: row; align-items: center; gap: var(--space-9); }
  .troop-chapter__media { flex: 0 0 auto; width: 340px; }
  .troop-chapter--flip .troop-chapter__inner { flex-direction: row-reverse; }
  .troop-chapter--flip .troop-chapter__media { rotate: 2deg; }
}

/* ---------- Activities page ---------- */
.weekly-photo { width: min(80%, 380px); margin-inline: auto; aspect-ratio: 4 / 3; rotate: 2deg; }
.weekly-photo::before { background: #fff; }
.trip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); }
.trip-list > li { flex: 1 1 280px; max-width: 380px; display: flex; }
.trip-list .feature-card { flex: 1; padding: var(--space-3) var(--space-3) var(--space-5); display: flex; flex-direction: column; }
.trip-list .feature-card .img-ph, .trip-list .feature-card .trip-photo { margin: 0 0 var(--space-4); border-radius: 18px; }
.trip-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.trip-list .feature-card .icon-bubble { margin: 0 var(--space-3) var(--space-3); width: 48px; height: 48px; border-radius: 50%; }
.trip-list .feature-card h3, .trip-list .feature-card p { margin-inline: var(--space-3); }
.camp-types { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 720px) { .camp-types { flex-direction: row; } .camp-type { flex: 1 1 0; } }
.camp-type { border-radius: 24px; padding: var(--space-6); }
.skills-grid { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.skill { flex: 1 1 210px; border: 0; border-radius: 22px; box-shadow: var(--shadow-sm); }
.skill .icon-bubble { border-radius: 50%; width: 52px; height: 52px; }
.programs-summary { text-align: center; }
.programs-summary .chips { justify-content: center; }

/* ---------- Join page ---------- */
.steps { display: flex; flex-direction: column; gap: var(--space-4); }
.steps li { border: 0; border-radius: 22px; box-shadow: var(--shadow-sm); }
.steps li::before { background: var(--green); width: 50px; height: 50px; font-size: 1.35rem; box-shadow: 0 0 0 6px var(--green-100); }
@media (min-width: 900px) {
  .steps { flex-direction: row; position: relative; }
  .steps li { flex: 1 1 0; }
  .steps::before {   /* dashed trail behind the step numbers */
    content: ""; position: absolute; top: calc(var(--space-5) + 25px); inset-inline: 10%; z-index: 0;
    border-top: 2px dashed #cbbfa6;
  }
  .steps li { position: relative; z-index: 1; }
}
.info-tiles { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }
.info-tiles > .card { flex: 1 1 260px; }
.info-tiles .icon-bubble { border-radius: 50%; }
.faq details { border: 0; border-radius: 20px; box-shadow: var(--shadow-sm); }
.faq details[open] { box-shadow: var(--shadow); }
.faq summary svg { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: #fde4e4; }

/* ---------- Contact page ---------- */
.contact-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.contact-list li { flex: 1 1 240px; border: 0; border-radius: 18px; box-shadow: var(--shadow-sm); }
.contact-list .icon-bubble { border-radius: 50%; }
.map-ph { border-radius: 24px; }
.form.card { padding: var(--space-6); }
.form input, .form textarea { border-radius: 14px; }

/* =====================================================================
   Activities page v3 (2026-11-07): photo-led, no icon bubbles. DESIGN.md §6o.
   ===================================================================== */
/* subnav pills carry a round photo instead of an icon */
.subnav--photo a { gap: .6em; padding-inline: 6px 1.1em; min-height: 52px; }
.subnav__thumb { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }

/* text + photo split (flex) */
.ap-split { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-7) var(--space-8); }
.ap-split__text { flex: 1 1 420px; min-width: 0; }
.ap-split > .ap-collage, .ap-split > .ap-pair { flex: 1 1 360px; min-width: 0; }
@media (min-width: 900px) { .ap-split--flip { flex-direction: row-reverse; } }

/* big number + title list */
.ap-num {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: 1.6rem; color: var(--green); flex: none; min-width: 2ch;
}
.ap-numlist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ap-numlist li {
  flex: 1 1 calc(50% - var(--space-3)); min-width: 220px;
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: #fff; border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.ap-numlist h3 { font-size: 1.08rem; margin: 0 0 var(--space-1); }
.ap-numlist p { margin: 0; color: var(--ink-soft); font-size: .97rem; }

/* weekly collage: one torn main photo + two rounded insets */
.ap-collage { position: relative; padding-bottom: 18%; max-width: 560px; margin-inline: auto; }
.ap-collage figure { margin: 0; }
.ap-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-collage__main { aspect-ratio: 4 / 3; rotate: -1.5deg; }
.ap-collage__main::before { background: #fff; }
.ap-collage__a, .ap-collage__b {
  position: absolute; border-radius: 20px; overflow: hidden;
  box-shadow: 0 0 0 6px #fff, 0 18px 30px rgba(30, 33, 64, .22);
}
.ap-collage__a { width: 34%; aspect-ratio: 4 / 5; inset-inline-start: -2%; bottom: 0; rotate: 4deg; }
.ap-collage__b { width: 46%; aspect-ratio: 16 / 9; inset-inline-end: 2%; bottom: 4%; rotate: -3deg; }

/* full-bleed photo bands (trips, summary) */
.ap-band {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding-block: var(--space-9);
}
.ap-band__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ap-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(22, 25, 70, .88), rgba(22, 25, 70, .35) 65%, rgba(22, 25, 70, .2));
}
.ap-band h2 { color: #fff; }
.ap-band .intro-tag--glass { background: rgba(255, 255, 255, .16); color: var(--yellow); backdrop-filter: blur(4px); }
.ap-trips { padding-top: calc(var(--space-9) + 80px); }
.ap-trips .section-head p, .ap-trip { text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.ap-trips__list { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.ap-trip {
  flex: 1 1 240px; padding: var(--space-5) var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset;
}
.ap-trip .ap-num { color: var(--yellow); font-size: 2.4rem; display: block; margin-bottom: var(--space-3); }
.ap-trip h3 { color: #fff; font-size: 1.25rem; margin: 0 0 var(--space-2); }
.ap-trip p { margin: 0; color: #e6e7f3; }

/* camps: season cards + pair of torn photos */
.ap-seasons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ap-season { flex: 1 1 200px; border-radius: var(--radius-lg); padding: var(--space-5); }
.ap-season h3 { margin: 0 0 var(--space-1); font-size: 1.2rem; }
.ap-season p { margin: 0; }
.ap-season--summer { background: var(--yellow-soft); }
.ap-season--winter { background: var(--green-100); }
.ap-pair { display: flex; justify-content: center; align-items: flex-start; gap: 0; max-width: 520px; margin-inline: auto; }
.ap-pair figure { flex: 0 0 52%; }
.ap-pair img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.ap-pair__a { rotate: -3deg; z-index: 1; }
.ap-pair__b { rotate: 3deg; margin-top: 18%; margin-inline-start: -8%; }
.ap-pair figure::before { background: #fff; }

/* skills: photo banner + numbered cards */
.ap-skills { margin-top: var(--space-8); }
.ap-skills__banner {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 28px;
  min-height: clamp(220px, 30vw, 340px); display: flex; align-items: flex-end;
  padding: var(--space-6) var(--space-6) calc(var(--space-6) + 40px);
}
.ap-skills__banner img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.ap-skills__banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(22, 25, 70, .85), rgba(22, 25, 70, 0) 70%);
}
.ap-skills__banner h3 { color: #fff; margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.3rem); }
.ap-skills__list {
  list-style: none; padding: 0; margin: calc(-1 * var(--space-6)) var(--space-4) 0;
  position: relative; display: flex; flex-wrap: wrap; gap: var(--space-3);
}
.ap-skill {
  flex: 1 1 190px; background: #fff; border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow);
}
.ap-skill .ap-num { display: block; margin-bottom: var(--space-2); color: var(--red-600); }
.ap-skill h3 { font-size: 1.08rem; margin: 0 0 var(--space-2); }
.ap-skill p, .ap-skill ul { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.ap-skill ul { padding-inline-start: 1.1em; }

/* summary band */
.ap-summary { text-align: center; }
.ap-summary .chips { justify-content: center; }
.chips--glass li {
  background: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 600px) {
  .ap-band { padding-block: var(--space-8); }
  .ap-skills__list { margin-inline: 0; margin-top: var(--space-4); }
  .ap-skills__banner { padding: var(--space-5); }
  .ap-skill { flex-basis: 140px; padding: var(--space-4); }
  .ap-collage { padding-bottom: 24%; }
}

/* =====================================================================
   404 page (2026-11-09). "Lost on the trail": photo hero with a compass for the 0,
   then photo cards to the main pages. DESIGN.md §6q.
   ===================================================================== */
.nf-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; text-align: center;
  min-height: min(92vh, 760px); display: flex; align-items: center;
  padding-block: calc(var(--header-stack) + var(--space-7)) calc(var(--space-8) + 30px);
  background: var(--navy-900);
}
.nf-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.nf-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(27, 31, 82, .72), rgba(27, 31, 82, .92) 75%);
}
.nf-hero::after {   /* torn paper edge, same outline as .page-hero */
  content: ""; position: absolute; inset: auto 0 -1px; height: 42px; background: var(--paper);
  clip-path: polygon(0.0% 34.0%, 1.0% 56.4%, 2.8% 41.2%, 4.6% 42.2%, 6.3% 53.3%, 7.4% 24.3%, 8.4% 45.5%, 9.3% 71.3%, 11.3% 27.1%, 13.1% 23.3%, 14.1% 56.4%, 16.2% 20.2%, 17.9% 43.5%, 19.9% 53.6%, 20.9% 46.0%, 22.7% 38.7%, 23.5% 23.7%, 25.3% 35.9%, 26.9% 55.0%, 28.1% 34.3%, 30.1% 54.7%, 31.1% 45.7%, 33.1% 45.5%, 34.8% 35.6%, 36.9% 28.2%, 38.8% 46.6%, 40.2% 58.6%, 41.3% 46.8%, 43.3% 31.7%, 44.7% 55.2%, 46.5% 27.0%, 47.3% 25.6%, 48.2% 28.0%, 49.3% 31.8%, 51.0% 23.0%, 52.6% 47.9%, 54.1% 58.8%, 56.1% 19.3%, 58.2% 44.8%, 59.9% 25.4%, 61.8% 21.0%, 63.4% 32.8%, 65.5% 56.1%, 66.5% 53.9%, 68.5% 54.5%, 70.1% 30.7%, 71.9% 28.0%, 73.5% 27.8%, 75.0% 21.0%, 77.1% 72.6%, 78.9% 66.9%, 80.0% 51.7%, 81.3% 25.2%, 82.4% 54.7%, 83.4% 45.5%, 84.3% 52.6%, 85.1% 50.2%, 86.4% 25.8%, 88.1% 47.0%, 89.6% 48.3%, 90.7% 38.3%, 92.6% 53.8%, 94.4% 22.5%, 95.3% 53.1%, 97.1% 49.6%, 99.0% 21.6%, 100.0% 40.0%, 100% 100%, 0% 100%);
}
.nf-hero__inner { display: flex; flex-direction: column; align-items: center; }
.nf-code {
  display: flex; align-items: center; justify-content: center; gap: .08em; direction: ltr;
  margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(6rem, 22vw, 12rem); color: #fff; text-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}
.nf-compass { width: .9em; height: .9em; color: var(--yellow); filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .35)); }
.nf-needle { transform-origin: 60px 60px; transform: rotate(35deg); }
@media (prefers-reduced-motion: no-preference) {
  .nf-needle { animation: nfSearch 4.5s cubic-bezier(.45, .05, .35, 1) infinite; }
}
@keyframes nfSearch {
  0% { transform: rotate(35deg); } 20% { transform: rotate(-50deg); } 38% { transform: rotate(70deg); }
  55% { transform: rotate(-15deg); } 70%, 100% { transform: rotate(0deg); }
}
.nf-hero h1 { color: #fff; margin: 0 0 var(--space-3); font-size: clamp(2rem, 5vw, 3.2rem); }
.nf-lead { max-width: 52ch; margin: 0 auto var(--space-6); color: #e6e7f3; font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.9; }
.nf-hero .btn-row { justify-content: center; }

.nf-cards { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.nf-card {
  position: relative; isolation: isolate; overflow: hidden; flex: 1 1 220px;
  border-radius: var(--radius-lg); min-height: 260px; display: flex; align-items: flex-end;
  box-shadow: var(--shadow);
}
.nf-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.nf-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(22, 25, 70, .9), rgba(22, 25, 70, 0) 65%);
}
.nf-card a { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: var(--space-5); color: #fff; text-decoration: none; }
.nf-card a::after { content: ""; position: absolute; inset: 0; }   /* whole card is the link */
.nf-card__title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }
.nf-card__sub { color: #d5d8f3; font-size: .95rem; }
.nf-card:hover img { transform: scale(1.05); }
.nf-card:has(a:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 3px; }
.nf-card a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .nf-card img { transition: none; } .nf-card:hover img { transform: none; } }


/* Google Map on the contact page */
.map-embed { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: 24px; box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.08)); background: #e9e4d8; }
@media (min-width: 880px) { .map-embed { aspect-ratio: 4 / 3; } }

/* Contact icons v2 (2026-11-09): solid gradient tiles with white line icons, brand colours for social. */
.ci {
  --ci-bg: linear-gradient(140deg, #3d43a3, var(--navy));
  --ci-glow: rgba(44, 49, 120, .45);
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 15px;
  background: var(--ci-bg); color: #fff;
  box-shadow: 0 8px 16px -8px var(--ci-glow), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .08);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ci svg { width: 23px; height: 23px; }
.ci--lg { width: 60px; height: 60px; border-radius: 18px; }
.ci--lg svg { width: 28px; height: 28px; }
.ci--pin, .ci--email { --ci-bg: linear-gradient(140deg, #f2484d, var(--red-600)); --ci-glow: rgba(200, 22, 29, .45); }
.ci--whatsapp  { --ci-bg: linear-gradient(140deg, #22a052, #136a34); --ci-glow: rgba(26, 158, 75, .45); }
.ci--facebook  { --ci-bg: linear-gradient(140deg, #3d8bff, #1460d6); --ci-glow: rgba(20, 96, 214, .45); }
.ci--instagram { --ci-bg: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); --ci-glow: rgba(214, 36, 159, .45); }

.contact-list li { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.contact-list li:has(a):hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 14px 30px -12px rgba(30, 35, 90, .25)); }
.contact-list li:has(a):hover .ci { transform: scale(1.06) rotate(-4deg); }
.contact-list li a { text-decoration: none; font-weight: 700; color: var(--navy); }
.contact-list li a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .ci, .contact-list li { transition: none; }
  .contact-list li:has(a):hover, .contact-list li:has(a):hover .ci { transform: none; }
}

/* ==========================================================================
   Icon tiles v2, site-wide (2026-11-09)
   One modern style for every icon badge: a rounded-square gradient tile,
   white line icon, soft coloured glow. Same look as the contact page (.ci).
   ========================================================================== */
:root {
  --tile-navy:   linear-gradient(140deg, #3d43a3, #2c3178);
  --tile-red:    linear-gradient(140deg, #f2484d, #c8161d);
  --tile-green:  linear-gradient(140deg, #34a35a, #1d6331);
  --tile-yellow: linear-gradient(140deg, #fff36b, #e9d800);
  --tile-wa:     linear-gradient(140deg, #22a052, #136a34);
  --tile-fb:     linear-gradient(140deg, #3d8bff, #1460d6);
  --tile-ig:     radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  --tile-shine:  inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .08);
}

/* Feature / info cards (about, join, …) */
.icon-bubble,
.address-card .icon-bubble, .info-tiles .icon-bubble, .skill .icon-bubble,
.trip-list .feature-card .icon-bubble, .contact-list .icon-bubble {
  border-radius: 16px;
  background: var(--tile-navy); color: #fff;
  box-shadow: 0 10px 18px -10px rgba(44, 49, 120, .55), var(--tile-shine);
}
.icon-bubble svg { stroke-width: 1.8; }
.icon-bubble.icon-bubble--red    { background: var(--tile-red);    box-shadow: 0 10px 18px -10px rgba(200, 22, 29, .55), var(--tile-shine); }
.icon-bubble.icon-bubble--green  { background: var(--tile-green);  box-shadow: 0 10px 18px -10px rgba(29, 99, 49, .55), var(--tile-shine); }
.icon-bubble.icon-bubble--yellow { background: var(--tile-yellow); color: var(--navy-900, #1e2150); box-shadow: 0 10px 18px -10px rgba(160, 150, 0, .6), var(--tile-shine); }

/* Home: values trail stations */
.value-stop__mark {
  border: 0; border-radius: 20px;
  background: var(--tile-navy); color: #fff;
  box-shadow: 0 12px 22px -12px rgba(44, 49, 120, .6), var(--tile-shine);
}
.value-stop__mark svg { stroke-width: 1.7; }
.value-stop:hover .value-stop__mark { background: var(--tile-yellow); color: var(--navy-900, #1e2150); transform: scale(1.06) rotate(-4deg); }
@media (min-width: 900px) { .value-stop__mark { border-radius: 24px; } }

/* Home: "why join" check marks */
.join-reasons__mark {
  border-radius: 9px;
  background: var(--tile-yellow); color: var(--green);
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .35), var(--tile-shine);
}

/* Footer: address icon + social tiles */
.footer-hq__icon {
  border-radius: 14px;
  background: var(--tile-red);
  box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .5), var(--tile-shine);
}
.social a {
  border-radius: 14px; color: #fff;
  background: rgba(255, 255, 255, .1);
  box-shadow: var(--tile-shine);
}
.social a.social--facebook  { background: var(--tile-fb); }
.social a.social--instagram { background: var(--tile-ig); }
.social a.social--whatsapp  { background: var(--tile-wa); }
.social a:hover { color: #fff; transform: translateY(-3px) rotate(-4deg); box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .55), var(--tile-shine); }
.social a.social--facebook svg { width: 22px; height: 22px; }

/* Floating WhatsApp button */
.wa-float {
  background: var(--tile-wa);
  box-shadow: 0 14px 28px -10px rgba(26, 158, 75, .6), var(--tile-shine);
}
.wa-float:hover { background: var(--tile-wa); filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  .value-stop:hover .value-stop__mark, .social a:hover { transform: none; }
}

/* Address: one short line per part, no awkward mid-phrase wrapping */
.addr { font-style: normal; line-height: 1.8; }
.addr span { display: block; text-wrap: balance; }
.addr span + span { margin-top: .15em; }

/* Address links to Google Maps */
.addr__link { color: inherit; text-decoration: none; display: block; }
.addr__link:hover span:not(.addr__cta) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.addr__cta {
  display: inline-flex !important; align-items: center; gap: .35em; margin-top: .5em !important;
  font-size: .9rem; font-weight: 700; color: var(--red-600);
}
.site-footer .addr__cta { color: var(--yellow); }
.addr__cta svg { width: 15px; height: 15px; transform: scaleX(-1); transition: transform .2s var(--ease); }
.addr__link:hover .addr__cta svg { transform: scaleX(-1) translate(2px, -2px); }
.addr__link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; border-radius: 6px; }

/* About: story photo (4:5) */
.chaplain-photo { display: block; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 28px; box-shadow: var(--shadow); }

/* ==========================================================================
   Registration 2027 banner (home, right after the hero). Echoes the 2027
   poster: forest green, wooden year sign, yellow highlight, programme chips.
   Remove the section in front-page.php when registration closes.
   ========================================================================== */
.reg-banner-wrap { padding-block: var(--space-8) 0; }
.reg-banner {
  --pattern-opacity: .07; --pattern-size: 260px;
  display: grid; grid-template-columns: 1fr; overflow: hidden;
  border-radius: 32px; color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(244, 234, 11, .14), transparent 55%),
    linear-gradient(150deg, #1f6a37 0%, #164f29 55%, #0f3a1e 100%);
  box-shadow: 0 30px 60px -30px rgba(15, 58, 30, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.reg-banner__body { padding: clamp(1.75rem, 4vw, 3.25rem); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }

/* Wooden sign with the year */
.reg-banner__year {
  margin: 0; display: inline-flex; align-items: baseline; gap: .35em;
  padding: .3em 1em .35em; border-radius: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; line-height: 1.2; color: #fff7e6;
  background:
    repeating-linear-gradient(178deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #8a5a35, #5e3a1f);
  border: 2px solid #c9a27a; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .2);
  transform: rotate(-2deg);
}
.reg-banner__year b { font-size: 1.45em; letter-spacing: .02em; }

.reg-banner__title {
  margin: 0; color: #fff; line-height: 1.15;
  font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 800;
}
.reg-banner__title mark { background: var(--yellow); color: var(--navy-900); padding: 0 .2em; border-radius: 12px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.reg-banner__sub {
  margin: 0; display: flex; align-items: center; gap: .5em;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 500; color: rgba(255, 255, 255, .92);
}
.reg-banner__sub svg { width: 22px; height: 22px; flex: none; color: var(--yellow); }

/* Programme chips */
.reg-banner__chips { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.reg-banner__chips li {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .4em .95em .4em .45em; padding-inline: .45em .95em;
  border-radius: 999px; font-weight: 700; font-size: .95rem;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(4px);
}
.reg-banner__ico {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: var(--tile-yellow); color: #14421f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.reg-banner__ico svg { width: 17px; height: 17px; }

.reg-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-3); }
.reg-banner__actions .btn { min-height: 54px; padding-inline: 1.8em; font-size: 1.15rem; }
.reg-banner__call { display: inline-flex; align-items: center; gap: .6em; color: #fff; text-decoration: none; font-weight: 500; }
.reg-banner__call svg { width: 20px; height: 20px; color: var(--yellow); }
.reg-banner__call b { font-weight: 800; }
.reg-banner__call:hover span { text-decoration: underline; text-underline-offset: 5px; }

/* Photo side */
.reg-banner__media { position: relative; min-height: 240px; }
.reg-banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reg-banner__media::after {   /* blends the photo into the green on its inner edge */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, #164f29 0%, rgba(22, 79, 41, 0) 35%);
}
.reg-banner__stamp {
  position: absolute; inset-inline-start: 1.25rem; bottom: 1.25rem; z-index: 1;
  display: grid; place-items: center; align-content: center;
  width: 104px; height: 104px; border-radius: 50%;
  background: var(--red-600); color: #fff; text-align: center; line-height: 1;
  border: 3px dashed rgba(255, 255, 255, .7); outline: 4px solid var(--red-600);
  box-shadow: 0 14px 26px -10px rgba(0, 0, 0, .55);
  transform: rotate(-12deg);
  font-family: var(--font-display);
}
.reg-banner__stamp b { font-size: 1.6rem; font-weight: 800; }
.reg-banner__stamp span { font-size: .95rem; font-weight: 700; margin-top: .2em; }

@media (min-width: 900px) {
  .reg-banner { grid-template-columns: 1.25fr 1fr; }
  .reg-banner__media { min-height: 100%; }
  .reg-banner__media::after { background: linear-gradient(to left, #164f29 0%, rgba(22, 79, 41, 0) 30%); }
  .reg-banner__media img { border-start-start-radius: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .reg-banner__stamp { animation: reg-stamp 3.5s var(--ease) infinite; }
  @keyframes reg-stamp { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(-8deg) scale(1.05); } }
}

/* Sections page: link card to the progression journey pages */
.path-link {
  margin-top: var(--space-5); display: flex; align-items: center; gap: var(--space-3);
  padding: .9rem 1.1rem; border-radius: 20px; text-decoration: none; color: var(--navy-900);
  background: #fff; box-shadow: 0 2px 4px rgba(30, 33, 64, .04), 0 16px 32px -20px rgba(30, 33, 64, .4);
  border: 1px solid rgba(30, 33, 64, .06);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.path-link:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(30, 33, 64, .05), 0 22px 40px -20px rgba(30, 33, 64, .5); color: var(--navy-900); }
.path-link__ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; flex: none; color: #fff; background: var(--tile-green); box-shadow: 0 10px 18px -10px rgba(29, 99, 49, .55), var(--tile-shine); }
.troop--scouts .path-link__ico { background: var(--tile-navy); box-shadow: 0 10px 18px -10px rgba(44, 49, 120, .55), var(--tile-shine); }
.path-link__ico svg { width: 26px; height: 26px; }
.path-link__text { display: flex; flex-direction: column; flex: 1; line-height: 1.5; }
.path-link__text b { font-family: var(--font-display); font-size: 1.1rem; }
.path-link__text span { font-size: .92rem; color: var(--ink-soft); }
.path-link__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); flex: none; transition: transform .25s var(--ease); }
.path-link__go svg { width: 20px; height: 20px; }
.path-link:hover .path-link__go { transform: translateX(-4px); }
@media (prefers-reduced-motion: reduce) { .path-link, .path-link__go { transition: none; } .path-link:hover, .path-link:hover .path-link__go { transform: none; } }

/* ==========================================================================
   Header dropdown: "الفرق والأعمار" → progression paths (2026-11-09)
   Phones: accordion inside the slide-down panel (chevron button toggles).
   Desktop: navy card under the item, opens on hover, focus or chevron click.
   ========================================================================== */
.nav-item { display: flex; align-items: center; gap: 4px; }
.nav-item > a { flex: 1; }
.nav-sub-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: #fff;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav-sub-toggle:hover { background: rgba(255, 255, 255, .16); }
.nav-sub-toggle svg { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.nav-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-has-sub.is-ancestor > .nav-item > a { color: var(--yellow); }
.nav-has-sub.is-ancestor > .nav-item > a::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); flex: none;
}

.site-nav .nav-sub {
  display: none; list-style: none; margin: 4px 0 6px; padding: 6px;
  flex-direction: column; gap: 4px;
  background: rgba(255, 255, 255, .05); border-radius: 20px;
}
html:not(.js) .site-nav .nav-sub,
.nav-has-sub:has(> .nav-item .nav-sub-toggle[aria-expanded="true"]) .nav-sub { display: flex; }
.site-nav .nav-sub a { min-height: 60px; padding: 8px 12px; gap: 12px; border-radius: 16px; font-size: 1rem; }
.site-nav .nav-sub a[aria-current="page"]::before { display: none; }
.site-nav .nav-sub a[aria-current="page"] { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(244, 234, 11, .55); }
.nav-sub__ico {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--tile-navy); color: #fff; box-shadow: var(--tile-shine);
}
.nav-sub__ico svg { width: 21px; height: 21px; }
.nav-sub__ico--green { background: var(--tile-green); }
.nav-sub__ico--red { background: var(--tile-red); }
.nav-sub__ico--navy { background: linear-gradient(140deg, #5a61c4, #3d43a3); }
.nav-sub__text { display: grid; line-height: 1.3; }
.nav-sub__text strong { font-weight: 800; }
.nav-sub__text small { font-size: .8rem; font-weight: 600; color: #b9bde6; }
.site-nav .nav-sub a[aria-current="page"] .nav-sub__text strong { color: var(--yellow); }

@media (min-width: 1024px) {
  .nav-has-sub { position: relative; }
  .nav-item { gap: 0; }
  .nav-item > a { padding-inline-end: .35rem; }
  .nav-sub-toggle { width: 28px; height: 28px; background: transparent; margin-inline-end: 4px; }
  .nav-sub-toggle svg { width: 16px; height: 16px; }
  .nav-sub-toggle:hover { background: rgba(255, 255, 255, .12); }
  .nav-has-sub:hover .nav-sub-toggle svg,
  .nav-has-sub:focus-within .nav-sub-toggle svg { transform: rotate(180deg); }

  .site-nav .nav-sub {
    display: flex; position: absolute; top: calc(100% + 14px); inset-inline-start: -10px;
    width: 300px; margin: 0; padding: 8px;
    background: var(--navy-900); border-radius: 22px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 24px 44px rgba(10, 12, 40, .4);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  }
  .site-nav .nav-sub::before {   /* hover bridge across the gap + little notch */
    content: ""; position: absolute; inset-inline: 0; top: -16px; height: 16px;
  }
  .site-nav .nav-sub::after {
    content: ""; position: absolute; top: -6px; inset-inline-start: 36px;
    width: 14px; height: 14px; background: var(--navy-900); rotate: 45deg; border-radius: 3px 0 0 0;
  }
  .nav-has-sub:hover .nav-sub,
  .nav-has-sub:focus-within .nav-sub,
  .nav-has-sub:has(> .nav-item .nav-sub-toggle[aria-expanded="true"]) .nav-sub {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
  }
  .site-nav .nav-sub a:hover { background: rgba(255, 255, 255, .09); }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-sub, .nav-sub-toggle svg { transition: none !important; }
}
@media (min-width: 1024px) {
  .nav-has-sub.is-dismissed:not(:has(.nav-sub-toggle[aria-expanded="true"])) .nav-sub { opacity: 0; visibility: hidden; transform: translateY(-6px); }
  .nav-has-sub.is-dismissed:not(:has(.nav-sub-toggle[aria-expanded="true"])) .nav-sub-toggle svg { transform: none; }
}
/* dropdown v2: plain text links, no icons or descriptions */
.site-nav .nav-sub a { min-height: 48px; padding: 0 var(--space-4); font-size: 1rem; border-radius: 999px; }
@media (min-width: 1024px) {
  .site-nav .nav-sub { width: 220px; padding: 6px; border-radius: 20px; }
  .site-nav .nav-sub a { min-height: 44px; }
}
.site-nav .nav-sub a[aria-current="page"] { color: var(--yellow); box-shadow: none; }