@charset "UTF-8";
/* @link https://utopia.fyi/type/calculator?c=360,18,1.125,1240,20,1.272,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,2xl,12 */
:root {
  color-scheme: light;
  /* Typography */
  --font-heading: "Jura CNC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Foundation colors */
  --color-primary: #335076;
  --color-secondary: #b05a2a;
  --color-neutral: #878583;
  --color-paper: #f0f3f5;
  --color-ink: #373231;
  /* Foundation scales */
  --color-primary-50: color-mix(in oklab, var(--color-primary) 12%, var(--color-paper));
  --color-primary-100: color-mix(in oklab, var(--color-primary) 20%, var(--color-paper));
  --color-primary-200: color-mix(in oklab, var(--color-primary) 32%, var(--color-paper));
  --color-primary-300: color-mix(in oklab, var(--color-primary) 48%, var(--color-paper));
  --color-primary-400: color-mix(in oklab, var(--color-primary) 72%, var(--color-paper));
  --color-primary-500: var(--color-primary);
  --color-primary-600: color-mix(in oklab, var(--color-primary) 88%, var(--color-ink));
  --color-primary-700: color-mix(in oklab, var(--color-primary) 72%, var(--color-ink));
  --color-primary-800: color-mix(in oklab, var(--color-primary) 56%, var(--color-ink));
  --color-primary-900: color-mix(in oklab, var(--color-primary) 40%, var(--color-ink));
  --color-secondary-50: color-mix(in oklab, var(--color-secondary) 12%, var(--color-paper));
  --color-secondary-100: color-mix(in oklab, var(--color-secondary) 20%, var(--color-paper));
  --color-secondary-200: color-mix(in oklab, var(--color-secondary) 32%, var(--color-paper));
  --color-secondary-300: color-mix(in oklab, var(--color-secondary) 48%, var(--color-paper));
  --color-secondary-400: color-mix(in oklab, var(--color-secondary) 72%, var(--color-paper));
  --color-secondary-500: var(--color-secondary);
  --color-secondary-600: color-mix(in oklab, var(--color-secondary) 88%, var(--color-ink));
  --color-secondary-700: color-mix(in oklab, var(--color-secondary) 72%, var(--color-ink));
  --color-secondary-800: color-mix(in oklab, var(--color-secondary) 56%, var(--color-ink));
  --color-secondary-900: color-mix(in oklab, var(--color-secondary) 40%, var(--color-ink));
  --color-neutral-50: color-mix(in oklab, var(--color-neutral) 12%, var(--color-paper));
  --color-neutral-100: color-mix(in oklab, var(--color-neutral) 20%, var(--color-paper));
  --color-neutral-200: color-mix(in oklab, var(--color-neutral) 32%, var(--color-paper));
  --color-neutral-300: color-mix(in oklab, var(--color-neutral) 48%, var(--color-paper));
  --color-neutral-400: color-mix(in oklab, var(--color-neutral) 72%, var(--color-paper));
  --color-neutral-500: var(--color-neutral);
  --color-neutral-600: color-mix(in oklab, var(--color-neutral) 88%, var(--color-ink));
  --color-neutral-700: color-mix(in oklab, var(--color-neutral) 72%, var(--color-ink));
  --color-neutral-800: color-mix(in oklab, var(--color-neutral) 56%, var(--color-ink));
  --color-neutral-900: color-mix(in oklab, var(--color-neutral) 40%, var(--color-ink));
  --color-paper-50: color-mix(in oklab, white 72%, var(--color-paper));
  --color-paper-100: color-mix(in oklab, white 44%, var(--color-paper));
  --color-paper-200: color-mix(in oklab, white 22%, var(--color-paper));
  --color-paper-500: var(--color-paper);
  --color-paper-600: color-mix(in oklab, var(--color-paper) 92%, var(--color-ink));
  --color-paper-700: color-mix(in oklab, var(--color-paper) 84%, var(--color-ink));
  --color-ink-50: color-mix(in oklab, var(--color-ink) 12%, var(--color-paper));
  --color-ink-100: color-mix(in oklab, var(--color-ink) 20%, var(--color-paper));
  --color-ink-200: color-mix(in oklab, var(--color-ink) 32%, var(--color-paper));
  --color-ink-300: color-mix(in oklab, var(--color-ink) 48%, var(--color-paper));
  --color-ink-400: color-mix(in oklab, var(--color-ink) 72%, var(--color-paper));
  --color-ink-500: var(--color-ink);
  --color-ink-600: color-mix(in oklab, var(--color-ink) 88%, black);
  --color-ink-700: color-mix(in oklab, var(--color-ink) 72%, black);
  --color-ink-800: color-mix(in oklab, var(--color-ink) 56%, black);
  --color-ink-900: color-mix(in oklab, var(--color-ink) 40%, black);
  /* Semantic color system */
  --color-accent: var(--color-secondary-500);
  --color-accent-contrast: white;
  --color-accent-hover: var(--color-secondary-600);
  --color-accent-secondary: var(--color-primary-500);
  --color-accent-secondary-hover: var(--color-primary-600);
  --color-accent-secondary-emphasis: var(--color-secondary-600);
  --color-accent-secondary-soft: var(--color-primary-100);
  --color-accent-secondary-tint: color-mix(in srgb, var(--color-accent-secondary) 18%, transparent);
  --color-accent-secondary-wash: color-mix(in srgb, var(--color-accent-secondary) 7%, transparent);
  --color-accent-soft: var(--color-secondary-100);
  --color-background: var(--color-paper-500);
  --color-border: var(--color-ink-200);
  --color-border-contrast: color-mix(in srgb, var(--color-paper) 55%, transparent);
  --color-border-contrast-strong: color-mix(in srgb, var(--color-paper) 85%, transparent);
  --color-border-contrast-subtle: color-mix(in srgb, var(--color-paper) 12%, transparent);
  --color-border-soft: color-mix(in srgb, var(--color-border) 80%, transparent);
  --color-border-strong: var(--color-ink-300);
  --color-dark-faint: color-mix(in srgb, var(--color-paper) 70%, transparent);
  --color-dark-muted: var(--color-paper-500);
  --color-dark-subtle: color-mix(in srgb, var(--color-paper) 82%, transparent);
  --color-header-background: var(--color-surface);
  --color-header-line: color-mix(in srgb, var(--color-primary-900) 14%, transparent);
  --color-image-label-background: color-mix(in srgb, var(--color-paper) 70%, transparent);
  --color-muted: var(--color-ink-400);
  --color-nav-current-border: color-mix(in srgb, var(--color-accent) 64%, transparent);
  --color-nav-divider: color-mix(in srgb, var(--color-primary-900) 18%, transparent);
  --color-nav-gradient-stop: color-mix(in srgb, var(--color-primary-500) 6%, transparent);
  --color-nav-toggle-background: color-mix(in srgb, var(--color-primary-500) 5%, transparent);
  --color-nav-toggle-background-hover: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
  --color-nav-toggle-border: color-mix(in srgb, var(--color-primary-500) 34%, transparent);
  --color-nav-toggle-border-hover: color-mix(in srgb, var(--color-primary-500) 58%, transparent);
  --color-nav-hover: color-mix(in srgb, var(--color-primary-500) 6%, transparent);
  --color-page: var(--color-paper-500);
  --color-placeholder-stripe: color-mix(in srgb, var(--color-ink) 4%, transparent);
  --color-sample-grid-line: color-mix(in srgb, var(--color-ink) 7%, transparent);
  --color-scrim-faint: color-mix(in srgb, var(--color-primary-900) 18%, transparent);
  --color-scrim-heavy: color-mix(in srgb, var(--color-primary-900) 82%, transparent);
  --color-scrim-medium: color-mix(in srgb, var(--color-primary-900) 70%, transparent);
  --color-scrim-soft: color-mix(in srgb, var(--color-primary-900) 44%, transparent);
  --color-scrim-strong: color-mix(in srgb, var(--color-primary-900) 94%, transparent);
  --color-scrim-subtle: color-mix(in srgb, var(--color-primary-900) 40%, transparent);
  --color-scrim-whisper: color-mix(in srgb, var(--color-primary-900) 24%, transparent);
  --color-section-contrast-border: color-mix(in srgb, white 34%, transparent);
  --color-section-contrast-border-strong: color-mix(in srgb, white 62%, transparent);
  --color-section-contrast-focus-ring: color-mix(in srgb, white 42%, transparent);
  --color-section-contrast-surface: color-mix(in srgb, white 8%, transparent);
  --color-section-contrast-surface-alt: color-mix(in srgb, white 16%, transparent);
  --color-section-contrast-surface-muted: color-mix(in srgb, white 14%, transparent);
  --color-section-contrast-surface-soft: color-mix(in srgb, white 12%, transparent);
  --color-section-contrast-tag-background: color-mix(in srgb, white 16%, transparent);
  --color-section-contrast-tag-border: color-mix(in srgb, white 42%, transparent);
  --color-section-accent-hover-light: var(--color-paper-50);
  --color-section-accent-text: var(--color-paper-50);
  --color-section-muted: var(--color-muted);
  --color-section-photo-light-surface: color-mix(in srgb, white 88%, transparent);
  --color-section-photo-light-surface-soft: color-mix(in srgb, var(--color-paper) 84%, transparent);
  --color-surface-glass: color-mix(in srgb, var(--color-paper) 82%, transparent);
  --color-surface-emphasis: var(--color-ink-500);
  --color-surface-muted: var(--color-neutral-100);
  --color-subtle: var(--color-muted);
  --color-surface: var(--color-paper-50);
  --color-surface-placeholder: var(--color-neutral-200);
  --color-surface-placeholder-soft: color-mix(in srgb, var(--color-surface-placeholder) 64%, transparent);
  --color-surface-soft: var(--color-paper-100);
  --color-surface-alt: var(--color-paper-200);
  --color-surface-dark: var(--color-primary-500);
  --color-swatch-border: color-mix(in srgb, var(--color-ink) 10%, transparent);
  --color-swatch-border-strong: color-mix(in srgb, var(--color-ink) 12%, transparent);
  --color-tag-base-background: var(--color-primary-50);
  --color-tag-base-border: var(--color-primary-200);
  --color-tag-base-text: var(--color-primary-600);
  --color-tag-base-contrast-background: var(--color-primary-100);
  --color-tag-base-contrast-border: var(--color-primary-300);
  --color-tag-base-contrast-text: var(--color-primary-600);
  --color-tag-background: var(--color-tag-base-background);
  --color-tag-border: var(--color-tag-base-border);
  --color-tag-text: var(--color-tag-base-text);
  --color-tag-contrast-background: var(--color-tag-base-contrast-background);
  --color-tag-contrast-border: var(--color-tag-base-contrast-border);
  --color-tag-contrast-text: var(--color-tag-base-contrast-text);
  --color-surface-tag: var(--color-tag-background);
  --color-surface-tag-contrast: var(--color-tag-contrast-background);
  --color-text: var(--color-ink-500);
  --color-text-contrast-muted: color-mix(in srgb, var(--color-paper) 82%, transparent);
  --color-text-contrast-soft: color-mix(in srgb, var(--color-paper) 88%, transparent);
  --color-text-contrast-strong: var(--color-paper);
  --color-text-tag-contrast: var(--color-tag-contrast-text);
  /* Layout */
  --border-width: 1px;
  --grid-max-width: 92.5rem;
  --grid-gutter: var(--space-s-l);
  --grid-columns: 12;
  --measure: 66ch;
  /* Radius */
  --radius-xs: 0.1875rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-round: 999px;
  /* Effects and interaction */
  --color-focus-ring: color-mix(in srgb, var(--color-ink) 18%, transparent);
  --color-shadow: color-mix(in srgb, var(--color-ink) 6%, transparent);
  --color-shadow-button: color-mix(in srgb, var(--color-ink) 8%, transparent);
  --color-shadow-button-hover: color-mix(in srgb, var(--color-ink) 12%, transparent);
  --color-shadow-header: color-mix(in srgb, var(--color-primary-900) 6%, transparent);
  --color-shadow-header-button: color-mix(in srgb, var(--color-primary-900) 16%, transparent);
  --color-shadow-header-button-active: color-mix(in srgb, var(--color-primary-900) 14%, transparent);
  --color-shadow-header-button-hover: color-mix(in srgb, var(--color-primary-900) 22%, transparent);
  --color-shadow-primary-soft: color-mix(in srgb, var(--color-primary-900) 8%, transparent);
  --color-shadow-project-hover: color-mix(in srgb, var(--color-ink) 9%, transparent);
  --focus-ring: 0 0 0 0.1875rem var(--color-focus-ring);
  --shadow-sm: 0 0.875rem 1.75rem var(--color-shadow);
  --shadow-button: 0 0.375rem 0.875rem var(--color-shadow-button);
  --shadow-button-active: 0 0.25rem 0.625rem var(--color-shadow-button);
  --shadow-button-hover: 0 0.625rem 1rem var(--color-shadow-button-hover);
  --shadow-button-secondary-hover: 0 0.5rem 1rem var(--color-shadow-primary-soft);
  --shadow-header: 0 0.5rem 1.25rem var(--color-shadow-header);
  --shadow-header-button: 0 0.625rem 1.25rem var(--color-shadow-header-button);
  --shadow-header-button-active: 0 0.375rem 0.875rem var(--color-shadow-header-button-active);
  --shadow-header-button-hover: 0 0.875rem 1.5rem var(--color-shadow-header-button-hover);
  --shadow-project-card-hover: 0 1rem 2rem var(--color-shadow-project-hover);
  --shadow-project-media-hover: 0 0.875rem 1.75rem var(--color-shadow-button);
  --scrim-photo-dark:
    linear-gradient(90deg, var(--color-scrim-strong) 0%, var(--color-scrim-heavy) 42%, var(--color-scrim-soft) 72%, var(--color-scrim-whisper) 100%),
    linear-gradient(180deg, var(--color-scrim-medium) 0%, transparent 50%, var(--color-scrim-soft) 100%);
  --scrim-photo-light:
    linear-gradient(90deg, color-mix(in srgb, var(--color-paper) 94%, transparent) 0%, color-mix(in srgb, var(--color-paper) 86%, transparent) 44%, color-mix(in srgb, var(--color-paper) 58%, transparent) 74%, color-mix(in srgb, var(--color-paper) 34%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, white 44%, transparent) 0%, transparent 52%, color-mix(in srgb, var(--color-paper) 54%, transparent) 100%);
  --scrim-photo-brand:
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 94%, transparent) 0%, color-mix(in srgb, var(--color-primary) 86%, transparent) 42%, color-mix(in srgb, var(--color-primary) 60%, transparent) 72%, color-mix(in srgb, var(--color-primary) 34%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 66%, transparent) 0%, transparent 50%, color-mix(in srgb, var(--color-primary) 52%, transparent) 100%);
  --scrim-photo-brand-dark:
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary-700) 94%, transparent) 0%, color-mix(in srgb, var(--color-primary-700) 86%, transparent) 42%, color-mix(in srgb, var(--color-primary-700) 60%, transparent) 72%, color-mix(in srgb, var(--color-primary-700) 34%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary-700) 66%, transparent) 0%, transparent 50%, color-mix(in srgb, var(--color-primary-700) 52%, transparent) 100%);
  --scrim-video-brand:
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 92%, transparent) 0%, color-mix(in srgb, var(--color-primary) 84%, transparent) 42%, color-mix(in srgb, var(--color-primary) 60%, transparent) 72%, color-mix(in srgb, var(--color-primary) 34%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 68%, transparent) 0%, transparent 50%, color-mix(in srgb, var(--color-primary) 58%, transparent) 100%);
  --scrim-video-brand-dark:
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary-700) 92%, transparent) 0%, color-mix(in srgb, var(--color-primary-700) 84%, transparent) 42%, color-mix(in srgb, var(--color-primary-700) 60%, transparent) 72%, color-mix(in srgb, var(--color-primary-700) 34%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary-700) 68%, transparent) 0%, transparent 50%, color-mix(in srgb, var(--color-primary-700) 58%, transparent) 100%);
  --scrim-photo-reveal-dark:
    linear-gradient(90deg, var(--color-scrim-strong) 0%, var(--color-scrim-heavy) 38%, var(--color-scrim-soft) 54%, transparent 72%);
  --scrim-photo-reveal-brand:
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 94%, transparent) 0%, color-mix(in srgb, var(--color-primary) 86%, transparent) 38%, color-mix(in srgb, var(--color-primary) 54%, transparent) 54%, transparent 72%);
  --scrim-photo-reveal-light:
    linear-gradient(90deg, color-mix(in srgb, var(--color-paper) 96%, transparent) 0%, color-mix(in srgb, var(--color-paper) 90%, transparent) 38%, color-mix(in srgb, var(--color-paper) 54%, transparent) 54%, transparent 72%);
  --duration-ui: 140ms;
  --duration-hover: 190ms;
  --duration-reveal: 320ms;
  --duration-reveal-large: 520ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-heavy: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-lift: -0.125rem;
  --motion-shift-sm: 0.25rem;
  --motion-shift-md: 0.75rem;
  --motion-shift-lg: 1.25rem;
  --transition-base: var(--duration-hover) var(--ease-standard);
  --step--4: clamp(0.3084rem, 0.4121rem + -0.1338vw, 0.382rem);
  --step--3: clamp(0.4262rem, 0.5103rem + -0.1085vw, 0.4859rem);
  --step--2: clamp(0.589rem, 0.6299rem + -0.0528vw, 0.6181rem);
  --step--1: clamp(0.7862rem, 0.7748rem + 0.0507vw, 0.814rem);
  --step-0: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
  --step-1: clamp(1.272rem, 1.1563rem + 0.5141vw, 1.5547rem);
  --step-2: clamp(1.618rem, 1.4009rem + 0.9649vw, 2.1487rem);
  --step-3: clamp(2.0581rem, 1.6852rem + 1.6571vw, 2.9695rem);
  --step-4: clamp(2.6179rem, 2.01rem + 2.7017vw, 4.1038rem);
  --step-5: clamp(3.3299rem, 2.372rem + 4.2573vw, 5.6714rem);
  --step-6: clamp(4.2357rem, 2.762rem + 6.5495vw, 7.8379rem);
  --step-7: clamp(5.3878rem, 3.1606rem + 9.8986vw, 10.832rem);
  --step-8: clamp(6.8533rem, 3.5328rem + 14.7574vw, 14.9698rem);
  /* @link https://utopia.fyi/space/calculator?c=360,18,1.125,1240,20,1.272,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
  --page-inset: var(--grid-gutter);
  --section-rail-width: var(--space-m-l);
  --section-space: var(--space-2xl);
}

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

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

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

html {
  --site-header-reserved-height: calc(3.5rem + (var(--space-3xs) * 2));
  scroll-padding-top: var(--site-header-reserved-height, 5.25rem);
  background-color: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-sans);
}

body {
  min-height: 100vh;
  background-color: var(--color-page);
  color: var(--color-text);
  font-size: var(--step-0);
  line-height: 1.618;
  padding-top: var(--site-header-reserved-height);
}

@media (min-width: 48rem) {
  body {
    border-left: var(--section-rail-width) solid var(--color-secondary-500);
  }
}
@media (min-width: 64rem) {
  html {
    --site-header-reserved-height: 6.25rem;
  }
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-display: swap;
  font-style: italic;
  font-weight: 100 900;
}
@font-face {
  font-family: "Jura CNC";
  src: url("/assets/fonts/Jura-CNC.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 1000;
}
body {
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  color: var(--heading-color, var(--color-primary));
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.272;
  text-wrap: balance;
  text-transform: uppercase;
}

h1 {
  font-size: var(--step-4);
  max-width: 14ch;
}

@media (max-width: 40rem) {
  h1 {
    max-width: 11ch;
  }
}
h2 {
  font-size: var(--step-2);
}

h3 {
  font-size: var(--step-1);
}

p,
li,
label,
input,
select,
textarea {
  max-width: var(--measure);
}

p {
  text-wrap: pretty;
}

small {
  font-size: var(--step--1);
}

a {
  color: inherit;
  text-decoration: none;
  text-decoration-color: transparent;
  transition: color var(--duration-hover) var(--ease-standard), text-decoration-color var(--duration-hover) var(--ease-standard);
}
a:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
  outline: none;
}

ul,
ol {
  display: grid;
  gap: var(--space-2xs);
  padding-left: 1.25em;
}

hr {
  border: 0;
  border-top: var(--border-width) solid var(--color-border);
  margin-block: var(--space-s);
}

button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

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

input,
textarea,
select {
  width: 100%;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-soft);
  color: var(--color-text);
  padding: var(--space-xs);
  font: inherit;
  transition: background-color var(--duration-hover) var(--ease-standard), border-color var(--duration-hover) var(--ease-standard), box-shadow var(--duration-hover) var(--ease-standard);
}
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--color-subtle);
}
input:hover,
textarea:hover,
select:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-accent-secondary);
  background-color: var(--color-surface);
}

textarea {
  resize: vertical;
}

.has-reveal [data-reveal] {
  --reveal-distance: var(--motion-shift-md);
  --reveal-duration: var(--duration-reveal);
  --reveal-delay: 0ms;
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition: opacity var(--reveal-duration) var(--ease-out) var(--reveal-delay), transform var(--reveal-duration) var(--ease-heavy) var(--reveal-delay);
  will-change: opacity, transform;
}

.has-reveal [data-reveal=large] {
  --reveal-distance: var(--motion-shift-lg);
  --reveal-duration: var(--duration-reveal-large);
}

.has-reveal [data-reveal=fine] {
  --reveal-distance: var(--motion-shift-sm);
  --reveal-duration: var(--duration-hover);
}

.has-reveal [data-reveal][data-reveal-state=visible] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.has-reveal [data-reveal-group] > :nth-child(2) {
  --reveal-delay: 55ms;
}

.has-reveal [data-reveal-group] > :nth-child(3) {
  --reveal-delay: 110ms;
}

.has-reveal [data-reveal-group] > :nth-child(4) {
  --reveal-delay: 165ms;
}

.has-reveal [data-reveal-group] > :nth-child(5) {
  --reveal-delay: 220ms;
}

.has-reveal [data-reveal-group] > :nth-child(n+6) {
  --reveal-delay: 275ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}
main > section {
  --section-background: var(--color-paper-500);
  --section-text: var(--color-ink-500);
  --section-muted: var(--color-section-muted);
  --section-subtle: var(--color-section-muted);
  --section-heading: var(--color-primary);
  --section-border: var(--color-ink-200);
  --section-border-strong: var(--color-ink-300);
  --section-surface: var(--color-paper-50);
  --section-surface-soft: var(--color-paper-100);
  --section-surface-alt: var(--color-paper-200);
  --section-surface-muted: var(--color-neutral-100);
  --section-tag-background: var(--color-tag-base-background);
  --section-tag-border: var(--color-tag-base-border);
  --section-tag-text: var(--color-tag-base-text);
  --section-tag-contrast-background: var(--color-tag-base-contrast-background);
  --section-tag-contrast-border: var(--color-tag-base-contrast-border);
  --section-tag-contrast-text: var(--color-tag-base-contrast-text);
  --section-accent: var(--color-secondary-500);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-accent-secondary: var(--color-primary-500);
  --section-accent-secondary-hover: var(--color-primary-600);
  --section-accent-secondary-emphasis: var(--color-secondary-600);
  --section-focus-ring: var(--color-focus-ring);
  --heading-color: var(--section-heading);
  --color-text: var(--section-text);
  --color-muted: var(--section-muted);
  --color-subtle: var(--section-subtle);
  --color-border: var(--section-border);
  --color-border-strong: var(--section-border-strong);
  --color-surface: var(--section-surface);
  --color-surface-soft: var(--section-surface-soft);
  --color-surface-alt: var(--section-surface-alt);
  --color-surface-muted: var(--section-surface-muted);
  --color-tag-background: var(--section-tag-background);
  --color-tag-border: var(--section-tag-border);
  --color-tag-text: var(--section-tag-text);
  --color-tag-contrast-background: var(--section-tag-contrast-background);
  --color-tag-contrast-border: var(--section-tag-contrast-border);
  --color-tag-contrast-text: var(--section-tag-contrast-text);
  --color-surface-tag: var(--section-tag-background);
  --color-surface-tag-contrast: var(--section-tag-contrast-background);
  --color-text-tag-contrast: var(--section-tag-contrast-text);
  --color-accent: var(--section-accent);
  --color-accent-hover: var(--section-accent-hover);
  --color-accent-contrast: var(--section-accent-contrast);
  --color-accent-secondary: var(--section-accent-secondary);
  --color-accent-secondary-hover: var(--section-accent-secondary-hover);
  --color-accent-secondary-emphasis: var(--section-accent-secondary-emphasis);
  --color-focus-ring: var(--section-focus-ring);
  background-color: var(--section-background);
  color: var(--section-text);
  padding-block: var(--section-space);
}
main > section > .section-media,
main > section > .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  overflow: hidden;
}
main > section > .section-media::after,
main > section > .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--section-photo-scrim, transparent);
}
main > section > .section-media picture,
main > section > .section-media img,
main > section > .section-media video,
main > section > .hero-media picture,
main > section > .hero-media img,
main > section > .hero-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main > section.is-solid, main > section.is-default {
  --section-background: var(--color-paper-500);
}
main > section.is-subtle {
  --section-background: var(--color-surface-soft);
  --section-surface: var(--color-paper-50);
}
main > section.is-raised {
  --section-background: var(--color-surface-alt);
  --section-surface: var(--color-paper-50);
}
main > section.is-solid, main > section.is-brand, main > section.is-brand-dark, main > section.is-accent, main > section.is-video, main > section.is-video-brand, main > section.is-video-brand-dark, main > section.is-photo-dark, main > section.is-photo-brand-dark, main > section.is-photo-brand, main > section.is-photo-reveal-brand, main > section.is-photo-reveal-dark {
  --section-text: var(--color-text-contrast-strong);
  --section-muted: var(--color-text-contrast-strong);
  --section-subtle: var(--color-text-contrast-strong);
  --section-heading: var(--color-text-contrast-strong);
  --section-border: var(--color-section-contrast-border);
  --section-border-strong: var(--color-section-contrast-border-strong);
  --section-surface: var(--color-section-contrast-surface);
  --section-surface-soft: var(--color-section-contrast-surface-soft);
  --section-surface-alt: var(--color-section-contrast-tag-background);
  --section-surface-muted: var(--color-section-contrast-surface-muted);
  --section-tag-background: var(--color-section-contrast-tag-background);
  --section-tag-border: var(--color-section-contrast-focus-ring);
  --section-tag-text: white;
  --section-tag-contrast-background: var(--color-section-contrast-tag-background);
  --section-tag-contrast-border: var(--color-section-contrast-focus-ring);
  --section-tag-contrast-text: white;
  --section-accent-secondary: white;
  --section-accent-secondary-hover: white;
  --section-accent-secondary-emphasis: white;
  --section-focus-ring: var(--color-section-contrast-focus-ring);
}
main > section.is-solid, main > section.is-brand {
  --section-background: var(--color-primary);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
}
main > section.is-brand-dark {
  --section-background: var(--color-primary-700);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
}
main > section.is-accent {
  --section-background: var(--color-secondary);
  --section-text: white;
  --section-muted: var(--color-section-accent-text);
  --section-subtle: var(--color-section-accent-text);
  --section-heading: white;
  --section-accent: white;
  --section-accent-hover: var(--color-section-accent-hover-light);
  --section-accent-contrast: var(--color-secondary);
}
main > section.is-photo, main > section.is-video, main > section.is-video-brand, main > section.is-video-brand-dark, main > section.is-photo-dark, main > section.is-photo-brand-dark, main > section.is-photo-light, main > section.is-photo-brand, main > section.is-photo-reveal-brand, main > section.is-photo-reveal-dark, main > section.is-photo-reveal-light {
  position: relative;
  isolation: isolate;
}
main > section.is-photo > .section-media,
main > section.is-photo > .hero-media, main > section.is-video > .section-media,
main > section.is-video > .hero-media, main > section.is-video-brand > .section-media,
main > section.is-video-brand > .hero-media, main > section.is-video-brand-dark > .section-media,
main > section.is-video-brand-dark > .hero-media, main > section.is-photo-dark > .section-media,
main > section.is-photo-dark > .hero-media, main > section.is-photo-brand-dark > .section-media,
main > section.is-photo-brand-dark > .hero-media, main > section.is-photo-light > .section-media,
main > section.is-photo-light > .hero-media, main > section.is-photo-brand > .section-media,
main > section.is-photo-brand > .hero-media, main > section.is-photo-reveal-brand > .section-media,
main > section.is-photo-reveal-brand > .hero-media, main > section.is-photo-reveal-dark > .section-media,
main > section.is-photo-reveal-dark > .hero-media, main > section.is-photo-reveal-light > .section-media,
main > section.is-photo-reveal-light > .hero-media {
  display: block;
}
main > section.is-photo > .l-container, main > section.is-video > .l-container, main > section.is-video-brand > .l-container, main > section.is-video-brand-dark > .l-container, main > section.is-photo-dark > .l-container, main > section.is-photo-brand-dark > .l-container, main > section.is-photo-light > .l-container, main > section.is-photo-brand > .l-container, main > section.is-photo-reveal-brand > .l-container, main > section.is-photo-reveal-dark > .l-container, main > section.is-photo-reveal-light > .l-container {
  position: relative;
  z-index: 1;
}
main > section.is-photo, main > section.is-video, main > section.is-video-brand, main > section.is-video-brand-dark, main > section.is-photo-dark, main > section.is-photo-brand-dark, main > section.is-photo-light, main > section.is-photo-brand {
  overflow: hidden;
}
main > section.is-video, main > section.is-photo-dark {
  --section-background: var(--color-primary-700);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-photo-scrim: var(--scrim-photo-dark);
}
main > section.is-video-brand {
  --section-background: var(--color-primary-900);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-photo-scrim: var(--scrim-video-brand);
}
main > section.is-video-brand-dark {
  --section-background: var(--color-primary-700);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-photo-scrim: var(--scrim-video-brand-dark);
}
main > section.is-photo, main > section.is-photo-light {
  --section-background: var(--color-paper-100);
  --section-surface: var(--color-section-photo-light-surface);
  --section-surface-soft: var(--color-section-photo-light-surface-soft);
  --section-photo-scrim: var(--scrim-photo-light);
}
main > section.is-photo-brand {
  --section-background: var(--color-primary);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-photo-scrim: var(--scrim-photo-brand);
}
main > section.is-photo-dark, main > section.is-photo-brand-dark {
  --section-background: var(--color-primary-700);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-photo-scrim: var(--scrim-photo-dark);
}
main > section.is-photo-brand-dark {
  --section-photo-scrim: var(--scrim-photo-brand-dark);
}
main > section.is-photo-reveal-dark, main > section.is-photo-reveal-brand, main > section.is-photo-reveal-light {
  --section-media-radius: var(--radius-sm);
  overflow: visible;
}
main > section.is-photo-reveal-dark > .section-media, main > section.is-photo-reveal-brand > .section-media, main > section.is-photo-reveal-light > .section-media {
  position: relative;
  inset: auto;
  margin-block: calc(var(--section-space) * -0.45) var(--space-l);
  margin-inline: var(--page-inset);
  border-radius: var(--section-media-radius);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 16/10;
}
main > section.is-photo-reveal-dark > .section-media::after, main > section.is-photo-reveal-brand > .section-media::after, main > section.is-photo-reveal-light > .section-media::after {
  display: none;
}
main > section.is-photo-reveal-dark {
  --section-background: var(--color-primary-700);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-photo-scrim: var(--scrim-photo-reveal-dark);
}
main > section.is-photo-reveal-brand {
  --section-background: var(--color-primary);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-photo-scrim: var(--scrim-photo-reveal-brand);
}
main > section.is-photo-reveal-light {
  --section-background: var(--color-paper-100);
  --section-surface: var(--color-section-photo-light-surface);
  --section-surface-soft: var(--color-section-photo-light-surface-soft);
  --section-photo-scrim: var(--scrim-photo-reveal-light);
}
main > section.is-compact {
  padding-block: var(--space-l);
}
@media (min-width: 48rem) {
  main > section.is-photo-reveal-dark, main > section.is-photo-reveal-brand, main > section.is-photo-reveal-light {
    overflow: hidden;
  }
  main > section.is-photo-reveal-dark > .section-media, main > section.is-photo-reveal-brand > .section-media, main > section.is-photo-reveal-light > .section-media {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: auto;
  }
  main > section.is-photo-reveal-dark > .section-media::after, main > section.is-photo-reveal-brand > .section-media::after, main > section.is-photo-reveal-light > .section-media::after {
    display: block;
  }
}

.l-container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.l-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.l-wrapper > div:not([class]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.l-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  align-items: start;
  gap: var(--grid-gutter);
}
.l-grid > * {
  grid-column: 1/-1;
  min-width: 0;
}
:where(.l-grid) > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.l-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-height: 2.75rem;
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  padding: var(--space-2xs-xs) var(--space-s);
  color: var(--color-accent-contrast);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 1000;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 0.375rem 0.875rem var(--color-shadow-button);
  transition: background-color var(--duration-hover) var(--ease-standard), border-color var(--duration-hover) var(--ease-standard), box-shadow var(--duration-hover) var(--ease-standard), color var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-heavy);
}
.button:hover, .button:focus-visible {
  border-color: var(--color-accent-hover);
  background-color: var(--color-accent-hover);
  box-shadow: 0 0.625rem 1rem var(--color-shadow-button-hover);
  text-decoration: none;
  transform: translate3d(0, var(--motion-lift), 0);
}
.button:active {
  box-shadow: 0 0.25rem 0.625rem var(--color-shadow-button);
  transform: translate3d(0, 0, 0);
}
.button.is-secondary {
  border-color: var(--color-accent-secondary);
  background-color: transparent;
  color: var(--color-accent-secondary);
  box-shadow: none;
}
.button.is-secondary:hover, .button.is-secondary:focus-visible {
  border-color: var(--color-accent-secondary-hover);
  background-color: var(--color-accent-secondary-wash);
  color: var(--color-accent-secondary-hover);
  box-shadow: none;
}
.button.is-dark {
  border-color: var(--color-surface-dark);
  background-color: var(--color-surface-dark);
  color: var(--color-accent-contrast);
}
.button.is-dark:hover, .button.is-dark:focus-visible {
  border-color: var(--color-primary-600);
  background-color: var(--color-primary-600);
}
.button.is-compact {
  min-height: 2.5rem;
  padding-inline: var(--space-xs-s);
  font-size: var(--step--1);
}
.button svg {
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
}
.button.is-quiet {
  border-color: var(--color-accent-secondary);
  color: var(--color-accent-secondary);
  box-shadow: none;
}
.button.is-full {
  width: 100%;
}

.card,
.project-card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration-hover) var(--ease-standard), border-color var(--duration-hover) var(--ease-standard), box-shadow var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-heavy);
}

.card.is-subtle {
  background-color: var(--color-surface-soft);
}

.card.is-dark {
  --heading-color: var(--color-paper);
  border-color: var(--color-border-contrast-subtle);
  background-color: var(--color-surface-emphasis);
  color: var(--color-accent-contrast);
}
.card.is-dark p:not(.tag) {
  color: var(--color-dark-muted);
}

.card.is-centered {
  text-align: center;
}

.card.is-note {
  border-style: dashed;
  background-color: var(--color-surface-soft);
}

.promise-card > span {
  display: block;
  color: var(--color-accent-secondary-emphasis);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1;
}

.cta-band {
  padding-block: var(--space-2xl);
}
.cta-band .l-container > .l-wrapper {
  align-items: end;
}
@media (min-width: 48rem) {
  .cta-band .cta-layout > :first-child {
    grid-column: span 6;
  }
  .cta-band .cta-layout > :last-child {
    grid-column: span 6;
  }
}
.cta-band h2 {
  max-width: 20ch;
  font-size: var(--step-3);
}
.cta-band p {
  color: var(--color-muted);
  font-size: var(--step-1);
  line-height: 1.5;
}
.cta-band .l-button-row {
  justify-content: flex-start;
}

.features > div,
.steps > div,
.proof-list > div {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  min-width: 0;
}

.features > div {
  padding-block: var(--space-s);
  border-top: var(--border-width) solid var(--color-border);
  transition: border-color var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-heavy);
}
.features > div:hover {
  border-color: var(--color-border-strong);
  transform: translate3d(0, var(--motion-lift), 0);
}

.features > div h3,
.steps > div h3,
.proof-list > div h3 {
  font-size: var(--step-1);
}

.features > div p,
.steps > div p,
.proof-list > div p {
  color: var(--color-muted);
}

.features > div .image-placeholder {
  margin-bottom: var(--space-2xs);
}

.steps {
  counter-reset: steps;
}

.steps > div {
  position: relative;
  counter-increment: steps;
  padding-block: var(--space-s);
  border-top: var(--border-width) solid var(--color-border);
  transition: border-color var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-heavy);
}
.steps > div:hover {
  border-color: var(--color-border-strong);
  transform: translate3d(0, var(--motion-lift), 0);
}

.steps > div::before {
  content: counter(steps, decimal-leading-zero);
  width: fit-content;
  color: var(--color-accent-secondary);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.steps > div .tag {
  margin-bottom: calc(var(--space-3xs) * -1);
}

.steps.is-connected > div {
  --step-marker-size: 2.75rem;
  grid-template-columns: var(--step-marker-size) minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-s);
  max-width: 100%;
  border-top: 0;
  padding-block: 0;
}
.steps.is-connected > div::before {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  width: var(--step-marker-size);
  height: var(--step-marker-size);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background-color: var(--section-background);
  background-image: linear-gradient(var(--color-surface), var(--color-surface));
  box-shadow: inset 0 calc(var(--border-width) * -1) 0 var(--color-accent);
}
.steps.is-connected > div::after {
  content: "";
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  width: var(--border-width);
  min-height: var(--space-l);
  background-color: var(--color-border);
}
.steps.is-connected > div:last-child::after {
  display: none;
}

.steps.is-connected > div h3,
.steps.is-connected > div p {
  grid-column: 2;
  min-width: 0;
  max-width: min(100%, 34ch);
  overflow-wrap: break-word;
}

.proof-list > div {
  padding-left: var(--space-s);
  border-left: var(--border-width) solid var(--color-accent-secondary);
}

.proof-list > div .tag {
  background-color: var(--color-surface-tag);
  color: var(--color-accent-secondary);
}

@media (min-width: 48rem) {
  .features > div,
  .steps > div,
  .proof-list > div {
    grid-column: span 4;
  }
  .steps.is-connected {
    --step-marker-size: 2.75rem;
    position: relative;
    align-items: start;
  }
  .steps.is-connected::before {
    content: "";
    position: absolute;
    top: calc(var(--step-marker-size) / 2);
    right: calc(var(--step-marker-size) / 2);
    left: calc(var(--step-marker-size) / 2);
    height: var(--border-width);
    background-color: var(--color-border);
  }
  .steps.is-connected > div {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
  .steps.is-connected > div::before {
    grid-row: auto;
    grid-column: auto;
    position: relative;
    z-index: 1;
  }
  .steps.is-connected > div::after {
    display: none;
  }
  .steps.is-connected > div h3,
  .steps.is-connected > div p {
    grid-column: 1;
  }
}
@media (max-width: 47.99rem) {
  .steps.is-connected > div {
    grid-template-columns: minmax(0, 1fr);
  }
  .steps.is-connected > div h3,
  .steps.is-connected > div p {
    grid-column: 1;
  }
  .steps.is-connected > div::after {
    grid-row: auto;
    margin-inline-start: calc(var(--step-marker-size) / 2);
  }
}
.facts-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
}

.facts-list strong {
  display: block;
  color: var(--heading-color);
  font-size: var(--step-2);
  line-height: 1;
  font-family: var(--font-heading);
  text-transform: uppercase;
}

.facts-list span {
  color: var(--color-subtle);
  font-size: var(--step--1);
  line-height: 1.1;
}

.form-panel {
  display: grid;
  gap: var(--space-s);
}

.form-grid {
  display: grid;
  gap: var(--space-2xs-xs);
}

.field {
  display: grid;
  gap: var(--space-3xs);
}

.field label {
  color: var(--color-muted);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

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

.form-note {
  color: var(--color-subtle);
  font-size: var(--step--1);
  text-align: center;
}

@media (min-width: 48rem) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
#hero,
.hero-sample {
  overflow: hidden;
  position: relative;
  padding-block: var(--section-space);
}
#hero.is-compact,
.hero-sample.is-compact {
  padding-block: var(--space-l);
}
#hero .l-container,
.hero-sample .l-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s);
}
#hero .l-wrapper,
.hero-sample .l-wrapper {
  position: relative;
  z-index: 1;
  min-width: 0;
}
#hero h1,
.hero-sample h1 {
  max-width: min(100%, 25ch);
  overflow-wrap: break-word;
}
#hero .hero-media,
.hero-sample .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
#hero .hero-media picture,
#hero .hero-media video,
#hero .hero-media img,
.hero-sample .hero-media picture,
.hero-sample .hero-media video,
.hero-sample .hero-media img {
  display: block;
  width: 100%;
  height: 100%;
}
#hero .hero-media video,
#hero .hero-media img,
.hero-sample .hero-media video,
.hero-sample .hero-media img {
  object-fit: cover;
}
#hero .eyebrow,
.hero-sample .eyebrow {
  color: var(--heading-color);
}
#hero .summary-text,
.hero-sample .summary-text {
  color: var(--heading-color);
}

@media (max-width: 47.99rem) {
  #hero .intro-text,
  #hero .summary-text {
    max-width: min(100%, 17rem);
  }
  #hero h1 {
    font-size: var(--step-3);
    overflow-wrap: normal;
  }
}

.eyebrow {
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 1000;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-subtle);
}

.intro-text {
  font-size: var(--step-1);
  line-height: 1.5;
}

.summary-text {
  max-width: 60ch;
  color: var(--color-muted);
  font-size: var(--step-0);
}

.annotation {
  border-left: 2px solid var(--color-accent-secondary);
  padding-left: var(--space-xs);
  color: var(--color-subtle);
  font-size: var(--step--1);
  font-style: italic;
}
.annotation.no-border {
  border-left: 0;
  padding-left: 0;
}

.detail-list {
  list-style: none;
  padding-left: 0;
}
.detail-list li {
  position: relative;
  padding-left: var(--space-s);
  color: var(--color-muted);
}
.detail-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-subtle);
}

.detail-list.has-icons li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2xs);
  padding-left: 0;
}
.detail-list.has-icons li::before {
  content: none;
}

.detail-list-icon {
  display: grid;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  margin-block-start: 0.1em;
  color: var(--color-accent-secondary);
}

.detail-list-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.meta-copy {
  color: var(--color-muted);
  font-size: var(--step--1);
}

.meta-stack {
  display: grid;
  gap: 0;
  list-style: none;
  padding-left: 0;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.45;
}

.meta-stack li {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-2xs);
  border-bottom: var(--border-width) solid var(--color-border);
}
.meta-stack li:last-child {
  border-bottom: 0;
}

.meta-stack span {
  color: var(--color-accent-secondary-hover);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.meta-stack small {
  color: var(--color-subtle);
  font-size: var(--step--1);
  font-style: normal;
  line-height: 1.45;
}

@media (min-width: 36rem) {
  .meta-stack li {
    grid-template-columns: minmax(9rem, 0.45fr) minmax(0, 1fr);
    align-items: baseline;
  }
}
.l-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: 2.25rem;
  border: var(--border-width) solid var(--color-tag-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-tag-background);
  padding: var(--space-3xs) var(--space-2xs);
  color: var(--color-tag-text);
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 1000;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.pill.is-active {
  border-color: var(--color-tag-contrast-border);
  background-color: var(--color-tag-background);
  color: var(--color-tag-text);
}

.pill.is-active::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--color-tag-text);
}

.image-placeholder {
  position: relative;
  display: flex;
  min-height: var(--placeholder-height, 18rem);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-placeholder);
  color: var(--color-subtle);
  font-size: var(--step--2);
  font-weight: 700;
  transition: border-color var(--duration-hover) var(--ease-standard), background-color var(--duration-hover) var(--ease-standard);
}
.image-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 0.5rem, var(--color-placeholder-stripe) 0.5rem, var(--color-placeholder-stripe) 0.625rem);
}
.image-placeholder span {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-xs);
  background-color: var(--color-image-label-background);
  padding: var(--space-3xs) var(--space-2xs);
}
.image-placeholder.flush {
  border-inline: 0;
  border-top: 0;
  border-radius: 0;
}

.logo-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: var(--logo-max-height, 3rem);
  object-fit: contain;
  opacity: 0.86;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  transition: filter var(--duration-hover) var(--ease-standard), opacity var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-heavy);
}
.logo-image:hover {
  opacity: 0.98;
  filter: grayscale(0.35);
}

.placeholder-card {
  display: flex;
  min-height: 18.75rem;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--color-border);
  background-color: var(--color-surface-placeholder);
}

.placeholder-card > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-l);
  text-align: center;
}

.placeholder-card > div > span {
  display: block;
  color: var(--color-accent-secondary);
  font-size: var(--step-2);
}

.project-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color var(--duration-hover) var(--ease-standard), box-shadow var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-heavy);
}
.project-card > picture {
  display: block;
  height: 12.5rem;
  overflow: hidden;
}
.project-card > picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-reveal) var(--ease-heavy);
}
.project-card > div:last-child {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
}
.project-card[data-project-gallery] {
  box-shadow: var(--shadow-sm);
}
.project-card[data-project-gallery]:hover, .project-card[data-project-gallery]:focus-within {
  border-color: var(--color-border-strong);
  box-shadow: 0 1rem 2rem var(--color-shadow-project-hover);
  transform: translate3d(0, var(--motion-lift), 0);
}
.project-card[data-project-gallery]:hover > picture img, .project-card[data-project-gallery]:focus-within > picture img {
  transform: scale(1.02);
}

.heading-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.heading-group > p:first-child:not(:last-child) {
  color: var(--color-subtle);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.heading-group > p:last-child {
  color: var(--color-muted);
  max-width: 60ch;
}

#site-footer {
  --heading-color: var(--color-paper);
  background-color: var(--color-surface-dark);
  color: var(--color-dark-muted);
}
#site-footer.is-compact {
  padding-block: var(--space-l);
}
#site-footer.is-full {
  padding-block: var(--space-xl) var(--space-m);
}
#site-footer a {
  transition: color var(--duration-hover) var(--ease-standard), opacity var(--duration-hover) var(--ease-standard);
}
#site-footer a:hover,
#site-footer a:focus-visible {
  color: var(--color-accent-contrast);
}
#site-footer > .l-container {
  gap: var(--space-xl);
}
#site-footer > .l-container > .l-wrapper:first-child:not(:last-child) > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
#site-footer .footer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 13rem);
  transition: opacity var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-heavy);
}
#site-footer .footer-logo:hover, #site-footer .footer-logo:focus-visible {
  opacity: 0.86;
  text-decoration: none;
  transform: translate3d(0, var(--motion-lift), 0);
}
#site-footer .footer-logo img {
  display: block;
  width: 100%;
  height: auto;
}
#site-footer > .l-container > .l-wrapper:first-child:not(:last-child) > div:first-child p span {
  display: block;
  color: var(--color-dark-subtle);
  font-size: var(--step--1);
}
#site-footer > .l-container > .l-wrapper:first-child:not(:last-child) > div:first-child p {
  display: grid;
  gap: var(--space-3xs);
}
#site-footer > .l-container > .l-wrapper:first-child:not(:last-child) > div:first-child p span:last-child {
  color: var(--color-dark-faint);
  font-size: var(--step--2);
}
#site-footer .footer-heading {
  margin-bottom: 0;
  color: var(--color-accent-contrast);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}
#site-footer > .l-container > .l-wrapper:first-child:not(:last-child) ul {
  display: grid;
  gap: var(--space-xs);
  list-style: none;
  padding-left: 0;
}
#site-footer > .l-container > .l-wrapper:first-child:not(:last-child) ul a {
  display: inline-block;
  color: var(--color-dark-subtle);
  font-size: var(--step--1);
  line-height: 1.35;
}
#site-footer .footer-contact {
  display: grid;
  gap: var(--space-2xs);
}
#site-footer .footer-contact .footer-heading {
  margin-bottom: var(--space-3xs);
}
#site-footer .footer-contact p {
  color: var(--color-dark-subtle);
  font-size: var(--step--1);
  line-height: 1.35;
}
#site-footer .footer-contact address {
  color: var(--color-dark-subtle);
  font-size: var(--step--1);
  font-style: normal;
  line-height: 1.35;
}
#site-footer > .l-container > .l-wrapper:last-child {
  gap: var(--space-2xs);
  border-top: var(--border-width) solid var(--color-border-contrast-subtle);
  padding-top: var(--space-s);
  color: var(--color-dark-faint);
  font-size: var(--step--1);
}
#site-footer .footer-credit a {
  color: inherit;
  opacity: 0.58;
}
#site-footer .footer-credit a:hover,
#site-footer .footer-credit a:focus-visible {
  color: var(--color-accent-contrast);
  opacity: 1;
}

@media (min-width: 48rem) {
  #site-footer .footer-main > div:first-child {
    grid-column: span 6;
  }
  #site-footer .footer-main > div:nth-child(2),
  #site-footer .footer-main > div:nth-child(3) {
    grid-column: span 3;
  }
  #site-footer .footer-main > div:nth-child(4),
  #site-footer .footer-main > div:nth-child(5) {
    grid-column: span 6;
  }
}
@media (min-width: 64rem) {
  #site-footer .footer-main > div:first-child {
    grid-column: span 4;
  }
  #site-footer .footer-main > div:not(:first-child) {
    grid-column: span 2;
  }
  #site-footer > .l-container > .l-wrapper:last-child {
    align-items: center;
  }
  #site-footer > .l-container > .l-wrapper:last-child > span:first-child {
    grid-column: span 4;
  }
  #site-footer > .l-container > .l-wrapper:last-child > span:nth-child(2) {
    grid-column: span 4;
  }
  #site-footer > .l-container > .l-wrapper:last-child .footer-credit {
    grid-column: span 4;
    justify-self: end;
  }
}
#site-header {
  --header-line: var(--color-shadow-header-button-active);
  --header-shadow: 0 0.5rem 1.25rem var(--color-shadow-header);
  --nav-indicator: var(--color-accent-secondary);
  --nav-hover: var(--color-nav-hover);
  --header-mobile-logo-width: clamp(10rem, 50vw, 13rem);
  --header-mobile-min-height: 3.5rem;
  --header-mobile-padding-block: var(--space-3xs);
  position: fixed;
  inset: 0 0 auto 0;
}
@media (min-width: 48rem) {
  #site-header {
    inset-inline-start: var(--section-rail-width);
  }
}
#site-header {
  z-index: 20;
  transform: translateZ(0);
  border-bottom: var(--border-width) solid var(--header-line);
}
@media (max-width: 63.9375rem) {
  #site-header {
    border-bottom: 5px solid var(--color-secondary-500);
  }
}
#site-header {
  background-color: var(--color-header-background);
  box-shadow: var(--header-shadow);
  transition: background-color var(--duration-hover) var(--ease-standard), border-color var(--duration-hover) var(--ease-standard), box-shadow var(--duration-hover) var(--ease-standard);
}
#site-header > .l-container > .l-wrapper {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: var(--space-2xs-xs);
  min-height: var(--header-mobile-min-height);
  padding-block: var(--header-mobile-padding-block);
  transition: min-height var(--duration-hover) var(--ease-heavy), padding var(--duration-hover) var(--ease-heavy);
}
#site-header .site-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--header-mobile-logo-width);
  min-height: 3rem;
  transform-origin: left center;
  transition: opacity var(--duration-hover) var(--ease-standard), width var(--duration-hover) var(--ease-heavy), transform var(--duration-hover) var(--ease-standard);
}
#site-header .site-logo:hover {
  opacity: 0.86;
  text-decoration: none;
  transform: translate3d(0, var(--motion-lift), 0);
}
#site-header .site-logo:active {
  transform: translate3d(0, 0, 0);
}
#site-header .site-logo img {
  display: block;
  width: 100%;
  height: auto;
}
#site-header .nav-toggle {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  border: var(--border-width) solid var(--color-nav-toggle-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-nav-toggle-background);
  padding: var(--space-2xs) var(--space-xs);
  color: var(--color-accent-secondary);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color var(--duration-hover) var(--ease-standard), border-color var(--duration-hover) var(--ease-standard), color var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-standard);
}
#site-header .nav-toggle:hover, #site-header .nav-toggle:focus-visible {
  border-color: var(--color-nav-toggle-border-hover);
  background-color: var(--color-nav-toggle-background-hover);
  transform: translate3d(0, var(--motion-lift), 0);
}
#site-header .nav-toggle[aria-expanded=true] {
  border-color: var(--color-nav-current-border);
  color: var(--color-accent);
}
#site-header .nav-toggle[aria-expanded=true] .nav-toggle-icon span:first-child {
  transform: translateY(0.375rem) rotate(45deg);
}
#site-header .nav-toggle[aria-expanded=true] .nav-toggle-icon span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.32);
}
#site-header .nav-toggle[aria-expanded=true] .nav-toggle-icon span:last-child {
  transform: translateY(-0.375rem) rotate(-45deg);
}
#site-header .nav-toggle-icon {
  display: grid;
  gap: 0.25rem;
  width: 1.125rem;
}
#site-header .nav-toggle-icon span {
  display: block;
  width: 100%;
  height: 0.125rem;
  border-radius: var(--radius-round);
  background-color: currentColor;
  transform-origin: center;
  transition: opacity var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-standard);
}
#site-header nav[data-nav] {
  grid-column: 1/-1;
  display: grid;
  grid-template-rows: 0fr;
  min-height: 0;
  border-top: var(--border-width) solid transparent;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, calc(var(--motion-shift-md) * -1), 0);
  visibility: hidden;
  transition: border-color var(--duration-hover) var(--ease-standard), grid-template-rows var(--duration-hover) var(--ease-standard), opacity var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-standard), visibility var(--duration-hover) var(--ease-standard);
}
#site-header nav[data-nav][data-open=true] {
  grid-template-rows: 1fr;
  border-top-color: var(--color-nav-divider);
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  visibility: visible;
}
#site-header nav[data-nav] > ul {
  overflow: hidden;
  min-height: 0;
}
#site-header nav[data-nav]:not([data-open=true]) > ul {
  padding-block: 0;
}
#site-header nav[data-nav] ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-xs) 0 var(--space-2xs);
  list-style: none;
}
#site-header nav[data-nav] a {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 2.875rem;
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  color: var(--color-muted);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--duration-hover) var(--ease-standard), color var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-standard);
}
#site-header nav[data-nav] a::before {
  content: "";
  position: absolute;
  inset-block: 0.625rem;
  left: 0;
  width: 0.1875rem;
  border-radius: var(--radius-round);
  background-color: var(--nav-indicator);
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-standard);
}
#site-header nav[data-nav] a:hover, #site-header nav[data-nav] a:focus-visible {
  background-color: var(--nav-hover);
  color: var(--color-accent-secondary);
  transform: translate3d(var(--motion-shift-sm), 0, 0);
}
#site-header nav[data-nav] a[aria-current=page] {
  color: var(--color-accent);
  font-weight: 600;
}
#site-header nav[data-nav] a[aria-current=page]::before {
  opacity: 1;
  transform: scaleY(1);
}
#site-header > .l-container > .l-wrapper > a.button {
  display: none;
}
#site-header.is-dark {
  --header-line: var(--color-border-contrast-subtle);
  --header-shadow: 0 0.5rem 1.25rem var(--color-shadow-header-button-active);
  --nav-indicator: var(--color-secondary);
  --nav-hover: var(--color-section-contrast-surface);
  background-color: var(--color-primary);
}
#site-header.is-dark .nav-toggle {
  border-color: var(--color-section-contrast-border);
  background-color: var(--color-section-contrast-surface);
  color: var(--color-paper);
}
#site-header.is-dark .nav-toggle:hover, #site-header.is-dark .nav-toggle:focus-visible {
  border-color: var(--color-section-contrast-border-strong);
  background-color: var(--color-section-contrast-surface-alt);
  color: white;
}
#site-header.is-dark .nav-toggle[aria-expanded=true] {
  border-color: var(--color-section-contrast-border-strong);
  color: white;
}
#site-header.is-dark nav[data-nav][data-open=true] {
  border-top-color: var(--color-border-contrast-subtle);
}
#site-header.is-dark nav[data-nav] a {
  color: var(--color-text-contrast-soft);
}
#site-header.is-dark nav[data-nav] a:hover, #site-header.is-dark nav[data-nav] a:focus-visible {
  color: white;
}
#site-header.is-dark nav[data-nav] a[aria-current=page] {
  color: white;
}

@media (min-width: 64rem) {
  #site-header {
    --header-desktop-logo-width: clamp(13.25rem, 18vw, 16.5rem);
    --header-desktop-min-height: 6.25rem;
  }
  #site-header > .l-container > .l-wrapper {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-s-m);
    min-height: var(--header-desktop-min-height);
    padding-block: 0;
  }
  #site-header .site-logo {
    width: var(--header-desktop-logo-width);
  }
  #site-header .nav-toggle {
    display: none;
  }
  #site-header nav[data-nav] {
    display: block;
    grid-column: auto;
    border-top: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }
  #site-header nav[data-nav] > ul {
    overflow: visible;
  }
  #site-header nav[data-nav] ul {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0.125rem;
    padding: 0;
  }
  #site-header nav[data-nav] a {
    min-height: var(--header-desktop-min-height);
    border-radius: 0;
    padding: 0 var(--space-xs-s);
    overflow: hidden;
    transition: background-color var(--duration-hover) var(--ease-standard), color var(--duration-hover) var(--ease-standard), min-height var(--duration-hover) var(--ease-heavy), transform var(--duration-hover) var(--ease-standard);
  }
  #site-header nav[data-nav] a::before {
    inset: auto var(--space-2xs) 0;
    width: auto;
    height: 0.1875rem;
    border-radius: var(--radius-round) var(--radius-round) 0 0;
    transform: scaleX(0.24);
  }
  #site-header nav[data-nav] a::after {
    content: "";
    position: absolute;
    inset: 0 var(--space-3xs);
    z-index: -1;
    background: linear-gradient(180deg, transparent 0%, transparent 34%, var(--color-nav-hover) 100%);
    opacity: 0;
    transform: translate3d(0, var(--motion-shift-md), 0);
    transition: opacity var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-standard);
  }
  #site-header nav[data-nav] a:hover, #site-header nav[data-nav] a:focus-visible {
    background-color: transparent;
    transform: translate3d(0, var(--motion-lift), 0);
  }
  #site-header nav[data-nav] a:hover::after, #site-header nav[data-nav] a:focus-visible::after {
    opacity: 0.72;
    transform: translate3d(0, 0, 0);
  }
  #site-header nav[data-nav] a:hover::before, #site-header nav[data-nav] a:focus-visible::before {
    opacity: 1;
    transform: scaleX(0.72);
  }
  #site-header nav[data-nav] a[aria-current=page] {
    color: var(--color-accent);
  }
  #site-header nav[data-nav] a[aria-current=page]::after {
    opacity: 0.58;
    transform: translate3d(0, 0, 0);
  }
  #site-header nav[data-nav] a[aria-current=page]::before {
    transform: scaleX(1);
  }
  #site-header > .l-container > .l-wrapper > a.button {
    display: inline-flex;
    box-shadow: 0 0.625rem 1.25rem var(--color-shadow-header-button);
    transition: background-color var(--duration-hover) var(--ease-standard), border-color var(--duration-hover) var(--ease-standard), box-shadow var(--duration-hover) var(--ease-standard), color var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-standard);
  }
  #site-header > .l-container > .l-wrapper > a.button:hover, #site-header > .l-container > .l-wrapper > a.button:focus-visible {
    border-color: var(--color-primary-600);
    background-color: var(--color-primary-600);
    box-shadow: 0 0.875rem 1.5rem var(--color-shadow-header-button-hover);
    transform: translate3d(0, var(--motion-lift), 0);
  }
  #site-header > .l-container > .l-wrapper > a.button:active {
    box-shadow: 0 0.375rem 0.875rem var(--color-shadow-header-button-active);
    transform: translate3d(0, 0, 0);
  }
  #site-header.is-dark nav[data-nav] a::after {
    background: linear-gradient(180deg, transparent 0%, transparent 34%, var(--color-section-contrast-surface) 100%);
  }
  #site-header.is-dark > .l-container > .l-wrapper > a.button.is-secondary {
    border-color: var(--color-section-contrast-border-strong);
    background-color: transparent;
    color: white;
  }
  #site-header.is-dark > .l-container > .l-wrapper > a.button.is-secondary:hover, #site-header.is-dark > .l-container > .l-wrapper > a.button.is-secondary:focus-visible {
    border-color: white;
    background-color: var(--color-section-contrast-surface-alt);
    color: white;
  }
  #site-header.is-compact {
    --header-desktop-logo-width: clamp(11.25rem, 14vw, 13.25rem);
    --header-desktop-min-height: 4.5rem;
    --header-shadow: 0 0.625rem 1.5rem var(--color-shadow-header-button-active);
  }
}
.tag {
  display: inline-flex;
  width: fit-content;
  border: var(--border-width) solid var(--color-tag-border);
  border-radius: var(--radius-xs);
  background-color: var(--color-tag-background);
  padding: var(--space-3xs) var(--space-2xs);
  color: var(--color-tag-text);
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 1000;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.testimonial-list > .testimonial-card:only-child {
  grid-column: 1/-1;
  justify-self: stretch;
  max-width: none;
  margin-inline: 0;
  align-items: flex-start;
  text-align: left;
}
@media (min-width: 48rem) {
  .testimonial-list > .testimonial-card {
    grid-column: span 6;
  }
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  overflow: hidden;
  border: 0;
  background-color: var(--color-surface);
  box-shadow: none;
  padding: var(--space-l) var(--space-l) var(--space-l) var(--space-xl);
}
.testimonial-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--space-xs);
  background-color: var(--color-accent-secondary);
}
.testimonial-card hr {
  width: min(11rem, 100%);
  border-color: var(--color-accent);
  margin-block: var(--space-xs) var(--space-2xs);
}

.testimonial-copy {
  position: relative;
  z-index: 1;
  max-width: 58ch;
  color: var(--color-text);
  font-size: var(--step-1);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
}

.testimonial-name {
  position: relative;
  z-index: 1;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.testimonial-role {
  position: relative;
  z-index: 1;
  color: var(--color-subtle);
  font-size: var(--step--1);
  line-height: 1.5;
}

.trust-bar {
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
  background-color: var(--color-surface-alt);
  padding-block: 0;
}

.trust-item {
  display: grid;
  align-content: center;
  gap: var(--space-3xs);
  padding-block: var(--space-s);
}
.trust-item + .trust-item {
  border-top: var(--border-width) solid var(--color-border);
}
.trust-item h2 {
  font-size: var(--step--1);
  letter-spacing: 0.05em;
}
.trust-item p {
  color: var(--color-subtle);
  font-size: var(--step--1);
}

.trust-item.partner-group {
  gap: var(--space-xs);
}
.trust-item.partner-group h2 {
  max-width: none;
}

.partner-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-xs);
}

.partner-logo {
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: min(100%, 10.5rem);
}

.partner-logo img {
  display: block;
  width: 100%;
  max-height: 2.75rem;
  object-fit: contain;
  opacity: 0.82;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  transition: filter var(--duration-hover) var(--ease-standard), opacity var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-heavy);
}

.partner-logo:hover img {
  opacity: 0.96;
  filter: grayscale(0.35);
  transform: translate3d(0, var(--motion-lift), 0);
}

@media (max-width: 47.99rem) {
  .trust-grid {
    row-gap: 0;
  }
  .trust-item {
    padding-block: var(--space-s);
  }
}
@media (min-width: 48rem) {
  .trust-grid > .trust-item:not(.partner-group) {
    grid-column: span 4;
  }
  .trust-item {
    border-right: var(--border-width) solid var(--color-border);
  }
  .trust-item + .trust-item {
    border-top: 0;
  }
  .trust-item:nth-child(3), .trust-item.partner-group {
    border-right: 0;
  }
  .trust-item.partner-group {
    grid-column: span 12;
    border-top: var(--border-width) solid var(--color-border);
  }
}
@media (min-width: 64rem) {
  .trust-grid > .trust-item:not(.partner-group) {
    grid-column: span 2;
  }
  .trust-item {
    border-right: var(--border-width) solid var(--color-border);
    padding-block: var(--space-xs);
  }
  .trust-item h2,
  .trust-item p {
    white-space: nowrap;
  }
  .trust-item:nth-child(3) {
    border-right: var(--border-width) solid var(--color-border);
  }
  .trust-item:last-child {
    border-right: 0;
  }
  .trust-item.partner-group {
    grid-column: span 6;
    border-top: 0;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
  }
  .trust-item.partner-group h2 {
    max-width: none;
  }
  .partner-logo-row {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    align-items: end;
    gap: var(--space-2xs);
  }
  .partner-logo {
    width: 10rem;
  }
}
body.about #hero .hero-media img,
body.about #hero .hero-media video {
  object-position: center -150px;
}
@media (max-width: 47.99rem) {
  body.about #hero .hero-media img,
  body.about #hero .hero-media video {
    object-position: center center;
  }
}
@media (max-width: 47.99rem) {
  body.about #hero h1 {
    max-width: 10ch;
  }
}
body.about .history-copy {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  max-width: 56rem;
}
body.about .innovation-copy {
  display: grid;
  gap: var(--space-xs);
  max-width: var(--measure);
}
body.about .innovation-detail {
  display: grid;
  gap: var(--space-xs);
}
body.about .innovation-detail picture {
  display: block;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
}
body.about .innovation-detail-image {
  width: 100%;
  height: auto;
}
body.about .innovation-detail figcaption {
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}
body.about .history-media-pair,
body.about .about-history > .image-placeholder {
  align-self: stretch;
}
body.about .history-media-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
}
body.about .history-media-pair figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
}
body.about .history-media-pair picture {
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16/9;
}
body.about .history-media-pair picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.about .history-media-pair figcaption {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-xs);
  border-top: var(--border-width) solid var(--color-border-soft);
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.4;
}
body.about .history-media-pair figcaption span {
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}
body.about .editorial-media {
  aspect-ratio: var(--media-aspect-ratio, 4/3);
  min-height: 0;
  border-color: var(--color-border-soft);
  background-color: var(--color-surface-placeholder-soft);
}
body.about .editorial-media span {
  background-color: var(--color-surface-glass);
}
body.about .why-call-copy {
  display: grid;
  align-content: start;
  gap: var(--space-s);
}
body.about .facts-layout {
  align-items: center;
}
body.about .partner-item {
  display: grid;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m);
}
body.about .partner-item .logo-image {
  width: 100%;
  --logo-max-height: 5rem;
  opacity: 1;
  filter: none;
}
body.about .partner-item .logo-image[alt=Sika] {
  --logo-max-height: 4rem;
}
body.about .partner-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
body.about .partner-product-lines {
  max-width: 32rem;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}
@media (min-width: 48rem) {
  body.about .why-call-layout > * {
    grid-column: span 6;
  }
  body.about .why-call-copy {
    grid-column: 7/-1;
  }
  body.about .facts-layout > .facts-list {
    grid-column: 1/-1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
  }
  body.about .innovation-layout > .innovation-copy {
    grid-column: 1/span 6;
  }
  body.about .innovation-layout > .innovation-detail {
    grid-column: 7/-1;
  }
  body.about .partners-layout > :first-child {
    grid-column: 1/span 5;
  }
  body.about .partners-layout > .partner-grid {
    grid-column: 6/-1;
  }
  body.about .partner-grid > .partner-item {
    grid-column: 1/-1;
  }
  body.about .about-history {
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  body.about .history-copy {
    grid-column: 1/-1;
    grid-row: 1;
    max-width: none;
  }
  body.about .history-media-pair,
  body.about .about-history > .image-placeholder {
    grid-column: 1/-1;
    grid-row: 2;
    align-self: stretch;
  }
  body.about .history-media-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.about .history-media-pair picture {
    height: 100%;
    aspect-ratio: auto;
  }
}
@media (min-width: 64rem) {
  body.about .partner-item {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

body.contact #hero h1 {
  max-width: min(100%, 18ch);
}
body.contact .contact-layout {
  align-items: start;
}
body.contact .contact-layout > div {
  gap: var(--space-l);
}
body.contact .contact-method-list {
  display: grid;
  gap: var(--space-s);
}
body.contact .contact-method {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-s);
  border-top: var(--border-width) solid var(--color-border);
}
body.contact .contact-method address {
  font-style: normal;
}
body.contact .contact-method:last-child {
  border-bottom: var(--border-width) solid var(--color-border);
}
body.contact .direct-callout {
  width: fit-content;
  color: var(--color-text);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.1;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}
body.contact .direct-detail {
  width: fit-content;
  color: var(--color-text);
  font-size: var(--step-1);
  font-weight: 600;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}
body.contact .checklist-notes {
  display: grid;
  gap: var(--space-s);
}
body.contact .cf-turnstile {
  min-inline-size: 0;
  inline-size: 100%;
}
body.contact .form-submit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2xs);
  max-width: 20rem;
  margin-inline-start: auto;
  margin-inline-end: 0;
}
body.contact .form-submit .form-note {
  text-align: right;
}
@media (min-width: 48rem) {
  body.contact .contact-layout > :first-child {
    grid-column: span 6;
  }
  body.contact .contact-layout > :last-child {
    grid-column: span 6;
  }
}

body.home #hero {
  --heading-color: var(--color-paper);
  color: var(--color-accent-contrast);
}
body.home #hero h1 {
  max-width: min(100%, 14ch);
}
body.home #hero .hero-media::after {
  mix-blend-mode: multiply;
  background: linear-gradient(25deg, var(--color-scrim-strong) 0%, var(--color-scrim-heavy) 35%, var(--color-scrim-subtle) 50%, transparent 60%), linear-gradient(180deg, var(--color-scrim-whisper) 0%, transparent 54%);
}
body.home #hero > .l-container {
  min-height: clamp(28rem, 72vh, 44rem);
  align-items: end;
}
body.home #hero .l-wrapper {
  display: flex;
  flex-direction: column;
}
body.home #hero .intro-text {
  max-width: 33ch;
  color: var(--color-text-contrast-soft);
}
body.home #hero .button.is-secondary {
  border-color: var(--color-border-contrast);
  color: var(--color-accent-contrast);
}
body.home #hero .button.is-secondary:hover {
  border-color: var(--color-border-contrast-strong);
  background-color: var(--color-border-contrast-subtle);
}
body.home #hero .l-wrapper > p:last-child {
  color: var(--color-text-contrast-muted);
  font-size: var(--step--1);
}
@media (max-width: 47.99rem) {
  body.home #hero > .l-container {
    min-height: 34rem;
  }
}
body.home .intro-copy {
  display: grid;
  gap: var(--space-s);
  max-width: 48rem;
}
body.home .social-proof {
  border-bottom: var(--border-width) solid var(--color-border);
  padding-block: var(--space-xs);
  background-color: var(--color-accent-secondary-wash);
}
body.home .social-proof .strip {
  display: grid;
  min-width: 0;
  gap: var(--space-2xs);
}
body.home .social-proof h2 {
  min-width: 0;
  max-width: 34ch;
  font-size: var(--step--1);
  font-weight: 1000;
  letter-spacing: 0;
}
body.home .social-proof ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3xs) var(--space-xs);
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.4;
  list-style: none;
}
body.home .social-proof li {
  min-width: 0;
}
body.home .problem .eyebrow {
  color: var(--color-text-contrast-soft);
}
body.home .problem p {
  color: var(--color-text-contrast-soft);
}
body.home .problem p:last-child {
  color: var(--color-accent-contrast);
  font-weight: 700;
}
body.home .process {
  padding-block: var(--section-space);
}
body.home .process .process-content {
  align-items: start;
}
body.home .process .process-list {
  width: 100%;
  max-width: 46rem;
  padding-top: var(--space-xs);
}
body.home .process .process-list h3 {
  max-width: 20ch;
}
body.home .process .process-list p {
  max-width: 32ch;
}
body.home .industry-thumbnail {
  overflow: hidden;
  width: 100%;
  margin: 0 0 var(--space-2xs);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-soft);
  aspect-ratio: 16/10;
}
body.home .is-equal-triptych {
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-s);
}
body.home .is-equal-triptych > div,
body.home .is-equal-triptych > article {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  min-width: 0;
  padding: 0;
  border: 0;
}
body.home .is-equal-triptych .industry-thumbnail, body.home .is-equal-triptych.project-list .project-card > picture {
  aspect-ratio: 4/3;
  margin: 0;
}
body.home .industry-thumbnail picture,
body.home .industry-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
}
body.home .industry-thumbnail img {
  object-fit: cover;
}
body.home .project-list .project-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  transition: none;
}
body.home .project-list .project-card > picture {
  height: auto;
  aspect-ratio: 16/10;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-sm);
}
body.home .project-list .project-card > div:last-child {
  gap: var(--space-xs);
  padding: var(--space-s) 0 0;
}
body.home .risk h2 {
  max-width: 25ch;
}
body.home .risk p {
  color: var(--color-text-contrast-soft);
}
body.home .capability-list {
  display: grid;
  gap: var(--space-xs);
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-s);
}
body.home .capability-list ul {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.home .capability-list li {
  display: grid;
  border-bottom: var(--border-width) solid var(--color-border);
  padding-bottom: var(--space-xs);
}
body.home .capability-list span {
  color: var(--heading-color, var(--color-primary));
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
}
body.home .intro-video {
  align-self: center;
}
body.home .intro-video .section-actions {
  align-self: flex-end;
}
body.home .industries .section-actions,
body.home .project-index .section-actions {
  align-self: flex-end;
}
body.home .player-window {
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-dark);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 16/10;
}
body.home .player-window video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.home .reassurance-layout {
  align-items: center;
}
body.home .reassurance-closing {
  color: var(--color-text);
  font-weight: 700;
}
@media (min-width: 48rem) {
  body.home .problem > .l-container > *,
  body.home .risk-layout > * {
    grid-column: span 6;
  }
  body.home .intro-copy {
    grid-column: span 4;
  }
  body.home .intro-video {
    grid-column: span 8;
  }
  body.home .process-heading {
    grid-column: span 4;
  }
  body.home .process-list {
    grid-column: span 8;
  }
  body.home .process-list > div {
    grid-column: span 4;
  }
  body.home .project-list > article {
    grid-column: span 4;
  }
  body.home .project-list {
    align-items: stretch;
  }
  body.home .reassurance-layout > * {
    grid-column: span 6;
  }
  body.home .process .process-content {
    align-items: start;
  }
  body.home .process .process-heading {
    max-width: 28rem;
  }
  body.home .process .process-list {
    justify-self: end;
    max-width: none;
    padding-top: 0;
  }
  body.home .process .process-list h3,
  body.home .process .process-list p {
    max-width: min(100%, 34ch);
  }
  body.home .social-proof .strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-l);
  }
  body.home .social-proof ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  body.home .social-proof h2 {
    max-width: 48ch;
  }
  body.home .social-proof li + li::before {
    content: "|";
    padding-inline-end: var(--space-xs);
    color: var(--color-border-strong);
  }
  body.home .intro-layout {
    align-items: center;
  }
  body.home .intro-copy {
    max-width: 34rem;
  }
}

body.industries #hero h1 {
  max-width: min(100%, 23ch);
}
body.industries .detail {
  align-items: start;
}
body.industries .intro {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}
body.industries .detail > picture,
body.industries .detail > .image-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-sm);
}
body.industries .detail > picture img,
body.industries .detail > .image-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.industries .additional .features > div > picture {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
body.industries .additional .features > div > picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.industries .additional .features.is-equal-triptych {
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-s);
}
body.industries .additional .features.is-equal-triptych > div {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  min-width: 0;
  padding: 0;
  border: 0;
}
body.industries .additional .features.is-equal-triptych > div > picture {
  aspect-ratio: 4/3;
  margin: 0;
}
body.industries .editorial-media {
  aspect-ratio: var(--media-aspect-ratio, 4/3);
  min-height: 0;
  border-color: var(--color-border-soft);
  background-color: var(--color-surface-placeholder-soft);
}
body.industries .editorial-media span {
  background-color: var(--color-surface-glass);
}
body.industries .support {
  align-items: start;
  padding-block: var(--space-s);
  border-top: var(--border-width) solid var(--color-border);
}
body.industries .support > div {
  display: grid;
  gap: var(--space-xs);
}
body.industries .support .meta-stack li {
  grid-template-columns: 1fr;
  align-items: start;
}
body.industries .clients {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}
body.industries .client-roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-2xs);
  padding-left: 0;
  list-style: none;
}
body.industries .client-roster[hidden] {
  display: none;
}
body.industries .client-roster li {
  min-width: 0;
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-glass);
  padding: var(--space-2xs) var(--space-xs);
  color: var(--color-text);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.35;
}
body.industries .client-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: var(--space-2xs);
}
body.industries .client-logos[hidden] {
  display: none;
}
body.industries .client-logo {
  display: grid;
  place-items: center;
  min-height: 5.25rem;
  margin: 0;
  padding: var(--space-xs);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background-color: var(--color-paper);
}
body.industries .client-logo img {
  display: block;
  width: auto;
  max-width: min(100%, 10.5rem);
  max-height: 3rem;
  object-fit: contain;
  opacity: 0.88;
  filter: grayscale(1) sepia(1) hue-rotate(195deg) saturate(0.3) brightness(0.82) contrast(1.15);
}
body.industries .client-logo.is-inverted-source img {
  filter: invert(1) grayscale(1) sepia(1) hue-rotate(195deg) saturate(0.3) brightness(0.82) contrast(1.15);
}
body.industries .client-logo.is-undimmed-source img {
  opacity: 0.95;
  filter: grayscale(1) sepia(1) hue-rotate(195deg) saturate(0.3) brightness(0.82) contrast(1.15);
}
body.industries .client-logo.is-high-contrast-source img {
  opacity: 1;
  filter: grayscale(1) brightness(0.55) contrast(1.35);
}
@media (min-width: 48rem) {
  body.industries .detail > .intro {
    grid-column: 1/span 6;
    grid-row: 1;
  }
  body.industries .detail > picture,
  body.industries .detail > .image-placeholder {
    grid-column: 7/-1;
    grid-row: 1/3;
  }
  body.industries .detail > .support {
    grid-column: 1/span 6;
    grid-row: 2;
    align-self: start;
  }
  body.industries .detail > .clients {
    grid-column: 1/-1;
  }
  body.industries .support > div {
    grid-column: span 6;
  }
}

body.projects .project-list {
  min-width: 0;
}
body.projects .project-item {
  position: relative;
  min-width: 0;
  display: grid;
  gap: var(--space-xl);
  padding: var(--space-l);
}
body.projects .project-item:not(.featured-project-item) {
  align-content: start;
}
body.projects .project-media-figure {
  display: grid;
  align-self: start;
  gap: var(--space-2xs);
  min-width: 0;
  margin: 0;
}
body.projects .project-media-figure > picture,
body.projects .project-media-figure > .image-placeholder {
  align-self: start;
}
body.projects .project-media-figure > picture {
  display: block;
  width: 100%;
  aspect-ratio: var(--media-aspect-ratio, 4/3);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-hover) var(--ease-standard), box-shadow var(--duration-hover) var(--ease-standard);
}
body.projects .project-media-figure > picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-reveal) var(--ease-heavy);
}
body.projects .project-media {
  aspect-ratio: var(--media-aspect-ratio, 4/3);
  min-height: 0;
  border-color: var(--color-border-soft);
  background-color: var(--color-surface-placeholder-soft);
}
body.projects .project-media span {
  background-color: var(--color-surface-glass);
}
body.projects .project-item-content {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-m) 0;
}
body.projects .project-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-xs);
  margin: 0;
  color: var(--color-subtle);
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 1000;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
body.projects .project-media-figure .project-meta-line {
  gap: var(--space-3xs) var(--space-xs);
}
body.projects .project-meta-line span + span::before {
  content: "·";
  margin-inline-end: var(--space-xs);
  color: var(--color-border-strong);
}
body.projects .project-meta-label {
  color: var(--color-subtle);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 1000;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}
body.projects .project-card-meta,
body.projects .project-meta-grid,
body.projects .project-meta-grid > div {
  display: grid;
  gap: var(--space-3xs);
}
body.projects .project-card-meta {
  gap: var(--space-s);
}
body.projects .project-meta-grid {
  gap: var(--space-s);
}
body.projects .project-meta-grid > div {
  padding-top: var(--space-xs);
  border-top: var(--border-width) solid var(--color-border);
}
body.projects .project-meta-grid > div > p:last-child {
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}
body.projects .featured-project-item {
  grid-column: 1/-1;
}
body.projects .featured-project-item h2 {
  font-size: var(--step-2);
  overflow-wrap: anywhere;
}
body.projects .featured-project-details {
  display: grid;
  gap: var(--space-s);
}
body.projects .featured-project-details > div {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding-top: var(--space-l);
  border-top: var(--border-width) solid var(--color-border);
}
body.projects .featured-project-details ul {
  display: grid;
  gap: var(--space-3xs);
  list-style: none;
  padding-left: 0;
  color: var(--color-muted);
  font-size: var(--step--1);
}
body.projects .featured-project-details li,
body.projects .featured-project-details div > p:last-child {
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}
body.projects .project-item[data-project-gallery]:hover, body.projects .project-item[data-project-gallery]:focus-within {
  border-color: var(--color-border-strong);
  transform: translate3d(0, var(--motion-lift), 0);
}
body.projects .project-item[data-project-gallery]:hover .project-media-figure > picture, body.projects .project-item[data-project-gallery]:focus-within .project-media-figure > picture {
  border-color: var(--color-border-strong);
  box-shadow: 0 0.875rem 1.75rem var(--color-shadow-button);
}
body.projects .project-item[data-project-gallery]:hover .project-media-figure > picture img, body.projects .project-item[data-project-gallery]:focus-within .project-media-figure > picture img {
  transform: scale(1.02);
}
body.projects .project-card-gallery-link {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-surface);
  text-decoration: none;
}
body.projects .project-card-gallery-link span {
  position: absolute;
  top: var(--space-l);
  left: var(--space-xs);
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--border-width) solid var(--color-surface);
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-dark);
  box-shadow: var(--shadow-sm);
  color: inherit;
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 1000;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-heavy);
}
body.projects .project-card-gallery-link:hover span, body.projects .project-card-gallery-link:focus-visible span {
  background-color: var(--color-accent);
  transform: translate3d(0, var(--motion-lift), 0);
}
body.projects .project-card-gallery-link:focus-visible {
  border-radius: var(--radius-sm);
  box-shadow: inset var(--focus-ring);
  outline: 0;
}
body.projects .project-card-gallery-link[hidden] {
  display: none;
}
body.projects .project-item:not(.featured-project-item) .project-card-gallery-link span {
  left: calc(var(--space-l) + var(--space-xs));
}
body.projects .pswp__caption {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--space-l) var(--page-inset) var(--space-s);
  background: linear-gradient(to top, color-mix(in srgb, var(--color-ink) 78%, transparent), transparent);
  color: var(--color-surface);
  font-size: var(--step--1);
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}
body.projects .pswp__caption[hidden] {
  display: none;
}
@media (min-width: 48rem) {
  body.projects .project-list {
    align-items: stretch;
  }
  body.projects .project-list > .project-item:not(.featured-project-item) {
    grid-column: span 6;
    height: 100%;
  }
  body.projects .project-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.projects .featured-project-item > .project-media-figure {
    grid-column: 1/span 6;
  }
  body.projects .featured-project-item > .project-item-content {
    grid-column: 7/-1;
  }
  body.projects .featured-project-item {
    align-items: start;
  }
}
@media (min-width: 64rem) {
  body.projects .featured-project-item h2 {
    font-size: var(--step-3);
  }
  body.projects .featured-project-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.services #hero .hero-media img {
  transform: scaleX(-1);
}
body.services #hero h1 {
  max-width: min(100%, 20ch);
}
body.services .material-partners-overview {
  align-items: center;
}
body.services .material-partners-overview > div {
  display: grid;
  gap: var(--space-s);
}
@media (min-width: 48rem) {
  body.services .material-partners-overview > div:first-child {
    grid-column: span 5;
  }
}
body.services .material-partner-list {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
}
body.services .material-partner-list .logo-image {
  max-width: min(14.75rem, 100%);
  --logo-max-height: 4rem;
}
body.services .material-partner-list .logo-image[alt=Sika] {
  --logo-max-height: 4rem;
}
@media (min-width: 48rem) {
  body.services .material-partner-list {
    grid-column: span 7;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--space-m);
  }
}
body.services .material-partner-card {
  display: grid;
  width: 100%;
  min-height: 6.5rem;
  place-items: center;
  margin: 0;
  padding: var(--space-s);
  background-color: var(--color-paper-50);
}
@media (min-width: 48rem) {
  body.services .material-partner-card {
    min-height: 7.5rem;
  }
}
body.services .partner-wordmark {
  width: fit-content;
  border-top: var(--border-width) solid var(--color-border-strong);
  padding-top: var(--space-2xs);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--step-0);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
body.services .material-partners .material-partner-list .logo-image {
  opacity: 1;
  filter: none;
  mix-blend-mode: multiply;
}
body.services .service-detail > picture,
body.services .service-detail > .image-placeholder {
  align-self: stretch;
}
body.services .service-detail > picture {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-hover) var(--ease-standard), box-shadow var(--duration-hover) var(--ease-standard);
}
body.services .service-detail > picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-reveal) var(--ease-heavy);
}
@media (min-width: 48rem) {
  body.services .service-detail {
    grid-template-rows: auto 1fr;
  }
  body.services .service-detail .service-intro {
    grid-column: 1/span 5;
    grid-row: 1;
  }
  body.services .service-detail > picture,
  body.services .service-detail > .image-placeholder {
    grid-column: 6/-1;
    grid-row: 1/3;
  }
  body.services .service-detail .service-support {
    grid-column: 1/span 5;
    grid-row: 2;
  }
}
body.services .prep {
  --section-space: var(--space-xl);
}
body.services .prep-proof-layout {
  align-items: start;
}
body.services .stakes-layout {
  align-items: start;
}
body.services .stakes-layout > div {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}
@media (min-width: 48rem) {
  body.services .stakes-layout > div:first-child {
    grid-column: span 5;
  }
  body.services .stakes-layout > div:last-child {
    grid-column: span 7;
  }
}
body.services .prep-proof-images {
  gap: var(--space-xs);
}
@media (min-width: 48rem) {
  body.services .prep-proof-images {
    grid-column: span 6;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 48rem) {
  body.services .prep-testimonial {
    grid-column: span 6;
  }
}
body.services .prep-proof-image {
  display: grid;
  gap: var(--space-3xs);
  margin: 0;
}
@media (min-width: 48rem) {
  body.services .prep-proof-image {
    grid-column: span 6;
  }
}
body.services .prep-proof-image > picture,
body.services .prep-proof-image > img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
body.services .prep-proof-image > picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
body.services .prep-proof-image figcaption {
  color: var(--color-subtle);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.services .prep-capabilities {
  padding-block-start: var(--space-s);
}
body.services .prep-capabilities h3 {
  font-family: var(--font-heading);
  font-size: var(--step-0);
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}
body.services .prep-capabilities p {
  max-width: 32ch;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.45;
}
body.services .prep-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  color: var(--color-accent-secondary-soft);
}
body.services .prep-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
body.services .prep-media-grid {
  min-width: 0;
}
@media (min-width: 36rem) {
  body.services .prep-media-grid > .prep-media {
    grid-column: span 6;
  }
  body.services .prep-media-grid > .prep-media:first-child {
    grid-column: 1/-1;
  }
}
@media (min-width: 64rem) {
  body.services .prep-media-grid > .prep-media {
    grid-column: span 3;
  }
  body.services .prep-media-grid > .prep-media:first-child {
    grid-column: span 6;
    grid-row: span 2;
  }
}
body.services .prep-media {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  aspect-ratio: 4/3;
}
body.services .prep-media > picture,
body.services .prep-media > .editorial-media-image,
body.services .prep-media > video {
  display: block;
  width: 100%;
  height: 100%;
}
body.services .prep-media img,
body.services .prep-media > .editorial-media-image img,
body.services .prep-media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 64rem) {
  body.services .prep-media:first-child {
    height: 100%;
    aspect-ratio: auto;
  }
}
body.services .prep .service-intro {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  max-width: 48rem;
  margin-block-end: var(--space-s);
}
body.services .prep .service-intro .service-intro-heading,
body.services .prep .service-intro .service-intro-copy {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}
@media (min-width: 48rem) {
  body.services .prep .service-intro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    max-width: none;
    gap: var(--grid-gutter);
  }
  body.services .prep .service-intro .service-intro-copy {
    padding-block-start: var(--space-s);
  }
}
body.services .editorial-media {
  aspect-ratio: var(--media-aspect-ratio, 4/3);
  min-height: 0;
  border-color: var(--color-border-soft);
  background-color: var(--color-surface-placeholder-soft);
}
body.services .editorial-media span {
  background-color: var(--color-surface-glass);
}
body.services .service-support {
  display: grid;
  gap: var(--space-m);
  align-self: start;
  padding-block: var(--space-s);
  border-top: var(--border-width) solid var(--color-border);
}
body.services .service-support > div {
  display: grid;
  gap: var(--space-xs);
}
body.services .service-support .meta-stack li {
  display: block;
}
@media (min-width: 48rem) {
  body.services .service-support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
body.services .service-photo-reveal {
  --section-space: var(--space-xl);
}
body.services .service-photo-reveal > .section-media img {
  object-position: 62% center;
}
body.services .service-photo-reveal .service-support {
  padding-block-end: 0;
}
@media (min-width: 48rem) {
  body.services .service-photo-reveal .service-intro,
  body.services .service-photo-reveal .service-support {
    grid-column: 1/span 5;
  }
  body.services .service-photo-reveal .service-detail > picture,
  body.services .service-photo-reveal .service-detail > .image-placeholder {
    grid-column: 6/-1;
  }
  body.services .service-photo-reveal .service-support {
    grid-template-columns: 1fr;
  }
}
body.services .additional .proof-list > div .tag {
  font-weight: 1000;
}
body.services .additional .proof-list > div > picture {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}
body.services .additional .proof-list > div > picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.services .additional .proof-list.is-equal-triptych {
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-s);
}
body.services .additional .proof-list.is-equal-triptych > div {
  padding-left: 0;
  border-left: 0;
}
body.services .additional .proof-list.is-equal-triptych > div > picture {
  aspect-ratio: 4/3;
  margin-bottom: 0;
}

body.style-guide .prose-flow {
  display: grid;
  gap: var(--space-s);
}
body.style-guide .content-grid,
body.style-guide .demo-grid {
  display: grid;
  gap: var(--space-m);
}
body.style-guide .color-system-flow {
  display: grid;
  gap: var(--space-l);
}
body.style-guide .typography-specimens {
  display: grid;
  gap: var(--space-m);
}
body.style-guide .spacing-demo-grid {
  display: grid;
  gap: var(--space-m);
}
body.style-guide .grid-specimen {
  align-items: stretch;
}
body.style-guide .grid-specimen > div {
  grid-column: span 1;
  display: grid;
  place-items: center;
  min-height: var(--space-xl);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xs);
  background-color: var(--color-accent-secondary-wash);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--step--2);
}
body.style-guide .video-sample.is-background .l-wrapper {
  max-width: 44rem;
}
body.style-guide .image-text-samples {
  display: grid;
  gap: var(--space-l);
}
body.style-guide .image-text-sample {
  align-items: stretch;
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-s);
}
body.style-guide .image-text-media {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-muted);
}
body.style-guide .image-text-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.style-guide .image-text-copy {
  display: grid;
  align-content: center;
  gap: var(--space-xs);
  min-width: 0;
}
body.style-guide .image-text-copy h3,
body.style-guide .image-text-copy p {
  margin: 0;
}
body.style-guide .image-text-copy h3 {
  font-size: var(--step-1);
}
body.style-guide .image-text-copy > :last-child {
  color: var(--color-muted);
}
body.style-guide .image-text-triptych {
  align-items: stretch;
  gap: var(--grid-gutter);
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-s);
}
body.style-guide .image-text-triptych-item {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  min-width: 0;
}
body.style-guide .image-text-triptych-media {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-muted);
}
body.style-guide .image-text-triptych-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.style-guide .image-text-triptych-copy {
  display: grid;
  align-content: center;
  gap: var(--space-xs);
  min-width: 0;
}
body.style-guide .image-text-triptych-copy h3,
body.style-guide .image-text-triptych-copy p {
  margin: 0;
}
body.style-guide .image-text-triptych-copy h3 {
  font-size: var(--step-1);
}
body.style-guide .image-text-triptych-copy > :last-child {
  color: var(--color-muted);
}
body.style-guide .hero-sample-home .hero-media::after {
  mix-blend-mode: multiply;
  background: linear-gradient(25deg, var(--color-scrim-strong) 0%, var(--color-scrim-heavy) 35%, var(--color-scrim-subtle) 50%, transparent 60%), linear-gradient(180deg, var(--color-scrim-whisper) 0%, transparent 54%);
}
body.style-guide .hero-sample-home > .l-container {
  min-height: clamp(28rem, 72vh, 44rem);
  align-items: end;
}
body.style-guide .hero-sample-home .l-wrapper {
  display: flex;
  flex-direction: column;
}
body.style-guide .hero-sample-home .intro-text {
  max-width: 45ch;
  color: var(--color-text-contrast-soft);
}
body.style-guide .hero-sample-home .l-wrapper > p:last-child {
  color: var(--color-text-contrast-muted);
  font-size: var(--step--1);
}
body.style-guide .video-sample.is-player .heading-group {
  max-width: 60ch;
}
body.style-guide .video-sample.is-player .player-window {
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-dark);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 16/10;
}
body.style-guide .video-sample.is-player .player-window video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.style-guide .spacing-token-list {
  display: grid;
  gap: var(--space-2xs);
}
body.style-guide .shape-token-grid {
  display: grid;
  gap: var(--space-m);
}
body.style-guide .motion-demo-grid {
  display: grid;
  gap: var(--space-m);
}
body.style-guide .color-family-grid {
  display: grid;
  gap: var(--space-m);
}
body.style-guide .color-family-card,
body.style-guide .motion-demo-card,
body.style-guide .semantic-color-card,
body.style-guide .type-card {
  display: grid;
  gap: var(--space-m);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  padding: var(--space-m);
}
body.style-guide .intro,
body.style-guide .meta {
  display: grid;
  gap: var(--space-2xs);
  max-width: 60ch;
}
body.style-guide .meta code {
  width: fit-content;
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-glass);
  padding: var(--space-3xs) var(--space-2xs);
  color: var(--color-ink-700);
  font-size: var(--step--2);
}
body.style-guide .type-card > :last-child {
  margin-bottom: 0;
}
body.style-guide .type-card small {
  display: block;
  max-width: 56ch;
  color: var(--color-muted);
  line-height: 1.5;
}
body.style-guide .shape-token {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-s);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  padding: var(--space-s);
}
body.style-guide .shape-token code {
  display: inline-flex;
  width: fit-content;
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-glass);
  padding: var(--space-3xs) var(--space-2xs);
  color: var(--color-ink-700);
  font-size: var(--step--2);
}
body.style-guide .sample {
  width: 4rem;
  height: 2.75rem;
  border: var(--border-width) solid var(--color-border-strong);
  background-color: var(--color-surface-alt);
}
body.style-guide .sample.xs {
  border-radius: var(--radius-xs);
}
body.style-guide .sample.sm {
  border-radius: var(--radius-sm);
}
body.style-guide .sample.md {
  border-radius: var(--radius-md);
}
body.style-guide .sample.round {
  border-radius: var(--radius-round);
}
body.style-guide .spacing-demo-card {
  align-content: start;
}
body.style-guide .spacing-token {
  display: grid;
  gap: var(--space-xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  padding: var(--space-s);
}
body.style-guide .meta span {
  color: var(--color-muted);
  font-size: var(--step--1);
}
body.style-guide .track {
  min-height: 1rem;
  border-radius: var(--radius-xs);
  background: repeating-linear-gradient(90deg, var(--color-sample-grid-line) 0, var(--color-sample-grid-line) var(--border-width), transparent var(--border-width), transparent var(--space-s));
}
body.style-guide .track span {
  display: block;
  width: var(--sample-space);
  min-width: var(--border-width);
  height: 1rem;
  border-radius: var(--radius-xs);
  background-color: var(--color-accent-secondary);
}
body.style-guide .spacing-stack-example {
  display: grid;
  gap: var(--space-s);
}
body.style-guide .motion-token-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
body.style-guide .motion-token-list span {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-soft);
  padding: var(--space-3xs) var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--step--1);
}
body.style-guide .motion-reveal-sample {
  display: grid;
  gap: var(--space-2xs);
}
body.style-guide .motion-reveal-sample span {
  display: block;
  height: 0.875rem;
  border-radius: var(--radius-xs);
  background-color: var(--color-accent-secondary);
}
body.style-guide .motion-reveal-sample span:nth-child(2) {
  width: 74%;
  background-color: var(--color-accent);
}
body.style-guide .motion-reveal-sample span:nth-child(3) {
  width: 48%;
  background-color: var(--color-neutral-500);
}
body.style-guide .spacing-stack-example > div,
body.style-guide .spacing-exception-example > div,
body.style-guide .spacing-exception-example > p {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-soft);
  padding: var(--space-xs);
}
body.style-guide .spacing-exception-example > p {
  margin-top: var(--space-s);
  color: var(--color-muted);
  font-size: var(--step--1);
}
body.style-guide .color-ramp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-s);
}
body.style-guide .color-swatch {
  display: grid;
  align-content: end;
  min-height: 8.5rem;
  gap: var(--space-3xs);
  border: var(--border-width) solid var(--color-swatch-border);
  border-radius: var(--radius-sm);
  background-color: var(--swatch-color);
  padding: var(--space-xs);
  color: var(--color-text);
}
body.style-guide .color-swatch span,
body.style-guide .color-swatch code,
body.style-guide .semantic-token code {
  width: fit-content;
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-glass);
  padding: var(--space-3xs) var(--space-2xs);
  color: var(--color-ink-700);
}
body.style-guide .color-swatch span {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
}
body.style-guide .color-swatch code,
body.style-guide .semantic-token code {
  font-size: var(--step--2);
}
body.style-guide .semantic-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-s);
}
body.style-guide .section-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-s);
}
body.style-guide .section-theme-sample {
  --section-background: var(--color-paper-500);
  --section-text: var(--color-ink-500);
  --section-muted: var(--color-section-muted);
  --section-subtle: var(--color-section-muted);
  --section-heading: var(--color-primary);
  --section-border: var(--color-ink-200);
  --section-border-strong: var(--color-ink-300);
  --section-surface: var(--color-paper-50);
  --section-surface-soft: var(--color-paper-100);
  --section-accent: var(--color-secondary-500);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-accent-secondary: var(--color-primary-500);
  --section-accent-secondary-hover: var(--color-primary-600);
  --section-tag-background: var(--color-tag-base-background);
  --section-tag-border: var(--color-tag-base-border);
  --section-tag-text: var(--color-tag-base-text);
  --heading-color: var(--section-heading);
  --color-text: var(--section-text);
  --color-muted: var(--section-muted);
  --color-subtle: var(--section-subtle);
  --color-border: var(--section-border);
  --color-border-strong: var(--section-border-strong);
  --color-surface: var(--section-surface);
  --color-surface-soft: var(--section-surface-soft);
  --color-accent: var(--section-accent);
  --color-accent-hover: var(--section-accent-hover);
  --color-accent-contrast: var(--section-accent-contrast);
  --color-accent-secondary: var(--section-accent-secondary);
  --color-accent-secondary-hover: var(--section-accent-secondary-hover);
  --color-tag-background: var(--section-tag-background);
  --color-tag-border: var(--section-tag-border);
  --color-tag-text: var(--section-tag-text);
  display: grid;
  position: relative;
  z-index: 0;
  align-content: start;
  gap: var(--space-s);
  overflow: hidden;
  min-height: 100%;
  border: var(--border-width) solid var(--section-border);
  border-radius: var(--radius-sm);
  background-color: var(--section-background);
  padding: var(--space-s);
  color: var(--section-text);
}
body.style-guide .section-theme-sample > :not(.section-media) {
  position: relative;
  z-index: 1;
}
body.style-guide .section-theme-sample .section-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: none;
  overflow: hidden;
}
body.style-guide .section-theme-sample .section-media::after {
  position: absolute;
  inset: 0;
  background: var(--section-photo-scrim, transparent);
  content: "";
}
body.style-guide .section-theme-sample .section-media img,
body.style-guide .section-theme-sample .section-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.style-guide .section-theme-sample.is-subtle {
  --section-background: var(--color-paper-100);
  --section-surface: var(--color-paper-50);
}
body.style-guide .section-theme-sample.is-raised {
  --section-background: var(--color-paper-200);
  --section-surface: var(--color-paper-50);
}
body.style-guide .section-theme-sample.is-brand,
body.style-guide .section-theme-sample.is-brand-dark,
body.style-guide .section-theme-sample.is-accent,
body.style-guide .section-theme-sample.is-photo-dark,
body.style-guide .section-theme-sample.is-photo-brand-dark,
body.style-guide .section-theme-sample.is-video-brand-dark,
body.style-guide .section-theme-sample.is-photo-brand,
body.style-guide .section-theme-sample.is-photo-reveal-brand,
body.style-guide .section-theme-sample.is-photo-reveal-dark {
  --section-text: var(--color-text-contrast-strong);
  --section-muted: var(--color-text-contrast-strong);
  --section-subtle: var(--color-text-contrast-strong);
  --section-heading: var(--color-text-contrast-strong);
  --section-border: var(--color-section-contrast-border);
  --section-border-strong: var(--color-section-contrast-border-strong);
  --section-surface: var(--color-section-contrast-surface);
  --section-surface-soft: var(--color-section-contrast-surface-soft);
  --section-accent-secondary: white;
  --section-accent-secondary-hover: white;
  --section-tag-background: var(--color-section-contrast-tag-background);
  --section-tag-border: var(--color-section-contrast-tag-border);
  --section-tag-text: white;
}
body.style-guide .section-theme-sample.is-photo-dark,
body.style-guide .section-theme-sample.is-photo-brand-dark,
body.style-guide .section-theme-sample.is-video-brand-dark,
body.style-guide .section-theme-sample.is-photo-light,
body.style-guide .section-theme-sample.is-photo-brand,
body.style-guide .section-theme-sample.is-photo-reveal-brand,
body.style-guide .section-theme-sample.is-photo-reveal-dark,
body.style-guide .section-theme-sample.is-photo-reveal-light {
  min-height: 24rem;
}
body.style-guide .section-theme-sample.is-photo-dark .section-media,
body.style-guide .section-theme-sample.is-photo-brand-dark .section-media,
body.style-guide .section-theme-sample.is-video-brand-dark .section-media,
body.style-guide .section-theme-sample.is-photo-light .section-media,
body.style-guide .section-theme-sample.is-photo-brand .section-media,
body.style-guide .section-theme-sample.is-photo-reveal-brand .section-media,
body.style-guide .section-theme-sample.is-photo-reveal-dark .section-media,
body.style-guide .section-theme-sample.is-photo-reveal-light .section-media {
  display: block;
}
body.style-guide .section-theme-sample.is-brand {
  --section-background: var(--color-primary);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
}
body.style-guide .section-theme-sample.is-brand-dark {
  --section-background: var(--color-primary-700);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
}
body.style-guide .section-theme-sample.is-photo-dark {
  --section-background: var(--color-primary-700);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-photo-scrim: var(--scrim-photo-dark);
}
body.style-guide .section-theme-sample.is-photo-brand-dark {
  --section-background: var(--color-primary-700);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-photo-scrim: var(--scrim-photo-brand-dark);
}
body.style-guide .section-theme-sample.is-video-brand-dark {
  --section-background: var(--color-primary-700);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-photo-scrim: var(--scrim-video-brand-dark);
}
body.style-guide .section-theme-sample.is-photo-light {
  --section-background: var(--color-paper-100);
  --section-surface: var(--color-section-photo-light-surface);
  --section-surface-soft: var(--color-section-photo-light-surface-soft);
  --section-photo-scrim: var(--scrim-photo-light);
}
body.style-guide .section-theme-sample.is-photo-brand {
  --section-background: var(--color-primary);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-photo-scrim: var(--scrim-photo-brand);
}
body.style-guide .section-theme-sample.is-photo-reveal-dark {
  --section-background: var(--color-primary-700);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-photo-scrim: var(--scrim-photo-reveal-dark);
}
body.style-guide .section-theme-sample.is-photo-reveal-brand {
  --section-background: var(--color-primary);
  --section-accent: var(--color-secondary);
  --section-accent-hover: var(--color-secondary-600);
  --section-accent-contrast: white;
  --section-photo-scrim: var(--scrim-photo-reveal-brand);
}
body.style-guide .section-theme-sample.is-photo-reveal-light {
  --section-background: var(--color-paper-100);
  --section-surface: var(--color-section-photo-light-surface);
  --section-surface-soft: var(--color-section-photo-light-surface-soft);
  --section-photo-scrim: var(--scrim-photo-reveal-light);
}
body.style-guide .section-theme-sample.is-accent {
  --section-background: var(--color-secondary);
  --section-text: white;
  --section-muted: var(--color-section-accent-text);
  --section-subtle: var(--color-section-accent-text);
  --section-heading: white;
  --section-accent: white;
  --section-accent-hover: var(--color-section-accent-hover-light);
  --section-accent-contrast: var(--color-secondary);
}
body.style-guide .section-theme-sample .sample-muted {
  color: var(--color-muted);
}
body.style-guide .theme-copy {
  display: grid;
  gap: var(--space-2xs);
}
body.style-guide .sample-surface {
  display: grid;
  gap: var(--space-2xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  padding: var(--space-xs);
}
body.style-guide .sample-surface p {
  color: var(--color-muted);
  font-size: var(--step--1);
}
body.style-guide .semantic-token {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-s);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-soft);
  padding: var(--space-s);
}
body.style-guide .swatch {
  width: 3rem;
  height: 3rem;
  border: var(--border-width) solid var(--color-shadow-button-hover);
  border-radius: var(--radius-sm);
  background-color: var(--swatch-color);
}
body.style-guide .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-s);
}
body.style-guide .demo-form {
  display: grid;
  gap: var(--space-s);
}
@media (min-width: 48rem) {
  body.style-guide .video-player-layout > :first-child {
    grid-column: span 8;
  }
  body.style-guide .video-player-layout > :last-child {
    grid-column: span 4;
  }
  body.style-guide .editorial-layout-sample > :first-child {
    grid-column: span 5;
  }
  body.style-guide .editorial-layout-sample > :last-child {
    grid-column: span 7;
  }
  body.style-guide .image-text-sample-media-first > .image-text-media {
    grid-column: span 5;
  }
  body.style-guide .image-text-sample-media-first > .image-text-copy {
    grid-column: span 7;
  }
  body.style-guide .image-text-sample-copy-first > .image-text-copy {
    grid-column: span 5;
  }
  body.style-guide .image-text-sample-copy-first > .image-text-media {
    grid-column: span 7;
  }
  body.style-guide .image-text-triptych > * {
    grid-column: span 4;
  }
  body.style-guide .content-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body.style-guide .demo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.style-guide .typography-specimens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.style-guide .spacing-demo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.style-guide .motion-demo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body.style-guide .spacing-token {
    grid-template-columns: minmax(12rem, 0.28fr) minmax(0, 1fr);
    align-items: center;
  }
  body.style-guide .shape-token-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}