/* ==========================================================================
   Basic Insight 2026
   Light by default, dark on request (header toggle, ?theme=dark). Every colour comes from the tokens
   below: the dark palette is built on the BASIC charcoal (#1e2a3a) and grey (#8c8c8c), the accent is
   the logo green (#71bf44).
   ========================================================================== */

:root {
    color-scheme: dark;
    --bg: #0b1119;
    --bg-soft: #0e151f;
    --panel: #111a25;
    --panel-2: #16212e;
    --panel-3: #1e2a3a;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.14);
    --line-3: rgba(255, 255, 255, 0.26);
    --text: #f2f5f8;
    --text-2: #b7c0cb;
    --text-3: #8c8c8c;
    --accent: #71bf44;
    --accent-hover: #82cc57;
    --accent-text: #8bc94d;
    --accent-ink: #0b1119;
    --accent-tint: rgba(113, 191, 68, 0.1);
    --accent-tint-2: rgba(113, 191, 68, 0.2);
    --accent-line: rgba(113, 191, 68, 0.55);
    --accent-glow: rgba(113, 191, 68, 0.4);
    --accent-glow-soft: rgba(113, 191, 68, 0.16);
    --grid: rgba(255, 255, 255, 0.035);
    --dot: rgba(180, 189, 200, 0.2);
    --header-bg: rgba(11, 17, 25, 0.78);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 16px 32px rgba(0, 0, 0, 0.32), 0 48px 100px rgba(0, 0, 0, 0.5);
    --field-bg: #0d141d;
    --field-line: rgba(255, 255, 255, 0.14);
    --band: #0f1822;
    --band-text: #aeb6c2;
    --avatar-bg: #1e2a3a;
    --avatar-text: #f2f5f8;
    --error: #ff8a80;
    --error-tint: rgba(255, 138, 128, 0.12);

    --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-serif: var(--font-display);
    --font-body: var(--font-display);
    --font-mono: var(--font-display);

    /* Fixed up to ~1790px viewports (matches the old flat 1216px exactly), then grows with the viewport so
       the page doesn't shrink into a narrow island on 4K/ultrawide monitors; caps at 1800px so line lengths
       stay readable. */
    --container: clamp(1216px, 68vw, 1800px);
    --pad: clamp(20px, 4vw, 40px);
    --radius: 20px;
    --radius-sm: 14px;
    --radius-xs: 12px;
    --header-h: 80px;
    --section-y: clamp(72px, 8vw, 112px);
    --h2: clamp(30px, 3.4vw, 46px);
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;
    --bg-soft: #f6f7f9;
    --panel: #ffffff;
    --panel-2: #f6f7f9;
    --panel-3: #eef1f4;
    --line: #e3e7ec;
    --line-2: #d5dbe2;
    --line-3: #b9c2cc;
    --text: #0b0d12;
    --text-2: #3b424c;
    --text-3: #626b77;
    --accent-text: #447329;
    --accent-ink: #0b0d12;
    --accent-tint: #f1f9ec;
    --accent-tint-2: #ddf0d2;
    --accent-line: #9ccf7e;
    --accent-glow: rgba(113, 191, 68, 0.3);
    --accent-glow-soft: rgba(113, 191, 68, 0.15);
    --grid: rgba(11, 13, 18, 0.05);
    --dot: #b4bdc8;
    --header-bg: rgba(255, 255, 255, 0.86);
    --shadow: 0 1px 3px rgba(11, 13, 18, 0.04), 0 10px 24px rgba(11, 13, 18, 0.06), 0 40px 80px rgba(11, 13, 18, 0.1);
    --field-bg: #fbfcfd;
    --field-line: #dce1e7;
    --band: #0b0d12;
    --avatar-bg: #0b0d12;
    --avatar-text: #ffffff;
    --error: #b3261e;
    --error-tint: #fdecea;
}

/* Base
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
    background: var(--bg);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-feature-settings: "cv11", "ss01", "tnum";
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); line-height: 1.2; color: var(--text); text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
strong { font-weight: 600; }

:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
::selection { background: var(--accent-tint-2); color: var(--text); }

.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 100;
    padding: 12px 18px;
    border-radius: var(--radius-xs);
    background: var(--text);
    color: var(--bg);
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus { top: 16px; }

.screen-reader-text,
.frm_screen_reader {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.container {
    width: min(100% - 2 * var(--pad), var(--container));
    margin-inline: auto;
}
/* Narrow reading measure, still aligned to the page's left edge like every other section. */
.container--narrow > * { max-width: 880px; }

[hidden] { display: none !important; }

/* Type helpers
   ========================================================================== */

.label {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 12px/1.4 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
}
.label::before {
    content: "";
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}
.label--on-dark { color: #8bc94d; }

.mono-caption {
    font: 400 11px/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    color: var(--accent-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.link-arrow .icon { transition: transform 0.2s ease; }
.link-arrow:hover .icon { transform: translateX(3px); }

.prose { color: var(--text-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { margin-top: 1.8em; font-weight: 700; letter-spacing: -0.02em; }
.prose h2 { font-size: 28px; }
.prose h3 { font-size: 21px; }
.prose a { color: var(--accent-text); }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }

/* Buttons, pills, chips, toggles
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 600 15px/1 var(--font-body);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.btn .icon { transition: transform 0.2s ease; }
.btn:hover .icon { transform: translateX(2px); }

.btn--primary {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 0 0 1px rgba(113, 191, 68, 0.4), 0 8px 30px var(--accent-glow);
}
.btn--primary:hover {
    background: var(--accent-hover);
    color: var(--accent-ink);
    box-shadow: 0 0 0 1px rgba(113, 191, 68, 0.6), 0 10px 38px var(--accent-glow);
    transform: translateY(-1px);
}

.btn--ghost {
    background: transparent;
    border-color: var(--line-2);
    color: var(--text);
}
.btn--ghost:hover { border-color: var(--line-3); background: var(--panel-2); color: var(--text); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 14px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--panel);
    font: 400 11px/1 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
}
.pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}
.chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel-2);
    font: 400 12px/1.35 var(--font-mono);
    color: var(--text-2);
}

.tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent-text);
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.06em;
}

.status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font: 400 11px/1 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
}
.status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

/* Toggle buttons: filters. aria-pressed carries the state. */
.toggle {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: transparent;
    color: var(--text-2);
    font: 500 14px/1 var(--font-body);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.toggle:hover { border-color: var(--line-3); color: var(--text); }
.toggle[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 0 22px var(--accent-glow-soft);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

/* Segmented control (sample planner). */
.seg {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 10px;
}
.seg__btn {
    min-height: 52px;
    padding: 0 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-2);
    font: 600 16px/1 var(--font-body);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.seg__btn:hover { border-color: var(--line-3); color: var(--text); }
.seg__btn[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 0 26px var(--accent-glow-soft);
}

.icon-tile {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--accent-tint);
    color: var(--accent-text);
}
.icon-tile--sm { width: 36px; height: 36px; border-radius: 10px; }
.icon-tile--line { width: 44px; height: 44px; border-radius: var(--radius-xs); border: 1px solid var(--line-2); background: transparent; }
.icon-tile--dark { width: 40px; height: 40px; border-radius: var(--radius-xs); background: rgba(113, 191, 68, 0.14); color: #8bc94d; }

.icon-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.icon-btn:hover { border-color: var(--line-3); background: var(--panel-2); }

/* Layout
   ========================================================================== */

.section { position: relative; padding-block: var(--section-y); }
.section--mist { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--tight { padding-block: 28px; }
.section--flush { padding-top: 0; }
.section--cta { padding-block: 0 var(--section-y); }
.section--mist + .section--cta { padding-top: var(--section-y); }

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 48px;
    margin-bottom: 48px;
}
.section-head__title {
    max-width: 820px;
    margin-top: 16px;
    font-size: var(--h2);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
}
.section-head__aside { max-width: 420px; color: var(--text-2); }
/* Home page only: the serif from the hero carries down through every section headline (prose, not data --
   numbers and stats stay in the mono/sans register), so the editorial feel reads as a running theme rather
   than a one-off hero flourish. Interior pages keep the sans treatment. */
.home .section-head__title { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.012em; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Cards
   ========================================================================== */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    perspective: 900px;
    transform-style: preserve-3d;
    will-change: transform;
}
/* Icon lifts off the card's surface in real 3D (needs the card's own `perspective` above) as the card tilts
   toward the cursor -- a depth cue, not just a flat hover swap. */
.card .icon-tile { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.card:hover .icon-tile { transform: translateZ(30px); }
.card--compact { padding: 28px; }
.card--compact .card__title { margin-top: 20px; }
.card__top { display: flex; align-items: center; justify-content: space-between; }
.card__index { font: 400 12px/1 var(--font-mono); color: var(--text-3); }
.card__title {
    margin-top: 24px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.card__text {
    margin-top: 12px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-2);
}
.card__text a { color: var(--accent-text); }

/* Practice cards: the whole card is the link. */
.practice-card { min-height: 340px; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.practice-card:hover { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-tint-2), var(--shadow); transform: translateY(-2px); }
.practice-card__title {
    margin-top: 24px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
}
.practice-card__title a { text-decoration: none; }
.practice-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.practice-card .card__text { font-size: 16px; }
.practice-card .chips { margin-top: auto; padding-top: 24px; padding-right: 56px; }
.practice-card__go {
    position: absolute;
    right: 28px;
    bottom: 28px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    color: var(--text);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.practice-card:hover .practice-card__go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Home page only: a giant ghost numeral bleeding off the corner, Palantir-style confident background type
   instead of the plain "01 / 04" tag (kept as-is on the Services page, which reuses this same component). */
.practices--home .practice-card { overflow: hidden; }
.practices--home .practice-card::before {
    content: attr(data-index);
    position: absolute;
    right: -14px;
    bottom: -46px;
    font: 600 156px/1 var(--font-serif);
    color: var(--text);
    opacity: 0.05;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.practices--home .practice-card:hover::before { opacity: 0.09; transform: translateZ(-60px) translateY(-6px); }

/* Case cards */
.case-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.case-card:hover { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-tint-2), var(--shadow); transform: translateY(-2px); }
.case-card__title {
    margin-top: 20px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.02em;
}
.case-card__title a { text-decoration: none; }
.case-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.case-card__text {
    display: -webkit-box;
    margin-top: 10px;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-2);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.case-card__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 16px;
    color: var(--accent-text);
    font-size: 14px;
    font-weight: 600;
}
.case-card__more .icon { transition: transform 0.2s ease; }
.case-card:hover .case-card__more .icon { transform: translateX(3px); }

/* Case showcase (home "Selected work"): a case list beside a detail card with a hard offset shadow. */
.showcase {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 2fr);
    gap: 56px;
    align-items: start;
}
.showcase__tabs { display: flex; flex-direction: column; gap: 4px; }
.showcase__tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 16px 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.showcase__tab-text { display: flex; flex-direction: column; gap: 5px; }
.showcase__industry { font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.showcase__name { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; transition: color 0.2s ease; }
.showcase__tab .icon { flex-shrink: 0; color: var(--text-2); transition: transform 0.2s ease, color 0.2s ease; }
.showcase__tab:hover .showcase__name { color: var(--accent-text); }
.showcase__tab:hover .icon { transform: translateX(3px); }
.showcase__tab[aria-selected="true"] .showcase__industry,
.showcase__tab[aria-selected="true"] .showcase__name,
.showcase__tab[aria-selected="true"] .icon { color: var(--accent-text); }
.showcase__tab[aria-selected="true"] .icon { transform: translateX(6px); }
.showcase__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
/* Panels share one grid cell, so the card takes the tallest panel's height and never jumps between cases. */
.showcase__panels { display: grid; padding: 0 12px 12px 0; }
.showcase__panel {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 28px 40px;
    padding: 40px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: var(--panel);
    box-shadow: 12px 12px 0 var(--accent);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.showcase__panel.is-active { visibility: visible; opacity: 1; transition: opacity 0.3s ease; }
.showcase__panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.showcase__title { margin-top: 12px; font-size: clamp(22px, 2.1vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.showcase__overview { margin-top: 16px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.showcase__results { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; list-style: none; }
.showcase__results li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.showcase__results .icon { flex-shrink: 0; margin-top: 3px; color: var(--accent-text); }
/* "Read the case" closes every card at the same spot, below both columns. */
.showcase__panel > .link-arrow { grid-column: 1 / -1; align-self: end; justify-self: start; padding: 0; }
.showcase__story { display: flex; flex-direction: column; gap: 10px; }
.showcase__heading { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.showcase__heading .icon { color: var(--accent-text); }
.showcase__story p { font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
.showcase__story p + .showcase__heading { margin-top: 16px; }

/* Header
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--line);
    background: var(--header-bg);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--header-h);
}

.brand {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text);
    text-decoration: none;
}
.brand__logo { width: auto; height: 26px; }
.brand__divider { width: 1px; height: 26px; background: var(--line-2); }
.brand__tagline {
    font: 400 10px/1.35 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}

.site-nav { display: flex; align-items: center; gap: 40px; margin-left: auto; }
.site-nav__list { display: flex; align-items: center; gap: 36px; list-style: none; }
.site-nav__item { position: relative; }
.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
    color: var(--text-2);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--text); }
.site-nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
.site-nav__link .icon { transition: transform 0.2s ease; }
.has-sub:hover > .site-nav__link .icon, .has-sub:focus-within > .site-nav__link .icon { transform: rotate(180deg); }

.site-nav__sub {
    position: absolute;
    top: calc(100% + 8px);
    left: -24px;
    width: 380px;
    padding: 10px;
    list-style: none;
    border: 1px solid var(--line-2);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.site-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.has-sub:hover .site-nav__sub, .has-sub:focus-within .site-nav__sub { opacity: 1; visibility: visible; transform: none; }
.site-nav__sub a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
    border-radius: var(--radius-xs);
    color: var(--text);
    text-decoration: none;
}
.site-nav__sub a:hover, .site-nav__sub a[aria-current="page"] { background: var(--panel-2); }
.site-nav__sub-text { display: flex; flex-direction: column; gap: 2px; }
.site-nav__sub-title { font-size: 15px; font-weight: 600; }
.site-nav__sub-desc { font-size: 13px; line-height: 1.45; color: var(--text-3); }
.site-nav__cta { min-height: 44px; padding: 0 20px; font-size: 14px; }

.site-header__tools { display: flex; align-items: center; gap: 10px; }
.theme-toggle__moon { display: none; }
:root[data-theme="light"] .theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: block; }
.nav-toggle { display: none; }
.nav-toggle__close { display: none; }
.is-open .nav-toggle__open { display: none; }
.is-open .nav-toggle__close { display: block; }

/* Decorative dot sphere, orbits and sparks (inner page heroes)
   ========================================================================== */

.globe {
    position: absolute;
    border-radius: 50%;
    background-image: radial-gradient(circle, var(--dot) 1.3px, transparent 1.9px);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 68%);
    mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 68%);
}
.orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.spark { position: absolute; border-radius: 50%; background: var(--accent); }

/* Home hero with the router
   ========================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 96px;
    isolation: isolate;
}
.hero__backdrop { position: absolute; inset: 0; z-index: -1; }
.hero__backdrop img, .hero__backdrop video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 40%;
    opacity: 0.62;
    filter: saturate(0.95) contrast(1.03) brightness(1.12);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.hero__backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Stops are wide percentages on purpose: on an ultrawide/4K viewport this keeps a faint wash of the
       skyline visible most of the way across, instead of the fixed 1216px content column sitting on a flat
       dead field once the backdrop's own gradient stops get stretched past it. Lightened across the board so
       the video itself reads clearly -- only the very edges (under the hero copy, and the far right) still
       fade to solid background for text contrast and a clean blend into the rest of the page. */
    background:
        linear-gradient(90deg, var(--bg) 0%, rgba(11, 17, 25, 0.22) 30%, rgba(11, 17, 25, 0.3) 55%, rgba(11, 17, 25, 0.22) 85%, var(--bg) 100%),
        linear-gradient(0deg, var(--bg) 0%, rgba(11, 17, 25, 0) 35%, rgba(11, 17, 25, 0) 80%, var(--bg) 100%);
}
/* Light theme: same backdrop, not hidden -- but headlines are solid black here (not white like dark mode),
   so the video needs to read as a faint wash, not a competing dark rectangle. Much lower opacity + a
   white-based (not the dark navy literal the default overlay uses) gradient, heaviest exactly where the
   copy sits. */
:root[data-theme="light"] .hero__backdrop img,
:root[data-theme="light"] .hero__backdrop video {
    opacity: 0.9;
    filter: saturate(0.95) contrast(1.05) brightness(1.02);
}
:root[data-theme="light"] .hero__backdrop::after {
    /* Wash only where the headline sits (left); the skyline reads clearly across the right. */
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.7) 28%, rgba(255, 255, 255, 0.2) 55%, rgba(255, 255, 255, 0) 80%),
        linear-gradient(0deg, var(--bg) 0%, rgba(255, 255, 255, 0) 14%);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
    align-items: center;
    gap: 48px;
}
.hero__copy { position: relative; }
.hero__title {
    margin-top: 26px;
    font-family: var(--font-serif);
    font-size: clamp(44px, 5.8vw, 80px);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.015em;
}
.hero__title em { font-style: normal; font-weight: 700; color: var(--accent-text); }
.hero__lead {
    max-width: 560px;
    margin-top: 28px;
    font-size: 19px;
    line-height: 1.6;
    color: var(--text-2);
    text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero__actions .btn { min-height: 56px; padding: 0 30px; font-size: 16px; }
.hero__note { margin-top: 22px; font-size: 13px; color: var(--text-3); }

.router {
    position: relative;
    border: 1px solid var(--line-2);
    border-radius: 24px;
    background: rgba(17, 26, 37, 0.82);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    perspective: 900px;
    transform-style: preserve-3d;
    will-change: transform;
}
:root[data-theme="light"] .router { background: rgba(255, 255, 255, 0.9); }
.router::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 12%;
    bottom: 12%;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(transparent, var(--accent), transparent);
    box-shadow: 0 0 24px var(--accent-glow);
}
.router__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 22px;
    border-bottom: 1px solid var(--line);
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
}
.router__dots { display: flex; gap: 5px; }
.router__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line-3); }
.router__dots span:first-child { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.router__stage {
    position: relative;
    padding: 10px 14px 4px;
    background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 28px 28px;
}
.router__stage--table { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.router__caption { font-size: 12.5px; line-height: 1.5; color: var(--text-3); text-align: center; }

/* Respondent-sources table: plain rows, but each divider between them carries a small bright pulse that
   sweeps across on a loop, like current running along a circuit trace. Rows are staggered (negative delays)
   so the three lines fire out of sync rather than all pulsing together. */
.router__table { border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--panel-2); }
.router__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 22px; position: relative; }
.router__row--head { font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.router__row:not(.router__row--head) { font: 600 15px/1 var(--font-mono); }
.router__row + .router__row { border-top: 1px solid var(--line); }
.router__row + .router__row::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, transparent 38%, var(--accent) 47%, var(--accent-hover) 50%, var(--accent) 53%, transparent 62%, transparent 100%);
    background-size: 280% 100%;
    filter: drop-shadow(0 0 5px var(--accent-glow));
    animation: router-current 2.6s linear infinite;
    animation-delay: calc(var(--i, 0) * -0.85s);
}
@keyframes router-current { from { background-position: 100% 0; } to { background-position: -180% 0; } }
.router__cell--label { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.router__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.router__row--hot .router__dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.router__cell--value { font-weight: 700; color: var(--text); }
.router__strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    border-top: 1px solid var(--line);
}
.router__strip li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.router__strip li + li { border-left: 1px solid var(--line); }
.router__strip-title { font: 600 11px/1.35 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.router__strip-text { font-size: 13px; line-height: 1.4; color: var(--text-3); }

/* Numbers strip
   ========================================================================== */

.stats { padding-bottom: 24px; }
.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px),
        var(--panel);
    background-size: 28px 28px, 28px 28px, auto;
}
.stats__item {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 10px;
    padding: 26px 32px;
}
.stats__item + .stats__item { border-left: 1px solid var(--line); }
.stats__label {
    font: 400 11px/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
}
.stats__value {
    margin: 0;
    font: 800 44px/1 var(--font-display);
    letter-spacing: -0.03em;
    color: var(--text);
}
.stats__suffix { color: var(--accent-text); }

/* How a study works: a narrowing funnel with a neon highlight frame gliding through it toward the decision
   (motion in funnel.js, markup in inc/visuals.php), full detail in a strip below
   ========================================================================== */

.funnel-visual { display: flex; justify-content: center; }
.funnel-svg {
    width: 100%;
    max-width: 880px;
    height: auto;
    overflow: visible;
    /* Neon colours. Dark: a white-hot core in the frame's tube, white-hot streak heads and sparks. On white
       those would vanish (a pale core just splits the tube into two thin lines), so the light theme keeps
       them all green and the glow softer. */
    --funnel-fill: rgba(74, 110, 160, 0.14);
    --funnel-glow: var(--accent);
    --funnel-core: #eaffd8;
    --funnel-warm: #c6f59a;
    --funnel-hot: #f0ffe4;
    --funnel-spark: #e9ffd6;
}
:root[data-theme="light"] .funnel-svg {
    --funnel-fill: rgba(113, 191, 68, 0.07);
    --funnel-glow: rgba(113, 191, 68, 0.45);
    --funnel-core: var(--accent);
    --funnel-warm: #8fd05f;
    --funnel-hot: #5aa532;
    --funnel-spark: #5aa532;
}
.funnel-seg {
    fill: var(--panel);
    stroke: var(--line-2);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
}
/* Only hidden while main.js can reveal it again: the segments grow in, then the frame and dots fade in. */
.js .funnel-seg {
    opacity: 0;
    transform: scaleX(0.6);
    animation: funnel-grow 0.7s ease-out forwards;
    animation-delay: var(--d);
    animation-play-state: paused;
}
.funnel-visual.is-visible .funnel-seg { animation-play-state: running; }
.js .funnel-fx { opacity: 0; transition: opacity 0.5s ease 0.55s; }
.js .funnel-visual.is-visible .funnel-fx { opacity: 1; }
.funnel-num { font: 500 15px var(--font-mono); fill: var(--text-3); text-anchor: middle; }
.funnel-title { font: 700 14px var(--font-mono); letter-spacing: 0.07em; fill: var(--text); text-anchor: middle; }
.funnel-lit text { fill: var(--accent-text); }
.funnel-frame-fill { fill: var(--funnel-fill); }
.funnel-frame-tube, .funnel-frame-flash { fill: none; stroke: var(--accent); stroke-width: 2.67; }
.funnel-frame-core { fill: none; stroke: var(--funnel-core); stroke-width: 0.85; }
.funnel-svg feDropShadow { flood-color: var(--funnel-glow); }
.funnel-stop { stop-color: var(--accent); }
.funnel-stop.is-warm { stop-color: var(--funnel-warm); }
.funnel-stop.is-hot { stop-color: var(--funnel-hot); }
.funnel-spark { fill: var(--funnel-spark); }
.funnel-dot { fill: var(--accent); }
@keyframes funnel-grow { from { opacity: 0; transform: scaleX(0.6); } to { opacity: 1; transform: scaleX(1); } }

.funnel-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin-top: 40px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.funnel-strip li { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 28px; }
.funnel-strip li + li { border-left: 1px solid var(--line); }
.funnel-strip-num { font: 500 12px var(--font-mono); color: var(--text-3); }
.funnel-strip-title { font: 700 17px/1.3 var(--font-display); letter-spacing: -0.015em; }
.funnel-strip-text { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }

/* From the field: two looping b-roll clips
   ========================================================================== */

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.field-grid:has(> .field-card:only-child) { grid-template-columns: minmax(0, 760px); }
.field-card { display: flex; flex-direction: column; }
.field-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--panel);
}
.field-card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.field-card__title { margin-top: 20px; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.field-card__text { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.field-caption { margin-top: 24px; font-size: 12.5px; color: var(--text-3); }

/* What you get: illustrative chart types standing in for what a study hands back
   ========================================================================== */

.dv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dv-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.dv-card:hover { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-tint-2), var(--shadow); transform: translateY(-2px); }
.dv-card svg { display: block; width: 100%; height: auto; overflow: visible; }
.dv-card__title { margin-top: 22px; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.dv-card__text { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.dv-caption { margin-top: 24px; font-size: 12.5px; color: var(--text-3); }

/* Shared chart text: category/value labels read the same across all three chart types. */
.dv text { font-family: var(--font-mono); }
.dv-label { font-size: 12px; fill: var(--text-3); dominant-baseline: middle; }
.dv-label--x { text-anchor: middle; dominant-baseline: hanging; }
.dv-label--muted { font-size: 11px; fill: var(--text-3); }
.dv-value { font-size: 12px; font-weight: 600; fill: var(--text-2); dominant-baseline: middle; }

/* Compare options: ranked bars growing in on reveal. */
.dv-track { fill: var(--line); }
.dv-bar { fill: var(--text-3); width: 0; animation: dv-grow 0.7s ease-out forwards; animation-delay: var(--d, 0s); animation-play-state: paused; }
.dv-bar.is-hot { fill: var(--accent); filter: drop-shadow(0 0 8px var(--accent-glow-soft)); }
@keyframes dv-grow { to { width: var(--w); } }

/* Track over time: a rising line with a soft fill and dots that pop in wave by wave. */
.dv-axis { stroke: var(--line); stroke-width: 1; }
.dv-area { fill: var(--accent-tint); stroke: none; }
.dv-trend-line { fill: none; stroke: var(--accent); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; }
.dv-trend-dot { fill: var(--panel); stroke: var(--accent-text); stroke-width: 2px; opacity: 0; transform-box: fill-box; transform-origin: center; animation: dv-pop 0.4s ease-out forwards; animation-delay: var(--d, 0s); animation-play-state: paused; }
.dv-trend-dot.is-last { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 8px var(--accent-glow)); }
@keyframes dv-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

/* Segment your market: a donut built from stroke-dasharray slices, largest picked out in accent. */
.dv-donut-track { fill: none; stroke: var(--line); stroke-width: 22px; }
.dv-donut-slice {
    fill: none;
    stroke: var(--text-3);
    stroke-width: 22px;
    stroke-dasharray: 0 calc(var(--len) + var(--gap));
    animation: dv-draw 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--d, 0s);
}
.dv-donut-slice.is-hot { stroke: var(--accent); filter: drop-shadow(0 0 6px var(--accent-glow-soft)); }
@keyframes dv-draw { to { stroke-dasharray: var(--len) var(--gap); } }
.dv-donut-figure { font: 800 26px/1 var(--font-display); fill: var(--text); text-anchor: middle; }
.dv-donut-caption { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--text-3); text-anchor: middle; }
.dv-legend-dot { fill: var(--text-3); }
.dv-legend-dot.is-hot { fill: var(--accent); }

/* These chart animations are quick (well under a second) and CSS animation-delay starts counting from page
   load, not from when the card scrolls into view -- below the fold, they'd finish invisibly before anyone
   sees them. Pausing them until the card's .reveal wrapper gets .is-visible makes the draw-in/grow-in
   actually visible. The hero's own donut (no .dv-card ancestor) is unaffected and keeps animating on load,
   which is correct since it's already on screen. */
.dv-card .dv-bar, .dv-card .dv-trend-dot, .dv-card .dv-donut-slice { animation-play-state: paused; }
.dv-card.is-visible .dv-bar, .dv-card.is-visible .dv-trend-dot, .dv-card.is-visible .dv-donut-slice { animation-play-state: running; }

/* Your data stays local: the shield panel
   ========================================================================== */

.shield {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
    padding: 34px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 26px;
    background-color: var(--panel);
    background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 32px 32px;
}
.shield__zone-label {
    margin-bottom: 16px;
    font: 500 11px/1.3 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-2);
}
.shield__zone--out .shield__zone-label { text-align: right; }
.shield__box {
    position: relative;
    height: 330px;
    padding: 20px 22px;
    overflow: hidden;
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 0 24px var(--accent-glow-soft), inset 0 0 40px var(--accent-glow-soft);
}
.shield__box--out { border: 1.5px dashed var(--line-3); box-shadow: none; }
.shield__box::before, .shield__box::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    height: 56px;
    pointer-events: none;
}
.shield__box::before { top: 0; background: linear-gradient(var(--panel), transparent); }
.shield__box::after { bottom: 0; background: linear-gradient(transparent, var(--panel)); }
.shield__rows {
    display: flex;
    flex-direction: column;
    gap: 26px;
    list-style: none;
    font: 400 12.5px/1.4 var(--font-mono);
    white-space: nowrap;
    color: var(--text-3);
    animation: shield-scroll 24s linear infinite;
}
.shield__rows--out { color: var(--accent-text); animation-duration: 28s; }
.shield__rows li::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 12px;
    margin-right: 10px;
    vertical-align: -1px;
    background: currentColor;
    opacity: 0.7;
}
.shield__vault {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 2;
    padding: 8px 14px;
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    background: var(--panel);
    font: 600 11px/1 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-text);
    box-shadow: 0 0 18px var(--accent-glow-soft);
    transform: translateX(-50%);
}
.shield__wall { position: relative; display: flex; justify-content: center; }
.shield__wall::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -34px;
    bottom: -34px;
    width: 6px;
    border-radius: 3px;
    background: linear-gradient(transparent, var(--accent) 12%, var(--accent) 88%, transparent);
    box-shadow: 0 0 16px var(--accent-glow), 0 0 48px var(--accent-glow-soft);
    transform: translateX(-50%);
}
.shield__node {
    position: relative;
    width: 46px;
    height: 46px;
    margin-top: 196px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--panel);
    box-shadow: 0 0 22px var(--accent-glow);
}
.shield__node::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--accent); }
.shield__toast {
    position: absolute;
    left: 50%;
    top: 36%;
    z-index: 3;
    max-width: 290px;
    padding: 14px 18px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--panel-2);
    font: 700 15px/1.35 var(--font-display);
    color: var(--text);
    box-shadow: var(--shadow);
    transform: translate(-12%, -50%);
}
.shield__caption { margin-top: 14px; font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }

/* Sample planner
   ========================================================================== */

.calc__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: stretch;
    gap: 24px;
}
.calc__panel, .calc__result {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--panel);
}
.calc__panel { padding: 38px; }
.calc__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.calc__label { display: block; padding: 0; font-size: 17px; font-weight: 600; color: var(--text); }
.calc__value { font: 500 28px/1 var(--font-mono); color: var(--accent-text); }
.calc__range {
    width: 100%;
    height: 6px;
    margin: 28px 0 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) var(--fill, 24%), var(--line-2) var(--fill, 24%));
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.calc__range::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
    border: 3px solid var(--accent);
    border-radius: 50%;
    background: var(--panel);
    box-shadow: 0 0 0 6px var(--accent-glow-soft), 0 0 20px var(--accent-glow);
    -webkit-appearance: none;
    appearance: none;
}
.calc__range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 3px solid var(--accent);
    border-radius: 50%;
    background: var(--panel);
    box-shadow: 0 0 0 6px var(--accent-glow-soft), 0 0 20px var(--accent-glow);
}
.calc__range:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 10px; }
.calc__ticks { display: flex; justify-content: space-between; font: 400 12px/1 var(--font-mono); color: var(--text-3); }
.calc__field { min-width: 0; margin: 34px 0 0; padding: 0; border: 0; }
.calc__field .calc__label { margin-bottom: 14px; }
.calc__explain { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.ci { position: relative; height: 34px; margin-top: 16px; }
.ci__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    margin-top: -3px;
    border-radius: 999px;
    background: var(--line-2);
}
.ci__band {
    position: absolute;
    top: 50%;
    height: 22px;
    margin-top: -11px;
    border: 1.5px solid var(--accent);
    border-radius: 7px;
    background: var(--accent-tint-2);
    box-shadow: 0 0 20px var(--accent-glow-soft);
    transition: left 0.25s ease, width 0.25s ease;
}
.ci__mid { position: absolute; left: 50%; top: 2px; bottom: 2px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--accent-text); }
.ci__scale { display: flex; justify-content: space-between; margin-top: 8px; font: 400 12px/1 var(--font-mono); color: var(--text-3); }
.calc__explain-text { margin-top: 16px; font-size: 15px; color: var(--text-2); }
.calc__result { display: flex; flex-direction: column; overflow: hidden; }
.calc__hero {
    padding: 42px 32px 34px;
    border-bottom: 1px solid var(--line);
    background: radial-gradient(ellipse at 50% 0%, var(--accent-tint-2), transparent 72%);
    text-align: center;
}
.calc__big {
    margin-top: 12px;
    font: 800 clamp(52px, 5.4vw, 76px)/1 var(--font-display);
    letter-spacing: -0.03em;
    color: var(--accent-text);
    text-shadow: 0 0 40px var(--accent-glow);
}
.calc__sub { margin-top: 12px; color: var(--text-2); }
.calc__chart { padding: 22px 32px 20px; border-bottom: 1px solid var(--line); }
.calc__chart .mono-caption { margin-bottom: 12px; }
.calc__chart-svg { display: block; width: 100%; aspect-ratio: 300 / 100; overflow: visible; }
.calc__chart-area { fill: var(--accent-tint-2); stroke: none; }
.calc__chart-curve { fill: none; stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.calc__chart-guide { stroke: var(--line-2); stroke-width: 1px; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.calc__chart-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.calc__chart .calc__ticks { margin-top: 8px; }
.calc__rows { margin: 0; }
.calc__rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 32px;
    border-bottom: 1px solid var(--line);
}
.calc__rows dt { color: var(--text-2); font-size: 15px; }
.calc__rows dd { margin: 0; font: 600 16px/1 var(--font-mono); color: var(--text); white-space: nowrap; }
.calc__note { padding: 20px 32px 0; font-size: 13px; line-height: 1.55; color: var(--text-3); }
.calc__result .btn { align-self: flex-start; margin: 20px 32px 32px; }

/* Where we work: coverage overview + street-level office maps (inc/where-map.php)
   ========================================================================== */

/* Map colours follow the theme: dark values first, light values under [data-theme="light"]. */
:root {
    --wmap-sea: #0e151f;
    --wmap-land: rgba(113, 191, 68, 0.045);
    --wmap-land-line: rgba(113, 191, 68, 0.2);
    --wmap-focus: rgba(113, 191, 68, 0.13);
    --wmap-focus-line: rgba(113, 191, 68, 0.62);
    --wmap-city: #8bc94d;
    --wmap-halo: #0e151f;
    --wmap-label: #a3acb7;
    --wmap-country: #56634f;
    --wmap-mark: #f2f5f8;
    --wmap-mark-role: #8c949e;
    --wmap-selected: #9be36a;
    --wmap-glow: 0.55;
    --wmap-arc: 0.65;
    --wsm-surface: rgba(14, 22, 31, 0.94);
    --wsm-line: rgba(255, 255, 255, 0.12);
    --wsm-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
    --wsm-chip: #71bf44;
    --wsm-chip-text: #0b1119;
    --wsm-chip-icon: #0b1119;
    --wsm-walk: #9be36a;
    --wsm-walk-under: rgba(11, 17, 25, 0.65);
}
:root[data-theme="light"] {
    --wmap-sea: #f6f7f9;
    --wmap-land: #e8ecf0;
    --wmap-land-line: #d0d7df;
    --wmap-focus: #e5f2db;
    --wmap-focus-line: #9fcf80;
    --wmap-city: #447329;
    --wmap-halo: #f6f7f9;
    --wmap-label: #59626e;
    --wmap-country: #a3abb5;
    --wmap-mark: #0b0d12;
    --wmap-mark-role: #626b77;
    --wmap-selected: #447329;
    --wmap-glow: 0.4;
    --wmap-arc: 0.5;
    --wsm-surface: #ffffff;
    --wsm-line: #e1e6eb;
    --wsm-shadow: 0 6px 18px rgba(11, 13, 18, 0.14);
    --wsm-chip: #0b0d12;
    --wsm-chip-text: #ffffff;
    --wsm-chip-icon: #9be36a;
    --wsm-walk: #3f8a22;
    --wsm-walk-under: rgba(255, 255, 255, 0.9);
}

.wmap-panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04), 0 24px 60px rgba(11, 13, 18, 0.08); }
.wmap-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.wmap-panel__title { display: flex; align-items: center; gap: 12px; }
.wmap-panel__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-tint); color: var(--accent-text); }
.wmap-panel__name { font-size: 16px; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
.wmap-panel__sub { margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--text-3); }
.wmap-legend { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.wmap-legend li { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--text-2); }
.wmap-legend i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.wmap-legend .wmap-legend__hq { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-2); }
.wmap-legend .wmap-legend__office { border: 2px solid var(--accent); background: var(--panel); }
.wmap-legend .wmap-legend__field { width: 6px; height: 6px; background: var(--wmap-city); }

.wmap-panel__body { display: grid; grid-template-columns: minmax(0, 576fr) minmax(0, 640fr); }
.wmap-over { position: relative; min-height: 560px; overflow: hidden; background: var(--wmap-sea); }
.wmap-over > .wmap { position: absolute; inset: 0; width: 100%; height: 100%; }
.wmap-note { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border: 1px solid var(--wsm-line); border-radius: 12px; background: var(--wsm-surface); box-shadow: 0 4px 14px rgba(11, 13, 18, 0.06); font-size: 12.5px; line-height: 1.3; color: var(--text-2); }
.wmap-note b { font-weight: 600; color: var(--text); }

/* Overview map (assets/svg/where-overview.svg) */
.wmap text { font-family: var(--font-body); }
.wmap__sea { fill: var(--wmap-sea); }
.wmap__land { fill: var(--wmap-land); stroke: var(--wmap-land-line); stroke-width: 0.8; stroke-linejoin: round; }
.wmap__focus { fill: var(--wmap-focus); stroke: var(--wmap-focus-line); stroke-width: 0.9; stroke-linejoin: round; }
.wmap__focus-glow { fill: none; stroke: var(--accent); stroke-opacity: 0.35; stroke-width: 3; }
:root[data-theme="light"] .wmap__focus-glow { display: none; }
.wmap__g0 { stop-color: var(--accent); stop-opacity: var(--wmap-glow); }
.wmap__g1 { stop-color: var(--accent); stop-opacity: calc(var(--wmap-glow) * 0.32); }
.wmap__g2 { stop-color: var(--accent); stop-opacity: 0; }
.wmap__a0 { stop-color: var(--accent); stop-opacity: var(--wmap-arc); }
.wmap__a1 { stop-color: var(--accent); stop-opacity: 0.1; }
.wmap__o0 { stop-color: var(--accent); stop-opacity: 0.95; }
.wmap__o1 { stop-color: var(--accent); stop-opacity: 0.6; }
.wmap__arc { fill: none; stroke-width: 1; stroke-linecap: round; }
.wmap__arc--office { stroke-width: 1.6; stroke-dasharray: 2 5; }
.wmap__halo { fill: url(#wmap-glow); }
.wmap__cities .wmap__halo { opacity: 0.75; }
.wmap__city { fill: var(--wmap-city); stroke: var(--wmap-halo); stroke-width: 1.2; }
.wmap__office { cursor: pointer; }
.wmap__hit { fill: transparent; }
.wmap__ring { fill: none; stroke: var(--accent); stroke-opacity: 0.55; stroke-width: 1.3; }
.wmap__core { fill: var(--wmap-halo); stroke: var(--accent); stroke-width: 2.4; }
.wmap__office--hq .wmap__core { fill: var(--accent); stroke: var(--wmap-halo); stroke-width: 2; }
.wmap__select { fill: none; stroke: var(--wmap-selected); stroke-width: 1.6; stroke-dasharray: 3 3; opacity: 0; transition: opacity 0.2s ease; }
.wmap__pulse { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.wmap__office.is-selected .wmap__select { opacity: 1; }
.wmap__office.is-selected .wmap__pulse { animation: v-ring 2.2s ease-out infinite; }
.wmap__label { font-size: 10.5px; font-weight: 500; fill: var(--wmap-label); paint-order: stroke; stroke: var(--wmap-halo); stroke-width: 3.2px; stroke-linejoin: round; }
.wmap__country { font-size: 9px; font-weight: 500; letter-spacing: 2px; fill: var(--wmap-country); }
.wmap__sea-name { font-size: 11.5px; font-style: italic; letter-spacing: 0.5px; fill: var(--wmap-country); }
.wmap__mark { paint-order: stroke; stroke: var(--wmap-halo); stroke-width: 3.2px; stroke-linejoin: round; }
.wmap__mark-name { font-size: 12.5px; font-weight: 650; fill: var(--wmap-mark); }
.wmap__mark-role { font-size: 10.5px; font-weight: 500; fill: var(--wmap-mark-role); }
.wmap__mark.is-selected .wmap__mark-role { fill: var(--wmap-selected); }
@media (prefers-reduced-motion: reduce) { .wmap__office.is-selected .wmap__pulse { animation: none; } }

/* Office tabs and panels: without JavaScript there are no tabs and both offices show. */
.wloc { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--line); }
.wtabs { display: none; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.js .wtabs { display: flex; }
.wtab { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; background: none; font: 600 13.5px/1 var(--font-body); color: var(--text-3); white-space: nowrap; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.wtab:hover { color: var(--text); }
.wtab[aria-selected="true"] { border-color: var(--accent-line); background: var(--accent-tint); color: var(--accent-text); }
.wtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wtab__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.wtab__dot--sg { border: 2px solid var(--accent); background: transparent; }
.wloc__panel + .wloc__panel { border-top: 1px solid var(--line); }
.js .wloc__panel.is-inactive { display: none; }
.js .wloc__panel + .wloc__panel { border-top: 0; }

/* Street map: Google Static Maps image for the current theme, pin, walking route and labels on top */
.wsm { position: relative; aspect-ratio: 640 / 300; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--wmap-sea); }
.wsm__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wsm__img--light { display: none; }
:root[data-theme="light"] .wsm__img--light { display: block; }
:root[data-theme="light"] .wsm__img--dark { display: none; }
.wsm__overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wsm__shadow { fill: var(--accent); fill-opacity: 0.35; }
.wsm__walk-under { fill: none; stroke: var(--wsm-walk-under); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.wsm__walk { fill: none; stroke: var(--wsm-walk); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 7.5; }
.wsm__start { fill: var(--panel); stroke: var(--wsm-walk); stroke-width: 2.5; }
.wsm__pin { filter: drop-shadow(0 3px 3px rgba(11, 13, 18, 0.35)); }
.wsm__pin path { fill: var(--accent); stroke: #3f7f22; stroke-width: 1; }
.wsm__pin circle { fill: #ffffff; }
.wsm__tag { position: absolute; z-index: 1; display: flex; flex-direction: column; padding: 8px 12px 9px; border: 1px solid var(--wsm-line); border-radius: 10px; background: var(--wsm-surface); box-shadow: var(--wsm-shadow); white-space: nowrap; transform: translateY(-50%); }
.wsm__tag b { font-size: 13px; font-weight: 650; line-height: 1.25; color: var(--text); }
.wsm__tag span { font-size: 11.5px; line-height: 1.3; color: var(--text-3); }
.wsm__chip { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px; border-radius: 999px; background: var(--wsm-chip); box-shadow: 0 6px 16px rgba(11, 13, 18, 0.22); font-size: 12px; font-weight: 600; line-height: 1; color: var(--wsm-chip-text); white-space: nowrap; transform: translate(-100%, -50%); }
.wsm__chip--right { transform: translate(0, -50%); }
.wsm__chip .icon { color: var(--wsm-chip-icon); }
.wsm__open { position: absolute; top: 12px; right: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--wsm-line); border-radius: 999px; background: var(--wsm-surface); box-shadow: 0 4px 12px rgba(11, 13, 18, 0.12); font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none; transition: border-color 0.2s ease; }
.wsm__open:hover { border-color: var(--accent-line); }
.wsm__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wsm__inset { position: absolute; top: 12px; left: 12px; z-index: 1; width: 150px; overflow: hidden; border: 1px solid var(--wsm-line); border-radius: 10px; background: var(--wsm-surface); box-shadow: 0 4px 12px rgba(11, 13, 18, 0.1); }
.wsm__inset svg { display: block; width: 100%; height: auto; }
.wsm__inset span { display: block; padding: 4px 9px 6px; border-top: 1px solid var(--line); font-size: 10.5px; font-weight: 600; color: var(--text-2); }
.winset__sea { fill: var(--panel); }
.winset__land { fill: var(--wmap-land); stroke: var(--wmap-land-line); stroke-width: 0.6; }
.winset__focus { fill: var(--wmap-focus); stroke: var(--wmap-focus-line); stroke-width: 0.7; }
.winset__halo { fill: var(--accent); fill-opacity: 0.22; }
.winset__dot { fill: var(--accent); stroke: var(--panel); stroke-width: 1.4; }

/* Office details */
.wloc__body { display: flex; flex: 1; flex-direction: column; padding: 20px 24px 22px; }
.wloc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wloc__city { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.wloc__reg { font: 400 12px/1.4 var(--font-mono); text-align: right; color: var(--text-3); }
.wloc__reg b { display: block; font-weight: 600; color: var(--text-2); }
.wloc__facts { display: grid; gap: 12px; margin-top: 16px; list-style: none; }
.wloc__facts li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.wloc__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-tint); color: var(--accent-text); }
.wloc__facts div b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); }
.wloc__facts div span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.wloc__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.wbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--panel); font: 600 13.5px/1 var(--font-body); color: var(--text); text-decoration: none; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.wbtn:hover { border-color: var(--accent-line); }
.wbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wbtn--primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.wbtn--primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.wloc__foot { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--line-2); font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

@media (max-width: 1100px) {
    .wmap-panel__body { grid-template-columns: minmax(0, 1fr); }
    .wmap-over { min-height: 0; aspect-ratio: 576 / 500; }
    .wloc { border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 640px) {
    .wmap-panel__head { padding: 16px; }
    .wmap-over { aspect-ratio: 576 / 600; }
    .wmap__label, .wmap__country, .wmap__sea-name, .wmap__mark-role { display: none; }
    .wmap__mark-name { font-size: 20px; }
    /* The headquarters label sits left of its dot on wider screens; here it would run off the edge, so centre it above. */
    .wmap__mark[data-office="kl"] { text-anchor: middle; transform: translate(24px, -30px); }
    .wmap-note { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; }
    .wtabs { padding: 10px; overflow-x: auto; }
    .wtab { padding: 0 12px; font-size: 13px; }
    .wsm__inset { display: none; }
    .wsm__open { top: 8px; right: 8px; height: 28px; padding: 0 10px; font-size: 11.5px; }
    .wloc__body { padding: 18px 16px 20px; }
    .wloc__top { flex-direction: column; gap: 4px; }
    .wloc__reg { text-align: left; }
}

/* Enquiry section and the Formidable enquiry form
   ========================================================================== */

.enquiry__inner {
    display: grid;
    grid-template-columns: minmax(0, 424px) minmax(0, 728px);
    align-items: start;
    justify-content: space-between;
    gap: 48px 64px;
}
.enquiry__text { margin-top: 20px; font-size: 17px; line-height: 1.65; color: var(--text-2); }
.contact-list { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; list-style: none; }
.contact-list a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}
.contact-list a:hover { color: var(--accent-text); }
.contact-list .icon-tile { color: var(--accent-text); }

.form-card {
    padding: 40px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--panel);
    box-shadow: var(--shadow);
}
.recaptcha-note { margin-top: 20px; font-size: 12px; line-height: 1.5; color: var(--text-3); }
.recaptcha-note a { color: inherit; }
.grecaptcha-badge { visibility: hidden !important; }
.form-fallback a { color: var(--accent-text); }

.enquiry-form .frm_forms, .enquiry-form form { margin: 0; }
.enquiry-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.enquiry-form .frm_fields_container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.enquiry-form .frm_form_field { grid-column: 1 / -1; min-width: 0; margin: 0; }
.enquiry-form .frm_form_field.bi-half { grid-column: span 1; }
.enquiry-form .frm_primary_label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.enquiry-form .frm_required { display: none; }
.enquiry-form .frm_none_container > .frm_primary_label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.enquiry-form input[type="text"],
.enquiry-form input[type="email"],
.enquiry-form input[type="tel"],
.enquiry-form input[type="url"],
.enquiry-form input[type="number"],
.enquiry-form textarea,
.enquiry-form select {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border: 1px solid var(--field-line);
    border-radius: var(--radius-xs);
    background: var(--field-bg);
    color: var(--text);
    font-size: 15px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.enquiry-form textarea { min-height: 132px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.enquiry-form input::placeholder, .enquiry-form textarea::placeholder { color: var(--text-3); opacity: 1; }
.enquiry-form input:focus, .enquiry-form textarea:focus, .enquiry-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow-soft);
}

/* "What do you need?" radios drawn as toggle chips. */
.enquiry-form .bi-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.enquiry-form .bi-chips > .frm_primary_label { flex-basis: 100%; margin-bottom: 2px; }
.enquiry-form .bi-chips .frm_radio label {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.enquiry-form .bi-chips .frm_radio label:hover { border-color: var(--line-3); color: var(--text); }
.enquiry-form .bi-chips .frm_radio input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.enquiry-form .bi-chips .frm_radio label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.enquiry-form .bi-chips .frm_radio label:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.enquiry-form .bi-consent .frm_checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-2);
    cursor: pointer;
}
.enquiry-form .bi-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.enquiry-form .frm_description { margin: 6px 0 0 28px; font-size: 13px; color: var(--text-3); }
.enquiry-form .frm_description a { color: var(--accent-text); }

/* reCAPTCHA v3 renders nothing visible; keep its field out of the grid flow. */
.enquiry-form .frm_form_field:has(.frm-g-recaptcha) { position: absolute; width: 1px; height: 1px; overflow: hidden; }
/* Formidable's honeypot. */
.enquiry-form .frm_verify,
.enquiry-form div:has(> .frm_verify) { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.enquiry-form .frm_submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.enquiry-form .frm_button_submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font: 600 15px/1 var(--font-body);
    box-shadow: 0 0 0 1px rgba(113, 191, 68, 0.4), 0 8px 30px var(--accent-glow);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.enquiry-form .frm_button_submit::after { content: "→"; transition: transform 0.2s ease; }
.enquiry-form .frm_button_submit:hover { background: var(--accent-hover); transform: translateY(-1px); }
.enquiry-form .frm_button_submit:hover::after { transform: translateX(2px); }
.enquiry-form .frm_loading_form .frm_button_submit,
.enquiry-form .frm_button_submit[disabled] { opacity: 0.7; cursor: progress; }

/* Validation and result messages. */
.enquiry-form .frm_blank_field input,
.enquiry-form .frm_blank_field textarea { border-color: var(--error); }
.enquiry-form .frm_error { margin-top: 6px; font-size: 13px; color: var(--error); }
.enquiry-form .frm_error_style {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: var(--radius-xs);
    background: var(--error-tint);
    color: var(--error);
    font-size: 14px;
}
.enquiry-form .frm_message {
    padding: 22px 24px;
    border: 1px solid var(--accent-line);
    border-radius: 16px;
    background: var(--accent-tint);
    color: var(--text);
    font-size: 16px;
}
.enquiry-form .frm_message p { margin: 0; }

/* Dark bands (always dark, in both themes): CTA band, infrastructure panel, case aside
   ========================================================================== */

.cta-band, .infra, .aside-cta {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--band);
    background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 40px 40px;
    color: #fff;
}

.cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 48px;
    padding: 56px;
    border-radius: 28px;
}
.cta-band::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -160px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(113, 191, 68, 0.4) 0%, transparent 65%);
    pointer-events: none;
}
.cta-band__copy { position: relative; max-width: 640px; }
.cta-band__title { color: #fff; font-size: clamp(28px, 3vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.cta-band__text { margin-top: 12px; color: var(--band-text); }
.cta-band .btn { position: relative; }

/* Inner-page hero
   ========================================================================== */

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 76px;
    border-bottom: 1px solid var(--line);
}
.page-hero__deco { position: absolute; inset: 0; pointer-events: none; }
.page-hero__deco::before {
    content: "";
    position: absolute;
    right: -10%;
    top: -60%;
    width: 60%;
    height: 180%;
    background: radial-gradient(ellipse at center, var(--accent-glow-soft), transparent 62%);
}
.globe--sm { right: -140px; top: -190px; width: 620px; height: 620px; }
.orbit--c { right: -80px; top: -40px; width: 620px; height: 220px; transform: rotate(-14deg); }
.spark--d { right: 200px; top: 150px; width: 8px; height: 8px; box-shadow: 0 0 0 4px var(--accent-glow-soft), 0 0 18px var(--accent-glow); animation: bi-pulse 2.6s ease-in-out infinite; }
.page-hero__inner { position: relative; }
.page-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.page-hero__title {
    max-width: 920px;
    margin-top: 20px;
    font-size: clamp(38px, 5.2vw, 64px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.04em;
}
.page-hero__lead { max-width: 680px; margin-top: 22px; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.page-hero__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; max-width: 760px; margin-top: 20px; color: var(--text-2); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 12px/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
}
.breadcrumb li + li::before { content: "/"; color: var(--line-3); }
.breadcrumb a { color: var(--accent-text); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* About
   ========================================================================== */

.split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 48px 72px;
}
.split__media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
}
.split__copy .prose { margin-top: 24px; }

/* Pull-quote: a short, bold statement pulled out of a longer story into its own visual beat. */
.pull-quote {
    margin: 22px 0 0;
    padding-left: 20px;
    border-left: 3px solid var(--accent);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
    font-style: normal;
}

/* Read-more: a native <details> disclosure so the fuller text stays in the page (and crawlable by search
   engines) while the page reads shorter at a glance. Same visual language as .faq, but a single toggle
   inline in a copy column rather than a bordered accordion row. */
.read-more { margin-top: 20px; }
.read-more__q {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    list-style: none;
}
.read-more__q::-webkit-details-marker { display: none; }
.read-more__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1px solid var(--accent-line);
    border-radius: 50%;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.read-more[open] .read-more__icon { background: var(--accent); color: var(--accent-ink); transform: rotate(45deg); }
.read-more__body.prose { margin-top: 18px; }

.timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
    list-style: none;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 46px;
    height: 1px;
    background: var(--line-2);
}
.timeline__item { position: relative; display: flex; flex-direction: column; gap: 10px; }
.timeline__dot {
    width: 13px;
    height: 13px;
    border: 2px solid var(--line-3);
    border-radius: 50%;
    background: var(--bg);
}
.timeline__year { font: 400 13px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.timeline__text { max-width: 260px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.timeline__item.is-now .timeline__dot { border: 0; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow-soft), 0 0 18px var(--accent); }
.timeline__item.is-now .timeline__year { color: var(--accent-text); }

/* Leadership: a photo with an accent ring on hover/featured, falling back to initials when a member has none. */
.title-mute { color: var(--text-3); }
.section-head__lead { max-width: 900px; margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.section-head__lead strong { color: var(--text); font-weight: 600; }
.team-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.leader {
    display: flex;
    flex-direction: column;
    padding: 24px 20px 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.leader:hover { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-tint-2), var(--shadow); transform: translateY(-2px); }
.leader__avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 84px;
    height: 84px;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: var(--avatar-bg);
    color: var(--avatar-text);
    font: 700 20px/1 var(--font-body);
    letter-spacing: 0.02em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.leader__avatar img { width: 100%; height: 100%; object-fit: cover; }
.leader--featured .leader__avatar,
.leader:hover .leader__avatar { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-2), 0 0 18px var(--accent-glow); }
.leader__name { margin-top: 22px; font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.leader__role { margin-top: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--accent-text); }
.leader__bio { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.leader__bio strong { color: var(--text); font-weight: 600; }
/* Cards in a row share tracks, so a name or role that wraps keeps every role and bio on one line across the row. */
@supports (grid-template-rows: subgrid) {
    .leader { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .leader__name { align-self: end; }
}

/* Wider team: name, role and a smaller photo only, no bio — kept apart from the leadership grid above. */
.crew-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.crew {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.crew:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.crew__avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 56px;
    height: 56px;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: var(--avatar-bg);
    color: var(--avatar-text);
    font: 700 14px/1 var(--font-body);
}
.crew__avatar img { width: 100%; height: 100%; object-fit: cover; }
.crew__name { margin-top: 16px; font-size: 15.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; }
.crew__role { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent-text); }

.company-card__reg { margin-top: 6px; font: 400 12px/1.4 var(--font-mono); color: var(--text-3); }
.company-card .card__title { margin-top: 20px; }

/* Process
   ========================================================================== */

.process {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    list-style: none;
}
.process::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 22px;
    height: 1px;
    background: var(--line-2);
}
.process__step { position: relative; }
.process__num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: var(--panel);
    font: 500 13px/1 var(--font-mono);
    color: var(--accent-text);
}
.process__step:last-child .process__num { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 5px var(--accent-glow-soft), 0 0 22px var(--accent-glow); }
.process__title { margin-top: 20px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.process__text { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--text-2); }

/* Practice pages: infrastructure panel
   ========================================================================== */

.infra {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 40px;
    padding: 56px;
    border-radius: 28px;
}
.infra__title { margin-top: 16px; color: #fff; font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
.infra__text { margin-top: 16px; color: var(--band-text); }
.infra__features { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; list-style: none; }
.infra__features li { display: flex; gap: 14px; color: var(--band-text); font-size: 15px; line-height: 1.55; }
.infra__features strong { color: #fff; }
.infra__visual { position: relative; }
.infra__visual img { position: relative; width: 100%; max-width: 440px; margin-inline: auto; }
.visual-glow {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 110%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(113, 191, 68, 0.4) 0%, transparent 68%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* research.my: the tools we use (Data & AI) and the do-it-yourself note (Agency support). */
.tool-card .card__text { margin-bottom: 12px; }
.tool-card .link-arrow { margin-top: auto; padding-bottom: 0; }
.note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: 24px;
    padding: 18px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
}
.note__text { flex: 1 1 320px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.note__text strong { color: var(--text); font-weight: 600; }
.note .link-arrow { padding-block: 4px; }

/* Industries
   ========================================================================== */

.jump-nav { border-bottom: 1px solid var(--line); }
.chips--links a { min-height: 40px; }

.industry__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 32px 72px;
}
.industry__head { position: sticky; top: calc(var(--header-h) + 32px); }
.industry__index { display: block; margin-top: 20px; font: 500 12px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--accent-text); }
.industry__title { margin-top: 14px; font-size: var(--h2); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; }
.industry__text { margin-top: 16px; color: var(--text-2); }
.industry__count { margin-top: 20px; font: 400 12px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.industry__cases { display: flex; flex-direction: column; gap: 12px; list-style: none; }
.industry__case {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 20px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.industry__case:hover { border-color: var(--accent-line); box-shadow: var(--shadow); transform: translateY(-1px); }
.industry__case-meta { grid-column: 1; font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.industry__case-title { grid-column: 1; font: 700 19px/1.3 var(--font-display); letter-spacing: -0.015em; }
.industry__case-go {
    display: grid;
    grid-column: 2;
    grid-row: 1 / span 2;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.industry__case:hover .industry__case-go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Case study detail
   ========================================================================== */

.case-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: 48px 72px;
}
.case-body { color: var(--text-2); font-size: 17px; line-height: 1.7; }
.case-body__lead { color: var(--text); font-size: 21px; line-height: 1.55; letter-spacing: -0.005em; }
.case-body__heading {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 48px 0 14px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.case-body__num { font: 500 12px/1 var(--font-mono); letter-spacing: 0.1em; color: var(--accent-text); }
.case-aside { position: sticky; top: calc(var(--header-h) + 32px); display: flex; flex-direction: column; gap: 20px; }
.results-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.results { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; list-style: none; }
.results li { display: flex; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--text); }
.results__check {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 0 12px var(--accent-glow-soft);
}
.aside-cta { padding: 28px; border-radius: var(--radius); background-size: 32px 32px; }
.aside-cta__title { font: 700 20px/1.25 var(--font-display); letter-spacing: -0.02em; }
.aside-cta__text { margin: 8px 0 20px; font-size: 15px; color: var(--band-text); }

/* FAQ
   ========================================================================== */

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq[open] { border-color: var(--line-2); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); }
.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    font: 600 17px/1.4 var(--font-display);
    letter-spacing: -0.01em;
    list-style: none;
    cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    color: var(--accent-text);
    transition: transform 0.25s ease, background-color 0.2s ease;
}
.faq[open] .faq__icon { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); transform: rotate(45deg); }
.faq__a { padding: 0 24px 22px; color: var(--text-2); font-size: 16px; }
.faq__a p + p { margin-top: 0.8em; }
.faq__a a { color: var(--accent-text); }

/* Footer
   ========================================================================== */

.site-footer { padding: 72px 0 32px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 40px 48px;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.site-footer__brand > p:not(.mono-caption) { max-width: 320px; font-size: 15px; color: var(--text-2); }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--text-2); }
.site-footer__col a { color: var(--text-2); text-decoration: none; }
.site-footer__col a:hover { color: var(--text); }
.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font: 400 11px/1.5 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}
.site-footer__legal a { color: var(--text-3); text-decoration: none; }
.site-footer__legal a:hover { color: var(--text); }

/* Motion
   ========================================================================== */

@keyframes bi-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes v-ring { 0% { opacity: 0.9; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes shield-scroll { to { transform: translateY(-50%); } }

/* Sections tip up into place in real 3D (perspective + rotateX) rather than just fading up flat -- the
   bottom-center transform-origin makes it read as hinging up off the page instead of rotating around its
   own middle. */
.js .reveal {
    opacity: 0;
    transform: perspective(1200px) rotateX(10deg) translateY(22px);
    transform-origin: 50% 100%;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal.is-visible { opacity: 1; transform: perspective(1200px) rotateX(0deg) translateY(0); }

/* Titles: the heading itself is the overflow:hidden mask (main.js wraps its content in .title-slide, once);
   the inner span slides up from below the mask and fades in, instead of the heading just fading up flat. */
.hero__title, .section-head__title { overflow: hidden; }
.title-slide {
    display: block;
    transform: translateY(105%);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
}
.hero__title.is-visible .title-slide, .section-head__title.is-visible .title-slide { transform: translateY(0); opacity: 1; }

/* Premium finish (2026-09-26): grain, a cursor-tracked glow on every card, gradient-fade hairlines, and
   sheen on the primary button/nav link. Global and purely additive -- no layout, spacing or type scale
   touched, just the surface detail pass that separates a "finished" site from a merely functional one. */

/* Fine film grain over the whole viewport, above every section including video -- the usual fix for large
   flat/dark areas (hero backdrop, panels) reading as a cheap solid colour swatch instead of a photographed
   surface. Fixed, pointer-events:none and blended, so it never changes hit-testing, legibility or contrast;
   safe to leave unconditional (it's static texture, not motion, so it isn't gated on reduced-motion). */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body::after { opacity: 0.025; mix-blend-mode: multiply; }

/* Gradient-fade hairlines: dividers recede into the void at the page edges instead of running edge-to-edge
   as a flat ruled line. */
.site-header {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--line-3) 25%, var(--line-3) 75%, transparent) 1;
}
.section--mist {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--line-3) 20%, var(--line-3) 80%, transparent) 1;
}

/* Cursor-tracked spotlight on every card-like surface (main.js writes --mx/--my on mousemove) -- a soft
   highlight that follows the pointer across the panel, the same hover cue used on Linear/Stripe-style docs.
   Built on ::after (never ::before, which the home practice-card's ghost numeral already owns) so it layers
   safely under every variant here without any markup change. z-index:-1 keeps it behind the card's own
   static content (icon/title/text) while still painting above the card's own solid background. */
.card, .case-card, .dv-card, .leader, .results-card { position: relative; }
.card::after, .case-card::after, .dv-card::after, .leader::after, .results-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.08), transparent 62%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.card:hover::after, .case-card:hover::after, .dv-card:hover::after, .leader:hover::after, .results-card:hover::after { opacity: 1; }
:root[data-theme="light"] .card::after,
:root[data-theme="light"] .case-card::after,
:root[data-theme="light"] .dv-card::after,
:root[data-theme="light"] .leader::after,
:root[data-theme="light"] .results-card::after {
    background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgba(11, 13, 18, 0.045), transparent 62%);
}

/* Primary button sheen: a soft diagonal light sweeps across on hover, once. */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.btn--primary:hover::after { transform: translateX(100%); }

/* Nav link underline: expands from the centre on hover. The current-page link keeps its own solid
   bottom-border indicator (declared earlier, under Header) instead, so the two treatments never compete. */
.site-nav__link { position: relative; }
.site-nav__link::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 8px;
    height: 1px;
    background: var(--text);
    transform: scaleX(0);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav__link:hover::before { transform: scaleX(1); }
.site-nav__link[aria-current="page"]::before { display: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1; transform: none; }
    .js .funnel-seg { opacity: 1; transform: none; }
    .dv-donut-slice { stroke-dasharray: var(--len) var(--gap); }
    .router__row + .router__row::before { display: none; }
}

/* Responsive
   ========================================================================== */

@media (max-width: 1180px) {
    .team-grid, .crew-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 56px; }
    .router { max-width: 680px; }
    .enquiry__inner { grid-template-columns: minmax(0, 1fr); }
    .funnel-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .funnel-strip li:nth-child(n + 3) { border-top: 1px solid var(--line); }
    /* Laptops with display scaling land here: keep the list beside the card, just tighter. */
    .showcase { gap: 40px; }
    .showcase__name { font-size: 16px; }
    .showcase__panel { gap: 24px 32px; padding: 32px; }
}

@media (max-width: 1100px) {
    .brand__divider, .brand__tagline { display: none; }
    .site-nav__list { gap: 28px; }
    .site-nav { gap: 28px; }
}

@media (max-width: 960px) {
    :root { --header-h: 68px; }
    .nav-toggle { display: grid; }
    .site-nav {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        max-height: calc(100vh - var(--header-h));
        margin: 0;
        overflow-y: auto;
        padding: 12px var(--pad) 28px;
        border-bottom: 1px solid var(--line);
        background: var(--bg);
        box-shadow: var(--shadow);
    }
    .site-header__tools { margin-left: auto; }
    .is-open .site-nav { display: flex; }
    .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .site-nav__link { width: 100%; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
    .site-nav__link[aria-current="page"] { box-shadow: none; color: var(--accent-text); }
    .site-nav__link .icon { display: none; }
    .site-nav__sub {
        position: static;
        width: auto;
        padding: 8px 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .site-nav__sub::before { display: none; }
    .site-nav__sub-desc { display: none; }
    .site-nav__cta { align-self: flex-start; }

    .grid--3, .team-grid, .crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats__item:nth-child(3) { border-left: 0; }
    .stats__item:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
    .timeline::before { display: none; }
    .split, .industry__inner, .case-layout, .infra, .calc__grid { grid-template-columns: minmax(0, 1fr); }
    .split__media { max-width: 420px; }
    .industry__head, .case-aside { position: static; }
    .process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
    .process::before { display: none; }
    .page-hero .globe--sm { right: -300px; opacity: 0.7; }
    .spark--d, .orbit--c { display: none; }

    .shield { grid-template-columns: minmax(0, 1fr); padding: 24px; }
    .shield__box { height: 200px; }
    .shield__wall { height: 72px; align-items: center; }
    .shield__wall::before {
        top: 50%;
        bottom: auto;
        left: -24px;
        right: -24px;
        width: auto;
        height: 6px;
        background: linear-gradient(90deg, transparent, var(--accent) 12%, var(--accent) 88%, transparent);
        transform: translateY(-50%);
    }
    .shield__node { margin-top: 0; }
    .shield__zone--out .shield__zone-label { text-align: left; }
    .shield__toast { position: static; max-width: none; margin-top: 18px; transform: none; }

    /* The case list becomes a swipeable row of cards above the detail card. */
    .showcase { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .showcase__tabs {
        flex-direction: row;
        gap: 10px;
        margin-inline: calc(-1 * var(--pad));
        padding: 0 var(--pad) 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--pad);
        scrollbar-width: none;
    }
    .showcase__tabs::-webkit-scrollbar { display: none; }
    .showcase__tab {
        flex: 0 0 240px;
        align-items: flex-start;
        padding: 14px 16px;
        border: 1px solid var(--line);
        border-radius: var(--radius-xs);
        background: var(--panel);
        scroll-snap-align: start;
    }
    .showcase__tab .icon { display: none; }
    .showcase__tab[aria-selected="true"] { border-color: var(--accent-line); background: var(--accent-tint); }
    .showcase__name { font-size: 15px; }
}

@media (max-width: 720px) {
    body { font-size: 16px; }
    .grid--2, .grid--3, .team-grid, .crew-grid, .dv-grid, .field-grid { grid-template-columns: minmax(0, 1fr); }
    .section-head { margin-bottom: 32px; }
    .practice-card { min-height: 0; }
    .practice-card .chips { padding-right: 0; }
    .practice-card__go { display: none; }
    .cta-band, .infra { padding: 36px 28px; border-radius: 22px; }
    .form-card { padding: 28px 22px; }
    .enquiry-form .frm_form_field.bi-half { grid-column: 1 / -1; }
    .process { grid-template-columns: minmax(0, 1fr); }
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__brand { grid-column: 1 / -1; }
    .case-body__lead { font-size: 19px; }
    .hero { padding: 48px 0 72px; }
    .page-hero { padding: 64px 0 52px; }
    .funnel-strip { grid-template-columns: minmax(0, 1fr); }
    .funnel-strip li:nth-child(n + 3) { border-top: 0; }
    .funnel-strip li { border-left: 0 !important; padding: 20px 4px; }
    .funnel-strip li + li { border-top: 1px solid var(--line); }
    .calc__panel { padding: 26px; }
    .calc__rows > div, .calc__note { padding-inline: 22px; }
    .calc__result .btn { margin: 20px 22px 26px; }
    .showcase__tab { flex-basis: 210px; }
    .showcase__panels { padding: 0 8px 8px 0; }
    .showcase__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 28px; padding: 26px 22px; box-shadow: 8px 8px 0 var(--accent); }
    .showcase__panel:not(.is-active) { display: none; }
}

/* Narrow phones: funnel labels would be too small at this scale, so drop them from the chart itself --
   the strip below already carries the same number/title in normal, independently-sized HTML text. */
@media (max-width: 600px) {
    .funnel-num, .funnel-title { display: none; }
    .router__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .router__strip li:nth-child(3) { border-left: 0; }
    .router__strip li:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .stats__value { font-size: 36px; }
    .stats__item { padding: 20px; }
    .shield__rows { font-size: 11px; }
    .seg__btn { min-height: 46px; font-size: 15px; }
}

@media (max-width: 420px) {
    .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
    .timeline { grid-template-columns: minmax(0, 1fr); }
    .hero__actions .btn { flex: 1 1 100%; }
}

.field-card__points { list-style: none; margin: 0; padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 18px; aspect-ratio: 16 / 9; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); }
.field-card__points li { position: relative; padding-left: 22px; font-weight: 500; color: var(--text); }
.field-card__points li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.infra__visual--video { display: flex; justify-content: center; }
.infra__visual--video video { position: relative; display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-sm); background: #000; }

/* Infrastructure panel follows the theme (light by default); the CTA band stays dark. */
:root[data-theme="light"] .infra {
    border-color: var(--line);
    background-color: var(--bg-soft);
    background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    color: var(--text);
}
:root[data-theme="light"] .infra__title,
:root[data-theme="light"] .infra__features strong { color: var(--text); }
:root[data-theme="light"] .infra__text,
:root[data-theme="light"] .infra__features li { color: var(--text-2); }
:root[data-theme="light"] .infra .label--on-dark { color: var(--accent-text); }
:root[data-theme="light"] .infra .icon-tile--dark { background: var(--accent-tint-2); color: var(--accent-text); }
:root[data-theme="light"] .infra__visual--video video { box-shadow: var(--shadow); }

/* CTA band and case-study aside follow the theme too. */
:root[data-theme="light"] .cta-band,
:root[data-theme="light"] .aside-cta {
    border-color: var(--line);
    background-color: var(--bg-soft);
    background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    color: var(--text);
}
:root[data-theme="light"] .cta-band__title,
:root[data-theme="light"] .aside-cta__title { color: var(--text); }
:root[data-theme="light"] .cta-band__text,
:root[data-theme="light"] .aside-cta__text { color: var(--text-2); }
:root[data-theme="light"] .cta-band::after { background: radial-gradient(circle, var(--accent-glow-soft) 0%, transparent 65%); }

/* Full-screen home intro (template-parts/home/intro.php)
   ========================================================================== */
.intro { position: relative; display: flex; align-items: center; min-height: calc(100svh - var(--header-h)); padding: 48px 0 72px; overflow: hidden; text-align: center; cursor: pointer; border-bottom: 1px solid var(--line); }
.intro__field {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 60% 45% at 50% 38%, var(--accent-glow-soft), transparent 70%),
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: auto, 56px 56px, 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 40%, transparent 100%);
}
.intro__inner { display: flex; flex-direction: column; align-items: center; }
.intro__title { margin-top: 22px; font-size: clamp(40px, 7vw, 92px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
.intro__title em { font-style: normal; color: var(--accent-text); }
.intro__sub { max-width: 640px; margin-top: 22px; font-size: clamp(17px, 1.6vw, 21px); color: var(--text-2); }
.intro__figures { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px clamp(36px, 7vw, 96px); margin: 52px 0 0; }
.intro__figure { display: flex; flex-direction: column-reverse; gap: 10px; }
.intro__value { margin: 0; font-size: clamp(44px, 6vw, 76px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.intro__suffix { color: var(--accent-text); }
.intro__label { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.intro__hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 64px; padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--text-2); font: 500 15px/1 var(--font-body); cursor: pointer; }
.intro__hint:hover { color: var(--text); border-color: var(--line-3); }
.intro__hint svg { animation: intro-bob 1.8s ease-in-out infinite; }
@keyframes intro-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .intro__hint svg { animation: none; } }

/* Intro, 3D pass: globe canvas, tilting text layers, glass figure cards, staggered flip-in.
   ========================================================================== */
.intro { perspective: 1400px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.intro__globe { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.intro__inner { transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.25s ease-out; pointer-events: none; }
.intro__inner > * { pointer-events: auto; }
.intro__label-top { transform: translateZ(30px); }
.intro__title { transform: translateZ(80px); text-shadow: 0 1px 0 var(--bg), 0 18px 40px var(--accent-glow-soft); }
.intro__line { display: block; opacity: 0; transform-origin: 50% 100%; animation: intro-flip 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(0.15s + var(--n, 0) * 0.18s); }
.intro__sub { transform: translateZ(40px); text-shadow: 0 0 18px var(--bg), 0 0 6px var(--bg); }
.intro__figures { transform-style: preserve-3d; transform: translateZ(50px); }
.intro__figure { padding: 22px 30px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg) 34%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: var(--shadow); transform: perspective(700px) rotateX(var(--cx, 0deg)) rotateY(var(--cy, 0deg)); transition: transform 0.15s ease-out; opacity: 0; animation: intro-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(0.55s + var(--n, 0) * 0.14s); }
.intro__hint { transform: translateZ(30px); background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@keyframes intro-flip { from { opacity: 0; transform: perspective(900px) rotateX(-85deg) translateY(30px); } to { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0); } }
@keyframes intro-rise { from { opacity: 0; transform: perspective(700px) translateY(40px) rotateX(-30deg); } to { opacity: 1; transform: perspective(700px) rotateX(var(--cx, 0deg)) rotateY(var(--cy, 0deg)); } }
@media (prefers-reduced-motion: reduce) {
    .intro__line, .intro__figure { animation: none; opacity: 1; }
    .intro__inner { transition: none; }
}
@media (max-width: 720px) {
    .intro__figure { padding: 16px 20px; }
    .intro__inner { transform: none; }
}

/* Wide screens: copy on the left, the globe owns the right. */
@media (min-width: 1000px) {
    .intro { text-align: left; }
    .intro__inner { align-items: flex-start; max-width: var(--container); }
    .intro__inner > * { max-width: min(46%, 640px); }
    .intro__figures { justify-content: flex-start; max-width: 640px; }
    .intro__sub { margin-left: 0; }
}
@media (max-width: 999px) {
    .intro { align-items: flex-start; padding-top: 56px; min-height: max(calc(100svh - var(--header-h)), 820px); }
    .intro__figures { gap: 14px; }
    .intro__figure { padding: 14px 18px; }
    .intro__value { font-size: clamp(34px, 9vw, 52px); }
}

@media (min-width: 1000px) {
    .intro__title { max-width: none; font-size: clamp(44px, 5.4vw, 84px); }
    .intro__line { white-space: nowrap; }
    .intro__figures { gap: 14px; flex-wrap: nowrap; }
    .intro__figure { padding: 16px 22px; }
    .intro__value { font-size: clamp(34px, 3.6vw, 54px); }
    .intro__label { font-size: 11px; }
}

@media (max-width: 720px) {
    .intro { min-height: max(calc(100svh - var(--header-h)), 800px); padding: 40px 0 36px; }
    .intro__title { font-size: 9.6vw; }
    .intro__line { white-space: nowrap; }
    .intro__sub { margin-top: 16px; font-size: 16px; }
    .intro__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 28px; }
    .intro__figure { padding: 12px 4px; gap: 6px; }
    .intro__value { font-size: 28px; }
    .intro__label { font-size: 9px; letter-spacing: 0.05em; line-height: 1.3; }
    .intro__hint { margin-top: auto; font-size: 13px; padding: 9px 14px; }
    .intro__inner { flex: 1; }
}

@media (max-width: 720px) {
    .intro__label-top, .intro__title, .intro__sub, .intro__figures, .intro__hint { transform: none; }
}

@media (max-width: 720px) {
    .intro__inner { width: 100%; padding-inline: var(--pad); }
    .intro__hint { margin-top: 18px; }
}

/* Globe callouts */
.intro__chip { position: absolute; left: 0; top: 0; z-index: 1; display: flex; flex-direction: column; gap: 2px; max-width: 190px; padding: 9px 13px; border: 1px solid var(--line-2); border-radius: var(--radius-xs); background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--shadow); pointer-events: none; transition: opacity 0.4s ease; will-change: transform; text-align: left; }
.intro__chip strong { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--text); }
.intro__chip span { font-size: 11.5px; line-height: 1.3; color: var(--text-2); }
.intro__chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow-soft); position: absolute; top: 12px; right: 12px; }
.intro__chip strong { padding-right: 16px; }

/* Wide video player in the Data & AI infrastructure panel */
@media (min-width: 1000px) {
    .infra { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); gap: 48px; }
}
.infra__visual--video { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.vplayer { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
.infra__visual--video .vplayer video { position: static; display: block; width: 100%; max-width: none; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; box-shadow: none; background: #000; }
.vplayer__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 10px var(--accent-glow-soft), 0 12px 32px rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; }
.vplayer__play svg { margin-left: 3px; }
.vplayer__play:hover { transform: scale(1.06); }
.vplayer__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vplayer.is-playing .vplayer__play { opacity: 0; pointer-events: none; }
.infra__caption { font-size: 13px; color: var(--band-text); }
:root[data-theme="light"] .infra__caption { color: var(--text-3); }
:root[data-theme="light"] .infra__visual--video .vplayer { box-shadow: var(--shadow); }

/* Phone alignment: nothing may push the page wider than the screen, and the recruiting card sizes to its text. */
html, body { overflow-x: clip; }
.field-grid > *, .field-card { min-width: 0; max-width: 100%; }
.field-card__points { box-sizing: border-box; width: 100%; max-width: 100%; }
.field-card__points li { overflow-wrap: anywhere; }
@media (max-width: 720px) {
    .field-card__points { aspect-ratio: auto; padding: 22px 20px; gap: 16px; font-size: 16px; }
}

/* Phones: the copy runs the full width, so wash the whole top of the hero (not just its left side) to keep the text readable over the skyline. */
@media (max-width: 720px) {
    :root[data-theme="light"] .hero__backdrop::after {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.78) 55%, rgba(255, 255, 255, 0.35) 85%, var(--bg) 100%);
    }
}

/* Recruiting panel: fixed two-column table so both columns line up on every row, on every screen size. */
.router__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; column-gap: 14px; }
.router__row .router__cell--value { text-align: right; }
.router__row--head .router__cell:last-child { text-align: right; }
.router__head > span:first-child { line-height: 1.4; }

/* Home: narrated dashboard video (template-parts/home/dashboard-video.php) */
.dashvid { margin: 0; display: flex; flex-direction: column; gap: 14px; max-width: 1040px; margin-inline: auto; }
.dashvid .vplayer video { position: static; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; background: #000; }
.dashvid__caption { font-size: 13px; color: var(--text-3); text-align: center; }

/* Recruiting card: height follows its text at every width (a fixed 16:9 box let the bullets spill out when the card was narrow);
   when it sits beside a video card it stretches to the same height. */
.field-card__points { aspect-ratio: auto !important; height: auto; min-height: 0; flex: 1 1 auto; overflow: visible; }
.field-card__points li { position: relative; }

/* Merged "What you get" section: the three chart cards sit under the video */
.dashvid__views { margin-top: 56px; }
.dashvid__caption { margin-top: 28px; text-align: center; }
@media (max-width: 720px) { .dashvid__views { margin-top: 36px; } }

/* Footer: two columns on tablets (four columns made the email address overflow at iPad width), and long lines wrap. */
@media (min-width: 640px) and (max-width: 1100px) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__brand { grid-column: 1 / -1; }
}
.site-footer__col a, .site-footer__col span { overflow-wrap: anywhere; }

/* Office tabs on small phones: both tabs share the width and wrap, so neither is hidden behind a sideways scroll. */
@media (max-width: 480px) {
    .wtabs { overflow-x: visible; gap: 6px; }
    .wtab { flex: 1 1 0; min-width: 0; height: auto; min-height: 44px; padding: 6px 10px; white-space: normal; line-height: 1.2; text-align: left; }
}

/* Chart cards at tablet widths: two columns would strand the third card, so it spans the row with its chart beside its text. */
@media (min-width: 721px) and (max-width: 1180px) {
    .dashvid__views .dv-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: center; }
    .dashvid__views .dv-card:last-child svg { grid-column: 1; grid-row: 1 / span 2; }
    .dashvid__views .dv-card:last-child .dv-card__title { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; }
    .dashvid__views .dv-card:last-child .dv-card__text { grid-column: 2; grid-row: 2; align-self: start; }
}

/* No stranded cards: when the last row of a grid isn't full, its cards stretch to fill it.
   Card grids (3 columns) */
@media (min-width: 961px) {
    .grid--3 > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
    .grid--3 > :last-child:nth-child(3n + 2) { grid-column: span 2; }
}
/* Team and crew grids at laptop widths: a six-column grid so 3 + 2 becomes 3 + 2 equal halves */
@media (min-width: 961px) and (max-width: 1180px) {
    .team-grid, .crew-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .team-grid > *, .crew-grid > * { grid-column: span 2; }
    .team-grid > :last-child:nth-child(3n + 1), .crew-grid > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
    .team-grid > :last-child:nth-child(3n + 2), .crew-grid > :last-child:nth-child(3n + 2),
    .team-grid > :nth-last-child(2):nth-child(3n + 1), .crew-grid > :nth-last-child(2):nth-child(3n + 1) { grid-column: span 3; }
}
/* Two-column layouts (tablets): an odd last card spans both columns */
@media (min-width: 721px) and (max-width: 960px) {
    .grid--3 > :last-child:nth-child(odd), .team-grid > :last-child:nth-child(odd),
    .crew-grid > :last-child:nth-child(odd), .process > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}