/*
 * Alex Ye Xu portfolio — /alex-ye-xu/ (template page-alex)
 *
 * Visual DNA: warm off-white canvas, graphite ink, teal systems colour, one
 * coral "live signal", muted mint/sky/sand fields, editorial serif, Inter UI,
 * Plex Mono for technical identifiers only.
 *
 * Layer colours are semantic and shared by the hero System Spine, the system
 * map and every layer key: physical, control, software, operations, business,
 * people. Coral is never used for text on light backgrounds (contrast).
 */

:root {
    --pv-canvas: #f6f8f4;
    --pv-paper: #fbfcf9;
    --pv-white: #fff;
    --pv-ink: #17211d;
    --pv-muted: #52605a;
    --pv-teal: #185f56;
    --pv-teal-deep: #0f4740;
    --pv-coral: #ff6846;
    --pv-coral-strong: #d8421f; /* coral for strokes on light backgrounds (≥3:1) */
    --pv-mint: #ddf3e8;
    --pv-sky: #ddebff;
    --pv-sand: #f3e8d6;
    --pv-rule: rgba(23, 33, 29, .18);
    --pv-rule-strong: rgba(23, 33, 29, .42);
    --pv-on-dark: #f1efe8;
    --pv-on-dark-muted: #b4bfb8;
    --pv-focus: var(--ax-focus, #1457d9);

    --pv-l-physical: #cbe8d8;
    --pv-l-control: #e2f4ea;
    --pv-l-software: #ddebff;
    --pv-l-operations: #e7ebe4;
    --pv-l-business: #f3e8d6;
    --pv-l-people: #fbf3e6;

    --pv-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --pv-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --pv-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

    --pv-shell: 88rem;
    --pv-gutter: clamp(1rem, 4vw, 4rem);
    --pv-col-gap: clamp(1rem, 2.4vw, 2.5rem);
    --pv-section: clamp(4.5rem, 9vw, 8.5rem);
    --pv-measure: 40rem;
    --pv-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Page frame ---------- */

/* The theme's fluid body preset shrinks to ~14px on phones; these reading
   pages (Portfolio and Robotics) keep a 16px floor at every width. */
.ax-alex-page {
    background: var(--pv-canvas);
    color: var(--pv-ink);
    font-family: var(--pv-sans);
    font-size: 1rem;
    line-height: 1.55;
    overflow: clip;
    padding: 0;
}

:where(.ax-alex-page) *,
:where(.ax-alex-page) *::before,
:where(.ax-alex-page) *::after {
    box-sizing: border-box;
}

:where(.ax-alex-page) :where(h1, h2, h3, h4, p, ol, ul, dl, dd, figure) {
    margin: 0;
}

:where(.ax-alex-page) :where(ol, ul) {
    list-style: none;
    padding: 0;
}

.ax-alex-page .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

:where(.ax-alex-page) a {
    color: inherit;
}

.ax-alex-page :focus-visible {
    outline: 3px solid var(--pv-focus);
    outline-offset: 3px;
}

/* The main landmark is only a skip-link target; fragment targets keep a ring. */
.ax-alex-page:focus {
    outline: none;
}

.ax-shell {
    margin-inline: auto;
    max-width: var(--pv-shell);
    padding-inline: var(--pv-gutter);
    width: 100%;
}

/* Clear the sticky site header and the bottom section pill for anchors and focus. */
html {
    scroll-padding-bottom: 5rem;
    scroll-padding-top: 6.5rem;
}

/* ---------- Shared typography ---------- */

:where(.ax-alex-page) h2 {
    font-family: var(--pv-serif);
    font-size: clamp(2.05rem, 4.3vw, 4.1rem);
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1.03;
    max-width: 17ch;
    text-wrap: balance;
}

.ax-prose {
    color: var(--pv-muted);
    display: grid;
    font-size: 1.0625rem;
    gap: 1em;
    line-height: 1.65;
    max-width: var(--pv-measure);
}

.ax-prose--serif {
    color: var(--pv-ink);
    font-family: var(--pv-serif);
    font-size: clamp(1.125rem, 1.5vw, 1.3rem);
    line-height: 1.6;
    max-width: 36rem;
}

.ax-head {
    display: grid;
    gap: 1.25rem var(--pv-col-gap);
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.ax-head__label,
.ax-case__label,
.ax-contact__label {
    align-items: center;
    color: var(--pv-teal);
    display: flex;
    font-size: .875rem;
    font-weight: 650;
    gap: .75rem;
    letter-spacing: .01em;
}

.ax-head__label::before,
.ax-contact__label::before {
    background: currentColor;
    content: "";
    height: 1px;
    width: 1.75rem;
}

.ax-head__body {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 64rem) {
    .ax-head {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .ax-head__label {
        align-self: start;
        grid-column: 1 / span 3;
        padding-top: .9rem;
    }

    .ax-head__body {
        grid-column: 4 / -1;
    }
}

/* ---------- Actions ---------- */

.ax-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
}

.ax-button {
    align-items: center;
    border: 1px solid var(--pv-ink);
    border-radius: 999px;
    color: var(--pv-ink);
    display: inline-flex;
    font-size: .95rem;
    font-weight: 700;
    gap: .6rem;
    min-height: 3rem;
    padding: .25rem 1.3rem;
    text-decoration: none;
    transition: background-color .18s var(--pv-ease), color .18s var(--pv-ease);
}

.ax-button:hover {
    background: rgba(23, 33, 29, .06);
}

.ax-button--primary {
    background: var(--pv-ink);
    color: var(--pv-white);
}

.ax-button--primary:hover {
    background: var(--pv-teal-deep);
}

.ax-button--light {
    background: var(--pv-on-dark);
    border-color: var(--pv-on-dark);
    color: var(--pv-ink);
}

.ax-button--light:hover {
    background: var(--pv-white);
}

.ax-button span[aria-hidden],
.ax-textlink span[aria-hidden] {
    transition: transform .18s var(--pv-ease);
}

.ax-button:hover span[aria-hidden],
.ax-textlink:hover span[aria-hidden] {
    transform: translate(.15rem, -.1rem);
}

.ax-button--primary:hover span[aria-hidden] {
    transform: translateY(.15rem);
}

.ax-textlink {
    align-items: center;
    display: inline-flex;
    font-weight: 700;
    gap: .4rem;
    min-height: 2.75rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .28em;
}

.ax-textlink:hover {
    text-decoration-thickness: 2px;
}

/* ---------- Section navigation (tablet and up only) ---------- */

.ax-portfolio-nav {
    display: none;
}

@media (min-width: 48rem) {
    .ax-portfolio-nav {
        backdrop-filter: blur(14px);
        background: rgba(246, 248, 244, .92);
        border: 1px solid var(--pv-rule);
        border-radius: 999px;
        bottom: max(1rem, env(safe-area-inset-bottom));
        display: block;
        left: 50%;
        padding: .25rem;
        position: fixed;
        transform: translateX(-50%);
        z-index: 20;
    }

    /* Out of the way while the hero is in view, but always reachable by keyboard. */
    .ax-nav-ready .ax-portfolio-nav {
        transition: opacity .25s var(--pv-ease), transform .25s var(--pv-ease);
    }

    .ax-nav-ready .ax-portfolio-nav:not(.is-shown):not(:focus-within) {
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 1rem);
    }

    .ax-portfolio-nav a:focus-visible {
        outline-offset: -3px;
    }

    .ax-portfolio-nav ul {
        display: flex;
        gap: .1rem;
    }

    .ax-portfolio-nav a {
        align-items: center;
        border-radius: 999px;
        color: var(--pv-muted);
        display: flex;
        font-size: .8rem;
        font-weight: 650;
        min-height: 2.75rem;
        padding: 0 1rem;
        text-decoration: none;
        white-space: nowrap;
    }

    .ax-portfolio-nav a:hover {
        color: var(--pv-ink);
    }

    .ax-portfolio-nav a.is-active {
        background: var(--pv-ink);
        color: var(--pv-white);
    }
}

/* ---------- Section jump rail (phones) ----------
 * Shared by Portfolio (.ax-portfolio-nav, a fixed pill from 48rem) and
 * Robotics (.ax-jump--robotics). Real anchors; section-rail.js docks it
 * under the sticky header via --ax-header-h and marks the current section.
 */

@media (max-width: 47.99rem) {
    html:has(.ax-jump) {
        scroll-padding-top: calc(var(--ax-header-h, 4rem) + 3.75rem);
    }

    .ax-jump {
        backdrop-filter: blur(12px);
        background: rgba(246, 248, 244, .96);
        border-block: 1px solid var(--pv-rule);
        display: block;
        position: sticky;
        top: var(--ax-header-h, 4rem);
        /* Set by section-rail.js while the header is scrolled away. */
        transform: translateY(var(--ax-jump-shift, 0px));
        z-index: 15;
    }

    .ax-jump.is-docking {
        transition: transform 220ms var(--pv-ease);
    }

    .ax-jump ul {
        display: flex;
        gap: .15rem;
        overflow-x: auto;
        /* A soft right edge says "more"; the end padding lets the last link
           clear the fade once scrolled. */
        mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
        overscroll-behavior-x: contain;
        padding-inline: calc(var(--pv-gutter) - .7rem) 1.75rem;
        position: relative;
        scrollbar-width: none;
    }

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

    .ax-jump a {
        align-items: center;
        box-shadow: inset 0 -2px 0 transparent;
        color: var(--pv-muted);
        display: flex;
        font-size: .9rem;
        font-weight: 650;
        min-height: 3rem;
        padding: 0 .7rem;
        text-decoration: none;
        white-space: nowrap;
    }

    .ax-jump a.is-active,
    .ax-jump a[aria-current="location"] {
        box-shadow: inset 0 -2px 0 var(--pv-teal);
        color: var(--pv-ink);
    }

    .ax-jump a:focus-visible {
        outline-offset: -3px;
    }
}

@media (min-width: 48rem) {
    .ax-jump--robotics {
        display: none;
    }
}

/* Progressive disclosure: secondary detail is a <details> that is open on
   wide screens (summary hidden) and collapsed on phones by the pre-paint
   script ayxworks_mobile_collapse_script(); shared by Robotics and Portfolio. All text stays in the HTML. */

.ax-more {
    min-width: 0;
}

.ax-more__summary {
    align-items: center;
    border-top: 1px solid var(--pv-rule);
    color: var(--pv-ink);
    cursor: pointer;
    display: flex;
    font-size: .9rem;
    font-weight: 700;
    gap: 1rem;
    justify-content: space-between;
    list-style: none;
    min-height: 3rem;
}

.ax-more__summary::-webkit-details-marker {
    display: none;
}

.ax-more__summary::after {
    color: var(--pv-teal);
    content: "+";
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
}

.ax-more[open] > .ax-more__summary {
    margin-bottom: .75rem;
}

.ax-more[open] > .ax-more__summary::after {
    content: "\2212";
}

.ax-more__summary:focus-visible {
    outline-offset: 2px;
}

@media (min-width: 48rem) {
    .ax-more__summary {
        display: none;
    }
}

/* ---------- Hero ---------- */

/* No bottom padding: the evidence rail closes the hero on the next rule. */
.ax-hero {
    padding-block: clamp(2rem, 5vw, 4.5rem) 0;
    position: relative;
}

/* Coral tab on the header rule, aligned with the shell's content edge. */
.ax-hero::before {
    background: var(--pv-coral);
    content: "";
    height: .3rem;
    left: calc(max(0px, (100% - var(--pv-shell)) / 2) + var(--pv-gutter));
    position: absolute;
    top: 0;
    width: clamp(4rem, 10vw, 10rem);
}

/* Section seams. #ax-main is a WordPress flow-layout group, so every child
   gets margin-block-start: var(--wp--preset--spacing--6) (blockGap, 1.5rem)
   from :root :where(.is-layout-flow) > *. These sections own their spacing
   with padding, and where the background changes (sand capabilities → ink
   industry) the margin shows the canvas as a strip. Zeroed only here. */
.ax-hero + .ax-portfolio-nav,
.ax-portfolio-nav + .ax-about,
.ax-capabilities + .ax-industry {
    margin-block-start: 0;
}

.ax-hero__grid {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
}

.ax-hero__copy {
    align-content: center;
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

/* Personal introduction: a human counterpoint beneath the intact two-column
   thesis / System Spine hero, never a competing full-width portrait. */
/* Editorial introduction: the real portrait is the visual, not an avatar
   in a formal badge. This module stays below the untouched System Spine. */
.ax-hero__bio-wrap {
    margin-top: clamp(1.75rem, 3.5vw, 3rem);
}

.ax-hero__bio {
    background: linear-gradient(135deg, var(--pv-white), var(--pv-paper) 75%, var(--pv-mint));
    border: 1px solid var(--pv-rule);
    border-radius: 1rem;
    box-shadow: 0 .75rem 2.5rem rgba(23, 33, 29, .055);
    display: grid;
    gap: 0;
    margin-inline: auto;
    max-width: 56rem;
    min-width: 0;
    overflow: hidden;
}

.ax-hero__bio--with-portrait {
    grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr);
}

.ax-hero__bio:not(.ax-hero__bio--with-portrait) {
    max-width: 44rem;
}

.ax-hero__bio-photo {
    align-self: stretch;
    min-height: 18rem;
    min-width: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.ax-hero__bio-photo .ax-hero__portrait-image {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    position: absolute;
    inset: 0;
    width: 100%;
}

.ax-hero__bio-copy {
    align-content: center;
    display: grid;
    gap: .8rem;
    min-width: 0;
    padding: clamp(1.5rem, 3vw, 2.75rem);
}

.ax-hero__bio-kicker {
    align-items: center;
    color: var(--pv-teal-deep);
    display: flex;
    font-size: .76rem;
    font-weight: 700;
    gap: .7rem;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.ax-hero__bio-kicker::before {
    background: var(--pv-teal);
    content: "";
    flex: 0 0 1.5rem;
    height: 2px;
}

.ax-hero__bio-heading {
    font-family: var(--pv-serif);
    font-size: clamp(1.95rem, 3vw, 2.55rem);
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.13;
}

.ax-hero__bio-text {
    color: var(--pv-muted);
    font-size: 1.0625rem;
    line-height: 1.65;
    max-width: 35rem;
}

/* On phones the picture becomes a generous editorial cover. A left-aligned
   introduction below it reads naturally rather than like a memorial badge. */
@media (max-width: 47.99rem) {
    .ax-hero__bio {
        border-radius: .85rem;
        max-width: 100%;
    }

    .ax-hero__bio--with-portrait {
        grid-template-columns: minmax(0, 1fr);
    }

    .ax-hero__bio-photo {
        aspect-ratio: 3 / 2;
        min-height: 0;
    }

    .ax-hero__bio-copy {
        gap: .75rem;
        justify-items: start;
        padding: 1.35rem clamp(1.25rem, 5vw, 2rem) 1.65rem;
        text-align: left;
    }

    .ax-hero__bio-heading {
        font-size: clamp(1.9rem, 7.5vw, 2.35rem);
    }

    .ax-hero__bio-text {
        font-size: 1rem;
        line-height: 1.65;
        max-width: 100%;
        text-align: left;
    }
}

@media (max-width: 22.49rem) {
    .ax-hero__bio-copy {
        padding: 1.15rem 1.15rem 1.4rem;
    }

    .ax-hero__bio-heading {
        font-size: 1.85rem;
    }
}

.ax-hero__who {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .9rem;
}

.ax-hero__name {
    font-family: var(--pv-serif);
    font-size: clamp(1.25rem, 1.8vw, 1.6rem);
    font-weight: 600;
    letter-spacing: -.01em;
}

.ax-hero__role {
    color: var(--pv-muted);
    font-size: .9rem;
    font-weight: 600;
}

.ax-hero h1 {
    font-family: var(--pv-serif);
    font-size: clamp(2.55rem, 5.2vw, 5.4rem);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: 1;
    max-width: 13ch;
    text-wrap: balance;
}

.ax-hero__lede {
    font-family: var(--pv-serif);
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    line-height: 1.45;
    max-width: 36rem;
}

.ax-hero__support {
    color: var(--pv-muted);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 36rem;
}

.ax-hero .ax-actions {
    margin-top: .5rem;
}

@media (max-width: 35.99rem) {
    .ax-hero .ax-button:not(.ax-button--primary) {
        border: 0;
        min-height: 2.75rem;
        padding-inline: 0;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: .28em;
    }

    .ax-hero .ax-button:not(.ax-button--primary):hover {
        background: none;
    }
}

@media (min-width: 64rem) {
    .ax-hero__grid {
        align-items: center;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    }
}

/* Evidence rail */

.ax-evidence {
    border-top: 1px solid var(--pv-rule-strong);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

.ax-evidence > div {
    border-bottom: 1px solid var(--pv-rule);
    display: grid;
    gap: .3rem;
    padding: 1rem 1rem 1rem 0;
}

.ax-evidence > div:nth-child(even) {
    border-left: 1px solid var(--pv-rule);
    padding-left: 1rem;
}

.ax-evidence dt {
    color: var(--pv-muted);
    font-size: .8rem;
    font-weight: 600;
}

.ax-evidence dd {
    font-size: .95rem;
    font-weight: 650;
    line-height: 1.35;
}

/* The last row ends on the next rule (the phone rail, or #system's top
   rule), so it draws no rule of its own. */
@media (max-width: 63.99rem) {
    .ax-evidence > div:last-child,
    .ax-evidence > div:nth-last-child(2):nth-child(odd) {
        border-bottom: 0;
        padding-bottom: 1.5rem;
    }
}

/* Phones: the rail's bottom rule already divides it from #system. */
@media (max-width: 47.99rem) {
    .ax-portfolio-nav + .ax-system-map {
        border-top: 0;
    }
}

@media (min-width: 64rem) {
    .ax-evidence {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Separators run down to #system's top rule. */
    .ax-evidence > div {
        border-bottom: 0;
        padding: 1.1rem 1.25rem clamp(1.75rem, 2.5vw, 2.25rem);
    }

    .ax-evidence > div:first-child {
        padding-left: 0;
    }

    .ax-evidence > div + div {
        border-left: 1px solid var(--pv-rule);
    }
}

/* ---------- System Spine ---------- */

.ax-spine {
    /* The diagram and caption are one vertically stacked figure at every
       breakpoint, even when a phone requests a desktop-sized viewport. */
    align-content: start;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    width: 100%;
}

.ax-spine__canvas {
    aspect-ratio: 789 / 640;
    min-width: 0;
    width: 100%;
    background: var(--pv-paper);
    border: 1px solid var(--pv-rule-strong);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.ax-spine__bands {
    inset: 0;
    position: absolute;
}

.ax-spine__band {
    align-content: start;
    border-top: 1px dashed var(--pv-rule);
    display: grid;
    gap: .05rem;
    left: 0;
    padding: clamp(.3rem, 1vw, .65rem) clamp(.45rem, 1.2vw, .9rem);
    position: absolute;
    right: 0;
    transition: background-color .4s var(--pv-ease);
}

/* Band geometry mirrors the SVG viewBox (0 0 600 640): heavier at the machine, thinner as it abstracts. */
.ax-spine__band--physical { background: var(--pv-l-physical); height: 40.625%; top: 59.375%; }
.ax-spine__band--control { background: var(--pv-l-control); height: 20.3125%; top: 39.0625%; }
.ax-spine__band--software { background: var(--pv-l-software); height: 14.0625%; top: 25%; }
.ax-spine__band--operations { background: var(--pv-l-operations); height: 12.5%; top: 12.5%; }
.ax-spine__band--business { background: var(--pv-l-business); border-top: 0; height: 12.5%; top: 0; }

.ax-spine__id {
    color: var(--pv-teal);
    font-family: var(--pv-mono);
    font-size: clamp(.6rem, .9vw, .68rem);
    font-weight: 600;
}

.ax-spine__name {
    font-size: clamp(.68rem, 1.2vw, .85rem);
    font-weight: 650;
    line-height: 1.2;
}

/* The robot occupies the drawing from the Machine and Control bands' left edge onward. */
.ax-spine__band--physical .ax-spine__name,
.ax-spine__band--control .ax-spine__name {
    max-width: 23%;
}

.ax-spine__short {
    display: none;
}

@media (max-width: 47.99rem) {
    .ax-spine__band {
        align-items: baseline;
        display: flex;
        gap: .35rem;
    }

    .ax-spine__name {
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .ax-spine__short {
        display: block;
        font-size: .7rem;
        font-weight: 650;
        line-height: 1.2;
    }
}

.ax-spine__detail {
    display: none;
}

.ax-spine__svg {
    color: var(--pv-ink);
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 76%;
}

.ax-d-solid {
    fill: none;
    stroke: var(--pv-ink);
    stroke-linejoin: round;
    stroke-width: 2;
}

.ax-spine__fill,
.ax-spine__joint {
    fill: var(--pv-paper);
}

.ax-d-dash {
    fill: none;
    stroke: var(--pv-ink);
    stroke-dasharray: .012 .016;
    stroke-opacity: .5;
    stroke-width: 1.2;
}

.ax-spine__construct path {
    fill: none;
    stroke: var(--pv-ink);
    stroke-opacity: .45;
    stroke-width: 1.2;
}

.ax-spine__construct .ax-d-dash {
    stroke-dasharray: .01 .014;
}

.ax-spine__cross {
    stroke: var(--pv-ink);
    stroke-width: 1.2;
}

.ax-spine__work {
    fill: var(--pv-sand);
    stroke: var(--pv-ink);
    stroke-width: 2;
}

.ax-spine__lens {
    fill: var(--pv-teal);
}

.ax-spine__vision .ax-d-dash {
    stroke: var(--pv-teal);
    stroke-opacity: .85;
}

.ax-spine__scan {
    opacity: 0;
    stroke: var(--pv-coral);
    stroke-width: 3;
}

.ax-spine__tcp {
    fill: var(--pv-coral);
}

.ax-spine__trace path {
    fill: none;
    stroke: var(--pv-teal);
    stroke-width: 2.5;
}

.ax-spine__trace .ax-d-dash {
    stroke: var(--pv-teal);
    stroke-opacity: .6;
    stroke-width: 1.4;
}

.ax-spine__nodes :where(rect, path, circle) {
    fill: var(--pv-paper);
    stroke: var(--pv-ink);
    stroke-width: 2;
}

.ax-spine__nodes path {
    fill: none;
}

.ax-spine__nodes [data-spine-node="business"] path {
    fill: var(--pv-ink);
}

.ax-spine__nodes .ax-spine__led {
    fill: var(--pv-coral);
    stroke: none;
}

.ax-spine__nodes .ax-spine__ghost {
    fill: none;
    stroke: var(--pv-teal);
    stroke-dasharray: 3 3;
    stroke-width: 1.4;
}

.ax-spine__nodes .ax-spine__goal {
    fill: none;
    stroke: var(--pv-coral-strong);
    stroke-width: 2.5;
}

.ax-spine__packet {
    fill: var(--pv-coral);
    opacity: 0;
}

.ax-spine__band.is-live {
    background-image: linear-gradient(90deg, rgba(255, 104, 70, .16), transparent 60%);
}

.ax-spine__caption {
    color: var(--pv-muted);
    font-size: .875rem;
    grid-column: 1;
    line-height: 1.5;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    width: 100%;
}

.ax-spine__caption strong {
    color: var(--pv-ink);
    font-weight: 650;
}

/* Hidden only between first paint and the GSAP takeover; text is never hidden. */
.ax-spine-boot .ax-spine__svg > g {
    opacity: 0;
}

/* ---------- System map ---------- */

.ax-system-map {
    border-top: 1px solid var(--pv-rule);
    padding-block: var(--pv-section);
}

.ax-map {
    border: 1px solid var(--pv-rule-strong);
    border-radius: 4px;
    overflow: hidden;
}

.ax-map__people {
    align-items: baseline;
    background: var(--pv-l-people);
    border-bottom: 1px dashed var(--pv-rule-strong);
    display: flex;
    flex-wrap: wrap;
    font-size: .95rem;
    gap: .25rem .9rem;
    padding: .9rem clamp(1rem, 2vw, 1.5rem);
}

.ax-map__people strong {
    font-weight: 700;
}

.ax-map__people span {
    color: var(--pv-muted);
}

.ax-map__chain {
    display: grid;
}

.ax-map__layer {
    display: grid;
    gap: .35rem;
    padding: 1.25rem clamp(1rem, 2vw, 1.5rem) 1.5rem;
    position: relative;
}

.ax-map__layer--physical { background: var(--pv-l-physical); }
.ax-map__layer--control { background: var(--pv-l-control); }
.ax-map__layer--software { background: var(--pv-l-software); }
.ax-map__layer--operations { background: var(--pv-l-operations); }
.ax-map__layer--business { background: var(--pv-l-business); }

.ax-map__id {
    color: var(--pv-teal);
    font-family: var(--pv-mono);
    font-size: .75rem;
    font-weight: 600;
}

.ax-map__layer h3 {
    font-family: var(--pv-serif);
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-weight: 500;
    letter-spacing: -.015em;
}

.ax-map__layer p {
    color: #3c4a44;
    font-size: .95rem;
    line-height: 1.5;
}

.ax-map__iface {
    background: var(--pv-paper);
    border: 1.5px solid var(--pv-teal);
    border-radius: 999px;
    bottom: -.85rem;
    color: var(--pv-teal);
    display: grid;
    height: 1.7rem;
    left: clamp(1rem, 2vw, 1.5rem);
    place-items: center;
    position: absolute;
    width: 1.7rem;
    z-index: 2;
}

.ax-map__iface svg {
    height: .6rem;
    transform: rotate(90deg);
    width: 1rem;
}

.ax-map__iface path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
}

.ax-map__note {
    color: var(--pv-muted);
    font-family: var(--pv-serif);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    line-height: 1.4;
    margin-top: 1.5rem;
    max-width: 34rem;
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
    .ax-map__layer {
        align-items: baseline;
        grid-template-columns: 2.5rem 11rem minmax(0, 1fr);
    }
}

@media (min-width: 64rem) {
    .ax-map__chain {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .ax-map__layer {
        align-content: start;
        padding-top: 1.5rem;
    }

    .ax-map__iface {
        bottom: auto;
        left: auto;
        right: -.85rem;
        top: 1.45rem;
    }

    .ax-map__iface svg {
        transform: none;
    }
}

/* ---------- Layer key ---------- */

.ax-lk {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .6rem;
}

.ax-lk__label {
    color: var(--pv-muted);
    font-size: .78rem;
    font-weight: 650;
}

.ax-lk__list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.ax-lk__item {
    border: 1px dashed var(--pv-rule-strong);
    border-radius: 3px;
    color: var(--pv-muted);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1;
    padding: .32rem .45rem;
}

.ax-lk__item.is-on {
    border: 1px solid var(--pv-ink);
    color: var(--pv-ink);
    font-weight: 650;
}

.ax-lk__item--physical.is-on { background: var(--pv-l-physical); }
.ax-lk__item--control.is-on { background: var(--pv-l-control); }
.ax-lk__item--software.is-on { background: var(--pv-l-software); }
.ax-lk__item--operations.is-on { background: var(--pv-l-operations); }
.ax-lk__item--business.is-on { background: var(--pv-l-business); }
.ax-lk__item--people.is-on { background: var(--pv-l-people); }

/* ---------- Selected work ---------- */

.ax-work {
    border-top: 1px solid var(--pv-rule);
    padding-top: var(--pv-section);
}

.ax-case {
    padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.ax-case--eurobots {
    background: var(--pv-mint);
}

.ax-case--rallyking {
    background: var(--pv-sky);
}

.ax-case__grid {
    display: grid;
    gap: 1.25rem var(--pv-col-gap);
}

.ax-case__label::before {
    background: currentColor;
    content: "";
    height: 1px;
    width: 1.75rem;
}

.ax-case__title {
    font-family: var(--pv-serif);
    font-size: clamp(1.85rem, 3.4vw, 3.2rem);
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.06;
    max-width: 18ch;
    text-wrap: balance;
}

.ax-case__body {
    color: #3c4a44;
}

.ax-case__visual {
    margin-block: .75rem;
}

.ax-case__caption {
    color: var(--pv-muted);
    font-size: .85rem;
    line-height: 1.5;
    margin-top: .9rem;
    max-width: 38rem;
}

.ax-case__proof {
    align-content: start;
    display: grid;
    gap: .7rem;
}

.ax-case__proof h4 {
    color: var(--pv-muted);
    font-size: .8rem;
    font-weight: 650;
    margin-top: .35rem;
}

.ax-proof-list {
    display: grid;
    gap: .5rem;
}

.ax-proof-list a {
    display: block;
    font-size: .95rem;
    line-height: 1.45;
    min-height: 2.75rem;
    padding-block: .55rem;
    text-decoration: none;
}

.ax-proof-list a:hover strong {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.ax-meta-list {
    display: flex;
    flex-wrap: wrap;
    font-size: .92rem;
    gap: .2rem 0;
    line-height: 1.5;
}

.ax-meta-list li:not(:last-child)::after {
    color: var(--pv-rule-strong);
    content: "/";
    content: "/" / "";
    padding-inline: .5rem;
}

.ax-case__status {
    color: var(--pv-muted);
    font-size: .9rem;
}

.ax-case__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    margin-top: .25rem;
}

@media (min-width: 64rem) {
    .ax-case__grid {
        align-items: start;
        grid-template-areas:
            "label visual"
            "title visual"
            "body visual"
            "proof visual"
            "cta visual";
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-rows: auto auto auto auto 1fr;
    }

    .ax-case__label { grid-area: label; }
    .ax-case__title { grid-area: title; }
    .ax-case__body { grid-area: body; }
    .ax-case__proof { grid-area: proof; margin-top: .75rem; }
    .ax-case__cta { grid-area: cta; }

    .ax-case__visual {
        align-self: center;
        grid-area: visual;
        margin: 0;
    }

    .ax-case--rallyking .ax-case__grid {
        grid-template-areas:
            "visual label"
            "visual title"
            "visual body"
            "visual proof"
            "visual cta";
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

/* Eurobots cell drawing */

.ax-cell__svg {
    background: var(--pv-paper);
    border: 1px solid var(--pv-rule-strong);
    border-radius: 4px;
    display: block;
    height: auto;
    width: 100%;
}

.ax-cell__svg :where(rect, circle) {
    fill: var(--pv-paper);
    stroke: var(--pv-ink);
    stroke-width: 2;
}

.ax-cell__svg path {
    fill: none;
    stroke: var(--pv-ink);
    stroke-width: 2;
}

.ax-cell__fence path {
    stroke-dasharray: .006 .008;
    stroke-width: 2.5;
}

.ax-cell__curtain path {
    stroke: var(--pv-teal);
    stroke-dasharray: 2 5;
    stroke-width: 3;
}

.ax-cell__curtain rect {
    fill: var(--pv-teal);
    stroke: none;
}

.ax-cell__svg .ax-cell__reach {
    fill: rgba(24, 95, 86, .05);
    stroke: var(--pv-teal);
    stroke-dasharray: .006 .01;
    stroke-width: 1.5;
}

.ax-cell__bus path {
    stroke: var(--pv-teal);
    stroke-opacity: .55;
}

.ax-cell__svg .ax-cell__arm {
    stroke-linecap: round;
    stroke-width: 12;
}

.ax-cell__svg .ax-cell__arm--tool {
    stroke: var(--pv-teal);
    stroke-width: 7;
}

.ax-cell__svg .ax-cell__part {
    fill: var(--pv-sand);
}

.ax-cell__svg .ax-cell__cone {
    stroke: var(--pv-teal);
    stroke-dasharray: 4 4;
    stroke-width: 1.5;
}

.ax-cell__svg .ax-cell__led {
    fill: var(--pv-coral);
    stroke: none;
}

.ax-cell__svg .ax-cell__flow {
    stroke-dasharray: 2 6;
    stroke-linecap: round;
    stroke-width: 3;
}

.ax-cell__svg .ax-cell__signal {
    /* Transient live signal: drawn once by motion, absent from the static drawing. */
    opacity: 0;
    stroke: var(--pv-coral);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.ax-cell__marks circle {
    fill: var(--pv-ink);
    stroke: var(--pv-paper);
    stroke-width: 2;
}

.ax-cell__marks text {
    fill: var(--pv-paper);
    font-family: var(--pv-sans);
    font-weight: 700;
    text-anchor: middle;
}

.ax-cell__legend {
    counter-reset: cell;
    display: grid;
    font-size: .92rem;
    gap: .45rem 1.5rem;
    margin-top: 1rem;
}

.ax-cell__legend li {
    align-items: center;
    counter-increment: cell;
    display: flex;
    gap: .6rem;
    line-height: 1.35;
}

.ax-cell__legend li::before {
    background: var(--pv-ink);
    border-radius: 50%;
    color: var(--pv-paper);
    content: counter(cell);
    display: grid;
    flex: none;
    font-size: .72rem;
    font-weight: 700;
    height: 1.4rem;
    place-items: center;
    width: 1.4rem;
}

@media (min-width: 36rem) {
    .ax-cell__legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* RallyKing product loop */

.ax-product__flow {
    display: grid;
    gap: 1rem;
}

.ax-product__screen {
    display: grid;
    gap: .5rem;
}

.ax-product__step {
    color: var(--pv-teal);
    font-size: .8rem;
    font-weight: 700;
}

.ax-product__screen + .ax-product__screen .ax-product__step::before {
    content: "→ ";
    content: "→ " / "";
}

.ax-product__ui {
    background: var(--pv-ink);
    border-radius: 1.4rem;
    box-shadow: 0 1.5rem 3rem -1.5rem rgba(23, 33, 29, .45);
    color: var(--pv-on-dark);
    display: grid;
    gap: .55rem;
    padding: 1.1rem 1rem 1.2rem;
}

.ax-product__eyebrow {
    color: var(--pv-on-dark-muted);
    font-size: .72rem;
    font-weight: 600;
}

.ax-product__title {
    font-family: var(--pv-serif);
    font-size: 1.3rem;
    line-height: 1.1;
}

.ax-product__rows {
    display: grid;
    gap: .35rem;
}

.ax-product__rows li {
    align-items: center;
    background: rgba(241, 239, 232, .07);
    border-radius: .6rem;
    display: grid;
    font-size: .78rem;
    gap: .5rem;
    grid-template-columns: 1fr auto auto;
    padding: .55rem .6rem;
}

.ax-product__rows li.is-picked {
    background: var(--pv-on-dark);
    color: var(--pv-ink);
}

.ax-product__rows em {
    color: var(--pv-coral);
    font-style: normal;
    font-weight: 700;
}

.ax-product__rows li.is-picked em {
    color: var(--pv-teal);
}

.ax-product__people {
    display: flex;
    gap: .3rem;
}

.ax-product__people i {
    background: var(--pv-l-software);
    border-radius: 50%;
    color: var(--pv-ink);
    display: grid;
    font-size: .68rem;
    font-style: normal;
    font-weight: 700;
    height: 2rem;
    place-items: center;
    width: 2rem;
}

.ax-product__people i:nth-child(2) { background: var(--pv-l-business); }
.ax-product__people i:nth-child(3) { background: var(--pv-l-physical); }

.ax-product__people i.is-open {
    background: transparent;
    border: 1.5px dashed var(--pv-on-dark-muted);
    color: var(--pv-on-dark);
}

.ax-product__status {
    color: var(--pv-on-dark-muted);
    font-size: .78rem;
}

.ax-product__score {
    display: flex;
    font-family: var(--pv-serif);
    font-size: 2rem;
    gap: 1rem;
}

.ax-product__score span + span {
    color: var(--pv-on-dark-muted);
}

.ax-product__btn {
    background: var(--pv-coral);
    border-radius: 999px;
    color: var(--pv-ink);
    font-size: .78rem;
    font-weight: 700;
    margin-top: .2rem;
    padding: .55rem .8rem;
    text-align: center;
}

.ax-product__btn--ghost {
    background: transparent;
    border: 1px solid rgba(241, 239, 232, .4);
    color: var(--pv-on-dark);
}

@media (max-width: 35.99rem) {
    .ax-product__screen {
        align-items: start;
        grid-template-columns: 5.5rem minmax(0, 1fr);
    }

    .ax-product__step {
        padding-top: 1rem;
    }
}

@media (min-width: 36rem) {
    .ax-product__flow {
        align-items: start;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ax-product__screen:nth-child(2) {
        margin-top: 1.5rem;
    }

    .ax-product__screen:nth-child(3) {
        margin-top: 3rem;
    }
}

/* Shorter cases: operations, Agent Orchestrator, AYXWORKS */

.ax-case-trio {
    padding-bottom: var(--pv-section);
}

.ax-case-trio .ax-case {
    border-top: 1px solid var(--pv-rule-strong);
}

.ax-case-trio .ax-case:first-child {
    border-top: 0;
}

.ax-case-trio .ax-case__title {
    font-size: clamp(1.7rem, 2.8vw, 2.6rem);
}

/* Business process flow */

.ax-process__steps {
    counter-reset: step;
    display: grid;
    gap: .5rem;
}

.ax-process__steps li {
    align-items: center;
    background: var(--pv-l-business);
    border: 1px solid var(--pv-rule-strong);
    border-radius: 4px;
    counter-increment: step;
    display: flex;
    font-size: .95rem;
    font-weight: 650;
    gap: .7rem;
    min-height: 3rem;
    padding: .5rem .8rem;
}

.ax-process__steps li::before {
    color: var(--pv-teal);
    content: counter(step, decimal-leading-zero);
    font-family: var(--pv-mono);
    font-size: .72rem;
}

.ax-process__steps li:nth-child(4),
.ax-process__steps li:nth-child(5) {
    background: var(--pv-l-operations);
}

.ax-process__thread {
    align-items: center;
    color: var(--pv-teal);
    display: flex;
    font-size: .82rem;
    font-weight: 650;
    gap: .75rem;
    margin-top: .9rem;
}

.ax-process__thread::before,
.ax-process__thread::after {
    background: var(--pv-teal);
    content: "";
    flex: 1;
    height: 2px;
}

@media (min-width: 48rem) {
    .ax-process__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Agent Orchestrator topology */

.ax-orch__svg {
    display: block;
    height: auto;
    width: 100%;
}

.ax-orch__svg--wide {
    display: none;
}

.ax-orch__svg--tall {
    margin-inline: auto;
    max-width: 22rem;
}

@media (min-width: 40rem) {
    .ax-orch__svg--wide {
        display: block;
    }

    .ax-orch__svg--tall {
        display: none;
    }
}

.ax-orch__edges path {
    fill: none;
    stroke: var(--pv-ink);
    stroke-width: 2;
}

.ax-orch__nodes rect {
    fill: var(--pv-white);
    stroke: var(--pv-ink);
    stroke-width: 1.6;
}

.ax-orch__nodes text {
    fill: var(--pv-ink);
    font-family: var(--pv-sans);
    font-size: 13px;
    font-weight: 650;
    text-anchor: middle;
}

.ax-orch__svg--tall .ax-orch__nodes text {
    font-size: 15px;
}

.ax-orch__nodes .ax-orch__verify rect {
    fill: var(--pv-l-control);
    stroke: var(--pv-teal);
    stroke-width: 2.2;
}

.ax-orch__nodes .ax-orch__repair rect {
    stroke: var(--pv-coral-strong);
    stroke-dasharray: 5 4;
    stroke-width: 2;
}

.ax-orch__loop {
    fill: none;
    stroke: var(--pv-coral-strong);
    stroke-dasharray: 5 4;
    stroke-width: 2;
}

.ax-orch__nodes .ax-orch__gate rect {
    fill: var(--pv-ink);
    stroke: var(--pv-ink);
}

.ax-orch__nodes .ax-orch__gate text {
    fill: var(--pv-on-dark);
}

.ax-orch__gate .ax-orch__bar {
    stroke: var(--pv-coral);
    stroke-linecap: round;
    stroke-width: 5;
}

.ax-orch__ids text {
    fill: var(--pv-muted);
    font-family: var(--pv-mono);
    font-size: 11px;
}

.ax-orch__token {
    fill: var(--pv-coral-strong);
    stroke: var(--pv-white);
    stroke-width: 2;
}

.ax-orch__path {
    counter-reset: orch;
    display: flex;
    flex-wrap: wrap;
    font-size: .85rem;
    gap: .35rem .25rem;
    margin-top: 1rem;
}

.ax-orch__path li {
    align-items: center;
    counter-increment: orch;
    display: inline-flex;
    gap: .3rem;
}

.ax-orch__path li::before {
    color: var(--pv-teal);
    content: counter(orch);
    font-family: var(--pv-mono);
    font-size: .72rem;
}

.ax-orch__path li:not(:last-child)::after {
    color: var(--pv-muted);
    content: "→";
    content: "→" / "";
    padding-left: .25rem;
}

/* AYXWORKS release track */

.ax-release__track {
    display: grid;
    position: relative;
}

.ax-release__track li {
    border-left: 2px solid var(--pv-ink);
    display: grid;
    gap: .15rem;
    margin-left: .55rem;
    padding: 0 0 1.1rem 1.5rem;
    position: relative;
}

.ax-release__track li::before {
    background: var(--pv-paper);
    border: 2px solid var(--pv-ink);
    border-radius: 50%;
    content: "";
    height: 1rem;
    left: -.6rem;
    position: absolute;
    top: .15rem;
    width: 1rem;
}

.ax-release__track li:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.ax-release__track li:last-child::before {
    background: var(--pv-teal);
    border-color: var(--pv-teal);
}

.ax-release__track li.is-gate::before {
    background: var(--pv-ink);
    border-radius: 2px;
}

.ax-release__track li.is-gate b::after {
    background: var(--pv-coral);
    border-radius: 2px;
    content: "";
    display: inline-block;
    height: 3px;
    margin-left: .6rem;
    vertical-align: middle;
    width: 1.5rem;
}

.ax-release__track b {
    font-size: 1rem;
}

.ax-release__track span {
    color: var(--pv-muted);
    font-size: .9rem;
}

.ax-release__rollback {
    align-items: center;
    border-top: 1px dashed var(--pv-rule-strong);
    display: flex;
    font-size: .9rem;
    font-weight: 600;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: .9rem;
}

.ax-release__rollback::before {
    color: var(--pv-teal);
    content: "↺";
    content: "↺" / "";
    font-size: 1.2rem;
}

@media (min-width: 48rem) {
    .ax-release__track {
        column-gap: 2rem;
        grid-auto-flow: column;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, auto);
    }

    .ax-release__track li:nth-child(3) {
        border-left-color: transparent;
    }
}

/* ---------- Capabilities ---------- */

.ax-capabilities {
    background: var(--pv-sand);
    padding-block: var(--pv-section);
}

.ax-cap-list {
    border-top: 1px solid var(--pv-rule-strong);
    display: grid;
}

.ax-cap {
    align-content: start;
    border-bottom: 1px solid var(--pv-rule);
    display: grid;
    gap: .65rem;
    padding-block: 1.6rem;
}

.ax-cap h3 {
    font-family: var(--pv-serif);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.15;
}

.ax-cap__body {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 34rem;
}

.ax-cap__proof {
    color: var(--pv-muted);
    font-size: .9rem;
    line-height: 1.5;
}

.ax-cap__proof span {
    color: var(--pv-ink);
    font-weight: 650;
}

.ax-closing-line {
    font-family: var(--pv-serif);
    font-size: clamp(1.3rem, 2.2vw, 1.9rem);
    line-height: 1.3;
    margin-top: clamp(2rem, 4vw, 3.5rem);
    max-width: 30ch;
}

@media (min-width: 48rem) {
    .ax-cap-list {
        column-gap: var(--pv-col-gap);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .ax-cap-list,
    .ax-closing-line {
        margin-left: calc((100% + var(--pv-col-gap)) / 12 * 3);
    }
}

/* ---------- Industry ---------- */

.ax-industry {
    background: var(--pv-ink);
    color: var(--pv-on-dark);
    padding-block: var(--pv-section);
}

.ax-industry :focus-visible {
    outline-color: var(--pv-on-dark);
}

.ax-industry .ax-head__label {
    color: #9fd7c2;
}

.ax-industry .ax-prose {
    color: var(--pv-on-dark-muted);
}

.ax-timeline {
    border-top: 1px solid rgba(241, 239, 232, .3);
}

.ax-talk {
    border-bottom: 1px solid rgba(241, 239, 232, .16);
    display: grid;
    gap: .75rem var(--pv-col-gap);
    padding-block: 1.75rem;
}

.ax-talk__when {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
}

.ax-talk__when time {
    font-family: var(--pv-mono);
    font-size: .85rem;
    font-weight: 600;
}

.ax-talk__when span {
    color: #9fd7c2;
    font-size: .85rem;
}

.ax-talk:focus {
    outline: 3px solid var(--pv-on-dark);
    outline-offset: 4px;
}

.ax-talk__body {
    display: grid;
    gap: .45rem;
}

.ax-talk h3 {
    font-family: var(--pv-serif);
    font-size: clamp(1.45rem, 2.4vw, 2.1rem);
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.12;
}

.ax-talk__title {
    font-family: var(--pv-serif);
    font-size: 1.1rem;
    line-height: 1.45;
    max-width: 40rem;
}

.ax-talk__role {
    color: var(--pv-on-dark-muted);
    font-size: .9rem;
}

.ax-talk__source a,
.ax-note__links a {
    align-items: center;
    display: inline-flex;
    font-size: .9rem;
    font-weight: 600;
    gap: .3rem;
    min-height: 2.75rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
}

.ax-knowledge {
    display: grid;
    gap: 2rem var(--pv-col-gap);
    margin-top: clamp(3rem, 6vw, 5rem);
}

.ax-knowledge__intro {
    display: grid;
    gap: 1rem;
}

.ax-knowledge__intro h3 {
    font-family: var(--pv-serif);
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    font-weight: 500;
    line-height: 1.12;
    max-width: 20ch;
}

.ax-knowledge__intro p {
    color: var(--pv-on-dark-muted);
    line-height: 1.65;
    max-width: 34rem;
}

.ax-notes {
    display: grid;
    gap: 1.5rem;
}

.ax-note {
    border-top: 1px solid rgba(241, 239, 232, .3);
    display: grid;
    gap: .6rem;
    padding-top: 1.1rem;
}

.ax-note__title {
    line-height: 1.55;
}

.ax-note__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
}

@media (min-width: 48rem) {
    .ax-talk {
        grid-template-columns: 11rem minmax(0, 1fr);
    }

    .ax-talk__when {
        align-content: start;
        display: grid;
    }

    .ax-talk__source {
        grid-column: 2;
    }
}

@media (min-width: 64rem) {
    .ax-timeline,
    .ax-knowledge {
        margin-left: calc((100% + var(--pv-col-gap)) / 12 * 3);
    }

    .ax-talk {
        grid-template-columns: 11rem minmax(0, 1fr) 13rem;
    }

    .ax-talk__source {
        grid-column: auto;
        text-align: right;
    }

    .ax-knowledge {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* ---------- Community & education ---------- */

.ax-community {
    background: var(--pv-mint);
    border-block: 1px solid var(--pv-rule);
    padding-block: var(--pv-section);
}

.ax-community__grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
}

.ax-community__panel {
    align-content: start;
    border-top: 2px solid var(--pv-teal);
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding-top: 1.25rem;
}

.ax-community__eyebrow {
    color: var(--pv-teal-deep);
    font-size: .875rem;
    font-weight: 650;
}

.ax-community__panel h3 {
    font-family: var(--pv-serif);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 500;
    line-height: 1.15;
    max-width: 21ch;
}

.ax-community__panel > p:not(.ax-community__eyebrow) {
    color: var(--pv-muted);
    line-height: 1.65;
    max-width: 39rem;
}

.ax-community__links {
    display: grid;
    gap: .5rem;
}

.ax-community__links a {
    color: var(--pv-teal-deep);
    display: inline-block;
    font-weight: 650;
    min-height: 2.75rem;
    padding-block: .6rem;
    text-decoration: underline;
    text-underline-offset: .25em;
}

.ax-community__links a:hover {
    text-decoration-thickness: 2px;
}

.ax-community__schools {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ax-community__schools li {
    border: 1px solid var(--pv-rule-strong);
    border-radius: .35rem;
    font-size: .9rem;
    padding: .4rem .75rem;
}

.ax-community__video {
    background: rgba(255, 255, 255, .58);
    border: 1px solid var(--pv-rule);
    border-left: 3px solid var(--pv-teal);
    border-radius: .4rem;
    display: grid;
    gap: 1.25rem;
    margin-top: clamp(2rem, 4vw, 3.5rem);
    min-width: 0;
    padding: clamp(1.25rem, 2.6vw, 2.5rem);
}

.ax-community__video-copy {
    display: grid;
    gap: .85rem;
    min-width: 0;
}

.ax-community__video h3 {
    font-family: var(--pv-serif);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 500;
    line-height: 1.15;
}

.ax-community__video-copy > p:not(.ax-community__eyebrow) {
    color: var(--pv-muted);
    line-height: 1.65;
    max-width: 43rem;
}

.ax-community__video-cta {
    color: var(--pv-teal-deep);
    justify-self: start;
}

@media (min-width: 48rem) {
    .ax-community__video {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 2rem;
    }

    .ax-community__video-cta {
        max-width: 10rem;
    }
}

.ax-community__footer {
    border-top: 1px solid var(--pv-rule-strong);
    display: grid;
    gap: 1rem 2rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 1.75rem;
}

.ax-community__footer p {
    font-family: var(--pv-serif);
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.5;
    max-width: 44rem;
}

.ax-community__footer .ax-textlink {
    align-self: start;
    color: var(--pv-teal-deep);
}

@media (min-width: 48rem) {
    .ax-community__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .ax-community__grid,
    .ax-community__video,
    .ax-community__footer {
        margin-left: calc((100% + var(--pv-col-gap)) / 12 * 3);
    }
}

/* ---------- Method ---------- */

.ax-method {
    padding-block: var(--pv-section);
}

.ax-steps {
    display: grid;
    gap: 0 var(--pv-col-gap);
}

.ax-step {
    border-top: 2px solid var(--pv-ink);
    display: grid;
    gap: .55rem;
    padding: 1.1rem 0 1.75rem;
    position: relative;
}

.ax-step__n {
    color: var(--pv-teal);
    font-family: var(--pv-mono);
    font-size: .85rem;
    font-weight: 600;
}

.ax-step h3 {
    font-family: var(--pv-serif);
    font-size: clamp(1.35rem, 1.9vw, 1.65rem);
    font-weight: 500;
    letter-spacing: -.01em;
}

.ax-step p {
    color: var(--pv-muted);
    line-height: 1.6;
    max-width: 30rem;
}

@media (min-width: 48rem) {
    .ax-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 80rem) {
    .ax-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------- Beyond work ---------- */

.ax-beyond {
    border-top: 1px solid var(--pv-rule);
    padding-block: var(--pv-section);
}

.ax-beyond__grid {
    display: grid;
    gap: 1.25rem var(--pv-col-gap);
}

.ax-beyond__grid > div {
    display: grid;
    gap: 1.5rem;
}

.ax-beyond h2 {
    max-width: 20ch;
}

@media (min-width: 64rem) {
    .ax-beyond__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .ax-beyond__grid > .ax-head__label {
        grid-column: 1 / span 3;
        padding-top: .9rem;
    }

    .ax-beyond__grid > div {
        grid-column: 4 / span 8;
    }
}

/* ---------- Contact ---------- */

.ax-contact {
    background: var(--pv-teal);
    color: var(--pv-on-dark);
    padding-block: var(--pv-section) calc(var(--pv-section) + 2rem);
}

.ax-contact :focus-visible {
    outline-color: var(--pv-on-dark);
}

.ax-contact__grid {
    display: grid;
    gap: 1.5rem;
}

.ax-contact__label {
    color: #c9eadc;
}

.ax-contact h2 {
    font-size: clamp(2.4rem, 6vw, 5.6rem);
    max-width: 14ch;
}

.ax-contact__body {
    color: #d8ebe3;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 34rem;
}

.ax-textlink--light {
    color: var(--pv-on-dark);
}

@media (min-width: 48rem) {
    .ax-contact {
        padding-bottom: calc(var(--pv-section) + 4.5rem);
    }
}

/* ---------- Motion preferences, forced colours, print ---------- */

@media (prefers-reduced-motion: reduce) {
    .ax-alex-page *,
    .ax-alex-page *::before,
    .ax-alex-page *::after {
        scroll-behavior: auto;
        transition-duration: .01ms;
    }
}

@media (forced-colors: active) {
    .ax-spine__band,
    .ax-map__layer,
    .ax-lk__item.is-on {
        border: 1px solid CanvasText;
        forced-color-adjust: auto;
    }

    .ax-portfolio-nav a.is-active {
        outline: 2px solid Highlight;
    }
}

@media print {
    .ax-portfolio-nav,
    .ax-hero .ax-actions {
        display: none;
    }

    .ax-industry,
    .ax-contact {
        background: none;
        color: #000;
    }

    .ax-alex-page section {
        break-inside: avoid-page;
    }
}

/* ---------- V2 phone reading pass ----------
 * Centred hero and actions; captions, proof lines and layer keys large
 * enough to read; secondary case detail is disclosed (.ax-more).
 */
@media (max-width: 47.99rem) {
    .ax-hero__copy {
        justify-items: center;
        text-align: center;
    }

    .ax-hero__who,
    .ax-hero .ax-actions {
        justify-content: center;
    }

    .ax-hero h1,
    .ax-hero__lede,
    .ax-hero__support {
        margin-inline: auto;
    }

    .ax-case__caption {
        font-size: .9375rem;
        line-height: 1.5;
    }

    .ax-cap__proof,
    .ax-talk__role {
        font-size: 1rem;
    }

    .ax-lk__item {
        font-size: .8rem;
    }

    .ax-case__proof.ax-more {
        display: block;
    }

    .ax-case__proof.ax-more[open] > :not(summary) + :not(summary) {
        margin-top: .75rem;
    }
}


/* V1-A editorial reflow: reuse the existing photo-led bio, without a second
   competing introduction in the hero. Keep the System Spine untouched. */
.ax-about {
    padding-block: clamp(1.5rem, 4vw, 3rem) var(--pv-section);
}
.ax-about .ax-hero__bio-wrap {
    margin-top: 0;
}
.ax-about .ax-hero__bio-copy {
    align-content: center;
    gap: 1rem;
}
.ax-about .ax-hero__bio-text {
    max-width: 65ch;
}
.ax-compat-anchor {
    height: 0;
    scroll-margin-top: 6rem;
}
.ax-method__closing {
    color: var(--pv-muted);
    font-family: var(--pv-serif);
    font-size: clamp(1.125rem, 1.5vw, 1.35rem);
    line-height: 1.55;
    margin-top: 2rem;
    max-width: 55rem;
}
/* The warmer invitation is longer than the original slogan; keep it editorial
   rather than allowing a five-line billboard on wide screens. */
.ax-contact h2 {
    font-size: clamp(2.3rem, 4.2vw, 4.4rem);
    max-width: 22ch;
}
.ax-contact__choices {
    display: grid;
    gap: 1.5rem;
    max-width: 48rem;
}
.ax-contact__choice {
    align-content: start;
    display: grid;
    gap: .75rem;
    justify-items: start;
}
/* On the teal closing surface the default dark outline button is unreadable. */
.ax-contact .ax-contact__choice .ax-button:not(.ax-button--light) {
    border-color: var(--pv-on-dark);
    color: var(--pv-on-dark);
}
.ax-contact .ax-contact__choice .ax-button:not(.ax-button--light):hover {
    background: rgba(241, 239, 232, .12);
}
.ax-contact__choice p {
    color: #d8ebe3;
    font-size: 1rem;
    line-height: 1.55;
    max-width: 29rem;
}
@media (min-width: 48rem) {
    .ax-contact__choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}