/* =========================================================================
   Twobirds, Marketing site styles (multi-page)
   Builds on css/foundations.css. Adds inner-page patterns to the
   reference UI kit conventions (nav, hero, services, practice, CTA, contact).
   ========================================================================= */

html, body { background: var(--canvas); }
body { padding-top: 76px; color: var(--ink); }

a { color: inherit; }
img { display: block; max-width: 100%; }

/* =========================================================================
   NavBar
   ========================================================================= */
.tb-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 76px;
  background: rgba(250, 248, 242, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--space-xxl);
}
.tb-nav { height: 108px; }
body { padding-top: 108px; }
.tb-nav__wm img { display: block; height: 44px; width: auto; }
.tb-nav__menu { display: flex; gap: 32px; justify-self: center; }
.tb-nav__link {
  position: relative;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  text-decoration: none;
  padding: 8px 0;
  transition: color var(--dur-base) var(--ease-standard);
}
.tb-nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 4px;
  height: 1px; background: var(--royal);
  transition: right var(--dur-slower) var(--ease-standard);
}
.tb-nav__link:hover { color: var(--royal); }
.tb-nav__link:hover::after { right: 0; }
.tb-nav__link.is-active { color: var(--royal); }
.tb-nav__link.is-active::after { right: 0; }
.tb-nav__right { display: flex; gap: 22px; align-items: center; justify-self: end; }

/* Editorial enquiry link in nav, replaces the old CTA */
.tb-nav__enq {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 9px;
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
.tb-nav__enq-text {
  position: relative;
}
.tb-nav__enq-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  opacity: 0.42;
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
  transform-origin: left center;
}
.tb-nav__enq-arrow {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--olive-deep);
  transition: transform var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.tb-nav__enq:hover { color: var(--olive-deep); }
.tb-nav__enq:hover .tb-nav__enq-text::after { opacity: 1; }
.tb-nav__enq:hover .tb-nav__enq-arrow { transform: translate(2px, -2px); }

/* =========================================================================
   Home Hero (display-xl)
   ========================================================================= */
.tb-hero {
  position: relative;
  padding: var(--space-section-lg) 0 var(--space-section);
  background: var(--canvas);
  overflow: hidden;
}
.tb-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../assets/hero-conference-web.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  opacity: 0.62;
  filter: sepia(0.18) contrast(0.95) brightness(1.18);
  pointer-events: none;
  z-index: 0;
}
.tb-hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(250,248,242,0.90) 0%, rgba(250,248,242,0.65) 40%, rgba(250,248,242,0.30) 75%, rgba(250,248,242,0.12) 100%),
    linear-gradient(180deg, rgba(250,248,242,0.12) 0%, rgba(250,248,242,0.25) 65%, rgba(250,248,242,0.50) 100%);
  pointer-events: none;
  z-index: 1;
}
.tb-hero__title { text-shadow: none; }
.tb-hero__sub   { text-shadow: none; }
.tb-hero__glow {
  position: absolute; width: 720px; height: 720px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(150,146,101,0.30), transparent 70%);
  top: -120px; right: -180px;
  z-index: 2;
}
.tb-hero__inner { position: relative; z-index: 3; }

/* Drifting clouds layer (between building photo and content) */
.tb-hero__clouds {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.tb-cloud {
  position: absolute;
  display: block;
  background:
    radial-gradient(ellipse 38% 60% at 22% 60%, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 32% 70% at 42% 45%, rgba(255,255,255,0.92), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 36% 65% at 62% 55%, rgba(255,255,255,0.94), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 30% 55% at 80% 60%, rgba(255,255,255,0.90), rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 60% 38% at 50% 72%, rgba(255,255,255,0.85), rgba(255,255,255,0) 75%);
  filter: blur(8px);
  opacity: 0.85;
  will-change: transform;
}
.tb-cloud--1 { top:  4%; left: -28%; width: 520px; height: 160px; animation: tb-cloud-drift 18s linear infinite; opacity: 0.95; }
.tb-cloud--2 { top: 16%; left: -34%; width: 720px; height: 210px; animation: tb-cloud-drift 24s linear infinite; animation-delay: -6s; opacity: 0.85; filter: blur(10px); }
.tb-cloud--3 { top: 34%; left: -30%; width: 600px; height: 180px; animation: tb-cloud-drift 16s linear infinite; animation-delay: -11s; opacity: 0.78; filter: blur(9px); }
.tb-cloud--4 { top: 54%; left: -38%; width: 880px; height: 240px; animation: tb-cloud-drift 28s linear infinite; animation-delay: -3s; opacity: 0.72; filter: blur(12px); }
.tb-cloud--5 { top: 72%; left: -26%; width: 460px; height: 140px; animation: tb-cloud-drift 14s linear infinite; animation-delay: -19s; opacity: 0.68; filter: blur(8px); }

@keyframes tb-cloud-drift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(180vw, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .tb-cloud { animation: none !important; }
}

/* =========================================================================
   Marketing page · brand-mono channel media + restrained showcase
   ========================================================================= */

/* Mono utility for partner imagery so coloured logos and portraits sit
   inside the 2birds editorial palette. Subtle warm tint matches paper. */
.tb-mono {
  filter: grayscale(1) contrast(1.02) brightness(0.97);
  mix-blend-mode: multiply;
}

/* ---- § II · Three pillars ---------------------------------------------- */
.tb-mkt-pillars { padding: 104px 0 112px; background: var(--paper); }
.tb-mkt-pillars__head { max-width: 880px; margin: 0 auto 64px; }
.tb-mkt-pillars__title {
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 18px 0 18px;
  text-wrap: balance;
}
.tb-mkt-pillars__title em { font-style: italic; color: var(--olive-deep); }
.tb-mkt-pillars__sub {
  font-family: "Lato", var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--graphite);
  margin: 0;
  max-width: 56ch;
}
.tb-mkt-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  max-width: 880px;
  margin: 0 auto;
}
.tb-mkt-pillars__grid--legacy { display: none; }
.tb-mkt-pillar {
  padding: 56px 40px 60px;
  border-left: 1px solid var(--hairline);
  position: relative;
}
.tb-mkt-pillar:first-child { border-left: 0; }
.tb-mkt-pillar__roman {
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--olive-deep);
  margin-bottom: 22px;
  opacity: 0.95;
}
.tb-mkt-pillar__eb {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--graphite);
  opacity: 0.78;
  margin-bottom: 12px;
}
.tb-mkt-pillar__title {
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 22ch;
  text-wrap: balance;
}
.tb-mkt-pillar__desc {
  font-family: "Lato", var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--graphite);
  margin: 0;
  max-width: 32ch;
}
@media (max-width: 860px) {
  .tb-mkt-pillars__grid { grid-template-columns: 1fr; }
  .tb-mkt-pillar { border-left: 0; border-top: 1px solid var(--hairline); padding: 36px 0; }
  .tb-mkt-pillar:first-child { border-top: 0; }
}

/* ---- § III · 2birds × ST Warrior --------------------------------------- */
.tb-mkt-collab { padding: 96px 0 88px; background: var(--bone); }
.tb-mkt-collab__rule {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 0 auto 44px;
}
.tb-mkt-collab__rule::before,
.tb-mkt-collab__rule::after {
  content: ""; height: 1px; width: 56px;
  background: var(--olive-deep); opacity: 0.4;
}
.tb-mkt-collab__rule span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--olive-deep); opacity: 0.55;
}
.tb-mkt-collab__lockup {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 36px;
}
.tb-mkt-collab__lockupBird {
  font-style: italic;
  color: var(--olive-deep);
}
.tb-mkt-collab__lockupX {
  font-style: italic;
  font-size: 26px;
  color: var(--graphite);
  opacity: 0.55;
}
.tb-mkt-collab__card {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 44px;
  align-items: start;
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 40px 48px;
}
.tb-mkt-collab__logoFig {
  margin: 0;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas-warm);
  overflow: hidden;
}
.tb-mkt-collab__logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tb-mkt-collab__eb {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--olive-deep);
  opacity: 0.9;
  display: inline-block;
  margin-bottom: 12px;
}
.tb-mkt-collab__title {
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
.tb-mkt-collab__title em { font-style: italic; color: var(--olive-deep); }
.tb-mkt-collab__body p {
  font-family: "Lato", var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--graphite);
  margin: 0 0 14px;
}
.tb-mkt-collab__body strong { color: var(--ink); font-weight: 600; }
.tb-mkt-collab__links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 16px;
}
.tb-mkt-collab__links a {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.tb-mkt-collab__links a svg { color: var(--olive-deep); flex: 0 0 auto; }
.tb-mkt-collab__linkArrow {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--olive-deep);
  margin-left: 2px;
}
.tb-mkt-collab__links a:hover {
  color: var(--olive-deep);
  border-bottom-color: var(--olive-deep);
}
@media (max-width: 720px) {
  .tb-mkt-collab__card { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; }
  /* Keep the logo box and the mascot avatar the same height on phones. The
     avatar's base size lives in revenue.html's inline <style> (loaded after this
     file), so !important is needed to win the cascade and stop it staying 120px
     while the logo box shrank. */
  .tb-mkt-collab__logoFig,
  .tb-mkt-collab__avatar { width: 96px !important; height: 96px !important; }
  .tb-mkt-collab__title { font-size: 24px; }
  .tb-mkt-collab__links { gap: 20px; }
}

/* ---- § IV · Signature work (Michael Tan spotlight) --------------------- */
.tb-mkt-spotlight { padding: 80px 0 88px; background: var(--bone); }
.tb-mkt-spotlight__grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 44px;
  align-items: start;
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 40px 48px;
}
.tb-mkt-spotlight__media { margin: 0; }
.tb-mkt-spotlight__media img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  display: block;
}
.tb-mkt-spotlight__cap {
  margin-top: 12px;
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--graphite);
  text-align: left;
  opacity: 0.85;
  max-width: none;
  line-height: 1.45;
}
.tb-mkt-spotlight__cap span { display: block; white-space: nowrap; }
.tb-mkt-spotlight__cap span + span { margin-top: 1px; }
.tb-mkt-spotlight__title {
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
.tb-mkt-spotlight__title em { font-style: italic; color: var(--olive-deep); }
.tb-mkt-spotlight__lede {
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--olive-deep);
  margin: 0 0 14px;
  max-width: none;
}
.tb-mkt-spotlight__body p {
  font-family: "Lato", var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--graphite);
  margin: 0 0 14px;
  max-width: none;
}
.tb-mkt-spotlight__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 5px;
  margin-top: 6px;
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.tb-mkt-spotlight__link svg { color: var(--olive-deep); }
.tb-mkt-spotlight__link:hover { color: var(--olive-deep); border-bottom-color: var(--olive-deep); }
@media (max-width: 720px) {
  .tb-mkt-spotlight__grid { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; }
  .tb-mkt-spotlight__media img { width: 80px; height: 80px; }
  .tb-mkt-spotlight__title { font-size: 24px; }
}

/* ---- § V · Showcase ---------------------------------------------------- */
.tb-mkt-showcase { padding: 88px 0 96px; background: var(--bone); }
.tb-mkt-showcase__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 40px auto 0;
  max-width: 1080px;
}
.tb-mkt-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 36px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 28px 36px;
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.tb-mkt-card:hover {
  transform: translateY(-2px);
  border-color: var(--olive);
  box-shadow: 0 20px 40px -22px rgba(56, 56, 56, 0.18);
}
.tb-mkt-card__media {
  margin: 0;
  width: 120px;
  height: 120px;
  background: var(--canvas-warm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-mkt-card__media--portrait { padding: 12px; }
.tb-mkt-card__media--portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tb-mkt-card__media--logo { padding: 12px; }
.tb-mkt-card__media--logo img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  display: block;
}
.tb-mkt-card__body { padding: 0; }
.tb-mkt-card__eb {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive-deep);
  opacity: 0.92;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tb-mkt-card__eb svg { color: var(--olive-deep); flex: 0 0 auto; }
.tb-mkt-card__title {
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: 0 0 6px;
}
.tb-mkt-card__desc {
  font-family: "Lato", var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--graphite);
  margin: 0 0 12px;
  max-width: none;
}
.tb-mkt-card__cta {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.tb-mkt-card:hover .tb-mkt-card__cta {
  color: var(--olive-deep);
  border-bottom-color: var(--olive-deep);
}
@media (max-width: 720px) {
  .tb-mkt-card { grid-template-columns: 1fr; gap: 16px; padding: 20px 22px; }
  .tb-mkt-card__media { width: 80px; height: 80px; }
  .tb-mkt-card__title { font-size: 19px; }
}
@media (max-width: 980px) {
  .tb-mkt-showcase__grid { max-width: 640px; }
}
.tb-fab-wa {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 62px; height: 62px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--olive);
  color: var(--paper);
  box-shadow: 0 14px 36px -10px rgba(56, 56, 56, 0.32), 0 4px 10px rgba(56, 56, 56, 0.12);
  z-index: 1100;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease, background 220ms ease;
}
.tb-fab-wa:hover {
  background: var(--olive-deep, #4f5a3a);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 22px 48px -12px rgba(56, 56, 56, 0.38), 0 6px 14px rgba(56, 56, 56, 0.14);
}
.tb-fab-wa:active { transform: translateY(0) scale(0.98); }
.tb-fab-wa:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}
.tb-fab-wa__icon { display: block; position: relative; z-index: 2; }
.tb-fab-wa__ring {
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--olive);
  opacity: 0.55;
  pointer-events: none;
  animation: tb-fab-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes tb-fab-pulse {
  0%   { transform: scale(0.92); opacity: 0.55; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-fab-wa__ring { animation: none; opacity: 0; }
}
@media print {
  .tb-fab-wa { display: none !important; }
}
@media (max-width: 720px) {
  .tb-fab-wa { right: 18px; bottom: 18px; width: 56px; height: 56px; }
  .tb-fab-wa__icon { width: 24px; height: 24px; }
}

/* =========================================================================
   Brand page · The two birds diptych
   ========================================================================= */
.tb-diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.tb-diptych__panel {
  padding: 72px 64px;
  position: relative;
  background: var(--paper);
}
.tb-diptych__panel + .tb-diptych__panel {
  border-left: 1px solid var(--hairline);
}
.tb-diptych__glyph {
  color: var(--olive-deep);
  margin-bottom: 28px;
  opacity: 0.9;
}
.tb-diptych__num {
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  color: var(--olive-deep);
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.tb-diptych__title {
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 18px;
}
.tb-diptych__lede {
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--olive-deep);
  margin: 0 0 28px;
  max-width: 28ch;
  letter-spacing: -0.002em;
}
.tb-diptych .premium-prose { max-width: 38ch; }
.tb-diptych .premium-prose > p { font-size: 17px; line-height: 1.7; }

@media (max-width: 900px) {
  .tb-diptych { grid-template-columns: 1fr; }
  .tb-diptych__panel { padding: 48px 32px; }
  .tb-diptych__panel + .tb-diptych__panel {
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
  .tb-diptych__title { font-size: 28px; }
}

/* Brand page · "The figure of two recurs" — paired pairs */
.tb-twos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.tb-twos__row {
  padding: 36px 40px;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  column-gap: 18px;
  row-gap: 14px;
}
.tb-twos__row:nth-child(2n) { border-left: 1px solid var(--hairline); }
.tb-twos__a, .tb-twos__b {
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.008em;
}
.tb-twos__a { text-align: right; }
.tb-twos__b { text-align: left; font-style: italic; color: var(--olive-deep); }
.tb-twos__amp {
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-size: 30px;
  color: var(--royal);
  opacity: 0.7;
  line-height: 1;
}
.tb-twos__note {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
  font-family: "Lato", var(--font-sans);
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  color: var(--graphite);
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .tb-twos { grid-template-columns: 1fr; }
  .tb-twos__row:nth-child(2n) { border-left: 0; }
  .tb-twos__row { padding: 28px 24px; }
  .tb-twos__a, .tb-twos__b, .tb-twos__amp { font-size: 24px; }
}
.tb-hero__title { color: var(--ink); }
.tb-hero__title em { color: var(--olive-deep); }
.tb-hero__sub { color: var(--graphite); }
.tb-hero .eyebrow-lockup { color: var(--royal); }
.tb-hero .eyebrow-lockup { margin-bottom: 28px; }
.tb-hero__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 88px; line-height: 1.0; letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 920px;
  text-wrap: balance;
}
.tb-hero__title em { font-style: italic; color: var(--olive-deep); }
.tb-hero__sub {
  font-family: var(--font-sans); font-size: 22px; font-weight: 500;
  line-height: 1.55; color: var(--ink-soft);
  margin: 0 0 36px; max-width: 660px;
  text-wrap: pretty;
}
.tb-hero__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* =========================================================================
   Inner page hero (smaller, for sub-pages)
   ========================================================================= */
.tb-pagehero {
  position: relative; overflow: hidden;
  background: var(--canvas);
  padding: var(--space-section-lg) 0 var(--space-md);
}
.tb-pagehero__glow {
  position: absolute; width: 640px; height: 640px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(150,146,101,0.10), transparent 70%);
  top: -160px; right: -120px;
}
.tb-pagehero__inner {
  position: relative;
  display: grid; grid-template-columns: 7fr 5fr; gap: 64px;
  align-items: end;
}
.tb-pagehero .eyebrow-lockup { margin-bottom: 24px; }
.tb-pagehero__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 72px; line-height: 1.02; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 0;
  text-wrap: balance;
}
.tb-pagehero__title em { font-style: italic; color: var(--olive-deep); }
.tb-pagehero__lede {
  font-family: var(--font-sans); font-size: 19px; font-weight: 300;
  line-height: 1.6; color: var(--graphite);
  margin: 0; padding-bottom: 12px;
  text-wrap: pretty;
}

/* breadcrumb-style location marker */
.tb-pagehero__loc {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate);
  margin-bottom: 22px;
}
.tb-pagehero__loc a { color: var(--slate); text-decoration: none; transition: color var(--dur-base) var(--ease-standard); }
.tb-pagehero__loc a:hover { color: var(--royal); }
.tb-pagehero__loc__sep { color: var(--stone); font-weight: 400; }

/* =========================================================================
   Services Grid (home)
   ========================================================================= */
.tb-services {
  background: var(--canvas);
  padding: var(--space-section) 0 var(--space-xxl);
  border-top: 1px solid var(--hairline);
}
.tb-services__head {
  max-width: none;
  margin-bottom: var(--space-section);
  padding-bottom: var(--space-xxl);
  border-bottom: 1px solid var(--hairline);
}
.tb-services__head .eyebrow-lockup { margin-bottom: 28px; }
.tb-services__masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  align-items: end;
  column-gap: var(--space-section);
  row-gap: 28px;
}
.tb-services__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 56px; line-height: 1.06; letter-spacing: -0.02em;
  color: var(--ink); margin: 0;
  text-wrap: balance;
}
.tb-services__title em { font-style: italic; color: var(--olive-deep); }
.tb-services__aside { padding-bottom: 6px; }
.tb-services__asidelabel {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--olive-deep);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.tb-services__sub {
  font-family: var(--font-sans); font-size: 16px; font-weight: 300;
  line-height: 1.62; color: var(--graphite); margin: 0;
  max-width: 340px;
}
.tb-services__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.tb-service {
  padding: var(--space-xxl) var(--space-xl);
  border-right: 1px solid var(--hairline);
  background: var(--canvas);
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: background-color var(--dur-slow) var(--ease-standard);
}
.tb-service:last-child { border-right: 0; }
.tb-service.is-featured { background: var(--hairline); }
.tb-service:hover { background: var(--hairline-soft); }
.tb-service.is-featured:hover { background: var(--surface-cool); }
.tb-service__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--canvas-warm);
  margin-bottom: 26px;
}
.tb-service__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
  filter: grayscale(0.3) contrast(1.03);
}
.tb-service__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.02) brightness(0.98);
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1), filter var(--dur-base) var(--ease-standard);
}
.tb-service:hover .tb-service__poster {
  transform: scale(1.04);
  filter: grayscale(0.4) contrast(1.03) brightness(1);
}
.tb-service__num {
  font-family: var(--font-serif); font-style: italic;
  font-size: 40px; font-weight: 400; color: var(--royal);
  line-height: 1; margin-bottom: 22px;
}
.tb-service__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 24px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 12px;
  text-wrap: balance;
}
.tb-service__desc {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.55;
  color: var(--graphite); margin: 0 0 22px;
  text-wrap: pretty;
}
.tb-service__more {
  margin-top: auto;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--royal);
  display: inline-flex; align-items: center; gap: 8px;
}
.tb-service__more::after {
  content: ""; transition: transform var(--dur-base) var(--ease-standard);
}
.tb-service:hover .tb-service__more::after { transform: translateX(4px); }

/* =========================================================================
   Belief / Manifesto band (home)
   ========================================================================= */
.tb-belief {
  background: var(--canvas-warm);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-section) 0;
}
.tb-belief__inner {
  display: grid; grid-template-columns: 5fr 7fr; gap: 80px;
}
.tb-belief__head .eyebrow-lockup { margin-bottom: 18px; }
.tb-belief__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 44px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink); margin: 0;
  text-wrap: balance;
}
.tb-belief__title em { font-style: italic; color: var(--olive-deep); }
.tb-belief__body p {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.7;
  color: var(--graphite); margin: 0 0 18px; max-width: 620px;
}
.tb-belief__body p:last-child { margin-bottom: 0; }
.tb-belief__body em { font-style: italic; color: var(--olive-deep); }

/* =========================================================================
   Section heads (generic, used across inner pages)
   ========================================================================= */
.tb-sectionhead {
  max-width: 820px; margin-bottom: 56px;
}
.tb-sectionhead .eyebrow-lockup { margin-bottom: 18px; }
.tb-sectionhead__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 48px; line-height: 1.08; letter-spacing: -0.018em;
  color: var(--ink); margin: 0 0 16px;
  text-wrap: balance;
}
.tb-sectionhead__title em { font-style: italic; color: var(--olive-deep); }
.tb-sectionhead__sub {
  font-family: var(--font-sans); font-size: 18px; font-weight: 300;
  line-height: 1.6; color: var(--graphite); margin: 0;
  max-width: 640px;
}

/* =========================================================================
   Prose Section, single-column long-form
   ========================================================================= */
.tb-prose {
  background: var(--canvas);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}
.tb-prose__body {
  max-width: 740px;
}
.tb-prose__body p {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.75;
  color: var(--graphite); margin: 0 0 22px;
}
.tb-prose__body p:last-child { margin-bottom: 0; }
.tb-prose__body em { font-style: italic; color: var(--olive-deep); }
.tb-prose__body strong { color: var(--ink-soft); font-weight: 600; }
.tb-prose__body a {
  color: var(--royal); text-decoration: none; border-bottom: 1px solid currentColor;
  transition: color var(--dur-base) var(--ease-standard);
}
.tb-prose__body a:hover { color: var(--royal-deep); }

/* =========================================================================
   Two-column prose (head left, body right)
   ========================================================================= */
.tb-twocol {
  background: var(--canvas);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}
.tb-twocol__grid {
  display: grid; grid-template-columns: 5fr 7fr; gap: 80px;
}
/* Two-column editorial grids stack on smaller screens. !important is needed
   because some sections (e.g. the CQC block on the audit page) set their column
   template via an inline style, which a normal media-query rule can't override —
   that left the CQC text crushed into a one-word-per-line column on phones. */
@media (max-width: 860px) {
  .tb-twocol__grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}
.tb-twocol__head .eyebrow-lockup { margin-bottom: 18px; }
.tb-twocol__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 44px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink); margin: 0; text-wrap: balance;
}
.tb-twocol__title em { font-style: italic; color: var(--olive-deep); }
.tb-twocol__body p {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.7;
  color: var(--graphite); margin: 0 0 20px;
}
.tb-twocol__body p:last-child { margin-bottom: 0; }
.tb-twocol__body em { font-style: italic; color: var(--olive-deep); }
.tb-twocol__body strong { color: var(--ink-soft); font-weight: 600; }
.tb-twocol__body a { color: var(--royal); text-decoration: none; border-bottom: 1px solid currentColor; }

/* =========================================================================
   Numeral panels, 3-up (used for course types, sector tiers, etc.)
   ========================================================================= */
.tb-numerals {
  background: var(--canvas);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}
.tb-numerals__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-top: 24px;
}
.tb-numerals__grid.is-2 { grid-template-columns: repeat(2, 1fr); }
.tb-numerals__grid.is-4 { grid-template-columns: repeat(4, 1fr); }
.tb-numeral {
  padding: var(--space-xxl) var(--space-xl);
  border-right: 1px solid var(--hairline);
  background: var(--canvas);
  display: flex; flex-direction: column;
}
.tb-numeral:last-child { border-right: 0; }
.tb-numeral__roman {
  font-family: var(--font-serif); font-style: italic;
  font-size: 40px; font-weight: 400; color: var(--royal);
  line-height: 1; margin-bottom: 22px;
}
.tb-numeral__eyebrow {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate);
  margin-bottom: 10px;
}
.tb-numeral__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 26px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 14px;
  text-wrap: balance;
}
.tb-numeral__desc {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.6;
  color: var(--graphite); margin: 0 0 18px;
}
.tb-numeral__list { list-style: none; padding: 0; margin: auto 0 0; }
.tb-numeral__list li {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  color: var(--ink-soft);
  padding: 10px 0;
  border-top: 1px solid var(--hairline-soft);
  display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: baseline;
}
.tb-numeral__list li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--olive); margin-top: 8px;
}

/* =========================================================================
   Steps, process / ordered procedure
   ========================================================================= */
.tb-steps {
  background: var(--canvas-warm);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.tb-steps__list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  margin-top: 40px;
}
.tb-steps__list.is-3 { grid-template-columns: repeat(3, 1fr); }
.tb-steps__list.is-5 { grid-template-columns: repeat(5, 1fr); }
.tb-step {
  padding: 56px 40px 60px;
  border-right: 1px solid var(--hairline);
  position: relative;
}
.tb-step:last-child { border-right: 0; }
.tb-step__icon {
  color: var(--olive-deep);
  margin-bottom: 26px;
  opacity: 0.92;
  display: block;
}
.tb-step__n {
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; font-weight: 600; color: var(--royal);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 16px;
}
.tb-step__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 23px; line-height: 1.22; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 18px;
  text-wrap: balance;
}
.tb-step__body {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.7;
  color: var(--graphite); margin: 0;
}

/* =========================================================================
   Definition list, used for requirements and key facts
   ========================================================================= */
.tb-dl {
  display: grid; grid-template-columns: 1fr 2fr; gap: 0;
  border-top: 1px solid var(--hairline);
}
.tb-dl > * {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--hairline);
}
.tb-dl dt {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 18px; line-height: 1.3; color: var(--ink);
  padding-right: 32px;
}
.tb-dl dt em { font-style: italic; color: var(--olive-deep); }
.tb-dl dd {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.65;
  color: var(--graphite); margin: 0;
}
.tb-dl dd em { font-style: italic; color: var(--olive-deep); }

/* =========================================================================
   Grade ladder, TPQA outcomes
   ========================================================================= */
.tb-ladder {
  margin-top: 24px;
  border-top: 1px solid var(--hairline);
}
.tb-ladder__row {
  display: grid; grid-template-columns: 80px 200px 1fr;
  gap: 32px; align-items: baseline;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--hairline);
}
.tb-ladder__grade {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 40px; line-height: 1; color: var(--royal);
}
.tb-ladder__verdict {
  font-family: var(--font-serif); font-weight: 500; font-size: 22px;
  line-height: 1.2; letter-spacing: -0.01em; color: var(--ink);
}
.tb-ladder__verdict em { font-style: italic; color: var(--olive-deep); }
.tb-ladder__body {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.65;
  color: var(--graphite);
}
.tb-ladder__row.is-terminal .tb-ladder__grade { color: var(--olive-deep); }

/* =========================================================================
   Sector tiles, used on sourcing page
   ========================================================================= */
.tb-sectors {
  background: var(--canvas);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.tb-sectors > .container { position: relative; z-index: 2; }

/* ---------- 3D rotating background photograph for § II ---------- */
.tb-sectors__bg {
  position: absolute; inset: -8% -4%;
  z-index: 0;
  perspective: 1800px;
  perspective-origin: 50% 38%;
  pointer-events: none;
}
.tb-sectors__bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../assets/wooden-desk.jpg");
  background-size: cover;
  background-position: center 38%;
  opacity: 0.28;
  filter: grayscale(1) contrast(1.04);
  transform-origin: 50% 50%;
  animation: tb-sectors-bg-float 22s ease-in-out infinite;
  will-change: transform;
}
.tb-sectors__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(140% 90% at 50% 50%, transparent 0%, transparent 35%, color-mix(in oklab, var(--canvas) 55%, transparent) 75%, color-mix(in oklab, var(--canvas) 78%, transparent) 100%),
    linear-gradient(180deg, color-mix(in oklab, var(--canvas) 22%, transparent) 0%, color-mix(in oklab, var(--canvas) 8%, transparent) 50%, color-mix(in oklab, var(--canvas) 38%, transparent) 100%);
  pointer-events: none;
}
@keyframes tb-sectors-bg-float {
  0%   { transform: rotateY(-3.2deg) rotateX( 1.6deg) scale(1.04); }
  50%  { transform: rotateY( 3.2deg) rotateX(-1.0deg) scale(1.06); }
  100% { transform: rotateY(-3.2deg) rotateX( 1.6deg) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .tb-sectors__bg::before { animation: none; transform: scale(1.05); }
}

.tb-sectors__grid {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 32px;
}
/* Hide native cursor over the grid, was used by removed SectorsCursor */
.tb-sectors__cursor {
  position: absolute; left: 0; top: 0;
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease, transform 80ms ease-out;
  z-index: 6;
  will-change: transform;
}
.tb-sectors__cursor.is-visible { opacity: 1; }
.tb-sectors__cursor-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, color-mix(in oklab, var(--canvas) 96%, white) 0%, var(--canvas) 70%);
  border: 1px solid color-mix(in oklab, var(--olive-deep) 80%, transparent);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 -1px 0 color-mix(in oklab, var(--olive-deep) 25%, transparent) inset,
    0 8px 14px -6px rgba(60, 50, 30, 0.20),
    0 22px 32px -16px rgba(60, 50, 30, 0.28);
  animation: tb-sectors-cursor-spin 9s linear infinite;
}
@keyframes tb-sectors-cursor-spin {
  to { transform: rotate(360deg); }
}
.tb-sectors__cursor-icon {
  position: relative; z-index: 1;
  color: var(--olive-deep);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7));
}
.tb-sectors__cursor-label {
  position: absolute; left: 50%; bottom: -28px;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35);
}
@media (max-width: 720px) {
  .tb-sectors__cursor { display: none; }
}
.tb-sector {
  position: relative;
  padding: 30px 30px 26px;
  background:
    radial-gradient(120% 80% at 18% 0%, color-mix(in oklab, var(--paper) 100%, white) 0%, transparent 55%),
    linear-gradient(168deg,
      color-mix(in oklab, var(--paper) 98%, white) 0%,
      color-mix(in oklab, var(--canvas) 96%, var(--paper)) 42%,
      color-mix(in oklab, var(--canvas) 88%, var(--olive-deep) 5%) 100%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid color-mix(in oklab, var(--hairline) 65%, var(--olive-deep));
  border-radius: 6px;
  box-shadow:
    0 1px 0 #ffffff inset,
    0 -1px 0 color-mix(in oklab, var(--olive-deep) 10%, transparent) inset,
    0 1px 2px rgba(60, 50, 30, 0.04),
    0 10px 18px -10px rgba(60, 50, 30, 0.10),
    0 28px 40px -28px rgba(60, 50, 30, 0.22);
  transform: translateZ(0);
  transition: transform 420ms cubic-bezier(.2,.7,.2,1), box-shadow 420ms cubic-bezier(.2,.7,.2,1), border-color 420ms ease;
  overflow: hidden;
}
.tb-sector::before {
  content: "";
  position: absolute; right: 0; top: 0;
  width: 80px; height: 80px;
  background: radial-gradient(closest-side at 100% 0%, color-mix(in oklab, var(--olive-deep) 26%, transparent) 0%, transparent 75%);
  pointer-events: none; z-index: 0;
  transition: opacity 420ms ease;
  opacity: 0.85;
}
.tb-sector::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 100%);
  pointer-events: none; mix-blend-mode: screen; opacity: 0.75;
}
.tb-sector:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--olive-deep) 55%, var(--hairline));
  box-shadow:
    0 1px 0 #ffffff inset,
    0 -1px 0 color-mix(in oklab, var(--olive-deep) 18%, transparent) inset,
    0 2px 3px rgba(60, 50, 30, 0.06),
    0 16px 24px -10px rgba(60, 50, 30, 0.15),
    0 44px 60px -28px rgba(60, 50, 30, 0.28);
}
.tb-sector:hover::before { opacity: 1; }
.tb-sector:nth-child(3n) { border-right: 1px solid color-mix(in oklab, var(--hairline) 65%, var(--olive-deep)); }
.tb-sector:nth-last-child(-n+3) { border-bottom: 1px solid color-mix(in oklab, var(--hairline) 65%, var(--olive-deep)); }

.tb-sector__num {
  font-family: var(--font-serif); font-style: italic;
  font-size: 13px; font-weight: 400;
  color: var(--olive-deep); letter-spacing: 0.04em;
  margin: 0 0 18px;
  padding-left: 14px;
  position: relative; z-index: 1;
  display: inline-block;
}
.tb-sector__num::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 8px; height: 1px;
  background: color-mix(in oklab, var(--olive-deep) 60%, transparent);
  transform: translateY(-50%);
}

.tb-sector__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; line-height: 1.18; letter-spacing: -0.012em;
  color: var(--ink); margin: 0 0 12px;
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px;
}
.tb-sector__glyph {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, color-mix(in oklab, var(--paper) 100%, white) 0%, color-mix(in oklab, var(--canvas) 90%, var(--olive-deep) 10%) 100%);
  color: var(--olive-deep);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 -1px 0 color-mix(in oklab, var(--olive-deep) 22%, transparent) inset;
  transition: transform 420ms cubic-bezier(.2,.7,.2,1);
}
.tb-sector__glyph::before {
  content: "";
  position: absolute; inset: -3px;
  border: 1px solid color-mix(in oklab, var(--olive-deep) 35%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.tb-sector:hover .tb-sector__glyph { transform: rotate(-5deg); }

.tb-sector__sub {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.6;
  color: var(--graphite); margin: 0;
  position: relative; z-index: 1;
}

.tb-sector__hot {
  position: relative; z-index: 1;
  margin-top: 22px; padding-top: 22px;
  border-top: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.tb-sector__hot::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, color-mix(in oklab, var(--olive-deep) 30%, transparent) 18%, color-mix(in oklab, var(--olive-deep) 30%, transparent) 82%, transparent 100%);
}
.tb-sector__hot::after {
  content: "✦";
  position: absolute; left: 50%; top: -9px;
  transform: translateX(-50%);
  background: color-mix(in oklab, var(--canvas) 94%, var(--paper));
  padding: 0 8px;
  font-family: var(--font-serif);
  font-size: 12px;
  color: color-mix(in oklab, var(--olive-deep) 70%, transparent);
  line-height: 1;
}
.tb-sector__hot-label {
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: color-mix(in oklab, var(--olive-deep) 85%, var(--graphite));
  display: inline-flex; align-items: center; gap: 0;
}
.tb-sector__hot-label::before { display: none; }
.tb-sector__hot-topic {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 16px; line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* =========================================================================
   Sector group, economy bands
   ========================================================================= */
.tb-economies {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-top: 24px;
}
.tb-economy {
  padding: var(--space-xxl) var(--space-xl);
  border-right: 1px solid var(--hairline);
  background: var(--canvas);
}
.tb-economy:last-child { border-right: 0; }
.tb-economy__roman {
  font-family: var(--font-serif); font-style: italic;
  font-size: 36px; color: var(--royal); margin-bottom: 18px; line-height: 1;
}
.tb-economy__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 26px; line-height: 1.2; color: var(--ink); margin: 0 0 12px;
  letter-spacing: -0.01em;
  min-height: 2.4em;
}
.tb-economy__title em { font-style: italic; color: var(--olive-deep); }
.tb-economy__body {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.6;
  color: var(--graphite); margin: 0 0 16px;
}
.tb-economy__list {
  list-style: none; padding: 14px 0 0; margin: 0;
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.tb-economy__list li {
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-soft);
  padding: 4px 0;
  position: relative;
}
.tb-economy__list li + li::before {
  content: "·";
  color: var(--stone); margin-right: 12px;
}

/* =========================================================================
   Economy bands, legacy fallback (kept empty, see definitions above)
   ========================================================================= */

/* =========================================================================
   Pull quote, interludes & speaker callouts
   ========================================================================= */
.tb-interlude {
  position: relative; overflow: hidden;
  background: var(--scrim);
  padding: var(--space-section) 0;
}
.tb-interlude__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--olive); }
.tb-interlude__atmos {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(720px circle at 12% 18%, rgba(150,146,101,0.15), transparent 60%),
    radial-gradient(840px circle at 88% 82%, rgba(61,90,138,0.18), transparent 65%);
}
.tb-interlude__inner { position: relative; }
.tb-interlude--withfig { padding: 0; }
.tb-interlude--withfig .container { padding: 0; max-width: none; }
.tb-interlude--withfig .tb-interlude__bar { display: none; }
.tb-interlude__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) auto;
  grid-template-areas: "body fig spacer";
  gap: 0;
  align-items: stretch;
  min-height: 360px;
}
.tb-interlude__body {
  grid-area: body;
  min-width: 0; align-self: center;
  max-width: none;
  margin-left: 8%; margin-right: 8%;
  padding: var(--space-xl) 0;
}
.tb-interlude__fig {
  grid-area: fig;
  margin: 0;
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: none;
}
.tb-interlude__split::after {
  content: "";
  grid-area: spacer;
  width: clamp(40px, 8vw, 120px);
}
.tb-interlude__fig-frame {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: none;
}
.tb-interlude__fig-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: grayscale(1) contrast(1.06) brightness(0.94);
}
.tb-interlude__fig-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(0, 0, 0, 0.55) 0%, transparent 60%),
    radial-gradient(140% 80% at 50% -10%, rgba(0, 0, 0, 0.35) 0%, transparent 55%);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.tb-interlude__fig-cap {
  margin-top: 18px;
  padding-left: 22px;
  padding-right: 22px;
  position: relative;
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; line-height: 1.5;
  color: var(--olive-light);
  max-width: 360px;
  opacity: 0.85;
}
.tb-interlude__fig-mark {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-serif);
  font-size: 14px; color: var(--olive-light);
  opacity: 0.65;
}
@media (max-width: 960px) {
  .tb-interlude--withfig { padding: var(--space-section) 0; }
  .tb-interlude__split { grid-template-columns: 1fr; grid-template-areas: "body" "fig"; row-gap: 0; min-height: 0; }
  .tb-interlude__split::after { display: none; }
  .tb-interlude__body { margin: 0; padding: 0 var(--container-padding) var(--space-xl); max-width: none; }
  .tb-interlude__fig { height: 280px; align-self: auto; }
}
.tb-interlude__eb { margin-bottom: 24px; }
.tb-interlude__quote {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 30px; line-height: 1.26; letter-spacing: -0.012em;
  color: var(--paper); margin: 0 0 18px;
  text-wrap: balance;
}
.tb-interlude__quote em { font-style: italic; color: var(--olive-light); }
.tb-interlude__cite {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive-light);
}

/* Speaker / engagement callout (TPQA page) */
.tb-speaker {
  background: var(--footer); color: var(--paper);
  padding: var(--space-section) 0;
  position: relative; overflow: hidden;
}
.tb-speaker__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--olive); }
.tb-speaker__atmos {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(720px circle at 18% 22%, rgba(150,146,101,0.16), transparent 60%),
    radial-gradient(720px circle at 82% 78%, rgba(61,90,138,0.20), transparent 65%);
}
.tb-speaker__inner {
  position: relative;
  display: grid; grid-template-columns: 6fr 6fr; gap: 64px;
  align-items: center;
}
.tb-speaker .eyebrow-lockup { margin-bottom: 22px; }
.tb-speaker__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 48px; line-height: 1.1; letter-spacing: -0.018em;
  color: var(--paper); margin: 0 0 20px; text-wrap: balance;
}
.tb-speaker__title em { font-style: italic; color: var(--olive-light); }
.tb-speaker__body {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.7;
  color: var(--ash); margin: 0 0 18px; max-width: 540px;
}
.tb-speaker__body em { font-style: italic; color: var(--olive-light); }

/* Event-card on the right of speaker section */
.tb-eventcard {
  background: rgba(196, 191, 160, 0.08);
  border: 1px solid rgba(196, 191, 160, 0.20);
  padding: var(--space-xxl);
  border-radius: var(--r-sm);
}
.tb-eventcard__eb {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive-light);
  margin-bottom: 16px; display: block;
}
.tb-eventcard__name {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 28px; line-height: 1.18; color: var(--paper);
  margin: 0 0 16px; letter-spacing: -0.01em;
}
.tb-eventcard__name em { font-style: italic; color: var(--olive-light); }
.tb-eventcard__meta {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.tb-eventcard__meta li {
  font-family: var(--font-sans); font-size: 14px; color: var(--ash);
  display: grid; grid-template-columns: 110px 1fr; column-gap: 18px;
}
.tb-eventcard__meta li span:first-child {
  color: var(--olive-light); letter-spacing: 0.1em; font-size: 11px;
  text-transform: uppercase; font-weight: 600; align-self: center;
}
.tb-eventcard__meta li span:last-child { color: var(--paper); }

/* =========================================================================
   Trust strip, 3 plates of professional standing
   ========================================================================= */
.tb-trust {
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.tb-trust__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.tb-trust__cell {
  padding: var(--space-xxl) var(--space-xl);
  border-right: 1px solid var(--hairline);
  display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: center;
}
.tb-trust__cell:last-child { border-right: 0; }
.tb-trust__seal {
  width: 56px; height: 56px;
  border: 1px solid var(--olive); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 24px; color: var(--olive-deep); line-height: 1;
}
.tb-trust__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 18px; line-height: 1.3; color: var(--ink);
  letter-spacing: -0.005em; margin: 0 0 8px;
  text-wrap: balance;
}
.tb-trust__title em { font-style: italic; color: var(--olive-deep); }
.tb-trust__sub {
  font-family: var(--font-sans); font-size: 13px; line-height: 1.45;
  color: var(--graphite); margin: 0;
}

/* =========================================================================
   Manifesto centerpiece, large display on canvas-warm
   ========================================================================= */
.tb-manifesto {
  background: var(--canvas-warm);
  padding: var(--space-section-lg) 0;
  border-bottom: 1px solid var(--hairline);
  position: relative; overflow: hidden;
}
.tb-manifesto__glow {
  position: absolute; pointer-events: none; width: 720px; height: 720px;
  top: -200px; left: -200px;
  background: radial-gradient(closest-side, rgba(150,146,101,0.10), transparent 70%);
}
.tb-manifesto__inner {
  position: relative;
  display: grid; grid-template-columns: 7fr 5fr; gap: 80px;
  align-items: center;
  max-width: var(--container-max);
}
.tb-manifesto__text { min-width: 0; }
.tb-manifesto__photo {
  width: 100%; height: 520px;
  background-image: url("../assets/manifesto-books.jpg");
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.08) brightness(0.96);
}
.tb-manifesto .eyebrow-lockup { margin-bottom: 28px; }
.tb-manifesto__quote {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 46px; line-height: 1.16; letter-spacing: -0.018em;
  color: var(--ink); margin: 0 0 32px;
  text-wrap: balance;
}
.tb-manifesto__quote em { font-style: italic; color: var(--olive-deep); }
.tb-manifesto__cite {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate);
  display: inline-flex; align-items: center; gap: 14px;
}
.tb-manifesto__cite::before {
  content: ""; width: 32px; height: 1px; background: var(--olive); flex: 0 0 32px;
}

/* =========================================================================
   Heritage, 4-up milestone band
   ========================================================================= */
.tb-heritage {
  background: var(--canvas);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}
.tb-heritage__head { text-align: center; max-width: 720px; margin: 0 auto var(--space-xxl); }
.tb-heritage__head .eyebrow-lockup { margin-bottom: 18px; }
.tb-heritage__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 48px; line-height: 1.08; letter-spacing: -0.018em;
  color: var(--ink); margin: 0 0 14px;
  text-wrap: balance;
}
.tb-heritage__title em { font-style: italic; color: var(--olive-deep); }
.tb-heritage__sub {
  font-family: var(--font-sans); font-size: 17px; font-weight: 300; line-height: 1.6;
  color: var(--graphite); margin: 0;
}
.tb-heritage__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.tb-heritage__cell {
  padding: var(--space-xxl) var(--space-xl);
  border-right: 1px solid var(--hairline);
}
.tb-heritage__cell:last-child { border-right: 0; }
.tb-heritage__label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--royal);
  margin-bottom: 14px;
}
.tb-heritage__year {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 52px; line-height: 1; color: var(--olive-deep);
  margin-bottom: 18px;
}
.tb-heritage__body {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.55;
  color: var(--graphite); margin: 0;
}

/* =========================================================================
   Founder feature, dark band, two-col, olive-rule
   ========================================================================= */
.tb-founder {
  position: relative; overflow: hidden;
  background: var(--footer); color: var(--paper);
  padding: var(--space-section-lg) 0;
}
.tb-founder__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--olive); }
.tb-founder__atmos {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(720px circle at 16% 20%, rgba(150,146,101,0.16), transparent 60%),
    radial-gradient(840px circle at 84% 80%, rgba(61,90,138,0.22), transparent 65%);
}
.tb-founder__inner {
  position: relative;
  display: grid; grid-template-columns: 5fr 7fr; gap: 80px;
  align-items: stretch;
}
.tb-founder__left { display: flex; flex-direction: column; }
.tb-founder__body { display: flex; flex-direction: column; justify-content: flex-end; }
.tb-founder__body .tb-hero__actions { margin-top: var(--space-md); }
.tb-founder__left .eyebrow-lockup { margin-bottom: 22px; }
.tb-founder__name {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 56px; line-height: 1.05; letter-spacing: -0.018em;
  color: var(--paper); margin: 0 0 10px;
}
.tb-founder__role {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive-light);
  margin: 0 0 32px;
}
.tb-founder__creds {
  border-top: 1px solid rgba(196, 191, 160, 0.20);
  border-bottom: 1px solid rgba(196, 191, 160, 0.20);
  padding: 18px 0; margin: 0 0 28px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive-light);
  line-height: 1.95;
}
.tb-founder__verify {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px;
  padding: 2px 8px 2px 7px;
  border: 1px solid rgba(196, 191, 160, 0.38);
  border-radius: 999px;
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--olive-light); text-decoration: none;
  vertical-align: 2px;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.tb-founder__verify svg { display: block; opacity: 0.85; }
.tb-founder__verify:hover {
  border-color: rgba(196, 191, 160, 0.75);
  background-color: rgba(196, 191, 160, 0.08);
  color: #e8e3c2;
}
.tb-founder__body p {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.7;
  color: var(--ash); margin: 0 0 18px;
}
.tb-founder__body p:last-of-type { margin-bottom: 28px; }
.tb-founder__body em { font-style: italic; color: var(--olive-light); }
.tb-founder__signature {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 28px; color: var(--olive-light);
  margin: 0 0 32px; line-height: 1;
}

.tb-founder__photo {
  position: absolute; inset: 0;
  background-image: url("../assets/founder-staircase.jpg");
  background-size: cover;
  background-position: 20% center;
  filter: grayscale(1) contrast(1.05) brightness(0.55);
  opacity: 0.45;
  pointer-events: none;
}
.tb-founder__photo-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(21,20,15,0.85) 0%, rgba(21,20,15,0.55) 35%, rgba(21,20,15,0.25) 100%),
    linear-gradient(180deg, rgba(21,20,15,0.10) 0%, rgba(21,20,15,0.10) 60%, rgba(21,20,15,0.35) 100%);
  pointer-events: none;
}

/* ---------- Editorial strip beneath the founder ---------- */
.tb-editorial-strip {
  position: relative;
  background: var(--footer);
  border-top: 1px solid rgba(196, 191, 160, 0.18);
  height: 420px;
  overflow: hidden;
}
.tb-editorial-strip__img {
  position: absolute; inset: 0;
  background-image: url("../assets/founder-staircase.jpg");
  background-size: cover;
  background-position: center 35%;
  filter: grayscale(1) contrast(1.05) brightness(0.92);
  opacity: 0.78;
}
.tb-editorial-strip__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(21,20,15,0.30) 0%, rgba(21,20,15,0.05) 35%, rgba(21,20,15,0.05) 65%, rgba(21,20,15,0.45) 100%),
    linear-gradient(90deg, rgba(21,20,15,0.35) 0%, rgba(21,20,15,0.10) 50%, rgba(21,20,15,0.35) 100%);
}
.tb-editorial-strip__cite {
  position: absolute; left: 0; right: 0; bottom: 32px;
  text-align: center;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 22px; line-height: 1.3; color: var(--olive-light);
  letter-spacing: -0.005em;
  padding: 0 var(--gutter);
}
.tb-editorial-strip__cite em { color: var(--paper); font-style: italic; }
@media (max-width: 980px) {
  .tb-editorial-strip { height: 260px; }
  .tb-editorial-strip__cite { font-size: 16px; bottom: 20px; }
}

/* =========================================================================
   Open band, full-width display, dark, atmos, single CTA
   ========================================================================= */
.tb-open {
  position: relative; overflow: hidden;
  background: var(--scrim); color: var(--paper);
  padding: var(--space-section-lg) 0;
  text-align: center;
}
.tb-open__atmos {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(640px circle at 20% 30%, rgba(150,146,101,0.15), transparent 60%),
    radial-gradient(800px circle at 80% 70%, rgba(61,90,138,0.20), transparent 65%);
}
.tb-open__inner { position: relative; max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }
.tb-open .eyebrow-lockup {
  margin-bottom: 26px;
  justify-content: center;
}
.tb-open__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 64px; line-height: 1.08; letter-spacing: -0.018em;
  color: var(--paper); margin: 0 0 24px;
  text-wrap: balance;
}
.tb-open__title em { font-style: italic; color: var(--olive-light); }
.tb-open__sub {
  font-family: var(--font-sans); font-size: 18px; font-weight: 300; line-height: 1.6;
  color: var(--ash); margin: 0 0 36px; max-width: 620px; margin-left: auto; margin-right: auto;
}
.tb-open__actions {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}

/* =========================================================================
   FAQ accordion, Important Answer
   ========================================================================= */
.tb-faq { background: var(--canvas); padding: var(--space-section) 0; border-top: 1px solid var(--hairline); }
.tb-faq__head { text-align: center; max-width: 720px; margin: 0 auto var(--space-xxl); }
.tb-faq__head .eyebrow-lockup { margin-bottom: 18px; }
.tb-faq__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 48px; line-height: 1.08; letter-spacing: -0.018em;
  color: var(--ink); margin: 0 0 14px;
  text-wrap: balance;
}
.tb-faq__title em { font-style: italic; color: var(--olive-deep); }
.tb-faq__sub {
  font-family: var(--font-sans); font-size: 17px; font-weight: 300; line-height: 1.6;
  color: var(--graphite); margin: 0;
}
.tb-faq__list {
  max-width: 820px; margin: 0 auto;
  border-top: 1px solid var(--hairline);
}
.tb-faq__item {
  border-bottom: 1px solid var(--hairline);
}
.tb-faq__q {
  display: grid; grid-template-columns: 1fr 24px; align-items: baseline; gap: 24px;
  width: 100%; background: transparent; border: 0; cursor: pointer;
  padding: var(--space-lg) 0;
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; line-height: 1.25; letter-spacing: -0.005em;
  color: var(--ink); text-align: left;
  transition: color var(--dur-base) var(--ease-standard);
}
.tb-faq__q:hover { color: var(--royal); }
.tb-faq__q em { font-style: italic; color: var(--olive-deep); }
.tb-faq__sign {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 22px; color: var(--royal); line-height: 1; justify-self: end;
}
.tb-faq__a {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.7;
  color: var(--graphite); margin: 0;
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-slower) var(--ease-standard),
              padding var(--dur-slower) var(--ease-standard);
}
.tb-faq__item.is-open .tb-faq__a {
  max-height: 600px;
  padding: 0 0 var(--space-lg);
}
.tb-faq__a em { font-style: italic; color: var(--olive-deep); }

/* =========================================================================
   Practice notes, 3-up editorial cards
   ========================================================================= */
.tb-notes {
  background: var(--canvas-warm);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.tb-notes__head { max-width: 760px; margin-bottom: 48px; }
.tb-notes__head .eyebrow-lockup { margin-bottom: 18px; }
.tb-notes__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 44px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink); margin: 0;
  text-wrap: balance;
}
.tb-notes__title em { font-style: italic; color: var(--olive-deep); }
.tb-notes__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
}
.tb-note {
  padding: var(--space-xxl) var(--space-xl);
  border-right: 1px solid var(--hairline);
  background: var(--canvas-warm);
  display: flex; flex-direction: column;
}
.tb-note:last-child { border-right: 0; }
.tb-note__meta {
  display: flex; gap: 16px; align-items: baseline;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 18px;
}
.tb-note__date { color: var(--slate); }
.tb-note__tag { color: var(--royal); }
.tb-note__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; line-height: 1.25; letter-spacing: -0.005em;
  color: var(--ink); margin: 0 0 14px;
  text-wrap: balance;
}
.tb-note__title em { font-style: italic; color: var(--olive-deep); }
.tb-note__excerpt {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.6;
  color: var(--graphite); margin: 0 0 22px;
}
.tb-note__more {
  margin-top: auto;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--royal);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.tb-note__more::after { content: "→"; transition: transform var(--dur-base) var(--ease-standard); }
.tb-note__more:hover::after { transform: translateX(4px); }

/* =========================================================================
   Offices tri-col strip
   ========================================================================= */
.tb-offices {
  background: var(--canvas);
  padding: var(--space-xxl) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.tb-offices__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.tb-office {
  padding: 0 var(--space-xl);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 8px;
}
.tb-office:first-child { padding-left: 0; }
.tb-office:last-child { padding-right: 0; border-right: 0; }
.tb-office__label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate);
}
.tb-office__where {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; line-height: 1.2; color: var(--ink);
  letter-spacing: -0.005em;
}
.tb-office__where em { font-style: italic; color: var(--olive-deep); }
.tb-office__meta {
  font-family: var(--font-sans); font-size: 13px; color: var(--graphite); margin: 0;
}

/* =========================================================================
   Legal document layout — privacy.html / terms.html
   ========================================================================= */
.tb-legal {
  background: var(--canvas);
  padding: var(--space-section) 0 var(--space-section);
  border-top: 1px solid var(--hairline);
}
.tb-legal__shell { max-width: 760px; margin: 0 auto; }

.tb-legal__meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--charcoal);
  border-bottom: 1px solid var(--charcoal);
  margin-bottom: 48px;
}
.tb-legal__meta-cell { display: flex; flex-direction: column; gap: 4px; }
.tb-legal__meta-label {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate);
}
.tb-legal__meta-value {
  font-family: var(--font-serif); font-size: 14px; font-weight: 500; color: var(--ink);
}

.tb-legal__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 40px; line-height: 1.1; letter-spacing: -0.012em;
  color: var(--ink); margin: 0 0 12px;
  text-align: center; text-wrap: balance;
}
.tb-legal__sub {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate);
  text-align: center; margin: 0 0 48px;
}

.tb-legal__preamble {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.7;
  color: var(--ink-soft); margin: 0 0 40px;
  padding: 0 0 28px; border-bottom: 1px solid var(--hairline);
}
.tb-legal__preamble p { margin: 0 0 12px; }
.tb-legal__preamble p:last-child { margin-bottom: 0; }
.tb-legal__preamble em { font-style: italic; }
.tb-legal__preamble strong {
  font-family: var(--font-sans);
  font-weight: 600;
  font-style: normal;
  font-size: inherit;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
}

.tb-legal__article { margin: 0 0 36px; }
.tb-legal__art-head {
  display: grid; grid-template-columns: 60px 1fr; gap: 16px;
  align-items: baseline;
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.tb-legal__art-num {
  font-family: var(--font-serif); font-style: italic;
  font-size: 18px; font-weight: 500; color: var(--royal); line-height: 1;
}
.tb-legal__art-title {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 13px; line-height: 1.3; color: var(--ink);
  margin: 0; text-transform: uppercase; letter-spacing: 0.14em;
}
.tb-legal__clause {
  display: grid; grid-template-columns: 60px 1fr; gap: 16px;
  margin-bottom: 14px; align-items: baseline;
}
.tb-legal__clause:last-child { margin-bottom: 0; }
.tb-legal__clause-num {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--graphite); letter-spacing: 0.04em;
  line-height: 1.75; text-align: right; padding-right: 4px;
}
.tb-legal__clause-body {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.75;
  color: var(--ink-soft); text-align: justify; hyphens: auto;
}
.tb-legal__clause-body em { font-style: italic; }
.tb-legal__clause-body strong {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: inherit;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
}
.tb-legal__clause-body a {
  color: var(--royal); text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.tb-legal__sig {
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--charcoal);
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
}
.tb-legal__sig-block {
  font-family: var(--font-sans); font-size: 12px;
  color: var(--ink-soft); line-height: 1.6;
}
.tb-legal__sig-label {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 8px;
}
.tb-legal__sig-name {
  font-family: var(--font-serif); font-size: 18px; font-weight: 500;
  color: var(--ink); margin-bottom: 4px; font-style: italic;
}
.tb-legal__sig-role {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite);
}

@media (max-width: 720px) {
  .tb-legal__meta { grid-template-columns: 1fr; gap: 12px; }
  .tb-legal__art-head, .tb-legal__clause { grid-template-columns: 44px 1fr; gap: 12px; }
  .tb-legal__title { font-size: 30px; }
  .tb-legal__clause-body { text-align: left; }
  .tb-legal__sig { grid-template-columns: 1fr; gap: 24px; }
}

/* =========================================================================
   Image slots, warm-neutral editorial tone
   ========================================================================= */
image-slot {
  --tb-slot-radius: var(--r-md);
  background: var(--canvas-warm);
  border: 1px solid var(--hairline);
  filter: saturate(0.88) brightness(0.98) contrast(0.96);
  display: block;
}
image-slot::part(placeholder) {
  color: var(--slate);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* Hero, two-column variant with image at right */
.tb-hero__inner.has-image {
  display: grid; grid-template-columns: 7fr 5fr; gap: 80px; align-items: center;
}
.tb-hero__media {
  width: 100%; height: 540px;
  position: relative;
}
.tb-hero__media image-slot {
  width: 100%; height: 100%;
  border-radius: var(--r-sm);
}

/* Wide editorial image strip, full-bleed */
.tb-strip {
  padding: 0; background: var(--canvas);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.tb-strip__media {
  width: 100%; height: 480px;
}
.tb-strip__media image-slot { width: 100%; height: 100%; border: 0; border-radius: 0; }

/* Practice-note thumbnails */
.tb-note__media {
  width: calc(100% + var(--space-xl) * 2);
  margin: calc(var(--space-xxl) * -1) calc(var(--space-xl) * -1) var(--space-xl);
  height: 220px;
}
.tb-note__media image-slot {
  width: 100%; height: 100%;
  border: 0; border-radius: 0;
  border-bottom: 1px solid var(--hairline);
}

/* Open band, optional cover image behind the dark overlay */
.tb-open__cover {
  position: absolute; inset: 0; z-index: 0; opacity: 0.35;
}
.tb-open__cover image-slot {
  width: 100%; height: 100%; border: 0; border-radius: 0;
  filter: saturate(0.5) brightness(0.55) contrast(1.05);
}
.tb-open__atmos, .tb-open__inner { position: relative; z-index: 1; }

/* Heritage, small thumb above each milestone */
.tb-heritage__media {
  width: 100%; height: 140px; margin-bottom: 24px;
}
.tb-heritage__media image-slot { width: 100%; height: 100%; border-radius: var(--r-sm); }

@media (max-width: 980px) {
  .tb-hero__inner.has-image { grid-template-columns: 1fr; gap: 32px; }
  .tb-hero__media { height: 320px; }
  .tb-strip__media { height: 280px; }
  .tb-note__media { height: 180px; }
}

/* =========================================================================
   Comparison table (Contact page)
   ========================================================================= */
.tb-compare {
  background: var(--canvas);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}
.tb-compare__head { max-width: 820px; margin-bottom: 48px; }
.tb-compare__head .eyebrow-lockup { margin-bottom: 18px; }
.tb-compare__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 48px; line-height: 1.08; letter-spacing: -0.018em;
  color: var(--ink); margin: 0 0 14px; text-wrap: balance;
}
.tb-compare__title em { font-style: italic; color: var(--olive-deep); }
.tb-compare__sub {
  font-family: var(--font-sans); font-size: 17px; font-weight: 300;
  line-height: 1.6; color: var(--graphite); margin: 0; max-width: 640px;
}
.tb-compare__table {
  border-top: 1px solid var(--hairline);
}
.tb-compare__row {
  display: grid; grid-template-columns: 4fr 4fr 5fr;
  gap: 32px;
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.tb-compare__row.is-head {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--charcoal);
}
.tb-compare__col-h {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate);
}
.tb-compare__col-h.is-us { color: var(--royal); }
.tb-compare__rowtitle {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 20px; line-height: 1.25; color: var(--ink);
  letter-spacing: -0.005em;
}
.tb-compare__rowtitle em { font-style: italic; color: var(--olive-deep); }
.tb-compare__cell {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.65;
  color: var(--graphite);
}
.tb-compare__cell.is-others { color: var(--slate); }
.tb-compare__cell.is-us { color: var(--ink-soft); }
.tb-compare__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 8px;
  border-radius: 50%; background: var(--royal); color: var(--paper);
  font-size: 11px; line-height: 1; vertical-align: -3px;
}

/* =========================================================================
   Experience marquee, list of past organisations
   ========================================================================= */
.tb-experience {
  background: var(--canvas-warm);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.tb-experience__head { max-width: 780px; margin-bottom: 48px; }
.tb-experience__head .eyebrow-lockup { margin-bottom: 18px; }
.tb-experience__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 44px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 14px; text-wrap: balance;
}
.tb-experience__title em { font-style: italic; color: var(--olive-deep); }
.tb-experience__sub {
  font-family: var(--font-sans); font-size: 17px; font-weight: 300;
  line-height: 1.6; color: var(--graphite); margin: 0; max-width: 580px;
}
.tb-experience__list {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--hairline);
}
.tb-experience__list li {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; line-height: 1.25; letter-spacing: -0.005em;
  color: var(--ink);
  display: grid; grid-template-columns: 60px 1fr;
  gap: 24px; align-items: baseline;
}
.tb-experience__list li::before {
  content: counter(exp-counter, upper-roman) "";
  counter-increment: exp-counter;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 14px; color: var(--olive-deep); letter-spacing: 0.06em;
  align-self: center;
}
.tb-experience__list { counter-reset: exp-counter; }

/* =========================================================================
   Profile card (Keith)
   ========================================================================= */
.tb-profile {
  background: var(--canvas);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}
.tb-profile__inner {
  display: grid; grid-template-columns: 4fr 7fr; gap: 64px;
  align-items: start;
}
.tb-profile__left .eyebrow-lockup { margin-bottom: 18px; }
.tb-profile__name {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 48px; line-height: 1.05; letter-spacing: -0.018em;
  color: var(--ink); margin: 0 0 8px;
}
.tb-profile__role {
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--olive-deep);
  margin: 0 0 24px;
}
.tb-profile__creds {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 32px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  line-height: 1.95;
}
.tb-profile__body p {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.7;
  color: var(--graphite); margin: 0 0 18px;
}
.tb-profile__body p:last-child { margin-bottom: 0; }
.tb-profile__body em { font-style: italic; color: var(--olive-deep); }

/* =========================================================================
   CTA panel (royal-deep climactic)
   ========================================================================= */
.tb-ctawrap { padding: var(--space-section) 0; background: var(--canvas); }
.tb-cta {
  position: relative; overflow: hidden;
  background: var(--royal-deep);
  color: var(--paper);
  border-radius: var(--r-sm);
}
.tb-cta__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--olive); }
.tb-cta__atmos {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(720px circle at 10% 20%, rgba(150,146,101,0.18), transparent 60%),
    radial-gradient(840px circle at 90% 80%, rgba(61,90,138,0.28), transparent 65%);
}
.tb-cta__inner {
  position: relative;
  padding: var(--space-section-lg) var(--space-xxl);
  max-width: 920px;
}
.tb-cta .eyebrow-lockup { margin-bottom: 22px; }
.tb-cta .eyebrow-lockup,
.tb-cta .eyebrow-lockup.on-dark { color: #E4DFC4; }
.tb-cta .eyebrow-lockup::before,
.tb-cta .eyebrow-lockup.on-dark::before { background: #E4DFC4; }
.tb-cta__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 56px; line-height: 1.08; letter-spacing: -0.018em;
  color: var(--paper); margin: 0 0 18px;
  text-wrap: balance;
}
.tb-cta__title em { font-style: italic; color: var(--olive-light); }
.tb-cta__sub {
  font-family: var(--font-sans); font-size: 17px; font-weight: 300; line-height: 1.6;
  color: var(--olive-light); margin: 0 0 32px;
  max-width: 540px;
}
.tb-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* =========================================================================
   CTA — Split variant with calendar on right
   ========================================================================= */
.tb-cta--split { }
.tb-cta__inner--split {
  display: grid; grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: center;
  max-width: none;
}
.tb-cta__col { min-width: 0; }
.tb-cta__cal { display: flex; justify-content: center; min-width: 0; }

/* Calendar widget */
.tb-cal {
  box-sizing: border-box;
  background: rgba(250, 248, 242, 0.06);
  border: 1px solid rgba(196, 191, 160, 0.20);
  border-radius: var(--r-sm);
  padding: 22px 22px 18px;
  width: 100%; max-width: 384px;
  color: var(--paper);
  backdrop-filter: blur(6px);
}
.tb-cal__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.tb-cal__month {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 18px; line-height: 1; color: var(--paper);
  letter-spacing: -0.005em;
}
.tb-cal__month em { font-style: italic; color: var(--olive-light); font-weight: 400; }
.tb-cal__nav {
  font-family: var(--font-sans); font-size: 14px; color: var(--olive-light);
  letter-spacing: 0.08em;
}
.tb-cal__navbtn {
  background: transparent; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin-left: 2px;
  color: var(--olive-light); cursor: pointer;
  font-family: var(--font-sans); font-size: 18px; line-height: 1;
  border-radius: 50%;
  transition: color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}
.tb-cal__navbtn:not(:disabled):hover { background: rgba(196, 191, 160, 0.16); }
.tb-cal__navbtn:hover { color: var(--paper); }

.tb-cal__week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(196, 191, 160, 0.18);
}
.tb-cal__week span {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--olive-light);
  text-align: center; text-transform: uppercase;
}
.tb-cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  row-gap: 4px;
}
.tb-cal__day {
  display: flex; align-items: center; justify-content: center;
  height: 32px; width: 100%;
  background: transparent; border: 0;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--paper);
  border-radius: 50%;
  position: relative;
  cursor: default;
  transition: background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.tb-cal__day.is-empty { color: transparent; }
.tb-cal__day.is-past { color: rgba(250, 248, 242, 0.20); }
.tb-cal__day:not(.is-open):not(.is-today):not(.is-empty):not(.is-past):not(.is-holiday) {
  color: rgba(250, 248, 242, 0.35);
}
.tb-cal__day.is-today {
  background: var(--paper);
  color: var(--royal-deep);
  font-weight: 700;
}
.tb-cal__day.is-open {
  color: #B8C6DC;
  cursor: pointer;
}
.tb-cal__day.is-open:hover {
  background: rgba(184, 198, 220, 0.20);
  color: var(--paper);
}
.tb-cal__day.is-open::after {
  content: "";
  position: absolute; bottom: 3px; left: 50%;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: #B8C6DC;
}
.tb-cal__day.is-picked,
.tb-cal__day.is-picked.is-open {
  background: #B53A2C; color: var(--paper);
}
.tb-cal__day.is-picked::after { background: var(--paper); }

.tb-cal__day.is-unavailable {
  color: rgba(181, 58, 44, 0.95);
  cursor: not-allowed;
}
.tb-cal__day.is-unavailable::after {
  content: "";
  position: absolute; bottom: 3px; left: 50%;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: #B53A2C;
}
.tb-cal__day.is-unavailable:hover {
  background: transparent; color: rgba(181, 58, 44, 0.95);
}
.tb-cal__day.is-today.is-open { color: var(--royal-deep); }
.tb-cal__day.is-today.is-open::after { background: var(--royal-deep); }

/* Public holiday — closed, marked with a warm gold dot. */
.tb-cal__day.is-holiday {
  color: rgba(201, 169, 106, 0.95) !important;
  cursor: not-allowed;
}
.tb-cal__day.is-holiday::after {
  content: "";
  position: absolute; bottom: 3px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%; background: #C9A96A;
}
.tb-cal__day.is-holiday:hover {
  background: transparent; color: rgba(201, 169, 106, 0.92);
}

/* Selected open day — borrow the "today" paper-fill look. */
.tb-cal__day.is-selected {
  background: var(--paper);
  color: var(--royal-deep);
  font-weight: 700;
}
.tb-cal__day.is-selected::after { background: var(--royal-deep); }
.tb-cal__day.is-selected:hover { background: var(--paper); color: var(--royal-deep); }
.tb-cal__legend {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: nowrap;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(196, 191, 160, 0.18);
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--olive-light);
}
.tb-cal__legitem { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tb-cal__sw {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
}
.tb-cal__sw--open  { background: #B8C6DC; }
.tb-cal__sw--today { background: var(--paper); }
.tb-cal__sw--picked { background: #B53A2C; }
.tb-cal__sw--holiday { background: #C9A96A; }

/* ---------- Picked-day time slots ---------- */
.tb-cal__slots {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(196, 191, 160, 0.18);
}
.tb-cal__slots-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive-light);
}
.tb-cal__slots-head em { font-style: italic; color: var(--ash); font-weight: 400; }
.tb-cal__slots-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.tb-cal__slot {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 6px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--paper);
  background: rgba(250, 248, 242, 0.08);
  border: 1px solid rgba(196, 191, 160, 0.20);
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.tb-cal__slot:hover {
  background: var(--olive-light);
  color: var(--royal-deep);
}
.tb-cal__slot.is-booked {
  color: rgba(250, 248, 242, 0.30);
  text-decoration: line-through;
  background: transparent;
  border-style: dashed;
  border-color: rgba(196, 191, 160, 0.12);
  cursor: not-allowed;
  pointer-events: none;
}
.tb-cal__slots-foot {
  margin: 12px 0 0;
  font-family: var(--font-sans); font-size: 12px; line-height: 1.4;
  color: var(--ash); font-style: italic;
}

@media (max-width: 980px) {
  .tb-cta__inner--split { grid-template-columns: 1fr; gap: 32px; }
  .tb-cta__cal { justify-content: flex-start; }
}

/* Calendar on phones — let it take the full column and keep the day cells
   square. The base rule fixes each cell at height:32px while the seven columns
   stretch with the screen, so on a phone the round day markers became wide,
   squashed ovals (the "squeezed" look). aspect-ratio ties height to the column
   width so the circles stay round at any size, and the widget fills its column. */
@media (max-width: 600px) {
  .tb-cta__inner--split { padding: 40px 18px !important; }
  .tb-cta__cal { justify-content: stretch; }
  .tb-cal { max-width: 100%; padding: 18px 16px 16px; }
  .tb-cal__grid { row-gap: 2px; }
  .tb-cal__day { height: auto; aspect-ratio: 1 / 1; font-size: 12px; }
  .tb-cal__slots-grid { gap: 5px; }
  .tb-cal__slot { padding: 10px 4px; font-size: 11px; }
  /* The four legend items don't fit on one line on a phone, so "Public holiday"
     got cramped; let them wrap onto a second line, aligned left. */
  .tb-cal__legend {
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 16px;
    row-gap: 8px;
  }
}

/* =========================================================================
   Contact form (Contact page)
   ========================================================================= */
.tb-contact {
  background: var(--canvas);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}
.tb-contact__head { max-width: 780px; margin-bottom: 48px; }
.tb-contact__head .eyebrow-lockup { margin-bottom: 18px; }
.tb-contact__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 52px; line-height: 1.08; letter-spacing: -0.018em;
  color: var(--ink); margin: 0 0 14px;
  text-wrap: balance;
}
.tb-contact__title em { font-style: italic; color: var(--olive-deep); }
.tb-contact__sub {
  font-family: var(--font-sans); font-size: 17px; font-weight: 300; line-height: 1.6;
  color: var(--graphite); margin: 0; max-width: 580px;
}
.tb-contact__pane {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-xxl);
}
.tb-contact__layout {
  display: grid; grid-template-columns: 7fr 5fr; gap: 80px;
}

/* Capacity selector (segmented radio) */
.tb-capacity {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 28px;
}
.tb-capacity__label {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--ink-soft);
}
.tb-capacity__options {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--hairline);
}
.tb-capacity__opt {
  padding: 14px 16px; cursor: pointer;
  text-align: center;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--ink-soft);
  background: var(--canvas);
  border-right: 1px solid var(--hairline);
  transition: background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.tb-capacity__opt:last-child { border-right: 0; }
.tb-capacity__opt:hover { background: var(--hairline-soft); }
.tb-capacity__opt.is-active {
  background: var(--charcoal); color: var(--paper);
}

.tb-field { display: flex; flex-direction: column; gap: 8px; }
.tb-field__label {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--ink-soft);
}
.tb-field__req { font-style: italic; color: var(--royal); font-weight: 600; }
.tb-field__input {
  background: var(--canvas); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.55;
  padding: 10px 0; border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0; outline: none; width: 100%;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.tb-field__input::placeholder { color: var(--stone); }
.tb-field__input:focus,
.tb-field__input.is-focused {
  border-bottom: 2px solid var(--charcoal); padding-bottom: 9px;
}
.tb-field__textarea { resize: vertical; min-height: 120px; padding: 10px 0; text-indent: 0; vertical-align: top; }

.tb-contact__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin-bottom: 28px;
}
.tb-contact__row { margin-bottom: 28px; }
.tb-contact__actions {
  margin-top: 24px;
  display: flex; align-items: center; gap: 18px;
}
.tb-contact__actions .btn { flex: 0 0 auto; }
/* On phones the button and its fine print don't fit side by side; stacking
   keeps the button at full size (it was shrinking to a cramped, three-line
   pill) and gives the note its own line. */
@media (max-width: 600px) {
  .tb-contact__actions { flex-direction: column; align-items: flex-start; gap: 14px; }
}
.tb-contact__help {
  font-family: var(--font-sans); font-size: 13px; color: var(--slate);
}
.tb-contact__ok {
  padding: var(--space-xxl) 0;
}
.tb-contact__okTitle {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 40px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink); margin: 18px 0 12px;
}
.tb-contact__okBody {
  font-family: var(--font-sans); font-size: 17px; font-weight: 300;
  color: var(--graphite); line-height: 1.6;
}

/* Aside in contact (correspondence card) — editorial luxury restraint */
.tb-corr {
  position: relative;
  background: var(--paper);
  padding: 44px 40px 40px;
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--olive);
}
.tb-corr__eb {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 24px;
  display: block;
  opacity: 0.78;
}
.tb-corr h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 28px;
}
.tb-corr h3 em { font-style: italic; color: var(--olive-deep); font-weight: 400; }
.tb-corr__dl {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-direction: column;
}
.tb-corr__dl li {
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: baseline;
  gap: 20px;
}
.tb-corr__dl li:last-child { border-bottom: 1px solid var(--hairline); }
.tb-corr__dl li span:first-child {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--olive-deep);
  opacity: 0.85;
}
.tb-corr__dl li span:last-child {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.55;
}

/* =========================================================================
   Footer
   ========================================================================= */
.tb-footer {
  position: relative; overflow: hidden;
  background: var(--footer); color: var(--paper);
  padding: 96px 0 72px;
}
.tb-footer__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--olive); }
.tb-footer__inner { position: relative; }
.tb-footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 56px;
}
.tb-footer__wm { display: block; height: 52px; width: 52px; margin-bottom: 22px; border-radius: var(--r-sm); opacity: 0.92; }
.tb-footer__about {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.75; font-weight: 300;
  color: rgba(250, 248, 242, 0.7); margin: 0; max-width: 280px;
  letter-spacing: 0.005em;
}
.tb-footer__heading {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--olive-light);
  margin: 0 0 22px;
  opacity: 0.92;
}
.tb-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.tb-footer__list li,
.tb-footer__list a {
  font-family: var(--font-sans); font-size: 14px; font-weight: 300; line-height: 1.7;
  color: rgba(250, 248, 242, 0.86); text-decoration: none;
  letter-spacing: 0.012em;
  transition: color var(--dur-base) var(--ease-standard);
}
.tb-footer__list a:hover { color: var(--olive-light); }

/* Office hours block in footer */
.tb-footer__hours {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(196, 191, 160, 0.18);
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  font-size: 13px !important;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(250, 248, 242, 0.72) !important;
  font-weight: 400 !important;
  white-space: pre-line;
}
.tb-footer__hours span:first-child {
  color: rgba(250, 248, 242, 0.72) !important;
  font-weight: 400 !important;
}
.tb-footer__legal {
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid rgba(250, 248, 242, 0.08);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 22px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 300;
  color: rgba(250, 248, 242, 0.48);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.tb-footer__legalCo { display: flex; flex-direction: column; gap: 7px; }
.tb-footer__uen { color: rgba(250, 248, 242, 0.40); letter-spacing: 0.14em; }
.tb-footer__legal strong { font-weight: 500 !important; color: rgba(250, 248, 242, 0.72); letter-spacing: 0.14em; }
.tb-footer__legalRight {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
}
.tb-footer__legalRight a {
  color: rgba(250, 248, 242, 0.48); text-decoration: none; padding: 0;
  letter-spacing: 0.10em;
  transition: color var(--dur-base) var(--ease-standard);
}
.tb-footer__legalRight a:hover { color: var(--olive-light); }
.tb-footer__rightsEnd { color: rgba(250, 248, 242, 0.40); }

/* =========================================================================
   Small-screen reflow
   ========================================================================= */
@media (max-width: 980px) {
  .tb-nav { padding: 0 var(--space-lg); grid-template-columns: auto 1fr; }
  .tb-nav__menu { display: none; }
  .tb-nav__right .tb-nav__enq { display: none; }
  .tb-hero__title { font-size: 52px; }
  .tb-pagehero__title { font-size: 44px; }
  .tb-pagehero__inner, .tb-belief__inner, .tb-twocol__grid,
  .tb-speaker__inner, .tb-profile__inner, .tb-contact__layout {
    grid-template-columns: 1fr; gap: 32px;
  }
  .tb-services__title, .tb-sectionhead__title, .tb-belief__title,
  .tb-twocol__title, .tb-compare__title, .tb-experience__title,
  .tb-speaker__title, .tb-contact__title, .tb-cta__title { font-size: 32px; }
  .tb-services__grid { grid-template-columns: 1fr 1fr; }
  .tb-services__head {
    margin-bottom: var(--space-xxl);
    padding-bottom: var(--space-xl);
  }
  .tb-services__masthead {
    grid-template-columns: 1fr;
    align-items: start;
    column-gap: 0;
  }
  .tb-services__aside { padding-bottom: 0; }
  .tb-services__sub { max-width: 520px; }
  .tb-service { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .tb-service:nth-child(odd) { border-right: 1px solid var(--hairline); }
  .tb-numerals__grid, .tb-numerals__grid.is-2, .tb-numerals__grid.is-4,
  .tb-sectors__grid, .tb-economies, .tb-steps__list, .tb-steps__list.is-3, .tb-steps__list.is-5 {
    grid-template-columns: 1fr;
  }
  .tb-numeral, .tb-sector, .tb-economy, .tb-step {
    border-right: 0; border-bottom: 1px solid var(--hairline);
  }
  .tb-sector {
    border: 1px solid color-mix(in oklab, var(--hairline) 82%, var(--olive-deep));
    border-radius: 4px;
  }
  .tb-numeral:last-child, .tb-economy:last-child, .tb-step:last-child { border-bottom: 0; }
  .tb-compare__row { grid-template-columns: 1fr; gap: 12px; }
  .tb-compare__col-h { display: none; }
  .tb-compare__row.is-head { display: none; }
  .tb-dl { grid-template-columns: 1fr; }
  .tb-ladder__row { grid-template-columns: 60px 1fr; gap: 16px; }
  .tb-ladder__verdict { grid-column: 2; }
  .tb-ladder__body { grid-column: 2; }
  .tb-footer__grid { grid-template-columns: 1fr 1fr; }
  .tb-contact__grid { grid-template-columns: 1fr; gap: 24px; }
  .tb-eventcard__meta li { grid-template-columns: 1fr; gap: 2px; }
  .tb-manifesto__inner { grid-template-columns: 1fr; gap: 32px; }
  .tb-manifesto__photo { height: 280px; order: -1; }
  .tb-trust__grid, .tb-heritage__grid, .tb-notes__grid, .tb-offices__grid {
    grid-template-columns: 1fr;
  }
  .tb-trust__cell, .tb-heritage__cell, .tb-note, .tb-office {
    border-right: 0; border-bottom: 1px solid var(--hairline);
    padding: var(--space-lg) 0;
  }
  .tb-trust__cell:last-child, .tb-heritage__cell:last-child,
  .tb-note:last-child, .tb-office:last-child { border-bottom: 0; }
  .tb-founder__inner { grid-template-columns: 1fr; gap: 32px; }
  .tb-hero__title, .tb-manifesto__quote { font-size: 36px; }
  .tb-heritage__title, .tb-notes__title, .tb-faq__title, .tb-founder__name { font-size: 32px; }
  .tb-faq__q { font-size: 18px; }
}


/* =========================================================================
   Join the community form (sourcing.html)
   ========================================================================= */
.tb-join {
  position: relative; overflow: hidden;
  background: #f8f6ee;
  color: var(--ink);
  padding: var(--space-section-lg) 0;
  border-top: 1px solid var(--hairline);
}
.tb-join__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--olive-deep); }
.tb-join__atmos { display: none; }
.tb-join__inner {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: start;
}
.tb-join__intro .eyebrow-lockup { margin-bottom: 24px; color: var(--olive-deep); }
.tb-join__intro .eyebrow-lockup::before { background: var(--olive-deep); }
.tb-join__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 48px; line-height: 1.1; letter-spacing: -0.018em;
  color: var(--ink); margin: 0 0 20px; text-wrap: balance;
}
.tb-join__title em { font-style: italic; color: var(--olive-deep); }
.tb-join__lede {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.7;
  color: var(--graphite);
  margin: 0 0 28px; max-width: 460px;
}
.tb-join__notes {
  list-style: none; padding: 24px 0 0; margin: 0;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 12px;
}
.tb-join__notes li {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.55;
  color: var(--graphite);
  display: grid; grid-template-columns: 28px 1fr; gap: 8px;
}
.tb-join__notes li span {
  font-family: var(--font-serif); font-style: italic;
  color: var(--olive-deep); opacity: 0.9;
}

/* form panel — dark card sitting on the light section */
.tb-join__form {
  position: relative;
  background: var(--footer);
  border: 1px solid color-mix(in oklab, var(--olive-deep) 30%, transparent);
  padding: var(--space-xxl);
  border-radius: var(--r-sm);
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 24px; row-gap: 22px;
  color: var(--paper);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 rgba(0, 0, 0, 0.45) inset,
    0 22px 36px -16px rgba(10, 13, 24, 0.35),
    0 60px 90px -40px rgba(10, 13, 24, 0.30);
}
.tb-join__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tb-join__field--full { grid-column: 1 / -1; }
.tb-join__label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive-light);
}
.tb-join__hint {
  font-weight: 400; letter-spacing: 0.08em; text-transform: none;
  color: var(--ash); opacity: 0.75;
  margin-left: 8px;
}
.tb-join__input,
.tb-join__select {
  appearance: none;
  font-family: var(--font-sans); font-size: 15px;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(196, 191, 160, 0.22);
  border-radius: 3px;
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.tb-join__input::placeholder { color: rgba(212, 207, 167, 0.45); }
.tb-join__input:hover,
.tb-join__select:hover { border-color: rgba(196, 191, 160, 0.45); }
.tb-join__input:focus,
.tb-join__select:focus {
  outline: none;
  border-color: var(--olive-light);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(196, 191, 160, 0.18);
}
.tb-join__select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(196,191,160,0.7) 50%),
    linear-gradient(135deg, rgba(196,191,160,0.7) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.tb-join__select:disabled {
  opacity: 0.45; cursor: not-allowed;
}
.tb-join__select option { color: var(--ink); background: var(--paper); }

/* chip-style checkbox / radio groups */
.tb-join__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tb-join__chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(196, 191, 160, 0.25);
  border-radius: 999px;
  font-family: var(--font-sans); font-size: 14px;
  color: var(--ash);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.tb-join__chip input {
  position: absolute; opacity: 0; pointer-events: none;
}
.tb-join__chip:hover {
  border-color: rgba(196, 191, 160, 0.55);
  color: var(--paper);
}
.tb-join__chip.is-on {
  border-color: var(--olive-light);
  background: rgba(196, 191, 160, 0.18);
  color: var(--paper);
}
.tb-join__chip.is-on::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--olive-light);
  box-shadow: 0 0 0 3px rgba(196, 191, 160, 0.25);
}

.tb-join__actions {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.tb-join__finePrint {
  font-family: var(--font-sans); font-size: 12px; line-height: 1.55;
  color: var(--ash); opacity: 0.75; max-width: 360px;
}
@media (max-width: 960px) {
  .tb-join__inner { grid-template-columns: 1fr; gap: 40px; }
  .tb-join__title { font-size: 36px; }
  .tb-join__form { grid-template-columns: 1fr; padding: var(--space-xl); }
  .tb-join__actions { justify-content: flex-start; }
}


/* =========================================================================
   Two-column section with photographic background (compliance.html § I)
   ========================================================================= */
.tb-twocol--photobg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--space-section) + 12px);
  padding-bottom: calc(var(--space-section) + 12px);
}
.tb-twocol--photobg > .container { position: relative; z-index: 2; }
.tb-twocol__bg {
  position: absolute; inset: -4%;
  z-index: 0;
  pointer-events: none;
  background-image: url("../assets/tpqa-window.jpg");
  background-size: cover;
  background-position: center 55%;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  transform-origin: 50% 50%;
  animation: tb-twocol-bg-drift 28s ease-in-out infinite;
  will-change: transform;
}
.tb-twocol__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--canvas) 86%, transparent) 0%,
      color-mix(in oklab, var(--canvas) 76%, transparent) 32%,
      color-mix(in oklab, var(--canvas) 48%, transparent) 60%,
      color-mix(in oklab, var(--canvas) 72%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--canvas) 60%, transparent) 0%,
      color-mix(in oklab, var(--canvas) 38%, transparent) 50%,
      color-mix(in oklab, var(--canvas) 72%, transparent) 100%);
}
@keyframes tb-twocol-bg-drift {
  0%   { transform: scale(1.06) translate3d(-1.2%, -0.6%, 0); }
  50%  { transform: scale(1.10) translate3d( 1.2%,  0.8%, 0); }
  100% { transform: scale(1.06) translate3d(-1.2%, -0.6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tb-twocol__bg { animation: none; transform: scale(1.04); }
}
/* fine horizontal hairlines at top and bottom to frame the photo band */
.tb-twocol--photobg::before,
.tb-twocol--photobg::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: color-mix(in oklab, var(--olive-deep) 40%, var(--hairline));
  z-index: 3;
}
.tb-twocol--photobg::before { top: 0; }
.tb-twocol--photobg::after { bottom: 0; }
@media (max-width: 720px) {
  .tb-twocol__bg { background-position: center 24%; }
  .tb-twocol__bg::after {
    background:
      linear-gradient(180deg, color-mix(in oklab, var(--canvas) 88%, transparent) 0%, color-mix(in oklab, var(--canvas) 78%, transparent) 50%, color-mix(in oklab, var(--canvas) 92%, transparent) 100%);
  }
}


/* =========================================================================
   Track record callout (compliance.html § II)
   ========================================================================= */
.tb-record {
  background: var(--paper);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}
.tb-record__inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: center;
  padding: var(--space-xxl);
  background:
    radial-gradient(120% 80% at 18% 0%, color-mix(in oklab, var(--paper) 100%, white) 0%, transparent 55%),
    linear-gradient(168deg, color-mix(in oklab, var(--canvas) 96%, var(--paper)) 0%, color-mix(in oklab, var(--canvas) 88%, var(--olive-deep) 5%) 100%);
  border: 1px solid color-mix(in oklab, var(--hairline) 65%, var(--olive-deep));
  border-radius: 6px;
  box-shadow:
    0 1px 0 #ffffff inset,
    0 -1px 0 color-mix(in oklab, var(--olive-deep) 10%, transparent) inset,
    0 14px 22px -10px rgba(60, 50, 30, 0.12),
    0 36px 50px -28px rgba(60, 50, 30, 0.24);
}
.tb-record__head .eyebrow-lockup { margin-bottom: 18px; }
.tb-record__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 30px; line-height: 1.18; letter-spacing: -0.012em;
  color: var(--ink); margin: 0 0 14px;
}
.tb-record__sub {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.7;
  color: var(--graphite); margin: 0; max-width: 540px;
}
.tb-record__sub em { font-style: italic; color: var(--olive-deep); }
.tb-record__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.tb-record__item {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.tb-record__link {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 18px;
  align-items: center;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--hairline) 70%, var(--olive-deep));
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  box-shadow:
    0 1px 0 #ffffff inset,
    0 8px 14px -8px rgba(60, 50, 30, 0.12);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.tb-record__link:hover {
  border-color: color-mix(in oklab, var(--olive-deep) 70%, var(--hairline));
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 14px 22px -10px rgba(60, 50, 30, 0.18);
}
.tb-record__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%,
      color-mix(in oklab, var(--paper) 100%, white) 0%,
      color-mix(in oklab, var(--royal) 18%, var(--canvas)) 100%);
  color: var(--royal);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 -1px 0 color-mix(in oklab, var(--royal) 22%, transparent) inset,
    0 0 0 1px color-mix(in oklab, var(--royal) 35%, transparent);
}
.tb-record__icon svg { display: block; }
.tb-record__body { min-width: 0; }
.tb-record__arrow {
  color: color-mix(in oklab, var(--olive-deep) 70%, var(--graphite));
  transition: transform 200ms ease, color 200ms ease;
}
.tb-record__link:hover .tb-record__arrow {
  color: var(--olive-deep);
  transform: translate(2px, -2px);
}
.tb-record__name {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 18px; color: var(--ink); line-height: 1.2;
  margin-bottom: 2px;
}
.tb-record__meta {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--olive-deep);
}
@media (max-width: 960px) {
  .tb-record__inner { grid-template-columns: 1fr; gap: 32px; padding: var(--space-xl); }
}

/* =========================================================================
   Numerals snug variant (used after a tb-twocol "head" section)
   ========================================================================= */
.tb-numerals--snug {
  padding-top: 0;
}

/* =========================================================================
   Beneficiaries list (compliance.html § V)
   ========================================================================= */
.tb-beneficiaries {
  margin-top: 48px;
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--hairline);
}
.tb-beneficiary {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.tb-beneficiary__roman {
  font-family: var(--font-serif); font-style: italic;
  font-size: 44px; font-weight: 400;
  color: var(--royal); line-height: 1;
  letter-spacing: -0.02em;
}
.tb-beneficiary__body { min-width: 0; }
.tb-beneficiary__group {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 8px;
}
.tb-beneficiary__text {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.7;
  color: var(--graphite); margin: 0;
  max-width: 820px;
}
.tb-prose__footnote {
  font-family: var(--font-serif); font-style: italic;
  font-size: 17px; line-height: 1.6;
  color: var(--olive-deep);
  margin: 40px 0 0;
  padding-left: 22px;
  border-left: 2px solid color-mix(in oklab, var(--olive-deep) 50%, transparent);
  max-width: 820px;
}
@media (max-width: 720px) {
  .tb-beneficiary { grid-template-columns: 56px 1fr; gap: 18px; }
  .tb-beneficiary__roman { font-size: 32px; }
}


/* =========================================================================
   Regulatory notice / citation callout (compliance.html § IV)
   ========================================================================= */
.tb-twocol__head .tb-notice { margin-top: 28px; }
.tb-notice {
  margin-top: 28px;
  padding: 22px 24px 20px;
  background:
    linear-gradient(168deg,
      color-mix(in oklab, var(--paper) 100%, white) 0%,
      color-mix(in oklab, var(--canvas) 96%, var(--paper)) 100%);
  border: 1px solid color-mix(in oklab, var(--olive-deep) 30%, var(--hairline));
  border-left: 3px solid var(--olive-deep);
  border-radius: 4px;
  box-shadow:
    0 1px 0 #ffffff inset,
    0 12px 22px -10px rgba(60, 50, 30, 0.10);
}
.tb-notice__head { margin-bottom: 10px; }
.tb-notice__pill {
  display: inline-block;
  padding: 3px 9px;
  font-family: var(--font-sans); font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--olive-deep);
  background: color-mix(in oklab, var(--olive-deep) 12%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--olive-deep) 40%, transparent);
  border-radius: 999px;
  margin-bottom: 10px;
}
.tb-notice__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 18px; line-height: 1.22; letter-spacing: -0.008em;
  color: var(--ink); margin: 0;
}
.tb-notice__lede {
  font-family: var(--font-sans); font-size: 13px; line-height: 1.6;
  color: var(--graphite); margin: 12px 0 12px;
}
.tb-notice__lede em { font-style: italic; color: var(--olive-deep); }
.tb-notice__list {
  list-style: none; padding: 0; margin: 0 0 14px;
  counter-reset: notice;
  display: flex; flex-direction: column; gap: 8px;
}
.tb-notice__list li {
  counter-increment: notice;
  position: relative;
  padding-left: 28px;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.55;
  color: var(--ink);
}
.tb-notice__list li::before {
  content: "(" counter(notice, lower-alpha) ")";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-serif); font-style: italic;
  color: var(--olive-deep);
  font-size: 13px;
}
.tb-notice__list em { font-style: italic; color: var(--olive-deep); }
.tb-notice__foot {
  font-family: var(--font-sans); font-size: 13px; line-height: 1.6;
  color: var(--graphite); margin: 0;
  padding-top: 12px;
  border-top: 1px solid color-mix(in oklab, var(--olive-deep) 18%, var(--hairline));
}
.tb-notice__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--olive-deep);
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--olive-deep) 45%, transparent);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.tb-notice__cta:hover {
  border-color: var(--olive-deep);
  background: color-mix(in oklab, var(--olive-deep) 8%, transparent);
  color: var(--ink);
}
.tb-notice__cta svg { display: block; opacity: 0.85; }


/* Inline icon-only external link used inside .tb-notice__foot */
.tb-notice__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  margin: 0 1px;
  padding: 0;
  vertical-align: -5px;
  color: var(--olive-deep);
  background: color-mix(in oklab, var(--olive-deep) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--olive-deep) 35%, transparent);
  border-radius: 50%;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.tb-notice__icon:hover {
  border-color: var(--olive-deep);
  background: color-mix(in oklab, var(--olive-deep) 14%, transparent);
  color: var(--ink);
  transform: translateY(-1px);
}
.tb-notice__icon svg { display: block; }


/* =========================================================================
   Numerals section with photographic background (compliance.html § II.ii)
   ========================================================================= */
.tb-numerals--photobg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--space-section) + 12px);
  padding-bottom: calc(var(--space-section) + 12px);
}
.tb-numerals--photobg > .container { position: relative; z-index: 2; }
.tb-numerals__bg {
  position: absolute; inset: -4%;
  z-index: 0;
  pointer-events: none;
  background-image: url("../assets/pillars-tablet.jpg");
  background-size: cover;
  background-position: center 50%;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  transform-origin: 50% 50%;
  animation: tb-numerals-bg-drift 32s ease-in-out infinite;
  will-change: transform;
}
.tb-numerals__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--canvas) 86%, transparent) 0%,
      color-mix(in oklab, var(--canvas) 72%, transparent) 38%,
      color-mix(in oklab, var(--canvas) 50%, transparent) 62%,
      color-mix(in oklab, var(--canvas) 74%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--canvas) 64%, transparent) 0%,
      color-mix(in oklab, var(--canvas) 42%, transparent) 50%,
      color-mix(in oklab, var(--canvas) 72%, transparent) 100%);
}
@keyframes tb-numerals-bg-drift {
  0%   { transform: scale(1.06) translate3d( 1.0%, -0.6%, 0); }
  50%  { transform: scale(1.10) translate3d(-1.2%,  0.8%, 0); }
  100% { transform: scale(1.06) translate3d( 1.0%, -0.6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tb-numerals__bg { animation: none; transform: scale(1.04); }
}
/* Cards on a photo-backed numerals section: paper-card treatment so the copy reads cleanly on the photograph */
.tb-numerals--photobg .tb-numerals__grid {
  border-top: 0;
  margin-top: 32px;
  gap: 22px;
}
.tb-numerals--photobg .tb-numeral {
  position: relative;
  padding: 28px 26px 26px;
  background:
    radial-gradient(120% 80% at 18% 0%, color-mix(in oklab, var(--paper) 100%, white) 0%, transparent 55%),
    linear-gradient(168deg,
      color-mix(in oklab, var(--paper) 98%, white) 0%,
      color-mix(in oklab, var(--canvas) 96%, var(--paper)) 42%,
      color-mix(in oklab, var(--canvas) 88%, var(--olive-deep) 5%) 100%);
  border: 1px solid color-mix(in oklab, var(--hairline) 60%, var(--olive-deep));
  border-radius: 6px;
  box-shadow:
    0 1px 0 #ffffff inset,
    0 -1px 0 color-mix(in oklab, var(--olive-deep) 10%, transparent) inset,
    0 1px 2px rgba(60, 50, 30, 0.04),
    0 12px 20px -10px rgba(60, 50, 30, 0.18),
    0 32px 44px -28px rgba(60, 50, 30, 0.28);
  overflow: hidden;
}
.tb-numerals--photobg .tb-numeral::before {
  content: "";
  position: absolute; right: 0; top: 0;
  width: 70px; height: 70px;
  background: radial-gradient(closest-side at 100% 0%, color-mix(in oklab, var(--olive-deep) 22%, transparent) 0%, transparent 75%);
  pointer-events: none; z-index: 0;
}
.tb-numerals--photobg .tb-numeral > * { position: relative; z-index: 1; }
.tb-numerals--photobg .tb-numeral:last-child { border-right: 1px solid color-mix(in oklab, var(--hairline) 60%, var(--olive-deep)); }
@media (max-width: 720px) {
  .tb-numerals--photobg .tb-numerals__grid { grid-template-columns: 1fr; gap: 16px; }
}
/* fine hairlines top and bottom to frame the photo band */
.tb-numerals--photobg::before,
.tb-numerals--photobg::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: color-mix(in oklab, var(--olive-deep) 40%, var(--hairline));
  z-index: 3;
}
.tb-numerals--photobg::before { top: 0; }
.tb-numerals--photobg::after { bottom: 0; }


/* =========================================================================
   TPQA procedure timeline (compliance.html § III)
   ========================================================================= */
.tb-procedure {
  background: var(--canvas);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}
.tb-procedure__list {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: flex; flex-direction: column;
  position: relative;
}
.tb-procedure__item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 36px;
  padding: 0 0 40px;
  position: relative;
}
.tb-procedure__item:last-child { padding-bottom: 0; }

/* the gold vertical thread that runs through the numerals */
.tb-procedure__rail {
  position: relative;
  display: flex; justify-content: center;
}
.tb-procedure__rail::before {
  content: "";
  position: absolute; left: 50%; top: 0; bottom: -40px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--olive-deep) 35%, transparent) 0%,
    color-mix(in oklab, var(--olive-deep) 35%, transparent) 100%);
  transform: translateX(-50%);
}
.tb-procedure__item:last-child .tb-procedure__rail::before {
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--olive-deep) 35%, transparent) 0%,
    color-mix(in oklab, var(--olive-deep) 35%, transparent) 56%,
    transparent 100%);
}
.tb-procedure__item:first-child .tb-procedure__rail::before {
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in oklab, var(--olive-deep) 35%, transparent) 44%,
    color-mix(in oklab, var(--olive-deep) 35%, transparent) 100%);
}
.tb-procedure__numWrap {
  position: relative;
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%,
      color-mix(in oklab, var(--paper) 100%, white) 0%,
      color-mix(in oklab, var(--olive-deep) 14%, var(--canvas)) 100%);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 -1px 0 color-mix(in oklab, var(--olive-deep) 22%, transparent) inset,
    0 0 0 1px color-mix(in oklab, var(--olive-deep) 35%, transparent),
    0 4px 12px -4px rgba(60, 50, 30, 0.18);
  z-index: 1;
}
.tb-procedure__num {
  font-family: var(--font-serif); font-style: italic;
  font-size: 28px; line-height: 1; color: var(--olive-deep);
  letter-spacing: -0.02em;
}
.tb-procedure__body {
  min-width: 0;
  padding-top: 6px;
  padding-bottom: 8px;
}
.tb-procedure__head { margin-bottom: 10px; }
.tb-procedure__step {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--olive-deep);
  display: inline-block;
  margin-bottom: 8px;
}
.tb-procedure__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 26px; line-height: 1.18; letter-spacing: -0.012em;
  color: var(--ink); margin: 0;
}
.tb-procedure__copy {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.7;
  color: var(--graphite); margin: 0 0 16px;
  max-width: 640px;
}
.tb-procedure__docs {
  margin-top: 18px;
  padding-top: 18px;
  position: relative;
}
.tb-procedure__docs::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 32px; height: 1px;
  background: color-mix(in oklab, var(--olive-deep) 55%, transparent);
}
.tb-procedure__docsLabel {
  display: block;
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: color-mix(in oklab, var(--olive-deep) 80%, var(--graphite));
  margin-bottom: 12px;
}
.tb-procedure__docsList {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}

/* Document chip with file-type tag */
.tb-doc {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 14px 9px 9px;
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--hairline) 65%, var(--olive-deep));
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.3;
  box-shadow:
    0 1px 0 #ffffff inset,
    0 6px 12px -8px rgba(60, 50, 30, 0.10);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  max-width: 100%;
}
.tb-doc:hover {
  border-color: color-mix(in oklab, var(--olive-deep) 70%, var(--hairline));
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 10px 18px -8px rgba(60, 50, 30, 0.16);
}
.tb-doc__kind {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  padding: 3px 7px;
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper);
  background: var(--olive-deep);
  border-radius: 2px;
  min-width: 38px;
}
.tb-doc__label {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 14px; color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-doc__arrow {
  flex: 0 0 auto;
  color: color-mix(in oklab, var(--olive-deep) 60%, var(--graphite));
  transition: transform 200ms ease, color 200ms ease;
}
.tb-doc:hover .tb-doc__arrow {
  color: var(--olive-deep);
  transform: translate(2px, -2px);
}

@media (max-width: 720px) {
  .tb-procedure__item { grid-template-columns: 56px 1fr; gap: 22px; }
  .tb-procedure__numWrap { width: 48px; height: 48px; }
  .tb-procedure__num { font-size: 22px; }
  .tb-procedure__title { font-size: 22px; }
  .tb-doc__label { white-space: normal; }
}


/* =========================================================================
   TPQA Benefits Dashboard (compliance.html § V) — interactive criteria/items
   ========================================================================= */
.tb-dash {
  margin-top: 40px;
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--hairline) 70%, var(--olive-deep));
  border-radius: 6px;
  box-shadow:
    0 1px 0 #ffffff inset,
    0 12px 22px -12px rgba(60, 50, 30, 0.08),
    0 36px 54px -34px rgba(60, 50, 30, 0.18);
  overflow: hidden;
}

/* --- Tabs --- */
.tb-dash__tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: color-mix(in oklab, var(--canvas) 96%, var(--paper));
  border-bottom: 1px solid color-mix(in oklab, var(--hairline) 70%, var(--olive-deep));
}
.tb-dash__tab {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: transparent;
  border: 0;
  border-right: 1px solid color-mix(in oklab, var(--hairline) 60%, var(--olive-deep) 40%);
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  transition: background-color 200ms ease;
  font-family: inherit;
}
.tb-dash__tab:last-child { border-right: 0; }
.tb-dash__tab:hover { background: color-mix(in oklab, var(--olive-deep) 5%, transparent); }
.tb-dash__tab::after {
  content: "";
  position: absolute; left: 22px; right: 22px; bottom: -1px;
  height: 2px; background: transparent;
  transition: background-color 200ms ease;
}
.tb-dash__tab.is-active { background: var(--paper); }
.tb-dash__tab.is-active::after { background: var(--olive-deep); }

.tb-dash__tabRoman {
  font-family: var(--font-serif); font-style: italic;
  font-size: 30px; line-height: 1;
  color: color-mix(in oklab, var(--olive-deep) 70%, var(--graphite));
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.tb-dash__tab.is-active .tb-dash__tabRoman { color: var(--olive-deep); }

.tb-dash__tabBody {
  display: flex; flex-direction: column; min-width: 0;
}
.tb-dash__tabCode {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--olive-deep);
  margin-bottom: 4px;
}
.tb-dash__tabName {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 16px; line-height: 1.25;
  color: var(--ink); letter-spacing: -0.005em;
}
.tb-dash__tabMeta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--graphite);
}

/* --- Panel --- */
.tb-dash__panel {
  padding: 32px 32px 28px;
}
.tb-dash__panelHead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--hairline);
  align-items: end;
}
.tb-dash__panelKey {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--olive-deep);
  display: inline-block; margin-bottom: 8px;
}
.tb-dash__panelTitle {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 26px; line-height: 1.18; letter-spacing: -0.012em;
  color: var(--ink); margin: 0 0 8px;
}
.tb-dash__panelIntro {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.6;
  color: var(--graphite); margin: 0;
}
.tb-dash__panelAvg {
  text-align: right;
  white-space: nowrap;
}
.tb-dash__panelAvgLabel {
  display: block;
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--olive-deep); margin-bottom: 8px;
}
.tb-dash__panelAvgValue {
  display: inline-flex; align-items: center; gap: 12px;
}
.tb-dash__panelAvgNum {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; color: var(--ink); letter-spacing: -0.01em;
}
.tb-dash__panelAvgNum span {
  font-style: italic; color: var(--graphite); margin-left: 2px;
  font-size: 13px;
}

/* --- Rows --- */
.tb-dash__rows {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.tb-dash__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.5fr) 120px minmax(0, 1.8fr);
  gap: 22px;
  padding: 18px 0;
  align-items: start;
  border-bottom: 1px solid var(--hairline);
}
.tb-dash__row:last-child { border-bottom: 0; }
.tb-dash__rowNum {
  font-family: var(--font-serif); font-style: italic;
  font-size: 16px; font-weight: 500; line-height: 1.4;
  color: var(--olive-deep);
  letter-spacing: 0.02em;
}
.tb-dash__rowName {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 16px; line-height: 1.35; letter-spacing: -0.005em;
  color: var(--ink);
}
.tb-dash__rowStars {
  padding-top: 2px;
}
.tb-dash__rowBenefit {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.6;
  color: var(--graphite); margin: 0;
}

/* --- Stars --- */
.tb-dash__stars {
  display: inline-flex; align-items: center; gap: 2px;
}
.tb-dash__star {
  fill: color-mix(in oklab, var(--olive-deep) 18%, transparent);
  stroke: color-mix(in oklab, var(--olive-deep) 38%, transparent);
  stroke-width: 1;
  transition: fill 200ms ease, stroke 200ms ease, transform 200ms ease;
}
.tb-dash__star.is-on {
  fill: var(--olive-deep);
  stroke: var(--olive-deep);
}
.tb-dash__row:hover .tb-dash__star.is-on {
  transform: translateY(-1px);
}

.tb-dash__legend {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; line-height: 1.6;
  color: var(--graphite);
}

@media (max-width: 820px) {
  .tb-dash__tabs { grid-template-columns: 1fr; }
  .tb-dash__tab { border-right: 0; border-bottom: 1px solid color-mix(in oklab, var(--hairline) 60%, var(--olive-deep) 40%); }
  .tb-dash__tab:last-child { border-bottom: 0; }
  .tb-dash__panel { padding: 24px 22px; }
  .tb-dash__panelHead { grid-template-columns: 1fr; align-items: start; }
  .tb-dash__panelAvg { text-align: left; }
  .tb-dash__row {
    grid-template-columns: 50px 1fr;
    grid-template-areas:
      "num name"
      ".   stars"
      ".   benefit";
    gap: 6px 16px;
  }
  .tb-dash__rowNum { grid-area: num; }
  .tb-dash__rowName { grid-area: name; }
  .tb-dash__rowStars { grid-area: stars; }
  .tb-dash__rowBenefit { grid-area: benefit; margin-top: 4px; }
}


/* =========================================================================
   TPQA Dashboard interactivity: mode toggle, clickable stars, expand, tally
   ========================================================================= */
.tb-dash__modeBar {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 22px;
  background: color-mix(in oklab, var(--canvas) 96%, var(--paper));
  border-bottom: 1px solid var(--hairline);
}
.tb-dash__modeLabel {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--olive-deep);
}
.tb-dash__modeSwitch {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--hairline) 70%, var(--olive-deep));
  border-radius: 999px;
  padding: 2px;
}
.tb-dash__modeBtn {
  padding: 7px 16px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--graphite);
  background: transparent; border: 0; border-radius: 999px;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.tb-dash__modeBtn:hover { color: var(--ink); }
.tb-dash__modeBtn.is-active {
  background: var(--olive-deep);
  color: var(--paper);
}
.tb-dash__modeHint {
  font-family: var(--font-serif); font-style: italic;
  font-size: 13px; color: var(--graphite);
  text-align: right;
}

/* Interactive star buttons */
.tb-dash__stars--clickable { padding: 2px 0; }
.tb-dash__starBtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  padding: 0; margin: 0 1px;
  background: transparent; border: 0; cursor: pointer;
  border-radius: 4px;
  transition: background-color 160ms ease, transform 160ms ease;
}
.tb-dash__starBtn svg {
  fill: color-mix(in oklab, var(--olive-deep) 16%, transparent);
  stroke: color-mix(in oklab, var(--olive-deep) 38%, transparent);
  stroke-width: 1;
  transition: fill 160ms ease, stroke 160ms ease, transform 160ms ease;
}
.tb-dash__starBtn:hover {
  background: color-mix(in oklab, var(--olive-deep) 8%, transparent);
}
.tb-dash__starBtn.is-on svg {
  fill: var(--olive-deep);
  stroke: var(--olive-deep);
}
.tb-dash__starBtn:hover svg { transform: scale(1.1); }
.tb-dash__starBtn:active svg { transform: scale(0.92); }

/* Row click + expand caret */
.tb-dash__row { padding: 0; cursor: default; }
.tb-dash__rowMain {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.5fr) 140px minmax(0, 1.8fr);
  gap: 22px;
  padding: 18px 0;
  align-items: start;
}
.tb-dash__rowName { display: inline-flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.tb-dash__caret {
  display: inline-block;
  color: color-mix(in oklab, var(--olive-deep) 65%, var(--graphite));
  transition: transform 220ms ease, color 200ms ease;
  margin-top: 7px;
  opacity: 0.6;
}
.tb-dash__row.is-expanded .tb-dash__caret { transform: rotate(180deg); opacity: 1; color: var(--olive-deep); }
/* benefits mode rows are clickable */
.tb-dash__panel .tb-dash__row .tb-dash__rowMain { transition: background-color 180ms ease; border-radius: 4px; }
.tb-dash__panel .tb-dash__row:not(.is-expanded):hover .tb-dash__rowMain {
  background: color-mix(in oklab, var(--olive-deep) 4%, transparent);
}

/* Expanded reveal */
.tb-dash__rowExtra {
  padding: 4px 0 22px 78px;
  display: grid; grid-template-columns: 1fr; gap: 6px;
  animation: tb-dash-reveal 220ms ease both;
}
@keyframes tb-dash-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tb-dash__rowExtraLabel {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--olive-deep);
}
.tb-dash__rowExtra p {
  font-family: var(--font-serif); font-style: italic;
  font-size: 15px; line-height: 1.65;
  color: var(--ink-soft); margin: 0;
  max-width: 760px;
}

/* Self-rate tally panel */
.tb-dash__tally {
  margin-top: 26px;
  padding: 22px 24px;
  background:
    linear-gradient(168deg,
      color-mix(in oklab, var(--paper) 100%, white) 0%,
      color-mix(in oklab, var(--canvas) 94%, var(--paper)) 100%);
  border: 1px solid color-mix(in oklab, var(--olive-deep) 30%, var(--hairline));
  border-radius: 6px;
  position: relative;
}
.tb-dash__tallyHead {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 14px;
}
.tb-dash__tallyLabel {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--olive-deep);
}
.tb-dash__tallyNum {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 28px; line-height: 1; color: var(--ink); letter-spacing: -0.012em;
}
.tb-dash__tallyNum span {
  font-style: italic; color: var(--graphite); font-size: 15px; margin-left: 2px;
}
.tb-dash__tallyPct {
  font-family: var(--font-serif); font-style: italic;
  font-size: 22px; color: var(--olive-deep); line-height: 1;
}
.tb-dash__tallyBar {
  height: 6px;
  background: color-mix(in oklab, var(--olive-deep) 10%, var(--canvas));
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.tb-dash__tallyFill {
  height: 100%;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--olive-deep) 80%, var(--olive-light)) 0%,
    var(--olive-deep) 100%);
  border-radius: 999px;
  transition: width 360ms cubic-bezier(.2,.7,.2,1);
}
.tb-dash__tallyVerdict {
  font-family: var(--font-serif); font-style: italic;
  font-size: 16px; line-height: 1.55;
  color: var(--graphite); margin: 0;
}
.tb-dash__resetBtn {
  padding: 6px 14px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--olive-deep);
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--olive-deep) 35%, transparent);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.tb-dash__tallyFoot {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.tb-dash__tallyFoot .tb-dash__tallyVerdict { margin: 0; flex: 1 1 auto; min-width: 0; }
.tb-dash__resetBtn:hover {
  border-color: var(--olive-deep);
  background: color-mix(in oklab, var(--olive-deep) 8%, transparent);
  color: var(--ink);
}

@media (max-width: 820px) {
  .tb-dash__modeBar { grid-template-columns: 1fr; }
  .tb-dash__modeHint { text-align: left; }
  .tb-dash__rowMain {
    grid-template-columns: 50px 1fr;
    grid-template-areas:
      "num name"
      ".   stars"
      ".   benefit";
    gap: 6px 16px;
  }
  .tb-dash__rowNum { grid-area: num; }
  .tb-dash__rowName { grid-area: name; }
  .tb-dash__rowStars { grid-area: stars; }
  .tb-dash__rowBenefit { grid-area: benefit; margin-top: 4px; }
  .tb-dash__rowExtra { padding-left: 50px; }
  .tb-dash__tallyHead { grid-template-columns: 1fr; gap: 8px; }
  .tb-dash__tallyFoot { flex-direction: column; gap: 12px; }
}


/* === Dashboard row layout override (the row is no longer the grid; rowMain is) === */
.tb-dash__rows .tb-dash__row {
  display: block;
  padding: 0;
  border-bottom: 1px solid var(--hairline);
  cursor: default;
}
.tb-dash__rows .tb-dash__row:last-child { border-bottom: 0; }
.tb-dash__rows .tb-dash__rowMain {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.5fr) 140px minmax(0, 1.8fr);
  gap: 22px;
  padding: 18px 0;
  align-items: start;
  border-radius: 4px;
  transition: background-color 180ms ease;
}
.tb-dash__rows .tb-dash__rowName {
  display: inline-flex; align-items: flex-start; gap: 8px;
  flex-wrap: nowrap;
  font-family: var(--font-serif); font-weight: 500;
  font-size: 16px; line-height: 1.35; letter-spacing: -0.005em;
  color: var(--ink);
}
.tb-dash__rows .tb-dash__rowBenefit {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.6;
  color: var(--graphite); margin: 0;
  min-width: 0;
}
@media (max-width: 820px) {
  .tb-dash__rows .tb-dash__rowMain {
    grid-template-columns: 50px 1fr;
    grid-template-areas:
      "num name"
      ".   stars"
      ".   benefit";
    gap: 6px 16px;
  }
}


/* Dashboard column headers + readable "when done well" copy */
.tb-dash__rowHeader { padding: 0; border-bottom: 1px solid color-mix(in oklab, var(--olive-deep) 30%, var(--hairline)); }
.tb-dash__rowHeader .tb-dash__rowMain {
  padding: 10px 0 12px;
  background: transparent;
}
.tb-dash__colHead {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--olive-deep);
}
.tb-dash__rowExtra p {
  font-family: var(--font-sans); font-style: normal; font-weight: 400;
  font-size: 14px; line-height: 1.7;
  color: var(--ink-soft);
  margin: 0; max-width: 760px;
}
@media (max-width: 820px) {
  .tb-dash__rowHeader { display: none; }
}


/* =========================================================================
   Prose section with figure on the right (compliance § V header)
   ========================================================================= */
.tb-prose--withFig .tb-prose__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
  gap: 48px;
  align-items: center;
  margin-bottom: 40px;
}
.tb-prose--withFig .tb-prose__head .tb-sectionhead { margin-bottom: 0; }
.tb-prose__fig {
  margin: 0;
  position: relative;
  align-self: center;
  justify-self: start;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: #0a0a0a;
}
.tb-prose__fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  filter: grayscale(1) contrast(1.05) brightness(0.96);
}
.tb-prose__figVignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0, 0, 0, 0.32) 0%, transparent 55%),
    radial-gradient(120% 80% at 50% 100%, rgba(0, 0, 0, 0.45) 0%, transparent 55%);
  pointer-events: none;
}
@media (max-width: 960px) {
  .tb-prose--withFig .tb-prose__split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tb-prose__fig { min-height: 240px; width: 100%; }
}


/* Two-column section with equal columns (compliance § VI) */
.tb-twocol--even .tb-twocol__grid {
  grid-template-columns: 1fr 1fr;
}
.tb-twocol--even .tb-twocol__title {
  font-size: 38px;
  line-height: 1.15;
  text-wrap: nowrap;
}
@media (max-width: 1100px) {
  .tb-twocol--even .tb-twocol__title { text-wrap: balance; }
}
/* Push the right-column body down so its first paragraph aligns
   with the "Because CQC reviews..." lede inside the left notice panel. */
.tb-twocol--even .tb-twocol__body {
  padding-top: 174px;
}
@media (max-width: 1100px) {
  .tb-twocol--even .tb-twocol__body { padding-top: 0; }
}


/* Notice card body text sized to match the surrounding twocol prose */
.tb-twocol__head .tb-notice { padding: 26px 28px 24px; }
.tb-twocol__head .tb-notice__title {
  font-size: 22px;
  line-height: 1.2;
}
.tb-twocol__head .tb-notice__lede {
  font-size: 16px;
  line-height: 1.7;
  margin: 14px 0 16px;
}
.tb-twocol__head .tb-notice__list { margin: 0 0 16px; gap: 12px; }
.tb-twocol__head .tb-notice__list li {
  padding-left: 34px;
  font-size: 16px;
  line-height: 1.65;
}
.tb-twocol__head .tb-notice__list li::before { font-size: 16px; }
.tb-twocol__head .tb-notice__foot {
  font-size: 15px;
  line-height: 1.65;
  padding-top: 14px;
}
.tb-twocol__head .tb-notice__pill { font-size: 10px; }


/* =========================================================================
   The Path — setup.html § I — redesigned horizontal journey
   ========================================================================= */
.tb-path {
  background: var(--canvas);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}
.tb-path__meter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  margin: 36px 0 20px;
  padding: 12px 16px;
  background:
    linear-gradient(168deg,
      color-mix(in oklab, var(--paper) 100%, white) 0%,
      color-mix(in oklab, var(--canvas) 96%, var(--paper)) 100%);
  border: 1px solid color-mix(in oklab, var(--hairline) 70%, var(--olive-deep));
  border-radius: 999px;
}
.tb-path__meterMark {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--olive-deep);
}
.tb-path__meterTrack {
  position: relative; height: 6px;
  background: color-mix(in oklab, var(--olive-deep) 12%, var(--canvas));
  border-radius: 999px;
  overflow: hidden;
}
.tb-path__meterFill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--olive-deep) 80%, var(--olive-light)) 0%,
    var(--olive-deep) 100%);
  border-radius: 999px;
}
.tb-path__meterTotal {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-serif); font-style: italic;
  font-size: 13px; color: var(--graphite);
  padding: 4px 0 0;
}

.tb-path__list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.tb-path__item {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 14px 0;
}
.tb-path__node {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 64px;
  margin-bottom: 22px;
}
.tb-path__nodeRail {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: color-mix(in oklab, var(--olive-deep) 35%, var(--hairline));
  transform: translateY(-50%);
}
.tb-path__item:first-child .tb-path__nodeRail { left: 50%; }
.tb-path__item:last-child .tb-path__nodeRail { right: 50%; }
.tb-path__nodeDisc {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%,
      color-mix(in oklab, var(--paper) 100%, white) 0%,
      color-mix(in oklab, var(--canvas) 92%, var(--olive-deep) 8%) 100%);
  color: var(--olive-deep);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 -1px 0 color-mix(in oklab, var(--olive-deep) 20%, transparent) inset,
    0 0 0 1px color-mix(in oklab, var(--olive-deep) 32%, transparent),
    0 6px 14px -6px rgba(60, 50, 30, 0.18);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.tb-path__nodeIcon { display: inline-flex; }
.tb-path__nodeRoman {
  position: absolute; left: 50%; bottom: -6px;
  transform: translateX(-50%);
  background: var(--canvas);
  padding: 0 8px;
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; font-weight: 500;
  color: var(--olive-deep); letter-spacing: 0.02em;
  z-index: 3;
}
.tb-path__item:hover .tb-path__nodeDisc {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 -1px 0 color-mix(in oklab, var(--olive-deep) 24%, transparent) inset,
    0 0 0 1px color-mix(in oklab, var(--olive-deep) 50%, transparent),
    0 10px 22px -6px rgba(60, 50, 30, 0.22);
}

.tb-path__card {
  display: flex; flex-direction: column;
}
.tb-path__cardHead {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 10px;
}
.tb-path__weeks {
  display: inline-block;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--olive-deep);
  align-self: flex-start;
  padding: 4px 10px;
  background: color-mix(in oklab, var(--olive-deep) 10%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--olive-deep) 30%, transparent);
  border-radius: 999px;
}
.tb-path__step {
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; font-weight: 400;
  color: var(--graphite); letter-spacing: 0.02em;
}
.tb-path__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; line-height: 1.22; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 12px;
}
.tb-path__body {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.7;
  color: var(--graphite); margin: 0;
}

@media (max-width: 1100px) {
  .tb-path__list { grid-template-columns: repeat(2, 1fr); gap: 24px 28px; }
  .tb-path__nodeRail { display: none; }
  .tb-path__item { padding: 0; }
}
@media (max-width: 600px) {
  .tb-path__list { grid-template-columns: 1fr; gap: 24px; }
}


/* Figure used inside .tb-twocol__head, below the title */
.tb-twocol__fig {
  margin: 32px 0 0;
  position: relative;
  width: 100%;
  max-width: 420px;
  flex: 1 1 auto;
  min-height: 720px;
  border-radius: 4px;
  overflow: hidden;
  background: #0a0a0a;
}
.tb-twocol__fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(0.2) contrast(1.04);
}
@media (max-width: 960px) {
  .tb-twocol__fig { max-width: 320px; aspect-ratio: 4 / 3; }
}


/* Stretch the head column so the figure can reach the bottom of the requirements list on the right */
.tb-twocol__grid { align-items: stretch; }
.tb-twocol__head { display: flex; flex-direction: column; }


/* Prose section with a photographic background (setup § IV) */
.tb-prose--photobg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--space-section) + 12px);
  padding-bottom: calc(var(--space-section) + 12px);
  border-top: 1px solid color-mix(in oklab, var(--olive-deep) 40%, var(--hairline));
  border-bottom: 1px solid color-mix(in oklab, var(--olive-deep) 40%, var(--hairline));
}
.tb-prose--photobg > .container { position: relative; z-index: 2; }
.tb-prose__bg {
  position: absolute; inset: -4%;
  z-index: 0;
  pointer-events: none;
  background-image: url("../assets/setup-beyond.jpg");
  background-size: cover;
  background-position: center 50%;
  filter: grayscale(1) contrast(1.05) brightness(1.02);
  transform-origin: 50% 50%;
  animation: tb-prose-bg-drift 30s ease-in-out infinite;
  will-change: transform;
}
.tb-prose__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--canvas) 88%, transparent) 0%,
      color-mix(in oklab, var(--canvas) 76%, transparent) 36%,
      color-mix(in oklab, var(--canvas) 50%, transparent) 64%,
      color-mix(in oklab, var(--canvas) 78%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--canvas) 64%, transparent) 0%,
      color-mix(in oklab, var(--canvas) 42%, transparent) 50%,
      color-mix(in oklab, var(--canvas) 72%, transparent) 100%);
}
@keyframes tb-prose-bg-drift {
  0%   { transform: scale(1.05) translate3d(-0.8%, -0.5%, 0); }
  50%  { transform: scale(1.09) translate3d( 0.8%,  0.6%, 0); }
  100% { transform: scale(1.05) translate3d(-0.8%, -0.5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tb-prose__bg { animation: none; transform: scale(1.04); }
}


/* When .tb-prose--withFig wraps both heading and body in the head column,
   keep the image aligned to the top so it sits beside the heading/body block. */
.tb-prose--withFig .tb-prose__split { align-items: start; }
.tb-prose--withFig .tb-prose__head .tb-prose__body {
  margin-top: 28px;
  max-width: 640px;
}
.tb-prose--withFig .tb-prose__fig { position: sticky; top: 24px; }
@media (max-width: 960px) {
  .tb-prose--withFig .tb-prose__fig { position: static; }
}


/* =========================================================================
   MOBILE OPTIMISATION LAYER — phones (≤720px) and small phones (≤480px)
   Hamburger drawer, tighter gutter, scaled typography, full-width grids.
   ========================================================================= */

/* Burger button — hidden on desktop */
.tb-nav__burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--hairline) 70%, var(--olive-deep));
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.tb-nav__burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transition: transform 200ms ease, opacity 200ms ease;
}
.tb-nav.is-open .tb-nav__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.tb-nav.is-open .tb-nav__burger span:nth-child(2) { opacity: 0; }
.tb-nav.is-open .tb-nav__burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Drawer — hidden on desktop */
.tb-nav__drawer {
  display: none;
}

/* Tablet / phone ≤980: existing menu hide kicks in, expose burger */
@media (max-width: 980px) {
  .tb-nav { z-index: 60; height: 82px; }
  body { padding-top: 82px; }
  .tb-nav__wm img { height: 52px; width: auto; }
  .tb-nav__burger { display: inline-flex; }
  .tb-nav__cta { display: none; }
  .tb-nav__right { gap: 12px; }
  .tb-nav__right .tb-nav__enq { display: none; }

  .tb-nav__drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 72px; left: 0; right: 0; bottom: 0;
    background: var(--canvas);
    border-top: 1px solid var(--hairline);
    padding: var(--space-xl) var(--space-lg) var(--space-xxl);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
    z-index: 55;
    overflow-y: auto;
  }
  .tb-nav__drawer.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .tb-nav__drawerMenu {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--hairline);
  }
  .tb-nav__drawerLink {
    font-family: var(--font-serif);
    font-size: 26px; font-weight: 400;
    color: var(--ink);
    padding: 22px 0;
    border-bottom: 1px solid var(--hairline);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 160ms ease;
  }
  .tb-nav__drawerLink em { font-style: italic; color: var(--olive-deep); }
  .tb-nav__drawerLink.is-active { color: var(--olive-deep); }
  .tb-nav__drawerLink--muted {
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--graphite);
    padding: 20px 0;
  }
  .tb-nav__drawerCta {
    margin-top: var(--space-xl);
    height: 56px !important;
    padding: 0 28px !important;
    align-self: stretch;
    justify-content: center;
  }
}

/* =========================================================================
   ≤720px — phone-first overrides
   ========================================================================= */
@media (max-width: 720px) {
  :root {
    --gutter: 20px;
    --space-section: 64px;
    --space-section-lg: 80px;
  }
  body { font-size: 15px; }

  /* prevent any wide element forcing horizontal scroll */
  html, body { overflow-x: hidden; }
  img, video, svg { max-width: 100%; height: auto; }

  /* HERO + PAGE HERO */
  .tb-hero { padding: 88px 0 64px; }
  .tb-hero__title { font-size: 40px !important; line-height: 1.05; letter-spacing: -0.018em; }
  .tb-hero__sub { font-size: 17px; }
  .tb-pagehero { padding: 80px 0 56px; }
  .tb-pagehero__title { font-size: 36px !important; line-height: 1.06; }
  .tb-pagehero__lede { font-size: 16px; }
  .tb-pagehero__loc { font-size: 12px; }

  /* HERO with image (engagement, etc) */
  .tb-hero__media { height: 240px !important; }

  /* SECTION HEADINGS */
  .tb-sectionhead__title { font-size: 28px !important; line-height: 1.12; }
  .tb-sectionhead__sub { font-size: 15px; }
  .tb-sectionhead { margin-bottom: var(--space-xl); }

  /* TWO-COL */
  .tb-twocol__grid { gap: 24px; }
  .tb-twocol__title { font-size: 28px !important; }
  .tb-twocol__body p { font-size: 15px; }
  .tb-twocol--photobg { padding-top: 64px; padding-bottom: 64px; }

  /* NUMERALS / SECTORS / STEPS — already single-col at 980, just tighten */
  .tb-numeral, .tb-economy, .tb-step, .tb-sector { padding: var(--space-lg) 0; }
  .tb-numeral__title, .tb-economy__title, .tb-step__title { font-size: 21px; }
  .tb-numeral__roman, .tb-economy__roman { font-size: 36px; }

  /* PROSE WITH FIG */
  .tb-prose--withFig .tb-prose__split { gap: 28px; }
  .tb-prose__fig img { height: auto; }

  /* CTA */
  .tb-ctawrap { padding: 56px 0; }
  .tb-cta__inner { padding: 56px var(--space-xl) !important; }
  .tb-cta__title { font-size: 28px !important; }
  .tb-cta__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .tb-cta__actions .btn { width: 100%; justify-content: center; }

  /* CTA inner with cal */
  .tb-cta__inner--split { padding: 48px var(--space-lg) !important; }

  /* FOOTER */
  .tb-footer { padding: 56px 0 32px; }
  .tb-footer__grid { grid-template-columns: 1fr !important; gap: var(--space-xl); }
  .tb-footer__brand { grid-column: auto; }
  .tb-footer__wm { width: 72px; height: 72px; }
  .tb-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tb-footer__legalRight { text-align: left; }

  /* JOIN FORM */
  .tb-join { padding: 64px 0; }
  .tb-join__title { font-size: 30px !important; }
  .tb-join__lede { font-size: 15px; }
  .tb-join__form { padding: var(--space-lg) !important; }
  .tb-join__field--full .tb-join__chips { gap: 6px; }
  .tb-join__chip { font-size: 13px; padding: 8px 14px; }

  /* COMPLIANCE DASHBOARD */
  .tb-dash__tabs { grid-template-columns: 1fr; }
  .tb-dash__panelHead { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tb-dash__panelTitle { font-size: 22px; }
  .tb-dash__panelIntro { font-size: 14px; }
  .tb-dash__rowMain { padding: 14px 0; }
  .tb-dash__rowName { font-size: 15px; }

  /* MANIFESTO */
  .tb-manifesto__quote { font-size: 30px !important; line-height: 1.18; }

  /* FAQ / FOUNDER */
  .tb-faq__q { font-size: 17px !important; padding: 18px 0; }
  .tb-founder__name { font-size: 28px !important; }

  /* OPEN, EDITORIAL */
  .tb-open__title { font-size: 32px !important; }
  .tb-editorial-strip { height: 200px; }
  .tb-editorial-strip__cite { font-size: 14px; padding: 0 var(--space-lg); }

  /* CARDS / BUTTONS — make tap targets 44px+ */
  .btn { min-height: 44px; }
  .t-link-sm { min-height: 44px; display: inline-flex; align-items: center; }

  /* NAV header height fix for drawer offset */
  .tb-nav { height: 74px; padding: 0 var(--space-lg) !important; }
  body { padding-top: 74px; }
  .tb-nav__wm img { height: 46px; width: auto; }
  .tb-nav__drawer { top: 74px; }

  /* dl grids -> stack labels */
  .tb-dl dt { padding-top: var(--space-lg); }

  /* Interlude with fig */
  .tb-interlude__quote { font-size: 22px !important; }
  .tb-interlude__fig-frame { aspect-ratio: 4 / 3; }
}

/* =========================================================================
   ≤480px — small phones (iPhone SE, etc)
   ========================================================================= */
@media (max-width: 480px) {
  :root {
    --gutter: 16px;
    --space-section: 56px;
    --space-section-lg: 72px;
  }
  .tb-hero__title { font-size: 34px !important; }
  .tb-pagehero__title { font-size: 30px !important; }
  .tb-sectionhead__title { font-size: 24px !important; }
  .tb-twocol__title { font-size: 24px !important; }
  .tb-cta__title { font-size: 24px !important; }
  .tb-manifesto__quote { font-size: 26px !important; }
  .tb-open__title { font-size: 26px !important; }
  .tb-join__title { font-size: 26px !important; }

  .tb-cta__inner { padding: 44px var(--space-lg) !important; }
  .tb-pagehero__lede, .tb-hero__sub { font-size: 15px; }
  .tb-nav__drawer { padding-left: var(--space-md); padding-right: var(--space-md); }
  .tb-nav__drawerLink { font-size: 22px; padding: 18px 0; }

  /* form chips wrap individually */
  .tb-join__chip { font-size: 13px; padding: 7px 12px; }
}


/* =========================================================================
   Contact page · How we differ comparison
   ========================================================================= */
.tb-compare { padding: 88px 0 96px; background: var(--paper); }
.tb-compare__head { max-width: 880px; margin: 0 auto 48px; }
.tb-compare__title {
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 18px 0 18px;
  text-wrap: balance;
}
.tb-compare__title em { font-style: italic; color: var(--olive-deep); }
.tb-compare__sub {
  font-family: "Lato", var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--graphite);
  margin: 0;
  max-width: 56ch;
}
.tb-compare__table {
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--hairline);
}
.tb-compare__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr;
  gap: 0;
  padding: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--hairline);
}
.tb-compare__row--head { background: transparent; border-bottom: 1px solid var(--charcoal); }
.tb-compare__cell {
  padding: 22px 26px;
  font-family: "Lato", var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--graphite);
  border-left: 0;
  background: transparent;
}
.tb-compare__cell:first-child { padding-left: 0; }
.tb-compare__cell--axis {
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
  background: transparent;
}
.tb-compare__cell--them { color: var(--slate); }
.tb-compare__cell--us {
  color: var(--ink-soft);
  font-weight: 500;
  background: color-mix(in oklab, var(--paper) 89%, var(--olive) 11%);
  border-left: 2px solid var(--olive);
}
.tb-compare__row--head .tb-compare__cell {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  background: transparent;
  font-style: normal;
  padding-top: 16px;
  padding-bottom: 16px;
}
.tb-compare__row--head .tb-compare__cell--axis { color: var(--graphite); }
.tb-compare__row--head .tb-compare__cell--us {
  color: var(--olive-deep);
  background: color-mix(in oklab, var(--paper) 82%, var(--olive) 18%);
  border-left: 2px solid var(--olive);
}
@media (max-width: 860px) {
  .tb-compare__row { grid-template-columns: 1fr; }
  .tb-compare__cell { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; padding-right: 0; }
  .tb-compare__cell:first-child { border-top: 0; }
  .tb-compare__cell--us { border-left: 0; padding: 16px; }
  .tb-compare__row--head { display: none; }
  .tb-compare__cell--them::before { content: "Typical vendor: "; font-weight: 700; color: var(--graphite); opacity: 0.7; }
  .tb-compare__cell--us::before    { content: "2birds: "; font-weight: 700; color: var(--olive-deep); opacity: 0.9; }
}

/* =========================================================================
   Contact page · Founder profile (Keith Ho)
   ========================================================================= */
.tb-foundercard { padding: 88px 0 96px; background: var(--bone); }
.tb-foundercard__inner {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 40px 44px;
  align-items: start;
}
.tb-foundercard__meta { display: flex; flex-direction: column; }
.tb-foundercard__name {
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.tb-foundercard__role {
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: var(--olive-deep);
  margin-bottom: 24px;
  letter-spacing: 0;
}
.tb-foundercard__creds {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 2.1;
  color: var(--ink-soft);
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 22px;
}
.tb-foundercard__verify {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive-deep);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--olive) 45%, var(--hairline));
  padding-bottom: 1px;
  margin-left: 8px;
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.tb-foundercard__verify:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.tb-foundercard__mail {
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--olive-deep);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--olive) 40%, var(--hairline));
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color var(--dur-base) var(--ease-standard);
}
.tb-foundercard__mail:hover { color: var(--ink); }
.tb-foundercard__body p {
  font-family: "Lato", var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--graphite);
  margin: 0 0 18px;
}
.tb-foundercard__body p:last-child { margin-bottom: 0; }
.tb-foundercard__body em { font-style: italic; color: var(--olive-deep); }
@media (max-width: 860px) {
  .tb-foundercard__inner { grid-template-columns: 1fr; gap: 32px; padding: 30px 28px; }
}

/* =========================================================================
   Contact page · Standing (organisations served)
   ========================================================================= */
.tb-standing { padding: 88px 0 96px; background: var(--paper); }
.tb-standing__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 880px;
  border-top: 1px solid var(--hairline);
}
.tb-standing__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
}
.tb-standing__num {
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--olive-deep);
  opacity: 0.85;
  line-height: 1;
}
.tb-standing__name {
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.tb-standing__note {
  margin-top: 4px;
  font-family: "Lato", var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--graphite);
}

/* =========================================================================
   Contact page · One last note CTA
   ========================================================================= */
.tb-onenote {
  position: relative;
  overflow: hidden;
  background: var(--footer);
  color: var(--paper);
  padding: 104px 0 112px;
}
.tb-onenote__bg {
  position: absolute; inset: 0;
  background-image: url('assets/onenote-office.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.tb-onenote__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,18,16,0.72) 0%, rgba(18,18,16,0.82) 100%);
}
.tb-onenote__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; }
.tb-onenote__eb {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--olive-light);
  opacity: 0.85;
  display: inline-block;
  margin-bottom: 22px;
}
.tb-onenote__title {
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.014em;
  color: var(--paper);
  margin: 0 0 22px;
  text-wrap: balance;
}
.tb-onenote__title em { font-style: italic; color: var(--olive-light); }
.tb-onenote__lede {
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 auto 36px;
  max-width: 56ch;
}
.tb-onenote__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--olive-light) 60%, transparent);
  padding-bottom: 8px;
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.tb-onenote__arrow {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--olive-light);
  transition: transform var(--dur-base) var(--ease-standard);
}
.tb-onenote__cta:hover { color: var(--olive-light); border-bottom-color: var(--olive-light); }
.tb-onenote__cta:hover .tb-onenote__arrow { transform: translate(2px, -2px); }
@media (max-width: 720px) {
  .tb-onenote__title { font-size: 30px; }
  .tb-onenote__cta { font-size: 18px; }
}


/* =========================================================================
   Scroll-reveal — couture fade-up (à la LV / Chanel) on section entry
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .tb-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .tb-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
  }
  /* Auto-stagger children if they carry .tb-reveal-child */
  .tb-reveal .tb-reveal-child {
    opacity: 0;
    transform: translateY(22px);
  }
  .tb-reveal.is-in .tb-reveal-child {
    animation: tb-reveal-up 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .tb-reveal.is-in .tb-reveal-child:nth-child(1) { animation-delay: 60ms; }
  .tb-reveal.is-in .tb-reveal-child:nth-child(2) { animation-delay: 180ms; }
  .tb-reveal.is-in .tb-reveal-child:nth-child(3) { animation-delay: 300ms; }
  .tb-reveal.is-in .tb-reveal-child:nth-child(4) { animation-delay: 420ms; }
  .tb-reveal.is-in .tb-reveal-child:nth-child(5) { animation-delay: 540ms; }
  .tb-reveal.is-in .tb-reveal-child:nth-child(6) { animation-delay: 660ms; }
  @keyframes tb-reveal-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Image-wipe reveal: figures unveil with a slow clip + settle of the photo. */
  .tb-reveal .premium-figure,
  .tb-reveal .tb-twocol__bg,
  .tb-reveal .tb-mkt-card__media,
  .tb-reveal .tb-mkt-spotlight__media,
  .tb-reveal .tb-mkt-collab__logoFig {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1300ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .tb-reveal.is-in .premium-figure,
  .tb-reveal.is-in .tb-twocol__bg,
  .tb-reveal.is-in .tb-mkt-card__media,
  .tb-reveal.is-in .tb-mkt-spotlight__media,
  .tb-reveal.is-in .tb-mkt-collab__logoFig {
    clip-path: inset(0 0 0 0);
  }
  .tb-reveal .premium-figure img,
  .tb-reveal .tb-mkt-card__media img,
  .tb-reveal .tb-mkt-spotlight__media img {
    transform: scale(1.08);
    transition: transform 1600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .tb-reveal.is-in .premium-figure img,
  .tb-reveal.is-in .tb-mkt-card__media img,
  .tb-reveal.is-in .tb-mkt-spotlight__media img {
    transform: scale(1);
  }
}

/* Self-heal: some sandboxed preview iframes pause the document timeline, so the
   reveal transition never advances and content would stay blank. shared.jsx
   detects this and adds .tb-reveal-snap to <html>; force every reveal straight
   to its final visible state. Outside the motion media query so it always wins. */
html.tb-reveal-snap .tb-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html.tb-reveal-snap .tb-reveal .premium-figure,
html.tb-reveal-snap .tb-reveal .tb-twocol__bg,
html.tb-reveal-snap .tb-reveal .tb-mkt-card__media,
html.tb-reveal-snap .tb-reveal .tb-mkt-spotlight__media,
html.tb-reveal-snap .tb-reveal .tb-mkt-collab__logoFig {
  clip-path: none !important;
  transition: none !important;
}
html.tb-reveal-snap .tb-reveal .premium-figure img,
html.tb-reveal-snap .tb-reveal .tb-mkt-card__media img,
html.tb-reveal-snap .tb-reveal .tb-mkt-spotlight__media img {
  transform: none !important;
  transition: none !important;
}
html.tb-reveal-snap .tb-reveal-child {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}


/* =========================================================================
   Cinematic full-bleed video banner (Swatch-style)
   ========================================================================= */
.tb-filmstrip {
  position: relative;
  width: 100%;
  height: clamp(420px, 62vh, 680px);
  overflow: hidden;
  background: var(--footer);
  display: flex;
  align-items: center;
}
.tb-filmstrip__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #121210 url('assets/hero-lounge-skyline-web.jpg') center / cover no-repeat;
}
.tb-filmstrip__iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;          /* 16:9 by width */
  min-height: 100%;
  min-width: 177.78vh;      /* 16:9 by height */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  filter: grayscale(0.35) contrast(1.04);
}
.tb-filmstrip__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(18,18,16,0.42) 0%, rgba(18,18,16,0.30) 38%, rgba(18,18,16,0.78) 100%),
    radial-gradient(135% 120% at 16% 82%, rgba(18,18,16,0.70) 0%, transparent 58%);
}
.tb-filmstrip__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-xxl);
}
.tb-filmstrip__eb {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--olive-light);
  display: inline-block;
  margin-bottom: 22px;
  opacity: 0.92;
}
.tb-filmstrip__title {
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: var(--paper);
  margin: 0 0 32px;
  text-wrap: balance;
  max-width: 18ch;
}
.tb-filmstrip__title em { font-style: italic; color: var(--olive-light); }
.tb-filmstrip__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in oklab, var(--olive-light) 60%, transparent);
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.tb-filmstrip__cta span:last-child { color: var(--olive-light); transition: transform var(--dur-base) var(--ease-standard); }
.tb-filmstrip__cta:hover { color: var(--olive-light); }
.tb-filmstrip__cta:hover span:last-child { transform: translateY(3px); }
@media (max-width: 720px) {
  .tb-filmstrip { height: clamp(360px, 56vh, 460px); }
  .tb-filmstrip__inner { padding: 0 var(--space-lg); }
}
/* Inner-page variant: a touch shorter, sits directly under the page hero. */
.tb-filmstrip--page { height: clamp(380px, 52vh, 560px); }

/* =========================================================================
   Services — full-bleed video sections with overlaid copy (home)
   ========================================================================= */
.tb-svc {
  position: relative;
  width: calc(100% - 2 * var(--space-xxl));
  margin: 0 auto var(--space-lg);
  min-height: clamp(560px, 88vh, 860px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--footer);
}
.tb-svc:last-of-type { margin-bottom: 0; }
.tb-svc__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.tb-svc__iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 100vw;
  height: 56.25vw;          /* cover by width (16:9) */
  min-height: 100%;
  min-width: 177.78vh;      /* cover by height (16:9) */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  filter: grayscale(0.32) contrast(1.04);
}
.tb-svc__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02) brightness(0.92);
}
/* Native self-hosted background video — cover the section by object-fit
   rather than the iframe's vw/vh trick. */
.tb-svc__video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  transform: none;
  object-fit: cover;
}
.tb-svc__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(16,16,14,0.86) 0%, rgba(16,16,14,0.64) 42%, rgba(16,16,14,0.20) 72%, rgba(16,16,14,0.06) 100%),
    linear-gradient(180deg, rgba(16,16,14,0.34) 0%, transparent 30%, rgba(16,16,14,0.40) 100%);
}
.tb-svc--rev .tb-svc__scrim {
  background:
    linear-gradient(270deg, rgba(16,16,14,0.86) 0%, rgba(16,16,14,0.64) 42%, rgba(16,16,14,0.20) 72%, rgba(16,16,14,0.06) 100%),
    linear-gradient(180deg, rgba(16,16,14,0.34) 0%, transparent 30%, rgba(16,16,14,0.40) 100%);
}
.tb-svc__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
}
.tb-svc--rev .tb-svc__inner { justify-content: flex-end; }
.tb-svc__text {
  max-width: 540px;
}
.tb-svc--rev .tb-svc__text { text-align: left; }
.tb-svc__num {
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  color: var(--olive-light);
  margin-bottom: 18px;
}
.tb-svc__title {
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.016em;
  color: var(--paper);
  margin: 0 0 20px;
  text-wrap: balance;
}
.tb-svc__lede {
  font-family: "Playfair Display", var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.4;
  color: var(--olive-light);
  margin: 0 0 22px;
  max-width: 42ch;
}
.tb-svc__desc {
  font-family: "Lato", var(--font-sans);
  font-size: 17px;
  line-height: 1.74;
  color: rgba(255,255,255,0.90);
  margin: 0 0 28px;
  max-width: 46ch;
}
.tb-svc__points {
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.tb-svc__points li {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.24);
  padding: 8px 14px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.tb-svc__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--paper);
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.tb-svc__arrow { color: var(--olive-light); transition: transform var(--dur-base) var(--ease-standard); }
.tb-svc__more:hover { color: var(--olive-light); border-color: var(--olive-light); }
.tb-svc__more:hover .tb-svc__arrow { transform: translate(2px, -2px); }

@media (max-width: 880px) {
  .tb-svc { min-height: clamp(520px, 86vh, 720px); width: calc(100% - 2 * var(--space-lg)); margin-bottom: var(--space-md); }
  .tb-svc__inner, .tb-svc--rev .tb-svc__inner { justify-content: flex-start; }
  .tb-svc__text { max-width: 100%; }
  .tb-svc__scrim, .tb-svc--rev .tb-svc__scrim {
    background:
      linear-gradient(180deg, rgba(16,16,14,0.42) 0%, rgba(16,16,14,0.30) 30%, rgba(16,16,14,0.84) 100%);
  }
}

/* =========================================================================
   MOBILE HARDENING LAYER — modern-device essentials (iOS + Android)
   Notch / safe-area, text-inflation guard, zoom-free form fields,
   dynamic viewport height, momentum scroll. Appended last so it wins.
   ========================================================================= */

/* Stop iOS inflating text in landscape; keep author sizes exact. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Cleaner taps: remove the grey flash, keep text selectable in copy. */
a, button, .btn, .tb-svc__more, .t-link-sm,
.tb-nav__burger, .tb-nav__drawerLink, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Smooth momentum scrolling inside any scroll region. */
body { -webkit-overflow-scrolling: touch; }

/* Dynamic viewport height for the full-bleed films, so the iOS/Android URL
   bar collapsing doesn't leave a gap or a jump. Falls back to vh cleanly. */
@supports (height: 100dvh) {
  .tb-svc { min-height: clamp(560px, 88dvh, 860px); }
  @media (max-width: 880px) {
    .tb-svc { min-height: clamp(520px, 86dvh, 720px); }
  }
}

/* Notch / cutout safe-area insets. Fixed nav, drawer, footer and the
   floating WhatsApp button must clear the sensor housing and home bar. */
@media (max-width: 980px) {
  .tb-nav {
    padding-left: max(var(--space-lg), env(safe-area-inset-left)) !important;
    padding-right: max(var(--space-lg), env(safe-area-inset-right)) !important;
  }
  .tb-nav__drawer {
    padding-left: max(var(--space-lg), env(safe-area-inset-left));
    padding-right: max(var(--space-lg), env(safe-area-inset-right));
    padding-bottom: max(var(--space-xxl), env(safe-area-inset-bottom));
  }
  .tb-footer {
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
  .tb-fab-wa {
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
  }
}

/* iOS zooms the page when a focused field is under 16px. Hold form
   controls at 16px on phones so focus never triggers an unwanted zoom. */
@media (max-width: 720px) {
  .tb-join__input,
  .tb-join__select,
  .tb-field__input,
  .tb-field__textarea,
  .tb-combo__input,
  input, select, textarea {
    font-size: 16px;
  }
}

/* =========================================================================
   AE QUALIFICATIONS — editorial recompose (curriculum.html § I)
   A calmer, ledger-style composition: a 5/7 editorial header, a labelled
   framing row, a 2×2 specification matrix (two threshold requirements up
   top with an olive accent, two supporting items receded below), and a
   closing "how we staff it" note in the same column rhythm.
   ========================================================================= */
.tb-aeq {
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* HEAD — eyebrow + title (5) / serif standfirst (7) */
.tb-aeq__head {
  display: grid; grid-template-columns: 5fr 7fr; gap: 80px;
  align-items: start;
  padding-bottom: var(--space-xxl);
  border-bottom: 1px solid var(--hairline);
}
.tb-aeq__head-l .eyebrow-lockup { margin-bottom: 20px; }
.tb-aeq > .container > .eyebrow-lockup { display: inline-flex; margin-bottom: 24px; }
.tb-aeq__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 42px; line-height: 1.08; letter-spacing: -0.015em;
  color: var(--ink); margin: 0; text-wrap: balance;
}
.tb-aeq__title em { font-style: italic; color: var(--olive-deep); }
.tb-aeq__lede {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 23px; line-height: 1.5; letter-spacing: -0.003em;
  color: var(--ink-soft); margin: 0; text-wrap: pretty;
  max-width: 40ch;
}
.tb-aeq__lede em { font-style: italic; color: var(--olive-deep); }

/* ROWS — overline (5) / text (7), echoing the head rhythm */
.tb-aeq__row {
  display: grid; grid-template-columns: 5fr 7fr; gap: 80px;
  align-items: baseline;
  padding-top: var(--space-xxl);
}
.tb-aeq__overline {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--olive-deep); line-height: 1.5;
  display: inline-flex; align-items: center; gap: 14px;
}
.tb-aeq__overline::before {
  content: ""; width: 28px; height: 1px; background: var(--olive); flex: none;
}
.tb-aeq__row-text {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.7;
  color: var(--graphite); margin: 0; text-wrap: pretty;
}
.tb-aeq__row-text em { font-style: italic; color: var(--olive-deep); }
.tb-aeq__row-text--lead { font-size: 18px; color: var(--ink-soft); }

/* GRID — 2×2 specification matrix */
.tb-aeq__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--hairline);
  background: var(--canvas);
  margin-top: 28px;
}
.tb-aeq__cell { padding: 38px 40px 40px; position: relative; }
.tb-aeq__cell:nth-child(odd) { border-right: 1px solid var(--hairline); }
.tb-aeq__cell:nth-child(n+3) { border-top: 1px solid var(--hairline); }
.tb-aeq__cell.is-context { background: var(--canvas-warm); }
.tb-aeq__cell.is-threshold::before {
  content: ""; position: absolute; top: -1px; left: 40px;
  width: 44px; height: 3px; background: var(--olive); z-index: 1;
}
.tb-aeq__cell-top {
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px;
}
.tb-aeq__num {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 30px; line-height: 1; color: var(--olive);
}
.tb-aeq__cell.is-context .tb-aeq__num { color: var(--olive-light); }
.tb-aeq__kicker {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--olive-deep); white-space: nowrap;
}
.tb-aeq__cell.is-context .tb-aeq__kicker { color: var(--slate); }
.tb-aeq__cell-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 22px; line-height: 1.25; color: var(--ink); margin: 0 0 12px;
}
.tb-aeq__cell-title em { font-style: italic; color: var(--olive-deep); }
.tb-aeq__cell-body {
  font-family: var(--font-sans); font-size: 15.5px; line-height: 1.65;
  color: var(--graphite); margin: 0; text-wrap: pretty;
}

@media (max-width: 980px) {
  .tb-aeq__head, .tb-aeq__row { grid-template-columns: 1fr; gap: 22px; }
  .tb-aeq__lede { max-width: none; }
  .tb-aeq__grid { grid-template-columns: 1fr; }
  .tb-aeq__cell:nth-child(odd) { border-right: 0; }
  .tb-aeq__cell:nth-child(n+2) { border-top: 1px solid var(--hairline); }
  .tb-aeq__title { font-size: 30px !important; }
  .tb-aeq__lede { font-size: 20px; }
}

/* =========================================================================
   AE QUALIFICATIONS — photographic ground variant (dark, library photo)
   Light type on a darkened, desaturated photo. The 2×2 matrix becomes a
   frosted glass panel so every word stays legible over the busy image.
   ========================================================================= */
.tb-aeq--photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #14140f;
  border-top: 1px solid rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
}
.tb-aeq__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 42%;
  filter: grayscale(1) contrast(1.04) brightness(0.46);
}
.tb-aeq__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16,16,14,0.90) 0%, rgba(16,16,14,0.82) 34%, rgba(16,16,14,0.84) 68%, rgba(16,16,14,0.93) 100%),
    radial-gradient(130% 110% at 82% 8%, rgba(16,16,14,0.18), rgba(16,16,14,0.84) 72%);
}
.tb-aeq--photo > .container { position: relative; z-index: 1; }

/* Soft halo so header/row copy stays legible over any bright patch of photo
   (the matrix cards protect their own text via the frosted panel). */
.tb-aeq--photo .eyebrow-lockup,
.tb-aeq--photo .tb-aeq__title,
.tb-aeq--photo .tb-aeq__lede,
.tb-aeq--photo .tb-aeq__overline,
.tb-aeq--photo .tb-aeq__row-text {
  text-shadow: 0 1px 14px rgba(8, 8, 6, 0.7), 0 1px 3px rgba(8, 8, 6, 0.6);
}
.tb-aeq--photo .eyebrow-lockup { color: var(--olive-light); }

/* Type, lifted to paper / olive-light on the dark ground */
.tb-aeq--photo .tb-aeq__head { border-bottom-color: rgba(196, 191, 160, 0.24); }
.tb-aeq--photo .tb-aeq__title { color: var(--paper); }
.tb-aeq--photo .tb-aeq__title em { color: var(--olive-light); }
.tb-aeq--photo .tb-aeq__lede { color: rgba(250, 248, 242, 0.84); }
.tb-aeq--photo .tb-aeq__lede em { color: var(--olive-light); }
.tb-aeq--photo .tb-aeq__overline { color: var(--olive-light); }
.tb-aeq--photo .tb-aeq__overline::before { background: var(--olive-light); }
.tb-aeq--photo .tb-aeq__row-text { color: rgba(250, 248, 242, 0.76); }
.tb-aeq--photo .tb-aeq__row-text em { color: var(--olive-light); }
.tb-aeq--photo .tb-aeq__row-text--lead { color: var(--paper); }

/* Matrix, frosted glass over the photo */
.tb-aeq--photo .tb-aeq__grid {
  border-color: rgba(196, 191, 160, 0.3);
  background: rgba(14, 14, 11, 0.78);
  backdrop-filter: blur(8px) saturate(0.85);
  -webkit-backdrop-filter: blur(8px) saturate(0.85);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.tb-aeq--photo .tb-aeq__cell:nth-child(odd) { border-right-color: rgba(196, 191, 160, 0.2); }
.tb-aeq--photo .tb-aeq__cell:nth-child(n+3) { border-top-color: rgba(196, 191, 160, 0.2); }
.tb-aeq--photo .tb-aeq__cell.is-context { background: rgba(0, 0, 0, 0.28); }
.tb-aeq--photo .tb-aeq__cell.is-threshold::before { background: var(--olive); }
.tb-aeq--photo .tb-aeq__num { color: var(--olive-light); }
.tb-aeq--photo .tb-aeq__cell.is-context .tb-aeq__num { color: rgba(196, 191, 160, 0.55); }
.tb-aeq--photo .tb-aeq__kicker { color: var(--olive-light); }
.tb-aeq--photo .tb-aeq__cell.is-context .tb-aeq__kicker { color: rgba(250, 248, 242, 0.52); }
.tb-aeq--photo .tb-aeq__cell-title { color: var(--paper); }
.tb-aeq--photo .tb-aeq__cell-title em { color: var(--olive-light); }
.tb-aeq--photo .tb-aeq__cell-body { color: rgba(250, 248, 242, 0.74); }

/* =========================================================================
   WHY BIRDS FLY IN PAIRS — brand.html (the science, then the client)
   ========================================================================= */
.tb-pair__head {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}
.tb-pair__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin-bottom: 20px;
}
.tb-pair__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 22px;
  text-wrap: balance;
}
.tb-pair__title em { font-style: italic; color: var(--olive-deep); }
.tb-pair__lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

.tb-pair__figure {
  margin: 0 0 56px;
}
.tb-pair__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
  object-position: center 42%;
  filter: grayscale(1) contrast(1.02);
  border: 1px solid var(--hairline);
  background: #0a0a0a;
}
.tb-pair__figcaption {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--slate);
  text-align: center;
  margin-top: 14px;
}

.tb-pair__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  border: 1px solid var(--hairline);
  background: var(--paper);
}
.tb-pair__card {
  padding: 40px 36px 42px;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.tb-pair__card:not(:last-child) { border-right: 1px solid var(--hairline); }
.tb-pair__glyph {
  display: block;
  color: var(--olive);
  margin-bottom: 20px;
}
.tb-pair__card-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 24px;
}
.tb-pair__row { padding-top: 18px; border-top: 1px solid var(--hairline); }
.tb-pair__row + .tb-pair__row { margin-top: 22px; }
.tb-pair__tag {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin-bottom: 10px;
}
.tb-pair__tag--practice { color: var(--royal); }
.tb-pair__text {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.66;
  color: var(--graphite);
  margin: 0;
  text-wrap: pretty;
}
.tb-pair__close {
  max-width: 760px;
  margin: 48px auto 0;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.tb-pair__close em { font-style: italic; color: var(--olive-deep); }

@media (max-width: 980px) {
  .tb-pair__title { font-size: 34px; }
  .tb-pair__lede { font-size: 19px; }
  .tb-pair__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .tb-pair__card { display: flex; flex-direction: column; grid-row: auto; }
  .tb-pair__card:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .tb-pair__close { font-size: 19px; }
}

/* =========================================================================
   PAGE FLIGHT TRANSITION — two-bird loader (js/transition.js)
   ========================================================================= */
.tb-fly {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--canvas);
}
.tb-fly.is-arrival { transition: opacity 0.6s var(--ease-standard); }
.tb-fly.is-arrival.is-out { opacity: 0; pointer-events: none; }
.tb-fly.is-departure { opacity: 0; transition: opacity 0.42s var(--ease-standard); }
.tb-fly.is-departure.is-cover { opacity: 1; }

.tb-fly__flock {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  animation: tbfly-bob 2.6s ease-in-out infinite;
}
.tb-fly__bird {
  display: block;
  opacity: 0;
  will-change: transform, opacity;
}
.tb-fly__bird--1 { margin-bottom: 0; }
.tb-fly__bird--2 { margin-bottom: 28px; }
.tb-fly__wing {
  display: block;
  transform-origin: 50% 64%;
  animation: tbfly-flap 0.42s ease-in-out infinite;
}
.tb-fly__wing svg { display: block; width: 54px; height: auto; }
.tb-fly__wing svg path { stroke: var(--ink); }
.tb-fly__bird--2 .tb-fly__wing svg { width: 66px; }
.tb-fly__bird--2 .tb-fly__wing { animation-delay: 0.1s; }
.tb-fly__bird--2 .tb-fly__wing svg path { stroke: var(--olive-deep); }

@keyframes tbfly-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes tbfly-flap {
  0%, 100% { transform: scaleY(0.58); }
  50%      { transform: scaleY(1); }
}

/* ---- Per-page arrival variants (bird 1 + bird 2) ---- */
/* rise */
.tb-fly[data-anim="rise"] .tb-fly__bird--1 { animation: tbfly-rise1 1s var(--ease-standard) 0.05s forwards; }
.tb-fly[data-anim="rise"] .tb-fly__bird--2 { animation: tbfly-rise2 1s var(--ease-standard) 0.16s forwards; }
@keyframes tbfly-rise1 { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes tbfly-rise2 { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
/* meet */
.tb-fly[data-anim="meet"] .tb-fly__bird--1 { animation: tbfly-meet1 1s var(--ease-standard) 0.05s forwards; }
.tb-fly[data-anim="meet"] .tb-fly__bird--2 { animation: tbfly-meet2 1s var(--ease-standard) 0.1s forwards; }
@keyframes tbfly-meet1 { from { opacity: 0; transform: translateX(-78px) rotate(-7deg); } to { opacity: 1; transform: none; } }
@keyframes tbfly-meet2 { from { opacity: 0; transform: translateX(78px) rotate(7deg); } to { opacity: 1; transform: none; } }
/* cross */
.tb-fly[data-anim="cross"] .tb-fly__bird--1 { animation: tbfly-cross1 1.05s var(--ease-standard) 0.05s forwards; }
.tb-fly[data-anim="cross"] .tb-fly__bird--2 { animation: tbfly-cross2 1.05s var(--ease-standard) 0.05s forwards; }
@keyframes tbfly-cross1 { from { opacity: 0; transform: translate(-84px, -28px); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes tbfly-cross2 { from { opacity: 0; transform: translate(84px, 28px); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
/* fan */
.tb-fly[data-anim="fan"] .tb-fly__bird--1 { animation: tbfly-fan 0.95s var(--ease-standard) 0.05s forwards; }
.tb-fly[data-anim="fan"] .tb-fly__bird--2 { animation: tbfly-fan 0.95s var(--ease-standard) 0.22s forwards; }
@keyframes tbfly-fan { from { opacity: 0; transform: translateY(26px) scale(0.5); } to { opacity: 1; transform: none; } }
/* descend */
.tb-fly[data-anim="descend"] .tb-fly__bird--1 { animation: tbfly-descend1 1s var(--ease-standard) 0.05s forwards; }
.tb-fly[data-anim="descend"] .tb-fly__bird--2 { animation: tbfly-descend2 1s var(--ease-standard) 0.16s forwards; }
@keyframes tbfly-descend1 { from { opacity: 0; transform: translateY(-54px); } to { opacity: 1; transform: none; } }
@keyframes tbfly-descend2 { from { opacity: 0; transform: translateY(-74px); } to { opacity: 1; transform: none; } }
/* orbit */
.tb-fly[data-anim="orbit"] .tb-fly__bird--1 { animation: tbfly-orbit1 1.05s var(--ease-standard) 0.05s forwards; }
.tb-fly[data-anim="orbit"] .tb-fly__bird--2 { animation: tbfly-orbit2 1.05s var(--ease-standard) 0.05s forwards; }
@keyframes tbfly-orbit1 { from { opacity: 0; transform: translate(-36px, -32px) rotate(-22deg); } to { opacity: 1; transform: none; } }
@keyframes tbfly-orbit2 { from { opacity: 0; transform: translate(36px, 32px) rotate(22deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .tb-fly__wing { animation: none; }
  .tb-fly__bird { opacity: 1 !important; animation: none !important; transform: none !important; }
}

/* =========================================================================
   TPQA GRADE OUTCOMES — colour-coded cards (compliance.html § IV)
   ========================================================================= */
.tb-grades { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.tb-grades__row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  align-items: start;
  padding: 24px 26px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--g-accent, var(--olive));
  border-radius: 2px;
}
.tb-grades__row.tone-good { --g-accent: var(--olive); }
.tb-grades__row.tone-warn { --g-accent: var(--royal); }
.tb-grades__row.tone-terminal { --g-accent: var(--charcoal); }
.tb-grades__num {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 42px; line-height: 0.9; color: var(--g-accent);
}
.tb-grades__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 10px;
}
.tb-grades__verdict {
  font-family: var(--font-serif); font-weight: 500; font-size: 21px;
  line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin: 0;
}
.tb-grades__verdict em { font-style: italic; color: var(--g-accent); }
.tb-grades__status {
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-accent);
  white-space: nowrap;
  border: 1px solid color-mix(in oklab, var(--g-accent) 42%, transparent);
  padding: 5px 11px; border-radius: 999px;
}
.tb-grades__body {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.65;
  color: var(--graphite); margin: 0;
}
@media (max-width: 720px) {
  .tb-grades__row { grid-template-columns: 48px 1fr; gap: 16px; padding: 20px; }
  .tb-grades__num { font-size: 34px; }
}

/* =========================================================================
   FOUR PILLARS — refined bordered strip (compliance.html § II · ii)
   ========================================================================= */
.tb-pillars .tb-numerals__grid.is-4 {
  gap: 0;
  border: 1px solid var(--hairline);
  background: var(--paper);
}
.tb-pillars .tb-numeral {
  position: relative;
  padding: 38px 30px 34px;
  border-right: 1px solid var(--hairline);
  margin: 0;
}
.tb-pillars .tb-numeral:last-child { border-right: 0; }
.tb-pillars .tb-numeral::before {
  content: ""; position: absolute; top: -1px; left: 30px;
  width: 40px; height: 3px; background: var(--olive);
}
.tb-pillars .tb-numeral__roman {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 30px; line-height: 1; color: var(--olive); margin-bottom: 18px;
}
.tb-pillars .tb-numeral__title {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 16px; margin-bottom: 16px;
}
@media (max-width: 980px) {
  .tb-pillars .tb-numerals__grid.is-4 { grid-template-columns: 1fr 1fr; }
  .tb-pillars .tb-numeral:nth-child(2n) { border-right: 0; }
  .tb-pillars .tb-numeral:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 600px) {
  .tb-pillars .tb-numerals__grid.is-4 { grid-template-columns: 1fr; }
  .tb-pillars .tb-numeral { border-right: 0; }
  .tb-pillars .tb-numeral:nth-child(n+2) { border-top: 1px solid var(--hairline); }
}

/* =========================================================================
   MARKETING — the commercial point (marketing into sales)
   ========================================================================= */
.tb-mktsale__head { max-width: 900px; margin: 0 auto 56px; text-align: center; }
.tb-mktsale__eyebrow {
  display: inline-block; font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive-deep); margin-bottom: 20px;
}
.tb-mktsale__title {
  font-family: var(--font-serif); font-weight: 400; font-size: 44px; line-height: 1.08;
  letter-spacing: -0.018em; color: var(--ink); margin: 0 0 22px; text-wrap: balance;
}
.tb-mktsale__title em { font-style: italic; color: var(--olive-deep); }
.tb-mktsale__lede {
  font-family: var(--font-serif); font-weight: 400; font-size: 21px; line-height: 1.5;
  color: var(--ink-soft); margin: 0; text-wrap: pretty;
}
.tb-mktsale__flow {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; gap: 18px;
}
.tb-mktsale__step {
  background: var(--bone); border: 1px solid var(--hairline);
  border-top: 3px solid var(--olive);
  padding: 32px 30px 30px; display: flex; flex-direction: column;
}
.tb-mktsale__num {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 28px; line-height: 1; color: var(--olive); margin-bottom: 18px;
}
.tb-mktsale__steptitle {
  font-family: var(--font-serif); font-weight: 500; font-size: 21px; line-height: 1.2;
  color: var(--ink); margin: 0 0 12px;
}
.tb-mktsale__stepbody {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.65; color: var(--graphite); margin: 0;
}
.tb-mktsale__arrow {
  align-self: center; font-family: var(--font-serif); font-size: 26px; color: var(--olive);
}
.tb-mktsale__foot {
  max-width: 780px; margin: 44px auto 0; text-align: center;
  font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.5;
  color: var(--ink-soft); text-wrap: pretty;
}
.tb-mktsale__foot strong { font-style: normal; font-weight: 600; color: var(--olive-deep); }
@media (max-width: 900px) {
  .tb-mktsale__title { font-size: 32px; }
  .tb-mktsale__flow { grid-template-columns: 1fr; }
  .tb-mktsale__arrow { transform: rotate(90deg); justify-self: center; }
  .tb-mktsale__foot { font-size: 18px; }
}

/* =========================================================================
   SECTORS — aligned to the CASL card layout (setup.html § II)
   Clean paper cards with a pill tag, serif title, description and a footer
   cue, mirroring the Course Approval Skills List cards.
   ========================================================================= */
.tb-sectors__grid { gap: 24px; }
.tb-sector {
  padding: 26px 26px 22px;
  background: var(--paper);
  border: 1px solid rgba(150, 146, 101, 0.22);
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(20, 20, 18, 0.02), 0 12px 30px rgba(20, 20, 18, 0.04);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  display: flex; flex-direction: column; gap: 14px;
  overflow: visible;
  transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}
.tb-sector::before, .tb-sector::after { display: none !important; }
.tb-sector:hover {
  transform: translateY(-2px);
  border-color: var(--olive-deep);
  box-shadow: 0 2px 4px rgba(20, 20, 18, 0.04), 0 18px 36px rgba(20, 20, 18, 0.08);
}
.tb-sector:nth-child(3n) { border-right: 1px solid rgba(150, 146, 101, 0.22); }
.tb-sector:nth-last-child(-n+3) { border-bottom: 1px solid rgba(150, 146, 101, 0.22); }
.tb-sector__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0;
}
.tb-sector__num {
  font-family: var(--font-sans); font-style: normal;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--olive-deep); margin: 0; padding: 5px 11px;
  border: 1px solid currentColor; border-radius: 999px;
  background: rgba(150, 146, 101, 0.08); display: inline-flex;
}
.tb-sector__num::before { display: none; }
.tb-sector__ind {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate);
}
.tb-sector__title {
  display: block; margin: 0;
  font-family: var(--font-serif); font-weight: 400; font-size: 22px;
  line-height: 1.22; letter-spacing: -0.01em; color: var(--charcoal);
}
.tb-sector__sub {
  font-size: 15px; line-height: 1.55; color: var(--graphite); margin: 0;
}
.tb-sector__foot {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid rgba(150, 146, 101, 0.22);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--olive-deep);
}
.tb-sector__dot { font-size: 9px; color: var(--olive); }

/* Track record — blue layout, no container shadow (compliance § II) */
.tb-record--dark { background: var(--royal-deep) !important; position: relative; overflow: hidden; }
.tb-record--dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px circle at 18% 12%, rgba(196, 191, 160, 0.10), transparent 60%),
    radial-gradient(720px circle at 85% 88%, rgba(61, 90, 138, 0.30), transparent 65%);
}
.tb-record--dark > .container { position: relative; z-index: 1; }
.tb-record--dark .tb-record__inner {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.tb-record--dark .tb-record__title { color: var(--paper); }
.tb-record--dark .tb-record__sub { color: rgba(250, 248, 242, 0.78); }
.tb-record--dark .tb-record__sub em { color: var(--olive-light); }
.tb-record--dark .tb-record__head .eyebrow-lockup { color: var(--olive-light); }
.tb-record--dark .tb-record__head .eyebrow-lockup::before { background: var(--olive-light); }
.tb-record--dark .tb-record__link { background: var(--paper); }
.tb-record__sub + .tb-record__sub { margin-top: 20px; }

/* CQC — "What CQC examines" criteria cards (compliance § VI) */
.tb-cqcareas { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--hairline); }
.tb-cqcareas__label {
  display: block; font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--olive-deep); margin-bottom: 24px;
}
.tb-cqcareas__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border: 1px solid var(--hairline); background: var(--paper);
}
.tb-cqcareas__card { padding: 28px 26px; border-right: 1px solid var(--hairline); }
.tb-cqcareas__card:last-child { border-right: 0; }
.tb-cqcareas__num {
  display: block; font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 22px; line-height: 1; color: var(--olive); margin-bottom: 14px;
}
.tb-cqcareas__term {
  font-family: var(--font-serif); font-weight: 500; font-size: 18px;
  line-height: 1.2; color: var(--ink); margin: 0 0 10px;
}
.tb-cqcareas__term em { font-style: italic; color: var(--olive-deep); }
.tb-cqcareas__def {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.6;
  color: var(--graphite); margin: 0;
}
@media (max-width: 860px) {
  .tb-cqcareas__grid { grid-template-columns: 1fr; }
  .tb-cqcareas__card { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .tb-cqcareas__card:last-child { border-bottom: 0; }
}

/* Three forms — align the bullet-list rows across the three columns (setup § III) */
.tb-numerals__grid.is-3.tb-forms-align {
  grid-template-rows: repeat(5, auto);
  align-items: start;
}
.tb-forms-align .tb-numeral {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
}
@media (max-width: 980px) {
  .tb-numerals__grid.is-3.tb-forms-align { grid-template-rows: none; }
  .tb-forms-align .tb-numeral { display: block; grid-row: auto; }
}

/* Sectors — dark royal ground (matches the CASL register) */
.tb-sectors--dark {
  background: var(--royal-deep);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(20, 38, 74, 0.6);
}
.tb-sectors--dark::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px circle at 18% 12%, rgba(196, 191, 160, 0.10), transparent 60%),
    radial-gradient(720px circle at 85% 88%, rgba(61, 90, 138, 0.30), transparent 65%);
}
.tb-sectors--dark .tb-sectors__bg { display: none; }
.tb-sectors--dark > .container { position: relative; z-index: 1; }
body.is-premium .tb-sectors--dark .tb-sectionhead__title { color: var(--paper); }
.tb-sectors--dark .tb-sectionhead__title em { color: var(--olive-light); }
body.is-premium .tb-sectors--dark .tb-sectionhead__sub { color: rgba(250, 248, 242, 0.78); }
body.is-premium .tb-sectors--dark .eyebrow-lockup { color: var(--olive-light); }
body.is-premium .tb-sectors--dark .eyebrow-lockup::before { background: var(--olive-light); }

/* =========================================================================
   FOUR PILLARS — CASL-style cards with icons (compliance § II · ii)
   Overrides the earlier bordered-strip treatment.
   ========================================================================= */
.tb-pillars .tb-numerals__grid.is-4 {
  gap: 22px;
  border: 0;
  background: transparent;
}
.tb-pillars .tb-numeral {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 32px 30px 30px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 1px rgba(20, 20, 18, 0.02), 0 12px 30px rgba(20, 20, 18, 0.04);
}
.tb-pillars .tb-numeral:last-child { border-right: 1px solid var(--hairline); }
.tb-pillars .tb-numeral::before { content: none; }
.tb-pillars__top { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.tb-pillars__icon {
  display: inline-flex; width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(150, 146, 101, 0.4);
  border-radius: 999px;
  color: var(--olive-deep);
  background: rgba(150, 146, 101, 0.06);
}
.tb-pillars .tb-numeral__roman {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 24px; line-height: 1; color: var(--olive); margin: 0;
}
.tb-pillars .tb-numeral__title {
  border-bottom: 0; padding-bottom: 0; margin: 2px 0 0;
}

/* Standing list — organisation links (contact.html § IV) */
a.tb-standing__name {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 8px;
  transition: color 180ms ease;
}
a.tb-standing__name:hover { color: var(--olive-deep); }
.tb-standing__ext { font-size: 0.66em; color: var(--olive); opacity: 0; transition: opacity 180ms ease; }
a.tb-standing__name:hover .tb-standing__ext { opacity: 1; }

/* =========================================================================
   BRAND TYPE CONSISTENCY — one Playfair/Lato scale across every page.
   Locks each tier to a single size so no page reads bigger or smaller than
   another. (Privacy / Engagement / Terms keep their dense legal layouts.)
   ========================================================================= */
/* Hero titles (h1 tier) */
.tb-pagehero__title,
.tb-hero__title {
  font-family: "Playfair Display", var(--font-serif) !important;
  font-size: clamp(40px, 5.4vw, 60px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.018em !important;
}
/* Section titles (h2 tier) */
.tb-sectionhead__title,
.tb-twocol__title,
.tb-compare__title,
.tb-speaker__title,
.tb-cta__title,
.premium-h2,
.tb-casl-section__title,
.tb-mktsale__title,
.tb-pair__title,
.tb-aeq__title,
.tb-record__title,
.tb-belief__title,
.tb-experience__title,
.tb-contact__title,
.tb-services__title,
.tb-faq__title,
.tb-join__title,
.tb-ord-section__title {
  font-family: "Playfair Display", var(--font-serif) !important;
  font-size: clamp(30px, 3.5vw, 44px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.016em !important;
}
/* Standfirst / lede tier */
.tb-pagehero__lede,
.tb-aeq__lede,
.tb-pair__lede,
.tb-mktsale__lede,
.tb-casl-section__sub,
.tb-cta__sub {
  font-size: 20px !important;
  line-height: 1.55 !important;
}
/* Body / supporting prose tier */
.tb-sectionhead__sub,
.tb-twocol__body p,
.tb-prose__body p,
.tb-contact__sub,
.tb-services__sub,
.premium-prose p,
.tb-aeq__row-text,
.tb-faq__a p {
  font-family: "Lato", var(--font-sans) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}
/* Card / sub-heading tier (h3) */
.tb-numeral__title,
.tb-step__title,
.tb-economy__title,
.tb-sector__title,
.casl__card-title,
.tb-pair__card-title,
.tb-cqcareas__term,
.tb-mktsale__steptitle,
.tb-aeq__cell-title,
.tb-grades__verdict {
  font-family: "Playfair Display", var(--font-serif) !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
}
/* Eyebrow / overline tier */
.eyebrow-lockup,
.tb-sector__num,
.tb-aeq__overline,
.tb-mktsale__eyebrow,
.tb-pair__eyebrow,
.tb-casl-section__eyebrow {
  font-family: "Lato", var(--font-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
}

/* =========================================================================
   MOBILE PASS — keep the brand scale phone-friendly (<= 600px), so the
   consistency layer above does not leave headings oversized on small screens,
   and the rebuilt components sit comfortably on a phone.
   ========================================================================= */
@media (max-width: 600px) {
  .tb-pagehero__title,
  .tb-hero__title { font-size: clamp(29px, 8.2vw, 40px) !important; line-height: 1.08 !important; }

  .tb-sectionhead__title,
  .tb-twocol__title,
  .tb-compare__title,
  .tb-speaker__title,
  .tb-cta__title,
  .premium-h2,
  .tb-casl-section__title,
  .tb-mktsale__title,
  .tb-pair__title,
  .tb-aeq__title,
  .tb-record__title,
  .tb-belief__title,
  .tb-experience__title,
  .tb-contact__title,
  .tb-services__title,
  .tb-faq__title,
  .tb-join__title,
  .tb-ord-section__title { font-size: clamp(24px, 6.6vw, 32px) !important; line-height: 1.16 !important; }

  .tb-pagehero__lede,
  .tb-aeq__lede,
  .tb-pair__lede,
  .tb-mktsale__lede,
  .tb-casl-section__sub,
  .tb-cta__sub { font-size: 17px !important; }

  /* New component grids → single column, snug padding */
  .tb-cqcareas__grid { grid-template-columns: 1fr; }
  .tb-mktsale__flow { grid-template-columns: 1fr; }
  .casl__pub-cards { grid-template-columns: 1fr; }
  .tb-grades__row { grid-template-columns: 44px 1fr; gap: 14px; padding: 20px; }
  .tb-grades__num { font-size: 30px; }
  .tb-sector,
  .tb-pillars .tb-numeral,
  .tb-pair__card,
  .tb-cqcareas__card,
  .tb-mktsale__step { padding: 24px 22px; }
  .tb-aeq__cell { padding: 26px 22px; }

  /* Keep the page from scrolling sideways on small screens */
  .tb-mktsale__head,
  .tb-pair__head { max-width: 100%; }
}

/* =========================================================================
   Service videos (home) — refined, premium mobile treatment.
   1) Let the section GROW to fit its overlaid copy instead of cropping it
      (the film stays clipped by .tb-svc__bg: object-fit:cover + overflow:hidden).
   2) On phones, strengthen/even the scrim for crisp white copy and dial the
      editorial type down to an elegant mobile scale, with a subtle rounded frame.
   ========================================================================= */
.tb-svc {
  overflow: visible;
  padding-block: clamp(56px, 8vh, 110px);
}

@media (max-width: 720px) {
  .tb-svc {
    padding-block: clamp(48px, 9vh, 72px);
    border-radius: 6px;
  }
  .tb-svc__bg { border-radius: 6px; }
  .tb-svc__scrim,
  .tb-svc--rev .tb-svc__scrim {
    background:
      linear-gradient(180deg,
        rgba(12, 12, 11, 0.74) 0%,
        rgba(12, 12, 11, 0.58) 42%,
        rgba(12, 12, 11, 0.82) 100%);
  }
  .tb-svc__text { max-width: 30rem; }
  .tb-svc__num { font-size: 24px; margin-bottom: 12px; }
  .tb-svc__title {
    font-size: clamp(27px, 7.4vw, 34px);
    line-height: 1.12;
    letter-spacing: -0.014em;
    margin: 0 0 14px;
  }
  .tb-svc__lede {
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 16px;
    max-width: 100%;
  }
  .tb-svc__desc {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 22px;
    max-width: 100%;
  }
  .tb-svc__points { gap: 8px; margin: 0 0 24px; }
  .tb-svc__points li { font-size: 10px; letter-spacing: 0.08em; padding: 7px 12px; }
  .tb-svc__more { font-size: 11px; letter-spacing: 0.14em; }
}

/* Keep the service-video copy clear of the frame edges on every screen — the
   container gutter shrinks on phones, letting the headings sit too close to the
   border. A generous inline inset gives the copy room to breathe. */
.tb-svc__inner {
  padding-inline: clamp(28px, 6.5vw, 56px);
}
@media (max-width: 720px) {
  .tb-svc__inner { padding-inline: 28px; }
}

/* Home: trim the oversized empty band between the heritage stats and the
   "Fields of expertise" services section (96px bottom + 96px top stacked into
   ~192px of dead space). The heritage grid's bottom rule already divides them,
   so drop the services' top rule too. */
.tb-heritage { padding-bottom: var(--space-xl); }
.tb-services { padding-top: var(--space-xxl); border-top: 0; }

/* Contact "A short note" textarea — align it cleanly with the single-line
   inputs (flush-left, first line top-aligned) and give it a proportionate
   height so it doesn't read as a tall, empty, misaligned box. Desktop + mobile. */
.tb-field__textarea {
  padding: 12px 0 0;
  text-indent: 0;
  margin: 0;
  min-height: 92px;
  line-height: 1.6;
  vertical-align: top;
}

/* Contact: the single-column fields (Practice area, A short note) used
   .tb-field-block, which had no margin, so they sat tighter than the 28px
   two-column rows. Give them the same rhythm so the whole form is even. */
.tb-field-block { margin-bottom: 28px; }

/* Footer legal strip — tidy on narrower screens: stack the copyright above the
   links, ease the letter-spacing so the uppercase line doesn't break mid-phrase,
   and keep each link whole instead of wrapping across lines. */
@media (max-width: 980px) {
  .tb-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    letter-spacing: 0.05em;
    line-height: 1.75;
  }
  .tb-footer__legalRight { text-align: left; }
  .tb-footer__legalRight a { white-space: nowrap; }
}