/* Greek Lessons Online — design system.
 *
 * Palette follows the client's brief: magenta emphasis plus the azure blue
 * carried over from the logo.
 *
 * Structure borrows from the kidnest.gr reference: a floating pill header,
 * full-bleed colour blocks separated by organic curves, generous card radii and
 * circular photo frames. What is deliberately NOT borrowed is the cartoon
 * mascot and the all-over candy palette — half this audience is parents of
 * teenagers preparing for Πανελλαδικές, and they need to read the site as
 * serious before they read it as warm.
 *
 * Type: Comfortaa for headings (rounded, brand character), Manrope for body
 * (holds up across the long Greek passages on the lesson pages).
 */

:root {
  /* Brand */
  --magenta:      #a2308f;
  --magenta-deep: #7a2170;
  --magenta-mid:  #c14aa8;
  --magenta-soft: #f9ecf6;
  --blue:         #1f8cc9;
  --blue-deep:    #16688f;
  --blue-mid:     #4aa8dd;
  --blue-soft:    #e8f4fb;
  --sand:         #f6d99a;

  /* Violet — the primary, taken from bodyarchitecture.gr which the client
     named as her reference. It sits at hue 259°, almost exactly between her
     logo's blue (202°) and her magenta accent (310°), so it finally ties the
     two ends of the brand together instead of leaving them unrelated. */
  --violet:       #5f4b8b;
  --violet-deep:  #362048;
  --violet-lt:    #665cac;
  /* Pale lavender is background-only: white text on it measures 2.6:1. */
  --violet-pale:  #a886cd;
  --violet-soft:  #f0ecf7;

  /* Neutrals */
  --ink:       #1c2430;
  --ink-soft:  #4d5a6b;
  /* Was #7c8899, which measured 3.6:1 on white — under AA for the 0.76-0.85rem
     labels it carries (price units, level intros, contact labels, the header
     tagline). Darkened until it clears 4.5:1 on every background it lands on,
     while staying visibly lighter than --ink-soft so the hierarchy survives. */
  --ink-faint: #5f6a7a;
  --paper:     #fdfbf7;
  --paper-alt: #f5f0e8;
  --line:      #e7e0d4;
  --white:     #ffffff;

  /* Night tones for the footer: the CTA gradient's own hues taken almost to
     black. Same family, so the two blocks rhyme instead of competing. */
  /* Final stop of the brand gradient. Deliberately deeper than --blue: white
     text over #1f8cc9 measures 2.7-3.3:1, well under AA. This holds 5.0:1 even
     for the faintest eyebrow text. */
  --grad-blue-end: #125777;

  --night-plum: #2a1030;
  --night-mid:  #35163c;
  --night-blue: #12324a;

  /* Type */
  --font-head: 'Comfortaa', ui-rounded, system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;

  /* Rhythm */
  --maxw:        1180px;
  /* The header pill gets its own, wider track. Content still reads at 1180px —
     that is a comfortable measure for prose — but the bar has logo, five items
     and a CTA to fit, and it was tight while the page around it had room. */
  --maxw-header: 1360px;
  --maxw-narrow: 740px;
  --radius:      16px;
  --radius-lg:   28px;
  --radius-xl:   40px;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --section-y:   clamp(3.5rem, 8vw, 6.5rem);

  /* Total header height: its top padding + the pill + its bottom padding.
     Coloured hero sections pull themselves up by exactly this, so the colour
     starts at the top of the page and the pill floats on top of it. */
  --header-pad-t: clamp(0.75rem, 2vw, 1.25rem);
  --header-h:     calc(76px + var(--header-pad-t) + 0.5rem);

  --shadow-sm: 0 1px 3px rgba(28, 36, 48, 0.06), 0 4px 12px rgba(28, 36, 48, 0.04);
  --shadow:    0 2px 6px rgba(28, 36, 48, 0.05), 0 14px 40px rgba(28, 36, 48, 0.08);
  --shadow-lg: 0 4px 12px rgba(28, 36, 48, 0.07), 0 24px 60px rgba(28, 36, 48, 0.12);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--blue-deep); text-underline-offset: 0.2em; }
a:hover { color: var(--magenta); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 1.4rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }

p { margin: 0 0 1.15em; text-wrap: pretty; }

strong { font-weight: 700; }

/* The magenta emphasis the client asked for. */
.hl { color: var(--magenta); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

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

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container.narrow, .narrow { max-width: var(--maxw-narrow); margin-inline: auto; }

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

.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head p:last-child { margin-bottom: 0; color: var(--ink-soft); }
.section-head.center { margin-inline: auto; text-align: center; }

/* Visible to screen readers only — used to label figures whose meaning is
   carried purely by styling, such as a struck-through original price. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.section-sub {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5em;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}

.lead { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem); color: var(--ink-soft); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.9rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.97rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--magenta);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(162, 48, 143, 0.28);
}
.btn-primary:hover {
  background: var(--magenta-deep);
  color: var(--white);
  box-shadow: 0 10px 26px rgba(162, 48, 143, 0.34);
}

.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--white); }
.btn-ghost:hover { border-color: var(--magenta); color: var(--magenta); }

/* On coloured backgrounds the neutral ghost disappears — invert it. */
.on-color .btn-ghost { background: transparent; border-color: rgba(255,255,255,0.55); color: var(--white); }
.on-color .btn-ghost:hover { background: var(--white); border-color: var(--white); color: var(--magenta); }

.btn-block { width: 100%; }

/* ---------- Header: floating pill ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: var(--header-pad-t);
  padding-bottom: 0.5rem;
  /* Transparent so the hero colour runs underneath the floating bar. */
  background: transparent;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  min-height: 76px;
  padding: 0.6rem 0.75rem 0.6rem 1.4rem;
  background: var(--white);
  border-radius: 999px;
  box-shadow: var(--shadow);
  /* Children must be allowed to shrink, or a long menu pushes the CTA out
     past the pill's rounded edge instead of the nav condensing. */
  min-width: 0;
}
.header-inner > * { min-width: 0; }

.site-brand { margin-right: auto; display: flex; align-items: center; flex-shrink: 0; }
.site-brand img { max-height: 56px; width: auto; }

.brand-text { text-decoration: none; display: block; line-height: 1.15; }
.brand-name {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--blue);
  letter-spacing: -0.02em;
}
.brand-tagline {
  display: block;
  font-size: 0.68rem;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-nav { display: none; }

.nav-list {
  display: flex;
  align-items: center;
  /* Scales with the viewport, but the ceiling matters more than the slope:
     the pill itself stops growing at --maxw-header (1360px), so a gap that
     keeps widening with the screen pushes the last item under the CTA on big
     monitors. The cap is what keeps 1920 honest, not the minimum. */
  gap: clamp(0.85rem, 1.15vw, 1.2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list a {
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: clamp(0.95rem, 0.86rem + 0.34vw, 1.1rem);
  font-weight: 600;
  white-space: nowrap;
}
.nav-list a:hover { color: var(--magenta); }
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a { color: var(--magenta); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.header-actions .btn {
  display: none;
  padding: 0.85rem clamp(1.3rem, 1.9vw, 1.9rem);
  font-size: clamp(0.9rem, 0.84rem + 0.24vw, 1.02rem);
  white-space: nowrap;
}

.nav-toggle {
  display: grid;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 12px 11px;
  align-content: center;
  background: var(--magenta-soft);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--magenta);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  /* Full-viewport sheet. Sits below the header (z-index 100) so the logo and
     the close button stay on top of it and reachable. */
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--header-h) + 1.25rem) var(--gutter) calc(2.75rem + env(safe-area-inset-bottom));

  /* Translucent, but the tint is heavy enough that ink text keeps a 12:1
     ratio over whatever is scrolling underneath. Blur does the rest. */
  background: rgba(253, 251, 247, 0.94);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
}
.mobile-nav[hidden] { display: none; }

.mobile-nav-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 100%;
  max-width: 32rem;
  margin-inline: auto;
}

.mobile-nav-menu { flex: 1; }

.mobile-nav-list, .mobile-nav .nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}

.mobile-nav-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Comfortably above the 44px minimum — this is the primary navigation on a
     phone, held one-handed. */
  min-height: 56px;
  padding: 0.85rem 0.25rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 1.22rem;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  transition: color 0.18s ease, padding-left 0.22s ease;
}
.mobile-nav-menu a::after {
  content: "→";
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  color: var(--magenta);
}
.mobile-nav-menu a:hover, .mobile-nav-menu a:focus-visible { color: var(--magenta); padding-left: 0.7rem; }
.mobile-nav-menu a:hover::after, .mobile-nav-menu a:focus-visible::after { opacity: 1; transform: translateX(0); }

.mobile-nav .current-menu-item > a,
.mobile-nav .current_page_item > a { color: var(--magenta); }

/* The footer block already draws a rule above itself. */
.mobile-nav-list > li:last-child > a { border-bottom: 0; }
.mobile-nav .sub-menu li:last-child > a { border-bottom: 0; }

/* Sub-items read as children: smaller, indented, lighter rule. */
.mobile-nav .sub-menu { list-style: none; margin: 0; padding: 0 0 0 1.1rem; }
.mobile-nav .sub-menu a {
  min-height: 48px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Items arrive in sequence once the sheet opens. */
.mobile-nav.is-open .mobile-nav-list > li,
.mobile-nav.is-open .mobile-nav-foot {
  animation: mobile-item-in 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.mobile-nav.is-open .mobile-nav-list > li:nth-child(1) { animation-delay: 0.04s; }
.mobile-nav.is-open .mobile-nav-list > li:nth-child(2) { animation-delay: 0.08s; }
.mobile-nav.is-open .mobile-nav-list > li:nth-child(3) { animation-delay: 0.12s; }
.mobile-nav.is-open .mobile-nav-list > li:nth-child(4) { animation-delay: 0.16s; }
.mobile-nav.is-open .mobile-nav-list > li:nth-child(5) { animation-delay: 0.20s; }
.mobile-nav.is-open .mobile-nav-foot { animation-delay: 0.24s; }

@keyframes mobile-item-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.mobile-nav-foot {
  display: grid;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--line);
}

.mobile-nav-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.mobile-nav-contact li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.mobile-nav-contact svg {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: var(--magenta);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mobile-nav-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.mobile-nav-contact a:hover { color: var(--magenta); }

/* Page must not scroll behind an open sheet. */
body.nav-open { overflow: hidden; }

/* The scroll lock sets body{position:fixed; top:-Ypx}, which moves the whole
   document up — and a position:sticky header rides along with it, straight off
   the top of the screen. That is what hid the logo and the close button.
   Pinning the header to the viewport for the duration keeps both reachable. */
body.nav-open .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* .mobile-nav lives inside .site-header, which has z-index:100 and therefore
   forms a stacking context. Inside it the positioned sheet (z-index:90) paints
   over the header bar, which has no z-index of its own — so the logo and the
   close button were rendered underneath the overlay, not missing from it.
   Lifting the bar above the sheet is the actual fix; pinning it above only
   handled the scroll-lock displacement. */
.site-header > .container {
  position: relative;
  z-index: 95;
  max-width: var(--maxw-header);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav.is-open .mobile-nav-list > li,
  .mobile-nav.is-open .mobile-nav-foot { animation: none; }
  .mobile-nav-menu a, .mobile-nav-menu a::after { transition: none; }
}

/* 1280px is where logo + six items + CTA stop competing for the same pixels.
   It was 1080 while the menu had five: adding Επικοινωνία pushed the last item
   under the button everywhere below this. Between 1080 and 1280 the burger is
   the honest answer — a menu that overlaps its own CTA is worse than a tap.
   Below it the hamburger is the honest answer; cramming them in is not. */
@media (min-width: 1280px) {
  .site-nav { display: block; }
  .nav-toggle { display: none; }
  .header-actions .btn { display: inline-flex; }
  .mobile-nav { display: none !important; }
  .site-brand img { max-height: clamp(40px, 3.6vw, 56px); }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  /* Pulled up under the floating header, which sits on transparent ground. */
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
  /* The CTA block near the foot of the page runs magenta -> blue at 115deg.
     The hero is its mirror: blue -> magenta, so the page opens and closes on
     the same gradient rather than opening flat and ending rich. The magenta
     only arrives in the far corner, behind the image, keeping the left column
     solidly blue for white text contrast — and honouring the client's brief
     that the brand blue leads. */
  /* Violet-led, per the client's request to make purple the primary colour.
     Measured across the text column: 5.0:1 at the worst point, better than the
     blue ramp it replaces. The logo keeps its true blue up in the white header
     pill, where it still reads. */
  background: linear-gradient(115deg, var(--violet-deep) 0%, var(--violet) 48%, var(--magenta) 115%);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

/* Same faint discs as the CTA and footer, so all three coloured blocks share
   one vocabulary. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}
.hero::before { top: -8rem; left: -6rem; width: 26rem; height: 26rem; }
.hero::after  { bottom: -10rem; right: 18%; width: 18rem; height: 18rem; }

.hero h1, .hero .section-sub { color: var(--white); }
.hero .eyebrow {
  /* She asked for this tag to "have colour, purple or magenta". On a dark
     violet hero, coloured text on its own would be unreadable — a magenta pill
     with white text gives the colour and keeps 5:1. */
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--magenta);
  color: var(--white);
  letter-spacing: 0.12em;
}
.hero .lead, .hero p { color: rgba(255, 255, 255, 0.92); }
.hero .hl { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.45); text-decoration-thickness: 3px; text-underline-offset: 6px; }

.hero-inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

.hero-visual { position: relative; }
.hero-visual img {
  width: 100%;
  border-radius: 50% 50% var(--radius-xl) var(--radius-xl) / 42% 42% var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.1fr 0.9fr; }
}

/* ---------- Organic section dividers ----------
 * A curve mask on the leading edge of a coloured block, so sections meet in a
 * soft arc rather than a hard line. Pure CSS: no divider images to maintain.
 */

.curve-top {
  position: relative;
  border-start-start-radius: 50% 5rem;
  border-start-end-radius: 50% 5rem;
  margin-top: -3rem;
  padding-top: calc(var(--section-y) + 2rem);
}

.curve-bottom {
  border-end-start-radius: 50% 5rem;
  border-end-end-radius: 50% 5rem;
  padding-bottom: calc(var(--section-y) + 2rem);
  margin-bottom: -3rem;
}

/* ---------- Ribbon ---------- */

.ribbon {
  padding-block: 0;
  background: var(--magenta);
  transform: rotate(-1.6deg);
  margin-block: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
}

.ribbon-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: ribbon-scroll 46s linear infinite;
}

.ribbon-group {
  display: flex;
  gap: 2.5rem;
  padding: 0.9rem 1.25rem;
  white-space: nowrap;
}

.ribbon-item {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
}
.ribbon-item::after { content: " •"; opacity: 0.55; }

@keyframes ribbon-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon-track { animation: none; }
}

/* ---------- Intro band ---------- */

.intro-band { padding-block: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.intro-band p {
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Offer cards ---------- */

.offer { background: var(--paper-alt); }

.offer-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.offer-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.offer-card h3 { margin-bottom: 0.6em; }
.offer-card p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

.card-badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--magenta-soft);
  color: var(--magenta);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.35rem;
}

.offer-close {
  max-width: 46rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center;
  font-size: 1.08rem;
}

/* ---------- Elytis band ---------- */

.elytis {
  --elytis-image: url("../images/elytis-bg.webp");
  color: var(--white);
  background-color: var(--magenta-deep);
  /* Measured against the bright midday photograph: at 0.62 the white quote
     fell to 3.45:1. An alpha of 0.78 keeps the image visibly sunlit while the
     lowest measured contrast in the quote region reaches 4.99:1 (WCAG AA). */
  /* The bright island photograph measures 0.465 mean luminance in the quote
     area — 3.7x the dusk shot it replaced. Raising the wash until white text
     passed took it to 0.78, which hid four fifths of a photograph the client
     specifically asked to be visible.
     Instead: a light wash for atmosphere, plus a soft scrim behind the quote
     only. The photo keeps 42% of its presence and the text sits at 5.9:1. */
  background-image: linear-gradient(140deg, rgba(122, 33, 112, 0.58), rgba(18, 87, 119, 0.58)),
                    var(--elytis-image, none);
  background-size: cover;
  background-position: center;
  text-align: center;
}

/* Local scrim: an elliptical pool of shade under the poem, feathered to zero
   so it reads as light on water rather than as a panel edge. */
.elytis-inner { position: relative; }
.elytis-inner::before {
  content: "";
  position: absolute;
  inset: -22% -6%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
              rgba(54, 32, 72, 0.74) 0%,
              rgba(54, 32, 72, 0.58) 48%,
              rgba(54, 32, 72, 0) 78%);
  pointer-events: none;
}
.elytis-inner > * { position: relative; z-index: 1; }

.elytis blockquote {
  margin: 0 auto;
  max-width: 44rem;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 1rem + 0.85vw, 1.65rem);
  line-height: 1.6;
}
.elytis blockquote p { margin: 0 0 0.4em; }
.elytis cite {
  display: block;
  margin-top: 1.75rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---------- Why grid ---------- */

.why-grid {
  display: grid;
  gap: 1.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}

.why-card { padding-top: 1.25rem; border-top: 3px solid var(--magenta-soft); }
.why-num {
  display: block;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--magenta);
  margin-bottom: 0.5rem;
}
.why-card h3 { margin-bottom: 0.4em; }
.why-card p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }

/* ---------- CTA band ---------- */

.cta-band { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Gradient block with decorative discs bleeding off the corner — the
   "Elementor-style" panel from the reference, in brand magenta→blue rather
   than the reference's orange. The discs are pseudo-elements, so there is no
   image to ship or maintain. */
.cta-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  align-items: center;
  justify-content: space-between;
  padding: clamp(2.25rem, 4.5vw, 3.5rem);
  border-radius: var(--radius-xl);
  background: linear-gradient(115deg, var(--magenta-deep) 0%, var(--magenta) 48%, var(--violet) 100%);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

/* Two translucent discs, offset so they read as one overlapping pair. */
.cta-inner::before,
.cta-inner::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
}
.cta-inner::before { top: -5rem; right: -4rem; width: 17rem; height: 17rem; }
.cta-inner::after  { bottom: -7rem; left: -3rem; width: 13rem; height: 13rem; }

.cta-inner h2 { margin-bottom: 0.35em; color: var(--white); }
.cta-inner p { margin: 0; color: rgba(255, 255, 255, 0.92); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Magenta on magenta disappears — the button goes white here. */
.cta-inner .btn-primary { background: var(--white); color: var(--magenta-deep); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); }
.cta-inner .btn-primary:hover { background: var(--paper-alt); color: var(--magenta-deep); }
.cta-inner .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: var(--white); }
.cta-inner .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--white); color: var(--white); }

/* The CTA band is itself magenta-led, so a magenta marker would vanish into
   it. Deep violet keeps the highlighter reading as a highlighter and stays in
   the purple family the client asked for. */
.cta-inner .mark--magenta { --mark-color: var(--violet-deep); color: var(--white); }

/* ---------- Pages ---------- */

.page-hero {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4rem));
  background: var(--blue-soft);
}
.page-hero h1 { margin-bottom: 0.3em; }
.page-hero .lead { margin: 0; }

.page-thumb img { border-radius: var(--radius-xl); box-shadow: var(--shadow); }

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

/* Editor content. Deliberately generous: these pages are long-form Greek and
   readability is the whole point. */
.prose { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.prose > *:first-child { margin-top: 0; }
.prose h2 {
  margin-top: 2em;
  padding-top: 1.25rem;
  border-top: 3px solid var(--magenta-soft);
}
.prose h3 { margin-top: 1.6em; color: var(--magenta); }
.prose ol { padding-left: 1.3em; margin: 0 0 1.4em; }
.prose li { margin-bottom: 0.55em; }

/* Check-mark lists: these pages are almost entirely "what's included" lists,
   and a plain bullet reads as a wall. */
.prose ul { list-style: none; padding-left: 0; margin: 0 0 1.5em; }
.prose ul li { position: relative; padding-left: 2.1rem; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--magenta-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2308f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}

.prose blockquote {
  margin: 2em 0;
  padding: 1.5rem 1.75rem;
  border-left: 4px solid var(--magenta);
  background: var(--magenta-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose img { border-radius: var(--radius-lg); margin-block: 1.75em; }

.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 1.75em;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.prose th, .prose td { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-family: var(--font-head); font-weight: 700; background: var(--magenta-soft); color: var(--magenta-deep); }
.prose tr:last-child td { border-bottom: 0; }
.prose td:last-child { font-weight: 700; color: var(--magenta); white-space: nowrap; }

.prose hr {
  border: 0;
  height: 3px;
  background: var(--line);
  border-radius: 3px;
  margin-block: 3rem;
}

/* ---------- Post grid ---------- */

.post-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.post-card { display: flex; flex-direction: column; gap: 1rem; }
.post-thumb img { border-radius: var(--radius-lg); aspect-ratio: 16 / 10; object-fit: cover; }
.post-body h2 { font-size: 1.2rem; margin-bottom: 0.3em; }
.post-body h2 a { color: var(--ink); text-decoration: none; }
.post-body h2 a:hover { color: var(--magenta); }
.post-meta { font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 0.5em; }
.post-body p { font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  /* Same 115deg axis as the CTA block, several stops darker. A neutral slate
     read as generic dark-UI chrome against the warm paper; this belongs to the
     brand. Deliberately not the CTA's bright gradient — two saturated blocks
     stacked would cancel each other and cost the CTA its emphasis. */
  background: linear-gradient(115deg, var(--night-plum) 0%, var(--night-mid) 45%, var(--night-blue) 100%);
  color: var(--paper-alt);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
  border-start-start-radius: 50% 4rem;
  border-start-end-radius: 50% 4rem;
  margin-top: 2rem;
  overflow: hidden;
  isolation: isolate;
}

/* One faint disc, echoing the pair on the CTA above. */
.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -6rem;
  right: -6rem;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.footer-brand { grid-column: span 1; }
@media (min-width: 720px) { .footer-brand { grid-column: span 2; } }

.footer-name {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.6rem;
}
.footer-line { color: rgba(245, 240, 232, 0.72); font-size: 0.95rem; max-width: 30rem; margin: 0; }

.footer-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.55);
  margin-bottom: 1rem;
}

.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-list a { color: var(--paper-alt); text-decoration: none; font-size: 0.95rem; }
.footer-list a:hover { color: var(--white); text-decoration: underline; }
.footer-list li { font-size: 0.95rem; color: rgba(245, 240, 232, 0.72); }

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 240, 232, 0.14);
  font-size: 0.85rem;
  color: rgba(245, 240, 232, 0.6);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Submenu (Μαθήματα) ---------- */

.site-nav .menu-item-has-children { position: relative; display: flex; align-items: center; gap: 0.15rem; }

.submenu-toggle {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-faint);
}
.submenu-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.menu-item-has-children.is-open .submenu-toggle svg { transform: rotate(180deg); }
.menu-item-has-children.is-open > a { color: var(--magenta); }

.site-nav .sub-menu {
  position: absolute;
  top: calc(100% + 1.1rem);
  left: 50%;
  z-index: 60;
  min-width: 17rem;
  margin: 0;
  padding: 0.6rem;
  list-style: none;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);

  /* Hidden but still laid out, so the panel can animate rather than snap. */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.menu-item-has-children.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

/* Little arrow pointing back at the parent item. */
.site-nav .sub-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  border: 8px solid transparent;
  border-bottom-color: var(--white);
  transform: translateX(-50%);
}

.site-nav .sub-menu a {
  display: block;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  white-space: normal;
  line-height: 1.4;
}
.site-nav .sub-menu a:hover { background: var(--magenta-soft); color: var(--magenta); }

/* Mobile: children are simply indented, no dropdown mechanics. */
.mobile-nav .sub-menu { list-style: none; margin: 0; padding: 0 0 0 1rem; }
.mobile-nav .sub-menu a { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Lessons tabs ---------- */

.lessons-tabs-wrap {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.lessons-tabs {
  position: relative;
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.7rem;
}
.lessons-tabs::-webkit-scrollbar { display: none; }

.lessons-tab {
  flex: 0 0 auto;
  /* 44px minimum touch target. */
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  background: none;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.lessons-tab { position: relative; z-index: 1; }
.lessons-tab:not(.is-active):hover { color: var(--magenta); background: var(--magenta-soft); }
.lessons-tab.is-active { color: var(--white); }

/* The pill slides between tabs instead of each tab flashing its own background. */
.lessons-tab-indicator {
  position: absolute;
  top: 0.7rem;
  left: 0;
  height: calc(100% - 1.4rem);
  min-height: 44px;
  border-radius: 999px;
  background: var(--magenta);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  /* Sits above the strip background but below the labels. A negative z-index
     would drop it behind .lessons-tabs-wrap's own background and vanish. */
  z-index: 0;
}

/* Without JS every panel stays visible — the page still works, it just scrolls. */
.lessons-panel { padding-top: 1rem; }
.tabs-ready .lessons-panel { display: none; }
.tabs-ready .lessons-panel.is-active { display: block; animation: panel-in 0.3s ease both; }
.tabs-ready .lessons-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.lessons-permalink { margin-top: 2rem; font-size: 0.93rem; }
.lessons-permalink a { font-weight: 700; }

/* ---------- Scroll reveal ---------- */

.will-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.will-reveal.is-revealed { opacity: 1; transform: none; }

/* ---------- Press feedback ---------- */

.btn:active { transform: scale(0.97); }
.offer-card:active { transform: translateY(-2px) scale(0.995); }

@media (prefers-reduced-motion: reduce) {
  .will-reveal { opacity: 1; transform: none; transition: none; }
  .lessons-tab-indicator { transition: none; }
  .tabs-ready .lessons-panel.is-active { animation: none; }
}

/* ---------- Marker highlight ----------
 * A highlighter-pen swipe behind a phrase: an oversized, slightly skewed block
 * that sweeps in left-to-right when it scrolls into view.
 *
 * Ported from a React/Tailwind component; the original is static, the sweep is
 * ours. Fitting motif for a philology site — it reads as a teacher marking up
 * a text.
 *
 * Distinct from .hl, which stays plain magenta text: the client asked for the
 * course names "τονισμένα με ματζέντα" and that instruction is literal.
 *
 * Stacking: .mark carries position + z-index:0 so it forms its own stacking
 * context. Without it, the z-index:-1 block escapes and paints behind the
 * section background instead of behind the text.
 */

.mark {
  position: relative;
  z-index: 0;
  display: inline-block;
  color: var(--ink);
  /* The block is drawn on the padding box, not outside it. Bleeding the
     highlight past the element (negative insets) made it overlap the next
     word, because layout never reserved that space. */
  padding-inline: 0.34em;
  margin-inline: 0.04em;
}

.mark::before {
  content: "";
  position: absolute;
  inset: -0.12em 0;
  z-index: -1;
  /* Rounded enough to read as a marker stroke rather than a selection box. */
  border-radius: 0.4em;
  background: var(--mark-color, var(--sand));
  transform: skewY(-1.6deg) scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 0.7, 0.28, 1);
}

/* Drawn by default; the sweep only applies once JS has flagged it for reveal,
   so no-JS visitors still see the highlight. */
.mark::before { transform: skewY(-1.6deg) scaleX(1); }
.mark.will-mark::before { transform: skewY(-1.6deg) scaleX(0); }
.mark.is-marked::before { transform: skewY(-1.6deg) scaleX(1); }

.mark--magenta { --mark-color: var(--magenta); color: var(--white); }
.mark--blue    { --mark-color: var(--blue);    color: var(--white); }
.mark--sand    { --mark-color: var(--sand);    color: var(--ink); }
.mark--soft    { --mark-color: var(--magenta-soft); color: var(--magenta-deep); }

/* On a coloured band the marker needs to be the light element, not the dark one. */
.on-color .mark--sand { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .mark::before,
  .mark.will-mark::before { transform: skewY(-1.6deg) scaleX(1); transition: none; }
}

/* ---------- Learner groups ---------- */

.groups { background: var(--paper-alt); }

.groups-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.group-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-sm);
}
.group-head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.75rem; }
.group-head h3 { margin: 0; }
.group-age {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--violet-soft);
  color: var(--violet-deep);
  /* She asked for the ages to be a little bigger — they were a footnote next
     to the group name, and they are the thing a parent scans for. */
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}
.group-card > p { color: var(--ink-soft); font-size: 0.97rem; }

.group-items { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.group-items li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.93rem;
  color: var(--ink);
}
.group-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--magenta-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2308f' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.58rem no-repeat;
}

/* ---------- Teacher ---------- */

/* .teacher background now comes from .brand-panel */

.teacher-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 860px) {
  .teacher-grid { grid-template-columns: 0.8fr 1.2fr; }
}

.teacher-photo img {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
}

.teacher-text h2 { margin-bottom: 0.15em; }
.teacher-text .section-sub { color: var(--magenta); margin-bottom: 1em; }

.teacher-facts { list-style: none; margin: 1.5rem 0 2rem; padding: 0; display: grid; gap: 0.85rem; }
.teacher-facts li {
  padding-left: 1.1rem;
  border-left: 3px solid var(--magenta-soft);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.teacher-facts strong { color: var(--ink); }

/* ---------- Steps ---------- */

.steps-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.step-card { position: relative; padding-top: 0.5rem; }
.step-num {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--magenta);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
}
.step-card h3 { margin-bottom: 0.35em; }
.step-card p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }

/* Connecting line between steps on wide screens. */
@media (min-width: 900px) {
  .step-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 3.6rem;
    right: -1.5rem;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
  }
}

/* ---------- Pricing ---------- */

.pricing { background: var(--paper-alt); }

.pricing-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.price-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-sm);
}
.price-card h3 { margin-bottom: 0.3em; }
.price-note { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 1.5rem; }

.price-rows { margin: auto 0 0; display: grid; gap: 0.9rem; }
.price-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.price-rows dt { font-size: 0.92rem; color: var(--ink-soft); }
.price-rows dd { margin: 0; text-align: right; }

.price {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--magenta);
  /* Tabular figures keep the euro amounts aligned across the three cards. */
  font-variant-numeric: tabular-nums;
}
.price-unit { font-size: 0.8rem; color: var(--ink-faint); white-space: nowrap; }

.pricing-more { margin: 2.5rem 0 0; text-align: center; font-weight: 700; }

/* ---------- FAQ ---------- */

.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* 44px touch target. */
  min-height: 44px;
  padding: 1.15rem 0;
  font-family: var(--font-head);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--magenta); }

.faq-chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--magenta);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.22s ease;
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-item[open] summary { color: var(--magenta); }

.faq-answer { padding-bottom: 1.4rem; animation: faq-open 0.26s ease both; }
.faq-answer p { margin: 0; color: var(--ink-soft); }

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer { animation: none; }
  .faq-chevron { transition: none; }
}


/* ---------- Featured price card ----------
 * Visual emphasis only — no "most popular" claim, because there is no data to
 * support one. It highlights the programme the homepage is written around
 * (diaspora students), which is an editorial choice, not a statistic.
 */

.price-card--featured {
  background: var(--white);
  box-shadow: var(--shadow-lg);
  border: 2px solid var(--magenta);
}
@media (min-width: 60rem) {
  .price-card--featured { transform: scale(1.04); }
  .price-card--featured:hover { transform: scale(1.05); }
}

.price-flag {
  align-self: flex-start;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--magenta);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .price-card--featured, .price-card--featured:hover { transform: none; }
}

/* ---------- Paper texture ----------
 * Sits under .groups and .pricing at 7% so those flat panels get a little
 * tooth. Any stronger and it starts competing with the text.
 */

.groups, .pricing { position: relative; isolation: isolate; }

.groups::before,
.pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/texture-paper.webp") center / 600px repeat;
  opacity: 0.07;
  pointer-events: none;
}

/* ---------- Blur-in text ----------
 * Words resolve out of a blur in sequence. Used on closing lines that carry
 * weight, where a highlighter would be wrong — a marker emphasises one word,
 * this gives a whole sentence a beat.
 *
 * Drawn sharp by default; JS adds .will-blur only once it knows it can run the
 * animation, so a no-JS visitor never sees blurred text.
 */

/* Tuning lives in custom properties, never in a more specific selector.
   An earlier version overrode the hidden state with `h2 .blur-text.will-blur
   .bw`, which outranks `.blur-text.is-blurred .bw` — so headings were still
   matching the blurred rule after the reveal fired and never came into focus.
   Variables sidestep specificity entirely. */
.blur-text {
  --bw-blur: 9px;
  --bw-lift: 6px;
  --bw-step: 38ms;
}
.blur-text .bw { display: inline-block; }

/* Titles are two to four words. At the paragraph's cadence a heading finishes
   before it registers as deliberate, so it goes slower — and heavier, so the
   resolve is visible on so few words. */
h1 .blur-text,
h2 .blur-text,
h3 .blur-text {
  --bw-blur: 14px;
  --bw-lift: 10px;
  --bw-step: 90ms;
}

.blur-text.will-blur .bw {
  opacity: 0;
  filter: blur(var(--bw-blur));
  transform: translateY(var(--bw-lift));
}

.blur-text.is-blurred .bw {
  opacity: 1;
  filter: blur(0);
  transform: none;
  /* 38ms per word, capped at 900ms. Uncapped, this sentence's 26 words would
     take 1.4s to finish arriving — long enough that the reader gets there
     before the text does. The cap lets the tail land together. */
  transition: opacity 0.5s ease-out, filter 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: min(calc(var(--bw-i) * var(--bw-step, 38ms)), 900ms);
}

/* ---------- Hover states ----------
 * House rules: transform and colour only, 150-260ms, and nothing that changes
 * an element's layout box — a card that reflows on hover makes the whole grid
 * twitch.
 */

/* Cards lift. Shadow deepens with them so the lift reads as height. */
.group-card,
.price-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.group-card:hover,
.price-card:hover:not(.price-card--featured) {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

/* Group headings get a short accent rule that extends on hover. It starts
   partly drawn so it reads as decoration, not as a link affordance. */
.group-head h3 { position: relative; padding-bottom: 0.3rem; }
.group-head h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 2.2rem;
  border-radius: 3px;
  background: var(--magenta);
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.group-card:hover .group-head h3::after { width: 100%; }

.group-card:hover .group-age { background: var(--magenta-soft); color: var(--magenta-deep); }
.group-age { transition: background-color 0.22s ease, color 0.22s ease; }

/* Offer badge tilts a touch — small enough to feel alive, not cute. */
.card-badge { transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), background-color 0.25s ease; }
.offer-card:hover .card-badge { transform: rotate(-6deg) scale(1.06); background: var(--magenta); color: var(--white); }

/* Why cards: the top rule fills with brand colour left to right. */
.why-card { position: relative; }
.why-card::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--magenta);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.why-card:hover::after { width: 100%; }
.why-card .num, .why-num { transition: color 0.22s ease; }

/* Steps: the numbered disc grows slightly and warms. */
.step-num { transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease; }
.step-card:hover .step-num {
  transform: scale(1.08);
  box-shadow: 0 8px 22px rgba(162, 48, 143, 0.32);
}

/* Nav links: underline draws from the left. */
.nav-list a, .footer-list a, .pricing-more a, .lessons-permalink a {
  position: relative;
  text-decoration: none;
}
.nav-list a::after,
.footer-list a::after,
.pricing-more a::after,
.lessons-permalink a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-list a:hover::after,
.footer-list a:hover::after,
.pricing-more a:hover::after,
.lessons-permalink a:hover::after { transform: scaleX(1); }

/* The current page keeps its underline permanently. */
.nav-list .current-menu-item > a::after,
.nav-list .current_page_item > a::after { transform: scaleX(1); }

/* Footer links already underline on hover via text-decoration — drop that so
   the drawn rule is the only one. */
.footer-list a:hover { text-decoration: none; }

/* Photos breathe inside a fixed frame, so nothing around them moves. */
.teacher-photo, .post-thumb { overflow: hidden; border-radius: 50%; }
.post-thumb { border-radius: var(--radius-lg); }
.teacher-photo img, .post-thumb img { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }
.teacher-photo:hover img, .post-thumb:hover img { transform: scale(1.04); }

/* Lessons permalink gets a nudging arrow. */
.lessons-permalink a::before {
  content: "→";
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 0.22s ease;
}
.lessons-permalink a:hover::before { transform: translateX(4px); }

/* FAQ rows tint their whole strip, not just the text. */
.faq-item { transition: background-color 0.2s ease; }
.faq-item:hover { background: rgba(162, 48, 143, 0.035); }

@media (prefers-reduced-motion: reduce) {
  .blur-text.will-blur .bw,
  .blur-text .bw { opacity: 1; filter: none; transform: none; transition: none; }

  .group-card, .price-card, .card-badge, .step-num,
  .teacher-photo img, .post-thumb img,
  .group-head h3::after, .why-card::after,
  .nav-list a::after, .footer-list a::after,
  .pricing-more a::after, .lessons-permalink a::after,
  .lessons-permalink a::before {
    transition: none;
  }
  .group-card:hover, .price-card:hover { transform: none; }
}

/* ---------- Inner page hero ----------
 * The inner pages used to open on flat paper with a black title. They now get
 * the same coloured opening as the home page, at a calmer intensity so they
 * read as chapters rather than five competing front doors.
 */

.page-hero--tinted {
  background: linear-gradient(115deg, var(--violet-deep) 0%, var(--violet-lt) 52%, var(--magenta) 120%);
  color: var(--white);
}
.page-hero--tinted h1 { color: var(--white); }
.page-hero--tinted .lead { color: rgba(255, 255, 255, 0.9); }
.page-hero--tinted .eyebrow { color: rgba(255, 255, 255, 0.86); }

.page-hero-inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .page-hero-inner:has(.page-hero-media) { grid-template-columns: 1.2fr 0.8fr; }
}

.page-hero-media img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.84rem;
  /* 0.82, not 0.66: at 13px this is small text, so it needs the full 4.5:1.
     The lower value measured 3.8:1 against the hero's lightest stop. */
  color: rgba(255, 255, 255, 0.82);
}
.crumbs a { color: rgba(255, 255, 255, 0.92); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.crumbs [aria-current] { color: var(--white); font-weight: 600; }

/* ---------- Rich prose ----------
 * These pages are long lists of what a course covers. Left as default prose
 * they read as a wall; these rules give the same markup structure and air
 * without the client having to format anything.
 */

.prose--rich > h2 {
  position: relative;
  margin-top: 2.6em;
  padding-top: 0;
  padding-left: 1.1rem;
  border-top: 0;
}
.prose--rich > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  bottom: 0.16em;
  width: 5px;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--magenta), var(--blue));
}
.prose--rich > h2:first-child { margin-top: 0; }

.prose--rich > h3 {
  margin-top: 2em;
  color: var(--magenta-deep);
}

/* The opening paragraph of a page carries the promise — give it weight. */
.prose--rich > p:first-of-type {
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.22rem);
  color: var(--ink);
}

/* Long "what's included" lists sit far better in two columns than as one
   tall stack. Short lists stay single-column via the item count guard. */
@media (min-width: 42rem) {
  .prose--rich ul:has(li:nth-child(6)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem 2rem;
  }
}

/* A paragraph that is a single bold sentence acts as a section pull-quote. */
.prose--rich > p > strong:only-child {
  display: block;
  padding: 1.1rem 1.35rem;
  border-radius: var(--radius);
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-weight: 700;
}

/* ---------- Sibling navigation ---------- */

.siblings { background: var(--paper-alt); }

.siblings-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.sibling-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.sibling-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.sibling-card h3 { margin: 0; font-size: 1.05rem; color: var(--ink); }
.sibling-card:hover h3 { color: var(--magenta); }
.sibling-go {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--magenta-soft);
  color: var(--magenta);
  font-size: 1.1rem;
  transition: transform 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}
.sibling-card:hover .sibling-go {
  transform: translateX(4px);
  background: var(--magenta);
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .sibling-card, .sibling-go { transition: none; }
  .sibling-card:hover { transform: none; }
  .sibling-card:hover .sibling-go { transform: none; }
}

/* ---------- Teacher page ---------- */

.teacher-hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 860px) {
  .teacher-hero-grid { grid-template-columns: 0.7fr 1.3fr; }
}

.teacher-hero-photo img {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.22);
  box-shadow: var(--shadow-lg);
}

.teacher-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}
.teacher-chips li {
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.teacher-chips li:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.6); }

.credentials { background: var(--paper-alt); }

.credentials-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.credential-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.credential-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.credential-label {
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.credential-card h3 { margin-bottom: 0.4em; }
.credential-card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Pricing page ---------- */

.pricing--full { background: var(--paper); }
.pricing-grid--four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

/* ---------- Lesson packages ----------
 * The four programmes repeat above and below, so this band has to read as a
 * different kind of information rather than as the rate cards again. It gets
 * the pale violet ground, two wide cards per row instead of four narrow ones,
 * and figures presented as a before/after rather than as a single price.
 */

.packages { background: var(--violet-soft); }

.packages-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.package-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-sm);
}
.package-card h3 {
  margin-bottom: 1.4rem;
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem);
}

/* Two columns where the card is wide enough, stacked where it is not. The
   card's own min-width is 24rem, so this collapses on phones only. */
.package-modes {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-top: auto;
}

.package-mode-title {
  margin-bottom: 0.7rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--violet);
}

.package-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.package-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.55rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
/* The count owns a full line so the price below it never has to compete for
   width with the label, however long the discount badge gets. */
.package-count { flex: 1 0 100%; font-size: 0.88rem; color: var(--ink-soft); }

.package-amounts { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.package-row .price { font-size: 1.35rem; }

.package-was {
  color: var(--ink-faint);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.package-off {
  margin-left: auto;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--magenta-soft);
  color: var(--magenta-deep);
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.packages-note {
  margin: 2.25rem 0 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.included { background: var(--paper-alt); }

.included-grid {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.included-item { display: flex; gap: 1rem; align-items: flex-start; }
.included-item h3 { margin-bottom: 0.25em; font-size: 1.05rem; }
.included-item p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }

.included-tick {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--magenta-soft);
  transition: background-color 0.22s ease, transform 0.22s ease;
}
.included-tick svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: var(--magenta);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.22s ease;
}
.included-item:hover .included-tick { background: var(--magenta); transform: scale(1.08); }
.included-item:hover .included-tick svg { stroke: var(--white); }

/* ---------- Certificate levels ---------- */

.levels-track {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.level-card {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
/* Each step up the ladder takes a little more of the brand gradient. */
.level-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--violet), var(--magenta));
  opacity: calc(0.32 + var(--level-i) * 0.136);
}
.level-card:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: var(--shadow);
}

.level-code {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--violet-soft);
  color: var(--violet-deep);
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  transition: background-color 0.22s ease, color 0.22s ease;
}
.level-card:hover .level-code { background: var(--violet); color: var(--white); }
.level-card h3 { margin-bottom: 0.35em; font-size: 1.15rem; }

.level-lead {
  margin: 0 0 1.1rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
}

.level-intro {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.level-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.level-items li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.level-items li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
}

/* ---------- Exam note ---------- */

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

.note-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--blue-soft);
  border-left: 5px solid var(--blue);
}
.note-card h2 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); margin-bottom: 0.4em; }
.note-card p { margin: 0 0 0.6em; }
.note-card p:last-child { margin-bottom: 0; }
.note-small { font-size: 0.9rem; color: var(--ink-soft); }

.note-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--white);
}
.note-icon svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: var(--blue-deep);
  stroke-width: 2;
  stroke-linecap: round;
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
a.contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.contact-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--magenta-soft);
  transition: background-color 0.22s ease;
}
.contact-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: var(--magenta);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.22s ease;
}
a.contact-card:hover .contact-icon { background: var(--magenta); }
a.contact-card:hover .contact-icon svg { stroke: var(--white); }

.contact-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-value {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}
.contact-hint { margin-top: 0.5rem; font-size: 0.88rem; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .credential-card, .level-card, .contact-card, .included-tick, .level-code, .contact-icon {
    transition: none;
  }
  .credential-card:hover, .level-card:hover, a.contact-card:hover { transform: none; }
  .included-item:hover .included-tick { transform: none; }
}

/* ---------- Learner group artwork ----------
 * Optional: the card is designed to stand without an image, so the section
 * stays intact while artwork is still being produced.
 */

.group-card--imaged { padding-top: 0; overflow: hidden; }

.group-media {
  margin: 0 calc(-1 * clamp(1.6rem, 3vw, 2.2rem)) clamp(1.4rem, 2.5vw, 1.8rem);
  overflow: hidden;
}
.group-media img {
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.group-card--imaged:hover .group-media img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .group-media img { transition: none; }
  .group-card--imaged:hover .group-media img { transform: none; }
}

/* ---------- Mobile action bar ----------
 * Phones only. On desktop the header CTA is always visible; on a phone it
 * leaves with the hero and does not come back for several thousand words.
 */

.action-bar { display: none; }

@media (max-width: 1279px) {
  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(253, 251, 247, 0.94);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border-top: 1px solid var(--line);

    /* Hidden until the hero has scrolled away, so it never covers the opening. */
    transform: translateY(110%);
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .action-bar.is-visible { transform: none; }

  /* Room for the bar so it never sits on top of the last line of the footer. */
  body { padding-bottom: 4.75rem; }
  /* …except while the nav sheet is open, when the body is position:fixed. */
  body.nav-open { padding-bottom: 0; }
  body.nav-open .action-bar { transform: translateY(110%); }

  .action-bar-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* 48px, comfortably past the 44px minimum. */
    min-height: 48px;
    padding: 0.7rem 1.1rem;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.18s ease, color 0.18s ease;
  }
  .action-bar-call svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: var(--magenta);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .action-bar-call:active { border-color: var(--magenta); color: var(--magenta); }

  .action-bar-cta { flex: 1; min-height: 48px; padding-inline: 1rem; font-size: 0.92rem; }
}

/* ---------- Tab strip scroll affordance ----------
 * The three lesson tabs overflow a phone. A hard cut at the edge reads as the
 * end of the list; a fade reads as "there is more".
 *
 * Do NOT add `position: relative` here for the sake of the ::after below. The
 * strip is already `position: sticky` with `top: var(--header-h)` further up,
 * and sticky is a positioned value, so absolute children resolve against it
 * either way. Re-declaring the position later in the file overrode sticky but
 * left the `top` behind — as a relative offset that pushes the whole strip
 * 104px down the page without telling layout, so it parked itself on top of
 * the first paragraph of every lesson panel.
 */

.lessons-tabs-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.5rem;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(253, 251, 247, 0), var(--paper));
}
@media (min-width: 62rem) {
  .lessons-tabs-wrap::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .action-bar { transition: none; }
}

/* ---------- Phone refinements ---------- */

@media (max-width: 719px) {
  /* A 4:5 portrait is 490px tall on a 390px phone — it pushes the first
     section below two full swipes. Landscape framing keeps the hero to about
     one screen without cropping the subject badly. */
  .hero-visual img { aspect-ratio: 4 / 3; }

  /* The pull-quote sits better centred when it is the full column width. */
  .elytis blockquote { font-size: 1.15rem; }

  /* Tighten the price rows: on a narrow card the label and figure were
     colliding at the largest text sizes. */
  .price-rows > div { flex-wrap: wrap; gap: 0.25rem 1rem; }

  /* Breadcrumbs wrap rather than overflow on long page titles. */
  .crumbs { row-gap: 0.25rem; }
}

/* ---------- Hero: what this actually is ---------- */

.hero-what {
  margin-top: 1.4rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  color: rgba(255, 255, 255, 0.94);
}
.hero-what strong { color: var(--white); font-weight: 700; }

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.hero-facts li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.hero-facts svg {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: var(--sand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 719px) {
  /* Stacked, the three facts read as a checklist rather than a cramped row. */
  .hero-facts { flex-direction: column; gap: 0.55rem; }
}

/* ---------- Brand panel ----------
 * The gradient + floating discs + paper grain treatment from the share card,
 * extracted so any section can wear it. The client reacted strongly to that
 * card, and this is the honest way to give her more of it — pasting the card
 * itself into a page would repeat the brand name mid-content.
 *
 * Use sparingly. Three saturated panels on a page is the ceiling; past that
 * the CTA stops being the loud one.
 */

.brand-panel {
  position: relative;
  isolation: isolate;
  background: linear-gradient(150deg, var(--violet-deep) 0%, var(--violet) 58%, var(--magenta-deep) 100%);
  color: var(--white);
  overflow: hidden;
}

.brand-panel::before,
.brand-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.brand-panel::before { top: -7rem; right: -5rem; width: 24rem; height: 24rem; }
.brand-panel::after  { bottom: -9rem; left: -4rem; width: 18rem; height: 18rem; }

/* Paper grain, same texture the light sections use, at a whisper. */
.brand-panel > .container { position: relative; z-index: 1; }

.brand-panel h2,
.brand-panel h3,
.brand-panel .section-sub { color: var(--white); }
.brand-panel p { color: rgba(255, 255, 255, 0.92); }
.brand-panel .eyebrow { color: rgba(255, 255, 255, 0.86); }
.brand-panel .section-head p:last-child { color: rgba(255, 255, 255, 0.88); }

/* Teacher block wearing the panel: the facts list needs light rules. */
.brand-panel .teacher-facts li { border-left-color: rgba(255, 255, 255, 0.34); color: rgba(255, 255, 255, 0.9); }
.brand-panel .teacher-facts strong { color: var(--white); }
.brand-panel .teacher-photo img { border: 5px solid rgba(255, 255, 255, 0.24); }

/* Inner page heroes get the same discs, so every coloured block on the site
   belongs to one family rather than three near-misses. */
.page-hero--tinted { position: relative; isolation: isolate; overflow: hidden; }
.page-hero--tinted::before,
.page-hero--tinted::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}
.page-hero--tinted::before { top: -9rem; right: -6rem; width: 26rem; height: 26rem; }
.page-hero--tinted::after  { bottom: -11rem; left: -5rem; width: 17rem; height: 17rem; }
.page-hero--tinted > .container { position: relative; z-index: 1; }

/* Email is long enough to overflow a narrow contact card. */
.contact-value--email {
  font-size: 1.02rem;
  overflow-wrap: anywhere;
}

/* ---------- Subsection artwork ----------
 * Small illustration attached to a lesson subsection heading. Floated on wide
 * screens so the prose wraps around it; full width on a phone, where a float
 * would squeeze the text into a column two words wide.
 */

.subject-figure {
  margin: 0 0 1.25rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.subject-figure img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.subject-figure:hover img { transform: scale(1.04); }

@media (min-width: 34rem) {
  .subject-figure {
    float: right;
    width: 11rem;
    margin: 0.25rem 0 1.25rem 1.75rem;
    shape-outside: inset(0 round var(--radius-lg));
  }
  /* Next heading starts a clean band again rather than sitting beside the art. */
  .prose--rich > h2 { clear: both; }
}

@media (prefers-reduced-motion: reduce) {
  .subject-figure img { transition: none; }
  .subject-figure:hover img { transform: none; }
}