/* Pello design tokens — every design value lives here.
   Fonts (same link on every page):
   <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── */
  --bg: #FFFFFF;              /* page: always white, the work brings the colour */
  --panel: #F1F2F4;           /* soft grey panels: testimonial cards, stats panel, footer, logo pill */
  --surface: #FFFFFF;         /* cards on white (journal) */
  --scrim: rgba(255, 255, 255, .86); /* full-screen menu */
  --fade: rgba(255, 255, 255, 0);    /* edge fades of the hero strip */

  /* ── Text ── */
  --text: #1C1C1E;            /* ink: every heading, body, button */
  --text-2: #5B6170;          /* secondary copy, captions, dates */
  --muted: #5F6573;           /* the second half of a split statement */
  --on-ink: #FFFFFF;

  /* ── Lines ── */
  --line: #E3E5EA;            /* FAQ rules, card borders, inputs */
  --line-2: #1C1C1E;          /* underlines under the email link and inputs on focus */

  /* ── Brand / accent (brand slots — see palette/slots.json) ── */
  --accent: #2F45FF;          /* cobalt: the ® mark, link hover, focus ring, carousel arrow hover. Never a heading */
  --accent-rgb: 47, 69, 255;
  --accent-ink: #2F45FF;      /* accent used as text on white */
  --c2: #FFC93C;              /* sun   — only through the pastel tiles below */
  --c3: #2EC4A0;              /* mint  — only through the pastel tiles below */
  --c4: #FF6B5B;              /* coral — only through the pastel tiles below */
  /* Pastel service tiles: 24% brand colour on white, so any palette stays soft */
  --tile-1: color-mix(in oklab, var(--accent) 22%, #FFFFFF);
  --tile-2: color-mix(in oklab, var(--c2) 34%, #FFFFFF);
  --tile-3: color-mix(in oklab, var(--c3) 28%, #FFFFFF);
  --tile-4: color-mix(in oklab, var(--c4) 26%, #FFFFFF);

  /* ── Data / status (forms only) ── */
  --success: #1F7A4D; --warning: #A86A00; --danger: #C2362B; --info: #2F5D8A;

  /* ── Fonts ── */
  --font-display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii ── */
  --r-xs: 8px;     /* button, input */
  --r-sm: 12px;    /* logo pill, small chips */
  --r: 20px;       /* project + journal images, journal cards */
  --r-lg: 32px;    /* big photo, testimonial card, stats panel, service tiles */
  --r-leaf: 80px;  /* hero strip tiles: two opposite corners only (leaf) */
  --r-round: 9999px;

  /* ── Spacing / layout ── */
  --container: 1520px;
  --gutter: 32px;            /* page side padding (16px on phones) */
  --section: 120px;          /* space under each section */
  --section-top: 32px;       /* sections start close; the space lives below */
  --head-to-content: 56px;   /* section title → content */
  --gap: 16px;               /* card grid gap */
  --gap-lg: 32px;
  --header-h: 72px;

  /* ── Shadows (almost none: flat white design) ── */
  --shadow-1: 0 1px 2px rgba(28, 28, 30, .06);
  --shadow-2: 0 18px 40px -18px rgba(28, 28, 30, .25);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s;
  --dur-fast: .3s;
  --marquee: 60s;            /* one loop of the hero strip */
}

/* ── Type scale ── (Hanken Grotesk 500 everywhere for headings; one weight does the hierarchy) */
.t-word    { font-family: var(--font-display); font-weight: 700; font-size: clamp(96px, 15vw, 224px); line-height: .86; letter-spacing: -.06em; }
.t-display { font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 5vw, 72px); line-height: 1; letter-spacing: -.035em; }
.t-h1      { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -.03em; }
.t-h2      { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -.025em; }
.t-h3      { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.14; letter-spacing: -.02em; }
.t-h4      { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3; letter-spacing: -.015em; }
.t-h5      { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
.t-lead    { font-size: 18px; line-height: 1.5; font-weight: 400; color: var(--text-2); }
.t-body    { font-size: 16px; line-height: 1.45; font-weight: 400; }
.t-small   { font-size: 14px; line-height: 1.45; font-weight: 400; }
.t-micro   { font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.t-label   { font-family: var(--mono); font-size: 14px; line-height: 1.2; font-weight: 400; letter-spacing: -.02em; }
h1, h2, h3, h4, .t-word, .t-display, .t-h1, .t-h2, .t-h3, .t-h4 { text-wrap: balance; }

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }