/* ============ 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);

   /* ============ GLASS ============
      Three materials, picked by what an element is doing rather than what it
      is.

      Clear is for the small things that float over something else — a pill,
      a chip, a tab, a button in the corner of the screen. Barely tinted: the
      page shows through it bent bright, and what holds it together is the
      light on its rim.

      Frosted is for the panels that come up over the page — menus, dialogs,
      the palette, the viewers' toolbars. Blurred hard enough behind, and
      tinted dark enough, that the words on them read whatever passes under.

      Card is for the big surfaces laid out in the page itself. The same light
      and the same tint, but no live blur: they scroll with whatever is behind
      them, which is the page's own dark and gradients, so a blur would show
      nothing and cost every frame of every scroll. */
   --glass-edge: rgba(255, 255, 255, .1);
   --glass-edge-strong: rgba(255, 255, 255, .18);

   --glass-clear: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .06));
   --glass-clear-blur: blur(6px) saturate(1.8) brightness(1.1);

   --glass-frost: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 55%), rgba(18, 21, 28, .62);
   --glass-frost-blur: blur(20px) saturate(1.6);

   --glass-card: linear-gradient(155deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .015) 40%, rgba(255, 255, 255, .03)), rgba(18, 21, 28, .6);

   /* Sheet is frost for the one panel that takes the whole screen, the
      palette: the page behind it is already veiled, so it can be clearer —
      less tint, and the colour of what is behind it deepened rather than
      its light let through, which keeps a white screenshot under it from
      greying the sheet out from under its dimmer words. */
   --glass-sheet: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 45%, rgba(255, 255, 255, .04)), rgba(18, 21, 28, .54);
   --glass-sheet-blur: blur(28px) saturate(2.1) brightness(1.04);

   /* Pick is the drop of blue glass that lights the picked row of a list —
      a search result, a row of the right-click menu — and slides from row to
      row: lit on its rim like the rest, and standing a little off what it
      sits on. The row's words are white on it. */
   --glass-pick: linear-gradient(135deg, rgba(13, 139, 209, .26), rgba(13, 139, 209, .1) 55%, rgba(13, 139, 209, .18));
   --glass-pick-edge: rgba(13, 139, 209, .26);
   --glass-pick-lift: var(--glass-rim-bright), 0 .5rem 1.5rem rgba(0, 0, 0, .22);

   /* The light: caught on the top-left edge, an echo of it on the far side.
      Inset shadows rather than a border, so it follows any corner and adds
      nothing to the layout. */
   --glass-rim: inset 1px 1px 0 rgba(255, 255, 255, .16), inset -1px -1px 0 rgba(255, 255, 255, .05);
   --glass-rim-bright: inset 1px 1px 0 rgba(255, 255, 255, .34), inset -1px -1px 0 rgba(255, 255, 255, .1);

   /* ============ 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-12: 0.75rem;
   --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;

   --radius-xs: 0.25rem;
   --radius-sm: 0.625rem;
   --radius-md: 0.75rem;
   --radius-lg: 0.875rem;
   --radius-xl: 1rem;
   --radius-2xl: 1.25rem;
   --radius-3xl: 1.5rem;
   --radius-4xl: 2rem;
   --radius-5xl: 2.5rem;
   --radius-pill: 9999px;
   --radius-circle: 50%;

   /* The site's pointer for whenever the drawn one (initCursor) is not on
      screen: in lite mode, which leaves it out, before the mouse has first
      moved, and anywhere the system's would otherwise show. The same bead
      of blue glass and ring as the drawn one, still, in the system's own
      cursor — so it costs nothing and never lags. Over anything clickable,
      the ring alone with the faint wash the drawn ring takes there. SVG
      where the browser takes it, the same picture as a PNG where it does
      not (Safari), and the system's own after that. The hotspot is the
      centre. */
   --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.9'/%3E%3Cstop offset='.55' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='3'/%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%230D8BD1' stroke-opacity='.75' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='16' r='5.5' fill='%23000' fill-opacity='.35'/%3E%3Ccircle cx='16' cy='16' r='4.5' fill='%230D8BD1'/%3E%3Ccircle cx='16' cy='16' r='4.5' fill='url(%23g)'/%3E%3Ccircle cx='16' cy='16' r='4.5' fill='none' stroke='%23fff' stroke-opacity='.45' stroke-width='.75'/%3E%3C/svg%3E") 16 16,
      url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABUdJREFUWIXtV1tMFGcU/nZ3dnb2MgW7K6vgCIsSsCK4rsjFBG2lbKUYHmqApjE1XhLSxDYaEx+IfeOlfTAmfTBtSptQG2ov6QoqWLSNiQjlIlqwGt0KTBfLZjcBdtnLzOxMHzrY7TCgWBubtF8yDzP/Oec/5/zff84Z4L8OzRPo6AFYAdAADPK3OIAQgCAA/p9yIBOAgyyr26plChhtapoVesoEAOBjEXHKHxTZmyzX/cVVAPcBjD0tB1aAtm2mqg5X67IKnRqSsgCAFA0FEY9EAAAGk0ljpK0AIHGxcGL0xvXY+RPtCAX6Afz2dxzIJysb6vXOV1/WkEaL6B+9Ldzt+YnraxtAaHISQEyWo0Db7WTRLheRU7JBm5aVJ3HRMH/93HfcxVOtAIafxIFNVH3TQSKnuFyammTjPWe6hD7PRQBeALML6JgBrCGKaioNJbUVmlQ7I9ztvRJrbfwIwKCagm6hyKn6pgYip7g8wY4MRD48eFKcuHMWwK+PIBkPYFKcuHOD//Ebry7btZJwOEu16bk2YfjyGAD/4ziwgqxs2KcvqHwlwY4MRD995wMA3UtkNw9gTBjq8OmyXQzhcJaCMhEJb/8tAOHFVWlbtflYW6/50OkOAOVL2HQhlJsPne4wH2vrBW2rVi5qFe+ZVNXhag1ptMR7znQBGFjEcAaAF+QnYxG5gXjPmS4NabRQVYer5ev8EIRC2KHLKnSK/tHbMuHUyJbhdrt3rK/ZX0UuX8VIEiAE2PFhT/OFzs7OSwB8CvlZoc9zUdy0q1SXVegE4EiuEckc0JNlda8TOcUufqjj+8T9wXaVc8848PaRA2vfaDwysyx76wPRzPRPk8x1YXn+hrIXCzanm4nB3mv35KqYjLAmJW0t4djohBCfTrAjPQBEKI7AqmUKGADg+toG1KJ3u9076Jf27w0RlsySDDMqsmhstBshShK+YrVrEmV79rjd7h0qWZuVbULewzq3kOwArU1Ns0rRUFAuMvNSn1+zb+dIhMx6ntIhz2qAYxmJVIMOJv0fZn4Ikmvya/btVOVEaHJSioaC2tS0uT4CKDhggJ4yyeU1Ns8AkELYmNXeAIdVz5Ho8UXAixIehHlMxRIAgEBEAJHJrAaQosKFGOKRiNw/5prYPBI+Ev5ZAb2+CCZCPBIScH8qjjAnLtXMQyQ7EAcfi4C22QFQKrLTQoAdt5nyy8ZnOIzPcPMEbCYCQoAdBzCtok/BYDIhFJiU2zeg4EBInPIHNUbaCtpuVzHgG/Y0X9hu5bwLRbPdynmHPc0XVNIP0Ha7xkhbxSl/MPmWJDsQFNmbLACQRbtccmP5Czo7Oy/pultadjOi12b6M3k2E4HdjOjVdbe0yLVACbNsE/IewbmF5DogJtgRnb60dpvWnGrkB87eBKC8DaHB3mv37KFRdlteRrw43ThTlMqzudF7V72t73/85eeffa0aPbDOUPlWLfQUFWttbAbwy0JZzKTqmk5ZjneNEEU1R9WykITHLcVmoqjmqOV41whV13RKWYqVvWAsdv5Eu8RFw4aS2goArkUM+wDckh+1qOfgMpTUVkhcNBw7f6JdOarNb8dcZEZjTrERa7cU67JdK4WhDt8jNlgMW4x7TzZo7Y48vt9zLvHzlW+V7VhtHggnvP1+bXqunXA4S3XZLkYY6ggCCCxhJjADKDXuPdmgY9a7hLu9V+Ke9z5RO/uFJiK/MHz5gTY910Y4nKX6QnehJCWs4sSdsBzBQo6YAawjimrqja+9+6bW7shLGsluqCn8q4fSOTzTsTwZz+zHRImn+mv2P34HCxpK+l8fMMcAAAAASUVORK5CYII=") 16 16, auto;
   --cursor-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CradialGradient id='w' cx='38%25' cy='28%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.4'/%3E%3Cstop offset='.55' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='13.6' fill='none' stroke='%23000' stroke-opacity='.3' stroke-width='1.6'/%3E%3Ccircle cx='16' cy='16' r='12.5' fill='%230D8BD1' fill-opacity='.16'/%3E%3Ccircle cx='16' cy='16' r='12.5' fill='url(%23w)'/%3E%3Ccircle cx='16' cy='16' r='12.5' fill='none' stroke='%230D8BD1' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='2.4' fill='%23000' fill-opacity='.3'/%3E%3Ccircle cx='16' cy='16' r='1.8' fill='%23fff'/%3E%3C/svg%3E") 16 16,
      url("data:image/png;base64,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") 16 16, pointer;

   --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 ============ */

/* Asked for less see-through, every glass surface is the solid one it stands
   in for. The light on the rims stays: it is what gives the edges shape. */
@media (prefers-reduced-transparency: reduce) {
   :root {
      --glass-clear: var(--c-surface);
      --glass-clear-blur: none;
      --glass-frost: var(--c-surface);
      --glass-frost-blur: none;
      --glass-card: var(--c-surface);
      --glass-sheet: var(--c-surface);
      --glass-sheet-blur: none;
   }
}

/* Lite mode (see lite in main.js): a device that cannot keep up keeps the
   glass but loses the blur behind it, which is the costliest thing the page
   draws — redone for every pixel under the glass on every frame anything
   behind it moves. Unblurred, see-through would let the page read through
   the glass, so each sheen is laid on the solid it was tinting instead: the
   page's own dark under the clear glass, which mostly sits on it already, and
   the surface under the frost and the sheet, the colour their tint was. */
:root.is-lite {
   --glass-clear: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .06)), var(--c-bg);
   --glass-clear-blur: none;
   --glass-frost: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 55%), var(--c-surface);
   --glass-frost-blur: none;
   --glass-sheet: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 45%, rgba(255, 255, 255, .04)), var(--c-surface);
   --glass-sheet-blur: none;
}

@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;
   }
}