/*!
 * Aminul Consulting — public site styles (hand-authored, no build step).
 * Brand values (--brand, --navy, fonts) are printed from Site Settings in <head>;
 * every tint and shade below is derived from them. PRD §2.
 */
@layer base, components, sections, utilities;

/* ------------------------------------------------------------------ tokens */
:root {
    /* Fallbacks; the layout overrides --brand/--navy/fonts from settings. */
    --brand: #E85624;
    --navy: #152630;

    --brand-600: #BA451D;
    --brand-700: #A23C19;
    --brand-300: #ED7850;
    --brand-100: #FDEEE9;
    --brand-050: #FEF7F4;
    --navy-900: #0F1B22;
    --navy-700: #38474F;

    --ink: var(--navy);
    --ink-muted: #5B6B77;
    --on-dark: #FFFFFF;
    --on-dark-muted: #C9D1D7;
    --line: #E6EAED;
    --field-border: #B9C3CA;
    --mist: #F5F7F9;
    --white: #FFFFFF;
    --success: #1E7F4F;
    --danger: #B42318;
    --warning: #8A5A00;
    --info: #1D5E8C;
    --danger-on-dark: #FFA69C;
    --success-on-dark: #8FDDB2;

    --font-fallback: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Plus Jakarta Sans", var(--font-fallback);
    --font-body: "Inter", var(--font-fallback);

    --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
    --fs-h1: clamp(2.125rem, 1.55rem + 2.4vw, 3.25rem);
    --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    --fs-h3: clamp(1.375rem, 1.2rem + .75vw, 1.75rem);
    --fs-h4: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
    --fs-body: clamp(1rem, .97rem + .12vw, 1.0625rem);
    --fs-small: .875rem;
    --fs-eyebrow: .8125rem;

    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

    --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;
    --sh-1: 0 1px 2px rgb(21 38 48 / .06), 0 1px 3px rgb(21 38 48 / .08);
    --sh-2: 0 8px 24px rgb(21 38 48 / .10);
    --sh-3: 0 20px 48px rgb(21 38 48 / .16);

    --container: 1200px;
    --gutter: 16px;
    --section-y: var(--s-8);
    --header-h: 72px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --brand-600: color-mix(in srgb, var(--brand) 80%, #000);
        --brand-700: color-mix(in srgb, var(--brand) 70%, #000);
        --brand-300: color-mix(in srgb, var(--brand) 80%, #fff);
        --brand-100: color-mix(in srgb, var(--brand) 11%, #fff);
        --brand-050: color-mix(in srgb, var(--brand) 4%, #fff);
        --navy-900: color-mix(in srgb, var(--navy) 72%, #000);
        --navy-700: color-mix(in srgb, var(--navy) 82%, #fff);
    }
}

@media (min-width: 768px) {
    :root { --gutter: 24px; --section-y: var(--s-9); }
}

@media (min-width: 1200px) {
    :root { --gutter: 32px; --section-y: var(--s-10); --header-h: 84px; }
}

/* -------------------------------------------------------------------- base */
@layer base {
    *, *::before, *::after { box-sizing: border-box; }
    /* `hidden` wins over component display rules (important in the first layer beats later layers). */
    [hidden] { display: none !important; }

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

    body {
        margin: 0;
        font-family: var(--font-body);
        font-size: var(--fs-body);
        line-height: 1.65;
        color: var(--ink);
        background: var(--white);
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4 {
        margin: 0 0 var(--s-4);
        font-family: var(--font-heading);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -.015em;
        color: inherit;
    }

    h1 { font-size: var(--fs-h1); }
    h2 { font-size: var(--fs-h2); }
    h3 { font-size: var(--fs-h3); font-weight: 600; }
    h4 { font-size: var(--fs-h4); font-weight: 600; }

    p { margin: 0 0 var(--s-4); max-width: 68ch; }

    a {
        color: var(--brand-600);
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    a:hover { color: var(--brand-700); text-decoration-thickness: 2px; }

    img, svg { display: block; max-width: 100%; }
    img { height: auto; }

    address { font-style: normal; }

    ul[role="list"] { list-style: none; margin: 0; padding: 0; }

    :focus-visible {
        outline: 3px solid var(--brand-300);
        outline-offset: 2px;
        border-radius: 4px;
    }

    main:focus { outline: none; }

    ::selection { background: var(--brand-100); color: var(--navy); }
}

/* -------------------------------------------------------------- components */
@layer components {
    .container {
        width: 100%;
        max-width: calc(var(--container) + 2 * var(--gutter));
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .icon {
        width: 1.25em;
        height: 1.25em;
        flex: none;
    }

    .icon--ring { stroke-width: 2; }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--s-2);
        min-height: 48px;
        padding: 0 var(--s-5);
        border: 1.5px solid transparent;
        border-radius: var(--r-pill);
        font: 600 1rem/1.2 var(--font-body);
        text-decoration: none;
        cursor: pointer;
        transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
    }

    .btn:hover { text-decoration: none; }
    .btn:active { transform: translateY(1px); }
    .btn .icon { width: 1.125em; height: 1.125em; transition: transform .15s var(--ease); }
    .btn:hover .icon--arrow-right { transform: translateX(3px); }

    .btn--primary { background: var(--brand-600); color: var(--white); }
    .btn--primary:hover { background: var(--brand-700); color: var(--white); }
    .btn--secondary { background: var(--navy); color: var(--white); }
    .btn--secondary:hover { background: var(--navy-700); color: var(--white); }
    .btn--outline { border-color: var(--navy); color: var(--navy); background: transparent; }
    .btn--outline:hover { background: var(--navy); color: var(--white); }
    .on-dark .btn--outline { border-color: var(--white); color: var(--white); }
    .on-dark .btn--outline:hover { background: var(--white); color: var(--navy); }
    .btn--ghost { padding-inline: 0; min-height: 44px; color: var(--brand-600); }
    .on-dark .btn--ghost { color: var(--brand-300); }
    .btn--sm { min-height: 44px; padding: 0 var(--s-4); font-size: .9375rem; }
    .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

    /* Eyebrow + section heading */
    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        margin: 0 0 var(--s-3);
        font: 600 var(--fs-eyebrow)/1.2 var(--font-body);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--brand-600);
    }

    .eyebrow__mark { width: 18px; height: 18px; color: var(--brand); }
    .on-dark .eyebrow { color: var(--brand-300); }

    .section-heading { margin-bottom: var(--s-7); max-width: 760px; }
    .section-heading--center { margin-inline: auto; text-align: center; }
    .section-heading--center .section-heading__lead { margin-inline: auto; }
    .section-heading__title { margin-bottom: var(--s-3); }
    .section-heading__lead { color: var(--ink-muted); font-size: 1.0625rem; }
    .on-dark .section-heading__lead { color: var(--on-dark-muted); }

    /* Breadcrumb */
    .breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-1) var(--s-2);
        margin: 0 0 var(--s-5);
        padding: 0;
        list-style: none;
        font-size: var(--fs-small);
    }

    .breadcrumb li { display: inline-flex; align-items: center; gap: var(--s-2); }
    .breadcrumb a { color: inherit; }
    .breadcrumb [aria-current] { color: var(--ink-muted); }
    .on-dark .breadcrumb [aria-current] { color: var(--on-dark-muted); }
    .breadcrumb__sep { width: 14px; height: 14px; opacity: .6; }

    /* Dark scope */
    .on-dark { background: var(--navy); color: var(--on-dark); }
    .on-dark a:not(.btn) { color: var(--on-dark); }
    .on-dark a:not(.btn):hover { color: var(--brand-300); }
}

/* ------------------------------------------------------------ site chrome */
@layer sections {
    /* Skip link */
    .skip-link {
        position: absolute;
        top: var(--s-2);
        left: var(--s-2);
        z-index: 100;
        padding: var(--s-3) var(--s-4);
        border-radius: var(--r-sm);
        background: var(--navy);
        color: var(--white);
        font-weight: 600;
        transform: translateY(-150%);
        transition: transform .15s var(--ease);
    }

    .skip-link:focus { transform: none; color: var(--white); }

    /* Header */
    .site-header {
        position: relative;
        z-index: 50;
        background: var(--white);
        border-bottom: 1px solid var(--line);
    }

    .site-header--sticky { position: sticky; top: 0; }
    .site-header.is-scrolled { box-shadow: var(--sh-2); }

    .topbar {
        background: var(--navy);
        color: var(--on-dark-muted);
        font-size: var(--fs-small);
    }

    .topbar__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-4);
        min-height: 40px;
    }

    .topbar__contact, .topbar__links { display: flex; align-items: center; gap: var(--s-5); }
    .topbar a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; color: var(--on-dark); text-decoration: none; }
    .topbar a:hover { color: var(--brand-300); }
    .topbar .icon { width: 16px; height: 16px; color: var(--brand-300); }
    .topbar__text { display: none; }

    .site-header__inner {
        display: flex;
        align-items: center;
        gap: var(--s-4);
        min-height: var(--header-h);
        transition: min-height .25s var(--ease);
    }

    .site-header.is-scrolled .site-header__inner { min-height: calc(var(--header-h) - 12px); }

    .brand { display: inline-flex; align-items: center; gap: var(--s-3); margin-right: auto; text-decoration: none; }
    .brand__logo { width: auto; height: 56px; }
    .site-header.is-scrolled .brand__logo { height: 46px; }
    .brand__mark { width: 40px; height: auto; }
    .brand__name { font: 700 1.25rem/1.1 var(--font-heading); color: var(--on-dark); letter-spacing: -.01em; }

    .site-header__cta { display: none; }

    /* Navigation — mobile drawer first */
    .nav-toggle {
        display: inline-grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border: 1.5px solid var(--line);
        border-radius: var(--r-pill);
        background: var(--white);
        color: var(--navy);
        cursor: pointer;
    }

    .nav-toggle .icon { width: 24px; height: 24px; grid-area: 1 / 1; }
    .nav-toggle__close, .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
    .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

    .site-nav {
        position: fixed;
        inset: var(--nav-top, var(--header-h)) 0 0 0;
        display: none;
        flex-direction: column;
        gap: var(--s-5);
        padding: var(--s-5) var(--gutter) var(--s-7);
        background: var(--white);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .site-nav.is-open { display: flex; }

    .site-nav__item { position: relative; display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }

    .site-nav__link {
        flex: 1;
        padding: var(--s-4) 0;
        font-weight: 600;
        color: var(--navy);
        text-decoration: none;
    }

    .site-nav__link[aria-current="page"] { color: var(--brand-600); }

    .site-nav__expand {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 0;
        background: none;
        color: var(--navy);
        cursor: pointer;
    }

    .site-nav__expand[aria-expanded="true"] .icon { transform: rotate(180deg); }
    .site-nav__sub { display: none; flex-basis: 100%; padding-bottom: var(--s-3); }
    .site-nav__sub.is-open { display: block; }
    .site-nav__sub a { display: block; padding: var(--s-3) var(--s-4); color: var(--ink); text-decoration: none; border-left: 2px solid var(--line); }
    .site-nav__sub a:hover, .site-nav__sub a[aria-current="page"] { border-left-color: var(--brand); color: var(--brand-600); }
    .site-nav__cta { align-self: flex-start; }

    .site-nav__link { display: inline-flex; align-items: center; gap: var(--s-2); }
    .site-nav__link .icon { width: 18px; height: 18px; color: var(--brand-600); }
    .site-nav__toggle {
        justify-content: space-between;
        border: 0;
        background: none;
        font: inherit;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }

    .site-nav__toggle > .icon:last-child { color: var(--navy); transition: transform .2s var(--ease); }
    .site-nav__toggle[aria-expanded="true"] > .icon:last-child { transform: rotate(180deg); }
    .site-nav__toggle.is-current { color: var(--brand-600); }
    .site-nav__item--button { border-bottom: 0; padding-top: var(--s-4); }

    .site-nav__sub a { display: flex; gap: var(--s-3); align-items: flex-start; }
    .site-nav__sub a .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--brand-600); }
    .menu-link__text { display: flex; flex-direction: column; gap: 2px; }
    .menu-link__title { font-weight: 600; color: var(--navy); }
    .menu-link__desc { font-size: var(--fs-small); color: var(--ink-muted); line-height: 1.45; }

    body.nav-open { overflow: hidden; }

    @media (min-width: 640px) {
        .topbar__text { display: inline; }
    }

    @media (min-width: 992px) {
        .nav-toggle { display: none; }

        .site-nav {
            position: static;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0;
            overflow: visible;
            background: none;
        }

        .site-nav__list { display: flex; align-items: center; gap: var(--s-1); }
        .site-nav__item { border: 0; flex-wrap: nowrap; }
        .site-nav__link { padding: var(--s-3); border-radius: var(--r-sm); position: relative; }
        .site-nav__link::after {
            content: "";
            position: absolute;
            left: var(--s-3);
            right: var(--s-3);
            bottom: 4px;
            height: 2px;
            background: var(--brand);
            transform: scaleX(0);
            transition: transform .25s var(--ease);
        }

        .site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
        .site-nav__link[aria-current="page"] { color: var(--navy); }
        .site-nav__expand { width: 28px; margin-left: calc(-1 * var(--s-1)); }

        .site-nav__sub {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 280px;
            padding: var(--s-2);
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            background: var(--white);
            box-shadow: var(--sh-3);
        }

        /* Hover opens; keyboard opens via the toggle (JS). Esc dismisses both (.is-dismissed). */
        .has-children:not(.is-dismissed):hover .site-nav__sub,
        html:not(.js) .has-children:focus-within .site-nav__sub { display: block; }
        .site-nav__sub a { border-left: 0; border-radius: var(--r-sm); }
        .site-nav__sub a:hover { background: var(--brand-050); }
        .site-nav__cta { display: none; }
        .site-header__cta { display: inline-flex; }

        .site-nav__toggle { padding: var(--s-3); }
        .site-nav__toggle.is-current { color: var(--navy); box-shadow: inset 0 -2px 0 var(--brand); }
        .site-nav__item--button { padding: 0 0 0 var(--s-3); }

        /* Mega panel: full-width grid under the header */
        .has-mega { position: static; }
        .site-nav__mega {
            left: 50%;
            width: min(760px, calc(100vw - 2 * var(--gutter)));
            padding: var(--s-4);
            transform: translateX(-50%);
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--s-1);
        }

        .has-mega:not(.is-dismissed):hover .site-nav__mega,
        html:not(.js) .has-mega:focus-within .site-nav__mega,
        .site-nav__mega.is-open { display: grid; }
        .site-nav__mega a { padding: var(--s-3); }
    }

    /* Error & maintenance pages */
    .error-page {
        position: relative;
        overflow: hidden;
        padding-block: var(--section-y);
        background: var(--mist);
        isolation: isolate;
    }

    .error-page__code {
        margin: 0;
        font: 700 clamp(4rem, 3rem + 6vw, 8rem)/1 var(--font-heading);
        color: var(--brand);
        letter-spacing: -.04em;
    }

    .error-page__message { color: var(--ink-muted); font-size: 1.125rem; }
    .error-page__eta, .error-page a:not(.btn) { display: inline-flex; align-items: center; gap: var(--s-2); }
    .error-page .btn { margin-top: var(--s-4); }

    /* Footer */
    .site-footer { background: var(--navy); }

    .site-footer__grid {
        display: grid;
        gap: var(--s-7);
        padding-block: var(--s-8);
    }

    .site-footer__blurb { color: var(--on-dark-muted); margin-top: var(--s-5); }
    .site-footer__heading {
        margin-bottom: var(--s-4);
        font-size: 1rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--brand-300);
    }

    .site-footer__col li { margin-bottom: var(--s-2); }
    .site-footer a:not(.btn) { text-decoration: none; }
    .site-footer a:not(.btn):hover { text-decoration: underline; }
    .site-footer__contact li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--on-dark-muted); }
    .site-footer__contact .icon { margin-top: .2em; color: var(--brand-300); }

    .social { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
    .social a {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid rgb(255 255 255 / .2);
        border-radius: var(--r-pill);
    }

    .social a:hover { border-color: var(--brand-300); }

    .site-footer__explore ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-2) var(--s-5);
        padding-block: var(--s-5);
        border-top: 1px solid rgb(255 255 255 / .12);
        font-size: var(--fs-small);
    }

    .site-footer__links ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-2) var(--s-6);
        padding-block: var(--s-5);
        border-top: 1px solid rgb(255 255 255 / .12);
        font-weight: 600;
    }

    .site-footer__links + .site-footer__explore ul { border-top: 0; padding-top: 0; }
    .site-footer__links a, .site-footer__explore a, .site-footer__legal a, .topbar__links a { display: inline-flex; align-items: center; min-height: 44px; }
    .topbar__links .icon { width: 14px; height: 14px; }

    .site-footer__bottom { background: var(--navy-900); color: var(--on-dark-muted); font-size: var(--fs-small); }
    .site-footer__bottom-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-3) var(--s-5);
        padding-block: var(--s-5);
    }

    .site-footer__copy { margin: 0; }
    .site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }

    @media (min-width: 768px) {
        .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (min-width: 1100px) {
        /* Brand column, then one equal column per menu column and the contact block. */
        .site-footer__grid { grid-template-columns: 1.4fr; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    }

    /* Floating buttons */
    .fab-whatsapp, .to-top {
        position: fixed;
        right: var(--s-4);
        z-index: 40;
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border-radius: var(--r-pill);
        box-shadow: var(--sh-2);
        text-decoration: none;
    }

    .fab-whatsapp { bottom: var(--s-4); background: var(--navy); color: var(--white); }
    .fab-whatsapp:hover { background: var(--navy-700); color: var(--white); }
    .fab-whatsapp .icon { width: 26px; height: 26px; }

    .to-top {
        bottom: var(--s-4);
        width: 44px;
        height: 44px;
        right: calc(var(--s-4) + 4px);
        background: var(--white);
        color: var(--navy);
        border: 1px solid var(--line);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    }

    .to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
    .fab-whatsapp ~ .to-top { bottom: calc(var(--s-4) + 64px); }

    /* Cookie notice */
    .cookie-notice {
        position: fixed;
        left: var(--s-4);
        right: var(--s-4);
        bottom: var(--s-4);
        z-index: 60;
        display: grid;
        gap: var(--s-4);
        max-width: 560px;
        padding: var(--s-5);
        border-radius: var(--r-md);
        background: var(--white);
        border: 1px solid var(--line);
        box-shadow: var(--sh-3);
        font-size: var(--fs-small);
    }

    .cookie-notice[hidden] { display: none; }
    .cookie-notice__text { margin: 0; }
    .cookie-notice__actions { display: flex; gap: var(--s-3); justify-content: flex-end; }
}

/* ------------------------------------------------- shared content pieces */
@layer components {
    .container--narrow { max-width: calc(760px + 2 * var(--gutter)); }
    .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
    .actions--center { justify-content: center; }

    .prose > :last-child { margin-bottom: 0; }
    .prose h2, .prose h3, .prose h4 { margin-top: var(--s-6); }
    .prose ul, .prose ol { margin: 0 0 var(--s-4); padding-left: 1.25em; }
    .prose li { margin-bottom: var(--s-2); }
    .prose blockquote { margin: 0 0 var(--s-4); padding-left: var(--s-4); border-left: 3px solid var(--brand); }

    .card-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
    .card { position: relative; padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); color: var(--ink); box-shadow: var(--sh-1); transition: box-shadow .15s var(--ease), transform .15s var(--ease); }
    .card:has(.card__link):hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
    .card__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--s-5); border-radius: var(--r-md); background: var(--brand-050); color: var(--brand-600); }
    .card__icon .icon, .card__icon img { width: 28px; height: 28px; }
    .card__title { margin-bottom: var(--s-2); font-size: var(--fs-h4); }
    .card__text { margin: 0; color: var(--ink-muted); }
    .card__link, .on-dark .card__link { color: inherit; text-decoration: none; }
    .card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
    .card__link:hover, .on-dark .card__link:hover { color: var(--brand-600); }
    .on-dark .card { color: var(--ink); }

    .field { width: 100%; min-height: 48px; padding: 0 var(--s-4); border: 1px solid var(--field-border); border-radius: var(--r-sm); background: var(--white); color: var(--ink); font: inherit; }
    .field:focus { border-color: var(--navy); }
    .field[aria-invalid="true"] { border-color: var(--danger); }
    .form-status { min-height: 1.5em; margin: var(--s-2) 0 0; font-size: var(--fs-small); }
    .form-status:empty { margin: 0; }
    .form-status--error { color: var(--danger); font-weight: 600; }
    .form-status--success { color: var(--success); font-weight: 600; }
    .on-dark .form-status--error { color: var(--danger-on-dark); }
    .on-dark .form-status--success { color: var(--success-on-dark); }
    .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
}

/* ---------------------------------------------------------- page sections */
@layer sections {
    .section { position: relative; padding-block: var(--section-y); }
    .section--white { background: var(--white); }
    .section--mist { background: var(--mist); }
    .section--tint { background: var(--brand-050); }
    .section--white + .section--white, .section--mist + .section--mist, .section--tint + .section--tint { padding-top: 0; }

    .hero__ring, .cta-band__ring, .page-header__ring, .error-page__ring { position: absolute; z-index: -1; height: auto; aspect-ratio: 1; color: var(--brand); stroke-width: .5; pointer-events: none; }
    .error-page__ring { right: -12%; top: 50%; width: min(70vw, 620px); opacity: .12; transform: translate(30%, -50%); }

    /* Hero slider */
    .hero { padding: 0; overflow: hidden; background: var(--navy-900); }
    .hero__track { display: grid; }
    .hero__slide { grid-area: 1 / 1; position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(520px, 78vh, 760px); padding-block: var(--s-8) calc(var(--s-8) + 56px); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
    .hero__slide.is-active { opacity: 1; visibility: visible; }
    .hero__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
    .hero__overlay { position: absolute; inset: 0; z-index: -1; background: var(--navy-900); opacity: var(--overlay, .55); }
    .hero__content > * { max-width: 42rem; }
    .hero__title { font-size: var(--fs-display); }
    .hero__text { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: var(--on-dark-muted); }
    .hero__controls { position: absolute; left: 0; right: 0; bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-2); }
    .hero__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--on-dark-muted); border-radius: var(--r-pill); background: transparent; color: var(--white); cursor: pointer; }
    .hero__btn:hover { background: var(--white); color: var(--navy); }
    .hero__toggle { margin-left: auto; }
    .hero__play, .hero__toggle.is-paused .hero__pause { display: none; }
    .hero__toggle.is-paused .hero__play { display: block; }
    .hero__dots { display: flex; }
    .hero__dot { display: grid; place-items: center; width: 36px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
    .hero__dot::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--white); border-radius: var(--r-pill); transition: width .25s var(--ease); }
    .hero__dot[aria-current="true"]::before { width: 26px; border-color: var(--brand); background: var(--brand); }
    html:not(.js) .hero__controls { display: none; }

    /* Page header (inner pages) */
    .page-header { overflow: hidden; isolation: isolate; padding-block: var(--s-8); }
    .page-header__inner--media { display: grid; gap: var(--s-7); align-items: center; }
    .page-header__title { max-width: 20ch; }
    .page-header__lead { font-size: 1.125rem; color: var(--ink-muted); }
    .on-dark .page-header__lead { color: var(--on-dark-muted); }
    .page-header__image { width: 100%; border-radius: var(--r-lg); }
    .page-header__ring { right: -120px; top: -100px; width: 440px; opacity: .35; }

    /* Text + media */
    .split { display: grid; gap: var(--s-7); align-items: center; }
    .split .section-heading { margin-bottom: var(--s-5); }
    .split__media { position: relative; isolation: isolate; margin: 0; padding: 0 var(--s-4) var(--s-4) 0; }
    .split__media::before { content: ""; position: absolute; inset: var(--s-4) 0 0 var(--s-4); z-index: -1; border: 2px solid var(--brand); border-radius: var(--r-lg); }
    .split__image { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-2); }

    /* Process steps: arc markers joined by a dashed line */
    .steps { display: grid; gap: var(--s-6) var(--s-5); }
    .step { position: relative; display: grid; grid-template-columns: 72px 1fr; column-gap: var(--s-4); align-content: start; }
    .step__marker { position: relative; grid-row: span 2; display: grid; place-items: center; width: 72px; height: 72px; color: var(--brand); }
    .step__ring { position: absolute; inset: 0; width: 100%; height: 100%; stroke-width: 1.5; }
    .step__num { font: 700 1.25rem/1 var(--font-heading); color: var(--navy); }
    .on-dark .step__num { color: var(--white); }
    .step__title { align-self: end; margin: var(--s-2) 0 var(--s-2); font-size: var(--fs-h4); }
    .step__text { margin: 0; color: var(--ink-muted); }
    .on-dark .step__text { color: var(--on-dark-muted); }
    .step:not(:last-child)::before { content: ""; position: absolute; left: 35px; top: 80px; bottom: calc(-1 * var(--s-6) + 8px); border-left: 2px dashed var(--brand-300); }

    /* CTA band */
    .cta-band { overflow: hidden; isolation: isolate; }
    .cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); }
    .cta-band__text { max-width: 40rem; }
    .cta-band__title { margin-bottom: var(--s-2); }
    .cta-band__lead { margin: 0; font-size: 1.125rem; color: var(--ink-muted); }
    .on-dark .cta-band__lead { color: var(--on-dark-muted); }
    .cta-band .actions { margin-top: 0; }
    .cta-band__ring { right: -90px; top: 50%; width: 380px; opacity: .6; transform: translateY(-50%); }

    /* Contact strip */
    .contact-strip__list { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
    .contact-strip__item, .on-dark .contact-strip__item { display: flex; align-items: center; gap: var(--s-4); height: 100%; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); color: var(--ink); text-decoration: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
    .contact-strip__item:hover, .on-dark .contact-strip__item:hover { border-color: var(--brand); box-shadow: var(--sh-2); color: var(--ink); }
    .contact-strip__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: var(--r-pill); background: var(--brand); color: var(--white); }
    .contact-strip__label { display: block; font-size: var(--fs-small); color: var(--ink-muted); }
    .contact-strip__value { display: block; font-weight: 600; overflow-wrap: anywhere; }

    /* Client logos */
    .logo-wall { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
    .logo-wall__item { display: grid; place-items: center; min-height: 104px; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); text-align: center; }
    .logo-wall__item a { display: grid; place-items: center; width: 100%; height: 100%; color: inherit; text-decoration: none; }
    .logo-wall__logo { width: auto; max-height: 52px; filter: grayscale(1); opacity: .8; transition: filter .15s var(--ease), opacity .15s var(--ease); }
    .logo-wall__item:hover .logo-wall__logo { filter: none; opacity: 1; }
    .logo-wall__name { font: 700 1.0625rem/1.25 var(--font-heading); color: var(--navy); letter-spacing: -.01em; }

    /* Stats */
    .stats { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); text-align: center; }
    .stat__icon { width: 32px; height: 32px; margin: 0 auto var(--s-3); color: var(--brand-600); }
    .on-dark .stat__icon { color: var(--brand-300); }
    .stat__value { display: block; font: 700 var(--fs-display)/1 var(--font-heading); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
    .stat__suffix { color: var(--brand); }
    .stat__label { display: block; margin-top: var(--s-2); color: var(--ink-muted); }
    .on-dark .stat__label { color: var(--on-dark-muted); }

    /* Testimonials */
    .card-grid--quotes > li { display: flex; }
    .quote { display: flex; flex-direction: column; gap: var(--s-4); width: 100%; margin: 0; }
    .quote__mark { width: 36px; height: 36px; color: var(--brand); }
    .quote__rating { display: flex; gap: 2px; margin: 0; }
    .quote__star { width: 18px; height: 18px; color: var(--field-border); }
    .quote__star.is-on { color: var(--brand); }
    .quote__text { margin: 0; font-size: 1.0625rem; }
    .quote__text p { margin: 0; }
    .quote__author { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); }
    .quote__photo, .quote__initials { flex: none; width: 48px; height: 48px; border-radius: var(--r-pill); object-fit: cover; }
    .quote__initials { display: grid; place-items: center; background: var(--navy); color: var(--white); font-weight: 600; }
    .quote__name { display: block; font-weight: 600; }
    .quote__role { display: block; font-size: var(--fs-small); color: var(--ink-muted); }

    /* Newsletter */
    .newsletter { display: grid; gap: var(--s-6); align-items: center; }
    .newsletter .section-heading { margin-bottom: 0; }
    .newsletter-form__label { display: block; margin-bottom: var(--s-2); font: 600 var(--fs-small)/1.4 var(--font-body); }
    .newsletter-form__row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
    .newsletter-form__row .field { flex: 1 1 220px; width: auto; }
    .site-footer__newsletter { display: grid; gap: var(--s-5); padding-block: var(--s-6); border-top: 1px solid rgb(255 255 255 / .12); }
    .site-footer__newsletter .site-footer__blurb { margin: 0; }

    /* Cards: "Learn more" cue, industry image, empty list message */
    .card__more { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-weight: 600; font-size: var(--fs-small); color: var(--brand-600); }
    .card__more .icon { width: 16px; height: 16px; transition: transform .15s var(--ease); }
    .card:hover .card__more .icon { transform: translateX(3px); }
    .card--has-image { padding-top: 0; overflow: hidden; }
    .card__image { display: block; width: calc(100% + 2 * var(--s-6)); max-width: none; margin: 0 calc(-1 * var(--s-6)) var(--s-5); aspect-ratio: 16 / 10; object-fit: cover; }
    .empty-state { max-width: 40rem; margin: 0; padding: var(--s-6); border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--white); color: var(--ink-muted); }

    /* Detail pages (services, industries) */
    .detail-header__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-block: var(--s-5) var(--s-4); border-radius: var(--r-md); background: var(--brand); color: var(--white); }
    .detail-header__icon .icon { width: 32px; height: 32px; }
    .detail-layout { display: grid; gap: var(--s-8); }
    .detail-main { min-width: 0; }
    .block + .block { margin-top: var(--s-8); }
    .block__title { font-size: var(--fs-h3); margin-bottom: var(--s-4); }
    .block--media { display: grid; gap: var(--s-6); align-items: center; }
    .block__image { width: 100%; border-radius: var(--r-lg); }
    .checklist { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
    .checklist li { display: flex; gap: var(--s-3); align-items: flex-start; }
    .checklist__icon { flex: none; width: 24px; height: 24px; padding: 3px; border-radius: var(--r-pill); background: var(--brand-050); color: var(--brand-600); stroke-width: 2.5; }
    .block--quote { margin-inline: 0; padding: var(--s-6); border-left: 4px solid var(--brand); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--mist); }
    .block__quote { margin: 0; font: 500 var(--fs-h4)/1.5 var(--font-heading); color: var(--navy); }
    .block__quote p { margin: 0; }
    .block__cite { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-muted); }
    .chip-list { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
    .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-5); border: 1.5px solid var(--line); border-radius: var(--r-pill); color: var(--navy); font-weight: 600; text-decoration: none; }
    .chip:hover { border-color: var(--brand); color: var(--brand-600); }
    .link-list { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--mist); }
    .link-list__title { margin-bottom: var(--s-3); font-size: var(--fs-h4); }
    .link-list ul { margin: 0; padding: 0; list-style: none; }
    .link-list__link { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
    .link-list li:last-child .link-list__link { border-bottom: 0; }
    .link-list__link:hover { color: var(--brand-600); }
    .link-list__icon { flex: none; width: 20px; height: 20px; color: var(--brand-600); }
    .link-list__arrow { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--ink-muted); }

    /* FAQ accordion (native <details>) */
    .faq-list { display: grid; gap: var(--s-3); }
    .faq { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
    .faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; padding: var(--s-4) var(--s-5); cursor: pointer; font: 600 1.0625rem/1.4 var(--font-heading); color: var(--navy); list-style: none; }
    .faq__question::-webkit-details-marker { display: none; }
    .faq__icon { flex: none; width: 20px; height: 20px; color: var(--brand-600); transition: transform .2s var(--ease); }
    .faq[open] .faq__icon { transform: rotate(180deg); }
    .faq__answer { padding: 0 var(--s-5) var(--s-5); color: var(--ink-muted); }

    /* Mission, vision & values */
    .mvv__statements { display: grid; gap: var(--s-5); }
    .mvv__statement { position: relative; overflow: hidden; padding: var(--s-6); border-radius: var(--r-lg); background: var(--navy); color: var(--on-dark); }
    .mvv__statement::after { content: ""; position: absolute; right: -56px; top: -56px; width: 150px; aspect-ratio: 1; border: 2px solid var(--brand); border-radius: 50%; opacity: .5; }
    .mvv__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--s-4); border-radius: var(--r-md); background: var(--brand); color: var(--white); }
    .mvv__title { margin-bottom: var(--s-3); color: var(--white); font-size: var(--fs-h4); }
    .mvv__text { position: relative; margin: 0; font-size: 1.125rem; color: var(--on-dark-muted); }
    .mvv__values { margin-top: var(--s-8); }
    .mvv__statements + .mvv__values { margin-top: var(--s-8); }
    .mvv__values:first-child { margin-top: 0; }
    .mvv__values-title { margin-bottom: var(--s-5); font-size: var(--fs-h3); }
    .card-grid--values { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
    .card--value { padding: var(--s-5); }

    /* Timeline: a dashed line with a dot per milestone; the year sits beside the text on wide screens */
    .timeline { position: relative; display: grid; gap: var(--s-5); max-width: 860px; margin: 0 auto; padding: 0 0 0 var(--s-7); list-style: none; }
    .timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; border-left: 2px dashed var(--brand-300); }
    .timeline__item { position: relative; }
    .timeline__dot { position: absolute; left: calc(-1 * var(--s-7) + 2px); top: var(--s-5); width: 20px; height: 20px; border: 4px solid var(--brand); border-radius: 50%; background: var(--white); }
    .timeline__card { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); box-shadow: var(--sh-1); }
    .timeline__year { margin: 0 0 var(--s-1); font: 700 var(--fs-h4)/1.2 var(--font-heading); color: var(--brand-600); }
    .timeline__title { margin-bottom: var(--s-2); font-size: 1.125rem; }
    .timeline__text { margin: 0; color: var(--ink-muted); }

    /* Team */
    .team-group + .team-group { margin-top: var(--s-8); }
    .team-group__title { margin-bottom: var(--s-5); font-size: var(--fs-h3); }
    .team-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
    .team-card { display: flex; flex-direction: column; padding: var(--s-5); text-align: center; }
    .team-card__media { position: relative; width: min(100%, 160px); margin: 0 auto var(--s-4); aspect-ratio: 1; }
    .team-grid--lead .team-card__media { width: min(100%, 200px); }
    .team-card__media::before { content: ""; position: absolute; inset: -6px; border: 2px solid var(--brand); border-radius: 50%; clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%); }
    .team-card__photo, .team-card__initials { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
    .team-card__initials { display: grid; place-items: center; background: var(--navy); color: var(--white); font: 700 clamp(2rem, 1.6rem + 1.5vw, 2.75rem)/1 var(--font-heading); letter-spacing: .02em; }
    .team-card__name { margin-bottom: var(--s-1); font-size: 1.1875rem; }
    .team-card__role { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--brand-600); }
    .team-card__bio { margin: var(--s-3) 0 0; font-size: var(--fs-small); color: var(--ink-muted); }
    .team-card__links { display: flex; justify-content: center; gap: var(--s-2); margin: auto 0 0; padding: var(--s-4) 0 0; list-style: none; }
    .team-card__link { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: var(--r-pill); color: var(--navy); }
    .team-card__link:hover { border-color: var(--brand); color: var(--brand-600); }
    .team-card__link .icon { width: 20px; height: 20px; }

    /* Certifications & partners */
    .card-grid--credentials { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
    .credential { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5); }
    .credential__mark { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: var(--r-md); background: var(--brand-050); color: var(--brand-600); }
    .credential__mark .icon { width: 30px; height: 30px; }
    .credential__logo { max-width: 52px; max-height: 52px; object-fit: contain; }
    .credential__tag { margin: 0 0 var(--s-1); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
    .credential__name { margin-bottom: var(--s-2); font-size: 1.125rem; }

    @media (min-width: 992px) {
        .page-header__inner--media { grid-template-columns: 1.2fr 1fr; }
        .detail-layout--aside { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
        .detail-aside { position: sticky; top: calc(var(--header-h, 80px) + var(--s-5)); }
        .block--media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .block--media-left .block__image { order: -1; }
        .split--media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .split--intro.split--media { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
        .split--image-left .split__media { order: -1; }
        .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
        .step { display: block; }
        .step__marker { margin-bottom: var(--s-4); }
        .step:not(:last-child)::before { left: 84px; right: 0; top: 36px; bottom: auto; border-left: 0; border-top: 2px dashed var(--brand-300); }
        .step:nth-child(3n)::before { display: none; }
        .newsletter, .site-footer__newsletter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .mvv__statements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .timeline__card { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: var(--s-5); }
        .timeline__year { grid-row: span 2; }
    }
}

/* ------------------------------------------- case studies & insights (M5) */
@layer sections {
    /* Media cards: cover on top, body below; the whole card is one link. */
    .card--story, .card--post { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; }
    .card__media { position: relative; }
    .card__cover { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--navy); }
    .card__cover--blank { display: grid; place-items: center; color: var(--brand); }
    .card__cover--blank .icon { width: 64px; height: 64px; opacity: .8; }
    .card__metric { display: flex; align-items: baseline; gap: var(--s-2); position: absolute; left: var(--s-4); bottom: var(--s-4); max-width: calc(100% - 2 * var(--s-4)); margin: 0; padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); background: var(--navy); color: var(--white); line-height: 1.3; }
    .card__metric strong { flex: none; font: 700 1.5rem/1 var(--font-heading); color: var(--brand-300); }
    .card__metric span { font-size: var(--fs-small); }
    .card__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-5) var(--s-5) var(--s-6); }
    .card__body .card__more { margin-top: auto; padding-top: var(--s-4); }
    .card__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: 0 0 var(--s-3); font-size: var(--fs-small); color: var(--ink-muted); }
    .card__meta > span + span::before { content: "·"; margin-right: var(--s-3); }
    .card__meta > .card__badge + span::before, .card__meta > .card__category + span::before { content: none; margin: 0; }
    .card__badge, .card__category { padding: 0 var(--s-2); border-radius: var(--r-sm); font-weight: 600; }
    .card__badge { background: var(--brand-600); color: var(--white); }
    .card__category { background: var(--brand-050); color: var(--brand-700); }
    .card-grid--stories, .card-grid--posts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
    .card-grid--stories > li, .card-grid--posts > li { display: flex; }

    /* Lists: filters, search, pagination */
    .listing { padding-top: var(--s-7); }
    .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); margin-bottom: var(--s-7); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--mist); }
    .filters__field { flex: 1 1 220px; }
    .filters__label, .search__label { display: block; margin-bottom: var(--s-2); font: 600 var(--fs-small)/1.4 var(--font-body); }
    .filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
    .filters__reset { font-weight: 600; color: var(--brand-600); }
    .search { margin-bottom: var(--s-6); }
    .search__row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
    .search__input { flex: 1 1 240px; width: auto; }
    .search .btn .icon { width: 18px; height: 18px; }
    .listing__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
    .listing__title { margin: 0; font-size: var(--fs-h3); }
    .pagination { margin-top: var(--s-7); }
    .pagination__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
    .pagination__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-width: 44px; min-height: 44px; padding: 0 var(--s-3); border: 1.5px solid var(--line); border-radius: var(--r-pill); color: var(--navy); font-weight: 600; text-decoration: none; }
    .pagination__link .icon { width: 16px; height: 16px; }
    a.pagination__link:hover { border-color: var(--brand); color: var(--brand-600); }
    .pagination__link.is-current { border-color: var(--navy); background: var(--navy); color: var(--white); }
    .pagination__gap { align-self: center; padding: 0 var(--s-1); color: var(--ink-muted); }

    /* Insights layout: list + categories/tags */
    .insights-layout { display: grid; gap: var(--s-7); }
    .insights-main { min-width: 0; }
    .post-featured { margin-bottom: var(--s-6); }
    .taxonomy + .taxonomy { margin-top: var(--s-6); }
    .taxonomy__title { margin-bottom: var(--s-3); font-size: var(--fs-h4); }
    .taxonomy__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
    .taxonomy__link { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
    .taxonomy__link:hover, .taxonomy__link[aria-current] { color: var(--brand-600); }
    .taxonomy__link[aria-current] { font-weight: 600; }
    .taxonomy__count { min-width: 2em; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--mist); font-size: var(--fs-small); text-align: center; color: var(--ink-muted); }
    .tag-cloud { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
    .tag-cloud__link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-small); color: var(--navy); text-decoration: none; }
    .tag-cloud__link:hover, .tag-cloud__link[aria-current] { border-color: var(--brand); color: var(--brand-600); }

    /* Case study page */
    .facts { margin: 0; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--mist); }
    .facts__row + .facts__row { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
    .facts dt { margin-bottom: var(--s-1); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
    .facts dd { margin: 0; font-weight: 600; }
    .facts__logo { display: block; max-width: 120px; max-height: 48px; margin-bottom: var(--s-2); object-fit: contain; }
    .facts__list { margin: 0; padding: 0; list-style: none; }
    .facts__list li + li { margin-top: var(--s-1); }
    .metrics { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 0 0 var(--s-6); padding: 0; list-style: none; }
    .metrics__item { padding: var(--s-5) 0 0; border-top: 3px solid var(--brand); }
    .metrics__value { display: block; font: 700 var(--fs-display)/1 var(--font-heading); color: var(--white); }
    .metrics__label { display: block; margin-top: var(--s-2); color: var(--on-dark-muted); }
    .results__text { color: var(--on-dark-muted); }
    .quote--feature { align-items: flex-start; }
    .quote--feature .quote__text { font: 500 var(--fs-h4)/1.5 var(--font-heading); color: var(--navy); }
    .gallery { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin: 0; padding: 0; list-style: none; }
    .gallery__image { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r-md); object-fit: cover; }

    /* Article */
    .article__header { padding-bottom: var(--s-8); }
    .article__category { display: inline-block; margin: var(--s-5) 0 var(--s-3); padding: var(--s-1) var(--s-3); border-radius: var(--r-sm); background: var(--brand-600); color: var(--white); font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
    a.article__category:hover { background: var(--brand-700); color: var(--white); }
    .article__title { max-width: none; }
    .article__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: var(--s-4) 0 0; color: var(--on-dark-muted); font-size: var(--fs-small); }
    .article__meta > span + span::before { content: "·"; margin-right: var(--s-3); }
    .article__body { padding-top: var(--s-7); }
    .article__cover { display: block; width: 100%; margin-bottom: var(--s-7); border-radius: var(--r-lg); aspect-ratio: 16 / 10; object-fit: cover; }
    .article__content { font-size: 1.0625rem; }
    .article__content h2 { font-size: var(--fs-h3); }
    .article__content h3 { font-size: var(--fs-h4); }
    .article__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
    .article__tags-label { margin: 0; font-weight: 600; }
    .share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
    .share__title { margin: 0; font-weight: 600; }
    .share__list { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
    .share__link { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--navy); cursor: pointer; }
    .share__link:hover { border-color: var(--brand); color: var(--brand-600); }
    .share__link .icon { width: 20px; height: 20px; }
    .share__status { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--success); }
    .author-box { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-md); background: var(--mist); }
    .author-box__photo, .author-box__initials { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
    .author-box__initials { display: grid; place-items: center; background: var(--navy); color: var(--white); font: 700 1.25rem/1 var(--font-heading); }
    .author-box__text { margin: 0; }
    .author-box__name { display: block; font-weight: 700; }
    .author-box__role { display: block; font-size: var(--fs-small); color: var(--ink-muted); }

    @media (min-width: 768px) {
        .post-featured { flex-direction: row; }
        .post-featured .card__media { flex: 0 0 55%; }
        .post-featured .card__cover { height: 100%; }
        .post-featured .card__body { padding: var(--s-6); }
        .post-featured .card__title { font-size: var(--fs-h3); }
    }

    @media (min-width: 992px) {
        .insights-layout { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
        .insights-aside { position: sticky; top: calc(var(--header-h, 80px) + var(--s-5)); }
    }
}

/* ------------------------------------------- M6: forms, careers, contact, FAQ */
@layer sections {
    /* Form building blocks */
    .lead-form__note { margin: 0 0 var(--s-5); font-size: var(--fs-small); color: var(--ink-muted); }
    .form-grid { display: grid; gap: var(--s-5); }
    .form-field { display: grid; gap: var(--s-2); align-content: start; }
    .form-field__label { font-weight: 600; }
    .form-field__req { margin-left: 2px; color: var(--danger); }
    .form-field__opt { font-weight: 400; font-size: var(--fs-small); color: var(--ink-muted); }
    .form-field__help { margin: 0; font-size: var(--fs-small); color: var(--ink-muted); }
    .form-field__error { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--danger); }
    .form-field__error:empty { display: none; }
    .field--area { min-height: 0; padding-block: var(--s-3); line-height: 1.5; resize: vertical; }
    .field--file { padding: var(--s-3); }
    select.field { padding-right: var(--s-6); }
    .form-check { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3); }
    .form-check__input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--brand-600); }
    .form-check__label { flex: 1 1 0; min-width: 0; }
    .form-check .form-field__error { flex-basis: 100%; }
    .form-check__input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
    .lead-form__actions { margin-top: var(--s-6); }
    .lead-form .form-status, .form-status[data-form-status] { margin-bottom: var(--s-4); }

    .form-step { margin: 0 0 var(--s-6); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
    .form-step__legend { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-2); font: 700 var(--fs-h4)/1.3 var(--font-heading); color: var(--navy); }
    .form-step__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-600); color: var(--white); font-size: 1rem; }
    .form-step__intro { margin: 0 0 var(--s-4); }
    .form-step .form-grid + .choice-group, .choice-grid + .form-field__error + .form-grid { margin-top: var(--s-5); }
    .choice-group { margin: var(--s-5) 0 0; padding: 0; border: 0; }
    .choice-group > legend { margin-bottom: var(--s-3); padding: 0; }
    .choice-grid { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
    .choice-grid .form-check { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--mist); }
    .choice-grid .form-check:has(:checked) { border-color: var(--brand-600); background: var(--brand-050); }
    .form-submit { padding: var(--s-6); border-radius: var(--r-md); background: var(--mist); }
    .form-submit__title { margin: 0 0 var(--s-3); font-size: var(--fs-h4); }
    .form-submit__consent { margin: 0 0 var(--s-5); font-size: var(--fs-small); color: var(--ink-muted); }
    .form-submit__note { margin: var(--s-5) 0 0; font-size: var(--fs-small); }
    .consultation__intro { margin: 0 0 var(--s-6); font-size: 1.125rem; }

    .form-success { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-6); border: 1px solid var(--success); border-radius: var(--r-md); background: #F0FAF4; }
    .form-success:focus { outline: 3px solid var(--brand-300); outline-offset: 3px; }
    .form-success__icon { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--success); color: var(--white); }
    .form-success__title { margin: 0; font-size: var(--fs-h4); }
    .form-success__text { margin: 0; }

    /* Contact */
    .contact-layout { display: grid; gap: var(--s-7); }
    .contact-card { padding: var(--s-6); border-radius: var(--r-lg); }
    .contact-card__title { margin: 0 0 var(--s-5); font-size: var(--fs-h4); color: var(--white); }
    .contact-card__list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
    .contact-card__list li { display: flex; gap: var(--s-3); align-items: flex-start; overflow-wrap: anywhere; }
    .contact-card__list address { font-style: normal; }
    .contact-card__icon { flex: none; margin-top: .2em; color: var(--brand-300); }
    .contact-card__social-title { margin: var(--s-6) 0 0; font-weight: 600; }
    .contact-card .social { margin-top: var(--s-3); }

    .office-grid { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
    .office { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
    .office__name { margin: 0; font-size: var(--fs-h4); }
    .office__badge { justify-self: start; margin: 0; padding: 2px var(--s-3); border-radius: var(--r-pill); background: var(--brand-100); color: var(--brand-700); font-size: var(--fs-small); font-weight: 600; }
    .office__details { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
    .office__details li { display: flex; gap: var(--s-3); align-items: flex-start; overflow-wrap: anywhere; }
    .office__details address { font-style: normal; }
    .office__icon { flex: none; margin-top: .2em; color: var(--brand-600); }
    .office__map { margin-top: var(--s-2); }
    .office__frame { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--r-sm); background: var(--mist); }

    /* Careers */
    .job-list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
    .job-card { position: relative; display: grid; gap: var(--s-4); padding: var(--s-5) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); box-shadow: var(--sh-1); transition: box-shadow .15s var(--ease), border-color .15s var(--ease); }
    .job-card:hover { border-color: var(--brand-300); box-shadow: var(--sh-2); }
    .job-card:focus-within { outline: 3px solid var(--brand-300); outline-offset: 2px; }
    .job-card__title { margin: 0 0 var(--s-2); font-size: var(--fs-h4); }
    .job-card__title .card__link:focus-visible { outline: none; }
    .job-card__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-3); padding: 0; list-style: none; font-size: var(--fs-small); color: var(--ink-muted); }
    .job-card__meta li { display: inline-flex; align-items: center; gap: var(--s-2); }
    .job-card__icon { color: var(--brand-600); }
    .job-card__summary { margin: 0; }
    .job-card__more { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--brand-600); }
    .jobs-mail { margin: var(--s-6) 0 0; font-weight: 600; }
    .notice { margin: 0 0 var(--s-6); padding: var(--s-4) var(--s-5); border-left: 4px solid var(--warning); border-radius: var(--r-sm); background: #FFF8E6; }

    /* FAQ */
    .faq-search { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); }
    .faq-group + .faq-group { margin-top: var(--s-7); }
    .faq-group__title { margin: 0 0 var(--s-4); font-size: var(--fs-h4); }

    @media (min-width: 640px) {
        .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .form-field--wide, .form-grid > .form-field:has(textarea) { grid-column: 1 / -1; }
        .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .choice-grid--inline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .office-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .form-step { padding: var(--s-6); }
    }

    @media (min-width: 768px) {
        .job-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    }

    @media (min-width: 992px) {
        .contact-layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
        .contact-layout__aside { position: sticky; top: calc(var(--header-h, 80px) + var(--s-5)); }
        .office-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
}

/* ------------------------------------------- M7: custom & legal pages, clients */
@layer sections {
    .preview-banner { margin: 0; padding: var(--s-3) var(--gutter); background: var(--brand-100); color: var(--navy); font-size: var(--fs-small); font-weight: 600; text-align: center; }
    .page-body__updated { margin: 0 0 var(--s-5); font-size: var(--fs-small); color: var(--ink-muted); }
    .page-layout { display: grid; gap: var(--s-7); }
    .page-body__main { min-width: 0; max-width: 760px; }
    .page-body .prose h2 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); scroll-margin-top: calc(var(--header-h, 80px) + var(--s-4)); }
    .page-body .prose h3 { font-size: 1.25rem; }
    .toc { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--mist); }
    .toc__title { margin: 0 0 var(--s-3); font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
    .toc__list { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
    .toc__list a { color: var(--ink); text-decoration: none; }
    .toc__list a:hover, .toc__list a:focus-visible { color: var(--brand-600); text-decoration: underline; }

    .client-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin: 0; padding: 0; list-style: none; }
    .client-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); color: var(--ink); box-shadow: var(--sh-1); }
    .client-card__logo { display: grid; place-items: center start; min-height: 64px; margin-bottom: var(--s-2); }
    .client-card__image { width: auto; max-height: 56px; }
    .client-card__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--brand-050); color: var(--brand-600); font: 700 1.25rem/1 var(--font-heading); }
    .client-card__name { margin: 0; font-size: 1.125rem; }
    .client-card__name a { color: var(--navy); }
    .client-card__industry { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--brand-600); }
    .client-card__text { margin: 0; font-size: var(--fs-small); color: var(--ink-muted); }

    @media (min-width: 992px) {
        .page-layout { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
        .toc { position: sticky; top: calc(var(--header-h, 80px) + var(--s-5)); }
    }
}

/* --------------------------------------------------------------- utilities */
@layer utilities {
    .sr-only {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
    .js [data-reveal].is-revealed { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
}