/* ADM theme CSS bundle - generated by inc/perf.php; do not edit. */

/* == hugeicons == */
@font-face{font-family:"hgi-stroke-rounded";src:url("/ae/wp-content/themes/admcore/assets/vendor/hugeicons/hgi-stroke-rounded-subset.woff2?v=89a134f50a") format("woff2");font-weight:normal;font-style:normal;font-display:swap}.hgi-stroke{font-family:"hgi-stroke-rounded" !important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}.hgi-stroke:after{opacity:.4;position:absolute;left:0}.hgi-stroke.hgi-access:before{content:"㪟"}.hgi-stroke.hgi-ai-brain-01:before{content:"㪿"}.hgi-stroke.hgi-ai-magic:before{content:"㫙"}.hgi-stroke.hgi-alert-02:before{content:"㬂"}.hgi-stroke.hgi-analytics-01:before{content:"㬯"}.hgi-stroke.hgi-analytics-up:before{content:"㬲"}.hgi-stroke.hgi-arrow-down-01:before{content:"㭚"}.hgi-stroke.hgi-arrow-left-01:before{content:"㭪"}.hgi-stroke.hgi-arrow-left-02:before{content:"㭫"}.hgi-stroke.hgi-arrow-left-right:before{content:"㭰"}.hgi-stroke.hgi-arrow-right-01:before{content:"㭹"}.hgi-stroke.hgi-arrow-right-02:before{content:"㭺"}.hgi-stroke.hgi-arrow-right-double:before{content:"㭾"}.hgi-stroke.hgi-arrow-up-right-01:before{content:"㮏"}.hgi-stroke.hgi-award-02:before{content:"㮻"}.hgi-stroke.hgi-bank:before{content:"㯐"}.hgi-stroke.hgi-bitcoin-01:before{content:"㰄"}.hgi-stroke.hgi-building-01:before{content:"㳊"}.hgi-stroke.hgi-building-06:before{content:"㳏"}.hgi-stroke.hgi-calculator-01:before{content:"㳢"}.hgi-stroke.hgi-calendar-01:before{content:"㳤"}.hgi-stroke.hgi-calendar-03:before{content:"㳦"}.hgi-stroke.hgi-call:before{content:"㴩"}.hgi-stroke.hgi-call-02:before{content:"㴀"}.hgi-stroke.hgi-cancel-01:before{content:"㵂"}.hgi-stroke.hgi-champion:before{content:"㵾"}.hgi-stroke.hgi-chart-decrease:before{content:"㶉"}.hgi-stroke.hgi-chart-increase:before{content:"㶍"}.hgi-stroke.hgi-chart-line-data-01:before{content:"㶎"}.hgi-stroke.hgi-checkmark-badge-01:before{content:"㶢"}.hgi-stroke.hgi-checkmark-circle-02:before{content:"㶧"}.hgi-stroke.hgi-clock-01:before{content:"㸅"}.hgi-stroke.hgi-code:before{content:"㸦"}.hgi-stroke.hgi-connect:before{content:"㹣"}.hgi-stroke.hgi-copyright:before{content:"㹷"}.hgi-stroke.hgi-cpu:before{content:"㺌"}.hgi-stroke.hgi-credit-card:before{content:"㺚"}.hgi-stroke.hgi-cursor-pointer-01:before{content:"㺾"}.hgi-stroke.hgi-customer-support:before{content:"㻑"}.hgi-stroke.hgi-dashboard-browsing:before{content:"㻚"}.hgi-stroke.hgi-delete-02:before{content:"㻺"}.hgi-stroke.hgi-dice:before{content:"㼯"}.hgi-stroke.hgi-document-validation:before{content:"㽠"}.hgi-stroke.hgi-edit-02:before{content:"㾲"}.hgi-stroke.hgi-facebook-01:before{content:"㿨"}.hgi-stroke.hgi-facebook-02:before{content:"㿩"}.hgi-stroke.hgi-favourite:before{content:"㿲"}.hgi-stroke.hgi-file-02:before{content:"㿺"}.hgi-stroke.hgi-file-remove:before{content:"䀓"}.hgi-stroke.hgi-filter:before{content:"䀱"}.hgi-stroke.hgi-football:before{content:"䂋"}.hgi-stroke.hgi-game-controller-01:before{content:"䂤"}.hgi-stroke.hgi-git-merge:before{content:"䂺"}.hgi-stroke.hgi-global-search:before{content:"䃈"}.hgi-stroke.hgi-globe:before{content:"䃋"}.hgi-stroke.hgi-globe-02:before{content:"䃊"}.hgi-stroke.hgi-google-doc:before{content:"䃝"}.hgi-stroke.hgi-grid:before{content:"䃻"}.hgi-stroke.hgi-grid-view:before{content:"䃺"}.hgi-stroke.hgi-health:before{content:"䄴"}.hgi-stroke.hgi-help-circle:before{content:"䄺"}.hgi-stroke.hgi-hierarchy:before{content:"䅋"}.hgi-stroke.hgi-hierarchy-square-01:before{content:"䅂"}.hgi-stroke.hgi-home-01:before{content:"䅙"}.hgi-stroke.hgi-id:before{content:"䆒"}.hgi-stroke.hgi-idea-01:before{content:"䆓"}.hgi-stroke.hgi-instagram:before{content:"䇌"}.hgi-stroke.hgi-justice-scale-01:before{content:"䇴"}.hgi-stroke.hgi-layers-01:before{content:"䉏"}.hgi-stroke.hgi-layout-01:before{content:"䉒"}.hgi-stroke.hgi-legal-document-01:before{content:"䉵"}.hgi-stroke.hgi-link-01:before{content:"䊉"}.hgi-stroke.hgi-link-02:before{content:"䊊"}.hgi-stroke.hgi-linkedin-01:before{content:"䊕"}.hgi-stroke.hgi-linkedin-02:before{content:"䊖"}.hgi-stroke.hgi-location-01:before{content:"䊟"}.hgi-stroke.hgi-location-05:before{content:"䊣"}.hgi-stroke.hgi-lock-key:before{content:"䋀"}.hgi-stroke.hgi-mail-01:before{content:"䋮"}.hgi-stroke.hgi-mail-02:before{content:"䋯"}.hgi-stroke.hgi-maps:before{content:"䌱"}.hgi-stroke.hgi-medicine-02:before{content:"䍎"}.hgi-stroke.hgi-megaphone-01:before{content:"䍕"}.hgi-stroke.hgi-megaphone-02:before{content:"䍖"}.hgi-stroke.hgi-message-01:before{content:"䍨"}.hgi-stroke.hgi-new-twitter:before{content:"䑫"}.hgi-stroke.hgi-news:before{content:"䑭"}.hgi-stroke.hgi-notebook:before{content:"䒋"}.hgi-stroke.hgi-package:before{content:"䓀"}.hgi-stroke.hgi-paint-brush-02:before{content:"䓅"}.hgi-stroke.hgi-play:before{content:"䔻"}.hgi-stroke.hgi-presentation-bar-chart-01:before{content:"䖆"}.hgi-stroke.hgi-presentation-bar-chart-02:before{content:"䖇"}.hgi-stroke.hgi-profile:before{content:"䖖"}.hgi-stroke.hgi-quote-down-square:before{content:"䗃"}.hgi-stroke.hgi-reddit:before{content:"䗪"}.hgi-stroke.hgi-reload:before{content:"䗲"}.hgi-stroke.hgi-rocket:before{content:"䘨"}.hgi-stroke.hgi-rocket-01:before{content:"䘦"}.hgi-stroke.hgi-route-01:before{content:"䙈"}.hgi-stroke.hgi-search-01:before{content:"䚕"}.hgi-stroke.hgi-search-02:before{content:"䚖"}.hgi-stroke.hgi-settings-01:before{content:"䛁"}.hgi-stroke.hgi-settings-02:before{content:"䛂"}.hgi-stroke.hgi-share-01:before{content:"䛐"}.hgi-stroke.hgi-shield-01:before{content:"䛠"}.hgi-stroke.hgi-shopping-cart-01:before{content:"䜍"}.hgi-stroke.hgi-smart-phone-01:before{content:"䝋"}.hgi-stroke.hgi-sparkles:before{content:"䞎"}.hgi-stroke.hgi-spotify:before{content:"䞜"}.hgi-stroke.hgi-square-lock-01:before{content:"䟉"}.hgi-stroke.hgi-square-lock-02:before{content:"䟊"}.hgi-stroke.hgi-star:before{content:"䟣"}.hgi-stroke.hgi-stars:before{content:"䟤"}.hgi-stroke.hgi-stethoscope:before{content:"䟮"}.hgi-stroke.hgi-store-01:before{content:"䟳"}.hgi-stroke.hgi-tag-01:before{content:"䢌"}.hgi-stroke.hgi-tags:before{content:"䢎"}.hgi-stroke.hgi-target-02:before{content:"䢜"}.hgi-stroke.hgi-target-03:before{content:"䢝"}.hgi-stroke.hgi-tick-02:before{content:"䤈"}.hgi-stroke.hgi-tiktok:before{content:"䤔"}.hgi-stroke.hgi-unlink-04:before{content:"䦩"}.hgi-stroke.hgi-user:before{content:"䧬"}.hgi-stroke.hgi-user-group:before{content:"䧍"}.hgi-stroke.hgi-user-multiple:before{content:"䧗"}.hgi-stroke.hgi-user-multiple-02:before{content:"䧖"}.hgi-stroke.hgi-view:before{content:"䨃"}.hgi-stroke.hgi-wallet-01:before{content:"䨡"}.hgi-stroke.hgi-youtube:before{content:"䪯"}

/* == adm-tokens == */
/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — DESIGN TOKENS
   Light theme is the default. Dark overrides in dark-mode.css.
   All values are referenced as var(--token-name) throughout the theme.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ── */
  --color-brand: #e5006d;
  /* Brand magenta as TEXT. #e5006d on #f5f5f7 measures 4.24:1, just under AA for body sizes,
     so small text uses this instead. Fills, buttons and borders keep the brand hex exactly. */
  --color-brand-text: #d60066;
  --color-brand-rgb: 229, 0, 109;
  --color-brand-hover: #cc0061;
  --color-brand-dim: rgba(229, 0, 109, 0.08);
  --color-brand-glow: rgba(229, 0, 109, 0.15);

  /* ── Surfaces (light default) ── */
  --color-bg: #f5f5f7;
  --color-surface-1: #ffffff;
  --color-surface-2: #f0f0f2;
  --color-surface-3: #e5e5ea;
  --color-surface-4: #d1d1d6;

  /* ── Borders ── */
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.15);
  --color-border-brand: rgba(229, 0, 109, 0.2);

  /* ── Text ── */
  --color-text: #1a1a1a;
  --color-text-secondary: #6b6b6b;
  --color-text-muted: #6b6b73;   /* was #999999: 2.62:1 on #f5f5f7, below AA */
  --color-text-hint: #bbbbbb;
  --color-text-inverse: #ffffff;

  /* ── Accent palette ── */
  --color-yellow: #ffd400; /* ADM brand yellow */
  --color-accent: #ffd400; /* alias used by some components */
  --color-blue: #2b6cb0;
  --color-blue-light: #63b3ed;
  --color-green: #276749;
  --color-green-light: #68d391;
  --color-amber: #c05621;
  --color-amber-light: #f6ad55;
  --color-red: #c53030;
  --color-red-light: #fc8181;
  --color-purple: #6b46c1;
  --color-purple-light: #b794f4;
  --color-teal: #2c7a7b;
  --color-teal-light: #4fd1c5;

  /* ── Accent dims (for badges / subtle backgrounds) ── */
  --color-blue-dim: rgba(43, 108, 176, 0.08);
  --color-green-dim: rgba(39, 103, 73, 0.08);
  --color-amber-dim: rgba(192, 86, 33, 0.08);
  --color-red-dim: rgba(197, 48, 48, 0.08);
  --color-purple-dim: rgba(107, 70, 193, 0.08);
  --color-teal-dim: rgba(44, 122, 123, 0.08);

  /* ── Typography ── */
  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  --font-size-2xs: 0.625rem;   /* 10px */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */
  --font-size-5xl: 3rem;       /* 48px */
  --font-size-6xl: 3.75rem;    /* 60px */
  --font-size-7xl: 4.5rem;     /* 72px */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;

  /* ── Spacing (4px base scale) ── */
  --space-0: 0;
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── Layout ── */
  --container-max: 1280px;
  --container-wide: 1560px;
  --container-narrow: 720px;
  --container-padding: var(--space-6);
  --section-padding-y: var(--space-24);
  --adm-header-h: 84px; /* approx fixed-header height; used by .adm-section--vh */

  /* ── Border radius ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.15);
  --shadow-glow-strong: 0 0 40px rgba(var(--color-brand-rgb), 0.25);

  /* ── Glass effects ── */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-blur: 16px;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* ── Z-index scale ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}


/* == adm-dark-mode == */
/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — DARK MODE OVERRIDES
   Applied when <html data-theme="dark">
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* ── Surfaces ── */
  --color-bg: #0a0a0a;
  --color-surface-1: #111111;
  --color-surface-2: #191919;
  --color-surface-3: #242424;
  --color-surface-4: #333333;

  /* ── Borders ── */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.15);
  --color-border-brand: rgba(229, 0, 109, 0.25);

  /* ── Text ── */
  --color-text: #ffffff;
  --color-text-secondary: #a8a8a8;
  --color-text-muted: #666666;
  --color-brand-text: var(--color-brand);
  --color-text-hint: #444444;
  --color-text-inverse: #0a0a0a;

  /* ── Brand adjustments for dark ── */
  --color-brand-dim: rgba(229, 0, 109, 0.12);
  --color-brand-glow: rgba(229, 0, 109, 0.2);

  /* ── Accents — brighter on dark ── */
  --color-blue: #63b3ed;
  --color-green: #68d391;
  --color-amber: #f6ad55;
  --color-red: #fc8181;
  --color-purple: #b794f4;
  --color-teal: #4fd1c5;

  /* ── Accent dims — more opaque on dark ── */
  --color-blue-dim: rgba(99, 179, 237, 0.11);
  --color-green-dim: rgba(104, 211, 145, 0.11);
  --color-amber-dim: rgba(246, 173, 85, 0.11);
  --color-red-dim: rgba(252, 129, 129, 0.11);
  --color-purple-dim: rgba(183, 148, 244, 0.11);
  --color-teal-dim: rgba(79, 209, 197, 0.11);

  /* ── Shadows — deeper on dark ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.35);

  /* ── Glass — darker, subtler ── */
  --glass-bg: rgba(17, 17, 17, 0.72);
  --glass-bg-strong: rgba(17, 17, 17, 0.88);
  --glass-border: rgba(255, 255, 255, 0.08);

  color-scheme: dark;
}

/* ── Dark mode grid pattern (brand-tinted, subtle) ── */
[data-theme="dark"] .adm-section--grid::before {
  background-image:
    linear-gradient(rgba(229, 0, 109, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229, 0, 109, 0.015) 1px, transparent 1px);
}

/* ── Dark mode scrollbar ── */
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0a0a0a; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }


/* == adm-reset == */
/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — MODERN CSS RESET
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
  /* Reserve the scrollbar's space without forcing the scrollbar itself: a short page and a
     long one stay the same width, so moving between them doesn't shift the layout, but a page
     that fits the viewport shows no dead scrollbar track.

     Deliberately NOT overflow-y: scroll — that draws the bar on every page whether it scrolls
     or not. The gutter alone is enough to keep the width stable. */
  scrollbar-gutter: stable;
}

/* ── Scroll lock without the sideways jump ──
   Every overlay on this site locks scrolling with overflow:hidden on <html>. That destroys
   the scrollbar, and the content immediately grows into the freed pixels — the whole page
   lurches right as the modal opens, then back as it closes.

   scrollbar-gutter:stable does NOT prevent this. It is ignored once overflow is hidden on
   the same element (measured in Chrome: content 1434px → 1440px with both declared). The
   only thing that holds the width is padding worth exactly one scrollbar, measured while
   unlocked and published as --adm-sbw by app.js.

   .adm-booking-open is the Absolute Calendar embed's own class — it locks <html> from a
   script we don't control, so we compensate from this side rather than patch the embed. */
html.menu-open,
html.adm-booking-open,
html.adm-overlay-open {
  overflow: hidden;
  overscroll-behavior: none;
  padding-right: var(--adm-sbw, 0px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  min-height: 100vh;
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img, picture { height: auto; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* WordPress-specific resets */
.wp-block-image img { height: auto; }
.entry-content > * + * { margin-top: 1.5em; }


/* == adm-base == */
/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — BASE STYLES
   Global typography, body, links, selection, focus
   ═══════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: background-color var(--duration-slow) var(--ease-out),
              color var(--duration-slow) var(--ease-out);
}

/* ── Selection ── */
::selection {
  background: rgba(var(--color-brand-rgb), 0.2);
  color: var(--color-text);
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

h1 {
  font-size: clamp(var(--font-size-4xl), 5vw, var(--font-size-7xl));
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl));
  font-weight: var(--font-weight-medium);
}

h3 {
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl));
}

h4 {
  font-size: clamp(var(--font-size-xl), 2.5vw, var(--font-size-3xl));
}

h5 {
  font-size: var(--font-size-xl);
}

h6 {
  font-size: var(--font-size-lg);
}

/* ── Body text ── */
p {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

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

small, .text-sm {
  font-size: var(--font-size-sm);
}

/* ── Links ── */
a {
  transition: color var(--duration-fast) ease;
}

a:hover {
  color: var(--color-brand);
}

.link {
  color: var(--color-brand-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--color-brand-rgb), 0.3);
  transition: text-decoration-color var(--duration-fast) ease;
}

.link:hover {
  text-decoration-color: var(--color-brand);
}

/* Inline content links (body copy, section intros): brand colour at rest, with an
   underline that draws in left-to-right on hover — the "chasing underline". Scoped to
   content so it never touches buttons, nav, cards or footer (they have their own hovers). */
.prose a:not(.btn):not(.adm-post__ai-btn):not(.adm-post__tag):not(.adm-doc-list__item),
.section-header__desc a:not(.btn),
.section-header__sub a:not(.btn) {
  color: var(--color-brand-text);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  padding-bottom: 1px;
  transition: background-size 0.35s var(--ease-out), color var(--duration-fast) ease;
}
.prose a:not(.btn):not(.adm-doc-list__item):hover,
.section-header__desc a:not(.btn):hover,
.section-header__sub a:not(.btn):hover {
  background-size: 100% 1.5px;
}
@media (prefers-reduced-motion: reduce) {
  .prose a:not(.btn):not(.adm-post__ai-btn):not(.adm-post__tag):not(.adm-doc-list__item),
  .section-header__desc a:not(.btn),
  .section-header__sub a:not(.btn) { transition: none; }
}

/* ── Monospace ── */
code, kbd, pre, samp, .mono {
  font-family: var(--font-mono);
}

code {
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
}

pre {
  padding: var(--space-4);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background: none;
  border: none;
}

/* ── Labels / overlines ── */
.label {
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  line-height: 1.4;
}

.overline {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-text);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

/* ── Focus visible ── */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ── Horizontal rule ── */
hr {
  border: none;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-8) 0;
}

/* ── Images ── */
.wp-post-image,
.attachment-post-thumbnail {
  border-radius: var(--radius-md);
}


/* == adm-layout == */
/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — LAYOUT
   Containers, grid system, section spacing
   ═══════════════════════════════════════════════════════════════════ */

/* ── Containers ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--full {
  max-width: none;
  /* Full width but keep side gutters so content never runs to the viewport edge.
     (Blocks that intentionally bleed edge-to-edge override this themselves.) */
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ── Grid system ── */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

/* Auto-fit responsive grids */
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-auto-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* ── Responsive grid breakpoints ── */
/* Tablet: reduce 4/5/6-col grids down to 2 */
@media (max-width: 1024px) {
  .grid-4,
  .grid-5,
  .grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: every fixed-column grid collapses to a single column */
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-auto-sm,
  .grid-auto-md,
  .grid-auto-lg {
    grid-template-columns: 1fr !important;
  }

  /* Bento grid: collapse to single column on mobile; spans reset */
  .bento {
    grid-template-columns: 1fr;
  }
  .bento-span-2,
  .bento-span-3,
  .bento-span-full {
    grid-column: auto;
  }
  .bento-row-2 {
    grid-row: auto;
  }
}

/* ── Bento grid (MagicUI-inspired asymmetric layouts) ── */
.bento {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
}

.bento-span-2 { grid-column: span 2; }
.bento-span-3 { grid-column: span 3; }
.bento-span-full { grid-column: 1 / -1; }
.bento-row-2 { grid-row: span 2; }

/* ── Flex utilities ── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { align-items: center; justify-content: space-between; }
.flex-start { align-items: flex-start; }
.flex-end { align-items: flex-end; }

/* ── Gap scale ── */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

/* ── Section spacing ── */
.section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

.section--sm {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.section--lg {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

.section--no-top { padding-top: 0; }
.section--no-bottom { padding-bottom: 0; }

/* ── Stack (vertical spacing between children) ── */
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-8); }
.stack-xl > * + * { margin-top: var(--space-12); }

/* ── Two-column split layout ── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.split--reverse > *:first-child { order: 2; }
.split--reverse > *:last-child { order: 1; }

.split--60-40 { grid-template-columns: 1.5fr 1fr; }
.split--40-60 { grid-template-columns: 1fr 1.5fr; }

/* ── Site wrapper ── */
.site-main {
  min-height: 100vh;
  overflow-x: clip;  /* clip, not hidden — hidden makes this a scroll container and breaks position:sticky inside sections */
}


/* == adm-components == */
/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — COMPONENTS
   Buttons, badges, cards, KPI tiles, form elements
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════
   BUTTONS
   ══════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn i { font-size: 1.1em; }

/* Primary — brand fill */
.btn--primary {
  background: var(--color-brand);
  color: #ffffff;
  border-color: var(--color-brand);
}

.btn--primary:hover {
  background: var(--color-brand-hover);
  color: #ffffff;
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: translateY(0);
}

/* Secondary — outlined */
.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn--secondary:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-brand-dim);
}

/* Yellow — secondary CTA colour */
.btn--yellow {
  background: var(--color-yellow);
  color: #000000;
  border-color: var(--color-yellow);
}

.btn--yellow:hover {
  background: var(--color-yellow);
  color: #000000;
  border-color: var(--color-yellow);
  box-shadow: 0 0 20px rgba(255, 212, 0, 0.25);
  transform: translateY(-1px);
}

.btn--yellow:active {
  transform: translateY(0);
}

.btn--yellow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 75%
  );
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.btn--yellow:hover::after {
  transform: translateX(100%);
}

/* Ghost — minimal */
.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.btn--ghost:hover {
  color: var(--color-brand);
  background: var(--color-brand-dim);
}

/* Glass — glassmorphic */
.btn--glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--color-text);
  border-color: var(--glass-border);
}

.btn--glass:hover {
  border-color: var(--color-border-brand);
  box-shadow: var(--shadow-glow);
}

/* Sizes */
.btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: 1rem 2.25rem;
  font-size: var(--font-size-base);
  border-radius: var(--radius-lg);
}

.btn--xl {
  padding: 1.125rem 2.75rem;
  font-size: var(--font-size-lg);
  border-radius: var(--radius-lg);
}

/* Icon-only button */
.btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
}

.btn--icon.btn--sm { width: 32px; height: 32px; }
.btn--icon.btn--lg { width: 48px; height: 48px; }

/* Button shimmer effect on hover */
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 75%
  );
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.btn--primary:hover::after {
  transform: translateX(100%);
}


/* ══════════════════════════════
   BADGES
   ══════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2em 0.6em;
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-xs);
  border: 1px solid;
  white-space: nowrap;
  line-height: 1.4;
}

.badge--brand {
  background: var(--color-brand-dim);
  color: var(--color-brand);
  border-color: var(--color-border-brand);
}

.badge--blue {
  background: var(--color-blue-dim);
  color: var(--color-blue);
  border-color: rgba(43, 108, 176, 0.2);
}

.badge--green {
  background: var(--color-green-dim);
  color: var(--color-green);
  border-color: rgba(39, 103, 73, 0.2);
}

.badge--amber {
  background: var(--color-amber-dim);
  color: var(--color-amber);
  border-color: rgba(192, 86, 33, 0.2);
}

.badge--red {
  background: var(--color-red-dim);
  color: var(--color-red);
  border-color: rgba(197, 48, 48, 0.2);
}

.badge--purple {
  background: var(--color-purple-dim);
  color: var(--color-purple);
  border-color: rgba(107, 70, 193, 0.2);
}

.badge--neutral {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* Dot indicator inside badge */
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge__dot--pulse {
  animation: adm-pulse 2s ease-in-out infinite;
}

@keyframes adm-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px currentColor; }
  50% { opacity: 0.3; box-shadow: 0 0 2px currentColor; }
}


/* ══════════════════════════════
   CARDS
   ══════════════════════════════ */

/* Client logo grid — fills parent height, 3 columns */
.client-logos-wrap {
  width: 100%;
  height: 100%;
}

.client-logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-3);
  height: 100%;
}

.client-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.client-logo-card__img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) ease,
              box-shadow var(--duration-base) ease;
}

.card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

/* Card with subtle brand gradient overlay */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.02), transparent 55%);
  pointer-events: none;
}

/* Elevated card (lifts on hover) */
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Glass card */
.card--glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-color: var(--glass-border);
}

/* Featured card with brand accent */
.card--featured {
  border-color: var(--color-border-brand);
}

.card--featured::before {
  background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.05), transparent 55%);
}

/* Card title */
.card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* Card description */
.card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Card meta */
.card__meta {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}

/* Card image area */
.card__image {
  margin: calc(var(--space-6) * -1);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.card__image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.card--hover:hover .card__image img {
  transform: scale(1.03);
}


/* ══════════════════════════════
   TESTIMONIAL CARDS
   ══════════════════════════════ */

.testimonial-card {
  padding: var(--space-12);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.testimonial-card__quote {
  font-size: 56px;
  color: var(--color-brand);
  line-height: 1;
  opacity: 0.4;
}

.testimonial-card__text {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  margin: 0;
  max-width: 760px;
}

.testimonial-card__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.testimonial-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 80px;
}

.testimonial-card__logo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.testimonial-card__author-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0;
}

.testimonial-card__author-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  margin-top: var(--space-1);
}


/* ══════════════════════════════
   REVIEW BADGES
   ══════════════════════════════ */

.review-badge-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-6);
  min-height: 120px;
}

.review-badge-card__img {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}


/* ══════════════════════════════
   TEAM CARDS
   ══════════════════════════════ */

.team-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  position: relative;
}

/* Quick bio revealed on hover over the photo */
.team-card__bio {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  background: linear-gradient(to top, rgba(10,10,15,.94) 22%, rgba(10,10,15,.45) 62%, transparent);
  color: #fff;
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  pointer-events: none;
}
.team-card__bio p {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin: 0;
  color: #fff;
}
.team-card:hover .team-card__bio,
.team-card:focus-within .team-card__bio {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) { .team-card__bio { transition: none; } }

.team-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.team-card:hover .team-card__img {
  transform: scale(1.05);
}

.team-card__info {
  padding: 0 var(--space-2) var(--space-2);
}

.team-card__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.team-card__role {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.team-card__socials {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.team-card__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 16px;
  transition: all var(--duration-fast) ease;
  text-decoration: none;
}

.team-card__social:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
  background: var(--color-brand-dim);
}


/* ══════════════════════════════
   SERVICE CARDS
   ══════════════════════════════ */

/* Card — fixed height, flex column, image shrinks on hover */
.svc-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  height: 420px;
  padding: var(--space-4);
  justify-content: flex-end;
}

/* Image — fills remaining space, shrinks on hover to make room */
.svc-card__image {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  flex: 1 1 auto;
  min-height: 0;
  transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.svc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Body anchored to bottom, never shrinks */
.svc-card__body {
  flex-shrink: 0;
  padding: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
}

.svc-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* Summary — collapsed by default, expands on hover */
.svc-card__summary {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease;
}

.svc-card__summary > p {
  min-height: 0;
  overflow: hidden;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
  padding-bottom: var(--space-2);
}

.svc-card:hover .svc-card__summary {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* On hover, image gives up all flex space — shrinks as much as needed */
.svc-card:hover .svc-card__image {
  flex: 0 1 100%;
}


/* ══════════════════════════════
   CASE STUDY CARDS
   ══════════════════════════════ */

.cs-card {
  --cs-surface: #ffffff; /* cs-cards are always white in light mode (never follow a grey section surface); dark mode + dark/black/magenta sections override this below. Body + badge shelf share this token so they always match. */
  background: var(--cs-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) ease,
              box-shadow var(--duration-base) ease;
}

/* Dark mode: cards follow the dark surface token instead of staying white. */
html[data-theme="dark"] .cs-card { --cs-surface: var(--color-surface-1); }

.cs-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}

.cs-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Image area */
.cs-card__image {
  position: relative;
  aspect-ratio: 16 / 14;
  overflow: hidden;
}

.cs-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.cs-card:hover .cs-card__img {
  transform: scale(1.05);
}

/* Category badge — white shelf flush to the card's left edge that flows up to
   cradle the pill, with ONE smooth concave shoulder on the right curving back
   into the image. Flush-left avoids any detached notch on the left. */
.cs-card__badge-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3; /* above .cs-card__img-overlay (z-index:1) so the .45 black tint never greys the white shelf */
  background: var(--cs-surface);
  border-radius: 0 24px 0 0;
  padding: 14px 22px 16px var(--space-6);
}

/* Single concave shoulder on the right — white flows out and down to the baseline */
.cs-card__badge-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -24px;
  width: 24px;
  height: 24px;
  background: var(--cs-surface);
  -webkit-mask: radial-gradient(circle at top right, transparent 24px, #000 24.5px);
          mask: radial-gradient(circle at top right, transparent 24px, #000 24.5px);
}

/* Magenta pill sits within the flowing shelf */
.cs-card__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  white-space: nowrap;
}

/* Card body.
   The card is already full row height (grid stretch + height:100%), but with a
   body that did not grow, the Read More button landed wherever the title
   happened to end — two lines on one card, three on the next, so a row of
   cards read as a ragged edge. The body fills the card and the button pins to
   the bottom, exactly as the .adm-card row does. */
.cs-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Client logo on the featured image, over a black overlay so it stays visible. */
.cs-card__img-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.45); pointer-events: none; }
.cs-card__img-logo { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: var(--space-6); pointer-events: none; }
.cs-card__img-logo img { max-width: 72%; max-height: 84px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); }

.cs-card__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  flex: 1;
  /* The card title falls back to campaign_name, which is a results-led sentence rather than a
     name: the two MotorcycleInsurance.org.uk ones run to 105 and 108 characters and pushed their
     cards far taller than the rest of the row. Three lines is enough to carry the result and the
     client; past that the card stops being scannable. Capped rather than truncated in PHP so the
     full sentence stays in the DOM for search engines and screen readers.
     Anything that needs a different cap sets .line-clamp-2 or .line-clamp-3 from utilities.css,
     which is enqueued after this file and therefore wins — the awards cards already do. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* The title is a flex item (flex: 1 above), and a flex item's display is blockified — Chrome
     turns -webkit-box into flow-root here, which it still clamps, but Safari is not guaranteed to.
     max-height caps the box at three lines whatever the browser does with the display value:
     3 lines x --line-height-snug (1.25) of the element's own font-size. */
  max-height: calc(3em * 1.25);
}

/* Client logo area */
.cs-card__client {
  margin-bottom: var(--space-4);
}

.cs-card__client-label {
  display: block;
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  margin-bottom: var(--space-2);
}

.cs-card__client-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: 48px;
  min-width: 96px;
  max-width: 160px;
}

.cs-card__client-logo {
  height: 28px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

html[data-theme="dark"] .cs-card__client-logo-wrap,
.adm-section--dark .cs-card__client-logo-wrap {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .cs-card__client-logo {
  mix-blend-mode: screen;
  filter: brightness(1.8);
}

.adm-section--magenta .cs-card__client-logo-wrap {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.95);
}

/* Read More CTA */
.cs-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  justify-content: center;
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) ease,
              color var(--duration-fast) ease;
}

.cs-card:hover .cs-card__cta,
.svc-card:hover .cs-card__cta,
.card:hover .cs-card__cta {
  background: var(--color-text);
  color: var(--color-bg);
}

.cs-card__cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) ease;
}

.cs-card:hover .cs-card__cta svg,
.svc-card:hover .cs-card__cta svg,
.card:hover .cs-card__cta svg {
  transform: translateX(3px);
}

/* Dark/black sections: drive the shared surface var so body + badge shelf stay in lock-step (solid, not translucent) */
.adm-section--dark .cs-card,
.adm-section--black .cs-card {
  --cs-surface: #16161c;
  border-color: rgba(255, 255, 255, 0.08);
}

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


/* ══════════════════════════════
   KPI CARDS (dashboard-inspired)
   ══════════════════════════════ */

.kpi {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) ease;
}

.kpi:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}

/* Glow orb in top-right corner */
.kpi__glow {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  opacity: 0.1;
  filter: blur(20px);
  pointer-events: none;
}

.kpi__label {
  display: block;
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-top: var(--space-2);
  margin-bottom: 0;
}

.kpi__value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1;
  color: var(--color-text);
}

.kpi__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
}

.kpi__trend--up { color: var(--color-green); }
.kpi__trend--down { color: var(--color-red); }


/* ══════════════════════════════
   FORM ELEMENTS
   ══════════════════════════════ */

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: rgba(var(--color-brand-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), 0.1);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-muted);
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b6b6b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}


/* ══════════════════════════════
   DIVIDERS
   ══════════════════════════════ */

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

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


/* ══════════════════════════════
   AVATAR
   ══════════════════════════════ */

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

.avatar--sm { width: 32px; height: 32px; }
.avatar--lg { width: 64px; height: 64px; }
.avatar--xl { width: 96px; height: 96px; }

.avatar-group {
  display: flex;
}

.avatar-group .avatar {
  margin-left: -8px;
  border-color: var(--color-surface-1);
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}


/* ══════════════════════════════
   PROGRESS BAR
   ══════════════════════════════ */

.progress {
  height: 4px;
  background: var(--color-surface-3);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  transition: width 0.65s var(--ease-spring);
}

.progress__bar--blue { background: var(--color-blue); }
.progress__bar--green { background: var(--color-green); }
.progress__bar--amber { background: var(--color-amber); }
.progress__bar--purple { background: var(--color-purple); }


/* ══════════════════════════════
   ACCORDION
   ══════════════════════════════ */

.adm-accordion__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.adm-accordion__item + .adm-accordion__item {
  margin-top: var(--space-2);
}

.adm-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-1);
  border: none;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: background var(--duration-fast) ease;
  gap: var(--space-4);
}

.adm-accordion__trigger:hover {
  background: var(--color-surface-2);
}

.adm-accordion__trigger i {
  transition: transform var(--duration-base) var(--ease-out);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.adm-accordion__item.is-open .adm-accordion__trigger i {
  transform: rotate(180deg);
}

.adm-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-out);
}

.adm-accordion__panel > div,
.adm-accordion__panel > .prose {
  padding: 0 var(--space-5) var(--space-5);
}


/* ══════════════════════════════
   TABS
   ══════════════════════════════ */

.adm-tabs__nav {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.adm-tabs__tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--duration-fast) ease;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
}

.adm-tabs__tab.is-active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

.adm-tabs__tab:hover {
  color: var(--color-text);
}

.adm-tabs__panel {
  display: none;
}

.adm-tabs__panel.is-active {
  display: block;
  animation: fadeInUp 0.3s var(--ease-out);
}


/* ══════════════════════════════
   VIDEO PLAYER
   ══════════════════════════════ */

.adm-video {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.adm-video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.adm-video:hover .adm-video__poster {
  transform: scale(1.03);
}

.adm-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.adm-video__play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(var(--color-brand-rgb), 0.9);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 0 30px rgba(var(--color-brand-rgb), 0.4);
  transition: transform var(--duration-base) var(--ease-spring);
}

.adm-video:hover .adm-video__play-btn {
  transform: scale(1.1);
}

.adm-video.is-playing .adm-video__play {
  display: none;
}

.adm-video__caption {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}


/* ══════════════════════════════
   CAROUSEL / SLIDER
   ══════════════════════════════ */

.adm-carousel {
  position: relative;
  overflow: hidden;
}

.adm-carousel__track {
  display: flex;
  gap: var(--space-6);
  transition: transform var(--duration-slow) var(--ease-out);
}

.adm-carousel__slide {
  flex-shrink: 0;
}

/* A flex track stretches every slide to the tallest one. On desktop, where several slides sit
   side by side, that is what you want — ragged card bottoms in a row look broken. On a phone
   only one slide is visible at a time, so there is nothing to line up with, and the stretch
   just pads every shorter review out to the height of the longest: measured on the homepage,
   36 review slides all forced to 1629px while the cards themselves ran 1269–1629px, leaving up
   to 360px of blank space under the short ones. One at a time, each slide takes its own height. */
@media (max-width: 860px) {
  .adm-carousel__track { align-items: flex-start; }
}

.adm-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.adm-carousel__prev,
.adm-carousel__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  flex-shrink: 0;
}

.adm-carousel__prev:hover,
.adm-carousel__next:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.adm-carousel__prev:disabled,
.adm-carousel__next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.adm-carousel__dots {
  display: flex;
  gap: 0;
  align-items: center;
}

/* The button is 24px square because a touch target smaller than that fails WCAG, and an
   assistive check measures the control itself — a pseudo-element hit area would not count.
   The padding plus background-clip keeps the painted dot at the 8px it has always been, so
   only the tappable area grows. */
.adm-carousel__dot {
  width: 24px;
  height: 24px;
  padding: 8px;
  box-sizing: border-box;
  background-clip: content-box;
  border-radius: 50%;
  border: none;
  background: var(--color-border-strong);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  padding: 0;
}

.adm-carousel__dot.is-active {
  background: var(--color-brand);
  width: 40px;   /* 24px pill + the 8px padding either side */
  border-radius: var(--radius-full);
}

/* Visible against dark / magenta sections */
.adm-section--dark .adm-carousel__dot,
.adm-section--magenta .adm-carousel__dot {
  background: rgba(255, 255, 255, 0.35);
}

.adm-section--dark .adm-carousel__dot:hover,
.adm-section--magenta .adm-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

.adm-section--dark .adm-carousel__dot.is-active { background: var(--color-brand); }
/* On magenta the brand dot vanishes against the brand bg — use solid white. */
.adm-section--magenta .adm-carousel__dot.is-active { background: #ffffff; }

/* Prev/next legibility on dark/magenta: hover must not flip to brand-magenta (invisible on magenta). */
.adm-section--dark .adm-carousel__prev, .adm-section--dark .adm-carousel__next,
.adm-section--black .adm-carousel__prev, .adm-section--black .adm-carousel__next,
.adm-section--magenta .adm-carousel__prev, .adm-section--magenta .adm-carousel__next {
  border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.10);
}
.adm-section--magenta .adm-carousel__prev:hover, .adm-section--magenta .adm-carousel__next:hover {
  border-color: #fff; color: #fff; background: rgba(255,255,255,.18);
}

/* Inline SVG icon sizing inside buttons */
.adm-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}


/* ══════════════════════════════
   AWARD LAUREL BADGE
   ══════════════════════════════ */

.adm-hero-award {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.adm-hero-award__text {
  text-align: center;
}

.adm-hero-award__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  color: var(--color-text);
  margin: 0;
  line-height: var(--line-height-snug);
}

.adm-hero-award__event {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-mono);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text);
  margin: var(--space-1) 0 0;
}

.adm-laurel {
  flex-shrink: 0;
  color: var(--color-text);
  width: 16px;
  height: auto;
}

[data-bg="Dark"] .adm-laurel,
.adm-section--dark .adm-laurel {
  color: #ffffff;
}

/* Magenta sections: white laurel + white text */
[data-bg="Magenta"] .adm-laurel,
[data-bg="Purple"] .adm-laurel,
.adm-section--magenta .adm-laurel {
  color: #ffffff;
}

.adm-section--dark .adm-hero-award__name,
.adm-section--dark .adm-hero-award__event,
.adm-section--magenta .adm-hero-award__name,
.adm-section--magenta .adm-hero-award__event {
  color: #ffffff;
}

/* Hero with a background image (darkish overlay) — force white laurels
   so the badge stays visible over the overlaid image regardless of bg_colour. */
.adm-hero-casestudy.adm-section--has-bg-image[data-bg="Dark"] .adm-laurel,
.adm-hero-casestudy.adm-section--has-bg-image[data-bg="Magenta"] .adm-laurel {
  color: #ffffff;
}

/* Form card (hero form) — glass effect */
.adm-form-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-color: var(--glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.adm-form-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-6);
  text-align: center;
}


/* ══════════════════════════════
   CONTACT FORM 7 STYLING
   Premium SaaS-inspired form design.
   ══════════════════════════════ */

.wpcf7 {
  width: 100%;
}

.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Labels */
.wpcf7-form label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* All text inputs, email, tel, url, number */
/* CF7 wraps each control in an inline <span>, so any width set on the wrap is ignored and the
   control shrink-wraps. Make the wrap a block once, globally, so every imported form's controls can
   fill their column. */
.wpcf7-form .wpcf7-form-control-wrap { display: block; width: 100%; }

/* CF7 groups fields in <fieldset>, which the browser gives a `2px groove` border (the stray grey box
   around the whitepaper form) and `min-width: min-content` — the latter is a long-standing quirk that
   stops flex/grid descendants sizing correctly, which is why the two name columns collapsed to 192px
   while the full-width email column measured 774px in the same form. */
.wpcf7-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Imported forms carry Bootstrap grid classes, but Bootstrap's grid CSS is not loaded here — so
   `.row` computes to flex while `.col-*` children keep `flex: 0 1 auto`, i.e. shrink-to-fit. Widths
   therefore tracked the LABEL text rather than the grid: the long "in-person meeting" question filled
   the row while the short "remote setting" one collapsed to ~300px.
   Important: this form uses `col-md-12` for BOTH single fields and side-by-side pairs, so the class
   cannot tell them apart — the only reliable signal is how many columns share the row. Hence the
   child-count selectors. Do NOT add `flex-wrap: wrap` here: it lets the pairs drop onto separate
   lines and collapses the whole form to one column. */
@media (min-width: 768px) {
  /* `.row` computes to FLEX in some contexts (vacancy apply form, where another rule wins on
     specificity) and GRID in others (the blog whitepaper form). Flex properties are ignored on grid
     items and grid-template-columns is ignored on flex containers, so BOTH have to be declared —
     a flex-only fix left the whitepaper columns at 193px, and a grid-only fix put the vacancy form
     back to shrink-to-fit. Either way the sizing is driven by how many columns share the row. */
  .wpcf7-form .row { column-gap: var(--space-4); align-items: start; }
  .wpcf7-form .row:has(> [class*="col-"]:only-child) { grid-template-columns: 1fr; }
  .wpcf7-form .row:has(> [class*="col-"]:first-child:nth-last-child(2)) { grid-template-columns: 1fr 1fr; }
  .wpcf7-form .row > [class*="col-"] { min-width: 0; }
  .wpcf7-form .row > [class*="col-"]:only-child { flex: 1 1 100%; }
  .wpcf7-form .row > [class*="col-"]:first-child:nth-last-child(2),
  .wpcf7-form .row > [class*="col-"]:first-child:nth-last-child(2) ~ [class*="col-"] { flex: 1 1 50%; }
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-url,
.wpcf7-form .wpcf7-number,
.wpcf7-form .wpcf7-date,
/* select + textarea were missing here, so imported forms (the vacancy apply form) rendered
   shrink-to-fit dropdowns and a half-width message box next to full-width text inputs. */
.wpcf7-form select,
.wpcf7-form textarea,
.wpcf7-form .wpcf7-select,
.wpcf7-form .wpcf7-textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
  -webkit-appearance: none;
  appearance: none;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="date"]:focus,
.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-email:focus,
.wpcf7-form .wpcf7-tel:focus {
  border-color: rgba(var(--color-brand-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), 0.08);
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: var(--color-text-muted);
}

/* Textarea */
.wpcf7-form textarea,
.wpcf7-form .wpcf7-textarea {
  width: 100%;
  min-height: 120px;
  padding: 0.8rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  resize: vertical;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.wpcf7-form textarea:focus,
.wpcf7-form .wpcf7-textarea:focus {
  border-color: rgba(var(--color-brand-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), 0.08);
}

/* Select / dropdown */
.wpcf7-form select,
.wpcf7-form .wpcf7-select {
  width: 100%;
  padding: 0.8rem 2.5rem 0.8rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236b6b6b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color var(--duration-fast) ease;
}

.wpcf7-form select:focus {
  border-color: rgba(var(--color-brand-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), 0.08);
}

/* Checkboxes and radios */
.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.wpcf7-form .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.wpcf7-form .wpcf7-list-item input[type="checkbox"],
.wpcf7-form .wpcf7-list-item input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-brand);
  cursor: pointer;
}

/* File upload */
.wpcf7-form input[type="file"] {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  width: 100%;
  cursor: pointer;
  background: var(--color-surface-2);
}

/* Submit button */
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.9rem 2rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
  background: var(--color-brand);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  position: relative;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover {
  background: var(--color-brand-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.wpcf7-form input[type="submit"]:active {
  transform: translateY(0);
}

/* Hero form card — yellow submit button */
.adm-form-card input[type="submit"],
.adm-form-card .wpcf7-submit {
  background: var(--color-yellow);
  color: #000000;
  border-color: var(--color-yellow);
}

.adm-form-card input[type="submit"]:hover,
.adm-form-card .wpcf7-submit:hover {
  background: var(--color-yellow);
  color: #000000;
  border-color: var(--color-yellow);
  box-shadow: 0 0 20px rgba(255, 212, 0, 0.25);
}

/* Shimmer on submit button */
.wpcf7-form input[type="submit"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.15) 50%, transparent 75%);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.wpcf7-form input[type="submit"]:hover::after {
  transform: translateX(100%);
}

/* Spinner (loading state) */
.wpcf7-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--color-brand-rgb), 0.2);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: var(--space-2);
}

/* Validation states */
.wpcf7-not-valid {
  border-color: var(--color-red) !important;
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.08) !important;
}

.wpcf7-not-valid-tip {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-red);
  margin-top: var(--space-1);
  font-weight: var(--font-weight-medium);
}

/* Success / error messages */

/*
 * The response box must occupy no space until it actually holds a message.
 *
 * CF7 only applies display:none for form.init / .resetting / .submitting. In every other state
 * (sent, invalid, unaccepted, failed, aborted, spam) our !important padding and margin below,
 * plus CF7's own 2px border, render an empty ~50px box directly under the submit button - the
 * gap at the bottom of the hero form card. Keying off :empty fixes it for every state at once
 * rather than chasing CF7's state classes, which change between versions.
 */
.wpcf7 form .wpcf7-response-output:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
}

.wpcf7-response-output {
  margin: var(--space-4) 0 0 !important;
  padding: var(--space-3) var(--space-4) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium) !important;
}

.wpcf7-mail-sent-ok,
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--color-green) !important;
  background: var(--color-green-dim) !important;
  color: var(--color-green) !important;
}

.wpcf7-validation-errors,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: var(--color-red) !important;
  background: var(--color-red-dim) !important;
  color: var(--color-red) !important;
}

.wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--color-amber) !important;
  background: var(--color-amber-dim) !important;
  color: var(--color-amber) !important;
}

/* Acceptance checkbox */
.wpcf7-form .wpcf7-acceptance {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Two-column form layout helper */
.wpcf7-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 480px) {
  .wpcf7-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* ── Dark section form overrides ── */
.adm-section--dark .wpcf7-form input[type="text"],
.adm-section--dark .wpcf7-form input[type="email"],
.adm-section--dark .wpcf7-form input[type="tel"],
.adm-section--dark .wpcf7-form input[type="url"],
.adm-section--dark .wpcf7-form input[type="number"],
.adm-section--dark .wpcf7-form textarea,
.adm-section--dark .wpcf7-form select,
[data-bg="Dark"] .wpcf7-form input[type="text"],
[data-bg="Dark"] .wpcf7-form input[type="email"],
[data-bg="Dark"] .wpcf7-form input[type="tel"],
[data-bg="Dark"] .wpcf7-form input[type="url"],
[data-bg="Dark"] .wpcf7-form input[type="number"],
[data-bg="Dark"] .wpcf7-form textarea,
[data-bg="Dark"] .wpcf7-form select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.adm-section--dark .wpcf7-form input::placeholder,
.adm-section--dark .wpcf7-form textarea::placeholder,
[data-bg="Dark"] .wpcf7-form input::placeholder,
[data-bg="Dark"] .wpcf7-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.adm-section--dark .wpcf7-form label,
[data-bg="Dark"] .wpcf7-form label {
  color: rgba(255, 255, 255, 0.8);
}

.adm-section--dark .wpcf7-form input[type="file"],
[data-bg="Dark"] .wpcf7-form input[type="file"] {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}
/* ── cs-card on Dark/Black sections: CTA + badge shelf must follow the dark card ── */
.adm-section--dark .cs-card__cta,
.adm-section--black .cs-card__cta {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.adm-section--dark .cs-card:hover .cs-card__cta,
.adm-section--black .cs-card:hover .cs-card__cta {
  background: #ffffff;
  color: #0a0a0a;
}
/* Badge shelf now inherits --cs-surface from .cs-card, so it always equals the card body in
   every context (light, dark-mode token remap, and dark/black sections). No hardcoded colour needed. */
/* Client logo wrap stays white (logos need a light plate) — keep as-is */


/* FAQ author attribution — a byline, not body copy: smaller, quieter, ruled off above. */
.adm-faq-byline {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.adm-faq-byline strong { color: var(--color-text); font-weight: var(--font-weight-medium); }
.adm-faq-byline em { font-style: normal; opacity: .8; }


/* Vacancy apply: the form has gone (Ben para 81), so the copy takes the full column rather than
   sitting in a two-up grid with an empty half. */
.adm-vacancy__apply-copy--full { max-width: 62ch; }
.adm-vacancy__apply-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.adm-vacancy__apply-note { margin-top: var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
/* Centred alignment comes from the section's own Content alignment control (adds .text-center),
   so the measure-capped copy block and the button row follow it instead of staying left. */
.text-center .adm-vacancy__apply-copy--full { margin-inline: auto; }
.text-center .adm-vacancy__apply-actions { justify-content: center; }


/* == adm-navigation == */
/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — NAVIGATION
   Full-width glassmorphic header, mega menu, mobile menu
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════
   SITE HEADER — full width
   ══════════════════════════════ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding: var(--space-5) 0;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--color-border);
  transition: background var(--duration-base) ease,
              padding var(--duration-base) ease,
              box-shadow var(--duration-base) ease;
}

.site-header.is-scrolled {
  padding: var(--space-5) 0;
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-sm);
}

/* Full-width inner container with horizontal padding */
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  padding: 0 var(--space-8);
}


/* ══════════════════════════════
   LOGO
   ══════════════════════════════ */

.site-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-logo img,
.site-logo svg {
  height: 28px;
  width: auto;
  transition: opacity var(--duration-fast) ease;
}

.site-logo:hover img,
.site-logo:hover svg {
  opacity: 0.8;
}


/* ══════════════════════════════
   DESKTOP NAVIGATION
   ══════════════════════════════ */

.site-nav {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

.site-nav .menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-nav .menu-item {
  position: relative;
}

.site-nav .menu-item > a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  /* Only the colour transitions; the hover background is INSTANT. The Customizer's global
     `* { transition-duration:.3s !important }` otherwise forces a 0.3s fade on the background that
     catches mid-fade (esp. on dropdown items as the panel opens), making a hovered dropdown look a
     lighter, half-faded grey than a flat item. !important is required to beat that universal rule. */
  transition: color var(--duration-fast) ease !important;
}

.site-nav .menu-item > a:hover,
.site-nav .menu-item.current-menu-item > a {
  color: var(--color-text);
  background: var(--color-surface-2);
}

/* Keep the parent nav item highlighted while its mega/dropdown is open. Once the cursor moves off the
   link into the open panel, `> a:hover` is lost and the pill would vanish; the panel is a descendant of
   the item so `.menu-item-has-children:hover` (and :focus-within) stays true — use that to hold the bg. */
.site-nav .menu-item-has-children:hover > a,
.site-nav .menu-item-has-children:focus-within > a {
  color: var(--color-text);
  background: var(--color-surface-2);
}

.site-nav .menu-item.current-menu-item > a {
  color: var(--color-brand);
}

/* Dropdown caret — HugeIcons (injected by walker) */
.site-nav .menu-item-has-children > a::after {
  display: none; /* walker injects <i> instead */
}

.nav-caret {
  font-size: 14px;
  opacity: 0.5;
  transition: transform var(--duration-fast) ease;
}

.site-nav .menu-item-has-children:hover .nav-caret {
  transform: rotate(180deg);
}

/* Phone number */
.header-phone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) ease;
}

.header-phone:hover {
  color: var(--color-brand);
}

.header-phone svg,
.header-phone__icon {
  flex-shrink: 0;
}

/* Header icons are HugeIcons font glyphs: size comes from font-size. The caret keeps
   the rotate-on-open rule further down the file — same class, so both apply. */
.header-phone__icon { font-size: 17px; line-height: 1; }
.region-switch__globe { font-size: 15px; line-height: 1; flex: none; }
/* inline-flex is required, not cosmetic: transform (the rotate-on-open below) has no
   effect on a plain inline element, which is what a bare font glyph is. */
.region-switch__btn .region-switch__caret { display: inline-flex; font-size: 14px; line-height: 1; flex: none; }
.mobile-menu__close i { font-size: 20px; line-height: 1; }


/* ══════════════════════════════
   MEGA MENU
   ══════════════════════════════ */

/* Parent items need position:relative so the bridge pseudo-element works */
.site-nav .menu-item-has-children {
  position: static;
}

/* Invisible bridge between nav link and mega menu — prevents hover gap */
.site-nav .menu-item-has-children > a {
  position: relative;
}

.site-nav .menu-item-has-children > a::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 20px; /* bridge the gap */
  display: none;
}

.site-nav .menu-item-has-children:hover > a::before {
  display: block;
}

.mega-menu {
  position: fixed;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--color-surface-1);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility var(--duration-base);
  pointer-events: none;
}

.site-nav .menu-item-has-children:hover > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-menu__inner {
  padding: var(--space-8);
}

/* Two-column layout: links on left, contact panel on right */
.mega-menu__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-8);
  align-items: start;
}

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
  min-width: 0;
}

/* Contact panel — right column */
.mega-menu__contact {
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mega-menu__contact-overline {
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.mega-menu__contact-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.mega-menu__contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.mega-menu__contact-row:hover {
  color: var(--color-brand);
}

.mega-menu__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-dim);
  color: var(--color-brand);
  font-size: 14px;
  flex-shrink: 0;
}

.mega-menu__contact-addresses {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}

.mega-menu__contact-addr address {
  font-style: normal;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
}

.mega-menu__contact-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  margin-bottom: var(--space-1);
}

.mega-menu__contact-cta {
  margin-top: var(--space-2);
  width: 100%;
  justify-content: center;
}

/* Mobile / tablet — stack contact panel below links */
@media (max-width: 900px) {
  .mega-menu__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* Each child item — card-style link */
.mega-menu__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--duration-fast) ease;
}

.mega-menu__item:hover {
  background: var(--color-surface-2);
}

/* Icon circle */
.mega-menu__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-brand-dim);
  color: var(--color-brand);
  font-size: 18px;
}

.mega-menu__item:hover .mega-menu__icon {
  background: var(--color-brand);
  color: #ffffff;
}

/* Text content */
.mega-menu__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mega-menu__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: var(--line-height-snug);
}

.mega-menu__desc {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}


/* ══════════════════════════════
   MEGA MENU OVERLAY
   ══════════════════════════════ */

/* Overlay starts below the header — top is set by JS */
.mega-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: calc(var(--z-header) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) ease,
              visibility var(--duration-base);
  pointer-events: none;
}

.mega-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

[data-theme="dark"] .mega-overlay {
  background: rgba(0, 0, 0, 0.5);
}


/* ══════════════════════════════
   HEADER ACTIONS (right side)
   ══════════════════════════════ */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  margin-left: auto;  /* keep actions right-aligned even when .site-nav (the flex:1 spacer) is hidden on mobile */
}

/* Theme toggle button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.theme-toggle:hover {
  border-color: var(--color-border-brand);
  color: var(--color-brand);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  transition: transform var(--duration-base) var(--ease-spring);
}

[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: flex; }

/* ── Region switcher (UK / UAE) — replaces the header theme toggle ── */
.region-switch { position: relative; }
.region-switch__btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: transparent; color: var(--color-text); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.region-switch__btn:hover { border-color: var(--color-border-strong); color: var(--color-brand); }
.region-switch::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } /* hover bridge to the menu */
.region-switch__caret { transition: transform .2s ease; }
.region-switch:hover .region-switch__caret, .region-switch:focus-within .region-switch__caret { transform: rotate(180deg); }
.region-switch__menu { position: absolute; right: 0; top: calc(100% + 12px); min-width: 210px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 22px 55px -22px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.03); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; z-index: 300; }
.region-switch:hover .region-switch__menu, .region-switch:focus-within .region-switch__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.region-switch__opt { display: block; padding: 10px 14px; color: var(--color-text); text-decoration: none; font-size: var(--font-size-sm); transition: background .15s ease, color .15s ease; }
.region-switch__opt + .region-switch__opt { border-top: 1px solid var(--color-border); }
.region-switch__opt:hover { background: var(--color-surface-2); color: var(--color-brand); }
.region-switch__opt.is-active { color: var(--color-brand); font-weight: var(--font-weight-medium); }
[data-theme="dark"] .region-switch__menu { background: #14141c; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .region-switch__opt + .region-switch__opt { border-top-color: rgba(255,255,255,.08); }
[data-theme="dark"] .region-switch__opt:hover { background: rgba(255,255,255,.06); color: #fff; }

/* Header CTA */
.header-cta {
  font-size: var(--font-size-sm) !important;
  padding: 0.7rem 1.6rem !important;
}


/* ══════════════════════════════
   MOBILE TOGGLE (hamburger)
   ══════════════════════════════ */

.mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: 18px;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.mobile-toggle:hover {
  border-color: var(--color-border-brand);
  color: var(--color-brand);
}

.mobile-toggle__icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 18px;
}

.mobile-toggle__icon span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-base) ease;
}

.mobile-toggle.is-active .mobile-toggle__icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-toggle.is-active .mobile-toggle__icon span:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.is-active .mobile-toggle__icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ══════════════════════════════
   MOBILE MENU
   ══════════════════════════════ */

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 85vw);
  z-index: var(--z-modal); /* above the announcement bar + fixed header so the drawer covers the whole screen and the close button is never hidden */
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  padding: var(--space-16) var(--space-6) var(--space-6);
  overflow-y: auto;
  scrollbar-gutter: stable;  /* reserve scrollbar space so expanding a dropdown doesn't shift content sideways */
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu .menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-menu .menu-item > a,
.mobile-menu .menu-item > .mobile-menu__row > a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) ease;
  text-decoration: none;
}

.mobile-menu .menu-item > a:hover,
.mobile-menu .menu-item > .mobile-menu__row > a:hover {
  background: var(--color-brand-dim);
  color: var(--color-brand);
}

/* Parent row: link + chevron toggle */
.mobile-menu__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.mobile-menu__row > a {
  flex: 1;
  min-width: 0;
}

.mobile-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--duration-base) ease,
              color var(--duration-fast) ease;
}

.mobile-menu__toggle:hover {
  color: var(--color-brand);
}

.menu-item.is-expanded > .mobile-menu__row .mobile-menu__toggle {
  transform: rotate(180deg);
  color: var(--color-brand);
}

/* Collapse sub-menus by default, reveal when parent .is-expanded */
.mobile-menu .sub-menu {
  padding-left: var(--space-4);
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--duration-base) ease,
              opacity var(--duration-base) ease,
              margin-top var(--duration-base) ease;
}

.mobile-menu .menu-item.is-expanded > .sub-menu {
  max-height: 2000px;
  opacity: 1;
  margin-top: var(--space-1);
  padding-bottom: var(--space-2);
}

.mobile-menu .sub-menu .menu-item > a,
.mobile-menu .sub-menu .menu-item > .mobile-menu__row > a {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

/* Contact panel in the mobile drawer — reuses .mega-menu__contact-* styles */
.mobile-menu__contact {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mobile-menu__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 18px;
  cursor: pointer;
  z-index: 2; /* sit above the nav list */
}
.mobile-menu__close:hover { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }

/* Overlay behind mobile menu */
.mobile-overlay {
  position: fixed;
  top: 0; /* cover the FULL screen (incl. announcement bar + header), not just below the header */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: calc(var(--z-modal) - 201); /* sit behind the fixed header so the header stays visible/clickable */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) ease,
              visibility var(--duration-base);
}

.mobile-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

[data-theme="dark"] .mobile-overlay {
  background: rgba(0, 0, 0, 0.6);
}

/* Scroll-lock: freeze the REAL scroll element (<html>). This does NOT reposition anything,
   so the sticky header stays exactly where it is (no jump) and no gap can open behind it.
   Locking <body> instead (as before) broke the sticky header's reference and caused the jump.

   The rule itself now lives in reset.css alongside the other lock classes, because all three
   need the same scrollbar-width padding to stop the page shifting sideways. */

/* ══════════════════════════════════════════════════════════
   FLOATING HEADER → mobile menu drops DOWN as a floating card
   (instead of a full-height slide-in from the right). The animated
   hamburger in the header is the only toggle, so the in-menu close
   button is hidden in this variant.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .adm-header-floating .mobile-menu {
    /* drop from the header's real bottom (set by JS on open — honours the announcement bar at page top) */
    top: calc(var(--adm-menu-hdr-bottom, var(--adm-header-h, 72px)) + 4px);
    left: 8px;
    right: 8px;
    bottom: auto;
    width: auto;
    max-width: none;
    max-height: calc(100svh - var(--adm-menu-hdr-bottom, var(--adm-header-h, 72px)) - 20px);
    border: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
    /* animate a floating drop-down from the top instead of an X-axis slide */
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--duration-base) var(--ease-out),
                opacity var(--duration-base) ease,
                visibility var(--duration-base);
  }
  .adm-header-floating .mobile-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* Floating variant: no in-menu close — the animated header hamburger toggles it. */
  .adm-header-floating .mobile-menu__close { display: none; }
}

/* ── Header spacer ── */
.header-spacer {
  height: 72px;
}

/* ══════════════════════════════════════════════════════════
   MEGA MENU v2 — contained card (pillars · sub-services · contact)
   ══════════════════════════════════════════════════════════ */
.site-nav .menu-item-has-children { position: static; }
.site-nav .menu-item-has-children > a .nav-caret {
  display: inline-block; margin-left: 4px; font-size: 1em; line-height: 1;
  opacity: .5; vertical-align: middle; transition: transform .2s ease, opacity .2s ease;
}
.site-nav .menu-item-has-children:hover > a .nav-caret { transform: rotate(180deg); opacity: .9; }

/* Full-viewport-width transparent layer so there is a continuous hover surface from any
   (left-aligned) nav item down to the centred card — otherwise moving the cursor across the
   horizontal gap on wide screens drops the menu before you reach it. */
.mega {
  position: absolute; left: 50%; top: 100%; padding-top: 14px; transform: translateX(-50%) translateY(8px);
  width: 100vw; z-index: 200;
  display: flex; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.site-nav .menu-item-has-children:hover > .mega,
.site-nav .menu-item-has-children:focus-within > .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
/* Hover bridge across the ~25px gap from the nav item to the mega (floating-header mode: header 90px,
   pill nav ends ~65px, mega starts ~90px). MUST set display:block — the earlier caret rule
   `.site-nav .menu-item-has-children > a::after { display:none }` (same selector, so it wins on the
   `display` property) otherwise kills this pseudo and the menu drops in the gap. Height covers the gap
   with a small overlap; left/right:0 keeps it link-width (the mega itself is full-width below). */
.site-nav .menu-item-has-children > a::after {
  content: ''; display: block; position: absolute; left: 0; right: 0; top: 100%; height: 30px;
}

.mega__card {
  width: min(1180px, calc(100vw - 48px));
  display: grid; grid-template-columns: 260px 1fr 320px;
  background: #fff; border-radius: var(--radius-xl, 24px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 30px 80px -20px rgba(var(--color-brand-rgb,229,0,109), .45), 0 10px 40px rgba(0,0,0,.18);
  overflow: hidden;
}
/* Simple (2-level) megas use the same card + contact panel as Services */
.mega--simple .mega__card { grid-template-columns: 1fr 320px; }
.mega__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1) var(--space-6); align-content: start; padding: var(--space-6); }
.mega__links .mega__sublink { font-size: var(--font-size-base); padding: var(--space-2) 0; }
.mega__links .mega__viewall { grid-column: 1 / -1; margin-top: var(--space-3); }

/* ── Pillars (left) ── */
.mega__pillars { padding: var(--space-5); display: flex; flex-direction: column; gap: 2px; }
.mega__pillar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md, 10px);
  font-size: var(--font-size-lg, 1.0625rem); font-weight: var(--font-weight-medium, 500);
  color: var(--color-text); text-decoration: none; transition: background .15s ease, color .15s ease;
}
.mega__pillar svg { width: 18px; height: 18px; opacity: 0; transition: opacity .15s ease; color: var(--color-brand); }
.mega__pillar:hover, .mega__pillar.is-active {
  background: #fff; color: var(--color-brand);
  box-shadow: 0 0 0 1px var(--color-border, #ececec), 0 6px 18px rgba(0,0,0,.06);
}
.mega__pillar.is-active svg, .mega__pillar:hover svg { opacity: 1; }

/* ── Sub-service panels (middle) ── */
.mega__subs { padding: var(--space-6) var(--space-6) var(--space-6) var(--space-4); border-left: 1px solid var(--color-border, #ececec); background-color: var(--color-surface-1); }
.mega__subpanel { display: none; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-6); }
.mega__subpanel.is-active { display: grid; }
.mega__sublink {
  display: block; padding: var(--space-2) 0; color: var(--color-text-secondary, #6b6b6b);
  font-size: var(--font-size-sm, .9375rem); text-decoration: none; transition: color .15s ease;
}
.mega__sublink:hover { color: var(--color-brand); }
.mega__viewall { grid-column: 1 / -1; margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 6px; color: var(--color-brand); font-weight: 500; font-size: var(--font-size-sm); text-decoration: none; }
.mega__viewall svg { width: 15px; height: 15px; }

/* ── Simple grid (Industries / About) ── */
.mega__simple-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-6); padding: var(--space-6); }
.mega--simple .mega__sublink { font-size: var(--font-size-base); }

/* ── Plain dropdown (About) — narrow panel under the item, no mega card / contact ── */
.site-nav .menu-item--dropdown { position: relative; }
.nav-drop {
  position: absolute; left: -12px; top: 100%; padding-top: 32px; /* aligns panel top with the mega card; -12px lines dropdown text up with the nav item text */
  transform: translateY(8px);
  min-width: 220px; z-index: 200;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.site-nav .menu-item--dropdown:hover > .nav-drop,
.site-nav .menu-item--dropdown:focus-within > .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.nav-drop__list {
  list-style: none; margin: 0; padding: var(--space-2);
  background: #fff; border-radius: var(--radius-lg, 16px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 20px 50px -20px rgba(var(--color-brand-rgb,229,0,109), .35), 0 8px 30px rgba(0,0,0,.15);
}
.nav-drop__link {
  display: block; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md, 10px);
  color: var(--color-text); text-decoration: none; font-size: var(--font-size-base); white-space: nowrap;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.nav-drop__link:hover { background: var(--color-surface-2); color: var(--color-brand); }
[data-theme="dark"] .nav-drop__list { background: #14141c; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 20px 50px -20px rgba(0,0,0,.6); }
[data-theme="dark"] .nav-drop__link { color: rgba(255,255,255,.85); }
[data-theme="dark"] .nav-drop__link:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ── Contact panel (right) ── */
.mega__contact { background: var(--color-bg, #f5f5f7); padding: var(--space-6); display: flex; flex-direction: column; }
.mega__contact-overline { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand); }
.mega__contact-title { font-size: var(--font-size-lg); font-weight: 500; margin: var(--space-1) 0 var(--space-4); }
.mega__contact-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; color: var(--color-text); text-decoration: none; font-size: var(--font-size-sm); }
.mega__contact-row:hover { color: var(--color-brand); }
.mega__contact-icon { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; background: var(--color-brand-dim); color: var(--color-brand); }
.mega__contact-icon svg { width: 15px; height: 15px; }
.mega__contact-addresses { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-3); }
.mega__contact-label { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary); }
.mega__contact-label svg { width: 13px; height: 13px; }
.mega__contact-addr address { font-style: normal; font-size: var(--font-size-xs); line-height: 1.5; color: var(--color-text-muted); margin-top: 2px; }
/* Per-office number, under its address in both the mega panel and the mobile panel. No icon:
   the label's pin hangs to the left of the text, so an icon here made a THIRD left edge
   (label text 19px, address 0, number 17px). Flush with the address instead. */
.mega__contact-tel,
.mega-menu__contact-tel { display: block; width: fit-content; margin-top: 3px; font-size: var(--font-size-xs); font-weight: 500; line-height: 1.5; color: var(--color-text); text-decoration: none; transition: color .18s ease; }
.mega__contact-tel:hover, .mega__contact-tel:focus-visible,
.mega-menu__contact-tel:hover, .mega-menu__contact-tel:focus-visible { color: var(--color-primary); }
.mega__contact-cta { margin-top: var(--space-6); width: 100%; justify-content: center; }

/* ── Dark mode ──
   The card bg is hardcoded #fff; without these overrides the panel stays white
   in dark mode, inactive pillars (now light text) vanish on it, and only the
   brand-coloured active pillar shows — reading as a stray floating button. */
[data-theme="dark"] .mega__card {
  background: #121316;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08),
              0 30px 80px -20px rgba(var(--color-brand-rgb,229,0,109), .40),
              0 10px 40px rgba(0,0,0,.55);
}
[data-theme="dark"] .mega__pillar { color: rgba(255,255,255,.82); }
[data-theme="dark"] .mega__pillar:hover,
[data-theme="dark"] .mega__pillar.is-active {
  background: rgba(255,255,255,.06);
  color: var(--color-brand);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
[data-theme="dark"] .mega__subs { border-left-color: rgba(255,255,255,.08); }
[data-theme="dark"] .mega__sublink,
[data-theme="dark"] .mega__links .mega__sublink { color: rgba(255,255,255,.68); }
[data-theme="dark"] .mega__sublink:hover { color: var(--color-brand); }
[data-theme="dark"] .mega__contact { background: rgba(255,255,255,.035); }
[data-theme="dark"] .mega__contact-row { color: rgba(255,255,255,.82); }
[data-theme="dark"] .mega__contact-addresses { border-top-color: rgba(255,255,255,.10); }

@media (max-width: 1024px) { .mega { display: none; } }

/* ══════════════════════════════
   ADM Control — header layout variants (driven by body class)
   ══════════════════════════════ */
/* Centered: logo left · nav centred · actions right */
.adm-header-centered .header-inner { position: relative; }
.adm-header-centered .site-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* Split: logo centred · nav left · actions right */
.adm-header-split .header-inner { position: relative; }
.adm-header-split .site-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.adm-header-split .site-nav { margin-right: auto; }
/* Sticky toggle — header is fixed by default; un-stick = scroll away */
body:not(.adm-header-sticky) .site-header { position: absolute; }
/* Transparent over hero until scrolled (uses the existing .is-scrolled JS hook) */
.adm-header-transparent .site-header:not(.is-scrolled) { background: transparent; box-shadow: none; border-bottom-color: transparent; }
@media (max-width: 1024px) {
  .adm-header-centered .site-nav, .adm-header-split .site-logo { position: static; transform: none; }
}

/* ══════════════════════════════
   FLOATING CARD HEADER (ADM Control → Header → "Floating card header")
   Detaches .header-inner into a rounded, contained, glass card that floats with a
   gap from the edges — the header equivalent of the section "card" container option.
   ══════════════════════════════ */
.adm-header-floating .site-header {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none; /* the blur belongs to the card, not the full-width bar */
  padding: 8px; /* even 8px gap from the viewport edges */
}
.adm-header-floating .header-inner {
  max-width: none; /* full width — only the site-header padding sets the edge gap */
  margin: 0;
  padding: var(--space-4) var(--space-8);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-base) ease, background var(--duration-base) ease;
}
.adm-header-floating .site-header.is-scrolled { background: transparent; box-shadow: none; }
.adm-header-floating .site-header.is-scrolled .header-inner { box-shadow: var(--shadow-lg); }
/* Transparent-over-heroes + floating: keep the floating pill readable over the hero. */
.adm-header-transparent.adm-header-floating .site-header:not(.is-scrolled) .header-inner { background: var(--glass-bg); }
/* While a mega/dropdown menu is open (JS adds .mega-open), make the header's glass surface OPAQUE so the
   dim .mega-overlay behind it can't bleed through and darken it — that darkening is what made hovered
   dropdown pills look lighter than flat items. Covers the floating pill (.header-inner) and the standard
   full-width bar (.site-header). !important beats the transparent/glass floating + transparent-hero rules. */
.site-header.mega-open .header-inner,
body:not(.adm-header-floating) .site-header.mega-open {
  background: var(--color-bg) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  transition: none !important; /* apply instantly — the global `* {transition:.3s}` otherwise leaves it mid-fade (translucent) so the overlay still bleeds through */
}

/* Empty pillar panel.
   Four UAE pillars have no sub-services by design of the keyword map, so an empty panel is a
   normal state rather than an edge case. The --empty modifier MUST be scoped to .is-active,
   because .mega__subpanel is display:none by default and an unscoped rule showed all the empty
   panels stacked on top of each other at once. */
.mega__subpanel--empty.is-active { display: block; }
.mega__empty { max-width: 46ch; }
.mega__empty-title { margin: 0 0 6px; font-weight: 500; color: var(--color-text-primary); }
.mega__empty-desc { margin: 0 0 14px; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.55; }


/* ── Narrow phones: stop the header actions overhanging ──────────────────────
   The bar is logo + region picker + burger with a 24px gap inside 32px padding: 372px of
   demand in a 359px bar at 375px wide, so the actions hung 14px past the padding, against the
   rounded edge of the floating pill. Only viewports under ~390px are affected, so the gutter
   and gap give way rather than the controls, which are touch targets.

   Last in the file on purpose. .adm-header-floating .header-inner sets the pill's padding at
   the same (0,2,0) specificity, so this only wins by coming after it; padding-inline leaves
   that rule's vertical padding alone. */
@media (max-width: 420px) {
  .header-inner,
  .adm-header-floating .header-inner {
    gap: var(--space-3);
    padding-inline: var(--space-4);
  }
}


/* == adm-footer-css == */
/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — FOOTER
   Multi-column footer with offices, links, awards, newsletter
   ═══════════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--color-surface-1);
  border-top: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

/* Subtle brand gradient at top edge */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-brand), transparent);
}


/* ══════════════════════════════
   FOOTER AWARDS MARQUEE (top band)
   ══════════════════════════════ */

.footer-awards {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
}

.footer-awards__title {
  text-align: center;
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.footer-award-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  min-width: 160px;
}

.footer-award-item img {
  height: 64px;
  width: auto;
  /* Award badges are monochrome — flatten every one to a single colour so the set is uniform
     and fully visible on the footer surface: solid ink in light mode, solid white in dark. */
  filter: brightness(0);
}
[data-theme="dark"] .footer-award-item img {
  filter: brightness(0) invert(1);
}

.footer-award-item__text {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}


/* ══════════════════════════════
   FOOTER MAIN GRID
   ══════════════════════════════ */

.footer-main {
  padding: var(--space-16) 0 var(--space-12);
}

/* Brand plus four equal link columns — Services, Industries, Training, Company.
   The offices used to be a fifth column, which made them a narrow vertical stack
   of three addresses alongside the links. They now sit on their own full-width
   row underneath, laid out side by side, so each address has room to breathe and
   the link columns get the width back. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(var(--footer-cols, 4), 1fr);
  gap: var(--space-10);
}

.footer-contact {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-8);
}


/* ══════════════════════════════
   FOOTER — BRAND COLUMN
   ══════════════════════════════ */

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.footer-brand__logo img,
.footer-brand__logo svg {
  height: 32px;
  width: auto;
}

.footer-brand__motto {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}
.footer-brand__tagline {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.footer-social {
  display: flex;
  gap: var(--space-2);
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 16px;
  transition: all var(--duration-fast) ease;
}

.footer-social__link:hover {
  border-color: var(--color-border-brand);
  color: var(--color-brand);
  background: var(--color-brand-dim);
}


/* ══════════════════════════════
   FOOTER — LINK COLUMNS
   ══════════════════════════════ */

.footer-links__title {
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.footer-links__title a {
  color: inherit;
  transition: color var(--duration-fast) ease;
}

.footer-links__title a:hover {
  color: var(--color-brand);
}

.footer-links ul,
.footer-links .menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li a {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 0.75px;
  transition: color var(--duration-fast) ease, background-size 0.35s var(--ease-out);
}

.footer-links li a:hover {
  color: var(--color-brand);
  background-size: 100% 0.75px;
}


/* ══════════════════════════════
   FOOTER — OFFICE COLUMN / NEWSLETTER
   ══════════════════════════════ */

/* Offices across a row rather than down a column. auto-fit keeps it sensible at
   any count — three on UK, however many UAE carries — and collapses to fewer per
   row as the width drops instead of squeezing them. */
.footer-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
}

.footer-office {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-office__city {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-office__city i {
  color: var(--color-brand);
  font-size: 14px;
}

.footer-office__address {
  font-size: var(--font-size-xs);
  font-style: normal;
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.footer-office__address a {
  color: var(--color-text-secondary);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 0.75px;
  transition: color var(--duration-fast) ease, background-size 0.35s var(--ease-out);
}

.footer-office__address a:hover {
  color: var(--color-brand);
  background-size: 100% 0.75px;
}

/* Newsletter form */
.footer-newsletter__title {
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.footer-newsletter__form {
  display: flex;
  gap: var(--space-2);
}

.footer-newsletter__input {
  flex: 1;
  padding: 0.6rem 0.75rem;
  font-size: var(--font-size-xs);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--duration-fast) ease;
}

.footer-newsletter__input:focus {
  border-color: rgba(var(--color-brand-rgb), 0.5);
}

.footer-newsletter__input::placeholder {
  color: var(--color-text-muted);
}

.footer-newsletter__btn {
  padding: 0.6rem 1rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background: var(--color-brand);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
  white-space: nowrap;
}

.footer-newsletter__btn:hover {
  background: var(--color-brand-hover);
}


/* ══════════════════════════════
   FOOTER — BOTTOM BAR
   ══════════════════════════════ */

.footer-bottom {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
}

.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.footer-copyright {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.footer-bottom-links {
  display: flex;
  align-items: center; /* stop the taller theme-toggle stretching the links (which floated the hover underline far below the text) */
  /* A fifth item (the locale link) joined this row, and the bar has no room for five
     on a narrow viewport — wrap rather than overflow. */
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3) var(--space-6);
}

.footer-bottom-links a {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 0.75px;
  transition: color var(--duration-fast) ease, background-size 0.35s var(--ease-out);
}

.footer-bottom-links a:hover {
  color: var(--color-brand);
  background-size: 100% 0.75px;
}

/* Locale link — the footer's copy of the header country switcher, which the header
   drops at ≤1439px. Sits with the legal links but carries a globe so it reads as a
   control rather than another policy page. */
.footer-region-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-region-link__icon {
  font-size: 14px;
  line-height: 1;
  flex: none;
}

/* Brand dot separator */
.footer-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-brand);
  flex-shrink: 0;
  opacity: 0.5;
}

/* ══════════════════════════════
   ADM Control — footer layout variants (driven by body class)
   ══════════════════════════════ */
/* Simple: drop the awards marquee + contact column, keep brand + link columns */
.adm-footer-simple .footer-awards,
.adm-footer-simple .footer-contact { display: none; }
.adm-footer-simple .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
/* Minimal: a single row — brand + socials only */
.adm-footer-minimal .footer-awards,
.adm-footer-minimal .footer-links,
.adm-footer-minimal .footer-contact { display: none; }
.adm-footer-minimal .footer-grid { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.adm-footer-minimal .footer-brand { display: flex; align-items: center; gap: var(--space-6); margin: 0; }
.adm-footer-minimal .footer-brand__tagline { display: none; }
@media (max-width: 640px) {
  .adm-footer-minimal .footer-grid { flex-direction: column; text-align: center; }
}

/* Phone: the footer grid still ran two columns here, which left the office addresses crammed into a
   narrow left cell with an empty half beside them while the sibling columns centred — the addresses
   looked misaligned rather than intentionally left. One column, centred to match everything else.
   Same treatment landing.css already applies to .adm-lp footers. */
@media (max-width: 560px) {
  /* .site-footer prefix is load-order insurance: responsive.css loads after this file and sets
     .footer-grid to two columns at 768px, which at equal specificity would win and leave the
     addresses in a narrow left column. */
  .site-footer .footer-grid { grid-template-columns: 1fr; }
  .site-footer .footer-brand { grid-column: auto; }
  .footer-contact, .footer-office, .footer-office__address { text-align: center; }
  .footer-office__city { justify-content: center; }
  .footer-office__contact a { margin-left: auto; margin-right: auto; }
}

/* ── Built award laurel badge (footer marquee + event pages) ────────────────────────────
   Composed from: stars + the theme's laurel pair + the event-year logo (mono) + category.
   No laurel images are uploaded; the one colour logo is filtered black (light) / white (dark). */
.adm-wreath { display: inline-flex; flex: 0 0 auto; width: max-content; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: var(--space-5) var(--space-6); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); }
.adm-wreath__stars { font-size: 15px; letter-spacing: 4px; line-height: 1; color: currentColor; opacity: .85; }
.adm-wreath__core { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; }
/* Override the 16px hero .adm-laurel sizing for the larger footer wreath. */
.adm-wreath__core .adm-laurel { width: 38px; height: 92px; color: currentColor; flex: 0 0 auto; }
.adm-wreath__logo { display: inline-flex; align-items: center; justify-content: center; min-width: 104px; max-width: 156px; padding: 0 4px; }
.adm-wreath__logo img { max-height: 66px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; filter: brightness(0); }
[data-theme="dark"] .adm-wreath__logo img { filter: brightness(0) invert(1); }
.adm-wreath__result { font-family: var(--font-mono); font-size: 11px; font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: .1em; color: var(--color-brand); text-align: center; max-width: 230px; line-height: 1.4; margin-top: 8px; }

.footer-awards .magic-marquee__track { align-items: center; gap: var(--space-8); }

/* Light/dark toggle relocated into the footer bottom bar (stakeholder request 2026-07) */
/* Light/dark control as a sliding toggle switch (pill track + knob), not a plain button. */
.footer-bottom .footer-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 54px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-2);
  cursor: pointer;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.footer-bottom .footer-theme-toggle:hover { border-color: var(--color-border-brand); }
/* Both icons always visible at the ends (override the single-icon nav rules). */
html[data-theme] .footer-theme-toggle .icon-sun,
html[data-theme] .footer-theme-toggle .icon-moon {
  display: inline-flex;
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  color: var(--color-text-muted);
  transition: color var(--duration-fast) ease;
}
.footer-theme-toggle .icon-sun svg,
.footer-theme-toggle .icon-moon svg { width: 12px; height: 12px; }
/* Sliding knob */
.footer-theme-toggle__knob {
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: transform var(--duration-base) var(--ease-spring), background var(--duration-fast) ease;
}
html[data-theme="dark"] .footer-bottom .footer-theme-toggle { background: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .footer-theme-toggle__knob { transform: translateY(-50%) translateX(26px); background: var(--color-brand); }
/* Highlight the icon for the active mode */
html[data-theme="light"] .footer-theme-toggle .icon-sun { color: var(--color-brand); }
html[data-theme="dark"] .footer-theme-toggle .icon-moon { color: #fff; }

/* Per-office phone/email under each footer address */
.footer-office__contact { display: block; margin-top: var(--space-2); }
/* fit-content so the hover underline hugs the text, not the full column width */
.footer-office__contact a { display: block; width: fit-content; max-width: 100%; }

/* ── Phone: link lists in two columns ───────────────────────────────────────────────────────────────
   With the footer grid collapsed to one column, each list ran as a single tall stack — Industries alone
   is 12 items, so the footer became an endless scroll of one-word rows with a whole screen of dead space
   beside them. The headings stay full width; only the lists split, so the grouping still reads. */
@media (max-width: 560px) {
  .site-footer .footer-links ul,
  .site-footer .footer-links .menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-5);
    align-content: start;
  }
  /* 10px uppercase mono is too small to scan on a phone; these are navigation labels, not fine print. */
  .site-footer .footer-links__title { font-size: var(--font-size-xs); margin-bottom: var(--space-4); }
}

/* ── Phone/tablet: centre the footer ────────────────────────────────────────────────────────────────
   The footer is rendered by footer.php, outside the Page Blocks system, so the per-section "Centre
   content on mobile" toggle cannot reach it — without this the page centres all the way down and then
   the footer alone reverts to left, which reads as a bug rather than a choice.

   Matches the 860px breakpoint the block centring uses so the two never disagree at any width. The
   two-column link lists from the rule above are kept; only their contents centre. */
@media (max-width: 860px) {
  .site-footer,
  .site-footer * { text-align: center; }
  /* Flex rows need justify-content — text-align cannot move a flex item. */
  .site-footer .footer-social,
  .site-footer .footer-brand,
  .site-footer .footer-office__city,
  .site-footer .footer-legal,
  .site-footer .footer-bottom-links,
  .site-footer .footer-bottom { justify-content: center; }
  /* The brand block is a column stack; centre its items rather than stretching them. */
  .site-footer .footer-brand { align-items: center; }
  /* Logo and any inline-block badge centre as boxes. */
  .site-footer .footer-logo,
  .site-footer .footer-brand__logo { margin-left: auto; margin-right: auto; }
  /* Addresses read as blocks of their own; centre the block, keep the lines together. */
  .site-footer .footer-office__address { margin-left: auto; margin-right: auto; }
}


/* == adm-sections == */
/* ═══════════════════════════════════════════════════════════════════
   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: #6b6b73;
  --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-text);
}

.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-text);
}


/* ══════════════════════════════
   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-text);
  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-brand-text: var(--color-brand);
  --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-text); }
.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-text); 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-text); 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-text); 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: 0; }
  /* 24px tappable button, 8px painted dot — see the note on .adm-carousel__dot. */
  .adm-mcar__dot { box-sizing: border-box; padding: 8px; background-clip: content-box; }
  .adm-mcar__dot { width: 24px; height: 24px; 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: 44px; background: var(--color-brand); }   /* 28px pill + padding */

  /* 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-text); 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: #0f7a37; }   /* was #15a34a: 3.02:1 on #f5f5f7 */
.adm-review__verified i { color: #0f7a37; }
/* 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; }
/* Page controls are anchors now, not buttons, so the pages are crawlable and can be opened in
   a tab. An anchor is inline and has an underline, so both are undone here to keep the control
   looking exactly as it did. */
.adm-cards-more__page { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; 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); }
}


/* == adm-magic-ui == */
/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — MAGIC UI EFFECTS
   Premium visual effects inspired by MagicUI design system.
   All effects are composable utility classes.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════
   ANIMATED GRADIENT BORDER
   Rotating conic gradient border using mask trick.
   Usage: <div class="magic-border"><div class="magic-border__content">...</div></div>
   ══════════════════════════════ */

.magic-border {
  position: relative;
  border-radius: var(--radius-md);
}

/* Universal animated gradient border — masked to a 1.5px edge so it works on ANY element
   (card or container) without an inner .magic-border__content wrapper. */
.magic-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    var(--color-brand),
    var(--color-purple-light),
    var(--color-blue-light),
    var(--color-brand)
  );
  background-size: 300% 300%;
  animation: magic-border-shift 4s ease infinite;
  -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;
  pointer-events: none;
  z-index: 0;
}

.magic-border__content {
  position: relative;
  background: var(--color-surface-1);
  border-radius: calc(var(--radius-md) - 1px);
  z-index: 1;
}

/* Works in ALL browsers — no @property needed */
@keyframes magic-border-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Enhanced version for browsers that support @property */
@supports (background: conic-gradient(from 0deg, red, blue)) {
  .magic-border::before {
    background: conic-gradient(
      from var(--magic-border-angle, 0deg),
      transparent 0%,
      var(--color-brand) 10%,
      var(--color-purple-light) 20%,
      var(--color-blue-light) 30%,
      transparent 40%
    );
    animation: magic-border-rotate 4s linear infinite;
  }
  @keyframes magic-border-rotate {
    to { --magic-border-angle: 360deg; }
  }
}

@property --magic-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


/* ══════════════════════════════
   SHIMMER / SHINE SWEEP
   Horizontal light sweep across an element.
   Usage: class="magic-shimmer"
   ══════════════════════════════ */

.magic-shimmer {
  position: relative;
  overflow: hidden;
}

.magic-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(var(--color-brand-rgb), 0.04) 35%,
    rgba(var(--color-brand-rgb), 0.08) 50%,
    rgba(var(--color-brand-rgb), 0.04) 65%,
    transparent 80%
  );
  transform: translateX(-100%);
  animation: magic-shimmer 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes magic-shimmer {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* Shimmer on hover only */
.magic-shimmer--hover::after {
  animation: none;
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.magic-shimmer--hover:hover::after {
  transform: translateX(100%);
}


/* ══════════════════════════════
   GLOW EFFECT
   Pulsing brand shadow.
   Usage: class="magic-glow"
   ══════════════════════════════ */

.magic-glow {
  box-shadow: 0 0 30px rgba(var(--color-brand-rgb), 0.2), 0 0 60px rgba(var(--color-brand-rgb), 0.1);
  animation: magic-glow-pulse 3s ease-in-out infinite;
}

@keyframes magic-glow-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(var(--color-brand-rgb), 0.2), 0 0 60px rgba(var(--color-brand-rgb), 0.1); }
  50% { box-shadow: 0 0 50px rgba(var(--color-brand-rgb), 0.35), 0 0 100px rgba(var(--color-brand-rgb), 0.15); }
}

.magic-glow--hover {
  animation: none;
  transition: box-shadow var(--duration-base) ease;
}

.magic-glow--hover:hover {
  box-shadow: 0 0 30px rgba(var(--color-brand-rgb), 0.2);
}


/* ══════════════════════════════
   SPOTLIGHT / MOUSE FOLLOW
   Radial gradient follows mouse cursor.
   JS sets --mouse-x and --mouse-y on the element.
   Usage: class="magic-spotlight" (requires JS init)
   ══════════════════════════════ */

.magic-spotlight {
  position: relative;
  overflow: hidden;
}

.magic-spotlight::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--color-brand-rgb), 0.08) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  left: var(--mouse-x, 50%);
  top: var(--mouse-y, 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  z-index: 0;
}

.magic-spotlight:hover::before {
  opacity: 1;
}


/* ══════════════════════════════
   GLASS CARD (enhanced glassmorphism)
   Usage: class="magic-glass"
   ══════════════════════════════ */

.magic-glass {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  /* themed border (visible on light AND dark) — the raw --glass-border is white and vanishes on light */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.magic-glass--strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Glass with inner light reflection */
.magic-glass--shine {
  position: relative;
}

.magic-glass--shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3) 50%,
    transparent
  );
  pointer-events: none;
}


/* ══════════════════════════════
   MARQUEE (infinite horizontal scroll)
   Usage: <div class="magic-marquee"><div class="magic-marquee__track">...</div></div>
   JS clones children for seamless loop.
   ══════════════════════════════ */

.magic-marquee {
  overflow: hidden;
  position: relative;
  --marquee-duration: 30s;
  --marquee-gap: var(--space-8);
}

.magic-marquee__track {
  display: flex;
  gap: var(--marquee-gap);
  width: max-content;
  animation: magic-marquee-scroll var(--marquee-duration) linear infinite;
}

.magic-marquee:hover .magic-marquee__track {
  animation-play-state: paused;
}

.magic-marquee--reverse .magic-marquee__track {
  animation-direction: reverse;
}

/* Fade edges — uses CSS mask so it works on any background (images, gradients, etc.) */
.magic-marquee {
  --marquee-fade: 100px;
  -webkit-mask-image: linear-gradient(to right, transparent, black var(--marquee-fade), black calc(100% - var(--marquee-fade)), transparent);
  mask-image: linear-gradient(to right, transparent, black var(--marquee-fade), black calc(100% - var(--marquee-fade)), transparent);
}

/* The fade was a fixed 100px, which is about 8% of a desktop marquee and reads as a soft edge.
   On a phone the same marquee is ~317px wide, so 100px a side leaves only 117px — 37% — fully
   opaque, while an award card is 213px. Every card then sits permanently in a fade and the logos
   look chopped off rather than scrolling away. A 24px fade keeps the soft edge and gives the
   cards back ~84% of the width. */
@media (max-width: 860px) {
  .magic-marquee { --marquee-fade: 24px; }
}

@keyframes magic-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Vertical marquee variant */
.magic-marquee--vertical {
  overflow: hidden;
  height: 400px;
}

.magic-marquee--vertical .magic-marquee__track {
  flex-direction: column;
  animation-name: magic-marquee-scroll-vertical;
}

@keyframes magic-marquee-scroll-vertical {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}


/* ══════════════════════════════
   ORBIT (items rotating around center)
   Container positions items in a circle.
   Usage: <div class="magic-orbit"><div class="magic-orbit__item">...</div></div>
   JS calculates positions for N items.
   ══════════════════════════════ */

.magic-orbit {
  position: relative;
  width: 400px;
  height: 400px;
}

/* The orbit ring */
.magic-orbit__ring {
  position: absolute;
  inset: 0;
  border: 1px dashed var(--color-border);
  border-radius: 50%;
  /* The ring border is static; the items travel along it (see .magic-orbit__item offset-path). */
}
/* Items orbit at different speeds/directions per ring; offset-rotate:0 (on the item) keeps every
   logo upright regardless — no counter-rotation to drift and flip the logos/tooltips. */
.magic-orbit__ring--reverse .magic-orbit__item { animation-direction: reverse; }
.magic-orbit__ring--slow .magic-orbit__item { animation-duration: 40s; }

/* Items on the orbit */
.magic-orbit__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  /* Travel around the ring via offset-path; offset-rotate:0 = never rotate on own axis (upright). */
  offset-rotate: 0deg;
  animation: magic-orbit-travel 20s linear infinite;
}

@keyframes magic-orbit-travel {
  to { offset-distance: 100%; }
}

/* Center element */
.magic-orbit__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

@keyframes magic-orbit-rotate {
  to { transform: rotate(360deg); }
}

@keyframes magic-orbit-counter-rotate {
  to { transform: rotate(-360deg); }
}


/* ══════════════════════════════
   PARTICLES (CSS-only floating dots)
   Usage: class="magic-particles" on a container.
   Particle elements are created by JS.
   ══════════════════════════════ */

.magic-particles {
  position: relative;
  overflow: hidden;
}

.magic-particle {
  position: absolute;
  width: var(--particle-size, 4px);
  height: var(--particle-size, 4px);
  border-radius: 50%;
  background: rgba(var(--color-brand-rgb), var(--particle-opacity, 0.3));
  animation: magic-particle-float var(--particle-duration, 6s) ease-in-out infinite;
  animation-delay: var(--particle-delay, 0s);
  pointer-events: none;
}

@keyframes magic-particle-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: var(--particle-opacity, 0.3);
  }
  25% {
    transform: translate(var(--particle-dx, 20px), var(--particle-dy, -30px)) scale(1.2);
  }
  50% {
    transform: translate(calc(var(--particle-dx, 20px) * -0.5), calc(var(--particle-dy, -30px) * 1.5)) scale(0.8);
    opacity: calc(var(--particle-opacity, 0.3) * 1.5);
  }
  75% {
    transform: translate(calc(var(--particle-dx, 20px) * 0.8), calc(var(--particle-dy, -30px) * 0.3)) scale(1.1);
  }
}


/* ══════════════════════════════
   GRADIENT TEXT
   Brand gradient on text.
   Usage: class="magic-gradient-text"
   ══════════════════════════════ */

.magic-gradient-text {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-purple-light) 50%, var(--color-blue-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.magic-gradient-text--animate {
  background-size: 200% 200%;
  animation: magic-gradient-shift 5s ease infinite;
}

@keyframes magic-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}


/* ══════════════════════════════
   ANIMATED MESH GRADIENT BG
   Usage: class="magic-mesh-bg"
   ══════════════════════════════ */

.magic-mesh-bg {
  position: relative;
}

.magic-mesh-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(var(--color-brand-rgb), 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(107, 70, 193, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(99, 179, 237, 0.04) 0%, transparent 50%);
  animation: magic-mesh-shift 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes magic-mesh-shift {
  0%, 100% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
  }
  33% {
    background-position: 30% 70%, 70% 30%, 20% 80%;
  }
  66% {
    background-position: 70% 30%, 30% 70%, 80% 20%;
  }
}


/* ══════════════════════════════
   BLUR FADE IN
   Elements fade in from a blurred state.
   Usage: class="magic-blur-in" (triggered by scroll observer)
   ══════════════════════════════ */

.magic-blur-in {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(10px);
  transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease;
}

.magic-blur-in.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}


/* ══════════════════════════════
   DOT GRID BACKGROUND
   Brand-tinted dot pattern.
   Usage: class="magic-dot-grid"
   ══════════════════════════════ */

.magic-dot-grid {
  position: relative;
}

.magic-dot-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(var(--color-brand-rgb), 0.15) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}


/* ══════════════════════════════
   LINE GRID BACKGROUND
   Brand-tinted line grid (from dashboard).
   Usage: class="magic-line-grid"
   ══════════════════════════════ */

.magic-line-grid {
  position: relative;
}

.magic-line-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--color-brand-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-brand-rgb), 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* Animated squares container */
.magic-line-grid__cells {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.magic-line-grid__square {
  position: absolute;
  background: rgba(var(--color-brand-rgb), 0.06);
  border: 1px solid rgba(var(--color-brand-rgb), 0.12);
  border-radius: 1px;
  animation: magic-grid-pulse ease-in-out forwards;
  opacity: 0;
}

/* Dark sections — brighter grid squares */
.adm-section--dark .magic-line-grid__square {
  background: rgba(var(--color-brand-rgb), 0.08);
  border-color: rgba(var(--color-brand-rgb), 0.18);
}

@keyframes magic-grid-pulse {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}


/* ══════════════════════════════
   BORDER BEAM
   A light beam that travels along the border.
   Usage: class="magic-beam"
   ══════════════════════════════ */

.magic-beam {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.magic-beam::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    var(--magic-beam-angle, 90deg),
    transparent 0%,
    transparent 40%,
    var(--color-brand) 50%,
    transparent 60%,
    transparent 100%
  );
  -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: magic-beam-travel 4s linear infinite;
  pointer-events: none;
}

@property --magic-beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes magic-beam-travel {
  to { --magic-beam-angle: 360deg; }
}


/* ══════════════════════════════
   NUMBER TICKER
   Style for JS-animated counters.
   Usage: class="magic-counter" data-target="1234"
   ══════════════════════════════ */

.magic-counter {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
}


/* == adm-animations == */
/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — SCROLL ANIMATIONS & PAGE TRANSITIONS
   Scroll-reveal classes triggered by IntersectionObserver in JS.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════
   SCROLL REVEAL BASE
   Elements start hidden, become visible when scrolled into view.
   JS adds .is-visible class.
   ══════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Direction variants ── */
.reveal--left {
  transform: translateX(-32px);
}

.reveal--left.is-visible {
  transform: translateX(0);
}

.reveal--right {
  transform: translateX(32px);
}

.reveal--right.is-visible {
  transform: translateX(0);
}

/* ── Scale variant ── */
.reveal--scale {
  transform: scale(0.95);
}

.reveal--scale.is-visible {
  transform: scale(1);
}

/* ── Zoom in from smaller ── */
.reveal--zoom {
  transform: scale(0.85);
  filter: blur(4px);
}

.reveal--zoom.is-visible {
  transform: scale(1);
  filter: blur(0);
}

/* ── Fade only (no movement) ── */
.reveal--fade {
  transform: none;
}

/* ── Stagger children ──
   Each child delays based on its --i index.
   JS sets --i on each child, or use CSS nth-child.
*/
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger from left */
.reveal-stagger--left > * {
  transform: translateX(-20px);
}

.reveal-stagger--left.is-visible > * {
  transform: translateX(0);
}

/* ── Faster reveal ── */
.reveal--fast {
  transition-duration: var(--duration-slow);
}

/* ── Slower reveal ── */
.reveal--slow {
  transition-duration: 800ms;
}


/* ══════════════════════════════
   PAGE TRANSITION OVERLAY
   Full-screen overlay that fades out on page load
   and fades in on navigation.
   ══════════════════════════════ */

.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.page-transition-overlay.is-active {
  opacity: 1;
  pointer-events: all;
}

/* Initial load: overlay visible, then fades out.
   This USED to be a plain opacity:1 that only app.js could clear, and it did so on
   window.load — which waits for every image on the page. On a 25,000px page carrying
   13MB of imagery that meant an opaque, full-screen, click-blocking sheet over the
   entire site until the last image downloaded. On a phone that was most of a minute,
   and it is what "the mobile site is completely broken" looked like: a blank screen.

   It is an animation now, so the browser fades it out on its own at first paint.
   No JavaScript is involved, nothing waits for images, and the intended effect —
   the page fading up out of its background colour — is unchanged. app.js still
   clears .page-loading, which re-arms the overlay for navigation transitions. */
.page-loading .page-transition-overlay {
  animation: adm-page-reveal var(--duration-slow) var(--ease-out) forwards;
  pointer-events: none;
}

@keyframes adm-page-reveal {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/* ══════════════════════════════
   UTILITY KEYFRAMES
   Reusable animations for components.
   ══════════════════════════════ */

/* Fade in + up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in + down */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in + left */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in + right */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale in */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Float (gentle up/down) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Spin */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Ping (scale + fade out) */
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Bounce */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  50% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
}

/* Slide in from bottom (for modals/dropdowns) */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ══════════════════════════════
   ANIMATION UTILITY CLASSES
   ══════════════════════════════ */

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.animate-bounce { animation: bounce 1s infinite; }

.animate-fade-in-up { animation: fadeInUp 0.5s var(--ease-out) forwards; }
.animate-fade-in-down { animation: fadeInDown 0.5s var(--ease-out) forwards; }
.animate-fade-in-left { animation: fadeInLeft 0.5s var(--ease-out) forwards; }
.animate-fade-in-right { animation: fadeInRight 0.5s var(--ease-out) forwards; }
.animate-scale-in { animation: scaleIn 0.4s var(--ease-out) forwards; }

/* Stagger delay utilities */
.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 300ms; }
.delay-4 { animation-delay: 400ms; }
.delay-5 { animation-delay: 500ms; }
.delay-6 { animation-delay: 600ms; }

/* ── Heading / subheading fade-up reveal (subheadings delayed) ──
   JS (scroll-animations.js) tags headings with .adm-rvh and subheadings with .adm-rvs. */
.adm-rvh, .adm-rvs { opacity: 0; transform: translateY(12px); }
.adm-rvh { transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.adm-rvs { transition: opacity 0.6s var(--ease-out) 0.2s, transform 0.6s var(--ease-out) 0.2s; }
.adm-rvh.is-visible, .adm-rvs.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .adm-rvh, .adm-rvs { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* Word-by-word heading stagger (JS splits titles into .adm-word spans with --wi index). */
.adm-rvh--split { opacity: 1 !important; transform: none !important; }
/* padding-bottom + equal negative margin gives each inline-block word room for descenders (the "g"
   in "regulated") that the tight line-height + composited (will-change) box would otherwise clip;
   the negative margin keeps line spacing unchanged. */
.adm-word { display: inline-block; padding-bottom: 0.18em; margin-bottom: -0.18em; opacity: 0; transform: translateY(0.5em); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); transition-delay: calc(0.18s + var(--wi, 0) * 0.06s); will-change: opacity, transform; }
.adm-rvh--split.is-visible .adm-word { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .adm-word { opacity: 1 !important; transform: none !important; transition: none !important; } }


/* ══════════════════════════════
   REVEAL GATE
   The hidden state above is conditional on <html class="adm-js">, which the
   inline script in header.php sets and a watchdog removes if the reveal system
   has not started within two seconds.

   This block is the ungated state: no JavaScript, JavaScript still blocked, or
   JavaScript that failed — content is visible, unanimated, immediately. It is
   written as an override rather than by rewriting every rule above so the
   animation definitions stay in one readable place, and so that nothing is
   lost if a new reveal variant is added without remembering this file.
   ══════════════════════════════ */

html:not(.adm-js) .reveal,
html:not(.adm-js) .reveal-stagger > *,
html:not(.adm-js) .adm-rvh,
html:not(.adm-js) .adm-rvs,
html:not(.adm-js) .adm-word,
html:not(.adm-js) .magic-blur-in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}


/* == adm-utilities == */
/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════ */

/* ── Screen reader only ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Text alignment ── */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ── Text colour ── */
.text-brand { color: var(--color-brand); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-inverse { color: var(--color-text-inverse); }

/* ── Font family ── */
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

/* ── Font weight ── */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-purple-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Positioning ── */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* ── Width/height ── */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* ── Margin ── */
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

/* ── Padding ── */
.p-0 { padding: 0; }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* ── Display ── */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }

/* ── Border ── */
.border { border: 1px solid var(--color-border); }
.border-brand { border-color: var(--color-border-brand); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Opacity ── */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ── Truncate ── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── No scrollbar (used for horizontal scroll containers) ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Aspect ratio ── */
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-4-3 { aspect-ratio: 4 / 3; }

/* ── Object fit ── */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ── Pointer ── */
.cursor-pointer { cursor: pointer; }
.pointer-events-none { pointer-events: none; }

/* ── Transition ── */
.transition-all { transition: all var(--duration-base) var(--ease-out); }
.transition-colors { transition: color var(--duration-base) ease, background var(--duration-base) ease, border-color var(--duration-base) ease; }


/* == adm-responsive == */
/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — RESPONSIVE BREAKPOINTS
   Mobile-first adjustments: 480 / 768 / 1024 / 1280
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════
   SMALL PHONES (≤ 480px)
   ══════════════════════════════ */

@media (max-width: 480px) {
  :root {
    --container-padding: var(--space-4);
    --section-padding-y: var(--space-12);
  }

  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }

  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
    grid-template-columns: 1fr;
  }

  .bento {
    grid-template-columns: 1fr;
  }

  .bento-span-2, .bento-span-3 {
    grid-column: span 1;
  }

  .split, .split--60-40, .split--40-60 {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .split--reverse > *:first-child { order: 1; }
  .split--reverse > *:last-child { order: 2; }

  .kpi__value { font-size: var(--font-size-2xl); }

  .section-header__desc { font-size: var(--font-size-base); }
}


/* ══════════════════════════════
   TABLETS (≤ 768px)
   ══════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --container-padding: var(--space-5);
    --section-padding-y: var(--space-16);
  }

  /* (Nav → hamburger switch now happens at 992px above; phone at 1228px.) */

  /* Footer grid collapse */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer-brand {
    grid-column: span 2;
  }

  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }

  .footer-bottom-links {
    justify-content: center;
  }

  /* Grid fallbacks */
  .grid-3, .grid-4, .grid-5, .grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-span-3 { grid-column: span 2; }

  .split, .split--60-40, .split--40-60 {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .split--reverse > *:first-child { order: 1; }
  .split--reverse > *:last-child { order: 2; }

  /* KPI grid */
  .grid-4.kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Reduce section header size */
  .section-header { margin-bottom: var(--space-8); }

  /* Marquee fade edges smaller on mobile */
  .magic-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
  }

  /* Orbit — shrink */
  .magic-orbit {
    width: 280px;
    height: 280px;
  }

  .magic-orbit__item {
    width: 36px;
    height: 36px;
  }
}


/* ══════════════════════════════
   SMALL DESKTOPS (≤ 1024px)
   ══════════════════════════════ */

@media (max-width: 1024px) {
  .grid-5, .grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-8);
  }

  .footer-brand {
    grid-column: span 3;
  }
}


/* ══════════════════════════════
   LARGE DESKTOPS (≤ 1280px)
   ══════════════════════════════ */

@media (max-width: 1280px) {
  .container--wide {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* ══════════════════════════════
   HEADER — PRIORITY-ORDERED COLLAPSE
   ══════════════════════════════

   The header is one flex row: logo, nav, actions. The nav is a flex child but its
   min-width is auto, so it will not shrink below its own menu — which means the row
   does not compress when it runs out of width, it overflows, and the page picks up a
   horizontal scrollbar with the CTA hanging off the right-hand edge.

   Measured on the real page with every item showing, the document's own horizontal
   overflow (a constant 9px artefact from a mega-menu child is subtracted):

     1400px   0px over   — fits
     1350px  26px over   — scrolls sideways
     1300px  26px over
     1250px 126px over   — badly broken

   So the first break is at roughly 1376px. The old breakpoints dropped the phone at
   1228 and collapsed the nav at 1090, both well below that, which left a ~150px band
   where nothing had been dropped yet and the header was already overflowing. That band
   covers 1366 and 1280 — two of the commonest laptop widths.

   Each rule below fires just above where the thing above it would break, least important
   first: region switcher, then phone, then the nav collapses to the hamburger, and the
   CTA is last rather than third. Thresholds are taken from the wider of the two markets
   (UAE: region 91px, phone 131px; UK: 82 and 133).

   The region switcher is not lost when it leaves the header — there is a locale link in
   the footer bottom bar at every width. See footer.php. */

/* 1. Region switcher — the full row stops fitting at ~1376px. */
@media (max-width: 1379px) {
  .region-switch { display: none; }
}

/* 2. Phone — also in the mega menu's contact panel and in the footer. */
@media (max-width: 1289px) {
  .header-phone { display: none; }
}

/* 3. Nav collapses to the hamburger. This frees 722px against the CTA's 213px, so the
      CTA stays: it is the last thing worth losing. */
@media (max-width: 1149px) {
  .site-nav { display: none; }
  .mobile-toggle { display: flex; }
  .mega-overlay { display: none; }
}

/* 4. CTA — below this the logo, button and hamburger stop fitting on one row. It is
      still the first thing in the mobile drawer's contact panel. */
@media (max-width: 559px) {
  .header-cta { display: none; }
}


/* ══════════════════════════════
   RESPONSIVE DISPLAY UTILITIES
   ══════════════════════════════ */

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}


/* ══════════════════════════════
   RESPONSIVE TYPOGRAPHY
   ══════════════════════════════ */

@media (max-width: 768px) {
  .lead {
    font-size: var(--font-size-base);
  }
}


/* ══════════════════════════════
   HEADER SPACER RESPONSIVE
   ══════════════════════════════ */

@media (max-width: 768px) {
  .header-spacer { height: 64px; }
}


/* == adm-sections-magic == */
/* ═══════════════════════════════════════════════════════════════════
   ADM CREATIVE SECTIONS (magic) — bento, beams, rings, scroll-story,
   before/after, sticky steps, spotlight cards, counters, word hero,
   bar race, wins feed, tilt cards, goal selector, parallax, retro.
   Class prefix: adm-m-. Colours via tokens so dark/magenta adapt.
   ═══════════════════════════════════════════════════════════════════ */
.adm-m-eyebrow{font-family:var(--font-mono);font-size:var(--font-size-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-brand);display:block;margin-bottom:var(--space-3);}
.adm-m-tag{font-size:var(--font-size-2xs);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:999px;padding:3px 10px;display:inline-block;margin-bottom:var(--space-4);}
.adm-m-h{font-size:clamp(var(--font-size-2xl),3vw,var(--font-size-4xl));font-weight:500;margin:0 0 var(--space-3);}
.adm-m-sub{color:var(--color-text-secondary);max-width:60ch;margin:0 0 var(--space-10);}

/* 1 · Bento (content-rich) */
.adm-m-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:var(--space-4);}
.adm-m-tile{background:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:0;display:flex;flex-direction:column;gap:0;overflow:hidden;min-height:170px;}
.adm-m-tile--feature{grid-column:span 2;grid-row:span 2;}
.adm-m-tile--wide{grid-column:span 2;}
.adm-m-tile__eye{font-size:var(--font-size-xs);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--color-brand);}
.adm-m-tile__h{font-weight:500;font-size:var(--font-size-lg);margin:0;}
.adm-m-tile__d{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0;}
.adm-m-tile__v{font-size:var(--font-size-5xl);font-weight:500;line-height:1;margin-top:auto;}
.adm-m-tile__v--sm{font-size:var(--font-size-3xl);}
.adm-m-spark{width:100%;height:46px;margin-top:auto;}
.adm-m-bars{display:flex;align-items:flex-end;gap:6px;height:60px;margin-top:auto;}
.adm-m-bars span{flex:1;background:var(--color-brand);border-radius:3px 3px 0 0;opacity:.85;}
.adm-m-marq{overflow:hidden;margin-top:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.adm-m-marq__row{display:flex;gap:var(--space-6);width:max-content;animation:adm-m-marq 16s linear infinite;font-weight:500;color:var(--color-text-secondary);white-space:nowrap;}
.adm-m-marq__row > span{display:inline-flex;align-items:center;gap:var(--space-6);flex:0 0 auto;} /* keep logos in a single horizontal row (not stacked) */
@keyframes adm-m-marq{to{transform:translateX(-50%)}}
.adm-m-stars{color:var(--color-brand);font-size:22px;margin-top:auto;}

/* 2 · Beams (content-rich nodes) */
.adm-m-beam-flow{stroke:var(--color-brand);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:6 14;animation:adm-m-dash .8s linear infinite;}
@keyframes adm-m-dash{to{stroke-dashoffset:-20}}
.adm-m-bnode{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-md);}
.adm-m-bnode i{font-size:20px;color:var(--color-brand);flex-shrink:0;}
.adm-m-bnode__t{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left;}
.adm-m-bnode b{font-weight:500;font-size:var(--font-size-sm);}
.adm-m-bnode span{font-size:var(--font-size-xs);color:var(--color-text-secondary);}

/* 3 · Scroll-scrubbed growth chart (replaces timeline) */
.adm-m-scrolly{position:relative;height:165vh;}
.adm-m-scrolly__pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;}
.adm-m-scrolly__inner{width:100%;max-width:920px;margin-inline:auto;text-align:center;}
.adm-m-scrolly__inner .section-header{margin-bottom:var(--space-6);}
.adm-m-chart{position:relative;width:100%;max-width:880px;margin:var(--space-6) auto 0;}
.adm-m-chart__base{stroke:var(--color-border);stroke-width:1.5;stroke-dasharray:2 7;}
.adm-m-chart__line{fill:none;stroke:var(--color-brand);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;}
.adm-m-mile{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;}
.adm-m-mile.on{opacity:1;transform:none;}
.adm-m-mile__stem{stroke:var(--color-brand);stroke-width:1.5;stroke-dasharray:2 6;opacity:.3;}
.adm-m-mile__halo{fill:var(--color-brand);opacity:.16;}
.adm-m-mile__dot{fill:var(--color-brand);}
.adm-m-mile text{fill:var(--color-text);font-size:14px;font-weight:500;font-family:var(--font-sans);}

/* 4 · Before / After drag slider (replaces comparison) */
.adm-m-ba{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);user-select:none;touch-action:none;height:360px;}
.adm-m-ba__pane{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-8);}
.adm-m-ba__before{background:var(--color-surface-2);color:var(--color-text-secondary);}
.adm-m-ba__after{background:var(--color-brand);color:#fff;clip-path:inset(0 0 0 50%);}
.adm-m-ba__big{font-size:var(--font-size-6xl);font-weight:500;line-height:1;}
.adm-m-ba__cap{font-family:var(--font-mono);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;}
.adm-m-ba__handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-50%);cursor:ew-resize;}
.adm-m-ba__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:var(--color-brand);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 16px rgba(0,0,0,.25);}

/* 5 · Sticky scrollytelling feature */
.adm-m-feat{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:start;}
.adm-m-feat__sticky{position:sticky;top:120px;height:340px;border-radius:var(--radius-lg);background:var(--color-surface-1);border:1px solid var(--color-border);overflow:hidden;}
.adm-m-feat__vis{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;}
.adm-m-feat__vis.on{opacity:1;}
.adm-m-feat__vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.adm-m-feat__cap{position:absolute;left:var(--space-5);bottom:var(--space-5);z-index:1;display:inline-flex;align-items:center;gap:var(--space-2);background:#fff;color:#0a0a0a;padding:9px var(--space-4) 9px var(--space-3);border-radius:999px;font-weight:500;font-size:var(--font-size-sm);box-shadow:0 8px 24px rgba(0,0,0,.16);border:1px solid rgba(10,10,25,.12);}
.adm-m-feat__cap::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--color-brand);box-shadow:0 0 8px 1px var(--color-brand);flex-shrink:0;}
.adm-m-feat__cap i{color:var(--color-brand);font-size:18px;}
.adm-m-feat__step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .4s ease;}
.adm-m-feat__step.on{opacity:1;}
.adm-m-feat__step__n{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-brand);}
.adm-m-feat__step h3{font-weight:500;margin:var(--space-2) 0 var(--space-3);}
.adm-m-feat__step-icon{display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--space-3);}
.adm-m-feat__step-icon img{width:40px;height:40px;object-fit:contain;} /* no font-size -> honours the plugin H3 heading size */
.adm-m-feat__link{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-4);color:var(--color-brand);font-weight:500;font-size:var(--font-size-sm);text-decoration:none;}

/* 6 · Cursor-spotlight magic cards */
.adm-m-mcards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.adm-m-mcard{position:relative;background:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8);overflow:hidden;transition:border-color .3s ease;}
.adm-m-mcard::before{content:'';position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(229,0,109,.18),transparent 65%);opacity:0;transition:opacity .35s ease;pointer-events:none;}
.adm-m-mcard:hover{border-color:var(--color-border-brand);}
.adm-m-mcard:hover::before{opacity:1;}
.adm-m-mcard i{font-size:32px;color:var(--color-brand);position:relative;}
.adm-m-mcard h3{font-size:var(--font-size-lg);font-weight:500;margin:var(--space-4) 0 var(--space-2);position:relative;}
.adm-m-mcard p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0;position:relative;}

/* 7 · Radial rings (aligned) */
.adm-m-rings{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);}
.adm-m-ring{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);}
.adm-m-ring svg{display:block;}
.adm-m-ring__bar{stroke:var(--color-brand);transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1);}
.adm-m-ring__lbl{color:var(--color-text-secondary);font-size:var(--font-size-sm);text-align:center;}

/* 8 · Live counter band */
.adm-m-counters{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8);text-align:center;}
.adm-m-counters__v{font-size:clamp(var(--font-size-4xl),5vw,var(--font-size-6xl));font-weight:500;line-height:1;}
.adm-m-counters__l{font-size:var(--font-size-sm);opacity:.85;margin-top:var(--space-2);}

@media (max-width:768px){
  .adm-m-bento,.adm-m-rings,.adm-m-mcards,.adm-m-counters{grid-template-columns:repeat(2,1fr);}
  .adm-m-tile--feature{grid-column:span 2;grid-row:span 1;}
}

/* Feature rows collapse at 860, matching .adm-block .split and the mobile-centre breakpoint, and
   matching sections-magic.js which already disables the sticky scrollytelling below 860. At 768 the
   copy sat in ~355px centred columns from 769px up to 860px, and the CSS kept the column pinned while
   the JS had already stopped driving it. */
@media (max-width:860px){
  .adm-m-feat{grid-template-columns:1fr;}
  .adm-m-feat__sticky{position:relative;top:0;}
}
@media (max-width:560px){
  .adm-m-bento{grid-template-columns:1fr;}
  .adm-m-tile--feature,.adm-m-tile--wide{grid-column:span 1;grid-row:span 1;}
}
/* 9 · Word-rotating hero */
.adm-m-hero{text-align:center;padding:var(--space-12) 0;}
.adm-m-hero h2{font-size:clamp(var(--font-size-4xl),6vw,72px);font-weight:500;line-height:1.05;margin:0;}
.adm-m-rotate{color:var(--color-brand);}
.adm-m-rotate__w{display:inline-block;opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease;}
.adm-m-rotate__w.in{opacity:1;transform:none;}

/* 10 · Animated bar race */
.adm-m-race{max-width:720px;display:flex;flex-direction:column;gap:var(--space-4);}
.adm-m-race__row{display:grid;grid-template-columns:120px 1fr 56px;align-items:center;gap:var(--space-4);}
.adm-m-race__lbl{font-size:var(--font-size-sm);}
.adm-m-race__bar{height:16px;background:var(--color-surface-2);border-radius:999px;overflow:hidden;}
.adm-m-race__fill{height:100%;background:var(--color-brand);border-radius:999px;width:0;transition:width 1.5s cubic-bezier(.22,1,.36,1);}
.adm-m-race__val{font-weight:500;font-size:var(--font-size-sm);text-align:right;}

/* 11 · Live wins feed */
.adm-m-feed{max-width:560px;display:flex;flex-direction:column;gap:var(--space-3);}
.adm-m-feed__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-md);opacity:0;transform:translateY(12px);}
.adm-m-feed__item.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease;}
.adm-m-feed__ic{width:38px;height:38px;border-radius:50%;background:var(--color-brand-dim);color:var(--color-brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.adm-m-feed__t{font-size:var(--font-size-sm);}
.adm-m-feed__t b{font-weight:500;}
.adm-m-feed__up{margin-left:auto;color:var(--color-brand);font-weight:500;font-size:var(--font-size-sm);white-space:nowrap;}

/* 12 · Tilt 3D cards */
.adm-m-tilt-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);perspective:1200px;}
.adm-m-tilt{background:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:transform .15s ease;transform-style:preserve-3d;}
.adm-m-tilt__media{aspect-ratio:16/10;overflow:hidden;}
.adm-m-tilt__media img{width:100%;height:100%;object-fit:cover;}
.adm-m-tilt__body{padding:var(--space-5);}
.adm-m-tilt__tag{font-size:var(--font-size-xs);color:var(--color-brand);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;}
.adm-m-tilt h3{font-size:var(--font-size-lg);font-weight:500;margin:6px 0 0;}

/* 13 · Goal selector */
.adm-m-goals{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-8);}
.adm-m-goal-btn{padding:var(--space-3) var(--space-5);border-radius:999px;border:1px solid var(--color-border);background:transparent;color:var(--color-text);cursor:pointer;font-size:var(--font-size-sm);font-weight:500;transition:all .2s ease;}
.adm-m-goal-btn.on{background:var(--color-brand);color:#fff;border-color:var(--color-brand);}
.adm-m-goal-panel{display:none;grid-template-columns:repeat(3,1fr);gap:var(--space-4);}
.adm-m-goal-panel.on{display:grid;}
.adm-m-goal-card{padding:var(--space-5);background:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-md);}
.adm-m-goal-card i{font-size:26px;color:var(--color-brand);}
.adm-m-goal-card h4{font-weight:500;margin:var(--space-2) 0 4px;}
.adm-m-goal-card p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0;}

/* 14 · Parallax spotlight */
.adm-m-px{position:relative;height:440px;border-radius:var(--radius-lg);overflow:hidden;display:flex;align-items:center;}
.adm-m-px__bg{position:absolute;left:0;right:0;top:-20%;bottom:-20%;background-size:cover;background-position:center;will-change:transform;}
.adm-m-px__ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.85),rgba(10,10,10,.35));}
.adm-m-px__c{position:relative;z-index:1;color:#fff;padding:var(--space-12);max-width:540px;}
.adm-m-px__c h3{color:#fff;font-size:var(--font-size-3xl);font-weight:500;margin:var(--space-2) 0;}
.adm-m-px__big{font-size:64px;font-weight:500;color:var(--color-brand);line-height:1;}

/* 15 · Retro-grid + meteors hero */
.adm-m-retro{position:relative;overflow:hidden;min-height:380px;display:flex;align-items:center;justify-content:center;text-align:center;background:#0a0a0a;border-radius:var(--radius-lg);}
.adm-m-retro__grid{position:absolute;left:-50%;right:-50%;bottom:0;height:70%;background-image:linear-gradient(rgba(229,0,109,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(229,0,109,.35) 1px,transparent 1px);background-size:44px 44px;transform:perspective(380px) rotateX(58deg);transform-origin:center bottom;animation:adm-m-retro 8s linear infinite;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 90%);mask-image:linear-gradient(to top,#000 10%,transparent 90%);}
@keyframes adm-m-retro{to{background-position:0 44px;}}
.adm-m-meteor{position:absolute;top:-60px;width:2px;height:70px;background:linear-gradient(transparent,var(--color-brand));border-radius:2px;animation:adm-m-meteor linear infinite;}
@keyframes adm-m-meteor{0%{transform:translate(0,0) rotate(20deg);opacity:0}10%{opacity:1}100%{transform:translate(-160px,440px) rotate(20deg);opacity:0}}
.adm-m-retro__c{position:relative;z-index:1;color:#fff;padding:var(--space-8);}
.adm-m-retro__c h2{color:#fff;font-size:clamp(var(--font-size-3xl),4vw,var(--font-size-5xl));font-weight:500;margin:0 0 var(--space-3);}

@media (max-width:768px){
  .adm-m-tilt-wrap,.adm-m-goal-panel.on{grid-template-columns:1fr;}
  .adm-m-race__row{grid-template-columns:90px 1fr 48px;}
}
@media (prefers-reduced-motion:reduce){
  .adm-m-marq__row,.adm-m-beam-flow,.adm-m-retro__grid,.adm-m-meteor{animation:none!important;}
}

/* ═══ Production template structural styles ═══ */
/* Bento tile internals */
.adm-m-tile__content{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);}
.adm-m-tile__content:not(:last-child){border-bottom:1px solid var(--color-border);} /* divider only when a graphic section follows */
.adm-m-tile__icon{width:48px;height:48px;object-fit:contain;margin-top:auto;}
.adm-m-tile__img{margin-top:auto;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:16/9;}
.adm-m-tile__img img{width:100%;height:100%;object-fit:cover;display:block;}
.adm-m-marq__logo{height:40px;width:auto;margin-right:var(--space-5);vertical-align:middle;opacity:.75;object-fit:contain;}

/* Animated beams layout */
.adm-m-beams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-8);max-width:920px;margin:var(--space-10) auto 0;}
.adm-m-beams__col{display:flex;flex-direction:column;gap:var(--space-4);}
.adm-m-beams__col--hub{align-items:flex-start;}
.adm-m-beams__svg{display:flex;justify-content:center;}
.adm-m-bnode--hub{border-color:var(--color-brand);}
.adm-m-bnode__ic{display:inline-flex;width:34px;height:34px;flex-shrink:0;align-items:center;justify-content:center;border-radius:8px;background:var(--color-brand-dim);color:var(--color-brand);font-size:18px;}
.adm-m-bnode__ic img{width:20px;height:20px;object-fit:contain;}
@media(max-width:768px){.adm-m-beams{grid-template-columns:1fr;}.adm-m-beams__svg{display:none;}}

/* Spotlight card icon (uploaded image) */
.adm-m-mcard__ic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-md);background:var(--color-brand-dim);}
.adm-m-mcard__ic img{width:26px;height:26px;object-fit:contain;}

/* Goal card icon (uploaded image) */
.adm-m-goal-card__ic{display:inline-flex;width:44px;height:44px;border-radius:var(--radius-md);background:var(--color-brand-dim);align-items:center;justify-content:center;margin-bottom:var(--space-2);}
.adm-m-goal-card__ic img{width:24px;height:24px;object-fit:contain;}

/* Before/after image mode */
.adm-m-ba__pane{background-size:cover;background-position:center;}
.adm-m-ba__tag{position:absolute;top:var(--space-4);left:var(--space-4);background:rgba(10,10,10,.6);color:#fff;padding:6px 14px;border-radius:999px;font-size:var(--font-size-xs);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;}
.adm-m-ba__tag--after{left:auto;right:var(--space-4);background:var(--color-brand);}

/* Parallax extras */
.adm-m-px__eye{font-family:var(--font-mono);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:#fff;opacity:.85;}
.adm-m-px__txt{color:rgba(255,255,255,.85);margin:var(--space-2) 0 0;}

/* Retro + scroll-story */
.adm-m-retro__txt{color:rgba(255,255,255,.8);margin:0 auto var(--space-6);max-width:46ch;}
.adm-m-scrolly__inner{width:100%;}
.adm-m-mcard__ic i{font-size:26px;color:var(--color-brand);line-height:1;}

/* (Removed the heavy global black scrim that was darkening every bg-image section.) */
.adm-section--has-bg-image > .container{position:relative;z-index:1;}

/* Bold hero over background imagery */
.adm-section--has-bg-image.adm-hero-short,
.adm-section--has-bg-image.header-banner{display:flex;align-items:center;}
/* Compact heroes are excluded from this oversized treatment: they carry a bg image for the
   glass-refraction effect, which was matching them here at (0,2,1) and beating ADM Control's
   H1 rule — so a case-study hero rendered at 6.5vw (83px) while the homepage used the H1 setting
   (76px). Exempting them lets the backend "H1 max size" govern both, so they stay in step. */
.adm-hero-short.adm-section--has-bg-image:not(.adm-hero-compact) h1{font-size:clamp(var(--font-size-5xl),6.5vw,84px);line-height:1.02;letter-spacing:-.02em;}
.adm-hero-short.adm-section--has-bg-image.adm-hero-compact h1{line-height:1.02;letter-spacing:-.02em;}
.adm-hero-stats{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-8);}
.adm-hero-stats__item b{display:block;font-size:clamp(var(--font-size-3xl),3vw,var(--font-size-5xl));font-weight:500;color:#fff;line-height:1;}
.adm-hero-stats__item span{font-size:var(--font-size-sm);color:rgba(255,255,255,.75);}

/* Editorial lead statement (content-repeater intro, hero kickers) */
.content-block p.lead, .prose p.lead, p.lead{font-size:clamp(var(--font-size-xl),2vw,var(--font-size-2xl));line-height:1.4;font-weight:500;color:var(--color-text);margin-bottom:var(--space-4);}

/* ═══ MagicUI dark hero — animated retro-grid + radial glow + gradient headline ═══ */
.adm-section--magicgrid{background:#07070f;color:#fff;--color-text:#fff;--color-text-secondary:rgba(255,255,255,.82);--color-text-muted:rgba(255,255,255,.65);position:relative;overflow:clip;min-height:80vh;display:flex;align-items:center;}
/* bg_colour emits .adm-section[data-bg="…"] at specificity (0,2,0), which outranks this effect's own
   (0,1,0) background — so on any light bg_colour the section stayed white while the white text tokens
   above still applied, giving white-on-white at a contrast ratio of 1.00 (invisible). This effect owns
   its canvas by design (the grid and glow only read on near-black), so the background is bound to the
   text tokens at matching specificity; sections-magic.css loads after sections.css, so it wins the tie. */
.adm-section.adm-section--magicgrid{background:#07070f;}
.adm-section--magicgrid::before{content:'';position:absolute;left:0;right:0;bottom:-8%;height:62%;
  background-image:linear-gradient(rgba(229,0,109,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(229,0,109,.16) 1px,transparent 1px);
  background-size:56px 56px;background-position:50% 100%;
  transform:perspective(640px) rotateX(62deg);transform-origin:center bottom;
  animation:adm-magicgrid 14s linear infinite;
  -webkit-mask-image:linear-gradient(to top,#000 18%,transparent 92%);mask-image:linear-gradient(to top,#000 18%,transparent 92%);opacity:.5;pointer-events:none;}
@keyframes adm-magicgrid{from{background-position:50% 100%;}to{background-position:50% calc(100% + 56px);}}
.adm-section--magicgrid::after{content:'';position:absolute;left:50%;top:-22%;width:780px;height:620px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(229,0,109,.38),rgba(229,0,109,.07) 45%,transparent 70%);filter:blur(28px);pointer-events:none;}
.adm-section--magicgrid > .container{position:relative;z-index:2;}
.adm-section--magicgrid .split{justify-items:center;text-align:center;}
.adm-section--magicgrid .flex{justify-content:center;}
.adm-hero-short.adm-section--magicgrid h1{font-size:clamp(var(--font-size-5xl),7vw,92px);line-height:1.03;letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff 38%,rgba(255,255,255,.5));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.adm-hero-short.adm-section--magicgrid .prose{color:rgba(255,255,255,.72);font-size:var(--font-size-lg);max-width:62ch;margin-inline:auto;}
.adm-hero-short.adm-section--magicgrid .section-header__overline{display:inline-flex;align-items:center;gap:9px;padding:7px 18px;border-radius:999px;
  border:1px solid rgba(229,0,109,.45);background:rgba(229,0,109,.12);color:#fff;letter-spacing:.05em;box-shadow:0 0 30px rgba(229,0,109,.30);
  font-family:var(--font-mono);font-size:var(--font-size-xs);}
.adm-hero-short.adm-section--magicgrid .section-header__overline::before{content:'';margin-right:0;width:7px;height:7px;border-radius:50%;background:var(--color-brand);box-shadow:0 0 10px 1px var(--color-brand);}
.adm-hero-short.adm-section--magicgrid .btn--primary{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 34px rgba(229,0,109,.5);}
.adm-section--magicgrid .adm-hero-stats{justify-content:center;gap:var(--space-12);}
.adm-section--magicgrid .adm-hero-stats__item b{background:linear-gradient(180deg,#fff,rgba(255,255,255,.6));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.adm-m-meteor{position:absolute;top:-60px;width:2px;height:70px;background:linear-gradient(transparent,var(--color-brand));border-radius:2px;z-index:1;}

/* ═══ Glass refraction — selectable bg effect on ANY section. Washes a pervasive pink→peach→coral
   warm gradient over the section's bg image (the lines show through), PLUS a brighter glow "lens"
   that follows the cursor. No texture of its own beyond the colour wash. ═══ */
.adm-section--glass{position:relative;overflow:clip;}
.adm-section--glass > .container{position:relative;z-index:2;}
/* Glass refraction — three real layers (gradient img + lines img + blurred lens copy). Provide your own
   gradient (bg image) and lines (glass_lines) images. The lens swaps the sharp lines for a blurred copy
   inside a cursor-following circle = the refraction. Masks move (cheap); blur is computed once = smooth. */
.adm-glass{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.adm-glass__grad{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;}
/* Optional dark-mode background image: when one is set, swap it in under the dark-mode toggle.
   Sections with no dark image keep their light bg (:has scopes the swap to glass that has it).
   A White section is locked light, so it keeps the light image even in dark mode. */
.adm-glass__grad--dark{display:none;}
/* Dark mode: hide ONLY the light grad (:not excludes the dark one, which shares the base class), show the dark grad. */
[data-theme="dark"] .adm-glass:has(.adm-glass__grad--dark) .adm-glass__grad:not(.adm-glass__grad--dark){display:none;}
[data-theme="dark"] .adm-glass__grad--dark{display:block;}
/* White sections are locked light → keep the light grad, hide the dark one (higher specificity wins). */
[data-theme="dark"] .adm-section--white .adm-glass:has(.adm-glass__grad--dark) .adm-glass__grad:not(.adm-glass__grad--dark){display:block;}
[data-theme="dark"] .adm-section--white .adm-glass:has(.adm-glass__grad--dark) .adm-glass__grad--dark{display:none;}
.adm-glass__lines,.adm-glass__lens{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;mix-blend-mode:var(--glass-blend,color-dodge);opacity:var(--glass-opacity,1);}
/* Sharp lines everywhere EXCEPT the cursor circle (lens size + position from controls) */
.adm-glass__lines{
  -webkit-mask:radial-gradient(circle calc(var(--glass-lens,460px) / 2) at var(--mx,34%) var(--my,52%), transparent 48%, #000 76%);
          mask:radial-gradient(circle calc(var(--glass-lens,460px) / 2) at var(--mx,34%) var(--my,52%), transparent 48%, #000 76%);}
/* Blurred lines shown ONLY in the cursor circle (the refracted bit) */
.adm-glass__lens{filter:blur(var(--glass-blur,8px));
  -webkit-mask:radial-gradient(circle calc(var(--glass-lens,460px) / 2) at var(--mx,34%) var(--my,52%), #000 48%, transparent 76%);
          mask:radial-gradient(circle calc(var(--glass-lens,460px) / 2) at var(--mx,34%) var(--my,52%), #000 48%, transparent 76%);}

/* ═══ Fluted glass — animated refraction wave (bg_effect: ribbed-glass) ════════════════════════
   A <canvas> (.adm-flute, drawn in sections-magic.js) paints a soft magenta/peach colour band that
   undulates and is combed by vertical glass flutes into shifting vertical streaks — the reeded-glass
   refraction look from the brief. isolation:isolate keeps the canvas (z-index:-1) above the section
   background but behind all content. */
.adm-section--ribbed{position:relative;overflow:clip;isolation:isolate;}
.adm-flute{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block;}

/* ═══ Brand-light hero — light, on-brand (magenta/yellow), MagicUI motion ═══ */
.adm-section--brandhero{position:relative;overflow:clip;background:var(--color-bg);min-height:78vh;display:flex;align-items:center;}
.adm-section--brandhero::before{content:'';position:absolute;inset:-10%;pointer-events:none;z-index:0;
  background:radial-gradient(38% 48% at 20% 16%,rgba(229,0,109,.16),transparent 60%),
            radial-gradient(34% 44% at 84% 10%,rgba(255,212,0,.18),transparent 60%),
            radial-gradient(52% 60% at 52% 116%,rgba(229,0,109,.12),transparent 62%);
  animation:adm-brandglow 18s ease-in-out infinite;}
@keyframes adm-brandglow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2%,1.5%) scale(1.04)}}
.adm-section--brandhero::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(229,0,109,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(229,0,109,.05) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(78% 78% at 50% 42%,#000,transparent 76%);mask-image:radial-gradient(78% 78% at 50% 42%,#000,transparent 76%);}
.adm-section--brandhero > .container{position:relative;z-index:2;}
.adm-section--brandhero .split{justify-items:center;text-align:center;}
.adm-section--brandhero .flex{justify-content:center;}
.adm-hero-short.adm-section--brandhero h1{font-size:clamp(var(--font-size-5xl),6.5vw,86px);line-height:1.04;letter-spacing:-.02em;font-weight:var(--font-weight-medium);color:var(--color-text);}
.adm-hero-short.adm-section--brandhero .prose{color:var(--color-text-secondary);font-size:var(--font-size-lg);max-width:60ch;margin-inline:auto;}
.adm-hero-short.adm-section--brandhero .section-header__overline{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:999px;border:1px solid var(--color-border-brand);background:var(--color-brand-dim);color:var(--color-brand);letter-spacing:.06em;font-family:var(--font-mono);font-size:var(--font-size-xs);}
.adm-hero-short.adm-section--brandhero .section-header__overline::before{content:'';margin-right:0;width:7px;height:7px;border-radius:50%;background:var(--color-brand);box-shadow:0 0 8px 1px var(--color-brand);}
.adm-hero-short.adm-section--brandhero .btn--primary{box-shadow:0 10px 28px rgba(229,0,109,.28);}
.adm-section--brandhero .adm-hero-stats{justify-content:center;gap:var(--space-12);}
.adm-section--brandhero .adm-hero-stats__item b{color:var(--color-text);}

/* Brand hero: left-aligned 2-col + fixed stat labels + animated growth visual */
.adm-section--brandhero .split{justify-items:stretch;text-align:left;align-items:center;gap:var(--space-12);}
.adm-section--brandhero .flex{justify-content:flex-start;}
.adm-section--brandhero .adm-hero-stats{justify-content:flex-start;gap:var(--space-10);}
.adm-section--brandhero .prose{margin-inline:0;}
.adm-section--brandhero .adm-hero-stats__item span{color:var(--color-text-secondary);}   /* was white-on-white */
.adm-hero-short.adm-section--brandhero h1{margin-top:var(--space-4);}
.adm-hero-visual__card{position:relative;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-xl);
  box-shadow:0 34px 80px -28px rgba(229,0,109,.40),0 10px 34px rgba(0,0,0,.08);padding:var(--space-6) var(--space-6) var(--space-5);}
.adm-hero-visual__badge{display:inline-flex;align-items:center;gap:6px;background:var(--color-brand);color:#fff;padding:8px 14px;border-radius:999px;font-weight:500;font-size:var(--font-size-sm);box-shadow:0 10px 26px rgba(229,0,109,.40);}
.adm-hero-visual__badge i{font-size:15px;}
.adm-hero-visual__meta{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-3);text-transform:uppercase;letter-spacing:.06em;}
.adm-hero-visual__line{fill:none;stroke:var(--color-brand);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:adm-hero-draw 2.6s cubic-bezier(.22,1,.36,1) .4s forwards;}
@keyframes adm-hero-draw{to{stroke-dashoffset:0;}}
.adm-hero-visual__dot{fill:var(--color-brand);opacity:0;animation:adm-hero-dot .5s ease 2.9s forwards;}
@keyframes adm-hero-dot{to{opacity:1;filter:drop-shadow(0 0 6px var(--color-brand));}}
@media(max-width:860px){.adm-hero-visual{margin-top:var(--space-8);}}
@media (prefers-reduced-motion:reduce){.adm-hero-visual__line{animation:none;stroke-dashoffset:0;}.adm-hero-visual__dot{animation:none;opacity:1;}}

/* ═══ Bento rich tile graphics (profile/avatars/chat/chips/area/image-badge/icons) ═══════════════
   All token-driven so they adapt to Light/Dark/Black/Magenta section remaps. margin-top:auto pins
   each graphic to the bottom of its tile (content sits above). */
.adm-m-profile{display:flex;flex-direction:column;gap:var(--space-3);margin-top:auto;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:var(--shadow-sm);}
.adm-m-profile__head{display:flex;align-items:center;gap:var(--space-3);}
.adm-m-profile__av img{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;}
.adm-m-profile__meta{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.adm-m-profile__name{font-weight:var(--font-weight-medium);}
.adm-m-profile__role{font-size:var(--font-size-sm);color:var(--color-text-muted);}
.adm-m-profile__pills{display:flex;flex-wrap:wrap;gap:6px;}
.adm-m-pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--font-size-2xs);font-weight:500;padding:4px 10px;border-radius:999px;background:var(--color-brand-dim);color:var(--color-brand);}
.adm-m-pill i,.adm-m-pill svg{font-size:.95em;}

.adm-m-cluster{display:flex;margin-top:auto;padding-top:var(--space-4);}
.adm-m-cluster__av{margin-left:-12px;}
.adm-m-cluster__av:first-child{margin-left:0;}
.adm-m-cluster__av img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:3px solid var(--color-bg);display:block;}

.adm-m-chat{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:var(--space-4);}
.adm-m-chat__row{display:flex;align-items:flex-end;gap:8px;}
.adm-m-chat__row--out{flex-direction:row-reverse;}
.adm-m-chat__av img{width:28px;height:28px;border-radius:50%;object-fit:cover;display:block;}
.adm-m-chat__bubble{font-size:var(--font-size-sm);padding:8px 12px;border-radius:14px;background:var(--color-bg);border:1px solid var(--color-border);max-width:82%;}
.adm-m-chat__row--out .adm-m-chat__bubble{background:var(--color-brand);color:#fff;border-color:transparent;}

.adm-m-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:var(--space-4);align-content:flex-start;}
.adm-m-chip{font-size:var(--font-size-sm);font-weight:500;padding:6px 12px;border-radius:999px;background:var(--color-bg);border:1px solid var(--color-border);}
.adm-m-skill{flex:1 1 100%;display:flex;flex-direction:column;gap:5px;}
.adm-m-skill__lbl{display:flex;justify-content:space-between;font-size:var(--font-size-sm);font-weight:500;}
.adm-m-skill__lbl em{font-style:normal;color:var(--color-brand);}
.adm-m-skill__bar{height:7px;border-radius:999px;background:var(--color-border);overflow:hidden;}
.adm-m-skill__bar>span{display:block;height:100%;border-radius:999px;background:var(--color-brand);}

.adm-m-area{margin-top:auto;}
.adm-m-area__callout{display:flex;align-items:baseline;gap:6px;margin-bottom:6px;}
.adm-m-area__v{font-size:var(--font-size-2xl);font-weight:var(--font-weight-medium);}
.adm-m-area__l{font-size:var(--font-size-sm);color:var(--color-text-muted);}
.adm-m-area__svg{width:100%;height:70px;display:block;}

.adm-m-imgbadge{position:relative;margin-top:auto;}
.adm-m-imgbadge__img{display:block;width:100%;height:auto;border-radius:var(--radius-md);object-fit:cover;}
.adm-m-imgbadge__chip{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:999px;padding:5px 12px;font-size:var(--font-size-sm);box-shadow:var(--shadow-sm);}
.adm-m-imgbadge__chip strong{color:var(--color-brand);}

.adm-m-icongrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:auto;padding-top:var(--space-4);}
.adm-m-icongrid__item{display:flex;align-items:center;gap:11px;font-size:var(--font-size-sm);font-weight:500;padding:12px;border-radius:var(--radius-md);background:var(--color-bg);border:1px solid var(--color-border);box-shadow:0 1px 2px rgba(0,0,0,.05);}
/* icon rendered as a tinted rounded square (gives depth vs a flat inline glyph) */
.adm-m-icongrid__item i,.adm-m-icongrid__item svg{display:inline-grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--color-brand-dim);color:var(--color-brand);font-size:18px;}
.adm-m-icongrid__item em{font-style:normal;}

/* Status / checklist card — polished ticked rows (compliance steps etc.). */
.adm-m-status{margin-top:auto;display:flex;flex-direction:column;gap:9px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:0 1px 3px rgba(0,0,0,.06);}
.adm-m-status__row{display:flex;align-items:center;gap:11px;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text);}
.adm-m-status__tick{display:inline-grid;place-items:center;width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:rgba(34,197,94,.15);color:#16a34a;}
.adm-m-status__tick i,.adm-m-status__tick svg{font-size:14px;}

/* Chips get a touch of depth too. */
.adm-m-chip{box-shadow:0 1px 2px rgba(0,0,0,.05);}

/* Feature (2x2) tiles: let the graphic FILL the tile instead of pinning to the bottom with a void. */
.adm-m-tile--feature .adm-m-tile__gfx{margin-top:0;flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;}
.adm-m-tile--feature .adm-m-icongrid{flex:1 1 auto;grid-auto-rows:1fr;align-content:stretch;padding-top:0;}
.adm-m-tile--feature .adm-m-status{flex:1 1 auto;justify-content:center;}
/* Wide lead tile: compliance checklist becomes a cluster of ticked badge chips that fill the tile. */
.adm-m-tile--wide .adm-m-status{width:100%;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;gap:10px;align-content:center;justify-content:flex-start;background:none;border:none;box-shadow:none;padding:0;}
.adm-m-tile--wide .adm-m-status__row{flex:0 0 auto;background:var(--color-surface-2,#f0f0f2);border:1px solid var(--color-border);border-radius:var(--radius-full,999px);padding:7px 15px 7px 7px;font-size:var(--font-size-base);}
.adm-m-tile--wide .adm-m-status__tick{width:22px;height:22px;}
/* Gated / context chips above a stat (e.g. "Google Ads · Meta" on ad-platform restrictions) */
.adm-m-gated{display:flex;flex-wrap:wrap;gap:8px;}
.adm-m-gated__chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-full,999px);background:var(--color-surface-2,#f0f0f2);border:1px solid var(--color-border);font-size:12px;font-weight:500;color:var(--color-text);}
.adm-m-gated__chip svg{opacity:.55;flex:none;}
.adm-m-gated__chip i{opacity:.55;flex:none;font-size:13px;line-height:1;}
.adm-m-tile--feature .adm-m-profile,.adm-m-tile--feature .adm-m-chips,.adm-m-tile--feature .adm-m-cluster,.adm-m-tile--feature .adm-m-chat{margin-top:var(--space-4);}
/* Bento single-icon graphic rendered as a HugeIcon (vs an uploaded image). */
.adm-m-tile__hgi{font-size:40px;line-height:1;color:var(--color-brand);}
.adm-m-tile__hgi i,.adm-m-tile__hgi svg{width:1em;height:1em;}

/* Softly fade ONLY the graphic edge that meets the tile content, so it blends into the copy without a
   hard line. Content-first (graphic below the copy) → fade the graphic's TOP. Graphic-first (graphic
   above the copy, via --top) → fade its BOTTOM instead. */
.adm-m-tile__gfx{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;background-color:var(--color-bg);padding:var(--space-6);}
.adm-m-tile__gfx--top{margin-top:0;margin-bottom:auto;}

/* Bento tiles: interactive hover-lift (gated by ADM Control's hover_lift toggle, which emits a
   transform:none override when off). Container effects already apply per-tile via $fxc. */
.adm-m-tile{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.adm-m-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-border-strong);}

/* Orbit graphic — an actual orbit: centre node + two counter-rotating dashed rings with dots
   (distinct from the radial/donut counter). Rings pause under reduced-motion via the global rule. */
.adm-m-orbit{position:relative;width:150px;height:150px;margin:var(--space-5) auto auto;}
.adm-m-orbit__center{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:var(--color-brand);color:#fff;display:grid;place-items:center;font-weight:500;font-size:var(--font-size-sm);box-shadow:0 8px 20px -6px var(--color-brand);z-index:1;}
.adm-m-orbit__center i{font-size:22px;}
.adm-m-orbit__ring{position:absolute;border:1.5px dashed var(--color-border-strong);border-radius:50%;}
.adm-m-orbit__ring--1{inset:0;animation:adm-orbit-spin 16s linear infinite;}
.adm-m-orbit__ring--2{inset:26px;animation:adm-orbit-spin 11s linear infinite reverse;}
.adm-m-orbit__ring i{position:absolute;top:-7px;left:calc(50% - 7px);width:14px;height:14px;border-radius:50%;background:var(--color-brand);box-shadow:0 0 0 4px var(--color-brand-dim);}
.adm-m-orbit__ring--2 i{width:11px;height:11px;top:-6px;left:calc(50% - 6px);background:var(--color-accent,#ffd400);box-shadow:none;}
@keyframes adm-orbit-spin{to{transform:rotate(360deg);}}
.adm-m-tile--feature .adm-m-orbit{margin:auto;width:190px;height:190px;}

/* SERP mock graphic: brand ranked #1 above ghosted competitors */
.adm-m-serp{display:flex;flex-direction:column;gap:8px;margin-top:auto;width:100%;}
.adm-m-serp__search{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius-full,999px);background:var(--color-surface-2,#f0f0f2);color:var(--color-text-secondary);font-size:var(--font-size-sm);}
.adm-m-serp__search svg{width:15px;height:15px;flex:none;opacity:.55;}
.adm-m-serp__row{display:flex;gap:10px;padding:10px 12px;border-radius:var(--radius-md,10px);}
.adm-m-serp__row--top{background:var(--color-brand-dim,rgba(229,0,109,.08));border:1px solid var(--color-border-brand,rgba(229,0,109,.28));}
.adm-m-serp__rank{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--color-surface-2,#eee);color:var(--color-text-secondary);}
.adm-m-serp__row--top .adm-m-serp__rank{background:var(--color-brand);color:#fff;}
.adm-m-serp__b{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1;}
.adm-m-serp__url{font-size:12px;color:#1a7f37;line-height:1;}
.adm-m-serp__title{font-size:var(--font-size-base);font-weight:500;color:var(--color-brand);line-height:1.2;}
.adm-m-serp__snip{height:7px;border-radius:4px;background:var(--color-border);width:100%;}
.adm-m-serp__snip--s{width:58%;}
.adm-m-serp__row--ghost{opacity:.5;}
.adm-m-serp__g{height:8px;border-radius:4px;background:var(--color-border);}
.adm-m-serp__g--url{width:38%;height:6px;margin-bottom:2px;}
.adm-m-serp__g--title{width:74%;}

/* AI Overview (GEO) */
.adm-m-ai{display:flex;flex-direction:column;gap:10px;margin-top:auto;width:100%;padding:14px;border-radius:var(--radius-md,10px);background:var(--color-surface-2,#f5f5f7);border:1px solid var(--color-border);}
.adm-m-ai__head{display:flex;align-items:center;gap:7px;font-size:var(--font-size-sm);font-weight:500;color:var(--color-brand);}
.adm-m-ai__spark{display:inline-flex;}
.adm-m-ai__spark i{font-size:15px;line-height:1;}
.adm-m-ai__lines{display:flex;flex-direction:column;gap:7px;}
.adm-m-ai__src{display:flex;align-items:center;gap:8px;margin-top:2px;flex-wrap:wrap;}
.adm-m-ai__srclabel{font-size:11px;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;}
.adm-m-ai__chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--radius-full,999px);background:var(--color-surface-1,#fff);border:1px solid var(--color-border);font-size:12px;font-weight:500;color:var(--color-text);}
.adm-m-ai__chip i{width:12px;height:12px;border-radius:50%;background:var(--color-brand);flex:none;}

/* Sponsored ad (PPC) */
.adm-m-ppc{display:flex;flex-direction:column;gap:8px;margin-top:auto;width:100%;}
.adm-m-ppc__ad{display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:var(--radius-md,10px);border:1px solid var(--color-border);background:var(--color-surface-1,#fff);}
.adm-m-ppc__badge{align-self:flex-start;font-size:11px;font-weight:700;color:var(--color-text);border:1px solid var(--color-border);border-radius:5px;padding:1px 7px;}
.adm-m-ppc__links{display:flex;gap:16px;margin-top:5px;}
.adm-m-ppc__link{font-size:12px;color:var(--color-brand);}
.adm-m-ppc__spend{align-self:flex-start;display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:var(--radius-full,999px);background:var(--color-brand-dim,rgba(229,0,109,.08));color:var(--color-text-secondary);font-size:12px;font-weight:500;}
.adm-m-ppc__spend b{color:var(--color-brand);font-size:var(--font-size-base);font-weight:600;}

/* Rank tracker (SEO) */
.adm-m-rank{display:flex;flex-direction:column;gap:6px;margin-top:auto;width:100%;}
.adm-m-rank__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:var(--radius-md,10px);background:var(--color-surface-2,#f5f5f7);}
.adm-m-rank__kw{font-size:var(--font-size-sm);color:var(--color-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.adm-m-rank__pos{display:inline-flex;align-items:center;gap:6px;flex:none;}
.adm-m-rank__pos s{color:var(--color-text-secondary);font-size:12px;opacity:.7;}
.adm-m-rank__pos strong{color:var(--color-text);font-weight:600;}
.adm-m-rank__up{display:inline-flex;color:#1a7f37;}

/* Coverage / As featured in (Digital PR) */
.adm-m-cov{display:flex;flex-direction:column;gap:12px;margin-top:auto;width:100%;}
.adm-m-cov__label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-secondary);}
.adm-m-cov__headline{font-size:var(--font-size-lg);font-weight:500;color:var(--color-text);line-height:1.3;}
.adm-m-cov__logos{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.adm-m-cov__logo img{max-height:26px;width:auto;filter:grayscale(1);opacity:.7;}
.adm-m-cov__ghost{height:16px;width:74px;border-radius:5px;background:var(--color-border);}

/* Engagement (Social) */
.adm-m-eng{display:flex;flex-direction:column;gap:9px;margin-top:auto;width:100%;padding:14px;border-radius:var(--radius-md,10px);border:1px solid var(--color-border);background:var(--color-surface-1,#fff);}
.adm-m-eng__head{display:flex;align-items:center;gap:9px;}
.adm-m-eng__av{width:30px;height:30px;border-radius:50%;background:var(--color-brand);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600;flex:none;}
.adm-m-eng__handle{font-size:var(--font-size-sm);font-weight:500;color:var(--color-text);}
.adm-m-eng__cta{font-size:var(--font-size-sm);color:var(--color-text-secondary);}
.adm-m-eng__cta b{color:var(--color-brand);font-size:var(--font-size-xl,1.5rem);font-weight:600;margin-right:5px;}
.adm-m-eng__icons{display:flex;gap:20px;color:var(--color-text-secondary);opacity:.75;}
.adm-m-eng__icons span{display:inline-flex;}
.adm-m-eng__icons i{font-size:16px;line-height:1;}

/* Domain authority (Link building) */
.adm-m-auth{display:flex;flex-direction:column;gap:5px;margin-top:auto;width:100%;}
.adm-m-auth__val{font-size:clamp(var(--font-size-3xl),3vw,var(--font-size-5xl));font-weight:500;color:var(--color-brand);line-height:1;}
.adm-m-auth__label{font-size:var(--font-size-sm);color:var(--color-text-secondary);}
.adm-m-auth__bar{height:8px;border-radius:var(--radius-full,999px);background:var(--color-border);overflow:hidden;margin-top:8px;}
.adm-m-auth__bar span{display:block;height:100%;border-radius:inherit;background:var(--color-brand);}

/* Compliance panel (tool-window mock) */
.adm-m-comp{display:flex;flex-direction:column;margin-top:auto;width:100%;flex:1 1 auto;border:1px solid var(--color-border);border-radius:var(--radius-lg,14px);background:var(--color-surface-1,#fff);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.adm-m-comp__bar{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);font-weight:500;color:var(--color-text);}
.adm-m-comp__dot{width:9px;height:9px;border-radius:50%;background:#16a34a;flex:none;box-shadow:0 0 0 3px rgba(34,197,94,.18);}
.adm-m-comp__pill{margin-left:auto;font-size:11px;font-weight:600;color:#16a34a;background:rgba(34,197,94,.14);border-radius:var(--radius-full,999px);padding:3px 11px;}
.adm-m-comp__rows{display:flex;flex-direction:column;flex:1 1 auto;justify-content:center;gap:13px;padding:18px;}
.adm-m-comp__row{display:flex;align-items:center;gap:11px;font-size:var(--font-size-base);color:var(--color-text);}
.adm-m-comp__tick{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:rgba(34,197,94,.15);color:#16a34a;}
.adm-m-comp__tick i,.adm-m-comp__tick svg{font-size:13px;}

/* Featured snippet (Content) */
.adm-m-snip{display:flex;flex-direction:column;gap:8px;margin-top:auto;width:100%;}
.adm-m-snip__q{font-size:var(--font-size-sm);font-weight:500;color:var(--color-text);}
.adm-m-snip__box{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--radius-md,10px);border:1px solid var(--color-border-brand,rgba(229,0,109,.28));background:var(--color-brand-dim,rgba(229,0,109,.06));}
.adm-m-snip__src{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#1a7f37;margin-top:2px;}
.adm-m-snip__src i{width:12px;height:12px;border-radius:50%;background:#1a7f37;opacity:.5;flex:none;}

/* Fallback avatars so chat/profile look complete without an uploaded photo (match the HTML preview).
   Chat avatar = brand circle + support icon; profile avatar = brand gradient + initials. */
.adm-m-chat__av{width:30px;height:30px;flex:0 0 auto;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--color-brand);color:#fff;}
.adm-m-chat__av img{width:100%;height:100%;object-fit:cover;display:block;}
.adm-m-chat__av i{font-size:15px;}
.adm-m-chat__bubble{background:var(--color-surface-2);}
.adm-m-profile__av{width:46px;height:46px;flex:0 0 auto;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,var(--color-brand),#ff7ab0);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);}
.adm-m-profile__av img{width:100%;height:100%;object-fit:cover;display:block;}
.adm-m-profile__av-i{font-weight:600;font-size:16px;letter-spacing:.02em;}

/* ── Align bento graphics to the HTML preview ── */
/* Big stat number in brand magenta. */
.adm-m-tile__v{color:var(--color-brand);}
/* Area callout: big dark value + green "engagement" pill with a trend icon. */
.adm-m-area__callout{align-items:center;gap:9px;}
.adm-m-area__v{font-size:var(--font-size-3xl);color:var(--color-text);}
.adm-m-area__l{display:inline-flex;align-items:center;gap:5px;background:rgba(34,197,94,.14);color:#16a34a;font-weight:600;font-size:13px;padding:5px 11px;border-radius:999px;}
.adm-m-area__l i,.adm-m-area__l svg{font-size:14px;}
/* Skill bars: gradient fill like the preview. */
.adm-m-skill__bar>span{background:linear-gradient(90deg,var(--color-brand),#ff4b9e);}
/* Area fills the large feature tile. */
.adm-m-tile--feature .adm-m-area{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;}
.adm-m-tile--feature .adm-m-area__svg{height:130px;}

/* ── Bento scroll-stacking (Scroll-stack cards toggle) ──
   Each column is its own pile of position:sticky cards; scrolling stacks them.
   No reveal-stagger here (its transform/opacity would trap sticky). */
.adm-m-bento--stack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);align-items:start;}
.adm-m-bento__col{display:flex;flex-direction:column;gap:var(--space-4);min-width:0;}
.adm-m-bento--stack .adm-m-stack-item{position:sticky;top:calc(96px + var(--stack-i,0) * 16px);min-width:0;}
.adm-m-bento--stack .adm-m-stack-item .adm-m-tile{min-height:240px;box-shadow:0 6px 22px -14px rgba(0,0,0,.22);}
/* keep the logo marquee from forcing the column wider than its track */
.adm-m-bento--stack .adm-m-marq{width:100%;max-width:100%;}
@media (max-width:900px){.adm-m-bento--stack{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){
  .adm-m-bento--stack{grid-template-columns:1fr;gap:var(--space-3);}
  .adm-m-bento--stack .adm-m-stack-item{top:calc(80px + var(--stack-i,0) * 12px);}
  .adm-m-bento--stack .adm-m-stack-item .adm-m-tile{min-height:180px;}
}

/* Sparkline bento tile: stat/label sit up top and the line grows to fill the tile height. */
.adm-m-tile__gfx--spark{justify-content:flex-start;}
.adm-m-tile__gfx--spark .adm-m-tile__v{margin-top:0;}
.adm-m-tile__gfx--spark .adm-m-spark{flex:1 1 auto;height:auto;min-height:110px;margin-top:var(--space-5);}


/* == adm-overrides == */
/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — SITE OVERRIDES
   Custom style adjustments applied last in the cascade.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero review badges — equal-height cards (Clutch widget + Google/Trustpilot images) ── */
.adm-hero-reviews { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.adm-hero-reviews__card {
  flex: 1 1 0;
  max-width: 220px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
.adm-hero-reviews__card--clutch { padding: 8px 18px; }
.adm-hero-reviews__img { max-height: 60px; width: auto; max-width: 100%; object-fit: contain; display: block; }
/* Static Clutch badge (replaces the freezing widget) */
.adm-clutch-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; text-decoration: none; line-height: 1.15; }
.adm-clutch-badge__eyebrow { font-family: Arial, Helvetica, sans-serif; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #7a7f87; }
.adm-clutch-badge__name { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.4px; color: #17313b; }
.adm-clutch-badge__meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.adm-clutch-badge__stars { color: #ff3d2e; font-size: 13px; letter-spacing: 1px; }
.adm-clutch-badge__count { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #5f6368; }

/* ── Body text weight ── */
body {
  font-weight: var(--font-weight-light);
  color: var(--color-text);
}

body p,
body .prose p {
  font-weight: var(--font-weight-light);
  color: var(--color-text);
}

/* ── Dark mode award images ── */
html[data-theme="dark"] .footer-award-item img {
  mix-blend-mode: screen;
  filter: brightness(2);
}

/* ── Hero form card ── */
.adm-form-card__title {
  font-size: var(--font-size-3xl);
}

.adm-form-card fieldset {
  border: none;
}

.adm-form-card fieldset > p:nth-of-type(1) {
  height: 0px;
}

.adm-form-card form .row {
  gap: 12px;
  display: flex;
}

.adm-form-card form .row .pb-4 {
  margin-bottom: 12px;
}

.adm-form-card form .row .col-md-6 {
  width: 50%;
}

.adm-form-card form .row .col {
  width: 100%;
}

.adm-form-card form .row br,
.adm-form-card form .row hr {
  display: none;
}

/* ── Award images ── */
.footer-award-item img {
  height: 100px !important;
  opacity: 1;
}

/* ── Logo size ── height/width governed by ADM Control (logo_width) via
   `.site-logo img.site-logo__img`; sane proportional fallback here. */
.site-logo img {
  height: auto;
  width: auto;
  max-height: 40px;
}

/* ── Hero award laurel ── */
.adm-hero-award__name {
  max-width: 160px;
}

.adm-laurel {
  width: 22px;
}

/* ── Header spacing ── */
/* Header padding is defined once in navigation.css (--space-6 / scrolled --space-4).
   The duplicate .site-header blocks that used to live here were overriding it. */
.header-spacer {
  height: 76px;
}

/* ── Heading underline colour ── */
h1 u {
  text-decoration-color: var(--color-brand);
}

/* ── Background image sections ── */
.adm-section--has-bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Hero awards heading ── */
.adm-hero-big .label {
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

/* ── Awards list marquee — full page width with card containers ── */
.awards-list-marquee {
  width: 100%;
  padding: var(--space-8) 0;
  position: relative;
  overflow: hidden;
}

.awards-list-marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  min-width: 180px;
  min-height: 100px;
}

.awards-list-marquee__img {
  height: 80px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

/* ── About gallery — two-column vertical marquee ── */
.about-gallery {
  overflow: hidden;
  border-radius: var(--radius-lg);
  height: 500px;
}

.about-gallery__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  height: 100%;
}

.about-gallery .magic-marquee--vertical {
  height: 100%;
  --marquee-duration: 70s; /* slower vertical scroll for the content+media gallery (base is 30s) */
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 40px, black calc(100% - 40px), transparent);
  mask-image: linear-gradient(to bottom, transparent, black 40px, black calc(100% - 40px), transparent);
}

.about-gallery .magic-marquee__track {
  gap: var(--space-3);
  width: 100%;            /* override base width:max-content so column-flex items fill the marquee */
}

.about-gallery__item {
  flex-shrink: 0;
  width: 100%;            /* fill the marquee column so images size to the grid cell, not native px */
}

.about-gallery__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Mobile: 2 horizontal rows instead of 2 vertical columns.
   Override the vertical-marquee variant to scroll left-right. */
@media (max-width: 768px) {
  .about-gallery {
    height: auto;
  }

  .about-gallery__columns {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: var(--space-3);
  }

  /* Re-orient both marquees to horizontal */
  .about-gallery .magic-marquee--vertical {
    height: 180px;
    -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
  }

  .about-gallery .magic-marquee--vertical .magic-marquee__track {
    flex-direction: row;
    animation-name: magic-marquee-scroll;   /* use the horizontal keyframes */
  }

  /* Sized images so they sit as a horizontal strip */
  .about-gallery .about-gallery__item {
    width: 240px;
    height: 100%;
    flex-shrink: 0;
  }

  .about-gallery .about-gallery__img {
    height: 100%;
    width: 100%;
    aspect-ratio: auto;
  }
}

/* ── Video testimonials bento grid ── */
.vt-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.vt-bento__item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.vt-bento__item--wide {
  grid-column: span 2;
}

.vt-bento__item--tall {
  grid-row: span 2;
}

.vt-bento__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.vt-bento__media video,
.vt-bento__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vt-bento__body {
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.vt-bento__text {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-5);
  flex: 1;
}

.vt-bento__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.vt-bento__author-logo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.vt-bento__author-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0;
}

.vt-bento__author-company {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 900px) {
  .vt-bento {
    grid-template-columns: 1fr;
  }
  .vt-bento__item--wide,
  .vt-bento__item--tall {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Full-width client logo marquee in video testimonial section */
.vt-logos-marquee {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: var(--space-8) 0;
  margin-bottom: var(--space-8);
}

.vt-logos-marquee__item {
  flex-shrink: 0;
  padding: 0 var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vt-logos-marquee__img {
  height: 56px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

/* ── Sub services icon ── */
.sub-services__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Content block full-width gallery marquee ── */
.content-block-gallery {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
}

.content-block-gallery__item {
  flex-shrink: 0;
  width: 280px;
  height: 280px;
  padding: 0 var(--space-3);
}

.content-block-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

/* ── Category filters (blog archive) — horizontal scroll ── */
.adm-filters {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding-bottom: var(--space-2);
  /* Fade edges so items appear to scroll behind */
  -webkit-mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
}

.adm-filters::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.adm-filters__item {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--duration-fast) ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.adm-filters__item:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-brand-dim);
}

.adm-filters__item.is-active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #ffffff;
}


/* ── Posts pagination — centered rounded rectangles ── */
.adm-pagination {
  display: flex;
  justify-content: center;
}

/* Hide the "Posts pagination" screen reader heading */
.adm-pagination .screen-reader-text,
.adm-pagination h2.screen-reader-text,
.adm-pagination h2 {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.adm-pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.adm-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: all var(--duration-fast) ease;
}

.adm-pagination .page-numbers:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-brand-dim);
  transform: translateY(-1px);
}

.adm-pagination .page-numbers.current {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #ffffff;
}

.adm-pagination .page-numbers.current:hover {
  transform: none;
  background: var(--color-brand);
  color: #ffffff;
}

.adm-pagination .page-numbers.dots {
  border: none;
  background: transparent;
  cursor: default;
}

.adm-pagination .page-numbers.dots:hover {
  background: transparent;
  color: var(--color-text);
  transform: none;
}

.adm-pagination .prev,
.adm-pagination .next {
  font-size: 16px;
}

/* ── Awards Cards (absolute_awards repeater) ── */
.adm-awards-cards .grid {
  grid-auto-rows: 1fr;
}

/* Logo area — use a light neutral background so logos read well */
.award-card .award-card__image {
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  aspect-ratio: 16 / 10;
}

.award-card .award-card__img {
  max-width: 60%;
  max-height: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform var(--duration-slow) var(--ease-out);
}

.award-card:hover .award-card__img {
  transform: scale(1.05);
}

html[data-theme="dark"] .award-card .award-card__img {
  mix-blend-mode: screen;
  filter: brightness(1.8);
}

html[data-theme="dark"] .award-card .award-card__image {
  background: rgba(255, 255, 255, 0.04);
}

.award-card__result {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--color-brand);
  color: #ffffff;
  border-radius: var(--radius-full);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--space-3);
}

.award-card__summary {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

/* ── Client Testimonials (Full) — HR section ──
   Scoped to .adm-client-testimonials-full so the main testimonial-section
   (which centres its content) stays unaffected. */

.adm-client-testimonials-full .testimonial-card {
  text-align: left;
  align-items: stretch;
  gap: 0;
  overflow: hidden; /* clip the full-width video breakout to card rounded corners */
}

/* Meta stack — Project Title > Date > Service (vertical) */
.adm-client-testimonials-full .testimonial-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.adm-client-testimonials-full .testimonial-card__project {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text);
  margin: 0;
}

.adm-client-testimonials-full .testimonial-card__date {
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wide);
}

.adm-client-testimonials-full .testimonial-card__services {
  align-self: flex-start;
}

/* Video breaks out of the card's --space-12 padding to go edge-to-edge */
.adm-client-testimonials-full .testimonial-card__video {
  position: relative;
  width: calc(100% + (var(--space-12) * 2));
  margin-left: calc(var(--space-12) * -1);
  margin-right: calc(var(--space-12) * -1);
  margin-bottom: var(--space-6);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.adm-client-testimonials-full .testimonial-card__video .adm-video {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* Testimonial text — left aligned and full width for HR variant */
.adm-client-testimonials-full .testimonial-card__text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  margin: 0 0 var(--space-6);
  max-width: none;
  text-align: left;
}

.adm-client-testimonials-full .testimonial-card__quote {
  font-size: 56px;
  line-height: 1;
  color: var(--color-brand);
  opacity: 0.4;
  margin-bottom: var(--space-2);
  align-self: flex-start;
}

/* Footer: logo row above author row */
.adm-client-testimonials-full .testimonial-card__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.adm-client-testimonials-full .testimonial-card__author-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.adm-client-testimonials-full .testimonial-card__author-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0;
}

.adm-client-testimonials-full .testimonial-card__author-title {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* Client logo container (lives in footer, above author row) */
.adm-client-testimonials-full .testimonial-card__logo--inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 72px;
  max-width: 180px;
  height: 56px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.adm-client-testimonials-full .testimonial-card__logo--inline .testimonial-card__logo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

html[data-theme="dark"] .adm-client-testimonials-full .testimonial-card__logo--inline,
.adm-section--dark .adm-client-testimonials-full .testimonial-card__logo--inline {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .adm-client-testimonials-full .testimonial-card__logo-img {
  mix-blend-mode: screen;
  filter: brightness(1.8);
}

.adm-client-testimonials-full .testimonial-card__avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ── Testimonial filters (centre-aligned variant) ── */
.adm-filters.adm-filters--center {
  justify-content: center;
}

/* ── Team testimonial cards (video top, body below) ── */
/* Card keeps overflow:visible so container effects (beam/border/glow) render. */
.team-testi-card {
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Video wrapper handles its own clipping so the outer card stays unclipped. */
.team-testi-card__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.team-testi-card__video .adm-video {
  width: 100%;
  height: 100%;
}

.team-testi-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-4);
}

.team-testi-card__quote {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--color-brand);
  font-size: 40px;
  line-height: 1;
  margin-bottom: var(--space-1);
}

.team-testi-card__text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
  flex: 1;
}

.team-testi-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.team-testi-card__author .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.team-testi-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0;
}

.team-testi-card__job {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
}

/* ── FAQs filter/tab bar (multi-FAQ pages) ── */
.adm-faq-filters {
  /* Inherits .adm-filters base styles (scroll, pills) */
  flex-wrap: wrap;
}

.adm-faq-filters__item {
  /* Slightly larger and more tab-like than standard filter pills */
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-base);
}

/* Scroll offset target so anchor jumps don't hide behind fixed header */
.adm-faq-anchor {
  display: block;
  position: relative;
  top: -96px;
  height: 0;
  pointer-events: none;
}

/* Any section that has its own manual section_id gets the same offset */
.adm-section[id] {
  scroll-margin-top: 96px;
}

/* ════════════════════════════════════════════════════════════════
   TECH STACK (Orbiting Circles)
   ════════════════════════════════════════════════════════════════ */

.adm-tech-stack .tech-stack__split {
  grid-template-columns: 1fr 1fr;
}

/* Collapses with every other split at 860, not at the 768 further down. Below 860 the mobile-centre
   rules force this section's copy to centre, and a centred 350px column of body text is the thing
   that looked broken at 821px. The orbit keeps its own 768 sizing; it fits the single column above
   that width. */
@media (max-width: 860px) {
  .adm-tech-stack .tech-stack__split { grid-template-columns: 1fr; }

  /* 1fr is minmax(auto, 1fr), and a grid item's auto minimum is its min-content — so the column
     cannot shrink below the orbit's fixed width and inflates to match it. The orbit already
     carries max-width:100%, but 100% of an inflated column is the inflated width, so it never
     bites: at 375px the column became 360px inside a 311px container and both children hung 49px
     over the edge. min-width:0 breaks the circularity, the column takes the container's width,
     and max-width:100% finally clamps the orbit. */
  .adm-tech-stack .tech-stack__split > * { min-width: 0; }
}

.tech-stack__orbit {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tech-stack__orbit-box {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 320px;
}

/* Override base magic-orbit sizing for this use */
.tech-stack__orbit-box.magic-orbit {
  width: 480px;
  height: 480px;
  max-width: 100%;
}

.tech-stack__ring {
  border-color: rgba(229, 0, 109, 0.18) !important;
}

.tech-stack__ring--inner {
  inset: 22% !important;
}

.tech-stack__item {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  width: 56px !important;
  height: 56px !important;
  padding: 10px;
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.tech-stack__item:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-lg);
  z-index: 3;
}

.tech-stack__item--sm {
  width: 44px !important;
  height: 44px !important;
  padding: 8px;
}

.tech-stack__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Text fallback shown in an orbit node until an official logo is uploaded */
.tech-stack__label {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.15;
  padding: 0 4px;
}

/* Hover tooltip showing the tool name (replaces the flaky native title attr).
   NB: do NOT set position:relative on .tech-stack__item — it is already position:absolute
   (from .magic-orbit__item), which is a valid containing block for the tooltip. Overriding it
   to relative knocks every icon off its orbit ring. */
.tech-stack__tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 9px;
  background: var(--color-text);
  color: var(--color-surface-1);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
  z-index: 10;
}
.tech-stack__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-text);
}
.tech-stack__item:hover .tech-stack__tip,
.tech-stack__item:focus-visible .tech-stack__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Freeze the orbiting items while hovering one, so the tooltip is readable and stays put. The
   items never rotate (offset-rotate:0), so this just stops their travel — nothing tilts. */
.magic-orbit:has(.tech-stack__item:hover) .tech-stack__item {
  animation-play-state: paused;
}

html[data-theme="dark"] .tech-stack__logo-img,
.adm-section--dark .tech-stack__logo-img {
  filter: brightness(1.1);
}

.tech-stack__center {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-shadow: 0 0 32px rgba(229, 0, 109, 0.4), var(--shadow-lg);
}

.tech-stack__center-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
  .adm-tech-stack .tech-stack__split {
    grid-template-columns: 1fr;
  }
  .tech-stack__orbit-box.magic-orbit {
    width: 360px;
    height: 360px;
  }
  .tech-stack__item {
    width: 44px !important;
    height: 44px !important;
  }
  .tech-stack__item--sm {
    width: 36px !important;
    height: 36px !important;
  }
  .tech-stack__center {
    width: 72px;
    height: 72px;
  }
}


/* ════════════════════════════════════════════════════════════════
   GLOBAL CLIENTS
   ════════════════════════════════════════════════════════════════ */

.adm-global-clients .global-clients__split {
  grid-template-columns: 1fr 1fr;
}

/* Sphere wrapper — square, full globe visible. Author controls any clipping. */
.global-clients__sphere {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* Globe: square, full-width of its parent wrapper */
.global-clients__globe {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.global-clients__canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}

.global-clients__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── Background client-logo marquee ── */
.global-clients__logo-marquee {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  --marquee-duration: 55s;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.global-clients__logo-marquee .magic-marquee__track {
  gap: var(--space-12);
  align-items: center;
  height: 80px;
}

.global-clients__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 120px;
}

.global-clients__logo-img {
  max-width: 140px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
}

html[data-theme="dark"] .global-clients__logo-marquee {
  opacity: 0.18;
}

html[data-theme="dark"] .global-clients__logo-img {
  filter: grayscale(1) brightness(1.6);
}

/* Visible magenta hit-dot per marker — sits over each cobe-rendered
   marker, provides hover/click for the tooltip. */
.global-clients__dot {
  position: absolute;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  padding: 0;
  border: 0;
  background: var(--color-brand);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 0 10px rgba(229, 0, 109, 0.6);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.global-clients__dot:hover,
.global-clients__dot:focus-visible {
  outline: none;
  transform: scale(1.4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 18px rgba(229, 0, 109, 0.9);
}

/* Tooltip */
.global-clients__tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 18px));
  min-width: 200px;
  max-width: 260px;
  padding: var(--space-4);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, visibility 150ms;
  pointer-events: none;
  z-index: 10;
}

.global-clients__tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.global-clients__tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--color-surface-1);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.global-clients__tooltip-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.global-clients__tooltip-logo img {
  max-height: 32px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.global-clients__tooltip-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.global-clients__tooltip-country {
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.global-clients__tooltip-blurb {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.global-clients__tooltip-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  text-decoration: none;
  transition: gap 120ms ease;
}

.global-clients__tooltip-cta:hover { gap: var(--space-3); }

html[data-theme="dark"] .global-clients__tooltip {
  background: rgba(20, 20, 22, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}

html[data-theme="dark"] .global-clients__tooltip::after {
  background: rgba(20, 20, 22, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Globe canvas itself */
.global-clients__globe {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.global-clients__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none; /* allow pointer drag on touch devices without scrolling */
}

.global-clients__globe.is-grabbing .global-clients__canvas,
.global-clients__canvas:active {
  cursor: grabbing;
}

/* Interactive dot layer sits ON TOP of the globe canvas */
.global-clients__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Invisible hit-boxes overlaid on cobe's rendered markers.
   Cobe draws the visible magenta dots; these only capture hover/click. */
.global-clients__dot {
  position: absolute;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  /* Subtle hover glow so users get visual feedback over the cobe marker */
  border-radius: 50%;
  transition: background var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.global-clients__dot:hover,
.global-clients__dot:focus-visible {
  outline: none;
  background: radial-gradient(circle, rgba(229, 0, 109, 0.25) 0%, transparent 70%);
  box-shadow: 0 0 0 2px rgba(229, 0, 109, 0.4);
}

/* Tooltip — shared, positioned by JS above the hovered dot */
.global-clients__tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 16px));
  min-width: 200px;
  max-width: 260px;
  padding: var(--space-4);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) ease, visibility var(--duration-fast);
  pointer-events: none;
  z-index: 10;
}

.global-clients__tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.global-clients__tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--color-surface-1);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.global-clients__tooltip-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.global-clients__tooltip-logo {
  height: 32px;
  display: flex;
  align-items: center;
}

.global-clients__tooltip-logo img {
  max-height: 32px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.global-clients__tooltip-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.global-clients__tooltip-country {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.global-clients__tooltip-blurb {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.global-clients__tooltip-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  text-decoration: none;
  transition: gap var(--duration-fast) ease;
}

.global-clients__tooltip-cta:hover {
  gap: var(--space-3);
}

html[data-theme="dark"] .global-clients__tooltip {
  background: rgba(20, 20, 22, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}

html[data-theme="dark"] .global-clients__tooltip::after {
  background: rgba(20, 20, 22, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 768px) {
  .adm-global-clients .global-clients__split {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════
   WORLD MAP (dotted, with animated connections)
   ════════════════════════════════════════════════════════════════ */

.adm-world-map .world-map__header {
  margin-bottom: var(--space-10);
}

.adm-world-map .world-map__header--center {
  text-align: center;
}

.adm-world-map .world-map__header h2 {
  margin-top: var(--space-3);
}

.adm-world-map .world-map__header .prose {
  margin-top: var(--space-5);
}

.adm-world-map .world-map__header-cta {
  margin-top: var(--space-6);
}

/* The map itself */
.world-map {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  font-family: inherit;
  /* Neutral mid-grey dot colour that reads on BOTH light and dark
     backgrounds. Theme toggle no longer touches the map — instant swap. */
  --world-map-dot-color: rgba(128, 128, 128, 0.45);
}

/* Background dotted map — soft vertical fade at top/bottom edges */
.world-map__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  color: var(--world-map-dot-color);  /* propagates to circles via currentColor */
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.world-map__bg svg,
.world-map__bg-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
}

/* Overlay SVG — connections + pulsing endpoint dots */
.world-map__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

/* Path draws itself on load (dasharray trick).
   non-scaling-stroke keeps the arc a real-pixel hairline: the SVG coordinate space is the
   DottedMap's own (~260x100), so without it a stroke-width of 1 scales to a ~8px slab on a
   full-width map, and to something different again at every breakpoint. */
.world-map__path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: adm-world-map-draw 1s linear forwards;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

@keyframes adm-world-map-draw {
  to { stroke-dashoffset: 0; }
}

/* Interactive client dots */
.world-map__clients {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.world-map__dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  padding: 0;
  border: 0;
  background: var(--color-brand);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55), 0 0 5px rgba(229, 0, 109, 0.32);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 150ms ease, box-shadow 150ms ease;
  animation: adm-world-map-pulse 3s ease-in-out infinite;
}

.world-map__dot:hover,
.world-map__dot:focus-visible {
  outline: none;
  animation-play-state: paused;
  transform: scale(1.4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 18px rgba(229, 0, 109, 0.95);
}

@keyframes adm-world-map-pulse {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55), 0 0 5px rgba(229, 0, 109, 0.30); }
  50%      { box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.28), 0 0 10px rgba(229, 0, 109, 0.45); }
}

/* Tooltip (shared, positioned above the hovered dot) */
.world-map__tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 18px));
  min-width: 200px;
  max-width: 260px;
  padding: var(--space-4);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, visibility 150ms;
  pointer-events: none;
  z-index: 10;
}

.world-map__tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.world-map__tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--color-surface-1);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.world-map__tooltip-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.world-map__tooltip-logo img {
  max-height: 32px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Industry icon chip (shown instead of a client logo). Hide the slot entirely if it's empty. */
.world-map__tooltip-logo:empty { display: none; }
.world-map__tooltip-logo i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-brand-dim, rgba(229, 0, 109, 0.1));
  color: var(--color-brand);
  font-size: 24px;
  line-height: 1;
}

.world-map__tooltip-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.world-map__tooltip-country {
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.world-map__tooltip-blurb {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.world-map__tooltip-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  text-decoration: none;
  transition: gap 120ms ease;
}

.world-map__tooltip-cta:hover { gap: var(--space-3); }

html[data-theme="dark"] .world-map__tooltip {
  background: rgba(20, 20, 22, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}

html[data-theme="dark"] .world-map__tooltip::after {
  background: rgba(20, 20, 22, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ════════════════════════════════════════════════════════════════
   READ MORE CLAMP (Content Block)
   Body content clamps to 3 lines with a fade-out mask; Read more
   button expands to full height.
   ════════════════════════════════════════════════════════════════ */

[data-adm-read-more] .adm-readmore__clamp {
  position: relative;
  overflow: hidden;
  /* ~3 lines at body line-height. Tweak via CSS var if needed. */
  max-height: var(--adm-readmore-max-h, 4.8em);
  -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent);
  mask-image: linear-gradient(to bottom, black 65%, transparent);
}

[data-adm-read-more].is-expanded .adm-readmore__clamp {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

[data-adm-read-more] .adm-readmore__clamp > :first-child {
  margin-top: 0;
}

.adm-readmore__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.adm-readmore__toggle:hover {
  text-decoration-thickness: 2px;
}


/* ════════════════════════════════════════════════════════════════
   CONTENT BLOCK — full-viewport awards marquee
   ════════════════════════════════════════════════════════════════ */

.content-block__awards {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: var(--space-10);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-8);
}

.content-block__awards .magic-marquee {
  /* Soft fade at the viewport edges */
  -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}


/* ════════════════════════════════════════════════════════════════
   CASE STUDY HERO BANNER — full-viewport hero on top of adm_section_open
   ════════════════════════════════════════════════════════════════ */

.adm-hero-casestudy {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Overlay gradient — uses ::after so ::before stays free for bg_effect
   pseudo-elements (magic-dot-grid / magic-line-grid). */
.adm-hero-casestudy.adm-section--has-bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.adm-hero-casestudy.adm-section--has-bg-image[data-bg="Light"]::after {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.15) 100%);
}

.adm-hero-casestudy.adm-section--has-bg-image[data-bg="Dark"]::after,
.adm-hero-casestudy.adm-section--has-bg-image[data-bg="Black"]::after {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.adm-hero-casestudy.adm-section--has-bg-image[data-bg="Magenta"]::after,
.adm-hero-casestudy.adm-section--has-bg-image[data-bg="Purple"]::after {
  background: linear-gradient(135deg, rgba(229, 0, 109, 0.75) 0%, rgba(229, 0, 109, 0.45) 100%);
}

/* Ensure the container sits above the overlay AND the bg_effect grid */
.adm-hero-casestudy > .container {
  position: relative;
  z-index: 2;
}

/* Single-column layout when there are no side images */
.adm-hero-casestudy__single {
  width: 100%;
}

/* Centred alignment: flex rows (CTAs / badges) need explicit justify-content
   because text-align doesn't affect flex children. */
.adm-hero-casestudy.text-center .adm-hero-casestudy__ctas,
.adm-hero-casestudy.text-center .adm-hero-casestudy__badges {
  justify-content: center;
}

.adm-hero-casestudy.text-right .adm-hero-casestudy__ctas,
.adm-hero-casestudy.text-right .adm-hero-casestudy__badges {
  justify-content: flex-end;
}

/* Overline dot */
.adm-hero-casestudy__overline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.adm-hero-casestudy__overline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand);
  box-shadow: 0 0 8px var(--color-brand);
  display: inline-block;
}

.adm-hero-casestudy__heading {
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.adm-hero-casestudy__ctas {
  margin-top: var(--space-8);
}

.adm-hero-casestudy__badges {
  margin-top: var(--space-8);
}

.adm-hero-casestudy__images {
  position: relative;
}

.adm-hero-casestudy__overlay-img {
  position: absolute;
  bottom: -20px;
  left: -20px;
  z-index: 3;
}

/* Reverse layout: swap column order */
.split--reverse {
  direction: rtl;
}
.split--reverse > * {
  direction: ltr;
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — HEADER SECTIONS
   On mobile: larger h1 minimums + forced centre alignment regardless
   of the section's content_align setting.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Bigger headings on mobile ── */
  .adm-hero-big h1,
  .adm-hero-short h1,
  .adm-hero-casestudy h1,
  .adm-hero-casestudy__heading {
    font-size: clamp(2.25rem, 9vw, 3rem);  /* 36–48px */
    line-height: 1.1;
  }

  .adm-hero-big h2,
  .adm-hero-short h2,
  .adm-hero-casestudy h2 {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    line-height: 1.15;
  }

  /* Body / lead text stays readable */
  .adm-hero-big .prose,
  .adm-hero-short .prose,
  .adm-hero-casestudy .prose,
  .adm-hero-big .lead,
  .adm-hero-short .lead {
    font-size: var(--font-size-base);
  }

  /* ── Force centre alignment on header sections ── */
  .adm-hero-big,
  .adm-hero-short,
  .adm-hero-casestudy {
    text-align: center;
  }

  /* Centre all flex rows (CTAs, badges, etc.) */
  .adm-hero-big .flex,
  .adm-hero-short .flex,
  .adm-hero-casestudy .flex {
    justify-content: center;
  }

  /* Overlines + award laurel badges */
  .adm-hero-big .adm-hero-award,
  .adm-hero-short .adm-hero-award,
  .adm-hero-big .section-header__overline,
  .adm-hero-short .section-header__overline,
  .adm-hero-casestudy .section-header__overline,
  .adm-hero-casestudy__overline {
    justify-content: center;
  }

  /* Split layouts collapse to single column on mobile (layout.css already
     does this for .grid-*). Here we also centre the stacked content. */
  .adm-hero-big .split,
  .adm-hero-short .split,
  .adm-hero-casestudy .split {
    text-align: center;
  }

  .adm-hero-big .split > *,
  .adm-hero-short .split > *,
  .adm-hero-casestudy .split > * {
    justify-self: center;
  }

  /* Case study overlay image — re-centre horizontally */
  .adm-hero-casestudy__overlay-img {
    left: 50%;
    transform: translateX(-50%);
  }
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — GENERAL FLEX STACKING + ALIGNMENT
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* `.flex.flex-between` (used for section-header + CTA side-by-side)
     stacks vertically with a gap on mobile. */
  .flex.flex-between {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
  }

  /* Inherit a proper gap for any .flex row that doesn't already set one */
  .flex:not([class*="gap-"]) {
    gap: var(--space-4);
  }

  /* Left-aligned sections (default, no .text-center / .text-right class):
     CTAs inside `.flex.flex-between` should align to the LEFT when stacked
     on mobile — not stretched or centred. */
  .adm-section:not(.text-center):not(.text-right) .flex.flex-between {
    align-items: flex-start;
  }

  /* Centre-aligned sections: centre stacked children */
  .adm-section.text-center .flex.flex-between {
    align-items: center;
  }

  /* Right-aligned sections: right-align stacked children */
  .adm-section.text-right .flex.flex-between {
    align-items: flex-end;
  }
}


/* ════════════════════════════════════════════════════════════════
   CALENDLY SECTION
   ════════════════════════════════════════════════════════════════ */

.adm-calendly__widget-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-2);
}

.adm-calendly__widget {
  width: 100%;
}

.adm-calendly--split .adm-calendly__split {
  grid-template-columns: 1fr 1.4fr;
}

.adm-calendly__text {
  padding-right: var(--space-6);
}

.adm-calendly__text h2 {
  line-height: var(--line-height-snug);
}

@media (max-width: 900px) {
  .adm-calendly--split .adm-calendly__split {
    grid-template-columns: 1fr;
  }
  .adm-calendly__text {
    padding-right: 0;
  }
}

/* Dark section: give the widget a subtle light panel so the Calendly iframe
   has a clean background behind its shadow/rounded corners */
.adm-section--dark .adm-calendly__widget-wrap {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ════════════════════════════════════════════════════════════════
   CARDS — prevent section content_align cascading into card content.
   The section heading still follows content_align; card inner text
   stays left-aligned for readability.
   ════════════════════════════════════════════════════════════════ */

.adm-employee-testimonials .adm-employee-testimonial-card,
.adm-employee-testimonials .adm-employee-testimonial-card *,
.adm-different .adm-different-card,
.adm-different .adm-different-card * {
  text-align: left;
}

/* ════════════════════════════════════════════════════════════════
   TABS — vertical redesign
   Left-column nav, right-column rich panel with optional image.
   ════════════════════════════════════════════════════════════════ */

.adm-tabs--vertical {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 0;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-8);
}

/* ── Nav (left column) ── */
.adm-tabs--vertical .adm-tabs__nav {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0;
  background: var(--color-surface-2);
  border-right: 1px solid var(--color-border);
}

.adm-tabs--vertical .adm-tabs__tab {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: transparent;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.adm-tabs--vertical .adm-tabs__tab:hover {
  background: rgba(0, 0, 0, 0.03);
  color: var(--color-text);
}

.adm-tabs--vertical .adm-tabs__tab.is-active {
  background: var(--color-surface-1);
  color: var(--color-text);
}

.adm-tabs--vertical .adm-tabs__tab-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-brand);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 200ms ease;
}

.adm-tabs--vertical .adm-tabs__tab.is-active .adm-tabs__tab-indicator {
  transform: scaleY(1);
}

.adm-tabs__serial {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  padding-top: 2px;
  letter-spacing: var(--letter-spacing-wide);
}

.adm-tabs__tab-title {
  line-height: var(--line-height-snug);
  flex: 1;
}

/* ── Panels (right column) ── */
.adm-tabs--vertical .adm-tabs__panels {
  position: relative;
}

.adm-tabs--vertical .adm-tabs__panel {
  display: none;
  padding: var(--space-8);
  animation: adm-tabs-fade 250ms ease;
}

.adm-tabs--vertical .adm-tabs__panel.is-active {
  display: block;
}

@keyframes adm-tabs-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.adm-tabs__panel-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.adm-tabs__panel-inner:has(.adm-tabs__panel-media) {
  grid-template-columns: 1.1fr 0.9fr;
}

.adm-tabs__panel-serial {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  letter-spacing: var(--letter-spacing-wider);
  margin-bottom: var(--space-3);
  padding: 4px 10px;
  background: var(--color-brand-dim);
  border-radius: var(--radius-full);
}

.adm-tabs__panel-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}

.adm-tabs__panel-lead {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5);
}

.adm-tabs__panel-bullets {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.adm-tabs__panel-bullets ul,
.adm-tabs__panel-bullets ol {
  padding-left: 0;
  list-style: none;
}

.adm-tabs__panel-bullets li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
  line-height: var(--line-height-relaxed);
}

.adm-tabs__panel-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--color-brand);
  border-radius: 50%;
}

.adm-tabs__panel-cta {
  margin-top: var(--space-6);
}

.adm-tabs__panel-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}

.adm-tabs__panel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}

.adm-tabs--vertical .adm-tabs__panel.is-active .adm-tabs__panel-img {
  transform: scale(1);
}

/* ── Dark section variant ── */
.adm-section--dark .adm-tabs--vertical {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.adm-section--dark .adm-tabs--vertical .adm-tabs__nav {
  background: rgba(255, 255, 255, 0.02);
  border-right-color: rgba(255, 255, 255, 0.08);
}
.adm-section--dark .adm-tabs--vertical .adm-tabs__tab:hover {
  background: rgba(255, 255, 255, 0.04);
}
.adm-section--dark .adm-tabs--vertical .adm-tabs__tab.is-active {
  background: rgba(255, 255, 255, 0.05);
}

/* ── Mobile: stack nav horizontally above panels ── */
@media (max-width: 900px) {
  .adm-tabs--vertical {
    grid-template-columns: 1fr;
  }
  .adm-tabs--vertical .adm-tabs__nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .adm-tabs--vertical .adm-tabs__nav::-webkit-scrollbar { display: none; }
  .adm-tabs--vertical .adm-tabs__tab {
    flex-direction: column;
    white-space: nowrap;
    padding: var(--space-4) var(--space-5);
    flex-shrink: 0;
    gap: var(--space-1);
  }
  .adm-tabs--vertical .adm-tabs__tab-indicator {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 3px;
    transform: scaleX(0);
  }
  .adm-tabs--vertical .adm-tabs__tab.is-active .adm-tabs__tab-indicator {
    transform: scaleX(1);
  }
  .adm-tabs--vertical .adm-tabs__panel {
    padding: var(--space-6);
  }
  .adm-tabs__panel-inner,
  .adm-tabs__panel-inner:has(.adm-tabs__panel-media) {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}


/* ════════════════════════════════════════════════════════════════
   CARDS — prevent section content_align cascading into card content.
   ════════════════════════════════════════════════════════════════ */

/* (block moved above) */

/* Utility */
.d-none {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────
   ADM contact form (Contact Form 7) — consistent spacing system
   ───────────────────────────────────────────────────────── */
.adm-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 1.25rem);   /* single source of vertical rhythm */
}
/* kill every default paragraph/wrap margin so .adm-form gap is the only spacing */
.adm-form p,
.adm-form .wpcf7-form-control-wrap { margin: 0; }
.adm-form > p,
.adm-form > .adm-form__grid { margin: 0; }

/* two-column rows (name|email, phone|website) */
.adm-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2, 0.5rem);
  align-items: start;
}
@media (max-width: 640px) { .adm-form__grid { grid-template-columns: 1fr; } }

/* fields: uniform full-width, consistent height */
.adm-form .wpcf7-form-control-wrap { display: block; width: 100%; }
.adm-form input:not([type="checkbox"]):not([type="submit"]),
.adm-form textarea { width: 100%; box-sizing: border-box; }
.adm-form textarea { min-height: 8rem; resize: vertical; }

/* intl-tel-input wrapper must fill the column and match input height */
.adm-form .iti { width: 100%; display: block; }
.adm-form .iti input[type="tel"] { width: 100%; }
.adm-form .iti__selected-dial-code { font-weight: 500; }

/* consent checkbox: align checkbox with first line of label */
.adm-form__consent { display: flex; align-items: flex-start; gap: var(--space-2, 0.5rem); }
.adm-form__consent .wpcf7-list-item { margin: 0; }
.adm-form__consent label { display: flex; align-items: flex-start; gap: var(--space-2, 0.5rem); margin: 0; cursor: pointer; }
.adm-form__consent input[type="checkbox"] { margin-top: 0.2em; flex: 0 0 auto; }

/* submit: full width, a touch more separation above */
.adm-form__submit { margin-top: var(--space-2, 0.5rem); }
.adm-form__submit .wpcf7-submit,
.adm-form__submit .btn { width: 100%; }

/* The submit is an <input>, and the button styles reach for centring with
   display:inline-flex + justify-content:center. Neither does anything here: an input is a
   replaced element with no child boxes to distribute, so its label is placed by text-align,
   which was inheriting left. Invisible while the button hugs its text; obvious the moment
   .adm-form__submit stretches it to 100% and the label sits hard against the left padding. */
.adm-form__submit .wpcf7-submit,
.adm-form__submit input[type="submit"] { text-align: center; }

/* CF7 validation/response text shouldn't add stray gaps */
.adm-form .wpcf7-not-valid-tip { margin-top: 0.35rem; font-size: var(--font-size-sm, 0.875rem); }
.wpcf7 .wpcf7-response-output { margin: var(--space-4, 1rem) 0 0; }

/* ────────────────────────────────────────────────────────────────
   Imported (legacy) Contact Form 7 forms — normalise to ONE look.
   The forms ported from the old site use Bootstrap markup (.row / .col-md-*,
   an <input.btn-primary.wpcf7-submit-adm-hub> button). These selectors only
   ever match imported forms (the designed forms use .adm-form + .btn--primary),
   so this makes every whitepaper / job / audit form match the flagship lead
   form: two-column grid, consistent field rhythm, full-width YELLOW submit.
   ──────────────────────────────────────────────────────────────── */
/* Two-column rows (matches .adm-form__grid); full-width for col-12 / single cols. */
.wpcf7-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2, .5rem); align-items: start; margin: 0 0 var(--space-2, .5rem); }
.wpcf7-form .row > [class*="col-"] { min-width: 0; }
.wpcf7-form .row > .col-md-12, .wpcf7-form .row > .col, .wpcf7-form .row > .col-12 { grid-column: 1 / -1; }
@media (max-width: 640px) { .wpcf7-form .row { grid-template-columns: 1fr; } }
/* Legacy .pb-3 / .pb-4 padding is replaced by the grid gap so rhythm is uniform. */
.wpcf7-form .row .pb-3, .wpcf7-form .row .pb-4 { padding-bottom: 0 !important; }
/* Fields fill their column (visual bg/border/radius already come from the global input styles). */
.wpcf7-form .row input:not([type="checkbox"]):not([type="radio"]), .wpcf7-form .row textarea, .wpcf7-form .row select { width: 100%; box-sizing: border-box; }
/* One submit style for every imported form — full-width yellow primary, matching the lead form
   (sections.css forces the designed .adm-form-card submit yellow; this matches it everywhere). */
.wpcf7-form input.wpcf7-submit-adm-hub, .wpcf7-form input.btn-primary.wpcf7-submit {
  display: block; width: 100%; margin-top: var(--space-2, .5rem);
  background: var(--color-yellow) !important; color: #000 !important; border-color: var(--color-yellow) !important;
}





















/* ──────────────────────────────────────────────────────────────────────────
   Carousel dots: 24px touch target, 8px dot
   A control smaller than 24×24 fails WCAG target size, and the check measures
   the control itself, so a pseudo-element hit area does not count. The button
   therefore grows to 24px and the painted dot is held at 8px by clipping the
   background to the content box.
   This lives here, last, for two reasons: the component rules set `background`
   as a shorthand after the clip, which resets it, and the mobile carousel's
   own rules sit inside a media query so they never reached the wider viewport.
   ────────────────────────────────────────────────────────────────────────── */
.adm-carousel__dot,
.adm-mcar__dot {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 8px;
  background-clip: content-box !important;
}

.adm-carousel__dot.is-active { width: 40px; }   /* 24px pill + 8px either side */
.adm-mcar__dot.is-active     { width: 44px; }   /* 28px pill + 8px either side */

.adm-carousel__dots,
.adm-mcar__dots { gap: 0; }

/* Footer contact links: 21px tall, under the 24px target-size floor. The extra height is
   padding, so the text sits where it always did and only the tappable box grows. */
.footer-office__contact a {
  display: inline-block;
  min-height: 24px;
  padding-block: 2px;
}


/* == adm-blocks-pricing == */
/* ═══════════════════════════════════════════════════════════════════
   BLOCK: Pricing Table (.adm-pricing)
   Tiered plan columns with a features list + booking-aware CTA.
   Uses design tokens throughout; --price-accent is set per column inline.
   ═══════════════════════════════════════════════════════════════════ */

.adm-pricing__head { margin-bottom: var(--space-12); }

.adm-pricing__grid {
	display: grid;
	gap: var(--space-5);
	align-items: stretch;
}
.adm-pricing__grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-pricing__grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adm-pricing__grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adm-pricing__grid[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ── Plan column ── */
.adm-price {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-surface-1);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	overflow: hidden;
	transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.adm-price:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.adm-price__accent {
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--price-accent);
}

.adm-price--featured {
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--price-accent), var(--shadow-lg);
}
.adm-price--featured:hover { box-shadow: 0 0 0 2px var(--price-accent), var(--shadow-xl); }

.adm-price__badge {
	position: absolute;
	top: var(--space-5);
	right: var(--space-5);
	font-family: var(--font-mono);
	font-size: var(--font-size-2xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-text-inverse);
	background: var(--price-accent);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
}

.adm-price__tier {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--font-size-2xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-text-muted);
	margin-top: var(--space-3);
}
.adm-price__name {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	margin: var(--space-1) 0 var(--space-4);
	letter-spacing: var(--letter-spacing-tight);
}

.adm-price__cost { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.adm-price__amount {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: var(--letter-spacing-tight);
	color: var(--price-accent);
}
.adm-price__suffix { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.adm-price__was {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	text-decoration: line-through;
	margin-left: var(--space-1);
}

.adm-price__desc {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	line-height: var(--line-height-normal);
	margin: var(--space-4) 0;
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.adm-price__features { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.adm-price__feature {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-3);
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	padding: var(--space-2) 0;
	border-bottom: 1px dashed var(--color-border);
}
.adm-price__feature:last-child { border-bottom: none; }
.adm-price__feature-label { text-align: left; }
.adm-price__feature-val { font-weight: var(--font-weight-semibold); color: var(--color-text); white-space: nowrap; }
.adm-price__feature.is-muted { color: var(--color-text-hint); }
.adm-price__feature.is-muted .adm-price__feature-val { color: var(--color-text-hint); font-weight: var(--font-weight-normal); }

/* ── Read-more truncation (rows past the limit hidden until expanded) ── */
.adm-price__feature--extra { display: none; }
.adm-pricing__grid.is-expanded .adm-price__feature--extra { display: flex; }
.adm-price__more {
	align-self: flex-start;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin: 0 0 var(--space-5);
	font-family: var(--font-mono);
	font-size: var(--font-size-2xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--price-accent);
	transition: opacity var(--duration-fast);
}
.adm-price__more:hover { text-decoration: underline; }

/* Pinned summary row (e.g. Total) — stays visible when collapsed, emphasised. */
.adm-price__feature--pinned {
	margin-top: var(--space-2);
	padding-top: var(--space-3);
	border-top: 2px solid var(--color-border-strong);
	border-bottom: none;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}
.adm-price__feature--pinned .adm-price__feature-val {
	color: var(--price-accent);
	font-size: var(--font-size-lg);
}

.adm-price__cta {
  margin-top: auto;
  width: 100%;
  /* Plan columns are narrow; the site default 28px side padding clips longer
     labels (e.g. "Book a consultation") because .btn is nowrap + overflow:hidden. */
  padding-inline: 14px;
  justify-content: center;
}

/* ── Dark-section support ── */
.adm-section--dark .adm-price { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
.adm-section--dark .adm-price__name,
.adm-section--dark .adm-price__feature-val { color: #fff; }
.adm-section--dark .adm-price__desc { border-color: rgba(255, 255, 255, 0.12); }
.adm-section--dark .adm-price__feature { border-color: rgba(255, 255, 255, 0.1); }

/* ── Responsive ── */
/* Between the 5-across breakpoint and ~1300px the columns get narrow enough that a
   longer CTA label would be clipped (.btn is nowrap + overflow:hidden). */
@media (max-width: 1300px) {
	.adm-price__cta { font-size: 13px; letter-spacing: 0; padding-inline: 10px; }
}
@media (max-width: 1100px) {
	.adm-pricing__grid[data-cols="4"],
	.adm-pricing__grid[data-cols="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.adm-pricing__grid[data-cols="3"],
	.adm-pricing__grid[data-cols="4"],
	.adm-pricing__grid[data-cols="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.adm-pricing__grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   BLOCK: Price Menu (.adm-menu) — à la carte rate-card list
   ═══════════════════════════════════════════════════════════════════ */
.adm-menu { display: grid; gap: 0 var(--space-16); }
.adm-menu[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.adm-menu[data-cols="1"] { grid-template-columns: 1fr; max-width: var(--container-narrow); margin-inline: auto; }

.adm-menu__row { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.adm-menu__head { display: flex; align-items: baseline; gap: var(--space-3); }
.adm-menu__name {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
}
.adm-menu__leader {
	flex: 1 1 auto;
	min-width: var(--space-4);
	align-self: flex-end;
	border-bottom: 1px dotted var(--color-border-strong);
	transform: translateY(-5px);
}
.adm-menu__price {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-brand);
	white-space: nowrap;
}
.adm-menu__note {
	font-family: var(--font-mono);
	font-size: var(--font-size-2xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-text-muted);
	font-weight: var(--font-weight-normal);
}
.adm-menu__desc {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	line-height: var(--line-height-normal);
	margin: var(--space-2) 0 0;
	max-width: 46ch;
}
.adm-menu__footnote {
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	font-style: italic;
	text-align: center;
	margin-top: var(--space-8);
}
.adm-section--dark .adm-menu__name { color: #fff; }
.adm-section--dark .adm-menu__row { border-color: rgba(255, 255, 255, 0.1); }

@media (max-width: 768px) {
	.adm-menu[data-cols="2"] { grid-template-columns: 1fr; gap: 0; }
}


/* == adm-blocks-floating-video == */
/* ==========================================================================
   Block: Floating Video — persistent docked explainer player
   Collapsed: glass card (desktop) / brand icon button (mobile)
   Expanded:  player in place (desktop) / centred sheet over a frosted scrim (mobile)
   ========================================================================== */

.adm-fv {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none; /* only the dock and, when open, the scrim take clicks */
}

.adm-fv[hidden] { display: none; }

.adm-fv__dock {
  position: absolute;
  bottom: clamp(16px, 3vw, 28px);
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.adm-fv--bottom-right .adm-fv__dock { right: clamp(16px, 3vw, 28px); }
.adm-fv--bottom-left  .adm-fv__dock { left:  clamp(16px, 3vw, 28px); }

/* Entrance — rises into place once the delay has elapsed. */
.adm-fv__dock {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.adm-fv.is-ready .adm-fv__dock { opacity: 1; transform: none; }

/* ── Collapsed trigger: glass card ───────────────────────────────────────── */
/* Thumbnail-led card: the poster does the work, so it reads as a video at a glance
   rather than as a notification chip. */
.adm-fv__trigger {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: clamp(320px, 26vw, 400px);
  padding: 8px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.02);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.adm-fv__trigger:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-brand, var(--color-brand));
  box-shadow: var(--shadow-xl), var(--shadow-glow);
}

.adm-fv__trigger:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

.adm-fv__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-brand-dim);
  display: grid;
  place-items: center;
}

.adm-fv__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adm-fv__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: #fff;
  box-shadow: 0 6px 20px rgba(var(--color-brand-rgb), 0.5);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Controls are HugeIcons glyphs — sized by font-size, not width/height. The old
   3px nudge corrected the SVG triangle's optical centre; the glyph is centred. */
.adm-fv__play i { font-size: 24px; line-height: 1; }
.adm-fv__trigger:hover .adm-fv__play { transform: scale(1.09); }

/* Soft pulse to draw the eye, once the card has settled. */
@media (prefers-reduced-motion: no-preference) {
  .adm-fv.is-ready:not(.is-open) .adm-fv__play::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(var(--color-brand-rgb), 0.5);
    animation: adm-fv-pulse 2.8s ease-out infinite;
  }
}
@keyframes adm-fv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--color-brand-rgb), 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(var(--color-brand-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--color-brand-rgb), 0); }
}

/* Caption strip beneath the thumbnail. */
.adm-fv__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  padding: 10px 8px 4px;
}
.adm-fv__label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: 1.25;
}
.adm-fv__dur {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  background: var(--color-brand-dim);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  line-height: 1.2;
}

/* ── Dismiss ─────────────────────────────────────────────────────────────── */
.adm-fv__dismiss {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.adm-fv__dismiss i { font-size: 13px; line-height: 1; }
.adm-fv__dock:hover .adm-fv__dismiss,
.adm-fv__dismiss:focus-visible { opacity: 1; }
.adm-fv__dismiss:hover { color: var(--color-brand); border-color: var(--color-brand); }
.adm-fv.is-open .adm-fv__dismiss { display: none; }

/* ── Expanded panel ──────────────────────────────────────────────────────── */
.adm-fv__panel {
  position: relative;
  width: min(720px, calc(100vw - 2 * clamp(16px, 3vw, 28px)));
  padding: 10px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-xl);
}
.adm-fv__panel[hidden] { display: none; }

.adm-fv__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-brand-dim);
  display: grid;
  place-items: center;
}
.adm-fv__stage video,
.adm-fv__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.adm-fv__empty {
  padding: var(--space-6);
  margin: 0;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.adm-fv__collapse {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.adm-fv__collapse i { font-size: 16px; line-height: 1; }
.adm-fv__collapse:hover { color: var(--color-brand); border-color: var(--color-brand); }

/* Open state: the trigger gives way to the panel. */
.adm-fv.is-open .adm-fv__trigger { display: none; }

/* ── Frosted scrim (light — the site never goes to a dark surface) ───────── */
.adm-fv__scrim {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.adm-fv__scrim[hidden] { display: none; }
.adm-fv.is-open .adm-fv__scrim { pointer-events: auto; opacity: 1; }

/* ── Small screens: collapse to a single brand icon button ───────────────── */
@media (max-width: 767px) {
  .adm-fv__trigger {
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: var(--radius-full);
    background: var(--color-brand);
    border-color: var(--color-brand);
    justify-content: center;
    box-shadow: 0 8px 22px rgba(var(--color-brand-rgb), 0.38);
  }
  .adm-fv__thumb,
  .adm-fv__meta { display: none; }
  .adm-fv__trigger::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
    margin-left: 3px;
  }
  .adm-fv__dismiss { opacity: 1; }

  /* Player becomes a centred sheet rather than a docked panel. */
  /* `inset: 0` already clears the corner offsets — do not re-declare them as `auto`
     afterwards or the centring collapses back to the top edge. */
  .adm-fv.is-open .adm-fv__dock {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-4);
  }
  .adm-fv__panel { width: min(92vw, 520px); }
  .adm-fv__collapse { top: -14px; right: -6px; }
}

/* Very small screens — keep the button clear of the viewport edge. */
@media (max-width: 380px) {
  .adm-fv__dock { bottom: 14px; }
  .adm-fv--bottom-right .adm-fv__dock { right: 14px; }
  .adm-fv--bottom-left  .adm-fv__dock { left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .adm-fv__dock,
  .adm-fv__trigger,
  .adm-fv__play,
  .adm-fv__scrim { transition: none; }
}


/* == adm-mobile-performance == */
/**
 * Mobile compositing budget.
 *
 * On a real phone the homepage was rendering screen-high blank gaps: the background painted
 * but the content layer above it did not. It looked fine in desktop devtools at the same
 * viewport, which is the signature of running out of GPU memory rather than a layout bug.
 *
 * Measured on the homepage at 375px before this file existed:
 *
 *   page height            25,020px  (~31 screens)
 *   DOM elements            4,485
 *   backdrop-filter          46 elements,  4.8 Mpx of blur
 *   will-change              60 elements,  3.1 Mpx permanently promoted
 *   running animations      113
 *   widest marquee track  13,710px
 *
 * Each of those is affordable alone and ruinous together. A phone has a hard cap on layer
 * memory; past it the compositor drops tiles, which is exactly the blank rectangles people
 * were photographing. Desktop GPUs have the headroom to hide the problem.
 *
 * Everything here is scoped to 860px, the project's collapse breakpoint, so desktop keeps
 * the full treatment. Nothing is deleted — the effects degrade to a solid equivalent.
 */

@media (max-width: 860px) {

  /* ── backdrop-filter ────────────────────────────────────────────────────
     The single most expensive effect a phone can be asked to paint, because
     it re-samples everything beneath the element every frame. At 375px wide
     a 16px blur is barely legible as an effect anyway, so the glass panels
     fall back to the solid colour they already sit on. --glass-bg-solid is
     defined with a fallback chain so this works even where that token is
     not set. */
  .magic-glass,
  .adm-hero-home__form,
  .adm-form-card,
  .adm-card--blog,
  .cs-card,
  .adm-vacancy__chips li {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Only the panels whose fill IS the blur get a solid stand-in.
     An element that already declares its own surface must keep it. .cs-card
     sets --cs-surface:#ffffff and paints its body and its badge shelf from
     that one token so the two always match. Including it above replaced that
     with --glass-bg-solid, which nothing defines, so it fell through to
     --color-surface-1 — #f5f5f7 in the live palette, not the #ffffff in
     tokens.css, because adm-control overrides the tokens at wp_head 99.

     Dropping .cs-card from this selector is not enough on its own: the markup
     is <div class="cs-card magic-glass">, so the rule still matched. Hence
     --cs-surface sits in the fallback chain ahead of --color-surface-1. It
     resolves to #ffffff on a case-study card and is simply undefined on the
     genuine glass panels, which fall through as before.

     The symptom: every case-study card body went grey below 860px while its
     badge shelf stayed white, on phones only. Measured on /ae/ —
     mobile 390px rgb(245,245,247) against desktop 1440px rgba(255,255,255,.85),
     with --cs-surface reading #ffffff on both. */
  .magic-glass,
  .adm-hero-home__form,
  .adm-form-card,
  .adm-vacancy__chips li {
    background-color: var(--glass-bg-solid, var(--cs-surface, var(--color-surface-1, #fff)));
  }

  /* ── will-change ────────────────────────────────────────────────────────
     will-change in a stylesheet is permanent: the layer is created on load
     and never released, so 60 of them sit in memory for the whole session.
     .adm-word is the worst of it — the heading splitter puts one on every
     word of every heading, so a single page can promote several hundred
     tiny layers that have already finished animating.

     Dropping it does not stop the animations; the browser still composites
     them, it just does so on demand instead of reserving memory up front. */
  .adm-word,
  .adm-tilt,
  .adm-cards-scroll__track,
  .adm-cards-arc__card,
  .adm-m-px__bg {
    will-change: auto !important;
  }

  /* ── offscreen work: deliberately NOT done here ──────────────────────
     content-visibility:auto was tried and backed out. It cut the measured
     page height immediately after load, but sections re-expand to their real
     height as they come into view, so the page grew from 16,683px to 19,451px
     while scrolling and the scroll position drifted by up to 864px. On a phone
     that is the content jumping under your thumb, which is a worse bug than
     the one being fixed. It would need a real contain-intrinsic-size per
     section type, not a single guess, and the blur and layer caps above are
     where the actual memory saving is. Do not re-add it without per-section
     sizes and a scroll-drift test. */

  /* ── offscreen animations (paired with mobile-performance.js) ──────────
     The script toggles this class as elements leave and re-enter the
     viewport. animation-play-state is used rather than animation:none so a
     marquee resumes from where it stopped instead of jumping back to 0. */
  .adm-anim-paused,
  .adm-anim-paused::before,
  .adm-anim-paused::after {
    animation-play-state: paused !important;
  }

  /* ── parallax ───────────────────────────────────────────────────────────
     A background layer oversized by 20% top and bottom, moved on scroll. The
     effect is nearly invisible on a phone and costs a full-width layer. */
  .adm-m-px__bg { transform: none !important; top: 0; bottom: 0; }
}

/* Someone who has asked their device to stop animating should not be paying
   for a 13,710px marquee track either, at any width. */
@media (prefers-reduced-motion: reduce) {
  .magic-marquee__track { animation: none !important; }
}


/* == intl-tel-input == */
.iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=tel],.iti input[type=text]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-right:36px;margin-right:0}.iti__flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.iti__selected-flag{z-index:1;position:relative;display:flex;align-items:center;height:100%;padding:0 6px 0 8px}.iti__arrow{margin-left:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}[dir=rtl] .iti__arrow{margin-right:6px;margin-left:0}.iti__arrow--up{border-top:none;border-bottom:4px solid #555}.iti__country-list{position:absolute;z-index:2;list-style:none;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px rgba(0,0,0,.2);background-color:#fff;border:1px solid #ccc;white-space:nowrap;max-height:200px;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti__country-list--dropup{bottom:100%;margin-bottom:-1px}@media (max-width:500px){.iti__country-list{white-space:normal}}.iti__flag-box{display:inline-block;width:20px}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.iti__country{display:flex;align-items:center;padding:5px 10px;outline:0}.iti__dial-code{color:#999}.iti__country.iti__highlight{background-color:rgba(0,0,0,.05)}.iti__country-name,.iti__flag-box{margin-right:6px}[dir=rtl] .iti__country-name,[dir=rtl] .iti__flag-box{margin-right:0;margin-left:6px}.iti--allow-dropdown input,.iti--allow-dropdown input[type=tel],.iti--allow-dropdown input[type=text],.iti--separate-dial-code input,.iti--separate-dial-code input[type=tel],.iti--separate-dial-code input[type=text]{padding-right:6px;padding-left:52px;margin-left:0}[dir=rtl] .iti--allow-dropdown input,[dir=rtl] .iti--allow-dropdown input[type=tel],[dir=rtl] .iti--allow-dropdown input[type=text],[dir=rtl] .iti--separate-dial-code input,[dir=rtl] .iti--separate-dial-code input[type=tel],[dir=rtl] .iti--separate-dial-code input[type=text]{padding-right:52px;padding-left:6px;margin-right:0}.iti--allow-dropdown .iti__flag-container,.iti--separate-dial-code .iti__flag-container{right:auto;left:0}[dir=rtl] .iti--allow-dropdown .iti__flag-container,[dir=rtl] .iti--separate-dial-code .iti__flag-container{right:0;left:auto}.iti--allow-dropdown .iti__flag-container:hover{cursor:pointer}.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{background-color:rgba(0,0,0,.05)}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover{cursor:default}.iti--allow-dropdown input[disabled]+.iti__flag-container:hover .iti__selected-flag,.iti--allow-dropdown input[readonly]+.iti__flag-container:hover .iti__selected-flag{background-color:transparent}.iti--separate-dial-code .iti__selected-flag{background-color:rgba(0,0,0,.05)}.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:6px}[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{margin-left:0;margin-right:6px}.iti--container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.iti--container:hover{cursor:pointer}.iti-mobile .iti--container{top:30px;bottom:30px;left:30px;right:30px;position:fixed}.iti-mobile .iti__country-list{max-height:100%;width:100%}.iti-mobile .iti__country{padding:10px 10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.iti__flag{background-size:5762px 15px}}.iti__flag.iti__ac{height:10px;background-position:0 0}.iti__flag.iti__ad{height:14px;background-position:-22px 0}.iti__flag.iti__ae{height:10px;background-position:-44px 0}.iti__flag.iti__af{height:14px;background-position:-66px 0}.iti__flag.iti__ag{height:14px;background-position:-88px 0}.iti__flag.iti__ai{height:10px;background-position:-110px 0}.iti__flag.iti__al{height:15px;background-position:-132px 0}.iti__flag.iti__am{height:10px;background-position:-154px 0}.iti__flag.iti__ao{height:14px;background-position:-176px 0}.iti__flag.iti__aq{height:14px;background-position:-198px 0}.iti__flag.iti__ar{height:13px;background-position:-220px 0}.iti__flag.iti__as{height:10px;background-position:-242px 0}.iti__flag.iti__at{height:14px;background-position:-264px 0}.iti__flag.iti__au{height:10px;background-position:-286px 0}.iti__flag.iti__aw{height:14px;background-position:-308px 0}.iti__flag.iti__ax{height:13px;background-position:-330px 0}.iti__flag.iti__az{height:10px;background-position:-352px 0}.iti__flag.iti__ba{height:10px;background-position:-374px 0}.iti__flag.iti__bb{height:14px;background-position:-396px 0}.iti__flag.iti__bd{height:12px;background-position:-418px 0}.iti__flag.iti__be{height:15px;background-position:-440px 0}.iti__flag.iti__bf{height:14px;background-position:-460px 0}.iti__flag.iti__bg{height:12px;background-position:-482px 0}.iti__flag.iti__bh{height:12px;background-position:-504px 0}.iti__flag.iti__bi{height:12px;background-position:-526px 0}.iti__flag.iti__bj{height:14px;background-position:-548px 0}.iti__flag.iti__bl{height:14px;background-position:-570px 0}.iti__flag.iti__bm{height:10px;background-position:-592px 0}.iti__flag.iti__bn{height:10px;background-position:-614px 0}.iti__flag.iti__bo{height:14px;background-position:-636px 0}.iti__flag.iti__bq{height:14px;background-position:-658px 0}.iti__flag.iti__br{height:14px;background-position:-680px 0}.iti__flag.iti__bs{height:10px;background-position:-702px 0}.iti__flag.iti__bt{height:14px;background-position:-724px 0}.iti__flag.iti__bv{height:15px;background-position:-746px 0}.iti__flag.iti__bw{height:14px;background-position:-768px 0}.iti__flag.iti__by{height:10px;background-position:-790px 0}.iti__flag.iti__bz{height:12px;background-position:-812px 0}.iti__flag.iti__ca{height:10px;background-position:-834px 0}.iti__flag.iti__cc{height:10px;background-position:-856px 0}.iti__flag.iti__cd{height:15px;background-position:-878px 0}.iti__flag.iti__cf{height:14px;background-position:-900px 0}.iti__flag.iti__cg{height:14px;background-position:-922px 0}.iti__flag.iti__ch{height:15px;background-position:-944px 0}.iti__flag.iti__ci{height:14px;background-position:-961px 0}.iti__flag.iti__ck{height:10px;background-position:-983px 0}.iti__flag.iti__cl{height:14px;background-position:-1005px 0}.iti__flag.iti__cm{height:14px;background-position:-1027px 0}.iti__flag.iti__cn{height:14px;background-position:-1049px 0}.iti__flag.iti__co{height:14px;background-position:-1071px 0}.iti__flag.iti__cp{height:14px;background-position:-1093px 0}.iti__flag.iti__cq{height:12px;background-position:-1115px 0}.iti__flag.iti__cr{height:12px;background-position:-1137px 0}.iti__flag.iti__cu{height:10px;background-position:-1159px 0}.iti__flag.iti__cv{height:12px;background-position:-1181px 0}.iti__flag.iti__cw{height:14px;background-position:-1203px 0}.iti__flag.iti__cx{height:10px;background-position:-1225px 0}.iti__flag.iti__cy{height:14px;background-position:-1247px 0}.iti__flag.iti__cz{height:14px;background-position:-1269px 0}.iti__flag.iti__de{height:12px;background-position:-1291px 0}.iti__flag.iti__dg{height:10px;background-position:-1313px 0}.iti__flag.iti__dj{height:14px;background-position:-1335px 0}.iti__flag.iti__dk{height:15px;background-position:-1357px 0}.iti__flag.iti__dm{height:10px;background-position:-1379px 0}.iti__flag.iti__do{height:14px;background-position:-1401px 0}.iti__flag.iti__dz{height:14px;background-position:-1423px 0}.iti__flag.iti__ea{height:14px;background-position:-1445px 0}.iti__flag.iti__ec{height:14px;background-position:-1467px 0}.iti__flag.iti__ee{height:13px;background-position:-1489px 0}.iti__flag.iti__eg{height:14px;background-position:-1511px 0}.iti__flag.iti__eh{height:10px;background-position:-1533px 0}.iti__flag.iti__er{height:10px;background-position:-1555px 0}.iti__flag.iti__es{height:14px;background-position:-1577px 0}.iti__flag.iti__et{height:10px;background-position:-1599px 0}.iti__flag.iti__eu{height:14px;background-position:-1621px 0}.iti__flag.iti__ez{height:14px;background-position:-1643px 0}.iti__flag.iti__fi{height:12px;background-position:-1665px 0}.iti__flag.iti__fj{height:10px;background-position:-1687px 0}.iti__flag.iti__fk{height:10px;background-position:-1709px 0}.iti__flag.iti__fm{height:11px;background-position:-1731px 0}.iti__flag.iti__fo{height:15px;background-position:-1753px 0}.iti__flag.iti__fr{height:14px;background-position:-1775px 0}.iti__flag.iti__fx{height:14px;background-position:-1797px 0}.iti__flag.iti__ga{height:15px;background-position:-1819px 0}.iti__flag.iti__gb{height:10px;background-position:-1841px 0}.iti__flag.iti__gd{height:12px;background-position:-1863px 0}.iti__flag.iti__ge{height:14px;background-position:-1885px 0}.iti__flag.iti__gf{height:14px;background-position:-1907px 0}.iti__flag.iti__gg{height:14px;background-position:-1929px 0}.iti__flag.iti__gh{height:14px;background-position:-1951px 0}.iti__flag.iti__gi{height:10px;background-position:-1973px 0}.iti__flag.iti__gl{height:14px;background-position:-1995px 0}.iti__flag.iti__gm{height:14px;background-position:-2017px 0}.iti__flag.iti__gn{height:14px;background-position:-2039px 0}.iti__flag.iti__gp{height:14px;background-position:-2061px 0}.iti__flag.iti__gq{height:14px;background-position:-2083px 0}.iti__flag.iti__gr{height:14px;background-position:-2105px 0}.iti__flag.iti__gs{height:10px;background-position:-2127px 0}.iti__flag.iti__gt{height:13px;background-position:-2149px 0}.iti__flag.iti__gu{height:11px;background-position:-2171px 0}.iti__flag.iti__gw{height:10px;background-position:-2193px 0}.iti__flag.iti__gy{height:12px;background-position:-2215px 0}.iti__flag.iti__hk{height:14px;background-position:-2237px 0}.iti__flag.iti__hm{height:10px;background-position:-2259px 0}.iti__flag.iti__hn{height:10px;background-position:-2281px 0}.iti__flag.iti__hr{height:10px;background-position:-2303px 0}.iti__flag.iti__ht{height:12px;background-position:-2325px 0}.iti__flag.iti__hu{height:10px;background-position:-2347px 0}.iti__flag.iti__ic{height:14px;background-position:-2369px 0}.iti__flag.iti__id{height:14px;background-position:-2391px 0}.iti__flag.iti__ie{height:10px;background-position:-2413px 0}.iti__flag.iti__il{height:15px;background-position:-2435px 0}.iti__flag.iti__im{height:10px;background-position:-2457px 0}.iti__flag.iti__in{height:14px;background-position:-2479px 0}.iti__flag.iti__io{height:10px;background-position:-2501px 0}.iti__flag.iti__iq{height:14px;background-position:-2523px 0}.iti__flag.iti__ir{height:12px;background-position:-2545px 0}.iti__flag.iti__is{height:15px;background-position:-2567px 0}.iti__flag.iti__it{height:14px;background-position:-2589px 0}.iti__flag.iti__je{height:12px;background-position:-2611px 0}.iti__flag.iti__jm{height:10px;background-position:-2633px 0}.iti__flag.iti__jo{height:10px;background-position:-2655px 0}.iti__flag.iti__jp{height:14px;background-position:-2677px 0}.iti__flag.iti__ke{height:14px;background-position:-2699px 0}.iti__flag.iti__kg{height:12px;background-position:-2721px 0}.iti__flag.iti__kh{height:13px;background-position:-2743px 0}.iti__flag.iti__ki{height:10px;background-position:-2765px 0}.iti__flag.iti__km{height:12px;background-position:-2787px 0}.iti__flag.iti__kn{height:14px;background-position:-2809px 0}.iti__flag.iti__kp{height:10px;background-position:-2831px 0}.iti__flag.iti__kr{height:14px;background-position:-2853px 0}.iti__flag.iti__kw{height:10px;background-position:-2875px 0}.iti__flag.iti__ky{height:10px;background-position:-2897px 0}.iti__flag.iti__kz{height:10px;background-position:-2919px 0}.iti__flag.iti__la{height:14px;background-position:-2941px 0}.iti__flag.iti__lb{height:14px;background-position:-2963px 0}.iti__flag.iti__lc{height:10px;background-position:-2985px 0}.iti__flag.iti__li{height:12px;background-position:-3007px 0}.iti__flag.iti__lk{height:10px;background-position:-3029px 0}.iti__flag.iti__lr{height:11px;background-position:-3051px 0}.iti__flag.iti__ls{height:14px;background-position:-3073px 0}.iti__flag.iti__lt{height:12px;background-position:-3095px 0}.iti__flag.iti__lu{height:12px;background-position:-3117px 0}.iti__flag.iti__lv{height:10px;background-position:-3139px 0}.iti__flag.iti__ly{height:10px;background-position:-3161px 0}.iti__flag.iti__ma{height:14px;background-position:-3183px 0}.iti__flag.iti__mc{height:15px;background-position:-3205px 0}.iti__flag.iti__md{height:10px;background-position:-3226px 0}.iti__flag.iti__me{height:10px;background-position:-3248px 0}.iti__flag.iti__mf{height:14px;background-position:-3270px 0}.iti__flag.iti__mg{height:14px;background-position:-3292px 0}.iti__flag.iti__mh{height:11px;background-position:-3314px 0}.iti__flag.iti__mk{height:10px;background-position:-3336px 0}.iti__flag.iti__ml{height:14px;background-position:-3358px 0}.iti__flag.iti__mm{height:14px;background-position:-3380px 0}.iti__flag.iti__mn{height:10px;background-position:-3402px 0}.iti__flag.iti__mo{height:14px;background-position:-3424px 0}.iti__flag.iti__mp{height:10px;background-position:-3446px 0}.iti__flag.iti__mq{height:14px;background-position:-3468px 0}.iti__flag.iti__mr{height:14px;background-position:-3490px 0}.iti__flag.iti__ms{height:10px;background-position:-3512px 0}.iti__flag.iti__mt{height:14px;background-position:-3534px 0}.iti__flag.iti__mu{height:14px;background-position:-3556px 0}.iti__flag.iti__mv{height:14px;background-position:-3578px 0}.iti__flag.iti__mw{height:14px;background-position:-3600px 0}.iti__flag.iti__mx{height:12px;background-position:-3622px 0}.iti__flag.iti__my{height:10px;background-position:-3644px 0}.iti__flag.iti__mz{height:14px;background-position:-3666px 0}.iti__flag.iti__na{height:14px;background-position:-3688px 0}.iti__flag.iti__nc{height:10px;background-position:-3710px 0}.iti__flag.iti__ne{height:15px;background-position:-3732px 0}.iti__flag.iti__nf{height:10px;background-position:-3752px 0}.iti__flag.iti__ng{height:10px;background-position:-3774px 0}.iti__flag.iti__ni{height:12px;background-position:-3796px 0}.iti__flag.iti__nl{height:14px;background-position:-3818px 0}.iti__flag.iti__no{height:15px;background-position:-3840px 0}.iti__flag.iti__np{height:15px;background-position:-3862px 0}.iti__flag.iti__nr{height:10px;background-position:-3877px 0}.iti__flag.iti__nu{height:10px;background-position:-3899px 0}.iti__flag.iti__nz{height:10px;background-position:-3921px 0}.iti__flag.iti__om{height:10px;background-position:-3943px 0}.iti__flag.iti__pa{height:14px;background-position:-3965px 0}.iti__flag.iti__pe{height:14px;background-position:-3987px 0}.iti__flag.iti__pf{height:14px;background-position:-4009px 0}.iti__flag.iti__pg{height:15px;background-position:-4031px 0}.iti__flag.iti__ph{height:10px;background-position:-4053px 0}.iti__flag.iti__pk{height:14px;background-position:-4075px 0}.iti__flag.iti__pl{height:13px;background-position:-4097px 0}.iti__flag.iti__pm{height:14px;background-position:-4119px 0}.iti__flag.iti__pn{height:10px;background-position:-4141px 0}.iti__flag.iti__pr{height:14px;background-position:-4163px 0}.iti__flag.iti__ps{height:10px;background-position:-4185px 0}.iti__flag.iti__pt{height:14px;background-position:-4207px 0}.iti__flag.iti__pw{height:13px;background-position:-4229px 0}.iti__flag.iti__py{height:11px;background-position:-4251px 0}.iti__flag.iti__qa{height:8px;background-position:-4273px 0}.iti__flag.iti__re{height:14px;background-position:-4295px 0}.iti__flag.iti__ro{height:14px;background-position:-4317px 0}.iti__flag.iti__rs{height:14px;background-position:-4339px 0}.iti__flag.iti__ru{height:14px;background-position:-4361px 0}.iti__flag.iti__rw{height:14px;background-position:-4383px 0}.iti__flag.iti__sa{height:14px;background-position:-4405px 0}.iti__flag.iti__sb{height:10px;background-position:-4427px 0}.iti__flag.iti__sc{height:10px;background-position:-4449px 0}.iti__flag.iti__sd{height:10px;background-position:-4471px 0}.iti__flag.iti__se{height:13px;background-position:-4493px 0}.iti__flag.iti__sg{height:14px;background-position:-4515px 0}.iti__flag.iti__sh{height:10px;background-position:-4537px 0}.iti__flag.iti__si{height:10px;background-position:-4559px 0}.iti__flag.iti__sj{height:15px;background-position:-4581px 0}.iti__flag.iti__sk{height:14px;background-position:-4603px 0}.iti__flag.iti__sl{height:14px;background-position:-4625px 0}.iti__flag.iti__sm{height:15px;background-position:-4647px 0}.iti__flag.iti__sn{height:14px;background-position:-4669px 0}.iti__flag.iti__so{height:14px;background-position:-4691px 0}.iti__flag.iti__sr{height:14px;background-position:-4713px 0}.iti__flag.iti__ss{height:10px;background-position:-4735px 0}.iti__flag.iti__st{height:10px;background-position:-4757px 0}.iti__flag.iti__su{height:10px;background-position:-4779px 0}.iti__flag.iti__sv{height:12px;background-position:-4801px 0}.iti__flag.iti__sx{height:14px;background-position:-4823px 0}.iti__flag.iti__sy{height:14px;background-position:-4845px 0}.iti__flag.iti__sz{height:14px;background-position:-4867px 0}.iti__flag.iti__ta{height:10px;background-position:-4889px 0}.iti__flag.iti__tc{height:10px;background-position:-4911px 0}.iti__flag.iti__td{height:14px;background-position:-4933px 0}.iti__flag.iti__tf{height:14px;background-position:-4955px 0}.iti__flag.iti__tg{height:13px;background-position:-4977px 0}.iti__flag.iti__th{height:14px;background-position:-4999px 0}.iti__flag.iti__tj{height:10px;background-position:-5021px 0}.iti__flag.iti__tk{height:10px;background-position:-5043px 0}.iti__flag.iti__tl{height:10px;background-position:-5065px 0}.iti__flag.iti__tm{height:14px;background-position:-5087px 0}.iti__flag.iti__tn{height:14px;background-position:-5109px 0}.iti__flag.iti__to{height:10px;background-position:-5131px 0}.iti__flag.iti__tr{height:14px;background-position:-5153px 0}.iti__flag.iti__tt{height:12px;background-position:-5175px 0}.iti__flag.iti__tv{height:10px;background-position:-5197px 0}.iti__flag.iti__tw{height:14px;background-position:-5219px 0}.iti__flag.iti__tz{height:14px;background-position:-5241px 0}.iti__flag.iti__ua{height:14px;background-position:-5263px 0}.iti__flag.iti__ug{height:14px;background-position:-5285px 0}.iti__flag.iti__uk{height:10px;background-position:-5307px 0}.iti__flag.iti__um{height:11px;background-position:-5329px 0}.iti__flag.iti__un{height:14px;background-position:-5351px 0}.iti__flag.iti__us{height:11px;background-position:-5373px 0}.iti__flag.iti__uy{height:14px;background-position:-5395px 0}.iti__flag.iti__uz{height:10px;background-position:-5417px 0}.iti__flag.iti__va{height:15px;background-position:-5439px 0}.iti__flag.iti__vc{height:14px;background-position:-5456px 0}.iti__flag.iti__ve{height:14px;background-position:-5478px 0}.iti__flag.iti__vg{height:10px;background-position:-5500px 0}.iti__flag.iti__vi{height:14px;background-position:-5522px 0}.iti__flag.iti__vn{height:14px;background-position:-5544px 0}.iti__flag.iti__vu{height:12px;background-position:-5566px 0}.iti__flag.iti__wf{height:14px;background-position:-5588px 0}.iti__flag.iti__ws{height:10px;background-position:-5610px 0}.iti__flag.iti__xk{height:15px;background-position:-5632px 0}.iti__flag.iti__ye{height:14px;background-position:-5654px 0}.iti__flag.iti__yt{height:14px;background-position:-5676px 0}.iti__flag.iti__za{height:14px;background-position:-5698px 0}.iti__flag.iti__zm{height:14px;background-position:-5720px 0}.iti__flag.iti__zw{height:10px;background-position:-5742px 0}.iti__flag{height:15px;box-shadow:0 0 1px 0 #888;background-image:url(/ae/wp-content/themes/admcore/assets/vendor/intl-tel-input/css/../img/flags.png?1);background-repeat:no-repeat;background-color:#dbdbdb;background-position:20px 0}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.iti__flag{background-image:url(/ae/wp-content/themes/admcore/assets/vendor/intl-tel-input/css/../img/flags@2x.png?1)}}.iti__flag.iti__np{background-color:transparent}