/* ==========================================================================
   Your Second Curve — yoursecondcurve.com
   Palette: Midnight Navy #041225 + Second Curve Gold #AE8743 (cover print file),
   supported by Warm Ivory/Paper tints and one stone neutral.
   Self-hosted fonts, subset to German + English. No third-party requests.
   ========================================================================== */

/* ---------- fonts (local, variable, woff2, de+en subset) ---------- */
@font-face {
  font-family: "Oswald";
  src: url("oswald.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("archivo.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- design tokens ---------- */
:root {
  /* colour: the two cover colours */
  --c-navy: #041225;
  --c-gold: #AE8743;
  /* colour: supporting tints of the two, plus one neutral */
  --c-navy-2: #0A1D31;
  --c-gold-light: #C9A063;
  --c-gold-deep: #876628;          /* gold for small text on light, AA-safe */
  --c-ivory: #EAE1D3;
  --c-paper: #FAF8F4;
  --c-paper-2: #F1EDE4;
  --c-ink: #16212D;
  --c-stone: #5E5B53;              /* secondary text on light, AA-safe */
  --c-line: #DCD6CA;               /* decorative hairlines only */
  --c-edge: #857F70;               /* borders of interactive controls, >=3:1 */

  /* type */
  --font-head: "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(2.375rem, 1.1rem + 5.6vw, 4.75rem);
  --fs-h2: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
  --fs-lede: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small: clamp(0.85rem, 0.83rem + 0.1vw, 0.9rem);
  --fs-label: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  --fs-btn: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);

  /* rhythm */
  --sp-section: clamp(4rem, 2.4rem + 6.5vw, 7rem);
  --sp-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --maxw: 70rem;
  --pad: clamp(1.25rem, 4vw, 1.75rem);
  --radius: 12px;
  /* Height of the sticky header. main.js re-measures this on load and resize so
     anchors land flush against it; the value here is the no-JS fallback. */
  --header-h: 73px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* WCAG 2.2 SC 2.4.11 Focus Not Obscured: keep anchor and focus targets clear of
     the sticky header. Exactly the header height, so a section's top edge lands
     flush underneath it — any extra leaves a strip of the previous section
     showing and reads as though the page stopped short. */
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font: 400 var(--fs-body) / 1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
a:where(:not(.btn)) { color: var(--c-gold-deep); }
a:where(:not(.btn, .brand)):hover { color: var(--c-ink); }

/* ---------- section colour scopes ---------- */
.s-navy {
  --bg: var(--c-navy);
  --text: var(--c-ivory);
  --text-2: #AAB6C4;
  --label: var(--c-gold-light);
  --hairline: rgba(234, 225, 211, 0.18);
  --edge: rgba(234, 225, 211, 0.5);
  --focus: var(--c-gold-light);
  --btn2-text: var(--c-ivory);
  --btn2-border: rgba(234, 225, 211, 0.5);
  --btn2-hover: rgba(234, 225, 211, 0.1);
  background: var(--bg);
  color: var(--text);
}
.s-paper, .s-paper2 {
  --bg: var(--c-paper);
  --text: var(--c-ink);
  --text-2: var(--c-stone);
  --label: var(--c-gold-deep);
  --hairline: var(--c-line);
  --edge: var(--c-edge);
  --focus: var(--c-gold-deep);
  --btn2-text: var(--c-ink);
  --btn2-border: var(--c-edge);
  --btn2-hover: rgba(22, 33, 45, 0.05);
  background: var(--bg);
  color: var(--text);
}
.s-paper2 { --bg: var(--c-paper-2); }
.s-navy a:where(:not(.btn)) { color: var(--c-gold-light); }
.s-navy a:where(:not(.btn, .brand)):hover { color: var(--c-ivory); }

:focus-visible { outline: 2px solid var(--focus, var(--c-gold-deep)); outline-offset: 3px; border-radius: 1px; }
/* the skip-link target takes focus programmatically; it is not a control */
main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible { outline: none; }

/* ---------- utilities ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
.skip-link {
  position: absolute; left: var(--pad); top: -100px; z-index: 100;
  background: var(--c-gold); color: var(--c-navy); padding: 0.75rem 1.25rem;
  font: 600 var(--fs-btn) / 1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus-visible { top: var(--pad); }

.section { padding-block: var(--sp-section); }
.section-tight { padding-block: calc(var(--sp-section) * 0.66); }
.divide { border-top: 1px solid var(--hairline); margin-top: var(--sp-section); padding-top: var(--sp-section); }

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.gold { color: var(--c-gold); }
.s-navy .gold { color: var(--c-gold-light); }

.eyebrow {
  font: 500 var(--fs-label) / 1.4 var(--font-head);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label, var(--c-gold-deep));
  margin: 0 0 1.125rem;
}
.lede {
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: var(--text-2, var(--c-stone));
  max-width: 62ch;
  margin-top: 1.375rem;
  text-wrap: pretty;
}
.keyline { width: 96px; height: 3px; background: var(--c-gold); border: 0; margin: 0 0 1.625rem; }

/* ---------- icons ---------- */
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.22em; }
.ic-gold { color: var(--c-gold); }
.s-paper .ic-gold, .s-paper2 .ic-gold { color: var(--c-gold-deep); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0.9em 1.75em;
  font: 600 var(--fs-btn) / 1.2 var(--font-head);
  letter-spacing: 0.13em; text-transform: uppercase;
  background: var(--c-gold); color: var(--c-navy);
  border: 1px solid var(--c-gold); border-radius: 1px;
  text-decoration: none; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.btn:hover { background: var(--c-gold-light); border-color: var(--c-gold-light); color: var(--c-navy); }
.btn:active { transform: translateY(1px); }
/* secondary button: one rule, adapts to the section's background via scope vars */
.btn-ghost {
  background: transparent;
  color: var(--btn2-text, var(--c-ink));
  border-color: var(--btn2-border, var(--c-edge));
}
.btn-ghost:hover {
  background: var(--btn2-hover, rgba(22, 33, 45, 0.05));
  border-color: var(--btn2-text, var(--c-ink));
  color: var(--btn2-text, var(--c-ink));
}
.cta-row { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2.375rem; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4, 18, 37, 0.96);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid rgba(234, 225, 211, 0.12);
  --focus: var(--c-gold-light);
}
.site-header .inner {
  max-width: var(--maxw); margin-inline: auto; padding: 0.875rem var(--pad);
  display: flex; align-items: center; gap: 1.75rem;
}
.brand {
  font: 600 clamp(0.875rem, 0.8rem + 0.35vw, 1rem) / 1.2 var(--font-head);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-ivory); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 44px;
}
.brand em { font-style: normal; color: var(--c-gold-light); }
/* the wordmark is not a text link: it keeps its colours on hover */
.brand:hover { color: var(--c-ivory); }
.brand:hover em { color: var(--c-gold-light); }
.brand svg { width: 2rem; height: auto; flex: none; }
.nav-links { display: flex; gap: 1.625rem; margin-left: auto; align-items: center; }
.nav-links a:where(:not(.btn)) {
  font: 500 var(--fs-btn) / 1.2 var(--font-head);
  letter-spacing: 0.11em; text-transform: uppercase;
  color: #A9B4C1; text-decoration: none; padding: 0.75rem 0.125rem;
  transition: color 0.16s ease;
}
.nav-links a:where(:not(.btn)):hover,
.nav-links a[aria-current]:where(:not(.btn)) { color: var(--c-ivory); }
.nav-links .btn { min-height: 44px; padding: 0.7em 1.4em; }
.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(234, 225, 211, 0.5); border-radius: 1px;
  color: var(--c-ivory); cursor: pointer;
}
.nav-toggle .ic { width: 1.375rem; height: 1.375rem; }
.nav-toggle[aria-expanded="true"] .ic-open, .nav-toggle[aria-expanded="false"] .ic-close { display: none; }
@media (max-width: 53.75em) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-navy); border-bottom: 1px solid rgba(234, 225, 211, 0.12);
    padding: 0.5rem var(--pad) 1.25rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a:where(:not(.btn)) { padding: 0.875rem 0.25rem; border-bottom: 1px solid rgba(234, 225, 211, 0.1); }
  .nav-links .btn { margin-top: 1rem; }
}

/* ---------- the gold curve ---------- */
.curve { display: block; width: 100%; height: clamp(3rem, 6vw, 4.625rem); }
.curve path { fill: none; stroke: var(--c-gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.curve circle { fill: var(--c-gold); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 2rem + 5vw, 5.5rem) 0; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero-copy { padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.hero-shot { position: relative; align-self: stretch; min-height: 100%; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; }
/* the photo dissolves into the navy on every edge; no visible border */
.hero-shot::after {
  content: ""; position: absolute; inset: -1px;
  background: linear-gradient(to right, var(--c-navy) 0%, rgba(4, 18, 37, 0) 28%),
              linear-gradient(to left, var(--c-navy) 0%, rgba(4, 18, 37, 0) 24%),
              linear-gradient(to top, var(--c-navy) 3%, rgba(4, 18, 37, 0) 36%),
              linear-gradient(to bottom, var(--c-navy) 0%, rgba(4, 18, 37, 0) 28%);
}
.hero-curve { position: absolute; left: 0; right: 0; bottom: -2px; height: clamp(4rem, 12vw, 10rem); pointer-events: none; }
@media (max-width: 53.75em) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 0; }
  .hero-shot { min-height: 0; margin-top: 1rem; }
  .hero-shot img { aspect-ratio: 4 / 3; }
}

/* ---------- curve-one diagram ---------- */
.curveone-grid { display: grid; grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.curveone-grid .lede { margin-top: 0; }
@media (max-width: 53.75em) { .curveone-grid { grid-template-columns: 1fr; } }
.diagram { margin-top: var(--sp-block); }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram-labels { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; }
.diagram-labels span { font: 500 var(--fs-label) / 1.4 var(--font-head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.diagram-labels .mid { color: var(--label); }
.diagram-labels b { font-weight: 600; color: var(--text); }
.diagram-labels .lbl-second b { color: var(--label); }
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; padding: 0; list-style: none; }
@media (max-width: 40em) { .outcomes { grid-template-columns: 1fr; } }
.outcome { border: 1px solid var(--hairline); border-radius: 8px; padding: 1.375rem 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }
.outcome .ic { width: 1.625rem; height: 1.625rem; }
.outcome h3 { font: 600 var(--fs-label) / 1.4 var(--font-head); letter-spacing: 0.18em; text-transform: uppercase; }
.outcome p { font-size: 0.9rem; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

/* ---------- three-column problem ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr)); gap: clamp(1.75rem, 4vw, 2.75rem); margin-top: clamp(2.5rem, 5vw, 3.75rem); padding: 0; list-style: none; }
.grid-3 h3 { margin-bottom: 0.75rem; }
.grid-3 p { color: var(--text-2); font-size: clamp(0.95rem, 0.93rem + 0.1vw, 1rem); line-height: 1.62; text-wrap: pretty; }
.num { font: 600 var(--fs-label) / 1 var(--font-head); letter-spacing: 0.16em; color: var(--label); display: block; margin-bottom: 0.875rem; }

/* ---------- system layers ---------- */
.startband {
  background: rgba(234, 225, 211, 0.07); border-left: 3px solid var(--c-gold);
  padding: 1.375rem 1.875rem; display: flex; gap: 1.625rem; flex-wrap: wrap; align-items: baseline;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.s-paper .startband, .s-paper2 .startband { background: rgba(174, 135, 67, 0.07); }
.tag { font: 500 var(--fs-label) / 1.4 var(--font-head); letter-spacing: 0.19em; text-transform: uppercase; color: var(--label); }
.tag-block { display: block; margin-top: var(--sp-block); }
.startband .t { font-size: var(--fs-small); }
.startband .t b { color: var(--label); font-family: var(--font-head); font-weight: 600; margin-right: 0.375rem; }
.layers { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; padding: 0; list-style: none; }
.layers + .lede { margin-top: 2.125rem; }
.layer {
  background: var(--c-navy-2); border-left: 3px solid var(--c-gold);
  padding: 2rem 2.125rem; border-radius: 1px;
  display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 2.125rem; align-items: start;
}
.s-paper .layer, .s-paper2 .layer { background: #FFFFFF; border: 1px solid var(--c-line); border-left: 3px solid var(--c-gold); }
@media (max-width: 47.5em) { .layer { grid-template-columns: 1fr; gap: 1.375rem; padding: 1.5rem 1.375rem; } }
.layer .tag { display: block; margin-bottom: 0.5625rem; }
.layer h3 { margin-bottom: 0.6875rem; }
.layer > div > p { color: var(--text-2); font-size: clamp(0.93rem, 0.9rem + 0.12vw, 0.97rem); line-height: 1.58; }
.pills { display: flex; flex-wrap: wrap; gap: 0.5625rem; padding: 0; margin: 0; list-style: none; }
.pill {
  border: 1px solid var(--hairline); padding: 0.5625rem 0.8125rem; border-radius: 1px;
  display: inline-flex; gap: 0.5625rem; align-items: baseline;
  font-size: clamp(0.85rem, 0.83rem + 0.08vw, 0.875rem);
}
.pill b { font-family: var(--font-head); font-weight: 600; color: var(--label); }

/* ---------- toolkit ---------- */
.tk-grid { display: grid; grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr); gap: clamp(2.5rem, 5vw, 3.75rem); align-items: center; }
@media (max-width: 53.75em) { .tk-grid { grid-template-columns: 1fr; } }
.shadowed img, .shadowed { border-radius: var(--radius); }
.tk-grid .shadowed img { box-shadow: 0 2px 8px rgba(4, 18, 37, 0.1), 0 26px 52px rgba(4, 18, 37, 0.16); }
.feature-list { list-style: none; padding: 0; margin: 1.875rem 0 0; display: flex; flex-direction: column; gap: 1rem; }
.feature-list li { display: flex; gap: 0.875rem; align-items: flex-start; font-size: clamp(0.95rem, 0.93rem + 0.1vw, 1rem); line-height: 1.58; text-wrap: pretty; }
.feature-list .ic { margin-top: 0.2em; width: 1.375rem; height: 1.375rem; }
.spread { margin: clamp(3.5rem, 7vw, 5.5rem) 0 0; }
/* The photograph carries its own edges, so no frame around it — a border here
   just drew a box in the empty desk space. */
.spread img { width: 100%; display: block; border-radius: var(--radius); }

/* click-to-enlarge trigger: a real button, so it is keyboard reachable */
.zoomable {
  display: block; position: relative; width: 100%; padding: 0; margin: 0;
  border: 0; background: none; cursor: zoom-in; border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(4, 18, 37, 0.07), 0 20px 44px rgba(4, 18, 37, 0.1);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.zoomable:hover { box-shadow: 0 4px 12px rgba(4, 18, 37, 0.1), 0 26px 56px rgba(4, 18, 37, 0.16); }
.zoom-hint {
  position: absolute; right: 0.875rem; bottom: 0.875rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(4, 18, 37, 0.82); color: var(--c-ivory);
  padding: 0.5rem 0.8125rem; border-radius: 2px;
  font: 500 var(--fs-label) / 1 var(--font-head);
  letter-spacing: 0.16em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0.92; transition: opacity 0.2s ease;
}
.zoomable:hover .zoom-hint { opacity: 1; }
.zoom-hint .ic { width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: reduce) { .zoomable, .zoom-hint { transition: none; } }

/* ---------- lightbox ---------- */
.lightbox {
  width: min(96vw, 1600px); max-width: none;
  max-height: 94svh; padding: 0; border: 0; background: transparent;
  overflow: visible; color: var(--c-ivory);
}
.lightbox::backdrop {
  background: rgba(4, 18, 37, 0.97);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.lightbox[open] { display: flex; flex-direction: column; gap: 0.875rem; }
.lightbox-scroll { overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 4px; }
.lightbox-img {
  display: block; width: 100%; height: auto;
  max-height: 84svh; object-fit: contain;
  border-radius: 4px; background: var(--c-navy-2);
}
.lightbox-caption {
  font-size: var(--fs-small); line-height: 1.5; color: #C3CCD6;
  text-wrap: pretty; margin: 0;
}
.lightbox-close {
  position: absolute; top: -0.5rem; right: -0.5rem; z-index: 2;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-navy); color: var(--c-ivory);
  border: 1px solid rgba(234, 225, 211, 0.5); border-radius: 50%; cursor: pointer;
}
.lightbox-close:hover { background: var(--c-gold); color: var(--c-navy); border-color: var(--c-gold); }
.lightbox-close svg { width: 1.25rem; height: 1.25rem; }
.lightbox-close:focus-visible { outline: 2px solid var(--c-gold-light); outline-offset: 2px; }
@media (max-width: 40em) {
  .lightbox { width: 100vw; max-height: 100svh; }
  .lightbox-close { top: 0.5rem; right: 0.5rem; }
  .lightbox-caption { padding-inline: 1rem; }
  /* A two-page spread scaled to a phone's width is unreadable. Render it tall
     instead and let the reader swipe sideways, which beats pinch-zooming. */
  .lightbox-scroll { max-height: 74svh; }
  .lightbox-img { width: auto; height: 74svh; max-width: none; max-height: none; }
}
.caption { font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); max-width: 74ch; margin-top: 1.125rem; text-wrap: pretty; }

/* form (visual template for the HubSpot embed) */
.get-form { margin-top: 2.375rem; }
.get { display: flex; gap: 0.6875rem; flex-wrap: wrap; align-items: stretch; }
.get input {
  flex: 1 1 15.375rem; min-width: 0; min-height: 48px; padding: 0.8125rem 1.0625rem;
  font: 400 1rem/1.4 var(--font-body);
  border: 1px solid var(--c-edge); background: #FFFFFF; color: var(--c-ink); border-radius: 1px;
}
.get input::placeholder { color: #6F6B62; opacity: 1; }
.get input:focus-visible { border-color: var(--c-gold-deep); outline: 2px solid var(--c-gold-deep); outline-offset: 1px; }
.get input[aria-invalid="true"] { border-color: #8A3A2E; border-width: 2px; }
.s-navy .get input { border-color: rgba(234, 225, 211, 0.5); background: rgba(234, 225, 211, 0.06); color: var(--c-ivory); }
.s-navy .get input::placeholder { color: #9CA8B6; }
.s-navy .get input:focus-visible { border-color: var(--c-gold-light); outline-color: var(--c-gold-light); }
.s-navy .get input[aria-invalid="true"] { border-color: #E7A79A; }
/* Spam decoy. display:none so it cannot render, cannot be focused, cannot be
   autofilled and is never announced — bots that parse the HTML still fill it. */
.hp { display: none; }

.consent { display: flex; gap: 0.6875rem; align-items: flex-start; margin-top: 1rem; max-width: 56ch; }
.consent input[type="checkbox"] {
  flex: none; width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0;
  accent-color: var(--c-gold); cursor: pointer;
}
.consent label { font-size: 0.84375rem; line-height: 1.55; color: var(--text-2); cursor: pointer; }
.consent input[aria-invalid="true"] { outline: 2px solid #8A3A2E; outline-offset: 2px; }
.s-navy .consent input[aria-invalid="true"] { outline-color: #E7A79A; }

.micro { font-size: 0.84375rem; color: var(--text-2); margin-top: 0.9375rem; line-height: 1.55; max-width: 56ch; }
.micro.error { color: #8A3A2E; font-weight: 600; }
.s-navy .micro.error { color: #E7A79A; }

/* ---------- podcast teaser ---------- */
.pod-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (max-width: 40em) { .pod-grid { grid-template-columns: 1fr; } }
.pod-badge {
  width: clamp(4.5rem, 9vw, 6rem); height: clamp(4.5rem, 9vw, 6rem);
  border: 1px solid var(--hairline); border-radius: 1px;
  display: flex; align-items: center; justify-content: center; color: var(--c-gold-light);
}
.pod-badge .ic { width: 45%; height: 45%; }
/* standing alone above a headline, the badge needs more room than it does
   beside one in the teaser grid */
.pod-badge-stacked { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.pod-meta { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.pod-when { display: inline-flex; gap: 0.625rem; align-items: center; font: 500 var(--fs-label) / 1.4 var(--font-head); letter-spacing: 0.18em; text-transform: uppercase; color: var(--label); }

/* ---------- book ---------- */
.bk-grid { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (max-width: 53.75em) { .bk-grid { grid-template-columns: 1fr; } }
.bk-grid .shadowed img { box-shadow: 0 2px 6px rgba(4, 18, 37, 0.1), 0 26px 52px rgba(4, 18, 37, 0.16); }
.quote { border-left: 2px solid var(--c-gold); padding-left: 1.25rem; margin: 0; }

/* ---------- voices: five endorsements, the quote doing the talking ---------- */
.voices { margin-top: clamp(3rem, 6vw, 4.5rem); }
.voices > .eyebrow { margin-bottom: 1.5rem; }
/* Columns rather than a grid: the quotes differ wildly in length, and grid rows
   align to the tallest card, which left holes under the short ones. Columns pack
   them tight, and reading order still runs top to bottom within a column. */
.voices-grid {
  columns: 3 21rem;
  column-gap: clamp(1rem, 2vw, 1.5rem);
}
/* Each quote is a closed card, so which words belong to which name is never in
   doubt — that was the problem with loose quotes in a ragged grid. */
.voices .quote {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem); border: 0; padding: clamp(1.5rem, 3vw, 2rem);
  -webkit-column-break-inside: avoid; break-inside: avoid;
  background: #FFFFFF;
  border-top: 3px solid var(--c-gold);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(4, 18, 37, 0.05), 0 10px 28px rgba(4, 18, 37, 0.06);
}
/* the quote itself is the point: large, dark, generous */
.voices .quote p {
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);
  line-height: 1.5;
  color: var(--c-ink);
  margin: 0 0 1.25rem;
  text-wrap: pretty;
}
/* the attribution stays quiet and sits at the foot of its own card */
.voices .quote footer {
  padding-top: 0.875rem;
  border-top: 1px solid var(--c-line);
  font: 500 var(--fs-label) / 1.5 var(--font-head);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-stone);
}
.voices .quote footer b {
  display: block; color: var(--c-ink); font-weight: 600;
  letter-spacing: 0.12em; margin-bottom: 0.1875rem;
}

.stackshot { margin-top: clamp(3rem, 6vw, 4.875rem); }
.stackshot img { width: 100%; border-radius: var(--radius); box-shadow: 0 2px 6px rgba(4, 18, 37, 0.08), 0 24px 48px rgba(4, 18, 37, 0.12); }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.25rem); align-items: center; margin-top: 2rem; }
@media (max-width: 40em) { .about { grid-template-columns: 1fr; gap: 1.625rem; } }
.about img { width: 10rem; height: 10rem; border-radius: 50%; object-fit: cover; }
.about .name { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.4rem); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 0.75rem; }
.about p { color: var(--text-2); max-width: 78ch; text-wrap: pretty; }
.author-social { margin-top: 1.25rem; }
.social-link {
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 44px;
  font: 500 var(--fs-btn) / 1.2 var(--font-head);
  letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none;
}
.social-link .ic { width: 1.25rem; height: 1.25rem; }
/* underline the words only — an inline-flex link would otherwise draw the rule
   under the icon and the gap as well */
.social-link:hover .social-label { text-decoration: underline; text-underline-offset: 0.3em; }

/* ---------- faq ---------- */
.faq { margin-top: 2.25rem; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  cursor: pointer; list-style: none; padding: 1.125rem 0.25rem; min-height: 44px;
  font: 600 clamp(1rem, 0.97rem + 0.15vw, 1.0625rem) / 1.45 var(--font-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--label); transition: transform 0.2s ease; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details > div { padding: 0 0.25rem 1.25rem; color: var(--text-2); max-width: 65ch; text-wrap: pretty; }
.faq details > div > p + p { margin-top: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .faq summary .ic { transition: none; } }

/* ---------- legal pages (imprint, privacy) ---------- */
.legal { max-width: 46rem; }
.page-head + .section { padding-top: calc(var(--sp-section) * 0.6); }
.legal h2 { font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem); margin-top: var(--sp-block); }
.legal h3 { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); margin-top: 2rem; }
.legal p, .legal ul, .legal dl { margin-top: 0.875rem; color: var(--text-2); text-wrap: pretty; }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: 0.4375rem; }
.legal address { font-style: normal; }
.legal .intro-note {
  border-left: 3px solid var(--c-gold); background: rgba(174, 135, 67, 0.07);
  padding: 1rem 1.25rem; margin-top: 1.75rem; font-size: var(--fs-small); color: var(--text-2);
}
.legal dl { display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); gap: 0.5rem 1.5rem; }
.legal dt { font: 500 var(--fs-label) / 1.5 var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); padding-top: 0.2em; }
.legal dd { margin: 0; }
@media (max-width: 34em) { .legal dl { grid-template-columns: 1fr; gap: 0.125rem; } .legal dd { margin-bottom: 0.75rem; } }
.lang-marker {
  font: 500 var(--fs-label) / 1.4 var(--font-head);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--label); margin: 0 0 0.875rem;
  padding-bottom: 0.625rem; border-bottom: 1px solid var(--hairline);
}
.legal .translation .lang-marker { margin-top: 0; }
.legal .updated { font-size: var(--fs-small); color: var(--text-2); margin-top: var(--sp-block); padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
/* the English translation sits below the binding German text, visibly secondary */
.legal .translation { margin-top: var(--sp-section); border-top: 3px solid var(--c-gold); padding-top: var(--sp-block); }
.legal .translation .updated { border-top: 0; }
.legal .intro-note a { display: inline-block; margin-top: 0.5rem; font-weight: 600; }

/* ---------- AI-generated image label ---------- */
figure { margin: 0; }
.ai-note {
  display: block; margin-top: 0.625rem;
  font: 500 var(--fs-label) / 1.4 var(--font-head);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-2);
}
.ai-note::before {
  content: ""; display: inline-block; vertical-align: 0.05em;
  width: 0.5em; height: 0.5em; margin-right: 0.6em; border-radius: 50%;
  background: var(--label, var(--c-gold-deep));
}
/* over a bleeding photo the label needs its own ground */
.ai-note-overlay {
  position: absolute; right: 0.875rem; bottom: 0.875rem; z-index: 2; margin: 0;
  background: rgba(4, 18, 37, 0.72); color: var(--c-ivory);
  padding: 0.4rem 0.7rem; border-radius: 2px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ai-note-overlay::before { background: var(--c-gold-light); }
.caption + .ai-note { margin-top: 0.5rem; }

/* ---------- utility pages (podcast holding, thanks) ---------- */
.page-hero { min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; padding-block: var(--sp-section); }
/* an auto inline-margin on a flex item cancels cross-axis stretch, so the wrap
   would shrink to its content and drift out of line with the header and footer */
.page-hero > .wrap { width: 100%; }
.page-hero .curve-bg { position: absolute; left: 0; right: 0; bottom: 8%; height: clamp(5rem, 16vw, 12rem); pointer-events: none; opacity: 0.9; }
.page-head { padding-block: calc(var(--sp-section) * 0.75) var(--sp-block); position: relative; }
.dl-row { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2.375rem; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--c-navy); color: #97A2B0;
  padding: clamp(3rem, 6vw, 4.875rem) 0 2.875rem;
  border-top: 1px solid rgba(234, 225, 211, 0.13);
  --focus: var(--c-gold-light);
}
.site-footer.compact { padding-top: 1.5rem; border-top: 0; }
.fcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 2.5rem; }
.fcols h2 { font: 500 var(--fs-label) / 1.4 var(--font-head); letter-spacing: 0.19em; text-transform: uppercase; color: var(--c-gold-light); margin-bottom: 0.8125rem; }
.fcols p { font-size: var(--fs-small); line-height: 1.65; color: #97A2B0; }
.fcols a { color: var(--c-ivory); text-decoration: none; border-bottom: 1px solid rgba(201, 160, 99, 0.55); }
.fcols a:hover { border-bottom-color: var(--c-gold-light); color: var(--c-ivory); }
.fbot {
  margin-top: 3.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(234, 225, 211, 0.13);
  font-size: 0.8125rem;
  display: grid; align-items: center; gap: 0.75rem 1.375rem;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "name legal copy" "credit credit credit";
}
.fbot .imprint-name { grid-area: name; }
.fbot .flegal { grid-area: legal; display: flex; gap: 1.375rem; justify-content: center; }
.fbot .copyright { grid-area: copy; justify-self: end; }
.fbot .credit { grid-area: credit; justify-self: center; }
/* tablet and below: one centred column */
@media (max-width: 47.5em) {
  .fbot {
    grid-template-columns: 1fr;
    grid-template-areas: "legal" "name" "copy" "credit";
    justify-items: center; text-align: center; gap: 0.25rem;
  }
  .fbot .copyright { justify-self: center; }
  .fbot .credit { margin-top: 0.5rem; }
}
.site-footer.compact .fbot { margin-top: 0; padding-top: 1.5rem; border-top: 0; }
.fbot .imprint-name { font-family: var(--font-head); letter-spacing: 0.17em; text-transform: uppercase; }
.fbot a { color: #97A2B0; text-decoration: none; padding-block: 0.5rem; }
.fbot .credit a { border-bottom: 1px solid rgba(201, 160, 99, 0.5); }
.fbot .credit a:hover { color: var(--c-ivory); border-bottom-color: var(--c-gold-light); }
.fbot a:hover, .fbot a[aria-current] { color: var(--c-ivory); }

/* ---------- reveal on scroll ---------- */
/* visible by default; hidden only once JS confirms the observer is active */
.js-reveal .rv { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js-reveal .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .rv { opacity: 1; transform: none; transition: none; }
  .btn, .nav-links a { transition: none; }
}

/* ---------- forced colours (Windows high contrast) ---------- */
@media (forced-colors: active) {
  .btn, .pill, .outcome, .layer, .voices, .get input { border: 1px solid CanvasText; }
  .hero-shot::after { display: none; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .nav-toggle, .curve, .hero-shot, .skip-link, .get, .cta-row { display: none !important; }
  body { background: #FFF; color: #000; }
  .s-navy { background: #FFF !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}