/* ════════════════════════════════════════════════════════════
   H3 WEBSITE — v12 · single stylesheet
   Built against company/website/h3-design-system.md (2026-08-10).
   v11 shipped this as two files (styles.css + styles-v10.css layered);
   v12 merges them so a property has one place to look. No visual change
   is intended — v12 is verified pixel-identical to v11 at 375/768/1280.

   PART I  — base system (tokens, type, layout, page furniture)
   PART II — component layer (see the header further down)
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   H3 WEBSITE v3 — shared design system
   2026-07-08 · multi-page build (strategy executed)
   Palette/type per brand guide: Boldonse + Rubik,
   Blue/Green/Sand/Black, dither, Horizon Grid, light theme.
   ════════════════════════════════════════════ */
/* ── Self-hosted brand fonts (GDPR: no Google CDN) ── */
@font-face{font-family:'Boldonse';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Boldonse-Regular.woff2') format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/Rubik-Light.woff2') format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Rubik-Regular.woff2') format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/Rubik-Medium.woff2') format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/Rubik-Bold.woff2') format('woff2')}

:root {
  --blue: #AAB5D8;
  --green: #BDC7A4;
  --sand: #E9E7DF;
  --black: #000000;
  --white: #FFFFFF;
  --blue-deep: #8a97c4;
  --green-deep: #a3af85;
  --sand-dark: #d8d5cb;
  --blue-ink: #6b7ab0;      /* folded from v10: belief emphasis, ~3.4:1 on sand (P1-24) */
  --grain-opacity: 0.022;   /* folded from v10 layer: grain subtler on text (feedback round 1, 3 aug) */
  --section-pad: clamp(80px, 12vh, 160px);
  --content-max: 1200px;
  --content-narrow: 800px;
}

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

::selection { background: var(--blue); color: var(--black); }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: clip;         /* folded from v10: long dropdown labels extended scrollWidth */
  scroll-padding-top: 96px; /* folded from v10 (P1-28): anchor targets clear the fixed nav */
}

body {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  color: var(--black);
  background: var(--sand);
  line-height: 1.5;
  overflow-x: clip; /* clip, not hidden: hidden breaks position:sticky */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page themes (subpages get a fixed dominant; home uses the lerp engine) */
body.theme-black { background: var(--black); color: var(--white); }
body.theme-blue  { background: var(--blue); }
body.theme-white { background: var(--white); }
body.theme-sand  { background: var(--sand); }

/* ── Grain overlay ── */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10000;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ── Typography ── */
.font-display {
  font-family: 'Boldonse', cursive;
  line-height: 1.42; /* Boldonse: never below 1.35 or lines collide */
  letter-spacing: 0;
}

h1, h2, h3 { font-family: 'Rubik', sans-serif; }

.section-label {
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: clamp(0.7rem, 0.9vw, 0.8rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-bottom: 28px;
}

/* ── Background lerp layer (home only) ── */
#bg-layer {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -2;
  background-color: var(--sand);
}

/* ── Horizon Grid ── */
.horizon-grid {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
}

.horizon-grid .line {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: currentColor;
  color: var(--black);
  transition: color 0.8s ease;
}

.horizon-grid.dark-mode .line, body.theme-black .horizon-grid .line { color: var(--white); }

.horizon-grid .line:nth-child(1) { left: 25%; }
.horizon-grid .line:nth-child(2) { left: 50%; }
.horizon-grid .line:nth-child(3) { left: 75%; }
.horizon-grid .line:nth-child(4) { left: calc(100% - 1px); opacity: 0.3; }

/* ════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 10001;           /* folded from v10: above the grain overlay (10000), which made the nav look grainy */
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav.scrolled {
  background: rgba(233, 231, 223, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav.dark.scrolled { background: rgba(0, 0, 0, 0.82); }

.nav-logo {
  color: var(--black);
  transition: color 0.5s ease, transform 0.5s ease;
  display: block;
  height: 38px;             /* folded from v10: crisper on 1x screens (P1-14 logo size norm) */
  flex: none;
  transform-origin: left center;
}

.nav.dark .nav-logo { color: var(--white); }
.nav.scrolled .nav-logo { transform: scale(0.9); }

.nav-logo svg { height: 100%; width: auto; display: block; }

.nav-right { display: flex; align-items: center; gap: 28px; }

.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
}

.nav-links a {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 13px;
  text-decoration: none;
  color: var(--black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
  transition: color 0.4s ease, opacity 0.3s ease;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { opacity: 1; }
.nav-links a.active::after { transform: scaleX(1); }

.nav.dark .nav-links a { color: var(--white); }

.nav-cta {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sand);
  background: var(--black);
  padding: 11px 18px;       /* folded from v10: slimmer CTA */
  position: relative;
  overflow: hidden;
  transition: color 0.4s ease;
  white-space: nowrap;
}

.nav-cta span { position: relative; z-index: 1; }

.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-cta:hover { color: var(--black); }
.nav-cta:hover::before { transform: scaleY(1); }

.nav.dark .nav-cta { background: var(--sand); color: var(--black); }
.nav.dark .nav-cta::before { background: var(--blue); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }

.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--black);
  margin: 5px 0;
  transition: all 0.3s ease;
}

.nav.dark .nav-toggle span { background: var(--white); }

@media (max-width: 1020px) {
  .nav { padding: 16px 24px; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .nav-links {
    position: fixed;
    top: 0; right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--sand);
    flex-direction: column;
    padding: 100px 40px 40px;
    gap: 24px;
    transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -20px 0 60px rgba(0,0,0,0.1);
  }
  .nav-links { visibility: hidden; transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.5s; }
  .nav-links.open { right: 0; visibility: visible; transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; }
  .nav.dark .nav-links { background: var(--black); }
  .nav-links a { font-size: 18px; }
  .nav-links .nav-cta-mobile { display: block; margin-top: 16px; background: var(--black); color: var(--sand); text-align: center; padding: 14px 20px; border-radius: 8px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; font-weight: 500; opacity: 1; }
  .nav-links .nav-cta-mobile::after { display: none; }
  .nav.dark .nav-links .nav-cta-mobile { background: var(--sand); color: var(--black); }
}
.nav-cta-mobile { display: none; }

/* ════════════════════════════════════════════
   SECTIONS + PAGE HERO
   ════════════════════════════════════════════ */
section {
  position: relative;
  padding: var(--section-pad) 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

section.tall { min-height: 100vh; }

@media (max-width: 768px) { section { padding: var(--section-pad) 24px; } }

.section-inner {
  max-width: var(--content-max);
  width: 100%;
  position: relative;
  z-index: 2;
}

.section-narrow { max-width: var(--content-narrow); }

/* Subpage opening block */
.page-hero {
  min-height: 62vh;
  padding-top: 160px;
  justify-content: flex-end;
  padding-bottom: 64px;
}

.page-hero .section-label { margin-bottom: 20px; }

.page-title {
  font-family: 'Boldonse', cursive;
  font-size: clamp(2rem, 5.2vw, 4.6rem);
  line-height: 1.42;
  letter-spacing: 0;
  text-transform: uppercase;
  max-width: 1050px;
}

.page-intro {
  margin-top: 26px;
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.7;
  max-width: 640px;
  opacity: 0.72;
}

/* ── Reveals ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ── Buttons / links ── */
.btn-solid {
  display: inline-block;
  padding: 14px 26px;       /* folded from v10: slimmer button */
  background: var(--black);
  color: var(--sand);
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 13px;          /* folded from v10 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.4s ease;
}

.btn-solid span { position: relative; z-index: 1; }

.btn-solid::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sand);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-solid:hover { color: var(--black); }
.btn-solid:hover::before { transform: scaleY(1); }

.btn-solid.on-dark { background: var(--sand); color: var(--black); }
.btn-solid.on-dark::before { background: var(--blue); }

.link-plain {
  font-weight: 500;
  font-size: 0.9rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity 0.3s ease;
}

.link-plain:hover { opacity: 0.65; }

.cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cta-or { font-size: 0.85rem; opacity: 0.45; }

/* ════════════════════════════════════════════
   HOME — HERO (video)
   ════════════════════════════════════════════ */
#hero {
  height: 100svh;
  min-height: 640px;
  padding: 0 40px;
  text-align: center;
  overflow: hidden;
}

.hero-video-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; }

.hero-video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.02) brightness(1.04);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(233, 231, 223, 0.58) 0%,
    rgba(233, 231, 223, 0.48) 45%,
    rgba(233, 231, 223, 0.62) 100%);
}

.hero-video-wrap.video-off { display: none; }

.video-toggle{position:absolute;bottom:22px;right:22px;z-index:5;background:rgba(0,0,0,.6);color:var(--sand);border:1px solid rgba(233,231,223,.45);border-radius:999px;padding:8px 16px;font-family:'Rubik',sans-serif;font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.video-toggle:hover{background:rgba(0,0,0,.8)}

.hero-content {
  position: relative; z-index: 3; max-width: 1180px;
  /* Keep the headline directly over the landscape; the smaller .hero-lead panel
     remains as the readable text treatment for the supporting copy. */
  padding: clamp(24px, 3.5vw, 48px) clamp(22px, 4vw, 64px);
}

.hero-headline {
  font-family: 'Boldonse', cursive;
  font-size: clamp(2.1rem, 5vw, 5.3rem);
  line-height: 1.42;
  letter-spacing: 0;
  color: var(--black);
  opacity: 0;
  animation: heroFadeIn 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

@keyframes heroFadeIn {
  0% { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero-sub {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: clamp(0.8rem, 1.2vw, 1.05rem);
  color: var(--black);
  opacity: 0;
  animation: heroSubIn 1.2s cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
  margin-top: 34px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

@keyframes heroSubIn {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 0.72; transform: translateY(0); }
}

.hero-cta {
  margin-top: 44px;
  opacity: 0;
  /* v12 audit D2: was 1.9s — the primary action stayed invisible ~2s after first paint */
  animation: heroCtaIn 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.9s forwards;
}

@keyframes heroCtaIn {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════
   PHASE CARDS (home journey teaser)
   ════════════════════════════════════════════ */
.phase-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 56px 0 48px;
}

@media (max-width: 900px) { .phase-cards { grid-template-columns: 1fr; } }

.phase-card {
  border: 1px solid rgba(0,0,0,0.14);
  padding: clamp(24px, 2.6vw, 40px);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--black);
  display: block;
}

.phase-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.05);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.phase-card:hover::before { transform: scaleY(1); }

/* V12 (2026-08-11): hierarchy swapped inside the card. "Horizon 1/2/3" was the display-type line
   and the actual proposition name was the small one, so the eye landed on an internal label instead
   of on what H3 sells. The horizon number is now a quiet eyebrow and the name carries the card. */
.phase-card .pc-num {
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.42;
  opacity: 0.45;
  display: block;
  margin-bottom: 10px;
}

.phase-card h3 {
  font-family: 'Boldonse', cursive;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  letter-spacing: 0;
  line-height: 1.42;
  text-transform: none;
  margin-bottom: 14px;
  position: relative;
}

.phase-card p { font-size: 0.93rem; line-height: 1.6; opacity: 0.65; position: relative; }

.phase-card .pc-more {
  display: inline-block;
  margin-top: 18px;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(0,0,0,0.35);
  padding-bottom: 2px;
  position: relative;
}

/* ════════════════════════════════════════════
   PROOF STRIP
   ════════════════════════════════════════════ */
.proof-strip { text-align: center; }

.proof-names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 18px 44px;
  margin-top: 34px;
}

.proof-names span {
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  letter-spacing: 0.06em;
  opacity: 0.5;
}

.proof-note { margin-top: 26px; font-size: 0.92rem; opacity: 0.55; }

/* ════════════════════════════════════════════
   JOURNEY PAGE — stages + proposition list
   ════════════════════════════════════════════ */
.stage { margin-bottom: 72px; }

.stage-marker {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 0 0 14px;
}

.stage-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; align-self: center; }

.stage-title {
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.stage-sub { font-weight: 300; font-size: 0.85rem; opacity: 0.55; }

.stage-phase { margin-left: auto; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.4; }

.cap-list { list-style: none; }

.cap-item {
  border-top: 1px solid rgba(0,0,0,0.12);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.cap-list .cap-item:last-child { border-bottom: 1px solid rgba(0,0,0,0.12); }

.cap-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.045);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.cap-item:hover::after { transform: scaleY(1); }

.cap-header {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 22px 8px;
  position: relative;
  z-index: 1;
}

.cap-number {
  font-family: 'Boldonse', cursive;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.42;
  color: var(--black);
  min-width: 52px;
  opacity: 0.4;
  transition: opacity 0.4s ease;
}

.cap-item.active .cap-number { opacity: 1; }

.cap-title {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  flex: 1;
}

.cap-goal { font-weight: 300; font-size: 0.8rem; opacity: 0.5; white-space: nowrap; letter-spacing: 0.05em; text-transform: uppercase; }

.cap-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

.cap-expand > div { overflow: hidden; }

.cap-item.active .cap-expand { grid-template-rows: 1fr; }

.cap-desc {
  padding: 0 8px 24px 76px;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(0,0,0,0.65);
  max-width: 640px;
}

.cap-cta {
  display: inline-block;
  margin-top: 14px;
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--black);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  padding-bottom: 3px;
  transition: border-color 0.3s ease, opacity 0.3s ease;
}

.cap-cta:hover { border-color: var(--black); opacity: 0.75; }

.journey-cta { margin-top: 64px; text-align: center; }

.journey-cta p {
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(0,0,0,0.65);
  margin-bottom: 24px;
}

.route-note {
  border-left: 2px solid var(--green-deep);
  padding: 6px 0 6px 22px;
  max-width: 640px;
  margin: 0 auto 64px;
  font-size: 0.98rem;
  line-height: 1.7;
  opacity: 0.75;
}

/* ════════════════════════════════════════════
   APPROACH PAGE
   ════════════════════════════════════════════ */
.phase-block {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: 44px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}

@media (max-width: 768px) { .phase-block { grid-template-columns: 1fr; gap: 12px; } }

.phase-block:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.14); }

.phase-block .pb-num {
  font-family: 'Boldonse', cursive;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.42;
  opacity: 0.85;
}

.phase-block .pb-weeks { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.45; margin-top: 8px; }

.phase-block h3 {
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  margin-bottom: 12px;
}

.phase-block p { font-size: 0.98rem; line-height: 1.7; color: rgba(255,255,255,0.62); max-width: 620px; }

.phase-block ul {
  list-style: none;
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.phase-block li {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.7);
  padding-left: 20px;
  position: relative;
}

.phase-block li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.8;
}

.pb-keep {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--green);
  opacity: 0.9;
}

/* role shift table */
.shift-table { width: 100%; border-collapse: collapse; margin-top: 40px; }

.shift-table th, .shift-table td {
  text-align: left;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 0.92rem;
  font-weight: 300;
  color: rgba(255,255,255,0.72);
  vertical-align: top;
}

.shift-table th {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
}

/* embed tiers */
.tier-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 48px; }

@media (max-width: 900px) { .tier-cards { grid-template-columns: 1fr; } }

.tier-card {
  border: 1px solid rgba(255,255,255,0.14);
  padding: clamp(22px, 2.6vw, 38px);
  position: relative;
  overflow: hidden;
}

.tier-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.05);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.tier-card:hover::before { transform: scaleY(1); }

.tier-card h3 {
  font-family: 'Boldonse', cursive;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.42;
  color: var(--sand);
  margin-bottom: 12px;
  position: relative;
}

.tier-card p { font-size: 0.92rem; line-height: 1.65; color: rgba(255,255,255,0.62); position: relative; }

.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin-top: 48px; }

@media (max-width: 768px) { .principles { grid-template-columns: 1fr; } }

.principle {
  border: 1px solid rgba(255,255,255,0.14);
  padding: clamp(20px, 2.4vw, 34px);
}

.principle h4 { font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; color: var(--sand); }
.principle p { font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.6); }

/* ════════════════════════════════════════════
   EXPEDITIONS PAGE
   ════════════════════════════════════════════ */
.exp-def {
  border-left: 2px solid var(--green-deep);
  padding: 6px 0 6px 22px;
  max-width: 680px;
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.75;
  margin-bottom: 72px;
}

.case-card { border: 1px solid rgba(0,0,0,0.14); padding: clamp(28px, 4vw, 56px); margin-bottom: 56px; background: rgba(255,255,255,0.5); }

.case-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 18px;
}

.case-title {
  font-family: 'Boldonse', cursive;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1.42;
  margin-bottom: 14px;
  max-width: 900px;
}

.case-intro { font-size: 1rem; line-height: 1.7; opacity: 0.7; max-width: 680px; margin-bottom: 44px; }

.case-chapter {
  display: grid;
  grid-template-columns: 150px 1fr 220px;
  gap: clamp(20px, 3vw, 48px);
  padding: 30px 0;
  border-top: 1px solid rgba(0,0,0,0.12);
}

@media (max-width: 900px) { .case-chapter { grid-template-columns: 1fr; gap: 10px; } }

.case-chapter .cc-num {
  font-family: 'Boldonse', cursive;
  font-size: 1.3rem;
  line-height: 1.42;
  opacity: 0.45;
}

.case-chapter .cc-num em { display: block; font-style: normal; font-family: 'Rubik'; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 6px; opacity: 0.9; }

.case-chapter p { font-size: 0.96rem; line-height: 1.7; color: rgba(0,0,0,0.7); }

.cc-metric {
  font-family: 'Boldonse', cursive;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.42;
  color: var(--blue-deep);
}

.cc-metric em { display: block; font-style: normal; font-family: 'Rubik'; font-weight: 300; font-size: 0.82rem; color: rgba(0,0,0,0.55); margin-top: 8px; line-height: 1.5; }

.stays-behind {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 40px;
  border: 1px solid rgba(0,0,0,0.14);
}

@media (max-width: 768px) { .stays-behind { grid-template-columns: 1fr; } }

.stays-behind > div { padding: clamp(20px, 2.6vw, 34px); }

.stays-behind > div:first-child { border-right: 1px solid rgba(0,0,0,0.14); }

@media (max-width: 768px) { .stays-behind > div:first-child { border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.14); } }

.stays-behind h4 { font-weight: 700; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; opacity: 0.65; }

.stays-behind ul { list-style: none; display: grid; gap: 8px; }

.stays-behind li { font-size: 0.92rem; line-height: 1.55; opacity: 0.75; padding-left: 18px; position: relative; }

.stays-behind li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--green-deep); }

.case-stack { margin-top: 34px; font-size: 0.88rem; opacity: 0.55; }

.case-note { margin-top: 20px; font-size: 0.82rem; opacity: 0.45; font-style: italic; }

.exp-past { margin-top: 24px; }

/* ════════════════════════════════════════════
   FIELD NOTES (glossary)
   ════════════════════════════════════════════ */
.notes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }

@media (max-width: 900px) { .notes-grid { grid-template-columns: 1fr; } }

.note-card { border: 1px solid rgba(0,0,0,0.12); padding: clamp(24px, 3vw, 40px); background: rgba(255,255,255,0.5); }

.note-card h3 {
  font-family: 'Boldonse', cursive;
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.42;
  margin-bottom: 14px;
}

.note-card p { font-size: 0.93rem; line-height: 1.7; color: rgba(0,0,0,0.68); }
.note-card p + p { margin-top: 10px; }

/* ════════════════════════════════════════════
   TEAM (about + home teaser) — real photos,
   machine mode (dithered B/W) ↔ human mode on hover
   ════════════════════════════════════════════ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; gap: 48px; max-width: 480px; } }

.team-card { position: relative; text-decoration: none; color: inherit; display: block; }

.team-photo {
  width: 100%;
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--sand-dark);
}

.team-card:nth-child(1) .team-photo { border-radius: 0 0 34% 0; }
.team-card:nth-child(2) .team-photo { border-radius: 0 0 0 34%; }
.team-card:nth-child(3) .team-photo { border-radius: 0 34% 0 0; }

.tp-layer {
  position: absolute;
  inset: 0;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.tp-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* machine mode: B/W + dither perforation */
.tp-machine .tp-img {
  filter: grayscale(1) contrast(1.12) brightness(1.02);
  mask-image: radial-gradient(circle, black 1.15px, transparent 1.15px);
  -webkit-mask-image: radial-gradient(circle, black 1.15px, transparent 1.15px);
  mask-size: 3.2px 3.2px;
  -webkit-mask-size: 3.2px 3.2px;
}

.tp-machine { background: var(--sand-dark); }

/* human mode on hover */
.tp-human { opacity: 0; }
.team-card:hover .tp-human { opacity: 1; }
.team-card:hover .tp-machine { opacity: 0; }

.team-name { font-weight: 700; font-size: 1.1rem; margin-bottom: 2px; }

.team-role {
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 12px;
}

.team-bio { font-weight: 300; font-size: 0.9rem; line-height: 1.65; color: rgba(0,0,0,0.65); }

.team-cta-line {
  max-width: 700px;
  margin: 64px auto 0;
  text-align: center;
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: rgba(0,0,0,0.62);
}

.team-diagonal {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 74%, rgba(189, 199, 164, 0.5) 74.15%);
  z-index: 0;
  pointer-events: none;
}

/* about extras */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 48px; }

@media (max-width: 900px) { .value-grid { grid-template-columns: 1fr; } }

.value-card { border: 1px solid rgba(0,0,0,0.14); padding: clamp(20px, 2.4vw, 34px); }

.value-card h4 { font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }
.value-card p { font-size: 0.9rem; line-height: 1.6; opacity: 0.65; }

/* ════════════════════════════════════════════
   JOIN PAGE
   ════════════════════════════════════════════ */
.join-cols { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 5vw, 80px); }

@media (max-width: 900px) { .join-cols { grid-template-columns: 1fr; } }

.join-cols h3 { font-weight: 700; font-size: 1.05rem; margin: 34px 0 12px; }
.join-cols h3:first-child { margin-top: 0; }

.join-cols p { font-size: 0.96rem; line-height: 1.7; opacity: 0.72; }

.join-cols ul { list-style: none; display: grid; gap: 10px; margin-top: 12px; }

.join-cols li { font-size: 0.94rem; line-height: 1.6; opacity: 0.75; padding-left: 20px; position: relative; }

.join-cols li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--green-deep); }

.join-aside {
  border: 1px solid rgba(0,0,0,0.14);
  padding: clamp(24px, 3vw, 40px);
  align-self: start;
  position: sticky;
  top: 100px;
}

.join-aside h4 { font-weight: 700; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px; opacity: 0.6; }

.join-aside dl { display: grid; gap: 14px; }
.join-aside dt { font-weight: 700; font-size: 0.85rem; }
.join-aside dd { font-size: 0.9rem; opacity: 0.65; margin: 2px 0 0; }

/* ════════════════════════════════════════════
   CONTACT PAGE
   ════════════════════════════════════════════ */
.intent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-width: 940px; margin: 0 auto; }

@media (max-width: 768px) { .intent-grid { grid-template-columns: 1fr; } }

.intent {
  border: 1px solid rgba(255,255,255,0.12);
  padding: clamp(28px, 4vw, 52px);
  position: relative;
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  display: block;
}

.intent::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.05);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.intent:hover::before { transform: scaleY(1); }

.intent-label {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
}

.intent:nth-child(1) .intent-label { color: var(--green); }
.intent:nth-child(2) .intent-label { color: var(--blue); }
.intent:nth-child(3) .intent-label { color: var(--sand); }
.intent:nth-child(4) .intent-label { color: var(--green); }

.intent h3 { font-weight: 700; font-size: clamp(1.2rem, 1.8vw, 1.55rem); color: var(--sand); margin-bottom: 12px; position: relative; }

.intent p { font-weight: 300; font-size: 0.94rem; line-height: 1.65; color: rgba(255,255,255,0.55); margin-bottom: 22px; position: relative; }

.intent .go { font-weight: 500; font-size: 0.9rem; color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 3px; position: relative; display: inline-block; }

.contact-email { text-align: center; margin-top: 64px; }

.contact-email a {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--blue);
  text-decoration: none;
  letter-spacing: 0.03em;
}

.contact-email a:hover { color: var(--sand); }

/* ════════════════════════════════════════════
   CONNECT (home) + FOOTER (all pages)
   ════════════════════════════════════════════ */
#connect { min-height: 100vh; padding: var(--section-pad) 40px; color: var(--white); }

.connect-headline {
  font-family: 'Boldonse', cursive;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 1.42;
  color: var(--sand);
  text-align: center;
  margin-bottom: 72px;
}

.connect-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  max-width: 940px;
  margin: 0 auto 72px;
}

@media (max-width: 768px) { .connect-paths { grid-template-columns: 1fr; } }

.connect-path {
  border: 1px solid rgba(255,255,255,0.12);
  padding: clamp(28px, 4vw, 52px);
  position: relative;
  overflow: hidden;
}

.connect-path::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.05);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.connect-path:hover::before { transform: scaleY(1); }

.connect-path-label {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
}

.connect-path:nth-child(1) .connect-path-label { color: var(--green); }
.connect-path:nth-child(2) .connect-path-label { color: var(--blue); }

.connect-path h3 {
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--sand);
  margin-bottom: 14px;
  position: relative;
}

.connect-path p {
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  margin-bottom: 26px;
  position: relative;
}

.connect-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 4px;
  transition: border-color 0.3s ease, gap 0.3s ease;
  position: relative;
}

.connect-link:hover { border-color: var(--white); gap: 15px; }

.site-footer {
  background: var(--black);
  color: var(--white);
  padding: 72px 40px 40px;
  position: relative;
}

.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
}

@media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; } }

.footer-logo svg { height: 38px; width: auto; display: block; opacity: 0.6; color: var(--white); } /* 38px folded from v10: matches the nav (P1-14) */

.footer-tag { margin-top: 16px; font-size: 0.85rem; opacity: 0.4; }

.footer-contact { margin-top: 8px; max-width: 34ch; font-size: .78rem; line-height: 1.6; opacity: .68; }
.footer-contact a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.home-mini-form { max-width: 680px; margin: 34px auto 0; padding: 22px; text-align: left; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); }
.home-mini-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-mini-form input, .home-mini-form textarea { width: 100%; border: 1px solid rgba(255,255,255,.28); border-radius: 0; padding: 12px 14px; color: var(--white); background: rgba(0,0,0,.22); font: 300 .95rem/1.4 'Rubik', sans-serif; }
.home-mini-form textarea { display: block; margin-top: 12px; resize: vertical; min-height: 82px; }
.home-mini-form input::placeholder, .home-mini-form textarea::placeholder { color: rgba(255,255,255,.62); }
.home-mini-form button { margin-top: 14px; }
.home-mini-form .form-status { min-height: 1.5em; margin: 12px 0 0; color: rgba(255,255,255,.78); font-size: .85rem; }
@media (max-width: 600px) { .home-mini-fields { grid-template-columns: 1fr; } }

.cta-note { flex-basis: 100%; display: block; text-align: center; color: rgba(255,255,255,.58); font-size: .82rem; line-height: 1.45; }
.hero-cta .cta-note { color: rgba(0,0,0,.62); }
.midcta .cta-note { color: rgba(0,0,0,.62); }

.footer-links { display: flex; gap: 28px; flex-wrap: wrap; list-style: none; }

.footer-links a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}

.footer-links a:hover { opacity: 1; }

.footer-base {
  max-width: var(--content-max);
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  opacity: 0.35;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-video { display: none; }
  .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-headline, .hero-sub, .hero-cta { animation-duration: 0.01s; animation-delay: 0s; }
}

/* ════════════════════════════════════════════
   v8 — MULTI-PAGE SHARED COMPONENTS
   (moved out of v7 inline <style>; adds dropdown,
   breadcrumb, forms, newsletter, article)
   2026-07-22
   ════════════════════════════════════════════ */

/* ── Skip link (all pages) ── */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--black);color:var(--white);padding:10px 16px;font-family:'Boldonse',cursive;font-size:.7rem;line-height:1.42;text-decoration:none}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Nav: Services dropdown ── */
.nav-links .has-dropdown{position:relative}
.nav-links .has-dropdown > a{display:inline-flex;align-items:center;gap:6px}
.nav-links .has-dropdown > a::before{content:'';/* keep underline anim on the label */}
.nav-links .caret{display:inline-block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .3s ease}
.nav-links .dropdown{
  position:absolute;top:100%;left:-16px;min-width:210px;
  background:rgba(233,231,223,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:10px;
  list-style:none;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
  box-shadow:0 24px 60px rgba(0,0,0,.12);
}
.nav.dark .nav-links .dropdown{background:rgba(0,0,0,.92);border-color:rgba(255,255,255,.12)}
.nav-links .has-dropdown:hover .dropdown,
.nav-links .has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-links .has-dropdown:hover .caret{transform:rotate(225deg) translateY(2px)}
.nav-links .dropdown a{
  display:block;padding:10px 14px;border-radius:8px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;opacity:.75;transition:background .25s ease,opacity .25s ease;
}
.nav-links .dropdown a::after{display:none}
.nav-links .dropdown a:hover{background:rgba(0,0,0,.06);opacity:1}
.nav.dark .nav-links .dropdown a:hover{background:rgba(255,255,255,.08)}

@media (max-width:1020px){
  .nav-links .dropdown{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:transparent;border:0;padding:8px 0 0 16px;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-left:1px solid rgba(0,0,0,.15);margin-top:10px;
  }
  .nav.dark .nav-links .dropdown{border-left-color:rgba(255,255,255,.18)}
  .nav-links .dropdown a{font-size:15px;padding:8px 0;text-transform:none;letter-spacing:.02em}
  .nav-links .caret{display:none}
}

/* ── Breadcrumb / sibling sub-nav (horizon pages) ── */
.subnav-bar{
  position:relative;z-index:2;max-width:var(--content-max);width:100%;margin:0 auto;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:104px 40px 0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
}
@media (max-width:768px){.subnav-bar{padding:96px 24px 0}}
.subnav-bar a{color:inherit;text-decoration:none;opacity:.5;transition:opacity .3s ease;display:inline-block;padding:8px 2px}
.subnav-bar a:hover{opacity:1}
.subnav-bar a.cur{opacity:1;border-bottom:2px solid currentColor;padding-bottom:2px}
.subnav-bar .sep{opacity:.3}

/* ── Generic grid + card (from v7 inline) ── */
.h3grid{display:grid;gap:20px;margin-top:42px}
.h3grid.g4{grid-template-columns:repeat(4,1fr)}
.h3grid.g3{grid-template-columns:repeat(3,1fr)}
.h3grid.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:940px){.h3grid.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.h3grid.g4,.h3grid.g3,.h3grid.g2{grid-template-columns:1fr}}
.h3card{background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.09);border-radius:16px;padding:24px 22px;position:relative;overflow:hidden}
.h3card.click{text-decoration:none;color:inherit;display:block;transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s ease}
.h3card.click::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.04);transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.h3card.click:hover::before{transform:scaleY(1)}
.h3card.click:hover{border-color:rgba(0,0,0,.2)}
.h3card > *{position:relative;z-index:1}
.h3card .k{font-family:'Boldonse',cursive;font-size:.58rem;line-height:1.42;letter-spacing:.13em;text-transform:uppercase;color:rgba(0,0,0,.42);display:block;margin-bottom:12px}
.h3card h4{font-family:'Boldonse',cursive;font-size:.95rem;line-height:1.42;margin:0 0 10px;text-transform:uppercase}
.h3card p{font-weight:300;font-size:.95rem;line-height:1.6;color:rgba(0,0,0,.68);margin:0}
.h3card p + p{margin-top:8px}
.h3card .meta{font-size:.8rem;letter-spacing:.04em;color:rgba(0,0,0,.45);text-transform:uppercase;margin-top:12px}
.h3card .todo{font-weight:300;font-style:italic;font-size:.82rem;color:rgba(0,0,0,.4)}
.h3card .avatar{width:52px;height:52px;border-radius:50%;background:var(--sand-dark);margin-bottom:14px}
.h3card .more{display:inline-block;margin-top:16px;font-weight:500;font-size:.82rem;letter-spacing:.04em;border-bottom:1px solid rgba(0,0,0,.4);padding-bottom:2px}

/* ── Proof stats (from v7 inline) ── */
.stat-card{background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.1);border-radius:16px;padding:26px 24px}
.stat-card .lbl{font-family:'Boldonse',cursive;font-size:.56rem;line-height:1.42;letter-spacing:.13em;text-transform:uppercase;color:rgba(0,0,0,.42);display:block;margin-bottom:14px}
.stat-card .big{font-family:'Boldonse',cursive;font-size:clamp(1.1rem,1.9vw,1.45rem);line-height:1.42;margin:0 0 8px}
.stat-card .cap{font-weight:300;font-size:.92rem;line-height:1.55;color:rgba(0,0,0,.66);margin:0}
.provisional{font-weight:300;font-style:italic;font-size:.82rem;color:rgba(0,0,0,.5);margin-top:22px;max-width:70ch}

.lead-para{font-weight:300;font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.7;color:rgba(0,0,0,.72);max-width:60ch;margin:16px 0 0}
.midcta{display:flex;justify-content:center;margin:8px auto 0}

#audience .section-inner{text-align:center}
#audience .section-label{margin-bottom:22px}
#audience .lead-para{margin:24px auto 0;max-width:58ch}

/* ── Numbered "how we solve it" list (light) ── */
.qlist{list-style:none;margin-top:26px;max-width:760px}
.qlist li{border-top:1px solid rgba(0,0,0,.12);padding:18px 0 18px 44px;position:relative;font-weight:300;font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.55;color:rgba(0,0,0,.78)}
.qlist li:last-child{border-bottom:1px solid rgba(0,0,0,.12)}
.qlist li::before{content:attr(data-n);position:absolute;left:0;top:18px;font-family:'Boldonse',cursive;font-size:.8rem;line-height:1.42;color:rgba(0,0,0,.4)}

/* ── Deliverables list ── */
.deliv{list-style:none;margin-top:26px;display:grid;gap:10px;max-width:760px}
.deliv li{padding:16px 20px;background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.1);border-radius:12px;font-weight:300;font-size:.98rem;line-height:1.55;color:rgba(0,0,0,.78);padding-left:44px;position:relative}
.deliv li::before{content:'';position:absolute;left:20px;top:1.35em;width:8px;height:8px;border-radius:50%;background:var(--green-deep)}

/* ── Quote / to-collect slot ── */
.quote-slot{margin-top:24px;border:1px dashed rgba(0,0,0,.22);border-radius:12px;padding:26px 24px;font-weight:300;font-style:italic;color:rgba(0,0,0,.5);max-width:760px}

/* ── Symptom selector cards (services hub) ── */
.symptom h4{text-transform:none;font-size:1.05rem;line-height:1.35;font-family:'Rubik',sans-serif;font-weight:500}
.symptom .route{display:inline-block;margin-top:16px;font-family:'Boldonse',cursive;font-size:.7rem;line-height:1.42;letter-spacing:.1em;text-transform:uppercase;color:var(--black)}

/* ── Embed (positioning venn) ── */
.embed-wrap{position:relative;width:100%;max-width:960px;margin:40px auto 0;aspect-ratio:1280/720;overflow:hidden;border:1px solid rgba(0,0,0,.1);border-radius:16px;background:#fff}
.embed-wrap iframe{position:absolute;top:0;left:0;width:1280px;height:720px;border:0;transform-origin:top left}

/* ── Contact form ── */
.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:2px;max-width:960px;margin:44px auto 0;border:1px solid rgba(0,0,0,.12);border-radius:16px;overflow:hidden}
@media(max-width:820px){.contact-cols{grid-template-columns:1fr}}
.contact-col{padding:clamp(28px,3.5vw,48px);background:rgba(255,255,255,.5)}
.contact-col + .contact-col{border-left:1px solid rgba(0,0,0,.12)}
@media(max-width:820px){.contact-col + .contact-col{border-left:0;border-top:1px solid rgba(0,0,0,.12)}}
.contact-col h2{font-family:'Boldonse',cursive;font-weight:400;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.42;margin:0 0 8px;text-transform:uppercase}
.contact-col .sub{font-weight:300;font-size:.95rem;line-height:1.6;color:rgba(0,0,0,.66);margin:0 0 22px}
.form-field{display:block;margin-bottom:14px}
.form-field label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-bottom:7px}
.form-field input,.form-field textarea{
  width:100%;font-family:'Rubik',sans-serif;font-weight:300;font-size:.98rem;color:var(--black);
  background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.18);border-radius:10px;padding:12px 14px;transition:border-color .3s ease;
}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--blue-deep)}
.form-field textarea{resize:vertical;min-height:110px}
.form-privacy{margin-top:16px;font-size:.82rem;font-weight:300;color:rgba(0,0,0,.5)}
.form-privacy a{color:var(--blue-deep)}
.reply-promise{margin-top:18px;font-size:.9rem;font-weight:300;color:rgba(0,0,0,.62)}
.sched-embed{border:1px dashed rgba(0,0,0,.25);border-radius:12px;min-height:220px;display:grid;place-items:center;text-align:center;padding:24px;font-weight:300;color:rgba(0,0,0,.5);margin-bottom:20px}

/* ── Newsletter block ── */
.newsletter{max-width:760px;margin:48px auto 0;border:1px solid rgba(0,0,0,.12);border-radius:16px;padding:clamp(28px,3.5vw,48px);background:rgba(255,255,255,.5);text-align:center}
.newsletter h3{font-family:'Boldonse',cursive;font-weight:400;font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1.42;margin:12px 0 8px;text-transform:uppercase}
.newsletter p{font-weight:300;font-size:.98rem;line-height:1.6;color:rgba(0,0,0,.66);max-width:52ch;margin:0 auto 22px}
.newsletter form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:460px;margin:0 auto}
.newsletter input{flex:1;min-width:220px;font-family:'Rubik',sans-serif;font-weight:300;font-size:.98rem;background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.18);border-radius:10px;padding:12px 14px}
.newsletter input:focus{outline:none;border-color:var(--blue-deep)}
.newsletter .np{margin-top:14px;font-size:.8rem;font-weight:300;color:rgba(0,0,0,.45)}
.newsletter .np a{color:var(--blue-deep)}

/* ── Field-note article ── */
.article{max-width:720px;margin:0 auto}
.article .art-meta{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;opacity:.5;margin-bottom:28px}
.article h2{font-family:'Boldonse',cursive;font-weight:400;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.42;text-transform:uppercase;margin:44px 0 14px}
.article p{font-weight:300;font-size:clamp(1.02rem,1.4vw,1.16rem);line-height:1.8;color:rgba(0,0,0,.8);margin:0 0 20px}
.article p.lead-in{font-size:clamp(1.12rem,1.7vw,1.32rem);color:rgba(0,0,0,.72)}
.article blockquote{border-left:2px solid var(--green-deep);margin:28px 0;padding:6px 0 6px 24px;font-weight:300;font-style:italic;color:rgba(0,0,0,.7)}
.article .art-back{display:inline-block;margin-top:40px;font-weight:500;font-size:.88rem;border-bottom:1px solid rgba(0,0,0,.4);padding-bottom:2px;text-decoration:none;color:inherit}

/* ── dark-section helpers reused across pages (promise / cta bands) ── */
#promise,#cta{color:var(--sand);position:relative;z-index:2;background:var(--black)}
#promise .section-inner{text-align:center}
#promise .section-label{color:rgba(233,231,223,.55)}
#promise .own-head{font-family:'Boldonse',cursive;font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:1.42;text-transform:uppercase;margin:14px 0 0}
#promise .own-sub{font-weight:300;font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.7;color:rgba(233,231,223,.84);max-width:62ch;margin:22px auto 0}
#promise .own-sub b{font-weight:700;color:var(--sand)}
#cta .band-head{font-family:'Boldonse',cursive;font-size:clamp(1.7rem,4vw,2.8rem);line-height:1.42;text-transform:uppercase;margin:0}
#cta .band-sub{font-weight:300;font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.7;color:rgba(233,231,223,.84);max-width:60ch;margin:22px auto 30px}

/* section-scoped dark CTA band that also works on light subpages */
.cta-band{background:var(--black);color:var(--sand);border-radius:20px;padding:clamp(40px,6vw,80px) clamp(28px,4vw,64px);text-align:center;max-width:var(--content-max);margin:0 auto}
.cta-band .band-head{font-family:'Boldonse',cursive;font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.42;text-transform:uppercase;margin:0}
.cta-band .band-sub{font-weight:300;font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.7;color:rgba(233,231,223,.82);max-width:60ch;margin:20px auto 30px}

.hero-lead{
  font-weight:300;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.65;color:rgba(0,0,0,.9);
  width:fit-content;max-width:52ch;margin:22px auto 0;padding:12px 20px;box-sizing:border-box;
  background:rgba(255,255,255,.05);border:0;border-radius:0;
  box-shadow:0 8px 24px rgba(0,0,0,.03);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.hero-cta{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap}
.hero-headline .np{display:block}

/* ════════════════════════════════════════════
   v8 — REVIEW FIXES (contrast AA · focus · line-height · reduced-motion · founder photos)
   2026-07-22
   ════════════════════════════════════════════ */
/* Contrast: raise muted alphas to clear WCAG AA on sand/black */
.section-label{opacity:.62}
.provisional{color:rgba(0,0,0,.64)}
.h3card .todo{color:rgba(0,0,0,.62)}
.form-field label{opacity:.64}
.footer-tag{opacity:.55}
.footer-base{opacity:.5}

/* Visible focus for keyboard users */
:focus-visible{outline:2px solid var(--blue-deep);outline-offset:2px;border-radius:2px}
.nav.dark :focus-visible{outline-color:var(--sand)}
.form-field input:focus-visible,.form-field textarea:focus-visible,.newsletter input:focus-visible{outline:2px solid var(--blue-deep);outline-offset:1px}

/* Boldonse never below 1.35 (headings set in CSS) */
#promise .own-head,#cta .band-head,.cta-band .band-head{line-height:1.42}

/* Founder photos in the avatar circle (real repo assets) */
.h3card .avatar{width:76px;height:76px;background-size:cover;background-position:center top;background-repeat:no-repeat}

/* ════════════════════════════════════════════════════════════
   PART II — COMPONENT LAYER
   Formerly styles-v10.css, loaded as a second stylesheet. Merged
   into this file for v12 (2026-08-10): the override declarations
   were folded into their base rules above (each marked "folded
   from v10"); everything below is additive component CSS and keeps
   its original source order, so the cascade is unchanged.

   Revives v3 soul (belief, mountain, organic accents) on the v9
   technical base + new components (proof carousel, staggered hub,
   contact person, density fixes). Original layer dated 2026-07-23.
   ════════════════════════════════════════════════════════════ */

/* ── Generic glow + dither helpers (v3 port) ── */
.glow { position: absolute; border-radius: 50%; pointer-events: none; }
.dithered-reverse {
  mask-image: radial-gradient(circle, black 0.6px, transparent 0.6px);
  -webkit-mask-image: radial-gradient(circle, black 0.6px, transparent 0.6px);
  mask-size: 2.6px 2.6px;
  -webkit-mask-size: 2.6px 2.6px;
}

/* ── Belief (v3 port — used on About) ── */
#belief { position: relative; overflow: hidden; }
.belief-line {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 3.5vw, 2.6rem);
  line-height: 1.22;
  color: var(--black);
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.belief-line.visible { opacity: 1; transform: translateY(0); }
.belief-line.emphasis { font-size: clamp(1.6rem, 4vw, 3rem); color: var(--blue-deep); font-weight: 400; }
.belief-visual {
  position: absolute;
  right: -12%; top: 8%;
  width: clamp(280px, 38vw, 560px);
  height: clamp(380px, 48vw, 700px);
  z-index: 1;
  pointer-events: none;
}
.belief-organic {
  position: absolute; inset: 0;
  background: var(--green);
  border-radius: 42% 58% 55% 45% / 55% 45% 55% 45%;
  opacity: 0.4;
  mask-image: radial-gradient(circle, black 0.7px, transparent 0.7px);
  -webkit-mask-image: radial-gradient(circle, black 0.7px, transparent 0.7px);
  mask-size: 3px 3px;
  -webkit-mask-size: 3px 3px;
  transition: border-radius 2s ease;
}
.belief-block {
  position: absolute; left: -8%; bottom: 14%;
  width: 34%; height: 26%;
  background: var(--blue);
  opacity: 0.4;
  mask-image: radial-gradient(circle, black 0.6px, transparent 0.6px);
  -webkit-mask-image: radial-gradient(circle, black 0.6px, transparent 0.6px);
  mask-size: 2.6px 2.6px;
  -webkit-mask-size: 2.6px 2.6px;
}
.belief-green-line {
  position: absolute; left: -25%; top: 54%;
  width: 150%; height: 2px;
  background: var(--green-deep);
  transform: rotate(-24deg);
  opacity: 0.6;
}
.belief-glow {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(170, 181, 219, 0.35) 0%, transparent 70%);
  left: -10%; top: 30%;
  z-index: 0; opacity: 0;
  transition: opacity 1.2s ease;
}
.belief-glow.visible { opacity: 1; animation: glowPulse 6s ease-in-out infinite; }
@keyframes glowPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}
.belief-text-stack { position: relative; z-index: 2; }

/* ── Mountain (v3 port — About "how we work"; capability labels, not Basecamp/Climb/Summit) ── */
#sherpa {
  min-height: 165vh;
  padding: 0 40px;
  color: var(--white);
  background: var(--black);
  justify-content: flex-start;
}
.sherpa-sticky {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  width: 100%; padding: 80px 0 16px;
}
.sherpa-label { color: var(--green); opacity: 0.75; text-align: center; }
.sherpa-headline {
  font-family: 'Boldonse', cursive;
  font-size: clamp(1.8rem, 4.2vw, 4rem);
  line-height: 1.42;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  margin-bottom: 12px;
}
.sherpa-sub {
  font-weight: 300;
  font-size: clamp(0.95rem, 1.4vw, 1.22rem);
  color: rgba(255,255,255,0.55);
  text-align: center; max-width: 640px;
  margin: 0 auto 28px; line-height: 1.7;
}
.mountain-container { width: 100%; max-width: 1000px; margin: 0 auto 36px; position: relative; }
.mountain-svg { width: 100%; height: auto; }
.mountain-path {
  fill: none; stroke: var(--white); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.mountain-dot { fill: var(--sand); opacity: 0; transition: opacity 0.6s ease; filter: url(#dotGlow); }
.mountain-dot.active { opacity: 1; }
.mountain-label {
  fill: var(--white); font-family: 'Rubik', sans-serif;
  font-weight: 500; font-size: 14px; letter-spacing: 0.05em;
  opacity: 0; transition: opacity 0.6s ease;
}
.mountain-label.active { opacity: 1; }
.mountain-desc {
  fill: rgba(255,255,255,0.75); font-family: 'Rubik', sans-serif;
  font-weight: 300; font-size: 12px;
  opacity: 0; transition: opacity 0.6s ease;
}
.mountain-desc.active { opacity: 1; }
.mountain-caption {
  fill: rgba(255,255,255,0.55); font-family: 'Rubik', sans-serif;
  font-weight: 300; font-size: 11px; letter-spacing: 0.12em;
}
.mountain-fallback { display:block; color:var(--white); padding:18px 0 10px; }
.js .mountain-fallback { display:none; }
.sherpa-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; max-width: 1000px; margin: 0 auto; width: 100%;
}
@media (max-width: 768px) { .sherpa-pillars { grid-template-columns: 1fr; } }
.pillar {
  text-align: left;
  border: 1px solid rgba(255,255,255,0.12);
  padding: clamp(18px, 2.2vw, 32px);
  position: relative; overflow: hidden;
}
.pillar::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0.05);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pillar:hover::before { transform: scaleY(1); }
.pillar h3 {
  font-family: 'Rubik', sans-serif; font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sand); margin-bottom: 14px;
}
.pillar p { font-weight: 300; font-size: 0.95rem; color: rgba(255,255,255,0.65); line-height: 1.7; }

/* ── Proof carousel (home — clickable blocks, add-a-block-friendly) ── */
.proof-car-wrap { position: relative; margin-top: 34px; }
#proof .section-label,
#proof .section-inner > p { text-align: center; }
.proof-car {
  display: flex; gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 6px 4px 18px;
  scrollbar-width: none;
}
.proof-car::-webkit-scrollbar { display: none; }
.proof-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(250px, 27vw, 330px);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.09);
  padding: 26px 24px 22px;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.proof-card:hover { transform: translateY(-4px); border-color: rgba(0,0,0,0.22); box-shadow: 0 14px 34px rgba(0,0,0,0.08); }
.proof-card:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.proof-card .lbl {
  font-family: 'Rubik', sans-serif; font-weight: 500;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.55; margin-bottom: 12px;
}
.proof-card .big {
  font-family: 'Boldonse', cursive;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem); /* was clamp(1.25rem,2.4vw,1.8rem); tightened in feedback round 1 */
  line-height: 1.42;
  margin-bottom: 8px;
}
.proof-card .cap { font-weight: 300; font-size: 0.9rem; color: rgba(0,0,0,0.62); line-height: 1.65; }
.proof-card .pc-detail {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Same fault, same fix — see the .lrow-panel note above (guide 4.1). */
.proof-card .pc-detail > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear .5s; }
.proof-card.open .pc-detail > div { visibility: visible; transition: visibility 0s linear 0s; }
.proof-card.open .pc-detail { grid-template-rows: 1fr; }
.proof-card .pc-detail p {
  font-weight: 300; font-size: 0.86rem; color: rgba(0,0,0,0.6);
  line-height: 1.65; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.08); margin-top: 12px;
}
.proof-card .pc-hint {
  position: absolute; top: 20px; right: 20px;
  width: 22px; height: 22px; border: 1px solid rgba(0,0,0,0.2); border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.8rem; line-height: 1; color: rgba(0,0,0,0.45);
  transition: transform 0.4s ease;
}
.proof-card.open .pc-hint { transform: rotate(45deg); }
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--black); color: var(--white);
  border: none; cursor: pointer; z-index: 3;
  display: grid; place-items: center; font-size: 1rem;
  opacity: 0.85; transition: opacity 0.25s ease;
}
.car-btn:hover { opacity: 1; }
.car-btn.prev { left: -14px; }
.car-btn.next { right: -14px; }
/* v11 residue fix: arrows must also show on mobile when cards overflow (spec: arrows at 390).
   The .fit class (app-v10.js) already hides them whenever all cards fit, so no blanket
   mobile hide is needed. Offsets pulled inside the edge below 768px so nothing clips. */
@media (max-width: 768px) {
  .car-btn.prev { left: 2px; }
  .car-btn.next { right: 2px; }
}

/* ── Staggered symptom blocks (What we do hub — wireframe style) ── */
.stagger { display: grid; gap: 18px; max-width: 900px; margin: 40px auto 0; }
.stagger .sym-block {
  border: 1px solid rgba(0,0,0,0.1);
  background: #fff;
  padding: clamp(22px, 3vw, 36px);
  max-width: 78%;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.stagger .sym-block:nth-child(even) { margin-left: auto; }
.stagger .sym-block:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.07); }
@media (max-width: 768px) { .stagger .sym-block { max-width: 100%; } }
.sym-block .sym-h {
  font-family: 'Rubik', sans-serif; font-weight: 500;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5;
  margin-bottom: 10px;
}
.sym-block h3 { font-family: 'Boldonse', cursive; font-size: clamp(1.05rem, 1.9vw, 1.45rem); line-height: 1.45; margin-bottom: 10px; }
.sym-block p { font-weight: 300; font-size: 0.95rem; color: rgba(0,0,0,0.62); line-height: 1.7; }
.sym-block .route { display: inline-block; margin-top: 14px; font-weight: 500; font-size: 0.85rem; }

/* ── Contact person ("poppetje" per horizon) ── */
.person-card {
  display: flex; align-items: center; gap: 18px;
  border: 1px solid rgba(0,0,0,0.1);
  background: #fff;
  padding: 20px 24px;
  max-width: 460px; margin-top: 30px;
}
.person-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; filter: grayscale(1); transition: filter 0.4s ease; }
.person-card:hover img { filter: grayscale(0); }
.person-card .pn { font-weight: 500; font-size: 0.98rem; }
.person-card .pr { font-weight: 300; font-size: 0.85rem; color: rgba(0,0,0,0.55); margin-top: 2px; }
.person-card .pl { display: inline-block; margin-top: 8px; font-weight: 500; font-size: 0.85rem; }

/* ── Density / "kaal" fixes ── */
.section-inner.wide { max-width: 1320px; }
.tight { --section-pad: clamp(56px, 8vh, 110px); }
.two-col { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ── Organic accent (sparse, positioning/belief sections only) ── */
.accent-organic {
  position: absolute; pointer-events: none; z-index: 0;
  background: var(--blue); opacity: 0.22;
  border-radius: 46% 54% 52% 48% / 52% 48% 55% 45%;
  mask-image: radial-gradient(circle, black 0.7px, transparent 0.7px);
  -webkit-mask-image: radial-gradient(circle, black 0.7px, transparent 0.7px);
  mask-size: 3px 3px; -webkit-mask-size: 3px 3px;
}

@media (prefers-reduced-motion: reduce) {
  .belief-line { transition: none; opacity: 1; transform: none; }
  .mountain-path { stroke-dashoffset: 0 !important; }
  .mountain-dot, .mountain-label, .mountain-desc { opacity: 1; }
}

/* D7: print must not depend on the scroll driver; expose the complete route. */
@media print {
  .mountain-svg { display:none; }
  .mountain-fallback { display:block; color:#fff; padding:18px 0 10px; }
  .mountain-fallback p { margin:10px 0; font-size:12pt; }
}

/* ── Mobile overflow guard (long dropdown labels made the off-canvas panel extend scrollWidth).
   The `html { overflow-x: clip }` half of this fix is folded into the base html rule. ── */
@media (max-width: 1020px) {
  .nav-links { overflow-y: auto; overflow-x: hidden; }
  .nav-links .dropdown a { white-space: normal; }
}

/* ── Symptom blocks are anchors: kill default link styling, keep the route arrow styled ── */
a.sym-block { display: block; color: inherit; text-decoration: none; }
a.sym-block h3, a.sym-block p, a.sym-block .sym-h { text-decoration: none; }
a.sym-block .route { border-bottom: 1px solid rgba(0,0,0,0.4); padding-bottom: 2px; }

/* ════ V10 feedback-ronde 1 (3 aug) ════ */

/* Nav-items op één baseline (caret duwde dropdown-items omlaag) —
   desktop-only: in het mobiele off-canvas paneel maakte de flex-row
   van de li smalle letter-stapels (WHAT/WE/DO) met sub-links ernaast. */
@media (min-width: 1021px) { .nav-links > li { display: flex; align-items: center; } }
@media (max-width: 1020px) { .nav-links > li { display: block; } }
.nav-links > li > a { display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.nav-links .caret { position: relative; top: 1px; }

/* Dropdown: nooit wrappen */
.nav-links .dropdown { min-width: 230px; }
.nav-links .dropdown a { white-space: nowrap; }

/* When all cards fit, centre the proof set as one composition. */
.proof-car.fit { justify-content: center; }
.proof-car-wrap.fit .car-btn { display: none; }
.proof-card .big .unit { display: block; font-family: 'Rubik', sans-serif; font-weight: 300; font-size: 0.85rem; color: rgba(0,0,0,0.55); letter-spacing: 0; margin-top: 4px; text-transform: none; }

/* Inline logo-glyph in koppen */
.h3glyph { display: inline-block; height: 0.72em; width: auto; vertical-align: baseline; transform: translateY(0.04em); }

/* ── Interactieve Venn (geport uit positioning-multiplication, responsive) ── */
.venn-col { display: flex; flex-direction: column; gap: 18px; }
.venn-svg { width: 100%; height: auto; }
.venn-svg .circ { fill-opacity: 1; stroke: #000; stroke-opacity: 0.55; stroke-width: 1.5; }
.venn-svg .circ.on { stroke-width: 4; stroke-opacity: 1; }
.venn-svg .f-biz { fill: rgba(0,0,0,.05) }
.venn-svg .f-ppl { fill: rgba(189,199,164,.34) }
.venn-svg .f-tech { fill: rgba(170,181,216,.34) }
.venn-svg .axis { font-family: 'Rubik', sans-serif; font-weight: 500; font-size: 15px; fill: #000; text-transform: uppercase; letter-spacing: .06em; pointer-events: none; }
.venn-svg .zone { cursor: pointer; outline: none; }
.venn-svg .hit { fill: transparent; }
.venn-svg .zone:focus-visible .hit { stroke: #000; stroke-width: 2; stroke-dasharray: 4 3; }
.vdetail { background: #fff; border: 1px solid rgba(0,0,0,0.12); padding: 22px 24px; position: relative; min-height: 148px; }
.vdetail .zpill { display: inline-block; border: 1.5px solid #000; border-radius: 999px; padding: 4px 13px; font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.vdetail .cat { font-weight: 700; font-size: 1.05rem; line-height: 1.25; margin-bottom: 4px; }
.vdetail .eg { font-weight: 300; font-size: .85rem; color: #555; margin-bottom: 10px; }
.vdetail .verdict { font-weight: 300; font-size: .92rem; line-height: 1.6; color: #1a1a1a; }
.vdetail .badge { position: absolute; top: 18px; right: 20px; font-weight: 700; font-size: 1.25rem; font-family: 'Rubik', sans-serif; }
.vdetail .badge.zero { color: #000; }
.vdetail .badge.nonzero { color: var(--green-deep); }
.vdetail.is-default .eg { display: none; }
.venn-payoff { font-weight: 300; font-size: .95rem; color: rgba(0,0,0,.7); }
.venn-payoff b { font-weight: 600; }

/* Fix: baseline-regel maakte het mobiele CTA-item op desktop weer zichtbaar */
@media (min-width: 1021px) { .nav-links .li-cta-mobile { display: none !important; } }

/* Hero-CTA: knop boven, twee tekstlinks naast elkaar eronder */
.hero-cta.stack { flex-direction: column; align-items: center; gap: 18px; }
.hero-cta.stack .hero-links { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* Logo crisp op 1x-schermen: dikkere randen (dunne ringen aliasden op non-retina).
   De 38px-hoogtes zijn gevouwen in .nav-logo / .footer-logo svg in de basis. */
.nav-logo svg path { stroke: currentColor; stroke-width: 12; }
.footer-logo svg path { stroke: currentColor; stroke-width: 12; }

/* ════ V11 megareview fixes — index owner (23 jul night) ════ */

/* #22: accent blob ran 115px past the right viewport edge — iOS Safari <16 lacks overflow:clip,
   and full-page captures rendered 1555px wide. Mirrors the inline guard on the services heroes. */
#positioning { overflow: hidden; padding-bottom:clamp(52px,7vh,88px); }
#whatwedo { padding-top:clamp(52px,7vh,88px); }

/* #11a: field-notes teaser was forced to a full viewport for ~240px of content — the paddings hold the rhythm */
#fieldnotes.tall { min-height: auto; }

/* #11b: about #sherpa on mobile — 1113px sticky runway exceeds the viewport, ~295px black void below the pillars.
   The sticky scroll-story has no payoff at phone heights. */
@media (max-width: 768px) {
  #sherpa { min-height: auto; }
  .sherpa-sticky { position: static; min-height: auto; padding-bottom: 64px; }
}

/* #23: Venn axis labels rendered ~6px on a 390px phone (viewBox 812 → ~325px wide) */
@media (max-width: 768px) {
  .venn-svg .axis { font-size: 26px; }
}

/* #68: one corner language site-wide — commit to the v10 hard-square token */
.h3card, .newsletter, .contact-cols, .sched-embed, .quote-slot, .deliv li, .stat-card { border-radius: 0; }
.cta-band { border-radius: 0; }

/* ════ V11 megareview fixes — ABOUT owner (also styles index #founders where shared) ════ */

/* P1-21 (1): normalise halftone tonal density across the three portraits.
   Jeroen (card 1) was a dark coarse cut-out → lift; Tijmen (card 3) nearly
   disappeared into bokeh → darken. Elfried (card 2) keeps the base treatment. */
.team-card:nth-child(1) .tp-machine .tp-img { filter: grayscale(1) contrast(1.02) brightness(1.06); }
.team-card:nth-child(3) .tp-machine .tp-img { filter: grayscale(1) contrast(1.35) brightness(0.92); }

/* P1-21 (2): touch devices can't hover — tap flips machine/human per card (app-v10.js toggles .flip) */
.team-card.flip .tp-human { opacity: 1; }
.team-card.flip .tp-machine { opacity: 0; }

/* P1-31: mountain stage labels were ~5px at phone widths (SVG viewBox scaling).
   32 SVG-units ≈ 11px rendered at 390px; descriptions/caption can't be saved at this size. */
@media (max-width: 768px) {
  .mountain-label { font-size: 32px; }
  .mountain-desc, .mountain-caption { display: none; }
}

/* P1-24: belief emphasis lines were the faintest text on the page (blue-deep 2.32:1 on sand).
   --blue-ink stays in the periwinkle family at ≈3.4:1; token also available for the
   blue-deep metric numerals on expedition cards (expeditions owner's call).
   The --blue-ink token itself now lives in the base :root. */
.belief-line.emphasis { color: var(--blue-ink); }

/* P2-73: five value cards left a visible hole in the 3-col grid — one row on wide screens
   (subject to the #1000 values-ratification outcome at the boshuis) */
@media (min-width: 1100px) { .value-grid { grid-template-columns: repeat(5, 1fr); } }

/* P2-77: staged belief reveal never played (section shorter than viewport → app.js marks all
   lines .visible on the first scroll tick). Gate visibility on #belief.in-view (set by a
   one-shot IntersectionObserver in app-v10.js) and stagger per line. Wrapped in
   no-preference so it can never override the reduced-motion always-visible rule above. */
@media (prefers-reduced-motion: no-preference) {
  #belief:not(.in-view) .belief-line { opacity: 0 !important; transform: translateY(24px) !important; }
  #belief.in-view .belief-line[data-reveal-order="0"] { transition-delay: 0.16s; }
  #belief.in-view .belief-line[data-reveal-order="1"] { transition-delay: 0.29s; }
  #belief.in-view .belief-line[data-reveal-order="2"] { transition-delay: 0.43s; }
  #belief.in-view .belief-line[data-reveal-order="3"] { transition-delay: 0.56s; }
  #belief.in-view .belief-line[data-reveal-order="4"] { transition-delay: 0.69s; }
  #belief.in-view .belief-line[data-reveal-order="5"] { transition-delay: 0.83s; }
  #belief.in-view .belief-line[data-reveal-order="6"] { transition-delay: 0.96s; }
}

/* ════ V11 megareview-fixes (3 aug, megareview-ronde) ════ */

/* P0-3: mobiel menu moet sluitbaar zijn — hamburger boven de open drawer + X-morph.
   De fixed drawer schilderde over de statische toggle-knop heen (tweede tap intercepted). */
@media (max-width: 1020px) {
  .nav-toggle { position: relative; z-index: 10001; }
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* P1-25: skip-link chip niet over het logo heen als hij focus krijgt */
.skip-link:focus { left: 0; top: 56px; }

/* Een deep-linked reveal-card mag niet ná de fragment-scroll 30px omhoog schuiven
   (de .reveal translateY-entrance duwde het :target alsnog onder de nav; :target gaat pas
   matchen op het fragment-scroll-moment, dus de slide moet snappen i.p.v. animeren) —
   fade blijft, slide vervalt. */
.reveal:target, .reveal:has(:target), .reveal-scale:target, .reveal-scale:has(:target) {
  transform: none !important;
  transition-property: opacity !important;
}

/* ── P1-14 · site-wide glyph/logo size norm (seo-sweep, 23 jul) ──────────
   Norm: nav logo 38px (v9 base, keep); footer logo matches at 38px (was 26px,
   visibly weaker than the nav); a standalone inline glyph NEVER renders below
   16px — below that it reads as broken circles, so sub-16px uses were replaced
   by the text "Join H3" in nav drawers and footers. The one surviving inline
   glyph (index "The people behind" section-label) is sized as a 20px badge. */
.section-label .h3glyph { height: 20px; width: auto; vertical-align: -5px; transform: none; }

/* V11 (23 jul) — values cards got a two-line essence + body; give the essence prominence
   and room. Keeps the 5-across grid; taller cards read as intentional, not cramped. */
.value-card { display: flex; flex-direction: column; }
.value-card .vc-essence { font-size: 0.95rem; line-height: 1.5; opacity: 0.92; font-weight: 500; margin-bottom: 12px; }
.value-card .vc-essence + p { font-size: 0.82rem; line-height: 1.62; opacity: 0.55; margin: 0; }

/* ═══════ POSITIONING = "The Equation" (variant C, chosen Tijmen 3 aug) ═══════ */
#positioning .section-inner{display:flex;flex-direction:column;align-items:center}
#positioning .section-label{text-align:center;margin-bottom:22px}
.eq-heading{
  width:100%;text-align:center;text-transform:uppercase;white-space:nowrap;
  font-size:clamp(1rem,4.1vw,3.35rem);line-height:1.42;margin:0; /* JS fitter perfects; clamp = no-JS fallback */
}
.eq-term{transition:opacity .45s ease}
.eq-term.dim{opacity:.22}
.eq-op{
  font-family:'Rubik',sans-serif;font-weight:400;font-size:.68em;color:var(--blue-deep);
  margin:0 .34em;position:relative;top:-.24em;transition:opacity .45s ease;
}
.eq-op.dim{opacity:.25}
.eq-leads{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,72px);
  width:min(100%,880px);margin:40px auto 0;position:relative;
}
.eq-leads::before{content:'';position:absolute;top:6px;bottom:6px;left:50%;width:1px;background:rgba(0,0,0,.16)}
.eq-leads .lead-para{margin:0;max-width:none;font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.72}
.eq-leads .lead-payoff{display:block;margin-top:.55em;font-weight:500;color:var(--black)}
.venn-unit{width:min(100%,700px);margin:52px auto 0} /* compact, frameless composition */
.venn-unit .venn-svg{display:block;width:100%;height:auto;padding:clamp(6px,1.4vw,16px) clamp(10px,2vw,24px) 0}
.venn-equation{
  display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:clamp(24px,4vw,48px);
  width:min(100%,620px);margin:0 auto clamp(18px,2.4vw,30px);padding:clamp(14px,1.7vw,19px) clamp(12px,2vw,24px);
  border:0;
  font-family:'Boldonse',cursive;font-size:clamp(.78rem,1.3vw,1.04rem);line-height:1.45;
  letter-spacing:.03em;text-transform:uppercase;
}
.ve-side{white-space:nowrap}
.ve-right{text-align:left}
.ve-equals{
  display:block;color:var(--blue-deep);font-family:'Rubik',sans-serif;font-weight:500;
  font-size:clamp(1.7rem,3vw,2.4rem);line-height:1;
}
@media (max-width:700px){
  .eq-leads{grid-template-columns:1fr;gap:22px}
  .eq-leads::before{display:none}
  .venn-unit{margin-top:26px}
  .venn-equation{
    width:100%;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;
    margin-bottom:14px;padding:0;font-size:clamp(.56rem,2.05vw,.78rem);
  }
  .ve-side{white-space:nowrap;max-width:none}
  .ve-right{text-align:left}
  .venn-unit .venn-svg{padding:0 clamp(2px,1vw,8px)}
}

/* ═══════ HORIZON PROPOSITION LEDGER (A2, chosen Tijmen 3 aug) ═══════
   Collapsed: scannable menu (title + outcome tease + affordance).
   Expanded: do/deliver split, delivers on inverted black. One open per ledger. */
.led{margin-top:40px;border-top:1px solid rgba(0,0,0,.18)}
.lrow{border-bottom:1px solid rgba(0,0,0,.18)}
.lrow-head{
  display:grid;grid-template-columns:minmax(240px,1fr) 1.4fr 48px;gap:clamp(16px,3vw,44px);
  align-items:center;width:100%;text-align:left;
  padding:26px 0;cursor:pointer;background:none;border:0;font:inherit;color:inherit;
}
.lrow-head h4{font-family:'Boldonse',cursive;font-size:clamp(1rem,1.6vw,1.3rem);line-height:1.42;text-transform:uppercase;margin:0;transition:color .3s ease}
.lrow-head .tease{font-weight:300;font-size:.95rem;line-height:1.55;color:rgba(0,0,0,.55);margin:0;transition:opacity .3s ease}
.lrow-head .aff{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.3);
  display:grid;place-items:center;justify-self:end;position:relative;
  transition:background .35s ease,border-color .35s ease;
}
.lrow-head .aff::before,.lrow-head .aff::after{content:'';position:absolute;background:#000;transition:transform .35s cubic-bezier(.22,1,.36,1),background .35s ease}
.lrow-head .aff::before{width:12px;height:1.5px}
.lrow-head .aff::after{width:1.5px;height:12px}
.lrow:hover .lrow-head h4{color:var(--blue-deep,#8a97c4)}
.lrow:hover .aff{border-color:#000}
.lrow.open .lrow-head .aff{background:#000;border-color:#000}
.lrow.open .lrow-head .aff::before{background:var(--sand)}
.lrow.open .lrow-head .aff::after{transform:rotate(90deg);background:var(--sand)}
.lrow.open .lrow-head .tease{opacity:0}
.lrow-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
.lrow.open .lrow-panel{grid-template-rows:1fr}
/* v12, guide 4.1 (2026-08-11) — collapsed panels must leave the tab order.
   The guide said to remove `overflow: visible`; there is no such declaration in v12's merged
   stylesheet, so the diagnosis needed correcting: the panel is clipped by grid-template-rows:0fr
   plus overflow:hidden, and *neither of those removes anything from the tab order*. Measured on
   services-enable.html before this fix: the "Try the 5-minute self-serve version first" link inside
   a collapsed row was 279x22px, visibility:visible, and document.activeElement accepted it — a
   keyboard user tabbed into content they cannot see. visibility:hidden is what fixes that.
   The 0s transition with a delay keeps the animation intact: opening flips to visible immediately,
   closing waits out the 0.5s collapse before hiding. No visual change either way. */
.lrow-panel > div{overflow:hidden;visibility:hidden;transition:visibility 0s linear .5s}
.lrow.open .lrow-panel > div{visibility:visible;transition:visibility 0s linear 0s}
.lrow-split{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 30px;border:1px solid rgba(0,0,0,.14);border-radius:14px;overflow:hidden}
.lcell{padding:26px 28px}
.lcell .kk{font-family:'Boldonse',cursive;font-size:.54rem;line-height:1.42;letter-spacing:.13em;text-transform:uppercase;color:rgba(0,0,0,.42);display:block;margin-bottom:10px}
.lcell p{font-weight:300;font-size:.96rem;line-height:1.66;color:rgba(0,0,0,.74);margin:0}
.lcell p + p{margin-top:10px}
.lcell.do{background:rgba(255,255,255,.45)}
.lcell.deliver{background:#000;color:var(--sand)}
.lcell.deliver .kk{color:var(--green)}
.lcell.deliver p{color:rgba(233,231,223,.92);font-weight:400}
.lcell .scanlink{display:inline-block;margin-top:14px;font-weight:500;font-size:.8rem;letter-spacing:.03em;color:rgba(0,0,0,.6);border-bottom:1px solid rgba(0,0,0,.32);padding-bottom:2px;text-decoration:none}
@media(max-width:820px){
  .lrow-head{grid-template-columns:1fr 44px;padding:22px 0}
  .lrow-head .tease{display:none}
  .lrow-split{grid-template-columns:1fr}
}

/* ═══════ CLEAN LANDING NAV (Tijmen 3 aug, buildspec §1 promptiers.com-patroon) ═══════
   Desktop: bij landing alleen logo + hamburger + Let's talk; nav-links faden in zodra je
   scrollt (.scrolled komt uit app.js) of de hamburger klikt (.nav-pinned). Mobiel ongewijzigd. */
@media (min-width: 1021px) {
  .nav .nav-links {
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
  }
  .nav.scrolled .nav-links, .nav.nav-pinned .nav-links {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  .nav .nav-toggle {
    display: block; opacity: 1; max-width: 40px;
    transition: opacity .35s ease, max-width .35s ease .1s;
  }
  .nav.scrolled .nav-toggle, .nav.nav-pinned .nav-toggle {
    opacity: 0; max-width: 0; padding-left: 0; padding-right: 0; margin: 0;
    overflow: hidden; pointer-events: none;
  }
}

/* ════════════════════════════════════════════
   V12 — CLIENT LOGO BAR (2026-08-11)
   Seamless marquee: one .logobar-track holding two identical .logobar-set children, translated
   0 → -50%. When the first set has fully left, the second sits exactly where the first started,
   so the loop has no seam and needs no JS.
   The wordmarks are text, not images, while they are placeholders — real logos will be SVGs
   dropped into the same <span> slots (see the [FACT] note in index.html).
   ════════════════════════════════════════════ */
#logos{padding:0;min-height:0;position:relative}
.logobar{
  position:relative;z-index:2;overflow:hidden;
  padding:26px 0;border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08);
  /* fade the two ends so marks enter and leave instead of being chopped by the viewport edge */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logobar-track{display:flex;width:max-content;animation:logobar-scroll 38s linear infinite}
/* v12 audit A1: WCAG 2.2.2 — auto-scrolling content needs a user-facing pause control
   (same pattern as .video-toggle above; the OS reduced-motion setting is not enough). */
.logobar-track.paused{animation-play-state:paused}
.logobar-toggle{
  position:absolute;right:14px;bottom:6px;z-index:3;
  background:rgba(255,255,255,.85);color:rgba(0,0,0,.62);border:1px solid rgba(0,0,0,.18);
  border-radius:999px;padding:4px 12px;font-family:'Rubik',sans-serif;font-weight:500;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.logobar-toggle:hover{color:#000;border-color:rgba(0,0,0,.4)}
@media (prefers-reduced-motion: reduce){.logobar-toggle{display:none}}
.logobar-set{display:flex;align-items:center;gap:clamp(38px,6vw,84px);padding-right:clamp(38px,6vw,84px)}
.logomark{
  font-family:'Boldonse',sans-serif;font-size:clamp(.82rem,1.5vw,1.05rem);letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;color:rgba(0,0,0,.72);
  transition:color .3s var(--ease,cubic-bezier(.4,0,.2,1));
}
.client-logo{display:block;width:auto;height:clamp(22px,2.3vw,31px);max-width:clamp(96px,11vw,150px);object-fit:contain;filter:grayscale(1) contrast(1.45) brightness(.2);opacity:.78;transition:filter .3s var(--ease,cubic-bezier(.4,0,.2,1)),opacity .3s var(--ease,cubic-bezier(.4,0,.2,1))}
.logo-moore{width:clamp(112px,12vw,154px);height:clamp(31px,3.3vw,44px);object-fit:cover;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.25);opacity:.78}
.logo-ing{width:clamp(82px,8vw,112px)}
.logo-molco{width:clamp(90px,9vw,124px);height:clamp(29px,3vw,39px)}
.logo-singraven{width:clamp(80px,8vw,108px);height:clamp(36px,3.5vw,48px);object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) invert(1);opacity:.78}
.logo-euronext{width:clamp(96px,9vw,128px)}
.logo-kpmg{width:clamp(58px,6vw,78px);height:clamp(28px,2.7vw,36px)}
.logo-abn-amro{width:clamp(104px,10vw,138px)}
.logo-moni{width:clamp(94px,9vw,126px);height:clamp(31px,3vw,42px);object-fit:cover;object-position:center;mix-blend-mode:multiply;filter:grayscale(1) brightness(1.5) invert(1) contrast(3);opacity:.78}
.logobar:hover .logomark{color:#000}
.logobar:hover .client-logo{filter:grayscale(1) contrast(1.8) brightness(0);opacity:1}
.logobar:hover .logo-moore{filter:grayscale(1) contrast(1.45);}
.logobar:hover .logo-singraven{filter:grayscale(1) invert(1);}
.logobar:hover .logo-moni{filter:grayscale(1) brightness(1.5) invert(1) contrast(3);}
@keyframes logobar-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* A moving band is a vestibular trigger. Stop it dead rather than slow it, and let the row wrap
   so every name is still readable without motion. */
@media (prefers-reduced-motion: reduce){
  .logobar-track{animation:none;width:100%;justify-content:center;flex-wrap:wrap}
  .logobar-set[aria-hidden="true"]{display:none}
  .logobar-set{flex-wrap:wrap;justify-content:center;row-gap:14px;padding-right:0}
  .logobar{-webkit-mask-image:none;mask-image:none}
  .logobar-toggle{display:none} /* static grid here — nothing to pause */
}

/* ════════════════════════════════════════════
   V12 — ENGINE PLATE (2026-08-11)
   Interactive diagram of the five seats in a cycle, prototyped and approved in
   chat before this build. Colour is the only encoding: black = H3 brings the
   seat, white = the client already has it. The cycle pill is brand green — it
   belongs to neither side, it is the container both sit inside.
   ════════════════════════════════════════════ */
/* 2026-08-11, Elfried: the colour panel is gone. A saturated blue card with rounded pills read as
   a bolted-on consultant infographic next to the rest of this site's restraint — sand/white
   sections, black-and-white text, no illustrative colour blocks. Black/white/green now do the same
   job (H3 vs yours vs the cycle itself) directly against the page background, same as everything
   else on this page. */
.ep-grid{display:grid;grid-template-columns:min(330px,100%) minmax(200px,1fr);gap:32px;align-items:stretch}
@media(max-width:600px){.ep-grid{grid-template-columns:1fr;gap:20px}}
.ep-svg{width:100%;display:block}
.ep-band{font-family:'Boldonse',cursive;font-size:9px;letter-spacing:.13em;fill:rgba(0,0,0,.42)}
.ep-node{cursor:pointer}
/* v12 audit A2: outline:none stripped the focus indicator from six keyboard seats;
   colour-only green stroke fails 2.4.7/2.4.11 — give it the global visible outline. */
.ep-node:focus-visible{outline:2.5px solid #000;outline-offset:3px;border-radius:6px}
.ep-h3 rect{fill:var(--black)}
.ep-h3 .ep-nm{fill:var(--white);font-family:'Boldonse',cursive}
.ep-h3 .ep-sub{fill:rgba(255,255,255,.58);font-family:'Rubik',sans-serif;font-weight:500}
.ep-h3:hover rect,.ep-h3:focus rect{stroke:var(--green);stroke-width:2}
.ep-yours rect{fill:var(--white);stroke:rgba(0,0,0,.16)}
.ep-yours .ep-nm{fill:#101223;font-family:'Boldonse',cursive}
.ep-yours .ep-sub{fill:rgba(16,18,35,.48);font-family:'Rubik',sans-serif;font-weight:500}
.ep-yours:hover rect,.ep-yours:focus rect{stroke:#101223;stroke-width:2}
.ep-cycle rect{fill:var(--green)}
.ep-cycle .ep-nm{fill:#26330f;font-family:'Boldonse',cursive}
.ep-cycle:hover rect,.ep-cycle:focus rect{stroke:#26330f;stroke-width:2}
/* 2026-08-11: legend lines up with the bottom of the Workflow owner / Systems owner boxes (svg
   y=393 of viewBox height 436 -> 9.86% from the bottom of this column), not just wherever it lands
   under a two-line paragraph. .ep-readout stretches to match the diagram's height via the grid's
   align-items:stretch, so this percentage tracks the diagram at any width. */
.ep-legend{display:flex;gap:18px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(0,0,0,.1)}
/* Only pin the legend once the diagram actually sits beside it. Stacked (below 600px) there is no
   diagram height to align to, and absolute positioning collided with the readout text. */
@media(min-width:601px){
  .ep-legend{position:absolute;left:0;right:0;bottom:9.86%;margin-top:0}
}
.ep-legend span{display:inline-flex;align-items:center;gap:7px;font-family:'Rubik',sans-serif;font-weight:500;font-size:.78rem;letter-spacing:.02em;color:rgba(0,0,0,.55)}
.ep-legend i{width:10px;height:10px;border-radius:50%;display:block}
.ep-legend .ep-lg-h3{background:var(--black)}
.ep-legend .ep-lg-yours{background:var(--white);border:1px solid rgba(0,0,0,.3)}
.ep-nm{font-size:12px}
/* External stylesheet rules beat inline font-size attributes in SVG, so the two-line Sherpa
   label and the cycle pill need their own classes rather than relying on the attribute. */
.ep-nm-l1{font-size:11px}
.ep-nm-cycle{font-size:9px}
/* 2026-08-11: measured actual rendered Boldonse widths — a generic font calibration table does
   not hold for this typeface. "Workflow owner" (133px) and "Systems owner" (121px) were nearly
   touching their pill's rounded ends at 13px, in a box that has to stay exactly Sponsor's width
   (150px) per an explicit constraint — so the fix here is a smaller size, not a wider box. */
.ep-nm-owner{font-size:10px}
.ep-sub{font-size:9px;letter-spacing:.04em}
.ep-sub-sm{font-size:8px;letter-spacing:.04em}
/* Boldonse's rendered glyph height runs to roughly 1.9x its font-size (a 12px line measures ~23px
   tall) — two stacked Boldonse lines collide at any gap a normal font would tolerate. "(Sherpa)"
   is set in Rubik instead, same move as the eyebrow beneath it, matching how Sponsor/Architect
   already pair one Boldonse headline with Rubik support lines underneath. */
.ep-h3 .ep-nm2{fill:rgba(255,255,255,.82);font-family:'Rubik',sans-serif;font-weight:500;font-size:10px}
.ep-readout{min-height:112px;position:relative;display:flex;flex-direction:column;justify-content:center}
.ep-ro-h{font-family:'Rubik',sans-serif;font-weight:500;font-size:1.05rem;line-height:1.4;margin:0 0 8px;color:var(--black)}
.ep-ro-b{font-family:'Rubik',sans-serif;font-weight:300;font-size:.94rem;line-height:1.65;margin:0;color:rgba(0,0,0,.62)}


/* ════════════════════════════════════════════
   HORIZON PAGES + "HOW A CYCLE RUNS"
   Folded out of four page-scoped <style> blocks on 11 Aug: 75 identical lines sat in the
   three horizon pages and 20 overlapping lines in services.html. The hub's .mods rules
   win where they differ, because .mods only renders on the hub.
   ════════════════════════════════════════════ */
/* The spine: heading rail left, argument right. The rail sticks on desktop. */
.spine{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5.5vw,92px);align-items:start}
.rail{position:sticky;top:116px}
@media(max-width:920px){.spine{grid-template-columns:1fr;gap:34px}.rail{position:static}}

/* Full-bleed grounds. theme-* is a body class, so these sections carry their own.
   They must be <section> elements, not divs: the base rule gives section its horizontal
   padding AND align-items:center, and that centring is what insets .section-inner. As
   divs they rendered flush to the viewport edge while the <section> siblings did not,
   so the left margin jumped back and forth down the page. */
.band-white{background:var(--white)}
.band-blue{background:var(--blue)}

/* Heading tiers */
/* sized to fit the rail: at 3.2rem 'Adoption is up.' widowed onto two lines */
.h-claim{font-family:'Boldonse',cursive;font-size:clamp(1.5rem,2.9vw,2.4rem);line-height:1.42;text-transform:uppercase;margin:14px 0 0}
.h-claim em{display:block;font-style:normal;color:var(--blue-ink)}
/* 30px, not 20px: against a 12px kicker the old size read as a second label rather
   than a heading, which left sections 3, 4 and 6 without a visual anchor. */
.h-struct{font-family:'Boldonse',cursive;font-weight:400;font-size:clamp(1.35rem,2.1vw,1.85rem);letter-spacing:0;text-transform:uppercase;line-height:1.42;margin:12px 0 0}

/* Body voices: muted is skippable context, turn is the line that must land. */
.p-muted{font-weight:300;font-size:clamp(.98rem,1.3vw,1.08rem);line-height:1.85;color:rgba(0,0,0,.62);margin:0 0 24px;max-width:62ch}
.p-muted.apart{margin-top:38px}
.p-turn{font-weight:400;font-size:clamp(1.06rem,1.55vw,1.24rem);line-height:1.7;margin:40px 0 0;max-width:54ch}
.p-turn b{font-weight:500}
.rail-note{font-weight:300;font-size:.95rem;line-height:1.75;color:rgba(0,0,0,.62);margin:20px 0 0;max-width:38ch}

/* Editorial plate. Stands in for photography, built from the dither vocabulary. */
/* 3/2 landscape, not 4/5 or 1:1. At 4/5 the plate ran 584px against 182px of text and
   left a 402px hole; square still left 285. Landscape brings it to ~130, split above and
   below by .spine.middle, and it drops the hero from 1034px to about 760. */
.plate{position:relative;aspect-ratio:3/2;background:var(--black);overflow:hidden}
.plate i{position:absolute;display:block}
/* Composed, not scattered: the green form bleeds off ONE edge so the black frames it on the
   other three, and every other mark sits clear on the black. Bleeding two edges made it
   read as a cropping accident. */
.plate .p-blob{left:-16%;top:14%;width:58%;aspect-ratio:1;background:var(--green);border-radius:54% 46% 44% 56%/48% 52% 48% 52%}
.plate .p-dot{right:13%;top:15%;width:clamp(38px,5vw,62px);aspect-ratio:1;border-radius:50%;background:var(--sand)}
.plate .p-thread{left:52%;right:9%;top:56%;height:1px;background:var(--green);opacity:.7}
.plate .p-bar{right:13%;top:66%;width:1px;height:20%;background:rgba(233,231,223,.4)}
.horizon-hero-visual{aspect-ratio:715/544;margin:0;overflow:hidden}
.horizon-hero-visual img{
  display:block;
  width:104.895%;
  max-width:none;
  height:auto;
  transform:translate(-2%,-3.767%);
}

/* D3: each Horizon keeps the same visual language but has a distinct plate
   composition, so the three pages do not read as duplicated templates. */
.horizon-2 .plate .p-blob{left:auto;right:-16%;top:-10%;background:var(--blue);border-radius:46% 54% 58% 42%/54% 46% 42% 58%}
.horizon-2 .plate .p-dot{right:auto;left:14%;top:68%;background:var(--green)}
.horizon-2 .plate .p-thread{left:10%;right:52%;top:38%;background:var(--blue)}
.horizon-2 .plate .p-bar{right:auto;left:14%;top:18%;height:50%;background:rgba(233,231,223,.55)}
.horizon-3 .plate .p-blob{left:28%;top:-28%;width:72%;background:var(--sand);border-radius:50% 50% 42% 58%/40% 60% 45% 55%}
.horizon-3 .plate .p-dot{right:14%;top:70%;background:var(--blue)}
.horizon-3 .plate .p-thread{left:12%;right:14%;top:62%;background:var(--green);opacity:.9}
.horizon-3 .plate .p-bar{right:24%;top:12%;height:42%;background:rgba(189,199,164,.8)}

/* Four questions. Hairline cells, no boxes: the icon slot BOI uses does not exist here,
   and an empty icon well reads worse than none. */
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 52px}
@media(max-width:760px){.qgrid{grid-template-columns:1fr;gap:0}}
.qgrid > div{border-top:1px solid rgba(0,0,0,.16);padding:24px 0 6px}
.qgrid h3{font-family:'Rubik',sans-serif;font-weight:500;font-size:clamp(1.02rem,1.35vw,1.14rem);line-height:1.45;text-transform:none;margin:0 0 12px}
.qgrid p{font-weight:300;font-size:.95rem;line-height:1.75;color:rgba(0,0,0,.68);margin:0}

/* Outcomes. Arrow, not bullet; no radius, no card. */
.outs{list-style:none;padding:0;margin:0}
.outs li{display:grid;grid-template-columns:24px 1fr;gap:18px;padding:24px 0;border-top:1px solid rgba(0,0,0,.14);font-weight:300;font-size:clamp(1rem,1.35vw,1.1rem);line-height:1.65}
.outs li:last-child{border-bottom:1px solid rgba(0,0,0,.14)}
/* green stays the accent thread, but at 2.33:1 it needs mass rather than contrast
   to read: bigger and heavier, per 'presence from type scale'. It is aria-hidden
   decoration, so AA does not bind, but a faint glyph next to crisp text looks broken. */
.outs .ar{color:var(--green-deep);font-weight:500;font-size:1.18rem;line-height:1.4}

/* Outlined button, for the secondary of a pair. */
.btn-line{display:inline-block;border:1px solid var(--black);padding:16px 26px;font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--black);transition:background .35s cubic-bezier(.22,1,.36,1),color .35s ease}
.btn-line:hover{background:var(--black);color:var(--sand)}
.btn-pair{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* One proof card. Arrows appear only when there is more than one to move between. */
.pcard{border:1px solid rgba(0,0,0,.14);padding:clamp(26px,3.2vw,46px)}
.pcard .pk{font-weight:700;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin:0 0 26px}
.pcard .pbig{font-weight:300;font-size:clamp(1.14rem,1.95vw,1.46rem);line-height:1.55;margin:0}
.pcard .pmeta{font-weight:300;font-size:.85rem;line-height:1.6;opacity:.55;margin:22px 0 0}
.pcard .pbound{font-weight:400;font-size:.92rem;line-height:1.65;margin:22px 0 0;padding-top:20px;border-top:1px solid rgba(0,0,0,.12)}

/* .btn-solid span{position:relative} in the base outspecifies .sr-only, so the
   "opens in a new tab" hint renders inside the button. Same fix as contact.html. */
.sr-only,.btn-solid .sr-only,.btn-line .sr-only,.nav-cta .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* hub only: module rows carry a per-horizon tag */
/* push the toggle to the card floor so the three sit on one line */
.mods li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid rgba(0,0,0,.1);font-weight:300;font-size:.86rem;line-height:1.45;color:rgba(0,0,0,.74)}
.mods .tag{flex:0 0 auto;font-weight:700;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,0,0,.45)}
.mods .tag.all{color:var(--green-deep)}

/* module disclosure, restored: the consolidation pass dropped these */
div.phase-card:hover::before{transform:scaleY(0)}
.phase-card .wk{position:relative;display:block;font-weight:300;font-size:.8rem;letter-spacing:.04em;opacity:.62;margin:-2px 0 12px}
.phase-card:has(.mods){display:flex;flex-direction:column}
.mods{position:relative;margin-top:auto;padding-top:20px}
.mods summary{list-style:none;cursor:pointer;display:inline-block;font-weight:500;font-size:.82rem;letter-spacing:.06em;border-bottom:1px solid rgba(0,0,0,.35);padding-bottom:2px}
.mods summary::-webkit-details-marker{display:none}
.mods summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.mods .mlead{margin:16px 0 0;font-weight:300;font-size:.82rem;line-height:1.55;opacity:.6}
.mods ul{list-style:none;padding:0;margin:12px 0 0}

/* ── Services overview redesign ── */
.services-overview section{padding-top:96px;padding-bottom:96px}
.services-overview .svc-hero{min-height:58vh;padding-top:150px;padding-bottom:72px}
.services-overview .svc-hero .page-title{font-size:4rem}
.services-overview .svc-band-white{background:var(--white)}
.services-overview .svc-band-green{background:rgba(189,199,164,.48)}
.svc-section-head,
.svc-rhythm-head,
.svc-commercial{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:72px;
  align-items:start;
}
.svc-title{
  font-family:'Boldonse',cursive;
  font-weight:400;
  font-size:2.15rem;
  line-height:1.42;
  text-transform:uppercase;
  max-width:13em;
}
.svc-intro{
  font-weight:300;
  font-size:1.12rem;
  line-height:1.75;
  color:rgba(0,0,0,.66);
  max-width:48rem;
  margin:0;
}
.svc-horizon-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:56px;
  border-top:1px solid rgba(0,0,0,.14);
  border-bottom:1px solid rgba(0,0,0,.14);
}
.svc-horizon{
  display:flex;
  flex-direction:column;
  min-height:360px;
  padding:34px 30px 32px;
  color:var(--black);
  text-decoration:none;
  border-right:1px solid rgba(0,0,0,.14);
  transition:background .35s ease;
}
.svc-horizon:last-child{border-right:0}
.svc-horizon:hover{background:rgba(0,0,0,.035)}
.svc-horizon-no{
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.45;
  margin-bottom:24px;
}
.svc-symptom{
  font-weight:400;
  font-size:1.12rem;
  line-height:1.48;
  max-width:18rem;
  margin:0 0 28px;
}
.svc-horizon h3{
  font-family:'Boldonse',cursive;
  font-weight:400;
  font-size:1.28rem;
  line-height:1.42;
  margin:auto 0 14px;
}
.svc-horizon p:not(.svc-symptom){
  font-weight:300;
  font-size:.94rem;
  line-height:1.68;
  color:rgba(0,0,0,.64);
  margin:0;
}
.svc-link{
  display:inline-block;
  width:max-content;
  margin-top:24px;
  font-weight:500;
  font-size:.84rem;
  letter-spacing:.04em;
  border-bottom:1px solid rgba(0,0,0,.38);
  padding-bottom:2px;
}
.svc-role-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:52px;
  border-top:1px solid rgba(0,0,0,.14);
  border-bottom:1px solid rgba(0,0,0,.14);
}
.svc-role{
  padding:28px 30px 30px;
  border-right:1px solid rgba(0,0,0,.14);
}
.svc-role:last-child{border-right:0}
.svc-role h3{
  font-family:'Rubik',sans-serif;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 14px;
}
.svc-role p{
  font-weight:300;
  font-size:1rem;
  line-height:1.65;
  color:rgba(0,0,0,.66);
  margin:0;
}
.svc-engine-layout{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:72px;
  align-items:start;
}
.services-overview .engine-plate{margin-top:0}
.svc-link-row{margin-top:24px}
.svc-rhythm{
  margin-top:88px;
  padding-top:72px;
  border-top:1px solid rgba(0,0,0,.12);
}
.svc-rows{
  margin-top:44px;
  border-top:1px solid rgba(0,0,0,.16);
}
.svc-row{
  display:grid;
  grid-template-columns:70px minmax(180px,280px) minmax(0,1fr);
  gap:30px;
  padding:26px 0;
  border-bottom:1px solid rgba(0,0,0,.16);
  align-items:start;
}
.svc-row > span{
  font-family:'Boldonse',cursive;
  font-size:1.08rem;
  line-height:1.42;
  color:rgba(0,0,0,.38);
}
.svc-row h3{
  font-family:'Rubik',sans-serif;
  font-weight:700;
  font-size:1.02rem;
  line-height:1.4;
  margin:0 0 5px;
}
.svc-row em{
  display:block;
  font-style:normal;
  font-weight:300;
  font-size:.82rem;
  color:rgba(0,0,0,.54);
}
.svc-row p{
  font-weight:300;
  font-size:1rem;
  line-height:1.68;
  color:rgba(0,0,0,.66);
  margin:0;
  max-width:44rem;
}
.svc-commercial-copy p{
  font-weight:300;
  font-size:1.08rem;
  line-height:1.75;
  color:rgba(0,0,0,.68);
  max-width:50rem;
  margin:0;
}
.svc-commercial-copy p + p{margin-top:26px}
.svc-commercial-copy dl{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:34px 0;
  border-top:1px solid rgba(0,0,0,.16);
  border-bottom:1px solid rgba(0,0,0,.16);
}
.svc-commercial-copy dl > div{
  padding:26px 28px 28px;
  border-right:1px solid rgba(0,0,0,.16);
}
.svc-commercial-copy dl > div:first-child{padding-left:0}
.svc-commercial-copy dl > div:last-child{padding-right:0;border-right:0}
.svc-commercial-copy dt{
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 14px;
}
.svc-commercial-copy dd{
  font-weight:300;
  font-size:.96rem;
  line-height:1.68;
  color:rgba(0,0,0,.68);
  margin:0;
}
@media(max-width:980px){
  .services-overview .svc-hero .page-title{font-size:3.25rem}
  .svc-section-head,
  .svc-rhythm-head,
  .svc-commercial,
  .svc-engine-layout{grid-template-columns:1fr;gap:28px}
  .svc-title{font-size:1.85rem}
  .svc-horizon-grid,
  .svc-role-grid{grid-template-columns:1fr}
  .svc-horizon,
  .svc-role{border-right:0;border-bottom:1px solid rgba(0,0,0,.14)}
  .svc-horizon:last-child,
  .svc-role:last-child{border-bottom:0}
  .svc-horizon{min-height:0}
  .svc-row{grid-template-columns:54px 1fr;gap:16px 22px}
  .svc-row p{grid-column:2}
}
@media(max-width:640px){
  .services-overview section{padding-top:64px;padding-bottom:64px}
  .services-overview .svc-hero{min-height:54vh;padding-top:128px;padding-bottom:58px}
  .services-overview .svc-hero .page-title{font-size:2.15rem}
  .svc-title{font-size:1.45rem}
  .svc-intro{font-size:1rem}
  .svc-horizon-grid{margin-top:38px}
  .svc-horizon{padding:28px 0}
  .svc-role{padding:24px 0}
  .svc-rhythm{margin-top:60px;padding-top:52px}
  .svc-row{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .svc-row p{grid-column:auto}
  .svc-commercial-copy dl{grid-template-columns:1fr}
  .svc-commercial-copy dl > div,
  .svc-commercial-copy dl > div + div{padding:24px 0;border-right:0}
  .svc-commercial-copy dl > div + div{border-top:1px solid rgba(0,0,0,.16)}
}

/* ── About page redesign ── */
.about-page .about-hero{
  min-height:72vh;
  background:var(--sand);
  padding-bottom:clamp(64px,9vh,112px);
}
.about-page .about-hero .page-title{max-width:980px}
.about-page .about-hero .page-intro{
  max-width:720px;
  color:rgba(0,0,0,.7);
}
.about-purpose{
  min-height:72vh;
  background:var(--white);
}
.about-purpose-grid{
  display:block;
}
.about-purpose-copy{
  width:100%;
  max-width:850px;
  margin-inline:0;
  text-align:left;
}
.about-purpose-copy .section-label{margin-bottom:clamp(28px,4vw,48px)}
.about-purpose-copy h2{
  font-size:clamp(1.75rem,3.5vw,3rem);
  line-height:1.42;
  text-transform:uppercase;
  margin:0;
}
.about-purpose-lead{
  font-size:clamp(1.16rem,2vw,1.55rem);
  line-height:1.55;
  font-weight:500;
  margin:32px 0 0;
  max-width:34ch;
}
.about-purpose-note{
  font-size:clamp(1rem,1.3vw,1.13rem);
  line-height:1.72;
  color:rgba(0,0,0,.64);
  margin:24px 0 0;
  max-width:62ch;
}
.about-purpose-quote{
  width:100%;
  max-width:var(--content-max);
  margin:clamp(64px,9vw,112px) 0 0;
  padding:clamp(36px,6vw,76px);
  background:var(--blue);
  border:0;
  text-align:left;
}
.about-purpose-quote > p{
  font-size:clamp(1.7rem,4vw,3.8rem);
  line-height:1.18;
  font-weight:300;
  letter-spacing:-.03em;
  max-width:22ch;
  margin:0;
}
.about-purpose-quote > p span{
  color:#4f5f9c;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.13em;
}
.about-purpose-quote footer{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  align-items:baseline;
  margin-top:32px;
  font-size:.88rem;
  line-height:1.5;
  color:rgba(0,0,0,.62);
}
.about-purpose-quote cite{
  font-style:normal;
  font-weight:700;
  color:var(--black);
}
.about-page #sherpa{background:var(--black)}
.about-page .sherpa-sub{max-width:700px;color:rgba(255,255,255,.68)}
.about-team{
  background:var(--white);
  align-items:center;
}
.about-team-title{
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1.42;
  margin:12px 0 0;
  text-transform:uppercase;
  max-width:800px;
}
.about-team-intro{
  font-size:clamp(1rem,1.45vw,1.16rem);
  line-height:1.7;
  color:rgba(0,0,0,.66);
  max-width:650px;
  margin:22px 0 0;
}
.about-page .team-grid{
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:64px 34px;
  max-width:none;
  margin:52px 0 0;
}
.about-page .team-card{grid-column:span 4;text-align:left}
.about-page .team-card:nth-child(n+4){grid-column:span 3}
.about-page .team-photo{margin-bottom:22px}
.about-page .team-bio{font-size:.94rem;line-height:1.68;max-width:38ch}
.about-final{
  background:var(--black);
  color:var(--sand);
  align-items:center;
}
.about-final .cta-band{
  width:100%;
  max-width:var(--content-max);
  padding:0;
  margin:0;
  text-align:left;
}
.about-final .cta-band .band-head{max-width:850px}
.about-final .cta-band .band-sub{
  max-width:620px;
  margin:22px 0 32px;
}
.about-actions{
  display:flex;
  gap:22px;
  align-items:center;
  flex-wrap:wrap;
}
.about-actions .link-plain{color:var(--sand)}
@media(max-width:1020px){
  .about-page .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 28px}
  .about-page .team-card,
  .about-page .team-card:nth-child(n+4){grid-column:auto}
}
@media(max-width:720px){
  .about-page .about-hero{min-height:58vh;padding-top:132px}
  .about-purpose{min-height:0}
  .about-purpose-copy .section-label{margin-bottom:26px}
  .about-purpose-copy h2{font-size:1.55rem}
  .about-purpose-quote{margin-top:52px;padding:30px 24px}
  .about-purpose-quote > p{font-size:1.65rem;line-height:1.25}
  .about-purpose-quote footer{align-items:flex-start;flex-direction:column;margin-top:24px}
  .about-page .team-grid{grid-template-columns:1fr;gap:48px;margin-top:40px;max-width:480px}
  .about-page .team-card{grid-column:auto}
  .about-final .cta-band .band-head{font-size:1.65rem}
  .about-actions{align-items:flex-start;flex-direction:column}
}

/* ── Become a Sherpa redesign ── */
.join-page section{padding-top:clamp(72px,10vh,128px);padding-bottom:clamp(72px,10vh,128px)}
.join-page .join-hero{
  min-height:72vh;
  padding-top:160px;
  padding-bottom:clamp(70px,9vh,110px);
  background:var(--sand);
}
.join-page .join-hero .page-title{max-width:980px}
.join-page .join-hero .page-intro{max-width:680px;color:rgba(0,0,0,.72)}
.join-hero-line{
  max-width:650px;
  margin:16px 0 0;
  font-size:clamp(1rem,1.35vw,1.14rem);
  line-height:1.65;
  font-weight:500;
}
.join-hero-cta{margin-top:30px}
.join-title{
  font-family:'Boldonse',cursive;
  font-weight:400;
  font-size:clamp(1.65rem,3.4vw,2.8rem);
  line-height:1.42;
  text-transform:uppercase;
  margin:12px 0 0;
}
.join-intro{
  max-width:680px;
  margin:20px 0 0;
  font-size:clamp(1rem,1.4vw,1.16rem);
  line-height:1.72;
  color:rgba(0,0,0,.68);
}
.join-opening{background:var(--blue)}
.join-opening-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:48px;
  align-items:end;
}
.join-opening-head .btn-solid{margin-bottom:8px;white-space:nowrap}
.join-opening-facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:56px 0 0;
  border-top:1px solid rgba(0,0,0,.2);
  border-bottom:1px solid rgba(0,0,0,.2);
}
.join-opening-facts > div{
  padding:28px 26px 30px;
  border-right:1px solid rgba(0,0,0,.2);
}
.join-opening-facts > div:first-child{padding-left:0}
.join-opening-facts > div:last-child{border-right:0;padding-right:0}
.join-opening-facts dt,
.join-fit-block h3{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.join-opening-facts dd{
  margin:12px 0 0;
  font-size:.96rem;
  line-height:1.62;
  color:rgba(0,0,0,.7);
}
.join-role{background:var(--white)}
.join-section-head{
  display:block;
}
.join-role-copy{
  width:100%;
  max-width:850px;
  margin-inline:auto;
  text-align:left;
}
.join-role-copy .section-label{margin-bottom:clamp(28px,4vw,48px)}
.join-section-head .join-title{margin-top:0}
.join-fit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:72px;
  border-top:1px solid rgba(0,0,0,.16);
  border-bottom:1px solid rgba(0,0,0,.16);
}
.join-fit-block{padding:36px 48px 40px 0}
.join-fit-block + .join-fit-block{padding-left:48px;border-left:1px solid rgba(0,0,0,.16)}
.join-fit-block ul{list-style:none;display:grid;gap:14px;margin:24px 0 0}
.join-fit-block li{
  position:relative;
  padding-left:22px;
  font-size:.98rem;
  line-height:1.62;
  color:rgba(0,0,0,.7);
}
.join-fit-block li::before{
  content:'';
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green-deep);
}
.join-not-required{
  margin:28px 0 0;
  padding-top:24px;
  border-top:1px solid rgba(0,0,0,.12);
  font-size:.9rem;
  line-height:1.65;
  color:rgba(0,0,0,.58);
}
.join-not-required strong{font-weight:700;color:rgba(0,0,0,.78)}
.join-cycle{background:var(--black);color:var(--sand)}
.join-cycle .section-label{color:var(--green)}
.join-sherpa-manifesto{
  margin-bottom:clamp(72px,10vh,112px);
  padding-bottom:clamp(72px,10vh,112px);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.join-sherpa-manifesto-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
  gap:clamp(48px,8vw,120px);
  align-items:start;
}
.join-sherpa-manifesto .join-title{
  max-width:720px;
  font-size:clamp(1.75rem,3.4vw,3rem);
}
.join-sherpa-copy p{
  margin:0;
  font-size:clamp(1rem,1.3vw,1.1rem);
  font-weight:300;
  line-height:1.75;
  color:rgba(255,255,255,.7);
}
.join-sherpa-copy p + p{margin-top:24px}
.join-cycle-intro{
  max-width:680px;
  margin:20px 0 0;
  font-size:1.08rem;
  line-height:1.7;
  color:rgba(233,231,223,.68);
}
.join-cycle-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:58px;
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.join-cycle-step{padding:34px 36px 38px 0}
.join-cycle-step + .join-cycle-step{padding-left:36px;border-left:1px solid rgba(255,255,255,.16)}
.join-cycle-step > span{
  display:block;
  font-family:'Boldonse',cursive;
  font-size:1.05rem;
  color:var(--blue);
  margin-bottom:42px;
}
.join-cycle-step h3{font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
.join-cycle-step p{font-size:.96rem;line-height:1.7;color:rgba(255,255,255,.65)}
.join-values{background:var(--green)}
.join-values .join-title{max-width:930px}
.join-value-rows{margin-top:58px;border-top:1px solid rgba(0,0,0,.2)}
.join-value-row{
  display:grid;
  grid-template-columns:72px minmax(180px,280px) 1fr;
  gap:28px;
  align-items:baseline;
  padding:24px 0;
  border-bottom:1px solid rgba(0,0,0,.2);
}
.join-value-row > span{font-family:'Boldonse',cursive;font-size:.9rem;color:rgba(0,0,0,.4)}
.join-value-row h3{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase}
.join-value-row p{font-size:1.06rem;line-height:1.6;color:rgba(0,0,0,.7)}
.join-final{background:var(--black);color:var(--sand)}
.join-final-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,520px);
  gap:clamp(56px,8vw,120px);
  align-items:start;
}
.join-final .section-label{color:var(--green)}
.join-final-copy p{
  max-width:560px;
  margin:22px 0 0;
  font-size:1.08rem;
  line-height:1.72;
  color:rgba(255,255,255,.68);
}
.join-form{background:var(--white);color:var(--black);padding:clamp(28px,4vw,48px)}
.join-form .form-field{margin-bottom:18px}
.join-form .form-field label{opacity:.68}
.join-form .form-field input,
.join-form .form-field textarea{border-radius:0;background:var(--white)}
.join-form .form-privacy{line-height:1.55}
.join-form .form-status{margin-top:16px;font-size:.9rem;line-height:1.5;color:rgba(0,0,0,.68)}
.join-form .form-status a{color:inherit;font-weight:500}
.join-form button:disabled{opacity:.55;cursor:wait}
@media(max-width:980px){
  .join-opening-head,
  .join-section-head,
  .join-sherpa-manifesto-grid,
  .join-final-grid{grid-template-columns:1fr;gap:28px}
  .join-opening-head .btn-solid{width:max-content}
  .join-opening-facts{grid-template-columns:1fr 1fr}
  .join-opening-facts > div,
  .join-opening-facts > div:first-child,
  .join-opening-facts > div:last-child{padding:26px 24px}
  .join-opening-facts > div:nth-child(2){border-right:0}
  .join-opening-facts > div:nth-child(-n+2){border-bottom:1px solid rgba(0,0,0,.2)}
  .join-final-grid{grid-template-columns:1fr;max-width:760px}
}
@media(max-width:720px){
  .join-page section{padding-top:64px;padding-bottom:64px}
  .join-page .join-hero{min-height:62vh;padding-top:132px}
  .join-title{font-size:1.55rem}
  .join-opening-facts{grid-template-columns:1fr;margin-top:40px}
  .join-opening-facts > div,
  .join-opening-facts > div:first-child,
  .join-opening-facts > div:last-child{padding:22px 0;border-right:0;border-bottom:1px solid rgba(0,0,0,.2)}
  .join-opening-facts > div:last-child{border-bottom:0}
  .join-fit-grid,
  .join-cycle-grid{grid-template-columns:1fr;margin-top:46px}
  .join-sherpa-manifesto{margin-bottom:64px;padding-bottom:64px}
  .join-fit-block,
  .join-fit-block + .join-fit-block{padding:30px 0;border-left:0}
  .join-fit-block + .join-fit-block{border-top:1px solid rgba(0,0,0,.16)}
  .join-cycle-step,
  .join-cycle-step + .join-cycle-step{padding:28px 0;border-left:0}
  .join-cycle-step + .join-cycle-step{border-top:1px solid rgba(255,255,255,.16)}
  .join-cycle-step > span{margin-bottom:24px}
  .join-value-rows{margin-top:42px}
  .join-value-row{grid-template-columns:44px 1fr;gap:8px 18px;align-items:start}
  .join-value-row p{grid-column:2;font-size:1rem}
  .join-form{padding:28px 22px}
}

/* ── Field Notes page redesign ── */
.field-notes-page section{
  padding-top:clamp(72px,9vh,104px);
  padding-bottom:clamp(72px,9vh,104px);
}
.field-notes-page .field-notes-hero{
  min-height:54vh;
  padding-top:150px;
  padding-bottom:72px;
  background:var(--sand);
}
.field-notes-hero .page-title{max-width:900px}
.field-notes-hero .page-intro{
  max-width:790px;
  color:rgba(0,0,0,.72);
}
.field-library{background:var(--white)}
.field-library-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,430px);
  gap:clamp(42px,8vw,120px);
  align-items:end;
}
.field-library-head .section-label{margin-bottom:22px}
.field-library-head h2{
  margin:0;
  font-family:'Boldonse',cursive;
  font-size:clamp(1.8rem,3.7vw,3.4rem);
  font-weight:400;
  line-height:1.42;
  text-transform:uppercase;
}
.field-library-head > p{
  max-width:42ch;
  margin:0 0 .35rem;
  color:rgba(0,0,0,.68);
  font-size:1.02rem;
  font-weight:300;
  line-height:1.68;
}
.field-library-head > p strong{color:var(--black);font-weight:600}
.field-library-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin-top:clamp(42px,6vw,72px);
  background:rgba(0,0,0,.18);
  border:1px solid rgba(0,0,0,.18);
}
.field-note-entry{
  display:flex;
  min-height:520px;
  padding:clamp(30px,4vw,54px);
  flex-direction:column;
  background:var(--white);
  color:inherit;
  text-decoration:none;
  transition:background .28s ease;
}
.field-note-entry:hover{background:rgba(170,181,216,.14)}
.field-note-entry:focus-visible{outline:3px solid var(--blue-deep);outline-offset:-3px}
.field-note-entry-top{display:flex;min-height:28px;align-items:center;justify-content:space-between}
.field-note-number{
  color:rgba(0,0,0,.32);
  font-family:'Boldonse',cursive;
  font-size:1.1rem;
}
.field-note-status{
  padding:6px 10px;
  background:var(--green);
  color:#26330f;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.field-note-meta,
.field-note-kind{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.field-note-meta{margin:38px 0 0;color:rgba(0,0,0,.48)}
.field-note-kind{margin:18px 0 0;color:var(--blue-deep)}
.field-note-entry h3{
  max-width:15em;
  margin:24px 0 0;
  font-family:'Boldonse',cursive;
  font-size:clamp(1.35rem,2.35vw,2.2rem);
  font-weight:400;
  line-height:1.42;
  text-transform:uppercase;
}
.field-note-summary{
  max-width:52ch;
  margin:24px 0 0;
  color:rgba(0,0,0,.68);
  font-size:1rem;
  font-weight:300;
  line-height:1.7;
}
.field-note-entry-bottom{
  display:flex;
  gap:20px;
  align-items:flex-end;
  justify-content:space-between;
  margin-top:auto;
  padding-top:34px;
  border-top:1px solid rgba(0,0,0,.14);
  color:rgba(0,0,0,.58);
  font-size:.78rem;
  letter-spacing:.03em;
}
.field-note-entry-bottom strong{
  color:var(--black);
  font-size:.84rem;
  font-weight:600;
  white-space:nowrap;
}
.field-more-links{display:flex;gap:18px 28px;flex-wrap:wrap;margin:18px 0 0}
.field-featured{background:var(--white)}
.field-featured-card{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  background:var(--white);
  color:inherit;
  text-decoration:none;
  margin-top:18px;
  border-top:1px solid rgba(0,0,0,.2);
  border-bottom:1px solid rgba(0,0,0,.2);
  transition:border-color .3s ease;
}
.field-featured-card:hover{border-color:rgba(0,0,0,.42)}
.field-featured-title{padding:clamp(34px,5vw,68px) clamp(36px,5vw,72px) clamp(34px,5vw,68px) 0}
.field-featured-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(34px,5vw,68px) 0 clamp(34px,5vw,68px) clamp(36px,5vw,64px);
  border-left:1px solid rgba(0,0,0,.2);
}
.field-kicker,
.field-meta,
.field-lens{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.field-kicker{display:block;margin-bottom:26px;color:rgba(0,0,0,.55)}
.field-featured-title h2{
  max-width:780px;
  margin:0;
  font-family:'Boldonse',cursive;
  font-size:clamp(1.55rem,3.1vw,2.75rem);
  font-weight:400;
  line-height:1.42;
  text-transform:uppercase;
}
.field-meta{color:rgba(0,0,0,.48)}
.field-summary{
  margin:22px 0 0;
  font-size:clamp(1rem,1.35vw,1.12rem);
  font-weight:300;
  line-height:1.7;
  color:rgba(0,0,0,.72);
}
.field-lens{margin-top:28px;color:var(--blue-deep)}
.field-more-link{
  display:inline-block;
  width:max-content;
  margin-top:34px;
  padding-bottom:3px;
  border-bottom:1px solid currentColor;
  font-size:.88rem;
  font-weight:600;
  transition:color .25s ease;
}
.field-featured-card:hover .field-more-link{color:var(--blue-deep)}
.field-more{background:var(--blue)}
.field-more .h3card{
  background:rgba(255,255,255,.24);
  border-color:rgba(0,0,0,.16);
}
.field-more .provisional{color:rgba(0,0,0,.66)}
.field-newsletter-section{background:var(--black);color:var(--sand)}
.field-newsletter{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,520px);
  gap:clamp(56px,9vw,140px);
  align-items:center;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
}
.field-newsletter .section-label{color:var(--green);margin-bottom:24px}
.field-newsletter h3{
  max-width:650px;
  margin:0;
  color:var(--sand);
  font-size:clamp(1.65rem,3.2vw,3rem);
  line-height:1.42;
}
.field-newsletter-copy > p{
  max-width:620px;
  margin:24px 0 0;
  color:rgba(255,255,255,.68);
  font-size:1.05rem;
  line-height:1.7;
}
/* v12 audit A3: newsletter inputs had an sr-only label with a placeholder as the
   only visible cue — placeholders vanish on input. Visible label, WCAG floor. */
.field-newsletter-action .nl-label{
  display:block;font-weight:500;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin:0 0 8px;
}
.field-newsletter .field-newsletter-action form{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  max-width:none;
  margin:0;
}
.field-newsletter input{
  min-width:0;
  border:1px solid rgba(255,255,255,.32);
  border-radius:0;
  background:rgba(255,255,255,.08);
  color:var(--white);
}
.field-newsletter input::placeholder{color:rgba(255,255,255,.5)}
.field-newsletter input:focus{border-color:var(--blue)}
.field-newsletter .form-status{margin:14px 0 0;color:rgba(255,255,255,.72)}
.field-newsletter .np{
  max-width:none;
  margin:16px 0 0;
  color:rgba(255,255,255,.5);
}
.field-newsletter .np a{color:var(--blue)}
@media(max-width:900px){
  .field-library-head,
  .field-library-grid{grid-template-columns:1fr}
  .field-library-head{align-items:start}
  .field-note-entry{min-height:440px}
  .field-featured-card,
  .field-newsletter{grid-template-columns:1fr}
  .field-featured-title{padding-right:0}
  .field-featured-copy{padding-left:0;border-left:0;border-top:1px solid rgba(0,0,0,.2)}
  .field-newsletter{gap:42px}
  .field-newsletter-action{max-width:620px}
}
@media(max-width:640px){
  .field-notes-page section{padding-top:64px;padding-bottom:64px}
  .field-notes-page .field-notes-hero{min-height:50vh;padding-top:132px;padding-bottom:58px}
  .field-featured-title,
  .field-featured-copy{padding-top:32px;padding-bottom:32px}
  .field-note-entry{min-height:0;padding:28px 24px}
  .field-note-entry-bottom{align-items:flex-start;flex-direction:column}
  .field-newsletter .field-newsletter-action form{flex-direction:column}
  .field-newsletter .btn-solid{width:100%}
}