/* ==========================================================================
   Sharpline Elite Services: design tokens (The Poster).
   Every colour, type, space, shape and motion value lives here.
   A raw value in site.css is a bug. See /DESIGN.md for the why.
   ========================================================================== */

/* One face. Hanken Grotesk, variable: weight 300 to 800. SIL Open Font License. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300 800;font-display:swap;src:url("../fonts/HankenGrotesk-300-800.woff2") format("woff2")}
/* Metric-matched fallback so the swap does not shift layout */
@font-face{font-family:"Hanken Fallback";src:local("Arial");size-adjust:98%;ascent-override:96%;descent-override:26%;line-gap-override:0%}

:root{
  /* ---- Colour: one off-white page, a red opening band, an ink closing band ---- */
  --color-paper:        #F5F5F3;   /* the page */
  --color-white:        #FFFFFF;   /* results and about bands; the primary button on red */
  --color-ink:          #141416;   /* headings · 17.6:1 on paper; the contact band and footer */
  --color-ink-2:        #36373B;   /* body · 11.3:1 on paper */
  --color-muted:        #5F6066;   /* secondary copy · 5.6:1 on paper */
  --color-line:         #D4D3CE;   /* rules on light grounds */
  --color-red:          #A6192E;   /* the opening band; links and the step note on light grounds · 7.3:1 on paper */
  --color-red-deep:     #8A1326;   /* pressed red */
  --color-red-tint:     #F8E6E9;   /* the sentence and nav on red · 6.3:1; the white button's hover */
  --color-on-red:       #FFFFFF;   /* headline and buttons on red · 8.0:1 */
  --color-gold:         #C8A24A;   /* the diamond beside the wordmark, nothing else */
  --color-onyx-2:       #1E1E22;   /* inputs on the ink band */
  --color-onyx-border:  #3A3A3F;   /* input borders on ink */
  --color-onyx-line:    #2A2A2F;   /* rules on ink */
  --color-onyx-ink:     #FFFFFF;   /* headings and labels on ink · 17.6:1 */
  --color-onyx-ink-2:   #D9D8D3;   /* body on ink · 12.6:1 */
  --color-onyx-muted:   #A3A29C;   /* fine print and footer links on ink · 7.2:1 */
  --color-error:        #F0647A;   /* form errors on ink · 5.5:1 */
  --color-ring:         #C8A24A;   /* focus ring on ink */

  /* ---- Type: one family, a fixed set of roles ---- */
  --font: "Hanken Grotesk", "Hanken Fallback", "Helvetica Neue", Arial, sans-serif;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --weight-bold: 700;
  --tracking-display: -.045em;
  --tracking-h2: -.03em;
  --tracking-h3: -.02em;
  --tracking-num: -.05em;
  --tracking-wm: -.01em;

  --text-fine: .875rem;                       /* 14px: fine print, quote attributions */
  --text-small: .9375rem;                     /* 15px: nav, notes, step detail, labels */
  --text-body: 1.0625rem;                     /* 17px */
  --text-lede: clamp(1.125rem, 1.6vw, 1.375rem);
  --text-quote: 1.125rem;
  --text-summary: 1.125rem;
  --text-result: 1.5rem;                      /* the smaller result titles */
  --text-direct: 1.5rem;                      /* the phone and email on the ink band */
  --text-statement: clamp(1.75rem, 3.4vw, 3.25rem);
  --display-1: clamp(3.2rem, 9vw, 8.5rem);    /* the hero */
  --display-2: clamp(2.6rem, 5.2vw, 5rem);    /* section headings */
  --display-3: clamp(2.4rem, 4.6vw, 4.4rem);  /* the contact heading */
  --display-4: clamp(2.2rem, 4vw, 3.6rem);    /* the about heading */
  --display-num: clamp(4rem, 8vw, 7.5rem);    /* the two lead results */
  --text-num-join: clamp(1.125rem, 2.24vw, 2.1rem); /* the word between the two numbers, .28 of the numeral */
  --title-step: clamp(2rem, 3.2vw, 3rem);
  --title: clamp(1.5rem, 2.2vw, 2.1rem);
  --title-doc: clamp(2.2rem, 4vw, 3.6rem);

  --leading-num: .9;                          /* the lead numerals, one line only */
  --leading-display: .95;
  --leading-tight: 1;
  --leading-title: 1.05;
  --leading-statement: 1.15;
  --leading-lede: 1.4;
  --leading-quote: 1.5;
  --leading-body: 1.55;
  --measure: 34rem;

  /* ---- Space: one scale, one section padding ---- */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-section: clamp(5rem, 9vw, 8rem);
  --gutter: clamp(1.25rem, 3vw, 3rem);
  --container: 88rem;
  --container-narrow: 46rem;
  --gap: clamp(1rem, 2vw, 2rem);
  --header-h: 72px;

  /* ---- Shape: pill buttons, 4px fields, nothing else rounded ---- */
  --radius-pill: 999px;
  --radius-field: 4px;
  --rule: 1px;
  --rule-strong: 2px;
  --border-btn: 1.5px;

  /* ---- Controls ---- */
  --btn-h: 3.5rem;
  --btn-h-small: 2.75rem;
  --field-h: 3.5rem;
  --tap: 44px;

  /* ---- Motion: one curve, a visible resting state, everything arrives in order ---- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 200ms;
  --dur-reveal: 800ms;     /* sections and their rows settling in */
  --dur-hero: 1000ms;      /* the headline words lifting out of their masks */
  --dur-rule: 1100ms;      /* a rule drawing across */
  --dur-count: 1400ms;     /* the two lead scores climbing */
  --reveal-rest: .45;      /* never 0: the page is readable at first paint */
  --reveal-rise: 24px;
  --stagger: 80ms;         /* between rows in a section */
  --word-stagger: 60ms;    /* between words in the headline */
  --hero-lede-delay: 420ms;
  --hero-cta-delay: 540ms;
  --hover-lift: -2px;
}