/* DXHero components — each block maps 1:1 to a Bricks global class (BEM naming). */

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-block-size: 3rem; padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  font: 600 0.8125rem/1 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn__arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(4px); }

.btn--primary { background: var(--c-primary); color: var(--c-on-dark); }          /* on light */
.btn--primary:hover { background: var(--c-electric); }
.btn--outline { border-color: var(--c-primary); color: var(--c-primary); }
.btn--outline:hover { background: var(--c-primary); color: var(--c-on-dark); }
.btn--light { background: var(--c-paper); color: var(--c-primary); }               /* on dark */
.btn--light:hover { background: var(--c-electric); color: var(--c-on-dark); }
.btn--ghost { border-color: var(--dx-on-dark-rule-strong); color: var(--c-on-dark); }
.btn--ghost:hover { border-color: var(--c-on-dark); }

.link-arrow {
  display: inline-flex; gap: 0.5rem; align-items: center;
  font-size: var(--fs-small); font-weight: 600; color: var(--c-secondary);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-block-end: 3px;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-arrow:hover { color: var(--c-electric); background-size: 0 1px; }
.section--dark .link-arrow, .section--band .link-arrow, .proof .link-arrow { color: var(--c-on-dark); }

/* ---------- Header ---------- */

.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);
  border-block-end: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header.is-scrolled { background: var(--c-night); border-color: var(--c-line-dark); }
.site-header__inner { display: flex; align-items: center; gap: var(--sp-5); min-block-size: 4.5rem; }
.site-header__logo img { inline-size: 9.5rem; }
.site-nav { display: flex; gap: var(--sp-5); margin-inline-start: auto; font-size: 0.9375rem; color: var(--c-on-dark-body); }
.site-nav a { position: relative; padding-block: var(--sp-2); }
.site-nav a::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px;
  background: var(--c-accent-on-dark); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.site-nav a:hover { color: var(--c-on-dark); }
.site-nav a:hover::after { transform: scaleX(1); }
/* Dropdowns (Services, About): hover or focus on wide screens, tap to expand in the mobile menu */
.site-nav { align-self: stretch; align-items: center; }
.nav-item { position: relative; display: flex; align-items: center; align-self: stretch; gap: 0.25rem; }
.nav-item__link { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding-inline: 0; }
.nav-item__toggle:not(.nav-item__link) { display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.75rem; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.nav-caret { inline-size: 0.625rem; block-size: 0.375rem; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform var(--dur) var(--ease); }
.nav-item:hover, .nav-item:focus-within, .nav-item.is-open { color: var(--c-on-dark); }
.nav-drop {
  position: absolute; inset-block-start: 100%; inset-inline-start: -1.25rem; z-index: 2;
  inline-size: 19rem; padding: var(--sp-2) 0;
  background: var(--c-night); border: var(--border-dark); border-block-start: 2px solid var(--c-electric);
  box-shadow: 0 24px 48px -16px rgba(5, 3, 30, 0.6);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.nav-drop--wide { inline-size: 36rem; }
.nav-drop__grid { display: grid; }
.nav-drop--wide .nav-drop__grid { grid-template-columns: 1fr 1fr; }
.site-nav .nav-drop a { display: grid; gap: 0.15rem; padding: 0.75rem 1.25rem; color: var(--c-on-dark-body); }
.site-nav .nav-drop a::after { display: none; }
.nav-drop a b { font-weight: 600; color: var(--c-on-dark); font-size: 0.9375rem; }
.nav-drop a span { font-size: var(--fs-small); color: var(--c-on-dark-muted); }
.site-nav .nav-drop a:hover { background: rgba(255, 255, 255, 0.05); box-shadow: inset 2px 0 0 var(--c-accent-on-dark); }
.site-nav .nav-drop .nav-drop__all { display: flex; gap: 0.5rem; margin-block-start: var(--sp-2); padding-block: 0.875rem 0.5rem; border-block-start: var(--border-dark); font-size: var(--fs-small); font-weight: 600; color: var(--c-on-dark); }
.site-nav .nav-drop .nav-drop__all:hover { background: none; box-shadow: none; color: var(--c-accent-on-dark); }
@media (min-width: 1001px) {
  .nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop, .nav-item.is-open .nav-drop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-item:hover .nav-caret, .nav-item.is-open .nav-caret { transform: rotate(180deg); }
}
.site-header .btn { min-block-size: 2.5rem; padding: 0.5rem 1.125rem; }
.site-header__panel { display: contents; }
.site-header__menu { display: none; }
@media (max-width: 1000px) {
  .site-header .btn { margin-inline-start: auto; }
  /* Narrow screens: the nav moves into a dropdown opened by the menu button */
  .site-header__menu {
    display: grid; align-content: center; gap: 5px; inline-size: 2.5rem; block-size: 2.5rem; padding: 0 0.625rem;
    background: none; border: 1px solid var(--dx-on-dark-rule-strong); cursor: pointer;
  }
  .site-header__menu span { display: block; block-size: 2px; background: var(--c-on-dark); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .site-header.is-open .site-header__menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .site-header__menu span:nth-child(2) { opacity: 0; }
  .site-header.is-open .site-header__menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-header__panel { display: none; }
  .site-header.is-open { background: var(--c-night); border-color: var(--c-line-dark); }
  .site-header.is-open .site-header__panel {
    display: grid; gap: var(--sp-4); position: absolute; inset-inline: 0; inset-block-start: 100%;
    padding: var(--sp-4) var(--gutter) var(--sp-5); background: var(--c-night); border-block-end: var(--border-dark);
  }
  .site-header.is-open .site-nav { display: grid; gap: 0; margin: 0; font-size: 1.125rem; }
  .site-header.is-open .site-nav a { padding-block: var(--sp-3); border-block-end: var(--border-dark); }
  .site-header.is-open .site-nav a::after { display: none; }
  .site-header.is-open .nav-item { display: grid; grid-template-columns: 1fr auto; border-block-end: var(--border-dark); }
  .site-header.is-open .site-nav .nav-item__link { padding-block: var(--sp-3); border: 0; justify-content: space-between; }
  .site-header.is-open .nav-item__toggle:not(.nav-item__link) { inline-size: 3rem; block-size: auto; }
  .site-header.is-open button.nav-item__link { grid-column: 1 / -1; inline-size: 100%; text-align: start; }
  .site-header.is-open .nav-item.is-open .nav-caret { transform: rotate(180deg); }
  .nav-drop { position: static; grid-column: 1 / -1; inline-size: auto; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 var(--sp-3); background: none; }
  .nav-item.is-open .nav-drop { display: block; }
  .nav-drop--wide .nav-drop__grid { grid-template-columns: 1fr; }
  .site-header.is-open .site-nav .nav-drop a { padding: 0.5rem 0 0.5rem var(--sp-3); border: 0; border-inline-start: 1px solid var(--c-line-dark); }
  .nav-drop a b { font-size: 1rem; font-weight: 500; }
  .nav-drop a span { display: none; }
  .site-header.is-open .site-nav .nav-drop .nav-drop__all { margin: 0; padding: 0.75rem 0 0 var(--sp-3); border: 0; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative; overflow: hidden;
  background: var(--grad-hero);
  color: var(--c-on-dark-body);
  padding-block: calc(4.5rem + var(--sp-8)) clamp(4.5rem, 9vh, 7rem);
}
.hero > .container { position: relative; z-index: 1; }

.hero__copy { grid-column: span 7; display: grid; gap: var(--sp-4); align-content: center; }

@media (max-width: 900px) { .hero__copy { grid-column: span 12; } }


/* Option D: animated signal field behind the copy (js/hero-field.js).
   Fades out under the copy and toward the bottom so text and the credentials strip stay readable. */
.hero-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-field canvas {
  display: block; inline-size: 100%; block-size: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 8%, rgba(0,0,0,.35) 38%, #000 62%), linear-gradient(to bottom, #000 70%, transparent 96%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to right, transparent 8%, rgba(0,0,0,.35) 38%, #000 62%), linear-gradient(to bottom, #000 70%, transparent 96%);
}
[dir="rtl"] .hero-field canvas {
  -webkit-mask-image: linear-gradient(to left, transparent 8%, rgba(0,0,0,.35) 38%, #000 62%), linear-gradient(to bottom, #000 70%, transparent 96%);
  mask-image: linear-gradient(to left, transparent 8%, rgba(0,0,0,.35) 38%, #000 62%), linear-gradient(to bottom, #000 70%, transparent 96%);
}
@media (max-width: 760px) {
  .hero-field canvas { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.25) 30%, #000 60%, transparent 92%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.25) 30%, #000 60%, transparent 92%); }
}
/* Pause control (WCAG 2.2.2: motion longer than 5s needs a pause) */
.hero-field__toggle {
  position: absolute; inset-block-start: calc(4.5rem + var(--sp-4)); inset-inline-end: var(--sp-4);
  pointer-events: auto; inline-size: 2rem; block-size: 2rem; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.28); color: #fff; cursor: pointer; padding: 0;
}
.hero-field__toggle:hover { border-color: #fff; }
.hero-field__toggle:focus-visible { outline: 2px solid var(--c-accent-on-dark); outline-offset: 2px; }
.hero-field__toggle span { inline-size: 8px; block-size: 10px; border-inline: 3px solid currentColor; }
.hero-field__toggle[aria-pressed="true"] span { inline-size: 0; block-size: 0; border-block: 5px solid transparent; border-inline-start: 8px solid currentColor; border-inline-end: 0; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-2); }




/* ---------- Results: header across the top, four steps in a row, one wide case card ---------- */

.rs__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-content: center; }
.rs__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-3) var(--grid-gap); align-items: end; }
.rs__intro > .eyebrow, .rs__intro > .section-title, .rs__intro > .lead { grid-column: span 8; }
.rs__intro > .lead { margin: 0; }
.rs__nav { grid-column: 1 / -1; list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.rs__nav button {
  position: relative; inline-size: 100%; display: grid; gap: 0.25rem; padding: var(--sp-3) 0 0; background: none; border: 0;
  border-block-start: 2px solid var(--c-line-dark); font: inherit; text-align: start; color: var(--c-on-dark-muted); cursor: pointer; transition: color var(--dur) var(--ease);
}
.rs__nav button::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -2px; block-size: 2px; background: var(--c-tag-on-dark); box-shadow: 0 0 10px rgba(118, 96, 255, 0.9); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.rs__nav button span { font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.06em; }
.rs__nav button b { font-weight: 600; font-size: 0.9375rem; line-height: 1.35; }
.rs__nav button em { font-style: normal; font-size: 0.8125rem; }
.rs__nav button:hover, .rs__nav button[aria-current="true"] { color: var(--c-on-dark); }
.rs__nav button[aria-current="true"]::before { transform: scaleX(1); }
[dir="rtl"] .rs__nav button::before { transform-origin: right; }

.rs__cases { display: grid; gap: var(--sp-4); }
.rs-case {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "label bars" "value bars" "what client";
  gap: var(--sp-2) var(--sp-7); align-items: end; padding: var(--sp-6) var(--sp-6); background: rgba(255, 255, 255, 0.03); border: var(--border-dark); border-block-start: 2px solid var(--c-tag-on-dark);
}
.rs-case .case__label { grid-area: label; color: var(--c-on-dark-muted); }
.rs-case__value {
  grid-area: value; font-family: var(--font-display); font-weight: 700; line-height: 0.95; letter-spacing: var(--tr-stat); font-variant-numeric: tabular-nums;
  font-size: clamp(4rem, 2.4rem + 5vw, 7.5rem); inline-size: fit-content; padding-block-end: 0.05em;
  background: linear-gradient(90deg, #7F92FF, #EEECFF); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rs-case__what { grid-area: what; font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.3; color: var(--c-on-dark); }
.rs-bars { grid-area: bars; align-self: center; display: grid; gap: var(--sp-2); font-size: 0.75rem; color: var(--c-on-dark-muted); }
.rs-bars__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: var(--sp-2); }
.rs-bars__track { position: relative; block-size: 0.75rem; background: rgba(255, 255, 255, 0.06); }
.rs-bars__fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w); min-inline-size: 2px; background: var(--dx-on-dark-rule-strong); transition: inline-size 1000ms var(--ease); }
.rs-bars__row--after .rs-bars__fill { background: linear-gradient(90deg, #3450E0, #8A9BFF); box-shadow: 0 0 12px rgba(118, 96, 255, 0.6); }
.rs-bars__fill.is-reset { transition: none; }
.rs-bars__cap { padding-inline-start: calc(5.5rem + var(--sp-2)); font-family: var(--font-mono); font-size: 0.6875rem; }
.rs-case__client { grid-area: client; font-size: var(--fs-small); color: var(--c-on-dark-muted); border-block-start: var(--border-dark); padding-block-start: var(--sp-3); }
.rs-case__client b { color: var(--c-on-dark); font-weight: 600; }
.rs__note { color: var(--c-on-dark-muted); margin: 0; }
@media (max-width: 1000px) {
  .rs__intro > .eyebrow, .rs__intro > .section-title, .rs__intro > .lead { grid-column: 1 / -1; grid-row: auto; }
  .rs-case { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value" "what" "bars" "client"; padding: var(--sp-5) var(--sp-4); }
}

@media (min-width: 1001px) and (min-height: 640px) {
  .rs { padding-block: 0; }
  .rs__track { block-size: 320vh; }
  .rs__stage { position: sticky; inset-block-start: 0; min-block-size: 100vh; padding-block: 6rem 3rem; }
  .rs-case { grid-row: 1; grid-column: 1; transition: opacity 450ms var(--ease), transform 450ms var(--ease), visibility 0s linear 450ms; }
  .rs-case:not(.is-active) { opacity: 0; visibility: hidden; transform: translateY(18px); }
  .rs-case.is-active { transition-delay: 0s; }
}
@media (max-width: 1000px), (max-height: 639px) { .rs__nav { display: none; } }

/* ---------- Services (home): low-risk staircase, smaller first step to longer-term partnership ----------
   One continuous stepped outline: a crisp blue line along each tread, a fine riser, and a faint blue
   tint that deepens step by step. Information only, no links. */

.stairs__axis { display: flex; align-items: center; gap: var(--sp-3); margin-block-end: var(--sp-5); font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.stairs__axis::after { content: ""; order: 1; flex: 1; block-size: 1px; background: linear-gradient(90deg, var(--c-line), var(--c-tag)); }
.stairs__axis span:last-child { order: 2; color: var(--c-tag); }
.stairs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; border-block-end: 1px solid var(--c-line); }
.stairs .stairs__item { --h: calc(1.25rem + var(--i) * 1.75rem); }
.stairs .stair__in { display: grid; gap: 0.4rem; padding-inline: var(--sp-3) var(--sp-3); }
.stairs .stair__idx { display: flex; align-items: center; gap: var(--sp-2); font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; color: var(--c-tag); }
.stairs .stair__idx em { font-style: normal; padding: 0.2rem 0.4rem; background: var(--c-tag); color: #fff; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.625rem; }
.stairs .stair__name { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.005em; color: var(--c-ink); }
.stairs .stair__desc { font-size: 0.875rem; color: var(--c-muted); line-height: 1.5; min-block-size: 3em; }
.stairs .stair__bar {
  position: relative; display: block; block-size: var(--h); margin-inline: calc(var(--sp-3) * -1); margin-block-start: var(--sp-3);
  border-block-start: 2px solid var(--c-tag); border-inline-start: 1px solid rgba(52, 80, 224, 0.35);
  background: linear-gradient(180deg, rgba(52, 80, 224, calc(0.05 + var(--i) * 0.025)), rgba(52, 80, 224, 0));
  transform-origin: bottom; transition: transform 800ms var(--ease); transition-delay: calc(var(--i) * 110ms);
}
.stairs .stairs__item:first-child .stair__bar { border-inline-start: 0; background: linear-gradient(180deg, rgba(52, 80, 224, 0.22), rgba(52, 80, 224, 0.02)); }
/* a small square node where each tread begins */
.stairs .stair__bar::before { content: ""; position: absolute; inset-inline-start: -4px; inset-block-start: -5px; inline-size: 8px; block-size: 8px; background: var(--c-paper); border: 2px solid var(--c-tag); }
.stairs .stairs__item:first-child .stair__bar::before { background: var(--c-tag); inset-inline-start: 0; }
.js-motion .stairs:not(.is-in) .stair__bar { transform: scaleY(0); }
.stairs__foot { margin-block-start: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; }
.stairs__foot p { margin: 0; color: var(--c-body); max-inline-size: 40rem; }
@media (max-width: 900px) {
  .stairs__axis { display: none; }
  .stairs { grid-template-columns: minmax(0, 1fr); border: 0; gap: var(--sp-4); }
  .stairs .stair__in { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .stairs .stair__desc { min-block-size: 0; }
  .stairs .stair__bar { block-size: 2px; inline-size: calc(18% + var(--i) * 16%); margin: var(--sp-1) 0 0; border: 0; background: var(--c-tag); transform-origin: left; }
  .stairs .stair__bar::before { display: none; }
  .js-motion .stairs:not(.is-in) .stair__bar { transform: scaleX(0); }
}

/* ---------- Services: index list + detail panel ---------- */

.svc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.svc__list { grid-column: span 6; border-block-start: 1px solid var(--c-ink); counter-reset: svc; }
.svc__item {
  inline-size: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2); background: none; border: 0; border-block-end: 1px solid var(--c-line);
  text-align: start; cursor: pointer; color: var(--c-muted); position: relative;
  transition: color var(--dur) var(--ease), padding var(--dur) var(--ease), background var(--dur) var(--ease);
}
.svc__item::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: -1px; inline-size: 3px; background: var(--c-tag); transform: scaleY(0); transition: transform var(--dur) var(--ease); }
.svc__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.01em; line-height: 1.3; }
.svc__arrow { inline-size: 1.125rem; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
[dir="rtl"] .svc__arrow { transform: scaleX(-1) translateX(-8px); }
.svc__item:hover, .svc__item[aria-selected="true"] { color: var(--c-ink); padding-inline-start: var(--sp-3); }
.svc__item[aria-selected="true"] { background: var(--c-wash); }
.svc__item[aria-selected="true"]::before { transform: scaleY(1); }
.svc__item:hover .svc__arrow, .svc__item[aria-selected="true"] .svc__arrow { opacity: 1; transform: none; }
[dir="rtl"] .svc__item:hover .svc__arrow, [dir="rtl"] .svc__item[aria-selected="true"] .svc__arrow { transform: scaleX(-1); }

.svc__panel { grid-column: 8 / span 5; position: sticky; top: 6rem; margin-block-start: -1px; background: var(--c-wash); border-block-start: 3px solid var(--c-primary); padding: var(--sp-4); align-content: start; }
.svc__detail { display: grid; gap: var(--sp-3); }
.svc__detail[hidden] { display: none; }
.svc__panel > * { transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.svc__panel.is-switching > * { opacity: 0; transform: translateY(6px); }
.svc__step { font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; color: var(--c-tag); }
.svc__title { font-size: 1.25rem; }
.svc__desc { color: var(--c-body); font-size: 0.9375rem; }
.svc__badge { justify-self: start; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-on-dark); background: var(--c-primary); padding: 0.25rem 0.5rem; }
.svc__includes { border-block-start: var(--border); padding-block-start: var(--sp-3); display: grid; gap: var(--sp-2); font-size: var(--fs-small); }
.svc__includes .case__label { margin-block-end: var(--sp-1); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { font-family: var(--font-mono); font-size: 0.75rem; padding: 0.25rem 0.625rem; background: var(--dx-blue-100); color: var(--c-primary); border: 1px solid var(--dx-blue-100); }
.svc__subs { display: grid; gap: var(--sp-2); border-block-start: var(--border); padding-block-start: var(--sp-3); }
.chip--link { background: var(--c-paper); border-color: var(--c-line); color: var(--c-ink); font-family: var(--font-body); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.chip--link:hover { border-color: var(--c-electric); color: var(--c-electric); }
.chip--tool { background: transparent; border-color: var(--c-line); color: var(--c-body); font-family: var(--font-body); }
@media (max-width: 900px) {
  .svc__list, .svc__panel { grid-column: span 12; }
  .svc__panel { position: static; min-block-size: 0; }
}

/* ---------- Industries: folder tabs + marketing panel ---------- */

.ind-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); }
.ind-tab {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-block-size: 4.5rem; padding: var(--sp-3);
  background: var(--c-paper); border: 1px solid var(--c-line); color: var(--c-ink);
  font: 600 0.9375rem/1.3 var(--font-body); text-align: start; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ind-tab svg { flex: none; inline-size: 1.125rem; block-size: 1.125rem; fill: none; stroke: var(--c-secondary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur) var(--ease); }
.ind-tab:hover { border-color: var(--c-electric); color: var(--c-electric); }
.ind-tab:hover svg { stroke: var(--c-electric); }
.ind-tab[aria-selected="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-dark); }
.ind-tab[aria-selected="true"] svg { stroke: var(--c-accent-on-dark); }
.ind-tab[aria-selected="true"] .ind-tab__chev { opacity: 0; }
.ind-tab__chev { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.ind-tab:hover .ind-tab__chev { transform: translateY(2px); }
/* the selected tab points down into the panel */
.ind-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: var(--sp-4); border: 8px solid transparent; border-block-start-color: var(--c-primary); }
.ind-tab--more { justify-content: space-between; border-style: dashed; color: var(--c-muted); }
.ind-tab--more svg { inline-size: 1.125rem; block-size: 1.125rem; stroke: currentColor; }
.ind-tab--more:hover { background: var(--c-electric); border-color: var(--c-electric); border-style: solid; color: var(--c-on-dark); }
.ind-tab--more:hover svg { stroke: var(--c-on-dark); }
[dir="rtl"] .ind-tab--more svg { transform: scaleX(-1); }

.ind-panels { margin-block-start: var(--sp-4); background: var(--c-wash); border-block-start: 3px solid var(--c-primary); }
.ind-panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5) var(--grid-gap); padding: var(--sp-6) var(--sp-5); align-items: center; }
.ind-panel[hidden] { display: none; }
.ind-panel > * { transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
.ind-panels.is-switching .ind-panel > * { opacity: 0; transform: translateY(8px); }
.ind-panel__copy { grid-column: span 7; display: grid; gap: var(--sp-3); justify-items: start; }
.ind-panel__pain { font-size: var(--fs-section); font-weight: 700; letter-spacing: var(--tr-section); line-height: 1.12; }
.ind-panel__promise { font-size: var(--fs-lead); line-height: 1.55; color: var(--c-body); max-inline-size: 36rem; }
.ind-panel__focus { display: grid; gap: var(--sp-2); margin-block: var(--sp-1) var(--sp-2); }
.ind-panel__focus .chip--tool { background: var(--c-paper); }

.ind-result { grid-column: 9 / span 4; display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5); background: var(--grad-hero); color: var(--c-on-dark-body); }
.ind-result__label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-on-dark-muted); }
.ind-result__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-stat); line-height: 1; letter-spacing: var(--tr-stat); color: var(--c-on-dark); font-variant-numeric: tabular-nums; margin-block-start: var(--sp-2); }
.ind-result__what { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--c-on-dark); }
.ind-result__client { font-size: 0.8125rem; color: var(--c-on-dark-muted); border-block-start: var(--border-dark); padding-block-start: var(--sp-2); margin-block-start: var(--sp-2); }
.ind-result__list { font-size: 0.9375rem; color: var(--c-on-dark); margin-block-start: var(--sp-2); }

@media (max-width: 1000px) {
  .ind-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--sp-2); }
  .ind-tab { flex: 0 0 auto; scroll-snap-align: start; min-block-size: 3.5rem; }
  .ind-panel { padding: var(--sp-5) var(--sp-4); }
  .ind-panel__copy, .ind-result { grid-column: span 12; }
}


/* ---------- What we do: statement + pinned layer stack ---------- */

.what { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-6) var(--grid-gap); align-items: center; }
.what__copy { grid-column: span 5; display: grid; gap: var(--sp-4); }
.what__copy .lead { color: var(--c-body); }
.what__stack { grid-column: 7 / span 6; }
@media (max-width: 900px) { .what__copy, .what__stack { grid-column: span 12; } }
@media (min-width: 901px) and (min-height: 640px) {
  .what-pin { padding-block: 0; }
  .what-pin__track { block-size: 240vh; }
  .what-pin .what { position: sticky; inset-block-start: 0; min-block-size: 100vh; padding-block: 6rem 3rem; }
}

/* A dark panel with the stack drawn as tilted plates (like an isometric tech-stack diagram):
   four layers over a "Datadog" base plate. Scrolling lights the plates top to bottom and the caption
   under the stack shows the question that layer answers. Without JS or with reduced motion every
   plate is lit and all four captions are listed. */
.layers { background: var(--grad-hero); color: var(--c-on-dark-body); border: 1px solid var(--dx-indigo-800); box-shadow: 0 32px 64px -32px rgba(14, 10, 42, 0.55); }
/* light header bar so the Datadog logo appears in its own colours, unaltered */
.layers__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-wash); border-block-end: 1px solid var(--dx-indigo-800); font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--c-ink); }
.layers__head img { inline-size: 6.5rem; }

.iso { --plate: 13.5rem; --gap: 3.6rem; position: relative; block-size: calc(var(--plate) * 0.75 + 4 * var(--gap) + 1.5rem); margin-block: var(--sp-3) 0; }
.iso__plate {
  position: absolute; inset-inline-start: 50%; inset-block-start: calc(var(--i) * var(--gap) - var(--plate) * 0.1);
  z-index: calc(10 - var(--i)); inline-size: var(--plate); block-size: var(--plate); margin-inline-start: calc(var(--plate) / -2);
  transform: rotateX(57deg) rotateZ(-45deg);
  background: linear-gradient(135deg, #5A74FF 0%, #3450E0 55%, #2A2FB8 100%);
  border: 1px solid rgba(190, 200, 255, 0.55);
  box-shadow: 0 0 46px rgba(90, 116, 255, 0.45);
  transition: background 500ms var(--ease), border-color 500ms var(--ease), box-shadow 500ms var(--ease), translate 500ms var(--ease), opacity 500ms var(--ease);
}
.iso__label { position: absolute; top: 0.9rem; bottom: 0.9rem; left: 0.9rem; writing-mode: vertical-rl; font: 600 0.875rem/1 var(--font-body); letter-spacing: 0.02em; color: #fff; white-space: pre; transition: color 500ms var(--ease); }
.iso__plate--base { background: linear-gradient(135deg, rgba(79, 123, 255, 0.45), rgba(52, 80, 224, 0.3)); border-color: rgba(120, 150, 255, 0.7); box-shadow: 0 0 60px rgba(52, 80, 224, 0.4); }
.iso__plate--base .iso__label { color: #D9CCFF; }

.layers__list { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-3); }
.layer { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sp-3); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.layer__idx { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; font: 500 0.75rem/1 var(--font-mono); color: #fff; background: var(--dx-blue-500); border: 1px solid #6F86FF; box-shadow: 0 0 16px rgba(118, 96, 255, 0.8); }
.layer__name { margin: 0; font-size: 1.125rem; color: var(--c-on-dark); }
.layer__q { margin-block: 0.25rem var(--sp-2); font-size: 0.9375rem; color: var(--c-on-dark-body); }
.layers .chip { background: rgba(255, 255, 255, 0.05); border-color: rgba(110, 122, 232, 0.45); color: var(--c-on-dark); }
.layers__foot { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-block-start: 1px solid var(--dx-blue-500); background: linear-gradient(90deg, #3450E0, #5A74FF); color: #fff; box-shadow: 0 -12px 40px rgba(52, 80, 224, 0.45); font-size: var(--fs-small); transition: background 500ms var(--ease), box-shadow 500ms var(--ease), color 500ms var(--ease), border-color 500ms var(--ease); }
/* when the last layer is lit, DXHero's bar switches on, with one sweep of light */
.layers__foot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%); transform: translateX(-100%); }
.layers.is-done .layers__foot::after { animation: foot-sweep 900ms cubic-bezier(0.6, 0, 0.3, 1) 150ms both; }
@keyframes foot-sweep { to { transform: translateX(100%); } }
.layers__foot b { font-family: var(--font-display); font-size: 1rem; color: #fff; }

/* live state (js/site.js adds .is-live): plates stay dark until scrolled to; the newest lifts */
.layers.is-live .iso__plate:not(.is-lit):not(.iso__plate--base) { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
.layers.is-live .iso__plate:not(.is-lit):not(.iso__plate--base) .iso__label { color: var(--c-on-dark-muted); }
.layers.is-live:not(.is-done) .layers__foot { background: transparent; color: var(--c-on-dark-muted); border-color: var(--c-line-dark); box-shadow: none; }
.layers.is-live:not(.is-done) .layers__foot b { color: var(--c-on-dark-muted); }
/* pinned (wide screens): the caption shows only the current layer */
@media (min-width: 901px) and (min-height: 640px) {
  .layers.is-live .layers__list { grid-template-areas: "c"; }
  .layers.is-live .layer { grid-area: c; }
  .layers.is-live .layer:not(.is-current) { opacity: 0; transform: translateY(8px); pointer-events: none; }
}
@media (max-width: 900px), (max-height: 639px) {
  .layers.is-live .layer:not(.is-lit) { opacity: 0.35; }
}
@media (max-width: 480px) { .iso { --plate: 9.5rem; --gap: 2.6rem; } .iso__label { font-size: 0.6875rem; } }

/* ---------- Section eyebrow: the logo's ">" plus a signal line that draws in once ---------- */

.eyebrow--signal {
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48.36 100'%3E%3Cpath d='M0 0H28.27L48.36 50L28.27 100H0L20.09 50Z'/%3E%3C/svg%3E");
  display: flex; align-items: center; gap: 0.625rem;
}
.eyebrow--signal::before {
  content: ""; flex: none; inline-size: 0.5rem; block-size: 1.05rem; background: var(--c-tag);
  -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
  transition: opacity 500ms var(--ease), transform 800ms cubic-bezier(0.1, 0.8, 0.2, 1);
}
.eyebrow--signal::after { content: ""; flex: 0 1 10rem; block-size: 1px; background: linear-gradient(90deg, var(--c-tag), transparent); transform-origin: left; transition: transform 1200ms var(--ease) 250ms; }
.section--dark .eyebrow--signal::before, .section--band .eyebrow--signal::before { background: var(--c-tag-on-dark); filter: drop-shadow(0 0 6px rgba(118, 96, 255, 0.95)); }
.section--dark .eyebrow--signal::after, .section--band .eyebrow--signal::after { background: linear-gradient(90deg, var(--c-tag-on-dark), transparent); }
.js-motion [data-reveal]:not(.is-in) .eyebrow--signal::before { opacity: 0; transform: translateX(-16px); }
.js-motion [data-reveal]:not(.is-in) .eyebrow--signal::after { transform: scaleX(0); }
[dir="rtl"] .eyebrow--signal::before { scale: -1 1; }
[dir="rtl"] .eyebrow--signal::after { transform-origin: right; background: linear-gradient(270deg, var(--c-tag), transparent); }

/* ---------- Why us: a testimonial carousel beside the four reasons (asymmetric) ---------- */

.why { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: stretch; }
.why__head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-3) var(--grid-gap); align-items: end; margin-block-end: var(--sp-4); }
.why__head > * { grid-column: span 8; }
.why__head > .lead { margin: 0; }

/* the quotes support the reasons: a small stack of frosted cards with topic tags. The front card is
   dealt to the back on "next"; the two behind it peek out below, slightly smaller. */
.quotes { grid-column: 9 / span 4; grid-row: 2; align-self: start; display: grid; gap: var(--sp-5); }
.quotes__stack { display: grid; padding-block-end: 2.25rem; }      /* room for the cards peeking out below */
.quotes__stack:has(> .quote:only-child) { padding-block-end: 0; }
.qcard { display: grid; gap: var(--sp-3); align-content: start; margin: 0; padding: var(--sp-4);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.9); outline: 1px solid rgba(38, 25, 86, 0.07);
  box-shadow: 0 18px 36px -26px rgba(38, 25, 86, 0.3); color: var(--c-body); }
.quotes__stack .quote { grid-area: 1 / 1; transform-origin: 50% 100%; transition: transform 550ms var(--ease), opacity 550ms var(--ease), filter 550ms var(--ease); }
.quotes__stack .quote[data-pos="0"] { z-index: 3; }
.quotes__stack .quote[data-pos="1"] { z-index: 2; transform: translateY(1.1rem) scale(0.95); opacity: 0.9; pointer-events: none; }
.quotes__stack .quote[data-pos="2"] { z-index: 1; transform: translateY(2.2rem) scale(0.9); opacity: 0.7; pointer-events: none; }
.quotes__stack .quote[data-pos="3"] { z-index: 0; transform: translateY(2.2rem) scale(0.9); opacity: 0; pointer-events: none; }
.quotes__stack .quote[data-pos]:not([data-pos="0"]) > * { visibility: hidden; }   /* cards behind show only their edge */
/* dealing the front card to the back: it slides out to the side, then tucks in behind */
.quotes__stack .quote.is-dealt { z-index: 4; animation: deal-back 650ms var(--ease) forwards; }
.quotes__stack .quote.is-dealt > * { visibility: visible; }
@keyframes deal-back {
  45% { transform: translate(55%, -0.5rem) rotate(5deg); opacity: 1; }
  55% { z-index: 0; }
  100% { transform: translateY(2.2rem) scale(0.9); opacity: 0.7; z-index: 0; }
}
.quotes__stack .quote.is-recalled { animation: deal-front 650ms var(--ease) both; }
@keyframes deal-front { 0% { transform: translateY(2.2rem) scale(0.9); opacity: 0.7; } 50% { transform: translate(-55%, -0.5rem) rotate(-5deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.quote figcaption { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); align-items: center; font-size: 0.8125rem; color: var(--c-muted); }
.quote figcaption img, .quote__ph { inline-size: 2.5rem; block-size: 2.5rem; object-fit: cover; }
.quote__ph { display: block; background: repeating-linear-gradient(45deg, var(--c-wash) 0 6px, var(--c-line-soft) 6px 7px); border: 1px dashed var(--c-line); }
.quote figcaption > span { display: grid; gap: 0.1rem; }
.quote figcaption b { color: var(--c-ink); font-weight: 600; font-size: 0.9375rem; }
.quote__src { font-style: normal; font: 600 0.6875rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35rem 0.5rem; background: var(--dx-indigo-800); color: #fff; }
.quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.45; letter-spacing: -0.005em; color: var(--c-ink); }
.quote__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.quote__tags li { font: 500 0.75rem/1 var(--font-body); padding: 0.4rem 0.6rem; background: rgba(52, 80, 224, 0.1); border: 1px solid rgba(52, 80, 224, 0.25); color: var(--dx-blue-500); }
@media (prefers-reduced-motion: reduce) { .quotes__stack .quote.is-dealt, .quotes__stack .quote.is-recalled { animation: none; } }
.quotes__ctrl[hidden] { display: none; }
.quotes__ctrl { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.quotes__dots { display: flex; gap: 6px; }
.quotes__dots button { inline-size: 2rem; block-size: 2px; padding: 0; border: 0; background: var(--c-line); cursor: pointer; position: relative; }
.quotes__dots button::before { content: ""; position: absolute; inset-inline: 0; inset-block: -8px; }
.quotes__dots button[aria-current="true"] { background: var(--c-tag); }
.quotes__nav { display: flex; gap: var(--sp-2); }
.quotes__nav button { inline-size: 2.25rem; block-size: 2.25rem; display: grid; place-items: center; background: none; border: 1px solid var(--c-line); color: var(--c-ink); font: inherit; cursor: pointer; }
.quotes__nav button:hover, .quotes__nav button:focus-visible { border-color: var(--c-ink); }

.reasons { grid-column: 1 / span 7; grid-row: 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: 1px solid var(--c-line); }
.reason { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-4) var(--sp-3) var(--sp-4) 0; border-block-end: 1px solid var(--c-line); }
.reason:nth-child(odd) { border-inline-end: 1px solid var(--c-line); }
.reason:nth-child(even) { padding-inline: var(--sp-3) 0; }
.reason__idx { font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; color: var(--c-tag); }
.reason__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; color: var(--c-ink); }
.reason__text { margin: 0; font-size: var(--fs-small); color: var(--c-body); }
.reason__badges { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-1); }
.reason__badges img { block-size: 2.5rem; inline-size: auto; }
@media (max-width: 1000px) {
  .why__head > * { grid-column: 1 / -1; }
  .quotes, .reasons { grid-column: 1 / -1; grid-row: auto; }
  .quotes { order: 2; margin-block-start: var(--sp-4); }   /* on phones the reasons come first, the quote follows */
}
@media (max-width: 520px) {
  .reasons { grid-template-columns: minmax(0, 1fr); }
  .reason:nth-child(n) { padding-inline: 0; border-inline-end: 0; }
}

/* ---------- Articles ---------- */

.articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.article { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--sp-3); padding: var(--sp-4); background: var(--c-paper); border-block-start: 3px solid var(--c-secondary); transition: border-color var(--dur) var(--ease); }
.article:hover { border-color: var(--c-electric); }
.article__meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--c-muted); }
.article__title { font-size: 1.25rem; transition: color var(--dur) var(--ease); }
.article:hover .article__title { color: var(--c-secondary); }
.article__text { font-size: var(--fs-small); color: var(--c-muted); }
@media (max-width: 900px) { .articles { grid-template-columns: minmax(0, 1fr); } }

/* ---------- CTA band ---------- */

.cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5) var(--grid-gap); align-items: center; }
.cta__copy { grid-column: span 8; display: grid; gap: var(--sp-3); }
.cta__side { grid-column: 9 / span 4; display: grid; gap: var(--sp-3); justify-items: start; }
.cta__side .mono { color: var(--c-on-dark-muted); }
/* the logo mark, whole and level, as tall as the band */
.cta-mark { position: absolute; inset-inline-end: 3%; inset-block: 0; block-size: 100%; inline-size: auto; aspect-ratio: 49.75 / 27.6; opacity: 0.09; pointer-events: none; }   /* top and bottom flush with the band */
.cta-mark path { fill: var(--c-on-dark); }
.section--band { overflow: hidden; }
.section--band > .container { position: relative; z-index: 1; }
@media (max-width: 900px) { .cta__copy, .cta__side { grid-column: span 12; } }

/* ---------- Footer ---------- */

.site-footer { background: var(--c-night); color: var(--c-on-dark-muted); font-size: var(--fs-small); padding-block: var(--sp-7) var(--sp-5); }
.site-footer__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5) var(--grid-gap); padding-block-end: var(--sp-6); border-block-end: var(--border-dark); }
.site-footer__brand { grid-column: span 4; display: grid; gap: var(--sp-3); align-content: start; }
.site-footer__brand > img { inline-size: 9.5rem; }
.site-footer__award { display: flex; gap: var(--sp-2); align-items: center; }
.site-footer__award img { inline-size: 2.25rem; }
.site-footer__award p { color: var(--c-on-dark-body); line-height: 1.4; }
.site-footer address { font-style: normal; line-height: 1.6; }
.site-footer__contact a, .site-footer__social { color: var(--c-on-dark-body); transition: color var(--dur) var(--ease); }
.site-footer__contact a:hover, .site-footer__social:hover { color: var(--c-on-dark); }
.site-footer__social { display: inline-flex; align-items: center; gap: var(--sp-2); justify-self: start; }
.site-footer__col { grid-column: span 2; display: grid; gap: var(--sp-2); align-content: start; }
.site-footer__col--first { grid-column: 6 / span 3; }
.site-footer__col h4 { font-family: var(--font-body); font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-on-dark); font-weight: 600; margin-block-end: var(--sp-2); }
.site-footer__col a { transition: color var(--dur) var(--ease); }
.site-footer__col a:hover { color: var(--c-on-dark); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); padding-block-start: var(--sp-4); }
@media (max-width: 900px) {
  .site-footer__brand { grid-column: span 12; }
  .site-footer__col, .site-footer__col--first { grid-column: span 4; grid-column-start: auto; }
}
@media (max-width: 560px) { .site-footer__col, .site-footer__col--first { grid-column: span 6; } }


/* signal field on phones: behind the copy, dimmed so the text stays readable */
@media (max-width: 760px) {
  .hero:has(.hero-field) { padding-block: calc(4.5rem + var(--sp-5)) var(--sp-7); }   /* compact: no empty band above the copy */
  .hero-field__toggle { inset-block: auto var(--sp-4); }                                /* pause control moves to the bottom corner */
  .hero-field[data-variant="bold"] canvas {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.38) 60%, transparent 96%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.38) 60%, transparent 96%);
  }
}
/* Partner of the Year badges sit under the copy, start-aligned */
.hero__awards { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-block-start: var(--sp-3); }
.hero__awards img { block-size: 3.25rem; inline-size: auto; }