/* Trinity Skills Solutions: site styles.
   Mobile-first. Breakpoints: 761px (tablet) and 1025px (desktop). */

/* ---------- Font ---------- */

/* Manrope (SIL OFL, see assets/fonts/OFL.txt), self-hosted from Google Fonts' latin subset.
   One variable file covers weights 500–800; same-origin keeps it off the slow critical path. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-v20-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  /* Colour */
  --bg:        #FFFFFF;
  --fg:        #141824;
  --muted:     #4A4F5E;
  --gold:      #E2BE62;
  --gold-mid:  #B8892E;
  --gold-dark: #7A5710;
  --cream:     #F4EEE0;
  --card:      #F9F5EA;
  --navy:      #141824;
  --navy-2:    #161A24;
  --footer-fg: #E9E4D8;
  --line:      rgba(20,24,36,.14);
  --line-dark: rgba(255,255,255,.2);
  --error:     #B42318;

  /* Type */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Shape */
  --radius:      24px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* Layout */
  --container: 1200px;
  --gutter: 22px;
  --header-h: 68px;
  --ease: 180ms ease;
}

@media (min-width: 761px) {
  :root { --gutter: 40px; --header-h: 84px; }
}

@media (min-width: 1025px) {
  :root { --gutter: 56px; }
}

/* ---------- Reset and base ---------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1025px) {
  body { font-size: 17px; }
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 { font-weight: 800; color: inherit; }

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

a { color: inherit; text-decoration: none; }

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

[id] { scroll-margin-top: 100px; }

::selection { background: var(--gold); color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--gold-mid);
  outline-offset: 3px;
}

/* On gold backgrounds the gold-mid ring is too faint, so use navy. */
.hero :focus-visible,
.page-hero :focus-visible { outline-color: var(--navy); }

/* ---------- Utilities ---------- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

.text-center { text-align: center; }

/* Inline Lucide icons (assets/icons, ISC licence). They stroke with currentColor. */
.icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
}

.narrow {
  max-width: 760px;
  margin-inline: auto;
}

/* ---------- Typography ---------- */

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

@media (min-width: 1025px) {
  .eyebrow { font-size: 13px; letter-spacing: .22em; }
}

.section--navy .eyebrow { color: var(--gold); }

h2,
.h2 {
  font-size: clamp(2.125rem, 1.644rem + 1.975vw, 3rem);
  line-height: 1.07;
  letter-spacing: -.01em;
}

.eyebrow + h2 { margin-top: 10px; }

@media (min-width: 1025px) {
  .eyebrow + h2 { margin-top: 14px; }
}

.h2-lg { font-size: clamp(2.125rem, 1.548rem + 2.37vw, 3.25rem); line-height: 1.05; }

.lead {
  margin-top: 20px;
  font-size: 17px;
  color: var(--muted);
}

.section--navy .lead { color: inherit; opacity: .85; }

.text-link {
  display: inline-block;
  padding-block: 2px;   /* a 24px tap height */
  font-weight: 700;
  color: var(--gold-dark);
  transition: color var(--ease);
}

.text-link:hover { color: var(--fg); }

.section--navy .text-link { color: var(--gold); }
.section--navy .text-link:hover { color: #fff; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 32px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--ease), background-color var(--ease), color var(--ease), box-shadow var(--ease);
}

.btn:hover { transform: translateY(-1px); }

.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: #000; }

.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: #EBCB78; }

.btn--outline {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
}

.btn--sm {
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
}

.btn[disabled] { opacity: .7; cursor: progress; transform: none; }

/* Full width on mobile only. */
@media (max-width: 760px) {
  .btn--block-mobile { display: flex; width: 100%; white-space: normal; }
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid rgba(20,24,36,.1);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--gold-dark);
}

.brand-mark {
  width: auto;
  height: 36px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .12em;
}

.brand-sub { display: none; }

.nav-toggle {
  display: grid;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 13px 8px;
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.nav-toggle span:last-child { width: 60%; justify-self: end; }

/* Mobile: the nav is a dropdown panel under the header bar. */
.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px var(--gutter) 24px;
  background: #fff;
  border-bottom: 1px solid rgba(20,24,36,.1);
  box-shadow: 0 24px 40px -24px rgba(20,24,36,.35);
}

.site-header.is-open .site-nav { display: block; }

.nav-links a {
  display: block;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

.nav-links a[aria-current="page"] { color: var(--gold-dark); }

.nav-cta { margin-top: 20px; }
.nav-cta .btn { display: flex; width: 100%; }

.header-cta { display: none; }

@media (min-width: 761px) {
  .brand { gap: 14px; }
  .brand-mark { height: 46px; }
  .brand-name { font-size: 26px; letter-spacing: .14em; }
  .brand-sub {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    letter-spacing: .2em;
  }

  .nav-toggle { display: none; }

  .site-nav {
    display: block;
    position: static;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }

  .nav-links { display: flex; gap: 24px; }

  .nav-links a {
    padding: 6px 0;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: border-color var(--ease);
  }

  .nav-links a:hover { border-bottom-color: var(--line); }

  .nav-links a[aria-current="page"] {
    color: inherit;
    border-bottom-color: var(--gold-mid);
  }

  .nav-cta { display: none; }
}

@media (min-width: 1025px) {
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .nav-links { gap: 34px; }

  .header-cta { display: inline-flex; justify-self: end; }
}

/* ---------- Sections ---------- */

.section { padding-block: 48px; }
.section--cream { background: var(--cream); }
.section--navy  { background: var(--navy); color: #fff; }

@media (min-width: 761px) {
  .section { padding-block: 72px; }
}

@media (min-width: 1025px) {
  .section { padding-block: 96px; }
  .section--snug { padding-block: 88px; }
}

.section-head { margin-bottom: 24px; }

.section-intro {
  margin-top: 14px;
  max-width: 380px;
  color: var(--muted);
}

.section-head h2,
.section-head .lead { max-width: 760px; }

@media (min-width: 1025px) {
  .section-head { margin-bottom: 48px; }

  .section-head--split {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
  }

  .section-head--split h2 { max-width: 620px; }
  .section-head--split .section-intro { margin-top: 0; }
}

/* Two columns side by side on desktop, stacked below. */
.split {
  display: grid;
  gap: 32px;
}

@media (min-width: 1025px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }

  .split--wide-gap { gap: 64px; }
  .split--center { align-items: center; }

  /* The Trinity Way diagram needs more width than the text beside it, so its circles keep their shape. */
  .split--way { grid-template-columns: .85fr 1.15fr; }
}

/* ---------- Home hero ---------- */

.hero {
  background: var(--gold);
  color: var(--navy);
  padding-block: 48px 44px;
}

.hero__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* 1.04 leaves room for the descender of "p" in "Empower" above the ascender of "l" in "Build". */
.hero__title {
  margin-top: 16px;
  font-size: clamp(2.5rem, 1.115rem + 5.68vw, 5.375rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.hero__text { margin-top: 20px; opacity: .88; }

.hero__actions .btn { margin-top: 26px; }

@media (min-width: 761px) {
  .hero { padding-block: 72px; }

  .hero__grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 36px;
    align-items: stretch;
  }

  .hero__main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 36px;
  }

  .hero__eyebrow { display: none; }
  .hero__title { margin-top: 0; }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 28px;
  }

  .hero__text {
    margin-top: 0;
    max-width: 420px;
    font-size: 19px;
    font-weight: 500;
    opacity: 1;
  }

  .hero__actions .btn { margin-top: 0; }
}

/* ---------- Inner page hero ---------- */

.page-hero {
  background: var(--gold);
  color: var(--navy);
  padding-block: 48px 44px;
}

.page-hero .eyebrow { color: var(--fg); opacity: .7; }

.page-hero__title {
  margin-top: 16px;
  font-size: clamp(2.5rem, 1.658rem + 3.457vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}

.page-hero__intro {
  margin-top: 20px;
  opacity: .88;
}

.page-hero__title:first-child { margin-top: 0; }

/* Long headlines (Services, Contact) step down a size so they stay within four lines. */
.page-hero__title--long { font-size: clamp(2.25rem, 1.65rem + 2.47vw, 3.375rem); line-height: 1.05; }

.page-hero__actions { margin-top: 28px; }

/* Thank-you and 404: a single centred-height message. */
.page-hero.page-hero--simple { padding-block: 72px; }

@media (min-width: 761px) {
  .page-hero.page-hero--simple { padding-block: 120px; }
}

@media (min-width: 761px) {
  .page-hero { padding-block: 72px; }
  .page-hero__intro { max-width: 640px; font-size: 18px; }
}

@media (min-width: 1025px) {
  .page-hero { padding-block: 84px; }

  .page-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: end;
  }

  .page-hero__title { margin-top: 20px; }
  .page-hero__grid .page-hero__intro { margin-top: 0; }
}

/* ---------- Credibility strip ---------- */

.badge-strip {
  background: var(--navy);
  color: var(--gold);
  padding-block: 18px;
}

.badge-strip ul {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.badge-strip li::before { content: "◆\00a0" / ""; }

@media (min-width: 761px) {
  .badge-strip ul {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }
}

@media (min-width: 1025px) {
  .badge-strip { padding-block: 26px; }
  .badge-strip ul { font-size: 15px; letter-spacing: .14em; }
}

/* ---------- Service cards (home) ---------- */

/* Mobile: a numbered list. Tablet and up: coloured cards. */
.service-card {
  display: grid;
  grid-template-columns: 40px 1fr 16px;
  gap: 8px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.service-card::after {
  content: "›";
  color: var(--gold-dark);
}

.service-card__num {
  font-size: 20px;
  font-weight: 500;
  color: var(--gold-dark);
}

.service-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.service-card__desc { display: none; }

@media (min-width: 761px) {
  .service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .service-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 24px;
    height: 100%;
    min-height: 210px;
    padding: 26px 24px;
    border: 0;
    border-radius: var(--radius);
    transition: transform var(--ease), box-shadow var(--ease);
  }

  .service-card::after { content: none; }

  .service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -18px rgba(20,24,36,.45);
  }

  .service-card__num {
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: inherit;
  }

  .service-card__title { font-size: 19px; line-height: 1.2; }

  .service-card__desc {
    display: block;
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.45;
    opacity: .85;
  }

  .card--navy  { background: var(--navy);  color: #fff; }
  .card--gold  { background: var(--gold);  color: var(--navy); }
  .card--cream { background: var(--cream); color: var(--navy); }
}

@media (min-width: 1025px) {
  .service-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Process steps (also used for ADDIE on navy) ---------- */

.step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  padding: 14px 0;
  border-top: 2px solid var(--gold-mid);
}

.step__num {
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  color: var(--gold-dark);
}

.step__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.step__desc {
  font-size: 14.5px;
  color: var(--muted);
}

.steps--dark .step { border-top-color: var(--gold); }
.steps--dark .step__num { color: var(--gold); }
.steps--dark .step__desc { color: inherit; opacity: .85; }

@media (min-width: 761px) {
  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
  }

  .step {
    display: block;
    padding: 18px 0 0;
    border-top-width: 3px;
  }

  .steps--dark .step { border-top-width: 2px; }

  .step__num {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -.03em;
  }

  .step__title {
    margin: 12px 0 6px;
    font-size: 20px;
    line-height: 1.2;
  }

  .step__desc { font-size: 15px; }
}

@media (min-width: 1025px) {
  .steps { grid-template-columns: repeat(5, 1fr); }
}

.steps-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  margin-top: 28px;
  font-size: 15px;
}

.steps-footer p { color: var(--muted); }

@media (min-width: 1025px) {
  .steps-footer { margin-top: 36px; }
}

/* ---------- Golden Circle (Why Trinity) ---------- */

.golden {
  display: grid;
  gap: 40px;
}

.gc {
  --size: 300px;
  position: relative;
  width: min(var(--size), 100%);
  aspect-ratio: 1;
  margin-inline: auto;
  container-type: inline-size;
  color: var(--navy-2);
}

.gc__ring {
  position: absolute;
  border-radius: 50%;
}

.gc__ring--what { inset: 0; background: var(--gold-mid); }
.gc__ring--how  { inset: 13.64%; background: var(--navy-2); }

.gc__ring--why {
  inset: 27.27%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #f1f1ee, #a9a9a4);
}

.gc__ring--why b {
  font-size: clamp(16px, 5cqi, 22px);
  font-weight: 800;
  letter-spacing: .14em;
}

.gc__label {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(14px, 4.2cqi, 18px);
  font-weight: 800;
  letter-spacing: .14em;
}

/* Each label centres on its ring band; the cap-height centre sits about .8em below the box top. */
.gc__label--what { top: calc(6.82% - .8em); color: var(--navy); }
.gc__label--how  { top: calc(20.45% - .8em); color: var(--gold); }

.gc-rows { margin-top: 24px; }

.gc-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.gc-row:last-child { border-bottom: 1px solid var(--line); }

.gc-row dt {
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold-dark);
}

@media (min-width: 761px) {
  .gc { --size: 400px; }
  .gc-row { grid-template-columns: 90px 1fr; }
}

@media (min-width: 1025px) {
  .golden {
    grid-template-columns: 480px 1fr;
    gap: 80px;
    align-items: center;
  }

  .gc { --size: 440px; }
  .golden h2 { font-size: 46px; line-height: 1.08; }
  .gc-rows { margin-top: 28px; }
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--navy);
  color: #fff;
  padding-block: 44px;
}

.cta-band__inner {
  display: grid;
  gap: 24px;
}

.cta-band__title {
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.cta-band__text {
  margin-top: 14px;
  opacity: .85;
}

@media (min-width: 761px) {
  .cta-band { padding-block: 72px; }

  .cta-band__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }

  .cta-band__body { max-width: 700px; }
  .cta-band__title { font-size: clamp(2rem, 1rem + 2.6vw, 2.875rem); line-height: 1.08; }
  .cta-band__text { max-width: 620px; font-size: 18px; }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: var(--footer-fg);
  font-size: 14px;
  padding-block: 48px 28px;
}

.footer-grid {
  display: grid;
  gap: 36px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-brand img {
  flex: none;
  width: auto;
  height: 40px;
}

.footer-brand span {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: .14em;
  color: var(--gold);
}

.footer-tagline {
  margin-top: 18px;
  max-width: 280px;
  opacity: .8;
}

.footer-heading {
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer-links { display: grid; gap: 10px; }

.footer-links a {
  opacity: .85;
  transition: color var(--ease), opacity var(--ease);
}

.footer-links a:hover { color: var(--gold); opacity: 1; }

.footer-links .footer-cta { color: var(--gold); font-weight: 700; opacity: 1; }
.footer-links .footer-cta:hover { color: #fff; }

.footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  font-size: 13px;
}

.footer-copy { opacity: .6; }

/* Legal links on the left, the "built by" credit on the right; they wrap on phones. */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 28px;
  margin-top: 14px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.footer-legal a,
.footer-credit { opacity: .85; transition: color var(--ease), opacity var(--ease); }

.footer-legal a:hover { color: var(--gold); opacity: 1; }

.footer-legal a { padding-block: 2px; }   /* a 24px tap height */

.footer-credit a { color: var(--gold); font-weight: 600; }
.footer-credit a:hover { color: #fff; }

@media (min-width: 761px) {
  .site-footer { padding-block: 64px 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand span { font-size: 20px; }
  .footer-bottom { margin-top: 48px; }
}

@media (min-width: 1025px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1.3fr 1.1fr; }
}

/* ---------- Head, Heart and Hand cards ---------- */

.hhh-grid {
  display: grid;
  gap: 16px;
}

.hhh-card {
  padding: 32px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  text-align: center;
}

.hhh-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold);
}

.hhh-card__icon .icon {
  width: 44px;
  height: 44px;
  stroke-width: 1.6;
}

.hhh-card__title {
  margin: 22px 0 10px;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold-dark);
}

.hhh-card__text { color: var(--muted); }

@media (min-width: 761px) {
  .hhh-grid { grid-template-columns: repeat(3, 1fr); }
  .hhh-card { padding: 36px 24px 34px; }
}

@media (min-width: 1025px) {
  .hhh-grid { gap: 24px; }
  .hhh-card { padding: 36px 30px 34px; }
  .hhh-card__title { font-size: 44px; }
}

/* ---------- Feature list (navy "What working with us feels like") ---------- */

.feature-list li {
  padding: 22px 0;
  border-top: 1px solid var(--line-dark);
}

.feature-list__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gold);
}

.feature-list p {
  margin-top: 6px;
  opacity: .85;
}

@media (min-width: 1025px) {
  .feature-list__title { font-size: 26px; }
}

/* ---------- Values cards ---------- */

.values-grid {
  display: grid;
  gap: 16px;
}

.value-card {
  padding: 26px 24px;
  border-top: 3px solid var(--gold-mid);
  border-radius: var(--radius);
  background: #fff;
}

.value-card__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.value-card__text {
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted);
}

@media (min-width: 761px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Desktop: three on the first row, two centred on the second. */
@media (min-width: 1025px) {
  .values-grid { grid-template-columns: repeat(6, 1fr); }
  .values-grid > .value-card { grid-column: span 2; }
  .values-grid > .value-card:nth-child(4) { grid-column: 2 / span 2; }
  .values-grid > .value-card:nth-child(5) { grid-column: 4 / span 2; }
}

/* ---------- Diamond-marked lists ---------- */

.diamond-list li {
  padding: 12px 0 12px 26px;
  text-indent: -26px;   /* the marker hangs in the first line, so wrapped lines align with the text */
  border-bottom: 1px solid var(--line);
}

/* An inline marker. vertical-align: middle centres it on the x-height of the text. */
.diamond-list li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 16px 0 2px;
  background: var(--gold-mid);
  transform: rotate(45deg);
  vertical-align: middle;
}

/* Proof points: a 3 x 2 grid of diamond items. */
.proof-grid {
  display: grid;
  gap: 0 32px;
}

.proof-grid li {
  font-size: 16px;
  font-weight: 600;
  padding-block: 16px;
}

@media (min-width: 761px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
  .proof-grid { grid-template-columns: repeat(3, 1fr); }
}

.purpose-line {
  max-width: 760px;
  margin: 40px auto 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

@media (min-width: 1025px) {
  .purpose-line { margin-top: 56px; font-size: 20px; }
}

/* ---------- Services page ---------- */

.jump-bar {
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
}

.jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jump-links a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  transition: border-color var(--ease), background-color var(--ease);
}

.jump-links a:hover {
  border-color: var(--gold-mid);
  background: var(--cream);
}

.service-detail {
  padding-block: 48px;
  border-top: 1px solid var(--line);
}

.jump-bar + .service-detail { border-top: 0; }

.service-detail--cream { background: var(--cream); }

.service-detail__grid {
  display: grid;
  gap: 20px;
}

.service-detail__num {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--gold-dark);
}

.service-detail__title {
  font-size: 28px;
  line-height: 1.1;
}

.service-detail__intro {
  margin-top: 16px;
  font-size: 17px;
  color: var(--muted);
}

@media (min-width: 761px) {
  .service-detail { padding-block: 64px; }

  .service-detail__grid {
    grid-template-columns: 80px 1fr;
    gap: 24px 32px;
  }

  .service-detail__aside { grid-column: 2; }
  .service-detail__num { font-size: 52px; }
  .service-detail__title { font-size: 34px; }
}

@media (min-width: 1025px) {
  .service-detail { padding-block: 72px; }

  .service-detail__grid {
    grid-template-columns: 120px 1fr 1fr;
    gap: 40px;
  }

  .service-detail__aside { grid-column: auto; }
  .service-detail__num { font-size: 64px; }
  .service-detail__title { font-size: 36px; }
}

.note-card {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
}

.note-card__icon {
  width: auto;
  height: 42px;
}

.note-card__title {
  margin-top: 18px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gold);
}

.note-card__text {
  margin-top: 6px;
  opacity: .85;
}

.addie-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.addie-list__letter {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--gold-dark);
}

.addie-list strong { font-weight: 700; }

/* ---------- Contact page ---------- */

.contact-layout {
  display: grid;
  gap: 24px;
}

.contact-card { order: -1; }

@media (min-width: 1025px) {
  .contact-layout {
    grid-template-columns: 1.4fr .6fr;
    gap: 40px;
    align-items: start;
  }

  .contact-card {
    order: 0;
    position: sticky;
    top: 110px;
  }
}

.form-card {
  padding: 28px 20px;
  border-radius: var(--radius);
  background: var(--card);
}

.form-card__title {
  font-size: 28px;
  line-height: 1.1;
}

.form-card__intro {
  margin-top: 12px;
  color: var(--muted);
}

@media (min-width: 761px) {
  .form-card { padding: 40px; }
  .form-card__title { font-size: 36px; }
}

.form-grid {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

@media (min-width: 761px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
}

.req { color: var(--gold-dark); }

.input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.input:focus,
.input:focus-visible {
  outline: 2px solid transparent;
  border-color: var(--gold-mid);
  box-shadow: 0 0 0 3px rgba(226,190,98,.35);
}

select.input {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%237A5710' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

textarea.input { resize: vertical; min-height: 150px; }

.field.is-invalid .input { border-color: var(--error); }

.field-error {
  margin-top: 6px;
  font-size: 14px;
  color: var(--error);
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.checkbox-field input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--navy);
}

.checkbox-field label {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.form-actions { margin-top: 24px; }

.contact-card {
  padding: 36px 28px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
}

.contact-card__icon {
  width: auto;
  height: 52px;
}

.contact-card__name {
  margin-top: 18px;
  font-size: 20px;
  font-weight: 700;
}

.contact-card__role { opacity: .7; }

.contact-list {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-wrap: anywhere;
}

.contact-list svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--gold);
}

.contact-list a { transition: color var(--ease); }
.contact-list a:hover { color: var(--gold); }

.contact-card__meta {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  font-size: 14px;
  opacity: .8;
}

/* ---------- Page hero variants ---------- */

/* Services: navy. */
.page-hero--navy {
  background: var(--navy);
  color: #fff;
}

.page-hero--navy .eyebrow {
  color: var(--gold);
  opacity: 1;
}

.page-hero--navy .page-hero__intro { opacity: .85; }

.page-hero--navy :focus-visible { outline-color: var(--gold); }

/* The credentials strip sits directly under the hero, so a hairline keeps the two navy bands apart. */
.page-hero--navy + .badge-strip { border-top: 1px solid var(--line-dark); }

/* Approach: cream. */
.page-hero--cream {
  background: var(--cream);
  color: var(--fg);
}

.page-hero--cream .eyebrow {
  color: var(--gold-dark);
  opacity: 1;
}

/* Why Trinity: photo beside the text. */
.page-hero__media {
  margin-top: 32px;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

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

@media (min-width: 1025px) {
  .page-hero--photo .page-hero__grid { align-items: center; }
  .page-hero--photo .page-hero__intro { margin-top: 24px; }

  .page-hero__media {
    margin-top: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
  }
}

/* Contact: compact, so the form shows sooner on phones. */
.page-hero.page-hero--compact { padding-block: 32px 28px; }
.page-hero--compact .page-hero__title { font-size: 30px; line-height: 1.08; }
.page-hero--compact .page-hero__intro { margin-top: 14px; font-size: 15px; }

@media (min-width: 761px) {
  .page-hero.page-hero--compact { padding-block: 56px; }
  .page-hero--compact .page-hero__title { font-size: clamp(2.25rem, 1.65rem + 2.47vw, 3.375rem); }
  .page-hero--compact .page-hero__intro { font-size: 18px; }
}

@media (min-width: 1025px) {
  .page-hero.page-hero--compact { padding-block: 64px; }
}

/* ---------- Home: hero photo card ---------- */

/* Replaces the old logo card. Shown at every width: under the text on mobile,
   beside it from tablet up. */
.hero__media {
  position: relative;
  margin-top: 32px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 20px;
  background: var(--navy);
}

.hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 18% 50%;
}

.hero__badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 12px 28px -12px rgba(20,24,36,.6);
}

.hero__badge img { flex: none; width: 34px; }

.hero__badge-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold);
}

.hero__badge-text {
  font-size: 13px;
  line-height: 1.35;
  opacity: .85;
}

@media (min-width: 761px) {
  .hero__media {
    margin-top: 0;
    aspect-ratio: auto;
    height: 100%;
    min-height: 380px;
    border-radius: var(--radius-lg);
  }

  /* The card is tall and narrow here, so 18% crops the presenter's face. Anchor to the left edge. */
  .hero__photo { object-position: 0% 50%; }
}

/* ---------- Home: stats band ---------- */

.stats-band {
  padding-block: 36px;
  background: var(--navy);
  color: #fff;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
}

.stat__value {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold);
}

.stat__label {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.stat__note {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--footer-fg);
  opacity: .75;
}

@media (min-width: 761px) {
  .stats-band { padding-block: 48px; }

  .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 24px;
  }

  .stat:not(:first-child) {
    padding-left: 24px;
    border-left: 1px solid var(--line-dark);
  }
}

@media (min-width: 1025px) {
  .stat__value { font-size: 48px; }
}

/* ---------- Home: client logo band ---------- */

.clients {
  padding-block: 48px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

/* Beats the global .eyebrow + h2 margin, which is 14px on desktop. */
.clients .clients__title {
  margin-top: 10px;
  font-size: 26px;
}

.logo-band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.logo-band__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  border-radius: 16px;
  text-align: center;
}

/* Placeholder tile until the real client logo is in. */
.logo-band__item--placeholder { border: 1.5px dashed var(--line); }

.logo-band__item--placeholder span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}

/* Real logos: greyscale until hover. */
.logo-band__item img {
  max-width: 70%;
  max-height: 44px;
  width: auto;
  height: auto;
  filter: grayscale(1);
  opacity: .75;
  transition: filter .18s, opacity .18s;
}

.logo-band__item:hover img {
  filter: none;
  opacity: 1;
}

@media (min-width: 761px) {
  .logo-band { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1025px) {
  .clients { padding-block: 72px; }
  .clients .clients__title { font-size: 32px; }
  .logo-band { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- Services: sticky jump links ---------- */

.jump-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: #fff;
}

/* Mobile: one horizontally scrollable row. The side padding keeps the last pill off the
   edge; the block padding stops focus rings being clipped by the scroll box. */
.jump-links {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: var(--gutter);
  margin: -6px calc(var(--gutter) * -1);
  padding: 6px var(--gutter);
}

.jump-links li { flex: none; }

.jump-links a { white-space: nowrap; }

/* One row at every width keeps the sticky bar short; it scrolls sideways only if the pills don't fit. */
.jump-bar { padding-block: 12px; }

/* Desktop: no sideways scrolling with a mouse, so the pills shrink to fit one row from 1200px
   and wrap into a compact second row on narrower laptops. */
@media (min-width: 1025px) {
  .jump-bar { padding-block: 14px; }
  .jump-links { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 6px; }
  .jump-links a { padding: 6px 12px; font-size: 13px; }
}

/* Sections land just under the sticky header and jump bar. The offset is set a few px short of
   the bar's bottom edge (about 128px on mobile and 145px from tablet up), so the
   section edge meets the bar with no white gap, and the heading still lands 130px+ below the bar. */
.service-detail { scroll-margin-top: 124px; }

@media (min-width: 761px) {
  .service-detail { scroll-margin-top: 140px; }
}

/* ---------- Services: icons and "Best for" callouts ---------- */

.service-detail__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-dark);
}

.service-detail__icon .icon {
  width: 26px;
  height: 26px;
}

.service-detail--cream .service-detail__icon { background: #fff; }

.service-detail__for {
  margin-top: 20px;
  padding: 12px 16px;
  border-left: 3px solid var(--gold-mid);
  border-radius: 0 12px 12px 0;
  background: rgba(226,190,98,.12);
  font-size: 15px;
  color: var(--fg);
}

/* ---------- Approach: The Trinity Way diagram ---------- */

/* Mobile: the knot sits on top, then three row cards inside a panel. */
.tw {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.tw__map {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tw__mark {
  order: -1;
  align-self: center;
  width: auto;
  height: 64px;
}

.tw__node {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
}

.tw__title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* Short rule under each title: left-aligned on mobile, centred from tablet up. */
.tw__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 8px 0;
  background: var(--line);
}

.tw__text {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--fg);
}

.tw__flow {
  margin-top: 28px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  color: var(--fg);
}

.tw__tagline {
  margin-top: 10px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-wrap: balance;
  color: var(--gold-dark);
}

@media (min-width: 761px) {
  .tw { padding: 40px; }

  /* The three circles sit at the corners of an equilateral triangle, so the knot at its centre is the same
     distance from each circle. The panel is a container, so the circles, the spacing and the knot all scale
     with its width. */
  .tw { container-type: inline-size; }

  .tw__map {
    position: relative;
    display: block;
    --d: min(40.8cqi, 176px);                   /* circle diameter */
    --l: calc(var(--d) * 1.42);                 /* side of the triangle of centres: one circle and a gap */
    --top: calc(var(--d) / 2);                  /* Head and Heart centres, down from the top */
    --hand: calc(var(--top) + var(--l) * .866); /* Hand centre: the triangle is .866 of its side tall */
    height: calc(var(--hand) + var(--d) / 2 + 8px);
  }

  .tw__mark {
    position: absolute;
    left: 50%;
    top: calc((2 * var(--top) + var(--hand)) / 3); /* the centre of the equilateral triangle */
    transform: translate(-50%, -50%);
    order: 0;
    height: min(72px, 16.6cqi);
    width: auto;
    z-index: 1;
  }

  .tw__node {
    position: absolute;
    left: 50%;
    top: var(--top);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--d);
    aspect-ratio: 1;
    padding: 16px;
    border: 2px solid var(--fg);
    border-radius: 50%;
    text-align: center;
  }

  .tw__node--head  { transform: translate(calc(-50% - var(--l) / 2), -50%); }
  .tw__node--heart { transform: translate(calc(-50% + var(--l) / 2), -50%); }

  .tw__node--hand {
    top: var(--hand);
    transform: translate(-50%, -50%);
  }

  .tw__title::after { margin: 8px auto; }

  .tw__flow {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .tw__flow::before,
  .tw__flow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
  }
}

/* Narrow desktop: the Trinity Way column is only about 420px wide here, so the circles
   get a little less padding and gap to keep their text inside the circle. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .tw { padding: 32px; }
  .tw__node { padding: 14px; }
  .tw__flow { font-size: 14px; gap: 10px; }
}

/* ---------- Approach: team photo ---------- */

.media-rounded {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
}

/* Placeholder stock photo: the crop favours the lower part, where the team is. */
.media-rounded img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%;
}

/* ---------- Mobile and tablet action bar ---------- */

/* Phones and tablets: below 1025px the header has no Get in touch button, so Call and Enquire live here. */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid rgba(20,24,36,.1);
  box-shadow: 0 -10px 24px -18px rgba(20,24,36,.4);
}

.action-bar__link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--navy); color: var(--navy);
  font-size: 15px; font-weight: 700;
}

.action-bar__link--primary { background: var(--navy); color: #fff; }
.action-bar .icon { width: 19px; height: 19px; }

/* Keeps the end of the page clear of the bar. */
body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 1025px) {
  .action-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .service-card:hover { transform: none; }
}

/* ---------- Legal pages ---------- */

.legal { max-width: 760px; }

.legal h2 {
  margin: 2.25em 0 .6em;
  font-size: 1.5rem;
  line-height: 1.2;
}

.legal p,
.legal li { font-size: 17px; line-height: 1.7; }

.legal p + p { margin-top: .9em; }

.legal ul,
.legal ol { margin-top: .9em; padding-left: 1.3em; }

.legal li + li { margin-top: .45em; }

.legal a { text-decoration: underline; text-underline-offset: 3px; }

.legal-draft {
  margin-bottom: 1.5em;
  padding: 14px 18px;
  border: 1px solid var(--gold-mid);
  border-radius: var(--radius);
  background: #FBF5E4;
}

.legal-tbc {
  padding: 0 .3em;
  border-radius: 4px;
  background: #FFF0B3;
  font-weight: 600;
}

/* TEMP: home screen switch (remove when Linda decides) */

/* Two dashed pills at the far left of the header bar. They sit outside the nav bar: the rail is
   positioned against the header, not placed in the nav's layout. The bar only makes room for it
   (padding on .header-inner), so the logo and the nav keep their own structure.
   --temp-rail is the rail's width at each breakpoint. */

:root { --temp-rail: 160px; }

@media (min-width: 761px) {
  :root { --temp-rail: 192px; }
}

@media (min-width: 1280px) {
  :root { --temp-rail: 277px; }
}

.temp-switch {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  gap: 6px;
}

.temp-switch__btn {
  padding: 5px 9px;
  border: 1px dashed var(--gold-mid);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}

.temp-switch__btn[aria-current="page"] {
  border-style: solid;
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

/* Short labels up to 1279px, where the long ones would crowd the logo. */
.temp-switch__short { display: none; }

@media (max-width: 1279px) {
  .temp-switch__long { display: none; }
  .temp-switch__short { display: inline; }
}

/* Phones: smaller pills, closer together. */
@media (max-width: 760px) {
  .temp-switch { gap: 4px; }
  .temp-switch__btn { padding: 5px 6px; font-size: 11px; line-height: 14px; }
}

/* The bar's content starts after the rail. The wrapper is centred above 1200px, so its left edge is
   (100vw - 1200px) / 2 in from the screen edge, and that part of the room is already there. */
.site-header .header-inner {
  padding-left: max(var(--gutter), calc(26px + var(--temp-rail) - max(0px, (100vw - var(--container)) / 2)));
}

/* Tighter nav links while the rail takes room from the desktop bar. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .nav-links { gap: 22px; }
}

/* Phones: a tighter gap so the logo, the menu button and the rail fit on one line. */
@media (max-width: 760px) {
  .site-header .header-inner { gap: 12px; }
}

/* The wordmark goes where it would crowd the switch and the nav: below 560px, and from 761px to
   1415px. The knot stays everywhere. From 1416px the wordmark returns. */
@media (max-width: 559px), (min-width: 761px) and (max-width: 1415px) {
  .brand-text { display: none; }
}

/* Each nav link stays on one line beside the rail. */
.nav-links a { white-space: nowrap; }