/* ==========================================================================
   Finad Accounting — base stylesheet
   ========================================================================== */

:root {
  /* Brand teal, matched to the physical signage in the reception photograph
     and to the original site's Elementor kit. Decorative use only — rules,
     fills, borders, the wordmark. At 3.15:1 on cream it is not safe for text. */
  --color-teal: #469698;
  /* Same hue, darkened until it clears 4.5:1 on every background the site
     uses. Every teal *word* on a light background must use this one. */
  --color-teal-ink: #356c72;
  --color-teal-light: #7fc9b6;
  --color-navy: #2b4a9b;
  --color-navy-dark: #1e3a6e;
  --color-ink: #23303a;
  --color-body: #57616b;
  --color-bg: #f7f4ef;
  --color-bg-alt: #efe9e0;
  --color-border: rgba(63, 129, 137, 0.2);
  --color-cream: #fffdf9;

  --font-heading: "Cormorant Garamond", "Georgia", serif;
  --font-body: "Lato", system-ui, sans-serif;
  --font-script: "Italianno", cursive;

  --container-width: min(1560px, 88vw);
  --radius: 8px;
  --radius-pill: 999px;

  /* Hairlines. Two weights only: a rule, and a rule that carries an edge.
     These were four different alphas of the same mint. */
  --rule-dark: rgba(127, 201, 182, 0.18);
  --rule-dark-strong: rgba(127, 201, 182, 0.34);

  /* One teal wash for every dark band, so they read as one field rather than
     four sections that happen to be navy. */
  --wash-teal: rgba(63, 129, 137, 0.3);

  /* The portal ground. Declared once and painted with background-attachment:
     fixed wherever it appears, so the section, the next section and the clipped
     field all resolve to the same colour at the same screen position. Painted
     per-box it could only ever be an approximation: the same gradient over a
     3500px section and a 900px field never agrees at the join. */
  /* The one navy surface on this page. Only .portal-run paints it; both
     portals are transparent and show it through the holes in their veils. */
  --portal-ground:
    radial-gradient(circle at 18% 8%, rgba(63, 129, 137, 0.75), transparent 36%),
    radial-gradient(circle at 82% 18%, rgba(127, 201, 182, 0.22), transparent 30%),
    radial-gradient(circle at 46% 80%, rgba(16, 31, 61, 0.65), transparent 46%),
    linear-gradient(135deg, #1e3a6e 0%, #2b4a9b 46%, #142a57 100%);

  /* Section rhythm. */
  --section-lg: clamp(80px, 12vh, 150px);
  --shadow: 0 4px 16px rgba(30, 58, 110, 0.08);
  --header-height: 72px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* No offset for the fixed header: it overlays the page on every page, so
   each page's opening section carries --header-height in its own top padding
   and its background runs up underneath the translucent bar. */
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-navy-dark);
  line-height: 1.25;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.25rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }

a {
  color: var(--color-teal-ink);
  text-decoration: none;
}

a:hover {
  color: var(--color-navy);
}

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

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: clamp(72px, 9vh, 104px) 0;
}

.section-alt {
  background: var(--color-bg-alt);
}

.eyebrow {
  display: inline-block;
  color: var(--color-teal-ink);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 0.75em;
}

.lede {
  font-size: 1.15rem;
  max-width: 640px;
}

/* Display headings close on an italic accent — the page's signature move. */
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--color-teal);
}

.page-hero h1 em,
.glyph-portal h1 em,
.cta-band h2 em,
.team-band h2 em {
  color: var(--color-teal-light);
}

/* Eyebrow with a leading rule. */
.rule-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.section-head .rule-eyebrow,
.gp-eyebrow.rule-eyebrow {
  justify-content: center;
}

.rule-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Buttons
   ========================================================================== */

/* One visible focus ring for everything interactive. The two-tone outline
   reads on both the cream pages and the navy bands. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-teal-ink);
  outline-offset: 3px;
  border-radius: 3px;
}

.page-hero a:focus-visible,
.cta-band a:focus-visible,
.glyph-portal a:focus-visible,
.glyph-portal button:focus-visible,
.team-band a:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--color-teal-light);
}

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: var(--color-teal-ink);
  color: var(--color-cream);
}

.btn-primary:hover {
  background: var(--color-navy);
}

.btn-outline {
  border-color: var(--color-cream);
  color: var(--color-cream);
}

.btn-outline:hover {
  background: var(--color-cream);
  color: var(--color-navy);
}

.btn-navy {
  background: var(--color-navy-dark);
  color: var(--color-cream);
  border-color: var(--color-navy-dark);
  border-radius: var(--radius-pill);
}

.btn-navy:hover {
  background: var(--color-navy);
  border-color: var(--color-navy);
}

.btn-mint {
  background: var(--color-teal-light);
  color: var(--color-navy-dark);
  border-color: var(--color-teal-light);
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.btn-mint:hover {
  background: #fff;
  border-color: #fff;
}

.btn-outline-navy {
  border-color: var(--color-navy);
  color: var(--color-navy);
}

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

/* Header / Nav
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(247, 244, 239, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

/* The wordmark is the vector from the original brand files
   (assets/images/finad-wordmark.svg), filled in --color-teal. As an image box
   it centres on the bar exactly; the script font it replaces sat high because
   of its tall ascender metrics. */
.logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo img {
  display: block;
  height: 40px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-nav a {
  font-weight: 400;
  color: var(--color-ink);
  position: relative;
  padding: 6px 0;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--color-navy);
}

.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-navy);
}

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

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-navy);
}

/* Scroll motion — shared tiers
   --------------------------------------------------------------------------
   `--p` is written by js/parallax.js: 0 as a [data-parallax] section enters the
   viewport, 1 as it leaves. Amplitudes live here, never in the script.
   Three tiers, so nothing competes: stage (hero, team band), drift (decorative
   layers, <= 40px) and reveal (everything else, 20px).
   ========================================================================== */

[data-parallax] { --p: 0; }

/* js/parallax.js adds .is-live while a section is on screen, so the drifting
   layers hold a compositor layer only for as long as they are moving. */
.trust-band.is-live > .trust-rail:first-of-type,
.statement-band.is-live .statement-mark,
.services-feature.is-live .services-feature-cards::before,
.section-alt.is-live .stats-lead::before,
.section-alt.is-live .stats-lead::after,
.team-band.is-live .team-band-image {
  will-change: transform;
}

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.52s ease-out, transform 0.52s ease-out;
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Children numbered by initReveals() ripple in DOM order. */
.js [data-reveal-item] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js [data-reveal].is-in [data-reveal-item] {
  opacity: 1;
  transform: none;
}

/* The flip-card grid opts out of the wrapper fade — its cards animate
   themselves, each keyed off the --i the renderer already set. */
.js .flip-cards-grid[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Hero — parallax (homepage only)
   ========================================================================== */

@keyframes heroWall { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,2.4%,0) scale(calc(1 + var(--hero-wall, .16))); } }
@keyframes heroDesk { from { transform: translate3d(0,0,0) scale(1.01); } to { transform: translate3d(-1.6%,0,0) scale(calc(1.01 + var(--hero-desk, .34))); } }
@keyframes heroFront { from { transform: translate3d(0,0,0) scale(1); opacity: 1; } to { transform: translate3d(0,-9vh,0) scale(1.05); opacity: 0; visibility: hidden; } }
@keyframes heroScrim { from { opacity: var(--hero-scrim, 1); } to { opacity: 0; } }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroBlur { from { filter: blur(0px); } to { filter: blur(6px); } }
@keyframes heroCue { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(7px); opacity: 1; } }

.hero-parallax {
  --hero-runway: 120vh;
  /* Height of the photo below the header. The 62.5vw term keeps the shot at
     its own aspect ratio on wide screens; the 100vh term stops it running
     past the fold. One token so the stage and its runway cannot drift. */
  --hero-art: min(100vh - var(--header-height), 62.5vw);
  --hero-wall: .16;
  --hero-desk: .34;
  --hero-scrim: 1;
  --hero-fade-to: var(--color-navy-dark);
  position: relative;
  height: calc(var(--header-height) + var(--hero-art) + var(--hero-runway));
  /* Below the sticky stage is runway, not paper: on a phone the viewport grows
     as the browser chrome retracts and a cream strip appeared under the photo.
     Match what the hero fades into. */
  background: var(--hero-fade-to);
  view-timeline-name: --hero;
  view-timeline-axis: block;
}

.hero-parallax-stage {
  position: sticky;
  top: 0;
  height: calc(var(--header-height) + var(--hero-art));
  overflow: hidden;
  background: var(--color-bg-alt);
}

.hero-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.hero-layer-wall {
  background-image: url("../assets/images/hero-wall.jpg");
  background-size: cover;
  background-position: center top;
  transform-origin: 50% 42%;
  animation-name: heroWall, heroBlur;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: --hero, --hero;
  animation-range: contain 0% contain 100%, contain 70% contain 100%;
}

.hero-layer-desk {
  /* PNG first so browsers without image-set() still get the layer; modern
     ones take the WebP, which is a tenth of the size at the same quality. */
  background-image: url("../assets/images/hero-desk.png");
  background-image: image-set(
    url("../assets/images/hero-desk.webp") type("image/webp"),
    url("../assets/images/hero-desk.png") type("image/png"));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transform-origin: 54% 100%;
  animation-name: heroDesk, heroBlur;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: --hero, --hero;
  animation-range: contain 0% contain 100%, contain 70% contain 100%;
}

.hero-layer-scrim {
  background: linear-gradient(to top, rgba(14,26,34,.74) 0%, rgba(14,26,34,.58) 30%, rgba(14,26,34,.2) 52%, rgba(14,26,34,0) 68%);
  pointer-events: none;
  animation-name: heroScrim;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: --hero;
  animation-range: contain 0% contain 62%;
}

/* Dissolves the photo into whatever follows the runway, so the next band
   arrives with no visible seam. --hero-fade-to tracks that section's colour. */
.hero-layer-fade {
  background: var(--hero-fade-to);
  pointer-events: none;
  opacity: 0;
  animation-name: heroFade;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: --hero;
  animation-range: contain 70% contain 100%;
}

.hero-layer-front {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(16px, 2.6vh, 30px);
  padding-bottom: clamp(64px, 11vh, 108px);
  padding-left: 24px;
  padding-right: 24px;
  will-change: transform, opacity;
  animation-name: heroFront;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: --hero;
  animation-range: contain 0% contain 52%;
}

.hero-layer-front h1 {
  margin: 0;
  text-align: center;
  color: var(--color-cream);
  text-shadow: 0 2px 24px rgba(10,20,28,.45);
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-scroll-cue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(18px, 3vh, 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: heroCue 2.6s ease-in-out infinite;
}

.hero-scroll-cue span:first-child {
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,253,249,.9);
}

.hero-scroll-cue span:last-child {
  width: 1px;
  height: 26px;
  background: linear-gradient(rgba(255,253,249,.9), rgba(255,253,249,0));
}

.page-hero {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(70% 120% at 12% 0%, rgba(63, 129, 137, 0.35), transparent 62%),
    var(--color-navy-dark);
  color: #fff;
  padding: calc(var(--header-height) + clamp(72px, 11vh, 120px)) 0 clamp(64px, 9vh, 96px);
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  color: #fff;
  max-width: 18ch;
}

/* The teal accent is what makes the brand read; a white eyebrow loses it. */
.page-hero .eyebrow {
  color: var(--color-teal-light);
}

.page-hero p {
  color: rgba(255, 253, 249, 0.82);
  max-width: 640px;
}

/* House motif, matching .statement-mark on the homepage: an oversized script
   wordmark set low in the corner, decorative only. */
.page-hero-mark {
  position: absolute;
  right: -2vw;
  bottom: -0.34em;
  font-family: var(--font-script);
  font-size: clamp(9rem, 22vw, 20rem);
  line-height: 1;
  color: var(--color-teal-light);
  opacity: 0.12;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Hairline that hands the navy off to whatever follows. */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(127, 201, 182, 0.4), transparent);
}

/* Grids / Cards
   ========================================================================== */

.grid {
  display: grid;
  gap: 32px;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 10px 30px rgba(30, 58, 110, 0.07);
}

.card h3 {
  margin-top: 0;
}

/* On the tinted band the cream would nearly match, so the card steps the
   other way instead. */
.section-alt .card {
  background: var(--color-bg);
}

.card .icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--color-bg-alt);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-weight: 700;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head p {
  font-size: 1.05rem;
}

.section-head .btn {
  margin-top: 8px;
}

.section-head.left {
  margin: 0 0 48px;
  text-align: left;
}

/* Capability list (services page)
   --------------------------------------------------------------------------
   Sticky intro on the left, a roman-numbered list on the right. Replaces the
   card grid, matching the design.
   ========================================================================== */

.capability {
  padding: var(--section-lg) 0;
}

.capability-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.capability-intro {
  position: sticky;
  top: calc(var(--header-height) + 40px);
}

.capability-intro h2 {
  font-size: clamp(2rem, 5.3vw, 6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-bottom: 0.5em;
}

.capability-intro p {
  max-width: 44ch;
  font-size: 1.06rem;
  line-height: 1.7;
}

/* On cream the rule is the teal border token; on the dark bands it is
   --rule-dark. Same idea, two grounds. */
.capability-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.capability-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  padding: 32px 0;
  border-bottom: 1px solid var(--color-border);
}

.capability-list .numeral {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-teal-ink);
  line-height: 2.6;
}

.capability-list h3 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 1.6vw, 1.7rem);
  font-weight: 400;
}

.capability-list p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
}

/* Centred statement band, as on the design's "accounting finesse" section. */
.statement-section {
  padding: var(--section-lg) 0;
}

.statement-section .section-head {
  max-width: 900px;
  margin-bottom: 0;
}

.statement-section p {
  max-width: 62ch;
  margin: 0 auto 40px;
}

.statement-section .btn {
  margin-top: 0;
}

.statement-section h2 {
  font-size: clamp(2rem, 6.4vw, 7rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* Wide closing band with the service names drifting across its foot. */
.cta-band-wide {
  padding: var(--section-lg) 0 0;
}

.cta-band-wide h2 {
  font-size: clamp(2rem, 6vw, 6.4rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}

.cta-band-wide .lede {
  max-width: 46ch;
  margin: 0 auto 40px;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.7;
  color: #d3dcea;
}

.cta-marquee {
  position: relative;
  margin-top: clamp(56px, 9vh, 104px);
  overflow: clip;
  padding: 10px 0 clamp(40px, 6vh, 72px);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.cta-marquee-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: ctaDrift 48s linear infinite;
}

.cta-marquee span,
.cta-marquee i {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.2;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.16);
}

@keyframes ctaDrift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.cta-marquee:hover .cta-marquee-track {
  animation-play-state: paused;
}



/* Motifs carried over from the old site
   --------------------------------------------------------------------------
   The soft teal/navy blob is the old About and Services pages' background
   shape, reused as quiet texture. Its companion `software_pattern__.png` was
   not carried across: it is a pale blue wash built for the old site's cold
   #EEF1FD background and reads as a cold haze on cream. Its one useful
   element, the dot grid, is redrawn here as a gradient at no file cost.
   ========================================================================== */

.motif-blob {
  position: relative;
  overflow: clip;
}

.motif-blob::before {
  content: "";
  position: absolute;
  top: -12%;
  right: -14%;
  width: min(760px, 62vw);
  aspect-ratio: 509 / 328;
  background: url("../assets/images/blob.png") no-repeat center / contain;
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
  /* Drift tier: the blob is decorative, so it can move while the copy in
     front of it stays put. Amplitude sits inside the 40px budget. */
  transform: translate3d(0, calc((var(--p, 0) - 0.5) * 52px), 0);
}

.motif-blob.is-live::before {
  will-change: transform;
}

.motif-blob.blob-left::before {
  right: auto;
  left: -16%;
  top: auto;
  bottom: -18%;
}

.motif-blob > .container {
  position: relative;
  z-index: 1;
}

/* Dot grid for the navy bands — the one part of the old pattern worth
   keeping, drawn rather than downloaded. */
.motif-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
  opacity: 0.55;
  pointer-events: none;
}

.cta-band > .container {
  position: relative;
  z-index: 1;
}

/* People (team page)
   --------------------------------------------------------------------------
   Portrait-led profile cards. The 4:5 photo runs edge to edge at the top of
   the card, so .card's own padding moves onto the body instead.
   ========================================================================== */

.people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.person {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.person-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 15%;
  border-bottom: 1px solid var(--color-border);
}

.person-body {
  flex: 1;
  padding: 24px 26px 28px;
}

.person h2 {
  margin: 0 0 4px;
  font-size: 1.4rem;
}

.person-role {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-teal-ink);
}

/* Only two of the six hold a formal designation, so this line is optional and
   must not leave a gap when it is absent. */
.person-creds {
  display: inline-block;
  margin: 10px 0 0;
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.person-skills {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: 7px;
}

.person-skills li {
  position: relative;
  padding-left: 18px;
  font-size: 0.85rem;
  line-height: 1.45;
}

.person-skills li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-teal);
  opacity: 0.55;
}

/* Two to a row on a 1560px container gives cards near 750px wide, and a 4:5
   portrait at that width would stand almost 950px tall. Above this breakpoint
   the card turns on its side: portrait left, details right. */
@media (min-width: 900px) {
  .person {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .person-photo {
    height: 100%;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid var(--color-border);
  }

  .person-body {
    padding: 28px 30px 30px;
  }
}

/* One to a row once two would be too narrow to read. */
@media (max-width: 640px) {
  .people-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Timeline (about page)
   --------------------------------------------------------------------------
   Milestones down a teal rule, each marked with a node. The rule is drawn on
   the list so it spans every item without a per-item pseudo-element stack.
   ========================================================================== */

.timeline {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0 0 0 32px;
  display: grid;
  gap: 36px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 5px;
  width: 1px;
  background: linear-gradient(to bottom, var(--color-teal), rgba(63, 129, 137, 0.15));
}

.timeline li {
  position: relative;
}

.timeline li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: -32px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  border: 2px solid var(--color-teal);
}

.timeline-when {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal-ink);
  margin-bottom: 4px;
}

.timeline h3 {
  margin: 0 0 6px;
  font-size: 1.25rem;
}

.timeline p {
  margin: 0;
  max-width: 62ch;
}

/* Stats
   ========================================================================== */

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

.stat .num {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-navy);
}

.stat .label {
  color: var(--color-body);
  font-size: 0.95rem;
}

/* CTA band
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(60% 120% at 50% 0%, var(--wash-teal), transparent 60%),
    var(--color-navy-dark);
  color: #fff;
  text-align: center;
}

.cta-band h2 { color: #fff; }
.cta-band p { color: #cfd8e3; }

/* Contact
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.contact-info .item {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.contact-info .icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
}

/* Inline link that needs to read as a link without a button's weight. */
.text-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-teal-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--color-navy);
}

.form-status {
  font-size: 0.9rem;
  color: var(--color-navy);
}

/* "What happens next" list, beside the contact details.
   -------------------------------------------------------------------------- */

.next-steps {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 24px;
}

.next-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.next-steps-n {
  font: 700 0.78rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  color: var(--color-teal-ink);
  padding-top: 4px;
  flex-shrink: 0;
}

.next-steps h3 {
  font-size: 1.15rem;
  margin: 0 0 4px;
}

.next-steps p { margin: 0; }

/* Enquiry wizard: drawer on desktop, sheet on phone
   --------------------------------------------------------------------------
   Ported from the Claude Design project at ".md's/Redesign popup window"
   (Enquiry Panel.dc.html + Enquiry Popup Redesign.dc.html). That design
   settled on two layouts -- a right-anchored drawer on a wide screen, a
   bottom sheet on a phone -- after exploring four in earlier iterations
   (see the project's screenshots/ folder). It also introduced a small
   palette and scale of its own, distinct from the rest of the site: a
   darker ink, a slightly different teal, IBM Plex Mono for the step
   counter, and pill-shaped choosers instead of checkbox/radio lists. Those
   tokens are scoped to --eq-* below rather than folded into the site's
   --color-* set, because they are a deliberate departure for this one
   component, not a site-wide change nobody asked for.

   <dialog> + showModal() gives the top layer (clears the fixed header with
   no z-index fight), a focus trap, Escape-to-close and ::backdrop for free;
   the drawer/sheet positioning is plain flexbox on the dialog's own box.
   Breakpoint is 767px, matching the site's documented phone tier (see
   README's "Phones" section) rather than the arbitrary 640px this
   component used before the redesign.
   ========================================================================== */

:root {
  --eq-ink: #14222E;
  --eq-body: #4A555D;
  --eq-muted: #6B747B;
  --eq-teal: #2E6A6C;
  --eq-teal-dark: #245658;
  --eq-teal-ink: #173F41;
  --eq-bg: var(--color-cream);        /* #FBF9F4 in the source; imperceptible from this token */
  --eq-surface: #FFFFFF;
  --eq-border: #DCD6CB;
  --eq-border-soft: #E9E4DA;
  --eq-mark-border: #C3BDB1;
  --eq-tile-border: #E4DFD5;
  --eq-tile-on: #EAF2F0;
  --eq-pill-on: #E4EEEC;
  --eq-track: #E2DDD3;
  --eq-handle: #D8D2C6;
  --eq-hover: #EAE5DB;
  --eq-bg-soft: #F4F1EA;
  --eq-bg-note: #EFEBE3;
  --eq-bg-warn: #F6E9E4;
  --eq-warn-ink: #5A2A20;
  --eq-error: #A23B2A;
  --eq-tag-bg: #EEF3F2;
  --eq-focus: rgba(46, 106, 108, 0.14);
  --eq-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

.eq {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  color: var(--eq-ink);
}

.eq::backdrop {
  background: rgba(15, 25, 40, 0.55);
}

.eq[open] {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 14px;
}

.eq-panel {
  width: min(500px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--eq-bg);
  border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgba(10, 20, 45, 0.55);
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

/* Mobile-only drag handle, purely decorative (no swipe gesture is wired
   up -- Escape, the close button and a backdrop tap all still close it). */
.eq-handle { display: none; }

/* Head
   -------------------------------------------------------------------------- */

.eq-head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px clamp(20px, 6%, 36px) 0;
}

.eq-head-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Shared small tracked-label style: the header eyebrow and the two "You
   asked about" / "We will reply by" kickers on the sent screen. Deliberately
   its own style rather than the site's .eyebrow -- reusing that would pull
   in --color-teal-ink, a third teal shade alongside this component's own
   --eq-teal and --eq-teal-dark. */
.eq-kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eq-teal);
  margin: 0 0 4px;
}

.eq-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(26px, 4.2vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--eq-ink);
  margin: 0;
}

.eq-title:focus,
.eq-title:focus-visible { outline: none; }

.eq-close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--eq-border-soft);
  border-radius: 999px;
  background: var(--eq-surface);
  color: var(--eq-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eq-close:hover { background: var(--eq-hover); }

/* Progress: N equal segments (one per step, so it redraws as services are
   chosen or dropped) plus a step counter and a preview of what comes next.
   -------------------------------------------------------------------------- */

.eq-progress-wrap {
  flex-shrink: 0;
  padding: 20px clamp(20px, 6%, 36px) 18px;
  border-bottom: 1px solid var(--eq-border-soft);
}

.eq-progress-wrap[hidden] { display: none; }

.eqg-track {
  display: flex;
  gap: 4px;
}

.eqg-seg {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: var(--eq-track);
  transition: background 0.3s ease;
}

.eqg-seg.is-on { background: var(--eq-teal); }

.eqg-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.eqg-count {
  font-family: var(--eq-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--eq-teal);
  white-space: nowrap;
}

.eqg-next {
  font-size: 12.5px;
  color: var(--eq-muted);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The step-1 footer slot that would otherwise be empty (there is no Back
   yet): a live count of what has been picked so far. */
.eqg-selcount {
  font-size: 14px;
  /* --eq-muted is 4.22:1 against this footer's --eq-bg-soft -- just under
     AA's 4.5:1 floor for this weight/size, even though the same colour
     clears it everywhere else it appears (--eq-bg is lighter). */
  color: var(--eq-body);
  margin-left: 14px;
}

.eqg-selcount[hidden] { display: none; }

/* Body -- the only scrolling region, so the head and footer stay put
   -------------------------------------------------------------------------- */

.eq-form { display: contents; }

.eq-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px clamp(20px, 6%, 36px) 28px;
}

@keyframes eqStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.eq-body-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: eqStepIn 220ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .eq-body-inner { animation: none; }
}

.eq-intro {
  margin: 0;
  color: var(--eq-body);
  font-size: 15.5px;
}

/* Service chooser: card tiles, always shown this way regardless of the
   pill/list treatment used for the narrower questions inside a service.
   -------------------------------------------------------------------------- */

.eqt-grid {
  display: grid;
  /* min() so a track can shrink below its preferred floor instead of
     pushing the panel wider than a narrow viewport. */
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}

.eqt {
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  border: 1px solid var(--eq-tile-border);
  background: var(--eq-surface);
  box-shadow: 0 1px 2px rgba(20, 34, 46, 0.04);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.eqt:hover { border-color: #9DB9B7; }

.eqt.is-on {
  border-color: var(--eq-teal);
  background: var(--eq-tile-on);
  box-shadow: 0 0 0 1px var(--eq-teal) inset;
}

.eqt:focus-visible { outline: 2px solid var(--eq-teal); outline-offset: 3px; }

.eqt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.eqt-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--eq-tag-bg);
  font-size: 11.5px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eq-teal-dark);
}

.eqt-title {
  margin-top: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--eq-ink);
}

.eqt-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--eq-body);
}

/* The selection mark: a circle (tiles, single-choice pills) or a rounded
   square (multi-choice pills), with a two-line tick drawn by rotating a
   corner -- no icon font or image asset needed. */

.eqp-mark {
  flex: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--eq-mark-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.eqp-mark-round { border-radius: 999px; }
.eqp-mark-square { border-radius: 6px; }

/* The 22px tile mark keeps that 6px; the 15px pill/consent marks are
   proportionally tighter, matching the source design's own two sizes. */
.eqp-pill .eqp-mark-square,
.eqc .eqp-mark-square { border-radius: 4px; }

.eqp-tick {
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.eqt.is-on .eqp-mark,
.eqp-pill.is-on .eqp-mark,
.eqc.is-on .eqp-mark {
  border-color: var(--eq-teal);
  background: var(--eq-teal);
}

.eqt.is-on .eqp-tick,
.eqp-pill.is-on .eqp-tick,
.eqc.is-on .eqp-tick { opacity: 1; }

/* Fields
   -------------------------------------------------------------------------- */

.eqf { min-width: 0; }

.eqf-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--eq-ink);
  margin-bottom: 10px;
}

.eqf-req { color: var(--eq-teal); }

.eqf-hint {
  margin: -4px 0 12px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--eq-muted);
}

.eqf-note {
  margin: 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--eq-bg-note);
  font-size: 15px;
  color: var(--eq-ink);
}

.eq-body select,
.eq-body input[type="text"],
.eq-body input[type="email"],
.eq-body input[type="tel"],
.eq-body textarea {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--eq-border);
  background: var(--eq-surface);
  font: inherit;
  font-size: 15px;
  color: var(--eq-ink);
}

.eq-body textarea {
  height: auto;
  padding: 13px 16px;
  line-height: 1.55;
  resize: vertical;
  min-height: 96px;
}

.eq-body select {
  appearance: none;
  -webkit-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'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232E6A6C' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.eq-body select:focus,
.eq-body input:focus,
.eq-body textarea:focus {
  outline: none;
  border-color: var(--eq-teal);
  box-shadow: 0 0 0 3px var(--eq-focus);
}

.eq-body .is-invalid { border-color: #C98A7E; }

/* Pill / chip option groups
   -------------------------------------------------------------------------- */

.eqp-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.eqp-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--eq-border);
  background: var(--eq-surface);
  color: var(--eq-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.eqp-pill .eqp-mark {
  width: 15px;
  height: 15px;
  border-width: 1.5px;
}

.eqp-pill .eqp-tick {
  width: 7px;
  height: 4px;
  border-width: 1.75px;
}

.eqp-pill:hover { border-color: #9DB9B7; }

.eqp-pill.is-on {
  border-color: var(--eq-teal);
  background: var(--eq-pill-on);
  color: var(--eq-teal-ink);
  font-weight: 700;
}

.eqp-pill:focus-visible { outline: 2px solid var(--eq-teal); outline-offset: 2px; }

/* Consent checkbox
   -------------------------------------------------------------------------- */

.eqc {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--eq-body);
  font-size: 14.5px;
  cursor: pointer;
}

.eqc .eqp-mark {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.eqc-text { flex: 1; }

.eqc:focus-visible { outline: 2px solid var(--eq-teal); outline-offset: 3px; border-radius: 4px; }

/* Honeypot: off-screen rather than display:none, because some bots skip
   anything that is not rendered. */
.eq-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Not-connected notice, as a soft warning card rather than inline text. */
.eqw {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--eq-bg-warn);
  color: var(--eq-warn-ink);
  font-size: 14.5px;
}

.eqw a { color: var(--eq-teal); font-weight: 700; }

.eqf-error {
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--eq-error);
}

/* Sent confirmation: a check, a line of thanks, and a recap of what was
   asked and how the reply will arrive.
   -------------------------------------------------------------------------- */

.eqs-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.eqs-check {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--eq-teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.eqs-check-tick {
  display: block;
  width: 16px;
  height: 8px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: translateY(-2px) rotate(-45deg);
}

.eqs-msg { margin: 0; font-size: 16.5px; color: var(--eq-body); }

.eqs-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 14px;
  background: var(--eq-surface);
  border: 1px solid var(--eq-border-soft);
}

.eqs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.eqs-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--eq-pill-on);
  color: var(--eq-teal-ink);
  font-size: 14px;
}

.eqs-rule { height: 1px; background: var(--eq-border-soft); }

.eqs-reply { font-size: 15.5px; color: var(--eq-ink); }

/* Status (network error), footer
   -------------------------------------------------------------------------- */

.eq-status {
  flex-shrink: 0;
  margin: 0;
  padding: 0 clamp(20px, 6%, 36px);
  font-size: 14.5px;
  color: var(--eq-warn-ink);
}

.eq-status:empty { display: none; }
.eq-status a { color: var(--eq-teal); font-weight: 700; }

.eq-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px clamp(20px, 6%, 36px);
  border-top: 1px solid var(--eq-border-soft);
  background: var(--eq-bg-soft);
}

.eq-foot-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.eqb-back,
.eqb-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.eqb-back {
  padding: 0 18px 0 14px;
  border: 1px solid var(--eq-handle);
  background: transparent;
  color: var(--eq-ink);
}

.eqb-back:hover { background: var(--eq-hover); }
.eqb-back[hidden] { display: none; }

.eqb-next {
  padding: 0 22px 0 24px;
  border: none;
  background: var(--eq-teal);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 6px 16px -8px rgba(46, 106, 108, 0.7);
  transition: background 0.16s ease;
}

.eqb-next:hover { background: var(--eq-teal-dark); }
.eqb-next:disabled { opacity: 0.6; cursor: default; }

.eqn-arrow[hidden] { display: none; }

/* Phones: bottom sheet instead of a right-hand drawer.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .eq[open] {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  .eq-panel {
    width: 100%;
    max-height: min(90vh, 800px);
    border-radius: 20px 20px 0 0;
  }

  .eq-handle {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding-top: 10px;
  }

  .eq-handle::after {
    content: "";
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background: var(--eq-handle);
  }

  .eq-head { padding-top: 14px; }
  .eq-title { font-size: 1.4rem; }

  .eq-foot { flex-wrap: wrap; }
  .eqb-next { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .eqg-seg { transition: none; }
  .eqp-mark,
  .eqp-tick,
  .eqt,
  .eqp-pill,
  .eqb-next { transition: none; }
}

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-top: 32px;
}

.map-embed iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

/* Team
   ========================================================================== */

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

.team-member .photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-body);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.team-member .role {
  color: var(--color-teal-ink);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

/* Closing ledger + footer  (Claude Design "Footer Options", direction 1b)
   --------------------------------------------------------------------------
   A paper CTA card straddles the boundary between the page and the footer:
   the wrapper is half page-colour, half footer-navy, and the card sits across
   the join. Colours are mapped onto this site's tokens rather than the
   design's literals, so the footer stays the same navy as everything else.
   ========================================================================== */

.ledger {
  /* Top half the page it is leaving, bottom half the footer it is entering. */
  background: linear-gradient(var(--ledger-from, var(--color-bg)) 0 50%,
                              var(--color-navy-dark) 50% 100%);
  padding: 0 clamp(20px, 7vw, 112px);
}

.ledger-card {
  background: var(--color-cream);
  border-radius: var(--radius);
  padding: clamp(36px, 5vw, 64px) clamp(28px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  box-shadow: 0 30px 60px -30px rgba(10, 20, 45, 0.5);
  /* Feint ruling, as on a ledger page. */
  background-image: repeating-linear-gradient(
    var(--color-cream) 0 47px,
    rgba(30, 58, 110, 0.07) 47px 48px);
}

.ledger-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ledger-copy .eyebrow {
  margin: 0;
  letter-spacing: 0.2em;
}

.ledger-copy h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3.75rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--color-navy-dark);
  text-wrap: balance;
}

.ledger-copy p {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--color-body);
}

.ledger-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: min(280px, 100%);
}

.ledger-actions .btn-ledger {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 28px;
  border-radius: var(--radius);
  background: var(--color-navy-dark);
  color: var(--color-cream);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s ease;
}

.ledger-actions .btn-ledger:hover {
  background: var(--color-teal-ink);
  color: #fff;
}

.ledger-actions .ledger-alt {
  display: flex;
  justify-content: space-between;
  padding: 6px 2px;
  border-bottom: 1px solid rgba(30, 58, 110, 0.2);
  font-size: 0.94rem;
  color: var(--color-body);
  text-decoration: none;
}

.ledger-actions .ledger-alt:hover {
  color: var(--color-navy-dark);
}

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

.site-footer {
  background: var(--color-navy-dark);
  color: #c9d3e6;
  /* Tucks under the card so the two read as one object. */
  margin-top: -14px;
  padding: clamp(56px, 8vw, 88px) clamp(20px, 7vw, 112px) 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.footer-mark span:first-child {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--color-teal-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.625rem;
  color: #bfe0d8;
}

.footer-logo {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 500;
  color: #fff;
}

.footer-blurb {
  margin: 0;
  max-width: 300px;
  font-size: 1rem;
  line-height: 1.65;
  color: #a9b6d0;
}

.footer-grid h4 {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(201, 211, 230, 0.3);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #bfe0d8;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ruled rows with a leader number at the end, like a ledger column. */
.footer-grid li {
  border-bottom: 1px solid rgba(201, 211, 230, 0.12);
  line-height: 1.55;
}

.footer-grid li a,
.footer-grid li > span {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-grid li a:hover {
  color: #fff;
  padding-left: 6px;
}

.footer-grid .n {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: #5f7299;
}

.footer-grid .out {
  flex-shrink: 0;
  color: var(--color-teal-light);
}

.footer-address {
  padding: 13px 0;
  border-bottom: 1px solid rgba(201, 211, 230, 0.12);
  color: #dfe5f1;
  line-height: 1.55;
}

.footer-bottom {
  margin-top: clamp(40px, 6vw, 80px);
  padding-top: 22px;
  border-top: 3px double rgba(201, 211, 230, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8125rem;
  color: #8fa0c2;
}

.footer-top {
  display: flex;
  gap: 10px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.footer-top:hover { color: #fff; }

@media (max-width: 900px) {
  .ledger-card { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Placeholder content marker
   ========================================================================== */

.placeholder-note {
  background: #fff8e6;
  border: 1px dashed var(--color-teal);
  color: #6b5217;
  font-size: 0.85rem;
  padding: 10px 16px;
  border-radius: var(--radius);
  margin-bottom: 24px;
}

/* Flip cards (core services, homepage)
   ========================================================================== */

.flip-cards-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* Outer wrapper: fixed portrait card, holds the perspective for the 3D flip
   and receives click/keyboard focus (role="button"). */
.flip-card {
  width: 200px;
  height: 340px;
  margin: 8px;
  perspective: 1000px;
  cursor: pointer;
  outline: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: calc(var(--i, 0) * 80ms);
}

.flip-cards-grid.is-in .flip-card {
  opacity: 1;
  transform: none;
}

@media (min-width: 768px) {
  .flip-card { width: 248px; }
}

.flip-card:focus-visible {
  box-shadow: 0 0 0 2px var(--color-teal), 0 0 0 4px var(--color-bg);
  border-radius: var(--radius);
}

.flip-card.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Inner wrapper: this is what actually rotates 180deg on flip. */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  transition: transform 0.5s ease-in-out;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--shadow);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 250ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out;
}

/* Front: icon + name centered, the card number quietly repeated in two
   opposite corners, and the delivery cadence as a pill in the third. */
.flip-card-front {
  align-items: center;
  justify-content: center;
}

.flip-card-front .flip-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  border: 1px solid rgba(63, 129, 137, 0.35);
  border-radius: var(--radius-pill);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal-ink);
  white-space: nowrap;
}

.flip-card-front .flip-corner-num {
  position: absolute;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--color-ink);
  opacity: 0.3;
}

.flip-card-front .flip-corner-num.top-right {
  top: 16px;
  right: 16px;
}

.flip-card-front .flip-corner-num.bottom-left {
  bottom: 16px;
  left: 16px;
}

.flip-card-front .flip-logo {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
}

.flip-card-front .flip-logo svg {
  width: 100%;
  height: 100%;
}

/* Front caption: the icon on its own didn't identify the service, so the
   name sits under it with a short rule to tie the two together. */
.flip-card-front .flip-front-title {
  margin-top: 18px;
  padding: 0 12px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-navy-dark);
  text-align: center;
}

.flip-card-front .flip-front-title::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: var(--color-teal);
  opacity: 0.55;
}

.flip-card-front .flip-front-desc {
  margin: 14px 0 0;
  padding: 0 16px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-body);
  text-align: center;
}

/* Back: pre-rotated 180deg so it faces forward once the inner wrapper
   flips. The service name, then what actually gets delivered, numbered the
   same way the fronts are. */
.flip-card-back {
  transform: rotateY(180deg);
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

.flip-card-back .flip-back-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px;
  text-align: left;
}

.flip-card-back .flip-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-navy-dark);
}

.flip-deliverables {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.flip-deliverables li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-body);
}

.flip-deliverables li:last-child {
  border-bottom: 0;
}

.flip-deliverables .n {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: var(--color-teal-ink);
}

.flip-back-cta {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal-ink);
}

/* Trust & credentials band (homepage, above the services section)
   --------------------------------------------------------------------------
   Two counter-scrolling rails on navy. Each rail's track holds its content
   twice, so translating it -50% lands exactly on the start of the second
   copy and the loop is invisible. Kept deliberately shorter than the source
   design: smaller marks, tighter padding.
   ========================================================================== */

.trust-band {
  --trust-ink: #8fb6bb;
  display: grid;
  gap: 30px;
  padding: clamp(40px, 4.5vw, 62px) 0;
  background: var(--color-navy-dark);
  overflow: clip;
}

.trust-band > .trust-rail:first-of-type {
  transform: translate3d(0, calc((var(--p, 0) - 0.5) * -36px), 0);
}

.trust-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.7em;
  text-indent: 0.7em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--trust-ink);
  text-align: center;
}

/* Masked so logos dissolve at both edges instead of popping in. */
.trust-rail {
  position: relative;
  min-width: 0;
  overflow: clip;
  padding: 10px 0;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

.trust-rail-ruled {
  padding: 15px 0;
  border-top: 1px solid rgba(63, 129, 137, 0.22);
  border-bottom: 1px solid rgba(63, 129, 137, 0.22);
}

.trust-ticker {
  display: flex;
  width: max-content;
  will-change: transform;
}

.trust-ticker-left { animation: trustLeft 46s linear infinite; }
.trust-ticker-right { animation: trustRight 34s linear infinite; }

@keyframes trustLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes trustRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* Hovering the rail parks it and dims everything but the mark under the
   cursor, so a logo can actually be read. */
.trust-rail:hover .trust-ticker { animation-play-state: paused; }

.trust-logos,
.trust-claims {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.trust-logos { gap: 144px; padding: 0 72px; }

.trust-logos img {
  height: 152px;
  width: auto;
  max-width: 380px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.trust-rail:hover .trust-logos img { opacity: 0.38; }

.trust-rail .trust-logos img:hover {
  opacity: 1;
  filter: drop-shadow(0 10px 22px rgba(10, 20, 34, 0.55));
}

.trust-claims { gap: 50px; padding: 0 26px; }

.trust-claims li {
  display: flex;
  align-items: center;
  gap: 44px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--trust-ink);
}

/* Teal pip between claims, on the item so it travels with the loop. */
.trust-claims li::after {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-teal);
}

@media (max-width: 620px) {
  .trust-band { gap: 20px; padding: 34px 0; }
  .trust-eyebrow { font-size: 0.7rem; letter-spacing: 0.45em; text-indent: 0.45em; }
  .trust-logos { gap: 88px; }
  .trust-logos img { height: 104px; max-width: 260px; }
  .trust-claims { gap: 34px; }
  .trust-claims li { gap: 34px; font-size: 0.72rem; }
}

/* Core services section (homepage) — editorial split built around the flip
   cards: intro + service index on the left, the card cluster on the right.
   ========================================================================== */

.services-feature {
  position: relative;
  overflow: hidden;
}

.services-feature > .container {
  position: relative;
}

.services-feature-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  gap: 96px;
  align-items: center;
}

.services-feature-intro h2 {
  margin-bottom: 0.4em;
}

.services-feature-intro .lede {
  max-width: 34ch;
  margin-bottom: 28px;
}

.services-feature-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.flip-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--color-body);
}

.flip-hint svg {
  width: 16px;
  height: 16px;
  color: var(--color-teal);
}

/* Soft tinted field behind the card cluster. Anchored to the cluster itself
   (not a viewport %) so the gap around the cards stays constant at every
   width, while the panel still bleeds off the right edge of the section. */
.services-feature-cards {
  position: relative;
}

.services-feature-cards::before {
  content: "";
  position: absolute;
  inset: -48px -50vw -32px -48px;
  z-index: -1;
  background:
    radial-gradient(70% 60% at 30% 40%, rgba(63, 129, 137, 0.07), transparent 72%),
    var(--color-bg-alt);
  border-radius: 32px 0 0 32px;
  opacity: 0.7;
  pointer-events: none;
  /* Drift lives on this pseudo-element and nowhere else: a transform on
     .services-feature-cards would become a containing block and flatten the
     cards' perspective, killing the hover tilt. */
  transform: translate3d(0, calc((var(--p, 0) - 0.5) * 56px), 0);
}

/* Card cluster: 2x2, with the right column dropped for an editorial stagger. */
.services-feature .flip-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 20px;
}

.services-feature .flip-card {
  margin: 0;
}

/* The card faces default to --color-bg, which is nearly the same value as the
   tinted field behind them here — lift them to cream so they read as objects
   sitting on the panel rather than dissolving into it. */
.services-feature .flip-card-front,
.services-feature .flip-card-back {
  background: var(--color-cream);
  border-color: rgba(63, 129, 137, 0.28);
  box-shadow: 0 10px 30px rgba(30, 58, 110, 0.10);
}

.services-feature .flip-card:nth-child(2n) {
  margin-top: 40px;
}

.services-feature-note {
  margin: 28px 0 0;
  font-size: 0.8rem;
  text-align: center;
}

@media (max-width: 1040px) {
  .services-feature-cards::before { display: none; }

  .services-feature-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .services-feature-intro .lede { max-width: none; }

  /* Back to the plain wrapping row once the cards are full-width. */
  .services-feature .flip-cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .services-feature .flip-card:nth-child(2n) { margin-top: 0; }
}

@media (max-width: 767px) {
  .services-feature .flip-card {
    width: min(100%, 320px);
    height: 360px;
  }
}

/* Services page upper panel
   --------------------------------------------------------------------------
   The glyph portal is the whole top of the page: the camera lands the reader
   on the heading and the service explorer together, on one continuous ground.
   ========================================================================== */

.diagram-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  align-items: start;
  gap: clamp(32px, 5vw, 80px);
  margin-bottom: clamp(44px, 7vh, 88px);
}

.diagram-head .heading-block {
  max-width: 620px;
}

.diagram-head h1,
.diagram-head .eyebrow {
  color: #fff;
}

.diagram-head h1 {
  font-size: clamp(2.4rem, 5.6vw, 6.4rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin-bottom: 0;
}

.diagram-head h1 em {
  font-style: italic;
  color: var(--color-teal-light);
}

.diagram-head .intro {
  max-width: 46ch;
  margin-top: 0.7em;
  color: #cbd6e6;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.75;
}

/* The single navy surface under both portals. */
.portal-run {
  position: relative;
  background: var(--portal-ground);
}

/* Glyph Portal — scroll-driven camera through live type
   --------------------------------------------------------------------------
   Ported from the React component of the same name (© 2026 Christian
   Katzmann, MIT). The word is SVG text used as a clipPath over a coloured
   field; js/glyph-portal.js scales the clip toward the interior of one letter
   until the field fills the screen. Themed navy here rather than the original
   green.
   ========================================================================== */

.glyph-portal {
  --gp-paper: #101f3d;
  --gp-ink: var(--color-cream);
  --gp-foreground: var(--color-cream);
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--gp-ink);
  /* A portal owns its full height; the global section padding would show as a
     strip above the pin and below the content. */
  padding: 0;
}

.glyph-portal [data-gp-viewport] {
  position: absolute;
  inset: 0 auto auto 0;
  height: 100vh;
  height: 100svh;
  width: 0;
  pointer-events: none;
  visibility: hidden;
}

.glyph-portal [data-gp-pin] {
  position: relative;
  height: var(--gp-height, 100svh);
  overflow: clip;
  isolation: isolate;
}

/* The veil the letterforms are punched out of. */
.glyph-portal [data-gp-veil] {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* The veil takes its mask from --gp-mask, set on the element, because every
   portal needs its own mask id and two on one page must not collide. */
.glyph-portal [data-gp-veil] {
  -webkit-mask: var(--gp-mask);
  mask: var(--gp-mask);
}

/* Around the word, before the camera moves: the deep navy it sits on. */
.veil-paper {
  background: #101f3d;
}

/* The page an outward portal lands on. Its letter is a hole in this. */
.veil-cream {
  background: var(--color-bg);
}

.glyph-portal[data-gp-ready] [data-gp-veil] {
  opacity: 1;
}


.glyph-portal [data-gp-art] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* The scan needs a heavy face: thin strokes contain no inscribable square,
   and the portal would fall back to static. Brand serif is unusable here. */
.glyph-portal [data-gp-glyph],
.glyph-portal [data-gp-fallback] {
  font-family: "Arial Black", "Arial Bold", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: 100px;
  font-kerning: none;
  font-variant-ligatures: none;
  letter-spacing: 0;
}

.glyph-portal [data-gp-marks] {
  fill: none;
  stroke: var(--color-teal-light);
  opacity: 0.6;
}

/* One hit target per letter, so a reader can choose their way in. */
.glyph-portal [data-gp-choices] {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.glyph-portal[data-gp-choosing="true"] [data-gp-choices] {
  visibility: visible;
}

.glyph-portal [data-gp-letter] {
  box-sizing: border-box;
  position: absolute;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: pan-y;
}

.glyph-portal [data-gp-letter]:disabled { pointer-events: none; }

.glyph-portal [data-gp-letter]:focus-visible {
  outline: 2px solid var(--color-teal-light);
  outline-offset: 5px;
}

.glyph-portal [data-gp-front] {
  position: absolute;
  inset: 0;
  opacity: var(--gp-caption, 1);
  pointer-events: none;
}

.gp-eyebrow {
  position: absolute;
  inset: auto 24px calc(100% - var(--gp-word-top, 35%) + 30px);
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-teal-light);
}

/* Overline tucked against the top of the masked word so the two read as one
   lockup. Wide tracking is the point of it; the trailing letter-space is put
   back as text-indent, or the line sits off centre by half that space. */
.gp-overline {
  position: absolute;
  inset: auto 24px calc(100% - var(--gp-word-top, 35%) + 1.25em);
  margin: 0;
  text-align: center;
  font-family: "Archivo Black", "Arial Black", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(0.9rem, 2.3vw, 2.25rem);
  line-height: 0.9;
  letter-spacing: 1em;
  text-indent: 1em;
  text-transform: uppercase;
  color: #e2e2e2;
  pointer-events: none;
  user-select: none;
}

/* The wordmark, recoloured to a flat white silhouette and laid behind the
   lettering. Sits above the veil so it reads across the whole hero, as in the
   design, rather than only inside the letter holes. */
/* The mask resolves against the masked element's own box, so it has to be
   carried by a layer that shares the veil's geometry — not by the image, which
   is offset, scaled and rotated inside it. */
.gp-logo-layer {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--gp-mask);
  mask: var(--gp-mask);
  pointer-events: none;
  user-select: none;
}

.gp-script {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -52%) rotate(-4deg);
  font-family: var(--font-script);
  font-size: min(50vw, 780px);
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  opacity: 0.12;
}

/* The design's display face, on this hero only — the other portals keep the
   system stack they were signed off with. */
.portal-team [data-gp-glyph],
.portal-team [data-gp-fallback] {
  font-family: "Archivo Black", "Arial Black", Arial, sans-serif;
  font-weight: 400;
}

.portal-team .gp-support {
  font-size: clamp(1rem, 1.3vw, 1.19rem);
  font-weight: 300;
  color: #c9cfdc;
}

.glyph-portal.portal-team .gp-support {
  inset: calc(var(--gp-word-bottom, 50%) + 48px) 24px auto;
}

/* Hung off the word rather than the bottom of the screen, so the lockup
   stays one block on tall viewports. */
.glyph-portal.portal-team [data-gp-caption] {
  inset: calc(var(--gp-word-bottom, 50%) + 128px) 8% auto;
}

.portal-team [data-gp-enter] {
  gap: 14px;
  padding: 12px 22px;
  border-color: #3a4666;
  color: #6fd3c3;
  font-size: 0.8125rem;
  font-weight: 700;
}

.portal-team [data-gp-enter] span {
  color: #8a93ab;
}

.portal-team [data-gp-enter]:hover {
  background: #6fd3c3;
  color: #111f40;
}

.portal-team [data-gp-enter]:hover span {
  color: #111f40;
}

.gp-support {
  position: absolute;
  inset: calc(var(--gp-word-bottom, 50%) + 30px) 24px auto;
  margin: 0;
  text-align: center;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: rgba(255, 253, 249, 0.72);
}

.glyph-portal [data-gp-caption] {
  position: absolute;
  inset: auto 8% 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: var(--gp-caption, 1);
  pointer-events: var(--gp-caption-hit, auto);
}

.glyph-portal [data-gp-enter] {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--rule-dark-strong);
  border-radius: var(--radius-pill);
  color: var(--color-teal-light);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.glyph-portal [data-gp-enter]:hover {
  background: var(--color-teal-light);
  color: var(--color-navy-dark);
}

/* The word, drawn only when the script has not measured it (no-JS). */
.glyph-portal [data-gp-fallback] {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  font-size: 11vw;
  line-height: 1;
  color: var(--color-teal-light);
}

.glyph-portal[data-gp-ready] [data-gp-fallback] { visibility: hidden; }

.glyph-portal [data-gp-content] {
  box-sizing: border-box;
  position: relative;
  min-height: var(--gp-height, 100svh);
  /* Bottom padding matters wherever a portal's content is the last thing
     before a different surface — on the team page the profile grid was
     running straight into the cream section below it. */
  padding: var(--section-lg) 0;
  display: grid;
  align-content: start;
  color: var(--gp-foreground);
}

.glyph-portal[data-gp-motion="on"] [data-gp-pin] {
  position: sticky;
  top: 0;
}

.glyph-portal[data-gp-motion="on"] [data-gp-content] {
  margin-top: calc((var(--gp-length, 2.4) - 1) * var(--gp-height, 100svh));
  background: transparent;
  opacity: var(--gp-reveal, 0);
  pointer-events: none;
}

.glyph-portal[data-gp-motion="on"][data-gp-entered="true"] [data-gp-content] {
  pointer-events: auto;
}

.glyph-portal[data-gp-motion="off"] [data-gp-content] {
  background: var(--color-navy-dark);
}

@media (prefers-reduced-motion: reduce) {
  .glyph-portal [data-gp-pin] { position: relative !important; }
  .glyph-portal [data-gp-content] {
    margin-top: 0 !important;
    opacity: 1 !important;
    min-height: 0;
    padding-block: 64px;
    background: var(--color-navy-dark);
  }
  .glyph-portal [data-gp-caption] { opacity: 1 !important; }
}

/* Content that lands inside a portal is on the navy ground, not on cream, so
   the components it borrows have to be restated for that surface. Cards keep
   their shape but become translucent panels, as the services detail card does.
   ========================================================================== */

.glyph-portal:not(.glyph-portal-out) [data-gp-content] .card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--rule-dark-strong);
  box-shadow: none;
  color: var(--gp-foreground);
}

.glyph-portal:not(.glyph-portal-out) [data-gp-content] .card p,
.glyph-portal:not(.glyph-portal-out) [data-gp-content] p {
  color: #c2cddd;
}

.glyph-portal:not(.glyph-portal-out) [data-gp-content] h2,
.glyph-portal:not(.glyph-portal-out) [data-gp-content] h3 {
  color: #fff;
}

.glyph-portal:not(.glyph-portal-out) [data-gp-content] .eyebrow {
  color: var(--color-teal-light);
}

/* The teal accent is the only colour on a profile card; the generic paragraph
   rule above would flatten it to the same grey as the body copy. */
.glyph-portal:not(.glyph-portal-out) [data-gp-content] .person-role,
.glyph-portal:not(.glyph-portal-out) [data-gp-content] .person-creds {
  color: var(--color-teal-light);
}

.glyph-portal:not(.glyph-portal-out) [data-gp-content] .person-creds {
  border-color: var(--rule-dark-strong);
}

.glyph-portal:not(.glyph-portal-out) [data-gp-content] .btn-outline-navy {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.glyph-portal:not(.glyph-portal-out) [data-gp-content] .btn-outline-navy:hover {
  background: #fff;
  color: var(--color-navy-dark);
}

/* Profile cards invert the rule above: rather than a translucent panel on the
   navy, they are light panels with dark type, so the portraits sit in a frame
   instead of dissolving into the ground. Same prefix as the rules they
   override, placed after them so they win.
   ========================================================================== */

/* The detail card is a light panel inside a portal, so the dark-ground rules
   above would paint its heading white and its body copy pale — invisible on
   cream. Same prefix, placed after, to win at equal specificity. */
.glyph-portal:not(.glyph-portal-out) [data-gp-content] .service-detail h2 {
  color: var(--color-navy-dark);
}

.glyph-portal:not(.glyph-portal-out) [data-gp-content] .service-detail p {
  color: var(--color-body);
}

.glyph-portal:not(.glyph-portal-out) [data-gp-content] .person {
  background: var(--color-cream);
  border-color: var(--color-border);
  color: var(--color-ink);
}

.glyph-portal:not(.glyph-portal-out) [data-gp-content] .person h2 {
  color: var(--color-navy-dark);
}

.glyph-portal:not(.glyph-portal-out) [data-gp-content] .person p {
  color: var(--color-body);
}

.glyph-portal:not(.glyph-portal-out) [data-gp-content] .person .person-role,
.glyph-portal:not(.glyph-portal-out) [data-gp-content] .person .person-creds {
  color: var(--color-teal-ink);
}

.glyph-portal:not(.glyph-portal-out) [data-gp-content] .person .person-creds {
  border-color: var(--color-border);
}

.glyph-portal:not(.glyph-portal-out) [data-gp-content] .person .person-skills li {
  color: var(--color-body);
}

/* Outward portal — the hero's mirror
   --------------------------------------------------------------------------
   Paper is cream because this one lands on the light section. The pin overlays
   the content instead of preceding it, so the navy covers the arriving section
   and then contracts onto its heading's H.
   ========================================================================== */

/* Cream only once the camera has landed; before that the veil is the page and
   the section must stay transparent, or the hole would show cream instead of
   the navy underneath. */
.glyph-portal-out[data-gp-landed="true"] {
  background: var(--color-bg);
}

.glyph-portal-out[data-gp-landed="true"] [data-gp-pin] {
  visibility: hidden;
}

.glyph-portal-out {
  --gp-paper: var(--color-bg);
  --gp-ink: var(--color-ink);
  --gp-foreground: var(--color-ink);
  background: transparent;
  padding: 0;
}

/* The pin sits on top of the content rather than above it in flow, so the
   field can cover the section it is about to reveal. */
.glyph-portal-out[data-gp-motion="on"] [data-gp-pin] {
  position: sticky;
  top: 0;
  margin-bottom: calc(var(--gp-height, 100svh) * -1);
  z-index: 2;
  pointer-events: none;
}

.glyph-portal-out[data-gp-motion="on"] [data-gp-content] {
  margin-top: 0;
  position: relative;
  z-index: 3;
  pointer-events: auto;
  padding: calc(var(--gp-height, 100svh) * 1.05) 0 var(--section-lg);
  /* Fades in over the last stretch of the camera's travel, so the copy is not
     already sitting there at full strength beside a letter three times its
     final size. */
  opacity: var(--gp-caption, 1);
}

.glyph-portal-out [data-gp-fallback] { color: var(--color-navy-dark); }

.glyph-portal-out[data-gp-motion="off"] [data-gp-content] {
  background: var(--color-bg);
  padding: var(--section-lg) 0 0;
}

/* A heading that receives a landing needs display scale, or the camera
   finishes on a letter too small to have been worth the journey. */
.glyph-portal-out .section-head h2 {
  font-size: clamp(2rem, 5.3vw, 6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-bottom: 0.4em;
}

.glyph-portal-out .capability-intro h2 {
  max-width: 13ch;
}

/* The landing glyph: the hero's face and scale, set as the heading's initial
   so the camera has something real to finish on. */
.portal-cap {
  float: left;
  font-family: "Arial Black", "Arial Bold", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: 2.6em;
  line-height: 0.76;
  letter-spacing: -0.02em;
  margin: 0.06em 0.08em 0 0;
  color: var(--color-navy-dark);
}

/* While the camera is moving, the hole in the veil is this letter, so the
   glyph itself must not paint — it is only holding the box the camera lands
   on. At the landing they coincide exactly and the real one takes over. */
.glyph-portal-out[data-gp-motion="on"]:not([data-gp-landed="true"]) .portal-cap {
  visibility: hidden;
}

.portal-cap-rest {
  margin-left: -0.03em;
}

@media (prefers-reduced-motion: reduce) {
  .glyph-portal-out [data-gp-pin] { display: none; }
  .glyph-portal-out .portal-cap { visibility: visible; }
}

/* Service explorer: numbered index on the left, detail card on the right.
   The list is the control and the card is the display, so only one thing on
   the page claims to be interactive. */

/* A hairline joins the heading to the list, so the panel reads as one
   composition rather than two stacked blocks. */
.service-explorer {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 0.92fr);
  gap: clamp(32px, 5.5vw, 96px);
  align-items: start;
  position: relative;
  padding-top: clamp(40px, 6vh, 72px);
  border-top: 1px solid var(--rule-dark);
  padding-bottom: clamp(56px, 8vh, 96px);
}

.service-index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-dark);
  counter-reset: none;
}

.service-index li {
  border-bottom: 1px solid var(--rule-dark);
}

.service-index li:last-child {
  border-bottom: 0;
}

.service-row {
  display: flex;
  align-items: baseline;
  gap: 28px;
  width: 100%;
  padding: 13px 10px 13px 0;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  font-family: inherit;
  color: #cbd6e6;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, padding-left 0.25s ease;
}

.service-row .n {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #8fa3bd;
  flex-shrink: 0;
}

.service-row .name {
  flex: 1;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  font-weight: 400;
  line-height: 1.1;
  transition: font-size 0.25s ease;
}

.service-row .chev {
  opacity: 0;
  color: var(--color-teal-light);
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: translateX(-6px);
}

.service-row:hover,
.service-row:focus-visible {
  color: #fff;
  padding-left: 14px;
  border-left-color: rgba(127, 201, 182, 0.5);
}

.service-row.active {
  color: #fff;
  padding-left: 14px;
  border-left-color: var(--color-teal-light);
}

.service-row.active .name {
  font-size: clamp(1.55rem, 2.6vw, 2.35rem);
}

.service-row.active .n {
  color: var(--color-teal-light);
}

.service-row:hover .chev,
.service-row.active .chev {
  opacity: 1;
  transform: none;
}

/* Detail cards. All seven are in the markup; script.js hides all but one, and
   without it they simply stack. */
.service-panels {
  display: grid;
  gap: 24px;
  position: sticky;
  top: calc(var(--header-height) + 28px);
}

.service-detail {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 3vw, 52px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(63, 129, 137, 0.12), transparent 70%),
    var(--color-cream);
  box-shadow: 0 10px 30px rgba(10, 20, 45, 0.18);
}

/* The service number, oversized and ghosted into the corner. */
.service-ghost {
  position: absolute;
  top: -0.06em;
  right: 0.02em;
  z-index: 0;
  font-family: var(--font-heading);
  font-size: clamp(6rem, 9vw, 9rem);
  line-height: 0.74;
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1px rgba(30, 58, 110, 0.16);
  pointer-events: none;
  user-select: none;
}

.service-detail > *:not(.service-ghost) {
  position: relative;
  z-index: 1;
}

.diagram-tag {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-teal-ink);
  margin-bottom: 26px;
}

.service-detail h2 {
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 3.2vw, 3.1rem);
  font-weight: 400;
  color: var(--color-navy-dark);
  max-width: 14ch;
}

.diagram-panel-desc {
  margin: 0 0 34px;
  max-width: 48ch;
  color: var(--color-body);
  line-height: 1.7;
}

.diagram-checklist {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.diagram-checklist .item {
  display: flex;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
  color: var(--color-body);
}

.diagram-checklist .item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.diagram-checklist .item .n {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: var(--color-teal-ink);
  flex-shrink: 0;
}


/* Reduced motion
   ========================================================================== */


/* Phones: drop the drift tier and park the photo band. Reveals are cheap and
   stay on; depth motion is not worth the jank against iOS Safari's resizing
   viewport. */
@media (max-width: 767px) {
  /* The desktop hero is a sticky stage with 120vh of runway under it. On a
     phone that produced a 244px letterbox with the headline clipped out of it
     and half the fold left as empty paper. Cover-cropping the photo to the
     full fold instead cuts the signage mid-word, since the shot is 1.6:1 and
     the fold is not. So on a phone the hero stops being a camera: the photo
     sits at its own aspect ratio, whole sign visible, and the headline reads
     on navy below it. No runway, so no dead scroll either. */
  .hero-parallax {
    --hero-runway: 0vh;
    --hero-art: 62.5vw;
    height: auto;
  }

  .hero-parallax-stage {
    position: static;
    height: auto;
    background: var(--color-navy-dark);
  }

  .hero-layer-wall,
  .hero-layer-desk,
  .hero-layer-scrim {
    bottom: auto;
    height: var(--hero-art);
    animation: none;
    transform: none;
  }

  .hero-layer-fade { display: none; }

  .hero-layer-front {
    position: static;
    justify-content: flex-start;
    padding-top: calc(var(--header-height) + var(--hero-art) + clamp(28px, 6vw, 44px));
    padding-bottom: clamp(44px, 9vw, 72px);
    animation: none;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .hero-scroll-cue { display: none; }

  .trust-band > .trust-rail:first-of-type,
  .statement-mark,
  .services-feature-cards::before,
  .stats-lead::before,
  .stats-lead::after,
  .team-band-image,
  .motif-blob::before {
    transform: none;
  }

  .team-band-image { inset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Collapse the scroll runway so the hero is a static image rather than
     120vh of scrolling that no longer animates anything. */
  .hero-parallax { --hero-runway: 0vh; }

  .hero-layer-wall,
  .hero-layer-desk,
  .hero-layer-scrim,
  .hero-layer-front,
  .hero-layer-fade,
  .hero-scroll-cue {
    animation: none;
  }

  .hero-scroll-cue { display: none; }

  .flip-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .trust-ticker,
  .cta-marquee-track { animation: none; }

  /* Every drift layer parks, and reveals show rather than animate — the
     content must be complete and legible with no motion at all. */
  .trust-band > .trust-rail:first-of-type,
  .statement-mark,
  .services-feature-cards::before,
  .stats-lead::before,
  .stats-lead::after,
  .team-band-image,
  .motif-blob::before {
    transform: none;
  }

  .team-band-image { inset: 0; }

  .js [data-reveal],
  .js [data-reveal].is-in,
  .js [data-reveal-item] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .meter-fill {
    transform: scaleX(1);
    transition: none;
  }
}

/* Homepage bands rebuilt from the old site (statement, nudge, statistics,
   team, connect, affiliates)
   ========================================================================== */

.statement-band {
  position: relative;
  padding: 64px 0 8px;
  text-align: center;
  overflow: clip;
}

/* Oversized script mark drifting behind the thesis line at roughly a sixth of
   scroll rate. Decoration only — the heading itself never moves. */
.statement-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: var(--font-script);
  font-size: clamp(14rem, 34vw, 30rem);
  line-height: 1;
  color: var(--color-teal);
  opacity: 0.05;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transform: translate3d(-50%, calc(-50% + (var(--p, 0) - 0.5) * -70px), 0);
}

.statement-band h2 {
  max-width: 24ch;
  margin: 0 auto;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 400;
}

/* Slim rule-bounded strip pointing at the full services list. */
.nudge-strip {
  padding: 0 0 72px;
}

.nudge-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.nudge-strip p {
  margin: 0;
  max-width: 62ch;
  font-size: 1.05rem;
}

.nudge-strip .btn {
  flex-shrink: 0;
}

/* Statistics — ported from Claude Design option 4a
   -------------------------------------------------------------------------- */

.stats-panel {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Left: dark lead panel carrying the kicker, headline and the hero figure. */
.stats-lead {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 42px;
  color: #fff;
  background: linear-gradient(165deg, #26467d, #1a3260);
}

/* Two concentric rings bleeding off the bottom-right corner. Absolute, so
   they stay out of the flex flow. */
.stats-lead::before,
.stats-lead::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(127, 201, 182, 0.25);
  pointer-events: none;
}

.stats-lead::before {
  right: -70px;
  bottom: -70px;
  width: 260px;
  height: 260px;
  transform: translate3d(0, calc((var(--p, 0) - 0.5) * -40px), 0);
}

.stats-lead::after {
  right: -30px;
  bottom: -30px;
  width: 170px;
  height: 170px;
  border-color: rgba(127, 201, 182, 0.18);
  transform: translate3d(0, calc((var(--p, 0) - 0.5) * -22px), 0);
}

.stats-lead-top,
.stats-hero {
  position: relative;
}

.stats-kicker {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-teal-light);
  margin-bottom: 14px;
}

.stats-lead h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
}

.stats-lead h2 em {
  font-style: italic;
  color: var(--color-teal-light);
}

.stats-lead-top p {
  margin: 16px 0 0;
  max-width: 340px;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #b9c5cf;
}

.stats-hero {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.stats-hero-value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5vw, 4.1rem);
  font-weight: 500;
  line-height: 0.95;
  color: #fff;
}

.stats-hero p {
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-teal-light);
}

.stats-cta {
  position: relative;
  align-self: flex-start;
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 30px;
  background: var(--color-teal-light);
  color: #123027;
  font-size: 0.82rem;
  font-weight: 700;
  transition: background 0.2s ease;
}

.stats-cta:hover {
  background: #6fb9a6;
  color: #123027;
}

/* Right: the cited figures. */
.stats-body {
  padding: 44px 44px 34px;
  background: var(--color-cream);
}

.stat-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-tile {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 4px 14px rgba(30, 58, 110, 0.05);
}

.stat-tile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.stat-tile-value {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-navy-dark);
}

.stat-tile-tag {
  padding-top: 6px;
  font: 700 0.62rem ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9aa3ab;
}

.stat-tile-label {
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-teal-ink);
}

.stat-tile-note {
  margin: 4px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-body);
}

.compliance-card {
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px;
}

.compliance-title {
  display: block;
  margin-bottom: 18px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a9096;
}

.compliance-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.compliance-rows li {
  display: grid;
  grid-template-columns: 1fr 150px 52px;
  align-items: center;
  gap: 14px;
}

.compliance-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.compliance-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-teal-ink);
  text-align: right;
}

/* Meters: one hue, recessive track, value always labelled in ink, so the
   figure never depends on reading the bar. */
.meter {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(35, 48, 58, 0.1);
  overflow: hidden;
}

.meter-fill {
  display: block;
  width: var(--pct, 0%);
  height: 100%;
  border-radius: 4px;
  background: var(--color-teal);
  /* Grown from nothing when the panel arrives. scaleX keeps the fill on the
     compositor; the width stays the real value so it is correct without JS. */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.meter-fill.is-full {
  transform: scaleX(1);
}

.compliance-rows .meter,
.compliance-rows .meter-fill {
  height: 6px;
  border-radius: 3px;
}

.stats-sources {
  margin: 16px 0 0;
  font-size: 0.7rem;
  line-height: 1.6;
  color: #8a9096;
}

/* Team
   -------------------------------------------------------------------------- */

/* The page's second depth moment: the office photograph drifts behind a navy
   scrim while the copy sits still on top. Same construction as the hero — a
   layer taller than its clipped band, moved by --p — rather than
   background-attachment: fixed, which repaints badly and is broken on iOS. */
.team-band {
  position: relative;
  text-align: center;
  overflow: clip;
  padding: clamp(88px, 12vh, 140px) 0;
  background: var(--color-navy-dark);
}

.team-band > .container {
  position: relative;
  z-index: 1;
}

.team-band-media {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.team-band-image {
  position: absolute;
  inset: -14% 0;
  background-image: url("../assets/images/team-band.jpg");
  background-size: cover;
  background-position: center 45%;
  transform: translate3d(0, calc((var(--p, 0) - 0.5) * -110px), 0);
}

.team-band-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(30, 58, 110, 0.86), rgba(30, 58, 110, 0.92)),
    radial-gradient(60% 60% at 50% 45%, rgba(63, 129, 137, 0.28), transparent 70%);
}

.team-inner {
  max-width: 760px;
  margin: 0 auto;
}

.team-band .eyebrow {
  color: var(--color-teal-light);
}

.team-band h2 {
  color: #fff;
}

.team-inner p {
  color: rgba(255, 255, 255, 0.86);
}

.team-band .btn-outline-navy {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.team-band .btn-outline-navy:hover {
  background: #fff;
  border-color: #fff;
  color: var(--color-navy-dark);
}

.team-inner .btn {
  margin-top: 16px;
}

/* Connect
   -------------------------------------------------------------------------- */

.connect-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(280px, 0.8fr);
  gap: 64px;
  align-items: center;
}

.contact-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-lines li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}

.contact-lines li:first-child {
  border-top: 1px solid var(--color-border);
}

.contact-ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-teal-ink);
}

.contact-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-body);
  margin-bottom: 2px;
}

@media (max-width: 1000px) {
  .connect-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .stats-panel { grid-template-columns: 1fr; }
  .stats-lead { padding: 40px 28px; }
  .stats-body { padding: 32px 28px 28px; }

  .nudge-strip .container {
    flex-direction: column;
    align-items: flex-start;
  }

}

@media (max-width: 620px) {
  .stat-tiles { grid-template-columns: 1fr; }

  .compliance-rows li {
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
  }

  .compliance-name { grid-row: 1; grid-column: 1; }
  .compliance-val  { grid-row: 1; grid-column: 2; }
  .compliance-rows .meter { grid-row: 2; grid-column: 1 / -1; }
}

/* Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .service-explorer { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; gap: 36px; }
  .service-panels,
  .capability-intro { position: static; }
}

@media (max-width: 760px) {
  /* .diagram-head is a grid, so flex-direction did nothing: the second track
     held its 260px minimum and squeezed the heading into the ~40px left over,
     which then overflowed across the paragraph. Stack the two instead. */
  .diagram-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(16px, 4vw, 28px);
  }
  .diagram-head .intro { text-align: left; max-width: none; }
  .service-row .name { font-size: 1.4rem; }
  .service-ghost { font-size: 8rem; }
}

/* The header collapses to the menu button below 920px. With six nav items
   the full header needs about 774px of content, and the container is 88% of
   the viewport, so it stops fitting at roughly 880px -- below that, items
   wrapped onto two lines and "Get in Touch" spilled out of the header. This
   used to sit in the 720px block below, which was right for five items. */
@media (max-width: 920px) {
  .main-nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px 24px;
    gap: 16px;
    display: none;
  }

  .main-nav.open {
    display: flex;
  }

  .nav-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .nav-cta .btn-outline-navy {
    display: none;
  }
}

@media (max-width: 720px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  section { padding: 56px 0; }
}

/* Phone legibility and touch targets
   --------------------------------------------------------------------------
   Measured at 390px: several tracked labels rendered under 10px, and the nav
   toggle — the one control a phone visitor cannot avoid — was 40x32. Last in
   the file so these floors win on order as well as specificity.
   ========================================================================== */

@media (max-width: 767px) {
  .flip-card-front .flip-badge,
  .stat-tile-tag { font-size: 0.72rem; }

  .flip-back-cta { font-size: 0.72rem; }

  .diagram-tag { font-size: 0.74rem; }

  .person-creds { font-size: 0.8rem; }

  .nav-toggle {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* Phone and email are the page's real calls to action on a phone; they were
     19px tall inside a paragraph. */
  .contact-info a,
  .footer-top {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}


/* Our Technology page
   --------------------------------------------------------------------------
   Ported from the Claude Design export in
   design/Marketing/App hero section designs (Our Technology Page.dc.html).
   Values come from that file's inline styles, including its own typefaces
   (Plus Jakarta Sans, JetBrains Mono for the eyebrows, Cormorant italic for
   the quote) -- it is a product showcase with a deliberately different voice
   from the practice pages.

   The hero is a "container scroll": the screen starts tilted back and
   flattens as the page scrolls. Each feature row eases its screen in as it
   enters the viewport. All of that motion is driven by js/tech.js; the
   transforms below under .js are only the starting poses, so the page does
   not flash its final state before the script's first frame. Without
   JavaScript everything simply sits flat.

   Everything is scoped under .tech and sits last in the file, because the
   site's bare element rules (section padding, h1/h2 in Cormorant, p margins,
   img max-width) would otherwise leak straight into it.
   ========================================================================== */

.tech {
  --t-bg: #f3f4f8;
  --t-ink: #141a33;
  --t-body: #3b4262;
  --t-accent: #2c438f;
  --t-link-hover: #16245a;
  --t-teal: #3f8f86;
  --t-navy: #1e2f6e;
  --t-frame: #1f3272;
  --t-frame-edge: #3b4f92;
  --t-screen: #f5f6fa;
  --t-tab-border: #dfe1ea;
  --t-gutter: clamp(20px, 6vw, 96px);

  background: var(--t-bg);
  overflow-x: clip;
  padding-bottom: 120px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--t-ink);
  -webkit-font-smoothing: antialiased;
}


.tech h1,
.tech h2 {
  font-family: inherit;
  color: var(--t-ink);
  margin: 0;
  text-wrap: balance;
}

.tech h1 span,
.tech h2 span { color: var(--t-accent); }

.tech p { margin: 0; }

.tech a {
  color: var(--t-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tech a:hover { color: var(--t-link-hover); }

.tech img {
  max-width: none;
}

/* Hero
   -------------------------------------------------------------------------- */

.tech-hero {
  padding: calc(var(--header-height) + 72px) clamp(8px, 5vw, 80px) clamp(24px, 4vw, 48px);
  perspective: 1000px;
}

.tech-hero-head {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  will-change: transform;
}

.tech-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 21px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 9.6px;
  text-transform: uppercase;
  color: var(--t-teal);
}

.tech h1 {
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.tech-lede {
  max-width: 640px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--t-body);
  text-wrap: pretty;
}

.tech-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 56px;
}

.tech .tech-btn,
.tech .tech-more {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  padding: 14px 22px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--t-navy);
}

.tech .tech-btn {
  background: var(--t-navy);
  color: #fff;
  transition: background 0.2s ease;
}

.tech .tech-btn:hover { background: var(--t-link-hover); color: #fff; }
.tech .tech-more { padding-inline: 8px; }
.tech .tech-more:hover { color: var(--t-link-hover); text-decoration: underline; }

/* The navy frame that holds a screenshot, in the hero and in every row. */
.tech-frame {
  box-sizing: border-box;
  border: 4px solid var(--t-frame-edge);
  padding: 10px;
  background: var(--t-frame);
  border-radius: 20px;
  aspect-ratio: 16 / 10;
  will-change: transform;
  box-shadow: 0 30px 60px -20px rgba(15, 25, 70, 0.45);
}

.tech-frame-hero {
  max-width: 1024px;
  height: clamp(320px, 50vw, 640px);
  aspect-ratio: auto;
  margin: 0 auto;
  padding: clamp(8px, 1.8vw, 22px);
  border-radius: 30px;
  transform-origin: center top;
  box-shadow:
    0 9px 20px rgba(15, 25, 70, 0.29),
    0 37px 37px rgba(15, 25, 70, 0.26),
    0 84px 50px rgba(15, 25, 70, 0.15);
}

.tech-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--t-screen);
}

.tech-frame-hero .tech-screen { border-radius: 12px; }

/* Screenshots fill the screen's width. A tall one is panned slowly by
   js/tech.js; a short one is stretched to the screen's height and cropped
   at the sides rather than leaving an empty strip at the bottom. */
.tech-screen img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: opacity 0.35s ease;
}

/* A hero tab change lays the next screenshot over the current one and
   fades it in, so the screen never goes blank between the two. */
.tech-screen img.is-next {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.tech-tabs {
  max-width: 1024px;
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.tech-tabs button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  min-height: 38px;
  padding: 9px 15px;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--t-tab-border);
  background: #fff;
  color: var(--t-navy);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tech-tabs button:hover { border-color: var(--t-navy); }

.tech-tabs button[aria-pressed="true"] {
  border-color: var(--t-navy);
  background: var(--t-navy);
  color: #fff;
}

/* Feature rows
   -------------------------------------------------------------------------- */

.tech-row {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  box-sizing: content-box;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--t-gutter);
  scroll-margin-top: var(--header-height);
}

.tech-row-rev { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }

.tech-media {
  position: relative;
  perspective: 1200px;
}

.tech-media-phone { padding: 0 clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px) 0; }
.tech-media-badge { padding-bottom: 28px; }

.tech-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  will-change: transform;
}

.tech-kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--t-teal);
}

.tech h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.tech-copy p:not([class]) {
  max-width: 460px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--t-body);
  text-wrap: pretty;
}

.tech .tech-quote {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.3;
  color: var(--t-accent);
}

.tech-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25%;
  aspect-ratio: 9 / 19;
  box-sizing: border-box;
  border: 4px solid var(--t-frame-edge);
  padding: 5px;
  background: var(--t-frame);
  border-radius: 24px;
  will-change: transform, opacity;
  box-shadow: 0 20px 40px -12px rgba(15, 25, 70, 0.5);
}

.tech-phone .tech-screen { border-radius: 16px; }

.tech-badge {
  position: absolute;
  left: -16px;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 40px -16px rgba(15, 25, 70, 0.45);
  will-change: transform, opacity;
}

.tech-badge span { font-size: 13px; font-weight: 600; color: #2c7a4b; }
.tech-badge strong { font-size: 14px; font-weight: 700; color: var(--t-ink); }

/* Starting poses, before js/tech.js takes over on its first frame. */
.js .tech-frame-hero { transform: rotateX(15deg) scale(1.05); }
.js .tech-row .tech-frame { transform: rotateY(18deg) rotateX(8deg) scale(0.9); }
.js .tech-row .tech-copy { opacity: 0.2; transform: translateY(40px); }
.js .tech-row [data-tech-extra] { opacity: 0; }

/* Stacked: one column, words above the screen, as the design does. */
@media (max-width: 860px) {
  .tech-row,
  .tech-row-rev { grid-template-columns: minmax(0, 1fr); }
  .tech-row .tech-media { order: 2; }
}

@media (max-width: 600px) {
  .tech-eyebrow { font-size: 15px; letter-spacing: 6px; }
  .tech-ctas { margin-bottom: 32px; }
  .tech-frame-hero { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .tech-frame-hero,
  .js .tech-row .tech-frame,
  .js .tech-row .tech-copy,
  .js .tech-row [data-tech-extra] { transform: none; opacity: 1; }
  .tech-screen img,
  .tech-tabs button { transition: none; }
}

/* About hero
   --------------------------------------------------------------------------
   Light, photographic opener in place of the ABOUT glyph portal. The title is
   set in Inter to the reference spec; everything after the hero keeps the
   site's own faces. The ground matches the empty left half of Hero.jpg, so
   the photograph has no edge when the viewport is wider than 16:9.
   ========================================================================== */

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

.about-hero {
  --hero-ink: #15191e;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(100svh, 972px);
  padding: calc(var(--header-height) + clamp(64px, 10vh, 120px)) 0 clamp(64px, 10vh, 120px);
  background: #f2f1f7;
  font-family: "Inter", var(--font-body);
}

.about-hero-media {
  position: absolute;
  inset: 0;
}

.about-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}

.about-hero-inner {
  position: relative;
}

.about-hero-copy {
  max-width: 640px;
}

.about-hero .eyebrow {
  font-family: var(--font-body);
  color: var(--color-teal-ink);
}

.about-hero h1 {
  font-family: "Inter", sans-serif;
  font-size: clamp(2.6rem, 5vw, 72px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hero-ink);
  /* Three lines rather than two: the photograph's box edge starts around the
     middle of the frame, and a two-line set runs into it below 1600px. */
  max-width: 8.2em;
  font-feature-settings: "calt" 0, "cv01", "cv05" 0, "cv10", "liga" 0, "ss01" 0, "ss03", "zero" 0;
  margin: 0 0 0.3em;
}

.about-hero-lede {
  max-width: 25em;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.45;
  color: #4b5560;
  margin-bottom: 2.4em;
}

.about-hero-form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 400px);
  padding: 6px 6px 6px 16px;
  background: #fff;
  border: 1px solid #e3e3ea;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(21, 25, 30, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.about-hero-form:focus-within {
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(43, 74, 155, 0.15);
}

.about-hero-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  color: var(--hero-ink);
}

.about-hero-form input::placeholder {
  color: #6b7280;
}

.about-hero-form button {
  flex: none;
  border: 0;
  border-radius: 7px;
  padding: 11px 18px;
  background: var(--color-navy-dark);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.about-hero-form button:hover,
.about-hero-form button:focus-visible {
  background: var(--color-navy);
}

.about-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  min-height: 36px;
  color: var(--color-navy);
  font-size: 1rem;
  font-weight: 500;
}

.about-hero-link:hover {
  color: var(--color-navy-dark);
}

.about-hero-link svg {
  transition: transform 0.2s ease;
}

.about-hero-link:hover svg {
  transform: translateX(2px);
}

/* Below 900px the empty half of the photograph is too narrow to hold the
   copy, so the image drops beneath it and crops in on the card and phone. */
@media (max-width: 899px) {
  .about-hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: calc(var(--header-height) + 56px) 0 0;
  }

  .about-hero-media {
    position: relative;
    order: 2;
    margin-top: 40px;
    aspect-ratio: 4 / 3;
  }

  .about-hero-media img {
    object-position: 82% 70%;
  }
}

/* The intro that used to sit inside the ABOUT portal, now its own section at
   the head of the navy run — so the dark-ground restatements the portal
   content got are repeated here. */
.about-intro {
  padding: var(--section-lg) 0;
  color: var(--color-cream);
}

.about-intro .diagram-head h2 {
  color: #fff;
  font-size: clamp(2.4rem, 5.6vw, 6.4rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin-bottom: 0;
}

.about-intro .diagram-head h2 em {
  font-style: italic;
  color: var(--color-teal-light);
}

.about-intro h2,
.about-intro h3 { color: #fff; }

.about-intro p { color: #c2cddd; }

.about-intro .eyebrow { color: var(--color-teal-light); }

.about-intro .card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--rule-dark-strong);
  box-shadow: none;
}

.about-intro .btn-outline-navy {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.about-intro .btn-outline-navy:hover {
  background: #fff;
  color: var(--color-navy-dark);
}

/* Vision and mission (About)
   --------------------------------------------------------------------------
   The vision sits beside "Our story"; the mission runs full width beneath
   them, so its six commitments lie in a grid instead of stretching one
   column far past the other. Both About layouts set it on the navy ground.
   ========================================================================== */

.vm-vision {
  align-self: center;
}

.vm-lead {
  font-size: 1.05rem;
  line-height: 1.7;
}

.vm-mission {
  margin-top: clamp(32px, 5vh, 56px);
  padding: clamp(28px, 4vw, 48px);
}

.vm-mission-head {
  max-width: 62ch;
}

.vm-mission-head .vm-lead {
  margin-bottom: 0;
}

.commitments {
  list-style: none;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 44px);
}

.commitments li {
  padding-top: 16px;
  border-top: 1px solid var(--rule-dark-strong);
  font-size: 0.95rem;
  line-height: 1.6;
  color: #c2cddd;
}

.commitments strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-weight: 700;
}

/* The teal tick on each rule ties the items to the eyebrow above them. */
.commitments li::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin: -17px 0 15px;
  background: var(--color-teal-light);
}

@media (max-width: 1023px) {
  .commitments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .commitments { grid-template-columns: minmax(0, 1fr); }
}