/* ---------------------------------------------------------------------------
   Growth Pilot — marketing layer. Implements Team.dc.html.

   Built on the design-system tokens in assets/design-system/tokens/. Where the design uses an
   off-scale size (50px, 34px, 26px, 19px, 15.5px, 14.5px) the design wins and the literal is
   kept — it is the approved artifact. Everything else resolves to a token.

   The design canvas is 1280 wide with 70px gutters, so content measures 1140 — matching the
   brief's "max width about 1140px". Mobile is the 375 frame. Breakpoint at 900px.

   Clear Skies rules this file holds to:
   - ~90% neutral. Green is the accent only: CTA fills, eyebrows, the marker bar.
   - Green fills use --gp-green-500. Small green TEXT uses the AA override below.
   - Shadows are navy-tinted. No gradients, no textures, no background imagery.
   ------------------------------------------------------------------------- */

/* ---------- Accessibility override on one design-system token ----------

   OPEN QUESTION FOR THE DESIGN SYSTEM, not a local preference.

   "Clear Skies" names --gp-green-700 (#6FA82E) the "text-safe green on white", and
   Team.dc.html uses it for the eyebrows and the active nav link. Measured, it is 2.87:1 on
   white — well under the 4.5:1 WCAG 2.1 AA needs for normal text, and those labels (13px/600)
   are far too small for the 3:1 large-text allowance. The brief lists AA as an acceptance
   criterion, so small green text uses --gp-green-800 instead: #527C22, the same hue (88
   degrees) and saturation as green-700, only darker. It clears 4.5:1 on all three light
   surfaces the system puts text on — white 4.92:1, gray-100 4.55:1, green-50 4.52:1.

   Scope: SMALL GREEN TEXT ONLY. Green fills (buttons, the marker bar) keep --gp-green-500,
   which is correct and passes as a surface.

   assets/design-system/ is left verbatim on purpose, so this override lives here until the
   token is settled upstream. If the ramp gains a real green-800, delete this and point
   --accent-text-aa at it.
   ------------------------------------------------------------------------- */
:root {
  --gp-green-800: #527C22;
  --accent-text-aa: var(--gp-green-800);
  --gp-on-navy-muted: #CBD2DE; /* CTA body on navy, from the design */
}

/* ---------- Base ----------
   Element rules are wrapped in :where() so they carry ZERO specificity. Without this,
   `.gp a` (0,1,1) beats a single-class component rule like `.gp-footer__link` (0,1,0) and
   links inherit the wrong colour. Keep new element rules in :where() too. */
*, *::before, *::after { box-sizing: border-box; }

body.gp {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

:where(.gp) :where(h1, h2, h3, h4) {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  line-height: var(--leading-heading);
}
:where(.gp) :where(p) { margin: 0; }
:where(.gp) :where(ul) { margin: 0; padding: 0; list-style: none; }
:where(.gp) :where(img, svg) { max-width: 100%; }
:where(.gp) :where(a) { color: var(--text-link); text-decoration: none; }
:where(.gp) :where(a:hover) { color: var(--accent-text-aa); }

.gp :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.gp-skip {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--gp-green-500);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
}
.gp-skip:focus { left: var(--space-4); }

/* ---------- Layout ---------- */
.gp-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--space-5); }
@media (min-width: 900px) { .gp-wrap { padding-inline: 70px; } }

/* Full-bleed tinted band (the two-points section). */
.gp-band { background: var(--surface-subtle); }

/* ---------- Eyebrow + marker ---------- */
.gp-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text-aa);
}
@media (min-width: 900px) { .gp-eyebrow { font-size: 13px; } }

/* Green as a FILL, so green-500 is correct here. */
.gp-marker { display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--gp-green-500); }
@media (min-width: 900px) { .gp-marker { width: 32px; } }

/* ---------- Buttons ---------- */
.gp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.gp-btn--sm { padding: 7px 14px; font-size: var(--text-sm); }
.gp-btn--lg { padding: 14px 28px; }

.gp-btn--primary { background: var(--gp-green-500); color: var(--text-on-accent); }
.gp-btn--primary:hover { background: var(--accent-hover); color: var(--text-on-accent); }

.gp-btn--secondary { background: transparent; border-color: var(--border-default); color: var(--text-heading); }
.gp-btn--secondary:hover { border-color: var(--border-strong); color: var(--text-heading); }

/* ---------- Header (white band, 1px rule) ---------- */
.gp-header { background: var(--surface-page); border-bottom: 1px solid var(--border-default); }
.gp-header__inner {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  min-height: 60px;
  padding: var(--space-2) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.gp-header__logo { flex: none; display: block; }
.gp-header__logo img { display: block; height: 20px; width: auto; }

.gp-header__nav { display: none; }
.gp-header__end { display: flex; align-items: center; gap: var(--space-2); flex: none; }

.gp-header__link {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  white-space: nowrap;
}
.gp-header__link:hover { color: var(--accent-text-aa); }
.gp-header__link.is-on { color: var(--accent-text-aa); }

.gp-burger {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-heading);
  cursor: pointer;
}

.gp-mobilemenu {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-5) var(--space-5);
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-default);
}
.gp-mobilemenu[hidden] { display: none; }
.gp-mobilemenu__link {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}
.gp-mobilemenu__link:last-child { border-bottom: 0; }

@media (min-width: 900px) {
  .gp-header__inner { min-height: 76px; padding-inline: 70px; }
  .gp-header__logo img { height: 30px; }
  .gp-header__nav { display: flex; align-items: center; gap: var(--space-6); }
  .gp-burger { display: none; }
  .gp-mobilemenu { display: none !important; }
}

/* ---------- Hero ---------- */
.gp-hero {
  padding-block: 44px var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.gp-hero__head { display: flex; flex-direction: column; gap: var(--space-4); }
.gp-hero__title {
  font-size: 32px;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.gp-hero__lead { font-size: var(--text-md); line-height: 1.55; text-wrap: pretty; }

@media (min-width: 900px) {
  .gp-hero {
    padding-block: 96px 72px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 64px;
    align-items: end;
  }
  .gp-hero__head { gap: var(--space-5); }
  .gp-hero__title { font-size: 50px; line-height: 1.1; }
  .gp-hero__lead { font-size: 19px; line-height: var(--leading-body); }
}

/* ---------- Bio tiles ---------- */
.gp-tiles-section { padding-bottom: 56px; }
.gp-tiles { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }

.gp-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(16, 24, 40, 0.08);
}

.gp-tile__head { display: flex; align-items: center; gap: 14px; }
.gp-tile__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.gp-tile__photo {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: var(--radius-md);
  object-fit: cover;
  object-position: center top;
  background: var(--surface-subtle);
}
/* Stand-in until a real headshot lands. */
.gp-tile__photo--mono {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  background: var(--surface-subtle);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  letter-spacing: 0.02em;
}

.gp-tile__cap { font-size: 11.5px; }
.gp-tile__name { font-size: 19px; line-height: 1.2; }
.gp-tile__sub { font-size: 12.5px; color: var(--text-muted); }
.gp-tile__summary { font-size: 14px; line-height: 1.55; }

/* Experience list — rows separated by 1px rules, years right-aligned on desktop. */
.gp-exp { display: flex; flex-direction: column; border-top: 1px solid var(--border-default); }
/* Mobile: role on its own line, then "org · years" as one meta line (the design's `meta`). */
.gp-exp__row { display: block; padding-block: 10px; border-bottom: 1px solid var(--border-default); }
.gp-exp__role {
  display: block;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.gp-exp__org { font-size: 13px; color: var(--text-body); }
.gp-exp__years { font-size: 13px; color: var(--text-body); white-space: nowrap; }
/* Separator only when an org actually precedes the years, so a lone date never leads with one. */
.gp-exp__org + .gp-exp__years::before { content: " · "; }

/* LinkedIn button — full width on mobile, inline on desktop. */
.gp-li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: 14px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  transition: border-color 160ms ease-out;
}
.gp-li:hover { border-color: var(--border-strong); color: var(--text-heading); }
.gp-li__arrow { color: var(--accent-text-aa); }

@media (min-width: 900px) {
  .gp-tiles-section { padding-bottom: 96px; }
  .gp-tiles { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .gp-tile { gap: var(--space-6); padding: var(--space-8); }
  .gp-tile__head { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-6); }
  .gp-tile__id { gap: 6px; }
  .gp-tile__photo { width: 120px; height: 120px; border-radius: 12px; }
  .gp-tile__cap { font-size: 13px; }
  .gp-tile__name { font-size: 26px; }
  .gp-tile__sub { font-size: 14px; }
  .gp-tile__summary { font-size: 15.5px; line-height: var(--leading-body); }
  /* Desktop: role over org on the left, years right-aligned on the role's baseline. */
  .gp-exp__row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--space-4);
    align-items: baseline;
    padding-block: var(--space-3);
  }
  .gp-exp__role { grid-column: 1; grid-row: 1; font-size: 14.5px; }
  .gp-exp__org { grid-column: 1; grid-row: 2; font-size: 14px; }
  .gp-exp__years { grid-column: 2; grid-row: 1; color: var(--text-muted); }
  .gp-exp__org + .gp-exp__years::before { content: none; }
  .gp-li { align-self: flex-start; font-size: 14.5px; padding-block: 10px; }
}

/* ---------- Two points ---------- */
.gp-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: 56px;
}
.gp-point {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 22px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.gp-point__title { font-size: var(--text-lg); }
.gp-point__body { font-size: 14.5px; line-height: 1.55; }

@media (min-width: 900px) {
  .gp-points { grid-template-columns: 1fr 1fr; gap: var(--space-6); padding-block: 88px; }
  .gp-point { gap: var(--space-3); padding: var(--space-10); }
  .gp-point__title { font-size: 26px; }
  .gp-point__body { font-size: var(--text-base); line-height: var(--leading-body); }
}

/* ---------- Navy CTA panel (one per page) ---------- */
.gp-cta-section { padding-block: var(--space-10) 56px; }
.gp-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  background: var(--surface-inverse);
  border-radius: var(--radius-lg);
  color: var(--text-inverse);
}
.gp-cta__copy { display: flex; flex-direction: column; gap: var(--space-3); }
.gp-cta__title { color: var(--text-inverse); font-size: 26px; line-height: 1.2; }
.gp-cta__body { color: var(--gp-on-navy-muted); font-size: var(--text-base); line-height: 1.55; }
.gp-cta .gp-btn { width: 100%; }

@media (min-width: 900px) {
  .gp-cta-section { padding-block: 96px; }
  .gp-cta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-12);
    padding: 56px 64px;
  }
  .gp-cta__copy { max-width: 620px; }
  .gp-cta__title { font-size: 34px; }
  .gp-cta__body { font-size: var(--text-md); line-height: var(--leading-body); }
  .gp-cta .gp-btn { width: auto; }
}

/* ---------- Footer (light band) ---------- */
.gp-footer {
  background: var(--surface-subtle);
  border-top: 1px solid var(--border-default);
  padding-block: 36px;
  font-size: 14.5px;
}
.gp-footer__top { display: flex; flex-direction: column; gap: var(--space-6); }
.gp-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 320px; }
.gp-footer__brand img { display: block; height: 22px; width: auto; }
.gp-footer__blurb { font-size: 14.5px; line-height: var(--leading-body); }

.gp-footer__cols { display: flex; gap: 48px; }
.gp-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gp-footer__head {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.gp-footer__link { color: var(--text-heading); }
.gp-footer__link:hover { color: var(--accent-text-aa); }

.gp-footer__rule {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
  font-size: 13px;
  /* The design uses gray-500 here; on the gray-100 footer that measures 4.47:1, just under
     AA. Darkened one step to --text-body (6.95:1). Visually indistinguishable at 13px. */
  color: var(--text-body);
}
.gp-footer__rule .gp-footer__link { font-size: 13px; }

@media (min-width: 900px) {
  .gp-footer { padding-block: var(--space-12); }
  .gp-footer__top { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--space-10); }
  .gp-footer__brand img { height: 26px; }
  .gp-footer__cols { gap: 64px; }
  .gp-footer__rule { margin-top: var(--space-8); padding-top: var(--space-5); }
}

/* ---------- Utilities ---------- */
.gp .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Editor content ---------- */
.gp-prose { max-width: 70ch; }
.gp-prose > * + * { margin-top: var(--space-5); }
.gp-prose h2 { font-size: var(--text-xl); margin-top: var(--space-10); }
.gp-prose h3 { font-size: var(--text-lg); margin-top: var(--space-8); }
.gp-prose ul, .gp-prose ol { padding-left: var(--space-5); list-style: revert; }
.gp-prose li + li { margin-top: var(--space-2); }
.gp-prose a { color: var(--accent-text-aa); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Motion + print ---------- */
@media (prefers-reduced-motion: reduce) {
  .gp *, .gp *::before, .gp *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print {
  .gp-header, .gp-mobilemenu, .gp-burger, .gp-skip, .gp-cta-section { display: none !important; }
  .gp-tile { box-shadow: none; border: 1px solid var(--border-default); break-inside: avoid; }
}

/* ===========================================================================
   SHARED COMPONENT LAYER (handoff README: "Shared layout")

   Section rhythm: 96px on white, 88px on tinted bands, 56px mobile.
   Everything below is used by more than one page — keep page-specific rules out.
   =========================================================================== */

/* ---------- Sections ---------- */
.gp-sec { padding-block: 56px; }
.gp-sec--band { background: var(--surface-subtle); }
.gp-sec--tint { background: var(--gp-green-50); }
@media (min-width: 900px) {
  .gp-sec { padding-block: 96px; }
  .gp-sec--band, .gp-sec--tint { padding-block: 88px; }
}

/* Section header: eyebrow + h2, with an optional arrow link pushed right on desktop. */
.gp-sechead { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-8); }
.gp-sechead__copy { display: flex; flex-direction: column; gap: var(--space-3); max-width: 680px; }
.gp-sechead__title { font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; }
@media (min-width: 900px) {
  .gp-sechead { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--space-10); margin-bottom: 44px; }
  .gp-sechead__title { font-size: 38px; }
}

/* ---------- Arrow link ---------- */
.gp-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px; /* tap target on mobile; harmless on desktop */
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  white-space: nowrap;
}
.gp-arrow:hover { color: var(--accent-text-aa); }
.gp-arrow svg { color: var(--accent-text-aa); flex: none; }
.gp-arrow--onnavy { color: var(--text-inverse); }
.gp-arrow--onnavy:hover { color: var(--gp-green-500); }
@media (min-width: 900px) { .gp-arrow { min-height: 0; } }

/* ---------- Cards ---------- */
.gp-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 28px;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.gp-card--outlined { box-shadow: none; border: 1px solid var(--border-default); }
.gp-card__title { font-size: var(--text-lg); }
.gp-card__body { font-size: var(--text-base); line-height: 1.55; }
@media (min-width: 900px) { .gp-card { padding: var(--space-10); } }

/* ---------- Badge / Tag / Chip (design-system components, as CSS) ---------- */
.gp-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.gp-badge--success { background: var(--gp-green-50); color: var(--accent-text-aa); }
.gp-badge--info { background: #EDF0F6; color: var(--gp-navy-700); }

.gp-tag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  padding: 5px 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
  white-space: nowrap;
}

/* Tech chips on case cards and case studies. */
.gp-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  background: var(--surface-subtle);
  font-size: 12.5px;
  color: var(--text-body);
  white-space: nowrap;
}
.gp-chip--outlined { background: none; border: 1px solid var(--border-default); font-size: 14px; padding: 6px 12px; }
.gp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Image frames ----------
   Screenshots are not supplied yet (handoff: "frames are sized in the designs"). gp_shot()
   renders a real image when one exists and this empty frame otherwise, so a missing asset
   reads as a deliberate placeholder rather than a broken layout. */
.gp-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.gp-shot--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--surface-subtle);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  /* --text-muted measures 4.47:1 on gray-100, just under AA; --text-body clears it. */
  color: var(--text-body);
  text-align: center;
  text-wrap: balance;
}

/* Browser frame */
.gp-browser { border: 1px solid var(--border-default); border-radius: 14px; overflow: hidden; background: var(--surface-card); box-shadow: var(--shadow-lg); }
.gp-browser__bar { display: flex; align-items: center; gap: 7px; height: 32px; padding-inline: var(--space-3); background: var(--surface-subtle); border-bottom: 1px solid var(--border-default); }
.gp-browser__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-default); flex: none; }
.gp-browser__url { margin-left: var(--space-2); flex: 1; height: 16px; border-radius: 6px; background: var(--surface-card); border: 1px solid var(--border-default); }
.gp-browser__screen { background: var(--surface-subtle); }

/* Phone frame */
.gp-phone { padding: 8px; border-radius: 30px; background: var(--surface-inverse); box-shadow: 0 16px 44px rgba(16, 24, 40, 0.22); }
.gp-phone__screen { width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: var(--surface-subtle); }
.gp-phone--sm { padding: 7px; border-radius: 26px; }
.gp-phone--sm .gp-phone__screen { border-radius: 19px; }

/* ---------- Navy panel fact table (Home CTA, Blueprint panel) ---------- */
.gp-facts { display: flex; flex-direction: column; border: 1px solid var(--gp-navy-700); border-radius: 12px; overflow: hidden; }
.gp-facts__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--gp-navy-700); }
.gp-facts__row:last-child { border-bottom: 0; }
.gp-facts__label { font-size: var(--text-base); color: var(--gp-on-navy-muted); }
.gp-facts__value { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--text-inverse); text-align: right; }

/* ===========================================================================
   HOME (designs/Home.dc.html)
   =========================================================================== */

/* ---------- Grids reused across pages ---------- */
.gp-duo, .gp-trio, .gp-quad { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 700px) {
  .gp-duo  { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .gp-quad { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (min-width: 900px) {
  .gp-trio { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .gp-quad { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Hero ---------- */
.gp-home-hero { padding-block: 44px 0; display: flex; flex-direction: column; gap: var(--space-10); }
.gp-home-hero__copy { display: flex; flex-direction: column; gap: var(--space-5); }
.gp-home-hero__title { font-size: 34px; line-height: 1.12; letter-spacing: -0.015em; text-wrap: pretty; }
.gp-home-hero__lead { font-size: var(--text-md); line-height: 1.55; max-width: 520px; text-wrap: pretty; }
.gp-home-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.gp-home-hero__actions .gp-btn { flex: 1 1 auto; }
.gp-home-hero__note { font-size: var(--text-sm); color: var(--text-muted); }

@media (min-width: 900px) {
  .gp-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
    padding-block: 88px 80px;
  }
  .gp-home-hero__copy { gap: 28px; }
  .gp-home-hero__title { font-size: 52px; }
  .gp-home-hero__lead { font-size: 19px; line-height: var(--leading-body); }
  .gp-home-hero__actions .gp-btn { flex: none; }
}

/* ---------- Product collage ----------
   Mobile is the design's simpler three-piece row; desktop is the absolutely positioned
   arrangement from the 1280 artboard. */
.gp-collage { display: flex; align-items: flex-end; gap: var(--space-3); }
.gp-collage__browser { flex: 1 1 0; min-width: 0; }
.gp-collage__screen { height: 150px; }
.gp-collage__phone1 { width: 108px; flex: none; height: 220px; }
.gp-collage__phone2, .gp-collage__card { display: none; }

@media (min-width: 900px) {
  .gp-collage { display: block; position: relative; height: 480px; }
  .gp-collage__browser { position: absolute; left: 0; top: 24px; width: 440px; }
  .gp-collage__screen { height: 280px; }
  .gp-collage__phone1 { position: absolute; right: 0; top: 0; width: 176px; height: 360px; }
  .gp-collage__phone2 { display: block; position: absolute; right: 120px; bottom: 0; width: 150px; height: 308px; }
  .gp-collage__card {
    display: block;
    position: absolute;
    left: 32px;
    bottom: 0;
    width: 250px;
    height: 140px;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-card);
    box-shadow: 0 8px 28px rgba(16, 24, 40, 0.14);
  }
}

/* ---------- Client strip ---------- */
.gp-clientstrip { background: var(--surface-subtle); border-block: 1px solid var(--border-default); padding-block: var(--space-8); }
.gp-clientstrip__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-5) var(--space-8); }
.gp-clientstrip__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
@media (min-width: 900px) { .gp-clientstrip__name { font-size: var(--text-md); } }

/* ---------- Audience cards ---------- */
.gp-aud { gap: 18px; }
.gp-aud__label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.gp-aud__title { font-size: 22px; line-height: 1.25; }
@media (min-width: 900px) { .gp-aud__title { font-size: 26px; } }

/* ---------- Process strip ---------- */
.gp-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.gp-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
}
/* The two steps the design highlights: architecture, and run and grow. */
.gp-step--hi { background: var(--gp-green-50); border-color: #C9E3A3; }
.gp-step__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.gp-step__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.gp-step--hi .gp-step__n { background: var(--gp-green-500); }
.gp-step__time { font-size: 12.5px; color: var(--text-body); text-align: right; }
.gp-step__title { font-size: var(--text-md); line-height: 1.25; }
.gp-step__body { font-size: 14.5px; line-height: 1.55; }
@media (min-width: 700px) { .gp-steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (min-width: 1100px) { .gp-steps { grid-template-columns: repeat(5, 1fr); } }

/* ---------- Case-study card ---------- */
.gp-workgrid__item { display: flex; }
.gp-casecard {
  display: flex;
  width: 100%;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  color: inherit;
  transition: box-shadow 160ms ease-out, transform 160ms ease-out;
}
.gp-casecard:hover { box-shadow: var(--shadow-lg); color: inherit; }
.gp-casecard__body { flex: 1; }
.gp-casecard__shot { display: block; height: 200px; background: var(--surface-subtle); border-bottom: 1px solid var(--border-default); }
.gp-casecard__body { display: flex; flex-direction: column; gap: 14px; padding: 26px; }
.gp-casecard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.gp-casecard__id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gp-casecard__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.gp-casecard__client { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-heading); }
.gp-casecard__outcome { font-size: var(--text-base); line-height: var(--leading-body); color: var(--text-body); }
.gp-casecard__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gp-casecard__tech { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: 14px; border-top: 1px solid var(--border-default); }
@media (min-width: 900px) { .gp-casecard__shot { height: 220px; } }

/* ---------- Tighter card for the four support services ---------- */
.gp-card--tight { gap: 10px; padding: 28px; }

/* ---------- Team line ---------- */
.gp-teamline-sec { padding-block: 56px; }
.gp-teamline {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.gp-teamline__copy { display: flex; flex-direction: column; gap: var(--space-3); }
.gp-teamline__title { font-size: 24px; line-height: 1.25; }
.gp-teamline__body { font-size: var(--text-base); line-height: var(--leading-body); }
@media (min-width: 900px) {
  .gp-teamline-sec { padding-block: 72px; }
  .gp-teamline { display: grid; grid-template-columns: 1fr auto; gap: var(--space-12); align-items: center; padding: var(--space-10) var(--space-12); }
  .gp-teamline__title { font-size: 28px; }
  .gp-teamline__body { font-size: 16.5px; }
}

/* ---------- Home closing CTA (split, with the facts table) ---------- */
.gp-eyebrow--onnavy { color: var(--gp-green-500); }
.gp-cta__title--lg { font-size: 28px; }
@media (min-width: 900px) {
  .gp-cta--split { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 64px; padding: 64px; }
  .gp-cta--split .gp-cta__copy { max-width: 520px; }
  .gp-cta__title--lg { font-size: 38px; letter-spacing: -0.01em; }
}

/* ===========================================================================
   WORK (designs/Work.dc.html)
   =========================================================================== */
.gp-pagehero__title--work { max-width: 22ch; }

.gp-worksec { padding-bottom: 56px; }
.gp-filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.gp-filters { display: flex; flex-wrap: nowrap; gap: var(--space-2); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gp-filters::-webkit-scrollbar { display: none; }
.gp-filter {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--space-4);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-card);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.gp-filter:hover { border-color: var(--border-strong); color: var(--text-heading); }
.gp-filter.is-on { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--text-inverse); }
.gp-count { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
.gp-workempty { padding-block: var(--space-10); text-align: center; color: var(--text-muted); }
@media (min-width: 900px) {
  .gp-worksec { padding-bottom: 96px; }
  .gp-filter { font-size: 14px; }
}

.gp-callout { display: flex; flex-direction: column; gap: var(--space-4); max-width: 820px; }
.gp-callout__title { font-size: 24px; line-height: 1.25; }
.gp-callout__body { font-size: var(--text-md); line-height: var(--leading-body); }
@media (min-width: 900px) { .gp-callout__title { font-size: 30px; } }

/* ===========================================================================
   CASE STUDY (designs/Case Study.dc.html)
   =========================================================================== */
.gp-cshero { padding-block: var(--space-8) var(--space-10); display: flex; flex-direction: column; gap: var(--space-6); }
.gp-cshero__grid { display: flex; flex-direction: column; gap: var(--space-8); }
.gp-cshero__copy { display: flex; flex-direction: column; gap: var(--space-5); }
.gp-backlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted); }
.gp-backlink:hover { color: var(--accent-text-aa); }
.gp-cshero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.gp-cshero__title { font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; text-wrap: pretty; }
.gp-cshero__intro { font-size: var(--text-md); line-height: 1.55; max-width: 60ch; }

.gp-facts3 { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--space-4); margin: var(--space-2) 0 0; }
.gp-facts3__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gp-facts3__v { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-heading); line-height: 1.2; }
.gp-facts3__k { margin: 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.35; }

.gp-cscollage { display: flex; align-items: flex-end; gap: var(--space-3); }
.gp-cscollage__browser { flex: 1 1 0; min-width: 0; }
.gp-cscollage__screen { height: 160px; }
.gp-cscollage__phone { width: 108px; flex: none; height: 220px; }

@media (min-width: 900px) {
  .gp-cshero { padding-block: 64px 72px; gap: var(--space-10); }
  .gp-cshero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .gp-cshero__copy { gap: var(--space-5); }
  .gp-facts3 { gap: var(--space-8); }
  .gp-cshero__title { font-size: 44px; }
  .gp-cshero__intro { font-size: 18px; line-height: var(--leading-body); }
  .gp-facts3__v { font-size: 22px; }
  .gp-facts3__k { font-size: 13px; }
  .gp-cscollage { display: block; position: relative; height: 440px; }
  .gp-cscollage__browser { position: absolute; left: 0; top: 20px; width: 400px; }
  .gp-cscollage__screen { height: 280px; }
  .gp-cscollage__phone { position: absolute; right: 0; bottom: 0; width: 176px; height: 360px; }
}

/* Problem + what we built */
.gp-problem__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.gp-problem__title { font-size: 24px; line-height: 1.25; }
.gp-problem__body { font-size: var(--text-md); line-height: var(--leading-body); }
.gp-built { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.gp-built__title { font-size: var(--text-lg); }
.gp-built__list { display: flex; flex-direction: column; gap: var(--space-3); }
.gp-built__item { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: var(--text-base); line-height: 1.55; }
.gp-built__item svg { color: var(--accent-text-aa); margin-top: 3px; }
@media (min-width: 900px) {
  .gp-problem__title { font-size: 30px; }
  .gp-built { padding: var(--space-8); }
}

/* Technology */
.gp-chips--lg { gap: 10px; }
.gp-aipanel { margin-top: var(--space-8); padding: var(--space-6); background: var(--gp-green-50); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-3); }
.gp-aipanel__title { font-size: var(--text-lg); }
.gp-aipanel__body { font-size: var(--text-base); line-height: var(--leading-body); max-width: 80ch; }
@media (min-width: 900px) {
  .gp-aipanel { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-8); padding: var(--space-8) var(--space-10); align-items: start; }
}

/* Where it is now + quote */
.gp-nowcard { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--gp-green-50); border-radius: var(--radius-lg); }
.gp-nowcard__title { font-size: 22px; line-height: 1.25; }
.gp-nowcard__body { font-size: var(--text-base); line-height: var(--leading-body); }
.gp-quote { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-6); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.gp-quote__mark { font-family: var(--font-display); font-size: 32px; font-weight: var(--weight-bold); color: var(--border-default); line-height: 1; }
.gp-quote__text { margin: 0; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-md); line-height: 1.45; color: var(--text-heading); }
.gp-quote__by { font-size: var(--text-sm); color: var(--text-muted); }
@media (min-width: 900px) {
  .gp-nowcard, .gp-quote { padding: var(--space-8); }
  .gp-nowcard__title { font-size: 24px; }
  .gp-quote__text { font-size: 21px; }
}

/* ===========================================================================
   SUPPORT (designs/Support.dc.html)
   =========================================================================== */
.gp-svc { gap: var(--space-3); }
.gp-card--tintpanel { background: var(--gp-green-50); box-shadow: none; }
.gp-supcard .gp-casecard__shot { height: 180px; }

/* ===========================================================================
   BLUEPRINT (designs/Blueprint.dc.html)
   =========================================================================== */
.gp-bphero { padding-block: 44px 56px; display: flex; flex-direction: column; gap: var(--space-8); }
.gp-bphero__copy { display: flex; flex-direction: column; gap: var(--space-5); }
.gp-bphero__title { font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; text-wrap: pretty; }
.gp-bphero__lead { font-size: var(--text-md); line-height: 1.55; max-width: 60ch; }
.gp-bphero__cta { align-self: flex-start; }

.gp-bppanel { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8) var(--space-6); background: var(--surface-inverse); border-radius: var(--radius-lg); color: var(--text-inverse); }
.gp-bppanel__title { color: var(--text-inverse); font-size: var(--text-xl); }
.gp-bppanel__note { font-size: var(--text-sm); color: var(--gp-on-navy-muted); }

@media (min-width: 900px) {
  .gp-bphero { display: grid; grid-template-columns: minmax(0, 1.15fr) 440px; gap: 64px; align-items: start; padding-block: 72px 88px; }
  .gp-bphero__title { font-size: 48px; }
  .gp-bphero__lead { font-size: 18px; line-height: var(--leading-body); }
  .gp-bppanel { padding: var(--space-10); }
}

/* Deliverables: five numbered cards plus the tinted go/no-go card. */
.gp-deliverables { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.gp-deliv { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.gp-deliv--tint { background: var(--gp-green-50); box-shadow: none; }
.gp-deliv__n { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--accent-text-aa); }
.gp-deliv__title { font-size: var(--text-lg); line-height: 1.25; }
.gp-deliv__body { font-size: var(--text-base); line-height: var(--leading-body); }
@media (min-width: 700px) { .gp-deliverables { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
@media (min-width: 1100px) { .gp-deliverables { grid-template-columns: repeat(3, 1fr); } }

/* How the week runs: a 4-cell bordered strip. */
.gp-week { display: grid; grid-template-columns: 1fr; border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.gp-week__cell { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-bottom: 1px solid var(--border-default); }
.gp-week__cell:last-child { border-bottom: 0; }
.gp-week__day { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text-aa); }
.gp-week__title { font-size: var(--text-md); line-height: 1.25; }
.gp-week__body { font-size: 14.5px; line-height: 1.55; }
@media (min-width: 900px) {
  .gp-week { grid-template-columns: repeat(4, 1fr); }
  .gp-week__cell { border-bottom: 0; border-right: 1px solid var(--border-default); }
  .gp-week__cell:last-child { border-right: 0; }
}

.gp-bpclose { display: flex; flex-direction: column; gap: var(--space-5); }
.gp-bpclose__copy { display: flex; flex-direction: column; gap: var(--space-3); }
.gp-bpclose__title { font-size: 24px; line-height: 1.25; }
.gp-bpclose__body { font-size: var(--text-md); }
@media (min-width: 900px) {
  .gp-bpclose { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-10); }
  .gp-bpclose__title { font-size: 30px; }
}

/* ===========================================================================
   CONTACT (designs/Contact.dc.html)
   =========================================================================== */
.gp-contact { padding-block: 44px 56px; display: flex; flex-direction: column; gap: var(--space-8); }
.gp-contact__left { display: flex; flex-direction: column; gap: var(--space-4); }
.gp-contact__title { font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; }
.gp-contact__lead { font-size: var(--text-md); line-height: 1.55; max-width: 54ch; }

.gp-bookcard { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-6); background: var(--surface-inverse); border-radius: var(--radius-lg); color: var(--text-inverse); }
.gp-bookcard__title { color: var(--text-inverse); font-size: var(--text-xl); }
.gp-bookcard__body { color: var(--gp-on-navy-muted); font-size: var(--text-base); }

.gp-details { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0 0; }
.gp-details__row { display: flex; gap: var(--space-4); align-items: baseline; }
.gp-details__k { flex: 0 0 84px; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted); }
.gp-details__v { margin: 0; font-size: var(--text-base); }

/* Form card */
.gp-formcard { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.gp-formcard__title { font-size: var(--text-xl); }
.gp-form { display: flex; flex-direction: column; gap: var(--space-5); }
.gp-field { display: flex; flex-direction: column; gap: 6px; }
.gp-label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-heading); }
.gp-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-heading);
}
.gp-input::placeholder { color: var(--text-muted); }
.gp-input:focus { outline: none; border-color: var(--gp-green-500); box-shadow: var(--focus-ring); }
.gp-input.is-error { border-color: var(--status-error); }
.gp-textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.gp-err { font-size: var(--text-sm); color: var(--status-error); }
.gp-formerr { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--status-error-bg); color: var(--status-error); font-size: var(--text-base); }
.gp-formdone { display: flex; flex-direction: column; gap: var(--space-3); }
.gp-form__submit { width: 100%; }
.gp-form__note { font-size: var(--text-sm); color: var(--text-muted); }
/* Honeypot: off-screen, never shown, never announced. */
.gp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 900px) {
  .gp-contact { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 64px; align-items: start; padding-block: 72px 96px; }
  .gp-contact__title { font-size: 48px; }
  .gp-contact__lead { font-size: 18px; line-height: var(--leading-body); }
  .gp-bookcard { padding: var(--space-8); }
  .gp-formcard { padding: var(--space-10); }
}

/* ===========================================================================
   HOW WE WORK (designs/How we work.dc.html)
   =========================================================================== */
.gp-diagram-sec { padding-bottom: 56px; }
.gp-diagram { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); }
.gp-diagram__title { font-size: 22px; line-height: 1.25; max-width: 34ch; }

/* The five-box flow. Column on mobile with down arrows, row on desktop with right arrows. */
.gp-flow { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.gp-flow__box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4);
  border: 1.5px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-card);
}
.gp-flow__box--hi { border-color: var(--accent-text-aa); background: var(--gp-green-50); }
.gp-flow__title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-heading); }
.gp-flow__sub { font-size: 14px; line-height: 1.4; color: var(--text-body); }
.gp-flow__arrow { display: flex; align-items: center; justify-content: center; color: #9AA3B2; }
.gp-flow__arrow svg { width: 20px; height: 20px; transform: rotate(90deg); }

.gp-flow__loop { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.gp-flow__loop svg { flex: none; color: var(--text-muted); }

.gp-well { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-subtle); border-radius: 12px; }
.gp-well__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-heading); }

@media (min-width: 900px) {
  .gp-diagram-sec { padding-bottom: 96px; }
  .gp-diagram { padding: var(--space-10); gap: var(--space-8); }
  .gp-diagram__title { font-size: 30px; }
  .gp-flow { flex-direction: row; align-items: stretch; }
  .gp-flow__box { flex: 1 1 0; min-width: 0; }
  .gp-flow__arrow { flex: 0 0 28px; }
  .gp-flow__arrow svg { transform: none; }
}

/* Five steps, full-width rows. */
.gp-method { display: flex; flex-direction: column; }
.gp-method__row { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-4); padding-block: var(--space-6); border-bottom: 1px solid var(--border-default); }
.gp-method__row:last-child { border-bottom: 0; }
/* Decorative numerals. They sit at ~1.3:1 by design (the handoff specifies #D7DCE4), which is
   allowed: they are aria-hidden, and the <ol> plus each step's title carry the order and the
   meaning, so no information depends on reading them. Do not darken to "fix contrast". */
.gp-method__n { font-family: var(--font-display); font-size: 36px; font-weight: var(--weight-semibold); line-height: 1; color: var(--border-default); }
.gp-method__n--hi { color: var(--gp-green-500); }
.gp-method__head { display: flex; flex-direction: column; gap: 2px; }
.gp-method__title { font-size: var(--text-lg); line-height: 1.25; }
.gp-method__time { font-size: var(--text-sm); color: var(--text-body); }
.gp-method__body { grid-column: 2; font-size: var(--text-base); line-height: var(--leading-body); }
@media (min-width: 900px) {
  .gp-method__row { grid-template-columns: 72px 300px 1fr; gap: var(--space-8); align-items: start; padding-block: var(--space-8); }
  .gp-method__n { font-size: 44px; }
  .gp-method__title { font-size: 24px; }
  .gp-method__body { grid-column: 3; font-size: 16.5px; }
}

.gp-week__cell--hi { background: var(--gp-green-50); }
.gp-week__day--muted { color: var(--text-muted); }
.gp-note { margin-top: var(--space-6); font-size: var(--text-base); line-height: var(--leading-body); color: var(--text-body); max-width: 72ch; }

/* Quality levels */
.gp-level { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.gp-level__n { font-family: var(--font-display); font-size: 40px; font-weight: var(--weight-semibold); line-height: 1; color: var(--border-default); } /* decorative — see .gp-method__n */
.gp-level__n--hi { color: var(--gp-green-500); }
.gp-level__title { font-size: var(--text-lg); line-height: 1.25; }
.gp-level__body { font-size: var(--text-base); line-height: var(--leading-body); }
.gp-level__note { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-default); font-size: var(--text-sm); color: var(--text-muted); }
@media (min-width: 900px) {
  .gp-level { padding: var(--space-8); }
  .gp-level__n { font-size: 52px; }
}

.gp-tools { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-8); }
.gp-tools__label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted); }

.gp-worked { display: flex; flex-direction: column; gap: var(--space-8); }
.gp-worked__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.gp-worked__title { font-size: 24px; line-height: 1.25; }
.gp-worked__body { font-size: var(--text-base); line-height: var(--leading-body); }
@media (min-width: 900px) {
  .gp-worked { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .gp-worked__title { font-size: 30px; }
  .gp-worked__body { font-size: 16.5px; }
}

/* Client strip logos. Height-normalised so a mark and a wordmark sit on the same line, and
   desaturated to body-grey weight so no single brand shouts over the others (the design
   specifies a uniform #4A5568 wordmark row). */
.gp-clientstrip__logo { display: block; height: 24px; width: auto; filter: grayscale(1); opacity: 0.75; }
@media (min-width: 900px) { .gp-clientstrip__logo { height: 28px; } }

/* A case study with only one frame centres it rather than leaving a gap. */
.gp-cscollage:has(> :only-child) { justify-content: center; }