/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — SECTION STYLES
   Light/dark section system only. No coloured backgrounds.
   ACF bg_colour values map to either light (default) or dark.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════
   BASE SECTION WRAPPER
   ══════════════════════════════ */

.adm-section {
  position: relative;
  padding: var(--section-padding-y) 0;
  overflow: clip;  /* clip (not hidden) so it doesn't form a scroll container that breaks position:sticky descendants */
  /* Apply the section's own --color-text as the inherited colour. Without this, elements that only
     inherit `color` (stat labels, accordion questions, etc.) pick up the BODY colour — which is #fff
     in dark mode — so White/forced-light sections render white-on-white. */
  color: var(--color-text);
}

/* Prevent empty sections from taking space */
.adm-section:empty,
.adm-section > .container:empty {
  padding: 0;
  margin: 0;
  min-height: 0;
}

.adm-section > .container {
  position: relative;
  z-index: 1;
}

/* ── Spacing variants ── */
.adm-section.section--sm { padding: var(--space-16) 0; }
.adm-section.section--lg { padding: var(--space-32) 0; }
.adm-section.section--none { padding: 0; }
/* Full viewport: fill the screen below the fixed header, content vertically centred.
   (svh keeps it correct on mobile browser chrome.) */
.adm-section--vh { --adm-vh-margin: 0px; min-height: calc(100svh - var(--adm-header-h, 84px) - var(--adm-announce-h, 0px) - var(--adm-vh-margin)); display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-8); }
.adm-section--vh > .container { width: 100%; }
/* Card style adds the card gutter top + bottom — subtract BOTH so the box still fills exactly one
   screen. --adm-card-gutter is set by ADM Control from the real gutter (falls back to 8px). */
.adm-section--vh.adm-section--card { --adm-vh-margin: calc(2 * var(--adm-card-gutter, 8px)); }
@supports not (height: 100svh) { .adm-section--vh { min-height: calc(100vh - var(--adm-header-h, 84px) - var(--adm-announce-h, 0px) - var(--adm-vh-margin)); } }
/* Logged-in: subtract the WP admin bar so the section still fills exactly one screen. */
.admin-bar .adm-section--vh { min-height: calc(100svh - var(--adm-header-h, 84px) - var(--adm-announce-h, 0px) - var(--adm-vh-margin) - 32px); }
@media screen and (max-width: 782px) { .admin-bar .adm-section--vh { min-height: calc(100svh - var(--adm-header-h, 84px) - var(--adm-announce-h, 0px) - var(--adm-vh-margin) - 46px); } }

/* ── Header block centring (driven by data-align = HEADER alignment) ──
   Only centres the .section-header block; the SECTION-wide text-align is driven by
   content_align (.text-center/.text-right) so content can align independently. */
.adm-section[data-align="center"] .section-header { margin-left: auto; margin-right: auto; }
.adm-section[data-align="center"] .section-header__actions { justify-content: center; }
/* Right header alignment is handled by .adm-ha-right .section-header (header only). This must NOT
   set section-wide text-align, or it re-couples content alignment to the heading (the split bug). */
.adm-section[data-align="right"] .section-header { margin-left: auto; margin-right: 0; }

/* ── Grid column override (driven by data-columns) ── */
.adm-section[data-columns="2"] .grid { grid-template-columns: repeat(2, 1fr); }
.adm-section[data-columns="3"] .grid { grid-template-columns: repeat(3, 1fr); }
.adm-section[data-columns="4"] .grid { grid-template-columns: repeat(4, 1fr); }
.adm-section[data-columns="auto"] .grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ── Reverse layout ── */
.adm-section--reverse .split { direction: rtl; }
.adm-section--reverse .split > * { direction: ltr; }

/* Split layout fallback — if one child is empty, go single column */
.split:has(> *:only-child) {
  grid-template-columns: 1fr;
}

/* Ensure images inside split don't overflow */
.split img {
  max-width: 100%;
  height: auto;
}

/* ── MagicUI section-level effect: animated border wraps the whole section ── */
.magic-border-section {
  border: 1px solid transparent;
  background-clip: padding-box;
}

/* Prose content (WYSIWYG output) */
.prose { line-height: var(--line-height-relaxed); }
.prose p { margin-bottom: var(--space-4); color: var(--color-text-secondary); }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin-bottom: var(--space-4); padding-left: var(--space-6); }
.prose li { margin-bottom: var(--space-2); color: var(--color-text-secondary); }
.prose ul li { list-style-type: disc; }
.prose ol li { list-style-type: decimal; }
.prose h2, .prose h3, .prose h4 { margin-top: var(--space-8); margin-bottom: var(--space-4); }
.prose a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.prose img { border-radius: var(--radius-md); margin: var(--space-6) 0; }
.prose blockquote { border-left: 3px solid var(--color-brand); padding-left: var(--space-4); margin: var(--space-6) 0; font-style: italic; color: var(--color-text-secondary); }


/* ══════════════════════════════
   LIGHT SECTIONS (default)
   No data-bg, or Grey
   ══════════════════════════════ */

.adm-section:not([data-bg]),
.adm-section[data-bg=""] {
  background: transparent;
}

.adm-section[data-bg="Grey"] {
  background: var(--color-surface-2);
}

/* ══════════════════════════════
   NEUTRAL BACKGROUND STEPS — White · Light · Dark · Black
   ══════════════════════════════ */

/* White — pure #fff, dark text (default text colour) */
.adm-section.adm-section--white,
.adm-section[data-bg="White"] {
  background: #ffffff;
  /* White is an always-light surface. Force the full light-mode token set so a
     White section looks identical in light and dark mode — otherwise in dark
     mode the text is white (invisible) and cards/borders stay dark. */
  --color-text: #1a1a1a;
  --color-text-secondary: #6b6b6b;
  --color-text-muted: #999999;
  --color-bg: #ffffff;
  --color-surface-1: #ffffff;
  --color-surface-2: #f0f0f2;
  --color-surface-3: #e5e5ea;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.15);
  --color-brand-dim: rgba(229, 0, 109, 0.08);
  /* Pin the glass tokens too, so a glass container effect stays a LIGHT frosted card
     here in dark mode (otherwise the card frosts dark while the text is forced dark). */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.5);
}

/* Light — subtle off-white (the page tone) */
.adm-section[data-bg="Light"] {
  background: var(--color-bg);
}

/* Black — pure #000 (inherits the --dark light-text treatment below) */
.adm-section.adm-section--black,
.adm-section[data-bg="Black"] {
  background: #000000;
}


/* ══════════════════════════════
   BACKGROUND IMAGE SECTIONS
   ══════════════════════════════ */

.adm-section--has-bg-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* ══════════════════════════════
   DARK SECTIONS
   Any "coloured" ACF value (Magenta, Purple, Black) renders as dark.
   Clean, consistent dark treatment.
   ══════════════════════════════ */

/* All dark section styles use the .adm-section--dark class (added by PHP) */
.adm-section.adm-section--dark,
.adm-section[data-bg="Dark"] {
  background: #0a0a0a;
  color: #ffffff;
}

.adm-section--dark p,
.adm-section--dark .card__desc,
.adm-section--dark .label,
.adm-section--dark .section-header__desc,
.adm-section--dark .lead,
.adm-section--dark .prose p {
  color: rgba(255, 255, 255, 0.7);
}

.adm-section--dark h1,
.adm-section--dark h2,
.adm-section--dark h3,
.adm-section--dark h4,
.adm-section--dark h5,
.adm-section--dark h6,
.adm-section--dark .card__title {
  color: #ffffff;
}

.adm-section--dark .card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.adm-section--dark .card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.adm-section--dark .btn--primary {
  background: var(--color-brand);
  color: #ffffff;
  border-color: var(--color-brand);
}

.adm-section--dark .btn--secondary {
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.adm-section--dark .btn--secondary:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: rgba(229, 0, 109, 0.1);
}

.adm-section--dark .btn--ghost {
  color: rgba(255, 255, 255, 0.7);
}

.adm-section--dark .kpi {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.adm-section--dark .kpi__value {
  color: #ffffff;
}

.adm-section--dark .kpi__label {
  color: rgba(255, 255, 255, 0.5);
}

.adm-section--dark .badge--neutral {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
}

.adm-section--dark .section-header__overline {
  color: var(--color-brand);
}

.adm-section--dark .magic-line-grid::before {
  background-image:
    linear-gradient(rgba(229, 0, 109, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229, 0, 109, 0.02) 1px, transparent 1px);
}

/* Magenta bg-effects: brand-tinted patterns are invisible on the brand bg.
   Re-tint to translucent white (compound selectors — the effect class sits on
   the same <section> element as adm-section--magenta, not a descendant). */
.adm-section--magenta.magic-dot-grid::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
}
.adm-section--magenta.magic-line-grid::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
}
.adm-section--magenta .magic-line-grid__square {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
}
.adm-section--magenta.magic-mesh-bg::before {
  background:
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.07) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}

.adm-section--dark .border,
.adm-section--dark hr {
  border-color: rgba(255, 255, 255, 0.08);
}

.adm-section--dark .input,
.adm-section--dark .textarea {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Marquee fade edges now use CSS mask (in magic-ui.css) — works on all backgrounds */


/* ══════════════════════════════
   DOT PATTERN OVERLAYS
   ══════════════════════════════ */

.adm-section__dots {
  position: absolute;
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.adm-section__dots[data-dot-color="White"] { color: #ffffff; }
.adm-section__dots[data-dot-color="Black"] { color: #000000; }
.adm-section__dots[data-dot-color="Grey"] { color: #888888; }

.adm-section__dots[data-dot-pos~="top"] { top: -40px; }
.adm-section__dots[data-dot-pos~="bottom"] { bottom: -40px; top: auto; }
.adm-section__dots[data-dot-pos~="center"] { top: 50%; transform: translateY(-50%); }
.adm-section__dots[data-dot-pos~="left"] { left: -40px; }
.adm-section__dots[data-dot-pos~="right"] { right: -40px; left: auto; }

.adm-section__dots:not([data-dot-pos]) {
  top: var(--space-8);
  right: var(--space-8);
}


/* ══════════════════════════════
   ACCENT COLOUR (links within section)
   ══════════════════════════════ */

.adm-section a:not(.btn) {
  color: var(--color-brand);
}


/* ══════════════════════════════
   SECTION HEADER
   ══════════════════════════════ */

.section-header {
  max-width: 680px;
  margin-bottom: var(--space-12);
}

.section-header--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-header__overline {
  /* inline-block, not inline-flex.
     As a flex container the dot was a flex ITEM sitting at the start of the
     box. That is fine on one centred line, and wrong the moment the text
     wraps: the box spans the full column, the text item centres its own text,
     and the dot is left stranded against the left edge, vertically centred
     against a two-line block — floating on its own with the words in the
     middle of the screen. It showed up on phones because that is where this
     copy wraps.
     Inline-block keeps the dot in the text flow, so it sits immediately
     before the first word and centres with it, wraps with it, and needs no
     per-alignment rules. margin-bottom still applies, which it would not on
     a plain inline. */
  display: inline-block;
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.section-header__overline::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--space-2);
  vertical-align: middle;
  border-radius: 50%;
  background: var(--color-brand);
  box-shadow: 0 0 8px var(--color-brand);
  animation: adm-pulse 2s ease-in-out infinite;
}

.section-header__title {
  margin-bottom: var(--space-4);
}

/* Optional sub-heading (sits between heading and description) */
.section-header__sub {
  font-size: clamp(var(--font-size-lg), 2.2vw, var(--font-size-2xl));
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug, 1.25);
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  max-width: 52ch;
}
.section-header--center .section-header__sub { margin-left: auto; margin-right: auto; }

/* ── Split alignment: header (eyebrow/heading/sub/intro) is independent of content alignment ──
   content_align sets .text-center/.text-right on the section (cascades to the cards/grids);
   header_align sets .adm-ha-* and overrides just the .section-header so you can, e.g., centre the
   heading while forcing the cards left. */
.adm-ha-center .section-header { text-align: center; margin-left: auto; margin-right: auto; }
.adm-ha-center .section-header__sub { margin-left: auto; margin-right: auto; }
.adm-ha-center .section-header__actions { justify-content: center; }
.adm-ha-left .section-header { text-align: left; margin-left: 0; margin-right: auto; }
.adm-ha-left .section-header__sub { margin-left: 0; margin-right: auto; }
.adm-ha-left .section-header__actions { justify-content: flex-start; }
.adm-ha-right .section-header { text-align: right; margin-left: auto; margin-right: 0; }
.adm-ha-right .section-header__sub { margin-left: auto; margin-right: 0; }
.adm-ha-right .section-header__actions { justify-content: flex-end; }

.section-header__desc {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.section-header__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.section-header--center .section-header__actions {
  justify-content: center;
}


/* ══════════════════════════════
   SECTION DIVIDER
   ══════════════════════════════ */

.section-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0;
}

.section-divider--brand {
  background: linear-gradient(90deg, transparent, var(--color-brand), transparent);
  opacity: 0.3;
}

/* ══════════════════════════════
   DARK SECTIONS — accordion / FAQ adapt (was white-on-dark)
   ══════════════════════════════ */
.adm-section--dark .adm-accordion__item { border-color: rgba(255, 255, 255, 0.12); }
.adm-section--dark .adm-accordion__trigger { background: rgba(255, 255, 255, 0.05); color: #ffffff; }
.adm-section--dark .adm-accordion__trigger:hover { background: rgba(255, 255, 255, 0.09); }
.adm-section--dark .adm-accordion__trigger i { color: rgba(255, 255, 255, 0.6); }
.adm-section--dark .adm-accordion__panel,
.adm-section--dark .adm-accordion__panel p { color: rgba(255, 255, 255, 0.7); }

/* ══════════════════════════════
   NUMBERED STEPS — circle (refactored from inline styles, adapts per bg)
   ══════════════════════════════ */
.adm-step { position: relative; text-align: left; }
.adm-step__num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-brand-dim);
  border: 1px solid var(--color-border-brand);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.adm-step__num span {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
}

/* ══════════════════════════════
   INVERTED-SCOPE TOKEN REMAP
   Dark / Black / Magenta sections invert the colour scheme. Remap the design
   tokens *within these scopes* so that any inline `style="color:var(--color-…)"`
   (addresses, dates, icon circles, borders, etc.) adapts automatically instead
   of rendering dark-on-dark. This is the root-cause fix for inline-colour
   contrast bugs — selector rules below can't override inline styles, but a
   token remap changes what those inline vars resolve to.
   ══════════════════════════════ */
.adm-section--dark,
.adm-section--black,
.adm-section--magenta {
  --color-text: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.85);
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-border: rgba(255, 255, 255, 0.18);
  --color-border-brand: rgba(255, 255, 255, 0.35);
  --color-surface-1: rgba(255, 255, 255, 0.10);
  --color-surface-2: rgba(255, 255, 255, 0.06);
}
/* On magenta, the brand tint is invisible against brand bg → use white tint.
   (Dark/Black keep --color-brand-dim, which reads fine against near-black.) */
.adm-section--magenta {
  --color-brand-dim: rgba(255, 255, 255, 0.15);
}
/* On magenta, brand-as-TEXT (phone links, quote icons, step numbers) is
   magenta-on-magenta → force white. Buttons set their own colours so are
   excluded. !important is required to beat the element's inline style. */
.adm-section--magenta a[style*="--color-brand"]:not(.btn),
.adm-section--magenta i[style*="--color-brand"],
.adm-section--magenta span[style*="--color-brand"] {
  color: #ffffff !important;
}

/* The rule above only catches brand-as-text applied via an INLINE style. These four take their colour
   from a class, so on a magenta section they rendered brand-on-brand at a contrast ratio of 1.00 —
   completely invisible. The verified tick is worse than useless rather than invisible: its success-green
   sits at 1.40 against magenta. */
.adm-section--magenta .adm-menu__price,
.adm-section--magenta .adm-price__amount,
.adm-section--magenta .adm-content__stat-v,
.adm-section--magenta .adm-review__verified { color: #ffffff; }

/* ══════════════════════════════
   MAGENTA SECTIONS — brand-colour background, white content
   ══════════════════════════════ */
.adm-section--magenta { background: var(--color-brand); color: #ffffff; }
.adm-section--magenta p,
.adm-section--magenta .card__desc,
.adm-section--magenta .label,
.adm-section--magenta .section-header__desc,
.adm-section--magenta .lead,
.adm-section--magenta .prose p { color: rgba(255, 255, 255, 0.9); }
.adm-section--magenta h1, .adm-section--magenta h2, .adm-section--magenta h3,
.adm-section--magenta h4, .adm-section--magenta h5, .adm-section--magenta h6,
.adm-section--magenta .card__title,
.adm-section--magenta .section-header__title { color: #ffffff; }
.adm-section--magenta .section-header__overline { color: rgba(255, 255, 255, 0.8); }
.adm-section--magenta .card { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: #ffffff; }
.adm-section--magenta .card:hover { border-color: rgba(255, 255, 255, 0.35); }
.adm-section--magenta .btn--primary { background: #ffffff; color: var(--color-brand); border-color: #ffffff; }
.adm-section--magenta .btn--secondary { border-color: rgba(255, 255, 255, 0.4); color: #ffffff; }
/* step circle reads white-on-white-tint instead of magenta-on-magenta */
.adm-section--magenta .adm-step__num { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.35); }
.adm-section--magenta .adm-step__num span { color: #ffffff; }
/* accordion adapts like dark */
.adm-section--magenta .adm-accordion__item { border-color: rgba(255, 255, 255, 0.2); }
.adm-section--magenta .adm-accordion__trigger { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
.adm-section--magenta .adm-accordion__trigger:hover { background: rgba(255, 255, 255, 0.18); }
.adm-section--magenta .adm-accordion__trigger i { color: rgba(255, 255, 255, 0.8); }
.adm-section--magenta .adm-accordion__panel,
.adm-section--magenta .adm-accordion__panel p { color: rgba(255, 255, 255, 0.9); }

/* Magenta: inline links + brand-coloured icons must read white (not magenta-on-magenta) */
.adm-section--magenta a:not(.btn):not(.cs-card__link):not(.service-card__link):not(.adm-stats__cell--proof) { color: #ffffff; text-decoration: underline; }
.adm-section--magenta a:not(.btn):hover { color: rgba(255, 255, 255, 0.8); }
.adm-section--magenta i,
.adm-section--magenta .section-header__overline { color: rgba(255, 255, 255, 0.9); }
.adm-section--magenta .cs-card__cta,
.adm-section--magenta .award-card__result { /* badges already have own bg; keep readable */ }

/* ══════════════════════════════
   DARK + MAGENTA — vertical tabs adapt (were white-on-colour)
   ══════════════════════════════ */
.adm-section--dark .adm-tabs--vertical,
.adm-section--magenta .adm-tabs--vertical { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); }
.adm-section--dark .adm-tabs--vertical .adm-tabs__nav,
.adm-section--magenta .adm-tabs--vertical .adm-tabs__nav { background: rgba(255, 255, 255, 0.05); border-right-color: rgba(255, 255, 255, 0.14); }
.adm-section--dark .adm-tabs--vertical .adm-tabs__tab,
.adm-section--magenta .adm-tabs--vertical .adm-tabs__tab { color: rgba(255, 255, 255, 0.7); }
.adm-section--dark .adm-tabs--vertical .adm-tabs__tab:hover,
.adm-section--magenta .adm-tabs--vertical .adm-tabs__tab:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.adm-section--dark .adm-tabs--vertical .adm-tabs__tab.is-active,
.adm-section--magenta .adm-tabs--vertical .adm-tabs__tab.is-active { background: rgba(255, 255, 255, 0.1); color: #fff; }
.adm-section--dark .adm-tabs__panel-title, .adm-section--magenta .adm-tabs__panel-title,
.adm-section--dark .adm-tabs__panel-lead, .adm-section--magenta .adm-tabs__panel-lead,
.adm-section--dark .adm-tabs__panel-bullets li, .adm-section--magenta .adm-tabs__panel-bullets li { color: #fff; }
.adm-section--magenta .adm-tabs__serial,
.adm-section--magenta .adm-tabs__panel-serial { color: #fff; }

/* ── Case study / award cards translucent on magenta (mirror dark treatment) ── */
.adm-section--magenta .cs-card,
.adm-section--magenta .award-card { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
.adm-section--magenta .cs-card:hover,
.adm-section--magenta .award-card:hover { border-color: rgba(255, 255, 255, 0.35); }
.adm-section--magenta .cs-card__title,
.adm-section--magenta .cs-card__excerpt,
.adm-section--magenta .cs-card__cta,
.adm-section--magenta .award-card__summary,
.adm-section--magenta .award-card__title { color: #fff; }

/* ── Magenta: form_section fixes (inputs, CF7 labels, overline dot, contact links) ── */
.adm-section--magenta .adm-form input:not([type="checkbox"]),
.adm-section--magenta .adm-form textarea,
.adm-section--magenta .iti__selected-dial-code { color: var(--color-text); }

/* intl-tel-input country dropdown is ALWAYS a white popup. The inverted-scope
   token remap (--color-text:#fff on dark/magenta sections) would otherwise make
   its country names white-on-white. Force its own light palette everywhere. */
.iti__dropdown-content,
.iti__search-input { background: #ffffff; }
.iti__country-name,
.iti__search-input { color: #1a1a1a !important; }
.iti__dial-code { color: #6b6b6b !important; }
.iti__country.iti__highlight,
.iti__country:hover { background-color: #f0f0f2 !important; }
.adm-section--magenta .adm-form__consent,
.adm-section--magenta .adm-form__consent *,
.adm-section--magenta .wpcf7-list-item-label,
.adm-section--magenta .adm-form label { color: #ffffff; }
.adm-section--magenta .section-header__overline::before { background: #ffffff; }
/* Plain tel:/mailto: links only. Without :not(.btn) this repainted a mailto BUTTON white on the
   white .btn--primary fill (vacancy Apply section), i.e. an invisible label. */
.adm-section--magenta a[href^="tel:"]:not(.btn),
.adm-section--magenta a[href^="mailto:"]:not(.btn) { color: #ffffff !important; }
.adm-section--magenta address { color: rgba(255,255,255,0.85); }

/* ── Opt-in card container (section styling option: "Rounded card container") ──
   Off by default. When enabled, the section becomes a rounded, hairline-bordered
   card inset from the page edges. The border uses the section's own --color-border
   token, so it adapts to dark/light mode and to dark/magenta section scopes. */
.adm-section--card {
    margin: 8px auto;
    max-width: calc(100% - 16px);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    overflow: clip;
}
.adm-section--card + .adm-section--card { margin-top: 0; }

/* ── Consolidated Cards block ── */
/* Grid layout — column count driven by --cols (set per block) */
.adm-cards-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: var(--space-5); align-items: stretch; }

/* Generic feature card (manual / posts) */
.adm-card {
    display: flex; flex-direction: column;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: clip;
    text-decoration: none; color: inherit;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
a.adm-card:hover { transform: translateY(-4px); border-color: var(--color-border-brand); box-shadow: 0 18px 40px -24px rgba(229,0,109,.45); }
.adm-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.adm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
a.adm-card:hover .adm-card__media img { transform: scale(1.04); }
.adm-card__ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: var(--space-6) var(--space-6) 0; border-radius: var(--radius-md); background: var(--color-brand-dim); color: var(--color-brand); font-size: 26px; }
.adm-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); }
.adm-card__tag { font-family: var(--font-mono); font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-brand); }
.adm-card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); margin: 0; text-wrap: balance; }
/* Sector / service / industry link cards: larger title + wider boxes (fewer per row) so long
   names like "SEO for Competitions" have room. */
.adm-block--cards-service_children .adm-card__title,
.adm-block--cards-service .adm-card__title,
.adm-block--cards-industry .adm-card__title { font-size: var(--font-size-2xl); line-height: 1.2; }
.adm-block--cards-service_children .adm-cards-grid,
.adm-block--cards-service .adm-cards-grid,
.adm-block--cards-industry .adm-cards-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
@media (max-width: 760px) {
  .adm-block--cards-service_children .adm-cards-grid,
  .adm-block--cards-service .adm-cards-grid,
  .adm-block--cards-industry .adm-cards-grid { grid-template-columns: 1fr; }
}
.adm-card__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; }
.adm-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); color: var(--color-brand); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }

/* ── Equal-height service / industry / award cards ───────────────────────
   A row of these is a grid, and a grid stretches its items, so every card
   already occupies the full row height. What was missing was anything to USE
   that height: the body did not grow, so each card's content sat at the top
   and the "Learn more" link landed at a different height in every card,
   which reads as cards of different sizes even when they are not.

   body flex:1 makes the body fill the card and the link's margin-top:auto
   pins it to the bottom, so the links line up across the row.

   The clamps stop one long title or excerpt setting the height for everyone.
   Three lines each, matching .cs-card__title, so a case-study row and a
   service row come out the same shape. max-height is there because the title
   and the excerpt are flex items and a flex item's display is blockified —
   Chrome turns -webkit-box into flow-root and still clamps it, Safari is not
   guaranteed to, so the max-height caps the box whatever the browser does.
   Capped in CSS rather than truncated in PHP so the full text stays in the
   DOM for search engines and screen readers. */
.adm-card__body { flex: 1; }

/* No clamping here, deliberately.
   Title and excerpt were capped at three lines to stop one long entry setting
   the height for a whole row. It read as broken rather than tidy: these cards
   also appear in the arc layout on the training pages, where they are rotated
   and staggered and equal height means nothing, and the copy came out cut
   mid-sentence. Grid rows already come out level because the grid stretches
   its items and the rules above make the body fill that height — truncating
   the copy was never what was being asked for. */

.adm-card__link { margin-top: auto; }
/* The icon box and CTA are flex items, so the section's text-align can't move them — follow content alignment via align-self. */
.text-center .adm-card__ic, .text-center .adm-card__link { align-self: center; }
.text-right  .adm-card__ic, .text-right  .adm-card__link { align-self: flex-end; }

/* Container-level container-effect: for blocks that don't apply the effect to inner cards, the
   .container itself becomes a bordered surface so the chosen effect (beam/border/glow/shimmer/glass)
   always renders. The magic-* class already adds position:relative + the animated layer. */
.container.adm-container-fx { background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 4vw, var(--space-16)); }
.container.adm-container-fx.magic-glass { background: var(--glass-bg-strong); border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.adm-section--magenta .container.adm-container-fx, .adm-section--dark .container.adm-container-fx, .adm-section--black .container.adm-container-fx { background: rgba(255,255,255,0.06); }
/* Award card: image ALWAYS on white (badges aren't theme-adaptive) */
.adm-card--award .adm-card__media--badge { aspect-ratio: 4 / 3; background: #fff; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.adm-card--award .adm-card__media--badge img { width: 100%; height: 100%; object-fit: contain; }

/* ── Blog cards (post source) — image top, category tags, title, Read More + date footer ── */
.adm-card--blog { height: 100%; }
.adm-card--blog .adm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-card--blog .adm-card__body { gap: var(--space-3); flex: 1; }
.adm-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.adm-card__tags .adm-card__tag { display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: none; letter-spacing: 0; color: var(--color-brand); background: var(--color-brand-dim); border-radius: var(--radius-sm); padding: 5px 12px; }
.adm-card--blog .adm-card__title { font-size: var(--font-size-xl); }
.adm-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: auto; padding-top: var(--space-4); }
/* Blog card date sits on its own line, pushed to the bottom above the full-width CTA. */
.adm-card--blog .adm-card__date { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: auto; }
.adm-card__date { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-muted); }
/* Blog card full-width Read More CTA: default surface-2 + brand text, hover inverts to ink/bg. */
.adm-card__cta { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-brand); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); transition: background var(--duration-fast) ease, color var(--duration-fast) ease; }
a.adm-card--blog:hover .adm-card__cta { background: var(--color-text); color: var(--color-bg); }
.adm-card__cta svg { width: 18px; height: 18px; transition: transform var(--duration-fast) ease; }
a.adm-card--blog:hover .adm-card__cta svg { transform: translateX(3px); }
/* Featured-first layout: one large card on top (image left), then the grid */
.adm-blog { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
/* Fixed compact height so the wide hero image can't inflate the card; the image
   cover-crops to fill the left column, the body is vertically centred with padding. */
.adm-card--blog-feat { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; height: 340px; }
.adm-card--blog-feat .adm-card__media { aspect-ratio: auto; height: 100%; min-height: 0; overflow: hidden; }
.adm-card--blog-feat .adm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Compact featured body: centred, clear padding, smaller title, 2-line excerpt, inline CTA. */
.adm-card--blog-feat .adm-card__body { padding: var(--space-6); justify-content: center; gap: var(--space-3); }
.adm-card--blog-feat .adm-card__title { font-size: var(--font-size-2xl); line-height: 1.25; }
.adm-card--blog-feat .adm-card__text { font-size: var(--font-size-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adm-card--blog-feat .adm-card__date { margin-top: var(--space-1); }
.adm-card--blog-feat .adm-card__cta { width: auto; align-self: flex-start; padding: var(--space-3) var(--space-5); }

/* Compact grid cards: shorter media, smaller title, 2-line excerpt, smaller CTA. */
.adm-card--blog:not(.adm-card--blog-feat) .adm-card__media { aspect-ratio: 16 / 9; }
.adm-card--blog:not(.adm-card--blog-feat) .adm-card__body { padding: var(--space-6); gap: var(--space-3); }
.adm-card--blog:not(.adm-card--blog-feat) .adm-card__title { font-size: var(--font-size-lg); line-height: 1.35; }
.adm-card--blog:not(.adm-card--blog-feat) .adm-card__text { font-size: var(--font-size-sm); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adm-card--blog:not(.adm-card--blog-feat) .adm-card__cta { padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); }

@media (max-width: 760px) { .adm-card--blog-feat { grid-template-columns: 1fr; height: auto; } .adm-card--blog-feat .adm-card__media { height: 180px; min-height: 180px; } .adm-card--blog-feat .adm-card__body { padding: var(--space-5); }
  /* text-wrap:balance evens out line lengths, which on a narrow column shortens every line and leaves
     the right-hand side looking unused. On one phone-width column, filling each line is what's wanted,
     and the desktop title size is too large to fill it anyway. */
  .adm-card--blog-feat .adm-card__title { text-wrap: normal; font-size: var(--font-size-xl); }
  .adm-card--blog-feat .adm-card__text { -webkit-line-clamp: 3; }
}

@media (max-width: 900px) { .adm-cards-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Mobile layout option: turn grids into a swipe carousel (opt-in via section "Mobile layout = Carousel") ── */
@media (max-width: 680px) {
  .adm-section--m-carousel .adm-cards-grid,
  .adm-section--m-carousel .adm-features__grid,
  .adm-section--m-carousel .adm-reviews__grid,
  .adm-section--m-carousel .adm-m-counters,
  .adm-section--m-carousel .adm-m-rings {
    display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--space-4);
    /* Full-bleed track. At -space-4 the scroller's border box stopped 16px in from the screen, so a
       card scrolling past it was guillotined mid-border — it read as a broken card rather than one
       moving off-screen. Bleeding to the true viewport edge lets cards leave the screen cleanly, and
       scroll-padding keeps the first and last card aligned to the text gutter. */
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--space-5);
    scroll-padding-inline: var(--space-5);
    /* overflow-x:auto also clips the cross axis, so a card's glow or shadow was being cut off top and
       bottom. Pad the scroller by the glow's reach and pull the same amount back off the margins, so
       nothing is clipped and the surrounding spacing is unchanged. */
    padding-block: var(--space-4) var(--space-5);
    margin-block: calc(var(--space-4) * -1) calc(var(--space-5) * -1);
  }
  .adm-section--m-carousel .adm-cards-grid::-webkit-scrollbar,
  .adm-section--m-carousel .adm-features__grid::-webkit-scrollbar,
  .adm-section--m-carousel .adm-reviews__grid::-webkit-scrollbar { display: none; }
  /* Cards / features: 82% width with a left-snap so the next card peeks (hints more content). */
  .adm-section--m-carousel .adm-cards-grid > *,
  .adm-section--m-carousel .adm-features__grid > *,
  .adm-section--m-carousel .adm-reviews__grid > * {
    flex: 0 0 82%; scroll-snap-align: start;
  }
  /* Stats counters / rings: ONE per view, full width, centre-snapped so the big number sits dead
     centre under the nav (82% left-snap made it look shoved to one side). */
  .adm-section--m-carousel .adm-m-counters > *,
  .adm-section--m-carousel .adm-m-rings > * {
    flex: 0 0 100%; scroll-snap-align: center; text-align: center;
  }
}
@media (max-width: 560px) { .adm-cards-grid { grid-template-columns: 1fr; } }

/* Dots + prev/next nav for the mobile "Carousel / swipe" layout (markup built by carousel.js). */
.adm-mcar__controls { display: none; }
@media (max-width: 680px) {
  .adm-section--m-carousel .adm-mcar__controls { display: flex; align-items: center; justify-content: center;
    gap: var(--space-4); margin-top: var(--space-5); }
  .adm-mcar__btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text);
    display: grid; place-items: center; cursor: pointer;
    transition: background .15s ease, opacity .15s ease, transform .1s ease; }
  .adm-mcar__btn:not(:disabled):hover { background: var(--color-surface-2); }
  .adm-mcar__btn:not(:disabled):active { transform: scale(.94); }
  .adm-mcar__btn:disabled { opacity: .3; cursor: default; }
  .adm-mcar__dots { display: flex; align-items: center; justify-content: center; gap: 8px; }
  .adm-mcar__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--color-border-strong); transition: width .2s ease, background .2s ease; }
  .adm-mcar__dot.is-active { width: 28px; background: var(--color-brand); }

  /* Legibility on dark / black / magenta sections — controls go white (magenta => white, not brand). */
  .adm-section--dark .adm-mcar__btn, .adm-section--black .adm-mcar__btn, .adm-section--magenta .adm-mcar__btn {
    border-color: rgba(255,255,255,.55); color: #fff; }
  .adm-section--dark .adm-mcar__btn:not(:disabled):hover, .adm-section--black .adm-mcar__btn:not(:disabled):hover, .adm-section--magenta .adm-mcar__btn:not(:disabled):hover {
    background: rgba(255,255,255,.14); }
  .adm-section--dark .adm-mcar__dot, .adm-section--black .adm-mcar__dot, .adm-section--magenta .adm-mcar__dot {
    background: rgba(255,255,255,.4); }
  .adm-section--dark .adm-mcar__dot.is-active, .adm-section--black .adm-mcar__dot.is-active, .adm-section--magenta .adm-mcar__dot.is-active {
    background: #fff; }
}

/* Motion treatments — applied as a wrapper around any card design */
.adm-cards-grid--tilt { perspective: 1200px; }
.adm-tilt { height: 100%; transform-style: preserve-3d; transition: transform .18s ease; will-change: transform; }
.adm-tilt > * { height: 100%; }
.adm-spotlight { position: relative; height: 100%; border-radius: var(--radius-lg); overflow: hidden; transition: transform .25s var(--ease-out), box-shadow .25s ease; }
.adm-spotlight > * { height: 100%; }
/* The wrapper clips its glow (overflow:hidden), so a lift on the INNER card would be clipped at the top.
   Lift the wrapper instead and neutralise the inner card's own lift — they move together, nothing clips. */
.adm-cards-grid .adm-spotlight:hover { transform: translateY(-4px); }
.adm-cards-grid .adm-spotlight:hover > * { transform: none; }
.adm-spotlight::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(229,0,109,.20), transparent 60%);
}
.adm-spotlight:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .adm-tilt { transition: none; } }

/* ── Consolidated blocks: Hero / Content / CTA ── */
.adm-block .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); }
/* Collapses at 860px, NOT 820. The mobile-centre rules further down deliberately switch on at 860
   "where the theme's split layouts already collapse to one column". That premise was false while this
   said 820: between 821px and 860px every split stayed two columns while its text was force-centred,
   so body copy ran as narrow ragged columns of about 350px. 860 also matches the hero's own collapse,
   so the hero renders identically either way. */
@media (max-width: 860px) { .adm-block .split { grid-template-columns: 1fr; } }
/* Alternating rows: image-left rows stack image-first by default; on mobile flip them so the
   copy sits on top and the image underneath (matching the image-right rows). */
@media (max-width: 820px) {
  .adm-content__row--img-left .adm-content__row-copy { order: 1; }
  .adm-content__row--img-left .adm-content__media { order: 2; }
}

.adm-hero-compact__inner { max-width: 760px; }
.text-center .adm-hero-compact__inner, .adm-hero-compact.text-center .adm-hero-compact__inner { margin-inline: auto; }
.adm-hero-compact__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
/* The CTA sits inside the .section-header, so it follows HEADER alignment (not content_align).
   Compound selector (.adm-hero-compact.adm-ha-*) raises specificity to 0,3,0 so it beats the
   Customizer's broad `.adm-hero-short div:has(.btn){justify-content:center}` (0,2,1) override. */
.adm-hero-compact.adm-ha-left .adm-hero-compact__ctas { justify-content: flex-start; }
.adm-hero-compact.adm-ha-center .adm-hero-compact__ctas { justify-content: center; }
.adm-hero-compact.adm-ha-right .adm-hero-compact__ctas { justify-content: flex-end; }

/* ── Content + Media image: fills its column, with a subtle gradient border chase ──────────
   The split wrapper carries an inline `align-items:center`, so the media cell has to claim the
   full row height itself — a child's `align-self` outranks the parent's `align-items`.
   The chase is a conic gradient masked down to the border only (padding + content-box mask +
   exclude), rotated by an @property angle so the sweep interpolates smoothly. Where @property
   is unsupported the gradient simply renders static, which still reads as a soft edge. */
@property --adm-chase {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* height:100% resolves against the grid area, so the media fills the column even though the split
   wrapper sets align-items:center inline — no align-self:stretch needed (and stretch would top-align
   the box once max-height clamps it, leaving a gap). Capped at 560px: the copy column can run to
   ~700px, and cover-cropping a 16:9 asset into a box that tall keeps under half its width. */
.adm-content__media { position: relative; border-radius: var(--radius-lg); height: 100%; }
.adm-content__split .adm-content__media { align-self: center; max-height: 560px; }
.adm-content__media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

.adm-content__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--adm-chase),
    transparent 0deg 170deg,
    color-mix(in srgb, var(--color-brand) 55%, transparent) 242deg,
    color-mix(in srgb, var(--color-brand) 22%, #fff) 268deg,
    transparent 330deg 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: adm-border-chase 7s linear infinite;
  pointer-events: none;
}
@keyframes adm-border-chase { to { --adm-chase: 360deg; } }
@media (prefers-reduced-motion: reduce) { .adm-content__media::after { animation: none; } }
.adm-content__rows { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-10); }
.adm-content__row { margin: 0; }
.adm-content__body h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); margin: 0 0 var(--space-3); }
/* Alternating rows use their own copy wrapper so the title escapes the 2xl cap above and honours the plugin H3 size. */
.adm-content__row-eyebrow { display: block; font-family: var(--font-mono); font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: .12em; color: var(--color-brand); margin: 0 0 var(--space-3); }
.adm-content__row-title { font-weight: var(--font-weight-medium); margin: 0 0 var(--space-3); }
.adm-content__row-copy .prose { margin: 0; }
/* Founder bio / LinkedIn / website links line ("who runs it" section) */
.prose .adm-bio-links { margin-top: var(--space-5); font-weight: var(--font-weight-medium); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.adm-content__row-copy .btn { margin-top: var(--space-5); }
/* Contained rows: image + copy each sit in a bordered surface card. */
.adm-content__rows--boxed .adm-content__row-copy { background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); }
.adm-content__rows--boxed .adm-content__media { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.adm-content__rows--boxed .adm-content__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Width is controlled by the backend container_width setting (.container--narrow/wide/full on the wrapper) — do not hardcode here. */
.adm-content__rich { margin-inline: auto; }
.text-center .adm-content__split, .text-center .adm-content__rows { text-align: left; } /* keep body copy left even if header centred */

.adm-cta__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.adm-cta__title { font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl)); font-weight: var(--font-weight-medium); margin: var(--space-3) 0; }
.adm-cta__text { color: var(--color-text-secondary); font-size: var(--font-size-lg); margin: 0 auto var(--space-6); max-width: 56ch; }
.adm-cta__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.adm-cta__form { display: flex; gap: var(--space-2); max-width: 480px; margin: var(--space-2) auto 0; flex-wrap: wrap; }
.adm-cta__form input { flex: 1 1 220px; padding: 12px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-1); color: var(--color-text); font-size: var(--font-size-base); }
.adm-cta__contact { display: flex; gap: var(--space-8); justify-content: center; margin-top: var(--space-5); flex-wrap: wrap; }
.adm-cta__contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); font-weight: var(--font-weight-medium); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1.5px; transition: background-size 0.35s var(--ease-out), color var(--duration-fast) ease; }
.adm-cta__contact a:hover { color: var(--color-brand); background-size: 100% 1.5px; }
.adm-cta__calendly { margin-top: var(--space-6); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }
/* Magenta CTA: keep secondary text legible */
.adm-section--magenta .adm-cta__text { color: rgba(255,255,255,.85); }

/* Magenta primary button — force magenta text on the white button (var could be remapped per-scope) */
.adm-section--magenta .btn--primary { background: #ffffff !important; color: #e5006d !important; border-color: #ffffff !important; }
.adm-section--magenta .btn--primary svg, .adm-section--magenta .btn--primary path { color: #e5006d; stroke: currentColor; }

/* Stats — column control, split-sticky layout, full-width bars */
.adm-stats .adm-m-counters, .adm-stats .adm-m-rings { grid-template-columns: repeat(var(--cols, 4), 1fr); }
/* Stat labels (the sub-text under each figure) in Geist Mono per brand */
.adm-stats .adm-m-counters__l, .adm-stats .adm-m-ring__lbl, .adm-stats .adm-m-race__lbl { font-family: var(--font-mono); letter-spacing: .01em; }
.adm-stats--bars .adm-m-race { max-width: none; width: 100%; }
.adm-stats__splitgrid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-12); align-items: start; }
/* Sparse figure sets (case studies publish anywhere from 2 to 6): with only two or three stats the
   default top-aligned 1.15fr column left most of the band empty. Centre the figures against the copy
   and even up the split so the section reads deliberate rather than half-filled. */
@media (min-width: 821px) {
  .adm-stats--split.adm-stats--n1 .adm-stats__splitgrid,
  .adm-stats--split.adm-stats--n2 .adm-stats__splitgrid,
  .adm-stats--split.adm-stats--n3 .adm-stats__splitgrid { grid-template-columns: 1fr 1fr; align-items: center; }
  .adm-stats--split.adm-stats--n1 .adm-stats__figs,
  .adm-stats--split.adm-stats--n2 .adm-stats__figs,
  .adm-stats--split.adm-stats--n3 .adm-stats__figs { display: flex; align-items: center; min-height: 100%; }
  .adm-stats--split.adm-stats--n1 .adm-m-counters,
  .adm-stats--split.adm-stats--n2 .adm-m-counters,
  .adm-stats--split.adm-stats--n3 .adm-m-counters { width: 100%; gap: var(--space-10); }
  /* Three figures in the two-column split left an empty cell bottom-right. Stack them
     instead, so the set reads as a deliberate column rather than a dropped fourth. */
  .adm-stats--split.adm-stats--n3 .adm-m-counters { grid-template-columns: 1fr; gap: var(--space-8); }
  /* Fewer figures = more room each, so let them scale up rather than float in white space. */
  .adm-stats--split.adm-stats--n1 .adm-m-counters__v,
  .adm-stats--split.adm-stats--n2 .adm-m-counters__v { font-size: clamp(var(--font-size-5xl), 6vw, var(--font-size-7xl)); }
}
.adm-stats__head { position: sticky; top: 100px; }
.adm-stats__head .section-header { margin: 0; }
.adm-stats--split .adm-m-counters, .adm-stats--split .adm-m-rings { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
@media (max-width: 820px) { .adm-stats__splitgrid { grid-template-columns: 1fr; } .adm-stats__head { position: static; } }

/* Container effect on stat figures.
   The magic-* effect classes (beam / animated border / glow / shimmer) are pure effect
   LAYERS — they need a surface to render on. Stat figures are bare by default, so when an
   effect is chosen we promote each figure to a card (surface + stroke). No effect = clean,
   borderless figures (the default). Glass brings its own translucent surface. */
.adm-stats :is(.adm-stats__cell, .adm-m-ring, .adm-m-race__row):is(.magic-beam, .magic-border, .magic-glow, .magic-shimmer, .magic-glass) {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
/* Slight hover lift, matching the card convention site-wide. */
.adm-stats :is(.adm-stats__cell, .adm-m-ring, .adm-m-race__row):is(.magic-beam, .magic-border, .magic-glow, .magic-shimmer, .magic-glass):hover {
  transform: translateY(-3px);
  border-color: var(--color-border-brand);
}
/* Soft shadow on hover — excluded for glow so it doesn't fight the pulsing glow shadow. */
.adm-stats :is(.adm-stats__cell, .adm-m-ring, .adm-m-race__row):is(.magic-beam, .magic-border, .magic-shimmer, .magic-glass):hover {
  box-shadow: var(--shadow-lg);
}
.adm-stats .adm-m-race__row:is(.magic-beam, .magic-border, .magic-glow, .magic-shimmer, .magic-glass) { padding: var(--space-5) var(--space-6); }
/* Glass: keep a frosted translucent fill, but use the themed border + a soft shadow so the card
   stays visible on LIGHT sections too (the raw --glass-border is white and vanishes on light). */
.adm-stats :is(.adm-stats__cell, .adm-m-ring, .adm-m-race__row).magic-glass {
  background: var(--glass-bg-strong);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Hero — Compact: feature variant — true 50/50 split-screen. The section's own vertical padding
   is removed so the image is full-height edge-to-edge; the spacing setting is applied to the COPY
   instead (so the overall height still responds to compact/standard/spacious), and the image fills
   the whole media column flush to the section's top & bottom. */
/* Split-screen: the grid STRETCHES to fill the section height (incl. brand-hero's 78vh),
   so the image is flush top-to-bottom. The copy column carries the vertical spacing. */
.adm-hero-compact--feature { padding-block: 0 !important; display: flex !important; align-items: stretch !important; }
.adm-hero-compact--feature > .container { max-width: none !important; width: 100%; padding-left: 0; padding-right: 0; display: flex; align-items: stretch; }
.adm-hero-compact__feature { display: grid !important; grid-template-columns: 1.125fr .785fr !important; gap: 0 !important; align-items: stretch !important; justify-items: stretch !important; text-align: left !important; flex: 1 1 auto; width: 100%; }
.adm-hero-compact__copy { display: flex; flex-direction: column; justify-content: center; padding: var(--adm-hc-pad, var(--space-24)) clamp(24px, 5.5vw, 96px); }
.adm-hero-compact--feature.section--sm .adm-hero-compact__copy { --adm-hc-pad: var(--space-16); }
.adm-hero-compact--feature.section--lg .adm-hero-compact__copy { --adm-hc-pad: var(--space-32); }
.adm-hero-compact--feature.section--none .adm-hero-compact__copy { --adm-hc-pad: var(--space-10); }
.adm-hero-compact--feature .adm-hero-compact__copy .section-header__sub { margin-inline: 0; }

/* ── "Sit behind header" (backend toggle, ignored when the rounded card is on) ──
   The header is `position: sticky` site-wide (Customizer CSS) with .header-spacer zeroed,
   so it sits IN FLOW and reserves its own height above the first section. Rather than
   negative-margin the hero back up by that height — which means guessing/measuring the
   header and always leaves a few px of drift — take the header out of flow on these pages
   only. The hero then starts at the very top of the page on its own, and the header simply
   overlays it. The header height is only needed for the top padding (so the copy clears
   the bar), where being a couple of px out is invisible.
   On the split (feature) layout the COPY column carries the vertical spacing, so the
   compensation goes there; other variants pad the section itself. */
body:has(.adm-hero-compact--behind-header) .site-header { position: fixed; top: 0; left: 0; right: 0; }
body:has(.adm-hero-compact--behind-header) .header-spacer { display: none; }
.adm-hero-compact--behind-header { --adm-hdr-pull: var(--adm-header-h, 84px); margin-top: 0; }
/* Logged-in only: the WP admin bar sets `html { margin-top: 32px !important }`, which pushes the page
   FLOW down 32px, while the header is position:fixed and stays at top:0. The pull is sized to the
   header, so the hero ends up over-padded by exactly the admin-bar height and the top reads heavier
   than the bottom — visible to editors, never to visitors. Trimming the pull restores the balance, and
   because every behind-header rule below reads --adm-hdr-pull, setting it here covers them all.
   Mirrors the existing `.admin-bar .adm-section--vh` compensation at the top of this file. */
.admin-bar .adm-hero-compact--behind-header { --adm-hdr-pull: calc(var(--adm-header-h, 84px) - 32px); }
@media screen and (max-width: 782px) {
  /* WP's admin bar is 46px tall below 782px. */
  .admin-bar .adm-hero-compact--behind-header { --adm-hdr-pull: calc(var(--adm-header-h, 84px) - 46px); }
}
.adm-hero-compact--behind-header.adm-hero-compact--feature .adm-hero-compact__copy { padding-top: calc(var(--adm-hc-pad, var(--space-24)) + var(--adm-hdr-pull)); }
.adm-hero-compact--behind-header:not(.adm-hero-compact--feature) { padding-top: calc(var(--section-padding-y) + var(--adm-hdr-pull)); }
.adm-hero-compact--behind-header.section--sm:not(.adm-hero-compact--feature) { padding-top: calc(var(--space-16) + var(--adm-hdr-pull)); }
.adm-hero-compact--behind-header.section--lg:not(.adm-hero-compact--feature) { padding-top: calc(var(--space-32) + var(--adm-hdr-pull)); }
/* Blog-post hero (single.php) needs its own compensation. Its height padding is emitted as ADM
   Control INLINE css (`.adm-post .adm-post__top--h-compact{padding-top:…}`), which loads after this
   stylesheet and so beat the generic rule above at equal specificity — the spacer was hidden but no
   padding was added back, dropping the title under the fixed header. These match the plugin's
   0,2,0 with an extra class so they win, and add the header height per height variant. */
.adm-post .adm-post__top.adm-hero-compact--behind-header { padding-top: calc(var(--section-padding-y, 6rem) + var(--adm-hdr-pull)); }
.adm-post .adm-post__top--h-compact.adm-hero-compact--behind-header { padding-top: calc(var(--space-10) + var(--adm-hdr-pull)); }
.adm-post .adm-post__top--h-tall.adm-hero-compact--behind-header { padding-top: calc(var(--space-24) + var(--adm-hdr-pull)); }
/* The eyebrow pill must hug its text, not stretch to the flex-column width. */
.adm-hero-compact__copy .section-header__overline { align-self: flex-start; }
.adm-hero-compact.text-center .adm-hero-compact__copy .section-header__overline,
.text-center .adm-hero-compact__copy .section-header__overline { align-self: center; }
.adm-hero-compact--feature .adm-hero-compact__media { position: relative; align-self: stretch; min-height: 340px; }
/* Image fills the entire media column, flush to the section's top & bottom (full-height split). */
.adm-hero-compact__img { position: absolute; inset: 0; overflow: hidden; }
.adm-hero-compact__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Stat badge — colour is set inline from the section's selected bg colour (see template). */
.adm-hero-compact__stat { position: absolute; z-index: 2; left: var(--space-8); bottom: var(--space-8); padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); box-shadow: 0 24px 50px -18px rgba(0,0,0,.45); }
.adm-hero-compact__stat b { display: block; font-size: clamp(var(--font-size-3xl), 3vw, var(--font-size-5xl)); font-weight: var(--font-weight-medium); line-height: 1; }
.adm-hero-compact__stat span { font-size: var(--font-size-sm); opacity: .92; }
.adm-hero-compact__media:not(:has(.adm-hero-compact__img)) .adm-hero-compact__stat { position: static; display: inline-block; }
/* Client logo plate — top-left over the media, diagonally opposite the stat/award badge which sits
   bottom-left. Always a white plate so a coloured or dark logo stays legible on any photograph, and it
   deliberately borrows the stat card's radius and shadow so the two overlays read as one system. */
.adm-hero-compact__clientlogo { position: absolute; z-index: 2; left: var(--space-8); top: var(--space-8);
  display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-5);
  background: #fff; border-radius: var(--radius-lg); box-shadow: 0 24px 50px -18px rgba(0,0,0,.45); }
/* Sized by width, not height: client logos arrive at wildly different aspect ratios and a fixed
   height made the wide ones tiny and the square ones overbearing. The plate grows to fit. */
.adm-hero-compact__clientlogo-img { display: block; width: auto; max-width: 200px; max-height: 80px; object-fit: contain; }
/* On a behind-header hero the media starts above the fixed header, so a plain top offset puts the plate
   underneath it. Clear the header first, then apply the gap. */
.adm-hero-compact--behind-header .adm-hero-compact__clientlogo { top: calc(var(--adm-hdr-pull, 84px) + var(--space-6)); }
@media (max-width: 860px) {
  .adm-hero-compact__clientlogo { left: var(--space-5); top: var(--space-5); padding: var(--space-2) var(--space-4); }
  .adm-hero-compact--behind-header .adm-hero-compact__clientlogo { top: calc(var(--adm-hdr-pull, 84px) + var(--space-4)); }
  /* Phone-scale version of the desktop 200/80 cap, so a squarish logo cannot end up rendering
     taller on a phone than it does on a desktop. */
  .adm-hero-compact__clientlogo-img { max-width: 140px; max-height: 56px; }
}
@media (max-width: 860px) {
  .adm-hero-compact__feature { grid-template-columns: 1fr !important; min-height: 0; }
  .adm-hero-compact__copy { padding: var(--space-12) var(--space-6); order: 2; }
  /* The desktop rule adds the header height to the copy's top padding so the text clears the fixed
     header. On mobile the media is re-ordered above the copy and takes that overlap itself, so the same
     padding just opens a ~180px gap between the image and the breadcrumb. Matching specificity so it
     actually wins. */
  .adm-hero-compact--behind-header.adm-hero-compact--feature .adm-hero-compact__copy { padding-top: var(--space-12); }
  /* 56vw is 218px on a 390px phone, which cannot host both overlay cards: the client-logo plate sits
     ~100px down (it has to clear the fixed header on a behind-header hero) and is ~72px tall, while the
     stat card is ~76px tall sitting 20px off the bottom. The two overlapped by ~60px — the logo landed
     on top of the figure. Taller media separates them and gives the photograph room to actually read;
     the max() keeps a floor on very narrow phones where 78vw alone would still be too short. */
  .adm-hero-compact--feature .adm-hero-compact__media { order: 1; min-height: max(310px, 78vw); }
  /* Belt and braces: pin the stat to the bottom edge so it cannot drift up into the logo plate even if
     the logo grows (a tall logo, or a larger header pull). */
  .adm-hero-compact--feature .adm-hero-compact__stat { bottom: var(--space-4); }
}

/* Breadcrumbs (inner-page hero) */
.adm-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--space-5); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: .02em; }
.adm-breadcrumbs a { color: var(--color-text-muted); text-decoration: none; transition: color var(--duration-fast) ease; }
.adm-breadcrumbs a:hover { color: var(--color-brand); }
.adm-breadcrumbs span[aria-current] { color: var(--color-text); }
.adm-breadcrumbs__sep { color: var(--color-text-muted); opacity: .55; font-style: normal; }
.text-center .adm-breadcrumbs { justify-content: center; }
/* Breadcrumbs follow the header alignment option (they sit inside the header). */
.adm-ha-left .adm-breadcrumbs { justify-content: flex-start; }
.adm-ha-center .adm-breadcrumbs { justify-content: center; }
.adm-ha-right .adm-breadcrumbs { justify-content: flex-end; }
/* Blog post / archive hero head alignment (ADM Control Template Layouts) drives the crumbs too. */
.adm-post__head--a-left .adm-breadcrumbs { justify-content: flex-start; }
.adm-post__head--a-center .adm-breadcrumbs { justify-content: center; }
.adm-post__head--a-right .adm-breadcrumbs { justify-content: flex-end; }

/* Category filter bar (archive + blog cards block) — links to category archives. */
.adm-card-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; align-items: center; margin: 0 0 var(--space-8); }
/* Two stacked filter rows (service, then industry) need a label each, otherwise it reads as one long
   bar of unrelated chips. The second row sits tighter to the first than to the grid below it. */
.adm-card-filters--industry { margin-top: calc(var(--space-6) * -1); }
.adm-card-filters__label { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-right: var(--space-2); }
.adm-card-filter { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--radius-full, 999px); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-size: var(--font-size-sm); font-weight: 500; text-decoration: none; transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.adm-card-filter:hover { border-color: var(--color-brand); color: var(--color-brand); }
/* Active chip: brand fill needs white text. The plain `.adm-card-filter.is-active` (0,2,0) was being
   beaten somewhere in the cascade, so the label rendered magenta-on-magenta (invisible) on /insights/.
   Scoped through the parent (0,3,1) so it holds, and :hover is restated or it would repaint the label
   brand on hover — the same invisible state. */
.adm-card-filters a.adm-card-filter.is-active,
.adm-card-filters a.adm-card-filter.is-active:hover,
.adm-card-filters a.adm-card-filter.is-active:focus-visible { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }

/* Mobile: one swipeable row instead of a wrapped block. There are 13 blog categories, which wrap
   to three rows at tablet width and six on a phone — the posts themselves end up below the fold
   behind a wall of chips. Same treatment the archive's .adm-filters already uses. */
@media (max-width: 860px) {
  .adm-card-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* IE/Edge */
    scroll-snap-type: x proximity;
    /* Bleed the strip to the screen edges so chips scroll off-screen rather than stopping short at
       the container gutter, then pad it back so the first chip still aligns with the copy above. */
    margin-inline: calc(var(--space-5) * -1);
    padding-inline: var(--space-5);
    padding-bottom: var(--space-2);
    /* Right edge only. A symmetric fade would grey out the active "All" chip at rest, which reads
       as a rendering fault rather than an affordance. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  }
  .adm-card-filters::-webkit-scrollbar { display: none; }
  .adm-card-filter { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
  /* The negative top margin only makes sense against a wrapped row above it. */
  .adm-card-filters--industry { margin-top: 0; }
}

/* Swept gradient accent words in hero headings — wrap words in <u> in the heading field.
   Canonical effect = .home-gradient-text: text-coloured words with a magenta shimmer sweeping across.
   Uses var(--color-text) so it adapts in light/dark sections. */
.home-gradient-text,
.adm-hero-short h1 u, .adm-hero-compact h1 u, .adm-hero-big h1 u, .hero-banner h1 u,
.adm-hero-short.adm-section--magicgrid h1 u, .adm-hero-short.adm-section--brandhero h1 u,
.adm-hero-home__title--sweep u,
.section-header__title u, .adm-cta__title u,
.adm-post__title,
.adm-process__title u, .adm-m-feat__step h3 u,
.tech-stack__copy h2 u, .adm-logos__copy-title u {
  text-decoration: none;
  background: linear-gradient(90deg, var(--color-text) 0%, var(--color-text) 40%, #e5006d 50%, var(--color-text) 60%, var(--color-text) 100%);
  color: transparent;
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: homeShimmer 6s linear infinite;
}
@keyframes homeShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.adm-reduce-motion .home-gradient-text, .reduce-motion .home-gradient-text { animation: none; }
@media (prefers-reduced-motion: reduce) { .home-gradient-text, .adm-hero-short h1 u, .adm-hero-compact h1 u, .adm-hero-big h1 u, .adm-hero-home__title--sweep u, .section-header__title u, .adm-cta__title u, .adm-post__title, .tech-stack__copy h2 u, .adm-logos__copy-title u { animation: none; } }

/* Scroll-driven horizontal layout — full-bleed, header stays visible while the track travels */
.adm-cards-scroll { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
/* Pin is CONTENT height (not a forced 100svh) so there's no empty space below the cards and the
   section isn't taller than it needs to be. JS sizes the section to pin + scroll distance. */
/* Pin fills the viewport and centres its content vertically so the eyebrow/header
   never slips under the fixed site header (was top-heavy). */
/* Pin fills the viewport and centres its content vertically, so the content stays pinned to the
   MIDDLE of the screen regardless of how tall the header/cards are (an 80vh box let taller
   sections exceed it and stick to the top). Uses vh (robust) — svh was computing inconsistently. */
.adm-cards-scroll__pin { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-8); overflow: hidden; padding-block: var(--space-8); }
/* The site's global `* { transition-duration: .3s !important }` (Customizer CSS) makes the pin's
   min-height ANIMATE when the JS flips [data-ready] (0 -> 100vh). It never settles at 100vh and the
   pin collapses to content height — invisible with tall cards, but with short cards (process
   horizontal: 4 text steps) the pin ends up shorter than the viewport, so the content sits at the top
   instead of centred in a full-height pin. Killing transitions on the pin lets 100vh apply instantly.
   Higher specificity (0,1,0) + !important beats the universal `*` !important rule. */
.adm-cards-scroll__pin { transition: none !important; }
/* GSAP lab page ONLY: GSAP (scroll-gsap.js) owns pinning there, so drop the CSS sticky and let it
   set position:fixed for the pinned range. The homepage/normal pages keep the sticky vanilla pin. */
body.gsap-lab .adm-cards-scroll__pin { position: relative; top: auto; }
.adm-cards-scroll__head { position: relative; z-index: 2; width: 100%; max-width: var(--container-max, 1200px); margin: 0 auto; padding-inline: clamp(var(--space-4), 5vw, 80px); }
/* The pinned scroll breaks out to 100vw, so re-cap the heading to the section's chosen container
   width — full-bleed sections get a full-width heading, not a centred 1200px one. */
.container--full .adm-cards-scroll__head { max-width: none; }
.container--wide .adm-cards-scroll__head { max-width: var(--container-wide); }
/* CTA renders inside the pin, directly beneath the track. The pin's flex `gap` already spaces it,
   so drop the default top margin to avoid a doubled, oversized gap under the cards. */
.adm-cards-scroll__pin .adm-block-cta { margin-top: 0; }
/* Scroll layout: CTA sits under the intro in the header (not at the bottom) */
.adm-cards-scroll__head .adm-block-cta { margin-top: var(--space-5); }
.container--narrow .adm-cards-scroll__head { max-width: var(--container-narrow); }
.adm-cards-scroll__head .section-header { margin: 0; }
.adm-cards-scroll__track { display: flex; gap: var(--space-5); padding-inline: clamp(var(--space-4), 5vw, 80px); will-change: transform; }
.adm-cards-scroll__track > * { flex: 0 0 clamp(280px, 24vw, 360px); }
.adm-cards-scroll .adm-card__media { aspect-ratio: 4 / 3; }
/* Fallback before JS-ready / reduced motion: native swipe row, header above */
.adm-cards-scroll:not([data-ready]) .adm-cards-scroll__pin { position: static; min-height: 0; }
.adm-cards-scroll:not([data-ready]) .adm-cards-scroll__track { overflow-x: auto; scroll-snap-type: x mandatory; }
.adm-cards-scroll:not([data-ready]) .adm-cards-scroll__track > * { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  .adm-cards-scroll__pin { position: static; min-height: 0; }
  .adm-cards-scroll__track { transform: none !important; overflow-x: auto; }
}

/* ── Cards: ARC reveal layout (card_style=arc). Native CSS position:sticky pin + GSAP-driven arc
   (assets/js/cards-arc.js). Cards start in a line, sweep up on an arc entering from the right, then
   level into a straight line ending at the container's right edge. Full-bleed like the scroll layout;
   the section bg (block bg_colour) shows through. ── */
.adm-cards-arc { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
/* Pin is a flex column whose content (header + card band) is CENTRED in the viewport, with the cards
   sitting just below the header. The stage gets an explicit height (= tallest card, set by JS) so it
   doesn't absorb the leftover space and open a gap when the header is short. Top padding keeps the
   centred group clear of the fixed site header. */
/* Pinned band is sized + centred by JS (measure()): it fits the actual header+cards height, capped at
   the viewport, then centres via a dynamic `top`. Short content → tight centred band (no dead gap);
   tall content → fills the viewport (no overflow into the next section). The top/height below are
   only the pre-JS / no-arc fallback. overflow visible so arc-dipping cards aren't clipped (the page
   already clips horizontal overflow at .site-main / .adm-section). */
.adm-cards-arc__pin { position: sticky; top: 0; height: 100vh; box-sizing: border-box; overflow: visible; display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 4vh, 3rem); }
.adm-cards-arc__head { position: relative; z-index: 3; flex: 0 0 auto; width: 100%; max-width: var(--container-max, 1200px); margin: 0 auto; padding: 0 clamp(var(--space-4), 5vw, 80px); }
.container--full .adm-cards-arc__head { max-width: none; }
.container--wide .adm-cards-arc__head { max-width: var(--container-wide); }
.container--narrow .adm-cards-arc__head { max-width: var(--container-narrow); }
.adm-cards-arc__head .section-header { margin: 0; }
.adm-cards-arc__stage { position: relative; z-index: 2; flex: 0 0 auto; }
.adm-cards-arc__card { position: absolute; top: 50%; left: 0; width: clamp(300px, 23vw, 350px); opacity: 0; will-change: transform; }
/* GSAP sets these transforms every frame via the ticker — a CSS transition (forced site-wide by the
   Customizer's `* { transition-duration:.3s !important }`) makes each frame lag ~0.3s, so fast trackpad
   scroll slides/snaps the cards leftward as they chase the target. Must be transition-free. */
.adm-cards-arc__card { transition: none !important; }
.adm-cards-arc__card > * { width: 100%; height: auto; }
/* Hide the native scrollbar on the horizontal swipe row (fallback / mobile) — swipe is the interaction. */
.adm-cards-arc__stage { scrollbar-width: none; -ms-overflow-style: none; }
.adm-cards-arc__stage::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Desktop fallback before JS-ready / no GSAP: a native-swipe row (no pin). Scoped to >900px so it
   never fights the mobile rules below (which would otherwise lose on specificity). */
@media (min-width: 901px) {
  .adm-cards-arc:not([data-ready]) .adm-cards-arc__pin { position: static; height: auto; overflow: visible; }
  .adm-cards-arc:not([data-ready]) .adm-cards-arc__head { position: static; max-width: none; margin-bottom: var(--space-6); }
  .adm-cards-arc:not([data-ready]) .adm-cards-arc__stage { position: static; display: flex; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(var(--space-4), 5vw, 80px); padding: 0 clamp(var(--space-4), 5vw, 80px); }
  .adm-cards-arc:not([data-ready]) .adm-cards-arc__card { position: static; opacity: 1; transform: none !important; flex: 0 0 clamp(280px, 24vw, 340px); scroll-snap-align: start; }
}
/* Mobile: always a native swipe row (the JS deactivates the arc ≤900px). Cards ~82% so the next
   card peeks; gutter padding keeps them off the viewport edge; scrollbar hidden (see base rule). */
@media (max-width: 900px) {
  .adm-cards-arc__pin { position: static; height: auto; overflow: visible; }
  .adm-cards-arc__head { position: static; max-width: none; margin-bottom: var(--space-6); }
  /* overflow-x:auto forces overflow-y to auto as well, so this scroller clipped the cards' glow and
     rounded corners top, bottom and left — the 8px bottom padding was nowhere near the glow's reach.
     Fixed the same way as the other mobile tracks: bleed to the true viewport edge so a card scrolls off
     the screen rather than being guillotined, pad by the glow's reach, and pull the vertical padding back
     off the margins so surrounding spacing is unchanged. `overflow: visible` also stops the clipping but
     takes the horizontal scrolling with it, which is the whole interaction on mobile. */
  .adm-cards-arc__stage {
    position: static; display: flex; gap: var(--space-4);
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--space-5);
    scroll-padding-inline: var(--space-5);
    padding-block: var(--space-4) var(--space-6);
    margin-block: calc(var(--space-4) * -1) calc(var(--space-6) * -1);
  }
  .adm-cards-arc__card { position: static; opacity: 1; transform: none !important; flex: 0 0 82%; scroll-snap-align: start; }
  .adm-cards-arc__card:last-child { margin-right: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .adm-cards-arc__pin { position: static !important; height: auto !important; overflow: visible; }
  .adm-cards-arc__head { position: static !important; max-width: none; }
  .adm-cards-arc__card { position: static !important; opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Consolidated blocks wave 3 — Logos · Testimonials · Process · Accordion
   · Features/Bento · Media. Token-driven (adapt to bg/dark/magenta scopes).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Logos / clients ── */
.adm-logos { align-items: center; }
.adm-logos--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-8) var(--space-10); }
.adm-logos__item { display: flex; align-items: center; justify-content: center; padding: var(--space-3); }
.adm-logos__img { max-height: 46px; width: auto; max-width: 100%; object-fit: contain; }
/* Client-logo marquee (logo_source=clients): fit each logo into a consistent box so wide marks
   (e.g. CashFloat, 3.5:1) don't dwarf taller ones (2:1). Cap BOTH height and width.

   The width cap is a backstop against one runaway logo, not the sizing control — height should be what
   limits almost every logo. It was 150px, which made it the binding constraint for the genuinely wide
   wordmarks once their canvases were trimmed: Jackpot 247 and Stelrad are ~5.8:1 and were held to 26px
   beside a 60px Longevita, i.e. the same "why is this logo half the size" problem the padded canvases
   caused. Matches .adm-team-featured__marquee, which is capped the same way for the same reason. */
.adm-logos--clients .adm-logos__img { max-height: 60px; max-width: 300px; width: auto; object-fit: contain; }
/* The 300px width cap above is a desktop figure. Unbounded it carried straight down to phones, where a
   300px logo is ~77% of a 390px screen — the marquee stopped reading as a logo band and became a row of
   giant part-cropped wordmarks. Scaled down in step with the viewport, mirroring the team marquee. */
@media (max-width: 860px) {
  .adm-logos--clients .adm-logos__img { max-height: 48px; max-width: 200px; }
}
@media (max-width: 480px) {
  .adm-logos--clients .adm-logos__img { max-height: 40px; max-width: 150px; }
}
/* Optical balance. --logo-h is computed per image from its real aspect ratio in PHP
   (adm_logo_optical_height), so a 1:1 mark and an 8:1 wordmark carry comparable visual weight.
   This supersedes the bounding-box caps above for logos that opt in: a box balances neither
   dimension — square marks clamp on height, wordmarks clamp on width — which left the marks at
   roughly a quarter of a wordmark's area no matter how tightly the files were trimmed.
   max-height is released because --logo-h is already clamped to 28–68px in PHP; max-width stays
   as a backstop against one runaway ultra-wide logo. --logo-scale shrinks the whole set at
   breakpoints without recomputing anything per image. */
.adm-logos__img--optical { height: calc(var(--logo-h, 46px) * var(--logo-scale, 1)); max-height: none; width: auto; max-width: 100%; object-fit: contain; }
.adm-logos { --logo-scale: 1; }
@media (max-width: 860px) { .adm-logos { --logo-scale: .8; } }
@media (max-width: 480px) { .adm-logos { --logo-scale: .66; } }
.adm-logos--gray .adm-logos__img { filter: grayscale(1); opacity: .6; transition: filter var(--duration-fast) ease, opacity var(--duration-fast) ease; }
.adm-logos--gray .adm-logos__item:hover .adm-logos__img { filter: none; opacity: 1; }
.adm-logos--marquee .magic-marquee__track { align-items: center; gap: var(--space-12); }
.adm-logos--marquee .adm-logos__item { flex-shrink: 0; }
/* Marquee full-bleed: break out of the container and run edge-to-edge */
.adm-logos--marquee.adm-logos--bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* Content split — optional stat row beneath the copy (above the CTA) */
.adm-content__stats { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-10); margin-top: var(--space-8); }
.adm-content__stat { display: flex; flex-direction: column; gap: var(--space-1); }
.adm-content__stat-v { font-size: clamp(var(--font-size-3xl), 3.4vw, var(--font-size-5xl)); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-brand); }
.adm-content__stat-l { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-secondary); letter-spacing: .01em; }
/* CTA row — primary + optional 2nd/3rd buttons side by side */
.adm-content__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }

/* ── Testimonials ── */
.adm-tcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-6); align-items: stretch; }
.adm-tcard { position: relative; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8); padding-top: var(--space-10); background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-xl); text-align: left; height: 100%; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.adm-tcard:hover { transform: translateY(-4px); border-color: var(--color-border-brand); box-shadow: 0 26px 52px -32px rgba(229,0,109,.4); }
/* Large decorative quotation mark as a subtle brand watermark (replaces the cheap inline quote). */
.adm-tcard::before { content: '\201C'; position: absolute; top: 4px; left: var(--space-6); font-family: Georgia, 'Times New Roman', serif; font-size: 92px; line-height: 1; color: color-mix(in srgb, var(--color-brand) 18%, transparent); pointer-events: none; z-index: 0; }
.adm-tcard > * { position: relative; z-index: 1; }
.adm-tcard__avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; }
/* Cover image on a (non-video) testimonial card — a media strip above the quote. */
.adm-tcard__media { width: 100%; height: 200px; border-radius: var(--radius-md); overflow: hidden; }
.adm-tcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-tcard__quote { margin: 0; font-size: var(--font-size-lg); line-height: 1.65; color: var(--color-text); font-weight: 500; }
.adm-tcard__quote::before { content: none; }
.adm-tcard__foot { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); margin-top: auto; }
.adm-tcard__meta { display: flex; flex-direction: column; gap: 2px; }
.adm-tcard__foot .adm-tcard__avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.adm-tcard__name { font-weight: var(--font-weight-medium); font-size: var(--font-size-base); color: var(--color-text); }
.adm-tcard__role { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.adm-tcard--video::before, .adm-tcard--single::before { content: none; }
/* Single feature — large, centred. Fills the section's container (honours the Wide/Standard width);
   the quote keeps a readable measure so a wide card doesn't produce over-long lines. */
.adm-tcard--single { margin-inline: auto; align-items: center; text-align: center; gap: var(--space-6); padding: var(--space-12); }
.adm-tcard--single .adm-tcard__quote { font-size: clamp(var(--font-size-2xl), 2.6vw, var(--font-size-4xl)); line-height: 1.4; max-width: 40ch; margin-inline: auto; }
.adm-tcard--single .adm-tcard__foot { align-items: center; }

/* Spotlight SLIDER — the active card expands and shows its image + quote together as one unit;
   the rest are knocked back. JS auto-advances + click to select (no hover-to-change). */
/* Spotlight = a one-at-a-time auto-play carousel. Every slide is the SAME fixed-size big card
   (image + quote side by side), so advancing slides never grows/shrinks anything. */
.adm-tspot .adm-carousel__track { align-items: stretch; }
.adm-tspot__card { display: flex; flex-direction: row; align-items: stretch; gap: var(--space-8); min-height: 240px; padding: var(--space-6); text-align: left; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: 0 20px 50px -30px rgba(0,0,0,.18); overflow: hidden; }
.adm-tspot__media { border-radius: var(--radius-lg); }
.adm-tspot__media { flex: 0 0 50%; align-self: center; height: 460px; max-height: 460px; border-radius: var(--radius-md); overflow: hidden; }
.adm-tspot__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-tspot__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); justify-content: center; }
.adm-tspot__avatar { width: 68px; height: 68px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.adm-tspot__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-tspot__quote { margin: 0; font-size: var(--font-size-xl); line-height: 1.55; font-weight: 500; color: var(--color-text); }
.adm-tspot__quote::before { content: '\201C'; font-family: Georgia, 'Times New Roman', serif; font-size: 2.4em; line-height: 0; color: var(--color-brand); margin-right: .06em; vertical-align: -0.4em; }
.adm-tspot__foot { display: flex; flex-direction: column; gap: 2px; }
.adm-tspot__name { color: var(--color-brand); font-weight: var(--font-weight-medium); }
.adm-tspot__role { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.adm-tspot__logo-link { display: inline-flex; margin-top: var(--space-5); opacity: .85; }
.adm-tspot__logo { max-height: 48px; max-width: 170px; width: auto; height: auto; object-fit: contain; }
/* "Visit website" button — left-aligned under the logo (was: clickable logo only) */
.adm-tspot__visit { align-self: flex-start; margin-top: var(--space-4); }
@media (max-width: 820px) {
  .adm-tspot__card { flex-direction: column; min-height: 0; gap: var(--space-5); }
  .adm-tspot__media { flex: none; aspect-ratio: 16 / 10; height: auto; max-height: none; }
  .adm-tspot__quote { font-size: var(--font-size-xl); }
}
/* Video / featured card */
.adm-tcard--video { position: relative; min-height: 460px; justify-content: flex-end; background-color: #0a0a0a; background-size: cover; background-position: center; color: #fff; border: none; overflow: hidden; }
/* A featured/video card always carries white text + a dark gradient scrim, so it needs a dark
   base even when no cover image is set or a glass effect would otherwise frost it white. */
.adm-tcard--video.magic-glass, .adm-tcard--video.magic-border, .adm-tcard--video.magic-spotlight { background-color: #0a0a0a; }
.adm-tcard--video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.78)); z-index: 0; }
.adm-tcard--video > * { position: relative; z-index: 1; }
.adm-tcard__avatar--corner { position: absolute; top: var(--space-5); left: var(--space-5); }
.adm-tcard__avatar--corner img { border: 2px solid rgba(255,255,255,.85); }
.adm-tcard--video .adm-tcard__name { color: #fff; }
.adm-tcard--video .adm-tcard__role { color: rgba(255,255,255,.82); }
.adm-tcard__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--color-brand); display: flex; align-items: center; justify-content: center; font-size: 22px; z-index: 2; transition: transform .2s ease; }
.adm-tcard__play:hover { transform: translate(-50%, -50%) scale(1.08); }
/* Pinned horizontal scroll track */
.adm-tmonials__track { display: flex; gap: var(--space-6); padding: 0; align-items: stretch; }
.adm-tmonials__track .adm-tcard { flex: 0 0 clamp(420px, 38vw, 560px); min-height: 440px; height: auto; padding: var(--space-10); }
.adm-tmonials__track .adm-tcard--video { flex: 0 0 clamp(440px, 40vw, 580px); }
/* Quote fills the space; name/role pinned to the bottom; all cards equal height */
.adm-tmonials__track .adm-tcard__quote { flex: 1 1 auto; font-size: var(--font-size-2xl); line-height: 1.4; }
/* Pin the pinned-testimonials content to the middle of the viewport (less top-heavy). */
.adm-tmonials__scroll .adm-cards-scroll__pin { min-height: 100vh; }

/* ── Process / steps ── */
.adm-process__list { list-style: none; margin: 0; padding: 0; }
.adm-process--numbered .adm-process__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.adm-process--numbered .adm-process__step { background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.adm-process__marker { margin-bottom: var(--space-4); }
.adm-process__num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--color-brand-dim); color: var(--color-brand); font-family: var(--font-mono); font-weight: var(--font-weight-medium); font-size: var(--font-size-lg); }
.adm-process__icon { width: 40px; height: 40px; object-fit: contain; }
.adm-process__icon--hgi { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--color-brand-dim); }
.adm-process__icon--hgi i { font-size: 24px; color: var(--color-brand); line-height: 1; }
.adm-process__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-4); color: var(--color-brand); font-weight: var(--font-weight-medium); text-decoration: none; transition: gap var(--duration-fast) ease; }
.adm-process__cta:hover { gap: 10px; }
.adm-process__eyebrow { display: block; font-family: var(--font-mono); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .1em; color: var(--color-brand); margin: 0 0 var(--space-3); }
.adm-process__cta svg { width: 15px; height: 15px; }
.adm-process__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); margin: 0 0 var(--space-2); }
.adm-process__text { color: var(--color-text-secondary); margin: 0; }
/* Timeline */
.adm-process--timeline .adm-process__list { max-width: 760px; margin-inline: auto; }
.adm-process--timeline .adm-process__step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--space-5); padding-bottom: var(--space-8); }
.adm-process--timeline .adm-process__step::before { content: ''; position: absolute; left: 27px; top: 48px; bottom: 0; width: 2px; background: var(--color-border); }
.adm-process--timeline .adm-process__step:last-child::before { display: none; }
/* Horizontal scroll */
.adm-process--horizontal .adm-process__list { display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-4); }
.adm-process--horizontal .adm-process__step { flex: 0 0 300px; scroll-snap-align: start; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }

/* ── Accordion / FAQ ── */
.adm-accordion__list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.adm-accordion__item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-1); overflow: hidden; }
.adm-accordion__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); cursor: pointer; font-weight: var(--font-weight-medium); font-size: var(--font-size-lg); list-style: none; }
.adm-accordion__q::-webkit-details-marker { display: none; }
.adm-accordion__chev { flex-shrink: 0; display: inline-flex; font-size: 20px; color: var(--color-text-secondary); transition: transform var(--duration-fast) ease, color var(--duration-fast) ease; }
.adm-accordion__item[open] .adm-accordion__chev { transform: rotate(180deg); color: var(--color-brand); }
.adm-accordion__a { padding: 0 var(--space-6) var(--space-6); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
/* Accordion content is always left-aligned, even when the section header is centred. */
.adm-accordion__list, .adm-accordion__q, .adm-accordion__a { text-align: left; }
.adm-accordion--tabs .adm-accordion__list { max-width: none; }
/* FAQ = soft filled cards in a single column (distinct from the bordered plain accordion); opens to a white card */
.adm-accordion--faq .adm-accordion__item { background: var(--color-surface-2); border-color: transparent; }
.adm-accordion--faq .adm-accordion__item[open] { background: var(--color-surface-1); border-color: var(--color-border); }

/* ── Features / bento ── */
/* --cols is either a number from the block's Columns setting or the auto-fit keyword, so one
   declaration covers both. Below 1100px a pinned count would squeeze the cards, so it reverts to
   auto-fit and lets them wrap. */
.adm-features__grid { display: grid; grid-template-columns: repeat(var(--cols, auto-fit), minmax(240px, 1fr)); gap: var(--space-6); }
@media (max-width: 1100px) { .adm-features__grid { --cols: auto-fit; } }
/* Carousel slides carry the card, so the card must fill the slide for equal heights across the track. */
.adm-features-carousel .adm-carousel__slide { display: flex; }
.adm-features-carousel .adm-carousel__slide > * { flex: 1 1 auto; }
.adm-feature { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease; }
a.adm-feature:hover { transform: translateY(-3px); border-color: var(--color-border-brand); }
.adm-feature__icon { display: inline-flex; flex-shrink: 0; }
.adm-feature__icon img { width: 40px; height: 40px; object-fit: contain; }
.adm-feature__body { display: flex; flex-direction: column; gap: var(--space-2); }
.adm-feature__title { display: block; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); }
.adm-feature__text { display: block; color: var(--color-text-secondary); }
/* Alternating = roomy rows: [icon] [body] */
.adm-features__rows { display: flex; flex-direction: column; gap: var(--space-4); max-width: 880px; margin-inline: auto; }
.adm-feature--row { flex-direction: row; align-items: flex-start; gap: var(--space-5); text-align: left; }
.adm-feature--row .adm-feature__body { flex: 1; }

/* ── Media ── */
.adm-media__frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }
.adm-media__video { position: relative; aspect-ratio: 16 / 9; }
.adm-media__video iframe, .adm-media__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.adm-media__image img { display: block; width: 100%; height: auto; }
.adm-media__map { position: relative; aspect-ratio: 2 / 1; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-1); }
/* Dotted backdrop (equirectangular grid of dots) */
.adm-media__map-dots { position: absolute; inset: 0; background-image: radial-gradient(currentColor 1.1px, transparent 1.3px); background-size: 22px 22px; color: rgba(var(--color-brand-rgb), .18); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); }
.adm-media__pin { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.adm-media__pin i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--color-brand); box-shadow: 0 0 0 4px rgba(var(--color-brand-rgb), .25), 0 0 14px 2px var(--color-brand); animation: adm-pin-pulse 2.4s ease-out infinite; }
.adm-media__pin b { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); color: var(--color-text); background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: 999px; padding: 3px 9px; opacity: 0; transition: opacity var(--duration-fast) ease; pointer-events: none; }
.adm-media__pin:hover b { opacity: 1; }
@keyframes adm-pin-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--color-brand-rgb), .45), 0 0 14px 2px var(--color-brand); } 70% { box-shadow: 0 0 0 12px rgba(var(--color-brand-rgb), 0), 0 0 14px 2px var(--color-brand); } 100% { box-shadow: 0 0 0 0 rgba(var(--color-brand-rgb), 0), 0 0 14px 2px var(--color-brand); } }
/* Globe = circular crop of the same projection */
.adm-media__map--globe { aspect-ratio: 1 / 1; max-width: 540px; margin-inline: auto; border-radius: 50%; background: radial-gradient(circle at 38% 32%, var(--color-surface-2), var(--color-surface-1) 70%); }
.adm-media__map--globe .adm-media__map-dots { border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 64%, transparent 70%); mask-image: radial-gradient(circle, #000 64%, transparent 70%); }

/* ── Process: horizontal scroller (snap, hidden scrollbar, full row) ── */
.adm-process__hscroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.adm-process__hscroll::-webkit-scrollbar { display: none; }
/* Uses the SAME driver + pin as the cards "horizontal scroll" layout (.adm-cards-scroll). Inherit the
   shared __track padding-inline + gap so the row starts inset and spaces identically. The cards are
   intentionally WIDER than the case-study cards-scroll: this block only has ~4 steps, so narrow cards
   would leave the track no wider than the viewport and the pin would have nothing to scrub. Wider
   cards give the same pin+scrub effect meaningful horizontal travel. */
.adm-process__htrack { list-style: none; margin: 0; padding-block: 0 var(--space-2); }
.adm-process__htrack .adm-process__hcard { flex: 0 0 clamp(340px, 40vw, 560px); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.adm-process__hcard-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-surface-2); }
.adm-process__hcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-process__hcard-body { padding: var(--space-8); display: flex; flex-direction: column; }
.adm-process__htrack .adm-process__marker { margin-bottom: var(--space-4); }

/* Glow container effect: subtle on a full-width section (was a huge pulsing halo) */
.container.magic-glow { box-shadow: 0 0 0 1px var(--color-border-brand), 0 18px 50px -20px rgba(var(--color-brand-rgb), 0.30); animation: none; border-radius: var(--radius-lg); padding-block: var(--space-10); }

/* Dotted world map section: pull up so it overlaps the section above and the map's
   top fade blends in; keep the section header above the overlap. */
/* Dotted map: the header pulls the map up under it (its own -100px bottom margin) so the header
   overlaps the map's faded top. Header stays on top; tooltips stay above everything. */
.adm-section.adm-media--world_map { position: relative; }
.adm-section.adm-media--world_map .section-header { position: relative; z-index: 3; margin-bottom: -100px; }
/* The reveal class leaves transform:translateY(0), which creates a stacking context that
   traps the tooltip below the header. Clearing the transform on the map wrapper lets the
   tooltip's z-index compete with (and beat) the header, while the map bg stays below it. */
.adm-section.adm-media--world_map .adm-media__worldmap { transform: none; }
.adm-section.adm-media--world_map .world-map__tooltip { z-index: 50; }

/* The -100px overlap above assumes a map tall enough to have empty ocean at the top to pull the
   header over. At 375px the map is 311px wide and, at aspect-ratio 2/1, only ~148px tall — so a
   100px pull drops the header's last element (the Book A Consultation button) into the middle of
   the map, on top of the markers. Below the collapse breakpoint the header simply sits above the
   map with normal spacing, and the map gets a taller aspect so it is still legible at phone width. */
@media (max-width: 860px) {
  .adm-section.adm-media--world_map .section-header { margin-bottom: var(--space-6); }
}
/* Not done here: making the map taller on mobile. Its aspect-ratio is set inline from the SVG's
   own viewBox (210/100) and the SVG carries preserveAspectRatio="none", so it stretches to fill
   whatever box it is given — overriding the ratio squashes the continents rather than enlarging
   the map. A taller mobile map needs a differently-cropped SVG, not CSS. */

/* ── Media: real MagicUI world map + globe wrappers ── */
.adm-media__worldmap { position: relative; width: 100%; aspect-ratio: 2 / 1; }
.adm-media__worldmap .world-map__bg { position: absolute; inset: 0; }
.adm-media__worldmap .world-map__bg svg { width: 100%; height: 100%; }
.adm-media__worldmap .world-map__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.adm-media__worldmap .world-map__clients { position: absolute; inset: 0; }
.adm-media__globe { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin-inline: auto; }
.adm-media__globe .global-clients__canvas { width: 100%; height: 100%; display: block; }

/* ── FAQ: two-column grid (distinct from the stacked accordion) ── */
.adm-accordion__list--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-5); max-width: 1040px; align-items: start; }
@media (max-width: 760px) { .adm-accordion__list--grid { grid-template-columns: 1fr; } }

/* ── Tabs: real tabbed panel (horizontal + vertical) ── */
.admb-tabs { display: flex; flex-direction: column; gap: var(--space-6); text-align: left; }
.admb-tabs__list { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--color-border); }
.admb-tabs__tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--space-3) var(--space-5); font: inherit; font-weight: var(--font-weight-medium); font-size: var(--font-size-base); color: var(--color-text-secondary); cursor: pointer; transition: color .15s ease, border-color .15s ease; white-space: nowrap; }
.admb-tabs__tab:hover { color: var(--color-text); }
.admb-tabs__tab.is-active { color: var(--color-brand); border-bottom-color: var(--color-brand); }
.admb-tabs__panels { background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); }
.admb-tabs__panel[hidden] { display: none; }
.admb-tabs__panel-inner--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
.admb-tabs__panel-inner--solo { max-width: 760px; }
.admb-tabs__media img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.admb-tabs__copy > :first-child { margin-top: 0; }
.admb-tabs__copy h2, .admb-tabs__copy h3 { font-weight: var(--font-weight-medium); margin: 0 0 var(--space-3); font-size: var(--font-size-2xl); }
.admb-tabs__copy p { color: var(--color-text-secondary); margin: 0 0 var(--space-3); }
/* Vertical: tab rail left, panel right */
.admb-tabs--vertical .admb-tabs { flex-direction: row; align-items: stretch; gap: var(--space-8); }
.admb-tabs--vertical .admb-tabs__list { flex-direction: column; flex-wrap: nowrap; border-bottom: 0; border-right: 1px solid var(--color-border); flex: 0 0 230px; gap: 2px; }
.admb-tabs--vertical .admb-tabs__tab { text-align: left; border-bottom: 0; border-right: 2px solid transparent; margin: 0 -1px 0 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.admb-tabs--vertical .admb-tabs__tab.is-active { border-right-color: var(--color-brand); background: var(--color-surface-1); }
.admb-tabs--vertical .admb-tabs__panels { flex: 1; }

/* Timed (Framer-style): content panel on top, auto-advancing tab cards (title + description) with a progress bar on top of each */
.admb-tabs__bar { display: none; }
.admb-tabs--timed .admb-tabs { flex-direction: column; gap: var(--space-8); }
.admb-tabs--timed .admb-tabs__panels { order: 0; }
.admb-tabs--timed .admb-tabs__list { order: 1; border: 0; flex-wrap: nowrap; gap: var(--space-8); }
.admb-tabs--timed .admb-tabs__tab { flex: 1 1 0; min-width: 0; display: block; text-align: left; white-space: normal; border: 0; margin: 0; padding: var(--space-5) 0 0; position: relative; }
/* grey progress track across the full tab width */
.admb-tabs--timed .admb-tabs__tab::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-border); border-radius: 3px; }
/* magenta fill, animated 0→100% by JS over the duration */
.admb-tabs--timed .admb-tabs__bar { display: block; position: absolute; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left center; background: var(--color-brand); border-radius: 3px; z-index: 1; }
@keyframes admb-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.admb-tabs--timed .admb-tabs__tab-label { display: block; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--space-2); transition: color .2s ease; }
.admb-tabs--timed .admb-tabs__tab.is-active .admb-tabs__tab-label { color: var(--color-text); }
.admb-tabs--timed .admb-tabs__tab-desc { display: block; font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text-secondary); opacity: .8; }
@media (max-width: 760px) {
  .admb-tabs--timed .admb-tabs__list { flex-wrap: wrap; gap: var(--space-5); }
  .admb-tabs--timed .admb-tabs__tab { flex: 1 1 100%; }
}
@media (max-width: 760px) {
  .admb-tabs__panel-inner--split { grid-template-columns: 1fr; }
  .admb-tabs--vertical .admb-tabs { flex-direction: column; }
  .admb-tabs--vertical .admb-tabs__list { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--color-border); flex-basis: auto; }
  .admb-tabs--vertical .admb-tabs__tab { border-right: 0; border-bottom: 2px solid transparent; border-radius: 0; }
}

/* ── Features: alternating image + text rows ── */
.adm-features__alt { display: flex; flex-direction: column; gap: var(--space-16); }
.adm-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
/* Explicit column placement so the image side flips reliably (direction:rtl didn't reorder). */
.adm-feature-row__media { grid-column: 1; grid-row: 1; }
.adm-feature-row__copy  { grid-column: 2; grid-row: 1; }
.adm-feature-row--rev .adm-feature-row__media { grid-column: 2; }
.adm-feature-row--rev .adm-feature-row__copy  { grid-column: 1; }
.adm-feature-row__media img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.adm-feature-row__media:empty { display: none; }
/* An imageless alternating row: the copy is pinned to column 2, so hiding the empty media div on
   its own left half the row as dead whitespace (same defect as the split/feature media column).
   Span the copy across both tracks instead, so a text-only row reads as intentional. */
.adm-feature-row__media:empty + .adm-feature-row__copy,
.adm-feature-row--rev .adm-feature-row__media:empty + .adm-feature-row__copy { grid-column: 1 / -1; }
.adm-feature-row__copy .adm-feature__icon { margin-bottom: var(--space-4); }
.adm-feature-row__copy .adm-feature__icon img { width: 44px; height: 44px; object-fit: contain; }
.adm-feature-row__eyebrow { display: block; font-family: var(--font-mono); font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: .12em; color: var(--color-brand); margin: 0 0 var(--space-3); }
.adm-feature-row__title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-medium); margin: 0 0 var(--space-3); }
.adm-feature-row__text { color: var(--color-text-secondary); margin: 0 0 var(--space-4); font-size: var(--font-size-lg); }
.adm-feature-row__link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-brand); font-weight: var(--font-weight-medium); text-decoration: none; }
.adm-feature-row__copy .btn { margin-top: var(--space-2); }
@media (max-width: 760px) {
  .adm-feature-row { grid-template-columns: 1fr; }
  .adm-feature-row__media, .adm-feature-row__copy,
  .adm-feature-row--rev .adm-feature-row__media, .adm-feature-row--rev .adm-feature-row__copy { grid-column: 1; grid-row: auto; }
}

/* ── Process timeline: sticky scrollytelling (reuses .adm-m-feat) ── */
.adm-process__feat-steps { display: flex; flex-direction: column; }
/* Timeline rail + dots — ONLY the timeline variant; the 'sticky' variant reuses the same scrollytelling without them */
.adm-process--timeline .adm-m-feat__step { border-left: 2px solid var(--color-border); padding-left: var(--space-6); position: relative; }
.adm-process--timeline .adm-m-feat__step::before { content: ''; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-border); transition: background var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.adm-process--timeline .adm-m-feat__step.on { border-left-color: var(--color-brand); }
.adm-process--timeline .adm-m-feat__step.on::before { background: var(--color-brand); box-shadow: 0 0 0 4px var(--color-brand-dim); }
.adm-process__feat .adm-m-feat__step__n { color: var(--color-brand); font-family: var(--font-mono); }
/* Sticky (no timeline): give the steps a touch more breathing room since there's no rail indent */
.adm-process--sticky .adm-m-feat__step { padding-left: 0; }
/* Image on the other side (reverse_layout) */
.adm-process--timeline.adm-section--reverse .adm-m-feat,
.adm-process--sticky.adm-section--reverse .adm-m-feat { direction: rtl; }
.adm-process--sticky.adm-section--reverse .adm-m-feat > * { direction: ltr; }
.adm-process--timeline.adm-section--reverse .adm-m-feat > * { direction: ltr; }

/* ── Logos orbit: two rings + centre (reuses .magic-orbit + magic-ui.js positioning) ── */
.adm-logos--orbit { display: flex; justify-content: center; }
.adm-logos__orbit { position: relative; margin-inline: auto; }
.adm-logos__ring--inner { inset: 24%; }
.adm-logos__orbit-item { width: 60px; height: 60px; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 12px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.25); }
.adm-logos__orbit-item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.adm-logos--gray .adm-logos__orbit-item img { filter: grayscale(1); opacity: .75; }
.adm-logos__orbit-center { width: 104px; height: 104px; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-medium); box-shadow: 0 14px 34px -12px rgba(0,0,0,.35); }
.adm-logos__orbit-center img { max-width: 62%; max-height: 62%; object-fit: contain; }
.adm-logos__cta { display: flex; }
.text-center .adm-logos__cta, .adm-logos-section.text-center .adm-logos__cta { justify-content: center; }

/* ── Logos grid: legacy client-grid look, standalone (override the split height:100%) ── */
/* Grid = the legacy boxed logo wall: equal bordered tiles, logo centred, tidy multi-row grid. */
.adm-logos.client-logos-grid { height: auto; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); grid-auto-rows: 1fr; gap: var(--space-5); }
.adm-logos.client-logos-grid .client-logo-card { aspect-ratio: 16 / 10; min-height: 150px; padding: var(--space-8); transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease, transform var(--duration-base) ease; }
.adm-logos.client-logos-grid .client-logo-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.adm-logos.client-logos-grid .client-logo-card__img { max-width: 82%; max-height: 78%; width: auto; height: auto; object-fit: contain; }
.adm-logos--gray.client-logos-grid .client-logo-card__img { filter: grayscale(1); opacity: .6; transition: all var(--duration-fast) ease; }
.adm-logos--gray.client-logos-grid .client-logo-card:hover .client-logo-card__img { filter: none; opacity: 1; }
/* Orbit centre text fallback (no centre logo) sits on the magenta disc */
.tech-stack__center-text { color: #fff; font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); text-align: center; line-height: 1.1; }

/* ── Rich text: read more / less ── */
.adm-richmore { position: relative; }
.adm-richmore__inner { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.adm-richmore.is-open .adm-richmore__inner { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.adm-richmore__btn { margin-top: var(--space-5); }

/* ── Tabs robustness ── */
.admb-tabs { width: 100%; }
.admb-tabs__copy { text-align: left; }
.admb-tabs--vertical .admb-tabs__panels { min-width: 0; }

/* ── Process timeline: sticky visual takes most of the viewport (image was too small/cut off) ── */
.adm-process__feat .adm-m-feat__sticky { height: 46vh; top: 24vh; }
.adm-process__feat .adm-m-feat__step { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; }
/* Per-step image: hidden on desktop (the single sticky image handles the scrollytelling). */
.adm-m-feat__step-img { display: none; }

@media (max-width: 860px) {
  /* Scrollytelling doesn't run on mobile — drop the single sticky image and show every
     step fully legible in a clean stack, each with its own image. */
  .adm-process__feat .adm-m-feat__sticky { display: none; }
  .adm-process__feat .adm-m-feat__step { min-height: 0; opacity: 1; }
  .adm-process__feat .adm-process__feat-steps { display: flex; flex-direction: column; gap: var(--space-10); margin-top: var(--space-6); }
  .adm-m-feat__step-img { display: block; margin-bottom: var(--space-5); border-radius: var(--radius-lg); overflow: hidden; }
  .adm-m-feat__step-img img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
  /* Timeline rail: mark every dot active on mobile since there's no scroll highlight. */
  .adm-process--timeline .adm-m-feat__step::before { background: var(--color-brand); }
  .adm-process--timeline .adm-m-feat__step { border-left-color: var(--color-brand); }
}

/* ── Stats: number colour option (counters value, ring figure, bar value) ── */
.adm-stats--num-brand .adm-m-counters__v,
.adm-stats--num-brand .adm-m-ring,
.adm-stats--num-brand .adm-m-race__val { color: var(--color-brand); }
/* --color-accent is ADM brand yellow (#ffd400), which is designed for dark grounds and buttons. As
   large text on a white or light section it lands at a 1.43 contrast ratio — effectively unreadable. The
   yellow is kept wherever the section actually is dark, and a darker amber of the same hue is used on
   light grounds so "accent" still reads as accent rather than silently becoming unusable. */
.adm-stats--num-accent .adm-m-counters__v,
.adm-stats--num-accent .adm-m-ring,
.adm-stats--num-accent .adm-m-race__val { color: #8a6b00; }
.adm-section--dark .adm-stats--num-accent .adm-m-counters__v,
.adm-section--dark .adm-stats--num-accent .adm-m-ring,
.adm-section--dark .adm-stats--num-accent .adm-m-race__val,
.adm-section--black .adm-stats--num-accent .adm-m-counters__v,
.adm-section--black .adm-stats--num-accent .adm-m-ring,
.adm-section--black .adm-stats--num-accent .adm-m-race__val,
.adm-stats--num-accent.adm-section--dark .adm-m-counters__v,
.adm-stats--num-accent.adm-section--black .adm-m-counters__v,
.adm-stats--num-accent.adm-section--dark .adm-m-ring,
.adm-stats--num-accent.adm-section--black .adm-m-ring,
.adm-stats--num-accent.adm-section--dark .adm-m-race__val,
.adm-stats--num-accent.adm-section--black .adm-m-race__val { color: var(--color-accent); }
.adm-stats--num-accent .adm-m-ring__bar { stroke: var(--color-accent); }
.adm-stats--num-accent .adm-m-race__fill { background: var(--color-accent); }
.adm-stats--num-gradient .adm-m-counters__v {
  background: linear-gradient(96deg, var(--color-brand) 10%, #ff7ab8 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.adm-stats--num-gradient .adm-m-ring,
.adm-stats--num-gradient .adm-m-race__val { color: var(--color-brand); }
/* On a Magenta section the brand-coloured figures vanish (magenta-on-magenta) — force white.
   NB: the num-* and --magenta modifiers sit on the SAME section element, so these must be
   descendant selectors of --magenta alone (not chained to num-*, which would never match). */
.adm-section--magenta .adm-m-counters__v,
.adm-section--magenta .adm-m-ring,
.adm-section--magenta .adm-m-race__val { color: #fff; -webkit-text-fill-color: #fff; background: none; }

/* ── Container effects on a full-width section container ──
   The base magic-border/beam assume a tight card with an inner content layer; on a padded
   .container they bleed. Re-render them here as a clean thin animated gradient border. */
.container.magic-border, .container.magic-beam { padding-top: var(--space-10); padding-bottom: var(--space-10); border-radius: var(--radius-lg); }
.container.magic-border::before,
.container.magic-beam::before {
  inset: 0; padding: 2px; border-radius: inherit; z-index: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.container.magic-border > *, .container.magic-beam > * { position: relative; z-index: 1; }

/* ── Container effect applied PER INNER ITEM (not the whole section) ── */
/* Stat counters are borderless text → give them a padded box so the beam/border has a shape. */
.adm-stats__cell.magic-border, .adm-stats__cell.magic-beam, .adm-stats__cell.magic-glow,
.adm-stats__cell.magic-glass, .adm-stats__cell.magic-shimmer { padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); }

/* ── Proof-enriched stat tiles: client logo + case-study link + client contact/quote ── */
.adm-stats__cell--proof { display:flex; flex-direction:column; gap:var(--space-2); padding:clamp(var(--space-8),3vw,var(--space-10)); background:var(--color-surface-1); border:1px solid var(--color-border); border-radius:var(--radius-xl); text-align:left; text-decoration:none; color:inherit; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
/* Figure stacks: the number, then its label underneath. */
.adm-stats__figure { display:flex; flex-direction:column; gap:var(--space-2); align-items:flex-start; margin-bottom:var(--space-6); }
/* Cards are equal height across the row, so the attribution block anchors to the bottom and the
   "Read the case study" links land on a common line. The spare height then falls between the figure
   and the divider as breathing room, rather than collecting under the CTA where it reads as a gap. */
.adm-stats__cell--proof .adm-stats__client { margin-top:auto; }
a.adm-stats__cell--proof:hover { transform:translateY(-4px); border-color:var(--color-border-brand); box-shadow:0 24px 50px -30px rgba(229,0,109,.4); }
.adm-stats__logo { display:inline-flex; align-items:center; align-self:flex-start; height:48px; margin-bottom:var(--space-3); }
.adm-stats__logo--text { font-weight:600; font-size:var(--font-size-base); letter-spacing:.01em; color:var(--color-text); white-space:nowrap; }
.adm-section--magenta .adm-stats__logo--text,
.adm-section--dark .adm-stats__logo--text,
.adm-section--black .adm-stats__logo--text { background:#fff; padding:8px 12px; border-radius:var(--radius-md,10px); color:#0a0a0a; }
.adm-stats__logo-img { height:100%; width:auto; max-width:170px; object-fit:contain; filter:grayscale(1); opacity:.7; transition:filter var(--duration-fast) ease, opacity var(--duration-fast) ease; }
a.adm-stats__cell--proof:hover .adm-stats__logo-img { filter:none; opacity:1; }
/* Pin the number+label to the bottom so every proof card aligns on a common baseline even when one
   has no client logo (the row stays even instead of one figure floating up out of line). */
.adm-stats__cell--proof .adm-m-counters__v { font-size:clamp(var(--font-size-4xl),4vw,var(--font-size-6xl)); line-height:1; }
.adm-stats__cell--proof .adm-m-counters__l { color:var(--color-text-secondary); font-size:var(--font-size-base); }
.adm-stats__client { display:flex; align-items:flex-start; gap:var(--space-3); margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--color-border); }
/* Contact headshots are hidden until we actually have them — only 1 of 34 testimonials carries one, so
   showing the slot would mean an empty circle on almost every card. Delete this rule to bring them back. */
.adm-stats__client-photo { display:none; }
.adm-stats__client-photo img { width:40px; height:40px; border-radius:50%; object-fit:cover; display:block; }
.adm-stats__client-meta { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.adm-stats__client-quote { font-size:var(--font-size-base); color:var(--color-text); line-height:1.55; }
.adm-stats__client-name { font-size:var(--font-size-xs); color:var(--color-text-muted); font-family:var(--font-mono); }
.adm-stats__cs-link { display:inline-flex; align-items:center; gap:.4em; margin-top:var(--space-5); font-size:var(--font-size-sm); font-weight:500; color:var(--color-brand); text-decoration:none; }
/* Never underline the text inside the tile-as-link. */
.adm-stats__cell--proof, .adm-stats__cell--proof * { text-decoration:none !important; }
/* Adaptive card so proof tiles read on Magenta / Dark / Black sections (glass panel + light ink). */
.adm-section--magenta .adm-stats__cell--proof,
.adm-section--dark .adm-stats__cell--proof,
.adm-section--black .adm-stats__cell--proof,
.adm-section--magicgrid .adm-stats__cell--proof { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.24); }
.adm-section--magenta .adm-stats__cs-link,
.adm-section--dark .adm-stats__cs-link,
.adm-section--black .adm-stats__cs-link,
.adm-section--magicgrid .adm-stats__cs-link { color:#fff; }
.adm-section--magenta .adm-stats__logo-img,
.adm-section--dark .adm-stats__logo-img,
.adm-section--black .adm-stats__logo-img { background:#fff; padding:8px 12px; border-radius:var(--radius-md,10px); filter:none; opacity:1; }
.adm-m-ring.magic-border, .adm-m-ring.magic-beam, .adm-m-ring.magic-glow, .adm-m-ring.magic-glass { padding: var(--space-5); border-radius: var(--radius-lg); }
.adm-m-race__row.magic-border, .adm-m-race__row.magic-beam { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); }

/* ── Reviews — Clutch-style review widget (ADM branding) ── */
/* Live Clutch embed (type 4 carousel): wrap the third-party iframe in our card so it picks up the
   theme radius/border/shadow. overflow:hidden clips the iframe's square corners to our radius; the
   iframe is a cross-origin frame so its INTERNAL layout stays Clutch's — we only style the frame. */
.adm-reviews__embed { margin-inline: auto; max-width: 100%; border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
  background: var(--color-surface-1); }
.adm-reviews__embed iframe,
.adm-reviews__embed .clutch-widget { display: block; width: 100% !important; border: 0; margin: 0 auto !important; }

/* Widget source — each platform's own native embed (Clutch / Trustpilot / Google). Single = a row
   of badges; slider = one per carousel slide. Never wrapped in .reveal (embeds self-measure). */
.adm-reviews__widgets { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-8); }
.adm-reviews__widget { max-width: 100%; }
.adm-reviews__wslider .adm-carousel__slide { display: flex; align-items: center; justify-content: center; }

/* ── Trustpilot & Google CPT cards — two-column layout so they fill the same wide
   container as the detailed Clutch card (identity aside | review body, divided). The
   compound .adm-review.adm-review--* (0,2,0) beats the base .adm-review grid (0,1,0). ── */
.adm-review.adm-review--trustpilot,
.adm-review.adm-review--google {
	display: grid;
	grid-template-columns: minmax(230px, 0.8fr) 2fr;
	gap: 0;
	align-items: stretch;
	text-align: left;
	max-width: none;
	margin-inline: 0;
	min-height: 280px;
}
.adm-tp__aside, .adm-g__aside { display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); padding-right: clamp(var(--space-8), 4vw, var(--space-12)); }
.adm-tp__body, .adm-g__body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); padding-left: clamp(var(--space-8), 4vw, var(--space-12)); border-left: 1px solid var(--color-border); }
.adm-tp__body .adm-review__lbl, .adm-g__body .adm-review__lbl { margin-bottom: 0; }

/* Trustpilot — green square stars, verified footer */
.adm-tp__stars { display: inline-flex; gap: 4px; }
.adm-tp__star { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: #dcdce6; color: #fff; font-size: 17px; border-radius: 4px; }
.adm-tp__star.is-on { background: #00b67a; }
.adm-tp__title { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); line-height: 1.3; color: var(--color-text); }
.adm-tp__foot { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.adm-tp__name { font-weight: var(--font-weight-medium); color: var(--color-text); }
.adm-tp__verified { display: inline-flex; align-items: center; gap: 4px; color: #00b67a; }
.adm-tp__verified svg { width: 15px; height: 15px; }
.adm-tp__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: none; }
.adm-tp__link svg { width: 15px; height: 15px; }

/* Google — avatar, gold stars */
.adm-g__head { display: flex; align-items: center; gap: var(--space-3); }
.adm-g__avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--font-weight-medium); font-size: 20px; background: var(--color-brand-dim, rgba(229,0,109,.10)); color: var(--color-brand); }
.adm-g__who { display: flex; flex-direction: column; line-height: 1.25; }
.adm-g__name { font-weight: var(--font-weight-medium); color: var(--color-text); }
.adm-g__date { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.adm-g__stars { display: inline-flex; gap: 2px; }
.adm-g__star { color: #dadce0; font-size: 22px; line-height: 1; }
.adm-g__star.is-on { color: #fbbc05; }
/* Review body text (Trustpilot + Google): regular weight, comfortable for multi-paragraph reviews. */
.adm-tp__quote, .adm-g__quote { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height-relaxed); color: var(--color-text-secondary); border: 0; padding: 0; }
.adm-tp__quote p, .adm-g__quote p { margin: 0 0 0.7em; }
.adm-tp__quote p:last-child, .adm-g__quote p:last-child { margin-bottom: 0; }

/* Collapsible long reviews — clamp to ~7 lines with a fade, toggled by JS "Read more". */
.adm-review__clamp { position: relative; max-height: 11em; overflow: hidden; }
.adm-review__clamp.is-open { max-height: none; }
/* The Clutch card is four columns side by side on desktop and four stacked blocks on a phone.
   Its two prose blocks reuse the clamp the Trustpilot and Google cards already use.

   This used to be max-height:none above 860px, so desktop was not clamped at all. The slider
   holds every review in one flex row, so its height is the TALLEST review's — and an unclamped
   long review set the height for all of them. Measured at 1440px, the project column (the
   tallest in every card) ran 361px to 435px and card heights 425px to 499px, so a short review
   was shown in a box up to 74px taller than its content and the surplus read as an empty area
   under the text. On a phone the same effect ran to 233px.

   Clamping at every width brings the tallest down to meet the rest. The slider is deliberately
   NOT resized per slide: the track is always as tall as its tallest card, which keeps the
   arrows and dots in one place instead of moving under the cursor as you page through. */
.adm-review__clamp--mobile { max-height: 8em; }
@media (max-width: 860px) {
  /* Tighter where four columns become four stacked blocks and the card is ~1550px otherwise. */
  .adm-review__clamp--mobile { max-height: 7em; }
}

/* The quote is the other variable block in the card — one line in some reviews and three in
   others. Capped so it cannot reintroduce the difference the clamps above remove. */
.adm-review__quote {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(3em * 1.5);
}
.adm-review__clamp.is-clamped:not(.is-open)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.6em; background: linear-gradient(to bottom, transparent, var(--color-surface-1)); pointer-events: none; }
.adm-review__more { align-self: flex-start; margin-top: calc(var(--space-2) * -1); padding: 0; background: none; border: 0; cursor: pointer; color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.adm-review__more:hover { text-decoration: underline; }

/* Keep muted greys legible on dark/black/magenta sections */
.adm-section--dark .adm-g__star, .adm-section--black .adm-g__star, .adm-section--magenta .adm-g__star { color: rgba(255,255,255,.28); }
.adm-section--dark .adm-tp__star:not(.is-on), .adm-section--black .adm-tp__star:not(.is-on), .adm-section--magenta .adm-tp__star:not(.is-on) { background: rgba(255,255,255,.22); }

/* Stack to a single column on narrow viewports */
@media (max-width: 768px) {
	.adm-review.adm-review--trustpilot,
	.adm-review.adm-review--google { grid-template-columns: 1fr; min-height: 0; gap: var(--space-6); }
	.adm-tp__aside, .adm-g__aside { padding-right: 0; }
	.adm-tp__body, .adm-g__body { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--space-6); }
}

.adm-reviews__single, .adm-reviews__slider { }
.adm-review { display: grid; grid-template-columns: 1fr 0.9fr 1.5fr 1fr; gap: 0; align-items: start; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-10); text-align: left; }
/* The review card is always left-aligned on desktop regardless of the section content_align. */
.adm-reviews .adm-review, .adm-reviews .adm-review__col { text-align: left; }
.adm-review__col { padding: 0 var(--space-6); }
.adm-review__col + .adm-review__col { border-left: 1px solid var(--color-border); }
.adm-review__lbl { display: block; font-family: var(--font-mono); font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.adm-review__col .adm-review__lbl:not(:first-child) { margin-top: var(--space-5); }
.adm-review__proj { font-weight: var(--font-weight-medium); margin: 0; }
.adm-review__meta, .adm-review__date { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: var(--space-2) 0 0; }
.adm-review__sum, .adm-review__fb { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.55; margin: 0; }
.adm-review__quote { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: 1.45; margin: 0; }
/* Score box */
.adm-review__scorebox { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); text-align: center; }
.adm-review__score { font-size: var(--font-size-4xl); font-weight: var(--font-weight-medium); line-height: 1; display: block; }
.adm-review__stars { display: inline-flex; gap: 2px; margin: var(--space-3) 0 var(--space-4); font-size: 18px; }
.adm-review__star { color: var(--color-border-strong); display: inline-flex; }
.adm-review__star.is-on { color: var(--color-brand); }
.adm-review__rates { text-align: left; display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.adm-review__rate { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.adm-review__rate-v { font-weight: var(--font-weight-medium); color: var(--color-text); }
/* Reviewer */
.adm-review__rrole { font-weight: var(--font-weight-medium); margin: 0; }
.adm-review__rname { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); margin: var(--space-2) 0 0; }
.adm-review__facts { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.adm-review__facts li { display: flex; align-items: center; gap: var(--space-2); }
.adm-review__facts i, .adm-review__rname i { color: var(--color-text-muted); font-size: 17px; }
.adm-review__verified { color: #15a34a; }
.adm-review__verified i { color: #15a34a; }
/* Action */
.adm-review__action { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: var(--space-10); padding: var(--space-10) var(--space-6) 0; border-top: 1px solid var(--color-border); }
.adm-reviews__slider .adm-review { border: 0; padding: var(--space-8) var(--space-10); }



/* ── Reviews: grid variant ─────────────────────────────────────────────────────
   Every review visible at once instead of one at a time behind carousel arrows.
   --cols is the desktop count from the block's Grid columns setting; it steps down
   so a 4-up never squeezes a review card below a readable measure.
   align-items:start stops a long review stretching every card in its row. */
.adm-reviews__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}
.adm-reviews__gitem { display: flex; }
/* The card carries its own border here: unlike the slider, neighbours need separating. */
.adm-reviews__grid .adm-review {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface-1);
}
@media (max-width: 1100px) {
  /* Never more than 3 once the container narrows, whatever the setting says. */
  .adm-reviews__grid { grid-template-columns: repeat(min(var(--cols, 3), 3), minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* min() not a hard 2: a block deliberately set to 1 column must stay at 1 here, otherwise the
     tablet rule silently doubles it. */
  .adm-reviews__grid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); gap: var(--space-5); }
}
@media (max-width: 620px) {
  /* :not() so a section set to "Carousel / swipe" keeps its flex scroll track — without this the
     1-column rule below reasserts a grid at 620px and the swipe layout silently reverts to a stack. */
  .adm-section:not(.adm-section--m-carousel) .adm-reviews__grid { grid-template-columns: 1fr; }
}

/* Logos — Grid + content (split): client logo grid on one side, rich copy on the other. */
.adm-logos__split { display: grid; grid-template-columns: 1.05fr 1fr; }
.adm-logos--gridsplit { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.adm-logos--gridsplit .adm-logos__item { display: flex; align-items: center; justify-content: center; padding: var(--space-6); min-height: 116px; border-radius: var(--radius-md); transition: background .2s ease; }
.adm-logos--gridsplit .adm-logos__item:hover { background: var(--color-surface-2); }
.adm-logos--gridsplit .adm-logos__img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; }
.adm-logos__copy-title { margin: var(--space-3) 0 0; }
.adm-logos__copy-body { margin-top: var(--space-5); }
.adm-logos__copy-cta { margin-top: var(--space-8); }
@media (max-width: 900px) { .adm-logos__split { grid-template-columns: 1fr; gap: var(--space-8); } }
@media (max-width: 520px) { .adm-logos--gridsplit { grid-template-columns: repeat(2, 1fr); } }
/* Clutch brand logo — light variant (dark ink) on light surfaces, white variant on dark ones. */
.adm-clutch-logo { display: flex; justify-content: center; align-items: center; margin-top: var(--space-5); }
.adm-clutch-logo__img { height: 34px; width: auto; display: inline-block; }
.adm-clutch-logo__img--ondark { display: none; }
[data-theme="dark"] .adm-clutch-logo__img--onlight,
.adm-section--dark .adm-clutch-logo__img--onlight,
.adm-section--black .adm-clutch-logo__img--onlight,
.adm-section--magenta .adm-clutch-logo__img--onlight { display: none; }
[data-theme="dark"] .adm-clutch-logo__img--ondark,
.adm-section--dark .adm-clutch-logo__img--ondark,
.adm-section--black .adm-clutch-logo__img--ondark,
.adm-section--magenta .adm-clutch-logo__img--ondark { display: inline-block; }
/* A White section stays light even under the dark-mode toggle → keep the dark-ink logo. */
[data-theme="dark"] .adm-section--white .adm-clutch-logo__img--onlight { display: inline-block; }
[data-theme="dark"] .adm-section--white .adm-clutch-logo__img--ondark { display: none; }

/* ── Reviews platform tabs (Clutch / Trustpilot / Google) ── */
.adm-rtabs__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(var(--space-6), 5vw, var(--space-12)); }
.adm-rtabs__tab { position: relative; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: var(--space-3) var(--space-1); cursor: pointer; filter: grayscale(1); opacity: .4; transition: filter var(--duration-base) ease, opacity var(--duration-base) ease; }
.adm-rtabs__tab:hover { opacity: .75; filter: grayscale(.3); }
.adm-rtabs__tab.is-active { filter: grayscale(0); opacity: 1; }
.adm-rtabs__tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-brand); border-radius: 2px; }
.adm-rtabs__logo { display: block; height: 30px; width: auto; }
/* Optical sizing/alignment — each wordmark carries different visual weight & baseline. */
.adm-rtabs__tab[data-rtab="trustpilot"] .adm-rtabs__logo { height: 38px; }
.adm-rtabs__tab[data-rtab="google"] .adm-rtabs__logo { transform: translateY(4px); }
.adm-rtabs__logo--ondark { display: none; }
.adm-rtabs__txt { font-family: var(--font-mono); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-text); }
.adm-rtabs__panel { margin-top: var(--space-8); transition: opacity var(--duration-base, .28s) var(--ease-out, ease); }
.adm-rtabs__panel[hidden] { display: none; }
/* Fade IN via a CSS keyframe (reliable in background tabs, unlike rAF). Applied whenever a panel
   becomes active; JS re-triggers it by removing/re-adding .is-active with a reflow between. */
.adm-rtabs__panel.is-active { animation: admRtabIn var(--duration-base, .28s) var(--ease-out, ease); }
@keyframes admRtabIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .adm-rtabs__panel.is-active { animation: none; } }
.adm-rtabs { transition: min-height var(--duration-base, .28s) var(--ease-out, ease); }
.adm-rtabs__list { display: flex; flex-direction: column; gap: var(--space-6); }
.adm-rtabs__more, .adm-rtabs__empty { margin-top: var(--space-6); text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.adm-rtabs__more a, .adm-rtabs__empty a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-brand); font-weight: var(--font-weight-medium); text-decoration: none; }
.adm-rtabs__more svg, .adm-rtabs__empty svg { width: 15px; height: 15px; }
/* Swap logo ink for dark backgrounds (same rule as the Clutch logo) */
[data-theme="dark"] .adm-rtabs__logo--onlight,
.adm-section--dark .adm-rtabs__logo--onlight,
.adm-section--black .adm-rtabs__logo--onlight,
.adm-section--magenta .adm-rtabs__logo--onlight { display: none; }
[data-theme="dark"] .adm-rtabs__logo--ondark,
.adm-section--dark .adm-rtabs__logo--ondark,
.adm-section--black .adm-rtabs__logo--ondark,
.adm-section--magenta .adm-rtabs__logo--ondark { display: block; }
[data-theme="dark"] .adm-section--white .adm-rtabs__logo--onlight { display: block; }
[data-theme="dark"] .adm-section--white .adm-rtabs__logo--ondark { display: none; }
@media (max-width: 900px) {
  .adm-review { grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: var(--space-6); }
  .adm-review__col { padding: var(--space-2) 0; border-left: 0 !important; }
}
@media (max-width: 560px) {
  .adm-reviews .adm-review, .adm-reviews .adm-review__col { text-align: center; }
  .adm-review__rates, .adm-review__facts { align-items: center; }
  .adm-review__rname, .adm-review__facts li { justify-content: center; }
}
@media (max-width: 560px) { .adm-review { grid-template-columns: 1fr; } }

/* ── Hero — Home (form + glass refraction + awards) ── */
.adm-hero-home { position: relative; overflow: clip; padding-block: var(--space-10) var(--space-8); } /* reduced so the client logos sit in view without scrolling */
.adm-hero-home__inner, .adm-hero-home__awards { position: relative; z-index: 1; }
.adm-hero-home__title { font-size: clamp(var(--font-size-4xl), 5.5vw, var(--font-size-7xl)); font-weight: var(--font-weight-medium); line-height: 1.04; margin: var(--space-4) 0 0; }
/* All heroes share the homepage hero heading size (the compact heroes otherwise inherit the
   larger base h1 and look bigger than the homepage). */
.adm-hero-compact .section-header__title,
.adm-hero-short .section-header__title { font-size: clamp(var(--font-size-4xl), 5.5vw, var(--font-size-7xl)); line-height: 1.04; }
.adm-hero-home__sub { font-size: var(--font-size-lg); color: var(--color-text-secondary); max-width: 46ch; margin: var(--space-6) 0 0; }
.adm-hero-home__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
/* Hero graphic column (inc/hero-graphics.php). Deliberately NOT the frosted card the form
   gets: a graphic brings its own surfaces, and stacking a card behind them muddied both.
   min-width:0 stops a wide graphic forcing the copy column narrow in the split grid. */
.adm-hero-home__graphic { display: flex; align-items: center; justify-content: center; min-width: 0; }
.adm-hero-home__graphic > * { max-width: 100%; }
.adm-hero-compact__img--graphic { display: flex; align-items: center; justify-content: center; background: none; border: 0; box-shadow: none; }
/* Lead form panel (frosted) */
.adm-hero-home__form { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: 0 30px 80px -40px rgba(0,0,0,.3); color: #1a1a1a; }
.adm-hero-home__form-title { color: #1a1a1a; }
.adm-hero-home__form .wpcf7-list-item-label { color: #4a4a4a; }
/* The lead-form card FOLLOWS the active theme: dark frosted card + light text whenever the
   page is in dark mode OR the section colour is a dark one. A White section stays light. */
[data-theme="dark"] .adm-hero-home__form,
.adm-section--dark .adm-hero-home__form,
.adm-section--black .adm-hero-home__form,
.adm-section--magenta .adm-hero-home__form { background: rgba(22,22,28,.62); border-color: rgba(255,255,255,.14); color: #fff; }
[data-theme="dark"] .adm-hero-home__form-title,
[data-theme="dark"] .adm-hero-home__form label,
[data-theme="dark"] .adm-hero-home__form .wpcf7-form,
.adm-section--dark .adm-hero-home__form-title,
.adm-section--black .adm-hero-home__form-title,
.adm-section--magenta .adm-hero-home__form-title,
.adm-section--dark .adm-hero-home__form-intro,
.adm-section--black .adm-hero-home__form-intro,
.adm-section--magenta .adm-hero-home__form-intro { color: #fff; }
[data-theme="dark"] .adm-hero-home__form .wpcf7-list-item-label,
.adm-section--dark .adm-hero-home__form .wpcf7-list-item-label,
.adm-section--black .adm-hero-home__form .wpcf7-list-item-label,
.adm-section--magenta .adm-hero-home__form .wpcf7-list-item-label { color: rgba(255,255,255,.72); }
/* A White section is always light, even under the dark-mode toggle. */
[data-theme="dark"] .adm-section--white .adm-hero-home__form { background: rgba(255,255,255,.72); border-color: rgba(255,255,255,.6); color: #1a1a1a; }
[data-theme="dark"] .adm-section--white .adm-hero-home__form-title,
[data-theme="dark"] .adm-section--white .adm-hero-home__form .wpcf7-form { color: #1a1a1a; }
[data-theme="dark"] .adm-section--white .adm-hero-home__form .wpcf7-list-item-label { color: #4a4a4a; }
.adm-hero-home__form-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); margin: 0 0 var(--space-3); text-align: center; }
/* Brand sweep on <u> inside the form title.
   This CANNOT use the generic `.section-header__title u` rule, because that gradient is built
   from var(--color-text), which tracks the SECTION. The lead-form card sets its own colour
   independently of the section (it stays light on a White section even under the dark toggle),
   so a section-derived base would render light-on-light in exactly that case. Instead the base
   colour is carried in --sweep-base, mirroring the card's own colour rules above. */
.adm-hero-home__form-title { --sweep-base: #1a1a1a; }
[data-theme="dark"] .adm-hero-home__form-title,
.adm-section--dark .adm-hero-home__form-title,
.adm-section--black .adm-hero-home__form-title,
.adm-section--magenta .adm-hero-home__form-title { --sweep-base: #fff; }
[data-theme="dark"] .adm-section--white .adm-hero-home__form-title { --sweep-base: #1a1a1a; }
.adm-hero-home__form-title u {
  text-decoration: none;
  background: linear-gradient(90deg, var(--sweep-base) 0%, var(--sweep-base) 40%, #e5006d 50%, var(--sweep-base) 60%, var(--sweep-base) 100%);
  color: transparent;
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: homeShimmer 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .adm-hero-home__form-title u { animation: none; } }
.adm-reduce-motion .adm-hero-home__form-title u, .reduce-motion .adm-hero-home__form-title u { animation: none; }
/* Promo intro under the form title. Tighter margin on the title above so the two read as one block,
   and the colour follows the title's inverted rules below rather than being pinned here. */
.adm-hero-home__form-intro { margin: 0 0 var(--space-5); text-align: center; font-size: var(--font-size-sm); line-height: 1.55; opacity: .8; }
.adm-hero-home__form-intro p { margin: 0; }
.adm-hero-home__form-intro p + p { margin-top: var(--space-2); }
/* Hero lead-form CTA = brand yellow (not magenta) — higher specificity to beat .wpcf7-form .wpcf7-submit */
.adm-hero-home__form .wpcf7-form .wpcf7-submit { background: var(--color-yellow); border-color: var(--color-yellow); color: #0a0a0a; }
.adm-hero-home__form .wpcf7-form .wpcf7-submit:hover { background: #f2c800; border-color: #f2c800; color: #0a0a0a; box-shadow: 0 12px 30px -12px rgba(255,212,0,.6); transform: translateY(-1px); }
/* Awards marquee */
.adm-hero-home__awards { margin-top: var(--space-8); }
.adm-hero-home__awards-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.adm-hero-home__awards-lbl { display: block; font-family: var(--font-mono); font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: .12em; color: var(--color-text); }
.adm-hero-home__awards-more { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text); text-decoration: none; white-space: nowrap; transition: opacity var(--duration-fast) ease; }
.adm-hero-home__awards-more:hover { opacity: .7; }
.adm-hero-home__awards-more svg { width: 14px; height: 14px; }
/* Award chips keep a constant white background so every badge shows in its true colour
   (a dark/mono badge would otherwise vanish on the theme-coloured surface). */
.adm-hero-home__award { overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 124px; padding: var(--space-3) var(--space-8); background: #ffffff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius-md); }
.adm-hero-home__award img { max-height: 88px; width: auto; object-fit: contain; }
/* Robust fade + upward-grow: the marquee box is TALLER than a resting card (reserves room at the top),
   with normal overflow:hidden and the standard edge-fade mask (base rule). The scrolling row is pinned to
   the bottom, so a hovered card grows UP into the reserved space — staying INSIDE the box, so the mask
   fades the edges and nothing clips. No no-clip / overflow-y tricks. */
.adm-hero-home__awards .magic-marquee { position: relative; height: 168px; overflow: hidden; margin-top: -44px; /* cancel the reserved top room visually (168 - 124) so there's no rest gap; the space is still there for the card to grow up into */ }
.adm-hero-home__awards .magic-marquee__track { position: absolute; left: 0; bottom: 0; align-items: flex-end; }
.adm-hero-home__award-win { max-height: 0; opacity: 0; overflow: hidden; text-align: center; margin-top: 0; pointer-events: none; transition: max-height var(--duration-base) var(--ease-out), opacity var(--duration-base) ease, margin-top var(--duration-base) var(--ease-out); }
.adm-hero-home__award:hover .adm-hero-home__award-win { max-height: 46px; opacity: 1; margin-top: var(--space-2); }
.adm-hero-home__award-win-cap { display: block; font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); color: #0a0a0a; line-height: 1.15; }
.adm-hero-home__award-win-sub { display: block; font-size: 10px; color: #6b6b6b; margin-top: 1px; line-height: 1.1; }

/* ══ Awards rendered inside the Logos block (Logo source = Awards) ══
   Mirrors the homepage hero awards marquee, kept self-contained so the hero is untouched. */
.adm-logos__award { overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 124px; padding: var(--space-3) var(--space-8); background: #ffffff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius-md); }
.adm-logos__award img { max-height: 88px; width: auto; object-fit: contain; }
.adm-logos__award--laurel { background: transparent; border: 0; padding: 0 var(--space-5); }
/* Hover reveal: the marquee reserves vertical room and cards grow up from the bottom (no clipping). */
.adm-logos--awardhover.magic-marquee { position: relative; height: 168px; overflow: hidden; }
.adm-logos--awardhover .magic-marquee__track { position: absolute; left: 0; bottom: 0; align-items: flex-end; }
.adm-logos__award-win { max-height: 0; opacity: 0; overflow: hidden; text-align: center; margin-top: 0; pointer-events: none; transition: max-height var(--duration-base) var(--ease-out), opacity var(--duration-base) ease, margin-top var(--duration-base) var(--ease-out); }
.adm-logos__award:hover .adm-logos__award-win { max-height: 46px; opacity: 1; margin-top: var(--space-2); }
.adm-logos__award-win-cap { display: block; font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); color: #0a0a0a; line-height: 1.15; }
.adm-logos__award-win-sub { display: block; font-size: 10px; color: #6b6b6b; margin-top: 1px; line-height: 1.1; }
/* Award grid: laurel cards sit frameless; image cards keep the white logo-card frame. */
.adm-logos--awards .client-logo-card.adm-logos__award--laurel { background: transparent; border: 0; box-shadow: none; }
@media (max-width: 860px) { .adm-hero-home__lens { width: 380px; height: 380px; transform: translate(calc(var(--mx,75%) - 190px), calc(var(--my,25%) - 190px)); } .adm-hero-home__inner.split { grid-template-columns: 1fr; } }

/* Homepage hero centres on mobile. Once the split collapses to one column the left-aligned
   copy reads off-balance, so centre the text and the flex rows (breadcrumbs, laurel, review
   badges, CTAs) — the width-capped elements also need auto inline margins to actually sit
   centred rather than just having centred text inside a left-hugging box. */
@media (max-width: 860px) {
  .adm-hero-home__copy { text-align: center; }
  .adm-hero-home__copy .adm-breadcrumbs,
  .adm-hero-home__copy .adm-hero-award,
  .adm-hero-home__reviews,
  .adm-hero-home__ctas { justify-content: center; }
  .adm-hero-home__sub,
  .adm-hero-home__content,
  .adm-hero-home__content > p { margin-inline: auto; }
}

/* ── Soft gradient (mesh) background — bg_colour "Gradient" ──────────────────────────────
   A subtle, slowly-drifting magenta/peach/yellow mesh on TRANSPARENT, so it tints whatever
   the section sits on and honours light & dark mode. Kept low-opacity for text legibility. */
.adm-section--gradient { position: relative; isolation: isolate; overflow: clip; }
.adm-section--gradient::before {
  content: ''; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 48% at 18% 28%, rgba(229,0,109,.28), transparent 70%),
    radial-gradient(34% 42% at 82% 22%, rgba(255,212,0,.22), transparent 70%),
    radial-gradient(44% 50% at 72% 82%, rgba(255,122,90,.26), transparent 72%),
    radial-gradient(40% 46% at 26% 86%, rgba(229,0,109,.20), transparent 72%);
  filter: blur(38px);
  animation: adm-gradient-flow 26s ease-in-out infinite alternate;
}
/* A touch more presence in dark mode so the tint reads against the dark base. */
[data-theme="dark"] .adm-section--gradient::before {
  background:
    radial-gradient(38% 48% at 18% 28%, rgba(229,0,109,.26), transparent 70%),
    radial-gradient(34% 42% at 82% 22%, rgba(255,212,0,.16), transparent 70%),
    radial-gradient(44% 50% at 72% 82%, rgba(255,122,90,.22), transparent 72%),
    radial-gradient(40% 46% at 26% 86%, rgba(229,0,109,.20), transparent 72%);
}
@keyframes adm-gradient-flow {
  0%   { transform: translate3d(-3%, 2%, 0) scale(1.05); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.12); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .adm-section--gradient::before { animation: none; } }

/* ── Award Event single page ── */
.adm-event-hero__logo { display: flex; justify-content: center; margin-bottom: var(--space-5); }
.adm-event-hero__logobox { display: inline-flex; align-items: center; justify-content: center; padding: clamp(var(--space-6), 4vw, var(--space-10)); background: var(--color-surface-1, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-xl, 20px); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.adm-event-hero__logobox img { max-height: 88px; width: auto; object-fit: contain; }
.adm-event-related { margin-top: var(--space-6); }
.adm-event-relcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6); background: var(--color-surface-1, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.adm-event-relcard:hover { transform: translateY(-4px); border-color: var(--color-border-brand); box-shadow: 0 20px 40px -24px rgba(0,0,0,.25); }
.adm-event-relcard__logo { display: flex; align-items: center; justify-content: center; height: 56px; }
.adm-event-relcard__logo img { max-height: 56px; max-width: 150px; width: auto; object-fit: contain; }
.adm-event-relcard__name { font-weight: 500; color: var(--color-text); }
.adm-event-relcard__meta { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.adm-event-wins { list-style: none; margin: var(--space-8) auto 0; padding: 0; max-width: 840px; display: flex; flex-direction: column; gap: var(--space-4); }
.adm-event-win { display: flex; gap: var(--space-6); padding: var(--space-6); background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.adm-event-win__year { font-family: var(--font-mono); font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); color: var(--color-brand); flex: 0 0 auto; min-width: 60px; }
.adm-event-win__body { flex: 1; }
.adm-event-win__result { display: inline-block; font-family: var(--font-mono); font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: .1em; padding: 3px 9px; border-radius: var(--radius-full); background: var(--color-brand-dim); color: var(--color-brand); margin-bottom: var(--space-2); }
.adm-event-win__result--finalist, .adm-event-win__result--shortlisted, .adm-event-win__result--nominee { background: var(--color-surface-3); color: var(--color-text-secondary); }
.adm-event-win__cat { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); margin: 0 0 var(--space-1); }
.adm-event-win__summary { color: var(--color-text-secondary); margin: 0; }
.adm-event-win__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3); color: var(--color-brand); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }
@media (max-width: 560px) { .adm-event-win { flex-direction: column; gap: var(--space-2); } }

/* Feature/bento icons chosen via the HugeIcons picker (adm_icon() → <i class="hgi-*">) */
.adm-feature__icon--hgi { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-brand-dim); }
.adm-feature__icon--hgi i { font-size: 26px; color: var(--color-brand); line-height: 1; }
.adm-m-tile__eye--hgi i { font-size: 28px; color: var(--color-brand); line-height: 1; }

/* ── Optional block icons (HugeIcons picker) ─────────────────────────────────
   Stats, content/media rows, FAQ items and the CTA each take an optional icon.
   All four reuse the .adm-feature__icon--hgi treatment (tinted square plate,
   brand-coloured glyph) so an icon looks the same wherever it is turned on, and
   all four inherit the section's own alignment rather than forcing left. */
.adm-stats__icon,
.adm-content__row-icon,
.adm-cta__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-brand-dim); margin-bottom: var(--space-4); }
.adm-stats__icon i,
.adm-content__row-icon i,
.adm-cta__icon i { font-size: 26px; color: var(--color-brand); line-height: 1; }
/* The stat cell is a centred column, so the plate must centre with it; a plain
   inline-flex would sit at the text's start edge instead. */
.adm-stats__cell .adm-stats__icon { align-self: center; }
.adm-stats__cell--proof .adm-stats__icon { align-self: flex-start; }
/* An icon on a proof card would collide with the client logo plate at the top of
   the cell, so it only shows where there is no logo. */
.adm-stats__logo + .adm-stats__icon { display: none; }
.adm-cta__icon { margin-inline: auto; }
/* .adm-cta--form and --booking release the copy measure and left-align it. */
.adm-cta--form .adm-cta__icon,
.adm-cta--booking .adm-cta__icon { margin-inline: 0; }

/* FAQ item icon sits inline before the question. __q is a space-between flex, so
   the question itself has to claim the free space or it would float to the
   centre between icon and chevron. */
.adm-accordion__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--color-brand-dim); margin-right: var(--space-3); }
.adm-accordion__icon i { font-size: 18px; color: var(--color-brand); line-height: 1; }
.adm-accordion__icon + span { margin-right: auto; }

/* CTA — Lead form variant: the form uses the exact legacy .card.adm-form-card (frosted magic-glass),
   NOT a heavy solid box. The card's own look comes from components.css .adm-form-card + magic-glass. */
/* Form variant = a faithful port of the legacy form section: fills the container, award laurel on top,
   office/contact cards below the form, yellow submit. */
.adm-cta--form .adm-cta__inner { max-width: none; }
.adm-cta--form .adm-form-card { margin-top: var(--space-8); text-align: left; }

/* CTA — Booking variant (Absolute Calendar). Same reasoning as --form: .adm-cta__inner's 760px cap is
   a copy measure, far too narrow for a 3-column scheduler, so the embed is released to the container
   (the section's container_width setting still governs the outer width) while the heading and standfirst
   keep the measure. The embed then caps itself at the calendar card's own width — see [adm_booking]. */
.adm-cta--booking .adm-cta__inner { max-width: none; }
.adm-cta--booking .adm-cta__title,
.adm-cta--booking .adm-cta__text { max-width: 760px; margin-inline: auto; }
.adm-cta--booking .adm-booking-inline { margin-top: var(--space-8); }
/* Mobile: drop the container gutter for the CALENDAR SECTION ONLY, so the scheduler gets the full
   width. .container--wide is given an explicit 32px side padding at ≤1280px (responsive.css), which
   still applies on a phone — and the embed already carries its own 32px gutter inside the iframe (it
   holds the card's shadow), so the two stacked to 64px a side. Scoped to .adm-cta--booking and to
   .container--wide, matching the section's current container_width setting; every other section and
   container width is untouched. Specificity (0,3,0) out-ranks the responsive.css rule. */
@media (max-width: 768px) {
  .adm-cta--booking .container.container--wide { padding-left: 0; padding-right: 0; }
}
@media (max-width: 600px) { .adm-cta--form .adm-form-card { padding: var(--space-6) !important; } }
.adm-cta__offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-8) auto 0; text-align: left; }
.adm-cta__office { background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.adm-cta__office-h { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); margin-bottom: var(--space-2); }
.adm-cta__office address { font-style: normal; font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--color-text-secondary); }
.adm-cta__office a { display: block; width: fit-content; font-size: var(--font-size-sm); color: var(--color-brand); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1.5px; transition: background-size 0.35s var(--ease-out); }
.adm-cta__office a:hover { background-size: 100% 1.5px; }
@media (max-width: 760px) { .adm-cta__offices { grid-template-columns: 1fr; } }
/* On magenta the office cards read as translucent white tiles (matches the legacy). */
.adm-section--magenta .adm-cta__office { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
.adm-section--magenta .adm-cta__office address { color: rgba(255,255,255,0.82); }
/* Force the lead-form submit YELLOW even on magenta (beats .adm-section--magenta .btn--primary !important). */
.adm-cta--form .adm-form-card .wpcf7-submit, .adm-section--magenta .adm-cta--form .adm-form-card .wpcf7-submit,
.adm-cta--form .adm-form-card input[type="submit"], .adm-section--magenta .adm-cta--form .adm-form-card input[type="submit"] {
  background: var(--color-yellow) !important; color: #000 !important; border-color: var(--color-yellow) !important; }

/* Hero review-badge row (Clutch now; Google/Trustpilot later) — sit side by side under the intro. */
/* Reviews-widget tray: gives third-party widgets (Clutch/Google/Trustpilot) a light card so they
   stay legible on dark/black/magenta heroes. Kept light in BOTH modes — these widgets are built for
   a light background. Hugs its content (width:max-content) so it sits under the copy, not full-bleed. */
/* Reviews tray = a plain ROW; each badge (Clutch / Google / Trustpilot) is its own card. */
.adm-hero-home__reviews { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-4); }
/* Static review badge images (Google / Trustpilot / Clutch) — interim until live widgets. Each badge
   sits in its own card container (surface + border + radius); uniform box height so the three platforms
   align regardless of their individual artwork aspect ratios. Padding on the <img> is the card inset. */
.adm-hero-home__reviews .adm-hero-home__badge {
  height: 66px; box-sizing: border-box; padding: var(--space-2) var(--space-4);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); width: auto; max-width: 210px; object-fit: contain; display: block;
}
@media (max-width: 560px) { .adm-hero-home__reviews .adm-hero-home__badge { height: 56px; padding: var(--space-1) var(--space-3); } }
/* Theme-aware badge artwork: show the light variant in light mode, the dark variant in dark mode. */
.adm-hero-home__reviews .adm-hero-home__badge--dark { display: none; }
[data-theme="dark"] .adm-hero-home__reviews .adm-hero-home__badge--light { display: none; }
[data-theme="dark"] .adm-hero-home__reviews .adm-hero-home__badge--dark { display: block; }
/* Home hero fills the viewport tightly — trim the block padding so the reviews tray doesn't push
   the content past one screen. */
.adm-hero-home.adm-section--vh { padding-block: var(--space-5); }
/* Clutch renders its badge in a fixed-layout iframe wider than its content, leaving a big empty
   area. Crop it by capping the widget/iframe width to the badge (~230px). Content is left-aligned
   inside the iframe, so only the empty right is cut. Bump the value if the badge ever clips. */
.adm-hero-home__reviews .clutch-widget { margin: 0 !important; width: 230px !important; max-width: 230px !important; overflow: hidden; }
/* Clutch injects/replaces the div with an iframe that isn't a child of .clutch-widget, so target ANY
   iframe in the tray — the earlier .clutch-widget iframe selector never matched, which is why the
   width cap didn't land. Cap + crop the empty right of the badge. Bump 240px if the badge ever clips. */
.adm-hero-home__reviews iframe { width: 230px !important; max-width: 230px !important; min-width: 0 !important; display: block; }
/* Centre-aligned heroes: keep the tray centred under the copy. */
.adm-ha-center .adm-hero-home__reviews { align-self: center; }

/* Bento tiles: optional image + CTA per box (fills the larger feature/wide tiles). */
.adm-m-tile__content { display: flex; flex-direction: column; }
.adm-m-tile__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3); color: var(--color-brand); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); text-decoration: none; }
.adm-m-tile__link svg { width: 16px; height: 16px; }
.adm-m-tile__media { margin-top: auto; padding-top: var(--space-5); }
.adm-m-tile__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.adm-m-tile--feature .adm-m-tile__media img { max-height: 340px; object-fit: cover; }

/* CTA lead-form — split layout: copy left, form card right (like the hero). */
.adm-cta--form-split .adm-cta__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; text-align: left; }
.adm-cta--form-split .adm-cta__copy { max-width: 48ch; }
.adm-cta--form-split .adm-form-card { margin-top: 0; }
@media (max-width: 900px) { .adm-cta--form-split .adm-cta__inner { grid-template-columns: 1fr; gap: var(--space-8); } }

/* Static Clutch trust badge (replaces the live iframe in the hero — identical look, no empty space). */
.adm-clutch-badge { display: inline-flex; align-items: center; gap: var(--space-4); }
.adm-clutch-badge__brand { display: flex; flex-direction: column; gap: 4px; }
.adm-clutch-badge__label { font-family: var(--font-mono); font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-muted); }
.adm-clutch-badge__logo { height: 24px; width: auto; display: block; }
.adm-clutch-badge__score { display: flex; flex-direction: column; gap: 4px; }
.adm-clutch-badge__stars { color: #e62415; font-size: 17px; letter-spacing: 3px; line-height: 1; }
.adm-clutch-badge__count { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); }

/* Optional section-level CTA on blocks (Button text / link / style). */
.adm-block-cta { margin-top: var(--space-8); display: flex; justify-content: center; }
.adm-ha-left .adm-block-cta, .text-left .adm-block-cta { justify-content: flex-start; }
.adm-block-cta__link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-brand); font-weight: var(--font-weight-medium); text-decoration: none; }
.adm-block-cta__link svg { width: 16px; height: 16px; }
.btn--outline { background: transparent; color: var(--color-brand); border: 1.5px solid var(--color-brand); }
.btn--outline:hover { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }

/* Bulletproof the Clutch badge logo size (a global img reset was winning somehow). */
.adm-hero-home__reviews .adm-clutch-badge__logo { height: 26px !important; width: auto !important; max-height: 26px !important; max-width: 120px !important; }
.adm-hero-home__reviews .adm-clutch-badge__stars { font-size: 18px; letter-spacing: 2px; }

/* Cards block — per-card colour theme (independent of the section bg) + size/density.
   Remaps the surface/text/border tokens so the standard card types adapt. */
.adm-cards--theme-white  { --color-surface-1:#ffffff; --color-text:#0a0a0a; --color-text-secondary:#6b6b6b; --color-border:rgba(10,10,25,.09); }
.adm-cards--theme-light  { --color-surface-1:#f5f5f7; --color-text:#0a0a0a; --color-text-secondary:#5c5c66; --color-border:rgba(10,10,25,.08); }
.adm-cards--theme-dark   { --color-surface-1:#16161c; --color-text:#ffffff; --color-text-secondary:rgba(255,255,255,.72); --color-border:rgba(255,255,255,.12); --cs-surface:#16161c; }
.adm-cards--theme-black  { --color-surface-1:#0a0a0a; --color-text:#ffffff; --color-text-secondary:rgba(255,255,255,.68); --color-border:rgba(255,255,255,.1); --cs-surface:#0a0a0a; }
.adm-cards--theme-magenta{ --color-surface-1:var(--color-brand); --color-text:#ffffff; --color-text-secondary:rgba(255,255,255,.85); --color-border:rgba(255,255,255,.22); --cs-surface:var(--color-brand); }
.adm-cards--theme-magenta .adm-card__tag { background:rgba(255,255,255,.16); color:#fff; }
/* The theme classes above sit on the cards CONTAINER, but .cs-card re-declares --cs-surface on itself
   (components.css: "cs-cards are always white in light mode"), and a declaration on the element always
   beats an inherited one. So dark / black / magenta cards kept a white body while --color-text was
   remapped to white — white-on-white at ratio 1.00, invisible. Target the card element directly so the
   theme wins, and carry --color-surface-2 across too: the "Read More" shelf paints from surface-2 and
   was left light grey, giving white text at ratio 1.14. */
.adm-cards--theme-dark    .cs-card { --cs-surface:#16161c; }
.adm-cards--theme-black   .cs-card { --cs-surface:#0a0a0a; }
.adm-cards--theme-magenta .cs-card { --cs-surface:var(--color-brand); }
.adm-cards--theme-dark    { --color-surface-2:#22222a; }
.adm-cards--theme-black   { --color-surface-2:#18181c; }
.adm-cards--theme-magenta { --color-surface-2:rgba(255,255,255,.18); }
/* Size / density */
.adm-cards--size-compact .adm-card, .adm-cards--size-compact .cs-card__body, .adm-cards--size-compact .adm-card__body { padding: var(--space-4); }
.adm-cards--size-compact .adm-card__title, .adm-cards--size-compact .cs-card__title { font-size: var(--font-size-base); }
.adm-cards--size-large .adm-card, .adm-cards--size-large .adm-card__body { padding: var(--space-10); }
.adm-cards--size-large .adm-card__title { font-size: var(--font-size-xl); }

/* ============================================================
   Single Team Member profile (single-team.php)
   ============================================================ */
.adm-team-profile { padding-block: var(--space-16) var(--space-10); }
.adm-team-profile__crumbs { display:flex; gap:var(--space-2); align-items:center; font-size:var(--font-size-sm); color:var(--color-text-muted); margin-bottom:var(--space-8); flex-wrap:wrap; }
.adm-team-profile__crumbs a { color:var(--color-text-muted); text-decoration:none; }
.adm-team-profile__crumbs a:hover { color:var(--color-brand); }
.adm-team-profile__grid { display:grid; grid-template-columns: 340px 1fr; gap: var(--space-12); align-items:start; }
.adm-team-profile__media { position:sticky; top:var(--space-12); display:flex; flex-direction:column; gap:var(--space-4); }
.adm-team-profile__photo { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-xl); border:1px solid var(--color-border); box-shadow:var(--shadow-md); background:var(--color-surface-2); }
.adm-team-profile__photo--placeholder { display:flex; align-items:center; justify-content:center; font-size:var(--font-size-5xl); font-weight:500; color:var(--color-text-muted); }
.adm-team-profile__socials { display:flex; gap:var(--space-3); }
.adm-team-profile__social { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius-lg); border:1px solid var(--color-border); background:var(--color-bg); color:var(--color-text); font-size:1.25rem; transition:background var(--duration-fast) ease, color var(--duration-fast) ease; }
.adm-team-profile__social:hover { background:var(--color-brand); color:#fff; border-color:var(--color-brand); }
.adm-team-profile__eyebrow { display:inline-block; font-size:var(--font-size-sm); letter-spacing:.08em; text-transform:uppercase; color:var(--color-brand); font-weight:500; margin-bottom:var(--space-3); }
.adm-team-profile__name { font-size:clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl)); font-weight:500; line-height:1.05; margin:0 0 var(--space-2); }
.adm-team-profile__role { font-size:var(--font-size-xl); color:var(--color-text-muted); margin:0 0 var(--space-6); }
.adm-team-profile__facts { list-style:none; margin:0 0 var(--space-8); padding:var(--space-5) 0; display:flex; gap:var(--space-8); flex-wrap:wrap; border-block:1px solid var(--color-border); }
.adm-team-profile__facts li { display:flex; flex-direction:column; gap:2px; }
.adm-team-profile__facts span { font-size:var(--font-size-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); }
.adm-team-profile__facts strong { font-size:var(--font-size-base); font-weight:500; }
.adm-team-profile__bio { font-size:var(--font-size-lg); line-height:1.6; margin-bottom:var(--space-8); max-width:60ch; }
.adm-team-profile__group { margin-bottom:var(--space-6); }
.adm-team-profile__group-title { font-size:var(--font-size-sm); text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); font-weight:500; margin:0 0 var(--space-3); }
.adm-team-profile__chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-2); }
.adm-team-profile__chips li { font-size:var(--font-size-sm); padding:var(--space-2) var(--space-4); border-radius:var(--radius-full); border:1px solid var(--color-border); background:var(--color-surface-2); color:var(--color-text); }
.adm-team-profile__chips--brand li { border-color:color-mix(in srgb, var(--color-brand) 30%, transparent); background:color-mix(in srgb, var(--color-brand) 8%, transparent); color:var(--color-brand); }
.adm-team-cta__inner { text-align:center; max-width:640px; margin-inline:auto; }
.adm-team-cta__title { font-size:var(--font-size-3xl); font-weight:500; margin:0 0 var(--space-3); }
.adm-team-cta__text { color:var(--color-text-muted); font-size:var(--font-size-lg); margin:0 0 var(--space-6); }
.adm-team-cta__actions { display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; }
@media (max-width: 860px) {
  .adm-team-profile__grid { grid-template-columns:1fr; gap:var(--space-8); }
  .adm-team-profile__media { position:static; max-width:320px; }
}

/* ============================================================
   Blog cards pagination (cards block, post source)
   ============================================================ */
.adm-cards-more { display:flex; flex-direction:column; align-items:center; gap:var(--space-4); margin-top:var(--space-10); }
.adm-cards-more__btn.is-loading { opacity:.6; pointer-events:none; }

/* Optional newsletter band under a cards block (toggle: show_newsletter). */
.adm-cards-newsletter { display:flex; align-items:center; justify-content:space-between; gap:var(--space-8) var(--space-12); flex-wrap:wrap; margin-top:var(--space-12); padding:clamp(var(--space-6),4vw,var(--space-10)); border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface-1); }
.adm-cards-newsletter__copy { flex:1 1 320px; min-width:min(100%,320px); }
.adm-cards-newsletter__title { font-size:var(--font-size-2xl); font-weight:500; margin:var(--space-2) 0 var(--space-2); }
.adm-cards-newsletter__text { color:var(--color-text-muted); margin:0; max-width:52ch; }
.adm-cards-newsletter__form { flex:1 1 360px; display:flex; gap:var(--space-3); flex-wrap:wrap; }
.adm-cards-newsletter__form input[type="email"] { flex:1 1 220px; min-width:0; padding:var(--space-3) var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); color:var(--color-text); font-size:var(--font-size-base); }
.adm-cards-newsletter__form .adm-newsletter-hp { position:absolute; left:-9999px; width:1px; height:1px; }
/* CF7 newsletter (#18180): email + Subscribe share one row — space them, and the consent line. */
.adm-cards-newsletter__form .adm-form__row { display:flex; flex-direction:column; gap:var(--space-3); }
.adm-cards-newsletter__form .adm-form__consent { margin-top:var(--space-3); }
.adm-cards-more__sentinel { width:100%; height:1px; }
.adm-cards-more__status { font-size:var(--font-size-sm); color:var(--color-text-muted); min-height:1.2em; }
.adm-cards-more__pages { display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:center; }
.adm-cards-more__page { min-width:44px; height:44px; padding:0 var(--space-3); border-radius:var(--radius-md); border:1px solid var(--color-border); background:var(--color-bg); color:var(--color-text); font-size:var(--font-size-sm); font-weight:500; cursor:pointer; transition:background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.adm-cards-more__page:hover { border-color:var(--color-brand); color:var(--color-brand); }
.adm-cards-more__page.is-active { background:var(--color-brand); border-color:var(--color-brand); color:#fff; }
.adm-cards-more__page[disabled] { opacity:.4; pointer-events:none; }
.adm-cards-more__nav { font-size:1.25rem; line-height:1; }
.adm-cards-more__ellipsis { min-width:32px; height:44px; display:inline-flex; align-items:flex-end; justify-content:center; padding-bottom:var(--space-2); color:var(--color-text-muted); user-select:none; }

/* ============================================================
   Single blog post — editorial layout (single.php)
   ============================================================ */
.adm-post { padding-block: 0 var(--space-16); }
.adm-post .container { max-width: 1120px; }

/* Top band — soft gradient mesh on a light base; the hero image straddles its bottom edge. */
/* Rounded glass-refraction hero card — full-width (breaks out of the reading container), with small
   page gutters and a wide cap; the article/sidebar below stay in the narrow .container.
   Bottom padding is an EMPTY straddle allowance the featured image overlaps into; keep the hero's
   negative margin <= this so the image never covers the title. */
/* Hero band = full width; featured image = content width (matches the reading container below). */
/* Match the site's full-width rounded card (.adm-section--card): 8px gutter, 20px radius. */
.adm-post__top { max-width: calc(100% - 16px); margin: var(--space-6) auto 0; border: 1px solid var(--color-border); border-radius: 20px; padding: var(--space-16) var(--space-8) 150px; overflow: hidden; }
/* The rounded card is baked into the base class above, so turning it off needs an explicit flat
   modifier (ADM Control → Blog post → Hero → "Rounded card container"). Required for "sit behind
   header": an inset, bordered, floating card cannot tuck under the header. */
.adm-post__top--flat { max-width: none; margin-top: 0; margin-inline: 0; border: 0; border-radius: 0; }
.adm-post .adm-post__top--h-compact { margin-top: 0; }
.adm-post__top > .adm-post__head { position: relative; z-index: 2; }  /* above the glass layers */
.adm-post__top > .container { position: relative; z-index: 2; }  /* archive heads sit inside .container — keep above the glass layers */
.adm-post__hero.adm-post__hero--overlap { width: calc(100% - 2 * var(--space-6)); max-width: 1120px; margin-inline: auto; margin-top: -120px; position: relative; z-index: 1; }

/* Header — centred */
/* Contain the head like the rest of the site (max-width + side padding) so a left-aligned hero
   sits at the container edge, not flush against the viewport ("full-bleed left"). */
.adm-post__head { max-width: 1264px; margin-inline: auto; padding-inline: clamp(var(--space-5), 5vw, 72px); box-sizing: border-box; text-align: center; }
/* When the section's container is set to "full", the head should span with the band instead of
   staying capped at the readable 1264px column (fixes the full-bleed band / boxed-heading mismatch). */
.adm-post__head.container--full { max-width: none; }
/* Mobile: drop the head's own inline padding. It sat on top of .adm-post__top's 32px, so the title
   was inset 52px each side — only 286px of usable width on a 390px screen. The parent keeps
   providing the gutter. */
@media (max-width: 768px) {
  .adm-post__head { padding-inline: 0; }
}
/* Category chip — a branded pill, not a plain link. */
.adm-post__eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:var(--font-size-sm); font-weight:500; letter-spacing:.02em; color:var(--color-brand); text-decoration:none; margin-bottom:var(--space-5); padding:6px 14px; border-radius:var(--radius-full, 999px); background:color-mix(in srgb, var(--color-brand) 10%, transparent); border:1px solid color-mix(in srgb, var(--color-brand) 22%, transparent); transition:background var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.adm-post__eyebrow::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--color-brand); flex:none; }
.adm-post__eyebrow:hover { text-decoration:none; background:color-mix(in srgb, var(--color-brand) 18%, transparent); border-color:color-mix(in srgb, var(--color-brand) 40%, transparent); }
.adm-post__title { font-size:clamp(var(--font-size-4xl), 4.8vw, var(--font-size-6xl)); font-weight:400; line-height:1.1; text-wrap:balance; margin:0 0 var(--space-4); }
/* Hero alignment control (post_hero_align) drives text alignment; default is centre.
   Left/right keep the content-width cap (margin-inline:auto) so the header matches the featured image. */
.adm-post__head--a-left { text-align:left; }
.adm-post__head--a-right { text-align:right; }
.adm-post__deck { font-size:var(--font-size-lg); line-height:1.6; color:var(--color-text); margin:0; }
.adm-cs-single__logo { margin-top:var(--space-5); }
.adm-cs-single__logo img { max-height:52px; width:auto; }

/* Hero image */
.adm-post__hero { margin:0; }
.adm-post__hero-img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-xl); border:1px solid var(--color-border); box-shadow:var(--shadow-lg); }

/* Author + share bar */
.adm-post__meta { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin:var(--space-6) 0 var(--space-10); padding-block:var(--space-5); border-block:1px solid var(--color-border); }
/* Meta bar under the title (in the hero card): centred, no dividers. */
.adm-post__meta--head { justify-content:center; gap:var(--space-6); margin:var(--space-8) 0 0; padding-block:0; border-block:0; }
.adm-post__author { display:flex; align-items:center; gap:var(--space-3); text-align:left; }
.adm-post__avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.adm-post__byline { display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.adm-post__author-name { font-weight:500; color:var(--color-text); }
.adm-post__author-meta { font-size:var(--font-size-sm); color:var(--color-text); }
/* Rich author byline: larger photo, role, short bio + profile link. Spans the full head width
   (same as the featured image below it), left-aligned. */
.adm-post__author--rich { align-items:flex-start; gap:var(--space-4); justify-content:flex-start; width:100%; box-sizing:border-box; background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); }
[data-theme="dark"] .adm-post__author--rich { background:var(--color-surface-1); }
.adm-post__author--rich .adm-post__byline { flex:1 1 auto; min-width:0; }
.adm-post__author--rich .adm-post__avatar { width:64px; height:64px; flex:0 0 auto; }
.adm-post__author-role { font-size:var(--font-size-sm); color:var(--color-brand); font-weight:500; }
.adm-post__author-bio { margin:var(--space-2) 0 0; font-size:var(--font-size-sm); line-height:1.55; color:var(--color-text-secondary); max-width:none; }
.adm-post__author-link { display:inline-flex; align-items:center; gap:.4em; margin-top:var(--space-2); font-size:var(--font-size-sm); font-weight:500; color:var(--color-brand); text-decoration:none; }
.adm-post__author-link:hover { text-decoration:underline; }
/* Profile link + social icons on one row. The link keeps its own margin-top, so the row itself has none
   — otherwise the two stack up and the gap doubles. */
.adm-post__author-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-4); }
.adm-post__author-socials { display:inline-flex; align-items:center; gap:var(--space-2); margin-top:var(--space-2); }
.adm-post__author-social {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  color:var(--color-text-secondary);
  border:1px solid var(--color-border);
  text-decoration:none;
  transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
.adm-post__author-social:hover,
.adm-post__author-social:focus-visible { color:var(--color-brand); border-color:var(--color-border-brand, var(--color-brand)); background:var(--color-brand-dim); }
.adm-post__author-social i { font-size:15px; line-height:1; }
@media (max-width: 600px) { .adm-post__author-actions { gap:var(--space-3); } }
/* Share bar — sits beneath the featured image, right-aligned, above the article. */
.adm-post__share-row { display:flex; margin:var(--space-8) 0 var(--space-4); padding-bottom:var(--space-6); border-bottom:1px solid var(--color-border); }
.adm-post__share { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex:1 1 auto; flex-wrap:wrap; }
.adm-post__share-meta { font-family:var(--font-mono); font-size:var(--font-size-sm); color:var(--color-text-muted); letter-spacing:.01em; }
.adm-post__share-btns { display:flex; align-items:center; gap:var(--space-2); }
.adm-post__share-btn { display:inline-flex; align-items:center; gap:var(--space-2); height:40px; padding:0 var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); color:var(--color-text); font-size:var(--font-size-sm); font-weight:500; cursor:pointer; text-decoration:none; transition:background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease; }
.adm-post__share-btn--icon { padding:0; width:40px; justify-content:center; font-size:1.1rem; }
.adm-post__share-btn:hover { border-color:var(--color-brand); color:var(--color-brand); }
.adm-post__share-btn.is-copied { border-color:var(--color-brand); color:var(--color-brand); }

/* Summarise-with-AI box at the top of the article. */
.adm-post__ai { display:block; margin:0 0 var(--space-8); padding:var(--space-5) var(--space-6); border:1px solid var(--color-border); border-radius:var(--radius-xl); background:linear-gradient(150deg, color-mix(in srgb, var(--color-brand) 6%, var(--color-surface-1)) 0%, var(--color-surface-1) 70%); }
.adm-post__ai-title { display:flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:var(--font-size-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted); margin:0 0 var(--space-4); }
.adm-post__ai-title svg { width:1.15em; height:1.15em; color:var(--color-brand); }
.adm-post__ai-btns { display:flex; flex-wrap:wrap; gap:var(--space-3); }
/* Scoped + specific so the theme's `.prose a` (magenta + underline) can't bleed into these buttons. */
.adm-post__ai .adm-post__ai-btn { display:inline-flex; align-items:center; gap:.5em; padding:.55em 1.1em; border:1px solid var(--color-border); border-radius:var(--radius-full,999px); background:var(--color-surface-1); color:var(--color-text) !important; font-size:var(--font-size-sm); font-weight:500; text-decoration:none !important; box-shadow:none; transition:border-color var(--duration-fast) ease, background var(--duration-fast) ease; }
/* Hover/focus stay neutral & identical across all three — subtle surface tint only.
   No magenta border, no offset outline, no downward shadow (those read as "broken/selected"). */
.adm-post__ai .adm-post__ai-btn:hover { border-color:var(--color-border); color:var(--color-text) !important; background:var(--color-surface-2); box-shadow:none; transform:none; }
.adm-post__ai .adm-post__ai-btn:focus-visible { outline:none; border-color:var(--color-border); box-shadow:0 0 0 2px color-mix(in srgb, var(--color-brand) 30%, transparent); }
.adm-post__ai-btn .adm-post__ai-logo { width:18px; height:18px; flex:0 0 18px; }

/* Two-column body */
.adm-post__layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:var(--space-12); align-items:start; }
.adm-post__sidebar { position:sticky; top:var(--space-12); display:flex; flex-direction:column; gap:var(--space-8); }

/* Sidebar search */
.adm-post__search { position:relative; }
.adm-post__search-ic { position:absolute; left:14px; top:0; bottom:0; display:flex; align-items:center; color:var(--color-text-muted); font-size:1.05rem; line-height:1; pointer-events:none; }
.adm-post__search input[type="search"] { width:100%; height:46px; padding:0 16px 0 44px; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); color:var(--color-text); font:inherit; font-size:var(--font-size-sm); box-sizing:border-box; -webkit-appearance:none; appearance:none; }
.adm-post__search input[type="search"]::-webkit-search-decoration, .adm-post__search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; }
.adm-post__search input[type="search"]:focus { outline:none; border-color:var(--color-brand); }

/* Table of contents */
.adm-post__toc-title { display:block; font-size:var(--font-size-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); font-weight:500; margin-bottom:var(--space-3); }
.adm-post__toc-list { list-style:none; margin:0; padding:0; border-left:2px solid var(--color-border); }
.adm-post__toc-list li { margin:0; }
.adm-post__toc-list a { display:block; padding:var(--space-2) var(--space-4); margin-left:-2px; border-left:2px solid transparent; font-size:var(--font-size-sm); line-height:1.4; color:var(--color-text-muted); text-decoration:none; transition:color var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.adm-post__toc-list a:hover { color:var(--color-text); }
.adm-post__toc-list a.is-active { color:var(--color-brand); border-left-color:var(--color-brand); font-weight:500; }
.adm-post__toc-list a.adm-post__toc-sub { padding-left:var(--space-6); font-size:var(--font-size-xs); }

/* Newsletter */
.adm-post__newsletter { padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface-2); }
/* Sidebar conversion CTA — sticky lead capture while reading. */
.adm-post__cta { margin-top:var(--space-5); padding:var(--space-6); border-radius:var(--radius-xl); background:linear-gradient(155deg, color-mix(in srgb, var(--color-brand) 12%, var(--color-surface-1)) 0%, var(--color-surface-1) 70%); border:1px solid color-mix(in srgb, var(--color-brand) 22%, var(--color-border)); }
.adm-post__cta-title { display:block; font-size:var(--font-size-lg); font-weight:500; color:var(--color-text); margin-bottom:var(--space-2); }
.adm-post__cta-text { margin:0 0 var(--space-4); font-size:var(--font-size-sm); line-height:1.5; color:var(--color-text-secondary); }
.adm-post__cta .btn { width:100%; justify-content:center; }
.adm-post__newsletter-title { display:block; font-weight:500; margin-bottom:var(--space-3); }
.adm-post__newsletter-form { display:flex; flex-direction:column; gap:var(--space-2); }
.adm-post__newsletter-form input { height:44px; padding:0 var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); color:var(--color-text); font:inherit; font-size:var(--font-size-sm); }
.adm-post__newsletter-form input:focus { outline:none; border-color:var(--color-brand); }
.adm-post__newsletter-form .btn { width:100%; justify-content:center; }

/* Article body / prose polish */
.adm-post__body { max-width:none; font-size:var(--font-size-lg); line-height:1.7; color:var(--color-text); }
/* Descendant (not just direct-child) so headings nested inside imported CTA/whitepaper blocks are
   also tamed — otherwise they fall back to the huge global h2 size. */
.adm-post__body h2 { font-size:var(--font-size-xl); font-weight:500; line-height:1.3; margin:var(--space-10) 0 var(--space-3); scroll-margin-top:120px; }
.adm-post__body h3 { font-size:var(--font-size-lg); font-weight:500; line-height:1.35; margin:var(--space-8) 0 var(--space-3); scroll-margin-top:120px; }
.adm-post__body h1 { font-size:var(--font-size-2xl); font-weight:500; line-height:1.25; margin:var(--space-10) 0 var(--space-3); }
.adm-post__body h4 { font-size:var(--font-size-base); font-weight:600; margin:var(--space-6) 0 var(--space-2); }
/* ── Normalise legacy/imported CTA blocks in blog content (old Bootstrap-era classes) ── */
.adm-post__body .cta-gradient { padding:clamp(var(--space-6),4vw,var(--space-10)); border-radius:var(--radius-xl); background-size:cover !important; background-position:center !important; overflow:hidden; margin:var(--space-8) 0; }
.adm-post__body .cta-gradient, .adm-post__body .cta-gradient *, .adm-post__body .text-white, .adm-post__body .text-white * { color:#fff !important; }
.adm-post__body .cta-gradient h2, .adm-post__body .cta-gradient h3 { margin-top:0; }
.adm-post__body .guide-form { padding:clamp(var(--space-6),4vw,var(--space-8)); border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface-2); margin:var(--space-8) 0; }
.adm-post__body .guide-form > h2:first-child, .adm-post__body .cta-gradient > h2:first-child, .adm-post__body .cta-gradient > h3:first-child { margin-top:0; }
.adm-post__body .p-4 { padding:clamp(var(--space-6),4vw,var(--space-8)); }
.adm-post__body .my-3 { margin-block:var(--space-8); }
/* Legacy .btn-primary (single-hyphen) → clean pill that reads on the gradient. */
.adm-post__body a.btn-primary:not(.btn--primary) { display:inline-flex; align-items:center; gap:.4em; padding:.7em 1.5em; border-radius:var(--radius-full,999px); background:#fff !important; color:var(--color-brand) !important; font-weight:500; text-decoration:none; }
.adm-post__body a.btn-primary:not(.btn--primary):hover { background:rgba(255,255,255,.88) !important; }
.adm-post__body p { margin:0 0 var(--space-5); }
/* House style: no bold. Imported content uses <b>/<span> at 700 and inline 600/700 for
   emphasis and pseudo-subheadings — pull all of it down to medium (500) across every post. */
.adm-post__body strong, .adm-post__body b, .adm-post__body b span, .adm-post__body strong span { font-weight:500; }
.adm-post__body [style*="font-weight: 700"], .adm-post__body [style*="font-weight:700"],
.adm-post__body [style*="font-weight: 600"], .adm-post__body [style*="font-weight:600"],
.adm-post__body [style*="font-weight: bold"], .adm-post__body [style*="font-weight:bold"] { font-weight:500 !important; }
.adm-post__body a { color:var(--color-brand); text-decoration:underline; text-underline-offset:2px; }
.adm-post__body ul, .adm-post__body ol { margin:0 0 var(--space-5) var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); }
.adm-post__body img { width:100%; height:auto; border-radius:var(--radius-xl); border:1px solid var(--color-border); margin:var(--space-6) 0; }
.adm-post__body figure { margin:var(--space-6) 0; }
.adm-post__body figcaption { font-size:var(--font-size-sm); color:var(--color-text-muted); text-align:center; margin-top:var(--space-2); }
.adm-post__body blockquote { margin:var(--space-6) 0; padding:var(--space-2) 0 var(--space-2) var(--space-6); border-left:3px solid var(--color-brand); font-size:var(--font-size-xl); line-height:1.5; font-weight:500; color:var(--color-text); }
.adm-post__faqs { margin-top:var(--space-12); }
.adm-post__faqs > h2 { font-size:var(--font-size-2xl); font-weight:500; margin-bottom:var(--space-6); }

/* Article tags */
.adm-post__tags { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-top:var(--space-10); padding-top:var(--space-6); border-top:1px solid var(--color-border); }
.adm-post__tags-label { font-size:var(--font-size-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); font-weight:500; margin-right:var(--space-2); }
.adm-post__tag { display:inline-flex; align-items:center; font-size:var(--font-size-sm); padding:var(--space-2) var(--space-4); border-radius:var(--radius-full); border:1px solid var(--color-border); background:var(--color-surface-2); color:var(--color-text); text-decoration:none; transition:background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.adm-post__tag:hover { border-color:var(--color-brand); background:color-mix(in srgb, var(--color-brand) 8%, transparent); color:var(--color-brand); }

/* Prev / next — with featured images */
.adm-post__nav { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); margin-top:var(--space-16); padding-top:var(--space-8); border-top:1px solid var(--color-border); }
.adm-post__nav-link { display:flex; align-items:center; gap:var(--space-4); text-decoration:none; color:var(--color-text); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-3); transition:border-color var(--duration-fast) ease, background var(--duration-fast) ease; }
.adm-post__nav-link:hover { border-color:var(--color-brand); background:var(--color-surface-2); }
.adm-post__nav-cell--next .adm-post__nav-link { text-align:right; }
.adm-post__nav-thumb { flex:0 0 84px; }
.adm-post__nav-thumb img { display:block; width:84px; height:64px; object-fit:cover; border-radius:var(--radius-md); }
.adm-post__nav-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-1); }
.adm-post__nav-label { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--font-size-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); }
.adm-post__nav-cell--next .adm-post__nav-label { flex-direction:row-reverse; align-self:flex-end; }
.adm-post__nav-title { font-size:var(--font-size-base); font-weight:500; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.adm-post__nav-link:hover .adm-post__nav-title { color:var(--color-brand); }

@media (max-width: 900px) {
  .adm-post__layout { grid-template-columns:1fr; gap:var(--space-8); }
  .adm-post__sidebar { position:static; order:2; }
  .adm-post__body { order:1; }
  .adm-post__toc { display:none; } /* TOC is desktop-only; on mobile it's noise */
  .adm-post__nav { grid-template-columns:1fr; }
  .adm-post__nav-cell--next .adm-post__nav-link { text-align:left; flex-direction:row-reverse; }
  .adm-post__nav-cell--next .adm-post__nav-label { flex-direction:row; align-self:flex-start; }
}

/* ============================================================
   Legacy imported-content styling — maps old Bootstrap/theme classes in blog post bodies
   (single.php .adm-post__body) to the ADM brand. Fixes ~235 posts at once with no content edits.
   Stylesheet !important beats the non-important inline styles the old CMS left behind.
   ============================================================ */
/* Old "Book A Meeting" CTA box */
.adm-post__body .cta-gradient {
  background: linear-gradient(120deg, var(--color-brand) 0%, #ff6a3d 100%) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-8) !important;
  margin: var(--space-8) 0 !important;
}
.adm-post__body .cta-gradient .d-lg-flex { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; }
.adm-post__body .cta-gradient h2, .adm-post__body .cta-gradient .cta-header { color:#fff !important; margin:0; font-size:var(--font-size-2xl); font-weight:500; line-height:1.15; }
.adm-post__body .cta-gradient .text-yellow { color:#ffd400 !important; }
.adm-post__body .cta-gradient .btn, .adm-post__body .cta-gradient .btn-primary, .adm-post__body .cta-gradient a.text-black {
  display:inline-flex; align-items:center; background:#fff !important; color:var(--color-brand) !important;
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-lg); font-weight:500; text-decoration:none; white-space:nowrap; border:0;
}
.adm-post__body .cta-gradient .btn:hover, .adm-post__body .cta-gradient .btn-primary:hover { background:#0a0a0a !important; color:#fff !important; }

/* Generic legacy utility classes that may appear in body copy */
.adm-post__body .d-lg-flex, .adm-post__body .d-flex { display:flex; gap:var(--space-4); flex-wrap:wrap; }
.adm-post__body .text-center { text-align:center; }

/* Tables in imported content (~150 posts) */
.adm-post__body table { width:100%; border-collapse:collapse; margin:var(--space-6) 0; font-size:var(--font-size-base); display:block; overflow-x:auto; }
.adm-post__body table th, .adm-post__body table td { border:1px solid var(--color-border); padding:var(--space-3) var(--space-4); text-align:left; vertical-align:top; }
.adm-post__body table th { background:var(--color-surface-2); font-weight:500; }
.adm-post__body table tr:nth-child(even) td { background:color-mix(in srgb, var(--color-surface-2) 45%, transparent); }

/* Embeds (iframes / videos) responsive */
.adm-post__body iframe, .adm-post__body video { max-width:100%; border:0; border-radius:var(--radius-lg); }
.adm-post__body .wp-video, .adm-post__body .wp-block-embed { max-width:100%; margin:var(--space-6) 0; }

/* ============================================================
   Blog archive (archive.php) — matches /insights/ layout
   ============================================================ */
.adm-post-archive { padding-block: 0 var(--space-16); }
.adm-post-archive .container:not(.container--full):not(.container--wide):not(.container--narrow) { max-width: 1120px; }
.adm-post-archive__body { padding-top: var(--space-12); }
.adm-post-archive__body--sectioned { padding-top: 0; }        /* section wrapper (archive-works) already supplies vertical spacing */

.adm-404 { min-height: 60vh; display: flex; align-items: center; }   /* 404 vertical-centre (was inline) */

/* ── Static-section card-colour controls (ADM Control → Static Sections: team articles + case-study archive) ── */
.adm-card--bg-white   { background: #fff; }
.adm-card--bg-glass   { background: var(--glass-bg-strong); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
.adm-card--bg-dark    { background: var(--color-ink, #0a0a0a); border-color: rgba(255,255,255,.12); }
.adm-card--bg-black   { background: #000; border-color: rgba(255,255,255,.12); }
.adm-card--bg-magenta { background: var(--color-brand, #e5006d); border-color: transparent; }
.adm-card--bg-dark, .adm-card--bg-black, .adm-card--bg-magenta { color: #fff; }
:is(.adm-card--bg-dark, .adm-card--bg-black, .adm-card--bg-magenta) :is(.adm-card__title, .adm-card__text, .adm-card__date, .adm-card__meta, .adm-card__tag, .adm-card__link, .cs-card__title, .cs-card__excerpt, .cs-card__meta) { color: #fff; }
:is(.adm-card--bg-dark, .adm-card--bg-black, .adm-card--bg-magenta) .adm-card__date { opacity: .8; }
.adm-post__eyebrow--static { cursor: default; }               /* archive eyebrow is a label, not a link */
.adm-post__eyebrow--static:hover { text-decoration: none; }
.adm-post-archive__empty { text-align: center; color: var(--color-text-muted); padding: var(--space-12) 0; }
/* Numbered pagination — same pill look as the Insights pager (.adm-cards-more__page) */
.adm-post-archive__pager { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-12); }
.adm-post-archive__pager .page-numbers { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-size: var(--font-size-sm); font-weight: 500; text-decoration: none; transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.adm-post-archive__pager a.page-numbers:hover { border-color: var(--color-brand); color: var(--color-brand); }
.adm-post-archive__pager .page-numbers.current { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.adm-post-archive__pager .page-numbers.dots { border: 0; background: transparent; min-width: 24px; color: var(--color-text-muted); }

/* ============================================================
   Awards page (page-awards.php) — sticky event rail + year wins
   ============================================================ */
.adm-awardspage { padding-block: 0 var(--space-16); }
.adm-awards { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--space-12); align-items: start; padding-top: var(--space-12); }
.adm-awards__rail { position: sticky; top: var(--space-12); display: flex; flex-direction: column; gap: var(--space-3); }
.adm-awards__rail-title { font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.adm-awards__rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--color-border); }
.adm-awards__rail-link { display: block; padding: 8px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--color-text-muted); text-decoration: none; font-size: var(--font-size-sm); line-height: 1.3; transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.adm-awards__rail-link:hover { color: var(--color-text); }
.adm-awards__rail-link.is-active { color: var(--color-brand); border-left-color: var(--color-brand); font-weight: 500; }
.adm-awards__list { display: flex; flex-direction: column; gap: var(--space-8); }
.adm-awards__event { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); scroll-margin-top: 100px; }
.adm-awards__event-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.adm-awards__event-logo { flex: 0 0 auto; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.adm-awards__event-img { max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.adm-awards__event-title { font-size: var(--font-size-xl); font-weight: 500; margin: 0; }
.adm-awards__years { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-5); }
.adm-awards__win { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.adm-awards__win-logo { display: flex; align-items: center; justify-content: center; height: 140px; padding: var(--space-5); background: var(--color-surface-2); border-radius: var(--radius-md); }
.adm-awards__win-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.adm-awards__win-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.adm-awards__win-badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-full, 999px); margin-bottom: 4px; background: var(--color-brand-dim, rgba(229,0,109,.1)); color: var(--color-brand); }
.adm-awards__win-badge--finalist, .adm-awards__win-badge--shortlisted, .adm-awards__win-badge--ranked { background: var(--color-surface-2, #f0f0f2); color: var(--color-text-secondary); }
.adm-awards__win-title { font-size: var(--font-size-lg); font-weight: 500; line-height: 1.25; color: var(--color-text); }
.adm-awards__win-sub { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.adm-awards__win-inner { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; text-decoration: none; color: inherit; }
.adm-awards__win-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium, 500); color: var(--color-brand); }
.adm-awards__win--link { transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease; }
.adm-awards__win--link:hover { border-color: color-mix(in srgb, var(--color-brand) 45%, transparent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.adm-awards__stats { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center; margin-top: var(--space-6); }
.adm-post__head--a-left .adm-awards__stats  { justify-content: flex-start; }   /* stats follow hero alignment */
.adm-post__head--a-right .adm-awards__stats { justify-content: flex-end; }
.adm-awards__stat { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.adm-awards__stat strong { color: var(--color-brand); font-weight: 600; }
@media (max-width: 860px) {
  .adm-awards { grid-template-columns: 1fr; }
  .adm-awards__rail { position: static; }
  .adm-awards__rail-list { flex-direction: row; flex-wrap: wrap; border-left: 0; }
  .adm-awards__rail-link { border-left: 0; border: 1px solid var(--color-border); border-radius: 999px; margin: 0; }
  .adm-awards__rail-link.is-active { border-color: var(--color-brand); }
}

/* Proof / case-study archive follows the services-hub hero: left-aligned, solid content-colour heading (no gradient sweep). */
.adm-post-archive--works .adm-post__title { background: none; background-image: none; -webkit-text-fill-color: var(--color-text); color: var(--color-text); animation: none; }
.adm-post-archive--works .adm-card-filters { justify-content: flex-start; }

/* ── Single vacancy (careers) ───────────────────────────────────────────── */
.adm-vacancy-hero .adm-vacancy__inner { max-width: 900px; }
.adm-vacancy-hero .section-header__title { margin-top: var(--space-2); }
.adm-vacancy__deck { font-size: var(--font-size-lg); color: var(--color-text-secondary); max-width: 60ch; margin-top: var(--space-4); }
/* Meta chips (hero) */
.adm-vacancy__chips { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.adm-vacancy__chips li { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--glass-bg-strong, var(--color-surface-1)); backdrop-filter: blur(8px); font-size: var(--font-size-sm); font-weight: 500; }
.adm-vacancy__chips .adm-vacancy__chip-k { font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.adm-vacancy__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
/* Two-column body */
.adm-vacancy__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-12); align-items: start; }
.adm-vacancy__main .prose { max-width: 68ch; }
.adm-vacancy__aside { position: sticky; top: calc(var(--header-height, 88px) + var(--space-6)); display: flex; flex-direction: column; gap: var(--space-5); }
.adm-vacancy__card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-1); padding: var(--space-8); }
.adm-vacancy__summary h2 { font-size: var(--font-size-base); font-weight: 500; margin: 0 0 var(--space-5); }
.adm-vacancy__summary dl { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0; }
.adm-vacancy__summary dt { font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin: 0; }
.adm-vacancy__summary dd { margin: 2px 0 0; font-weight: 500; color: var(--color-text); }
.adm-vacancy__summary .btn { width: 100%; justify-content: center; margin-top: var(--space-6); }
.adm-vacancy__back { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); text-decoration: none; }
.adm-vacancy__back:hover { color: var(--color-brand); }
/* Newsletter card (sidebar) */
.adm-vacancy__news h3 { font-size: var(--font-size-base); font-weight: 500; margin: 0 0 var(--space-2); }
.adm-vacancy__news p { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-4); }
.adm-vacancy__news .wpcf7-form-control-wrap, .adm-vacancy__news input[type="email"] { width: 100%; }
/* The imported newsletter form stacks input, submit and consent with no separation, so the button
   sat flush against the field. Space the form's own children rather than the individual controls,
   so it holds regardless of how the CF7 markup is nested. */
.adm-vacancy__news form { display: flex; flex-direction: column; gap: var(--space-3); }
.adm-vacancy__news form p { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.adm-vacancy__news .wpcf7-submit { width: 100%; }
/* Apply section — divider at top, content-left (sticky) / form-right */
.adm-vacancy__apply { border-top: 1px solid var(--color-border); }
.adm-vacancy__apply-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.adm-vacancy__apply-copy { position: sticky; top: calc(var(--header-height, 88px) + var(--space-6)); }
.adm-vacancy__apply-copy .section-header__desc { margin-top: var(--space-4); }
.adm-vacancy__form { margin: 0; }
/* Make every field fill the form container */
/* CF7 wraps every control in a <span>, which is display:inline — so `width` on it was simply
   ignored and the select/textarea sized to their own content (the textarea also carries cols="40").
   The wrap has to become a block before the 100% widths mean anything. */
.adm-vacancy__form .wpcf7-form-control-wrap { display: block; width: 100%; }
.adm-vacancy__form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .adm-vacancy__form select, .adm-vacancy__form textarea { width: 100%; max-width: 100%; }
@media (max-width: 920px) {
	.adm-vacancy__layout, .adm-vacancy__apply-grid { grid-template-columns: 1fr; gap: var(--space-8); }
	.adm-vacancy__aside, .adm-vacancy__apply-copy { position: static; }
}

/* ── HTML sitemap ── */
.adm-sitemap__intro { max-width: 760px; margin-bottom: var(--space-10); }
.adm-sitemap__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-8) var(--space-6); }
.adm-sitemap__h { font-size: var(--font-size-lg); font-weight: 500; margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.adm-sitemap__list, .adm-sitemap__sub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.adm-sitemap__sub { margin: var(--space-2) 0 var(--space-2) var(--space-4); padding-left: var(--space-4); border-left: 1px solid var(--color-border); }
.adm-sitemap__list a { color: var(--color-text); text-decoration: none; transition: color var(--duration-fast) ease; }
.adm-sitemap__list a:hover { color: var(--color-brand); }
.adm-sitemap__sep { font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-top: var(--space-4); }

/* ── Legal / terms document download list ── */
.adm-doc-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
/* Beat .prose ul/li defaults (disc bullets + left padding) when the list is inside rich content. */
.prose .adm-doc-list { padding-left: 0; list-style: none; }
.prose .adm-doc-list li { list-style: none; margin-bottom: 0; color: inherit; }
/* Belt & braces on top of the real fix: base.css now excludes .adm-doc-list__item from the .prose
   "chasing underline" treatment. This rule alone could NOT win — that selector carries three :not()
   parts, so it scores (0,4,1) and its padding-bottom:1px beat this rule's (0,3,1), squashing the
   tile's vertical padding. Specificity counts every :not() argument.
   Excluding the item from that rule also drops the `text-decoration:none` / brand colour it used to
   supply, so both are restated here — at (0,3,1) they beat the `.prose a` underline default. */
.prose .adm-doc-list a.adm-doc-list__item { padding: var(--space-5) var(--space-6); background-image: none; text-decoration: none; color: var(--color-brand); }
.prose .adm-doc-list a.adm-doc-list__item:hover { text-decoration: none; color: var(--color-brand); }
.adm-doc-list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-1); color: var(--color-text); text-decoration: none; font-weight: 500; transition: border-color var(--duration-fast) ease, transform var(--duration-fast) ease; }
/* The "PDF" tag: 2px/6px left the label touching its own border and read as squashed. Give it real
   padding and a set line-height so the tag is a consistent height regardless of the label font. */
.adm-doc-list__item::before { content: "PDF"; font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 600; letter-spacing: .06em; line-height: 1.5; color: var(--color-brand); border: 1px solid var(--color-brand); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); flex: none; }
.adm-doc-list__item:hover { border-color: var(--color-brand); transform: translateY(-1px); }
/* Legal prose: keep long policies readable + tables scrollable */
.prose p:empty { display: none; } /* drop stray empty <p> (ACF wysiwyg/wpautop) that add gaps in long content */
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0; font-size: var(--font-size-sm); }
.prose thead td, .prose tr:first-child td, .prose th { background: var(--color-surface-2); font-weight: 500; }
.prose th, .prose td { border: 1px solid var(--color-border); padding: var(--space-3); text-align: left; vertical-align: top; }
.prose td a { word-break: break-word; }
/* Long tables (e.g. cookie declaration) scroll horizontally on narrow viewports instead of forcing page overflow. */
@media (max-width: 720px) { .prose table { display: block; overflow-x: auto; white-space: normal; } }

/* Vacancy (careers) card meta line */
.adm-vacancy-card__meta { font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin: var(--space-1) 0 var(--space-3); }
.adm-card--vacancy { text-decoration: none; }

/* Cards block: CTA positioned after the intro — give it room above (from intro) and below (before cards). */
.adm-cards__intro-cta { margin-bottom: var(--space-10); }
.adm-cards__intro-cta .adm-block-cta { margin-top: var(--space-6); }

/* Feature grid card: explicit CTA button (card stays a div, not a whole-card link) */
.adm-feature__cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); align-self: flex-start; }

/* Hero heading → intro breathing room (homepage hero_home + hero_compact) */
.adm-hero-home__title + .adm-hero-home__content,
.adm-hero-home__sub + .adm-hero-home__content { margin-top: var(--space-6); }
.adm-hero-compact .section-header__title + .section-header__sub,
.adm-hero-compact .section-header__title + .section-header__desc,
.adm-hero-compact .section-header__sub + .section-header__desc { margin-top: var(--space-5); }

/* Minimal/flat blog hero image: centre it like the overlap variant (was left-aligned + overflowing). */
.adm-post__hero.adm-post__hero--flat { width: calc(100% - 2 * var(--space-6)); max-width: 1120px; margin-inline: auto; }

/* Home hero: vertical alignment of the left copy column (align-self within the split grid) + breadcrumbs */
.adm-hero-home__copy--v-top { align-self: flex-start; }
.adm-hero-home__copy--v-bottom { align-self: flex-end; }
.adm-hero-home__copy--v-center { align-self: center; }
.adm-hero-home__copy .adm-breadcrumbs { margin-bottom: var(--space-4); }

/* ─────────────────────────────────────────────────────────────────────────
   Team member profile — EEAT rebuild (single-team.php)
   ───────────────────────────────────────────────────────────────────────── */
.adm-team-hero { display:grid; grid-template-columns: 320px 1fr; gap: var(--space-12); align-items:center; }
.adm-team-hero__media { display:flex; flex-direction:column; gap:var(--space-4); }
.adm-team-hero__photo { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-xl); border:1px solid var(--color-border); box-shadow:var(--shadow-md); background:var(--color-surface-2); }
.adm-team-hero__photo--placeholder { display:flex; align-items:center; justify-content:center; font-size:var(--font-size-5xl); font-weight:500; color:var(--color-text-muted); }
.adm-team-hero__socials { display:flex; gap:var(--space-3); }
.adm-team-hero__social { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius-lg); border:1px solid var(--color-border); background:#ffffff; color:var(--color-text); font-size:1.25rem; transition:background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.adm-team-hero__social i { color:var(--color-text); }
.adm-team-hero__social:hover { background:var(--color-brand); border-color:var(--color-brand); }
.adm-team-hero__social:hover, .adm-team-hero__social:hover i, .adm-team-hero__social:hover svg { color:#ffffff !important; }
.adm-team-hero__name { font-size:clamp(var(--font-size-4xl), 5vw, var(--font-size-6xl)); font-weight:500; line-height:1.03; margin:var(--space-2) 0 var(--space-2); }
.adm-team-hero__role { font-size:var(--font-size-xl); color:var(--color-text); margin:0 0 var(--space-6); }
.adm-team-hero__stats { list-style:none; margin:0 0 var(--space-8); padding:var(--space-5) 0; display:flex; gap:var(--space-8); flex-wrap:wrap; border-block:1px solid var(--color-border); }
.adm-team-hero__stats li { display:flex; flex-direction:column; gap:2px; }
.adm-team-hero__stats strong { font-size:var(--font-size-2xl); font-weight:500; line-height:1; color:var(--color-brand); }
.adm-team-hero__stats span { font-size:var(--font-size-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--color-text); }
.adm-team-hero__ctas { display:flex; gap:var(--space-3); flex-wrap:wrap; }
/* When a hero pull-quote is set, the intro splits into body (left) + quote (right) to use the space. */
.adm-team-hero__intro--has-quote { display:grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: clamp(var(--space-12), 6vw, var(--space-20)); align-items:center; }
.adm-team-hero__quote { position:relative; margin:0; padding-left:var(--space-8); border-left:3px solid var(--color-brand); font-size:clamp(var(--font-size-xl), 1.9vw, var(--font-size-3xl)); line-height:1.4; font-weight:500; color:var(--color-text); }
.adm-team-hero__quote-mark { position:absolute; left:6px; top:-.35em; font-family:Georgia,'Times New Roman',serif; font-size:3.4em; line-height:1; color:color-mix(in srgb, var(--color-brand) 26%, transparent); pointer-events:none; }
@media (max-width: 980px) { .adm-team-hero__intro--has-quote { grid-template-columns:1fr; gap:var(--space-8); } }

/* Content blocks (experience / role / recognition / values) */
.adm-team-block__prose { font-size:var(--font-size-lg); line-height:1.7; margin-top:var(--space-6); }
.adm-team-block__brands { margin-top:var(--space-8); }
.adm-team-block__brands-label { display:block; font-size:var(--font-size-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); margin-bottom:var(--space-3); }

/* Shared chips */
.adm-team-chips { list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0; padding:0; }
.adm-team-chips li { padding:8px 16px; border-radius:var(--radius-full,999px); background:var(--color-surface-1); border:1px solid var(--color-border); font-size:var(--font-size-sm); }
.adm-team-chips--brand li { background:color-mix(in srgb, var(--color-brand) 10%, transparent); border-color:color-mix(in srgb, var(--color-brand) 22%, transparent); color:var(--color-brand); }

/* Expertise two-col — top-aligned panels, modest titles (NOT giant h2s) */
.adm-team-expertise .section-header { margin-bottom:var(--space-8); }
.adm-team-expertise__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-6); align-items:stretch; }
.adm-team-expertise__col { padding:clamp(var(--space-6),3vw,var(--space-8)); background:var(--color-surface-1); border:1px solid var(--color-border); border-radius:var(--radius-xl); }
.adm-team-expertise__title { font-size:var(--font-size-lg); font-weight:500; margin:0 0 var(--space-5); padding-bottom:var(--space-3); border-bottom:1px solid var(--color-border); color:var(--color-text); }
.adm-team-expertise__title::before { content:""; display:inline-block; width:8px; height:8px; border-radius:999px; background:var(--color-brand); margin-right:.6em; vertical-align:middle; }

/* Featured In logo strip */
.adm-team-featured__grid { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-8) var(--space-12); margin-top:var(--space-6); }
.adm-team-featured__item { display:inline-flex; align-items:center; }
.adm-team-featured__logo { max-height:38px; width:auto; opacity:.65; filter:grayscale(1); transition:opacity var(--duration-fast) ease, filter var(--duration-fast) ease; }
.adm-team-featured__item:hover .adm-team-featured__logo { opacity:1; filter:none; }
/* Featured-in / favourite-tools marquee. Height alone is the wrong control here: these are nearly all
   wordmarks (WordPress, Shopify, Mailchimp, Figma), so an 80px cap let them run enormously wide and
   they overpowered the section. Capped on both axes, a touch under the 60px client marquee, since a
   tool logo is a supporting detail rather than client proof.

   The width cap is deliberately loose. At 150px it became the binding constraint for the very wide
   wordmarks — Semrush and Employer News are roughly 8:1, so they were held to 19px tall next to a 44px
   Cision and read as broken. It is here as a backstop against one runaway logo, not as the sizing
   control; height should be what limits almost every logo. */
.adm-team-featured__marquee .adm-logos__img { max-height:44px; max-width:300px; width:auto; object-fit:contain; }
.adm-team-featured__marquee .adm-logos__item { padding-inline:var(--space-4); }
@media (max-width: 860px) {
  .adm-team-featured__marquee .adm-logos__img { max-height:34px; max-width:220px; }
}

/* Connect / closing CTA */
/* Connect CTA now reuses the .adm-cta / .adm-cta--form-split look; only the meta row is bespoke. */
.adm-team-connect__meta { display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-5); }
.adm-cta--form-split .adm-team-connect__meta { justify-content:flex-start; }
.adm-team-connect__role { font-family:var(--font-mono, monospace); font-size:var(--font-size-sm); letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-muted); }
.adm-team-connect__li { display:inline-flex; align-items:center; gap:.4em; font-weight:500; color:var(--color-brand); text-decoration:none; }
.adm-team-connect__li:hover { text-decoration:underline; }
.adm-team-connect__li svg { width:1.1em; height:1.1em; }

@media (max-width: 860px) {
  .adm-team-hero { grid-template-columns:1fr; gap:var(--space-8); }
  .adm-team-hero__media { max-width:280px; }
}

/* Testimonial CPT extras — LinkedIn + linked case study on cards */
.adm-tcard__links { display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--color-border); }
.adm-tcard__cs { font-size:var(--font-size-sm); font-weight:500; color:var(--color-brand); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.adm-tcard__cs:hover { text-decoration:underline; }
.adm-tcard__li, .adm-tspot__li { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-md,8px); border:1px solid var(--color-border); color:var(--color-text-muted); margin-left:auto; flex:none; transition:background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.adm-tcard__li:hover, .adm-tspot__li:hover { color:#fff; background:var(--color-brand); border-color:var(--color-brand); }
/* `.adm-section a:not(.btn)` is (0,2,1) and beat both rules above, so the icon rendered brand-magenta
   and stayed magenta on hover — magenta glyph on a magenta fill, i.e. invisible. Adding the element to
   the selector matches that specificity and wins on order. */
.adm-section a.adm-tcard__li, .adm-section a.adm-tspot__li { color:var(--color-text-muted); }
.adm-section a.adm-tcard__li:hover, .adm-section a.adm-tspot__li:hover { color:#fff; }
.adm-tspot__li { margin-top:var(--space-3); }

/* Hero intro/deck legibility on glass heroes (grey → ink) */
.adm-section--glass .adm-post__deck, .adm-awards-hero .adm-post__deck, .adm-section--glass .section-header__desc { color: var(--color-text); }

/* Team profile — wide image + text feature rows (Experience / Role / Recognition / Values) */
.adm-team-feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.adm-team-feature--rev .adm-team-feature__media { order: 2; }
.adm-team-feature__img { width: 100%; height: auto; border-radius: var(--radius-xl); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.adm-team-feature__body .section-header__title { margin: var(--space-2) 0 var(--space-4); }
.adm-team-feature__prose { font-size: var(--font-size-lg); line-height: 1.7; }
.adm-team-feature__brands { margin-top: var(--space-6); }
.adm-team-feature--noimg .adm-team-feature__grid { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }

/* ── Stat-led + pull-quote treatment ── */
.adm-team-feature__media { position: relative; }
/* Stat card floats over the supporting image (bottom, on the body-facing edge). */
.adm-team-feature__statcard {
  position: absolute; bottom: var(--space-5); left: var(--space-5);
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--color-surface-1); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg); backdrop-filter: blur(6px);
}
.adm-team-feature--rev .adm-team-feature__statcard { left: auto; right: var(--space-5); }
.adm-team-feature__statval { font-family: var(--font-mono, monospace); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: -.02em; color: var(--color-brand); }
.adm-team-feature__statlabel { font-size: var(--font-size-sm); color: var(--color-text-muted); max-width: 15ch; }
/* When there's no image, the stat becomes the whole media column as a big panel. */
.adm-team-feature__media--solostat { display: flex; }
.adm-team-feature__media--solostat .adm-team-feature__statcard {
  position: static; width: 100%; align-items: flex-start; gap: var(--space-2);
  padding: clamp(var(--space-8), 5vw, var(--space-12));
  background: linear-gradient(150deg, color-mix(in srgb, var(--color-brand) 8%, var(--color-surface-1)) 0%, var(--color-surface-1) 70%);
  backdrop-filter: none;
}
.adm-team-feature__media--solostat .adm-team-feature__statval { font-size: clamp(3rem, 6vw, 4.5rem); }
.adm-team-feature__media--solostat .adm-team-feature__statlabel { font-size: var(--font-size-base); max-width: 22ch; }
/* Pull-quote sits above the prose, with a magenta rule + oversized quote mark. */
.adm-team-feature__quote {
  position: relative; margin: 0 0 var(--space-5); padding: 0 0 0 var(--space-6);
  border-left: 3px solid var(--color-brand);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; font-weight: 500;
  color: var(--color-text);
}
.adm-team-feature__quote-mark { position: absolute; left: -2px; top: -.35em; font-size: 3.2em; line-height: 1; color: color-mix(in srgb, var(--color-brand) 30%, transparent); pointer-events: none; }
/* Chips → pills already; nudge the label. */
.adm-team-feature .adm-team-block__brands-label { display:block; font-size: var(--font-size-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-3); }

@media (max-width: 860px) {
  .adm-team-feature__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .adm-team-feature--rev .adm-team-feature__media { order: 0; }
  .adm-team-feature__statcard { bottom: var(--space-3); left: var(--space-3); padding: var(--space-3) var(--space-4); }
  .adm-team-feature--rev .adm-team-feature__statcard { right: var(--space-3); }
}

/* ── Case-study hero awards ───────────────────────────────────────────────────────────────────
   Built laurel badges for any award whose `client` points at this case study (see
   adm_award_entries_for_case_study()). Derived from the award record — there is no hero field.
   Centres under the H1 on the centered variant and sits left on the feature variant, matching the
   hero's own alignment rather than forcing its own. */
.adm-hero-compact__awards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: flex-start;
  margin-top: var(--space-5);
}
.adm-hero-compact--centered .adm-hero-compact__awards { justify-content: center; }
.adm-hero-compact--feature .adm-hero-compact__awards { justify-content: flex-start; }
/* Scale the shared wreath down to hero-supporting size (it is sized for the footer marquee). */
.adm-hero-compact__awards .adm-wreath { transform: scale(.82); transform-origin: top center; }
@media (max-width: 600px) {
  .adm-hero-compact__awards { gap: var(--space-4); }
  .adm-hero-compact__awards .adm-wreath { transform: scale(.72); }
}

/* ── The badge in the STAT's slot (feature variant, case study with an award) ──────────────────
   Mirrors .adm-hero-compact__stat's placement over the image so the award reads as the same
   overlay card the stat was, rather than a second element floating on the photo. Card chrome is
   pinned light, NOT taken from --color-surface-*: those are remapped per section background and
   configurable in ADM Control, which would tint a badge that has to sit legibly on a photo. */
.adm-hero-compact__awards--onmedia {
  position: absolute;
  z-index: 2;
  left: var(--space-8);
  bottom: var(--space-8);
  margin-top: 0;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, .10);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .45);
}
/* Strip the wreath's OWN card. .adm-wreath ships a full card in footer.css (surface-2 background,
   border, radius, space-5/6 padding) because it lives in the footer marquee — inside our overlay card
   that renders as a box in a box. The outer card is the container here, so the wreath is bare.
   Not a transform: scaling leaves the layout box at full size, which is what made the card huge. */
.adm-hero-compact__awards--onmedia .adm-wreath {
  transform: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
/* No size overrides at desktop on purpose — the wreath keeps its full footer.css sizing (38x92 laurels,
   66px logo, 15px stars, 11px caption). It only looked oversized while it carried its own card padding
   INSIDE this one; with that gone the full size sits correctly. */
/* ── Overhang: pull the overlay card out past the image's inner edge so it breaks the boundary between
   the copy and the media column, instead of sitting fully inside the photo. Applies to BOTH overlay
   cards — the award badge and the stat — since they occupy the same slot.
   Safe from clipping: .adm-hero-compact__media, the feature grid and .container are all
   overflow:visible, and the section's overflow:clip only bounds its OUTER edges while this pull points
   inward. Only .adm-hero-compact__img is overflow:hidden, and these cards are its siblings, not children.
   Tunable via --adm-hero-badge-overhang. */
.adm-hero-compact--feature .adm-hero-compact__media { --adm-hero-badge-overhang: var(--space-12); }
.adm-hero-compact--feature .adm-hero-compact__stat,
.adm-hero-compact--feature .adm-hero-compact__awards--onmedia {
  left: calc(var(--adm-hero-badge-overhang, var(--space-12)) * -1);
}
@media (max-width: 860px) {
  /* Stacked layout: the media column runs full-bleed, so an outward pull would hang off the viewport
     and cause horizontal scroll. Sit inside the image instead. */
  .adm-hero-compact--feature .adm-hero-compact__stat,
  .adm-hero-compact--feature .adm-hero-compact__awards--onmedia { left: var(--space-5); }
}

/* No image = nothing to overlay, so sit inline like the stat does in the same situation. */
.adm-hero-compact__media:not(:has(.adm-hero-compact__img)) .adm-hero-compact__awards--onmedia {
  position: static;
  display: inline-flex;
}
/* Phones only: the media column drops to 56vw tall, so ease the badge down a little there — enough that
   it does not cover the image, not the heavy reduction that desktop never needed. */
@media (max-width: 860px) {
  .adm-hero-compact__awards--onmedia { left: var(--space-5); bottom: var(--space-5); padding: var(--space-4) var(--space-5); }
  .adm-hero-compact__awards--onmedia .adm-wreath__core .adm-laurel { width: 30px; height: 72px; }
  .adm-hero-compact__awards--onmedia .adm-wreath__logo img { max-height: 52px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   TESTIMONIALS — card padding, quote size and card colour
   Modifiers live on the SECTION so they apply to both card markups: .adm-tspot__card (spotlight
   carousel) and .adm-tcard (cards/grid/pinned variants).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Padding. Roomy is the default (the old value was --space-6, which read as cramped). ── */
.adm-tmonials--pad-compact  .adm-tspot__card,
.adm-tmonials--pad-compact  .adm-tcard { padding: var(--space-5); }
.adm-tmonials--pad-standard .adm-tspot__card,
.adm-tmonials--pad-standard .adm-tcard { padding: var(--space-8); }
.adm-tmonials--pad-roomy    .adm-tspot__card,
.adm-tmonials--pad-roomy    .adm-tcard { padding: var(--space-10); }
.adm-tmonials--pad-xl       .adm-tspot__card,
.adm-tmonials--pad-xl       .adm-tcard { padding: var(--space-16); }
/* The spotlight card holds a full-height image, so keep its media flush while the copy gets the
   padding — otherwise XL padding shrinks the photo instead of giving the quote room. */
.adm-tmonials--pad-roomy .adm-tspot__card,
.adm-tmonials--pad-xl    .adm-tspot__card { gap: var(--space-10); }
@media (max-width: 860px) {
  .adm-tmonials--pad-roomy .adm-tspot__card, .adm-tmonials--pad-roomy .adm-tcard,
  .adm-tmonials--pad-xl    .adm-tspot__card, .adm-tmonials--pad-xl    .adm-tcard { padding: var(--space-6); }
}

/* ── Quote size. Fluid so a large/XL quote still fits a narrow column. ── */
.adm-tmonials--q-small  .adm-tspot__quote, .adm-tmonials--q-small  .adm-tcard__quote { font-size: var(--font-size-base); line-height: 1.6; }
.adm-tmonials--q-medium .adm-tspot__quote, .adm-tmonials--q-medium .adm-tcard__quote { font-size: var(--font-size-xl); line-height: 1.55; }
.adm-tmonials--q-large  .adm-tspot__quote, .adm-tmonials--q-large  .adm-tcard__quote { font-size: clamp(var(--font-size-xl), 2.4vw, var(--font-size-3xl)); line-height: 1.4; }
.adm-tmonials--q-xl     .adm-tspot__quote, .adm-tmonials--q-xl     .adm-tcard__quote { font-size: clamp(var(--font-size-2xl), 3.4vw, var(--font-size-5xl)); line-height: 1.25; letter-spacing: -.01em; }

/* ── Card colour. Remaps the tokens the card's own text reads from, so contrast follows the choice.
   Pinned literals, NOT --color-surface-*: those are section-remapped and ADM-Control-configurable,
   which is exactly what silently turned another card grey. ── */
.adm-tmonials--card-white   .adm-tspot__card, .adm-tmonials--card-white   .adm-tcard,
.adm-tmonials--card-light   .adm-tspot__card, .adm-tmonials--card-light   .adm-tcard,
.adm-tmonials--card-dark    .adm-tspot__card, .adm-tmonials--card-dark    .adm-tcard,
.adm-tmonials--card-black   .adm-tspot__card, .adm-tmonials--card-black   .adm-tcard,
.adm-tmonials--card-magenta .adm-tspot__card, .adm-tmonials--card-magenta .adm-tcard {
  background: var(--adm-tm-card-bg);
  border-color: var(--adm-tm-card-border);
  color: var(--color-text);
}
.adm-tmonials--card-white   .adm-tspot__card, .adm-tmonials--card-white   .adm-tcard { --adm-tm-card-bg:#ffffff; --adm-tm-card-border:rgba(0,0,0,.08); --color-text:#1a1a1a; --color-text-secondary:#6b6b6b; }
.adm-tmonials--card-light   .adm-tspot__card, .adm-tmonials--card-light   .adm-tcard { --adm-tm-card-bg:#f5f5f7; --adm-tm-card-border:rgba(0,0,0,.08); --color-text:#1a1a1a; --color-text-secondary:#5c5c66; }
.adm-tmonials--card-dark    .adm-tspot__card, .adm-tmonials--card-dark    .adm-tcard { --adm-tm-card-bg:#16161c; --adm-tm-card-border:rgba(255,255,255,.12); --color-text:#ffffff; --color-text-secondary:rgba(255,255,255,.72); }
.adm-tmonials--card-black   .adm-tspot__card, .adm-tmonials--card-black   .adm-tcard { --adm-tm-card-bg:#0a0a0a; --adm-tm-card-border:rgba(255,255,255,.10); --color-text:#ffffff; --color-text-secondary:rgba(255,255,255,.68); }
.adm-tmonials--card-magenta .adm-tspot__card, .adm-tmonials--card-magenta .adm-tcard { --adm-tm-card-bg:var(--color-brand); --adm-tm-card-border:rgba(255,255,255,.22); --color-text:#ffffff; --color-text-secondary:rgba(255,255,255,.85); }

/* The name and the opening quote mark use --color-brand, which is invisible on a magenta card and
   low-contrast on dark/black — pin them to the card's own text colour there. */
.adm-tmonials--card-magenta .adm-tspot__name, .adm-tmonials--card-magenta .adm-tcard__name,
.adm-tmonials--card-dark    .adm-tspot__name, .adm-tmonials--card-dark    .adm-tcard__name,
.adm-tmonials--card-black   .adm-tspot__name, .adm-tmonials--card-black   .adm-tcard__name { color: var(--color-text); }
.adm-tmonials--card-magenta .adm-tspot__quote::before { color: rgba(255,255,255,.9); }
/* Client logos are dark artwork — invert them on a dark/black/magenta card so they stay visible. */
.adm-tmonials--card-dark    .adm-tspot__logo, .adm-tmonials--card-black .adm-tspot__logo,
.adm-tmonials--card-magenta .adm-tspot__logo { filter: brightness(0) invert(1); }

/* ── Testimonials: honour the section's Content alignment ──────────────────────────────────────
   .adm-tcard and .adm-tspot__card both hardcode `text-align: left`. A value set ON an element always
   beats one inherited from an ancestor, so the section's .text-center / .text-right (emitted from the
   Content alignment control) could never reach the card — the setting looked broken.
   These rules are (0,2,0) so they out-rank the card's own (0,1,0) declaration.
   Both cards are flex columns, so align-items has to move too or the avatar, logo and CTA links stay
   pinned left even once the text centres. */
.text-center .adm-tcard,
.text-center .adm-tspot__card { text-align: center; }
.text-center .adm-tcard,
.text-center .adm-tspot__body { align-items: center; }
.text-center .adm-tspot__foot { align-items: center; }

.text-right .adm-tcard,
.text-right .adm-tspot__card { text-align: right; }
.text-right .adm-tcard,
.text-right .adm-tspot__body { align-items: flex-end; }
.text-right .adm-tspot__foot { align-items: flex-end; }

/* Two footer elements pin themselves and so ignore align-items on the column: the visit/case-study
   link sets its own align-self, and the LinkedIn icon uses margin-left:auto to sit hard right. Both
   have to be released for centre and right to look deliberate rather than half-applied. */
.text-center .adm-tspot__visit,
.text-center .adm-tcard__visit { align-self: center; }
.text-right  .adm-tspot__visit,
.text-right  .adm-tcard__visit { align-self: flex-end; }
.text-center .adm-tspot__li,
.text-center .adm-tcard__li,
.text-right  .adm-tspot__li,
.text-right  .adm-tcard__li { margin-left: 0; }
.text-center .adm-tspot__li,
.text-center .adm-tcard__li { align-self: center; }
.text-right  .adm-tspot__li,
.text-right  .adm-tcard__li { align-self: flex-end; }

/* The spotlight card is a ROW (media | body) — centring must not collapse that, so only the copy
   column's own cross-axis alignment changes, never the card's row layout. */
.text-center .adm-tspot__card,
.text-right  .adm-tspot__card { align-items: stretch; }
/* --single already centres itself; leave its explicit padding/gap intact. */

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   CONTENT ALIGNMENT — opt the remaining blocks in
   These all set `text-align` directly on an inner element, which beats the section's inherited
   .text-center / .text-right, so the Content alignment control silently did nothing to them (same
   root cause as the testimonial cards). Every rule below is (0,2,0) so it out-ranks the element's own
   (0,1,0) declaration. Where the element is flex or grid, the child alignment has to move too, or
   icons, logos and buttons stay pinned left after the text centres.
   Nothing changes unless Content alignment is actually set to Centre or Right.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Features: alternating rows [icon] [body] ── */
.text-center .adm-feature--row { text-align: center; align-items: center; }
.text-right  .adm-feature--row { text-align: right;  align-items: flex-end; }

/* ── Proof-enriched stat tiles (logo + case-study link + contact/quote) ── */
.text-center .adm-stats__cell--proof { text-align: center; align-items: center; }
.text-right  .adm-stats__cell--proof { text-align: right;  align-items: flex-end; }
/* The logo pins itself with align-self, and the figure/attribution rows are flex containers, so
   align-items on the card can't reach any of them — each needs steering on its own axis. */
.text-center .adm-stats__cell--proof .adm-stats__logo { align-self: center; }
.text-right  .adm-stats__cell--proof .adm-stats__logo { align-self: flex-end; }
.text-center .adm-stats__cell--proof .adm-stats__client,
.text-center .adm-stats__cell--proof .adm-stats__cs-link { justify-content: center; }
.text-right  .adm-stats__cell--proof .adm-stats__client,
.text-right  .adm-stats__cell--proof .adm-stats__cs-link { justify-content: flex-end; }
/* The figure is a column, so its cross axis is horizontal — align-items, not justify-content. */
.text-center .adm-stats__cell--proof .adm-stats__figure { align-items: center; }
.text-right  .adm-stats__cell--proof .adm-stats__figure { align-items: flex-end; }
/* Centred/right cards: the attribution row must still span the card so its divider is full width. */
.text-center .adm-stats__cell--proof .adm-stats__client,
.text-right  .adm-stats__cell--proof .adm-stats__client { align-self: stretch; }

/* ── Trustpilot / Google CPT review cards. Two-column grid, so centring the text alone leaves the
      score box and rate rows off-centre; justify-items moves the tracks' contents with it. ── */
.text-center .adm-reviews .adm-review { text-align: center; justify-items: center; }
.text-right  .adm-reviews .adm-review { text-align: right;  justify-items: end; }
.text-center .adm-review__rates { text-align: center; align-items: center; }
.text-right  .adm-review__rates { text-align: right;  align-items: flex-end; }
/* `.adm-reviews .adm-review__col` pins the columns to text-align:left at (0,2,0), so centring the card
   alone left the reviewer row, the stars and the score box hard left while the body text centred. The
   columns need the same treatment, and their own flex children need re-anchoring too. */
.text-center .adm-reviews .adm-review__col { text-align: center; align-items: center; }
.text-right  .adm-reviews .adm-review__col { text-align: right;  align-items: flex-end; }
.text-center .adm-reviews .adm-review__more { align-self: center; }
.text-right  .adm-reviews .adm-review__more { align-self: flex-end; }
.text-center .adm-reviews .adm-tp__aside, .text-center .adm-reviews .adm-g__aside,
.text-center .adm-reviews .adm-tp__body,  .text-center .adm-reviews .adm-g__body { text-align: center; align-items: center; }
/* The Trustpilot/Google cards stack on mobile, where a left-pinned aside above centred body copy is
   what reads as "not centred" — one column, one alignment. */
@media (max-width: 768px) {
  .adm-reviews .adm-review,
  .adm-reviews .adm-review__col,
  .adm-reviews .adm-tp__aside, .adm-reviews .adm-g__aside,
  .adm-reviews .adm-tp__body,  .adm-reviews .adm-g__body { text-align: center; align-items: center; justify-items: center; }
  .adm-reviews .adm-review__more { align-self: center; }
  .adm-review__col + .adm-review__col { border-left: 0; }
}

/* ── CTA office cards ── */
.text-center .adm-cta__offices { text-align: center; }
.text-right  .adm-cta__offices { text-align: right; }

/* ── Awards marquee hover-reveal caption (defaults to centre; this lets it follow the setting) ── */
.text-left   .adm-logos__award-win { text-align: left; }
.text-right  .adm-logos__award-win { text-align: right; }

/* ── Accordion trigger. It is `justify-content: space-between` to push the chevron to the far edge, so
      text-align alone cannot move the label — the flex distribution has to change, and a gap keeps the
      chevron off the text once they are no longer pushed apart. ── */
.text-center .adm-accordion__trigger { text-align: center; justify-content: center; gap: var(--space-3); }
.text-right  .adm-accordion__trigger { text-align: right;  justify-content: flex-end; gap: var(--space-3); }

/* ── Pricing feature label ── */
.text-center .adm-price__feature-label { text-align: center; }
.text-right  .adm-price__feature-label { text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   CENTRE CONTENT ON MOBILE  (per-section toggle → .adm-section--m-center)
   ══════════════════════════════════════════════════════════════════════════════════════════════════
   Applied at 860px, where the theme's split layouts already collapse to one column — centring only makes
   sense once content is a single stack, and reusing the existing breakpoint avoids a band of widths where
   the two disagree.

   WHY !important, and why the universal selector.
   Two earlier attempts failed, both for the same reason. Listing known wrappers missed content endlessly
   (the logos orbit variant puts its eyebrow outside .section-header; every card holds its title, body and
   link in its own classes). Centring the section alone then lost on specificity: `.adm-ha-left
   .section-header` and the per-component rules such as `.adm-content__row-title` are (0,2,0) and (0,1,0),
   so a single `.adm-section--m-center` (0,1,0) could not beat them — eyebrows and row titles stayed left
   while the paragraph beneath them centred, which looked worse than no change at all.

   This is the case !important is actually for: a deliberate, opt-in, mobile-only override of an alignment
   decision made elsewhere. It is contained three ways — inside a media query, inside one opt-in class, and
   affecting one property. Turning the toggle off removes the class and every rule here with it.

   The exceptions below carry !important too, and each is (0,2,0) against the general rule's (0,1,0), so
   they win on specificity rather than on source order. */
@media (max-width: 860px) {
  .adm-section--m-center,
  .adm-section--m-center * { text-align: center !important; }

  /* Wrappers with their own max-width centre as boxes, which text-align cannot do. */
  .adm-section--m-center .section-header,
  .adm-section--m-center .prose,
  .adm-section--m-center .adm-content__text,
  .adm-section--m-center .adm-cta__text { margin-left: auto; margin-right: auto; }

  /* Flex rows: a flex item is positioned by justify-content, not text-align. */
  .adm-section--m-center .section-header__actions,
  .adm-section--m-center .adm-block-cta,
  .adm-section--m-center .adm-content__ctas,
  .adm-section--m-center .adm-hero-home__ctas,
  .adm-section--m-center .adm-cta__actions,
  .adm-section--m-center .adm-content__stats,
  .adm-section--m-center .adm-hero-stats { justify-content: center; }

  /* ── Exceptions: what must NOT centre ── */

  /* Forms are UI, not prose. A centred label above a full-width input reads as a mistake, and centred
     validation text detaches from the field it describes. */
  .adm-section--m-center form,
  .adm-section--m-center form *,
  .adm-section--m-center .wpcf7,
  .adm-section--m-center .wpcf7 *,
  .adm-section--m-center label,
  .adm-section--m-center input,
  .adm-section--m-center textarea,
  .adm-section--m-center select { text-align: left !important; }

  /* Bullets keep their left edge — centred list items are unreadable. The block still centres. */
  .adm-section--m-center ul,
  .adm-section--m-center ol,
  .adm-section--m-center li { text-align: left !important; }
  .adm-section--m-center .prose ul,
  .adm-section--m-center .prose ol { display: inline-block; }

  /* Tabular and preformatted content carries its own alignment. */
  .adm-section--m-center table,
  .adm-section--m-center th,
  .adm-section--m-center td,
  .adm-section--m-center pre,
  .adm-section--m-center code { text-align: left !important; }

  /* Accordions and cards keep their own left alignment. A centred question above a right-hand chevron,
     or a centred card title sitting over a left-aligned tag row, reads as a mistake rather than a choice —
     these are self-contained components, not page content. Matched on the class substring so every card
     type is covered (.adm-card, .cs-card, .team-card, blog and review cards) without enumerating them,
     which is the trap this rule fell into twice already. The section heading ABOVE them still centres. */
  .adm-section--m-center [class*="accordion"],
  .adm-section--m-center [class*="accordion"] *,
  .adm-section--m-center [class*="card"],
  .adm-section--m-center [class*="card"] *,
  .adm-section--m-center [class*="feature"],
  .adm-section--m-center [class*="feature"] *,
  .adm-section--m-center [class*="tile"],
  .adm-section--m-center [class*="tile"] *,
  .adm-section--m-center [class*="__item"],
  .adm-section--m-center [class*="__item"] * { text-align: left !important; }

  /* The section header always centres, whatever the exceptions above match. Those exceptions are
     substring matches, so one of them can catch a heading that happens to sit inside a matching wrapper —
     which is exactly what happened: .section-header__title went left. Re-asserted last, at the same
     (0,2,0) specificity, so it wins on source order without another round of guesswork. */
  .adm-section--m-center .section-header,
  .adm-section--m-center .section-header * { text-align: center !important; }

  /* A label-plus-link header stays a two-up row rather than a centred stack. */
  .adm-section--m-center .adm-hero-home__awards-head { justify-content: space-between; }

  /* ...and its label aligns to its own box. It is the left half of that two-up row, so centring
     it is invisible on one line and plainly wrong at phone width, where it wraps to two lines
     that each centre themselves against the row's left edge. */
  .adm-section--m-center .adm-hero-home__awards-lbl { text-align: left !important; }

  /* A submit is an <input>, so the "forms are UI" rule above drags it left along with the text
     fields it was written for. That is right for a field you type into and wrong for a button:
     its own styles ask for centred text (via justify-content, which does nothing on a replaced
     element), and .adm-form__submit stretches it to 100%, so the label ends up hard against the
     left padding. Buttons centre; fields stay left. */
  .adm-section--m-center input[type="submit"],
  .adm-section--m-center input[type="button"],
  .adm-section--m-center button,
  .adm-section--m-center .wpcf7-submit,
  .adm-section--m-center .btn { text-align: center !important; }

  /* The mobile carousel scrolls; centring its items would fight scroll-snap. */
  .adm-section--m-center .adm-cards-grid,
  .adm-section--m-center .adm-features__grid,
  .adm-section--m-center .adm-reviews__grid { justify-content: flex-start; }
}

/* ── Media-less two-column sections must not leave a dead half ──────────────
   .split is `grid-template-columns: 1fr 1fr`, and content_media's split variant plus
   hero_compact's feature variant both emit their media div only when an image is set
   (`$media = $image ? … : ''`). With no image the copy sat in the left track and the right
   track was empty: measured at 632px of 1216px, 52% of the section, on 13 case studies.

   Letting the only child span both tracks fixes it for good, so a missing image degrades to a
   full-width text section instead of a broken layout. Uses :only-child rather than :has() so it
   needs no support fallback, and it cannot affect a section that does have its media, because
   then the body is not an only child. */
.adm-content__split > .adm-content__body:only-child,
.adm-hero-compact__feature > .adm-hero-compact__copy:only-child {
  grid-column: 1 / -1;
}

/* ══════════════════════════════
   SERVICE ↔ TRAINING CROSS-LINK
   One row pairing a service pillar with its training page and back again.
   Rendered by adm_training_crosslink() from the templates, so it appears only
   where both halves exist — nothing shows on UAE until its training pages are
   built, and nothing shows on a money page or sub-service.
   ══════════════════════════════ */

.adm-crosslink { padding-block: var(--space-10); }

.adm-crosslink__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-1);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease;
}

.adm-crosslink__card:hover {
  border-color: var(--color-border-brand);
  box-shadow: 0 18px 40px -24px rgba(229, 0, 109, .45);
}

.adm-crosslink__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.adm-crosslink__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-brand);
}

.adm-crosslink__label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

.adm-crosslink__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: var(--color-brand);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

/* Stacked on a phone: side by side, the label and the CTA both end up on two
   or three lines each and the row reads as two cramped columns. */
@media (max-width: 860px) {
  .adm-crosslink__card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6);
  }
}

/* An in-page anchor is scrolled by app.js, which now uses the measured header
   bottom. This covers the other route: a URL that already carries a #hash, where
   the browser does the scrolling itself and only CSS can offset it. */
.adm-post__body :is(h2, h3)[id],
.adm-post__body [id] {
  scroll-margin-top: calc(var(--adm-header-bottom, var(--adm-header-h, 84px)) + var(--space-5));
}

.adm-post__updated { color: var(--color-text-secondary); }

/* ── Answer box ─────────────────────────────────────────────────────────────
   The short, direct answer under the hero. Deliberately quiet: a brand rule,
   a question and one paragraph, so it reads as the page introducing itself
   rather than as another promotional band competing with the hero above it.
   An `answer` row in the Page Blocks builder, so background, spacing, width
   and alignment all come from its own section settings — nothing here may cap
   the measure, or the container width control stops doing anything. */
.adm-answer__card {
  position: relative;
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-brand);
}

.adm-answer__q {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xl);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.adm-answer__a {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

@media (max-width: 860px) {
  .adm-answer__card { padding-left: var(--space-5); }
  .adm-answer__a { font-size: var(--font-size-base); }
}