/* uat.training
   Desktop values come from the 1440px mock-ups, phone values from 02-home-mobile.html. */

/* ---------- Fonts: stored in assets/fonts, nothing loads from outside the site ----------
   Same files and settings the mock-ups get from Google Fonts. Each font comes in two parts:
   "latin" (English and Western European letters) and "latin-ext" (Polish, Czech, Turkish…),
   and the browser only downloads a part when a page uses its letters.
   The serif files include optical sizing: large headings automatically get a finer cut. */

@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/source-serif-4-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/source-serif-4-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; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/source-serif-4-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/source-serif-4-italic-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; }
/* Source Sans 3: one file holds both weights (400 and 600) */
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/source-sans-3-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/source-sans-3-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; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/source-sans-3-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/source-sans-3-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; }

/* ---------- Colours, fonts and sizes (design brief, section 4) ---------- */

:root {
  --cream: #f2f0eb;        /* page background: must stay exact, the illustrations blend into it */
  --stone: #e6e4dc;        /* alternate section background */
  --sage: #dde3d6;         /* cards, key-facts box, closing band, secondary buttons */
  --sage-hover: #d1d9c9;
  --green: #2f4a35;        /* primary buttons, card titles */
  --green-dark: #1f3324;
  --ink: #1f2620;          /* body text, page headings */
  --muted: #5b665e;        /* secondary text, captions */
  --line: #b7c4ad;         /* thin rules, quote bars, outlines */
  --line-soft: #d3d8cc;    /* rules between list items */
  --indigo: #3b4a6b;       /* links, small labels, taglines: use sparingly */
  --indigo-dark: #27324a;
  --tag-bg: #e3e6ee;       /* date pills */
  --logo-green: #79a46a;   /* the UAT mark only */
  --signal: #3a76f0;
  --signal-hover: #2f62cc;

  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Source Sans 3', system-ui, sans-serif;

  --max: 1440px;
  /* Sizes grow smoothly from the phone mock-up (390px wide) to the desktop mock-ups (1440px) */
  --gutter: clamp(24px, calc(6.857vw - 2.74px), 96px);          /* side margins: 24 -> 96 */
  --gutter-header: clamp(20px, calc(7.238vw - 8.23px), 96px);   /* header row: 20 -> 96 */
  --section-pad: clamp(52px, calc(3.429vw + 38.63px), 88px);    /* section top/bottom: 52 -> 88 */
  --h1: clamp(40px, calc(3.048vw + 28.11px), 72px);
  --h2: clamp(32px, calc(1.333vw + 26.8px), 46px);
  --tagline: clamp(22px, calc(0.762vw + 19.03px), 30px);
  --lead: clamp(18px, calc(0.381vw + 16.51px), 22px);
  --label: clamp(13px, calc(0.19vw + 12.26px), 15px);
}

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

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
}

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

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--ink); }
h1 { font-size: var(--h1); line-height: 1.05; letter-spacing: -0.015em; }
h2 { font-size: var(--h2); line-height: 1.1; }
h3 { font-size: 26px; line-height: 1.2; }
p { margin: 0; }

a { color: var(--indigo); text-underline-offset: 3px; }
a:hover { color: var(--indigo-dark); }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, iframe:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }

.site { overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

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

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 18px; border-radius: 999px;
  background: var(--green); color: #fff; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Text styles ---------- */

/* Small capitals label above a heading, e.g. "LEVEL 1" */
.label {
  font-size: var(--label); font-weight: 600; line-height: 1.4;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--indigo);
}
.tagline { font-family: var(--serif); font-style: italic; font-size: var(--tagline); line-height: 1.3; color: var(--indigo); }
.lead { font-size: var(--lead); line-height: 1.6; max-width: 30em; }
.muted { color: var(--muted); }

/* ---------- Sections ---------- */

.section { padding-block: var(--section-pad); }
.section--stone { background: var(--stone); }
.section--sage { background: var(--sage); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  min-height: 48px; padding: 0 26px;
  border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: 18px; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color .15s ease;
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); color: #fff; }
.btn--light { background: var(--sage); color: var(--green); }
.btn--light:hover { background: var(--sage-hover); color: var(--green-dark); }
/* On sage surfaces a sage pill is invisible: use cream there (as in the mock-ups' closing band) */
.section--sage .btn--light, .card:not(.card--cream, .card--outline) .btn--light { background: var(--cream); }
.section--sage .btn--light:hover, .card:not(.card--cream, .card--outline) .btn--light:hover { background: #fff; }
.btn--lg { min-height: 52px; padding: 0 30px; font-size: 19px; }
.btn--sm { min-height: 44px; padding: 0 22px; font-size: 17px; }

/* ---------- Cards and boxes ---------- */

.card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 30px 32px;
  border-radius: 26px;
  background: var(--sage); color: var(--ink);
  text-decoration: none; overflow: hidden;
}
.card--cream { background: var(--cream); }
.card--outline { background: none; border: 1.5px solid var(--line); border-radius: 20px; padding: 20px 22px; }
.card h3 { color: var(--green); }

/* Key facts: label and value in two columns */
.keyfacts {
  margin: 0; padding: 26px 28px;
  border-radius: 22px; background: var(--sage);
  display: grid; grid-template-columns: 120px 1fr; gap: 12px 20px;
  font-size: 17px; line-height: 1.45;
}
.keyfacts dt { color: var(--muted); }
.keyfacts dd { margin: 0; }

/* Quote: thin line on the left, serif italic, credit below */
.quote { margin: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--line); }
.quote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.5; }
.quote figcaption { margin-top: 10px; font-size: 15px; color: var(--muted); }

/* Date pill, used in every list of dates */
.date-tag {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 16px; border-radius: 999px;
  background: var(--tag-bg); color: var(--indigo);
  font-size: 16px; font-weight: 600; white-space: nowrap;
}

@media (max-width: 699px) {
  .btn { font-size: 17px; }
  .btn--lg { padding: 0 28px; font-size: 18px; }
  .keyfacts { grid-template-columns: 1fr; gap: 2px; padding: 22px 24px; }
  .keyfacts dd { margin-bottom: 12px; }
  .keyfacts dd:last-child { margin-bottom: 0; }
  .date-tag { min-height: 32px; padding: 0 14px; font-size: 15px; }
  .card { padding: 22px 24px 26px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Header ---------- */

.mainbar {
  height: 104px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* The UAT mark, then UNIFIED / ACUPUNCTURE / THEORY stacked on three lines */
.logo { display: flex; align-items: center; gap: 16px; color: var(--green); text-decoration: none; flex-shrink: 0; }
.logo:hover { color: var(--green); }
.logo__mark { width: 62px; height: 62px; display: block; flex-shrink: 0; }
.logo__text {
  display: flex; flex-direction: column;
  font-size: 17px; font-weight: 600; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase;
}

.mainbar__right { display: flex; align-items: center; gap: 32px; }

.nav { display: flex; align-items: center; gap: 32px; font-size: 18px; white-space: nowrap; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover { color: var(--green); }
.nav a[aria-current] { color: var(--green); font-weight: 600; }

.btn--header { white-space: nowrap; }

/* Round open/close button, shown instead of the menu on narrower screens */
.menu-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 22px;
  background: var(--sage); color: var(--ink);
  align-items: center; justify-content: center;
  cursor: pointer;
}
.menu-toggle:hover { background: var(--sage-hover); }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--cream); }
.mobile-menu ul { list-style: none; margin: 0; padding-block: 8px 20px; }
.mobile-menu li + li { border-top: 1px solid var(--line-soft); }
.mobile-menu a:not(.btn) {
  display: flex; align-items: center; min-height: 52px;
  font-size: 20px; color: var(--ink); text-decoration: none;
}
.mobile-menu a[aria-current] { color: var(--green); font-weight: 600; }
.mobile-menu li.mobile-menu__action { border-top: 0; padding-top: 16px; }

/* Smaller laptops (1100 to 1279px wide): tighter spacing, so the full menu still fits on one line */
@media (min-width: 1100px) and (max-width: 1279px) {
  /* gaps grow smoothly from 16px at 1100 to the full 32px at 1280 */
  .mainbar__right { gap: clamp(16px, calc(9vw - 83px), 32px); }
  .nav { gap: clamp(16px, calc(9vw - 83px), 32px); font-size: 17px; }
  .btn--header { padding: 0 22px; font-size: 17px; }
  .logo { gap: 14px; }
  .logo__mark { width: 56px; height: 56px; }
  .logo__text { font-size: 15px; }
}

/* Below this width the full menu no longer fits on one line (keep in step with site.js) */
@media (max-width: 1099px) {
  .nav, .btn--header { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (min-width: 1100px) {
  /* with the full menu, the header uses the same side margin as the page content below it */
  .wrap--header { padding-inline: var(--gutter); }
  .mobile-menu { display: none; }
}

@media (max-width: 699px) {
  .mainbar { height: 76px; }
  .logo { gap: 12px; }
  .logo__mark { width: 46px; height: 46px; }
  .logo__text { font-size: 13px; letter-spacing: 0.15em; }
}

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

/* Bottom padding keeps the footer above the two stacked floating buttons, Signal over
   WhatsApp (32px + 60px + 12px + 60px + gap), so no link can end up behind them */
.site-footer { padding: 40px 0 184px; font-size: 16px; color: var(--muted); }
.site-footer__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
/* newsletter block above the footer line */
.site-footer__newsletter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.site-footer__newsletter p { margin: 0; font-size: 18px; color: var(--ink, #23302a); }
.site-footer__newsletter .label { margin-right: 10px; }
.site-footer__newsletter .btn { text-decoration: none; }
.site-footer__signup { display: flex; gap: 10px; flex: 1 1 340px; max-width: 460px; }
.site-footer__signup input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 16px; border: 1px solid #7f8d77; /* darker than --line: field outlines need 3:1 against white */ border-radius: 999px; background: #fff; font: inherit; font-size: 17px; color: var(--ink); }
.site-footer__signup input:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.site-footer__signup .btn { flex: none; }
/* read by screen readers, not shown */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.newsletter__form { max-width: 720px; }
.newsletter__note { max-width: 720px; margin-top: 18px; font-size: 15px; color: var(--muted); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: flex-end; }
.site-footer a { text-decoration: underline; }

/* ---------- Floating buttons: WhatsApp, with Signal directly above it (as on acupuncture-lausanne.ch) ---------- */

/* --fab-lift raises the upper button by one button height + a 12px gap */
.fab {
  position: fixed; right: 32px; bottom: calc(32px + var(--fab-lift, 0px)); z-index: 40;
  width: 60px; height: 60px; border-radius: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff;
  box-shadow: 0 4px 16px rgba(31, 38, 32, .18);
  transition: background-color .15s ease;
}
.fab:hover { background: var(--green-dark); color: #fff; }
.fab--signal { background: var(--signal); }
.fab--signal:hover { background: var(--signal-hover); }
.fab--upper { --fab-lift: 72px; }

@media (max-width: 899px) {
  .site-footer { padding-top: 36px; }
  .site-footer__inner { flex-direction: column-reverse; gap: 14px; }
  .site-footer__links { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 699px) {
  .fab { right: 16px; bottom: calc(16px + var(--fab-lift, 0px)); width: 56px; height: 56px; border-radius: 28px; }
  .fab svg { width: 28px; height: 28px; }
  .fab--upper { --fab-lift: 68px; }
  .site-footer { padding-bottom: 168px; }
}

/* ============================================================
   Shared pieces used by several pages
   ============================================================ */

/* Larger and smaller section headings (52px and 40px in the desktop mock-ups) */
:root {
  --h2-lg: clamp(34px, calc(1.714vw + 27.31px), 52px);
  --h2-sm: clamp(28px, calc(1.143vw + 23.54px), 40px);
  --text-lg: clamp(18px, calc(0.286vw + 16.89px), 21px);   /* longer paragraphs: 18 -> 21 */
}

/* Plain underlined link in dark green, as beside buttons in the mock-ups */
.textlink { font-size: 18px; color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
.textlink:hover { color: var(--green-dark); }
.textlink--sm { font-size: 17px; }

/* A light button that becomes a plain underlined link on phones (as in the phone mock-up) */
@media (max-width: 699px) {
  .btn--link-sm, .section--sage .btn--link-sm {
    min-height: 44px; padding: 0; border-radius: 0; background: none;
    font-size: 18px; font-weight: 400; color: var(--green);
    text-decoration: underline; text-underline-offset: 5px;
  }
  .btn--link-sm:hover, .section--sage .btn--link-sm:hover { background: none; color: var(--green-dark); }
}

/* ============================================================
   Home page
   ============================================================ */

/* ---------- Opening ---------- */

.hero__inner { min-height: 760px; display: flex; align-items: center; gap: 40px; }
.hero__text { flex: 1 1 680px; max-width: 680px; display: flex; flex-direction: column; }
.hero__text h1 { margin-top: 20px; }
.hero__text .tagline { margin-top: 22px; }
.hero__text .lead { margin-top: 32px; }
.hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
/* The painting is drawn larger than its column and runs 60px into the right margin */
.hero__image { flex: 0 1 560px; margin-right: -60px; }
.hero__image img { display: block; width: 100%; height: auto; }

@media (max-width: 1099px) {
  .hero__inner { min-height: 0; padding-block: 40px 56px; gap: 24px; }
  .hero__image { flex-basis: 420px; margin-right: -40px; }
}

@media (max-width: 899px) {
  .hero__inner { flex-direction: column; align-items: flex-start; padding-block: 24px 48px; gap: 0; }
  .hero__text { flex: none; max-width: 40em; }
  .hero__text h1 { margin-top: 14px; }
  .hero__text .tagline { margin-top: 16px; }
  .hero__text .lead { margin-top: 20px; }
  .hero__actions { margin-top: 24px; }
  /* On phones the painting sits under the text, slightly wider than the column */
  .hero__image { flex: none; align-self: center; width: min(380px, calc(100% + 38px)); margin: 22px 0 -10px; }
}

@media (max-width: 699px) {
  .hero__text h1 { line-height: 1.08; letter-spacing: -0.01em; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hero__image { align-self: flex-start; margin-left: -19px; }
}

/* ---------- "Choose where to begin": three course cards and the Level 2 line ---------- */

.begin__inner { padding-block: 40px 64px; display: flex; flex-direction: column; gap: 40px; }
.begin__head { display: flex; flex-direction: column; gap: 12px; }
.begin__head p { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 44em; }

.begin__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.course-card {
  display: flex; flex-direction: column; gap: 14px;
  min-height: 330px; padding: 34px 32px;
  border-radius: 26px; background: var(--sage); color: var(--ink);
  text-decoration: none;
  transition: background-color .15s ease;
}
.course-card:hover { background: var(--sage-hover); color: var(--ink); }
.course-card .icon { color: var(--green); flex-shrink: 0; }
.course-card__title { font-family: var(--serif); font-size: 32px; line-height: 1.1; color: var(--green); }
.course-card__text { font-size: 18px; line-height: 1.55; }
.course-card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.course-card__facts { font-size: 16px; color: var(--indigo); }
.course-card__more { font-size: 17px; color: var(--green); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }

.level2 {
  padding: 26px 32px; border-radius: 22px; border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.level2__text { display: flex; align-items: baseline; gap: 20px; font-size: 19px; line-height: 1.5; }
.level2__text .label { flex-shrink: 0; }
.level2__text strong { font-weight: 600; color: var(--green); }
.level2 .textlink { flex-shrink: 0; }

@media (max-width: 1099px) {
  .course-card { min-height: 0; padding: 28px 26px; }
  .course-card__title { font-size: 28px; }
  .course-card__foot { padding-top: 10px; }
}

@media (max-width: 899px) {
  .begin__cards { grid-template-columns: 1fr; gap: 22px; }
  .level2 { flex-direction: column; align-items: flex-start; gap: 8px; }
  .level2__text { flex-direction: column; gap: 8px; }
}

@media (max-width: 699px) {
  .begin__inner { padding-block: 8px 48px; gap: 22px; }
  .begin__head { gap: 8px; }
  .begin__head p { font-size: 17px; }
  /* phone mock-up: no drawing and no "Read more" on the cards */
  .course-card { gap: 8px; padding: 22px; border-radius: 22px; }
  .course-card .icon, .course-card__more { display: none; }
  .course-card__title { font-size: 26px; }
  .course-card__text { font-size: 17px; line-height: 1.5; }
  .course-card__foot { padding-top: 0; }
  .course-card__facts { font-size: 15px; }
  .level2 { padding: 20px 22px; border-radius: 20px; }
  .level2__text { font-size: 17px; }
}

/* ---------- Tracing Your Deep Song band ---------- */

.ci-band { background: var(--stone); }
.ci-band__inner { padding-block: 88px; display: flex; gap: 96px; align-items: center; }
/* The painting is drawn larger than its 400px column */
.ci-band__image { width: 400px; flex-shrink: 0; }
.ci-band__image img { display: block; width: 460px; max-width: none; height: auto; margin: -20px -30px; }
.ci-band__text { display: flex; flex-direction: column; gap: 22px; max-width: 34em; }
.ci-band__text h2 { font-size: var(--h2-lg); line-height: 1.05; }
.ci-band__text p { font-size: var(--text-lg); line-height: 1.65; }
.ci-band__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ci-band__facts li { display: flex; flex-direction: column; gap: 4px; }
.ci-band__facts b { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.3; color: var(--green); }
.ci-band__facts span { font-size: 16px; line-height: 1.45; color: var(--muted); }

@media (max-width: 1099px) {
  .ci-band__inner { padding-block: 64px; gap: 48px; }
  .ci-band__image { width: 300px; }
  .ci-band__image img { width: 340px; margin: -14px -20px; }
}

@media (max-width: 899px) {
  .ci-band__inner { flex-direction: column; align-items: flex-start; padding-block: 52px; gap: 20px; }
  .ci-band__image { width: 100%; }
  .ci-band__image img { width: min(342px, 100%); margin: 0 auto; }
  .ci-band__text { gap: 20px; max-width: 40em; }
}

@media (max-width: 699px) {
  .ci-band__text h2 { line-height: 1.08; }
  .ci-band__text p { line-height: 1.6; }
  /* phone mock-up: the three facts as plain lines, "9 weeks" in bold */
  .ci-band__facts { grid-template-columns: 1fr; gap: 10px; }
  .ci-band__facts li { display: block; font-size: 17px; }
  .ci-band__facts b { font-family: var(--sans); font-weight: 600; font-size: 17px; }
  .ci-band__facts span { font-size: 17px; color: var(--ink); }
  .ci-band__text .btn--lg { font-size: 18px; padding: 0 28px; }
}

/* ---------- "Coming up" ---------- */

.upcoming__inner {
  padding-block: 96px 88px;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px 24px;
}
.upcoming__inner > * { grid-column: 1 / -1; }
.upcoming__inner > h2 { grid-column: 1; }
.upcoming__inner > .upcoming__all { grid-column: 2; }
.upcoming__host { font-size: 17px; color: var(--muted); }

/* A list of dates: thin lines above, between and below the rows */
.date-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.date-list__empty { padding: 26px 0; border-bottom: 1px solid var(--line); font-size: 19px; color: var(--muted); }

/* One date per row: pill · course or place · level, language and price · Register.
   The columns are shared by all rows of a list, so they line up whatever the pill's length. */
ul.date-list { display: grid; grid-template-columns: minmax(220px, max-content) 1fr 260px 170px; column-gap: 32px; }
ul.date-list--wide { grid-template-columns: minmax(220px, max-content) 1fr 280px 200px; }
.date-row {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.date-row .date-tag { justify-self: start; }
.date-row__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.date-row__title { font-family: var(--serif); font-size: 26px; line-height: 1.2; color: var(--ink); }
a.date-row__title { align-self: flex-start; text-decoration: none; }
a.date-row__title:hover { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.date-row__place, .date-row__info { font-size: 17px; line-height: 1.45; color: var(--muted); }
/* the organiser's own title and the map links, under the place line */
.date-row__more { display: block; font-size: 15px; line-height: 1.45; color: var(--muted); }
.date-row__more a { color: inherit; }
.date-row__info { display: flex; flex-direction: column; gap: 2px; }
.date-row__price { color: var(--ink); }
.date-row__action, .date-row__full { justify-self: end; white-space: nowrap; }
.date-row__full {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px;
  border: 1.5px solid var(--line); border-radius: 999px;
  font-size: 18px; font-weight: 600; color: var(--muted);
}

@media (max-width: 1199px) {
  /* in-between widths: level, language and price move under the course name */
  ul.date-list, ul.date-list--wide { grid-template-columns: max-content 1fr auto; column-gap: 24px; }
  .date-row { row-gap: 6px; align-items: start; }
  .date-row .date-tag { grid-column: 1; grid-row: 1 / span 2; margin-top: 1px; }
  .date-row__main { grid-column: 2; grid-row: 1; }
  .date-row__info { grid-column: 2; grid-row: 2; }
  .date-row__action, .date-row__full { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}

@media (max-width: 699px) {
  /* phone mock-up: everything in one column, the button last */
  ul.date-list, ul.date-list--wide { display: block; }
  .date-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 0; }
  .date-row .date-tag { margin-top: 0; }
  .date-row__title { font-size: 23px; }
  .date-row__place, .date-row__info { font-size: 16px; }
  .date-row__action, .date-row__full { align-self: flex-start; min-height: 44px; padding: 0 22px; font-size: 17px; }
  .date-row__action { margin-top: 4px; }
  .date-row__full { margin-top: 4px; }
  /* phone mock-up: heading, the list, then "All dates" and the hosting line */
  .upcoming__inner { padding-block: 52px; display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .upcoming__inner > .upcoming__all { order: 3; align-self: flex-start; }
  .upcoming__host { order: 4; font-size: 16px; line-height: 1.5; }
  .date-list__empty { padding: 20px 0; font-size: 17px; }
}

/* ---------- Calendar page ---------- */

.page-hero__inner > h1:first-child { margin-top: 0; }

.cal__filters { padding-bottom: 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.cal__groups { display: flex; gap: 12px; flex-wrap: wrap; }
/* Filter pill: outlined, filled dark green for the one that is chosen */
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border: 1.5px solid var(--line); border-radius: 999px;
  font-size: 17px; font-weight: 600; color: var(--green); text-decoration: none;
}
.chip:hover { background: var(--sage); color: var(--green-dark); }
.chip--on, .chip--on:hover { background: var(--green); border-color: var(--green); color: #fff; }
.cal__country { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--muted); }
.cal__country select {
  min-width: 220px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  font: inherit; color: var(--ink);
}
.cal__country select:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
/* with JavaScript the list of countries applies itself, so its button is not needed */
.cal__country--auto .btn { display: none; }

.cal__months { padding-block: 24px 72px; display: flex; flex-direction: column; gap: 48px; }
.cal__month { display: flex; flex-direction: column; gap: 16px; }
.cal__month h2 { font-size: 32px; line-height: 1.2; color: var(--green); }

.cal-more__inner { padding-block: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cal-more__card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px; border-radius: 24px; background: var(--cream); }
.cal-more__card h2 { font-size: 28px; line-height: 1.2; color: var(--green); }
.cal-more__card p { line-height: 1.6; }
.cal-more__card a { text-decoration: underline; }

@media (max-width: 899px) {
  .cal-more__inner { grid-template-columns: 1fr; padding-block: 52px; gap: 16px; }
  .cal-more__card a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; }
}

@media (max-width: 699px) {
  .cal__filters { padding-bottom: 20px; }
  .cal__groups { gap: 8px; }
  .chip { padding: 0 16px; font-size: 16px; }
  .cal__country { width: 100%; }
  .cal__country select { flex: 1; min-width: 0; }
  .cal__months { padding-block: 16px 52px; gap: 36px; }
  .cal__month h2 { font-size: 26px; }
  .cal-more__card { padding: 24px; border-radius: 22px; }
  .cal-more__card h2 { font-size: 26px; }
}

/* ---------- "About Jonathan" ---------- */

.about-band { background: var(--stone); overflow: hidden; }
.about-band__inner { position: relative; z-index: 0; padding-block: 88px; display: flex; gap: 96px; align-items: center; }
/* Jonathan's eagle and snake, very faint, behind the text on the right */
.about-band__bg {
  position: absolute; right: -140px; top: -120px; z-index: -1;
  width: 760px; height: 760px; max-width: none; object-fit: cover;
  opacity: 0.10; mix-blend-mode: multiply; pointer-events: none;
}
.about-band__photo { width: 540px; height: 370px; flex-shrink: 0; border-radius: 26px; overflow: hidden; background: var(--sage); }
.about-band__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.about-band__text { display: flex; flex-direction: column; gap: 22px; max-width: 34em; }
.about-band__text h2 { font-size: var(--h2-lg); line-height: 1.05; }
.about-band__text p { font-size: var(--text-lg); line-height: 1.65; }
.about-band__row { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.about-band__books { display: flex; gap: 20px; }
.about-band__books img { display: block; width: 62px; height: 88px; object-fit: cover; border-radius: 5px; box-shadow: 0 3px 10px rgba(31, 38, 32, 0.2); }
.about-band__row .btn { min-height: 46px; align-self: center; }

@media (max-width: 1239px) {
  .about-band__inner { gap: 56px; }
  .about-band__photo { width: 42%; height: auto; aspect-ratio: 540 / 370; }
}

@media (max-width: 899px) {
  .about-band__inner { flex-direction: column; align-items: flex-start; padding-block: 52px; gap: 20px; }
  .about-band__bg { right: -150px; top: 180px; width: 520px; height: 520px; }
  .about-band__photo { width: min(540px, 100%); aspect-ratio: 342 / 250; border-radius: 22px; }
  .about-band__text { gap: 20px; max-width: 40em; }
}

@media (max-width: 699px) {
  .about-band__text h2 { line-height: 1.08; }
  .about-band__text p { line-height: 1.6; }
  /* phone mock-up: the two covers, then the two links each on its own line */
  .about-band__row { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 8px; }
  .about-band__books { gap: 14px; margin-bottom: 8px; }
  .about-band__books img { width: 56px; height: 80px; }
  .about-band__row .btn { align-self: flex-start; }
  .about-band__row .textlink { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 5px; }
}

/* ---------- "From practitioners who have taken the courses" ---------- */

.voices__inner { padding-block: 88px; display: flex; flex-direction: column; gap: 36px; }
.voices__inner h2 { font-size: var(--h2-sm); line-height: 1.1; }
.voices__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.voices__titles { display: flex; flex-direction: column; gap: 10px; }
.voices--course .voices__titles h2 { font-size: var(--h2); }
.voices__all { text-decoration: underline; }
.voices__quotes.voices__quotes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
/* "Show more": a plain open/close element; once opened, its button is no longer needed */
.voices__more > summary { list-style: none; cursor: pointer; }
.voices__more > summary::-webkit-details-marker { display: none; }
.voices__more[open] > summary { display: none; }
.voices__more-inner { display: flex; flex-direction: column; gap: 36px; }
.voices:not(.voices--course) .voices__more > summary { background: var(--sage); }
.voices__intro { margin-top: -20px; font-size: 18px; color: var(--muted); }
.voices__quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
/* on the course pages and /ci the section is sage, as the video section in the mock-ups */
.voices--course .voices__inner { padding-block: 80px; }
.voices--course .quote { border-left-color: var(--line); }
.quote--lg { padding-left: 24px; }
.quote--lg blockquote { font-size: 22px; }
.quote--lg figcaption { margin-top: 12px; }

@media (max-width: 899px) {
  .voices__inner { padding-block: 52px; gap: 28px; }
  .voices__intro { margin-top: -14px; }
  .voices__quotes { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 699px) {
  .voices__inner h2 { line-height: 1.15; }
  .quote--lg { padding-left: 20px; }
  .quote--lg blockquote { font-size: 20px; }
  .quote--lg figcaption { margin-top: 10px; }
}

/* ============================================================
   Closing band: the sage band with a page's own closing line (used on every page)
   ============================================================ */

.closing__inner { padding-block: 80px; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.closing__text { display: flex; flex-direction: column; gap: 8px; }
.closing__text h2 { font-size: var(--h2-sm); line-height: 1.15; }
.closing__text span { font-size: 19px; color: var(--muted); }
.closing__actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.closing__actions .btn--light { padding: 0 28px; }

@media (max-width: 999px) {
  .closing__inner { flex-direction: column; align-items: flex-start; padding-block: 52px; gap: 20px; }
}

@media (max-width: 699px) {
  .closing__inner { gap: 16px; }
  .closing__text h2 { font-size: 32px; }
  .closing__text span { font-size: 17px; line-height: 1.5; }
  .closing__actions { flex-direction: column; align-items: flex-start; gap: 4px; }
  .closing__actions .btn--primary { font-size: 18px; padding: 0 28px; }
}

/* On touch-sized screens, plain links that stand on their own get a taller tap area (at least 44px) */
@media (max-width: 899px) {
  .textlink { display: inline-flex; align-items: center; min-height: 44px; }
  .level2 .textlink, .upcoming__all { margin-block: -8px; }
}

/* ============================================================
   Course pages (mock-ups 04 to 08)
   ============================================================ */

.label--sm { font-size: 14px; }

/* ---------- Breadcrumb ---------- */

.crumbs { padding-top: 8px; font-size: 16px; color: var(--muted); }
.crumbs a { text-decoration: underline; }

/* ---------- Opening: text on the left, image and key-facts box on the right ---------- */

.course-hero__inner {
  padding-block: 40px 72px;
  display: grid; grid-template-columns: minmax(0, 1fr) 460px; column-gap: 72px; row-gap: 24px;
  grid-template-areas: "text image" "text facts";
  align-items: center;
}
.course-hero__text { grid-area: text; display: flex; flex-direction: column; }
.course-hero__text h1 { margin-top: 18px; font-size: clamp(40px, calc(3.429vw + 26.63px), 76px); line-height: 1.02; }
.course-hero__text .tagline { margin-top: 18px; }
.course-hero__formerly { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.course-hero__intro { margin-top: 28px; font-size: var(--text-lg); line-height: 1.65; max-width: 32em; }
.course-hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
/* The drawing is 100px wider than its column and reaches towards the text */
/* (the overhang grows from 40px at 1200 wide to the full 100px at 1440, so it never runs under the text) */
.course-hero__image { grid-area: image; align-self: end; margin-left: clamp(-100px, calc(-40px - (100vw - 1200px) * 0.25), -40px); }
.course-hero__image img { display: block; width: 100%; height: auto; }
.course-hero__facts { grid-area: facts; align-self: start; }

@media (max-width: 1199px) {
  .course-hero__inner { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 48px; }
  .course-hero__image { margin-left: -40px; }
}

@media (max-width: 899px) {
  /* one column: image above the text, key facts after the introduction */
  .course-hero__inner { padding-block: 16px 52px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "image" "text" "facts"; row-gap: 28px; }
  .course-hero__image { margin-left: 0; max-width: 460px; }
  .course-hero__text h1 { margin-top: 14px; }
  .course-hero__text .tagline { margin-top: 14px; }
  .course-hero__intro { margin-top: 20px; }
  .course-hero__actions { margin-top: 24px; }
}

@media (max-width: 699px) {
  .course-hero__text h1 { line-height: 1.08; }
  .course-hero__actions { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- Interchangeable sections: shared frame ---------- */

.block { padding-block: var(--section-pad); }
.block--stone { background: var(--stone); }
/* two cream sections in a row: one gap between them, not two */
.block--cream + .block--cream { padding-top: 0; }
.block[id] { scroll-margin-top: 16px; }

.block__stack { display: flex; flex-direction: column; gap: 40px; }
.block__stack--tight { gap: 24px; }
.block__stack--28 { gap: 28px; }
.block__stack--32 { gap: 32px; }
.block__head { display: flex; flex-direction: column; gap: 12px; }
.block__intro { font-size: 20px; line-height: 1.55; color: var(--muted); max-width: 44em; }
.block__intro--wide { max-width: none; line-height: 1.6; }

/* Heading on the left (420px), content on the right */
.twocol { display: flex; gap: 96px; align-items: flex-start; }
.twocol__side { width: 420px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.twocol__side .label + h2 { margin-top: -8px; }
.twocol__side .quote { margin-top: 12px; }
.twocol__intro { font-size: 19px; line-height: 1.6; color: var(--muted); }
.twocol__main { flex: 1 1 0; min-width: 0; max-width: 40em; }

.prose { display: flex; flex-direction: column; gap: 20px; }
.prose p { font-size: 20px; line-height: 1.65; }
.callout { padding: 22px 26px; border-radius: 20px; background: var(--sage); font-size: 18px; line-height: 1.6; }
.callout strong { font-weight: 600; color: var(--green); }

@media (max-width: 1099px) {
  .twocol { gap: 56px; }
  .twocol__side { width: 320px; }
}
@media (max-width: 899px) {
  .twocol { flex-direction: column; gap: 24px; }
  .twocol__side { width: auto; gap: 16px; }
  .block__stack { gap: 28px; }
}
@media (max-width: 699px) {
  .block__intro, .prose p { font-size: 18px; line-height: 1.6; }
  .twocol__intro { font-size: 17px; }
}

/* ---------- Numbered steps ---------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.steps__item { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 24px; background: var(--cream); }
.steps__num { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--logo-green); }
.steps__title { font-family: var(--serif); font-size: 27px; line-height: 1.15; color: var(--green); }
.steps__text { font-size: 18px; line-height: 1.55; }

@media (max-width: 999px) {
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .steps__item { padding: 24px; border-radius: 22px; gap: 8px; }
  .steps__num { font-size: 36px; }
  .steps__title { font-size: 24px; }
}

/* ---------- Two cards side by side ---------- */

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.compare__card { display: flex; flex-direction: column; gap: 10px; padding: 30px 32px; border-radius: 24px; border: 1.5px solid var(--line); }
.compare__card--filled { background: var(--sage); border-color: transparent; }
.compare__title { font-family: var(--serif); font-size: 32px; line-height: 1.2; color: var(--green); }
.compare__text { font-size: 18px; line-height: 1.6; }
.compare__note { font-size: 14px; color: var(--muted); }
.compare__after { font-size: 18px; line-height: 1.6; max-width: 48em; }

@media (max-width: 799px) {
  .compare { grid-template-columns: 1fr; gap: 16px; }
  .compare__card { padding: 24px; border-radius: 22px; }
  .compare__title { font-size: 26px; }
}

/* ---------- "What you will learn": list of points ---------- */

.points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.points li { display: flex; flex-direction: column; gap: 4px; padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); }
.points li:last-child { padding-bottom: 0; border-bottom: 0; }
.points__title { font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--green); }
.points__text { font-size: 18px; line-height: 1.6; }

/* ---------- Book ---------- */

.book { display: flex; gap: 64px; align-items: center; }
.book__cover { display: block; width: 240px; height: auto; flex-shrink: 0; border-radius: 6px; box-shadow: 0 10px 28px rgba(31, 38, 32, 0.22); }
.book__text { display: flex; flex-direction: column; gap: 16px; max-width: 40em; }
.book__text h2 { font-size: var(--h2-sm); line-height: 1.1; }
.book__subtitle { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; color: var(--indigo); }
.book__text p:not(.book__subtitle) { font-size: 19px; line-height: 1.6; }
.book__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.book__buy-label { font-size: 16px; color: var(--muted); margin-right: 4px; }
.book__buy .btn { padding: 0 20px; align-self: center; }

@media (max-width: 799px) {
  .book { flex-direction: column; align-items: flex-start; gap: 28px; }
  .book__cover { width: 180px; }
  .book__subtitle { font-size: 20px; }
  .book__text p:not(.book__subtitle) { font-size: 18px; }
}

/* ---------- Image with text ---------- */

.imagetext { display: flex; gap: 64px; align-items: center; }
.imagetext__image { display: block; width: 440px; max-width: 45%; height: auto; flex-shrink: 0; border-radius: 22px; }
.imagetext__text { display: flex; flex-direction: column; gap: 16px; max-width: 38em; }
.imagetext__text h2 { font-size: var(--h2-sm); line-height: 1.1; }
.imagetext__text p { font-size: 19px; line-height: 1.6; }
.imagetext__caption { font-size: 16px; color: var(--muted); }

@media (max-width: 799px) {
  .imagetext { flex-direction: column; align-items: flex-start; gap: 24px; }
  .imagetext__image { width: 100%; max-width: 440px; }
  .imagetext__text p { font-size: 18px; }
}

/* ---------- "Over the two days" ---------- */

.daycards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.daycards__card { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 24px; background: var(--cream); }
.daycards__title { font-family: var(--serif); font-size: 28px; line-height: 1.2; color: var(--green); }
.daycards__text { font-size: 18px; line-height: 1.6; }

@media (max-width: 799px) {
  .daycards { grid-template-columns: 1fr; gap: 28px; }
  .daycards__card { padding: 0; gap: 8px; }
  .daycards__title { font-size: 24px; }
}

/* ---------- "Dates for this course" ---------- */

.course-dates { padding-block: 80px; }
.course-dates__inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 28px 24px; }
.course-dates__inner > * { grid-column: 1 / -1; }
.course-dates__inner > h2 { grid-column: 1; }
.course-dates__inner > .course-dates__all { grid-column: 2; }
.course-dates__more { font-size: 17px; color: var(--muted); }
/* on stone, the date pills are cream */
.block--stone .date-tag { background: var(--cream); }

@media (max-width: 699px) {
  .course-dates { padding-block: 52px; }
  .course-dates__inner { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .course-dates__inner > .course-dates__all { order: 3; align-self: flex-start; margin-block: -8px; }
  .course-dates__more { order: 4; font-size: 16px; line-height: 1.5; }
}

/* ---------- Tracing Your Deep Song (/ci) ---------- */

/* the vessel painting sits centred above the key facts, without the course pages' overhang */
.course-hero--ci .course-hero__image { margin: -30px auto -10px; width: 400px; max-width: 100%; }
.course-hero--ci h1 { font-size: var(--h1); }

/* Large quote on sage, under the opening */
.bigquote { padding-block: 96px; text-align: center; }
.bigquote p { margin-inline: auto; max-width: 26em; font-family: var(--serif); font-size: clamp(26px, calc(1.333vw + 20.8px), 40px); line-height: 1.3; color: var(--green); }

/* Three cards, each with a small label, a title and a text */
.lcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lcards__card { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 24px; background: var(--stone); }
.lcards--cream .lcards__card { background: var(--cream); }
.lcards__title { font-family: var(--serif); font-size: 28px; line-height: 1.2; color: var(--green); }
.lcards__text { font-size: 18px; line-height: 1.6; }

/* Two quotes side by side, each with a thin line on the left */
.views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.views__item { margin: 0; display: flex; flex-direction: column; gap: 14px; padding-left: 28px; border-left: 3px solid var(--line); }
.views__item blockquote { margin: 0; font-family: var(--serif); font-size: 28px; line-height: 1.35; color: var(--green); }
.views__item figcaption { font-size: 17px; color: var(--muted); }
.views__text { font-size: 19px; line-height: 1.65; max-width: 44em; }

/* Teacher cards: with or without a photo */
.teachers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.teachers__card { display: flex; gap: 28px; align-items: flex-start; padding: 32px; border-radius: 24px; background: var(--stone); }
.teachers__photo { display: block; width: 140px; height: 170px; flex-shrink: 0; border-radius: 18px; object-fit: cover; }
.teachers__text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.teachers__text h3 { font-size: 30px; line-height: 1.2; color: var(--green); }
.teachers__text p { line-height: 1.6; }
.teachers__text a { font-size: 17px; }

/* "The next cohort": the dates, or the early-enrolment card */
.cohort { padding-block: 80px; }
.cohort__intro { max-width: 40em; line-height: 1.6; }
.cohort__card { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; padding: 32px; border-radius: 24px; background: var(--cream); }
.cohort__card-text { display: flex; flex-direction: column; gap: 6px; }
.cohort__card-text h3 { font-size: 28px; line-height: 1.2; color: var(--green); }
.cohort__card-text p { line-height: 1.55; color: var(--muted); }
.cohort__card .btn { flex-shrink: 0; align-self: center; }

@media (max-width: 1099px) {
  .teachers { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 999px) {
  .lcards { grid-template-columns: 1fr; gap: 16px; }
  .lcards__card { padding: 24px; border-radius: 22px; gap: 8px; }
  .lcards__title { font-size: 24px; }
}

@media (max-width: 899px) {
  .course-hero--ci .course-hero__image { margin: 0; width: min(320px, 100%); }
  .bigquote { padding-block: 56px; }
  .views { grid-template-columns: 1fr; gap: 32px; }
  .views__item { padding-left: 20px; }
  .views__item blockquote { font-size: 23px; }
  .teachers__text a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; }
  .cohort { padding-block: 52px; }
  .cohort__card { flex-direction: column; align-items: flex-start; }
  .cohort__card .btn { align-self: flex-start; }
}

@media (max-width: 699px) {
  .views__text { font-size: 18px; line-height: 1.6; }
  .teachers__card { padding: 24px; border-radius: 22px; gap: 20px; }
  .teachers__photo { width: 96px; height: 116px; border-radius: 14px; }
  .teachers__text h3 { font-size: 26px; }
  .cohort__card { padding: 24px; border-radius: 22px; }
  .cohort__card-text h3 { font-size: 24px; }
}

/* ---------- Questions ---------- */

.questions { display: flex; flex-direction: column; gap: 28px; }
.questions__item { display: flex; flex-direction: column; gap: 6px; }
.questions__q { font-family: var(--sans); font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--green); }
.questions__a { font-size: 18px; line-height: 1.6; }

/* ---------- "After this course" / "Related courses": small cards ---------- */

.course-related { padding-block: 72px; }
.course-related h2 { font-size: clamp(28px, calc(0.762vw + 25.03px), 36px); line-height: 1.2; }
.mini-cards { display: grid; gap: 24px; }
.mini-cards--1, .mini-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mini-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-card {
  display: flex; flex-direction: column; gap: 10px; padding: 30px 32px;
  border-radius: 24px; background: var(--cream); color: var(--ink); text-decoration: none;
  transition: background-color .15s ease;
}
.mini-card:hover { background: #fff; color: var(--ink); }
.mini-card__title { font-family: var(--serif); font-size: 30px; line-height: 1.2; color: var(--green); }
.mini-card__text { font-size: 18px; line-height: 1.55; }

@media (max-width: 999px) {
  .mini-cards--3 { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 799px) {
  .course-related { padding-block: 52px; }
  .mini-cards--1, .mini-cards--2 { grid-template-columns: 1fr; gap: 16px; }
  .mini-card { padding: 24px; border-radius: 22px; gap: 8px; }
  .mini-card__title { font-size: 26px; }
}

/* ============================================================
   Courses overview (mock-up 03)
   ============================================================ */

/* ---------- Simple page opening: label, title, introduction ---------- */

.page-hero__inner { padding-block: 56px; display: flex; flex-direction: column; }
.page-hero__inner h1 { margin-top: 18px; line-height: 1.02; }
.page-hero__text { margin-top: 24px; max-width: 38em; }

/* ---------- A group of course cards (Level 1, Level 2) ---------- */

.course-group__inner { padding-block: 16px 72px; display: flex; flex-direction: column; gap: 32px; }
.course-group--stone { background: var(--stone); }
.course-group--stone .course-group__inner { padding-block: 72px; }
.course-group__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.course-group__head .block__head { gap: 10px; }
.course-group__note { font-size: 18px; color: var(--muted); max-width: 26em; text-align: right; }
.course-group__cards { display: grid; gap: 24px; }
.course-group__cards--1, .course-group__cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.course-group__cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* The course card with the course image on top (cream panel, 220px high) */
.course-card--image { gap: 12px; min-height: 0; padding: 26px 30px 32px; overflow: hidden; }
.course-card--cream { background: var(--cream); }
.course-card--cream:hover { background: #fff; }
.course-card__image {
  height: 220px; margin: -26px -30px 0; padding: 5px 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream); border-radius: 26px 26px 0 0;
}
.course-card__image img { display: block; max-width: 100%; max-height: 210px; width: auto; height: auto; }
.course-card--cream:hover .course-card__image { background: var(--cream); }
.course-card__label { margin-top: 8px; }
.course-card--image .course-card__foot { padding-top: 8px; }

@media (max-width: 999px) {
  .course-group__cards--3 { grid-template-columns: 1fr; }
  .course-group__cards--3 .course-card--image { max-width: 560px; }
}
@media (max-width: 799px) {
  .course-group__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .course-group__note { text-align: left; font-size: 17px; }
  .course-group__cards--1, .course-group__cards--2 { grid-template-columns: 1fr; }
}
@media (max-width: 699px) {
  .page-hero__inner { padding-block: 24px 40px; }
  .page-hero__inner h1 { margin-top: 14px; line-height: 1.08; }
  .page-hero__text { margin-top: 18px; }
  .course-group__inner { padding-block: 8px 48px; gap: 22px; }
  .course-group--stone .course-group__inner { padding-block: 52px; }
  /* on the Courses page the cards keep their image and "Read more" on phones */
  .course-card--image { padding: 22px 22px 26px; border-radius: 22px; }
  .course-card--image .course-card__more { display: inline; }
  .course-card__image { height: 190px; margin: -22px -22px 0; border-radius: 22px 22px 0 0; }
  .course-card__image img { max-height: 180px; }
}

/* ---------- "How the courses fit together" ---------- */

.fit__inner { padding-block: 80px; display: flex; flex-direction: column; gap: 36px; }
.fit__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.fit__steps li { display: flex; flex-direction: column; gap: 10px; }
.fit__num {
  width: 44px; height: 44px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff; font-size: 19px; font-weight: 600;
}
.fit__title { font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--green); }
.fit__text { font-size: 18px; line-height: 1.6; }
.fit__note { margin: 0; max-width: 720px; font-size: 18px; line-height: 1.6; }

@media (max-width: 899px) {
  .fit__inner { padding-block: 52px; gap: 28px; }
  .fit__steps { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Tracing Your Deep Song strip ---------- */

.ci-strip { background: var(--stone); }
.ci-strip__inner { padding-block: 64px; display: flex; gap: 72px; align-items: center; }
.ci-strip__image { width: 300px; flex-shrink: 0; }
.ci-strip__image img { display: block; width: 320px; max-width: none; height: auto; margin: -20px; }
.ci-strip__text { display: flex; flex-direction: column; gap: 16px; max-width: 40em; }
.ci-strip__text h2 { font-size: var(--h2-sm); line-height: 1.1; }
.ci-strip__text p { font-size: 19px; line-height: 1.65; }
.ci-strip__text .btn { padding: 0 28px; }
.ci-strip .btn--light { background: var(--sage); }
.ci-strip .btn--light:hover { background: var(--sage-hover); }

@media (max-width: 799px) {
  .ci-strip__inner { flex-direction: column; align-items: flex-start; padding-block: 52px; gap: 20px; }
  .ci-strip__image { width: 100%; }
  .ci-strip__image img { width: min(280px, 100%); margin: 0 auto; }
  .ci-strip__text p { font-size: 18px; line-height: 1.6; }
}

/* ---------- "Every course" ---------- */

.every { padding-block: 72px; }
.every__points { list-style: none; margin: 0; padding: 0; flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; font-size: 19px; line-height: 1.55; }
.every__points strong { font-weight: 700; color: var(--green); }

@media (max-width: 899px) {
  .every { padding-block: 52px; }
}
@media (max-width: 699px) {
  .every__points { grid-template-columns: 1fr; gap: 18px; font-size: 18px; }
}

/* ---------- Video tile: a plain green tile; the player loads only after a click ---------- */

.video-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
.video-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.video-tile__frame {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: var(--green); color: var(--green); transition: background-color .15s ease;
}
.video-tile__frame:hover { background: var(--green-dark); color: var(--green-dark); }
.video-tile__play { width: 48px; height: 48px; border-radius: 50%; background: rgba(242, 240, 235, 0.92); display: flex; align-items: center; justify-content: center; }
.video-tile__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-tile__title { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--green); }
.video-tile__sub { font-size: 15px; color: var(--muted); }

/* three larger tiles per row: practitioners' videos on Home, the course pages and /ci */
.video-grid.video-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.video-grid--3 .video-tile__play { width: 64px; height: 64px; }
.video-grid--3 .video-tile__play svg { width: 28px; height: 28px; }
.video-grid--3 .video-tile__title { font-size: 18px; }

@media (max-width: 1099px) { .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 999px) { .voices__quotes.voices__quotes--3 { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 899px) { .voices__more-inner { gap: 28px; } }
@media (max-width: 799px) and (min-width: 560px) { .video-grid.video-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .video-grid.video-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 799px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  /* on small screens the tile being played takes the full width */
  .video-tile.is-playing { grid-column: 1 / -1; }
  .video-tile__title { font-size: 16px; }
}

/* ---------- Library ---------- */

.lib__inner { padding-block: 72px; display: flex; flex-direction: column; gap: 28px; }
.lib__inner--24 { gap: 24px; }
.lib__inner--40 { gap: 40px; }
.lib--shelf .lib__inner { padding-block: 16px 72px; }
.lib--shelf + .lib--shelf .lib__inner { padding-top: 0; }
.lib--stone { background: var(--stone); }
.lib[id] { scroll-margin-top: 16px; }
.lib__head { display: flex; flex-direction: column; gap: 10px; }
.lib__head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.lib__intro { font-size: 19px; color: var(--muted); }
.lib__more { text-decoration: underline; }
.lib__group { display: flex; flex-direction: column; gap: 20px; }
.lib__group h3.label { font-family: var(--sans); }

/* A book: cover on the left, texts and shop buttons on the right, on sage */
.lib-book { display: flex; gap: 40px; align-items: flex-start; padding: 40px; border-radius: 26px; background: var(--sage); }
.lib-book__cover { display: block; width: 190px; height: auto; flex-shrink: 0; border-radius: 8px; box-shadow: 0 6px 18px rgba(31, 38, 32, 0.2); }
.lib-book__text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lib-book__text h3 { font-size: 34px; line-height: 1.15; }
.lib-book--book h3 { font-style: italic; }
.lib-book__subtitle { color: var(--indigo); }
.lib-book__text p { margin-top: 4px; font-size: 19px; line-height: 1.6; max-width: 34em; }
.lib-book__credit { font-size: 16px; color: var(--muted); }
.lib-book__buy { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.lib-book__buy .btn--light { background: var(--cream); }
.lib-book__buy .btn--light:hover { background: #fff; }

/* Rows of articles and webinars: thin lines, the whole row is the link */
.lib-rows { border-top: 1px solid var(--line); }
.lib-row { display: grid; gap: 8px 32px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.lib-row--article { grid-template-columns: 120px minmax(0, 1fr) 260px 120px; }
.lib-row--webinar { grid-template-columns: minmax(0, 1fr) 240px 220px; padding: 24px 0; }
.lib-row--linked { position: relative; }
.lib-row__main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.lib-row__main a.lib-row__title { color: var(--ink); text-decoration: none; }
/* this one link covers the whole row; the small language links stay clickable above it */
.lib-row__cover::after { content: ''; position: absolute; inset: 0; }
.lib-row--linked:hover .lib-row__title { color: var(--green); }
.lib-row__also { position: relative; z-index: 1; font-size: 16px; color: var(--muted); }
.lib-row__also a { display: inline-block; padding-block: 4px; }
a.lib-row:hover { color: var(--ink); }
a.lib-row:hover .lib-row__title { color: var(--green); }
.lib-row__year { font-weight: 600; color: var(--indigo); }
.lib-row__title { font-family: var(--serif); font-size: 26px; line-height: 1.25; }
.lib-row--webinar .lib-row__title { font-size: 24px; line-height: 1.3; }
.lib-row__note { font-size: 17px; color: var(--muted); }
.lib-row__action { justify-self: end; font-size: 17px; color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.lib-row__kind { color: var(--muted); }
.lib-row__action--missing { color: var(--muted); text-decoration: none; }

@media (max-width: 999px) {
  /* year or note above, title, then the link: one column */
  .lib-row--article, .lib-row--webinar { grid-template-columns: minmax(0, 1fr); padding: 20px 0; gap: 6px; }
  .lib-row__action { justify-self: start; display: inline-flex; align-items: center; min-height: 32px; }
  .lib-row__title, .lib-row--webinar .lib-row__title { font-size: 23px; }
}

@media (max-width: 699px) {
  .lib__inner { padding-block: 52px; gap: 22px; }
  .lib--shelf .lib__inner { padding-block: 8px 52px; }
  .lib__inner--40 { gap: 28px; }
  .lib__intro { font-size: 17px; }
  .lib-book { flex-direction: column; gap: 22px; padding: 24px; border-radius: 22px; }
  .lib-book__cover { width: 140px; }
  .lib-book__text h3 { font-size: 28px; }
  .lib-book__text p { font-size: 18px; }
  .lib-book__buy { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lib-row__title, .lib-row--webinar .lib-row__title { font-size: 21px; }
}

/* ---------- About ---------- */

.about-hero { overflow: hidden; }
.about-hero__inner { position: relative; z-index: 0; padding-block: 56px 72px; display: flex; gap: 80px; align-items: flex-start; }
/* the eagle and the snake, very faint, behind the opening (as on Home) */
.about-hero__bg { position: absolute; z-index: -1; right: -160px; top: -80px; width: 820px; height: 820px; max-width: none; object-fit: cover; opacity: 0.10; mix-blend-mode: multiply; pointer-events: none; }
.about-hero__text { flex: 1 1 0; min-width: 0; max-width: 44em; display: flex; flex-direction: column; gap: 24px; }
.about-hero__text h1 { line-height: 1.02; }
.about-hero__text p:not(.tagline) { font-size: var(--text-lg); line-height: 1.65; }
.about-hero__portrait { width: 400px; flex-shrink: 0; border-radius: 26px; overflow: hidden; background: var(--sage); }
.about-hero__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 533; object-fit: cover; }
.about-patients { align-self: flex-start; background: var(--cream); padding: 0 24px; }
.about-patients:hover { background: #fff; }
.about-teach { display: flex; gap: 80px; align-items: center; }
.about-teach__image { width: 540px; max-width: 48%; flex-shrink: 0; border-radius: 26px; overflow: hidden; background: var(--sage); }
.about-teach__image img { display: block; width: 100%; height: auto; aspect-ratio: 540 / 370; object-fit: cover; }
.about-teach__text { max-width: 34em; gap: 18px; }
.about-books__inner { padding-block: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.about-books__left { display: flex; align-items: center; gap: 24px; font-size: 20px; line-height: 1.5; }
.about-books__left span { max-width: 26em; }
.about-books__cover { display: block; width: 70px; height: 100px; flex-shrink: 0; object-fit: cover; border-radius: 5px; box-shadow: 0 3px 10px rgba(31, 38, 32, 0.2); }
.btn--cream, .btn--cream.btn--light { background: var(--cream); }
.btn--cream:hover, .btn--cream.btn--light:hover { background: #fff; }

@media (max-width: 1099px) {
  .about-hero__inner { gap: 48px; }
  .about-hero__portrait { width: 320px; }
  .about-teach { gap: 48px; }
}
@media (max-width: 899px) {
  .about-hero__inner { flex-direction: column; padding-block: 24px 52px; gap: 28px; }
  .about-hero__bg { right: -220px; top: 60px; width: 560px; height: 560px; }
  .about-hero__text { gap: 18px; }
  .about-hero__portrait { width: min(400px, 100%); border-radius: 22px; }
  .about-teach { flex-direction: column; align-items: flex-start; gap: 24px; }
  .about-teach__image { width: 100%; max-width: 540px; border-radius: 22px; }
  .about-books__inner { padding-block: 52px; }
}
@media (max-width: 699px) {
  .about-books__left { flex-wrap: wrap; gap: 16px; font-size: 18px; }
  .about-books__left span { flex-basis: 100%; }
}

/* ---------- Host a course ---------- */

.page-hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.page-hero__actions:empty { display: none; }
.host-hosted { padding-bottom: 72px; font-size: 18px; color: var(--muted); }
.host-hosted p { max-width: 52em; }
.host-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.host-roles__card { display: flex; flex-direction: column; gap: 18px; padding: 36px; border-radius: 26px; background: var(--cream); }
.host-roles__card h3 { font-size: 30px; line-height: 1.2; color: var(--green); }
.host-roles__card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; line-height: 1.55; }
.host-roles__card li { padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.prose--19 p { font-size: 19px; }
.fit__steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }

@media (max-width: 999px) {
  .fit__steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
}
@media (max-width: 799px) {
  .host-roles { grid-template-columns: 1fr; gap: 16px; }
  .host-roles__card { padding: 24px; border-radius: 22px; }
  .host-roles__card h3 { font-size: 26px; }
  .host-hosted { padding-bottom: 52px; font-size: 17px; }
}
@media (max-width: 699px) {
  .page-hero__actions { margin-top: 24px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .fit__steps--4 { grid-template-columns: 1fr; gap: 24px; }
}

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

.contact__inner { padding-block: 8px 88px; display: flex; gap: 72px; align-items: flex-start; }
/* the sage box that holds the form (loaded from Zoho only after a click) */
.contact__form { flex: 1 1 0; min-width: 0; max-width: 760px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 40px; border-radius: 26px; background: var(--sage); }
.contact__form h2 { font-size: 30px; line-height: 1.2; color: var(--green); }
.contact__form p { line-height: 1.6; max-width: 34em; }
.contact__form iframe { display: block; width: 100%; border: 0; border-radius: 16px; background: var(--cream); }
.contact__form--open { padding: 16px; align-items: stretch; }
.contact__form--open h2, .contact__form--open p { padding-inline: 24px; }
.contact__form--open h2 { padding-top: 16px; }
.contact__missing { padding: 14px 18px; border: 1.5px dashed var(--muted); border-radius: 12px; font-weight: 600; color: var(--muted); }
.contact__side { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; gap: 28px; padding-top: 12px; }
.contact__item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.contact__big { font-size: 22px; line-height: 1.4; }
.contact__big--plain { color: var(--ink); text-decoration: none; }
.contact__big--plain:hover { color: var(--indigo); text-decoration: underline; }
.contact__small { font-size: 17px; }
.contact__signal { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
.contact__signal img { display: block; width: 132px; height: 132px; border-radius: 12px; background: #fff; }
.contact__signal div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.contact__note { font-size: 15px; line-height: 1.45; color: var(--muted); }
.contact__host { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px; border-radius: 22px; border: 1.5px solid var(--line); }
.contact__host h2 { font-size: 24px; line-height: 1.25; color: var(--green); }
.contact__host p, .contact__host a { font-size: 17px; line-height: 1.55; }
.contact__patients { font-size: 17px; line-height: 1.55; color: var(--muted); }

@media (max-width: 1199px) {
  .contact__inner { gap: 48px; }
  .contact__side { width: 340px; }
}
@media (max-width: 899px) {
  .contact__inner { flex-direction: column; padding-block: 0 52px; gap: 36px; }
  .contact__form { width: 100%; padding: 28px; border-radius: 22px; }
  .contact__form--open { padding: 10px; }
  .contact__form--open h2, .contact__form--open h3, .contact__form--open p { padding-inline: 18px; }
  .contact__side { width: 100%; padding-top: 0; }
  .contact__small, .contact__host a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; }
}

/* ---------- Mentoring ---------- */

.mentor-hero__inner { display: flex; align-items: center; gap: 72px; }
.mentor-hero__inner .page-hero__inner { flex: 1 1 0; min-width: 0; }
.mentor-hero__tagline { margin-top: 18px; }
.mentor-hero__facts { width: 400px; flex-shrink: 0; }
.lcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
h3.lcards__title { font-family: var(--serif); }
/* the paragraph in French, set apart inside its card */
/* each group's part: heading on the left; text, then what follows it, on the right */
.mentor-part__main { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.mentor-part__main > * { max-width: 100%; }
.mentor-listed { color: var(--muted); }
/* the paragraph in French, set apart in its own box */
.mentor-french { align-self: stretch; padding: 22px 26px; border-radius: 20px; background: var(--cream); display: flex; flex-direction: column; gap: 8px; }
.block--cream .mentor-french { background: var(--stone); }
.mentor-french p { font-size: 18px; line-height: 1.6; }
.mentor-part__form { align-self: stretch; max-width: none; }
.mentor-part__form h3 { font-size: 28px; line-height: 1.2; color: var(--green); }
.contact__form--open h3 { padding: 16px 24px 0; }
.mentor-book__box { max-width: none; width: 100%; }
.mentor-book__buttons { display: flex; flex-wrap: wrap; gap: 16px; }
/* diploma candidates: booking buttons under the form, once they have written */
.mentor-m7-book { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.mentor-m7-book p { font-size: var(--text-lg); line-height: 1.55; }
.mentor-book__note { font-size: var(--text-lg); }
/* a line that points to the Mentoring page (About, Courses overview) */
.mentor-note { font-size: 18px; line-height: 1.6; color: var(--muted); }
.mentor-note--line { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-soft); }

@media (max-width: 1099px) {
  .mentor-hero__inner { gap: 48px; }
  .mentor-hero__facts { width: 340px; }
}
@media (max-width: 899px) {
  .mentor-hero__inner { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 40px; }
  .mentor-hero__facts { width: auto; max-width: 460px; }
  .lcards--2 { grid-template-columns: 1fr; }
  .mentor-note--line { margin-top: 28px; }
}
@media (max-width: 699px) {
  .mentor-book__buttons { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- Plain text pages (Terms, Privacy policy, Imprint) and "page not found" ---------- */

.textpage { padding-block: 8px 88px; }
.textpage__text { max-width: 44em; gap: 18px; }
.textpage__text p, .textpage__text li { font-size: 19px; line-height: 1.65; }
.textpage__text h2 { margin-top: 26px; font-size: clamp(26px, calc(0.571vw + 23.77px), 32px); line-height: 1.2; color: var(--green); }
.textpage__text h2:first-child { margin-top: 0; }
.textpage__text h3 { margin-top: 14px; font-family: var(--sans); font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--green); }
.textpage__text ul, .textpage__text ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; }
.textpage__updated { margin-top: 20px; font-size: 16px !important; color: var(--muted); }
.notfound .page-hero__inner { padding-block: 72px 120px; }
.notfound__contact { margin-top: 20px; }

@media (max-width: 699px) {
  .textpage { padding-bottom: 52px; }
  .textpage__text p, .textpage__text li { font-size: 18px; line-height: 1.6; }
  .notfound .page-hero__inner { padding-block: 32px 64px; }
  .notfound__contact a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Phones: every link or button at least 44 pixels tall (stage 13) ---------- */

@media (max-width: 899px) {
  .site-footer__links { gap: 0; }
  .site-footer__links a, .site-footer__copy a,
  .crumbs a, a.date-row__title, .lib-row__also a, .lib__more, .voices__all,
  .contact__big, .contact__item .contact__small, .mentor-note a, .notfound__contact a, .questions__a a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .crumbs a, .site-footer__copy a, .mentor-note a, .questions__a a { margin-block: -10px; }
  a.date-row__title { margin-block: -8px; }
  .lib-row__also { display: flex; flex-wrap: wrap; column-gap: 12px; }
  .lib-row__also a { padding-block: 0; }
}

/* Mentoring: the Zoho Bookings calendar, opened in place after a click (site.js) */
.booking { display: flex; flex-direction: column; gap: 20px; }
.booking__panel { border: 1px solid var(--line, #d9d5cc); border-radius: 16px; background: #fff; overflow: hidden; scroll-margin-top: 90px; }
.booking__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--cream, #f2f0eb); border-bottom: 1px solid var(--line, #d9d5cc); }
.booking__title { font-weight: 600; margin: 0; }
.booking__note { display: block; font-size: 14px; color: var(--muted); }
.booking__close { flex: none; }
.booking__panel iframe { display: block; width: 100%; height: min(860px, 82vh); min-height: 560px; border: 0; }
@media (max-width: 699px) {
  .booking__panel iframe { height: 86vh; }
}

/* Participant area (TrainerCentral): a thin line above the menu, only while switched on */
.topbar { border-bottom: 1px solid var(--line-soft, var(--line)); }
.topbar__inner { display: flex; justify-content: flex-end; }
.topbar__link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 15px; color: var(--muted); text-decoration: none; }
.topbar__link:hover, .topbar__link[aria-current] { color: var(--green); }
.topbar__link[aria-current] { font-weight: 600; }
@media (max-width: 899px) { .topbar__link { min-height: 44px; } }

/* The participant dashboard inside the page */
.participants { padding-bottom: 64px; }
.participants__inner { display: flex; flex-direction: column; gap: 20px; }
.participants__fallback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.participants__fallback p { margin: 0; }
.participants__frame { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.participants__frame iframe { display: block; width: 100%; height: min(900px, 85vh); min-height: 560px; border: 0; }
/* /ci: TrainerCentral's course card in place of the button, after a click (prepared, not used yet) */
.cohort__embed { flex: 1 1 100%; }

/* The short line leading to the Certification pathway (Courses page, course pages) */
.cert-line { margin: 0; font-size: 17px; line-height: 1.5; color: var(--muted); }
.cert-line a { color: var(--indigo); }
.courses-cert { padding-block: 8px 40px; }
.courses-cert .cert-line { font-size: 18px; }