@import url('fonts.css');

/* ==========================================================================
   Yann Darmon - design system
   Accent lock: brand orange, one accent, whole page.
   Radius rule: buttons + chips = pill (999px), panels = 18px, media = 18px.
   Theme: auto (prefers-color-scheme), one theme per page, no section inverts.
   ========================================================================== */

:root{
  color-scheme: light;

  --bg:            #fffdfa;
  --surface:       #fffefc;
  --surface-2:     #fff2e7;
  --ink:           #1b1610;
  --ink-2:         #5f584e;
  --accent:        #e8600c;
  --accent-hover:  #c94f05;
  --accent-ink:    #1c1206; /* near-black on orange: 6.9:1, white would be 3.5:1 */
  --accent-wash:   #ffe9d8;
  --line:          rgba(27, 22, 16, 0.12);
  --line-strong:   rgba(27, 22, 16, 0.22);
  --shadow:        0 18px 40px -24px rgba(72, 40, 12, 0.35);

  --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* One scale, used everywhere. Before this existed every section carried the
     same blanket padding, which stacked to ~14rem of dead space wherever two
     sections met and made the whole site read at one pace. */
  --space-2xs: clamp(0.35rem, 0.5vw, 0.5rem);
  --space-xs:  clamp(0.6rem, 0.9vw, 0.85rem);
  --space-s:   clamp(0.9rem, 1.4vw, 1.25rem);
  --space-m:   clamp(1.4rem, 2.2vw, 2rem);
  --space-l:   clamp(2rem, 3.4vw, 3rem);
  --space-xl:  clamp(3rem, 5vw, 4.5rem);

  /* Section rhythm has three speeds so a page can breathe unevenly on purpose. */
  --section-tight: clamp(2.25rem, 4.5vw, 3.5rem);
  --section:       clamp(3.25rem, 6.5vw, 5.5rem);
  --section-loose: clamp(4.5rem, 9vw, 7.5rem);
  --header-h: 68px;
  --r-panel: 18px;
  --r-pill: 999px;
  --r-chip: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-0.025em;
  margin:0 0 0.4em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.5rem, 5.4vw, 4.25rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 3rem); }
h3{ font-size:clamp(1.25rem, 1.9vw, 1.6rem); letter-spacing:-0.02em; }
h4{ font-size:1rem; font-weight:600; letter-spacing:-0.01em; }

p{ margin:0 0 1em; }
strong{ font-weight:600; }

/* German compounds are long enough to burst a phone-width container */
h1, h2, h3, h4, p, li, summary, td, th, .lede, .proof-value{ overflow-wrap:break-word; }
html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3,
html[lang="de"] .lede, html[lang="de"] .faq-item summary{ hyphens:auto; }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.lede{ font-size:clamp(1.05rem, 1.5vw, 1.2rem); color:var(--ink-2); max-width:54ch; }
.muted{ color:var(--ink-2); }

[data-lang="en"] .lang-fr{ display:none !important; }
[data-lang="fr"] .lang-en{ display:none !important; }

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

/* A page head already ends in space, so the section under it must not add a
   second full helping. This is what produced the enormous gap under every H1. */
.page-head{ padding-block:var(--section-tight) var(--space-m); }
.page-head + section{ padding-top:var(--space-l); }
.page-head .chip{ margin-bottom:var(--space-s); }

/* Section label. Sentence case on purpose: small ALL-CAPS tracked eyebrows are
   the single most common generated-page tell, and they were banned for this site. */
.label{
  display:block;
  font-family:var(--display);
  font-size:0.95rem; font-weight:700; letter-spacing:-0.01em;
  color:var(--accent);
  margin-bottom:var(--space-2xs);
}

/* ------------------------------- buttons ------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap;
  font-family:var(--body); font-weight:600; font-size:0.97rem;
  padding:0.85rem 1.6rem;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .12s var(--ease);
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ background:var(--accent-hover); }
.btn-outline{ border-color:var(--line-strong); color:var(--ink); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn:active{ transform:translateY(1px) scale(0.985); }
.btn:focus-visible, a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-pill);
}

.textlink{
  display:inline-block; font-weight:600; font-size:0.95rem; color:var(--accent);
  border-bottom:1px solid transparent; padding-bottom:1px;
  transition:border-color .2s var(--ease);
}
.textlink:hover{ border-color:var(--accent); }

/* -------------------------------- header -------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.nav{
  height:var(--header-h);
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav-brand{
  font-family:var(--display); font-weight:800; font-size:1.18rem;
  letter-spacing:-0.035em; white-space:nowrap;
  /* the wordmark: ink first half, accent on the name */
}
.nav-brand span{ color:var(--accent); }

.nav-links{
  display:flex; align-items:center; gap:1.9rem;
  list-style:none; margin:0; padding:0;
  font-size:0.95rem; font-weight:500;
}
.nav-links > li > a{ position:relative; padding:0.35rem 0; white-space:nowrap; }
.nav-links > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav-links > li > a:hover::after{ transform:scaleX(1); }

.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:100%; left:-0.9rem; margin-top:0.45rem;
  min-width:232px; padding:0.45rem;
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-panel);
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown a{
  display:block; padding:0.65rem 0.85rem; border-radius:12px;
  font-size:0.93rem; font-weight:500;
}
.dropdown a:hover{ background:var(--accent-wash); color:var(--accent); }

.nav-right{ display:flex; align-items:center; gap:0.9rem; }

.lang-switch{ position:relative; }
.lang-switch summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:0.3rem;
  padding:0.45rem 0.7rem;
  border:1px solid var(--line); border-radius:var(--r-chip);
  font-size:0.8rem; font-weight:600; letter-spacing:0.04em; color:var(--ink-2);
}
.lang-switch summary::-webkit-details-marker{ display:none; }
.lang-switch summary::after{
  content:""; width:5px; height:5px; margin-left:0.1rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
}
.lang-switch[open] summary{ border-color:var(--accent); color:var(--accent); }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 0.5rem); z-index:120;
  min-width:172px; padding:0.4rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-panel); box-shadow:var(--shadow);
}
.lang-menu .lang-opt{
  display:flex; align-items:baseline; gap:0.6rem;
  padding:0.6rem 0.75rem; border-radius:12px;
  font-size:0.78rem; font-weight:600; letter-spacing:0.04em; color:var(--ink-2);
}
.lang-menu .lang-opt span{ font-size:0.9rem; font-weight:500; letter-spacing:0; color:var(--ink); }
.lang-menu .lang-opt:hover{ background:var(--accent-wash); }
.lang-menu .lang-opt:hover span{ color:var(--accent); }
.lang-menu .lang-opt.active{ color:var(--accent); }
.lang-menu .lang-opt.active span{ color:var(--accent); }

.lang-toggle{
  display:inline-flex; align-items:center; gap:0.1rem;
  padding:0.3rem 0.35rem;
  border:1px solid var(--line); border-radius:var(--r-chip);
  font-size:0.78rem; font-weight:600; letter-spacing:0.04em;
}
.lang-toggle .lang-opt,
.lang-toggle [data-set-lang]{
  padding:0.18rem 0.5rem; border-radius:var(--r-chip);
  cursor:pointer; color:var(--ink-2); text-decoration:none;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.lang-toggle .lang-opt:hover{ color:var(--accent); }
.lang-toggle .lang-opt.active,
.lang-toggle [data-set-lang].active{ background:var(--accent); color:var(--accent-ink); }

.nav-cta{ padding:0.6rem 1.2rem; font-size:0.9rem; }

.nav-toggle{
  display:none; position:relative;
  width:40px; height:40px; padding:0; flex:0 0 40px;
  background:none; border:1px solid var(--line); border-radius:var(--r-chip);
  cursor:pointer;
}
.nav-toggle span{
  position:absolute; left:11px; right:11px; height:2px; background:var(--ink);
  border-radius:2px;
  transition:transform .22s var(--ease), opacity .18s var(--ease);
}
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:19px; }
.nav-toggle span:nth-child(3){ top:24px; }
.nav-toggle.open span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

.nav-mobile-cta{ display:none; }

/* --------------------------------- hero --------------------------------- */
.hero{
  padding-top:clamp(2.5rem, 5vw, 6rem);
  padding-bottom:clamp(2.5rem, 5vw, 5rem);
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}
.hero h1{ max-width:16ch; font-size:clamp(2.35rem, 4.4vw, 3.6rem); }
.hero h1 em{
  font-style:normal; color:var(--accent);
}
.hero .lede{ margin:1.5rem 0 2.2rem; max-width:44ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:0.9rem; align-items:center; }

.hero-media{
  position:relative;
  display:flex; justify-content:center; align-items:flex-end;
  min-height:clamp(300px, 42vw, 470px);
}
.hero-media::before{
  /* flat brand disc, the channel look without a gradient */
  content:"";
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(100%, 420px); aspect-ratio:1;
  background:var(--accent);
  border-radius:50%;
}
.hero-portrait{
  position:relative; z-index:1;
  width:min(100%, 440px); height:auto;
  filter:drop-shadow(0 22px 28px rgba(72, 40, 12, 0.22));
}

/* ------------------------------ proof band ------------------------------ */
.proof{
  padding:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--surface);
}
.proof-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
}
.proof-item{
  padding:1.7rem var(--gutter);
  border-right:1px solid var(--line);
}
.proof-item:last-child{ border-right:none; }
.proof-value{
  display:block;
  font-family:var(--display); font-size:1.7rem; font-weight:800;
  letter-spacing:-0.03em; line-height:1;
}
.proof-label{ font-size:0.88rem; color:var(--ink-2); }

/* ------------------------------- programs ------------------------------- */
/* Programs. Three identical bordered cards were the old shape and they are an
   anti-reference: same box, same weight, so nothing led. These are rows instead.
   The lead programme gets the tint and the extra room, the other two are plain
   rows divided by a hairline. Structure follows the weight of the content. */
.programs{ margin-top:var(--space-l); }

.program{
  display:grid;
  grid-template-columns:minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap:var(--space-m) clamp(2rem, 5vw, 4.5rem);
  padding-block:var(--space-l);
  border-top:1px solid var(--line);
}
.program:last-child{ border-bottom:1px solid var(--line); }
.program-aside h3{ margin:0 0 var(--space-2xs); }
.program-who{
  margin:0 0 var(--space-xs);
  font-size:0.88rem; color:var(--ink-2);
}
/* in the lead the who-line sits between the heading and the paragraph, so it
   needs to separate them rather than cling to the heading */
.program-lead .program-who{ margin-bottom:var(--space-s); }
.program-main > p{ color:var(--ink-2); max-width:66ch; }
.program-main > p:last-of-type{ margin-bottom:var(--space-s); }
.program-main .textlink{ align-self:start; }

/* the one programme that carries the page */
.program-lead{
  border-top:none;
  background:var(--accent-wash);
  border-radius:var(--r-panel);
  padding:clamp(1.75rem, 3.6vw, 3rem);
  margin-bottom:var(--space-m);
  align-items:center;
  grid-template-columns:1fr;
}
.program-lead + .program{ border-top:none; }
.program-lead h3{ font-size:clamp(1.5rem, 2.4vw, 2rem); }
.program-lead .program-who{ color:var(--accent-ink); opacity:0.72; }
.program-lead .program-main > p{ color:var(--accent-ink); opacity:0.86; }

@media (max-width:760px){
  .program{ grid-template-columns:1fr; gap:var(--space-s); }
  .program-lead{ gap:var(--space-m); }
}

/* ------------------------------ about page ------------------------------ */
/* Four paragraphs of identical weight was a wall. The order is evidence,
   the one idea worth quoting, then the invitation, and the type carries that. */
.about-editorial{ display:flex; flex-direction:column; gap:var(--space-xl); }

.about-head h2{ margin-bottom:0; max-width:none; }
.about-body .textlink{ margin-top:var(--space-xs); }

.about-evidence{
  display:grid; grid-template-columns:minmax(0, 340px) minmax(0, 1fr);
  gap:clamp(2rem, 5vw, 4rem); align-items:center;
}
.about-photo{
  width:min(100%, 340px); height:auto; aspect-ratio:1;
  border-radius:50%;
  object-fit:cover; object-position:center 30%;
}
.about-body p{ color:var(--ink-2); max-width:68ch; }
.about-body p:last-child{ margin-bottom:0; }

/* the line worth lifting out of the page */
.about-insight{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:var(--space-l);
}
.about-insight p{
  margin:0;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.25rem, 2.1vw, 1.75rem);
  line-height:1.2; letter-spacing:-0.02em;
  max-width:none;
  text-wrap:balance;
}

.about-close p{ margin:0; font-size:1.08rem; max-width:none; }

/* -------------------------- method: the loud one ------------------------ */
.method{ background:var(--surface-2); }
.method-head{ max-width:none; }

.lesson{
  margin-top:3rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  overflow:hidden;
}
.lesson-top{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0.5rem 1.2rem;
  padding:1.6rem clamp(1.4rem, 3vw, 2.4rem);
  background:var(--accent); color:var(--accent-ink);
}
.lesson-top h3{ margin:0; font-size:clamp(1.4rem, 2.6vw, 2.1rem); color:var(--accent-ink); }
.lesson-top .lesson-kind{ font-size:0.86rem; font-weight:600; opacity:0.85; }

.lesson-body{
  display:grid; grid-template-columns:1fr 1fr;
}
.lesson-cell{
  padding:clamp(1.4rem, 3vw, 2.2rem);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.lesson-cell:nth-child(2n){ border-right:none; }
.lesson-cell:nth-last-child(-n+2){ border-bottom:none; }
.lesson-cell h4{ color:var(--accent); margin-bottom:0.7rem; }
.lesson-cell p{ color:var(--ink-2); font-size:0.96rem; }
.lesson-fr{
  font-family:var(--display); font-weight:600;
  font-size:1.15rem; color:var(--ink); letter-spacing:-0.02em;
}
.lesson-compare{ display:grid; gap:0.4rem; margin-top:1rem; font-size:0.95rem; }
.lesson-compare b{ font-weight:600; }
.wrong{ color:var(--ink-2); text-decoration:line-through; text-decoration-thickness:1px; }
.right{ color:var(--ink); }

/* ------------------------------ testimonials ---------------------------- */
/* polaroids: a wall of pinned-up notes, each tilted a degree or two */
.wall{
  margin-top:3rem;
  columns:3; column-gap:1.6rem;
}
.wall-3{ columns:3; }

.polaroid{
  break-inside:avoid;
  margin:0 0 1.9rem;
  padding:0.85rem 0.85rem 0;
  background:#fff;
  border-radius:3px;
  box-shadow:0 1px 2px rgba(72,40,12,0.10), 0 12px 26px -14px rgba(72,40,12,0.30);
  transform:rotate(calc(var(--tilt, 0) * 1.5deg));
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.polaroid:hover{
  transform:rotate(0deg) translateY(-3px);
  box-shadow:0 2px 4px rgba(72,40,12,0.12), 0 20px 34px -16px rgba(72,40,12,0.34);
}
.polaroid blockquote{
  margin:0;
  min-height:7.5rem;
  background:var(--surface-2);
  padding:1.5rem 1.35rem;
  font-family:var(--display); font-weight:600;
  font-size:1rem; line-height:1.42; letter-spacing:-0.015em;
  color:var(--ink);
  text-wrap:pretty;
}
.polaroid blockquote::before{ content:"\201C"; }
.polaroid blockquote::after{ content:"\201D"; }
.polaroid figcaption{
  display:flex; align-items:baseline; gap:0.5rem; flex-wrap:wrap;
  padding:0.95rem 0.4rem 1.15rem;
  font-family:var(--body); font-size:0.8rem; color:var(--ink-2);
}
.polaroid figcaption b{
  font-family:var(--display); font-weight:700; font-size:0.95rem;
  letter-spacing:-0.02em; color:var(--ink);
}
.polaroid figcaption time{ margin-left:auto; font-size:0.74rem; opacity:0.8; }
/* a real photograph on the same paper as the reviews, same tilt, same shadow */
.polaroid-photo img{
  display:block; width:100%; height:auto; aspect-ratio:1;
  object-fit:cover; border-radius:2px;
}
.polaroid-photo figcaption{ display:block; font-style:italic; }

/* the longest reviews get a slightly smaller face so one card cannot dominate the wall */
.polaroid-long blockquote{ font-size:0.94rem; line-height:1.45; }

.review-summary{
  display:flex; align-items:baseline; gap:0.6rem; flex-wrap:wrap;
  font-size:1rem; color:var(--ink-2); margin-top:1.4rem;
}
.review-summary strong{
  font-family:var(--display); font-weight:800; font-size:1.7rem;
  letter-spacing:-0.03em; color:var(--accent);
}

@media (max-width:1024px){ .wall, .wall-3{ columns:2; } }
@media (max-width:620px){ .wall, .wall-3{ columns:1; } }
@media (prefers-reduced-motion:reduce){
  .polaroid{ transform:none; }
  .polaroid:hover{ transform:none; }
}

/* ------------------------------- writing -------------------------------- */
.writing-list{ margin-top:2.5rem; display:grid; }
.writing-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:baseline;
  padding:1.5rem 0;
  border-top:1px solid var(--line);
}
.writing-row:last-child{ border-bottom:1px solid var(--line); }
.writing-row time{ font-size:0.85rem; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.writing-row h3{ margin:0; font-size:1.2rem; }
.writing-row:hover h3{ color:var(--accent); }
.writing-row p{ margin:0.35rem 0 0; color:var(--ink-2); font-size:0.95rem; }

/* ---------------------------------- FAQ --------------------------------- */
.faq{ margin-top:2rem; max-width:80ch; }
.faq-item{
  border-bottom:1px solid var(--line);
  padding:0.4rem 0;
}
.faq-item summary{
  cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.02rem, 1.5vw, 1.15rem); letter-spacing:-0.02em;
  padding:1rem 2.5rem 1rem 0; position:relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:0.4rem; top:50%; transform:translateY(-50%);
  font-family:var(--body); font-weight:400; font-size:1.5rem; color:var(--accent);
  transition:transform .2s var(--ease);
}
.faq-item[open] summary::after{ content:"\2013"; }
.faq-item summary:hover{ color:var(--accent); }
.faq-item p{ color:var(--ink-2); margin:0 0 1.2rem; max-width:70ch; }

/* --------------------------------- CTA ---------------------------------- */
.cta{ text-align:center; }
.cta h2{ max-width:18ch; margin-inline:auto; }
.cta p{ color:var(--ink-2); max-width:46ch; margin:1rem auto 2rem; }
.booking{
  margin-top:3rem;
  border:1px solid var(--line); border-radius:var(--r-panel);
  overflow:hidden; background:var(--surface);
}

/* -------------------------------- footer -------------------------------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:clamp(2.5rem, 5vw, 4rem) 0 2rem;
  font-size:0.93rem;
}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.5rem;
}
.footer-brand{
  font-family:var(--display); font-weight:800; font-size:1.18rem;
  letter-spacing:-0.035em; margin-bottom:0.6rem;
}
.footer-brand span{ color:var(--accent); }
.site-footer p{ color:var(--ink-2); max-width:34ch; }
.footer-col h4{ margin-bottom:0.9rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:0.6rem; }
.footer-col a{ color:var(--ink-2); }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
  padding-top:1.5rem; border-top:1px solid var(--line);
  font-size:0.85rem; color:var(--ink-2);
}

/* ------------------------------ page header ----------------------------- */
.page-head{
  padding:clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom:1px solid var(--line);
}
.page-head h1{ max-width:20ch; }
.page-head .lede{ margin-top:1.2rem; max-width:none; }

/* --------------------------- page banner image --------------------------- */
.page-media{ padding-top:clamp(2rem, 4vw, 3rem); }
.page-media img{
  width:100%; height:auto; aspect-ratio:16/9;
  max-height:min(52vh, 460px);
  object-fit:cover;
  border-radius:var(--r-panel);
}

/* a square photo shown whole, no circle crop */
.photo-panel{
  width:100%; height:auto; aspect-ratio:1;
  object-fit:cover;
  border-radius:var(--r-panel);
}

/* ------------------------------- content -------------------------------- */
.split{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.stack{ display:grid; gap:1.25rem; margin-top:2.5rem; }
.point{
  display:grid; grid-template-columns:minmax(0, 0.38fr) minmax(0, 1fr);
  gap:1.5rem 2rem;
  padding:1.6rem 0; border-top:1px solid var(--line);
}
.point:last-child{ border-bottom:1px solid var(--line); }
.point h3{ margin:0; }
.point p{ margin:0; color:var(--ink-2); }

/* -------------------------------- contact form --------------------------- */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-form{
  display:grid; gap:1.1rem; align-content:start;
  border:1px solid var(--line); border-radius:var(--r-panel);
  background:var(--surface); padding:clamp(1.5rem, 3vw, 2.25rem);
}
.form-field{ display:grid; gap:0.45rem; }
.form-field label{ font-size:0.9rem; font-weight:600; }
.form-field input, .form-field textarea{
  font:inherit; font-size:0.98rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--line-strong); border-radius:10px;
  padding:0.7rem 0.9rem; width:100%; resize:vertical;
  transition:border-color .18s var(--ease);
}
.form-field input:focus, .form-field textarea:focus{
  outline:none; border-color:var(--accent);
}
.contact-form .btn{ justify-self:start; border:none; cursor:pointer; }
.form-note{ font-size:0.85rem; color:var(--ink-2); margin:0; }
.form-success{
  font-size:0.95rem; font-weight:600; color:var(--accent); margin:0;
}
.contact-form.is-sent .form-field,
.contact-form.is-sent .btn,
.contact-form.is-sent .form-note{ display:none; }

.levels{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem; margin-top:2.5rem; }
.level{
  border:1px solid var(--line); border-radius:var(--r-panel);
  padding:1.8rem; background:var(--surface);
}
.level .level-code{
  font-family:var(--display); font-weight:800; font-size:1.9rem;
  letter-spacing:-0.03em; color:var(--accent); display:block; margin-bottom:0.6rem;
}
.level p{ margin:0; color:var(--ink-2); font-size:0.96rem; }

.exams{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.25rem; margin-top:2.5rem; }
.exam{
  border:1px solid var(--line); border-radius:var(--r-panel);
  padding:1.8rem; background:var(--surface);
}
.exam h3{ margin-bottom:0.5rem; }
.exam p{ margin:0; color:var(--ink-2); font-size:0.96rem; }
.exam-feature{
  grid-column:1 / -1;
  background:var(--accent); color:var(--accent-ink);
  border-color:transparent;
  padding:clamp(1.8rem, 3.5vw, 2.6rem);
}
.exam-feature h3{ color:var(--accent-ink); font-size:clamp(1.5rem, 2.6vw, 2rem); }
.exam-feature p{ color:var(--accent-ink); opacity:0.88; max-width:70ch; }
.exam-feature .label{ color:var(--accent-ink); opacity:0.75; }

.note{
  margin-top:2.5rem; padding:2rem;
  background:var(--accent-wash); border-radius:var(--r-panel);
}
.note h3{ margin-bottom:0.6rem; }
.note p{ color:var(--ink-2); margin-bottom:1rem; }

/* -------------------------------- pricing -------------------------------- */
/* Same shape as .programs: the tier that matters gets the tint and the room,
   the other two are plain rows divided by a hairline. Three identical bordered
   boxes were the first draft and are an anti-reference sitewide. */
.tiers{ margin-top:var(--space-l); }

.tier{
  display:grid;
  grid-template-columns:minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap:var(--space-m) clamp(2rem, 5vw, 4.5rem);
  padding-block:var(--space-l);
  border-top:1px solid var(--line);
}
.tier:last-child{ border-bottom:1px solid var(--line); }
.tier-aside h3{ margin:0 0 var(--space-2xs); }
.tier-who{ margin:0 0 var(--space-xs); font-size:0.88rem; color:var(--ink-2); }
.tier-main .btn{ margin-top:var(--space-xs); }

.tier-lead{
  border-top:none;
  background:var(--accent-wash);
  border-radius:var(--r-panel);
  padding:clamp(1.75rem, 3.6vw, 3rem);
  margin-bottom:var(--space-m);
  align-items:center;
}
.tier-lead + .tier{ border-top:none; }
.tier-pull{
  margin:0 0 0.3rem;
  font-family:var(--display); font-weight:800;
  font-size:clamp(2rem, 3.6vw, 3rem);
  line-height:1; letter-spacing:-0.03em;
  color:var(--accent);
}
.tier-pull sup{
  font-family:var(--body); font-weight:600; font-size:0.35em;
  color:var(--ink-2); margin-left:0.2rem;
}
.tier-lead h3{ font-size:clamp(1.5rem, 2.4vw, 2rem); }
.tier-lead .tier-who{ color:var(--accent-ink); opacity:0.75; }

.tier-features{
  list-style:none; margin:0 0 1.4rem; padding:0;
  display:grid; gap:0.55rem; font-size:0.95rem; color:var(--ink-2);
}
.tier-features li{ padding-left:1.4rem; position:relative; }
.tier-features li::before{
  content:"\2713"; position:absolute; left:0; top:0.05em;
  color:var(--accent); font-weight:700;
}
.tier-lead .tier-features{ color:var(--accent-ink); opacity:0.9; }

@media (max-width:760px){
  .tier{ grid-template-columns:1fr; gap:var(--space-s); }
  .tier-lead{ gap:var(--space-m); }
}

/* --------------------------------- chips -------------------------------- */
.chip{
  display:inline-block;
  padding:0.32rem 0.7rem; margin-bottom:0.9rem;
  border-radius:var(--r-chip);
  background:var(--accent-wash); color:var(--accent);
  font-size:0.76rem; font-weight:600; letter-spacing:0.03em;
}
.chip-sm{ font-size:0.7rem; padding:0.2rem 0.55rem; margin-bottom:0.5rem; }
.chips{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:2rem; }
.chip-btn{
  margin:0; cursor:pointer; border:1px solid var(--line);
  background:transparent; color:var(--ink-2); font-family:var(--body);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.chip-btn:hover{ border-color:var(--accent); color:var(--accent); }
.chip-btn.is-on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* --------------------------------- post --------------------------------- */
.post{ max-width:68ch; margin:0 auto; }
.post-meta{
  display:flex; gap:var(--space-m); align-items:baseline; flex-wrap:wrap;
  font-size:0.88rem; color:var(--ink-2);
  margin:0;
}

/* the block written to be quoted on its own by an answer engine */
/* No left stripe. A coloured border down one edge is never the intentional
   choice, so the whole block carries the tint instead and the label sits inline
   with the first line rather than floating above it in tracked capitals. */
.tldr{
  margin:0 0 var(--space-l);
  padding:var(--space-m) var(--space-m) calc(var(--space-m) - 0.3rem);
  background:var(--surface-2);
  border-radius:var(--r-panel);
}
.tldr h2{
  margin:0 0 var(--space-2xs);
  font-family:var(--display);
  font-size:0.95rem; font-weight:700; letter-spacing:-0.01em;
  color:var(--accent);
}
.tldr p{
  margin:0;
  font-family:var(--display); font-weight:600;
  font-size:1.08rem; line-height:1.45; letter-spacing:-0.015em;
  color:var(--ink);
}

.post table{
  width:100%; border-collapse:collapse; margin:2rem 0;
  font-size:0.95rem;
}
.post th, .post td{
  text-align:left; padding:0.85rem 1rem;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.post thead th{
  font-family:var(--body); font-weight:600; font-size:0.8rem;
  letter-spacing:0.04em; color:var(--accent);
  border-bottom:2px solid var(--accent-wash);
}
.post tbody tr:last-child td{ border-bottom:none; }

.post-faq{ margin-top:3rem; padding-top:2.4rem; border-top:1px solid var(--line); }
.post-faq h2{ margin-bottom:0.6rem; }

.sources{ margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.sources h2{
  font-family:var(--display); font-size:0.95rem; font-weight:700;
  letter-spacing:-0.01em; color:var(--ink-2); margin-bottom:var(--space-xs);
}
.sources ul{ margin:0; padding-left:1.1rem; }
.sources li{ font-size:0.88rem; color:var(--ink-2); margin-bottom:0.4rem; }
.sources a{ color:var(--accent); }
.sources a:hover{ text-decoration:underline; }

.related{ background:var(--surface-2); }
.related .writing-row:last-child{ border-bottom:1px solid var(--line); }
.post h2{ font-size:clamp(1.4rem, 2.2vw, 1.85rem); margin-top:2.2em; }
.post p{ color:var(--ink-2); font-size:1.05rem; }
.post ul, .post ol{ color:var(--ink-2); padding-left:1.2rem; margin:0 0 1.4em; }
.post li{ margin-bottom:0.5rem; }
.post blockquote{
  margin:1.6em 0; padding:1.2rem 1.5rem;
  background:var(--surface-2); border-radius:var(--r-panel);
}
.post blockquote p{
  font-family:var(--display); font-weight:600; letter-spacing:-0.02em;
  color:var(--ink); font-size:1.08rem; margin-bottom:0.4em;
}
.post blockquote p:last-child{ margin-bottom:0; }
.post strong{ color:var(--ink); }

/* -------------------------------- motion -------------------------------- */
.rise{ opacity:0; transform:translateY(18px); }
.rise.in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.hero .rise{ transition-delay:calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion:reduce){
  .rise, .rise.in{ opacity:1; transform:none; transition:none; }
  .btn:active{ transform:none; }
  .program:hover{ transform:none; }
}

/* ------------------------------ responsive ------------------------------ */
/* German nav labels are the widest: tighten before the hamburger takes over */
@media (max-width:1060px){
  .nav-links{ gap:1.25rem; }
  .nav-brand{ font-size:1.05rem; }
  .nav-right{ gap:0.6rem; }
  .nav-cta{ padding:0.55rem 1rem; font-size:0.86rem; }
}

@media (max-width:1024px){
  .levels{ grid-template-columns:1fr; }
  .quotes{ grid-template-columns:1fr; }
  .quote:nth-child(2){ transform:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .proof-grid{ grid-template-columns:1fr 1fr; }
  .proof-item:nth-child(2n){ border-right:none; }
  .proof-item:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}

@media (max-width:820px){
  .hero-grid, .split, .about-evidence{ grid-template-columns:1fr; }
  .about-photo{ width:min(100%, 220px); margin-inline:auto; }
  .hero-media{ order:-1; width:100%; max-width:340px; margin-inline:auto; min-height:0; }
  .hero-media::before{ width:min(100%, 300px); }
  .hero-portrait{ width:min(100%, 320px); }
  .hero h1{ max-width:none; }
  .lesson-body{ grid-template-columns:1fr; }
  .lesson-cell{ border-right:none; }
  .lesson-cell:nth-last-child(2){ border-bottom:1px solid var(--line); }
  .exams{ grid-template-columns:1fr; }
  .point{ grid-template-columns:1fr; gap:0.5rem; }
  .writing-row{ grid-template-columns:1fr; gap:0.4rem; }
}

@media (max-width:820px){
  .nav-links{
    position:fixed; top:var(--header-h); right:0; bottom:0;
    width:min(86vw, 340px);
    flex-direction:column; align-items:stretch; gap:0;
    padding:1.5rem;
    background:var(--surface);
    border-left:1px solid var(--line);
    transform:translateX(102%);
    transition:transform .3s var(--ease);
    overflow-y:auto;
    font-size:1.05rem;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links > li{ border-bottom:1px solid var(--line); }
  .nav-links > li > a{ display:block; padding:1rem 0; }
  .nav-links > li > a::after{ display:none; }
  .has-dropdown .dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; background:transparent;
    display:none; padding:0 0 0.6rem 0.8rem; min-width:0;
  }
  .has-dropdown.open .dropdown{ display:block; }
  .nav-toggle{ display:block; }
  .nav-right .nav-cta{ display:none; }
  .lang-toggle [data-set-lang]{ padding:0.5rem 0.7rem; }  /* 40px tap target on phones */
  .lang-switch summary{ padding:0.6rem 0.8rem; }
  .nav-mobile-cta{ display:block; border-bottom:none !important; padding-top:1.4rem; }
  .nav-mobile-cta .btn{ width:100%; }
  body.nav-open{ overflow:hidden; }
  body.nav-open::after{
    content:""; position:fixed; inset:var(--header-h) 0 0 0;
    background:rgba(10, 8, 6, 0.42); z-index:90;
  }
  .footer-grid{ grid-template-columns:1fr; gap:2rem; }
}

@media (max-width:370px){
  .nav{ gap:0.6rem; padding-inline:1rem; }
  .nav-brand{ font-size:1rem; letter-spacing:-0.04em; }
  .nav-right{ gap:0.5rem; }
  .lang-toggle [data-set-lang]{ padding:0.5rem 0.5rem; }
}

@media (max-width:560px){
  .proof-grid{ grid-template-columns:1fr; }
  .proof-item{ border-right:none; border-bottom:1px solid var(--line); }
  .proof-item:last-child{ border-bottom:none; }
}