/* ============================================================
   DESIGN TOKENS — change the whole site from this one file.
   Structure and scale mirror the reference site; colours are Kite's.
   ============================================================ */
:root {
  /* Colour */
  --c-navy:      #13243A;   /* header, footer, dark cards  (ref: #0A1637) */
  --c-navy-deep: #0D1928;   /* button hover, overlays      (ref: #012169) */
  --c-ink-deep:  #101820;   /* hero background             (ref: #101820) */
  --c-paper:     #FFFFFF;   /* page background */
  --c-paper-2:   #EEF0F3;   /* alias, kept for older rules */
  --c-band:      #EEF0F3;   /* full-width grey bands behind content */
  --c-panel:     #E2E5EA;   /* panels and cards that sit on a band or a photo */
  --c-ink:       #101820;   /* headings/body dark */
  --c-ink-soft:  rgba(16,24,32,.7);  /* body copy         (ref: same) */
  --c-on-dark:   #FFFFFF;
  --c-on-dark-soft: rgba(255,255,255,.64);
  --c-accent:    #B5121B;   /* THE company red — the Request a meeting button. Use this wherever red appears. */
  --c-accent-soft:#F26B70;
  --c-accent-deep:var(--c-accent);   /* kept as an alias: older rules still refer to it */
  --c-accent-hover:#8E0E16;  /* a shade darker, for hover states only */
  --c-rule:      rgba(10,22,55,.1);
  --c-rule-dark: rgba(255,255,255,.2);
  --c-focus:     #2F6FB5;

  /* Type */
  --f-display: "Brandon Grotesque", "Helvetica Neue", Arial, sans-serif;   /* brand font (logo) */
  --f-body:    "Brandon Grotesque", "Helvetica Neue", Arial, sans-serif;

  /* Type scale — three breakpoints as on the reference: base / ≥1250 / ≥1800 */
  --h1: var(--t-title); --h1-lh: 46px;
  --h2: var(--t-head);  --h2-lh: 44px;
  --h3: var(--t-sub);   --h3-lh: 39px;
  --p-xl: var(--t-lead); --p-xl-lh: 26px;
  --p-l: var(--t-body);  --p-l-lh: 24px;
  --p-r: var(--t-body);  --p-r-lh: 24px;
  --hero-p: var(--t-lead); --hero-p-lh: 24px;

  /* The seven steps every piece of text uses. Each has a small-screen and a large-screen value. */
  --t-title: 36px;   /* page titles */
  --t-head:  30px;   /* section headings */
  --t-sub:   24px;   /* sub-headings and panel titles */
  --t-lead:  20px;   /* leads, statements, pull quotes */
  --t-body:  17px;   /* body copy */
  --t-small: 14px;   /* captions, small print, buttons */
  --t-label: 12px;   /* eyebrows and labels */

  /* Layout */
  --w-max: 1800px;          /* ref: content_container 1600 + 200 padding */
  --gutter: 20px;
  --section: 80px;          /* vertical rhythm between sections */
  --btn-radius: 6px;
  --t: all .5s ease 0s;     /* the one transition used everywhere on the reference */
}
@media (min-width: 768px)  { :root { --gutter: 30px; --section: 150px; } }
@media (min-width: 1100px) { :root { --gutter: 45px; } }
@media (min-width: 1250px) { :root { --gutter: 70px; --h1-lh: 56px; --h2-lh: 46px; --h3-lh: 36px;
  --t-title: 50px; --t-head: 40px; --t-sub: 30px; --t-lead: 24px; --t-body: 18px; } }
@media (min-width: 1280px) { :root { --gutter: 100px; --p-xl-lh: 28px; --p-l-lh: 26px; --hero-p-lh: 34px; } }
@media (min-width: 1800px) { :root { --section: 250px; --t-title: 64px; --h1-lh: 70px; --t-head: 48px; --h2-lh: 54px; --t-sub: 34px; --h3-lh: 42px;
  --t-lead: 26px; --p-xl-lh: 34px; --t-body: 19px; --p-l-lh: 28px; --hero-p-lh: 36px; } }