/* ============ START OF FONT FACES ============ */
/* Poppins, served from this origin. It used to come from Google Fonts, which
   put a third request in front of every glyph: the HTML had to arrive, then the
   stylesheet from fonts.googleapis.com, and only then the files themselves from
   fonts.gstatic.com — three hosts deep before a single letter could be drawn,
   and the whole chain blocking the first paint. Declared here it is one hop
   from a host the browser has already connected to.

   Poppins is licensed under the SIL Open Font License, which allows this.
   Subsets and unicode-ranges are Google's own, so the browser still fetches
   latin-ext only if a page actually uses a character from it. */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/poppins-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/poppins-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============ END OF FONT FACES ============ */

/* ============ START OF TOKENS ============ */
:root {

   /* ============ COLOUR ============ */
   --c-bg: #0B0D12;
   --c-surface: #12151C;
   --c-surface-2: #212630;

   /* Text. --c-muted carries body copy, so it clears 4.5:1 on every surface. */
   --c-white: #FEFEFE;
   --c-muted: #828D9F;
   --c-line: #4E5668;

   /* Two accents: blue leads, green supports. Red is not a third accent — it
      marks the problem being solved, so it only ever appears opposite blue. */
   --c-blue: #0D8BD1;
   --c-blue-hover: #1CA2EC;
   --c-green: #47CF73;
   --c-red: #E5484D;

   /* Radial gradient cores, one per section. */
   --c-navy: #20283F;
   --c-plum: #220C32;

   /* Translucent takes on the surfaces above — panels that sit over artwork or
     over a section gradient and have to let it through. */
   --c-bg-glass: rgba(11, 13, 18, .82);
   --c-overlay: rgba(11, 13, 18, .72);
   --c-overlay-soft: rgba(11, 13, 18, .6);
   --c-surface-glass: rgba(18, 21, 28, .78);
   --c-menu-bg: rgba(18, 21, 28, .96);
   --c-hairline: rgba(255, 255, 255, .07);
   --c-blue-wash: rgba(13, 139, 209, .18);
   --c-blue-wash-strong: rgba(13, 139, 209, .28);

   /* ============ ELEVATION ============ */
   --shadow-card: 0 0 1.25rem 1px rgba(0, 0, 0, .1);
   --shadow-lift: 0 1.5rem 3.75rem rgba(0, 0, 0, .5);
   --shadow-menu: 0 1.5rem 3.75rem rgba(0, 0, 0, .6);

   /* ============ TYPOGRAPHY ============ */
   --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

   --fs-3xs: 0.6875rem;
   --fs-2xs: 0.75rem;
   --fs-xs: 0.8125rem;
   --fs-sm: 0.875rem;
   --fs-base: 1rem;
   --fs-md: 1.0625rem;
   --fs-lg: 1.125rem;
   --fs-xl: 1.25rem;
   --fs-2xl: 1.375rem;
   --fs-3xl: 1.5rem;
   --fs-4xl: 1.75rem;
   --fs-5xl: 2rem;

   /* Fluid steps. Each one is a role rather than a rung on the scale — the ratio
  /* Fluid steps converted to mobile/desktop breakpoint values */
   --fs-hero: 2.5rem;
   --fs-statement: 1.75rem;
   --fs-quote: 1.05rem;
   --fs-case-title: 2.125rem;
   --fs-case-h2: 1.625rem;
   --fs-case-h2-sm: 1.5rem;
   --fs-case-stat: 1.75rem;
   /* Poppins is loaded at 300–700; nothing outside this set is available. */
   --fw-light: 300;
   --fw-regular: 400;
   --fw-medium: 500;
   --fw-semibold: 600;

   --lh-none: 1;
   /* pill labels and single-line headings */
   --lh-tight: 1.1;
   --lh-heading: 1.2;
   --lh-snug: 1.35;
   --lh-body: 1.6;
   --lh-prose: 1.75;
   /* long-form case study copy */

   --ls-tight: -.02em;
   /* pulls large display type together */
   --ls-caps: .14em;
   --ls-caps-wide: .2em;
   /* uppercase eyebrows need the air */

   /* ============ SPACING ============ */
   --space-4: 0.25rem;
   --space-8: 0.5rem;
   --space-16: 1rem;
   --space-24: 1.5rem;
   --space-32: 2rem;
   --space-48: 3rem;
   --space-64: 4rem;
   --space-96: 6rem;

   /* ============ STRUCTURE ============ */
   --gutter: var(--space-24);
   /* content start line — shared by .container and the timeline track */
   --section-y: 5.625rem;
   --section-y-sm: var(--space-64);
   --header-h: 5.25rem;
   --wrap: 71.25rem;
   --tl-floor: var(--space-8);
   /* clearance below the timeline markers */

   /* ============ CORNERS ============ */
   /* Every corner on the site is a superellipse, not a circular arc — the
      radius values below stay as they are, this only bends the curve between
      them. One knob for the whole theme: `round` reverts it, `superellipse(3)`
      pushes it further towards a square. */
   --corner: squircle;

   --ease: cubic-bezier(.22, .61, .36, 1);
   --ease-soft: cubic-bezier(.33, 1, .68, 1);
   /* gentle ease-out for the button fill */
}

/* ============ END OF TOKENS ============ */

@media (min-width: 55.0625rem) {
   :root {
      --fs-hero: 5rem;
      --fs-statement: 4rem;
      --fs-quote: 1.5rem;
      --fs-case-title: 4.25rem;
      --fs-case-h2: 2.375rem;
      --fs-case-h2-sm: 2.125rem;
      --fs-case-stat: 2.5rem;
   }
}