/* =====================================================================
   Web Business Development (WBDI) — site theme for Bootstrap 6
   ---------------------------------------------------------------------
   1. Tokens are unlayered so they override Bootstrap's unlayered :root
      tokens (this file loads after bootstrap.min.css).
   2. Everything else lives in Bootstrap's `custom` cascade layer, which
      sits above components but below helpers and utilities — so utility
      classes like .mb-0 or .text-center always win over these rules.
   ===================================================================== */

:root {
    /* Brand palette (from the WBDI logo: deep navy core, azure-to-cyan ring) */
    --wb-ink: #030a19;
    --wb-ink-2: #061430;
    --wb-ink-3: #0a1d42;
    --wb-blue-core: #0b63f6;
    --wb-blue-deep: #0849c2;
    --wb-blue: #1593ff;
    --wb-cyan: #13c8f2;
    --wb-cyan-light: #7fe3ff;
    --wb-surface: #ffffff;
    --wb-surface-alt: #f3f7fc;
    --wb-border: #e1e8f2;
    --wb-text: #08111f;
    --wb-muted: #45526a;
    --wb-muted-dark: #9fb1cc;
    --wb-gradient: linear-gradient(120deg, #0849c2 0%, #0b63f6 46%, #13c8f2 100%);
    --wb-gradient-soft: linear-gradient(135deg, rgb(11 99 246 / 12%), rgb(19 200 242 / 12%));
    --wb-gradient-text-dark: linear-gradient(100deg, #9cc9ff 0%, #7fe3ff 48%, #c4f6ff 100%);
    --wb-radius-sm: .75rem;
    --wb-radius: 1rem;
    --wb-radius-lg: 1.5rem;
    --wb-shadow-card: 0 1px 2px rgb(15 23 42 / 4%), 0 10px 30px -18px rgb(15 23 42 / 22%);
    --wb-shadow-hover: 0 2px 6px rgb(15 23 42 / 5%), 0 28px 56px -24px rgb(7 31 77 / 34%);
    --wb-shadow-media: 0 30px 60px -30px rgb(3 10 25 / 45%);
    --wb-font-display: "Sora", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --wb-header-h: 4.5rem;
    --wb-section-y: clamp(4rem, 3rem + 4vw, 7rem);

    /* Bootstrap 6 overrides */
    --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --bs-body-line-height: 1.65;
    --bs-heading-color: light-dark(#08111f, #f8fafc);
    --bs-link-decoration: none;

    --bs-primary-base: #0b63f6;
    --bs-primary-bg: #0b63f6;
    --bs-primary-fg: light-dark(#0849c2, #a5b4fc);
    --bs-primary-fg-emphasis: light-dark(#0a2e75, #bcd6ff);
    --bs-primary-bg-subtle: light-dark(#ebf3ff, #071f4d);
    --bs-primary-bg-muted: light-dark(#dbe9ff, #0a2e75);
    --bs-primary-border: light-dark(#bcd6ff, #0b63f6);
    --bs-primary-focus-ring: color-mix(in oklch, #0b63f6 45%, transparent);
    --bs-primary-contrast: #ffffff;

    --bs-accent-base: #13c8f2;
    --bs-accent-bg: #13c8f2;
    --bs-accent-fg: light-dark(#0675a3, #7fe3ff);
    --bs-accent-fg-emphasis: light-dark(#0b4a66, #a8eeff);
    --bs-accent-bg-subtle: light-dark(#eafbff, #05314a);
    --bs-accent-bg-muted: light-dark(#ccf4ff, #0b5a80);
    --bs-accent-border: light-dark(#a8eeff, #0aa6d6);
    --bs-accent-focus-ring: color-mix(in oklch, #13c8f2 45%, transparent);
    --bs-accent-contrast: #031f2b;
}

/* Bootstrap declares drawer tokens outside any layer, so these must be too */
.site-drawer {
    --bs-drawer-bg: var(--wb-ink-2);
    --bs-drawer-color: #e2e8f0;
    --bs-drawer-border-color: rgb(255 255 255 / 10%);
    --bs-drawer-width: 22rem;
}

@layer custom {

    /* -------------------------------------------------------------
       Base
       ------------------------------------------------------------- */
    html {
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--wb-header-h) + 1rem);
    }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
    }

    body {
        color: var(--wb-text);
        background-color: var(--wb-surface);
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        font-weight: 700;
        letter-spacing: -.022em;
        line-height: 1.15;
        text-wrap: balance;
    }

    p { text-wrap: pretty; }

    b, strong { font-weight: 600; }

    img { max-width: 100%; height: auto; }

    ::selection {
        color: #fff;
        background-color: var(--wb-blue-core);
    }

    a { transition: color .15s ease-in-out; }

    /* decorative glows and accents may poke past the viewport edge; clip
       (not hidden) so sticky children keep working */
    #main { overflow-x: clip; }
    #main:focus { outline: 0; }

    @media (width < 576px) {
        .hero .btn-lg,
        .page-hero .btn-lg { width: 100%; }
    }

    .skip-link:focus {
        position: fixed;
        top: .75rem;
        left: .75rem;
        z-index: 2000;
        padding: .625rem 1rem;
        font-weight: 600;
        color: #fff;
        background: var(--wb-blue-core);
        border-radius: var(--wb-radius-sm);
    }

    /* -------------------------------------------------------------
       Typography helpers (Bootstrap 6 drops .display-* and .lead)
       ------------------------------------------------------------- */
    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin-bottom: 1rem;
        font-family: var(--bs-font-mono);
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--wb-blue-core);
    }

    .eyebrow::before {
        content: "";
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: var(--wb-gradient);
        box-shadow: 0 0 0 4px rgb(11 99 246 / 12%);
    }

    .section-dark .eyebrow { color: var(--wb-cyan-light); }
    .section-dark .eyebrow::before { box-shadow: 0 0 0 4px rgb(19 200 242 / 18%); }

    .display-title {
        font-size: clamp(2.375rem, 1.6rem + 2.6vw, 3.5rem);
        font-weight: 700;
        line-height: 1.04;
        letter-spacing: -.035em;
    }

    .page-title {
        font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
        font-weight: 700;
        line-height: 1.08;
        letter-spacing: -.03em;
    }

    .section-title {
        font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
        font-weight: 700;
        line-height: 1.12;
        letter-spacing: -.028em;
        margin-bottom: 1rem;
    }

    .lede {
        font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
        line-height: 1.65;
        color: var(--wb-muted);
    }

    .section-dark .lede { color: var(--wb-muted-dark); }

    .text-gradient {
        background: var(--wb-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .section-dark .text-gradient { background-image: var(--wb-gradient-text-dark); }

    .text-muted-wb { color: var(--wb-muted); }
    .section-dark .text-muted-wb { color: var(--wb-muted-dark); }

    .mono { font-family: var(--bs-font-mono); }

    /* -------------------------------------------------------------
       Header & navigation
       ------------------------------------------------------------- */
    .site-header {
        z-index: 1030;
        /* the closed drawer parks off-canvas inside the navbar's containment box;
           clip it so it can't create horizontal page scroll (an open drawer lives
           in the top layer and is unaffected) */
        overflow-x: clip;
        background-color: rgb(3 10 25 / 82%);
        -webkit-backdrop-filter: saturate(160%) blur(16px);
        backdrop-filter: saturate(160%) blur(16px);
        border-bottom: 1px solid rgb(255 255 255 / 8%);
        transition: background-color .2s ease, box-shadow .2s ease;
    }

    .site-header.is-scrolled {
        background-color: rgb(3 10 25 / 94%);
        box-shadow: 0 10px 30px -20px rgb(0 0 0 / 80%);
    }

    .site-header .navbar {
        --bs-navbar-min-height: var(--wb-header-h);
        --bs-navbar-color: #c2cfe3;
        --bs-navbar-hover-color: #ffffff;
        --bs-navbar-active-color: #ffffff;
        --bs-navbar-brand-color: #ffffff;
        --bs-navbar-brand-hover-color: #ffffff;
        --bs-navbar-bg: transparent;
        padding-block: 0;
    }

    .brand {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        gap: .625rem;
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -.01em;
    }

    .brand-logo {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        box-shadow: 0 0 0 1px rgb(255 255 255 / 12%), 0 0 24px rgb(19 200 242 / 35%);
    }

    .site-header .navbar-nav .nav-link {
        position: relative;
        font-size: .9375rem;
        font-weight: 500;
        border-radius: .5rem;
    }

    .site-header .navbar-nav .nav-link:hover {
        background-color: rgb(255 255 255 / 6%);
    }

    .site-header .navbar-nav .nav-link.active {
        border-color: transparent;
    }

    .site-header .navbar-nav .nav-link.active::after {
        content: "";
        position: absolute;
        inset-inline: .75rem;
        bottom: .125rem;
        height: 2px;
        border-radius: 2px;
        background: var(--wb-gradient);
    }

    .nav-phone {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-size: .875rem;
        font-weight: 500;
        color: #c2cfe3;
        white-space: nowrap;
    }

    .nav-phone:hover { color: #ffffff; }

    .site-header .navbar-toggler { color: #ffffff; }

    /* Mobile drawer (its --bs-drawer-* tokens are set unlayered at the top of this file) */
    .site-drawer {
        color: #e2e8f0;
    }

    .site-drawer[open] .navbar-nav .nav-link {
        display: flex;
        width: 100%;
    }

    .nav-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        margin-inline-start: auto;
        margin-inline-end: -.5rem;
        font-size: 1.125rem;
        color: #cbd5e1;
        background: transparent;
        border: 1px solid rgb(255 255 255 / 12%);
        border-radius: .75rem;
    }

    .nav-close:hover,
    .nav-close:focus-visible {
        color: #fff;
        background: rgb(255 255 255 / 8%);
    }

    .site-drawer::backdrop {
        background: rgb(3 6 15 / 70%);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    .site-drawer .drawer-header {
        border-bottom: 1px solid rgb(255 255 255 / 8%);
    }

    .site-drawer .drawer-title {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: #fff;
    }


    /* Desktop: the drawer is forced inline by .lg:navbar-expand and is never [open] */
    .nav-actions {
        display: flex;
        align-items: center;
        gap: 1.25rem;
    }

    .nav-contact {
        display: none;
        gap: .75rem;
        padding-top: 1.25rem;
        margin-top: 1.25rem;
        font-size: .9375rem;
        color: #c2cfe3;
        border-top: 1px solid rgb(255 255 255 / 8%);
    }

    .nav-contact a { color: #c2cfe3; }
    .nav-contact a:hover { color: #fff; }
    .nav-contact i { color: var(--wb-cyan-light); margin-inline-end: .5rem; }

    /* Mobile: the drawer is open as a modal panel */
    .site-drawer[open] .nav-contact { display: grid; }

    .site-drawer[open] .navbar-nav .nav-link {
        padding: .75rem .875rem;
        font-size: 1.0625rem;
    }

    .site-drawer[open] .navbar-nav .nav-link.active {
        background-color: rgb(255 255 255 / 6%);
    }

    .site-drawer[open] .navbar-nav .nav-link.active::after {
        inset-inline: auto;
        inset-block: .625rem;
        left: 0;
        width: 3px;
        height: auto;
    }

    .site-drawer[open] .nav-actions {
        display: grid;
        margin-top: 1.25rem;
    }

    .site-drawer[open] .nav-actions .btn-brand { width: 100%; }

    /* -------------------------------------------------------------
       Buttons
       ------------------------------------------------------------- */
    .btn-brand {
        --bs-btn-padding-x: 1.25rem;
        --bs-btn-font-weight: 600;
        --bs-btn-border-radius: .75rem;
        position: relative;
        color: #fff;
        background-image: var(--wb-gradient);
        background-size: 140% 100%;
        background-position: 0 0;
        border-color: transparent;
        box-shadow: 0 10px 24px -12px rgb(11 99 246 / 75%), inset 0 1px 0 rgb(255 255 255 / 18%);
        transition: background-position .35s ease, box-shadow .2s ease, transform .2s ease;
    }

    .btn-brand:hover,
    .btn-brand:focus-visible {
        color: #fff;
        background-position: 100% 0;
        box-shadow: 0 16px 32px -14px rgb(21 147 255 / 80%), inset 0 1px 0 rgb(255 255 255 / 22%);
        transform: translateY(-1px);
    }

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

    .btn-ghost {
        --bs-btn-padding-x: 1.25rem;
        --bs-btn-font-weight: 600;
        --bs-btn-border-radius: .75rem;
        --bs-btn-color: var(--wb-text);
        --bs-btn-bg: #ffffff;
        --bs-btn-border-color: var(--wb-border);
        --bs-btn-hover-color: var(--wb-blue-core);
        --bs-btn-hover-bg: #ffffff;
        --bs-btn-hover-border-color: #bcd6ff;
        box-shadow: 0 1px 2px rgb(15 23 42 / 6%);
    }

    .section-dark .btn-ghost,
    .btn-ghost-dark {
        --bs-btn-color: #ffffff;
        --bs-btn-bg: rgb(255 255 255 / 6%);
        --bs-btn-border-color: rgb(255 255 255 / 18%);
        --bs-btn-hover-color: #ffffff;
        --bs-btn-hover-bg: rgb(255 255 255 / 12%);
        --bs-btn-hover-border-color: rgb(255 255 255 / 36%);
        box-shadow: none;
    }

    .btn-arrow i,
    .link-arrow i {
        transition: transform .2s ease;
    }

    .btn-arrow:hover i,
    .link-arrow:hover i {
        transform: translateX(3px);
    }

    .link-arrow {
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        font-weight: 600;
        color: var(--wb-blue-core);
    }

    .link-arrow:hover { color: var(--wb-blue-deep); }
    .section-dark .link-arrow { color: var(--wb-cyan-light); }
    .section-dark .link-arrow:hover { color: #fff; }

    /* -------------------------------------------------------------
       Sections
       ------------------------------------------------------------- */
    .section {
        position: relative;
        padding-block: var(--wb-section-y);
    }

    .section-sm { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }

    .section-alt { background-color: var(--wb-surface-alt); }

    .section-dark {
        position: relative;
        isolation: isolate;
        color: #cbd5e1;
        background-color: var(--wb-ink);
        background-image:
            radial-gradient(56rem 28rem at 8% -12%, rgb(11 99 246 / 38%), transparent 62%),
            radial-gradient(48rem 26rem at 102% 4%, rgb(19 200 242 / 22%), transparent 60%);
        overflow: clip; /* clip, not hidden: hidden would make the section the scroll container and break sticky photos */
    }

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

    .section-dark b, .section-dark strong { color: #f1f5f9; }

    /* faint engineering grid behind dark sections */
    .grid-bg {
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image:
            linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px),
            linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
        background-size: 56px 56px;
        -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 30%, #000 30%, transparent 100%);
        mask-image: radial-gradient(ellipse 75% 70% at 50% 30%, #000 30%, transparent 100%);
    }

    .section-head {
        max-width: 48rem;
        margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    }

    .section-head.text-center { margin-inline: auto; }

    .divider-soft {
        height: 1px;
        border: 0;
        background: linear-gradient(90deg, transparent, var(--wb-border), transparent);
        opacity: 1;
    }

    /* -------------------------------------------------------------
       Home hero
       ------------------------------------------------------------- */
    .hero {
        padding-top: clamp(3.5rem, 2rem + 5vw, 6.5rem);
        padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
    }

    .hero .lede { max-width: 36rem; }

    .trust-list {
        display: flex;
        flex-wrap: wrap;
        gap: .625rem 1.5rem;
        padding: 0;
        margin: 1.75rem 0 0;
        list-style: none;
        font-size: .9375rem;
        color: #c2cfe3;
    }

    .trust-list li {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }

    .trust-list i { color: var(--wb-cyan-light); }

    .hero-visual {
        position: relative;
        margin: 0;
    }

    .hero-visual::before {
        content: "";
        position: absolute;
        inset: -1.25rem -1.25rem auto auto;
        width: 60%;
        height: 70%;
        z-index: -1;
        border-radius: var(--wb-radius-lg);
        background: var(--wb-gradient);
        opacity: .55;
        filter: blur(48px);
    }

    .hero-visual img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: 62% 50%;
        border-radius: var(--wb-radius-lg);
        border: 1px solid rgb(255 255 255 / 12%);
        box-shadow: 0 40px 80px -40px rgb(0 0 0 / 80%);
    }

    .float-card {
        position: absolute;
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .75rem 1rem;
        font-size: .875rem;
        line-height: 1.3;
        color: #e2e8f0;
        background: rgb(6 20 48 / 78%);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border: 1px solid rgb(255 255 255 / 14%);
        border-radius: var(--wb-radius-sm);
        box-shadow: 0 20px 40px -20px rgb(0 0 0 / 70%);
    }

    .float-card strong { display: block; color: #fff; font-weight: 600; }
    .float-card small { color: var(--wb-muted-dark); }

    .float-card-a { left: -1.25rem; bottom: 1.5rem; }
    .float-card-b { right: -1rem; top: 1.5rem; }

    @media (width < 576px) {
        .float-card-a { left: .75rem; bottom: .75rem; }
        .float-card-b { display: none; }
    }

    .value-strip {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1px;
        margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
        overflow: hidden;
        background: rgb(255 255 255 / 10%);
        border: 1px solid rgb(255 255 255 / 10%);
        border-radius: var(--wb-radius);
    }

    .value-strip > div {
        display: flex;
        gap: .875rem;
        align-items: flex-start;
        padding: 1.25rem 1.375rem;
        background: rgb(6 20 48 / 72%);
    }

    .value-strip i {
        font-size: 1.25rem;
        line-height: 1.3;
        color: var(--wb-cyan-light);
    }

    .value-strip strong {
        display: block;
        font-weight: 600;
        color: #fff;
    }

    .value-strip span {
        font-size: .875rem;
        color: var(--wb-muted-dark);
    }

    @media (width >= 576px) {
        .value-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (width >= 1024px) {
        .value-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    /* below the two-column breakpoint, keep the wide hero photo from dominating the screen */
    @media (width < 1024px) {
        .hero-visual img { aspect-ratio: 16 / 9; }
    }

    /* -------------------------------------------------------------
       Inner page hero
       ------------------------------------------------------------- */
    .page-hero {
        padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
        padding-bottom: clamp(3.5rem, 2.5rem + 3.5vw, 5.5rem);
    }

    .page-hero .lede { max-width: 46rem; }

    .page-hero .breadcrumb {
        --bs-breadcrumb-link-color: var(--wb-muted-dark);
        --bs-breadcrumb-link-hover-color: #ffffff;
        --bs-breadcrumb-link-hover-bg: rgb(255 255 255 / 6%);
        --bs-breadcrumb-link-active-color: #e2e8f0;
        --bs-breadcrumb-divider-color: rgb(255 255 255 / 35%);
        --bs-breadcrumb-link-padding-x: .5rem;
        margin-bottom: 1.75rem;
        margin-inline-start: -.5rem;
        font-size: .875rem;
    }

    .page-hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-top: 2rem;
    }

    /* quick-contact card shown beside inner page hero copy */
    .hero-aside {
        padding: 1.75rem;
        color: #cbd5e1;
        background: rgb(255 255 255 / 5%);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border: 1px solid rgb(255 255 255 / 12%);
        border-radius: var(--wb-radius-lg);
        box-shadow: 0 30px 60px -30px rgb(0 0 0 / 70%);
    }

    .hero-aside h2 {
        margin-bottom: .5rem;
        font-size: 1.25rem;
        letter-spacing: -.015em;
    }

    .hero-aside p { font-size: .9375rem; color: var(--wb-muted-dark); }

    .hero-aside ul {
        display: grid;
        gap: .625rem;
        padding: 1rem 0 0;
        margin: 1.25rem 0 0;
        list-style: none;
        font-size: .9375rem;
        border-top: 1px solid rgb(255 255 255 / 10%);
    }

    .hero-aside a:not(.btn) { color: #e2e8f0; }
    .hero-aside a:not(.btn):hover { color: #fff; }
    .hero-aside i { margin-inline-end: .5rem; color: var(--wb-cyan-light); }

    /* anchors land below the sticky header + sticky jump nav */
    body:has(.jump-nav) [id] {
        /* html scroll-padding already clears the header; add only the jump-nav height */
        scroll-margin-top: 2.75rem;
    }

    /* compact call-to-action strip placed between long content sections */
    .cta-inline {
        display: flex;
        flex-wrap: wrap;
        gap: 1.25rem 2rem;
        align-items: center;
        justify-content: space-between;
        padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
        background: var(--wb-gradient-soft), #fff;
        border: 1px solid #bcd6ff;
        border-radius: var(--wb-radius-lg);
    }

    .cta-inline h2,
    .cta-inline h3 {
        margin-bottom: .25rem;
        font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
    }

    .cta-inline p { margin: 0; color: var(--wb-muted); }

    /* -------------------------------------------------------------
       Cards, tiles & lists
       ------------------------------------------------------------- */
    .feature-card {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: clamp(1.5rem, 1.25rem + .75vw, 2rem);
        background: var(--wb-surface);
        border: 1px solid var(--wb-border);
        border-radius: var(--wb-radius);
        box-shadow: var(--wb-shadow-card);
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .feature-card:hover {
        transform: translateY(-4px);
        border-color: #bcd6ff;
        box-shadow: var(--wb-shadow-hover);
    }

    .feature-card h3 {
        margin-bottom: .625rem;
        font-size: 1.25rem;
        font-weight: 650;
        letter-spacing: -.015em;
    }

    .feature-card p { color: var(--wb-muted); }

    .feature-card .link-arrow { margin-top: auto; }

    .feature-card-media {
        padding: 0;
        overflow: hidden;
    }

    .feature-card-media img {
        display: block;
        width: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    }

    .feature-card-media:hover img { transform: scale(1.04); }

    .feature-card-media .feature-card-body {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        padding: clamp(1.25rem, 1rem + .75vw, 1.75rem);
    }

    .section-dark .feature-card {
        color: #cbd5e1;
        background: rgb(255 255 255 / 4%);
        border-color: rgb(255 255 255 / 10%);
        box-shadow: none;
    }

    .section-dark .feature-card:hover {
        background: rgb(255 255 255 / 6%);
        border-color: rgb(127 227 255 / 35%);
    }

    .section-dark .feature-card p { color: var(--wb-muted-dark); }

    .icon-tile {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        margin-bottom: 1.25rem;
        font-size: 1.375rem;
        color: var(--wb-blue-core);
        background: var(--wb-gradient-soft);
        border: 1px solid rgb(11 99 246 / 16%);
        border-radius: .875rem;
    }

    .icon-tile-solid {
        color: #fff;
        background: var(--wb-gradient);
        border-color: transparent;
        box-shadow: 0 12px 24px -12px rgb(11 99 246 / 70%);
    }

    .section-dark .icon-tile {
        color: var(--wb-cyan-light);
        background: rgb(127 227 255 / 8%);
        border-color: rgb(127 227 255 / 22%);
    }

    .check-list {
        display: grid;
        gap: .75rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .check-list li {
        position: relative;
        padding-inline-start: 2rem;
        font-weight: 500;
    }

    .check-list li::before {
        content: "\F26E";
        position: absolute;
        top: .05rem;
        left: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.375rem;
        height: 1.375rem;
        font-family: "bootstrap-icons";
        font-size: 1rem;
        line-height: 1;
        color: #fff;
        background: var(--wb-gradient);
        border-radius: 50%;
    }

    .check-list-2 {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }

    /* Offering / activity lists rendered as a responsive chip grid */
    .offer-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(16.5rem, 100%), 1fr));
        gap: .625rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .offer-list li {
        display: flex;
        gap: .625rem;
        align-items: flex-start;
        padding: .75rem 1rem;
        font-size: .9375rem;
        line-height: 1.45;
        color: var(--wb-text);
        background: var(--wb-surface);
        border: 1px solid var(--wb-border);
        border-radius: var(--wb-radius-sm);
    }

    .offer-list li::before {
        content: "\F633";
        flex-shrink: 0;
        font-family: "bootstrap-icons";
        font-size: .9375rem;
        line-height: 1.45;
        color: var(--wb-blue-core);
    }

    .section-alt .offer-list li { background: #fff; }

    .section-dark .offer-list li {
        color: #e2e8f0;
        background: rgb(255 255 255 / 4%);
        border-color: rgb(255 255 255 / 10%);
    }

    .section-dark .offer-list li::before { color: var(--wb-cyan-light); }

    /* lists with a bold lead-in ("Dedicated Teams: …") read better stacked */
    .offer-list-wide { grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); }

    .list-label {
        margin-bottom: .875rem;
        font-family: var(--bs-font-mono);
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--wb-blue-core);
    }

    .section-dark .list-label { color: var(--wb-cyan-light); }

    .tag {
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        padding: .375rem .75rem;
        font-size: .8125rem;
        font-weight: 500;
        color: var(--wb-text);
        background: #fff;
        border: 1px solid var(--wb-border);
        border-radius: 999px;
        transition: border-color .2s ease, color .2s ease, background-color .2s ease;
    }

    a.tag:hover {
        color: var(--wb-blue-core);
        border-color: #bcd6ff;
    }

    .section-dark .tag {
        color: #e2e8f0;
        background: rgb(255 255 255 / 6%);
        border-color: rgb(255 255 255 / 14%);
    }

    .section-dark a.tag:hover {
        color: #fff;
        border-color: rgb(127 227 255 / 45%);
    }

    /* -------------------------------------------------------------
       Media
       ------------------------------------------------------------- */
    .media-frame {
        position: relative;
        margin: 0;
        overflow: hidden;
        border-radius: var(--wb-radius-lg);
        box-shadow: var(--wb-shadow-media);
    }

    .media-frame img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .media-frame::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border: 1px solid rgb(15 23 42 / 8%);
        border-radius: inherit;
    }

    .section-dark .media-frame::after { border-color: rgb(255 255 255 / 12%); }

    .media-accent { position: relative; }

    .media-accent::before {
        content: "";
        position: absolute;
        inset: 12% -6% -6% 12%;
        z-index: 0;
        border-radius: var(--wb-radius-lg);
        background: var(--wb-gradient);
        opacity: .16;
    }

    .media-accent > .media-frame { z-index: 1; }

    .media-badge {
        position: absolute;
        left: 1rem;
        bottom: 1rem;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem .75rem;
        font-size: .8125rem;
        font-weight: 500;
        color: #fff;
        background: rgb(3 10 25 / 72%);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid rgb(255 255 255 / 16%);
        border-radius: 999px;
    }

    .media-badge i { color: var(--wb-cyan-light); }

    /* -------------------------------------------------------------
       Process snapshot (home) & full process timeline
       ------------------------------------------------------------- */
    .step-strip {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
        gap: .75rem;
        padding: 0;
        margin: 0;
        list-style: none;
        counter-reset: step;
    }

    .step-strip a {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        height: 100%;
        padding: 1rem 1.125rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--wb-text);
        background: #fff;
        border: 1px solid var(--wb-border);
        border-radius: var(--wb-radius-sm);
        transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .step-strip a:hover {
        color: var(--wb-blue-core);
        border-color: #bcd6ff;
        transform: translateY(-2px);
        box-shadow: var(--wb-shadow-card);
    }

    .step-strip .step-no {
        font-family: var(--bs-font-mono);
        font-size: .75rem;
        font-weight: 500;
        color: var(--wb-blue-core);
    }

    .step-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 3.25rem;
        height: 3.25rem;
        padding-inline: .75rem;
        margin-bottom: 1.25rem;
        font-family: var(--bs-font-mono);
        font-size: 1.125rem;
        font-weight: 600;
        color: #fff;
        background: var(--wb-gradient);
        border-radius: .875rem;
        box-shadow: 0 14px 28px -14px rgb(11 99 246 / 75%);
    }

    .timeline {
        position: relative;
        display: grid;
        gap: clamp(3rem, 2rem + 3vw, 5rem);
    }

    /* -------------------------------------------------------------
       Sticky in-page navigation (services, industries, legal)
       ------------------------------------------------------------- */
    .toc {
        position: sticky;
        top: calc(var(--wb-header-h) + 1.5rem);
        padding: 1.25rem;
        background: #fff;
        border: 1px solid var(--wb-border);
        border-radius: var(--wb-radius);
        box-shadow: var(--wb-shadow-card);
    }

    .toc-title {
        padding-inline: .5rem;
        margin-bottom: .75rem;
        font-family: var(--bs-font-mono);
        font-size: .6875rem;
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--wb-muted);
    }

    .toc ol,
    .toc ul {
        display: grid;
        gap: .125rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .toc a {
        display: flex;
        align-items: center;
        gap: .625rem;
        padding: .5rem .625rem;
        font-size: .875rem;
        font-weight: 500;
        line-height: 1.35;
        color: var(--wb-muted);
        border-radius: .5rem;
        transition: color .15s ease, background-color .15s ease;
    }

    .toc a:hover,
    .toc a.active {
        color: var(--wb-blue-core);
        background: #ebf3ff;
    }

    .toc a i {
        width: 1rem;
        font-size: .9375rem;
        color: currentColor;
        opacity: .8;
    }

    .toc-cta {
        padding: 1rem;
        margin-top: 1rem;
        font-size: .875rem;
        color: #cbd5e1;
        background: var(--wb-ink);
        background-image: radial-gradient(16rem 10rem at 0 0, rgb(11 99 246 / 45%), transparent 70%);
        border-radius: var(--wb-radius-sm);
    }

    .toc-cta strong { display: block; margin-bottom: .25rem; color: #fff; }

    /* horizontal pill nav used under page heroes on smaller screens */
    .jump-nav {
        position: sticky;
        top: var(--wb-header-h);
        z-index: 1000; /* below the header (Bootstrap .sticky-top resolves it to 1010) */
        background: rgb(255 255 255 / 92%);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--wb-border);
    }

    .jump-nav ul {
        display: flex;
        gap: .375rem;
        padding: .75rem 0;
        margin: 0;
        overflow-x: auto;
        list-style: none;
        scrollbar-width: none;
    }

    .jump-nav ul::-webkit-scrollbar { display: none; }

    .jump-nav a {
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        padding: .4375rem .875rem;
        font-size: .875rem;
        font-weight: 500;
        color: var(--wb-muted);
        white-space: nowrap;
        border: 1px solid var(--wb-border);
        border-radius: 999px;
    }

    .jump-nav a:hover,
    .jump-nav a.active {
        color: var(--wb-blue-core);
        background: #ebf3ff;
        border-color: #bcd6ff;
    }

    /* -------------------------------------------------------------
       Long-form content blocks (services, industries, about)
       ------------------------------------------------------------- */
    .content-block {
    }

    .content-block + .content-block {
        padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
        margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
        border-top: 1px solid var(--wb-border);
    }

    .content-block p { color: var(--wb-muted); }
    .content-block p b, .content-block li b { color: var(--wb-text); }

    .block-head {
        display: flex;
        gap: 1rem;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    .block-head .icon-tile { margin-bottom: 0; }

    .block-head h2 {
        margin: 0;
        font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
        font-weight: 700;
        letter-spacing: -.025em;
    }

    .block-kicker {
        display: block;
        margin-bottom: .25rem;
        font-family: var(--bs-font-mono);
        font-size: .75rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--wb-blue-core);
    }

    .block-media {
        margin-block: 1.75rem;
    }

    .block-media img {
        aspect-ratio: 21 / 9;
    }

    .sub-card {
        height: 100%;
        padding: 1.5rem;
        background: var(--wb-surface-alt);
        border: 1px solid var(--wb-border);
        border-radius: var(--wb-radius);
        transition: border-color .2s ease, background-color .2s ease;
    }

    .sub-card:hover {
        background: #fff;
        border-color: #bcd6ff;
    }

    .section-alt .sub-card { background: #fff; }

    .section-dark .block-kicker { color: var(--wb-cyan-light); }

    .sub-card h3 {
        display: flex;
        gap: .625rem;
        align-items: flex-start;
        margin-bottom: .75rem;
        font-size: 1.125rem;
        font-weight: 650;
        letter-spacing: -.01em;
    }

    .sub-card h3 i {
        font-size: 1.125rem;
        line-height: 1.25;
        color: var(--wb-blue-core);
    }

    .sub-card p {
        margin-bottom: 0;
        font-size: .9375rem;
        line-height: 1.65;
        color: var(--wb-muted);
    }

    /* split layout (image + copy) used by industries, process, about */
    .split + .split {
        margin-top: var(--wb-section-y);
    }

    .split .media-frame img { aspect-ratio: 3 / 2; }

    /* tablets: full-width photos at 3:2 get very tall, so crop them wider */
    @media (768px <= width < 1024px) {
        .split .media-frame img,
        .media-accent .media-frame img { aspect-ratio: 16 / 9; }
    }

    .split-copy p { color: var(--wb-muted); }
    .section-dark .split-copy p { color: var(--wb-muted-dark); }

    /* -------------------------------------------------------------
       FAQ (native <details> accordion)
       ------------------------------------------------------------- */
    .faq {
        --bs-accordion-border-color: var(--wb-border);
        --bs-accordion-border-radius: var(--wb-radius);
        --bs-accordion-padding-x: 1.5rem;
        --bs-accordion-padding-y: 1.25rem;
        --bs-accordion-btn-color: var(--wb-text);
        --bs-accordion-active-color: var(--wb-blue-core);
        --bs-accordion-active-bg: #fff;
    }

    .faq .accordion-header {
        font-size: 1.0625rem;
        font-weight: 600;
        gap: 1rem;
        cursor: pointer;
    }

    .faq .accordion-body {
        color: var(--wb-muted);
    }

    .faq .accordion-item[open] {
        border-color: #bcd6ff;
        box-shadow: var(--wb-shadow-card);
    }

    /* -------------------------------------------------------------
       Call-to-action band
       ------------------------------------------------------------- */
    .cta-band {
        position: relative;
        isolation: isolate;
        padding: clamp(2.5rem, 2rem + 3vw, 4.5rem);
        overflow: hidden;
        color: #cbd5e1;
        background-color: var(--wb-ink-2);
        background-image:
            radial-gradient(40rem 22rem at 0% 0%, rgb(11 99 246 / 55%), transparent 65%),
            radial-gradient(36rem 22rem at 100% 100%, rgb(19 200 242 / 35%), transparent 65%);
        border: 1px solid rgb(255 255 255 / 10%);
        border-radius: var(--wb-radius-lg);
    }

    .cta-band h2 { color: #fff; }
    .cta-band .lede { color: #c2cfe3; }

    .cta-contact {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem 1.75rem;
        padding: 0;
        margin: 1.75rem 0 0;
        list-style: none;
        font-size: .9375rem;
    }

    .cta-contact a { color: #e2e8f0; }
    .cta-contact a:hover { color: #fff; }
    .cta-contact i { margin-inline-end: .5rem; color: var(--wb-cyan-light); }

    /* -------------------------------------------------------------
       Contact page
       ------------------------------------------------------------- */
    .form-card {
        padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
        background: #fff;
        border: 1px solid var(--wb-border);
        border-radius: var(--wb-radius-lg);
        box-shadow: 0 30px 60px -40px rgb(15 23 42 / 40%);
    }

    .form-card .form-label {
        margin-bottom: .375rem;
        font-size: .875rem;
        font-weight: 600;
        color: var(--wb-text);
    }

    .form-card .form-control {
        --bs-control-min-height: 3rem;
        --bs-control-border-radius: .75rem;
        --bs-control-border-color: #d9deea;
        --bs-control-box-shadow: none;
        background-color: #fbfcfe;
    }

    .form-card .form-control:focus {
        background-color: #fff;
        border-color: var(--wb-blue-core);
        box-shadow: 0 0 0 4px rgb(11 99 246 / 14%);
        outline: 0;
    }

    .form-card textarea.form-control { min-height: 9rem; }

    .form-hint {
        font-size: .8125rem;
        font-weight: 400;
        color: var(--wb-muted);
    }

    /* jQuery unobtrusive validation hooks */
    .field-validation-error {
        display: block;
        margin-top: .375rem;
        font-size: .8125rem;
        font-weight: 500;
        color: #dc2626;
    }

    .form-control.input-validation-error {
        border-color: #f87171;
        background-color: #fffafa;
    }

    .validation-summary-errors {
        padding: .875rem 1rem;
        margin-bottom: 1rem;
        font-size: .9375rem;
        color: #991b1b;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: var(--wb-radius-sm);
    }

    .validation-summary-errors ul { margin: 0; padding-inline-start: 1.25rem; }
    .validation-summary-valid { display: none; }

    .form-assurance {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem 1.25rem;
        justify-content: center;
        margin-top: 1rem;
        font-size: .8125rem;
        color: var(--wb-muted);
    }

    .form-assurance i { color: var(--wb-blue-core); margin-inline-end: .25rem; }

    .contact-list {
        display: grid;
        gap: 1rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .contact-list li {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }

    .contact-list .icon-tile { margin-bottom: 0; width: 2.75rem; height: 2.75rem; font-size: 1.125rem; }

    .contact-list .label {
        display: block;
        margin-bottom: .125rem;
        font-family: var(--bs-font-mono);
        font-size: .6875rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--wb-muted);
    }

    .contact-list a,
    .contact-list .value {
        font-weight: 600;
        color: var(--wb-text);
        overflow-wrap: anywhere;
    }

    .contact-list a:hover { color: var(--wb-blue-core); }

    .map-frame {
        height: 20rem;
        overflow: hidden;
        background: var(--wb-surface-alt);
        border: 1px solid var(--wb-border);
        border-radius: var(--wb-radius);
    }

    .map-frame #map {
        width: 100%;
        height: 100%;
    }

    .next-steps {
        display: grid;
        gap: 1rem;
        padding: 0;
        margin: 0;
        list-style: none;
        counter-reset: next;
    }

    .next-steps li {
        position: relative;
        padding-inline-start: 3rem;
        counter-increment: next;
    }

    .next-steps li::before {
        content: counter(next);
        position: absolute;
        top: 0;
        left: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        font-family: var(--bs-font-mono);
        font-size: .875rem;
        font-weight: 600;
        color: var(--wb-blue-core);
        background: #ebf3ff;
        border: 1px solid #bcd6ff;
        border-radius: 50%;
    }

    .next-steps strong { display: block; color: var(--wb-text); }
    .next-steps span { font-size: .9375rem; color: var(--wb-muted); }

    .section-dark .next-steps strong { color: #fff; }
    .section-dark .next-steps span { color: var(--wb-muted-dark); }
    .section-dark .next-steps li::before {
        color: var(--wb-cyan-light);
        background: rgb(127 227 255 / 8%);
        border-color: rgb(127 227 255 / 28%);
    }

    /* -------------------------------------------------------------
       Legal pages (privacy, terms)
       ------------------------------------------------------------- */
    .legal-content {
        --bs-content-font-size: 1.0625rem;
        max-width: 42rem;
        margin-inline: 0;
        color: var(--wb-muted);
    }

    .legal-content h2 {
        padding-top: 1.5rem;
        margin-top: 1rem;
        font-size: 1.5rem;
        letter-spacing: -.02em;
        color: var(--wb-text);
        border-top: 1px solid var(--wb-border);
    }

    .legal-content h2:first-child { padding-top: 0; margin-top: 0; border-top: 0; }

    .legal-content h3 {
        margin-top: .5rem;
        font-size: 1.1875rem;
        color: var(--wb-text);
    }

    .legal-content strong { color: var(--wb-text); }
    .legal-content a { color: var(--wb-blue-core); text-decoration: underline; text-underline-offset: .2em; }

    .legal-toc a { font-size: .8125rem; padding-block: .375rem; }

    /* keep the long legal TOC reachable on short laptop screens */
    @media (width >= 1024px) {
        .legal-toc {
            max-height: calc(100vh - var(--wb-header-h) - 3rem);
            overflow-y: auto;
            overscroll-behavior: contain;
        }
    }

    .legal-content + .cta-inline { max-width: 42rem; }

    /* -------------------------------------------------------------
       Status pages (404, error, success)
       ------------------------------------------------------------- */
    .status-code {
        font-size: clamp(5rem, 3rem + 10vw, 9rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.06em;
    }

    .status-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 4.5rem;
        height: 4.5rem;
        margin-bottom: 1.5rem;
        font-size: 2rem;
        color: #fff;
        background: var(--wb-gradient);
        border-radius: 1.25rem;
        box-shadow: 0 20px 40px -20px rgb(11 99 246 / 80%);
    }

    /* -------------------------------------------------------------
       Footer
       ------------------------------------------------------------- */
    .site-footer {
        position: relative;
        isolation: isolate;
        padding-top: clamp(3.5rem, 2.5rem + 3vw, 5rem);
        font-size: .9375rem;
        color: var(--wb-muted-dark);
        background-color: var(--wb-ink);
        background-image: radial-gradient(50rem 24rem at 100% 0%, rgb(11 99 246 / 18%), transparent 60%);
        overflow: hidden;
    }

    .site-footer .brand { color: #fff; }

    .footer-heading {
        margin-bottom: 1rem;
        font-family: var(--bs-font-mono);
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #fff;
    }

    .footer-links {
        display: grid;
        gap: .5rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .site-footer a { color: var(--wb-muted-dark); }
    .site-footer a:hover { color: #fff; }

    .footer-contact li {
        display: flex;
        gap: .625rem;
        align-items: flex-start;
    }

    .footer-contact i { color: var(--wb-cyan-light); line-height: 1.6; }

    .social-icons {
        display: flex;
        gap: .5rem;
        margin-top: 1.5rem;
    }

    .social-icons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.0625rem;
        color: #cbd5e1;
        background: rgb(255 255 255 / 5%);
        border: 1px solid rgb(255 255 255 / 10%);
        border-radius: .75rem;
        transition: color .2s ease, background-color .2s ease, border-color .2s ease;
    }

    .social-icons a:hover {
        color: #fff;
        background: rgb(255 255 255 / 10%);
        border-color: rgb(127 227 255 / 40%);
    }

    .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem 1.5rem;
        align-items: center;
        justify-content: space-between;
        padding-block: 1.5rem;
        margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
        font-size: .875rem;
        border-top: 1px solid rgb(255 255 255 / 8%);
    }

    .footer-bottom nav {
        display: flex;
        gap: 1.25rem;
    }

    /* -------------------------------------------------------------
       Scroll reveal — CSS-only progressive enhancement.
       Browsers without scroll-driven animations simply show content.
       ------------------------------------------------------------- */
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .reveal {
                animation: wb-reveal linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 35%;
            }
        }
    }

    @keyframes wb-reveal {
        from {
            opacity: 0;
            transform: translateY(1.5rem);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    /* =============================================================
       Responsive & conversion refinements (from visual QA at
       375 / 768 / 1024 / 1280px)
       ============================================================= */

    /* --- Footer CTA keeps white text (footer link color must not win) --- */
    .site-footer .btn-brand,
    .site-footer .btn-brand:hover,
    .site-footer .btn-brand:focus-visible { color: #fff; }

    /* --- Compact header CTA, visible exactly while the navbar is collapsed --- */
    .header-cta {
        --bs-btn-padding-x: .875rem;
        --bs-btn-font-size: .875rem;
        min-height: 2.5rem;
        margin-inline: auto .75rem;
        box-shadow: none;
    }

    @container (width >= 1024px) {
        .header-cta { display: none; }
    }

    .site-header .navbar-toggler {
        width: 2.75rem;
        height: 2.75rem;
        flex-shrink: 0;
    }

    /* brand + compact CTA + toggler always share one row */
    .site-header .navbar > .container { flex-wrap: nowrap; }

    @media (width < 576px) {
        .site-header .brand {
            gap: .5rem;
            margin-inline-end: .5rem;
            font-size: 1rem;
        }

        .site-header .brand-logo {
            width: 2rem;
            height: 2rem;
        }

        .header-cta { margin-inline-end: .5rem; }
    }

    /* 1024–1279: tighten the expanded header so it stays inside the container */
    @media (1024px <= width < 1280px) {
        .site-header .navbar { --bs-navbar-nav-link-padding-x: .5rem; }
        .site-header .nav-actions .btn-arrow i { display: none; }
    }

    /* --- Phone gutters --- */
    @media (width < 576px) {
        .container { padding-inline: 1rem; }
    }

    /* --- Tap targets (≥ 44px) for the highest-intent links --- */
    .hero-aside a:not(.btn),
    .cta-contact a,
    .nav-contact a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    .hero-aside ul { gap: 0; }
    .cta-contact { gap: 0 1.75rem; }
    .nav-contact { gap: 0; }

    .contact-list li { position: relative; }
    .contact-list a::after {
        content: "";
        position: absolute;
        inset: -.25rem 0;
    }

    .feature-card .link-arrow { min-height: 2.75rem; }

    @media (pointer: coarse), (width < 1024px) {
        .btn { min-height: 2.75rem; }
        .jump-nav a { min-height: 2.75rem; }
        .jump-nav ul { padding-block: .5rem; }
    }

    @media (width < 1024px) {
        .footer-links:not(.footer-contact) { gap: 0; }
        .footer-links:not(.footer-contact) a,
        .footer-bottom nav a,
        .site-footer .brand {
            display: inline-flex;
            align-items: center;
            min-height: 2.75rem;
        }

        .page-hero .breadcrumb-link {
            position: relative;
        }

        /* larger hit area without moving the layout */
        .page-hero .breadcrumb-link::after {
            content: "";
            position: absolute;
            inset: -.25rem 0;
        }

        /* only linked tags need a 44px target; label-only tags stay compact */
        a.tag { min-height: 2.75rem; padding-inline: .875rem; }
    }

    /* long legal prose wraps greedily; "pretty" left visibly short lines mid-paragraph */
    .legal-content p,
    .legal-content li { text-wrap: wrap; }

    /* --- Eyebrow: dot aligns with the first line when the label wraps --- */
    .eyebrow {
        align-items: flex-start;
        line-height: 1.5;
        text-wrap: balance;
    }

    .eyebrow::before {
        flex-shrink: 0;
        margin-top: calc((1.5em - .5rem) / 2);
    }

    /* --- Home hero: keep the gradient phrase on one line from sm up --- */
    @media (width >= 576px) {
        .hero .display-title .text-gradient { white-space: nowrap; }
    }

    /* --- Value strip: compact 2-up on phones --- */
    @media (width < 576px) {
        .value-strip {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-top: 2.5rem;
        }

        .value-strip > div {
            flex-direction: column;
            gap: .5rem;
            padding: 1rem;
        }

        .value-strip strong { font-size: .9375rem; line-height: 1.3; }

        .value-strip span {
            display: block;
            margin-top: .25rem;
            font-size: .8125rem;
            line-height: 1.45;
        }
    }

    .value-strip strong { text-wrap: balance; }

    /* --- Wide card variant: a lone third card on tablets lies flat instead of orphaned --- */
    @media (768px <= width < 1024px) {
        .feature-card-wide:not(.feature-card-media) {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            column-gap: 1.25rem;
            align-content: start;
        }

        .feature-card-wide:not(.feature-card-media) > .icon-tile {
            grid-row: 1 / span 3;
            margin-bottom: 0;
        }

        .feature-card-wide:not(.feature-card-media) > :not(.icon-tile) { grid-column: 2; }

        .feature-card-wide .link-arrow {
            justify-self: start;
            margin-top: 0;
        }

        .feature-card-media.feature-card-wide {
            display: grid;
            grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        }

        .feature-card-media.feature-card-wide img {
            height: 100%;
            aspect-ratio: auto;
        }
    }

    /* --- Step strip: one row of five on tablets; 2-up on phones (home) --- */
    @media (768px <= width < 1024px) {
        .step-strip {
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: .5rem;
        }

        .step-strip a {
            padding: .875rem;
            font-size: .9375rem;
        }
    }

    @media (width < 768px) {
        .step-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .step-strip li:last-child { grid-column: 1 / -1; }
    }

    /* --- Offer lists: no lonely last chip --- */
    @media (768px <= width < 1024px) {
        .offer-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    }

    @media (width >= 1024px) {
        .offer-list-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .offer-list:not(.offer-list-wide):has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (1024px <= width < 1280px) {
        .offer-list:not(.offer-list-wide) > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
    }

    /* --- Inline CTA: copy left, actions right from tablet up; full-width buttons on phones --- */
    .cta-inline > :first-child {
        flex: 1 1 26rem;
        min-width: 0;
        max-width: 46rem;
    }

    .cta-inline > .btn { flex-shrink: 0; }

    @media (width < 576px) {
        .cta-inline .btn { width: 100%; }
    }

    /* --- Bottom CTA band on phones --- */
    @media (width < 576px) {
        .cta-band { padding: 2.25rem 1.25rem; }
        .cta-band .btn-lg { width: 100%; }
    }

    /* --- Inner page hero aside below lg: keep tap-to-call/email, drop the duplicate CTA --- */
    @media (width < 1024px) {
        .page-hero .hero-aside { padding: 1.25rem 1.5rem; }

        .page-hero .hero-aside > p,
        .page-hero .hero-aside > .btn { display: none; }

        .page-hero .hero-aside > h2 {
            margin-bottom: .25rem;
            font-size: 1rem;
        }

        .page-hero .hero-aside ul {
            padding-top: .25rem;
            margin-top: .5rem;
        }
    }

    @media (768px <= width < 1024px) {
        /* phone + email share a line, hours wrap whole; nothing breaks mid-word */
        .page-hero .hero-aside ul {
            display: flex;
            flex-wrap: wrap;
            gap: .25rem 2rem;
        }

        .page-hero .hero-aside li { white-space: nowrap; }
    }

    @media (768px <= width < 1280px) {
        .page-hero .trust-list {
            flex-direction: column;
            gap: .5rem;
        }
    }

    /* --- Jump nav: fade the overflowing edge so it reads as scrollable --- */
    .jump-nav ul { scroll-padding-inline: 1rem; }

    @media (width < 1280px) {
        .jump-nav ul {
            padding-inline-end: 2rem;
            -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
        }
    }

    /* --- Long pages with a jump nav: heading-led on phones/tablets, photo rides along on desktop --- */
    @media (width < 1024px) {
        body:has(.jump-nav) .split-copy { order: -1; }
    }

    @media (width >= 1024px) {
        body:has(.jump-nav) .row > .reveal:has(.media-frame) {
            position: sticky;
            top: calc(var(--wb-header-h) + 5.5rem);
            align-self: flex-start;
        }
    }

    /* --- Decorative accent slab stays inside the gutter on small screens --- */
    @media (width < 1024px) {
        .media-accent::before { inset: 10% -.625rem -.625rem 10%; }
    }

    /* --- Tablet photo framing --- */
    @media (768px <= width < 1024px) {
        .media-accent .media-frame img { object-position: 50% 20%; }

        #process-snapshot .media-frame img { aspect-ratio: 3 / 2; }

        #process-snapshot .media-accent,
        .split .media-accent {
            max-width: 40rem;
            margin-inline: auto;
        }

        .split-copy > p { max-width: 70ch; }
    }

    /* --- Full-width lead sub-cards read in two columns on desktop --- */
    @media (width >= 1024px) {
        .row > .col-12 > .sub-card p {
            columns: 2 22rem;
            column-gap: 2.5rem;
        }
    }

    /* --- Contact page --- */
    .grecaptcha-badge { visibility: hidden; }

    .page-hero-compact { padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

    /* smaller hero photo (contact page) keeps the hero compact */
    .hero-visual-sm img { aspect-ratio: 3 / 2; }
    /* top-left is plain office background; bottom-left holds the laptop and notebook */
    .hero-visual-sm .float-card-a { top: 1rem; bottom: auto; left: -1rem; }
    .contact-main { padding-top: clamp(2.5rem, 2rem + 2.5vw, 4rem); }

    .map-fallback:not([hidden]) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .75rem;
        height: 100%;
        padding: 1.5rem;
        text-align: center;
        color: var(--wb-muted);
        background: radial-gradient(20rem 12rem at 50% 0%, rgb(11 99 246 / 10%), transparent 70%), var(--wb-surface-alt);
    }

    .map-fallback .icon-tile { margin-bottom: 0; }

    @media (width >= 1024px) {
        .next-steps-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 2rem;
        }
    }
    .map-fallback strong { max-width: 22rem; color: var(--wb-text); text-wrap: balance; }

    .status-title { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); }

    .page-hero .status-icon-hero {
        width: 3.5rem;
        height: 3.5rem;
        margin-bottom: 1.25rem;
        font-size: 1.5rem;
    }

    /* --- Legal pages --- */
    .legal-toc { padding: 1rem; }
    .legal-toc ol { gap: 0; }

    .legal-toc a {
        padding-block: .3125rem;
        line-height: 1.3;
    }

    /* the section number stays on the first line when an entry wraps */
    .legal-toc a,
    #sections .toc a { align-items: baseline; }

    /* fit the full legal contents list on ~800px-tall laptop screens */
    @media (width >= 1024px) and (height < 900px) {
        .legal-toc a {
            padding-block: .1875rem;
            line-height: 1.25;
        }
    }

    @media (width >= 1024px) {
        .legal-toc {
            scrollbar-width: thin;
            scrollbar-color: #bcd6ff transparent;
        }
    }

    @media (768px <= width < 1024px) {
        .accordion .toc ol {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: repeat(11, auto);
            grid-auto-flow: column;
            column-gap: 1rem;
        }
    }

    .legal-content .legal-caps {
        padding: 1rem 1.25rem;
        letter-spacing: .01em;
        background: var(--wb-surface-alt);
        border-inline-start: 3px solid #bcd6ff;
        border-radius: .5rem;
    }

    .toc-fab {
        position: fixed;
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom));
        z-index: 1020;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
        color: #fff;
        background: var(--wb-gradient);
        border-radius: 50%;
        box-shadow: 0 12px 28px -12px rgb(11 99 246 / 70%);
    }

    .toc-fab:hover { color: #fff; }

    @media (width >= 1024px) {
        .toc-fab { display: none; }
    }

    /* =============================================================
       Second QA pass refinements
       ============================================================= */

    /* Home hero, 1024–1279: the photo is small, so the badges straddle its edges and keep faces clear */
    @media (1024px <= width < 1280px) {
        .hero .float-card-b { top: -1.75rem; right: -.75rem; }
        .hero .float-card-a { bottom: -1.25rem; }
    }

    /* Inline CTA: copy and action share a row from tablet up, even with long button labels */
    .cta-inline > :first-child { flex-basis: 22rem; }

    @media (768px <= width < 1024px) {
        .cta-inline > :first-child { flex-basis: 18rem; }
    }

    @media (width < 576px) {
        .cta-inline > :last-child { flex: 1 1 100%; }
    }

    /* FAQ chevron never touches a long question */
    .faq .accordion-header .accordion-icon { flex-shrink: 0; }

    /* Offer-list items with inline markup stay one text block */
    .offer-list li > span { min-width: 0; }

    /* Tap targets the first pass missed */
    @media (pointer: coarse), (width < 1024px) {
        .split-copy .link-arrow { min-height: 2.75rem; }

        .footer-contact { gap: .25rem; }
        .footer-contact li:has(> a) { align-items: center; }

        .footer-contact li > a {
            display: inline-flex;
            align-items: center;
            min-height: 2.75rem;
        }

        .social-icons a { width: 2.75rem; height: 2.75rem; }

        .legal-content li > a[href^="mailto:"],
        .legal-content li > a[href^="tel:"] {
            display: inline-flex;
            align-items: center;
            min-height: 2.75rem;
            /* full-height hit area without making the rows tall */
            margin-block: -.5rem;
        }
    }

    .form-assurance a,
    .map-frame + .link-arrow {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    /* The first invalid field gets focus on submit; keep it red, not indigo */
    .form-card .form-control.input-validation-error:focus {
        border-color: #ef4444;
        box-shadow: 0 0 0 4px rgb(239 68 68 / 14%);
    }

    /* Jump nav: all pills fit at laptop widths; the fade covers scrollbar widths too */
    @media (width >= 1024px) {
        .jump-nav ul { gap: .25rem; }
        .jump-nav a { padding-inline: .75rem; }
    }

    @media (1280px <= width < 1320px) {
        .jump-nav ul {
            padding-inline-end: 2rem;
            -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
        }
    }

    /* Process principles: equal heading heights keep the 4-up row aligned */
    @media (width >= 1280px) {
        #principles .feature-card h3,
        #standards .feature-card h3,
        #measurement .feature-card h3,
        #tailoring .feature-card h3 { min-height: 2lh; }
    }

    /* Legal pages: back-to-sections button parks at the end of the policy (never over the footer)
       and hides while the section list itself is on screen */
    @media (width < 1024px) {
        .toc-fab {
            position: sticky;
            display: flex;
            width: 3rem;
            margin: .5rem 1rem -3.5rem auto;
            transition: opacity .2s ease, visibility .2s ease;
        }
    }

    .toc-fab.is-hidden {
        opacity: 0;
        visibility: hidden;
    }

    #sections.accordion { max-width: 42rem; }

    /* 404 popular pages: compact tappable rows on phones */
    @media (width < 576px) {
        .popular-pages .feature-card {
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            column-gap: 1rem;
            padding: 1rem 1.25rem;
        }

        .popular-pages .feature-card .icon-tile,
        .popular-pages .feature-card h3 { margin: 0; }

        .popular-pages .feature-card .link-arrow { display: none; }
    }

    /* -------------------------------------------------------------
       Print
       ------------------------------------------------------------- */
    @media print {
        .site-header, .site-footer, .cta-band, .toc, .jump-nav { display: none !important; }
        .section-dark { color: #000; background: none; }
        .section-dark h1, .section-dark h2, .section-dark h3 { color: #000; }
    }

    /* =============================================================
       Web Business Development components
       ============================================================= */

    /* --- Display typeface for headings and the wordmark --- */
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6,
    .display-title, .page-title, .section-title,
    .brand, .status-code {
        font-family: var(--wb-font-display);
    }

    .display-title { letter-spacing: -.04em; }

    /* --- Wordmark: the long name wraps to two tidy lines where space is short --- */
    .brand-name {
        line-height: 1.1;
        white-space: normal;
    }

    @media (width < 576px) {
        .site-header .brand-name {
            max-width: 7.25rem;
            font-size: .875rem;
        }
    }

    @media (1024px <= width < 1180px) {
        .site-header .brand-name {
            max-width: 8.5rem;
            font-size: .9375rem;
        }
    }

    /* --- Hero "AI answer" card: shows the outcome of AEO at a glance --- */
    .answer-card {
        position: absolute;
        right: -1.25rem;
        bottom: -2.25rem;
        z-index: 2;
        width: min(20.5rem, 74%);
        padding: .875rem 1rem 1rem;
        font-size: .8125rem;
        line-height: 1.5;
        color: #dbe6f7;
        background: rgb(6 20 48 / 86%);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border: 1px solid rgb(127 227 255 / 24%);
        border-radius: var(--wb-radius);
        box-shadow: 0 30px 60px -28px rgb(0 0 0 / 85%), inset 0 1px 0 rgb(255 255 255 / 6%);
    }

    .answer-card-head {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin-bottom: .625rem;
        font-family: var(--bs-font-mono);
        font-size: .6875rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--wb-cyan-light);
    }

    .answer-card-head .pulse {
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: var(--wb-cyan);
        box-shadow: 0 0 0 4px rgb(19 200 242 / 20%);
    }

    .answer-card-q {
        margin-bottom: .5rem;
        font-weight: 600;
        color: #fff;
    }

    .answer-card-a {
        margin-bottom: .75rem;
        color: var(--wb-muted-dark);
    }

    .answer-card-a mark {
        padding: 0 .2em;
        color: #fff;
        background: rgb(19 200 242 / 22%);
        border-radius: .25rem;
    }

    .answer-card-sources {
        display: flex;
        flex-wrap: wrap;
        gap: .375rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .source-chip {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .2rem .6rem;
        font-size: .75rem;
        color: #e6f0ff;
        background: rgb(255 255 255 / 7%);
        border: 1px solid rgb(255 255 255 / 14%);
        border-radius: 999px;
    }

    .source-chip.is-you {
        color: #fff;
        background: rgb(19 200 242 / 16%);
        border-color: rgb(127 227 255 / 55%);
    }

    @media (1024px <= width < 1280px) {
        .hero .answer-card { right: -.5rem; bottom: -2.5rem; width: 86%; }
    }

    @media (width < 768px) {
        .answer-card {
            position: relative;
            right: auto;
            bottom: auto;
            width: auto;
            margin: -2.5rem .75rem 0;
        }
    }

    /* --- Search and answer engines strip --- */
    .engine-list {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .engine-list li {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        min-height: 2.75rem;
        padding: .5rem .95rem;
        font-size: .9375rem;
        font-weight: 600;
        color: var(--wb-text);
        background: #fff;
        border: 1px solid var(--wb-border);
        border-radius: 999px;
        box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
    }

    .engine-list i { color: var(--wb-blue-core); }

    .engine-list .engine-ai {
        background: var(--wb-gradient-soft), #fff;
        border-color: #bcd6ff;
    }

    /* --- Service pillar cards (home, services hub) --- */
    .pillar-kicker {
        display: block;
        margin-bottom: .5rem;
        font-family: var(--bs-font-mono);
        font-size: .75rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--wb-blue-core);
    }

    .pillar-links {
        display: grid;
        gap: .125rem;
        padding: 1rem 0 0;
        margin: auto 0 0;
        list-style: none;
        border-top: 1px solid var(--wb-border);
    }

    .pillar-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        min-height: 2.75rem;
        padding: .5rem .625rem;
        margin-inline: -.625rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--wb-text);
        border-radius: .5rem;
        transition: color .15s ease, background-color .15s ease;
    }

    .pillar-links a:hover {
        color: var(--wb-blue-core);
        background: #ebf3ff;
    }

    .pillar-links a i {
        flex-shrink: 0;
        color: var(--wb-blue-core);
        transition: transform .2s ease;
    }

    .pillar-links a:hover i { transform: translateX(3px); }

    .feature-card > p + .pillar-links { margin-top: 1.25rem; }

    .section-dark .pillar-links { border-top-color: rgb(255 255 255 / 10%); }
    .section-dark .pillar-links a { color: #e6eefb; }
    .section-dark .pillar-links a:hover { color: #fff; background: rgb(255 255 255 / 6%); }
    .section-dark .pillar-links a i { color: var(--wb-cyan-light); }
    .section-dark .pillar-kicker { color: var(--wb-cyan-light); }

    /* --- "In short" answer box: the one-paragraph answer a reader (or an AI) can quote --- */
    .summary-box {
        padding: 1.25rem 1.5rem;
        margin: 0;
        background: var(--wb-gradient-soft), #fff;
        border: 1px solid #bcd6ff;
        border-inline-start: 4px solid var(--wb-blue-core);
        border-radius: var(--wb-radius);
    }

    .summary-label {
        display: block;
        margin-bottom: .375rem;
        font-family: var(--bs-font-mono);
        font-size: .6875rem;
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--wb-blue-deep); /* deeper blue keeps 4.5:1 on the tinted box */
    }

    .summary-box p {
        margin: 0;
        font-size: 1.0625rem;
        line-height: 1.6;
        color: var(--wb-text);
    }

    .section-dark .summary-box {
        background: rgb(255 255 255 / 5%);
        border-color: rgb(127 227 255 / 22%);
        border-inline-start-color: var(--wb-cyan-light);
    }

    .section-dark .summary-label { color: var(--wb-cyan-light); }
    .section-dark .summary-box p { color: #e6eefb; }

    /* --- Comparison table (SEO vs AEO vs GEO and similar) --- */
    .compare-wrap {
        overflow-x: auto;
        background: #fff;
        border: 1px solid var(--wb-border);
        border-radius: var(--wb-radius);
        box-shadow: var(--wb-shadow-card);
    }

    .compare-table {
        width: 100%;
        min-width: 42rem;
        margin: 0;
        font-size: .9375rem;
        line-height: 1.55;
        border-collapse: collapse;
    }

    .compare-table th,
    .compare-table td {
        padding: 1rem 1.25rem;
        text-align: start;
        vertical-align: top;
        border-bottom: 1px solid var(--wb-border);
    }

    .compare-table thead th {
        font-family: var(--wb-font-display);
        font-size: 1rem;
        font-weight: 650;
        color: var(--wb-text);
        background: var(--wb-surface-alt);
    }

    .compare-table tbody th {
        width: 11rem;
        font-family: var(--bs-font-mono);
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--wb-muted);
    }

    .compare-table td { color: var(--wb-muted); }
    .compare-table tr:last-child > * { border-bottom: 0; }

    .compare-table .is-focus {
        color: var(--wb-text);
        background: linear-gradient(180deg, rgb(11 99 246 / 6%), rgb(19 200 242 / 6%));
    }

    .compare-table thead .is-focus { color: var(--wb-blue-deep); }

    /* --- Engagement option cards --- */
    .plan-card .plan-meta {
        display: block;
        margin-bottom: .75rem;
        font-family: var(--bs-font-mono);
        font-size: .6875rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--wb-muted);
    }

    .plan-card .check-list {
        gap: .5rem;
        margin-bottom: 1.5rem;
        font-size: .9375rem;
    }

    .plan-card .check-list li { font-weight: 500; }

    .plan-card .btn {
        align-self: flex-start;
        margin-top: auto;
    }

    .plan-card-featured {
        background: linear-gradient(#fff, #fff) padding-box, var(--wb-gradient) border-box;
        border: 1.5px solid transparent;
    }

    /* flows above the meta label (first child of the card) so long labels never collide */
    .plan-flag {
        align-self: flex-start;
        margin-bottom: .875rem;
        padding: .25rem .625rem;
        font-family: var(--bs-font-mono);
        font-size: .625rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #fff;
        background: var(--wb-gradient);
        border-radius: 999px;
    }

    /* --- Small checklists inside cards --- */
    .mini-label {
        margin: 0 0 .5rem;
        font-family: var(--bs-font-mono);
        font-size: .6875rem;
        font-weight: 500;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--wb-blue-core);
    }

    .mini-list {
        display: grid;
        gap: .375rem;
        padding: 0;
        margin: 0 0 1.25rem;
        list-style: none;
        font-size: .9375rem;
        line-height: 1.5;
        color: var(--wb-muted);
    }

    .mini-list:last-child { margin-bottom: 0; }

    .mini-list li {
        position: relative;
        padding-inline-start: 1.5rem;
    }

    .mini-list li::before {
        content: "\F633";
        position: absolute;
        top: 0;
        left: 0;
        font-family: "bootstrap-icons";
        color: var(--wb-blue-core);
    }

    .mini-list.is-problem li::before {
        content: "\F33A";
        color: #94a3b8;
    }

    .section-dark .mini-label { color: var(--wb-cyan-light); }
    .section-dark .mini-list { color: var(--wb-muted-dark); }
    .section-dark .mini-list li::before { color: var(--wb-cyan-light); }

    /* --- Process timeline (phase cards joined by a rail) --- */
    .phase-list {
        position: relative;
        display: grid;
        gap: 1.25rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    @media (width >= 768px) {
        .phase-list::before {
            content: "";
            position: absolute;
            top: 2rem;
            bottom: 2rem;
            left: calc(clamp(1.5rem, 1.25rem + 1vw, 2.25rem) + 1.625rem);
            width: 2px;
            background: linear-gradient(180deg, #bcd6ff, var(--wb-cyan) 50%, #bcd6ff);
            opacity: .7;
        }
    }

    .phase {
        position: relative;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 1.25rem 1.5rem;
        padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
        background: #fff;
        border: 1px solid var(--wb-border);
        border-radius: var(--wb-radius-lg);
        box-shadow: var(--wb-shadow-card);
    }

    .phase > .step-number {
        position: relative;
        z-index: 1;
        justify-self: start;
        margin-bottom: 0;
    }

    .phase-title {
        margin-bottom: .375rem;
        font-size: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
        letter-spacing: -.025em;
    }

    .phase-meta {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin: .5rem 0 1rem;
    }

    .phase p { color: var(--wb-muted); }

    .phase .offer-list { margin-top: .25rem; }

    @media (width >= 1024px) {
        .phase { grid-template-columns: auto minmax(0, 6fr) minmax(0, 5fr); }
        .phase > .phase-side { align-self: center; }
    }

    @media (width < 576px) {
        .phase { grid-template-columns: minmax(0, 1fr); }
    }

    /* --- Numbered module cards (training curriculum and similar) --- */
    .module-no {
        display: block;
        margin-bottom: .75rem;
        font-family: var(--bs-font-mono);
        font-size: .8125rem;
        font-weight: 600;
        color: var(--wb-blue-core);
    }

    .section-dark .module-no { color: var(--wb-cyan-light); }

    .card-foot {
        display: flex;
        flex-wrap: wrap;
        gap: .375rem;
        padding-top: 1rem;
        margin-top: auto;
        border-top: 1px solid var(--wb-border);
    }

    .section-dark .card-foot { border-top-color: rgb(255 255 255 / 10%); }

    /* --- Industry cards: image on top, challenges and remedies below --- */
    .industry-card .feature-card-body h2,
    .industry-card .feature-card-body h3 {
        margin-bottom: .5rem;
        font-size: 1.375rem;
    }

    .industry-card .feature-card-body > p { margin-bottom: 1.25rem; }

    /* --- Photo frames show the brand navy until the artwork has loaded --- */
    .media-frame img,
    .hero-visual img,
    .feature-card-media img {
        background-color: var(--wb-ink-2);
    }

    /* =============================================================
       Page-build refinements
       ============================================================= */

    /* block heads under a pillar h2 carry an h3 at the same visual weight */
    .block-head h3 {
        margin: 0;
        font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
        font-weight: 700;
        letter-spacing: -.025em;
    }

    /* labels keep their accent color inside cards, splits and timeline phases,
       whose "p" color rules would otherwise win */
    p.list-label,
    p.mini-label { color: var(--wb-blue-core); }

    .section-dark p.list-label,
    .section-dark p.mini-label { color: var(--wb-cyan-light); }

    /* bold terms stay light inside dark split blocks */
    .section-dark .content-block p b,
    .section-dark .content-block li b,
    .section-dark .content-block p strong { color: #f1f5f9; }

    /* dark-section variants for components that are light by default */
    .section-dark .sub-card {
        background: rgb(255 255 255 / 4%);
        border-color: rgb(255 255 255 / 10%);
    }

    .section-dark .sub-card:hover {
        background: rgb(255 255 255 / 6%);
        border-color: rgb(127 227 255 / 30%);
    }

    .section-dark .sub-card p { color: var(--wb-muted-dark); }
    .section-dark .sub-card h3 i { color: var(--wb-cyan-light); }

    .section-dark .cta-inline {
        background: rgb(255 255 255 / 5%);
        border-color: rgb(127 227 255 / 24%);
    }

    .section-dark .cta-inline p { color: var(--wb-muted-dark); }

    .section-dark .plan-card .plan-meta { color: var(--wb-muted-dark); }

    .section-dark .plan-card-featured {
        background: linear-gradient(var(--wb-ink-2), var(--wb-ink-2)) padding-box, var(--wb-gradient) border-box;
    }

    .section-dark .compare-wrap {
        background: rgb(255 255 255 / 3%);
        border-color: rgb(255 255 255 / 10%);
        box-shadow: none;
    }

    .section-dark .compare-table th,
    .section-dark .compare-table td { border-bottom-color: rgb(255 255 255 / 10%); }

    .section-dark .compare-table thead th {
        color: #f8fafc;
        background: rgb(255 255 255 / 5%);
    }

    .section-dark .compare-table td,
    .section-dark .compare-table tbody th { color: var(--wb-muted-dark); }

    .section-dark .engine-list li {
        color: #e6eefb;
        background: rgb(255 255 255 / 5%);
        border-color: rgb(255 255 255 / 14%);
        box-shadow: none;
    }

    .section-dark .engine-list i { color: var(--wb-cyan-light); }

    /* the error page's developer note heads its sub-card with an h2 */
    .sub-card > h2 {
        display: flex;
        gap: .625rem;
        align-items: flex-start;
        margin-bottom: .75rem;
        font-size: 1.125rem;
        font-weight: 650;
        letter-spacing: -.01em;
    }

    .sub-card > h2 i {
        font-size: 1.125rem;
        line-height: 1.25;
        color: var(--wb-blue-core);
    }

    /* timeline phases on tablets: deliverables sit under the copy, not under the step number */
    @media (576px <= width < 1024px) {
        .phase > .phase-side { grid-column: 2; }
    }

    /* =============================================================
       Review-pass refinements
       ============================================================= */

    /* home pillar cards: blurbs of different lengths still line up the link lists */
    @media (width >= 1280px) {
        .feature-card > p:has(+ .pillar-links) { min-height: 5lh; }
    }

    /* block heads in dark sections keep the solid gradient tile */
    .section-dark .block-head .icon-tile-solid {
        color: #fff;
        background: var(--wb-gradient);
        border-color: transparent;
        box-shadow: 0 12px 24px -12px rgb(11 99 246 / 70%);
    }

    /* "challenge" markers stay neutral gray on dark backgrounds too */
    .section-dark .mini-list.is-problem li::before { color: #94a3b8; }

    /* small hero badges sit inside the photo on phones */
    @media (width < 576px) {
        .hero-visual-sm .float-card-a { top: .75rem; left: .75rem; }
    }

    /* comparison tables stack into labeled rows on phones (cells carry data-label) */
    @media (width < 768px) {
        .compare-stack { overflow: visible; }

        .compare-stack .compare-table,
        .compare-stack .compare-table tbody,
        .compare-stack .compare-table tr,
        .compare-stack .compare-table th,
        .compare-stack .compare-table td {
            display: block;
            width: auto;
            min-width: 0;
        }

        .compare-stack .compare-table thead {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        .compare-stack .compare-table tr {
            padding-block: .75rem;
            border-bottom: 1px solid var(--wb-border);
        }

        .compare-stack .compare-table tr:last-child { border-bottom: 0; }

        .compare-stack .compare-table tbody th,
        .compare-stack .compare-table td {
            padding: .375rem 1.25rem;
            border-bottom: 0;
        }

        .compare-stack .compare-table td::before {
            content: attr(data-label);
            display: block;
            font-family: var(--wb-font-display);
            font-size: .8125rem;
            font-weight: 650;
            color: var(--wb-text);
        }

        .compare-stack .compare-table td.is-focus {
            margin-inline: .5rem;
            padding-inline: .75rem;
            border-radius: var(--wb-radius-sm);
        }

        .section-dark .compare-stack .compare-table tr { border-bottom-color: rgb(255 255 255 / 10%); }
        .section-dark .compare-stack .compare-table td::before { color: #f8fafc; }
    }

    /* featured plan flag rides the card's top border, so its content lines up with the neighbors */
    .plan-card-featured > .plan-flag {
        position: absolute;
        top: 0;
        left: clamp(1.5rem, 1.25rem + .75vw, 2rem);
        margin: 0;
        transform: translateY(-50%);
    }

    /* process timeline: "you provide / you get" labels stack in every phase */
    .phase-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    @media (width < 768px) {
        .phase-meta .tag {
            border-radius: .625rem;
            line-height: 1.35;
            text-wrap: balance;
        }
    }

    @media (width < 576px) {
        /* deliverables read as plain check rows inside the already boxed phase card */
        .phase .offer-list { gap: .5rem; }

        .phase .offer-list li {
            padding: 0;
            background: none;
            border: 0;
        }

        /* tag rows fill each line instead of leaving a lone pill */
        .card-foot > a.tag,
        .tag-fill > .tag {
            flex: 1 1 auto;
            justify-content: center;
        }
    }

    /* list items and FAQ questions avoid one-word last lines, as paragraphs already do */
    .mini-list li,
    .check-list li,
    .offer-list li,
    .faq .accordion-header { text-wrap: pretty; }

    .compare-table tbody th { text-wrap: balance; }
    .feature-card > .step-number { align-self: flex-start; }

    /* jump nav fades at both edges while it scrolls */
    @media (width < 1280px) {
        .jump-nav ul {
            margin-inline-start: -1rem;
            padding-inline-start: 1rem;
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 2.5rem), transparent);
        }
    }

    /* contact page, desktop: the map grows so the details column ends level with the form card */
    @media (width >= 1024px) {
        .contact-main .lg\:col-5:has(.map-frame) {
            display: flex;
            flex-direction: column;
        }

        .contact-main .lg\:col-5:has(.map-frame) > .row {
            flex: 1 1 auto;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .contact-main .lg\:col-5:has(.map-frame) > .row > :has(> .map-frame) {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
        }

        .contact-main .map-frame {
            flex: 1 1 auto;
            height: auto;
            min-height: 20rem;
        }

        .contact-main .map-frame + .link-arrow { align-self: flex-start; }
    }

    /* links inside call-to-action boxes are underlined, not marked by color alone */
    .cta-inline p a {
        color: var(--wb-blue-deep);
        text-decoration: underline;
        text-underline-offset: .2em;
    }

    .section-dark .cta-inline p a { color: var(--wb-cyan-light); }

    .legal-content .summary-box p { text-wrap: pretty; }

    /* phone numbers never break mid-number */
    a[href^="tel:"] { white-space: nowrap; }
}