/* Streamline Agency — component stylesheet. Loaded after tokens.css.
   Values the page declares from tokens.json (colours, spacing, radii, grid, rings, font stacks, @font-face)
   are not repeated here. What stays: the Google Fonts faces, the raw unitless Figma floats
   (type ramp, spacing, widths), the responsive data-mode overrides, the inverted-mode wiring
   (aliases only), the px type ramp, motion, and link defaults. */
/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */
:root {
  --font-family-body: "IBM Plex Sans";
  --font-family-button: "IBM Plex Sans";
  --font-family-heading-h0-h4: "IBM Plex Serif";
  --font-family-heading-h5-h6: "IBM Plex Serif";
  --font-family-heading-sans: "Geist";
  --font-family-label: "IBM Plex Mono";
  --font-family-secondary: "Montserrat";
  --font-letter-spacing-text-label: 2;
  --font-line-height-text-label: 16;
  --font-paragraph-spacing-text-label: 0;
  --font-size-text-label: 12;
  --font-weight-med: "Medium"; /* @kind other */
  --general-default: 12; /* @kind radius */
  --general-large: 16; /* @kind radius */
  --grid-column-gap: 16; /* @kind spacing */
  --grid-content-gap: 132; /* @kind spacing */
  --grid-page-padding: 32; /* @kind spacing */
  --icon-size-extra-large: 40; /* @kind spacing */
  --icon-size-large: 24; /* @kind spacing */
  --icon-size-medium: 16; /* @kind spacing */
  --icon-size-small: 12; /* @kind spacing */
  --icon-stroke-2: 1; /* @kind spacing */
  --icon-stroke: 2; /* @kind spacing */
  --icon-type: "Sharp"; /* @kind other */
  --letter-spacing-b1: 0;
  --letter-spacing-b2: 0;
  --letter-spacing-b3: 0;
  --letter-spacing-button-1: 0;
  --letter-spacing-button-2: 0;
  --letter-spacing-h0: -2.5;
  --letter-spacing-h1: -2.5;
  --letter-spacing-h2: -2;
  --letter-spacing-h3: -1;
  --letter-spacing-h4: -1;
  --letter-spacing-h5: -0.5;
  --letter-spacing-h6: -0.5;
  --letter-spacing-h7: -0.5;
  --letter-spacing-h8: 2;
  --letter-spacing-label-1: 0.75;
  --letter-spacing-label-2: 0.75;
  --line-height-b1: 28;
  --line-height-b2: 24;
  --line-height-b3: 20;
  --line-height-button-1: 24;
  --line-height-button-2: 16;
  --line-height-h0: 80;
  --line-height-h1: 64;
  --line-height-h2: 48;
  --line-height-h3: 40;
  --line-height-h4: 36;
  --line-height-h5: 32;
  --line-height-h6: 28;
  --line-height-h7: 24;
  --line-height-h8: 20;
  --line-height-label-1: 16;
  --line-height-label-2: 12;
  --paragraph-spacing-b1: 24;
  --paragraph-spacing-b2: 20;
  --paragraph-spacing-b3: 16;
  --paragraph-spacing-button-1: 0;
  --paragraph-spacing-button-2: 0;
  --paragraph-spacing-h0: 40;
  --paragraph-spacing-h1: 40;
  --paragraph-spacing-h2: 24;
  --paragraph-spacing-h3: 24;
  --paragraph-spacing-h4: 16;
  --paragraph-spacing-h5: 8;
  --paragraph-spacing-h6: 8;
  --paragraph-spacing-h7: 0;
  --paragraph-spacing-h8: 0;
  --paragraph-spacing-label-1: 0;
  --paragraph-spacing-label-2: 0;
  --radius-button: 32;
  --radius-default: 16;
  --radius-radius-2: 8;
  --section-padding-extra-large: 200;
  --section-padding-large: 160;
  --section-padding-medium: 120;
  --section-padding-small: 80;
  --size-b1: 20;
  --size-b2: 16;
  --size-b3: 14;
  --size-button-1: 16;
  --size-button-2: 14;
  --size-h0: 96;
  --size-h1: 64;
  --size-h2: 48;
  --size-h3: 40;
  --size-h4: 32;
  --size-h5: 28;
  --size-h6: 24;
  --size-h7: 20;
  --size-h8: 16;
  --size-label-1: 12;
  --size-label-2: 10;
  --spacing-120: 120;
  --spacing-12: 12;
  --spacing-16: 16;
  --spacing-20: 20;
  --spacing-24: 24;
  --spacing-32: 32;
  --spacing-48: 48;
  --spacing-4: 4;
  --spacing-64: 64;
  --spacing-80: 80;
  --spacing-8: 8;
  --spacing-s: 32;
  --ui-button-base: 16; /* @kind radius */
  --ui-button-circle: 24; /* @kind radius */
  --ui-input: 8; /* @kind radius */
  --ui-tag: 16; /* @kind radius */
  --weight-body-bold: "Medium"; /* @kind other */
  --weight-body: "Regular"; /* @kind other */
  --weight-button-2: "Display Medium"; /* @kind other */
  --weight-button: "Medium"; /* @kind other */
  --weight-heading-h0-h3: "Regular"; /* @kind other */
  --weight-heading-h4-h6: "Regular"; /* @kind other */
  --weight-label: "Regular"; /* @kind other */
  --width-10-columns: 1144; /* @kind spacing */
  --width-12-columns: 1376; /* @kind spacing */
  --width-2-columns: 216; /* @kind spacing */
  --width-3-columns: 332; /* @kind spacing */
  --width-4-columns: 448; /* @kind spacing */
  --width-5-columns: 564; /* @kind spacing */
  --width-6-columns: 680; /* @kind spacing */
  --width-7-columns: 796; /* @kind spacing */
  --width-8-columns: 912; /* @kind spacing */
  --width-9-columns: 1028; 
}
:root[data-mode="tablet"] {
  --font-family-secondary: "Montserrat";
  --font-letter-spacing-text-label: 2;
  --font-line-height-text-label: 12;
  --font-paragraph-spacing-text-label: 0;
  --font-size-text-label: 12;
  --font-weight-med: "Medium"; /* @kind other */
  --spacing-s: 24;
}
:root[data-mode="mobile"] {
  --font-family-secondary: "Montserrat";
  --font-letter-spacing-text-label: 2;
  --font-line-height-text-label: 8;
  --font-paragraph-spacing-text-label: 0;
  --font-size-text-label: 10;
  --font-weight-med: "Medium"; /* @kind other */
  --spacing-s: 20;
}
:root[data-mode="mobile-767px"] {
  --font-family-body: "IBM Plex Sans";
  --font-family-button-2: "Raveo Display", serif;
  --font-family-button: "IBM Plex Sans";
  --font-family-heading-h0-h4: "IBM Plex Serif";
  --font-family-heading-h5-h6: "IBM Plex Serif";
  --font-family-heading-sans: "Instrument Sans";
  --font-family-label: "IBM Plex Mono";
  --general-default: 12; /* @kind radius */
  --general-large: 16; /* @kind radius */
  --grid-column-gap: 12; /* @kind spacing */
  --grid-content-gap: 40; /* @kind spacing */
  --grid-page-padding: 16; /* @kind spacing */
  --icon-size-extra-large: 32; /* @kind spacing */
  --icon-size-large: 20; /* @kind spacing */
  --icon-size-medium: 12; /* @kind spacing */
  --icon-size-small: 10; /* @kind spacing */
  --icon-stroke-2: 1; /* @kind spacing */
  --icon-stroke: 2; /* @kind spacing */
  --icon-type: "Sharp"; /* @kind other */
  --letter-spacing-b1: 0;
  --letter-spacing-b2: 0;
  --letter-spacing-b3: 0;
  --letter-spacing-button-1: 0;
  --letter-spacing-button-2: 0;
  --letter-spacing-h0: -3;
  --letter-spacing-h1: -2;
  --letter-spacing-h2: -1.5;
  --letter-spacing-h3: -0.5;
  --letter-spacing-h4: -1;
  --letter-spacing-h5: -0.5;
  --letter-spacing-h6: -0.25;
  --letter-spacing-h7: 0;
  --letter-spacing-h8: 1;
  --letter-spacing-label-1: 0.75;
  --letter-spacing-label-2: 0.75;
  --line-height-b1: 24;
  --line-height-b2: 20;
  --line-height-b3: 16;
  --line-height-button-1: 20;
  --line-height-button-2: 16;
  --line-height-h0: 52;
  --line-height-h1: 44;
  --line-height-h2: 36;
  --line-height-h3: 36;
  --line-height-h4: 28;
  --line-height-h5: 24;
  --line-height-h6: 20;
  --line-height-h7: 20;
  --line-height-h8: 16;
  --line-height-label-1: 12;
  --line-height-label-2: 10;
  --paragraph-spacing-b1: 24;
  --paragraph-spacing-b2: 20;
  --paragraph-spacing-b3: 16;
  --paragraph-spacing-button-1: 0;
  --paragraph-spacing-button-2: 0;
  --paragraph-spacing-h0: 40;
  --paragraph-spacing-h1: 40;
  --paragraph-spacing-h2: 24;
  --paragraph-spacing-h3: 24;
  --paragraph-spacing-h4: 16;
  --paragraph-spacing-h5: 8;
  --paragraph-spacing-h6: 8;
  --paragraph-spacing-h7: 0;
  --paragraph-spacing-h8: 0;
  --paragraph-spacing-label-1: 0;
  --paragraph-spacing-label-2: 0;
  --radius-button: 8;
  --radius-default: 12;
  --radius-radius-2: 8;
  --section-padding-extra-large: 120;
  --section-padding-large: 96;
  --section-padding-medium: 64;
  --section-padding-small: 48;
  --size-b1: 16;
  --size-b2: 14;
  --size-b3: 12;
  --size-button-1: 14;
  --size-button-2: 12;
  --size-h0: 64;
  --size-h1: 44;
  --size-h2: 36;
  --size-h3: 32;
  --size-h4: 24;
  --size-h5: 20;
  --size-h6: 20;
  --size-h7: 12;
  --size-h8: 12;
  --size-label-1: 10;
  --size-label-2: 8;
  --spacing-120: 80;
  --spacing-12: 10;
  --spacing-16: 12;
  --spacing-20: 16;
  --spacing-24: 16;
  --spacing-32: 24;
  --spacing-48: 32;
  --spacing-4: 4;
  --spacing-64: 48;
  --spacing-80: 56;
  --spacing-8: 8;
  --ui-button-base: 16; /* @kind radius */
  --ui-button-circle: 24; /* @kind radius */
  --ui-input: 8; /* @kind radius */
  --ui-tag: 16; /* @kind radius */
  --weight-body-bold: "Medium"; /* @kind other */
  --weight-body: "Regular"; /* @kind other */
  --weight-button-2: "Display Medium"; /* @kind other */
  --weight-button: "Medium"; /* @kind other */
  --weight-heading-h0-h3: "Regular"; /* @kind other */
  --weight-heading-h4-h6: "Regular"; /* @kind other */
  --weight-label: "Regular"; /* @kind other */
  --width-10-columns: 361; /* @kind spacing */
  --width-12-columns: 361; /* @kind spacing */
  --width-2-columns: 361; /* @kind spacing */
  --width-3-columns: 361; /* @kind spacing */
  --width-4-columns: 361; /* @kind spacing */
  --width-5-columns: 361; /* @kind spacing */
  --width-6-columns: 361; /* @kind spacing */
  --width-7-columns: 361; /* @kind spacing */
  --width-8-columns: 361; /* @kind spacing */
  --width-9-columns: 361; 
}
:root[data-mode="inverted-mode"] {
  --background-base: var(--background-base-dark); /* @kind color */
  --background-depth: var(--background-depth-dark); /* @kind color */
  --background-gradient-purposes-gradient-0: var(--neutral-dark-0); /* @kind color */
  --background-gradient-purposes-gradient-100: var(--neutral-dark-100); /* @kind color */
  --background-gradient-purposes-gradient-64: var(--neutral-dark-64); /* @kind color */
  --background-lift-low-opacity: var(--background-lift-low-opacity-dark); /* @kind color */
  --background-lift: var(--background-lift-dark); /* @kind color */
  --border-medium: var(--neutral-light-48); /* @kind color */
  --border-subtle: var(--neutral-light-16); /* @kind color */
  --button-primary-default-background: var(--neutral-light-100); /* @kind color */
  --button-primary-default-border: var(--neutral-dark-8); /* @kind color */
  --button-primary-default-text: var(--neutral-dark-100); /* @kind color */
  --button-primary-hover-background: var(--neutral-light-88); /* @kind color */
  --button-primary-hover-border: var(--neutral-dark-8); /* @kind color */
  --button-primary-hover-text: var(--neutral-dark-100); /* @kind color */
  --button-secondary-default-background: var(--neutral-light-4); /* @kind color */
  --button-secondary-default-border: var(--neutral-light-8); /* @kind color */
  --button-secondary-default-text: var(--neutral-light-100); /* @kind color */
  --button-secondary-hover-background: var(--neutral-light-88); /* @kind color */
  --button-secondary-hover-border: var(--neutral-dark-8); /* @kind color */
  --button-secondary-hover-text: var(--neutral-dark-100); /* @kind color */
  --button-tertiary-default-text: var(--neutral-light-100); /* @kind color */
  --button-tertiary-hover-text: var(--neutral-light-88); /* @kind color */
  --icon-medium: var(--neutral-light-64); /* @kind color */
  --icon-strong: var(--neutral-light-100); /* @kind color */
  --input-active-background: var(--neutral-light-16); /* @kind color */
  --input-active-border: var(--neutral-light-48); /* @kind color */
  --input-active-text: var(--neutral-light-100); /* @kind color */
  --input-default-background: var(--neutral-light-8); /* @kind color */
  --input-default-border: var(--neutral-light-8); /* @kind color */
  --input-default-text: var(--neutral-light-48); /* @kind color */
  --input-error-background: var(--neutral-light-8); /* @kind color */
  --input-error-border: var(--neutral-light-16); /* @kind color */
  --input-error-text: var(--neutral-light-100); /* @kind color */
  --input-filled-background: var(--neutral-light-8); /* @kind color */
  --input-filled-border: var(--neutral-light-16); /* @kind color */
  --input-filled-text: var(--neutral-light-100); /* @kind color */
  --input-icon: var(--accent-primary); /* @kind color */
  --input-label: var(--neutral-light-64); /* @kind color */
  --text-body-medium: var(--neutral-light-64); /* @kind color */
  --text-body-strong: var(--neutral-light-88); /* @kind color */
  --text-body-subtle: var(--neutral-light-48); /* @kind color */
  --text-heading-medium: var(--neutral-light-64); /* @kind color */
  --text-heading-strong: var(--neutral-light-100); /* @kind color */
  --text-label-medium: var(--neutral-light-64); /* @kind color */
  --text-label-strong: var(--neutral-light-88); 
}
:root[data-theme="dark"], .dark {
  --backgrounds-primary: rgb(0,0,0); /* @kind color */
  --backgrounds-primary: rgb(0,0,0); /* @kind color */
  --backgrounds-primary: rgb(28,28,30); /* @kind color */
  --backgrounds-primary: rgb(36,36,38); /* @kind color */
  --miscellaneous-floating-tab-pill-fill: rgba(255,255,255,0.07); /* @kind color */
  --miscellaneous-floating-tab-pill-fill: rgba(255,255,255,0.07); /* @kind color */
  --miscellaneous-floating-tab-pill-fill: rgba(255,255,255,0.22); /* @kind color */
  --miscellaneous-floating-tab-pill-fill: rgba(255,255,255,0.22); 
}

/* Streamline Agency — semantic aliases over the raw Figma variables.
   fig-tokens.css exposes FLOAT tokens unitless; these resolve them to px. */
:root{
/* Type ramp (px) */
--t-h0:96px;--lh-h0:80px;--ls-h0:-2.5px;
--t-h1:64px;--lh-h1:64px;--ls-h1:-2.5px;
--t-h2:48px;--lh-h2:48px;--ls-h2:-2px;
--t-h3:40px;--lh-h3:40px;--ls-h3:-1px;
--t-h4:32px;--lh-h4:36px;--ls-h4:-1px;
--t-h5:28px;--lh-h5:32px;--ls-h5:-0.5px;
--t-h6:24px;--lh-h6:28px;--ls-h6:-0.5px;
--t-h7:20px;--lh-h7:24px;--ls-h7:-0.5px;
--t-h8:16px;--lh-h8:20px;--ls-h8:2px;
--t-b1:20px;--lh-b1:28px;
--t-b2:16px;--lh-b2:24px;
--t-b3:14px;--lh-b3:20px;
--t-l1:12px;--lh-l1:16px;--ls-l1:0.75px;
--t-l2:10px;--lh-l2:12px;--ls-l2:0.75px;
/* Motion */
--ease-out:cubic-bezier(0.22,1,0.36,1); /* @kind other */
--dur-fast:160ms; /* @kind other */
--dur-base:240ms; /* @kind other */
--dur-slow:480ms; 
}
a{color:var(--text-heading-strong);text-decoration-color:var(--neutral-dark-32);text-underline-offset:3px}
a:hover{color:var(--text-body-strong);text-decoration-color:var(--neutral-dark-64)}

/* The contact page keeps its dark background beneath the shared header. */
body[data-cms-page="contact"] .nav-desktop nav a{
  color:#f7f7f2!important;
}
body[data-cms-page="contact"] .nav-desktop nav a:hover{
  background:rgba(247,247,242,0.08);
}
body[data-cms-page="contact"] .nav-desktop img[src*="streamline-logo-dark"],
body[data-cms-page="contact"] .nav-mobile summary img[src*="streamline-logo-dark"]{
  filter:brightness(0) invert(1);
}
body[data-cms-page="contact"] .nav-desktop > a[href="/contact"]{
  background:#f7f7f2!important;
  color:#191818!important;
}
body[data-cms-page="contact"] .nav-mobile summary span[aria-label="Open menu"]{
  box-shadow:inset 0 0 0 1px rgba(247,247,242,0.32)!important;
}
body[data-cms-page="contact"] .nav-mobile summary svg path{
  stroke:#f7f7f2;
}
body[data-cms-page="contact"] .nav-desktop a:focus-visible,
body[data-cms-page="contact"] .nav-mobile summary:focus-visible{
  outline:2px solid #f7f7f2;
  outline-offset:4px;
}