/* ==========================================================================
   TriBenn — site styles
   Component styles translated from the TriBenn design system bundle
   (tribenn-design-system-11c72840). Token values are never redefined here;
   everything references the custom properties in assets/css/tokens/.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }
body { background: var(--cream); overflow-x: hidden; }

/* The landing page sections are laid out on a 1400px measure. The design
   system's --container-xl is 1360px; the shell below is used for the nav and
   footer too so the logo aligns with the hero content. See README. */
.tb-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Hairline / block primitives used throughout the composition */
.tb-bar { display: block; }
.tb-hair { display: block; width: 32px; height: 1px; background: var(--stone); }
.tb-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }

/* --------------------------------------------------------------------------
   2. Motion
   -------------------------------------------------------------------------- */

/* Spec: no scroll-triggered animation on this page. Motion is limited to
   state feedback on the capability rail, buttons and accordion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   3. Logo
   -------------------------------------------------------------------------- */

.tb-logo {
  --logo-scale: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(7px * var(--logo-scale));
  line-height: 1;
  text-decoration: none;
}
.tb-logo__word {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: calc(22px * var(--logo-scale));
  letter-spacing: 0.26em;
  color: var(--forest);
}
.tb-logo__sub {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--logo-scale));
}
.tb-logo__rule {
  display: block;
  width: calc(14px * var(--logo-scale));
  height: max(1px, calc(1.5px * var(--logo-scale)));
  background: var(--olive);
}
.tb-logo__tag {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: calc(8px * var(--logo-scale));
  letter-spacing: 0.42em;
  color: var(--neutral-600);
}
.tb-logo--cream .tb-logo__word { color: var(--cream); }
.tb-logo--cream .tb-logo__tag { color: var(--sage); }

/* --------------------------------------------------------------------------
   4. Eyebrow
   -------------------------------------------------------------------------- */

.tb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-hover);
  line-height: 1;
}
.tb-eyebrow::before {
  content: "";
  display: block;
  width: var(--rule-accent-width);
  height: var(--rule-accent-height);
  background: var(--color-accent);
}
.tb-dark .tb-eyebrow { color: var(--sage); }

/* --------------------------------------------------------------------------
   5. Button
   -------------------------------------------------------------------------- */

.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 24px;
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: var(--transition-color);
  white-space: nowrap;
  user-select: none;
}
.tb-btn__icon {
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-standard);
}
.tb-btn:hover .tb-btn__icon { transform: translateX(3px); }

.tb-btn--sm { height: 36px; padding: 0 16px; font-size: 12px; }
.tb-btn--lg { height: 52px; padding: 0 32px; }
.tb-btn--full { width: 100%; }

.tb-btn--primary {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}
.tb-btn--primary:hover { background: var(--olive-700); border-color: var(--olive-700); color: var(--cream); }
.tb-btn--primary:active { background: var(--black); }

.tb-btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.tb-btn--secondary:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }

.tb-btn--inverse {
  background: var(--cream);
  color: var(--forest);
  border-color: var(--cream);
}
.tb-btn--inverse:hover { background: var(--white); border-color: var(--white); color: var(--forest); }

.tb-btn--tertiary {
  background: transparent;
  color: var(--color-text-primary);
  height: auto;
  padding: 0 2px 6px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
}
.tb-btn--tertiary:hover { color: var(--color-accent-hover); border-bottom-color: var(--color-accent); }

/* --------------------------------------------------------------------------
   6. Nav
   -------------------------------------------------------------------------- */

.tb-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--cream);
  border-bottom: 1px solid var(--stone);
}
.tb-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.tb-nav__links { display: flex; gap: 32px; align-items: center; }
.tb-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 72px;
  font-family: var(--font-body);
  font-size: var(--text-nav);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  color: var(--neutral-600);
  text-decoration: none;
  position: relative;
  transition: var(--transition-color);
}
.tb-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 22px;
  height: 1px;
  width: 0;
  background: var(--olive);
  transition: width var(--duration-base) var(--ease-standard);
}
.tb-nav__link:hover,
.tb-nav__link[aria-current="true"] { color: var(--forest); }
.tb-nav__link:hover::after,
.tb-nav__link[aria-current="true"]::after { width: 100%; }

.tb-nav__toggle {
  all: unset;
  display: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--forest);
}
.tb-nav__toggle:focus-visible { box-shadow: var(--focus-ring); }
.tb-nav__toggle .tb-icon-close,
.tb-nav__toggle[aria-expanded="true"] .tb-icon-open { display: none; }
.tb-nav__toggle[aria-expanded="true"] .tb-icon-close { display: block; }

.tb-nav__drawer {
  display: none;
  flex-direction: column;
  padding: 8px var(--gutter) 32px;
  border-bottom: 1px solid var(--stone);
  animation: tb-fade var(--duration-base) var(--ease-standard);
}
.tb-nav__drawer[data-open="true"] { display: flex; }
.tb-nav__drawer-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid var(--stone);
}
.tb-nav__drawer-cta { margin-top: 24px; }

@media (max-width: 899px) {
  .tb-nav__links, .tb-nav__cta { display: none; }
  .tb-nav__toggle { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.tb-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  background: var(--cream);
}
.tb-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: clamp(56px, 7vw, 104px) clamp(24px, 4vw, 64px) clamp(56px, 7vw, 104px)
           max(24px, calc((100vw - 1400px) / 2 + 24px));
}
.tb-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(36px, 3.6vw, 58px);
  line-height: 1.06;
  letter-spacing: var(--tracking-tighter);
  color: var(--black);
  margin: 0;
  max-width: 600px;
  text-wrap: balance;
}
/* Spec: line 2 carries the accent. --olive-600 is the contrast-safe olive on cream. */
.tb-hero__title-alt { color: var(--olive-600); }

.tb-hero__lede {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--neutral-700);
  margin: 0;
  max-width: 480px;
}
.tb-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.tb-hero__note {
  margin: 12px 0 0;
  padding-left: 20px;
  border-left: 1px solid var(--stone);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

/* ---- Right-hand photo panel ---------------------------------------------- */

.tb-hero__visual {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: var(--forest);
}
.tb-hero__visual picture { display: contents; }
.tb-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  filter: saturate(0.8);
}

/* Two gradients: fade the left edge into the cream column, and darken the
   right edge so the label text clears 4.5:1. Do not lighten the second one
   without re-checking contrast. */
.tb-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #F4F1E9 0%, rgba(244, 241, 233, 0.55) 10%, rgba(244, 241, 233, 0) 30%),
    linear-gradient(270deg, rgba(24, 32, 27, 0.78) 0%, rgba(24, 32, 27, 0.66) 22%, rgba(24, 32, 27, 0) 42%);
}

/* Both label groups right-anchor to the 1400px container edge. */
.tb-hero__rail,
.tb-hero__claim {
  position: absolute;
  right: max(24px, calc((100vw - 1400px) / 2 + 24px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  pointer-events: none;
}
.tb-hero__rail  { top: clamp(32px, 5vw, 56px); }
.tb-hero__claim { bottom: clamp(32px, 5vw, 56px); }

.tb-rule { display: block; width: 32px; height: 2px; background: var(--olive); }
.tb-rule--sage { background: var(--sage); }

@media (max-width: 640px) {
  .tb-hero__rail,
  .tb-hero__claim { right: 24px; font-size: 11px; letter-spacing: 0.14em; }
}

/* --------------------------------------------------------------------------
   8. Proof band
   -------------------------------------------------------------------------- */

.tb-proof {
  background: var(--cream);
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
}
.tb-proof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.tb-proof__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 28px 26px 0;
  margin-right: 32px;
}
.tb-proof__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-700);
}
.tb-proof__text {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--black);
}

/* --------------------------------------------------------------------------
   9. Section scaffolding
   -------------------------------------------------------------------------- */

.tb-section { background: var(--cream); }
.tb-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 48px;
}
.tb-section__head-copy { display: flex; flex-direction: column; gap: 18px; }
.tb-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
}
.tb-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral-500);
  border: 1px solid var(--stone);
  border-radius: 3px;
  padding: 6px 10px;
}

/* --------------------------------------------------------------------------
   12. Dark chapter — capabilities, one partner, approach
   -------------------------------------------------------------------------- */

.tb-chapter { background: var(--forest); color: var(--cream); }
.tb-chapter .tb-h2 { color: var(--cream); }

.tb-caps__inner {
  padding: clamp(56px, 7vw, 112px) var(--gutter) clamp(56px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.tb-caps__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 24px 64px;
  align-items: end;
}
.tb-caps__lede {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--stone);
  margin: 0;
  max-width: 480px;
}
.tb-caps__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 40px 64px;
  align-items: start;
}

.tb-caps__list { display: flex; flex-direction: column; position: relative; }
.tb-caps__list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: #3A413B;
}
.tb-cap-tab {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid #3A413B;
  text-align: left;
  position: relative;
  color: var(--cream);
}
.tb-cap-tab:focus-visible { box-shadow: var(--focus-ring); }
.tb-cap-tab__node {
  display: block;
  width: 11px;
  height: 11px;
  margin-top: 8px;
  background: var(--forest);
  border: 1.5px solid var(--sage);
  transition: background var(--duration-base) var(--ease-standard);
}
.tb-cap-tab[aria-selected="true"] .tb-cap-tab__node { background: var(--sage); }
.tb-cap-tab__copy { display: flex; flex-direction: column; gap: 6px; }
.tb-cap-tab__line { display: flex; align-items: baseline; gap: 14px; }
.tb-cap-tab__index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--sage);
}
.tb-cap-tab__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--stone);
  transition: color var(--duration-base) var(--ease-standard);
}
.tb-cap-tab[aria-selected="true"] .tb-cap-tab__title { color: var(--cream); }
.tb-cap-tab__tag {
  font-family: var(--font-body);
  font-size: var(--text-nav);
  line-height: 1.5;
  color: var(--stone);
}

.tb-cap-panel {
  background: var(--black);
  border: 1px solid #3A413B;
  border-radius: 8px;
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 420px;
}
.tb-cap-panel[hidden] { display: none; }
.tb-cap-panel__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  align-items: center;
}
.tb-cap-panel__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.tb-cap-panel__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tb-cap-panel__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 3px;
  border: 1px solid #3A413B;
  color: var(--neutral-500);
}
.tb-cap-panel__tag--on { border-color: var(--sage); color: var(--sage); }
.tb-cap-panel__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  margin: 0;
  color: var(--cream);
  max-width: 520px;
}
.tb-cap-panel__body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--stone);
  margin: 0;
  max-width: 520px;
}
.tb-cap-panel__items {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0 32px;
  border-top: 1px solid #3A413B;
}
.tb-cap-panel__items li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid #3A413B;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--cream);
}
.tb-cap-panel__items i { display: block; width: 14px; height: 1.5px; background: var(--sage); flex-shrink: 0; }

/* One partner */
.tb-partner { border-top: 1px solid #3A413B; }
.tb-partner__inner {
  padding: clamp(56px, 7vw, 96px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 48px 64px;
  align-items: start;
}
.tb-partner__copy { display: flex; flex-direction: column; gap: 20px; max-width: 460px; }
.tb-partner__copy p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--stone);
  margin: 0;
}
.tb-partner__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 32px 40px;
}
.tb-partner__col { display: flex; flex-direction: column; gap: 14px; }
.tb-partner__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral-400);
}
.tb-partner__label--on { color: var(--sage); }
.tb-partner__before {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tb-partner__before li {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--stone);
  padding: 10px 14px;
  border: 1px dashed #3A413B;
  border-radius: 4px;
}
.tb-partner__after {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--sage);
}
.tb-partner__after li {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--cream);
  padding: 10px 0 10px 22px;
  position: relative;
}
.tb-partner__after i {
  position: absolute;
  left: -5px;
  top: 16px;
  width: 8px;
  height: 8px;
  background: var(--forest);
  border: 1.5px solid var(--sage);
}

/* Approach */
.tb-approach { border-top: 1px solid #3A413B; }
.tb-approach__inner {
  padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(64px, 8vw, 112px);
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.tb-approach__lede {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--stone);
  margin: 0;
  max-width: 400px;
}
.tb-approach__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 40px 0;
}
.tb-phase {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  border-top: 1.5px solid var(--sage);
  padding: 28px 48px 0 0;
}
.tb-phase__node {
  position: absolute;
  left: 0;
  top: -6px;
  width: 11px;
  height: 11px;
  background: var(--forest);
  border: 1.5px solid var(--sage);
}
.tb-phase__n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.tb-phase h3 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--cream);
}
.tb-phase p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--stone);
  margin: 0;
}
.tb-phase__deliverables { display: flex; flex-direction: column; margin-top: 8px; }
.tb-phase__deliverables dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral-400);
  padding-bottom: 8px;
  border-bottom: 1px solid #3A413B;
}
.tb-phase__deliverables dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-nav);
  color: var(--cream);
  padding: 9px 0;
  border-bottom: 1px solid #3A413B;
}

/* --------------------------------------------------------------------------
   13. Client fit
   -------------------------------------------------------------------------- */

.tb-fit { background: var(--cream); border-bottom: 1px solid var(--stone); }
.tb-fit__inner {
  padding: clamp(48px, 6vw, 80px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 32px 64px;
  align-items: center;
}
.tb-fit__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  margin: 0;
  max-width: 560px;
}
.tb-fit__list {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  border-top: 1px solid var(--stone);
}
.tb-fit__list li {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--neutral-700);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 18px 6px 0;
}
.tb-fit__list i { display: block; width: 12px; height: 1.5px; background: var(--olive); }

/* --------------------------------------------------------------------------
   15. FAQ / accordion
   -------------------------------------------------------------------------- */

.tb-faq { background: var(--cream); border-top: 1px solid var(--stone); }
.tb-faq__inner {
  padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px 64px;
  align-items: start;
}
.tb-faq__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  margin: 0;
  max-width: 340px;
}

.tb-accordion { border-top: 1px solid var(--color-border); }
.tb-accordion__item { border-bottom: 1px solid var(--color-border); }
.tb-accordion__trigger {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  width: 100%;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.tb-accordion__trigger:focus-visible { box-shadow: var(--focus-ring); }
.tb-accordion__index {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  width: 24px;
}
.tb-accordion__icon {
  color: var(--color-accent-hover);
  transition: transform var(--duration-slow) var(--ease-standard);
}
.tb-accordion__trigger[aria-expanded="true"] .tb-accordion__icon { transform: rotate(45deg); }
.tb-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-standard);
}
.tb-accordion__trigger[aria-expanded="true"] + .tb-accordion__panel { grid-template-rows: 1fr; }
.tb-accordion__panel > div { overflow: hidden; }
.tb-accordion__content {
  padding: 0 0 24px 48px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 640px;
}

/* --------------------------------------------------------------------------
   16. Contact
   -------------------------------------------------------------------------- */

.tb-contact {
  background: var(--forest);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.tb-contact__frame {
  position: absolute;
  width: 460px;
  height: 460px;
  pointer-events: none;
}
.tb-contact__frame--a { right: -120px; top: -120px; border: 1px solid rgba(167, 173, 140, 0.22); }
.tb-contact__frame--b { right: 40px; top: 20px; border: 1px solid rgba(167, 173, 140, 0.12); }
.tb-contact__inner {
  padding: clamp(64px, 8vw, 120px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 48px 96px;
  align-items: start;
  position: relative;
}
.tb-contact__copy { display: flex; flex-direction: column; gap: 28px; max-width: 520px; }
.tb-contact__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.04;
  margin: 0;
  color: var(--cream);
}
.tb-contact__lede {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--stone);
  margin: 0;
}

.tb-contact__email { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tb-contact__email-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.tb-contact__email a {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 233, 0.3);
  align-self: flex-start;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.tb-contact__email a:hover { border-bottom-color: var(--cream); }
.tb-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 18px 20px;
  background: var(--black);
  border: 1px solid #3A413B;
  border-radius: 8px;
  padding: clamp(24px, 3vw, 36px);
}
.tb-form__wide { grid-column: 1 / -1; }
.tb-form__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.tb-form__privacy { font-family: var(--font-body); font-size: 13px; color: var(--neutral-400); }

/* Honeypot. Moved off-screen rather than display:none — bots that skip
   hidden inputs would otherwise walk straight past it. */
.tb-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --color-error is redefined under .tb-dark, so this reads #C9806F on the
   forest card and #9A4B3B anywhere on cream. */
.tb-field__error {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-error);
}
.tb-field__control[aria-invalid="true"] { border-color: var(--color-error); }

.tb-form__error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-error-bg);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-error);
}

.tb-btn[disabled] { opacity: 0.6; cursor: progress; }
.tb-thanks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--black);
  border: 1px solid #3A413B;
  border-radius: 8px;
  padding: 48px 36px;
  min-height: 320px;
  justify-content: center;
}
.tb-thanks h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--cream);
}
.tb-thanks p { font-family: var(--font-body); font-size: var(--text-body); color: var(--stone); margin: 0; }
.tb-thanks i { display: block; width: 32px; height: 2px; background: var(--sage); }

/* Form fields */
.tb-field { display: flex; flex-direction: column; gap: 8px; }
.tb-field__label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
}
.tb-field__req { color: var(--color-accent-hover); margin-left: 4px; }
.tb-field__wrap { position: relative; }
.tb-field__control {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: var(--transition-color), box-shadow var(--duration-fast);
  appearance: none;
  -webkit-appearance: none;
}
.tb-field__control::placeholder { color: var(--color-text-muted); }
.tb-field__control:focus { border-color: var(--color-text-primary); box-shadow: var(--focus-ring); }
select.tb-field__control { padding-right: 40px; cursor: pointer; }
select.tb-field__control:invalid { color: var(--color-text-muted); }
textarea.tb-field__control {
  height: auto;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 96px;
}
.tb-field__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.tb-footer { background: var(--forest); color: var(--cream); font-family: var(--font-body); }
.tb-footer__inner { padding: 80px var(--gutter) 40px; }
.tb-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr));
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid #3A413B;
}
.tb-footer__brand { display: flex; flex-direction: column; gap: 28px; }
.tb-footer__tagline {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--stone);
  max-width: 320px;
}
.tb-footer__col { display: flex; flex-direction: column; gap: 16px; }
.tb-footer__col h2 {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--sage);
  margin: 0;
}
.tb-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tb-footer__col a {
  font-size: var(--text-nav);
  color: var(--stone);
  text-decoration: none;
  transition: var(--transition-color);
}
.tb-footer__col a:hover { color: var(--cream); }
.tb-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: var(--text-caption);
  color: var(--neutral-400);
  flex-wrap: wrap;
  gap: 12px;
}
.tb-footer__legal-links { display: flex; gap: 24px; }
.tb-footer__legal a { color: inherit; text-decoration: none; }
.tb-footer__legal a:hover { color: var(--stone); }

@media (max-width: 819px) {
  .tb-footer__inner { padding: 56px var(--gutter) 32px; }
  .tb-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   18. Narrow-viewport adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .tb-proof__item { margin-right: 0; padding-right: 0; }
}

/* --------------------------------------------------------------------------
   19. Utilities
   -------------------------------------------------------------------------- */

/* Where two dark blocks meet, a section height that lands on a fraction of a
   pixel leaves a hairline of the cream page showing between them. Painting one
   extra pixel of forest below the upper block closes the gap. */
.tb-contact { box-shadow: 0 1px 0 var(--forest); }

/* Several components below are flex/grid containers, so [hidden] needs to win. */
[hidden] { display: none !important; }

/* Clear the 72px sticky nav when jumping to an anchor. */
[id] { scroll-margin-top: 72px; }