@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700;800;900&display=swap');
/* =============================================================
   Cohelion Design System — colors_and_type.css
   Source of truth for color, type, spacing, radii, shadows, and
   semantic defaults. Import this before any UI kit stylesheet.
   ============================================================= */



:root {
  /* ---------- Color: brand blue ---------- */
  --brand-50:  #E6F2FF;
  --brand-100: #CCE5FF;
  --brand-200: #99CCFF;
  --brand-300: #66B2FF;
  --brand-400: #3399FF;
  --brand-500: #007EFF;  /* Primary Cohelion blue */
  --brand-600: #0066CC;
  --brand-700: #004D99;
  --brand-800: #003366;
  --brand-900: #001A33;

  /* ---------- Color: neutrals / ink ---------- */
  --ink-50:   #F5F6F8;
  --ink-100:  #E6E9EE;
  --ink-200:  #CDD3DB;
  --ink-300:  #A9B1BB;
  --ink-400:  #808A96;
  --ink-500:  #5A6472;
  --ink-600:  #3F4853;
  --ink-700:  #2A323C;
  --ink-800:  #181E25;
  --ink-900:  #0B0F14;
  --ink-950:  #05080C;
  --white:    #FFFFFF;

  /* ---------- Color: accent orange (single accent) ---------- */
  --accent-400: #FF8A4C;
  --accent-500: #FF6A2C;  /* Primary accent */
  --accent-600: #E0541A;
  --accent-10:  rgba(255, 106, 44, 0.10); /* badge fill */

  /* ---------- Color: semantic ---------- */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-700);   /* secondary text */
  --fg-3: var(--ink-500);   /* tertiary / captions */
  --fg-muted: var(--ink-400);
  --fg-on-dark: var(--white);
  --fg-on-dark-2: rgba(255,255,255,0.72);
  --fg-on-dark-3: rgba(255,255,255,0.48);

  --bg-1: #FBFAF7;              /* warm paper — default page bg */
  --bg-1-pure: var(--white);    /* pure white — for contrast breaks */
  --bg-2: #EEF2F7;              /* cool blue-tinted panel */
  --bg-3: #F4F1EA;              /* warm sand — secondary tint */
  --bg-dark: var(--ink-900);
  --bg-darker: var(--ink-950);

  --border-1: var(--ink-100);
  --border-2: var(--ink-200);
  --border-on-dark: rgba(255,255,255,0.10);

  --link: var(--brand-600);
  --link-hover: var(--brand-700);
  --focus-ring: 0 0 0 3px rgba(0,126,255,0.30);

  --danger: #C8321C;        /* error states only */

  /* ---------- Type: families ---------- */
  --font-display: 'Inter Tight', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type: scale ---------- */
  --fs-display-1: clamp(48px, 6vw, 80px);   /* Hero H1 */
  --fs-display-2: clamp(36px, 4.2vw, 56px); /* Section H1 */
  --fs-h1:        40px;
  --fs-h2:        32px;
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   13px;
  --fs-eyebrow:   12px;

  --lh-display:   1.05;
  --lh-heading:   1.15;
  --lh-body:      1.55;
  --lh-tight:     1.3;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body:     0em;
  --tracking-eyebrow:  0.16em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;
  --fw-ultra:    900;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;   /* card padding */
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;   /* mobile section padding */
  --space-20:  80px;
  --space-24:  96px;   /* desktop section padding */
  --space-32:  128px;

  --container-max: 1280px;
  --container-tight: 1200px;
  --container-prose: 680px;

  /* ---------- Radii ---------- */
  --radius-xs:  4px;
  --radius-sm:  6px;   /* chips/badges */
  --radius-md:  8px;   /* inputs */
  --radius-lg:  10px;  /* buttons */
  --radius-xl:  12px;  /* cards */
  --radius-2xl: 16px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --border-w: 1px;

  /* ---------- Shadows (used sparingly) ---------- */
  --shadow-none: none;
  --shadow-1: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 4px 14px rgba(0,0,0,0.06);

  /* ---------- Motion ---------- */
  --ease-std:  cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-in:   cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --dur-fast:   120ms;
  --dur-base:   150ms;
  --dur-slow:   300ms;

  /* ---------- Decorative pattern ---------- */
  --dot-grid: radial-gradient(circle at 1px 1px, var(--ink-200) 1px, transparent 0);
  --dot-grid-size: 24px 24px;
}

/* =============================================================
   Base reset + semantic defaults
   ============================================================= */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
  font-weight: var(--fw-bold);
  text-wrap: pretty;
}

h1 {
  font-size: var(--fs-display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--fw-black);
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-4); color: var(--fg-2); text-wrap: pretty; }
p.lead { font-size: var(--fs-body-lg); color: var(--fg-2); }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-2);
  background: var(--ink-50);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

hr {
  border: 0;
  border-top: var(--border-w) solid var(--border-1);
  margin: var(--space-12) 0;
}

/* Display variant — use on hero H1 */
.display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  font-weight: var(--fw-ultra);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: pretty;
}

/* Eyebrow label */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1;
}
.eyebrow--on-dark { color: var(--fg-on-dark-2); }
.eyebrow--accent  { color: var(--accent-500); }

/* Numeric / data emphasis */
.num {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-display);
  color: var(--accent-500);
  font-variant-numeric: tabular-nums;
}

/* Mono tag */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

/* Focus */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* Container helper */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container--tight { max-width: var(--container-tight); }
.container--prose { max-width: var(--container-prose); }

/* Dot grid background helper */
.bg-dots {
  background-image: var(--dot-grid);
  background-size: var(--dot-grid-size);
  background-color: var(--bg-1);
}


/* Site-specific styles on top of the Cohelion design system tokens */

html { scroll-behavior: smooth; }

/* Safety net: transient/decorative overflow (hover tooltips, accent marks)
   must never create a horizontal scrollbar. `clip` rather than `hidden` so
   the sticky header keeps working. */
html, body { overflow-x: clip; }
body { background: var(--bg-1-pure); }

/* =============================================================
   Tweakable axes
   Three controls that reshape the page rather than nudge a value:
   rhythm (how hard the light/dark alternation hits), density (how
   fast the page reads) and accent (how far the orange travels).
   Defaults reproduce the design system exactly.
   ============================================================= */
:root {
  /* Section fills, remapped by [data-rhythm] */
  --sec-base: var(--bg-1);
  --sec-cool: var(--bg-2);
  --sec-warm: var(--bg-3);
  --sec-pure: var(--bg-1-pure);
  --sec-dark: var(--ink-900);

  /* Pace, remapped by [data-density] */
  --sec-pad-y: 96px;
  --sec-pad-x: 24px;
  --h2-size: clamp(32px, 3.8vw, 48px);
  --lead-size: var(--fs-body-lg);

  /* Accent reach, remapped by [data-accent] */
  --accent-deco: var(--accent-500);
  --eyebrow-accent: var(--accent-500);
  --eyebrow-plain: var(--fg-3);
}

/* ---- Rhythm: calm flattens the light bands and softens the dark ones,
       bold deepens both so the page reads as hard-edged chapters. ---- */
[data-rhythm="calm"] {
  --sec-base: var(--bg-1-pure);
  --sec-cool: var(--bg-1);
  --sec-warm: var(--bg-1);
  --sec-dark: var(--ink-800);
}
[data-rhythm="bold"] {
  --sec-base: var(--bg-2);
  --sec-cool: var(--ink-100);
  --sec-warm: var(--bg-3);
  --sec-dark: var(--ink-950);
}

/* ---- Density: same content, different reading pace. ---- */
[data-density="editorial"] {
  --sec-pad-y: 128px;
  --h2-size: clamp(36px, 4.4vw, 56px);
  --lead-size: 19px;
}
[data-density="compact"] {
  --sec-pad-y: 64px;
  --h2-size: clamp(28px, 3vw, 38px);
  --lead-size: 16px;
}
@media (max-width: 768px) {
  :root { --sec-pad-y: 64px; }
  [data-density="editorial"] { --sec-pad-y: 80px; }
  [data-density="compact"] { --sec-pad-y: 48px; }
}

/* ---- Accent: reserved keeps orange for CTAs alone and lets the blue
       carry the rest; generous warms every eyebrow on the site. ---- */
[data-accent="reserved"] {
  --accent-deco: var(--brand-600);
  --eyebrow-accent: var(--brand-600);
}
[data-accent="generous"] {
  --eyebrow-plain: var(--accent-600);
}

/* Reusable utility classes used across pages */
.coh-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.coh-section {
  padding: var(--sec-pad-y) var(--sec-pad-x);
}
@media (max-width: 768px) {
  .coh-section { padding: var(--sec-pad-y) var(--sec-pad-x); }
}

.coh-section--dark { background: var(--sec-dark); color: var(--fg-on-dark); }
.coh-section--tint { background: var(--sec-cool); }
.coh-section--pure { background: var(--sec-pure); }

/* Headings */
.coh-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--h2-size);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.coh-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}
.coh-lead {
  font-family: var(--font-body);
  font-size: var(--lead-size);
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}
.coh-lead--on-dark { color: var(--fg-on-dark-2); }

/* Eyebrow accent underline on a single hero word */
.coh-accent-underline {
  background-image: linear-gradient(to top, var(--accent-deco) 0, var(--accent-deco) 6px, transparent 6px);
  padding-bottom: 4px;
}

/* Reused link arrow */
.coh-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-600);
  transition: gap 150ms var(--ease-std);
}
.coh-arrow-link:hover { gap: 10px; text-decoration: none; }
.coh-arrow-link--on-dark { color: #fff; }
.coh-arrow-link--on-dark:hover { color: #fff; text-decoration: underline; }

/* Card */
.coh-card {
  background: var(--bg-1-pure);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  transition: border-color 150ms var(--ease-std), transform 150ms var(--ease-std), box-shadow 150ms var(--ease-std);
}
.coh-card--hover {
  cursor: pointer;
}
.coh-card--hover:hover {
  border-color: var(--brand-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.coh-card--dark {
  background: var(--ink-900);
  border-color: var(--ink-800);
  color: #fff;
}

/* Section divider rules */
.coh-rule {
  border-top: 1px solid var(--border-1);
}
.coh-rule--on-dark {
  border-top: 1px solid var(--border-on-dark);
}

/* Dot grid bg */
.coh-dots {
  background-image: var(--dot-grid);
  background-size: var(--dot-grid-size);
  background-color: var(--bg-1-pure);
}
.coh-dots--ink {
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Reveal-on-scroll: subtle 8px rise + fade.
   VISIBLE by default; the hidden state is added by JS only when the page is
   actually visible, and a frozen-clock fallback (.coh-done) forces the end
   state, so headless capture / print / hidden tabs never stay at opacity:0. */
.coh-reveal { will-change: opacity, transform; }
.coh-reveal.coh-armed {
  opacity: 0;
  transform: translateY(8px);
}
.coh-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.coh-reveal.coh-done {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
@media print {
  .coh-reveal, .coh-reveal.coh-armed { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .coh-reveal.coh-armed { opacity: 1 !important; transform: none !important; }
}

/* Hero: split layout on desktop, stacked on tablet/mobile */
@media (max-width: 1024px) {
  .coh-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .coh-hero-viz { max-width: 560px; }
}

/* Pill nav (used on Solutions index) */
.coh-pillnav {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-1-pure);
  border: 1px solid var(--border-1);
  border-radius: 999px;
  padding: 4px;
}
.coh-pill {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--fg-2);
  cursor: pointer;
  border: 0;
  background: transparent;
  transition: background 150ms, color 150ms;
}
.coh-pill[aria-selected="true"] {
  background: var(--ink-900);
  color: #fff;
}
.coh-pill:not([aria-selected="true"]):hover {
  background: var(--ink-50);
  color: var(--fg-1);
}

/* Inputs (Contact) */
.coh-input, .coh-textarea, .coh-select {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--bg-1-pure);
  color: var(--fg-1);
  transition: border-color 150ms;
  width: 100%;
}
.coh-input:focus, .coh-textarea:focus, .coh-select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--focus-ring);
}
.coh-textarea { resize: vertical; min-height: 120px; }

/* Logo strip cells */
.coh-logo-cell {
  display: flex; align-items: center; justify-content: center;
  height: 88px;
  padding: 8px 12px;
}

/* Equation card multiplication / equals */
.coh-eq {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--ink-300);
}

/* Selection */
::selection { background: var(--accent-deco); color: white; }


/* ---- Static-site chrome states ---- */
[data-coh-header] { background: var(--bg-1); border-bottom: 1px solid transparent; transition: background 200ms, border-color 200ms; }
[data-coh-header][data-scrolled] { background: rgba(251,250,247,0.85); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom-color: var(--border-1); }
[data-coh-drawer] { display: none; }
[data-coh-drawer][data-open] { display: block; }
@media (min-width: 769px) { [data-coh-drawer] { display: none !important; } }

/* Contact form confirmation, injected by site.js on ?sent=1 */
.coh-sent { display: grid; gap: 6px; max-width: 600px; padding: 28px; border: 1px solid var(--brand-300); border-radius: 12px; background: var(--brand-50); color: var(--brand-700); }
.coh-sent strong { font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.coh-sent span { font-family: var(--font-body); font-size: 14px; }
.coh-sent a { color: var(--brand-700); }