/*
Theme Name: Trinity Business Group
Theme URI: https://trinitybusiness.co.uk
Author: Akbar
Description: Block theme for Trinity Business Group — business energy and telecoms. Colour-coded tritone design system derived from the Trinity trefoil: green for energy, blue for connectivity, orange for action.
Version: 1.7.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trinity-business
Tags: full-site-editing, block-patterns, business, one-column, custom-colors, custom-logo, custom-menu, accessibility-ready
*/

/* ============================================================
   1. FONTS  — self-hosted variable faces
   ============================================================ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallbacks so the swap does not shift layout. */
@font-face {
  font-family: "Trinity Display Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 102%;
  ascent-override: 93%;
  descent-override: 27%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Trinity Text Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 102%;
  ascent-override: 100%;
  descent-override: 30%;
  line-gap-override: 0%;
}

/* ============================================================
   2. TOKENS
   Ramps generated in OKLCH from the logo's own hues:
   green H=137.4  blue H=246.4  orange H=61.0  navy H=269.1
   Neutrals carry a trace of the navy hue so nothing reads as dead grey.
   Every pair shipped below is verified WCAG AA.
   ============================================================ */

:root {
  /* --- surfaces & ink --- */
  --tb-page:        #FCFDFF;
  --tb-surface:     #F7F9FD;
  --tb-sunk:        #EFF1F7;
  --tb-line:        #E1E4EB;
  --tb-line-strong: var(--tb-ink-on-navy);
  --tb-ink:         #242A39; /* 14.08:1 on page */
  --tb-ink-muted:   #6D717C; /*  4.79:1 on page */
  --tb-ink-faint:   #8A8E99; /* decorative only — never body copy */

  --tb-navy:        #151D33;
  --tb-navy-soft:   #1E2942;
  --tb-navy-line:   #33405C;
  /* Body copy on navy. Not grey — tinted toward the navy hue, so it reads as a
     shade of the surface rather than dead ink sitting on top of it. */
  --tb-ink-on-navy:      #CCCFD7; /* 10.73:1 on navy */
  --tb-ink-on-navy-weak: var(--tb-ink-on-navy-weak); /*  4.686:1 on navy — captions only */

  /* --- energy: the leaf --- */
  --tb-energy-50:  #EBFDE9;
  --tb-energy-100: #D8F7D5;
  --tb-energy-200: #B6ECB2;
  --tb-energy-300: #8DDB89;
  --tb-energy-500: #2BAD2D;
  --tb-energy-600: #009309;
  --tb-energy-700: #007800; /* 5.91:1 on page */
  --tb-energy-900: #004400;

  /* --- connectivity: the wifi glyph --- */
  --tb-connect-50:  #E9F9FF;
  --tb-connect-100: #D4F0FF;
  --tb-connect-200: #AFE0FF;
  --tb-connect-300: #84CAFF;
  --tb-connect-500: #0C95F6;
  --tb-connect-600: #007CD9;
  --tb-connect-700: #0064B4; /* 6.26:1 on page */
  --tb-connect-900: #003868;

  /* --- action: the bolt. renewals, buttons, anything clickable --- */
  --tb-action-50:  #FFF3E5;
  --tb-action-100: #FFE6CD;
  --tb-action-200: #FFCEA4;
  --tb-action-300: #FEB074;
  --tb-action-400: #F08D36; /* the logo orange itself */
  --tb-action-500: #DC6E00;
  --tb-action-600: #C05600;
  --tb-action-700: #9F4300; /* 6.53:1 on page */
  --tb-action-900: #5B2500;

  /* --- per-section accent, reassigned by modifier classes --- */
  --tb-accent:      var(--tb-connect-600);
  --tb-accent-ink:  var(--tb-connect-700);
  --tb-accent-bright: var(--tb-connect-500);
  --tb-accent-deep:   var(--tb-connect-900);
  --tb-accent-wash: var(--tb-connect-50);
  --tb-accent-lift: var(--tb-connect-300);

  /* --- type --- */
  /* Three roles. Bricolage Grotesque carries the headlines and the small UI
     labels — a grotesque with enough irregularity to stop the page reading as
     a template, and a width axis the display sizes lean on. Geist carries
     everything meant to be read: neutral, high x-height, modern. */
  --tb-display: "Bricolage Grotesque", "Trinity Display Fallback", system-ui, sans-serif;
  --tb-ui:      "Bricolage Grotesque", "Trinity Display Fallback", system-ui, sans-serif;
  --tb-body:    "Geist", "Trinity Text Fallback", system-ui, sans-serif;

  --tb-text-xs:   0.75rem;
  --tb-text-sm:   0.8125rem;
  --tb-text-base: 1.0625rem;
  --tb-text-lg:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --tb-text-xl:   clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --tb-text-2xl:  clamp(1.9rem, 1.55rem + 1.6vw, 2.9rem);
  --tb-text-3xl:  clamp(2.2rem, 1.7rem + 2.2vw, 3.4rem);
  --tb-text-4xl:  clamp(2.6rem, 1.9rem + 3.1vw, 4.3rem);

  /* --- 4pt spacing scale --- */
  --tb-space-2xs: 0.25rem;
  --tb-space-xs:  0.5rem;
  --tb-space-sm:  0.75rem;
  --tb-space-md:  1rem;
  --tb-space-lg:  1.5rem;
  --tb-space-xl:  2rem;
  --tb-space-2xl: 3rem;
  --tb-space-3xl: 4rem;
  --tb-space-4xl: 6rem;
  --tb-section:   clamp(3.5rem, 2rem + 7vw, 7.5rem);

  /* --- layout --- */
  --tb-measure: 52ch;   /* ~72 characters in Geist; ch runs ~1.4x its average glyph */
  --tb-wide: 78rem;
  --tb-gutter: clamp(1.25rem, 5vw, 3.5rem);

  /* --- motion --- */
  --tb-ease: cubic-bezier(0.22, 1, 0.36, 1);       /* out-quint  — default */
  --tb-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);   /* out-cubic  — hovers */
  --tb-ease-quart: cubic-bezier(0.25, 1, 0.5, 1);   /* out-quart  — opacity */
  --tb-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);    /* out-expo   — entrances */
  --tb-dur-fast: 140ms;   /* instant feedback  */
  --tb-dur: 280ms;        /* state changes     */
  --tb-dur-layout: 380ms; /* accordions        */
  --tb-dur-enter: 620ms;  /* entrances         */
  --tb-stagger: 70ms;
}

/* Accent reassignment. One class swaps a whole section's colour identity. */
.tb-energy  { --tb-accent: var(--tb-energy-600);  --tb-accent-ink: var(--tb-energy-700);  --tb-accent-wash: var(--tb-energy-50);  --tb-accent-lift: var(--tb-energy-300);  --tb-icon: var(--tb-icon-energy);  --tb-icon-line: var(--tb-icon-energy-line); --tb-accent-bright: var(--tb-energy-500); --tb-accent-deep: var(--tb-energy-900); }
.tb-connect { --tb-accent: var(--tb-connect-600); --tb-accent-ink: var(--tb-connect-700); --tb-accent-wash: var(--tb-connect-50); --tb-accent-lift: var(--tb-connect-300); --tb-icon: var(--tb-icon-connect); --tb-icon-line: var(--tb-icon-connect-line); --tb-accent-bright: var(--tb-connect-500); --tb-accent-deep: var(--tb-connect-900); }
.tb-action  { --tb-accent: var(--tb-action-500);  --tb-accent-ink: var(--tb-action-700);  --tb-accent-wash: var(--tb-action-50);  --tb-accent-lift: var(--tb-action-300);  --tb-icon: var(--tb-icon-action);  --tb-icon-line: var(--tb-icon-action-line); --tb-accent-bright: var(--tb-action-400); --tb-accent-deep: var(--tb-action-900); }

/* ============================================================
   3. BASE
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tb-page);
  color: var(--tb-ink);
  font-family: var(--tb-body);
  font-size: var(--tb-text-base);
  line-height: 1.58;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--tb-display);
  font-weight: 700;
  font-stretch: 91%;
  line-height: 1.04;
  letter-spacing: -0.021em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--tb-accent-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--tb-action-500);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--tb-action-200); color: var(--tb-ink); }

/* ============================================================
   4. LAYOUT PRIMITIVES
   ============================================================ */

.tb-wrap {
  width: min(100% - (var(--tb-gutter) * 2), var(--tb-wide));
  margin-inline: auto;
}

.tb-section { padding-block: var(--tb-section); }

/* the header is sticky, so anchored jumps need clearance */
:target, [id] { scroll-margin-top: 6rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.tb-lede {
  font-size: var(--tb-text-lg);
  line-height: 1.55;
  color: var(--tb-ink-muted);
  max-width: 54ch;
}

/* Small tracked label. Carries the section's accent colour. */
.tb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--tb-space-sm);
  font-family: var(--tb-ui);
  font-size: var(--tb-text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tb-accent-ink);
  margin-bottom: var(--tb-space-md);
}

.tb-eyebrow::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 2px;
  background: var(--tb-accent);
  flex: none;
}

.tb-section-head { margin-bottom: var(--tb-space-2xl); }
.tb-section-head h2 { font-size: var(--tb-text-2xl); max-width: 20ch; }
.tb-section-head .tb-lede { margin-top: var(--tb-space-md); }

/* ============================================================
   5. BUTTONS
   ============================================================ */

.tb-btn {
  --btn-bg: var(--tb-action-400);
  --btn-ink: var(--tb-navy);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.5em;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--tb-ui);
  font-size: var(--tb-text-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--tb-dur-fast) var(--tb-ease-soft),
              transform var(--tb-dur-fast) var(--tb-ease-soft);
}

.tb-btn:hover { background: var(--tb-action-300); transform: translateY(-1px); }
.tb-btn:active { transform: translateY(0); }

.tb-btn svg { inline-size: 1em; block-size: 1em; flex: none; }

/* Outlined, for use on the navy fields. */
.tb-btn--ghost {
  --btn-bg: transparent;
  --btn-ink: var(--tb-page);
  border-color: var(--tb-navy-line);
}
.tb-btn--ghost:hover { background: var(--tb-navy-soft); border-color: var(--tb-connect-500); }

/* Outlined, for use on light surfaces. */
.tb-btn--line {
  --btn-bg: transparent;
  --btn-ink: var(--tb-ink);
  border-color: var(--tb-line-strong);
}
.tb-btn--line:hover { background: var(--tb-sunk); border-color: var(--tb-ink-muted); }

/* ============================================================
   6. HEADER
   Always navy — it reads as one band with the hero and needs no
   scroll-state JavaScript, so there is no flash on inner pages.
   ============================================================ */

.tb-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--tb-navy);
  color: var(--tb-page);
  border-bottom: 1px solid var(--tb-navy-line);
}

.tb-header__inner {
  display: flex;
  align-items: center;
  gap: var(--tb-space-xl);
  min-block-size: 4.75rem;
}

.tb-header__logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; margin-inline-end: auto; }
/* scoped to the mark: this used to catch the wordmark too, and being
   (0,1,1) it silently beat every .tb-header__wordmark rule including
   the mobile step-down */
/* The trefoil artwork is 192x176, not square. Pin the height and let the width
   follow, or it renders squashed by 13%. Works whether .tb-header__mark lands
   on the <img> itself (static build) or on the site-logo wrapper (WordPress). */
.tb-header__mark { block-size: 2.25rem; inline-size: auto; flex: none; }
.tb-header__mark img { block-size: 100%; inline-size: auto; }

/* The wordmark is the logo's own lettering, lifted from the artwork — no
   available face matches it, and the near misses read as a substitution.
   White knockout so TRINITY holds against the navy bar. */
.tb-header__wordmark {
  display: block;
  block-size: 2.25rem;
  inline-size: auto;
  flex: none;
}

.tb-footer__brand .tb-header__wordmark { block-size: 2.5rem; }

/* At phone width the full wordmark crowds the menu toggle, so it steps down.
   The mark stays full size — it is the part that has to be recognisable. */
@media (max-width: 48rem) { .tb-header__wordmark { block-size: 1.5rem; } }
@media (max-width: 22rem) { .tb-header__wordmark { display: none; } }

.tb-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }

.tb-nav a {
  font-family: var(--tb-ui);
  position: relative;
  color: var(--tb-page);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  padding-block: 0.5rem;
}

/* Underline grows from the left on hover — not a bar that fades in. */
.tb-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  block-size: 2px;
  background: var(--tb-action-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tb-dur-fast) var(--tb-ease);
}
.tb-nav a:hover::after,
.tb-nav a[aria-current="page"]::after { transform: scaleX(1); }
.tb-nav a[aria-current="page"] { color: var(--tb-action-300); }

.tb-header__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tb-page);
  font-family: var(--tb-display);
  font-weight: 700;
  font-stretch: 96%;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.tb-header__tel svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--tb-connect-300); }
.tb-header__tel:hover { color: var(--tb-action-300); }

.tb-header__burger { display: none; }

/* ============================================================
   7. HERO
   ============================================================ */

.tb-hero {
  position: relative;
  background: var(--tb-navy);
  color: var(--tb-page);
  overflow: hidden;
  isolation: isolate;
}

.tb-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(3.25rem, 1.75rem + 6vw, 6.5rem);
}

.tb-hero__content { max-width: 40rem; }

.tb-hero__eyebrow { color: var(--tb-connect-300); }
.tb-hero__eyebrow::before { background: var(--tb-action-400); }

.tb-hero h1 {
  font-size: var(--tb-text-4xl);
  font-stretch: 85%;
  max-width: 18ch;
}

/* The one word that carries the promise, in the action colour. */
.tb-hero h1 em { font-style: normal; color: var(--tb-action-400); }

.tb-hero__lede {
  margin-top: var(--tb-space-lg);
  font-size: var(--tb-text-lg);
  line-height: 1.65; /* light-on-dark needs more air */
  color: var(--tb-ink-on-navy);    /* 10.73:1 on navy */
  max-width: 48ch;
}

.tb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-space-md);
  margin-top: var(--tb-space-xl);
}

/* Three facts, not a stat-block template: plain rows on a rule. */
.tb-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-space-md) var(--tb-space-xl);
  margin-top: var(--tb-space-2xl);
  padding-top: var(--tb-space-lg);
  border-top: 1px solid var(--tb-navy-line);
}

.tb-hero__fact { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.9375rem; color: var(--tb-ink-on-navy); }
.tb-hero__fact b {
  font-family: var(--tb-display);
  font-stretch: 91%;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tb-page);
  font-variant-numeric: tabular-nums;
}

/* --- the mark, blown up as architecture ---
   Was three synthetic blades approximating the logo. Now the supplied
   artwork itself: the icon cut-outs are transparent, so the navy shows
   through the wifi, leaf and bolt. --- */
.tb-hero__mark {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-end: -6rem;
  translate: 0 -50%;
  inline-size: min(52vw, 38rem);
  pointer-events: none;
}

.tb-hero__mark img { inline-size: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: no-preference) {
  .tb-hero__mark img {
    animation: tb-mark-in 1100ms var(--tb-ease-expo) both 120ms,
               tb-float 16s var(--tb-ease-soft) 1200ms infinite alternate;
  }
}

@keyframes tb-mark-in { from { opacity: 0; transform: scale(0.82) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes tb-float   { from { transform: translateY(-1.2%) rotate(-1.2deg); } to { transform: translateY(1.2%) rotate(1.2deg); } }

/* Halo so the mark sits in a field rather than on a flat panel. */
.tb-hero__mark::before {
  content: "";
  position: absolute;
  inset: -22%;
  background: radial-gradient(circle at 50% 50%, #2A4A7A55 0%, transparent 65%);
  z-index: -1;
}

/* ============================================================
   8. PILLARS — three value props, divided by rules not boxed in cards
   ============================================================ */

.tb-pillars { background: var(--tb-page); }

.tb-pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--tb-line);
}

.tb-pillar {
  padding: var(--tb-space-2xl) var(--tb-space-xl) var(--tb-space-2xl) 0;
  border-top: 3px solid var(--tb-accent);
  margin-top: -1px;
}

.tb-pillar + .tb-pillar { padding-inline-start: var(--tb-space-xl); }

.tb-pillar__no {
  font-family: var(--tb-display);
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: 0.14em;
  color: var(--tb-accent-ink);
  font-variant-numeric: tabular-nums;
}

.tb-pillar h3 { font-size: var(--tb-text-xl); margin-block: var(--tb-space-sm) var(--tb-space-sm); }
.tb-pillar__desc { color: var(--tb-ink-muted); max-width: 34ch; }

/* ============================================================
   9. SERVICE INDEX
   The centrepiece, and the deliberate replacement for a card grid:
   full-width rows that behave like a contents page.
   ============================================================ */

.tb-services { background: var(--tb-surface); }

.tb-svc {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.25fr) 3rem;
  align-items: center;
  gap: var(--tb-space-xl);
  padding-block: clamp(1.75rem, 1rem + 2.2vw, 2.75rem);
  border-top: 1px solid var(--tb-line-strong);
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: background var(--tb-dur) var(--tb-ease);
}

.tb-svc:last-child { border-bottom: 1px solid var(--tb-line-strong); }

/* The accent rule rides the top border and draws in on hover. */
.tb-svc::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background: var(--tb-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tb-dur) var(--tb-ease);
}

.tb-svc:hover { background: var(--tb-accent-wash); }
.tb-svc:hover::before,
.tb-svc:has(a:focus-visible)::before { transform: scaleX(1); }

/* One focusable link per row, stretched to make the whole row a target. */
.tb-svc__name a { color: inherit; text-decoration: none; }
.tb-svc__name a::after { content: ""; position: absolute; inset: 0; }
.tb-svc:has(a:focus-visible) { background: var(--tb-accent-wash); outline: 2px solid var(--tb-action-500); outline-offset: -2px; }
.tb-svc:has(a:hover) .tb-svc__go,
.tb-svc:hover .tb-svc__go {
  /* --tb-accent is tuned for large numerals; white on it fails AA on green and
     orange, so the filled state steps down to the text-safe shade */
  background: var(--tb-accent-ink);
  border-color: var(--tb-accent-ink);
  color: var(--tb-page);
  transform: translateX(4px);
}

.tb-svc__no {
  font-family: var(--tb-display);
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  font-weight: 700;
  font-stretch: 85%;
  line-height: 0.85;
  color: var(--tb-accent);
  font-variant-numeric: tabular-nums;
  transition: color var(--tb-dur-fast) var(--tb-ease-soft);
}

.tb-svc__name { font-size: var(--tb-text-xl); font-stretch: 89%; }

/* The two services Trinity leads with carry more weight in the row. */
.tb-svc--lead .tb-svc__name { font-size: var(--tb-text-2xl); }
.tb-svc--lead .tb-svc__no { font-size: clamp(2.75rem, 1.6rem + 3.2vw, 4.25rem); }

.tb-svc__tag {
  font-family: var(--tb-ui);
  display: block;
  inline-size: fit-content;
  margin-top: 0.5rem;
  padding: 0.28em 0.7em;
  background: var(--tb-accent-wash);
  color: var(--tb-accent-ink);
  font-family: var(--tb-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
}
.tb-svc__desc { color: var(--tb-ink-muted); max-width: 46ch; }

.tb-svc__go {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--tb-line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--tb-accent-ink);
  transition: background var(--tb-dur-fast) var(--tb-ease-soft),
              border-color var(--tb-dur-fast) var(--tb-ease-soft),
              transform var(--tb-dur) var(--tb-ease);
}
.tb-svc__go svg { inline-size: 1rem; block-size: 1rem; }
.tb-svc:hover .tb-svc__go {
  background: var(--tb-accent);
  border-color: var(--tb-accent);
  color: var(--tb-page);
  transform: translateX(4px);
}

/* ============================================================
   10. ACCREDITATIONS — stated as facts, not badges
   ============================================================ */

.tb-accred { background: var(--tb-page); }

.tb-accred__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--tb-space-3xl);
}

.tb-accred__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--tb-space-md);
  padding-block: var(--tb-space-lg);
  border-top: 1px solid var(--tb-line);
}
.tb-accred__item:last-child { border-bottom: 1px solid var(--tb-line); }

.tb-accred__dot { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--tb-accent); margin-top: 0.55rem; }
.tb-accred__item h3 { font-size: 1.0625rem; font-stretch: 96%; letter-spacing: -0.008em; }
.tb-accred__item p { color: var(--tb-ink-muted); font-size: 0.9375rem; margin-top: 0.25rem; max-width: 62ch; }

/* ============================================================
   10b. DISPUTE RESOLUTION OMBUDSMAN
   The statement is reproduced verbatim as supplied by DRO. Treat the
   wording as fixed copy — it is a compliance notice, not marketing text.
   ============================================================ */

.tb-dro { background: var(--tb-page); padding-block: 0 var(--tb-section); }

.tb-dro__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1.6fr);
  gap: var(--tb-space-2xl);
  align-items: start;
  padding: var(--tb-space-2xl);
  background: var(--tb-surface);
  border: 1px solid var(--tb-line);
  border-top: 3px solid var(--tb-action-500);
}

.tb-dro__aside img { inline-size: 11rem; }

.tb-dro__aside p {
  margin-top: var(--tb-space-md);
  font-family: var(--tb-display);
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 87%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tb-action-700);
}

.tb-dro__statement {
  overflow-wrap: anywhere;
  font-size: var(--tb-text-lg);
  line-height: 1.6;
  max-width: 62ch;
  text-wrap: pretty;
}

.tb-dro__statement a { color: var(--tb-action-700); font-weight: 600; }

/* ============================================================
   11. PROCESS — the connector runs green → blue → orange
   ============================================================ */

.tb-process { background: var(--tb-navy); color: var(--tb-page); }
.tb-process .tb-section-head h2 { color: var(--tb-page); }
.tb-process .tb-lede { color: var(--tb-ink-on-navy); }
.tb-process .tb-eyebrow { color: var(--tb-connect-300); }
.tb-process .tb-eyebrow::before { background: var(--tb-action-400); }

.tb-process__track { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--tb-space-xl); }

.tb-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 1.3rem;
  inset-inline-start: 3.5rem;
  inline-size: calc(100% - 3.5rem + var(--tb-space-xl));
  block-size: 2px;
  opacity: 0.5;
}
.tb-process__track .tb-step:nth-child(1)::after { background: linear-gradient(90deg, var(--tb-energy-500), var(--tb-connect-500)); }
.tb-process__track .tb-step:nth-child(2)::after { background: linear-gradient(90deg, var(--tb-connect-500), var(--tb-action-400)); }

.tb-step { position: relative; }

.tb-step__no {
  position: relative;
  z-index: 1;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tb-navy);
  border: 2px solid var(--tb-accent);
  color: var(--tb-page);
  font-family: var(--tb-display);
  font-weight: 700;
  font-stretch: 88%;
  font-variant-numeric: tabular-nums;
}

.tb-step h3 { font-size: var(--tb-text-lg); margin-block: var(--tb-space-lg) var(--tb-space-xs); color: var(--tb-page); }
.tb-step__desc { color: var(--tb-ink-on-navy); max-width: 32ch; font-size: 0.9375rem; }

/* ============================================================
   12. PRICING — price-forward rows, minimal chrome
   ============================================================ */

.tb-pricing { background: var(--tb-page); }

.tb-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0; border-block: 1px solid var(--tb-line-strong); }

.tb-tier { padding: var(--tb-space-2xl) var(--tb-space-xl) var(--tb-space-2xl) 0; display: flex; flex-direction: column; }
.tb-tier + .tb-tier { padding-inline-start: var(--tb-space-xl); border-inline-start: 1px solid var(--tb-line); }

.tb-tier__name {
  font-family: var(--tb-display);
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tb-accent-ink);
}

.tb-tier__price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-block: var(--tb-space-md) var(--tb-space-md);
  font-family: var(--tb-display);
  font-weight: 700;
  font-stretch: 85%;
  font-size: clamp(2.75rem, 1.9rem + 2.8vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.tb-tier__price small { font-family: var(--tb-ui); font-size: 0.875rem; font-weight: 500; font-stretch: normal; letter-spacing: 0; color: var(--tb-ink-muted); }
.tb-tier__from {
  font-family: var(--tb-ui); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tb-ink-muted); }

.tb-tier__desc { color: var(--tb-ink-muted); font-size: 0.9375rem; max-width: 32ch; }
.tb-tier .tb-btn { margin-top: auto; align-self: flex-start; }
.tb-tier__cta-space { margin-top: var(--tb-space-xl); }

/* ============================================================
   13. TESTIMONIAL — one quote, given room
   ============================================================ */

.tb-quote { background: var(--tb-surface); }
.tb-quote__inner { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: var(--tb-space-3xl); align-items: end; }

.tb-quote blockquote { margin: 0; }
.tb-quote blockquote p {
  font-family: var(--tb-display);
  font-size: var(--tb-text-2xl);
  font-weight: 500;
  font-stretch: 98%;
  line-height: 1.22;
  letter-spacing: -0.018em;
  text-wrap: pretty;
}

/* A real quote mark, sized as a graphic element. */
.tb-quote__mark {
  font-family: var(--tb-display);
  font-size: 5rem;
  font-weight: 700;
  line-height: 0.6;
  color: var(--tb-action-300);
  display: block;
  margin-bottom: var(--tb-space-sm);
}

.tb-quote figcaption { margin-top: var(--tb-space-lg); padding-bottom: 0.5rem; }
.tb-quote cite { font-style: normal; display: block; font-weight: 600; font-size: 0.9375rem; }
.tb-quote cite span { display: block; font-weight: 400; color: var(--tb-ink-muted); margin-top: 0.25rem; }

/* ============================================================
   14. CTA BAND
   ============================================================ */

.tb-cta { background: var(--tb-navy); color: var(--tb-page); position: relative; overflow: hidden; }
.tb-cta__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--tb-space-2xl); align-items: center; position: relative; z-index: 1; }
.tb-cta h2 { font-size: var(--tb-text-2xl); color: var(--tb-page); max-width: 18ch; }
.tb-cta p { color: var(--tb-ink-on-navy); margin-top: var(--tb-space-md); max-width: 44ch; }
.tb-cta__actions { display: flex; flex-wrap: wrap; gap: var(--tb-space-md); justify-content: flex-end; }

/* ============================================================
   15. FOOTER
   ============================================================ */

.tb-footer { background: var(--tb-navy); color: var(--tb-ink-on-navy); border-top: 1px solid var(--tb-navy-line); font-size: 0.9375rem; }
.tb-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--tb-space-2xl); padding-block: var(--tb-space-3xl); }
.tb-footer h3 {
  font-family: var(--tb-ui); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tb-connect-300); font-stretch: 91%; margin-bottom: var(--tb-space-md); }
.tb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.tb-footer a { color: var(--tb-ink-on-navy); text-decoration: none; }
.tb-footer a:hover { color: var(--tb-page); text-decoration: underline; }
.tb-footer address { font-style: normal; overflow-wrap: anywhere; }
.tb-footer__brand p { margin-top: var(--tb-space-md); max-width: 34ch; }
.tb-footer__legal { display: flex; flex-wrap: wrap; gap: var(--tb-space-md) var(--tb-space-xl); justify-content: space-between; padding-block: var(--tb-space-lg); border-top: 1px solid var(--tb-navy-line); font-size: 0.8125rem; color: var(--tb-ink-on-navy-weak); }

/* --- footer legal row: policies and the consent re-opener ------------- */

.tb-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--tb-space-lg);
  order: 1;
}

.tb-footer__links a,
.tb-footer__links .tb-linkbtn {
  color: var(--tb-ink-on-navy-weak);
  text-decoration: none;
  /* these sit in their own row rather than inside a sentence, so they do not
     get the inline exemption from the 24px target minimum */
  padding-block: 0.3125rem;
}
.tb-footer__links a:hover,
.tb-footer__links .tb-linkbtn:hover {
  color: var(--tb-page);
  text-decoration: underline;
}

/* A control, not a link: withdrawing consent has to be a button, but in the
   footer it has to sit in the same row as the policy links without shouting. */
.tb-linkbtn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.tb-legal__section .tb-linkbtn { color: var(--tb-accent-ink); }

/* ============================================================
   16. ENTRANCE — one orchestrated load, staggered
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .tb-rise { opacity: 0; transform: translateY(14px); animation: tb-rise var(--tb-dur) var(--tb-ease) forwards; }
  .tb-rise:nth-child(1) { animation-delay: 60ms; }
  .tb-rise:nth-child(2) { animation-delay: 140ms; }
  .tb-rise:nth-child(3) { animation-delay: 220ms; }
  .tb-rise:nth-child(4) { animation-delay: 300ms; }
  .tb-rise:nth-child(5) { animation-delay: 380ms; }
}

@keyframes tb-rise { to { opacity: 1; transform: none; } }

/* ============================================================
   17. RESPONSIVE — adapt the composition, don't just shrink it
   ============================================================ */

@media (max-width: 64rem) {
  .tb-hero__mark {
    inline-size: min(70vw, 26rem);
    inset-inline-end: -8rem;
    inset-block-start: auto;
    inset-block-end: -6rem;
    translate: none;
    opacity: 0.32;
  }
  .tb-hero__content { max-width: none; }
  .tb-dro__panel,
  .tb-quote__inner,
  .tb-cta__inner { grid-template-columns: minmax(0, 1fr); }
  .tb-dro__panel { padding: var(--tb-space-xl); gap: var(--tb-space-xl); }
  .tb-step:not(:last-child)::after { display: none; }
  .tb-cta__actions { justify-content: flex-start; }
  .tb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-accred__list { column-gap: var(--tb-space-2xl); }
  .tb-svc { grid-template-columns: 4rem minmax(0, 1fr) 2.75rem; gap: var(--tb-space-lg); }
  .tb-svc__desc { grid-column: 2 / -1; }
  .tb-svc__go { grid-row: 1; grid-column: 3; }
}

@media (max-width: 48rem) {
  .tb-header__tel { display: none; }
  .tb-header__burger { display: inline-flex; }

  /* WordPress's Navigation block renders its own hamburger and overlay at this
     width, so it must NOT be hidden. Only the plain <nav> used by the static
     reference build collapses behind the toggle below. */
  .tb-nav:not(.wp-block-navigation) { display: none; }

  body.nav-open .tb-nav:not(.wp-block-navigation) {
    display: flex;
    position: fixed;
    inset-block-start: 4.75rem;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--tb-space-md) var(--tb-gutter) var(--tb-space-xl);
    background: var(--tb-navy);
    border-bottom: 1px solid var(--tb-navy-line);
    z-index: 70;
  }
  body.nav-open .tb-nav:not(.wp-block-navigation) a {
    padding-block: var(--tb-space-md);
    border-top: 1px solid var(--tb-navy-line);
    font-size: var(--tb-text-lg);
  }
  body.nav-open .tb-nav:not(.wp-block-navigation) a::after { display: none; }
  body.nav-open { overflow: hidden; }

  /* Rules stack, so the vertical dividers become horizontal ones. */
  .tb-pillar,
  .tb-tier { padding-inline: 0 !important; border-inline-start: 0 !important; }
  .tb-tier + .tb-tier { border-top: 1px solid var(--tb-line); }
  .tb-tiers { grid-template-columns: 1fr; }

  .tb-svc { grid-template-columns: 3rem minmax(0, 1fr); }
  .tb-svc__go { display: none; }
  .tb-svc__desc { grid-column: 2; }

  .tb-footer__grid { grid-template-columns: 1fr; gap: var(--tb-space-xl); }
  .tb-accred__list { grid-template-columns: 1fr; }
  .tb-hero__facts { gap: var(--tb-space-md) var(--tb-space-lg); }
}

/* ============================================================
   18. WORDPRESS BLOCK BRIDGE
   Core blocks emit their own wrappers. This maps that markup onto the
   design system above so patterns render identically to the reference
   build in /preview. Nothing here introduces new design decisions.
   ============================================================ */

/* --- buttons: the class lands on the wrapper, the styling belongs on the link --- */
.wp-block-button.tb-btn { display: contents; }

.wp-block-button.tb-btn > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.5em;
  background: var(--tb-action-400);
  color: var(--tb-navy);
  font-family: var(--tb-ui);
  font-size: var(--tb-text-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background var(--tb-dur-fast) var(--tb-ease-soft),
              transform var(--tb-dur-fast) var(--tb-ease-soft);
}
.wp-block-button.tb-btn > .wp-block-button__link:hover {
  background: var(--tb-action-300);
  color: var(--tb-navy);
  transform: translateY(-1px);
}

.wp-block-button.tb-btn--ghost > .wp-block-button__link {
  background: transparent;
  color: var(--tb-page);
  border-color: var(--tb-navy-line);
}
.wp-block-button.tb-btn--ghost > .wp-block-button__link:hover {
  background: var(--tb-navy-soft);
  border-color: var(--tb-connect-500);
  color: var(--tb-page);
}

.wp-block-button.tb-btn--line > .wp-block-button__link {
  background: transparent;
  color: var(--tb-ink);
  border-color: var(--tb-line-strong);
}
.wp-block-button.tb-btn--line > .wp-block-button__link:hover {
  background: var(--tb-sunk);
  border-color: var(--tb-ink-muted);
  color: var(--tb-ink);
}

.wp-block-buttons.tb-hero__actions,
.wp-block-buttons.tb-cta__actions { gap: var(--tb-space-md); }

/* --- site identity --- */
.tb-header__mark.wp-block-site-logo { block-size: 2.25rem; inline-size: auto; }
.tb-header__mark.wp-block-site-logo img { block-size: 100%; inline-size: auto; }

/* --- navigation --- */
.wp-block-navigation.tb-nav { --wp--style--block-gap: 0; }
.tb-nav .wp-block-navigation__container { gap: clamp(1rem, 2vw, 2rem); }
.tb-nav .wp-block-navigation-item__content { color: var(--tb-page); text-decoration: none; }
.tb-nav .wp-block-navigation__responsive-container-open,
.tb-nav .wp-block-navigation__responsive-container-close { color: var(--tb-page); }
.tb-nav .wp-block-navigation__responsive-container.is-menu-open { padding-top: 5rem; }

/* --- core flow spacing must not fight the component grids --- */
.tb-header__inner > *,
.tb-section-head > *,
.tb-pillars__grid > *, .tb-pillar > *,
.tb-svc > *,
.tb-accred__list > *, .tb-accred__item > *, .tb-accred__item > div > *,
.tb-dro__panel > *, .tb-dro__aside > *, .tb-dro__body > *,
.tb-process__track > *, .tb-step > *,
.tb-tiers > *, .tb-tier > *,
.tb-quote__inner > *, .tb-cta__inner > *, .tb-cta__inner > div > *,
.tb-footer__grid > *, .tb-footer__legal > *,
.tb-hero__content > * { margin-block: 0; }

/* restore the deliberate rhythm the reset above flattens */
.tb-section-head .tb-eyebrow { margin-bottom: var(--tb-space-md); }
.tb-section-head .tb-lede { margin-top: var(--tb-space-md); }
.tb-hero__content .tb-hero__lede { margin-top: var(--tb-space-lg); }
.tb-hero__content .tb-hero__actions { margin-top: var(--tb-space-xl); }
.tb-hero__content .tb-hero__facts { margin-top: var(--tb-space-2xl); }
.tb-pillar h3 { margin-block: var(--tb-space-sm); }
.tb-step h3 { margin-block: var(--tb-space-lg) var(--tb-space-xs); }
.tb-tier .tb-tier__from {
  font-family: var(--tb-ui); margin-top: var(--tb-space-xs); }
.tb-tier .tb-tier__price { margin-block: var(--tb-space-sm) var(--tb-space-md); }
.tb-tier .wp-block-buttons { margin-top: auto; padding-top: 0; }
.tb-cta__inner p { margin-top: var(--tb-space-md); }
.tb-dro__body .tb-dro__statement { margin-top: 0; }
.tb-accred__item > div > p { margin-top: 0.25rem; }
.tb-footer__brand p { margin-top: var(--tb-space-md); }

/* the DRO logo arrives as a figure inside the pattern */
.tb-dro__aside figure { margin: 0; }
.tb-dro__aside .wp-block-image img { inline-size: 11rem; height: auto; }

/* --- inner page header band --- */
.tb-pagehead {
  background: var(--tb-navy);
  color: var(--tb-page);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.tb-pagehead h1 { color: var(--tb-page); font-size: var(--tb-text-3xl); font-stretch: 85%; max-width: 20ch; }
.tb-pagehead__meta { color: var(--tb-connect-300); font-size: 0.875rem; margin-bottom: var(--tb-space-sm); }

.tb-pagebody { background: var(--tb-page); }
.tb-pagebody .wp-block-post-content > * { max-width: var(--tb-measure); }
.tb-pagebody .wp-block-post-content > .alignwide,
.tb-pagebody .wp-block-post-content > .alignfull { max-width: none; }
.tb-pagebody h2 { margin-top: var(--tb-space-2xl); font-size: var(--tb-text-xl); }
.tb-pagebody h3 { margin-top: var(--tb-space-xl); font-size: var(--tb-text-lg); }
.tb-pagebody p + p { margin-top: var(--tb-space-md); }

/* --- archive list --- */
.tb-postlist { display: grid; gap: var(--tb-space-xl); list-style: none; margin: 0; padding: 0; }
.tb-postlist > li { padding-bottom: var(--tb-space-xl); border-bottom: 1px solid var(--tb-line); }
.tb-postlist h2 { font-size: var(--tb-text-xl); }
.tb-postlist h2 a { color: var(--tb-ink); text-decoration: none; }
.tb-postlist h2 a:hover { color: var(--tb-connect-700); }
.tb-postlist .wp-block-post-excerpt { margin-top: var(--tb-space-sm); color: var(--tb-ink-muted); }

/* --- 404 --- */
.tb-404 { background: var(--tb-page); text-align: left; }
.tb-404 h1 { font-size: var(--tb-text-3xl); margin-block: var(--tb-space-sm) var(--tb-space-md); }
.tb-404 .wp-block-buttons { margin-top: var(--tb-space-xl); }

/* --- forms (WPForms carries over from the current site) --- */
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field textarea,
.wpforms-field select {
  inline-size: 100%;
  padding: 0.8em 1em;
  background: var(--tb-page);
  border: 1px solid var(--tb-line-strong);
  border-radius: 2px;
  font-family: var(--tb-ui);
  font-size: var(--tb-text-base);
  color: var(--tb-ink);
}
.wpforms-field input:focus, .wpforms-field textarea:focus {
  outline: 2px solid var(--tb-action-500);
  outline-offset: 2px;
  border-color: transparent;
}
.wpforms-field { margin-bottom: var(--tb-space-md); }
.wpforms-field-label {
  font-family: var(--tb-ui); display: block; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9375rem; }
.wpforms-required-label { color: var(--tb-action-700); }
.wpforms-form button[type="submit"],
div.wpforms-container button[type="submit"] {
  padding: 0.85em 1.6em;
  background: var(--tb-action-400);
  color: var(--tb-navy);
  font-family: var(--tb-ui);
  font-weight: 600;
  font-size: var(--tb-text-base);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.wpforms-form button[type="submit"]:hover,
div.wpforms-container button[type="submit"]:hover { background: var(--tb-action-300); }

/* ============================================================
   19. INNER PAGE COMPONENTS
   ============================================================ */

/* --- 19a. Intro split (About) --- */
.tb-intro__copy p + p { margin-top: var(--tb-space-md); }
.tb-intro__copy .tb-lede { margin-top: var(--tb-space-lg); }

.tb-intro__figure { margin: 0; }
.tb-intro__figure img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tb-intro__figure figcaption {
  margin-top: var(--tb-space-sm);
  font-size: 0.8125rem;
  color: var(--tb-ink-muted);
}

/* --- 19b. Team — typographic, no stock photography --- */
.tb-team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--tb-line-strong);
}
.tb-person {
  padding: var(--tb-space-2xl) var(--tb-space-xl) var(--tb-space-2xl) 0;
  border-top: 3px solid var(--tb-accent);
  margin-top: -1px;
}
.tb-person + .tb-person { padding-inline-start: var(--tb-space-xl); }

.tb-person__mono {
  font-family: var(--tb-display);
  font-size: clamp(2.5rem, 1.8rem + 2vw, 3.5rem);
  font-weight: 700;
  font-stretch: 85%;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--tb-accent);
}
.tb-person h3 { font-size: var(--tb-text-lg); margin-block: var(--tb-space-md) 0.15rem; }
.tb-person__role {
  font-family: var(--tb-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tb-accent-ink);
}
.tb-person__bio { margin-top: var(--tb-space-sm); color: var(--tb-ink-muted); font-size: 0.9375rem; max-width: 32ch; }

/* --- 19c. Service detail rows (Services) --- */
.tb-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--tb-space-2xl);
  padding-block: var(--tb-space-2xl);
  border-top: 1px solid var(--tb-line-strong);
}
.tb-detail:last-of-type { border-bottom: 1px solid var(--tb-line-strong); }

.tb-detail__no {
  font-family: var(--tb-display);
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: 0.14em;
  color: var(--tb-accent-ink);
  font-variant-numeric: tabular-nums;
}
.tb-detail__head h2 { font-size: var(--tb-text-xl); margin-top: var(--tb-space-xs); }
.tb-detail__tag {
  font-family: var(--tb-ui);
  display: inline-block;
  margin-top: var(--tb-space-md);
  padding: 0.28em 0.7em;
  background: var(--tb-accent-wash);
  color: var(--tb-accent-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
}
.tb-detail__body > p { color: var(--tb-ink-muted); max-width: var(--tb-measure); }

.tb-detail__points {
  list-style: none;
  margin: var(--tb-space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--tb-space-sm);
}
.tb-detail__points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--tb-space-sm);
  font-size: 0.9375rem;
}
/* a dot rather than a tick — this is a spec list, not a feature comparison */
.tb-detail__points li::before {
  content: "";
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: var(--tb-accent);
  margin-top: 0.62em;
}

/* --- 19d. FAQ --- */
.tb-faq { border-top: 1px solid var(--tb-line-strong); }
.tb-faq details { border-bottom: 1px solid var(--tb-line); }

.tb-faq summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--tb-space-md);
  align-items: center;
  padding-block: var(--tb-space-lg);
  font-family: var(--tb-display);
  font-size: var(--tb-text-lg);
  font-weight: 700;
  font-stretch: 96%;
  letter-spacing: -0.012em;
  cursor: pointer;
  list-style: none;
}
.tb-faq summary::-webkit-details-marker { display: none; }
.tb-faq summary:hover { color: var(--tb-connect-700); }

.tb-faq summary::after {
  content: "";
  inline-size: 1.15rem;
  block-size: 1.15rem;
  background: var(--tb-action-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate var(--tb-dur) var(--tb-ease);
}
.tb-faq details[open] summary::after { rotate: 180deg; }

.tb-faq__answer {
  padding-bottom: var(--tb-space-lg);
  color: var(--tb-ink-muted);
  max-width: var(--tb-measure);
}
.tb-faq__answer a { color: var(--tb-action-700); }

/* --- 19e. Contact --- */
.tb-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--tb-space-3xl);
  align-items: start;
}
.tb-contact__form h2 { font-size: var(--tb-text-xl); }
.tb-contact__form > p { margin-block: var(--tb-space-sm) var(--tb-space-xl); color: var(--tb-ink-muted); }

.tb-contact__form {
  padding: var(--tb-space-xl);
  background: var(--tb-surface);
  border: 1px solid var(--tb-line);
  border-top: 3px solid var(--tb-action-500);
}
.tb-contact__aside { display: grid; gap: var(--tb-space-lg); }

.tb-contact__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--tb-space-md);
  padding-block: var(--tb-space-md);
  border-top: 1px solid var(--tb-line);
}
.tb-contact__row:first-child { border-top: 0; padding-top: 0; }
.tb-contact__row svg { inline-size: 1.15rem; block-size: 1.15rem; color: var(--tb-accent); margin-top: 0.25rem; }
.tb-contact__row h3 {
  font-family: var(--tb-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tb-ink-muted);
  margin-bottom: 0.25rem;
}
.tb-contact__row a { color: var(--tb-ink); text-decoration: none; font-weight: 600; }
.tb-contact__row a:hover { color: var(--tb-action-700); }
.tb-contact__row address { font-style: normal; overflow-wrap: anywhere; }

.tb-contact__figure { margin: 0; }
.tb-contact__figure img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tb-contact__figure figcaption { margin-top: var(--tb-space-sm); font-size: 0.8125rem; color: var(--tb-ink-muted); }

/* --- 19f. Guarantee band (Pricing) --- */
.tb-promise { padding-top: var(--tb-space-lg); border-top: 2px solid var(--tb-accent); }
.tb-promise h3 { font-size: var(--tb-text-lg); color: var(--tb-page); margin-bottom: var(--tb-space-xs); }
.tb-promise p { color: var(--tb-ink-on-navy); font-size: 0.9375rem; max-width: 34ch; }

/* --- 19g. Inner-page responsive --- */
@media (max-width: 64rem) {
  .tb-contact__grid { gap: var(--tb-space-2xl); }
}

@media (max-width: 48rem) {
  .tb-person { padding-inline: 0 !important; }
  .tb-contact__form { padding: var(--tb-space-lg); }
  .tb-faq summary { font-size: var(--tb-text-base); }
}

/* ============================================================
   20. TRINITY GUARANTEE + LONGER SERVICE COPY
   ============================================================ */

/* --- 20a. The guarantee. The strongest claim on the site, so it gets
       its own treatment rather than sharing the navy CTA styling. --- */
.tb-tg {
  position: relative;
  background: var(--tb-navy);
  color: var(--tb-page);
  overflow: hidden;
  isolation: isolate;
}

.tb-tg__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: var(--tb-space-3xl);
  align-items: center;
}

.tb-tg .tb-eyebrow { color: var(--tb-action-300); }
.tb-tg .tb-eyebrow::before { background: var(--tb-action-400); }

.tb-tg h2 {
  font-size: var(--tb-text-3xl);
  font-stretch: 87%;
  color: var(--tb-page);
  max-width: 17ch;
}
.tb-tg h2 em { font-style: normal; color: var(--tb-action-400); }

.tb-tg__body { margin-top: var(--tb-space-lg); color: var(--tb-ink-on-navy); max-width: 52ch; line-height: 1.65; }
.tb-tg__terms { margin-top: var(--tb-space-md); font-size: 0.8125rem; color: var(--tb-ink-on-navy-weak); max-width: 52ch; }
.tb-tg__actions { margin-top: var(--tb-space-xl); display: flex; flex-wrap: wrap; gap: var(--tb-space-md); }

/* What the guarantee covers, listed plainly. A single huge number with a
   label underneath would land straight on the stat-tile cliché. */
.tb-tg__scope {
  justify-self: end;
  inline-size: 100%;
  max-inline-size: 20rem;
  border-top: 3px solid var(--tb-action-400);
  padding-top: var(--tb-space-lg);
}
.tb-tg__scope h3 {
  font-family: var(--tb-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tb-action-300);
  margin-bottom: var(--tb-space-md);
}
.tb-tg__scope ul { list-style: none; margin: 0; padding: 0; display: grid; }
.tb-tg__scope li {
  padding-block: var(--tb-space-sm);
  border-top: 1px solid var(--tb-navy-line);
  font-family: var(--tb-display);
  font-size: var(--tb-text-lg);
  font-weight: 700;
  font-stretch: 96%;
  letter-spacing: -0.012em;
  color: var(--tb-page);
}
.tb-tg__scope li:first-child { border-top: 0; }

/* --- 20b. Two-column spec lists for the longer service copy --- */
.tb-detail__points--split { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); column-gap: var(--tb-space-xl); }

/* --- 20c. Sectors — a plain wrapped list, not a grid of cards --- */
.tb-sectors__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tb-sectors__list li {
  font-family: var(--tb-ui);
  padding: 0.5em 0.95em;
  background: var(--tb-surface);
  border: 1px solid var(--tb-line);
  border-radius: 2px;
  font-size: 0.9375rem;
  font-weight: 500;
}
.tb-sectors__list li:nth-child(3n+1) { border-top: 2px solid var(--tb-energy-500); }
.tb-sectors__list li:nth-child(3n+2) { border-top: 2px solid var(--tb-connect-500); }
.tb-sectors__list li:nth-child(3n+3) { border-top: 2px solid var(--tb-action-400); }

/* --- 20d. Offices --- */
.tb-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--tb-space-xl); }
.tb-office { padding-top: var(--tb-space-lg); border-top: 2px solid var(--tb-accent); }
.tb-office h3 { font-size: var(--tb-text-lg); margin-bottom: var(--tb-space-xs); }
.tb-office p { color: var(--tb-ink-muted); font-size: 0.9375rem; }

/* --- 20e. Long-form prose block (About) --- */
.tb-prose { max-width: var(--tb-measure); }
.tb-prose p + p { margin-top: var(--tb-space-md); }

/* Body copy holds its measure wherever it sits, not only inside .tb-prose. */
.tb-detail__body > p,
.tb-split__body > p,
.tb-split__body > .tb-lede,
.tb-faq__answer p,
.tb-dro__statement { max-inline-size: var(--tb-measure); }
.tb-prose em { font-style: normal; font-weight: 600; color: var(--tb-ink); }

@media (max-width: 64rem) {
  .tb-tg__inner { grid-template-columns: minmax(0, 1fr); }
  .tb-tg__scope { justify-self: start; max-inline-size: none; }
}

/* --- 20f. section surfaces: alternate so stacked bands stay distinct --- */
.tb-intro, .tb-sectors, .tb-team, .tb-faqsec, .tb-contact { background: var(--tb-page); }
.tb-multi, .tb-proposition { background: var(--tb-surface); }
.tb-proposition .tb-section-head { margin-bottom: var(--tb-space-xl); }
.tb-multi .tb-detail__points { margin-bottom: var(--tb-space-3xl); }

/* ============================================================
   21. SECONDARY SERVICES
   Water and merchant services sit alongside the four main areas rather
   than competing with them, so they get a lighter treatment: no numerals,
   smaller headings, two across instead of full-width rows.
   ============================================================ */

.tb-other { background: var(--tb-sunk); }

.tb-other__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--tb-space-2xl);
}

.tb-other__item { padding-top: var(--tb-space-lg); border-top: 2px solid var(--tb-accent); }

.tb-other__item h3 {
  font-size: var(--tb-text-lg);
  font-stretch: 93%;
  margin-bottom: var(--tb-space-xs);
}
.tb-other__item > p { color: var(--tb-ink-muted); font-size: 0.9375rem; max-width: 44ch; }
.tb-other__item .tb-detail__points { margin-top: var(--tb-space-md); }
.tb-other__item .tb-detail__points li { font-size: 0.875rem; }

/* A quiet footnote under the main service index, so the homepage
   acknowledges these without promoting them to the numbered list. */
.tb-svc__also {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tb-space-xs) var(--tb-space-md);
  margin-top: var(--tb-space-xl);
  padding-top: var(--tb-space-lg);
  border-top: 1px solid var(--tb-line);
  font-size: 0.9375rem;
  color: var(--tb-ink-muted);
}
.tb-svc__also b {
  font-family: var(--tb-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tb-ink-muted);
}
.tb-svc__also a {
  color: var(--tb-ink);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--tb-line-strong);
  padding-bottom: 1px;
}
.tb-svc__also a:hover { color: var(--tb-action-700); border-bottom-color: var(--tb-action-500); }

/* ============================================================
   22. MOTION
   Entrances are earned on first sight and then left alone — the JS
   unobserves each element once it has played. Nothing here animates a
   layout property except the accordion, which uses grid-template-rows.
   Everything degrades to visible-and-static without JavaScript.
   ============================================================ */

/* --- 22a. scroll reveals ------------------------------------ */
/* The hidden state only exists once JS has confirmed it can reveal them. */
html.js .tb-reveal { opacity: 0; transform: translateY(20px); will-change: opacity, transform; }

html.js .tb-reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
  transition:
    opacity var(--tb-dur-enter) var(--tb-ease-quart) calc(var(--i, 0) * var(--tb-stagger)),
    transform var(--tb-dur-enter) var(--tb-ease-expo) calc(var(--i, 0) * var(--tb-stagger));
}

/* --- 22b. the process connector draws itself in ------------- */
html.js .tb-step:not(:last-child)::after {
  transform: scaleX(0);
  transform-origin: left;
}
html.js .tb-step.is-in:not(:last-child)::after {
  transform: scaleX(1);
  transition: transform 720ms var(--tb-ease-expo) calc(var(--i, 0) * 140ms + 220ms);
}

/* --- 22c. the trefoil assembles from its own three blades ---- */
@media (prefers-reduced-motion: no-preference) {
}

/* --- 22d. scroll progress, in the tritone -------------------- */
/* Hidden unless the browser can actually drive it from scroll position. */
.tb-header__progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 2px;
  background: linear-gradient(90deg, var(--tb-energy-500), var(--tb-connect-500) 50%, var(--tb-action-400));
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .tb-header__progress {
      opacity: 1;
      animation: tb-progress linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes tb-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- 22e. accordion: the one place a layout property moves --- */
.tb-faq .tb-faq__answer {
  display: grid;
  grid-template-rows: 1fr;
}
.tb-faq .tb-faq__answer > * { min-block-size: 0; }

html.js .tb-faq details[data-collapsing] .tb-faq__answer,
html.js .tb-faq details[data-expanding] .tb-faq__answer { overflow: hidden; }

html.js .tb-faq details[data-animating] .tb-faq__answer {
  transition: grid-template-rows var(--tb-dur-layout) var(--tb-ease-quart);
}
html.js .tb-faq details[data-collapsed] .tb-faq__answer { grid-template-rows: 0fr; }

/* the answer slides the last few pixels rather than appearing flat */
html.js .tb-faq details[open] .tb-faq__answer > * {
  animation: tb-answer-in var(--tb-dur-layout) var(--tb-ease-quart) both;
}
@keyframes tb-answer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- 22f. richer hovers ------------------------------------- */
.tb-svc__no { transition: transform var(--tb-dur) var(--tb-ease), color var(--tb-dur-fast) var(--tb-ease-soft); }
.tb-svc:hover .tb-svc__no { transform: translateX(6px); }

.tb-tier, .tb-other__item, .tb-promise, .tb-office { transition: transform var(--tb-dur) var(--tb-ease-soft); }
.tb-tier:hover, .tb-other__item:hover { transform: translateY(-3px); }

.tb-sectors__list li {
  transition: transform var(--tb-dur-fast) var(--tb-ease-soft),
              border-color var(--tb-dur-fast) var(--tb-ease-soft);
}
.tb-sectors__list li:hover { transform: translateY(-2px); }

.tb-person__mono { transition: transform var(--tb-dur) var(--tb-ease); }
.tb-person:hover .tb-person__mono { transform: translateY(-3px); }

.tb-accred__dot { transition: transform var(--tb-dur) var(--tb-ease); }
.tb-accred__item:hover .tb-accred__dot { transform: scale(1.6); }

.tb-intro__figure img, .tb-contact__figure img {
  transition: transform 900ms var(--tb-ease-quart);
}
.tb-intro__figure:hover img, .tb-contact__figure:hover img { transform: scale(1.03); }

/* --- 22g. reduced motion: crossfade, never displacement ------ */
@media (prefers-reduced-motion: reduce) {
  html.js .tb-reveal { opacity: 0; transform: none; }
  html.js .tb-reveal.is-in {
    transform: none;
    transition: opacity 240ms linear calc(var(--i, 0) * 30ms);
  }
  html.js .tb-step:not(:last-child)::after,
  html.js .tb-step.is-in:not(:last-child)::after { transform: none; transition: none; }
  html.js .tb-faq details[open] .tb-faq__answer > * { animation: none; }
  .tb-svc:hover .tb-svc__no,
  .tb-tier:hover, .tb-other__item:hover,
  .tb-sectors__list li:hover,
  .tb-person:hover .tb-person__mono,
  .tb-intro__figure:hover img, .tb-contact__figure:hover img { transform: none; }
  .tb-accred__item:hover .tb-accred__dot { transform: none; }
}

/* ============================================================
   23. THE SPLIT — the page as a numbered document
   Replaces the old "head stacked above full-width content" shape that
   ran nine times down the homepage. The rail holds a large colour-coded
   section number and sticks while its content scrolls past, which both
   uses the previously dead right column and gives the tritone real mass
   at page scale instead of leaving it in 2px rules.
   ============================================================ */

.tb-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.tb-split__rail { position: sticky; top: 7rem; }

/* Flipped sections keep the same DOM order for screen readers and keyboards;
   only the visual columns swap. */
.tb-split--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.tb-split--flip .tb-split__rail { grid-column: 2; grid-row: 1; }
.tb-split--flip .tb-split__body { grid-column: 1; grid-row: 1; }

/* --- the rail mark: number carries the scale, label carries the name --- */
.tb-rail__mark {
  display: flex;
  align-items: baseline;
  gap: var(--tb-space-md);
  margin-bottom: var(--tb-space-lg);
  padding-bottom: var(--tb-space-md);
  border-bottom: 1px solid var(--tb-line);
}

.tb-rail__no {
  font-family: var(--tb-display);
  font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.5rem);
  font-weight: 700;
  font-stretch: 85%;
  line-height: 0.78;
  letter-spacing: -0.045em;
  color: var(--tb-accent);
  font-variant-numeric: tabular-nums;
}

.tb-rail__label {
  font-family: var(--tb-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tb-ink-muted);
}

/* Section headings step down: the rail number now carries the weight, so the
   heading no longer has to compete with it. */
.tb-split__rail h2 {
  font-size: var(--tb-text-xl);
  font-stretch: 89%;
  max-width: 16ch;
}
.tb-split__rail .tb-lede {
  margin-top: var(--tb-space-md);
  font-size: var(--tb-text-base);
  max-width: 34ch;
}
.tb-split__rail .tb-btn,
.tb-split__rail .wp-block-buttons { margin-top: var(--tb-space-lg); }

/* On navy sections the rail inverts: the rule darkens, the heading goes to
   page white, and the numeral steps up to the light accent so it still reads. */
.tb-process .tb-rail__mark { border-bottom-color: var(--tb-navy-line); }
.tb-process .tb-rail__label { color: var(--tb-ink-on-navy); }
.tb-process .tb-split__rail h2 { color: var(--tb-page); }
.tb-process .tb-rail__no { color: var(--tb-accent-lift); }
.tb-process .tb-split__rail .tb-lede { color: var(--tb-ink-on-navy); }

/* --- band rhythm: not every section deserves the same air --- */
.tb-section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
/* --- staggered three-up: breaks the flat row --- */
.tb-pillars__grid { align-items: start; }
@media (min-width: 64.01rem) {
  .tb-pillars__grid > :nth-child(2) { margin-block-start: var(--tb-space-2xl); }
  .tb-pillars__grid > :nth-child(3) { margin-block-start: var(--tb-space-4xl); }
}

/* --- the service list loses its own head; the rail has it now --- */
.tb-split__body > .tb-svc:first-child { border-top: 0; }
.tb-split__body > .tb-detail:first-of-type { border-top: 0; }

@media (max-width: 64rem) {
  .tb-split,
  .tb-split--flip { grid-template-columns: minmax(0, 1fr); gap: var(--tb-space-xl); }
  .tb-split--flip .tb-split__rail,
  .tb-split--flip .tb-split__body { grid-column: 1; grid-row: auto; }
  .tb-split__rail { position: static; }
  .tb-split__rail h2 { max-width: 20ch; }
  .tb-split__rail .tb-lede { max-width: 54ch; }
  .tb-pillars__grid > :nth-child(2),
  .tb-pillars__grid > :nth-child(3) { margin-block-start: 0; }
}

/* ============================================================
   24. SPLIT-BODY ADJUSTMENTS
   Components built for full width need retuning inside the 8-column body.
   ============================================================ */

/* The service row's name column was floored by its longest word, which pushed
   "Communications" over the description. Explicit minmax(0,…) lets it wrap.
   Scoped to the split breakpoint: below it the rail stacks and the row has to
   fall back to the narrow layouts, which this would otherwise out-specify. */
@media (min-width: 64.01rem) {
  .tb-split__body .tb-svc {
    grid-template-columns: 4.5rem minmax(0, 1.05fr) minmax(0, 1fr) 2.75rem;
    gap: var(--tb-space-lg);
  }
  .tb-split__body .tb-svc__no { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.75rem); }
  .tb-split__body .tb-svc--lead .tb-svc__no { font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.25rem); }
  .tb-split__body .tb-svc--lead .tb-svc__name { font-size: var(--tb-text-xl); }
  .tb-split__body .tb-tiers { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}

/* Three columns will not fit in the body, and wrapping to 2+1 orphans the
   third. Beside a rail, a vertical list reads better anyway. */
.tb-split__body .tb-pillars__grid { grid-template-columns: minmax(0, 1fr); border-top: 0; }
.tb-split__body .tb-pillar {
  padding: var(--tb-space-lg) 0 var(--tb-space-xl) !important;
  margin-block-start: 0 !important;
  border-top: 2px solid var(--tb-accent);
}
.tb-split__body .tb-pillar:first-child { padding-top: 0; border-top: 0; }
.tb-split__body .tb-pillar h3 { font-size: var(--tb-text-lg); }
.tb-split__body .tb-pillar__desc { max-width: 52ch; }

/* Accreditation reads better as one column beside its rail than as a cramped 2x2. */
.tb-split__body .tb-accred__list { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); column-gap: var(--tb-space-2xl); }

/* --- head row: for sections that need their full width back ---------- */
.tb-headrow {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: end;
  margin-bottom: var(--tb-space-2xl);
}
.tb-headrow .tb-rail__mark { margin-bottom: 0; }
.tb-headrow h2 { font-size: var(--tb-text-2xl); max-width: 18ch; }
.tb-headrow .tb-lede { margin-top: var(--tb-space-md); max-width: 52ch; }

@media (max-width: 64rem) {
  .tb-headrow { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--tb-space-lg); }
}

/* A rail with no number: the label steps up to carry the mark on its own. */
.tb-rail__mark:not(:has(.tb-rail__no)) .tb-rail__label {
  font-size: 0.8125rem;
  color: var(--tb-accent-ink);
}

/* A two-column detail block inside the eight-column body makes three narrow
   columns and squeezes the service names. Stack it instead — the body has
   the width to carry a full-size heading. */
.tb-split__body .tb-detail {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tb-space-md);
  padding-block: var(--tb-space-2xl);
}
.tb-split__body .tb-detail__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--tb-space-md); }
.tb-split__body .tb-detail__head h3 { font-size: var(--tb-text-xl); margin-top: 0; }
.tb-split__body .tb-detail__tag {
  font-family: var(--tb-ui); margin-top: 0; }
.tb-split__body .tb-detail__body > p { max-width: var(--tb-measure); }

/* the closing note after a spec list needs air from the last bullet */
.tb-detail__points + p { margin-top: var(--tb-space-lg); }

/* ============================================================
   25. THE BLADE AS STRUCTURE
   The mark stopped at the hero. Here its geometry becomes part of the
   system, working at three scales: architectural (a cropped blade
   anchoring each section), structural (the accreditation markers), and
   atomic (every bullet in a spec list). Same path as the hero trefoil.
   ============================================================ */

:root {
  /* The mark's three glyphs, drawn rather than traced. Tracing the raster
     turned clean arcs into squiggles and rounded the bolt's points off; these
     are true arcs and straight segments, so they hold at any size.
     Each carries the meaning its colour already carries. */
  --tb-icon-connect: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><circle cx='60' cy='104.5' r='7.5' fill='black'/><path fill='none' stroke='black' stroke-width='13' stroke-linecap='round' d='M 21.5 60.5 A 54 54 0 0 1 98.5 60.5'/><path fill='none' stroke='black' stroke-width='13' stroke-linecap='round' d='M 37 76 A 33 33 0 0 1 83 76'/><path fill='none' stroke='black' stroke-width='13' stroke-linecap='round' d='M 52.5 91.5 A 11 11 0 0 1 67.5 91.5'/></svg>");
  --tb-icon-energy:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><path fill='black' fill-rule='evenodd' d='M 60 8 C 98 42 96 86 60 112 C 24 86 22 42 60 8 Z M 62.6 100 C 60.6 72 60.6 44 62.6 22 L 57.4 22 C 55.4 44 55.4 72 57.4 100 Z'/></svg>");
  --tb-icon-action:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><path fill='black' d='M 74 8 L 30 66 L 53 66 L 44 112 L 90 52 L 65 52 Z'/></svg>");
  --tb-icon-connect-line: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><circle cx='60' cy='104.5' r='7.5' fill='none' stroke='black' stroke-width='4.5'/><path fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' d='M 21.5 60.5 A 54 54 0 0 1 98.5 60.5'/><path fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' d='M 37 76 A 33 33 0 0 1 83 76'/><path fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' d='M 52.5 91.5 A 11 11 0 0 1 67.5 91.5'/></svg>");
  --tb-icon-energy-line:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><path fill='none' stroke='black' stroke-width='4.5' d='M 60 8 C 98 42 96 86 60 112 C 24 86 22 42 60 8 Z'/><path fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' d='M 60 102 C 58 72 58 44 60 20'/></svg>");
  --tb-icon-action-line:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><path fill='none' stroke='black' stroke-width='4.5' stroke-linejoin='round' d='M 74 8 L 30 66 L 53 66 L 44 112 L 90 52 L 65 52 Z'/></svg>");

  --tb-icon: var(--tb-icon-connect);
  --tb-icon-line: var(--tb-icon-connect-line);
}

/* --- 25a. architectural: one oversized blade per split section ------ */
/* `overflow: clip` rather than `hidden` — hidden would make the section a
   scroll container and kill the sticky rail. */
.tb-section:has(> .tb-wrap.tb-split),
.tb-section:has(.tb-headrow) { position: relative; overflow: clip; }

.tb-section:has(> .tb-wrap.tb-split)::before,
.tb-section:has(.tb-headrow)::before {
  content: "";
  position: absolute;
  z-index: 0;
  inline-size: clamp(34rem, 54vw, 62rem);
  aspect-ratio: 1;
  inset-block-start: -22%;
  inset-inline-end: -22rem;
  background: var(--tb-connect-600);
  -webkit-mask: var(--tb-icon-line) center / contain no-repeat;
  mask: var(--tb-icon-line) center / contain no-repeat;
  opacity: 0.16;
  pointer-events: none;
  rotate: -8deg;
}

/* the blade sits opposite the rail, so a flipped section mirrors it */
.tb-section:has(> .tb-wrap.tb-split--flip)::before {
  inset-inline-end: auto;
  inset-inline-start: -22rem;
  rotate: 172deg;
}

/* colour follows the rail's accent */
.tb-section:has(.tb-split__rail.tb-energy)::before,
.tb-section:has(.tb-headrow.tb-energy)::before {
  background: var(--tb-energy-500);
  -webkit-mask-image: var(--tb-icon-energy-line);
  mask-image: var(--tb-icon-energy-line);
}
.tb-section:has(.tb-split__rail.tb-connect)::before {
  background: var(--tb-connect-600);
  -webkit-mask-image: var(--tb-icon-connect-line);
  mask-image: var(--tb-icon-connect-line);
}
.tb-section:has(.tb-split__rail.tb-action)::before {
  background: var(--tb-action-500);
  -webkit-mask-image: var(--tb-icon-action-line);
  mask-image: var(--tb-icon-action-line);
}

/* on navy the tint has to work harder to register */
/* on navy an outline needs more presence to register at all */
.tb-process::before { opacity: 0.4; }

/* content sits above the watermark */
.tb-split, .tb-headrow, .tb-process__track { position: relative; z-index: 1; }

/* --- 25b. structural: the accreditation marker ---------------------- */
.tb-accred__dot {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  border-radius: 0;
  margin-top: 0.25rem;
  -webkit-mask: var(--tb-icon) center / contain no-repeat;
  mask: var(--tb-icon) center / contain no-repeat;
}

/* --- 25c. atomic: every bullet in a spec list ---------------------- */
.tb-detail__points li::before {
  inline-size: 0.42rem;
  block-size: 0.42rem;
  border-radius: 50%;
  margin-top: 0.62em;
}

/* --- 25d. the footer closes on the mark ---------------------------- */
.tb-footer { position: relative; overflow: clip; }
.tb-footer::before {
  content: "";
  position: absolute;
  z-index: 0;
  inline-size: 34rem;
  aspect-ratio: 1;
  inset-block-end: -16rem;
  inset-inline-end: -10rem;
  background: var(--tb-connect-500);
  -webkit-mask: var(--tb-icon-line) center / contain no-repeat;
  mask: var(--tb-icon-line) center / contain no-repeat;
  opacity: 0.3;
  pointer-events: none;
  rotate: 24deg;
}
.tb-footer .tb-wrap { position: relative; z-index: 1; }

@media (max-width: 64rem) {
  .tb-section:has(> .tb-wrap.tb-split)::before,
.tb-section:has(.tb-headrow)::before { inline-size: 22rem; inset-inline-end: -9rem; opacity: 0.22; }
  .tb-section:has(> .tb-wrap.tb-split--flip)::before { inset-inline-start: -9rem; }
}

/* ============================================================
   26. DRO LOCKUP
   The only raster Trinity holds is 198x50, which blurs the moment it is
   scaled. DRO publish their monogram as vector, so the lockup is rebuilt
   from that official mark plus the organisation's name set as text —
   sharp at any size. Ask DRO for their member logo pack before launch;
   this is a faithful reconstruction, not their supplied artwork.
   ============================================================ */

.tb-dro__lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.tb-dro__chip {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  padding: 0.5rem;
  background: #1C4C60; /* sampled from DRO's own lockup */
  border-radius: 3px;
}
.tb-dro__chip svg { inline-size: 100%; block-size: 100%; display: block; }

.tb-dro__name {
  font-family: var(--tb-ui);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: #2C3444;
}
.tb-dro__name span {
  display: block;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--tb-ink-muted);
  margin-top: 0.1rem;
}

/* ============================================================
   27. SOCIAL
   Only real profiles go here. The old site linked bare domains
   (instagram.com, facebook.com) which go nowhere useful — those were
   removed rather than shipped. Add a platform only when its URL exists.
   ============================================================ */

.tb-footer .tb-social,
.tb-social {
  display: flex;
  gap: var(--tb-space-sm);
  margin-top: var(--tb-space-lg);
  list-style: none;
  padding: 0;
}

.tb-footer .tb-social a,
.tb-social a {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--tb-navy-line);
  border-radius: 3px;
  color: var(--tb-ink-on-navy);
  transition: color var(--tb-dur) var(--tb-ease-soft),
              border-color var(--tb-dur) var(--tb-ease-soft),
              transform var(--tb-dur) var(--tb-ease);
}
.tb-social a:hover {
  color: var(--tb-page);
  border-color: var(--tb-action-400);
  transform: translateY(-2px);
}
.tb-social svg { inline-size: 1.15rem; block-size: 1.15rem; }

@media (prefers-reduced-motion: reduce) { .tb-social a:hover { transform: none; } }

/* ============================================================
   28. LIFE
   The page had drifted navy-and-white with colour confined to numerals
   and hairlines. These add presence without reaching for the things the
   client ruled out (no colour-field bands, no gradients, no card grids).
   ============================================================ */

/* --- 28a. the swoosh, straight off the lockup ----------------------- */
/* In the logo it sits beneath the wordmark; here it seams the light page
   into the closing navy band and signs off the footer. */
.tb-cta { position: relative; }
.tb-cta::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  /* The artwork is 1400x171. Cap the WIDTH and let the height follow, so the
     sweep keeps its true curve at every viewport; a fixed height against a
     full-bleed width flattened it by nearly half on desktop. */
  inline-size: min(100%, 62rem);
  margin-inline: auto;
  aspect-ratio: 8.187;
  background: url("assets/images/trinity-swoosh.png") center top / 100% 100% no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

/* clear the swoosh */
.tb-cta .tb-wrap { padding-block-start: clamp(1rem, 3vw, 2.5rem); }

/* The logo link is a stretched flex child, so a 100%-wide arc took the whole
   column's width and cut through the wordmark. Shrink-wrap it first. */
.tb-footer__brand .tb-header__logo {
  position: relative;
  inline-size: fit-content;
  margin-bottom: 2.25rem;
}
/* The arc sits under the lockup as it does in the real artwork. It is 5.7:1,
   so it gets an aspect-ratio rather than a fixed height — forcing it into a
   13px strip was cropping it to two stray wedges. */
.tb-footer__brand .tb-header__logo::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -1.6rem;
  inline-size: 100%;
  aspect-ratio: 8.187;   /* the artwork's own ratio — 5.74 stretched it 43% */
  background: url("assets/images/trinity-swoosh.png") center / 100% 100% no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

/* --- 28b. a breath of the accent in each split surface -------------- */
/* A whisper of the section's own hue — enough that the page registers as
   coloured rather than grey. The orange needs the lightest hand: any more and
   it reads as beige rather than as a tint of the brand orange. */
.tb-section:has(.tb-split__rail.tb-energy)  { background: color-mix(in oklab, var(--tb-energy-50) 32%, var(--tb-page)); }
.tb-section:has(.tb-split__rail.tb-connect) { background: color-mix(in oklab, var(--tb-connect-50) 30%, var(--tb-page)); }
.tb-section:has(.tb-split__rail.tb-action)  { background: color-mix(in oklab, var(--tb-action-50) 16%, var(--tb-page)); }

/* --- 28c. the rail number gets its glyph behind it ------------------ */
.tb-rail__mark { position: relative; }
.tb-rail__mark::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -0.5rem;
  translate: 0 -58%;
  inline-size: 5.5rem;
  block-size: 5.5rem;
  background: var(--tb-accent);
  -webkit-mask: var(--tb-icon) center / contain no-repeat;
  mask: var(--tb-icon) center / contain no-repeat;
  opacity: 0.1;
  z-index: -1;
  pointer-events: none;
}
.tb-process .tb-rail__mark::after,
/* --- 28d. the service rows earn their colour on hover --------------- */
.tb-svc { position: relative; }
.tb-svc::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 4rem;
  inline-size: 6rem;
  background: var(--tb-accent);
  -webkit-mask: var(--tb-icon) center / contain no-repeat;
  mask: var(--tb-icon) center / contain no-repeat;
  opacity: 0;
  transition: opacity var(--tb-dur) var(--tb-ease), translate var(--tb-dur) var(--tb-ease);
  translate: 1.5rem 0;
  pointer-events: none;
}
.tb-svc:hover::after { opacity: 0.12; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .tb-svc::after { transition: opacity 200ms linear; translate: 0 0; }
}

/* ============================================================
   29. IMAGERY
   The old site leaned on handshake-and-laptop stock, which is one of the
   four anti-references. Only pictures of the actual subject earn a place:
   a mast, a SIM, a pile of bills, the real office. Nothing decorative.
   ============================================================ */

.tb-detail__figure {
  margin: 0 0 var(--tb-space-lg);
  position: relative;
  overflow: clip;
  border-radius: 2px;
}

.tb-detail__figure img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--tb-ease-quart);
}
.tb-detail:hover .tb-detail__figure img { transform: scale(1.035); }

/* a hairline of the service's own colour along the foot of the image, so the
   picture is tied to the section rather than floating in it */
.tb-detail__figure::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: var(--tb-accent);
}

.tb-detail__figure figcaption {
  margin-top: var(--tb-space-sm);
  font-family: var(--tb-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tb-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .tb-detail:hover .tb-detail__figure img { transform: none; }
}

/* --- 29a. the guarantee gets real ground under it -------------------- */
/* The strongest claim on the site was sitting on flat navy. A scrimmed
   photograph of actual infrastructure gives it weight. The scrim is
   asymmetric — heaviest where the copy sits, lifting toward the right so
   the picture is still readable as a picture. */
.tb-tg {
  background-color: var(--tb-navy);
  background-image:
    linear-gradient(95deg,
      rgba(21, 29, 51, 0.985) 0%,
      rgba(21, 29, 51, 0.965) 42%,
      rgba(21, 29, 51, 0.86) 72%,
      rgba(21, 29, 51, 0.72) 100%),
    url("assets/images/img-guarantee.webp");
  background-size: auto, cover;
  background-position: center, 60% 46%;
  background-repeat: no-repeat;
}

/* Measured on the composite, not assumed: worst-case background luminance
   across the band gives white 8.9:1 and the on-navy body 5.8:1. Where the copy
   actually sits (the dark left third) it is 14.8:1 and 9.7:1.
   Caveat: orange on the band's lightest area is 3.9:1 — fine for the large
   headline, but do not move small orange text to the right of this section. */

@media (max-width: 64rem) {
  /* stacked, the copy runs the full width, so the scrim has to be flat */
  .tb-tg {
    background-image:
      linear-gradient(180deg, rgba(21, 29, 51, 0.975) 0%, rgba(21, 29, 51, 0.93) 100%),
      url("assets/images/img-guarantee.webp");
  }
}

/* --- 29b. the two offices, shown not just named -------------------- */
.tb-office { display: flex; flex-direction: column; }

.tb-office__figure {
  margin: 0 0 var(--tb-space-md);
  overflow: clip;
  border-radius: 2px;
  position: relative;
}
.tb-office__figure img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--tb-ease-quart);
}
.tb-office:hover .tb-office__figure img { transform: scale(1.04); }
.tb-office__figure::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: var(--tb-accent);
}

/* --- 29c. the sectors get faces ------------------------------------ */
.tb-sectors__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--tb-space-md);
  margin-top: var(--tb-space-2xl);
}

.tb-sectors__shot { margin: 0; position: relative; overflow: clip; border-radius: 2px; }
.tb-sectors__shot img {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--tb-ease-quart);
}
.tb-sectors__shot:hover img { transform: scale(1.05); }

/* the label sits on the picture, on a scrim heavy enough to carry it */
.tb-sectors__shot figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--tb-space-lg) var(--tb-space-md) var(--tb-space-sm);
  background: linear-gradient(to top, rgba(21, 29, 51, 0.94), rgba(21, 29, 51, 0.72) 45%, transparent);
  color: var(--tb-page);
  font-family: var(--tb-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .tb-office:hover .tb-office__figure img,
  .tb-sectors__shot:hover img { transform: none; }
}

/* Photography ships as WebP only. Support is ~97% and the saving over JPEG was
   41% across these files; anything older than Safari 14 falls outside the
   audience for a UK B2B site. Swap in <picture> with a JPEG source if that
   assumption ever stops holding. */

/* ============================================================
   30. POLISH
   Spacing sits on the 4pt scale. The handful of sub-4px values that
   remain are optical alignment — nudging a glyph onto a text baseline,
   or the logotype's sub-line under the mark — plus positional offsets
   tied to the header height. Those are deliberate, not drift.
   Fixes from a measured pass over the rendered pages.
   ============================================================ */

/* The email address is one unbreakable 31-character token; at 390px it pushed
   the contact page 159px wider than the viewport. */
.tb-contact__row a,
.tb-contact__row address { overflow-wrap: anywhere; }

/* --- touch targets ---------------------------------------------------
   WCAG 2.5.8 exempts links inline in prose, so those are left alone. These
   are navigation and controls, which are not exempt. */
.tb-footer .tb-social a,
.tb-social a { inline-size: 2.75rem; block-size: 2.75rem; }

.tb-footer ul a {
  display: inline-block;
  padding-block: 0.5rem;   /* lifts the target to ~40px, clear of the 24px AA floor */
}

.tb-header__logo { padding-block: 0.15rem; }

/* the mobile overlay's links need real height, not just leading */
@media (max-width: 48rem) {
  body.nav-open .tb-nav:not(.wp-block-navigation) a { padding-block: var(--tb-space-md); min-block-size: 2.75rem; }
  .tb-header__burger { min-block-size: 2.75rem; }
}

/* --- legibility ------------------------------------------------------
   Small tracked labels may sit under 14px — they are signage, not reading.
   Anything actually read should not. */
.tb-tg__terms { font-size: 0.875rem; }
.tb-detail__figure figcaption,
.tb-intro__figure figcaption,
.tb-contact__figure figcaption { font-size: 0.75rem; }

/* --- measure ---------------------------------------------------------
   Caps the handful of paragraphs that ran past a comfortable line. */
.tb-office p,
.tb-other__item > p,
.tb-detail__body > p,
.tb-accred__item p { max-width: var(--tb-measure); }

/* Small tracked labels may sit under 14px — they are signage. These three are
   actually read, so they come up to the floor on small screens. */
@media (max-width: 48rem) {
  .tb-footer__legal,
  .tb-footer__legal a,
  .tb-detail__figure figcaption,
  .tb-intro__figure figcaption,
  .tb-contact__figure figcaption,
  .tb-office__figure figcaption { font-size: 0.875rem; }
}

/* ============================================================
   31. LEGAL DOCUMENTS — privacy policy, terms of use
   Long compliance copy in the same numbered-document shape as the
   rest of the site: a sticky contents rail against a body that
   carries its own section numbers, so a twelve-section policy stays
   navigable instead of becoming a wall.
   ============================================================ */

.tb-legal__meta {
  font-family: var(--tb-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tb-ink-muted);
  margin-bottom: var(--tb-space-lg);
  padding-bottom: var(--tb-space-md);
  border-bottom: 1px solid var(--tb-line);
}

.tb-legal__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tb-toc;
}

.tb-legal__toc li { counter-increment: tb-toc; }

.tb-legal__toc a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--tb-space-xs);
  padding-block: 0.4375rem;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--tb-ink-muted);
  text-decoration: none;
  transition: color var(--tb-dur-fast) var(--tb-ease-soft);
}

.tb-legal__toc a::before {
  content: counter(tb-toc, decimal-leading-zero);
  font-family: var(--tb-ui);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--tb-line-strong);
  transition: color var(--tb-dur-fast) var(--tb-ease-soft);
}

.tb-legal__toc a:hover { color: var(--tb-ink); }
.tb-legal__toc a:hover::before,
.tb-legal__toc a[aria-current]::before { color: var(--tb-accent); }
.tb-legal__toc a[aria-current] { color: var(--tb-ink); font-weight: 600; }

.tb-legal__section + .tb-legal__section {
  margin-top: var(--tb-space-3xl);
  padding-top: var(--tb-space-2xl);
  border-top: 1px solid var(--tb-line);
}

/* scroll-margin so a jump link does not land under the sticky header */
.tb-legal__section { scroll-margin-top: 7rem; }

.tb-legal__section > h2 {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--tb-space-sm);
  font-size: var(--tb-text-xl);
  font-stretch: 89%;
  margin-bottom: var(--tb-space-md);
}

.tb-legal__no {
  font-family: var(--tb-display);
  font-size: 1.75rem;
  font-weight: 700;
  font-stretch: 85%;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tb-accent);
  font-variant-numeric: tabular-nums;
}

.tb-legal__section h3 {
  font-size: var(--tb-text-lg);
  margin-top: var(--tb-space-xl);
  margin-bottom: var(--tb-space-xs);
}

.tb-legal__section p,
.tb-legal__section ul,
.tb-legal__section ol,
.tb-legal__section dl { max-inline-size: var(--tb-measure); }

.tb-legal__section p { color: var(--tb-ink-muted); }
.tb-legal__section p + p,
.tb-legal__section p + ul,
.tb-legal__section p + ol,
.tb-legal__section ul + p,
.tb-legal__section ol + p,
.tb-legal__section dl + p { margin-top: var(--tb-space-md); }

.tb-legal__section ul,
.tb-legal__section ol { padding-inline-start: 1.25rem; color: var(--tb-ink-muted); }
.tb-legal__section li + li { margin-top: var(--tb-space-xs); }
.tb-legal__section li::marker { color: var(--tb-accent); }

.tb-legal__pairs {
  margin: var(--tb-space-md) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0;
  border-top: 1px solid var(--tb-line);
  max-inline-size: 46rem;
}

.tb-legal__pairs dt,
.tb-legal__pairs dd {
  margin: 0;
  padding: var(--tb-space-sm) var(--tb-space-md) var(--tb-space-sm) 0;
  border-bottom: 1px solid var(--tb-line);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tb-legal__pairs dt { font-weight: 600; color: var(--tb-ink); }
.tb-legal__pairs dd { color: var(--tb-ink-muted); }

/* a value the client still has to supply, made impossible to miss */
.tb-todo {
  font-family: var(--tb-ui);
  font-size: 0.8125em;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--tb-action-50);
  color: var(--tb-action-700);
  padding: 0.1em 0.4em;
  border-radius: 2px;
  white-space: nowrap;
}

@media (max-width: 60rem) {
  .tb-legal__pairs { grid-template-columns: minmax(0, 1fr); }
  .tb-legal__pairs dt { border-bottom: 0; padding-bottom: 0; }
  .tb-legal__pairs dd { padding-top: var(--tb-space-2xs); }
}

@media (max-width: 48rem) {
  .tb-legal__toc { display: none; }
  .tb-legal__section > h2 { grid-template-columns: 2.5rem minmax(0, 1fr); }
}

/* ============================================================
   32. COOKIE CONSENT
   Fixed to the bottom, light against the page so it reads as a
   question rather than an alert. Accept and Reject are the same
   button at the same size: rejecting has to be as easy as agreeing.
   ============================================================ */

.tb-consent {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  background: var(--tb-page);
  border-top: 2px solid var(--tb-action-500);
  box-shadow: 0 -12px 40px -24px rgba(21, 29, 51, 0.5);
  padding: var(--tb-space-lg) var(--tb-gutter)
           calc(var(--tb-space-lg) + env(safe-area-inset-bottom, 0px));
  transform: translateY(101%);
  transition: transform var(--tb-dur-enter) var(--tb-ease-expo);
}

.tb-consent.is-in { transform: translateY(0); }

.tb-consent__inner {
  max-inline-size: var(--tb-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tb-space-lg) var(--tb-space-2xl);
}

.tb-consent__title {
  font-family: var(--tb-display);
  font-size: var(--tb-text-lg);
  font-weight: 700;
  font-stretch: 89%;
  letter-spacing: -0.018em;
  line-height: 1.1;
  margin: 0 0 var(--tb-space-2xs);
}

.tb-consent__title:focus-visible { outline: 2px solid var(--tb-action-500); outline-offset: 4px; }

.tb-consent__copy p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--tb-ink-muted);
  max-inline-size: var(--tb-measure);
}

.tb-consent__copy a { color: var(--tb-accent-ink); }

.tb-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-space-sm);
  align-items: center;
}

/* identical footprint, because rejecting must be as easy as accepting */
.tb-consent__actions .tb-btn { min-inline-size: 9.5rem; justify-content: center; }

.tb-consent__panel {
  max-inline-size: var(--tb-wide);
  margin: var(--tb-space-lg) auto 0;
  padding-top: var(--tb-space-lg);
  border-top: 1px solid var(--tb-line);
}

.tb-consent__panel fieldset { border: 0; margin: 0; padding: 0; }
.tb-consent__panel legend {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.tb-consent__group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--tb-space-xs) var(--tb-space-md);
  padding-block: var(--tb-space-sm);
  align-items: start;
}

.tb-consent__group + .tb-consent__group { border-top: 1px solid var(--tb-line); }

.tb-consent__group input {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin: 0.2rem 0 0;
  accent-color: var(--tb-accent);
}
.tb-consent__group input[disabled] { accent-color: var(--tb-ink-muted); }

.tb-consent__group strong { font-size: 0.9375rem; color: var(--tb-ink); display: block; }
.tb-consent__group span {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tb-ink-muted);
  display: block;
  margin-top: 0.15rem;
  max-inline-size: var(--tb-measure);
}
/* scoped, or .tb-consent__group span above wins on specificity */
.tb-consent__group .tb-consent__always {
  font-family: var(--tb-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tb-action-700);
  margin-top: 0.35rem;
}

.tb-consent__panel .tb-btn { margin-top: var(--tb-space-md); }

@media (max-width: 56rem) {
  .tb-consent__inner { grid-template-columns: minmax(0, 1fr); }
  .tb-consent__actions .tb-btn { flex: 1 1 8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-consent { transition: none; }
}

/* ============================================================
   33. FINAL PASS — the last three template patterns, retired
   Icon-heading-text grids, circles-on-a-line steps and the giant
   quotation mark are the three most recognisable stock layouts
   left on the page. Each is reset here into the ledger idiom the
   rest of the site already speaks: a numeral, a name, a line.
   Markup is untouched, so the WordPress patterns follow for free.
   ============================================================ */

/* --- accreditation: from a 2x2 icon grid to a numbered schedule ---- */

.tb-accred__list,
.tb-split__body .tb-accred__list {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  counter-reset: tb-accred;
}

.tb-accred__item {
  counter-increment: tb-accred;
  grid-template-columns: 3rem minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--tb-space-xs) var(--tb-space-lg);
  align-items: baseline;
  padding-block: var(--tb-space-md);
}

/* the heading and its line sit side by side as grid items */
.tb-accred__item > div { display: contents; }

.tb-accred__dot,
.tb-accred__item:hover .tb-accred__dot {
  inline-size: auto;
  block-size: auto;
  margin: 0;
  border-radius: 0;
  background: none;
  -webkit-mask: none;
  mask: none;
  transform: none;
}

.tb-accred__dot::before {
  content: counter(tb-accred, decimal-leading-zero);
  font-family: var(--tb-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--tb-accent);
  font-variant-numeric: tabular-nums;
}

.tb-accred__item h3 { font-size: var(--tb-text-lg); font-stretch: 91%; }
.tb-accred__item > div > p { margin-top: 0; }

/* --- process: from circles on a wire to three numbered rows -------- */

.tb-process__track {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--tb-navy-line);
}

.tb-step {
  display: grid;
  grid-template-columns: 6rem minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--tb-space-xs) var(--tb-space-xl);
  align-items: baseline;
  padding-block: var(--tb-space-xl);
  border-bottom: 1px solid var(--tb-navy-line);
}

.tb-step::after,
html.js .tb-step::after,
html.js .tb-step.is-in::after { display: none; content: none; }

.tb-step__no {
  display: block;
  inline-size: auto;
  block-size: auto;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.5rem);
  font-stretch: 85%;
  line-height: 0.78;
  letter-spacing: -0.045em;
  color: var(--tb-accent-lift);
}

.tb-step h3 { margin: 0; }
.tb-step__desc { max-width: var(--tb-measure); }

/* --- testimonial: hanging punctuation instead of a 5rem glyph ------ */

.tb-quote__mark { display: none; }

.tb-quote figure { position: relative; padding-top: var(--tb-space-lg); }
.tb-quote figure::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 3rem;
  block-size: 2px;
  background: var(--tb-action-500);
}

.tb-quote blockquote p { text-indent: -0.42em; }
.tb-quote blockquote p::before { content: "\201C"; }
.tb-quote blockquote p::after { content: "\201D"; }

/* --- sector shots: let more of the picture through ------------------ */

.tb-sectors__shot figcaption {
  padding-top: var(--tb-space-2xl);
  background: linear-gradient(to top,
    rgba(21, 29, 51, 0.92),
    rgba(21, 29, 51, 0.55) 34%,
    transparent 66%);
}

@media (max-width: 48rem) {
  .tb-accred__item { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .tb-accred__item > div { display: block; }
  .tb-accred__item > div > p { margin-top: var(--tb-space-2xs); }
  .tb-step { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--tb-space-lg); }
  .tb-step__desc { grid-column: 2; }
}

/* ============================================================
   34. HERO PHOTOGRAPH
   A skyline under the trefoil, held well inside the navy: low
   opacity, desaturated, and masked so it is fully transparent
   under the headline and along the bottom edge. It should read
   as depth, not as a picture.
   ============================================================ */

.tb-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* two ramps, intersected: fades to nothing towards the copy on the left
     and towards the section's bottom edge */
  -webkit-mask-image:
    linear-gradient(to right, transparent 34%, #000 74%),
    linear-gradient(to top, transparent 4%, #000 46%);
  mask-image:
    linear-gradient(to right, transparent 34%, #000 74%),
    linear-gradient(to top, transparent 4%, #000 46%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.tb-hero__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 62% 38%;
  display: block;
  opacity: 0.27;
  filter: saturate(0.6) contrast(1.06);
}

/* narrow screens: the trefoil steps aside, so the picture fades from the top
   instead and stays quieter still */
@media (max-width: 48rem) {
  .tb-hero__photo {
    -webkit-mask-image:
      linear-gradient(to right, transparent 24%, #000 82%),
      linear-gradient(to top, transparent 10%, #000 62%);
    mask-image:
      linear-gradient(to right, transparent 24%, #000 82%),
      linear-gradient(to top, transparent 10%, #000 62%);
  }
  .tb-hero__photo img { opacity: 0.2; object-position: 55% 40%; }
}

/* ============================================================
   35. MOTION II — the document comes to life
   Everything here is earned by scroll or by a real interaction,
   runs on transform, opacity, clip-path or mask only, and is
   switched off wholesale under prefers-reduced-motion.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* --- 35a. ledger rules draw in, in the row's own colour, then settle --- */
  html.js .tb-accred__item,
  html.js .tb-step,
  html.js .tb-detail,
  html.js .tb-legal__section { position: relative; }

  html.js :is(.tb-accred__item, .tb-step, .tb-detail, .tb-legal__section)::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: -1px;
    block-size: 2px;
    background: var(--tb-accent);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    pointer-events: none;
  }
  html.js .tb-step::before { background: var(--tb-accent-lift); }

  html.js :is(.tb-accred__item, .tb-step, .tb-detail, .tb-legal__section).is-in::before {
    animation: tb-rule 1100ms var(--tb-ease-expo) calc(var(--i, 0) * var(--tb-stagger) + 120ms) both;
  }

  /* --- 35b. photographs wipe in from the left and settle their scale --- */
  html.js .tb-reveal:not(.is-in) :is(.tb-detail__figure, .tb-office__figure, .tb-contact__figure) img,
  html.js .tb-reveal:is(.tb-intro__figure, .tb-sectors__shot):not(.is-in) img {
    clip-path: inset(0 100% 0 0);
  }
  /* fill-mode backwards: after the wipe the image releases to its normal
     rules, so the existing hover scale keeps working */
  html.js .tb-reveal.is-in :is(.tb-detail__figure, .tb-office__figure, .tb-contact__figure) img,
  html.js .tb-reveal:is(.tb-intro__figure, .tb-sectors__shot).is-in img {
    animation: tb-wipe 1100ms var(--tb-ease-expo) calc(var(--i, 0) * var(--tb-stagger) + 140ms) backwards;
  }

  /* --- 35c. the swoosh sweeps in, left to right, like a pen stroke --- */
  html.js .tb-cta::after,
  html.js .tb-footer__brand .tb-header__logo::after {
    -webkit-mask: linear-gradient(#000 0 0) left / 0% 100% no-repeat;
    mask: linear-gradient(#000 0 0) left / 0% 100% no-repeat;
  }
  html.js .tb-cta.is-seen::after,
  html.js .tb-footer__brand.is-seen .tb-header__logo::after {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition: -webkit-mask-size 1300ms var(--tb-ease-expo) 120ms,
                mask-size 1300ms var(--tb-ease-expo) 120ms;
  }

  /* --- 35d. hero photograph: settles on load, drifts as you leave --- */
  .tb-hero__photo img { animation: tb-photo-in 2400ms var(--tb-ease-quart) both; }

  @supports (animation-timeline: scroll()) {
    .tb-hero__photo {
      animation: tb-photo-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
  }

  /* --- 35e. header tucks away on the way down, returns on the way up --- */
  .tb-header { transition: transform var(--tb-dur) var(--tb-ease); }
  html.js .tb-header.is-tucked { transform: translateY(-100%); }
  body.nav-open .tb-header { transform: none; }

  /* --- 35f. mobile menu items arrive one after another --- */
  @media (max-width: 48rem) {
    body.nav-open .tb-nav:not(.wp-block-navigation) > a {
      animation: tb-menu-in 420ms var(--tb-ease-expo) both;
    }
    body.nav-open .tb-nav:not(.wp-block-navigation) > a:nth-child(1) { animation-delay: 40ms; }
    body.nav-open .tb-nav:not(.wp-block-navigation) > a:nth-child(2) { animation-delay: 80ms; }
    body.nav-open .tb-nav:not(.wp-block-navigation) > a:nth-child(3) { animation-delay: 120ms; }
    body.nav-open .tb-nav:not(.wp-block-navigation) > a:nth-child(4) { animation-delay: 160ms; }
    body.nav-open .tb-nav:not(.wp-block-navigation) > a:nth-child(5) { animation-delay: 200ms; }
    body.nav-open .tb-nav:not(.wp-block-navigation) > a:nth-child(6) { animation-delay: 240ms; }
  }

  /* --- 35g. small interaction feedback --- */
  .tb-btn svg { transition: transform var(--tb-dur-fast) var(--tb-ease); }
  .tb-btn:hover svg { transform: translateX(3px); }
}

@keyframes tb-rule {
  0%   { transform: scaleX(0); opacity: 1; }
  55%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes tb-wipe {
  from { clip-path: inset(0 100% 0 0); transform: scale(1.08); }
  to   { clip-path: inset(0); transform: none; }
}
@keyframes tb-photo-in { from { opacity: 0; transform: scale(1.06); } }
@keyframes tb-photo-drift { to { translate: 0 -9%; } }
@keyframes tb-menu-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* --- 35h. the header names the section being read ------------------ */
/* Live only where there is room between the wordmark and the menu. */
.tb-header__where { display: none; }

@media (min-width: 72rem) {
  /* takes over the logo's auto margin so it sits against the wordmark and
     the menu keeps its place on the right */
  .tb-header__logo { margin-inline-end: 0; }
  .tb-header__where {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 auto 0 var(--tb-space-lg);
    padding-inline-start: var(--tb-space-lg);
    border-inline-start: 1px solid var(--tb-navy-line);
    line-height: 1;
    font-family: var(--tb-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tb-ink-on-navy-weak);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--tb-dur) var(--tb-ease-soft);
  }
  .tb-header__where.is-on { opacity: 1; }

  .tb-header__where b {
    font-family: var(--tb-display);
    font-size: 1.125rem;
    font-weight: 700;
    font-stretch: 85%;
    letter-spacing: -0.02em;
    color: var(--tb-action-400);
    font-variant-numeric: tabular-nums;
  }

  .tb-header__where b,
  .tb-header__where span { transition: opacity 180ms var(--tb-ease-soft), translate 260ms var(--tb-ease); }
  .tb-header__where.is-switching b,
  .tb-header__where.is-switching span { opacity: 0; translate: 0 5px; }
}

/* ============================================================
   36. PHONES AND TABLETS — adapt, don't just shrink
   ============================================================ */

/* tablet: three price tiers stay on one row instead of orphaning the third */
@media (max-width: 64rem) {
  .tb-tiers { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
}

@media (max-width: 48rem) {
  /* the form and the address column were still side by side at phone width */
  .tb-contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--tb-space-2xl); }

  /* 11px is too small on a phone, even for tracked signage */
  .tb-rail__label,
  .tb-svc__tag,
  .tb-detail__tag,
  .tb-sectors__shot figcaption,
  .tb-legal__meta,
  .tb-consent__group .tb-consent__always,
  .tb-svc__also b,
  .tb-tg h3 { font-size: 0.75rem; }

  /* iOS zooms into any field set under 16px */
  .wpforms-field input[type="text"],
  .wpforms-field input[type="email"],
  .wpforms-field input[type="tel"],
  .wpforms-field textarea,
  .wpforms-field select { font-size: max(1rem, 16px); }

  /* consent: a question at the foot of the screen, not a wall across it */
  .tb-consent {
    padding-block: var(--tb-space-md) calc(var(--tb-space-md) + env(safe-area-inset-bottom, 0px));
  }
  .tb-consent__inner { gap: var(--tb-space-sm); }
  .tb-consent__title { font-size: 1.0625rem; }
  .tb-consent__copy p { font-size: 0.8125rem; line-height: 1.45; }
  .tb-consent__actions { gap: var(--tb-space-xs); }
  .tb-consent__actions .tb-btn { min-inline-size: 0; flex: 1 1 7.5rem; padding-block: 0.7rem; white-space: nowrap; }

  /* the phone number belongs in the menu on a phone */
  body.nav-open .tb-nav:not(.wp-block-navigation) .tb-nav__tel {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--tb-space-md);
    padding: 0.85rem 1rem;
    border: 1px solid var(--tb-connect-500);
    border-radius: 2px;
    color: var(--tb-page);
    font-weight: 600;
    min-block-size: 2.75rem;
  }
}

.tb-nav__tel { display: none; }

/* touch: hover transforms must not stick after a tap */
@media (hover: none) {
  .tb-svc:hover .tb-svc__no,
  .tb-tier:hover,
  .tb-other__item:hover,
  .tb-sectors__list li:hover,
  .tb-person:hover .tb-person__mono,
  .tb-btn:hover,
  .tb-btn:hover svg,
  .tb-sectors__shot:hover img,
  .tb-office:hover .tb-office__figure img { transform: none; }
}

a, button, summary, input, textarea, select, label { -webkit-tap-highlight-color: transparent; }
.tb-btn:active { transform: translateY(1px); }

/* --- skip link: invisible until it has keyboard focus ------------------ */
.tb-skip {
  position: absolute;
  inset-inline-start: var(--tb-gutter);
  inset-block-start: -100%;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--tb-action-500);
  color: var(--tb-navy);
  font-family: var(--tb-ui);
  font-weight: 700;
  text-decoration: none;
  border-radius: 2px;
}
.tb-skip:focus-visible { inset-block-start: var(--tb-space-sm); outline-offset: 2px; }

/* the number must never wrap, whatever the menu beside it is doing */
.tb-header__tel { white-space: nowrap; flex: none; }

/* --- WordPress build: the wordmark is drawn by the stylesheet ---------
   Template parts are HTML and cannot resolve the theme's asset URL, but a
   URL in this file resolves relative to this file. Width follows the
   artwork's 900x191 ratio. The static build keeps its <img>. */
:is(span, a).tb-header__wordmark {
  display: block;
  flex: none;
  block-size: 2.25rem;
  inline-size: calc(2.25rem * 4.712);
  background: url("assets/images/trinity-wordmark.png") center / contain no-repeat;
}
.tb-footer__brand :is(span, a).tb-header__wordmark { block-size: 2.5rem; inline-size: calc(2.5rem * 4.712); }
@media (max-width: 48rem) { :is(span, a).tb-header__wordmark { block-size: 1.5rem; inline-size: calc(1.5rem * 4.712); } }
@media (max-width: 22rem) { :is(span, a).tb-header__wordmark { display: none; } }

/* --- form notes: confirmation, failure, and the admin-only setup hint ---- */
.tb-form__note { margin-block: var(--tb-space-md); padding: var(--tb-space-sm) var(--tb-space-md); border-radius: 2px; font-size: 0.9375rem; line-height: 1.5; }
.tb-form__note--ok { background: var(--tb-energy-50); color: var(--tb-energy-700); }
.tb-form__note--fail { background: var(--tb-action-50); color: var(--tb-action-700); }

/* --- WordPress bridge: buttons ---------------------------------------
   Core stretches every button link to 100% inside a Buttons block, which
   turned the hero and CTA pairs into stacked full-width bars. Size to
   content, as the design does, and give the lead button its arrow. */
.wp-block-buttons .wp-block-button.tb-btn > .wp-block-button__link,
.wp-block-buttons .wp-block-button.tb-btn--ghost > .wp-block-button__link,
.wp-block-buttons .wp-block-button.tb-btn--line > .wp-block-button__link {
  width: auto;
  inline-size: auto;
  flex: none;
}
.tb-hero__actions .wp-block-button.tb-btn:first-child > .wp-block-button__link::after {
  content: "";
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--tb-dur-fast) var(--tb-ease);
}
.tb-hero__actions .wp-block-button.tb-btn:first-child > .wp-block-button__link:hover::after { transform: translateX(3px); }

/* ============================================================
   1.1.0 fixes
   ============================================================ */

/* The site logo is 593x504. WordPress lazy-loads the footer copy with
   sizes="auto", and core gives those images contain-intrinsic-size 3000px,
   so with only a height set the footer mark rendered 3000px wide: the
   wordmark was pushed off the page and the trefoil's blue lobe filled the
   bottom-right corner. Give the image both dimensions. */
.tb-header__mark img,
.tb-header__mark.wp-block-site-logo img {
  block-size: 2.25rem;
  inline-size: calc(2.25rem * 593 / 504);
  max-inline-size: none;
  contain-intrinsic-size: auto;
}

/* Core's `.is-layout-flex > :is(*, div) { margin: 0 }` is (0,1,1) and beat
   the auto margins that push the menu to the right, so the menu, phone and
   the mobile toggle all sat against the logo. */
.tb-header__inner > .tb-header__logo { margin-inline-end: auto; }
@media (min-width: 72rem) {
  .tb-header__inner > .tb-header__logo { margin-inline-end: 0; }
  .tb-header__inner > .tb-header__where { margin: 0 auto 0 var(--tb-space-lg); }
}

/* Mobile overlay: WordPress aligns the open menu with the desktop menu
   (right, flush to the edge). Give it the page gutter, left-aligned rows
   at a size a thumb can hit. */
@media (max-width: 599px) {
  .tb-nav .wp-block-navigation__responsive-container.is-menu-open {
    padding: 1.4rem var(--tb-gutter) var(--tb-space-xl);
  }
  .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
    max-inline-size: none;
  }
  .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    position: relative;
    padding-top: 3.5rem;
  }
  .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    top: 0;
    right: 0;
    padding: 0.5rem;
    margin: -0.5rem;
  }
  .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
    inline-size: 1.75rem;
    block-size: 1.75rem;
  }
  .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: stretch;
    padding-top: 0;
  }
  .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    inline-size: 100%;
  }
  .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    inline-size: 100%;
    border-top: 1px solid var(--tb-navy-line);
  }
  .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
    border-bottom: 1px solid var(--tb-navy-line);
  }
  .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: block;
    inline-size: 100%;
    padding-block: var(--tb-space-md);
    font-family: var(--tb-display);
    font-size: var(--tb-text-xl);
    font-weight: 700;
    font-stretch: 89%;
    line-height: 1.2;
  }
  .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
  .tb-nav .wp-block-navigation__responsive-container.is-menu-open [aria-current="page"] { color: var(--tb-action-300); }
}

/* --- 1.1.0: service pages ------------------------------------------------ */

/* "Services" above the title, back to the overview */
.tb-pagehead__meta a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.tb-pagehead__meta a:hover { color: var(--tb-page); }

/* On its own page the article needs neither its overview number nor the
   link to itself. */
.tb-service .tb-detail__no,
.tb-service .tb-detail__head h3,
.tb-service .tb-detail__more { display: none; }
/* with the repeated heading gone, the photo lines up with the rail */
.tb-service .tb-detail__figure { margin-top: 0; }
.tb-service .tb-split__body > .tb-detail { border-bottom: 0; }

.tb-detail__more { margin-top: var(--tb-space-lg); }
.tb-detail__more a {
  font-family: var(--tb-ui);
  font-weight: 600;
  color: var(--tb-action-700);
  text-decoration: none;
  border-bottom: 1px solid var(--tb-action-300);
}
.tb-detail__more a::after { content: " \2192"; }
.tb-detail__more a:hover { border-bottom-color: var(--tb-action-700); }

.tb-other__item h3 a { color: inherit; text-decoration: none; }
.tb-other__item h3 a:hover { color: var(--tb-accent-ink); }

/* the other five services, as cards */
.tb-other .tb-wrap > h2 { margin-block: var(--tb-space-xs) var(--tb-space-xl); }
.tb-svclinks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); /* five cards: 3 + 2, never 4 + 1 */
  gap: var(--tb-space-md);
}
.tb-svclinks__item a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tb-space-xs);
  block-size: 100%;
  padding: var(--tb-space-lg) 3.25rem var(--tb-space-lg) var(--tb-space-lg);
  background: var(--tb-page);
  border-top: 3px solid var(--tb-accent);
  color: var(--tb-ink);
  text-decoration: none;
  transition: background var(--tb-dur-fast) var(--tb-ease-soft), transform var(--tb-dur) var(--tb-ease-soft);
}
.tb-svclinks__item a:hover { background: var(--tb-accent-wash); transform: translateY(-2px); }
.tb-svclinks__name { font-family: var(--tb-display); font-size: var(--tb-text-lg); font-weight: 700; font-stretch: 93%; line-height: 1.2; }
.tb-svclinks__desc { color: var(--tb-ink-muted); font-size: 0.9375rem; }
.tb-svclinks__go { position: absolute; inset-block-start: var(--tb-space-lg); inset-inline-end: var(--tb-space-lg); color: var(--tb-accent-ink); }
.tb-svclinks__go svg { inline-size: 1.1rem; block-size: 1.1rem; transition: transform var(--tb-dur-fast) var(--tb-ease); }
.tb-svclinks__item a:hover .tb-svclinks__go svg { transform: translateX(3px); }
@media (hover: none) { .tb-svclinks__item a:hover { transform: none; } }

/* --- 1.1.1: no optional cookies, so nothing reopens a consent banner --- */
.tb-no-consent [data-tb-consent-open],
.tb-no-consent .tb-consent { display: none !important; }

/* --- 1.1.0: contact form ------------------------------------------------- */
.tb-form { display: grid; gap: var(--tb-space-md); }
.tb-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tb-space-md); }
@media (max-width: 40rem) { .tb-form__grid { grid-template-columns: minmax(0, 1fr); } }

.tb-field { display: grid; gap: 0.4rem; }
.tb-field__label { font-family: var(--tb-ui); font-weight: 600; font-size: 0.9375rem; color: var(--tb-ink); }
.tb-field__opt { font-weight: 400; color: var(--tb-ink-muted); }
.tb-field__hint { margin: 0; font-size: 0.8125rem; color: var(--tb-ink-muted); }
.tb-field__error { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--tb-action-700); }

.tb-field input[type="text"],
.tb-field input[type="email"],
.tb-field input[type="tel"],
.tb-field select,
.tb-field textarea {
  inline-size: 100%;
  padding: 0.8em 1em;
  background: var(--tb-page);
  border: 1px solid var(--tb-line-strong);
  border-radius: 2px;
  font-family: var(--tb-ui);
  font-size: max(1rem, 16px); /* 16px stops iOS zooming into the field */
  color: var(--tb-ink);
}
.tb-field textarea { resize: vertical; min-block-size: 8rem; }
.tb-field select {
  appearance: none;
  padding-inline-end: 2.5em;
  background: var(--tb-page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D717C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 0.9em center / 1.1em no-repeat;
}
.tb-field input:focus-visible,
.tb-field select:focus-visible,
.tb-field textarea:focus-visible {
  outline: 2px solid var(--tb-action-500);
  outline-offset: 2px;
  border-color: transparent;
}
.tb-field.has-error input,
.tb-field.has-error select,
.tb-field.has-error textarea { border-color: var(--tb-action-600); border-width: 2px; }

.tb-field input[type="file"] {
  inline-size: 100%;
  padding: var(--tb-space-md);
  background: var(--tb-page);
  border: 1px dashed var(--tb-line-strong);
  border-radius: 2px;
  font-family: var(--tb-ui);
  font-size: 0.9375rem;
  color: var(--tb-ink-muted);
  cursor: pointer;
}
.tb-field input[type="file"]:hover { border-color: var(--tb-action-500); }
.tb-field input[type="file"]::file-selector-button {
  margin-inline-end: var(--tb-space-md);
  padding: 0.6em 1.1em;
  background: var(--tb-navy);
  color: var(--tb-page);
  border: 0;
  border-radius: 2px;
  font: 600 0.875rem var(--tb-ui);
  cursor: pointer;
}

.tb-form__trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tb-form__legal { margin: 0; font-size: 0.8125rem; color: var(--tb-ink-muted); }
.tb-form__legal a { color: var(--tb-action-700); }
.tb-form__submit {
  justify-self: start;
  padding: 0.85em 1.6em;
  background: var(--tb-action-400);
  color: var(--tb-navy);
  font-family: var(--tb-ui);
  font-weight: 600;
  font-size: var(--tb-text-base);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.tb-form__submit:hover { background: var(--tb-action-300); }
.tb-form__note a { color: inherit; font-weight: 600; }

/* --- 1.1.3: Services dropdown --------------------------------------------- */
/* Core paints submenus white with a grey border at (0,3,0); match the bar. */
header .tb-nav.wp-block-navigation .wp-block-navigation__submenu-container {
  min-inline-size: 17rem;
  padding: 0.4rem 0;
  background: var(--tb-navy);
  color: var(--tb-page);
  border: 1px solid var(--tb-navy-line);
  border-top: 2px solid var(--tb-action-400);
  box-shadow: 0 18px 40px -12px rgb(10 14 26 / 0.55);
}
header .tb-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 0.7rem 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.35;
  white-space: normal;
  color: var(--tb-ink-on-navy);
}
header .tb-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
header .tb-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background: var(--tb-navy-soft);
  color: var(--tb-page);
}
header .tb-nav .wp-block-navigation__submenu-container a::after { display: none; }
header .tb-nav .wp-block-navigation__submenu-icon { color: currentColor; margin-inline-start: 0.3rem; }

/* Phone overlay: the submenu is always open there, as an indented list
   under Services rather than more full-size rows. */
@media (max-width: 599px) {
  header .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    min-inline-size: 0;
    padding: 0 0 var(--tb-space-sm);
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  header .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
    border: 0;
  }
  header .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.55rem 0 0.55rem var(--tb-space-md);
    font-family: var(--tb-ui);
    font-size: 1.0625rem;
    font-weight: 500;
    font-stretch: normal;
    color: var(--tb-ink-on-navy);
    border-inline-start: 2px solid var(--tb-navy-line);
  }
  header .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
    padding-bottom: var(--tb-space-sm);
  }
}

/* the unpaged services, under the cards at the foot of a service page */
.tb-svclinks + .tb-svc__also { margin-top: var(--tb-space-lg); }
/* one line per service: core fixes the panel at 200px, which wrapped two of them */
header .tb-nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  inline-size: 22rem;
  min-inline-size: 0;
  max-inline-size: calc(100vw - 2rem);
}
@media (max-width: 599px) {
  header .tb-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
    inline-size: auto;
    max-inline-size: none;
    padding-inline-start: 0;
    margin-inline-start: 0.15rem;
  }
  header .tb-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { white-space: normal; }
}

/* --- 1.1.6: Services opens its dropdown ----------------------------------- */
/* The menu now opens submenus on click, so a tap on a phone, tablet or touch
   laptop opens the dropdown instead of leaving the page. With a mouse it
   still opens on hover, as it did. */
@media (hover: hover) and (min-width: 600px) {
  header .tb-nav .has-child.open-on-click:hover > .wp-block-navigation__submenu-container,
  header .tb-nav .has-child.open-on-click:focus-within > .wp-block-navigation__submenu-container {
    visibility: visible;
    opacity: 1;
    overflow: visible;
    block-size: auto;
    inline-size: 22rem;
  }
}
/* the Services button matches the links beside it, underline included */
header .tb-nav .wp-block-navigation-submenu__toggle {
  position: relative;
  padding: 0.5rem 0;
  font-family: var(--tb-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: inherit;
  color: var(--tb-page);
  background: none;
  border: 0;
  cursor: pointer;
}
header .tb-nav .wp-block-navigation-submenu__toggle::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  block-size: 2px;
  background: var(--tb-action-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tb-dur-fast) var(--tb-ease);
}
header .tb-nav .has-child:hover > .wp-block-navigation-submenu__toggle::after,
header .tb-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"]::after,
header .tb-nav .current-menu-ancestor > .wp-block-navigation-submenu__toggle::after,
header .tb-nav .current-menu-item > .wp-block-navigation-submenu__toggle::after { transform: scaleX(1); }
@media (max-width: 599px) {
  header .tb-nav .is-menu-open .wp-block-navigation-submenu__toggle {
    padding-block: var(--tb-space-md) var(--tb-space-sm);
    font-family: var(--tb-display);
    font-size: var(--tb-text-xl);
    font-weight: 700;
    font-stretch: 89%;
    line-height: 1.2;
    cursor: default;
  }
  header .tb-nav .is-menu-open .wp-block-navigation-submenu__toggle::after { display: none; }
}
/* the wordmark is now a link home */
a.tb-header__wordmark { cursor: pointer; }

/* ============================================================
   1.2.0 — polish pass (desktop and mobile)
   From a measured audit of every page at 1440 and 390: spacing rhythm,
   touch targets, small type, wrapping, and one card grid that broke the
   "rows, not boxes" principle.
   ============================================================ */

/* --- wrapping: no one-word last lines in running text ------------------- */
p, li, dd, figcaption, .tb-lede { text-wrap: pretty; }

/* --- rhythm: two light bands in a row doubled their padding into a ~240px
   gutter. The second band starts closer; navy bands keep full padding. ---- */
main > .tb-section:not(.tb-hero, .tb-tg, .tb-process, .tb-cta)
  + .tb-section:not(.tb-tg, .tb-process, .tb-cta, .tb-dro) {
  padding-top: calc(var(--tb-section) * 0.6);
}

/* --- hero ---------------------------------------------------------------- */
/* the list's default 40px indent pushed the facts off the text edge */
.tb-hero__facts { list-style: none; padding-inline-start: 0; }
@media (max-width: 48rem) {
  /* one fact per line rather than a ragged 1 + 2 wrap */
  .tb-hero__facts { display: grid; gap: var(--tb-space-sm); }
  /* stacked buttons share one width */
  .tb-hero__actions { flex-direction: column; align-items: stretch; }
  .tb-hero__actions .wp-block-button,
  .tb-hero__actions .wp-block-button__link { inline-size: 100%; justify-content: center; text-align: center; }
}

/* --- About: the office photo sat flush against the paragraph above -------- */
.tb-split__body > .tb-intro__figure,
.tb-intro__figure { margin-top: var(--tb-space-xl); }

/* --- "Other services" on a service page: rows under an accent rule, like
   every other list on the site, not white cards --------------------------- */
.tb-svclinks { gap: var(--tb-space-md) var(--tb-space-xl); }
.tb-svclinks__item a {
  padding: var(--tb-space-md) 2.25rem var(--tb-space-md) 0;
  background: none;
  border-top: 2px solid var(--tb-accent);
}
.tb-svclinks__item a:hover { background: none; transform: none; }
.tb-svclinks__item a:hover .tb-svclinks__name { color: var(--tb-accent-ink); }
.tb-svclinks__go { inset-inline-end: 0; inset-block-start: var(--tb-space-md); }

/* --- touch targets on phones (44px) -------------------------------------- */
@media (max-width: 48rem) {
  .tb-nav .wp-block-navigation__responsive-container-open,
  .tb-nav .wp-block-navigation__responsive-container-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    margin-inline-end: -0.625rem; /* keeps the icon on the gutter line */
  }
  .tb-nav .wp-block-navigation__responsive-container-open svg { inline-size: 1.75rem; block-size: 1.75rem; }

  /* the mark is 36px tall; widen its hit area rather than its drawing */
  .tb-header .custom-logo-link { position: relative; display: block; }
  .tb-header .custom-logo-link::after { content: ""; position: absolute; inset: -0.25rem; }

  .tb-footer__links a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }

  .tb-footer ul { gap: 0; }
  .tb-footer ul a { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-block: 0; }

  .tb-contact__row a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }

  /* "Also available": label on its own line, links as full-height targets */
  .tb-svc__also { row-gap: 0; }
  .tb-svc__also b { flex-basis: 100%; margin-bottom: var(--tb-space-2xs); }
  .tb-svc__also a { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-bottom: 0; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--tb-line-strong); text-underline-offset: 0.3em; }

  /* the 11px contact labels were the smallest type on the site */
  .tb-contact__row h3 { font-size: 0.75rem; }
}

/* ============================================================
   1.3.0 — About: mission, director and values (replaces the team)
   ============================================================ */

/* the mission reads as the section's headline sentence */
.tb-mission__statement {
  font-family: var(--tb-display);
  font-size: var(--tb-text-xl);
  font-weight: 600;
  font-stretch: 93%;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--tb-ink);
  max-width: 34ch;
  padding-top: var(--tb-space-lg);
  border-top: 3px solid var(--tb-accent);
  text-wrap: balance;
}

.tb-mission__grid {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--tb-space-2xl);
  align-items: start;
  margin-top: var(--tb-space-2xl);
}
@media (max-width: 40rem) {
  .tb-mission__grid { grid-template-columns: minmax(0, 1fr); gap: var(--tb-space-xl); }
  .tb-director { max-inline-size: 16rem; }
}

/* the director: greyscale portrait, name and role on a rule beneath */
.tb-director { margin: 0; }
.tb-director img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--tb-navy);
}
.tb-director figcaption {
  display: grid;
  gap: 0.15rem;
  margin-top: var(--tb-space-sm);
  padding-top: var(--tb-space-sm);
  border-top: 2px solid var(--tb-accent);
}
.tb-director__name { font-family: var(--tb-display); font-size: var(--tb-text-lg); font-weight: 700; font-stretch: 93%; color: var(--tb-ink); }
.tb-director__role {
  font-family: var(--tb-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tb-ink-muted);
}

/* values: the label is the value, the line beneath is what it means */
.tb-values__list .tb-pillar__no { text-transform: uppercase; }
.tb-values__list .tb-pillar h3 { font-size: var(--tb-text-lg); max-width: none; }

/* ============================================================
   1.4.0 — colour-graded photography
   Every photograph takes the colour of the section it sits in: green for
   energy, blue for connectivity, orange for action. The picture is part
   desaturated, then a gradient of that colour (bright to deep) is laid over
   it in the `color` blend mode, which swaps the hue while keeping the
   photograph's own light and shade. The colour classes (.tb-energy,
   .tb-connect, .tb-action) set the shades, so nothing here names a colour.
   ============================================================ */

:is(.tb-detail__figure, .tb-office__figure, .tb-sectors__shot, .tb-intro__figure, .tb-contact__figure, .tb-director) {
  position: relative;
  isolation: isolate;
}
:is(.tb-detail__figure, .tb-office__figure, .tb-sectors__shot, .tb-intro__figure, .tb-contact__figure, .tb-director) img {
  filter: saturate(0.35) contrast(1.06);
  transition: filter 600ms var(--tb-ease-soft), transform 1.1s var(--tb-ease-quart);
}
:is(.tb-detail__figure, .tb-office__figure, .tb-sectors__shot, .tb-intro__figure, .tb-contact__figure, .tb-director)::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(150deg, var(--tb-accent-bright) 0%, var(--tb-accent-ink) 60%, var(--tb-accent-deep) 110%);
  mix-blend-mode: color;
  opacity: 0.5;
  transition: opacity 600ms var(--tb-ease-soft);
}
/* figures with a caption underneath: the grade covers the picture only */
.tb-intro__figure::before   { inset: 0 0 auto; aspect-ratio: 4 / 3; }
.tb-contact__figure::before { inset: 0 0 auto; aspect-ratio: 3 / 2; }
.tb-director::before        { inset: 0 0 auto; aspect-ratio: 4 / 5; }
/* the sector label sits above the grade */
.tb-sectors__shot figcaption { z-index: 2; }

/* pointing at a photograph lets a little more of its own colour back in */
@media (hover: hover) {
  :is(.tb-detail, .tb-office, .tb-sectors__shot, .tb-intro__figure, .tb-contact__figure, .tb-director):hover :is(img) { filter: saturate(0.6) contrast(1.04); }
  :is(.tb-sectors__shot, .tb-intro__figure, .tb-contact__figure, .tb-director):hover::before,
  :is(.tb-detail, .tb-office):hover :is(.tb-detail__figure, .tb-office__figure)::before { opacity: 0.32; }
}

/* the three sectors carry one colour each, as the trefoil does */
.tb-sectors__shot:nth-child(3n + 1) { --tb-accent-bright: var(--tb-action-400);  --tb-accent-ink: var(--tb-action-700);  --tb-accent-deep: var(--tb-action-900); }
.tb-sectors__shot:nth-child(3n + 2) { --tb-accent-bright: var(--tb-energy-500);  --tb-accent-ink: var(--tb-energy-700);  --tb-accent-deep: var(--tb-energy-900); }
.tb-sectors__shot:nth-child(3n + 3) { --tb-accent-bright: var(--tb-connect-500); --tb-accent-ink: var(--tb-connect-700); --tb-accent-deep: var(--tb-connect-900); }

/* the hero skyline: a blue grade inside its existing fade */
.tb-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--tb-connect-500), var(--tb-connect-900));
  mix-blend-mode: color;
  opacity: 0.55;
}

/* the guarantee is the action colour: an orange glow rises behind the scope list */
.tb-tg {
  background-image:
    radial-gradient(ellipse 55% 70% at 88% 75%, rgb(240 141 54 / 0.22), transparent 70%),
    linear-gradient(95deg,
      rgba(21, 29, 51, 0.985) 0%,
      rgba(21, 29, 51, 0.965) 42%,
      rgba(21, 29, 51, 0.86) 72%,
      rgba(21, 29, 51, 0.72) 100%),
    url("assets/images/img-guarantee.webp");
  background-size: auto, auto, cover;
  background-position: center, center, 60% 46%;
  background-repeat: no-repeat;
}
@media (max-width: 64rem) {
  .tb-tg {
    background-image:
      radial-gradient(ellipse 90% 45% at 50% 100%, rgb(240 141 54 / 0.2), transparent 70%),
      linear-gradient(180deg, rgba(21, 29, 51, 0.975) 0%, rgba(21, 29, 51, 0.93) 100%),
      url("assets/images/img-guarantee.webp");
  }
}

/* ============================================================
   1.5.0 — the menu in colour
   Each item carries the colour of what it leads to: About green, Services
   blue, Contact orange (the action colour), Home neutral. In the Services
   dropdown every service has its own icon, drawn in the same set as the
   site's wifi, leaf and bolt, and a one-line description.
   ============================================================ */

:root {
  --tb-icon-mobile: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><path fill='black' fill-rule='evenodd' d='M 46 8 H 74 A 10 10 0 0 1 84 18 V 102 A 10 10 0 0 1 74 112 H 46 A 10 10 0 0 1 36 102 V 18 A 10 10 0 0 1 46 8 Z M 44 20 V 88 H 76 V 20 Z M 60 94 A 5 5 0 1 0 60 104 A 5 5 0 1 0 60 94 Z'/></svg>");
  --tb-icon-all: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><circle cx='60' cy='36' r='22' fill='black'/><circle cx='36' cy='78' r='22' fill='black'/><circle cx='84' cy='78' r='22' fill='black'/></svg>");
}

/* colour per destination */
header .tb-nav { --nav-c: var(--tb-page); --nav-lift: var(--tb-page); }
header .tb-nav a[href$="/about/"] { --nav-c: var(--tb-energy-500); --nav-lift: var(--tb-energy-300); }
header .tb-nav .wp-block-navigation-submenu__toggle,
header .tb-nav a[href$="/services/"] { --nav-c: var(--tb-connect-500); --nav-lift: var(--tb-connect-300); }
header .tb-nav a[href$="/contact/"] { --nav-c: var(--tb-action-400); --nav-lift: var(--tb-action-300); }
header .tb-nav a[href*="/services/business-energy/"] { --nav-c: var(--tb-energy-500); --nav-lift: var(--tb-energy-300); --nav-icon: var(--tb-icon-energy); }
header .tb-nav a[href*="/services/business-telecoms/"] { --nav-c: var(--tb-connect-500); --nav-lift: var(--tb-connect-300); --nav-icon: var(--tb-icon-mobile); }
header .tb-nav a[href*="/services/connectivity-communications/"] { --nav-c: var(--tb-connect-500); --nav-lift: var(--tb-connect-300); --nav-icon: var(--tb-icon-connect); }
header .tb-nav a[href*="/services/cost-reduction-reviews/"] { --nav-c: var(--tb-action-400); --nav-lift: var(--tb-action-300); --nav-icon: var(--tb-icon-action); }
header .tb-nav .wp-block-navigation__submenu-container a[href$="/services/"] { --nav-c: var(--tb-page); --nav-lift: var(--tb-page); --nav-icon: var(--tb-icon-all); }

/* top level: the underline and the hover take the item's colour */
header .tb-nav .wp-block-navigation__container > li > .wp-block-navigation-item__content::after,
header .tb-nav .wp-block-navigation-submenu__toggle::after { background: var(--nav-c); }
header .tb-nav .wp-block-navigation__container > li > a.wp-block-navigation-item__content:hover,
header .tb-nav .wp-block-navigation__container > li > .wp-block-navigation-submenu__toggle:hover,
header .tb-nav .has-child:hover > .wp-block-navigation-submenu__toggle,
header .tb-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] { color: var(--nav-lift); }
header .tb-nav .wp-block-navigation__container > li > .wp-block-navigation-item__content { transition: color var(--tb-dur-fast) var(--tb-ease-soft); }

/* dropdown rows: icon, name, and the line beneath */
header .tb-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: start;
  padding: 0.75rem 1.1rem;
  white-space: normal;
  box-shadow: inset 2px 0 0 transparent;
  transition: background-color var(--tb-dur-fast) var(--tb-ease-soft), box-shadow var(--tb-dur-fast) var(--tb-ease-soft), color var(--tb-dur-fast) var(--tb-ease-soft);
}
header .tb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
  content: "";
  grid-row: 1 / span 2;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-top: 0.05rem;
  background: var(--nav-lift);
  -webkit-mask: var(--nav-icon, var(--tb-icon-all)) center / contain no-repeat;
  mask: var(--nav-icon, var(--tb-icon-all)) center / contain no-repeat;
  opacity: 0.85;
  transition: opacity var(--tb-dur-fast) var(--tb-ease-soft), transform var(--tb-dur) var(--tb-ease);
}
header .tb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
  grid-column: 2;
  font-weight: 600;
  line-height: 1.25;
}
header .tb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
  grid-column: 2;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--tb-ink-on-navy);
  opacity: 0.78;
}
header .tb-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
header .tb-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background: color-mix(in srgb, var(--nav-c) 15%, var(--tb-navy));
  box-shadow: inset 2px 0 0 var(--nav-c);
  color: var(--tb-page);
}
header .tb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .wp-block-navigation-item__label { color: var(--nav-lift); }
header .tb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::before { opacity: 1; transform: scale(1.08); }
/* the first entry leads out to the overview, so a rule sets it apart */
header .tb-nav .wp-block-navigation__submenu-container > li:first-child { border-bottom: 1px solid var(--tb-navy-line); }

@media (prefers-reduced-motion: reduce) {
  header .tb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::before { transform: none; }
}

/* phone overlay: icons stay, descriptions go, the rows stay compact */
@media (max-width: 599px) {
  header .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__description { display: none; }
  header .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: center;
    padding: 0.6rem 0 0.6rem var(--tb-space-md);
    box-shadow: none;
  }
  header .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before { grid-row: auto; inline-size: 1.25rem; block-size: 1.25rem; margin: 0; }
  header .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li:first-child { border-bottom: 0; }
}
/* core hides menu descriptions unless the theme shows them */
header .tb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__description { display: block; }
/* the panel is Services, so its top rule is Services blue */
header .tb-nav.wp-block-navigation .wp-block-navigation__submenu-container { border-top-color: var(--tb-connect-500); }
@media (max-width: 599px) {
  header .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__description { display: none; }
}
@media (max-width: 599px) {
  /* the overlay lays rows out as flex; a long name was squeezing its icon */
  header .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { gap: 0.85rem; align-items: center; }
  header .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before { flex: none; }
}
/* core styles these rows as flex, so the layout is built on flex: icon,
   name beside it, description wrapping onto its own line under the name */
header .tb-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 0.85rem;
}
header .tb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before { flex: none; }
header .tb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__label { flex: 1 1 0; min-inline-size: 0; }
header .tb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__description { flex: 0 0 100%; padding-inline-start: calc(1.5rem + 0.85rem); }
/* the 24px icon set the first line's height and pushed the description down */
header .tb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before { margin-bottom: -0.4rem; }

/* --- 1.5.1: the hero trefoil on phones and tablets ----------------------
   Below 64rem it used to be pushed off the bottom-right corner at 32%
   opacity, a faded crop. Now the whole mark, in full colour, sits beside
   the three facts at the foot of the hero, lined up with them. The facts
   only fill the left of the row, so it has room without crowding them. */
@media (max-width: 64rem) {
  .tb-hero__inner { padding-block-end: var(--tb-space-2xl); }
  .tb-hero__mark {
    inset: auto var(--tb-gutter) var(--tb-space-2xl) auto;
    translate: none;
    opacity: 1;
    inline-size: min(30vw, 9.5rem);
  }
  .tb-hero__mark::before { inset: -30%; }
}
/* on narrow screens the skyline's blue grade read as a bright block top right */
@media (max-width: 64rem) { .tb-hero__photo::after { opacity: 0.3; } }
/* tablet landscape and small laptops: the facts sit on one line there, so the
   mark would straddle their rule. Give the copy a column and centre the mark
   in the space beside it instead, whole and in view. */
@media (min-width: 48.01rem) and (max-width: 64rem) {
  .tb-hero { --tb-hero-mark: min(24vw, 15rem); }
  /* the copy column takes what the mark and a 3rem gap leave */
  .tb-hero__content { max-width: min(34rem, calc(100% - var(--tb-hero-mark) - 3rem)); }
  .tb-hero__mark {
    inset: 50% var(--tb-gutter) auto auto;
    translate: 0 -50%;
    inline-size: var(--tb-hero-mark);
  }
}

/* --- 1.5.3: photographs kept in black and white --------------------------
   .tb-mono opts a picture out of the colour grade: no hue layer, and the
   hover does not bring colour back. Used for the director and the Newcastle
   photograph. (Doubled class so it outranks the grade's hover rule.) */
.tb-mono.tb-mono img { filter: grayscale(1) contrast(1.06); }
.tb-mono.tb-mono::before { display: none; }

/* --- 1.6.0: Trinity Guarantee terms page --------------------------------- */
.tb-legal__lead { color: var(--tb-ink); font-size: var(--tb-text-lg); max-inline-size: var(--tb-measure); margin-bottom: var(--tb-space-xl); }
.tb-legal__section strong { color: var(--tb-ink); font-weight: 600; }
.tb-legal__address { font-style: normal; margin-top: var(--tb-space-md); line-height: 1.7; color: var(--tb-ink-muted); }
.tb-legal__address a { color: var(--tb-accent-ink); }
/* the closing notice is the part people must not miss */
.tb-legal__notice {
  margin-top: var(--tb-space-2xl);
  padding: var(--tb-space-xl);
  background: var(--tb-accent-wash);
  border-top: 3px solid var(--tb-accent);
}
.tb-legal__section.tb-legal__notice + .tb-legal__section,
.tb-legal__section + .tb-legal__section.tb-legal__notice { border-top-width: 3px; }
/* the guarantee band's small print links to the terms */
.tb-tg__terms a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.tb-tg__terms a:hover { color: var(--tb-action-300); }
/* the notice heading is short; it does not need the section heading's measure */
.tb-legal__notice > h2 { max-inline-size: none; }

/* --- 1.6.0: FAQ groups and longer answers -------------------------------- */
.tb-faq__group {
  margin: var(--tb-space-2xl) 0 var(--tb-space-xs);
  font-family: var(--tb-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tb-accent-ink);
}
.tb-faq__group:first-child { margin-top: var(--tb-space-md); }
.tb-faq__answer p + p,
.tb-faq__answer p + ul,
.tb-faq__answer ul + p { margin-top: var(--tb-space-sm); }
.tb-faq__answer ul { margin: 0; padding-inline-start: 1.25rem; }
.tb-faq__answer li + li { margin-top: var(--tb-space-2xs); }
.tb-faq__answer li::marker { color: var(--tb-accent); }
.tb-faq__answer strong { color: var(--tb-ink); font-weight: 600; }

/* --- 1.6.2: black-and-white photographs take neutral rules --------------
   The green rules above and below the Newcastle photograph made a greyscale
   picture read as green. Around a .tb-mono picture the accent is navy. */
.tb-mono,
.tb-office:has(.tb-mono) { --tb-accent: var(--tb-navy); --tb-accent-ink: var(--tb-ink); }

/* --- 1.6.3: the dropdown is the same on every page ------------------------
   It used to light up the page you were on (Energy green on the Energy page,
   and so on), so it looked different from page to page. It no longer
   changes with the page; hover still colours each row. The only page-aware
   mark left is the top-level underline, which looks the same everywhere.
   (The phone overlay's generic current-page colour is kept off the
   dropdown's rows.) */
header .tb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] { color: var(--tb-ink-on-navy); }

/* --- 1.7.0: downloadable LOA template ------------------------------------ */
:root {
  --tb-icon-doc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><path fill='black' fill-rule='evenodd' d='M 30 8 H 72 L 94 30 V 104 A 8 8 0 0 1 86 112 H 30 A 8 8 0 0 1 22 104 V 16 A 8 8 0 0 1 30 8 Z M 34 20 V 100 H 82 V 38 H 64 V 20 Z M 44 54 H 72 V 62 H 44 Z M 44 70 H 72 V 78 H 44 Z M 44 86 H 62 V 94 H 44 Z'/></svg>");
}
.tb-download {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tb-space-md) var(--tb-space-lg);
  margin-top: var(--tb-space-lg);
  padding: var(--tb-space-lg);
  background: var(--tb-page);
  border-top: 3px solid var(--tb-accent);
  scroll-margin-top: 7rem;
}
.tb-download__icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  background: var(--tb-accent-ink);
  -webkit-mask: var(--tb-icon-doc) center / contain no-repeat;
  mask: var(--tb-icon-doc) center / contain no-repeat;
}
.tb-download__title { font-family: var(--tb-display); font-size: var(--tb-text-lg); font-weight: 700; font-stretch: 93%; color: var(--tb-ink); line-height: 1.2; }
.tb-download__text p + p { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--tb-ink-muted); }
.tb-download__text a { color: var(--tb-action-700); }
.tb-download__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8em 1.5em;
  background: var(--tb-action-400);
  color: var(--tb-navy);
  font-family: var(--tb-ui);
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
  white-space: nowrap;
  transition: background var(--tb-dur-fast) var(--tb-ease-soft);
}
.tb-download__btn span { font-size: 0.75rem; font-weight: 500; opacity: 0.8; }
.tb-download__btn:hover { background: var(--tb-action-300); }
@media (max-width: 40rem) {
  .tb-download { grid-template-columns: auto minmax(0, 1fr); }
  .tb-download__btn { grid-column: 1 / -1; min-block-size: 2.75rem; }
}