/* Marlo design tokens — every design value lives here.
   Fonts (same link on every page):
   <link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&family=Lato:wght@400;700&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── */
  --bg: #FFFFFF;            /* page */
  --surface: #F1F1F1;       /* off-white: footer, form panel, info chips, client-info box */
  --surface-2: #FFFFFF;     /* white cards on dark bands, inputs on the off-white panel */
  --dark: #281D14;          /* dark cocoa band: why-us, services, carousels, related projects */
  --dark-2: #382413;        /* CTA band base under the multiplied photo */
  --shade: rgba(0, 0, 0, .55);   /* hero top fade start */
  --shade-pill: rgba(0, 0, 0, .2); /* review pill on the hero photo */

  /* ── Text ── */
  --text: #423021;          /* ink: headlines (second phrase), labels, nav on white */
  --text-2: #6B5B4D;        /* body copy, card descriptions, chip text */
  --muted: #94877D;         /* first phrase of every headline (large text only) */
  --muted-ink: #766A5F;     /* small muted text: years, footer links, placeholders, notes (4.5:1 on white and off-white) */
  --on-dark: #FFFFFF;       /* text on dark bands and photos */
  --on-dark-2: #CCCCCC;     /* body copy on the CTA band */

  /* ── Lines ── */
  --line: #F1F1F1;                      /* hairline grid on white (vertical guides, rules) */
  --line-2: rgba(204, 204, 204, .48);   /* rule under the About hero title */
  --line-dark: rgba(255, 255, 255, .08);/* vertical guides on dark bands */
  --line-hero: rgba(255, 255, 255, .16);/* vertical guides on the hero photo */
  --line-ink: #423021;                  /* outlined phone pill, arrow buttons */

  /* ── Brand / accent (brand slots — see palette/slots.json) ── */
  --accent: #B65718;        /* rust: primary buttons, quote marks, logo mark, toggle knob, button icon boxes on white buttons */
  --accent-rgb: 182, 87, 24;
  --accent-ink: #A24D15;    /* accent used as text on white (passes 4.5:1) */
  --accent-soft: #EDDDCF;   /* sand: the 8px corner square on cards */
  --on-accent: #FFFFFF;

  /* ── Data / status (forms only) ── */
  --success: #3F8F5B; --warning: #C98A1E; --danger: #C83A2E; --info: #3B6FB6;

  /* ── Fonts ── */
  --font: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;            /* body */
  --font-display: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* headlines, labels, buttons, chips */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii (the look is square) ── */
  --r-sm: 0; --r: 0; --r-lg: 0; --r-pill: 50px; /* pill only on the toggle switch */

  /* ── Spacing / layout ── */
  --container: 1328px;      /* content width at 1600 */
  --band: 1568px;           /* dark/photo bands: 16px inside the page edge */
  --gutter: 16px;           /* page edge margin (bands sit inside it) */
  --band-pad: 120px;        /* band edge → content */
  --section: 148px;         /* vertical padding of a section */
  --gap: 16px;              /* card grid gap */
  --head-gap: 32px;         /* label → headline */
  --head-to-content: 60px;  /* headline block → content */
  --card-pad: 32px;

  /* ── Shadows (flat design) ── */
  --shadow-1: none;
  --shadow-2: 0 24px 60px rgba(40, 29, 20, .28);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s;
  --dur-fast: .25s;
}

/* ── Type scale (desktop values from the design; phone sizes in marlo.css) ──
   Every headline is uppercase Albert Sans Bold, line-height 1.04, tracking -2.5%/-2%; the first phrase sits in --muted, the rest in ink. */
.t-display { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 1.04; letter-spacing: -1.6px; text-transform: uppercase; }
.t-h1 { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 1.04; letter-spacing: -1.6px; text-transform: uppercase; }
.t-h2 { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1.04; letter-spacing: -.96px; text-transform: uppercase; }
.t-h3 { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.04; letter-spacing: -.8px; text-transform: uppercase; }
.t-h4 { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.04; letter-spacing: -.48px; text-transform: uppercase; }
.t-h5 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.04; letter-spacing: -.4px; text-transform: uppercase; }
.t-stat { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.04; letter-spacing: -.8px; text-transform: uppercase; }
.t-lead { font-family: var(--font); font-weight: 400; font-size: 18px; line-height: 1.48; letter-spacing: -.18px; }
.t-body { font-family: var(--font); font-weight: 400; font-size: 18px; line-height: 1.48; letter-spacing: -.18px; }
.t-small { font-family: var(--font); font-weight: 400; font-size: 14px; line-height: 1.48; letter-spacing: -.14px; }
.t-label { font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.48; letter-spacing: -.16px; text-transform: uppercase; }
.t-btn { font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -.24px; text-transform: capitalize; }
.t-chip { font-family: var(--font-display); font-weight: 400; font-size: 14px; line-height: 1.08; letter-spacing: -.28px; }

/* ── 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; }