/*
 * 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;
  }
}

/* A single-color icon: the file's shape (a mask) in the text's color. The caller sizes it. */
.xlR7lwW0oAikYgPs92XT {
  display: inline-block;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/*
 * The row graphic's own styles (the radial slice graphic behind a row/card),
 * moved out of ServiceRowsGrid.module.css unchanged so ServiceRowsGrid and the
 * Topic Section share them. The graphic reads its colors and easing from
 * custom properties the consumer sets on an ancestor: --ease-soft,
 * --service-row-rest, --service-row-active, --row-ring, --row-ray, --row-slice,
 * --row-node and their -active twins (see ServiceRowsGrid.module.css .grid).
 */

.sOMWkBECHg4oxBv6wBZw {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.FW6Pqda50wuSElPEAUZ3 {
  position: absolute;
  width: 0;
  height: 0;
}

.faYC6yr0MiwjFTmRDfDf {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
}

._neGEyIB5CWTeasZzPsP {
  fill: var(--service-row-rest);
  transition: fill 500ms var(--ease-soft);
}

.wG0jP5jrDastlBrjOUzB[data-state='active'] ._neGEyIB5CWTeasZzPsP {
  fill: var(--service-row-active);
}

/*
 * Grid: dotted rings (toned down to the ray color at rest, like the rays
 * themselves — see --row-ray above), dashed rays. Shape outlines and nodes
 * stay hidden until hovered, then appear as the sweep passes them.
 */
.fpOStQ6tvY3Bao4L5vz5 {
  fill: none;
  stroke: var(--row-ray);
  stroke-dasharray: 2 2;
  transition:
    stroke 500ms var(--ease-soft),
    opacity 400ms ease;
}

.fpOStQ6tvY3Bao4L5vz5 circle[data-outer] {
  opacity: 0;
}

.wG0jP5jrDastlBrjOUzB[data-state='active'] .fpOStQ6tvY3Bao4L5vz5 {
  stroke: var(--row-ring-active);
}

.wG0jP5jrDastlBrjOUzB[data-state='active'] .fpOStQ6tvY3Bao4L5vz5 circle[data-outer] {
  opacity: 1;
}

.UhZiDpo0QUz9FkLs5MhT {
  stroke: var(--row-ray);
  stroke-dasharray: 2 2;
  transition: stroke 500ms var(--ease-soft);
}

.wG0jP5jrDastlBrjOUzB[data-state='active'] .UhZiDpo0QUz9FkLs5MhT {
  stroke: var(--row-ray-active);
}

.Nthg7tL22JAs0hwfa6O_ {
  fill: none;
  stroke-width: 1;
  stroke-opacity: 0.6;
  stroke-dasharray: 2 2;
  opacity: 0;
  transition:
    opacity 400ms ease,
    stroke 500ms var(--ease-soft),
    stroke-opacity 250ms ease;
}

.wG0jP5jrDastlBrjOUzB[data-state='active'] .Nthg7tL22JAs0hwfa6O_ {
  opacity: 1;
  stroke-opacity: 1;
  transition-delay: var(--sweep-at, 0ms);
}

.sATcUWK4IiKJCPOsr7i7 {
  stroke: var(--row-slice);
  stroke-width: 1;
  transition: stroke 500ms var(--ease-soft);
}

.wG0jP5jrDastlBrjOUzB[data-state='active'] .sATcUWK4IiKJCPOsr7i7 {
  stroke: var(--row-slice-active);
}

.UwWNyEK8MJw4efzcNBsd {
  fill: var(--row-node);
  opacity: 0;
  transition:
    opacity 400ms ease,
    fill 250ms ease;
}

.wG0jP5jrDastlBrjOUzB[data-state='active'] .UwWNyEK8MJw4efzcNBsd {
  opacity: 1;
  fill: var(--row-node-active);
  transition-delay: var(--sweep-at, 0ms);
}

/*
 * Clockwise sweep on hover/focus: the mask blade rotates around the row's
 * corner. In: starts at speed and eases off, so the color is visibly moving
 * at once. Out: starts at full speed the moment the mouse/focus leaves, then
 * settles, so nothing lingers.
 */
.zqGyrbgHK9ctO3ScmwMZ {
  transition: transform var(--sweep-ms, 1100ms) cubic-bezier(0.25, 0.8, 0.35, 1);
}

.CG80_JtsB9RxdINkKDod {
  transition: transform var(--sweep-ms, 1100ms) cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :is(.fpOStQ6tvY3Bao4L5vz5, .UhZiDpo0QUz9FkLs5MhT, .Nthg7tL22JAs0hwfa6O_, .sATcUWK4IiKJCPOsr7i7, .UwWNyEK8MJw4efzcNBsd, ._neGEyIB5CWTeasZzPsP, .zqGyrbgHK9ctO3ScmwMZ, .CG80_JtsB9RxdINkKDod) {
    transition: none;
  }
}

/*
 * Ported from prototype/src/components/CapabilityStack/CapabilityStack.module.css (one box of
 * it). A code component's Shadow DOM has no page reset, so it carries its own box-sizing; the
 * prototype's wrapper (the stack's width and the gap between boxes) is the page's layout, not
 * the section's, so the section is as wide as whatever holds it.
 */
.Uxs1HKljDmtp83tYwMD_,
.Uxs1HKljDmtp83tYwMD_ *,
.Uxs1HKljDmtp83tYwMD_ *::before,
.Uxs1HKljDmtp83tYwMD_ *::after {
  box-sizing: border-box;
}

/*
 * The host is the element the page's #links and the menu scroll to (in Storybook, with no shadow
 * root, the row is its own host); clear of the header, and on phones of the menu's dropdown too
 * (the 767px breakpoint is InPageMenu's, where it turns into that dropdown).
 */
:host,
.Uxs1HKljDmtp83tYwMD_ {
  scroll-margin-top: 120px;
}

:host {
  display: block;
}

.Uxs1HKljDmtp83tYwMD_ {
  --inset: 10px;
  --fade: 400ms ease;
  --box-pad: max(28px, 2.78vw);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  /* The row graphic's colors: white at rest, no grid (only the active box's sweep), soft black while active. */
  --service-row-rest: #fff;
  --service-row-active: var(--text-primary, #171717);
  --row-ring: transparent;
  --row-ray: transparent;
  --row-slice: rgb(255 255 255 / 0.9);
  --row-node: var(--text-primary, #171717);
  --row-ring-active: rgb(255 255 255 / 0.2);
  --row-ray-active: rgb(255 255 255 / 0.35);
  --row-slice-active: rgb(0 0 0 / 0.35);
  --row-node-active: var(--text-inverse, #fff);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  border-radius: 32px;
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
}

/* Canvas only: what the section says it is missing. */
.Jrqh51BKuehY00ZKe_ja {
  margin: 0;
  padding: 16px 20px;
  border: 1px dashed currentColor;
  border-radius: 12px;
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
  font-size: 14px;
}

/* A 20% soft black wash over the graphic while active, under the type. */
.iM5nLyld5GN68TOc80fH {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: rgb(23 23 23 / 0.2);
  opacity: 0;
  transition: opacity var(--fade);
  pointer-events: none;
}

.Uxs1HKljDmtp83tYwMD_[data-active='true'] .iM5nLyld5GN68TOc80fH {
  opacity: 1;
}

/*
 * The box: the item at the top, what is inside in an off-white box nested inside, 10px in
 * from its sides and foot (22px corners, concentric with the box's). While active (data-active:
 * the one being read) the graphic fills soft black as color sweeps in, the type turns white,
 * the name swells (a scale, so the box keeps its height) and the panel turns a darker frosted grey.
 */
.qQP9m_XVf7HfzrWTq2Vg {
  position: relative;
  z-index: 2;
  min-width: 0;
  /* A long unbroken word in the name, description or panel breaks rather than pushing the box wider than its column. */
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  padding: 0 var(--inset) var(--inset);
  border-radius: 32px;
  color: var(--text-primary, #171717);
}

.JMhLFNSKRP9p8caLg9i7,
.HpuaD4WqzHURXefEDYQG {
  padding: var(--box-pad) calc(var(--box-pad) - var(--inset));
  transition: color var(--fade);
}

.qQP9m_XVf7HfzrWTq2Vg[data-active='true'] :is(.JMhLFNSKRP9p8caLg9i7, .HpuaD4WqzHURXefEDYQG) {
  color: var(--text-inverse, #fff);
  transition-delay: 120ms;
}

.JMhLFNSKRP9p8caLg9i7 {
  display: flex;
  flex-direction: column;
  gap: max(12px, 0.93vw);
  max-width: 50em;
}

/* A head with only a title (no icon, eyebrow or description) keeps the open room the prototype's service-page heading had for the graphic, the title in the middle of it. */
.JMhLFNSKRP9p8caLg9i7[data-title-only] {
  justify-content: center;
  min-height: max(140px, 11.5vw);
}

/* The custom heading: open room over the panel for the graphic, in the middle of it; white while active. */
.HpuaD4WqzHURXefEDYQG {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: max(140px, 11.5vw);
}

/* The icon (white on soft black, in a rounded box; reversed while active) with the eyebrow on its right: SemiBold 16 / 22, uppercase, widely tracked. */
.a_4Oq9r5t7zPmTVS5XBF {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 4px;
  color: inherit;
}

.saFZc2jChXSdsRonceKW {
  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, 5.4px);
  text-transform: uppercase;
}

.Chuh6czYtPRrl_kaajXj {
  box-sizing: border-box;
  flex: none;
  width: max(44px, 3.2vw);
  height: auto;
  padding: max(7px, 0.5vw);
  border-radius: 12px;
  background: var(--text-primary, #171717);
  color: var(--text-inverse, #fff);
  transition:
    background-color var(--fade),
    color var(--fade);
}

.qQP9m_XVf7HfzrWTq2Vg[data-active='true'] .Chuh6czYtPRrl_kaajXj {
  background: #fff;
  color: var(--text-primary, #171717);
}

/* The icon box holds one single-color icon (shared MaskIcon), square, filling it. */
.Chuh6czYtPRrl_kaajXj {
  display: inline-flex;
  aspect-ratio: 1;
}

.uo6QcRH2zCcr9CweFnlV {
  flex: 1;
}

/* Heading L, swelling while active. */
.QhXWbT3Y7L179pXaLD5e {
  margin: 0;
  font-size: var(--type-heading-l-size, 42px);
  font-weight: var(--type-heading-l-weight, 400);
  line-height: var(--type-heading-l-lh, 50px);
  letter-spacing: var(--type-heading-l-ls, 0);
  /* Room for the swell below: scaled by 1.05 from the left, its widest line still ends inside the box. */
  max-width: calc(100% / 1.05);
  transform-origin: 0 50%;
  transition: scale 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qQP9m_XVf7HfzrWTq2Vg[data-active='true'] .QhXWbT3Y7L179pXaLD5e {
  scale: 1.05;
}

/* Words wrapped in ** in the Title (the shared bold rule): Semibold, as in the prototype. */
.QhXWbT3Y7L179pXaLD5e strong {
  font-weight: 600;
}

/* Title size XL: Heading XL (the service page's "How we do it"), same weight; the swell and max-width above still apply. */
.M5xuSf5q2VGvRLQffo3i {
  font-size: var(--type-heading-xl-size, 78px);
  font-weight: var(--type-heading-xl-weight, 300);
  line-height: var(--type-heading-xl-lh, 86px);
  letter-spacing: var(--type-heading-xl-ls, 0);
}

/* Body / Large. */
.Hg4vuG8vLVcCRd8CKe7K {
  margin: 0;
  color: var(--neutral-700, #353535);
  font-size: var(--type-large-size, 22px);
  font-weight: var(--type-large-weight, 400);
  line-height: var(--type-large-lh, 1.4);
  letter-spacing: var(--type-large-ls, 0);
  text-wrap: pretty;
  transition: color var(--fade);
}

.qQP9m_XVf7HfzrWTq2Vg[data-active='true'] .Hg4vuG8vLVcCRd8CKe7K {
  color: rgb(255 255 255 / 0.8);
  transition-delay: 120ms;
}

/*
 * The panel (where the Slot is): off-white and frosted (the graphic blurred behind); active, a
 * darker grey, its type light. Its soft type color and dotted-rule color are custom
 * properties so what sits in the Slot, which is in the page's DOM and styled by the page
 * stylesheet (panelStyles.ts), can read them: they inherit across the slot.
 */
.xO0x6Xjn4OFxyhxEs9ep {
  --p2-dots: #595959 0 2px, transparent 2px 4px;
  --p2-inner-soft: var(--neutral-700, #353535);
  display: flex;
  flex-direction: column;
  gap: max(16px, 1.39vw);
  padding: calc(max(32px, 3.24vw) - var(--inset));
  border-radius: 22px;
  background: rgb(245 245 245 / 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text-primary, #171717);
  transition:
    background-color var(--fade),
    color var(--fade);
}

.qQP9m_XVf7HfzrWTq2Vg[data-active='true'] .xO0x6Xjn4OFxyhxEs9ep {
  --p2-dots: rgb(255 255 255 / 0.4) 0 2px, transparent 2px 4px;
  --p2-inner-soft: rgb(255 255 255 / 0.75);
  background: rgb(60 60 60 / 0.72);
  color: var(--text-inverse, #fff);
}

/* Forced colors drop the fills: keep the box and panel readable as outlines. */
@media (forced-colors: active) {
  .qQP9m_XVf7HfzrWTq2Vg {
    border: 1px solid CanvasText;
  }

  .xO0x6Xjn4OFxyhxEs9ep {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .iM5nLyld5GN68TOc80fH {
    display: none;
  }
}

/* Phones: no row graphic; the box itself white, soft black while it is the one being read. */
@media (max-width: 767px) {
  :host,
  .Uxs1HKljDmtp83tYwMD_ {
    scroll-margin-top: 180px;
  }

  .iM5nLyld5GN68TOc80fH {
    display: none;
  }

  .qQP9m_XVf7HfzrWTq2Vg {
    border-radius: 24px;
    background: #fff;
    transition: background-color var(--fade);
  }

  .qQP9m_XVf7HfzrWTq2Vg[data-active='true'] {
    background: var(--text-primary, #171717);
  }

  .xO0x6Xjn4OFxyhxEs9ep {
    border-radius: 16px;
  }

  .HpuaD4WqzHURXefEDYQG,
  .JMhLFNSKRP9p8caLg9i7[data-title-only] {
    min-height: 0;
    padding: 24px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iM5nLyld5GN68TOc80fH,
  .Chuh6czYtPRrl_kaajXj,
  .JMhLFNSKRP9p8caLg9i7,
  .HpuaD4WqzHURXefEDYQG,
  .QhXWbT3Y7L179pXaLD5e,
  .Hg4vuG8vLVcCRd8CKe7K,
  .xO0x6Xjn4OFxyhxEs9ep,
  .qQP9m_XVf7HfzrWTq2Vg {
    transition: none;
  }
}