/* GENERATED by wix/build-css.mjs — do not edit.
   Built from, in order:
     assets/css/styles/fonts.css
     assets/css/tokens/tokens.css
     assets/css/styles/global.css
     assets/css/styles/typography.css
     assets/css/styles/utilities.css
     assets/css/styles/components.css
     assets/css/site.css
*/


/* ===== assets/css/styles/fonts.css ===== */

/* ============================================================
   Solving for Pattern — self-hosted typefaces

   Source Serif 4, Source Sans 3 and IBM Plex Mono are all under
   the SIL Open Font License 1.1 and are served from this origin
   rather than fonts.gstatic.com. That removes a third-party
   request from every page load, removes a third party from the
   visitor's browsing record, and removes a dependency on someone
   else's uptime. Given what "Placed Intelligence" argues, this
   seemed like the wrong thing to leave outsourced.

   Source Serif 4 and Source Sans 3 are variable fonts: one file
   covers the whole 400–600 range this site uses.
   ============================================================ */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-sans-3-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-sans-3-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ===== assets/css/tokens/tokens.css ===== */

/* ============================================================
   Solving for Pattern — design tokens (CSS custom properties)
   Derived from tokens/tokens.json. Do not edit values here
   without updating tokens.json and re-running
   scripts/check-contrast.mjs.

   Layers:
   1. Primitives  (--sfp-paper-100 …)  — raw ramp values
   2. Semantics   (--sfp-color-* etc.) — what components consume
   3. Theme scope (.sfp-theme-dark)    — remaps semantics only
   ============================================================ */

:root {
  /* ---------- 1. Color primitives ---------- */
  --sfp-paper-50: #FCFAF4;
  --sfp-paper-100: #F7F2E8;  /* Seed Paper (anchor) */
  --sfp-paper-200: #EFE7D6;
  --sfp-paper-300: #E3D8C2;

  --sfp-mist-100: #F0F5F2;
  --sfp-mist-200: #E8F0EA;   /* Lake Mist (anchor) */
  --sfp-mist-300: #D6E3DA;
  --sfp-mist-400: #BCD0C3;

  --sfp-watershed-500: #3C8171;
  --sfp-watershed-600: #2F6A5C;
  --sfp-watershed-700: #24544A;
  --sfp-watershed-800: #1C443B;
  --sfp-watershed-900: #12312B; /* Deep Watershed (anchor) */
  --sfp-watershed-950: #0A1F1B;

  --sfp-freshwater-100: #E3EEF0;
  --sfp-freshwater-200: #C8DDE2;
  --sfp-freshwater-300: #8FBECA;
  --sfp-freshwater-500: #4A8896;
  --sfp-freshwater-600: #2F6F7E; /* Freshwater Blue (anchor) */
  --sfp-freshwater-700: #285D6A;
  --sfp-freshwater-800: #1F4C57;

  --sfp-loam-100: #EFE8E0;
  --sfp-loam-200: #DCCFC2;
  --sfp-loam-500: #85644B;
  --sfp-loam-600: #6B4F3A;   /* Loam (anchor) */
  --sfp-loam-700: #57402F;

  --sfp-gold-100: #F8EED9;
  --sfp-gold-200: #F1DFB8;
  --sfp-gold-400: #E2B968;
  --sfp-gold-500: #D8A441;   /* Prairie Gold (anchor) */
  --sfp-gold-600: #C08F2F;
  --sfp-gold-700: #8A6318;

  --sfp-sedge-100: #DDEBE2;
  --sfp-sedge-600: #2E6A50;

  --sfp-clay-100: #F3DFD7;
  --sfp-clay-600: #96412D;
  --sfp-clay-700: #7C3323;

  --sfp-shoreline: #DAD3C1;
  --sfp-shoreline-on-dark: rgba(247, 242, 232, 0.18);

  /* ---------- 2. Semantic color roles ---------- */
  --sfp-color-bg-canvas: var(--sfp-paper-100);
  --sfp-color-bg-surface: var(--sfp-paper-50);
  --sfp-color-bg-subtle: var(--sfp-mist-200);
  --sfp-color-bg-subtle-hover: var(--sfp-mist-300);
  --sfp-color-bg-inverse: var(--sfp-watershed-900);
  --sfp-color-bg-inverse-surface: var(--sfp-watershed-800);

  --sfp-color-text-primary: var(--sfp-watershed-900);
  --sfp-color-text-secondary: var(--sfp-loam-600);
  --sfp-color-text-label: var(--sfp-watershed-700);
  --sfp-color-text-inverse: var(--sfp-paper-100);
  --sfp-color-text-inverse-secondary: #C4D5C9;
  --sfp-color-text-link: var(--sfp-freshwater-600);
  --sfp-color-text-link-hover: var(--sfp-freshwater-700);
  --sfp-color-text-on-action: var(--sfp-watershed-900);

  --sfp-color-action-primary: var(--sfp-gold-500);
  --sfp-color-action-primary-hover: var(--sfp-gold-600);
  --sfp-color-action-secondary-outline: var(--sfp-watershed-900);
  --sfp-color-action-secondary-hover-bg: var(--sfp-mist-200);

  --sfp-color-border: var(--sfp-shoreline);
  --sfp-color-border-strong: var(--sfp-watershed-900);
  --sfp-color-border-field: var(--sfp-loam-500); /* 5.13:1 on Paper 50 — SC 1.4.11 */

  --sfp-color-status-info: var(--sfp-freshwater-600);
  --sfp-color-status-info-bg: var(--sfp-freshwater-100);
  --sfp-color-status-success: var(--sfp-sedge-600);
  --sfp-color-status-success-bg: var(--sfp-sedge-100);
  --sfp-color-status-warning: var(--sfp-loam-700);
  --sfp-color-status-warning-accent: var(--sfp-gold-500);
  --sfp-color-status-warning-bg: var(--sfp-gold-100);
  --sfp-color-status-danger: var(--sfp-clay-600);
  --sfp-color-status-danger-bg: var(--sfp-clay-100);

  --sfp-color-focus-ring: var(--sfp-gold-500);
  --sfp-color-focus-offset: var(--sfp-watershed-900);

  /* ---------- Typography ---------- */
  --sfp-font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sfp-font-body: 'Source Sans 3', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --sfp-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --sfp-weight-regular: 400;
  --sfp-weight-medium: 500;
  --sfp-weight-semibold: 600;

  /* Type scale in rem so a reader's browser font-size preference actually
     applies. Root stays at the 16px default; every value below is the same
     rendered size as before at default settings. */
  --sfp-text-display: 4.5rem; --sfp-leading-display: 5rem;
  --sfp-text-h1: 3.5rem;      --sfp-leading-h1: 4rem;
  --sfp-text-h2: 2.5rem;      --sfp-leading-h2: 3rem;
  --sfp-text-h3: 1.75rem;      --sfp-leading-h3: 2.25rem;
  --sfp-text-h4: 1.375rem;      --sfp-leading-h4: 1.875rem;
  --sfp-text-body-lg: 1.25rem; --sfp-leading-body-lg: 2rem;
  --sfp-text-body: 1.125rem;    --sfp-leading-body: 1.875rem;
  --sfp-text-small: 0.9375rem;   --sfp-leading-small: 1.5rem;
  --sfp-text-label: 0.75rem;   --sfp-leading-label: 1rem;

  --sfp-tracking-display: -0.01em;
  --sfp-tracking-label: 0.08em;
  --sfp-measure-body: 70ch;

  /* ---------- Space (4px base) ---------- */
  --sfp-space-1: 4px;
  --sfp-space-2: 8px;
  --sfp-space-3: 12px;
  --sfp-space-4: 16px;
  --sfp-space-6: 24px;
  --sfp-space-8: 32px;
  --sfp-space-12: 48px;
  --sfp-space-16: 64px;
  --sfp-space-24: 96px;
  --sfp-space-32: 128px;

  /* ---------- Radius ---------- */
  --sfp-radius-sm: 4px;
  --sfp-radius-md: 8px;
  --sfp-radius-lg: 16px;
  --sfp-radius-xl: 24px;
  --sfp-radius-full: 999px;

  /* ---------- Borders + shadow ---------- */
  --sfp-border-hairline: 1px;
  --sfp-border-emphasis: 2px;
  --sfp-shadow-raised: 0 8px 24px rgba(18, 49, 43, 0.10);

  /* ---------- Z-index ---------- */
  --sfp-z-base: 0;
  --sfp-z-dropdown: 100;
  --sfp-z-sticky: 200;
  --sfp-z-overlay: 300;
  --sfp-z-modal: 400;
  --sfp-z-toast: 500;

  /* ---------- Icon sizes ---------- */
  --sfp-icon-sm: 16px;
  --sfp-icon-md: 20px;
  --sfp-icon-lg: 24px;
  --sfp-icon-xl: 32px;

  /* ---------- Motion ---------- */
  --sfp-duration-fast: 150ms;
  --sfp-duration-base: 200ms;
  --sfp-duration-slow: 240ms;
  --sfp-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sfp-hover-lift: 2px;

  /* ---------- Layout ---------- */
  --sfp-container: 1200px;
  --sfp-gutter: 24px;             /* mobile default; widens at --sfp-bp-lg */
  --sfp-section-y: 56px;          /* mobile default; widens at --sfp-bp-lg */
  --sfp-target-min: 44px;

  /* Breakpoints (informational — CSS media queries cannot read
     custom properties; keep in sync with tokens.json) */
  --sfp-bp-sm: 480px;
  --sfp-bp-md: 768px;
  --sfp-bp-lg: 1024px;
  --sfp-bp-xl: 1280px;

  /* ---------- Focus ----------
     3px Prairie Gold ring over a 2px offset in the surface color.
     The dark inner ring is what keeps ≥3:1 on any adjacent surface. */
  --sfp-focus-ring-width: 3px;
  --sfp-focus-offset-width: 2px;
  --sfp-focus-shadow:
    0 0 0 var(--sfp-focus-offset-width) var(--sfp-color-bg-canvas),
    0 0 0 calc(var(--sfp-focus-offset-width) + var(--sfp-focus-ring-width)) var(--sfp-color-focus-offset),
    0 0 0 calc(var(--sfp-focus-offset-width) + var(--sfp-focus-ring-width) + 2px) var(--sfp-color-focus-ring);
}

@media (min-width: 1024px) {
  :root {
    --sfp-gutter: 90px;
    --sfp-section-y: 80px;
  }
}

/* ============================================================
   3. Dark editorial theme — hero fields, feature panels, footer.
   Remaps semantic tokens only. Never applied to a whole page.
   ============================================================ */
.sfp-theme-dark,
[data-sfp-theme='dark'] {
  --sfp-color-bg-canvas: var(--sfp-watershed-900);
  --sfp-color-bg-surface: var(--sfp-watershed-800);
  --sfp-color-bg-subtle: var(--sfp-watershed-950);
  --sfp-color-bg-subtle-hover: var(--sfp-watershed-800);
  --sfp-color-bg-inverse: var(--sfp-paper-100);
  --sfp-color-bg-inverse-surface: var(--sfp-paper-50);

  --sfp-color-text-primary: var(--sfp-paper-100);
  --sfp-color-text-secondary: var(--sfp-color-text-inverse-secondary);
  --sfp-color-text-label: var(--sfp-gold-400);
  --sfp-color-text-inverse: var(--sfp-watershed-900);
  --sfp-color-text-link: var(--sfp-freshwater-300);
  --sfp-color-text-link-hover: var(--sfp-freshwater-200);

  --sfp-color-border: var(--sfp-shoreline-on-dark);
  --sfp-color-border-strong: var(--sfp-paper-100);
  --sfp-color-border-field: var(--sfp-shoreline-on-dark);
  --sfp-color-focus-offset: var(--sfp-paper-100);

  color: var(--sfp-color-text-primary);
  background-color: var(--sfp-color-bg-canvas);
}


/* ===== assets/css/styles/global.css ===== */

/* ============================================================
   Solving for Pattern — global base styles
   Import order: tokens/tokens.css → global.css → typography.css
   → utilities.css → components.css
   ============================================================ */

/* ---------- Reset (minimal, purposeful) ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

body {
  font-family: var(--sfp-font-body);
  font-size: var(--sfp-text-body);
  line-height: var(--sfp-leading-body);
  color: var(--sfp-color-text-primary);
  background-color: var(--sfp-color-bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

/* ---------- Links ---------- */
a {
  color: var(--sfp-color-text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--sfp-duration-fast) var(--sfp-ease-standard);
}

a:hover {
  color: var(--sfp-color-text-link-hover);
  text-decoration-thickness: 2px;
}

/* ---------- Focus ----------
   3px Prairie Gold ring over a 2px surface-colored offset.
   Applied via :focus-visible so pointer users are not shouted at. */
:focus {
  outline: none;
}

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

/* ---------- Selection ---------- */
::selection {
  background-color: var(--sfp-gold-200);
  color: var(--sfp-watershed-900);
}

.sfp-theme-dark ::selection,
[data-sfp-theme='dark'] ::selection {
  background-color: var(--sfp-gold-500);
  color: var(--sfp-watershed-900);
}

/* ---------- Reduced motion: collapse all movement ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Skip link ---------- */
.sfp-skip-link {
  position: absolute;
  top: var(--sfp-space-2);
  left: var(--sfp-space-2);
  z-index: var(--sfp-z-toast);
  padding: var(--sfp-space-3) var(--sfp-space-4);
  background-color: var(--sfp-color-bg-inverse);
  color: var(--sfp-color-text-inverse);
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-small);
  border-radius: var(--sfp-radius-md);
  text-decoration: none;
  transform: translateY(-200%);
}

.sfp-skip-link:focus-visible {
  transform: translateY(0);
  color: var(--sfp-color-text-inverse);
}

/* ---------- Paper grain (optional, quiet) ----------
   Apply .sfp-grain to a section for subtle paper texture.
   Pure CSS noise via layered radial gradients — no image request. */
.sfp-grain {
  position: relative;
}

.sfp-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(rgba(18, 49, 43, 0.045) 1px, transparent 1px),
    radial-gradient(rgba(107, 79, 58, 0.035) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}


/* ===== assets/css/styles/typography.css ===== */

/* ============================================================
   Solving for Pattern — typography
   Source Serif 4 for literary headlines; Source Sans 3 for
   plainspoken body; IBM Plex Mono for labels and field notes.
   Display sizes are fluid: they reach the canonical token value
   at desktop and step down gracefully on small screens.
   ============================================================ */

/* ---------- Display + headings (Source Serif 4) ---------- */
.sfp-display,
.sfp-h1,
.sfp-h2,
.sfp-h3 {
  font-family: var(--sfp-font-display);
  font-weight: var(--sfp-weight-semibold);
  color: var(--sfp-color-text-primary);
  text-wrap: balance;
}

.sfp-display {
  font-size: clamp(2.75rem, 2rem + 3.3vw, 4.5rem); /* 44 → 72px */
  line-height: 1.11;
  letter-spacing: var(--sfp-tracking-display);
}

.sfp-h1 {
  font-size: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem); /* 36 → 56px */
  line-height: 1.14;
  letter-spacing: var(--sfp-tracking-display);
}

.sfp-h2 {
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); /* 28 → 40px */
  line-height: 1.2;
}

.sfp-h3 {
  font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); /* 22 → 28px */
  line-height: 1.29;
}

.sfp-h4 {
  font-family: var(--sfp-font-body);
  font-weight: var(--sfp-weight-semibold);
  font-size: var(--sfp-text-h4);
  line-height: var(--sfp-leading-h4);
  color: var(--sfp-color-text-primary);
}

/* ---------- Body (Source Sans 3) ---------- */
.sfp-body-lg {
  font-size: var(--sfp-text-body-lg);
  line-height: var(--sfp-leading-body-lg);
}

.sfp-body {
  font-size: var(--sfp-text-body);
  line-height: var(--sfp-leading-body);
}

.sfp-small {
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
}

.sfp-text-secondary {
  color: var(--sfp-color-text-secondary);
}

/* ---------- Mono labels (IBM Plex Mono) ---------- */
.sfp-label {
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-label);
  line-height: var(--sfp-leading-label);
  letter-spacing: var(--sfp-tracking-label);
  text-transform: uppercase;
  color: var(--sfp-color-text-label);
}

.sfp-mono {
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
}

/* ---------- Long-form prose ----------
   Wrap article bodies in .sfp-prose: enforces the 60–75
   character measure and comfortable vertical rhythm. */
.sfp-prose {
  max-width: var(--sfp-measure-body);
}

.sfp-prose > * + * {
  margin-top: var(--sfp-space-4);
}

.sfp-prose h2,
.sfp-prose h3 {
  font-family: var(--sfp-font-display);
  font-weight: var(--sfp-weight-semibold);
  text-wrap: balance;
}

.sfp-prose h2 {
  font-size: var(--sfp-text-h3);
  line-height: var(--sfp-leading-h3);
  margin-top: var(--sfp-space-12);
}

.sfp-prose h3 {
  font-size: var(--sfp-text-h4);
  line-height: var(--sfp-leading-h4);
  margin-top: var(--sfp-space-8);
}

.sfp-prose ul,
.sfp-prose ol {
  padding-left: var(--sfp-space-6);
}

.sfp-prose li + li {
  margin-top: var(--sfp-space-2);
}

.sfp-prose blockquote {
  font-family: var(--sfp-font-display);
  font-size: var(--sfp-text-body-lg);
  line-height: var(--sfp-leading-body-lg);
  padding-left: var(--sfp-space-6);
  border-left: 3px solid var(--sfp-gold-500);
  color: var(--sfp-color-text-primary);
}

.sfp-prose code {
  font-family: var(--sfp-font-mono);
  font-size: 0.85em;
  background-color: var(--sfp-color-bg-subtle);
  padding: 2px 6px;
  border-radius: var(--sfp-radius-sm);
}

.sfp-prose hr {
  border: 0;
  border-top: var(--sfp-border-hairline) solid var(--sfp-color-border);
  margin-block: var(--sfp-space-8);
}

.sfp-prose figure {
  margin-block: var(--sfp-space-8);
}


/* ===== assets/css/styles/utilities.css ===== */

/* ============================================================
   Solving for Pattern — layout utilities
   Container, grid, stack, section rhythm, accessibility helpers.
   ============================================================ */

/* ---------- Container: 1200px max, responsive gutters ---------- */
.sfp-container {
  width: 100%;
  max-width: calc(var(--sfp-container) + 2 * var(--sfp-gutter));
  margin-inline: auto;
  padding-inline: var(--sfp-gutter);
}

/* ---------- Section rhythm: 96–144px desktop, 64–96px mobile ---------- */
.sfp-section {
  padding-block: var(--sfp-section-y);
}

.sfp-section--tight {
  padding-block: calc(var(--sfp-section-y) * 0.75);
}

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

/* ---------- Grid: 12 / 6 / 4 columns ---------- */
.sfp-grid {
  display: grid;
  gap: var(--sfp-space-6);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .sfp-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sfp-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sfp-space-8);
  }
}

/* Span helpers. Mobile-first: everything spans full width by default. */
.sfp-col-4,
.sfp-col-6,
.sfp-col-8,
.sfp-col-12 {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .sfp-col-4 { grid-column: span 4; }
  .sfp-col-6 { grid-column: span 6; }
  .sfp-col-8 { grid-column: span 8; }
  .sfp-col-12 { grid-column: span 12; }
}

/* Card rows that collapse gracefully: 3-up → 2-up → 1-up */
.sfp-cardrow {
  display: grid;
  gap: var(--sfp-space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .sfp-cardrow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sfp-cardrow--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

/* ---------- Stack: vertical rhythm helper ---------- */
.sfp-stack > * + * { margin-top: var(--sfp-space-4); }
.sfp-stack--sm > * + * { margin-top: var(--sfp-space-2); }
.sfp-stack--lg > * + * { margin-top: var(--sfp-space-8); }

/* ---------- Cluster: horizontal wrap with gap ---------- */
.sfp-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sfp-space-3);
  align-items: center;
}

/* ---------- Accessibility helpers ---------- */
.sfp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Motif: topographic contour rings ----------
   An inline SVG helper class; the SVG itself lives in markup.
   Quiet by default — atmosphere, not wallpaper. */
.sfp-motif {
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
}

.sfp-motif--faint {
  opacity: 0.25;
}

/* ---------- Notebook rule: a quiet horizontal divider ---------- */
.sfp-rule {
  border: 0;
  border-top: var(--sfp-border-hairline) solid var(--sfp-color-border);
}

.sfp-rule--gold {
  border-top: var(--sfp-border-emphasis) solid var(--sfp-gold-500);
  width: var(--sfp-space-16);
}


/* ===== assets/css/styles/components.css ===== */

/* ============================================================
   Solving for Pattern — component styles
   One section per component, alphabetical after the header/nav
   cluster. Every value comes from tokens.css custom properties.
   Naming: .sfp-<component>, modifiers .sfp-<component>--<variant>.
   ============================================================ */

/* ============ SiteHeader ============ */
.sfp-header {
  position: sticky;
  top: 0;
  z-index: var(--sfp-z-sticky);
  background-color: var(--sfp-color-bg-canvas);
  border-bottom: var(--sfp-border-hairline) solid var(--sfp-color-border);
}

.sfp-header--transparent {
  position: absolute;
  width: 100%;
  background-color: transparent;
  border-bottom-color: transparent;
}

.sfp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sfp-space-6);
  min-height: 72px;
  padding-block: var(--sfp-space-3);
}

.sfp-header--compact .sfp-header__inner {
  min-height: 56px;
  padding-block: var(--sfp-space-2);
}

.sfp-header__actions {
  display: none;
  align-items: center;
  gap: var(--sfp-space-4);
}

@media (min-width: 1024px) {
  .sfp-header__actions {
    display: flex;
  }
}

/* ============ NavigationMenu ============ */
.sfp-nav {
  display: none;
}

@media (min-width: 1024px) {
  .sfp-nav {
    display: block;
  }
}

.sfp-nav__list {
  display: flex;
  gap: var(--sfp-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sfp-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--sfp-target-min);
  padding: var(--sfp-space-2) var(--sfp-space-3);
  font-family: var(--sfp-font-body);
  font-size: var(--sfp-text-small);
  font-weight: var(--sfp-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--sfp-color-text-primary);
  text-decoration: none;
  border-radius: var(--sfp-radius-md);
  transition: background-color var(--sfp-duration-fast) var(--sfp-ease-standard);
}

.sfp-nav__link:hover {
  color: var(--sfp-color-text-primary);
  background-color: var(--sfp-color-bg-subtle);
}

.sfp-nav__link[aria-current='page'] {
  box-shadow: inset 0 -2px 0 var(--sfp-gold-500);
  border-radius: var(--sfp-radius-md) var(--sfp-radius-md) 0 0;
}

/* ============ MobileNavigation ============ */
.sfp-mobilenav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sfp-target-min);
  height: var(--sfp-target-min);
  border: var(--sfp-border-hairline) solid var(--sfp-color-border-strong);
  border-radius: var(--sfp-radius-md);
  background: transparent;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .sfp-mobilenav__toggle {
    display: none;
  }
}

.sfp-mobilenav__panel {
  position: fixed;
  inset: 0;
  z-index: var(--sfp-z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--sfp-space-6);
  padding: var(--sfp-space-6);
  background-color: var(--sfp-watershed-900);
  color: var(--sfp-paper-100);
  overflow-y: auto;
}

.sfp-mobilenav__panel[hidden] {
  display: none;
}

.sfp-mobilenav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sfp-space-2);
}

.sfp-mobilenav__link {
  display: block;
  padding: var(--sfp-space-3) var(--sfp-space-2);
  font-family: var(--sfp-font-display);
  font-size: var(--sfp-text-h3);
  line-height: var(--sfp-leading-h3);
  color: var(--sfp-paper-100);
  text-decoration: none;
  border-radius: var(--sfp-radius-md);
}

.sfp-mobilenav__link:hover {
  color: var(--sfp-gold-400);
}

.sfp-mobilenav__link[aria-current='page'] {
  color: var(--sfp-gold-400);
}

.sfp-mobilenav__close {
  align-self: flex-end;
  width: var(--sfp-target-min);
  height: var(--sfp-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: var(--sfp-border-hairline) solid var(--sfp-shoreline-on-dark);
  border-radius: var(--sfp-radius-md);
  color: var(--sfp-paper-100);
  cursor: pointer;
}

/* ============ Wordmark ============ */
.sfp-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--sfp-space-3);
  text-decoration: none;
  color: var(--sfp-color-text-primary);
}

.sfp-wordmark:hover {
  color: var(--sfp-color-text-primary);
}

.sfp-wordmark__text {
  font-family: var(--sfp-font-display);
  font-weight: var(--sfp-weight-semibold);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.sfp-wordmark--stacked {
  flex-direction: column;
  text-align: center;
}

/* ============ HeroPattern ============ */
.sfp-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--sfp-watershed-900);
  color: var(--sfp-paper-100);
  border-radius: 0;
}

.sfp-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--sfp-space-24);
  max-width: 780px;
}

.sfp-hero--case-study .sfp-hero__inner,
.sfp-hero--library .sfp-hero__inner {
  padding-block: var(--sfp-space-16);
}

.sfp-hero__eyebrow {
  color: var(--sfp-gold-400);
  margin-bottom: var(--sfp-space-4);
}

.sfp-hero__title {
  color: var(--sfp-paper-100);
  max-width: 26ch;
}

.sfp-hero--library .sfp-hero__title,
.sfp-hero--case-study .sfp-hero__title {
  max-width: 24ch;
}

.sfp-hero__lede {
  margin-top: var(--sfp-space-6);
  max-width: 52ch;
  font-size: var(--sfp-text-body-lg);
  line-height: var(--sfp-leading-body-lg);
  color: var(--sfp-mist-200);
}

.sfp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sfp-space-4);
  margin-top: var(--sfp-space-8);
}

.sfp-hero__motif {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: min(46vw, 520px);
  color: var(--sfp-paper-100);
}

@media (max-width: 767px) {
  .sfp-hero__motif {
    display: none;
  }
}

/* ============ SectionHeader ============ */
.sfp-sectionheader {
  max-width: 720px;
  margin-bottom: var(--sfp-space-8);
}

.sfp-sectionheader--center {
  margin-inline: auto;
  text-align: center;
}

.sfp-sectionheader__eyebrow {
  display: block;
  margin-bottom: var(--sfp-space-3);
}

.sfp-sectionheader__lede {
  margin-top: var(--sfp-space-4);
  font-size: var(--sfp-text-body-lg);
  line-height: var(--sfp-leading-body-lg);
  color: var(--sfp-color-text-secondary);
}

/* ============ Button ============ */
.sfp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sfp-space-2);
  min-height: var(--sfp-target-min);
  padding: var(--sfp-space-3) var(--sfp-space-6);
  font-family: var(--sfp-font-body);
  font-size: var(--sfp-text-body);
  font-weight: var(--sfp-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--sfp-radius-md);
  border: var(--sfp-border-emphasis) solid transparent;
  cursor: pointer;
  transition:
    background-color var(--sfp-duration-fast) var(--sfp-ease-standard),
    border-color var(--sfp-duration-fast) var(--sfp-ease-standard),
    transform var(--sfp-duration-fast) var(--sfp-ease-standard);
}

.sfp-button:active {
  transform: translateY(1px);
}

.sfp-button--primary {
  background-color: var(--sfp-color-action-primary);
  color: var(--sfp-color-text-on-action);
}

.sfp-button--primary:hover {
  background-color: var(--sfp-color-action-primary-hover);
  color: var(--sfp-color-text-on-action);
}

.sfp-button--secondary {
  background-color: transparent;
  color: var(--sfp-color-text-primary);
  border-color: var(--sfp-color-border-strong);
}

.sfp-button--secondary:hover {
  background-color: var(--sfp-color-action-secondary-hover-bg);
  color: var(--sfp-color-text-primary);
}

.sfp-theme-dark .sfp-button--secondary,
[data-sfp-theme='dark'] .sfp-button--secondary,
.sfp-hero .sfp-button--secondary,
.sfp-footer .sfp-button--secondary {
  color: var(--sfp-paper-100);
  border-color: var(--sfp-paper-100);
}

.sfp-theme-dark .sfp-button--secondary:hover,
[data-sfp-theme='dark'] .sfp-button--secondary:hover,
.sfp-hero .sfp-button--secondary:hover,
.sfp-footer .sfp-button--secondary:hover {
  background-color: var(--sfp-watershed-800);
  color: var(--sfp-paper-100);
}

.sfp-button--quiet {
  background-color: transparent;
  color: var(--sfp-color-text-link);
  padding-inline: var(--sfp-space-3);
}

.sfp-button--quiet:hover {
  background-color: var(--sfp-color-bg-subtle);
  color: var(--sfp-color-text-link-hover);
}

.sfp-button--sm {
  min-height: 36px;
  padding: var(--sfp-space-2) var(--sfp-space-4);
  font-size: var(--sfp-text-small);
}

.sfp-button:disabled,
.sfp-button[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.sfp-button--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.sfp-button--loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: var(--sfp-radius-full);
  border: 2px solid var(--sfp-watershed-900);
  border-top-color: transparent;
  animation: sfp-spin 0.8s linear infinite;
}

@keyframes sfp-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sfp-button--loading::after {
    animation: none;
    border-style: dotted;
  }
}

/* ============ IconButton ============ */
.sfp-iconbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sfp-target-min);
  height: var(--sfp-target-min);
  border: var(--sfp-border-hairline) solid var(--sfp-color-border-strong);
  border-radius: var(--sfp-radius-md);
  background: transparent;
  color: var(--sfp-color-text-primary);
  cursor: pointer;
  transition: background-color var(--sfp-duration-fast) var(--sfp-ease-standard);
}

.sfp-iconbutton:hover {
  background-color: var(--sfp-color-bg-subtle);
}

.sfp-iconbutton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============ TextLink ============ */
.sfp-textlink {
  display: inline-flex;
  align-items: center;
  gap: var(--sfp-space-1);
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sfp-color-text-link);
  text-decoration: none;
  min-height: var(--sfp-target-min);
}

.sfp-textlink:hover {
  color: var(--sfp-color-text-link-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sfp-textlink__arrow {
  transition: transform var(--sfp-duration-fast) var(--sfp-ease-standard);
}

.sfp-textlink:hover .sfp-textlink__arrow {
  transform: translateX(var(--sfp-hover-lift));
}

/* ============ OfferCard ============ */
.sfp-offercard {
  display: flex;
  flex-direction: column;
  gap: var(--sfp-space-3);
  padding: var(--sfp-space-8);
  background-color: var(--sfp-color-bg-subtle);
  border: var(--sfp-border-hairline) solid transparent;
  border-radius: var(--sfp-radius-lg);
  transition:
    border-color var(--sfp-duration-base) var(--sfp-ease-standard),
    transform var(--sfp-duration-base) var(--sfp-ease-standard);
}

.sfp-offercard:hover {
  border-color: var(--sfp-color-border-strong);
  transform: translateY(calc(-1 * var(--sfp-hover-lift)));
}

.sfp-offercard--build {
  background-color: var(--sfp-color-bg-surface);
  border-color: var(--sfp-color-border);
}

.sfp-offercard--deep-system {
  background-color: var(--sfp-watershed-900);
  color: var(--sfp-paper-100);
}

.sfp-offercard--deep-system .sfp-offercard__title {
  color: var(--sfp-paper-100);
}

.sfp-offercard--deep-system .sfp-offercard__problem {
  color: var(--sfp-mist-200);
}

.sfp-offercard--deep-system .sfp-offercard__label {
  color: var(--sfp-gold-400);
}

.sfp-offercard__title {
  font-family: var(--sfp-font-display);
  font-weight: var(--sfp-weight-semibold);
  font-size: var(--sfp-text-h4);
  line-height: var(--sfp-leading-h4);
  color: var(--sfp-color-text-primary);
}

.sfp-offercard__problem {
  color: var(--sfp-color-text-secondary);
  flex-grow: 1;
}

.sfp-offercard__deliverables {
  margin: 0;
  padding-left: var(--sfp-space-6);
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
  color: var(--sfp-color-text-secondary);
}

/* ============ CaseStudyTeaser ============ */
.sfp-teaser {
  display: flex;
  flex-direction: column;
  background-color: var(--sfp-color-bg-surface);
  border: var(--sfp-border-hairline) solid var(--sfp-color-border);
  border-radius: var(--sfp-radius-lg);
  overflow: hidden;
  transition:
    border-color var(--sfp-duration-base) var(--sfp-ease-standard),
    transform var(--sfp-duration-base) var(--sfp-ease-standard);
}

.sfp-teaser:hover {
  border-color: var(--sfp-color-border-strong);
  transform: translateY(calc(-1 * var(--sfp-hover-lift)));
}

.sfp-teaser__media {
  aspect-ratio: 3 / 2;
  background-color: var(--sfp-mist-200);
  overflow: hidden;
}

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

.sfp-teaser__body {
  display: flex;
  flex-direction: column;
  gap: var(--sfp-space-3);
  padding: var(--sfp-space-6);
}

.sfp-teaser__title {
  font-family: var(--sfp-font-display);
  font-weight: var(--sfp-weight-semibold);
  font-size: var(--sfp-text-h4);
  line-height: var(--sfp-leading-h4);
}

.sfp-teaser__title a {
  color: var(--sfp-color-text-primary);
  text-decoration: none;
}

.sfp-teaser__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.sfp-teaser__summary {
  color: var(--sfp-color-text-secondary);
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
}

.sfp-teaser--featured {
  border-width: var(--sfp-border-emphasis);
  border-color: var(--sfp-color-border-strong);
}

@media (min-width: 768px) {
  .sfp-teaser--featured {
    flex-direction: row;
  }

  .sfp-teaser--featured .sfp-teaser__media {
    flex: 1 1 50%;
    aspect-ratio: auto;
  }

  .sfp-teaser--featured .sfp-teaser__body {
    flex: 1 1 50%;
    padding: var(--sfp-space-8);
    justify-content: center;
  }
}

/* ============ PatternStep ============ */
.sfp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sfp-space-6);
}

@media (min-width: 1024px) {
  .sfp-steps--horizontal {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.sfp-step {
  position: relative;
  padding: var(--sfp-space-6);
  background-color: var(--sfp-color-bg-surface);
  border: var(--sfp-border-hairline) solid var(--sfp-color-border);
  border-radius: var(--sfp-radius-lg);
}

.sfp-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sfp-space-8);
  height: var(--sfp-space-8);
  margin-bottom: var(--sfp-space-4);
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-small);
  color: var(--sfp-watershed-900);
  background-color: var(--sfp-gold-500);
  border-radius: var(--sfp-radius-full);
}

.sfp-step__title {
  font-family: var(--sfp-font-body);
  font-weight: var(--sfp-weight-semibold);
  font-size: var(--sfp-text-body);
  margin-bottom: var(--sfp-space-2);
}

.sfp-step__text {
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
  color: var(--sfp-color-text-secondary);
}

/* ============ QuoteBlock ============ */
.sfp-quote {
  border-left: 3px solid var(--sfp-gold-500);
  padding-left: var(--sfp-space-6);
  max-width: 36ch;
}

.sfp-quote__text {
  font-family: var(--sfp-font-display);
  font-weight: var(--sfp-weight-semibold);
  font-size: var(--sfp-text-h3);
  line-height: var(--sfp-leading-h3);
  color: var(--sfp-color-text-primary);
}

.sfp-quote--testimonial .sfp-quote__text {
  font-weight: var(--sfp-weight-regular);
  font-size: var(--sfp-text-body-lg);
  line-height: var(--sfp-leading-body-lg);
}

.sfp-quote__attribution {
  display: block;
  margin-top: var(--sfp-space-4);
  font-style: normal;
}

/* ============ FieldNoteCard ============ */
.sfp-fieldnote {
  display: flex;
  flex-direction: column;
  gap: var(--sfp-space-3);
  padding: var(--sfp-space-6);
  background-color: var(--sfp-color-bg-surface);
  border: var(--sfp-border-hairline) solid var(--sfp-color-border);
  border-radius: var(--sfp-radius-lg);
  transition: border-color var(--sfp-duration-base) var(--sfp-ease-standard);
}

.sfp-fieldnote:hover {
  border-color: var(--sfp-color-border-strong);
}

.sfp-fieldnote__title {
  font-family: var(--sfp-font-display);
  font-weight: var(--sfp-weight-semibold);
  font-size: var(--sfp-text-h4);
  line-height: var(--sfp-leading-h4);
}

.sfp-fieldnote__title a {
  color: var(--sfp-color-text-primary);
  text-decoration: none;
}

.sfp-fieldnote__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.sfp-fieldnote__summary {
  color: var(--sfp-color-text-secondary);
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
  flex-grow: 1;
}

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

/* ============ PrincipleChip ============ */
.sfp-principle {
  display: inline-flex;
  align-items: center;
  gap: var(--sfp-space-2);
  padding: var(--sfp-space-2) var(--sfp-space-4);
  background-color: var(--sfp-color-bg-subtle);
  border: var(--sfp-border-hairline) solid var(--sfp-mist-400);
  border-radius: var(--sfp-radius-full);
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
  color: var(--sfp-color-text-primary);
}

.sfp-principle__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--sfp-radius-full);
  background-color: var(--sfp-gold-500);
  flex-shrink: 0;
}

.sfp-principle--vocabulary {
  background-color: var(--sfp-color-bg-surface);
  border-color: var(--sfp-color-border);
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-label);
  letter-spacing: 0.02em;
}

/* ============ TopicTag ============ */
.sfp-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sfp-space-3);
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-label);
  line-height: var(--sfp-leading-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sfp-color-text-label);
  background-color: transparent;
  border: var(--sfp-border-hairline) solid var(--sfp-color-border);
  border-radius: var(--sfp-radius-sm);
  text-decoration: none;
  min-height: 24px;
}

a.sfp-tag:hover {
  color: var(--sfp-color-text-link-hover);
  border-color: var(--sfp-color-text-link-hover);
}

/* ============ Metric / StatGroup ============ */
.sfp-metric {
  padding: var(--sfp-space-6);
  border-radius: var(--sfp-radius-lg);
  background-color: var(--sfp-freshwater-600);
  color: var(--sfp-paper-100);
}

.sfp-metric--number .sfp-metric__value {
  font-family: var(--sfp-font-display);
  font-weight: var(--sfp-weight-semibold);
  font-size: var(--sfp-text-h1);
  line-height: var(--sfp-leading-h1);
}

.sfp-metric__value {
  font-family: var(--sfp-font-display);
  font-weight: var(--sfp-weight-semibold);
  font-size: var(--sfp-text-h2);
  line-height: var(--sfp-leading-h2);
}

.sfp-metric__label {
  margin-top: var(--sfp-space-2);
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-label);
  line-height: var(--sfp-leading-label);
  letter-spacing: var(--sfp-tracking-label);
  text-transform: uppercase;
  color: var(--sfp-freshwater-100);
}

.sfp-metric--status {
  background-color: var(--sfp-color-bg-subtle);
  color: var(--sfp-color-text-primary);
}

.sfp-metric--status .sfp-metric__label {
  color: var(--sfp-color-text-label);
}

.sfp-metric__detail {
  margin-top: var(--sfp-space-2);
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
}

.sfp-statgroup {
  display: grid;
  gap: var(--sfp-space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .sfp-statgroup {
    grid-template-columns: repeat(var(--sfp-statgroup-cols, 3), minmax(0, 1fr));
  }
}

/* ============ ImageFigure / Caption ============ */
.sfp-figure {
  margin: 0;
}

.sfp-figure__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--sfp-radius-lg);
  background-color: var(--sfp-mist-200);
}

.sfp-figure--ratio-3x2 .sfp-figure__frame { aspect-ratio: 3 / 2; }
.sfp-figure--ratio-4x3 .sfp-figure__frame { aspect-ratio: 4 / 3; }
.sfp-figure--ratio-pano .sfp-figure__frame { aspect-ratio: 21 / 9; }

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

/* 4–8% brand-color wash. Documentary photos only; never on diagrams. */
.sfp-figure--wash .sfp-figure__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sfp-watershed-900);
  opacity: 0.06;
  pointer-events: none;
}

.sfp-caption {
  margin-top: var(--sfp-space-3);
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-label);
  line-height: var(--sfp-leading-label);
  letter-spacing: 0.02em;
  color: var(--sfp-color-text-label);
}

.sfp-caption__credit {
  color: var(--sfp-color-text-secondary);
}

/* ============ Callout ============ */
.sfp-callout {
  display: flex;
  flex-direction: column;
  gap: var(--sfp-space-2);
  padding: var(--sfp-space-6);
  border-radius: var(--sfp-radius-lg);
  border-left: 3px solid var(--sfp-color-status-info);
  background-color: var(--sfp-color-status-info-bg);
}

.sfp-callout__title {
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-label);
  letter-spacing: var(--sfp-tracking-label);
  text-transform: uppercase;
  color: var(--sfp-color-text-primary);
}

.sfp-callout__body {
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
  color: var(--sfp-color-text-primary);
}

.sfp-callout--note {
  border-left-color: var(--sfp-loam-600);
  background-color: var(--sfp-loam-100);
}

.sfp-callout--success {
  border-left-color: var(--sfp-color-status-success);
  background-color: var(--sfp-color-status-success-bg);
}

.sfp-callout--warning {
  border-left-color: var(--sfp-color-status-warning-accent);
  background-color: var(--sfp-color-status-warning-bg);
}

.sfp-callout--warning .sfp-callout__body,
.sfp-callout--warning .sfp-callout__title {
  color: var(--sfp-color-status-warning);
}

.sfp-callout--danger {
  border-left-color: var(--sfp-color-status-danger);
  background-color: var(--sfp-color-status-danger-bg);
}

.sfp-callout--danger .sfp-callout__body,
.sfp-callout--danger .sfp-callout__title {
  color: var(--sfp-color-status-danger);
}

/* ============ DownloadCard ============ */
.sfp-download {
  display: flex;
  align-items: center;
  gap: var(--sfp-space-4);
  padding: var(--sfp-space-4) var(--sfp-space-6);
  background-color: var(--sfp-color-bg-surface);
  border: var(--sfp-border-hairline) solid var(--sfp-color-border);
  border-radius: var(--sfp-radius-lg);
  text-decoration: none;
  color: var(--sfp-color-text-primary);
  transition: border-color var(--sfp-duration-base) var(--sfp-ease-standard);
}

.sfp-download:hover {
  border-color: var(--sfp-color-border-strong);
  color: var(--sfp-color-text-primary);
}

.sfp-download__icon {
  flex-shrink: 0;
  width: var(--sfp-icon-xl);
  height: var(--sfp-icon-xl);
  color: var(--sfp-freshwater-600);
}

.sfp-download__title {
  font-weight: var(--sfp-weight-semibold);
}

.sfp-download__desc {
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
  color: var(--sfp-color-text-secondary);
}

.sfp-download__meta {
  margin-left: auto;
  flex-shrink: 0;
}

/* ============ ArticleCard ============ */
.sfp-articlecard {
  display: flex;
  flex-direction: column;
  gap: var(--sfp-space-3);
  padding-block: var(--sfp-space-6);
  border-top: var(--sfp-border-hairline) solid var(--sfp-color-border);
}

.sfp-articlecard__title {
  font-family: var(--sfp-font-display);
  font-weight: var(--sfp-weight-semibold);
  font-size: var(--sfp-text-h4);
  line-height: var(--sfp-leading-h4);
}

.sfp-articlecard__title a {
  color: var(--sfp-color-text-primary);
  text-decoration: none;
}

.sfp-articlecard__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.sfp-articlecard__summary {
  color: var(--sfp-color-text-secondary);
  max-width: var(--sfp-measure-body);
}

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

/* ============ ContactBand ============ */
.sfp-contactband {
  background-color: var(--sfp-watershed-900);
  color: var(--sfp-paper-100);
  border-radius: var(--sfp-radius-xl);
  padding: var(--sfp-space-12) var(--sfp-space-8);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .sfp-contactband {
    padding: var(--sfp-space-16);
  }

  .sfp-contactband__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sfp-space-8);
  }
}

.sfp-contactband__heading {
  font-family: var(--sfp-font-display);
  font-weight: var(--sfp-weight-semibold);
  font-size: var(--sfp-text-h2);
  line-height: var(--sfp-leading-h2);
  color: var(--sfp-paper-100);
  max-width: 20ch;
}

.sfp-contactband__text {
  margin-top: var(--sfp-space-3);
  color: var(--sfp-mist-200);
  max-width: 44ch;
}

.sfp-contactband__action {
  margin-top: var(--sfp-space-6);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .sfp-contactband__action {
    margin-top: 0;
  }
}

/* ============ Forms (InquiryForm, NewsletterForm) ============ */
.sfp-form {
  display: flex;
  flex-direction: column;
  gap: var(--sfp-space-6);
  max-width: 560px;
}

.sfp-field {
  display: flex;
  flex-direction: column;
  gap: var(--sfp-space-2);
}

.sfp-field__label {
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-label);
  line-height: var(--sfp-leading-label);
  letter-spacing: var(--sfp-tracking-label);
  text-transform: uppercase;
  color: var(--sfp-color-text-label);
}

.sfp-field__hint {
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
  color: var(--sfp-color-text-secondary);
}

.sfp-field__input,
.sfp-field__textarea,
.sfp-field__select {
  min-height: var(--sfp-target-min);
  padding: var(--sfp-space-3) var(--sfp-space-4);
  background-color: var(--sfp-color-bg-surface);
  border: var(--sfp-border-hairline) solid var(--sfp-color-border-field);
  border-radius: var(--sfp-radius-md);
  font-size: var(--sfp-text-body);
  transition: border-color var(--sfp-duration-fast) var(--sfp-ease-standard);
}

.sfp-field__textarea {
  min-height: 140px;
  resize: vertical;
}

.sfp-field__input:hover,
.sfp-field__textarea:hover,
.sfp-field__select:hover {
  border-color: var(--sfp-freshwater-600);
}

.sfp-field__input::placeholder,
.sfp-field__textarea::placeholder {
  color: var(--sfp-loam-500);
}

.sfp-field--error .sfp-field__input,
.sfp-field--error .sfp-field__textarea,
.sfp-field--error .sfp-field__select {
  border-color: var(--sfp-color-status-danger);
  border-width: var(--sfp-border-emphasis);
}

.sfp-field__error {
  display: flex;
  gap: var(--sfp-space-2);
  align-items: baseline;
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
  color: var(--sfp-color-status-danger);
}

.sfp-form__status {
  padding: var(--sfp-space-4) var(--sfp-space-6);
  border-radius: var(--sfp-radius-md);
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
}

.sfp-form__status--success {
  background-color: var(--sfp-color-status-success-bg);
  color: var(--sfp-color-status-success);
  border-left: 3px solid var(--sfp-color-status-success);
}

.sfp-form__status--error {
  background-color: var(--sfp-color-status-danger-bg);
  color: var(--sfp-color-status-danger);
  border-left: 3px solid var(--sfp-color-status-danger);
}

.sfp-newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--sfp-space-3);
}

@media (min-width: 480px) {
  .sfp-newsletter__row {
    display: flex;
    gap: var(--sfp-space-3);
  }

  .sfp-newsletter__row .sfp-field {
    flex-grow: 1;
  }
}

/* ============ Breadcrumbs ============ */
.sfp-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sfp-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-label);
  line-height: var(--sfp-leading-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sfp-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sfp-space-2);
}

.sfp-breadcrumbs__item + .sfp-breadcrumbs__item::before {
  content: '/';
  color: var(--sfp-color-text-secondary);
}

.sfp-breadcrumbs__link {
  color: var(--sfp-color-text-link);
  text-decoration: none;
  padding-block: var(--sfp-space-2);
}

.sfp-breadcrumbs__link:hover {
  text-decoration: underline;
}

.sfp-breadcrumbs__current {
  color: var(--sfp-color-text-label);
}

/* ============ Pagination ============ */
.sfp-pagination {
  display: flex;
  justify-content: center;
}

.sfp-pagination__list {
  display: flex;
  gap: var(--sfp-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sfp-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sfp-target-min);
  min-height: var(--sfp-target-min);
  padding-inline: var(--sfp-space-3);
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-small);
  color: var(--sfp-color-text-primary);
  text-decoration: none;
  border: var(--sfp-border-hairline) solid var(--sfp-color-border);
  border-radius: var(--sfp-radius-md);
  transition: border-color var(--sfp-duration-fast) var(--sfp-ease-standard);
}

.sfp-pagination__link:hover {
  border-color: var(--sfp-color-border-strong);
  color: var(--sfp-color-text-primary);
}

.sfp-pagination__link[aria-current='page'] {
  background-color: var(--sfp-watershed-900);
  border-color: var(--sfp-watershed-900);
  color: var(--sfp-paper-100);
}

/* ============ SiteFooter ============ */
.sfp-footer {
  background-color: var(--sfp-watershed-900);
  color: var(--sfp-paper-100);
  margin-top: var(--sfp-section-y);
}

.sfp-footer__inner {
  padding-block: var(--sfp-space-16) var(--sfp-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--sfp-space-12);
}

.sfp-footer__top {
  display: grid;
  gap: var(--sfp-space-12);
}

@media (min-width: 768px) {
  .sfp-footer__top {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--sfp-space-8);
  }
}

.sfp-footer__tagline {
  margin-top: var(--sfp-space-4);
  font-family: var(--sfp-font-display);
  font-size: var(--sfp-text-body-lg);
  line-height: var(--sfp-leading-body-lg);
  color: var(--sfp-mist-200);
  max-width: 30ch;
}

.sfp-footer__heading {
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-label);
  line-height: var(--sfp-leading-label);
  letter-spacing: var(--sfp-tracking-label);
  text-transform: uppercase;
  color: var(--sfp-gold-400);
  margin-bottom: var(--sfp-space-4);
}

.sfp-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sfp-space-2);
}

.sfp-footer__link {
  display: inline-block;
  padding-block: var(--sfp-space-2);
  color: var(--sfp-mist-200);
  text-decoration: none;
}

.sfp-footer__link:hover {
  color: var(--sfp-paper-100);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sfp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sfp-space-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sfp-space-6);
  border-top: var(--sfp-border-hairline) solid var(--sfp-shoreline-on-dark);
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-label);
  line-height: var(--sfp-leading-label);
  letter-spacing: 0.04em;
  color: var(--sfp-color-text-inverse-secondary);
}


/* ===== assets/css/site.css ===== */

/* ============================================================
   Solving for Pattern — site layer

   The ONLY stylesheet in this project that is not a verbatim copy
   of the design system. Everything in assets/css/{tokens,styles}/
   and styles.css is copied unmodified from the bound DS bundle
   (_ds/solving-for-pattern-design-system-6d12417e…) and must stay
   that way — re-copy it when the design system updates.

   What lives here: the handful of compositions the design files
   expressed as inline styles, lifted into named classes. Every
   value below is the same value the design file used; nothing new
   is introduced. No new colors, no new spacing steps.
   ============================================================ */

/* ---------- Selected work list (About) ----------
   A list, not cards: 1px Shoreline top rule per row, 16px block
   padding. Mirrors the inline styles in About.dc.html. */
.sfp-worklist__row {
  border-top: var(--sfp-border-hairline) solid var(--sfp-color-border);
  padding-block: var(--sfp-space-4);
}

.sfp-worklist__sector {
  color: var(--sfp-color-text-secondary);
}

.sfp-worklist__client {
  margin-top: var(--sfp-space-2);
  font-weight: var(--sfp-weight-semibold);
}

.sfp-worklist__desc {
  margin-top: var(--sfp-space-1);
  color: var(--sfp-color-text-secondary);
  max-width: var(--sfp-measure-body);
}

/* A freshwater field gives the short Nori chapter a little visual depth
   without turning the career arc into a row of competing cards. */
.sfp-worklist__row--nori {
  margin-block: var(--sfp-space-2);
  padding-inline: var(--sfp-space-6);
  background: var(--sfp-freshwater-100);
  border-left: var(--sfp-border-emphasis) solid var(--sfp-freshwater-600);
  border-radius: var(--sfp-radius-md);
  box-shadow: var(--sfp-shadow-raised);
}

/* Four territory cards, four surfaces, one border weight. No card gets a
   decorative bar; surface and hue carry the distinction, and every border
   clears 3:1 against the Lake Mist section so the set reads as a system. */
.sfp-offercard--land {
  background: var(--sfp-gold-100);
  border-color: var(--sfp-gold-700);   /* 4.66:1 on Lake Mist */
}

.sfp-offercard--land .sfp-offercard__label {
  color: var(--sfp-loam-700);
}

/* These metrics live in a narrow sidebar. Stacking them preserves the
   intended internal padding when the Leeds credential wraps. */
.sfp-statgroup--sidebar {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .sfp-statgroup--sidebar {
    grid-template-columns: 1fr;
  }
}

.sfp-statgroup--sidebar .sfp-metric__label {
  padding-right: var(--sfp-space-2);
}

/* ---------- Pattern Library ---------- */
.sfp-library-list {
  display: grid;
  gap: var(--sfp-space-6);
}

.sfp-article-hero {
  padding-block: var(--sfp-space-16) var(--sfp-space-12);
  background: var(--sfp-color-bg-subtle);
}

.sfp-article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sfp-space-3);
  margin-bottom: var(--sfp-space-4);
}

.sfp-article-hero__lede {
  max-width: var(--sfp-measure-body);
  margin-top: var(--sfp-space-4);
  color: var(--sfp-color-text-secondary);
  font-size: var(--sfp-text-body-lg);
  line-height: var(--sfp-leading-body-lg);
}

.sfp-article-layout {
  display: grid;
  gap: var(--sfp-space-12);
}

.sfp-article-layout > .sfp-prose {
  margin-inline: auto;
}

.sfp-article-visual {
  margin: 0;
  overflow: hidden;
  background: var(--sfp-paper-50);
  border: var(--sfp-border-hairline) solid var(--sfp-color-border);
  border-radius: var(--sfp-radius-lg);
}

.sfp-article-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.sfp-article-visual figcaption {
  padding: var(--sfp-space-3) var(--sfp-space-4);
  color: var(--sfp-color-text-secondary);
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
  border-top: var(--sfp-border-hairline) solid var(--sfp-color-border);
}

.sfp-article-visual figcaption a {
  margin-left: var(--sfp-space-2);
}

/* ---------- Small spacing helpers ----------
   Stand-ins for the design files' inline margin-top declarations. */
.sfp-mt-4 { margin-top: var(--sfp-space-4); }
.sfp-mt-6 { margin-top: var(--sfp-space-6); }

/* ---------- Measure helper ----------
   The 70-character reading measure, applied to standalone body
   paragraphs that sit outside .sfp-prose. */
.sfp-measure { max-width: var(--sfp-measure-body); }

/* ---------- Footer lineage line ----------
   SiteFooter renders this inline when variant="lineage". */
.sfp-footer__lineage {
  margin-top: var(--sfp-space-4);
  color: var(--sfp-color-text-inverse-secondary);
}

/* ---------- ContactBand detail line ----------
   SiteFooter/ContactBand render this inline for variant="full". */
.sfp-contactband__detail {
  margin-top: var(--sfp-space-4);
  color: var(--sfp-gold-400);
}

/* ---------- Reverse wordmark text ----------
   Wordmark applies this inline when reverse={true}. */
.sfp-wordmark--reverse .sfp-wordmark__text {
  color: var(--sfp-paper-100);
}

/* ---------- Inquiry form: hidden until needed ---------- */
[hidden] {
  display: none !important;
}


/* ---------- Pass 1 additions ---------- */

/* The footer paints Deep Watershed directly, so the focus ring must invert
   there too or the dark inner ring disappears into the background. */
.sfp-footer {
  --sfp-color-bg-canvas: var(--sfp-watershed-900);
  --sfp-color-focus-offset: var(--sfp-paper-100);
}

/* Semantic list that keeps the cluster's visual behaviour. */
.sfp-cluster--list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* About portrait */
.sfp-portrait {
  margin: 0;
}

.sfp-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sfp-radius-lg);
  border: var(--sfp-border-hairline) solid var(--sfp-color-border);
}

.sfp-portrait__caption {
  margin-top: var(--sfp-space-3);
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
  color: var(--sfp-color-text-secondary);
}

/* Hero secondary action: the Library is a trust path, not a co-equal CTA,
   so it reads as a quiet text link beside the primary button. */
.sfp-hero__secondary {
  align-self: center;
  font-size: var(--sfp-text-body);
  line-height: var(--sfp-leading-body);
}


/* ---------- Pass 5 ---------- */

/* Territory cards go two-up so a fourth doesn't orphan on its own row. */
.sfp-cardrow--2 {
  display: grid;
  gap: var(--sfp-space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .sfp-cardrow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Who a territory actually serves. The label sits inline so the line reads as
   one sentence rather than a heading plus a list. */
.sfp-offercard__people {
  margin-top: var(--sfp-space-4);
  padding-top: var(--sfp-space-3);
  border-top: var(--sfp-border-hairline) solid var(--sfp-color-border);
  color: var(--sfp-color-text-secondary);
}

.sfp-offercard__people .sfp-label {
  display: inline;
  margin-right: var(--sfp-space-2);
  color: var(--sfp-color-text-label);
}

/* Tighter vertical rhythm throughout. */
.sfp-hero { padding-block: var(--sfp-space-16) var(--sfp-space-12); }
.sfp-section--tight { padding-block: var(--sfp-space-12); }
.sfp-article-hero { padding-block: var(--sfp-space-16) var(--sfp-space-8); }
.sfp-prose > * + * { margin-top: var(--sfp-space-4); }

/* Motion: one effect, applied once. Content lifts a few pixels as it enters,
   which signals structure without animating anything the reader is trying to
   read. Anyone who has asked their system for less motion gets none. */
@media (prefers-reduced-motion: no-preference) {
  .sfp-reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 480ms ease-out, transform 480ms ease-out;
  }

  .sfp-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Links and buttons already animate their own colour; keep it quick enough to
   feel mechanical rather than decorative. */
.sfp-textlink__arrow {
  display: inline-block;
  transition: transform 160ms ease-out;
}

.sfp-textlink:hover .sfp-textlink__arrow {
  transform: translateX(3px);
}


/* ---------- Pass 6: territory cards ---------- */

/* Humane technology gets the fourth hue: cool where land and build are warm,
   pale where Deep Watershed is dark. Hue does the separating; the border does
   the standing out. */
.sfp-offercard--tech {
  background: var(--sfp-freshwater-100);
  border-color: var(--sfp-freshwater-500);   /* 3.44:1 on Lake Mist */
}

.sfp-offercard--tech .sfp-offercard__label {
  color: var(--sfp-freshwater-800);
}

/* The neutral card needs a defined edge too, or it dissolves into the section. */
.sfp-offercard--build {
  background: var(--sfp-paper-50);
  border-color: var(--sfp-loam-500);   /* 4.61:1 on Lake Mist */
}

.sfp-offercard--deep-system {
  border-color: var(--sfp-watershed-900);
}

/* Hover already lifts the card; don't also swap the border colour, which made
   the four cards briefly look like four different components. */
.sfp-offercard:hover {
  border-color: currentColor;
}

.sfp-offercard--land:hover { border-color: var(--sfp-gold-700); }
.sfp-offercard--build:hover { border-color: var(--sfp-loam-500); }
.sfp-offercard--tech:hover { border-color: var(--sfp-freshwater-500); }
.sfp-offercard--deep-system:hover { border-color: var(--sfp-watershed-900); }

/* On the dark card the secondary text token resolves to Loam, which reads
   muddy on Deep Watershed. Everything here gets a light ink instead. */
.sfp-offercard--deep-system .sfp-offercard__people {
  color: var(--sfp-mist-200);
  border-top-color: rgb(247 242 232 / 24%);
}

.sfp-offercard--deep-system .sfp-offercard__people .sfp-label {
  color: var(--sfp-gold-400);
}

/* ---------- Pass 6: hero rhythm ---------- */

/* Top and bottom both pulled back about 20%. */
.sfp-hero {
  padding-block: var(--sfp-space-12) var(--sfp-space-8);
}

/* The Work and Track Record bodies sit on a different surface from their
   heroes, so the page reads as hero-then-content rather than one long field. */
.sfp-article-hero {
  background: var(--sfp-color-bg-canvas);
}

.sfp-page-body {
  background: var(--sfp-color-bg-subtle);
}

/* ---------- Pass 6: mobile readability ---------- */

/* Below 768px the body scale moves up a step and the display scale comes down,
   so long-form copy is comfortable on a phone and headlines stop eating the
   screen. Container padding tightens to buy the text back its width. */
@media (max-width: 767px) {
  :root {
    --sfp-text-body: 1.125rem;    /* 18px */
    --sfp-leading-body: 1.75rem;  /* 28px */
    --sfp-text-body-lg: 1.1875rem;
    --sfp-leading-body-lg: 1.8125rem;
    --sfp-text-small: 1rem;       /* 16px, was 15 */
    --sfp-leading-small: 1.5rem;
    --sfp-gutter: 20px;
  }

  .sfp-offercard {
    padding: var(--sfp-space-6);
  }

  .sfp-article-hero__lede,
  .sfp-hero__lede {
    font-size: var(--sfp-text-body);
    line-height: var(--sfp-leading-body);
  }

  /* Tap targets: nav and footer links get real vertical room. */
  .sfp-nav__link,
  .sfp-footer__link,
  .sfp-mobilenav__link {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
}


/* ---------- Manifest-driven figures ---------- */

.sfp-figure {
  margin: var(--sfp-space-8) 0 0;
}

.sfp-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sfp-radius-lg);
  border: var(--sfp-border-hairline) solid var(--sfp-color-border);
}

.sfp-figure__caption {
  margin-top: var(--sfp-space-3);
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
  color: var(--sfp-color-text-secondary);
}

.sfp-figure__credit {
  color: var(--sfp-color-text-label);
}

/* Inside a territory card the image sits flush at the top, above the label. */
.sfp-offercard .sfp-figure {
  margin: calc(-1 * var(--sfp-space-8)) calc(-1 * var(--sfp-space-8)) var(--sfp-space-2);
}

.sfp-offercard .sfp-figure img {
  border: 0;
  border-radius: var(--sfp-radius-lg) var(--sfp-radius-lg) 0 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 767px) {
  .sfp-offercard .sfp-figure {
    margin: calc(-1 * var(--sfp-space-6)) calc(-1 * var(--sfp-space-6)) var(--sfp-space-2);
  }
}