/* M. A. Polce — the one stylesheet for the whole site.

   Organised in the order a Webflow developer rebuilds it:
     00  Fonts
     01  Variables (colour, typography, spacing, layout/radius)   → Webflow Variables
     02  Global tag styles                                        → Body (All Pages), All Links
     03  Utility layer (u-*)                                      → already installed on the template
     04  Shared components                                        → Webflow Components
     05  Site sections, homepage order (incl. Button Main visuals)
     06  Button Main — Clickable wiring
     07  Nav (unified desktop bar + mobile sheet)
     08  Footer
     09+ Page sections, one block per page

   Blocks marked CODE EMBED need custom code in Webflow; everything else is
   rebuilt natively in the Style panel. See HANDOFF.md.
   Migrated from the Claude Design export; this file is now the source — edit it directly. */

/* ════════════════════════════════════════════════════════════════════════════
   00  Fonts — Inter Tight, self-hosted variable font
   ════════════════════════════════════════════════════════════════════════════ */

/* Webfonts — Inter Tight only.
   Inter Tight is the single brand face: self-hosted variable font, supplied by
   the client. No other family is loaded, and no CDN font links exist. */
@font-face {
  font-family: 'Inter Tight';
  src: url('/assets/fonts/InterTight-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('/assets/fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ════════════════════════════════════════════════════════════════════════════
   01  Variables — colour
   ════════════════════════════════════════════════════════════════════════════ */

/* Colour tokens — every value transcribed from the M. A. Polce Figma file.
   Structure follows the Povio core-template colour families so the build maps
   1:1 onto Webflow variables. Never hard-code a hex outside this file. */
:root {
  /* ── Base palette (raw values as they appear in the file) ───────────── */
  --base--white: rgb(255, 255, 255);
  --base--fdfdfd: rgb(253, 253, 253);
  --base--black: rgb(0, 0, 0);
  --base--navy-900: rgb(11, 27, 44);        /* primary brand navy */
  --base--navy-900-alt: rgb(12, 27, 44);
  --base--navy-950: rgb(7, 18, 49);
  --base--navy-850: rgb(5, 35, 91);
  --base--blue-600: rgb(2, 67, 169);
  --base--blue-400: rgb(117, 154, 208);
  --base--blue-050: rgb(225, 239, 250);
  --base--blue-025: rgb(240, 245, 250);
  --base--teal-500: rgb(68, 167, 248);      /* accent — eyebrows, tiles */
  --base--teal-400: rgb(102, 185, 250);     /* accent — icons */
  --base--teal-025: rgb(235, 255, 253);
  --base--ink-900: rgb(23, 24, 26);
  --base--ink-950: rgb(17, 17, 17);
  --base--ink-1c: rgb(28, 27, 31);
  --base--ink-24: rgb(24, 30, 37);
  --base--warm-900: rgb(26, 26, 23);        /* headings */
  --base--warm-800: rgb(36, 32, 31);
  --base--grey-600: rgb(107, 107, 107);   /* meta text — AA on grey page (4.62:1) */
  --base--grey-550: rgb(124, 129, 135);   /* input boundaries — 3:1 on card and page */
  --base--grey-500: rgb(140, 140, 140);
  --base--grey-300: rgb(212, 214, 216);
  --base--grey-250: rgb(217, 217, 217);
  --base--grey-200: rgb(206, 207, 208);
  --base--grey-100: rgb(240, 241, 243);     /* page surface */
  --base--sand-050: rgb(248, 247, 245);

  /* ── Background ─────────────────────────────────────────────────────── */
  --_color---bg--default--bg: var(--base--grey-100);
  --_color---bg--default--1: var(--base--white);
  --_color---bg--default--2: var(--base--blue-050);
  --_color---bg--inverted--bg: var(--base--navy-900);
  --_color---bg--inverted--1: var(--base--navy-950);
  --_color---bg--inverted--2: rgba(253, 253, 253, 0.15);
  --_color---bg--accent: var(--base--teal-500);
  --_color---bg--glass: rgba(255, 255, 255, 0.1);

  /* ── Outline ────────────────────────────────────────────────────────── */
  --_color---outline--default: var(--base--grey-300);
  --_color---outline--subtle: rgba(26, 26, 23, 0.16);
  --_color---outline--hairline: rgba(0, 0, 0, 0.1);
  --_color---outline--inverted: rgba(255, 255, 255, 0.16);
  --_color---outline--inverted-solid: var(--base--white);

  /* ── Text ───────────────────────────────────────────────────────────── */
  /* Four steps, and only four. 1 = headings and figures, 2 = card and row
     titles, 3 = all body copy, 4 = meta and uppercase captions. The file also
     draws text in #111111, #242021 and pure black; those are folded into this
     ladder and kept below as aliases so older markup keeps resolving. */
  --_color---text--default--1: var(--base--warm-900);
  --_color---text--default--2: var(--base--ink-900);
  --_color---text--default--3: rgba(23, 24, 26, 0.75);
  --_color---text--default--4: var(--base--grey-600);
  --_color---text--default--heading-alt: var(--_color---text--default--1); /* was #111111 */
  --_color---text--default--meta: var(--_color---text--default--1); /* was #242021 */
  --_color---text--on-card: var(--_color---text--default--1); /* was pure black */
  --_color---text--inverted--1: var(--base--white);
  --_color---text--inverted--2: var(--base--grey-100);
  --_color---text--inverted--3: rgba(240, 241, 243, 0.75);
  --_color---text--brand--1: var(--base--teal-500);
  --_color---text--brand--2: var(--base--teal-400);
  --_color---text--brand--3: var(--base--navy-900);
  --_color---text--brand--link: rgb(26, 109, 184);        /* blue TEXT on light — 4.74:1 */
  --_color---text--brand--link-hover: rgb(19, 85, 138);   /* 6.21:1 */
  --_color---focus--ring: var(--_color---text--brand--link);      /* on light — 4.74:1 */
  --_color---focus--ring-inverted: var(--_color---text--brand--1); /* on dark — 6.73:1 */

  /* ── Interactive ────────────────────────────────────────────────────── */
  --_color---interactive--primary--on: var(--base--white);
  --_color---interactive--primary--idle: var(--base--navy-900);
  --_color---interactive--primary--hover: rgb(18, 42, 66);
  --_color---interactive--primary--active: rgb(7, 19, 32);
  --_color---interactive--primary--on-disabled: rgba(255, 255, 255, 0.6);
  --_color---interactive--primary--disabled: rgba(11, 27, 44, 0.3);

  --_color---interactive--secondary--on: var(--base--black);
  --_color---interactive--secondary--idle: var(--base--white);
  --_color---interactive--secondary--hover: var(--base--grey-100);
  --_color---interactive--secondary--active: var(--base--grey-300);
  --_color---interactive--secondary--on-disabled: var(--base--grey-500);
  --_color---interactive--secondary--disabled: rgba(255, 255, 255, 0.5);

  --_color---interactive--outline--on: var(--base--navy-900);
  --_color---interactive--outline--idle: var(--base--navy-900);
  --_color---interactive--outline--hover: rgba(11, 27, 44, 0.06);
  --_color---interactive--outline--active: rgba(11, 27, 44, 0.12);
  --_color---interactive--outline--on-disabled: var(--base--grey-500);
  --_color---interactive--outline--disabled: var(--base--grey-300);

  --_color---interactive--outline-inverted--on: var(--base--white);
  --_color---interactive--outline-inverted--idle: rgba(253, 253, 253, 0.15);
  --_color---interactive--outline-inverted--hover: rgba(253, 253, 253, 0.26);
  --_color---interactive--outline-inverted--active: rgba(253, 253, 253, 0.34);
  --_color---interactive--outline-inverted--on-disabled: rgba(255, 255, 255, 0.5);
  --_color---interactive--outline-inverted--disabled: rgba(253, 253, 253, 0.08);

  --_color---interactive--input--on: var(--base--ink-900);
  --_color---interactive--input--idle: var(--base--grey-550);
  --_color---interactive--input--hover: var(--base--grey-600);
  --_color---interactive--input--active: var(--base--navy-900);
  --_color---interactive--input--on-disabled: var(--base--grey-500);
  --_color---interactive--input--disabled: var(--base--grey-100);

  /* ── Status (not exercised by the source design; roles reserved) ────── */
  --_color---info--success: rgb(66, 133, 53);
  --_color---info--error: rgb(170, 46, 27);
  --_color---info--warning: rgb(241, 182, 43);

  /* ── Gradients used as surfaces ─────────────────────────────────────── */
  --_gradient---tile-blue: linear-gradient(130.796deg, rgb(7, 18, 49) 0%, rgb(2, 67, 169) 50%, rgb(117, 154, 208) 100%); /* @kind color */
  --_gradient---tile-blue-cap: linear-gradient(90deg, rgb(7, 18, 49) 0%, rgb(5, 35, 91) 100%); /* @kind color */
  --_gradient---tile-teal-fade: linear-gradient(180deg, rgba(235, 255, 253, 0) 0%, rgb(235, 255, 253) 100%); /* @kind color */
  --_gradient---hero-sky: linear-gradient(148deg, rgb(4, 9, 26) 0%, rgb(7, 18, 49) 24%, rgb(2, 67, 169) 62%, rgb(117, 154, 208) 100%); /* @kind color */
  --_gradient---hero-scrim: linear-gradient(180deg, rgba(240, 241, 243, 0) 0%, rgba(240, 241, 243, 0.29) 56.25%, rgb(240, 241, 243) 100%); /* @kind color */
  --_gradient---footer-sky: linear-gradient(180deg, rgb(150, 180, 216) 0%, rgb(43, 92, 156) 34%, rgb(20, 48, 92) 62%, rgb(13, 20, 36) 100%); /* @kind color */
  /* ── Gradients tokenised from the export (long multi-stop ramps, exact values) ── */
  --_gradient---hero-home-sky: radial-gradient(ellipse 65% 38% at 92% 82%, rgba(165,205,245,0.6) 0%, rgba(165,205,245,0) 100%),
    linear-gradient(180deg, rgba(40,125,220,0) 46%, rgba(40,125,220,0.35) 60%, rgba(90,160,232,0.55) 74%, rgba(170,205,242,0.7) 88%, rgba(230,238,246,0.85) 100%),
    linear-gradient(155deg, rgb(8,14,43) 0%, rgb(5,21,76) 18%, rgb(6,44,124) 32%, rgb(11,73,164) 45%, rgb(24,114,211) 57%, rgb(47,140,233) 67%, rgb(87,165,238) 80%, rgb(158,201,241) 100%); /* @kind color */
  --_gradient---footer-cta-sky: linear-gradient(170deg, #eff1f3 0%, #eceff4 4%, #e2e9f4 8%, #d2e2f4 12%, #bcd5f2 16%, #a1c6f0 20%, #83b5ee 24%, #62a2ea 28%, #4592e8 32%, #2f8ce9 36%, #1f7add 41%, #1668cd 46%, #0b49a4 55%, #062c7c 66%, #051d60 77%, #05154c 87%, #080e2b 100%); /* @kind color */ /* the hero sky's colours, mirrored; long eased fade from the page grey, tilted so the blue rises higher on the left */
  --_gradient---testimonials-dark-sky: linear-gradient(180deg in oklab, rgb(20,118,214) 0.00%, rgb(20,118,214) 0.50%, rgb(20,118,214) 1.00%, rgb(20,118,214) 1.50%, rgb(20,118,213) 2.00%, rgb(20,117,213) 2.50%, rgb(20,117,213) 3.00%, rgb(20,117,212) 3.50%, rgb(20,116,212) 4.00%, rgb(20,116,211) 4.50%, rgb(20,116,210) 5.00%, rgb(20,115,210) 5.50%, rgb(20,115,209) 6.00%, rgb(20,114,208) 6.50%, rgb(20,114,207) 7.00%, rgb(20,113,207) 7.50%, rgb(20,113,206) 8.00%, rgb(20,112,205) 8.50%, rgb(20,112,204) 9.00%, rgb(19,111,203) 9.50%, rgb(19,110,202) 10.00%, rgb(19,110,202) 10.50%, rgb(19,109,201) 11.00%, rgb(19,109,200) 11.50%, rgb(19,108,199) 12.00%, rgb(19,108,198) 12.50%, rgb(19,107,198) 13.00%, rgb(19,106,197) 13.50%, rgb(19,106,196) 14.00%, rgb(18,105,196) 14.50%, rgb(18,105,195) 15.00%, rgb(18,104,194) 15.50%, rgb(18,104,194) 16.00%, rgb(18,104,193) 16.50%, rgb(18,103,193) 17.00%, rgb(18,103,193) 17.50%, rgb(17,102,192) 18.00%, rgb(17,102,192) 18.50%, rgb(17,102,191) 19.00%, rgb(17,101,191) 19.50%, rgb(17,101,191) 20.00%, rgb(17,100,190) 20.50%, rgb(17,100,190) 21.00%, rgb(17,100,190) 21.50%, rgb(17,99,189) 22.00%, rgb(17,99,189) 22.50%, rgb(17,99,189) 23.00%, rgb(17,98,188) 23.50%, rgb(16,98,188) 24.00%, rgb(16,98,187) 24.50%, rgb(16,97,187) 25.00%, rgb(16,97,187) 25.50%, rgb(16,96,186) 26.00%, rgb(16,96,186) 26.50%, rgb(16,96,186) 27.00%, rgb(16,95,185) 27.50%, rgb(16,95,185) 28.00%, rgb(16,95,185) 28.50%, rgb(16,94,184) 29.00%, rgb(16,94,184) 29.50%, rgb(16,93,183) 30.00%, rgb(16,93,183) 30.50%, rgb(16,93,183) 31.00%, rgb(16,92,182) 31.50%, rgb(15,92,182) 32.00%, rgb(15,91,181) 32.50%, rgb(15,91,181) 33.00%, rgb(15,90,180) 33.50%, rgb(15,90,180) 34.00%, rgb(15,89,179) 34.50%, rgb(15,89,179) 35.00%, rgb(15,88,178) 35.50%, rgb(14,88,178) 36.00%, rgb(14,87,177) 36.50%, rgb(14,87,176) 37.00%, rgb(14,86,176) 37.50%, rgb(14,86,175) 38.00%, rgb(14,85,174) 38.50%, rgb(14,85,173) 39.00%, rgb(14,84,173) 39.50%, rgb(14,83,172) 40.00%, rgb(14,83,171) 40.50%, rgb(13,82,170) 41.00%, rgb(13,82,170) 41.50%, rgb(13,81,169) 42.00%, rgb(13,81,168) 42.50%, rgb(13,80,167) 43.00%, rgb(13,79,166) 43.50%, rgb(13,79,165) 44.00%, rgb(13,78,165) 44.50%, rgb(13,78,164) 45.00%, rgb(13,77,163) 45.50%, rgb(13,77,162) 46.00%, rgb(13,76,161) 46.50%, rgb(13,75,160) 47.00%, rgb(13,75,160) 47.50%, rgb(13,74,159) 48.00%, rgb(12,74,158) 48.50%, rgb(12,73,157) 49.00%, rgb(12,73,156) 49.50%, rgb(12,72,156) 50.00%, rgb(12,71,155) 50.50%, rgb(12,71,154) 51.00%, rgb(12,70,153) 51.50%, rgb(12,70,153) 52.00%, rgb(12,69,152) 52.50%, rgb(12,69,151) 53.00%, rgb(12,68,151) 53.50%, rgb(12,68,150) 54.00%, rgb(12,67,149) 54.50%, rgb(11,67,149) 55.00%, rgb(11,66,148) 55.50%, rgb(11,66,148) 56.00%, rgb(11,65,147) 56.50%, rgb(11,65,147) 57.00%, rgb(11,64,146) 57.50%, rgb(11,64,146) 58.00%, rgb(11,63,145) 58.50%, rgb(11,63,144) 59.00%, rgb(11,62,144) 59.50%, rgb(11,62,143) 60.00%, rgb(11,61,143) 60.50%, rgb(10,61,142) 61.00%, rgb(10,60,141) 61.50%, rgb(10,60,141) 62.00%, rgb(10,59,140) 62.50%, rgb(10,59,140) 63.00%, rgb(10,58,139) 63.50%, rgb(10,58,138) 64.00%, rgb(10,57,137) 64.50%, rgb(10,57,137) 65.00%, rgb(10,56,136) 65.50%, rgb(10,55,135) 66.00%, rgb(10,55,134) 66.50%, rgb(10,54,133) 67.00%, rgb(10,54,132) 67.50%, rgb(10,53,131) 68.00%, rgb(10,52,130) 68.50%, rgb(10,52,129) 69.00%, rgb(10,51,128) 69.50%, rgb(10,51,127) 70.00%, rgb(10,50,126) 70.50%, rgb(10,49,124) 71.00%, rgb(10,49,123) 71.50%, rgb(10,48,122) 72.00%, rgb(10,47,120) 72.50%, rgb(10,46,119) 73.00%, rgb(10,46,118) 73.50%, rgb(10,45,116) 74.00%, rgb(10,44,115) 74.50%, rgb(10,44,114) 75.00%, rgb(10,43,112) 75.50%, rgb(10,42,111) 76.00%, rgb(10,42,110) 76.50%, rgb(10,41,108) 77.00%, rgb(10,40,107) 77.50%, rgb(10,40,105) 78.00%, rgb(10,39,104) 78.50%, rgb(10,38,102) 79.00%, rgb(10,38,101) 79.50%, rgb(10,37,99) 80.00%, rgb(10,36,98) 80.50%, rgb(10,36,97) 81.00%, rgb(10,35,95) 81.50%, rgb(10,35,94) 82.00%, rgb(10,34,92) 82.50%, rgb(10,33,91) 83.00%, rgb(10,33,90) 83.50%, rgb(10,32,88) 84.00%, rgb(10,32,87) 84.50%, rgb(10,31,85) 85.00%, rgb(10,30,84) 85.50%, rgb(10,30,82) 86.00%, rgb(10,29,80) 86.50%, rgb(10,28,78) 87.00%, rgb(10,27,77) 87.50%, rgb(10,27,75) 88.00%, rgb(10,26,73) 88.50%, rgb(11,25,71) 89.00%, rgb(11,25,69) 89.50%, rgb(11,24,67) 90.00%, rgb(11,23,65) 90.50%, rgb(11,22,64) 91.00%, rgb(11,22,62) 91.50%, rgb(11,21,60) 92.00%, rgb(11,20,58) 92.50%, rgb(10,20,57) 93.00%, rgb(10,19,55) 93.50%, rgb(10,19,54) 94.00%, rgb(10,18,52) 94.50%, rgb(10,18,51) 95.00%, rgb(10,17,50) 95.50%, rgb(10,17,49) 96.00%, rgb(10,16,48) 96.50%, rgb(10,16,47) 97.00%, rgb(10,16,46) 97.50%, rgb(10,15,45) 98.00%, rgb(10,15,45) 98.50%, rgb(10,15,44) 99.00%, rgb(10,15,44) 99.50%, rgb(10,15,44) 100.00%); /* @kind color */
  --_gradient---cta-dark-sky: linear-gradient(180deg in oklab, rgb(10,15,44) 0%, rgb(10,20,58) 22%, rgb(10,38,101) 48%, rgb(11,63,146) 72%, rgb(17,99,189) 90%, rgb(20,118,214) 100%); /* @kind color */ /* Get the Guide / Join our team band: the hero + testimonials sky colours, navy at the top rising to royal blue, the soft glow at the bottom is the join-glow image layer */
  --_gradient---hero-compact-sky: linear-gradient(180deg in oklab, rgb(10,15,44) 0.000%, rgb(10,15,44) 0.390%, rgb(10,15,44) 0.780%, rgb(10,15,44) 1.170%, rgb(10,15,45) 1.560%, rgb(10,15,45) 1.950%, rgb(10,15,45) 2.340%, rgb(10,16,46) 2.730%, rgb(10,16,46) 3.120%, rgb(10,16,46) 3.510%, rgb(10,16,47) 3.900%, rgb(10,16,48) 4.290%, rgb(10,17,48) 4.680%, rgb(10,17,49) 5.070%, rgb(10,17,50) 5.460%, rgb(10,17,51) 5.850%, rgb(10,18,51) 6.240%, rgb(10,18,52) 6.630%, rgb(10,18,53) 7.020%, rgb(10,19,54) 7.410%, rgb(10,19,55) 7.800%, rgb(10,19,56) 8.190%, rgb(10,20,57) 8.580%, rgb(10,20,58) 8.970%, rgb(10,21,59) 9.360%, rgb(10,21,60) 9.750%, rgb(10,22,61) 10.140%, rgb(10,22,63) 10.530%, rgb(10,22,64) 10.920%, rgb(10,23,65) 11.310%, rgb(10,23,66) 11.700%, rgb(10,24,67) 12.090%, rgb(10,24,68) 12.480%, rgb(10,25,70) 12.870%, rgb(10,25,71) 13.260%, rgb(10,26,72) 13.650%, rgb(10,26,73) 14.040%, rgb(10,27,75) 14.430%, rgb(10,27,76) 14.820%, rgb(10,28,77) 15.210%, rgb(10,28,78) 15.600%, rgb(10,29,80) 15.990%, rgb(10,29,81) 16.380%, rgb(10,29,82) 16.770%, rgb(10,30,83) 17.160%, rgb(10,30,84) 17.550%, rgb(10,31,85) 17.940%, rgb(10,31,86) 18.330%, rgb(10,32,87) 18.720%, rgb(10,32,88) 19.110%, rgb(10,33,89) 19.500%, rgb(10,33,90) 19.890%, rgb(10,33,91) 20.280%, rgb(10,34,93) 20.670%, rgb(10,34,94) 21.060%, rgb(10,35,95) 21.450%, rgb(10,35,96) 21.840%, rgb(10,36,97) 22.230%, rgb(10,36,98) 22.620%, rgb(10,37,99) 23.010%, rgb(10,37,100) 23.400%, rgb(10,38,101) 23.790%, rgb(10,38,102) 24.180%, rgb(10,38,103) 24.570%, rgb(10,39,104) 24.960%, rgb(10,39,105) 25.350%, rgb(10,40,106) 25.740%, rgb(10,40,107) 26.130%, rgb(10,41,108) 26.520%, rgb(10,41,110) 26.910%, rgb(10,42,111) 27.300%, rgb(10,43,112) 27.690%, rgb(10,43,113) 28.080%, rgb(10,44,114) 28.470%, rgb(10,44,115) 28.860%, rgb(10,45,116) 29.250%, rgb(10,45,118) 29.640%, rgb(10,46,119) 30.030%, rgb(10,47,120) 30.420%, rgb(10,47,121) 30.810%, rgb(10,48,122) 31.200%, rgb(10,49,124) 31.590%, rgb(10,49,125) 31.980%, rgb(10,50,126) 32.370%, rgb(10,51,127) 32.760%, rgb(10,52,129) 33.150%, rgb(10,52,130) 33.540%, rgb(10,53,131) 33.930%, rgb(10,54,132) 34.320%, rgb(10,55,134) 34.710%, rgb(10,56,135) 35.100%, rgb(10,57,136) 35.490%, rgb(10,57,138) 35.880%, rgb(10,58,139) 36.270%, rgb(10,59,140) 36.660%, rgb(10,60,142) 37.050%, rgb(10,61,143) 37.440%, rgb(10,62,145) 37.830%, rgb(11,63,146) 38.220%, rgb(11,64,147) 38.610%, rgb(11,66,149) 39.000%, rgb(11,67,150) 39.390%, rgb(11,68,152) 39.780%, rgb(11,69,153) 40.170%, rgb(11,70,155) 40.560%, rgb(11,71,156) 40.950%, rgb(12,72,158) 41.340%, rgb(12,73,159) 41.730%, rgb(12,75,161) 42.120%, rgb(12,76,162) 42.510%, rgb(12,77,163) 42.900%, rgb(12,78,165) 43.290%, rgb(13,79,166) 43.680%, rgb(13,80,168) 44.070%, rgb(13,82,169) 44.460%, rgb(13,83,171) 44.850%, rgb(14,84,172) 45.240%, rgb(14,85,174) 45.630%, rgb(14,86,175) 46.020%, rgb(14,87,177) 46.410%, rgb(15,88,178) 46.800%, rgb(15,89,179) 47.190%, rgb(15,91,181) 47.580%, rgb(15,92,182) 47.970%, rgb(16,93,184) 48.360%, rgb(16,94,185) 48.750%, rgb(16,95,186) 49.140%, rgb(16,96,188) 49.530%, rgb(17,97,189) 49.920%, rgb(17,98,191) 50.310%, rgb(17,99,192) 50.700%, rgb(17,101,193) 51.090%, rgb(18,102,195) 51.480%, rgb(18,103,196) 51.870%, rgb(18,104,198) 52.260%, rgb(19,105,199) 52.650%, rgb(19,106,200) 53.040%, rgb(19,107,202) 53.430%, rgb(20,108,203) 53.820%, rgb(20,109,205) 54.210%, rgb(20,110,206) 54.600%, rgb(21,112,207) 54.990%, rgb(21,113,208) 55.380%, rgb(22,114,210) 55.770%, rgb(22,115,211) 56.160%, rgb(23,116,212) 56.550%, rgb(24,117,213) 56.940%, rgb(24,118,215) 57.330%, rgb(25,119,216) 57.720%, rgb(26,120,217) 58.110%, rgb(26,121,218) 58.500%, rgb(27,122,219) 58.890%, rgb(28,123,220) 59.280%, rgb(29,124,221) 59.670%, rgb(30,125,222) 60.060%, rgb(31,126,223) 60.450%, rgb(32,127,224) 60.840%, rgb(32,128,225) 61.230%, rgb(33,129,226) 61.620%, rgb(34,130,226) 62.010%, rgb(35,131,227) 62.400%, rgb(37,133,228) 62.790%, rgb(38,134,229) 63.180%, rgb(39,135,229) 63.570%, rgb(40,136,230) 63.960%, rgb(41,137,230) 64.350%, rgb(42,138,231) 64.740%, rgb(43,139,231) 65.130%, rgb(45,140,232) 65.520%, rgb(46,140,233) 65.910%, rgb(47,141,233) 66.300%, rgb(48,142,233) 66.690%, rgb(50,143,234) 67.080%, rgb(51,144,234) 67.470%, rgb(52,145,235) 67.860%, rgb(54,146,235) 68.250%, rgb(55,147,236) 68.640%, rgb(56,148,236) 69.030%, rgb(58,149,236) 69.420%, rgb(59,150,237) 69.810%, rgb(60,151,237) 70.200%, rgb(61,152,237) 70.590%, rgb(63,152,238) 70.980%, rgb(64,153,238) 71.370%, rgb(65,154,238) 71.760%, rgb(66,155,238) 72.150%, rgb(68,156,238) 72.540%, rgb(69,156,238) 72.930%, rgb(70,157,239) 73.320%, rgb(72,158,239) 73.710%, rgb(73,159,239) 74.100%, rgb(75,160,239) 74.490%, rgb(76,160,239) 74.880%, rgb(78,161,239) 75.270%, rgb(80,162,239) 75.660%, rgb(82,163,239) 76.050%, rgb(83,164,239) 76.440%, rgb(85,165,240) 76.830%, rgb(87,166,240) 77.220%, rgb(89,167,240) 77.610%, rgb(92,168,240) 78.000%, rgb(92,169,240) 78.138%, rgb(93,169,240) 78.275%, rgb(94,169,240) 78.413%, rgb(95,170,240) 78.550%, rgb(96,170,240) 78.688%, rgb(96,171,241) 78.825%, rgb(97,171,241) 78.963%, rgb(98,172,241) 79.100%, rgb(99,172,241) 79.238%, rgb(100,173,241) 79.375%, rgb(101,173,241) 79.513%, rgb(102,174,241) 79.650%, rgb(103,174,241) 79.787%, rgb(104,174,241) 79.925%, rgb(105,175,241) 80.063%, rgb(106,175,241) 80.200%, rgb(107,176,242) 80.338%, rgb(108,176,242) 80.475%, rgb(109,177,242) 80.612%, rgb(110,177,242) 80.750%, rgb(111,178,242) 80.888%, rgb(112,178,242) 81.025%, rgb(113,179,242) 81.163%, rgb(114,179,242) 81.300%, rgb(115,180,242) 81.438%, rgb(116,180,242) 81.575%, rgb(117,181,242) 81.713%, rgb(118,181,243) 81.850%, rgb(119,182,243) 81.987%, rgb(120,182,243) 82.125%, rgb(121,183,243) 82.263%, rgb(122,183,243) 82.400%, rgb(123,184,243) 82.537%, rgb(124,184,243) 82.675%, rgb(125,185,243) 82.813%, rgb(126,185,243) 82.950%, rgb(127,186,243) 83.088%, rgb(128,186,243) 83.225%, rgb(129,187,243) 83.363%, rgb(130,187,243) 83.500%, rgb(131,188,244) 83.638%, rgb(132,188,244) 83.775%, rgb(133,189,244) 83.912%, rgb(134,189,244) 84.050%, rgb(135,190,244) 84.188%, rgb(136,190,244) 84.325%, rgb(137,191,244) 84.463%, rgb(138,191,244) 84.600%, rgb(139,192,244) 84.737%, rgb(140,192,244) 84.875%, rgb(141,193,244) 85.013%, rgb(141,193,244) 85.150%, rgb(142,194,244) 85.288%, rgb(143,194,244) 85.425%, rgb(144,195,244) 85.563%, rgb(145,195,244) 85.700%, rgb(146,195,244) 85.838%, rgb(147,196,244) 85.975%, rgb(148,196,244) 86.112%, rgb(149,197,244) 86.250%, rgb(150,197,244) 86.388%, rgb(151,198,244) 86.525%, rgb(152,198,244) 86.662%, rgb(152,198,244) 86.800%, rgb(153,199,244) 86.938%, rgb(154,199,244) 87.075%, rgb(155,200,244) 87.213%, rgb(156,200,244) 87.350%, rgb(157,201,244) 87.488%, rgb(158,201,243) 87.625%, rgb(159,201,243) 87.763%, rgb(160,202,243) 87.900%, rgb(161,202,243) 88.038%, rgb(161,203,243) 88.175%, rgb(162,203,243) 88.313%, rgb(163,203,243) 88.450%, rgb(164,204,243) 88.587%, rgb(165,204,243) 88.725%, rgb(166,205,243) 88.862%, rgb(167,205,243) 89.000%, rgb(168,206,243) 89.138%, rgb(169,206,243) 89.275%, rgb(170,206,243) 89.413%, rgb(171,207,243) 89.550%, rgb(171,207,243) 89.688%, rgb(172,208,242) 89.825%, rgb(173,208,242) 89.963%, rgb(174,209,242) 90.100%, rgb(175,209,242) 90.237%, rgb(176,209,242) 90.375%, rgb(177,210,242) 90.512%, rgb(178,210,242) 90.650%, rgb(179,211,242) 90.787%, rgb(180,211,242) 90.925%, rgb(181,212,242) 91.063%, rgb(182,212,242) 91.200%, rgb(183,212,242) 91.338%, rgb(184,213,242) 91.475%, rgb(185,213,242) 91.613%, rgb(186,214,242) 91.750%, rgb(187,214,242) 91.888%, rgb(188,215,242) 92.025%, rgb(189,215,242) 92.163%, rgb(190,216,242) 92.300%, rgb(191,216,242) 92.438%, rgb(192,217,242) 92.575%, rgb(193,217,242) 92.712%, rgb(194,218,242) 92.850%, rgb(195,218,242) 92.987%, rgb(196,219,242) 93.125%, rgb(198,219,242) 93.263%, rgb(199,220,242) 93.400%, rgb(200,220,242) 93.538%, rgb(201,221,242) 93.675%, rgb(202,221,242) 93.813%, rgb(203,222,243) 93.950%, rgb(204,222,243) 94.088%, rgb(205,223,243) 94.225%, rgb(206,223,243) 94.363%, rgb(207,224,243) 94.500%, rgb(208,224,243) 94.638%, rgb(209,225,243) 94.775%, rgb(210,225,243) 94.912%, rgb(211,226,243) 95.050%, rgb(212,226,243) 95.188%, rgb(213,227,243) 95.325%, rgb(214,227,243) 95.463%, rgb(215,228,243) 95.600%, rgb(216,228,243) 95.738%, rgb(217,229,243) 95.875%, rgb(218,229,243) 96.013%, rgb(219,230,243) 96.150%, rgb(220,230,243) 96.288%, rgb(221,231,243) 96.425%, rgb(222,231,243) 96.563%, rgb(223,232,243) 96.700%, rgb(224,232,243) 96.838%, rgb(225,233,243) 96.975%, rgb(226,233,243) 97.112%, rgb(227,234,243) 97.250%, rgb(228,234,243) 97.388%, rgb(228,235,243) 97.525%, rgb(229,235,243) 97.663%, rgb(230,236,243) 97.800%, rgb(231,236,243) 97.938%, rgb(232,237,243) 98.075%, rgb(233,237,243) 98.213%, rgb(233,238,243) 98.350%, rgb(234,238,243) 98.488%, rgb(235,238,243) 98.625%, rgb(235,239,243) 98.763%, rgb(236,239,243) 98.900%, rgb(237,239,243) 99.037%, rgb(238,240,243) 99.175%, rgb(238,240,243) 99.313%, rgb(239,240,243) 99.450%, rgb(239,241,243) 99.588%, var(--_color---bg--default--bg) 99.725%, var(--_color---bg--default--bg) 99.863%, var(--_color---bg--default--bg) 100.000%); /* @kind color */
  --_gradient---hero-compact-scrim: radial-gradient(ellipse 60% 42% at 50% 45%, rgb(128,158,206) 0%, rgb(128,158,206) 42%, rgb(128,158,206) 43.61%, rgb(128,158,206) 45.22%, rgb(128,158,206) 46.83%, rgb(128,158,206) 48.44%, rgb(129,159,206) 50.06%, rgb(130,160,207) 51.67%, rgb(132,161,207) 53.28%, rgb(134,163,208) 54.89%, rgb(137,165,209) 56.50%, rgb(140,167,211) 58.11%, rgb(145,171,213) 59.72%, rgb(150,175,215) 61.33%, rgb(156,180,217) 62.94%, rgb(163,184,219) 64.56%, rgb(169,189,222) 66.17%, rgb(176,195,225) 67.78%, rgb(183,200,227) 69.39%, rgb(192,207,231) 71.00%, rgb(200,213,234) 72.61%, rgb(207,218,236) 74.22%, rgb(214,224,239) 75.83%, rgb(220,229,242) 77.44%, rgb(227,233,244) 79.06%, rgb(233,238,246) 80.67%, rgb(238,242,248) 82.28%, rgb(243,246,250) 83.89%, rgb(246,248,252) 85.50%, rgb(249,250,253) 87.11%, rgb(251,252,254) 88.72%, rgb(253,253,254) 90.33%, rgb(254,254,255) 91.94%, var(--_color---bg--default--1) 93.56%, var(--_color---bg--default--1) 95.17%, var(--_color---bg--default--1) 96.78%, var(--_color---bg--default--1) 98.39%, var(--_color---bg--default--1) 100.00%, var(--_color---bg--default--1) 100%); /* @kind color */
  --_gradient---pub-hero-scrim: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(128,158,206) 0%, rgb(128,158,206) 42%, rgb(128,158,206) 43.61%, rgb(128,158,206) 45.22%, rgb(128,158,206) 46.83%, rgb(128,158,206) 48.44%, rgb(129,159,206) 50.06%, rgb(130,160,207) 51.67%, rgb(132,161,207) 53.28%, rgb(134,163,208) 54.89%, rgb(137,165,209) 56.50%, rgb(140,167,211) 58.11%, rgb(145,171,213) 59.72%, rgb(150,175,215) 61.33%, rgb(156,180,217) 62.94%, rgb(163,184,219) 64.56%, rgb(169,189,222) 66.17%, rgb(176,195,225) 67.78%, rgb(183,200,227) 69.39%, rgb(192,207,231) 71.00%, rgb(200,213,234) 72.61%, rgb(207,218,236) 74.22%, rgb(214,224,239) 75.83%, rgb(220,229,242) 77.44%, rgb(227,233,244) 79.06%, rgb(233,238,246) 80.67%, rgb(238,242,248) 82.28%, rgb(243,246,250) 83.89%, rgb(246,248,252) 85.50%, rgb(249,250,253) 87.11%, rgb(251,252,254) 88.72%, rgb(253,253,254) 90.33%, rgb(254,254,255) 91.94%, var(--_color---bg--default--1) 93.56%, var(--_color---bg--default--1) 95.17%, var(--_color---bg--default--1) 96.78%, var(--_color---bg--default--1) 98.39%, var(--_color---bg--default--1) 100.00%, var(--_color---bg--default--1) 100%); /* @kind color */
  /* ── Palette additions: colours the design uses that no role token covers
     (named family-lightness[-alpha]; created during the tokenising pass) ── */
  --base--blue-36-a00: rgba(4, 70, 180, 0);
  --base--blue-36-a00-2: rgba(8, 70, 175, 0);
  --base--blue-36-a20: rgba(8, 70, 175, 0.2);
  --base--blue-36-a24: rgba(4, 70, 180, 0.24);
  --base--blue-36-a26: rgba(8, 70, 175, 0.26);
  --base--blue-36-a45: rgba(4, 70, 180, 0.45);
  --base--blue-36-a45-2: rgba(8, 70, 175, 0.45);
  --base--blue-36-a64: rgba(8, 70, 175, 0.64);
  --base--blue-36-a66: rgba(4, 70, 180, 0.66);
  --base--blue-36-a68: rgba(8, 70, 175, 0.68);
  --base--blue-36-a70: rgba(4, 70, 180, 0.7);
  --base--hero-blue-a80: rgba(11, 73, 164, 0.8);
  --base--hero-blue-a70: rgba(11, 73, 164, 0.7);
  --base--hero-blue-a26: rgba(11, 73, 164, 0.26);
  --base--hero-blue-a00: rgba(11, 73, 164, 0);
  --base--hero-blue-a68: rgba(11, 73, 164, 0.68);
  --base--hero-blue-a45: rgba(11, 73, 164, 0.45);
  --base--hero-blue-a20: rgba(11, 73, 164, 0.2);
  --base--blue-36-a74: rgba(8, 70, 175, 0.74);
  --base--blue-36-a86: rgba(4, 70, 180, 0.86);
  --base--blue-37: rgb(0, 113, 190);
  --base--blue-37-2: rgb(10, 74, 178);
  --base--blue-41: rgb(28, 87, 181);
  --base--blue-43: rgb(8, 113, 211);
  --base--blue-46: rgb(32, 104, 204);
  --base--blue-50: rgb(50, 112, 203);
  --base--blue-54: rgb(41, 136, 232);
  --base--blue-61: rgb(66, 165, 245);
  --base--grey-08-a64: rgba(17, 26, 13, 0.64);
  --base--grey-08-a88: rgba(17, 26, 13, 0.88);
  --base--grey-10-a08: rgba(26, 26, 23, 0.08);
  --base--grey-12-a64: rgba(24, 30, 37, 0.64);
  --base--grey-34: rgb(84, 86, 90);
  --base--grey-44: rgb(112, 112, 112);
  --base--grey-50-a08: rgba(127, 127, 127, 0.08);
  --base--grey-73-a32: rgba(187, 187, 187, 0.32);
  --base--grey-94: rgb(234, 237, 243);
  --base--grey-95-a00: rgba(240, 241, 243, 0);
  --base--grey-95-a55: rgba(240, 241, 243, 0.55);
  --base--grey-95-a90: rgba(240, 241, 243, 0.9);
  --base--grey-96-a64: rgba(247, 246, 245, 0.64);
  --base--navy-05-a50: rgba(4, 7, 22, 0.5);
  --base--navy-06: rgb(4, 9, 26);
  --base--navy-09: rgb(0, 22, 46);
  --base--navy-10-a22: rgba(8, 14, 43, 0.22);
  --base--navy-10-a40: rgba(8, 14, 43, 0.4);
  --base--navy-10-a50: rgba(8, 14, 43, 0.5);
  --base--navy-10-a62: rgba(8, 14, 43, 0.62);
  --base--navy-11: rgb(11, 15, 43);
  --base--navy-11-a00: rgba(11, 15, 43, 0);
  --base--navy-11-a00-2: rgba(11, 27, 44, 0);
  --base--navy-11-a25: rgba(10, 15, 44, 0.25);
  --base--navy-11-a34: rgba(11, 27, 44, 0.34);
  --base--navy-11-a38: rgba(10, 15, 44, 0.38);
  --base--navy-11-a55: rgba(10, 15, 44, 0.55);
  --base--navy-11-a56: rgba(11, 27, 44, 0.56);
  --base--navy-11-a72: rgba(11, 27, 44, 0.72);
  --base--navy-14: rgb(8, 25, 65);
  --base--navy-19-a08: rgba(5, 35, 91, 0.08);
  --base--sky-62: rgb(90, 148, 227);
  --base--sky-65: rgb(100, 155, 229);
  --base--sky-66: rgb(88, 154, 247);
  --base--sky-69: rgb(120, 168, 232);
  --base--sky-71: rgb(143, 168, 220);
  --base--sky-76: rgb(152, 189, 237);
  --base--sky-77: rgb(168, 185, 224);
  --base--sky-82: rgb(176, 208, 240);
  --base--sky-85: rgb(198, 221, 238);
  --base--sky-85-2: rgb(198, 208, 233);
  --base--sky-85-3: rgb(190, 213, 241);
  --base--sky-88: rgb(200, 232, 248);
  --base--sky-89: rgb(204, 235, 248);
  --base--sky-90: rgb(210, 234, 247);
  --base--sky-90-2: rgb(220, 226, 238);
  --base--sky-91: rgb(222, 232, 244);
  --base--sky-93-a90: rgba(229, 239, 246, 0.9);
  --base--teal-37: rgb(2, 187, 174);
  --base--white-100-a00: rgba(255, 255, 255, 0);
  --base--white-100-a06: rgba(255, 255, 255, 0.06);
  --base--white-100-a20: rgba(255, 255, 255, 0.2);
  --base--white-100-a70: rgba(255, 255, 255, 0.7);
  --base--white-100-a75: rgba(255, 255, 255, 0.75);
  --base--white-100-a90: rgba(255, 255, 255, 0.9);

}

/* ════════════════════════════════════════════════════════════════════════════
   01  Variables — typography
   ════════════════════════════════════════════════════════════════════════════ */

/* Typography tokens.
   Inter Tight is the only family: one face for display, body, UI and labels.
   Sizes, line-heights and letter-spacing are
   transcribed verbatim from the Figma frame; the desktop value is the ceiling
   and the floor comes from the file's own Mobile variable mode.
   Fluid roles interpolate between 24rem and 94.5rem of viewport. */
:root {
  --_typography---viewport--min: 24; /* @kind other */
  --_typography---viewport--max: 94.5; /* @kind other */

  --_typography---font--primary: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --_typography---font--secondary: var(--_typography---font--primary);
  --_typography---font--tertiary: var(--_typography---font--primary);

  --_typography---weight--title-normal: 500;
  --_typography---weight--title-prominent-1: 600;
  --_typography---weight--title-prominent-2: 700;
  --_typography---weight--body-normal: 400;
  --_typography---weight--body-prominent-1: 500;
  --_typography---weight--body-prominent-2: 600;

  /* headline-1 — hero H1: 64px / 1.1, Medium */
  --_typography---font-size--headline-1: clamp(2.5rem, 2.5rem + 1.5 * (100vw - 24rem) / 70.5, 4rem); /* @kind font */
  --_typography---line-height--headline-1: 1.1;
  --_typography---letter-spacing--headline-1: 0em;

  /* headline-2 — "Let's talk": 60px / 1, SemiBold */
  --_typography---font-size--headline-2: clamp(2.25rem, 2.25rem + 1.5 * (100vw - 24rem) / 70.5, 3.75rem); /* @kind font */
  --_typography---line-height--headline-2: 1;
  --_typography---letter-spacing--headline-2: 0em;

  /* title-1 — stat number: 48px / 52px / -2px */
  --_typography---font-size--title-1: clamp(2.25rem, 2.25rem + 0.75 * (100vw - 24rem) / 70.5, 3rem); /* @kind font */
  --_typography---line-height--title-1: 1.0833333;
  --_typography---letter-spacing--title-1: -0.125rem;

  /* title-2 — section heading: 40px / 44px */
  --_typography---font-size--title-2: clamp(2rem, 2rem + 0.5 * (100vw - 24rem) / 70.5, 2.5rem); /* @kind font */
  --_typography---line-height--title-2: 1.1;
  --_typography---letter-spacing--title-2: 0em;

  /* title-3 — card + industry row title: 24px / 1.4 */
  --_typography---font-size--title-3: clamp(1.25rem, 1.25rem + 0.5 * (100vw - 24rem) / 70.5, 1.5rem); /* @kind font */
  --_typography---line-height--title-3: 1.4;
  --_typography---letter-spacing--title-3: 0em;

  /* title-4 — blog title, FAQ question, testimonial quote: 22px / 1.3.
     The file also draws this size at 24px line-height (FAQ) and with -0.03em
     tracking (quotes); both are normalised onto this one role. */
  --_typography---font-size--title-4: clamp(1.25rem, 1.25rem + 0.375 * (100vw - 24rem) / 70.5, 1.375rem); /* @kind font */
  --_typography---line-height--title-4: 1.3;
  --_typography---letter-spacing--title-4: 0em;

  /* title-5 — hero subhead: 20px / 28px */
  --_typography---font-size--title-5: 1.25rem;
  --_typography---line-height--title-5: 1.4;
  --_typography---letter-spacing--title-5: 0em;

  /* title-6 — author name: 16px / 100% / -0.01em */
  --_typography---font-size--title-6: 1rem;
  --_typography---line-height--title-6: 1;
  --_typography---letter-spacing--title-6: -0.01em;

  /* body-1 — long-form intro: 20px / 28px */
  --_typography---font-size--body-1: 1.25rem;
  --_typography---line-height--body-1: 1.4;
  --_typography---letter-spacing--body-1: 0em;

  /* body-2 — card body: 16px / 1.6 */
  --_typography---font-size--body-2: 1rem;
  --_typography---line-height--body-2: 1.6;
  --_typography---letter-spacing--body-2: 0em;

  /* body-3 — footer + list body: 16px / 24px */
  --_typography---font-size--body-3: 1rem;
  --_typography---line-height--body-3: 1.5;
  --_typography---letter-spacing--body-3: 0em;

  /* body-4 — excerpt, clamped to 3 lines. The file sets 1.1 here, which is a
     side effect of the clamped text block in Figma; normalised to the body
     leading so clamped and unclamped copy match. */
  --_typography---font-size--body-4: 1rem;
  --_typography---line-height--body-4: 1.6;
  --_typography---letter-spacing--body-4: 0em;

  /* label-1 — buttons and nav: 15px / 22.5px */
  --_typography---font-size--label-1: 0.9375rem;
  --_typography---line-height--label-1: 1.5;
  --_typography---letter-spacing--label-1: 0em;

  /* label-2 — eyebrow: 12px / 22.5px / +1px, uppercase */
  --_typography---font-size--label-2: 0.75rem;
  --_typography---line-height--label-2: 1.875;
  --_typography---letter-spacing--label-2: 0.0625rem;

  /* label-3 — meta, copyright: 12px / 16px */
  --_typography---font-size--label-3: 0.75rem;
  --_typography---line-height--label-3: 1.3333333;
  --_typography---letter-spacing--label-3: 0.02em;
}

/* ════════════════════════════════════════════════════════════════════════════
   01  Variables — spacing (Povio template names: <axis>--<axis>-<size>)
   ════════════════════════════════════════════════════════════════════════════ */

/* Spacing tokens — four fluid axes plus a static scale.
   Desktop values are the source frame's own numbers; the floors come from the
   file's Mobile variable mode. Do not substitute one axis for another. */
:root {
  /* section — vertical padding on a <section> */
  --_spacing---section--section-0: 0rem;
  --_spacing---section--section-xs: clamp(1.5rem, 1.5rem + 1 * (100vw - 24rem) / 70.5, 2.5rem); /* @kind spacing */
  --_spacing---section--section-sm: clamp(2.5rem, 2.5rem + 1.5 * (100vw - 24rem) / 70.5, 4rem); /* @kind spacing */
  --_spacing---section--section-md: clamp(4rem, 4rem + 1 * (100vw - 24rem) / 70.5, 5rem); /* @kind spacing */
  --_spacing---section--section-lg: clamp(6rem, 6rem + 1.5 * (100vw - 24rem) / 70.5, 7.5rem); /* @kind spacing */

  /* inner — padding inside a component */
  --_spacing---inner--inner-0: 0rem;
  --_spacing---inner--inner-xs: 0.25rem;
  --_spacing---inner--inner-sm: 0.5rem;
  --_spacing---inner--inner-md: 1rem;
  --_spacing---inner--inner-lg: clamp(1.5rem, 1.5rem + 0.5 * (100vw - 24rem) / 70.5, 2rem); /* @kind spacing */
  --_spacing---inner--inner-xl: clamp(1.5rem, 1.5rem + 1.5 * (100vw - 24rem) / 70.5, 3rem); /* @kind spacing */
  --_spacing---inner--inner-2xl: clamp(2rem, 2rem + 2 * (100vw - 24rem) / 70.5, 4rem); /* @kind spacing */

  /* gap — flex and grid gaps. The three smallest steps are static by design. */
  --_spacing---gap--gap-0: 0rem;
  --_spacing---gap--gap-2xs: 0.25rem;
  --_spacing---gap--gap-xs: 0.5rem;
  --_spacing---gap--gap-sm: 0.75rem;
  --_spacing---gap--gap-md: 1rem;
  --_spacing---gap--gap-lg: clamp(1rem, 1rem + 0.25 * (100vw - 24rem) / 70.5, 1.25rem); /* @kind spacing */
  --_spacing---gap--gap-xl: clamp(1rem, 1rem + 0.5 * (100vw - 24rem) / 70.5, 1.5rem); /* @kind spacing */
  --_spacing---gap--gap-2xl: clamp(1.5rem, 1.5rem + 1 * (100vw - 24rem) / 70.5, 2.5rem); /* @kind spacing */
  --_spacing---gap--gap-3xl: clamp(2.5rem, 2.5rem + 2.5 * (100vw - 24rem) / 70.5, 5rem); /* @kind spacing */

  /* margin — between elements */
  --_spacing---margin--margin-0: 0rem;
  --_spacing---margin--margin-xs: 0.5rem;
  --_spacing---margin--margin-sm: 1rem;
  --_spacing---margin--margin-md: 1.5rem;
  --_spacing---margin--margin-lg: 2rem;
  --_spacing---margin--margin-xl: 3rem;

  /* static — values that must never scale */
  --_spacing---static--spacing-0: 0rem;
  --_spacing---static--spacing-px: 0.0625rem;
  --_spacing---static--spacing-1: 0.25rem;
  --_spacing---static--spacing-2: 0.5rem;
  --_spacing---static--spacing-2-5: 0.625rem;
  --_spacing---static--spacing-3: 0.75rem;
  --_spacing---static--spacing-3-25: 0.8125rem;
  --_spacing---static--spacing-4: 1rem;
  --_spacing---static--spacing-5: 1.25rem;
  --_spacing---static--spacing-6: 1.5rem;
  --_spacing---static--spacing-8: 2rem;
  --_spacing---static--spacing-10: 2.5rem;
  --_spacing---static--spacing-12: 3rem;
  --_spacing---static--spacing-16: 4rem;
  --_spacing---static--spacing-20: 5rem;
  --_spacing---static--spacing-24: 6rem;
  --_spacing---static--spacing-30: 7.5rem;
  --_spacing---static--spacing-32: 8rem;
  --_spacing---static--spacing-35: 8.75rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   01  Variables — layout, radius, elevation, motion
   ════════════════════════════════════════════════════════════════════════════ */

/* Layout, radius, elevation and motion tokens. */
:root {
  /* Container widths — the source frame is 1512 wide with a 1280 content grid. */
  --max-width--main: 94.5rem;      /* 1512 — frame width */
  --max-width--content: 80rem;     /* 1280 — nav + section content grid */
  --max-width--panel: 88.5rem;     /* 1416 — footer glass panel */
  --max-width--prose: 40rem;       /* 640  — heading + intro column */
  --max-width--full: 100%;
  --_spacing---page-padding: clamp(1rem, 1rem + 4 * (100vw - 24rem) / 70.5, 5rem); /* @kind spacing */
  --_spacing---page-padding-wide: clamp(1rem, 1rem + 7.25 * (100vw - 24rem) / 70.5, 8.75rem); /* @kind spacing */

  /* Radius — the file uses only 4 / 6 / 8 / 12. */
  --rounding--0: 0rem;
  --rounding--sm: 0.25rem;   /* 4  — chips, portraits */
  --rounding--md: 0.375rem;  /* 6  — buttons, cards */
  --rounding--lg: 0.5rem;    /* 8  — bento tiles, feature image */
  --rounding--xl: 0.75rem;   /* 12 — floating nav bar */
  --rounding--full: 9999px;

  /* Elevation — the design has no drop shadows. Depth is drawn with 1px inset
     rings, translucent glass and the dot-grid pattern. */
  --shadow--ring-inverted: inset 0 0 0 1px var(--_color---outline--inverted-solid);
  --shadow--ring-primary: inset 0 0 0 1px var(--_color---interactive--outline--idle);
  --shadow--ring-black: inset 0 0 0 1px var(--base--black);
  --shadow--hairline: inset 0 0 0 0.5px var(--_color---outline--hairline);
  --blur--nav: blur(50px); /* @kind other */

  /* Motion — no bounce, no scale. Colour and opacity only. */
  --motion--duration-fast: 120ms; /* @kind other */
  --motion--duration: 200ms; /* @kind other */
  --motion--easing: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

}

/* ════════════════════════════════════════════════════════════════════════════
   02  Global tag styles — Webflow: Body (All Pages), All Links, form elements
   ════════════════════════════════════════════════════════════════════════════ */

html,body{margin:0;padding:0;background-color:var(--_color---bg--default--bg);font-family:var(--_typography---font--primary);-webkit-font-smoothing:antialiased}
a{color:var(--_color---text--brand--link);text-decoration:none}
a:hover{color:var(--_color---text--brand--link-hover)}
button,input,select,textarea{font-family:inherit}

/* ════════════════════════════════════════════════════════════════════════════
   03  Utility layer — mirrors the u-* classes installed on the Povio template.
   Do not recreate in Webflow; never redefine.
   ════════════════════════════════════════════════════════════════════════════ */

/* The u-* utility layer — the primary styling mechanism.
   These class names mirror the Povio core template's installed utility layer;
   in the Webflow build they already exist, so never redefine them there. The
   values here are bound to M. A. Polce tokens. Single-class selectors only. */

/* ── Text style ─────────────────────────────────────────────────────────── */
.u-text-style-headline-1 {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--headline-1);
  line-height: var(--_typography---line-height--headline-1);
  letter-spacing: var(--_typography---letter-spacing--headline-1);
}
.u-text-style-headline-2 {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--headline-2);
  line-height: var(--_typography---line-height--headline-2);
  letter-spacing: var(--_typography---letter-spacing--headline-2);
}
.u-text-style-title-1 {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--title-1);
  line-height: var(--_typography---line-height--title-1);
  letter-spacing: var(--_typography---letter-spacing--title-1);
}
.u-text-style-title-2 {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--title-2);
  line-height: var(--_typography---line-height--title-2);
  letter-spacing: var(--_typography---letter-spacing--title-2);
}
.u-text-style-title-3 {
  font-family: var(--_typography---font--secondary);
  font-size: var(--_typography---font-size--title-3);
  line-height: var(--_typography---line-height--title-3);
  letter-spacing: var(--_typography---letter-spacing--title-3);
}
.u-text-style-title-4 {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--title-4);
  line-height: var(--_typography---line-height--title-4);
  letter-spacing: var(--_typography---letter-spacing--title-4);
}
.u-text-style-title-5 {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--title-5);
  line-height: var(--_typography---line-height--title-5);
  letter-spacing: var(--_typography---letter-spacing--title-5);
}
.u-text-style-title-6 {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--title-6);
  line-height: var(--_typography---line-height--title-6);
  letter-spacing: var(--_typography---letter-spacing--title-6);
}
.u-text-style-body-1 {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-1);
  line-height: var(--_typography---line-height--body-1);
  letter-spacing: var(--_typography---letter-spacing--body-1);
}
.u-text-style-body-2 {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-2);
  line-height: var(--_typography---line-height--body-2);
  letter-spacing: var(--_typography---letter-spacing--body-2);
}
.u-text-style-body-3 {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-3);
  line-height: var(--_typography---line-height--body-3);
  letter-spacing: var(--_typography---letter-spacing--body-3);
}
.u-text-style-body-4 {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-4);
  line-height: var(--_typography---line-height--body-4);
  letter-spacing: var(--_typography---letter-spacing--body-4);
}
.u-text-style-label-1 {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-1);
  line-height: var(--_typography---line-height--label-1);
  letter-spacing: var(--_typography---letter-spacing--label-1);
}
.u-text-style-label-2 {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-2);
  line-height: var(--_typography---line-height--label-2);
  letter-spacing: var(--_typography---letter-spacing--label-2);
}
.u-text-style-label-3 {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  letter-spacing: var(--_typography---letter-spacing--label-3);
}

/* ── Weight ─────────────────────────────────────────────────────────────── */
.u-title-normal {
  font-weight: var(--_typography---weight--title-normal);
}
.u-title-prominent-1 {
  font-weight: var(--_typography---weight--title-prominent-1);
}
.u-title-prominent-2 {
  font-weight: var(--_typography---weight--title-prominent-2);
}
.u-body-normal {
  font-weight: var(--_typography---weight--body-normal);
}
.u-body-prominent-1 {
  font-weight: var(--_typography---weight--body-prominent-1);
}
.u-body-prominent-2 {
  font-weight: var(--_typography---weight--body-prominent-2);
}

/* ── Text handling ──────────────────────────────────────────────────────── */
.u-text-transform-uppercase {
  text-transform: uppercase;
}
.u-text-transform-lowercase {
  text-transform: lowercase;
}
.u-text-transform-capitalize {
  text-transform: capitalize;
}
.u-text-transform-none {
  text-transform: none;
}
.u-text-wrap-balance {
  text-wrap: balance;
}
.u-text-wrap-pretty {
  text-wrap: pretty;
}
.u-text-wrap-default {
  text-wrap: wrap;
}
.u-line-clamp-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.u-line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.u-line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.u-line-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* ── Alignment ──────────────────────────────────────────────────────────── */
.u-align-left {
  text-align: left;
}
.u-align-center {
  text-align: center;
}
.u-align-right {
  text-align: right;
}

/* ── Section ────────────────────────────────────────────────────────────── */
.u-section {
  padding-top: var(--_spacing---section--section-lg);
  padding-bottom: var(--_spacing---section--section-lg);
}
.u-section-0 {
  padding-top: var(--_spacing---section--section-0);
  padding-bottom: var(--_spacing---section--section-0);
}
.u-section-xs {
  padding-top: var(--_spacing---section--section-xs);
  padding-bottom: var(--_spacing---section--section-xs);
}
.u-section-sm {
  padding-top: var(--_spacing---section--section-sm);
  padding-bottom: var(--_spacing---section--section-sm);
}
.u-section-md {
  padding-top: var(--_spacing---section--section-md);
  padding-bottom: var(--_spacing---section--section-md);
}
.u-section-lg {
  padding-top: var(--_spacing---section--section-lg);
  padding-bottom: var(--_spacing---section--section-lg);
}

/* ── Container ──────────────────────────────────────────────────────────── */
.u-container-0 {
  width: 100%;
  max-width: var(--max-width--full);
  margin-inline: auto;
  padding-inline: var(--_spacing---page-padding);
}
.u-container-xs {
  width: 100%;
  max-width: var(--max-width--prose);
  margin-inline: auto;
  padding-inline: var(--_spacing---page-padding);
}
.u-container-sm {
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: var(--_spacing---page-padding);
}
.u-container-md {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--_spacing---page-padding);
}
.u-container-lg {
  width: 100%;
  max-width: calc(var(--max-width--content) + 2 * var(--_spacing---page-padding));
  margin-inline: auto;
  padding-inline: var(--_spacing---page-padding);
}
.u-container-xl {
  width: 100%;
  max-width: var(--max-width--main);
  margin-inline: auto;
  padding-inline: var(--_spacing---page-padding);
}

/* ── Gap ────────────────────────────────────────────────────────────────── */
.u-gap-0 {
  gap: var(--_spacing---gap--gap-0);
}
.u-gap-2xs {
  gap: var(--_spacing---gap--gap-2xs);
}
.u-gap-xs {
  gap: var(--_spacing---gap--gap-xs);
}
.u-gap-sm {
  gap: var(--_spacing---gap--gap-sm);
}
.u-gap-md {
  gap: var(--_spacing---gap--gap-md);
}
.u-gap-lg {
  gap: var(--_spacing---gap--gap-lg);
}
.u-gap-xl {
  gap: var(--_spacing---gap--gap-xl);
}
.u-gap-2xl {
  gap: var(--_spacing---gap--gap-2xl);
}
.u-gap-3xl {
  gap: var(--_spacing---gap--gap-3xl);
}

/* ── Horizontal flex ────────────────────────────────────────────────────── */
.u-hflex-left-top {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.u-hflex-left-center {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.u-hflex-left-bottom {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
}
.u-hflex-left-stretch {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}
.u-hflex-center-top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
.u-hflex-center-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.u-hflex-center-bottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}
.u-hflex-center-stretch {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}
.u-hflex-right-center {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.u-hflex-between-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.u-hflex-between-center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.u-hflex-between-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.u-hflex-between-stretch {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}
.u-hflex-wrap {
  flex-wrap: wrap;
}
.u-hflex-nowrap {
  flex-wrap: nowrap;
}

/* ── Vertical flex ──────────────────────────────────────────────────────── */
.u-vflex-left-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.u-vflex-left-center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.u-vflex-left-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
.u-vflex-left-between {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.u-vflex-center-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.u-vflex-center-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.u-vflex-center-between {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.u-vflex-stretch-top {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.u-vflex-stretch-between {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
}
.u-vflex-wrap {
  flex-wrap: wrap;
}
.u-vflex-nowrap {
  flex-wrap: nowrap;
}

/* ── Flex child ─────────────────────────────────────────────────────────── */
.u-flex-grow {
  flex-grow: 1;
}
.u-flex-shrink {
  flex-shrink: 1;
}
.u-flex-noshrink {
  flex-shrink: 0;
}

/* ── Display / position / z ─────────────────────────────────────────────── */
.u-display-block {
  display: block;
}
.u-display-inline {
  display: inline;
}
.u-display-inline-block {
  display: inline-block;
}
.u-display-inline-flex {
  display: inline-flex;
}
.u-display-none {
  display: none;
}
.u-position-static {
  position: static;
}
.u-position-relative {
  position: relative;
}
.u-position-absolute {
  position: absolute;
}
.u-position-fixed {
  position: fixed;
}
.u-position-sticky {
  position: sticky;
}
.u-z-0 {
  z-index: 0;
}
.u-z-1 {
  z-index: 1;
}
.u-z-2 {
  z-index: 2;
}
.u-z-3 {
  z-index: 3;
}
.u-z-negative {
  z-index: -1;
}

/* ── Sizing ─────────────────────────────────────────────────────────────── */
.u-w-full {
  width: 100%;
}
.u-h-full {
  height: 100%;
}
.u-max-width-full {
  max-width: 100%;
}
.u-max-width-none {
  max-width: none;
}
.u-max-width-30ch {
  max-width: 30ch;
}
.u-max-width-40ch {
  max-width: 40ch;
}
.u-max-width-50ch {
  max-width: 50ch;
}
.u-max-width-60ch {
  max-width: 60ch;
}
.u-max-width-70ch {
  max-width: 70ch;
}
.u-max-width-80ch {
  max-width: 80ch;
}
.u-m-inline-auto {
  margin-inline: auto;
}

/* ── Overflow ───────────────────────────────────────────────────────────── */
.u-overflow-hidden {
  overflow: hidden;
}
.u-overflow-visible {
  overflow: visible;
}
.u-overflow-clip {
  overflow: clip;
}
.u-overflow-x-auto {
  overflow-x: auto;
}
.u-overflow-y-auto {
  overflow-y: auto;
}

/* ── Colour ─────────────────────────────────────────────────────────────── */
.u-color-1 {
  color: var(--_color---text--default--1);
}
.u-color-2 {
  color: var(--_color---text--default--3);
}
.u-color-inverted-1 {
  color: var(--_color---text--inverted--1);
}
.u-color-inverted-2 {
  color: var(--_color---text--inverted--3);
}
.u-color-brand {
  color: var(--_color---text--brand--1);
}
.u-color-current {
  color: currentColor;
}
.u-bg-1 {
  background-color: var(--_color---bg--default--1);
}
.u-bg-2 {
  background-color: var(--_color---bg--default--bg);
}
.u-bg-inverted {
  background-color: var(--_color---bg--inverted--bg);
}
.u-bg-accent {
  background-color: var(--_color---bg--accent);
}
.u-bg-transparent {
  background-color: transparent;
}

/* ── Radius ─────────────────────────────────────────────────────────────── */
.u-radius-0 {
  border-radius: var(--rounding--0);
}
.u-radius-sm {
  border-radius: var(--rounding--sm);
}
.u-radius-md {
  border-radius: var(--rounding--md);
}
.u-radius-lg {
  border-radius: var(--rounding--lg);
}
.u-radius-xl {
  border-radius: var(--rounding--xl);
}
.u-radius-full {
  border-radius: var(--rounding--full);
}
.u-radius-inherit {
  border-radius: inherit;
}

/* ── Media ──────────────────────────────────────────────────────────────── */
.u-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.u-cover-absolute {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.u-object-fit-cover {
  object-fit: cover;
}
.u-object-fit-contain {
  object-fit: contain;
}
.u-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Accessibility / pointer ────────────────────────────────────────────── */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.u-skip-to-main {
  position: absolute;
  left: -9999px;
  top: 0;
}
.u-skip-to-main:focus {
  left: var(--_spacing---static--spacing-4);
  top: var(--_spacing---static--spacing-4);
  z-index: 3;
  background-color: var(--_color---bg--default--1);
  color: var(--_color---text--default--1);
  padding: var(--_spacing---static--spacing-2) var(--_spacing---static--spacing-4);
}
.u-hide-if-empty:empty {
  display: none;
}
.u-pointer-on {
  pointer-events: auto;
}
.u-pointer-off {
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   04  Shared components — Eyebrow, Chip, Stat, Blog card, Service tile, Industry row,
   Testimonial, FAQ item, Section header, Logo marquee, Footer base
   ════════════════════════════════════════════════════════════════════════════ */

/* Component classes. Class-only, single-class selectors, rem units, tokens for
   every value. Component class first, then u-* utilities in the markup. */

/* ── Button Main ────────────────────────────────────────────────────────── */
.button_main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_spacing---static--spacing-2);
  padding: var(--_spacing---static--spacing-3-25) var(--_spacing---static--spacing-8);
  border: 0;
  border-radius: var(--rounding--md);
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-1);
  line-height: var(--_typography---line-height--label-1);
  font-weight: var(--_typography---weight--title-normal);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--motion--duration) var(--motion--easing),color var(--motion--duration) var(--motion--easing),box-shadow var(--motion--duration) var(--motion--easing);
}
.button_main-primary {
  background-color: var(--_color---interactive--primary--idle);
  color: var(--_color---interactive--primary--on);
}
.button_main-primary:hover {
  background-color: var(--_color---interactive--primary--hover);
}
.button_main-primary:active {
  background-color: var(--_color---interactive--primary--active);
}
.button_main-primary:disabled {
  background-color: var(--_color---interactive--primary--disabled);
  color: var(--_color---interactive--primary--on-disabled);
  cursor: not-allowed;
}
.button_main-secondary {
  background-color: var(--_color---interactive--secondary--idle);
  color: var(--_color---interactive--secondary--on);
}
.button_main-secondary:hover {
  background-color: var(--_color---interactive--secondary--hover);
}
.button_main-secondary:active {
  background-color: var(--_color---interactive--secondary--active);
}
.button_main-outline {
  background-color: transparent;
  color: var(--_color---interactive--outline--on);
  box-shadow: var(--shadow--ring-primary);
}
.button_main-outline:hover {
  background-color: var(--_color---interactive--outline--hover);
}
.button_main-outline:active {
  background-color: var(--_color---interactive--outline--active);
}
.button_main-outline-black {
  background-color: transparent;
  color: var(--_color---text--on-card);
  box-shadow: var(--shadow--ring-black);
}
.button_main-outline-black:hover {
  background-color: var(--_color---interactive--outline--hover);
}
.button_main-glass {
  background-color: var(--_color---interactive--outline-inverted--idle);
  color: var(--_color---interactive--outline-inverted--on);
}
.button_main-glass:hover {
  background-color: var(--_color---interactive--outline-inverted--hover);
}
.button_main-glass:active {
  background-color: var(--_color---interactive--outline-inverted--active);
}
.button_main-nav {
  border-radius: var(--_spacing---static--spacing-2);
}
.button_main:focus-visible {
  outline: 0.125rem solid var(--_color---focus--ring);
  outline-offset: 0.125rem;
}

/* ── Eyebrow (square dot + tracked caps label) ──────────────────────────── */
.eyebrow_wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-2);
}
.eyebrow_dot {
  width: 0.375rem;
  height: 0.375rem;
  flex-shrink: 0;
  background-color: var(--_color---text--brand--1);
}
.eyebrow_text {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-2);
  line-height: var(--_typography---line-height--label-2);
  letter-spacing: var(--_typography---letter-spacing--label-2);
  font-weight: var(--_typography---weight--title-normal);
  text-transform: uppercase;
  color: var(--base--blue-37);
}
.eyebrow_dot-inverted {
  background-color: var(--_color---text--inverted--1);
}
.eyebrow_text-inverted {
  color: var(--_color---text--inverted--1);
}
/* Eyebrow ink: brand blue on the light page, white wherever it sits on a
   gradient (hero, footer sky, dark testimonials, About's join band). */
.hero_section .eyebrow_dot-inverted,
.footer_wrap .eyebrow_dot-inverted,
.testimonials_section .eyebrow_dot-inverted,
.ab_join .eyebrow_dot-inverted {
  background-color: var(--_color---text--inverted--1);
}
.hero_section .eyebrow_text-inverted,
.footer_wrap .eyebrow_text-inverted,
.testimonials_section .eyebrow_text-inverted,
.ab_join .eyebrow_text-inverted {
  color: var(--_color---text--inverted--1);
}
.chip_dot {
  width: 0.375rem;
  height: 0.375rem;
  flex-shrink: 0;
  background-color: var(--_color---text--inverted--1);
}
.chip_text {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-2);
  line-height: var(--_typography---line-height--label-2);
  letter-spacing: var(--_typography---letter-spacing--label-2);
  font-weight: var(--_typography---weight--title-normal);
  text-transform: uppercase;
  color: var(--_color---text--inverted--1);
  white-space: nowrap;
}
.chip_wrap-dark {
  box-shadow: var(--shadow--ring-primary);
}
.chip_dot-dark {
  background-color: var(--_color---text--brand--3);
}
.chip_text-dark {
  color: var(--_color---text--brand--3);
}

/* ── Arrow Link (text + arrow_outward glyph) ────────────────────────────── */
.arrow_link {
  display: inline-flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-3);
  text-decoration: none;
  color: var(--_color---text--default--1);
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-1);
  line-height: var(--_typography---line-height--label-1);
  font-weight: var(--_typography---weight--title-normal);
  transition: opacity var(--motion--duration) var(--motion--easing);
}
.arrow_link:hover {
  opacity: 0.7;
}
.arrow_link_icon {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
}

/* ── Section Header ─────────────────────────────────────────────────────── */
.section_header_wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--_spacing---gap--gap-2xl);
  width: 100%;
  flex-wrap: wrap;
}
.section_header_content {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-6);
  max-width: var(--max-width--prose);
}
.section_header_title {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--title-2);
  line-height: var(--_typography---line-height--title-2);
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--1);
  text-wrap: pretty;
  margin: 0;
}
.section_header_wrap-center {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.section_header_content-center {
  align-items: center;
  text-align: center;
}

/* ── Service Tile (bento) ───────────────────────────────────────────────── */
.service_tile_wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-2);
  padding: var(--_spacing---inner--inner-lg);
  border-radius: var(--rounding--lg);
  overflow: hidden;
  background-color: var(--_color---bg--default--1);
  min-height: 29.9375rem;
  text-decoration: none;
}
.service_tile_pattern {
  position: absolute;
  left: -4.375rem;
  top: 0;
  width: 57.625rem;
  max-width: none;
  opacity: 0.5;
  pointer-events: none;
}
.service_tile_head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--_spacing---static--spacing-6);
}
.service_tile_copy {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
  flex-grow: 1;
}
.service_tile_title {
  font-family: var(--_typography---font--secondary);
  font-size: var(--_typography---font-size--title-3);
  line-height: var(--_typography---line-height--title-3);
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--2);
  margin: 0;
}
.service_tile_text {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-2);
  line-height: var(--_typography---line-height--body-2);
  font-weight: var(--_typography---weight--body-normal);
  color: var(--_color---text--default--3);
  margin: 0;
}
.service_tile_action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_spacing---static--spacing-8);
  height: var(--_spacing---static--spacing-8);
  border-radius: var(--rounding--md);
  flex-shrink: 0;
}
.service_tile_icon {
  width: 0.75rem;
  height: 0.75rem;
}
.service_tile_wrap-blue {
  background: var(--_gradient---tile-blue);
}
.service_tile_cap {
  position: absolute;
  left: 0;
  top: -1.25rem;
  width: 100%;
  height: 7.875rem;
  background: var(--_gradient---tile-blue-cap);
}
.service_tile_wrap-teal {
  background-color: var(--base--blue-50); /* the cube clip's own blue, now that the dots are transparent */
}
.service_tile_fade {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 15.0625rem;
  background: var(--_gradient---tile-teal-fade);
}
.service_tile_wrap-pale {
  background-color: var(--base--sky-90); /* the chart clip's own pale blue */
}
/* Protect the Business: the pale-blue wave that used to be baked into the padlock clip. */
.service_tile_wrap.is-wave {
  background-image: linear-gradient(166deg, var(--base--white-100-a00) 0%, var(--base--white-100-a00) 60%, var(--base--sky-93-a90) 78%, var(--base--sky-85) 100%);
}
.service_tile_title-inverted {
  color: var(--_color---text--inverted--2);
}
.service_tile_text-inverted {
  color: var(--_color---text--inverted--3);
}

/* ── Stat ───────────────────────────────────────────────────────────────── */
.stat_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--_spacing---static--spacing-2);
  padding: 0 var(--_spacing---static--spacing-6);
  min-width: 11.25rem;
  height: 5.25rem;
  border: 1px solid var(--_color---outline--subtle);
}
.stat_value {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--title-1);
  line-height: var(--_typography---line-height--title-1);
  letter-spacing: var(--_typography---letter-spacing--title-1);
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--1);
}
.stat_label {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-3);
  line-height: var(--_typography---line-height--body-3);
  font-weight: var(--_typography---weight--body-normal);
  color: var(--_color---text--default--3);
}

/* ── Testimonial Card ───────────────────────────────────────────────────── */
.testimonial_wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--_spacing---inner--inner-lg);
  border-radius: var(--rounding--md);
  background-color: var(--_color---bg--default--1);
  overflow: hidden;
  height: 28.125rem;
}
.testimonial_quote {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--title-4);
  line-height: var(--_typography---line-height--title-4);
  letter-spacing: -0.03em;
  font-weight: var(--_typography---weight--body-normal);
  color: var(--_color---text--default--1);
  margin: 0;
  text-wrap: pretty;
}
.testimonial_footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--_spacing---gap--gap-2xl);
}
.testimonial_author {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-2);
}
.testimonial_author_name {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--title-6);
  line-height: var(--_typography---line-height--title-6);
  letter-spacing: var(--_typography---letter-spacing--title-6);
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--1);
  text-transform: uppercase;
}
.testimonial_author_meta {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-1);
}
.testimonial_author_company {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  letter-spacing: var(--_typography---letter-spacing--label-3);
  font-weight: var(--_typography---weight--body-normal);
  text-transform: uppercase;
  color: var(--_color---text--default--4);
}
.testimonial_author_icon {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
}
.testimonial_photo {
  width: 8.75rem;
  height: 8.75rem;
  border-radius: var(--rounding--sm);
  object-fit: cover;
  flex-shrink: 0;
}

/* ── Blog Card (compact row) ────────────────────────────────────────────── */
.blog_card_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--_spacing---inner--inner-lg);
  border-radius: var(--rounding--md);
  background-color: var(--_color---bg--default--1);
  text-decoration: none;
  transition: background-color var(--motion--duration) var(--motion--easing);
}
.blog_card_wrap:hover {
  background-color: var(--_color---bg--default--bg);
}
.blog_card_body {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-4);
  flex-grow: 1;
}
.blog_card_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--_spacing---static--spacing-4);
}
.blog_card_title {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--title-4);
  line-height: var(--_typography---line-height--title-4);
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--2);
  max-width: 30rem;
  margin: 0;
}
.blog_card_icon {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
}
.blog_card_excerpt {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-4);
  line-height: var(--_typography---line-height--body-4);
  letter-spacing: var(--_typography---letter-spacing--body-4);
  font-weight: var(--_typography---weight--body-normal);
  color: var(--_color---text--default--3);
  margin: 0;
}

/* ── Blog Feature Card (image + copy) ──────────────────────────────────── */
.blog_feature_wrap {
  display: flex;
  flex-direction: column;
  border-radius: var(--rounding--md);
  background-color: var(--_color---bg--default--1);
  overflow: hidden;
  text-decoration: none;
  flex-grow: 1;
  align-self: stretch;
}
.blog_feature_visual {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
  background-color: var(--_color---bg--default--1);
  min-height: 12.5rem;
}
.blog_feature_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog_feature_content {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---inner--inner-lg);
  padding: var(--_spacing---inner--inner-lg);
}
.blog_feature_copy {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-4);
}
.blog_feature_title {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--title-4);
  line-height: var(--_typography---line-height--title-4);
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--2);
  margin: 0;
  max-width: 30rem;
}
.blog_feature_excerpt {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-4);
  line-height: var(--_typography---line-height--body-4);
  letter-spacing: var(--_typography---letter-spacing--body-4);
  font-weight: var(--_typography---weight--body-normal);
  color: var(--_color---text--default--3);
  margin: 0;
}

/* ── Industry Row ───────────────────────────────────────────────────────── */
.industry_row_wrap {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-6);
  width: 100%;
}
.industry_row_head {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-6);
}
.industry_row_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  flex-shrink: 0;
  color: var(--_color---text--brand--2);
}
.industry_row_glyph {
  width: 1.5rem;
  height: 1.5rem;
}
.industry_row_title {
  font-family: var(--_typography---font--secondary);
  font-size: var(--_typography---font-size--title-3);
  line-height: var(--_typography---line-height--title-3);
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--2);
  margin: 0;
}
.industry_row_text {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-2);
  line-height: var(--_typography---line-height--body-2);
  font-weight: var(--_typography---weight--body-normal);
  color: var(--_color---text--default--3);
  max-width: 30rem;
  margin: 0;
}
.industry_row_chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_spacing---static--spacing-4);
}
.industry_row_divider {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 0;
  background-color: var(--_color---outline--hairline);
}

/* ── FAQ Item ───────────────────────────────────────────────────────────── */
.faq_item_wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: var(--_spacing---static--spacing-4);
  border: 1px solid var(--_color---outline--default);
  overflow: hidden;
}
.faq_item_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--_spacing---static--spacing-4);
  width: 100%;
  padding: 0 0 var(--_spacing---static--spacing-4);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.faq_item_question {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--title-4);
  line-height: var(--_typography---line-height--title-4);
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--1);
  margin: 0;
}
.faq_item_icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  transition: transform var(--motion--duration) var(--motion--easing);
}
.faq_item_icon-open {
  transform: rotate(45deg);
}
.faq_item_answer {
  display: none;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-3);
  line-height: var(--_typography---line-height--body-3);
  font-weight: var(--_typography---weight--body-normal);
  color: var(--_color---text--default--3);
  margin: 0;
  padding-right: var(--_spacing---static--spacing-8);
}
.faq_item_answer-open {
  display: block;
}

/* ── Logo Marquee ───────────────────────────────────────────────────────── */
.logo_marquee_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--_spacing---static--spacing-10) 0;
}
.logo_marquee_track {
  display: flex;
  align-items: center;
  gap: var(--_spacing---gap--gap-3xl);
  flex-shrink: 0;
  animation: logo_marquee_scroll 45s linear infinite;
}
.logo_marquee_img {
  height: 2.0625rem;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.logo_marquee_img-tall {
  height: 3.75rem;
}
@keyframes logo_marquee_scroll{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--_spacing---gap--gap-3xl)))}}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer_wrap {
  position: relative;
  overflow: hidden;
  background: var(--_gradient---footer-sky);
}
/* Nav-theme sentinel: the pale top of the sky gradient, where the nav needs its
   dark items. Below it the footer is dark and the nav turns white. */
.footer_light_zone {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 21rem;
  pointer-events: none;
}
@media screen and (max-width: 991px) {
  .footer_light_zone {
    height: 10rem;
  }
}
.footer_cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_spacing---static--spacing-6);
  max-width: 53.0625rem;
  margin-inline: auto;
  padding: 10rem var(--_spacing---page-padding) 8.5rem;
  text-align: center;
}
.footer_cta_copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_spacing---static--spacing-4);
}
.footer_cta_title {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--headline-2);
  line-height: var(--_typography---line-height--headline-2);
  font-weight: var(--_typography---weight--title-prominent-1);
  color: var(--_color---text--inverted--1);
  margin: 0;
}
.footer_cta_text {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-2);
  line-height: var(--_typography---line-height--body-2);
  font-weight: var(--_typography---weight--body-normal);
  color: var(--_color---text--inverted--1);
  max-width: 30rem;
  margin: 0;
}
.footer_cta_actions {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-4);
  flex-wrap: wrap;
  justify-content: center;
}
.footer_panel {
  margin: 0 var(--_spacing---static--spacing-12) var(--_spacing---static--spacing-5);
  padding: var(--_spacing---inner--inner-2xl);
  border-radius: var(--rounding--md);
  background-color: var(--_color---bg--glass);
}
.footer_main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--_spacing---gap--gap-3xl);
  padding-bottom: 7.5rem;
}
.footer_brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--_spacing---gap--gap-3xl);
  width: 22.0625rem;
}
.footer_logo_img {
  width: 10.96875rem;
  height: auto;
}
.footer_contact {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-6);
}
.footer_address {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-3);
  line-height: var(--_typography---line-height--body-3);
  font-weight: var(--_typography---weight--body-normal);
  color: var(--_color---text--inverted--1);
  margin: 0;
}
.footer_nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_spacing---gap--gap-3xl) var(--_spacing---static--spacing-12);
}
.footer_col {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-6);
  min-width: 8.75rem;
}
.footer_col_title {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-2);
  line-height: var(--_typography---line-height--label-3);
  letter-spacing: var(--_typography---letter-spacing--label-2);
  font-weight: var(--_typography---weight--title-normal);
  text-transform: uppercase;
  color: var(--_color---text--inverted--1);
  margin: 0;
}
.footer_links {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-2);
}
.footer_link {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-3);
  line-height: var(--_typography---line-height--body-3);
  font-weight: var(--_typography---weight--body-normal);
  color: var(--_color---text--inverted--1);
  text-decoration: none;
  transition: opacity var(--motion--duration) var(--motion--easing);
}
.footer_link:hover {
  opacity: 0.7;
}
.footer_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--_spacing---gap--gap-2xl);
  flex-wrap: wrap;
  padding: var(--_spacing---static--spacing-8) 0 0;
  border-top: 1px solid var(--_color---outline--inverted);
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_social {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-4);
}
.footer_social_link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--_color---text--inverted--1);
  transition: opacity var(--motion--duration) var(--motion--easing);
}
.footer_social_link:hover {
  opacity: 0.7;
}
.footer_copyright {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: var(--_typography---weight--body-normal);
  color: var(--_color---text--inverted--1);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   04  Shared components — hero
   ════════════════════════════════════════════════════════════════════════════ */

/* Page sections — reusable Webflow blocks.
   Anatomy per section: _wrap owns vertical spacing + background, _contain owns
   width, _layout owns flex/grid. Class-only, single-class selectors, rem units,
   every value bound to a token. */

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero_section {
  position: relative;
  height: 57.5rem;
  overflow: clip;
  background-color: var(--_color---bg--default--bg);
}
.hero_bg_wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 60rem;
  overflow: clip;
  background: var(--_gradient---hero-sky);
}
/* Home: the hero clip used to lighten this sky (screen blend) and the corner shade
   darkened it again; with the Three.js mountain on a transparent frame, the box
   carries the lit sky itself, sampled from the old video frame. */
.hero_bg_wrap.is-home {
  background:
    var(--_gradient---hero-home-sky);
}
.hero_bg_wrap.is-home .hero_corner_shade {
  display: none;
}
/* The file's hero bitmap exports as a greyscale luminance plate. Multiplying it
   darkens the top-left corner and screening it burns the bottom edge out to the
   page grey — together they reproduce the source exactly over the brand blue. */
.hero_bg_shade_img {
  position: absolute;
  left: -33.73%;
  top: -20rem;
  width: 140%;
  height: 80rem;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.hero_bg_light_img {
  position: absolute;
  left: -33.73%;
  top: -20rem;
  width: 140%;
  height: 80rem;
  object-fit: cover;
  mix-blend-mode: screen;
}
/* The hero's own dot artwork (Figma layer "dot-grid (2) 1") carries no image
   fill in the export, so the sibling dot plate from the resources section
   stands in. It is placed low and centre-right, clear of the copy column. */
.hero_bg_pattern_img {
  position: absolute;
  left: 26%;
  top: 23.5rem;
  width: 53%;
  max-width: none;
  opacity: 0.42;
}
.hero_scrim {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 18.375rem;
  background: var(--_gradient---hero-scrim);
}
/* Width comes from the u-container-* utility on the element; this rule keeps
   only the stacking context and the top padding that clears the fixed nav. */
.hero_contain {
  position: relative;
  z-index: 1;
  padding-top: 11.625rem;
}
.hero_layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--_spacing---gap--gap-3xl);
}
.hero_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_spacing---gap--gap-2xl);
  max-width: 55.4375rem;
}
.hero_copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_spacing---static--spacing-6);
}
.hero_title {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--headline-1);
  line-height: var(--_typography---line-height--headline-1);
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--inverted--1);
  margin: 0;
  text-wrap: balance;
}
.hero_text {
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-1);
  line-height: 1.4;
  font-weight: var(--_typography---weight--body-normal);
  color: var(--_color---text--inverted--1);
  max-width: 40rem;
  margin: 0;
}
.hero_actions {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-4);
  flex-wrap: wrap;
}
.hero_badges {
  position: absolute;
  right: var(--_spacing---page-padding);
  bottom: 14.125rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.375rem;
  width: 16.8125rem;
}
.hero_badge {
  justify-content: center;
}

@media (max-width:991px) {
  .hero_section {
    height: auto;
    padding-bottom: var(--_spacing---section--section-lg);
  }
  .hero_bg_wrap {
    height: 100%;
  }
  .hero_scrim {
    height: 8rem;
  }
  .hero_bg_pattern_img {
    left: 34%;
    top: auto;
    bottom: 0;
    width: 80%;
    opacity: 0.3;
  }
  .hero_contain {
    padding-top: 9rem;
  }
  .hero_layout {
    flex-direction: column;
  }
  .hero_badges {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    margin-top: var(--_spacing---gap--gap-2xl);
    padding-inline: var(--_spacing---page-padding);
  }
  .hero_badge {
    flex: 0 0 auto;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   05  Site sections — Button Main visuals, hero, marquee, homepage sections in order, shared overview-page sections
   ════════════════════════════════════════════════════════════════════════════ */

/* Section rhythm: 100px top and bottom at full width. */
:root {
  --_spacing---section--section-lg: clamp(5rem, 5rem + 1.25 * (100vw - 24rem) / 70.5, 6.25rem);
}

/* ══ Hero ═════════════════════════════════════════════════════════════════ */

/* Motion plate: the supplied clip fills the hero box, screened so its light
   dot artwork reads over the blue sky and its black backdrop drops out. */
.hero_video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 114%;
  object-fit: cover;
  object-position: center bottom;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Darkness pooled in the top-left corner so the headline keeps its contrast.
   Multiplied over the hero sky, behind the headline and CTAs. */
.hero_corner_shade {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background: radial-gradient(125% 100% at -8% -14%, color-mix(in oklab, var(--_color---bg--inverted--1) 82.0%, transparent) 0.0%, color-mix(in oklab, var(--_color---bg--inverted--1) 79.7%, transparent) 9.6%, color-mix(in oklab, var(--_color---bg--inverted--1) 73.5%, transparent) 19.2%, color-mix(in oklab, var(--_color---bg--inverted--1) 64.3%, transparent) 28.8%, color-mix(in oklab, var(--_color---bg--inverted--1) 53.1%, transparent) 38.4%, color-mix(in oklab, var(--_color---bg--inverted--1) 41.0%, transparent) 48.0%, color-mix(in oklab, var(--_color---bg--inverted--1) 28.9%, transparent) 57.6%, color-mix(in oklab, var(--_color---bg--inverted--1) 17.7%, transparent) 67.2%, color-mix(in oklab, var(--_color---bg--inverted--1) 8.5%, transparent) 76.8%, color-mix(in oklab, var(--_color---bg--inverted--1) 2.3%, transparent) 86.4%, color-mix(in oklab, var(--_color---bg--inverted--1) 0.0%, transparent) 96.0%);
}

/* Hero fills the viewport; background layers follow it. */
.hero_section {
  height: 100svh;
  min-height: 40rem;
}
.hero_bg_wrap {
  height: 100%;
}

/* The hero copy sits on the same measure as every other section. */
.hero_contain {
  box-sizing: border-box;
}
/* Background layers stay behind the hero's own content at every width. */
.hero_bg_wrap {
  z-index: 0;
}

/* Invisible sentinel over the hero's pale lower half — it tells the nav to
   switch to its light theme there. Height is set from the badge panel. */
.hero_light_zone {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: 45%;
  pointer-events: none;
}
/* Compact heroes and the template heroes fade to the page colour later. */
.hero_light_zone.is-pub {
  height: 30%;
}
@media screen and (max-width: 991px) {
  .hero_light_zone.is-compact {
    height: 35%;
  }
  .hero_light_zone.is-pub {
    height: 3rem;
  }
}

/* Credential panel: one glass card, pinned the same distance from the hero's
   right edge and its bottom. */
.hero_badges {
  bottom: var(--_spacing---page-padding);
  right: max(var(--_spacing---page-padding), calc((100% - var(--max-width--content)) / 2));
  width: auto;
  gap: var(--_spacing---static--spacing-4);
  padding: var(--_spacing---static--spacing-5) var(--_spacing---static--spacing-6);
  border-radius: var(--rounding--xl);
  /* Same dark glass as the hero's glass button: the card sits over the pale
     lower hero, and the white labels need the tint to reach AA (4.5:1). */
  background-color: var(--base--navy-11-a55);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
}
.hero_badge_row {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-3);
}
.hero_badge_dot {
  width: 0.375rem;
  height: 0.375rem;
  flex-shrink: 0;
  background-color: var(--_color---text--inverted--1);
}
.hero_badge_label {
  color: var(--_color---text--inverted--1);
  white-space: nowrap;
}

/* ══ Industries overview page ════════════════════════════════════════════
   Compact hero variant (same gradient language as the homepage hero, no
   video) plus the alternating image/copy row list. */
.hero_section.is-compact {
  height: auto;
  min-height: 30rem;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--_spacing---section--section-lg);
  background-color: var(--_color---bg--default--bg);
}
.io_dots {
  position: fixed;
  left: var(--_spacing---static--spacing-6);
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_spacing---static--spacing-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.io_dots.is-visible {
  opacity: 1;
  visibility: visible;
}
.io_dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: color-mix(in srgb, var(--_color---text--brand--1) 35%, transparent);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),scale 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.io_dot.is-active {
  background-color: var(--_color---text--brand--1);
}
@media (max-width:991px) {
  .io_dots {
    display: none;
  }
}
.io_contain {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: max(var(--_spacing---page-padding), calc((100% - var(--max-width--content)) / 2));
}
.io_list {
  display: flex;
  flex-direction: column;
}
.io_row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--_spacing---gap--gap-3xl);
  padding-block: var(--_spacing---static--spacing-16);
}
.io_row_visual {
  position: relative;
  margin: 0;
  border-radius: var(--rounding--lg);
  overflow: hidden;
}
.io_row_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.io_row_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--_spacing---static--spacing-5);
}
.io_row_copy {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
}
.io_row_title {
  margin: 0;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}
.io_row_text {
  margin: 0;
  color: var(--_color---text--default--3);
  max-width: 32rem;
}
.io_row_list {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
  margin-top: var(--_spacing---static--spacing-10);
}
.footer_logo_img {
  width: 14.5rem;
}
.io_row_list_item {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-3);
}
.io_row_list_dot {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--_color---text--brand--1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.io_row_list_text {
  color: var(--_color---text--default--2);
}
@media (max-width:991px) {
  .io_row {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--_spacing---static--spacing-8);
    padding-block: var(--_spacing---static--spacing-10);
  }
}

/* The "Defense & Government Contractors" label is long enough to overflow
   the system's max-content column sizing, pushing the badge (a sibling grid
   item) off-panel. Capping each column's width lets the label wrap instead,
   leaving the grid's own placement of footer_news/footer_badge untouched. */
@media (min-width:992px) {
  .footer_col {
    max-width: 12.5rem;
  }
}


/* ══ Button 060 ═══════════════════════════════════════════════════════════
   Component candidate. Base plus four surface variants as combo classes.
   Structure: _bg (the fill that scales) / _inner (the hit area) /
   _rect (the mark that wipes in) / _text (the label that shifts). */
.button_main_wrap {
  --button-main-hover-scale: 1.06 1.095;
  --button-main-click-scale: 0.955 0.925;
  color: var(--_color---interactive--secondary--on);
  -webkit-user-select: none;
  user-select: none;
  background-color: transparent;
  outline-style: none;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
  display: inline-grid;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: scale 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.button_main_wrap:active {
  scale: var(--button-main-click-scale);
}
.button_main_bg {
  background-color: var(--_color---interactive--secondary--idle);
  border-radius: var(--rounding--md);
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  padding: 0;
  transition: scale 0.45s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.button_main_element {
  box-sizing: border-box;
  min-height: 3rem;
  width: 100%;
  height: 100%;
  padding: 0 var(--_spacing---static--spacing-8);
  z-index: 1;
  grid-area: 1 / 1;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}
.button_main_rect {
  pointer-events: none;
  background-color: currentColor;
  flex: none;
  width: 0.375em;
  height: 0.375em;
  padding: 0;
  position: absolute;
  transform-origin: left center;
  translate: -0.6em;
  scale: 0 1;
  transition: scale 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.button_main_text {
  white-space: nowrap;
  font-size: var(--_typography---font-size--label-1);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Over imagery: solid navy (was a translucent fill; the Three.js skies are lighter,
   so a see-through button lost its edge). */
.button_main_wrap.is-glass {
  color: var(--_color---interactive--primary--on);
}
.button_main_bg.is-glass {
  background-color: var(--_color---interactive--primary--idle);
}
.button_main_bg.is-glass:hover {
  background-color: var(--_color---interactive--primary--hover);
}
/* Primary on a light surface: navy fill, white label. */
.button_main_wrap.is-solid {
  color: var(--_color---interactive--primary--on);
}
.button_main_bg.is-solid {
  background-color: var(--_color---interactive--primary--idle);
}
.button_main_bg.is-solid:hover {
  background-color: var(--_color---interactive--primary--hover);
}
.button_main_bg.is-solid:active {
  background-color: var(--_color---interactive--primary--active);
}
/* Secondary on a light surface: hairline and label only, no fill. */
.button_main_wrap.is-outline {
  color: var(--_color---interactive--outline--on);
}
.button_main_bg.is-outline {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--_color---interactive--outline--idle);
}
.button_main_bg.is-outline:hover {
  background-color: var(--_color---interactive--outline--hover);
}
.button_main_bg.is-outline:active {
  background-color: var(--_color---interactive--outline--active);
}
/* Primary over a dark surface: white fill, navy label. In the nav it flips to
   the navy fill once the bar is over a light section (see 07 Nav). */
.button_main_wrap.is-light {
  color: var(--_color---interactive--primary--idle);
}
.button_main_bg.is-light {
  background-color: var(--_color---bg--default--1);
}
.button_main_bg.is-light:hover {
  background-color: var(--_color---bg--default--2);
}
/* Disabled, all surfaces. */
.button_main_wrap[aria-disabled="true"] {
  color: var(--_color---interactive--primary--on-disabled);
  pointer-events: none;
}
.button_main_bg[aria-disabled="true"] {
  background-color: var(--_color---interactive--primary--disabled);
}

/* Small phones: a button wider than the screen is capped at the screen width
   and its label wraps onto a second line, instead of pushing the page
   sideways (WCAG 1.4.10 Reflow). Buttons keep their natural width otherwise
   (rows wrap as before), and the extra padding only shows once the text is
   taller than the 3rem minimum. The text stays start-aligned so the hover
   mark keeps its place just before the first word. */
@media (max-width:479px) {
  .button_main_wrap {
    flex-shrink: 0;
    max-width: 100%;
  }
  .button_main_element {
    min-width: 0;
    padding-top: var(--_spacing---static--spacing-3);
    padding-bottom: var(--_spacing---static--spacing-3);
    white-space: normal;
  }
  .button_main_text {
    white-space: inherit;
    /* text-wrap-style, not the text-wrap shorthand — that would switch
       wrapping back on for the rows below. */
    text-wrap-style: balance;
  }
  /* Buttons that share a row at a set width keep their label on one line. */
  .hero_button_element,
  .nav_contact_element {
    white-space: nowrap;
  }
}

/* CODE EMBED — Button Main hover: the fill scales, the mark wipes in and the
   label shifts while the button is hovered or its Clickable has keyboard focus.
   Reason: it animates CHILD elements from the PARENT's hover state, which
   the Webflow Style panel cannot express (its hover styles apply to the
   hovered element only). Native ladder: Style panel hover → no; Webflow
   Interactions → possible but produces a hand-built IX2 timeline per instance
   instead of one reusable rule. Keep as one embed on the page. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button_main_wrap:is(:hover, :has(> .clickable_wrap:focus-visible)) .button_main_bg {
    scale: var(--button-main-hover-scale);
    transition-delay: 0.05s;
  }
  .button_main_wrap:is(:hover, :has(> .clickable_wrap:focus-visible)) .button_main_rect {
    scale: 1 1;
    transition-delay: 0.05s;
  }
  .button_main_wrap:is(:hover, :has(> .clickable_wrap:focus-visible)) .button_main_text {
    transform: translate3d(0.625em, 0, 0);
    transition-delay: 0.05s;
  }
}
/* end CODE EMBED */

/* ══ Partner logo marquee ═════════════════════════════════════════════════ */

/* Each mark ships as a 256 × 120 container with its own optical padding, so
   one uniform box size replaces the old per-logo height steps. */
.logo_marquee_img {
  height: 5.25rem;
  width: 11.25rem;
  object-fit: contain;
  flex-shrink: 0;
}
/* Two identical tracks sit end to end and each travels exactly its own width
   plus the gap, so the second arrives where the first started — a seamless
   loop. The system's keyframe assumes a different gap, so the project defines
   its own to match. */
.logo_marquee_track {
  gap: var(--_spacing---static--spacing-16);
  animation: logo_marquee_loop 60s linear infinite;
}
@keyframes logo_marquee_loop{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--_spacing---static--spacing-16)))}}
/* Reduced motion: the logo row stands still. */
@media (prefers-reduced-motion: reduce) {
  .logo_marquee_track {
    animation: none;
  }
}
.marquee_section {
  overflow: clip;
}
/* Hovering a mark holds the loop so it can be read. */
.logo_marquee_wrap:has(.logo_marquee_img:hover) .logo_marquee_track {
  animation-play-state: paused;
}
.logo_marquee_wrap {
  max-width: 100%;
  justify-content: flex-start;
  gap: var(--_spacing---static--spacing-16);
}

/* ══ Mission ══════════════════════════════════════════════════════════════ */

/* Just under a full screen, so the statement still lands centred on entry but
   the section reads as a pause rather than its own page. Letters fade up on
   scroll (see the behaviour script). */
.mission_section {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--_color---bg--default--bg);
}
.mission_contain {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_spacing---gap--gap-md);
  text-align: center;
}
.mission_text {
  max-width: 48rem;
  margin: 0;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}
.mission_text_emphasis {
  display: block;
  width: fit-content;
  margin-inline: auto;
  color: var(--_color---text--brand--1);
  text-decoration: none;
}

/* ══ Services ═════════════════════════════════════════════════════════════
   Bento: two tiles on the first row, three on the second. Each tile holds a
   media plate that fades up on hover — the videos drop into service_tile_media
   once they are supplied. */
.services_section {
  background-color: var(--_color---bg--default--bg);
}
.services_contain {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 2rem + 1.75 * (100vw - 24rem) / 70.5, 3.75rem);
}
.services_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--_spacing---gap--gap-3xl);
}
.services_head_copy {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
}
.services_title {
  margin: 0;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}
.services_grid {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-5);
}
/* The first row keeps the design's wide-then-narrow split; the second is three
   equal tiles. */
.services_row {
  display: grid;
  gap: var(--_spacing---static--spacing-5);
}
.services_row.is-pair {
  grid-template-columns: 781fr 555fr;
}
.services_row.is-triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Every tile is the same fixed height across the bento, and settles into a
   restrained enlargement on hover: quick to respond, slow to finish. Raising the
   z-index keeps the growing tile above its neighbours without moving them. */
.service_tile_wrap {
  box-sizing: border-box;
  padding: var(--_spacing---static--spacing-8);
  min-height: 28rem;
  height: 28rem;
  transform-origin: center;
  transition: scale 0.45s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s;
}
.service_tile_wrap:hover {
  scale: 1.025;
  z-index: 1;
}
.service_tile_wrap:active {
  scale: 1.01;
}
/* The plain tile is the system's white default; the copy sits above the media. */
.service_tile_wrap.is-plain {
  background-color: var(--_color---bg--default--1);
}
/* The accent tile is the one saturated surface in the bento — its copy inverts so
   it reads as a dark-surface tile rather than black on the accent. Each element
   carries its own modifier, so every rule stays a single class. */
.service_tile_copy {
  gap: var(--_spacing---static--spacing-2);
}
.service_tile_title {
  font-size: var(--_typography---font-size--title-4);
}
.service_tile_title.is-on-accent {
  color: var(--_color---text--inverted--1);
}
/* Full-strength white, not the 75% body step: on the accent fill even pure white
   is only 2.55:1, so nothing is spent on softening it. The tile surface is the
   real problem — see the accessibility note in webflow-handoff.md. */
.service_tile_text.is-on-accent {
  color: var(--_color---text--inverted--1);
}
.service_tile_icon.is-on-accent {
  filter: brightness(0) invert(1);
}
/* Media plate: fills the lower two-thirds of the tile and fades up on hover.
   Tiles still awaiting their clip use the gradient stand-in. */
.service_tile_media {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 66%;
  opacity: 0;
  pointer-events: none;
  background: var(--_gradient---tile-teal-fade);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Clips sit on the tile at rest, paused on their first frame; hover starts them
   playing. The resting state waits on data-state="ready" (set once the clip has
   decoded a frame) so a slow clip never paints as a black rectangle. */
.service_tile_media.is-clip[data-state="ready"] {
  opacity: 1;
}
/* The supplied clips are dot artwork on white, so multiplying drops the white
   and leaves the marks over the tile's own surface. */
/* Contained, not cropped, and inset from the tile's edges so the artwork sits
   inside the card with air around it rather than running off the side. */
.service_tile_media.is-clip {
  top: auto;
  bottom: var(--_spacing---static--spacing-8);
  left: var(--_spacing---static--spacing-8);
  right: var(--_spacing---static--spacing-8);
  width: calc(100% - 2 * var(--_spacing---static--spacing-8));
  height: 60%;
  background: none;
  object-fit: contain;
  object-position: center bottom;
}
/* This clip is composed to the card's own proportions and surface, so it fills
   the tile edge to edge and paints normally — blending it would tint the tile. */
.service_tile_media.is-fill {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
}
.service_tile_wrap:hover .service_tile_media {
  opacity: 1;
}
.service_tile_icon.is-inverted {
  filter: brightness(0) invert(1);
}
/* Arrow glyphs travel with the card rather than reacting on their own clock. */
.service_tile_icon {
  transition: translate 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.service_tile_wrap:hover .service_tile_icon {
  translate: 0.125rem -0.125rem;
}
.blog_card_icon {
  transition: translate 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.blog_card_wrap.is-stacked:hover .blog_card_icon {
  translate: 0.125rem -0.125rem;
}
.arrow_link_icon {
  transition: translate 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.blog_feature_wrap.is-lead:hover .arrow_link_icon {
  translate: 0.125rem -0.125rem;
}
@media (prefers-reduced-motion:reduce) {
  .service_tile_media {
    transition: none;
  }
}
@media (prefers-reduced-motion:reduce) {
  .service_tile_wrap {
    transition: none;
  }
}
@media (prefers-reduced-motion:reduce) {
  .service_tile_icon {
    transition: none;
  }
}
@media (prefers-reduced-motion:reduce) {
  .blog_card_icon {
    transition: none;
  }
}
@media (prefers-reduced-motion:reduce) {
  .arrow_link_icon {
    transition: none;
  }
}

/* ══ Industries ═══════════════════════════════════════════════════════════
   Copy column left, five expanding rows right. One viewport tall. */
/* The row list runs straight into the section below it, so the bottom padding
   is deliberately zero. */
.industries_section {
  padding-bottom: var(--_spacing---section--section-0);
  background-color: var(--_color---bg--default--bg);
}
.industries_contain {
  box-sizing: border-box;
}
.industries_layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--_spacing---gap--gap-3xl);
}
/* Intro sticks while the row list scrolls past it. Heading, then the actions
   directly beneath. */
.industries_intro {
  position: sticky;
  top: 8rem;
  align-self: start;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-8);
}
.industries_intro_top {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
}
.industries_title {
  margin: 0;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}
.industries_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_spacing---static--spacing-4);
}
/* Cards stack as they scroll: each row pins a little lower than the one before,
   so the covered cards leave a visible edge behind the top card. */
/* The trailing space is what lets the LAST card stay pinned: sticky only holds
   while the container extends below the element, so without it the top card
   scrolls straight up over the edges behind it. */
.industries_list {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-5);
}
.industries_row {
  position: sticky;
  top: 8rem;
  transform-origin: center top;
  will-change: transform;
  box-shadow: 0 -0.0625rem 0.75rem color-mix(in srgb, var(--_color---text--default--1) 3%, transparent);
}
.industries_row:nth-child(1) {
  scale: 0.94;
}
.industries_row:nth-child(2) {
  top: 8.75rem;
  scale: 0.955;
}
.industries_row:nth-child(3) {
  top: 9.5rem;
  scale: 0.97;
}
.industries_row:nth-child(4) {
  top: 10.25rem;
  scale: 0.985;
}
/* All five pin, and the list ends at the last card — so once the stack is
   assembled the whole group scrolls away together and no card rides over the
   edges behind it. */
.industries_row:nth-child(5) {
  top: 11rem;
  scale: 1;
}
@media (prefers-reduced-motion:reduce) {
  .industries_row {
    position: static;
  }
}
/* Each industry is its own white card: the mark on top, then the title and copy
   pushed to the foot of the card. */
.industries_row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--_spacing---static--spacing-16);
  padding: var(--_spacing---static--spacing-8);
  border-radius: var(--rounding--md);
  background-color: var(--_color---bg--default--1);
}

/* Icon and title on one line; copy and tags always visible beneath. */
.industry_row_title {
  font-size: var(--_typography---font-size--title-4);
}
.industry_row_body_inner {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-2);
}
/* The glyph stands on its own — no plate behind it. */
.industry_row_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
}
/* The five Material Symbols arrive with a dark fill; the filter turns them
   white so they read on the gradient plate. They are background images, not
   masks (masks do not apply here) and not <img> (the src cannot be a hole).
   One combo class per icon. */
.industry_row_glyph {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}
/* Two glyphs read heavy at the shared size, so they get their own box. */
.industry_row_glyph.is-import-contacts {
  width: 2.5rem;
  height: 2.5rem;
}

/* ══ Testimonials ═════════════════════════════════════════════════════════
   Full-bleed slow marquee. Hover or keyboard focus anywhere in the band
   pauses both tracks so a card can be read. */
.testimonials_section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 2rem + 1.75 * (100vw - 24rem) / 70.5, 3.75rem);
  background-color: var(--_color---bg--default--bg);
  overflow: clip;
}
.testimonials_head {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_spacing---static--spacing-3);
  text-align: center;
}
.testimonials_title {
  margin: 0;
  color: var(--_color---text--default--1);
}
.testimonials_embed_css {
  display: none;
}
/* Swiper carousel. Every visual rule hangs on this carousel's own namespace —
   testimonials_slider / _track / _slide — so the vendor classes stay functional
   only and a second carousel elsewhere on the site is unaffected. Swiper owns
   the track transform and the card spacing, so the track carries no gap. */
.testimonials_slider {
  box-sizing: border-box;
  width: min(100% - 2 * var(--_spacing---page-padding), var(--max-width--content));
  margin-inline: auto;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  container-type: inline-size;
}
.testimonials_slider_track {
  display: flex;
  align-items: stretch;
  will-change: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Paging arrows under the band: hairline square buttons, one card per click. */
.testimonials_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--_spacing---static--spacing-5);
  margin-top: calc(-1 * var(--_spacing---static--spacing-4));
}
/* Set by script.js when every card fits and there is nothing to page through. */
.testimonials_nav.is-locked {
  display: none;
}
.testimonials_hidden {
  display: none;
}
/* One 6px square per client between the arrows; the card nearest the middle of
   the band is the active one (see the behaviour script). */
.testimonials_dots {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-3);
}
.testimonials_dot {
  width: 0.375rem;
  height: 0.375rem;
  background-color: color-mix(in srgb, var(--_color---text--brand--1) 35%, transparent);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonials_dot[data-state="active"] {
  background-color: var(--_color---text--brand--1);
}
/* Same hover as the outlined text button — the hairline surface scales and
   fills — minus the wiping rectangle. The surface is a layer of its own so it
   can scale without moving the chevron. */
.testimonials_arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  transition: scale 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonials_arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--_color---interactive--outline--idle);
  border-radius: var(--rounding--md);
  transition: scale 0.45s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonials_arrow:active {
  scale: 0.955 0.925;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .testimonials_arrow:is(:hover, :focus-visible)::before {
    scale: 1.06 1.095;
    transition-delay: 0.05s;
  }
}
.testimonials_arrow:focus-visible {
  outline: 0.125rem solid var(--_color---focus--ring);
  outline-offset: 0.125rem;
}
/* The chevron is one clipped block, so its ink is centred in its own box and
   needs no optical nudge — no icon file either. */
.testimonials_arrow_glyph {
  position: relative;
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--_color---text--default--1);
  clip-path: polygon(17% 4%, 30% 4%, 75% 50%, 30% 96%, 17% 96%, 62% 50%);
}
.testimonials_arrow_glyph.is-prev {
  scale: -1 1;
}

/* Cards inside the carousel: fixed width, stretched to the tallest quote in the
   track, 80px between quote and footer. Styled as the card class plus this
   carousel's slide class — two classes of our own, which is also what outranks
   the vendor rule that would otherwise flatten the card to a block. Margin is
   zeroed because the card is a <figure> and carries default side margins. */
.testimonial_wrap.testimonials_slide {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--_spacing---static--spacing-8);
  width: 40rem;
  height: auto;
  margin: 0;
  gap: var(--_spacing---static--spacing-20);
  flex-shrink: 0;
}
/* The company line is a link: grey at rest, wiping a 1px rule in on hover like
   the nav and footer links. */
.testimonial_company_link {
  position: relative;
  color: var(--_color---text--default--4);
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial_company_link:hover {
  color: var(--_color---text--default--4);
}
.testimonial_company_link::before {
  content: "";
  position: absolute;
  bottom: -0.125em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.testimonial_company_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
/* The outward arrow reads at the same weight as the label it follows, set off
   from it rather than crowding the last letter. */
.testimonial_author_icon {
  width: 0.625rem;
  height: 0.625rem;
  opacity: 0.55;
}
.testimonial_quote {
  font-size: var(--_typography---font-size--body-1);
  font-weight: 400;
}
.testimonial_author_meta {
  gap: var(--_spacing---static--spacing-2);
}
.testimonial_company_link:focus-visible {
  outline: 0.125rem solid var(--_color---focus--ring);
  outline-offset: 0.125rem;
}
@media (prefers-reduced-motion:reduce) {
  .blog_card_wrap.is-stacked {
    transition: none;
  }
}
@media (prefers-reduced-motion:reduce) {
  .blog_feature_wrap.is-lead {
    transition: none;
  }
}

/* ══ About ════════════════════════════════════════════════════════════════ */
/* Industries ends flush so its card stack can pin; About buys back that gap
   with a double section step on top. */
.about_section {
  padding-top: calc(2 * var(--_spacing---section--section-lg));
  display: flex;
  align-items: center;
  background-color: var(--_color---bg--default--bg);
}
.about_contain {
  box-sizing: border-box;
}
.about_layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--_spacing---gap--gap-3xl);
}
.about_content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--_spacing---gap--gap-3xl);
}
.about_intro {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
}
.about_title {
  max-width: 32rem;
  margin: 0;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}
.about_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_spacing---static--spacing-4);
  margin-top: calc(var(--_spacing---static--spacing-8) - var(--_spacing---static--spacing-3));
}
/* Stats read as a divided row, not boxed cards: left hairline only. */
.about_stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
}
.stat_wrap.is-divided {
  border: 0;
  border-left: 1px solid var(--_color---outline--subtle);
  min-width: 0;
  padding-right: var(--_spacing---static--spacing-10);
}
.about_visual {
  margin: 0;
}
.about_img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 36rem;
  object-fit: cover;
  border-radius: var(--rounding--md);
}

/* ══ Resources ════════════════════════════════════════════════════════════
   Header with its action to the right, then one lead article beside three
   compact rows. One viewport tall, matching the rest of the page rhythm. */
.resources_section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  background-color: var(--_color---bg--default--bg);
}
/* The container takes the height the section gives it, and the card layout
   takes what is left over — so the whole section fits one screen. */
.resources_contain {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: clamp(2rem, 2rem + 1.75 * (100vw - 24rem) / 70.5, 3.75rem);
}
.resources_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--_spacing---gap--gap-3xl);
}
.resources_head_copy {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
}
.resources_title {
  max-width: 40rem;
  margin: 0;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}
/* The right column hugs its three cards; the lead card matches whatever height
   that comes to, and its image takes the slack under the hugging copy block. */
.resources_layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  flex: none;
  gap: var(--_spacing---gap--gap-md);
}
.resources_list {
  display: grid;
  grid-template-rows: repeat(3, auto);
  align-content: start;
  gap: var(--_spacing---gap--gap-md);
}
/* Lead article fills its column; the three rows share the height beside it.
   Both cards are content-box in the system, so the combo has to size the box
   including its own padding or the card overruns its track. */
.blog_feature_wrap.is-lead {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  transform-origin: center;
  transition: scale 0.45s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s;
}
.blog_feature_wrap.is-lead:hover {
  scale: 1.025;
  z-index: 1;
}
.blog_feature_wrap.is-lead:active {
  scale: 1.01;
}
.blog_feature_visual.is-lead {
  min-height: 0;
  flex: 1;
}
/* The lead card carries its padding on the copy block, since the artwork is
   full-bleed — same 32px as every other card. */
.blog_feature_content {
  padding: var(--_spacing---static--spacing-8);
}
/* The visual takes the slack in the card, down to a floor that keeps the
   artwork readable when the column is short, and the artwork fills whatever
   height it is given — so the lead card matches the three rows beside it. */
.blog_feature_visual.is-lead {
  flex: 1;
  min-height: 12.5rem;
}
/* Card headings sit one step down from the system title. */
.blog_feature_title,
.blog_card_title {
  font-size: var(--_typography---font-size--title-5);
}
/* ≤767 title-5 drops to body size; card headings step up to title-3 (18px) there. */
@media (max-width:767px) {
  .blog_feature_title,
  .blog_card_title {
    font-size: var(--_typography---font-size--title-3);
  }
}
.blog_feature_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Hover zooms the card in place, Stripe-style — no fill change, the arrow
   glyph carries the affordance. Same-element state, so it stays native. */
.blog_card_wrap.is-stacked {
  box-sizing: border-box;
  height: 100%;
  padding: var(--_spacing---static--spacing-8);
  transform-origin: center;
  transition: scale 0.45s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s;
}
.blog_card_wrap.is-stacked:hover {
  background-color: var(--_color---bg--default--1);
  scale: 1.025;
  z-index: 1;
}
.blog_card_wrap.is-stacked:active {
  scale: 1.01;
}

/* ══ FAQ ══════════════════════════════════════════════════════════════════
   Heading left, accordion right. One row open at a time; the plus rotates to
   a cross. Click to open, matching how a question is actually read. */
.faq_section {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  background-color: var(--_color---bg--default--bg);
}
.faq_contain {
  box-sizing: border-box;
}
.faq_layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--_spacing---gap--gap-md);
}
/* Heading sticks while the question list scrolls past it, matching Industries. */
.faq_intro {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
}
.faq_title {
  margin: 0;
  color: var(--_color---text--default--1);
}
/* The dotted speech bubble under the FAQ heading. Video encoding lifts the
   clip’s field a few levels above the page grey, so darken drops everything
   lighter than the page and leaves only the dots. */
.faq_bubble_video {
  width: 100%;
  max-width: 19rem;
  height: auto;
  margin-top: auto;
  filter: brightness(0.988);
  pointer-events: none;
}
.faq_list {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-5);
}
/* Each question is its own white card on the grey page, matching the industry
   cards — no border, no hairline. */
.faq_item_wrap.is-row {
  box-sizing: border-box;
  border: 0;
  padding: var(--_spacing---static--spacing-8);
  border-radius: var(--rounding--md);
  background-color: var(--_color---bg--default--1);
  transform-origin: center;
  transition: scale 0.45s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s;
}
.faq_item_wrap.is-row:hover {
  scale: 1.025;
  z-index: 1;
}
.faq_item_wrap.is-row:active {
  scale: 1.01;
}
@media (prefers-reduced-motion:reduce) {
  .faq_item_wrap.is-row {
    transition: none;
  }
}
/* A <button> does not inherit the page face, so it has to be told to. The plus
   sits on the question's first line rather than centred on the block. */
.faq_item_head {
  padding-block: var(--_spacing---static--spacing-0);
  font-family: inherit;
  align-items: flex-start;
}
.faq_item_head:focus-visible {
  outline: 0.125rem solid var(--_color---focus--ring);
  outline-offset: 0.125rem;
}
/* The system's own Interface/Sharp plus, painted by the text token; the whole
   mark turns 45° to become a cross. */
.faq_item_icon.is-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--_color---text--default--1);
  transition: rotate 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq_item_icon.is-plus[data-state="open"] {
  rotate: 45deg;
}
.faq_item_body {
  max-height: 0;
  overflow: clip;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq_item_body[data-state="open"] {
  max-height: 24rem;
}
.faq_item_body_inner {
  min-height: 0;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq_item_body_inner[data-state="open"] {
  opacity: 1;
  transition-delay: 0.1s;
}
.faq_item_question {
  font-size: var(--_typography---font-size--title-5);
}
@media (max-width:767px) {
  .faq_item_question {
    font-size: var(--_typography---font-size--title-3);
  }
}

/* The system's item hides its answer with display:none; the row variant lets
   the collapsing grid own that instead, so it can animate. */
.faq_item_answer.is-row {
  display: block;
  max-width: 60ch;
  margin: 0;
  padding-top: var(--_spacing---static--spacing-6);
}

/* ══ Responsive — layout only ═════════════════════════════════════════════
   Type, spacing and radius scale themselves; nothing below touches them. */
/* Webflow breakpoints only: 991 tablet, 767 mobile landscape, 479 mobile
   portrait. Layout changes only — type, spacing and radius scale themselves. */
@media (max-width:991px) {
  /* Stacked hero grows with its content instead of holding the viewport. */
  .hero_section {
    height: auto;
    min-height: 100svh;
  }
  /* Two-up grid so the wrapped link columns share their left edges instead of
     each row right-aligning on its own. */
  .footer_nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: start;
    margin-left: 0;
  }
  .footer_main {
    flex-wrap: wrap;
  }
  .services_row.is-pair {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .services_row.is-triple {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .services_head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_spacing---static--spacing-8);
  }
  /* Badge panel leaves its pinned corner and flows under the CTAs. */
  .hero_badges {
    position: relative;
    z-index: 1;
    inset: auto;
    width: fit-content;
    margin-inline: var(--_spacing---page-padding);
    flex-direction: column;
    padding: var(--_spacing---static--spacing-6);
  }
  .industries_layout {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .industries_intro {
    position: static;
  }
  .about_layout {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  /* Stacked: heading and copy read first, the team photo follows. */
  .about_visual {
    order: 0;
  }
  /* Single column: the figure is content-sized, so the photo takes its own
     aspect ratio instead of a percentage height that resolves to zero. */
  .about_img {
    height: auto;
    aspect-ratio: 1059 / 1200;
    max-height: none;
  }
  .about_section {
    padding-top: var(--_spacing---section--section-lg);
  }
  .testimonial_wrap.testimonials_slide {
    width: 28rem;
  }
  .resources_layout {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .resources_head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_spacing---static--spacing-8);
  }
  .resources_section {
    min-height: 0;
  }
  .faq_layout {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .faq_intro {
    align-self: auto;
  }
  .faq_section {
    min-height: 0;
  }
  .resources_layout {
    flex: none;
  }
}
@media (max-width:767px) {
  .testimonial_wrap.testimonials_slide {
    width: 20rem;
  }
  .footer_nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The card stack flattens: one card after another, nothing pinned. */
  .industries_row {
    position: static;
    scale: 1;
    box-shadow: none;
  }
  .industries_list {
    padding-bottom: 0;
  }
  .services_head {
    gap: var(--_spacing---static--spacing-6);
  }
}
@media (max-width:479px) {
  .footer_nav {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .testimonial_wrap.testimonials_slide {
    width: 17rem;
  }
  .hero_badges {
    width: auto;
  }
}

/* ══ Footer ═══════════════════════════════════════════════════════════════
   Composes the system's footer classes. Two additions only. */

/* CODE EMBED — the footer sky.
   Reason: nine bespoke gradient stops fading the page grey down into navy, with
   two transparent stops in the middle. Native-first step 6: no colour variable
   covers these intermediate stops, and the Style panel cannot author a
   multi-stop ramp with transparency. The developer places this by hand and it is
   the only place in the build with literal colour values.
   Both the CTA and the footer sit on the same navy; the clip's own gradient
   resolves into it, and a soft dark wash carries it down past the panel. */
.footer_wrap {
  background-color: var(--base--navy-11);
  background-image: linear-gradient(180deg,var(--_color---bg--default--bg) 0%,var(--base--grey-94) 5%,var(--base--sky-90-2) 10%,var(--base--sky-85-2) 16%,var(--base--sky-77) 23%,var(--base--sky-71) 30%,var(--base--navy-11-a00) 46%,var(--base--navy-05-a50) 72%,var(--base--navy-11) 100%);
}
/* end CODE EMBED */
/* Text column left, the compass clip riding the gradient on the right. */
.footer_cta {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: calc(var(--max-width--content) + 2 * var(--_spacing---page-padding));
  margin-inline: auto;
  padding: 13rem var(--_spacing---page-padding) 8.5rem;
  text-align: left;
}

.footer_cta_copy {
  position: relative;
  z-index: 1;
  align-items: flex-start;
  max-width: 32rem;
  text-align: left;
}
.footer_cta_text {
  max-width: 28rem;
}
.footer_cta_actions {
  position: relative;
  z-index: 1;
  justify-content: flex-start;
}
/* The clip is a light-on-dark render, so it screens into the gradient instead of
   sitting on it as a box. */
/* The clip lives in its own right-hand box so the letterboxed 16:9 frame is
   clipped there and never reaches the copy column. */
/* The clip is the whole footer sky — pale top, brand blue, navy base, with the
   dotted compass animating inside it — so it is the CTA's background, full bleed. */
.footer_cta_media {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 100vw;
  height: calc(100% + 26rem);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.0000) 0.00%, rgba(0,0,0,0.0000) 0.40%, rgba(0,0,0,0.0002) 0.80%, rgba(0,0,0,0.0009) 1.20%, rgba(0,0,0,0.0027) 1.60%, rgba(0,0,0,0.0062) 2.00%, rgba(0,0,0,0.0121) 2.40%, rgba(0,0,0,0.0209) 2.80%, rgba(0,0,0,0.0333) 3.20%, rgba(0,0,0,0.0498) 3.60%, rgba(0,0,0,0.0706) 4.00%, rgba(0,0,0,0.0960) 4.40%, rgba(0,0,0,0.1260) 4.80%, rgba(0,0,0,0.1607) 5.20%, rgba(0,0,0,0.1998) 5.60%, rgba(0,0,0,0.2430) 6.00%, rgba(0,0,0,0.2898) 6.40%, rgba(0,0,0,0.3396) 6.80%, rgba(0,0,0,0.3917) 7.20%, rgba(0,0,0,0.4454) 7.60%, rgba(0,0,0,0.5000) 8.00%, rgba(0,0,0,0.5546) 8.40%, rgba(0,0,0,0.6083) 8.80%, rgba(0,0,0,0.6604) 9.20%, rgba(0,0,0,0.7102) 9.60%, rgba(0,0,0,0.7570) 10.00%, rgba(0,0,0,0.8002) 10.40%, rgba(0,0,0,0.8393) 10.80%, rgba(0,0,0,0.8740) 11.20%, rgba(0,0,0,0.9040) 11.60%, rgba(0,0,0,0.9294) 12.00%, rgba(0,0,0,0.9502) 12.40%, rgba(0,0,0,0.9667) 12.80%, rgba(0,0,0,0.9791) 13.20%, rgba(0,0,0,0.9879) 13.60%, rgba(0,0,0,0.9938) 14.00%, rgba(0,0,0,0.9973) 14.40%, rgba(0,0,0,0.9991) 14.80%, rgba(0,0,0,0.9998) 15.20%, rgba(0,0,0,1.0000) 15.60%, rgba(0,0,0,1.0000) 16.00%, #000 68%, rgba(0,0,0,0.9997) 69.78%, rgba(0,0,0,0.9960) 71.56%, rgba(0,0,0,0.9824) 73.33%, rgba(0,0,0,0.9523) 75.11%, rgba(0,0,0,0.9009) 76.89%, rgba(0,0,0,0.8267) 78.67%, rgba(0,0,0,0.7314) 80.44%, rgba(0,0,0,0.6200) 82.22%, rgba(0,0,0,0.5000) 84.00%, rgba(0,0,0,0.3800) 85.78%, rgba(0,0,0,0.2686) 87.56%, rgba(0,0,0,0.1733) 89.33%, rgba(0,0,0,0.0991) 91.11%, rgba(0,0,0,0.0477) 92.89%, rgba(0,0,0,0.0176) 94.67%, rgba(0,0,0,0.0040) 96.44%, rgba(0,0,0,0.0003) 98.22%, rgba(0,0,0,0.0000) 100.00%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.0000) 0.00%, rgba(0,0,0,0.0000) 0.40%, rgba(0,0,0,0.0002) 0.80%, rgba(0,0,0,0.0009) 1.20%, rgba(0,0,0,0.0027) 1.60%, rgba(0,0,0,0.0062) 2.00%, rgba(0,0,0,0.0121) 2.40%, rgba(0,0,0,0.0209) 2.80%, rgba(0,0,0,0.0333) 3.20%, rgba(0,0,0,0.0498) 3.60%, rgba(0,0,0,0.0706) 4.00%, rgba(0,0,0,0.0960) 4.40%, rgba(0,0,0,0.1260) 4.80%, rgba(0,0,0,0.1607) 5.20%, rgba(0,0,0,0.1998) 5.60%, rgba(0,0,0,0.2430) 6.00%, rgba(0,0,0,0.2898) 6.40%, rgba(0,0,0,0.3396) 6.80%, rgba(0,0,0,0.3917) 7.20%, rgba(0,0,0,0.4454) 7.60%, rgba(0,0,0,0.5000) 8.00%, rgba(0,0,0,0.5546) 8.40%, rgba(0,0,0,0.6083) 8.80%, rgba(0,0,0,0.6604) 9.20%, rgba(0,0,0,0.7102) 9.60%, rgba(0,0,0,0.7570) 10.00%, rgba(0,0,0,0.8002) 10.40%, rgba(0,0,0,0.8393) 10.80%, rgba(0,0,0,0.8740) 11.20%, rgba(0,0,0,0.9040) 11.60%, rgba(0,0,0,0.9294) 12.00%, rgba(0,0,0,0.9502) 12.40%, rgba(0,0,0,0.9667) 12.80%, rgba(0,0,0,0.9791) 13.20%, rgba(0,0,0,0.9879) 13.60%, rgba(0,0,0,0.9938) 14.00%, rgba(0,0,0,0.9973) 14.40%, rgba(0,0,0,0.9991) 14.80%, rgba(0,0,0,0.9998) 15.20%, rgba(0,0,0,1.0000) 15.60%, rgba(0,0,0,1.0000) 16.00%, #000 68%, rgba(0,0,0,0.9997) 69.78%, rgba(0,0,0,0.9960) 71.56%, rgba(0,0,0,0.9824) 73.33%, rgba(0,0,0,0.9523) 75.11%, rgba(0,0,0,0.9009) 76.89%, rgba(0,0,0,0.8267) 78.67%, rgba(0,0,0,0.7314) 80.44%, rgba(0,0,0,0.6200) 82.22%, rgba(0,0,0,0.5000) 84.00%, rgba(0,0,0,0.3800) 85.78%, rgba(0,0,0,0.2686) 87.56%, rgba(0,0,0,0.1733) 89.33%, rgba(0,0,0,0.0991) 91.11%, rgba(0,0,0,0.0477) 92.89%, rgba(0,0,0,0.0176) 94.67%, rgba(0,0,0,0.0040) 96.44%, rgba(0,0,0,0.0003) 98.22%, rgba(0,0,0,0.0000) 100.00%);
}
.footer_cta_video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 28%;
}
/* ≥768: the sky is the box's own background now (it used to come from the compass
   clip), sampled from the design: pale grey into brand blue, deep blue where the
   footer panel starts, navy below. The sideways wash was only there to blend with
   the clip; it stays on behind the copy so the white text keeps AA contrast. */
@media (min-width:768px) {
  .footer_cta_media {
    background-image: var(--_gradient---footer-cta-sky);
  }
}
/* The sky stays as designed; only its left flank is deepened, so the Let's talk
   copy sits on brand blue while the dot compass on the right keeps the original
   pale sky. Multiply, so it darkens the art instead of veiling it, and it lives
   inside .footer_cta_media so the media's own top fade carries the transition. */
/* 8-bit dither. The ramp above the copy spans ~160px for ~8 luminance steps, so
   the quantisation, not the curve, is what reads as banding. A 128px tile of
   triangular-PDF noise at +-3/255 in overlay breaks the steps up below the
   threshold of visibility. */
.footer_cta_media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("/assets/patterns/dither-noise.png");
  background-repeat: repeat;
  background-size: 8rem 8rem;
  mix-blend-mode: overlay;
  opacity: 0.55;
}
/* A sideways wash in the clip's own blue, deepest behind the CTA copy and gone
   before the compass, so the white text keeps its contrast (eyebrow ≥ 4.5:1)
   while reading as part of the sky gradient. It fades in slowly from the top so
   the grey-to-sky transition above it stays even across the full width. */
.footer_cta_media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: linear-gradient(90deg, var(--base--blue-36-a86) 0%, var(--base--blue-36-a66) 30%, var(--base--blue-36-a24) 55%, var(--base--blue-36-a00) 78%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 7%, rgba(0,0,0,0.4) 13%, rgba(0,0,0,0.85) 18%, #000 23%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 7%, rgba(0,0,0,0.4) 13%, rgba(0,0,0,0.85) 18%, #000 23%);
}
@media (max-width:991px) {
  /* Tablet and mobile: the copy runs wider, so the wash stays strong across it. */
  .footer_cta_media::after {
    background-image: linear-gradient(90deg, var(--base--blue-36-a86) 0%, var(--base--blue-36-a70) 55%, var(--base--blue-36-a45) 100%);
  }
}
/* >=768: the sky is the bright hero blue; behind the copy a lighter, normal-blend
   brand-blue wash (not multiply, which greyed it) keeps the white text at AA. */
@media (min-width:768px) {
  .footer_cta_media::after {
    mix-blend-mode: normal;
    opacity: 1;
    background-image: linear-gradient(90deg, var(--base--hero-blue-a80) 0%, var(--base--hero-blue-a70) 35%, var(--base--hero-blue-a26) 58%, var(--base--hero-blue-a00) 76%);
  }
}
@media (min-width:768px) and (max-width:991px) {
  /* Tablet: the copy runs wider, so the wash reaches further across. */
  .footer_cta_media::after {
    background-image: linear-gradient(90deg, var(--base--hero-blue-a80) 0%, var(--base--hero-blue-a68) 55%, var(--base--hero-blue-a45) 80%, var(--base--hero-blue-a20) 100%);
  }
}
/* Glass panel over the clip: 10% white with a slight blur, per the design. */
.footer_panel {
  position: relative;
  z-index: 1;
  background-color: var(--_color---bg--glass);
  backdrop-filter: blur(3.125rem);
  -webkit-backdrop-filter: blur(3.125rem);
  border-radius: var(--rounding--md);
}

/* The glass panel sits one page gutter in from each side — the same inset as
   the fixed nav bar, so the two align — and the same distance off the bottom. */
.footer_panel {
  box-sizing: border-box;
  width: min(100% - 2 * var(--_spacing---page-padding), var(--max-width--content));
  margin: 0 auto var(--_spacing---page-padding);
  padding: var(--_spacing---page-padding);
  border-radius: var(--rounding--xl);
}
/* Brand column and link columns stay on one row; the brand keeps its width and
   the nav takes what is left. */
.footer_main {
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--_spacing---gap--gap-2xl);
  padding-bottom: var(--_spacing---static--spacing-24);
}
.footer_brand {
  display: flex;
  flex-direction: column;
  width: auto;
  flex: 0 1 18rem;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--_spacing---static--spacing-16);
}
/* The contact block drops to the foot of the column so it lines up with the
   newsletter field on the other side of the footer. */
.footer_contact {
  margin-top: auto;
}
.footer_brand {
  align-self: stretch;
}
/* Newsletter sign-up, under the addresses. Field and button are one row; the
   button carries the same arrow_outward as every other affordance. */
.footer_news {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_spacing---static--spacing-4);
  margin-top: var(--_spacing---static--spacing-16);
  grid-column: 1 / -1;
}
.footer_news_title {
  color: var(--_color---text--inverted--1);
}
.footer_news_text {
  margin: 0;
  max-width: 28rem;
  color: var(--_color---text--inverted--2);
}
.footer_news_button {
  flex-shrink: 0;
  border: 0;
  cursor: pointer;
}
/* SOC 2 attestation seal, sitting opposite the newsletter on the same row. */
.footer_badge {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: var(--_spacing---static--spacing-16);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer_badge:hover {
  opacity: 0.7;
}
.footer_badge_img {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: contain;
}
.footer_badge:focus-visible {
  outline: 0.125rem solid var(--_color---text--inverted--1);
  outline-offset: 0.125rem;
}

/* The lockup is a link, so it needs its own inline-flex box. */
.footer_logo {
  display: inline-flex;
  width: fit-content;
}
/* Social marks stay white and dim on hover, per the system — never the link accent. */
.footer_social_link {
  color: var(--_color---text--inverted--1);
}
.footer_social_link:hover {
  color: var(--_color---text--inverted--1);
  opacity: 0.7;
}
/* Footer links stay white and wipe a 1px rule in on hover, matching the nav.
   Same-element state, so this one is native — no embed needed. */
.footer_link {
  position: relative;
  color: var(--_color---text--inverted--1);
  text-decoration: none;
  width: fit-content;
}
.footer_link:hover {
  color: var(--_color---text--inverted--1);
  opacity: 1;
}
.footer_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
/* The phone number is the one underlined link in the footer. */
.footer_phone {
  color: var(--_color---text--inverted--1);
  text-decoration: underline;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer_phone:hover {
  color: var(--_color---text--inverted--1);
  opacity: 0.7;
}

/* Desktop: four link columns share the space left of the brand column, each
   track free to shrink to its own min-content so nothing spills left. The
   newsletter sits under the first two. */
@media (min-width:992px) {
  .footer_nav {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
    align-items: start;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    gap: var(--_spacing---gap--gap-2xl);
  }
  .footer_news {
    grid-column: 1 / 3;
    justify-self: start;
    width: 100%;
    margin-top: var(--_spacing---static--spacing-16);
  }
  .footer_badge {
    grid-column: 4 / -1;
    justify-self: end;
    align-self: end;
    margin-top: var(--_spacing---static--spacing-16);
  }
}

/* Tabular figures so the counting numbers hold one width per digit. Styled on
   the component's own class rather than through its parent section. */
.stat_value {
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
}

/* All 6px marks read as circles: eyebrow, chip, hero badge, carousel dot and
   the button's wiping mark. */
.eyebrow_dot,
.chip_dot,
.hero_badge_dot,
.testimonials_dot,
.button_main_rect {
  border-radius: 50%;
}

/* The accent recolour (teal family → brand blue) now lives in the design
   system's colour tokens, not here. See design-system-updates.md. */

/* Credential panel never gets cropped: it leaves the pinned corner as soon as
   the hero copy needs the width, and its labels are allowed to wrap. */
@media (max-width:1200px) {
  .hero_badges {
    position: relative;
    z-index: 1;
    inset: auto;
    width: fit-content;
    max-width: calc(100% - 2 * var(--_spacing---page-padding));
    margin-inline: var(--_spacing---page-padding);
    flex-direction: column;
    padding: var(--_spacing---static--spacing-6);
  }
  .hero_badge_label {
    white-space: normal;
  }
}

/* Testimonials show exactly two cards inside the section measure. */
.testimonial_wrap.testimonials_slide {
  width: calc((100cqw - var(--_spacing---gap--gap-md)) / 2);
}
/* ≤991: one quote at a time, so the author row gets the full card width. */
@media (max-width:991px) {
  .testimonial_wrap.testimonials_slide {
    width: 100cqw;
  }
}
@media (max-width:479px) {
  .testimonial_wrap.testimonials_slide {
    width: 100cqw;
  }
}

/* ══ Testimonials — dark variant ═══════════════════════════════════════════
   The band becomes a sky: pale at the top, brand blue through the middle,
   deep navy at the foot. Cards drop their white fill for a 10% white glass
   panel with a hairline ring, and every ink flips to the inverted ladder. */
.testimonials_section-dark {
  position: relative;
  overflow: visible;
  background-color: var(--_color---bg--default--bg);
}
/* Sentinel over the pale head of the sky: the nav keeps its light theme until
   the eyebrow reaches it, then flips to the inverted treatment. */
.testimonials_light_zone {
  position: absolute;
  left: 0;
  right: 0;
  top: -3rem;
  height: calc(3rem + var(--_spacing---section--section-lg) / 2);
  z-index: 0;
  pointer-events: none;
}
/* The sky is a masked layer, not a background on the section — the same soft
   alpha ramp the CTA uses, so it grows out of the page grey with no seam. */
.testimonials_section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--_gradient---testimonials-dark-sky);
}
.testimonials_section-dark .testimonials_head,
.testimonials_section-dark .testimonials_slider,
.testimonials_section-dark .testimonials_nav {
  position: relative;
  z-index: 1;
}
.testimonials_section-dark .testimonials_title {
  color: var(--_color---text--inverted--1);
}
.testimonials_section-dark .testimonial_wrap.testimonials_slide {
  background-color: var(--_color---bg--glass);
  box-shadow: none;
}
.testimonials_section-dark .testimonial_quote {
  color: var(--_color---text--inverted--1);
}
.testimonials_section-dark .testimonial_author_name {
  color: var(--_color---text--inverted--1);
}
.testimonials_section-dark .testimonial_company_link,
.testimonials_section-dark .testimonial_company_link:hover {
  color: var(--base--white-100-a75);
}
.testimonials_section-dark .testimonial_author_icon {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}
.testimonials_section-dark .testimonials_dot {
  background-color: color-mix(in srgb, var(--_color---text--inverted--1) 35%, transparent);
}
.testimonials_section-dark .testimonials_dot[data-state="active"] {
  background-color: var(--_color---text--inverted--1);
}
.testimonials_section-dark .testimonials_arrow::before {
  border-color: var(--_color---interactive--outline-inverted--idle);
}
.testimonials_section-dark .testimonials_arrow_glyph {
  background-color: var(--_color---text--inverted--1);
}
.testimonials_section-dark .testimonials_arrow:focus-visible {
  outline-color: var(--_color---text--inverted--1);
}
.testimonials_section-dark .testimonial_company_link:focus-visible {
  outline-color: var(--_color---text--inverted--1);
}

/* ══ Support / step cards ═════════════════════════════════════════════════
   Shared card grid: Support options, the industry template's process steps
   and its friction reducers all use this one implementation. */
.sup_section {
  padding-bottom: var(--_spacing---section--section-lg);
}
.sup_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--_spacing---gap--gap-md);
}
.sup_card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3.75rem;
  min-height: 22.3125rem;
  padding: 1.97rem;
  border-radius: var(--rounding--md);
  background-color: var(--_color---bg--default--1);
  transform-origin: center;
  transition: scale 0.45s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s;
}
.sup_card:hover {
  scale: 1.025;
  z-index: 1;
}
@media (prefers-reduced-motion:reduce) {
  .sup_card {
    transition: none;
  }
}
.sup_icon {
  width: 2.709rem;
  height: 2.709rem;
  object-fit: contain;
  display: block;
}
.sup_card_body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--_spacing---static--spacing-8);
  flex: 1 1 auto;
}
.sup_card_copy {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}
.sup_card_title {
  margin: 0;
  font-size: var(--_typography---font-size--title-5);
  line-height: 1.8962rem;
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--2);
}
.sup_card_text {
  margin: 0;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5762rem;
  color: var(--_color---text--default--3);
}
.sup_card_action {
  display: flex;
  align-items: center;
  min-height: 3rem;
}
.sup_link {
  font-size: var(--_typography---font-size--label-1);
  line-height: 1.5762rem;
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---interactive--primary--idle);
  text-decoration: underline;
}
.sup_link:hover {
  color: var(--_color---interactive--primary--hover);
}
@media (max-width:991px) {
  .sup_grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .sup_card {
    min-height: 0;
    gap: var(--_spacing---static--spacing-8);
  }
}

/* Type scale alignment: text links and arrow links match buttons at 16px. */
.arrow_link {
  font-size: var(--_typography---font-size--label-1);
}

/* ─── Type scale (agreed 2026-09) ───────────────────────────────────────
   One set of size variables with three breakpoint values. Titles step down
   20% on tablet and 25% on mobile; body steps down 10% / 15%. Floors: never
   below 12px, and a title never smaller than the body beside it. Line-heights
   are unitless ratios, so leading follows the size automatically.
   Webflow: create these as variables with Tablet and Mobile modes. */
:root {
  --_typography---font-size--headline-1: 4rem;
  --_typography---font-size--headline-2: 3.75rem;
  --_typography---font-size--title-1: 3rem;
  --_typography---font-size--title-2: 2.5rem;
  --_typography---font-size--callout: 2rem;
  --_typography---font-size--title-3: 1.5rem;
  --_typography---font-size--title-4: 1.375rem;
  --_typography---font-size--title-5: 1.25rem;
  --_typography---font-size--title-6: 1rem;
  --_typography---font-size--body-1: 1.25rem;
  --_typography---font-size--lead: 1.125rem;
  --_typography---font-size--body-2: 1rem;
  --_typography---font-size--body-3: 1rem;
  --_typography---font-size--body-4: 1rem;
  --_typography---font-size--label-1: 1rem;
  --_typography---font-size--small: 0.875rem;
  --_typography---font-size--label-2: 0.75rem;
  --_typography---font-size--label-3: 0.75rem;
}
@media (max-width:991px) {
  :root {
    --_typography---font-size--headline-1: 3.1875rem;
    --_typography---font-size--headline-2: 3rem;
    --_typography---font-size--title-1: 2.375rem;
    --_typography---font-size--title-2: 2rem;
    --_typography---font-size--callout: 1.625rem;
    --_typography---font-size--title-3: 1.1875rem;
    --_typography---font-size--title-4: 1.125rem;
    --_typography---font-size--title-5: 1rem;
    --_typography---font-size--title-6: 0.875rem;
    --_typography---font-size--body-1: 1.125rem;
    --_typography---font-size--lead: 1rem;
    --_typography---font-size--body-2: 0.9375rem;
    --_typography---font-size--body-3: 0.9375rem;
    --_typography---font-size--body-4: 0.9375rem;
    --_typography---font-size--label-1: 0.9375rem;
    --_typography---font-size--small: 0.8125rem;
    --_typography---font-size--label-2: 0.75rem;
    --_typography---font-size--label-3: 0.75rem;
  }
}
@media (max-width:767px) {
  :root {
    --_typography---font-size--headline-1: 3rem;
    --_typography---font-size--headline-2: 2.8125rem;
    --_typography---font-size--title-1: 2.25rem;
    --_typography---font-size--title-2: 1.875rem;
    --_typography---font-size--callout: 1.5rem;
    --_typography---font-size--title-3: 1.125rem;
    --_typography---font-size--title-4: 1.0625rem;
    --_typography---font-size--title-5: 0.9375rem;
    --_typography---font-size--title-6: 0.875rem;
    --_typography---font-size--body-1: 1.0625rem;
    --_typography---font-size--lead: 0.9375rem;
    --_typography---font-size--body-2: 0.875rem;
    --_typography---font-size--body-3: 0.875rem;
    --_typography---font-size--body-4: 0.875rem;
    --_typography---font-size--label-1: 0.875rem;
    --_typography---font-size--small: 0.75rem;
    --_typography---font-size--label-2: 0.75rem;
    --_typography---font-size--label-3: 0.75rem;
  }
}
.hero_text,
.plain_hero_text {
  font-size: var(--_typography---font-size--lead);
}

/* Credential panel keeps its desktop spot on tablet and mobile: right-aligned and pushed to the foot of the hero, over the lighter end of the gradient. */
@media (max-width:1200px) {
  .hero_section:not(.is-compact):not(.is-about):not(.is-centered) {
    display: flex;
    flex-direction: column;
  }
  .hero_badges {
    margin-left: auto;
    margin-right: max(var(--_spacing---page-padding), calc((100% - var(--max-width--content)) / 2));
    margin-top: auto;
    margin-bottom: var(--_spacing---page-padding);
  }
}
/* Mobile: the credentials card spans the gutter-to-gutter width, the two
   hero buttons share the row, and the hand-set line break in the intro is
   dropped once the first half no longer fits on one line. */
@media (max-width:767px) {
  .hero_badges {
    width: auto;
    max-width: none;
    margin-left: var(--_spacing---page-padding);
  }
  .hero_actions {
    align-self: stretch;
    flex-wrap: nowrap;
  }
  .button_main_wrap.hero_button {
    flex: 1 1 0;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .hero_button_element {
    justify-content: center;
  }
}
@media (max-width:479px) {
  .hero_text_break {
    display: none;
  }
}

/* FAQ bubble clip is desktop-only; on tablet and mobile the heading block stays text-only. */
@media (max-width:991px) {
  .faq_bubble_video {
    display: none;
  }
}

/* Footer on tablet and mobile: logo on top, link columns under it, then newsletter + seal, then contact. */
@media (max-width:991px) {
  .footer_main {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--_spacing---static--spacing-12);
  }
  .footer_brand {
    display: contents;
  }
  .footer_logo {
    order: 1;
    align-self: flex-start;
  }
  .footer_nav {
    order: 2;
    gap: var(--_spacing---static--spacing-10) var(--_spacing---static--spacing-6);
  }
  .footer_contact {
    order: 3;
    margin-top: 0;
  }
  .footer_news {
    grid-column: 1 / -1;
    margin-top: var(--_spacing---static--spacing-4);
  }
  .footer_badge {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0;
  }
}
@media (min-width:768px) and (max-width:991px) {
  .footer_nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .footer_news {
    grid-column: 1 / 4;
  }
  .footer_badge {
    grid-column: 4 / -1;
    justify-self: end;
    align-self: end;
  }
  .footer_contact {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
    align-items: start;
    column-gap: var(--_spacing---static--spacing-12);
  }
  .footer_contact .footer_address {
    margin: 0;
  }
}

/* Industries rows: once stacked, the image sits under the copy and carries its own ratio (there is no row height left to fill). */
@media (max-width:991px) {
  .io_row_visual {
    aspect-ratio: 16 / 10;
    order: 2;
  }
}
@media (max-width:767px) {
  .io_row_visual {
    aspect-ratio: 4 / 3;
  }
}

/* Homepage hero on tablet/mobile: exactly one viewport tall. The system's section padding-bottom was adding 80px on top of min-height:100svh; the badges carry their own bottom margin instead. */
@media (max-width:991px) {
  .hero_section:not(.is-compact):not(.is-about):not(.is-centered) {
    box-sizing: border-box;
    padding-bottom: 0;
  }
}

/* Footer compass on narrow screens. Measured from the clip: the compass spans ~50–88% of the frame width (centre ~69%). Cover-cropping a tall box to 50% left it off the right edge; ~68–70% puts its centre at ~70% of the screen, right of the copy. */
@media (max-width:991px) {
  .footer_cta_video {
    object-position: 70% 28%;
  }
}
@media (max-width:767px) {
  /* Crop pushed right so the compass sits beside the copy. The sky box keeps its full height: the clip is also the footer's background, and shortening it exposes a hard band behind the footer panel. */
  .footer_cta_video {
    object-position: 68% 28%;
  }
  .footer_cta_media::after {
    opacity: 0.55;
  }
}

/* Testimonial card on mobile: tighter quote-to-author gap, and the author row
   leads with a small square photo so the name and company get the full width. */
@media (max-width:767px) {
  .testimonial_wrap.testimonials_slide {
    gap: var(--_spacing---static--spacing-8);
    padding: var(--_spacing---static--spacing-6);
  }
  .testimonial_footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--_spacing---static--spacing-4);
  }
  .testimonial_photo {
    order: -1;
    flex: none;
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.25rem;
  }
  .testimonial_author {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Tablet + mobile: every content section uses the one section rhythm (88px tablet / 80px mobile, the system's section--lg).
   Heroes, the logo marquee, the pinned process stage and the contact intro keep their own spacing. */
@media (max-width:991px) {
  main > section:not(.hero_section):not(.pub_hero):not(.plain_hero):not(.marquee_section):not(.svc_process):not(.contact_section):not(.is-page) {
    padding-top: var(--_spacing---section--section-lg);
    padding-bottom: var(--_spacing---section--section-lg);
  }
}

/* Footer sky on tablet/mobile: the backdrop gradient was in % of the whole footer, and the stacked footer is ~3x taller, so its pale band landed behind the glass panel and blurred into a white haze. Pin the stops to the CTA's height instead. */
@media (max-width:991px) {
  .footer_wrap {
    background-image: linear-gradient(180deg,var(--_color---bg--default--bg) 0,var(--base--grey-94) 3rem,var(--base--sky-90-2) 6rem,var(--base--sky-85-2) 9rem,var(--base--sky-77) 13rem,var(--base--sky-71) 17rem,var(--base--navy-11-a00) 26rem,var(--base--navy-05-a50) 36rem,var(--base--navy-11) 48rem);
  }
}

@media (max-width:991px) {
  .testimonials_nav {
    margin-top: var(--_spacing---static--spacing-5);
  }
}

@media (max-width:767px) {
  .contact_section .contact_layout {
    padding-top: 9rem;
  }
  .legal_layout {
    padding-top: 4rem;
  }
  .plain_hero_actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .plain_hero_button {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}

@media (max-width:767px) {
  main section .legal_layout {
    padding-top: 4rem;
  }
  .contact_support_card.contact_support_card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_spacing---static--spacing-5);
  }
}

@media (max-width:991px) {
  .svc_why_img.svc_why_img {
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
    width: 100%;
    object-fit: cover;
  }
}

@media (max-width:991px) {
  .ab_purpose_visual.ab_purpose_visual {
    aspect-ratio: 4 / 3;
    min-height: 0;
    height: auto;
  }
}

/* Tablet + mobile: wrapped metric rows get a vertical gap. */
@media (max-width:991px) {
  .about_stats.about_stats,
  .svc_stats.svc_stats {
    row-gap: var(--_spacing---static--spacing-8);
  }
}

/* Footer compass on mobile: smaller and further right. The clip is scaled from its bottom-right corner; its top edge is feathered into the footer sky behind it. */
@media (max-width:767px) {
  .footer_cta_media .footer_cta_video {
    inset: auto;
    right: 0;
    bottom: 0;
    width: calc(100% / 0.72);
    height: 100%;
    object-position: 80% 28%;
    transform: scale(0.72);
    transform-origin: 100% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  }
}

/* Mobile: the scaled compass clip no longer reaches the top of the sky box, so the box itself carries the footer sky behind it — pale grey into brand blue — instead of the grey multiply wash. */
@media (max-width:767px) {
  .footer_cta_media.footer_cta_media {
    background-image: linear-gradient(180deg, var(--_color---bg--default--bg) 0%, var(--base--sky-91) 6%, var(--base--sky-85-3) 12%, var(--base--sky-76) 18%, var(--base--sky-69) 25%, var(--base--sky-65) 33%, var(--base--sky-62) 100%);
  }
  .footer_cta_media.footer_cta_media .footer_cta_video {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.15) 12%, rgba(0,0,0,0.45) 24%, rgba(0,0,0,0.8) 36%, #000 48%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.15) 12%, rgba(0,0,0,0.45) 24%, rgba(0,0,0,0.8) 36%, #000 48%);
  }
  .footer_cta_media.footer_cta_media::after {
    /* Copy spans the full width here, so the wash stays strong across it. */
    opacity: 1;
    background-image: linear-gradient(90deg, var(--base--blue-36-a86) 0%, var(--base--blue-36-a70) 55%, var(--base--blue-36-a45) 100%);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   06  Button Main — the template's button component, restyled to the M. A.
   Polce look (formerly "Button 060"). Structure:
     button_main_wrap          grid; carries the variant combo (is-light / is-solid / is-outline / is-glass)
     ├─ Clickable              clickable_wrap: the real <a>/<button>, covers the wrap; clickable_text is sr-only
     ├─ button_main_bg         the fill that scales on hover
     └─ button_main_element    the label row: _rect (the wipe-in mark) + _text
   The visual rules for the base and each variant live under 07 (Button Main);
   this block only wires the Clickable into the structure.
   ════════════════════════════════════════════════════════════════════════════ */
.clickable_wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--rounding--md);
  background-color: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.clickable_wrap:focus-visible {
  outline: 0.125rem solid var(--_color---focus--ring);
  outline-offset: 0.125rem;
}
.clickable_text {
  white-space: nowrap;
}
.button_main_element {
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   Image slots — a filled slot is a plain <img> that fills its frame; an empty
   one is a visible placeholder (dashed frame, icon, caption) until the real
   image is supplied. Remove the placeholder once the asset lands — see
   HANDOFF.md → Placeholders.
   ════════════════════════════════════════════════════════════════════════════ */
.image_slot_img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
}
.image_placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.3;
}
.image_placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.09375rem dashed currentColor;
  border-radius: inherit;
  opacity: 0.35;
  pointer-events: none;
}
.image_placeholder.is-wash {
  background-color: var(--base--grey-50-a08);
}
.image_placeholder.is-circle {
  border-radius: 50%;
}
.image_placeholder_icon {
  flex-shrink: 0;
  opacity: 0.45;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.image_placeholder_text {
  max-width: 90%;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.75;
}

/* CODE EMBED — filter state: script.js sets [hidden] on filtered-out cards and
   on the empty-state message; component display rules would otherwise win. */
[data-filter-item][hidden],
[data-filter-empty][hidden] {
  display: none;
}

/* CODE EMBED — Three.js dot animations. Each one is an <iframe> embed from the
   M.A.-Polce Dot-grid shader pages, carrying the class of the video it replaced
   so it keeps that video's box. The pages are transparent when embedded, so the
   section or tile background shows through. */
.three_frame {
  border: 0;
  background: transparent;
  color-scheme: normal;
  pointer-events: none;
  mix-blend-mode: normal;
}
/* The FAQ clip sized itself from the video (square); an iframe has no intrinsic ratio. */
/* Footer compass (>=768): the frame ends where the footer panel ends, and the compass is
   pinned to its right side (objx=1, cx=0.84 in the embed URL), so the bezel lines up with
   the panel's right edge at every width. */
@media (min-width:768px) {
  .footer_cta_video.three_frame {
    width: calc(100% - max(var(--_spacing---page-padding), calc((100% - var(--max-width--content)) / 2)));
  }
}
.faq_bubble_video.three_frame {
  aspect-ratio: 1 / 1;
  height: auto;
}
/* ════════════════════════════════════════════════════════════════════════════
   05  Nav — one menu for every breakpoint.
   Desktop: a fixed glass bar; Services and Industries open full-width mega
   panels off the bar, Company and Resources open compact dropdowns off their
   trigger. ≤991px: the same menu list becomes a full-screen sheet behind the
   bar, each trigger an accordion row, Support + Contact Us pinned at the foot.
   State hooks (set by initNav in script.js, placeholders in nav_hidden):
     .nav_component.is-theme-light  bar is over a light section (or the page is light)
     .nav_component.is-open         mobile sheet open
     .nav_link.is-active            its panel is open (desktop) / expanded (mobile)
     .nav_mega_panel.is-active, .nav_dropdown_panel.is-active
   ════════════════════════════════════════════════════════════════════════════ */
.nav_component {
  position: fixed;
  top: var(--_spacing---static--spacing-5);
  left: max(var(--_spacing---page-padding), calc((100% - var(--max-width--content)) / 2));
  right: max(var(--_spacing---page-padding), calc((100% - var(--max-width--content)) / 2));
  z-index: 10;
  display: flex;
  align-items: center;
  padding: var(--_spacing---static--spacing-2) var(--_spacing---static--spacing-2) var(--_spacing---static--spacing-2) var(--_spacing---static--spacing-4);
  border-radius: var(--rounding--xl);
  background-color: var(--_color---bg--glass);
  backdrop-filter: var(--blur--nav);
  -webkit-backdrop-filter: var(--blur--nav);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav_component.is-theme-light {
  background-color: color-mix(in srgb, var(--_color---bg--inverted--bg) 10%, transparent);
}
.nav_contain {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-inline: auto;
}
.nav_logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.nav_logo_img {
  height: 2.375rem;
  width: auto;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav_logo_img_light {
  position: absolute;
  inset: 0;
  height: 2.375rem;
  width: auto;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav_component.is-theme-light .nav_logo_img {
  opacity: 0;
}
.nav_component.is-theme-light .nav_logo_img_light {
  opacity: 1;
}

/* The menu takes the space between logo and actions and centres itself in it,
   so the two gaps either side of it stay equal. */
.nav_menu_wrap {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
}
.nav_menu {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-2);
  margin-inline: auto;
}
.nav_item_wrap {
  position: relative;
  display: flex;
}
/* Mega items don't position their panel: it hangs off the whole bar. */
.nav_item_wrap.is-mega {
  position: static;
}
.nav_link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--_spacing---static--spacing-1);
  padding: var(--_spacing---static--spacing-4) var(--_spacing---static--spacing-6);
  border: 1px solid transparent;
  border-radius: var(--rounding--md);
  background: none;
  color: var(--_color---text--inverted--1);
  font-family: var(--_typography---font--primary);
  font-size: 1rem;
  line-height: var(--_typography---line-height--label-1);
  font-weight: var(--_typography---weight--title-normal);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--motion--duration) var(--motion--easing);
}
.nav_link:hover {
  border-color: transparent;
  color: var(--_color---text--inverted--1);
}
.nav_link.is-active {
  border-color: transparent;
}
.nav_link:focus-visible {
  outline: 0.125rem solid var(--_color---focus--ring-inverted);
  outline-offset: 0.125rem;
}
.nav_link_label {
  position: relative;
  display: inline-block;
  color: inherit;
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
}
.nav_link_icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: filter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav_link.is-active .nav_link_icon {
  rotate: 180deg;
}
.nav_link_caret {
  display: none;
}
.nav_component.is-theme-light .nav_link {
  color: var(--_color---text--brand--3);
  border-color: transparent;
}
.nav_component.is-theme-light .nav_link_icon {
  filter: brightness(0) saturate(100%) invert(6%) sepia(60%) saturate(1600%) hue-rotate(185deg) brightness(95%);
}
.nav_component.is-theme-light .nav_link:focus-visible {
  outline-color: var(--_color---focus--ring);
}

.nav_actions {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-6);
}
.nav_support {
  color: var(--_color---text--inverted--1);
  font-family: var(--_typography---font--primary);
  font-size: 1rem;
  line-height: var(--_typography---line-height--label-1);
  font-weight: var(--_typography---weight--title-normal);
  text-decoration: none;
  white-space: nowrap;
}
.nav_support:hover {
  color: var(--_color---text--inverted--1);
}
.nav_support:focus-visible {
  outline: 0.125rem solid var(--_color---focus--ring-inverted);
  outline-offset: 0.125rem;
}
.nav_component.is-theme-light .nav_support {
  color: var(--_color---text--brand--3);
}
.nav_component.is-theme-light .nav_support:focus-visible {
  outline-color: var(--_color---focus--ring);
}
.nav_component.is-theme-light .nav_contact {
  color: var(--_color---interactive--primary--on);
}
.nav_component.is-theme-light .nav_contact_bg {
  background-color: var(--_color---interactive--primary--idle);
}

/* CODE EMBED — nav underline: a 1px rule that wipes in under the label while
   its parent link is hovered (parent-hover → child, not expressible natively). */
.nav_link_label::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
@media (hover: hover) and (pointer: fine) and (min-width:992px) {
  .nav_link:hover .nav_link_label::before,
  .nav_support:hover .nav_link_label::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }
}
/* end CODE EMBED */

/* Services / Industries mega panel */
.nav_mega_panel {
  position: absolute;
  top: calc(100% + var(--_spacing---static--spacing-3));
  left: 0;
  right: 0;
  z-index: 1;
  background-color: var(--_color---bg--default--1);
  border-radius: var(--rounding--xl);
  border: 1px solid var(--_color---outline--hairline);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 -0.375rem;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), translate 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s;
}
.nav_mega_panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: 0 0;
}
.nav_mega_grid {
  display: flex;
  align-items: stretch;
}
.nav_mega_right {
  flex: 3 1 0%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--_color---outline--hairline);
}
.nav_mega_cols_row {
  display: flex;
  flex: 1 1 auto;
}
.nav_mega_col {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
  padding: var(--_spacing---static--spacing-6);
}
.nav_mega_col.is-divided {
  border-left: 1px solid var(--_color---outline--hairline);
}
.nav_mega_col_head {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-2);
}
.nav_mega_eyebrow {
  display: block;
  color: var(--_color---text--brand--1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  font-weight: 500;
}
.nav_mega_link {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: var(--_spacing---static--spacing-2);
  margin-inline: calc(var(--_spacing---static--spacing-2) * -1);
  border-radius: var(--rounding--sm);
  text-decoration: none;
}
.nav_mega_link:hover {
  background-color: var(--_color---interactive--outline--hover);
}
.nav_mega_link:focus-visible {
  outline: 0.125rem solid var(--_color---focus--ring);
  outline-offset: 0;
}
.nav_mega_link_title {
  color: var(--_color---text--default--2);
  font-size: 0.9375rem;
  font-weight: 500;
}
.nav_mega_link:hover .nav_mega_link_title {
  color: var(--_color---text--brand--3);
}
.nav_mega_link_desc {
  color: var(--_color---text--default--3);
  font-size: 0.8125rem;
}
.nav_mega_all {
  display: none;
}
.nav_mega_footer {
  display: flex;
  flex: 0 0 auto;
  border-top: 1px solid var(--_color---outline--hairline);
}
.nav_mega_footer_inner {
  display: flex;
  width: 100%;
  gap: var(--_spacing---static--spacing-4);
  padding: var(--_spacing---static--spacing-5) var(--_spacing---static--spacing-6) var(--_spacing---static--spacing-6) var(--_spacing---static--spacing-6);
}
.nav_mega_cta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-2);
  box-sizing: border-box;
  padding: var(--_spacing---static--spacing-5);
  border-radius: var(--rounding--sm);
  overflow: hidden;
  text-decoration: none;
}
.nav_mega_cta:focus-visible {
  outline: 0.125rem solid var(--_color---focus--ring);
  outline-offset: 0.125rem;
}
.nav_mega_cta.is-primary {
  flex: 1 1 0%;
  background: linear-gradient(100deg, var(--_color---bg--inverted--1) 0%, var(--base--blue-600) 100%);
}
/* Deepened from rgb(46,124,224) so white text passes AA (5.4:1). */
.nav_mega_cta.is-accent {
  flex: 1 1 0%;
  background-color: var(--base--blue-46);
}
.nav_mega_cta.is-industries {
  height: 100%;
  padding: var(--_spacing---static--spacing-4);
  background: linear-gradient(141deg, var(--_color---bg--inverted--1) 0%, var(--base--blue-600) 50%, var(--base--blue-400) 100%);
}
.nav_mega_cta_img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 55%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.6;
  pointer-events: none;
}
.nav_mega_cta_row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--_spacing---static--spacing-2);
}
.nav_mega_cta_title {
  color: var(--_color---text--inverted--1);
  font-size: 0.875rem;
  font-weight: 500;
}
.nav_mega_cta_text {
  position: relative;
  z-index: 1;
  color: var(--base--white-100-a70);
  font-size: 0.75rem;
  line-height: 1.2;
}
/* On the brighter accent card the 70% ink drops below AA; 90% keeps 4.7:1. */
.nav_mega_cta_text.is-accent {
  color: var(--base--white-100-a90);
}
.nav_mega_cta_arrow {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}
@media (max-width:1199px) {
  .nav_mega_col.is-wrapped {
    border-top: 1px solid var(--_color---outline--hairline);
  }
}
/* 992–1199px: tighter link padding so Support + Contact Us stay inside the bar */
@media (min-width:992px) and (max-width:1199px) {
  .nav_link {
    padding-inline: var(--_spacing---static--spacing-3);
  }
  .nav_actions {
    gap: var(--_spacing---static--spacing-4);
  }
}

/* Company / Resources dropdown, anchored to its own trigger */
.nav_dropdown_panel {
  position: absolute;
  top: calc(100% + var(--_spacing---static--spacing-5));
  left: 0;
  z-index: 1;
  min-width: 22rem;
  background-color: var(--_color---bg--default--1);
  border-radius: var(--rounding--xl);
  border: 1px solid var(--_color---outline--hairline);
  padding: var(--_spacing---static--spacing-6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 -0.375rem;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), translate 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s;
}
.nav_dropdown_panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: 0 0;
}
.nav_dropdown_inner {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-4);
}
.nav_dropdown_list {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-4);
}

.nav_burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--rounding--md);
  background: none;
  color: var(--_color---text--inverted--1);
  cursor: pointer;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav_burger_icon.is-close {
  display: none;
}
.nav_component.is-open .nav_burger_icon.is-menu {
  display: none;
}
.nav_component.is-open .nav_burger_icon.is-close {
  display: block;
}
.nav_hidden {
  display: none;
}

/* ── ≤991px: the same menu as a full-screen sheet ─────────────────────────── */
@media (max-width:991px) {
  .nav_burger {
    display: inline-flex;
  }
  .nav_burger:hover {
    opacity: 0.7;
  }
  .nav_burger:focus-visible {
    outline: 0.125rem solid var(--base--teal-37);
    outline-offset: 0.125rem;
  }
  .nav_component.is-theme-light .nav_burger {
    color: var(--_color---text--brand--3);
  }

  /* Open: the bar drops its glass (a backdrop-filter would trap the fixed sheet
     inside the bar) and switches to the navy lockup. */
  .nav_component.is-open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: transparent;
    box-shadow: none;
  }
  .nav_component.is-open .nav_logo_img {
    opacity: 0;
  }
  .nav_component.is-open .nav_logo_img_light {
    opacity: 1;
  }
  .nav_component.is-open .nav_burger {
    color: var(--_color---text--brand--3);
  }

  .nav_menu_wrap {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    height: 100svh;
    padding: 0 calc(var(--_spacing---page-padding) + 1.125rem) 0 calc(var(--_spacing---page-padding) + 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--_color---bg--default--1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),visibility 0.2s;
  }
  .nav_component.is-open .nav_menu_wrap {
    opacity: 1;
    visibility: visible;
  }
  /* A solid band under the logo + close button so the list never shows through. */
  .nav_menu_wrap::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 2;
    height: 6.5rem;
    margin: 0 calc(-1 * (var(--_spacing---page-padding) + 1.125rem)) 0 calc(-1 * (var(--_spacing---page-padding) + 1rem));
    background-color: var(--_color---bg--default--1);
    border-bottom: 0.5px solid var(--_color---outline--hairline);
  }
  .nav_menu {
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    gap: 0;
    margin-inline: 0;
  }
  .nav_item_wrap {
    flex-direction: column;
  }

  /* Trigger rows */
  .nav_link {
    box-sizing: border-box;
    justify-content: space-between;
    width: 100%;
    min-height: 3.5rem;
    padding: 0;
    border: 0;
    border-bottom: 0.5px solid var(--_color---outline--hairline);
    border-radius: 0;
    color: var(--_color---text--default--1);
    font-size: var(--_typography---font-size--title-5);
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
  }
  .nav_link:hover,
  .nav_component.is-theme-light .nav_link {
    color: var(--_color---text--default--1);
    border-bottom-color: var(--_color---outline--hairline);
  }
  .nav_link:focus-visible,
  .nav_component.is-theme-light .nav_link:focus-visible {
    outline: 0.125rem solid var(--base--teal-37);
    outline-offset: 0.125rem;
  }
  .nav_link_label {
    font-size: inherit;
    line-height: inherit;
  }
  .nav_link_label::before {
    content: none;
  }
  .nav_link_icon {
    display: none;
  }
  .nav_link_caret {
    display: inline-flex;
    transition: rotate 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav_link.is-active .nav_link_caret {
    rotate: 180deg;
  }

  /* Panels collapse into the list: grid row 0fr → 1fr */
  .nav_mega_panel,
  .nav_dropdown_panel {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
    visibility: hidden;
    pointer-events: auto;
    translate: none;
    transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1),visibility 0.2s;
  }
  .nav_mega_panel.is-active,
  .nav_dropdown_panel.is-active {
    grid-template-rows: 1fr;
    visibility: visible;
  }
  .nav_panel_clip {
    min-height: 0;
    overflow: hidden;
  }
  .nav_mega_grid,
  .nav_dropdown_inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 0 1rem;
  }
  .nav_mega_right,
  .nav_mega_cols_row {
    flex-direction: column;
    gap: var(--_spacing---static--spacing-4);
    border: 0;
  }
  .nav_mega_right {
    margin-top: var(--_spacing---static--spacing-4);
  }
  .nav_mega_col,
  .nav_mega_col.is-divided,
  .nav_mega_col.is-wrapped {
    gap: 0;
    padding: 0;
    border: 0;
  }
  .nav_mega_eyebrow {
    padding-bottom: 0.25rem;
    font-size: var(--_typography---font-size--label-2);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.0625rem;
  }
  .nav_mega_eyebrow.is-dropdown {
    display: none;
  }
  .nav_dropdown_list {
    gap: 0;
  }
  .nav_mega_link {
    flex-direction: row;
    align-items: center;
    min-height: 2.75rem;
    padding: 0;
    margin: 0;
    border-radius: 0;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav_mega_link:hover {
    opacity: 0.7;
    background-color: transparent;
  }
  .nav_mega_link_title,
  .nav_mega_link:hover .nav_mega_link_title {
    color: var(--_color---text--default--2);
    font-size: var(--_typography---font-size--body-2);
    font-weight: 400;
    line-height: 1.4;
  }
  .nav_mega_link_desc {
    display: none;
  }
  .nav_mega_all {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.375rem;
    min-height: 2.75rem;
    margin-top: var(--_spacing---static--spacing-4);
    color: var(--_color---text--brand--3);
    font-size: var(--_typography---font-size--label-1);
    font-weight: 500;
    text-decoration: none;
  }
  .nav_mega_all:hover {
    opacity: 0.7;
    color: var(--_color---text--brand--3);
  }
  .nav_mega_all_arrow {
    width: 0.75rem;
    height: 0.75rem;
    filter: brightness(0);
  }

  /* The desktop CTA cards, stacked under their section */
  .nav_mega_footer {
    margin-top: var(--_spacing---static--spacing-4);
    border: 0;
  }
  .nav_mega_footer_inner {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.25rem 0 0;
  }
  .nav_mega_col.is-cta {
    margin-top: var(--_spacing---static--spacing-4);
    padding-top: 0.25rem;
  }
  .nav_mega_cta,
  .nav_mega_cta.is-industries {
    height: auto;
    padding: 1.25rem;
    gap: 0.5rem;
  }
  .nav_mega_cta_img {
    display: none;
  }
  .nav_mega_cta_title {
    font-size: var(--_typography---font-size--label-1);
  }
  .nav_mega_cta_text {
    font-size: var(--_typography---font-size--label-2);
    line-height: 1.4;
  }

  /* Support + Contact Us pinned to the foot of the sheet */
  .nav_actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    flex-direction: row;
    align-items: stretch;
    flex-shrink: 0;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1.5rem;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    background-color: var(--_color---bg--default--1);
  }
  .nav_support,
  .nav_component.is-theme-light .nav_support {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 3rem;
    border-radius: var(--rounding--md);
    box-shadow: inset 0 0 0 1px var(--_color---interactive--outline--idle);
    color: var(--_color---interactive--outline--on);
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav_support:hover {
    background-color: var(--_color---interactive--outline--hover);
    color: var(--_color---interactive--outline--on);
  }
  .nav_support .nav_link_label {
    font-size: var(--_typography---font-size--label-1);
    line-height: var(--_typography---line-height--label-1);
  }
  .button_main_wrap.nav_contact {
    flex: 1 1 0;
    min-width: 0;
    grid-template-columns: minmax(0,1fr);
    color: var(--_color---interactive--primary--on);
  }
  .button_main_bg.nav_contact_bg {
    background-color: var(--_color---interactive--primary--idle);
  }
  .button_main_bg.nav_contact_bg:hover {
    background-color: var(--_color---interactive--primary--hover);
  }
  .nav_contact_element {
    justify-content: center;
  }
}
@media (min-width:768px) and (max-width:991px) {
  .nav_mega_footer_inner {
    flex-direction: row;
  }
  .nav_mega_cta {
    flex: 1 1 0;
    min-width: 0;
  }
}
/* CODE EMBED — lock page scroll while the mobile sheet is open */
html:has(.nav_component.is-open) {
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════════
   08  Footer — legal row and newsletter
   ════════════════════════════════════════════════════════════════════════════ */

.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Home  (/)
   Page-variant combo: is-home (keeps this page's overrides off the shared classes elsewhere)
   ════════════════════════════════════════════════════════════════════════════ */

.arrow_link:hover {
  opacity: 1;
  color: var(--_color---text--default--1);
}
.arrow_link_text {
  position: relative;
}
.arrow_link_text::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.arrow_link:hover .arrow_link_text::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.hero_contain.is-home .button_main_wrap.is-glass .button_main_bg.is-glass {
  background-color: var(--_color---interactive--primary--idle) !important;
}
.hero_contain.is-home .button_main_wrap.is-glass:is(:hover, :has(> .clickable_wrap:focus-visible)) .button_main_bg.is-glass {
  background-color: var(--_color---interactive--primary--hover) !important;
}
.mission_section {
  position: relative;
  overflow: hidden;
}
.home_mission_pattern {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.55;
  pointer-events: none;
}
.mission_section .mission_contain {
  position: relative;
}
.testimonials_section.is-home {
  position: relative;
  overflow: hidden;
}
.home_testi_pattern {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}
.testimonials_section.is-home > :not(.home_testi_pattern):not(.testimonials_light_zone) {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — About Us  (/about-us)
   Page-variant combo: is-about (keeps this page's overrides off the shared classes elsewhere)
   ════════════════════════════════════════════════════════════════════════════ */

.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}

.hero_section.is-about {
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}
.hero_section.is-about .hero_bg_wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, var(--base--navy-06) 0%, var(--_color---bg--inverted--1) 13%, var(--base--blue-37-2) 48%, var(--base--blue-54) 70%, var(--base--sky-82) 92%, var(--_color---bg--default--bg) 100%);
}
.hero_section.is-about .hero_bg_radial {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 89.2%;
  mix-blend-mode: multiply;
  background: radial-gradient(114.9% 78.5% at -6% -12%, var(--_color---bg--inverted--1) 0%, var(--_color---bg--inverted--1) 18%, var(--base--navy-11-a72) 42%, var(--base--navy-11-a34) 64%, var(--base--navy-11-a00-2) 88%);
}
.hero_section.is-about .hero_contain {
  position: relative;
  width: 100%;
  padding-top: 7.5rem;
  padding-bottom: 4rem;
}
.hero_section.is-about .hero_content {
  position: absolute;
  left: 50%;
  top: 44.5%;
  transform: translate(-50%,-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  width: 44.63%;
  max-width: 36rem;
}
.hero_section.is-about .hero_title {
  margin: 0;
  max-width: 34rem;
  font-size: var(--_typography---font-size--headline-1);
  line-height: 1.09;
  color: var(--_color---text--inverted--1);
  text-wrap: balance;
}
.hero_section.is-about .hero_text {
  margin: 0;
  max-width: 33rem;
  font-size: var(--_typography---font-size--lead);
  line-height: 1.75;
  color: var(--_color---text--inverted--1);
}
.hero_section.is-about .hero_scrim {
  top: auto !important;
  bottom: 0;
  height: 9rem !important;
}
.ab_hero_stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1266 / 868;
}
.ab_hero_collage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.7s ease-out 0.2s,filter 0.7s ease-out 0.2s;
}
.ab_hero_collage.is-pre {
  opacity: 0;
  filter: blur(0.75rem);
}
.ab_hero_tile,
.ab_hero_chip {
  position: absolute;
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.ab_hero_float {
  display: block;
  width: 100%;
  height: 100%;
}
.ab_hero_tile {
  border-radius: var(--rounding--md);
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: auto;
  background-color: var(--base--white-100-a06);
}
.ab_hero_tile.is-1 {
  left: 0;
  top: 24.88%;
  width: 11.85%;
  aspect-ratio: 150 / 190;
}
.ab_hero_tile.is-2 {
  left: 80.57%;
  top: 1.96%;
  width: 19.43%;
  aspect-ratio: 246 / 190;
}
.ab_hero_tile.is-3 {
  left: 13.43%;
  top: 67.17%;
  width: 23.85%;
  aspect-ratio: 302 / 190;
}
.ab_hero_tile.is-4 {
  left: 88.15%;
  top: 71.43%;
  width: 11.85%;
  aspect-ratio: 150 / 190;
}
.ab_hero_chip {
  box-sizing: border-box;
  width: 13.11%;
  border-radius: var(--rounding--md);
  background-color: var(--base--white-100-a20);
  backdrop-filter: blur(2.5rem);
}
.ab_hero_chip.is-1 {
  left: 19.35%;
  top: 5.3%;
  background-color: var(--_color---outline--inverted);
}
.ab_hero_chip.is-2 {
  left: 78.83%;
  top: 35.83%;
}
.ab_hero_chip.is-3 {
  left: 60.58%;
  top: 66.94%;
  /* this chip sits on the palest part of the gradient: a navy tint instead of the
     white glass keeps its white figures at AA */
  background-color: var(--base--navy-11-a25);
}
.ab_hero_chip .ab_hero_float {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.21rem;
  padding: 1.2625rem;
  box-sizing: border-box;
  height: auto;
}
.ab_hero_chip_value {
  margin: 0;
  font-size: var(--_typography---font-size--callout);
  line-height: 1.15;
  font-weight: 500;
  color: var(--_color---text--inverted--1);
  text-align: center;
}
.ab_hero_chip_label {
  margin: 0;
  font-size: var(--_typography---font-size--label-2);
  line-height: 1.3;
  color: var(--_color---text--inverted--1);
  text-align: center;
}
@media (prefers-reduced-motion:reduce) {
  .ab_hero_collage {
    transition: none;
  }
  .ab_hero_collage.is-pre,
  .hero_section.is-about .hero_content.is-pre {
    opacity: 1;
    filter: none;
  }
}
.ab_mission {
  position: relative;
  overflow: hidden;
  background-color: var(--_color---bg--default--bg);
  padding-top: clamp(5rem, 5rem + 5 * (100vw - 24rem) / 70.5, 10rem);
  padding-bottom: clamp(5rem, 5rem + 5 * (100vw - 24rem) / 70.5, 10rem);
}
.ab_mission_pattern {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  pointer-events: none;
}
.ab_mission_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.875rem;
}
.ab_mission_title {
  margin: 0;
  max-width: 44rem;
  font-size: var(--_typography---font-size--title-2);
  line-height: 1.15;
  font-weight: 500;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}

.ab_purpose {
  background-color: var(--_color---bg--inverted--1);
}
.ab_purpose_layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  gap: var(--_spacing---gap--gap-3xl);
  align-items: stretch;
}
.ab_purpose_copy {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-6);
  max-width: 32rem;
}
.ab_purpose_title {
  margin: 0;
  color: var(--_color---text--inverted--1);
  text-wrap: pretty;
}
.ab_purpose_body {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-5);
}
.ab_purpose_body_text {
  margin: 0;
  color: var(--_color---text--inverted--3);
}
.ab_purpose_stats {
  display: flex;
  align-items: flex-start;
  gap: var(--_spacing---static--spacing-8);
  margin-top: auto;
  padding-top: var(--_spacing---static--spacing-16);
}
.ab_purpose_stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: var(--_spacing---static--spacing-5);
  border-left: 1px solid var(--base--white-100-a20);
}
.ab_purpose_stat_value {
  margin: 0;
  font-size: var(--_typography---font-size--title-1);
  line-height: 1.05;
  letter-spacing: -0.09375rem;
  font-weight: 500;
  color: var(--_color---text--inverted--1);
}
.ab_purpose_stat_label {
  margin: 0;
  font-size: var(--_typography---font-size--small);
  line-height: 1.4;
  color: var(--_color---text--inverted--3);
}
.ab_purpose {
  position: relative;
  overflow: hidden;
  background-color: var(--base--navy-09);
}
.ab_purpose_pattern {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ab_purpose .io_contain {
  position: relative;
}
.ab_purpose_visual {
  position: relative;
  width: 100%;
  min-height: 26rem;
  border-radius: var(--rounding--md);
  overflow: hidden;
  background-color: var(--_color---bg--default--1);
}

.ab_why_head {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}
/* The shared deck ramp is authored for 5 cards; this section has 4, so re-map it
   locally so the last card still rests at scale 1 and aligns to the container. */
#why .industries_row:nth-child(1) {
  scale: 0.955;
}
#why .industries_row:nth-child(2) {
  scale: 0.97;
}
#why .industries_row:nth-child(3) {
  scale: 0.985;
}
#why .industries_row:nth-child(4) {
  scale: 1;
}

.ab_team_head {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}
.ab_title {
  margin: 0;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}
.ab_team_block {
  margin-top: var(--_spacing---static--spacing-16);
}
.ab_team_label {
  margin: 0 0 var(--_spacing---static--spacing-6);
  color: var(--_color---text--default--2);
  letter-spacing: 0.04em;
}
.ab_team_grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: var(--_spacing---gap--gap-md);
}
.ab_team_card {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-4);
}
.ab_team_portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--rounding--md);
  overflow: hidden;
  background-color: var(--_color---bg--default--1);
}
.ab_team_name {
  margin: 0;
  color: var(--_color---text--default--2);
  letter-spacing: 0.01em;
}
.ab_team_role {
  margin: 0.25rem 0 0;
  color: var(--_color---text--default--4);
}

.ab_join {
  position: relative;
  overflow: hidden;
  background: var(--_gradient---testimonials-dark-sky);
}
.ab_join_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}
.ab_join_title.is-about {
  margin: 0;
  max-width: 30rem;
  font-size: var(--_typography---font-size--title-2);
  line-height: 1.12;
  font-weight: 500;
  color: var(--_color---text--inverted--1);
  text-wrap: balance;
}
.ab_join_text {
  margin: 0;
  max-width: 30rem;
  color: var(--_color---text--inverted--1);
}
.ab_join_actions {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--_spacing---static--spacing-4);
}

.ab_cred_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--_spacing---gap--gap-3xl);
  align-items: stretch;
}
.ab_cred_copy {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-6);
  max-width: 30rem;
}
.ab_cred_spacer {
  height: var(--_spacing---static--spacing-10);
}
.ab_cred_text {
  margin: 0;
  color: var(--_color---text--default--3);
}
.ab_cred_copy .button_main_wrap {
  align-self: flex-start;
}
.ab_cred_list {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ab_cred_item {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-4);
  padding-block: var(--_spacing---static--spacing-4);
  border-top: 1px solid var(--_color---outline--hairline);
}
.ab_cred_item:last-child {
  border-bottom: 1px solid var(--_color---outline--hairline);
}
.ab_cred_icon {
  width: 1.625rem;
  height: 1.625rem;
  object-fit: contain;
  flex: none;
}
.ab_cred_label {
  color: var(--_color---text--default--2);
}

.ab_loc_head {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}
.ab_loc_title {
  margin: 0;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}
.ab_loc_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--_spacing---gap--gap-md);
  margin-top: var(--_spacing---static--spacing-12);
}
.ab_loc_card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
  padding: var(--_spacing---static--spacing-8);
  border-radius: var(--rounding--md);
  background-color: var(--_color---bg--default--1);
}
.ab_loc_name {
  margin: 0;
  color: var(--_color---text--default--2);
}
.ab_loc_addr {
  margin: 0;
  color: var(--_color---text--default--3);
}
.ab_loc_link {
  width: fit-content;
  margin-top: var(--_spacing---static--spacing-6);
  color: var(--_color---interactive--primary--idle);
  text-decoration: underline;
}
.ab_loc_link:hover {
  color: var(--_color---interactive--primary--hover);
}
.marquee_section.is-about {
  height: 8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#insights {
  min-height: 0;
  justify-content: flex-start;
}
#insights .resources_contain {
  flex: none;
}
#insights .resources_layout {
  flex: none;
}

@media (max-width:1200px) {
  .ab_team_grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }

}
/* 992–1239px: the headline wraps taller than the wide collage allows; a taller
   stage and a wider text column keep the chips and photos clear of the copy. */
@media (min-width:992px) and (max-width:1239px) {
  .ab_hero_stage {
    aspect-ratio: 1266 / 1010;
    min-height: 56rem;
  }
  .hero_section.is-about .hero_content {
    width: 52%;
    top: 44%;
  }
  .ab_hero_tile.is-3 {
    top: 76%;
  }
  .ab_hero_chip.is-3 {
    top: 79%;
    background-color: var(--base--navy-11-a38); /* lower on the gradient: paler blue behind it */
  }
}
@media (max-width:991px) {
  .ab_purpose_layout {
    grid-template-columns: minmax(0,1fr);
  }
  .ab_hero_stage {
    aspect-ratio: 1100 / 1020;
    min-height: 44rem;
  }
  .hero_section.is-about .hero_content {
    width: 60%;
    top: 47%;
  }
  .ab_hero_tile.is-4 {
    display: none;
  }
  .ab_hero_tile.is-1 {
    top: 20%;
    width: 15%;
  }
  .ab_hero_tile.is-2 {
    left: 74%;
    top: 2%;
    width: 26%;
  }
  .ab_hero_tile.is-3 {
    left: 10%;
    top: auto;
    bottom: 0;
    width: 32%;
  }
  .ab_hero_chip {
    width: 19%;
  }
  .ab_hero_chip.is-1 {
    left: 13%;
    top: 3%;
  }
  .ab_hero_chip.is-2 {
    left: 80%;
    top: 27%;
  }
  .ab_hero_chip.is-3 {
    left: 58%;
    top: auto;
    bottom: 2%;
  }
}
@media (max-width:767px) {
  .ab_hero_stage {
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .hero_section.is-about .hero_content {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: none;
    padding-block: 8rem 0;
  }
  .ab_hero_collage {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0.75rem;
    margin-top: 2.5rem;
  }
  .ab_hero_tile,
  .ab_hero_chip {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    transform: none !important;
  }
  .ab_hero_tile.is-1,
  .ab_hero_chip.is-1 {
    display: none;
  }
  .ab_hero_tile.is-2,
  .ab_hero_tile.is-3 {
    aspect-ratio: 3 / 2;
  }
  .ab_hero_chip .ab_hero_float {
    padding: 1rem;
    min-height: 5.5rem;
  }
}
@media (max-width:991px) {
  .ab_team_grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .ab_cred_layout,
  .ab_loc_grid {
    grid-template-columns: minmax(0,1fr);
  }
  .ab_cred_layout {
    gap: var(--_spacing---static--spacing-10);
  }
  .ab_cred_spacer {
    display: none;
  }
  .ab_mission_title {
    font-size: var(--_typography---font-size--title-2);
  }
  .ab_join_title.is-about {
    font-size: var(--_typography---font-size--title-2);
  }
  .ab_purpose_stats {
    flex-wrap: wrap;
    gap: var(--_spacing---static--spacing-6);
    padding-top: var(--_spacing---static--spacing-10);
  }
}

/* v2 — Figma About Us update */
.ab_hero_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab_hero_img.is-top {
  object-position: 50% 0%;
}
.ab_mission_title {
  max-width: 42.25rem;
  font-size: var(--_typography---font-size--title-2);
  line-height: 2.715rem;
}
.ab_mission_faces {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.625rem;
}
.ab_mission_pattern {
  opacity: 0.55;
  object-position: center bottom;
}
.ab_mission_face {
  box-sizing: border-box;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 0.125rem var(--_color---interactive--input--disabled);
  background-color: var(--_color---bg--default--bg);
}
.ab_mission_face + .ab_mission_pattern {
  opacity: 0.55;
  object-position: center bottom;
}
.ab_mission_face {
  margin-left: -1rem;
}
.ab_mission_face.is-mark {
  object-fit: contain;
  background-color: transparent;
}
.ab_purpose {
  position: relative;
  overflow: hidden;
  background-color: var(--base--navy-09);
}
.ab_purpose_pattern {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ab_purpose .io_contain {
  position: relative;
}
.ab_purpose_visual {
  border-radius: 0.375rem;
  overflow: hidden;
}
.ab_purpose_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 32% 50%;
}
.ab_team_portrait {
  aspect-ratio: 243.2 / 322.161;
  border-radius: 0.5rem;
}
.ab_team_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}
.ab_team_name {
  font-size: var(--_typography---font-size--title-5);
  line-height: 1.625rem;
  letter-spacing: 0.0156rem;
  color: var(--base--grey-08-a88);
}
.ab_team_role {
  margin-top: 0.25rem;
  font-size: var(--_typography---font-size--small);
  line-height: 1.5;
  letter-spacing: 0.0156rem;
  font-weight: 400;
  color: var(--base--grey-08-a64);
}
.ab_join {
  background: var(--_gradient---cta-dark-sky);
}
.ab_join_bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ab_join_layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
/* The soft glow (first layer): lifted so its arc still reads on the brighter royal-blue bottom. */
.ab_join_layer:first-child,
.svc_guide_layer:first-child {
  mix-blend-mode: screen;
  filter: brightness(1.5) saturate(1.2);
}
.ab_join {
  min-height: 36.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ab_join_title.is-about {
  font-size: var(--_typography---font-size--title-2);
  line-height: 2.715rem;
}
.ab_cred_list {
  gap: 1.5rem;
  height: auto;
  padding-block: 0;
  border-top: 1px dashed var(--_color---focus--ring-inverted);
}
.ab_cred_item {
  flex: none;
  padding: 0 0 1.5rem;
  border-top: 0;
  border-bottom: 1px dashed var(--_color---focus--ring-inverted);
}
.ab_cred_item:last-child {
  border-bottom: 1px dashed var(--_color---focus--ring-inverted);
}
.ab_cred_list {
  padding-top: 1.5rem;
}
.ab_cred_label {
  font-size: var(--_typography---font-size--label-2);
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--_color---text--default--2);
}
.ab_offices {
  position: relative;
  overflow: hidden;
  min-height: 43rem;
  box-sizing: border-box;
  padding: 5rem 0;
  background-color: var(--_color---bg--default--bg);
}
.ab_loc_pin {
  position: absolute;
  left: 50%;
  top: 9.7875rem;
  width: 60.75rem;
  height: 34.1875rem;
  translate: -50% 0;
  object-fit: cover;
  pointer-events: none;
}
.ab_loc_glow {
  position: absolute;
  left: 50%;
  top: 33.9375rem;
  width: 122.375rem;
  height: 20.4375rem;
  translate: -50% 0;
  border-radius: 50%;
  background-color: var(--base--sky-66);
  filter: blur(3.75rem);
  pointer-events: none;
}
.ab_offices .io_contain {
  position: relative;
}
.ab_loc_head {
  align-items: center;
  text-align: center;
}
.ab_loc_grid {
  grid-template-columns: repeat(2, 25.125rem);
  justify-content: center;
  gap: 1.5rem;
  margin-top: 14.9062rem;
}
.ab_loc_card {
  justify-content: flex-end;
  gap: 0.4375rem;
  min-height: 10.5625rem;
  padding: 2.5rem;
  border-radius: 0.5rem;
  background-color: var(--_color---bg--default--1);
  box-shadow: 0 0 1.25rem 0 var(--base--navy-19-a08);
}
.ab_loc_name {
  font-size: var(--_typography---font-size--title-4);
  line-height: 1.8961rem;
  font-weight: 500;
  color: var(--_color---text--default--2);
}
.ab_loc_addr {
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.576rem;
  color: var(--_color---text--default--3);
}
.testimonial_footer.is-about.is-employee {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
.testimonial_footer.is-about.is-employee .testimonial_author {
  align-items: flex-start;
  text-align: left;
}
.emp_portrait.is-about {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--_color---bg--default--bg);
}
.emp_portrait_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.emp_role.is-about {
  color: var(--base--grey-44);
}
@media (max-width:991px) {
  .ab_loc_grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin-top: 12rem;
  }
  .ab_mission_title {
    font-size: var(--_typography---font-size--title-2);
    line-height: 1.2;
  }
  .ab_join_title.is-about {
    font-size: var(--_typography---font-size--title-2);
    line-height: 1.15;
  }
}
.arrow_link:hover {
  opacity: 1;
  color: var(--_color---text--default--1);
}
.arrow_link_text {
  position: relative;
}
.arrow_link_text::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.arrow_link:hover .arrow_link_text::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.blog_feature_wrap.is-about:hover .arrow_link {
  opacity: 1;
  color: var(--_color---text--default--1);
}
.blog_feature_wrap.is-about:hover .arrow_link_text::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.svc_hero_dots {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: brightness(2.4) saturate(1.2);
  -webkit-mask-image: linear-gradient(180deg, rgb(0,0,0) 0%, rgb(0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgb(0,0,0) 0%, rgb(0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
}
@media (max-width:767px) {
  .ab_offices .ab_loc_grid {
    grid-template-columns: minmax(0,1fr);
  }
  .ab_offices .ab_loc_card {
    padding: 1.75rem;
  }
}
@media (max-width:991px) {
  .ab_offices .ab_loc_card {
    min-height: 0;
    justify-content: flex-start;
  }
}

/* Tablet + mobile hero: floating collage around centred copy, tiles bleed off the edges */
@media (max-width:991px) {
  .ab_hero_stage {
    aspect-ratio: auto;
    min-height: 0;
    height: 72rem;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    display: block;
  }
  .ab_hero_collage {
    position: absolute;
    inset: 0;
    display: block;
    margin-top: 0;
  }
  .ab_hero_tile,
  .ab_hero_chip {
    position: absolute;
    display: block;
    right: auto;
    bottom: auto;
  }
  .hero_section.is-about .hero_content {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%,-50%);
    width: 64%;
    max-width: 36rem;
    padding-block: 0;
  }
  .ab_hero_tile.is-1 {
    display: block;
    left: -4%;
    top: 13%;
    width: 22%;
    aspect-ratio: 150 / 190;
  }
  .ab_hero_tile.is-2 {
    left: 72%;
    top: 3%;
    width: 32%;
    aspect-ratio: 246 / 190;
  }
  .ab_hero_tile.is-3 {
    left: 6%;
    top: 78%;
    width: 34%;
    aspect-ratio: 302 / 190;
  }
  .ab_hero_tile.is-4 {
    display: block;
    left: 84%;
    top: 67%;
    width: 20%;
    aspect-ratio: 150 / 190;
  }
  .ab_hero_chip {
    width: 19%;
  }
  .ab_hero_chip.is-1 {
    display: block;
    left: 28%;
    top: 5%;
  }
  .ab_hero_chip.is-2 {
    left: 77%;
    top: 23%;
  }
  .ab_hero_chip.is-3 {
    left: 52%;
    top: 84%;
    bottom: auto;
    background-color: var(--base--navy-11-a38); /* lower on the gradient here: paler blue behind it */
  }
  .ab_hero_tile.is-3 {
    bottom: auto;
  }
}
@media (max-width:767px) {
  .ab_hero_stage {
    height: 58rem;
  }
  .hero_section.is-about .hero_contain {
    padding-top: 5.5rem;
    padding-bottom: 2rem;
  }
  .hero_section.is-about .hero_content {
    top: 50%;
    width: 88%;
  }
  .ab_hero_tile.is-1 {
    left: -6%;
    top: 17%;
    width: 26%;
  }
  .ab_hero_tile.is-2 {
    left: 52%;
    top: 2%;
    width: 46%;
    aspect-ratio: 246 / 190;
  }
  .ab_hero_tile.is-3 {
    left: -8%;
    top: 73%;
    width: 56%;
    aspect-ratio: 302 / 190;
  }
  .ab_hero_tile.is-4 {
    left: 72%;
    top: 81%;
    width: 30%;
  }
  .ab_hero_chip {
    width: 31%;
  }
  .ab_hero_chip.is-1 {
    left: 7%;
    top: 4%;
  }
  .ab_hero_chip.is-2 {
    left: 64%;
    top: 19%;
  }
  .ab_hero_chip.is-3 {
    left: 55%;
    top: 70%;
  }
  .ab_hero_chip .ab_hero_float {
    padding: 0.875rem;
    min-height: 0;
  }
}
/* Small phones (≤479px): the copy no longer floats at 50% of a fixed-height stage, where a
   taller headline or larger text spacing (WCAG 1.4.12) ran under the stat cards. The copy sits
   in the flow with a band reserved above and below it; the photos and chips are pinned to those
   bands (rem from the top / bottom), so they move with the copy instead of covering it. */
@media (max-width:479px) {
  .ab_hero_stage {
    height: auto;
  }
  .hero_section.is-about .hero_content {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 88%;
    margin-inline: auto;
    padding-block: 17.5rem 18.5rem;
  }
  .ab_hero_chip.is-1 {
    top: 2.3rem;
  }
  .ab_hero_tile.is-2 {
    top: 1.2rem;
  }
  .ab_hero_tile.is-1 {
    top: 9.9rem;
  }
  /* the chips next to the copy grow away from it if their text gets taller */
  .ab_hero_chip.is-2 {
    top: auto;
    bottom: calc(100% - 16rem);
  }
  .ab_hero_chip.is-3 {
    top: calc(100% - 17.4rem);
    bottom: auto;
  }
  .ab_hero_tile.is-3 {
    top: auto;
    bottom: 7.4rem;
  }
  .ab_hero_tile.is-4 {
    top: auto;
    bottom: 1.7rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Services  (/services)
   Page-variant combo: is-services (keeps this page's overrides off the shared classes elsewhere)
   ════════════════════════════════════════════════════════════════════════════ */

.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.hero_section.is-compact {
  height: 37.5rem;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  overflow: hidden;
}
.hero_bg_wrap.is-services::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/assets/patterns/dither-noise.png");
  background-repeat: repeat;
  background-size: 8rem 8rem;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.hero_section.is-compact .hero_bg_wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--_gradient---hero-compact-sky);
}
/* The sky used to meet the page grey at the hero's bottom edge with a visible knee.
   An eased mask fades the whole background (sky, dots, Three.js element) into the
   section's own grey over the lower ~45%, so the handover has no seam. */
.hero_section.is-compact .hero_bg_wrap {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0.94) 63%, rgba(0,0,0,0.82) 70%, rgba(0,0,0,0.64) 77%, rgba(0,0,0,0.44) 83%, rgba(0,0,0,0.26) 89%, rgba(0,0,0,0.12) 94%, rgba(0,0,0,0.03) 98%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0.94) 63%, rgba(0,0,0,0.82) 70%, rgba(0,0,0,0.64) 77%, rgba(0,0,0,0.44) 83%, rgba(0,0,0,0.26) 89%, rgba(0,0,0,0.12) 94%, rgba(0,0,0,0.03) 98%, transparent 100%);
}
.hero_section.is-compact .hero_bg_video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 12%, rgb(0,0,0) 52%, rgba(0,0,0,0.92) 64%, rgba(0,0,0,0.72) 74%, rgba(0,0,0,0.45) 83%, rgba(0,0,0,0.2) 91%, rgba(0,0,0,0.06) 96%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 12%, rgb(0,0,0) 52%, rgba(0,0,0,0.92) 64%, rgba(0,0,0,0.72) 74%, rgba(0,0,0,0.45) 83%, rgba(0,0,0,0.2) 91%, rgba(0,0,0,0.06) 96%, rgba(0,0,0,0) 100%);
}
.hero_section.is-compact .hero_bg_radial {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: none;
}
.hero_section.is-compact .hero_scrim {
  display: block;
  position: absolute;
  left: -30%;
  top: -22%;
  width: 160%;
  height: 124%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: blur(2.25rem);
  background-image: var(--_gradient---hero-compact-scrim);
}
.hero_section.is-compact .hero_contain {
  width: 100%;
  padding-top: 11.625rem;
  padding-bottom: 4rem;
}
.hero_section.is-compact .hero_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  max-width: none;
  width: 100%;
}
.hero_section.is-compact .hero_title {
  margin: 0;
  max-width: 36.0625rem;
  font-size: var(--_typography---font-size--title-1);
  line-height: 3.3563rem;
  color: var(--_color---text--inverted--1);
  text-wrap: balance;
}
.hero_section.is-compact .hero_text {
  margin: 0;
  max-width: 30rem;
  font-size: var(--_typography---font-size--lead);
  line-height: 1.75rem;
  color: var(--_color---text--inverted--1);
}
@media (max-width:991px) {
  .hero_section.is-compact {
    height: auto;
  }
  .hero_section.is-compact .hero_contain {
    padding-top: 9rem;
    padding-bottom: 3.5rem;
  }
  .hero_section.is-compact .hero_title {
    font-size: var(--_typography---font-size--title-1);
    line-height: 2.625rem;
  }
}
.marquee_section.is-services {
  height: 8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sv_split {
  padding-block: var(--_spacing---section--section-lg);
}
.sv_split_halves {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
}
.sv_rail {
  flex: 0 0 18.75rem;
  max-width: 18.75rem;
  position: sticky;
  top: 7.5rem;
  display: flex;
  flex-direction: column;
}
.sv_rail_item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6875rem 0;
  border-bottom: 1px solid var(--_color---outline--subtle);
  color: var(--_color---text--default--4);
  transition: color 0.2s cubic-bezier(0.4,0,0.2,1);
}
.sv_rail_item:hover {
  color: var(--_color---text--default--2);
}
.sv_rail_item.is-active {
  color: var(--_color---text--default--1);
}
.sv_rail_dot {
  width: 0.3125rem;
  height: 0.3125rem;
  flex: none;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4,0,0.2,1);
}
.sv_rail_item.is-active .sv_rail_dot {
  opacity: 1;
}
.sv_rail_label {
  color: inherit;
  letter-spacing: 0.04em;
  line-height: 1.35;
}
.sv_split_main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9rem;
}
.sv_group {
  scroll-margin-top: 7.5rem;
}
.services_grid.is-services {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-5);
}
.services_row.is-services {
  display: grid;
  gap: var(--_spacing---static--spacing-5);
}
.services_row.is-services.is-pair {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.services_row.is-services.is-full {
  grid-template-columns: minmax(0,1fr);
}
.services_row.is-services.is-pair .service_tile_wrap {
  min-height: 19.5rem;
}
.services_row.is-services.is-full .service_tile_wrap {
  min-height: 20rem;
}
/* Services overview: the checklist runs into the tile's pale bottom-right corner (white text was
   3.95:1 at tablet width). Same gradient, the last stop deepened so the corner itself is 5:1. */
.service_tile_wrap-blue.is-services {
  background: linear-gradient(130.796deg, rgb(7, 18, 49) 0%, rgb(2, 67, 169) 50%, rgb(72, 110, 176) 100%);
}
.service_tile_wrap-navy {
  background-color: var(--_color---bg--inverted--1);
}
.service_tile_wrap-sky {
  background-color: var(--base--blue-43);
}
.service_tile_wrap-palesky {
  background-color: var(--base--sky-89);
}
/* Tile artwork: a real image element behind the tile's copy (swappable in Webflow), cropped
   to the tile and anchored bottom-right so it keeps its proportions. */
.service_tile_art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right bottom;
  pointer-events: none;
}
.sv_head {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  margin-bottom: var(--_spacing---static--spacing-8);
}
.sv_title {
  margin: 0;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}
.sv_tile_list {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-2);
  margin-top: auto;
}
.sv_tile_item {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-3);
}
.sv_tile_check {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--_color---text--brand--1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv_tile_check.is-on-dark {
  color: var(--_color---text--inverted--1);
}
.sv_tile_text {
  color: var(--_color---text--default--3);
}
.sv_tile_text.is-on-dark {
  color: var(--_color---text--inverted--1);
}
.service_tile_wrap.is-services {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--_spacing---static--spacing-8);
}
.service_tile_wrap.is-services .service_tile_head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--_spacing---static--spacing-4);
}
@media (max-width:991px) {
  .sv_split_halves {
    flex-direction: column;
    gap: var(--_spacing---static--spacing-10);
  }
  .sv_rail {
    position: static;
    top: auto;
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
  }
  .sv_split_main {
    gap: 6rem;
    width: 100%;
  }
}
@media (max-width:767px) {
  .services_row.is-services.is-pair {
    grid-template-columns: minmax(0,1fr);
  }
  .services_row.is-services.is-pair .service_tile_wrap,
  .services_row.is-services.is-full .service_tile_wrap {
    min-height: 0;
  }
}
@media (prefers-reduced-motion:reduce) {
  .sv_rail_item,
  .sv_rail_dot {
    transition: none;
  }
}
.testimonials_section.is-services {
  position: relative;
  overflow: hidden;
}
.home_testi_pattern {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}
.testimonials_section.is-services > :not(.home_testi_pattern):not(.testimonials_light_zone) {
  position: relative;
  z-index: 1;
}
.service_tile_wrap.is-services {
  position: relative;
  overflow: hidden;
}
.sv_tile_dots {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 1;
  filter: brightness(3.2) saturate(1.2);
  transform: scale(1.8);
  transform-origin: center;
  border-radius: inherit;
}
.service_tile_wrap.is-services > .service_tile_head,
.service_tile_wrap.is-services > .sv_tile_list {
  position: relative;
  z-index: 1;
}
/* Narrow tiles: the art keeps its proportions at 72% of the tile height, bottom-right, behind the list. */
@media (max-width:991px) {
  .service_tile_art {
    inset: auto 0 0 auto;
    width: auto;
    height: 72%;
    object-fit: contain;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Service page (template)  (/service-subpage-template)
   Page-variant combo: is-service (keeps this page's overrides off the shared classes elsewhere)
   ════════════════════════════════════════════════════════════════════════════ */

.pub_h2 {
  margin: 0;
  font-size: var(--_typography---font-size--title-2);
  line-height: 2.715rem;
  font-weight: 500;
  color: var(--_color---text--default--1);
  text-wrap: balance;
}
.pub_h2.is-inverted {
  color: var(--_color---text--inverted--1);
}
.pub_head {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  align-items: flex-start;
}
.pub_head.is-center {
  align-items: center;
  text-align: center;
  gap: 0.9375rem;
}
/* Hero */
.pub_hero {
  position: relative;
  box-sizing: border-box;
  min-height: 43.875rem;
  overflow: hidden;
  padding: 10rem 0 5rem;
  background-color: var(--_color---bg--default--bg);
}
.pub_hero_bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--_gradient---hero-compact-sky);
  pointer-events: none;
}
.pub_hero_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/assets/patterns/dither-noise.png");
  background-repeat: repeat;
  background-size: 8rem 8rem;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.pub_hero_radial {
  display: none;
}
.pub_hero_scrim {
  position: absolute;
  left: -12%;
  top: 10%;
  width: 72%;
  height: 72%;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: blur(2.25rem);
  background-image: var(--_gradient---pub-hero-scrim);
}
.pub_hero_row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5rem;
}
.pub_hero_copy.is-service {
  flex: 1 1 0;
  min-width: 0;
  min-height: 21.5625rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}
.pub_hero_title {
  margin: 0;
  font-size: var(--_typography---font-size--title-1);
  line-height: 3.6688rem;
  font-weight: 500;
  color: var(--_color---text--inverted--1);
}
.pub_hero_text {
  margin: 0;
  max-width: 30rem;
  font-size: var(--_typography---font-size--lead);
  line-height: 1.75rem;
  color: var(--_color---text--inverted--1);
}
.pub_hero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.pub_hero_img {
  flex: 0 0 38.5rem;
  width: 38.5rem;
  height: 28.875rem;
  border-radius: 0.5rem;
  object-fit: cover;
  display: block;
}
/* Values */
.pub_values {
  padding: 6.25rem 0;
}
.pub_values_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.pub_value {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  padding: 1.97rem;
  border-radius: 0.375rem;
  background-color: var(--_color---bg--default--1);
}
.pub_value_icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pub_value_icon_img {
  width: 2.7088rem;
  height: 2.7088rem;
  object-fit: contain;
}
.pub_value_copy {
  display: flex;
  flex-direction: column;
  gap: 0.425rem;
}
.pub_value_title {
  margin: 0;
  font-size: var(--_typography---font-size--title-4);
  line-height: 1.8961rem;
  font-weight: 500;
  color: var(--_color---text--default--2);
}
.pub_value_text {
  margin: 0;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.576rem;
  color: var(--_color---text--default--3);
}
/* Challenges */
.pub_chal {
  padding: 5rem 0;
}
.pub_chal_row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 37.4375rem);
  gap: 5rem;
  align-items: start;
}
.pub_chal_head {
  max-width: 32rem;
}
.pub_chal_row:has(.pub_chal_item:nth-child(5)) .pub_chal_head {
  position: sticky;
  top: 8rem;
}
@media (max-width:1100px) { /* kept: this layout needs to stack before 1100px (see HANDOFF §5) */
  .pub_chal_head {
    position: static;
  }
}
.pub_chal_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pub_chal_item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.pub_chal_item + .pub_chal_item {
  padding-top: 1rem;
  border-top: 1px solid var(--_color---outline--hairline);
}
.pub_dot {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: 0.75rem;
  border-radius: 0.1875rem;
  background-color: var(--_color---bg--accent);
}
.pub_chal_copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 29.55rem;
}
/* How we help */
.pub_help {
  padding: 6.17rem 0;
}
.pub_help_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
}
.pub_help_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  width: 100%;
}
.pub_help_card.is-service {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7.5rem;
  min-height: 22.75rem;
  padding: 2rem;
  border-radius: 0.5rem;
  overflow: hidden;
  color: var(--_color---text--inverted--1);
  transition: scale 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pub_help_card.is-service:hover {
  scale: 1.025;
  color: var(--_color---text--inverted--1);
}
.pub_help_card.is-service.is-blue {
  background-color: var(--base--blue-43);
}
.pub_help_card.is-service.is-pale {
  background-color: var(--base--sky-89);
  color: var(--_color---text--default--2);
}
.pub_help_card.is-service.is-white {
  background-color: var(--_color---bg--default--1);
  color: var(--_color---text--default--2);
}
.pub_help_card.is-service.is-pale:hover,
.pub_help_card.is-service.is-white:hover {
  color: var(--_color---text--default--2);
}
.pub_help_card.is-service.is-navy {
  background: linear-gradient(180deg, var(--base--navy-14) 0%, var(--base--blue-41) 100%);
}
.pub_help_copy {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}
.pub_help_title {
  margin: 0;
  color: inherit;
  font-size: var(--_typography---font-size--title-4);
}
.pub_help_text {
  margin: 0;
  color: inherit;
  opacity: 0.9;
}
.pub_help_card.is-service.is-pale .pub_help_text,
.pub_help_card.is-service.is-white .pub_help_text {
  opacity: 1;
  color: var(--_color---text--default--3);
}
.pub_help_more {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--_typography---font-size--label-1);
  line-height: 1.4062rem;
  font-weight: 500;
}
.pub_help_label {
  position: relative;
}
.pub_help_label::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.svc_res_card.is-service:hover .pub_help_label::before,
.svc_res_card.is-service:focus-visible .pub_help_label::before,
.pub_help_card.is-service:hover .pub_help_label::before,
.pub_help_card.is-service:focus-visible .pub_help_label::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.pub_help_arrow {
  width: 0.75rem;
  height: 0.75rem;
  transition: translate 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pub_help_card.is-service.is-blue .pub_help_text {
  opacity: 1; /* white on the blue card: 4.9:1 (0.9 opacity fell to 4.25:1) */
}
.pub_help_card.is-service.is-blue .pub_help_arrow,
.pub_help_card.is-service.is-navy .pub_help_arrow {
  filter: brightness(0) invert(1);
}
.svc_res_card.is-service:hover .pub_help_arrow,
.pub_help_card.is-service:hover .pub_help_arrow {
  translate: 0.125rem -0.125rem;
}
/* Who we support */
.pub_who {
  position: relative;
  overflow: hidden;
  padding: 6.25rem 0;
  background-color: var(--base--navy-09);
}
.pub_who_pattern {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
  pointer-events: none;
}
.pub_who_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.pub_who_head {
  max-width: 30rem;
}
.pub_who_row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5rem;
  align-items: stretch;
}
.pub_who_list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--base--grey-73-a32);
  border-bottom: 1px solid var(--base--grey-73-a32);
}
.pub_who_item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--base--grey-73-a32);
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.pub_who_item:first-child {
  border-top: 0;
}
.pub_who_item:focus-visible {
  outline: 0.125rem solid var(--_color---focus--ring-inverted);
  outline-offset: 0.25rem;
  border-radius: 0.125rem;
}
.pub_who_name {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--_typography---font-size--title-5);
  line-height: 1.5rem;
  font-weight: 500;
  color: var(--base--white-100-a70);
  transition: color 0.3s ease;
}
.pub_who_item:hover .pub_who_name,
.pub_who_item[data-state="active"] .pub_who_name {
  color: var(--_color---text--inverted--1);
}
.pub_who_body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pub_who_body[data-state="active"] {
  grid-template-rows: 1fr;
}
.pub_who_body_inner {
  overflow: hidden;
  min-height: 0;
}
.pub_who_text {
  display: block;
  padding-top: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pub_who_body[data-state="active"] .pub_who_text {
  opacity: 1;
  transition-delay: 0.1s;
}
.pub_who_media {
  position: relative;
  min-height: 31rem;
  border-radius: 1rem;
  overflow: hidden;
  background-color: var(--base--white-100-a06);
}
.pub_who_pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.pub_who_pane[data-state="active"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0s;
}
.pub_who_slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion:reduce) {
  .pub_who_body,
  .pub_who_text,
  .pub_who_pane {
    transition: none;
  }
}
.pub_who_icon {
  width: 1.5rem;
  height: 1.5rem;
  overflow: hidden;
  color: var(--_color---text--inverted--1);
  flex-shrink: 0;
  fill: currentColor;
}
.pub_who_text {
  margin: 0;
  max-width: 25rem;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
  color: var(--base--white-100-a75);
}
.pub_who_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 78.8%;
  display: block;
}
/* Proof */
.pub_proof {
  padding: 6.25rem 0;
  background-color: var(--base--grey-100);
}
.pub_proof_inner {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.pub_proof_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.pub_proof_head .pub_head {
  max-width: 30rem;
}
.pub_proof_body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.pub_case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
  min-height: 41rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--base--navy-09);
}
.pub_case_copy {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3.75rem;
}
.pub_case_top {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.pub_case_title {
  margin: 0;
  font-size: var(--_typography---font-size--title-2);
  line-height: 1.2;
  font-weight: 400;
  color: var(--base--sand-050);
}
.pub_person {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pub_person_img {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 0.1rem;
  object-fit: contain;
}
.pub_person_meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pub_person_name {
  font-size: var(--_typography---font-size--title-6);
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: -0.01rem;
  text-transform: uppercase;
  color: var(--_color---text--default--1);
}
.pub_person_role {
  font-size: var(--_typography---font-size--label-2);
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.015rem;
  text-transform: uppercase;
  color: var(--base--grey-44);
}
.pub_case .pub_person_name {
  color: var(--_color---text--inverted--1);
}
.pub_case .pub_person_role {
  color: var(--base--white-100-a75);
}
.pub_case_rule {
  height: 0;
  border-top: 1px dashed var(--base--white-100-a20);
}
.pub_case_stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.875rem;
}
.pub_case_stat {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pub_case_value {
  margin: 0;
  font-size: var(--_typography---font-size--title-1);
  line-height: 3.5rem;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--_color---text--inverted--1);
}
.pub_case_label {
  margin: 0;
  max-width: 16.25rem;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
  color: var(--base--grey-96-a64);
}
.pub_case_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pub_quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.pub_quote {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5rem;
  margin: 0;
  padding: 2rem;
  border-radius: 0.375rem;
  background-color: var(--_color---bg--default--1);
}
.pub_quote_text {
  margin: 0;
  font-size: var(--_typography---font-size--body-1);
  line-height: 1.625rem;
  color: var(--_color---text--default--1);
}
@media (max-width:1100px) { /* kept: this layout needs to stack before 1100px (see HANDOFF §5) */
  .pub_hero_row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
  }
  .pub_hero_copy.is-service {
    flex: none;
    width: 100%;
    min-height: 0;
  }
  .pub_hero_img {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
  }
  .pub_values_grid {
    grid-template-columns: 1fr;
  }
  .pub_chal_row,
  .pub_who_row {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .pub_help_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pub_case {
    grid-template-columns: 1fr;
  }
  .pub_case_img {
    aspect-ratio: 4/3;
    height: auto;
  }
  .pub_quotes {
    grid-template-columns: 1fr;
  }
}
@media (max-width:767px) {
  .pub_hero_title {
    font-size: var(--_typography---font-size--title-1);
    line-height: 2.625rem;
  }
  .pub_help_grid {
    grid-template-columns: 1fr;
  }
  .pub_help_card.is-service {
    min-height: 0;
    gap: 3rem;
  }
  .pub_case_copy {
    padding: 2rem;
  }
  .pub_case_title {
    font-size: var(--_typography---font-size--title-2);
  }
  .pub_h2 {
    font-size: var(--_typography---font-size--title-2);
    line-height: 2.125rem;
  }
}

/* Service template */
.svc_guide_inner.is-service > :first-child,
.svc_guide_inner.is-service > :first-child *,
.pub_hero_copy.is-service > :first-child,
.pub_hero_copy.is-service > :first-child * {
  color: var(--_color---text--inverted--1) !important;
}
.svc_guide_inner.is-service > :first-child [class*="dot"],
.pub_hero_copy.is-service > :first-child [class*="dot"] {
  background-color: var(--_color---bg--default--1) !important;
}
.svc_hero_dots {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: brightness(2.4) saturate(1.2);
  -webkit-mask-image: linear-gradient(180deg, rgb(0,0,0) 0%, rgb(0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgb(0,0,0) 0%, rgb(0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
}
.svc_case {
  position: relative;
  z-index: 2;
  flex: 0 0 21rem;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background-color: var(--base--navy-11-a56); /* 0.25 left the label under AA; 0.56 now it sits over the paler lower hero */
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
  color: var(--_color---text--inverted--1);
  transition: scale 0.45s cubic-bezier(0.16,1,0.3,1),background-color 0.2s;
}
.svc_case:hover {
  color: var(--_color---text--inverted--1);
  scale: 1.025;
  background-color: var(--base--navy-11-a56);
}
.svc_case_kind {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--_typography---font-size--label-2);
  line-height: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
}
.svc_case_dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--_color---bg--accent);
}
.svc_case_title {
  font-size: var(--_typography---font-size--title-5);
  line-height: 1.75rem;
  font-weight: 500;
  text-wrap: pretty;
}
.svc_case_more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--_typography---font-size--label-1);
  line-height: 1.4062rem;
  font-weight: 500;
}
.svc_case_more_icon {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) invert(1);
}
.svc_claim {
  margin: 0;
  max-width: 47.5rem;
  font-size: var(--_typography---font-size--callout);
  line-height: 2.375rem;
  font-weight: 500;
  color: var(--_color---text--default--1);
  text-align: center;
  text-wrap: balance;
}
.svc_checks {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: auto;
}
.svc_check {
  display: grid;
  grid-template-columns: 1rem minmax(0,1fr);
  gap: 0.625rem;
  align-items: start;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.575rem;
}
.svc_check_icon {
  margin-top: 0.3125rem;
}
.pub_help_card.is-service.is-static:hover {
  scale: 1;
}
.svc_why {
  position: relative;
  overflow: hidden;
  padding: 6.25rem 0;
  background-color: var(--base--navy-09);
}
.svc_why_dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.svc_why_row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 4.84rem;
  align-items: stretch;
}
.svc_why_copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
}
.svc_why_text {
  margin: 0;
  max-width: 30rem;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.576rem;
  color: var(--base--white-100-a75);
  white-space: pre-line;
}
.svc_stats {
  display: flex;
  flex-wrap: wrap;
}
.svc_stat {
  flex: 1 1 0;
  min-width: 8rem;
  padding-right: 1.5rem;
  border-left: 1px solid var(--base--white-100-a20);
  padding-left: 1.5rem;
}
.svc_stat:first-child {
  border-left: 0;
  padding-left: 0;
}
/* ≤767 the stats wrap to two rows; every stat keeps its divider so the rows match. */
@media (max-width:767px) {
  .svc_stat:first-child {
    border-left: 1px solid var(--base--white-100-a20);
    padding-left: 1.5rem;
  }
}
.svc_stat_value {
  margin: 0;
  font-size: var(--_typography---font-size--title-2);
  line-height: 2.715rem;
  font-weight: 500;
  color: var(--_color---text--inverted--1);
}
.svc_stat_label {
  margin: 0.25rem 0 0;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.375rem;
  color: var(--base--white-100-a75);
}
.svc_why_img {
  width: 100%;
  height: 100%;
  min-height: 30rem;
  border-radius: 0.375rem;
  object-fit: cover;
  object-position: 32% 50%;
  display: block;
}
.svc_fit {
  padding: 6.25rem 0;
}
.svc_fit {
  background-color: var(--base--grey-100);
}
.svc_fit_grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 4rem 2.5rem;
  margin-top: 5rem;
}
.svc_fit_item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.svc_fit_item .pub_chal_copy {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 18.75rem;
}
.svc_fit_item .pub_value_title {
  font-family: "Inter Tight",sans-serif;
  font-size: var(--_typography---font-size--title-5);
  line-height: 1.75rem;
  font-weight: 500;
  color: var(--_color---text--default--2);
}
.svc_fit_item_text {
  margin: 0;
  font-size: var(--_typography---font-size--small);
  line-height: 1.375rem;
  color: var(--base--grey-34);
}
.svc_fit_icon {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 0.25rem;
  background-color: var(--base--blue-61);
  color: var(--_color---text--inverted--1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.5625rem;
  fill: currentColor;
}
.svc_process {
  position: relative;
  height: 260vh;
  overflow: clip;
}
.svc_process_pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 42.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.svc_process_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.svc_process_art {
  position: relative;
  width: 100%;
}
/* The road is drawn at 87.5rem but never taller than the pinned panel can
   show: centred at 46%, its bottom edge stays within ~95% of the panel while
   width ≤ 1.48 × panel height (the art is 16:9). Keeps the bottom of the road
   from being cut off on shorter screens. */
.svc_process_bg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(87.5rem, calc(max(100vh, 42.5rem) * 1.48));
  max-width: none;
  translate: -50% -46%;
  pointer-events: none;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,0.35) 8%,#000 20%,#000 80%,rgba(0,0,0,0.35) 92%,transparent 100%);
  mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,0.35) 8%,#000 20%,#000 80%,rgba(0,0,0,0.35) 92%,transparent 100%);
}
.svc_steps {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 32.5rem;
  margin: 0 auto;
  padding-top: 1.5rem;
}
.svc_steps > .svc_step {
  grid-area: 1/1;
  will-change: translate;
}
.svc_steps > .svc_step:nth-child(2) {
  margin-top: 2.75rem;
  rotate: 1.5deg;
}
.svc_steps > .svc_step:nth-child(3) {
  margin-top: 6.25rem;
  rotate: -1.5deg;
}
@media (prefers-reduced-motion: reduce) {
  .svc_process {
    height: auto;
  }
  .svc_process_pin {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 6.25rem 0;
  }
  .svc_steps {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .svc_steps > .svc_step,
  .svc_steps > .svc_step:nth-child(2),
  .svc_steps > .svc_step:nth-child(3) {
    margin-top: 0;
    rotate: none;
    translate: none;
  }
}
.svc_step {
  position: sticky;
  top: 10rem;
  transform-origin: center top;
  will-change: transform;
}
.svc_steps > .svc_step:nth-child(1) {
  scale: 0.955;
}
.svc_steps > .svc_step:nth-child(2) {
  top: 12.5rem;
  scale: 0.97;
  rotate: 1.5deg;
}
.svc_steps > .svc_step:nth-child(3) {
  top: 15rem;
  scale: 0.985;
  rotate: -1.5deg;
}
.svc_steps > .svc_step:nth-child(4) {
  top: 17.5rem;
  rotate: 1deg;
}
.svc_steps > .svc_step:nth-child(5) {
  top: 20rem;
  scale: 1.01;
  rotate: -1deg;
}
.svc_steps > .svc_step:nth-child(6) {
  top: 22.5rem;
  scale: 1.02;
}
.svc_step {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  min-height: 13.125rem;
  align-self: start;
  padding: 1.75rem;
  border-radius: 0.375rem;
  background-color: var(--_color---bg--default--1);
  box-shadow: 0 -1px 0.75rem 0 var(--base--navy-19-a08),0 0 1.25rem 0 var(--base--navy-19-a08);
}
.svc_step_copy {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.svc_step_num {
  margin: 0;
  font-size: var(--_typography---font-size--label-2);
  line-height: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--_color---text--brand--link);
}
.svc_guide {
  position: relative;
  overflow: hidden;
  min-height: 30rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6.25rem 0;
  background: var(--_gradient---cta-dark-sky);
}
.svc_guide_layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
}
.svc_guide_inner.is-service {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}
.svc_guide_text {
  margin: 0;
  max-width: 30rem;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
  color: var(--_color---text--inverted--1);
}
.svc_cred {
  padding: 6.25rem 0;
}
.svc_cred_row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,37.5rem);
  gap: 4.84rem;
  align-items: start;
}
.svc_cred_copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 30rem;
}
.svc_cred_text {
  margin: 0;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.576rem;
  color: var(--_color---text--default--3);
}
.svc_cred_list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 1.5rem 0 0;
  list-style: none;
  border-top: 1px dashed var(--_color---focus--ring-inverted);
}
.svc_cred_item {
  padding-bottom: 1.5rem;
  border-bottom: 1px dashed var(--_color---focus--ring-inverted);
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
  color: var(--_color---text--default--2);
}
.svc_res {
  padding: 6.25rem 0;
}
.svc_res_grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1.25rem;
  margin-top: 3.625rem;
}
.svc_res_card.is-service {
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--_color---bg--default--1);
  color: inherit;
  transition: scale 0.45s cubic-bezier(0.16,1,0.3,1);
}
.svc_res_card.is-service:hover {
  scale: 1.025;
  color: inherit;
}
.svc_res_img {
  display: block;
  width: 100%;
  height: 14.5rem;
  object-fit: cover;
  object-position: center 30%;
}
.svc_res_body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  padding: 2.5rem 2.0625rem 2.25rem;
}
.svc_res_tag {
  margin-bottom: 0.5rem;
  font-size: var(--_typography---font-size--label-2);
  line-height: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--base--blue-37);
}
.svc_res_title {
  margin: 0;
  font-family: "Inter Tight",sans-serif;
  font-size: var(--_typography---font-size--title-5);
  line-height: 1.6875rem;
  font-weight: 500;
  color: var(--_color---text--default--2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.svc_res_text {
  margin: 0 0 1.25rem;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.6875rem;
  color: var(--_color---text--default--3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.svc_res_more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--_typography---font-size--label-1);
  line-height: 1.4062rem;
  font-weight: 500;
  color: var(--_color---text--brand--3);
}
.svc_res_more_icon {
  width: 0.75rem;
  height: 0.75rem;
}
.svc_buy_head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 32.5rem;
}
.svc_buy_row {
  gap: 5.5rem;
}
.svc_buy_col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5rem;
  min-width: 0;
}
.svc_buy_media {
  min-height: 44.375rem;
}
.svc_buy_video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width:991px) {
  .svc_buy_media {
    min-height: 0;
    aspect-ratio: 4/3;
  }
  .svc_buy_col {
    gap: 3rem;
  }
}
.svc_ind {
  padding: 6.25rem 0;
}
.svc_ind_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
.svc_ind_actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.svc_ind_grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1.25rem;
  margin-top: 3.625rem;
}
.svc_ind_card {
  display: grid;
  grid-template-columns: minmax(0,1fr) 7.5rem;
  gap: 1.5rem;
  align-items: center;
  padding: 2rem;
  border-radius: 0.5rem;
  background-color: var(--_color---bg--default--1);
  color: inherit;
  transition: scale 0.45s cubic-bezier(0.16,1,0.3,1);
}
.svc_ind_card:hover {
  scale: 1.025;
  color: inherit;
}
.svc_ind_img {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 0.375rem;
  object-fit: cover;
}
.svc_contact {
  position: relative;
  overflow: hidden;
  padding: 6.25rem 0;
}
/* Page-variant combo: is-page — the Let's Talk section used as a whole page (Newsletter), cleared below the fixed nav. */
.svc_contact.is-page {
  padding-top: 11.625rem;
}
/* Grouped input (newsletter consent): a fieldset whose legend reads like a field label. */
.contact_fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.contact_fieldset_legend {
  padding: 0;
  margin-bottom: 0.75rem;
}
.contact_field_req {
  margin-left: 0.125rem;
  color: var(--_color---info--error);
}
@media (max-width:767px) {
  .svc_contact.is-page {
    padding-top: 9rem;
    padding-bottom: var(--_spacing---section--section-lg);
  }
}
.svc_contact_stage {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
.svc_contact_lines {
  position: absolute;
  left: 50%;
  top: -23.0625rem;
  width: 90rem;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
.svc_contact_card {
  position: relative;
  z-index: 1;
}
.svc_contact_fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16.25rem;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--base--grey-95-a00) 0%, var(--base--grey-95-a55) 40%, var(--base--grey-95-a90) 72%, var(--_color---bg--default--bg) 100%);
}
.svc_contact_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.svc_contact_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  max-width: 35rem;
}
.svc_contact_title {
  margin: 0;
  font-size: var(--_typography---font-size--title-1);
  line-height: 3.6688rem;
  font-weight: 500;
  color: var(--_color---text--default--1);
}
.svc_form {
  box-sizing: border-box;
  width: 100%;
  max-width: 40rem;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1.5rem 1.25rem;
  padding: 2.5rem;
  border-radius: 0.5rem;
  background-color: var(--_color---bg--default--1);
}
.svc_field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.svc_field.is-full {
  grid-column: 1 / -1;
}
.svc_label {
  font-size: var(--_typography---font-size--label-2);
  line-height: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--_color---text--default--2);
}
.svc_input {
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 1px var(--base--grey-10-a08);
  background-color: var(--_color---bg--default--bg);
  font: inherit;
  font-size: var(--_typography---font-size--body-2);
  color: var(--_color---text--default--2);
}
.svc_input:hover {
  box-shadow: inset 0 0 0 1px var(--_color---outline--subtle);
}
.svc_input:focus-visible {
  outline: 0.125rem solid var(--_color---focus--ring);
  outline-offset: 0.125rem;
}
textarea.svc_input {
  min-height: 7.5rem;
  resize: vertical;
}
.svc_consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--_typography---font-size--small);
  line-height: 1.25rem;
  color: var(--_color---text--default--3);
}
.svc_form_foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.svc_form_note {
  margin: 0;
  font-size: var(--_typography---font-size--label-2);
  line-height: 1.125rem;
  color: var(--_color---text--default--3);
}
@media (max-width:1100px) { /* kept: this layout needs to stack before 1100px (see HANDOFF §5) */
  .svc_why_row,
  .svc_cred_row {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .svc_fit_grid,
  .svc_res_grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .svc_steps {
    max-width: 100%;
  }
  .svc_case {
    flex: none;
    width: fit-content;
    max-width: min(21rem, 100%);
    align-self: flex-end;
    margin-top: auto;
  }
}
@media (max-width:767px) {
  .svc_fit_grid,
  .svc_res_grid,
  .svc_ind_grid,
  .svc_form {
    grid-template-columns: 1fr;
  }
  .svc_contact_title {
    font-size: var(--_typography---font-size--title-1);
    line-height: 2.625rem;
  }
  .svc_claim {
    font-size: var(--_typography---font-size--callout);
    line-height: 1.875rem;
  }
}
.contact_form_note {
  font-weight: 400;
}
.contact_checkbox_label {
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
}
.contact_field_input,
.contact_field_input::placeholder {
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
}
.contact_form_card {
  box-sizing: border-box;
  padding: 2rem;
  border-radius: 0.5rem;
  background-color: var(--_color---bg--default--1);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact_form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact_form_row.is-service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
.contact_field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact_field_label {
  line-height: 1rem;
  font-size: var(--_typography---font-size--label-2);
  letter-spacing: 1px;
  color: var(--_color---text--default--1);
}
.contact_field_input {
  box-sizing: border-box;
  width: 100%;
  height: 3rem;
  padding: 0.75rem 1rem;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--base--grey-10-a08);
  border-radius: 0.5rem;
  background-color: var(--_color---bg--default--1);
  color: var(--_color---text--default--2);
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact_field_input::placeholder {
  color: var(--base--grey-12-a64);
}
.contact_field_input:hover {
  box-shadow: inset 0 0 0 1px var(--_color---outline--subtle);
}
.contact_field_input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 0.125rem var(--_color---focus--ring);
}
.contact_field_select {
  appearance: none;
  color: var(--base--grey-12-a64);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20d%3D%22M1%201.5L6%206.5L11%201.5%22%20stroke%3D%22%238C8C8C%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right var(--_spacing---static--spacing-4) center;
  background-size: 0.75rem;
  cursor: pointer;
}
.contact_field_textarea {
  height: 10rem;
  resize: none;
  line-height: 1.5rem;
}
.contact_checkbox_row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  color: var(--_color---text--default--3);
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
}
.contact_checkbox {
  appearance: none;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--base--grey-10-a08);
  border-radius: 0.5rem;
  background-color: var(--_color---bg--default--1);
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact_checkbox:checked {
  background-color: var(--_color---interactive--primary--idle);
  border-color: var(--_color---interactive--primary--idle);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3%208.5L6.5%2012L13%204.5%22%20stroke%3D%22white%22%20stroke-width%3D%221.75%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem;
}
.contact_form_footer.is-service .button_main_wrap {
  border: 0;
  appearance: none;
  cursor: pointer;
}
.contact_form_footer.is-service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.contact_form_note {
  margin: 0;
  display: flex;
  flex-direction: column;
  max-width: 15.75rem;
  font-size: var(--_typography---font-size--label-2);
  line-height: 1rem;
  color: var(--base--grey-12-a64);
}
.contact_form_note_text {
  margin: 0;
}
.contact_form_note_link {
  color: var(--base--grey-12-a64);
  text-decoration: underline;
}
.contact_form_note_link:hover {
  color: var(--_color---text--brand--link-hover);
}
.svc_contact_card {
  width: 100%;
  max-width: 40rem;
}
@media (max-width:767px) {
  .contact_form_row.is-service {
    grid-template-columns: 1fr;
  }
  .contact_form_footer.is-service {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_spacing---static--spacing-5);
  }
}
.pub_help_grid.svc_sol_grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
@media (max-width:991px) {
  .pub_help_grid.svc_sol_grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .pub_help_grid.svc_sol_grid > :nth-child(3) {
    grid-column: 1 / -1;
  }
}
@media (max-width:767px) {
  .pub_help_grid.svc_sol_grid {
    grid-template-columns: minmax(0,1fr);
  }
}
@media (max-width:991px) {
  .svc_ind_grid {
    grid-template-columns: minmax(0,1fr);
  }
}
@media (max-width:991px) {
  .pub_who_media {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Industries  (/industries)
   Page-variant combo: is-industries (keeps this page's overrides off the shared classes elsewhere)
   ════════════════════════════════════════════════════════════════════════════ */

.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}

/* Hero — centred variant of the compact page hero (Figma: 600px tall) */
.hero_section.is-compact {
  height: 37.5rem;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  overflow: hidden;
}
.hero_bg_wrap.is-industries::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/assets/patterns/dither-noise.png");
  background-repeat: repeat;
  background-size: 8rem 8rem;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.hero_section.is-compact .hero_bg_wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--_gradient---hero-compact-sky);
}
.hero_section.is-compact .hero_bg_radial {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: none;
}
.hero_section.is-compact .hero_scrim {
  display: block;
  position: absolute;
  left: -30%;
  top: -22%;
  width: 160%;
  height: 124%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: blur(2.25rem);
  background-image: var(--_gradient---hero-compact-scrim);
}
.hero_section.is-compact .hero_contain {
  width: 100%;
  padding-top: 11.625rem;
  padding-bottom: 4rem;
}
.hero_section.is-compact .hero_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  max-width: none;
  width: 100%;
}
.hero_section.is-compact .hero_title {
  margin: 0;
  max-width: 36.0625rem;
  font-size: var(--_typography---font-size--title-1);
  line-height: 3.3563rem;
  color: var(--_color---text--inverted--1);
  text-wrap: balance;
}
.hero_section.is-compact .hero_text {
  margin: 0;
  max-width: 30rem;
  font-size: var(--_typography---font-size--lead);
  line-height: 1.75rem;
  color: var(--_color---text--inverted--1);
}
@media (max-width:991px) {
  .hero_section.is-compact {
    height: auto;
  }
  .hero_section.is-compact .hero_contain {
    padding-top: 9rem;
    padding-bottom: 3.5rem;
  }
  .hero_section.is-compact .hero_title {
    font-size: var(--_typography---font-size--title-1);
    line-height: 2.625rem;
  }
}
.marquee_section.is-industries {
  height: 8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* More industries — two-column card grid */
.mi_head {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  margin-bottom: var(--_spacing---static--spacing-12);
}
.mi_title {
  margin: 0;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}
.mi_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--_spacing---gap--gap-md);
}
.mi_card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--_spacing---static--spacing-8);
  box-sizing: border-box;
  min-height: 24rem;
  padding: var(--_spacing---static--spacing-8);
  border-radius: var(--rounding--lg);
  background-color: var(--_color---bg--default--1);
  color: inherit;
  transform-origin: center;
  transition: scale 0.45s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s;
}
.mi_card:hover {
  color: inherit;
  scale: 1.025;
  z-index: 1;
}
.mi_card:active {
  scale: 1.01;
}
@media (prefers-reduced-motion:reduce) {
  .mi_card {
    transition: none;
  }
}
.mi_card_head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--_spacing---static--spacing-6);
}
.mi_card_copy {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  flex: 1 1 auto;
  min-width: 0;
}
.mi_card_title {
  margin: 0;
  color: var(--_color---text--default--2);
}
.mi_card_text {
  margin: 0;
  color: var(--_color---text--default--3);
}
.mi_card_arrow {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--rounding--md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: translate 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.mi_card_arrow_img {
  width: 0.75rem;
  height: 0.75rem;
  display: block;
}
.mi_card:hover .mi_card_arrow {
  translate: 0.125rem -0.125rem;
}
.mi_card_body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--_spacing---static--spacing-6);
}
.mi_card_list {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-2);
  flex: 1 1 auto;
  min-width: 0;
}
.mi_card_img {
  width: 11.25rem;
  height: 11.25rem;
  flex-shrink: 0;
  border-radius: var(--rounding--lg);
  object-fit: cover;
  display: block;
}
@media (max-width:991px) {
  .mi_grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .mi_card {
    min-height: 0;
  }

}
.hero_section.is-compact .hero_bg_video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 12%, rgb(0,0,0) 52%, rgba(0,0,0,0.92) 64%, rgba(0,0,0,0.72) 74%, rgba(0,0,0,0.45) 83%, rgba(0,0,0,0.2) 91%, rgba(0,0,0,0.06) 96%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 12%, rgb(0,0,0) 52%, rgba(0,0,0,0.92) 64%, rgba(0,0,0,0.72) 74%, rgba(0,0,0,0.45) 83%, rgba(0,0,0,0.2) 91%, rgba(0,0,0,0.06) 96%, rgba(0,0,0,0) 100%);
}
@media (max-width:767px) {
  .mi_card_body {
    flex-direction: column;
    align-items: stretch;
  }
  .mi_card_img {
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Industry page (template)  (/industry-template)
   Page-variant combo: is-industry (keeps this page's overrides off the shared classes elsewhere)
   ════════════════════════════════════════════════════════════════════════════ */

.pub_h2.is-industry {
  margin: 0;
  font-size: var(--_typography---font-size--title-2);
  line-height: 2.715rem;
  font-weight: 500;
  color: var(--_color---text--default--1);
  text-wrap: balance;
}
.pub_h2.is-industry.is-inverted {
  color: var(--_color---text--inverted--1);
}
.pub_head.is-industry {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  align-items: flex-start;
}
.pub_head.is-industry.is-center {
  align-items: center;
  text-align: center;
  gap: 0.9375rem;
}
/* Hero */
.pub_hero {
  position: relative;
  box-sizing: border-box;
  min-height: 43.875rem;
  overflow: hidden;
  padding: 10rem 0 5rem;
  background-color: var(--_color---bg--default--bg);
}
.pub_hero_bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--_gradient---hero-compact-sky);
  pointer-events: none;
}
.pub_hero_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/assets/patterns/dither-noise.png");
  background-repeat: repeat;
  background-size: 8rem 8rem;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.pub_hero_radial {
  display: none;
}
.pub_hero_scrim {
  position: absolute;
  left: -12%;
  top: 10%;
  width: 72%;
  height: 72%;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: blur(2.25rem);
  background-image: var(--_gradient---pub-hero-scrim);
}
.pub_hero_row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5rem;
}
.pub_hero_copy {
  flex: 1 1 0;
  min-width: 0;
  min-height: 21.5625rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}
.pub_hero_title {
  margin: 0;
  font-size: var(--_typography---font-size--title-1);
  line-height: 3.6688rem;
  font-weight: 500;
  color: var(--_color---text--inverted--1);
}
.pub_hero_text {
  margin: 0;
  max-width: 30rem;
  font-size: var(--_typography---font-size--lead);
  line-height: 1.75rem;
  color: var(--_color---text--inverted--1);
}
.pub_hero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.pub_hero_img {
  flex: 0 0 38.5rem;
  width: 38.5rem;
  height: 28.875rem;
  border-radius: 0.5rem;
  object-fit: cover;
  display: block;
}
/* Values */
.pub_values {
  padding: 6.25rem 0;
}
.pub_values_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.pub_value {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  padding: 1.97rem;
  border-radius: 0.375rem;
  background-color: var(--_color---bg--default--1);
}
.pub_value_icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pub_value_icon_img {
  width: 2.7088rem;
  height: 2.7088rem;
  object-fit: contain;
}
.pub_value_copy {
  display: flex;
  flex-direction: column;
  gap: 0.425rem;
}
.pub_value_title.is-industry {
  margin: 0;
  font-size: var(--_typography---font-size--title-4);
  line-height: 1.8961rem;
  font-weight: 500;
  color: var(--_color---text--default--2);
}
.pub_value_text.is-industry {
  margin: 0;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.576rem;
  color: var(--_color---text--default--3);
}
/* Challenges */
.pub_chal {
  padding: 5rem 0;
}
.pub_chal_row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 37.4375rem);
  gap: 5rem;
  align-items: start;
}
.pub_chal_head {
  max-width: 32rem;
}
.pub_chal_row:has(.pub_chal_item:nth-child(5)) .pub_chal_head {
  position: sticky;
  top: 8rem;
}
@media (max-width:1100px) { /* kept: this layout needs to stack before 1100px (see HANDOFF §5) */
  .pub_chal_head {
    position: static;
  }
}
.pub_chal_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pub_chal_item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.pub_chal_item + .pub_chal_item {
  padding-top: 1rem;
  border-top: 1px solid var(--_color---outline--hairline);
}
.pub_dot {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: 0.75rem;
  border-radius: 0.1875rem;
  background-color: var(--_color---bg--accent);
}
.pub_chal_copy.is-industry {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 29.55rem;
}
/* How we help */
.pub_help {
  padding: 6.17rem 0;
}
.pub_help_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
}
.pub_help_grid.is-industry {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  width: 100%;
}
.pub_help_card.is-industry {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7.5rem;
  min-height: 22.75rem;
  padding: 2rem;
  border-radius: 0.5rem;
  overflow: hidden;
  color: var(--_color---text--inverted--1);
  transition: scale 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pub_help_card.is-industry:hover {
  scale: 1.025;
  color: var(--_color---text--inverted--1);
}
.pub_help_card.is-industry.is-blue {
  background-color: var(--base--blue-43);
}
.pub_help_card.is-industry.is-pale {
  background-color: var(--base--sky-88);
  color: var(--_color---text--default--2);
}
.pub_help_card.is-industry.is-white {
  background-color: var(--_color---bg--default--1);
  color: var(--_color---text--default--2);
}
.pub_help_card.is-industry.is-pale:hover,
.pub_help_card.is-industry.is-white:hover {
  color: var(--_color---text--default--2);
}
.pub_help_card.is-industry.is-navy {
  background: linear-gradient(180deg, var(--base--navy-14) 0%, var(--base--blue-41) 100%);
}
.pub_help_copy {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}
.pub_help_title {
  margin: 0;
  color: inherit;
  font-size: var(--_typography---font-size--title-4);
}
.pub_help_text.is-industry {
  margin: 0;
  color: inherit;
  opacity: 0.9;
}
.pub_help_card.is-industry.is-pale .pub_help_text,
.pub_help_card.is-industry.is-white .pub_help_text {
  opacity: 1;
  color: var(--_color---text--default--3);
}
.pub_help_more {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--_typography---font-size--label-1);
  line-height: 1.4062rem;
  font-weight: 500;
}
.pub_help_label {
  position: relative;
}
.pub_help_label::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.pub_help_card.is-industry:hover .pub_help_label::before,
.pub_help_card.is-industry:focus-visible .pub_help_label::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.pub_help_arrow {
  width: 0.75rem;
  height: 0.75rem;
  transition: translate 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pub_help_card.is-industry.is-blue .pub_help_text {
  opacity: 1; /* white on the blue card: 4.9:1 (0.9 opacity fell to 4.25:1) */
}
.pub_help_card.is-industry.is-blue .pub_help_arrow,
.pub_help_card.is-industry.is-navy .pub_help_arrow {
  filter: brightness(0) invert(1);
}
.pub_help_card.is-industry:hover .pub_help_arrow {
  translate: 0.125rem -0.125rem;
}
/* Who we support */
.pub_who {
  position: relative;
  overflow: hidden;
  padding: 6.25rem 0;
  background-color: var(--base--navy-09);
}
.pub_who_pattern {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
  pointer-events: none;
}
.pub_who_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.pub_who_head {
  max-width: 30rem;
}
.pub_who_row.is-industry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5rem;
  align-items: stretch;
}
.pub_who_list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--base--grey-73-a32);
  border-bottom: 1px solid var(--base--grey-73-a32);
}
.pub_who_item.is-industry {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--base--grey-73-a32);
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.pub_who_item.is-industry:first-child {
  border-top: 0;
}
.pub_who_item.is-industry:focus-visible {
  outline: 0.125rem solid var(--_color---focus--ring-inverted);
  outline-offset: 0.25rem;
  border-radius: 0.125rem;
}
.pub_who_name {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--_typography---font-size--title-5);
  line-height: 1.5rem;
  font-weight: 500;
  color: var(--base--white-100-a70);
  transition: color 0.3s ease;
}
.pub_who_item.is-industry:hover .pub_who_name,
.pub_who_item.is-industry[data-state="active"] .pub_who_name {
  color: var(--_color---text--inverted--1);
}
.pub_who_body.is-industry {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pub_who_body.is-industry[data-state="active"] {
  grid-template-rows: 1fr;
}
.pub_who_body_inner {
  overflow: hidden;
  min-height: 0;
}
.pub_who_text.is-industry {
  display: block;
  padding-top: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pub_who_body.is-industry[data-state="active"] .pub_who_text {
  opacity: 1;
  transition-delay: 0.1s;
}
.pub_who_media.is-industry {
  position: relative;
  min-height: 31rem;
  border-radius: 1rem;
  overflow: hidden;
  background-color: var(--base--white-100-a06);
}
.pub_who_pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.pub_who_pane[data-state="active"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0s;
}
.pub_who_slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion:reduce) {
  .pub_who_body.is-industry,
  .pub_who_text.is-industry,
  .pub_who_pane {
    transition: none;
  }
}
.pub_who_icon {
  width: 1.5rem;
  height: 1.5rem;
  overflow: hidden;
  color: var(--_color---text--inverted--1);
  flex-shrink: 0;
  fill: currentColor;
}
.pub_who_text.is-industry {
  margin: 0;
  max-width: 25rem;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
  color: var(--base--white-100-a75);
}
.pub_who_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 78.8%;
  display: block;
}
/* Proof */
.pub_proof {
  padding: 6.25rem 0;
  background-color: var(--base--grey-100);
}
.pub_proof_inner {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.pub_proof_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.pub_proof_head .pub_head {
  max-width: 30rem;
}
.pub_proof_body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.pub_case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
  min-height: 41rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--base--navy-09);
}
.pub_case_copy {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3.75rem;
}
.pub_case_top {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.pub_case_title {
  margin: 0;
  font-size: var(--_typography---font-size--title-2);
  line-height: 1.2;
  font-weight: 400;
  color: var(--base--sand-050);
}
.pub_person {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pub_person_img {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 0.1rem;
  object-fit: contain;
}
.pub_person_meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pub_person_name.is-industry {
  font-size: var(--_typography---font-size--title-6);
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: -0.01rem;
  text-transform: uppercase;
  color: var(--_color---text--default--1);
}
.pub_person_role.is-industry {
  font-size: var(--_typography---font-size--label-2);
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.015rem;
  text-transform: uppercase;
  color: var(--base--grey-44);
}
.pub_case .pub_person_name {
  color: var(--_color---text--inverted--1);
}
.pub_case .pub_person_role {
  color: var(--base--white-100-a75);
}
.pub_case_rule {
  height: 0;
  border-top: 1px dashed var(--base--white-100-a20);
}
.pub_case_stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.875rem;
}
.pub_case_stat {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pub_case_value {
  margin: 0;
  font-size: var(--_typography---font-size--title-1);
  line-height: 3.5rem;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--_color---text--inverted--1);
}
.pub_case_label {
  margin: 0;
  max-width: 16.25rem;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
  color: var(--base--grey-96-a64);
}
.pub_case_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pub_quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.pub_quote {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5rem;
  margin: 0;
  padding: 2rem;
  border-radius: 0.375rem;
  background-color: var(--_color---bg--default--1);
}
.pub_quote_text {
  margin: 0;
  font-size: var(--_typography---font-size--body-1);
  line-height: 1.625rem;
  color: var(--_color---text--default--1);
}
@media (max-width:1100px) { /* kept: this layout needs to stack before 1100px (see HANDOFF §5) */
  .pub_hero_row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
  }
  .pub_hero_copy {
    flex: none;
    width: 100%;
    min-height: 0;
  }
  .pub_hero_img {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
  }
  .pub_values_grid {
    grid-template-columns: 1fr;
  }
  .pub_chal_row,
  .pub_who_row.is-industry {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .pub_help_grid.is-industry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pub_case {
    grid-template-columns: 1fr;
  }
  .pub_case_img {
    aspect-ratio: 4/3;
    height: auto;
  }
  .pub_quotes {
    grid-template-columns: 1fr;
  }
}
@media (max-width:767px) {
  .pub_hero_title {
    font-size: var(--_typography---font-size--title-1);
    line-height: 2.625rem;
  }
  .pub_help_grid.is-industry {
    grid-template-columns: 1fr;
  }
  .pub_help_card.is-industry {
    min-height: 0;
    gap: 3rem;
  }
  .pub_case_copy {
    padding: 2rem;
  }
  .pub_case_title {
    font-size: var(--_typography---font-size--title-2);
  }
  .pub_h2.is-industry {
    font-size: var(--_typography---font-size--title-2);
    line-height: 2.125rem;
  }
}
.testimonials_section.is-industry {
  position: relative;
  overflow: hidden;
}
.home_testi_pattern {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}
.testimonials_section.is-industry > :not(.home_testi_pattern):not(.testimonials_light_zone) {
  position: relative;
  z-index: 1;
}
.svc_hero_dots {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: brightness(2.4) saturate(1.2);
  -webkit-mask-image: linear-gradient(180deg, rgb(0,0,0) 0%, rgb(0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgb(0,0,0) 0%, rgb(0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
}
@media (max-width:991px) {
  .pub_who_media.is-industry {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Careers  (/careers)
   Page-variant combo: is-careers (keeps this page's overrides off the shared classes elsewhere)
   ════════════════════════════════════════════════════════════════════════════ */

.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.hero_section.is-compact {
  height: 37.5rem;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  overflow: hidden;
}
.hero_bg_wrap.is-careers::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/assets/patterns/dither-noise.png");
  background-repeat: repeat;
  background-size: 8rem 8rem;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.hero_section.is-compact .hero_bg_wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--_gradient---hero-compact-sky);
}
.hero_section.is-compact .hero_bg_radial {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: none;
}
.hero_section.is-compact .hero_scrim {
  display: block;
  position: absolute;
  left: -30%;
  top: -22%;
  width: 160%;
  height: 124%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: blur(2.25rem);
  background-image: var(--_gradient---hero-compact-scrim);
}
.hero_section.is-compact .hero_contain {
  width: 100%;
  padding-top: 11.625rem;
  padding-bottom: 4rem;
}
.hero_section.is-compact .hero_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  max-width: none;
  width: 100%;
}
.hero_section.is-compact .hero_title {
  margin: 0;
  max-width: 36.0625rem;
  font-size: var(--_typography---font-size--title-1);
  line-height: 3.3563rem;
  color: var(--_color---text--inverted--1);
  text-wrap: balance;
}
.hero_section.is-compact .hero_text {
  margin: 0;
  max-width: 30rem;
  font-size: var(--_typography---font-size--lead);
  line-height: 1.75rem;
  color: var(--_color---text--inverted--1);
}
.hero_section.is-compact .button_main_bg.is-glass {
  background-color: var(--_color---interactive--primary--idle);
}
.hero_section.is-compact .button_main_wrap.is-glass:is(:hover, :has(> .clickable_wrap:focus-visible)) .button_main_bg.is-glass {
  background-color: var(--_color---interactive--primary--hover);
}
.hero_section.is-compact .hero_actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--_spacing---static--spacing-4);
  margin-top: var(--_spacing---static--spacing-2);
}
@media (max-width:991px) {
  .hero_section.is-compact {
    height: auto;
  }
  .hero_section.is-compact .hero_contain {
    padding-top: 9rem;
    padding-bottom: 3.5rem;
  }
  .hero_section.is-compact .hero_title {
    font-size: var(--_typography---font-size--title-1);
    line-height: 2.625rem;
  }
}
.life_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--_spacing---gap--gap-3xl);
  align-items: stretch;
}
.life_copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--_spacing---static--spacing-12);
}
.values_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6875rem;
  margin-bottom: 4.84rem;
}
.values_title {
  margin: 0;
  color: var(--_color---text--default--1);
}
.values_list {
  display: flex;
  flex-direction: column;
}
.values_row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--_spacing---gap--gap-3xl);
  align-items: baseline;
  padding-block: var(--_spacing---static--spacing-6);
  border-top: 1px solid var(--_color---outline--hairline);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.values_list:hover .values_row {
  opacity: 0.35;
}
.values_list .values_row:hover {
  opacity: 1;
}
@media (prefers-reduced-motion:reduce) {
  .values_row {
    transition: none;
  }
}
.values_row:last-child {
  border-bottom: 1px solid var(--_color---outline--hairline);
}
.values_name {
  margin: 0;
  color: var(--_color---text--default--2);
}
.values_text {
  margin: 0;
  color: var(--_color---text--default--3);
}
.ben_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_spacing---static--spacing-4);
}
#life.about_section {
  padding-top: var(--_spacing---section--section-lg);
}
.about_text {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-4);
  max-width: 32rem;
  margin-top: var(--_spacing---static--spacing-2);
}
.about_paragraph {
  margin: 0;
  color: var(--_color---text--default--3);
}
#benefits {
  padding-bottom: var(--_spacing---section--section-lg);
}
#benefits .industries_row:nth-child(4) {
  scale: 1;
}
#benefits .industries_row .industry_row_body_inner {
  gap: 0.4375rem;
}
.testimonial_footer.is-careers.is-employee {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--_spacing---static--spacing-4);
}
.testimonial_footer.is-careers.is-employee .testimonial_author {
  align-items: flex-start;
  text-align: left;
}
.emp_portrait.is-careers {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--_color---bg--default--bg);
}
.emp_role.is-careers {
  color: var(--_color---text--default--4);
}
@media (max-width:991px) {
  .life_layout,
  .ben_layout,
  .emp_grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .values_row {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--_spacing---static--spacing-2);
  }
  .ben_intro {
    position: static;
  }
}

.ab_join.is-careers {
  position: relative;
  overflow: hidden;
  background: var(--_gradient---cta-dark-sky);
}
.ab_join_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}
.ab_join_title.is-careers {
  margin: 0;
  max-width: 30rem;
  font-size: var(--_typography---font-size--title-2);
  line-height: 1.12;
  font-weight: 500;
  color: var(--_color---text--inverted--1);
  text-wrap: balance;
}
.ab_join_text {
  margin: 0;
  max-width: 30rem;
  color: var(--_color---text--inverted--1);
}
.ab_join_actions {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--_spacing---static--spacing-4);
}
.ab_join.is-careers {
  background: var(--_gradient---cta-dark-sky);
}
.ab_join_bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ab_join_layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.ab_join.is-careers {
  min-height: 36.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ab_join_title.is-careers {
  font-size: var(--_typography---font-size--title-2);
  line-height: 2.715rem;
}
@media (max-width:991px) {
  .ab_join_title.is-careers {
    font-size: var(--_typography---font-size--title-2);
    line-height: 1.15;
  }
}
.hero_section.is-compact .hero_bg_dots {
  mix-blend-mode: screen;
  filter: brightness(2.4) saturate(1.2);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgb(0,0,0) 0%, rgb(0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgb(0,0,0) 0%, rgb(0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
}
@media (max-width:991px) {
  .about_visual.is-careers {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .about_visual.is-careers .about_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Certifications  (/certifications)
   Page-variant combo: is-certifications (keeps this page's overrides off the shared classes elsewhere)
   ════════════════════════════════════════════════════════════════════════════ */

.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.hero_section.is-compact {
  height: 37.5rem;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  overflow: hidden;
}
.hero_bg_wrap.is-certifications::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/assets/patterns/dither-noise.png");
  background-repeat: repeat;
  background-size: 8rem 8rem;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.hero_section.is-compact .hero_bg_wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--_gradient---hero-compact-sky);
}
.hero_section.is-compact .hero_bg_video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 12%, rgb(0,0,0) 52%, rgba(0,0,0,0.92) 64%, rgba(0,0,0,0.72) 74%, rgba(0,0,0,0.45) 83%, rgba(0,0,0,0.2) 91%, rgba(0,0,0,0.06) 96%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 12%, rgb(0,0,0) 52%, rgba(0,0,0,0.92) 64%, rgba(0,0,0,0.72) 74%, rgba(0,0,0,0.45) 83%, rgba(0,0,0,0.2) 91%, rgba(0,0,0,0.06) 96%, rgba(0,0,0,0) 100%);
}
.hero_section.is-compact .hero_bg_radial {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: none;
}
.hero_section.is-compact .hero_scrim {
  display: block;
  position: absolute;
  left: -30%;
  top: -22%;
  width: 160%;
  height: 124%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: blur(2.25rem);
  background-image: var(--_gradient---hero-compact-scrim);
}
.hero_section.is-compact .hero_contain {
  width: 100%;
  padding-top: 11.625rem;
  padding-bottom: 4rem;
}
.hero_section.is-compact .hero_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  max-width: none;
  width: 100%;
}
.hero_section.is-compact .hero_title {
  margin: 0;
  max-width: 36.0625rem;
  font-size: var(--_typography---font-size--title-1);
  line-height: 3.3563rem;
  color: var(--_color---text--inverted--1);
  text-wrap: balance;
}
.hero_section.is-compact .hero_text {
  margin: 0;
  max-width: 30rem;
  font-size: var(--_typography---font-size--lead);
  line-height: 1.75rem;
  color: var(--_color---text--inverted--1);
}
@media (max-width:991px) {
  .hero_section.is-compact {
    height: auto;
  }
  .hero_section.is-compact .hero_contain {
    padding-top: 9rem;
    padding-bottom: 3.5rem;
  }
  .hero_section.is-compact .hero_title {
    font-size: var(--_typography---font-size--title-1);
    line-height: 2.625rem;
  }
}
.cert_filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--_spacing---static--spacing-2);
  margin-bottom: var(--_spacing---static--spacing-10);
}
.cert_filter {
  box-sizing: border-box;
  border: 0;
  cursor: pointer;
  padding: 0.5625rem 1rem;
  border-radius: var(--rounding--md);
  background-color: transparent;
  font-size: var(--_typography---font-size--small);
  line-height: var(--_typography---line-height--label-1);
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--2);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.cert_filter:hover {
  background-color: var(--_color---interactive--outline--hover);
}
.cert_filter[data-state="active"] {
  background-color: var(--_color---interactive--primary--idle);
  color: var(--_color---interactive--primary--on);
}
.cert_filter:focus-visible {
  outline: 0.125rem solid var(--_color---focus--ring);
  outline-offset: 0.125rem;
}
.cert_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--_spacing---gap--gap-md);
}
.cert_card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--_spacing---static--spacing-8);
  min-height: 10.5rem;
  padding: var(--_spacing---static--spacing-5);
  border-radius: var(--rounding--md);
  background-color: var(--_color---bg--default--1);
}
.cert_card_head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--_spacing---static--spacing-4);
}
.cert_card_name {
  margin: 0;
  font-size: var(--_typography---font-size--title-4);
  line-height: 1.8962rem;
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--2);
  text-wrap: pretty;
}
.cert_logo {
  height: 1.125rem;
  width: auto;
  max-width: 7rem;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.cert_wordmark {
  flex-shrink: 0;
  color: var(--_color---text--default--4);
  font-size: var(--_typography---font-size--label-2);
  line-height: 1.125rem;
  font-weight: var(--_typography---weight--title-normal);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.cert_card_copy {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---gap--gap-xs);
}
.cert_card_full {
  margin: 0;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.4062rem;
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--1);
}
.cert_card_desc {
  margin: 0;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.25rem;
  color: var(--_color---text--default--3);
}
@media (max-width:991px) {
  .cert_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:767px) {
  .cert_grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Partners  (/partners)
   Page-variant combo: is-partners (keeps this page's overrides off the shared classes elsewhere)
   ════════════════════════════════════════════════════════════════════════════ */

.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.hero_section.is-compact {
  height: 37.5rem;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  overflow: hidden;
}
.hero_bg_wrap.is-partners::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/assets/patterns/dither-noise.png");
  background-repeat: repeat;
  background-size: 8rem 8rem;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.hero_section.is-compact .hero_bg_wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--_gradient---hero-compact-sky);
}
.hero_section.is-compact .hero_bg_radial {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: none;
}
.hero_section.is-compact .hero_scrim {
  display: block;
  position: absolute;
  left: -30%;
  top: -22%;
  width: 160%;
  height: 124%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: blur(2.25rem);
  background-image: var(--_gradient---hero-compact-scrim);
}
.hero_section.is-compact .hero_contain {
  width: 100%;
  padding-top: 11.625rem;
  padding-bottom: 4rem;
}
.hero_section.is-compact .hero_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  max-width: none;
  width: 100%;
}
.hero_section.is-compact .hero_title {
  margin: 0;
  max-width: 36.0625rem;
  font-size: var(--_typography---font-size--title-1);
  line-height: 3.3563rem;
  color: var(--_color---text--inverted--1);
  text-wrap: balance;
}
.hero_section.is-compact .hero_text {
  margin: 0;
  max-width: 30rem;
  font-size: var(--_typography---font-size--lead);
  line-height: 1.75rem;
  color: var(--_color---text--inverted--1);
}
@media (max-width:991px) {
  .hero_section.is-compact {
    height: auto;
  }
  .hero_section.is-compact .hero_contain {
    padding-top: 9rem;
    padding-bottom: 3.5rem;
  }
  .hero_section.is-compact .hero_title {
    font-size: var(--_typography---font-size--title-1);
    line-height: 2.625rem;
  }
}
.pt_filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--_spacing---static--spacing-2);
  margin-bottom: var(--_spacing---static--spacing-10);
}
.pt_filter {
  box-sizing: border-box;
  border: 0;
  cursor: pointer;
  padding: 0.5625rem 1rem;
  border-radius: var(--rounding--md);
  background-color: transparent;
  font-size: var(--_typography---font-size--small);
  line-height: var(--_typography---line-height--label-1);
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--2);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.pt_filter:hover {
  background-color: var(--_color---interactive--outline--hover);
}
.pt_filter[data-state="active"] {
  background-color: var(--_color---interactive--primary--idle);
  color: var(--_color---interactive--primary--on);
}
.pt_filter:focus-visible {
  outline: 0.125rem solid var(--_color---focus--ring);
  outline-offset: 0.125rem;
}
.pt_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--_spacing---gap--gap-md);
}
.pt_card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-6);
  min-height: 11.5rem;
  padding: var(--_spacing---static--spacing-6);
  border-radius: var(--rounding--md);
  background-color: var(--_color---bg--default--1);
}
.pt_logo_row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 1.75rem;
  flex: 0 0 auto;
}
.pt_logo {
  height: 1.75rem;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.pt_logo.is-placeholder {
  opacity: 0.22;
}
/* optical logo sizing */
/* Optical, not mechanical: height scales with the inverse of each mark's aspect
   ratio, so square badges and stacked lockups read the same size as the long
   single-line wordmarks instead of looking half as big. */
.pt_logo[src$="cisco.png"] {
  height: 1.625rem;
}
.pt_logo[src$="cynomi.png"] {
  height: 1.625rem;
}
.pt_logo[src$="microsoft.png"] {
  height: 1.625rem;
}
.pt_logo[src$="citrix.png"] {
  height: 1.625rem;
}
.pt_logo[src$="nimble-storage.png"] {
  height: 1.475rem;
}
.pt_logo[src$="arctic-wolf.png"] {
  height: 1.4187rem;
}
.pt_logo[src$="axis-communications.png"] {
  height: 1.375rem;
}
.pt_logo[src$="pure-storage.png"] {
  height: 1.325rem;
}
.pt_logo[src$="splunk.png"] {
  height: 1.3188rem;
}
.pt_logo[src$="hpe.png"] {
  height: 1.2875rem;
}
.pt_logo[src$="blackpoint-cyber.png"] {
  height: 1.2563rem;
}
.pt_logo[src$="vertiv.png"] {
  height: 1.2063rem;
}
.pt_logo[src$="barracuda.png"] {
  height: 1.1812rem;
}
.pt_logo[src$="hpe-aruba-networking.png"] {
  height: 1.1625rem;
}
.pt_logo[src$="cisco-meraki.png"] {
  height: 1.0875rem;
}
.pt_logo[src$="knowbe4.png"] {
  height: 1.0625rem;
}
.pt_logo[src$="mimecast.png"] {
  height: 1.025rem;
}
.pt_logo[src$="verkada.png"] {
  height: 1.025rem;
}
.pt_logo[src$="cohesity.png"] {
  height: 0.9625rem;
}
.pt_logo[src$="nutanix.png"] {
  height: 0.9375rem;
}
.pt_logo[src$="fortinet.png"] {
  height: 0.9375rem;
}
.pt_logo[src$="sophos.png"] {
  height: 0.9375rem;
}
/* end optical */
.pt_card_copy {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: auto;
}
.pt_card_name {
  margin: 0;
  font-size: var(--_typography---font-size--title-6);
  line-height: 1.4062rem;
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--1);
}
.pt_card_desc {
  margin: 0;
  font-size: var(--_typography---font-size--small);
  line-height: 1.25rem;
  color: var(--_color---text--default--3);
}
@media (max-width:991px) {
  .pt_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:767px) {
  .pt_grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.hero_section.is-compact .hero_bg_dots {
  mix-blend-mode: screen;
  filter: brightness(2.4) saturate(1.2);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgb(0,0,0) 0%, rgb(0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgb(0,0,0) 0%, rgb(0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Resources  (/resources)
   Page-variant combo: is-resources (keeps this page's overrides off the shared classes elsewhere)
   ════════════════════════════════════════════════════════════════════════════ */

.arrow_link:hover {
  opacity: 1;
  color: var(--_color---text--default--1);
}
.arrow_link_text {
  position: relative;
}
.arrow_link_text::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.arrow_link:hover .arrow_link_text::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.resources_page_contain {
  box-sizing: border-box;
}
.resources_section.is-resources {
  padding-top: clamp(2.5rem, 2.5rem + 2 * (100vw - 24rem) / 70.5, 4.5rem);
}
.hero_section.is-centered {
  height: 37.5rem;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  overflow: hidden;
}
.hero_bg_wrap.is-resources::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/assets/patterns/dither-noise.png");
  background-repeat: repeat;
  background-size: 8rem 8rem;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.hero_section.is-centered .hero_bg_wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--_gradient---hero-compact-sky);
}
.hero_section.is-centered .hero_bg_video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 12%, rgb(0,0,0) 52%, rgba(0,0,0,0.92) 64%, rgba(0,0,0,0.72) 74%, rgba(0,0,0,0.45) 83%, rgba(0,0,0,0.2) 91%, rgba(0,0,0,0.06) 96%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 12%, rgb(0,0,0) 52%, rgba(0,0,0,0.92) 64%, rgba(0,0,0,0.72) 74%, rgba(0,0,0,0.45) 83%, rgba(0,0,0,0.2) 91%, rgba(0,0,0,0.06) 96%, rgba(0,0,0,0) 100%);
}
.hero_section.is-centered .hero_bg_radial {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: none;
}
.hero_section.is-centered .hero_scrim {
  display: block;
  position: absolute;
  left: -30%;
  top: -22%;
  width: 160%;
  height: 124%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: blur(2.25rem);
  background-image: var(--_gradient---hero-compact-scrim);
}
.hero_section.is-centered .hero_contain {
  width: 100%;
  padding-top: 11.625rem;
  padding-bottom: 4rem;
}
.hero_section.is-centered .hero_content {
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  max-width: none;
  width: 100%;
}
.hero_section.is-centered .hero_copy {
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  max-width: 36.0625rem;
}
.hero_section.is-centered .hero_title {
  font-size: var(--_typography---font-size--title-1);
  line-height: 3.3563rem;
  max-width: 36.0625rem;
}
.hero_section.is-centered .hero_text {
  max-width: 30rem;
  font-size: var(--_typography---font-size--lead);
  line-height: 1.75rem;
}
@media (max-width:991px) {
  .hero_section.is-centered {
    height: auto;
  }
  .hero_section.is-centered .hero_contain {
    padding-top: 9rem;
    padding-bottom: 3.5rem;
  }
  .hero_section.is-centered .hero_title {
    font-size: var(--_typography---font-size--title-1);
    line-height: 2.625rem;
  }
}
.resources_toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_spacing---static--spacing-6);
  flex-wrap: wrap;
}
.resources_filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_spacing---static--spacing-1);
}
.resources_filter {
  height: 2.5rem;
  font-size: var(--_typography---font-size--small);
  color: var(--_color---text--default--3);
  border: 0;
  appearance: none;
  background: none;
  font-family: inherit;
}
.resources_filter.is-solid {
  color: var(--_color---interactive--primary--on);
}
.resources_filter .button_main_bg.is-outline {
  background-color: transparent;
  box-shadow: none;
}
.resources_filter .button_main_bg.is-outline:hover {
  background-color: transparent;
}
.resources_filter .button_main_bg.is-solid {
  background-color: var(--_color---interactive--primary--idle);
}
.resources_filter_inner {
  min-height: 2.5rem;
  padding: 0 0.875rem;
}
.resources_filter .button_main_rect {
  display: none;
}
.resources_filter.button_main_wrap:is(:hover, :has(> .clickable_wrap:focus-visible)) .button_main_text {
  transform: none;
}
.resources_filter.button_main_wrap:is(:hover, :has(> .clickable_wrap:focus-visible)) .button_main_bg {
  scale: 1;
}
.resources_filter .button_main_text {
  font-size: var(--_typography---font-size--small);
}
.resources_search.is-resources {
  flex: 0 0 calc((100% - 2 * var(--_spacing---gap--gap-md)) / 3);
  min-width: 14rem;
  height: 2.875rem;
  box-sizing: border-box;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--rounding--md);
  background-color: var(--_color---bg--default--1);
  box-shadow: inset 0 0 0 1px var(--base--grey-10-a08);
  font-family: inherit;
  font-size: var(--_typography---font-size--small);
  color: var(--_color---text--default--2);
  outline: none;
}
.resources_search.is-resources::placeholder {
  color: var(--_color---text--default--4);
}
.resources_search.is-resources:hover {
  box-shadow: inset 0 0 0 1px var(--_color---outline--subtle);
}
.resources_search.is-resources:focus-visible {
  box-shadow: inset 0 0 0 1px var(--base--grey-10-a08),0 0 0 0.125rem var(--_color---focus--ring);
}
.resources_page_grid.is-resources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  min-height: 52rem;
  gap: var(--_spacing---gap--gap-md);
  margin-top: clamp(2rem, 2rem + 1.75 * (100vw - 24rem) / 70.5, 3.75rem);
}
.resources_empty {
  margin-top: 3.75rem;
  color: var(--_color---text--default--3);
  font-size: var(--_typography---font-size--body-2);
}
.resources_page_grid.is-resources .blog_feature_wrap {
  height: 100%;
  transform-origin: center;
  transition: scale 0.45s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s;
}
.resources_page_grid.is-resources .blog_feature_wrap:hover {
  scale: 1.025;
  z-index: 1;
}
.resources_page_grid.is-resources .blog_feature_wrap:active {
  scale: 1.01;
}
.resources_page_grid.is-resources .blog_feature_visual {
  flex-grow: 0;
  height: 13.75rem;
  min-height: 13.75rem;
}
.resources_page_grid.is-resources .blog_feature_content {
  flex-grow: 1;
}
.resources_page_grid.is-resources .blog_feature_copy {
  flex-grow: 1;
}
.resources_page_grid.is-resources .arrow_link {
  margin-top: auto;
  align-items: baseline;
}
.resources_page_grid.is-resources .arrow_link_icon {
  width: 0.75rem;
  height: 0.75rem;
  position: relative;
  top: 0.0625rem;
}
.resources_page_grid.is-resources .blog_feature_tag .eyebrow_dot {
  display: none;
}
.resources_page_grid.is-resources .blog_feature_title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(var(--_typography---line-height--title-4) * 2);
}
.resources_page_grid.is-resources .blog_feature_excerpt {
  -webkit-line-clamp: 2;
}

@media (max-width:991px) {
  .resources_page_grid.is-resources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:767px) {
  .resources_page_grid.is-resources {
    grid-template-columns: 1fr;
  }
}
@media (max-width:767px) {
  .resources_search.is-resources {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Article (template)  (/article-template)
   ════════════════════════════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
}
.arrow_link:hover {
  opacity: 1;
  color: var(--_color---text--default--1);
}
.arrow_link_text {
  position: relative;
}
.arrow_link_text::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.arrow_link:hover .arrow_link_text::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}

.article_contain,
.related_section {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: max(var(--_spacing---page-padding), calc((100% - var(--max-width--content)) / 2));
}
.article_layout {
  display: grid;
  grid-template-columns: 16.25rem minmax(0, 1fr) 16.25rem;
  gap: 2.5rem;
  align-items: start;
  padding-top: var(--_spacing---static--spacing-16);
}
.article_toc {
  position: sticky;
  top: 7.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
.article_back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--_color---text--default--2);
  font-size: var(--_typography---font-size--label-1);
  line-height: 1.3125rem;
  font-weight: 400;
}
.article_back:hover {
  color: var(--_color---text--default--1);
}
.article_back_icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.toc_nav {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}
.toc_label {
  color: var(--_color---text--default--4); /* 4.7:1 on the page grey */
  font-size: var(--_typography---font-size--label-2);
  line-height: 1.4062rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.toc_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.toc_link {
  color: var(--_color---text--default--4);
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5;
  font-weight: 400;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.toc_link:hover {
  color: var(--_color---text--default--2);
}
.toc_link[data-state="active"] {
  color: var(--_color---text--default--1);
}
.article_main {
  display: flex;
  flex-direction: column;
  padding-inline: 1.875rem;
  min-width: 0;
}
.article_eyebrow_row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.875rem;
}
.article_title {
  margin: 0.5rem 0;
  color: var(--_color---text--default--1);
  font-size: var(--_typography---font-size--title-1);
  line-height: 3.625rem;
  font-weight: 500;
  text-wrap: pretty;
}
.article_meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4375rem;
  padding: 2.09375rem 0;
  color: var(--_color---text--default--3); /* 7.4:1 on the page grey */
  font-size: var(--_typography---font-size--label-1);
  line-height: 1.25rem;
  font-weight: 400;
}
.article_meta_sep {
  color: var(--_color---text--default--4);
}
.article_hero_image {
  width: 100%;
  margin: 2rem 0;
  border-radius: 0.625rem;
  overflow: hidden;
  aspect-ratio: 688/400;
}
.article_hero_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article_rail {
  position: sticky;
  top: 7.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.0625rem;
  align-items: flex-end;
}
.article_share {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.article_share_label {
  color: var(--_color---text--default--4); /* 4.7:1 on the page grey */
  font-size: var(--_typography---font-size--label-2);
  line-height: 1.4062rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.article_share_links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.article_share_link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--_color---text--default--1);
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.article_share_link:hover {
  opacity: 0.7;
  color: var(--_color---text--default--1);
}
.article_share_icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}
.article_promo {
  box-sizing: border-box;
  width: 13.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  padding: 1.5rem;
  border-radius: var(--rounding--sm);
  background: linear-gradient(137.01deg, var(--_color---bg--inverted--1) 0%, var(--base--blue-600) 50%, var(--base--blue-400) 100%);
}
/* The promo button spans the card, so its label centres instead of sitting
   at the left edge. */
.article_promo .button_main_wrap {
  box-sizing: border-box;
  width: 100%;
}
.article_promo .button_main_element {
  justify-content: center;
  padding-inline: var(--_spacing---static--spacing-6);
}
.article_promo .button_main_rect {
  position: static;
  translate: 0;
  margin-right: -0.375em;
  transition: scale 0.45s cubic-bezier(0.32, 0.72, 0, 1), margin-right 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .article_promo .button_main_wrap:is(:hover, :has(> .clickable_wrap:focus-visible)) .button_main_rect {
    margin-right: 0.25em;
  }
  .article_promo .button_main_wrap:is(:hover, :has(> .clickable_wrap:focus-visible)) .button_main_text {
    transform: none;
  }
}
.article_promo_title {
  color: var(--_color---text--inverted--1);
  font-size: var(--_typography---font-size--title-6);
  line-height: 1.2;
  font-weight: 500;
}
.article_promo_text {
  color: var(--_color---text--inverted--1);
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5;
  font-weight: 400;
}
.article_lede {
  margin: 0 0 var(--_spacing---static--spacing-2);
  color: var(--_color---text--default--2);
}
.article_body {
  margin: 0;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-6);
}
.article_body p {
  margin: 0;
  color: var(--_color---text--default--3);
}
.article_body h2 {
  margin: var(--_spacing---static--spacing-4) 0 0;
  color: var(--_color---text--default--1);
  scroll-margin-top: 8.75rem;
}
.article_body h3 {
  margin: var(--_spacing---static--spacing-2) 0 0;
  color: var(--_color---text--default--2);
}
.article_body ul {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-2);
  color: var(--_color---text--default--3);
}
.article_body ul li::marker {
  color: var(--_color---text--brand--link);
}
.article_pullquote {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-4);
  margin: var(--_spacing---static--spacing-4) 0;
  padding: var(--_spacing---static--spacing-8);
  border-left: 0.125rem solid var(--_color---text--brand--1);
  background-color: var(--_color---bg--default--1);
  border-radius: 0 var(--rounding--md) var(--rounding--md) 0;
  color: var(--_color---text--default--1);
  font-style: normal;
}
/* All three columns stay in one grid row so the sticky asides travel the
   whole article; the asides just narrow instead of dropping out of flow. */
@media (max-width:1200px) {
  .article_layout {
    grid-template-columns: 11.5rem minmax(0, 1fr) 11.5rem;
    gap: 1.5rem;
  }
  .article_main {
    padding-inline: 0;
  }
  .article_promo {
    width: 100%;
  }
  .article_share {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}
@media (max-width:991px) {
  .article_layout {
    grid-template-columns: 1fr;
  }
  .article_toc {
    position: static;
  }
  .article_rail {
    position: static;
    align-items: flex-start;
  }
  .article_share {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }
  .article_main {
    padding-inline: 0;
  }
  .article_title {
    font-size: 2.5rem;
    line-height: 2.75rem;
  }
  .article_promo {
    width: 13.75rem;
  }
}
.related_section {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 2rem + 1.75 * (100vw - 24rem) / 70.5, 3.75rem);
}
.related_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--_spacing---gap--gap-3xl);
}
.related_head_copy {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
}
.related_head_title {
  margin: 0;
  color: var(--_color---text--default--1);
}
@media (max-width:991px) {
  .related_head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_spacing---static--spacing-8);
  }
}
.related_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--_spacing---gap--gap-md);
}
.related_grid .blog_feature_wrap {
  height: 100%;
  transform-origin: center;
  transition: scale 0.45s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s;
}
.related_grid .blog_feature_wrap:hover {
  scale: 1.025;
  z-index: 1;
}
.related_grid .blog_feature_visual {
  flex-grow: 0;
  height: 13.75rem;
  min-height: 13.75rem;
}
.related_grid .blog_feature_content {
  flex-grow: 1;
}
.related_grid .blog_feature_copy {
  flex-grow: 1;
}
.related_grid .arrow_link {
  margin-top: auto;
  align-items: baseline;
}
.related_grid .arrow_link_icon {
  width: 0.75rem;
  height: 0.75rem;
  position: relative;
  top: 0.0625rem;
}
.related_grid .blog_feature_tag .eyebrow_dot {
  display: none;
}
.related_grid .blog_feature_title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(var(--_typography---line-height--title-4) * 2);
}
.related_grid .blog_feature_excerpt {
  -webkit-line-clamp: 2;
}
@media (max-width:991px) {
  .related_grid {
    grid-template-columns: 1fr;
  }
}
/* Tablet + mobile: back link, then eyebrow / title / meta, then the contents list, then the article. */
@media (max-width:991px) {
  .article_layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .article_toc,
  .article_main {
    display: contents;
  }
  .article_back {
    order: 1;
    align-self: flex-start;
    margin-bottom: 2rem;
  }
  .article_eyebrow_row {
    order: 2;
  }
  .article_title {
    order: 3;
  }
  .article_meta {
    order: 4;
    padding-bottom: 1.5rem;
  }
  .toc_nav {
    order: 5;
    padding: 1.5rem 0;
    border-top: 0.5px solid var(--_color---outline--hairline);
    border-bottom: 0.5px solid var(--_color---outline--hairline);
  }
  .article_hero_image {
    order: 6;
  }
  .article_body {
    order: 7;
  }
  .article_rail {
    order: 8;
    margin-top: 2.5rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Support  (/support)
   Page-variant combo: is-support (keeps this page's overrides off the shared classes elsewhere)
   ════════════════════════════════════════════════════════════════════════════ */

.arrow_link:hover {
  opacity: 1;
  color: var(--_color---text--default--1);
}
.arrow_link_text {
  position: relative;
}
.arrow_link_text::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.arrow_link:hover .arrow_link_text::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.plain_hero.is-support {
  box-sizing: border-box;
  padding-top: 11.625rem;
  padding-bottom: 5rem;
  background-color: var(--_color---bg--default--bg);
}
.plain_hero_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--_spacing---static--spacing-6);
}
.plain_hero_title {
  margin: 0;
  font-size: var(--_typography---font-size--title-1);
  line-height: 3.6688rem;
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--1);
  text-wrap: balance;
}
.plain_hero_text {
  margin: 0;
  max-width: 30rem;
  color: var(--_color---text--default--3);
}
@media (max-width:991px) {
  .plain_hero.is-support {
    padding-top: 9rem;
    padding-bottom: 3rem;
  }
  .plain_hero_title {
    font-size: var(--_typography---font-size--title-1);
    line-height: 2.625rem;
  }
}
/* Support card grid now lives in style.css (shared with the industry template). */
/* ── Support resources: the Resources page toolbar + grid, reused verbatim so
   the two pages stay one pattern. Only the section header is new. ────────── */
.sup_res_section {
  padding-top: clamp(2.5rem, 2.5rem + 2 * (100vw - 24rem) / 70.5, 5rem);
  padding-bottom: clamp(3rem, 3rem + 3 * (100vw - 24rem) / 70.5, 7.5rem);
}
.sup_res_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--_spacing---static--spacing-4);
  margin-bottom: clamp(2rem, 2rem + 1.75 * (100vw - 24rem) / 70.5, 3.5rem);
}
.sup_res_title {
  margin: 0;
  font-size: var(--_typography---font-size--title-2);
  line-height: 2.75rem;
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--1);
  text-wrap: balance;
}
.resources_page_contain {
  box-sizing: border-box;
}
.resources_toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_spacing---static--spacing-6);
  flex-wrap: wrap;
}
.resources_filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_spacing---static--spacing-1);
}
.resources_filter.is-support {
  height: 2.5rem;
  font-size: var(--_typography---font-size--small);
  color: var(--_color---text--default--3);
  border: 0;
  appearance: none;
  background: none;
  font-family: inherit;
}
.resources_filter.is-support.is-solid {
  color: var(--_color---interactive--primary--on);
}
.resources_filter.is-support .button_main_bg.is-outline {
  background-color: transparent;
  box-shadow: none;
}
.resources_filter.is-support .button_main_bg.is-outline:hover {
  background-color: transparent;
}
.resources_filter.is-support .button_main_bg.is-solid {
  background-color: var(--_color---interactive--primary--idle);
}
.resources_filter_inner {
  min-height: 2.5rem;
  padding: 0 0.875rem;
}
.resources_filter.is-support .button_main_rect {
  display: none;
}
.resources_filter.is-support.button_main_wrap:is(:hover, :has(> .clickable_wrap:focus-visible)) .button_main_text {
  transform: none;
}
.resources_filter.is-support.button_main_wrap:is(:hover, :has(> .clickable_wrap:focus-visible)) .button_main_bg {
  scale: 1;
}
.resources_filter.is-support .button_main_text {
  font-size: var(--_typography---font-size--small);
}
.resources_search.is-support {
  flex: 0 0 calc((100% - 2 * var(--_spacing---gap--gap-md)) / 3);
  min-width: 14rem;
  height: 2.875rem;
  box-sizing: border-box;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--rounding--md);
  background-color: var(--_color---bg--default--1);
  box-shadow: inset 0 0 0 1px var(--base--grey-10-a08);
  font-family: inherit;
  font-size: var(--_typography---font-size--small);
  color: var(--_color---text--default--2);
  outline: none;
}
.resources_search.is-support::placeholder {
  color: var(--_color---text--default--4);
}
.resources_search.is-support:focus-visible {
  box-shadow: inset 0 0 0 1px var(--base--grey-10-a08),0 0 0 0.125rem var(--_color---focus--ring);
}
.resources_page_grid.is-support {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: var(--_spacing---gap--gap-md);
  margin-top: clamp(2rem, 2rem + 1.75 * (100vw - 24rem) / 70.5, 3.75rem);
}
.resources_empty {
  margin-top: 3.75rem;
  color: var(--_color---text--default--3);
  font-size: var(--_typography---font-size--body-2);
}
.resources_page_grid.is-support .blog_feature_wrap {
  height: 100%;
  transform-origin: center;
  transition: scale 0.45s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s;
}
.resources_page_grid.is-support .blog_feature_wrap:hover {
  scale: 1.025;
  z-index: 1;
}
.resources_page_grid.is-support .blog_feature_wrap:active {
  scale: 1.01;
}
.resources_page_grid.is-support .blog_feature_visual {
  flex-grow: 0;
  height: 13.75rem;
  min-height: 13.75rem;
}
.resources_page_grid.is-support .blog_feature_content {
  flex-grow: 1;
}
.resources_page_grid.is-support .blog_feature_copy {
  flex-grow: 1;
}
.resources_page_grid.is-support .arrow_link {
  margin-top: auto;
  align-items: baseline;
}
.resources_page_grid.is-support .arrow_link_icon {
  width: 0.75rem;
  height: 0.75rem;
  position: relative;
  top: 0.0625rem;
}
.resources_page_grid.is-support .blog_feature_tag .eyebrow_dot {
  display: none;
}
.resources_page_grid.is-support .blog_feature_title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(var(--_typography---line-height--title-4) * 2);
}
.resources_page_grid.is-support .blog_feature_excerpt {
  -webkit-line-clamp: 2;
}
@media (max-width:991px) {
  .resources_page_grid.is-support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:767px) {
  .resources_page_grid.is-support {
    grid-template-columns: 1fr;
  }
}
@media (max-width:991px) {
  .sup_res_title {
    font-size: var(--_typography---font-size--title-2);
    line-height: 2.25rem;
  }
}
@media (max-width:767px) {
  .resources_search.is-support {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Contact Us  (/contact-us)
   Page-variant combo: is-contact (keeps this page's overrides off the shared classes elsewhere)
   ════════════════════════════════════════════════════════════════════════════ */

.arrow_link:hover {
  opacity: 1;
  color: var(--_color---text--default--1);
}
.arrow_link_text {
  position: relative;
}
.arrow_link_text::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.arrow_link:hover .arrow_link_text::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.contact_contain {
  box-sizing: border-box;
}
.contact_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 39.5rem;
  align-items: stretch;
  gap: 5rem;
  padding-top: 11.625rem;
  padding-bottom: 6.25rem;
}
.contact_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 36rem;
}
.contact_info_group {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  row-gap: 2.5rem;
}
.contact_intro {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-5);
}
.contact_title {
  margin: 0;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}
.contact_intro_text {
  margin: 0;
  color: var(--base--grey-12-a64);
  max-width: 26rem;
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
  font-weight: 400;
}
.contact_form_text {
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
  font-weight: 400;
  color: var(--base--grey-12-a64);
}
.contact_form_note {
  font-weight: 400;
}
.contact_checkbox_label {
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
}
.contact_field_input,
.contact_field_input::placeholder {
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
}
.contact_info {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact_info_title {
  margin: 0;
  color: var(--_color---text--default--1);
  font-size: var(--_typography---font-size--callout);
  line-height: 1.75rem;
  letter-spacing: -0.5px;
}
.contact_info_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact_info_row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--_color---text--default--3);
}
.contact_info_row.is-indented {
  padding-left: 2.25rem;
}
.contact_info_row.is-link {
  color: var(--_color---text--default--3);
}
.contact_info_row.is-link:hover {
  color: var(--_color---text--default--3);
}
.contact_info_part {
  position: relative;
}
.contact_info_part::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.contact_info_row.is-link:hover .contact_info_part::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.contact_info_icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--_color---text--brand--1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact_info_svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}
/* Bottoms out level with the form on the right; the contact block above it
   stays tied to the intro. */
.contact_support_card {
  margin-top: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 7.5rem;
  padding: 2rem;
  border-radius: 0.375rem;
  background: linear-gradient(101.929deg, var(--_color---bg--inverted--1) 0%, var(--base--blue-600) 50%, var(--base--blue-400) 100%);
}
.contact_support_title {
  margin: 0;
  color: var(--_color---text--inverted--1);
  font-size: var(--_typography---font-size--title-5);
  line-height: 1.625rem;
  letter-spacing: -0.0187rem;
  max-width: 20rem;
}
.contact_form_card.is-contact {
  box-sizing: border-box;
  padding: 2rem;
  border-radius: 0.5rem;
  background-color: var(--_color---bg--default--1);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact_form_head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact_form_title {
  margin: 0;
  color: var(--_color---text--default--1);
  font-size: var(--_typography---font-size--callout);
  line-height: 1.75rem;
  letter-spacing: -0.5px;
}
.contact_form_text {
  margin: 0;
  color: var(--_color---text--default--3);
}
.contact_form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact_form_row.is-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
.contact_field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact_field_label {
  line-height: 1rem;
  font-size: var(--_typography---font-size--label-2);
  letter-spacing: 1px;
  color: var(--_color---text--default--1);
}
.contact_field_input {
  box-sizing: border-box;
  width: 100%;
  height: 3rem;
  padding: 0.75rem 1rem;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--base--grey-10-a08);
  border-radius: 0.5rem;
  background-color: var(--_color---bg--default--1);
  color: var(--_color---text--default--2);
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact_field_input::placeholder {
  color: var(--base--grey-12-a64);
}
.contact_field_input:hover {
  box-shadow: inset 0 0 0 1px var(--_color---outline--subtle);
}
.contact_field_input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 0.125rem var(--_color---focus--ring);
}
.contact_field_select {
  appearance: none;
  color: var(--base--grey-12-a64);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20d%3D%22M1%201.5L6%206.5L11%201.5%22%20stroke%3D%22%238C8C8C%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right var(--_spacing---static--spacing-4) center;
  background-size: 0.75rem;
  cursor: pointer;
}

.contact_field_textarea {
  height: 10rem;
  resize: none;
  line-height: 1.5rem;
}
.contact_checkbox_row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  color: var(--_color---text--default--3);
  font-size: var(--_typography---font-size--body-2);
  line-height: 1.5rem;
}
.contact_checkbox {
  appearance: none;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--base--grey-10-a08);
  border-radius: 0.5rem;
  background-color: var(--_color---bg--default--1);
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact_checkbox:checked {
  background-color: var(--_color---interactive--primary--idle);
  border-color: var(--_color---interactive--primary--idle);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3%208.5L6.5%2012L13%204.5%22%20stroke%3D%22white%22%20stroke-width%3D%221.75%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem;
}
.contact_form_footer.is-contact .button_main_wrap {
  border: 0;
  appearance: none;
  cursor: pointer;
}
.contact_form_footer.is-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.contact_form_note {
  margin: 0;
  display: flex;
  flex-direction: column;
  max-width: 15.75rem;
  font-size: var(--_typography---font-size--label-2);
  line-height: 1rem;
  color: var(--base--grey-12-a64);
}
.contact_form_note_text {
  margin: 0;
}
.contact_form_note_link {
  color: var(--base--grey-12-a64);
  text-decoration: underline;
}
.contact_form_note_link:hover {
  color: var(--_color---text--brand--link-hover);
}
.badges_section {
  padding-top: 6.25rem;
  padding-bottom: 6.25rem;
}
.badges_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5.125rem;
  align-items: start;
}
.badges_head {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}
.badges_title {
  margin: 0;
  color: var(--_color---text--default--1);
  font-size: var(--_typography---font-size--title-2);
  line-height: 2.715rem;
  font-weight: 500;
  max-width: 32rem;
}
.badges_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--_spacing---gap--gap-md);
  margin-top: var(--_spacing---static--spacing-2);
}
.badges_cell {
  height: 7.75rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: none;
  border-radius: 0.5rem;
}
.badges_img {
  width: 4.375rem;
  height: 4.375rem;
  object-fit: contain;
}
/* ≤991: three per row, each badge centred in its cell. */
@media (max-width:991px) {
  .badges_cell {
    justify-content: center;
  }
}
@media (max-width:991px) {
  .badges_layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
@media (max-width:1100px) { /* kept: this layout needs to stack before 1100px (see HANDOFF §5) */
  .contact_layout {
    grid-template-columns: 1fr;
    gap: var(--_spacing---static--spacing-16);
  }
  .contact_left {
    max-width: none;
  }
  .contact_info {
    margin-top: var(--_spacing---static--spacing-16);
  }
  .contact_form_row.is-contact {
    grid-template-columns: 1fr;
  }
  .contact_form_footer.is-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_spacing---static--spacing-5);
  }
}
@media (max-width:1100px) { /* kept: this layout needs to stack before 1100px (see HANDOFF §5) */
  .contact_left,
  .contact_info_group {
    display: contents;
  }
  .contact_intro {
    order: 1;
  }
  .contact_info {
    order: 2;
    margin-top: 0;
  }
  .contact_form_card.is-contact {
    order: 3;
  }
  .contact_support_card {
    order: 4;
    margin-top: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — 404  (/404)
   Page-variant combo: is-404 (keeps this page's overrides off the shared classes elsewhere)
   ════════════════════════════════════════════════════════════════════════════ */

.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.plain_hero.is-404 {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 11.625rem;
  padding-bottom: 6.25rem;
  background-color: var(--_color---bg--default--bg);
}
.plain_hero_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--_spacing---static--spacing-6);
}
.plain_hero_title {
  margin: 0;
  font-size: var(--_typography---font-size--title-1);
  line-height: 3.6688rem;
  font-weight: var(--_typography---weight--title-normal);
  color: var(--_color---text--default--1);
  text-wrap: balance;
}
.plain_hero_text {
  margin: 0;
  max-width: 30rem;
  color: var(--_color---text--default--3);
}
.plain_hero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_spacing---static--spacing-4);
  justify-content: center;
  margin-top: var(--_spacing---static--spacing-2);
}
.plain_hero_dots {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.75;
  pointer-events: none;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(0deg, rgb(0,0,0) 0%, rgb(0,0,0) 35%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(0deg, rgb(0,0,0) 0%, rgb(0,0,0) 35%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0) 100%);
}
.plain_hero.is-404 .io_contain {
  position: relative;
}
@media (max-width:991px) {
  .plain_hero.is-404 {
    padding-top: 9rem;
    padding-bottom: 3.5rem;
  }
  .plain_hero_title {
    font-size: var(--_typography---font-size--title-1);
    line-height: 2.625rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Privacy Policy  (/privacy-policy)
   ════════════════════════════════════════════════════════════════════════════ */

.arrow_link:hover {
  opacity: 1;
  color: var(--_color---text--default--1);
}
.arrow_link_text {
  position: relative;
}
.arrow_link_text::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.arrow_link:hover .arrow_link_text::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.legal_page_contain {
  box-sizing: border-box;
}
.legal_layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
  align-items: start;
  gap: var(--_spacing---gap--gap-3xl);
  padding-top: var(--_spacing---section--section-lg);
}
.legal_heading {
  position: sticky;
  top: 8rem;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-5);
}
.legal_page_title {
  margin: 0;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}
.legal_page_updated {
  margin: 0;
  color: var(--_color---text--default--4);
}
.legal_page_body {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---gap--gap-md);
}
.legal_section {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
}
.legal_section_title {
  margin: 0;
  color: var(--_color---text--default--2);
}
.legal_section_text {
  margin: 0;
  color: var(--_color---text--default--3);
}
/* Rich text links: underlined so they don't rely on colour alone (WCAG 1.4.1). */
.legal_section_text a,
.legal_section_list a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.legal_section_list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-2);
  color: var(--_color---text--default--3);
}
@media (max-width:991px) {
  .legal_layout {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .legal_heading {
    position: relative;
    top: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Accessibility Statement  (/accessibility-statement)
   ════════════════════════════════════════════════════════════════════════════ */

.arrow_link:hover {
  opacity: 1;
  color: var(--_color---text--default--1);
}
.arrow_link_text {
  position: relative;
}
.arrow_link_text::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.arrow_link:hover .arrow_link_text::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.legal_page_contain {
  box-sizing: border-box;
}
.legal_layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
  align-items: start;
  gap: var(--_spacing---gap--gap-3xl);
  padding-top: var(--_spacing---section--section-lg);
}
.legal_heading {
  position: sticky;
  top: 8rem;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-5);
}
.legal_page_title {
  margin: 0;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}
.legal_page_updated {
  margin: 0;
  color: var(--_color---text--default--4);
}
.legal_page_body {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---gap--gap-md);
}
.legal_section {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
}
.legal_section_title {
  margin: 0;
  color: var(--_color---text--default--2);
}
.legal_section_text {
  margin: 0;
  color: var(--_color---text--default--3);
}
.legal_section_list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-2);
  color: var(--_color---text--default--3);
}
@media (max-width:991px) {
  .legal_layout {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .legal_heading {
    position: relative;
    top: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Page — Compliance Statements  (/compliance-statements)
   ════════════════════════════════════════════════════════════════════════════ */

.arrow_link:hover {
  opacity: 1;
  color: var(--_color---text--default--1);
}
.arrow_link_text {
  position: relative;
}
.arrow_link_text::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.arrow_link:hover .arrow_link_text::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.footer_badge:hover {
  opacity: 1;
}
.footer_bar_left {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-8);
  flex-wrap: wrap;
}
.footer_legal_link {
  position: relative;
  font-family: var(--_typography---font--primary);
  font-size: var(--_typography---font-size--label-3);
  line-height: var(--_typography---line-height--label-3);
  font-weight: 400;
  color: var(--_color---text--inverted--2);
  width: fit-content;
}
.footer_legal_link:hover {
  color: var(--_color---text--inverted--2);
}
.footer_legal_link::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}
.footer_legal_link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}
.legal_page_contain {
  box-sizing: border-box;
}
.legal_layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
  align-items: start;
  gap: var(--_spacing---gap--gap-3xl);
  padding-top: var(--_spacing---section--section-lg);
}
.legal_heading {
  position: sticky;
  top: 8rem;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-5);
}
.legal_page_title {
  margin: 0;
  color: var(--_color---text--default--1);
  text-wrap: pretty;
}
.legal_page_updated {
  margin: 0;
  color: var(--_color---text--default--4);
}
.legal_page_body {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---gap--gap-md);
}
.legal_section {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
}
.legal_section_title {
  margin: 0;
  color: var(--_color---text--default--2);
}
.legal_section_text {
  margin: 0;
  color: var(--_color---text--default--3);
}
.legal_section_list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-2);
  color: var(--_color---text--default--3);
}
@media (max-width:991px) {
  .legal_layout {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .legal_heading {
    position: relative;
    top: auto;
  }
}

/* Page heroes fill the screen like the Home hero (100svh, never under 40rem), so the
   Three.js elements get room and the sky fades out at the bottom of the screen.
   About keeps its own collage height. */
.hero_section.is-compact,
.hero_section.is-centered,
.pub_hero {
  height: 100svh;
  min-height: 40rem;
  box-sizing: border-box;
}
/* Full-height heroes: the sky is stretched so its blue runs behind the Three.js
   element (white dots on the pale end were invisible), and the fade into the page
   grey starts at 80%, so it happens at the very bottom of the screen. */
.hero_section.is-compact .hero_bg_wrap,
.hero_section.is-centered .hero_bg_wrap {
  background-size: 100% 118%;
  background-position: center top;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0.86) 85%, rgba(0,0,0,0.62) 90%, rgba(0,0,0,0.34) 94%, rgba(0,0,0,0.12) 97.5%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0.86) 85%, rgba(0,0,0,0.62) 90%, rgba(0,0,0,0.34) 94%, rgba(0,0,0,0.12) 97.5%, transparent 100%);
}

/* Service template hero (desktop): the text row fills the full-height hero, so the case
   study card sits at the hero's bottom (align-self:flex-end), the same distance from the
   edge as the Home credentials card; the copy keeps its place near the top. */
@media (min-width:992px) {
  .pub_hero.is-service {
    display: flex;
    flex-direction: column;
  }
  .pub_hero.is-service > .io_contain {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .pub_hero.is-service .pub_hero_row {
    flex: 1 1 auto;
    align-items: flex-start;
  }
  .pub_hero.is-service .svc_case {
    align-self: flex-end;
  }
}

/* Template heroes: no circle. The sky is the same as the other heroes (stretched so the
   blue runs lower, faded into the page grey at the bottom), and a soft navy wash from the
   left darkens it behind the copy, fading out before the right side and toward the bottom. */
.pub_hero_scrim {
  display: none;
}
.pub_hero_bg {
  background-size: 100% 118%;
  background-position: center top;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0.86) 85%, rgba(0,0,0,0.62) 90%, rgba(0,0,0,0.34) 94%, rgba(0,0,0,0.12) 97.5%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0.86) 85%, rgba(0,0,0,0.62) 90%, rgba(0,0,0,0.34) 94%, rgba(0,0,0,0.12) 97.5%, transparent 100%);
}
.pub_hero_radial {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--base--navy-10-a62) 0%, var(--base--navy-10-a50) 28%, var(--base--navy-10-a22) 50%, var(--base--navy-11-a00) 68%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0.5) 72%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0.5) 72%, transparent 88%);
}
@media (max-width:991px) {
  /* stacked: the copy runs the full width, so the wash does too */
  .pub_hero_radial {
    background-image: linear-gradient(90deg, var(--base--navy-10-a50) 0%, var(--base--navy-10-a40) 60%, var(--base--navy-11-a25) 100%);
  }
}

/* Footer (tablet/mobile): the wash behind the copy fades out below the buttons, so the
   Three.js compass underneath shows; mobile uses the same hero-colour sky as desktop. */
@media (max-width:991px) {
  .footer_cta_media.footer_cta_media::after {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 7%, rgba(0,0,0,0.4) 13%, rgba(0,0,0,0.85) 18%, #000 23%, #000 48%, rgba(0,0,0,0.5) 55%, transparent 64%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 7%, rgba(0,0,0,0.4) 13%, rgba(0,0,0,0.85) 18%, #000 23%, #000 48%, rgba(0,0,0,0.5) 55%, transparent 64%);
  }
}
@media (max-width:767px) {
  .footer_cta_media.footer_cta_media {
    background-image: var(--_gradient---footer-cta-sky);
  }
}
@media (max-width:767px) {
  /* the video's top-edge fade hid most of the compass; the Three.js frame is transparent */
  .footer_cta_media.footer_cta_media .footer_cta_video.three_frame {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Dotted background patterns (not the Three.js elements): about half as visible as
   in the export, so they read as texture. */
.home_testi_pattern,
.svc_hero_dots,
.ab_purpose_pattern,
.ab_join_layer,
.sv_tile_dots,
.svc_why_dots,
.svc_guide_layer,
.pub_who_pattern,
.hero_bg_dots {
  opacity: 0.45;
}
.ab_mission_pattern {
  opacity: 0.25;
}
.plain_hero_dots {
  opacity: 0.35;
}
/* Template heroes on tablet/mobile: the stacked copy + case study card / image is taller
   than the screen, so the hero grows with it instead of cutting it off. */
@media (max-width:991px) {
  .pub_hero {
    height: auto;
    min-height: 100svh;
  }
}
/* Mobile footer: the copy sits a little lower (13rem + ~4rem) so the grey can hand over
   to the sky over a longer, eased stretch; the wash behind the copy fades in over it. */
@media (max-width:767px) {
  .footer_cta {
    padding-top: 17rem;
  }
  .footer_cta_media.footer_cta_media::after {
    background-image: linear-gradient(90deg, var(--base--hero-blue-a80) 0%, var(--base--hero-blue-a70) 60%, var(--base--hero-blue-a45) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 4%, rgba(0,0,0,0.12) 9%, rgba(0,0,0,0.3) 14%, rgba(0,0,0,0.55) 19%, rgba(0,0,0,0.8) 23%, #000 27%, #000 50%, rgba(0,0,0,0.5) 57%, transparent 66%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 4%, rgba(0,0,0,0.12) 9%, rgba(0,0,0,0.3) 14%, rgba(0,0,0,0.55) 19%, rgba(0,0,0,0.8) 23%, #000 27%, #000 50%, rgba(0,0,0,0.5) 57%, transparent 66%);
  }
}

/* Footer compass, tablet/mobile (option B): a calm gap under the buttons, and the compass
   sits there on the deep blue, fully visible, instead of behind the copy. The frame ends
   where the footer panel starts (the media box runs 26rem past the CTA). Its centred
   framing comes from the embed's data-src-narrow settings. */
@media (max-width:991px) {
  .footer_cta {
    padding-bottom: 27rem;
  }
  .footer_cta_media.footer_cta_media .footer_cta_video.three_frame {
    inset: auto 0 26.5rem 0;
    width: 100%;
    height: 25.5rem;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
/* The wash behind the copy is sized in rem (not %) below 992px: the footer is now taller
   (the compass gap), and a % mask slid the dark part off the copy. */
@media (min-width:768px) and (max-width:991px) {
  .footer_cta_media.footer_cta_media::after {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 2rem, rgba(0,0,0,0.4) 6rem, rgba(0,0,0,0.85) 10rem, #000 12rem, #000 30rem, rgba(0,0,0,0.5) 36rem, transparent 42rem);
    mask-image: linear-gradient(180deg, transparent 0, transparent 2rem, rgba(0,0,0,0.4) 6rem, rgba(0,0,0,0.85) 10rem, #000 12rem, #000 30rem, rgba(0,0,0,0.5) 36rem, transparent 42rem);
  }
}
@media (max-width:767px) {
  .footer_cta_media.footer_cta_media::after {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 2rem, rgba(0,0,0,0.12) 5rem, rgba(0,0,0,0.3) 8rem, rgba(0,0,0,0.55) 11rem, rgba(0,0,0,0.8) 14rem, #000 16.5rem, #000 36rem, rgba(0,0,0,0.5) 42rem, transparent 48rem);
    mask-image: linear-gradient(180deg, transparent 0, transparent 2rem, rgba(0,0,0,0.12) 5rem, rgba(0,0,0,0.3) 8rem, rgba(0,0,0,0.55) 11rem, rgba(0,0,0,0.8) 14rem, #000 16.5rem, #000 36rem, rgba(0,0,0,0.5) 42rem, transparent 48rem);
  }
}

/* Tall portrait screens (e.g. iPad Pro): the "one screen tall" resources band left a big
   empty gap under the cards; it takes its content height there. */
@media (orientation: portrait) {
  .resources_section {
    min-height: 0;
  }
}
/* 992–1199px: the logo column + four link columns don't fit side by side; the logo and
   contact details run across the top, the link columns share one row below. */
@media (min-width:992px) and (max-width:1199px) {
  .footer_brand {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  .footer_nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .footer_col {
    min-width: 0;
  }
}

/* Touch screens at desktop width (iPad): a tap opens the menu instead of following the
   link, so each mega/dropdown panel shows its "View all …" link, as on mobile. */
@media (min-width:992px) and (hover: none), (min-width:992px) and (pointer: coarse) {
  .nav_mega_all {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding: 0 var(--_spacing---static--spacing-6);
    color: var(--_color---text--brand--3);
    font-size: var(--_typography---font-size--label-1);
    font-weight: 500;
    text-decoration: none;
  }
  .nav_mega_all_arrow {
    width: 1rem;
    height: 1rem;
  }
  /* Industries: the link is a row item between the columns; move it to its own row */
  .nav_mega_grid {
    flex-wrap: wrap;
  }
  .nav_mega_grid > .nav_mega_all {
    order: 99;
    flex: 0 0 100%;
    min-height: 3.5rem;
    border-top: 1px solid var(--_color---outline--hairline);
  }
  /* Services: the link sits between the columns and the CTA row */
  .nav_mega_right > .nav_mega_all {
    margin: var(--_spacing---static--spacing-2) 0 var(--_spacing---static--spacing-4);
  }
  /* Resources dropdown: the panel is wide, so align it to its trigger's right edge
     to keep it inside the nav bar on iPad-width screens */
  .nav_item_wrap.is-end .nav_dropdown_panel {
    left: auto;
    right: 0;
  }
  .nav_dropdown_panel .nav_mega_all {
    padding: 0;
  }
}

/* Service template hero: a static gear (Three.js, still) behind the case study card, so the
   right side is never empty when an article has no case study. Fades out into the light bottom. */
.svc_hero_gear {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 96%);
}
/* Portrait screens at desktop width (iPad Pro): the hero is taller than it is wide, which made the
   gear too big for its half of the hero, so it was cut off. Keep the desktop frame shape, pinned to the bottom. */
@media (min-width:992px) and (orientation: portrait) {
  .svc_hero_gear {
    top: auto;
    bottom: 6%;
    width: 72%;
    height: auto;
    aspect-ratio: 4 / 5;
  }
}
@media (max-width:991px) {
  .svc_hero_gear {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 82%;
  }
}

/* ══ Article template blocks ══════════════════════════════════════════════
   Optional pieces of the one article template. In Webflow each is a rich-text
   element or a CMS field with conditional visibility by Category (see HANDOFF). */
.article_eyebrow_row {
  flex-wrap: wrap;
  gap: var(--_spacing---static--spacing-3);
}
/* Case study summary (Case Study only) */
.article_case {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-6);
  margin-top: var(--_spacing---static--spacing-2);
  padding: var(--_spacing---static--spacing-8);
  border-radius: var(--rounding--xl);
  background-color: var(--_color---bg--default--1);
}
.article_case_facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--_spacing---static--spacing-6);
  margin: 0;
}
.article_case_fact {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-2);
}
.article_case_label {
  color: var(--_color---text--default--4);
  font-size: var(--_typography---font-size--label-2);
  line-height: var(--_typography---line-height--label-2);
  letter-spacing: var(--_typography---letter-spacing--label-2);
  text-transform: uppercase;
}
.article_case_value {
  margin: 0;
  color: var(--_color---text--default--1);
  font-size: var(--_typography---font-size--body-3);
  line-height: var(--_typography---line-height--body-3);
}
.article_case_stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--_spacing---static--spacing-6);
  margin: 0;
  padding: var(--_spacing---static--spacing-6) 0 0;
  border-top: 1px solid var(--_color---interactive--outline--active);
  list-style: none;
}
.article_case_stat {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-1);
}
.article_case_stat_value {
  color: var(--_color---text--brand--link);
  font-size: var(--_typography---font-size--title-3);
  line-height: 1.2;
  font-weight: 500;
}
.article_case_stat_label {
  color: var(--_color---text--default--3);
  font-size: var(--_typography---font-size--body-3);
  line-height: var(--_typography---line-height--body-3);
}

/* Key takeaways */
.article_takeaways {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-4);
  padding: var(--_spacing---static--spacing-6) var(--_spacing---static--spacing-8);
  border-radius: var(--rounding--xl);
  background-color: var(--_color---bg--default--1);
}
.article_body .article_takeaways_title {
  margin: 0;
  scroll-margin-top: 0;
}

/* Video placeholder (embed in Webflow) */
.article_video,
.article_figure {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-3);
  margin: var(--_spacing---static--spacing-2) 0;
}
.article_video_frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--rounding--xl);
  overflow: hidden;
  background-color: var(--_color---bg--inverted--bg);
}
.article_video_poster {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0.72;
}
.article_video_play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--rounding--full);
  background-color: var(--_color---bg--default--1);
  color: var(--_color---text--brand--3);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.article_video_play:hover {
  transform: translate(-50%, -50%) scale(1.06);
}
.article_video_play:focus-visible {
  outline: 0.1875rem solid var(--_color---text--inverted--1);
  outline-offset: 0.25rem;
}
.article_video_play_icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.1875rem;
}
.article_video_time {
  position: absolute;
  right: var(--_spacing---static--spacing-4);
  bottom: var(--_spacing---static--spacing-4);
  padding: 0.125rem var(--_spacing---static--spacing-2);
  border-radius: var(--rounding--sm);
  background-color: var(--_color---bg--inverted--bg);
  color: var(--_color---text--inverted--1);
  font-size: var(--_typography---font-size--label-2);
  line-height: var(--_typography---line-height--label-2);
}
.article_figure_img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--rounding--xl);
}
.article_figcaption {
  color: var(--_color---text--default--4);
  font-size: var(--_typography---font-size--label-2);
  line-height: var(--_typography---line-height--label-2);
}
.article_figcaption_link {
  color: var(--_color---text--brand--link);
  text-decoration: underline;
}
.article_figcaption_link:hover {
  color: var(--_color---text--brand--link-hover);
}

/* Pull quote attribution */
.article_pullquote_text {
  margin: 0;
  color: var(--_color---text--default--1);
}
.article_pullquote_cite {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--_spacing---static--spacing-2);
  font-size: var(--_typography---font-size--body-3);
  line-height: var(--_typography---line-height--body-3);
}
.article_pullquote_name {
  color: var(--_color---text--default--1);
  font-weight: 500;
}
.article_pullquote_role {
  color: var(--_color---text--default--4);
}

/* Inline call to action — the hero/CTA navy gradient */
.article_inline_cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_spacing---static--spacing-6);
  margin: var(--_spacing---static--spacing-2) 0;
  padding: var(--_spacing---static--spacing-8);
  border-radius: var(--rounding--xl);
  background: var(--_gradient---cta-dark-sky);
}
.article_inline_cta_copy {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-2);
}
.article_body .article_inline_cta_title,
.article_body .article_inline_cta_text {
  margin: 0;
  color: var(--_color---text--inverted--1);
}
.article_inline_cta .button_main_wrap {
  flex-shrink: 0;
}

/* Download card (Documents only) */
.article_download {
  display: flex;
  align-items: center;
  gap: var(--_spacing---static--spacing-5);
  margin: var(--_spacing---static--spacing-2) 0;
  padding: var(--_spacing---static--spacing-6);
  border-radius: var(--rounding--xl);
  background-color: var(--_color---bg--default--1);
}
.article_download_icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rounding--lg);
  background-color: var(--_color---bg--default--2);
  color: var(--_color---text--brand--link);
}
.article_download_icon svg {
  width: 1.5rem;
  height: 1.5rem;
}
.article_download_copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-1);
}
.article_body .article_download_title {
  margin: 0;
  color: var(--_color---text--default--1);
  font-weight: 500;
}
.article_body .article_download_meta {
  margin: 0;
  color: var(--_color---text--default--4);
  font-size: var(--_typography---font-size--label-2);
  line-height: var(--_typography---line-height--label-2);
}

/* Author box */
.article_author {
  display: flex;
  align-items: flex-start;
  gap: var(--_spacing---static--spacing-5);
  margin-top: var(--_spacing---static--spacing-12);
  padding-top: var(--_spacing---static--spacing-8);
  border-top: 1px solid var(--_color---interactive--outline--active);
}
.article_author_img {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: var(--rounding--full);
  object-fit: cover;
}
.article_author_copy {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---static--spacing-1);
}
.article_author_name,
.article_author_role,
.article_author_bio {
  margin: 0;
}
.article_author_name {
  color: var(--_color---text--default--1);
  font-size: var(--_typography---font-size--body-2);
  line-height: var(--_typography---line-height--body-2);
  font-weight: 500;
}
.article_author_role {
  color: var(--_color---text--default--4);
  font-size: var(--_typography---font-size--label-2);
  line-height: var(--_typography---line-height--label-2);
  text-transform: uppercase;
  letter-spacing: var(--_typography---letter-spacing--label-2);
}
.article_author_bio {
  margin-top: var(--_spacing---static--spacing-2);
  color: var(--_color---text--default--3);
  font-size: var(--_typography---font-size--body-3);
  line-height: var(--_typography---line-height--body-3);
}

/* Tablet + mobile flatten the article into one ordered column (see the article layout above):
   the case summary rides with the hero image, the author box with the body. */
@media (max-width:991px) {
  .article_case {
    order: 6;
    margin-top: 2rem;
  }
  .article_promo {
    width: 100%;
  }
  .article_author {
    order: 7;
  }
}
@media (max-width:767px) {
  .article_case,
  .article_inline_cta {
    padding: var(--_spacing---static--spacing-6);
  }
  .article_case_facts,
  .article_case_stats {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--_spacing---static--spacing-4);
  }
  .article_takeaways {
    padding: var(--_spacing---static--spacing-6);
  }
  .article_inline_cta,
  .article_download {
    flex-direction: column;
    align-items: flex-start;
  }
  .article_video_play {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* ══ Form errors ══════════════════════════════════════════════════════════
   Shown by script.js on submit (see validateForm). The message text is the cue;
   the red ring and colour only reinforce it. */
.contact_field_error {
  margin: 0;
  color: var(--_color---info--error);
  font-size: var(--_typography---font-size--label-2);
  line-height: var(--_typography---line-height--label-2);
}
.contact_field_error[hidden] {
  display: none;
}
.contact_field_input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--_color---info--error);
}
.contact_checkbox[aria-invalid="true"] {
  border-color: var(--_color---info--error);
  box-shadow: 0 0 0 1px var(--_color---info--error);
}

/* ══ Footer: a longer, smoother page-grey → sky transition (≥768) ═══════════
   The fade used to go from page grey to mid blue in ~120px, with the copy wash starting in the
   same band. The copy now starts 6rem lower and every ramp (sky, its top fade-in, the wash
   behind the copy) runs ~1.5× longer, so the blue arrives gradually; the eyebrow still sits on
   AA blue. */
@media (min-width:768px) {
  .footer_cta {
    padding-top: 19rem;
  }
  .footer_wrap {
    background-image: linear-gradient(180deg in oklab,var(--_color---bg--default--bg) 0%,var(--base--grey-94) 7%,var(--base--sky-90-2) 14.5%,var(--base--sky-85-2) 23%,var(--base--sky-77) 33%,var(--base--sky-71) 43.5%,var(--base--navy-11-a00) 60%,var(--base--navy-05-a50) 80%,var(--base--navy-11) 100%);
  }
  .footer_cta_media {
    background-image: linear-gradient(170deg in oklab, #eff1f3 0%, #eceff4 6%, #e2e9f4 11.5%, #d2e2f4 17%, #bcd5f2 23%, #a1c6f0 29%, #83b5ee 35%, #62a2ea 40.5%, #4592e8 46%, #2f8ce9 51%, #1f7add 56%, #1668cd 61%, #0b49a4 68%, #062c7c 77%, #051d60 85%, #05154c 92%, #080e2b 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.0000) 0.00%, rgba(0,0,0,0.0000) 0.60%, rgba(0,0,0,0.0002) 1.20%, rgba(0,0,0,0.0009) 1.80%, rgba(0,0,0,0.0027) 2.40%, rgba(0,0,0,0.0062) 3.00%, rgba(0,0,0,0.0121) 3.60%, rgba(0,0,0,0.0209) 4.20%, rgba(0,0,0,0.0333) 4.80%, rgba(0,0,0,0.0498) 5.40%, rgba(0,0,0,0.0706) 6.00%, rgba(0,0,0,0.0960) 6.60%, rgba(0,0,0,0.1260) 7.20%, rgba(0,0,0,0.1607) 7.80%, rgba(0,0,0,0.1998) 8.40%, rgba(0,0,0,0.2430) 9.00%, rgba(0,0,0,0.2898) 9.60%, rgba(0,0,0,0.3396) 10.20%, rgba(0,0,0,0.3917) 10.80%, rgba(0,0,0,0.4454) 11.40%, rgba(0,0,0,0.5000) 12.00%, rgba(0,0,0,0.5546) 12.60%, rgba(0,0,0,0.6083) 13.20%, rgba(0,0,0,0.6604) 13.80%, rgba(0,0,0,0.7102) 14.40%, rgba(0,0,0,0.7570) 15.00%, rgba(0,0,0,0.8002) 15.60%, rgba(0,0,0,0.8393) 16.20%, rgba(0,0,0,0.8740) 16.80%, rgba(0,0,0,0.9040) 17.40%, rgba(0,0,0,0.9294) 18.00%, rgba(0,0,0,0.9502) 18.60%, rgba(0,0,0,0.9667) 19.20%, rgba(0,0,0,0.9791) 19.80%, rgba(0,0,0,0.9879) 20.40%, rgba(0,0,0,0.9938) 21.00%, rgba(0,0,0,0.9973) 21.60%, rgba(0,0,0,0.9991) 22.20%, rgba(0,0,0,0.9998) 22.80%, rgba(0,0,0,1.0000) 23.40%, rgba(0,0,0,1.0000) 24.00%, #000 68.00%, rgba(0,0,0,0.9997) 69.78%, rgba(0,0,0,0.9960) 71.56%, rgba(0,0,0,0.9824) 73.33%, rgba(0,0,0,0.9523) 75.11%, rgba(0,0,0,0.9009) 76.89%, rgba(0,0,0,0.8267) 78.67%, rgba(0,0,0,0.7314) 80.44%, rgba(0,0,0,0.6200) 82.22%, rgba(0,0,0,0.5000) 84.00%, rgba(0,0,0,0.3800) 85.78%, rgba(0,0,0,0.2686) 87.56%, rgba(0,0,0,0.1733) 89.33%, rgba(0,0,0,0.0991) 91.11%, rgba(0,0,0,0.0477) 92.89%, rgba(0,0,0,0.0176) 94.67%, rgba(0,0,0,0.0040) 96.44%, rgba(0,0,0,0.0003) 98.22%, rgba(0,0,0,0.0000) 100.00%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.0000) 0.00%, rgba(0,0,0,0.0000) 0.60%, rgba(0,0,0,0.0002) 1.20%, rgba(0,0,0,0.0009) 1.80%, rgba(0,0,0,0.0027) 2.40%, rgba(0,0,0,0.0062) 3.00%, rgba(0,0,0,0.0121) 3.60%, rgba(0,0,0,0.0209) 4.20%, rgba(0,0,0,0.0333) 4.80%, rgba(0,0,0,0.0498) 5.40%, rgba(0,0,0,0.0706) 6.00%, rgba(0,0,0,0.0960) 6.60%, rgba(0,0,0,0.1260) 7.20%, rgba(0,0,0,0.1607) 7.80%, rgba(0,0,0,0.1998) 8.40%, rgba(0,0,0,0.2430) 9.00%, rgba(0,0,0,0.2898) 9.60%, rgba(0,0,0,0.3396) 10.20%, rgba(0,0,0,0.3917) 10.80%, rgba(0,0,0,0.4454) 11.40%, rgba(0,0,0,0.5000) 12.00%, rgba(0,0,0,0.5546) 12.60%, rgba(0,0,0,0.6083) 13.20%, rgba(0,0,0,0.6604) 13.80%, rgba(0,0,0,0.7102) 14.40%, rgba(0,0,0,0.7570) 15.00%, rgba(0,0,0,0.8002) 15.60%, rgba(0,0,0,0.8393) 16.20%, rgba(0,0,0,0.8740) 16.80%, rgba(0,0,0,0.9040) 17.40%, rgba(0,0,0,0.9294) 18.00%, rgba(0,0,0,0.9502) 18.60%, rgba(0,0,0,0.9667) 19.20%, rgba(0,0,0,0.9791) 19.80%, rgba(0,0,0,0.9879) 20.40%, rgba(0,0,0,0.9938) 21.00%, rgba(0,0,0,0.9973) 21.60%, rgba(0,0,0,0.9991) 22.20%, rgba(0,0,0,0.9998) 22.80%, rgba(0,0,0,1.0000) 23.40%, rgba(0,0,0,1.0000) 24.00%, #000 68.00%, rgba(0,0,0,0.9997) 69.78%, rgba(0,0,0,0.9960) 71.56%, rgba(0,0,0,0.9824) 73.33%, rgba(0,0,0,0.9523) 75.11%, rgba(0,0,0,0.9009) 76.89%, rgba(0,0,0,0.8267) 78.67%, rgba(0,0,0,0.7314) 80.44%, rgba(0,0,0,0.6200) 82.22%, rgba(0,0,0,0.5000) 84.00%, rgba(0,0,0,0.3800) 85.78%, rgba(0,0,0,0.2686) 87.56%, rgba(0,0,0,0.1733) 89.33%, rgba(0,0,0,0.0991) 91.11%, rgba(0,0,0,0.0477) 92.89%, rgba(0,0,0,0.0176) 94.67%, rgba(0,0,0,0.0040) 96.44%, rgba(0,0,0,0.0003) 98.22%, rgba(0,0,0,0.0000) 100.00%);
  }
  .footer_cta_media::after {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 10%, rgba(0,0,0,0.18) 14%, rgba(0,0,0,0.45) 18%, rgba(0,0,0,0.72) 22%, rgba(0,0,0,0.92) 26%, #000 29%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 10%, rgba(0,0,0,0.18) 14%, rgba(0,0,0,0.45) 18%, rgba(0,0,0,0.72) 22%, rgba(0,0,0,0.92) 26%, #000 29%);
  }
}