/* =============================================================
   Anastasia Panagopoulou English School
   Design System Stylesheet
   ============================================================= */

/* ---------- 0. Gotham font-face ---------- */
@font-face { font-family: "Gotham"; src: url("../font/Gotham-Light.woff2") format("woff2"), url("../font/Gotham-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../font/Gotham-LightItalic.woff2") format("woff2"), url("../font/Gotham-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../font/Gotham-Book.woff2") format("woff2"), url("../font/Gotham-Book.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../font/Gotham-BookItalic.woff2") format("woff2"), url("../font/Gotham-BookItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../font/Gotham-Medium.woff2") format("woff2"), url("../font/Gotham-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../font/Gotham-MediumItalic.woff2") format("woff2"), url("../font/Gotham-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../font/Gotham-Bold.woff2") format("woff2"), url("../font/Gotham-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../font/Gotham-BoldItalic.woff2") format("woff2"), url("../font/Gotham-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../font/Gotham-Black.woff2") format("woff2"), url("../font/Gotham-Black.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../font/Gotham-Ultra.woff2") format("woff2"), url("../font/Gotham-Ultra.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Brand */
  --navy: #0B3048;
  --navy-700: #0e3a57;
  --navy-600: #14496b;
  --accent: #DA3613;
  --accent-soft: #ff6a47;

  /* Neutrals */
  --ink: #122230;
  --body: #4a5a67;
  --muted: #7a8896;
  --line: #e7ecf1;
  --bg: #ffffff;
  --bg-soft: #f5f8fb;
  --bg-tint: #eef4f9;
  --white: #ffffff;

  /* Accents / wash */
  --navy-wash: rgba(11, 48, 72, 0.06);
  --accent-wash: rgba(218, 54, 19, 0.08);

  /* Typography */
  --font-head: "Gotham", system-ui, sans-serif;
  --font-body: "Gotham", system-ui, sans-serif;

  /* Radius */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 44px;
  --r-pill: 999px;

  /* Shadows (soft) */
  --shadow-sm: 0 6px 18px rgba(11, 48, 72, 0.06);
  --shadow-md: 0 18px 40px rgba(11, 48, 72, 0.10);
  --shadow-lg: 0 30px 70px rgba(11, 48, 72, 0.16);
  --shadow-accent: 0 18px 38px rgba(218, 54, 19, 0.28);

  /* Spacing rhythm */
  --section-y: clamp(5.75rem, 10vw, 10.5rem);
  --container: 1200px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Reset & Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  line-height: 1.7;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; display: block; height: auto; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; padding: 0; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--accent); color: #fff; }

/* ---------- 3. Layout helpers ---------- */
/* Contains child stacking (e.g. .article-hero's negative z-index) within
   #main instead of letting it resolve against <body>'s stacking context —
   without this, a negative z-index child paints BELOW #main's own
   (invisible, non-positioned) box, letting it silently swallow clicks
   over that child's whole area. */
#main { isolation: isolate; }

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.container--narrow { --container: 820px; }

.section { padding-block: var(--section-y); }

/* Light dot pattern on every white section (and the homepage hero).
   Excluded: colour/tint variants and sections with their own image/pattern
   background (testi, teacher, why, page heroes). A soft white radial fade
   sits over the dots so text areas stay clean. */
.hero,
.error-page,
.section:not(.section--soft):not(.section--tint):not(.section--navy):not(.section--accent):not(.testi-section):not(.teacher-section):not(.why-section) {
  background-image:
    linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 180px),
    radial-gradient(ellipse at center, #fff 0%, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(rgba(11, 48, 72, 0.10) 1.2px, transparent 1.2px);
  background-size: 100% 100%, 100% 100%, 26px 26px;
}

.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--navy); color: #cfe0ec; position: relative; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--navy .lead { color: #cfe0ec; }
.section--navy .check-list strong { color: #fff; }
.section--navy .check-list .ic { background: rgba(255,255,255,0.14); color: #fff; }

/* Red feature section — text adapts for contrast */
.section--accent { background: var(--accent); color: rgba(255,255,255,0.92); position: relative; }
.section--accent h1, .section--accent h2, .section--accent h3 { color: #fff; }
.section--accent .lead { color: rgba(255,255,255,0.92); }
.section--accent .eyebrow { color: #fff; background: rgba(255,255,255,0.18); }
.section--accent .check-list strong { color: #fff; }
.section--accent .check-list .ic { background: #fff; color: var(--accent); }

/* Stacking cards (certificates) — pure CSS sticky, native scroll. Each panel
   fills the viewport, pins at the top, and the next colour slides up over it.
   The stack is pulled up so the first panel also slides over the section above. */
@media (min-width: 861px) {
  .cert-stack {
    position: relative;
    z-index: 1;
  }
  .cert-stack > .section {
    position: sticky;
    top: 0;
    min-height: 100vh;
    margin: 0;
    display: grid;
    align-content: center;
    padding-block: clamp(2rem, 5vh, 4rem);
    box-shadow: 0 -18px 50px rgba(8, 28, 45, 0.20);
  }
  /* base panel (overview) sits flat under the hero — no slide-over styling.
     Sizes to its content (not full height) so the first card rises over it soon. */
  .cert-stack > .section:first-child {
    box-shadow: none;
    min-height: 0;
    align-content: start;
    padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(6rem, 12vw, 10rem);
  }
}


.grid { display: grid; gap: 1.75rem; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.85rem 1.4rem;
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 200;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- 4. Typography utilities ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash);
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  margin-bottom: 1rem;
}
.section--navy .eyebrow { color: var(--accent-soft); background: rgba(255,255,255,0.08); }

/* hand-drawn smutz mark inside eyebrows (homepage) — recoloured via mask */
.eyebrow__mark {
  flex-shrink: 0;
  width: 66px;          /* only as wide as the dense scribble; clips trailing specks */
  height: 26px;
  -webkit-mask: url('../Images/smutz.svg') left center / auto 100% no-repeat;
  mask: url('../Images/smutz.svg') left center / auto 100% no-repeat;
  background: var(--accent);
}
.eyebrow__mark--blue { background: var(--navy); }

/* eyebrows carrying a smutz mark (homepage): drop the pill, match text to mark */
.eyebrow:has(.eyebrow__mark) {
  background: none;
  padding: 0;
  gap: 0.1rem;
  color: var(--accent);
}
.eyebrow__mark { margin-right: -0.55rem; }
.eyebrow:has(.eyebrow__mark--blue) { color: var(--navy); }

/* on coloured (navy / red) backgrounds the mark + text go white */
.section--navy .eyebrow__mark,
.section--accent .eyebrow__mark,
.testi-eyebrow .eyebrow__mark { background: #fff; }
.section--navy .eyebrow:has(.eyebrow__mark),
.section--accent .eyebrow:has(.eyebrow__mark),
.eyebrow.testi-eyebrow:has(.eyebrow__mark) { color: #fff; }

.display {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.05;
}
.h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--body);
  max-width: 60ch;
}

.section-head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head .lead { margin-inline: auto; margin-top: 1rem; }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 1.9rem;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
  box-shadow: var(--shadow-accent);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 24px 46px rgba(218,54,19,0.34); }
.btn:active { transform: translateY(-1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  border-color: rgba(11,48,72,0.18);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: var(--shadow-md); }

.btn--white-ghost {
  --btn-bg: transparent;
  --btn-fg: #fff;
  position: relative;
  overflow: hidden;
  border-color: rgba(255,255,255,0.35);
  box-shadow: none;
}
.btn--white-ghost::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 400px;
  height: 400px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, 50%) scale(0);
  transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 0;
}
.btn--white-ghost:hover {
  color: var(--navy);
  border-color: #fff;
  box-shadow: none;
}
.btn--white-ghost:hover::before { transform: translate(-50%, 50%) scale(1); }
.btn--white-ghost span,
.btn--white-ghost .text { position: relative; z-index: 1; }

/* "modern button" - uiverse.io / gharsh11032000 adapted to brand red */
.btn-modern {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 16px 44px;
  border: 4px solid transparent;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  background-color: transparent;
  border-radius: 100px;
  color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-modern svg {
  position: absolute;
  width: 24px;
  fill: var(--accent);
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-modern .arr-1 { right: 20px; }
.btn-modern .arr-2 { left: -25%; }
.btn-modern .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: var(--accent);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-modern .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-modern:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #fff;
  border-radius: 12px;
}
.btn-modern:hover .arr-1 { right: -25%; }
.btn-modern:hover .arr-2 { left: 16px; }
.btn-modern:hover .text { transform: translateX(12px); }
.btn-modern:hover svg { fill: #fff; }
.btn-modern:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px var(--accent);
}
.btn-modern:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}

/* Hero variant - filled dark red for contrast on navy */
.hero .btn-modern {
  background-color: var(--accent);
  color: #fff;
  box-shadow: none;
}
.hero .btn-modern svg { fill: #fff; }
.hero .btn-modern .circle { background-color: #8B1A08; }
.hero .btn-modern:hover { box-shadow: none; color: #fff; }
.hero .btn-modern:active { box-shadow: 0 0 0 4px var(--accent); }

/* Navy section variant - same filled treatment for contrast */
.section--navy .btn-modern,
.cta-band .btn-modern { background-color: var(--accent); color: #fff; box-shadow: none; }
.section--navy .btn-modern svg,
.cta-band .btn-modern svg { fill: #fff; }
.section--navy .btn-modern .circle,
.cta-band .btn-modern .circle { background-color: #8B1A08; }
.section--navy .btn-modern:hover,
.cta-band .btn-modern:hover { box-shadow: none; color: #fff; }
.section--navy .btn-modern:active,
.cta-band .btn-modern:active { box-shadow: 0 0 0 4px var(--accent); }

/* ---------- 6. Navigation ---------- */
.nav {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 2rem), 1200px);
  z-index: 100;
  transition: top 0.4s var(--ease);
}
.nav.is-stuck { top: 0.75rem; }

/* EXPERIMENT: the hand-drawn wobbly-pill artwork itself IS the header shape
   now (a real <img>, not a CSS background) - its own alpha silhouette and
   drop-shadow define the visible edges, nothing simulated with border-radius. */
.nav__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 6px 16px rgba(11, 48, 72, 0.10));
}
/* mobile-only torn header artwork (see max-width:1004px block below) */
.nav__torn-img { display: none; }
/* On desktop, size the nav box to the artwork's true aspect ratio so the
   wobble edges render undistorted (not stretched/cropped to fit). */
@media (min-width: 1005px) {
  .nav { aspect-ratio: 4935 / 405; }
  .nav__art { object-fit: fill; }
}
/* Dual logos - light version hidden by default, swapped in on dark hero */
.nav__logo-light { display: none; }

/* Pill inner: override .container so it fills the pill edge-to-edge with inline padding */
.nav > .container {
  width: 100%;
  max-width: none;
  height: 100%;
  padding-inline: 1.5rem;
}

.nav__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav__logo img { height: 46px; width: auto; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nav__link {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--navy);
  padding: 0.6rem 0.95rem;
  border-radius: var(--r-pill);
  line-height: 1;
  transition: color 0.25s var(--ease);
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* Wraps just the label text (+ underline), independent of .nav__link's own
   box - so the underline always hugs the visible text, even when .nav__link
   itself is stretched to a full-width tap target (mobile menu rows). */
.nav__link-label {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Pencil-drawn underline - inline SVG stroke-dashoffset animation */
.nav__underline {
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 100%;
  height: 8px;
  overflow: visible;
  pointer-events: none;
}
.nav__underline path {
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__link:not(.nav__link--contact):hover .nav__underline path,
.nav__link:not(.nav__link--contact).is-active .nav__underline path {
  stroke-dashoffset: 0;
}

.nav__link.is-active { color: var(--accent); font-weight: 700; }

.nav__link--contact {
  background: var(--accent);
  color: #fff !important;
  padding: 0.75rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  box-shadow: 0 4px 14px rgba(218, 54, 19, 0.30);
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.nav__link--contact:hover {
  background: var(--accent-soft) !important;
  box-shadow: 0 6px 20px rgba(218, 54, 19, 0.40);
  transform: translateY(-1px);
}
.nav__actions { display: flex; align-items: center; gap: 1rem; }

/* Language switcher */
.lang {
  display: inline-flex;
  align-items: center;
  background: var(--navy-wash);
  border-radius: var(--r-pill);
  padding: 0.2rem;
  gap: 0.1rem;
}
.lang__btn {
  border: none;
  background: transparent;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--navy);
  padding: 0.42rem 0.8rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.lang__btn.is-active { background: var(--navy); color: #fff; }

/* Burger */
.nav__burger {
  display: none;
  width: 46px;
  height: 46px;
  border: none;
  background: var(--navy);
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  z-index: 101;
}
/* Force navy bg when menu is open so X is always visible. */
.nav.is-open .nav__burger { background: var(--navy); }

/* span = middle bar, centred in the button */
.nav__burger span {
  position: absolute;
  left: 50%;
  top: 22px;               /* 22px from button top ≈ centre of 46px button */
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  margin-left: -11px;
  transition: opacity 0.25s;
}
/* ::before / ::after are relative to the span (2px tall) */
.nav__burger span::before,
.nav__burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.23,1,0.32,1),
              top     0.35s cubic-bezier(0.23,1,0.32,1);
}
.nav__burger span::before { top: -8px; }   /* 8px above span = 14px from button top */
.nav__burger span::after  { top:  8px; }   /* 8px below span = 30px from button top */

/* X: middle bar hidden via background (not opacity - opacity hides ::before/::after too) */
.nav.is-open .nav__burger span         { background: transparent; }
.nav.is-open .nav__burger span::before { top: 0; transform: rotate(45deg); }
.nav.is-open .nav__burger span::after  { top: 0; transform: rotate(-45deg); }

/* Mobile drawer */
.nav__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 48, 72, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease);
  z-index: 98;
}
.nav.is-open ~ .nav__backdrop,
.nav__backdrop.is-shown { opacity: 1; visibility: visible; }

/* Contact: desktop pill button hidden on mobile; drawer item hidden on desktop */
.nav__cta-mobile { display: none; }

@media (max-width: 1004px) {
  .nav { width: calc(100% - 1.5rem); top: 0.75rem; }
  .nav.is-stuck { top: 0.5rem; }
  .nav > .container { padding-inline: 1rem; }
  .nav__contact--desktop { display: none; }
  .nav__cta-mobile { display: block; margin-top: 0.75rem; text-align: center; }
  .nav__menu .nav__cta-mobile .nav__link--contact { display: inline-flex; width: auto; justify-content: center; border-radius: var(--r-pill); }
  .nav__burger { display: block; }
  .nav__menu {
    position: fixed;
    /* sit just below the floating nav pill (0.75rem offset + ~60px pill height + 0.5rem gap) */
    top: 5.25rem;
    left: 0;
    width: 100%;
    height: calc(100dvh - 5.25rem);
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 1.5rem 2rem 2rem;
    box-shadow: var(--shadow-lg);
    border-radius: 1.5rem;
    /* bottom edge sits at (top - offset) = 5.25rem - 14rem = -8.75rem; shadow-lg extends
       30px+70px below, so shadow bottom ≈ -8.75rem+6.25rem = -2.5rem - fully off-screen */
    transform: translateY(calc(-100% - 14rem));
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 99;
    overflow-y: auto;
  }
  .nav.is-open .nav__menu { transform: translateY(0); }
  .nav__link { font-size: 1.15rem; padding: 0.9rem 1rem; }
}

/* Phones and narrow tablets alike: header goes full-bleed — flush with the
   top and side edges of the screen — instead of floating as an inset pill.
   And instead of the burger opening a separate floating drawer, the header
   itself grows taller to reveal the menu, with the torn edge riding along
   at the new bottom boundary — so it reads as one banner unrolling, not
   two boxes. This now spans the whole "mobile mode" range (≤1004px), so
   there's no in-between tier with a floating pill + separate drawer.

   The wobbly artwork image is dropped here in favour of a plain white
   fill + the site's reusable .torn-edge mask: the image's cover-crop
   only looks right at one fixed aspect ratio, but this header's height
   is about to change (open vs closed), and the torn-edge mask (sized off
   width alone, via aspect-ratio) stays crisp at any height. */
@media (max-width: 1004px) {
  .nav, .nav.is-stuck {
    top: 0;
    left: 0;
    width: 100%;
    transform: none;
    padding-bottom: 3rem;
    /* Just enough top padding to clear the notch/status-bar safe area -
       no background here, so .nav__torn-img's transparent tear gaps still
       read as actual paper cutouts (a solid fill on the whole box flattened
       them into a plain rectangle). The notch strip itself is plugged by
       ::before below, and the logo/burger row gets its own opaque backing
       via .nav__inner - so only the area that needs to be solid is solid. */
    padding-top: env(safe-area-inset-top, 0px);
    z-index: 9999;
  }
  /* Solid white plug behind ONLY the notch strip (0 to safe-area-inset-top).
     Sits below .nav__inner's own background (z-index 1) and above the torn
     artwork (z-index -1), so it patches the one area with no artwork
     coverage without extending down over the tear itself. */
  .nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: env(safe-area-inset-top, 0px);
    background-color: #fff;
  }
  .nav__art { display: none; }
  /* Purpose-drawn torn-bottom artwork as a real <img>, not a CSS background
     — filter:drop-shadow follows the image's own alpha silhouette (the
     jagged torn edge), unlike box-shadow which only ever follows the
     element's rectangular border box. It's tall (viewBox 430×669) so the
     same file works at both the closed and fully-open header heights:
     bottom:0 pins its torn edge to whatever the box's current bottom edge
     is, and .nav's overflow (there is none) lets the rest show past it
     naturally. No backing fill — whatever's behind the fixed header shows
     through its torn gaps, same as the reusable .torn-edge banners
     elsewhere on the site. */
  .nav__torn-img {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    /* At the wider end of this tier (up to 1004px) the artwork scales up
       enough that the logo starts to sit above its visible paper area, so
       nudge it down - more at 1004px, tapering to 0 by ~512px. max() keeps
       narrower phones (<512px) at the original, already-correct position. */
    transform: translateY(max(0px, calc((100vw - 512px) * 0.07)));
    /* very faint — a hint of depth, not enough to read as a hard box edge */
    filter: drop-shadow(0 4px 8px rgba(11, 48, 72, 0.10));
  }

  /* .nav (outer, fixed) and .nav__inner both size naturally to their
     content — the closed row is just as tall as the logo/burger need,
     nothing more. The animated reveal is scoped to the <nav> menu
     wrapper alone (below), so it can never bleed into or clip the
     always-visible top row. The torn edge, riding on .nav's own bottom
     edge, then simply follows however tall that content makes .nav. */
  .nav__inner {
    height: auto;
    flex-wrap: wrap;
    align-content: flex-start;
    /* base .nav__inner has gap:1.5rem for the desktop link row — flexbox
       still inserts that gap between wrapped lines even when a line's
       content is height:0 (the collapsed menu), padding the closed
       header with phantom empty space. Zero it here; .nav__menu supplies
       its own top padding when open instead. */
    gap: 0;
    /* the logo/burger row's own opaque backing - picks up right where
       .nav::before's notch plug leaves off, so the two together read as
       one continuous solid area with no seam, while everything below
       (the torn edge and its gaps) stays untouched. */
    background-color: #fff;
    padding-top: 1.1rem;
  }
  .nav.is-stuck .nav__inner {
    padding-top: 0.9rem;
  }

  .nav__logo { order: 1; }
  .nav__actions { order: 2; }
  /* the <nav aria-label="Primary"> wrapper around the link list — forcing
     it to full width guarantees it wraps onto its own line below the
     logo/actions row, regardless of flex order math. Collapsed to zero
     height by default so it contributes nothing to the closed row; opens
     via its own max-height transition. */
  .nav__inner > nav[aria-label="Primary"] {
    order: 3;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav.is-open .nav__inner > nav[aria-label="Primary"] {
    max-height: min(calc(100dvh - 6rem), 34rem);
  }

  .nav__menu {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    background: none;
    box-shadow: none;
    border-radius: 0;
    transform: none;
    transition: none;
    padding: 0.9rem 0 1.5rem;
    gap: 0;
    text-align: center;
  }
  .nav__menu .nav__link { display: block; width: 100%; }
  .nav__menu .nav__underline { bottom: -8px; }
  .nav__menu .nav__cta-mobile .nav__link--contact { padding-left: 2rem; padding-right: 2rem; }
}

/* Blog article pages: the header opens directly on top of the article's
   own full-bleed photo, so the usual white torn-paper banner + navy logo
   fights with the image instead of sitting over it. While closed and not
   yet scrolled past the photo, drop the paper fill and swap to the light
   logo (same pair used in the footer) so the header reads as an overlay
   on the photo, not a separate white bar. Reverts to the normal treatment
   once the menu opens (needs its usual white backing to stay legible) or
   once scrolled past the hero into the white article body. */
@media (max-width: 1004px) {
  [data-generated="blog-post"] .nav:not(.is-stuck):not(.is-open) .nav__torn-img { display: none; }
  [data-generated="blog-post"] .nav:not(.is-stuck):not(.is-open) .nav__logo-dark { display: none; }
  [data-generated="blog-post"] .nav:not(.is-stuck):not(.is-open) .nav__logo-light { display: block; }
  [data-generated="blog-post"] .nav:not(.is-stuck):not(.is-open) .lang { background: rgba(255, 255, 255, 0.18); }
  [data-generated="blog-post"] .nav:not(.is-stuck):not(.is-open) .lang__btn { color: #fff; }
  [data-generated="blog-post"] .nav:not(.is-stuck):not(.is-open) .lang__btn.is-active { background: #fff; color: var(--navy); }
  /* .nav::before's notch plug (added for the safe-area fix) is solid white
     on every other page by default, which is right everywhere else but
     cuts a white bar into the blog hero photo here before the header has
     scrolled/opened. Only this page needs it transparent up front - once
     stuck or open, it falls through to the normal white .nav::before rule
     like every other page. */
  [data-generated="blog-post"] .nav:not(.is-stuck):not(.is-open)::before {
    background: none !important;
    background-color: transparent !important;
  }
  /* .nav__inner also carries its own unconditional white backing (added so
     the logo/burger row has an opaque plate on every other page) - that
     needs to drop out here too, or the row still paints a solid white/
     opaque block over the hero photo even with ::before cleared above. */
  [data-generated="blog-post"] .nav:not(.is-stuck):not(.is-open) .nav__inner {
    background: none !important;
    background-color: transparent !important;
  }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* same fixed extra clearance below the torn header edge as .page-hero */
  padding-top: calc(clamp(5rem, 8vw, 7rem) + 1.75rem);
  padding-bottom: clamp(4rem, 6vw, 6rem);
  /* no background shorthand here — it would reset the dot pattern
     coming from the shared rule in section 3 */
  color: var(--body);
  overflow: hidden;
}
/* Dark text treatment on the white hero */
.hero .hero__title { color: var(--navy); }
.hero .lead, .hero__text { color: var(--body); }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.hero__title { font-size: clamp(2rem, 3.7vw, 3.2rem); }

/* Hero line reveal */
.hero-line { display: block; overflow: hidden; padding-bottom: 6px; }
.hero-line > span {
  display: block;
  transform: translateY(110%);
  animation: hero-line-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-line:nth-child(1) > span { animation-delay: 0.05s; }
.hero-line:nth-child(2) > span { animation-delay: 0.22s; }
.hero-line:nth-child(3) > span { animation-delay: 0.39s; }
@keyframes hero-line-up { to { transform: translateY(0); } }

/* Highlighted word - brush stroke */
.hero-highlight {
  display: inline-block;
  position: relative;
  animation: hero-highlight-color 0.55s ease forwards 0.68s;
}
@keyframes hero-highlight-color { to { color: var(--accent); } }
.brush-stroke {
  position: absolute;
  bottom: -6px;
  left: -6px;
  width: calc(100% + 12px);
  height: 10px;
  overflow: visible;
}
.brush-stroke path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: brush-draw 0.55s ease forwards 0.68s;
}
@keyframes brush-draw { to { stroke-dashoffset: 0; } }
.hero__text { margin: 1.6rem 0 2.2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero__media { position: relative; display: flex; justify-content: center; }
/* fixed-size stage so the ink line and the motion-path share one coordinate box */
.pencil-scene { position: relative; width: 100%; height: clamp(360px, 50vh, 580px); }

/* ink line — 150×40 box centred at the bottom of the stage */
.write-line {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 150px;
  height: 40px;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}
.write-line__path {
  stroke-dasharray: var(--len, 160);
  stroke-dashoffset: var(--len, 160);
  /* same path %, easing, duration as the follow → tip stays on the ink front */
  animation: write-draw 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* the pencil's tip follows the EXACT same path as the ink (CSS Motion Path).
   Same 150×40 box centred at the bottom, so the path coordinates line up. */
.pencil-follow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 150px;
  height: 40px;
  margin-left: -75px;                /* centre without a transform (transform = motion path) */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  offset-path: path('M8 26 C 28 10, 48 34, 72 22 S 112 10, 144 22');
  offset-rotate: 0deg;               /* keep the pencil upright, don't spin along the path */
  offset-anchor: 50% 100%;           /* the tip (bottom-centre) rides the path */
  offset-distance: 0%;
  animation: pencil-follow-anim 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.pencil-tilt {
  transform-origin: bottom center;   /* lean pivots at the tip → doesn't break the follow */
  animation: pencil-wiggle 3.2s ease-in-out infinite;
}
.hero__illustration {
  display: block;
  width: auto;
  height: clamp(340px, 48vh, 560px);
}

/* tip travels along the ink path; same %, easing, duration as the draw → exact follow */
@keyframes pencil-follow-anim {
  0%   { offset-distance: 0%; }
  50%  { offset-distance: 100%; }
  65%  { offset-distance: 100%; }
  80%  { offset-distance: 0%; }
  100% { offset-distance: 0%; }
}
/* subtle writing lean + wiggle; pivots at the tip so it doesn't break sync */
@keyframes pencil-wiggle {
  0%   { transform: rotate(13deg); }
  25%  { transform: rotate(15deg); }
  50%  { transform: rotate(13deg); }
  100% { transform: rotate(13deg); }
}
/* ink draws on in step with the pencil, holds, fades, then resets */
@keyframes write-draw {
  0%   { stroke-dashoffset: var(--len, 160); opacity: 1; }
  50%  { stroke-dashoffset: 0;               opacity: 1; }
  65%  { stroke-dashoffset: 0;               opacity: 1; }
  80%  { stroke-dashoffset: 0;               opacity: 0; }
  81%  { stroke-dashoffset: var(--len, 160); opacity: 0; }
  100% { stroke-dashoffset: var(--len, 160); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pencil-follow, .pencil-tilt, .hero__illustration { animation: none; }
  .pencil-follow { offset-distance: 0%; }
  .write-line { display: none; }
}
/* small devices: smaller, tighter stage — leaves the path/line geometry untouched */
@media (max-width: 600px) {
  .pencil-scene { height: clamp(250px, 40vh, 330px); }
  .hero__illustration { height: clamp(210px, 34vh, 290px); }
}
.hero .container { position: relative; z-index: 1; }

/* ---------- 8. Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2.2rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  height: 100%;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: transparent; }

.card--plain { background: none; border: none; box-shadow: none; padding: 0; }
.card--plain:hover { box-shadow: none; }

.card__title { font-size: 1.25rem; margin-bottom: 0.7rem; }
.card__text { font-size: 0.98rem; }

/* ---- Why Choose Us - split + scroll stack ---- */
/* full-bleed decorative background photo behind the section — zoomed out,
   fixed (stays still on scroll) and faded back */
.why-section { position: relative; }
.why-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../Images/background.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-attachment: fixed;
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}
/* fixed attachment is janky on mobile — let it scroll there */
@media (max-width: 768px) {
  .why-section::before { background-attachment: scroll; }
}
.why-section > .container { position: relative; z-index: 1; }

.why-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.why-text {
  max-width: 480px;
  position: sticky;
  /* same sticky geometry as the cards (centred, 500px tall) so the text and
     the card stack pin and release together and scroll away as one unit */
  top: calc(50vh - 250px);
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;   /* keep the eyebrow pill its natural width */
}
.why-text .lead { margin-top: 1.5rem; }

/* Pure CSS sticky stack - no JS. Each card scrolls up to centre, pins, and the
   next card rises over it. The big gap is the scroll distance between cards;
   it's what keeps only one card on screen at a time. Native scroll = effortless. */
.why-cards {
  display: flex;
  flex-direction: column;
  gap: 40vh;                 /* scroll distance between cards - keep it brisk */
  /* small tail so the finished stack settles a beat, then the whole section
     (text + stack) releases and scrolls away together */
  padding-bottom: 12vh;
}

.wcard {
  position: sticky;
  top: calc(50vh - 250px);   /* half the 500px height → vertically centred */
  height: 500px;
  border-radius: var(--r-xl);
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  /* native scroll-driven tilt: card is tilted while it's low in the viewport
     and straightens exactly as it rises to centre. No JS, GPU-driven, so it
     doesn't touch the sticky scroll smoothness. Unsupported browsers just
     snap to the straight end-state (identical to before). */
  animation: wcard-rise linear both;
  animation-timeline: view();
  /* straighten quickly in the stretch just before centre, not across the
     whole rise - keeps it snappy/effortless */
  animation-range: cover 22% cover 46%;
}
@keyframes wcard-rise {
  from { transform: rotate(-3.5deg) translateY(36px) scale(0.965); }
  to   { transform: rotate(0deg) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .wcard { animation: none; }
}

/* Later cards sit a little lower and on top, so the previous card's
   top edge peeks out above as the deck builds up. */
/* the first card is the base of the stack - no tilt, just sits straight */
.wcard:nth-child(1) { z-index: 1; animation: none; transform: none; }
.wcard:nth-child(2) { top: calc(50vh - 250px + 14px); z-index: 2; }
.wcard:nth-child(3) { top: calc(50vh - 250px + 28px); z-index: 3; }
.wcard:nth-child(4) { top: calc(50vh - 250px + 42px); z-index: 4; }

.wcard--navy  { background: var(--navy); color: #fff; }
.wcard--red   { background: var(--accent); color: #fff; }
.wcard--white { background: var(--bg); color: var(--navy); box-shadow: var(--shadow-md); }
.wcard--tint  { background: var(--bg-tint); color: var(--navy); }

/* inset rounded image panel grows to fill the space above the title */
.wcard__media {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 20px;
  overflow: hidden;
}
.wcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* number overlaid inside the image, as a frosted chip for contrast */
.wcard__num {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #fff;
  padding: 0.35rem 0.65rem;
  border-radius: var(--r-pill);
  background: rgba(11, 48, 72, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* title + description sit just below the image */
.wcard__body {
  flex: 0 0 auto;
  padding: 1.15rem 0.9rem 0.4rem;
}
.wcard__foot { }

.wcard__title {
  color: inherit;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.wcard__text {
  font-size: 0.9rem;
  line-height: 1.72;
  opacity: 0.92;
}

@media (max-width: 860px) {
  .why-split { grid-template-columns: 1fr; }
  .why-text  { max-width: none; position: static; height: auto; display: block; margin-bottom: 2.5rem; }
  .why-cards { gap: 32vh; padding-bottom: 10vh; }
  .wcard     { height: 560px; top: calc(50vh - 280px); }
  .wcard:nth-child(2) { top: calc(50vh - 280px + 12px); }
  .wcard:nth-child(3) { top: calc(50vh - 280px + 24px); }
  .wcard:nth-child(4) { top: calc(50vh - 280px + 36px); }
}

/* Numbered feature */
.card--plain { display: grid; grid-template-columns: 70px 1fr; align-items: flex-start; gap: 2.2rem; }
.feature-num-icon {
  height: 92px;
  width: auto;
  display: block;
  justify-self: start;
}

/* Split feature block (image + content) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }

/* ---- Courses tab carousel ---- */
.course-tabs {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.course-tabs__btn {
  padding: 0.75rem 1.9rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.course-tabs__btn:hover { transform: translateY(-2px); }
.course-tabs__btn.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (max-width: 480px) {
  .course-tabs { gap: 0.4rem; flex-wrap: nowrap; }
  .course-tabs__btn { padding: 0.6rem 1rem; font-size: 0.78rem; flex: 0 0 auto; white-space: nowrap; }
}

.course-carousel { position: relative; overflow: visible; }
.course-track {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.course-panel {
  flex: 0 0 76%;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: 0 18px 40px rgba(11, 48, 72, 0.05);
  padding: 0.9rem;
  opacity: 0.35;
  transform: scale(0.92);
  cursor: pointer;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.course-panel.is-active { opacity: 1; transform: scale(1); cursor: default; }
.course-panel .split {
  grid-template-columns: 380px 1fr;
  gap: 2.2rem;
  align-items: stretch;
  min-height: 480px;
}
.course-panel .split__media { width: 380px; align-self: stretch; }
.course-panel .split__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--r-lg);
  box-shadow: none;
}
.course-panel[data-course-panel="senior"] .split__media img,
.course-panel[data-course-panel="adults"] .split__media img {
  object-position: center 45%;
}
.course-panel .split > div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.4rem 2.2rem 1.4rem 0.6rem;
}
.course-panel h2.h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.course-panel h3.h3 { font-size: 1rem; }
.course-panel .lead,
.course-panel .check-list li,
.course-panel p { font-size: 16px; }
.course-panel .check-list { margin-top: 0.5rem; gap: 0.65rem; }
@media (max-width: 1024px) {
  .course-panel { flex: 0 0 84%; }
}
@media (max-width: 860px) {
  .course-panel { flex: 0 0 92%; padding: 0.6rem 0.6rem 1.4rem; }
  .course-panel .split { grid-template-columns: 1fr; min-height: 0; gap: 0.6rem; }
  /* the base rule hardcodes width: 380px (for the desktop side-by-side
     grid) and was never reset here - on phones narrower than that
     (.course-panel itself is only ~90% of .container), the media block
     blew past both edges of the panel and the viewport. */
  .course-panel .split__media { width: 100%; max-width: 100%; height: auto; }
  .course-panel .split__media img { aspect-ratio: 5/4; height: auto; }
  .course-panel .split > div:last-child { padding: 0 0.6rem; }
  .course-panel .split > div:last-child .eyebrow { margin-top: 0.9rem; }
  .course-panel h2.h2 { font-size: 1.5rem; }
}
@media (max-width: 600px) {
  .course-carousel {
    overflow: hidden;
    padding: 30px 0 60px;
    margin: -30px 0 -60px;
  }
  .course-panel { flex: 0 0 90%; }
  .course-track { touch-action: pan-y; }
}

/* decorative red card + scroll tilt */
.img-frame {
  position: relative;
}
.img-deco {
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  background: var(--accent);
  transform: rotate(-5deg) translate(-8px, 10px);
  z-index: 0;
  opacity: 0.92;
}
/* on the red section, lighten the deco card so it shows against the red bg */
.section--accent .img-deco { background: var(--accent-soft); opacity: 1; }

/* white button on the red section for contrast (fills white → red text on hover) */
.section--accent .btn-modern { color: #fff; box-shadow: 0 0 0 2px #fff; }
.section--accent .btn-modern svg { fill: #fff; }
.section--accent .btn-modern .circle { background-color: #fff; }
.section--accent .btn-modern:hover { color: var(--accent); }
.section--accent .btn-modern:hover svg { fill: var(--accent); }

/* about section: solid navy, full-height, content centred.
   padding-bottom guarantees clearance under the centred content so the
   torn-edge--bottom banner (mostly solid fill, not just decorative gaps)
   never paints over the CTA button on short/laptop viewports. */
.section--about {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: max(var(--section-y), 12.5rem);
  position: relative;
}
/* torn-paper banners — the torn edge tears into the area above/below,
   the solid body colour blends into the section's own background */
.torn-edge {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
  line-height: 0;
}
.torn-edge__shape {
  display: block;
  width: 100%;
  aspect-ratio: 1729 / 181;
  /* the shape's solid fill reaches ~80% of its own height into the section
     it borders (by design, for the torn-paper look) - on very wide viewports
     the width-driven aspect-ratio can grow that reach past the section's
     own padding, so cap it here rather than everywhere it's used */
  max-height: 160px;
  -webkit-mask: url('../Images/torn banner.svg') center / 100% 100% no-repeat;
          mask: url('../Images/torn banner.svg') center / 100% 100% no-repeat;
}
.torn-edge--top    { top: 0;    transform: translateY(-20%); }
.torn-edge--bottom { bottom: 0; transform: translateY(20%); }
.torn-edge--bottom .torn-edge__shape { transform: scaleY(-1); }
.torn-edge--navy   .torn-edge__shape { background: var(--navy); }
.torn-edge--accent .torn-edge__shape { background: var(--accent); }
.torn-edge--white  .torn-edge__shape { background: var(--bg); }

.img-frame img {
  position: relative;
  z-index: 1;
  will-change: transform;
  animation: img-tilt linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}
@keyframes img-tilt {
  from { transform: rotate(-1.2deg) scale(1.01); }
  50%  { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(1.2deg) scale(1.01); }
}
@media (prefers-reduced-motion: reduce) {
  .img-frame img { animation: none; }
}

.split__media img {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
/* Certificate logo cards (coloured cert panels) — light playful tilt,
   mirrored on reversed splits so they alternate down the page */
.section--accent .split__media img,
.section--navy .split__media img {
  transform: rotate(-2deg);
}
.section--accent .split--reverse .split__media img,
.section--navy .split--reverse .split__media img {
  transform: rotate(2deg);
}

.check-list { display: grid; gap: 0.9rem; margin-top: 1.6rem; }
.check-list li { display: flex; gap: 0.8rem; align-items: flex-start; }
.check-list .ic {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent);
  display: grid; place-items: center; margin-top: 2px;
}
.check-list strong { color: var(--ink); }

/* ---- Course Cards ---- */
.cslider {
  margin-top: 3rem;
}

.cslider__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.cslide {
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

/* top half - light, image */
.cslide__top {
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-soft);
}
.cslide__top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}
.cslide:hover .cslide__top img { transform: scale(1.05); }

/* bottom half - neutral by default, colored only on hover */
.cslide__bot {
  flex: 1;
  padding: 1.4rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  transition: background-color 0.4s ease;
}

/* per-card colors - applied on hover only */
.cslide--navy:hover .cslide__bot { background: #0B3048; }
.cslide--red:hover  .cslide__bot { background: #DA3613; }
.cslide--warm:hover .cslide__bot { background: #FACE8D; }

/* default - dark text on the neutral background */
.cslide--navy .cslide__name, .cslide--red .cslide__name { color: var(--ink); }
.cslide--navy .cslide__desc, .cslide--red .cslide__desc { color: rgba(11,48,72,0.68); }
.cslide--navy .cslide__tag,  .cslide--red .cslide__tag  { background: rgba(11,48,72,0.1); color: rgba(11,48,72,0.75); }

/* on hover - flip to light text over the colored background */
.cslide--navy:hover .cslide__name,  .cslide--red:hover .cslide__name  { color: #fff; }
.cslide--navy:hover .cslide__desc,  .cslide--red:hover .cslide__desc  { color: rgba(255,255,255,0.62); }
.cslide--navy:hover .cslide__tag,   .cslide--red:hover .cslide__tag   { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }

/* warm card - dark text, stays dark on hover too */
.cslide--warm .cslide__name  { color: #0B3048; }
.cslide--warm .cslide__desc  { color: rgba(11,48,72,0.68); }
.cslide--warm .cslide__tag   { background: rgba(11,48,72,0.1); color: rgba(11,48,72,0.75); }
.cslide__name, .cslide__desc, .cslide__tag { transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease; }

.cslide__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.cslide__tag {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.cslide__name {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 0.6rem;
}

.cslide__desc {
  font-size: 0.875rem;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.62);
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* modern arrow button - diagonal swap (exit top-right / enter bottom-left), same as .post-card__arrow-btn */
.cslide__arrow {
  position: relative;
  overflow: hidden;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: var(--r-sm);
  color: #fff;
  flex-shrink: 0;
  margin-top: 1.1rem;
  align-self: flex-end;
  text-decoration: none;
  box-shadow: 0 0 0 1.5px transparent;
  transition: box-shadow 0.3s var(--ease);
}
.cslide:hover .cslide__arrow { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.55); }
.cslide--warm:hover .cslide__arrow { box-shadow: 0 0 0 1.5px rgba(11,48,72,0.3); }
.cslide__arrow svg { width: 22px; height: 22px; }
.cslide__arrow .arrow-out,
.cslide__arrow .arrow-in {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.cslide__arrow .arrow-out { transform: translate(-50%, -50%); }
.cslide__arrow .arrow-in  { transform: translate(calc(-50% - 140%), calc(-50% + 140%)); }
.cslide:hover .cslide__arrow .arrow-out { transform: translate(calc(-50% + 140%), calc(-50% - 140%)); }
.cslide:hover .cslide__arrow .arrow-in  { transform: translate(-50%, -50%); }

.cslide--navy .cslide__arrow { background: #0B3048; }
.cslide--red  .cslide__arrow { background: #DA3613; }
.cslide--warm .cslide__arrow { background: #FACE8D; color: #0B3048; }

@media (max-width: 767px) {
  .cslider__track { grid-template-columns: 1fr; }
}

/* Certificate cards */
.cert-card {
  display: flex;
  gap: 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.9rem;
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.cert-card__badge {
  flex: none; width: 70px; height: 70px;
  border-radius: 20px; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--navy-600));
}
.cert-card__badge--accent { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); }
.cert-card__badge--warm { background: linear-gradient(135deg, #FACE8D, #E9B36B); color: var(--navy); }
.cert-card h2 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.cert-card__level { font-size: 0.82rem; font-weight: 700; color: var(--muted); font-family: var(--font-head); }

/* Express certifications — deliberately quieter/smaller than the main cert-card tier */
.express-certs .section-head { max-width: 640px; }
.express-certs .lead { font-size: 0.98rem; }
.mini-cert {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem;
}
.mini-cert__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--navy-wash);
  color: var(--navy);
  margin-bottom: 1rem;
}
.mini-cert h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.mini-cert .card__text { font-size: 0.92rem; }

.value-card {
  position: relative;
  padding: 1rem 1.6rem;
  text-align: center;
  transition: transform 0.4s var(--ease);
}
.value-card:hover { transform: translateY(-6px); }
.value-card::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line), transparent);
}
.value-card:first-child::before { display: none; }
.value-card::after {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
  display: none;
}
.value-card__icon-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 1.1rem;
  display: block;
}
.value-card__icon {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.value-card:nth-child(odd):hover  .value-card__icon { transform: scale(1.12) rotate(-6deg); }
.value-card:nth-child(even):hover .value-card__icon { transform: scale(1.12) rotate(6deg); }
.value-card__title { font-size: 1.1rem; margin-bottom: 0.4rem; }
.value-card .card__text { color: var(--muted); }

/* Decorative saita arrows around the courses section */
.courses-section { position: relative; }
.saita {
  position: absolute;
  width: clamp(130px, 13vw, 220px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  filter: grayscale(1) brightness(1.55) contrast(0.85);
}
.saita--tl { top: 17rem; left: clamp(5rem, 13vw, 13rem); transform: scale(-1, -1); }
.saita--br { bottom: 4.5rem; right: clamp(5rem, 13vw, 13rem); }
@media (max-width: 1024px) {
  .saita { display: none; }
}

/* ---------- 10. Testimonials ---------- */
.testi-section {
  background: var(--accent);
  position: relative;
  padding-top: clamp(7.5rem, 13vw, 12.5rem);
}
.testi-section .section-head { margin-bottom: 2.8rem; }
.testi-eyebrow {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

/* marquee rows */
.tmarquee__row {
  position: relative;
  display: flex;
  overflow-x: clip;
  overflow-y: visible;
  padding: 0.75rem 0;
  margin-bottom: 0.65rem;
}
.tmarquee__row:last-child { margin-bottom: 0; }
/* edge fade via overlay - doesn't clip shadows unlike mask-image */
.tmarquee__row::before,
.tmarquee__row::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 9%;
  z-index: 2;
  pointer-events: none;
}
.tmarquee__row::before {
  left: 0;
  background: linear-gradient(to right, var(--accent) 0%, transparent 100%);
}
.tmarquee__row::after {
  right: 0;
  background: linear-gradient(to left, var(--accent) 0%, transparent 100%);
}

.tmarquee__track {
  display: flex;
  width: max-content;
  padding: 0.4rem 0;
}
.tmarquee__set {
  display: flex;
  gap: 1.4rem;
  padding-right: 1.4rem; /* matches gap so -50% lands exactly on the clone seam */
}

/* row-level animation - pause on hover */
.tmarquee__row--fwd .tmarquee__track {
  animation: marquee-left 36s linear infinite;
}
.tmarquee__row--rev .tmarquee__track {
  animation: marquee-right 36s linear infinite;
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-x, -50%)); }
}
@keyframes marquee-right {
  from { transform: translateX(var(--marquee-x, -50%)); }
  to   { transform: translateX(0); }
}

/* individual cards */
.tmcard {
  flex: none;
  width: clamp(280px, 30vw, 360px);
  background: rgba(0,0,0,0.18);         /* darkens the red bg → ~#BC2F10, 6.5:1 vs white */
  border: 1.5px solid rgba(255,160,130,0.38); /* lighter warm-red stroke */
  border-radius: var(--r-lg);
  padding: 1.8rem 2rem;
  display: flex;
  flex-direction: column;
}
.tmcard__text  { color: rgba(255,255,255,0.92); font-size: 0.97rem; flex: 1; line-height: 1.65; }
.tmcard__person { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.4rem; }
.tmcard__avatar {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; flex: none;
  border: 2px solid rgba(255,200,180,0.45);
}
.tmcard__name { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 0.92rem; }
.tmcard__role { font-size: 0.78rem; color: rgba(255,255,255,0.62); margin-top: 0.1rem; }

/* ---------- 11. FAQ accordion ---------- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  grid-template-areas:
    "eyebrow eyebrow"
    "title   faq";
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: 1rem;
  align-items: start;
}
.faq-eyebrow { grid-area: eyebrow; }
.section-head--left { grid-area: title; }
.faq-layout > .faq { grid-area: faq; }
.section-head--left {
  text-align: left;
  margin-inline: 0;
  margin-bottom: 0;
  max-width: none;
}
.faq-flags {
  display: flex;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
.faq-flags img {
  width: clamp(220px, 28vw, 340px);
  height: auto;
  object-fit: contain;
  animation: faq-flags-float 3.2s ease-in-out infinite;
}
@keyframes faq-flags-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-1.5deg); }
}
.section-head--left .lead { margin-inline: 0; }
.faq { display: grid; gap: 1rem; max-width: none; margin-inline: 0; }
.faq__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.faq__item.is-open { box-shadow: var(--shadow-md); border-color: transparent; }
.faq__q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1.4rem 1.6rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq__icon {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy-wash); color: var(--navy);
  display: grid; place-items: center;
  transition: transform 0.35s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); background: var(--accent); color: #fff; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq__a-inner { padding: 0 1.6rem 1.5rem; color: var(--body); }

/* ---------- 12. CTA band ---------- */
.cta-band {
  position: relative;
  background-color: var(--navy);
  background-image: linear-gradient(135deg, rgba(11,48,72,0.55), rgba(13,61,92,0.55)), url('../Images/light background.svg');
  background-size: cover, 160%;
  background-position: center, center;
  background-blend-mode: normal, screen;
  border-radius: var(--r-xl);
  padding: clamp(2.8rem, 6vw, 5rem);
  overflow: hidden;
  text-align: center;
  color: #cfe0ec;
}
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(40px);
}
.cta-band::before { display: none; }
.cta-band::after { width: 240px; height: 240px; background: rgba(255,255,255,0.08); bottom: -120px; left: -40px; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: 1rem; }
.cta-band .lead { color: #b8d0e2; margin-inline: auto; }
.cta-band__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

/* ---------- 13b. Teacher Profile ---------- */
.teacher-section { background: rgba(218, 54, 19, 0.03); }

.teacher-wrap {
  display: grid;
  grid-template-columns: 440px 1fr;
  column-gap: clamp(3rem, 6vw, 6rem);
  row-gap: 1.5rem;
  align-items: start;
}

.teacher__aside  { grid-column: 1; grid-row: 1 / span 2; }
.teacher__body   { grid-column: 2; grid-row: 1; }
.teacher__text   { grid-column: 2; grid-row: 2; margin-top: -1.5rem; }

.teacher__aside {
  position: sticky;
  top: 7rem;
}

.teacher__img-deco {
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  background: var(--accent);
  transform: rotate(-5deg) translate(-8px, 10px);
  z-index: 0;
  opacity: 0.92;
}

.teacher__img-frame {
  position: relative;
  z-index: 1;
  border-radius: var(--r-xl);
  overflow: hidden;
}

.teacher__img-frame img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}


.teacher__socials {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.teacher__social {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(11, 48, 72, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.teacher__social--fb {
  color: #1877F2;
  border-color: rgba(24, 119, 242, 0.3);
}
.teacher__social--fb:hover {
  background: #1877F2;
  border-color: #1877F2;
  color: #fff;
}
.teacher__social--ig {
  color: #E1306C;
  border-color: rgba(225, 48, 108, 0.3);
}
.teacher__social--ig:hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  border-color: transparent;
  color: #fff;
}

/* Content column */
.teacher__body { padding-top: 0.25rem; }

.teacher__name {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.08;
  margin: 0.9rem 0 1.6rem;
  letter-spacing: -0.025em;
}

.teacher__creds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 2.25rem;
}

.teacher__cred {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 1rem;
  border: 1.5px solid rgba(11, 48, 72, 0.14);
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  font-family: var(--font-head);
  letter-spacing: 0.01em;
}

.teacher__text p {
  font-size: 1.02rem;
  line-height: 1.8;
  color: #3a4e5c;
  margin-bottom: 1.2rem;
}

.teacher__text p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .teacher-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .teacher__aside {
    position: relative;
    max-width: 100%;
    order: 2;
    padding-bottom: 44px;
    margin-top: -5.75rem;
  }
  .teacher__img-deco {
    inset: 0 0 30px 0;
    transform: rotate(-3deg) translate(-5px, 0);
  }
  .teacher__body { order: 1; }
  .teacher__text { order: 3; margin-top: 6rem; position: relative; z-index: 2; }
  .teacher__name { font-size: clamp(1.8rem, 7vw, 2.4rem); }
}

/* ---------- 13c. Instagram Gallery ---------- */
.gallery-scene {
  position: relative;
  height: clamp(440px, 68vh, 580px);
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* clips side images at section edges */
}

/* Carousel: absolute behind the card, same centering as card */
.gallery-carousel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  perspective: 100px;
}

.gallery-track {
  position: relative;
  width: min(380px, 90%); /* matches card width */
  height: 100%;
  display: flex;
  justify-content: center;
}

.gallery-item {
  position: absolute;
  left: 0.6%;
  right: 0.6%;
  top: 8%;
  bottom: 8%;
  opacity: 0;
  will-change: transform, opacity;
  animation: gallery-slide 27s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes gallery-slide {
  0%               { visibility: hidden;  opacity: 0;   transform: translateX(200%) scale(0.7); }
  3%, 14.286%      { visibility: visible; opacity: 0.8; transform: translateX(100%) scale(0.9); }
  17.286%, 28.571% { visibility: visible; opacity: 1;   transform: translateX(0) scale(1); }
  31.571%, 42.857% { visibility: visible; opacity: 0.8; transform: translateX(-100%) scale(0.9); }
  45.857%          { visibility: visible; opacity: 0;   transform: translateX(-200%) scale(0.9); }
  100%             { visibility: hidden;  opacity: 0;   transform: translateX(-200%) scale(0.7); }
}

.gallery-item:nth-child(1) { animation-delay: -3.857s; }
.gallery-item:nth-child(2) { animation-delay: 0s; }
.gallery-item:nth-child(3) { animation-delay: 3.857s; }
.gallery-item:nth-child(4) { animation-delay: 7.714s; }
.gallery-item:nth-child(5) { animation-delay: 11.571s; }
.gallery-item:nth-child(6) { animation-delay: 15.428s; }
.gallery-item:last-child   { animation-delay: -7.714s; }

/* Card: transparent frame sitting on top of carousel */
.insta-card {
  position: relative;
  z-index: 2;
  width: min(380px, 90%);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  overflow: hidden; /* rounds card corners only — carousel is outside, not clipped */
}

.insta-card__header {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 10px 14px;
  background: var(--navy);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.1);
}

.insta-card__fig {
  margin: 0;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.insta-card__fig img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.insta-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.insta-card__info strong {
  display: block;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-head);
  letter-spacing: 0.01em;
}

.insta-card__info span {
  display: block;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.68rem;
}

.insta-card__media {
  position: relative;
  z-index: 1;
  flex: 1;
  /* transparent — shows the carousel behind */
}

.insta-card__footer {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--navy);
  border-top: 1.5px solid rgba(255, 255, 255, 0.1);
}

.insta-footer__left,
.insta-footer__right { display: flex; align-items: center; gap: 14px; }

.insta-icon {
  width: 22px;
  height: 22px;
  display: block;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.insta-icon:hover { opacity: 0.55; }

@media (max-width: 600px) {
  .gallery-scene { height: 400px; }
  /* .gallery-track still had its desktop width (min(380px, 90%)) here,
     while .insta-card below was already overridden to min(300px, 92%) -
     two different caps that diverge at most mobile widths, so the image
     track (and everything inside it) was rendering wider than the card
     frame no matter what .gallery-item's own insets were. Sync them. */
  .gallery-track { width: min(300px, 92%); }
  /* Insets match .insta-card's real chrome, not a guessed percentage:
     header = 10px padding + 36px avatar + 1.5px border = 57.5px,
     footer = 10px padding + 22px icons + 1.5px border = 43.5px,
     sides = card's own 1.5px border. Keeps the image track locked to
     .insta-card__media's transparent window at any mobile width. */
  .gallery-item  { left: 1.5px; right: 1.5px; top: 57.5px; bottom: 43.5px; }
  .insta-card    { width: min(300px, 92%); }
}

/* ---------- 14. Forms ---------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: var(--shadow-md);
}
.field { margin-bottom: 1.3rem; }
.field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B3048' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.3rem center;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; }
.form-status {
  display: none;
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--r-sm);
  background: #e8f6ee;
  color: #1c7a45;
  font-weight: 600;
}
.form-status.is-shown { display: block; }
.form-status__error { display: none; }
.form-status.is-error { background: #fdecea; color: #b3261e; }
.form-status.is-error .form-status__success { display: none; }
.form-status.is-error .form-status__error { display: inline; }

/* Contact info list */
.contact-info { display: grid; gap: 1.2rem; }
.contact-row {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.contact-row__ic {
  flex: none; width: 50px; height: 50px; border-radius: 14px;
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
}
/* cycle the same 3 brand colors used on the course-card arrows */
.contact-row:nth-child(3n+1) .contact-row__ic { background: var(--navy); color: #fff; }
.contact-row:nth-child(3n+2) .contact-row__ic { background: var(--accent); color: #fff; }
.contact-row:nth-child(3n+3) .contact-row__ic { background: #FACE8D; color: var(--navy); }
.contact-row h3 { font-size: 1rem; margin-bottom: 0.2rem; }
.contact-row a, .contact-row p { color: var(--body); font-size: 0.98rem; }
.contact-row a:hover { color: var(--accent); }

/* Map */
.map-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  min-height: 360px;
}
.map-wrap iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }

/* ---------- 15. Page hero (inner pages) ---------- */
.page-hero {
  /* extra breathing room below the torn header edge, on top of the
     existing responsive clamp - same fixed amount at every breakpoint */
  padding-top: calc(clamp(8rem, 13vw, 11rem) + 1.75rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: radial-gradient(120% 130% at 80% -10%, var(--bg-tint) 0%, var(--bg) 60%);
  text-align: center;
}
.blog-hero__title { line-height: 1.15; }
.blog-hero__accent {
  color: var(--accent);
  font-style: normal;
  position: relative;
  white-space: nowrap;
}
.blog-squiggle {
  display: inline-block;
  vertical-align: top;
  margin-left: 4px;
  margin-top: -4px;
}
.blog-squiggle path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.blog-squiggle path:nth-child(1) { animation: squiggle-draw 0.28s ease forwards 0.2s; }
.blog-squiggle path:nth-child(2) { animation: squiggle-draw 0.32s ease forwards 0.48s; }
.blog-squiggle path:nth-child(3) { animation: squiggle-draw 0.22s ease forwards 0.8s; }
@keyframes squiggle-draw { to { stroke-dashoffset: 0; } }

.page-hero--blog {
  /* no padding-top override here - inherit .page-hero's so the blog
     listing gets the same header clearance as every other page-hero page */
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  position: relative;
  background: none;
}
.page-hero--blog::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--bg) 100%),
    url('../Images/background.webp');
  background-size: auto, cover;
  background-position: center, center top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
}
.page-hero--blog .container {
  position: relative;
}
.page-hero--certs,
.page-hero--about,
.page-hero--courses {
  position: relative;
  overflow: hidden;
  background: none;
}
.page-hero--certs::before,
.page-hero--about::before,
.page-hero--courses::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--bg) 100%),
    url('../Images/background.webp');
  background-size: auto, cover;
  background-position: center, center top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
}
.page-hero--certs .container,
.page-hero--about .container,
.page-hero--courses .container {
  position: relative;
}

/* Soft hand-off: the pencil pattern starts fading around the title and is
   fully gone before the hero ends — nothing continues below it. */
.page-hero--blog::before,
.page-hero--certs::before,
.page-hero--about::before,
.page-hero--courses::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 80%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 80%);
}

/* Mobile: fixed background attachment is janky / zooms on iOS — use scroll */
@media (max-width: 768px) {
  .page-hero--blog::before,
  .page-hero--certs::before,
  .page-hero--about::before,
  .page-hero--courses::before {
    background-attachment: scroll, scroll;
  }
}
.page-hero .lead { margin-inline: auto; margin-top: 1.1rem; }
.breadcrumb {
  display: flex; justify-content: center; gap: 0.5rem;
  font-size: 0.85rem; color: var(--muted); margin-top: 1.4rem;
  font-family: var(--font-head); font-weight: 600;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { color: var(--accent); }

/* Article breadcrumb ends in the full post title (dynamic, often long),
   which wraps into a cramped multi-line mess on narrow screens - and it's
   redundant there anyway since the same title is the big H1 right below.
   Drop the trailing "› title" on mobile and keep just Home › News. */
@media (max-width: 600px) {
  .breadcrumb--article > *:nth-last-child(-n+3) { display: none; }
}

/* ---------- 16. Blog ---------- */
.post-card {
  display: flex; flex-direction: column; height: 100%;
  position: relative;
  border-radius: var(--r-lg); overflow: hidden;
  min-height: 480px;
  transition: transform 0.4s var(--ease);
}
.post-card::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  z-index: -1;
  transform: scale(1);
  transition: transform 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.post-card:hover::after { transform: scale(1.05); }
.post-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,28,45,0.95) 0%, rgba(11,48,72,0.6) 55%, rgba(11,48,72,0.28) 100%);
  z-index: 0;
}
.post-card:hover { transform: translateY(-6px); }
/* ---- Blog filters ---- */
.blog-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.blog-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.blog-tag {
  padding: 0.45rem 1.15rem;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-head);
  border: none;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
  letter-spacing: 0;
}
.blog-tag:hover { transform: translateY(-2px); opacity: 0.88; }
.blog-tag           { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.blog-tag--active   { background: var(--accent);  color: #fff; border-color: var(--accent); }
.blog-search {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.55rem 1.3rem;
  transition: border-color 0.2s;
  cursor: text;
}
.blog-search:focus-within { border-color: var(--navy); }
.blog-search svg { color: var(--muted); flex-shrink: 0; }
.blog-search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.9rem;
  color: var(--text);
  width: 200px;
  font-family: var(--font-body);
}
.blog-search input::placeholder { color: var(--muted); }
@media (max-width: 600px) {
  .blog-search { width: 100%; }
  .blog-search input { width: 100%; }
}

.post-card__body { padding: 2rem; display: flex; flex-direction: column; flex: 1; position: relative; z-index: 1; }
.post-card__tag {
  align-self: flex-start;
  padding: 0.35rem 1rem;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: var(--r-pill);
  color: rgba(255,255,255,0.8);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-head);
  letter-spacing: 0.03em;
  margin-bottom: auto;
}
.post-card__content { padding-top: 2.5rem; }
.post-card__body h3 { font-size: 1.35rem; line-height: 1.25; margin-bottom: 0.65rem; }
.post-card__body h3 a { color: #fff; text-decoration: none; }
.post-card__body h3 a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.post-card__arrow-btn { position: relative; z-index: 3; }
.post-card .card__text { color: rgba(255,255,255,0.62); line-height: 1.6; font-size: 0.95rem; margin: 0; }
.post-card__foot { position: absolute; top: 2rem; right: 2rem; z-index: 3; display: flex; }
.post-card__arrow-btn {
  position: relative;
  overflow: hidden;
  width: 54px; height: 54px;
  border: 2px solid rgba(255,255,255,0.75);
  border-radius: var(--r-sm);
  color: #fff;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
}
.post-card__arrow-btn .arrow-out,
.post-card__arrow-btn .arrow-in {
  position: absolute;
  top: 50%; left: 50%;
  display: flex;
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.post-card__arrow-btn .arrow-out { transform: translate(-50%, -50%); }
.post-card__arrow-btn .arrow-in  { transform: translate(calc(-50% - 140%), calc(-50% + 140%)); color: var(--navy); }
.post-card:hover .post-card__arrow-btn { background: #fff; border-color: #fff; }
.post-card:hover .post-card__arrow-btn .arrow-out { transform: translate(calc(-50% + 140%), calc(-50% - 140%)); }
.post-card:hover .post-card__arrow-btn .arrow-in  { transform: translate(-50%, -50%); }

/* ---- Featured blog post ---- */
.feat-post {
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  height: clamp(380px, 50vw, 560px);
}
.feat-post__link {
  display: block;
  height: 100%;
  position: relative;
  text-decoration: none;
}
.feat-post__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.feat-post:hover .feat-post__link img { transform: scale(1.04); }
.feat-post__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.15) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.feat-post__top {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.feat-post__time {
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
}
.feat-post__title {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 0.8rem;
  max-width: 700px;
}
.feat-post__desc {
  color: rgba(255,255,255,0.8);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.55;
  margin: 0;
  max-width: 580px;
}

/* ---- Blog empty state ---- */
.blog-empty {
  display: flex;
  justify-content: center;
  padding: clamp(3rem, 6vw, 5rem) 1rem;
}
.blog-empty__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  max-width: 380px;
}
.blog-empty__title {
  font-size: 1.35rem;
  color: var(--navy);
  margin: 0;
}
.blog-empty__text {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* ---- Blog card filter animation ---- */
@keyframes card-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.post-card.card-in {
  animation: card-fade-up 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---- Blog bento grid ---- */
.blog-bento {
  display: grid;
  grid-template-columns: 1.75fr 1fr;
  gap: 1rem;
  height: 560px;
}
.bento-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}
.bento-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.bento-card--featured {
  height: 100%;
}
.bento-card--featured > a,
.bento-card--img > a {
  display: block;
  height: 100%;
  position: relative;
  text-decoration: none;
}
.bento-card--featured img,
.bento-card--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.bento-card--featured:hover img,
.bento-card--img:hover img { transform: scale(1.04); }
.bento-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.08) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
}
.bento-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: var(--navy);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.85rem;
  width: fit-content;
}
.bento-cat::before {
  content: '';
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.bento-card__title {
  color: #fff;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.3;
  margin: 0;
}
.bento-card--promo {
  background: var(--accent);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: 0;
  text-decoration: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.25s;
}
.bento-card--promo:hover {
  transform: translateY(-4px);
  background: #c8310f;
}
.bento-card--promo:hover .bento-promo__arrow {
  background: #fff;
  border-color: #fff;
}
.bento-card--promo:hover .bento-promo__arrow .arrow-out {
  transform: translate(calc(-50% + 140%), calc(-50% - 140%));
}
.bento-card--promo:hover .bento-promo__arrow .arrow-in {
  transform: translate(-50%, -50%);
  color: var(--accent);
}
.bento-promo__arrow {
  position: relative;
  overflow: hidden;
  width: 52px; height: 52px;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: var(--r-sm);
  color: #fff;
  align-self: flex-end;
  transition: background 0.3s, border-color 0.3s;
  flex-shrink: 0;
}
.bento-promo__arrow .arrow-out,
.bento-promo__arrow .arrow-in {
  position: absolute;
  top: 50%; left: 50%;
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1), color 0.3s;
}
.bento-promo__arrow .arrow-out {
  transform: translate(-50%, -50%);
}
.bento-promo__arrow .arrow-in {
  transform: translate(calc(-50% - 140%), calc(-50% + 140%));
  color: var(--accent);
}
.bento-promo__text {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}
.bento-card--img {
  flex: 1;
  min-height: 0;
}
@media (max-width: 700px) {
  .blog-bento { grid-template-columns: 1fr; height: auto; }
  .bento-card--featured { height: 320px; }
  .bento-side { height: auto; }
  .bento-card--promo { min-height: 180px; }
  .bento-card--img { height: 240px; }
}

/* Legal pages (privacy policy, etc.) */
.legal-updated { color: var(--muted); font-size: 0.88rem; margin-bottom: 2rem; }
.legal-body h2 { margin-top: 2.4rem; margin-bottom: 0.8rem; }
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body p { margin-bottom: 1.1rem; }
.legal-body ul { display: grid; gap: 0.5rem; margin-bottom: 1.1rem; }
.legal-body ul li { position: relative; padding-left: 1.3rem; }
.legal-body ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.legal-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* 404 page */
.error-page {
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding-block: clamp(6rem, 12vw, 10rem);
  position: relative;
  overflow: hidden;
}
.error-page .container { position: relative; max-width: 680px; margin-inline: auto; text-align: center; }
.error-page__content { position: relative; z-index: 1; }
.error-page__code {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(5rem, 16vw, 9rem);
  line-height: 1;
  color: var(--accent);
  margin: 0.6rem 0 0.2rem;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(18px);
  animation: error-code-reveal 0.9s var(--ease) 0.15s forwards;
}
@keyframes error-code-reveal {
  to { opacity: 1; transform: translateY(0); }
}
.error-page h2 { margin-bottom: 1rem; }
.error-page .lead { max-width: 460px; margin-inline: auto; margin-bottom: 2.2rem; }
.error-page__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Article */
.article { max-width: 760px; margin-inline: auto; }
.article__body > * { margin-bottom: 1.3rem; }
.article__body > [data-lang-el] > *, .article__body > [data-lang-en] > * { margin-bottom: 1.3rem; }
.article__body h2 { font-size: 1.7rem; margin-top: 2.2rem; }
.article__body h3 { font-size: 1.3rem; margin-top: 1.6rem; }
.article__body p { color: var(--body); }
.article__body ul { display: grid; gap: 0.6rem; padding-left: 0; }
.article__body ul li { display: flex; gap: 0.7rem; align-items: flex-start; }
.article__body ul li::before { content: "✓"; color: var(--accent); font-weight: 700; flex-shrink: 0; }
/* headings keep their margin-top when they follow body text, but not when
   they're the bullet's own content - inside the flex row that margin just
   pushes the heading down and away from the checkmark next to it */
.article__body ul li > h2,
.article__body ul li > h3 { margin-top: 0; }
.article__body blockquote {
  position: relative;
  padding: 0.2rem 1.6rem;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--ink);
  font-style: italic;
}
/* CMS authors sometimes wrap the quote in a heading (##/###) for emphasis -
   headings set their own line-height/margin/font-size directly (not
   inherited), so the blockquote's own values above don't reach them -
   override explicitly rather than relying on inheritance. */
.article__body blockquote h2,
.article__body blockquote h3,
.article__body blockquote h4 {
  font-size: inherit;
  font-style: inherit;
  font-weight: 700;
  line-height: 1.5;
  color: inherit;
  margin-top: 0;
}
/* hand-drawn side line - a gently wavy pencil stroke instead of a ruler-straight border */
.article__body blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 40'%3E%3Cpath d='M4 1 C6 6 2 11 4 16 S6 26 4 31 S2 38 4 39' stroke='%23DA3613' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 8px 40px;
}
/* Article hero — full-bleed image w/ overlaid title, author & share.
   Runs edge-to-edge from the very top of the page (behind the floating nav).
   Pinned via position:sticky so it stays put while .article-cover (the rest
   of the article, in a torn white "page") scrolls up and covers it. */
.article-hero {
  margin-top: 0;
  position: sticky;
  top: 0;
  /* negative (not 0/auto): keeps .article-cover painting above it via the
     normal stacking-order rules, WITHOUT .article-cover needing its own
     numbered z-index — giving .article-cover an explicit stacking context
     (e.g. z-index:1) was found to break mask-image rendering on the page
     footer's torn-edge banner elsewhere on this same page (a Chromium
     compositing quirk) even though the two elements never visually overlap */
  z-index: -1;
}
.article-hero .container { width: 100%; }
.article-hero__media {
  position: relative;
  /* no overflow:hidden — clipping the box at a fractional height (e.g. at
     90% browser zoom) leaves a hairline of the photo at the bottom edge */
  width: 100%;
  /* explicit height (≈16:8.5 of the viewport, capped) — do NOT use
     aspect-ratio + max-height here: the max transfers through the ratio
     and shrinks the width, breaking the full-bleed */
  height: clamp(460px, 66vw, 92vh);
}
.article-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The rest of the article — an opaque "page" that scrolls up and over the
   pinned hero. Its torn top edge rips into the sticky photo as it covers it. */
.article-cover {
  position: relative;
  /* deliberately no explicit z-index (stays auto) — position:relative alone
     is enough to paint above the hero's negative z-index without creating
     a new stacking context, see note on .article-hero above */
  background: var(--bg);
  /* the torn-edge--top shape (z-index 2, absolutely positioned) spills
     ~80% of its own height below this box's top edge — push real content
     down clear of it so nothing peeks through the tear's transparent gaps */
  padding-top: clamp(3rem, 9vw, 7rem);
}
.article-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.6rem, 4vw, 3rem);
  /* full-bleed hero: keep the text aligned with the page container, and
     leave room at the bottom so the torn edge never touches the meta row */
  padding-inline: max(clamp(1.6rem, 4vw, 3rem), (100% - var(--container)) / 2);
  /* reserve room for the torn edge: only its top ~20% overshoot (translateY(-20%)
     on a ~10.5vw-tall shape) actually pokes up into the photo — the rest of
     the shape lives inside the white content below */
  padding-bottom: calc(clamp(1.6rem, 4vw, 3rem) + 2.6vw);
  background: linear-gradient(to top, rgba(8,28,45,0.85) 0%, rgba(8,28,45,0.6) 45%, rgba(8,28,45,0.15) 80%, rgba(8,28,45,0) 100%);
  color: #fff;
}
.article-hero__tag {
  align-self: flex-start;
  background: none; padding: 0; gap: 0.1rem;
  margin-bottom: 0.8rem;
}
.article-hero__tag,
.article-hero__tag span { color: #fff; }
.article-hero__tag .eyebrow__mark { background: #fff; }
.article-hero__title { color: #fff; font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 1.2; margin: 0 0 1.6rem; max-width: 820px; }
.article-hero__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,0.25);
}
.article-hero__meta { font-size: 0.85rem; color: rgba(255,255,255,0.78); }
.article-hero__share { display: flex; gap: 0.6rem; }
.article-hero__share a {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.14); color: #fff;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.article-hero__share a:hover { background: var(--accent); transform: translateY(-2px); }
.article-hero__share a.is-copied { background: #1a9b5c; }
@media (max-width: 600px) {
  .article-hero__media { aspect-ratio: 4/5; min-height: 0; }
  .article-hero__row { flex-direction: column; align-items: flex-start; }
}

/* Article layout — content + sidebar */
.article-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.article-layout .article__body { max-width: 760px; }
@media (max-width: 940px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-layout .article__body { max-width: none; }
}

.article-sidebar { position: sticky; top: 110px; align-self: start; }
.sidebar-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  margin-bottom: 1.6rem;
}
@media (max-width: 940px) {
  .article-sidebar { position: static; top: auto; }
}
.sidebar-card h3 {
  font-family: var(--font-head); font-size: 1.02rem; margin-bottom: 1.1rem;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--line);
}
.sidebar-search { display: flex; }
.sidebar-search input {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  padding: 0.7rem 1.1rem;
  font-size: 0.92rem;
}
.sidebar-search button {
  border: none; cursor: pointer;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--accent); color: #fff;
  padding: 0 1.1rem;
  display: grid; place-items: center;
}
.sidebar-recent { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0; }
.sidebar-recent a { display: flex; gap: 0.8rem; align-items: center; text-decoration: none; }
.sidebar-recent img { width: 60px; height: 60px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.sidebar-recent h4 { font-size: 0.88rem; color: var(--ink); margin: 0 0 0.25rem; line-height: 1.35; }
.sidebar-recent span { font-size: 0.76rem; color: var(--muted); }

/* ---------- 18. Footer ---------- */
/* floating rounded footer card, inset from the edges */
#site-footer { background: var(--bg-soft); }
.footer {
  background: var(--navy);
  color: #9fbcd0;
  /* extra top padding so the torn banner has room and never sits over content */
  padding-top: clamp(5rem, 8vw, 7rem);
  padding-bottom: 1.75rem;
  position: relative;
  /* edge-to-edge, no rounded corners; overflow visible so the torn banner
     can rise above the top edge (the pencil is clipped by .footer__clip) */
  margin: 0;
  border-radius: 0;
  overflow: visible;
}
/* torn-paper banner across the very top of the footer, behind the content */
.footer__torn { z-index: 0; }
/* clip box for the decorative pencil (kept, since .footer no longer clips) */
.footer__clip {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: 0;
}
/* bold decorative art - anchored to the footer bottom; the top is clipped so
   only its lower portion shows inside the footer */
.footer__art {
  position: absolute;
  top: 9%;
  right: 13%;
  height: 36rem;
  width: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1.4s cubic-bezier(0.23, 1, 0.32, 1),
              transform 1.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.footer__art.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .footer__art { opacity: 1; transform: none; transition: none; }
}
.footer > .container { position: relative; z-index: 1; }
@media (max-width: 1852px) {
  .footer__art { top: auto; bottom: 0; right: 8%; height: 32rem; }
}
@media (max-width: 1440px) {
  .footer__art { right: 5%; height: 28rem; }
}
@media (max-width: 1280px) {
  .footer__art { right: 2%; height: 22rem; }
}
@media (max-width: 1024px) { .footer__art { display: none; } }
.footer__grid {
  display: grid;
  /* 4 content columns packed left + an empty trailing track that frees space
     on the right for the illustration */
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr 1.5fr;
  gap: 1.75rem;
  /* large gap before the copyright row - this is the space the illustration
     base shows through, while the copyright sits at the bottom */
  padding-bottom: clamp(4.5rem, 9vw, 8.5rem);
}
.footer__logo {
  display: inline-block; margin-bottom: 1.5rem;
}
.footer__logo img { height: 74px; }
.footer__about p { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; max-width: 32ch; margin-top: -0.9rem; }

/* This paragraph itself doesn't fade as a block - only its words do (below) */
.footer__tagline.reveal { opacity: 1; transform: none; transition: none; }
.footer__tagline .word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.footer__tagline.is-visible .word-reveal { opacity: 1; transform: none; }
.footer__social { display: flex; gap: 0.7rem; margin-top: 1.4rem; }
.footer__social a {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,0.08); color: #fff;
  display: grid; place-items: center;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.footer__social a:hover { background: var(--accent); transform: translateY(-3px); }
.footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: 1.2rem; }
.footer__links { display: grid; gap: 0.7rem; }
.footer__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  font-size: 0.95rem;
  transition: color 0.2s var(--ease);
}
.footer__links a:hover { color: #fff; }

/* Pencil-drawn underline - same draw-on animation as the header nav links */
.footer__underline {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 8px;
  overflow: visible;
  pointer-events: none;
}
.footer__underline path {
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer__links a:hover .footer__underline path { stroke-dashoffset: 0; }
.footer__contact li { display: flex; gap: 0.7rem; margin-bottom: 0.9rem; font-size: 0.95rem; }
.footer__contact .ic { color: var(--accent-soft); flex: none; margin-top: 2px; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-block: 1.6rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.85rem;
}
.footer__credit { display: flex; align-items: center; gap: 0.5rem; }
.footer__credit-sep { color: rgba(255,255,255,0.3); }
.footer__credit a { color: #9fbcd0; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s var(--ease); }
.footer__credit a:hover { color: #fff; }
.footer__heart { color: var(--accent); flex-shrink: 0; position: relative; top: 1px; }

/* ---------- 19. Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 20. Language visibility ---------- */
[data-lang-el], [data-lang-en] { display: none; }
html[lang="el"] [data-lang-el] { display: revert; }
html[lang="en"] [data-lang-en] { display: revert; }

/* ---------- 21. Responsive ---------- */
@media (max-width: 1024px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .value-card::before { display: none; }
  .value-card:nth-child(even)::before { display: block; }
  .value-card:nth-child(n+3)::after { display: block; }
  .value-card:nth-child(n+3) { padding-top: 1.8rem; }
}
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { width: 95vw; max-width: 460px; margin-inline: auto; order: -1; margin-top: 3rem; }
  .hero__illustration { width: 100%; max-width: none; }
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: -1; }
  .split__media { width: 100%; margin-inline: 0; }
  .section--about { padding-block: 6rem 5rem; }
  .section--about .split { gap: 3rem; }
  .section--about .split > div:last-child { text-align: center; }
  .section--about .split > div:last-child .btn-modern { margin-inline: auto; }
  .cols-3 { grid-template-columns: 1fr; }
  .cols-2 { grid-template-columns: 1fr; }
  /* FAQ: extra lateral padding so items sit centred on narrow screens */
  .faq { padding-inline: 1rem; }
  .faq-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "faq";
  }
  .section-head--left { text-align: center; }
  .section-head--left .lead { margin-inline: auto; }
  .faq-eyebrow { justify-content: center; }
  .faq-flags { justify-content: center; }
  /* contact section: break long email/address, constrain map */
  .contact-row a, .contact-row p { overflow-wrap: break-word; word-break: break-word; }
  .map-wrap { min-height: 280px; max-width: 100%; }
  .map-wrap iframe { min-height: 280px; }
}
@media (max-width: 600px) {
  .cols-4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; }
  .value-card:nth-child(even)::before { display: none; }
  .value-card:not(:first-child)::after { display: block; }
  .value-card:not(:first-child) { padding-top: 1.8rem; }
  .card { padding: 1.7rem; }
  .cta-band__actions .btn { width: 100%; }
  /* btn-modern: don't let it overflow narrow screens */
  .btn-modern { padding: 14px 36px; font-size: 15px; }
  /* testimonial cards narrower on small phones */
  .tmcard { width: clamp(240px, 80vw, 300px); }
}