/* BIOND Health. Design system and layout © Faiseurs BV, trading as BIOND Health. ref fz7q3k */
/* ==========================================================================
   BIOND Health — site styles (v2, in the design language of BIOND the
   congress echo and E=MxC²)
   Layout concept: an editorial consulting document. Light lavender-to-cream
   pages ruled with fine lines carry the reading. The BIOND violet-to-orange
   gradient is reserved for the moments that matter: every page's opening
   thesis and the closing invitation. The black belt figurines are the
   imagery, large and bleeding off the gradient. Echo rings are the one motif.
   Single light look, by choice, matching the two diagnostics.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("inter.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* brand colours (BIOND master template) */
  --violet: #4b06f4;
  --violet-deep: #4e1cb4;
  --indigo: #35107e;
  --ink: #22114f;
  --plum: #a32d6e;
  --orange: #ff8200;
  --copper: #a85512;
  /* neutrals and surfaces */
  --bg: #f7f4f8;
  --lavender: #f4f1fa;
  --cream: #faf6f3;
  --surface: #ffffff;
  --body: #463d6e;
  --muted: #6e6690;
  --line: #dfd4f2;
  --line-strong: #c9bce6;
  --white: #ffffff;
  --grad: linear-gradient(118deg, #4b06f4 0%, #6a1bd6 30%, #974877 70%, #ff8200 100%);
  --grad-page: linear-gradient(160deg, #f4f1fa 0%, #faf6f3 100%);
  /* type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --t-display: clamp(2.5rem, 1.5rem + 4vw, 4.75rem);
  --t-h1: clamp(2.1rem, 1.35rem + 3vw, 4rem);
  --t-h2: clamp(1.7rem, 1.25rem + 1.6vw, 2.7rem);
  --t-h3: 1.25rem;
  --t-lead: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-xs: 0.8125rem;
  /* layout */
  --max: 1240px;
  --gutter: 20px;
  --band: clamp(56px, 7.5vw, 104px);
  --radius: 8px;
  --shadow: 0 1px 0 rgba(34, 17, 79, 0.04), 0 30px 60px -36px rgba(34, 17, 79, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  background-image: var(--grad-page);
  background-attachment: fixed;
  color: var(--body);
  font: 400 var(--t-body)/1.6 var(--font);
  font-optical-sizing: auto;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 60; height: env(safe-area-inset-top, 0px); background: #faf7fb; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--violet); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { color: var(--ink); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

.wrap {
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 4px; }
.skip:focus { left: 12px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.label { font-size: var(--t-small); font-weight: 600; color: var(--violet); }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--body); max-width: 60ch; }
.muted { color: var(--muted); }

/* ---------- top bar ---------- */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(250, 247, 251, 0.94); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.head-row { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand img { height: 27px; width: auto; }
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav > a:not(.btn) { text-decoration: none; font-weight: 500; font-size: 0.97rem; padding: 9px 13px; border-radius: 999px; color: var(--ink); transition: background .15s; }
.nav > a:not(.btn):hover, .nav > a[aria-current="page"] { background: rgba(75, 6, 244, 0.08); color: var(--violet); }
.belt { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--muted); white-space: nowrap; padding: 6px 12px; margin-inline: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.belt i { width: 22px; height: 8px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px var(--ink); transition: background .4s; }
.belt-bar { position: absolute; left: 0; bottom: -2px; height: 3px; width: 0; background: var(--grad); }
.menu-btn { display: none; margin-left: auto; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); font: 600 0.95rem var(--font); padding: 9px 16px; border-radius: 999px; cursor: pointer; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 1.05rem/1.1 var(--font); text-decoration: none; cursor: pointer;
  padding: 17px 28px; border-radius: 999px; border: 0; color: var(--white); background: var(--violet);
  box-shadow: 0 14px 28px -16px rgba(75, 6, 244, 0.7);
  transition: transform .15s, background .15s, box-shadow .15s; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); background: var(--violet-deep); }
.btn--ghost { background: transparent; color: var(--violet); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--violet); }
.btn--small { padding: 11px 18px; font-size: 0.92rem; }
.btn--ink { background: var(--ink); box-shadow: none; }
.btn--ink:hover { background: #160a38; }
.on-grad .btn { background: var(--white); color: var(--violet); box-shadow: 0 18px 36px -18px rgba(34, 17, 79, 0.6); }
.on-grad .btn:hover { background: var(--lavender); }
.on-grad .btn--ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.65); }
.on-grad .btn--ghost:hover { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1.5px var(--white); }
.on-grad .btn--ink { background: var(--ink); color: var(--white); }
.arrow { display: inline-block; transition: transform .2s; }
a:hover .arrow, .btn:hover .arrow { transform: translateX(4px); }
.text-link { font-weight: 700; color: var(--violet); text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 2px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }

/* ---------- bands ---------- */
.band { padding-block: var(--band); position: relative; }
.paper, .night { background: rgba(255, 255, 255, 0.62); border-block: 1px solid var(--line); }
.band-head { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 52px); max-width: 860px; }
.band-head h2 { font-size: var(--t-h2); }

/* ---------- gradient hero (home) ---------- */
.on-grad { background: var(--violet); background-image: var(--grad); color: var(--white); position: relative; overflow: hidden; }
.on-grad h1, .on-grad h2, .on-grad h3 { color: var(--white); }
.on-grad .lead { color: rgba(255, 255, 255, 0.94); }
.on-grad .label { color: var(--white); }
.echo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(16px, 3vw, 40px); align-items: stretch; }
.hero-copy { display: grid; gap: clamp(14px, 1.8vw, 22px); align-content: center; min-width: 0; padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 76px); }
.hero .white-belt { font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.hero h1 { font-size: var(--t-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; }
.hero h1 em { font-style: normal; color: #ffd9a8; }
.hero .lead { max-width: 50ch; }
.doors-title { font-weight: 700; font-size: 1.05rem; margin-top: 8px; }
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.door {
  display: grid; gap: 6px; align-content: start; text-decoration: none; min-width: 0; color: var(--white);
  padding: 18px 18px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); transition: transform .18s, background .18s;
}
.door:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.24); }
.door-kicker { font-size: 0.82rem; font-weight: 600; opacity: 0.92; }
.door strong { font-size: 1.12rem; line-height: 1.2; letter-spacing: -0.02em; }
.door-meta { font-size: 0.85rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; margin-top: 4px; opacity: 0.92; }
.door-meta span { white-space: nowrap; }
.door--first { background: var(--white); color: var(--violet); box-shadow: 0 18px 36px -18px rgba(34, 17, 79, 0.6); }
.door--first strong { color: var(--ink); }
.door--first:hover { background: var(--white); }
.hero-figs { position: relative; min-height: 520px; }
.hero-figs img { position: absolute; bottom: 0; width: auto; max-width: none; filter: drop-shadow(0 18px 30px rgba(34, 17, 79, 0.35)); }
.hero-figs .f-left { left: -14%; height: 72%; }
.hero-figs .f-right { right: -17%; height: 74%; }
.hero-figs .f-front { left: 48%; transform: translateX(-50%); height: 86%; }

.proof-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 34px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.proof-row p { color: var(--muted); font-size: var(--t-small); max-width: 36ch; }
.proof-names { display: flex; flex-wrap: wrap; gap: 6px 30px; font-weight: 800; color: var(--ink); font-size: clamp(1.15rem, 2.2vw, 1.6rem); letter-spacing: -0.02em; }

/* ---------- gradient hero (inner pages) ---------- */
.page-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 40px; align-items: stretch; }
.page-hero-copy { display: grid; gap: 20px; align-content: center; padding-block: clamp(44px, 6vw, 88px); min-width: 0; }
.page-hero h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.035em; }
.page-hero-fig { position: relative; min-height: 400px; }
.page-hero-fig img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 96%; width: auto; max-width: none; filter: drop-shadow(0 18px 30px rgba(34, 17, 79, 0.35)); }
.rings { position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 84% 105%, transparent 0 78px, rgba(255, 255, 255, 0.22) 78px 79.5px);
  -webkit-mask-image: radial-gradient(circle at 84% 105%, #000 0, transparent 60%); mask-image: radial-gradient(circle at 84% 105%, #000 0, transparent 60%); }

/* ---------- stat ---------- */
.stat-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.stat-num { font-size: clamp(6rem, 17vw, 13rem); font-weight: 900; line-height: 0.82; letter-spacing: -0.07em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat-claim { font-size: clamp(1.4rem, 2.8vw, 2.2rem); font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1.14; }
.stat-copy { display: grid; gap: 16px; }
.source { font-size: var(--t-xs); color: var(--muted); }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(16px, 3vw, 34px); }
.chart-scroll { overflow-x: auto; }
.chart-scroll svg { display: block; width: 100%; min-width: 620px; height: auto; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: var(--t-small); color: var(--body); margin-bottom: 14px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 9px; }
.chart-legend i { width: 28px; height: 0; border-top: 4px solid var(--violet); border-image: var(--grad) 1; }
.chart-legend i.dash { border-top: 3px dashed #7e769b; border-image: none; }
.chart-note { font-size: var(--t-xs); color: var(--muted); margin-top: 10px; }
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 28px; border-top: 1px solid var(--ink); }
.phase { padding: 20px 24px 4px 0; display: grid; gap: 6px; align-content: start; }
.phase + .phase { padding-left: 24px; border-left: 1px solid var(--line); }
.phase .when { font-size: var(--t-small); color: var(--violet); font-weight: 600; }
.phase h3 { font-size: var(--t-h3); }
.phase p { font-size: 0.98rem; }

/* ---------- people (services) ---------- */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.person { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: var(--shadow); }
.person-top { position: relative; height: 300px; background: var(--violet); background-image: var(--grad); overflow: hidden; }
.person:nth-child(2) .person-top { background-image: linear-gradient(118deg, #6a1bd6 0%, #974877 60%, #ff8200 130%); }
.person:nth-child(3) .person-top { background-image: linear-gradient(118deg, #974877 0%, #ff8200 100%); }
.person-top::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 105%, transparent 0 46px, rgba(255, 255, 255, 0.24) 46px 47.5px); }
.person-top img { position: absolute; left: 50%; top: 16px; height: 175%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 14px 22px rgba(34, 17, 79, 0.35)); }
.person-body { padding: 24px 24px 28px; display: grid; gap: 14px; align-content: start; }
.person-role { font-size: var(--t-small); font-weight: 600; color: var(--violet); }
.person h3 { font-size: 1.4rem; }
.ticks { display: grid; gap: 0; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); color: var(--ink); }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before { content: ""; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; border: 1.5px solid var(--violet); }
.person .text-link { justify-self: start; margin-top: 4px; }

/* ---------- scenes (figurine imagery) ---------- */
.scene { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--indigo); }
.scene img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.scene--tall img { aspect-ratio: 4 / 5; }
.split--mid { align-items: center; }
.person-top--scene { height: auto; aspect-ratio: 3 / 2; }
.person-top--scene::before { display: none; }
.person-top--scene img { position: static; transform: none; width: 100%; height: 100%; object-fit: cover; filter: none; }
.scene-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.scene-row figcaption { margin-top: 12px; font-weight: 700; color: var(--ink); font-size: 1.1rem; letter-spacing: -0.02em; }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.strip img { width: 100%; aspect-ratio: 3 / 4.4; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.strip img:nth-child(even) { margin-top: 28px; }
.hands { position: relative; background: #b23ad0; overflow: hidden; }
.hands img { width: 100%; height: clamp(300px, 42vw, 560px); object-fit: cover; }
.hands .wrap { position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; padding-top: clamp(22px, 4vw, 52px); }
.hands h2 { color: var(--white); font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.035em; text-align: center; text-shadow: 0 2px 24px rgba(34, 17, 79, 0.35); }

/* ---------- diagnostics ---------- */
.diag { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.diag + .diag { margin-top: clamp(48px, 7vw, 96px); padding-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line); }
.diag--flip .sample { order: 2; }
.diag-copy { display: grid; gap: 16px; }
.diag-copy h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); letter-spacing: -0.035em; }
.diag-q { font-size: var(--t-lead); color: var(--ink); font-weight: 600; }
.diag-meta { font-size: var(--t-small); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 0; }
.diag-meta span + span::before { content: "|"; margin-inline: 12px; color: var(--line-strong); }
.formula { font-weight: 800; letter-spacing: -0.02em; }
.formula sup { font-size: 0.55em; color: var(--orange); }
.sample { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px 28px; box-shadow: var(--shadow); transform: rotate(-1.5deg); max-width: 420px; width: 100%; margin-inline: auto; }
.diag--flip .sample { transform: rotate(1.5deg); }
.sample-pill { display: inline-block; font-size: var(--t-xs); font-weight: 700; color: var(--violet); background: var(--lavender); padding: 4px 10px; border-radius: 999px; }
.sample svg { display: block; width: 100%; height: auto; }
.sample h4 { margin: 4px 0 10px; font-size: 1.3rem; color: var(--ink); letter-spacing: -0.02em; }
.sample ol { counter-reset: s; display: grid; gap: 5px; font-size: 0.95rem; }
.sample ol li { counter-increment: s; }
.sample ol li::before { content: counter(s) ". "; font-weight: 700; color: var(--violet); }

/* ---------- level steps ---------- */
.steps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; align-items: end; }
.step { display: grid; gap: 4px; align-content: start; min-width: 0; }
.step i { display: block; height: calc(22px + (var(--i) * 26px)); background-image: var(--grad); background-size: calc(var(--n) * 100% + (var(--n) - 1) * 8px) 100%; background-position: calc(var(--i) / (var(--n) - 1) * 100%) 0; margin-bottom: 10px; }
.step small { font-size: var(--t-xs); font-weight: 700; color: var(--violet); }
.step b { color: var(--ink); font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.2; }
.step span { font-size: var(--t-xs); color: var(--muted); line-height: 1.45; }
.steps-wrap { align-self: end; }

/* ---------- prose and splits ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.prose { display: grid; gap: 16px; max-width: 64ch; align-content: start; }
.prose h2 { font-size: var(--t-h2); }
.prose h3 { font-size: var(--t-h3); margin-top: 8px; }
.prose p strong { font-weight: 700; color: var(--ink); }
.pull { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 700; color: var(--ink); letter-spacing: -0.035em; line-height: 1.12; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile { border-radius: var(--radius); padding: 28px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); display: grid; gap: 12px; align-content: start; }
.tile h3 { font-size: 1.5rem; }
.dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dims li { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); font-weight: 600; color: var(--ink); }
.questions li { padding: 18px 0; border-top: 1px solid var(--line); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.questions li:first-child { border-top-color: var(--ink); }
.questions li:last-child { border-bottom: 1px solid var(--line); }
.aside-fig { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 20px; align-items: end; }
.aside-fig img { height: 250px; width: auto; max-width: none; justify-self: center; }

/* ---------- founder and speaking ---------- */
.founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.credits { border-top: 1px solid var(--ink); }
.credits li { border-bottom: 1px solid var(--line); }
.credits a, .credits div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 16px 2px; text-decoration: none; }
.credits b { font-size: 1.05rem; letter-spacing: -0.015em; color: var(--ink); line-height: 1.3; }
.credits span { grid-column: 1; color: var(--muted); font-size: var(--t-small); }
.credits em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; color: var(--violet); font-weight: 700; font-size: var(--t-xs); white-space: nowrap; }
.credits a:hover b { color: var(--violet); }

/* ---------- closing invitation ---------- */
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: center; position: relative; }
.cta-copy { display: grid; gap: 18px; position: relative; }
.cta-copy h2 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
.cta-copy p { font-size: var(--t-lead); color: rgba(255, 255, 255, 0.94); max-width: 44ch; }
.contact-lines { display: grid; gap: 4px; font-size: var(--t-small); color: rgba(255, 255, 255, 0.94); }
.contact-lines a { font-weight: 700; color: var(--white); }
.cta-fig { display: none; height: 230px; width: auto; max-width: none; margin-bottom: calc(var(--band) * -1); filter: drop-shadow(0 18px 30px rgba(34, 17, 79, 0.35)); }
.form { background: var(--surface); color: var(--body); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); display: grid; gap: 14px; box-shadow: 0 30px 60px -30px rgba(34, 17, 79, 0.7); position: relative; }
.form h3 { font-size: 1.35rem; }
.form .btn { background: var(--violet); color: var(--white); box-shadow: none; }
.form .btn:hover { background: var(--violet-deep); }
.field { display: grid; gap: 6px; min-width: 0; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field label { font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; font: 400 1rem var(--font); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 12px 14px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(75, 6, 244, 0.15); }
.field textarea { min-height: 92px; resize: vertical; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: var(--t-xs); color: var(--muted); align-items: start; }
.consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--violet); }
.hp { position: absolute; left: -9999px; }
.form-msg { font-size: var(--t-small); font-weight: 600; padding: 12px 14px; border-radius: var(--radius); background: var(--lavender); color: var(--ink); }
.form-msg.ok { background: #e4f6ea; color: #14532d; }
.form-msg.err { background: #fde8e4; color: #8a1c0c; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding-block: 44px 32px; background: rgba(255, 255, 255, 0.62); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-grid img { height: 30px; width: auto; }
.foot-grid p { color: var(--muted); font-size: var(--t-small); margin-top: 14px; max-width: 32ch; }
.foot-col { display: grid; gap: 8px; align-content: start; font-size: var(--t-small); }
.foot-col b { font-size: var(--t-xs); color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.foot-col a { text-decoration: none; color: var(--ink); }
.foot-col a:hover { color: var(--violet); text-decoration: underline; }
.foot-base { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-xs); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .belt { display: none; } }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-copy { padding-bottom: 20px; }
  .hero-figs { min-height: 0; height: 340px; max-width: 460px; width: 100%; justify-self: center; }
  .hero-figs .f-left { left: -4%; } .hero-figs .f-right { right: -8%; }
  .people, .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .person { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto; }
  .person-top { height: auto; min-height: 300px; }
  .person-top--scene { aspect-ratio: auto; min-height: 0; }
}
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; background: #faf7fb; border-bottom: 1px solid var(--line); padding: 12px max(var(--gutter), env(safe-area-inset-right, 0px)) 18px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .nav.open { display: flex; }
  .nav > a:not(.btn) { padding: 13px 12px; font-size: 1.05rem; }
  .nav .btn { margin-top: 8px; }
  .stat-grid, .split, .founder, .cta-grid, .diag, .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .diag--flip .sample { order: 0; }
  .page-hero-grid { gap: 0; }
  .page-hero-copy { padding-bottom: 12px; }
  .page-hero-fig { min-height: 0; height: 260px; }
  .phases { grid-template-columns: minmax(0, 1fr); }
  .phase + .phase { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-fig { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .step { grid-template-columns: 10px minmax(0, 1fr); column-gap: 14px; }
  .step i { grid-row: 1 / span 3; height: auto; width: 10px; margin: 0; background-size: 100% calc(var(--n) * 100%); background-image: linear-gradient(180deg, #4b06f4, #974877 70%, #ff8200); background-position: 0 calc(var(--i) / (var(--n) - 1) * 100%); }
  .step small, .step b, .step span { grid-column: 2; }
}
@media (max-width: 640px) {
  .doors { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .door { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 14px 16px; gap: 2px 12px; }
  .door-kicker, .door strong { grid-column: 1; }
  .door-meta { grid-column: 2; grid-row: 1 / span 2; margin: 0; flex-direction: column; align-items: flex-end; text-align: right; }
  .hero-figs { height: 290px; }
  .person { grid-template-columns: minmax(0, 1fr); }
  .person-top { height: 260px; min-height: 0; }
  .person-top--scene { height: auto; aspect-ratio: 3 / 2; }
  .scene-row { grid-template-columns: minmax(0, 1fr); }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip img:nth-child(even) { margin-top: 0; }
  .dims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .btn { white-space: normal; text-align: center; }
  .credits a, .credits div { grid-template-columns: minmax(0, 1fr); }
  .credits em { grid-row: auto; grid-column: 1; }
  .aside-fig { grid-template-columns: minmax(0, 1fr); }
  .aside-fig img { display: none; }
  .sample { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.person-body p { font-size: 0.98rem; }

/* menu: keep the five links on one line at tablet widths (added with the case studies link) */
.brand { flex: none; }
.nav > a { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1020px) {
  .head-row { gap: 12px; }
  .nav > a:not(.btn) { padding: 9px 7px; font-size: 0.92rem; }
  .nav .btn { padding: 10px 14px; font-size: 0.86rem; }
}
@media (min-width: 861px) and (max-width: 900px) {
  .nav > a:not(.btn) { padding: 9px 5px; font-size: 0.9rem; }
  .nav .btn { padding: 10px 12px; font-size: 0.82rem; }
}

/* ---------- resources (added 11 Nov 2026) ---------- */
.res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.res-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.res-media { aspect-ratio: 4 / 3; background: var(--grad); position: relative; overflow: hidden; display: grid; place-items: center; }
.res-media::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 110%, transparent 0 46px, rgba(255, 255, 255, 0.22) 46px 47.5px); }
.res-media img { position: absolute; top: 8%; left: 50%; height: 84%; width: auto; max-width: none; transform: translateX(-50%) rotate(-3deg); box-shadow: 0 22px 40px -14px rgba(34, 17, 79, 0.65); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.res-card:hover .res-media img { transform: translateX(-50%) rotate(0deg) scale(1.03); }
.res-body { padding: 24px 24px 28px; display: grid; gap: 12px; align-content: start; }
.res-type { font-size: var(--t-xs); font-weight: 700; color: var(--violet); }
.res-body h2 { font-size: 1.35rem; line-height: 1.2; }
.res-body p { font-size: 0.98rem; }
.res-body .res-meta { color: var(--muted); font-size: var(--t-xs); }
.res-body .btn { justify-self: start; margin-top: 6px; }
.res-card--next { background: transparent; box-shadow: none; border: 1.5px dashed var(--line-strong); grid-template-rows: auto; grid-column: span 2; align-self: start; }
.res-card--next .res-body { align-content: center; }
.res-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); background: var(--surface); color: var(--body); box-shadow: 0 40px 80px -30px rgba(34, 17, 79, 0.7); }
.res-dialog::backdrop { background: rgba(34, 17, 79, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.res-dialog h2 { font-size: 1.5rem; margin: 6px 44px 10px 0; }
.res-why { font-size: var(--t-small); color: var(--muted); margin-bottom: 18px; }
.res-form { display: grid; gap: 14px; }
.res-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--lavender); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.res-close:hover { background: var(--line); }
@media (max-width: 980px) { .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .res-card--next { grid-column: span 1; align-self: stretch; } }
@media (max-width: 640px) { .res-grid { grid-template-columns: minmax(0, 1fr); } .res-card--next { grid-column: auto; } }

/* menu: six links now, so the compact menu takes over below 1025px */
@media (min-width: 861px) and (max-width: 1024px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; background: #faf7fb; border-bottom: 1px solid var(--line); padding: 12px max(var(--gutter), env(safe-area-inset-right, 0px)) 18px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .nav.open { display: flex; }
  .nav > a:not(.btn) { padding: 13px 12px; font-size: 1.05rem; }
  .nav .btn { margin-top: 8px; padding: 13px 18px; font-size: 0.95rem; }
}
@media (min-width: 1025px) and (max-width: 1180px) {
  .head-row { gap: 12px; }
  .nav > a:not(.btn) { padding: 9px 7px; font-size: 0.92rem; }
  .nav .btn { padding: 10px 14px; font-size: 0.86rem; }
}

/* ---------- about: polaroids, founder and on-stage gallery (12 Nov 2026) ---------- */
.polaroid { margin: 0; background: #fff; padding: 12px 12px 0; border-radius: 2px; transform: rotate(var(--r, 0deg)); box-shadow: 0 1px 2px rgba(34, 17, 79, 0.18), 0 26px 44px -22px rgba(34, 17, 79, 0.55); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.polaroid img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #e9e4f3; }
.polaroid figcaption { padding: 14px 4px 18px; min-height: 58px; font-weight: 600; font-size: 0.95rem; color: var(--ink); line-height: 1.3; letter-spacing: -0.01em; }

.about-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(40px, 6vw, 84px); }
.about-hero-copy { display: grid; gap: 20px; min-width: 0; }
.about-hero h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.035em; }
.about-hero-photos { position: relative; aspect-ratio: 1 / 0.92; min-width: 0; }
.polaroid--hero-a { position: absolute; top: 0; right: 0; width: 76%; }
.polaroid--hero-b { position: absolute; left: 0; bottom: 0; width: 50%; z-index: 1; }
.about-hero-photos .polaroid figcaption { min-height: 0; padding-block: 10px 14px; font-size: 0.88rem; }
.proof-names--small { font-size: clamp(1rem, 1.6vw, 1.2rem); gap: 6px 26px; }

.founder-portrait { display: grid; justify-items: center; }
.polaroid--portrait { width: min(100%, 440px); }
.polaroid--portrait img { aspect-ratio: 4 / 5; }

.pol-band { overflow: hidden; }
.pol-track { list-style: none; margin: 0; padding: 22px 6px 30px; display: flex; gap: clamp(20px, 2.6vw, 34px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pol-track::-webkit-scrollbar { display: none; }
.pol-item { flex: 0 0 clamp(236px, 25vw, 310px); scroll-snap-align: start; }
.pol-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; font: inherit; }
.pol-open:hover .polaroid, .pol-open:focus-visible .polaroid { transform: rotate(0deg) translateY(-6px); box-shadow: 0 1px 2px rgba(34, 17, 79, 0.18), 0 36px 54px -24px rgba(34, 17, 79, 0.6); }
.pol-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; }
.pol-nav { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 1.25rem; cursor: pointer; transition: background .15s, border-color .15s; }
.pol-nav:hover { border-color: var(--violet); background: var(--lavender); }
.pol-nav:disabled { opacity: 0.35; cursor: default; }
.pol-count { font-size: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: center; }

.pol-lightbox { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: clamp(16px, 3vw, 28px); border: 0; background: transparent; overflow: visible; }
.pol-lightbox::backdrop { background: rgba(22, 10, 56, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.polaroid--big { --r: 0deg; padding: 14px 14px 0; }
.polaroid--big img { aspect-ratio: auto; max-height: calc(100vh - 230px); object-fit: contain; background: #0d0624; }
.polaroid--big figcaption { display: grid; gap: 4px; }
.polaroid--big figcaption span { font-weight: 400; color: var(--body); }
.pol-lightbox .res-close { top: -6px; right: -6px; z-index: 2; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.pol-lightbox .pol-controls { margin-top: 16px; }
.pol-lightbox .pol-count { color: #fff; }

@media (max-width: 860px) {
  .about-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .about-hero-photos { width: min(100%, 520px); justify-self: center; }
}
@media (max-width: 640px) {
  .pol-item { flex-basis: 74vw; }
}
@media (prefers-reduced-motion: reduce) { .pol-track { scroll-behavior: auto; } }

.polaroid--home { width: min(100%, 360px); margin-bottom: 18px; }
/* about hero: larger photos, landscape crops that keep the stage in frame */
.about-hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.about-hero-photos { aspect-ratio: 1 / 0.8; }
.polaroid--hero-a { width: 86%; }
.polaroid--hero-a img { aspect-ratio: 3 / 2; object-position: 58% 62% !important; }
.polaroid--hero-b { width: 46%; bottom: -4%; }
.polaroid--hero-b img { aspect-ratio: 4 / 3.4; }
.pol-track { padding-inline: 16px; scroll-padding-inline: 16px; }
@media (max-width: 860px) { .about-hero-photos { aspect-ratio: 1 / 0.86; } }
.polaroid--hero-a figcaption { text-align: right; }
@media (max-width: 860px) {
  .about-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .about-hero-photos { width: min(100%, 520px); margin-bottom: 12px; }
}

/* ---------- about v3: ideas, overlapping polaroids, principles (12 Nov 2026) ---------- */
.polaroid figcaption { display: grid; gap: 2px; }
.polaroid figcaption b { font-weight: 650; color: var(--ink); }
.polaroid figcaption span { font-weight: 400; font-size: 0.86rem; color: var(--muted); }
.pol-item { position: relative; z-index: var(--z, 1); transition: z-index 0s .15s; }
.pol-item + .pol-item { margin-left: clamp(-64px, -4.5vw, -34px); }
.pol-item:hover, .pol-item:focus-within { z-index: 20; transition-delay: 0s; }
.pol-track { gap: 0; padding-block: 34px 40px; }
.polaroid--big figcaption span { font-size: 0.95rem; }

.ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--ink); }
.idea { padding: clamp(22px, 3vw, 36px) clamp(0px, 2vw, 32px) clamp(24px, 3vw, 40px) 0; display: grid; gap: 12px; align-content: start; border-bottom: 1px solid var(--line); }
.idea:nth-child(odd) { border-right: 1px solid var(--line); }
.idea:nth-child(even) { padding-left: clamp(20px, 3vw, 40px); padding-right: 0; }
.idea h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem); letter-spacing: -0.03em; line-height: 1.12; }
.idea h3::before { content: "\201C"; display: block; font-size: 2.6em; line-height: 0.6; height: 0.42em; color: var(--orange); font-weight: 800; }
.idea p { max-width: 52ch; }
.idea-where { font-size: var(--t-small); color: var(--muted); }
.idea .text-link { justify-self: start; }

.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.principle { border-top: 3px solid; border-image: var(--grad) 1; padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.principle h3 { font-size: 1.25rem; }
@media (max-width: 980px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ideas, .principles { grid-template-columns: minmax(0, 1fr); }
  .idea, .idea:nth-child(even) { padding-left: 0; padding-right: 0; border-right: 0; }
  .pol-item + .pol-item { margin-left: -28px; }
}

/* overlap: each polaroid tucks under the next one's left edge, so every caption stays readable */
.pol-item + .pol-item { margin-left: -30px; }
.pol-track .polaroid figcaption { padding-right: 38px; }
@media (max-width: 640px) { .pol-item + .pol-item { margin-left: -22px; } .pol-track .polaroid figcaption { padding-right: 28px; } }

/* about hero: three polaroids (12 Nov 2026) */
.about-hero-photos { aspect-ratio: 1 / 0.9; }
.polaroid--hero-a { top: 0; right: 4%; width: 74%; z-index: 1; }
.polaroid--hero-a img { aspect-ratio: 16 / 9; object-position: 70% 40% !important; }
.polaroid--hero-b { left: 0; bottom: 2%; width: 54%; z-index: 3; }
.polaroid--hero-b img { aspect-ratio: 4 / 3; }
.polaroid--hero-c { position: absolute; right: 0; bottom: 8%; width: 40%; z-index: 2; }
.polaroid--hero-c img { aspect-ratio: 1 / 1; }
.polaroid--hero-a figcaption, .polaroid--hero-c figcaption { text-align: left; }
@media (max-width: 860px) { .about-hero-photos { aspect-ratio: 1 / 0.98; } }
.about-hero-photos { aspect-ratio: 1 / 0.98; }
.polaroid--hero-a figcaption { text-align: center; }
.polaroid--hero-b { bottom: 0; }
.polaroid--hero-c { bottom: -2%; }
@media (max-width: 860px) { .about-hero-photos { aspect-ratio: 1 / 1.06; } }

/* ---------- case studies: overview cards and next-case link (12 Nov 2026) ---------- */
.cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--indigo); }
.cs-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.cs-card:hover .cs-media img { transform: scale(1.04); }
.cs-title { color: inherit; text-decoration: none; }
.cs-title:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.cs-client { font-size: var(--t-small); color: var(--muted); }
.cs-card .res-body h2 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem); }
.cs-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.cs-next-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 24px 14px 14px; max-width: 720px; flex: 1 1 420px; }
.cs-next-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.cs-next-card > span { display: grid; gap: 4px; }
.cs-next-card small { font-size: var(--t-small); color: var(--violet); font-weight: 600; }
.cs-next-card strong { font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.2; }
.cs-next-card:hover strong { text-decoration: underline; }
@media (max-width: 640px) {
  .cs-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-next-card { grid-template-columns: minmax(0, 1fr); padding: 14px; }
}

/* serif accent word, e.g. "expert" in the contact heading (12 Nov 2026). Lora Italic, SIL OFL, self-hosted. */
@font-face { font-family: "Lora"; src: url("lora-italic.woff") format("woff"); font-weight: 400 700; font-style: italic; font-display: swap; }
.em-serif { font-family: "Lora", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; }

/* home founder: three overlapping polaroids */
.home-pols { position: relative; aspect-ratio: 1 / 0.7; width: min(100%, 560px); margin-bottom: 26px; }
.home-pol { position: absolute; }
.home-pol figcaption { padding-block: 10px 12px; min-height: 0; font-size: 0.82rem; }
.home-pol figcaption span { font-size: 0.76rem; }
.home-pol--a { left: 0; top: 4%; width: 54%; z-index: 1; }
.home-pol--a img { aspect-ratio: 4 / 3; }
.home-pol--b { left: 30%; top: 0; width: 44%; z-index: 2; }
.home-pol--c { right: 0; top: 14%; width: 38%; z-index: 3; }
@media (max-width: 640px) { .home-pols { aspect-ratio: 1 / 0.82; } .home-pol figcaption span { display: none; } }

.home-pols { aspect-ratio: 1 / 0.62; }
.home-pol figcaption { font-size: 0.8rem; white-space: nowrap; }
.home-pol--a { left: 0; top: 6%; width: 42%; }
.home-pol--a img { aspect-ratio: 1 / 1; }
.home-pol--b { left: 34%; top: 0; width: 34%; }
.home-pol--c { left: auto; right: 0; top: 10%; width: 34%; }
@media (max-width: 640px) { .home-pols { aspect-ratio: 1 / 0.7; } .home-pol figcaption { font-size: 0.66rem; padding-inline: 2px; } }
@media (max-width: 640px) {
  .home-pols { aspect-ratio: 1 / 0.78; }
  .home-pol figcaption { white-space: normal; font-size: 0.7rem; line-height: 1.25; padding-block: 8px 10px; }
}

/* ---------- phone reel (12 Nov 2026). A neutral phone drawn in CSS, not a branded device. ---------- */
.reel-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.reel-phone-col { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); display: grid; justify-items: center; }
.phone { position: relative; width: min(100%, 330px); aspect-ratio: 9 / 18.6; padding: 11px; border-radius: 52px; background: linear-gradient(145deg, #2c2540, #0f0b1a 55%, #2a2340); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14), 0 2px 0 rgba(255, 255, 255, 0.06), 0 50px 80px -40px rgba(34, 17, 79, 0.75), 0 20px 30px -20px rgba(34, 17, 79, 0.5); }
.phone::before { content: ""; position: absolute; inset: -30% -40%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 130, 0, 0.22), rgba(75, 6, 244, 0.14) 55%, transparent 75%); }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: #0d0624; }
.phone-island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 31%; height: 26px; border-radius: 20px; background: #000; z-index: 3; }
.phone-btn { position: absolute; width: 4px; border-radius: 2px; background: #1c1729; }
.phone-btn--a { left: -3px; top: 20%; height: 7%; }
.phone-btn--b { left: -3px; top: 30%; height: 11%; }
.phone-btn--c { right: -3px; top: 26%; height: 14%; }
.reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.reel-video.is-on { opacity: 1; z-index: 1; }
.reel-bar { position: absolute; left: 22px; right: 22px; bottom: 16px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); z-index: 3; overflow: hidden; }
.reel-bar i { display: block; height: 100%; width: 0; background: #fff; }
.reel-copy h2 { font-size: var(--t-h2); margin-bottom: clamp(20px, 3vw, 36px); }
.reel-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.reel-step { padding: clamp(24px, 4vw, 40px) 0 clamp(24px, 4vw, 40px) 24px; border-left: 2px solid var(--line); display: grid; gap: 10px; transition: border-color .3s; min-height: 34vh; align-content: center; }
.reel-step.is-on { border-left-color: var(--violet); }
.reel-pick { all: unset; cursor: pointer; display: grid; gap: 6px; }
.reel-pick:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 2px; }
.reel-where { font-size: var(--t-small); color: var(--muted); }
.reel-pick strong { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem); letter-spacing: -0.03em; line-height: 1.12; color: var(--ink); opacity: 0.45; transition: opacity .3s; }
.reel-step.is-on .reel-pick strong { opacity: 1; }
.reel-step p { max-width: 46ch; opacity: 0.6; transition: opacity .3s; }
.reel-step.is-on p { opacity: 1; }
.reel-step .text-link { justify-self: start; }
@media (max-width: 860px) {
  .reel-grid { grid-template-columns: minmax(0, 1fr); }
  .reel-phone-col { position: static; order: 2; }
  .reel-copy { order: 1; }
  .phone { width: min(78%, 300px); }
  .reel-step { min-height: 0; padding-block: 16px; }
  .reel-step:not(.is-on) p, .reel-step:not(.is-on) .text-link { display: none; }
}
@media (prefers-reduced-motion: reduce) { .reel-video { transition: none; } }

.reel { overflow-x: clip; }
.reel-title { font-size: var(--t-h2); margin-bottom: clamp(16px, 3vw, 32px); }
.reel-steps { margin-top: -2vh; }
@media (max-width: 860px) {
  .reel-phone-col { order: 1; margin-bottom: 8px; }
  .reel-copy { order: 2; }
}

/* ---------- contact band with phone montage (12 Nov 2026) ---------- */
.cta-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 20px clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(32px, 5vw, 64px); }
.cta-head h2, .cta-head h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; color: var(--white); }
.cta-actions { display: grid; gap: 14px; justify-items: start; }
.cta-pair { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.cta-phone { display: grid; justify-items: center; }
.cta-phone .phone { width: min(100%, 300px); }
.cta-phone .phone::before { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), rgba(255, 130, 0, 0.12) 55%, transparent 75%); }
.montage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.on-grad#contact { overflow-x: clip; }
@media (max-width: 860px) {
  .cta-head, .cta-pair { grid-template-columns: minmax(0, 1fr); }
  .cta-phone .phone { width: min(62%, 240px); }
}

.on-grad .form h3 { color: var(--ink); }

/* inline form checks (12 Nov) */
.field [aria-invalid="true"] { border-color: #c2410c; box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.14); }
.consent input[aria-invalid="true"] { outline: 2px solid #c2410c; outline-offset: 2px; }

/* congress society links and sources (12 Nov) */
.proof-names a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s ease; }
.proof-names a:hover, .proof-names a:focus-visible { background-size: 100% 2px; }
.proof-names .proof-more { font-weight: 500; color: var(--muted); }
.source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.source a:hover { color: var(--violet); }

/* portrait figurine scenes and stacked tiles (12 Nov) */
.scene--portrait { max-width: 440px; justify-self: center; width: 100%; }
.scene--portrait img { aspect-ratio: 4 / 5.6; object-position: 50% 35%; }
.tile-stack { display: grid; gap: 14px; }
@media (max-width: 860px) { .scene--portrait { max-width: 360px; } }

/* menu: seven links with Assessments (12 Nov). The belt indicator only shows on wide screens,
   the compact menu takes over below 1100px and the tighter spacing runs up to 1279px. */
@media (max-width: 1279px) { .belt { display: none; } }
/* with seven links the belt shows as its colour swatch only; the name stays available to screen readers and on hover */
.belt { padding: 8px 9px; margin-inline: 4px; }
.belt #beltName { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1025px) and (max-width: 1099px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; background: #faf7fb; border-bottom: 1px solid var(--line); padding: 12px max(var(--gutter), env(safe-area-inset-right, 0px)) 18px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .nav.open { display: flex; }
  .nav > a:not(.btn) { padding: 13px 12px; font-size: 1.05rem; }
  .nav .btn { margin-top: 8px; padding: 13px 18px; font-size: 0.95rem; }
}
@media (min-width: 1181px) and (max-width: 1279px) {
  .head-row { gap: 12px; }
  .nav > a:not(.btn) { padding: 9px 7px; font-size: 0.92rem; }
  .nav .btn { padding: 10px 14px; font-size: 0.86rem; }
}
@media (min-width: 1280px) { .nav > a:not(.btn) { padding: 9px 10px; } }

/* legal line in the footer (12 Nov) */
.foot-legal { margin-top: 10px; color: var(--muted); font-size: var(--t-xs); max-width: 80ch; }
/* infographic scenes show whole, never cropped (12 Nov) */
.scene--whole img { aspect-ratio: 2 / 3; }
/* figurine portraits show whole: natural shape, no cropping (12 Nov) */
.scene--portrait { max-width: 400px; }
.scene--portrait img { aspect-ratio: auto; height: auto; object-fit: contain; }
@media (max-width: 860px) { .scene--portrait { max-width: 340px; } }

/* black belt wrapped around the top right corner of the home hero (12 Nov) */
.hero-belt { position: absolute; top: 0; right: 0; z-index: 1; width: clamp(240px, 33vw, 500px); max-width: none; height: auto; transform: translate(16%, 8%) rotate(45deg); transform-origin: 50% 50%; pointer-events: none; filter: drop-shadow(-10px 18px 22px rgba(34, 17, 79, 0.45)); }
.hero .hero-grid { z-index: 2; }
@media (max-width: 640px) { .hero-belt { width: 220px; transform: translate(22%, 2%) rotate(45deg); } }