/* ============ 0. FONTS =====================================
   Self-hosted so the render-blocking round-trip to fonts.googleapis.com
   is gone. Only the greek, greek-ext, latin and latin-ext subsets ship —
   the site has no Cyrillic or Vietnamese copy. Regenerate by re-fetching
   the Google Fonts CSS and re-running the scratchpad download script. */
/* greek */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/comfortaa-400-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/comfortaa-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/comfortaa-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/comfortaa-600-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/comfortaa-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/comfortaa-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/comfortaa-700-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/comfortaa-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/comfortaa-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/fira-sans-400-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/fira-sans-400-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/fira-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/fira-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/fira-sans-500-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/fira-sans-500-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/fira-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/fira-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/fira-sans-600-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/fira-sans-600-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/fira-sans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/fira-sans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/fira-sans-700-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/fira-sans-700-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/fira-sans-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/fira-sans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================
   ΘΑΛΛΟΣ — Warm Clay  ·  Biraki Language Academy (v1)
   Design system + site-wide components.
   -------------------------------------------------------------
   TABLE OF CONTENTS
   01. Tokens (:root)
   02. Reset & base
   03. Typography helpers
   04. Layout: container / section / grids / split
   05. Decorative blobs
   06. Buttons
   07. Site header + navigation (desktop + mobile panel)
   08. Hero (home) + page-hero (inner pages)
   09. Stat strip
   10. Cards: clay cards, plain cards, offer card, callouts
   11. Check list / icon lists
   12. Figures & photo frames
   13. Feature bands (purple band, CTA band, seal)
   14. Languages strip
   15. Footer
   16. Scroll reveal & motion
   17. Utilities
   18. Breakpoints
   19. prefers-reduced-motion / print
   ============================================================= */

/* ============ 01. TOKENS ==================================== */
:root {
  /* --- Brand colours (sampled from the logo — BRIEF §1) --- */
  --purple-900: #2E1A45;
  --purple-700: #462B6A;
  --purple-500: #6A4A93;
  --purple-100: #EDE7F3;
  --orange:     #EF7F1A;
  --sky:        #6FD6FF;
  --lime:       #A3C61C;
  --gold:       #E9A81C;
  --cream:      #FDF9E4;
  --ink:        #241833;

  /* --- Derived / support colours --- */
  --white:        #FFFFFF;
  --cream-deep:   #F7F0D2;   /* alternate section ground */
  --cream-line:   #EDE3BE;   /* hairlines on cream */
  --orange-deep:  #D96A00;   /* darker orange for borders/hover */
  --orange-text:  #A85200;   /* the only orange safe for small text (5.1:1 on cream) */
  --lime-deep:    #6E8500;   /* lime that passes as text on cream */
  --sky-deep:     #0F6E97;   /* sky that passes as text on cream */
  --gold-soft:    #F6C95E;
  --sky-soft:     #BDECFF;
  --lime-soft:    #DCEA9A;
  --orange-soft:  #FBD9B0;

  /* --- Alpha colours (shadows, veils, rings) --- */
  --shade-edge:    rgba(46, 26, 69, 0.16);  /* tight clay edge */
  --shade-diffuse: rgba(46, 26, 69, 0.18);  /* wide soft cloud */
  --shade-deep:    rgba(46, 26, 69, 0.28);
  --veil-cream:    rgba(253, 249, 228, 0.86);
  --veil-white:    rgba(255, 255, 255, 0.10);
  --veil-white-2:  rgba(255, 255, 255, 0.18);
  --veil-dark:     rgba(36, 24, 51, 0.06);

  /* Focus indicators. No single hue can clear 3:1 against BOTH the cream page
     ground and the purple bands, so we ship two ring colours and swap the
     colour inside dark surfaces (see §07/§13/§15).
     #155E8C on cream = 6.6:1 · #FFD166 on --purple-700 = 8.0:1              */
  --focus-ring:       #155E8C;
  --focus-ring-light: #FFD166;

  /* Field border that clears 3:1 against white (3.75:1) — the cream hairline
     alone is not a perceivable control boundary. */
  --field-border:  #8E7CA8;

  /* --- Typography --- */
  --font-head: "Comfortaa", "Trebuchet MS", "DejaVu Sans", system-ui, sans-serif;
  --font-body: "Fira Sans", "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--2: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step--1: clamp(0.88rem, 0.85rem + 0.14vw, 0.95rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.18vw, 1.09rem);
  --step-1:  clamp(1.12rem, 1.06rem + 0.32vw, 1.31rem);
  --step-2:  clamp(1.30rem, 1.18rem + 0.58vw, 1.68rem);
  --step-3:  clamp(1.55rem, 1.33rem + 1.05vw, 2.25rem);
  --step-4:  clamp(1.85rem, 1.48rem + 1.80vw, 2.95rem);
  --step-5:  clamp(2.30rem, 1.62rem + 3.20vw, 4.20rem);

  --lh-tight: 1.14;
  --lh-head:  1.22;
  --lh-body:  1.7;
  --lh-loose: 1.8;
  --tracking-eyebrow: 0.16em;

  /* --- Spacing scale --- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.35rem;
  --sp-6:  1.75rem;
  --sp-7:  2.25rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5.5rem;
  --sp-11: 7rem;

  --section-y: clamp(3.25rem, 2.2rem + 4.6vw, 6.5rem);
  --section-y-lg: clamp(4.25rem, 2.6rem + 6.4vw, 8.5rem);

  /* --- Radii --- */
  --r-xs:   8px;
  --r-sm:   14px;
  --r-md:   20px;
  --r-lg:   26px;
  --r-xl:   32px;
  --r-2xl:  44px;
  --r-pill: 999px;

  /* --- Borders --- */
  --bw:      2px;
  --bw-thick: 3px;

  /* --- Shadows (clay: one tight tinted edge + one wide diffuse) --- */
  --shadow-xs:   0 2px 0 var(--shade-edge), 0 6px 14px -8px var(--shade-diffuse);
  --shadow-card: 0 5px 0 var(--shade-edge), 0 22px 44px -22px var(--shade-diffuse);
  --shadow-lift: 0 9px 0 var(--shade-edge), 0 34px 60px -26px var(--shade-diffuse);
  --shadow-btn:  0 4px 0 var(--shade-deep), 0 12px 24px -14px var(--shade-diffuse);
  --shadow-btn-active: 0 2px 0 var(--shade-deep), 0 6px 14px -12px var(--shade-diffuse);
  --shadow-header: 0 2px 0 var(--cream-line), 0 14px 30px -26px var(--shade-diffuse);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 140ms var(--ease-out);
  --t-mid:  240ms var(--ease-out);
  --t-slow: 320ms var(--ease-out);

  /* --- Layout --- */
  --container: 1180px;
  --container-wide: 1320px;
  --container-narrow: 760px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --header-h: 68px;
  /* Measured at runtime by main.js so sticky offsets stay exact even if the
     header reflows. The fallbacks below reproduce the static layout 1:1. */
  --header-real: var(--header-h);
  --sticky-h: calc(var(--header-h) + 3.75rem);

  /* --- z-index --- */
  --z-blob: 0;
  --z-base: 1;
  --z-sticky: 60;
  --z-panel: 70;
  --z-skip: 90;
}

/* ============ 02. RESET & BASE ============================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-real) + 1rem);
}

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--purple-700);
  font-weight: 700;
  line-height: var(--lh-head);
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.005em;
}
h1 { font-size: var(--step-5); line-height: var(--lh-tight); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--sp-5); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-5); padding-left: 1.2em; }
li { margin-bottom: var(--sp-2); }

strong, b { font-weight: 600; color: var(--purple-900); }

a {
  color: var(--purple-700);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
a:hover { color: var(--orange-text); }

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

button { font: inherit; color: inherit; }

hr {
  border: 0;
  height: 2px;
  background: var(--cream-line);
  margin: var(--sp-8) 0;
}

/* Focus ring — visible on every interactive element. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Purple surfaces: swap to the light ring (8:1 on --purple-700). */
.site-footer :focus-visible,
.band--purple :focus-visible {
  outline-color: var(--focus-ring-light);
}

/* The orange→gold CTA gradient: the blue ring drops to 2.2:1 there, the deep
   purple ink holds 5.7:1 on orange and 7.5:1 on gold. */
.band--cta :focus-visible { outline-color: var(--purple-900); }

::selection { background: var(--gold-soft); color: var(--purple-900); }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-2);
  z-index: var(--z-skip);
  transform: translateY(-160%);
  background: var(--purple-700);
  color: var(--cream);
  font-family: var(--font-head);
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-mid);
}
.skip-link:focus { transform: translateY(0); color: var(--cream); }

/* Scroll progress bar (top of viewport) */
.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--orange), var(--gold), var(--lime));
  z-index: var(--z-skip);
  pointer-events: none;
}

/* ============ 03. TYPOGRAPHY HELPERS ======================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--orange-text);
  margin: 0 0 var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 1.9rem;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--orange-deep);
  flex: none;
}
.eyebrow--plain::before { display: none; }
.eyebrow--onpurple { color: var(--gold-soft); }
.eyebrow--onpurple::before { background: var(--gold); }

.lead {
  font-size: var(--step-1);
  line-height: var(--lh-loose);
  color: var(--ink);
}

.text-muted { color: var(--purple-500); }

.tagline {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-2);
  color: var(--orange-text);
  line-height: 1.35;
}

/* Highlighted inline phrase (soft marker) */
.mark {
  background: linear-gradient(180deg, transparent 58%, var(--gold-soft) 58%);
  padding: 0 0.12em;
  font-weight: 600;
  color: var(--purple-900);
}

/* ============ 04. LAYOUT =================================== */
.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.container--wide { width: min(100% - (var(--gutter) * 2), var(--container-wide)); }
.container--narrow { width: min(100% - (var(--gutter) * 2), var(--container-narrow)); }

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--lg { padding-block: var(--section-y-lg); }
.section--tight { padding-block: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); }
.section--alt { background: var(--cream-deep); }
.section--paper {
  background: var(--white);
  border-block: var(--bw) solid var(--cream-line);
}

/* Section header block */
.section-head { max-width: 46ch; margin-bottom: var(--sp-7); position: relative; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--wide { max-width: 62ch; }
.section-head p { color: var(--ink); font-size: var(--step-1); line-height: var(--lh-loose); }

/* Generic grids */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr 1fr; }

/* Two-column editorial split */
.split {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3.6vw, 4rem);
  align-items: center;
}
.split--top { align-items: start; }

/* Prose block with comfortable measure */
.prose { max-width: 68ch; }
.prose p { font-size: var(--step-0); line-height: var(--lh-loose); }
.prose p.lead { font-size: var(--step-1); }

/* ============ 05. DECORATIVE BLOBS ========================= */
.blob-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-blob);
}
.blob {
  position: absolute;
  display: block;
  will-change: transform;
}
.blob--sky    { color: var(--sky); }
.blob--lime   { color: var(--lime); }
.blob--gold   { color: var(--gold); }
.blob--orange { color: var(--orange); }
.blob svg { display: block; width: 100%; height: auto; }
.blob path, .blob ellipse, .blob circle { fill: currentColor; }

/* opacity + placement presets */
.blob--a { width: 22rem; top: -6rem; left: -8rem; opacity: 0.22; }
.blob--b { width: 16rem; bottom: -5rem; right: -5rem; opacity: 0.18; }
.blob--c { width: 12rem; top: 12%; right: 6%; opacity: 0.14; }
.blob--d { width: 26rem; bottom: -9rem; left: 34%; opacity: 0.12; }

.section > .container,
.hero > .container,
.band > .container { position: relative; z-index: var(--z-base); }

/* ============ 06. BUTTONS ================================== */
.btn {
  --btn-bg: var(--orange);
  --btn-fg: var(--purple-900);
  --btn-bd: var(--orange-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  border: var(--bw) solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background-color var(--t-fast), color var(--t-fast);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); color: var(--btn-fg); }
.btn:active { transform: translateY(2px); box-shadow: var(--shadow-btn-active); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--secondary {
  --btn-bg: var(--white);
  --btn-fg: var(--purple-700);
  --btn-bd: var(--purple-700);
}
.btn--onpurple {
  --btn-bg: var(--cream);
  --btn-fg: var(--purple-900);
  --btn-bd: var(--cream);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--purple-700);
  --btn-bd: transparent;
  box-shadow: none;
  padding-inline: 0.75rem;
  text-decoration: underline;
  text-decoration-color: var(--orange);
}
.btn--ghost:hover { box-shadow: none; color: var(--orange-text); }
.btn--lg { min-height: 58px; padding: 1.05rem 2.2rem; font-size: var(--step-1); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* ============ 07. HEADER & NAVIGATION ====================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--veil-cream);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--bw) solid transparent;
  transition: box-shadow var(--t-mid), border-color var(--t-mid), background-color var(--t-mid);
}
.site-header.is-stuck {
  border-bottom-color: var(--cream-line);
  box-shadow: var(--shadow-header);
}
.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: 0.6rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--purple-700);
  flex: none;
}
.brand img { width: 44px; height: 44px; border-radius: var(--r-pill); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--purple-700);
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--purple-500);
  font-weight: 600;
  white-space: nowrap;
}
/* Three segments only fit once the header has room. Below that the line would
   wrap under the logo and unbalance the whole header, so the founding year —
   which the hero and footer both state anyway — drops off. */
.brand-since { display: none; }
@media (min-width: 1200px) {
  .brand-since { display: inline; }
}

.nav-desktop { display: none; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list li { margin: 0; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--purple-700);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nav-link:hover { background: var(--purple-100); color: var(--purple-900); }
.nav-link[aria-current="page"] {
  background: var(--purple-700);
  color: var(--cream);
}
.nav-link[aria-current="page"]:hover { background: var(--purple-900); color: var(--cream); }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }
.header-cta { display: none; }

/* Hamburger */
.nav-toggle {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--bw) solid var(--purple-700);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--purple-700);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast), background-color var(--t-fast);
}
.nav-toggle:active { transform: translateY(2px); }
.nav-toggle .bars { display: block; width: 22px; }
.nav-toggle .bars span {
  display: block;
  height: 3px;
  border-radius: var(--r-pill);
  background: currentColor;
  transition: transform var(--t-mid), opacity var(--t-fast);
}
.nav-toggle .bars span + span { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile panel */
.nav-panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: var(--z-panel);
  background: var(--white);
  border-bottom: var(--bw-thick) solid var(--purple-700);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: var(--sp-4) var(--gutter) var(--sp-6);
  transform-origin: top center;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--t-mid), opacity var(--t-mid), visibility var(--t-mid);
}
.nav-panel.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.nav-panel ul { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.nav-panel li { margin: 0; border-bottom: 2px solid var(--cream-line); }
.nav-panel li:last-child { border-bottom: 0; }
.nav-panel a.nav-link {
  display: flex;
  width: 100%;
  min-height: 54px;
  border-radius: var(--r-sm);
  font-size: var(--step-0);
  letter-spacing: 0.05em;
}

/* ============ 08. HERO ===================================== */
.hero {
  position: relative;
  padding-block: clamp(2rem, 1.2rem + 3.4vw, 4.5rem) clamp(3rem, 2rem + 4vw, 6rem);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  gap: clamp(2rem, 1.2rem + 4vw, 3.75rem);
  align-items: center;
}
.hero-copy { position: relative; z-index: var(--z-base); }
.hero-title {
  font-size: var(--step-5);
  margin-bottom: var(--sp-2);
  color: var(--purple-700);
}
.hero-title-sub {
  display: block;
  font-family: var(--font-head);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  color: var(--purple-500);
  margin-top: var(--sp-2);
}
.hero-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-2);
  color: var(--purple-500);
  margin: 0 0 var(--sp-4);
}
.hero-tagline { margin-bottom: var(--sp-6); }
.hero .btn-row { margin-bottom: var(--sp-7); }

/* Hero visual: logo badge on blobs + floating photo chips */
.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 20rem;
  order: -1;
}
/* The badge sits ABOVE the photo chips (z-index 3 vs 2) so the chips read as
   tucked in behind it. Any other order lets a chip cover the logo wordmark. */
.logo-badge {
  position: relative;
  z-index: 3;
  width: min(62%, 15rem);
  border: 6px solid var(--cream);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lift);
}
.hero-blobs { position: absolute; inset: -12% -6%; z-index: var(--z-blob); }
.hero-blobs .blob--1 { width: 60%; top: 2%; left: -2%; opacity: 0.5; color: var(--sky); }
.hero-blobs .blob--2 { width: 46%; bottom: 4%; right: 2%; opacity: 0.42; color: var(--lime); }
.hero-blobs .blob--3 { width: 38%; top: -2%; right: 12%; opacity: 0.4; color: var(--gold); }
.hero-blobs .blob--4 { width: 34%; bottom: 0; left: 12%; opacity: 0.33; color: var(--orange); }

.photo-chip {
  position: absolute;
  z-index: 2;
  width: 7rem;
  border: 5px solid var(--cream);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  background: var(--white);
  transition: transform var(--t-mid);
}
.photo-chip img { border-radius: calc(var(--r-md) - 6px); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-chip--1 { left: 0; bottom: 0.25rem; rotate: -5deg; }
.photo-chip--2 { right: 0; top: 0.25rem; rotate: 5deg; }
.photo-chip:hover { transform: translateY(-5px) scale(1.02); }

/* ---- page-hero: compact variant for the 4 inner pages ---- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.8rem + 3.4vw, 4.75rem) clamp(2.25rem, 1.6rem + 3vw, 4rem);
  background: var(--cream-deep);
  border-bottom: var(--bw) solid var(--cream-line);
}
.page-hero__inner { position: relative; z-index: var(--z-base); max-width: 58ch; }
.page-hero h1 { font-size: var(--step-4); margin-bottom: var(--sp-4); }
.page-hero p { font-size: var(--step-1); line-height: var(--lh-loose); color: var(--ink); }
.page-hero--split .page-hero__inner { max-width: none; }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  font-size: var(--step--1);
  color: var(--purple-500);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb li + li::before { content: "›"; color: var(--purple-500); }

/* ============ 08b. MARQUEE (languages ticker) ==============
   Sits directly under the hero as a warm orange band. The track holds the
   item list twice and translates -50%, so the loop is seamless; the second
   copy is aria-hidden so a screen reader hears the languages once. */
.marquee {
  position: relative;
  overflow: hidden;
  background: var(--orange);
  color: var(--purple-900);
  border-block: 2px solid var(--orange-deep);
  padding-block: 0.75rem;
}
.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: marquee-scroll 46s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex: none; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  padding-inline: clamp(1.25rem, 3vw, 2.75rem);
  font-family: var(--font-head);
  font-size: clamp(0.85rem, 0.72rem + 0.55vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
/* Round dot separator — echoes the clay language chips further down. */
.marquee-item::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--purple-900);
  flex: none;
}
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ============ 09. STAT STRIP =============================== */
.stat-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  padding: 0;
  margin: 0;
  list-style: none;
}
.stat {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: var(--bw) solid var(--cream-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--purple-900);
  line-height: 1.25;
}
.stat svg { width: 1.35rem; height: 1.35rem; flex: none; }
.stat--sky svg    { color: var(--sky-deep); }
.stat--lime svg   { color: var(--lime-deep); }
.stat--orange svg { color: var(--orange-text); }
.stat--purple svg { color: var(--purple-700); }

/* ============ 10. CARDS ==================================== */
.card {
  background: var(--white);
  border: var(--bw) solid var(--cream-line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  box-shadow: var(--shadow-card);
}

/* Clay card — the signature component */
.clay-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--white);
  border: var(--bw-thick) solid var(--purple-700);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.clay-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.clay-card h3 { margin: 0; }
.clay-card p { margin: 0; }
.clay-card__icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  border: var(--bw) solid var(--purple-700);
  background: var(--sky-soft);
  color: var(--purple-900);
}
.clay-card__icon svg { width: 30px; height: 30px; }
.clay-card--sky    .clay-card__icon { background: var(--sky-soft); }
.clay-card--orange .clay-card__icon { background: var(--orange-soft); }
.clay-card--lime   .clay-card__icon { background: var(--lime-soft); }
.clay-card__num {
  position: absolute;
  top: -0.9rem;
  right: 1.25rem;
  min-width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  padding: 0 0.5rem;
  border-radius: var(--r-pill);
  border: var(--bw) solid var(--purple-700);
  background: var(--cream);
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--purple-700);
  font-size: var(--step--1);
}

/* Callout — highlight strip inside editorial sections */
.callout {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--white);
  border: var(--bw) solid var(--cream-line);
  border-left: 6px solid var(--orange);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-xs);
}
.callout__icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--orange-soft);
  color: var(--orange-text);
}
.callout__icon svg { width: 22px; height: 22px; }
.callout h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.callout p { margin: 0; font-size: var(--step-0); }
.callout--lime { border-left-color: var(--lime); }
.callout--lime .callout__icon { background: var(--lime-soft); color: var(--lime-deep); }
.callout--sky { border-left-color: var(--sky); }
.callout--sky .callout__icon { background: var(--sky-soft); color: var(--sky-deep); }

/* Offer card — gold ticket look */
.offer-card {
  position: relative;
  background: var(--white);
  border: var(--bw-thick) dashed var(--gold);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 1.1rem + 2vw, 2.75rem);
  box-shadow: var(--shadow-card);
}
.offer-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  color: var(--purple-900);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-4);
}
.offer-card__badge svg { width: 1.1em; height: 1.1em; }

/* Pill list (inline tag chips) */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pill-list li {
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  border: var(--bw) solid var(--purple-100);
  background: var(--white);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--purple-700);
}

/* ============ 11. CHECK LIST =============================== */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.check-list__item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  margin: 0;
  padding: var(--sp-5);
  background: var(--white);
  border: var(--bw) solid var(--cream-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-mid), border-color var(--t-mid);
}
.check-list__item:hover { transform: translateX(3px); border-color: var(--lime); }
.check-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--lime-soft);
  border: var(--bw) solid var(--lime);
  color: var(--purple-900);
}
.check-icon svg { width: 20px; height: 20px; }
.check-list__item p { margin: 0; }

/* Alternating offset for a hand-placed rhythm (desktop only) */
@media (min-width: 62em) {
  .check-list--alt .check-list__item:nth-child(even) { margin-left: clamp(1rem, 4vw, 4.5rem); }
  .check-list--alt .check-list__item:nth-child(odd)  { margin-right: clamp(1rem, 4vw, 4.5rem); }
}

/* Icon list without card chrome */
.icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.icon-list li { display: flex; gap: var(--sp-3); align-items: flex-start; margin: 0; }
.icon-list svg { width: 24px; height: 24px; flex: none; color: var(--orange-text); margin-top: 2px; }
.icon-list--onpurple svg { color: var(--gold-soft); }

/* ============ 12. FIGURES & PHOTO FRAMES =================== */
.figure {
  margin: 0;
  position: relative;
  border: 6px solid var(--cream);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.figure:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.figure img { width: 100%; border-radius: calc(var(--r-lg) - 8px); }
.figure figcaption {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  font-size: var(--step--1);
  color: var(--purple-500);
}
.figure--tilt-l { rotate: -1.5deg; }
.figure--tilt-r { rotate: 1.5deg; }
.figure--ratio img { aspect-ratio: 4 / 3; object-fit: cover; }
.figure--tall img { aspect-ratio: 3 / 4; object-fit: cover; }

/* Two stacked photos in a collage */
.photo-stack { position: relative; display: grid; gap: var(--sp-4); }
@media (min-width: 48em) {
  .photo-stack { grid-template-columns: 1fr 1fr; align-items: end; }
  .photo-stack .figure:first-child { grid-column: 1 / span 2; }
  .photo-stack .figure:nth-child(2) {
    grid-column: 2;
    margin-top: calc(var(--sp-6) * -1);
    position: relative;
    z-index: var(--z-base);
  }
}

/* ============ 13. FEATURE BANDS ============================ */
.band {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y-lg);
}
.band--purple {
  background: var(--purple-700);
  color: var(--cream);
}
.band--purple h2, .band--purple h3 { color: var(--cream); }
.band--purple strong, .band--purple b { color: var(--gold-soft); }
.band--purple a { color: var(--gold-soft); }
/* ...but a button in here is not body prose: the rule above would paint gold ink
   on the cream --btn-bg and drop it to about 1.7:1. Buttons keep their own fg. */
.band--purple .btn { color: var(--btn-fg); }
.band--purple p { color: var(--cream); }
.band--purple .blob { mix-blend-mode: screen; opacity: 0.16; }

.band--cta {
  background: linear-gradient(135deg, var(--orange) 0%, var(--gold) 62%, var(--gold-soft) 100%);
  color: var(--purple-900);
  text-align: center;
  padding-block: var(--section-y);
}
.band--cta h2 { color: var(--purple-900); font-size: var(--step-3); }
.band--cta p { color: var(--purple-900); }
.band--cta .gift {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: var(--sp-4) 0 var(--sp-6);
  padding: 0.6rem 1.3rem;
  border-radius: var(--r-pill);
  background: var(--cream);
  border: var(--bw) solid var(--purple-900);
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--purple-900);
  box-shadow: var(--shadow-xs);
}
.band--cta .gift svg { width: 1.25rem; height: 1.25rem; }

/* Guarantee seal */
.seal {
  width: clamp(7.5rem, 6rem + 8vw, 12rem);
  height: auto;
  color: var(--gold);
  filter: drop-shadow(0 10px 20px var(--shade-deep));
}
.band__layout { display: grid; gap: var(--sp-7); align-items: center; }

/* Inline stat / proof row inside a band */
.proof-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
}
.proof-row li {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--veil-white);
  border: 1px solid var(--veil-white-2);
}
.proof-row b {
  display: block;
  font-family: var(--font-head);
  font-size: var(--step-2);
  color: var(--gold-soft);
  margin-bottom: 0.15rem;
}

/* ============ 14. LANGUAGES STRIP ========================== */
.lang-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.lang-chip {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}
.lang-chip__disc {
  width: clamp(5.5rem, 4rem + 6vw, 7.5rem);
  height: clamp(5.5rem, 4rem + 6vw, 7.5rem);
  border-radius: var(--r-pill);
  border: var(--bw-thick) solid var(--white);
  background: var(--white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.lang-chip__disc img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-pill); }
.lang-chip:hover .lang-chip__disc { transform: translateY(-6px) scale(1.05); box-shadow: var(--shadow-lift); }
/* The chip is a link to its language page; the anchor has to carry the column
   layout, since it is now the flex child rather than the two spans. */
.lang-chip__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
}
.lang-chip__link:hover .lang-chip__name,
.lang-chip__link:focus-visible .lang-chip__name { text-decoration: underline; }
.lang-chip__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--purple-700);
}

/* ============ 15. FOOTER =================================== */
.site-footer {
  position: relative;
  background: var(--purple-700);
  color: var(--cream);
  padding-block: var(--sp-9) var(--sp-6);
  overflow: hidden;
}
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--gold-soft); }
.footer-grid {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: var(--sp-7);
}
.footer-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.footer-brand img { width: 56px; height: 56px; }
.footer-brand .brand-name { color: var(--cream); font-size: var(--step-1); }
.footer-brand .brand-sub { color: var(--purple-100); }
.footer-about { color: var(--purple-100); max-width: 34ch; }

.footer-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 var(--sp-4);
}
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin: 0; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.footer-nav a:hover { text-decoration: underline; }

.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.footer-contact li { display: flex; gap: var(--sp-3); align-items: flex-start; margin: 0; }
.footer-contact svg { width: 20px; height: 20px; flex: none; color: var(--gold-soft); margin-top: 4px; }
.footer-contact a { min-height: 44px; display: inline-flex; align-items: center; }

.footer-bottom {
  position: relative;
  z-index: var(--z-base);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--veil-white-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  align-items: center;
  font-size: var(--step--1);
  color: var(--purple-100);
}
.footer-watermark {
  position: absolute;
  right: -3rem;
  bottom: -3rem;
  width: 16rem;
  opacity: 0.08;
  z-index: var(--z-blob);
  pointer-events: none;
}

/* ============ 16. SCROLL REVEAL ============================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Gentle idle float for hero decorations */
@keyframes clay-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.float-slow { animation: clay-float 7s ease-in-out infinite; }
.float-slower { animation: clay-float 9s ease-in-out infinite; }

/* ============ 17. UTILITIES ================================ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: var(--sp-5); }
.stack-sm > * + * { margin-top: var(--sp-3); }
.no-scroll { overflow: hidden; }

/* ============ 18. BREAKPOINTS ============================== */
@media (min-width: 34em) {
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-chip { width: 9rem; }
  .logo-badge { width: min(66%, 18rem); }
}

@media (min-width: 48em) {  /* 768px */
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lang-strip { grid-template-columns: repeat(3, 1fr); }
  .proof-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band__layout { grid-template-columns: auto 1fr; gap: var(--sp-8); }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-left { grid-template-columns: 1.25fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.25fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.4fr; gap: var(--sp-8); }
  .page-hero h1 { font-size: var(--step-5); }
}

@media (min-width: 62em) {  /* 992px */
  :root { --header-h: 78px; }
  .nav-desktop { display: block; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .nav-panel { display: none; }
  .brand img { width: 52px; height: 52px; }
  .brand-name { font-size: 1.14rem; }

  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lang-strip { grid-template-columns: repeat(5, 1fr); }
  .proof-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .hero-grid { grid-template-columns: 1.08fr 1fr; }
  .hero-visual { order: 0; min-height: 28rem; }
  .logo-badge { width: min(74%, 20rem); }
  .photo-chip { width: 11rem; }
  .photo-chip--1 { left: -1.5rem; bottom: 1.25rem; }
  .photo-chip--2 { right: -1.5rem; top: 1.75rem; }
  .split--reverse > *:first-child { order: 2; }
}

@media (min-width: 80em) {  /* 1280px */
  .hero-grid { gap: 5rem; }
  .logo-badge { width: min(84%, 24rem); }
}

/* ============ 19. REDUCED MOTION / PRINT =================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .float-slow, .float-slower { animation: none; }
  /* Stop the ticker and let it be read by scrolling instead of by animation. */
  .marquee-track { animation: none; transform: none; }
  .marquee { overflow-x: auto; }
  .btn:hover, .clay-card:hover, .figure:hover,
  .lang-chip:hover .lang-chip__disc, .photo-chip:hover { transform: none; }
  .scroll-progress { display: none; }
}

@media print {
  .site-header, .nav-panel, .scroll-progress, .blob-field, .hero-blobs { display: none !important; }
  body { background: var(--white); }
}

/* =============================================================
   ===== Inner pages =====
   Added for agglika.html / alles-glosses.html / draseis.html /
   epikoinonia.html. Nothing above this line is modified.
   -------------------------------------------------------------
   20. Inner-page tokens (form / status colours)
   21. Anchor rail (sticky section nav — agglika.html)
   22. Language panels (alles-glosses.html)
   23. Event blocks (draseis.html)
   24. Contact details (epikoinonia.html)
   25. Forms (epikoinonia.html)
   26. Map embed
   27. Inner-page helpers
   ============================================================= */

/* ============ 20. INNER-PAGE TOKENS ========================= */
:root {
  --error:        #C0392B;   /* field border on error */
  --error-text:   #8E1F19;   /* 6.3:1 on white / cream */
  --error-soft:   #FDEEEC;
  --success:      #2E6B32;
  --success-text: #1F4D22;   /* 8.1:1 on --success-soft */
  --success-soft: #EAF4EA;
  --field-ring:   rgba(70, 43, 106, 0.14);
}

/* ============ 21. ANCHOR RAIL =============================== */
.anchor-rail {
  position: sticky;
  top: calc(var(--header-real) + 2px);
  z-index: 55;
  background: var(--veil-cream);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--bw) solid var(--cream-line);
}
.anchor-rail__list {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--purple-100) transparent;
}
.anchor-rail__list::-webkit-scrollbar { height: 6px; }
.anchor-rail__list::-webkit-scrollbar-thumb {
  background: var(--purple-100);
  border-radius: var(--r-pill);
}
.anchor-rail li { margin: 0; flex: none; }
.anchor-rail a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 1rem;
  border: var(--bw) solid var(--cream-line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--purple-700);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step--1);
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.anchor-rail a:hover { border-color: var(--orange); color: var(--orange-text); }
.anchor-rail a.is-current {
  background: var(--purple-700);
  border-color: var(--purple-700);
  color: var(--cream);
}
.anchor-target { scroll-margin-top: calc(var(--sticky-h) + 1.5rem); }

/* ============ 22. LANGUAGE PANELS ========================== */
.lang-panel {
  position: relative;
  background: var(--white);
  border: var(--bw-thick) solid var(--purple-700);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.lang-panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.lang-panel + .lang-panel { margin-top: var(--sp-7); }
.lang-panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.lang-panel__flag {
  width: clamp(64px, 8vw, 84px);
  height: clamp(64px, 8vw, 84px);
  flex: none;
  border-radius: var(--r-pill);
  border: var(--bw-thick) solid var(--purple-100);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.lang-panel__flag img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-pill); }
.lang-panel h2 { margin: 0; font-size: var(--step-3); }
.lang-panel__kicker {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--purple-500);
  margin-bottom: 0.15rem;
}
.lang-panel--sky    .lang-panel__flag { border-color: var(--sky); }
.lang-panel--gold   .lang-panel__flag { border-color: var(--gold); }
.lang-panel--orange .lang-panel__flag { border-color: var(--orange); }
.lang-panel--lime   .lang-panel__flag { border-color: var(--lime); }

/* ============ 23. EVENT BLOCKS (ΔΡΑΣΕΙΣ) =================== */
.event + .event { margin-top: var(--section-y); }
.event__num {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-pill);
  border: var(--bw) solid var(--purple-900);
  background: var(--purple-700);
  color: var(--cream);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step--1);
}
.event .figure { max-width: 30rem; margin-inline: auto; }
.figure--square img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ============ 24. CONTACT DETAILS ========================== */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.contact-list li { display: flex; gap: var(--sp-4); align-items: flex-start; margin: 0; }
.contact-list__icon {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--purple-100);
  border: var(--bw) solid var(--purple-100);
  color: var(--purple-700);
}
.contact-list__icon svg { width: 22px; height: 22px; }
.contact-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--purple-500);
}
.contact-value {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--purple-900);
  line-height: 1.45;
}
.contact-value a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--purple-700);
}
.contact-value a:hover { color: var(--orange-text); }

/* ============ 25. FORMS ==================================== */
.form { display: grid; gap: var(--sp-5); }
.form-grid { display: grid; gap: var(--sp-5); }

.field { display: grid; gap: 0.4rem; }
.field > label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--purple-900);
}
.field .req { color: var(--orange-text); font-weight: 700; }
.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--ink);
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 1rem;
  background: var(--white);
  border: var(--bw) solid var(--field-border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height: 9.5rem; resize: vertical; }
.field input:hover,
.field textarea:hover { border-color: var(--purple-500); }
.field input:focus,
.field textarea:focus {
  border-color: var(--purple-700);
  box-shadow: 0 0 0 4px var(--field-ring);
  outline: none;
}
.field input:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.field__hint { font-size: var(--step--2); color: var(--purple-500); margin: 0; }
.field__error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--error-text);
}
.field.has-error .field__error { display: flex; }
.field.has-error input,
.field.has-error textarea { border-color: var(--error); background: var(--error-soft); }

.checkbox-row {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding-block: 0.35rem;
}
.checkbox-row input[type="checkbox"] {
  flex: none;
  width: 26px;
  height: 26px;
  min-height: 26px;
  margin: 0.6rem 0 0;
  accent-color: var(--purple-700);
  cursor: pointer;
}
.checkbox-row label {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  line-height: var(--lh-body);
  color: var(--ink);
  cursor: pointer;
}
.field.has-error .checkbox-row label { color: var(--error-text); }

.form-status {
  display: none;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  border: var(--bw) solid var(--success);
  border-radius: var(--r-md);
  background: var(--success-soft);
  color: var(--success-text);
  font-weight: 600;
}
.form-status.is-visible { display: flex; }
.form-status svg { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.form-status p { margin: 0; color: inherit; }
.form-status--error {
  border-color: var(--error);
  background: var(--error-soft);
  color: var(--error-text);
}

/* ============ 26. MAP ====================================== */
.map-frame {
  border: 6px solid var(--cream);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: clamp(17rem, 13rem + 18vw, 26rem);
  border: 0;
}
.map-actions { margin-top: var(--sp-4); }
.contact-grid { display: grid; gap: var(--sp-7); align-items: start; }

/* ============ 27. INNER-PAGE HELPERS ======================= */
.lang-strip--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check-icon--gold { background: var(--gold-soft); border-color: var(--gold); }
.check-icon--sky  { background: var(--sky-soft);  border-color: var(--sky); }
.prose li::marker { color: var(--orange); }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose ul li, .prose ol li { line-height: var(--lh-loose); }
.num-list { counter-reset: numlist; list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-3); }
.num-list li {
  counter-increment: numlist;
  position: relative;
  margin: 0;
  padding-left: 2.6rem;
  line-height: var(--lh-body);
}
.num-list li::before {
  content: counter(numlist);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: var(--bw) solid var(--purple-100);
  background: var(--purple-100);
  color: var(--purple-700);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step--2);
}
.subhead {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--purple-500);
  margin: 0 0 var(--sp-4);
}
.card--tool { display: grid; gap: var(--sp-3); }
.card--tool .card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  border: var(--bw) solid var(--purple-700);
  background: var(--sky-soft);
  color: var(--purple-900);
}
.card--tool .card__icon svg { width: 26px; height: 26px; }
.card--tool h3 { margin: 0; font-size: var(--step-1); }
.card--tool p { margin: 0; }

@media (min-width: 48em) {
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .icon-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .check-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1fr 1.15fr; align-items: start; gap: var(--sp-8); }
}

/* =============================================================
   ===== 28. QA + POLISH PASS =====
   Final audit fixes and craft details, layered on top of the
   sections above. Nothing here introduces a new raw colour —
   every value resolves to a token in one of the :root blocks.
   ============================================================= */

/* ---- 28.1 Typography rhythm --------------------------------
   Greek display copy sets long: without balancing, big headings
   collapse into 4-line ladders with one orphan word.           */
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

/* Grid and flex children carry min-width:auto, i.e. they refuse to shrink
   below their min-content width. One long Greek compound set at display size
   (ΧΡΙΣΤΟΥΓΕΝΝΙΑΤΙΚΑ, ΕΠΙΚΟΙΝΩΝΗΣΤΕ) was therefore able to widen its grid
   track past a 320px viewport. Let the tracks shrink, and let a word that
   genuinely cannot fit break rather than push the page sideways. */
.split > *,
.grid > *,
.hero-grid > *,
.band__layout > *,
.contact-grid > *,
.footer-grid > *,
.photo-stack > *,
.form-grid > *,
.btn-row > * { min-width: 0; }
/* .btn-row is normally a <div>. When the buttons are a genuine list of links a
   <ul> is the honest markup, but then it arrives with discs and a padding-inline
   the flex row was never built to absorb. */
.btn-row--list { list-style: none; margin: 0; padding: 0; justify-content: center; }

h1, h2, h3, h4, p, li, figcaption,
.contact-value, .footer-contact span, .breadcrumb { overflow-wrap: break-word; }

.section-head { max-width: 48ch; }
/* Centred heads need a WIDER measure, not a narrower one: at --step-4 a
   36-character Greek heading needs ~560px to land on two balanced lines. */
.section-head--center { max-width: 62ch; }
.section-head--center.section-head--wide { max-width: 72ch; }
.section-head--center p { margin-inline: auto; max-width: 58ch; }

/* Cards carry their own, quieter heading scale — a card <h2> at
   the page-title size shouted over the section it lives in. */
.card > h2,
.lang-panel h2 { font-size: var(--step-2); }
.card > h2 { margin-bottom: var(--sp-3); }

/* Inner-page hero: give the eyebrow and H1 room to sit on one line. */
.page-hero__inner { max-width: 64ch; }
.page-hero .eyebrow { max-width: none; }

/* ---- 28.2 Anchoring ---------------------------------------- */
[id] { scroll-margin-top: calc(var(--header-real) + 1.5rem); }
.anchor-target { scroll-margin-top: calc(var(--sticky-h) + 1.5rem); }

/* ---- 28.3 Tap targets -------------------------------------- */
.footer-bottom a,
.breadcrumb a,
.map-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-bottom { padding-bottom: var(--sp-2); }

/* The native 26px checkbox was a 26x26 target. Custom-drawn so the hit area
   is a full 44x44 while the visible clay box stays 26px. */
.checkbox-row { min-height: 44px; align-items: center; }
.checkbox-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
}
.checkbox-row input[type="checkbox"]::before,
.checkbox-row input[type="checkbox"]::after { content: ""; grid-area: 1 / 1; }
.checkbox-row input[type="checkbox"]::before {
  width: 26px;
  height: 26px;
  border: var(--bw) solid var(--field-border);
  border-radius: var(--r-xs);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.checkbox-row input[type="checkbox"]::after {
  width: 7px;
  height: 13px;
  margin-top: -3px;
  border: solid var(--cream);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--t-fast);
}
.checkbox-row input[type="checkbox"]:hover::before { border-color: var(--purple-500); }
.checkbox-row input[type="checkbox"]:checked::before {
  background: var(--purple-700);
  border-color: var(--purple-700);
}
.checkbox-row input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.field.has-error .checkbox-row input[type="checkbox"]::before {
  border-color: var(--error);
  background: var(--error-soft);
}
.checkbox-row label { flex: 1; }

/* ---- 28.4 Hero composition --------------------------------- */
.hero-visual { padding-block: var(--sp-4); }
.photo-chip { background: var(--cream); }
.photo-chip figcaption { display: none; }

/* A soft halo ring behind the badge so the tucked-in chips read
   as layered depth rather than as clipping. */
.hero-visual::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: min(88%, 26rem);
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: radial-gradient(circle at 50% 45%, var(--veil-cream) 38%, transparent 68%);
  pointer-events: none;
}

/* ---- 28.5 Photo framing ------------------------------------
   Two of the supplied photos carry legacy blue-wave branding at one
   edge. A 2:1 crop anchored to the bottom (banner) and a 4:3 crop
   anchored right push that branding outside the frame. */
.figure--banner img { aspect-ratio: 2 / 1; object-fit: cover; object-position: center bottom; }
.figure--focus-right img { object-position: right center; }

/* ---- 28.6 Component states --------------------------------- */
.stat { transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid); }
.stat:hover { transform: translateY(-3px); border-color: var(--purple-100); box-shadow: var(--shadow-card); }

.nav-link { position: relative; }
.nav-link:not([aria-current="page"])::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.35rem;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--orange-deep);
  transform: scaleX(0);
  transition: transform var(--t-fast);
}
.nav-link:not([aria-current="page"]):hover::after { transform: scaleX(1); }
.nav-panel .nav-link::after { display: none; }

/* The hero stat strip lives in a half-width column on desktop; four columns
   there squeezed every label onto two or three lines. Two columns keep the
   four claims readable at every width above the phone breakpoint. */
.stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { min-height: 60px; }

.footer-nav a { position: relative; }
.footer-nav a:hover { color: var(--gold-soft); }
.pill-list li { transition: transform var(--t-fast), border-color var(--t-fast); }
.pill-list li:hover { transform: translateY(-2px); border-color: var(--gold); }

.contact-list li { transition: transform var(--t-mid); }
.contact-list li:hover .contact-list__icon { background: var(--gold-soft); border-color: var(--gold); }
.contact-list__icon { transition: background-color var(--t-fast), border-color var(--t-fast); }

/* Long all-caps Greek badges must be allowed to wrap inside their pill. */
.offer-card__badge {
  flex-wrap: wrap;
  max-width: 100%;
  line-height: 1.35;
  text-align: left;
}

/* ---- 28.7 Bands -------------------------------------------- */
.band__layout { align-items: center; }
.band--purple .proof-row li { transition: background-color var(--t-mid); }
.band--purple .proof-row li:hover { background: var(--veil-white-2); }
.band--cta .container { position: relative; z-index: var(--z-base); }
.band--cta p:last-child { margin-bottom: 0; }

/* ---- 28.7a Header density, very narrow phones ---------------
   .brand was flex:none, so below ~360px the brand block pushed the
   hamburger past the viewport edge and the page scrolled sideways. */
.brand { flex: 0 1 auto; min-width: 0; }
.brand-text { min-width: 0; }
.brand-name { overflow-wrap: break-word; }
@media (max-width: 23.4em) {   /* < 375px */
  .brand img { width: 38px; height: 38px; }
  .brand-name { font-size: 0.92rem; }
  .brand-sub { font-size: 0.64rem; }
}

/* ---- 28.7b Header density, 992px–1279px --------------------
   The desktop nav and the CTA appear together at 62em. Between
   there and 80em the row is tight enough that «Κλείστε ραντεβού»
   wrapped to two lines and pushed the header from 78px to 92px,
   which in turn slid the sticky anchor rail underneath it.      */
@media (min-width: 62em) and (max-width: 79.99em) {
  .nav-link { padding-inline: 0.58rem; font-size: 0.78rem; letter-spacing: 0.04em; }
  .header-cta { padding-inline: 1.05rem; font-size: var(--step--1); }
  .brand img { width: 46px; height: 46px; }
  .brand-name { font-size: 1.02rem; }
}
@media (min-width: 62em) and (max-width: 66em) {
  .nav-list { gap: 0; }
  .nav-link { padding-inline: 0.42rem; font-size: 0.74rem; letter-spacing: 0.03em; }
  .header-cta { padding-inline: 0.85rem; font-size: 0.82rem; }
  .header-inner { gap: var(--sp-3); }
}

/* ---- 28.8 Anchor rail (agglika.html) ------------------------
   The chip rail scrolls horizontally on narrow screens with no visual cue
   that more sections exist. main.js adds .is-scrollable when the list really
   does overflow, and only then do we paint the fade. */
.anchor-rail .container { position: relative; }
.anchor-rail__list { scroll-behavior: smooth; }
.anchor-rail.is-scrollable .container::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 2.75rem;
  background: linear-gradient(90deg, transparent, var(--cream));
  pointer-events: none;
}

/* Long centred intro copy is hard to read on a phone; centre the heading,
   set the body flush left. */
@media (max-width: 47.99em) {
  .prose.center p { text-align: left; }
}

/* Keep short, indivisible runs (a time range, a phone number) on one line so
   they do not leave a two-character orphan. Never applied to headings. */
.nowrap { white-space: nowrap; }

/* Equal-height contact cards: with align-items:start the shorter details card
   left a ragged gap beside the form. */
@media (min-width: 48em) {
  .contact-grid { align-items: stretch; }
}

/* ---- 28.9 Forms -------------------------------------------- */
.field input::placeholder,
.field textarea::placeholder { color: var(--purple-500); opacity: 1; }
.form-status { scroll-margin-top: calc(var(--header-real) + 2rem); }
.form-status:focus-visible { outline-offset: 4px; }

/* ---- 28.10 Reduced motion top-ups -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .stat:hover,
  .pill-list li:hover,
  .lang-panel:hover,
  .check-list__item:hover { transform: none; }
  .anchor-rail__list { scroll-behavior: auto; }
  .nav-link:not([aria-current="page"])::after { transition: none; }
}

/* ============ 26. Contact form: honeypot + pending state ===
   The honeypot must be invisible to people but reachable by a bot parsing the
   DOM, so it is moved off-screen rather than display:none'd. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status--pending { opacity: 0.85; }
.form-status--pending svg { animation: status-pulse 1.1s ease-in-out infinite; }
@keyframes status-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* ============ 27. 404 page ================================= */
.nf-more-label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-500);
  margin-bottom: 0.75rem;
}
.nf-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.nf-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-weight: 600;
  color: var(--purple-700);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur, 200ms) var(--ease-out);
}
.nf-links a::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--orange);
  flex: none;
}
.nf-links a:hover { border-bottom-color: var(--orange); }

/* ============ 28. FAQ ACCORDION ============================= */
.faq-list {
  margin-top: var(--sp-7);
  display: grid;
  gap: var(--sp-3);
}
.faq-item {
  background: var(--white);
  border: var(--bw) solid var(--cream-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.faq-item[open] { border-color: var(--purple-100); }

.faq-item > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: var(--lh-head);
  color: var(--purple-700);
  cursor: pointer;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--purple-100); }
.faq-item > summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

/* Chevron drawn in CSS so the markup stays free of per-item SVG. */
.faq-item > summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 0.62rem;
  height: 0.62rem;
  border-right: var(--bw-thick) solid var(--orange);
  border-bottom: var(--bw-thick) solid var(--orange);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-mid);
}
.faq-item[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.faq-answer {
  padding: 0 var(--sp-6) var(--sp-6);
  border-top: var(--bw) solid var(--cream-line);
  padding-top: var(--sp-5);
}
.faq-answer p { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq-item > summary::after { transition: none; }
}