/* branding/tokens/tokens.css */
/* =========================================================
   LOGOHOLIK SYSTEM TOKENS
   ========================================================= */

:root {

  /* =========================================================
     CORE COLORS
     ========================================================= */

  --signal: #4E88DD;

  --mineral: #74747A;
  --mineral-soft: #8D8D92;
  --mineral-deep: #68686D;
  --mineral-deep-surface: #3A3A42;

  --stone: #C9C9CC;

  --surface: #E9E9EC;
  --surface-darker: #B5B5B8;
  --surface-soft: #F3F3F5;

  --white: #FFFFFF;

  --obsidian-soft: #2A2A30;
  --obsidian-deep: #17161B;

  --black: #000000;


  /* =========================================================
     SEMANTIC COLORS
     ========================================================= */

  --bg-page: var(--surface);

  --bg-surface-darker: var(--surface-darker);

  --bg-mineral-soft: var(--mineral-soft);

  --bg-surface: var(--white);

  --bg-dark: var(--obsidian-deep);

  --bg-mineral-deep: var(--mineral-deep-surface);

  --bg-signal: var(--signal);

  --text-primary: var(--obsidian-deep);

  --text-secondary: var(--mineral);

  --text-secondary-strong: var(--mineral-deep);

  --text-muted: var(--mineral-soft);

  --text-inverse: var(--white);

  --text-inverse-strong: rgba(255, 255, 255, 0.9);

  --text-inverse-muted: rgba(255, 255, 255, 0.52);

  --accent-primary: var(--signal);

  --border-soft-color: rgba(23, 22, 27, 0.08);

  --border-strong-color: rgba(23, 22, 27, 0.16);

  --border-inverse-color: rgba(255, 255, 255, 0.12);

  --divider-light: rgba(23, 22, 27, 0.16);

  --divider-dark: rgba(255, 255, 255, 0.08);


  /* =========================================================
     SURFACES — CARDS, DIVIDERS, STROKES
     Cards are borderless by default. Dividers for editorial
     list separation. Strokes for controls, forms, overlays.
     ========================================================= */

  --surface-card-light: transparent;

  --surface-card-light-hover: rgba(23, 22, 27, 0.04);

  --surface-card-dark: transparent;

  --surface-card-dark-hover: rgba(255, 255, 255, 0.045);

  --surface-dark-subtle: rgba(255, 255, 255, 0.04);

  --control-surface-dark: rgba(255, 255, 255, 0.08);

  --control-surface-dark-hover: rgba(255, 255, 255, 0.12);

  --divider-subtle-light: var(--divider-light);

  --divider-subtle-dark: var(--divider-dark);

  --stroke-control-light: var(--border-soft-color);

  --stroke-overlay-dark: var(--border-inverse-color);

  --card-border: none;

  --card-shadow: none;


  /* =========================================================
     TYPOGRAPHY
     ========================================================= */

  --font-primary: "Radio Grotesk", Inter, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;

  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-base-plus: 1.0625rem; /* 17 */
  --text-lg: 1.125rem;    /* 18 */
  --text-lg-plus: 1.3125rem; /* 21 */
  --text-xl: 1.5rem;      /* 24 */
  --text-2md: 1.75rem;    /* 28 */
  --text-2xl: 2rem;       /* 32 */
  --text-3xl: 3rem;       /* 48 */
  --text-4xl: 4.5rem;     /* 72 */
  --text-5xl: 6rem;       /* 96 */

  --leading-tight: 0.94;
  --leading-heading: 1;

  --leading-snug: 1.12;
  --leading-reading: 1.28;

  --leading-base: 1.42;
  --leading-serif-body: 1.4;
  --leading-relaxed: 1.6;

  /* Optical tracking — follows rendered size, not heading level. See typography.md */
  --tracking-display: -0.04em;      /* 64px+ */
  --tracking-heading: -0.025em;     /* 28–39px (legacy alias value was -0.02em) */
  --tracking-subheading: -0.01em;   /* 20–27px */
  --tracking-body: 0em;             /* 16–19px */
  --tracking-small: 0.015em;        /* 14px and below */

  /* Legacy aliases — prefer optical tokens for new work */
  --tracking-hero: -0.03em;         /* 40–63px display band */
  --tracking-lead: var(--tracking-subheading);
  --tracking-serif-body: var(--tracking-subheading);
  --tracking-label: 0.1em;
  --tracking-kicker: 0.18em;


  
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;


  


  /* =========================================================
     SPACING
     ========================================================= */

  --space-0: 0;

  --space-1: 0.25rem;     /* 4 */
  --space-2: 0.5rem;      /* 8 */
  --space-3: 0.75rem;     /* 12 */
  --space-4: 1rem;        /* 16 */
  --space-5: 1.5rem;      /* 24 */
  --space-6: 2rem;        /* 32 */
  --space-7: 3rem;        /* 48 */
  --space-8: 4rem;        /* 64 */
  --space-9: 6rem;        /* 96 */
  --space-10: 8rem;       /* 128 */
  --space-11: 10rem;      /* 160 */
  --space-12: 12rem;      /* 192 */

  /* Editorial / hero extension (legacy rhythm) */
  --space-13: 16rem;      /* 256 */


  /* =========================================================
     SPACING — DENSE (0.25rem steps)
     Name = quarter-index: value = index × 0.25rem (--space-4-5 = 4.5 × 0.25rem).
     Do not mix with the legacy scale above: --space-11 is 160px,
     --space-11-0 is 44px. In clamp() the min argument must be the smaller value.
     ========================================================= */

  --space-0-5: 0.125rem;   /* 2 — qi 0.5 */
  --space-1-5: 0.375rem;   /* 6 — qi 1.5 */
  --space-2-5: 0.625rem;   /* 10 — qi 2.5 */
  --space-3-5: 0.875rem;   /* 14 — qi 3.5 */

  --space-4-5: 1.125rem;   /* 18 — qi 4.5 */
  --space-5-0: 1.25rem;    /* 20 — qi 5 */
  --space-6-5: 1.625rem;   /* 26 — qi 6.5 (= legacy --space-5 + 0.125rem) */
  --space-7-0: 1.75rem;    /* 28 — qi 7 */
  --space-7-5: 1.875rem;   /* 30 — qi 7.5 */
  --space-8-5: 2.125rem;   /* 34 — qi 8.5 */
  --space-9-0: 2.25rem;    /* 36 — qi 9 */
  --space-9-5: 2.375rem;   /* 38 — qi 9.5 */
  --space-10-0: 2.5rem;    /* 40 — qi 10 */
  --space-10-5: 2.625rem;  /* 42 — qi 10.5 */
  --space-11-0: 2.75rem;   /* 44 — qi 11 */
  --space-12-0: 3rem;      /* 48 — qi 12 (= legacy --space-7) */
  --space-13-0: 3.25rem;   /* 52 — qi 13 */
  --space-13-5: 3.375rem;  /* 54 — qi 13.5 */
  --space-14-0: 3.5rem;    /* 56 — qi 14 */
  --space-16-0: 4rem;      /* 64 — qi 16 (= legacy --space-8) */
  --space-18-0: 4.5rem;    /* 72 — qi 18 */
  --space-20-0: 5rem;      /* 80 — qi 20 */
  --space-22-0: 5.5rem;    /* 88 — qi 22 */
  --space-26-0: 6.5rem;    /* 104 — qi 26 */


  /* =========================================================
     RADIUS
     ========================================================= */

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Semantic radius — map roles to primitives; responsive steps below */

  --radius-kicker: var(--radius-pill);
  --radius-card: var(--radius-lg);
  --radius-card-compact: var(--radius-md);
  --radius-media-feature: var(--radius-xl);
  --radius-media-editorial: var(--radius-lg);
  --radius-icon-badge: var(--radius-pill);


  /* =========================================================
     BORDERS
     ========================================================= */

  --border-inverse: 2px solid rgba(255, 255, 255, 0.12);

  --border-glass: 2px solid rgba(255, 255, 255, 0.08);

  --border-interactive: 2px solid rgba(255, 255, 255, 0.26);

  --border-interactive-light: 2px solid rgba(23, 22, 27, 0.16);


  /* =========================================================
     ELEVATION
     ========================================================= */

  --shadow-sm:
    0 2px 8px rgba(23, 22, 27, 0.04);

  --shadow-md:
    0 12px 32px rgba(23, 22, 27, 0.08);


  /* =========================================================
     MOTION
     ========================================================= */

  --transition-fast:
    160ms ease;

  --transition-base:
    280ms cubic-bezier(0.22, 1, 0.36, 1);

  --transition-slow:
    480ms cubic-bezier(0.22, 1, 0.36, 1);

  --motion-shift-subtle: 3px;
  --motion-shift-link: 4px;
  --motion-shift-row: var(--space-1-5);

  --opacity-interactive-muted: 0.76;
  --opacity-interactive-subtle: 0.72;


  /* =========================================================
     LAYOUT
     ========================================================= */

  --container-sm: 720px;
  --container-md: 960px;
  --container-md-plus: 980px;
  --container-md-lg: 1120px;
  --container-lg: 1280px;
  --container-xl: 1440px;

  --copy-measure-md: 29.375rem; /* 470 — short editorial copy block */
  --copy-measure-sm: 23.5rem;   /* 376 — narrow editorial copy block */

  --page-gutter-wide:
    clamp(var(--space-4-5), 7.7vw, 6.9375rem);

  --section-padding-x:
    clamp(1.5rem, 4vw, 3rem);

  --section-padding-block:
    clamp(var(--space-9), 12vw, 11rem);

  --section-hero-padding-top:
    clamp(var(--space-11), 16vw, 15rem);

  --section-hero-padding-bottom:
    clamp(var(--space-22-0), 10vw, 9rem);

  --section-hero-padding-top-tablet: 9.25rem;

  --section-padding-block-mobile:
    clamp(var(--space-18-0), 13vw, var(--space-26-0));

  --section-archetype-padding-y:
    clamp(var(--space-16-0), 7vw, 6.25rem);

  --section-kicker-title-gap: var(--space-6);
  --section-kicker-bg: rgba(23, 22, 27, 0.1);

  --insights-atmosphere-opacity: 0.08;

  --insight-list-stack-gap-mobile: var(--space-13-5);

  --insight-list-pill-gap-mobile: var(--space-12-0);

  --section-cta-padding-top:
    clamp(var(--space-9), 10vw, 9rem);

  --library-catalog-padding-top:
    clamp(var(--space-12-0), 5vw, var(--space-18-0));

  --library-catalog-padding-bottom:
    clamp(calc(var(--space-8) + var(--space-4)), 9vw, var(--space-10));

  --pill-min-height: var(--space-10-5);
  --pill-min-height-sm: var(--space-9-0);
  --pill-min-height-mobile: var(--space-10-0);
  --pill-min-height-sm-mobile: var(--space-8-5);
  --pill-icon-size: var(--space-8-5);
  --pill-icon-size-sm: var(--space-7-0);
  --pill-icon-size-mobile: var(--space-6);
  --pill-icon-size-sm-mobile: var(--space-6-5);

  --mobile-menu-offset: 9.25rem;

  /* Insight article — editorial long-form layout widths and rhythm */
  --article-body-max: 76ch;
  --article-hero-image-max: 62.5rem;
  --article-figure-max: 53.75rem;
  --article-gallery-max: var(--container-md);
  --article-gallery-image-max-height: 12.5rem;
  --article-gallery-image-max-height-mobile: 10rem;
  --article-pullquote-rule-width: 7.5rem;
  --article-pullquote-rule-height: var(--motion-shift-subtle);
  --article-hero-lead-max: 88ch;
  --article-hero-lead-opacity: 0.8;
  --article-hero-meta-opacity: 0.55;
  --article-paragraph-spacing: 1.15em;
  --article-h2-fluid-max: 2.4rem;
  --text-article-body-mobile: 1.17rem;
  --article-scroll-expand-end: 640px;


  /* =========================================================
     Z-INDEX
     ========================================================= */

  --z-nav: 100;
  --z-overlay: 400;
  --z-loader: 1200;

}

@media (max-width: 1024px) {

  :root {
    --radius-media-feature: var(--radius-lg);
  }

}

@media (max-width: 980px) {

  :root {
    --radius-card: var(--radius-md);
  }

}

@media (max-width: 760px) {

  :root {
    --radius-lg: var(--radius-md);
    --radius-media-feature: var(--radius-md);
    --radius-media-editorial: var(--radius-md);
  }

}

/* branding/typography/fonts.css */
/* =========================================================
   LOGOHOLIK WEBFONTS
   ========================================================= */



@font-face {
  font-family: "Radio Grotesk";
  src: url("./assets/fonts/radio-grotesk/PPRadioGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Radio Grotesk";
  src: url("./assets/fonts/radio-grotesk/PPRadioGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* proposal */
/*
  Studio Logoholik — HTML proposal base (current)
  Shared tokens + small proposal semantic layer.
*/




:root {
  --proposal-header-height: 4.5rem;
  --proposal-header-mark-width: 2.5rem;
  --proposal-header-mark-gap: var(--space-4);
  --proposal-max-width: var(--container-md-lg);
  --proposal-copy-max: var(--copy-measure-md);
  --proposal-section-y: clamp(var(--space-16-0), 8vw, var(--space-20-0));
  --proposal-section-x: var(--section-padding-x);
  --proposal-divider-index-size: clamp(4rem, 14vw, 9rem);
  --proposal-theme-bg: var(--bg-signal);
  --proposal-theme-text: var(--text-inverse);
  --proposal-nav-bg: rgba(255, 255, 255, 0.92);
  --proposal-nav-text: var(--text-primary);
  --proposal-nav-border: var(--border-soft-color);
  --proposal-signal-section-bg: #2858A4;
  --proposal-muted-on-dark: #ffffff;
  --proposal-muted-on-light: var(--mineral-deep);
  --proposal-focus-color: var(--mineral-deep-surface);
  --proposal-print-brand-reserve: 14mm;
}

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

html {
  scroll-behavior: smooth;
  background: var(--bg-page);
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-body);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

h1, h2, h3, h4, p, ul, ol, dl {
  margin: 0;
}

ul, ol {
  padding-left: 1.15em;
}

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

h1, h2, h3, strong {
  font-weight: var(--weight-medium);
}

::selection {
  background: var(--bg-signal);
  color: var(--text-inverse);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: calc(var(--z-overlay) + 2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--bg-dark);
  color: var(--text-inverse);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--proposal-focus-color);
  outline-offset: 2px;
  box-shadow: none;
}

.proposal-print-brand {
  display: none;
}

.proposal-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  backdrop-filter: blur(10px);
  background: var(--proposal-nav-bg);
  border-bottom: 1px solid var(--proposal-nav-border);
  color: var(--proposal-nav-text);
}

body.menu-open .proposal-header,
body.menu-open .proposal-menu-toggle {
  z-index: calc(var(--z-overlay) + 2);
}

.proposal-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--proposal-header-height);
  padding: var(--space-3) var(--proposal-section-x);
  max-width: calc(var(--container-xl) + var(--space-8));
  margin: 0 auto;
}

.proposal-header__start {
  display: flex;
  align-items: center;
  gap: var(--proposal-header-mark-gap);
  min-width: 0;
  flex: 1 1 auto;
}

.proposal-header__brand {
  display: block;
  width: var(--proposal-header-mark-width);
  height: var(--proposal-header-mark-width);
  flex: 0 0 var(--proposal-header-mark-width);
}

.proposal-header__logo {
  display: block;
  width: 100%;
  height: 100%;
}

.proposal-header__eyebrow {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mineral-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.proposal-nav__list a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  opacity: var(--opacity-interactive-muted);
  transition: opacity var(--transition-fast);
}

.proposal-nav__list a:hover,
.proposal-nav__list a.is-active {
  opacity: 1;
}

.proposal-menu-toggle {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}

.proposal-menu-toggle__bar,
.proposal-menu-toggle__bar::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 2px;
  margin: 0 auto;
  background: var(--text-primary);
  transition: transform var(--transition-fast);
}

.proposal-menu-toggle__bar::before {
  margin-top: 0.35rem;
}

.proposal-menu-toggle[aria-expanded="true"] .proposal-menu-toggle__bar {
  transform: translateY(3px) rotate(45deg);
}

.proposal-menu-toggle[aria-expanded="true"] .proposal-menu-toggle__bar::before {
  transform: translateY(-5px) rotate(-90deg);
}

.proposal-mobile-menu {
  position: fixed;
  top: var(--proposal-header-height);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-overlay);
  background: var(--bg-overlay);
}

.proposal-mobile-menu[hidden] {
  display: none;
}

.proposal-mobile-menu__panel {
  margin-left: auto;
  width: min(100%, 22rem);
  height: 100%;
  padding: var(--space-5);
  background: var(--bg-surface);
  color: var(--text-primary);
  overflow-y: auto;
}

.proposal-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.proposal-mobile-menu__title {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mineral-deep);
}

.proposal-mobile-menu__close {
  border: var(--border-interactive-light);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}

.proposal-mobile-menu__list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.proposal-mobile-menu__list a {
  display: block;
  padding: var(--space-3) 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--divider-light);
}

.proposal-print,
.proposal-header .proposal-print {
  border: var(--border-interactive-light);
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}

.proposal-noscript-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--proposal-section-x);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-soft-color);
}

.proposal-noscript-nav a {
  color: var(--text-primary);
}

.proposal {
  width: 100%;
  max-width: 100%;
}

.proposal-section {
  padding: var(--proposal-section-y) var(--proposal-section-x);
}

.proposal-section[data-theme="signal"] {
  --proposal-section-bg: var(--proposal-signal-section-bg);
  --proposal-section-text: var(--text-inverse);
  --proposal-section-muted: var(--proposal-muted-on-dark);
  background-color: var(--proposal-section-bg);
  color: var(--proposal-section-text);
}

.proposal-section[data-theme="mineral"] {
  --proposal-section-bg: var(--mineral);
  --proposal-section-text: var(--text-inverse);
  --proposal-section-muted: var(--proposal-muted-on-dark);
  background-color: var(--proposal-section-bg);
  color: var(--proposal-section-text);
}

.proposal-section[data-theme="surface"] {
  --proposal-section-bg: var(--bg-page);
  --proposal-section-text: var(--text-primary);
  --proposal-section-muted: var(--proposal-muted-on-light);
  background-color: var(--proposal-section-bg);
  color: var(--proposal-section-text);
}

.proposal-section__inner {
  width: 100%;
  max-width: var(--proposal-max-width);
  margin: 0 auto;
}

.proposal-section--cover,
.proposal-section--closing {
  min-height: min(70vh, 42rem);
  display: flex;
  align-items: flex-end;
}

.proposal-section--cover {
  padding-top: calc(var(--proposal-header-height) + var(--space-10));
}

.proposal-kicker {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--proposal-section-muted, var(--proposal-muted-on-light));
  margin-bottom: var(--space-4);
}

.proposal-section[data-theme="signal"] .proposal-kicker,
.proposal-section[data-theme="mineral"] .proposal-kicker,
.proposal-section[data-theme="signal"] .proposal-meta,
.proposal-section[data-theme="mineral"] .proposal-meta {
  font-size: var(--text-base);
}

.proposal-cover h1 {
  font-size: clamp(var(--text-3xl), 8vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  max-width: 12ch;
}

.proposal-cover h1 + .proposal-lead {
  margin-top: var(--space-5);
}

.proposal-lead {
  font-size: clamp(var(--text-lg), 2.4vw, var(--text-xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-subheading);
  max-width: var(--proposal-copy-max);
}

.proposal-meta,
.proposal-note {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--proposal-section-muted, var(--proposal-muted-on-light));
}

.proposal-section--content h2,
.proposal-divider h2 {
  font-size: clamp(var(--text-2md), 4vw, var(--text-2xl));
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.proposal-section--content h2 {
  margin-bottom: var(--space-6);
}

.proposal-copy p + p,
.proposal-copy .proposal-lead + p {
  margin-top: var(--space-4);
}

.proposal-divider {
  position: relative;
  min-height: 12rem;
  display: flex;
  align-items: flex-end;
}

.proposal-divider__index {
  position: absolute;
  right: 0;
  bottom: -0.2em;
  font-size: var(--proposal-divider-index-size);
  line-height: 0.82;
  letter-spacing: -0.06em;
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}

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

.proposal-grid--facts {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.proposal-grid--workstreams {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.proposal-card {
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.proposal-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.proposal-split {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.proposal-timeline {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.proposal-timeline li {
  padding-left: var(--space-5);
  border-left: 2px solid var(--accent-primary);
}

.proposal-timeline h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.proposal-facts {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.proposal-facts dt {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mineral-deep);
}

.proposal-facts dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-lg);
}

.proposal-options li + li {
  margin-top: var(--space-3);
}

.proposal-footer {
  padding: var(--space-6) var(--proposal-section-x) var(--space-8);
  font-size: var(--text-sm);
  color: var(--mineral-deep);
  background: var(--bg-page);
}

.proposal-print--desktop {
  margin-left: var(--space-3);
}

@media (max-width: 900px) {
  .proposal-print--desktop {
    display: none;
  }

  .proposal-nav {
    display: none;
  }

  .proposal-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .proposal-header__eyebrow {
    max-width: 9rem;
  }
}

@media (max-width: 480px) {
  :root {
    --proposal-section-y: var(--space-12-0);
  }

  .proposal-section--cover,
  .proposal-section--closing {
    min-height: auto;
  }
}

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

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

@media print {
  @page {
    size: A4 landscape;
    margin: 14mm 16mm 12mm;
  }

  html {
    scroll-behavior: auto;
    background: #ffffff !important;
  }

  body {
    background: #ffffff !important;
    color: #17161b !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .skip-link,
  .proposal-header,
  .proposal-menu-toggle,
  .proposal-mobile-menu,
  .proposal-noscript-nav,
  .proposal-print,
  .proposal-footer {
    display: none !important;
  }

  .proposal-print-brand {
    display: block !important;
    position: fixed;
    top: 10mm;
    left: 16mm;
    width: 12mm;
    height: 12mm;
    z-index: 2;
    padding: 1mm;
    border-radius: 1mm;
    background: #17161b !important;
    box-shadow: 0 0 0 0.5mm #17161b;
  }

  .proposal-print-brand img {
    display: block;
    width: 100%;
    height: auto;
  }

  .proposal-section {
    break-inside: avoid;
    page-break-inside: avoid;
    padding: 8mm 0;
    padding-top: calc(8mm + var(--proposal-print-brand-reserve));
    color: #17161b !important;
  }

  .proposal-section[data-theme="signal"],
  .proposal-section--cover,
  .proposal-section--closing {
    background: #2858a4 !important;
    color: #ffffff !important;
    --proposal-section-muted: rgba(255, 255, 255, 0.92);
  }

  .proposal-section[data-theme="mineral"],
  .proposal-section--divider {
    background: #74747a !important;
    color: #ffffff !important;
    --proposal-section-muted: rgba(255, 255, 255, 0.92);
  }

  .proposal-section[data-theme="surface"] {
    background: #e9e9ec !important;
    color: #17161b !important;
    --proposal-section-muted: #68686d;
  }

  .proposal-kicker,
  .proposal-meta,
  .proposal-note {
    color: var(--proposal-section-muted) !important;
  }

  .proposal-section--cover,
  .proposal-section--closing,
  .proposal-section--divider {
    min-height: auto;
  }

  html[data-print-layout="paginated"] .proposal-section--cover,
  html[data-print-layout="paginated"] .proposal-section--closing {
    padding-top: calc(16mm + var(--proposal-print-brand-reserve));
  }

  html[data-print-layout="paginated"] .proposal-section--cover,
  html[data-print-layout="paginated"] .proposal-section--closing {
    break-after: page;
    page-break-after: always;
  }

  html[data-print-layout="paginated"] .proposal-section--divider {
    break-before: page;
    page-break-before: always;
  }

  html[data-print-layout="flow"] .proposal-section {
    break-before: auto;
    break-after: auto;
    page-break-before: auto;
    page-break-after: auto;
  }

  .proposal-card {
    box-shadow: none;
    border: 1px solid rgba(23, 22, 27, 0.16);
    background: #ffffff !important;
    color: #17161b !important;
  }

  .proposal-divider__index {
    opacity: 0.22;
    color: #ffffff !important;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}