/* Roger · Variant C tokens (BRIEF §2). Mirrored in Figma as the variable collection "Roger C".
   Light only: the client brand has no dark mode. Every colour on the site is one of these; surfaces never invent colour.
   Contrast (WCAG, measured): ink on paper 15.0 · ink-2 6.9 · ink-3 5.7 · blue on paper 6.0 · on-blue on blue 6.0 ·
   ink on blue-tint 13.6 · blue on blue-tint 5.4 · ink on sky 12.4 · ink-2 on sky 5.7 · blue on sky 5.0 · ink on sky-2 14.3 ·
   blue on sky-2 5.7. Sky-line is a rule colour only, never text.
   Sky roles (BRIEF §0; one rule on every page): Sky = panels and highlights (hero asides, the TrustStrip, the
   CompareTable's With Roger column, outcome / proof panels, article panels, the Insights Featured field).
   Sky-2 = at most ONE large band per page (the service Steps, the /approach Warranty certificate) and the TeamGrid's
   monogram placeholder tiles. Roger Blue = the CTA, links, the band, the stamp and one big field low on the page.
   SURFACE SEQUENCE (BRIEF §0f.6, R2-F13 "light blue, a photo, and light tan transitioning all to dark tan … feels
   arbitrary"): a surface changes only at a section boundary that also changes the content type. First screen = paper
   ground + the photo + ONE Sky object; the section after the hero stays on paper; paper-2 is ONE alternate band further
   down (never the first band after the hero); Roger Blue once, low (the CustomerCarousel or a QuoteBand); the footer
   is paper-2, so the band before it is paper. layout.css documents the section modifiers that carry these. */
:root {
  /* ---------- colour ---------- */
  --paper: #F5F3EC;          /* ground */
  --paper-2: #ECE8DE;        /* alternate band, footer */
  --paper-3: #E2DDCF;        /* photo ground, document desk */
  --rule: #D6D0C2;           /* hairline + drawn grid on paper */
  --rule-2: #C9C2B2;         /* hairline on paper-2 */
  --ink: #1E1E1E;
  --ink-2: #55534C;          /* reading text, secondary */
  --ink-3: #625F57;          /* labels, meta */
  --blue: #3E6079;           /* Steel #346180 at -20% OKLCH chroma: field, CTA, band, links, stamp */
  --blue-hover: #285677;     /* cooler steel (Oct 2 Replit pass, consolidated Oct 8); white on it 7.6:1 */
  --blue-press: #284A62;
  --on-blue: #F5F3EC;        /* text on the blue field */
  --grid-on-blue: rgba(245, 243, 236, 0.22);
  --blue-tint: #E1E9EF;      /* one pale panel per view at most */
  /* the two-tone blue (BRIEF §0, F9/F12/F13/F15/F16): Roger Blue stays the brand colour for the CTA, links, the band,
     the stamp and ONE big field low on the page (the customer carousel); Sky carries the secondary surfaces */
  --sky: #CFE1EF;            /* B's blue-200: trust strip, highlight rows ("With Roger"), outcome panels, secondary hover */
  --sky-2: #E5EFF7;          /* pale: large print panels */
  --sky-line: #AECADF;       /* hairlines and drawn grid lines on sky */
  --focus: #3E6079;          /* focus ring: 2 px, offset 2 */

  /* ---------- type families ---------- */
  --serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;   /* headlines, statements, quotes */
  --sans: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;     /* body, UI, numbers, fractions */
  --narrow: "Archivo Narrow", "Archivo Narrow Fallback", "Archivo", Arial, sans-serif;   /* labels, table heads, stamps (caps) */

  /* ---------- spacing scale (the only values used for gap / padding) ---------- */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px;

  /* ---------- grid: desktop >= 1024 (designed at 1440) ---------- */
  --container: 1440px;
  --margin: 72px;            /* outer margin, where the drawn grid's outer lines sit */
  --gutter: 24px;
  --cols: 12;
  --cell-pad: 32px;          /* text sits inside cells, this far from any line (rule-clearance law C6) */
  --clear: 24px;             /* minimum glyph-to-rule distance, measured by tools/lint.mjs */
  --section: 96px;           /* section rhythm */
  /* one bay (two columns, line to line) of the current container; a text measure that must end clear of the next bay
     line is var(--bay) - var(--gutter) / 2 - var(--cell-pad) - var(--clear) - 1px (it holds in the narrower first bay) */
  --bay: calc((min(100vw, var(--container)) - 2 * var(--margin) + var(--gutter)) * 2 / var(--cols));
  --header-h: 80px;

  /* ---------- type roles (BRIEF §0d): a calmer scale, anchored at the three design widths and fluid between them ----------
     size / line-height at 1440 · 768 · 375 (the Figma text styles C/Desktop · C/Tablet · C/Mobile):
       Display 96/92 · 72/70 · 48/46     H1 56/60 · 44/50 · 34/40     H2 44/50 · 36/42 · 28/34
       H3 24/32 · 22/30 · 20/28          Quote 36/46 · 30/40 · 24/32  Lead 20/30 · 19/28 · 18/28
       Body 18/28 · 18/28 · 17/26        Stat 32/40 · 30/38 · 28/36   Label 13/16 · UI 16/24 everywhere
     Between two anchors every value is the straight line between them (768-1439: tablet -> desktop; below 768: mobile
     -> tablet, continuing under 375), so no width shows a step, a jump or an orphaned line break. Line heights round to
     whole px between the anchors: Chrome sets glyphs on whole-pixel font metrics, so a fractional line box would sit text
     up to half a pixel off its padding (the anchors themselves are whole numbers, as the Figma text styles). */
  --display-fs: 96px;  --display-lh: 92px;  --display-ls: -0.02em;
  --h1-fs: 56px;       --h1-lh: 60px;       --h1-ls: -0.015em;
   --hero-title-fs: var(--h1-fs); --hero-title-lh: var(--h1-lh); --hero-title-ls: var(--h1-ls);
  --h2-fs: 44px;       --h2-lh: 50px;       --h2-ls: -0.01em;
  --h3-fs: 24px;       --h3-lh: 32px;
  --quote-fs: 36px;    --quote-lh: 46px;
  --lead-fs: 20px;     --lead-lh: 30px;
  --body-fs: 18px;     --body-lh: 28px;
  --stat-fs: 32px;     --stat-lh: 40px;   /* Archivo <= 32 px (BRIEF §0, F19) */
  --label-fs: 13px;    --label-lh: 16px;    --label-ls: 0.12em;
  --ui-fs: 16px;       --ui-lh: 24px;

  /* ---------- controls + motion ---------- */
  --control-h: 48px;         /* buttons, inputs; every tap target >= 44 x 44 */
  --tap: 44px;
  /* motion (BRIEF §0f.4: what separates "professional" from "MVP"). Three speeds, one curve each: a hover answers at
     once and settles (150 ms ease-out); anything that enters (menu, dropdown, slide, reveal) decelerates into place on
     the enter curve; anything that leaves accelerates away and is quicker than it came (180 ms ease-in), so a closing
     panel never holds the page up. prefers-reduced-motion removes all of it (base.css). */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);   /* the enter curve: fast start, long soft landing */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);        /* the exit curve */
  --dur-hover: 150ms;
  --dur-enter: 240ms;
  --dur-exit: 180ms;
  --dur-slide: 480ms;        /* a carousel slide travels a whole column set: longer, on the enter curve */
  --dur-reveal: 360ms;       /* reveal on scroll: fade + rise, once */
  --reveal-rise: 16px;
  --stagger: 60ms;           /* between siblings of one reveal group */
  --nudge: 2px;              /* the chevron's step on hover: direction, not decoration */
  --t-hover: var(--dur-hover) ease-out;
  --t-enter: var(--dur-enter) var(--ease-out);
  --t-exit: var(--dur-exit) var(--ease-in);
}

/* ---------- 768-1439: tablet -> desktop. --k runs 0 at 768 to 1 at 1440 ---------- */
@media (max-width: 1439px) {
  :root {
    --k: calc((100vw - 768px) / 672);
    --display-fs: calc(72px + 24 * var(--k)); --display-lh: round(calc(70px + 22 * var(--k)), 1px);
    --h1-fs: calc(44px + 12 * var(--k));      --h1-lh: round(calc(50px + 10 * var(--k)), 1px);
    --h2-fs: calc(36px + 8 * var(--k));       --h2-lh: round(calc(42px + 8 * var(--k)), 1px);
    --h3-fs: calc(22px + 2 * var(--k));       --h3-lh: round(calc(30px + 2 * var(--k)), 1px);
    --quote-fs: calc(30px + 6 * var(--k));    --quote-lh: round(calc(40px + 6 * var(--k)), 1px);
    --lead-fs: calc(19px + 1 * var(--k));     --lead-lh: round(calc(28px + 2 * var(--k)), 1px);
    --stat-fs: calc(30px + 2 * var(--k));     --stat-lh: round(calc(38px + 2 * var(--k)), 1px);
  }
}

/* ---------- desktop 1024-1439: from 1024 headlines sit in a half (BRIEF §0e.2), so the display and H2 restart lower
   and ramp to the 1440 anchors: "not drafted" (5.375 em) fits the hero half (100vw / 2 - 136) at every width and the
   longest H2 line in a half ("work for construction.", 9.8 em) fits 376 px at 1024 (no orphaned word) ---------- */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --k2: calc((100vw - 1024px) / 416);
    --display-fs: calc(68px + 28 * var(--k2)); --display-lh: round(calc(66px + 26 * var(--k2)), 1px);
    --h2-fs: 38px; --h2-lh: 44px;
  }
}
/* the H2 holds 38/44 through the narrow desktop (1024-1279, where the six columns are 150-193 px and --cell-pad is 24)
   and ramps to its 1440 anchor from 1280, so a one-line statement H2 ("Put Roger on your next job.", 448 px) ends
   between two column lines instead of on one as the lines move (BRIEF §0f.1, C6 clearance) */
@media (min-width: 1280px) and (max-width: 1439px) {
  :root { --k3: calc((100vw - 1280px) / 160); --h2-fs: calc(38px + 6 * var(--k3)); --h2-lh: round(calc(44px + 6 * var(--k3)), 1px); }
}
/* desktop 1024-1279: a column of the six is 150-193 px here (220 at 1440), so the cell padding steps down to the
   clearance (24): a one-column label up to about 100 px ("Our Approach", "Work With Us") then ends clear of the next
   line at 1024 instead of 13 px from it (the C6 clearance law), and every inset keeps the same proportion to its
   column as 32 does at 1440. Figma frames (1440 / 768 / 375) are unaffected. */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --cell-pad: 24px; }
}
/* tablet 768-1023: the display holds its 768 anchor (one column, two lines) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --display-fs: 72px; --display-lh: 70px; }
}

/* ---------- tablet 768-1023: grid ---------- */
@media (max-width: 1023px) {
  :root { --margin: 40px; --gutter: 24px; --cols: 8; --cell-pad: 24px; --clear: 24px; --section: 64px; --header-h: 72px; }
}

/* ---------- mobile < 768: grid, and type mobile -> tablet. --k runs 0 at 375 to 1 at 768 (negative below 375) ---------- */
@media (max-width: 767px) {
  :root {
    --margin: 20px; --gutter: 16px; --cols: 4; --cell-pad: 16px; --clear: 16px; --section: 48px; --header-h: 64px;
    --k: calc((100vw - 375px) / 393);
    --display-fs: calc(48px + 24 * var(--k)); --display-lh: round(calc(46px + 24 * var(--k)), 1px);
    --h1-fs: calc(34px + 10 * var(--k));      --h1-lh: round(calc(40px + 10 * var(--k)), 1px);
    --h2-fs: calc(28px + 8 * var(--k));       --h2-lh: round(calc(34px + 8 * var(--k)), 1px);
    --h3-fs: calc(20px + 2 * var(--k));       --h3-lh: round(calc(28px + 2 * var(--k)), 1px);
    --quote-fs: calc(24px + 6 * var(--k));    --quote-lh: round(calc(32px + 8 * var(--k)), 1px);
    --lead-fs: calc(18px + 1 * var(--k));     --lead-lh: 28px;
    --body-fs: calc(17px + 1 * var(--k));     --body-lh: round(calc(26px + 2 * var(--k)), 1px);
    --stat-fs: calc(28px + 2 * var(--k));     --stat-lh: round(calc(36px + 2 * var(--k)), 1px);
  }
}

/* ---------- metric-matched fallbacks: until the web fonts arrive (display=swap) the text is set in a local face
   scaled to the web font's advance widths (size-adjust, measured per weight on the site's own copy at the sizes each
   weight is set in: Newsreader's optical sizes narrow it at small sizes, so 700 is matched at H1 sizes, 600 at H2/H3
   sizes, 500 at quote sizes), so lines break
   where they will break in Newsreader / Archivo and the swap does not move the page (it was 0.24 CLS on /buyout at
   1440: the H1 took three lines in plain Georgia, two in Newsreader). Georgia and Arial ship on macOS and Windows. */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); font-weight: 100 550; size-adjust: 97%; }
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 551 650; size-adjust: 86%; }
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 651 900; size-adjust: 90%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 450; size-adjust: 98.7%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 451 550; size-adjust: 100.4%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900; size-adjust: 95%; }
@font-face { font-family: "Archivo Narrow Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 100 650; size-adjust: 80.1%; }
@font-face { font-family: "Archivo Narrow Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 651 900; size-adjust: 82%; }