/* =================================================================
   SERVLOGI — DESIGN SYSTEM
   Component classes follow an AEM Core Components-style convention
   (cmp-<component>, cmp-<component>__<element>, is-<state>) so the
   markup can be lifted into HTL/Sightly templates with minimal change.
   ================================================================= */

/* ---------- tokens ---------- */
:root{
  /* color — surface (warm, light corporate palette) */
  --c-bg:            #ffffff;
  --c-bg-soft:       #f6f8fb;
  --c-bg-soft-2:     #eef2f8;
  --c-bg-warm:       #fdf3ee;
  --c-bg-dark:       #0e2e62;
  --c-bg-dark-soft:  #163a73;
  /* the two ends of the hero's navy ramp, named so the hero field is readable
     as a palette decision rather than three loose gradient stops */
  --c-bg-dark-lift:  #123a78;
  --c-bg-dark-deep:  #0a2450;
  --c-border:        #e4e8f0;
  --c-border-strong: #ccd4e2;
  --c-border-on-dark: rgba(255,255,255,.16);

  /* color — text */
  --c-text:            #0e2e62;
  --c-text-body:       #1c2430;
  --c-text-secondary:  #4a5568;
  /* the quiet tiers are set at the darkest value that still reads as quiet,
     because both carry real content: muted runs eyebrows and captions, faint
     runs the uppercase key labels in every spec and readout block. Measured
     against the five section backgrounds, the lightest pair that clears WCAG
     AA (4.5:1) at these small sizes is #5b6473 / #626b7c. */
  --c-text-muted:      #5b6473;
  --c-text-faint:      #626b7c;
  --c-text-on-dark:       #ffffff;
  --c-on-accent:          #ffffff;
  --c-text-on-dark-soft:  #cdd9ec;
  --c-text-on-dark-muted: #93a5c4;

  /* color — accent: working blue + warm peach secondary */
  --c-accent:        #0059a2;
  --c-accent-dim:    #00447f;
  --c-accent-soft:   #e5f0fa;
  --c-accent-2:      #fae8df;
  --c-accent-2-dim:  #f3d3c2;
  /* status hues, likewise pulled down until the small mono chips that use them
     clear AA on their own tint as well as on white */
  --c-green:         #177244;
  --c-amber:         #9d5700;
  --c-red:           #c23b3b;

  /* color — status tints. These derive from the accent/green/amber hues above
     and exist so state chips stop hardcoding one-off rgba() values that drift
     out of sync when the palette moves. */
  --c-accent-tint:   rgba(0,89,162,.07);
  --c-accent-line:   rgba(0,89,162,.30);
  --c-accent-hair:   rgba(0,89,162,.14);
  --c-green-tint:    rgba(23,114,68,.07);
  --c-green-line:    rgba(23,114,68,.30);
  --c-amber-tint:    rgba(157,87,0,.07);
  --c-amber-line:    rgba(157,87,0,.30);

  /* type */
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "SF Mono", ui-monospace, "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  /* type — weights. Named so a headline weight change is one edit, not thirty.
     Inter is loaded on its variable axis, so the 650 mid-step is real. */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-strong:  650;
  --fw-bold:    700;

  /* spacing */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 11rem;

  /* layout */
  --w-content: 1240px;
  --w-narrow: 760px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  /* the softest corner in the system, reserved for the full-width panels that
     carry a whole section on their own (offer band, next-step rows) */
  --radius-xl: 24px;
  --radius-pill: 999px;
  --nav-h: 76px;
  --notice-h: 40px;
  /* the in-page jump bar's height, needed by the scroll offsets of the
     sections it points at as well as by the bar itself */
  --anchornav-h: 56px;
  --header-h: calc(var(--nav-h) + var(--notice-h));
  /* anything sticky clears the fixed header plus a breathing gap. Sticky rules
     derive from this rather than repeating a magic pixel offset. */
  --sticky-top: calc(var(--header-h) + var(--s-5));

  /* motion */
  --ease: cubic-bezier(.16,.84,.44,1);
  --dur-fast: .18s;
  --dur:      .25s;
  --dur-slow: .4s;

  /* elevation + focus */
  --shadow-xs: 0 1px 2px rgba(14,46,98,.05);
  --shadow-s: 0 1px 2px rgba(14,46,98,.04), 0 2px 8px rgba(14,46,98,.05);
  --shadow-m: 0 4px 10px rgba(14,46,98,.06), 0 12px 28px rgba(14,46,98,.08);
  --shadow-l: 0 8px 16px rgba(14,46,98,.07), 0 24px 56px rgba(14,46,98,.12);
  --ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent);
  --ring-soft: 0 0 0 3px var(--c-accent-soft);
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  /* stop iOS Safari inflating type when a phone is turned to landscape */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* the header is fixed, so any in-page anchor target must reserve room for it or
   a #hash jump parks the heading underneath the nav */
:target,
[id]{ scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd{ margin: 0; }
ul[class], ol[class]{ list-style: none; margin: 0; padding: 0; }
/* height:auto keeps a constrained image in proportion instead of squashing it */
img, picture, svg, video{ display: block; max-width: 100%; }
img, video{ height: auto; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select{ font: inherit; color: inherit; }
/* long unbroken strings (URLs, key IDs, contract numbers) are the usual cause
   of a stray horizontal scrollbar on narrow screens */
p, li, dd, blockquote, h1, h2, h3, h4{ overflow-wrap: break-word; }

body{
  background: var(--c-bg);
  color: var(--c-text-body);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: var(--fw-regular);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* figures read as data, so they should align in a column and never reflow the
   line as digit widths change */
.mono, .eyebrow, .cmp-stats__value, .cmp-readout__cell dd, .cmp-quote-panel dd,
.cmp-quote-panel__price, .cmp-timeline__year, .cmp-doclist__date,
.cmp-disclosure__meta, .cmp-jobrow__meta, .cmp-listrow__index, .cmp-card__index{
  font-variant-numeric: tabular-nums;
}

::selection{ background: var(--c-accent); color: var(--c-on-accent); }

/* ---------- type scale ---------- */
/* Optical sizing rule of thumb applied here: as type gets larger, weight goes
   up and tracking goes negative, because Inter's default spacing is tuned for
   text sizes and looks loose at display sizes. Leading tightens the same way. */
/* text-wrap: balance is the one line of CSS that most separates a typeset
   headline from a wrapped one. It evens the ragged edge instead of leaving a
   long first line and one orphaned word, which at display size is the
   difference every visitor feels and none of them can name. */
h1, .h1{
  font-size: clamp(2.3rem, 4.4vw, 3.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: -.028em;
  line-height: 1.06;
  color: var(--c-text);
  text-wrap: balance;
}
h2, .h2{
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: var(--fw-strong);
  letter-spacing: -.021em;
  line-height: 1.16;
  color: var(--c-text);
  text-wrap: balance;
}
h3, .h3{
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  font-weight: var(--fw-semi);
  letter-spacing: -.012em;
  line-height: 1.32;
  color: var(--c-text);
}
h4, .h4{
  font-size: 1.02rem;
  font-weight: var(--fw-semi);
  letter-spacing: -.006em;
  line-height: 1.4;
  color: var(--c-text);
}
.eyebrow{
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: var(--fw-medium);
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--c-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.eyebrow::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}
.eyebrow--on-dark{ color: var(--c-text-on-dark-muted); }
.lede{
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: var(--c-text-secondary);
  line-height: 1.65;
  letter-spacing: -.004em;
  font-weight: var(--fw-regular);
  /* pretty rather than balance: a paragraph wants its full measure, it just
     does not want to end on a single orphaned word */
  text-wrap: pretty;
}
.mono{ font-family: var(--f-mono); }
.text-muted{ color: var(--c-text-muted); }

/* An eyebrow is always a kicker above something. Zero-specificity via :where()
   so any component that wants a different gap simply states it and wins. */
:where(.eyebrow + *){ margin-top: var(--s-4); }

/* Inline links inside prose components. These read as body copy, so the link
   has to be underlined to be identifiable without relying on color alone. */
.lede a,
.cmp-faq__answer a,
.cmp-readout__cell a,
.cmp-disclosure__body a,
.cmp-attribution-note a{
  color: var(--c-accent-dim);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--dur-fast);
}
.lede a:hover,
.cmp-faq__answer a:hover,
.cmp-readout__cell a:hover,
.cmp-disclosure__body a:hover,
.cmp-attribution-note a:hover{ color: var(--c-accent); }

/* ---------- layout helpers ---------- */
.wrap{
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--s-6);
}
.section{ padding-block: var(--s-9); position: relative; }
.section--tight{ padding-block: var(--s-7); }
.section--border-t{ border-top: 1px solid var(--c-border); }
/* a calm, low-contrast field for a band of content to sit on, so cards and
   text read as floating rather than boxed in by a hairline on white */
.section--wash{ background: var(--c-bg-soft); }
.section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-6);
  margin-bottom: var(--s-7);
}
.section-head__title{ max-width: 640px; }
.section-head__title p{ margin-top: var(--s-4); }
/* the head's trailing action sits on the heading's baseline block, so nudge it
   off the bottom edge rather than letting flex-end glue it to the descender */
.section-head > .btn{ flex-shrink: 0; margin-bottom: 2px; }

@media (max-width: 720px){
  .wrap{ padding-inline: var(--s-5); }
  .section{ padding-block: var(--s-7); }
  .section-head{ flex-direction: column; align-items: flex-start; gap: var(--s-4); }
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: .8em 1.4em;
  font-size: .9rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: -.005em;
  border-radius: var(--radius-s);
  white-space: nowrap;
  border: 1px solid transparent;
  /* enumerated rather than `all`, so a hover never animates a layout property
     by accident and every state change stays on the compositor */
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
/* the lift is the shared micro-interaction: every button rises 1px on hover and
   settles back under the press */
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0) scale(.985); transition-duration: .06s; }
.btn:focus-visible{ outline: none; box-shadow: var(--ring); }

.btn--primary{
  background: var(--c-accent);
  color: var(--c-on-accent);
  box-shadow: var(--shadow-xs);
}
.btn--primary:hover{ background: var(--c-accent-dim); box-shadow: var(--shadow-m); }
.btn--secondary{
  background: var(--c-accent-2);
  color: var(--c-text);
}
.btn--secondary:hover{ background: var(--c-accent-2-dim); box-shadow: var(--shadow-s); }
.btn--on-dark{
  background: var(--c-bg);
  color: var(--c-accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
}
.btn--on-dark:hover{ background: var(--c-accent-soft); box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.btn--on-dark:focus-visible{ box-shadow: 0 0 0 2px var(--c-bg-dark), 0 0 0 4px var(--c-bg); }
.btn--ghost{
  border-color: var(--c-border-strong);
  color: var(--c-text);
  background: transparent;
}
.btn--ghost:hover{ border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-soft); }
.btn--ghost-on-dark{
  border-color: var(--c-border-on-dark);
  color: var(--c-text-on-dark);
  background: transparent;
}
.btn--ghost-on-dark:hover{ border-color: var(--c-text-on-dark); background: rgba(255,255,255,.10); }
.btn--ghost-on-dark:focus-visible{ box-shadow: 0 0 0 2px var(--c-bg-dark), 0 0 0 4px var(--c-bg); }
.btn--arrow::after{
  content: "→";
  transition: transform var(--dur-slow) var(--ease);
}
.btn--arrow:hover::after{ transform: translateX(3px); }
.btn--sm{ padding: .55em 1.1em; font-size: .8rem; }

/* ---------- badge / pill ---------- */
.badge{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: .4em .85em;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--c-text-secondary);
  background: var(--c-bg-soft);
}

/* ---------- navigation (cmp-navigation) ---------- */
.cmp-navigation{
  position: fixed;
  top: var(--notice-h, 0px); left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition:
    box-shadow var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease),
    background-color var(--dur-slow) var(--ease);
}
/* the bar is chromeless over the hero and earns its rule and shadow only once
   content starts passing underneath it */
.cmp-navigation.is-scrolled{
  background: rgba(255,255,255,.94);
  border-bottom-color: var(--c-border);
  box-shadow: 0 8px 24px rgba(14,46,98,.06);
}
.cmp-navigation__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}
.cmp-navigation__logo{
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: var(--fw-semi);
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--c-text);
}
.cmp-navigation__logo svg{ width: 24px; height: 24px; }
.cmp-navigation__logo-img{
  height: 26px;
  width: auto;
  display: block;
}
.cmp-navigation__logo small,
.cmp-navigation__tagline{
  display: block;
  font-family: var(--f-mono);
  font-size: .58rem;
  font-weight: var(--fw-medium);
  letter-spacing: .18em;
  color: var(--c-text-muted);
  margin-top: 1px;
}
.cmp-navigation__tagline{
  padding-left: .7rem;
  margin-left: .1rem;
  border-left: 1px solid var(--c-border-strong);
  white-space: nowrap;
}
.cmp-footer__brand .cmp-navigation__logo-img{ height: 24px; }
.cmp-navigation__links{
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: 100%;
}
.cmp-navigation__links > a{
  font-size: .87rem;
  font-weight: var(--fw-medium);
  letter-spacing: -.005em;
  color: var(--c-text-secondary);
  position: relative;
  padding-block: 4px;
  transition: color var(--dur-fast) var(--ease);
}
.cmp-navigation__links > a:hover{ color: var(--c-text); }
.cmp-navigation__links > a.is-active{ color: var(--c-text); font-weight: var(--fw-semi); }
.cmp-navigation__links > a:focus-visible,
.cmp-navitem__trigger:focus-visible{
  outline: none;
  color: var(--c-text);
  box-shadow: var(--ring);
  border-radius: 3px;
}
.cmp-navigation__links > a.is-active::after,
.cmp-navitem.is-active > .cmp-navitem__trigger::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
}

/* ---------- mega-menu nav item (cmp-navitem) ---------- */
.cmp-navitem{ position: relative; height: 100%; display: flex; align-items: center; }
.cmp-navitem__trigger{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .87rem;
  font-weight: var(--fw-medium);
  letter-spacing: -.005em;
  font-family: inherit;
  color: var(--c-text-secondary);
  position: relative;
  padding-block: 4px;
  transition: color var(--dur-fast) var(--ease);
}
.cmp-navitem__trigger:hover{ color: var(--c-text); }
.cmp-navitem.is-open .cmp-navitem__trigger{ color: var(--c-text); }
.cmp-navitem__chevron{
  width: 9px; height: 9px;
  transition: transform .25s var(--ease);
  flex-shrink: 0;
}
.cmp-navitem.is-open .cmp-navitem__chevron{ transform: rotate(180deg); }
.cmp-navitem__panel{
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 320px;
  max-width: calc(100vw - var(--s-6) * 2);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-l);
  padding: var(--s-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cmp-navitem.is-open .cmp-navitem__panel{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
/* invisible bridge across the trigger-to-panel gap, so travelling the pointer
   down into the panel does not fire mouseleave and close it */
.cmp-navitem__panel::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -16px;
  height: 16px;
}
.cmp-navitem__link{
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--radius-s);
  transition: background-color var(--dur-fast) var(--ease);
}
.cmp-navitem__link:hover{ background: var(--c-bg-soft); }
.cmp-navitem__link:focus-visible{ outline: none; background: var(--c-bg-soft); box-shadow: var(--ring); }
.cmp-navitem__link-icon{
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: var(--radius-s);
  background: var(--c-accent-soft);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur-fast) var(--ease);
}
.cmp-navitem__link:hover .cmp-navitem__link-icon{ background: var(--c-accent); }
.cmp-navitem__link:hover .cmp-navitem__link-icon svg{ color: var(--c-on-accent); }
.cmp-navitem__link-icon svg{ width: 17px; height: 17px; color: var(--c-accent); transition: color var(--dur-fast) var(--ease); }
.cmp-navitem__link-title{ display: block; font-size: .88rem; font-weight: var(--fw-semi); letter-spacing: -.008em; color: var(--c-text); }
.cmp-navitem__link-desc{ display: block; margin-top: 2px; font-size: .78rem; color: var(--c-text-muted); line-height: 1.45; }
.cmp-navitem__link.is-active{ background: var(--c-accent-soft); }
.cmp-navgroup.is-active-group .cmp-navgroup__trigger{ color: var(--c-accent); }
.cmp-navigation__actions{ display: flex; align-items: center; gap: var(--s-5); }
.cmp-navigation__toggle{
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* 44px keeps the target at the minimum comfortable touch size */
  width: 44px; height: 44px;
  margin-right: -8px;
  border-radius: var(--radius-s);
  transition: background-color var(--dur-fast) var(--ease);
}
.cmp-navigation__toggle:hover{ background: var(--c-bg-soft); }
.cmp-navigation__toggle:focus-visible{ outline: none; box-shadow: var(--ring); }
.cmp-navigation__toggle span{
  width: 20px; height: 2px; background: var(--c-text);
  border-radius: 2px;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-fast) var(--ease);
}
/* the three bars fold into an X while the panel is open. 7px is the bar height
   plus the 5px gap, so the outer bars land exactly on the middle one. */
.cmp-navigation__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.cmp-navigation__toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; transform: scaleX(.4); }
.cmp-navigation__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.cmp-navigation__mobile{
  display: none;
  position: fixed;
  /* .cmp-navigation carries a backdrop-filter, which makes it the containing
     block for fixed descendants. This panel is therefore positioned against
     the nav bar (top: 100%) rather than against the viewport. */
  top: 100%;
  left: 0; right: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  background: rgba(255,255,255,.99);
  padding: var(--s-7) var(--s-5) var(--s-8);
  flex-direction: column;
  gap: var(--s-6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
body.nav-open .cmp-navigation__mobile{
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.cmp-navigation__mobile-links{
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
/* Only top-level entries get the large size. Scoping this with `>` matters:
   the previous `a:not(.btn)` form outweighed the nested-link rule below it on
   specificity, so sub-links in an open group rendered at the same size as the
   group headings and the menu read as one flat list. */
.cmp-navigation__mobile-links > a{
  font-size: 1.35rem;
  font-weight: var(--fw-medium);
  letter-spacing: -.018em;
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* comfortable thumb target without visibly changing the rhythm */
  padding-block: 2px;
}
.cmp-navigation__mobile a[aria-current="page"],
.cmp-navigation__mobile a.is-active{ color: var(--c-accent); }
.cmp-navigation__mobile .btn{ margin-top: var(--s-6); justify-content: center; }

/* mobile mega-menu groups: collapsible sections instead of hover panels */
.cmp-navgroup__trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 1.35rem;
  font-weight: var(--fw-medium);
  letter-spacing: -.018em;
  color: var(--c-text);
  font-family: inherit;
  padding-block: 2px;
}
.cmp-navgroup__trigger:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: var(--radius-s); }
.cmp-navgroup__trigger .cmp-navitem__chevron{ width: 12px; height: 12px; color: var(--c-text-faint); }
.cmp-navgroup.is-open .cmp-navgroup__trigger{ color: var(--c-accent); }
.cmp-navgroup.is-open .cmp-navgroup__trigger .cmp-navitem__chevron{ transform: rotate(180deg); color: var(--c-accent); }
.cmp-navgroup__panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease);
}
.cmp-navgroup.is-open .cmp-navgroup__panel{ max-height: 480px; }
/* the sub-list is indented behind a hairline so an open group reads as a
   branch of its heading rather than more top-level entries */
.cmp-navgroup__panel-inner{
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4) 0 var(--s-2) var(--s-4);
  margin-top: var(--s-2);
  border-left: 2px solid var(--c-border);
}
.cmp-navgroup__panel-inner a{ font-size: 1rem; font-weight: var(--fw-medium); color: var(--c-text-secondary); }
.cmp-navgroup__panel-inner a span{ display: block; font-size: .8rem; font-weight: var(--fw-regular); color: var(--c-text-muted); margin-top: 2px; }
/* stop the page behind the panel from scrolling while it is open */
body.nav-open{ overflow: hidden; }

/* the primary nav is grouped into dropdowns (mega-menu), so it collapses earlier than the grid does */
@media (max-width: 1240px){
  .cmp-navigation__tagline{ display: none; }
}
@media (max-width: 1180px){
  .cmp-navigation__links{ display: none; }
  .cmp-navigation__actions .btn{ display: none; }
  .cmp-navigation__toggle{ display: flex; }
  .cmp-navigation__mobile{ display: flex; }
}

/* ---------- full-bleed dark hero (cmp-hero-dark) ---------- */
.cmp-hero-dark{
  position: relative;
  /* the hero is always a direct child of <main>, which is already full width.
     100vw would include the scrollbar gutter and overhang the viewport. */
  width: 100%;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  background: var(--c-bg-dark);
  overflow: hidden;
  /* clearing --header-h alone puts the first line of hero copy flush against
     the bottom edge of the fixed chrome (and a pixel under it, since the nav
     carries a bottom border the token does not count). The gap is part of the
     clearance, not decoration. */
  padding-top: calc(var(--header-h) + var(--s-6));
}
.cmp-hero-dark--tall{ min-height: 760px; }
/* the hero eyebrow takes the same step up the offer band's does: on the light
   end of the navy ramp --c-text-on-dark-muted sits just under AA */
.cmp-hero-dark .eyebrow--on-dark{ color: var(--c-text-on-dark-soft); }
/* The hero artwork is a light one: pale mint at the top, bright cyan through
   the lower half. Rather than laying navy over it and hoping, the image is
   multiplied into the brand navy underneath, which keeps every wave and edge in
   the composition while pulling the whole frame into the palette's own range.
   White copy therefore reads on it at least as well as it did on flat navy.
   The two brand washes then sit on top at partial alpha.

   Each nav section takes a different crop and a different point on the navy
   ramp through the four custom properties below, so the pages read as one
   family photographed from four angles rather than one image repeated. */
.cmp-hero-dark__field{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at var(--hero-glow, 88% 12%), rgba(250,232,223,.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 8% 100%, rgba(0,89,162,.26), transparent 65%),
    linear-gradient(var(--hero-ramp, 155deg), rgba(18,58,120,.55) 0%, rgba(14,46,98,.40) 50%, rgba(8,28,62,.72) 100%),
    var(--hero-base, var(--c-bg-dark)) url("../img/herobg.jpg") var(--hero-crop, center) / cover no-repeat;
  background-blend-mode: normal, normal, normal, multiply;
}
/* the artwork carries the movement the grid overlay was standing in for, so the
   grid drops back to a trace rather than competing with it */
.cmp-hero-dark__grid{ opacity: .35; }

/* Platform: the crest of the wave, on the lighter end of the ramp */
.cmp-hero-dark--rise{
  --hero-crop: 50% 0%;
  --hero-base: var(--c-bg-dark-lift);
  --hero-ramp: 125deg;
  --hero-glow: 82% 8%;
}
/* Trust and commercial terms: the deepest, steadiest crop */
.cmp-hero-dark--deep{
  --hero-crop: 50% 100%;
  --hero-base: var(--c-bg-dark-deep);
  --hero-ramp: 190deg;
  --hero-glow: 92% 4%;
}
/* Resources: the long horizontal drift on the left of the frame */
.cmp-hero-dark--drift{
  --hero-crop: 0% 45%;
  --hero-ramp: 145deg;
  --hero-glow: 96% 18%;
}
/* Company: the far side of the same sweep */
.cmp-hero-dark--shore{
  --hero-crop: 100% 55%;
  --hero-ramp: 168deg;
  --hero-glow: 12% 10%;
}
/* a vignette at the foot of the hero settles the copy against the gradient and
   gives the stats strip a darker edge to overlap onto */
.cmp-hero-dark__field::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8,28,62,.55) 100%);
}
.cmp-hero-dark__grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, transparent, #000 50%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%, #000 100%);
}
.cmp-hero-dark__nodes{ position: absolute; inset: 0; opacity: .55; }
.cmp-hero-dark__content{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding: 0 var(--s-6) var(--s-9);
}
.cmp-hero-dark__title{
  color: var(--c-text-on-dark);
  /* headlines here are descriptive sentences, not 3-word fragments, so the
     measure has to be wide enough to land them in 2 to 3 lines */
  max-width: 24ch;
  margin-top: var(--s-5);
}
.cmp-hero-dark__lede{
  color: var(--c-text-on-dark-soft);
  max-width: 54ch;
  margin-top: var(--s-5);
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.65;
}
.cmp-hero-dark__actions{ display: flex; gap: var(--s-4); margin-top: var(--s-7); flex-wrap: wrap; }

/* ---------- split hero (cmp-hero-dark--split), home page only ----------
   A two-column variant: copy on the left, a live-status panel on the right,
   in place of the single centered column every other page uses. Scoped to
   a modifier class rather than changed on .cmp-hero-dark itself, since that
   base class is shared by every page's hero and this layout is not. */
.cmp-hero-dark--split .cmp-hero-dark__content{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: var(--s-9);
}
.cmp-hero-dark--split .cmp-hero-dark__title,
.cmp-hero-dark--split .cmp-hero-dark__lede{ max-width: none; }
/* The home headline is the one line of type on the site that has to carry the
   whole proposition, so it is set larger and tracked tighter than the shared
   h1. Inter's spacing is tuned for text sizes and reads loose past 3.5rem. */
.cmp-hero-dark--split .cmp-hero-dark__title{
  font-size: clamp(2.4rem, 4.6vw, 4.15rem);
  letter-spacing: -.036em;
  line-height: 1.02;
}
.cmp-hero-dark--split .cmp-hero-dark__lede{
  font-size: clamp(1.06rem, 1.35vw, 1.24rem);
  max-width: 46ch;
  text-wrap: pretty;
}

.cmp-hero-dark__panel{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-l);
  padding: var(--s-6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-l);
}
.cmp-hero-dark__panel-head{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* --c-text-on-dark-muted measures right at the 4.5:1 AA edge against this
     panel's translucent backdrop; --on-dark-soft carries a real margin */
  color: var(--c-text-on-dark-soft);
  margin-bottom: var(--s-5);
}
.cmp-hero-dark__panel-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-green);
  box-shadow: 0 0 0 4px rgba(23,114,68,.22);
  flex-shrink: 0;
}
.cmp-hero-dark__panel-rows{ display: flex; flex-direction: column; margin: 0; }
.cmp-hero-dark__panel-rows > div{
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .87rem;
}
.cmp-hero-dark__panel-rows > div:first-child{ border-top: 0; padding-top: 0; }
.cmp-hero-dark__panel-rows dt{ margin: 0; color: var(--c-text-on-dark-soft); }
.cmp-hero-dark__panel-rows dd{
  margin: 0;
  font-family: var(--f-mono);
  font-weight: var(--fw-medium);
  color: var(--c-text-on-dark);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cmp-hero-dark__panel-rows dd.is-verified{ color: #6ee7a8; }
.cmp-hero-dark__panel-foot{
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--c-text-on-dark-soft);
}

@media (max-width: 980px){
  .cmp-hero-dark--split .cmp-hero-dark__content{ grid-template-columns: 1fr; }
  .cmp-hero-dark__panel{ max-width: 440px; }
}
@media (max-width: 720px){
  .cmp-hero-dark__panel{ max-width: none; }
}

/* The stats strip is the page's first proof point, so it straddles the hero
   edge instead of starting a new band below it. The overlap is applied to the
   section that directly follows the hero, which is why it needs no markup
   change and stays correct on any page that adopts the same order. */
.cmp-hero-dark + .wrap > .cmp-stats,
.cmp-hero-dark + .section > .cmp-stats{
  margin-top: calc(var(--s-8) * -1);
  position: relative;
  z-index: 3;
}
.cmp-hero-dark + .wrap{ padding-bottom: var(--s-4); }

/* When an in-page jump bar sits between the hero and the strip, the bar owns
   the hero edge and the overlap above cannot apply: its selector is adjacent,
   and the strip is no longer adjacent to anything dark. Without this the strip
   inherits no vertical space at all and butts against the sticky bar above it
   and the next section's wash below it. It becomes a band in its own right and
   takes its own rhythm, with the larger half below, where the background
   changes colour. */
.cmp-anchornav + .wrap > .cmp-stats,
.cmp-anchornav + .section > .cmp-stats{
  margin-block: var(--s-7) var(--s-8);
}

@media (max-width: 720px){
  /* the same clearance-plus-gap as the desktop rule, one step tighter */
  .cmp-hero-dark{ min-height: 460px; padding-top: calc(var(--header-h) + var(--s-5)); }
  .cmp-hero-dark--tall{ min-height: 560px; }
  .cmp-hero-dark__content{ padding-bottom: var(--s-8); }
  /* at one card per row the overlap would hang the whole strip off the hero,
     so it sits below the fold line instead */
  .cmp-hero-dark + .wrap > .cmp-stats,
  .cmp-hero-dark + .section > .cmp-stats{ margin-top: calc(var(--s-6) * -1); }
  .cmp-anchornav + .wrap > .cmp-stats,
  .cmp-anchornav + .section > .cmp-stats{ margin-block: var(--s-6); }
}

/* ---------- stats strip (cmp-stats) ---------- */
.cmp-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.cmp-stats__item{
  padding: var(--s-6) var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cmp-stats__item:hover{ transform: translateY(-2px); box-shadow: var(--shadow-l); }
/* the numbers are the proof, so they get display treatment rather than being
   set at heading size and left to compete with their own captions */
.cmp-stats__value{
  font-size: clamp(1.8rem, 2.9vw, 2.7rem);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  letter-spacing: -.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.cmp-stats__label{
  margin-top: var(--s-3);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--c-text-muted);
  text-wrap: pretty;
}
@media (max-width: 900px){
  .cmp-stats{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px){
  .cmp-stats{ grid-template-columns: 1fr; }
  .cmp-stats__item{ padding: var(--s-5); }
}

/* ---------- numbered list rows (cmp-listrows) — signature Palantir pattern ---------- */
.cmp-listrows{ display: flex; flex-direction: column; }
.cmp-listrow{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-6);
  padding-block: var(--s-7);
  padding-inline: var(--s-5);
  /* the inline padding is negated so the rule still spans the full measure
     while the hover fill has room to breathe around the copy */
  margin-inline: calc(var(--s-5) * -1);
  border-top: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  transition: background-color var(--dur) var(--ease);
}
.cmp-listrows > .cmp-listrow:first-child{ border-top: 0; }
.cmp-listrow:hover{ background: var(--c-bg-soft); }
.cmp-listrow:focus-visible{ outline: none; background: var(--c-bg-soft); box-shadow: var(--ring); }
.cmp-listrow__main{ display: flex; flex-direction: column; gap: var(--s-3); }
.cmp-listrow__title{
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: var(--fw-semi);
  letter-spacing: -.026em;
  line-height: 1.15;
  color: var(--c-text);
}
.cmp-listrow__desc{ color: var(--c-text-secondary); max-width: 56ch; font-size: .95rem; line-height: 1.65; }
.cmp-listrow__meta{
  display: flex;
  align-items: center;
  gap: var(--s-6);
  justify-self: end;
}
.cmp-listrow__index{ font-family: var(--f-mono); font-size: .78rem; color: var(--c-text-faint); }
.cmp-listrow__arrow{
  flex-shrink: 0;
  width: 38px; height: 38px;
  border: 1px solid var(--c-border-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  transition:
    transform var(--dur-slow) var(--ease),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.cmp-listrow:hover .cmp-listrow__arrow{ background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); transform: rotate(45deg); }

@media (max-width: 720px){
  .cmp-listrow{ grid-template-columns: 1fr; gap: var(--s-4); }
  .cmp-listrow__meta{ justify-self: start; }
  /* .wrap is already down to its minimum gutter here, so bleeding the row
     outward would put copy against the viewport edge */
  .cmp-listrow{ padding-inline: 0; margin-inline: 0; }
}

/* ---------- card group (cmp-cardgroup) ---------- */
.cmp-cardgroup{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.cmp-card{
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  padding: var(--s-7) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow: hidden;
  transition:
    box-shadow var(--dur-slow) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur-slow) var(--ease);
}
/* an accent rule wipes across the top edge on hover. It reads as the card
   becoming "selected" without moving any of the content inside it. */
.cmp-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.cmp-card:hover{ box-shadow: var(--shadow-m); border-color: var(--c-border-strong); transform: translateY(-3px); }
.cmp-card:hover::before, .cmp-card:focus-visible::before{ transform: scaleX(1); }
.cmp-card:focus-visible{ outline: none; box-shadow: var(--ring); border-color: var(--c-accent); }
.cmp-card__index{
  font-family: var(--f-mono);
  font-size: .75rem;
  color: var(--c-text-faint);
}
.cmp-card__icon{
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent-soft);
  border-radius: var(--radius-m);
  margin-bottom: var(--s-2);
  box-shadow: inset 0 0 0 1px var(--c-accent-hair);
  transition: background-color var(--dur) var(--ease);
}
.cmp-card:hover .cmp-card__icon{ background: var(--c-accent); }
.cmp-card:hover .cmp-card__icon svg{ color: var(--c-on-accent); }
.cmp-card__icon svg{ width: 22px; height: 22px; color: var(--c-accent); transition: color var(--dur) var(--ease); }
.cmp-card p{ color: var(--c-text-secondary); font-size: .92rem; line-height: 1.65; }
.cmp-card__link{
  margin-top: auto;
  padding-top: var(--s-4);
  font-size: .85rem;
  font-weight: var(--fw-semi);
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.cmp-card__link::after{ content: "→"; transition: transform .3s var(--ease); }
.cmp-card:hover .cmp-card__link::after{ transform: translateX(3px); }

/* 3 -> 2 -> 1 rather than 3 -> 1, so tablets do not get a single column of
   very wide cards with a short measure inside them */
@media (max-width: 980px){
  .cmp-cardgroup{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .cmp-cardgroup{ grid-template-columns: 1fr; }
}

/* ---------- certification grid (cmp-certgrid) ---------- */
.cmp-certgrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.cmp-certgrid__cell{
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  padding: var(--s-6);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.cmp-certgrid__cell:hover{ border-color: var(--c-border-strong); box-shadow: var(--shadow-s); }
.cmp-certgrid__cell h4{ margin-bottom: var(--s-2); }
.cmp-certgrid__cell p{ color: var(--c-text-muted); font-size: .85rem; line-height: 1.6; }
@media (max-width: 900px){ .cmp-certgrid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .cmp-certgrid{ grid-template-columns: 1fr; } }

/* ---------- logo / compliance strip (cmp-marquee) ---------- */
.cmp-marquee{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
/* Fourteen filled pills in a row read as a solid block of accent. Outlined by
   default with a tinted hover keeps the list scannable as individual items. */
.cmp-marquee__item{
  font-family: var(--f-sans);
  font-size: .8rem;
  font-weight: var(--fw-medium);
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--c-text);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  padding: .55em 1.1em;
  background: var(--c-bg);
  box-shadow: var(--shadow-xs);
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur) var(--ease);
}
.cmp-marquee__item:hover{
  background: var(--c-accent-soft);
  border-color: var(--c-accent-line);
  transform: translateY(-1px);
}

/* ---------- feature row (cmp-feature) ---------- */
.cmp-feature{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: var(--s-9);
  align-items: center;
  padding-block: var(--s-9);
  border-top: 1px solid var(--c-border);
}
.cmp-feature:first-of-type{ border-top: 0; }
.cmp-feature--reverse{ direction: rtl; }
.cmp-feature--reverse > *{ direction: ltr; }
/* the first feature in a section opens the band, so it carries no divider and
   no leading gap. This replaces a `border-top:0; padding-top:0` inline style
   that was repeated on ten pages. */
.cmp-feature--flush{ border-top: 0; padding-top: 0; }
.cmp-feature__title{ margin-bottom: var(--s-4); }
.cmp-feature__list{ margin-top: var(--s-6); display: flex; flex-direction: column; gap: 0; }
.cmp-feature__list li{
  display: flex;
  gap: var(--s-4);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--c-text-secondary);
  padding-block: var(--s-4);
  border-top: 1px solid var(--c-border);
}
.cmp-feature__list li:first-child{ border-top: 0; padding-top: 0; }
.cmp-feature__list li strong{
  color: var(--c-text);
  font-weight: var(--fw-semi);
  min-width: 34%;
  flex-shrink: 0;
}
.cmp-feature__visual{
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background:
    radial-gradient(ellipse 70% 70% at 50% 0%, var(--c-bg), transparent 70%),
    var(--c-bg-soft);
  aspect-ratio: 4/3.2;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

@media (max-width: 900px){
  .cmp-feature, .cmp-feature--reverse{ grid-template-columns: 1fr; direction: ltr; gap: var(--s-7); }
  .cmp-feature__list li strong{ min-width: 40%; }
}
@media (max-width: 520px){
  /* label and value stack once 40% of the row is too narrow to hold the label */
  .cmp-feature__list li{ flex-direction: column; gap: var(--s-1); }
  .cmp-feature__list li strong{ min-width: 0; }
}

/* ---------- data readout grid (cmp-readout) ---------- */
.cmp-readout{
  display: grid;
  /* same track-floor guard as .cmp-pubgrid */
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--s-4);
}
.cmp-readout__cell{
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  padding: var(--s-6);
  transition: background-color var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cmp-readout__cell:hover{ background: var(--c-bg-soft); border-color: var(--c-border-strong); }
.cmp-readout__cell dt{
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-bottom: var(--s-3);
}
.cmp-readout__cell dd{
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--fw-semi);
  letter-spacing: -.018em;
  line-height: 1.3;
  color: var(--c-text);
}
.cmp-readout__cell dd span{
  display: block;
  margin-top: var(--s-2);
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--c-text-muted);
}

/* The two-tone CTA band (cmp-ctaband) and the centered CTA card (cmp-cta)
   used to sit here. Every page now closes on cmp-nextsteps, so both were
   removed. The AEM component definitions still exist under
   apps/servlogi/components/content/ and keep their own rules in the
   servlogi.site clientlib. */

/* ---------- quote (cmp-quote) ---------- */
.cmp-quote{
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--s-9);
}
.cmp-quote blockquote{
  max-width: 820px;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: var(--fw-medium);
  letter-spacing: -.022em;
  line-height: 1.42;
  color: var(--c-text);
  text-wrap: pretty;
}
.cmp-quote cite{
  display: block;
  margin-top: var(--s-6);
  font-style: normal;
  font-size: .85rem;
  color: var(--c-text-muted);
}
.cmp-quote cite strong{ color: var(--c-text-secondary); }

/* ---------- footer (cmp-footer) ---------- */
.cmp-footer{
  border-top: 1px solid var(--c-border);
  padding-block: var(--s-9) var(--s-7);
  background: var(--c-bg-soft);
}
.cmp-footer__top{
  display: grid;
  grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
  padding-bottom: var(--s-8);
}
.cmp-footer__brand{ display: flex; flex-direction: column; gap: var(--s-4); max-width: 300px; }
.cmp-footer__brand .cmp-navigation__logo{ font-size: 1rem; }
/* The footer sits on --c-bg-soft rather than white, which costs roughly 0.3 of
   a contrast point. Every low-emphasis role in here therefore steps up to
   --c-text-secondary: on #f6f8fb that is 7.07:1, against 5.62:1 for
   --c-text-muted and 5.04:1 for --c-text-faint. All three clear AA, but the
   footer is the densest small type on the page and takes the widest margin. */
.cmp-footer__brand p{ font-size: .85rem; line-height: 1.65; color: var(--c-text-secondary); }
.cmp-footer__heading{
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--c-text-secondary);
  margin-bottom: var(--s-4);
}
.cmp-footer__links{ display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
/* standalone links in a list are not the inline exception to WCAG 2.2 target
   size, so each one carries its own 24px row rather than relying on the gap */
.cmp-footer__links a{
  display: flex;
  align-items: center;
  min-height: 24px;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--c-text-secondary);
  transition: color var(--dur-fast) var(--ease);
}
.cmp-footer__links a:hover{ color: var(--c-accent); }
.cmp-footer__links a:focus-visible{ outline: none; color: var(--c-accent); box-shadow: var(--ring); border-radius: 3px; }
.cmp-footer__bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border-strong);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--c-text-secondary);
  flex-wrap: wrap;
  gap: var(--s-4);
}
.cmp-footer__legal{ display: flex; gap: var(--s-6); flex-wrap: wrap; }
.cmp-footer__socials{ display: flex; gap: var(--s-4); flex-wrap: wrap; }
.cmp-footer__socials a,
.cmp-footer__legal a{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--c-text-secondary);
  transition: color var(--dur-fast) var(--ease);
}
.cmp-footer__socials a:hover,
.cmp-footer__legal a:hover{ color: var(--c-accent); }

/* Six columns hold only to about 1100px. Between there and the 2-column
   mobile layout the link groups get a 3-column band of their own. */
@media (max-width: 1100px){
  .cmp-footer__top{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmp-footer__brand{ grid-column: 1 / -1; max-width: 46ch; margin-bottom: var(--s-3); }
}
@media (max-width: 720px){
  .cmp-footer__top{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-footer__brand{ max-width: none; }
  .cmp-footer__bottom{ justify-content: flex-start; }
}

/* ---------- page hero (secondary pages, cmp-pagehero) — light variant ---------- */
/* Secondary pages open on a light hero. A faint wash from the top edge gives
   the header something to sit against and separates the band from the body
   copy below without adding another rule. */
.cmp-pagehero{
  position: relative;
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--c-border);
  background:
    radial-gradient(ellipse 90% 100% at 15% 0%, var(--c-accent-soft), transparent 70%),
    linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-bg) 100%);
}
.cmp-pagehero__title{ max-width: 24ch; margin-top: var(--s-5); }
.cmp-pagehero__lede{ max-width: 56ch; margin-top: var(--s-5); }

@media (max-width: 720px){
  .cmp-pagehero{ padding-top: calc(var(--header-h) + var(--s-7)); padding-bottom: var(--s-7); }
}

/* ---------- form (cmp-form) ---------- */
.cmp-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.cmp-form__field{ display: flex; flex-direction: column; gap: var(--s-2); }
.cmp-form__field--full{ grid-column: 1 / -1; }
.cmp-form__field label{
  font-size: .78rem;
  font-weight: var(--fw-semi);
  letter-spacing: .01em;
  color: var(--c-text-secondary);
}
.cmp-form__field input,
.cmp-form__field select,
.cmp-form__field textarea{
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-s);
  padding: .85em 1em;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--c-text-body);
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}
.cmp-form__field input::placeholder,
.cmp-form__field textarea::placeholder{ color: var(--c-text-faint); }
.cmp-form__field input:hover,
.cmp-form__field select:hover,
.cmp-form__field textarea:hover{ border-color: var(--c-text-faint); }
.cmp-form__field input:focus,
.cmp-form__field select:focus,
.cmp-form__field textarea:focus{
  outline: none;
  border-color: var(--c-accent);
  background: var(--c-bg);
  box-shadow: var(--ring-soft);
}
.cmp-form__field textarea{ resize: vertical; min-height: 120px; }
.cmp-form__submit{ grid-column: 1 / -1; margin-top: var(--s-3); }

@media (max-width: 720px){
  .cmp-form{ grid-template-columns: 1fr; }
}

/* ---------- tabs (cmp-tabs), pill switcher used on solutions and index ---------- */
.cmp-tabs__nav{
  display: inline-flex;
  gap: 2px;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 4px;
  background: var(--c-bg-soft);
  border-radius: var(--radius-pill);
  margin-bottom: var(--s-8);
}
.cmp-tabs__btn{
  padding: .75em 1.3em;
  font-size: .87rem;
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
  background: transparent;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.cmp-tabs__btn.is-active{
  color: #fff;
  background: var(--c-accent);
  font-weight: var(--fw-semi);
  box-shadow: var(--shadow-s);
}
.cmp-tabs__btn:hover:not(.is-active){ color: var(--c-text); background: var(--c-bg); }
.cmp-tabs__btn:focus-visible{ outline: none; box-shadow: var(--ring); }
.cmp-tabs__panel{ display: none; }
.cmp-tabs__panel.is-active{ display: block; animation: fadeIn .4s var(--ease); }

@keyframes fadeIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }

/* ---------- timeline (cmp-timeline) for company page ---------- */
.cmp-timeline{ display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cmp-timeline__item{
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--s-6);
  padding-block: var(--s-6);
  border-top: 1px solid var(--c-border);
}
.cmp-timeline__item:first-child{ border-top: 0; }
.cmp-timeline__year{ font-family: var(--f-mono); font-size: 1.15rem; letter-spacing: -.01em; color: var(--c-text); font-weight: var(--fw-semi); }
@media (max-width: 720px){
  .cmp-timeline__item{ grid-template-columns: 1fr; gap: var(--s-2); }
}

/* ---------- values / icon list (cmp-valuegrid) ---------- */
.cmp-valuegrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 900px){ .cmp-valuegrid{ grid-template-columns: 1fr; } }

/* ---------- location cards (cmp-locations) ---------- */
.cmp-locations{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.cmp-location{
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  padding: var(--s-6);
}
.cmp-location__status{
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-mono); font-size: .7rem; color: var(--c-green);
  margin-bottom: var(--s-4);
}
.cmp-location__status::before{ content:"●"; font-size: .6em; }
.cmp-location dl{ margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.cmp-location dl div{ display: flex; justify-content: space-between; font-size: .82rem; }
.cmp-location dt{ color: var(--c-text-muted); }
.cmp-location dd{ margin: 0; font-family: var(--f-mono); color: var(--c-text-secondary); }
@media (max-width: 900px){ .cmp-locations{ grid-template-columns: 1fr; } }

/* ---------- cost calculator (cmp-calc) ---------- */
.cmp-calc{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--s-9);
  align-items: start;
}
.cmp-calc__field{ margin-bottom: var(--s-7); }
.cmp-calc__field-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-4);
}
.cmp-calc__field-head label{ font-size: .85rem; font-weight: var(--fw-semi); }
.cmp-calc__field-value{ font-family: var(--f-mono); font-size: .85rem; color: var(--c-text-secondary); }

input[type="range"]{
  width: 100%;
  accent-color: var(--c-accent);
  height: 4px;
  cursor: pointer;
}

.cmp-optgroup{ display: flex; gap: var(--s-2); flex-wrap: wrap; }
.cmp-optgroup__btn{
  padding: .65em 1.1em;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-s);
  font-size: .82rem;
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
  background: var(--c-bg);
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.cmp-optgroup__btn:hover{ border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-soft); }
.cmp-optgroup__btn:focus-visible{ outline: none; box-shadow: var(--ring); }
.cmp-optgroup__btn.is-active{ background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); box-shadow: var(--shadow-xs); }

.cmp-quote-panel{
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  padding: var(--s-7);
  background: var(--c-bg-soft);
  position: sticky;
  /* derived so the panel keeps clearing the header if the notice bar height
     or the nav height ever changes */
  top: var(--sticky-top);
}
:where(.cmp-quote-panel__eyebrow + *){ margin-top: var(--s-5); }
.cmp-quote-panel dl{ display: flex; flex-direction: column; }
.cmp-quote-panel dl div{
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-top: 1px solid var(--c-border);
  font-size: .85rem;
}
.cmp-quote-panel dl div:first-child{ border-top: 0; }
.cmp-quote-panel dt{ color: var(--c-text-muted); }
.cmp-quote-panel dd{ margin: 0; font-family: var(--f-mono); color: var(--c-text); text-align: right; }
.cmp-quote-panel__price{
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border-strong);
  font-family: var(--f-mono);
  font-size: 2.3rem;
  font-weight: var(--fw-semi);
  letter-spacing: -.01em;
}
.cmp-quote-panel__price span{ font-size: .95rem; font-weight: var(--fw-regular); color: var(--c-text-muted); font-family: var(--f-sans); }
.cmp-quote-panel__price--request{ font-size: 1.7rem; }
.cmp-quote-panel__band{
  margin: var(--s-3) 0 0;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--c-text-muted);
}
.cmp-quote-panel__band strong{
  font-family: var(--f-mono);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  white-space: nowrap;
}
.cmp-quote-panel .btn{ width: 100%; justify-content: center; margin-top: var(--s-6); }

@media (max-width: 900px){
  .cmp-calc{ grid-template-columns: 1fr; }
  .cmp-quote-panel{ position: static; }
}

/* ---------- document list (cmp-doclist) for resources/publications ---------- */
.cmp-doclist{ display: flex; flex-direction: column; }
.cmp-doclist__item{
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: baseline;
  gap: var(--s-6);
  padding-block: var(--s-6);
  border-top: 1px solid var(--c-border);
  transition: background .2s;
}
.cmp-doclist__item:first-child{ border-top: 0; }
.cmp-doclist__item:hover{ background: var(--c-bg-soft); }
.cmp-doclist__type{
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.cmp-doclist__title{ font-size: 1.15rem; font-weight: var(--fw-medium); letter-spacing: -.01em; }
.cmp-doclist__date{ font-family: var(--f-mono); font-size: .78rem; color: var(--c-text-faint); justify-self: end; }
@media (max-width: 720px){
  .cmp-doclist__item{ grid-template-columns: 1fr; gap: var(--s-2); }
  .cmp-doclist__date{ justify-self: start; }
}

/* ---------- simple content page (legal pages, cmp-legal) ---------- */
/* Long-form legal copy: hold the measure near 68ch, use near-black body text
   and generous leading so a dense document stays readable. */
.cmp-legal{ max-width: var(--w-narrow); }
.cmp-legal h2{ margin-top: var(--s-8); margin-bottom: var(--s-4); font-size: 1.4rem; color: var(--c-text); scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.cmp-legal h2:first-child{ margin-top: 0; }
.cmp-legal h3{ margin-top: var(--s-6); margin-bottom: var(--s-3); font-size: 1.08rem; font-weight: var(--fw-semi); color: var(--c-text); }
.cmp-legal p{
  color: var(--c-text-secondary);
  margin-bottom: var(--s-4);
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 68ch;
}
.cmp-legal p strong{ color: var(--c-text); font-weight: var(--fw-semi); }
.cmp-legal ul{ display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-4); max-width: 68ch; }
.cmp-legal li{ color: var(--c-text-secondary); font-size: 1.02rem; line-height: 1.7; padding-left: var(--s-5); position: relative; }
.cmp-legal li strong{ color: var(--c-text); font-weight: var(--fw-semi); }
.cmp-legal li::before{
  content: "";
  position: absolute;
  left: 2px; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-text-faint);
}
.cmp-legal a{ color: var(--c-accent-dim); text-decoration: underline; text-underline-offset: 2px; }
.cmp-legal__updated{ font-family: var(--f-mono); font-size: .78rem; color: var(--c-text-faint); margin-bottom: var(--s-7); }
/* All-caps legal blocks (disclaimer, liability, termination): uppercase runs
   lose word-shape cues, so give them extra leading, a touch of tracking, and a
   left rule to set them apart. Never shrink them below body size. */
/* higher specificity than `.cmp-legal p` so these overrides actually win */
.cmp-legal p.cmp-legal__caps{
  font-size: 1rem;
  line-height: 1.85;
  letter-spacing: .012em;
  color: var(--c-text);
  max-width: 68ch;
  padding-left: var(--s-5);
  border-left: 3px solid var(--c-border-strong);
}
.cmp-legal__contact{
  margin-top: var(--s-7);
  padding: var(--s-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-bg-soft);
  font-style: normal;
  line-height: 1.8;
  color: var(--c-text-secondary);
}

/* ---------- legal table of contents (cmp-toc) ---------- */
.cmp-toc{
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  padding: var(--s-6);
  margin-bottom: var(--s-8);
  background: var(--c-bg-soft);
}
.cmp-toc__title{
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-4);
}
.cmp-toc ol{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2) var(--s-5);
  counter-reset: toc;
}
.cmp-toc li{ counter-increment: toc; }
.cmp-toc a{
  display: flex;
  gap: var(--s-3);
  font-size: .88rem;
  color: var(--c-text-secondary);
  text-decoration: none;
  padding-block: 2px;
}
.cmp-toc a::before{
  content: counter(toc) ".";
  font-family: var(--f-mono);
  font-size: .78rem;
  color: var(--c-text-faint);
  min-width: 1.8em;
}
.cmp-toc a:hover{ color: var(--c-text); text-decoration: underline; }
@media (max-width: 720px){
  .cmp-toc ol{ grid-template-columns: 1fr; }
}

/* ---------- 404 ---------- */
.cmp-notfound{
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--header-h);
}
.cmp-notfound__code{
  font-family: var(--f-mono);
  font-size: .85rem;
  color: var(--c-text-faint);
  margin-bottom: var(--s-5);
}

/* ---------- data center grid (cmp-dcgrid) ---------- */
.cmp-dcgrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.cmp-dcgrid__cell{
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  padding: var(--s-5) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.cmp-dcgrid__name{ font-weight: var(--fw-medium); font-size: .92rem; letter-spacing: -.005em; }
.cmp-dcgrid__status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: .66rem;
  color: var(--c-green);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.cmp-dcgrid__status::before{ content: "●"; font-size: .6em; }
@media (max-width: 900px){ .cmp-dcgrid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .cmp-dcgrid{ grid-template-columns: 1fr; } }

/* ---------- office locations (cmp-offices) ----------
   Corporate offices and the silicon lab, which are a different set from the
   data center footprint above. A facility is somewhere customer workloads
   run; an office is somewhere staff sit, so the two lists are kept apart
   and neither implies the other. */
.cmp-offices{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.cmp-office{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cmp-office:hover{ box-shadow: var(--shadow-m); border-color: var(--c-border-strong); }
.cmp-office__city{
  font-weight: var(--fw-semi);
  font-size: .98rem;
  letter-spacing: -.012em;
  color: var(--c-text);
}
.cmp-office__region{
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
/* the function label carries the reason the office exists, so it reads as
   content rather than decoration and takes the 7.07:1 secondary ink */
.cmp-office__role{
  font-size: .87rem;
  line-height: 1.55;
  color: var(--c-text-secondary);
}
.cmp-office--hq{ border-color: var(--c-border-strong); }
.cmp-office--hq .cmp-office__region{ color: var(--c-accent); }
@media (max-width: 900px){ .cmp-offices{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .cmp-offices{ grid-template-columns: 1fr; } }

/* ---------- icon feature triad (cmp-iconfeatures) ---------- */
.cmp-iconfeatures{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
}
.cmp-iconfeature__icon{
  width: 52px; height: 52px;
  border-radius: var(--radius-m);
  background: var(--c-accent-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-5);
  box-shadow: inset 0 0 0 1px var(--c-accent-hair);
}
.cmp-iconfeature__icon svg{ width: 26px; height: 26px; color: var(--c-accent); }
.cmp-iconfeature h3{ margin-bottom: var(--s-3); }
.cmp-iconfeature p{ color: var(--c-text-secondary); font-size: .94rem; line-height: 1.65; max-width: 42ch; }
@media (max-width: 980px){ .cmp-iconfeatures{ grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-6); } }
@media (max-width: 640px){ .cmp-iconfeatures{ grid-template-columns: 1fr; gap: var(--s-7); } }

/* The testimonial grid (cmp-testimonials / cmp-testimonial) used to sit here.
   The home page presents the same content through cmp-carousel + cmp-story
   now, so the grid was removed. The attribution note below is NOT part of it
   and is still used by index.html. */

/* sourcing / disclosure note under quoted or attributed content. Federal
   customers usually cannot be named, so state the sourcing rule plainly
   rather than leaving anonymous quotes looking unsourced. */
.cmp-attribution-note{
  margin-top: var(--s-5);
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-border-strong);
  max-width: 84ch;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

/* ---------- resource cards (cmp-resourcecards) ---------- */
.cmp-resourcecards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.cmp-resourcecard{
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--c-bg);
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.cmp-resourcecard:hover{ border-color: var(--c-border-strong); box-shadow: var(--shadow-m); transform: translateY(-2px); }
.cmp-resourcecard:focus-visible{ outline: none; box-shadow: var(--ring); border-color: var(--c-accent); }
.cmp-resourcecard__type{
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.cmp-resourcecard__title{ font-size: 1rem; font-weight: var(--fw-semi); letter-spacing: -.01em; }
.cmp-resourcecard__link{ margin-top: auto; font-size: .85rem; font-weight: var(--fw-semi); display: inline-flex; align-items: center; gap: var(--s-2); }
.cmp-resourcecard__link::after{ content: "→"; transition: transform .3s var(--ease); }
.cmp-resourcecard:hover .cmp-resourcecard__link::after{ transform: translateX(3px); }
@media (max-width: 900px){ .cmp-resourcecards{ grid-template-columns: 1fr; } }

/* ---------- FAQ accordion (cmp-faq) ---------- */
/* each question is a self-contained pill (stadium-shaped while collapsed,
   since border-radius: 999px on a short bar just rounds the two end-caps).
   Opening an item eases the radius down to --radius-l so a tall answer
   doesn't sit inside an exaggerated, overly-round corner. */
.cmp-faq{ display: flex; flex-direction: column; gap: var(--s-3); max-width: var(--w-narrow); }
.cmp-faq__item{
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  overflow: hidden;
  transition:
    border-radius var(--dur-slow) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.cmp-faq__item.is-open{
  border-radius: var(--radius-l);
  border-color: var(--c-accent-line);
  box-shadow: var(--shadow-s);
}
.cmp-faq__question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  text-align: left;
  font-size: 1.02rem;
  font-weight: var(--fw-semi);
  letter-spacing: -.014em;
  line-height: 1.4;
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease);
}
.cmp-faq__question:hover{ color: var(--c-accent); }
.cmp-faq__question:focus-visible{ outline: none; box-shadow: var(--ring); }
.cmp-faq__icon{
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--c-border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  color: var(--c-text-secondary);
  transition:
    transform var(--dur-slow) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.cmp-faq__question:hover .cmp-faq__icon{ border-color: var(--c-accent); color: var(--c-accent); }
.cmp-faq__item.is-open .cmp-faq__icon{
  transform: rotate(45deg);
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}
.cmp-faq__answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease);
}
.cmp-faq__answer p{ padding: 0 var(--s-6) var(--s-6); color: var(--c-text-secondary); font-size: .95rem; line-height: 1.7; max-width: 68ch; }
/* a fallback only: JS measures each answer and sets the real height inline, so
   this cap applies for the moment before the script runs */
.cmp-faq__item.is-open .cmp-faq__answer{ max-height: 400px; }

@media (max-width: 520px){
  /* 32px of side padding costs a phone-width question most of a line, so pull
     the pill in and let the text have the room instead */
  .cmp-faq__question{ padding: var(--s-4) var(--s-5); font-size: .95rem; gap: var(--s-3); }
  .cmp-faq__answer p{ padding: 0 var(--s-5) var(--s-5); }
}

/* ---------- capacity notice banner (cmp-noticebar) ---------- */
.cmp-noticebar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  height: var(--notice-h);
  background: var(--c-text);
  color: var(--c-text-on-dark);
}
.cmp-noticebar__inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  font-size: .8rem;
  text-align: center;
  flex-wrap: wrap;
  padding-inline: var(--s-6);
}
.cmp-noticebar a{ color: var(--c-text-on-dark); text-decoration: underline; font-weight: var(--fw-semi); white-space: nowrap; }
.cmp-noticebar a:hover{ color: var(--c-accent-soft); }
.cmp-noticebar__dismiss{
  position: absolute;
  top: 50%; right: var(--s-4);
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--c-text-on-dark-soft);
  transition: background .2s, color .2s;
}
.cmp-noticebar__dismiss:hover{ background: rgba(255,255,255,.14); color: var(--c-on-accent); }

/* dismissing the bar zeroes --notice-h, which reflows the fixed nav and every
   hero padding-top that derives from --header-h */
:root.notice-dismissed{ --notice-h: 0px; }
.notice-dismissed .cmp-noticebar{ display: none; }

@media (max-width: 720px){
  /* capacity copy wraps to two lines on small screens — give the bar the room */
  :root{ --notice-h: 58px; }
  :root.notice-dismissed{ --notice-h: 0px; }
  .cmp-noticebar__inner{ font-size: .74rem; gap: var(--s-2); line-height: 1.35; }
  /* keep the wrapped copy clear of the dismiss control */
  .cmp-noticebar__inner{ padding-inline: var(--s-8); }
}

/* ---------- back to top (cmp-totop), injected by main.js ---------- */
.cmp-totop{
  position: fixed;
  bottom: var(--s-6);
  right: var(--s-6);
  z-index: 90;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  color: var(--c-text);
  box-shadow: var(--shadow-m);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .2s, color .2s;
}
.cmp-totop svg{ width: 17px; height: 17px; }
.cmp-totop.is-visible{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.cmp-totop:hover{ background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
@media (max-width: 720px){
  .cmp-totop{ bottom: var(--s-5); right: var(--s-5); width: 40px; height: 40px; }
}

/* ---------- logo strip (cmp-logostrip) for "trusted by the same standards as" ---------- */
.cmp-logostrip{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-9);
  flex-wrap: wrap;
  padding-block: var(--s-6);
  opacity: .7;
}
.cmp-logostrip span{
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--c-text-faint);
  text-transform: uppercase;
}

/* ---------- reveal-on-scroll utility ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* the hover lift is decorative; suppressing it avoids motion on every
     pointer pass without disabling the color feedback that carries meaning */
  .btn:hover, .cmp-card:hover, .cmp-stats__item:hover,
  .cmp-pubcard:hover, .cmp-team__card:hover,
  .cmp-resourcecard:hover, .cmp-marquee__item:hover{ transform: none; }
}

/* Default focus ring. Components that sit on a tinted or dark surface restate
   this with --ring (a doubled box-shadow) so the indicator keeps its contrast
   against whatever is behind it. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 3px;
}
/* focus is never silently removed, only replaced by a --ring shadow */
:focus:not(:focus-visible){ outline: none; }

/* =================================================================
   PRODUCTION LAYER
   Typographic polish, accessibility affordances, and the components
   introduced with the publications library and the silicon program.
   ================================================================= */

/* ---------- typographic polish ---------- */
h1, .h1, h2, .h2, .cmp-hero-dark__title, .cmp-listrow__title{
  text-wrap: balance;
}
.lede, .cmp-hero-dark__lede{ text-wrap: pretty; }

/* ---------- skip link ---------- */
.skip-link{
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--c-text);
  color: var(--c-bg);
  padding: .7em 1.4em;
  font-size: .85rem;
  font-weight: var(--fw-semi);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  transition: transform .2s var(--ease);
}
.skip-link:focus{ transform: translate(-50%, 0); }

/* keep revealed content visible when motion is suppressed */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; }
}

/* Button depth and the mobile-menu link rules that used to live here were
   folded back into the button and navigation blocks above, so each component
   now reads as one contiguous definition instead of two halves separated by
   1,000 lines. */

/* ---------- expandable list row (cmp-disclosure) ----------
   Used by the careers job list and the newsroom release list. These are
   listings whose detail lives on the same page, so the row expands in place
   instead of linking out to a stub. */
.cmp-disclosure{ display: flex; flex-direction: column; }
.cmp-disclosure__item{ border-top: 1px solid var(--c-border); }
.cmp-disclosure__item:last-child{ border-bottom: 1px solid var(--c-border); }
.cmp-disclosure__trigger{
  width: 100%;
  display: grid;
  grid-template-columns: 170px 1fr auto auto;
  align-items: baseline;
  gap: var(--s-5);
  padding-block: var(--s-6);
  text-align: left;
  font-family: inherit;
  transition: background .2s;
}
.cmp-disclosure__item:hover .cmp-disclosure__trigger{ background: var(--c-bg-soft); }
.cmp-disclosure__kicker{
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.cmp-disclosure__title{
  font-size: 1.05rem;
  font-weight: var(--fw-medium);
  letter-spacing: -.01em;
  color: var(--c-text);
}
.cmp-disclosure__meta{
  font-family: var(--f-mono);
  font-size: .78rem;
  color: var(--c-text-faint);
  white-space: nowrap;
}
.cmp-disclosure__icon{
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--c-border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  color: var(--c-text-secondary);
  transition: transform .3s var(--ease), background .2s, color .2s, border-color .2s;
}
.cmp-disclosure__item.is-open .cmp-disclosure__icon{
  transform: rotate(45deg);
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}
.cmp-disclosure__panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease);
}
.cmp-disclosure__item.is-open .cmp-disclosure__panel{ max-height: 1400px; }
.cmp-disclosure__body{
  padding: 0 0 var(--s-7);
  max-width: 76ch;
}
.cmp-disclosure__body p{
  font-size: .95rem;
  line-height: 1.7;
  color: var(--c-text-secondary);
  margin-bottom: var(--s-4);
}
.cmp-disclosure__body h4{ margin-bottom: var(--s-3); margin-top: var(--s-5); }
.cmp-disclosure__body ul{
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.cmp-disclosure__body li{
  position: relative;
  padding-left: var(--s-5);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--c-text-secondary);
}
.cmp-disclosure__body li::before{
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
}
@media (max-width: 720px){
  .cmp-disclosure__trigger{
    grid-template-columns: 1fr auto;
    grid-template-areas: "kicker icon" "title title" "meta meta";
    gap: var(--s-2);
  }
  .cmp-disclosure__kicker{ grid-area: kicker; }
  .cmp-disclosure__title{ grid-area: title; }
  .cmp-disclosure__meta{ grid-area: meta; }
  .cmp-disclosure__icon{ grid-area: icon; }
}

/* ---------- docs category sections (cmp-docsection) ---------- */
.cmp-docsection{ padding-top: var(--s-7); }
.cmp-docsection__head{
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.cmp-docsection__icon{
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--radius-s);
  background: var(--c-accent-soft);
  display: flex; align-items: center; justify-content: center;
}
.cmp-docsection__icon svg{ width: 20px; height: 20px; color: var(--c-accent); }
.cmp-doclinks{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
.cmp-doclink{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
  background: var(--c-bg);
  font-size: .92rem;
  color: var(--c-text);
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.cmp-doclink:hover{ border-color: var(--c-accent); background: var(--c-accent-soft); transform: translateX(2px); }
.cmp-doclink__tag{
  flex-shrink: 0;
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  padding: .25em .7em;
}
.cmp-doclink__tag--gated{ color: var(--c-amber); border-color: var(--c-amber-line); background: var(--c-amber-tint); }
@media (max-width: 720px){ .cmp-doclinks{ grid-template-columns: 1fr; } }

/* ---------- ownership stack (cmp-stack) ---------- */
.cmp-stack{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cmp-stack__layer{
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-6);
  border-top: 1px solid var(--c-border);
  background: var(--c-bg);
  transition: background .25s var(--ease);
}
.cmp-stack__layer:first-child{ border-top: 0; }
.cmp-stack__layer:hover{ background: var(--c-bg-soft); }
.cmp-stack__index{
  font-family: var(--f-mono);
  font-size: .8rem;
  color: var(--c-text-faint);
}
.cmp-stack__body h3{ font-size: 1.1rem; margin-bottom: var(--s-2); }
.cmp-stack__body p{ color: var(--c-text-secondary); font-size: .9rem; max-width: 62ch; }
.cmp-stack__status{
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .5em 1em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-border-strong);
  color: var(--c-text-muted);
  background: var(--c-bg-soft);
}
.cmp-stack__layer.is-owned .cmp-stack__status{
  color: var(--c-green);
  border-color: var(--c-green-line);
  background: var(--c-green-tint);
}
.cmp-stack__layer.is-progress .cmp-stack__status{
  color: var(--c-amber);
  border-color: var(--c-amber-line);
  background: var(--c-amber-tint);
}
.cmp-stack__layer.is-target .cmp-stack__status{
  color: var(--c-accent-dim);
  border-color: var(--c-accent-line);
  background: var(--c-accent-soft);
}
@media (max-width: 720px){
  .cmp-stack__layer{ grid-template-columns: 1fr; gap: var(--s-3); }
  .cmp-stack__status{ justify-self: start; }
}

/* ---------- roadmap timeline states ---------- */
.cmp-timeline__body h3{ font-size: 1.15rem; margin-bottom: var(--s-2); }
.cmp-timeline__body p{ color: var(--c-text-secondary); font-size: .95rem; max-width: 68ch; }
.cmp-timeline__meta{
  margin-top: var(--s-4);
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.cmp-timeline__item.is-done .cmp-timeline__year,
.cmp-timeline__item.is-active .cmp-timeline__year{
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.cmp-timeline__item.is-done .cmp-timeline__year::before,
.cmp-timeline__item.is-active .cmp-timeline__year::before{
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cmp-timeline__item.is-done .cmp-timeline__year::before{ background: var(--c-green); }
.cmp-timeline__item.is-active .cmp-timeline__year::before{
  background: var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-accent-soft);
}
.cmp-timeline__item.is-done .cmp-timeline__meta{ color: var(--c-green); }
.cmp-timeline__item.is-active .cmp-timeline__meta{ color: var(--c-accent-dim); }

/* ---------- breadcrumb ---------- */
.cmp-breadcrumb{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: .8rem;
  color: var(--c-text-muted);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}
.cmp-breadcrumb a{ color: var(--c-text-muted); transition: color .2s; }
.cmp-breadcrumb a:hover{ color: var(--c-text); text-decoration: underline; }
.cmp-breadcrumb span[aria-current]{ color: var(--c-text); }

/* ---------- article (cmp-article) ---------- */
.cmp-article__head{
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--c-border);
  max-width: 900px;
}
.cmp-article__head h1{
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  margin-top: var(--s-4);
  max-width: 20ch;
}
.cmp-article__dek{
  margin-top: var(--s-5);
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}
.cmp-article__meta{
  margin-top: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.cmp-article__body{
  max-width: 900px;
  padding-block: var(--s-8);
}
.cmp-article__body > h2{
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  max-width: 30ch;
}
.cmp-article__body > h2:first-of-type{ margin-top: 0; }
.cmp-article__body > h3{
  font-size: 1.2rem;
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
}
.cmp-article__body > p{
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--c-text-secondary);
  margin-bottom: var(--s-5);
  max-width: 72ch;
}
.cmp-article__body > p > strong{ color: var(--c-text); font-weight: var(--fw-semi); }
.cmp-article__body > ul{
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cmp-article__body > ul > li{
  position: relative;
  padding-left: var(--s-6);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--c-text-secondary);
}
.cmp-article__body > ul > li::before{
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}
.cmp-article__body > ul > li strong{ color: var(--c-text); font-weight: var(--fw-semi); }
.cmp-article__body a{
  color: var(--c-accent-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- key takeaways (cmp-takeaways) ---------- */
.cmp-takeaways{
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-m);
  background: var(--c-bg-soft);
  padding: var(--s-6);
  margin-bottom: var(--s-8);
  max-width: 72ch;
}
.cmp-takeaways__title{
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-4);
}
.cmp-takeaways ul{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cmp-takeaways li{
  position: relative;
  padding-left: var(--s-5);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--c-text-secondary);
}
.cmp-takeaways li::before{
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-text-faint);
}

/* ---------- publication cards (cmp-pubgrid) ---------- */
.cmp-pubgrid{
  display: grid;
  /* min() guards the track floor: on a 320px screen the content box is only
     ~272px after gutters, and a bare minmax(300px, …) would force a 300px
     track and push the whole grid past the viewport edge */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--s-5);
}
.cmp-pubcard{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-bg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s;
}
.cmp-pubcard:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
  border-color: var(--c-border-strong);
}
.cmp-pubcard__type{
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent-dim);
}
.cmp-pubcard__title{
  font-size: 1.22rem;
  font-weight: var(--fw-semi);
  letter-spacing: -.022em;
  line-height: 1.28;
  color: var(--c-text);
}
.cmp-pubcard__dek{
  font-size: .9rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}
.cmp-pubcard__foot{
  margin-top: auto;
  padding-top: var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: .74rem;
  color: var(--c-text-faint);
}
.cmp-pubcard__arrow{ transition: transform .3s var(--ease); color: var(--c-text); }
.cmp-pubcard:hover .cmp-pubcard__arrow{ transform: translateX(4px); }

/* ---------- leadership team grid (cmp-team) ---------- */
.cmp-team{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.cmp-team__card{
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  padding: var(--s-6);
  background: var(--c-bg);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.cmp-team__card:hover{ box-shadow: var(--shadow-m); transform: translateY(-2px); }
.cmp-team__avatar{
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-semi); font-size: 1.05rem; letter-spacing: .02em;
  margin-bottom: var(--s-5);
  box-shadow: inset 0 0 0 1px var(--c-accent-hair);
}
.cmp-team__name{ font-size: 1.05rem; font-weight: var(--fw-semi); color: var(--c-text); }
.cmp-team__role{ font-size: .82rem; color: var(--c-accent); font-weight: var(--fw-medium); margin-top: 2px; }
.cmp-team__bio{ margin-top: var(--s-4); font-size: .88rem; color: var(--c-text-secondary); line-height: 1.65; }
@media (max-width: 900px){ .cmp-team{ grid-template-columns: 1fr; } }

/* ---------- job listing rows (cmp-jobrow), reuses cmp-doclist grid rhythm ---------- */
.cmp-joblist{ display: flex; flex-direction: column; }
.cmp-jobrow{
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: baseline;
  gap: var(--s-6);
  padding-block: var(--s-6);
  border-top: 1px solid var(--c-border);
  transition: background .2s;
}
.cmp-jobrow:first-child{ border-top: 0; }
.cmp-jobrow:hover{ background: var(--c-bg-soft); }
.cmp-jobrow__dept{
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.cmp-jobrow__title{ font-size: 1.05rem; font-weight: var(--fw-medium); letter-spacing: -.01em; }
.cmp-jobrow__meta{ font-family: var(--f-mono); font-size: .78rem; color: var(--c-text-faint); justify-self: end; white-space: nowrap; }
@media (max-width: 720px){
  .cmp-jobrow{ grid-template-columns: 1fr; gap: var(--s-2); }
  .cmp-jobrow__meta{ justify-self: start; }
}

/* =================================================================
   GENERATED CONTENT
   Components used by the pages emitted from content/*.json via
   tools/build-content.js: job postings, press releases, and
   documentation articles.
   ================================================================= */

/* ---------- metadata chip row (cmp-jobmeta) ----------
   Sits under a page hero on postings, releases and doc articles and
   carries the at-a-glance facts: salary, type, location, date. */
.cmp-jobmeta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.cmp-jobmeta__chip{
  display: inline-flex;
  align-items: center;
  padding: .45em 1em;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  font-size: .78rem;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--c-text-secondary);
  font-variant-numeric: tabular-nums;
}
/* the first chip is the headline fact (salary, or the release date) */
.cmp-jobmeta__chip:first-child{
  border-color: var(--c-accent-line);
  background: var(--c-accent-soft);
  color: var(--c-accent-dim);
  font-weight: var(--fw-semi);
}
.cmp-jobmeta__chip--gated{
  border-color: var(--c-amber-line);
  background: var(--c-amber-tint);
  color: var(--c-amber);
}

/* ---------- posting layout (cmp-joblayout) ---------- */
.cmp-joblayout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-9);
  align-items: start;
}
/* A grid item defaults to min-width:auto, which means its min-content width
   wins over the track size. A <pre> with white-space:pre reports its longest
   line as min-content, so without this a single long command line widens the
   column and pushes the page into horizontal scroll. overflow-x:auto on the
   code block only takes effect once the item is allowed to shrink. */
.cmp-joblayout > *{ min-width: 0; }
.cmp-joblayout__main{ padding-block: 0; }

/* ---------- apply card (cmp-applycard) ---------- */
.cmp-applycard{
  position: sticky;
  top: var(--sticky-top);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-bg-soft);
  padding: var(--s-6);
  box-shadow: var(--shadow-s);
}
.cmp-applycard__title{
  margin-top: var(--s-4);
  font-size: 1.05rem;
  font-weight: var(--fw-semi);
  letter-spacing: -.016em;
  line-height: 1.3;
  color: var(--c-text);
}
.cmp-applycard dl{
  margin: var(--s-5) 0 0;
  display: flex;
  flex-direction: column;
}
.cmp-applycard dl div{
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-top: 1px solid var(--c-border);
  font-size: .82rem;
}
.cmp-applycard dl div:first-child{ border-top: 0; }
.cmp-applycard dt{ color: var(--c-text-muted); flex-shrink: 0; }
.cmp-applycard dd{
  margin: 0;
  text-align: right;
  color: var(--c-text);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.cmp-applycard .btn{ width: 100%; margin-top: var(--s-5); }
.cmp-applycard__note{
  margin-top: var(--s-4);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}
.cmp-applycard__note a{ color: var(--c-accent-dim); text-decoration: underline; text-underline-offset: .18em; }

@media (max-width: 980px){
  .cmp-joblayout{ grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  /* the card leads on narrow screens: apply details before the long read */
  .cmp-applycard{ position: static; order: -1; }
}

/* ---------- key/value spec list (cmp-specs) ---------- */
.cmp-specs{
  margin: 0 0 var(--s-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  max-width: 72ch;
}
.cmp-specs > div{
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-bg-soft);
  padding: var(--s-4) var(--s-5);
}
.cmp-specs dt{
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-bottom: var(--s-2);
}
.cmp-specs dd{
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--c-text);
}
@media (max-width: 620px){ .cmp-specs{ grid-template-columns: 1fr; } }

/* ---------- numbered procedure (cmp-steps) ---------- */
.cmp-steps{
  list-style: none;
  counter-reset: step;
  margin: 0 0 var(--s-6);
  padding: 0;
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.cmp-steps li{
  counter-increment: step;
  position: relative;
  padding-left: calc(var(--s-8) + var(--s-2));
  min-height: 34px;
}
/* the number is the anchor, so it gets a filled disc rather than a bullet */
.cmp-steps li::before{
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-dim);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono);
  font-size: .82rem;
  font-weight: var(--fw-semi);
  box-shadow: inset 0 0 0 1px var(--c-accent-hair);
}
.cmp-steps li strong{
  display: block;
  padding-top: 5px;
  font-size: 1rem;
  font-weight: var(--fw-semi);
  letter-spacing: -.012em;
  color: var(--c-text);
}
.cmp-steps li span{
  display: block;
  margin-top: var(--s-2);
  font-size: .95rem;
  line-height: 1.7;
  color: var(--c-text-secondary);
}

/* ---------- code block (cmp-code) ---------- */
.cmp-code{
  margin: 0 0 var(--s-6);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-m);
  background: var(--c-bg-dark);
  /* long command lines scroll inside the block instead of widening the page */
  overflow-x: auto;
  max-width: 100%;
}
.cmp-code code{
  font-family: var(--f-mono);
  font-size: .82rem;
  line-height: 1.75;
  color: var(--c-text-on-dark-soft);
  white-space: pre;
  tab-size: 2;
}
.cmp-article__body code{
  font-family: var(--f-mono);
  font-size: .88em;
  padding: .15em .45em;
  border-radius: 4px;
  background: var(--c-bg-soft-2);
  color: var(--c-text);
}
.cmp-code code{ padding: 0; background: none; border-radius: 0; }

/* ---------- inline callout (cmp-callout) ---------- */
.cmp-callout{
  margin: 0 0 var(--s-6);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-m);
  background: var(--c-bg-soft);
  max-width: 72ch;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--c-text-secondary);
}
.cmp-callout strong{ color: var(--c-text); font-weight: var(--fw-semi); }

/* ---------- press release pull quote (cmp-pullquote) ---------- */
.cmp-pullquote{
  margin: 0 0 var(--s-6);
  padding: var(--s-7) 0 var(--s-7) var(--s-7);
  border-left: 3px solid var(--c-accent-2-dim);
  max-width: 72ch;
}
.cmp-pullquote p{
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: var(--fw-medium);
  letter-spacing: -.018em;
  line-height: 1.5;
  color: var(--c-text);
  text-wrap: pretty;
}
.cmp-pullquote cite{
  display: block;
  margin-top: var(--s-5);
  font-style: normal;
  font-size: .85rem;
  color: var(--c-text-muted);
}

/* ---------- press coverage list (cmp-coverage) ----------
   Third-party journalism we do not rehost. Deliberately not links:
   there is nothing on this domain to link to. */
.cmp-coverage{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cmp-coverage__item{
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-6);
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-border);
}
.cmp-coverage__item:first-child{ border-top: 0; }
.cmp-coverage__outlet{
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.cmp-coverage__title{
  font-size: 1.05rem;
  font-weight: var(--fw-medium);
  letter-spacing: -.014em;
  line-height: 1.45;
  color: var(--c-text);
}
.cmp-coverage__date{
  font-family: var(--f-mono);
  font-size: .78rem;
  color: var(--c-text-muted);
  justify-self: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px){
  .cmp-coverage__item{ grid-template-columns: 1fr; gap: var(--s-2); }
  .cmp-coverage__date{ justify-self: start; }
}

/* ---------- documentation index (cmp-docsections) ---------- */
.cmp-docsections{
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.cmp-docsections .cmp-docsection{
  padding-top: 0;
  border-top: 1px solid var(--c-border);
  padding-block: var(--s-7) 0;
}
.cmp-docsections .cmp-docsection:first-child{ border-top: 0; padding-top: 0; }
.cmp-docsection__head p{ margin-top: 2px; font-size: .88rem; line-height: 1.5; max-width: 60ch; }

/* ---------- in-page section nav (cmp-anchornav) ----------
   A slim jump bar for a long marketing page, sitting directly under the fixed
   header so the reader can move between the page's five stops without
   scrolling to find them. The active item is set by scroll position in JS. */
/* a section the jump bar points at has two bars above it, not one, so the
   default [id] scroll offset would park its heading behind the second */
.section--anchor{ scroll-margin-top: calc(var(--header-h) + var(--anchornav-h) + var(--s-4)); }
@media (max-width: 720px){
  /* the bar is hidden at this width, so the offset goes back to the default */
  .section--anchor{ scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
}
.cmp-anchornav{
  position: sticky;
  /* butts against the fixed header rather than using --sticky-top, which adds
     a deliberate gap meant for content, not for a second bar */
  top: var(--header-h);
  /* under the header (100) and the notice bar (101), above page content */
  z-index: 60;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--c-border);
}
.cmp-anchornav__inner{
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--anchornav-h);
}
.cmp-anchornav__label{
  flex-shrink: 0;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* --c-text-faint reads as decoration but this labels the bar, so it has to
     clear 4.5:1 rather than sit at the 2.6:1 that colour gives on white */
  color: var(--c-text-muted);
}
.cmp-anchornav__list{
  display: flex;
  align-items: center;
  gap: var(--s-1);
  /* the bar never wraps to a second row; on a narrow screen it becomes a
     horizontal scroller, which is why the scrollbar itself is suppressed */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.cmp-anchornav__list::-webkit-scrollbar{ display: none; }
.cmp-anchornav__link{
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: .5em .9em;
  border-radius: var(--radius-pill);
  font-size: .85rem;
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}
.cmp-anchornav__link:hover{ color: var(--c-text); background: var(--c-bg-soft); }
.cmp-anchornav__link:focus-visible{ outline: none; box-shadow: var(--ring); }
.cmp-anchornav__link.is-active{
  color: var(--c-accent-dim);
  background: var(--c-accent-tint);
  font-weight: var(--fw-semi);
}
/* the rhythm for a stats strip that follows this bar is stated once, with the
   rest of the hero-to-strip rules, rather than repeated here */
@media (max-width: 900px){
  .cmp-anchornav__label{ display: none; }
}
@media (max-width: 720px){
  /* the bar would eat a third of a phone screen once the header is counted,
     and the page is short enough there to scroll instead */
  .cmp-anchornav{ display: none; }
}

/* ---------- sub-feature grid (cmp-blockgrid) ----------
   Small icon-and-text units, used where a section needs to list what a
   program covers without giving each item a card of its own. */
.cmp-blockgrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7) var(--s-6);
}
.cmp-blockgrid__item{
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: var(--s-4);
  align-items: start;
}
a.cmp-blockgrid__item{ border-radius: var(--radius-m); transition: transform var(--dur) var(--ease); }
a.cmp-blockgrid__item:hover{ transform: translateY(-2px); }
a.cmp-blockgrid__item:hover .cmp-blockgrid__title{ color: var(--c-accent); }
a.cmp-blockgrid__item:focus-visible{ outline: none; box-shadow: var(--ring); }
.cmp-blockgrid__icon{
  width: 38px; height: 38px;
  border-radius: var(--radius-s);
  background: var(--c-accent-soft);
  display: flex; align-items: center; justify-content: center;
}
.cmp-blockgrid__icon svg{ width: 19px; height: 19px; color: var(--c-accent); }
.cmp-blockgrid__title{
  font-size: .97rem;
  font-weight: var(--fw-semi);
  letter-spacing: -.012em;
  line-height: 1.4;
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease);
}
.cmp-blockgrid__desc{
  margin-top: var(--s-2);
  font-size: .88rem;
  line-height: 1.65;
  color: var(--c-text-secondary);
}
@media (max-width: 980px){ .cmp-blockgrid{ grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
@media (max-width: 620px){ .cmp-blockgrid{ grid-template-columns: 1fr; } }

/* a tab panel's copy, its grid, and its closing link each need the same
   separation, stated once here rather than per panel */
.cmp-tabs__panel > .cmp-blockgrid,
.cmp-tabs__panel > .btn{ margin-top: var(--s-7); }

/* a row of buttons closing a section, when there is more than one way on */
.cmp-actionrow{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-7);
}
@media (max-width: 480px){
  .cmp-actionrow{ gap: var(--s-3); }
  .cmp-actionrow .btn{ width: 100%; }
}

/* ---------- offer band (cmp-offerband) ----------
   One dark full-width panel for the single commercial message that should not
   compete with the light sections either side of it. */
.cmp-offerband{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--s-8);
  color: var(--c-text-on-dark);
  background:
    radial-gradient(ellipse 60% 80% at 92% 8%, rgba(250,232,223,.14), transparent 62%),
    linear-gradient(140deg, var(--c-bg-dark-lift) 0%, var(--c-bg-dark) 58%, var(--c-bg-dark-deep) 100%);
}
.cmp-offerband::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(115deg, #000, transparent 65%);
  -webkit-mask-image: linear-gradient(115deg, #000, transparent 65%);
  pointer-events: none;
}
.cmp-offerband__inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--s-8);
  align-items: center;
}
/* The band's gradient is at its lightest (--c-bg-dark-lift) in the top-left
   corner, which is exactly where the eyebrow sits. --c-text-on-dark-muted
   measures 4.43:1 there, just under AA, so this one steps up a stop. */
.cmp-offerband .eyebrow--on-dark{ color: var(--c-text-on-dark-soft); }
.cmp-offerband__title{ color: var(--c-text-on-dark); margin-bottom: var(--s-4); }
.cmp-offerband__lede{ color: var(--c-text-on-dark-soft); max-width: 56ch; }
.cmp-offerband__actions{ display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }
.cmp-offerband__rows{ display: flex; flex-direction: column; margin: 0; }
.cmp-offerband__rows > div{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .88rem;
}
.cmp-offerband__rows > div:first-child{ border-top: 0; padding-top: 0; }
.cmp-offerband__rows dt{ margin: 0; color: var(--c-text-on-dark-soft); }
.cmp-offerband__rows dd{
  margin: 0;
  font-family: var(--f-mono);
  font-weight: var(--fw-medium);
  color: var(--c-text-on-dark);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px){
  .cmp-offerband{ padding: var(--s-7); }
  .cmp-offerband__inner{ grid-template-columns: 1fr; gap: var(--s-7); }
}
@media (max-width: 520px){
  .cmp-offerband{ padding: var(--s-5); border-radius: var(--radius-l); }
  .cmp-offerband__actions .btn{ width: 100%; }
}

/* ---------- customer story carousel (cmp-carousel) ----------
   Built on native overflow scrolling with scroll snapping rather than a
   transform track, so a touch swipe, a trackpad flick and the arrow buttons
   all drive the same mechanism and nothing has to be re-measured on resize. */
.cmp-carousel__track{
  display: flex;
  gap: var(--s-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* room for the focus ring and the card shadow, which would otherwise be
     clipped by the scroll container's own edge */
  padding: 4px;
  margin: -4px;
}
.cmp-carousel__track::-webkit-scrollbar{ display: none; }
.cmp-carousel__track:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: var(--radius-l); }
.cmp-carousel__slide{
  flex: 0 0 calc((100% - var(--s-6) * 2) / 3);
  scroll-snap-align: start;
}
.cmp-carousel__controls{ display: flex; align-items: center; gap: var(--s-4); }
.cmp-carousel__arrows{ display: flex; gap: var(--s-2); }
.cmp-carousel__arrow{
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--c-border-strong);
  color: var(--c-text);
  display: flex; align-items: center; justify-content: center;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease);
}
.cmp-carousel__arrow svg{ width: 15px; height: 15px; }
.cmp-carousel__arrow:hover:not(:disabled){ border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); }
.cmp-carousel__arrow:focus-visible{ outline: none; box-shadow: var(--ring); }
.cmp-carousel__arrow:disabled{ opacity: .35; cursor: default; }
.cmp-carousel__dots{ display: flex; gap: 0; }
/* the dot itself stays 7px, but the button around it is a 24px target so it
   satisfies WCAG 2.2 target size without turning the indicator into a blob */
.cmp-carousel__dot{
  width: 24px; height: 24px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-carousel__dot::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-border-strong);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cmp-carousel__dot.is-active::before{ background: var(--c-accent); transform: scale(1.35); }
.cmp-carousel__dot:focus-visible{ outline: none; box-shadow: var(--ring); }

/* a single customer story, the unit inside the carousel */
.cmp-story{
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-bg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cmp-story:hover{ box-shadow: var(--shadow-m); border-color: var(--c-border-strong); }
.cmp-story__sector{
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.cmp-story__title{
  font-size: 1.06rem;
  font-weight: var(--fw-semi);
  letter-spacing: -.016em;
  line-height: 1.4;
  color: var(--c-text);
  text-wrap: pretty;
}
.cmp-story__desc{ font-size: .9rem; line-height: 1.65; color: var(--c-text-secondary); }
/* the accreditations the engagement was scoped against, in the position a
   case-study card usually gives a product list */
.cmp-story__meta{ margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.cmp-story__meta-label{
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.cmp-story__tags{ display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.cmp-story__tags span{
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  /* the chip sits on --c-bg-soft, not white, and --c-text-muted lands at 4.43:1
     against it, just under AA. --c-text-secondary clears it with room. */
  color: var(--c-text-secondary);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  padding: .35em .75em;
}
.cmp-story__link{
  margin-top: var(--s-4);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: var(--s-2);
  font-size: .85rem;
  font-weight: var(--fw-semi);
  color: var(--c-accent);
}
.cmp-story__link::after{ content: "→"; transition: transform var(--dur-slow) var(--ease); }
.cmp-story__link:hover::after{ transform: translateX(3px); }

@media (max-width: 1024px){
  .cmp-carousel__slide{ flex-basis: calc((100% - var(--s-6)) / 2); }
}
@media (max-width: 720px){
  .cmp-carousel__track{ gap: var(--s-5); }
  /* just under a full column, so the next card's edge shows and the row reads
     as swipeable without needing the arrow buttons */
  .cmp-carousel__slide{ flex-basis: 86%; }
  .cmp-carousel__controls{ width: 100%; justify-content: space-between; }
}

/* ---------- FAQ bulk controls (cmp-faq__controls) ---------- */
.cmp-faq__controls{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

/* ---------- next steps (cmp-nextsteps) ----------
   The closing section: one wide row per path forward, so each option gets a
   full line of explanation instead of being compressed into a tile. */
.cmp-nextsteps{ display: flex; flex-direction: column; gap: var(--s-5); }
.cmp-nextstep{
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-7);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  background: var(--c-bg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cmp-nextstep:hover{ box-shadow: var(--shadow-m); border-color: var(--c-border-strong); }
.cmp-nextstep__icon{
  width: 44px; height: 44px;
  border-radius: var(--radius-m);
  background: var(--c-accent-soft);
  display: flex; align-items: center; justify-content: center;
}
.cmp-nextstep__icon svg{ width: 21px; height: 21px; color: var(--c-accent); }
.cmp-nextstep__title{ margin-bottom: var(--s-2); }
.cmp-nextstep__desc{ font-size: .93rem; line-height: 1.65; color: var(--c-text-secondary); max-width: 62ch; }
@media (max-width: 860px){
  .cmp-nextstep{
    grid-template-columns: 44px 1fr;
    row-gap: var(--s-5);
    padding: var(--s-6);
  }
  /* the action drops to its own row and lines up with the copy, not the icon */
  .cmp-nextstep > .btn{ grid-column: 2; justify-self: start; }
}
@media (max-width: 520px){
  .cmp-nextstep{ grid-template-columns: 1fr; padding: var(--s-5); border-radius: var(--radius-l); }
  .cmp-nextstep > .btn{ grid-column: 1; width: 100%; }
}

/* ---------- footnotes (cmp-footnotes) ----------
   Numbered disclosures for any figure on the page that carries a condition. */
.cmp-footnotes{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: var(--w-narrow);
}
.cmp-footnotes__item{
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: var(--s-2);
  font-size: .82rem;
  line-height: 1.65;
  color: var(--c-text-muted);
}
/* the mark is the only thing tying a figure to its disclosure, so it is content
   rather than decoration and takes a colour that clears AA */
.cmp-footnotes__mark{ font-family: var(--f-mono); color: var(--c-text-muted); }
.cmp-footnotes__item a{
  color: var(--c-accent-dim);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
/* the marker in running copy that points at one of the rows above */
.sup-ref{
  font-family: var(--f-mono);
  font-size: .62em;
  vertical-align: super;
  line-height: 1;
  color: var(--c-accent-dim);
  padding-inline: 1px;
}
.sup-ref:hover{ text-decoration: underline; }

/* ---------- holding company band (cmp-orgparent) ----------
   The top of the group page. It reads as the root node of an org chart: one
   wide panel for the parent, with a short connector rule dropping out of its
   bottom edge toward the operating companies below it. */
.cmp-orgparent{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  align-items: start;
  padding: var(--s-7);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  background: var(--c-bg);
  box-shadow: var(--shadow-s);
  margin-bottom: var(--s-8);
}
/* the connector only makes sense when something follows the band, so it hangs
   in the margin the band already reserves rather than adding height */
.cmp-orgparent::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: var(--s-8);
  background: linear-gradient(to bottom, var(--c-border-strong), transparent);
}
.cmp-orgparent__mark{
  width: 64px; height: 64px;
  border-radius: var(--radius-m);
  background: var(--c-bg-dark);
  color: var(--c-text-on-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono);
  font-size: 1.15rem;
  letter-spacing: .04em;
}
.cmp-orgparent__name{ font-size: 1.35rem; font-weight: var(--fw-strong); color: var(--c-text); }
.cmp-orgparent__role{
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-top: var(--s-2);
}
.cmp-orgparent__desc{
  margin-top: var(--s-4);
  font-size: .95rem;
  line-height: 1.7;
  color: var(--c-text-secondary);
  max-width: 76ch;
}
@media (max-width: 640px){
  .cmp-orgparent{ grid-template-columns: 1fr; padding: var(--s-6); border-radius: var(--radius-l); }
}

/* ---------- operating company cards (cmp-orggrid) ----------
   Two columns rather than three: each entity carries a legal line, a paragraph
   and a small key/value block, which is more than a third-width tile holds at a
   readable measure. */
.cmp-orggrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
.cmp-orgcard{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-bg);
  overflow: hidden;
  transition:
    box-shadow var(--dur-slow) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur-slow) var(--ease);
}
/* same top-edge accent wipe the card group uses, so a company reads as the
   same kind of object as everything else on the site */
.cmp-orgcard::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.cmp-orgcard:hover{ box-shadow: var(--shadow-m); border-color: var(--c-border-strong); transform: translateY(-3px); }
.cmp-orgcard:hover::before{ transform: scaleX(1); }
.cmp-orgcard__head{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-4);
  align-items: center;
}
.cmp-orgcard__mark{
  width: 48px; height: 48px;
  border-radius: var(--radius-m);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px var(--c-accent-hair);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cmp-orgcard:hover .cmp-orgcard__mark{ background: var(--c-accent); color: var(--c-on-accent); }
.cmp-orgcard__name{ font-size: 1.08rem; font-weight: var(--fw-semi); color: var(--c-text); }
.cmp-orgcard__legal{
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-top: 3px;
}
.cmp-orgcard__desc{
  margin-top: var(--s-5);
  font-size: .9rem;
  line-height: 1.7;
  color: var(--c-text-secondary);
}
.cmp-orgcard__facts{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3) var(--s-5);
  margin: var(--s-5) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
}
.cmp-orgcard__facts dt{
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.cmp-orgcard__facts dd{
  margin: 2px 0 0;
  font-size: .85rem;
  font-weight: var(--fw-medium);
  color: var(--c-text-body);
}
.cmp-orgcard__foot{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-5);
}
/* the status chip reuses the ownership stack's vocabulary: green for what is
   live, amber for what is deliberately closed, blue for what is still building */
.cmp-orgcard__status{
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .5em 1em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-border-strong);
  color: var(--c-text-muted);
  background: var(--c-bg-soft);
}
.cmp-orgcard.is-operating .cmp-orgcard__status{
  color: var(--c-green);
  border-color: var(--c-green-line);
  background: var(--c-green-tint);
}
.cmp-orgcard.is-closed .cmp-orgcard__status{
  color: var(--c-amber);
  border-color: var(--c-amber-line);
  background: var(--c-amber-tint);
}
.cmp-orgcard.is-building .cmp-orgcard__status{
  color: var(--c-accent-dim);
  border-color: var(--c-accent-line);
  background: var(--c-accent-soft);
}
.cmp-orgcard__link{
  font-size: .85rem;
  font-weight: var(--fw-semi);
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: var(--s-2);
}
.cmp-orgcard__link::after{ content: "→"; transition: transform var(--dur) var(--ease); }
.cmp-orgcard__link:hover::after{ transform: translateX(3px); }
@media (max-width: 860px){
  .cmp-orggrid{ grid-template-columns: 1fr; }
}
@media (max-width: 420px){
  .cmp-orgcard__facts{ grid-template-columns: 1fr; }
}

/* ---------- statement band (cmp-statement) ----------
   One page, one of these. A long scroll of evenly weighted sections gives a
   reader nothing to hold on to, so the page stops once and says the single
   thing it most wants remembered, at display size, with nothing else competing
   for the row. The air around it is the component: cutting the padding to fit
   more in defeats the purpose of having it. */
.section--statement{ padding-block: calc(var(--s-9) + var(--s-7)); }
.cmp-statement{ text-align: center; }
/* the measure belongs on the line, not the wrapper: ch resolves against the
   element's own font size, so a max-width set on the container would be
   measured in 16px zeroes and choke display type down to a column */
.cmp-statement__line{
  max-width: 38ch;
  margin-inline: auto;
  font-size: clamp(1.8rem, 3.5vw, 3.05rem);
  font-weight: var(--fw-strong);
  letter-spacing: -.028em;
  line-height: 1.12;
  color: var(--c-text);
  text-wrap: balance;
}
/* the second sentence is the turn. It takes the accent rather than a heavier
   weight, which would flatten the pair into one block of bold, and its own line
   so the rhetorical break is visible rather than left to the wrap point. */
.cmp-statement__line em{ display: block; font-style: normal; color: var(--c-accent); }
.cmp-statement__sub{
  margin: var(--s-6) auto 0;
  max-width: 58ch;
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.7;
  color: var(--c-text-secondary);
  text-wrap: pretty;
}
.cmp-statement__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
  margin-top: var(--s-7);
}
@media (max-width: 720px){
  .section--statement{ padding-block: var(--s-8); }
  .cmp-statement{ max-width: none; }
}

/* ---------- deployable configurations (cmp-configs) ----------
   One wide row per hardware configuration. The identity block is fixed-width on
   the left so the three rows read as a comparison down the page, with the spec
   strip aligned across all of them. */
.cmp-configs{ display: flex; flex-direction: column; gap: var(--s-5); }
.cmp-config{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s-7);
  padding: var(--s-7);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  background: var(--c-bg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cmp-config:hover{ box-shadow: var(--shadow-m); border-color: var(--c-border-strong); }
.cmp-config__id{
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--c-accent-dim);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-hair);
  border-radius: var(--radius-pill);
  padding: .35em .9em;
}
.cmp-config__name{ margin-top: var(--s-3); font-size: 1.2rem; font-weight: var(--fw-strong); color: var(--c-text); }
.cmp-config__form{
  margin-top: var(--s-2);
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  line-height: 1.6;
}
.cmp-config__desc{ font-size: .95rem; line-height: 1.7; color: var(--c-text-secondary); max-width: 68ch; }
.cmp-config__specs{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
  margin: var(--s-5) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
}
.cmp-config__specs dt{
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.cmp-config__specs dd{
  margin: var(--s-2) 0 0;
  font-size: .88rem;
  line-height: 1.5;
  font-weight: var(--fw-medium);
  color: var(--c-text-body);
}
@media (max-width: 900px){
  .cmp-config{ grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-6); border-radius: var(--radius-l); }
  .cmp-config__specs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px){
  .cmp-config__specs{ grid-template-columns: 1fr; }
}

/* =================================================================
   PRINT
   Compliance and legal pages get printed and attached to
   questionnaires, so give them a clean, chrome-free sheet.
   ================================================================= */
@media print{
  :root{ --notice-h: 0px; --nav-h: 0px; --header-h: 0px; }

  .cmp-noticebar,
  .cmp-navigation,
  .cmp-totop,
  .skip-link,
  .cmp-anchornav,
  .cmp-carousel__controls,
  .cmp-faq__controls,
  .cmp-footer__socials{
    display: none !important;
  }

  /* a horizontal scroller shows one screenful of cards on paper, so let the
     row wrap and print every story it holds */
  .cmp-carousel__track{
    display: block !important;
    overflow: visible !important;
  }
  .cmp-carousel__slide{ page-break-inside: avoid; margin-bottom: 1rem; }
  .cmp-offerband{
    background: #fff !important;
    border: 1px solid #999;
    color: #000;
  }
  .cmp-offerband::before{ display: none; }
  .cmp-offerband__title,
  .cmp-offerband__lede,
  .cmp-offerband__rows dt,
  .cmp-offerband__rows dd{ color: #000 !important; }

  /* Job postings and press releases get printed and circulated. The apply
     card is an on-screen affordance, but the posting body must survive on
     paper, so the two-column layout collapses and the dark code block
     inverts rather than printing as a solid ink panel. */
  .cmp-applycard{ display: none !important; }
  .cmp-joblayout{ display: block !important; }
  .cmp-code{
    background: #fff !important;
    border-color: #999 !important;
  }
  .cmp-code code{ color: #000 !important; white-space: pre-wrap; }
  .cmp-steps li::before{ background: #fff !important; color: #000 !important; box-shadow: inset 0 0 0 1px #999 !important; }
  .cmp-jobmeta__chip{ border-color: #999 !important; background: #fff !important; color: #000 !important; }
  .cmp-specs > div, .cmp-callout, .cmp-takeaways{ background: #fff !important; page-break-inside: avoid; }
  .cmp-steps li, .cmp-coverage__item{ page-break-inside: avoid; }

  body{ background: #fff; color: #000; font-size: 11pt; }

  /* heroes are white-on-navy on screen, which prints as a solid ink block */
  .cmp-hero-dark{
    min-height: 0;
    padding-top: 0;
    background: #fff;
    display: block;
  }
  .cmp-hero-dark__field,
  .cmp-hero-dark__grid,
  .cmp-hero-dark__nodes{ display: none; }
  .cmp-hero-dark__content{ padding: 0; }
  .cmp-hero-dark__title,
  .cmp-hero-dark__lede,
  .eyebrow--on-dark{ color: #000 !important; }

  .cmp-pagehero, .cmp-article__head{ padding-top: 0; }

  /* reveal-on-scroll never fires without a viewport, so force content visible */
  [data-reveal]{ opacity: 1 !important; transform: none !important; }

  .section{ padding-block: 1.2rem; }
  a{ color: #000; text-decoration: underline; }
  /* make link targets recoverable on paper */
  .cmp-legal a[href^="http"]::after,
  .cmp-article__body a[href^="http"]::after{
    content: " (" attr(href) ")";
    font-size: .85em;
    word-break: break-all;
  }
  h1, h2, h3, h4{ page-break-after: avoid; color: #000; }
  .cmp-card, .cmp-certgrid__cell, .cmp-readout__cell, .cmp-team__card, .cmp-faq__item,
  .cmp-nextstep, .cmp-story, .cmp-orgcard, .cmp-orgparent, .cmp-config{
    page-break-inside: avoid;
    box-shadow: none !important;
  }
  /* accordions are collapsed by default; print them open */
  .cmp-faq__answer{ max-height: none !important; overflow: visible !important; }
  .cmp-tabs__panel{ display: block !important; }
}