/* ==========================================================================
   CinderTek - Homepage
   Loaded on index.html only, after the global stylesheets.
   ========================================================================== */

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

.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - var(--header-height));
    padding-block: var(--space-section-sm);
    border-bottom: var(--border-default);
    overflow: clip;
}

.hero__grid {
    flex: 1;
    align-items: center;
    width: 100%;
}

.hero__content {
    grid-column: 1 / span 7;
}

.hero__visual {
    grid-column: 8 / -1;
}

.hero__eyebrow {
    margin-bottom: var(--space-8);
}

/* Sized by viewport height as well as width, so the four-line headline
   and the actions stay above the fold on short laptop screens. */
.hero__title {
    max-width: 13ch;
    font-size: max(2.25rem, min(var(--fs-4xl), 9.4svh));
    line-height: 1.03;
}

.hero__text {
    max-width: 34rem;
    margin-top: var(--space-8);
}

.hero__actions {
    margin-top: var(--space-10);
}

/* SplitText line masks: extend the clip below the line box so descenders
   are not cut at the tight line-height; the negative margin keeps layout. */
.hero__line-mask {
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
    .hero__title {
        font-size: max(2.25rem, min(var(--fs-4xl), 9.4svh, 6vw));
    }
}

@media (min-width: 1024px) and (max-height: 820px) {
    .hero {
        padding-block: var(--space-10);
    }

    .hero__eyebrow {
        margin-bottom: var(--space-6);
    }

    .hero__text {
        margin-top: var(--space-6);
    }

    .hero__actions {
        margin-top: var(--space-8);
    }

    .hero-visual {
        max-width: min(560px, 68svh);
    }
}

/* Hidden until hero.js has prepared the entrance. */
.js .hero:not(.is-ready) [data-hero-reveal],
.js .hero:not(.is-ready) .hero-visual {
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   Hero visual - SVG symbol system
   -------------------------------------------------------------------------- */

.hero-visual {
    --frame-mark: 14px;
    --frame-color: var(--color-border-strong);

    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1;
    margin-inline: auto;
    contain: layout style;
}

.hero-visual svg {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Three.js lattice field (hero-field.js): behind the symbol, inside the
   frame, never over the text. */
.hero-field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-slowest) var(--ease-out);
}

.hero-field.is-live {
    opacity: 1;
}

.hero-symbol__facet {
    stroke: none;
}

/* The ember core only exists during the build; the settled mark has none. */
.hero-symbol__core {
    fill: var(--color-accent);
    opacity: 0;
}

.hero-visual__slot {
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 0.8;
    stroke-linejoin: round;
    opacity: 0.6;
}

.hero-visual__slots {
    opacity: 0.35;
}

.hero-visual__leader {
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 0.8;
}

.hero-visual__pin {
    fill: var(--color-accent);
}

.hero-visual__readout {
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero-visual {
    will-change: transform;
}

.hero-visual__glow-stop {
    stop-color: var(--color-accent);
}

.hero-visual__line {
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 0.9;
    opacity: 0.55;
}

.hero-visual__line--dashed {
    stroke-dasharray: 2 6;
    opacity: 0.4;
}

.hero-visual__line--accent {
    stroke: var(--color-accent);
    opacity: 0.9;
}

.hero-visual__label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    fill: var(--color-text-muted);
}

.hero-visual__scan {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.8;
    stroke-dasharray: 0.06 0.94;
    opacity: 0;
}

.hero-visual__particle {
    fill: var(--color-text);
}

.hero-visual__particle--ember {
    fill: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Capabilities - editorial index list
   -------------------------------------------------------------------------- */

.capabilities__header {
    align-items: end;
    row-gap: var(--space-6);
    margin-bottom: var(--space-16);
}

.capabilities__eyebrow {
    grid-column: 1 / -1;
}

.capabilities__title {
    grid-column: 1 / span 8;
}

.capabilities__count {
    grid-column: 10 / -1;
    justify-self: end;
    padding-bottom: 0.6em;
}

/* Hover / keyboard focus - the title leads; supporting columns follow at half the distance.
   The accent line is the only ember signal. */

/* --------------------------------------------------------------------------
   Transformation - pinned, scroll-scrubbed composition (dark)
   Default markup is the settled state; .is-animated is added by
   transformation.js when the scroll sequence is active.
   -------------------------------------------------------------------------- */

.transformation__pin {
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-block: calc(var(--header-height) + var(--space-8)) var(--space-12);
}

.transformation__grid {
    width: 100%;
    grid-template-rows: auto auto;
    row-gap: var(--space-12);
}

.transformation__intro {
    grid-column: 1 / span 5;
    grid-row: 1;
    align-self: end;
}

.transformation__title {
    max-width: 12ch;
    margin-top: var(--space-6);
}

.transformation__visual {
    grid-column: 6 / -1;
    grid-row: 1 / span 2;
    align-self: center;
}

.transformation__steps {
    position: relative;
    grid-column: 1 / span 4;
    grid-row: 2;
    align-self: start;
    padding-left: var(--space-8);
}

.transformation__rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--border-hairline);
    background-color: var(--color-border);
}

.transformation__rail-fill {
    position: absolute;
    inset: 0;
    background-color: var(--color-accent);
    transform-origin: top center;
}

.transformation__step {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    padding-block: var(--space-5);
    border-top: var(--border-default);
    transition: opacity var(--duration-moderate) var(--ease-standard);
}

.transformation__step:first-child {
    border-top: 0;
    padding-top: 0;
}

.transformation__step-index {
    padding-top: 0.35em;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    transition: color var(--duration-moderate) var(--ease-standard);
}

.transformation__step-title {
    font-size: var(--fs-lg);
    letter-spacing: var(--ls-tight);
}

.transformation__step-text {
    max-width: 36ch;
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
}

.transformation.is-animated .transformation__step:not(.is-active) {
    opacity: 0.35;
}

.transformation__step.is-active .transformation__step-index {
    color: var(--color-text);
}

/* Visual: the application stage. The SVG drawing is the static fallback;
   transformation-3d.js adds a canvas, callout labels and leaders. */

.transformation-stage {
    --tf-callouts: 0;

    position: relative;
    width: min(100%, calc((100svh - 11rem) * 1.12));
    aspect-ratio: 1.12;
    margin-inline: auto;
    border-radius: 14px;
    overflow: hidden;
}

.transformation-stage__canvas,
.transformation-stage__leaders {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.transformation-stage__canvas {
    display: block;
}

.transformation-stage__drawing {
    position: absolute;
    inset: 6% 4% 12%;
    width: 92%;
    height: 82%;
    transition: opacity var(--duration-moderate) var(--ease-standard);
}

.transformation-stage.is-3d .transformation-stage__drawing {
    opacity: 0;
}

.transformation-stage__side {
    fill: rgba(var(--rgb-paper), 0.04);
    stroke: rgba(var(--rgb-line), 0.4);
    stroke-width: 1;
}

.transformation-stage__plate {
    fill: rgba(var(--rgb-paper), 0.03);
    stroke: rgba(var(--rgb-line), 0.75);
    stroke-width: 1;
}

.transformation-stage__plate--hot {
    stroke: var(--color-accent);
}

.transformation-stage__leader {
    fill: none;
    stroke: rgba(var(--rgb-line), 0.45);
    stroke-width: 1;
}

.transformation-stage__text {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    fill: var(--color-text-muted);
}

/* Callouts (3D only) */

.transformation-stage__leaders {
    pointer-events: none;
    opacity: var(--tf-callouts);
}

.transformation-stage__leaders path {
    fill: none;
    stroke: rgba(var(--rgb-line), 0.55);
    stroke-width: 1;
}

.transformation-stage__leaders circle {
    fill: var(--color-accent);
}

.tf-label {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 128px;
    margin-top: -0.85em;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: var(--tf-callouts);
    pointer-events: none;
    will-change: transform;
}

.transformation-stage.is-3d .tf-label {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.6em;
}

.tf-label[data-side="left"] {
    text-align: right;
    grid-template-columns: 1fr auto;
}

.tf-label__index {
    color: var(--color-accent);
}

.tf-label[data-side="left"] .tf-label__index {
    grid-column: 2;
    grid-row: 1;
}

.tf-label[data-side="left"] .tf-label__name {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
}

.tf-label[data-side="left"] .tf-label__tech {
    justify-self: end;
}

.tf-label__name {
    color: var(--color-text);
}

.tf-label__tech {
    grid-column: 1 / -1;
    text-transform: none;
    letter-spacing: 0.02em;
}

.transformation-stage__caption {
    position: absolute;
    right: var(--space-5);
    bottom: var(--space-4);
    left: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.transformation-stage__scrub {
    position: relative;
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(var(--rgb-line), 0.45) 0 1px, transparent 1px 10%) , rgba(var(--rgb-line), 0.18);
}

.transformation-stage__scrub span {
    position: absolute;
    inset: -0.5px 0;
    background-color: var(--color-accent);
    transform: scaleX(1);
    transform-origin: left center;
}

.transformation:not(.is-animated) .transformation-stage__scrub span {
    transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Selected Work - editorial case study list (rendered by portfolio.js)
   -------------------------------------------------------------------------- */

.selected-work__header {
    align-items: end;
    row-gap: var(--space-6);
    margin-bottom: var(--space-20);
}

.selected-work__eyebrow {
    grid-column: 1 / -1;
}

.selected-work__title {
    grid-column: 1 / span 8;
}

.selected-work__all {
    grid-column: 10 / -1;
    justify-self: end;
}

.projects {
    display: grid;
    row-gap: var(--space-section);
}

.project {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: end;
}

.project--media-left .project__media { grid-column: 1 / span 8; }
.project--media-left .project__meta { grid-column: 10 / -1; }

.project--media-right .project__media { grid-column: 5 / -1; grid-row: 1; }
.project--media-right .project__meta { grid-column: 1 / span 3; grid-row: 1; }

/* Media */

.project__media {
    --frame-mark: 16px;
    --frame-color: var(--ct-warm-white);

    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--color-surface-alt);
}

.project__media::before,
.project__media::after {
    z-index: 1;
    opacity: 0;
    mix-blend-mode: difference;
    transition: opacity var(--duration-moderate) var(--ease-standard);
}

.project__media::before {
    top: var(--space-4);
    left: var(--space-4);
}

.project__media::after {
    right: var(--space-4);
    bottom: var(--space-4);
}

.project__media-inner {
    position: absolute;
    inset: -12px;
}

.project__media-inner picture {
    display: contents;
}

.project__image,
.project__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slower) var(--ease-out);
}

.project__accent {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: var(--border-medium);
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--motion-draw);
}

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

.project__placeholder-grid {
    stroke: var(--color-border);
    stroke-width: 1;
}

.project__placeholder-mark {
    fill: none;
    stroke: var(--color-text);
    stroke-width: 0.7;
    opacity: 0.45;
}

.project__placeholder-core {
    fill: var(--color-accent);
}

.project__placeholder-index {
    font-family: var(--font-display);
    font-size: 160px;
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.04em;
    fill: none;
    stroke: var(--color-text);
    stroke-width: 1;
    opacity: 0.3;
}

/* Metadata */

.project__meta {
    display: grid;
    gap: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--border-strong);
}

.project__meta-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
}

.project__index {
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: var(--ls-wide);
    color: var(--color-text-muted);
    transition: color var(--motion-tone);
}

.project__category {
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.project__title {
    font-size: var(--fs-2xl);
    line-height: var(--lh-snug);
}

.project__title-text {
    display: inline-block;
    transition: transform var(--motion-shift);
}

.project__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

@supports selector(:has(*)) {
    .project__link:focus-visible {
        outline: none;
    }

    .project:has(.project__link:focus-visible) {
        outline: var(--focus-ring);
        outline-offset: var(--space-2);
    }
}

.project__description {
    color: var(--color-text-muted);
    transition: color var(--duration-moderate) var(--ease-standard);
}

.project__facts {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: var(--border-default);
    font-size: var(--fs-sm);
}

.project__fact {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--space-4);
}

.project__fact dt {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.9;
    letter-spacing: var(--ls-wide);
    color: var(--color-text-muted);
}

.project__fact dd {
    color: var(--color-text-body);
    transition: color var(--duration-moderate) var(--ease-standard);
}

.project__tech {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-2);
}

.project__tech li + li::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--color-text-muted);
}

.project__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--color-text);
}

.project__cta-icon {
    width: 1em;
    height: 1em;
    transition: transform var(--motion-shift);
}

@media (hover: hover) {
    .project:hover :is(.project__image, .project__placeholder),
    .project:focus-within :is(.project__image, .project__placeholder) {
        transform: scale(1.03);
    }

    .project:hover .project__accent,
    .project:focus-within .project__accent {
        transform: scaleX(1);
    }

    .project:hover .project__media::before,
    .project:hover .project__media::after,
    .project:focus-within .project__media::before,
    .project:focus-within .project__media::after {
        opacity: 1;
    }

    .project:hover .project__title-text,
    .project:focus-within .project__title-text {
        transform: translateX(var(--shift-md));
    }

    .project:hover .project__index,
    .project:focus-within .project__index {
        color: var(--color-text);
    }

    .project:hover .project__description,
    .project:focus-within .project__description,
    .project:hover .project__fact dd,
    .project:focus-within .project__fact dd {
        color: var(--color-text);
    }

    .project:hover .project__cta-icon,
    .project:focus-within .project__cta-icon {
        transform: translateX(var(--shift-sm));
    }
}

/* --------------------------------------------------------------------------
   Process - system diagram (horizontal >= 1024px, vertical below)
   Default markup is the completed state; .is-animated is added by
   process.js, which then drives .is-active / .is-complete per step.
   -------------------------------------------------------------------------- */

.process {
    --node-size: 13px;

    border-top: var(--border-default);
}

.process__pin {
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-block: calc(var(--header-height) + var(--space-12)) var(--space-16);
}

.process__pin > .container {
    width: 100%;
}

.process__header {
    align-items: end;
    row-gap: var(--space-6);
    margin-bottom: var(--space-20);
}

.process__eyebrow {
    grid-column: 1 / -1;
}

.process__title {
    grid-column: 1 / span 8;
}

.process__counter {
    grid-column: 10 / -1;
    justify-self: end;
    padding-bottom: 0.6em;
    white-space: nowrap;
}

.process__diagram {
    position: relative;
}

/* Track */

.process__track {
    position: absolute;
    top: calc(var(--node-size) / 2);
    left: 0;
    right: 0;
    height: var(--border-hairline);
}

.process__track-line,
.process__track-fill {
    position: absolute;
    inset: 0;
}

.process__track-line {
    background-color: var(--color-border-strong);
    opacity: 0.25;
}

.process__track-line::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 5px;
    background-image: linear-gradient(to right, var(--color-border-strong) var(--border-hairline), transparent var(--border-hairline));
    background-size: 2.5% 100%;
}

.process__track-fill {
    background-color: var(--color-accent);
    transform-origin: left center;
}

.process__terminal {
    position: absolute;
    bottom: var(--space-4);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.process__terminal--start { left: 0; }
.process__terminal--end { right: 0; }

.process__terminal--end::after {
    content: "";
    position: absolute;
    top: calc(100% + var(--space-4) - 3px);
    right: 0;
    width: 7px;
    height: 7px;
    border-top: var(--border-hairline) solid var(--color-text-muted);
    border-right: var(--border-hairline) solid var(--color-text-muted);
    transform: rotate(45deg);
}

/* Steps */

.process__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.process-step {
    position: relative;
    padding-top: calc(var(--node-size) + var(--space-10));
    padding-right: var(--grid-gap);
}

.process-step__node {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: var(--node-size);
    height: var(--node-size);
    background-color: var(--color-text);
    border: var(--border-hairline) solid var(--color-text);
    transition:
        background-color var(--duration-moderate) var(--ease-standard),
        border-color var(--duration-moderate) var(--ease-standard),
        box-shadow var(--duration-moderate) var(--ease-standard);
}

/* Leader from node down to the step content */
.process-step::before {
    content: "";
    position: absolute;
    top: calc(var(--node-size) + var(--space-2));
    left: calc(var(--node-size) / 2);
    width: var(--border-hairline);
    height: calc(var(--space-10) - var(--space-4));
    background-color: var(--color-border);
    transition: background-color var(--duration-moderate) var(--ease-standard);
}

.process-step__body {
    display: grid;
    gap: var(--space-3);
    transition: opacity var(--duration-moderate) var(--ease-standard);
}

.process-step__index {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--color-text-muted);
    transition: color var(--duration-moderate) var(--ease-standard);
}

.process-step__title {
    font-size: var(--fs-xl);
    letter-spacing: var(--ls-tight);
}

.process-step__text {
    max-width: 28ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
}

.process-step__io {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: var(--border-default);
    font-size: var(--fs-xs);
}

.process-step__io div {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-2);
}

.process-step__io dt {
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.process-step__io dd {
    color: var(--color-text-body);
}

/* Scroll-driven states */

.process.is-animated .process-step__node {
    background-color: var(--color-bg);
    border-color: var(--color-text-muted);
}

.process.is-animated .process-step__body {
    opacity: 0.35;
}

.process.is-animated .process-step.is-complete .process-step__node {
    background-color: var(--color-text);
    border-color: var(--color-text);
}

.process.is-animated .process-step.is-complete .process-step__body {
    opacity: 0.7;
}

.process.is-animated .process-step.is-active .process-step__node {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-bg), 0 0 0 5px var(--color-accent);
}

.process.is-animated .process-step.is-active::before {
    background-color: var(--color-accent);
}

.process.is-animated .process-step.is-active .process-step__body {
    opacity: 1;
}

.process.is-animated .process-step.is-active .process-step__index {
    color: var(--color-link);
}

/* --------------------------------------------------------------------------
   Technology - specification sheet
   -------------------------------------------------------------------------- */

.technology {
    border-top: var(--border-default);
}

.technology__header {
    align-items: end;
    row-gap: var(--space-6);
    margin-bottom: var(--space-20);
}

.technology__eyebrow {
    grid-column: 1 / -1;
}

.technology__title {
    grid-column: 1 / span 7;
    max-width: 14ch;
}

.technology__intro {
    grid-column: 9 / -1;
    display: grid;
    gap: var(--space-4);
    color: var(--color-text-muted);
}

.technology__summary strong {
    margin-right: var(--space-1);
}

.technology__specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: var(--space-16);
}

.spec {
    position: relative;
}

.spec__rule {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--border-hairline);
    background-color: var(--color-border-strong);
}

.spec__body {
    padding-top: var(--space-5);
}

.spec__header {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--color-text-muted);
}

.spec__count::before {
    content: "n=";
    opacity: 0.7;
}

.spec__title {
    margin-top: var(--space-10);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}

.spec__layer {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.spec__list {
    margin-top: var(--space-8);
    border-top: var(--border-default);
}

.spec__row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
    padding-block: var(--space-3);
    border-bottom: var(--border-default);
}

.spec__row::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    background-color: var(--color-accent);
    opacity: 0;
    transform: translate(calc(var(--shift-sm) * -1.5), -50%);
    transition:
        opacity var(--motion-tone),
        transform var(--motion-shift);
}

.spec__row dt,
.spec__row dd {
    transition:
        transform var(--motion-shift),
        color var(--motion-tone);
}

.spec__row dt {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

.spec__row dd {
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-muted);
}

@media (hover: hover) {
    .spec__row:hover::before {
        opacity: 1;
        transform: translate(0, -50%);
    }

    .spec__row:hover dt {
        transform: translateX(calc(var(--shift-md) + var(--shift-sm)));
    }

    .spec__row:hover dd {
        color: var(--color-text-body);
    }
}

/* --------------------------------------------------------------------------
   About (homepage intro)
   -------------------------------------------------------------------------- */

.about-intro {
    border-top: var(--border-default);
}

.about-intro__lead {
    row-gap: var(--space-8);
}

.about-intro__eyebrow {
    grid-column: 1 / -1;
}

.about-intro__statement {
    grid-column: 1 / span 10;
    max-width: 18ch;
    font-size: var(--fs-4xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tighter);
}

.about-intro__body {
    align-items: end;
    margin-top: var(--space-16);
}

.about-intro__text {
    grid-column: 1 / span 5;
    display: grid;
    justify-items: start;
    gap: var(--space-6);
}

.about-intro__figure {
    --frame-mark: 12px;

    grid-column: 7 / -1;
    padding: var(--space-6);
    border-top: var(--border-default);
    border-bottom: var(--border-default);
}

.about-intro__caption {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.about-intro__diagram {
    width: 100%;
    height: auto;
    margin-top: var(--space-4);
    overflow: visible;
}

.about-intro__connector,
.about-intro__edge {
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 1;
}

.about-intro__edge {
    opacity: 0.6;
}

.about-intro__particles circle {
    fill: var(--color-text-muted);
}

.about-intro__nodes circle {
    fill: var(--color-text);
}

.about-intro__ember,
.about-intro__core {
    fill: var(--color-accent);
}

.about-intro__mark {
    fill: var(--color-text);
}

.about-intro__label {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    fill: var(--color-text-muted);
}

.about-intro__focus {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: var(--space-10);
    margin-top: var(--space-20);
}

.focus {
    position: relative;
}

.focus__rule {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--border-hairline);
    background-color: var(--color-border-strong);
}

.focus__body {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-5);
}

.focus__title {
    font-size: var(--fs-lg);
    letter-spacing: var(--ls-tight);
}

.focus__text {
    max-width: 30ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Final CTA (dark) - the visual system returns to the ember
   Default markup is the end state: ember and particles, symbol dissolved.
   -------------------------------------------------------------------------- */

.cta-final {
    padding-block: var(--space-section-lg);
    overflow-x: clip;
}

.cta-final__grid {
    align-items: center;
}

.cta-final__content {
    grid-column: 1 / span 7;
}

.cta-final__title,
.cta-final__subtitle {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tighter);
}

.cta-final__title {
    margin-top: var(--space-8);
    color: var(--color-text);
}

.cta-final__subtitle {
    color: var(--color-text-muted);
}

.cta-final__actions {
    margin-top: var(--space-12);
}

.cta-final__email {
    font-size: var(--fs-sm);
}

.cta-final__visual {
    grid-column: 8 / -1;
    width: 100%;
    max-width: 440px;
    justify-self: end;
    aspect-ratio: 1;
}

.cta-final__visual svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cta-final__line {
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 1;
    opacity: 0.45;
}

.cta-final__line--dashed {
    stroke-dasharray: 2 7;
    opacity: 0.35;
}

.cta-final__facet {
    stroke: none;
    stroke-width: 0;
    stroke-linejoin: round;
    opacity: 0;
}

.cta-final__core {
    fill: var(--color-accent);
}

.cta-final__glow-stop {
    stop-color: var(--color-accent);
}

.cta-final__particle {
    fill: var(--color-text);
}

.cta-final__particle--ember {
    fill: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Touch - replaces hover emphasis on devices without hover.
   main.js sets .is-focused on the [data-touch-focus] item crossing the
   middle of the viewport; :active gives press feedback.
   -------------------------------------------------------------------------- */

@media (hover: none) {
    .project__link {
        -webkit-tap-highlight-color: transparent;
    }

    .project.is-focused .project__accent {
        transform: scaleX(1);
    }

    .project.is-focused .project__index {
        color: var(--color-text);
    }

    .project.is-focused .project__media::before,
    .project.is-focused .project__media::after {
        opacity: 1;
    }

    .project:active .project__title-text,
    .project:active .project__cta-icon {
        transform: translateX(var(--shift-sm));
    }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
    /* Below desktop the symbol leads as an emblem, aligned to the text
       column, so the assembly plays in view with the headline beneath it. */
    .hero {
        min-height: 0;
        padding-block: var(--space-10) var(--space-16);
    }

    .hero__content,
    .hero__visual {
        grid-column: 1 / -1;
    }

    .hero__visual {
        order: -1;
        margin-bottom: var(--space-10);
    }

    .hero-visual {
        width: min(40vw, 30svh, 320px);
        max-width: none;
        margin-inline: 0;
    }

    .capabilities__title {
        grid-column: 1 / span 9;
    }

    .capabilities__count {
        grid-column: 10 / -1;
    }

    .transformation__pin {
        align-items: stretch;
        padding-block: calc(var(--header-height) + var(--space-6)) var(--space-8);
    }

    .transformation__grid {
        grid-template-rows: auto 1fr auto;
        row-gap: var(--space-6);
    }

    .transformation__intro,
    .transformation__visual,
    .transformation__steps {
        grid-column: 1 / -1;
        grid-row: auto;
        align-self: center;
    }

    .transformation__title {
        max-width: 16ch;
        margin-top: var(--space-4);
    }

    .transformation-stage {
        width: min(100%, calc(48svh * 1.12));
    }

    .tf-label {
        width: 76px;
        font-size: 9px;
        letter-spacing: 0.02em;
    }

    .transformation-stage__caption > span:first-child {
        display: none;
    }

    .tf-label__tech {
        display: none;
    }

    /* While scroll-driven, only the active step is shown, in a fixed slot. */
    .transformation.is-animated .transformation__steps {
        padding-left: 0;
    }

    .transformation.is-animated .transformation__rail {
        top: auto;
        right: 0;
        width: auto;
        height: var(--border-hairline);
    }

    .transformation.is-animated .transformation__rail-fill {
        transform-origin: left center;
    }

    .transformation.is-animated .transformation__step-list {
        display: grid;
        padding-bottom: var(--space-4);
    }

    .transformation.is-animated .transformation__step {
        grid-area: 1 / 1;
        padding: 0;
        border-top: 0;
    }

    .transformation.is-animated .transformation__step:not(.is-active) {
        opacity: 0;
        visibility: hidden;
    }

    .selected-work__header {
        margin-bottom: var(--space-12);
    }

    .selected-work__all {
        grid-column: 9 / -1;
    }

    .project--media-left .project__media,
    .project--media-right .project__media,
    .project--media-left .project__meta,
    .project--media-right .project__meta {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .project__meta {
        max-width: 40rem;
        margin-top: var(--space-8);
    }

    /* Process: vertical diagram */

    .process__pin {
        display: block;
        min-height: 0;
        padding-block: var(--space-section);
    }

    .process__header {
        margin-bottom: var(--space-12);
    }

    .process__title {
        grid-column: 1 / span 9;
    }

    .process__track {
        top: calc(0.35em + var(--node-size) / 2);
        bottom: 0;
        left: calc(var(--node-size) / 2);
        right: auto;
        width: var(--border-hairline);
        height: auto;
    }

    .process__track-line::after {
        top: 0;
        bottom: 0;
        left: 6px;
        right: auto;
        width: 5px;
        height: auto;
        background-image: linear-gradient(to bottom, var(--color-border-strong) var(--border-hairline), transparent var(--border-hairline));
        background-size: 100% 32px;
    }

    .process__track-fill {
        transform-origin: center top;
    }

    .process__terminal {
        display: none;
    }

    .process__steps {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-12);
    }

    .process-step {
        padding: 0 0 0 calc(var(--node-size) + var(--space-8));
    }

    .process-step__node {
        top: 0.35em;
    }

    .process-step::before {
        top: calc(0.35em + var(--node-size) / 2);
        left: calc(var(--node-size) + var(--space-2));
        width: calc(var(--space-8) - var(--space-4));
        height: var(--border-hairline);
    }

    .process-step__text {
        max-width: 42ch;
    }

    .process-step__io {
        max-width: 26rem;
    }

    .technology__header {
        margin-bottom: var(--space-12);
    }

    .technology__title {
        grid-column: 1 / -1;
    }

    .technology__intro {
        grid-column: 1 / span 8;
    }

    .technology__specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--space-12);
    }

    .about-intro__statement {
        grid-column: 1 / -1;
    }

    .about-intro__body {
        margin-top: var(--space-12);
        row-gap: var(--space-12);
    }

    .about-intro__text,
    .about-intro__figure {
        grid-column: 1 / -1;
    }

    .about-intro__text {
        max-width: 40rem;
    }

    .about-intro__focus {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: var(--space-16);
    }

    .cta-final__content,
    .cta-final__visual {
        grid-column: 1 / -1;
    }

    .cta-final__visual {
        max-width: 340px;
        margin-top: var(--space-12);
        justify-self: center;
    }
}

/* Tablet: case studies keep the editorial side-by-side pairing at half width
   instead of stacking a full-width image over every project. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .project {
        align-items: center;
    }

    .project--media-left .project__media { grid-column: 1 / span 6; grid-row: 1; }
    .project--media-left .project__meta { grid-column: 7 / -1; grid-row: 1; }
    .project--media-right .project__media { grid-column: 7 / -1; grid-row: 1; }
    .project--media-right .project__meta { grid-column: 1 / span 6; grid-row: 1; }

    .project__meta {
        margin-top: 0;
    }
}

@media (max-width: 767.98px) {
    /* Compact emblem: headline and primary action stay above the fold. */
    .hero {
        padding-block: var(--space-6) var(--space-12);
    }

    .hero__visual {
        margin-bottom: var(--space-6);
    }

    .hero-visual {
        width: min(50vw, 24svh, 200px);
    }

    .hero-visual__label {
        display: none;
    }

    .hero__eyebrow {
        margin-bottom: var(--space-5);
    }

    .hero__text {
        margin-top: var(--space-5);
    }

    .hero__actions {
        margin-top: var(--space-8);
    }

    .process__title,
    .process__counter {
        grid-column: 1 / -1;
    }

    .process__counter {
        justify-self: start;
        padding-bottom: 0;
    }

    .spec__row dd {
        font-size: var(--fs-sm);
    }

    .capabilities__header {
        margin-bottom: var(--space-10);
    }

    .capabilities__title,
    .capabilities__count {
        grid-column: 1 / -1;
    }

    .capabilities__count {
        justify-self: start;
        padding-bottom: 0;
    }

    .selected-work__title,
    .selected-work__all {
        grid-column: 1 / -1;
    }

    .selected-work__all {
        justify-self: start;
    }

    .project__fact {
        grid-template-columns: 6rem minmax(0, 1fr);
    }

    .technology__intro {
        grid-column: 1 / -1;
    }
}

@media (max-width: 479.98px) {
    .hero__title {
        font-size: 2.625rem;
    }

    .hero__actions .btn,
    .cta-final__actions .btn {
        flex: 1 1 100%;
    }

    .cta-final__visual {
        max-width: 280px;
        margin-top: var(--space-10);
    }

    /* Diagram labels scale with the figure; keep them at a readable ~11px. */
    .about-intro__label {
        font-size: 19px;
    }

    .technology__specs,
    .about-intro__focus {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-intro__figure {
        padding-inline: 0;
    }

    .spec__title {
        margin-top: var(--space-6);
    }
}

/* --------------------------------------------------------------------------
   System Blueprint - an architecture that builds itself (js/blueprint.js)
   -------------------------------------------------------------------------- */

.blueprint {
    background-color: transparent;
    color: var(--color-text);
    overflow: hidden;
}

.blueprint__header {
    align-items: end;
    row-gap: var(--space-6);
    margin-bottom: var(--space-16);
}

.blueprint__eyebrow {
    grid-column: 1 / -1;
}

.blueprint__title {
    grid-column: 1 / span 7;
    max-width: 14ch;
}

.blueprint__intro {
    grid-column: 9 / -1;
    color: var(--color-text-muted);
}

.blueprint__layout {
    display: grid;
    grid-template-columns: minmax(150px, 2fr) 10fr;
    gap: var(--grid-gap);
    align-items: start;
}

/* Stage list */

.blueprint__stages {
    position: sticky;
    top: calc(var(--header-height) + var(--space-8));
    display: grid;
    gap: var(--space-1);
    border-left: var(--border-default);
}

.blueprint__stage {
    position: relative;
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    transition: color var(--motion-tone);
}

.blueprint__stage::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--motion-shift);
}

.blueprint__stage-index {
    font-size: var(--fs-2xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-caps);
}

.blueprint__stage.is-done {
    color: var(--color-text-body);
}

.blueprint__stage.is-active {
    color: var(--color-text);
}

.blueprint__stage.is-active::before {
    transform: scaleY(1);
}

/* Panel */

.blueprint__panel {
    padding: var(--space-6);
}

.blueprint__hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-8);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: var(--border-default);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.blueprint__count strong {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}

.blueprint__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 22ch;
    color: var(--color-text);
}

.blueprint__status-dot {
    position: relative;
    width: 8px;
    height: 8px;
    background: var(--color-text-muted);
    transition: background-color var(--motion-tone);
}

.blueprint__status.is-live .blueprint__status-dot {
    background: var(--color-accent);
}

.blueprint__status.is-live .blueprint__status-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid var(--color-accent);
    animation: bp-ping 1.8s var(--ease-out) infinite;
}

.blueprint__replay {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    min-height: var(--tap-target);
    padding: 0 var(--space-4);
    border: var(--border-default);
    color: var(--color-text);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    background: transparent;
    cursor: pointer;
    transition: border-color var(--motion-tone), color var(--motion-tone);
}

.blueprint__replay svg {
    width: 14px;
    height: 14px;
    transition: transform var(--duration-slow) var(--ease-out);
}

.blueprint__replay:hover {
    border-color: var(--color-accent);
}

.blueprint__replay:hover svg {
    transform: rotate(-200deg);
}

.blueprint__canvas svg {
    display: block;
    width: 100%;
    height: auto;
}

.blueprint__metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: var(--border-default);
}

.blueprint__metric dt {
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.blueprint__metric dd {
    margin-top: var(--space-1);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}

.blueprint__metric small {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    color: var(--color-text-muted);
}

.blueprint__note {
    margin-top: var(--space-4);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* Diagram */

.bp-grid-dot { fill: color-mix(in srgb, var(--color-text) 16%, transparent); }

.bp-boundary {
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 1;
}

.bp-ticks {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
}

.bp-separator {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1;
}

.bp-label {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    fill: var(--color-text-muted);
}

.bp-label--boundary { fill: var(--color-text-body); }

.bp-edge {
    fill: none;
    stroke: color-mix(in srgb, var(--color-text) 38%, transparent);
    stroke-width: 1.2;
    transition: stroke var(--motion-tone), opacity var(--motion-tone);
}

.bp-packet { fill: var(--color-text); }
.bp-packet--ember { fill: var(--color-accent); }

.bp-node { cursor: default; transition: opacity var(--motion-tone); }

.bp-node__fill {
    fill: color-mix(in srgb, var(--color-bg) 70%, var(--ct-graphite));
}

.bp-node__box {
    fill: none;
    stroke: color-mix(in srgb, var(--color-text) 45%, transparent);
    stroke-width: 1;
    transition: stroke var(--motion-tone);
}

.bp-node--accent .bp-node__box { stroke: var(--color-accent); }

.bp-node__tag {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    letter-spacing: 0.12em;
    fill: var(--color-text-muted);
}

.bp-node__title {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    fill: var(--color-text);
}

.bp-node__sub {
    font-family: var(--font-body);
    fill: var(--color-text-muted);
}

.bp-node__dot { fill: var(--color-text-muted); transition: fill var(--motion-tone); }
.bp-node.is-online .bp-node__dot { fill: var(--color-accent); }

.bp-node__pulse {
    fill: none;
    stroke: var(--color-accent);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.bp-node.is-online .bp-node__pulse { animation: bp-ping 2.4s var(--ease-out) infinite; }
.bp-node.is-online:nth-child(3n + 2) .bp-node__pulse { animation-delay: 0.8s; }
.bp-node.is-online:nth-child(3n) .bp-node__pulse { animation-delay: 1.6s; }

/* Hover: trace one component's connections */
.bp.is-focusing .bp-node:not(.is-lit) { opacity: 0.28; }
.bp.is-focusing .bp-edge:not(.is-lit) { opacity: 0.15; }
.bp.is-focusing .bp-edge.is-lit { stroke: var(--color-accent); stroke-width: 1.6; }
.bp-node.is-lit .bp-node__box { stroke: var(--color-accent); }

@keyframes bp-ping {
    0% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(3.2); }
}

@media (max-width: 1023.98px) {
    .blueprint__title,
    .blueprint__intro {
        grid-column: 1 / -1;
    }

    .blueprint__layout {
        grid-template-columns: 1fr;
    }

    .blueprint__stages {
        position: static;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        border-left: 0;
        border-bottom: var(--border-default);
        scrollbar-width: none;
    }

    .blueprint__stage {
        padding: var(--space-2) var(--space-4) var(--space-3) 0;
    }

    .blueprint__stage::before {
        top: auto;
        bottom: -1px;
        left: 0;
        right: var(--space-4);
        width: auto;
        height: 2px;
        transform: scaleX(0);
        transform-origin: left;
    }

    .blueprint__stage.is-active::before { transform: scaleX(1); }
}

@media (max-width: 767.98px) {
    .blueprint__panel {
        padding: var(--space-4);
    }

    .blueprint__hud {
        gap: var(--space-2) var(--space-4);
    }

    .blueprint__status {
        min-width: 0;
        flex-basis: 100%;
    }

    .blueprint__replay {
        margin-left: 0;
    }

    .blueprint__metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .blueprint__status.is-live .blueprint__status-dot::after,
    .bp-node.is-online .bp-node__pulse {
        animation: none;
    }
}

/* The callouts and build readout are too fine to read at emblem size. */
@media (max-width: 767.98px) {
    .hero-visual__callouts,
    .hero-visual__readout {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Proof band (js/counters.js counts the figures)
   -------------------------------------------------------------------------- */

.proof {
    padding-block: var(--space-section-sm);
}

.proof__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.proof__item {
    position: relative;
    padding-top: var(--space-6);
}

.proof__rule {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--border-hairline);
    background: var(--color-border-strong);
}

.proof__body {
    display: grid;
    gap: var(--space-2);
}

.proof__value {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    letter-spacing: var(--ls-tighter);
    font-variant-numeric: tabular-nums;
}

.proof__value sup {
    margin-left: 0.15em;
    font-size: 0.28em;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    vertical-align: top;
    color: var(--color-accent);
}

.proof__label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

@media (max-width: 767.98px) {
    .proof__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--space-10);
    }
}

/* --------------------------------------------------------------------------
   Hero: drawing sheet, title-block strip and wide-screen scale
   -------------------------------------------------------------------------- */

/* The hero ends on its title-block strip, so it needs no bottom padding. */
.hero {
    padding-bottom: 0;
}

/* Title-block strip */
.hero-strip {
    width: 100%;
    margin-top: var(--space-12);
    border-top: var(--border-default);
}

.hero-strip__inner {
    display: flex;
    align-items: stretch;
}

.hero-strip__cells {
    flex: 1;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    margin: 0;
}

.hero-strip__cell {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-6);
    border-left: var(--border-default);
}

.hero-strip__cell:first-child {
    padding-left: 0;
    border-left: 0;
}

.hero-strip__cell dt {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.hero-strip__cell dd {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.hero-strip__dot {
    position: relative;
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: var(--space-2);
    vertical-align: 0.1em;
    background: var(--color-accent);
    transform: rotate(45deg);
}

.hero-strip__dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid var(--color-accent);
    animation: hero-strip-ping 2s var(--ease-out) infinite;
}

.hero-strip__scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 96px;
    padding: var(--space-4) 0 var(--space-4) var(--space-6);
    border-left: var(--border-default);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
    transition: color var(--motion-tone);
}

.hero-strip__scroll:hover {
    color: var(--color-text);
}

.hero-strip__line {
    position: relative;
    width: 1px;
    height: 28px;
    background: var(--color-border);
    overflow: hidden;
}

.hero-strip__line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    animation: hero-strip-draw 2.2s var(--ease-in-out) infinite;
}

@keyframes hero-strip-ping {
    0% { opacity: 0.9; transform: scale(0.6); }
    100% { opacity: 0; transform: scale(1.8); }
}

@keyframes hero-strip-draw {
    0% { transform: translateY(-100%); }
    60%, 100% { transform: translateY(100%); }
}

/* Wide screens: hero and header widen together and the artwork grows.
   Laptops (below 1600px) keep the standard proportions. */
@media (min-width: 1600px) {
    .hero > .container,
    .hero-strip > .container,
    .site-header > .container {
        max-width: calc(var(--container-xl) + var(--gutter) * 2);
    }

    .hero__content {
        grid-column: 1 / span 6;
    }

    .hero__visual {
        grid-column: 7 / -1;
    }

    .hero-visual {
        max-width: min(680px, 72svh);
    }

    .hero__title {
        font-size: max(2.25rem, min(5.6rem, 9.4svh));
    }
}

/* Laptop heights: tighten the vertical rhythm so the strip stays on the
   first screen. */
@media (min-width: 1024px) and (max-height: 960px) {
    .hero {
        padding-top: var(--space-8);
    }

    .hero-strip {
        margin-top: var(--space-8);
    }

    .hero-strip__cell {
        padding-block: var(--space-4);
    }

    .hero-visual {
        max-width: min(560px, 62svh);
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .hero-strip__cells {
        grid-template-columns: 1fr 1fr;
    }

    .hero-strip__cell:first-child {
        grid-column: 1 / -1;
        border-bottom: var(--border-default);
    }

    .hero-strip__cell:nth-child(2) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 767.98px) {
    .hero-strip__cells {
        grid-template-columns: 1fr;
    }

    .hero-strip__cell {
        padding: var(--space-4) 0;
        border-left: 0;
        border-top: var(--border-default);
    }

    .hero-strip__cell:first-child {
        border-top: 0;
    }

    .hero-strip__scroll {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-strip__dot::after,
    .hero-strip__line::after {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Hero visual - Forge: the 3D mark (js/hero-3d.js) over one quiet light
   -------------------------------------------------------------------------- */

.hero__eyebrow {
    color: var(--color-text-muted);
}

.hero-visual {
    contain: none;
}

.hero-visual::before,
.hero-visual::after {
    content: none;
}

.hero-visual__light {
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--rgb-accent), 0.11), rgba(var(--rgb-accent), 0.03) 55%, transparent);
    pointer-events: none;
}

.hero-visual .hero-visual__flat {
    position: absolute;
    left: 31%;
    top: 20%;
    width: 38%;
    height: auto;
    overflow: visible;
    transition: opacity 0.8s var(--ease-out);
}

.hero-visual.is-3d .hero-visual__flat {
    opacity: 0;
}

.hero-visual__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.hero-visual__caption {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 4%;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Facts strip labels follow the monospace label style */
.hero-strip__cell dt,
.hero-strip__scroll {
    font-family: var(--font-mono);
    font-weight: var(--fw-regular);
    letter-spacing: 0.06em;
}

.hero-strip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: none;
}

.hero-strip__dot::after {
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Forge: call to action as the one glass panel; case-study media tilt
   -------------------------------------------------------------------------- */

.cta-final {
    position: relative;
}

.cta-final::before {
    content: "";
    position: absolute;
    right: -15%;
    top: -10%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--rgb-accent), 0.2), rgba(var(--rgb-accent), 0.07) 50%, rgba(var(--rgb-accent), 0) 100%);
    pointer-events: none;
    z-index: -1;
}

.cta-final__grid.glass-panel {
    padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
}

.project__media {
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background:
        radial-gradient(90% 80% at 70% 15%, rgba(var(--rgb-accent), 0.14), transparent 60%),
        linear-gradient(160deg, #141A21, #0B0F14);
    /* Tilt uses the individual rotate property: GSAP owns transform for
       the scroll reveal, and a CSS transition on transform would smear it. */
    rotate: var(--tilt, 1 0 0 0deg);
    transition: rotate 1.2s var(--ease-out);
}

.project {
    perspective: 1400px;
}

.project__media.is-tilting {
    transition: rotate 0.25s linear;
}

.project__media-glare {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--rgb-hi), 0.07), transparent 50%);
    opacity: var(--glare, 0);
    transition: opacity 0.6s;
}

.project__placeholder {
    background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .project__media { transform: none; }
}

/* The figure caption is too fine for the compact emblem on tablets and phones. */
@media (max-width: 1023.98px) {
    .hero-visual__caption {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Glass panels on the home page
   -------------------------------------------------------------------------- */

.spec.glass-panel {
    padding: var(--space-6) var(--space-6) var(--space-8);
}

.proof__item.glass-panel {
    padding: var(--space-6);
}

.spec.glass-panel .spec__rule,
.proof__item.glass-panel .proof__rule {
    display: none;
}

.blueprint__panel.glass-panel {
    border-radius: 14px;
}

/* --------------------------------------------------------------------------
   Capabilities - glass cards, each with a line schematic of what that
   discipline builds. One slow detail moves in each (on screen only).
   -------------------------------------------------------------------------- */

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

.cap-card {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--space-5);
    padding: var(--space-6);
    min-width: 0;
}

.cap-card__figure {
    order: -1;
}

.cap-card--wide {
    grid-column: span 2;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: var(--space-8);
}

.cap-card--wide .cap-card__figure {
    order: 0;
}

.cap-card__text {
    display: grid;
    align-content: start;
    gap: var(--space-3);
}

.cap-card__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.cap-card__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
}

.cap-card--wide .cap-card__title {
    font-size: var(--fs-xl);
}

.cap-card__link {
    color: inherit;
    text-decoration: none;
}

/* Stretched link: the whole card is the click target. */
.cap-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
}

.cap-card__link:focus-visible {
    outline: none;
}

.cap-card:has(.cap-card__link:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.cap-card__description {
    max-width: 44ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--color-text-body);
}

.cap-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
}

.cap-card__tech li {
    padding: 3px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--color-text-body);
}

.cap-card__schematic {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    background: rgba(var(--rgb-well), 0.5);
    border: 1px solid var(--color-border);
    transition: border-color var(--duration-moderate) var(--ease-standard);
}

.cap-card__title,
.cap-card__schematic .sch-strong {
    transition: color var(--duration-moderate) var(--ease-standard), opacity var(--duration-moderate) var(--ease-standard);
}

@media (hover: hover) {
    .cap-card:hover .cap-card__title {
        color: var(--color-accent);
    }

    .cap-card:hover .cap-card__schematic {
        border-color: rgba(var(--rgb-accent), 0.35);
    }
}

.cap-card.is-focused .cap-card__schematic {
    border-color: rgba(var(--rgb-accent), 0.35);
}

/* Schematic drawing kit (shared by the capability cards) */
.sch-line { fill: none; stroke: var(--color-text-muted); stroke-width: 1; opacity: 0.7; }
.sch-strong { fill: none; stroke: var(--color-text); stroke-width: 1.2; opacity: 0.8; }
.sch-hot { fill: none; stroke: var(--color-accent); stroke-width: 1.4; }
.sch-fill { fill: rgba(var(--rgb-paper), 0.04); }
.sch-fill-hot { fill: rgba(var(--rgb-accent), 0.16); }
.sch-dot { fill: var(--color-accent); }
.sch-text {
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    fill: var(--color-text-muted);
}
.sch-flow { stroke-dasharray: 4 6; }
.sch-travel { offset-rotate: 0deg; }

@media (prefers-reduced-motion: no-preference) {
    .is-playing .sch-flow { animation: sch-flow 1.6s linear infinite; }
    .is-playing .sch-pulse { animation: sch-pulse 2.4s ease-in-out infinite; }
    .is-playing .sch-travel { animation: sch-travel 3.2s cubic-bezier(0.45, 0.05, 0.35, 1) infinite; }
}

@keyframes sch-flow { to { stroke-dashoffset: -20; } }
@keyframes sch-pulse { 50% { opacity: 0.3; } }
@keyframes sch-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }

@media (max-width: 1023.98px) {
    .cap-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .cap-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cap-card--wide {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .cap-card--wide .cap-card__figure {
        order: -1;
    }

    .cap-card {
        padding: var(--space-5);
    }
}

/* --------------------------------------------------------------------------
   Process - what each stage hands over. Dims and lights with its step.
   -------------------------------------------------------------------------- */

.process-step__deliverable {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-3);
    margin-right: var(--space-5);
    padding: var(--space-4);
    min-height: 9.5rem;
    align-content: start;
    border-radius: 12px;
}

.dlv-head {
    display: grid;
    gap: 2px;
    margin: 0;
}

.dlv-head span {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.dlv-head b {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.dlv-list,
.dlv-rows,
.dlv-pipe {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}

.dlv-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-body);
}

.dlv-list li::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid var(--color-border-strong);
}

.dlv-list li.is-done::before {
    border-color: var(--color-accent);
    background: radial-gradient(circle, var(--color-accent) 0 2.5px, transparent 3px);
}

.dlv-rows li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.dlv-rows code {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text-muted);
}

.dlv-rows span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text-body);
}

.dlv-pill {
    padding: 1px 7px;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 400;
}

.dlv-pill--ok {
    border-color: rgba(var(--rgb-ok), 0.5);
    color: var(--color-ok);
}

.dlv-pipe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dlv-pipe li {
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-text-muted);
}

.dlv-pipe li.is-done {
    border-color: rgba(var(--rgb-ok), 0.45);
    color: var(--color-ok);
}

.dlv-pipe li.is-live {
    border-color: rgba(var(--rgb-accent), 0.6);
    background: rgba(var(--rgb-accent), 0.14);
    color: var(--color-accent);
}

.dlv-figure {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.dlv-grid {
    stroke: var(--color-border);
    stroke-width: 1;
}

.dlv-area {
    fill: rgba(var(--rgb-accent), 0.14);
}

.dlv-line {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.8;
}

/* Laptop heights: keep the pinned process inside one screen. */
@media (min-width: 1024px) and (max-height: 860px) {
    .process-step__io {
        display: none;
    }

    .process-step__deliverable {
        min-height: 0;
    }
}

@media (max-width: 1023.98px) {
    .process-step__deliverable {
        max-width: 26rem;
        margin-right: 0;
        min-height: 0;
    }
}