/* ==========================================================================
   Incremental IT — base stylesheet

   Structure:
     1. Fonts        — self-hosted Montserrat variable font (full 100–900)
     2. Tokens       — design tokens as CSS custom properties (:root)
     3. Reset        — minimal normalize
     4. Base         — element styles, all driven by the tokens above

   The tokens are the knobs. To restyle the site, change values in :root;
   the base rules below should rarely need touching.
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */

/* One variable woff2 per style covers every weight from 100 to 900.
   Montserrat → headings; Inter → body text. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/montserrat-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/montserrat-latin-wght-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin-wght-italic.woff2") format("woff2");
}

/* 2. Tokens --------------------------------------------------------------- */

:root {
  /* Color — near-black + white base, a single warm accent (carried over from
     the previous site). Semantic names, not raw hues, so themes stay easy. */
  --color-bg: #ffffff;
  --color-surface: #f6f6f5; /* subtle panels / alternating sections */
  --color-ink: #16181d; /* body text — softened off pure black */
  --color-ink-muted: #5b606b; /* secondary text, captions */
  --color-border: #e6e6e3;
  --color-accent: #ff6900; /* brand orange — links, CTAs */
  --color-accent-hover: #e25d00;
  --color-on-accent: #16181d; /* dark ink on the accent fill — white on #ff6900
                                 is only ~2.9:1, fails AA; dark ink is ~6.3:1 */

  /* Header — a dark bar even in light mode, so it reads *with* the dark hero
     below it instead of floating above it as a white strip. Dark mode re-points
     these back to the page tokens (the header just sits on the dark page bg). */
  --color-header-bg: #14171c;
  --color-header-ink: #ffffff;
  --color-header-ink-muted: rgba(255, 255, 255, 0.72);
  --color-header-border: rgba(255, 255, 255, 0.1);

  /* Hero photo tint — a cool slate, deliberately NOT the accent, so the orange
     CTA stays the loudest thing in the hero. --hero-tint sets the monotone hue
     (only its hue/saturation matter; the `color` blend takes lightness from the
     photo); --hero-shade is the darkening wash, keyed to the page background so
     the hero's dark point melts into the theme. Re-pointed for dark mode below. */
  --hero-tint: #33465c;
  --hero-shade: 18, 22, 30; /* ~ light-mode ink, RGB triplet */

  /* Typography — Montserrat sets headings, Inter carries body copy. The
     system stacks are fallbacks while the web fonts load (font-display: swap). */
  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — 1.25 (major third), 1rem base */
  --text-xs: 0.8rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15; /* headings */
  --leading-snug: 1.35;
  --leading-normal: 1.6; /* body */

  --tracking-tight: -0.015em; /* large headings read tighter */
  --tracking-wide: 0.04em; /* small-caps / eyebrow labels */

  /* Spacing — rem steps; compose layouts from these only */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout */
  --width-prose: 44rem; /* comfortable reading measure */
  --width-wide: 64rem; /* full-width sections, headers */
  --gutter: var(--space-6); /* horizontal page inset, carried by the full-bleed band */

  /* Section rhythm — fluid vertical spacing carried over from the original
     site (AutomaticCSS). Each clamp scales the top/bottom padding of a full
     section from its small-screen min to its large-screen max. */
  --section-space-s: clamp(5.4rem, 2.707vw + 4.535rem, 8rem);
  --section-space-m: clamp(7.2rem, 5vw + 5.6rem, 12rem);
  --section-space-l: clamp(9.6rem, 8.753vw + 6.797rem, 18rem);
  --section-space: var(--section-space-m); /* default .section padding-block */

  /* Borders, radius, shadow — kept restrained */
  --radius: 8px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--color-border);
  --shadow-sm: 0 1px 2px rgba(16, 18, 23, 0.06), 0 2px 8px rgba(16, 18, 23, 0.05);

  /* Motion */
  --transition: 150ms ease;
}

/* Dark mode: re-point only the color tokens; everything else cascades. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111317;
    --color-surface: #181b21;
    --color-ink: #e9eaec;
    --color-ink-muted: #9aa0ab;
    --color-border: #2a2e36;
    --color-accent: #ff8330; /* lift the orange for contrast on dark */
    --color-accent-hover: #ff9650;
    --color-on-accent: #16181d;
    --hero-tint: #2a3a4d; /* deeper, cooler — sits with the dark UI */
    --hero-shade: 9, 11, 15; /* ~ --color-bg, so the hero melts into the page */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.35);

    /* Header already sits on the dark page bg here — use the page tokens. */
    --color-header-bg: var(--color-bg);
    --color-header-ink: var(--color-ink);
    --color-header-ink-muted: var(--color-ink-muted);
    --color-header-border: var(--color-border);
  }
}

/* 3. Reset ---------------------------------------------------------------- */

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

* {
  margin: 0;
}

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

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

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 4. Base ----------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--transition);
}
a:hover {
  color: var(--color-accent-hover);
}

/* Button / CTA — solid accent fill, the one prominent affordance */
.button {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--transition);
}
.button:hover {
  color: var(--color-on-accent);
  background: var(--color-accent-hover);
}

/* Layout primitives ------------------------------------------------------- */

/* A root-level <section> is full-bleed and owns the spacing: the vertical
   rhythm *and* the horizontal gutter. Its content goes in an inner .container
   that only caps the width and centres it. Pair them:
     <section class="section"><div class="container">…</div></section>  */
.section {
  padding-block: var(--section-space);
  padding-inline: var(--gutter);
}
.section--s {
  padding-block: var(--section-space-s);
}
.section--l {
  padding-block: var(--section-space-l);
}

.container {
  width: 100%;
  max-width: var(--width-prose);
  margin-inline: auto;
}
.container--wide {
  max-width: var(--width-wide);
}

/* Site chrome ------------------------------------------------------------- */

/* Header and footer are full-bleed bands too (their .container sits outside a
   .section), so they carry the horizontal gutter themselves. */
.site-header {
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-header-border);
  padding-inline: var(--gutter);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-header-ink);
}

/* Wordmark: the header is a dark bar in both themes, so the white logo is
   used throughout; this just sizes it. */
.brand__logo {
  display: block;
  height: 1.75rem;
  width: auto;
}

.site-nav {
  display: flex;
  gap: var(--space-6);
}
.site-nav a {
  color: var(--color-header-ink-muted);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.site-nav a:hover {
  color: var(--color-accent);
}

/* Prose ------------------------------------------------------------------- */

/* Document-flow typography. These rules deliberately live *only* under .prose
   so they style flowing Markdown pages (about, articles) without leaking into
   the structured, component-built pages (the home page lays out its own
   sections and headings). The Markdown body renders inside .container.prose. */
.prose {
  line-height: var(--leading-normal);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.prose h1 {
  font-size: var(--text-3xl);
}
.prose h2 {
  font-size: var(--text-2xl);
}
.prose h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}
.prose h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.prose :is(h1, h2, h3, h4) + * {
  margin-top: var(--space-4);
}
.prose * + :is(h2, h3, h4) {
  margin-top: var(--space-12);
}
.prose p + p,
.prose ul,
.prose ol {
  margin-top: var(--space-4);
}

.prose ul,
.prose ol {
  padding-left: var(--space-6);
}
.prose li + li {
  margin-top: var(--space-2);
}

.prose small {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.prose code,
.prose pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Give the leading h1 a little breathing room before the first paragraph. */
.prose h1:first-child {
  margin-bottom: var(--space-2);
}

/* Home page --------------------------------------------------------------- */

/* The home page is built from components rather than flowing prose, so its
   type is styled here explicitly (the .prose rhythm rules don't reach it).
   All values still come from the tokens above — restyle via :root. */

/* A .section can carry a subtle surface fill to separate adjacent bands. */
.section--surface {
  background: var(--color-surface);
}

/* Shared heading + intro treatment inside home sections. */
.home-heading {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.home-intro {
  margin-top: var(--space-4);
  max-width: var(--width-prose);
  color: var(--color-ink-muted);
  font-size: var(--text-lg);
}

/* Hero */
/* Hero background: the growth photo, recoloured to a single brand hue.
   Layer stack (top → bottom) with matching background-blend-mode:
     1. darkening wash (multiply) — buys contrast for the white text
     2. accent fill      (color)  — keeps the photo's luminance, repaints its
                                    hue/saturation to --color-accent → monotone
     3. the photo        (normal)
   --hero-tint / --hero-shade are theme tokens (see :root) so they retune per
   colour scheme; the image itself stays untouched. */
.hero {
  display: grid;
  place-items: center;
  min-height: min(68vh, 620px);
  text-align: center;
  color: #fff;
  background-color: rgb(var(--hero-shade));
  background-image: linear-gradient(
      rgba(var(--hero-shade), 0.6),
      rgba(var(--hero-shade), 0.6)
    ),
    linear-gradient(var(--hero-tint), var(--hero-tint)),
    url("/static/images/growth.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply, color, normal;
}
/* Narrow screens don't need the 2560px master — serve the 1280px variant. */
@media (max-width: 48rem) {
  .hero {
    background-image: linear-gradient(
        rgba(var(--hero-shade), 0.6),
        rgba(var(--hero-shade), 0.6)
      ),
      linear-gradient(var(--hero-tint), var(--hero-tint)),
      url("/static/images/growth-1280.webp");
  }
}
.hero__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.hero__lead {
  margin-inline: auto;
  margin-top: var(--space-6);
  max-width: 42rem;
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}
.hero__cta {
  margin-top: var(--space-8);
}

/* Card grid — used for the value pillars and the focus areas. */
.cards {
  margin-top: var(--space-12);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.card {
  padding: var(--space-8);
  background: var(--color-bg);
  border: var(--border-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}
.card__body {
  margin-top: var(--space-3);
  color: var(--color-ink-muted);
}
.card ul {
  margin-top: var(--space-3);
  padding-left: var(--space-6);
}
.card li + li {
  margin-top: var(--space-2);
}

/* FAQ — a stack of question/answer blocks. */
.faq {
  margin-top: var(--space-12);
  display: grid;
  gap: var(--space-8);
}
.faq__q {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}
.faq__a {
  margin-top: var(--space-3);
  color: var(--color-ink-muted);
}
.faq__a ul {
  margin-top: var(--space-3);
  padding-left: var(--space-6);
}
.faq__a li + li {
  margin-top: var(--space-2);
}

.site-footer {
  border-top: var(--border-hairline);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  padding-inline: var(--gutter);
}
.site-footer__inner {
  padding-block: var(--space-8);
}