/* Homepage construction. One desktop measure, rhythm, and choreography. */

html:has(body.home),
body.home {
    overflow-x: hidden;
    overflow-x: clip;
    font-synthesis: none;
    background: #1a1a1a;
}

body.home {
    background: var(--color-field);
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --hm-green: #10B981;
    --hm-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --hm-fold-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --hm-dur: 280ms;
    --hm-line-dur: 280ms;
    --hm-trace-dur: 280ms;
    --hm-stagger: 40ms;
    --hm-curve-delay: 180ms;
    --hm-curve-stagger: 20ms;
    --hm-curve-dur: 450ms;
    --hm-curve-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --hm-travel: 12px;
    --hm-fold-line-dur: 560ms;
    --hm-fold-nav-stagger: 36ms;
    --measure-main: 1440px;
    --measure-head: 940px;
    --measure-prose: 65ch;
    --gutter: 28px;
    --g-cols: 12;
    --g-gap: 16px;
    --u: 12px;
    --ico-w: 280px;
    --ico-h: 300px;
    --eyebrow-tracking: 0.06em;
    --space-24: 16px;
    --space-36: 24px;
    --space-48: 32px;
    --space-72: 48px;
    --space-96: 64px;
    --type-caption: 12px;
    --type-body: 16px;
    --type-card: 18px;
    --type-section: 26px;
    --type-display: 34px;
    --fig-stage: 176px;
    --curve-h: 148px;
    --curve-gap: 7px;
    --btn-h: 48px;
    --logo-h: 28px;
    --color-ink: #fff;
    --color-body: rgba(255, 255, 255, 0.76);
    --color-focus: #fff;
    --color-edge: #2e2e2e;
    --color-field: #1a1a1a;
    --color-panel: #242424;
    --color-well: #1a1a1a;
    --elevate: 0 0 0 1px rgb(255 255 255 / 0.08);
    --hairline: 1px;
    font-kerning: normal;
}

@media only screen and (min-resolution: 192dpi) {
    body.home {
        --hairline: 0.5px;
    }
}

/* Desktop scale: type grows, never shrinks. */
@media (min-width: 768px) {
    body.home {
        --measure-main: 1320px;
        --measure-head: 860px;
        --gutter: 32px;
        --space-24: 20px;
        --space-36: 32px;
        --space-48: 44px;
        --space-72: 64px;
        --space-96: 80px;
        --type-body: 16px;
        --type-card: 18px;
        --type-section: 28px;
        --type-display: 38px;
        --fig-stage: 192px;
        --curve-h: 152px;
        --btn-h: 48px;
        --logo-h: 28px;
    }
}

/* Keep the desktop composition compact without shrinking readable type or controls. */
@media (min-width: 851px) {
    body.home {
        --measure-main: 1188px;
        --measure-head: 774px;
        --gutter: 29px;
        --g-gap: 14px;
        --u: 11px;
        --ico-w: 252px;
        --ico-h: 270px;
        --space-24: 18px;
        --space-36: 29px;
        --space-48: 40px;
        --space-72: 58px;
        --space-96: 72px;
        --fig-stage: 173px;
        --curve-h: 137px;
        --curve-gap: 6px;
    }
}

body.home ::selection {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

body.home button,
body.home input,
body.home textarea,
body.home select {
    font: inherit;
}

body.home [id] {
    scroll-margin-top: var(--space-48);
}

.skip-link {
    position: absolute;
    left: var(--gutter, 36px);
    top: 12px;
    z-index: 400;
    padding: 10px 16px;
    background: #fff;
    color: #000;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transform: translateY(-220%);
}

.skip-link:focus {
    transform: none;
    outline: 2px solid #fff;
    outline-offset: 3px;
}

body.home section {
    background: var(--color-field);
    border: 0;
    box-shadow: none;
}

body.home .mobile-menu-overlay,
body.home .mobile-menu-content {
    width: 100%;
    max-width: 100%;
}

body.home .mobile-menu-overlay {
    left: 0;
    right: 0;
    overflow: hidden;
}

body.home .navbar-logo-wrapper {
    display: none;
}

body.home .navbar {
    max-width: var(--measure-main);
    padding: 0 var(--gutter);
}

body.home .navbar-row {
    position: relative;
    padding: 12px 0;
    margin-bottom: var(--space-36);
    border-bottom: var(--hairline) solid transparent;
}

body.home .navbar-row::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--hairline);
    background: var(--color-edge);
    transform: scaleX(1);
    transform-origin: left center;
    pointer-events: none;
}

body.home .navbar-row .nav-logo {
    height: var(--logo-h);
    width: auto;
}

body.home .navbar-row .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 0;
    font-size: var(--type-body);
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--color-body);
}

body.home .navbar-row .nav-logo-link {
    min-width: 40px;
    justify-content: center;
}

body.home .navbar-row .nav-link:not(.nav-logo-link)::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 12px;
    height: 1px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 150ms ease;
}

body.home .navbar-row .nav-link:focus-visible,
body.home .navbar-row .nav-logo-link:focus-visible,
body.home .mobile-menu-link:focus-visible,
body.home .mobile-menu-button:focus-visible,
body.home .mobile-menu-close:focus-visible {
    outline: 1px solid var(--color-focus);
    outline-offset: 3px;
}

body.home .navbar-row .nav-link.is-active::after {
    transform: scaleX(1);
}

body.home .navbar-row .nav-link:hover,
body.home .navbar-row .nav-link.is-active {
    color: var(--color-ink);
}

@media (hover: hover) and (pointer: fine) {
    body.home .navbar-row .nav-link:not(.nav-logo-link):hover::after {
        transform: scaleX(1);
    }

    body.home .navbar-row .nav-logo-link:hover {
        opacity: 0.7;
    }
}

/* One 12-col axis. 36px left margin. Every block snaps to it. */

.container-main,
.footer .gutter-1500,
.footer-container {
    width: 100%;
    max-width: var(--measure-main);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
    column-gap: var(--g-gap);
    row-gap: 0;
}

.container-main > *,
.footer .gutter-1500 > *,
.footer-container > * {
    grid-column: 1 / -1;
}

.b-hero-row,
.b-intel-row,
.b-cta-row,
.footer-grid {
    display: grid;
    grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
    column-gap: var(--g-gap);
}

@supports (grid-template-columns: subgrid) {
    .b-hero-row,
    .b-intel-row,
    .b-cta-row,
    .footer-grid {
        grid-template-columns: subgrid;
    }
}

.b-hero-row > *,
.b-intel-row > *,
.b-cta-row > *,
.footer-grid > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.b-section-head,
.b-intel-copy {
    max-width: var(--measure-head);
}

.b-body,
.b-intel-body,
.b-caption {
    max-width: var(--measure-prose);
}

/* Lines */

.line {
    flex: none;
    height: 1px;
    min-height: 1px;
    width: 100%;
    background: #fff;
    border: 0;
    margin: 0;
}

.line.muted {
    background: #ffffff80;
}

/* Type. Body is sans on a 12px baseline. Mono is annotation only. */

body.home h1,
body.home h2,
body.home h3 {
    font-weight: 400;
    text-wrap: balance;
}

.b-h1 {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-weight: 400;
    font-size: var(--type-display);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--color-ink);
    margin: 0 0 var(--space-24);
    text-wrap: balance;
    font-kerning: normal;
    text-box: trim-start cap;
}

.medium-heading {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-weight: 400;
    font-size: var(--type-section);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    margin: 0;
    text-wrap: balance;
}

.large-text {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 400;
    font-size: var(--type-card);
    line-height: 1.35;
    color: var(--color-ink);
    margin: 0;
}

.b-body {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 400;
    font-size: var(--type-body);
    line-height: 1.4;
    color: var(--color-body);
    margin: 0;
    text-wrap: pretty;
}

.b-eyebrow,
.work-row span:first-child,
.work-row span:nth-child(2) {
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-weight: 400;
    font-size: var(--type-caption);
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: var(--color-body);
}

.b-eyebrow {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
}

.b-eyebrow::before {
    content: '\2014';
    flex-shrink: 0;
    color: #fff;
    font: inherit;
    letter-spacing: var(--eyebrow-tracking);
    transition: color 220ms var(--hm-ease);
}

.b-section-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
}

/* HERO */

.b-hero {
    padding: 0 0 var(--space-72);
}

body.home .b-hero {
    padding-top: 0;
}

.b-hero-row {
    align-items: start;
    row-gap: var(--space-36);
}

.b-hero-aside {
    max-width: var(--measure-prose);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--type-body);
    line-height: 1.5;
    font-weight: 400;
    color: var(--color-body);
}

.b-hero-aside p {
    margin: 0 0 0.75em;
}

.b-hero-aside p:last-child {
    margin-bottom: 0;
}

/* Bureau curve: 20 × 1px ticks + 19 × 12px gap = 248. Last line is the hairline. */

.curve-pattern {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--curve-gap);
    width: 100%;
    height: var(--curve-h);
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    margin-top: var(--space-24);
    margin-bottom: 0;
    pointer-events: none;
    user-select: none;
}

.curve-pattern-line-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--curve-gap);
}

.curve-pattern-line-wrapper > .line:nth-child(1) { --i: 0; }
.curve-pattern-line-wrapper > .line:nth-child(2) { --i: 1; }
.curve-pattern-line-wrapper > .line:nth-child(3) { --i: 2; }
.curve-pattern-line-wrapper > .line:nth-child(4) { --i: 3; }
.curve-pattern-line-wrapper > .line:nth-child(5) { --i: 4; }
.curve-pattern-line-wrapper > .line:nth-child(6) { --i: 5; }
.curve-pattern-line-wrapper > .line:nth-child(7) { --i: 6; }
.curve-pattern-line-wrapper > .line:nth-child(8) { --i: 7; }
.curve-pattern-line-wrapper > .line:nth-child(9) { --i: 8; }
.curve-pattern-line-wrapper > .line:nth-child(10) { --i: 9; }
.curve-pattern-line-wrapper > .line:nth-child(11) { --i: 10; }
.curve-pattern-line-wrapper > .line:nth-child(12) { --i: 11; }
.curve-pattern-line-wrapper > .line:nth-child(13) { --i: 12; }
.curve-pattern-line-wrapper > .line:nth-child(14) { --i: 13; }
.curve-pattern-line-wrapper > .line:nth-child(15) { --i: 14; }
.curve-pattern-line-wrapper > .line:nth-child(16) { --i: 15; }
.curve-pattern-line-wrapper > .line:nth-child(17) { --i: 16; }
.curve-pattern-line-wrapper > .line:nth-child(18) { --i: 17; }
.curve-pattern-line-wrapper > .line:nth-child(19) { --i: 18; }
.curve-pattern-line-wrapper > .line:nth-child(20) { --i: 19; }

.curve-pattern-circle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-field);
    border-bottom-left-radius: 100%;
    z-index: 1;
}

.curve-pattern.hug-right .curve-pattern-circle {
    left: auto;
    right: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 100%;
}

@media (max-width: 600px) {
    .b-h1 {
        font-size: var(--type-section);
        line-height: 1.15;
    }

    body.landing .b-h1 {
        font-size: 28px;
        line-height: 1.16;
        letter-spacing: -0.02em;
        max-width: none;
    }
}

@media (max-width: 991px) {

    .b-hero .curve-pattern,
    .b-cta .curve-pattern.hug-right {
        height: var(--curve-h);
    }
}

.b-hero-actions {
    display: flex;
    align-items: center;
    gap: var(--space-36);
    margin-top: var(--space-24);
}

.b-text-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: var(--type-body);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--color-ink);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 4px;
    text-underline-position: from-font;
    position: relative;
    transition: opacity 150ms ease;
}

.b-text-link::after {
    display: none;
}

.b-text-link:focus-visible {
    outline: 1px solid var(--color-focus);
    outline-offset: 3px;
}

.b-hero-support {
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-weight: 400;
    font-size: var(--type-caption);
    letter-spacing: var(--eyebrow-tracking);
    line-height: 1.5;
    color: var(--color-body);
    margin: var(--space-36) 0 0;
    max-width: var(--measure-prose);
}

/* Solids are off the page for now. Generator and SVG files stay. */

body.home .ico {
    display: none;
}

.ico {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.ico svg,
.record-path svg {
    display: block;
    pointer-events: none;
}

.ico svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 280 / 300;
}

.ico--hero,
.ico--intel,
.ico--work,
.ico--close {
    width: var(--ico-w);
    max-width: 100%;
    height: auto;
    aspect-ratio: 280 / 300;
    justify-self: start;
}

.record-path {
    position: relative;
    width: 100%;
    height: 36px;
    overflow: hidden;
}

.record-path svg {
    display: block;
    width: 100%;
    height: 36px;
}

.record-path--vert {
    width: 18px;
    height: auto;
    align-self: stretch;
    flex-shrink: 0;
    overflow: hidden;
}

.record-path--vert svg {
    width: 18px;
    height: 100%;
}

/* Lined photo: Bureau lined-image / multiply-image, scoped to this band. */

.b-lined-photo {
    --white: #fff;
    padding: var(--space-72) 0;
    background: var(--color-field);
}

.lined-image-full {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    background: var(--color-field);
}

.lined-image-full .line-container {
    grid-column-gap: 8.58px;
    grid-row-gap: 8.58px;
    flex-direction: column;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0;
}

.lined-image-full .multiply-image {
    mix-blend-mode: multiply;
    width: 100%;
    display: block;
    opacity: 1;
}

.lined-image-full .line {
    z-index: 0;
    background-color: var(--white);
    flex: none;
    width: 100%;
    height: 1px;
    position: relative;
    transform: scaleX(1);
    transform-origin: left center;
}

.lined-image-full img {
    object-fit: cover;
    object-position: 50% 12%;
    filter: grayscale(0.08) brightness(1.95) contrast(1.18);
}

/* Frames */

.b-frames {
    padding: 0 0 var(--space-96);
}

.b-frames .container-main {
    row-gap: var(--space-36);
}

/* What we build: a hairline index, not framed posters. */

.b-build {
    padding: var(--space-72) 0;
}

.b-build .container-main {
    row-gap: var(--space-48);
}

.b-build .b-section-head,
.b-build .build-table {
    grid-column: 1 / -1;
    max-width: none;
    width: 100%;
    min-width: 0;
}

.b-build .b-section-head {
    margin: 0;
}

.b-build .build-table > .line {
    margin: 0;
}

.build-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-24);
    align-items: start;
    padding: 18px 0;
}

.build-name {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
    overflow-wrap: break-word;
}

.build-row .b-body {
    max-width: none;
}

.large-block-link,
.model-essay {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    min-height: 0;
    padding: 0;
    gap: var(--space-36);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    color: inherit;
}

.large-block-link::before {
    display: none;
}

.frame-title {
    height: auto;
    overflow: visible;
    margin: 0;
    width: 100%;
    font-size: var(--type-section);
    font-weight: 400;
}

.frame-title-stack {
    display: block;
}

.frame-title-stack span {
    display: block;
    height: auto;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-weight: 400;
    font-size: var(--type-section);
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-transform: none;
    text-align: left;
    color: var(--color-ink);
    text-wrap: balance;
}

.frame-title-stack span + span,
.frame-title-sm .frame-title-stack span + span {
    display: none;
}

.b-caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0;
}

.b-caption p {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--type-body);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--color-body);
    margin: 0 0 1.5em;
    text-wrap: pretty;
}

.b-caption p:last-child {
    margin-bottom: 0;
}

.caption-tick {
    display: block;
    width: 48px;
    height: 1px;
    background: #fff;
    margin: 0 0 12px;
    transition: background-color 220ms var(--hm-ease);
}

/* First box: a sentence in a padded frame, not a stamped plaque. */
.b-frames.b-model {
    position: relative;
    padding: var(--space-72) 0;
    overflow: hidden;
}

.b-model .b-lined-photo {
    position: absolute;
    inset: 0;
    padding: 0;
    z-index: 0;
    pointer-events: none;
}

.b-model .b-lined-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color-field) 0%, var(--color-field) 42%, rgba(26, 26, 26, 0.55) 68%, transparent 100%);
    pointer-events: none;
}

.b-model .lined-image-full,
.b-model .lined-image-full img {
    height: 100%;
    max-height: none;
}

.b-model .lined-image-full .line-container {
    justify-content: space-between;
}

.b-model .container-main {
    position: relative;
    z-index: 1;
}

.b-model .large-block-link,
.b-model .model-essay {
    padding: var(--space-72) 0;
    border-radius: 0;
    background: none;
}

.b-model .frame-title,
.b-model .frame-title-stack,
.b-model .frame-title-stack span,
.b-model .b-caption {
    max-width: var(--measure-prose);
}

.b-model .frame-title-stack span {
    text-transform: none;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

@media (hover: hover) and (pointer: fine) {
    .b-text-link:hover {
        opacity: 0.7;
        color: var(--color-ink);
    }

    .b-text-link:hover::after {
        transform: scaleX(1);
    }
}

/* Work */

.b-work {
    padding: var(--space-48) 0 var(--space-72);
}

.b-work .container-main {
    row-gap: var(--space-48);
}

.b-work .b-section-head,
.b-work-prose,
.b-work .work-table {
    grid-column: 1 / -1;
    max-width: none;
    width: 100%;
    min-width: 0;
}

.b-work .b-section-head {
    margin: 0;
}

.b-work .work-table > .line {
    margin: 0;
}

.b-work-prose {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    margin: 0;
    padding: 0;
}

.b-work-prose .b-body {
    max-width: none;
}

.work-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--space-24);
    align-items: baseline;
    padding: 18px 0;
}

.work-row-ledger {
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-24);
    row-gap: 0;
}

.work-row-ledger span:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.work-row-ledger span:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.work-row-ledger span:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 2;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
}

.work-row span,
.work-row a {
    color: #fff;
    text-decoration: none;
}

.work-row a:hover {
    opacity: 0.5;
}

/* Intelligence */

.b-intel {
    padding: var(--space-72) 0;
}

.b-intel .container-main {
    row-gap: var(--space-48);
}

.b-intel-row {
    display: block;
    min-width: 0;
    max-width: 100%;
}

.lined-image {
    --white: #fff;
    position: relative;
    overflow: hidden;
    background: var(--color-field);
    border-radius: 0;
}

.lined-image .line-container {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    gap: 12px;
    flex-direction: column;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    user-select: none;
}

.lined-image .multiply-image {
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 1;
}

.lined-image .line {
    z-index: 0;
    background-color: var(--white);
    flex: none;
    width: 100%;
    height: 1px;
    position: relative;
    transform: scaleX(1);
    transform-origin: left center;
}

.lined-image img {
    object-fit: cover;
    object-position: 80% 60%;
    filter: grayscale(0.08) brightness(1.95) contrast(1.18);
}

.lined-image-portrait {
    flex: 0 1 452px;
    width: 100%;
    max-width: 452px;
    height: 612px;
    overflow: hidden;
    background: var(--color-field);
    border-radius: 0;
}

.b-intel-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
    min-width: 0;
    max-width: var(--measure-prose);
    text-align: left;
}

.b-intel-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

@media (max-width: 991px) {
    .b-intel-row {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .lined-image-portrait {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 420px;
        aspect-ratio: 452 / 612;
    }

    .b-intel-copy {
        align-self: stretch;
        max-width: 100%;
    }
}

/* Responsibility */

.b-circle {
    padding: var(--space-72) 0 var(--space-48);
}

.b-circle .container-main {
    row-gap: var(--space-24);
}

.b-circle-eyebrow {
    text-align: left;
    width: 100%;
    margin: 0;
    justify-content: flex-start;
}

.circular-text-section {
    --white: #fff;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: 480px;
    background: var(--color-field);
}

.circular-text-section .multiply-image {
    mix-blend-mode: multiply;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 12%;
    filter: grayscale(0.08) brightness(1.95) contrast(1.18);
    opacity: 1;
    z-index: 1;
}

.circular-text-lines {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    z-index: 0;
}

.b-circle .circular-text-lines .line {
    flex: none;
    width: 100%;
    height: 1px;
    background-color: var(--white);
    transform: scaleX(1);
    transform-origin: left center;
    z-index: 0;
}

.circular-text-hole {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(480px, 100%);
    height: min(480px, 100%);
    transform: translate(-50%, -50%);
    background: var(--color-field);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-36);
    z-index: 2;
}

.circle-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 280px;
}

.circle-line {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-weight: 400;
    font-size: var(--type-section);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
    text-wrap: pretty;
}

/* CTA */

.b-cta {
    padding: var(--space-72) 0 0;
}

.b-cta .container-main {
    row-gap: var(--space-36);
}

.b-cta-title {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-weight: 400;
    font-size: var(--type-section);
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--color-ink);
    margin: 0;
    max-width: var(--measure-head);
    grid-column: 1 / -1;
    text-wrap: balance;
}

.b-cta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-36);
}

.b-cta-row .b-body {
    max-width: var(--measure-prose);
}

.b-cta .curve-pattern.hug-right {
    --curve-gap: 10px;
    --curve-h: 220px;
    display: flex;
    grid-column: 1 / -1;
    height: var(--curve-h);
    margin-top: var(--space-36);
    margin-bottom: 0;
}

.b-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-h);
    padding: 0 var(--space-24);
    background: #fff;
    color: #000;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: var(--type-body);
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: none;
    border: 1px solid #fff;
    border-radius: 0;
    box-shadow: none;
    align-self: flex-start;
    transition: color 150ms ease,
                background-color 150ms ease,
                border-color 150ms ease,
                transform 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .b-btn:hover {
        background: var(--color-field);
        border-color: #fff;
        color: #fff;
    }
}

.b-btn:active {
    transform: scale(0.96);
}

.b-btn:focus-visible {
    outline: 1px solid var(--color-focus);
    outline-offset: 3px;
}

/* Footer */

body.home .footer {
    background: var(--color-field);
    border-top: 0;
    padding: var(--space-72) 0 calc(var(--space-72) + env(safe-area-inset-bottom, 0px));
}

.footer .gutter-1500 {
    max-width: var(--measure-main);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.footer-grid {
    row-gap: var(--space-48);
}

.footer-brand {
    max-width: var(--measure-prose);
}

.footer-lockup {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    margin-bottom: var(--space-24);
}

.footer-mark {
    display: block;
    height: var(--logo-h);
    width: auto;
}

.footer-tagline {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-body);
    margin: 0;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.footer-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.footer-link-col {
    display: flex;
    flex-direction: column;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: var(--type-body);
    font-weight: 400;
    color: var(--color-body);
    text-decoration: none;
    position: relative;
    transition: opacity 150ms ease;
}

.footer-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 8px;
    width: 12px;
    height: 1px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 150ms ease;
}

.footer-link:focus-visible {
    outline: 1px solid var(--color-focus);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .footer-link:hover {
        opacity: 0.85;
        color: #fff;
    }

    .footer-link:hover::after {
        transform: scaleX(1);
    }
}

.footer-legal {
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: var(--type-caption);
    font-weight: 400;
    color: var(--color-body);
    opacity: 0.7;
    margin: var(--space-36) 0 0;
    line-height: 24px;
    padding-top: 18px;
    border-top: 1px solid #fff;
    max-width: none;
}

/* Desktop: the same 12 columns everywhere. Spans, not ad-hoc tracks. */

@media (min-width: 941px) {
    .b-h1 {
        grid-column: 1 / 11;
        max-width: none;
        margin-bottom: var(--space-24);
    }

    .b-hero {
        padding: 0 0 var(--space-72);
    }

    .b-hero-row > .b-hero-aside {
        grid-column: 1 / 8;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #fff;
        max-width: var(--measure-prose);
    }

    .b-hero-row > .ico--hero {
        grid-column: 9 / 13;
        justify-self: end;
        align-self: start;
    }

    .b-hero-actions,
    .b-hero-support {
        grid-column: 1 / 8;
    }

    .b-section-head {
        grid-column: 1 / 9;
        max-width: none;
    }

    .lined-image-full,
    .lined-image-full img {
        height: 480px;
        max-height: 480px;
    }

    .lined-image-full img {
        object-fit: cover;
        object-position: 50% 12%;
    }

    .b-model .large-block-link {
        grid-column: 1 / -1;
        padding: var(--space-72);
        gap: var(--space-48);
        align-items: flex-start;
        text-align: left;
    }

    .b-model .frame-title,
    .b-model .b-caption {
        max-width: var(--measure-prose);
    }

    .b-intel {
        padding: var(--space-96) 0;
    }

    .b-intel-row > .ico--intel {
        grid-column: 9 / 13;
        justify-self: end;
        align-self: center;
    }

    .b-build .b-section-head {
        grid-column: 1 / -1;
        max-width: none;
    }

    .build-row {
        grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
        column-gap: var(--g-gap);
        padding: 24px 0;
    }

    .build-name {
        grid-column: 1 / 6;
    }

    .build-row .b-body {
        grid-column: 6 / 13;
    }

    .b-work .b-section-head {
        grid-column: 1 / -1;
        max-width: none;
    }

    .work-row,
    .work-row-ledger {
        grid-template-columns: 36px 132px 1fr;
        grid-template-rows: auto;
        gap: var(--space-24);
        margin: 0;
        padding: 24px 0;
    }

    .work-row-ledger span:nth-child(1),
    .work-row-ledger span:nth-child(2),
    .work-row-ledger span:nth-child(3) {
        grid-column: auto;
        grid-row: auto;
    }

    .work-row-ledger span:nth-child(3) {
        font-size: 16px;
        line-height: 24px;
    }

    .b-circle .b-circle-eyebrow,
    .b-circle .circular-text-section {
        grid-column: 1 / -1;
    }

    .circle-line {
        text-wrap: balance;
    }

    .b-cta-title {
        font-size: var(--type-display);
        line-height: 1.15;
        grid-column: 1 / -1;
    }

    .b-cta .curve-pattern.hug-right {
        grid-column: 1 / -1;
    }

    .b-cta-row > .ico--close {
        grid-column: 9 / 13;
        justify-self: end;
        align-self: center;
    }

    .footer-brand {
        grid-column: 1 / 7;
        max-width: none;
    }

    .footer-nav {
        grid-column: 8 / 13;
    }

    .footer-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-24) var(--space-48);
    }

    .footer-link-col {
        gap: var(--space-24);
    }
}

/* Homepage keeps the full Bureau nav row until 768. */

@media (min-width: 769px) {
    body.home .navbar-row {
        display: flex;
    }

    body.home .navbar-row .nav-link-wrapper {
        display: block;
        flex: 1;
    }

    body.home .mobile-menu-button {
        display: none;
    }
}

@media (max-width: 768px) {
    html:has(body.home),
    body.home {
        overflow-x: hidden;
        --hm-travel: 12px;
        --gutter: 24px;
        --g-gap: 24px;
    }

    .container-main {
        padding: 0 24px;
    }

    .b-section-head,
    .b-intel-copy,
    .large-block-link,
    .frame-title,
    .b-cta-title,
    .circle-inner,
    .b-body,
    .b-work-prose,
    .b-intel-body,
    .b-caption,
    .b-hero-aside,
    .build-name {
        max-width: 100%;
        min-width: 0;
    }

    body.home .navbar-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 0;
        margin-bottom: 20px;
    }

    body.home .navbar-row .nav-link-wrapper:not(:first-child) {
        display: none;
    }

    body.home .navbar-row .nav-link-wrapper:first-child {
        flex: none;
        text-align: left;
    }

    body.home .navbar-row .nav-logo {
        display: block;
        height: var(--logo-h);
        width: auto;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.home .navbar-row .nav-logo-link:hover {
        opacity: 0.5;
    }

    body.home .mobile-menu-button {
        display: flex;
        min-width: 44px;
        min-height: 44px;
        margin-left: auto;
        background: none;
        border: 0;
        padding: 0;
    }

    body.home .navbar-logo-wrapper {
        display: none;
    }

    .b-h1 {
        overflow-wrap: break-word;
        margin-bottom: var(--space-24);
    }

    .medium-heading {
        font-size: var(--type-section);
        overflow-wrap: break-word;
    }

    .large-text {
        font-size: 18px;
    }

    .b-hero-aside {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #fff;
    }

    body.home .b-hero {
        padding: 0 0 var(--space-72);
    }

    .b-hero-row {
        row-gap: 0;
    }

    .b-hero .ico--hero,
    .b-intel .ico--intel,
    .b-cta .ico--close {
        display: none;
    }

    .b-hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 18px;
    }

    .b-text-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .b-btn {
        width: 100%;
        height: 48px;
        align-self: stretch;
    }

    .b-lined-photo {
        padding: var(--space-36) 0;
    }

    .lined-image-full,
    .lined-image-full img {
        max-width: 100%;
        height: auto;
        max-height: none;
    }

    body.home .b-frames,
    body.home .b-intel {
        padding: var(--space-36) 0;
    }

    body.home .b-build {
        padding: var(--space-72) 0;
    }

    body.home .b-cta {
        padding: var(--space-72) 0 0;
    }

    .b-cta-title {
        font-size: var(--type-section);
    }

    body.home .b-work {
        padding: var(--space-48) 0 var(--space-72);
    }

    body.home .b-circle {
        padding: var(--space-72) 0 var(--space-48);
    }

    .b-frames .container-main {
        gap: var(--space-24);
    }

    .build-row {
        padding: 18px 0;
    }

    .large-block-link {
        min-height: auto;
        padding: var(--space-36) 24px;
        gap: var(--space-24);
    }

    .b-model .large-block-link {
        padding: var(--space-48);
    }

    .frame-title-stack span,
    .frame-title-sm .frame-title-stack span {
        font-size: var(--type-section);
        overflow-wrap: break-word;
        white-space: normal;
    }

    .work-row-ledger {
        padding: 18px 0;
    }

    .circular-text-section {
        height: 360px;
        max-width: 100%;
        overflow: hidden;
    }

    .circular-text-hole {
        inset: var(--space-24);
        left: var(--space-24);
        top: var(--space-24);
        right: var(--space-24);
        bottom: var(--space-24);
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        transform: none;
        border-radius: 25%;
        padding: var(--space-24);
    }

    .circle-inner {
        max-width: 100%;
    }

    .circle-line {
        font-size: 22px;
        line-height: 24px;
    }

    .footer .gutter-1500 {
        padding: 0 24px;
    }

    .footer-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        width: 100%;
    }

    body.home .mobile-menu-overlay {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        overflow: hidden;
        background: var(--color-field);
        backdrop-filter: none;
    }

    body.home .mobile-menu-content {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        background: var(--color-field);
        border-left: 0;
        transform: none;
    }

    body.home .mobile-menu-overlay.active .mobile-menu-content {
        transform: none;
    }

    body.home .mobile-menu-header {
        border-bottom: 1px solid #fff;
        padding: 18px 24px;
    }

    body.home .mobile-menu-header .logo {
        background: none;
        padding: 0;
        gap: 0;
    }

    body.home .mobile-menu-header .nav-logo-link {
        display: inline-flex;
        align-items: center;
        line-height: 0;
    }

    body.home .mobile-menu-header .nav-logo-link:hover {
        opacity: 0.5;
    }

    body.home .mobile-menu-header .nav-logo {
        display: block;
        height: var(--logo-h);
        width: auto;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.home .mobile-menu-close {
        min-width: 44px;
        min-height: 44px;
    }

    body.home .mobile-menu-links {
        padding: 24px;
        gap: 0;
    }

    body.home .mobile-menu-link {
        font-family: 'Inter Tight', system-ui, sans-serif;
        font-size: 22px;
        font-weight: 400;
        color: #fff;
        border-radius: 0;
        padding: 12px 0;
        min-height: 44px;
        position: relative;
    }

    body.home .mobile-menu-link.is-active::after {
        content: '';
        display: block;
        width: 12px;
        height: 1px;
        margin-top: 4px;
        background: var(--hm-green);
    }

    body.home .mobile-menu-link:hover {
        background: transparent;
        color: #fff;
        opacity: 0.5;
    }
}

@media (max-width: 479px) {
    html:has(body.home),
    body.home {
        overflow-x: hidden;
        --gutter: 18px;
        --g-gap: 18px;
    }

    .container-main {
        padding: 0 18px;
    }

    .medium-heading {
        font-size: 22px;
    }

    .large-text {
        font-size: 16px;
    }

    .circle-line {
        font-size: 22px;
        line-height: 24px;
    }

    .b-body {
        font-size: var(--type-body);
        line-height: 1.5;
    }

    .b-hero-aside {
        font-size: var(--type-body);
        line-height: 1.5;
        font-weight: 400;
        color: var(--color-body);
    }

    .frame-title-stack span,
    .frame-title-sm .frame-title-stack span {
        font-size: var(--type-section);
    }

    .large-block-link {
        min-height: auto;
        padding: 24px;
        gap: 18px;
    }

    .b-model .large-block-link {
        padding: var(--space-36);
    }

    .b-btn {
        width: 100%;
        height: 48px;
    }

    .footer .gutter-1500 {
        padding: 0 18px;
    }

    body.home .mobile-menu-header,
    body.home .mobile-menu-links {
        padding-left: 18px;
        padding-right: 18px;
    }

    .lined-image-full .line-container {
        grid-column-gap: 8px;
        grid-row-gap: 8px;
    }

    .lined-image .line-container {
        grid-column-gap: 9px;
        grid-row-gap: 9px;
        gap: 9px;
    }

    .b-h1 {
        font-size: var(--type-section);
        line-height: 1.2;
    }

    .b-hero .curve-pattern {
        --curve-gap: 6px;
        height: 128px;
    }

    .b-cta .curve-pattern.hug-right {
        --curve-gap: 9px;
        --curve-h: 191px;
        height: 191px;
    }

    .b-cta-title {
        font-size: var(--type-section);
    }
}

/* Choreography. Initial hide only after JS adds .motion-ready. */

/* Hero is carved out: these hides must not match .b-hero .hm-rise,
   .b-hero .hm-rule, or .b-hero .curve-pattern .line. :where() keeps
   the original specificity so .is-revealed can still unhide below-fold. */
body.home.motion-ready .hm-rise:where(:not(.b-hero *)):where(:not(.fold-first *)) {
    opacity: 0;
    transform: translateY(var(--hm-travel));
}

body.home.motion-ready .hm-rule:where(:not(.b-hero *)) {
    transform: scaleX(0);
    transform-origin: left center;
}

body.home.motion-ready .b-lined-photo {
    --etch: 0;
    --line-count: 51;
}

body.home.motion-ready .lined-image-full .line {
    --i: 0;
    transform: scaleX(clamp(0, calc(var(--etch) * var(--line-count) - var(--i)), 1));
}

body.home.motion-ready .lined-image-full .line:first-child,
body.home.motion-ready .lined-image-full .line:last-child {
    transform: scaleX(1);
}

body.home.motion-ready .lined-image-full .multiply-image {
    opacity: calc(0.15 + (var(--etch) * 0.85));
}

body.home.motion-ready .lined-image-portrait {
    --etch: 0;
    --line-count: 48;
}

body.home.motion-ready .lined-image-portrait .line {
    --i: 0;
    transform: scaleX(clamp(0, calc(var(--etch) * var(--line-count) - var(--i)), 1));
}

body.home.motion-ready .lined-image-portrait .line:first-child,
body.home.motion-ready .lined-image-portrait .line:last-child {
    transform: scaleX(1);
}

body.home.motion-ready .lined-image-portrait .multiply-image {
    opacity: calc(0.15 + (var(--etch) * 0.85));
}

body.home.motion-ready .b-circle .circular-text-section {
    --etch: 0;
    --line-count: 39;
}

body.home.motion-ready .b-circle .circular-text-lines .line {
    --i: 0;
    transform: scaleX(clamp(0, calc(var(--etch) * var(--line-count) - var(--i)), 1));
}

body.home.motion-ready .b-circle .circular-text-lines .line:first-child,
body.home.motion-ready .b-circle .circular-text-lines .line:last-child {
    transform: scaleX(1);
}

body.home.motion-ready .b-circle .circular-text-section .multiply-image {
    opacity: calc(0.15 + (var(--etch) * 0.85));
}

body.home.motion-ready .hm-fade {
    opacity: 0;
}

body.home.motion-ready .is-revealed .hm-rise,
body.home.motion-ready .is-revealed.hm-rise {
    opacity: 1;
    transform: translateY(0);
}

/* How it works: each proof waits for its own arrival, not the section dump. */
body.home.landing.motion-ready .b-proof.is-revealed .proof-card.hm-rise:not(.is-revealed) {
    opacity: 0;
    transform: translateY(var(--hm-travel));
}

body.home.landing.motion-ready .b-proof .proof-card.hm-rise.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

body.home.motion-ready .is-revealed .hm-rule,
body.home.motion-ready .is-revealed.hm-rule {
    transform: scaleX(1);
}

body.home.motion-ready .is-revealed .hm-fade,
body.home.motion-ready .is-revealed.hm-fade {
    opacity: 1;
}

body.home.motion-ready .hm-rise:where(:not(.b-hero *)),
body.home.motion-ready .hm-rule:where(:not(.b-hero *)),
body.home.motion-ready .hm-fade {
    transition-property: opacity, transform;
    transition-duration: var(--hm-dur);
    transition-timing-function: var(--hm-ease);
}

body.home.motion-ready .hm-rule:where(:not(.b-hero *)) {
    transition-duration: var(--hm-line-dur);
}

body.home.motion-ready .record-path--vert.hm-rule {
    transform: scaleY(0);
    transform-origin: top center;
}

body.home.motion-ready .is-revealed .record-path--vert.hm-rule,
body.home.motion-ready .is-revealed.record-path--vert.hm-rule {
    transform: scaleY(1);
}

body.home.motion-ready .ico-edge {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

body.home.motion-ready .is-revealed .ico-edge {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--hm-trace-dur) var(--hm-ease);
}

body.home.motion-ready .ico-face,
body.home.motion-ready .ico-pole,
body.home.motion-ready .tx-tick {
    opacity: 0;
}

body.home.motion-ready .is-revealed .ico-face,
body.home.motion-ready .is-revealed .ico-pole,
body.home.motion-ready .is-revealed .tx-tick {
    opacity: 1;
    transition: opacity 200ms var(--hm-ease);
    transition-delay: var(--hm-trace-dur);
}

body.home.motion-ready .tx-rail {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

body.home.motion-ready .is-revealed .tx-rail {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--hm-trace-dur) var(--hm-ease);
}

/* Hero and first-screen motion is keyframes only. The fold waits for
   fold-ready so nav and the opening beat play together. Do not require
   .is-revealed — that class is markup so a stray hide cannot match. */

@keyframes hm-rise-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hm-hero-phrase-in {
    from {
        opacity: 0;
        filter: blur(10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes hm-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hm-line-in {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes hm-curve-in {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Hold the fold until nav is in, then play as one beat. */
html.fold-hold body.home .navbar-row .nav-link,
html.fold-hold body.home .navbar-row .mobile-menu-button,
html.fold-hold body.home .b-hero .hm-rise,
html.fold-hold body.home .b-hero .hero-title-line,
html.fold-hold body.home .b-hero .hero-description-line,
html.fold-hold body.home .b-hero .b-hero-actions,
html.fold-hold body.home .b-hero .curve-pattern .line,
html.fold-hold body.home .fold-first .hm-rise {
    opacity: 0;
}

html.fold-hold body.home .navbar-row::after {
    transform: scaleX(0);
}

body.home.motion-ready:not(.fold-ready) .navbar-row .nav-link,
body.home.motion-ready:not(.fold-ready) .navbar-row .mobile-menu-button,
body.home.motion-ready:not(.fold-ready) .b-hero .hm-rise,
body.home.motion-ready:not(.fold-ready) .b-hero .hero-title-line,
body.home.motion-ready:not(.fold-ready) .b-hero .hero-description-line,
body.home.motion-ready:not(.fold-ready) .b-hero .b-hero-actions,
body.home.motion-ready:not(.fold-ready) .b-hero .curve-pattern .line,
body.home.motion-ready:not(.fold-ready) .fold-first .hm-rise {
    opacity: 0;
    animation: none;
}

body.home.motion-ready:not(.fold-ready) .navbar-row::after {
    transform: scaleX(0);
}

body.home.motion-ready.fold-ready .navbar-row::after {
    animation: hm-line-in var(--hm-fold-line-dur) var(--hm-fold-ease) both;
}

body.home.motion-ready.fold-ready .navbar-row .nav-link,
body.home.motion-ready.fold-ready .navbar-row .mobile-menu-button {
    animation: hm-fade-in 240ms var(--hm-fold-ease) both;
}

body.home.motion-ready.fold-ready .navbar-row .nav-link-wrapper:nth-child(1) .nav-link { animation-delay: 0ms; }
body.home.motion-ready.fold-ready .navbar-row .nav-link-wrapper:nth-child(2) .nav-link { animation-delay: var(--hm-fold-nav-stagger); }
body.home.motion-ready.fold-ready .navbar-row .nav-link-wrapper:nth-child(3) .nav-link {
    animation-delay: calc(var(--hm-fold-nav-stagger) * 2);
}
body.home.motion-ready.fold-ready .navbar-row .nav-link-wrapper:nth-child(4) .nav-link,
body.home.motion-ready.fold-ready .navbar-row .mobile-menu-button {
    animation-delay: calc(var(--hm-fold-nav-stagger) * 3);
}

body.home.motion-ready.fold-ready .b-hero .hero-title-line,
body.home.motion-ready.fold-ready .b-hero .hero-description-line {
    animation: hm-hero-phrase-in 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

body.home.motion-ready.fold-ready .b-hero .hero-title-copy--desktop .hero-title-line:nth-of-type(1) { animation-delay: 180ms; }
body.home.motion-ready.fold-ready .b-hero .hero-title-copy--desktop .hero-title-line:nth-of-type(2) { animation-delay: 280ms; }
body.home.motion-ready.fold-ready .b-hero .hero-title-copy--mobile .hero-title-line:nth-of-type(1) { animation-delay: 180ms; }
body.home.motion-ready.fold-ready .b-hero .hero-title-copy--mobile .hero-title-line:nth-of-type(2) { animation-delay: 225ms; }
body.home.motion-ready.fold-ready .b-hero .hero-title-copy--mobile .hero-title-line:nth-of-type(3) { animation-delay: 270ms; }
body.home.motion-ready.fold-ready .b-hero .hero-title-copy--mobile .hero-title-line:nth-of-type(4) { animation-delay: 315ms; }
body.home.motion-ready.fold-ready .b-hero .hero-description-line { animation-delay: 420ms; }

body.home.motion-ready .b-hero .hm-rise {
    animation: hm-rise-in 360ms var(--hm-fold-ease) both;
}

body.home.motion-ready .b-hero .b-h1 { animation-delay: 0ms; }
body.home.motion-ready .b-hero .b-hero-aside { animation-delay: 80ms; }
body.home.motion-ready .b-hero .b-btn { animation-delay: 160ms; }
body.home.motion-ready .b-hero .b-text-link { animation-delay: 200ms; }
body.home.motion-ready .b-hero .b-hero-support { animation-delay: 240ms; }

body.home.motion-ready.fold-ready .b-hero .b-h1 { animation-delay: 160ms; }
body.home.motion-ready.fold-ready .b-hero .b-hero-aside { animation-delay: 230ms; }
body.home.motion-ready.fold-ready .b-hero .b-btn { animation-delay: 300ms; }
body.home.motion-ready.fold-ready .b-hero .b-text-link { animation-delay: 340ms; }
body.home.motion-ready.fold-ready .b-hero .b-hero-support { animation-delay: 380ms; }

body.home.motion-ready.fold-ready .b-hero .b-hero-actions .b-btn {
    animation: hm-hero-phrase-in 1s cubic-bezier(0.25, 0.1, 0.25, 1) 560ms both;
}

body.home.motion-ready.fold-ready .b-hero .b-hero-actions .b-text-link {
    animation: hm-hero-phrase-in 1s cubic-bezier(0.25, 0.1, 0.25, 1) 650ms both;
}

body.home.motion-ready.fold-ready .fold-first .hm-rise {
    animation: hm-rise-in 360ms var(--hm-fold-ease) both;
}

body.home.motion-ready.fold-ready .fold-first .company-letter-content.hm-rise { animation-delay: 160ms; }
body.home.motion-ready.fold-ready .fold-first .writing-letter > .writing-title.hm-rise { animation-delay: 160ms; }
body.home.motion-ready.fold-ready .fold-first .writing-index.hm-rise { animation-delay: 240ms; }
body.home.motion-ready.fold-ready .fold-first .writing-kicker.hm-rise { animation-delay: 160ms; }
body.home.motion-ready.fold-ready .fold-first .writing-etch.hm-rise { animation-delay: 220ms; }
body.home.motion-ready.fold-ready .fold-first .writing-head .writing-title.hm-rise { animation-delay: 280ms; }
body.home.motion-ready.fold-ready .fold-first .writing-date.hm-rise { animation-delay: 320ms; }

html.fold-hold body.home .fold-first .writing-body,
body.home.motion-ready:not(.fold-ready) .fold-first .writing-body {
    opacity: 0;
}

body.home.motion-ready.fold-ready .fold-first .writing-body {
    animation: hm-fade-in 360ms var(--hm-fold-ease) 360ms both;
}

/* Hero curve ticks: fade + grow from the left. One-shot, not scrubbed. */
body.home.motion-ready .b-hero .curve-pattern .line {
    transform-origin: left center;
    animation: hm-curve-in var(--hm-curve-dur) var(--hm-fold-ease) both;
    animation-delay: calc(var(--hm-curve-delay) + (var(--i, 0) * var(--hm-curve-stagger)));
}

body.home.motion-ready.fold-ready .b-hero .curve-pattern .line {
    animation-delay: calc(820ms + (var(--i, 0) * 18ms));
}

body.home.motion-ready .b-model.is-revealed .large-block-link { transition-delay: 60ms; }

body.home.motion-ready .b-build.is-revealed .container-main > .line:first-child { transition-delay: 0ms; }
body.home.motion-ready .b-build.is-revealed .b-eyebrow { transition-delay: 60ms; }
body.home.motion-ready .b-build.is-revealed .medium-heading { transition-delay: 120ms; }
body.home.motion-ready .b-build.is-revealed .build-row:nth-child(1) { transition-delay: 180ms; }
body.home.motion-ready .b-build.is-revealed .build-table > .line:nth-child(2) { transition-delay: 180ms; }
body.home.motion-ready .b-build.is-revealed .build-row:nth-child(3) { transition-delay: 240ms; }
body.home.motion-ready .b-build.is-revealed .build-table > .line:nth-child(4) { transition-delay: 240ms; }
body.home.motion-ready .b-build.is-revealed .build-row:nth-child(5) { transition-delay: 300ms; }

body.home.motion-ready .b-record.is-revealed .container-main > .line { transition-delay: 0ms; }
body.home.motion-ready .b-record.is-revealed .large-block-link { transition-delay: 60ms; }

body.home.motion-ready .b-intel.is-revealed .container-main > .line { transition-delay: 0ms; }
body.home.motion-ready .b-intel.is-revealed .b-eyebrow { transition-delay: 60ms; }
body.home.motion-ready .b-intel.is-revealed .medium-heading { transition-delay: 120ms; }
body.home.motion-ready .b-intel.is-revealed .b-intel-body { transition-delay: 180ms; }
body.home.motion-ready .b-intel.is-revealed .ico--intel { transition-delay: 180ms; }

body.home.motion-ready .b-work.is-revealed .container-main > .line:first-child { transition-delay: 0ms; }
body.home.motion-ready .b-work.is-revealed .b-eyebrow { transition-delay: 60ms; }
body.home.motion-ready .b-work.is-revealed .medium-heading { transition-delay: 120ms; }
body.home.motion-ready .b-work.is-revealed .b-work-prose { transition-delay: 180ms; }
body.home.motion-ready .b-work.is-revealed .work-row-ledger:nth-child(1) { transition-delay: 240ms; }
body.home.motion-ready .b-work.is-revealed .work-table > .line:nth-child(2) { transition-delay: 240ms; }
body.home.motion-ready .b-work.is-revealed .work-row-ledger:nth-child(3) { transition-delay: 300ms; }
body.home.motion-ready .b-work.is-revealed .work-table > .line:nth-child(4) { transition-delay: 300ms; }
body.home.motion-ready .b-work.is-revealed .work-row-ledger:nth-child(5) { transition-delay: 360ms; }

body.home.motion-ready .b-circle.is-revealed .b-circle-eyebrow { transition-delay: 0ms; }
body.home.motion-ready .b-circle.is-revealed .circle-inner { transition-delay: 60ms; }

body.home.motion-ready .b-cta.is-revealed .b-cta-title { transition-delay: 0ms; }
body.home.motion-ready .b-cta.is-revealed .b-body { transition-delay: 80ms; }
body.home.motion-ready .b-cta.is-revealed .b-btn { transition-delay: 140ms; }

body.home.motion-ready .b-frontier .frontier-card,
body.home.motion-ready .b-frontier .frontier-shot,
body.home.motion-ready .b-about .about-band-copy,
body.home.motion-ready .b-about .about-band-shot {
    --hm-travel: 12px;
}

body.home.motion-ready .b-frontier.is-revealed .frontier-row:nth-child(1) .frontier-card:nth-child(1) { transition-delay: 40ms; }
body.home.motion-ready .b-frontier.is-revealed .frontier-row:nth-child(1) .frontier-card:nth-child(2) { transition-delay: 140ms; }
body.home.motion-ready .b-frontier.is-revealed .frontier-row:nth-child(2) .frontier-card:nth-child(1) { transition-delay: 240ms; }
body.home.motion-ready .b-frontier.is-revealed .frontier-row:nth-child(2) .frontier-card:nth-child(2) { transition-delay: 340ms; }

body.home.motion-ready .b-about.is-revealed .about-band-copy { transition-delay: 40ms; }
body.home.motion-ready .b-about.is-revealed .about-band-shot { transition-delay: 180ms; }

body.home.motion-ready .b-cta.is-revealed .b-cta-actions { transition-delay: 200ms; }

body.home.motion-ready .b-cta .curve-pattern.hug-right .line {
    transform: scaleX(0);
    transform-origin: right center;
}

body.home.motion-ready .b-cta.is-revealed .curve-pattern.hug-right .line {
    animation: hm-curve-in var(--hm-curve-dur) var(--hm-curve-ease) both;
    animation-delay: calc(var(--hm-curve-delay) + (var(--i, 0) * var(--hm-curve-stagger)));
}

body.home.motion-ready .footer.is-revealed .footer-grid { transition-delay: 80ms; }
body.home.motion-ready .footer.is-revealed .footer-legal { transition-delay: 160ms; }

body.home.motion-ready .is-revealed .large-block-link.hm-rise {
    transition-property: opacity, transform, border-color;
    transition-duration: var(--hm-dur), var(--hm-dur), 220ms;
}

body.home.motion-ready .is-revealed .b-btn.hm-rise:where(:not(.b-hero *)) {
    transition-property: opacity, transform, color, background-color, border-color;
    transition-duration: var(--hm-dur), var(--hm-dur), 220ms, 220ms, 220ms;
}

body.home.motion-ready .is-revealed .b-text-link.hm-rise:where(:not(.b-hero *)) {
    transition-property: opacity, transform, color;
    transition-duration: var(--hm-dur), var(--hm-dur), 220ms;
}

@keyframes hm-tick-flash {
    0% { background-color: #fff; fill: #fff; }
    35% { background-color: #10B981; fill: #10B981; }
    100% { background-color: #fff; fill: #fff; }
}

@keyframes hm-dash-flash {
    0% { color: #fff; }
    35% { color: #10B981; }
    100% { color: #fff; }
}

body.home.motion-ready .is-revealed .caption-tick {
    animation: hm-tick-flash 720ms var(--hm-ease) both;
}

body.home.motion-ready .is-revealed .b-eyebrow::before {
    animation: hm-dash-flash 720ms var(--hm-ease) both;
}

@media (hover: hover) and (pointer: fine) {
    body.home.motion-ready .large-block-link:hover .caption-tick {
        animation: none;
        background-color: var(--hm-green);
    }

    body.home.motion-ready .b-eyebrow:hover::before {
        animation: none;
        color: var(--hm-green);
        background-color: transparent;
    }
}

@media (max-width: 768px) {
    body.home.motion-ready .b-hero .ico--hero,
    body.home.motion-ready .b-intel .ico--intel,
    body.home.motion-ready .b-cta .ico--close,
    body.home.motion-ready .is-revealed .b-hero .ico--hero,
    body.home.motion-ready .is-revealed .b-intel .ico--intel,
    body.home.motion-ready .is-revealed .b-cta .ico--close {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.fold-hold body.home .b-hero .hero-title-line,
    html.fold-hold body.home .b-hero .hero-description-line,
    html.fold-hold body.home .b-hero .b-hero-actions,
    body.home.motion-ready .b-hero .hero-title-line,
    body.home.motion-ready .b-hero .hero-description-line,
    body.home.motion-ready .b-hero .b-hero-actions,
    body.home.motion-ready .b-hero .b-hero-actions .b-btn,
    body.home.motion-ready .b-hero .b-hero-actions .b-text-link {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
    }

    .frame-title-stack,
    body.home .mobile-menu-overlay,
    body.home .mobile-menu-content,
    body.home .hamburger-line,
    body.home .b-btn,
    body.home .b-text-link,
    body.home .b-text-link::after,
    body.home .footer-link,
    body.home .footer-link::after,
    body.home .large-block-link,
    body.home .caption-tick,
    body.home .b-eyebrow::before,
    body.home .navbar-row .nav-link::after {
        transition: none;
    }

    .large-block-link:hover .frame-title-stack {
        transform: none;
    }

    body.home.motion-ready .b-lined-photo,
    body.home.motion-ready .lined-image-portrait,
    body.home.motion-ready .b-circle .circular-text-section {
        --etch: 1;
    }

    body.home.motion-ready .lined-image-full .line,
    body.home.motion-ready .lined-image-portrait .line,
    body.home.motion-ready .b-circle .circular-text-lines .line,
    body.home.motion-ready .b-hero .curve-pattern .line,
    body.home.motion-ready .b-cta .curve-pattern.hug-right .line,
    body.home.motion-ready .b-hero .hm-rise,
    body.home.motion-ready .fold-first .hm-rise,
    body.home.motion-ready .fold-first .writing-body,
    body.home.motion-ready.fold-ready .fold-first .writing-body,
    body.home .navbar-row::after,
    body.home.motion-ready .navbar-row::after,
    body.home.motion-ready.fold-ready .navbar-row::after,
    body.home.motion-ready .navbar-row .nav-link,
    body.home.motion-ready .navbar-row .mobile-menu-button,
    body.home.motion-ready.fold-ready .navbar-row .nav-link,
    body.home.motion-ready.fold-ready .navbar-row .mobile-menu-button,
    html.fold-hold body.home .navbar-row .nav-link,
    html.fold-hold body.home .navbar-row .mobile-menu-button,
    html.fold-hold body.home .b-hero .hm-rise,
    html.fold-hold body.home .b-hero .curve-pattern .line,
    html.fold-hold body.home .fold-first .hm-rise,
    html.fold-hold body.home .fold-first .writing-body,
    html.fold-hold body.home .navbar-row::after,
    body.home.motion-ready:not(.fold-ready) .navbar-row .nav-link,
    body.home.motion-ready:not(.fold-ready) .navbar-row .mobile-menu-button,
    body.home.motion-ready:not(.fold-ready) .b-hero .hm-rise,
    body.home.motion-ready:not(.fold-ready) .b-hero .curve-pattern .line,
    body.home.motion-ready:not(.fold-ready) .fold-first .hm-rise,
    body.home.motion-ready:not(.fold-ready) .fold-first .writing-body,
    body.home.motion-ready:not(.fold-ready) .navbar-row::after {
        transform: none;
        opacity: 1;
        transition: none;
        animation: none;
    }

    body.home.motion-ready .record-path--vert.hm-rule,
    body.home.motion-ready .is-revealed .record-path--vert.hm-rule,
    body.home.motion-ready .is-revealed.record-path--vert.hm-rule,
    body.home.motion-ready .hm-rise,
    body.home.motion-ready .hm-rule,
    body.home.motion-ready .hm-fade,
    body.home.motion-ready .lined-image-full .multiply-image,
    body.home.motion-ready .lined-image-portrait .multiply-image,
    body.home.motion-ready .b-circle .circular-text-section .multiply-image,
    body.home.motion-ready .is-revealed .hm-rise,
    body.home.motion-ready .is-revealed.hm-rise,
    body.home.motion-ready .is-revealed .hm-rule,
    body.home.motion-ready .is-revealed.hm-rule,
    body.home.motion-ready .is-revealed .hm-fade,
    body.home.motion-ready .is-revealed .lined-image-full .multiply-image,
    body.home.motion-ready .is-revealed .lined-image-portrait .multiply-image,
    body.home.motion-ready .is-revealed .b-circle .circular-text-section .multiply-image,
    body.home.motion-ready .is-revealed.hm-fade {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }

    body.home.motion-ready .is-revealed .b-eyebrow::before,
    body.home.motion-ready .is-revealed .caption-tick {
        animation: none;
        opacity: 1;
        color: #fff;
        background-color: #fff;
    }

    body.home.motion-ready .is-revealed .b-eyebrow::before {
        background-color: transparent;
    }

    body.home.motion-ready .tx-rail,
    body.home.motion-ready .ico-edge,
    body.home.motion-ready .ico-face,
    body.home.motion-ready .ico-pole,
    body.home.motion-ready .tx-tick,
    body.home.motion-ready .is-revealed .tx-rail,
    body.home.motion-ready .is-revealed .ico-edge,
    body.home.motion-ready .is-revealed .ico-face,
    body.home.motion-ready .is-revealed .ico-pole,
    body.home.motion-ready .is-revealed .tx-tick {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        opacity: 1;
        transition: none;
    }

    body.home.motion-ready .is-revealed .large-block-link.hm-rise,
    body.home.motion-ready .is-revealed .b-btn.hm-rise,
    body.home.motion-ready .is-revealed .b-text-link.hm-rise {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
}

/* Additional sections */

.b-intro {
    margin-top: var(--space-36);
    max-width: var(--measure-prose);
}

.b-intro .b-body {
    margin: 0;
}

.b-record {
    padding: var(--space-72) 0 0;
}

.b-record .container-main {
    row-gap: var(--space-36);
}

.b-record .large-block-link {
    padding: var(--space-72);
    border-radius: 0;
}

.b-circle-prose {
    max-width: var(--measure-prose);
    margin-top: var(--space-48);
}

.b-circle-prose .b-body:not(:last-child) {
    margin-bottom: 24px;
}

.b-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.build-name-link {
    color: inherit;
    text-decoration: none;
    transition: color 220ms var(--hm-ease);
}

@media (hover: hover) and (pointer: fine) {
    .build-name-link:hover {
        color: var(--color-body);
    }
}

.build-name-link:focus-visible {
    outline: 1px solid var(--color-focus);
    outline-offset: 3px;
}

/* Company letter. One centered measure. Text stays left-aligned. */

body.home.company .navbar-row {
    margin-bottom: var(--space-72);
}

.b-company-letter {
    padding: 0 0 var(--space-96);
}

.b-company-letter .container-main {
    row-gap: 0;
}

.company-letter-content {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 50ch);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.company-letter-content .b-eyebrow {
    margin: 0 0 var(--space-24);
}

.company-lead {
    margin: 0 0 1.35em;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: var(--type-section);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--color-ink);
    text-wrap: balance;
    font-kerning: normal;
    text-box: trim-start cap;
}

.company-prose {
    display: flex;
    flex-direction: column;
    gap: 1.65em;
    width: 100%;
}

.company-letter-content .b-body {
    margin: 0;
    max-width: none;
}

.company-letter-content .b-body.company-standfirst {
    margin: 0 0 2em;
    max-width: none;
}

.company-actions {
    margin-top: 2.25em;
}

@media (max-width: 768px) {
    .company-lead {
        font-size: var(--type-section);
    }

    .b-company-letter {
        padding: 0 0 var(--space-72);
    }
}

/* Frontier columns. Same field as the rest of the page. */

.b-frontier {
    padding: var(--space-72) 0 var(--space-48);
}

.frontier-grid {
    /* Three independent knobs: space between rows, between columns, and
       between a card's copy and its visual. */
    --frontier-row-gap: var(--space-72);
    --frontier-col-gap: var(--g-gap);
    --frontier-copy-gap: 28px;
    display: flex;
    flex-direction: column;
    gap: var(--frontier-row-gap);
    margin-top: var(--space-36);
}

.frontier-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--frontier-col-gap);
    row-gap: var(--frontier-row-gap);
}

.frontier-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.frontier-card-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 var(--frontier-copy-gap);
}

.frontier-card-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: #fff;
}

.frontier-card-lead,
.frontier-card-text {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.62);
}

.frontier-card-lead {
    color: rgba(255, 255, 255, 0.84);
}

.frontier-link {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 0 2px;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
}

.frontier-link:hover {
    color: rgba(255, 255, 255, 0.7);
}

.frontier-card-visual {
    margin-top: auto;
    padding: 0;
}

.frontier-shot {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: top center;
    border-radius: 0;
    background: #0b0b0b;
}

@media (max-width: 940px) {
    .frontier-row {
        grid-template-columns: 1fr;
    }

    .frontier-shot {
        height: 240px;
    }
}

/* Writing. Quiet letter, not a blog. */

.b-writing {
    padding: var(--space-72) 0;
}

.writing-head,
.writing-index,
.writing-body {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.writing-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--space-48);
}

.writing-kicker {
    margin: 0 0 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

.writing-kicker a {
    color: inherit;
    text-decoration: none;
}

.writing-kicker a:hover {
    color: #fff;
}

.writing-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--type-section);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: #fff;
}

.writing-date {
    display: block;
    margin: 14px 0 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(255,255,255,0.4);
}

.writing-body {
    max-width: 40rem;
}

.essay-p {
    margin: 0 0 1.25em;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255,255,255,0.82);
}

.essay-source {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.essay-source:hover {
    color: var(--hm-green, #10B981);
}

.writing-sub {
    margin: 2.5em 0 1em;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: #fff;
}

.essay-sources {
    list-style: none;
    padding: 0;
    margin: 0;
}

.essay-source-item {
    margin: 0 0 1.4em;
}

.essay-source-title {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 16px;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.essay-source-blurb {
    margin: 6px 0 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,0.5);
}

.writing-index {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 40rem;
}

.writing-index li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
}

.writing-index-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: #fff;
    text-decoration: none;
}

.writing-index-title:hover {
    color: rgba(255,255,255,0.7);
}

@media (max-width: 768px) {
    .writing-title { font-size: var(--type-section); }
    .b-writing { padding: var(--space-48) 0 var(--space-72); }
}

.b-frontier .container-main > .line.hm-rule {
    margin-bottom: 0;
}


/* About row. Copy and photo on the page, no well. */
.b-about {
    padding: var(--space-48) 0;
}
.about-band {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--g-gap);
    align-items: center;
    min-height: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
.about-band-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 0;
}
.about-band-copy p {
    margin: 0;
    max-width: 32em;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #fff;
}
.about-band-visual {
    padding: 0;
}
.about-band-shot {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: 50% 40%;
    border-radius: 0;
}
@media (max-width: 800px) {
    .about-band {
        grid-template-columns: 1fr;
    }
    .about-band-shot {
        height: 220px;
    }
}



/* Frontier windows. Same product, four views. Gap between rows, not stretched panes. */
.frontier-card .frontier-link { margin-top: 20px; padding-top: 12px; }

.fx-window {
    --fx-line: #2a2a2a;
    --fx-mute: rgba(255, 255, 255, 0.4);
    --fx-ink: rgba(255, 255, 255, 0.78);
    display: flex;
    flex-direction: column;
    height: 400px;
    background: #101010;
    border: 1px solid var(--color-edge);
    box-shadow: none;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    font-variant-numeric: tabular-nums;
}

.fx-titlebar {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 12px;
    border-bottom: 1px solid var(--fx-line);
    background: #1a1a1a;
}
.fx-controls {
    display: flex;
    gap: 5px;
}
.fx-controls i {
    width: 9px;
    height: 9px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
}
.fx-controls i:first-child {
    background: #10B981;
    border-color: #10B981;
}
.fx-app,
.fx-win-name,
.fx-win-live,
.fx-path,
.fx-statusbar,
.fx-th,
.fx-tr b,
.fx-tr span:nth-child(2),
.fx-tr span:nth-child(3),
.fx-tr span:nth-child(4) {
    font-family: var(--font-mono);
    font-size: var(--type-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fx-app { color: rgba(255, 255, 255, 0.34); }
.fx-win-name {
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fx-win-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #10B981;
    justify-self: end;
}
.fx-lamp {
    width: 5px;
    height: 5px;
    background: #10B981;
    flex: none;
}
@media (prefers-reduced-motion: no-preference) {
    .fx-lamp { animation: fx-lamp 2.4s ease-in-out infinite; }
}
@keyframes fx-lamp {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.28; }
}

.fx-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    min-height: 26px;
    padding: 0 12px;
    border-bottom: 1px solid var(--fx-line);
    color: var(--fx-mute);
    background: #141414;
}
.fx-path span {
    margin: 0 6px;
    color: rgba(255, 255, 255, 0.2);
}

.fx-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--fx-line);
}
.fx-tabs span {
    padding: 7px 4px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--type-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.36);
    border-right: 1px solid var(--fx-line);
}
.fx-tabs span:last-child { border-right: 0; }
.fx-tabs span.is-now {
    color: #fff;
    box-shadow: inset 0 -1px 0 #10B981;
}

.fx-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.fx-table {
    display: block;
    flex: 1;
    min-height: 0;
    padding: 10px 0 12px;
}
.fx-tr {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    padding: 0 16px;
    border: 0;
    font-family: var(--font-body);
    font-size: var(--type-caption);
    line-height: 1.3;
    color: var(--fx-ink);
    font-variant-numeric: tabular-nums;
}
.fx-tr + .fx-tr {
    margin-top: 20px;
}
.fx-th {
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--type-caption);
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.32);
}
.fx-tr span:nth-child(2),
.fx-tr span:nth-child(3),
.fx-tr span:nth-child(4) {
    color: rgba(255, 255, 255, 0.42);
    font-size: var(--type-caption);
}
.fx-th span:nth-child(2),
.fx-th span:nth-child(3),
.fx-th span:nth-child(4) {
    color: rgba(255, 255, 255, 0.32);
    font-size: var(--type-caption);
}
.fx-tr b {
    color: rgba(255, 255, 255, 0.34);
    font-weight: 400;
    justify-self: end;
}
.fx-tr.is-on { color: #fff; }
.fx-tr.is-on b { color: #10B981; }

.fx-queue .fx-table .fx-tr {
    grid-template-columns: minmax(0, 1.6fr) 48px 40px auto;
}
.fx-selected,
.fx-object {
    padding: 16px 16px 18px;
    border-bottom: 1px solid rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.04);
}
.fx-selected-top,
.fx-object-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 8px;
}
.fx-selected-top span,
.fx-object-top span,
.fx-selected-top b,
.fx-object-top em,
.fx-selected-top em {
    font-family: var(--font-mono);
    font-size: var(--type-caption);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-style: normal;
}
.fx-selected-top span,
.fx-object-top span { color: rgba(255, 255, 255, 0.4); }
.fx-selected-top strong,
.fx-object-top strong {
    font-family: var(--font-body);
    font-size: var(--type-caption);
    font-weight: 400;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fx-selected-top em,
.fx-object-top em { color: #10B981; justify-self: end; }
.fx-selected-top b { color: rgba(255, 255, 255, 0.4); }
.fx-selected p,
.fx-object p {
    margin: 8px 0 0;
    font-family: var(--font-mono);
    font-size: var(--type-caption);
    line-height: 1.4;
    letter-spacing: 0.03em;
    color: var(--fx-mute);
}

.fx-split {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    min-height: 0;
}
.fx-page {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-right: 1px solid var(--fx-line);
    min-height: 0;
    overflow: hidden;
}
.fx-page-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
    font-family: var(--font-mono);
    font-size: var(--type-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fx-mute);
}
.fx-page-head b { font-weight: 400; color: #fff; }
.fx-page p {
    margin: 0;
    padding-left: 7px;
    border-left: 1px solid transparent;
    font-family: var(--font-body);
    font-size: var(--type-caption);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.4);
}
.fx-page p.is-hit {
    border-left-color: #10B981;
    color: rgba(255, 255, 255, 0.84);
}
.fx-page p.is-miss {
    border-left-color: rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.68);
}
.fx-extract .fx-tr {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) auto;
}
.fx-through .fx-tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 76px auto;
}

.fx-object-top {
    grid-template-columns: auto minmax(0, 1fr) auto;
}
.fx-activity {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--fx-line);
    font-family: var(--font-mono);
    font-size: var(--type-caption);
    letter-spacing: 0.04em;
    color: var(--fx-mute);
}
.fx-activity p {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
}
.fx-activity span { color: rgba(255, 255, 255, 0.32); }

.fx-statusbar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    height: 26px;
    padding: 0 12px;
    align-items: center;
    border-top: 1px solid var(--fx-line);
    background: #0a0a0a;
    color: rgba(255, 255, 255, 0.34);
}
.fx-statusbar span:last-child { color: var(--fx-mute); }

body.home.motion-ready .b-frontier .fx-tabs,
body.home.motion-ready .b-frontier .fx-table,
body.home.motion-ready .b-frontier .fx-selected,
body.home.motion-ready .b-frontier .fx-object,
body.home.motion-ready .b-frontier .fx-activity,
body.home.motion-ready .b-frontier .fx-page,
body.home.motion-ready .b-proof .fx-tabs,
body.home.motion-ready .b-proof .fx-table,
body.home.motion-ready .b-proof .fx-selected,
body.home.motion-ready .b-proof .fx-object,
body.home.motion-ready .b-proof .fx-page {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--hm-dur) var(--hm-ease), transform var(--hm-dur) var(--hm-ease);
}
body.home.motion-ready .b-frontier.is-revealed .fx-tabs,
body.home.motion-ready .b-frontier.is-revealed .fx-table,
body.home.motion-ready .b-frontier.is-revealed .fx-selected,
body.home.motion-ready .b-frontier.is-revealed .fx-object,
body.home.motion-ready .b-frontier.is-revealed .fx-activity,
body.home.motion-ready .b-frontier.is-revealed .fx-page,
body.home.motion-ready .b-proof.is-revealed .fx-tabs,
body.home.motion-ready .b-proof.is-revealed .fx-table,
body.home.motion-ready .b-proof.is-revealed .fx-selected,
body.home.motion-ready .b-proof.is-revealed .fx-object,
body.home.motion-ready .b-proof.is-revealed .fx-page {
    opacity: 1;
    transform: none;
    transition-delay: calc(180ms + (var(--i, 0) * 60ms));
}

@media (max-width: 1100px) {
    .fx-window { height: 380px; }
    .fx-app { display: none; }
    .fx-titlebar { grid-template-columns: auto minmax(0, 1fr) auto; }
    .fx-page p { font-size: var(--type-caption); }
    .fx-queue .fx-table .fx-tr span:nth-child(2) { display: none; }
    .fx-queue .fx-table .fx-tr { grid-template-columns: minmax(0, 1fr) 40px auto; }
    .fx-through .fx-tr span:nth-child(2) { display: none; }
    .fx-through .fx-tr { grid-template-columns: minmax(0, 1fr) 76px auto; }
}
@media (max-width: 940px) {
    .fx-window {
        height: auto;
        min-height: 320px;
    }
}
@media (max-width: 520px) {
    .fx-window { min-height: 0; }
    .fx-tr { gap: 6px; padding-left: 10px; padding-right: 10px; }
    .fx-split { grid-template-columns: 1fr; }
    .fx-page { border-right: 0; border-bottom: 1px solid var(--fx-line); }
    .fx-statusbar span:nth-child(2) { display: none; }
}


/* Homepage rhythm. One scale, even air, same fade. */
body.home .b-build,
body.home .b-frontier,
body.home .b-intel,
body.home .b-about,
body.home .b-cta {
    padding-top: var(--space-96);
    padding-bottom: var(--space-96);
}
body.home .b-cta { padding-bottom: 0; }
body.home .b-frames { padding: 0 0 var(--space-96); }
body.home .b-hero { padding-bottom: var(--space-96); }

body.home .b-build .container-main > .line.hm-rule,
body.home .b-frontier .container-main > .line.hm-rule,
body.home .b-intel .container-main > .line.hm-rule,
body.home .b-about .container-main > .line.hm-rule {
    margin-bottom: var(--space-48);
}

body.home .frontier-grid { margin-top: 0; }
body.home .about-band { gap: var(--space-48); }
body.home .b-cta .container-main { row-gap: var(--space-36); }
body.home .b-cta-row { gap: var(--space-24); }

body.home .medium-heading,
body.home .b-cta-title,
body.home .frame-title-stack span,
body.home .frame-title-sm .frame-title-stack span {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: var(--type-section);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

body.home .frontier-card-title,
body.home .build-name {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: var(--type-card);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

body.home .b-hero-aside,
body.home .b-body,
body.home .b-intel-body,
body.home .b-intel-body p,
body.home .frontier-card-text,
body.home .about-band-copy p,
body.home .b-caption,
body.home .b-caption p {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--color-body);
}

body.home .about-band-copy p {
    max-width: 34em;
    color: #fff;
}

body.home .frontier-link,
body.home .b-text-link {
    font-size: var(--type-body);
    font-weight: 500;
    line-height: 1.4;
}

body.home.motion-ready .b-intel.is-revealed .medium-heading { transition-delay: 40ms; }
body.home.motion-ready .b-intel.is-revealed .b-intel-body { transition-delay: 140ms; }
body.home.motion-ready .b-about.is-revealed .about-band-copy { transition-delay: 40ms; }
body.home.motion-ready .b-about.is-revealed .about-band-shot { transition-delay: 160ms; }
body.home.motion-ready .b-frames.is-revealed .large-block-link,
body.home.motion-ready .b-frames.is-revealed .model-essay { transition-delay: 80ms; }

/* Spine. One left edge, type tops align to pictures, less empty floor. */
body.home .b-build,
body.home .b-frontier,
body.home .b-intel {
    padding-top: var(--space-72);
    padding-bottom: var(--space-72);
}
body.home .b-about {
    padding-top: var(--space-72);
    padding-bottom: var(--space-48);
}
body.home .b-cta {
    padding-top: var(--space-72);
    padding-bottom: 0;
}
body.home .b-build .container-main > .line.hm-rule,
body.home .b-frontier .container-main > .line.hm-rule,
body.home .b-intel .container-main > .line.hm-rule,
body.home .b-about .container-main > .line.hm-rule {
    margin-bottom: var(--space-36);
}

body.home .b-intel-row {
    align-items: flex-start;
}
body.home .b-intel-copy {
    align-self: flex-start;
    padding-top: 0;
}

body.home .about-band {
    align-items: start;
    gap: var(--space-36);
}
body.home .about-band-shot {
    height: 240px;
    object-position: 50% 30%;
}

body.home .b-model .large-block-link,
body.home .b-model .model-essay {
    padding: var(--space-72) 0;
}

body.home .b-cta-title {
    max-width: var(--measure-head);
}

body.home .b-build .b-section-head {
    margin-bottom: 0;
    gap: 0;
}
body.home .b-build .b-section-head .b-eyebrow {
    margin-bottom: var(--space-24);
}


.writing-etch {
    display: block;
    width: min(220px, 46vw);
    height: auto;
    margin: 0 auto 28px;
}


body.home .b-frames {
    padding-top: var(--space-72);
}
body.home .b-model .large-block-link,
body.home .b-model .model-essay {
    padding: var(--space-72) 0;
    margin-top: 0;
    box-sizing: border-box;
}


@media (max-width: 940px) {
    .frontier-row { grid-template-columns: 1fr; }
}

/* Composition. One argument, one spine, one 24px beat.
   Scoped to body.landing so contact / privacy / company keep their own joins. */

body.landing .navbar-row {
    margin-bottom: var(--space-96);
}

body.landing .b-hero,
body.landing .b-build,
body.landing .b-ops,
body.landing .b-how,
body.landing .b-proof,
body.landing .b-cta {
    padding-top: var(--space-72);
    padding-bottom: var(--space-72);
}

body.landing .b-hero {
    padding-top: 0;
    padding-bottom: var(--space-72);
}

body.landing .b-build {
    padding-top: var(--space-48);
}

body.landing .b-cta {
    padding-bottom: 0;
}

body.home.landing .b-how {
    padding-bottom: var(--space-96);
}

body.home.landing .b-ops {
    padding-top: var(--space-96);
    padding-bottom: var(--space-48);
}

body.home.landing .b-proof {
    padding-top: var(--space-96);
    padding-bottom: var(--space-96);
}

body.home.landing .b-cta {
    padding-top: var(--space-96);
}

/* One spine, left. Claim, standfirst, actions. */
body.landing .b-h1 {
    grid-column: 1 / -1;
    max-width: 22em;
    margin-bottom: var(--space-36);
    padding-right: 0;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: clamp(30px, 2.85vw, 38px);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.022em;
    font-optical-sizing: auto;
    font-kerning: normal;
    color: #d4d4d4;
}

body.landing .b-hero-aside,
body.landing .b-hero-actions,
body.landing .b-hero-support,
body.landing .b-section-head,
body.landing .b-cta-title,
body.landing .b-cta-copy,
body.landing .b-cta > .container-main > .b-body,
body.landing .b-cta-actions {
    grid-column: 1 / 8;
    max-width: none;
}

body.landing .b-hero-support,
body.landing .b-cta-copy,
body.landing .b-cta > .container-main > .b-body {
    max-width: var(--measure-prose);
}

body.landing .b-hero-aside {
    max-width: 38em;
    margin-bottom: 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: 0;
    font-weight: 400;
    color: #8a8a8a;
    text-wrap: pretty;
}

body.landing .b-hero-actions {
    margin-top: var(--space-36);
    margin-bottom: 0;
}

@media (min-width: 769px) {
    body.landing .b-hero .b-h1 {
        grid-row: 1;
    }

    body.landing .b-hero-aside {
        grid-column: 1 / 7;
        grid-row: 2;
    }

    body.landing .b-hero-actions {
        grid-column: 1 / 7;
        grid-row: 3;
        align-self: start;
        justify-self: start;
        margin-top: 20px;
    }

    body.landing .b-hero .curve-pattern {
        grid-row: 4;
    }
}

body.landing .b-hero .b-btn {
    background: #cfcfcf;
    border-color: #cfcfcf;
    color: #1a1a1a;
}

body.landing .b-hero .b-text-link {
    color: #b0b0b0;
}

body.landing .b-hero .curve-pattern {
    grid-column: 1 / -1;
    margin-top: var(--space-72);
    margin-bottom: 0;
    --curve-h: 176px;
    height: var(--curve-h);
    -webkit-mask-image: linear-gradient(to top, #000 12%, rgba(0, 0, 0, 0.55) 58%, transparent 100%);
    mask-image: linear-gradient(to top, #000 12%, rgba(0, 0, 0, 0.55) 58%, transparent 100%);
}

body.landing .b-hero .curve-pattern .line {
    background: #e0e0e0;
    opacity: calc(0.28 + (var(--i, 0) * 0.036));
}

body.landing .b-hero .curve-pattern .line.hm-rule {
    background: #d4d4d4;
    opacity: 0.88;
}

body.landing .b-hero-support {
    margin-top: var(--space-24);
    margin-bottom: 0;
}

body.landing .b-build .container-main > .line.hm-rule {
    display: none;
}

body.landing .b-build .container-main {
    row-gap: var(--space-36);
}

body.landing .b-section-head {
    margin-bottom: 0;
    gap: 0;
}

body.landing .b-build .b-section-head .b-eyebrow {
    margin-bottom: 0;
}

@media (min-width: 941px) {
    body.landing .build-row {
        grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
        column-gap: var(--g-gap);
        row-gap: 0;
        padding: var(--space-24) 0;
    }

    body.landing .build-name {
        grid-column: 1 / 6;
    }

    body.landing .build-row .b-body {
        grid-column: 6 / 13;
    }
}

.b-proof .container-main {
    row-gap: var(--space-48);
}

.proof-pair {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
    gap: var(--space-48);
    align-items: stretch;
}

/* One spine. The figure grid already maps the work; these proofs read in order. */
body.home.landing .proof-pair {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: var(--hairline) solid var(--color-edge);
}

.proof-card {
    grid-column: span 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    background: var(--color-panel);
    border: 0;
    box-shadow: var(--elevate);
    border-radius: 12px;
}

body.home.landing .proof-card {
    display: grid;
    grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
    column-gap: var(--g-gap);
    row-gap: var(--space-24);
    align-items: start;
    grid-column: 1 / -1;
    padding: var(--space-48) 0;
    gap: unset;
    background: none;
    box-shadow: none;
    border-radius: 0;
    border-bottom: var(--hairline) solid var(--color-edge);
}

body.home.landing .proof-card:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

body.home.landing .proof-copy {
    grid-column: 1 / 7;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    min-width: 0;
}

body.home.landing .proof-card-title {
    max-width: 16em;
    font-size: var(--type-section);
    font-weight: 400;
}

body.home.landing .proof-card .b-body {
    max-width: none;
    color: var(--color-body);
}

.proof-card-title {
    margin: 0;
    max-width: 16em;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--color-ink);
    text-wrap: balance;
}

.proof-card .b-body {
    margin: 0;
    max-width: 36em;
    color: rgba(255, 255, 255, 0.62);
}

.proof-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.4;
    color: var(--color-ink);
    text-decoration: none;
    transition: opacity 150ms ease;
}

.proof-card-link span {
    font-size: 0.9em;
}

.proof-card-link:hover {
    opacity: 0.7;
}

.proof-card-link:focus-visible {
    outline: 1px solid var(--color-focus);
    outline-offset: 3px;
}

.proof-well {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    background: #141414;
    border: 1px solid var(--color-edge);
    box-shadow: none;
    border-radius: 8px;
    pointer-events: none;
    user-select: none;
    --ui: 13px;
    --ui-meta: 12px;
    --ui-ink: rgba(255, 255, 255, 0.88);
    --ui-copy: rgba(255, 255, 255, 0.5);
}

.proof-well .sheet,
.proof-well .desk,
.proof-well .review,
.proof-well .layer {
    width: 100%;
}

.proof-well .sheet-focus {
    padding: 8px 0;
}

.proof-well .sheet-focus .sheet-row strong,
.proof-well .sheet-row.is-focus strong {
    font-size: var(--ui);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ui-ink);
}

.proof-well .sheet-row {
    padding: 6px 0;
}

.desk {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.desk-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-24);
    padding-bottom: 12px;
}

.desk-title {
    margin: 0 0 6px;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--ui, 13px);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--ui-ink, #fff);
}

.desk .line.muted {
    width: 100%;
    margin: 16px 0 4px;
}

.desk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
}

.desk-actions span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--color-edge);
    border-radius: 6px;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 12px;
    line-height: 1;
    color: var(--ui-copy, var(--color-body));
}

.desk-actions span.is-ink {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
}

.review {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.review .line.muted {
    width: 100%;
    margin: 16px 0 4px;
}

.review-extract {
    margin: 0;
    padding-left: 12px;
    border-left: 1px solid var(--color-edge);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--ui, 13px);
    line-height: 1.4;
    color: var(--ui-copy, var(--color-body));
}

.sheet {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    pointer-events: none;
    user-select: none;
}

.sheet-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-24);
    padding-bottom: 12px;
}

.sheet-kicker,
.sheet-meta,
.sheet-ref,
.sheet-foot,
.sheet-row em {
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: var(--type-caption);
    font-weight: 400;
    letter-spacing: var(--eyebrow-tracking);
    line-height: 1.5;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.sheet-kicker {
    color: var(--ui-copy, var(--color-body));
}

.sheet-meta,
.sheet-ref,
.sheet-foot,
.sheet-row em {
    color: var(--color-body);
}

.sheet-meta:last-child,
.sheet-row em {
    margin-left: auto;
}

.sheet-head .sheet-meta:last-child {
    margin-left: auto;
}

.sheet .line,
.sheet .line.muted {
    width: 100%;
}

.sheet-focus {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--space-24) 0;
}

.sheet-list {
    display: flex;
    flex-direction: column;
}

.sheet-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-24);
    padding: 14px 0;
}

.sheet-list .sheet-row + .sheet-row {
    border-top: var(--hairline, 1px) solid var(--color-edge);
}

.sheet-row strong {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--ui, 13px);
    font-weight: 400;
    color: var(--ui-copy, var(--color-body));
}

.sheet-row.is-focus strong,
.sheet-focus .sheet-row strong {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--ui, 13px);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ui-ink, #fff);
}

.sheet-focus .sheet-row em {
    color: var(--ui-ink, #fff);
}

.sheet-note {
    margin: 0;
    max-width: var(--measure-prose);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--ui, 13px);
    line-height: 1.4;
    color: var(--ui-copy, var(--color-body));
}

.sheet-foot {
    padding-top: 12px;
    margin: 0;
}

.sheet-quiet .sheet-row {
    padding: 12px 0;
}

.sheet-quiet .sheet-row.is-focus strong {
    font-size: var(--type-body);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    letter-spacing: 0;
}

.b-letter {
    position: relative;
    overflow: hidden;
}

.b-letter .b-lined-photo {
    position: absolute;
    inset: 0;
    padding: 0;
    z-index: 0;
    pointer-events: none;
}

.b-letter .b-lined-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color-field) 0%, var(--color-field) 42%, rgba(26, 26, 26, 0.55) 68%, transparent 100%);
    pointer-events: none;
}

.b-letter .lined-image-full,
.b-letter .lined-image-full img {
    height: 100%;
    max-height: none;
}

.b-letter .lined-image-full .line-container {
    justify-content: space-between;
}

.b-letter .container-main {
    position: relative;
    z-index: 1;
}

.letter-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding: var(--space-24) 0;
}

body.landing .b-cta .container-main {
    row-gap: var(--space-36);
}

body.landing .b-cta .curve-pattern.hug-right {
    grid-column: 1 / -1;
    margin-top: var(--space-36);
}

body.home.motion-ready .b-proof.is-revealed .b-eyebrow { transition-delay: 0ms; }
body.home.landing.motion-ready .b-proof.is-revealed .proof-card {
    transition-delay: 0ms;
}

body.home.motion-ready .b-letter.is-revealed .letter-copy { transition-delay: 40ms; }

body.home.motion-ready .b-build.is-revealed .fig:nth-child(1) { transition-delay: 40ms; }
body.home.motion-ready .b-build.is-revealed .fig:nth-child(2) { transition-delay: 80ms; }
body.home.motion-ready .b-build.is-revealed .fig:nth-child(3) { transition-delay: 120ms; }
body.home.motion-ready .b-build.is-revealed .fig:nth-child(4) { transition-delay: 160ms; }
body.home.motion-ready .b-build.is-revealed .fig:nth-child(5) { transition-delay: 200ms; }
body.home.motion-ready .b-build.is-revealed .fig:nth-child(6) { transition-delay: 240ms; }

/* How it works: hairline rows on 12-col spine, same voice as What we build */

body.landing .b-proof .container-main {
    row-gap: var(--space-24);
}

body.landing .b-proof .b-section-head {
    grid-column: 1 / 8;
    margin-bottom: 0;
    gap: 0;
}

body.landing .b-proof .b-section-head .b-eyebrow {
    margin-bottom: 0;
}

body.landing .b-proof .b-section-head .b-eyebrow::before {
    content: none;
}

body.landing .proof-pair {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.landing .proof-card {
    display: grid;
    grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
    column-gap: var(--g-gap);
    row-gap: 0;
    gap: unset;
    align-items: start;
    padding: var(--space-24) 0;
    background: none;
    border: 0;
    border-bottom: var(--hairline) solid var(--color-edge);
    box-shadow: none;
    border-radius: 0;
    min-height: 0;
}

body.landing .proof-card:last-child {
    border-bottom: 0;
}

body.landing .proof-copy {
    grid-column: 1 / 7;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    min-width: 0;
}

body.landing .proof-card-title {
    margin: 0;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.27;
    letter-spacing: -0.02em;
    color: #fff;
}

body.landing .proof-card .b-body {
    display: block;
    margin-top: var(--space-24);
    max-width: var(--measure-prose);
    color: var(--color-body);
}

body.landing .proof-well {
    grid-column: 7 / -1;
    margin: 0;
    padding: 14px 16px;
    background: var(--color-field);
    border: var(--hairline) solid var(--color-edge);
    box-shadow: none;
    border-radius: 0;
    min-height: 0;
    align-self: stretch;
}

@media (max-width: 940px) {
    body.landing .b-proof .b-section-head,
    body.landing .proof-copy,
    body.landing .proof-well {
        grid-column: 1 / -1;
    }

    body.landing .proof-card {
        grid-template-columns: 1fr;
        gap: var(--space-24);
        padding: var(--space-36) 0;
    }

    body.landing .proof-card .b-body {
        display: block;
        max-width: var(--measure-prose);
    }
}

@media (max-width: 940px) {
    body.landing .b-h1,
    body.landing .b-hero-aside,
    body.landing .b-hero-actions,
    body.landing .b-hero-support,
    body.landing .b-section-head,
    body.landing .b-cta-title,
    body.landing .b-cta-copy,
    body.landing .b-cta > .container-main > .b-body,
    body.landing .b-cta-actions {
        grid-column: 1 / -1;
    }

    .proof-pair {
        gap: 24px;
    }

    .proof-card {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        padding: 24px 0;
        background: var(--color-field);
        border-radius: 0;
        box-shadow: none;
        border-top: var(--hairline) solid var(--color-edge);
        gap: 12px;
        min-width: 0;
    }

    .proof-card-title,
    .proof-card .b-body {
        display: block;
    }

    body.home .proof-card-title {
        font-size: 22px;
        font-weight: 400;
    }

    body.home .b-cta-title {
        font-size: 22px;
        font-weight: 400;
    }

    .proof-well {
        min-height: 0;
        border-radius: 0;
        background: var(--color-field);
        border: var(--hairline) solid var(--color-edge);
        padding: 12px;
        min-width: 0;
        overflow-wrap: break-word;
    }

    .sheet,
    .desk,
    .review {
        min-width: 0;
    }

    body.home.landing .proof-card {
        grid-template-columns: 1fr;
        padding: var(--space-48) 0;
    }

    body.home.landing .proof-copy,
    body.home.landing .proof-well {
        grid-column: 1 / -1;
    }

    body.home.landing .proof-well {
        margin-top: 0;
    }

    body.home.landing .proof-card {
        padding: var(--space-48) 0;
    }

    .sheet-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        min-width: 0;
        align-items: baseline;
    }

    .sheet-row em {
        margin-left: auto;
    }

    .sheet-row .sheet-ref,
    .sheet-row strong {
        flex-shrink: 0;
    }

    .sheet-row em {
        flex-shrink: 1;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .sheet-list .sheet-row:not(:first-child) {
        display: none;
    }

    .desk-actions span:not(.is-ink) {
        display: none;
    }

    .ui-quiet {
        display: none;
    }

    .desk-head,
    .sheet-head {
        flex-wrap: wrap;
        gap: 6px;
        align-items: baseline;
    }

    .desk-title {
        flex: 1 1 100%;
        width: 100%;
    }

    .sheet-kicker {
        flex: 1 1 100%;
        width: 100%;
    }

    .sheet-meta {
        flex-shrink: 0;
    }

    .desk-actions,
    .desk-actions span {
        min-width: 0;
    }
}

/* The matter story has to stay complete on a phone. Do not collapse lists, decisions, or status lines. */
@media (max-width: 940px) {
    body.home.landing .proof-well .sheet-list .sheet-row,
    body.home.landing .proof-well .sheet-list .sheet-row:not(:first-child) {
        display: flex;
    }

    body.home.landing .proof-well .desk-actions span,
    body.home.landing .proof-well .desk-actions span:not(.is-ink) {
        display: inline-flex;
    }

    body.home.landing .proof-well .ui-quiet {
        display: block;
    }
}

@media (max-width: 420px) {
    .sheet-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .sheet-row em {
        margin-left: 0;
        align-self: flex-start;
    }

    .sheet-row .sheet-ref {
        order: -1;
        margin-bottom: 2px;
    }
}

/* Craft. Chrome recedes. Interior pages read. Surfaces sit quiet. */

body.home:not(.landing):not(.company) .b-h1 {
    font-size: var(--type-section);
    line-height: 1.15;
    letter-spacing: -0.025em;
}

body.home:not(.landing) .b-hero {
    padding-bottom: var(--space-48);
}

body.home:not(.landing) .container-main > .line {
    background: var(--color-edge);
}

body.home.privacy .navbar-row {
    margin-bottom: var(--space-72);
}

body.home.privacy .company-lead {
    font-size: var(--type-section);
    letter-spacing: -0.025em;
}

body.home.company .company-lead {
    font-size: var(--type-section);
    line-height: 1.25;
}

body.home.company .company-letter-content .b-body,
body.home.privacy .company-letter-content .b-body {
    font-size: var(--type-body);
    line-height: 1.4;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.86);
    text-wrap: wrap;
}

body.home.company .company-letter-content .company-standfirst {
    margin: 0 0 2em;
    font-size: var(--type-card);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    text-wrap: pretty;
}

body.home.privacy .company-letter-content .b-body {
    margin-bottom: 1.65em;
}

/* Writing index. A letter, not a cover. */
body.home.writing-index-page .b-writing {
    padding: 0 0 var(--space-96);
}

body.home.writing-index-page .writing-letter {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 50ch);
}

body.home.writing-index-page .writing-title {
    margin: 0 0 1.35em;
    text-align: start;
}

body.home.writing-index-page .writing-index {
    list-style: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: start;
}

body.home.writing-index-page .writing-index li + li .writing-index-item {
    border-top: var(--hairline) solid var(--color-edge);
}

body.home.writing-index-page .writing-index-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0;
    color: inherit;
    text-decoration: none;
}

body.home.writing-index-page .writing-index-item:focus-visible {
    outline: 1px solid #fff;
    outline-offset: 6px;
}

body.home.writing-index-page .writing-date {
    margin: 0;
}

body.home.writing-index-page .writing-index-title {
    display: block;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--color-ink);
}

body.home.writing-index-page .writing-index-item:hover .writing-index-title {
    color: rgba(255, 255, 255, 0.7);
}

body.home.writing-index-page .writing-index-dek {
    display: block;
    margin-top: 8px;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--type-body);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.56);
}

@media (min-width: 640px) {
    body.home.writing-index-page .writing-index-item {
        grid-template-columns: 10.5em minmax(0, 1fr);
        column-gap: var(--space-36);
        align-items: start;
    }

    body.home.writing-index-page .writing-date {
        padding-top: 0.4em;
    }
}

@media (max-width: 768px) {
    body.home.writing-index-page .b-writing {
        padding: 0 0 var(--space-72);
    }
}

body.home .proof-card-title {
    font-weight: 500;
}

body.home .proof-card .b-body {
    color: rgba(255, 255, 255, 0.62);
}

/* Proof wells. Four instruments in one grid. Same density, distinct jobs. */
body.home .proof-card {
    gap: 14px;
}

body.home.landing .proof-well {
    grid-column: 7 / -1;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin-top: 0;
    padding: var(--space-24) var(--space-36);
    border-radius: 0;
}

body.home.landing .proof-well > * > :last-child {
    margin-top: var(--space-24);
    padding-top: 0;
}

body.home.landing .ui-moment {
    padding: 12px 14px;
    border-radius: 0;
}

body.home.landing .desk-actions span {
    border-radius: 0;
}

body.home .proof-well > * > :last-child {
    margin-top: auto;
    padding-top: 10px;
}

body.home .proof-well > .sheet,
body.home .proof-well > .desk,
body.home .proof-well > .review,
body.home .proof-well > .layer {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

body.home .proof-well .sheet-head,
body.home .proof-well .desk-head {
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
}

body.home .proof-well .desk-head .desk-title {
    margin: 0;
    min-width: 0;
}

body.home .proof-well .sheet-focus {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

body.home .proof-well .sheet-row {
    padding: 5px 0;
    gap: 10px;
}

body.home .proof-well .sheet-list .sheet-row + .sheet-row {
    border-top: var(--hairline) solid rgba(255, 255, 255, 0.06);
}

body.home .proof-well .sheet-row.is-ok strong,
body.home .proof-well .sheet-row.is-ok em {
    color: rgba(255, 255, 255, 0.38);
}

body.home .proof-well em.is-attention {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;
}

body.home .ui-label {
    display: block;
    margin: 0 0 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}

body.home .ui-block {
    padding-top: 8px;
}

body.home .ui-moment {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

body.home .ui-moment .sheet-row {
    padding: 4px 0 0;
}

body.home .ui-moment .sheet-row + .sheet-row {
    border-top: 0;
}

body.home .ui-quiet {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.4);
}

body.home .proof-well .desk-actions {
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 6px;
}

body.home .proof-well .desk-actions span {
    min-height: 26px;
    padding: 0 9px;
    font-size: 12px;
}

/* How we work. Sparse model: copy, then three expanding stages. */

body.landing .b-how .container-main {
    row-gap: var(--space-24);
}

body.landing .how-title {
    grid-column: 1 / 8;
    max-width: var(--measure-head);
    margin: 0;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: var(--type-section);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--color-ink);
    text-wrap: balance;
}

body.landing .how-copy {
    grid-column: 1 / 8;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    max-width: var(--measure-prose);
}

body.landing .how-copy .b-body {
    max-width: none;
}

body.landing .how-stages {
    grid-column: 1 / -1;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
    margin: var(--space-24) 0 0;
    padding: var(--space-36) 0 0;
    border-top: var(--hairline) solid var(--color-edge);
}

body.landing .how-stage {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    margin: 0;
    padding: 0 var(--space-36) 0 0;
}

body.landing .how-stage + .how-stage {
    padding-left: var(--space-36);
    border-left: var(--hairline) solid var(--color-edge);
}

body.landing .how-stage-id {
    margin: 0;
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: var(--type-caption);
    font-weight: 400;
    letter-spacing: var(--eyebrow-tracking);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
}

body.landing .how-stage-rule {
    display: block;
    height: 1px;
    margin: var(--space-24) 0;
    background: #fff;
}

body.landing .how-stage:nth-child(1) .how-stage-rule { width: 24px; }
body.landing .how-stage:nth-child(2) .how-stage-rule { width: 48px; }
body.landing .how-stage:nth-child(3) .how-stage-rule { width: 96px; }

body.landing .how-stage-name {
    margin: 0 0 var(--space-24);
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: var(--type-card);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--color-ink);
    text-wrap: balance;
}

body.landing .how-stage-desc {
    margin: 0;
    max-width: 28ch;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-body);
    text-wrap: pretty;
}

body.home.motion-ready .b-how.is-revealed .b-eyebrow { transition-delay: 0ms; }
body.home.motion-ready .b-how.is-revealed .how-title { transition-delay: 40ms; }
body.home.motion-ready .b-how.is-revealed .how-copy { transition-delay: 100ms; }
body.home.motion-ready .b-how.is-revealed .how-stage:nth-child(1) { transition-delay: 160ms; }
body.home.motion-ready .b-how.is-revealed .how-stage:nth-child(2) { transition-delay: 200ms; }
body.home.motion-ready .b-how.is-revealed .how-stage:nth-child(3) { transition-delay: 240ms; }

body.landing .b-cta-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

body.landing .b-cta-copy .b-body {
    max-width: none;
}

body.landing .proof-copy {
    gap: var(--space-24);
}

body.home .proof-well .sheet-item + .sheet-item {
    border-top: var(--hairline) solid rgba(255, 255, 255, 0.06);
}

body.home .proof-well .sheet-item .sheet-row {
    padding-bottom: 2px;
}

body.home .proof-well .sheet-item .sheet-note {
    padding-bottom: 6px;
}

/* Capability history. A system log, not another application screen. */

body.home .cap {
    display: flex;
    flex-direction: column;
    gap: var(--space-36);
    min-width: 0;
}

body.home .cap-block {
    min-width: 0;
}

body.home .cap-subject {
    margin: 0 0 var(--space-24);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--ui, 13px);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--ui-ink, #fff);
}

body.home .cap-log {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

body.home .cap-log li {
    display: grid;
    grid-template-columns: 5.5em minmax(0, 1fr);
    column-gap: var(--space-24);
    align-items: baseline;
    padding: 6px 0;
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: var(--type-caption);
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--ui-copy, var(--color-body));
}

body.home .cap-log li + li {
    border-top: var(--hairline) solid rgba(255, 255, 255, 0.06);
}

body.home .cap-log time {
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: var(--eyebrow-tracking);
}

body.home .cap-log li:last-child {
    color: var(--ui-ink, #fff);
}

body.home .cap-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.home .cap-bars li {
    display: grid;
    grid-template-columns: 4.25em minmax(0, 1fr) 3.5em;
    column-gap: 12px;
    align-items: center;
}

body.home .cap-month,
body.home .cap-mins {
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: var(--type-caption);
    letter-spacing: var(--eyebrow-tracking);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
}

body.home .cap-mins {
    text-align: end;
}

body.home .cap-track {
    display: block;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
}

body.home .cap-track i {
    display: block;
    height: 100%;
    background: rgba(255, 255, 255, 0.55);
}

body.home .cap-bars li:nth-child(1) .cap-track i { width: 100%; }
body.home .cap-bars li:nth-child(2) .cap-track i { width: 62%; }
body.home .cap-bars li:nth-child(3) .cap-track i { width: 33%; }
body.home .cap-bars li:nth-child(4) .cap-track i { width: 17%; }

body.home .cap-bars li:last-child .cap-month,
body.home .cap-bars li:last-child .cap-mins {
    color: var(--ui-ink, #fff);
}

body.home .cap-bars li:last-child .cap-track i {
    background: #fff;
}

@media (max-width: 940px) {
    body.landing .how-title,
    body.landing .how-copy {
        grid-column: 1 / -1;
    }

    body.landing .how-stages {
        grid-template-columns: 1fr;
        row-gap: 0;
        padding-top: 0;
    }

    body.landing .how-stage {
        padding: var(--space-36) 0;
        border-bottom: var(--hairline) solid var(--color-edge);
    }

    body.landing .how-stage + .how-stage {
        padding-left: 0;
        border-left: 0;
    }

    body.landing .how-stage:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    body.landing .how-stage-desc {
        max-width: 58ch;
    }
}

/* Phone stack. Must beat body.home.landing 12-col proof-card (same specificity, later). */
@media (max-width: 800px) {
    body.home.landing .proof-card,
    body.landing .proof-card {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: var(--space-24);
        row-gap: var(--space-24);
        column-gap: 0;
        padding: var(--space-24) 0;
        align-items: stretch;
    }

    body.home.landing .proof-copy,
    body.landing .proof-copy,
    body.home.landing .proof-well,
    body.landing .proof-well,
    body.home.landing .proof-card-title,
    body.landing .proof-card-title,
    body.home.landing .proof-card .b-body,
    body.landing .proof-card .b-body {
        display: block;
        grid-column: auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 0 0 auto;
    }

    body.home.landing .proof-copy,
    body.landing .proof-copy {
        display: flex;
        flex-direction: column;
        gap: var(--space-24);
    }

    body.home.landing .proof-well,
    body.landing .proof-well,
    body.home .proof-well {
        min-height: 0;
        height: auto;
        flex: 0 0 auto;
        align-self: stretch;
        margin-top: 0;
        padding: 12px;
    }

    body.home.landing .proof-well > .sheet,
    body.home.landing .proof-well > .desk,
    body.home.landing .proof-well > .review,
    body.home.landing .proof-well > .cap,
    body.home.landing .proof-well > .layer,
    body.home .proof-well > .sheet,
    body.home .proof-well > .desk,
    body.home .proof-well > .review,
    body.home .proof-well > .cap,
    body.home .proof-well > .layer {
        flex: 0 0 auto;
        min-height: 0;
    }

    body.home .proof-well .sheet-row,
    body.home.landing .proof-well .sheet-row {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 2px;
    }

    body.home .proof-well .sheet-row em,
    body.home.landing .proof-well .sheet-row em {
        margin-left: 0;
    }

    body.home .proof-well .sheet-head,
    body.home .proof-well .desk-head,
    body.home.landing .proof-well .sheet-head,
    body.home.landing .proof-well .desk-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    body.home .proof-well .sheet-kicker,
    body.home.landing .proof-well .sheet-kicker {
        flex: 1 1 100%;
    }

    body.home .b-cta-title {
        font-size: 22px;
        font-weight: 400;
    }
}


/* Full-screen mobile navigation. The persistent bar becomes its close control. */
html.nav-open,
body.nav-open {
    overflow: hidden;
}

body.home .navbar {
    position: relative;
    z-index: 1002;
}

body.home .mobile-menu-button {
    z-index: 1003;
}

body.home .hamburger-line {
    display: block;
    width: 18px;
    height: 1.5px;
    background: #fff;
    border-radius: 0;
    transform: translate3d(0, 0, 0);
    transition: transform 180ms ease, opacity 180ms ease;
}

body.home .mobile-menu-button.active .hamburger-line:nth-child(1) {
    transform: translate3d(0, 6.5px, 0) rotate(45deg);
}

body.home .mobile-menu-button.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(0);
}

body.home .mobile-menu-button.active .hamburger-line:nth-child(3) {
    transform: translate3d(0, -6.5px, 0) rotate(-45deg);
}

body.home .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
        radial-gradient(90% 62% at 8% 0%, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018) 38%, transparent 72%),
        var(--color-field);
    backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 260ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 260ms;
}

body.home .mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 260ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
}

body.home .mobile-menu-content {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: calc(88px + env(safe-area-inset-top, 0px)) 0 max(28px, env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    transform: none;
    left: auto;
    right: auto;
}

body.home .mobile-menu-header,
body.home .mobile-menu-close {
    display: none;
}

body.home .mobile-menu-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    gap: 0;
    width: 100%;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    padding-top: clamp(40px, 9vh, 84px);
    padding-bottom: clamp(40px, 9vh, 84px);
    counter-reset: mobile-nav;
}

body.home .mobile-menu-link {
    counter-increment: mobile-nav;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 88px;
    padding: 20px 0;
    font-family: 'Suisse Intl', 'Inter', system-ui, sans-serif;
    font-size: clamp(40px, 12vw, 56px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.035em;
    color: #f2f2f2;
    text-decoration: none;
    border-top: var(--hairline) solid var(--color-edge);
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
        color 150ms ease-out,
        opacity 360ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

body.home .mobile-menu-link:last-child {
    border-bottom: var(--hairline) solid var(--color-edge);
}

body.home .mobile-menu-link::before {
    content: '0' counter(mobile-nav);
    align-self: start;
    padding-top: 5px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.42);
}

body.home .mobile-menu-link::after {
    content: '\2192';
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.48);
}

body.home .mobile-menu-overlay.active .mobile-menu-link {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.home .mobile-menu-overlay.active .mobile-menu-link:nth-child(1) { transition-delay: 70ms; }
body.home .mobile-menu-overlay.active .mobile-menu-link:nth-child(2) { transition-delay: 110ms; }
body.home .mobile-menu-overlay.active .mobile-menu-link:nth-child(3) { transition-delay: 150ms; }

body.home .mobile-menu-intro,
body.home .mobile-menu-signoff {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.48);
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition:
        opacity 320ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 360ms cubic-bezier(0.32, 0.72, 0, 1);
}

body.home .mobile-menu-signoff {
    align-items: flex-end;
    padding-top: 22px;
    border-top: var(--hairline) solid var(--color-edge);
}

body.home .mobile-menu-signoff span:first-child {
    max-width: 32ch;
}

body.home .mobile-menu-signoff span:last-child {
    flex: none;
    text-align: right;
}

body.home .mobile-menu-overlay.active :is(.mobile-menu-intro, .mobile-menu-signoff) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 190ms;
}

body.home .mobile-menu-link:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 5px;
}

@media (hover: hover) and (pointer: fine) {
    body.home .mobile-menu-link:hover {
        color: rgba(255, 255, 255, 0.62);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home .mobile-menu-overlay,
    body.home .mobile-menu-content,
    body.home .hamburger-line,
    body.home .mobile-menu-link,
    body.home .mobile-menu-intro,
    body.home .mobile-menu-signoff {
        transition: none;
        transform: none;
    }

    body.home .mobile-menu-button.active .hamburger-line:nth-child(1) {
        transform: translate3d(0, 6.5px, 0) rotate(45deg);
    }

    body.home .mobile-menu-button.active .hamburger-line:nth-child(3) {
        transform: translate3d(0, -6.5px, 0) rotate(-45deg);
    }
}

body.home .req-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

body.home .req-list li {
    display: grid;
    grid-template-columns: 1em minmax(0, 1fr);
    column-gap: 10px;
    align-items: baseline;
    padding: 5px 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--ui, 13px);
    line-height: 1.4;
    color: var(--ui-copy, var(--color-body));
}

body.home .req-list li::before {
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: var(--type-caption);
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.38);
}

body.home .req-list li.is-met::before { content: '\2713'; }
body.home .req-list li.is-open::before { content: '\25CB'; }
body.home .req-list li.is-warn::before { content: '!'; }

body.home .req-list li.is-met {
    color: rgba(255, 255, 255, 0.38);
}

body.home .req-list li.is-open,
body.home .req-list li.is-warn {
    color: var(--ui-ink, #fff);
}

body.home .req-list li.is-open::before,
body.home .req-list li.is-warn::before {
    color: var(--ui-ink, #fff);
}

body.home .layer-foot {
    margin: var(--space-24) 0 0;
    padding-top: 12px;
    border-top: var(--hairline) solid rgba(255, 255, 255, 0.06);
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: var(--type-caption);
    letter-spacing: var(--eyebrow-tracking);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
}

/* How it works — compact index beside the frame. */
body.landing .how-step {
    --how-dwell: 7s;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
    grid-template-areas: "rail rail rail rail rail . stage stage stage stage stage stage";
    column-gap: var(--g-gap);
    align-items: start;
    width: 100%;
}

body.landing .how-step-rail {
    grid-area: rail;
    min-width: 0;
}

body.landing .how-step-head {
    margin: calc(var(--space-48) * -1) 0 var(--space-48);
}

body.landing .how-step-lead {
    margin: 0 0 var(--space-32);
    font-size: var(--type-body);
    line-height: var(--line-body);
    color: var(--color-text-secondary);
    max-width: 50ch;
}

body.landing .how-step-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--hairline) solid var(--color-edge);
}

body.landing .how-step-stage {
    --how-win-left: 5.987%;
    --how-win-top: 13.435%;
    --how-win-width: 88.188%;
    grid-area: stage;
    position: relative;
    isolation: isolate;
    display: grid;
    min-width: 0;
}

body.landing .how-stage-scene {
    grid-area: 1 / 1;
    position: relative;
    z-index: 0;
    width: 100%;
    aspect-ratio: 618 / 588;
}

body.landing .how-stage-bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

body.landing .how-step:not(.is-framed) .how-stage-scene {
    position: absolute;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
}

body.landing .how-step-item {
    position: relative;
    margin: 0;
    border-bottom: var(--hairline) solid var(--color-edge);
}

body.landing .how-step-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--hairline);
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

body.landing .how-step-tab {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 14px;
    align-items: baseline;
    width: 100%;
    margin: 0;
    padding: 22px 0 26px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

body.landing .how-step-id {
    grid-column: 1;
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #8a8a8a;
    font-variant-numeric: tabular-nums;
}

body.landing .how-step-name {
    grid-column: 2;
    min-width: 0;
    margin: 2px 0 0;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #c8c8c8;
}

body.landing .how-step-desc {
    display: none;
    grid-column: 2;
    max-width: 42ch;
    margin: 4px 0 8px;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #8a8a8a;
    text-wrap: pretty;
}

body.landing .how-step-item.is-active .how-step-id {
    color: #c9a227;
}

body.landing .how-step-item.is-active .how-step-name {
    color: #e8e8e8;
}

body.landing .how-step-item.is-active .how-step-desc {
    display: block;
}

body.landing .how-step-tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

body.landing .how-panel {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: 40px;
    background: #141414;
    border: var(--hairline) solid var(--color-edge);
    border-radius: 2px;
}

body.landing .how-panel[hidden] {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

body.landing .how-panel.is-active {
    visibility: visible;
    opacity: 1;
}

body.landing .how-panel--frame,
body.landing .how-panel--window {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

body.landing .how-panel--frame img,
body.landing .how-panel--window img {
    display: block;
    width: 100%;
    height: auto;
}

body.landing .how-panel--window {
    z-index: 1;
    position: absolute;
    left: var(--how-win-left);
    top: var(--how-win-top);
    width: var(--how-win-width);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.landing .how-panel--window.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.landing .how-win {
    box-sizing: border-box;
    width: 100%;
    padding: 22px 24px 20px;
    background: #161616;
    border: var(--hairline) solid var(--color-edge);
}

body.landing .how-win-id,
body.landing .how-win-kicker {
    margin: 0;
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #8a8a8a;
}

body.landing .how-win-title {
    margin: 8px 0 4px;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: #fff;
}

body.landing .how-win-sub,
body.landing .how-win-note,
body.landing .how-win-focus,
body.landing .how-win-foot {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: #8a8a8a;
}

body.landing .how-win-note {
    margin: 12px 0 0;
    color: #c9a227;
}

body.landing .how-win-kicker {
    margin: 18px 0 8px;
}

body.landing .how-win-kicker.is-held {
    color: #c9a227;
}

body.landing .how-win-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 8px 0 0;
    border-top: var(--hairline) solid var(--color-edge);
}

body.landing .how-win-list li {
    padding: 9px 0;
    border-bottom: var(--hairline) solid var(--color-edge);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #c8c8c8;
}

body.landing .how-win-focus {
    color: #e8e8e8;
}

body.landing .how-win-foot {
    margin-top: 16px;
}

body.landing .how-win-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 16px 0 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
}

body.landing .how-panel--window.is-leaving {
    z-index: 2;
    opacity: 0;
    visibility: visible;
    pointer-events: none;
}

body.landing .how-panel-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 28px;
}

body.landing .how-panel-kicker {
    margin: 0;
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    line-height: 12px;
    text-transform: uppercase;
    color: #666;
}

body.landing .how-panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body.landing .how-panel-title {
    margin: 0;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 26px;
    color: #fff;
}

body.landing .how-panel-badge {
    flex: none;
    padding: 5px 10px;
    border: 1px solid #2e2e2e;
    border-radius: 2px;
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    line-height: 12px;
    text-transform: uppercase;
    color: #c2c2c2;
}

body.landing .how-panel-badge.is-held {
    border-color: #c9a22759;
    color: #c9a227;
}

body.landing .how-panel-rows {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    border-top: var(--hairline) solid var(--color-edge);
    border-bottom: var(--hairline) solid var(--color-edge);
}

body.landing .how-panel-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0;
}

body.landing .how-panel-row span {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 18px;
    color: #c2c2c2;
}

body.landing .how-panel-row em {
    flex: none;
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0.04em;
    line-height: 16px;
    text-transform: uppercase;
    color: #ffffff6b;
}

body.landing .how-panel-row.is-focus span {
    font-weight: 500;
    color: #fff;
}

body.landing .how-panel-row.is-focus span::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 9px;
    margin-bottom: 2px;
    background: #c9a227;
    border-radius: 2px;
    vertical-align: middle;
}

body.landing .how-panel-row.is-focus em {
    font-weight: 500;
    color: #c9a227;
}

body.landing .how-panel-foot {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding-top: 24px;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 13px;
    line-height: 19px;
    color: #666;
}

body.landing .how-panel-foot span {
    flex: none;
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: 11px;
    line-height: 14px;
}

body.landing .b-proof .container-main {
    row-gap: 56px;
}

@media (max-width: 940px) {
    body.landing .how-step {
        grid-template-areas:
            "rail rail rail rail rail rail rail rail rail rail rail rail"
            "stage stage stage stage stage stage stage stage stage stage stage stage";
        row-gap: 28px;
    }

    body.landing .how-panel {
        padding: 28px 20px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    body.landing .how-panel {
        transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
            transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.landing .how-panel[hidden] {
        transform: translateY(8px);
    }

    body.landing .how-panel.is-active {
        transform: none;
    }

    body.landing .how-panel--window {
        transform: none;
        transition:
            opacity 220ms cubic-bezier(0.165, 0.84, 0.44, 1),
            visibility 0s linear 220ms;
    }

    body.landing .how-panel--window[hidden] {
        transform: none;
    }

    body.landing .how-panel--window.is-leaving {
        transform: none;
        transition:
            opacity 160ms cubic-bezier(0.55, 0.06, 0.68, 0.19),
            visibility 0s;
    }

    body.landing .how-panel--window.is-active {
        transform: none;
        transition:
            opacity 220ms cubic-bezier(0.165, 0.84, 0.44, 1),
            visibility 0s;
    }

    body.landing .how-step.is-auto .how-step-item.is-active .how-step-fill {
        animation: how-step-fill var(--how-dwell) linear forwards;
    }

    body.landing .how-step.is-paused .how-step-fill {
        animation-play-state: paused;
    }
}

@keyframes how-step-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    body.landing .how-step-fill,
    body.landing .how-panel {
        animation: none;
        transition: none;
    }
}

/* Extra breathing room along the desktop page edges. */
@media(min-width:1100px){body.home{--gutter:64px}}