/* ================================================================
   Inari Solutions - Aurora Atmospheric
   ================================================================ */

:root {
    /* ---- Brand palette (closed) ---- */
    --inari-orange:    #DC9852;
    --inari-black:     #2F2B36;
    --inari-purple:    #805E88;
    --inari-coral:     #D6776B;
    --inari-slate:     #4D5677;
    --inari-raspberry: #B46582;
    --inari-gray:      #D9D9D9;

    /* ---- Canvas (warm cream - documented exception) ---- */
    --inari-cream:      #F2F0EA;
    --inari-cream-deep: #EAE6DD;

    /* ---- Ink hierarchy (rgba derived from inari-black) ---- */
    --inari-ink:       var(--inari-black);
    --inari-ink-soft:  rgba(47, 43, 54, 0.78);
    --inari-ink-muted: rgba(47, 43, 54, 0.55);
    --inari-hairline:  rgba(47, 43, 54, 0.08);

    /* ---- Glass surfaces ---- */
    --inari-glass:        rgba(255, 255, 255, 0.55);
    --inari-glass-strong: rgba(255, 255, 255, 0.78);
    --inari-glass-soft:   rgba(255, 255, 255, 0.35);

    /* ---- Typography ---- */
    --font-display-family: 'Boska', 'Bricolage Grotesque', Georgia, serif;
    --font-body:           'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;

    --font-display: clamp(3.25rem, 7.5vw, 6.5rem);
    --font-h1:      clamp(2.5rem, 5.5vw, 4.25rem);
    --font-h2:      clamp(2.25rem, 5vw, 3.75rem);
    --font-h3:      clamp(1.5rem, 2.5vw, 2rem);
    --font-lead:    clamp(1.125rem, 1.4vw, 1.375rem);
    --font-body-size: 1rem;
    --font-small:   0.875rem;
    --font-micro:   0.75rem;

    /* ---- Spacing (8px grid) ---- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;
    --space-10: 128px;
    --space-11: 160px;
    --space-12: 200px;

    /* ---- Radius ---- */
    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   22px;
    --radius-xl:   32px;
    --radius-pill: 9999px;

    /* ---- Shadows (soft on cream, derived from inari-black) ---- */
    --shadow-sm:   0 1px 2px rgba(47, 43, 54, 0.04), 0 1px 1px rgba(47, 43, 54, 0.03);
    --shadow-md:   0 6px 18px -8px rgba(47, 43, 54, 0.10), 0 2px 4px rgba(47, 43, 54, 0.04);
    --shadow-lg:   0 24px 60px -28px rgba(47, 43, 54, 0.18), 0 4px 12px rgba(47, 43, 54, 0.05);
    --shadow-glow: 0 24px 60px -20px var(--phase-tone, var(--inari-orange));

    /* ---- Motion ---- */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-glide:  cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast:      200ms var(--ease-out);
    --t-base:      360ms var(--ease-out);
    --t-slow:      720ms var(--ease-glide);

    /* ---- Layout ---- */
    --container-max: 1240px;
    --nav-height:    72px;
}

/* ================================================================
   Fonts (Fontshare)
   ================================================================ */
@import url('https://api.fontshare.com/v2/css?f[]=boska@500,600,700,400&f[]=satoshi@400,500,700,900&display=swap');

/* ================================================================
   Phase tone tokens (single source of truth - applied wherever
   `data-tone="academy|products|agentic"` is set on an element)
   ================================================================ */
[data-tone="academy"]  { --phase-tone: var(--inari-orange); }
[data-tone="products"] { --phase-tone: var(--inari-raspberry); }
[data-tone="agentic"]  { --phase-tone: var(--inari-purple); }

/* ================================================================
   Reset & Base
   ================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--inari-ink);
    background: var(--inari-cream);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

::selection { background: var(--inari-orange); color: var(--inari-black); }

/* Global focus ring - inside a [data-tone] scope the phase tone overrides */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--phase-tone, var(--inari-orange));
    outline-offset: 3px;
}

/* ================================================================
   Aurora background - full-body animated gradient mesh
   ================================================================ */
.aurora-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background:
        /* Single warm orange wash, top-left */
        radial-gradient(at 16% 18%, rgba(220, 152, 82, 0.13) 0%, transparent 58%),
        /* Subtle ink wash anchors the lower-right corner */
        radial-gradient(at 90% 92%, rgba(47, 43, 54, 0.045) 0%, transparent 62%),
        var(--inari-cream);
    pointer-events: none;
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
}

.aurora-blob.b1 {
    width: 560px; height: 560px;
    background: radial-gradient(circle, var(--inari-orange) 0%, transparent 65%);
    top: -100px; left: -80px;
    opacity: 0.34;
    /* Intentionally static. This blob is position: fixed behind the whole
       page; while it drifted, every backdrop-filter glass surface (nav,
       showcase, cards) and the mix-blend grain had to recompute their
       blur/blend every frame. Holding it still lets them rasterize once
       and cache. The living motion now lives only in the hero particles. */
}
/* b2/b3 retired in Architectural Paper background -
   raspberry/purple no longer appear at page level (phase-scope only). */
.aurora-blob.b2,
.aurora-blob.b3 { display: none; }

@keyframes blobFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-120px, 80px) scale(1.15); }
}
@keyframes blobFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(100px, -60px) scale(1.1); }
    80% { transform: translate(-60px, -120px) scale(0.9); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.aurora-grain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ================================================================
   Layout
   ================================================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.section {
    padding: clamp(3rem, 6vw, 5rem) 0;
    position: relative;
}
@media (min-width: 1025px) {
    .section {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* ================================================================
   Typography - utility classes built on the type token scale
   ================================================================ */
.h-display, .display-xxl {
    font-family: var(--font-display-family);
    font-weight: 500;
    font-size: var(--font-display);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--inari-ink);
}

.h1 {
    font-family: var(--font-display-family);
    font-weight: 500;
    font-size: var(--font-h1);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--inari-ink);
}

.h2, .display-xl {
    font-family: var(--font-display-family);
    font-weight: 500;
    font-size: var(--font-h2);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--inari-ink);
}

/* Section headline - direct sister of .h1 (hero). Identical typography,
   one step down in size (var(--font-h2)). Used as the lead heading
   inside every section below the hero. */
.section-headline {
    font-family: var(--font-display-family);
    font-weight: 500;
    font-size: var(--font-h2);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--inari-ink);
    margin: 0;
}

.h3, .display-lg {
    font-family: var(--font-display-family);
    font-weight: 500;
    font-size: var(--font-h3);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--inari-ink);
}

.lead, .lede {
    font-size: var(--font-lead);
    color: var(--inari-ink-soft);
    line-height: 1.55;
    max-width: 60ch;
}

.small {
    font-size: var(--font-small);
    color: var(--inari-ink-soft);
    line-height: 1.5;
}

.micro {
    font-size: var(--font-micro);
    color: var(--inari-ink-muted);
    letter-spacing: 0.02em;
}

.eyebrow {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.eyebrow::before {
    content: '';
    width: 28px; height: 1px;
    background: var(--inari-orange);
    display: inline-block;
}

.text-gradient {
    background: linear-gradient(120deg, var(--inari-orange) 0%, var(--inari-raspberry) 50%, var(--inari-purple) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.text-italic {
    font-style: italic;
    font-weight: 400;
    color: var(--inari-orange);
}

/* Frontier Firm - editorial explainer popover --------------------------- */

.frontier-wrap {
    position: relative;
    display: inline-block;
}

.frontier-trigger {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: help;
    position: relative;
    border-radius: 4px;
}

.frontier-trigger > .text-italic,
.frontier-trigger > strong {
    text-decoration: underline dotted;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.16em;
    transition: text-decoration-color 220ms var(--ease-out);
}

.frontier-trigger:hover > .text-italic,
.frontier-trigger:focus-visible > .text-italic,
.frontier-trigger:hover > strong,
.frontier-trigger:focus-visible > strong {
    text-decoration-color: currentColor;
}

.frontier-trigger:focus-visible {
    outline: 2px solid var(--inari-orange);
    outline-offset: 4px;
}

.frontier-explainer {
    /* Position + open/close state are owned by JS (initFrontierExplainer).
       JS sets top/left as inline style and toggles .is-open. */
    position: fixed;
    top: -9999px;
    left: 0;
    z-index: 500;

    width: min(420px, calc(100vw - 32px));
    padding: var(--space-5) var(--space-5);

    display: grid;
    gap: var(--space-3);
    text-align: left;
    font-family: 'Satoshi', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-small);
    line-height: 1.55;
    letter-spacing: 0;
    color: var(--inari-ink-soft);

    background: var(--inari-glass-strong);
    backdrop-filter: blur(28px) saturate(1.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    border: 1px solid var(--inari-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);

    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 240ms var(--ease-out),
                transform 280ms var(--ease-out),
                visibility 240ms;
}

.frontier-explainer.is-open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
}

.frontier-explainer-source {
    display: block;
    font-family: 'Satoshi', sans-serif;
    font-size: var(--font-micro);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
}

.frontier-explainer-quote {
    display: block;
    font-family: 'Boska', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--inari-ink);
    padding-left: var(--space-3);
    border-left: 1px solid color-mix(in srgb, var(--inari-orange) 55%, transparent);
}

.frontier-explainer-body {
    display: block;
    font-family: 'Satoshi', sans-serif;
    font-size: var(--font-small);
    line-height: 1.55;
    color: var(--inari-ink-soft);
}

.frontier-explainer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--space-2);
    font-family: 'Satoshi', sans-serif;
    font-size: var(--font-small);
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0;
    color: var(--inari-orange);
    text-decoration: none;
    transition: color 220ms var(--ease-out);
    width: max-content;
    max-width: 100%;
}
.frontier-explainer-link .arrow {
    display: inline-block;
    transition: transform var(--t-fast);
}
.frontier-explainer-link:hover,
.frontier-explainer-link:focus-visible {
    color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
}
.frontier-explainer-link:hover .arrow,
.frontier-explainer-link:focus-visible .arrow {
    transform: translateX(3px);
}
.frontier-explainer-link:focus-visible {
    outline: 2px solid var(--inari-orange);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .frontier-explainer,
    .frontier-explainer.is-open {
        transform: none;
        transition: opacity 160ms linear, visibility 160ms linear;
    }
}

/* ================================================================
   Privacy Policy modal
   ----------------------------------------------------------------
   Built by initPrivacyPolicyModal() in script.js. JS injects the
   shell once, then toggles .is-open. Scroll lock on <html> avoids
   the scrollbar-gutter shift seen when locking <body> on some
   browsers.
   ================================================================ */

html.has-modal-open,
html.has-modal-open body {
    overflow: hidden;
}

.privacy-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 240ms var(--ease-out),
                visibility 240ms;
}

.privacy-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.privacy-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(47, 43, 54, 0.32);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    cursor: pointer;
}

.privacy-modal-dialog {
    position: relative;
    width: min(760px, 92vw);
    max-height: min(82vh, 760px);
    display: flex;
    flex-direction: column;
    background: var(--inari-glass-strong);
    backdrop-filter: blur(28px) saturate(1.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    border: 1px solid var(--inari-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transform: scale(0.98);
    transform-origin: center;
    transition: transform 280ms var(--ease-out);
}

.privacy-modal.is-open .privacy-modal-dialog {
    transform: scale(1);
}

.privacy-modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--inari-hairline);
}

.privacy-modal-title {
    margin: 0;
    font-family: 'Boska', serif;
    font-weight: 500;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--inari-ink);
}

.privacy-modal-close {
    appearance: none;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--inari-hairline);
    border-radius: var(--radius-pill);
    color: var(--inari-ink);
    cursor: pointer;
    transition: background var(--t-fast),
                border-color var(--t-fast),
                transform var(--t-fast),
                color var(--t-fast);
}

.privacy-modal-close::before {
    content: "\00D7";
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1;
}

.privacy-modal-close:hover {
    background: color-mix(in srgb, var(--inari-orange) 12%, transparent);
    border-color: color-mix(in srgb, var(--inari-orange) 50%, var(--inari-hairline));
    color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
    transform: translateY(-1px);
}

.privacy-modal-close:focus-visible {
    outline: 2px solid var(--inari-orange);
    outline-offset: 3px;
}

.privacy-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-6);
    font-family: 'Satoshi', sans-serif;
    font-size: var(--font-body);
    line-height: 1.65;
    color: var(--inari-ink-soft);
    scrollbar-width: thin;
    scrollbar-color: rgba(47, 43, 54, 0.28) transparent;
}

.privacy-modal-body::-webkit-scrollbar {
    width: 8px;
}
.privacy-modal-body::-webkit-scrollbar-track {
    background: transparent;
}
.privacy-modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(47, 43, 54, 0.24);
    border-radius: var(--radius-pill);
}
.privacy-modal-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(47, 43, 54, 0.42);
}

.privacy-modal-body .pp-section + .pp-section {
    margin-top: var(--space-6);
}

.privacy-modal-body h3 {
    margin: 0 0 var(--space-3);
    font-family: 'Boska', serif;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--inari-ink);
}

.privacy-modal-body h4 {
    margin: var(--space-4) 0 var(--space-2);
    font-family: 'Satoshi', sans-serif;
    font-weight: 600;
    font-size: var(--font-small);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
}

.privacy-modal-body p {
    margin: 0 0 var(--space-3);
}

.privacy-modal-body p:last-child {
    margin-bottom: 0;
}

.privacy-modal-body ul {
    margin: var(--space-2) 0 var(--space-3);
    padding-left: var(--space-5);
}

.privacy-modal-body li + li {
    margin-top: var(--space-1);
}

.privacy-modal-body a {
    color: var(--inari-orange);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--inari-orange) 45%, transparent);
    text-underline-offset: 0.18em;
    transition: text-decoration-color var(--t-fast), color var(--t-fast);
}
.privacy-modal-body a:hover,
.privacy-modal-body a:focus-visible {
    color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
    text-decoration-color: currentColor;
}

.privacy-modal-body .pp-divider {
    margin: var(--space-7) 0;
    border: 0;
    border-top: 1px solid var(--inari-hairline);
}

.privacy-modal-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--inari-hairline);
}

.privacy-modal-confirm {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--space-3) var(--space-6);
    font-family: 'Satoshi', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--inari-ink);
    background: linear-gradient(135deg, var(--inari-orange) 0%, var(--inari-coral) 100%);
    border: 0;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform var(--t-fast),
                box-shadow var(--t-fast),
                filter var(--t-fast);
}

.privacy-modal-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 60px -20px var(--inari-orange);
}

.privacy-modal-confirm:active {
    transform: translateY(0);
    filter: brightness(0.94);
}

.privacy-modal-confirm:focus-visible {
    outline: 2px solid var(--inari-orange);
    outline-offset: 3px;
}

@media (max-width: 560px) {
    .privacy-modal {
        padding: var(--space-3);
    }
    .privacy-modal-dialog {
        width: 100%;
        max-height: 90vh;
    }
    .privacy-modal-header,
    .privacy-modal-footer {
        padding: var(--space-4) var(--space-5);
    }
    .privacy-modal-body {
        padding: var(--space-5);
    }
    .privacy-modal-title {
        font-size: 1.375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .privacy-modal,
    .privacy-modal-dialog {
        transition: opacity 160ms linear, visibility 160ms linear;
    }
    .privacy-modal-dialog,
    .privacy-modal.is-open .privacy-modal-dialog {
        transform: none;
    }
    .privacy-modal-close:hover,
    .privacy-modal-confirm:hover {
        transform: none;
    }
}

/* ================================================================
   Buttons
   ================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.95rem 1.6rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius-pill);
    transition: all var(--t-base);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.btn-primary {
    background: var(--inari-black);
    color: var(--inari-cream);
    box-shadow: 0 8px 24px rgba(47, 43, 54, 0.18);
}
.btn-primary:hover {
    background: var(--inari-orange);
    color: var(--inari-black);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.btn-ghost {
    background: var(--inari-glass);
    color: var(--inari-ink);
    border: 1px solid var(--inari-hairline);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.btn-ghost:hover {
    background: var(--inari-glass-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn .arrow {
    transition: transform var(--t-base);
    display: inline-block;
}
.btn:hover .arrow {
    transform: translateX(4px);
}

/* ================================================================
   Glass surfaces
   ================================================================ */
.glass {
    background: var(--inari-glass);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid var(--inari-hairline);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.glass-strong {
    background: var(--inari-glass-strong);
    backdrop-filter: blur(28px) saturate(1.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    border: 1px solid var(--inari-hairline);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.glass-soft {
    background: var(--inari-glass-soft);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--inari-hairline);
    border-radius: var(--radius-lg);
}

/* ================================================================
   Navigation
   ================================================================ */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-height);
    z-index: 100;
    display: flex;
    align-items: center;
    transition: all var(--t-base);
}
.nav-inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.nav.is-scrolled .nav-inner {
    background: var(--inari-glass-strong);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1rem 0.5rem 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--inari-hairline);
    max-width: calc(var(--container-max) - 80px);
}
.nav.is-scrolled { height: 88px; }

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display-family);
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--inari-black);
    flex-shrink: 0;
}
.nav-logo img {
    height: 40px;
    width: auto;
}

/* Nav partner chip (Microsoft AI Cloud Partner) */
.nav-partner-divider {
    width: 1px;
    height: 38px;
    background: linear-gradient(180deg, transparent 0%, var(--inari-hairline) 25%, var(--inari-hairline) 75%, transparent 100%);
    flex-shrink: 0;
}
.nav-partner {
    display: inline-flex;
    align-items: center;
    height: 52px;
    padding: 0 0.6rem 0 0.3rem;
    border-radius: var(--radius-md);
    margin-left: -0.25rem;
    text-decoration: none;
    color: inherit;
    transition: transform var(--t-fast), background var(--t-fast);
    flex-shrink: 0;
    position: relative;
}
.nav-partner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(220, 152, 82, 0.14), rgba(220, 152, 82, 0) 60%);
    opacity: 0;
    transition: opacity var(--t-base);
    pointer-events: none;
}
.nav-partner:hover { transform: translateY(-1px); }
.nav-partner:hover::after { opacity: 1; }
.nav-partner img {
    height: 46px;
    width: auto;
    display: block;
    transition: filter var(--t-base);
    filter: saturate(0.95);
}
.nav-partner:hover img { filter: saturate(1.08); }
.nav-links {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.nav-link {
    padding: 0.55rem 0.9rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--inari-ink-soft);
    border-radius: var(--radius-pill);
    transition: all var(--t-fast);
    position: relative;
}
.nav-link:hover {
    color: var(--inari-black);
    background: var(--inari-glass-soft);
}
.nav-link.external::after {
    content: '↗';
    margin-left: 0.3rem;
    font-size: 0.85em;
    opacity: 0.7;
}

/* Services dropdown */
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
}
.nav-link.has-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.nav-caret {
    width: 10px;
    height: 10px;
    transition: transform var(--t-base);
    opacity: 0.65;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret {
    transform: rotate(180deg);
    opacity: 1;
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 0.2rem);
    left: -0.5rem;
    width: 360px;
    padding: 0.85rem;
    background: var(--inari-glass-strong);
    backdrop-filter: blur(28px) saturate(1.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    border: 1px solid var(--inari-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 220ms var(--ease-out), transform 240ms var(--ease-out), visibility 220ms;
    z-index: 110;
}
.nav-dropdown::before {
    /* invisible hover bridge so mouse can travel from nav-link to dropdown without closing */
    content: '';
    position: absolute;
    top: -0.55rem;
    left: 0;
    right: 0;
    height: 0.55rem;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
    padding: 0.3rem 0.7rem 0.6rem;
}

.nav-dropdown-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.7rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background var(--t-fast), transform var(--t-fast);
    position: relative;
}
.nav-dropdown-item + .nav-dropdown-item { margin-top: 0.15rem; }
.nav-dropdown-item:hover {
    background: rgba(220, 152, 82, 0.08);
}
.nav-dropdown-item:hover .nav-dropdown-arrow {
    transform: translateX(3px);
    color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
}

.nav-dropdown-icon {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--phase-tone, var(--inari-orange));
    color: white;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--phase-tone, var(--inari-orange)) 30%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.nav-dropdown-icon svg { width: 16px; height: 16px; }

.nav-dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.nav-dropdown-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--inari-ink);
    line-height: 1.2;
}
.nav-dropdown-desc {
    font-size: 0.78rem;
    color: var(--inari-ink-muted);
    line-height: 1.3;
}
.nav-dropdown-arrow {
    width: 14px; height: 14px;
    color: var(--inari-ink-muted);
    transition: transform var(--t-fast), color var(--t-fast);
    flex-shrink: 0;
}

.nav-cta {
    margin-left: 0.6rem;
    padding: 0.6rem 1.1rem;
    background: var(--inari-black);
    color: var(--inari-cream);
    border-radius: var(--radius-pill);
    font-size: 0.92rem;
    font-weight: 600;
    transition: all var(--t-base);
}
.nav-cta:hover {
    background: var(--inari-orange);
    color: var(--inari-black);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}
.nav-toggle span {
    width: 24px; height: 2px;
    background: var(--inari-black);
    border-radius: 2px;
    transition: all var(--t-base);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================
   Hero
   ================================================================ */
.hero {
    height: 100vh;
    min-height: 620px;
    max-height: 920px;
    padding-top: calc(var(--nav-height) + 1.25rem);
    padding-bottom: 2rem;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Hero particles - sparkly echo of the aurora palette, drifting slowly inside the hero only */
.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.hero-particles .particle {
    position: absolute;
    border-radius: 50%;
    animation: heroParticleFloat var(--p-duration, 16s) ease-in-out infinite;
    /* No permanent will-change: the running transform/opacity animation
       promotes a layer on its own. Pinning will-change kept all dots
       layer-promoted in memory forever, even paused/off-screen. */
}
/* JS toggles this while the hero is off-screen - 70 idle compositor
   animations are not free even when nothing paints. */
.hero-particles.is-anim-paused .particle {
    animation-play-state: paused;
}
@keyframes heroParticleFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        opacity: var(--p-opacity-min);
    }
    50% {
        transform: translate3d(50px, -100px, 0);
        opacity: var(--p-opacity-max);
    }
}

/* Asymmetric diagonal flow: headline left, three stacked phase-cards right with staircase Y-offset.
   Cards lift on hover and dim siblings - diagonal energy without rotation. */
.hero-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
    width: 100%;
}

.hero-headline {
    position: relative;
    z-index: 2;
    min-width: 0;
}
.hero-headline > .eyebrow { margin-bottom: var(--space-4); }
.hero-title {
    margin: 0 0 var(--space-5);
}
.hero-headline .lead { margin-bottom: var(--space-6); }
.hero-lead { max-width: 52ch; }

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

/* ----------------------------------------------------------------
   Hero showcase - single rotating phase highlight card + pill nav.
   data-tone on the card cascades into label color, halo, glow, focus
   ring; JS swaps content and toggles tone every 6s with crossfade.
---------------------------------------------------------------- */
.hero-showcase-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    position: relative;
    z-index: 1;
}

.hero-showcase {
    position: relative;
    isolation: isolate;
    min-height: 340px;
    
    backdrop-filter: blur(28px) saturate(1.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    border: 0px solid var(--inari-hairline);
    border-radius: var(--radius-xl);
    box-shadow:
        var(--shadow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(47, 43, 54, 0.04);
    color: var(--inari-ink);
    text-decoration: none;
    transition: border-color 360ms var(--ease-out),
                box-shadow 360ms var(--ease-out),
                transform 360ms var(--ease-out);
    will-change: transform;
}
.hero-showcase:hover,
.hero-showcase:focus-within {
    border-color: color-mix(in srgb, var(--phase-tone) 40%, var(--inari-hairline));
    box-shadow:
        var(--shadow-lg),
        var(--shadow-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(47, 43, 54, 0.04);
    transform: translateY(-4px);
    outline: none;
}
.hero-showcase:focus-within {
    outline: 2px solid var(--phase-tone);
    outline-offset: 3px;
}

/* Stacked layers - two of these overlap on top of each other, and a
   class toggle drives a parallel opacity crossfade between phases.
   Each layer carries its own data-tone so halo, label color and the
   ::before ambient glow morph from outgoing to incoming in lockstep. */
.hero-showcase-layer {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 480ms var(--ease-out);
    will-change: opacity;
}
.hero-showcase-layer.is-active {
    opacity: 1;
    pointer-events: auto;
}
.hero-showcase-layer::before {
    content: '';
    position: absolute;
    inset: -16% -10% -6% -10%;
    background:
        radial-gradient(55% 50% at 50% 75%,
            color-mix(in srgb, var(--phase-tone) 32%, transparent) 0%,
            transparent 70%),
        radial-gradient(65% 55% at 30% 30%,
            color-mix(in srgb, var(--inari-orange) 20%, transparent) 0%,
            transparent 78%);
    filter: blur(50px);
    border-radius: var(--radius-xl);
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 360ms var(--ease-out);
}
.hero-showcase:hover .hero-showcase-layer.is-active::before,
.hero-showcase:focus-visible .hero-showcase-layer.is-active::before {
    opacity: 0.85;
}

.hero-showcase-media {
    position: relative;
    aspect-ratio: 580 / 631;
    width: 100%;
    max-width: 220px;
    justify-self: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--phase-tone) 28%, transparent) 0%,
        color-mix(in srgb, var(--phase-tone) 10%, transparent) 55%,
        transparent 100%);
    transition: background 420ms var(--ease-out);
}
.hero-showcase-halo {
    position: absolute;
    inset: -10%;
    background: radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--phase-tone) 20%, transparent) 0%,
        transparent 60%);
    filter: blur(20px);
    pointer-events: none;
    transition: opacity 420ms var(--ease-out);
}
.hero-showcase-image {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.hero-showcase-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    min-height: 220px;
    justify-content: center;
}
.hero-showcase-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--phase-tone);
    line-height: 1;
}
.hero-showcase-title {
    font-family: var(--font-display-family);
    font-weight: 500;
    font-size: var(--font-h3);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--inari-ink);
    margin: 0;
}
.hero-showcase-desc {
    font-size: var(--font-small);
    line-height: 1.5;
    color: var(--inari-ink-soft);
    margin: 0;
    max-width: 32ch;
}
.hero-showcase-cta {
    margin-top: var(--space-2);
    font-size: var(--font-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--inari-ink-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 220ms var(--ease-out);
}
/* Stretched-link: the CTA covers its whole card so a click anywhere
   on the active layer navigates to the phase page. Only the active
   layer is reachable thanks to inert on the others. */
.hero-showcase-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius-xl);
}
.hero-showcase-cta:focus-visible {
    outline: none;
}
.hero-showcase-cta .arrow {
    display: inline-block;
    transition: transform var(--t-fast);
}
.hero-showcase:hover .hero-showcase-layer.is-active .hero-showcase-cta,
.hero-showcase:focus-within .hero-showcase-layer.is-active .hero-showcase-cta {
    color: var(--phase-tone);
}
.hero-showcase:hover .hero-showcase-layer.is-active .hero-showcase-cta .arrow,
.hero-showcase:focus-within .hero-showcase-layer.is-active .hero-showcase-cta .arrow {
    transform: translateX(4px);
}

/* Pill navigation strip */
.hero-showcase-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}
.hero-showcase-nav-item {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.75rem 1rem 0.85rem;
    background: var(--inari-glass-soft);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    /* border: 1px solid var(--inari-hairline); */
    border-radius: var(--radius-pill);
    color: var(--inari-ink-muted);
    font-family: var(--font-body);
    cursor: pointer;
    overflow: hidden;
    transition: background 320ms var(--ease-out),
                color 320ms var(--ease-out),
                border-color 320ms var(--ease-out),
                transform 320ms var(--ease-out);
}
.hero-showcase-nav-num {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: var(--font-micro);
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.hero-showcase-nav-label {
    position: relative;
    z-index: 1;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.005em;
}
.hero-showcase-nav-item:hover {
    color: var(--inari-ink);
    border-color: color-mix(in srgb, var(--phase-tone) 30%, var(--inari-hairline));
}
.hero-showcase-nav-item.is-active {
    background: color-mix(in srgb, var(--phase-tone) 8%, var(--inari-cream));
    color: var(--inari-ink);
    border-color: color-mix(in srgb, var(--phase-tone) 45%, var(--inari-hairline));
    transform: translateY(-1px);
}
.hero-showcase-nav-item.is-active .hero-showcase-nav-num {
    opacity: 1;
    color: var(--phase-tone);
}
.hero-showcase-nav-item:focus-visible {
    outline: 2px solid var(--phase-tone);
    outline-offset: 3px;
}

.hero-showcase-nav-progress {
    position: absolute;
    inset: 0;
    /* Fill grows via transform: scaleX (compositor-only) instead of width.
       Animating width re-runs layout + style recalc every frame for the
       full 6s, on a loop - a constant idle CPU cost even with no input. */
    transform: scaleX(0);
    transform-origin: left center;
    background: color-mix(in srgb, var(--phase-tone) 50%, transparent);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
}
.hero-showcase-nav-item.is-active .hero-showcase-nav-progress { opacity: 1; }
.hero-showcase-nav-item.is-active.is-running .hero-showcase-nav-progress {
    animation: showcaseProgress 6s linear forwards;
}
.hero-showcase-nav-item.is-active.is-running.is-paused .hero-showcase-nav-progress {
    animation-play-state: paused;
}
.hero-showcase-nav-item.is-filled .hero-showcase-nav-progress {
    opacity: 1;
    transform: scaleX(1);
    animation: none;
}
@keyframes showcaseProgress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ----------------------------------------------------------------
   Competency cards - 5 compact glass cards in a single row. The
   auto-fit + minmax(170px, 1fr) grid keeps all five side-by-side
   on desktop and wraps gracefully as the viewport narrows.
---------------------------------------------------------------- */
.competency-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.competency-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 0 solid var(--inari-hairline);
    border-radius: var(--radius-lg);
    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(47, 43, 54, 0.04);
    transition: transform var(--t-base),
                box-shadow var(--t-base);
}
.competency-card:hover {
    transform: translateY(-3px);
    box-shadow:
        var(--shadow-lg),
        0 18px 40px -22px var(--inari-orange),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(47, 43, 54, 0.04);
}

.competency-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.competency-card-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--inari-orange) 14%, transparent);
    color: var(--inari-orange);
}
.competency-card-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}
.competency-card-title {
    font-family: var(--font-display-family);
    font-weight: 500;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--inari-ink);
    margin: 0;
    text-wrap: balance;
}

.competency-card-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--inari-ink-soft);
}
.competency-card-points li {
    position: relative;
    padding-left: 0.95rem;
}
.competency-card-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--inari-orange);
}

/* ================================================================
   About section: Founders & Agents scroll-driven hero
   ================================================================ */
.about-section {
    /* Override the global section padding - the pinned stage owns the
       vertical rhythm; the copy block below has its own padding. */
    padding: 0;
}

/* Intro eyebrow overlays the pinned stage at top-left, sitting just below
   the nav. Lives inside .about-stage so it stays put while the stage is
   sticky-pinned through the scroll. */
.about-intro {
    position: absolute;
    top: calc(var(--nav-height) + var(--space-4));
    left: 0;
    right: 0;
    z-index: 4;
    pointer-events: none;
}

/* Scroll-host owns the section's full scroll distance. Inside it,
   .about-stage is sticky and pins at the top for the full ride. */
.about-stage-host {
    position: relative;
    height: 300vh;
    width: 100%;
}
.about-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: transparent;
    isolation: isolate;
}

.about-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
}

.about-founders-layer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 3;
    pointer-events: none;
}
.about-founders {
    display: flex;
    gap: 52px;
    align-items: center;
    transform: scale(var(--about-scale, 1));
    transform-origin: center center;
    will-change: transform;
}
.about-founder {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.95),
        0 0 0 3px rgba(255, 255, 255, 0.55),
        0 12px 32px -10px rgba(47, 43, 54, 0.18);
    background: var(--inari-glass-strong);
    display: block;
}

.about-headline-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14%;
    z-index: 5;
    text-align: center;
    opacity: var(--about-end-p, 0);
    transform: translateY(calc(28px * (1 - var(--about-end-p, 0))));
    pointer-events: none;
}
.about-headline {
    margin: 0 auto;
    max-width: 18ch;
    text-wrap: balance;
}

.about-copy {
    max-width: 72ch;
    margin: 0 auto;
    text-align: center;
}
.about-copy .eyebrow {
    display: inline-block;
    margin-bottom: var(--space-5);
}
.about-copy p {
    font-size: var(--font-lead);
    color: var(--inari-ink-soft);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 62ch;
}
.about-copy p + p { margin-top: 0.9rem; }

/* Success-story page still uses .about-grid - kept untouched */
.about-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* About stats strip - 5 editorial stats, full-width, no icons, no cards */
.about-stats {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: var(--space-5) 0 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
    border-top: 1px solid var(--inari-hairline);
}
.about-stat {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}
.about-stat-val {
    font-family: var(--font-display-family);
    font-size: clamp(2.25rem, 3.6vw, 3rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black)), var(--inari-raspberry));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.about-stat-label {
    font-family: var(--font-body);
    font-size: var(--font-small);
    font-weight: 500;
    color: var(--inari-ink-soft);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* About subsections - structural wrappers that group the conceptual chapters
   of the About section. The --fit modifier caps a subsection at the available
   viewport on desktop so it can be linked to via anchor and shown in full. */
.about-subsection {
    padding-block-end: var(--space-4);
}
.about-subsection + .about-subsection {
    border-top: 1px solid var(--inari-hairline);
    padding-block-start: var(--space-7);
}

@media (min-width: 1025px) {
    .about-subsection--fit {
        max-height: calc(100vh - var(--nav-height));
        overflow: hidden;
        padding-block: var(--space-5);
    }
    /* The Warsaw quote card is a tall portrait (608/1088). On a 768px-high
       laptop the card + stats strip overflowed the fit cap and clipped the
       stats off the bottom. Bind the card's height to the viewport so it
       shrinks on short screens (keeping its crop), leaving room for the
       full stats strip. Width derives from the aspect-ratio. */
    #about-firm .about-feature-quote-card {
        max-width: none;
        width: auto;
        height: min(560px, 58vh);
        justify-self: center;
    }
}

/* About pillars - Vision / Mission two-column block, flat on cream
   with a vertical hairline divider between the columns. */
.about-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    position: relative;
}
.about-pillars::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--inari-hairline);
}
.about-pillar { display: flex; flex-direction: column; gap: var(--space-4); }
.about-pillar:first-child { padding-right: var(--space-6); }
.about-pillar:last-child  { padding-left: var(--space-6); }

.about-pillar-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.about-pillar-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
    color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
    flex-shrink: 0;
}
.about-pillar-icon svg { width: 18px; height: 18px; }
.about-pillar-title {
    font-family: var(--font-display-family);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black)), var(--inari-raspberry));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin: 0;
}

.about-pillar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.about-pillar-list li {
    position: relative;
    padding-left: 1.1rem;
    color: var(--inari-ink-soft);
    font-size: var(--font-small);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.5;
}
.about-pillar-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
}

/* About feature - boutique copy on the left, 9:16 portrait media on the right. */
.about-feature {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-8);
    align-items: center;
}
.about-feature-copy p {
    font-family: var(--font-body);
    font-size: var(--font-lead);
    color: var(--inari-ink-soft);
    line-height: 1.55;
    margin: 0;
    max-width: 56ch;
}
/* Warsaw quote card. Image fills the whole card as background; the
   quote sits in a frosted-glass / cream-tinted overlay at the bottom.
   Outer shell keeps the .services-card surface signature (bevel +
   ambient phase-tone halo + lift-on-hover) so the card stays in the
   same family. data-tone="academy" pins phase-tone to Inari Orange. */
.about-feature-quote-card {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 608 / 1088;
    justify-self: center;
    margin: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 0px solid var(--inari-hairline);
    box-shadow:
        var(--shadow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(47, 43, 54, 0.04);
    transition: border-color 360ms var(--ease-out),
                box-shadow 360ms var(--ease-out),
                transform 360ms var(--ease-out);
}
.about-feature-quote-card:hover,
.about-feature-quote-card:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--phase-tone) 40%, var(--inari-hairline));
    box-shadow:
        var(--shadow-lg),
        var(--shadow-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(47, 43, 54, 0.04);
}
.about-feature-quote-card::before {
    content: '';
    position: absolute;
    inset: -16% -10% -6% -10%;
    background:
        radial-gradient(55% 50% at 50% 75%,
            color-mix(in srgb, var(--phase-tone) 32%, transparent) 0%,
            transparent 70%),
        radial-gradient(65% 55% at 30% 30%,
            color-mix(in srgb, var(--inari-orange) 20%, transparent) 0%,
            transparent 78%);
    filter: blur(50px);
    border-radius: var(--radius-xl);
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 360ms var(--ease-out);
}
.about-feature-quote-card:hover::before,
.about-feature-quote-card:focus-within::before {
    opacity: 0.85;
}

/* Background image: fills the entire card. */
.about-feature-quote-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}

/* Quote body: anchored to the bottom of the card, layered over the
   image. Frosted-glass + cream wash makes the text readable while
   keeping the photo partially visible above. The top edge feathers
   via mask-image so the seam is organic, not a hard line. */
.about-feature-quote-body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    margin: 0;
    padding: var(--space-3) var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: linear-gradient(
        to bottom,
        rgba(47, 43, 54, 0) 0%,
        rgba(47, 43, 54, 0.35) 55%,
        rgba(47, 43, 54, 0.55) 100%
    );
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.6) 10%,
        rgba(0, 0, 0, 1) 22%);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.6) 10%,
        rgba(0, 0, 0, 1) 22%);
}

/* Decorative " sits as the first stack element - small, phase-tone,
   tight line-height so it doesn't push the quote text down. */
.about-feature-quote-mark {
    display: block;
    font-family: var(--font-display-family);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 0.5;
    color: color-mix(in srgb, var(--phase-tone) 85%, transparent);
    margin: 0;
    pointer-events: none;
    user-select: none;
}
.about-feature-quote-text {
    margin: 0;
    font-family: var(--font-display-family);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--inari-cream);
    text-wrap: pretty;
}
.about-feature-quote-attr {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: var(--space-1);
}
.about-feature-quote-name {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 600;
    font-size: var(--font-small);
    color: var(--inari-cream);
    letter-spacing: 0.02em;
    line-height: 1.3;
}
.about-feature-quote-role {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--font-small);
    color: color-mix(in srgb, var(--inari-cream) 70%, transparent);
    letter-spacing: 0.02em;
    line-height: 1.35;
}

/* Desktop: cap card width so the whole figure (608x1088 image ratio) fits
   inside .about-subsection--fit's 100vh - nav budget alongside the stats strip. */
@media (min-width: 1025px) {
    .about-feature-quote-card {
        max-width: 320px;
    }
}

.about-snapshot {
    padding: 1.5rem;
    display: grid;
    gap: 0.95rem;
}
.snapshot-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: baseline;
}
.snapshot-key {
    font-family: var(--font-display-family);
    font-size: 1.3rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
    line-height: 1;
}
.snapshot-val {
    font-size: 0.9rem;
    color: var(--inari-ink-soft);
    line-height: 1.4;
}
.snapshot-val strong {
    color: var(--inari-ink);
    display: block;
    font-weight: 600;
    margin-bottom: 0.1rem;
}

/* ================================================================
   Services - centered intro on top, three phase cards in a 3-up
   grid below. Cards keep the glassmorphic visual DNA of the hero
   showcase (glass, halo, ambient glow, data-tone cascade) but
   reorient vertically (media-top, body-below) to fit a narrower
   column footprint.
   ================================================================ */
.services-intro {
    text-align: center;
    margin: 0 auto;
    /* No max-width: copy spans the full container width (same as the
       3-card deck below), so headline and lead fit on fewer lines and
       the whole section keeps within one viewport. */
}
.services-intro h2 {
    margin: 0.5rem auto 0;
    text-wrap: balance;
}

.services-deck {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-5);
}

/* Card: vertical column, editorial padding all sides. Surface
   matches .hero-showcase (no solid fill - backdrop-filter blurs the
   aurora through; 0px border so the inset white highlight reads as
   a 3D bevel on the top edge). */
.services-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    overflow: hidden;
    backdrop-filter: blur(28px) saturate(1.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    border: 0px solid var(--inari-hairline);
    box-shadow:
        var(--shadow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(47, 43, 54, 0.04);
    color: var(--inari-ink);
    text-decoration: none;
    transition: border-color 360ms var(--ease-out),
                box-shadow 360ms var(--ease-out),
                transform 360ms var(--ease-out);
}
/* Card lift fires on hover OR when child link (CTA) gets focus -
   article isn't focusable on its own, so :focus-within bridges the
   keyboard focus from the CTA up to the card visual state. */
.services-card:hover,
.services-card:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--phase-tone) 40%, var(--inari-hairline));
    box-shadow:
        var(--shadow-lg),
        var(--shadow-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(47, 43, 54, 0.04);
}

/* Ambient phase-tone glow - subtle wash at rest, blooms on hover.
   Provides the card's resting character (different per data-tone). */
.services-card::before {
    content: '';
    position: absolute;
    inset: -16% -10% -6% -10%;
    background:
        radial-gradient(55% 50% at 50% 75%,
            color-mix(in srgb, var(--phase-tone) 32%, transparent) 0%,
            transparent 70%),
        radial-gradient(65% 55% at 30% 30%,
            color-mix(in srgb, var(--inari-orange) 20%, transparent) 0%,
            transparent 78%);
    filter: blur(50px);
    border-radius: var(--radius-xl);
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 360ms var(--ease-out);
}
.services-card:hover::before,
.services-card:focus-within::before {
    opacity: 0.85;
}

/* Header: editorial stack - label (eyebrow micro uppercase phase-tone)
   above title (Boska). Mirrors the page-wide eyebrow + section-headline
   pattern, so cards feel like chapters of the same publication. */
.services-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Body: desc + CTA stack. The card owns the padding so no extra
   padding here - just inner column flow. */
.services-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    flex: 1;
}
.services-card-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-small);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--phase-tone);
    line-height: 1;
}
.services-card-title {
    font-family: var(--font-display-family);
    font-weight: 500;
    /* Heading column is narrower than the full card body (the image
       tile sits to its left). Long titles like "Agentic Operational
       Layer" wrap to 2 lines; text-wrap:balance splits them cleanly. */
    font-size: clamp(1.25rem, 1.7vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--inari-ink);
    margin: 0;
    text-wrap: balance;
}
/* Deck: magazine-grade standfirst between title and body. Boska italic
   gives it character without competing with the upright Boska title;
   sized between title and body so the eye reads label -> title -> deck
   -> body as a single editorial breath. */
.services-card-deck {
    font-family: var(--font-display-family);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.05rem, 1.2vw, 1.175rem);
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--inari-ink);
    margin: 0;
    text-wrap: balance;
}
.services-card-desc {
    font-size: var(--font-body);
    line-height: 1.55;
    color: var(--inari-ink-soft);
    margin: 0;
}
/* CTA: visual styling comes from .btn .btn-primary (dark pill, flips
   to orange on hover, arrow shifts) - same as hero "What we do".
   Only positioning is overridden here so it sits at the card's
   bottom-left and doesn't stretch full-width. */
.services-card-cta {
    margin-top: auto;
    align-self: flex-start;
    text-decoration: none;
}
.services-card-cta:focus-visible {
    outline: 2px solid var(--phase-tone);
    outline-offset: 4px;
}

/* Subpage hero variant: single card fills the hero right column */
.services-card--hero {
    height: 100%;
    min-height: 340px;
    box-sizing: border-box;
}

/* ================================================================
   Our competencies - grouped credentials
   ================================================================ */
.competencies-head {
    text-align: center;
    margin-bottom: var(--space-7);
}
.competencies-head .eyebrow {
    display: inline-flex;
    margin-bottom: var(--space-3);
}
.competencies-head .eyebrow::before { display: none; }
.competencies-head h2 {
    max-width: 22ch;
    margin: var(--space-3) auto 0;
}

.competencies-subhead {
    font-family: var(--font-display-family);
    font-weight: 500;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--inari-ink);
    text-align: center;
    margin: var(--space-8) auto var(--space-8);
    max-width: 32ch;
    text-wrap: balance;
}

.competency-groups {
    display: grid;
    grid-template-columns: minmax(210px, 0.8fr) minmax(0, 2.6fr) minmax(0, 2.6fr);
    gap: var(--space-6);
    align-items: start;
    position: relative;
}

.competency-group + .competency-group {
    border-left: 1px solid var(--inari-hairline);
    padding-left: var(--space-6);
}

.competency-group { --competency-tone: var(--inari-orange); }
.competency-group--expert    { --competency-tone: var(--inari-orange); }
.competency-group--associate { --competency-tone: var(--inari-slate); }
.competency-group--other     { --competency-tone: var(--inari-ink); }

.competency-group-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.competency-group-meta { min-width: 0; }
.competency-group-title {
    font-family: var(--font-display-family);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--competency-tone);
    margin: 0 0 2px;
    white-space: nowrap;
}
.competency-group-count {
    display: block;
    font-size: var(--font-small);
    color: var(--inari-ink-muted);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.competency-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.competency-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-1);
    min-width: 0;
    border-radius: var(--radius-md);
    background: transparent;
    text-align: center;
    transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.competency-tile:hover {
    transform: translateY(-3px);
    background: var(--inari-glass);
    box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--competency-tone) 50%, transparent);
}

.competency-tile-badge {
    height: 56px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: saturate(0.92);
    transition: filter var(--t-base);
}
.competency-grid--logos .competency-tile-badge { height: 44px; }
.competency-tile:hover .competency-tile-badge { filter: saturate(1); }

.competency-tile-label {
    font-size: 0.6rem;
    line-height: 1.35;
    color: var(--inari-ink-soft);
    letter-spacing: 0.005em;
}

@media (max-width: 1024px) {
    .competency-groups {
        grid-template-columns: 1fr;
        gap: var(--space-7);
    }
    .competency-group + .competency-group {
        border-left: none;
        border-top: 1px solid var(--inari-hairline);
        padding-left: 0;
        padding-top: var(--space-7);
    }
}

@media (prefers-reduced-motion: reduce) {
    .competency-tile,
    .competency-tile-badge { transition: none; }
    .competency-tile:hover { transform: none; }
}

/* ================================================================
   Success story - intro head + case study card
   ================================================================ */
.success-intro {
    text-align: center;
    margin: 0 auto var(--space-7);
    max-width: 64ch;
}
.success-intro h2 {
    margin: var(--space-3) auto 0;
    text-wrap: balance;
}
.success-intro .lead {
    margin: var(--space-4) auto 0;
}

.case-study {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    padding-top: var(--space-6);
    border-top: 1px solid var(--inari-hairline);
}

.case-study-image {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    line-height: 0;
    align-self: center;
    justify-self: center;
    max-width: 100%;
}
.case-study-image img {
    display: block;
    height: calc((100vh - var(--nav-height)) * 0.85);
    width: auto;
    max-width: 100%;
}
.case-study-logo {
    position: absolute;
    right: var(--space-5);
    bottom: var(--space-5);
    padding: 0.45rem 1rem;
    background: rgba(47, 43, 54, 0.78);
    color: var(--inari-cream);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-micro);
    letter-spacing: 0.22em;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.case-study-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.case-study-title {
    font-family: var(--font-display-family);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--inari-ink);
    margin: 0;
    text-wrap: balance;
}

.case-study-stats {
    display: flex;
    gap: var(--space-3);
}
.case-study-stat {
    flex: 1;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    border: 0 solid var(--inari-hairline);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(47, 43, 54, 0.04);
    transition: transform var(--t-base),
                box-shadow var(--t-base);
}
.case-study-stat:hover {
    transform: translateY(-3px);
    box-shadow:
        var(--shadow-lg),
        0 18px 40px -22px var(--inari-orange),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(47, 43, 54, 0.04);
}

@media (prefers-reduced-motion: reduce) {
    .case-study-stat { transition: none; }
    .case-study-stat:hover { transform: none; }
}
.case-study-stat-val {
    font-family: var(--font-display-family);
    font-size: clamp(1.75rem, 2.6vw, 2.2rem);
    font-weight: 600;
    line-height: 1;
    color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
    font-variant-numeric: tabular-nums;
}
.case-study-stat-label {
    font-size: var(--font-small);
    color: var(--inari-ink-muted);
    margin-top: var(--space-2);
    line-height: 1.35;
}
.case-study-stat-label span {
    display: block;
    font-size: 0.72rem;
    color: var(--inari-ink-muted);
    opacity: 0.8;
}

.case-study-desc {
    color: var(--inari-ink-soft);
    line-height: 1.6;
    max-width: 60ch;
    margin: 0;
}

.case-study-cta {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

/* ================================================================
   Contact section
   ================================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 3rem;
    align-items: start;
}
.contact-copy h2 { margin: 0.85rem 0 1.1rem; }
.contact-info-list {
    margin-top: 1.75rem;
    display: grid;
    gap: 1rem;
}
.contact-info-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 1rem;
    align-items: start;
}
.contact-info-item svg {
    width: 20px; height: 20px;
    color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
    margin-top: 4px;
}
.contact-info-item strong {
    display: block;
    color: var(--inari-ink);
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.contact-info-item .contact-email {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.contact-info-item .contact-email:hover {
    color: var(--inari-orange);
}
.contact-info-item span {
    color: var(--inari-ink-soft);
    font-size: 0.95rem;
}

.contact-form-wrap {
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
}
.contact-form { display: grid; gap: 0.85rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.95rem; }
.field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.field label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--inari-ink-soft);
}
.req { color: var(--inari-coral); font-weight: 600; }
.form-meta { font-size: var(--font-small); color: var(--inari-ink-muted); line-height: 1.5; }
.field input, .field textarea {
    background: var(--inari-glass-strong);
    border: 1px solid var(--inari-hairline);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.95rem;
    color: var(--inari-ink);
    transition: all var(--t-fast);
    font-size: 0.95rem;
    width: 100%;
}
.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--inari-orange);
    background: rgba(255, 255, 255, 0.95);
}
.field input:focus-visible, .field textarea:focus-visible {
    outline: 2px solid var(--inari-orange);
    outline-offset: 3px;
}
.field textarea { resize: vertical; min-height: 90px; }

.consent {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.8rem;
    color: var(--inari-ink-soft);
    line-height: 1.45;
}
.consent input[type="checkbox"] {
    margin-top: 3px;
    width: 16px; height: 16px;
    flex-shrink: 0;
    accent-color: var(--inari-orange);
}
.consent a { color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black)); border-bottom: 1px solid currentColor; }

.form-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
}
.form-status {
    font-size: 0.88rem;
    color: var(--inari-ink-muted);
    line-height: 1.4;
}
.form-status.is-error { color: var(--inari-coral); }
.form-status.is-success { color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black)); font-weight: 600; }

/* reCAPTCHA v3: badge hidden site-wide (it flickered on hover and overlapped
   content on mobile); the required branding now lives in .form-recaptcha-note.
   !important defeats Google's inline visibility toggling on the iframe. */
.grecaptcha-badge { visibility: hidden !important; }

/* Matches the consent line's voice; spans the full form width (left edge
   aligns with the .consent label, not its indented text), a touch smaller. */
.form-recaptcha-note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--inari-ink-soft);
}
.form-recaptcha-note a { color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black)); border-bottom: 1px solid currentColor; }

.btn-submit {
    background: var(--inari-black);
    color: var(--inari-cream);
    padding: 0.95rem 1.8rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all var(--t-base);
}
.btn-submit:hover:not(:disabled) {
    background: var(--inari-orange);
    color: var(--inari-black);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-submit.is-loading .label { opacity: 0; }
.btn-submit.is-loading::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-submit { position: relative; }

/* ================================================================
   Footer
   ================================================================ */
.footer {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
    border-top: 1px solid var(--inari-hairline);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
}
.footer-brand-block img { height: 36px; margin-bottom: 1rem; width: auto; }
.footer-brand-block p {
    font-size: 0.85rem;
    color: var(--inari-ink-muted);
    line-height: 1.6;
}
.footer-col h4 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--inari-ink);
    margin-bottom: 1.25rem;
}
.footer-col ul { list-style: none; display: grid; gap: 0.7rem; }
.footer-col a {
    color: var(--inari-ink-soft);
    font-size: 0.92rem;
    transition: color var(--t-fast);
}
.footer-col a:hover { color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black)); }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--inari-hairline);
    font-size: 0.82rem;
    color: var(--inari-ink-muted);
}

/* ================================================================
   Success Story (Norlys)
   ================================================================ */
.story-hero {
    padding-top: calc(var(--nav-height) + 5rem);
    padding-bottom: 4rem;
}
.story-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--inari-ink-soft);
    margin-bottom: 2rem;
}
.story-back:hover { color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black)); }

.story-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: end;
}
.story-logo-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.story-logo-placeholder {
    padding: 0.4rem 0.9rem;
    background: var(--inari-black);
    color: white;
    font-family: var(--font-display-family);
    font-weight: 600;
    letter-spacing: 0.18em;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}
.story-hero-title {
    font-family: var(--font-display-family);
    font-weight: 500;
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}
.story-lede {
    font-size: 1.15rem;
    color: var(--inari-ink-soft);
    line-height: 1.55;
    max-width: 56ch;
}
.story-hero-visual {
    aspect-ratio: 4/5;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 30% 30%, rgba(220, 152, 82, 0.35), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(77, 86, 119, 0.4), transparent 60%),
        linear-gradient(135deg, var(--inari-cream), var(--inari-cream-deep));
    box-shadow: var(--shadow-md);
    border: 1px solid var(--inari-hairline);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 2rem;
}
.story-hero-visual::after {
    content: '';
    position: absolute;
    inset: auto 2rem 6rem;
    height: 100px;
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.1));
    backdrop-filter: blur(10px);
    border: 1px solid var(--inari-hairline);
}
.story-hero-visual span {
    position: relative;
    z-index: 1;
    color: var(--inari-black);
    font-family: var(--font-display-family);
    font-weight: 500;
    font-size: 1.1rem;
}

.story-section { padding: clamp(3rem, 6vw, 5rem) 0; }
.story-section h2 { margin-bottom: 1.5rem; }
.story-section p {
    color: var(--inari-ink-soft);
    line-height: 1.65;
    max-width: 65ch;
    font-size: 1.05rem;
}
.story-section p + p { margin-top: 1.2rem; }

.story-challenges-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.story-challenge {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.story-challenge-num {
    font-family: var(--font-display-family);
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black));
    letter-spacing: 0.05em;
}
.story-challenge h3 {
    font-family: var(--font-display-family);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--inari-black);
    line-height: 1.2;
}
.story-challenge p { font-size: 0.95rem; line-height: 1.5; max-width: none; }

.story-stages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2.5rem;
    position: relative;
}
.story-stage {
    padding: 1.75rem;
    position: relative;
}
.story-stage-num {
    font-family: var(--font-display-family);
    font-size: 2.25rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--inari-orange), var(--inari-raspberry));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    font-weight: 600;
}
.story-stage h3 {
    font-family: var(--font-display-family);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--inari-black);
    margin-bottom: 0.5rem;
}
.story-stage p { font-size: 0.95rem; line-height: 1.5; max-width: none; }

.story-results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.story-result {
    padding: 2rem 1.5rem;
    text-align: center;
}
.story-result-val {
    font-family: var(--font-display-family);
    font-size: 3rem;
    line-height: 1;
    font-weight: 600;
    background: linear-gradient(135deg, color-mix(in srgb, var(--inari-orange) 84%, var(--inari-black)), var(--inari-raspberry));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}
.story-result-label {
    font-size: 0.9rem;
    color: var(--inari-ink-soft);
    line-height: 1.4;
}

.story-cta-strip {
    margin-top: 4rem;
    padding: clamp(2rem, 4vw, 3rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.story-cta-strip h3 {
    font-family: var(--font-display-family);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 500;
    color: var(--inari-black);
    max-width: 24ch;
    line-height: 1.15;
}
.story-cta-strip-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ================================================================
   Scroll reveal
   ================================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .aurora-blob, .hero-particles .particle { animation: none; }
    .hero-showcase,
    .hero-showcase-layer,
    .hero-showcase-layer::before,
    .hero-showcase-media,
    .hero-showcase-halo,
    .hero-showcase-nav-item {
        transition: opacity 180ms linear !important;
        transform: none !important;
    }
    .hero-showcase-nav-progress { display: none; }
    .hero-showcase-nav-item.is-active {
        background: color-mix(in srgb, var(--phase-tone) 22%, var(--inari-cream));
    }
    /* About: skip the pinned scroll-hero, render a calm static composite.
       JS also short-circuits its rAF loop on reduced-motion. */
    .about-stage-host { height: auto; }
    .about-stage {
        position: relative;
        height: auto;
        padding: var(--space-8) 0 var(--space-7);
    }
    .about-canvas { display: none; }
    .about-intro { position: static; text-align: center; margin-bottom: var(--space-5); }
    .about-founders-layer { position: static; }
    .about-headline-wrap {
        position: static;
        opacity: 1;
        transform: none;
        margin-top: var(--space-6);
        bottom: auto;
    }
    .about-founders { transform: none; }
}

/* ================================================================
   Error pages
   ================================================================ */
.error-page {
    min-height: calc(100vh - var(--nav-height));
    padding: calc(var(--nav-height) + var(--space-8)) 0 var(--space-10);
    display: flex;
    align-items: center;
}

.error-page-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: var(--space-7);
    align-items: center;
}

.error-page-copy {
    max-width: 42rem;
}

.error-page-title {
    max-width: 12ch;
}

.error-page-lead {
    max-width: 34rem;
    margin-top: var(--space-5);
}

.error-page-actions {
    margin-top: var(--space-6);
    flex-wrap: wrap;
}

.error-page-note {
    margin-top: var(--space-4);
    color: var(--inari-ink-muted);
    font-size: var(--font-small);
}

.error-page-panel {
    position: relative;
    overflow: hidden;
    padding: var(--space-7);
    border: 1px solid color-mix(in srgb, var(--phase-tone, var(--inari-orange)) 18%, var(--inari-hairline));
    box-shadow: var(--shadow-lg);
}

.error-page-panel::before {
    content: '';
    position: absolute;
    inset: -12% auto auto 58%;
    width: 220px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--phase-tone, var(--inari-orange)) 18%, transparent);
    filter: blur(8px);
    pointer-events: none;
}

.error-page-panel > * {
    position: relative;
    z-index: 1;
}

.error-page-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.75rem 1.1rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--phase-tone, var(--inari-orange)) 12%, var(--inari-glass-strong));
    color: color-mix(in srgb, var(--phase-tone, var(--inari-orange)) 84%, var(--inari-black));
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.error-page-panel-title {
    margin-top: var(--space-5);
    font-family: var(--font-display-family);
    font-size: var(--font-h3);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.error-page-panel-copy {
    margin-top: var(--space-3);
    color: var(--inari-ink-soft);
}

.error-page-meta {
    list-style: none;
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.error-page-meta li {
    display: grid;
    gap: 0.35rem;
    padding-top: var(--space-4);
    border-top: 1px solid var(--inari-hairline);
}

.error-page-meta-label {
    color: var(--inari-ink-muted);
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.error-page-meta-value {
    color: var(--inari-ink);
    font-weight: 600;
}

.error-page-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.error-page-shortcut {
    display: grid;
    gap: 0.35rem;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--inari-hairline);
    background: rgba(255, 255, 255, 0.4);
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-fast);
}

.error-page-shortcut:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--phase-tone, var(--inari-orange)) 28%, var(--inari-hairline));
    box-shadow: 0 18px 40px -26px var(--phase-tone, var(--inari-orange));
}

.error-page-shortcut-title {
    font-weight: 700;
}

.error-page-shortcut-copy {
    color: var(--inari-ink-soft);
    font-size: var(--font-small);
}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1024px) {
    .error-page {
        padding: calc(var(--nav-height) + var(--space-7)) 0 var(--space-9);
    }
    .error-page-inner {
        grid-template-columns: 1fr;
    }
    .hero-stage,
    .about-grid,
    .contact-grid,
    .case-study,
    .story-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .case-study-text { text-align: center; align-items: center; }
    .case-study-stats { justify-content: center; }
    .case-study-cta { justify-content: center; }
    /* Desktop sizes the image to ~85vh; in a stacked 1-col layout that
       calc is wrong (image becomes a tall sliver). Let it fill the
       column at natural ratio instead. */
    .case-study-image img { height: auto; width: 100%; }
    /* Hero showcase: tighten media column, reduce min-height */
    .hero-showcase {
        grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
        min-height: 280px;
        padding: var(--space-4);
    }
    .hero-showcase-media { max-width: 180px; }
    .hero-showcase-body { min-height: 180px; }
    /* About: shorter scroll on tablet, smaller founder portraits */
    .about-stage-host { height: 260vh; }
    .about-founders { gap: 36px; }
    .about-founder { width: 132px; height: 132px; }
    /* Services: 3-up grid collapses to a single column. The card's
       own corner-image header layout works at any width, so no card
       structural overrides are needed - just the grid shape. */
    .services-deck {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        margin-top: var(--space-7);
    }
    /* About stats - keep 5-col on tablet with tighter gap and slightly smaller values */
    .about-stats { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
    .about-stat-val { font-size: clamp(1.85rem, 4vw, 2.4rem); }
    .story-results-grid { grid-template-columns: repeat(2, 1fr); }
    .story-stages { grid-template-columns: 1fr; }
    .story-challenges-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .error-page-panel {
        padding: var(--space-5);
    }
    .error-page-shortcuts {
        grid-template-columns: 1fr;
    }
    /* Services: tighten card padding on phones so more content reads
       at narrow widths. */
    .services-card { padding: var(--space-5); gap: var(--space-4); }

    /* About: drop the long pinned scroll-hero on phones - 300vh of
       scroll-linked canvas eats battery and feels broken. Keep the
       payoff instead: the bloomed "final frame" composite (founders
       with agents arranged around them) as a single, non-scrolling
       screen that breathes gently in place. The founders stay
       absolutely centered over the canvas (their 168px size + 52px gap
       mirror the canvas world), and JS sets --about-scale so the DOM
       portraits line up with the drawn agents. */
    .about-stage-host { height: auto; }
    .about-stage {
        position: relative;
        height: min(100svh, 600px);
    }
    .about-canvas { display: block; }
    /* Eyebrow sits at the top of the composite, centered. */
    .about-intro { top: calc(var(--nav-height) + var(--space-3)); text-align: center; }
    /* Headline is the caption of the composite - always visible, pinned
       just inside the bottom edge. */
    .about-headline-wrap {
        opacity: 1;
        transform: none;
        bottom: var(--space-5);
    }
    .about-headline { font-size: clamp(1.6rem, 6vw, 2.25rem); }

    /* Single column with big Boska numbers - editorial, and no orphaned
       5th stat that a 2-col grid would leave dangling. */
    .about-stats { grid-template-columns: 1fr; gap: var(--space-6); }
    .about-stat { align-items: center; text-align: center; }
    .about-stat-val { font-size: 2.75rem; }

    /* Lock to a 2-up grid on phones so the orphan-centering below has a
       predictable column count (auto-fit flips between 1 and 2 across
       phone widths, which would break the centering). */
    .competency-cards { grid-template-columns: 1fr 1fr; }
    /* Centre a lone last card (odd count) instead of leaving it dangling
       on the left. It spans the row but keeps a single column's width. */
    .competency-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - var(--space-2));
    }
    /* Narrow 2-up cards: stack the icon above the title so the title gets
       the full card width instead of wrapping cramped beside the icon. */
    .competency-card-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

    /* Certification badges auto-flow into a single row (6-7 across) which
       crushes the labels on a phone. Wrap to 3 per row instead. */
    .competency-grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4) var(--space-2);
    }

    .about-pillars {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .about-pillars::before { display: none; }
    .about-pillar:first-child,
    .about-pillar:last-child { padding: 0; }
    .about-pillar:first-child {
        padding-bottom: var(--space-7);
        margin-bottom: var(--space-7);
        border-bottom: 1px solid var(--inari-hairline);
    }

    .about-feature {
        grid-template-columns: 1fr;
        gap: var(--space-7);
    }
    /* The 608/1088 portrait is ~570px tall on a phone and blows out the
       section. Cover-crop to a shorter portrait card instead. */
    .about-feature-quote-card { max-width: 320px; aspect-ratio: 4 / 5; }
}


@media (max-width: 768px) {
    body { font-size: 16px; }
    .nav-links { display: none; }
    .nav-toggle { display: flex; }
    .nav-brand { gap: 0.6rem; }
    .nav-partner { height: 40px; padding: 0 0.4rem 0 0.2rem; margin-left: -0.2rem; }
    .nav-partner img { height: 34px; }
    .nav-partner-divider { height: 28px; }
    .nav-logo img { height: 30px; }
    .nav.is-mobile-open .nav-links {
        display: flex;
        position: absolute;
        top: var(--nav-height);
        left: 1rem; right: 1rem;
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem;
        background: #FFFFFF;
        border-radius: var(--radius-xl);
        border: 1px solid var(--inari-hairline);
        box-shadow: var(--shadow-md);
        gap: 0.4rem;
    }
    .nav.is-mobile-open .nav-link { font-weight: 600; }
    .nav-cta { margin-left: 0; margin-top: 0.5rem; text-align: center; }

    /* Mobile: dropdown becomes inline submenu under Services */
    .nav-item { display: block; }
    .nav-link.has-sub { display: flex; justify-content: space-between; width: 100%; }
    .nav-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        width: auto;
        margin: 0.25rem 0 0.5rem 0.75rem;
        padding: 0.35rem;
        background: rgba(255, 255, 255, 0.4);
        border-color: var(--inari-hairline);
        box-shadow: none;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .nav-dropdown::before { display: none; }
    .nav-dropdown-eyebrow { display: none; }
    .nav-dropdown-item { padding: 0.5rem 0.6rem; }
    .nav-dropdown-title { font-size: 0.88rem; }
    .nav-dropdown-desc { display: none; }
    .nav-dropdown-icon { width: 26px; height: 26px; }
    .nav-dropdown-icon svg { width: 14px; height: 14px; }
    .nav-caret { display: none; }
    .field-row { grid-template-columns: 1fr; }
    /* 16px stops iOS Safari from auto-zooming the page on input focus */
    .field input, .field textarea { font-size: 16px; }
    .form-submit-row { flex-direction: column; align-items: stretch; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .story-results-grid { grid-template-columns: 1fr 1fr; }
    .hero { height: auto; min-height: 100vh; min-height: 100svh; max-height: none; padding-top: calc(var(--nav-height) + 2rem); padding-bottom: 3rem; }
    /* The phase layers are position:absolute (stacked for crossfade), so
       the card needs a height to hold them - min-height:0 collapsed it
       and the content spilled over the pills/CTA. On phones we overlap
       the layers in a single grid cell instead: the card auto-sizes to
       the tallest phase, no fixed height to guess, no collapse. */
    .hero-showcase {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 0;
    }
    .hero-showcase-layer {
        position: relative;
        inset: auto;
        grid-area: 1 / 1;
        grid-template-columns: 1fr;   /* stack media over body, full-width text */
        align-content: start;
        gap: var(--space-3);
        padding: var(--space-5);
    }
    .hero-showcase-media { display: none; }   /* drop phase artwork on phones - text-only card reads tighter */
    .hero-showcase-body { min-height: 0; }
    .hero-showcase-desc { max-width: none; }
}

@media (max-width: 480px) {
    .story-results-grid { grid-template-columns: 1fr; }
    .hero-showcase-layer { padding: var(--space-4); }
    .hero-showcase-nav-item { padding: 0.6rem 0.75rem; gap: 0.4rem; }
    .hero-showcase-nav-label { font-size: 0.85rem; }
    .hero-showcase-nav-num { font-size: 0.7rem; }
    /* Keep the three stats on one row - they fit once the padding is
       tightened and the number eased down a touch. */
    .case-study-stats { flex-direction: row; gap: var(--space-2); }
    .case-study-stat { padding: var(--space-3) var(--space-2); text-align: center; }
    .case-study-stat-val { font-size: 1.6rem; }
    .case-study-cta { flex-direction: column; align-items: stretch; }
    .case-study-cta .btn { width: 100%; justify-content: center; }
}

/* ================================================================
   Product suite carousel - products.html only
   - Full-viewport section under the hero, holding three iframe
     "gems" (one real, two coming-soon) stacked with opacity crossfade.
   - Pill-nav structurally mirrors .hero-showcase-nav so the visual
     vocabulary stays consistent across the site.
   ================================================================ */
.product-suite {
    position: relative;
    padding: clamp(var(--space-7), 8vh, var(--space-9)) 0;
}

.product-suite-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
    position: relative;
    z-index: 1;
}

.product-suite-intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 64ch;
}
.product-suite-intro .eyebrow {
    color: var(--phase-tone);
}

.product-suite-frame {
    /* Transparent reserved area. The glass now lives on each video so it can
       hug videos of differing heights without letterboxing; the frame just
       holds a stable height (so the pill nav below never shifts) and stacks
       the slides in a single centered grid cell. */
    position: relative;
    isolation: isolate;
    display: grid;
    width: 100%;
    /* --suite-cap is both the frame's reserved height and each video's max
       height, so the frame is cap-tall before the videos load (low CLS) and
       videos load into it rather than growing it. */
    --suite-cap: min(620px, 70svh);
    min-height: var(--suite-cap);
}
.product-suite-frame::before {
    content: '';
    position: absolute;
    inset: -10% -8% -6% -8%;
    background:
        radial-gradient(55% 50% at 50% 80%,
            color-mix(in srgb, var(--phase-tone) 28%, transparent) 0%,
            transparent 70%),
        radial-gradient(60% 50% at 30% 25%,
            color-mix(in srgb, var(--inari-orange) 18%, transparent) 0%,
            transparent 78%);
    filter: blur(50px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 360ms var(--ease-out);
}
.product-suite-frame:hover::before {
    opacity: 0.85;
}

.product-suite-slide {
    /* All slides occupy the same grid cell (overlap) and center within it, so
       shorter videos sit vertically centered against the page canvas. */
    grid-area: 1 / 1;
    place-self: center;
    border: 0;
    background: transparent;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 480ms var(--ease-out);
    will-change: opacity;
    transform: translateZ(0);
}
/* The wrapped slides (<a>) must shrink-wrap their video so the link box equals
   the glass card, not the whole cell. */
a.product-suite-slide {
    display: inline-flex;
    max-width: 100%;
}
/* The video itself is the glass card - intrinsic sizing means its box equals
   the displayed pixels, so the glass hugs it with no letterbox. Width fills the
   section up to its natural size; height is capped so the stack fits the
   viewport. Covers both the wrapped (<a><video>) and bare (<video>) slides. */
.product-suite-slide video,
video.product-suite-slide {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--suite-cap);
    border-radius: var(--radius-lg);
    border: 1px solid var(--inari-hairline);
    background: var(--inari-glass-strong);
    box-shadow: var(--shadow-lg);
}
.product-suite-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
a.product-suite-slide:focus-visible {
    outline: 2px solid var(--phase-tone);
    outline-offset: 3px;
    border-radius: var(--radius-lg);
}

/* Pill navigation - structurally identical to hero-showcase-nav but
   under its own prefix so tweaks here don't risk regressions on the
   main page showcase. */
.product-suite-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}
.product-suite-nav-item {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.75rem 1rem 0.85rem;
    background: var(--inari-glass-soft);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--inari-ink-muted);
    font-family: var(--font-body);
    cursor: pointer;
    overflow: hidden;
    transition: background 320ms var(--ease-out),
                color 320ms var(--ease-out),
                border-color 320ms var(--ease-out),
                transform 320ms var(--ease-out);
}
.product-suite-nav-num {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: var(--font-micro);
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.product-suite-nav-label {
    position: relative;
    z-index: 1;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.005em;
}
.product-suite-nav-item:hover {
    color: var(--inari-ink);
    border-color: color-mix(in srgb, var(--phase-tone) 30%, var(--inari-hairline));
}
.product-suite-nav-item.is-active {
    background: color-mix(in srgb, var(--phase-tone) 8%, var(--inari-cream));
    color: var(--inari-ink);
    border-color: color-mix(in srgb, var(--phase-tone) 45%, var(--inari-hairline));
    transform: translateY(-1px);
}
.product-suite-nav-item.is-active .product-suite-nav-num {
    opacity: 1;
    color: var(--phase-tone);
}
.product-suite-nav-item:focus-visible {
    outline: 2px solid var(--phase-tone);
    outline-offset: 3px;
}

.product-suite-nav-progress {
    position: absolute;
    inset: 0;
    /* scaleX (compositor) instead of width - see .hero-showcase-nav-progress. */
    transform: scaleX(0);
    transform-origin: left center;
    background: color-mix(in srgb, var(--phase-tone) 50%, transparent);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
}
/* No countdown timer anymore - the active pill just shows a static full fill. */
.product-suite-nav-item.is-active .product-suite-nav-progress {
    opacity: 1;
    transform: scaleX(1);
}

/* Desktop fit-to-viewport: section + intro + frame + pill nav must
   collapse into 100vh minus the fixed nav. The frame takes a fixed
   reserved height (--suite-cap, shrinking on shorter laptops) and the
   wrap centers the intro + frame + nav within the available space. */
@media (min-width: 1025px) {
    .product-suite {
        /* Override .section's min-height: 100vh so the height below
           wins; without this, min-height clamps height back up to 100vh
           per CSS spec and the flex chain has no defined size to share. */
        min-height: 0;
        height: calc(100vh - var(--nav-height));
        padding: var(--space-4) 0 var(--space-5);
    }
    .product-suite > .container {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .product-suite-wrap {
        flex: 1;
        min-height: 0;
        gap: var(--space-3);
        justify-content: center;
    }
    .product-suite-intro {
        gap: var(--space-2);
    }
    .product-suite-frame {
        /* Size to the reserved cap (don't stretch to fill the viewport) so the
           wrap can center the stack and the pill nav sits at a stable spot. */
        flex: 0 0 auto;
        --suite-cap: min(620px, calc(100vh - var(--nav-height) - 210px));
        min-height: var(--suite-cap);
    }
}

@media (max-width: 768px) {
    /* Hug the videos instead of reserving 60svh. The three slides overlap in a
       single grid cell, so the frame already sizes to the tallest (16:9) video;
       dropping min-height removes the big empty gaps above/below the small
       mobile mockup. aspect-ratio reserves that exact height pre-load so the
       reveal doesn't shift (CLS ~0) and the pill nav never jumps. */
    .product-suite-frame {
        --suite-cap: 60svh;
        min-height: 0;
        aspect-ratio: 1280 / 720;
    }
    .product-suite-nav { grid-template-columns: repeat(3, 1fr); }
    /* Stack number over label and center both. Long labels ("AI Data Explorer
       EU", "Inari Marketing Agent") can't fit one line in a third-of-screen
       pill; centering keeps the wrapped lines balanced and stops the short
       labels (CustPilot) from being stranded at the top of equal-height pills. */
    .product-suite-nav-item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.6rem 0.5rem;
        text-align: center;
    }
    .product-suite-nav-label { font-size: 0.85rem; line-height: 1.2; }
}

@media (max-width: 480px) {
    .product-suite-nav-item { padding: 0.55rem 0.4rem; gap: 0.2rem; }
    .product-suite-nav-num { font-size: 0.7rem; }
    .product-suite-nav-label { font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
    .product-suite-slide { transition: none; }
    .product-suite-frame::before { opacity: 0.5; }
}

/* ================================================================
   Small phones (360-400px) - final tightening
================================================================ */
@media (max-width: 400px) {
    .container { padding: 0 1rem; }
    .hero-showcase-nav { gap: var(--space-1); }
}

/* ================================================================
   Touch devices - kill "sticky hover"
   On coarse pointers a tap leaves the :hover lift stuck until the next
   tap elsewhere. Neutralize the transform on the lifting elements; the
   colour/shadow hovers are subtle enough to leave alone.
================================================================ */
@media (hover: none) {
    .btn-primary:hover,
    .btn-ghost:hover,
    .nav-cta:hover,
    .btn-submit:hover:not(:disabled),
    .nav-partner:hover,
    .services-card:hover,
    .competency-card:hover,
    .maturity-card:hover,
    .competency-tile:hover,
    .case-study-stat:hover,
    .about-feature-quote-card:hover,
    .hero-showcase-nav-item:hover,
    .product-suite-nav-item:hover,
    .product-suite-frame:hover,
    .layer-node:hover,
    .layer-outcome:hover,
    .shift-stat:hover,
    .shift-catch-item:hover {
        transform: none;
    }
}

/* Carousels: vertical drags scroll the page; horizontal swipes are
   handled by attachCarouselTouch in script.js. */
#heroShowcase, #productSuite { touch-action: pan-y; }

/* ================================================================
   Frontier Academy - Maturity Spectrum
   Horizontal maturity axis with three illustrative glass stage
   cards. Tone from data-tone="academy" (var(--phase-tone) -> orange).
   Card surface + hover follow the .competency-card idiom; icon badge
   reuses the .competency-card-icon recipe.
   ================================================================ */
.maturity-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}
.maturity-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    text-align: center;
    gap: var(--space-4);
    max-width: none;
}
.maturity-lead { max-width: 90ch; }

.maturity-spectrum {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Horizontal orange maturity axis (pure CSS). 2px gradient rail with
   three node dots aligned to the column centres. */
.maturity-axis {
    position: relative;
    height: 2px;
    margin: 0 calc(100% / 6);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--phase-tone) 25%, transparent) 0%,
        var(--phase-tone) 50%,
        color-mix(in srgb, var(--phase-tone) 25%, transparent) 100%
    );
    border-radius: var(--radius-pill);
}
.maturity-node {
    position: absolute;
    top: 50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--phase-tone);
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 4px var(--inari-cream),
        0 0 0 6px color-mix(in srgb, var(--phase-tone) 30%, transparent);
}
.maturity-node.n1 { left: 0%; }
.maturity-node.n2 { left: 50%; }
.maturity-node.n3 { left: 100%; }

.maturity-stages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.maturity-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--inari-hairline);
    border-radius: var(--radius-lg);
    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(47, 43, 54, 0.04);
    transition: transform var(--t-base),
                box-shadow var(--t-base),
                border-color var(--t-base);
}
.maturity-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--phase-tone) 40%, var(--inari-hairline));
    box-shadow:
        var(--shadow-lg),
        0 18px 40px -22px var(--phase-tone),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(47, 43, 54, 0.04);
}

.maturity-card-tag {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--phase-tone);
}

.maturity-card-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--phase-tone) 14%, transparent);
    color: var(--phase-tone);
    transition: transform var(--t-base);
}
.maturity-card:hover .maturity-card-icon { transform: scale(1.08); }
.maturity-card-icon svg { width: 24px; height: 24px; display: block; }

.maturity-card-title {
    font-family: var(--font-display-family);
    font-weight: 500;
    font-size: var(--font-h3);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--inari-ink);
    margin: 0;
    text-wrap: balance;
}
.maturity-card-desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--inari-ink-soft);
    margin: 0;
}

/* Axis wrap keeps the rail + its endpoint labels tight together; the
   spectrum's own gap then spaces the whole block from the cards. */
.maturity-axis-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* Endpoint captions sit under the outer dots, above the cards. */
.maturity-axis-labels {
    margin-inline: calc(100% / 6);
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--inari-ink-muted);
}
.maturity-axis-labels span:last-child { color: var(--phase-tone); }

/* Sit directly under the hero - no full-viewport gap. The hero already
   owns the first screen; this block flows naturally beneath it. */
.maturity { padding-top: var(--space-7); }

/* Desktop: drop the global .section 100vh so the section hugs the hero,
   and tighten internal rhythm. */
@media (min-width: 1025px) {
    .section.maturity { min-height: 0; justify-content: flex-start; }
    .maturity-inner { gap: var(--space-6); }
    .maturity-card-desc { font-size: 0.9rem; }
}

/* Tablet & below: 3-col -> 1-col. The horizontal axis maps to columns,
   so it is dropped when cards stack; the Adopt/Build/Engineer tags carry
   the progression instead. */
@media (max-width: 1024px) {
    .maturity-stages { grid-template-columns: 1fr; gap: var(--space-4); }
    .maturity-axis-wrap { display: none; }
}

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .maturity-card,
    .maturity-card-icon { transition: none; }
    .maturity-card:hover { transform: none; }
    .maturity-card:hover .maturity-card-icon { transform: none; }
}

/* ================================================================
   Agentic Ops - the shift, and the catch  (Section 1)
   Centered intro, then an asymmetric two-column body (the .case-study
   split): two glass stat cards (momentum) beside three icon-left
   problem rows (the catch). Tone from data-tone="agentic" (purple).
   ================================================================ */
.shift-inner,
.layer-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}
.shift-intro,
.layer-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    text-align: center;
    gap: var(--space-4);
    max-width: none;
}
.shift-lead { max-width: 70ch; }
.layer-lead { max-width: 72ch; }

/* Vertical bands: a two-up stat row, a centered pivot line, then a
   three-up catch row. */
.shift-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* Two stats side by side as glass cards (the .case-study-stat surface,
   recolored to the page tone) so the numerals carry presence. */
.shift-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}
.shift-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--inari-hairline);
    border-radius: var(--radius-lg);
    background: var(--inari-glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: transform var(--t-base),
                box-shadow var(--t-base),
                border-color var(--t-base);
}
.shift-stat:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--phase-tone) 40%, var(--inari-hairline));
    box-shadow:
        var(--shadow-lg),
        0 18px 40px -22px var(--phase-tone),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.shift-stat-val {
    font-family: var(--font-display-family);
    font-weight: 600;
    font-size: clamp(2.75rem, 5.5vw, 3.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    padding-bottom: 0.1em;
    background: linear-gradient(135deg, color-mix(in srgb, var(--phase-tone) 84%, var(--inari-black)), var(--phase-tone));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.shift-stat-label {
    font-family: var(--font-body);
    font-size: var(--font-small);
    font-weight: 500;
    line-height: 1.4;
    color: var(--inari-ink-soft);
}
.shift-stat-src {
    font-family: var(--font-body);
    font-size: var(--font-micro);
    letter-spacing: 0.06em;
    color: var(--inari-ink-muted);
}

/* The catch - centered pivot line (Boska) over three glass cards,
   each an icon + title + one-line desc. */
.shift-catch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}
.shift-catch-lead {
    margin: 0;
    font-family: var(--font-display-family);
    font-weight: 500;
    font-size: var(--font-h3);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--inari-ink);
    text-align: center;
    text-wrap: balance;
}
.shift-catch-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.shift-catch-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--inari-hairline);
    border-radius: var(--radius-lg);
    background: var(--inari-glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: transform var(--t-base),
                box-shadow var(--t-base),
                border-color var(--t-base);
}
.shift-catch-item:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--phase-tone) 40%, var(--inari-hairline));
    box-shadow:
        var(--shadow-lg),
        0 18px 40px -22px var(--phase-tone),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.shift-catch-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--phase-tone) 14%, transparent);
    color: var(--phase-tone);
}
.shift-catch-icon svg { width: 22px; height: 22px; display: block; }
.shift-catch-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.shift-catch-title {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--inari-ink);
}
.shift-catch-desc {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--inari-ink-soft);
}

/* ================================================================
   Agentic Ops - one agentic operational layer  (Section 2)
   Foundation-band diagram: domain agent chips dock (via a 1px tick
   on each chip) onto one shared layer band. Reframes Microsoft's
   "system of work" slide as the layer Inari builds.
   Accent warmed to the Inari-orange brand signature (overriding the
   page's agentic purple) - chips, ticks, band tint and separators all
   follow var(--phase-tone), so the single override below recolors all.
   ================================================================ */
.section.layer { --phase-tone: var(--inari-orange); }
.layer-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    max-width: 780px;
    margin-inline: auto;
}
.layer-nodes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
}
.layer-node {
    position: relative;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-small);
    letter-spacing: 0.04em;
    color: var(--phase-tone);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--inari-hairline);
    border-radius: var(--radius-md);
    background: var(--inari-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base),
                box-shadow var(--t-base),
                border-color var(--t-base);
}
/* Docking tick - a hairline drop from each chip into the gap above
   the band. Lives on the chip so it never drifts when chips reflow. */
.layer-node::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: var(--space-4);
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--phase-tone) 45%, transparent);
}
.layer-node:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--phase-tone) 40%, var(--inari-hairline));
    box-shadow: var(--shadow-md), 0 14px 32px -20px var(--phase-tone);
}
.layer-band {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    padding: var(--space-6) var(--space-5);
    border: 1px solid color-mix(in srgb, var(--phase-tone) 22%, var(--inari-hairline));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--phase-tone) 10%, var(--inari-glass-strong));
    box-shadow:
        var(--shadow-lg),
        0 24px 60px -30px var(--phase-tone),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.layer-band-title {
    font-family: var(--font-display-family);
    font-weight: 500;
    font-size: var(--font-h3);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--inari-ink);
}
.layer-band-sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.55em;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--font-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--inari-ink-muted);
}
.layer-band-sub i { color: var(--phase-tone); font-style: normal; }
/* Attribution note tucked inside the band, under a hairline divider. */
.layer-band-note {
    align-self: stretch;
    margin-top: var(--space-1);
    padding-top: var(--space-4);
    border-top: 1px solid var(--inari-hairline);
    font-family: var(--font-body);
    font-size: var(--font-small);
    color: var(--inari-ink-muted);
    text-align: center;
}

/* Outcomes flow out the bottom of the band: value cards wired to the
   layer by an up-tick that mirrors the domain chips' down-tick. Five
   domains dock in, one layer, three outcomes out. */
.layer-outcomes {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
.layer-outcome {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--inari-hairline);
    border-radius: var(--radius-lg);
    background: var(--inari-glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: transform var(--t-base),
                box-shadow var(--t-base),
                border-color var(--t-base);
}
/* Up-tick rising from the card into the gap above, toward the band. */
.layer-outcome::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: var(--space-4);
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--phase-tone) 45%, transparent);
}
.layer-outcome:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--phase-tone) 40%, var(--inari-hairline));
    box-shadow:
        var(--shadow-lg),
        0 18px 40px -22px var(--phase-tone),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.layer-outcome-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--phase-tone) 14%, transparent);
    color: var(--phase-tone);
}
.layer-outcome-icon svg { width: 20px; height: 20px; display: block; }
.layer-outcome-title {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--inari-ink);
}
.layer-outcome-desc {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-small);
    line-height: 1.45;
    color: var(--inari-ink-soft);
}

/* Sit the shift section snug under the hero, like .maturity. */
.shift { padding-top: var(--space-7); }

/* Desktop: drop the global .section 100vh so both sections flow as a
   scroll beneath the hero rather than forcing a screen each. */
@media (min-width: 1025px) {
    .section.shift,
    .section.layer { min-height: 0; justify-content: flex-start; }
    .shift-inner,
    .layer-inner { gap: var(--space-6); }
    .shift-catch-desc { font-size: 0.9rem; }
}

/* Phones: stat row and catch row collapse to one column. The tablet
   range (769-1024) keeps 2-up stats and 3-up catch. */
@media (max-width: 768px) {
    .shift-body { gap: var(--space-7); }
    .shift-stats,
    .shift-catch-list { grid-template-columns: 1fr; }
    .layer-outcomes { grid-template-columns: 1fr; }
    /* Keep the five domain chips on one line above the band, tightened
       to fit narrow screens; their docking ticks stay visible. */
    .layer-nodes { flex-wrap: nowrap; gap: var(--space-2); }
    .layer-node { padding: var(--space-2) var(--space-3); }
    /* Outcome cards stack vertically, so their up-ticks would miss the
       band - drop only those. */
    .layer-outcome::before { display: none; }
}

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .shift-stat,
    .shift-catch-item,
    .layer-node,
    .layer-outcome { transition: none; }
    .shift-stat:hover,
    .shift-catch-item:hover,
    .layer-node:hover,
    .layer-outcome:hover { transform: none; }
}

/* ----------------------------------------------------------------
   Cookie consent banner - glass card, bottom-left, non-blocking.
   Two equal-size buttons (GDPR equal-prominence). Hyphens only.
---------------------------------------------------------------- */
.cookie-consent {
    position: fixed;
    left: clamp(16px, 3vw, 32px);
    bottom: clamp(16px, 3vw, 32px);
    /* Above page content and nav (500/110/100), below the privacy modal
       (1000) so opening the policy from the banner covers the banner. */
    z-index: 900;
    width: calc(100% - clamp(32px, 6vw, 64px));
    max-width: 460px;
}

.cookie-consent-card {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--inari-hairline);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-consent.is-visible .cookie-consent-card {
    opacity: 1;
    transform: translateY(0);
}

.cookie-consent-text {
    margin: 0 0 var(--space-4);
    font-size: var(--font-small);
    line-height: 1.55;
    color: var(--inari-ink-soft);
}

.cookie-consent-text a {
    color: var(--inari-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-consent-actions {
    display: flex;
    gap: var(--space-3);
}

.cookie-consent-btn {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: var(--font-small);
    font-weight: 600;
    cursor: pointer;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-consent-accept {
    background: linear-gradient(135deg, var(--inari-orange) 0%, var(--inari-coral) 100%);
    color: var(--inari-ink);
}

.cookie-consent-reject {
    background: transparent;
    border-color: var(--inari-hairline);
    color: var(--inari-ink);
}

.cookie-consent-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.cookie-consent-btn:focus-visible {
    outline: 2px solid var(--inari-orange);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .cookie-consent-card {
        transform: none;
        transition: opacity 180ms ease;
    }
    .cookie-consent.is-visible .cookie-consent-card {
        transform: none;
    }
    .cookie-consent-btn,
    .cookie-consent-btn:hover {
        transition: none;
        transform: none;
    }
}