/*
 * 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 code component's Shadow DOM doesn't inherit the prototype's global box-sizing reset. */
.CbU2yaPkHkzYb1xCIAds,
.CbU2yaPkHkzYb1xCIAds *,
.CbU2yaPkHkzYb1xCIAds *::before,
.CbU2yaPkHkzYb1xCIAds *::after {
  box-sizing: border-box;
}

/* Fills the page's width as a block (a code component's host is otherwise inline). */
:host {
  display: block;
}

/*
 * Ported from prototype/src/components/LogoRoster/LogoRoster.module.css (Figma 2836:8270): the
 * heading in a cell on the left, a dotted line down its right side and one across the bottom (full
 * width); the logos fill the rest of the row.
 */
.CbU2yaPkHkzYb1xCIAds {
  --dots: #595959 0 2px, transparent 2px 4px; /* the dotted lines: 2px on, 2px off */
  position: relative;
  display: flex;
  min-height: max(140px, 11.34vw);
  background: var(--background-page, #f5f5f5);
  color: var(--text-primary, #171717);
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading / M, its strong part Medium. */
.vDWzPLR1wWne43kLLPD9 {
  flex: none;
  display: flex;
  align-items: center;
  margin: 0;
  position: relative;
  padding: 0 max(40px, 4.63vw) 0 var(--page-gutter, 64px);
  font-size: var(--type-heading-m-size, 32px);
  font-weight: var(--type-heading-m-weight, 300);
  line-height: var(--type-heading-m-lh, 38px);
  letter-spacing: var(--type-heading-m-ls, -0.5px);
}

.vDWzPLR1wWne43kLLPD9 strong {
  font-weight: 500;
}

/* The dotted lines: across the bottom, and down the heading's right side. */
.CbU2yaPkHkzYb1xCIAds::after,
.vDWzPLR1wWne43kLLPD9::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.CbU2yaPkHkzYb1xCIAds::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--dots));
}

.vDWzPLR1wWne43kLLPD9::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(180deg, var(--dots));
}

.u30cWKYfKpi2JzkZg6N8 {
  position: relative;
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding-inline: max(16px, 1.85vw);
}

/* The slotted list: off the grid; on the page it is visually hidden (rosterStyles.ts), in the Designer the empty slot's drop box fills the row. */
.xBBhsk6JlhDrSRJGKBRp {
  position: absolute;
  inset: 0;
}

/*
 * The Collection List hidden from the first paint (screen readers only): this CSS is server-rendered with
 * the section, where rosterStyles.ts's page rule only arrives once the script runs, so the list showed as
 * a column of logos down the page on first load. Only a Collection List: the Designer's empty-slot drop
 * box stays visible. rosterStyles.ts still covers Storybook (no Shadow DOM, so no slot).
 */
.xBBhsk6JlhDrSRJGKBRp ::slotted(.iJBwUoO3_p8xfbRl8Y94) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Each slot stacks its logo (and the one leaving) in the middle. */
.TgPDAMyR45X08JADB_fG {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.TgPDAMyR45X08JADB_fG > * {
  grid-area: 1 / 1;
}

/* The greyscale files are whole cells (the brand spaced inside): each at the Logo Grid's cell height, so the two match, and never past the file's 162px, where it would blur. */
.p2cry8k2adEByviGd401 {
  display: block;
  width: auto;
  max-width: 100%;
  height: min(100%, max(120px, 9.375vw), 162px);
  object-fit: contain;
  user-select: none;
}

/* The change: the old logo rises out as the new one rises in after it. */
.C26tAwYxkmTxHEPvprtj {
  animation: XTqLFHdzIg9_QZ31qBKg 800ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.qTq0DdyD4RL5qNXsl_2q {
  animation: h6UHLYZ0gn0F9zUFhEdC 600ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes XTqLFHdzIg9_QZ31qBKg {
  from {
    opacity: 0;
    transform: translateY(45%);
  }
}

@keyframes h6UHLYZ0gn0F9zUFhEdC {
  to {
    opacity: 0;
    transform: translateY(-45%);
  }
}

/* Pause / play: small, at the row's right end, centred on the logos; a light border (the icon carries the contrast). */
.I1D97H1jnumKjTrdXSLs {
  position: absolute;
  top: 50%;
  right: max(8px, 0.93vw);
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-lightest, #cfc7d4);
  border-radius: 50%;
  background: var(--background-page, #f5f5f5);
  color: var(--text-primary, #171717);
  cursor: pointer;
  transition:
    scale 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms ease,
    box-shadow 200ms ease,
    color 200ms ease;
}

/* Hover: a little larger, a 2px brand-blue ring (the inset shadow adds the second pixel, so the icon doesn't shift) and a blue icon. */
.I1D97H1jnumKjTrdXSLs:hover {
  scale: 1.1;
  border-color: var(--action-primary-default, #0073e6);
  box-shadow: inset 0 0 0 1px var(--action-primary-default, #0073e6);
  color: var(--action-primary-default, #0073e6);
}

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

/* Narrow: the heading above the logos, with the dotted line between them. */
@media (max-width: 700px) {
  .CbU2yaPkHkzYb1xCIAds {
    flex-direction: column;
  }

  .vDWzPLR1wWne43kLLPD9 {
    padding: 32px var(--page-gutter, 20px);
  }

  .vDWzPLR1wWne43kLLPD9::after {
    top: auto;
    left: 0;
    width: auto;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--dots));
  }

  .u30cWKYfKpi2JzkZg6N8 {
    min-height: 120px;
  }

  .p2cry8k2adEByviGd401 {
    height: min(100%, 112px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .C26tAwYxkmTxHEPvprtj,
  .qTq0DdyD4RL5qNXsl_2q {
    animation: none;
  }

  /* The hover's colors still change; it just doesn't grow. */
  .I1D97H1jnumKjTrdXSLs {
    transition: none;
  }

  .I1D97H1jnumKjTrdXSLs:hover {
    scale: none;
  }

  .qTq0DdyD4RL5qNXsl_2q {
    display: none;
  }
}