/* ============================================================
   Aga Detlaf Counselling — design system
   Ported from the original single-page build (css/style.css) in
   M2-T1, once real page templates exist to consume it. Component
   styles below are a straight port except: no .placeholder/
   .placeholder-tag (superseded by the .tbc convention, see
   CLAUDE.md "Placeholder convention"), and no testimonial/
   carousel styles anywhere — no testimonials ship, ever (G7).
   Mobile nav collapse is gated behind .has-js (see assets/js/
   main.js) so the nav stays reachable with JS disabled (G8).
============================================================ */

:root {
  --moss-900: #2f4238;
  --moss-700: #46604f;
  --sage-500: #7c9885;
  --sage-300: #a9c0ac;
  --sage-200: #dbe6dd;
  --bg-tint: #f3f5ef;
  --cream: #fffdf9;
  --white: #ffffff;
  --clay-500: #c97b5d;
  --clay-600: #ab5f42;
  --ink: #2b2e2a;
  --ink-soft: #55584f;
  --amber-bg: #fbeed9;
  --amber-border: #e0a94c;
  --amber-text: #8a5a12;

  --font-display: "Fraunces", serif;
  --font-body: "Karla", sans-serif;
  --font-accent: "Caveat", cursive;

  --container: 1160px;
  --radius-lg: 28px;
  --radius-md: 16px;
  --shadow-soft: 0 20px 45px -25px rgba(47, 66, 56, 0.35);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--moss-900); margin: 0 0 0.5em; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1.08; font-weight: 500; }
h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.15; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.1em; color: var(--ink-soft); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }

/* Skip link — visible on keyboard focus only */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--moss-900);
  color: var(--white);
  padding: 0.75em 1.2em;
  z-index: 999;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--clay-500); outline-offset: 3px; }

header[role="banner"], footer[role="contentinfo"] {
  padding: 1.5rem 0;
}
header[role="banner"] nav ul, footer[role="contentinfo"] nav ul {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.lang-switch { color: var(--clay-600); font-weight: 700; }
.lang-switch-note { font-size: 0.85rem; color: var(--ink-soft); }

/* Non-production TBC placeholders — G1/§Placeholder convention */
.tbc {
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  color: var(--amber-text);
  padding: 0.1em 0.5em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ---------- Layout helpers ---------- */
.section { padding: 6rem 1.5rem; max-width: var(--container); margin: 0 auto; }
.section.alt { background: var(--bg-tint); max-width: none; padding-left: 0; padding-right: 0; }
.section.alt > * { max-width: var(--container); margin-left: auto; margin-right: auto; }
.center-text { text-align: center; max-width: 620px; margin-left: auto; margin-right: auto; }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clay-600);
  margin: 0 0 0.9em;
}
.eyebrow-mark { display: inline-flex; align-items: center; gap: 0.55em; }
.eyebrow-mark::before {
  content: "";
  width: 9px; height: 9px;
  border: 2px solid var(--clay-500);
  border-radius: 50%;
  display: inline-block;
}
.eyebrow-mark.center { justify-content: center; width: 100%; }
.section-head { max-width: 680px; margin: 0 auto 3.2rem; text-align: center; }

/* ---------- Breadcrumb (M2-T2) ---------- */
/* top margin clears .site-header, which is position:fixed and up to ~127px
   tall (2-line nav on desktop, or 2-line brand text on narrow mobile) — the
   breadcrumb sits directly in <main> with nothing else providing clearance,
   unlike .section's own 6rem top padding elsewhere on the same pages. Was
   rendering fully hidden underneath the header before this fix (found while
   building the blog post breadcrumb, M4-T8; pre-existing on every other
   page carrying a breadcrumb, not new). */
.breadcrumb { margin: 8.5rem 0 1.5rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; font-size: 0.85rem; color: var(--ink-soft); }
.breadcrumb li { display: flex; align-items: center; gap: 0.4em; }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--sage-300); }
.breadcrumb a { color: var(--moss-700); font-weight: 600; }
.breadcrumb a:hover { color: var(--clay-600); }
.breadcrumb [aria-current="page"] { color: var(--ink-soft); font-weight: 600; }

/* ---------- Crisis-support notice (M2-T3) ---------- */
.crisis-notice {
  background: var(--sage-200);
  border-left: 3px solid var(--moss-700);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.1em 1.4em;
  margin: 0 0 1.5rem;
  color: var(--moss-900);
}
.crisis-notice p { color: inherit; margin: 0 0 0.4em; }
.crisis-notice p:last-child { margin-bottom: 0; }
/* clay-600 on sage-200 was only 3.68:1 (needs 4.5:1) — real WCAG AA failure
   caught by the a11y test suite. moss-700 clears it at ~5.4:1; bold+underline
   already distinguish links from the surrounding body text. */
.crisis-notice a { font-weight: 700; text-decoration: underline; color: var(--moss-700); }

/* ---------- CTA block (M2-T3) ---------- */
.cta-block {
  background: var(--moss-900);
  border-radius: var(--radius-lg);
  padding: 3rem 2.4rem;
  text-align: center;
  color: var(--cream);
}
.cta-block h2 { color: var(--white); }
.cta-block p { color: rgba(255, 253, 249, 0.82); max-width: 52ch; margin-left: auto; margin-right: auto; }
.cta-block .btn-clay { margin-top: 0.6rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  padding: 0.95em 1.9em; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
/* clay-500 + white text was only 3.24:1 (needs 4.5:1) — a11y regression
   found in M2-T1 testing, first time a .btn-clay actually rendered.
   clay-600 as the resting state fixes it; hover goes one step darker. */
.btn-clay { background: var(--clay-600); color: #fff; box-shadow: var(--shadow-soft); }
.btn-clay:hover { background: #8a4a32; transform: translateY(-2px); }
.btn-ghost { background: transparent; border-color: var(--moss-700); color: var(--moss-700); }
.btn-ghost:hover { background: var(--moss-700); color: #fff; }

/* ============================================================
   Header / Nav
============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: box-shadow 0.35s ease, padding 0.35s ease;
  padding: 1.1rem 0;
  /* Solid/readable by default — not every page has a dark hero to sit over,
     so the header can't rely on one for contrast (a11y regression found in
     M2-T1 testing: white nav text over the plain cream body on hero-less
     stub pages failed WCAG contrast). A page with its own full-bleed dark
     hero can add a lighter/transparent variant later if wanted; until then
     this is the one safe default. */
  background: rgba(255, 253, 249, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px -20px rgba(47, 66, 56, 0.25);
}
.site-header.scrolled {
  box-shadow: 0 8px 30px -20px rgba(47,66,56,0.4);
  padding: 0.8rem 0;
}
.header-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.brand {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--moss-900);
}
.main-nav { display: flex; gap: 1.9rem; }
.main-nav a {
  font-size: 0.92rem; font-weight: 600; color: var(--moss-700);
  transition: color 0.35s ease; position: relative; padding: 4px 0;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--clay-500); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.main-nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; }
.header-cta { flex-shrink: 0; }
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 0;
}
.nav-toggle span { width: 26px; height: 2px; background: var(--moss-900); transition: 0.3s; }

/* ============================================================
   Hero
============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 2rem;
  padding: 7rem 1.5rem 5rem;
  max-width: var(--container);
  margin: 0 auto;
  background:
    radial-gradient(ellipse 900px 600px at 85% 15%, rgba(124,152,133,0.25), transparent),
    var(--moss-900);
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--moss-900);
  width: 100vw; left: 50%; transform: translateX(-50%);
}
.hero-content { color: var(--cream); position: relative; z-index: 2; }
.hero-content .eyebrow { color: var(--sage-300); }
.hero-content h1 { color: var(--white); }
.hero-lede { color: rgba(255,253,249,0.82); font-size: 1.08rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero .btn-ghost { border-color: rgba(255,255,255,0.5); color: var(--white); }
.hero .btn-ghost:hover { background: var(--white); color: var(--moss-900); }

.hero-media { position: relative; }
.hero-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.hero-blob {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--sage-500); opacity: 0.35;
  animation: float 10s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.02); }
}
.hero-photo {
  position: relative; z-index: 2;
  width: 78%; aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 35px 70px -25px rgba(0,0,0,0.55);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Organic dividers
============================================================ */
.divider { line-height: 0; background: var(--white); }
.divider svg { width: 100%; height: 60px; display: block; }
.divider svg path { fill: var(--bg-tint); }
.divider-flip { background: var(--bg-tint); }
.divider-flip svg path { fill: var(--white); }
.divider-hero { background: var(--moss-900); }
.divider-hero svg path { fill: var(--white); }

/* ============================================================
   Split sections (About / Journey)
============================================================ */
.split {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4rem; align-items: start;
}
.split-tight { margin-top: 2.6rem; }
.split.reverse { grid-template-columns: 1.1fr 0.9fr; }
.split.reverse .split-media { order: 2; }
.split.reverse .split-copy { order: 1; }

.about-photo {
  aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.approach-photo {
  aspect-ratio: 3/2; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.approach-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.steps-list { margin: 1.6rem 0; padding-left: 1.3em; }
.steps-list li { margin-bottom: 0.9rem; }
.steps-list li:last-child { margin-bottom: 0; }

.faq-list { list-style: disc; margin: 1rem 0 1.4rem; padding-left: 1.4em; }
.faq-list li { margin-bottom: 0.5rem; }
.faq-list li:last-child { margin-bottom: 0; }

/* ---------- Journey (credentials) ---------- */
.journey { text-align: center; }
.credential-list {
  list-style: none; margin: 2.6rem auto 3rem; padding: 0; max-width: 780px;
  display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 1.1rem;
}
.credential-list li {
  display: flex; align-items: center; gap: 0.8rem; text-align: left;
  background: var(--white); border-radius: var(--radius-md);
  padding: 1.1rem 1.4rem; box-shadow: var(--shadow-soft);
}
.credential-list svg { width: 26px; height: 26px; color: var(--clay-500); flex-shrink: 0; }
.credential-list span { font-weight: 600; color: var(--moss-900); font-size: 0.95rem; }

.credential-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  background: var(--sage-200); border-radius: var(--radius-md);
  padding: 1.3rem 1.5rem; margin: 1.6rem 0;
}
.credential-logo { width: 100%; max-width: 240px; height: auto; display: block; border-radius: 6px; }
.credential-card p { margin: 0; color: var(--moss-900); font-size: 0.95rem; }

/* ============================================================
   Approach cards + quote
============================================================ */
.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 1rem;
}
.approach-card {
  background: var(--white); border-radius: var(--radius-md);
  padding: 2.2rem 1.9rem; box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.approach-card:hover { transform: translateY(-6px); }
.card-icon { width: 52px; height: 52px; color: var(--clay-500); margin-bottom: 1.1rem; }
.approach-card p { margin: 0; font-size: 0.95rem; }

.pull-quote {
  margin: 4rem auto 0; max-width: 720px; text-align: center; padding: 0 1rem;
}
.pull-quote p {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--moss-900); line-height: 1.4;
}
.pull-quote cite {
  font-family: var(--font-accent); font-style: normal; font-size: 1.4rem; color: var(--clay-600);
}

/* ============================================================
   Session information
============================================================ */
.session-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 1rem;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft);
}
.session-col { background: var(--white); padding: 2.6rem 2.2rem; }
.session-col h3 { margin-bottom: 0.6em; }
.session-col-highlight {
  background: var(--moss-900); transform: scale(1.04); position: relative; z-index: 1;
  box-shadow: 0 25px 50px -20px rgba(47,66,56,0.55);
}
.session-col-highlight h3, .session-col-highlight p:not(.tbc) { color: var(--white); }

/* ============================================================
   Booking embed (agadetlaf-booking, iframe at /book/embed)
============================================================ */
.booking-embed-section { margin-top: 3.5rem; }
.booking-embed-section h2, .contact-form-section h2 { margin-bottom: 1rem; }
.contact-form-section { margin-top: 3.5rem; }
.booking-embed {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  background: var(--white);
}
.booking-embed iframe {
  display: block;
  width: 100%;
  height: clamp(640px, 80vh, 820px);
  border: 0;
}
.booking-embed-note {
  margin-top: 0.8rem;
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* ============================================================
   Contact
============================================================ */
.contact { position: relative; overflow: hidden; }
.contact-blob {
  position: absolute; top: -10%; right: -15%; width: 55%; color: var(--sage-200);
  z-index: 0; opacity: 0.7;
}
.contact-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: start;
}
.contact-list { margin: 1.6rem 0; display: flex; flex-direction: column; gap: 0.9rem; }
.contact-list li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.98rem; }
.contact-list li svg { width: 20px; height: 20px; color: var(--clay-500); flex-shrink: 0; }
.contact-list a:hover { color: var(--clay-600); }
.social-links { display: flex; gap: 0.8rem; }
.social-links a {
  width: 42px; height: 42px; border-radius: 50%; background: var(--white);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft);
  color: var(--moss-700); position: relative;
}
.social-links svg { width: 20px; height: 20px; }

.contact-form {
  background: var(--white); border-radius: var(--radius-lg); padding: 2.4rem;
  box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 1.2rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
label { font-size: 0.85rem; font-weight: 700; color: var(--moss-900); }
input, textarea {
  font-family: var(--font-body); font-size: 0.96rem; padding: 0.8em 1em;
  border: 1.5px solid var(--sage-200); border-radius: 10px; background: var(--bg-tint);
  color: var(--ink); resize: vertical; transition: border-color 0.2s ease;
}
input:focus, textarea:focus { border-color: var(--clay-500); outline: none; }
.contact-form .btn { margin-top: 0.4rem; align-self: flex-start; }

/* Radio/checkbox inputs must not inherit the text-input box treatment above. */
input[type="radio"], input[type="checkbox"] {
  width: 1.1em; height: 1.1em; padding: 0; border: none; background: none;
  accent-color: var(--clay-500); flex-shrink: 0;
}
fieldset.field { border: none; margin: 0; padding: 0; }
fieldset.field legend { font-size: 0.85rem; font-weight: 700; color: var(--moss-900); padding: 0; margin-bottom: 0.4rem; }
.radio-group { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.radio-group label {
  display: flex; align-items: center; gap: 0.5em;
  font-size: 0.95rem; font-weight: 400; color: var(--ink);
}
.field-hint { font-size: 0.82rem; color: var(--ink-soft); margin: -0.6rem 0 0; }
.consent-field { display: flex; align-items: flex-start; gap: 0.7em; }
.consent-field label { font-size: 0.88rem; font-weight: 400; color: var(--ink-soft); }
.consent-field input { margin-top: 0.25em; }
.form-notice {
  background: var(--bg-tint); border-radius: var(--radius-md);
  padding: 0.9em 1.2em; font-size: 0.88rem; margin: 0;
}
.form-status { border-radius: var(--radius-md); padding: 1em 1.2em; font-size: 0.92rem; }
.form-status.form-error { background: #fdecea; border: 1px solid #e5a8a0; color: #7a2e22; }
.form-status.form-success { background: var(--sage-200); color: var(--moss-900); text-align: center; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Blog index (M4-T4)
============================================================ */
.blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 1rem;
}
.blog-card {
  background: var(--white); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-soft); display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover { transform: translateY(-6px); }
.blog-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.blog-card-body { padding: 1.8rem 1.9rem 2rem; }
.blog-card-category {
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 700;
  color: var(--clay-600); margin: 0 0 0.6em;
}
.blog-card-body h2 { font-size: 1.2rem; margin-bottom: 0.3em; }
.blog-card-body h2 a:hover { color: var(--clay-600); }
.blog-card-date { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 0.8em; }
.blog-card-more { font-weight: 700; color: var(--clay-600); font-size: 0.92rem; }
.blog-card-more:hover { color: var(--clay-500); }

/* ============================================================
   Blog post (M4-T1/T2/T6/T8)
============================================================ */
.post { max-width: 760px; }
.post-hero {
  width: 100%; max-height: 420px; object-fit: cover;
  border-radius: var(--radius-lg); margin-bottom: 2rem;
}
.post-category { margin-bottom: 0.5em; }
.post-meta { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 1.8rem; }
.post-language-notice {
  background: var(--bg-tint); border-radius: var(--radius-md); padding: 0.9em 1.2em;
  font-size: 0.9rem; font-style: italic;
}
.post-body ul, .post-body ol { list-style: revert; padding-left: 1.4em; margin: 0 0 1.1em; }
.post-body li { color: var(--ink-soft); margin-bottom: 0.4em; }
.post-body blockquote {
  margin: 1.8rem 0; padding: 0.2rem 1.6rem; border-left: 3px solid var(--clay-500);
  font-style: italic; color: var(--moss-900);
}
.post-body h2 { margin-top: 1.8em; }
.post-body img { border-radius: var(--radius-md); margin: 1.5rem 0; }
.post-tags {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2rem 0 0; padding: 0;
}
.post-tags li {
  background: var(--sage-200); color: var(--moss-900); font-size: 0.82rem;
  padding: 0.3em 0.9em; border-radius: 999px;
}
.post-related {
  margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--sage-200);
  font-weight: 700;
}
.post-related a:hover { color: var(--clay-600); }

/* ============================================================
   Footer
============================================================ */
.site-footer { background: var(--moss-900); color: rgba(255,253,249,0.75); }
/* The global `p { color: var(--ink-soft) }` rule further up beats inherited
   color regardless of specificity, so footer paragraphs need an explicit
   override or they render dark-on-dark (a11y regression found in M2-T1
   testing). */
.site-footer p { color: rgba(255,253,249,0.75); }
.footer-inner {
  max-width: var(--container); margin: 0 auto; padding: 4.5rem 1.5rem 3rem;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem;
}
.footer-brand .brand { color: var(--white); font-size: 1.4rem; margin-bottom: 0.6rem; display: block; }
.footer-brand p { color: rgba(255,253,249,0.65); max-width: 32ch; }
.credential-badge.small {
  display: inline-flex; align-items: center; margin-top: 0.9rem;
  background: var(--white); border-radius: 8px; padding: 8px 10px;
}
.credential-badge.small img { height: 44px; width: auto; display: block; }
.footer-col h4 { color: var(--white); font-size: 1rem; margin-bottom: 1rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; }
.footer-col a:hover { color: var(--sage-300); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1); padding: 1.4rem 1.5rem;
  text-align: center; font-size: 0.82rem; color: rgba(255,253,249,0.5);
}
.footer-bottom p + p { margin-top: 0.4rem; }
.footer-bottom a { color: rgba(255,253,249,0.65); text-decoration: underline; }
.footer-bottom a:hover { color: var(--sage-300); }

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 980px) {
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-media, .split.reverse .split-copy { order: initial; }
  .card-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .session-grid { grid-template-columns: 1fr; border-radius: var(--radius-lg); }
  .session-col-highlight { transform: none; }
  .contact-inner { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; text-align: left; padding-top: 8.5rem; }
  .hero-media { order: -1; }
  .hero-art { min-height: 320px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  /* No-JS default: nav stays inline and wraps, fully reachable without a toggle (G8). */
  .header-inner { flex-wrap: wrap; }
  .main-nav { width: 100%; flex-wrap: wrap; justify-content: center; gap: 1rem 1.6rem; }
  .nav-toggle { display: none; }

  /* With JS: collapse the nav behind a toggle for a cleaner mobile header. */
  .has-js .header-inner { flex-wrap: nowrap; }
  .has-js .main-nav {
    /* height, not bottom:0 — .site-header's backdrop-filter makes it a fixed-
       position containing block for this panel in some browsers, so bottom:0
       was resolving against the header's own short box instead of the
       viewport, leaving most of the panel's background missing and the hero
       content showing through underneath the menu. vh isn't containing-block-
       relative, so it stays correct regardless. */
    position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw, 320px);
    background: var(--cream); justify-content: flex-start; overflow-y: auto;
    padding: 6.5rem 2rem 2rem; gap: 1.6rem;
    transform: translateX(100%); transition: transform 0.35s ease;
    box-shadow: -20px 0 40px rgba(0,0,0,0.12);
  }
  /* The nav element itself only has one flex child (the ul) — the actual
     menu items need their own column rule, or they wrap as a ragged row
     instead of a vertical list. */
  .has-js .main-nav ul { flex-direction: column; flex-wrap: nowrap; gap: 1.6rem; }
  .has-js .main-nav.is-open { transform: translateX(0); }
  .has-js .main-nav a { color: var(--moss-900) !important; font-size: 1.05rem; }
  /* Unlike the nav links, the language switch stays visible in the main header
     bar next to the toggle on mobile too (Aga's feedback 2026-09-18: it was
     only reachable after opening the off-canvas menu, unlike the desktop
     header where it's always visible). */
  .has-js .nav-toggle { display: flex; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .field-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .section { padding: 4rem 1.3rem; }
  .credential-list { grid-template-columns: 1fr; }
}