/* SPACING & LAYOUT — 4px base, but the layout numbers that define the look are the
   22px page gutter, the 980px content column and the ~100px section rhythm. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 100px;
  --space-13: 130px;
  --space-14: 160px;

  /* Layout */
  --page-max: 980px;        /* default content column (copy, cards, pricing) */
  --page-max-wide: 1440px;  /* full-bleed media rows, galleries */
  --page-max-narrow: 692px; /* long-form paragraphs, forms */
  --gutter: 22px;           /* page side padding — 22px desktop, 16px mobile */
  --gutter-sm: 16px;
  --nav-h: 48px;            /* sticky global nav height */
  --nav-h-lg: 68px;         /* nav with logo lockup */
  --section-y: 100px;       /* vertical section padding */
  --section-y-lg: 130px;
  --section-y-sm: 64px;
  --stack-tight: 8px;
  --stack: 16px;
  --stack-loose: 24px;
  --grid-gap: 20px;

  /* TILE GRID — the site's real layout unit: every block is a full-width or
     half-width tile, edge-to-edge, 12px gap, stacked downward. */
  --tile-gap: 12px;
  --tile-h-full: 692px;   /* full-width tile height */
  --tile-h-half: 580px;   /* half-width tile height */
  --tile-pad-y: 54px;     /* copy inset from the tile's top edge */
  --tile-pad-x: 40px;
  --tile-copy-max: 720px; /* copy column inside a full tile */

  /* Breakpoints (documented as tokens, used in media queries) */
  --bp-sm: 734px;
  --bp-md: 1068px;
  --bp-lg: 1441px;
}