/*
 * styles.css — single stylesheet for every page on simulen.com.
 *
 * Conventions
 *   - All brand tokens live as CSS custom properties on `:root` (see Variables).
 *   - Section markers below use `=== Title ===` so the file can be navigated
 *     by searching for the heading prefix.
 *   - Page-specific styles are namespaced via a body class
 *     (`.home-mbb`, `.legal`, `.join-page`, `.insights-page`, `.ptd-page`,
 *      `.page-404`).
 *
 * Top-level table of contents
 *   1.  Variables / Reset / Skip link / Base / Layout / Typography
 *   2.  Header + mobile menu
 *   3.  Hero corner logo (homepage)
 *   4.  Offerings tooltip / Buttons
 *   5.  Problem / How we work / Offerings / Team / SME showcase / Footer
 *   6.  404 / Legal pages / Responsive / Reduced motion
 *   7.  Join form
 *   8.  Scroll reveal helper
 *   9.  PTD questionnaire + report
 *   10. Insights (banner, toolbar, categories, featured, cards, prose)
 *   11. MBB-style homepage refresh (hero, sections, CTA band, footer blend)
 *   12. Unified inner-page hero (legal/join/ptd/insights/404)
 */

/* === Fonts — self-hosted Roboto trio ===
 * Roboto Serif = display/headings, Roboto = body/UI, Roboto Mono = labels.
 * Variable TTFs are copied verbatim from brandbook/fonts/ into
 * /assets/fonts/roboto/ so every page renders offline (no Google Fonts CDN).
 * Serif-italic and mono-italic are intentionally not shipped: italic display
 * type is brandbook misuse and the serif-italic master is ~4 MB; body italic
 * (Roboto-Italic) is kept for prose emphasis. font-display:swap keeps text
 * visible while the variable faces stream in. */
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Serif";
  src: url("/assets/fonts/roboto/RobotoSerif-VariableFont_GRAD_opsz_wdth_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("/assets/fonts/roboto/RobotoMono-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* === Variables ===
 * The Simulen design system (canonical: brandbook/ds-tokens.css). Warm paper
 * surfaces (never pure white), warm ink (never pure black), a single clay
 * accent, a sparing dusty-blue tertiary, and the Roboto trio. The block below
 * is the canonical token set; the "Legacy aliases" group at the end maps the
 * pre-rebrand names (--red, --bg, --text, --font-heading …) onto the new values
 * so rules written against the old tokens keep working while the per-page
 * surfaces are migrated. Prefer the canonical names for new work. */
:root {
  /* Surfaces — warm paper, never pure white */
  --paper:      #FAF8F2;
  --paper-alt:  #F2EFE6;
  --paper-tint: #FCFBF6;
  --card:       #FFFFFF;
  --ink:        #20201C;
  --ink-soft:   #2C2B26;

  /* Text — warm charcoal → soft */
  --fg1: #20201C;   /* primary text / headings        */
  --fg2: #4A483F;   /* secondary / strong body        */
  --fg3: #6E6B61;   /* muted — captions, meta         */
  --fg4: #9A968A;   /* tertiary — placeholders, faint */
  --on-ink:      #F4F2EA;   /* text on dark ink surfaces      */
  --on-ink-soft: #B8B4A6;   /* muted text on dark ink         */

  /* Lines */
  --border:        #E6E2D6;
  --border-strong: #D6D1C2;
  --rule:          rgba(32, 32, 28, .07);

  /* Accent — a single warm clay carries action + brand */
  --clay:       #BC6A4C;
  --clay-deep:  #A2573B;
  --clay-soft:  #EBD9CF;
  --clay-faint: #F6ECE5;

  /* Neutral secondary — warm stone (links stay ink + clay hover, not coloured) */
  --slate:      #5E574C;
  --slate-deep: #423D34;
  --slate-soft: #E7E2D6;

  /* Tertiary accent — a calm, dusty blue, used sparingly (cool counterpoint) */
  --blue:      #5E7C8B;
  --blue-deep: #496672;
  --blue-soft: #DDE6EA;

  /* Type families */
  --font-display: "Roboto Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono:    "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --eyebrow-ls:   .16em;   /* mono eyebrow/label tracking */

  /* Spacing (4px base) */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;    --space-8: 4rem;
  --space-9: 6rem;    --space-10: 8rem;
  --container:       1140px;
  --container-prose: 720px;

  /* Radii */
  --r-xs:   4px;
  --r-sm:   8px;
  --r:      12px;
  --r-lg:   18px;
  --r-pill: 999px;

  /* Elevation — near-flat, warm; borders do most of the work */
  --shadow-sm: 0 2px 8px rgba(32, 32, 28, .05);
  --shadow-md: 0 8px 24px rgba(32, 32, 28, .06);
  --shadow-lg: 0 20px 48px rgba(32, 32, 28, .09);
  --shadow-clay: 0 6px 20px rgba(188, 106, 76, .22);

  /* Motion — gentle; fades and small translations */
  --ease:     cubic-bezier(.2, .6, .2, 1);
  --ease-out: cubic-bezier(.16, .84, .44, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 420ms;

  /* ---- Legacy aliases (pre-rebrand names → new system) ----
   * Kept so rules written against the old tokens keep working during the
   * migration. The Simulen blue + red are retired: both old chromatic accents
   * now resolve to clay (the single accent). */
  --red:         var(--clay);
  --red-deep:    var(--clay-deep);
  --orange:      var(--clay);
  --orange-deep: var(--clay-deep);
  --gray:        var(--fg4);
  --dark:        var(--fg1);
  --darker:      var(--ink);
  --bg:          var(--paper);
  --bg-alt:      var(--paper-alt);
  --bg-tint:     var(--paper-tint);
  --text:        var(--fg2);
  --muted:       var(--fg3);
  --soft:        var(--fg4);
  --max:         var(--container);
  --r-mbb:       var(--r-xs);
  --shadow-cta-red:  var(--shadow-clay);
  --shadow-cta-blue: var(--shadow-md);
  --font-heading:    var(--font-display);
}

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

/* === Skip link === */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 1000;
  padding: .65rem 1.1rem;
  background: var(--clay);
  color: var(--on-ink);
  font-weight: 700;
  font-size: .9rem;
  border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow-clay);
  transition: transform .2s var(--ease);
}
.skip-link:focus {
  outline: none;
  transform: translate(-50%, 0);
  color: var(--on-ink);
}

/* === Base === */
html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
}
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  line-height: 1.65;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: var(--fg1); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--clay); text-decoration: none; }
img { display: block; max-width: 100%; }
ul { padding: 0; margin: 0; list-style: none; }
strong { font-weight: 700; color: var(--dark); }
::selection { background: var(--clay-soft); color: var(--fg1); }
:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 3px;
}

/* === Layout === */
.container { max-width: var(--max); margin: 0 auto; padding: 0 1.75rem; }
section { padding: 6rem 0; }
section[id] { scroll-margin-top: 96px; }
.section-alt { background: var(--bg-alt); }

/* Section heading rhythm */
section > .container > h2 {
  position: relative;
  padding-top: 1.1rem;
}
section > .container > h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--clay);
  border-radius: 2px;
}

/* === Typography === */
h1 { font-family: var(--font-heading); font-weight: 400; line-height: 1.08; letter-spacing: -.015em; }
h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin-bottom: 1.25rem;
  color: var(--dark);
}
h3 { font-family: var(--font-heading); font-weight: 500; font-size: 1.05rem; line-height: 1.35; margin-bottom: .4rem; color: var(--dark); letter-spacing: -.005em; }

/* Editorial eyebrows / kickers — the calm mono, uppercase, widely-tracked
   label that signals the new identity (brandbook 05 · Labels & eyebrows).
   Functional micro-labels in tight UI (select / progress / radio labels) keep
   the body font and are tuned per surface in the page-level rebrand issues. */
.section-mbb-eyebrow,
.page-hero-eyebrow,
.cta-band-eyebrow,
.inner-section-eyebrow,
.legal-toc-eyebrow,
.not-found-eyebrow,
.pullquote-eyebrow,
.insights-eyebrow,
.insights-post-eyebrow,
.insights-featured-eyebrow,
.insights-smart-cta-eyebrow,
.join-form-card .form-eyebrow,
.flow-kicker,
.ptd-kicker {
  font-family: var(--font-mono);
}
h4,
h5,
h6,
.slide-title,
.team-title,
.ptd-step-title,
.ptd-report-subtitle,
.insights-banner-heading,
.insights-post-title,
.insights-featured-title,
.insights-card-title,
.insights-related-title,
.hero-mbb-title,
.section-mbb-title,
.cta-band-title,
.page-hero-title {
  font-family: var(--font-heading);
}
p { margin-bottom: .75rem; }
p:last-child { margin-bottom: 0; }

button,
input,
select,
textarea {
  font: inherit;
}

/* === Header === */
.site-header {
  background: rgba(250, 248, 242, .9);
  backdrop-filter: saturate(120%) blur(14px);
  -webkit-backdrop-filter: saturate(120%) blur(14px);
  color: var(--fg1);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  transition: transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}

.site-header-hidden {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header .bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .85rem 1.75rem;
}
.brand { display: inline-flex; align-items: center; }
.brand img {
  width: auto;
  height: 32px;
  transform-origin: left center;
  transition: opacity .15s var(--ease), transform .25s var(--ease);
}
.brand .brand-logo-light { height: 38px; }
.brand:hover img { opacity: .9; transform: scale(1.03); }
.nav-links {
  display: flex;
  gap: 1.65rem;
  list-style: none;
  align-items: center;
}
.nav-links > li > a {
  position: relative;
  color: var(--fg2);
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: .005em;
  padding: .25rem 0;
  transition: color .15s var(--ease);
}
.nav-links > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s var(--ease);
}
.nav-links > li > a:hover {
  color: var(--fg1);
}
.nav-links > li > a:hover::after {
  transform: scaleX(1);
}
.nav-links > li > a[aria-current="page"] {
  color: var(--fg1);
}
.nav-links > li > a[aria-current="page"]::after {
  transform: scaleX(1);
}
/* Mobile menu button */
.menu-btn {
  display: none;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg1);
  border-radius: 6px;
  padding: .45rem .75rem;
  cursor: pointer;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.menu-btn:hover { background: var(--paper-tint); border-color: var(--fg3); }
.menu-btn-icon {
  display: inline-block;
  width: 18px;
  height: 12px;
  position: relative;
  flex-shrink: 0;
}
.menu-btn-icon::before,
.menu-btn-icon::after,
.menu-btn-icon {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 2px;
}
.menu-btn-icon { background-position: 0 50%; }
.menu-btn-icon::before,
.menu-btn-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: transform .2s var(--ease), opacity .2s var(--ease), top .2s var(--ease);
}
.menu-btn-icon::before { top: 0; }
.menu-btn-icon::after { top: 10px; }
.menu-btn[aria-expanded="true"] .menu-btn-icon { background-image: none; }
.menu-btn[aria-expanded="true"] .menu-btn-icon::before { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn-icon::after  { top: 5px; transform: rotate(-45deg); }
.menu-btn-label {
  font-size: .82rem;
  letter-spacing: .04em;
}
@media (max-width: 480px) {
  .menu-btn-label { display: none; }
}

/* === Hero corner logo (homepage) === */
.hero-corner-logo {
  position: absolute;
  top: clamp(1.5rem, 3.5vw, 2.5rem);
  left: clamp(1.5rem, 3.5vw, 2.75rem);
  width: clamp(110px, 14vw, 170px);
  height: auto;
  opacity: .92;
  z-index: 3;
  pointer-events: none;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}

.hero-mbb.hero-navbar-active .hero-corner-logo {
  opacity: 0;
  visibility: hidden;
}

/* === Offerings tooltip (service item hover/focus) === */
.offering-tooltip-item {
  position: relative;
  cursor: default;
}

.offering-tooltip-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + .65rem);
  transform: translateX(-50%) translateY(6px);
  width: min(300px, 78vw);
  padding: .8rem 1rem;
  border-radius: 8px;
  background: var(--darker);
  color: rgba(255,255,255,.92);
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 12px 32px rgba(32, 32, 28, .22);
  opacity: 0;
  pointer-events: none;
  z-index: 25;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.offering-tooltip-item::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + .3rem);
  transform: translateX(-50%) translateY(6px) rotate(45deg);
  width: .55rem;
  height: .55rem;
  background: var(--darker);
  opacity: 0;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 24;
}

.offering-tooltip-item:hover::after,
.offering-tooltip-item:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.offering-tooltip-item:hover::before,
.offering-tooltip-item:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0) rotate(45deg);
}

/* === Problem === */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.problem-item {
  position: relative;
  border: 1px solid var(--border);
  padding: 2rem 1.5rem 1.5rem;
  background: var(--card);
  border-radius: var(--r-lg);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.problem-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 1.5rem;
  width: 32px;
  height: 3px;
  background: var(--red);
  border-radius: 0 0 2px 2px;
}
.problem-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.problem-item h3 { font-size: 1.05rem; color: var(--dark); margin-bottom: .55rem; line-height: 1.35; }
.problem-item p { color: var(--muted); font-size: .94rem; margin: 0; line-height: 1.6; }
.problem-item p strong { color: var(--dark); }

/* === How we work === */
.how-we-work-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: .5rem;
}
.flow-step {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  display: flex;
  flex-direction: column;
}
.flow-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 3px;
  border-radius: 0 0 2px 2px;
  opacity: .9;
}
.flow-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.flow-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.12);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 1.1rem;
  text-transform: uppercase;
  color: var(--dark);
  align-self: flex-start;
}
.flow-step h3 {
  margin-bottom: .35rem;
  font-size: 1.03rem;
}
.flow-step p {
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.6;
}
.flow-think::before { background: var(--blue); }
.flow-build::before { background: var(--clay); }
.flow-run::before   { background: #7E7355; }
.flow-think .flow-kicker { color: var(--blue); border-color: rgba(94,124,139,.35); }
.flow-build .flow-kicker { color: var(--clay-deep); border-color: rgba(188,106,76,.35); }
.flow-run   .flow-kicker { color: #7E7355; border-color: rgba(126,115,85,.35); }

/* === Offerings — Modern Interactive UI === */
.section-lead { color: var(--muted); font-size: 1.1rem; line-height: 1.6; margin-bottom: 2.25rem; max-width: 60ch; }

.offerings-tabs {
  --domain-color: var(--blue);
  --domain-color-soft: rgba(188, 106, 76, .12);
  --domain-color-strong: rgba(188, 106, 76, .35);
  --stage-think: var(--blue);   /* Think — dusty blue (tertiary accent) */
  --stage-build: var(--clay);   /* Build — clay                        */
  --stage-run:   #7E7355;       /* Run   — warm bronze                 */
}

/* Segmented domain switcher */
.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 2.5rem;
  padding: .4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -18px rgba(32, 32, 28,.18);
  position: relative;
  justify-content: center;
}

.tab-btn {
  position: relative;
  padding: .75rem 1.35rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-align: center;
  transition: color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.tab-btn:hover {
  color: var(--dark);
  background: var(--bg-alt);
}
.tab-btn:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

.tab-btn.active {
  color: var(--on-ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .25);
}

.tab-btn[data-tab="transformation"].active { background: var(--blue-deep); }
.tab-btn[data-tab="hr"].active             { background: var(--clay-deep); }
.tab-btn[data-tab="deal"].active           { background: var(--ink); }
.tab-btn[data-tab="sales"].active          { background: #635B43; }

/* Tab panels */
.tab-panels { position: relative; }
.tab-panel { display: none; position: relative; }

.tab-panel.active {
  display: block;
  animation: panelIn .45s cubic-bezier(.2, .8, .4, 1) forwards;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.domain-anchor {
  display: block;
  position: relative;
  top: -92px;
  visibility: hidden;
}

/* Mobile-only accordion controls (hidden on desktop) */
.accordion-btn {
  display: none;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem 1.15rem;
  text-align: left;
  font-weight: 700;
  font-family: inherit;
  font-size: 1rem;
  background: var(--card);
  color: var(--dark);
  margin-bottom: .6rem;
  cursor: pointer;
  align-items: center;
  gap: .7rem;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.accordion-btn:hover { border-color: var(--border-strong); background: var(--bg-tint); }
.accordion-btn .tab-label { flex: 1; }
.accordion-chevron {
  font-size: 1rem;
  transition: transform .25s var(--ease);
  color: var(--soft);
}
.accordion-btn[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); color: var(--dark); }

/* Domain card — wraps intro + stages */
.panel-card {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 44px -22px rgba(32, 32, 28, .22);
}
.domain-transformation { --domain-color: var(--blue);   --domain-grad: var(--blue-deep); --domain-color-strong: rgba(94,124,139,.45); --domain-color-soft: rgba(94,124,139,.14); }
.domain-hr             { --domain-color: var(--clay);   --domain-grad: var(--clay-deep); --domain-color-strong: rgba(188,106,76,.45); --domain-color-soft: rgba(188,106,76,.14); }
.domain-deal           { --domain-color: var(--ink);    --domain-grad: var(--ink); --domain-color-strong: rgba(94,87,76,.5);    --domain-color-soft: rgba(94,87,76,.14); }
.domain-sales          { --domain-color: #7E7355;       --domain-grad: #635B43; --domain-color-strong: rgba(126,115,85,.45); --domain-color-soft: rgba(126,115,85,.14); }

/* Domain intro hero */
.panel-intro {
  position: relative;
  padding: 2.25rem 2.25rem 2rem;
  color: var(--on-ink);
  background: var(--domain-grad);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
}
.offering-transformation { background: var(--domain-grad); }
.offering-hr             { background: var(--domain-grad); }
.offering-deal           { background: var(--domain-grad); }
.offering-sales          { background: var(--domain-grad); }

.panel-intro-pattern {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.18), transparent 38%),
    radial-gradient(circle at 12% 110%, rgba(255,255,255,.14), transparent 42%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px);
  pointer-events: none;
}
.panel-intro-text { position: relative; z-index: 1; }
.panel-intro-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.18);
  color: var(--on-ink);
  margin-bottom: .85rem;
  backdrop-filter: blur(4px);
}
.panel-intro h3 {
  color: var(--on-ink);
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 .4rem;
  line-height: 1.05;
}
.panel-intro p {
  color: rgba(255,255,255,.9);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  max-width: 60ch;
  font-weight: 400;
}
.panel-intro strong { color: var(--on-ink); font-weight: 700; }

/* Three-stage journey grid */
.panel-stages-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  padding: 2rem 1.5rem 2rem;
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-tint) 100%);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.panel-stage {
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--r);
  transition: background .25s var(--ease);
}
.panel-stage:hover { background: rgba(255,255,255,.6); }
.panel-stage > p { color: var(--muted); font-size: .94rem; line-height: 1.6; }

.panel-stage-head {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--border);
  margin-bottom: 1.1rem;
  position: relative;
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.12);
}
.panel-stage-label {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dark);
}
.panel-stage.stage-think .panel-stage-label { color: var(--blue); }
.panel-stage.stage-build .panel-stage-label { color: var(--clay-deep); }
.panel-stage.stage-run   .panel-stage-label { color: #635B43; }
.panel-stage.stage-think .panel-stage-head { border-color: rgba(94,124,139,.35); }
.panel-stage.stage-build .panel-stage-head { border-color: rgba(188,106,76,.35); }
.panel-stage.stage-run   .panel-stage-head { border-color: rgba(126,115,85,.35); }

/* Connector arrows between stages */
.panel-stage-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .35rem;
  color: var(--soft);
  align-self: center;
  position: relative;
}
.panel-stage-arrow::before,
.panel-stage-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .85rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong));
}
.panel-stage-arrow::before { right: 100%; }
.panel-stage-arrow::after  { left: 100%; background: linear-gradient(90deg, var(--border-strong), transparent); }
.panel-stage-arrow svg {
  animation: arrowFloat 2.4s ease-in-out infinite;
}
@keyframes arrowFloat {
  0%, 100% { transform: translateX(0); opacity: .55; }
  50%      { transform: translateX(3px); opacity: 1; }
}

/* Service item chips */
.panel-stage ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  margin: 0;
  padding: 0;
}
.panel-stage ul li {
  --chip-color: var(--soft);
  font-size: .92rem;
  font-weight: 500;
  color: var(--text);
  padding: .7rem 1rem;
  position: relative;
  line-height: 1.4;
  list-style: none;
  border: 1px solid var(--border);
  border-left: 3px solid var(--chip-color);
  border-radius: 8px;
  background: var(--card);
  cursor: default;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.panel-stage.stage-think ul li { --chip-color: rgba(94,124,139,.45); }
.panel-stage.stage-build ul li { --chip-color: rgba(188,106,76,.45); }
.panel-stage.stage-run   ul li { --chip-color: rgba(126,115,85,.45); }

.panel-stage.stage-think ul li:hover,
.panel-stage.stage-think ul li:focus-visible {
  border-color: var(--blue);
  border-left-color: var(--blue);
  color: var(--blue);
  transform: translateX(3px);
  box-shadow: 0 6px 18px -10px rgba(94,124,139,.6);
}
.panel-stage.stage-build ul li:hover,
.panel-stage.stage-build ul li:focus-visible {
  border-color: var(--orange);
  border-left-color: var(--orange);
  color: var(--orange-deep);
  transform: translateX(3px);
  box-shadow: 0 6px 18px -10px rgba(188,106,76,.6);
}
.panel-stage.stage-run ul li:hover,
.panel-stage.stage-run ul li:focus-visible {
  border-color: #7E7355;
  border-left-color: #7E7355;
  color: #635B43;
  transform: translateX(3px);
  box-shadow: 0 6px 18px -10px rgba(126,115,85,.6);
}

/* === Team === */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 2.5rem;
}
/* Solo lead: centre the single card instead of leaving an empty grid column. */
.team-grid-solo {
  grid-template-columns: min(100%, 640px);
  justify-content: center;
}
/* Lead consultant + SME network as two columns.
   Stacked by default (mobile/tablet); side by side on wide screens.
   The desktop tweaks live in a min-width query so they never leak into
   the existing <=760px mobile rules for .sme-showcase further down. */
.team-sme-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 961px) {
  .team-sme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  /* The grid supplies the top gap; drop the panel's own stacking margin. */
  .team-sme-grid > .sme-showcase { margin-top: 0; }
  /* Half-width now — stack the big stat over the copy (mirroring the
     mobile treatment) so the number and divider don't crowd the text. */
  .team-sme-grid .sme-showcase {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2.25rem;
    align-content: center;
  }
  .team-sme-grid .sme-stat-col {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 0 0 1.35rem;
    min-width: 0;
    width: 100%;
  }
  .team-sme-grid .sme-number { font-size: 4.25rem; }
  .team-sme-grid .sme-number-label { max-width: 280px; }
}
.team-member {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  display: grid;
  gap: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.team-member:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.team-member-primary,
.team-member-secondary {
  grid-template-columns: 150px 1fr;
  align-content: start;
}
/* Rectangular portraits, black-and-white at rest, warming to colour on hover
   (the brandbook imagery treatment — matches the SME matrix). */
.team-member img {
  width: 100%;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1);
  transition: filter .45s var(--ease);
}
.team-member:hover img,
.team-member:focus-within img { filter: grayscale(0); }
.team-member-primary img,
.team-member-secondary img {
  width: 150px;
  height: 188px;
}
.team-bio h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); margin-bottom: .15rem; letter-spacing: -.01em; }
.team-name {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.team-linkedin-link {
  color: var(--soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.team-linkedin-link:hover,
.team-linkedin-link:focus-visible {
  color: var(--clay);
  transform: translateY(-1px) scale(1.1);
}
.team-title {
  color: var(--clay);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .76rem;
  margin-bottom: .9rem;
}
.team-bio p { font-size: .97rem; color: var(--muted); line-height: 1.72; }

/* === SME Showcase === */
.sme-showcase {
  position: relative;
  margin-top: 2.5rem;
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(188, 106, 76,.22) 0%, rgba(188, 106, 76,0) 60%),
    linear-gradient(155deg, #20201C 0%, #2C2B26 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  padding: 2.75rem 3rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3.5rem;
  align-items: center;
  overflow: hidden;
}
.sme-stat-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-right: 3rem;
  border-right: 1px solid rgba(255,255,255,.1);
  min-width: 180px;
}
.sme-number {
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: 400;
  line-height: .95;
  color: var(--on-ink);
  letter-spacing: -.03em;
}
.sme-number-label {
  display: block;
  font-size: .78rem;
  font-weight: 400;
  color: rgba(255,255,255,.55);
  margin-top: .85rem;
  line-height: 1.5;
  max-width: 160px;
  letter-spacing: .02em;
}
.sme-info-col h3 {
  color: var(--on-ink);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -.01em;
  margin-bottom: .85rem;
}
.sme-info-col p {
  color: rgba(255,255,255,.72);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
  max-width: 56ch;
}
.sme-info-col strong { color: var(--on-ink); }
.sme-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.4rem;
}
/* The showcase sits on a dark ink panel: recolour the outline (secondary)
   button to read on dark, matching the closing CTA band treatment. */
.sme-showcase .button-mbb-outline {
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.28);
}
.sme-showcase .button-mbb-outline:hover {
  background: var(--card);
  color: var(--mbb-ink);
  border-color: var(--on-ink);
}

/* === Footer === */
.site-footer {
  background: var(--darker);
  color: rgba(255,255,255,.55);
  padding: 2.5rem 0;
  font-size: .87rem;
  border-top: 1px solid rgba(255,255,255,.05);
}
.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 1.5rem;
  flex-wrap: wrap;
}
.footer-socials {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--r-pill);
  color: rgba(255,255,255,.7);
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  transition: color .18s var(--ease), border-color .18s var(--ease),
              background .18s var(--ease), transform .25s var(--ease);
}
.footer-social-link:hover {
  color: var(--on-ink);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.28);
  text-decoration: none;
  transform: translateY(-2px) scale(1.06);
}
.footer-social-link svg { transition: transform .25s var(--ease); }
.footer-social-link:hover svg { transform: rotate(-6deg); }
.site-footer-copy { margin: 0; }
.site-footer-links {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
.site-footer a { color: rgba(255,255,255,.6); }
.site-footer a:hover { color: var(--on-ink); text-decoration: underline; }
.site-footer a:focus-visible { color: var(--on-ink); }

/* === 404 page === */
.page-404 { background: var(--mbb-ink); color: var(--on-ink); }
.not-found {
  position: relative;
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 5rem 2rem 4rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--mbb-ink);
}
.not-found::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 70% at 90% 12%, rgba(188, 106, 76, .32) 0%, rgba(188, 106, 76, 0) 65%),
    radial-gradient(70% 80% at 8% 100%, rgba(188, 106, 76, .22) 0%, rgba(188, 106, 76, 0) 60%),
    var(--ink);
  z-index: -2;
  pointer-events: none;
}
.not-found::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 80%);
  z-index: -1;
  pointer-events: none;
}
.not-found-inner { max-width: 42rem; position: relative; }
.not-found h1 {
  font-family: var(--mbb-display);
  font-size: clamp(3.5rem, 10vw, 6rem);
  font-weight: 400;
  letter-spacing: -.04em;
  margin-bottom: .5rem;
  color: var(--on-ink);
  line-height: 1;
}
.not-found p { margin-bottom: 1.75rem; color: rgba(255,255,255,.78); font-size: 1.05rem; }
.not-found-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin: 0 0 1rem;
}
.not-found-eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--mbb-accent);
}

/* === Legal pages: shared table styles ===
   Page-specific layout lives further below in the
   "Refactored inner pages" section. */
.legal main { padding: 3rem 0 5rem; }
.table-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.table-wrap th,
.table-wrap td {
  text-align: left;
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--border);
}
.table-wrap th {
  background: var(--bg-alt);
  font-weight: 700;
}
.table-wrap tr:last-child td { border-bottom: none; }

/* === Responsive === */
@media (max-width: 900px) {
  .hero-corner-logo {
    width: clamp(96px, 26vw, 140px);
    top: 1.1rem;
    left: 1.1rem;
  }
}

@media (max-width: 760px) {
  .container { padding: 0 1.25rem; }
  section { padding: 4rem 0; }
  .problem-grid,
  .how-we-work-flow { grid-template-columns: 1fr; }
  .flow-step { padding: 1.4rem 1.25rem 1.25rem; }
  .team-grid { grid-template-columns: 1fr; }
  .team-member,
  .team-member-primary,
  .team-member-secondary { grid-template-columns: 1fr; padding: 1.5rem; }
  .team-member img,
  .team-member-primary img,
  .team-member-secondary img {
    width: 140px;
    height: 175px;
    justify-self: center;
  }
  .panel-stages-grid {
    grid-template-columns: 1fr;
    padding: 1.25rem;
    gap: .25rem;
  }
  .panel-stage {
    padding: 1.1rem .25rem;
    border-bottom: 1px dashed var(--border);
  }
  .panel-stage:last-child { border-bottom: none; }
  .panel-stage-arrow {
    transform: rotate(90deg);
    padding: .25rem 0;
    align-self: center;
    justify-self: center;
  }
  .panel-stage-arrow::before,
  .panel-stage-arrow::after { display: none; }
  .panel-intro { padding: 1.75rem 1.5rem 1.5rem; }
  .panel-intro h3 { font-size: 1.5rem; }
  .tab-nav { display: none; }
  .tab-panel { display: block; margin-bottom: .85rem; }
  .tab-panel:last-child { margin-bottom: 0; }
  .accordion-btn { display: flex; }
  .tab-panel .panel-card { display: none; }
  .tab-panel.active .panel-card { display: block; }
  .sme-showcase { grid-template-columns: 1fr; padding: 1.85rem; gap: 1.5rem; }
  .sme-stat-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); padding-right: 0; padding-bottom: 1.5rem; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: auto; width: 100%; }
  .sme-number { font-size: 4rem; }
  .sme-number-label { max-width: none; margin-top: .25rem; }
  .menu-btn { display: inline-flex; }
  .nav-links { display: none; }
  .site-footer-inner {
    flex-direction: column;
    text-align: center;
  }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 1rem;
    top: calc(100% + .5rem);
    background: var(--card);
    padding: 1rem 1.25rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    min-width: 220px;
    box-shadow: var(--shadow-lg);
    gap: .75rem;
    align-items: stretch;
  }
  .accordion-btn {
    padding: 1rem 1.15rem;
    border-radius: var(--r);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .brand:hover img,
  .footer-social-link:hover,
  .footer-social-link:hover svg,
  .button-mbb:hover,
  .tab-btn:hover,
  .problem-item:hover,
  .flow-step:hover,
  .team-member:hover,
  .team-linkedin-link:hover {
    transform: none;
  }
  .button-mbb::after { display: none; }
}

.site-header.site-header-solid {
  position: sticky;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* Join page layout lives in the "Refactored inner pages" section. */

/* === Scroll reveal === */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* === PTD questionnaire === */
.ptd-main {
  min-height: calc(100vh - 84px);
  padding: 3.25rem 0 4.5rem;
  background:
    radial-gradient(900px 360px at 12% -8%, rgba(188, 106, 76,.18), rgba(188, 106, 76,0) 60%),
    radial-gradient(720px 320px at 95% 10%, rgba(188, 106, 76,.10), rgba(188, 106, 76,0) 65%),
    var(--paper-alt);
}
.ptd-section { max-width: 980px; }

.ptd-hero { margin-bottom: 1.6rem; }
.ptd-hero h1 {
  font-size: clamp(1.85rem, 3.4vw, 2.55rem);
  letter-spacing: -.02em;
  color: var(--dark);
  margin: .35rem 0 .75rem;
  position: relative;
  padding-top: .9rem;
}
.ptd-hero h1::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 36px; height: 2px;
  background: var(--clay);
  border-radius: 2px;
}
.ptd-hero .section-lead { margin-bottom: 1.4rem; max-width: 64ch; }
.ptd-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .85rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ptd-hero-meta li {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: .35rem .85rem;
  color: var(--muted);
  font-size: .9rem;
}
.ptd-hero-meta-num {
  font-weight: 700;
  color: var(--clay-deep);
}

.ptd-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem 1.8rem 1.8rem;
}

.ptd-progress-wrap { display: grid; gap: .55rem; margin-bottom: 1.4rem; }
.ptd-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  font-size: .92rem;
}
.ptd-progress-label {
  font-weight: 700;
  color: var(--dark);
  letter-spacing: .005em;
}
.ptd-progress-count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ptd-progress-bar {
  height: 8px;
  background: var(--bg-alt);
  border-radius: var(--r-pill);
  overflow: hidden;
  border: 1px solid var(--border);
}
.ptd-progress-bar > span {
  display: block;
  height: 100%;
  background: var(--clay);
  width: 14%;
  transition: width .35s var(--ease);
}

.ptd-form {
  display: grid;
  gap: 1.1rem;
}
.ptd-step {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  animation: ptdFadeIn .25s var(--ease);
}
@keyframes ptdFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ptd-step-title {
  font-weight: 400;
  color: var(--dark);
  margin: 0 0 .35rem;
  font-size: 1.35rem;
  letter-spacing: -.01em;
}

.ptd-form label {
  display: block;
  font-weight: 700;
  color: var(--dark);
  font-size: .92rem;
  letter-spacing: .005em;
  margin-bottom: .35rem;
}
.ptd-question { margin-bottom: 1rem; }
.ptd-question:last-child { margin-bottom: 0; }
.ptd-company-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}
.ptd-company-grid .ptd-question { margin-bottom: 0; }
@media (max-width: 560px) {
  .ptd-company-grid { grid-template-columns: 1fr; }
}
.ptd-language-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin-top: 1rem;
}
.ptd-form .ptd-language-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .85rem;
  min-height: 74px;
  margin: 0;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: 0 10px 24px rgba(94, 87, 76,.07);
  cursor: pointer;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.ptd-form .ptd-language-card:hover {
  transform: translateY(-1px);
  border-color: rgba(188, 106, 76,.45);
  box-shadow: 0 14px 30px rgba(94, 87, 76,.11);
}
.ptd-language-card input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ptd-language-card:has(input[type="radio"]:checked) {
  border-color: var(--clay);
  background: var(--clay-faint);
  box-shadow: 0 0 0 3px rgba(188, 106, 76,.14), 0 14px 30px rgba(94, 87, 76,.12);
}
.ptd-language-card:has(input[type="radio"]:focus-visible) {
  outline: 3px solid rgba(188, 106, 76,.24);
  outline-offset: 3px;
}
.ptd-language-card-visual {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ptd-language-flag {
  display: block;
  width: 32px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(94, 87, 76,.14);
}
.ptd-language-copy {
  display: grid;
  gap: .08rem;
  min-width: 0;
}
.ptd-language-name {
  color: var(--dark);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}
.ptd-language-region {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}
@media (max-width: 620px) {
  .ptd-language-options { grid-template-columns: 1fr; }
}

.ptd-form input,
.ptd-form select {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card);
  font: inherit;
  color: var(--text);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.ptd-form input:hover,
.ptd-form select:hover { border-color: var(--border-strong); }
.ptd-form input:focus,
.ptd-form select:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(188, 106, 76,.18);
}
.ptd-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236E6B61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 14px;
  padding-right: 2.4rem;
}

.ptd-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .85rem;
  margin-top: .5rem;
  padding: .85rem 1rem;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-weight: 400;
}
.ptd-consent input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .15rem;
  accent-color: var(--clay);
}
.ptd-consent span {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.5;
}
.ptd-consent a { color: var(--clay); font-weight: 700; }
.ptd-consent.is-invalid {
  border-color: var(--red);
  background: rgba(188, 106, 76,.04);
}

.ptd-help { color: var(--muted); margin-bottom: .85rem; line-height: 1.55; }
.ptd-help-highlight {
  display: inline-block;
  color: var(--clay-deep);
  font-weight: 700;
  background: rgba(188, 106, 76,.08);
  padding: .35rem .65rem;
  border-radius: var(--r-pill);
  font-size: .88rem;
  margin-bottom: .85rem;
}

.ptd-actions {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  margin-top: .5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.ptd-actions .button-mbb[hidden] { display: none; }

.ptd-footnote {
  margin-top: 1.1rem;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
}
.ptd-footnote a { font-weight: 700; }

/* Likert matrix */
.ptd-matrix-wrap {
  margin-top: .25rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
}
.ptd-likert-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .95rem;
}
.ptd-likert-table thead th {
  background: var(--bg-tint);
  border-bottom: 1px solid var(--border);
  padding: .7rem .55rem;
  text-align: center;
  vertical-align: top;
  font-weight: 700;
  color: var(--dark);
  font-size: .82rem;
}
.ptd-likert-table thead th:first-child {
  text-align: left;
  padding-left: 1rem;
}
.ptd-likert-num {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--clay-deep);
  line-height: 1;
}
.ptd-likert-key {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: .005em;
  margin-top: .2rem;
}
.ptd-likert-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 400;
  color: var(--text);
  padding: .85rem 1rem;
  width: 50%;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}
.ptd-likert-table tbody td {
  text-align: center;
  vertical-align: middle;
  padding: .35rem .25rem;
  border-bottom: 1px solid var(--border);
}
.ptd-likert-table thead th:not(:first-child),
.ptd-likert-table tbody td {
  width: 10%;
}
.ptd-likert-table tbody tr:last-child th,
.ptd-likert-table tbody tr:last-child td { border-bottom: 0; }
.ptd-likert-table tbody tr.is-answered { background: rgba(188, 106, 76,.045); }
.ptd-likert-table tbody tr:hover { background: rgba(188, 106, 76,.03); }

.ptd-radio-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 auto;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .15s var(--ease);
}
.ptd-radio-cell input[type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: initial;
  box-shadow: none;
  accent-color: var(--clay-deep);
  cursor: pointer;
}
.ptd-radio-cell input[type="radio"]:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}
.ptd-radio-cell.is-invalid input[type="radio"] { outline: 2px solid var(--red); outline-offset: 3px; }
.ptd-radio-mobile-label {
  display: none;
  font-size: .82rem;
  color: var(--muted);
  margin-left: .5rem;
}

@media (max-width: 720px) {
  .ptd-card { padding: 1.2rem; border-radius: var(--r); }
  .ptd-actions { flex-direction: column-reverse; align-items: stretch; }
  .ptd-actions .button-mbb { width: 100%; }
  .ptd-likert-table thead { display: none; }
  .ptd-likert-table,
  .ptd-likert-table tbody,
  .ptd-likert-table tr,
  .ptd-likert-table th,
  .ptd-likert-table td { display: block; width: 100%; }
  .ptd-likert-table tbody tr {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--border);
  }
  .ptd-likert-table tbody tr:last-child { border-bottom: 0; }
  .ptd-likert-table tbody th[scope="row"] {
    border: 0;
    padding: 0 0 .6rem;
    font-weight: 700;
    color: var(--dark);
  }
  .ptd-likert-table tbody td { padding: .15rem 0; border: 0; text-align: left; }
  .ptd-radio-cell {
    width: auto;
    height: auto;
    padding: .25rem .25rem;
    border-radius: 8px;
  }
  .ptd-radio-mobile-label { display: inline; }
}

/* Summary */
.ptd-summary {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-tint);
  padding: 1rem 1.1rem;
}
.ptd-summary-list { margin: 0; display: grid; gap: .65rem; }
.ptd-summary-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1fr;
  gap: 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border);
}
.ptd-summary-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ptd-summary-row dt { font-weight: 700; color: var(--dark); }
.ptd-summary-row dd { margin: 0; color: var(--muted); text-align: right; }
@media (max-width: 700px) {
  .ptd-summary-row { grid-template-columns: 1fr; gap: .25rem; }
  .ptd-summary-row dd { text-align: left; }
}

/* Thank-you */
.ptd-thankyou {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  display: grid;
  justify-items: center;
  gap: .7rem;
}
.ptd-thankyou-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  background: var(--clay);
  color: var(--on-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .4rem;
  box-shadow: 0 10px 24px rgba(188, 106, 76,.32);
}
.ptd-thankyou h1 {
  font-size: clamp(1.85rem, 3.4vw, 2.4rem);
  color: var(--dark);
  margin: 0;
}
.ptd-thankyou p {
  color: var(--muted);
  max-width: 52ch;
  line-height: 1.6;
  margin: 0;
}
.ptd-thankyou-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .9rem;
}

/* === Insights ===
   Color tokens for category accents (used across pills, chips, accents, featured) */
.insights-page {
  background: var(--bg-alt);
  /* Distinct hues spread across the warm-earth palette (+ the dusty-blue
     tertiary) so the five categories read apart at a glance, while each stays
     muted and on-brand. */
  --cat-strategy:   #A8543A;  /* terracotta red   */
  --cat-leadership: #4F7384;  /* dusty blue       */
  --cat-delivery:   #B07A2E;  /* amber / ochre    */
  --cat-data:       #6B6256;  /* warm taupe       */
  --cat-people:     #7C7E4A;  /* olive / sage     */
  --cat-default:    var(--clay);
}

/* Reading progress bar (post view) */
.insights-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.insights-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--clay);
  transition: width .12s linear;
}

/* Banner (shared by index + post views) */
.insights-banner {
  background: var(--mbb-ink);
  padding: clamp(4.5rem, 9vw, 6.5rem) 0 clamp(3.25rem, 6vw, 4.5rem);
  color: var(--on-ink);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.insights-banner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 70% at 90% 12%, rgba(188, 106, 76, .32) 0%, rgba(188, 106, 76, 0) 65%),
    radial-gradient(70% 80% at 8% 100%, rgba(188, 106, 76, .22) 0%, rgba(188, 106, 76, 0) 60%),
    var(--ink);
  z-index: -2;
  pointer-events: none;
}
.insights-banner::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 80%);
  z-index: -1;
  pointer-events: none;
  opacity: 1;
}
.insights-banner > .container { position: relative; }

/* Eyebrow */
.insights-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: 1rem;
}
.insights-eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--mbb-accent);
  border-radius: 2px;
}

/* Back link */
.insights-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255,255,255,.58);
  font-size: .88rem;
  margin-bottom: 1.1rem;
  transition: color .15s var(--ease);
}
.insights-back:hover { color: rgba(255,255,255,.9); }

/* Index banner */
.insights-banner-title {
  font-family: var(--mbb-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -.028em;
  color: var(--on-ink);
  line-height: 1.04;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.insights-post-banner .insights-banner-title { padding-top: 0; }
.insights-banner-lead {
  color: rgba(255,255,255,.7);
  font-size: 1.08rem;
  max-width: 60ch;
  margin: 0;
  line-height: 1.65;
}

/* Stats row */
.insights-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 1.85rem;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.4rem;
  list-style: none;
}
.insights-stats li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: 0 1.6rem 0 0;
  margin-right: 1.6rem;
  border-right: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.65);
}
.insights-stats li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.insights-stats strong {
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--on-ink);
  letter-spacing: -.02em;
  line-height: 1;
}
.insights-stats span {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* Post banner */
.insights-post-eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .85rem;
}
.insights-post-title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--on-ink);
  line-height: 1.08;
  max-width: 760px;
  margin-bottom: .85rem;
}
.insights-post-meta {
  color: rgba(255,255,255,.6);
  font-size: .92rem;
  margin: 0;
}
.insights-post-meta strong { color: rgba(255,255,255,.85); font-weight: 600; }

/* Category pill */
.insights-pill {
  --insights-pill-bg: color-mix(in srgb, var(--clay) 24%, transparent);
  --insights-pill-border: color-mix(in srgb, var(--clay) 52%, transparent);
  --insights-pill-color: color-mix(in srgb, var(--clay) 45%, var(--card));
  display: inline-block;
  background: var(--insights-pill-bg);
  border: 1px solid var(--insights-pill-border);
  color: var(--insights-pill-color);
  border-radius: var(--r-pill);
  padding: .22rem .7rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.insights-pill-strategy { --insights-pill-bg: color-mix(in srgb, var(--cat-strategy) 24%, transparent); --insights-pill-border: color-mix(in srgb, var(--cat-strategy) 52%, transparent); --insights-pill-color: color-mix(in srgb, var(--cat-strategy) 45%, var(--card)); }
.insights-pill-leadership { --insights-pill-bg: color-mix(in srgb, var(--cat-leadership) 24%, transparent); --insights-pill-border: color-mix(in srgb, var(--cat-leadership) 52%, transparent); --insights-pill-color: color-mix(in srgb, var(--cat-leadership) 45%, var(--card)); }
.insights-pill-delivery { --insights-pill-bg: color-mix(in srgb, var(--cat-delivery) 24%, transparent); --insights-pill-border: color-mix(in srgb, var(--cat-delivery) 52%, transparent); --insights-pill-color: color-mix(in srgb, var(--cat-delivery) 45%, var(--card)); }
.insights-pill-data { --insights-pill-bg: color-mix(in srgb, var(--cat-data) 24%, transparent); --insights-pill-border: color-mix(in srgb, var(--cat-data) 52%, transparent); --insights-pill-color: color-mix(in srgb, var(--cat-data) 45%, var(--card)); }
.insights-pill-people { --insights-pill-bg: color-mix(in srgb, var(--cat-people) 24%, transparent); --insights-pill-border: color-mix(in srgb, var(--cat-people) 52%, transparent); --insights-pill-color: color-mix(in srgb, var(--cat-people) 45%, var(--card)); }

/* Light-background variant (index cards) */
.insights-card .insights-pill-strategy { --insights-pill-bg: color-mix(in srgb, var(--cat-strategy) 12%, var(--card)); --insights-pill-border: color-mix(in srgb, var(--cat-strategy) 30%, var(--card)); --insights-pill-color: color-mix(in srgb, var(--cat-strategy) 80%, var(--ink)); }
.insights-card .insights-pill-leadership { --insights-pill-bg: color-mix(in srgb, var(--cat-leadership) 12%, var(--card)); --insights-pill-border: color-mix(in srgb, var(--cat-leadership) 30%, var(--card)); --insights-pill-color: color-mix(in srgb, var(--cat-leadership) 80%, var(--ink)); }
.insights-card .insights-pill-delivery { --insights-pill-bg: color-mix(in srgb, var(--cat-delivery) 12%, var(--card)); --insights-pill-border: color-mix(in srgb, var(--cat-delivery) 30%, var(--card)); --insights-pill-color: color-mix(in srgb, var(--cat-delivery) 80%, var(--ink)); }
.insights-card .insights-pill-data { --insights-pill-bg: color-mix(in srgb, var(--cat-data) 12%, var(--card)); --insights-pill-border: color-mix(in srgb, var(--cat-data) 30%, var(--card)); --insights-pill-color: color-mix(in srgb, var(--cat-data) 80%, var(--ink)); }
.insights-card .insights-pill-people { --insights-pill-bg: color-mix(in srgb, var(--cat-people) 12%, var(--card)); --insights-pill-border: color-mix(in srgb, var(--cat-people) 30%, var(--card)); --insights-pill-color: color-mix(in srgb, var(--cat-people) 80%, var(--ink)); }
.insights-card .insights-pill-default { --insights-pill-bg: color-mix(in srgb, var(--clay) 12%, var(--card)); --insights-pill-border: color-mix(in srgb, var(--clay) 30%, var(--card)); --insights-pill-color: color-mix(in srgb, var(--clay) 80%, var(--ink)); }

/* Read time label */
.insights-read-time {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  font-weight: 400;
}
.insights-card .insights-read-time {
  color: var(--soft);
}

/* RSS subscription link */
.insights-banner-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.insights-rss-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.08);
  color: var(--on-ink);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  padding: .6rem .85rem;
  text-transform: uppercase;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
  flex-shrink: 0;
}
.insights-rss-link:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.38);
  color: var(--on-ink);
  text-decoration: none;
  transform: translateY(-1px);
}
.insights-rss-link:focus-visible {
  outline: 3px solid rgba(255,255,255,.35);
  outline-offset: 3px;
}

/* Listing body wrapper */
.insights-body-wrap {
  padding: 2.5rem 0 5rem;
}

/* Post body: narrow reading column */
.insights-body-shell {
  max-width: min(780px, calc(100% - 3.5rem));
}

/* === Toolbar (search + secondary filters) === */
.insights-toolbar {
  display: flex;
  align-items: stretch;
  gap: .85rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.insights-search {
  position: relative;
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.insights-search:focus-within {
  border-color: var(--clay);
  box-shadow: 0 0 0 4px rgba(188, 106, 76,.15), var(--shadow-sm);
}
.insights-search > svg {
  position: absolute;
  left: 1rem;
  color: var(--soft);
  pointer-events: none;
}
.insights-search input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: .95rem 2.4rem .95rem 2.85rem;
  font: inherit;
  color: var(--dark);
  outline: none;
  border-radius: var(--r);
}
.insights-search input::placeholder { color: var(--soft); }
.insights-search-clear {
  position: absolute;
  right: .65rem;
  background: var(--bg-alt);
  border: 0;
  border-radius: var(--r-pill);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.insights-search-clear:hover { background: var(--border); color: var(--dark); }

.insights-secondary-filters {
  display: flex;
  align-items: stretch;
  gap: .65rem;
  flex-wrap: wrap;
}
.insights-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 0 .85rem;
  height: 100%;
  min-height: 50px;
  transition: border-color .15s var(--ease);
}
.insights-select:focus-within { border-color: var(--clay); box-shadow: 0 0 0 4px rgba(188, 106, 76,.15), var(--shadow-sm); }
.insights-select-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--soft);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-right: .55rem;
  pointer-events: none;
}
.insights-select select {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--dark);
  padding: .55rem 1.4rem .55rem 0;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6B61' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right .15rem center;
  background-size: 14px;
}

/* === Category chips === */
.insights-categories {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.insights-cat-chip {
  --chip-color: var(--cat-default);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem .55rem .75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--dark);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.insights-cat-chip:hover {
  border-color: var(--chip-color);
  color: var(--dark);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.insights-cat-chip.is-active {
  background: var(--chip-color);
  border-color: var(--chip-color);
  color: var(--on-ink);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--chip-color) 28%, transparent);
}
.insights-cat-chip-strategy   { --chip-color: var(--cat-strategy); }
.insights-cat-chip-leadership { --chip-color: var(--cat-leadership); }
.insights-cat-chip-delivery   { --chip-color: var(--cat-delivery); }
.insights-cat-chip-data       { --chip-color: var(--cat-data); }
.insights-cat-chip-people     { --chip-color: var(--cat-people); }
.insights-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip-color);
  flex-shrink: 0;
}
.insights-cat-chip.is-active .insights-cat-dot { background: rgba(255,255,255,.85); }
.insights-cat-dot-all {
  background: linear-gradient(135deg, var(--cat-strategy), var(--cat-leadership), var(--cat-people));
}
.insights-cat-count {
  font-size: .72rem;
  font-weight: 700;
  color: var(--soft);
  background: var(--bg-alt);
  border-radius: var(--r-pill);
  padding: .2rem .5rem;
  letter-spacing: .02em;
  min-width: 24px;
  text-align: center;
}
.insights-cat-chip:hover .insights-cat-count { background: var(--bg-alt); color: var(--muted); }
.insights-cat-chip.is-active .insights-cat-count {
  background: rgba(255,255,255,.18);
  color: var(--on-ink);
}

/* Result meta */
.insights-result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.insights-result-summary {
  font-size: .92rem;
  color: var(--muted);
}
.insights-result-summary strong { color: var(--dark); font-weight: 700; }
.insights-reset {
  font-size: .88rem;
  font-weight: 700;
  color: var(--clay);
}
.insights-reset:hover { color: var(--clay-deep); }

/* === Featured article === */
.insights-featured {
  --feat-color: var(--cat-default);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
  gap: 2rem;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.25rem 2.25rem 2rem;
  margin-bottom: 2rem;
  color: var(--dark);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.insights-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 240px at 100% 100%, color-mix(in srgb, var(--feat-color) 12%, transparent), transparent 60%);
  pointer-events: none;
}
.insights-featured::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--feat-color);
}
.insights-featured:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--feat-color) 35%, var(--border));
  color: var(--dark);
  text-decoration: none;
}
.insights-featured-strategy   { --feat-color: var(--cat-strategy); }
.insights-featured-leadership { --feat-color: var(--cat-leadership); }
.insights-featured-delivery   { --feat-color: var(--cat-delivery); }
.insights-featured-data       { --feat-color: var(--cat-data); }
.insights-featured-people     { --feat-color: var(--cat-people); }
.insights-featured-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
}
.insights-featured-eyebrow {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.insights-featured-flag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--feat-color);
}
.insights-featured-flag::before {
  content: "★";
  font-size: .8rem;
  letter-spacing: 0;
}
.insights-featured-title {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.15;
  color: var(--dark);
  margin: 0;
}
.insights-featured:hover .insights-featured-title { color: var(--feat-color); }
.insights-featured-excerpt {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  max-width: 62ch;
}
.insights-featured-meta {
  font-size: .86rem;
  color: var(--soft);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.insights-featured-meta strong { color: var(--dark); font-weight: 700; }
.insights-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .35rem;
  font-size: .92rem;
  font-weight: 700;
  color: var(--feat-color);
  letter-spacing: .01em;
}
.insights-featured-cta svg { transition: transform .2s var(--ease); }
.insights-featured:hover .insights-featured-cta svg { transform: translateX(4px); }
.insights-featured-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px dashed color-mix(in srgb, var(--feat-color) 25%, var(--border));
  color: color-mix(in srgb, var(--feat-color) 62%, transparent);
  user-select: none;
}
.insights-featured-icon {
  width: clamp(6rem, 11vw, 8.25rem);
  height: clamp(6rem, 11vw, 8.25rem);
  opacity: .78;
  filter: drop-shadow(0 16px 28px color-mix(in srgb, var(--feat-color) 18%, transparent));
  transform: translateY(-2px);
}

/* === Insights card grid === */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1.4rem;
}

/* Insights card */
.insights-card {
  --card-color: var(--cat-default);
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.75rem 1.6rem 1.4rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.insights-card[data-category-class="strategy"]   { --card-color: var(--cat-strategy); }
.insights-card[data-category-class="leadership"] { --card-color: var(--cat-leadership); }
.insights-card[data-category-class="delivery"]   { --card-color: var(--cat-delivery); }
.insights-card[data-category-class="data"]       { --card-color: var(--cat-data); }
.insights-card[data-category-class="people"]     { --card-color: var(--cat-people); }
.insights-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-color);
  opacity: .85;
}
.insights-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--card-color) 25%, var(--border));
}
.insights-card-new { border-color: color-mix(in srgb, var(--card-color) 30%, var(--border)); }
.insights-card-flag {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-ink);
  background: var(--card-color);
  padding: .26rem .5rem;
  border-radius: var(--r-pill);
  line-height: 1;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--card-color) 30%, transparent);
}
.insights-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .25rem;
}
.insights-card-new .insights-card-top { padding-right: 3rem; }
.insights-card-title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.012em;
  margin: 0;
  color: var(--dark);
}
.insights-card-title a { color: inherit; }
.insights-card:hover .insights-card-title a,
.insights-card-title a:hover { color: var(--card-color); }
.insights-card-excerpt {
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.6;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insights-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--soft);
  padding-top: .85rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.insights-card-byline { font-weight: 600; color: var(--muted); }
.insights-card.is-hidden { display: none !important; }

/* Empty + search-empty states */
.insights-empty,
.insights-search-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.insights-search-empty[hidden] { display: none !important; }
.insights-empty svg { color: var(--border-strong); margin-bottom: .5rem; }
.insights-empty p,
.insights-search-empty p { margin: 0; }
.insights-empty strong,
.insights-search-empty strong { color: var(--dark); }
.insights-link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--clay);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.insights-link-btn:hover { color: var(--clay-deep); }

/* === Related articles === */
.insights-related {
  border-top: 1px solid var(--border);
  background: var(--card);
  padding: 3.25rem 0 4rem;
}
.insights-related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.insights-related-title {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--dark);
  margin: 0;
  position: relative;
  padding-top: .9rem;
}
.insights-related-title::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 2px;
  background: var(--clay);
  border-radius: 2px;
}
.insights-related-all {
  font-size: .9rem;
  font-weight: 700;
  color: var(--clay);
}
.insights-related-all:hover { color: var(--clay-deep); }
.insights-grid-related { gap: 1.2rem; }

/* Prose styles for article content */
.insights-prose {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.75;
}
.insights-prose h1 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 2.5rem 0 .9rem;
  color: var(--dark);
}
.insights-prose h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -.015em;
  margin: 2.25rem 0 .75rem;
  color: var(--dark);
  position: relative;
  padding-top: .9rem;
}
.insights-prose h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 2px;
  background: var(--clay);
  border-radius: 2px;
}
.insights-prose h3 {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.005em;
  margin: 1.75rem 0 .5rem;
  color: var(--dark);
}
.insights-prose p { margin-bottom: 1.15rem; }
.insights-prose p:last-child { margin-bottom: 0; }
.insights-prose ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.15rem;
}
.insights-prose li { margin-bottom: .4rem; }
.insights-prose a { text-decoration: underline; text-underline-offset: 2px; }
.insights-prose strong { color: var(--dark); }
.insights-prose code {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1rem .35rem;
  font-size: .88em;
  font-family: var(--font-mono);
}

/* Post footer (back link + CTA row) */
.insights-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
.insights-back-link {
  font-size: .9rem;
  font-weight: 700;
  color: var(--clay);
  transition: color .15s var(--ease);
}
.insights-back-link:hover { color: var(--clay-deep); }

/* Responsive */
@media (max-width: 900px) {
  .insights-featured {
    grid-template-columns: 1fr;
    padding: 1.85rem 1.6rem 1.6rem;
  }
  .insights-featured-mark {
    border-left: 0;
    border-top: 1px dashed color-mix(in srgb, var(--feat-color) 25%, var(--border));
    padding-top: 1rem;
    font-size: clamp(5rem, 18vw, 7rem);
    justify-self: end;
    width: 100%;
    justify-content: flex-end;
  }
}
@media (max-width: 760px) {
  .insights-banner { padding: 2.75rem 0 2.25rem; }
  .insights-body-wrap { padding: 1.75rem 0 3.5rem; }
  .insights-toolbar { flex-direction: column; }
  .insights-secondary-filters { width: 100%; }
  .insights-select { flex: 1 1 auto; }
  .insights-categories { gap: .45rem; }
  .insights-cat-chip { font-size: .85rem; padding: .5rem .75rem .5rem .65rem; }
  .insights-grid { gap: 1rem; }
  .insights-card { padding: 1.5rem 1.35rem 1.25rem; }
  .insights-featured { padding: 1.6rem 1.4rem 1.4rem; }
  .insights-featured-title { font-size: clamp(1.4rem, 6vw, 1.7rem); }
  .insights-result-meta { padding-bottom: .85rem; margin-bottom: 1.1rem; }
  .insights-post-title { font-size: clamp(1.65rem, 6vw, 2.2rem); }
  .insights-post-footer { flex-direction: column; align-items: flex-start; }
  .insights-related { padding: 2.5rem 0 3rem; }
}

/* === PTD report template === */
.ptd-report-page { background: var(--bg-alt); }
.ptd-report-main {
  padding: 2.5rem 0 4rem;
  background:
    radial-gradient(900px 320px at 18% -10%, rgba(188, 106, 76,.16), rgba(188, 106, 76,0) 60%),
    radial-gradient(700px 280px at 92% 0%, rgba(188, 106, 76,.10), rgba(188, 106, 76,0) 60%),
    var(--paper-alt);
}
.ptd-report {
  max-width: 1000px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 0 0 2.25rem;
  display: grid;
  gap: 1.6rem;
  overflow: hidden;
}
.ptd-report > section,
.ptd-report > footer { padding-left: 2.25rem; padding-right: 2.25rem; }

.ptd-report-cover {
  position: relative;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(188, 106, 76,.18) 0%, rgba(188, 106, 76,0) 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(188, 106, 76,.22) 0%, rgba(188, 106, 76,0) 60%),
    var(--ink);
  color: var(--on-ink);
  padding: 2.25rem 2.25rem 1.75rem;
  overflow: hidden;
}
.ptd-report-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 80px);
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 25%, transparent 75%);
  pointer-events: none;
}
.ptd-report-cover > * { position: relative; }
.ptd-report-cover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.ptd-report-brand img { height: 28px; }
.ptd-report-tag {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.ptd-kicker {
  display: inline-block;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay-deep);
  font-size: .76rem;
  border: 1px solid rgba(188, 106, 76,.28);
  background: rgba(188, 106, 76,.08);
  border-radius: var(--r-pill);
  padding: .25rem .7rem;
  margin-bottom: .85rem;
}
.ptd-report-cover .ptd-kicker {
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}
.ptd-report-cover h1 {
  font-size: clamp(1.95rem, 3.6vw, 2.65rem);
  letter-spacing: -.02em;
  color: var(--on-ink);
  margin: 0 0 .4rem;
}
.ptd-report-subtitle {
  color: rgba(255,255,255,.78);
  max-width: 64ch;
  margin: 0;
}
.ptd-meta-grid {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .65rem;
}
.ptd-meta-grid > div {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r);
  padding: .6rem .85rem;
}
.ptd-meta-grid dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.6);
  margin-bottom: .15rem;
}
.ptd-meta-grid dd {
  margin: 0;
  font-weight: 700;
  color: var(--on-ink);
  font-size: .98rem;
}
.ptd-country-flag {
  display: inline-block;
  width: 20px;
  height: 15px;
  margin-left: .4rem;
  border-radius: 2px;
  vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35);
}

.ptd-report h2 {
  font-size: 1.35rem;
  letter-spacing: -.01em;
  color: var(--dark);
  margin: 0 0 .8rem;
  position: relative;
  padding-top: .9rem;
}
.ptd-report h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 2px;
  background: var(--clay);
  border-radius: 2px;
}

/* Score band */
.ptd-scoreband {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  gap: 1.5rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.ptd-scoreband::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 90% at 100% 0%, rgba(188, 106, 76,.28) 0%, rgba(188, 106, 76,0) 60%);
  pointer-events: none;
}
.ptd-scoreband > * { position: relative; }
.ptd-scoreband h2 {
  color: var(--on-ink);
  margin: 0 0 .5rem;
  padding-top: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.ptd-scoreband h2::before { display: none; }
.ptd-scoreband-gauge {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
}
.ptd-scoreband-value {
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--on-ink);
  letter-spacing: -.02em;
}
.ptd-scoreband-suffix {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  margin-left: .15rem;
}
.ptd-scoreband-gauge meter {
  width: 100%;
  height: 10px;
  margin-top: .85rem;
}
.ptd-scoreband-gauge meter::-webkit-meter-bar {
  background: rgba(255,255,255,.12);
  border: 0;
  border-radius: var(--r-pill);
}
.ptd-scoreband-gauge meter::-webkit-meter-optimum-value,
.ptd-scoreband-gauge meter::-webkit-meter-suboptimum-value,
.ptd-scoreband-gauge meter::-webkit-meter-even-less-good-value {
  border-radius: var(--r-pill);
  background: var(--clay);
}
.ptd-scoreband-summary p { margin: 0 0 .55rem; color: rgba(255,255,255,.86); }
.ptd-scoreband-summary p:last-child { margin-bottom: 0; }
.ptd-band-pill {
  display: inline-block;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-pill);
  padding: .25rem .8rem;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
  color: var(--on-ink);
  margin-bottom: .6rem;
}
.ptd-band-pill[data-band="strong"] { background: rgba(94,124,139,.22); border-color: rgba(94,124,139,.55); }
.ptd-band-pill[data-band="good"] { background: rgba(140,122,86,.22); border-color: rgba(140,122,86,.55); }
.ptd-band-pill[data-band="targeted"] { background: rgba(188,106,76,.22); border-color: rgba(188,106,76,.55); }
.ptd-band-pill[data-band="foundational"] { background: rgba(162,87,59,.22); border-color: rgba(162,87,59,.55); }

@media (max-width: 720px) {
  .ptd-scoreband { grid-template-columns: 1fr; text-align: center; }
}

/* Area dashboard */
.ptd-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .75rem;
}
.ptd-area-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .95rem 1rem 1.05rem;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-rows: minmax(2.2rem, auto) auto auto auto;
  align-content: start;
  gap: .35rem;
}
.ptd-area-card h3 {
  font-size: .92rem;
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ptd-area-score {
  display: flex;
  align-items: baseline;
  gap: .15rem;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--clay-deep);
  line-height: 1;
  letter-spacing: -.01em;
}
.ptd-area-score-suffix {
  font-size: .95rem;
  font-weight: 700;
  color: var(--fg4);
  letter-spacing: 0;
}
.ptd-area-card meter {
  width: 100%;
  height: 8px;
  margin-top: .35rem;
}
.ptd-area-card meter::-webkit-meter-bar { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-pill); }
.ptd-area-card meter::-webkit-meter-optimum-value,
.ptd-area-card meter::-webkit-meter-suboptimum-value,
.ptd-area-card meter::-webkit-meter-even-less-good-value {
  border-radius: var(--r-pill);
  background: var(--clay);
}
.ptd-area-band {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ptd-area-band[data-band="strong"] { color: var(--blue); }
.ptd-area-band[data-band="good"] { color: #8C7A56; }
.ptd-area-band[data-band="targeted"] { color: var(--orange); }
.ptd-area-band[data-band="foundational"] { color: var(--clay-deep); }

/* Action plan */
.ptd-action-grid {
  display: grid;
  gap: .85rem;
}
.ptd-action-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: .55rem;
}
.ptd-action-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.ptd-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  border-radius: var(--r-pill);
  padding: .25rem .6rem;
  background: var(--clay);
  color: var(--on-ink);
}
.ptd-priority[data-priority="P1"] { background: var(--clay-deep); }
.ptd-priority[data-priority="P2"] { background: var(--orange); }
.ptd-priority[data-priority="P3"] { background: #8C7A56; }

.ptd-action-matrix {
  margin: .35rem 0 1rem;
}
.ptd-action-matrix-grid {
  display: grid;
  grid-template-columns: 56px 1fr 1fr;
  grid-template-rows: 1fr 1fr auto;
  gap: 0;
  align-items: stretch;
}
.ptd-matrix-axis {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ptd-matrix-axis-y {
  grid-row: 1 / 3;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  justify-self: center;
  align-self: center;
}
.ptd-matrix-axis-x {
  grid-column: 2 / 4;
  text-align: center;
  padding-top: .55rem;
}
.ptd-matrix-quadrant {
  border: 1px solid var(--border);
  background: var(--card);
  padding: .7rem .8rem;
  aspect-ratio: 1 / 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}
.ptd-matrix-quadrant:nth-of-type(2) { border-radius: 12px 0 0 0; }
.ptd-matrix-quadrant:nth-of-type(3) { border-radius: 0 12px 0 0; border-left: 0; }
.ptd-matrix-quadrant:nth-of-type(4) { border-radius: 0 0 0 12px; border-top: 0; }
.ptd-matrix-quadrant:nth-of-type(5) { border-radius: 0 0 12px 0; border-left: 0; border-top: 0; }
.ptd-action-matrix .ptd-priority {
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
}
.ptd-matrix-quadrant h3 {
  margin: 0 0 .45rem;
  font-size: .8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ptd-matrix-codes {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  min-height: 1.65rem;
  align-content: start;
}
@media (max-width: 760px) {
  .ptd-action-matrix-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: .55rem; }
  .ptd-matrix-axis-y { writing-mode: initial; transform: none; }
  .ptd-matrix-axis-x { grid-column: auto; }
  .ptd-matrix-quadrant {
    aspect-ratio: auto;
    min-height: 9rem;
    border: 1px solid var(--border);
    border-radius: 12px;
  }
}
.ptd-action-area {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.ptd-action-id {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--soft);
  letter-spacing: .04em;
}
.ptd-action-text {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}
.ptd-action-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .85rem;
}
.ptd-action-meta li {
  color: var(--muted);
}
.ptd-action-meta li strong {
  color: var(--dark);
  font-weight: 700;
  margin-right: .25rem;
}
.ptd-action-pips {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  margin-left: .15rem;
}
.ptd-action-pip {
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  display: inline-block;
}
.ptd-action-pip.is-on { background: var(--blue); }
.ptd-action-pip.is-on[data-tone="effort"] { background: var(--orange); }

/* Disclaimer */
.ptd-disclaimer {
  border-left: 3px solid var(--clay);
  background: var(--bg-tint);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}
.ptd-disclaimer p { margin-bottom: .55rem; }
.ptd-disclaimer p:last-child { margin-bottom: 0; }

.ptd-report-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  margin: 0 2.25rem;
}
.ptd-report-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.ptd-report-footer p { margin: 0; color: var(--muted); font-size: .85rem; }

/* Print styling — produces a clean PDF when users hit "Download report" */
@media print {
  .site-header,
  .site-footer,
  .ptd-report-footer .button-mbb { display: none !important; }
  .ptd-report-page,
  .ptd-report-main { background: var(--card); padding: 0; }
  .ptd-report {
    box-shadow: none;
    border: 0;
    border-radius: 0;
    max-width: 100%;
    padding: 0;
  }
  .ptd-report-cover { border-radius: 0; padding: 1.5rem 1.5rem 1rem; }
  .ptd-action-card,
  .ptd-area-card { break-inside: avoid; box-shadow: none; }
  .ptd-scoreband { break-inside: avoid; }
}

/* ============================================================ */
/* === MBB-style homepage refresh ============================ */
/* ============================================================ */

/* Token additions used by the new homepage. Older pages keep the
   original tokens above; these only extend, they do not replace. */
:root {
  --mbb-ink: var(--ink);             /* warm near-black dark surfaces */
  --mbb-ink-soft: var(--ink-soft);
  --mbb-rule: rgba(32, 32, 28, .08);
  --mbb-rule-strong: rgba(32, 32, 28, .14);
  --mbb-accent: var(--clay);
  --mbb-accent-deep: var(--clay-deep);
  --mbb-display: var(--font-display);
}

/* Homepage-only baseline tweaks */
.home-mbb { background: var(--paper); }
.home-mbb section { padding: 7rem 0; }
.home-mbb section.hero-mbb,
.home-mbb section.pullquote,
.home-mbb section.cta-band { padding: 0; }

/* Section header rhythm — disable the legacy 36px bar so the new
   numbered eyebrow can stand on its own. */
.home-mbb section > .container > h2 { padding-top: 0; }
.home-mbb section > .container > h2::before { content: none; }

/* ----- Hero ------------------------------------------------- */
.hero-mbb {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  min-height: 92dvh;
  background: var(--paper);
  color: var(--fg1);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.hero-mbb::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -3;
  background:
    radial-gradient(72% 56% at 50% -8%, var(--clay-faint) 0%, transparent 60%),
    var(--paper);
}
.hero-mbb-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -2;
  opacity: .65;
}
.hero-mbb-orb--a {
  width: 56vw; max-width: 780px; aspect-ratio: 1 / 1;
  top: -14%;
  right: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(188, 106, 76, .65) 0%, rgba(188, 106, 76, 0) 70%);
  animation: heroMbbOrbA 24s ease-in-out infinite alternate;
}
.hero-mbb-orb--b {
  width: 50vw; max-width: 660px; aspect-ratio: 1 / 1;
  bottom: -22%;
  left: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(188, 106, 76, .55) 0%, rgba(188, 106, 76, 0) 70%);
  animation: heroMbbOrbB 28s ease-in-out infinite alternate;
}
@keyframes heroMbbOrbA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-5%, 6%, 0) scale(1.12); }
}
@keyframes heroMbbOrbB {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(7%, -5%, 0) scale(1.1); }
}
.hero-mbb-grid {
  position: absolute; inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(rgba(32, 32, 28, .05) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(60% 70% at 50% 45%, #000 30%, transparent 88%);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 45%, #000 30%, transparent 88%);
  pointer-events: none;
  animation: heroMbbGridDrift 36s linear infinite;
}
@keyframes heroMbbGridDrift {
  0%   { background-position: 0 0; opacity: .72; }
  50%  { opacity: .95; }
  100% { background-position: 30px 30px; opacity: .72; }
}
.hero-mbb-shape {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(620px, 90vw, 1200px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .03),
    0 0 0 80px rgba(255, 255, 255, .015) inset;
  pointer-events: none;
  opacity: .55;
  animation: heroMbbHalo 30s ease-in-out infinite alternate;
}
.hero-mbb-shape::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 50%;
}
.hero-mbb-shape::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background:
    conic-gradient(from 120deg, rgba(255,255,255,0), rgba(188, 106, 76,.14), rgba(255,255,255,0) 30%, rgba(188, 106, 76,.11), rgba(255,255,255,0) 58%);
  mask: radial-gradient(circle, transparent 56%, #000 57%, #000 60%, transparent 61%);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%, #000 60%, transparent 61%);
  animation: heroMbbRingSweep 42s linear infinite;
}
.hero-mbb-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: .7;
  mask-image: radial-gradient(75% 75% at 50% 50%, #000 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 45%, transparent 100%);
}
@keyframes heroMbbHalo {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  100% { transform: translate(-50%, -50%) rotate(5deg) scale(1.035); }
}
@keyframes heroMbbRingSweep {
  to { transform: rotate(360deg); }
}

.hero-mbb-inner {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-top: clamp(7rem, 16vh, 10rem);
  padding-bottom: clamp(2rem, 5vh, 4rem);
}

.hero-mbb-content {
  position: relative;
  max-width: 960px;
}

.hero-mbb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg3);
  margin: 0 0 1.15rem;
}
.hero-mbb-eyebrow::before {
  content: "";
  width: 1.8em;
  height: 1px;
  background: var(--clay);
}
.hero-mbb-title {
  font-family: var(--mbb-display);
  font-weight: 300;
  color: var(--fg1);
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 1.03;
  letter-spacing: -.02em;
  margin: 0 0 clamp(1.35rem, 2.6vw, 2.1rem);
  text-wrap: balance;
}
.hero-title-regular {
  font-weight: 300;
  font-style: normal;
  color: var(--fg3);
  letter-spacing: -.02em;
  padding: 0 .08em;
}

.hero-mbb-lead {
  font-size: clamp(1.1rem, 1.55vw, 1.35rem);
  line-height: 1.6;
  color: var(--fg2);
  font-weight: 400;
  max-width: 60ch;
  margin: 0;
}
.hero-mbb-lead strong { color: var(--fg1); font-weight: 500; }

.hero-mbb-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
  justify-self: end;
  width: min(100%, 280px);
}
.hero-mbb-actions .button-mbb {
  justify-content: center;
  width: 100%;
}

/* ----- Buttons (canonical: two variants) -------------------
   The site has exactly two button variants, per the brandbook
   (brandbook/components.css): a clay-filled PRIMARY and a hairline
   OUTLINE secondary. Both share the .button-mbb base (radius --r,
   trailing-arrow support, hover shine). On dark surfaces the outline
   variant is recoloured to white (see .cta-band-actions / .sme-showcase).
   ------------------------------------------------------------ */
.button-mbb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 1rem 1.6rem;
  font-family: inherit;
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .005em;
  border-radius: var(--r);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  cursor: pointer;
}
/* Diagonal shine sweep that crosses the button on hover. */
.button-mbb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-110%);
  transition: transform .55s var(--ease);
  pointer-events: none;
}
.button-mbb:hover::after { transform: translateX(110%); }
.button-mbb-outline::after { background: linear-gradient(110deg, rgba(32,32,28,0) 30%, rgba(32,32,28,.08) 50%, rgba(32,32,28,0) 70%); }
/* Variant 1 — Primary (clay fill) */
.button-mbb-primary {
  background: var(--mbb-accent);
  color: var(--on-ink);
  box-shadow: var(--shadow-cta-red);
}
.button-mbb-primary:hover {
  background: var(--mbb-accent-deep);
  color: var(--on-ink);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(188,106,76,.42);
}
/* Variant 2 — Secondary (hairline outline) */
.button-mbb-outline {
  background: transparent;
  color: var(--mbb-ink);
  border-color: var(--mbb-rule-strong);
}
.button-mbb-outline:hover {
  background: var(--mbb-ink);
  color: var(--on-ink);
  border-color: var(--mbb-ink);
  text-decoration: none;
}
.button-mbb-arrow {
  display: inline-block;
  transition: transform .2s var(--ease);
}
.button-mbb:hover .button-mbb-arrow { transform: translateX(4px); }
/* Full-width buttons inside stacked action rows */
.button-mbb-block { width: 100%; }


/* ----- Section header pattern (numbered eyebrow) ------------ */
.section-mbb-head {
  max-width: 760px;
  margin: 0 0 3.5rem;
}
.section-mbb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mbb-ink);
  margin: 0 0 1.6rem;
}
.section-mbb-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 .55rem;
  border-radius: 2px;
  background: var(--mbb-ink);
  color: var(--on-ink);
  font-size: .82rem;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.section-mbb-title {
  font-family: var(--mbb-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--mbb-ink);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.section-mbb-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 64ch;
  margin: 0;
  font-weight: 400;
}
.section-mbb-lead strong { color: var(--mbb-ink); font-weight: 700; }

/* Homepage section surfaces: odd sections stay white; even sections
   move to a cool slate-tinted plane so 01–04 alternate with a clear,
   repeatable transition logic. */
.home-mbb .section-mbb {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-top: 1px solid var(--border);
}
.home-mbb .section-mbb.section-alt {
  background: var(--paper-alt);
  border-top-color: var(--border);
  border-bottom: 1px solid var(--border);
}
.home-mbb #problem,
.home-mbb #offerings {
  background:
    radial-gradient(42rem 30rem at 92% 10%, rgba(188, 106, 76, .06), transparent 64%),
    var(--paper);
}
.home-mbb #team {
  background:
    radial-gradient(44rem 32rem at 88% 8%, rgba(188, 106, 76, .07), transparent 62%),
    var(--paper-alt);
}

/* ----- Problem grid: editorial cards ------------------------- */
.home-mbb #problem {
  position: relative;
}
.home-mbb .problem-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}
.home-mbb #problem .section-mbb-head {
  position: sticky;
  top: 7rem;
  max-width: 560px;
  margin: 0;
  padding: 0;
}
.home-mbb #problem .section-mbb-lead {
  max-width: 52ch;
  padding-left: 1.25rem;
  border-left: 3px solid rgba(188, 106, 76, .24);
}
.home-mbb .problem-grid {
  position: relative;
  margin-top: 0;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.home-mbb .problem-grid::before {
  content: "";
  position: absolute;
  top: 1.75rem;
  bottom: 1.75rem;
  left: 1.2rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(188, 106, 76, 0), rgba(188, 106, 76, .26), rgba(188, 106, 76, 0));
}
.home-mbb .problem-item {
  position: relative;
  border: 1px solid var(--mbb-rule);
  border-radius: var(--r-lg);
  background: var(--card);
  padding: clamp(1.35rem, 2.4vw, 2rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem clamp(.95rem, 2.2vw, 1.35rem);
  align-items: start;
}
.home-mbb .problem-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--mbb-rule-strong);
  background: var(--card);
}
.home-mbb .problem-item::after { content: none; }
.problem-item-mark {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid rgba(188, 106, 76, .32);
  box-shadow: 0 0 0 6px var(--card), 0 10px 28px rgba(32, 32, 28, .1);
}
.problem-item-mark::before,
.problem-item-mark::after {
  content: "";
  grid-area: 1 / 1;
  border-radius: 50%;
}
.problem-item-mark::before {
  width: .72rem;
  height: .72rem;
  background: var(--mbb-accent);
  box-shadow: 0 0 0 5px rgba(188, 106, 76, .12);
  animation: problemBulletGlow 5.2s var(--ease) infinite;
}
.problem-item-mark::after {
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid rgba(188, 106, 76, .34);
  opacity: 0;
  transform: scale(.82);
  animation: problemBulletRipple 5.2s var(--ease) infinite;
}
.home-mbb .problem-item:nth-child(2) .problem-item-mark::before,
.home-mbb .problem-item:nth-child(2) .problem-item-mark::after { animation-delay: .8s; }
.home-mbb .problem-item:nth-child(3) .problem-item-mark::before,
.home-mbb .problem-item:nth-child(3) .problem-item-mark::after { animation-delay: 1.6s; }
@keyframes problemBulletGlow {
  0%, 72%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(188, 106, 76, .12);
  }
  18% {
    transform: scale(1.08);
    box-shadow: 0 0 0 7px rgba(188, 106, 76, .16);
  }
}
@keyframes problemBulletRipple {
  0%, 58%, 100% {
    opacity: 0;
    transform: scale(.82);
  }
  12% {
    opacity: .48;
  }
  32% {
    opacity: 0;
    transform: scale(1.62);
  }
}
.home-mbb .problem-item-copy {
  min-width: 0;
  padding-top: .15rem;
}
.home-mbb .problem-item h3 {
  font-size: clamp(1.18rem, 1.8vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--mbb-ink);
  margin: 0 0 .65rem;
  line-height: 1.22;
}
.home-mbb .problem-item p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 58ch;
  margin: 0;
}

/* ----- Pull quote / point of view --------------------------- */
.pullquote {
  background: var(--card);
  padding: 6rem 0 !important;
  border-top: 1px solid var(--mbb-rule);
  border-bottom: 1px solid var(--mbb-rule);
}
.pullquote-inner {
  max-width: 920px;
  text-align: left;
}
.pullquote-eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--mbb-accent);
  margin: 0 0 1.5rem;
}
.pullquote-text {
  position: relative;
  font-family: var(--mbb-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -.018em;
  color: var(--mbb-ink);
  margin: 0 0 2rem;
  padding-left: 2.4rem;
  border-left: 3px solid var(--mbb-accent);
  text-wrap: balance;
}
.pullquote-mark {
  display: none;
}
.pullquote-attribution {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  padding-left: 2.4rem;
}
@media (max-width: 600px) {
  .pullquote { padding: 4rem 0 !important; }
  .pullquote-text { padding-left: 1.4rem; }
  .pullquote-attribution { padding-left: 1.4rem; }
}

/* ----- How we work — numbered flow steps -------------------- */
.home-mbb .how-we-work-flow {
  margin-top: 1rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1.25rem;
}
.home-mbb .flow-step {
  position: relative;
  background: var(--card);
  border: 1px solid var(--mbb-rule);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem 1.85rem;
  box-shadow: none;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.home-mbb .flow-step::before {
  height: 4px;
  left: 0;
  right: 0;
  border-radius: 0;
}
.home-mbb .flow-step:hover {
  transform: translateY(-3px);
  border-color: var(--mbb-rule-strong);
  box-shadow: 0 16px 32px rgba(32, 32, 28,.06);
}
.flow-step-num {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}
.home-mbb .flow-step h3 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--mbb-ink);
  margin: .5rem 0 .55rem;
}
.home-mbb .flow-step p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ----- Insights smart CTA popup ----------------------------- */
.insights-smart-cta {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  width: min(25rem, calc(100vw - 2rem));
  padding: 1.35rem;
  color: var(--on-ink);
  background:
    linear-gradient(135deg, rgba(32, 32, 28, .96), rgba(32, 32, 28, .98)),
    radial-gradient(circle at top right, rgba(188, 106, 76, .34), transparent 42%);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r);
  box-shadow: 0 24px 70px rgba(32, 32, 28, .34);
  transform: translateY(1.25rem) scale(.98);
  opacity: 0;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.insights-smart-cta[hidden] { display: none; }
.insights-smart-cta.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.insights-smart-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255,255,255,.12), transparent 36%);
  pointer-events: none;
}
.insights-smart-cta-close {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.insights-smart-cta-close:hover,
.insights-smart-cta-close:focus-visible {
  color: var(--on-ink);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
  outline: none;
}
.insights-smart-cta-eyebrow {
  margin: 0 2.1rem .65rem 0;
  color: var(--mbb-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.insights-smart-cta-title {
  margin: 0 2.1rem .65rem 0;
  color: var(--on-ink);
  font-family: var(--mbb-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.insights-smart-cta-copy {
  margin: 0 0 1.05rem;
  color: rgba(255,255,255,.76);
  font-size: .95rem;
  line-height: 1.55;
}
.insights-smart-cta-link {
  width: 100%;
  justify-content: center;
  padding: .9rem 1.2rem;
}

@media (max-width: 620px) {
  .insights-smart-cta {
    right: 1rem;
    bottom: 1rem;
    padding: 1.15rem;
  }
}

/* ----- CTA band --------------------------------------------- */
.cta-band,
.site-footer {
  /* Keep the final CTA and footer on one uninterrupted closing surface. */
  --closing-band-bg: var(--mbb-ink);
}
.cta-band {
  background: var(--closing-band-bg);
  color: var(--on-ink);
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 3.75rem !important;
}
.cta-band::before { content: none; }
.cta-band-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.cta-band-eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--mbb-accent);
  margin: 0 0 1.1rem;
}
.cta-band-title {
  font-family: var(--mbb-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.6vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--on-ink);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.cta-band-lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0;
}
.cta-band-panel {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.cta-band-actions {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  align-items: stretch;
}
.cta-band-actions .button-mbb { justify-content: center; }
.cta-band-actions .button-mbb-outline {
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.28);
}
.cta-band-actions .button-mbb-outline:hover {
  background: var(--card);
  color: var(--mbb-ink);
  border-color: var(--on-ink);
}

/* Blend the home footer into the final CTA so it reads as one closing band. */
.home-mbb .site-footer {
  position: relative;
  overflow: hidden;
  margin-top: -1px;
  padding: 0 0 2.5rem;
  background: var(--closing-band-bg);
  border-top: 0;
  color: rgba(255,255,255,.62);
}
.home-mbb .site-footer::before { content: none; }
.home-mbb .site-footer-inner {
  position: relative;
  padding-top: 2rem;
}
.home-mbb .footer-social-link {
  color: rgba(255,255,255,.74);
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.16);
}
.home-mbb .footer-social-link:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.32);
}
.home-mbb .site-footer a { color: rgba(255,255,255,.68); }
.home-mbb .site-footer a:hover { color: var(--on-ink); }
/* ----- Team section: align with MBB section header --------- */
.home-mbb #team .team-grid { margin-top: 0; }
.home-mbb #team .team-member {
  border-radius: var(--r-lg);
  border: 1px solid var(--mbb-rule);
}
.home-mbb #team .team-bio h3 { font-size: 1.45rem; }
.home-mbb #team .team-title {
  color: var(--mbb-accent);
  font-size: .72rem;
  letter-spacing: .18em;
}

/* SME showcase: tighter MBB feel */
.home-mbb .sme-showcase {
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 100% at 100% 0%, rgba(188, 106, 76,.22) 0%, rgba(188, 106, 76,0) 55%),
    var(--mbb-ink);
  border: 1px solid rgba(255,255,255,.06);
}
/* ----- Responsive -------------------------------------------- */
@media (max-width: 960px) {
  .hero-mbb-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: clamp(6rem, 14vh, 9rem);
    padding-bottom: clamp(2rem, 4vh, 3rem);
  }
  .hero-mbb-content { max-width: 720px; }
  .hero-mbb-actions { justify-self: start; }
  .home-mbb .problem-layout { grid-template-columns: 1fr; }
  .home-mbb #problem .section-mbb-head {
    position: static;
    max-width: 760px;
  }
  .cta-band-inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .cta-band-actions { flex-direction: row; flex-wrap: wrap; }
  .home-mbb section { padding: 5rem 0; }
}

@media (max-width: 760px) {
  .home-mbb .how-we-work-flow {
    grid-template-columns: 1fr;
  }
  .home-mbb .how-we-work-flow .panel-stage-arrow { display: none; }
  .home-mbb #problem .section-mbb-lead {
    padding-left: 1rem;
  }
  .home-mbb .problem-grid { gap: .85rem; }
  .home-mbb .problem-grid::before { left: 1rem; }
  .home-mbb .problem-item {
    padding: 1.15rem;
    grid-template-columns: auto 1fr;
    gap: .8rem .9rem;
    border-radius: var(--r-lg);
  }
  .home-mbb .problem-item h3 { font-size: 1.15rem; }
  .problem-item-mark {
    width: 2rem;
    height: 2rem;
    box-shadow: 0 0 0 5px var(--card), 0 8px 22px rgba(32, 32, 28, .1);
  }
  .problem-item-mark::before {
    width: .6rem;
    height: .6rem;
  }
  .hero-mbb-actions { width: 100%; }
  .section-mbb-head { margin-bottom: 2.25rem; }
  .home-mbb section { padding: 4rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mbb-orb,
  .hero-mbb-grid,
  .hero-mbb-shape,
  .hero-mbb-shape::before { animation: none; }
  .hero-mbb-network { display: none; }
}

/* ============================================================ */
/* === Unified inner-page hero (mirrors homepage MBB style) == */
/* ============================================================ */

.page-hero {
  position: relative;
  background: var(--paper-alt);
  color: var(--fg1);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--border);
  padding: clamp(4.5rem, 9vw, 6.5rem) 0 clamp(3.25rem, 6vw, 4.5rem);
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(58% 72% at 92% 6%, var(--clay-faint) 0%, transparent 62%);
  z-index: -2;
  pointer-events: none;
}
.page-hero::after { content: none; }
.page-hero > .container { position: relative; }
.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--fg3);
  margin: 0 0 1.2rem;
}
.page-hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--mbb-accent);
}
.page-hero-title {
  font-family: var(--mbb-display);
  font-weight: 400;
  color: var(--fg1);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.028em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
  max-width: 28ch;
}
.page-hero-lead {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--fg2);
  font-weight: 400;
  max-width: 64ch;
  margin: 0;
}
.page-hero-lead strong { color: var(--fg1); font-weight: 500; }
.page-hero-meta {
  margin: 1.85rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem 2rem;
  list-style: none;
}
.page-hero-meta li {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.page-hero-meta-num {
  font-family: var(--mbb-display);
  font-weight: 700;
  color: var(--fg1);
  font-size: 1.3rem;
  letter-spacing: -.01em;
}
.page-hero-meta-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg3);
}
.page-hero-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--fg3);
  font-size: .88rem;
  margin-bottom: 1rem;
  transition: color .15s var(--ease);
}
.page-hero-back:hover { color: var(--clay); text-decoration: none; }

/* Inner pages: a closing CTA band uses the same .cta-band styles */
body.legal .cta-band,
body.join-page .cta-band,
body.ptd-page .cta-band,
body.insights-page .cta-band,
body.smes-page .cta-band,
body.page-404 .cta-band { padding: 4.5rem 0 3.5rem !important; }

/* Footer blends with the closing CTA band on inner pages too */
body.legal .site-footer,
body.join-page .site-footer,
body.ptd-page .site-footer,
body.insights-page .site-footer,
body.smes-page .site-footer,
body.page-404 .site-footer {
  position: relative;
  overflow: hidden;
  margin-top: -1px;
  padding: 2rem 0 2.5rem;
  background: var(--closing-band-bg);
  border-top: 0;
  color: rgba(255,255,255,.85);
}

body.legal .legal-main {
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(3.5rem, 7vw, 5rem);
  background: var(--card);
}

@media (max-width: 760px) {
  .page-hero { padding: 3.5rem 0 2.75rem; }
  .page-hero-meta { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* ============================================================ */
/* === Refactored inner pages: privacy / company / join ====== */
/* ============================================================ */

/* ----- Shared editorial section header (inside inner pages) - */
.inner-section-head {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin: 0 0 2rem;
}
.inner-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mbb-ink);
  margin: 0;
}
.inner-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .5rem;
  border-radius: 2px;
  background: var(--mbb-ink);
  color: var(--on-ink);
  font-size: .78rem;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.inner-section-title {
  font-family: var(--mbb-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--mbb-ink);
  margin: 0;
  text-wrap: balance;
}

/* ----- Legal pages: 2-column shell with sticky TOC ---------- */
body.legal .legal-main {
  background:
    radial-gradient(56rem 36rem at 92% 4%, rgba(188, 106, 76, .06), transparent 62%),
    var(--card);
}
.legal-shell {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
}
.legal-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  border-left: 2px solid var(--mbb-rule);
  padding: .35rem 0 .35rem 1.1rem;
}
.legal-toc-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: legal-toc;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.legal-toc li {
  counter-increment: legal-toc;
}
.legal-toc a {
  display: flex;
  gap: .65rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  padding: .15rem 0;
  border-radius: 2px;
  transition: color .15s var(--ease);
}
.legal-toc a::before {
  content: counter(legal-toc, decimal-leading-zero);
  font-family: var(--mbb-display);
  font-weight: 700;
  font-size: .8rem;
  color: var(--mbb-accent);
  letter-spacing: .04em;
  flex-shrink: 0;
  padding-top: .04rem;
}
.legal-toc a:hover { color: var(--mbb-ink); }

.legal-body {
  min-width: 0;
  max-width: 760px;
}
.legal-meta-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  padding: 1.5rem 0;
  margin: 0 0 2.5rem;
  border-top: 2px solid var(--mbb-ink);
  border-bottom: 1px solid var(--mbb-rule);
}
.legal-meta-card > div {
  padding: .25rem 1.25rem;
  border-left: 1px solid var(--mbb-rule);
}
.legal-meta-card > div:first-child { border-left: 0; padding-left: 0; }
.legal-meta-card dt {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .35rem;
}
.legal-meta-card dd {
  margin: 0;
  font-weight: 600;
  color: var(--mbb-ink);
  font-size: .95rem;
  line-height: 1.4;
  word-break: break-word;
}
.legal-meta-card dd a { color: var(--clay); font-weight: 600; }

.legal-section {
  padding: 2rem 0 2.25rem;
  border-top: 1px solid var(--mbb-rule);
}
.legal-section:first-of-type { border-top: 0; padding-top: .25rem; }
.legal-section h3 {
  font-family: var(--mbb-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--mbb-ink);
  margin: 1.5rem 0 .65rem;
  letter-spacing: -.005em;
}
.legal-section p,
.legal-section li {
  color: var(--text);
  line-height: 1.7;
}
.legal-section p { margin-bottom: .85rem; }
.legal-section ul {
  list-style: none;
  padding: 0;
  margin: .25rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.legal-section ul li {
  position: relative;
  padding-left: 1.25rem;
}
.legal-section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68rem;
  width: 8px;
  height: 1px;
  background: var(--mbb-accent);
}
.legal-intro {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 1.5rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--mbb-rule);
}

/* ----- Company page: at-a-glance + structured sections ------ */
body.legal .company-main {
  background:
    radial-gradient(56rem 36rem at 8% 4%, rgba(188, 106, 76, .06), transparent 62%),
    var(--card);
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(3.5rem, 7vw, 5rem);
}
.company-shell {
  max-width: var(--max);
  margin: 0 auto;
}
.company-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border: 1px solid var(--mbb-rule);
  border-radius: var(--r);
  overflow: hidden;
  margin: 0 0 3.5rem;
  background: var(--card);
  box-shadow: 0 18px 50px rgba(32, 32, 28, .04);
}
.company-glance-item {
  padding: 1.35rem 1.4rem 1.5rem;
  border-left: 1px solid var(--mbb-rule);
  border-top: 1px solid var(--mbb-rule);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.company-glance-item:first-child { border-left: 0; }
.company-glance-item .glance-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.company-glance-item .glance-value {
  font-family: var(--mbb-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--mbb-ink);
  letter-spacing: -.01em;
  line-height: 1.25;
  word-break: break-word;
}
.company-glance-item .glance-sub {
  font-size: .82rem;
  color: var(--muted);
}

.company-sections {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.company-section {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding: 0;
  scroll-margin-top: 96px;
}
.company-section .inner-section-head {
  position: sticky;
  top: 96px;
  margin: 0;
}
.company-section-body {
  min-width: 0;
}
.company-section-body p,
.company-section-body li {
  color: var(--text);
  line-height: 1.7;
}
.company-section-body > p + p { margin-top: .6rem; }

.company-keyvals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .9rem;
  margin: 0 0 1rem;
}
.company-keyvals > div {
  background: var(--bg-alt);
  border: 1px solid var(--mbb-rule);
  border-radius: var(--r);
  padding: .9rem 1rem;
}
.company-keyvals dt {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .3rem;
}
.company-keyvals dd {
  margin: 0;
  font-weight: 600;
  color: var(--mbb-ink);
  line-height: 1.45;
}
.company-keyvals dd a { color: var(--clay); font-weight: 600; }

.company-capital {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
}
.company-capital-figure {
  background: var(--mbb-ink);
  color: var(--on-ink);
  border-radius: var(--r);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
}
.company-capital-figure .capital-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.company-capital-figure .capital-amount {
  font-family: var(--mbb-display);
  font-weight: 400;
  font-size: 1.85rem;
  letter-spacing: -.02em;
  color: var(--on-ink);
  line-height: 1.1;
}
.company-capital .table-wrap { margin: 0; }

.company-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1rem;
}
.company-tag-list li {
  font-size: .8rem;
  font-weight: 600;
  color: var(--mbb-ink);
  background: var(--bg-alt);
  border: 1px solid var(--mbb-rule);
  border-radius: var(--r-pill);
  padding: .35rem .75rem;
  letter-spacing: .01em;
  line-height: 1.35;
}

.company-section-body .table-wrap table th {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-alt);
}
.company-section-body .table-wrap table td {
  color: var(--mbb-ink);
  font-weight: 500;
}

/* ----- Join page: 2-column with brief on the left ----------- */
body.join-page main.join-page-main {
  background:
    radial-gradient(56rem 36rem at 92% 4%, rgba(188, 106, 76, .05), transparent 62%),
    radial-gradient(50rem 32rem at 4% 100%, rgba(188, 106, 76, .07), transparent 60%),
    var(--card);
  padding: clamp(5rem, 9vw, 7.5rem) 0 clamp(5rem, 9vw, 7.5rem);
}
.join-shell {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.join-aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.join-aside .inner-section-head { margin-bottom: .25rem; }
.join-aside-lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}
.join-aside-lead strong { color: var(--mbb-ink); font-weight: 700; }

.join-process {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: join-step;
}
.join-process li {
  counter-increment: join-step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--mbb-rule);
  border-radius: var(--r);
  padding: 1rem 1.15rem;
}
.join-process li::before {
  content: counter(join-step, decimal-leading-zero);
  font-family: var(--mbb-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--mbb-accent);
  letter-spacing: .04em;
  align-self: start;
  padding-top: .1rem;
}
.join-process h3 {
  font-family: var(--mbb-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--mbb-ink);
  margin: 0 0 .25rem;
  letter-spacing: -.005em;
}
.join-process p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--muted);
}

.join-form-card {
  background: var(--card);
  border: 1px solid var(--mbb-rule);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 22px 60px rgba(32, 32, 28, .07);
  display: grid;
  gap: .95rem;
}
.join-form-card .form-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mbb-accent);
  margin: 0;
}
.join-form-card h2 {
  font-family: var(--mbb-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 1.75rem);
  letter-spacing: -.018em;
  color: var(--mbb-ink);
  margin: .15rem 0 .15rem;
  line-height: 1.15;
}
.join-form-card .join-form-lead {
  color: var(--muted);
  margin: 0 0 .4rem;
}
.join-form-card label {
  font-weight: 700;
  color: var(--mbb-ink);
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.join-form-card input {
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: .85rem 1rem;
  font: inherit;
  background: var(--card);
  color: var(--mbb-ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.join-form-card input:hover { border-color: var(--mbb-ink); }
.join-form-card input:focus {
  outline: none;
  border-color: var(--mbb-accent);
  box-shadow: 0 0 0 3px rgba(188, 106, 76, .15);
}
.join-form-card input[type="file"] {
  padding: .6rem .75rem;
  cursor: pointer;
  color: var(--muted);
}
.join-form-card input[type="file"]::file-selector-button {
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-ink);
  background: var(--mbb-ink);
  border: 0;
  border-radius: 2px;
  padding: .5rem .85rem;
  margin-right: .85rem;
  cursor: pointer;
  transition: background .15s var(--ease);
}
.join-form-card input[type="file"]::file-selector-button:hover {
  background: var(--mbb-accent);
}
.join-form-card .join-file-hint {
  font-size: .82rem;
  color: var(--muted);
  margin-top: -.4rem;
}
.join-form-card .join-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .85rem;
  margin: .5rem 0 .25rem;
  font-weight: 400;
}
.join-form-card .join-consent input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .2rem;
  accent-color: var(--mbb-accent);
}
.join-form-card .join-consent span {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
.join-form-card .join-consent a {
  color: var(--mbb-accent);
  font-weight: 700;
}
.join-form-card .join-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .35rem;
  padding: .95rem 1.5rem;
  font-family: var(--mbb-display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--mbb-accent);
  border-radius: 2px;
  background: var(--mbb-accent);
  color: var(--on-ink);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.join-form-card .join-submit:hover {
  background: var(--mbb-accent-deep);
  border-color: var(--mbb-accent-deep);
}

/* ----- Responsive overrides for refactored pages ------------ */
@media (max-width: 960px) {
  .legal-shell { grid-template-columns: 1fr; }
  .legal-toc {
    position: relative;
    top: 0;
    border-left: 0;
    border-top: 2px solid var(--mbb-rule);
    border-bottom: 1px solid var(--mbb-rule);
    padding: 1rem 0;
  }
  .legal-toc ol {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
  }
  .company-section { grid-template-columns: 1fr; }
  .company-section .inner-section-head { position: static; }
  .join-shell { grid-template-columns: 1fr; }
  .join-aside { position: static; }
}
@media (max-width: 760px) {
  .legal-meta-card { grid-template-columns: 1fr; padding: 1rem 0; }
  .legal-meta-card > div {
    border-left: 0;
    border-top: 1px solid var(--mbb-rule);
    padding: .75rem 0;
  }
  .legal-meta-card > div:first-child { border-top: 0; padding-top: 0; }
  .company-glance { grid-template-columns: 1fr; }
  .company-glance-item {
    border-left: 0;
    border-top: 1px solid var(--mbb-rule);
  }
  .company-glance-item:first-child { border-top: 0; }
  .company-capital { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* === Meet our SMEs page ==================================== */
/* ============================================================ */

.smes-body {
  padding: clamp(3rem, 6vw, 4.75rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  background: var(--bg);
  overflow-x: clip;
}
.sme-grid-hint {
  margin: 0 0 1.6rem;
  color: var(--soft);
  font-size: .9rem;
  font-weight: 600;
}

/* Drifting wall of faces — full-bleed rows that auto-scroll in alternating
   directions. Without JS, or under reduced motion, the tracks fall back to a
   tidy centred wrapping grid; main.js upgrades them into seamless marquees. */
.sme-marquee {
  display: flex;
  flex-direction: column;
  gap: clamp(.75rem, 1.6vw, 1.15rem);
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.sme-marquee-row {
  overflow-x: clip;
  overflow-y: visible;
}
.sme-marquee-track {
  list-style: none;
  margin: 0;
  padding: .6rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.75rem, 1.6vw, 1.15rem);
}
.sme-marquee-item {
  flex: 0 0 auto;
  width: clamp(118px, 13vw, 158px);
}
/* JS enhancement: a single-line strip that drifts at a constant speed */
.sme-marquee-track.is-drifting {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  will-change: transform;
  animation: sme-drift var(--sme-drift-duration, 60s) linear infinite;
}
.sme-marquee-row.is-reverse .sme-marquee-track.is-drifting { animation-direction: reverse; }
.sme-marquee-track.is-drifting:hover,
.sme-marquee-row:focus-within .sme-marquee-track.is-drifting,
body.sme-modal-open .sme-marquee-track.is-drifting { animation-play-state: paused; }

@keyframes sme-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .sme-marquee {
    width: auto;
    margin-left: 0;
    transform: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .sme-marquee-track,
  .sme-marquee-track.is-drifting {
    flex-wrap: wrap;
    width: auto;
    animation: none;
  }
}

.sme-tile {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-alt);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.sme-tile:hover,
.sme-tile:focus-visible {
  transform: scale(1.12);
  z-index: 6;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
  outline: none;
}
.sme-tile:focus-visible {
  box-shadow: var(--shadow-lg), 0 0 0 3px color-mix(in srgb, var(--clay) 55%, transparent);
}

.sme-tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1) contrast(1.03);
  transition: filter .3s var(--ease);
}
.sme-tile:hover .sme-tile-photo,
.sme-tile:focus-visible .sme-tile-photo { filter: grayscale(0); }

.sme-tile-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .5rem;
  padding: .7rem .75rem .65rem;
  text-align: left;
  color: var(--on-ink);
  background: linear-gradient(to top, rgba(32, 32, 28,.9) 0%, rgba(32, 32, 28,.35) 45%, rgba(32, 32, 28,0) 78%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.sme-tile:hover .sme-tile-veil,
.sme-tile:focus-visible .sme-tile-veil { opacity: 1; transform: none; }
.sme-tile-name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.sme-tile-role {
  display: block;
  margin-top: .15rem;
  font-size: .68rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  line-height: 1.25;
}
.sme-tile-more {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-ink);
}
.sme-tile-more svg { opacity: .9; }

/* Touch devices have no hover: keep the name visible at rest */
@media (hover: none) {
  .sme-tile-veil { opacity: 1; transform: none; }
  .sme-tile-more { display: none; }
  .sme-tile:hover,
  .sme-tile:focus-visible { transform: none; }
}

/* Detail store stays in the DOM (crawlable) but hidden until cloned */
.sme-detail-store[hidden] { display: none; }

/* Popup dialog */
.sme-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.sme-modal[hidden] { display: none; }
.sme-modal.is-open { opacity: 1; }
.sme-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 22, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sme-modal-dialog {
  position: relative;
  width: min(440px, 100%);
  max-height: min(88vh, 760px);
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(.98);
  transition: transform .24s var(--ease);
}
.sme-modal.is-open .sme-modal-dialog { transform: none; }
.sme-modal-close {
  position: absolute;
  top: .85rem;
  right: .85rem;
  z-index: 2;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  color: var(--muted);
  cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.sme-modal-close:hover,
.sme-modal-close:focus-visible {
  color: var(--dark);
  background: var(--bg-alt);
  border-color: var(--border-strong);
  outline: none;
}

/* Detail content (shared by hidden store + dialog clone) — centered profile card */
.sme-detail {
  padding: clamp(2rem, 5vw, 2.75rem) clamp(1.6rem, 4vw, 2.4rem) clamp(1.75rem, 4vw, 2.4rem);
  text-align: center;
  background: radial-gradient(125% 80% at 50% 0%, color-mix(in srgb, var(--clay) 7%, var(--card)) 0%, var(--card) 62%);
}
.sme-detail-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .95rem;
}
.sme-detail-photo {
  width: 92px;
  height: 92px;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  object-fit: cover;
  object-position: top center;
  border: 4px solid var(--card);
  box-shadow: 0 8px 20px rgba(32, 32, 28, .14), 0 0 0 1px var(--border);
}
.sme-detail-id { width: 100%; }
.sme-detail-tag {
  display: inline-block;
  margin-bottom: .55rem;
  padding: .28rem .6rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clay);
  background: color-mix(in srgb, var(--clay) 12%, var(--card));
  border-radius: var(--r-pill);
}
.sme-detail-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--dark);
  line-height: 1.15;
}
.sme-detail-linkedin {
  color: var(--soft);
  display: inline-flex;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.sme-detail-linkedin:hover,
.sme-detail-linkedin:focus-visible {
  color: var(--clay);
  transform: translateY(-1px) scale(1.08);
}
.sme-detail-role {
  margin: .4rem 0 0;
  color: var(--clay);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .76rem;
}
.sme-detail-bio {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  text-align: left;
}
.sme-detail-bio p {
  margin: 0 0 .9rem;
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.72;
}
.sme-detail-bio p:last-child { margin-bottom: 0; }
.sme-detail-bio strong { color: var(--dark); }
.sme-detail-bio em { color: var(--text); }
.sme-detail-bio a { color: var(--clay); font-weight: 600; }
.sme-detail-bio a:hover { color: var(--clay-deep); }
.sme-detail-bio h2,
.sme-detail-bio h3 {
  color: var(--dark);
  margin: 1.2rem 0 .5rem;
  letter-spacing: -.01em;
}
.sme-detail-bio ul { margin: 0 0 .9rem 1.1rem; }
.sme-detail-bio li { color: var(--muted); line-height: 1.6; margin-bottom: .35rem; }

/* Lock background scroll while the dialog is open */
body.sme-modal-open { overflow: hidden; }

/* Empty state */
.sme-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.sme-empty svg { color: var(--border-strong); margin-bottom: .5rem; }
.sme-empty p { margin: 0; }
.sme-empty strong { color: var(--dark); }
.sme-empty a { color: var(--clay); font-weight: 700; }
.sme-empty a:hover { color: var(--clay-deep); }

@media (max-width: 560px) {
  .sme-marquee-item { width: clamp(96px, 30vw, 128px); }
  .sme-detail-head { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sme-tile,
  .sme-tile-photo,
  .sme-tile-veil,
  .sme-modal,
  .sme-modal-dialog { transition: none; }
  .sme-tile:hover,
  .sme-tile:focus-visible { transform: none; }
}