/* ==========================================================================
   pages.css — Page-specific compositions.
   Each block is scoped to the section it serves.
   ========================================================================== */

/* ==========================================================================
   HOME — Hero
   ========================================================================== */
.hero {
  position: relative;
  background-color: var(--navy-950);
  color: var(--ivory-50);
  padding-block: calc(var(--header-height) + clamp(2.5rem, 1.8rem + 4vw, 5rem)) 0;
  overflow: hidden;
}

/* A faint architectural grid — structure, not decoration. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(245 242 234 / 0.05) var(--hairline), transparent var(--hairline)),
    linear-gradient(to bottom, rgb(245 242 234 / 0.04) var(--hairline), transparent var(--hairline));
  background-size: clamp(4rem, 8vw, 7.5rem) clamp(4rem, 8vw, 7.5rem);
  mask-image: radial-gradient(120% 90% at 20% 10%, #000 20%, transparent 78%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  gap: var(--grid-gap);
  align-items: center;
}

@media (min-width: 64em) {
  .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2.5rem, 4vw, 4.5rem); }
}

.hero__eyebrow { display: flex; align-items: center; gap: var(--space-s); margin-block-end: var(--space-m); }
.hero__eyebrow .frame-mark { inline-size: 1rem; block-size: 1rem; }
.hero__eyebrow span { font-size: var(--step--2); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--champagne); }

.hero__title {
  font-size: var(--step-7);
  font-weight: var(--weight-display);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  color: var(--white);
  max-inline-size: 20ch;
}

.hero__title em { font-style: italic; color: var(--champagne); }

.hero__lead {
  margin-block-start: var(--space-m);
  font-size: var(--step-1);
  line-height: 1.58;
  color: #C2CCDA;
  max-inline-size: 48ch;
}

.hero__actions { margin-block-start: var(--space-l); display: flex; flex-wrap: wrap; gap: var(--space-s); }

/* The credential strip closes the hero and gives the viewport a base line. */
.hero__foot {
  position: relative;
  z-index: 1;
  margin-block-start: clamp(2.5rem, 2rem + 3vw, 4rem);
  padding-block-end: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
}

/* Disciplines strip — the brand's supporting message as structured metadata. */
.hero__disciplines {
  margin-block-start: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  padding-block-start: var(--space-m);
  border-block-start: var(--hairline) solid rgb(245 242 234 / 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  list-style: none;
  margin-inline: 0;
  padding-inline: 0;
}

.hero__disciplines li {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #AFBACA;
}

.hero__disciplines li:not(:last-child)::after {
  content: "";
  inline-size: 3px;
  block-size: 3px;
  background-color: var(--gold-400);
}

.hero__media { position: relative; }
.hero__media .media { aspect-ratio: 4 / 5; }

@media (max-width: 63.99em) {
  .hero__media { order: -1; max-inline-size: 32rem; }
  .hero__media .media { aspect-ratio: 5 / 4; }
}

/* ==========================================================================
   HOME — Authority statement
   ========================================================================== */
.authority { background-color: var(--ivory-100); }

.authority__inner { display: grid; gap: var(--grid-gap); }

@media (min-width: 64em) {
  .authority__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(3rem, 5vw, 6rem); align-items: start; }
}

.authority__statement {
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--navy-950);
  max-inline-size: 17ch;
  position: relative;
  padding-inline-start: var(--space-l);
}

.authority__statement::before {
  content: "";
  position: absolute;
  inset-block: 0.25em auto;
  inset-inline-start: 0;
  inline-size: var(--rule-accent);
  block-size: 2.6em;
  background-color: var(--gold-500);
}

.authority__body { display: grid; gap: var(--space-m); color: var(--ink-muted); font-size: var(--step-0); line-height: 1.72; max-inline-size: 54ch; }

/* ==========================================================================
   HOME — Capability ledger
   A numbered, rule-separated index. Native <details> means it works with
   touch, keyboard and no JavaScript; JS only syncs the accompanying image.
   ========================================================================== */
.capabilities__inner { display: grid; gap: var(--grid-gap); }

@media (min-width: 64em) {
  .capabilities__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 5rem); align-items: start; }
}

.ledger { border-block-start: var(--hairline) solid var(--rule); }

.ledger__item { border-block-end: var(--hairline) solid var(--rule); }

.ledger__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-s) var(--space-m);
  padding-block: clamp(1.1rem, 0.8rem + 1.2vw, 1.75rem);
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.ledger__summary::-webkit-details-marker { display: none; }
.ledger__summary:hover .ledger__title { color: var(--ink-strong); }
.ledger__summary:hover .ledger__sign { border-color: var(--accent); color: var(--accent); }

.ledger__index {
  font-size: var(--step--2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
}

.ledger__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.15;
  color: var(--ink);
  transition: color var(--duration-fast) var(--ease-out);
}

/* The open/closed sign is a Tembeka bracket that rotates — the state is also
   exposed natively by <details>, so this is purely a visual echo. */
.ledger__sign {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border-block-start: var(--frame-stroke) solid var(--rule-strong);
  border-inline-end: var(--frame-stroke) solid var(--rule-strong);
  transform: rotate(135deg);
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  align-self: center;
}

.ledger__item[open] .ledger__sign { transform: rotate(-45deg); border-color: var(--accent-rule); }
.ledger__item[open] .ledger__title { color: var(--ink-strong); }

.ledger__panel {
  display: grid;
  gap: var(--space-m);
  padding-block-end: var(--space-xl);
  padding-inline-start: calc(var(--space-m) + 1.5rem);
  max-inline-size: 58ch;
}

@media (max-width: 29.99em) { .ledger__panel { padding-inline-start: 0; } }

.ledger__services { display: grid; gap: var(--space-2xs); list-style: none; margin: 0; padding: 0; }

.ledger__services li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.ledger__services li::before {
  content: "";
  inline-size: 0.55rem;
  block-size: 0.55rem;
  margin-block-start: 0.5em;
  border-block-start: var(--hairline) solid var(--accent-rule);
  border-inline-start: var(--hairline) solid var(--accent-rule);
}

.ledger__outcome {
  padding: var(--space-s) var(--space-m);
  background-color: var(--surface-sunken);
  border-inline-start: var(--rule-accent) solid var(--accent-rule);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-muted);
}

.ledger__outcome strong { color: var(--ink-strong); font-weight: 600; }

/* Companion visual. Hidden below the two-column breakpoint to avoid an
   image that carries no additional meaning on small screens. */
.capabilities__visual { display: none; }

@media (min-width: 64em) {
  .capabilities__visual { display: block; position: sticky; inset-block-start: calc(var(--header-height) + var(--space-l)); }
  .capabilities__visual .media { aspect-ratio: 3 / 4; }
  .capabilities__visual img { transition: opacity var(--duration-base) var(--ease-out); }
  .capabilities__visual[data-swapping="true"] img { opacity: 0; }
}

/* ==========================================================================
   HOME — Healthcare specialist feature
   ========================================================================== */
.specialist { background-color: var(--ivory-100); position: relative; overflow: hidden; }

.specialist__inner { display: grid; gap: var(--grid-gap); align-items: center; }

@media (min-width: 64em) {
  .specialist__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(3rem, 5vw, 5.5rem); }
}

.specialist__media .media { aspect-ratio: 4 / 5; }
@media (max-width: 63.99em) { .specialist__media .media { aspect-ratio: 16 / 10; } }

.specialist__title { font-size: var(--step-4); max-inline-size: 20ch; }

.specialist__capabilities {
  margin-block-start: var(--space-l);
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  border-block-start: var(--hairline) solid var(--rule);
}

@media (min-width: 40em) { .specialist__capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-l); } }

.specialist__capabilities li {
  padding-block: var(--space-xs);
  border-block-end: var(--hairline) solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-muted);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  align-items: baseline;
}

.specialist__capabilities li::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-block-start: var(--hairline) solid var(--accent-rule);
  border-inline-start: var(--hairline) solid var(--accent-rule);
}

/* ==========================================================================
   HOME — Leadership preview
   ========================================================================== */
.leader-preview { background-color: var(--navy-950); color: var(--ivory-50); }

.leader-preview__inner { display: grid; gap: var(--grid-gap); align-items: center; }

@media (min-width: 64em) {
  .leader-preview__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(3rem, 5vw, 6rem); }
}

.leader-preview__media .media { aspect-ratio: 4 / 5; background-color: var(--navy-800); }
@media (max-width: 63.99em) { .leader-preview__media { max-inline-size: 26rem; } }

.leader-preview__name { font-size: var(--step-3); color: var(--white); margin-block-start: var(--space-s); }
.leader-preview__role { font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-400); margin-block-start: var(--space-2xs); }

.credential-list {
  margin-block-start: var(--space-l);
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  border-block-start: var(--hairline) solid rgb(245 242 234 / 0.18);
}

.credential-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-m);
  align-items: baseline;
  padding-block: var(--space-s);
  border-block-end: var(--hairline) solid rgb(245 242 234 / 0.18);
  font-size: var(--step--1);
  color: #C2CCDA;
}

.credential-list dt,
.credential-list .credential-list__key {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-400);
  min-inline-size: 7rem;
}

/* ==========================================================================
   HOME — Approach progression
   ========================================================================== */
.approach { background-color: var(--ivory-100); }

.approach__track {
  margin-block-start: var(--space-2xl);
  position: relative;
  display: grid;
  gap: var(--space-l);
  counter-reset: approach;
}

@media (min-width: 56em) {
  .approach__track { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-m); }
}

/* The rail the progression travels along. */
.approach__track::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 3px;
  inline-size: var(--hairline);
  block-size: 100%;
  background-color: var(--rule-strong);
}

.approach__track::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 3px;
  inline-size: var(--rule-accent);
  block-size: 100%;
  background-color: var(--gold-500);
  transform: scaleY(var(--progress, 1));
  transform-origin: top;
  transition: transform 1200ms var(--ease-editorial);
}

@media (min-width: 56em) {
  .approach__track::before,
  .approach__track::after {
    inset-block-start: 3px;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: var(--hairline);
  }
  .approach__track::after { block-size: var(--rule-accent); transform: scaleX(var(--progress, 1)); transform-origin: left; }
}

.approach__step {
  position: relative;
  padding-inline-start: var(--space-l);
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
}

@media (min-width: 56em) { .approach__step { padding-inline-start: 0; padding-block-start: var(--space-m); padding-inline-end: var(--space-s); } }

.approach__step::before {
  content: "";
  position: absolute;
  inset-block-start: 0.35rem;
  inset-inline-start: 0;
  inline-size: 7px;
  block-size: 7px;
  background-color: var(--navy-800);
  outline: 3px solid var(--ivory-100);
}

@media (min-width: 56em) { .approach__step::before { inset-block-start: 0; } }

.approach__step[data-active="true"]::before { background-color: var(--gold-500); }

.approach__index { counter-increment: approach; font-size: var(--step--2); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-wide); color: var(--accent); }
.approach__index::before { content: "0" counter(approach); }
.approach__name { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.18; color: var(--ink-strong); }
.approach__body { font-size: var(--step--1); line-height: 1.6; color: var(--ink-muted); }

/* ==========================================================================
   Interior page headers
   ========================================================================== */
.page-header {
  background-color: var(--navy-950);
  color: var(--ivory-50);
  padding-block: calc(var(--header-height) + clamp(2rem, 1.6rem + 2.2vw, 3.25rem)) clamp(2rem, 1.6rem + 2.2vw, 3.25rem);
  position: relative;
  overflow: hidden;
}

.page-header::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--header-height) + var(--space-l));
  inset-inline-end: clamp(1rem, 6vw, 8rem);
  inline-size: clamp(4rem, 9vw, 9rem);
  block-size: clamp(4rem, 9vw, 9rem);
  border-block-start: var(--frame-stroke) solid rgb(200 167 91 / 0.55);
  border-inline-end: var(--frame-stroke) solid rgb(200 167 91 / 0.55);
  pointer-events: none;
}

.page-header .breadcrumbs { color: #8494A8; }
.page-header .breadcrumbs a { color: #AFBACA; }
.page-header .breadcrumbs a:hover { color: var(--white); }
.page-header .breadcrumbs [aria-current="page"] { color: var(--ivory-50); }

.page-header__title { margin-block-start: var(--space-m); font-size: var(--step-5); color: var(--white); max-inline-size: 19ch; }
.page-header__standfirst { margin-block-start: var(--space-s); font-size: var(--step-0); line-height: 1.6; color: #C2CCDA; max-inline-size: 58ch; }

/* ==========================================================================
   Index + content layout (Services, Sectors)
   A sticky index on the left, anchored content on the right. Works entirely
   without JavaScript; JS only adds the reading-position highlight.
   ========================================================================== */
.indexed { display: grid; gap: var(--grid-gap); }

@media (min-width: 64em) {
  .indexed { grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
}

.index-nav { position: static; }

@media (min-width: 64em) {
  .index-nav { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-l)); }
}

.index-nav__title { font-size: var(--step--2); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-subtle); margin-block-end: var(--space-s); }

.index-nav__list { list-style: none; margin: 0; padding: 0; border-block-start: var(--hairline) solid var(--rule); }

.index-nav__item { border-block-end: var(--hairline) solid var(--rule); }

.index-nav__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-s);
  align-items: baseline;
  padding-block: var(--space-xs);
  padding-inline-start: 0;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              padding-inline-start var(--duration-base) var(--ease-out);
}

.index-nav__link:hover { color: var(--ink-strong); padding-inline-start: var(--space-2xs); }

.index-nav__num { font-size: var(--step--2); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); }

/* Reading position: marked with weight, colour and a bracket — never colour alone. */
.index-nav__link[aria-current="true"] { color: var(--ink-strong); font-weight: 600; padding-inline-start: var(--space-2xs); }
.index-nav__link[aria-current="true"] .index-nav__num::after { content: " —"; }

.content-block { scroll-margin-block-start: calc(var(--header-height) + var(--space-l)); }
.content-block + .content-block { margin-block-start: var(--section-space); padding-block-start: var(--section-space-tight); border-block-start: var(--hairline) solid var(--rule); }

.content-block__eyebrow { display: flex; align-items: center; gap: var(--space-s); margin-block-end: var(--space-s); }
.content-block__title { font-size: var(--step-4); max-inline-size: 18ch; }
.content-block__standfirst { margin-block-start: var(--space-m); font-size: var(--step-1); line-height: 1.55; color: var(--ink-muted); max-inline-size: 54ch; }

/* Challenge / response / outcome structure */
.brief { margin-block-start: var(--space-xl); display: grid; gap: var(--space-l); }

@media (min-width: 48em) { .brief { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) var(--space-xl); } }

.brief__item { display: grid; gap: var(--space-2xs); align-content: start; }
.brief__term { font-size: var(--step--2); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.brief__detail { font-size: var(--step--1); line-height: 1.68; color: var(--ink-muted); margin: 0; }

.service-list {
  margin-block-start: var(--space-xl);
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  border-block-start: var(--hairline) solid var(--rule);
}

@media (min-width: 40em) { .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); } }
@media (min-width: 80em) { .service-list--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.service-list li {
  padding-block: var(--space-xs);
  border-block-end: var(--hairline) solid var(--rule);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  align-items: baseline;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.service-list li::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-block-start: var(--hairline) solid var(--accent-rule);
  border-inline-start: var(--hairline) solid var(--accent-rule);
}

/* A compliance or scope note — plainly stated, never buried. */
.note {
  margin-block-start: var(--space-l);
  padding: var(--space-xs) 0 var(--space-xs) var(--space-m);
  border-inline-start: var(--rule-accent) solid var(--stone-500);
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-muted);
  max-inline-size: 62ch;
}

.note strong { color: var(--ink-strong); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.story__inner { display: grid; gap: var(--grid-gap); }

@media (min-width: 64em) { .story__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(3rem, 5vw, 6rem); align-items: start; } }

.name-meaning {
  padding: var(--space-xl);
  background-color: var(--navy-900);
  color: var(--ivory-50);
  position: relative;
}

.name-meaning__word { font-family: var(--font-display); font-size: var(--step-5); line-height: 1; color: var(--white); }
.name-meaning__gloss { margin-block-start: var(--space-2xs); font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-400); }
.name-meaning__body { margin-block-start: var(--space-m); font-size: var(--step--1); line-height: 1.7; color: #C2CCDA; }

.pillars { display: grid; gap: var(--grid-gap); }
@media (min-width: 48em) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pillar { display: grid; gap: var(--space-s); align-content: start; padding-block-start: var(--space-m); border-block-start: var(--rule-accent) solid var(--accent-rule); }
.pillar__title { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink-strong); }
.pillar__body { font-size: var(--step--1); line-height: 1.68; color: var(--ink-muted); max-inline-size: 46ch; }

/* ==========================================================================
   LEADERSHIP
   ========================================================================== */
.profile__inner { display: grid; gap: var(--grid-gap); align-items: start; }

@media (min-width: 64em) { .profile__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 5vw, 6rem); } }

.profile__media { position: relative; }
.profile__media .media { aspect-ratio: 4 / 5; }
@media (min-width: 64em) { .profile__media { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-l)); } }
@media (max-width: 63.99em) { .profile__media { max-inline-size: 26rem; } }

.profile__statement { font-size: var(--step-4); max-inline-size: 18ch; }

.career { display: grid; gap: 0; border-block-start: var(--hairline) solid var(--rule); margin-block-start: var(--space-xl); }

.career__chapter { padding-block: var(--space-xl); border-block-end: var(--hairline) solid var(--rule); display: grid; gap: var(--space-s); }

@media (min-width: 56em) {
  .career__chapter { grid-template-columns: minmax(0, 0.28fr) minmax(0, 1fr); gap: var(--space-l); align-items: start; }
}

.career__label { font-size: var(--step--2); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.career__body { display: grid; gap: var(--space-m); }
.career__body h3 { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink-strong); }
.career__body p { font-size: var(--step-0); line-height: 1.7; color: var(--ink-muted); max-inline-size: 60ch; }

/* Credentials: three ruled columns rather than one filled panel, so a reader
   can scan executive, governance and professional standing side by side. */
.cred-columns { display: grid; gap: var(--grid-gap); }

@media (min-width: 48em) { .cred-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .cred-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cred-column__title {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  padding-block-end: var(--space-xs);
  border-block-end: var(--rule-accent) solid var(--accent-rule);
}

.cred-list { display: grid; gap: 0; margin: 0; }

.cred-row {
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-s);
  border-block-end: var(--hairline) solid var(--rule);
}

.cred-row__term {
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-strong);
}

.cred-row__detail {
  margin: 0;
  font-size: var(--step--2);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Appointments the founder is available to take. */
.appointments {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-m);
  border-block-start: var(--hairline) solid var(--rule);
}

.appointments__label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: var(--space-s);
}

.appointments__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.appointments__list li { display: flex; align-items: center; }

.appointments__list li:not(:last-child)::after {
  content: "";
  inline-size: 3px;
  block-size: 3px;
  margin-inline: var(--space-s);
  background-color: var(--accent-rule);
  flex: none;
}

/* ==========================================================================
   Case studies
   Challenge, action and outcome set in three columns beneath a ruled head.
   ========================================================================== */
.cases { display: grid; gap: 0; border-block-start: var(--hairline) solid var(--rule); }

.case { padding-block: var(--space-xl); border-block-end: var(--hairline) solid var(--rule); }

.case__head {
  display: grid;
  gap: var(--space-3xs);
  margin-block-end: var(--space-l);
}

.case__title { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.15; color: var(--ink-strong); max-inline-size: 22ch; }

.case__role {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.case__body { display: grid; gap: var(--space-l); margin: 0; }

@media (min-width: 56em) { .case__body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } }

.case__item { display: grid; gap: var(--space-2xs); align-content: start; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__inner { display: grid; gap: var(--grid-gap); align-items: start; }

@media (min-width: 64em) { .contact__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(3rem, 5vw, 5rem); } }

.contact-panel { display: grid; gap: var(--space-l); align-content: start; }

.contact-detail {
  position: relative;
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-m) 0;
  border-block-start: var(--hairline) solid var(--rule);
}

/* A short gold segment struck across the start of each hairline — the
   letterhead device, in place of a panel. */
.contact-detail::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--rule-accent) / -2);
  inset-inline-start: 0;
  inline-size: 2.5rem;
  block-size: var(--rule-accent);
  background-color: var(--accent-rule);
}

.contact-detail__label { font-size: var(--step--2); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-subtle); }
.contact-detail__value { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.5; color: var(--ink-strong); font-style: normal; font-weight: var(--weight-display); }
.contact-detail__value a { color: var(--ink-strong); text-decoration: none; border-block-end: var(--hairline) solid var(--accent-quiet); }
.contact-detail__value a:hover { border-block-end-color: var(--accent); }

/* ==========================================================================
   404
   ========================================================================== */
.error-page {
  min-block-size: 100vh;
  display: grid;
  place-content: center;
  padding-block: calc(var(--header-height) + var(--space-2xl)) var(--space-3xl);
  background-color: var(--navy-950);
  color: var(--ivory-50);
  text-align: left;
}

.error-page__code { font-size: var(--step--2); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-400); }
.error-page__title { margin-block-start: var(--space-m); font-size: var(--step-6); color: var(--white); max-inline-size: 14ch; }
.error-page__body { margin-block-start: var(--space-m); font-size: var(--step-1); line-height: 1.55; color: #C2CCDA; max-inline-size: 46ch; }
.error-page__actions { margin-block-start: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-s); }


/* ==========================================================================
   Founder portrait
   A captioned portrait: the caption sits outside the image frame so the
   Tembeka Frame brackets stay attached to the photograph itself.
   ========================================================================== */
.founder-portrait { margin: 0; display: grid; gap: var(--space-m); }
.founder-portrait .media { aspect-ratio: 4 / 5; }

.founder-portrait__caption {
  display: grid;
  gap: var(--space-3xs);
  padding-inline-start: var(--space-s);
  border-inline-start: var(--rule-accent) solid var(--accent-rule);
}

.founder-portrait__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-display);
  line-height: 1.2;
  color: var(--ink-strong);
}

.founder-portrait__role {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-subtle);
}

/* The leading question on an engagement card. */
.card__question {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  font-weight: 400;
  line-height: 1.32;
  color: var(--accent);
  max-inline-size: 26ch;
}

.theme-dark .card__question { color: var(--champagne); }
.theme-dark .card__title { color: var(--white); }
.theme-dark .card__body { color: #AFBACA; }


/* ==========================================================================
   Enquiry form rhythm
   Ruled fields need more vertical air between rows than boxed ones do.
   ========================================================================== */
.contact .form__grid { gap: var(--space-l) var(--space-xl); }
.contact .form { gap: var(--space-l); }

/* A plain list of client types inside a card. */
.client-list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: var(--hairline) solid var(--rule);
}

.client-list li {
  padding-block: var(--space-2xs);
  border-block-end: var(--hairline) solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-muted);
}