/* ============================================================
   Productivity Habits — site.css  (SINGLE SOURCE OF TRUTH)
   Shared design tokens + component library for every page.
   Edit here once; all pages update. Do not fork per page.
   ============================================================ */
/* ============================================================
   Productivity Habits — Design Tokens (shared, binding)
   One system for every page. No ad-hoc values.
   ============================================================ */
:root {
  /* ---- Surfaces & brand ---- */
  --blue-authoritarian: #020510;  /* darkest surface */
  --blue-supportive:    #0C1F2D;  /* standard navy surface */
  --white:              #FBFCFD;
  --paper:              #F4F6F8;  /* light section change (designer's warmer tone) */

  /* ---- Accent (single accent, two contexts) ---- */
  --accent:          #5389C8;   /* accent on DARK surfaces (AA on navy) */
  --accent-ink:      #3E6FA8;   /* accent as text/fill on LIGHT (AA on white, AA white-on-fill) */
  --accent-ink-hover:#34608F;

  /* ---- Warm mini-accents (designer's palette — tiny doses only, never as a fill) ---- */
  --sun:   #E2BC3C;
  --tile:  #E2553C;
  --grass: #5BA67E;

  /* ---- Text ---- */
  --ink:          #0C1F2D;   /* body on light */
  --ink-muted:    #4E5D69;   /* secondary on light */
  --ink-faint:    #7C8892;
  --on-dark:      #FBFCFD;   /* body on dark */
  --on-dark-muted:#A6B6C3;   /* secondary on dark */
  --on-dark-faint:#697D8C;

  /* ---- Hairlines ---- */
  --line-dark:  rgba(255,255,255,.12);
  --line-light: rgba(12,31,45,.12);

  /* ---- Type ---- */
  --font-primary: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-eyebrow: .75rem;   /* 12 */
  --text-sm:      .875rem;  /* 14 */
  --text-base:    1rem;     /* 16 */
  --text-lg:      1.25rem;  /* 20 */
  --text-xl:      1.625rem; /* 26 */
  --text-2xl:     2.25rem;  /* 36 */
  --text-3xl:     3rem;     /* 48 */
  --text-4xl:     4rem;     /* 64 */
  --leading-tight: 1.08;
  --leading-snug:  1.22;
  --leading-body:  1.6;
  --tracking-eyebrow: .14em;

  /* fluid headline sizes */
  --h1: clamp(2.5rem, 5.4vw, 4rem);
  --h2: clamp(1.9rem, 3.2vw, 2.75rem);
  --display: clamp(1.75rem, 3.2vw, 2.75rem);

  /* ---- Spacing ---- */
  --space-1: .25rem;  --space-2: .5rem;  --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.5rem; --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;   --space-9: 6rem;  --space-10: 8rem;

  /* ---- Radius ---- */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;

  /* ---- Layout ---- */
  --maxw: 1440px;
  --maxw-content: 1180px;
  --maxw-text: 660px;
  --pad: 32px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--white);
  overflow-x: clip; /* clip (not hidden) so it never becomes a scroll container that breaks position:sticky */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }

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

/* Skip link */
.skip {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(-120%);
  top: 8px; z-index: 200; background: var(--white); color: var(--ink);
  padding: 10px 18px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600;
  transition: transform .15s ease;
}
.skip:focus-visible { transform: translateX(-50%) translateY(0); outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Eyebrow / accents */
.eyebrow {
  display: inline-block;
  font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; font-weight: 600; color: var(--accent-ink);
}
.accent { color: var(--accent); }
.accent-ink { color: var(--accent-ink); }
.s-dark .eyebrow, .s-darkest .eyebrow { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600;
  padding: 14px 24px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--accent-ink); color: var(--white); }
.btn-primary:hover { background: var(--accent-ink-hover); transform: translateY(-1px); }
.btn-ghost-dark { border-color: var(--line-dark); color: var(--on-dark); }
.btn-ghost-dark:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost-light { border-color: var(--line-light); color: var(--ink); }
.btn-ghost-light:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

/* text link with arrow */
.tlink { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--accent-ink); }
.tlink .arrow { transition: transform .15s ease; }
.tlink:hover .arrow { transform: translateX(3px); }

/* ============================================================
   Navigation — transparent over hero, solid navy on scroll.
   No glass. Always legible.
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px 0; background: transparent;
  transition: padding .2s ease, background .2s ease, box-shadow .2s ease;
}
.nav.scrolled {
  padding: 12px 0;
  /* designer's original: translucent dark glass, not opaque navy */
  background: rgba(2,5,16,.82);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-dark);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.8);
}
.nav-inner {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
}
.navlogo { display: flex; align-items: center; flex: 0 0 auto; }
.navlogo svg { height: 30px; width: auto; }
.navgroup { display: flex; align-items: center; gap: var(--space-5); }

.navlinks { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.navlinks > li { position: relative; }
.navlinks > li > a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--on-dark); opacity: .85;
  font-size: var(--text-sm); font-weight: 500; padding-block: var(--space-2);
  transition: opacity .15s ease;
}
.navlinks > li > a:hover, .navlinks > li > a:focus-visible { opacity: 1; }
.navlinks a.active { opacity: 1; }
.navlinks .chev { width: 13px; height: 13px; opacity: .65; transition: transform .15s ease; }
.navitem:hover .chev, .navitem:focus-within .chev { transform: rotate(180deg); }

/* Dropdown — same dark-glass surface as the scrolled nav, so it reads as
   part of the navbar rather than a separate floating card */
.dropdown {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 250px; display: flex; flex-direction: column; padding: var(--space-2);
  background: rgba(2,5,16,.92);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md); box-shadow: 0 24px 48px -18px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease; z-index: 120;
}
.dropdown::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.navitem:hover .dropdown, .navitem:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.dropdown a {
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--on-dark-muted); font-size: var(--text-sm); font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.dropdown a:hover { background: rgba(255,255,255,.06); color: var(--on-dark); }
.dropdown .dropdown-all {
  margin-top: var(--space-1); border-top: 1px solid var(--line-dark);
  color: var(--accent); font-weight: 600;
}
/* dropdown item for a page that isn't live yet — present, not clickable, ready to unlock */
.dropdown .soon {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--on-dark-faint); font-size: var(--text-sm); font-weight: 500; cursor: default;
}
.dropdown .soon .tag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-dark-faint); opacity: .8;
}

/* Language switcher — DE | EN pair; active language bright, the other dimmed */
.lang-pair {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); font-weight: 600; letter-spacing: .04em;
}
.lang-pair .lang-cur { color: var(--on-dark); opacity: 1; }
.lang-pair .lang-sep { color: var(--on-dark); opacity: .3; }
.lang-pair .lang-switch {
  color: var(--on-dark); opacity: .45;
  padding-block: var(--space-2);
  transition: opacity .15s ease;
}
.lang-pair .lang-switch:hover, .lang-pair .lang-switch:focus-visible { opacity: .85; }
.mobile-nav > .lang-pair { margin-top: var(--space-5); }

/* Mobile toggle */
.nav-toggle {
  display: none; background: none; border: 0; color: var(--on-dark); cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile panel — hidden via the [hidden] attribute; slides via transform */
.mobile-nav {
  display: flex; flex-direction: column; position: fixed; inset: 0 0 0 auto; z-index: 99;
  width: min(360px, 86vw); background: var(--blue-authoritarian);
  border-left: 1px solid var(--line-dark);
  padding: 96px var(--space-6) var(--space-6); overflow-y: auto;
  transform: translateX(100%); transition: transform .24s ease;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav[hidden] { display: none; }
.mobile-backdrop {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(2,5,16,.5); opacity: 0; transition: opacity .24s ease;
}
.mobile-backdrop.open { opacity: 1; }
.mobile-backdrop[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; }
.mobile-nav li + li { border-top: 1px solid var(--line-dark); }
.mobile-nav a { display: block; padding: var(--space-4) 0; color: var(--on-dark); font-size: var(--text-lg); font-weight: 500; }
.mobile-nav a:hover { color: var(--accent); }
.mobile-nav .btn { width: 100%; justify-content: center; }

/* ============================================================
   Sections & shared blocks
   ============================================================ */
.section { padding-block: var(--space-9); }
.section-tight { padding-block: var(--space-8); }
.s-dark    { background: var(--blue-supportive); color: var(--on-dark); }
.s-darkest { background: var(--blue-authoritarian); color: var(--on-dark); }
.s-light   { background: var(--white); color: var(--ink); }
.s-paper   { background: var(--paper); color: var(--ink); }
.s-dark p.lead, .s-darkest p.lead { color: var(--on-dark-muted); }
.s-light p.lead, .s-paper p.lead { color: var(--ink-muted); }

.section-head { max-width: var(--maxw-text); }
.section-head.sh-center { max-width: 860px; margin-inline: auto; text-align: center; }
.section-head + * { margin-top: var(--space-7); }
.section-head h2 { font-size: var(--h2); line-height: var(--leading-snug); margin-top: var(--space-3); }
p.lead { font-size: var(--text-lg); line-height: var(--leading-snug); margin-top: var(--space-4); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; background: var(--blue-authoritarian); color: var(--on-dark);
  overflow: hidden; min-height: 100vh; display: flex; align-items: center;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg video, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(102deg, rgba(2,5,16,.92) 0%, rgba(2,5,16,.72) 46%, rgba(2,5,16,.34) 100%),
    linear-gradient(180deg, transparent 55%, var(--blue-authoritarian) 100%);
}
.hero-inner { position: relative; z-index: 2; padding-block: 128px var(--space-9); width: 100%; }
.hero-copy { max-width: 640px; }
.hero h1 { font-size: var(--h1); line-height: var(--leading-tight); margin: var(--space-5) 0; max-width: 14ch; }
.hero p { font-size: var(--text-lg); color: var(--on-dark-muted); max-width: 48ch; line-height: var(--leading-snug); }
.hero-cta { display: flex; gap: var(--space-4); margin-top: var(--space-7); flex-wrap: wrap; align-items: center; }
@media (max-width: 920px) {
  .hero { min-height: 88vh; }
  .hero-inner { padding-block: 120px var(--space-8); }
}

/* ============================================================
   TRUST — continuous logo marquee (pauses on hover; static when
   reduced motion is preferred)
   ============================================================ */
.trust { background: var(--blue-authoritarian); padding-block: var(--space-8); overflow: hidden; }
.trust-label { font-size: var(--text-base); color: var(--on-dark-muted); text-align: center; margin-bottom: var(--space-6); }
.trust-marquee {
  position: relative; width: 100%; max-width: 960px; margin-inline: auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.trust-track {
  display: flex; align-items: center; width: max-content;
  animation: trust-scroll 46s linear infinite;
}
.trust-marquee:hover .trust-track { animation-play-state: paused; }
@keyframes trust-scroll { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
.trust-track img {
  width: auto; margin-right: var(--space-8); flex: 0 0 auto;
  filter: brightness(0) invert(1); opacity: .6;
}
.trust-track img[alt="SBB"]             { height: 17px; }
.trust-track img[alt="Medela"]          { height: 24px; }
.trust-track img[alt="Endress+Hauser"]  { height: 15px; }
.trust-track img[alt="Roche"]           { height: 32px; }
.trust-track img[alt="Migros Bank"]     { height: 17px; }
.trust-track img[alt="Vitra"]           { height: 21px; }
@media (prefers-reduced-motion: reduce) {
  .trust-track { animation: none; }
}

/* ============================================================
   ECONOMIC LEVER — text 1/3, figures 2/3
   ============================================================ */
.lever-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-8); align-items: center; }
.stat-row { display: grid; grid-template-columns: 1fr 1px 1fr; gap: var(--space-7); align-items: center; }
.stat-figure .stat-num { font-size: clamp(2.75rem, 4.5vw, 4rem); color: var(--accent); font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.stat-figure .stat-label { font-size: var(--text-base); color: var(--on-dark-muted); margin-top: var(--space-4); max-width: 30ch; }
.stat-divider { width: 1px; align-self: stretch; min-height: 110px; background: linear-gradient(180deg, transparent, var(--line-dark), transparent); }
@media (max-width: 900px) {
  .lever-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .stat-row { grid-template-columns: 1fr; gap: var(--space-6); }
  .stat-divider { display: none; }
}

/* ============================================================
   FACTOR — most companies vs. successful teams
   Neutral (not alarmist) for the negative column; brand blue for the path forward.
   ============================================================ */
.factor-frame {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden;
}
.factor-col { padding: var(--space-7) var(--space-7) var(--space-6); }
.factor-col-bad { border-right: 1px solid var(--line-light); }
.factor-rowlabel {
  display: block; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; font-weight: 700; color: var(--ink-faint); margin-bottom: var(--space-5);
}
.factor-col-bad .factor-rowlabel { color: #B23636; }
.factor-rowlabel.accent-ink { color: var(--accent-ink); }
.factor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.factor-list li { display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--text-lg); font-weight: 500; color: var(--ink); line-height: 1.35; }
.mark { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; }
.mark-neg { color: var(--ink); }
.mark-pos { color: var(--accent-ink); }
.factor-result {
  position: relative; display: flex; align-items: center; gap: var(--space-4);
  border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); margin-top: var(--space-6);
  font-size: var(--text-lg); font-weight: 600; line-height: 1.3;
}
.factor-result .mark { margin-top: 0; }
.factor-result-label {
  position: absolute; top: -10px; left: 20px; font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); color: #fff;
}
.factor-result.fail { background: rgba(178,54,54,.06); color: #A23030; border: 1px solid rgba(178,54,54,.28); }
.factor-result.fail .factor-result-label { background: #A83232; }
.factor-result.win { background: rgba(62,111,168,.07); color: var(--accent-ink); border: 1px solid rgba(62,111,168,.3); }
.factor-result.win .factor-result-label { background: var(--accent-ink); }
@media (max-width: 820px) {
  .factor-frame { grid-template-columns: 1fr; }
  .factor-col-bad { border-right: 0; border-bottom: 1px solid var(--line-light); }
}

/* ============================================================
   PULL IMAGE — navy scrim + a tall bottom fade that dissolves the
   photo into the section below (no grain, no blend gimmick)
   ============================================================ */
.pull-image { position: relative; overflow: hidden; color: var(--on-dark); min-height: 600px; display: flex; align-items: center; padding-block: var(--space-9); }
.pull-image-bg { position: absolute; inset: 0; z-index: 0; }
.pull-image-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04) brightness(.92); }
/* brand-blue duotone: multiplies the accent over the grayscale photo */
.pull-image-bg::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent); mix-blend-mode: multiply; opacity: .58;
}
/* fine film grain — adds texture, keeps it from looking flat/stock.
   Sits BELOW the fade so the bottom dissolve stays a clean, untextured navy. */
.pull-image-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
/* darkening for text legibility + a tall, seamless dissolve into the navy
   section below. Linear on TOP so its solid --blue-supportive bottom fully
   hides the radial (#020510, darker than the section) — the seam disappears. */
.pull-image-fade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 40%, rgba(12,31,45,.5) 68%, rgba(12,31,45,.86) 84%, var(--blue-supportive) 95%),
    radial-gradient(120% 100% at 50% 38%, rgba(2,5,16,.22), rgba(2,5,16,.5));
}
.pull-image-inner { position: relative; z-index: 3; text-align: center; max-width: 900px; margin-inline: auto; }
.pull-image-inner p { font-size: var(--display); line-height: 1.18; font-weight: 600; letter-spacing: -.02em; text-shadow: 0 2px 26px rgba(2,5,16,.45); }

/* ============================================================
   APPROACH — sticky headline + hairline numbered list (no glass)
   ============================================================ */
.approach-split { display: grid; grid-template-columns: .85fr 1fr; gap: var(--space-8); align-items: stretch; }
.approach-left { position: relative; }
.approach-left-inner { position: sticky; top: 120px; }
.approach-left .section-head h2 { line-height: 1.15; }
.approach-steps { display: flex; flex-direction: column; gap: var(--space-5); }
.astep {
  position: relative; display: flex; flex-direction: column;
  min-height: 300px; padding: var(--space-7);
  border-radius: var(--radius-lg);
  /* glass: faint top-lit gradient + die-cut bevel (inset light top, inset shadow bottom) */
  background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02) 60%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(2,5,16,.35), 0 24px 48px -30px rgba(2,5,16,.7);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.astep:hover { transform: translateY(-2px); border-color: rgba(83,137,200,.5); }
.astep > div { display: flex; flex-direction: column; flex: 1; }
.astep-n {
  position: absolute; top: var(--space-6); right: var(--space-7);
  font-size: var(--text-lg); font-weight: 600; color: var(--accent);
  line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; opacity: .55;
}
.astep h3 {
  font-size: clamp(1.75rem, 2.6vw, 2.4rem); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.08; color: var(--on-dark); margin: 0; max-width: 15ch;
}
.astep p {
  margin: 0; margin-top: auto; padding-top: var(--space-6);
  font-size: var(--text-lg); color: var(--on-dark-muted); line-height: 1.5; max-width: 44ch;
}
@media (max-width: 900px) {
  .approach-split { grid-template-columns: 1fr; gap: var(--space-6); }
  .approach-left-inner { position: static; }
}

/* ============================================================
   RESULTS — figures + testimonials (no glass, static numbers)
   ============================================================ */
.s-results .section-head { text-align: center; max-width: 760px; margin-inline: auto; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin: var(--space-8) 0; }
.kpi {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-6); min-height: 176px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10);
}
.kpi .n { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 600; color: var(--accent); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: var(--text-sm); color: var(--on-dark-muted); }
.tm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
.tm-card { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: stretch; }
.tm-card > img { width: 92px; height: 100%; align-self: stretch; min-height: 88px; border-radius: var(--radius-md); object-fit: cover; }
.tm-card > div { display: flex; flex-direction: column; height: 100%; }
.tm-card .quote { font-size: var(--text-lg); font-weight: 500; line-height: var(--leading-snug); color: var(--on-dark); margin: 0 0 var(--space-4); }
.tm-card .name { margin-top: auto; }
.tm-card .name { font-weight: 600; font-size: var(--text-sm); color: var(--on-dark); }
.tm-card .role { font-size: var(--text-eyebrow); letter-spacing: .04em; color: var(--on-dark-muted); text-transform: uppercase; margin-top: 3px; }
@media (max-width: 900px) { .kpis { grid-template-columns: 1fr 1fr; } .tm-cards { grid-template-columns: 1fr; gap: var(--space-6); } }
@media (max-width: 460px) { .kpis { grid-template-columns: 1fr; } }

/* ============================================================
   EXPLORE — two reference cards
   ============================================================ */
.nav-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.nav-button {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-7);
  border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  background: var(--white); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.nav-button:hover { border-color: var(--accent-ink); transform: translateY(-2px); box-shadow: 0 18px 40px -26px rgba(12,31,45,.4); }
.nav-button .nb-eyebrow { font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--accent-ink); }
.nav-button .nb-title { font-size: var(--text-lg); font-weight: 600; color: var(--ink); line-height: var(--leading-snug); margin-top: var(--space-1); max-width: 26ch; }
.nav-button .nb-go { margin-top: var(--space-5); }
@media (max-width: 760px) { .nav-buttons { grid-template-columns: 1fr; } }

/* ============================================================
   CTA / contact
   ============================================================ */
.cta-block { background: var(--blue-supportive); border-radius: var(--radius-lg); padding: var(--space-8); color: var(--on-dark); display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-7); align-items: center; }
.cta-block h2 { font-size: var(--h2); line-height: var(--leading-snug); margin-bottom: var(--space-4); }
.cta-block p { color: var(--on-dark-muted); }
.person { display: flex; align-items: center; gap: var(--space-4); }
.person .avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.person .name { font-weight: 600; }
.person .role { font-size: var(--text-sm); color: var(--on-dark-muted); }
.person .role a { color: var(--on-dark-muted); }
.person .role a:hover { color: var(--accent); }
@media (max-width: 760px) { .cta-block { grid-template-columns: 1fr; padding: var(--space-6); } }

/* Full-screen video CTA that dissolves seamlessly into the (darkest) footer */
.cta-final {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; display: flex; align-items: center;
  color: var(--on-dark); padding-block: var(--space-9);
}
.cta-final-bg { position: absolute; inset: 0; z-index: 0; background: var(--blue-authoritarian); }
.cta-final-bg video { width: 100%; height: 100%; object-fit: cover; }
.cta-final-fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(115% 85% at 50% 42%, rgba(2,5,16,.42), rgba(2,5,16,.76)),
    linear-gradient(180deg, var(--blue-authoritarian) 0%, transparent 22%, transparent 52%, rgba(2,5,16,.85) 84%, var(--blue-authoritarian) 100%);
}
.cta-final-inner {
  position: relative; z-index: 2; text-align: center;
  max-width: 900px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
.cta-final-inner h2 { font-size: var(--h1); line-height: var(--leading-tight); letter-spacing: -.02em; text-shadow: 0 2px 30px rgba(2,5,16,.5); }
.cta-final-inner p { font-size: var(--text-lg); color: var(--on-dark); opacity: .92; max-width: 58ch; text-shadow: 0 1px 18px rgba(2,5,16,.55); }
.cta-final-actions { margin-top: var(--space-3); }
.person-center { justify-content: center; text-align: left; margin-top: var(--space-6); }
@media (max-width: 820px) {
  /* content can exceed the viewport here — start below the fixed nav instead of centering */
  .cta-final { align-items: flex-start; padding-top: calc(84px + var(--space-8)); padding-bottom: var(--space-9); }
}

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--blue-authoritarian); color: var(--on-dark); padding-block: var(--space-8) var(--space-6); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); }
.footer h4 { font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--on-dark-faint); margin-bottom: var(--space-4); font-weight: 600; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer a { font-size: var(--text-sm); color: var(--on-dark-muted); }
.footer a:hover { color: var(--accent); }
.footer-claim { font-size: var(--text-lg); max-width: 22ch; line-height: var(--leading-snug); margin-bottom: var(--space-5); }
.footer-logo { display: inline-block; opacity: .9; margin-top: 13px; }
.footer-logo img { height: 44px; width: auto; display: block; }
.footer-logo svg { height: 26px; width: auto; display: block; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--line-dark); font-size: var(--text-sm); color: var(--on-dark-faint); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-6); } }

/* ============================================================
   Responsive nav + spacing
   ============================================================ */
@media (max-width: 1024px) {
  .navlinks { display: none; }
  .navgroup .btn { display: none; }
  .navgroup .lang-pair { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 600px) {
  :root { --pad: 20px; }
  .section { padding-block: var(--space-8); }
}

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

/* ============================================================
   INNER-PAGE COMPONENTS (shared) — page hero, offer/solution
   cards, centered CTA. Reused across solutions/programs/etc.
   ============================================================ */

/* Inner-page hero: dark band, understated (no decorative blobs) */
.page-hero { background: var(--blue-authoritarian); color: var(--on-dark); padding-block: clamp(130px, 15vw, 170px) var(--space-9); }
.page-hero .eyebrow { color: var(--accent); }
.page-hero h1 { font-size: var(--h1); line-height: var(--leading-tight); letter-spacing: -.02em; margin: var(--space-4) 0 var(--space-5); max-width: 18ch; }
.page-hero .lead { font-size: var(--text-lg); color: var(--on-dark-muted); max-width: 58ch; line-height: var(--leading-snug); margin: 0; }

/* Offer / solution cards */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.scard {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 264px; padding: var(--space-6);
  border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.scard:hover { transform: translateY(-4px); border-color: var(--accent-ink); box-shadow: 0 24px 48px -28px rgba(12,31,45,.35); }
.scard:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.scard .bignum { position: absolute; top: -.34em; right: .08em; font-size: 9rem; font-weight: 700; line-height: 1; color: var(--blue-supportive); opacity: .05; letter-spacing: -.04em; pointer-events: none; }
.scard .skicker { font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-ink); font-weight: 600; }
.scard h3 { font-size: var(--text-xl); line-height: var(--leading-snug); margin: var(--space-3) 0; max-width: 17ch; transition: color .2s ease; }
.scard:hover h3 { color: var(--accent-ink); }
.scard .q { font-size: var(--text-base); color: var(--ink-muted); line-height: var(--leading-snug); max-width: 40ch; }
.scard .go { margin-top: var(--space-5); display: inline-flex; align-items: center; gap: .45em; color: var(--accent-ink); font-weight: 600; font-size: var(--text-sm); }
.scard .go .arr { transition: transform .18s ease; }
.scard:hover .go .arr { transform: translateX(5px); }
/* featured card: full-width navy */
.scard.feat { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--space-7); min-height: 210px; background: var(--blue-supportive); border-color: transparent; color: var(--on-dark); }
.scard.feat:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 28px 56px -28px rgba(2,5,16,.6); }
.scard.feat .skicker { color: var(--accent); }
.scard.feat h3 { color: var(--on-dark); font-size: var(--text-2xl); max-width: 22ch; }
.scard.feat:hover h3 { color: var(--on-dark); }
.scard.feat .q { color: var(--on-dark-muted); max-width: 54ch; font-size: var(--text-lg); }
.scard.feat .go { color: var(--accent); }
.scard.feat .bignum { color: #fff; opacity: .06; font-size: 12rem; }
.scard.feat .feat-body { position: relative; z-index: 2; flex: 1; }
@media (max-width: 860px) { .card-grid { grid-template-columns: 1fr; } .scard.feat { flex-direction: column; align-items: flex-start; } }

/* Centered CTA (reusable) */
.cta-center { text-align: center; max-width: 640px; margin-inline: auto; }
.cta-center h2 { font-size: var(--h2); line-height: var(--leading-snug); margin: var(--space-3) 0 var(--space-5); }
.cta-center .lead { margin: 0 0 var(--space-6); }

/* ============================================================
   SOLUTION / DETAIL-PAGE COMPONENTS (shared across the 5
   solution pages). Reuse .kpis, .astep, .scard, .trust-marquee too.
   ============================================================ */

/* Detail hero: copy + media, dark band */
.detail-hero { background: var(--blue-authoritarian); color: var(--on-dark); padding-block: clamp(120px, 13vw, 160px) var(--space-9); }
.detail-hero .crumb, .hero .crumb { font-size: var(--text-sm); color: var(--on-dark-faint); margin-bottom: var(--space-5); }
.detail-hero .crumb a, .hero .crumb a { color: var(--on-dark-muted); }
.detail-hero .crumb a:hover, .hero .crumb a:hover { color: var(--accent); }
.detail-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: center; }
.detail-hero .eyebrow { color: var(--accent); }
.detail-hero h1 { font-size: var(--h1); line-height: var(--leading-tight); margin: var(--space-4) 0 var(--space-5); max-width: 16ch; }
.detail-hero .lead { font-size: var(--text-lg); color: var(--on-dark-muted); max-width: 46ch; line-height: var(--leading-snug); margin: 0; }
.detail-hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--line-dark); }
@media (max-width: 860px) { .detail-hero-grid { grid-template-columns: 1fr; gap: var(--space-6); } .detail-hero-media { display: none; } }

/* Big lead statement */
.statement { font-size: var(--display); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; max-width: 26ch; }
.statement.center { text-align: center; margin-inline: auto; }

/* Marker list (chevron rows) */
.marklist { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); max-width: var(--maxw-text); }
.marklist .row { display: flex; gap: var(--space-4); align-items: flex-start; font-size: var(--text-lg); line-height: 1.4; }
.marklist .mk { color: var(--accent-ink); font-weight: 700; flex: 0 0 auto; }
.s-dark .marklist .mk, .s-darkest .marklist .mk { color: var(--accent); }

/* two-col layout helper */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 860px) { .split-2 { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Boxed "wrong measures" list (on dark) */
.boxlist { border: 1px solid var(--line-dark); border-radius: var(--radius-lg); padding: var(--space-6); background: rgba(255,255,255,.035); }
.boxlist .bl-title { display: block; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--on-dark-faint); font-weight: 700; margin-bottom: var(--space-4); }
.boxlist .bl-item { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--line-dark); color: var(--on-dark-muted); font-size: var(--text-base); }
.boxlist .bl-item .x { color: var(--ink-faint); flex: 0 0 auto; }

/* Ladder / reframe statement */
.ladder { margin-top: var(--space-8); font-size: var(--text-2xl); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.ladder p { margin: 0; }
.ladder p + p { color: var(--on-dark-muted); }

/* Cause → effect list (dark by default; light-surface override below) */
.cause-effect { margin-top: var(--space-6); }
.ce-grouplab { font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); font-weight: 700; margin: var(--space-7) 0 var(--space-2); }
.ce-row { display: grid; grid-template-columns: 1fr auto 1.35fr; gap: var(--space-5); align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--line-dark); }
.ce-cause { font-weight: 600; color: var(--on-dark); }
.ce-arrow { color: var(--accent); }
.ce-effect { color: var(--on-dark-muted); }
.s-light .ce-row, .s-paper .ce-row { border-top-color: var(--line-light); }
.s-light .ce-cause, .s-paper .ce-cause { color: var(--ink); }
.s-light .ce-arrow, .s-paper .ce-arrow { color: var(--accent-ink); }
.s-light .ce-effect, .s-paper .ce-effect { color: var(--ink-muted); }
@media (max-width: 720px) { .ce-row { grid-template-columns: 1fr; gap: var(--space-1); } .ce-arrow { display: none; } .ce-effect { padding-left: var(--space-4); border-left: 2px solid var(--line-dark); } }

/* Today → method shift (on light) */
.shift { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-5); align-items: stretch; margin-top: var(--space-7); }
.shift .cell { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--line-light); background: var(--white); }
.shift .cell .lab { display: block; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 700; margin-bottom: var(--space-3); }
.shift .from .lab { color: var(--ink-faint); }
.shift .to { border-color: rgba(62,111,168,.35); background: rgba(62,111,168,.05); }
.shift .to .lab { color: var(--accent-ink); }
.shift .cell .v { color: var(--ink-muted); font-size: var(--text-base); line-height: 1.5; }
.shift .mid { align-self: center; color: var(--accent-ink); font-size: var(--text-xl); font-weight: 700; }
@media (max-width: 760px) { .shift { grid-template-columns: 1fr; } .shift .mid { transform: rotate(90deg); } }

/* Numbered lever cards (reuses .astep box) */
.lever-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 860px) { .lever-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lever-cards { grid-template-columns: 1fr; } }

/* 3-up card grid modifier */
.card-grid.tri { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .card-grid.tri { grid-template-columns: 1fr; } }

/* Related mini-cards row */
.rel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-5); }
@media (max-width: 640px) { .rel-grid { grid-template-columns: 1fr; } }

/* Text logos inside the shared marquee */
.trust-track .logo-txt { margin-right: var(--space-8); flex: 0 0 auto; color: var(--on-dark-muted); font-weight: 700; font-size: var(--text-base); opacity: .5; white-space: nowrap; }

/* KPI boxes on light sections (default styling is for dark) */
.s-light .kpi, .s-paper .kpi { background: var(--white); border-color: var(--line-light); }
.s-light .kpi .n, .s-paper .kpi .n { color: var(--accent-ink); }
.s-light .kpi .l, .s-paper .kpi .l { color: var(--ink-muted); }

/* ===== More reusable bits (solution pages) ===== */
/* Statement boxes for the approach-split right column (marker instead of a number) */
.step-plain { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; padding: var(--space-6); border-radius: var(--radius-lg); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10); transition: transform .15s ease, border-color .15s ease; }
.step-plain:hover { transform: translateY(-2px); border-color: rgba(83,137,200,.5); }
.step-plain .mk { font-size: var(--text-xl); color: var(--accent); line-height: 1; font-weight: 600; }
.step-plain p { font-size: var(--text-lg); color: var(--on-dark); line-height: 1.4; margin: 0; }

/* "Measures" box on light sections */
.s-light .boxlist, .s-paper .boxlist { background: var(--white); border-color: var(--line-light); }
.s-light .boxlist .bl-title, .s-paper .boxlist .bl-title { color: var(--ink-faint); }
.s-light .boxlist .bl-item, .s-paper .boxlist .bl-item { border-top-color: var(--line-light); color: var(--ink-muted); }

/* Read-next strip (continue reading) */
.readnext { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); max-width: var(--maxw-text); margin: var(--space-8) auto 0; padding: var(--space-5) var(--space-6); border: 1px solid var(--line-light); border-radius: var(--radius-lg); background: var(--white); text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.readnext:hover { border-color: var(--accent-ink); transform: translateY(-2px); box-shadow: 0 18px 40px -26px rgba(12,31,45,.4); }
.readnext .rn-lab { display: block; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-ink); font-weight: 600; margin-bottom: 4px; }
.readnext .rn-title { font-size: var(--text-lg); font-weight: 600; color: var(--ink); }
.readnext .rn-arrow { color: var(--accent-ink); font-size: var(--text-2xl); flex: 0 0 auto; }

/* Cause-effect column header (optional, desktop only) */
.ce-head { display: grid; grid-template-columns: 1fr auto 1.35fr; gap: var(--space-5); padding-bottom: var(--space-3); }
.ce-head span { font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--on-dark-faint); font-weight: 700; }
@media (max-width: 720px) { .ce-head { display: none; } }
/* small lead-in line inside a sticky headline */
.leadin { font-size: var(--text-sm); color: var(--on-dark-muted); margin-bottom: var(--space-3); }

/* ============================================================
   PROGRAM-PAGE COMPONENTS (shared across program-* pages).
   Reuse .detail-hero (+ .hero-cta), .kpis, .cause-effect (gains),
   .cta-block too.
   ============================================================ */

/* meta + trust bar (dark) */
.prog-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-8); }
.prog-meta-row .pm { font-size: var(--text-sm); color: var(--on-dark-muted); max-width: 22ch; }
.prog-meta-row .pm strong { display: block; color: var(--on-dark); font-size: var(--text-base); font-weight: 600; margin-bottom: 2px; }
.trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line-dark); }
.trust-row .logo-img { width: auto; filter: brightness(0) invert(1); opacity: .55; }
.trust-row .logo-img[alt="SBB"]{height:17px} .trust-row .logo-img[alt="Medela"]{height:24px} .trust-row .logo-img[alt="Endress+Hauser"]{height:15px} .trust-row .logo-img[alt="Roche"]{height:32px} .trust-row .logo-img[alt="Migros Bank"]{height:17px} .trust-row .logo-img[alt="Vitra"]{height:21px}
.trust-row .trust-more { font-size: var(--text-sm); color: var(--on-dark-faint); }

/* problem split + stat list (light) */
.prob-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.prob-nums { display: flex; flex-direction: column; gap: var(--space-5); }
.prob-num .n { font-size: var(--text-2xl); font-weight: 600; color: var(--accent-ink); line-height: 1.1; letter-spacing: -.02em; }
.prob-num .l { font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--space-1); }
@media (max-width:820px){ .prob-split { grid-template-columns: 1fr; gap: var(--space-6); } }

/* cost pull band (text only, darkest) */
.pull { background: var(--blue-authoritarian); color: var(--on-dark); }
.pull p { font-size: var(--display); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; max-width: 32ch; }

/* module accordion (dark) */
.mod-stage { margin-top: var(--space-7); }
.mod-stage-head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-4); }
.mod-stage-head h3 { font-size: var(--text-xl); color: var(--on-dark); }
.mod-stage-head .hrs { margin-left: auto; font-size: var(--text-sm); color: var(--on-dark-faint); }
.mod-acc { display: flex; flex-direction: column; gap: var(--space-3); }
.mod-acc details { border: 1px solid var(--line-dark); border-radius: var(--radius-md); background: rgba(255,255,255,.03); overflow: hidden; transition: border-color .15s ease; }
.mod-acc details[open] { border-color: rgba(83,137,200,.4); }
.mod-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); }
.mod-acc summary::-webkit-details-marker { display: none; }
.mod-acc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mod-acc .mnum { font-size: var(--text-sm); color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.mod-acc .mtitle { font-size: var(--text-lg); font-weight: 600; color: var(--on-dark); }
.mod-acc .mtime { font-size: var(--text-sm); color: var(--on-dark-faint); }
.mod-acc .mhint { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--on-dark-muted); }
.mod-acc .mchev { width: 18px; height: 18px; color: var(--on-dark-muted); transition: transform .2s ease; flex: 0 0 auto; }
.mod-acc .mhint svg { display: none; }
.mod-acc details[open] .mchev { transform: rotate(180deg); }
.mod-acc details[open] .mhint { display: none; }
.mod-acc .mbody { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: 0 var(--space-5) var(--space-5); }
.mod-acc .mbody .lbl { font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 700; color: var(--on-dark-faint); margin-bottom: var(--space-2); }
.mod-acc .mbody .result .lbl { color: var(--accent); }
.mod-acc .mbody p { color: var(--on-dark-muted); font-size: var(--text-base); line-height: 1.5; }
/* module not yet published — same slot, not expandable, "soon" tag instead of the hint arrow */
.mod-acc .msoon { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line-dark); border-radius: var(--radius-md); background: rgba(255,255,255,.03); cursor: default; }
.mod-acc .msoon .mnum, .mod-acc .msoon .mtitle, .mod-acc .msoon .mtime { color: var(--on-dark-faint); }
.mod-acc .msoon .mtag { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-faint); opacity: .8; }
.mod-light .mod-acc .msoon { background: #fff; border-color: var(--line-light); }
.mod-light .mod-acc .msoon .mnum, .mod-light .mod-acc .msoon .mtitle, .mod-light .mod-acc .msoon .mtime, .mod-light .mod-acc .msoon .mtag { color: var(--ink-faint); }
@media (max-width:640px){ .mod-acc .mbody { grid-template-columns: 1fr; gap: var(--space-4); } .mod-acc .mhint span { display:none; } }

/* advanced tier (optional) */
.tier.optional { border: 1px dashed var(--line-dark); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6); }
.tier-badge { display:inline-block; font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:700; color: var(--accent); background: rgba(83,137,200,.12); padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: var(--space-3); }
.tier.optional ul { list-style:none; margin: var(--space-3) 0 0; padding:0; display:flex; flex-direction:column; gap: 0; }
.tier.optional li { display:flex; justify-content:space-between; align-items:center; padding: var(--space-3) 0; border-top:1px solid var(--line-dark); color: var(--on-dark); }
.tier.optional li:first-child { border-top:0; }
.tier.optional li a { color: var(--accent); }
.tier.optional .mh { font-size: var(--text-sm); color: var(--on-dark-faint); }

/* module accordion — LIGHT two-column layout (Fundamentals content section) */
.mod-2col { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); margin-top: var(--space-7); }
.mod-2col > .mod-stage { min-width: 0; margin-top: 0; }
.mod-2col .mod-acc details, .mod-2col .mod-acc summary { min-width: 0; }
.mod-2col .mod-acc .mtitle { min-width: 0; overflow-wrap: normal; hyphens: none; }
.mod-2col .mod-acc .mtime { white-space: nowrap; }
.mod-2col .mod-acc .mhint { display: none; }
.mod-light .mod-stage-head h3 { color: var(--ink); }
.mod-light .mod-stage-head .eyebrow { color: var(--accent-ink); }
.mod-light .mod-stage-head .hrs { color: var(--ink-muted); }
.mod-light .mod-acc details { background:#fff; border:1px solid var(--line-light); }
.mod-light .mod-acc details[open] { border-color: rgba(62,111,168,.45); box-shadow: 0 8px 30px rgba(15,30,55,.06); }
.mod-light .mod-acc .mtitle { color: var(--ink); }
.mod-light .mod-acc .mnum { color: var(--accent-ink); }
.mod-light .mod-acc .mtime, .mod-light .mod-acc .mhint { color: var(--ink-muted); }
.mod-light .mod-acc .mchev { color: var(--ink-muted); }
.mod-light .mod-acc .mbody { grid-template-columns: 1fr; gap: var(--space-3); }
.mod-light .mod-acc .mbody .lbl { color: var(--ink-muted); }
.mod-light .mod-acc .mbody .result .lbl { color: var(--accent-ink); }
.mod-light .mod-acc .mbody p { color: var(--ink); }
.tier.optional.tier-light { border-color: var(--line-light); }
.tier.optional.tier-light .tier-badge { color: var(--accent-ink); background: rgba(62,111,168,.10); }
.tier.optional.tier-light .eyebrow { color: var(--ink-muted); }
.tier.optional.tier-light li { color: var(--ink); border-top-color: var(--line-light); }
.tier.optional.tier-light .mh { color: var(--ink-muted); }
@media (max-width: 860px){ .mod-2col { grid-template-columns: 1fr; gap: var(--space-6); } }
/* advanced tier shown as program links (light) */
.au-head { display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap:wrap; }
.au-badge { font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:700; color: var(--accent-ink); background: rgba(62,111,168,.10); padding:4px 10px; border-radius: var(--radius-pill); }
.au-ey { font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:700; color:var(--ink-muted); }
/* advanced tier reduced to a label + two plain buttons */
.further-trainings { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line-light); }
.ft-buttons { display:flex; gap: var(--space-4); flex-wrap:wrap; margin-top: var(--space-4); }

/* flow cards (4-up numbered, light) */
.flow-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-5); margin-top: var(--space-7); }
.gcard { padding: var(--space-6); border:1px solid var(--line-light); border-radius: var(--radius-lg); background: var(--white); }
.gcard .gn { font-size: var(--text-xl); font-weight: 600; color: var(--accent-ink); letter-spacing:-.02em; }
.gcard h3 { font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-2); color: var(--ink); }
.gcard p { color: var(--ink-muted); font-size: var(--text-base); line-height:1.5; }
@media (max-width:860px){ .flow-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .flow-grid { grid-template-columns: 1fr; } }

/* plain photo */
.photo { margin-top: var(--space-7); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-light); }
.s-dark .photo, .s-darkest .photo { border-color: var(--line-dark); }
.photo img { width: 100%; height: auto; display: block; }
.photo-crop img { aspect-ratio: 21/9; object-fit: cover; }

.deltas-foot { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--on-dark-faint); }
.s-light .deltas-foot, .s-paper .deltas-foot { color: var(--ink-faint); }

/* who split (pos/neg, light) */
.who-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
.who-split .col h3 { font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin-bottom: var(--space-4); }
.who-split .pos h3 { color: var(--accent-ink); }
.who-split .neg h3 { color: var(--ink-faint); }
.who-split ul { list-style: none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--space-3); }
.who-split li { display:flex; gap: var(--space-3); font-size: var(--text-base); color: var(--ink); align-items:flex-start; }
.who-split .pos li::before { content:""; width:7px; height:7px; border:1.5px solid var(--accent-ink); border-radius:50%; margin-top:.5em; flex:0 0 auto; }
.who-split .neg li::before { content:"—"; color: var(--ink-faint); flex:0 0 auto; }
@media (max-width:640px){ .who-split { grid-template-columns:1fr; gap: var(--space-6); } }

/* unternehmer grid (paper) */
.untern-grid { display:grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-8); align-items:start; }
.untern-stat .us-num { font-size: clamp(3rem,6vw,4.5rem); font-weight:600; color: var(--accent-ink); line-height:1; letter-spacing:-.03em; }
.untern-stat .us-text { margin-top: var(--space-4); color: var(--ink-muted); font-size: var(--text-base); line-height:1.55; max-width:42ch; }
/* one uniform statement size instead of a giant number + small paragraph */
.untern-stat .us-statement { font-size: var(--display); font-weight:600; line-height:1.18; letter-spacing:-.02em; color: var(--ink); }
.untern-points { display:flex; flex-direction:column; gap: var(--space-5); }
.untern-points .up h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.untern-points .up p { color: var(--ink-muted); font-size: var(--text-base); line-height:1.5; }
@media (max-width:820px){ .untern-grid { grid-template-columns:1fr; gap: var(--space-6); } }
/* untern-points as a 3-up row (points first), followed by a single boxed stat card below —
   the number stays in-scale with .kpi (clamp 2.5rem-3.5rem), never a full sentence at display size. */
.untern-points.row { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
@media (max-width:820px){ .untern-points.row { grid-template-columns:1fr; } }
.untern-card { margin-top: var(--space-8); display:flex; align-items:center; gap: var(--space-7); background: var(--white); border:1px solid var(--line-light); border-radius: var(--radius-lg); padding: var(--space-7); box-shadow: 0 18px 40px -30px rgba(12,31,45,.14); }
.untern-card .num { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight:600; color: var(--accent-ink); line-height:1; letter-spacing:-.03em; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.untern-card .caption { font-size: var(--text-base); color: var(--ink-muted); line-height:1.5; max-width:40ch; }
@media (max-width:600px){ .untern-card { flex-direction:column; align-items:flex-start; gap: var(--space-4); } }

/* feedback columns (dark) */
.fb-cols { display:grid; grid-template-columns:1fr 1fr; gap: var(--space-8); }
.fb-col-head { font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:700; color: var(--accent); margin-bottom: var(--space-4); }
.fb-item { padding: var(--space-5) 0; border-top: 1px solid var(--line-dark); }
.fb-col .fb-item:first-of-type { border-top:0; }
.fb-item .quote { font-size: var(--text-lg); color: var(--on-dark); line-height:var(--leading-snug); margin-bottom: var(--space-3); }
.fb-item .fb-who { font-size: var(--text-sm); color: var(--on-dark-muted); }
@media (max-width:820px){ .fb-cols { grid-template-columns:1fr; gap: var(--space-6); } }

/* testimonials — position buttons + featured quote (dark, two-column) */
.pb-split { display:grid; grid-template-columns: 320px 1fr; gap: var(--space-8); margin-top: var(--space-7); align-items:center; }
.pb-groups { display:flex; flex-direction:column; gap: var(--space-6); }
.pb-group-label { font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom: var(--space-3); }
.pb-btns { display:flex; flex-direction:column; align-items:stretch; gap: var(--space-3); }
.pb-btn { text-align:left; background: rgba(255,255,255,.05); border:1px solid var(--line-dark); border-radius: var(--radius-pill); padding: 10px 18px; cursor:pointer; color: var(--on-dark-muted); font-size: var(--text-sm); font-weight:600; transition: all .15s ease; }
.pb-btn:hover { color: var(--on-dark); border-color: rgba(83,137,200,.4); }
.pb-btn[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color:#fff; }
.fb-feature .fq { display:none; }
.fb-feature .fq[data-active="true"] { display:block; }
.fb-feature .quote { font-size: var(--text-xl); color:#fff; line-height: var(--leading-snug); }
.fb-feature .fb-who { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--on-dark-muted); }
@media (max-width:820px){
  .pb-split { grid-template-columns:1fr; gap: var(--space-6); }
  .pb-group-label { text-align:center; }
  .pb-btns { flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .pb-btn { text-align:center; }
  .fb-feature { text-align:center; }
}

/* results logos row (dark) */
.res-logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: var(--space-6) var(--space-8); margin-top: var(--space-8); padding-top: var(--space-7); border-top:1px solid var(--line-dark); }
.res-logos img { width:auto; filter: brightness(0) invert(1); opacity:.55; }
.res-logos img[alt="SBB"]{height:17px} .res-logos img[alt="Medela"]{height:24px} .res-logos img[alt="Endress+Hauser"]{height:15px} .res-logos img[alt="Roche"]{height:32px} .res-logos img[alt="Migros Bank"]{height:17px} .res-logos img[alt="Vitra"]{height:21px}

/* formats (light) */
.formats { display:grid; gap: var(--space-5); margin-top: var(--space-7); }
.formats-2 { grid-template-columns:1fr 1fr; }
.fmt { padding: var(--space-6); border:1px solid var(--line-light); border-radius: var(--radius-lg); background: var(--white); display:flex; flex-direction:column; gap: var(--space-3); }
.fmt h3 { font-size: var(--text-lg); }
.fmt p { color: var(--ink-muted); font-size:var(--text-base); line-height:1.5; }
.fmt .fmt-cta { margin-top: auto; align-self:flex-start; }
@media (max-width:760px){ .formats-2 { grid-template-columns:1fr; } }
.price-anchor { margin-top: var(--space-6); font-size: var(--text-base); color: var(--ink-muted); }
.price-anchor strong { color: var(--ink); }

/* coaching block */
.coaching-block { border-top:1px solid var(--line-light); padding-top: var(--space-7); }
.coaching-block h2 { color: var(--ink); }
.coaching-block > p { color: var(--ink-muted) !important; }
.coaching-row { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); margin-top: var(--space-5); }
.cc { padding: var(--space-5); border:1px solid var(--line-light); border-radius: var(--radius-md); }
.cc-when { font-size: var(--text-sm); color: var(--accent-ink); font-weight:600; }
.cc-title { font-size: var(--text-lg); font-weight:600; margin-top: var(--space-1); }
@media (max-width:560px){ .coaching-row { grid-template-columns:1fr; } }
/* group coachings — slim one-line timeline (compact replacement for the 3 .cc cards) */
.coaching-line { list-style:none; margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; border-top:1px solid var(--line-light); display:flex; gap: var(--space-7); flex-wrap:wrap; }
.coaching-line li { display:flex; align-items:center; gap: 10px; }
.coaching-line li::before { content:""; width:8px; height:8px; border-radius:50%; background: var(--accent-ink); flex:0 0 auto; }
.coaching-line .cl-when { font-size: var(--text-base); font-weight:600; color: var(--ink); }
.coaching-line .cl-title { font-size: var(--text-sm); color: var(--ink-muted); }
@media (max-width:560px){ .coaching-line { gap: var(--space-3); flex-direction:column; } }

/* module map (which modules are included) */
.mod-map { display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-7); }
.mm-item { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5); border:1px solid var(--line-dark); border-radius:var(--radius-md); }
.mm-item.active { border-color: rgba(83,137,200,.4); background: rgba(83,137,200,.06); }
.mm-item.muted { opacity:.5; }
.mm-num { font-size:var(--text-sm); color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; flex:0 0 auto; }
.mm-body h3 { font-size:var(--text-lg); color:var(--on-dark); }
.mm-body p { font-size:var(--text-base); color:var(--on-dark-muted); margin-top:var(--space-1); line-height:1.5; }
.mm-badge, .mm-badge-muted { margin-left:auto; font-size:var(--text-eyebrow); letter-spacing:.06em; text-transform:uppercase; font-weight:700; white-space:nowrap; flex:0 0 auto; }
.mm-badge { color:var(--accent); background:rgba(83,137,200,.14); padding:4px 10px; border-radius:var(--radius-pill); }
.mm-badge-muted { color:var(--on-dark-faint); }
.mod-map-link { display:inline-block; margin-top:var(--space-6); color:var(--accent); font-weight:600; font-size:var(--text-sm); }
.mod-map-link:hover { color:var(--on-dark); }

/* tabs (format selector) */
.tabs { margin-top:var(--space-7); }
.tab-btns { display:flex; gap:var(--space-2); border-bottom:1px solid var(--line-light); flex-wrap:wrap; }
.tab-btn { font-family:inherit; font-size:var(--text-sm); font-weight:600; color:var(--ink-muted); background:none; border:0; border-bottom:2px solid transparent; padding:var(--space-3) var(--space-4); cursor:pointer; margin-bottom:-1px; transition:color .15s ease,border-color .15s ease; }
.tab-btn:hover { color:var(--ink); }
.tab-btn.active { color:var(--accent-ink); border-bottom-color:var(--accent-ink); }
.tab-panel { display:none; padding-top:var(--space-6); }
.tab-panel.active { display:block; }
.tab-panel h3 { font-size:var(--text-xl); margin-bottom:var(--space-3); }
.tab-panel p { color:var(--ink-muted); max-width:60ch; line-height:1.55; }

/* who-split: eyebrow-label variant + dark support */
.who-split .col > .eyebrow { display:block; margin-bottom:var(--space-4); }
.who-split .neg > .eyebrow { color:var(--ink-faint); }
.s-dark .who-split li, .s-darkest .who-split li { color:var(--on-dark); }
.s-dark .who-split .neg > .eyebrow, .s-darkest .who-split .neg > .eyebrow { color:var(--on-dark-faint); }
.s-dark .who-split .pos li::before, .s-darkest .who-split .pos li::before { border-color:var(--accent); }

/* pillars (3 content columns with coloured top bar, dark) */
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); margin-top:var(--space-7); }
.pillar { padding:var(--space-6); border:1px solid var(--line-dark); border-radius:var(--radius-lg); background:rgba(255,255,255,.03); }
.pillar-top { display:block; width:36px; height:3px; border-radius:3px; margin-bottom:var(--space-4); }
.pillar:nth-child(1) .pillar-top { background:var(--grass); }
.pillar:nth-child(2) .pillar-top { background:var(--sun); }
.pillar:nth-child(3) .pillar-top { background:var(--tile); }
.pillar > .eyebrow { color:var(--on-dark-faint); }
.pillar h3 { font-size:var(--text-lg); color:var(--accent); margin:var(--space-2) 0 var(--space-4); }
.pillar ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.pillar li { font-size:var(--text-sm); color:var(--on-dark-muted); padding:var(--space-2) var(--space-3); background:rgba(255,255,255,.03); border-radius:var(--radius-sm); }
@media (max-width:760px){ .pillars { grid-template-columns:1fr; } }

/* statement band with a small label (darkest) */
.statement60 { background:var(--blue-authoritarian); color:var(--on-dark); }
.statement60 .st-num { display:block; font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:var(--space-3); }
.statement60 .st-text { font-size:var(--display); line-height:1.25; font-weight:600; letter-spacing:-.01em; max-width:36ch; }

/* quote testimonial cards (quote on top, person below, dark) */
.q-cards { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); }
.q-card { padding:var(--space-6); border:1px solid var(--line-dark); border-radius:var(--radius-lg); background:rgba(255,255,255,.03); display:flex; flex-direction:column; }
.q-card .quote { font-size:var(--text-lg); color:var(--on-dark); line-height:var(--leading-snug); margin-bottom:var(--space-5); }
.q-card .person { display:flex; align-items:center; gap:var(--space-4); margin-top:auto; }
.q-card .person img { width:52px; height:52px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.q-card .person .name { font-weight:600; font-size:var(--text-sm); color:var(--on-dark); }
.q-card .person .role { font-size:var(--text-eyebrow); color:var(--on-dark-muted); }
@media (max-width:760px){ .q-cards { grid-template-columns:1fr; } }

/* pillar with a paragraph description instead of a pill list */
.pillar p { color: var(--on-dark-muted); font-size: var(--text-base); line-height: 1.5; margin-top: var(--space-1); }

/* 3-up flow grid variant (three process cards) */
.flow-grid.flow-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width:860px){ .flow-grid.flow-3 { grid-template-columns:1fr; } }

/* single featured testimonial (centered; works on dark or light) */
.quote-solo { max-width: 880px; margin-inline: auto; text-align: center; }
.quote-solo .q { font-size: var(--h2); line-height: var(--leading-snug); font-weight: 600; letter-spacing: -.01em; }
.quote-solo .who { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--on-dark-muted); }
.quote-solo .who b { color: var(--on-dark); font-weight: 600; }
.s-light .quote-solo .who, .s-paper .quote-solo .who { color: var(--ink-muted); }
.s-light .quote-solo .who b, .s-paper .quote-solo .who b { color: var(--ink); }

/* keynote / numbered rich content cards (dark): number + eyebrow + title + text + meta tags */
.klist { display:flex; flex-direction:column; gap:var(--space-5); margin-top:var(--space-7); }
.kcard { display:grid; grid-template-columns:auto 1fr; gap:var(--space-6); padding:var(--space-7); border:1px solid var(--line-dark); border-radius:var(--radius-lg); background:rgba(255,255,255,.03); }
.kcard .kn { font-size:var(--text-2xl); font-weight:600; color:var(--accent); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.kcard .ke { font-size:var(--text-eyebrow); letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-faint); font-weight:700; }
.kcard h3 { font-size:var(--text-xl); color:var(--on-dark); margin:var(--space-2) 0 var(--space-3); }
.kcard p { color:var(--on-dark-muted); font-size:var(--text-base); line-height:var(--leading-body); }
.kmeta { display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-5); font-size:var(--text-eyebrow); letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-faint); }
.kmeta span:not(:last-child)::after { content:"·"; margin-left:var(--space-4); }
@media (max-width:600px){ .kcard { grid-template-columns:1fr; gap:var(--space-3); } }
/* 2-up variant of .klist — for pages with only two cards (keeps line length readable) */
.klist-2 { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
@media (max-width:860px){ .klist-2 { grid-template-columns:1fr; } }

/* 2-up KPI grid variant (two stat boxes) */
.kpis.kpis-2 { grid-template-columns:1fr 1fr; }
@media (max-width:600px){ .kpis.kpis-2 { grid-template-columns:1fr; } }

/* references / "on stage at" row — minimal top-hairline items (light) */
.stages { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); margin-top:var(--space-5); }
.stage { border-top:2px solid var(--line-light); padding-top:var(--space-4); }
.stage .sn { font-weight:600; color:var(--ink); font-size:var(--text-base); }
.stage .sd { font-size:var(--text-sm); color:var(--ink-muted); margin-top:2px; }
.s-dark .stage, .s-darkest .stage { border-top-color:var(--line-dark); }
.s-dark .stage .sn, .s-darkest .stage .sn { color:var(--on-dark); }
.s-dark .stage .sd, .s-darkest .stage .sd { color:var(--on-dark-muted); }
@media (max-width:700px){ .stages { grid-template-columns:1fr 1fr; } }

/* ============================================================
   PROGRAMS HUB — the "typical path" flow diagram + grouped
   program cards (light surfaces). No decorative blobs.
   ============================================================ */
/* the path (kickoff → foundation → branch into two lanes) */
.pp-head { text-align:center; max-width:var(--maxw-text); margin:0 auto var(--space-8); }
.pp-head h2 { color:var(--ink); font-size:var(--h2); margin-top:var(--space-2); }
.pp-head p { color:var(--ink-muted); max-width:60ch; margin:var(--space-3) auto 0; }
.pp-flow { display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:nowrap; }
.pp-start { flex:0 0 auto; }
.pp-node { display:flex; flex-direction:column; gap:6px; padding:var(--space-4) var(--space-5); border-radius:var(--radius-md); border:1px solid var(--line-light); background:var(--white); min-width:130px; text-decoration:none; transition:border-color .15s ease, transform .15s ease, background .15s ease; }
a.pp-node:hover { border-color:var(--accent-ink); transform:translateY(-2px); background:rgba(62,111,168,.06); }
.pp-node .pp-lbl { font-size:var(--text-eyebrow); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.pp-node .pp-name { font-size:var(--text-base); font-weight:600; color:var(--ink); }
.pp-node.is-key { border-color:var(--accent-ink); background:rgba(62,111,168,.08); }
.pp-connect { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:56px; color:var(--accent-ink); font-size:1.5rem; font-weight:700; }
.pp-branch { flex:0 0 auto; width:48px; align-self:stretch; display:flex; align-items:center; margin-left:var(--space-3); }
.pp-branch svg { width:48px; height:100%; overflow:visible; }
.pp-branch path { stroke:var(--accent-ink); stroke-width:2; fill:none; }
.pp-branches { display:flex; flex-direction:column; gap:var(--space-6); }
.pp-lane { display:flex; align-items:center; gap:var(--space-3); }
.pp-lane-tag { flex:0 0 auto; width:96px; font-size:var(--text-sm); font-weight:600; color:var(--accent-ink); text-transform:uppercase; letter-spacing:.05em; text-align:right; padding-right:var(--space-2); }
.pp-steps { display:flex; align-items:center; gap:var(--space-3); }
.pp-arrow { color:var(--accent-ink); flex:0 0 auto; font-size:1.2rem; font-weight:700; }
@media(max-width:900px){
  .pp-flow { flex-direction:column; align-items:stretch; gap:var(--space-5); }
  .pp-connect { width:auto; transform:rotate(90deg); align-self:center; }
  .pp-branch { display:none; }
  .pp-lane { flex-direction:column; align-items:stretch; gap:var(--space-2); }
  .pp-lane-tag { width:auto; text-align:left; padding-right:0; }
  .pp-steps { flex-wrap:wrap; }
  .pp-arrow { align-self:center; transform:rotate(90deg); }
}

/* grouped program cards */
.pcat { margin-bottom:var(--space-8); }
.pcat:last-child { margin-bottom:0; }
.pcat-head { margin-bottom:var(--space-5); padding-bottom:var(--space-3); border-bottom:1px solid var(--line-light); }
.pcat-head h3 { font-size:var(--text-xl); margin-top:var(--space-1); }
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
@media(max-width:900px){ .pgrid { grid-template-columns:1fr 1fr; } }
@media(max-width:620px){ .pgrid { grid-template-columns:1fr; } }
.pcard { display:flex; flex-direction:column; border:1px solid var(--line-light); border-radius:var(--radius-lg); overflow:hidden; background:var(--white); text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.pcard:hover { border-color:var(--accent-ink); transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(12,31,45,.35); }
.pcard:focus-visible { outline:2px solid var(--accent-ink); outline-offset:3px; }
/* branded panel replaces the old decorative blob: navy + fine grain, holds tag + title */
.pimg { position:relative; aspect-ratio:21/9; background:var(--blue-supportive); background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size:16px 16px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:var(--space-5); }
.pimg .ptag { position:relative; z-index:2; align-self:flex-start; font-size:var(--text-eyebrow); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--tagclr,var(--accent)); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:4px 10px; border-radius:var(--radius-pill); }
.ptag.tag-individual { --tagclr:var(--accent); }
.ptag.tag-team { --tagclr:var(--grass); }
.ptag.tag-leaders { --tagclr:var(--sun); }
.ptag.tag-all { --tagclr:var(--tile); }
.pimg .pname { position:relative; z-index:2; color:var(--on-dark); margin:0; }
.pbody { padding:var(--space-6); display:flex; flex-direction:column; flex:1; gap:var(--space-2); }
.pname { font-size:var(--text-xl); font-weight:600; line-height:var(--leading-snug); letter-spacing:-.01em; margin:0; transition:color .15s ease; }
.psub { font-size:var(--text-base); color:var(--accent-ink); font-weight:500; line-height:var(--leading-snug); }
.panswer { font-size:var(--text-sm); color:var(--ink-muted); line-height:var(--leading-body); flex:1; margin-top:var(--space-2); }
.pmeta { font-size:var(--text-eyebrow); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding-top:var(--space-3); margin-top:var(--space-2); border-top:1px solid var(--line-light); }
.pgo { font-size:var(--text-sm); font-weight:600; color:var(--accent-ink); margin-top:var(--space-2); }
/* coming-soon card: same shell, no link affordance */
.pcard.pcard-soon { cursor:default; }
.pcard.pcard-soon:hover { border-color:var(--line-light); transform:none; box-shadow:none; }
.psoon { font-size:var(--text-sm); font-weight:600; color:var(--ink-faint); font-style:italic; margin-top:var(--space-2); }
/* solution cards not yet live — same "soon" treatment as .pcard-soon, kept ready to unlock */
.scard.scard-soon { cursor:default; }
.scard.scard-soon:hover { transform:none; border-color:var(--line-light); box-shadow:none; }
.scard.scard-soon:hover h3 { color:inherit; }
.scard .soon { font-size:var(--text-sm); font-weight:600; color:var(--ink-faint); font-style:italic; }
#programs-grid { scroll-margin-top:96px; }
.pcard[id] { scroll-margin-top:110px; }

/* ============================================================
   ABOUT-PAGE COMPONENTS
   ============================================================ */
/* readable prose + emphasis (works on light or dark) */
.prose { max-width:var(--maxw-text); }
.prose p { color:var(--ink-muted); font-size:var(--text-lg); line-height:var(--leading-body); }
.s-dark .prose p, .s-darkest .prose p { color:var(--on-dark-muted); }
.prose .em { color:var(--accent-ink); font-weight:600; }
.s-dark .prose .em, .s-darkest .prose .em { color:var(--accent); }
.subeyebrow { display:block; font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:700; color:var(--ink-faint); margin-bottom:var(--space-5); }
.s-dark .subeyebrow, .s-darkest .subeyebrow { color:var(--on-dark-faint); }
.stack-gap { margin-top:var(--space-8); }
[id]{ scroll-margin-top:96px; }

/* journey timeline (dark) */
.timeline { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-5); margin-top:var(--space-7); }
.tl-item { border-top:2px solid var(--line-dark); padding-top:var(--space-4); }
.tl-item.on { border-top-color:var(--accent); }
.tl-year { font-size:var(--text-sm); font-weight:700; color:var(--accent); letter-spacing:.04em; margin-bottom:var(--space-2); }
.tl-item h3 { font-size:var(--text-base); color:var(--on-dark); margin-bottom:var(--space-2); line-height:var(--leading-snug); }
.tl-item p { font-size:var(--text-sm); color:var(--on-dark-muted); line-height:1.5; }
@media(max-width:900px){ .timeline { grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .timeline { grid-template-columns:1fr; } }

/* founder block (light) */
.founder { display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--space-8); align-items:start; margin-top:var(--space-7); }
.founder--compact { grid-template-columns:.55fr 1.45fr; }
.founder--compact .founder-photo { max-width:280px; align-self:start; }
.founder-photo { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-light); aspect-ratio:4/5; background:var(--blue-supportive); }
.founder-photo img { width:100%; height:100%; object-fit:cover; }
.founder-body h3 { font-size:var(--text-2xl); }
.founder-body .role { color:var(--accent-ink); font-weight:600; font-size:var(--text-sm); margin:var(--space-2) 0 var(--space-4); }
.founder-body > p { color:var(--ink-muted); line-height:var(--leading-body); }
.hl-list { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3) var(--space-5); margin-top:var(--space-6); }
.hl-item { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); color:var(--ink); }
.hl-ico { color:var(--accent-ink); flex:0 0 auto; }
@media(max-width:760px){ .founder { grid-template-columns:1fr; gap:var(--space-6); } .hl-list { grid-template-columns:1fr; } }

/* team cards (dark) */
.team-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin-top:var(--space-7); }
.tcard { border:1px solid var(--line-dark); border-radius:var(--radius-lg); overflow:hidden; background:rgba(255,255,255,.03); }
.tphoto { aspect-ratio:1/1; background:var(--blue-supportive); overflow:hidden; }
.tphoto img { width:100%; height:100%; object-fit:cover; }
.tbody { padding:var(--space-5); }
.tbody h3 { font-size:var(--text-lg); color:var(--on-dark); }
.tbody .role { font-size:var(--text-sm); color:var(--accent); font-weight:500; margin-top:2px; }
@media(max-width:760px){ .team-cards { grid-template-columns:1fr; max-width:420px; } }
/* 5-up team grid (About team update) + operations/ambassadors row label */
.team-cards.cols-5 { grid-template-columns:repeat(5,1fr); max-width:none; }
@media(max-width:1024px){ .team-cards.cols-5 { grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .team-cards.cols-5 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:420px){ .team-cards.cols-5 { grid-template-columns:1fr; } }
.rowlabel { display:block; font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:700; color:var(--on-dark-faint); margin:var(--space-8) 0 var(--space-4); }

/* "Selected clients" text-logo marquee (About references — designer's version) */
.logoband { position:relative; overflow:hidden; margin-top:var(--space-2); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logotrack { display:flex; width:max-content; gap:var(--space-3); animation:logoscroll 48s linear infinite; }
.logoband:hover .logotrack { animation-play-state:paused; }
.logoband .logo { flex:0 0 auto; white-space:nowrap; min-width:150px; border:1px solid var(--line-light); border-radius:var(--radius-md); padding:var(--space-5); text-align:center; font-weight:700; color:var(--ink-faint); font-size:var(--text-sm); letter-spacing:.02em; background:var(--white); }
@keyframes logoscroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .logotrack { animation:none; flex-wrap:wrap; justify-content:center; width:100%; } .logoband .logo[aria-hidden="true"] { display:none; } }

/* trainers checklist (light) */
.trainers-check { display:grid; grid-template-columns:auto 1fr; gap:var(--space-8); align-items:center; margin-top:var(--space-7); }
.cav { width:120px; height:120px; border-radius:50%; overflow:hidden; background:var(--blue-supportive); flex:0 0 auto; }
.cav img { width:100%; height:100%; object-fit:cover; }
.checklist { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3) var(--space-6); }
.checklist li { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-base); color:var(--ink); }
.checklist .ci { color:var(--accent-ink); flex:0 0 auto; }
@media(max-width:760px){ .trainers-check { grid-template-columns:1fr; gap:var(--space-6); justify-items:start; } .checklist { grid-template-columns:1fr; } }

/* testimonials (light) */
.testi { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.testicard { padding:var(--space-6); border:1px solid var(--line-light); border-radius:var(--radius-lg); background:var(--white); display:flex; flex-direction:column; }
.testicard .quote { font-size:var(--text-base); color:var(--ink); line-height:var(--leading-body); margin-bottom:var(--space-5); }
.testi-person { display:flex; align-items:center; gap:var(--space-3); margin-top:auto; }
.tavatar { position:relative; width:44px; height:44px; border-radius:50%; overflow:hidden; background:var(--accent-ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:var(--text-sm); font-weight:600; flex:0 0 auto; }
.tavatar::after { content:attr(data-initials); }
.tavatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tpname { font-weight:600; font-size:var(--text-sm); color:var(--ink); }
.tprole { font-size:var(--text-eyebrow); color:var(--ink-muted); }
@media(max-width:820px){ .testi { grid-template-columns:1fr; } }

/* "why choose us" cards (dark, 4-up, title + text) */
.wcards { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); margin-top:var(--space-7); }
.wcard { padding:var(--space-6); border:1px solid var(--line-dark); border-radius:var(--radius-lg); background:rgba(255,255,255,.03); }
.wcard h3 { font-size:var(--text-lg); color:var(--on-dark); margin-bottom:var(--space-3); }
.wcard p { font-size:var(--text-sm); color:var(--on-dark-muted); line-height:1.55; }
@media(max-width:900px){ .wcards { grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .wcards { grid-template-columns:1fr; } }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
/* split hero: copy + "what to expect" aside (sits inside .page-hero, dark) */
.chero { display:grid; grid-template-columns:1.3fr .9fr; gap:var(--space-8); align-items:center; }
.chero-actions { display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-7); }
.chero-note { display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-6); font-size:var(--text-sm); color:var(--on-dark-muted); }
.chero-note svg { flex:0 0 auto; }
.chero-aside { border:1px solid var(--line-dark); border-radius:var(--radius-lg); background:rgba(255,255,255,.03); padding:var(--space-7); }
.chero-aside h3 { font-size:var(--text-lg); color:var(--on-dark); margin-bottom:var(--space-5); }
.qlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-4); }
.qlist li { display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--text-base); color:var(--on-dark-muted); line-height:1.5; }
.qlist .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:.5em; flex:0 0 auto; }
@media(max-width:860px){ .chero { grid-template-columns:1fr; gap:var(--space-6); } }

/* person/signature block (reuses .founder layout) */
.founder-body h2 { font-size:var(--text-2xl); line-height:var(--leading-snug); margin:var(--space-2) 0 var(--space-4); }
.sig { margin-top:var(--space-5); font-size:var(--text-sm); color:var(--ink-muted); line-height:1.5; }
.sig strong { display:block; color:var(--ink); font-weight:600; }

/* booking: calendar embed + aside portrait (light) */
.booking-grid { display:grid; grid-template-columns:1.6fr .8fr; gap:var(--space-6); margin-top:var(--space-7); align-items:stretch; }
.cal-shell { border:1px solid var(--line-light); border-radius:var(--radius-lg); overflow:hidden; background:var(--white); min-height:700px; }
.booking-aside { position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--blue-supportive); min-height:320px; }
.booking-aside img { width:100%; height:100%; object-fit:cover; }
.booking-aside .overlay { position:absolute; left:0; right:0; bottom:0; padding:var(--space-6); background:linear-gradient(0deg, rgba(2,5,16,.85), transparent); color:var(--on-dark); }
.booking-aside .overlay strong { display:block; font-size:var(--text-lg); }
.booking-aside .overlay span { font-size:var(--text-sm); color:var(--on-dark-muted); }
.fallback { margin-top:var(--space-6); font-size:var(--text-sm); color:var(--ink-muted); text-align:center; }
.fallback a { color:var(--accent-ink); font-weight:600; }
@media(max-width:860px){ .booking-grid { grid-template-columns:1fr; } .booking-aside { min-height:260px; } }

/* other ways to reach us (dark) */
.contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin-top:var(--space-7); }
.contact-item { display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-6); border:1px solid var(--line-dark); border-radius:var(--radius-lg); background:rgba(255,255,255,.03); }
.contact-item .label { font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:700; color:var(--on-dark-faint); }
.contact-item .value { font-size:var(--text-lg); color:var(--on-dark); font-weight:600; }
.contact-item a.value:hover { color:var(--accent); }
.contact-item .hint { font-size:var(--text-sm); color:var(--on-dark-muted); }
@media(max-width:760px){ .contact-grid { grid-template-columns:1fr; } }

/* ============================================================
   RESOURCES PAGE — article/video cards, shorts, downloads,
   newsletter, YouTube lightbox
   ============================================================ */
/* section head with an "all →" link */
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-5); margin-bottom:var(--space-7); flex-wrap:wrap; }
.sec-head h2 { font-size:var(--h2); line-height:var(--leading-snug); margin-top:var(--space-3); }
.sec-head .all { font-size:var(--text-sm); font-weight:600; color:var(--accent-ink); white-space:nowrap; flex:0 0 auto; }
.s-dark .sec-head .all, .s-darkest .sec-head .all { color:var(--accent); }

/* resource cards (LinkedIn posts / YouTube videos) */
.rgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
@media(max-width:860px){ .rgrid { grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .rgrid { grid-template-columns:1fr; } }
.rcard { display:flex; flex-direction:column; border:1px solid var(--line-light); border-radius:var(--radius-lg); overflow:hidden; background:var(--white); text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.rcard:hover { border-color:var(--accent-ink); transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(12,31,45,.35); }
.rthumb { position:relative; aspect-ratio:16/9; background:var(--blue-supportive); overflow:hidden; }
.rthumb .ytposter { width:100%; height:100%; object-fit:cover; }
.rbadge { position:absolute; top:var(--space-3); left:var(--space-3); font-size:var(--text-eyebrow); letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:#fff; background:rgba(2,5,16,.6); padding:4px 10px; border-radius:var(--radius-pill); z-index:2; }
.rplay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; }
.rplay svg { width:52px; height:52px; }
.rbody { padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); flex:1; }
.rbody h3 { font-size:var(--text-lg); line-height:var(--leading-snug); color:var(--ink); }
.rbody p { font-size:var(--text-sm); color:var(--ink-muted); line-height:var(--leading-body); flex:1; }
.rbody .go, .sbody .go { margin-top:var(--space-3); font-size:var(--text-sm); font-weight:600; color:var(--accent-ink); }

/* video sub-heads */
.vid-subhead { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); margin:var(--space-8) 0 var(--space-5); flex-wrap:wrap; }
.vid-subhead h3 { font-size:var(--text-xl); }
.vid-subhead .all { font-size:var(--text-sm); font-weight:600; color:var(--accent-ink); }
.s-dark .vid-subhead .all, .s-darkest .vid-subhead .all { color:var(--accent); }

/* shorts (vertical cards) */
.sgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); }
@media(max-width:860px){ .sgrid { grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .sgrid { grid-template-columns:1fr; } }
.scard { display:flex; flex-direction:column; border:1px solid var(--line-light); border-radius:var(--radius-lg); overflow:hidden; background:var(--white); text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.scard:hover { border-color:var(--accent-ink); transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(12,31,45,.35); }
.sthumb { position:relative; aspect-ratio:9/16; background:var(--blue-supportive); overflow:hidden; }
.sthumb .ytposter { width:100%; height:100%; object-fit:cover; }
.sbody { padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); flex:1; }
.sbody h4 { font-size:var(--text-base); line-height:var(--leading-snug); color:var(--ink); font-weight:600; }
.sbody p { font-size:var(--text-sm); color:var(--ink-muted); line-height:var(--leading-body); flex:1; }

/* downloads */
.dl { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); }
@media(max-width:760px){ .dl { grid-template-columns:1fr; } }
.dlcard { display:grid; grid-template-columns:auto 1fr; gap:var(--space-5); padding:var(--space-6); border:1px solid var(--line-light); border-radius:var(--radius-lg); background:var(--white); text-decoration:none; color:inherit; align-items:start; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.dlcard:hover { border-color:var(--accent-ink); transform:translateY(-2px); box-shadow:0 18px 40px -26px rgba(12,31,45,.4); }
.dlcard .ic { width:44px; height:44px; border-radius:var(--radius-md); background:rgba(62,111,168,.1); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.dlcard h3 { font-size:var(--text-lg); line-height:var(--leading-snug); }
.dlcard p { font-size:var(--text-sm); color:var(--ink-muted); line-height:var(--leading-body); margin:var(--space-2) 0 var(--space-3); }
.dlhint { font-size:var(--text-eyebrow); letter-spacing:.04em; text-transform:uppercase; font-weight:700; color:var(--accent-ink); }

/* newsletter */
.news { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:center; }
.news h2 { font-size:var(--h2); line-height:var(--leading-snug); }
.news > div > p { color:var(--ink-muted); margin-top:var(--space-3); line-height:var(--leading-snug); }
.news-form { display:flex; gap:var(--space-3); flex-wrap:wrap; }
.news-form input { flex:1; min-width:220px; padding:14px 18px; border:1px solid var(--line-light); border-radius:var(--radius-md); font-family:inherit; font-size:var(--text-base); color:var(--ink); background:var(--white); }
.news-form input:focus-visible { outline:2px solid var(--accent-ink); outline-offset:1px; border-color:var(--accent-ink); }
@media(max-width:760px){ .news { grid-template-columns:1fr; gap:var(--space-5); } }

/* YouTube lightbox */
.yt-lightbox-overlay { position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:var(--space-6); background:rgba(2,5,16,.85); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.yt-lightbox-overlay.open { display:flex; }
.yt-lightbox-frame { position:relative; width:min(960px,100%); aspect-ratio:16/9; }
.yt-lightbox-frame.vertical { width:min(420px,100%); aspect-ratio:9/16; }
.yt-lightbox-frame iframe { width:100%; height:100%; border:0; border-radius:var(--radius-lg); }
.yt-close { position:absolute; top:-46px; right:0; width:40px; height:40px; border:0; background:transparent; color:#fff; font-size:2rem; line-height:1; cursor:pointer; }

/* ============================================================
   EVENTS PAGE — date cards (typographic date panel + body)
   ============================================================ */
.egrid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
@media(max-width:900px){ .egrid { grid-template-columns:1fr 1fr; } }
@media(max-width:620px){ .egrid { grid-template-columns:1fr; } }
.ecard { display:flex; flex-direction:column; border:1px solid var(--line-light); border-radius:var(--radius-lg); overflow:hidden; background:var(--white); text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.ecard:hover { border-color:var(--accent-ink); transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(12,31,45,.35); }
.eimg { background:var(--blue-supportive); color:var(--on-dark); display:flex; align-items:center; justify-content:center; aspect-ratio:16/9; }
.eimg .big { text-align:center; }
.eimg .d { font-size:clamp(2.5rem,5vw,3.5rem); font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--accent); }
.eimg .m { font-size:var(--text-eyebrow); letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--on-dark-muted); margin-top:var(--space-3); }
.ebody { padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); flex:1; }
.ebadge { align-self:flex-start; font-size:var(--text-eyebrow); letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--grass); background:rgba(91,166,126,.12); padding:4px 10px; border-radius:var(--radius-pill); }
.ebody h3 { font-size:var(--text-xl); }
.ecard .meta { font-size:var(--text-sm); color:var(--ink-muted); line-height:1.5; }
.ecard .go { margin-top:auto; padding-top:var(--space-2); font-size:var(--text-sm); font-weight:600; color:var(--accent-ink); }
.enote { max-width:var(--maxw-text); margin:var(--space-8) auto 0; text-align:center; }
.enote p { color:var(--ink-muted); font-size:var(--text-base); line-height:1.6; }

/* ============================================================
   EVENT DETAIL PAGE
   ============================================================ */
.dh { background:var(--blue-authoritarian); color:var(--on-dark); padding-block:clamp(120px,13vw,160px) var(--space-9); position:relative; }
/* optional full-bleed photo behind the event hero — same treatment as .hero */
.dh > .hero-bg { position:absolute; inset:0; z-index:0; }
.dh > .wrap { position:relative; z-index:2; }
.dh .crumb { font-size:var(--text-sm); color:var(--on-dark-faint); }
.dh .crumb a { color:var(--on-dark-muted); }
.dh .crumb a:hover { color:var(--accent); }
.dh .kicker { display:block; font-size:var(--text-sm); color:var(--accent); font-weight:600; margin:var(--space-5) 0 var(--space-4); }
.dh h1 { font-size:var(--h1); line-height:var(--leading-tight); letter-spacing:-.02em; max-width:20ch; }
.dh .price { font-size:var(--text-xl); font-weight:600; color:var(--on-dark); margin-top:var(--space-5); }
.dh-claims { list-style:none; margin:var(--space-6) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.dh-claims li { display:flex; gap:var(--space-3); align-items:center; font-size:var(--text-lg); color:var(--on-dark); }
.dh-claims li::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
.dh-cta { display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; margin-top:var(--space-7); }
.datebox { font-size:var(--text-sm); color:var(--on-dark-muted); }
.datebox .dd { color:var(--on-dark); font-weight:600; }

/* lead band (tight statement, light) */
.lead-band p { font-size:var(--text-2xl); line-height:1.3; font-weight:600; letter-spacing:-.01em; max-width:var(--maxw-text); }
.lead-band .em { color:var(--accent-ink); }

/* arrow list */
.arrowlist { list-style:none; margin:var(--space-6) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--space-4); max-width:var(--maxw-text); }
/* li stays in normal inline flow — flex here would turn every text run and every
   inline <strong> into its own flex item (gaps + separate line breaks). */
.arrowlist li { position:relative; padding-left:calc(1em + var(--space-4)); font-size:var(--text-lg); color:var(--ink); line-height:1.4; }
.arrowlist li::before { content:"→"; position:absolute; left:0; top:0; color:var(--accent-ink); font-weight:700; }
.s-dark .arrowlist li, .s-darkest .arrowlist li { color:var(--on-dark); }
.s-dark .arrowlist li::before, .s-darkest .arrowlist li::before { color:var(--accent); }

/* 3-step process */
.steps3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin-top:var(--space-7); }
.s3 .n { display:block; font-size:var(--text-sm); font-weight:600; color:var(--accent-ink); letter-spacing:.02em; margin-bottom:var(--space-3); }
.s3 h3 { font-size:var(--text-lg); margin-bottom:var(--space-2); }
.s3 p { color:var(--ink-muted); font-size:var(--text-base); line-height:1.5; }
@media(max-width:760px){ .steps3 { grid-template-columns:1fr; gap:var(--space-5); } }

/* who it's for + trainer line */
.forwhom { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-6); align-items:start; margin-top:var(--space-6); }
.forwhom > p { font-size:var(--text-lg); color:var(--ink); line-height:1.5; }
.forwhom ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.forwhom li { display:flex; gap:var(--space-3); align-items:center; color:var(--ink); }
.forwhom li::before { content:""; width:7px; height:7px; border:1.5px solid var(--accent-ink); border-radius:50%; flex:0 0 auto; }
@media(max-width:760px){ .forwhom { grid-template-columns:1fr; gap:var(--space-5); } }
.trainer-line { display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-7); padding-top:var(--space-6); border-top:1px solid var(--line-light); }
.trainer-line .av { width:44px; height:44px; border-radius:50%; background:var(--blue-supportive); flex:0 0 auto; }
.trainer-line .tl { font-size:var(--text-eyebrow); letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--ink-faint); }
.trainer-line .tn { font-size:var(--text-base); color:var(--ink); font-weight:500; }

/* event CTA "when" line (sits in .cta-center) */
.when { font-size:var(--text-sm); color:var(--accent-ink); font-weight:600; margin-bottom:var(--space-4); }

/* ============================================================
   QUOTE PAGE — request form + "what happens next" aside
   ============================================================ */
.q-grid { display:grid; grid-template-columns:1.5fr .9fr; gap:var(--space-8); align-items:start; }
@media(max-width:860px){ .q-grid { grid-template-columns:1fr; gap:var(--space-7); } }
.q-form { display:flex; flex-direction:column; gap:var(--space-5); }
/* display:flex above beats the UA [hidden] rule — without this the form
   stays on screen next to the confirmation after a successful submit. */
.q-form[hidden] { display: none; }
.q-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
@media(max-width:560px){ .q-row { grid-template-columns:1fr; } }
.q-field { display:flex; flex-direction:column; gap:var(--space-2); }
.q-field label { font-size:var(--text-sm); font-weight:600; color:var(--ink); }
.q-field .hint { font-weight:400; color:var(--ink-faint); }
.q-field input, .q-field select, .q-field textarea { width:100%; padding:12px 14px; border:1px solid var(--line-light); border-radius:var(--radius-md); font-family:inherit; font-size:var(--text-base); color:var(--ink); background:var(--white); transition:border-color .15s ease, box-shadow .15s ease; }
.q-field textarea { min-height:120px; resize:vertical; }
.q-field input:focus-visible, .q-field select:focus-visible, .q-field textarea:focus-visible { outline:none; border-color:var(--accent-ink); box-shadow:0 0 0 3px rgba(62,111,168,.15); }
.q-submit { margin-top:var(--space-2); }
.q-alt { font-size:var(--text-sm); color:var(--ink-muted); }
.q-alt a { color:var(--accent-ink); font-weight:600; }
.q-side { border:1px solid var(--line-light); border-radius:var(--radius-lg); background:var(--paper); padding:var(--space-7); }
.q-side h3 { font-size:var(--text-lg); margin-bottom:var(--space-4); }
.q-side ul { list-style:none; margin:0 0 var(--space-5); padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.q-side li { display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--text-sm); color:var(--ink-muted); line-height:1.5; }
.q-side li::before { content:""; width:7px; height:7px; border:1.5px solid var(--accent-ink); border-radius:50%; margin-top:.45em; flex:0 0 auto; }

/* ---- Video (Facade: klick-to-load, YouTube bleibt bis dahin von der Seite fern) ---- */
.videofacade,
.videoframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; overflow: hidden; }
.videofacade { position: relative; cursor: pointer; padding: 0; background: var(--blue-authoritarian); }
.videofacade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .3s ease, transform .5s ease; }
.videofacade:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.videofacade .play {
  position: absolute; inset: 0; margin: auto; display: grid; place-items: center;
  border-radius: var(--radius-pill); background: rgba(251,252,253,.94); color: var(--accent-ink);
  transition: transform .2s ease, background .2s ease;
}
.videofacade .play svg { margin-left: 8%; }

/* Video — Editorial Split (Startseite) */
.videosplit { display: grid; grid-template-columns: 0.82fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.videosplit-text h2 { font-size: var(--h2); line-height: var(--leading-snug); margin-top: var(--space-3); }
.videosplit-text p { color: var(--ink-muted); line-height: var(--leading-body); margin-top: var(--space-5); max-width: 42ch; }
.videosplit-byline { display: flex; align-items: center; gap: .7rem; margin-top: var(--space-6); }
.videosplit-name b { font-size: var(--text-sm); color: var(--ink); font-weight: 600; display: block; }
.videosplit-name > span { font-size: var(--text-sm); color: var(--ink-faint); }
.videosplit-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 26px 60px -34px rgba(2,5,16,.55); }
.videosplit-media .videofacade img { filter: brightness(.88); }
.videosplit-media .videofacade:hover img { filter: brightness(.96); transform: scale(1.03); }
.videosplit-media .play { width: 76px; height: 76px; }
.videosplit-media .play svg { width: 30px; height: 30px; }
.videosplit-media .videofacade:hover .play { transform: scale(1.07); background: var(--white); }

/* ============ EVENT REGISTRATION MODAL ============ */
.reg-backdrop { position: fixed; inset: 0; z-index: 198; background: rgba(2,5,16,.6); opacity: 0; transition: opacity .24s ease; }
.reg-backdrop.open { opacity: 1; }
.reg-backdrop[hidden] { display: none; }
.reg-modal { position: fixed; inset: 0; z-index: 199; display: flex; justify-content: center; padding: var(--space-8) var(--space-5); overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity .24s ease; }
.reg-modal.open { opacity: 1; pointer-events: auto; }
.reg-modal[hidden] { display: none; }
.reg-panel { position: relative; width: min(560px, 100%); height: fit-content; margin: auto 0; background: var(--white); color: var(--ink); border-radius: var(--radius-lg); padding: var(--space-7); transform: translateY(16px); transition: transform .24s ease; }
.reg-modal.open .reg-panel { transform: translateY(0); }
.reg-close { position: absolute; top: var(--space-5); right: var(--space-5); width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-light); background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); padding: 0; }
.reg-close:hover { background: var(--paper); }
.reg-eyebrow { display: block; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 700; color: var(--accent-ink); margin-bottom: var(--space-2); }
.reg-panel h2 { font-size: var(--text-xl); line-height: var(--leading-snug); margin: 0 0 var(--space-2); padding-right: var(--space-8); }
.reg-price { font-size: var(--text-lg); font-weight: 700; color: var(--accent-ink); margin: 0 0 var(--space-6); }
.reg-checkline { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--ink); }
.reg-checkline input { margin-top: 3px; flex: 0 0 auto; }
.reg-terms { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.6; margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line-light); }
.reg-terms p { margin: 0 0 var(--space-2); }
.reg-error { display: none; color: #B3261E; font-size: var(--text-sm); margin-top: calc(var(--space-2) * -1); }
.reg-error.show { display: block; }
.reg-success { display: none; text-align: center; padding: var(--space-5) 0; }
.reg-success.show { display: block; }
.reg-success h3 { font-size: var(--text-xl); margin: 0 0 var(--space-3); }
.reg-success p { color: var(--ink-muted); }
/* global reset sets p{margin:0} — space the confirmation's paragraphs apart */
.reg-success p + p { margin-top: var(--space-3); }
@media (max-width: 560px) { .reg-panel { padding: var(--space-6); } }
@media (max-width: 820px) { .videosplit { grid-template-columns: 1fr; gap: var(--space-6); } .videosplit-media { order: -1; } }