/* Generated by tools/build.py from assets/css sources. Do not edit. */

/* source: tokens.css */
/*
  Resonans design tokens. The only file allowed to hold a raw value.
  Tier 1 (--p-*) holds literals. Tier 2 maps them to roles, once per theme.
  Stylesheets quote tier-2 roles for colour, and tier-1 only for the
  dimensional scales (space, text, weight, leading, tracking, font, radius, z).
  The brand red is a fixed point: never darkened, lightened or faded to pass
  a contrast check; the surface or ink around it moves instead.
*/

:root {
  /* @tier: 1 */
  --p-brand: #CC0025;
  --p-white: #FFFFFF;

  --p-n-0: #FFFFFF;
  --p-n-50: #F4F5F7;
  --p-n-100: #EBEDF0;
  --p-n-200: #DCDFE4;
  --p-n-300: #C3C7CF;
  --p-n-400: #9CA2AD;
  --p-n-500: #737A86;
  --p-n-600: #555B66;
  --p-n-700: #3B4049;
  --p-n-800: #25282E;
  --p-n-900: #16181C;
  --p-n-950: #0B0C0E;

  --p-green-600: #1A7F4B;
  --p-green-400: #3DCC85;
  --p-amber-600: #B45309;
  --p-amber-400: #F2B544;
  --p-blue-600: #2563EB;
  --p-blue-400: #7EA8FF;

  --p-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --p-font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --p-font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  --p-text-2xs: 0.75rem;
  --p-text-xs: 0.8125rem;
  --p-text-sm: 0.9375rem;
  --p-text-body: 1.0625rem;
  --p-text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --p-text-h4: 1.3125rem;
  --p-text-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --p-text-h2: clamp(2rem, 1.35rem + 2.8vw, 3.375rem);
  --p-text-h1: clamp(2.625rem, 1.4rem + 5.4vw, 5.75rem);
  --p-text-page-title: clamp(2.375rem, 1.5rem + 3.8vw, 4.5rem);
  --p-text-stat: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --p-text-quote: clamp(1.875rem, 1.2rem + 3vw, 3.75rem);
  --p-text-feature: clamp(1.75rem, 1.25rem + 2vw, 2.625rem);
  --p-text-cta: clamp(2.25rem, 1.3rem + 4vw, 4.75rem);
  --p-text-event: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --p-text-card-title: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  --p-text-price: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);

  --p-weight-regular: 400;
  --p-weight-medium: 500;
  --p-weight-semibold: 600;
  --p-weight-bold: 700;
  --p-weight-heavy: 800;

  --p-leading-none: 1;
  --p-leading-tight: 1.02;
  --p-leading-heading: 1.12;
  --p-leading-snug: 1.3;
  --p-leading-body: 1.6;
  --p-leading-prose: 1.7;

  --p-tracking-display: -0.035em;
  --p-tracking-heading: -0.02em;
  --p-tracking-eyebrow: 0.14em;

  --p-space-0: 0;
  --p-space-1: 0.25rem;
  --p-space-2: 0.5rem;
  --p-space-3: 0.75rem;
  --p-space-4: 1rem;
  --p-space-5: 1.25rem;
  --p-space-6: 1.5rem;
  --p-space-8: 2rem;
  --p-space-10: 2.5rem;
  --p-space-12: 3rem;
  --p-space-16: 4rem;
  --p-space-20: 5rem;
  --p-space-24: 6rem;
  --p-space-32: 8rem;

  --p-radius-none: 0;
  --p-radius-pill: 999px;
  --p-radius-round: 50%;

  --p-z-raised: 10;
  --p-z-header: 50;
  --p-z-menu: 55;
  --p-z-drawer: 60;
  --p-z-dialog: 70;

  /* @tier: 2 */

  /* Layout */
  --measure: 68ch;
  --measure-narrow: 44ch;
  --measure-prose: 70ch;
  --section-pad: clamp(var(--p-space-16), 8vw, var(--p-space-32));
  --section-pad-tight: clamp(var(--p-space-12), 5vw, var(--p-space-20));
  --container: 76rem;
  --container-narrow: 48rem;
  --gutter: clamp(var(--p-space-4), 4vw, var(--p-space-8));
  --grid-gap: clamp(var(--p-space-3), 1.6vw, var(--p-space-4));
  --grid-gap-loose: clamp(var(--p-space-6), 3vw, var(--p-space-10));
  --sidebar-w: 15rem;

  /* Sizes */
  --border-hair: 1px;
  --border-rule: 2px;
  --tap: 3rem;
  --tap-sm: 2.5rem;
  --tap-lg: 3.5rem;
  --header-h: 4.5rem;
  --logo-h: 1.75rem;
  --footer-logo-h: 2.5rem;
  --icon-xs: 1rem;
  --icon-sm: 1.125rem;
  --icon-md: 1.5rem;
  --icon-lg: 2rem;
  --step-dot: 3rem;
  --status-dot: 0.5rem;
  --control: 1.25rem;
  --control-mark: 0.625rem;
  --field-h: 3rem;
  --textarea-h: 9rem;
  --avatar-sm: 2.5rem;
  --avatar-md: 3.5rem;
  --avatar-lg: 5.5rem;
  --logo-tile-h: 5.5rem;
  --menu-w: 38rem;
  --line-mark-w: clamp(5rem, 3rem + 6vw, 9rem);
  --case-mark-w: 20rem;
  --case-portrait-w: 40rem;
  --team-portrait-w: 20rem;
  --dialog-w: 36rem;
  --drawer-w: min(22rem, calc(100% - var(--p-space-12)));
  --event-min-h: 36rem;
  --format-label-w: 7rem;
  --play-size: 4.5rem;
  --focus-width: 2px;
  --focus-offset: 3px;
  --motif-stroke: 3;
  --motif-stroke-cut: 6;

  /* Motion */
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-drawer: 240ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nudge: 0.25rem;
  --press: 1px;
  --media-zoom: 1.04;
  --turn-half: 180deg;
  --turn-quarter: 45deg;
  --motif-fade: 0.14;
  --scrim-alpha: 0.55;

  /* Colour roles, light theme (the default) */
  --brand: var(--p-brand);
  --accent: var(--p-brand);

  --surface-page: var(--p-n-0);
  --surface-band: var(--p-n-50);
  --surface-card: var(--p-n-50);
  --surface-card-on-band: var(--p-n-0);
  --surface-card-hover: var(--p-n-100);
  --surface-hover: var(--p-n-100);
  --surface-inverse: var(--p-n-950);
  --surface-footer: var(--p-n-950);
  --surface-accent: var(--p-brand);
  --surface-prompt: var(--p-n-950);
  --surface-raised: var(--p-n-0);
  --surface-code: var(--p-n-100);

  --ink: var(--p-n-950);
  --ink-muted: var(--p-n-600);
  --ink-disabled: var(--p-n-400);
  --ink-inverse: var(--p-n-50);
  --ink-inverse-muted: var(--p-n-400);
  --ink-on-accent: var(--p-white);
  --ink-eyebrow: var(--p-brand);
  --ink-link: var(--p-n-950);
  --ink-logo-tile: var(--p-n-500);

  --hairline: var(--p-n-200);
  --hairline-strong: var(--p-n-300);
  --hairline-inverse: var(--p-n-800);
  --hairline-on-accent: var(--p-white);
  --hairline-hover: var(--p-n-950);

  --focus-ring: var(--p-brand);
  --focus-ring-on-dark: var(--p-white);

  --btn-primary-bg: var(--p-brand);
  --btn-primary-ink: var(--p-white);
  --btn-primary-hover-bg: var(--p-n-950);
  --btn-primary-hover-ink: var(--p-white);
  --btn-secondary-bg: var(--p-n-100);
  --btn-secondary-ink: var(--p-n-950);
  --btn-secondary-hover-bg: var(--p-n-200);
  --btn-ghost-hover-bg: var(--p-n-100);
  --btn-light-bg: var(--p-white);
  --btn-light-ink: var(--p-n-950);
  --btn-light-hover-bg: var(--p-n-950);
  --btn-light-hover-ink: var(--p-white);
  --btn-disabled-bg: var(--p-n-100);
  --btn-disabled-ink: var(--p-n-400);

  --chip-bg: var(--p-n-0);
  --chip-ink: var(--p-n-700);
  --chip-border: var(--p-n-200);
  --chip-selected-bg: var(--p-n-950);
  --chip-selected-ink: var(--p-white);

  --field-bg: var(--p-n-0);
  --field-border: var(--p-n-500);
  --field-border-hover: var(--p-n-950);
  --field-disabled-bg: var(--p-n-50);
  --field-placeholder: var(--p-n-500);

  --icon-tile-bg: var(--p-n-50);
  --icon-tile-on-card: var(--p-n-50);
  --surface-on-band: var(--p-n-0);
  --logo-disc: var(--p-white);
  --surface-emphasis: var(--p-n-950);
  --border-emphasis: var(--p-n-950);

  --status-success: var(--p-green-600);
  --status-warning: var(--p-amber-600);
  --status-info: var(--p-blue-600);
  --status-error: var(--p-brand);
  --status-error-ink: var(--p-brand);

  /* Fixed-dark surfaces keep their colours in both themes */
  --surface-fixed-dark: var(--p-n-950);
  --surface-fixed-graphite: var(--p-n-800);
  --ink-on-dark: var(--p-white);
  --ink-on-dark-soft: var(--p-n-200);
  --ink-on-dark-muted: var(--p-n-300);
  --hairline-on-dark: var(--p-n-800);

  --motif-solid: var(--p-n-950);
  --motif-soft: var(--p-n-200);
  --motif-line: var(--p-n-950);
  --motif-light: var(--p-white);
  --motif-grad-from: var(--p-n-950);
  --motif-grad-to: var(--p-brand);
  --motif-card-ground: var(--p-n-100);

  --scrim: var(--p-n-950);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --surface-page: var(--p-n-950);
  --surface-band: var(--p-n-900);
  --surface-card: var(--p-n-900);
  --surface-card-on-band: var(--p-n-800);
  --surface-card-hover: var(--p-n-800);
  --surface-hover: var(--p-n-800);
  --surface-inverse: var(--p-n-900);
  --surface-footer: var(--p-n-900);
  --surface-raised: var(--p-n-900);
  --surface-code: var(--p-n-800);

  --ink: var(--p-n-50);
  --ink-muted: var(--p-n-400);
  --ink-disabled: var(--p-n-600);
  --ink-eyebrow: var(--p-n-200);
  --ink-link: var(--p-n-50);
  --ink-logo-tile: var(--p-n-400);

  --hairline: var(--p-n-800);
  --hairline-strong: var(--p-n-700);
  --hairline-inverse: var(--p-n-700);
  --hairline-hover: var(--p-n-50);

  --focus-ring: var(--p-n-50);

  --btn-primary-hover-bg: var(--p-n-50);
  --btn-primary-hover-ink: var(--p-n-950);
  --btn-secondary-bg: var(--p-n-800);
  --btn-secondary-ink: var(--p-n-50);
  --btn-secondary-hover-bg: var(--p-n-700);
  --btn-ghost-hover-bg: var(--p-n-800);
  --btn-disabled-bg: var(--p-n-800);
  --btn-disabled-ink: var(--p-n-600);

  --chip-bg: var(--p-n-900);
  --chip-ink: var(--p-n-300);
  --chip-border: var(--p-n-700);
  --chip-selected-bg: var(--p-n-50);
  --chip-selected-ink: var(--p-n-950);

  --field-bg: var(--p-n-900);
  --field-border: var(--p-n-500);
  --field-border-hover: var(--p-n-200);
  --field-disabled-bg: var(--p-n-800);
  --field-placeholder: var(--p-n-400);

  --icon-tile-bg: var(--p-n-900);
  --icon-tile-on-card: var(--p-n-950);
  --surface-on-band: var(--p-n-950);
  --border-emphasis: var(--p-brand);

  --status-success: var(--p-green-400);
  --status-warning: var(--p-amber-400);
  --status-info: var(--p-blue-400);
  --status-error-ink: var(--p-n-50);

  --motif-solid: var(--p-n-700);
  --motif-soft: var(--p-n-800);
  --motif-line: var(--p-n-300);
  --motif-grad-from: var(--p-n-700);
  --motif-card-ground: var(--p-n-800);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-drawer: 0ms;
    --nudge: 0;
    --press: 0;
    --media-zoom: 1;
  }
}

/* source: base.css */
/* Reset, element defaults and the few global utilities. No components here. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--p-space-4));
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--p-font-sans);
  font-size: var(--p-text-body);
  line-height: var(--p-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
figure,
blockquote,
dl,
dd,
fieldset {
  margin: 0;
}

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--p-font-display);
  line-height: var(--p-leading-heading);
  letter-spacing: var(--p-tracking-heading);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--ink-link);
  text-decoration-thickness: var(--border-hair);
  text-underline-offset: 0.2em;
}

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

svg {
  flex-shrink: 0;
}

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

code,
kbd {
  padding: 0 var(--p-space-1);
  background: var(--surface-code);
  font-family: var(--p-font-mono);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/*
  The one sanctioned !important: `hidden` must beat any component's display
  (an alert is a grid, a card is a flex box), or JS-hidden parts stay visible.
*/
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: var(--border-hair);
  height: var(--border-hair);
  margin: calc(-1 * var(--border-hair));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--p-space-4);
  inset-block-start: var(--p-space-4);
  z-index: var(--p-z-dialog);
  padding: var(--p-space-3) var(--p-space-5);
  background: var(--surface-inverse);
  color: var(--ink-inverse);
  font-weight: var(--p-weight-semibold);
  transform: translateY(-200%);
}

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

/* Surfaces that are dark in both themes re-point the focus ring once. */
.on-dark,
.on-accent {
  --focus-ring: var(--focus-ring-on-dark);
}

/* source: layout.css */
/*
  Layout primitives. Pages compose sections from these and never invent
  their own container, gutter or grid.
  Breakpoints: 48rem tablet, 60rem desktop navigation, 64rem desktop grid.
*/

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + 2 * var(--gutter));
}

/* Sections: one vertical rhythm for the whole site */

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

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

.section--band {
  background: var(--surface-band);
}

.section--flush-top {
  padding-block-start: 0;
}

/* Stack: vertical rhythm inside a block */

.stack {
  display: grid;
  gap: var(--p-space-6);
  justify-items: start;
}

.stack--sm {
  gap: var(--p-space-3);
}

.stack--lg {
  gap: var(--p-space-10);
}

.stack--stretch {
  justify-items: stretch;
}

/* Cluster: a wrapping row of actions or tags */

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p-space-3);
}

/* Grid: equal columns that collapse deliberately. --2-wide stays one column to 64rem, for cards that set two columns inside themselves. */

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

.grid--loose {
  gap: var(--grid-gap-loose);
}

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

@media (min-width: 64rem) {
  .grid--2-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/*
  Bento: a six-column grid for mixed card sizes. Items span 2 by default;
  --wide spans 4 on desktop and the full row on tablet.
*/

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

@media (min-width: 48rem) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento__item--wide {
    grid-column: span 2;
  }
}

@media (min-width: 64rem) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .bento > * {
    grid-column: span 2;
  }

  .bento > .bento__item--wide {
    grid-column: span 4;
  }

  .bento > .bento__item--full {
    grid-column: 1 / -1;
  }
}

/* Split: copy beside media, stacked below 64rem */

.split {
  display: grid;
  gap: var(--p-space-12);
  align-items: center;
}

@media (min-width: 64rem) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--p-space-16);
  }

  .split--wide-start {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .split--align-start {
    align-items: start;
  }
}

/* Section head: eyebrow, title, optional intro and action */

.section-head {
  display: grid;
  gap: var(--p-space-5);
  max-width: var(--measure);
  margin-block-end: clamp(var(--p-space-10), 5vw, var(--p-space-16));
}

.section-head--split {
  max-width: none;
  align-items: end;
}

.section-head--center {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.section-head__main {
  display: grid;
  gap: var(--p-space-5);
  justify-items: start;
}

.section-head--center .section-head__main {
  justify-items: center;
}

.section-title {
  font-size: var(--p-text-h2);
  font-weight: var(--p-weight-heavy);
  letter-spacing: var(--p-tracking-display);
  line-height: var(--p-leading-heading);
}

.section-intro {
  max-width: var(--measure-narrow);
  color: var(--ink-muted);
  font-size: var(--p-text-lead);
  line-height: var(--p-leading-snug);
}

@media (min-width: 64rem) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--p-space-16);
  }

  .section-head--split > :last-child:not(.section-head__main) {
    justify-self: end;
  }

  .section-head--split > .section-intro:last-child {
    justify-self: stretch;
  }
}

/* source: components/icon.css */
/* Icons: Phosphor regular from the sprite, sized by token, coloured by currentColor. */

.icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.icon--xs {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.icon--md {
  width: var(--icon-md);
  height: var(--icon-md);
}

.icon--lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* A trailing arrow travels a few pixels when its control is hovered. */
.icon--nudge {
  transition: transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  a:hover > .icon--nudge,
  button:hover > .icon--nudge,
  .is-hover-target:hover .icon--nudge {
    transform: translateX(var(--nudge));
  }
}

/*
  Square tile holding a brand-red glyph; used by cards and feature lists.
  On a band the tile takes --surface-on-band, so it stays visible there and
  the red glyph keeps 3:1 in dark theme; cards set their own tile fill.
*/
.section--band .icon-tile {
  background: var(--surface-on-band);
}

.icon-tile {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  background: var(--icon-tile-bg);
  color: var(--accent);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* source: components/button.css */
/*
  Buttons: pill actions. One primary per view.
  Variants: primary, secondary, ghost, light (on dark or red), outline-light.
  Sizes: sm, default, lg. States: hover, focus-visible, active, disabled.
  Hover never alters the brand red: a primary button trades its fill for ink.
*/

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-2);
  min-height: var(--tap);
  padding-inline: var(--p-space-6);
  border: var(--border-hair) solid transparent;
  border-radius: var(--p-radius-pill);
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-semibold);
  line-height: var(--p-leading-none);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.button:active {
  transform: translateY(var(--press));
}

.button--sm {
  min-height: var(--tap-sm);
  padding-inline: var(--p-space-4);
  font-size: var(--p-text-xs);
}

.button--lg {
  min-height: var(--tap-lg);
  padding-inline: var(--p-space-8);
  font-size: var(--p-text-body);
}

.button--block {
  width: 100%;
}

.button--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
}

.button--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-ink);
}

.button--ghost {
  border-color: var(--hairline-strong);
  background: transparent;
  color: var(--ink);
}

.button--light {
  background: var(--btn-light-bg);
  color: var(--btn-light-ink);
}

.button--outline-light {
  border-color: var(--hairline-on-accent);
  background: transparent;
  color: var(--ink-on-accent);
}

@media (hover: hover) {
  .button--primary:hover {
    background: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-ink);
  }

  .button--secondary:hover {
    background: var(--btn-secondary-hover-bg);
  }

  .button--ghost:hover {
    border-color: var(--hairline-hover);
    background: var(--btn-ghost-hover-bg);
  }

  .button--light:hover {
    background: var(--btn-light-hover-bg);
    color: var(--btn-light-hover-ink);
  }

  .on-dark .button--light:hover {
    background: var(--brand);
    color: var(--ink-on-accent);
  }

  .on-dark .button--primary:hover {
    background: var(--btn-light-bg);
    color: var(--btn-light-ink);
  }

  .button--outline-light:hover {
    background: var(--btn-light-bg);
    color: var(--btn-light-ink);
  }
}

.button:disabled,
.button[aria-disabled="true"] {
  border-color: transparent;
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-ink);
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-3);
}

/* Icon button: a round, outlined 48px target holding one glyph and an aria-label. */

.icon-button {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: var(--border-hair) solid var(--hairline);
  border-radius: var(--p-radius-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.icon-button--on-dark {
  border-color: var(--hairline-inverse);
  color: var(--ink-inverse);
}

@media (hover: hover) {
  .icon-button:hover {
    border-color: var(--hairline-hover);
    background: var(--surface-hover);
  }

  .icon-button--on-dark:hover {
    border-color: var(--ink-inverse);
    background: var(--surface-fixed-graphite);
  }
}

/* source: components/link.css */
/*
  Links. Prose links are ink with a brand-red underline; hover thickens the
  underline rather than recolouring the text, so dark theme keeps AA.
  Arrow links are standalone calls to action inside cards and sections.
*/

.text-link {
  color: var(--ink-link);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: var(--border-hair);
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .text-link:hover {
    text-decoration-thickness: var(--border-rule);
  }
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  min-height: var(--tap);
  color: inherit;
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-semibold);
  text-decoration: none;
}

.arrow-link__label {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--border-hair);
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .arrow-link:hover .arrow-link__label,
  .is-hover-target:hover .arrow-link__label {
    text-decoration-color: currentColor;
  }
}

/*
  Stretched link: the one real link inside a card covers the whole card, so
  the card is a single target and a single tab stop. The card is the
  positioning context and carries .is-hover-target for its hover styles.
*/
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--p-z-raised);
}

.is-hover-target {
  position: relative;
}

/* source: components/label.css */
/*
  Small labels: eyebrow (section kicker), chip (static tag), filter chip
  (toggle), badge (status: neutral pill plus a status dot), tag (bare text).
*/

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-3);
  color: var(--ink-eyebrow);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-eyebrow);
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: var(--p-space-2);
  height: var(--p-space-2);
  background: var(--accent);
}

.eyebrow--on-dark {
  color: var(--ink-inverse-muted);
}

.eyebrow--on-accent {
  color: var(--ink-on-accent);
}

.eyebrow--on-accent::before {
  background: var(--ink-on-accent);
}

.eyebrow--plain::before {
  display: none;
}

/* Chip: a static pill naming a deliverable, skill or topic */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--p-space-1) var(--p-space-3);
  border: var(--border-hair) solid var(--chip-border);
  border-radius: var(--p-radius-pill);
  background: var(--chip-bg);
  color: var(--chip-ink);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-medium);
  line-height: var(--p-leading-body);
}

.chip--on-accent {
  border-color: var(--hairline-on-accent);
  background: transparent;
  color: var(--ink-on-accent);
}

/* Filter chip: a toggle button; aria-pressed carries the state */

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  min-height: var(--tap-sm);
  padding-inline: var(--p-space-4);
  border: var(--border-hair) solid var(--chip-border);
  border-radius: var(--p-radius-pill);
  background: var(--chip-bg);
  color: var(--chip-ink);
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-medium);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.filter-chip__count {
  color: inherit;
  font-size: var(--p-text-xs);
  opacity: 0.7;
}

.filter-chip[aria-pressed="true"] {
  border-color: var(--chip-selected-bg);
  background: var(--chip-selected-bg);
  color: var(--chip-selected-ink);
}

@media (hover: hover) {
  .filter-chip:hover {
    border-color: var(--hairline-hover);
    color: var(--ink);
  }

  .filter-chip[aria-pressed="true"]:hover {
    color: var(--chip-selected-ink);
  }
}

/* Badge: status label. Colour lives only in the dot; the word carries the meaning. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  padding: var(--p-space-1) var(--p-space-3);
  border: var(--border-hair) solid var(--hairline);
  border-radius: var(--p-radius-pill);
  background: var(--surface-page);
  color: var(--ink);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-semibold);
  line-height: var(--p-leading-body);
}

.badge::before {
  content: "";
  width: var(--status-dot);
  height: var(--status-dot);
  border-radius: var(--p-radius-round);
  background: var(--ink-muted);
}

.badge--brand::before {
  background: var(--brand);
}

.badge--success::before {
  background: var(--status-success);
}

.badge--warning::before {
  background: var(--status-warning);
}

.badge--info::before {
  background: var(--status-info);
}

.badge--error::before {
  background: var(--status-error);
}

.badge--solid {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--ink-on-accent);
}

.badge--solid::before {
  background: var(--ink-on-accent);
}

/* Tag: bare uppercase text naming a category */

.tag {
  color: var(--ink-eyebrow);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-eyebrow);
  text-transform: uppercase;
}

.tag--muted {
  color: var(--ink-muted);
}

/* source: components/breadcrumb.css */
/* Breadcrumbs: every page below home opens with one (taste N-05). */

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p-space-1) var(--p-space-2);
  font-size: var(--p-text-sm);
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  color: var(--ink-muted);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  color: var(--hairline-strong);
}

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-sm);
  color: var(--ink-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition:
    color var(--dur-fast) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out);
}

.breadcrumb__item [aria-current="page"] {
  color: var(--ink);
  font-weight: var(--p-weight-medium);
}

@media (hover: hover) {
  .breadcrumb__link:hover {
    color: var(--ink);
    text-decoration-color: var(--accent);
  }
}

/* source: components/avatar.css */
/*
  Avatars: circles. A photo fills the circle; without one, initials sit on a
  dominant-colour block (taste M-06), never on a stock silhouette.
*/

.avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--avatar-md);
  height: var(--avatar-md);
  overflow: hidden;
  border-radius: var(--p-radius-round);
  background: var(--surface-fixed-graphite);
  color: var(--ink-on-dark);
  font-family: var(--p-font-display);
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-bold);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--sm {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  font-size: var(--p-text-xs);
}

.avatar--lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  font-size: var(--p-text-h4);
}

.avatar--brand {
  background: var(--brand);
  color: var(--ink-on-accent);
}

.avatar-group {
  display: flex;
}

.avatar-group .avatar {
  border: var(--border-rule) solid var(--surface-page);
}

.avatar-group .avatar + .avatar {
  margin-inline-start: calc(-1 * var(--p-space-3));
}

/* Person: avatar beside a name and a role */

.person {
  display: flex;
  align-items: center;
  gap: var(--p-space-3);
}

.person__name {
  display: block;
  font-weight: var(--p-weight-semibold);
  line-height: var(--p-leading-snug);
}

.person__role {
  display: block;
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
  line-height: var(--p-leading-snug);
}

/* source: components/form.css */
/*
  Forms: outlined square fields, label above, asterisk on required,
  inline error under the field plus a summary at the top (taste R-01 to R-04).
  Field borders use --field-border, which clears 3:1 against the surface.
*/

.form {
  display: grid;
  gap: var(--p-space-6);
}

.form-grid {
  display: grid;
  gap: var(--p-space-6);
}

@media (min-width: 48rem) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid__full {
    grid-column: 1 / -1;
  }
}

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

.field__label,
.choice-group__legend {
  color: var(--ink);
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-semibold);
}

.field__required {
  color: var(--status-error-ink);
  margin-inline-start: var(--p-space-1);
}

.field__hint {
  color: var(--ink-muted);
  font-size: var(--p-text-xs);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--p-space-2);
  color: var(--status-error-ink);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-semibold);
}

.field__error .icon {
  color: var(--status-error);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--field-h);
  padding: var(--p-space-3) var(--p-space-4);
  border: var(--border-hair) solid var(--field-border);
  border-radius: var(--p-radius-none);
  background: var(--field-bg);
  color: var(--ink);
  font-size: var(--p-text-body);
  line-height: var(--p-leading-snug);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.textarea {
  min-height: var(--textarea-h);
  resize: vertical;
}

.select {
  appearance: none;
  padding-inline-end: var(--p-space-12);
  background-image: none;
  cursor: pointer;
}

.select-wrap {
  position: relative;
}

.select-wrap .icon {
  position: absolute;
  inset-inline-end: var(--p-space-4);
  inset-block-start: 50%;
  color: var(--ink-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--field-placeholder);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--focus-ring);
  outline-offset: 0;
}

.field--invalid .input,
.field--invalid .select,
.field--invalid .textarea {
  border-color: var(--status-error);
  box-shadow: inset var(--border-rule) 0 0 var(--status-error);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  border-color: var(--hairline);
  background: var(--field-disabled-bg);
  color: var(--ink-disabled);
  cursor: not-allowed;
}

@media (hover: hover) {
  .input:hover:not(:disabled, :focus-visible),
  .select:hover:not(:disabled, :focus-visible),
  .textarea:hover:not(:disabled, :focus-visible) {
    border-color: var(--field-border-hover);
  }
}

/* Checkbox and radio: native inputs restyled, label clickable across its row */

.choice-group {
  display: grid;
  gap: var(--p-space-3);
}

.choice-group__options {
  display: grid;
  gap: var(--p-space-1);
}

.choice-group--inline .choice-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-2) var(--p-space-6);
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-3);
  min-height: var(--tap-sm);
  cursor: pointer;
  font-size: var(--p-text-sm);
}

.choice__input {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width: var(--control);
  height: var(--control);
  margin: 0;
  border: var(--border-hair) solid var(--field-border);
  background: var(--field-bg);
  appearance: none;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.choice__input[type="radio"] {
  border-radius: var(--p-radius-round);
}

.choice__input::before {
  content: "";
  width: var(--control-mark);
  height: var(--control-mark);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}

.choice__input[type="checkbox"]::before {
  background: var(--ink-on-accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.choice__input[type="radio"]::before {
  border-radius: var(--p-radius-round);
  background: var(--accent);
}

.choice__input:checked {
  border-color: var(--accent);
}

.choice__input[type="checkbox"]:checked {
  background: var(--accent);
}

.choice__input:checked::before {
  transform: scale(1);
}

.choice__input:disabled,
.choice__input:disabled + span {
  color: var(--ink-disabled);
  cursor: not-allowed;
}

@media (hover: hover) {
  .choice:hover .choice__input:not(:checked, :disabled) {
    border-color: var(--field-border-hover);
  }
}

/* Error summary: sits above the form, links to each invalid field */

.error-summary {
  display: grid;
  gap: var(--p-space-3);
  padding: var(--p-space-5) var(--p-space-6);
  border: var(--border-hair) solid var(--hairline);
  border-inline-start: var(--border-rule) solid var(--status-error);
  background: var(--surface-card);
}

.error-summary__title {
  display: flex;
  align-items: center;
  gap: var(--p-space-2);
  font-family: var(--p-font-sans);
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-bold);
  letter-spacing: normal;
}

.error-summary__title .icon {
  color: var(--status-error);
}

.error-summary__list {
  display: grid;
  gap: var(--p-space-1);
  padding-inline-start: var(--p-space-6);
  font-size: var(--p-text-sm);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p-space-4);
}

.form__note {
  color: var(--ink-muted);
  font-size: var(--p-text-xs);
}

/* source: components/accordion.css */
/*
  Accordion: native <details>/<summary>, no JS. Used for FAQs and long
  service scopes. The plus turns into a cross when an item is open.
*/

.accordion {
  border-block-start: var(--border-hair) solid var(--hairline-strong);
}

.accordion__item {
  border-block-end: var(--border-hair) solid var(--hairline-strong);
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-6);
  min-height: var(--tap-lg);
  padding: var(--p-space-5) var(--p-space-4);
  margin-inline: calc(-1 * var(--p-space-4));
  font-family: var(--p-font-display);
  font-size: var(--p-text-h4);
  font-weight: var(--p-weight-bold);
  letter-spacing: var(--p-tracking-heading);
  line-height: var(--p-leading-snug);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--tap-sm);
  height: var(--tap-sm);
  border: var(--border-hair) solid var(--field-border);
  border-radius: var(--p-radius-round);
  transition:
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.accordion__item[open] .accordion__icon {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface-page);
  transform: rotate(var(--turn-quarter));
}

.accordion__body {
  display: grid;
  gap: var(--p-space-4);
  max-width: var(--measure);
  padding-block: 0 var(--p-space-6);
  color: var(--ink-muted);
}

@media (hover: hover) {
  .accordion__summary:hover {
    background: var(--surface-hover);
  }

  .accordion__summary:hover .accordion__icon {
    border-color: var(--hairline-hover);
  }

  .accordion__item[open] .accordion__summary:hover .accordion__icon {
    border-color: var(--ink);
  }
}

/* source: components/tabs.css */
/*
  Tabs: ARIA tablist driven by site.js (arrow keys, Home, End).
  The selected tab carries a two-pixel brand rule under its label.
*/

.tabs__list {
  display: flex;
  gap: var(--p-space-1);
  overflow-x: auto;
  border-block-end: var(--border-hair) solid var(--hairline-strong);
  scrollbar-width: none;
}

.tabs__tab {
  position: relative;
  flex-shrink: 0;
  min-height: var(--tap);
  padding-inline: var(--p-space-4);
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-semibold);
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.tabs__tab::after {
  content: "";
  position: absolute;
  inset-inline: var(--p-space-4);
  inset-block-end: calc(-1 * var(--border-hair));
  height: var(--border-rule);
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.tabs__tab[aria-selected="true"] {
  color: var(--ink);
}

.tabs__tab[aria-selected="true"]::after {
  background: var(--accent);
}

.tabs__tab:focus-visible {
  outline-offset: calc(-1 * var(--focus-width));
}

.tabs__panel {
  padding-block-start: var(--p-space-8);
}

@media (hover: hover) {
  .tabs__tab:hover {
    background: var(--surface-hover);
    color: var(--ink);
  }

  .tabs__tab[aria-selected="false"]:hover::after {
    background: var(--hairline-hover);
  }
}

/* source: components/pagination.css */
/* Pagination: numbered (taste K-06), previous and next at the ends. */

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p-space-2);
}

.pagination__link,
.pagination__current,
.pagination__gap {
  display: inline-grid;
  place-items: center;
  min-width: var(--tap);
  height: var(--tap);
  padding-inline: var(--p-space-3);
  border: var(--border-hair) solid var(--hairline);
  border-radius: var(--p-radius-pill);
  color: var(--ink);
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-semibold);
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.pagination__link--step {
  display: inline-flex;
  gap: var(--p-space-2);
  padding-inline: var(--p-space-4);
}

.pagination__current {
  border-color: var(--chip-selected-bg);
  background: var(--chip-selected-bg);
  color: var(--chip-selected-ink);
}

.pagination__gap {
  border-color: transparent;
  color: var(--ink-muted);
}

.pagination__link[aria-disabled="true"] {
  color: var(--ink-disabled);
  pointer-events: none;
}

@media (hover: hover) {
  .pagination__link:hover {
    border-color: var(--hairline-hover);
    background: var(--surface-hover);
  }
}

/* source: components/alert.css */
/*
  Alert: a neutral panel whose status shows in the icon and the start rule
  (taste C-03). The title always names the state in words.
*/

.alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--p-space-2) var(--p-space-4);
  padding: var(--p-space-5) var(--p-space-6);
  border: var(--border-hair) solid var(--hairline);
  border-inline-start: var(--border-rule) solid var(--alert-tone, var(--ink-muted));
  background: var(--surface-card);
}

.alert > .icon {
  grid-row: span 2;
  color: var(--alert-tone, var(--ink-muted));
}

.alert__title {
  font-family: var(--p-font-sans);
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-bold);
  letter-spacing: normal;
}

.alert__text {
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
}

.alert--info {
  --alert-tone: var(--status-info);
}

.alert--success {
  --alert-tone: var(--status-success);
}

.alert--warning {
  --alert-tone: var(--status-warning);
}

.alert--error {
  --alert-tone: var(--status-error);
}

/* source: components/dialog.css */
/*
  Dialog: native <dialog> opened with showModal() by site.js
  ([data-dialog-open="id"]); Escape and the backdrop close it.
*/

.dialog {
  width: min(var(--dialog-w), calc(100% - 2 * var(--gutter)));
  max-height: calc(100% - 2 * var(--gutter));
  padding: 0;
  border: var(--border-hair) solid var(--hairline);
  background: var(--surface-raised);
  color: var(--ink);
}

.dialog::backdrop {
  background: var(--scrim);
  opacity: var(--scrim-alpha);
}

.dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--p-space-4);
  padding: var(--p-space-6) var(--p-space-6) 0;
}

.dialog__title {
  font-size: var(--p-text-h3);
  font-weight: var(--p-weight-heavy);
}

.dialog__body {
  display: grid;
  gap: var(--p-space-5);
  padding: var(--p-space-5) var(--p-space-6);
  color: var(--ink-muted);
}

.dialog__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--p-space-3);
  padding: var(--p-space-5) var(--p-space-6) var(--p-space-6);
  border-block-start: var(--border-hair) solid var(--hairline);
}

/* source: components/table.css */
/*
  Table: for comparisons (packages, scopes). Wrapped so it scrolls inside
  its own box on a phone instead of widening the page.
*/

.table-wrap {
  overflow-x: auto;
  border-block-start: var(--border-rule) solid var(--ink);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--p-text-sm);
}

.table caption {
  padding-block: var(--p-space-3);
  color: var(--ink-muted);
  font-size: var(--p-text-xs);
  text-align: start;
  caption-side: bottom;
}

.table th,
.table td {
  padding: var(--p-space-4);
  border-block-end: var(--border-hair) solid var(--hairline);
  text-align: start;
  vertical-align: top;
}

.table thead th {
  color: var(--ink-muted);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}

.table tbody th {
  font-weight: var(--p-weight-semibold);
}

/* A yes carries a red square glyph; the word stays in ink so it reads in both themes. */
.table__yes {
  color: var(--ink);
  font-weight: var(--p-weight-semibold);
}

.table__yes::before {
  content: "";
  display: inline-block;
  width: var(--p-space-2);
  height: var(--p-space-2);
  margin-inline-end: var(--p-space-2);
  background: var(--accent);
}

.table__no {
  color: var(--ink-muted);
}

.table tbody tr {
  transition: background-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .table tbody tr:hover {
    background: var(--surface-hover);
  }
}

/* source: patterns/motif.css */
/*
  Brand motifs drawn as inline SVG: right-facing half discs, the
  black-to-red gradient disc and thin staggered diagonal lines.
  Shapes take a class, never a fill attribute, so both themes recolour them.
*/

.motif {
  width: 100%;
  height: auto;
}

.motif__solid {
  fill: var(--motif-solid);
}

.motif__soft {
  fill: var(--motif-soft);
}

.motif__line {
  stroke: var(--motif-line);
  stroke-width: var(--motif-stroke);
}

.motif__line--accent {
  stroke: var(--accent);
}

.motif__line--cut {
  stroke: var(--surface-page);
  stroke-width: var(--motif-stroke-cut);
}

.stop-from {
  stop-color: var(--motif-grad-from);
}

.stop-to {
  stop-color: var(--motif-grad-to);
}

.stop-dark {
  stop-color: var(--surface-fixed-dark);
}

.stop-brand {
  stop-color: var(--brand);
}

/* Card art: fixed compositions for case, media and placeholder imagery */

.art__ground--accent {
  fill: var(--accent);
}

.art__ground--soft {
  fill: var(--motif-card-ground);
}

.art__ground--dark {
  fill: var(--surface-fixed-dark);
}

.art__shape--light {
  fill: var(--motif-light);
}

.art__shape--solid {
  fill: var(--motif-solid);
}

.art__shape--accent {
  fill: var(--accent);
}

.art__shape--graphite {
  fill: var(--surface-fixed-graphite);
}

.art__shape--faint {
  fill: var(--motif-light);
  opacity: var(--motif-fade);
}

.art__line {
  stroke-width: var(--motif-stroke);
}

.art__line--dark {
  stroke: var(--surface-fixed-dark);
}

.art__line--light {
  stroke: var(--motif-light);
}

.art__line--accent {
  stroke: var(--accent);
}

/* A media frame keeps the art's ratio and zooms it on card hover */

.media-frame {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--motif-card-ground);
}

.media-frame--video {
  aspect-ratio: 16 / 9;
}

.media-frame--square {
  aspect-ratio: 1;
}

.media-frame > svg,
.media-frame > img {
  width: 100%;
  height: 100%;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .is-hover-target:hover .media-frame > svg,
  .is-hover-target:hover .media-frame > img {
    transform: scale(var(--media-zoom));
  }
}

/* source: patterns/site-header.css */
/*
  Site header: sticky, solid surface, hairline under it.
  Desktop (60rem up): inline links, the Services mega menu (a full-width
  panel under the bar: the four lines in columns, each with its services),
  the primary action and the theme toggle. Below 60rem: the same <nav>
  becomes a side drawer and the menu keeps only the four line links.
*/

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--p-z-header);
  background: var(--surface-page);
  border-block-end: var(--border-hair) solid var(--hairline);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--p-space-6);
  min-height: var(--header-h);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-inline-end: auto;
}

.brand-logo {
  width: auto;
  height: var(--logo-h);
  fill: var(--brand);
  color: var(--ink);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--p-space-2);
}

.theme-toggle__sun,
:root[data-theme="dark"] .theme-toggle__moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__sun {
  display: block;
}

.menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
  display: block;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-1);
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-weight: var(--p-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.site-nav__link[aria-current="page"],
.site-nav__link.is-current,
.site-nav__link[aria-expanded="true"] {
  color: var(--ink);
}

.site-nav__caret {
  transition: transform var(--dur-fast) var(--ease-out);
}

.site-nav__link[aria-expanded="true"] .site-nav__caret {
  transform: rotate(var(--turn-half));
}

/* Services menu: per line, an icon, the name and tagline, then its services */

.nav-menu__grid {
  display: grid;
  gap: var(--p-space-1);
}

.nav-menu__group {
  display: grid;
  align-content: start;
}

.nav-menu__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--p-space-1) var(--p-space-4);
  padding: var(--p-space-3);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nav-menu__link .icon-tile {
  grid-row: span 2;
  background: var(--icon-tile-on-card);
}

.nav-menu__title {
  font-weight: var(--p-weight-semibold);
  line-height: var(--p-leading-snug);
}

.nav-menu__text {
  color: var(--ink-muted);
  font-size: var(--p-text-xs);
  line-height: var(--p-leading-snug);
}

.nav-menu__link[aria-current="page"] {
  background: var(--surface-hover);
}

/* Service links hang under the line's name, aligned with its text (desktop) */
.nav-menu__services {
  display: grid;
}

.nav-menu__service {
  display: flex;
  align-items: center;
  min-height: var(--tap-sm);
  padding-block: var(--p-space-1);
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
  line-height: var(--p-leading-snug);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition:
    color var(--dur-fast) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out);
}

.nav-menu__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--p-space-4);
  margin-block-start: var(--p-space-3);
  padding: var(--p-space-3) var(--p-space-3) 0;
  border-block-start: var(--border-hair) solid var(--hairline);
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
}

@media (hover: hover) {
  .site-nav__link:hover {
    color: var(--ink);
  }

  .nav-menu__link:hover {
    background: var(--surface-hover);
  }

  .nav-menu__link:hover .icon-tile {
    background: var(--brand);
    color: var(--ink-on-accent);
  }

  .nav-menu__service:hover {
    color: var(--ink);
    text-decoration-color: var(--accent);
  }
}

@media (min-width: 60rem) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--p-space-6);
  }

  .site-nav__list {
    display: flex;
    gap: var(--p-space-6);
  }

  .site-nav__item {
    position: relative;
  }

  .site-nav__link {
    font-size: var(--p-text-sm);
  }

  /* A brand rule grows under the hovered or current link */
  .site-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--p-space-2);
    height: var(--border-rule);
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .site-nav__link[aria-current="page"]::after,
  .site-nav__link.is-current::after {
    transform: scaleX(1);
  }

  /* The mega menu hangs from the header itself, full width, under the bar */
  .site-nav__item--mega {
    position: static;
  }

  .nav-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: var(--p-z-menu);
    border-block-start: var(--border-rule) solid var(--accent);
    border-block-end: var(--border-hair) solid var(--hairline);
    background: var(--surface-raised);
  }

  .nav-menu__inner {
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--p-space-6) var(--gutter) var(--p-space-4);
  }

  .nav-menu__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--p-space-4);
  }

  .nav-menu__group .nav-menu__link {
    margin-inline: calc(-1 * var(--p-space-3));
  }

  .nav-menu__services {
    margin-inline-start: calc(var(--tap) + var(--p-space-4));
    margin-block-start: var(--p-space-2);
  }

  .nav-menu__footer {
    margin-block-start: var(--p-space-5);
    padding-inline: 0;
  }

  .menu-toggle,
  .site-nav__scrim {
    display: none;
  }
}

@media (min-width: 60rem) and (hover: hover) {
  .site-nav__link:hover::after {
    transform: scaleX(1);
  }

  .site-nav__trigger:hover::after {
    transform: scaleX(0);
  }
}

@media (max-width: 59.99rem) {
  .site-nav {
    position: fixed;
    inset-block: var(--header-h) 0;
    inset-inline-end: 0;
    z-index: var(--p-z-drawer);
    display: flex;
    flex-direction: column;
    gap: var(--p-space-8);
    width: var(--drawer-w);
    padding: var(--p-space-4) var(--p-space-6) var(--p-space-8);
    overflow-y: auto;
    background: var(--surface-page);
    border-inline-start: var(--border-hair) solid var(--hairline);
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform var(--dur-drawer) var(--ease-out),
      visibility 0s linear var(--dur-drawer);
  }

  .site-nav[data-state="open"] {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-drawer) var(--ease-out);
  }

  .site-nav__list {
    display: grid;
  }

  .site-nav__item {
    border-block-end: var(--border-hair) solid var(--hairline);
  }

  .site-nav__link {
    justify-content: space-between;
    width: 100%;
    min-height: calc(var(--tap) + var(--p-space-2));
    color: var(--ink);
    font-family: var(--p-font-display);
    font-size: var(--p-text-h4);
    font-weight: var(--p-weight-bold);
    letter-spacing: var(--p-tracking-heading);
  }

  .nav-menu {
    padding-block-end: var(--p-space-3);
  }

  .nav-menu__link {
    padding-inline: 0;
  }

  /* The tagline is hidden here, so the tile and the name share one centred row */
  .nav-menu__link .icon-tile {
    grid-row: auto;
  }

  .nav-menu__text,
  .nav-menu__services,
  .nav-menu__footer {
    display: none;
  }

  .site-nav__cta {
    align-self: stretch;
  }

  .site-nav__scrim {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--scrim);
    opacity: var(--scrim-alpha);
  }
}

/* source: patterns/site-footer.css */
/* Site footer: dark in both themes; brand, three link columns, newsletter, base row. */

.site-footer {
  padding-block: var(--p-space-20) var(--p-space-8);
  background: var(--surface-footer);
  color: var(--ink-inverse);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--p-space-10) var(--p-space-6);
}

.site-footer__brand,
.site-footer__contact {
  grid-column: 1 / -1;
}

.footer-logo {
  width: auto;
  height: var(--footer-logo-h);
  fill: var(--brand);
  color: var(--ink-inverse);
}

.site-footer__tagline {
  max-width: 36ch;
  margin-block-start: var(--p-space-5);
  color: var(--ink-inverse-muted);
  font-size: var(--p-text-sm);
}

.social-list {
  display: flex;
  gap: var(--p-space-2);
  margin-block-start: var(--p-space-6);
}

.site-footer__heading {
  margin-block-end: var(--p-space-2);
  color: var(--ink-inverse-muted);
  font-family: var(--p-font-sans);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-eyebrow);
  text-transform: uppercase;
}

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink-inverse);
  font-size: var(--p-text-sm);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.site-footer__newsletter {
  grid-column: 1 / -1;
  padding-block-start: var(--p-space-10);
  border-block-start: var(--border-hair) solid var(--hairline-inverse);
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--p-space-2) var(--p-space-6);
  margin-block-start: var(--p-space-12);
  padding-block-start: var(--p-space-6);
  border-block-start: var(--border-hair) solid var(--hairline-inverse);
  color: var(--ink-inverse-muted);
  font-size: var(--p-text-sm);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-6);
}

.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-sm);
  color: var(--ink-inverse-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .site-footer__list a:hover {
    text-decoration-color: var(--accent);
  }

  .site-footer__legal a:hover {
    color: var(--ink-inverse);
  }
}

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer__contact {
    grid-column: auto;
  }
}

@media (min-width: 64rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: auto;
  }
}

/* source: patterns/page-hero.css */
/*
  Page hero for every page below home: breadcrumbs, eyebrow, title, lead,
  optional actions and an optional motif on the end side.
  The home hero is its own composition (pages/home.css).
*/

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--p-space-6) var(--section-pad-tight);
  border-block-end: var(--border-hair) solid var(--hairline);
}

.page-hero--band {
  background: var(--surface-band);
  border-block-end: 0;
}

.page-hero__grid {
  display: grid;
  gap: var(--p-space-10);
  align-items: end;
}

.page-hero__copy {
  display: grid;
  gap: var(--p-space-6);
  justify-items: start;
  padding-block-start: clamp(var(--p-space-8), 5vw, var(--p-space-16));
}

.page-hero__title {
  max-width: 18ch;
  font-size: var(--p-text-page-title);
  font-weight: var(--p-weight-heavy);
  line-height: var(--p-leading-tight);
  letter-spacing: var(--p-tracking-display);
}

.page-hero__lead {
  max-width: 52ch;
  color: var(--ink-muted);
  font-size: var(--p-text-lead);
  line-height: var(--p-leading-snug);
}

.page-hero__art {
  display: none;
}

@media (min-width: 64rem) {
  .page-hero__grid--with-art {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

  .page-hero__art {
    display: block;
    justify-self: end;
    width: min(100%, 22rem);
  }
}

/* source: patterns/stat-row.css */
/*
  Stat row: two to four figures separated by hairlines. The figure reads
  first visually, the label first in the DOM (<dl>: dt label, dd value).
*/

.stat-row {
  display: grid;
  grid-template-columns: repeat(var(--stat-cols, 3), minmax(0, 1fr));
  border-block-start: var(--border-hair) solid var(--hairline);
}

.stat-row--4 {
  --stat-cols: 2;
}

.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--p-space-2);
  padding-block: var(--p-space-6) var(--p-space-2);
  padding-inline-end: var(--p-space-3);
}

.stat + .stat {
  padding-inline-start: clamp(var(--p-space-3), 3vw, var(--p-space-8));
  border-inline-start: var(--border-hair) solid var(--hairline);
}

.stat__label {
  color: var(--ink-muted);
  font-size: var(--p-text-xs);
  line-height: var(--p-leading-snug);
}

.stat__value {
  font-family: var(--p-font-display);
  font-size: var(--p-text-stat);
  font-weight: var(--p-weight-heavy);
  line-height: var(--p-leading-none);
  letter-spacing: var(--p-tracking-display);
}

.stat__value--accent {
  color: var(--accent);
}

.stat-row--on-dark {
  border-color: var(--hairline-inverse);
}

.stat-row--on-dark .stat + .stat {
  border-color: var(--hairline-inverse);
}

.stat-row--on-dark .stat__label {
  color: var(--ink-inverse-muted);
}

@media (max-width: 47.99rem) {
  .stat-row--4 .stat:nth-child(3) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

@media (min-width: 48rem) {
  .stat__label {
    font-size: var(--p-text-sm);
  }

  .stat-row--4 {
    --stat-cols: 4;
  }
}

/* A stat row that follows other content inside the same section */
.stat-row--spaced {
  margin-block-start: clamp(var(--p-space-12), 6vw, var(--p-space-20));
}

/* source: patterns/service-card.css */
/*
  Service card: icon tile, index, title, text, deliverable chips, arrow link.
  The whole card is one link (stretched). Variants: featured (brand red),
  prompt (dark, holds a button instead of a link).
  Hover: a brand rule appears on the top edge, the icon tile turns red,
  the arrow travels.
*/

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--p-space-5);
  padding: clamp(var(--p-space-6), 3vw, var(--p-space-10));
  background: var(--surface-card-on-band);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.service-card--on-page {
  background: var(--surface-card);
}

.service-card .icon-tile {
  background: var(--icon-tile-on-card);
}

.service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service-card__index {
  color: var(--ink-muted);
  font-family: var(--p-font-display);
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-bold);
}

.service-card__title {
  font-size: var(--p-text-h3);
  font-weight: var(--p-weight-heavy);
}

.service-card__text {
  max-width: 52ch;
  color: var(--ink-muted);
}

.service-card__link {
  margin-block-start: auto;
}

.service-card__button {
  align-self: flex-start;
  margin-block-start: auto;
}

.service-card--featured {
  background: var(--surface-accent);
  color: var(--ink-on-accent);
}

.service-card--featured .icon-tile {
  background: var(--ink-on-accent);
  color: var(--brand);
}

.service-card--featured .service-card__index,
.service-card--featured .service-card__text {
  color: var(--ink-on-accent);
}

.service-card--featured .service-card__title {
  max-width: 16ch;
  font-size: var(--p-text-feature);
}

.service-card--featured .service-card__text {
  font-size: var(--p-text-lead);
  line-height: var(--p-leading-snug);
}

.service-card--prompt {
  background: var(--surface-prompt);
  color: var(--ink-inverse);
}

.service-card--prompt .icon-tile {
  background: var(--surface-fixed-graphite);
  color: var(--ink-on-dark);
}

.service-card--prompt .service-card__text {
  color: var(--ink-inverse-muted);
}

@media (hover: hover) {
  .service-card.is-hover-target:hover {
    box-shadow: inset 0 var(--border-rule) 0 var(--accent);
  }

  .service-card.is-hover-target:hover .icon-tile {
    background: var(--brand);
    color: var(--ink-on-accent);
  }

  .service-card--featured.is-hover-target:hover {
    box-shadow: inset 0 var(--border-rule) 0 var(--ink-on-accent);
  }

  .service-card--featured.is-hover-target:hover .icon-tile {
    background: var(--surface-fixed-dark);
    color: var(--ink-on-dark);
  }
}

/* source: patterns/line-card.css */
/*
  Line card: one service line in a compact card. Icon tile and index on
  top, the line's name and tagline, its service count over a hairline, and
  one arrow link to the landing page, stretched over the whole card.
  Card fill follows its ground: n-50 on the page, white on a band.
  Hover: the service-card language (red top rule, red tile, arrow travels).
*/

.line-card {
  display: flex;
  flex-direction: column;
  gap: var(--p-space-4);
  padding: clamp(var(--p-space-6), 2.4vw, var(--p-space-8));
  background: var(--surface-card);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.section--band .line-card {
  background: var(--surface-card-on-band);
}

.line-card .icon-tile {
  background: var(--icon-tile-on-card);
}

.line-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.line-card__index {
  color: var(--ink-muted);
  font-family: var(--p-font-display);
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-bold);
}

.line-card__title {
  font-size: var(--p-text-h3);
  font-weight: var(--p-weight-heavy);
}

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

.line-card__count {
  margin-block-start: auto;
  padding-block-start: var(--p-space-4);
  border-block-start: var(--border-hair) solid var(--hairline);
  color: var(--ink-muted);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-eyebrow);
  text-transform: uppercase;
}

.line-card__link {
  margin-block-start: calc(-1 * var(--p-space-2));
}

@media (hover: hover) {
  .line-card:hover {
    box-shadow: inset 0 var(--border-rule) 0 var(--accent);
  }

  .line-card:hover .icon-tile {
    background: var(--brand);
    color: var(--ink-on-accent);
  }
}

/*
  Below 48rem the card becomes a compact row: tile, name and tagline, the
  arrow on the end. The index and the count step aside and the link's label
  is read by screen readers only, so four lines fit in one screen.
*/
@media (max-width: 47.99rem) {
  .line-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--p-space-1) var(--p-space-4);
    padding: var(--p-space-5);
  }

  .line-card__top {
    grid-row: 1 / span 2;
  }

  .line-card__index,
  .line-card__count {
    display: none;
  }

  .line-card__title {
    font-size: var(--p-text-h4);
  }

  .line-card__text {
    grid-column: 2;
    font-size: var(--p-text-sm);
    line-height: var(--p-leading-snug);
  }

  .line-card__link {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .line-card__link .arrow-link__label {
    position: absolute;
    width: var(--border-hair);
    height: var(--border-hair);
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* source: patterns/service-row.css */
/*
  Service rows: the services of one line, one ruled row each. Icon tile,
  name and one-line summary, an arrow on the end; the row is one link to
  the service's section on its landing page.
  Hover: the row tints, the tile turns red, the name underlines in red and
  the arrow travels. --2 sets the rows in two columns from 64rem.
  The row reaches a step past the column on each side so its hover tint
  has room; its rule is drawn inset, so rules line up with the column.
*/

.service-rows {
  display: grid;
  border-block-start: var(--border-hair) solid var(--hairline-strong);
}

.service-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--p-space-4) var(--p-space-5);
  padding: var(--p-space-5) var(--p-space-4);
  margin-inline: calc(-1 * var(--p-space-4));
  transition: background-color var(--dur-fast) var(--ease-out);
}

.service-row::after {
  content: "";
  position: absolute;
  inset-inline: var(--p-space-4);
  inset-block-end: 0;
  border-block-end: var(--border-hair) solid var(--hairline-strong);
}

.service-row__main {
  display: grid;
  gap: var(--p-space-1);
}

.service-row__title {
  font-size: var(--p-text-h4);
  font-weight: var(--p-weight-bold);
  line-height: var(--p-leading-snug);
}

.service-row__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--border-hair);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.service-row__text {
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
  line-height: var(--p-leading-snug);
}

.service-row__arrow {
  color: var(--ink-muted);
}

@media (hover: hover) {
  .service-row:hover {
    background: var(--surface-hover);
  }

  .service-row:hover .icon-tile {
    background: var(--brand);
    color: var(--ink-on-accent);
  }

  .service-row:hover .service-row__link {
    text-decoration-color: var(--accent);
  }

  .service-row:hover .service-row__arrow {
    color: var(--ink);
  }
}

@media (min-width: 64rem) {
  .service-rows--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--p-space-12);
  }
}

/* source: patterns/service-line.css */
/*
  Service line: one chapter of the home page per line. A rail on top
  (red index, the line's name as the section heading, the service count)
  over a two-pixel ink rule; below it the promise, the intro and the call
  to the landing page on the start side, the service rows on the end side.
  The rail's name is the section's h2; the promise is display text. The
  line's motif stands on the rail's rule at the end, so each chapter carries
  its own mark without leaving a gap beside the rows.
*/

.service-line__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--p-space-2) var(--p-space-4);
  margin-block-end: clamp(var(--p-space-8), 4vw, var(--p-space-12));
  padding-block-end: var(--p-space-4);
  border-block-end: var(--border-rule) solid var(--ink);
}

.service-line__index,
.service-line__name {
  font-family: var(--p-font-display);
  font-size: var(--p-text-h3);
  font-weight: var(--p-weight-heavy);
  line-height: var(--p-leading-none);
  letter-spacing: var(--p-tracking-heading);
}

.service-line__index {
  color: var(--accent);
}

.service-line__count {
  color: var(--ink-muted);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-eyebrow);
  text-transform: uppercase;
}

.service-line__art {
  width: var(--line-mark-w);
  margin-inline-start: auto;
  margin-block-end: calc(-1 * var(--p-space-4));
}

.service-line__grid {
  display: grid;
  gap: var(--p-space-10);
}

.service-line__head {
  display: grid;
  gap: var(--p-space-6);
  justify-items: start;
}

@media (min-width: 64rem) {
  .service-line__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--p-space-16);
    align-items: start;
  }
}

/* On phones the count steps aside so the name and the motif share one row */
@media (max-width: 47.99rem) {
  .service-line__count {
    display: none;
  }
}

/* source: patterns/service-detail.css */
/*
  Service detail: one service on its line's landing page. Icon tile and
  "Service 01 of 04", the service name, a lead, the questions it answers
  and a secondary call on the start side; a "What you get" panel under a
  red rule on the end side. Sections alternate page and band; on a band the
  panel reads --surface-on-band so its red glyphs keep 3:1 in dark theme.
*/

.service-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--p-space-10);
}

.service-detail__main {
  display: grid;
  gap: var(--p-space-6);
  justify-items: start;
}

.service-detail__top {
  display: flex;
  align-items: center;
  gap: var(--p-space-4);
}

.service-detail__lead {
  max-width: 52ch;
  color: var(--ink-muted);
  font-size: var(--p-text-lead);
  line-height: var(--p-leading-snug);
}

.service-detail__answers {
  display: grid;
  gap: var(--p-space-3);
}

.service-detail__label {
  color: var(--ink-muted);
  font-family: var(--p-font-sans);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-eyebrow);
  text-transform: uppercase;
}

.service-detail__questions {
  display: grid;
  gap: var(--p-space-3);
}

.service-detail__questions li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--p-space-3);
  align-items: start;
  font-weight: var(--p-weight-medium);
}

.service-detail__mark {
  margin-block-start: var(--p-space-1);
  color: var(--accent);
}

.service-detail__panel {
  display: grid;
  gap: var(--p-space-5);
  padding: clamp(var(--p-space-6), 3vw, var(--p-space-10));
  border-block-start: var(--border-rule) solid var(--accent);
  background: var(--surface-card);
}

.section--band .service-detail__panel {
  background: var(--surface-on-band);
}

@media (min-width: 64rem) {
  .service-detail__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--p-space-16);
    align-items: start;
  }

  /* The panel's top edge lines up with the service name, under the tile row */
  .service-detail__panel {
    margin-block-start: calc(var(--tap) + var(--p-space-6));
  }

  /* Mirrored on a band: the panel takes the start column, reading order unchanged */
  .service-detail--flip .service-detail__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }

  .service-detail--flip .service-detail__panel {
    grid-row: 1;
    grid-column: 1;
  }
}

/* source: patterns/case-card.css */
/*
  Case card: 16:10 media, sector meta, title, one headline result.
  Hover: the media zooms inside its frame, a brand rule lights the seam
  between media and body, the title underlines.
*/

.case-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
}

.case-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--p-space-3);
  padding: var(--p-space-6);
  border-block-start: var(--border-rule) solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.case-card__meta {
  color: var(--ink-muted);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-eyebrow);
  text-transform: uppercase;
}

.case-card__title {
  font-size: var(--p-text-card-title);
  font-weight: var(--p-weight-bold);
  line-height: var(--p-leading-snug);
}

.case-card__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--border-hair);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.case-card__result {
  display: flex;
  align-items: baseline;
  gap: var(--p-space-2);
  margin-block-start: auto;
  padding-block-start: var(--p-space-4);
  border-block-start: var(--border-hair) solid var(--hairline);
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
}

.case-card__result strong {
  color: var(--ink);
  font-family: var(--p-font-display);
  font-size: var(--p-text-h3);
  font-weight: var(--p-weight-heavy);
  letter-spacing: var(--p-tracking-heading);
}

@media (hover: hover) {
  .case-card:hover .case-card__body {
    border-color: var(--accent);
  }

  .case-card:hover .case-card__link {
    text-decoration-color: currentColor;
  }
}

/* Feature-first grid: the first case runs wide on tablet */

.case-grid {
  display: grid;
  gap: var(--p-space-6);
}

@media (min-width: 48rem) {
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-grid > .case-card:first-child {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .case-grid > .case-card:first-child .media-frame {
    align-self: start;
  }

  .case-grid > .case-card:first-child .case-card__body {
    border-block-start: 0;
    border-inline-start: var(--border-rule) solid transparent;
  }
}

@media (min-width: 64rem) {
  .case-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  .case-grid > .case-card:first-child {
    grid-column: auto;
    display: flex;
  }

  .case-grid > .case-card:first-child .case-card__body {
    border-block-start: var(--border-rule) solid transparent;
    border-inline-start: 0;
  }
}

/* source: patterns/case-study.css */
/*
  Case study: one project on the Work page, not a link. 16:10 art beside
  the sector, title, challenge and approach, the headline result and links
  to the service lines involved. Studies stack under hairlines; the Work
  filter hides the ones outside the chosen line. Meta and result reuse the
  case card's classes, so both read the same.
*/

.case-studies {
  display: grid;
  border-block-end: var(--border-hair) solid var(--hairline-strong);
}

.case-study {
  display: grid;
  gap: var(--p-space-6);
  padding-block: clamp(var(--p-space-8), 4vw, var(--p-space-12));
  border-block-start: var(--border-hair) solid var(--hairline-strong);
}

.case-study__body {
  display: grid;
  gap: var(--p-space-4);
  align-content: start;
}

.case-study__title {
  max-width: 30ch;
  font-size: var(--p-text-h3);
  font-weight: var(--p-weight-heavy);
}

.case-study__facts {
  display: grid;
  gap: var(--p-space-4);
}

.case-study__fact dt {
  color: var(--ink-muted);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-eyebrow);
  text-transform: uppercase;
}

.case-study__fact dd {
  margin: 0;
}

.case-study__lines {
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
}

.case-study__lines span {
  margin-inline-end: var(--p-space-1);
}

@media (min-width: 48rem) {
  .case-study {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--grid-gap-loose);
    align-items: start;
  }
}

@media (min-width: 64rem) {
  .case-study__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--p-space-6);
  }
}

.case-studies__filter {
  margin-block-end: var(--p-space-8);
}

/* source: patterns/case-detail.css */
/*
  Case detail: the overview's stat row and the chapters of a case study page, one per service line the
  project used. Each chapter opens with the line's rail and a lead, then
  lists the work under hairlines, each row told like a case card: the
  service as a label, a headline saying what it achieved and a link to the
  service on the start side; what we did, what we delivered and the figures
  that show it on the end side. Figures are content images, shown whole at their own
  ratio with a caption, never cropped and never a link.
*/

.case-stats {
  margin-block-start: clamp(var(--p-space-10), 5vw, var(--p-space-16));
}

.case-services {
  display: grid;
  margin-block-start: clamp(var(--p-space-8), 4vw, var(--p-space-12));
  border-block-end: var(--border-hair) solid var(--hairline-strong);
}

.case-service {
  display: grid;
  gap: var(--p-space-5);
  padding-block: clamp(var(--p-space-8), 4vw, var(--p-space-12));
  border-block-start: var(--border-hair) solid var(--hairline-strong);
}

.case-service__head {
  display: grid;
  gap: var(--p-space-3);
  align-content: start;
  justify-items: start;
}

.case-service__top {
  display: flex;
  align-items: center;
  gap: var(--p-space-3);
}

.case-service__title {
  max-width: 20ch;
  font-size: var(--p-text-h3);
  font-weight: var(--p-weight-heavy);
}

.case-service__link {
  font-size: var(--p-text-sm);
}

.case-service__body {
  display: grid;
  gap: var(--p-space-5);
  align-content: start;
  min-width: 0;
}

.case-service__text {
  max-width: var(--measure);
}

.case-service__label {
  margin-block-start: var(--p-space-2);
  color: var(--ink-muted);
  font-family: var(--p-font-sans);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-eyebrow);
  text-transform: uppercase;
}

.case-service .check-list {
  max-width: var(--measure);
}

/* From 1024 px the name column stays in view beside its long text, below the sticky header */
@media (min-width: 64rem) {
  .case-service {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--grid-gap-loose);
  }

  .case-service__head {
    position: sticky;
    top: calc(var(--header-h) + var(--p-space-6));
    align-self: start;
  }
}

/* Figures: whole pictures with a caption; two squares sit side by side from 768 px */

.case-figure {
  display: grid;
  gap: var(--p-space-3);
  margin: 0;
  margin-block-start: var(--p-space-3);
}

.case-figure__img {
  width: 100%;
  height: auto;
  border: var(--border-hair) solid var(--hairline);
}

.case-figure__caption {
  max-width: var(--measure);
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
}

.case-figure--mark {
  max-width: var(--case-mark-w);
}

.case-figure--portrait {
  max-width: var(--case-portrait-w);
}

.case-figures {
  display: grid;
  gap: var(--grid-gap);
  margin-block-start: var(--p-space-3);
}

.case-figures > .case-figure {
  margin-block-start: 0;
}

@media (min-width: 48rem) {
  .case-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* source: patterns/insight-card.css */
/*
  Insight card: text-only article teaser under a two-pixel ink rule.
  Hover: the rule turns brand red, the title underlines.
*/

.insight-card {
  display: flex;
  flex-direction: column;
  gap: var(--p-space-3);
  padding-block-start: var(--p-space-6);
  border-block-start: var(--border-rule) solid var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.insight-card__title {
  font-size: var(--p-text-card-title);
  font-weight: var(--p-weight-bold);
  line-height: var(--p-leading-snug);
}

.insight-card__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

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

.insight-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-2) var(--p-space-4);
  margin-block-start: auto;
  padding-block-start: var(--p-space-2);
  color: var(--ink-muted);
  font-size: var(--p-text-xs);
}

@media (hover: hover) {
  .insight-card:hover {
    border-color: var(--accent);
  }

  .insight-card:hover .insight-card__link {
    text-decoration-color: var(--accent);
  }
}

/* source: patterns/event-card.css */
/*
  Event card: a poster-like dark panel for an Academy panel, workshop or
  talk. The gradient quarter-disc stays in the top end corner, clear of body
  text; only the title may cross it (white on red clears AA).
*/

.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--event-min-h);
  overflow: hidden;
  background: var(--surface-fixed-dark);
  color: var(--ink-on-dark);
}

.event-card__art {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 50%;
  height: auto;
  transition: transform var(--dur-base) var(--ease-out);
  transform-origin: top right;
}

.event-card__body {
  position: relative;
  display: grid;
  gap: var(--p-space-5);
  justify-items: start;
  padding: clamp(var(--p-space-6), 4vw, var(--p-space-12));
}

.event-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  color: var(--ink-on-dark-muted);
  font-size: var(--p-text-xs);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-eyebrow);
  text-transform: uppercase;
}

.event-card__title {
  max-width: 14ch;
  font-size: var(--p-text-event);
  font-weight: var(--p-weight-heavy);
  letter-spacing: var(--p-tracking-display);
}

.event-card__text {
  max-width: 44ch;
  color: var(--ink-on-dark-muted);
}

.event-card__sessions {
  display: grid;
  gap: var(--p-space-3);
  width: 100%;
  padding-block-start: var(--p-space-5);
  border-block-start: var(--border-hair) solid var(--hairline-on-dark);
  color: var(--ink-on-dark-soft);
  font-size: var(--p-text-sm);
}

.event-card__sessions li {
  display: grid;
  grid-template-columns: var(--p-space-2) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--p-space-3);
}

.event-card__sessions li::before {
  content: "";
  width: var(--p-space-2);
  height: var(--p-space-2);
  background: var(--brand);
}

.event-card__link {
  color: var(--ink-on-dark);
}

@media (hover: hover) {
  .event-card:hover .event-card__art {
    transform: scale(var(--media-zoom));
  }
}

/* source: patterns/media-card.css */
/*
  Media card: a showreel, talk recording or podcast episode. A 16:9 frame
  with a round play button; the whole card opens the media.
  Hover: the frame zooms, the play button trades red for ink.
*/

.media-card {
  display: grid;
  gap: var(--p-space-4);
}

.media-card__frame {
  position: relative;
}

.media-card__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  width: var(--play-size);
  height: var(--play-size);
  border-radius: var(--p-radius-round);
  background: var(--brand);
  color: var(--ink-on-accent);
  transform: translate(-50%, -50%);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.media-card__duration {
  position: absolute;
  inset-block-end: var(--p-space-3);
  inset-inline-end: var(--p-space-3);
  padding: var(--p-space-1) var(--p-space-2);
  background: var(--surface-fixed-dark);
  color: var(--ink-on-dark);
  font-size: var(--p-text-2xs);
  font-weight: var(--p-weight-semibold);
}

.media-card__title {
  font-size: var(--p-text-card-title);
  font-weight: var(--p-weight-bold);
  line-height: var(--p-leading-snug);
}

.media-card__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.media-card__meta {
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
}

@media (hover: hover) {
  .media-card:hover .media-card__play {
    background: var(--surface-fixed-dark);
  }

  .media-card:hover .media-card__link {
    text-decoration-color: var(--accent);
  }
}

/* source: patterns/feature-list.css */
/*
  Feature list: reasons, principles or inclusions. Icon tile, short title,
  one or two sentences. Not interactive, so it has no hover.
*/

.feature-list {
  display: grid;
  gap: var(--p-space-10) var(--grid-gap-loose);
}

.feature {
  display: grid;
  gap: var(--p-space-4);
  align-content: start;
}

.feature__title {
  font-size: var(--p-text-h4);
  font-weight: var(--p-weight-bold);
}

.feature__text {
  color: var(--ink-muted);
}

@media (min-width: 48rem) {
  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .feature-list--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Check list: included items, each led by a brand check glyph */

.check-list {
  display: grid;
  gap: var(--p-space-3);
}

.check-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--p-space-3);
  align-items: start;
}

.check-list .icon {
  margin-block-start: var(--p-space-1);
  color: var(--accent);
}

.check-list__off {
  color: var(--ink-muted);
}

.check-list__off .icon {
  color: var(--ink-muted);
}

/* Detail list: a term beside its description, ruled rows (formats, specs) */

.detail-list {
  display: grid;
  width: 100%;
  border-block-start: var(--border-hair) solid var(--hairline-strong);
}

.detail-list__row {
  display: grid;
  grid-template-columns: var(--format-label-w) minmax(0, 1fr);
  gap: var(--p-space-4);
  padding-block: var(--p-space-4);
  border-block-end: var(--border-hair) solid var(--hairline-strong);
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
}

.detail-list__term {
  color: var(--ink);
  font-weight: var(--p-weight-semibold);
}

/* source: patterns/testimonial.css */
/*
  Testimonial: a client's words, attributed to a named person and company.
  No star ratings: a score we cannot source is not shown.
*/

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--p-space-6);
  margin: 0;
  padding: clamp(var(--p-space-6), 3vw, var(--p-space-10));
  background: var(--surface-card);
}

.testimonial__mark {
  color: var(--accent);
}

.testimonial__quote p {
  font-family: var(--p-font-display);
  font-size: var(--p-text-h4);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-heading);
  line-height: var(--p-leading-snug);
}

.testimonial__cite {
  margin-block-start: auto;
  padding-block-start: var(--p-space-5);
  border-block-start: var(--border-hair) solid var(--hairline);
}

.testimonial--dark {
  background: var(--surface-fixed-dark);
  color: var(--ink-on-dark);
}

.testimonial--dark .testimonial__cite {
  border-color: var(--hairline-on-dark);
}

.testimonial--dark .person__role {
  color: var(--ink-on-dark-muted);
}

/* source: patterns/team-card.css */
/*
  Team card: square portrait (or a dominant-colour block with initials),
  name, role, profile links. Links are the only interactive part.
*/

.team-card {
  display: grid;
  gap: var(--p-space-4);
  align-content: start;
}

.team-card__portrait {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--motif-card-ground);
  color: var(--ink-muted);
  font-family: var(--p-font-display);
  font-size: var(--p-text-h2);
  font-weight: var(--p-weight-heavy);
  letter-spacing: var(--p-tracking-display);
}

.team-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__name {
  font-size: var(--p-text-h4);
  font-weight: var(--p-weight-bold);
}

.team-card__role {
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
}

.team-card__links {
  display: flex;
  gap: var(--p-space-2);
}

/*
  Profile card: a team card with a bio, for a page that introduces its
  people (the founders on About). It takes the card surface of its ground,
  sets the role as an eyebrow above the name, and stacks below 48rem with
  the portrait capped so a 640 px file stays sharp. From 48rem the portrait
  stands beside the text with the profile link under it, so both columns end
  near the same line; the list goes two up only from 64rem (.grid--2-wide),
  where each card is wide enough for both columns.
*/

.team-card--profile {
  grid-template-areas: "portrait" "head" "bio" "links";
  gap: var(--p-space-5);
  padding: clamp(var(--p-space-6), 2.4vw, var(--p-space-8));
  background: var(--surface-card);
}

.section--band .team-card--profile {
  background: var(--surface-card-on-band);
}

.team-card--profile .team-card__portrait {
  grid-area: portrait;
  width: 100%;
  max-width: var(--team-portrait-w);
}

.team-card__head {
  display: flex;
  flex-direction: column;
}

.team-card--profile .team-card__head {
  grid-area: head;
  gap: var(--p-space-3);
}

.team-card__eyebrow {
  order: -1;
}

.team-card--profile .team-card__name {
  font-size: var(--p-text-h3);
  font-weight: var(--p-weight-heavy);
  letter-spacing: var(--p-tracking-heading);
}

.team-card__bio {
  grid-area: bio;
  max-width: var(--measure);
  color: var(--ink-muted);
}

.team-card--profile .team-card__links {
  grid-area: links;
}

@media (min-width: 48rem) {
  .team-card--profile {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "portrait head"
      "portrait bio"
      "links bio";
    column-gap: clamp(var(--p-space-6), 2.4vw, var(--p-space-8));
    row-gap: var(--p-space-3);
  }

  .team-card--profile .team-card__portrait {
    align-self: start;
    max-width: none;
  }
}

/* source: patterns/pricing-card.css */
/*
  Pricing card: a service package. Name, one-line fit, price with its unit,
  what is included, one action. The recommended package is the dark one,
  never a brand-red fill, so the red stays reserved for the action.
*/

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--p-space-6);
  padding: clamp(var(--p-space-6), 3vw, var(--p-space-10));
  border: var(--border-hair) solid var(--hairline-strong);
  background: var(--surface-page);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.pricing-card__head {
  display: grid;
  gap: var(--p-space-2);
}

.pricing-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-3);
}

.pricing-card__name {
  font-size: var(--p-text-h3);
  font-weight: var(--p-weight-heavy);
}

.pricing-card__fit {
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--p-space-2);
  padding-block: var(--p-space-5);
  border-block: var(--border-hair) solid var(--hairline);
}

.pricing-card__amount {
  font-family: var(--p-font-display);
  font-size: var(--p-text-price);
  font-weight: var(--p-weight-heavy);
  letter-spacing: var(--p-tracking-display);
  line-height: var(--p-leading-none);
}

.pricing-card__unit {
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
}

.pricing-card .button {
  margin-block-start: auto;
}

.pricing-card--featured {
  border-color: var(--border-emphasis);
  background: var(--surface-emphasis);
  color: var(--ink-on-dark);
}

.pricing-card--featured .pricing-card__fit,
.pricing-card--featured .pricing-card__unit,
.pricing-card--featured .check-list__off {
  color: var(--ink-on-dark-muted);
}

.pricing-card--featured .pricing-card__price {
  border-color: var(--hairline-on-dark);
}

@media (hover: hover) {
  .pricing-card:not(.pricing-card--featured):hover {
    border-color: var(--hairline-hover);
  }
}

/* source: patterns/logo-wall.css */
/*
  Logo wall: client or partner marks in a hairline grid, shown in one muted
  ink so no single brand shouts. Hover brings a mark to full ink.
  Only logos we have permission to show; a partner is never labelled a client.
*/

.logo-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: var(--border-hair) solid var(--hairline);
  border-inline-start: var(--border-hair) solid var(--hairline);
}

.logo-wall__item {
  display: grid;
  place-items: center;
  min-height: var(--logo-tile-h);
  padding: var(--p-space-4);
  border-block-end: var(--border-hair) solid var(--hairline);
  border-inline-end: var(--border-hair) solid var(--hairline);
  color: var(--ink-logo-tile);
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.logo-wall__mark {
  font-family: var(--p-font-display);
  font-size: var(--p-text-h4);
  font-weight: var(--p-weight-heavy);
  letter-spacing: var(--p-tracking-heading);
}

@media (hover: hover) {
  .logo-wall__item:hover {
    background: var(--surface-hover);
    color: var(--ink);
  }
}

@media (min-width: 48rem) {
  .logo-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .logo-wall {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* source: patterns/process-steps.css */
/*
  Process steps: numbered dots joined by a hairline. Vertical on phones and
  tablets, horizontal from 64rem. The last step (the outcome) takes the red.
*/

.process-steps {
  display: grid;
  gap: var(--p-space-10);
}

.process-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--p-space-3);
  padding-inline-start: calc(var(--step-dot) + var(--p-space-5));
}

.process-step__dot {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--step-dot);
  height: var(--step-dot);
  border-radius: var(--p-radius-round);
  background: var(--ink);
  color: var(--surface-page);
  font-family: var(--p-font-display);
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-bold);
}

.process-step--outcome .process-step__dot {
  background: var(--accent);
  color: var(--ink-on-accent);
}

.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: var(--step-dot) calc(-1 * var(--p-space-10));
  inset-inline-start: calc(var(--step-dot) / 2);
  width: var(--border-hair);
  background: var(--hairline-strong);
}

.process-step__title {
  display: flex;
  align-items: center;
  min-height: var(--step-dot);
  font-size: var(--p-text-h3);
  font-weight: var(--p-weight-heavy);
}

.process-step__text {
  max-width: 34ch;
  color: var(--ink-muted);
}

@media (min-width: 64rem) {
  .process-steps {
    grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
    gap: var(--p-space-8);
  }

  .process-step {
    padding-inline-start: 0;
    padding-block-start: calc(var(--step-dot) + var(--p-space-6));
  }

  .process-step__title {
    min-height: 0;
  }

  .process-step:not(:last-child)::after {
    inset-block: calc(var(--step-dot) / 2) auto;
    inset-inline: var(--step-dot) calc(-1 * var(--p-space-8));
    width: auto;
    height: var(--border-hair);
  }
}

/* source: patterns/list-row.css */
/*
  List row: one line per item for careers, events, downloads or services.
  Title and meta on the start side, an arrow on the end; the row is one link.
  Hover: the row tints, the title takes a brand underline, the arrow travels.
*/

.list-rows {
  border-block-start: var(--border-hair) solid var(--hairline-strong);
}

.list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--p-space-2) var(--p-space-6);
  padding: var(--p-space-5) var(--p-space-4);
  margin-inline: calc(-1 * var(--p-space-4));
  border-block-end: var(--border-hair) solid var(--hairline-strong);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.list-row__main {
  display: grid;
  gap: var(--p-space-1);
}

.list-row__title {
  font-size: var(--p-text-h4);
  font-weight: var(--p-weight-bold);
  line-height: var(--p-leading-snug);
}

.list-row__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.list-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-1) var(--p-space-4);
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
}

.list-row__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-1);
}

.list-row__end {
  display: flex;
  align-items: center;
  gap: var(--p-space-4);
}

@media (hover: hover) {
  .list-row:hover {
    background: var(--surface-hover);
  }

  .list-row:hover .list-row__link {
    text-decoration-color: var(--accent);
  }
}

@media (max-width: 47.99rem) {
  .list-row__end .badge {
    display: none;
  }
}

/* source: patterns/quote-band.css */
/*
  Quote band: one statement from the agency, full width, dark in both themes,
  with the half-disc motif bleeding off the end edge on desktop.
*/

.quote-band {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-pad);
  background: var(--surface-inverse);
  color: var(--ink-inverse);
}

.quote-band__inner {
  position: relative;
  z-index: 1;
}

.quote-band__figure {
  margin: 0;
}

.quote-band__quote p {
  max-width: 13ch;
  font-family: var(--p-font-display);
  font-size: var(--p-text-quote);
  font-weight: var(--p-weight-heavy);
  line-height: var(--p-leading-tight);
  letter-spacing: var(--p-tracking-display);
  text-wrap: balance;
}

.quote-band__quote p::before {
  content: "\201C";
  display: block;
  color: var(--accent);
  line-height: 0.8;
}

.quote-band__cite {
  display: grid;
  gap: var(--p-space-1);
  width: fit-content;
  margin-block-start: var(--p-space-8);
  padding-block-start: var(--p-space-5);
  border-block-start: var(--border-rule) solid var(--accent);
}

.quote-band__name {
  font-weight: var(--p-weight-semibold);
}

.quote-band__role {
  color: var(--ink-inverse-muted);
  font-size: var(--p-text-sm);
}

.quote-band__art {
  display: block;
  width: min(100%, 30rem);
  height: auto;
  margin-block: var(--p-space-10) calc(-1 * var(--section-pad));
  margin-inline-start: auto;
}

.quote-band__disc {
  fill: var(--surface-fixed-graphite);
}

@media (min-width: 64rem) {
  .quote-band__art {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: auto;
    height: 100%;
    margin: 0;
  }
}

/* source: patterns/cta-band.css */
/*
  CTA band: the closing call to action on every page. Brand red, white ink,
  faint white half discs behind. One band per page, directly above the footer.
*/

.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-pad);
  background: var(--surface-accent);
  color: var(--ink-on-accent);
}

.cta-band__art {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: auto;
  height: 55%;
}

.cta-band__inner {
  position: relative;
  display: grid;
  gap: var(--p-space-6);
  justify-items: start;
}

.cta-band__title {
  max-width: 13ch;
  font-size: var(--p-text-cta);
  font-weight: var(--p-weight-heavy);
  line-height: var(--p-leading-tight);
  letter-spacing: var(--p-tracking-display);
}

.cta-band__text {
  max-width: 44ch;
  font-size: var(--p-text-lead);
  line-height: var(--p-leading-snug);
}

@media (min-width: 64rem) {
  .cta-band__art {
    height: 100%;
  }
}

/* source: patterns/newsletter.css */
/*
  Newsletter: a one-field sign-up. The label stays visible; the button sits
  beside the field from 48rem and under it on a phone.
*/

.newsletter {
  display: grid;
  gap: var(--p-space-5);
}

.newsletter__title {
  font-size: var(--p-text-h3);
  font-weight: var(--p-weight-heavy);
}

.newsletter__text {
  max-width: 48ch;
  color: var(--ink-muted);
}

.newsletter__form {
  display: grid;
  gap: var(--p-space-3);
  max-width: 34rem;
}

.newsletter__row {
  display: grid;
  gap: var(--p-space-3);
}

@media (min-width: 48rem) {
  .newsletter__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .newsletter--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--p-space-10);
  }
}

.newsletter--on-dark .newsletter__text,
.newsletter--on-dark .form__note {
  color: var(--ink-inverse-muted);
}

.newsletter--on-dark .field__label {
  color: var(--ink-inverse);
}

.newsletter--on-dark .input {
  border-color: var(--hairline-inverse);
  background: var(--surface-fixed-dark);
  color: var(--ink-on-dark);
}

@media (hover: hover) {
  .newsletter--on-dark .input:hover:not(:focus-visible) {
    border-color: var(--ink-inverse-muted);
  }
}

/* source: patterns/article.css */
/*
  Article: the reading surface for insights and case-study write-ups.
  Byline with avatar, reading time, a 70ch prose column, figures, pull quote.
*/

.article-header {
  display: grid;
  gap: var(--p-space-6);
  justify-items: start;
}

.article-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p-space-3) var(--p-space-6);
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
}

.article-header__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
}

.prose {
  max-width: var(--measure-prose);
  font-size: var(--p-text-body);
  line-height: var(--p-leading-prose);
}

.prose > * + * {
  margin-block-start: var(--p-space-5);
}

.prose > h2 {
  margin-block-start: var(--p-space-12);
  font-size: var(--p-text-h3);
  font-weight: var(--p-weight-heavy);
}

.prose > h3 {
  margin-block-start: var(--p-space-8);
  font-size: var(--p-text-h4);
  font-weight: var(--p-weight-bold);
}

.prose > ul,
.prose > ol {
  display: grid;
  gap: var(--p-space-2);
  padding-inline-start: var(--p-space-6);
}

.prose li::marker {
  color: var(--accent);
}

.prose a {
  text-decoration-color: var(--accent);
  transition: text-decoration-thickness var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .prose a:hover {
    text-decoration-thickness: var(--border-rule);
  }
}

.prose blockquote {
  padding-inline-start: var(--p-space-6);
  border-inline-start: var(--border-rule) solid var(--accent);
  font-family: var(--p-font-display);
  font-size: var(--p-text-h4);
  font-weight: var(--p-weight-semibold);
  line-height: var(--p-leading-snug);
  letter-spacing: var(--p-tracking-heading);
}

.prose figure {
  display: grid;
  gap: var(--p-space-3);
}

.prose figcaption {
  color: var(--ink-muted);
  font-size: var(--p-text-sm);
}

.callout {
  display: grid;
  gap: var(--p-space-2);
  padding: var(--p-space-5) var(--p-space-6);
  border-inline-start: var(--border-rule) solid var(--accent);
  background: var(--surface-card);
}

.callout__title {
  font-family: var(--p-font-sans);
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-bold);
  letter-spacing: normal;
}