/*
 * Design tokens mirrored from the Figma variables
 * (Phase2 Website Explorations). Names follow the Figma collection paths.
 *
 * This file is the source of truth for the site's tokens. It began as a copy
 * of prototype/src/styles/tokens.css; the prototype is deprecated (2026-10-28)
 * and no longer kept in step, so change tokens here.
 *
 * Every top-level block below is `:root, :host` rather than just `:root`:
 * Webflow renders each component in its own Shadow DOM, where `:root` never
 * matches anything (it only matches the top-level document element) — only
 * `:host` reaches the shadow root's host element from inside. The local Vite
 * preview and Storybook have no shadow boundary, where `:host` matches
 * nothing and `:root` is what applies — the pair covers both.
 */
:host,
:host {
  /* Color */
  --text-primary: #171717;
  --text-inverse: #ffffff;
  --background-default: #ffffff; /* white surfaces, e.g. the "Let's talk" button */
  --neutral-50: #f5f5f5; /* the off-white every page sits on (Figma neutral/neutral-50) */
  --background-page: var(--neutral-50); /* site background, softer than pure white */
  --neutral-700: #353535;
  --border-default: #595959;
  --border-lightest: #cfc7d4; /* Figma border/lightest: dashed dividers */
  --action-primary-default: #0073e6; /* brand blue */
  /* Brand palette (Figma brand/*; docs/design-tokens.md) */
  --brand-blue-300: #7fc7ee;
  --brand-blue-400: #4d9ae8;
  --brand-blue-500: #0073e6;
  --brand-blue-600: #005db9;
  --brand-teal-300: #73f2e5;
  --brand-teal-400: #14baa9;
  --brand-magenta-500: #be02b3;
  --brand-violet-200: #b8aeff;
  --brand-violet-300: #9484ff;
  --brand-violet-400: #8473f5;
  --brand-coral-500: #fa5c5c;
  /* Link text: brand blue 600, 5.9:1 on neutral-50 and 6.4:1 on white (the action blue is 4.2:1 on neutral-50, too light for text). Links are set two weights over the text (600) with a dotted underline; hover and keyboard focus turn them soft black with a solid line, and on a dark background they are white, the line turning solid (user ruling 2026-10-26; the rule is in library/src/shared/Prose/proseCss.ts). Change the link colour here. */
  --text-link: var(--brand-blue-600);
  --text-link-hover: var(--brand-blue-600);

  /* Motion */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-wipe: 450ms;
  --duration-fade: 300ms;

  /* Type: family + weights */
  --type-family-base: 'Raleway', system-ui, sans-serif;
  --type-family-mono: 'IBM Plex Mono', ui-monospace, monospace; /* only the saved explorations use it now */
  --type-weight-light: 300;
  --type-weight-regular: 400;
  --type-weight-semibold: 600;
  --type-weight-bold: 700;

  /* Typography/Utility/Eyebrow */
  --type-size-eyebrow: 16px;
  --type-line-height-eyebrow: 22px;
  --type-letter-spacing-eyebrow: 5.4px;

  /* Typography/Heading/Display (hero title, not tokenized in Figma) */
  --type-size-display: 75px;
  --type-line-height-display: 79px;
  --type-letter-spacing-h2: 0;

  /* Typography/Heading/H4 */
  --type-size-h4: 42px;
  --type-line-height-h3: 64px;
  --type-letter-spacing-h3: 0;

  /*
   * Type scale (Figma Typography styles, named by role and size). Each style is
   * fluid: its Clamp Min value at a 390px window, its full value at 2000px and
   * above. Between, it holds back through the middle widths: two straight
   * segments meeting at a knee at 1195px (halfway), where it's only 30% of the
   * way from min to full, then rising faster to full at 2000px (max() of the
   * two lines; min() where the value falls, as negative tracking does).
   * Per style: -size, -weight, -lh (line height) and -ls (letter spacing).
   */
  /* Display / XL: 120/40px, weight 300 (Display / XL Medium: the same at 500) */
  --type-display-xl-size: clamp(40px, max(28.373px + 2.9814vw, -19.130px + 6.9565vw), 120px);
  --type-display-xl-weight: 300;
  --type-display-xl-medium-weight: 500;
  --type-display-xl-lh: clamp(46px, max(32.629px + 3.4286vw, -22.000px + 8.0000vw), 138px);
  --type-display-xl-ls: clamp(-2.04px, min(-0.482px - 0.0507vw, 0.325px - 0.1183vw), -0.68px);
  /* Display / L: 100/40px, weight 200 */
  --type-display-l-size: clamp(40px, max(31.280px + 2.2360vw, -4.348px + 5.2174vw), 100px);
  --type-display-l-weight: 200;
  --type-display-l-lh: clamp(41px, max(32.134px + 2.2733vw, -4.087px + 5.3043vw), 102px);
  --type-display-l-ls: clamp(-2px, min(-0.626px - 0.0447vw, 0.087px - 0.1043vw), -0.8px);
  /* Heading / XL: 78/36px, weight 300 */
  --type-heading-xl-size: clamp(36px, max(29.896px + 1.5652vw, 4.957px + 3.6522vw), 78px);
  --type-heading-xl-weight: 300;
  --type-heading-xl-lh: clamp(40px, max(33.314px + 1.7143vw, 6.000px + 4.0000vw), 86px);
  --type-heading-xl-ls: clamp(-1.56px, min(-0.598px - 0.0313vw, -0.099px - 0.0730vw), -0.72px);
  /* Heading / L: 54/32px, weight 300 */
  --type-heading-l-size: clamp(32px, max(28.802px + 0.8199vw, 15.739px + 1.9130vw), 54px);
  --type-heading-l-weight: 300;
  --type-heading-l-lh: clamp(35px, max(31.512px + 0.8944vw, 17.261px + 2.0870vw), 59px);
  --type-heading-l-ls: clamp(-1.08px, min(-0.576px - 0.0164vw, -0.315px - 0.0383vw), -0.64px);
  /* Heading / M: 42/26px, weight 300 */
  --type-heading-m-size: clamp(26px, max(23.675px + 0.5963vw, 14.174px + 1.3913vw), 42px);
  --type-heading-m-weight: 300;
  --type-heading-m-lh: clamp(31px, max(28.239px + 0.7081vw, 16.957px + 1.6522vw), 50px);
  --type-heading-m-ls: 0;
  /* Heading / S: 35/24px, weight 500 */
  --type-heading-s-size: clamp(24px, max(22.401px + 0.4099vw, 15.870px + 0.9565vw), 35px);
  --type-heading-s-weight: 500;
  --type-heading-s-lh: clamp(31px, max(28.820px + 0.5590vw, 19.913px + 1.3043vw), 46px);
  --type-heading-s-ls: 0;
  /* Heading / XS: 29/22px, weight 600 */
  --type-heading-xs-size: clamp(22px, max(20.983px + 0.2609vw, 16.826px + 0.6087vw), 29px);
  --type-heading-xs-weight: 600;
  --type-heading-xs-lh: clamp(29px, max(27.692px + 0.3354vw, 22.348px + 0.7826vw), 38px);
  --type-heading-xs-ls: 0;
  /* Body / Statement: 49/28px, weight 600 */
  --type-statement-size: clamp(28px, max(24.948px + 0.7826vw, 12.478px + 1.8261vw), 49px);
  --type-statement-weight: 600;
  --type-statement-lh: clamp(30px, max(26.802px + 0.8199vw, 13.739px + 1.9130vw), 52px);
  --type-statement-ls: 0;
  /* Body / Lead: 28/19px, weight 400 */
  --type-lead-size: clamp(19px, max(17.692px + 0.3354vw, 12.348px + 0.7826vw), 28px);
  --type-lead-weight: 400;
  --type-lead-lh: clamp(28px, max(25.965px + 0.5217vw, 17.652px + 1.2174vw), 42px);
  --type-lead-ls: 0;
  /* Body / Large: 22/18px, weight 400 */
  --type-large-size: clamp(18px, max(17.419px + 0.1491vw, 15.043px + 0.3478vw), 22px);
  --type-large-weight: 400;
  --type-large-lh: clamp(24px, max(22.837px + 0.2981vw, 18.087px + 0.6957vw), 32px);
  --type-large-ls: 0;
  /* Body / Default: 19/16px, weight 400 */
  --type-default-size: clamp(16px, max(15.564px + 0.1118vw, 13.783px + 0.2609vw), 19px);
  --type-default-weight: 400;
  --type-default-lh: clamp(23px, max(21.837px + 0.2981vw, 17.087px + 0.6957vw), 31px);
  --type-default-ls: 0;
  /* Body / Small: 16px, weight 400 */
  --type-small-size: 16px;
  --type-small-weight: 400;
  --type-small-lh: 24px;
  --type-small-ls: 0;
  /* Utility / Caption: 14px, weight 500 */
  --type-caption-size: 14px;
  --type-caption-weight: 500;
  --type-caption-lh: 20px;
  --type-caption-ls: 0;
  /* Utility / Eyebrow (uppercase): 16/14px, weight 600 */
  --type-eyebrow-size: clamp(14px, max(13.709px + 0.0745vw, 12.522px + 0.1739vw), 16px);
  --type-eyebrow-weight: 600;
  --type-eyebrow-lh: 22px;
  --type-eyebrow-ls: clamp(3.4px, max(3.109px + 0.0745vw, 1.922px + 0.1739vw), 5.4px);
  /* Utility / Eyebrow Small (uppercase): 14/12px, weight 700 */
  --type-eyebrow-small-size: clamp(12px, max(11.709px + 0.0745vw, 10.522px + 0.1739vw), 14px);
  --type-eyebrow-small-weight: 700;
  --type-eyebrow-small-lh: 17px;
  --type-eyebrow-small-ls: 4.06px;
  /* Utility / CTA (uppercase): 16/14px, weight 800 */
  --type-cta-size: clamp(14px, max(13.709px + 0.0745vw, 12.522px + 0.1739vw), 16px);
  --type-cta-weight: 800;
  --type-cta-lh: 20px;
  --type-cta-ls: 2.56px;
  /* Utility / Nav (the header menu): 17/14px, weight 600 */
  --type-nav-size: clamp(14px, max(13.564px + 0.1118vw, 11.783px + 0.2609vw), 17px);
  --type-nav-weight: 600;
  --type-nav-lh: 20px;
  --type-nav-ls: 0.2px;
  /* Utility / Nav Large (the footer link columns): 21/17px, weight 400 */
  --type-nav-large-size: clamp(17px, max(16.419px + 0.1491vw, 14.043px + 0.3478vw), 21px);
  --type-nav-large-weight: 400;
  --type-nav-large-lh: clamp(20px, max(19.273px + 0.1863vw, 16.304px + 0.4348vw), 25px);
  --type-nav-large-ls: clamp(0.34px, max(0.328px + 0.0030vw, 0.281px + 0.0070vw), 0.42px);

  /* Typography/Utility/CTA (buttons) */
  --type-size-cta: 16px;
  --type-line-height-cta: 20px;

  /* Typography/Body/Default */
  --type-size-body-default: 19px;
  --type-line-height-body-default: 31px;
  --type-letter-spacing-body-default: 0;

  /*
   * Layout: content fills the viewport with a side gutter, 64px, and no wider
   * than --content-width (the gutter grows on wider windows, so everything in
   * it stays within that width, centred). Full-bleed components ignore the
   * gutter.
   */
  --content-width: 1600px;
  --page-gutter-min: 64px; /* the gutter itself, before it grows (for parts placed by it on full-width artwork) */
  --page-gutter: max(var(--page-gutter-min), (100vw - var(--content-width)) / 2);

  /*
   * library-specific additions — not yet in prototype/src/styles/tokens.css.
   * Keep this block in sync manually if/when these get promoted upstream.
   */
  --text-primary-rgb: 23 23 23; /* same color as --text-primary, as r g b for use with rgb(var(...) / alpha) — GlassHeader's --tone */
  --text-inverse-rgb: 255 255 255; /* same color as --text-inverse, as r g b — GlassHeader's --tone-inverse */
  --background-inverse: #171717; /* CaseStudyCard, HowWeWork */

  /*
   * Heading H1-XL, H1 and H2–H5: fluid size and line height, computed from three
   * numbers each.
   *   floor    at a 390px window and below
   *   base     at a 1440px window
   *   ceiling  at a 2000px window and above
   * Straight lines between the three points. A base equal to the ceiling (H3 and H4 size,
   * H3 and H5 line height, H5 size) means the value stops growing at 1440px.
   * The numbers are unitless px so the curve can be computed in CSS (--type-<level>-size
   * / -lh below, used by shared/Heading); change a number here and the curve follows.
   * Library-only: this scale isn't mirrored from the prototype's tokens. Where each step
   * comes from in the prototype's type scale: H1-XL = Display XL, H1 = Display L, H2 = Heading XL,
   * H3 = Heading L, H4 = Heading M; H5 has no prototype style (it is the Webflow token). H1's line-height base (72) is that
   * style's own curve at 1440px; the others' floor and base follow the design system's
   * Typography tokens (docs/design-tokens.md).
   * Letter spacing (-ls) is the prototype's own curve, not tied to the 1440px base.
   * Weights live in shared/Heading (all 300).
   */
  --type-fluid-from: 390;
  --type-fluid-base-at: 1440;
  --type-fluid-to: 2000;
  /* H1-XL (Display XL) */
  --type-h1-xl-size-floor: 41;
  --type-h1-xl-size-base: 74;
  --type-h1-xl-size-ceiling: 120;
  --type-h1-xl-lh-floor: 50;
  --type-h1-xl-lh-base: 80;
  --type-h1-xl-lh-ceiling: 138;
  /* H1 (Display L) */
  --type-h1-size-floor: 40;
  --type-h1-size-base: 70;
  --type-h1-size-ceiling: 100;
  --type-h1-lh-floor: 41;
  --type-h1-lh-base: 72;
  --type-h1-lh-ceiling: 102;
  /* H2 (Heading XL) */
  --type-h2-size-floor: 36;
  --type-h2-size-base: 60;
  --type-h2-size-ceiling: 78;
  --type-h2-lh-floor: 44;
  --type-h2-lh-base: 68;
  --type-h2-lh-ceiling: 86;
  /* H3 (Heading L) */
  --type-h3-size-floor: 30;
  --type-h3-size-base: 54;
  --type-h3-size-ceiling: 54;
  --type-h3-lh-floor: 38;
  --type-h3-lh-base: 64;
  --type-h3-lh-ceiling: 64;
  /* H4 (Heading M) */
  --type-h4-size-floor: 25;
  --type-h4-size-base: 42;
  --type-h4-size-ceiling: 42;
  --type-h4-lh-floor: 32;
  --type-h4-lh-base: 48;
  --type-h4-lh-ceiling: 50;
  /* H5 (Webflow token; no prototype style) */
  --type-h5-size-floor: 22;
  --type-h5-size-base: 38;
  --type-h5-size-ceiling: 38;
  --type-h5-lh-floor: 30;
  --type-h5-lh-base: 42;
  --type-h5-lh-ceiling: 42;

  /* Derived, used by shared/Heading */
  --type-h1-xl-size: calc(var(--type-h1-xl-size-floor) * 1px + (var(--type-h1-xl-size-base) - var(--type-h1-xl-size-floor)) * clamp(0px, 100vw - var(--type-fluid-from) * 1px, (var(--type-fluid-base-at) - var(--type-fluid-from)) * 1px) / (var(--type-fluid-base-at) - var(--type-fluid-from)) + (var(--type-h1-xl-size-ceiling) - var(--type-h1-xl-size-base)) * clamp(0px, 100vw - var(--type-fluid-base-at) * 1px, (var(--type-fluid-to) - var(--type-fluid-base-at)) * 1px) / (var(--type-fluid-to) - var(--type-fluid-base-at)));
  --type-h1-xl-lh: calc(var(--type-h1-xl-lh-floor) * 1px + (var(--type-h1-xl-lh-base) - var(--type-h1-xl-lh-floor)) * clamp(0px, 100vw - var(--type-fluid-from) * 1px, (var(--type-fluid-base-at) - var(--type-fluid-from)) * 1px) / (var(--type-fluid-base-at) - var(--type-fluid-from)) + (var(--type-h1-xl-lh-ceiling) - var(--type-h1-xl-lh-base)) * clamp(0px, 100vw - var(--type-fluid-base-at) * 1px, (var(--type-fluid-to) - var(--type-fluid-base-at)) * 1px) / (var(--type-fluid-to) - var(--type-fluid-base-at)));
  --type-h1-xl-ls: clamp(-2.04px, min(-0.482px - 0.0507vw, 0.325px - 0.1183vw), -0.68px);
  --type-h1-size: calc(var(--type-h1-size-floor) * 1px + (var(--type-h1-size-base) - var(--type-h1-size-floor)) * clamp(0px, 100vw - var(--type-fluid-from) * 1px, (var(--type-fluid-base-at) - var(--type-fluid-from)) * 1px) / (var(--type-fluid-base-at) - var(--type-fluid-from)) + (var(--type-h1-size-ceiling) - var(--type-h1-size-base)) * clamp(0px, 100vw - var(--type-fluid-base-at) * 1px, (var(--type-fluid-to) - var(--type-fluid-base-at)) * 1px) / (var(--type-fluid-to) - var(--type-fluid-base-at)));
  --type-h1-lh: calc(var(--type-h1-lh-floor) * 1px + (var(--type-h1-lh-base) - var(--type-h1-lh-floor)) * clamp(0px, 100vw - var(--type-fluid-from) * 1px, (var(--type-fluid-base-at) - var(--type-fluid-from)) * 1px) / (var(--type-fluid-base-at) - var(--type-fluid-from)) + (var(--type-h1-lh-ceiling) - var(--type-h1-lh-base)) * clamp(0px, 100vw - var(--type-fluid-base-at) * 1px, (var(--type-fluid-to) - var(--type-fluid-base-at)) * 1px) / (var(--type-fluid-to) - var(--type-fluid-base-at)));
  --type-h1-ls: clamp(-2px, min(-0.626px - 0.0447vw, 0.087px - 0.1043vw), -0.8px);
  --type-h2-size: calc(var(--type-h2-size-floor) * 1px + (var(--type-h2-size-base) - var(--type-h2-size-floor)) * clamp(0px, 100vw - var(--type-fluid-from) * 1px, (var(--type-fluid-base-at) - var(--type-fluid-from)) * 1px) / (var(--type-fluid-base-at) - var(--type-fluid-from)) + (var(--type-h2-size-ceiling) - var(--type-h2-size-base)) * clamp(0px, 100vw - var(--type-fluid-base-at) * 1px, (var(--type-fluid-to) - var(--type-fluid-base-at)) * 1px) / (var(--type-fluid-to) - var(--type-fluid-base-at)));
  --type-h2-lh: calc(var(--type-h2-lh-floor) * 1px + (var(--type-h2-lh-base) - var(--type-h2-lh-floor)) * clamp(0px, 100vw - var(--type-fluid-from) * 1px, (var(--type-fluid-base-at) - var(--type-fluid-from)) * 1px) / (var(--type-fluid-base-at) - var(--type-fluid-from)) + (var(--type-h2-lh-ceiling) - var(--type-h2-lh-base)) * clamp(0px, 100vw - var(--type-fluid-base-at) * 1px, (var(--type-fluid-to) - var(--type-fluid-base-at)) * 1px) / (var(--type-fluid-to) - var(--type-fluid-base-at)));
  --type-h2-ls: clamp(-1.56px, min(-0.598px - 0.0313vw, -0.099px - 0.0730vw), -0.72px);
  --type-h3-size: calc(var(--type-h3-size-floor) * 1px + (var(--type-h3-size-base) - var(--type-h3-size-floor)) * clamp(0px, 100vw - var(--type-fluid-from) * 1px, (var(--type-fluid-base-at) - var(--type-fluid-from)) * 1px) / (var(--type-fluid-base-at) - var(--type-fluid-from)) + (var(--type-h3-size-ceiling) - var(--type-h3-size-base)) * clamp(0px, 100vw - var(--type-fluid-base-at) * 1px, (var(--type-fluid-to) - var(--type-fluid-base-at)) * 1px) / (var(--type-fluid-to) - var(--type-fluid-base-at)));
  --type-h3-lh: calc(var(--type-h3-lh-floor) * 1px + (var(--type-h3-lh-base) - var(--type-h3-lh-floor)) * clamp(0px, 100vw - var(--type-fluid-from) * 1px, (var(--type-fluid-base-at) - var(--type-fluid-from)) * 1px) / (var(--type-fluid-base-at) - var(--type-fluid-from)) + (var(--type-h3-lh-ceiling) - var(--type-h3-lh-base)) * clamp(0px, 100vw - var(--type-fluid-base-at) * 1px, (var(--type-fluid-to) - var(--type-fluid-base-at)) * 1px) / (var(--type-fluid-to) - var(--type-fluid-base-at)));
  --type-h3-ls: clamp(-1.08px, min(-0.576px - 0.0164vw, -0.315px - 0.0383vw), -0.64px);
  --type-h4-size: calc(var(--type-h4-size-floor) * 1px + (var(--type-h4-size-base) - var(--type-h4-size-floor)) * clamp(0px, 100vw - var(--type-fluid-from) * 1px, (var(--type-fluid-base-at) - var(--type-fluid-from)) * 1px) / (var(--type-fluid-base-at) - var(--type-fluid-from)) + (var(--type-h4-size-ceiling) - var(--type-h4-size-base)) * clamp(0px, 100vw - var(--type-fluid-base-at) * 1px, (var(--type-fluid-to) - var(--type-fluid-base-at)) * 1px) / (var(--type-fluid-to) - var(--type-fluid-base-at)));
  --type-h4-lh: calc(var(--type-h4-lh-floor) * 1px + (var(--type-h4-lh-base) - var(--type-h4-lh-floor)) * clamp(0px, 100vw - var(--type-fluid-from) * 1px, (var(--type-fluid-base-at) - var(--type-fluid-from)) * 1px) / (var(--type-fluid-base-at) - var(--type-fluid-from)) + (var(--type-h4-lh-ceiling) - var(--type-h4-lh-base)) * clamp(0px, 100vw - var(--type-fluid-base-at) * 1px, (var(--type-fluid-to) - var(--type-fluid-base-at)) * 1px) / (var(--type-fluid-to) - var(--type-fluid-base-at)));
  --type-h4-ls: 0;
  --type-h5-size: calc(var(--type-h5-size-floor) * 1px + (var(--type-h5-size-base) - var(--type-h5-size-floor)) * clamp(0px, 100vw - var(--type-fluid-from) * 1px, (var(--type-fluid-base-at) - var(--type-fluid-from)) * 1px) / (var(--type-fluid-base-at) - var(--type-fluid-from)) + (var(--type-h5-size-ceiling) - var(--type-h5-size-base)) * clamp(0px, 100vw - var(--type-fluid-base-at) * 1px, (var(--type-fluid-to) - var(--type-fluid-base-at)) * 1px) / (var(--type-fluid-to) - var(--type-fluid-base-at)));
  --type-h5-lh: calc(var(--type-h5-lh-floor) * 1px + (var(--type-h5-lh-base) - var(--type-h5-lh-floor)) * clamp(0px, 100vw - var(--type-fluid-from) * 1px, (var(--type-fluid-base-at) - var(--type-fluid-from)) * 1px) / (var(--type-fluid-base-at) - var(--type-fluid-from)) + (var(--type-h5-lh-ceiling) - var(--type-h5-lh-base)) * clamp(0px, 100vw - var(--type-fluid-base-at) * 1px, (var(--type-fluid-to) - var(--type-fluid-base-at)) * 1px) / (var(--type-fluid-to) - var(--type-fluid-base-at)));
  --type-h5-ls: 0;

}

/*
 * The homepage (its hero, data-hero, is on the page): the gutter as it was,
 * not capped to --content-width. `:host:has([data-hero])` only reaches
 * data-hero when it's inside the SAME shadow tree — it corrects Hero's own
 * gutter, but can't see across shadow boundaries into a sibling component's
 * tree, so this override doesn't propagate to other components on a live
 * Webflow page the way a single-document `:root:has()` does in the
 * prototype. No current CSS-only fix for that; known gap, not addressed here.
 */
:host:has([data-hero]),
:host:has([data-hero]) {
  --page-gutter: var(--page-gutter-min);
}

/* 20px from phones up to 1100px (the breakpoint where the wider layouts start), 64px above. */
@media (max-width: 1100px) {
  :host,
  :host {
    --page-gutter-min: 20px;
    --page-gutter: 20px;
  }
}

/*
 * The services nav (see ServiceIndexNav.tsx), ported from the prototype's
 * pages/WhatWeDo/ServiceIndex.module.css (.side, .eyebrow, .nav*, .pill).

 * Pinning: .side is sticky (top: --p2-pin, set from the Pin at prop), which
 * works when the host has no box of its own (display: contents) and .side is
 * the grid item; the component also styles its host sticky from code for the
 * case where the host is a block. Whichever has the box pins.
 */

/* A code component's Shadow DOM doesn't inherit the page's box-sizing reset or font smoothing. */
.yCYNWlH2XkvpsnRssGOz,
.yCYNWlH2XkvpsnRssGOz *,
.yCYNWlH2XkvpsnRssGOz *::before,
.yCYNWlH2XkvpsnRssGOz *::after {
  box-sizing: border-box;
}

.yCYNWlH2XkvpsnRssGOz {
  position: sticky;
  top: var(--p2-pin, 200px);
  align-self: start;
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  color: var(--text-primary, #171717);
}

/* The eyebrow (Utility / Eyebrow), 24px over the nav at 1728, in from the left as far as the nav's labels (their pills' padding). */
.TKxySls84HoB0wVh_7HP {
  margin: 0 0 max(16px, 1.39vw);
  padding-left: 24px;
  color: var(--text-primary, #171717);
  font-size: var(--type-eyebrow-size, 16px);
  font-weight: var(--type-eyebrow-weight, 600);
  line-height: var(--type-eyebrow-lh, 22px);
  letter-spacing: var(--type-eyebrow-ls, 4px);
  text-transform: uppercase;
}

.K8i89kLP8ctZQjRajeii {
  --gap: 4px;
  --item-h: calc(var(--type-large-lh, 26px) + 24px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * The pill behind the one being read: the row's colour (brand blue until a
 * row is read), an item tall, sliding to it (every item the one height: a
 * line of Body Large in 12px of padding).
 */
.Hgws965Jd01y0NKjOhOd {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--item-h);
  border-radius: 999px;
  background: var(--hue, var(--action-primary-default, #0073e6));
  translate: 0 calc(var(--current, 0) * (var(--item-h) + var(--gap)));
  transition:
    translate 500ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 500ms ease;
  pointer-events: none;
}

/* Each service's key words: Body Large, SemiBold, soft black; on the pill, the ink that reads on its colour. */
.w1ee5HFe725Ejzfh8KbJ {
  position: relative;
  display: block;
  width: 100%;
  height: var(--item-h);
  margin: 0;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-primary, #171717);
  font: inherit;
  font-size: var(--type-large-size, 18px);
  font-weight: var(--type-weight-semibold, 600);
  line-height: var(--type-large-lh, 26px);
  letter-spacing: var(--type-large-ls, 0);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 350ms ease;
}

.w1ee5HFe725Ejzfh8KbJ:hover {
  color: var(--action-primary-default, #0073e6);
}

.w1ee5HFe725Ejzfh8KbJ[aria-current='true'],
.w1ee5HFe725Ejzfh8KbJ[aria-current='true']:hover {
  color: var(--ink, var(--text-inverse, #ffffff));
}

.w1ee5HFe725Ejzfh8KbJ:focus-visible {
  outline: 2px solid var(--action-primary-default, #0073e6);
  outline-offset: 2px;
}

/* On the canvas, with no rows yet. */
.i3FdLuh85K4voE3Rt_zS {
  margin: 0;
  padding: 12px 24px;
  color: var(--neutral-700, #353535);
  font-size: var(--type-default-size, 16px);
  line-height: var(--type-default-lh, 23px);
}

/* Under 992px: no nav; the eyebrow alone, close over the rows. */
@media (max-width: 991px) {
  .TKxySls84HoB0wVh_7HP {
    margin-bottom: 0;
    padding-left: 0;
  }

  .J27_PszbDkefyvSxFpyN {
    display: none;
  }

  .yCYNWlH2XkvpsnRssGOz {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Hgws965Jd01y0NKjOhOd,
  .w1ee5HFe725Ejzfh8KbJ {
    transition: none !important;
  }
}