/* ==========================================================================
   Nanea Kite — site stylesheet
   All styles live here. No <style> blocks in pages.
   ========================================================================== */

/* --- 1. Tokens -------------------------------------------------------- */
:root {
  --teal:        #0aabc8;
  --teal-d:      #0894ae;
  --teal-dd:     #0b7f97;
  --teal-deep:   #0a6e85;
  --teal-ink:    #0aabc8;
  --teal-soft:   #e8f7fb;
  --teal-soft-2: #f3fbfd;

  --navy:        #0a2c3d;
  --navy-2:      #0d3a4f;
  --navy-bar:    #0c7a92;

  --orange:      #f97316;
  --orange-d:    #e8650a;

  --ink:         #16323f;
  --body:        #4c6473;
  --muted:       #7d94a1;
  --line:        #e3edf1;
  --white:       #ffffff;

  --radius:      10px;
  --radius-sm:   6px;
  --shadow:      0 2px 14px rgba(13, 60, 76, .07);
  --shadow-lg:   0 10px 34px rgba(13, 60, 76, .12);

  --header-h:    76px;
  --container:   1180px;

  /* Same pairing as the reference site: Oswald for headings, Roboto Condensed for body */
  --font:        "Roboto Condensed", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-head:   "Oswald", "Roboto Condensed", "Segoe UI", sans-serif;
  /* numbers, prices, tables and dates use plain Roboto — wider and easier to
     scan for figures than the condensed body face */
  --font-num:    "Roboto", "Segoe UI", system-ui, sans-serif;
  /* navigation */
  --font-menu:   "Raleway", "Segoe UI", system-ui, sans-serif;
  --font-script: "Caveat", cursive;
}

/* --- 2. Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5 {
  margin: 0; color: var(--ink);
  font-family: var(--font-head);
  line-height: 1.15; font-weight: 700; letter-spacing: .01em;
}
/* Oswald is condensed, so headings need a touch more size than Poppins did */
.sec-title    { font-size: clamp(23px, 3.3vw, 32px); }
.split__title { font-size: clamp(21px, 2.9vw, 27px); }
.card__title  { font-size: 18px; }
.hero__title  { font-family: var(--font-head); }
/* labels that share the heading voice */
.rv-score__l, .pcard-price__sport, .modal__title, .ptable__title, .panel__t,
.ftr__h, .btn, .tabs__btn, .tag { font-family: var(--font-head); }

/* navigation — desktop nav and the mobile drawer */
.hdr__link, .drawer__link { font-family: var(--font-menu); }

/* every figure: prices, durations, dates, counts */
.pcard-price__v, .ctype__p, .ccard__price-v, .ccard__price-n, .card__price,
.lcard__amt, .lcard__dur, .price-lines, .hero-chip, .fact__v, .fact__l,
.scamp__p, .bcard__meta, .post__meta, .rv-score__c, .rv__when, .stat__v,
.ptable table, .lcard__grid { font-family: var(--font-num); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* --- 3. Layout -------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section--tight { padding: 22px 0; }
/* half the usual rhythm — used where two blocks belong together visually */
.section--half { padding: 32px 0; }
.section--soft { background: var(--teal-soft-2); }
.section--teal-soft { background: var(--teal-soft); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--orange); color: #fff; padding: 10px 18px; font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

/* --- 4. Type ---------------------------------------------------------- */
.sec-head { text-align: center; margin-bottom: 34px; }
.sec-title {
  font-size: clamp(20px, 3vw, 27px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--teal-ink);
}
.sec-title--ink { color: var(--ink); }
.squiggle { color: var(--orange); margin: 10px auto 0; display: block; }
.sec-sub { margin: 12px auto 0; max-width: 620px; color: var(--body); font-size: 14.5px; }
.script { font-family: var(--font-script); color: var(--orange); font-weight: 700; font-style: italic; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: 11px;
  font-weight: 700; color: var(--teal);
}
.lead { font-size: 16px; color: var(--body); }

/* --- 5. Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--teal   { background: var(--teal-dd); color: #fff; }
.btn--teal:hover { background: var(--teal-deep); }
.btn--orange { background: var(--orange); color: #fff; }
.btn--orange:hover { background: var(--orange-d); }
.btn--ghost  { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }
.btn--ghost:hover { background: #fff; color: var(--teal-ink); }
.btn--outline { background: #fff; color: var(--teal-dd); border-color: var(--teal-dd); }
.btn--outline:hover { background: var(--teal-dd); color: #fff; }
.btn--sm { padding: 9px 16px; font-size: 10.5px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- 6. Header -------------------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .25s ease, box-shadow .25s ease, height .25s ease;
}
.hdr__inner { display: flex; align-items: center; gap: 18px; width: 100%; }
.hdr__logo { flex: none; display: block; }
.hdr__logo img { height: 42px; width: auto; }
.hdr__nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.hdr__link {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 0; position: relative; transition: color .18s ease;
}
.hdr__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--orange); transform: scaleX(0); transition: transform .2s ease;
}
.hdr__link:hover::after, .hdr__link.is-active::after { transform: scaleX(1); }
.hdr__cta { flex: none; margin-left: 6px; }
.hdr__burger {
  display: none; flex: none; margin-left: auto;
  background: none; border: 0; padding: 8px; color: inherit; border-radius: 6px;
}

/* colour variants */
.hdr--light { color: var(--ink); }
.hdr--light .hdr__link { color: var(--ink); }
.hdr--light .hdr__link.is-active { color: var(--orange); }
.hdr--dark { color: #fff; }
.hdr--dark .hdr__link { color: #fff; }
.hdr--dark .hdr__link.is-active { color: #fff; }
.hdr--dark .hdr__logo img { filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }

.hdr.is-stuck {
  background: rgba(255,255,255,.97);
  box-shadow: 0 2px 18px rgba(10, 44, 61, .1);
  color: var(--ink);
}
.hdr.is-stuck .hdr__link { color: var(--ink); }
.hdr.is-stuck .hdr__link.is-active { color: var(--orange); }
.hdr.is-stuck .hdr__logo img { filter: none; }

/* drawer */
.drawer {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(8, 34, 46, .55);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
  background: #fff; padding: 20px; overflow-y: auto;
  transform: translateX(100%); transition: transform .26s ease;
  display: flex; flex-direction: column; gap: 4px;
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drawer__top img { height: 38px; width: auto; }
.drawer__close { background: none; border: 0; color: var(--ink); padding: 6px; }
.drawer__link {
  padding: 12px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink);
}
.drawer__link:hover { background: var(--teal-soft); }
.drawer__link.is-active { color: var(--orange); background: var(--teal-soft-2); }
.drawer__foot { margin-top: 16px; display: grid; gap: 10px; }
.drawer__meta { font-size: 12.5px; color: var(--body); display: flex; align-items: center; gap: 8px; }
.drawer__meta .ic { color: var(--teal); flex: none; }

/* --- 7. Hero ---------------------------------------------------------- */
.hero { position: relative; display: flex; align-items: center; min-height: 560px; padding: calc(var(--header-h) + 40px) 0 60px; }
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__title {
  font-size: clamp(32px, 6vw, 58px); line-height: 1.02; text-transform: uppercase;
  font-weight: 800; letter-spacing: -.01em;
}
.hero__title .t-teal { color: var(--teal); display: block; }
.hero__title .t-ink  { color: var(--ink); display: block; }
.hero__title .t-white { color: #fff; display: block; }
.hero__script { font-family: var(--font-script); font-size: clamp(30px, 5vw, 50px); color: var(--orange); text-transform: none; display: block; line-height: 1.05; font-weight: 700; }
.hero__text { max-width: 430px; margin-top: 18px; font-size: 15px; }
.hero__cta { margin-top: 26px; }
.hero__body { max-width: 620px; }

/* dark photo hero: white text + gradient scrim */
.hero--dark .hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,30,42,.78) 0%, rgba(6,30,42,.5) 45%, rgba(6,30,42,.12) 100%);
}
.hero--dark .hero__text { color: rgba(255,255,255,.92); }
.hero--dark .hero__title { color: #fff; }

/* light photo hero: gradient from the page background on the left */
.hero--light { background: linear-gradient(180deg, #eaf6fa 0%, #f6fcfd 100%); }
.hero--light .hero__bg { left: auto; width: 62%; }
.hero--light .hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #eef8fb 0%, rgba(238,248,251,.75) 22%, rgba(238,248,251,0) 60%);
}
.hero--light .hero__text { color: var(--body); }

/* short hero used on inner pages */
.hero--compact { min-height: 400px; }

/* split hero: buttons on the left, a smaller heading on the right */
.hero--split .hero__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hero--split .hero__body { order: 2; text-align: right; max-width: 640px; margin-left: auto; }
.hero--split .hero__actions { order: 1; flex: none; }
.hero--split .hero__title { font-size: clamp(24px, 3.6vw, 42px); }
.hero--split .hero__script { font-size: clamp(22px, 3vw, 34px); }
/* inner pages: headings are long ("Surf School Essaouira Morocco"), so a notch smaller */
.hero--split.hero--compact .hero__title { font-size: clamp(21px, 2.7vw, 34px); }
.hero--split.hero--compact .hero__script { font-size: clamp(19px, 2.2vw, 27px); }
.hero--split .hero__cta { margin-top: 0; }
.hero--split .hero__text { margin-left: auto; }
.hero--split .hero__body .tag-row,
.hero--split .hero__body .post__meta { justify-content: flex-end; }
.hero--split .hero-chips { order: 1; margin-top: 0; }

/* wave divider under a hero */
.wave-divider { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; line-height: 0; color: #fff; }
.wave-divider svg { width: 100%; height: 58px; display: block; }

/* hero meta chips card (camp detail) */
.hero-chips {
  position: relative; z-index: 3; margin-top: 30px;
  display: inline-flex; flex-wrap: wrap; gap: 0;
  background: rgba(255,255,255,.96); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.hero-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 20px; font-size: 12.5px; font-weight: 600; color: var(--ink);
  border-right: 1px solid var(--line);
}
.hero-chip:last-child { border-right: 0; }
.hero-chip .ic { color: var(--teal); flex: none; }

/* --- 8. Feature strip ------------------------------------------------- */
.features {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.features--float { margin-top: -46px; position: relative; z-index: 4; }
.feature { display: flex; align-items: flex-start; gap: 13px; padding: 22px 20px; border-right: 1px solid var(--line); }
.feature:last-child { border-right: 0; }
.feature__ic {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.feature__t { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); line-height: 1.35; }
.feature__d { display: block; font-size: 12.5px; margin-top: 3px; color: var(--body); line-height: 1.5; }

/* --- 9. Cards --------------------------------------------------------- */
.grid { display: grid; gap: 24px; }
/* grid items default to min-width:auto, which lets a wide table push the page sideways */
.grid > *, .split > *, .contact-grid > *, .band__grid > * { min-width: 0; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--teal-soft); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card__badge {
  position: absolute; left: 0; bottom: 0;
  background: var(--teal-dd); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 0 6px 0 0;
}
.card__badge--pop { left: auto; right: 0; top: 0; bottom: auto; border-radius: 0 0 0 6px; background: var(--teal); }
.card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: 16px; color: var(--teal-ink); font-weight: 800; }
.card__title--ink { color: var(--ink); }
.card__desc { font-size: 13.5px; margin-top: 8px; color: var(--body); }
.card__list { margin: 14px 0 0; display: grid; gap: 7px; }
.card__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.8px; color: var(--body); }
.card__list .ic { color: var(--teal); flex: none; margin-top: 2px; }
.card__price { margin-top: 16px; font-size: 21px; font-weight: 800; color: var(--ink); }
.card__price .per { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.card__actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.card__actions .btn { flex: 1 1 auto; }
.card__foot { margin-top: auto; }

/* camp card */
.ccard .card__body { padding-top: 16px; }
.ccard .eyebrow { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ccard .eyebrow .ic { flex: none; }
.ccard__pricebar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.ccard__price { display: flex; flex-direction: column; min-width: 0; }
.ccard__price-v { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.1; letter-spacing: -.01em; }
.ccard__price-n { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* program card (icon overlapping the photo) */
.pcard { position: relative; }
.card__ic { color: var(--teal-ink); margin-right: 9px; }
.pcard__ic {
  position: absolute; left: 18px; top: -22px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(10,171,200,.35);
}
.pcard .card__body { padding-top: 34px; position: relative; }

/* --- 10. Price tables ------------------------------------------------- */
.ptable { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background: #fff; }
.ptable__head { background: var(--teal-dd); color: #fff; text-align: center; padding: 14px 18px; }
.ptable__title { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #fff; }
.ptable__sub { font-size: 12.5px; opacity: .9; margin-top: 2px; }
.ptable__scroll { overflow-x: auto; }
.ptable table { min-width: 460px; }
.ptable th, .ptable td { padding: 12px 16px; font-size: 14px; text-align: center; border-bottom: 1px solid var(--line); }
.ptable thead th {
  background: #fff; color: var(--teal-dd);
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 12.5px;
  border-bottom: 2px solid var(--line);
}
.ptable tbody th, .ptable td.row-label { text-align: left; font-weight: 600; color: var(--ink); }
.ptable tbody tr:nth-child(even) { background: #fafdfe; }
.ptable tbody tr:hover { background: var(--teal-soft-2); }
.ptable tbody tr:last-child td, .ptable tbody tr:last-child th { border-bottom: 0; }
.ptable__note { margin-top: 14px; font-size: 12px; color: var(--muted); }
.ptable__note p { margin: 0 0 3px; }

/* side box next to a table */
.sidebox { background: var(--teal-soft); border-radius: var(--radius); padding: 22px 20px; display: grid; gap: 18px; align-content: start; }
.sidebox__row { display: flex; gap: 13px; align-items: flex-start; }
.sidebox__ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; }
.sidebox__t { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--teal-ink); }
.sidebox__d { font-size: 12.5px; color: var(--body); }
.includes-box { background: var(--teal-soft); border-radius: var(--radius); padding: 22px; display: flex; gap: 16px; align-items: center; }
.includes-box__ic { flex: none; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--teal); color: var(--teal); display: flex; align-items: center; justify-content: center; }
.includes-box__t { font-size: 14px; font-weight: 800; color: var(--teal-ink); margin-bottom: 4px; }
.includes-box__d { font-size: 13px; color: var(--body); }

/* --- 11. Lesson cards (school pages) ---------------------------------- */
.lcard { position: relative; }
.lcard .card__title { line-height: 1.25; }
.lcard .eyebrow { margin-top: 4px; }
.lcard__desc { font-size: 13.5px; color: var(--body); margin: 14px 0 0; }

/* durations and prices as a scannable row instead of a squeezed side table */
.lcard__rates {
  margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; background: #fff;
}
.lcard__rates-t {
  margin: 0; background: var(--teal-dd); color: #fff; text-align: center;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 12px;
}
.lcard__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.lcard__cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 11px 4px; border-right: 1px solid var(--line);
}
.lcard__cell:last-child { border-right: 0; }
.lcard__dur { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.lcard__amt { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.lcard__inc { margin-top: 16px; }
.lcard .card__foot { padding-top: 18px; }

/* --- 11b. Link strip (home quick links) -------------------------------- */
.linkstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.linkstrip__item {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.linkstrip__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--teal); }
.linkstrip__ic {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--teal-soft); color: var(--teal-dd);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease;
}
.linkstrip__item:hover .linkstrip__ic { background: var(--teal-dd); color: #fff; }
.linkstrip__body { min-width: 0; flex: 1; }
.linkstrip__t { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.linkstrip__s { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.linkstrip__cta {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-dd);
}
.linkstrip__cta .ic { transition: transform .18s ease; }
.linkstrip__item:hover .linkstrip__cta { color: var(--orange); }
.linkstrip__item:hover .linkstrip__cta .ic { transform: translateX(3px); }

/* intro split: page links on the left, the school's own text on the right */
.introsplit { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 44px; align-items: center; }
.introsplit__links { display: grid; gap: 14px; }
.introsplit__text { font-size: 15.5px; line-height: 1.85; color: var(--body); }
.introsplit__text p + p { margin-top: 1.1em; }

/* --- 11c. Tabs --------------------------------------------------------- */
.tabs__bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; }
.tabs__btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 22px; color: var(--body);
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tabs__btn .ic { flex: none; color: var(--teal); transition: color .18s ease; }
.tabs__btn:hover { border-color: var(--teal); color: var(--ink); }
.tabs__btn.is-active {
  background: var(--teal-dd); border-color: var(--teal-dd); color: #fff;
  box-shadow: 0 8px 20px rgba(11, 127, 151, .28);
}
.tabs__btn.is-active .ic { color: #fff; }
.tabs__panel[hidden] { display: none; }
.tabs__panel.is-in { animation: nk-fade .3s ease both; }
@keyframes nk-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tabs__panel.is-in { animation: none; }
}

/* --- 11d. Intro + side panel (lesson pages) ---------------------------- */
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 34px; align-items: start; }
.intro-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 880px; margin: 0 auto; text-align: center; }
.intro-grid--single .squiggle { margin-left: auto; margin-right: auto; }
.intro-title { font-size: clamp(19px, 2.6vw, 24px); text-transform: uppercase; color: var(--teal-ink); letter-spacing: .01em; }
.lead-copy { font-size: 15px; line-height: 1.85; color: var(--body); }
.lead-copy p + p { margin-top: 1em; }
.intro-panel {
  background: var(--teal-soft); border-radius: var(--radius);
  border-left: 4px solid var(--orange); padding: 28px 26px;
}
.intro-panel__ic {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--teal-dd); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.intro-panel__t {
  font-size: 15px; text-transform: uppercase; color: var(--teal-ink);
  letter-spacing: .04em; margin-bottom: 12px;
}
.intro-panel p { font-size: 13.8px; line-height: 1.8; color: var(--body); }

/* --- 12. Welcome / split blocks --------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 34px; align-items: center; }
.split--rev .split__media { order: 2; }
.split__media img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__title { font-size: clamp(19px, 2.6vw, 24px); text-transform: uppercase; color: var(--teal-ink); margin-bottom: 14px; }
.split-box { background: var(--teal-soft); border-radius: var(--radius); padding: 30px; }
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(10,110,133,.15); }
.stat { display: flex; gap: 9px; align-items: flex-start; }
.stat .ic { color: var(--teal); flex: none; margin-top: 1px; }
.stat__v { font-size: 12px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.stat__l { font-size: 11.5px; color: var(--muted); }

/* --- 13. Service cards ------------------------------------------------ */
.svc { display: flex; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.svc__media { flex: none; width: 140px; border-radius: var(--radius-sm); overflow: hidden; }
.svc__media img { width: 100%; height: 100%; min-height: 130px; object-fit: cover; }
.svc__t { font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--teal-ink); }
.svc__d { font-size: 13px; margin: 8px 0 14px; color: var(--body); }

/* --- 14. Accordion ---------------------------------------------------- */
.acc { display: grid; gap: 10px; }
.acc__item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: none; border: 0; padding: 14px 16px; text-align: left;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.acc__btn .ic { color: var(--teal); flex: none; transition: transform .25s ease; }
.acc__item.is-open .acc__btn { color: var(--teal-ink); }
.acc__item.is-open .acc__btn .ic { transform: rotate(180deg); }
.acc__panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc__panel-in { padding: 0 16px 16px; font-size: 13.5px; color: var(--body); }

/* --- 15. Spec rows (camp detail) -------------------------------------- */
.spec { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.spec__row { display: grid; grid-template-columns: 190px 1fr; gap: 0; border-bottom: 1px solid var(--line); }
.spec__row:last-child { border-bottom: 0; }
.spec__label {
  display: flex; align-items: center; gap: 11px; padding: 18px;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--teal-ink);
}
.spec__label .ic { color: var(--teal); flex: none; }
.spec__label--orange { color: var(--orange); }
.spec__label--orange .ic { color: var(--orange); }
.spec__val { padding: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.spec__val--1 { grid-template-columns: 1fr; }
.spec__val li, .spec__val .spec-item { display: flex; align-items: flex-start; gap: 9px; font-size: 12.8px; color: var(--body); }
.spec__val .dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); margin-top: 8px; }
.spec__val .ic { color: var(--teal); flex: none; margin-top: 1px; }

/* quick facts strip */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--teal-soft-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fact { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-right: 1px solid var(--line); }
.fact:last-child { border-right: 0; }
.fact .ic { color: var(--teal); flex: none; }
.fact__v { display: block; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.fact__l { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* --- 15b. Camp page panels -------------------------------------------- */
.grid--hl { align-items: stretch; }
.grid--wide-first   { grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); }
.grid--narrow-first { grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); }
.panel__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow); height: 100%;
}
.panel--soft { background: var(--teal-soft); border-color: transparent; }
.panel--in { border-top: 3px solid var(--teal); }
.panel--ex { border-top: 3px solid var(--orange); }
.panel__t {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--teal-ink); margin-bottom: 16px;
}
.panel__t .ic { color: var(--teal); flex: none; }
.panel--ex .panel__t { color: var(--orange); }
.panel--ex .panel__t .ic { color: var(--orange); }
.panel__list { display: grid; gap: 10px; }
.panel__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--body); }
.panel__list .ic { color: var(--teal); flex: none; margin-top: 1px; }
.panel--ex .panel__list .ic { color: var(--orange); }
.panel__list .dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); margin-top: 8px; }
.panel__media { margin-top: 18px; border-radius: var(--radius-sm); overflow: hidden; }
.panel__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.facgroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.facgroup__t {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}

/* camp type cards — one enquiry button each */
.ctype {
  position: relative; display: flex; flex-direction: column; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 22px 24px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ctype:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--teal); }
.ctype__ic {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--teal-dd); color: #fff; border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(11, 127, 151, .3);
}
.ctype__t { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
.ctype__note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.ctype__p { font-size: 22px; font-weight: 800; color: var(--teal-dd); margin: 16px 0 20px; letter-spacing: -.01em; }
.ctype__foot { margin-top: auto; }

/* how to get there */
.wayto {
  display: flex; align-items: center; gap: 14px;
  background: var(--teal-soft); border-radius: var(--radius); padding: 20px 22px;
}
.wayto__ic {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--teal-dd);
  display: flex; align-items: center; justify-content: center;
}
.wayto__t { font-size: 14px; font-weight: 700; color: var(--ink); }
.tag--light { background: rgba(255, 255, 255, .16); color: #fff; }

/* --- 15c. FAQ grid (3 across) ----------------------------------------- */
.faqgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.faqcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.faqcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--teal); }
.faqcard__q {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14.5px; line-height: 1.4; color: var(--ink); margin-bottom: 12px;
}
.faqcard__mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal-soft); color: var(--teal-dd);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
}
.faqcard__a { font-size: 13.5px; line-height: 1.75; color: var(--body); margin: 0; }
.section--soft .faqcard { border-color: transparent; }

/* --- 15d. Blog -------------------------------------------------------- */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .34fr); gap: 40px; align-items: start; }
.blog-filters { justify-content: flex-start; margin-bottom: 0; }
.bcard .card__media { display: block; }
.bcard__meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted); margin: 0 0 8px;
}
.bcard__meta .ic { color: var(--teal); flex: none; }
.bcard__dot { color: var(--line); }
.bcard .card__title { font-size: 16.5px; line-height: 1.35; }
.bcard .card__title a:hover { color: var(--teal-dd); }

/* article body */
.hero__title--post { font-size: clamp(24px, 4vw, 40px); text-transform: none; letter-spacing: -.01em; }
.post__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,.85); margin-top: 14px; }
.post__meta .ic { color: #fff; flex: none; }
.post { font-size: 15.5px; line-height: 1.85; color: var(--body); }
.post > p { margin: 0 0 1.15em; }
.post__lead {
  font-size: 17px; line-height: 1.75; color: var(--ink); font-weight: 500;
  padding-left: 18px; border-left: 4px solid var(--orange); margin-bottom: 28px;
}
.post__h2 {
  font-size: clamp(18px, 2.6vw, 22px); color: var(--teal-ink);
  text-transform: uppercase; letter-spacing: .01em; margin: 34px 0 14px;
}
.post__h3 { font-size: clamp(16px, 2.1vw, 18px); color: var(--ink); margin: 26px 0 10px; }
.post__list { display: grid; gap: 10px; margin: 0 0 1.3em; }
.post__list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; }
.post__list .ic { color: var(--teal); flex: none; margin-top: 4px; }
.post__olist { margin: 0 0 1.3em; padding-left: 22px; }
.post__olist li { font-size: 14.5px; margin-bottom: 8px; }
.post a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 2px; }
.post a:hover { color: var(--orange); }
.post strong { color: var(--ink); font-weight: 700; }
.post__cta { margin-top: 40px; background: var(--teal-soft); border-radius: var(--radius); padding: 28px 26px; }
.post__cta-t { font-size: 18px; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 10px; }

/* sidebar */
.sidebar { display: grid; gap: 20px; position: sticky; top: 100px; }
.sidebar__box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; box-shadow: var(--shadow); }
.sidebar__box--teal { background: var(--teal-soft); border-color: transparent; }
.sidebar__t {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--teal-ink); margin-bottom: 16px;
}
.sidebar__t .ic { color: var(--teal); flex: none; }
.sidebar__p { font-size: 13.5px; color: var(--body); margin-bottom: 16px; }
.sidebar__camps { display: grid; gap: 12px; }
.scamp { display: flex; gap: 12px; align-items: center; }
.scamp__media { flex: none; width: 64px; height: 52px; border-radius: var(--radius-sm); overflow: hidden; background: var(--teal-soft); }
.scamp__media img { width: 100%; height: 100%; object-fit: cover; }
.scamp__body { min-width: 0; }
.scamp__t { display: block; font-size: 12.8px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.scamp:hover .scamp__t { color: var(--teal-dd); }
.scamp__p { display: block; font-size: 12px; font-weight: 800; color: var(--orange); margin-top: 3px; }

/* --- 15e. First-party reviews (per camp / per sport) ------------------ */
.lrv { display: grid; grid-template-columns: minmax(0, .26fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.lrv-score {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 18px; text-align: center; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.lrv-score__v { font-family: var(--font-num); font-size: 40px; font-weight: 700; color: var(--teal-dd); line-height: 1; }
.lrv-score__o { font-size: 18px; color: var(--muted); font-weight: 500; }
.lrv-score__c { font-family: var(--font-num); font-size: 12.5px; color: var(--muted); }
.lrv-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lrv-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
}
.lrv-card__top { display: flex; align-items: center; gap: 11px; }
.section--soft .lrv-score, .section--soft .lrv-card { border-color: transparent; }
.lrv-empty {
  text-align: center; background: var(--teal-soft); border-radius: var(--radius);
  padding: 34px 24px; max-width: 620px; margin: 0 auto;
}
.lrv-empty__ic {
  width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--teal-dd);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.lrv-empty__t { font-family: var(--font-head); font-size: 17px; color: var(--teal-ink); margin-bottom: 6px; }
.lrv-empty__d { font-size: 13.5px; color: var(--body); margin: 0; }

/* --- 16. Reviews (Google Places, server-rendered) --------------------- */
.rvblock { display: grid; grid-template-columns: minmax(0, .28fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rv-wrap { min-width: 0; }
.rv-score__g { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.rv__pic { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--teal-soft); }
.rv__id { min-width: 0; flex: 1; }
.rv__id .rv__name, .rv__id .rv__when { display: block; }
.rv__text {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden; margin: 0;
}
.rv__more { font-size: 11.5px; font-weight: 700; color: var(--teal-dd); text-decoration: underline; margin-top: auto; }

/* --- 16b. Reviews base ------------------------------------------------ */
.reviews { position: relative; }
.rv-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rv {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
}
.rv__top { display: flex; align-items: center; gap: 11px; }
.rv__av {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--teal-dd); color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.rv__name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.rv__when { font-size: 11.5px; color: var(--muted); }
.rv__g { margin-left: auto; flex: none; }
.stars { color: #fbbc05; display: inline-flex; gap: 1px; }
.rv__text { font-size: 13px; color: var(--body); }
.rv-score {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 18px; text-align: center; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.rv-score__l { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.rv-score__c { font-size: 12px; color: var(--muted); }
.rv-dots { display: flex; justify-content: center; gap: 7px; margin-top: 22px; }
.rv-dots:empty { display: none; }
.rv-dot { width: 8px; height: 8px; border-radius: 50%; background: #cfe2e8; border: 0; padding: 0; }
.rv-dot.is-active { background: var(--teal); }

/* --- 17. Gallery ------------------------------------------------------ */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gal--strip { grid-template-columns: repeat(6, 1fr); }
.gal--5 { grid-template-columns: repeat(5, 1fr); }
.gal__item { display: block; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; background: var(--teal-soft); }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gal__item:hover img { transform: scale(1.06); }
.gal-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.gal-filter {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 8px 16px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--body);
}
.gal-filter.is-active { background: var(--teal-dd); border-color: var(--teal-dd); color: #fff; }

.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(6,26,35,.92); display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; border-radius: 8px; object-fit: contain; }
.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(255,255,255,.14); color: #fff; border: 0;
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.lightbox__close { top: 20px; right: 20px; }
.lightbox__nav--prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.85); font-size: 13px; }

/* --- 18. Lesson price band (home) ------------------------------------- */
.band {
  position: relative; overflow: hidden; padding: 66px 0;
  background:
    radial-gradient(1100px 340px at 15% -10%, rgba(255,255,255,.13), transparent 65%),
    radial-gradient(900px 300px at 100% 110%, rgba(0,0,0,.16), transparent 60%),
    var(--teal-dd);
}
.band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--orange) 100%); opacity: .8;
}
.band__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.pcard-price {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; padding: 34px 22px 24px;
  text-align: center; box-shadow: 0 16px 44px rgba(4, 40, 52, .26);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pcard-price::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--teal), var(--orange));
}
.pcard-price:hover { transform: translateY(-5px); box-shadow: 0 22px 54px rgba(4, 40, 52, .32); }
.pcard-price__ic {
  position: absolute; top: -23px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--teal-dd); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(4, 40, 52, .3); border: 3px solid #fff;
}
.pcard-price__flag {
  align-self: center;
  background: rgba(249, 115, 22, .12); color: var(--orange);
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px; margin-bottom: 14px;
}
.pcard-price__sport { font-size: 17px; font-weight: 800; text-transform: uppercase; color: var(--ink); letter-spacing: .05em; }
.pcard-price__type {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-top: 6px; min-height: 2.6em; line-height: 1.3;
}
.pcard-price__v {
  font-size: 46px; font-weight: 800; color: var(--teal-dd);
  margin: 12px 0 18px; line-height: 1; letter-spacing: -.02em;
}
.pcard-price__list {
  display: grid; gap: 9px; margin: 0 0 22px; text-align: left;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.pcard-price__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.8px; color: var(--body); }
.pcard-price__list .ic { color: var(--teal); flex: none; margin-top: 2px; }
.pcard-price .btn { margin-top: auto; }

/* --- 19. Contact ------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 34px; align-items: start; }
.cinfo { display: grid; gap: 14px; }
.cinfo__row { display: flex; gap: 12px; align-items: flex-start; }
.cinfo__ic { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-dd); display: flex; align-items: center; justify-content: center; }
.cinfo__l { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--muted); }
.cinfo__v { font-size: 14px; font-weight: 600; color: var(--ink); }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.map iframe { display: block; width: 100%; height: 320px; border: 0; }
.map__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.map__logo { width: 38px; height: 38px; object-fit: contain; flex: none; }
.map__id { display: flex; flex-direction: column; min-width: 0; }
.map__name { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.map__addr { font-size: 12px; color: var(--muted); }
.map__link { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; flex: none; font-size: 12.5px; font-weight: 600; color: var(--teal-ink); }
.map__link:hover { text-decoration: underline; }

.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10,171,200,.15);
}
.field--hp { position: absolute; left: -9999px; }
.form__note { font-size: 12px; color: var(--muted); margin-top: 12px; }
.alert { border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13.5px; margin-bottom: 18px; }
.alert--ok { background: #e7f7ee; color: #14663c; border: 1px solid #b8e6cd; }
.alert--err { background: #fdecec; color: #922; border: 1px solid #f4c7c7; }

/* --- 20. Footer ------------------------------------------------------- */
.ftr { background: var(--navy); color: rgba(255,255,255,.72); padding: 52px 0 0; margin-top: 0; }
.ftr__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.25fr 1.25fr; gap: 40px; }
.ftr__logo img { height: 44px; width: auto; margin-bottom: 14px; }
.ftr__about { font-size: 13px; line-height: 1.7; }
.ftr__h { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: 14px; }
.ftr__list { display: grid; gap: 8px; }
.ftr__list a { font-size: 13px; transition: color .18s ease; }
.ftr__list a:hover { color: var(--teal); }
.ftr__contact { display: grid; gap: 11px; }
.ftr__contact-row { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; }
.ftr__contact-row .ic { color: var(--teal); flex: none; margin-top: 2px; }
/* Font Awesome icons in the footer */
.ftr__contact-row > i { color: var(--teal); flex: none; width: 17px; margin-top: 3px; font-size: 14px; text-align: center; }
.ftr__social > a > i { font-size: 14px; line-height: 1; }
.ftr__social { display: flex; gap: 9px; margin-top: 16px; }
.ftr__social a {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: transform .18s ease, opacity .18s ease;
}
.ftr__social a:hover { transform: translateY(-2px); }
.s-ig { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.s-fb { background: #1877f2; }
.s-wa { background: #25d366; }
.s-yt { background: #ff0000; }
.s-pi { background: #e60023; }
.s-tt { background: #010101; }
.ftr__social { flex-wrap: wrap; }
.ftr__cta { margin-top: 16px; }
.ftr__bar { margin-top: 40px; background: var(--navy-bar); color: rgba(255,255,255,.92); text-align: center; padding: 13px 0; font-size: 12.5px; }
.ftr__bar a { color: #fff; }

/* --- 21. Misc --------------------------------------------------------- */
/* Font Awesome icon sizing — one class per bucket, no inline styles */
.nk-ic { font-size: 17px; line-height: 1; display: inline-block; text-align: center; width: 1.15em; }
.nk-ic--xs { font-size: 13px; }
.nk-ic--sm { font-size: 15px; }
.nk-ic--md { font-size: 19px; }
.nk-ic--lg { font-size: 21px; }
.nk-ic--xl { font-size: 25px; }
.ic { flex: none; }
.ic-sm { font-size: 15px; }
.center { text-align: center; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.stack-24 > * + * { margin-top: 24px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  background: var(--teal-soft); color: var(--teal-ink);
  border-radius: 999px; padding: 5px 12px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.prose { font-size: 14.5px; color: var(--body); }
.prose h3 { font-size: 17px; color: var(--teal-ink); margin: 22px 0 8px; text-transform: uppercase; }
.badge-days {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--teal-soft); color: var(--teal-ink);
  border-radius: var(--radius-sm); padding: 6px 12px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
}
.dayline { display: grid; gap: 10px; }
.dayline__row { display: flex; gap: 14px; align-items: flex-start; }
.dayline__n {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--teal-dd); color: #fff; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.dayline__t { font-size: 13.5px; color: var(--body); padding-top: 6px; }
.whatsapp-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 55;
  display: flex; align-items: center; gap: 10px;
  color: inherit;
}
.whatsapp-fab__btn {
  flex: none;
  width: 52px; height: 52px; border-radius: 50%; background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(37,211,102,.4);
  transition: transform .18s ease;
}
.whatsapp-fab:hover .whatsapp-fab__btn { transform: scale(1.06); }
.whatsapp-fab__msg {
  display: block; padding: 9px 14px; border-radius: 10px;
  background: #fff; color: var(--navy, #0a2c3d); line-height: 1.35;
  box-shadow: 0 6px 22px rgba(6, 26, 35, .18);
}
.whatsapp-fab__l1 { display: block; font-size: 13px; }
.whatsapp-fab__l2 { display: block; font-size: 14px; font-weight: 800; }
@media (max-width: 520px) {
  .whatsapp-fab__msg { padding: 7px 11px; }
  .whatsapp-fab__l1 { font-size: 11.5px; }
  .whatsapp-fab__l2 { font-size: 12.5px; }
}

/* --- 23. Camp modal (CHECK FULL CAMP) --------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: none; align-items: flex-start; justify-content: center;
  padding: 24px 16px; background: rgba(8, 34, 46, .62); overflow-y: auto;
}
.modal.is-open { display: flex; }
.modal__panel {
  position: relative; margin: auto; width: min(1000px, 100%);
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(6, 26, 35, .35);
}
.modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.modal__close:hover { background: #fff; }
.modal__hero { position: relative; height: 190px; background: var(--teal-soft); }
.modal__hero img { width: 100%; height: 100%; object-fit: cover; }
.modal__hero-in {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px;
  background: linear-gradient(0deg, rgba(6, 30, 42, .88) 0%, rgba(6, 30, 42, .1) 100%);
  color: #fff;
}
.modal__title { font-size: clamp(18px, 3vw, 25px); color: #fff; text-transform: uppercase; }
.modal__from { font-size: 13px; color: rgba(255, 255, 255, .92); margin-top: 4px; }
.modal__fields { display: grid; gap: 12px; }
.modal__fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.modal__fields--2 .field--full { grid-column: 1 / -1; }

/* slim variant — the generic enquiry popup (lessons, services, site-wide) */
.modal--slim .modal__panel { width: min(620px, 100%); }
.modal__hero--sm { height: 150px; }
.modal__plainhead { background: var(--teal-dd); padding: 26px 24px 22px; }
.modal__plainhead .modal__title { color: #fff; }
.modal__plainhead .modal__from { color: rgba(255, 255, 255, .88); }
.modal__slim-body { padding: 24px; max-height: 72vh; overflow-y: auto; }
.modal__msg { border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13px; margin-bottom: 14px; display: none; }
.modal__msg.is-on { display: block; }
.modal__msg--ok { background: #e7f7ee; color: #14663c; border: 1px solid #b8e6cd; }
.modal__msg--err { background: #fdecec; color: #922; border: 1px solid #f4c7c7; }
body.modal-open { overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sec-title--left { text-align: left; }
.t-accent { color: var(--teal); }
.container--narrow { max-width: 840px; }
.center-row { justify-content: center; }
.grid--stretch { align-items: stretch; }
/* wider first column: table beside a side box, photo beside the spec sheet */
.grid--table { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.grid--camp  { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: start; }
.camp-photo img { width: 100%; height: 100%; border-radius: var(--radius); object-fit: cover; aspect-ratio: 3 / 4; }
.center-prose { max-width: 780px; margin: 0 auto; text-align: center; }
.spec__val--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spec-note { font-size: 11.8px; color: var(--muted); }
.price-lines { display: grid; gap: 7px; margin-bottom: 14px; }
.price-lines li { display: flex; justify-content: space-between; gap: 14px; font-size: 12.8px; color: var(--body); }
.price-lines strong { color: var(--ink); }
.rule-orange { display: block; width: 66px; height: 3px; background: var(--orange); border-radius: 2px; margin: 18px 0 0; }
.faq-more { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--body); }
.faq-more .ic { color: var(--teal); flex: none; }
.faq-more a { color: var(--teal-dd); font-weight: 700; text-decoration: underline; }
.list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; gap: 8px 20px; }
.section--404 { padding: 130px 0 90px; }
.section--404 .squiggle { margin-top: 12px; }

/* --- 22. Responsive --------------------------------------------------- */
@media (max-width: 1260px) {
  /* 10 nav items — start tightening before they crowd the Send Enquiry button */
  .hdr__nav { gap: 15px; }
  .hdr__link { font-size: 11.4px; letter-spacing: .04em; }
}
@media (max-width: 1080px) {
  .hdr__nav { gap: 14px; }
  .hdr__link { font-size: 10.8px; letter-spacing: .05em; }
}
@media (max-width: 980px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: flex; }
  .hdr__cta { display: none; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .feature:nth-child(2n) { border-right: 0; }
  .feature:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(2n) { border-right: 0; }
  .fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .intro-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .linkstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faqgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* text first, then the page links */
  .introsplit { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .introsplit__text { order: 1; }
  .introsplit__links { order: 2; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .split--rev .split__media { order: 0; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .band__grid { grid-template-columns: minmax(0, 1fr); }
  .band__cards { padding: 34px 0; }
  .band__media { min-height: 240px; }
  .gal { grid-template-columns: repeat(3, 1fr); }
  .gal--strip, .gal--5 { grid-template-columns: repeat(4, 1fr); }
  .rv-track { grid-template-columns: repeat(2, 1fr); }
  .lrv { grid-template-columns: minmax(0, 1fr); }
  .lrv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lrv-score { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 14px; padding: 14px 16px; }
  /* score card goes full width and reads as one horizontal strip */
  .rvblock { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rv-score {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 8px 14px; padding: 14px 16px;
  }
  .rv-score__c, .rv-score__g { margin-top: 0; }
  .grid--table, .grid--camp { grid-template-columns: minmax(0, 1fr); }
  .grid--wide-first, .grid--narrow-first { grid-template-columns: minmax(0, 1fr); }
  .camp-photo img { aspect-ratio: 16 / 10; }
  .spec__val--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* stacked: heading first, buttons under it, both left aligned */
  .hero--split .hero__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero--split .hero__body { order: 1; text-align: left; max-width: 100%; margin-left: 0; }
  .hero--split .hero__actions { order: 2; }
  .hero--split .hero__text { margin-left: 0; }
  .hero--split .hero__body .tag-row,
  .hero--split .hero__body .post__meta { justify-content: flex-start; }
  .hero--split .hero-chips { order: 2; }
  .hero--light .hero__bg { width: 100%; }
  .hero--light .hero__bg::after {
    background: linear-gradient(180deg, rgba(238,248,251,.94) 0%, rgba(238,248,251,.78) 55%, rgba(238,248,251,.35) 100%);
  }
  .ftr__grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 700px) {
  .section { padding: 46px 0; }
  .hero { min-height: 480px; padding: calc(var(--header-h) + 26px) 0 44px; }
  .hero--compact { min-height: 340px; }
  .grid--3, .grid--4, .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .features { grid-template-columns: 1fr; }
  .feature { border-right: 0; border-bottom: 1px solid var(--line); }
  .feature:last-child { border-bottom: 0; }
  .features--float { margin-top: -28px; }
  .facts { grid-template-columns: 1fr; }
  .fact { border-right: 0; border-bottom: 1px solid var(--line); }
  .fact:last-child { border-bottom: 0; }
  .facgroups { grid-template-columns: minmax(0, 1fr); }
  .panel__list--2 { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 22px 20px; }
  .spec__row { grid-template-columns: 1fr; }
  .spec__label { padding-bottom: 0; }
  .spec__val, .spec__val--3 { grid-template-columns: 1fr; }
  .list-2 { grid-template-columns: 1fr; }
  .statrow { grid-template-columns: repeat(2, 1fr); }
  .band { padding: 48px 0; }
  .band__cards { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .pcard-price { padding: 30px 18px 20px; }
  .pcard-price__type { min-height: 0; }
  .pcard-price__v { font-size: 40px; margin: 10px 0 14px; }
  .gal, .gal--strip, .gal--5 { grid-template-columns: repeat(2, 1fr); }
  .rv-track { grid-template-columns: minmax(0, 1fr); }
  .lrv-list { grid-template-columns: minmax(0, 1fr); }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .form { padding: 20px; }
  .linkstrip { grid-template-columns: minmax(0, 1fr); }
  .faqgrid { grid-template-columns: minmax(0, 1fr); }
  .sidebar { grid-template-columns: minmax(0, 1fr); }
  .post__cta { padding: 22px 18px; }
  .tabs__bar { gap: 8px; }
  .tabs__btn { padding: 10px 16px; font-size: 10.5px; }
  .intro-panel { padding: 24px 20px; }
  .svc { flex-direction: column; }
  .svc__media { width: 100%; }
  .svc__media img { min-height: 170px; }
  .ftr__grid { grid-template-columns: 1fr; }
  .modal { padding: 0; }
  .modal__panel { border-radius: 0; min-height: 100%; }
  .modal__fields--2 { grid-template-columns: minmax(0, 1fr); }
  .modal__slim-body { max-height: none; padding: 20px; }
  .hero-chips { display: grid; grid-template-columns: 1fr; width: 100%; }
  .hero-chip { border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-chip:last-child { border-bottom: 0; }
  .card__actions .btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ language switcher
   Flag + code in the header, a drop-down of the languages that publish the
   current page. Server-rendered; the JS below only toggles .is-open. */
.langsw { position: relative; flex: none; }
.langsw__btn {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 1px solid currentColor; border-radius: 999px;
  padding: 5px 10px; color: inherit; cursor: pointer;
  font-family: var(--font-menu); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; line-height: 1; opacity: .85;
  transition: opacity .18s ease, background .18s ease;
}
.langsw__btn:hover { opacity: 1; }
.langsw__btn svg:last-child { transition: transform .18s ease; }
.langsw.is-open .langsw__btn svg:last-child { transform: rotate(180deg); }
.langsw__list {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 5;
  min-width: 168px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(10, 44, 61, .16);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.langsw.is-open .langsw__list, .langsw:focus-within .langsw__list {
  opacity: 1; visibility: visible; transform: none;
}
.langsw__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.langsw__item:hover { background: var(--teal-soft); }
.langsw__item.is-active { color: var(--teal-ink); background: var(--teal-soft-2); }
.flag { display: block; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(10, 44, 61, .14); }

/* inside the mobile drawer: no drop-down, just the flags in a row */
.drawer__langs { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.langsw--drawer { display: flex; }
.langsw--drawer .langsw__btn { display: none; }
.langsw--drawer .langsw__list {
  position: static; opacity: 1; visibility: visible; transform: none;
  display: flex; flex-wrap: wrap; gap: 6px;
  min-width: 0; padding: 0; background: none; box-shadow: none;
}
.langsw--drawer .langsw__item { padding: 7px 9px; border: 1px solid var(--line); font-size: 12px; }

@media (max-width: 980px) {
  /* the nav is gone, the switcher stays — it sits next to the burger */
  .langsw { margin-left: auto; }
  .hdr__burger { margin-left: 6px; }
  .langsw__btn { padding: 5px 9px; }
}
@media (max-width: 380px) {
  .langsw__btn span { display: none; }
}

/* the "we speak…" line under the footer contact block */
.ftr__langs {
  display: flex; align-items: center; gap: 9px;
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .78);
}

/* ---------------------------------------------------------------- policy page */
.container--narrow { max-width: 860px; }
.policy__updated {
  display: flex; align-items: center; gap: 7px;
  margin: 6px 0 30px; font-size: 12.5px; color: var(--muted);
}
.policy { margin-bottom: 30px; }
.policy__h {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-head); font-size: 20px; text-transform: uppercase;
  letter-spacing: .02em; color: var(--teal-ink); margin: 0 0 14px;
}
.policy__n {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--teal); color: #fff;
  display: grid; place-items: center; font-size: 15px;
}
.policy__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.policy__list li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; background: var(--teal-soft-2);
  border-radius: 9px; line-height: 1.55;
}
.policy__list .ic { color: var(--teal); flex: none; margin-top: 3px; }
@media (max-width: 640px) {
  .policy__h { font-size: 17px; gap: 9px; }
  .policy__n { width: 27px; height: 27px; font-size: 13px; }
}
.policy__lbl { color: var(--teal-ink); }
.policy__lbl:after { content: ":"; }
.policy__sub { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.policy__sub li { list-style: disc; font-size: 14.5px; color: var(--body); }