@layer components {
    /* J7-C2A brand presentation and primary motion language.
       Durations, delays and easing come only from tokens. Motion vocabulary:
       complexity -> organization, dispersion -> convergence, evidence ->
       interpretation, uncertainty -> clarified decision space. */

    /* Pending reveal transforms must never widen the page on small screens. */
    .jh-site-main {
        overflow-x: clip;
    }

    /* Immersive pages carry a full-bleed identity band ahead of the narrative.
       The band owns its own block padding; the narrative keeps section spacing. */
    .jh-site-main--immersive > .jh-hero,
    .jh-home-panel--opening > .jh-hero {
        padding-block: var(--space-8);
    }

    .jh-site-main--immersive > .jh-shell,
    .jh-home-panel--narrative > .jh-shell {
        padding-block: var(--section-space);
    }

    /* Home structure (owner decision 2026-09-25). PANEL 1 is a real section that
       owns the navy field: the hero (video, copy, motion, unchanged) plus the
       opening scene's remaining space, which used to be the narrative's top
       padding and the first section's own — that space now belongs to Panel 1
       as its end padding, same size. PANEL 2 is a separate paper section that
       begins with the Evidence Aperture. Every rendered position is unchanged. */
    .jh-site-main--immersive > .jh-home-panel--opening {
        /* The opening scene fills the arrival viewport (header included), so the
           next scene never shows before the reader scrolls; the space below the
           video is part of the scene. */
        min-block-size: 100vh;
        min-block-size: 100svh;
        padding-block: 0 calc(var(--space-6) + var(--subsection-space));
    }

    /* One continuous Home world: <main> paints the field once, header to CTA;
       both panels are transparent over it, so no strip or seam can appear. */
    .jh-site-main--home {
        background: var(--gradient-home-world);
    }

    /* Dark treatment of the global header inside the opening scene: same
       structure and proportions, transparent over the field, light wordmark,
       inverse text tokens; the primary action stays prominent as a paper button. */
    .jh-site-header--dark {
        border-block-end-color: color-mix(in srgb, var(--palette-paper) 14%, transparent);
        background: transparent;
    }

    .jh-site-header--dark .jh-button--primary {
        border-color: var(--palette-paper);
        background: var(--palette-paper);
        color: var(--palette-deep-navy);
    }

    .jh-site-header--dark .jh-button--primary:hover,
    .jh-site-header--dark .jh-button--primary:focus-visible {
        border-color: var(--palette-marketiq-silver-bright);
        background: var(--palette-marketiq-silver-bright);
        color: var(--palette-deep-navy);
    }

    .jh-site-header--dark .jh-nav__link:hover,
    .jh-site-header--dark .jh-nav__disclosure:hover {
        background: color-mix(in srgb, var(--palette-paper) 10%, transparent);
    }

    .jh-home-panel--opening > .jh-hero--jurhen {
        background: transparent;
    }

    .jh-home-panel--narrative {
        background: transparent;
    }

    /* Narrative blocks on the dark field: the Methodology note becomes a
       restrained translucent card; structure and copy unchanged. */
    .jh-home-panel--narrative .jh-epistemic {
        border-color: color-mix(in srgb, var(--palette-paper) 18%, transparent);
        background: color-mix(in srgb, var(--palette-paper) 6%, transparent);
    }

    /* Readability on the dark field: narrative words and the Methodology note
       take the inverse text tokens (paper), secondary lines silver. */
    .jh-home-panel--narrative .jh-narrative--home,
    .jh-home-panel--narrative .jh-service p,
    .jh-home-panel--narrative .jh-epistemic p,
    .jh-home-panel--narrative .jh-service h2,
    .jh-home-panel--narrative .jh-service h2 a {
        color: var(--color-text-primary);
    }

    .jh-home-panel--narrative [data-copy-role="scope-note"],
    .jh-home-panel--narrative .jh-epistemic h2 {
        color: var(--color-text-secondary);
    }

    .jh-home-panel--narrative > .jh-shell {
        padding-block-start: 0;
    }

    .jh-home-panel--narrative .jh-narrative--home > .jh-thesis {
        padding-block-start: 0;
    }

    /* Approved marks are inset within their files; the frame enlarges and offsets
       the image so the visible art aligns with the surrounding text edge. */
    .jh-identity {
        --identity-ratio: var(--brand-wordmark-ratio);
        --identity-inset-x: 0.139;
        --identity-inset-y: 0.238;
        --identity-content-x: 0.722;
        --identity-file-ratio: 0.2833;

        inline-size: 100%;
    }

    .jh-identity--marketiq {
        --identity-ratio: var(--brand-marketiq-ratio);
        --identity-inset-x: 0.066;
        --identity-inset-y: 0.22;
        --identity-content-x: 0.872;
        --identity-file-ratio: 0.3333;
    }

    .jh-identity__frame {
        inline-size: calc(100% / var(--identity-content-x));
        aspect-ratio: var(--identity-ratio);
        margin-inline-start: calc(-100% * var(--identity-inset-x) / var(--identity-content-x));
        margin-block: calc(-100% * var(--identity-inset-y) * var(--identity-file-ratio) / var(--identity-content-x));
    }

    .jh-identity__frame {
        display: grid;
    }

    .jh-identity__frame img,
    .jh-identity__frame picture {
        grid-area: 1 / 1;
        inline-size: 100%;
        block-size: auto;
        aspect-ratio: var(--identity-ratio);
    }

    /* The once-only mark stacks over the static mark and takes over the moment
       it has loaded; the static mark returns if the file never arrives. */
    .jh-identity__once {
        opacity: 0;
    }

    .jh-identity[data-brand-state="once"] .jh-identity__once {
        opacity: 1;
    }

    .jh-identity[data-brand-state="once"] .jh-identity__static {
        opacity: 0;
    }

    /* Identity band. Layers, back to front: reserved media slot (future motion
       visual or video, object-fit cover), transient identity, copy. */
    .jh-hero {
        position: relative;
        isolation: isolate;
        overflow: clip;
        padding-block: var(--space-8);
        background: var(--gradient-analytical-primary);
        color: var(--color-text-primary);
    }

    .jh-hero__media {
        position: absolute;
        z-index: 0;
        inset: 0;
        background: var(--gradient-analytical-primary);
    }

    .jh-hero__media > video,
    .jh-hero__media > picture,
    .jh-hero__media > img {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
    }

    .jh-hero__inner {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-areas:
            "identity"
            "copy";
        gap: var(--space-7);
        align-items: center;
    }

    .jh-hero__identity {
        grid-area: identity;
        inline-size: min(100%, 22rem);
    }

    /* Opening identity (owner motion pass 2026-09-26): arrives as the signals
       begin to organise, resolves once through the approved J animation and
       stays as the settled mark; it never reflows the copy. */
    .jh-hero--jurhen .jh-hero__identity--transient {
        position: absolute;
        z-index: 1;
        inset-block-start: var(--space-5);
        inset-inline-end: var(--gutter);
        inline-size: min(58vw, 17rem);
        pointer-events: none;
        animation: jh-arrive var(--motion-reveal) var(--ease-decelerate) var(--motion-opening-identity) both;
    }

    /* Opening signals: a small field of points that enters dispersed, holds,
       organises towards the identity and dissolves into it — the J's own
       dispersion → organisation → clarity, played once. Transform and opacity
       only; the layer is clipped, non-interactive and container-sized so the
       travel scales with the hero and never leaves it. */
    .jh-hero__signals {
        position: absolute;
        z-index: 1;
        inset: 0;
        overflow: clip;
        pointer-events: none;
        container-type: size;
    }

    .jh-signal {
        --signal-x: var(--mtx);
        --signal-y: var(--mty);

        position: absolute;
        inset-block-start: calc(var(--sy) * 1%);
        inset-inline-start: calc(var(--sx) * 1%);
        inline-size: var(--space-2);
        block-size: var(--space-2);
        border-radius: 50%;
        background: var(--palette-marketiq-silver-body);
        opacity: 0;
        animation: jh-signal calc(var(--motion-signal-enter) + var(--motion-signal-organise) + var(--motion-signal-settle)) var(--ease-editorial) calc(var(--k) * var(--motion-stagger)) both;
    }

    .jh-signal--bright {
        background: var(--palette-paper);
    }

    .jh-signal--blue {
        background: var(--palette-signal-blue);
    }

    /* Phones show the six leading points; tablets ten; desktop all. */
    .jh-signal:nth-child(n + 7) {
        display: none;
    }

    @keyframes jh-signal {
        0% {
            opacity: 0;
            transform: translate(calc(var(--dx) * 1cqw), calc(var(--dy) * 1cqh)) scale(0.4);
        }

        35% {
            opacity: 0.9;
            transform: translate(0, 0) scale(1);
        }

        42% {
            opacity: 0.9;
            transform: translate(0, 0) scale(1);
        }

        77% {
            opacity: 0.85;
            transform: translate(calc((var(--signal-x) - var(--sx)) * 1cqw), calc((var(--signal-y) - var(--sy)) * 1cqh)) scale(0.8);
        }

        100% {
            opacity: 0;
            transform: translate(calc((var(--signal-x) - var(--sx)) * 1cqw), calc((var(--signal-y) - var(--sy)) * 1cqh)) scale(0.5);
        }
    }

    @keyframes jh-arrive {
        from {
            opacity: 0;
            transform: translateY(var(--space-2));
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    /* The slogan clarifies out of the organised field, after the J; the two
       supporting lines follow, one after the other. Text is in the DOM from the
       first byte; only its arrival is timed. */
    .jh-hero--jurhen .jh-hero__copy h1[data-arrival="resolve"] {
        animation-name: jh-clarify;
        animation-delay: var(--motion-opening-slogan);
    }

    .jh-hero--jurhen .jh-hero__copy [data-arrival="settle"] {
        animation-delay: var(--motion-opening-copy);
    }

    .jh-hero--jurhen .jh-hero__copy [data-arrival="settle"] ~ [data-arrival="settle"] {
        animation-delay: calc(var(--motion-opening-copy) + var(--motion-reveal));
    }

    @keyframes jh-clarify {
        from {
            opacity: 0;
            filter: blur(10px);
            transform: translateY(0.2em);
        }

        to {
            opacity: 1;
            filter: blur(0);
            transform: none;
        }
    }

    /* Interim mobile composition: the reserved band above the slogan holds the
       transient identity and, once it has receded, reads as deliberate space
       for the C2B media layer; no placeholder is drawn. */
    .jh-hero--jurhen {
        padding-block-start: calc(var(--space-7) + 5rem);
        padding-block-end: var(--space-7);
    }

    .jh-hero--jurhen h1 {
        position: relative;
        padding-block-end: var(--space-4);
    }

    /* Handoff: as the identity recedes, the slogan's rule is drawn. */
    .jh-hero--jurhen h1::after {
        position: absolute;
        inset-inline-start: 0;
        inset-block-end: 0;
        inline-size: var(--space-9);
        block-size: var(--rule-w);
        background: var(--color-accent-primary);
        transform-origin: 0 50%;
        animation: jh-draw var(--motion-editorial) var(--ease-editorial) calc(var(--motion-opening-slogan) + var(--motion-editorial)) both;
        content: "";
    }

    .jh-hero--marketiq .jh-hero__identity {
        inline-size: min(100%, 18rem);
    }

    .jh-hero__copy {
        grid-area: copy;
    }

    .jh-hero__copy h1 {
        font-size: var(--text-display);
        letter-spacing: var(--tracking-display);
        line-height: var(--leading-h1);
    }

    .jh-hero__copy .jh-type-body-large {
        color: var(--color-text-secondary);
    }

    /* Silver accent on the dark surface: the approved MarketIQ metallic tone
       carries the primary statement; supporting copy stays paper white so the
       hierarchy reads silver = high-value statement, white = explanation. */
    .jh-hero--jurhen .jh-hero__copy h1 {
        color: var(--color-accent-silver);
    }

    /* Satin metal read from the IQ mark, clipped to the slogan; the solid silver
       above is the fallback where text clipping is unsupported. A single light
       sweep crosses the text once after it resolves, then parks off the glyphs. */
    @supports ((-webkit-background-clip: text) or (background-clip: text)) {
        .jh-hero--jurhen .jh-hero__copy h1 {
            background-image: var(--gradient-metallic-sweep), var(--gradient-metallic-silver);
            background-size: 240% 100%, 100% 100%;
            background-position: 200% 0, 0 0;
            background-repeat: no-repeat;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
        }

        .jh-hero--jurhen .jh-hero__copy h1[data-arrival="resolve"] {
            /* The slogan clarifies after the J has resolved; the sweep then
               crosses it once, slowly; the hero never fires everything at once. */
            animation-name: jh-clarify, jh-sweep;
            animation-duration: var(--motion-editorial), calc(var(--motion-identity) * 0.8);
            animation-timing-function: var(--ease-decelerate), linear;
            animation-delay: var(--motion-opening-slogan), calc(var(--motion-opening-slogan) + var(--motion-editorial));
            animation-fill-mode: both, both;
            animation-iteration-count: 1, 1;
        }
    }

    @keyframes jh-sweep {
        from {
            background-position: -140% 0, 0 0;
        }

        to {
            background-position: 200% 0, 0 0;
        }
    }

    .jh-hero--jurhen .jh-hero__copy .jh-type-body-large {
        color: var(--color-text-primary);
    }
    .jh-hero--marketiq .jh-hero__statement {
        position: relative;
        padding-block-end: var(--space-4);
        color: var(--color-text-primary);
        font-family: var(--font-display);
        font-size: var(--text-display);
        font-weight: var(--weight-display-extrabold);
        letter-spacing: var(--tracking-display);
        line-height: var(--leading-h1);
    }

    /* Evidence -> structure: the statement resolves, then its rule is drawn. */
    .jh-hero--marketiq .jh-hero__statement::after {
        position: absolute;
        inset-inline-start: 0;
        inset-block-end: 0;
        inline-size: var(--space-8);
        block-size: var(--rule-w);
        background: var(--color-accent-silver);
        transform-origin: 0 50%;
        animation: jh-draw var(--motion-editorial) var(--ease-editorial) calc(var(--motion-stagger) * 4) both;
        content: "";
    }

    /* Arrival choreography: identity establishes (SMIL, first frame already
       carries the wordmark), the slogan resolves from complexity into clarity,
       the supporting thought settles into place. Text is present in SSR and
       readable within the first second; nothing waits for the symbol. */
    [data-arrival] {
        animation-duration: var(--motion-editorial);
        animation-timing-function: var(--ease-decelerate);
        animation-fill-mode: both;
    }

    [data-arrival="resolve"] {
        animation-name: jh-resolve;
    }

    [data-arrival="settle"] {
        animation-name: jh-settle;
        animation-delay: calc(var(--motion-stagger) * 3);
    }

    [data-arrival="settle"] ~ [data-arrival="settle"] {
        animation-delay: calc(var(--motion-stagger) * 5);
    }

    /* Credibility-page primary statements carry display authority. */
    .jh-arrival .jh-statement {
        font-family: var(--font-display);
        font-size: var(--text-h2);
        font-weight: var(--weight-display-bold);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    /* MarketIQ: the approved J resolves, then the product wordmark reveals beside it. */
    .jh-hero__identity--product {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: var(--space-4);
    }

    .jh-hero__identity--product .jh-symbol {
        --symbol-size: clamp(4rem, 14vw, 7rem);
    }

    .jh-hero__identity--product .jh-identity {
        animation: jh-settle var(--motion-editorial) var(--ease-decelerate) var(--motion-identity-settle) both;
    }

    /* Standalone J symbol: static by default; when a once-only animated layer is
       added by progressive enhancement the static mark dissolves into it. */
    .jh-symbol {
        display: grid;
        inline-size: var(--symbol-size, 4rem);
        aspect-ratio: var(--brand-symbol-ratio);
    }

    .jh-symbol > img {
        grid-area: 1 / 1;
        inline-size: 100%;
        block-size: auto;
        aspect-ratio: var(--brand-symbol-ratio);
    }

    .jh-symbol__once {
        opacity: 0;
    }

    .jh-symbol[data-brand-state="once"] .jh-symbol__once {
        opacity: 1;
    }

    .jh-symbol[data-brand-state="once"] .jh-symbol__static {
        opacity: 0;
        transition: opacity var(--motion-reveal) var(--ease-standard);
    }

    .jh-symbol--transition {
        --symbol-size: 3.5rem;

        margin-block-end: var(--space-2);
    }

    /* Editorial narrative: wider than prose so composition can be asymmetric. */
    .jh-narrative {
        max-inline-size: none;
    }

    .jh-narrative > .jh-page-layout {
        inline-size: 100%;
    }

    .jh-page-content {
        max-inline-size: none;
    }

    .jh-page-content > section > p,
    .jh-page-content > section > .jh-stack {
        max-inline-size: min(var(--prose-max), 68ch);
    }

    /* Section headings that are the route: the heading is the link. */
    .jh-section-link {
        display: inline-block;
        color: inherit;
        text-decoration: none;
        transition: color var(--motion-fast) var(--ease-standard);
    }

    .jh-section-link::after {
        display: inline-block;
        inline-size: var(--space-5);
        block-size: var(--rule-w);
        margin-inline-start: var(--space-3);
        background: var(--color-accent-primary);
        vertical-align: middle;
        transform-origin: 0 50%;
        transition: transform var(--motion-standard) var(--ease-decelerate);
        content: "";
    }

    .jh-section-link:hover,
    .jh-section-link:focus-visible {
        color: var(--color-action-hover);
        text-decoration: underline;
        text-decoration-thickness: var(--rule-w);
        text-underline-offset: 6px;
    }

    .jh-section-link:hover::after,
    .jh-section-link:focus-visible::after {
        transform: scaleX(1.6);
    }

    /* Thesis: label-scale heading, statement-scale thought (typographic inversion). */
    .jh-thesis h2 {
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-label);
        font-weight: var(--weight-body-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
        text-transform: uppercase;
    }

    .jh-thesis p {
        max-inline-size: 26ch;
        font-family: var(--font-display);
        font-size: var(--text-h2);
        font-weight: var(--weight-display-medium);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    /* Transition between major ideas: a drawn line with a brass resolution. */
    .jh-transition {
        position: relative;
        block-size: var(--rule-w);
        margin-block: var(--space-4);
        background: var(--color-border);
        transform-origin: 0 50%;
        transition: transform calc(var(--motion-editorial) * 2) var(--ease-editorial);
    }

    .jh-transition::after {
        position: absolute;
        inset-inline-end: 0;
        inset-block: 0;
        inline-size: var(--space-8);
        background: var(--color-accent-brass);
        transform-origin: 100% 50%;
        transition: transform var(--motion-editorial) var(--ease-decelerate) calc(var(--motion-editorial) * 2);
        content: "";
    }

    [data-reveal].jh-transition[data-reveal-state="pending"] {
        opacity: 1;
        transform: scaleX(0);
    }

    .jh-transition[data-reveal-state="pending"]::after {
        transform: scaleX(0);
    }

    /* Continuation, only where it adds decision value: one compact row. */
    .jh-next {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3) var(--space-5);
        padding-block-start: var(--space-6);
        border-block-start: var(--border-w) solid var(--color-border);
    }

    .jh-next__label {
        margin: 0;
        color: var(--color-text-secondary);
    }

    .jh-next__links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3) var(--space-5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-next__links li {
        margin: 0;
    }

    /* Market discovery: country -> current (links) -> coming soon (labelled). */
    .jh-discovery {
        display: grid;
        gap: var(--space-5);
    }

    .jh-discovery__group {
        display: grid;
        gap: var(--space-2);
        padding-block-start: var(--space-3);
        border-block-start: var(--border-w) solid var(--color-border);
    }

    .jh-discovery__country {
        margin: 0;
        font-size: var(--text-h4);
        line-height: var(--leading-h4);
    }

    .jh-discovery__markets {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-discovery__item {
        margin: 0;
    }

    .jh-discovery__item--soon {
        color: var(--color-text-secondary);
    }

    .jh-discovery__item--soon .jh-metadata {
        margin-inline-start: var(--space-2);
    }

    .jh-discovery--compact {
        display: block;
        max-inline-size: 68ch;
        margin: 0;
        color: var(--color-text-secondary);
        font-size: var(--text-body-small);
        line-height: var(--leading-body-small);
    }

    .jh-discovery--compact .jh-label {
        margin-inline-end: var(--space-2);
        color: var(--color-accent-brass);
    }

    .jh-discovery--compact .jh-discovery__country {
        display: inline;
        font-family: var(--font-body);
        font-size: inherit;
        font-weight: var(--weight-body-semibold);
    }

    .jh-discovery--compact .jh-discovery__country::after {
        content: ":";
    }

    /* Methodology emphasis: statement scale, isolated. */
    .jh-emphasis,
    .jh-emphasis > strong {
        font-family: var(--font-display);
        font-size: var(--text-h2);
        font-weight: var(--weight-display-bold);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    /* Footer meta row: governed analytics preferences, discreet. */
    .jh-site-footer__meta {
        padding-block: var(--space-4) var(--space-6);
        border-block-start: var(--border-w) solid var(--color-border);
    }

    /* Global footer (owner decision 2026-09-26): light steel surface, navy
       words and links, light-surface wordmark; information architecture and
       spacing unchanged. */
    .jh-site-footer {
        border-block-start-color: var(--palette-navy);
        background: var(--gradient-footer-surface);
        color: var(--palette-ink-navy);
    }

    .jh-site-footer .jh-footer__group-title,
    .jh-site-footer .jh-footer__links a,
    .jh-site-footer .jh-footer__methodology,
    .jh-site-footer .jh-footer__group-title a {
        color: var(--palette-ink-navy);
    }

    .jh-site-footer__descriptor,
    .jh-site-footer .jh-footer__links a[aria-current="page"],
    .jh-site-footer .jh-footer__methodology[aria-current="page"] {
        border-color: var(--palette-navy);
    }

    .jh-site-footer__meta {
        border-block-start-color: color-mix(in srgb, var(--palette-navy) 25%, transparent);
    }

    .jh-site-footer__meta .jh-consent-control {
        padding-block: 0;
        border: 0;
    }

    .jh-site-footer__meta .jh-consent-control__summary {
        min-block-size: 2rem;
        color: var(--color-text-secondary);
        font-weight: var(--weight-metadata-regular);
        letter-spacing: var(--tracking-metadata);
        text-decoration: underline;
        text-decoration-thickness: var(--border-w);
        text-underline-offset: 3px;
        text-transform: none;
    }

    .jh-site-footer__meta .jh-consent-control__panel {
        max-inline-size: var(--prose-max);
    }

    /* Footer legal line (public readiness D1, 2026-10-06): one discreet
       copyright sentence in the metadata voice; no layout change. */
    .jh-site-footer__legal {
        padding-block: var(--space-4) var(--space-6);
    }

    .jh-site-footer__copyright {
        margin: 0;
        color: var(--color-text-secondary);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-regular);
        letter-spacing: var(--tracking-metadata);
    }

    /* Alignment reveal: a heading and its thought arrive from separate sides and
       settle on one edge while the section rule is drawn. */
    .jh-reveal--align {
        position: relative;
    }

    .jh-reveal--align::before {
        position: absolute;
        inset-block-start: calc(var(--subsection-space) - var(--space-4));
        inset-inline-start: 0;
        inline-size: var(--space-6);
        block-size: var(--rule-w);
        background: var(--color-accent-primary);
        transform-origin: 0 50%;
        transition: transform var(--motion-editorial) var(--ease-editorial);
        content: "";
    }

    [data-reveal].jh-reveal--align[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    .jh-reveal--align > * {
        transition:
            opacity var(--motion-editorial) var(--ease-standard),
            transform var(--motion-editorial) var(--ease-decelerate);
    }

    .jh-reveal--align[data-reveal-state="pending"]::before {
        transform: scaleX(0);
    }

    .jh-reveal--align[data-reveal-state="pending"] > h2 {
        opacity: 0;
        transform: translateX(calc(-1 * var(--space-5)));
    }

    .jh-reveal--align[data-reveal-state="pending"] > :not(h2) {
        opacity: 0;
        transform: translateX(var(--space-5));
    }

    .jh-reveal--align[data-reveal-state="revealed"] > :nth-child(2) {
        transition-delay: var(--motion-stagger);
    }

    .jh-reveal--align[data-reveal-state="revealed"] > :nth-child(n + 3) {
        transition-delay: calc(var(--motion-stagger) * 2);
    }

    /* Convergence reveal: dispersed items settle into one structure. */
    [data-reveal].jh-reveal--converge[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    .jh-reveal--converge > * {
        transition:
            opacity var(--motion-reveal) var(--ease-standard),
            transform var(--motion-editorial) var(--ease-decelerate);
    }

    .jh-reveal--converge[data-reveal-state="pending"] > :nth-child(odd) {
        opacity: 0;
        transform: translate(calc(-1 * var(--space-6)), var(--space-3));
    }

    .jh-reveal--converge[data-reveal-state="pending"] > :nth-child(even) {
        opacity: 0;
        transform: translate(var(--space-6), var(--space-3));
    }

    .jh-reveal--converge[data-reveal-state="revealed"] > :nth-child(2) {
        transition-delay: var(--motion-stagger);
    }

    .jh-reveal--converge[data-reveal-state="revealed"] > :nth-child(3) {
        transition-delay: calc(var(--motion-stagger) * 2);
    }

    .jh-reveal--converge[data-reveal-state="revealed"] > :nth-child(4) {
        transition-delay: calc(var(--motion-stagger) * 3);
    }

    .jh-reveal--converge[data-reveal-state="revealed"] > :nth-child(5) {
        transition-delay: calc(var(--motion-stagger) * 4);
    }

    .jh-reveal--converge[data-reveal-state="revealed"] > :nth-child(6) {
        transition-delay: calc(var(--motion-stagger) * 5);
    }

    .jh-reveal--converge[data-reveal-state="revealed"] > :nth-child(n + 7) {
        transition-delay: calc(var(--motion-stagger) * 6);
    }

    /* Evidence -> interpretation -> decision: a three-step structural path.
       Labels repeat the section heading's approved terms; no metric is shown. */
    .jh-path {
        margin: 0;
    }

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

    .jh-path__steps::before {
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        block-size: var(--rule-w);
        background: var(--color-border-strong);
        transform-origin: 0 50%;
        transition: transform calc(var(--motion-editorial) * 2) var(--ease-editorial);
        content: "";
    }

    .jh-path__steps li {
        position: relative;
        margin: 0;
        padding-block-start: var(--space-3);
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-label);
        font-weight: var(--weight-body-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
        text-transform: uppercase;
        transition:
            opacity var(--motion-reveal) var(--ease-standard),
            transform var(--motion-reveal) var(--ease-decelerate);
    }

    .jh-path__steps li::before {
        position: absolute;
        inset-block-start: calc(-1 * var(--space-4) - var(--space-1));
        inset-inline-start: 0;
        inline-size: var(--space-3);
        block-size: var(--space-3);
        border-radius: 50%;
        background: var(--color-accent-primary);
        content: "";
    }

    .jh-path__steps li:last-child {
        color: var(--color-text-primary);
    }

    .jh-path__steps li:last-child::before {
        background: var(--color-accent-brass);
    }

    [data-reveal].jh-path[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    .jh-path[data-reveal-state="pending"] .jh-path__steps::before {
        transform: scaleX(0);
    }

    .jh-path[data-reveal-state="pending"] .jh-path__steps li {
        opacity: 0;
        transform: translateY(var(--space-2));
    }

    .jh-path[data-reveal-state="revealed"] .jh-path__steps li:nth-child(1) {
        transition-delay: calc(var(--motion-stagger) * 2);
    }

    .jh-path[data-reveal-state="revealed"] .jh-path__steps li:nth-child(2) {
        transition-delay: calc(var(--motion-stagger) * 6);
    }

    .jh-path[data-reveal-state="revealed"] .jh-path__steps li:nth-child(3) {
        transition-delay: calc(var(--motion-stagger) * 10);
    }

    /* Methodology emphasis: the conclusion is written, and uncertainty (the
       brass rule) is drawn attached to it rather than disappearing. */
    .jh-emphasis {
        position: relative;
        margin-block-start: var(--space-4);
        padding-inline-start: var(--space-5);
        padding-block-end: var(--space-3);
    }

    .jh-emphasis::before,
    .jh-emphasis::after {
        position: absolute;
        inset-inline-start: 0;
        background: var(--color-accent-primary);
        content: "";
    }

    .jh-emphasis::before {
        inset-block: 0;
        inline-size: var(--rule-w);
        transform-origin: 50% 0;
        transition: transform var(--motion-editorial) var(--ease-editorial);
    }

    .jh-emphasis::after {
        inset-block-end: 0;
        inline-size: var(--space-7);
        block-size: var(--rule-w);
        background: var(--color-accent-brass);
        transform-origin: 0 50%;
        transition: transform var(--motion-reveal) var(--ease-decelerate) calc(var(--motion-editorial) + var(--motion-stagger));
    }

    .jh-emphasis > strong {
        display: inline-block;
        clip-path: inset(0);
        transition: clip-path var(--motion-editorial) var(--ease-editorial) calc(var(--motion-stagger) * 2);
    }

    [data-reveal].jh-emphasis[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    .jh-emphasis[data-reveal-state="pending"]::before {
        transform: scaleY(0);
    }

    .jh-emphasis[data-reveal-state="pending"]::after {
        transform: scaleX(0);
    }

    .jh-emphasis[data-reveal-state="pending"] > strong {
        clip-path: inset(0 100% 0 0);
    }

    @keyframes jh-resolve {
        from {
            filter: blur(10px);
            transform: translateY(0.25em);
        }

        to {
            filter: blur(0);
            transform: none;
        }
    }

    @keyframes jh-settle {
        from {
            clip-path: inset(0 0 100% 0);
            transform: translateY(0.5em);
        }

        to {
            clip-path: inset(0);
            transform: none;
        }
    }

    @keyframes jh-recede {
        from {
            opacity: 1;
            transform: none;
        }

        to {
            opacity: 0;
            transform: translateY(calc(-1 * var(--space-4)));
        }
    }

    @keyframes jh-draw {
        from {
            transform: scaleX(0);
        }

        to {
            transform: scaleX(1);
        }
    }

    @media (min-width: 48rem) {
        .jh-symbol--transition {
            --symbol-size: 4rem;
        }

        .jh-signal:nth-child(n + 7) {
            display: block;
        }

        .jh-signal:nth-child(n + 11) {
            display: none;
        }
    }


    @media (min-width: 64rem) {
        .jh-hero,
        .jh-site-main--immersive > .jh-hero,
        .jh-home-panel--opening > .jh-hero {
            padding-block: var(--space-9);
        }

        .jh-hero--jurhen,
        .jh-site-main--immersive > .jh-hero--jurhen,
        .jh-home-panel--opening > .jh-hero--jurhen {
            padding-block: var(--space-9);
        }

        .jh-hero--jurhen .jh-hero__inner {
            grid-template-areas: "copy identity";
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        }

        .jh-hero--jurhen .jh-hero__identity--transient {
            inset-block-start: 50%;
            inset-inline-end: max(var(--gutter), calc((100% - var(--shell-max)) / 2));
            inline-size: min(36vw, 28rem);
            translate: 0 -50%;
        }

        .jh-signal {
            --signal-x: var(--tx);
            --signal-y: var(--ty);
        }

        .jh-signal:nth-child(n + 11) {
            display: block;
        }
        .jh-hero__inner {
            grid-template-areas: "copy identity";
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
            gap: var(--space-8);
        }

        .jh-hero__identity,
        .jh-hero--marketiq .jh-hero__identity {
            inline-size: 100%;
            justify-self: end;
        }

        .jh-hero--marketiq .jh-hero__identity {
            max-inline-size: 34rem;
        }

        .jh-symbol--transition {
            --symbol-size: 4.5rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        [data-arrival],
        .jh-hero--marketiq .jh-hero__statement::after,
        .jh-hero--jurhen h1::after,
        .jh-hero--jurhen .jh-hero__identity--transient {
            animation: none;
        }

        /* Reduced motion: the resolved identity, the slogan and the copy are
           shown at once; the signal field never runs. */
        .jh-hero__signals {
            display: none;
        }

        .jh-hero--jurhen {
            padding-block-start: var(--space-8);
        }

        .jh-transition[data-reveal-state],
        .jh-transition[data-reveal-state]::after {
            transform: none;
            transition: none;
        }

        .jh-symbol__once {
            display: none;
        }

        .jh-symbol[data-brand-state="once"] .jh-symbol__static {
            opacity: 1;
            transition: none;
        }

        .jh-reveal--align[data-reveal-state]::before,
        .jh-reveal--align[data-reveal-state] > *,
        .jh-reveal--converge[data-reveal-state] > *,
        .jh-path[data-reveal-state] .jh-path__steps::before,
        .jh-path[data-reveal-state] .jh-path__steps li,
        .jh-emphasis[data-reveal-state]::before,
        .jh-emphasis[data-reveal-state]::after {
            opacity: 1;
            transform: none;
            transition: none;
        }

        .jh-emphasis[data-reveal-state] > strong {
            clip-path: inset(0);
            transition: none;
        }
    }

    @media print {
        [data-arrival],
        .jh-hero--jurhen .jh-hero__identity--transient,
        .jh-hero--jurhen h1::after {
            animation: none;
        }

        .jh-hero__signals {
            display: none;
        }

        /* Silver is a dark-surface accent; on paper the slogan prints in ink. */
        .jh-hero--jurhen .jh-hero__copy h1 {
            background: none;
            color: inherit;
            -webkit-text-fill-color: inherit;
        }

        .jh-transition[data-reveal-state],
        .jh-transition[data-reveal-state]::after {
            transform: none;
        }

        .jh-reveal--align[data-reveal-state]::before,
        .jh-reveal--align[data-reveal-state] > *,
        .jh-reveal--converge[data-reveal-state] > *,
        .jh-path[data-reveal-state] .jh-path__steps::before,
        .jh-path[data-reveal-state] .jh-path__steps li,
        .jh-emphasis[data-reveal-state]::before,
        .jh-emphasis[data-reveal-state]::after {
            opacity: 1;
            transform: none;
        }

        .jh-emphasis[data-reveal-state] > strong {
            clip-path: inset(0);
        }
    }
}

@layer components {
    /* ------------------------------------------------------------------
       J7-C2B visual storytelling. Procedural, token-coloured inline SVG
       systems; every duration and easing comes from tokens. */

    /* Evidence field: urban plan in perspective behind the hero copy. */
    .jh-hero__field {
        position: absolute;
        inset: -12% -8% -18%;
        color: var(--color-accent-primary);
        perspective: 1100px;
        pointer-events: none;
    }

    .jh-hero__field--product {
        color: var(--color-text-inverse-secondary);
    }

    .jh-field {
        inline-size: 100%;
        block-size: 100%;
        transform: rotateX(44deg) translateY(2%) scale(1.12);
        transform-origin: 50% 100%;
        animation: jh-drift var(--motion-ambient) var(--ease-standard) infinite alternate;
    }

    .jh-field__line {
        opacity: 0.28;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: jh-trace var(--motion-sequence) var(--ease-editorial) calc(var(--motion-stagger) * var(--i) * 0.45) both;
    }

    .jh-field__point {
        opacity: 0;
        transform: translate(var(--dx), var(--dy));
        transform-box: fill-box;
        transform-origin: center;
        animation: jh-converge var(--motion-identity-settle) var(--ease-decelerate) calc(var(--motion-stagger) * var(--i) * 0.2) both;
    }

    .jh-field__signal {
        opacity: 1;
        stroke-width: 3;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: jh-trace calc(var(--motion-sequence) * 1.5) var(--ease-editorial) calc(var(--motion-identity-settle) + var(--motion-sequence) * var(--i) * 0.6) both;
    }

    /* Cinematic media sits at the bottom of the media layer; the grade and the
       legibility veil are drawn above it. */
    .jh-hero__media > .jh-media--cinematic {
        z-index: 0;
        isolation: isolate;
    }

    /* Restrained navy grade over real media: atmosphere, not a black filter. */
    .jh-hero__media[data-hero-media="cinematic"]::before {
        position: absolute;
        z-index: 1;
        inset: 0;
        background: color-mix(in srgb, var(--palette-deep-navy) 58%, transparent);
        mix-blend-mode: multiply;
        content: "";
    }

    /* Legibility veil: copy side stays deep navy, the media lives to the right. */
    .jh-hero__media::after {
        position: absolute;
        z-index: 2;
        inset: 0;
        background: linear-gradient(
            100deg,
            var(--palette-deep-navy) 0%,
            color-mix(in srgb, var(--palette-deep-navy) 80%, transparent) 38%,
            color-mix(in srgb, var(--palette-deep-navy) 20%, transparent) 64%,
            transparent 100%
        );
        content: "";
    }

    /* Path marker (evidence -> interpretation -> decision figure). */
    .jh-path__steps::after {
        position: absolute;
        inset-block-start: calc(-1 * var(--space-1));
        inset-inline-start: 0;
        inline-size: var(--space-3);
        block-size: var(--space-3);
        border-radius: 50%;
        background: var(--color-accent-brass);
        transform: translateX(0);
        transition: transform calc(var(--motion-sequence) * 2) var(--ease-editorial) calc(var(--motion-sequence) * 0.5);
        content: "";
    }

    .jh-path[data-reveal-state="revealed"] .jh-path__steps::after,
    .jh-path:not([data-reveal-state]) .jh-path__steps::after {
        transform: translateX(calc(100% * 2 + var(--space-4) * 2));
    }

    /* Uncertainty statement (owner authority pass 2026-09-24): one typographic
       navy block — the conclusion written at display scale with its brass rule
       drawn beneath it. The earlier range figure was rejected; no graphic. */
    .jh-moment {
        display: grid;
        padding: var(--space-7) var(--space-6);
        background: var(--gradient-analytical-primary);
        color: var(--color-text-primary);
    }

    .jh-moment .jh-emphasis {
        margin: 0;
        padding-inline-start: 0;
        padding-block-end: var(--space-5);
        font-size: var(--text-display);
        letter-spacing: var(--tracking-display);
        line-height: var(--leading-h1);
    }

    .jh-moment .jh-emphasis::before {
        display: none;
    }

    .jh-moment .jh-emphasis::after {
        inline-size: var(--space-8);
    }

    [data-reveal].jh-moment[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    .jh-country-group > h2 {
        font-size: var(--text-display);
        letter-spacing: var(--tracking-display);
        line-height: var(--leading-h1);
    }

    .jh-discovery__item--current > a::before,
    .jh-discovery__item--soon > span:first-child::before {
        display: inline-block;
        inline-size: var(--space-2);
        block-size: var(--space-2);
        margin-inline-end: var(--space-2);
        border-radius: 50%;
        vertical-align: middle;
        content: "";
    }

    .jh-discovery__item--current > a::before {
        background: var(--color-accent-primary);
    }

    .jh-discovery__item--soon > span:first-child::before {
        border: var(--border-w) dashed var(--color-border-strong);
    }

    @keyframes jh-trace {
        to {
            stroke-dashoffset: 0;
        }
    }

    @keyframes jh-converge {
        to {
            opacity: 0.9;
            transform: none;
        }
    }

    @keyframes jh-drift {
        from {
            translate: 0 0;
        }

        to {
            translate: 0 -2.5%;
        }
    }

    @media (min-width: 48rem) {
        .jh-moment {
            padding: var(--space-8) var(--space-7);
        }
    }

    @media (min-width: 64rem) {
        .jh-moment .jh-emphasis {
            max-inline-size: 22ch;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .jh-field,
        .jh-field__line,
        .jh-field__point,
        .jh-field__signal {
            animation: none;
        }

        .jh-field__line,
        .jh-field__signal {
            stroke-dashoffset: 0;
        }

        .jh-field__point {
            opacity: 0.9;
            transform: none;
        }

        .jh-hero__identity--product .jh-identity {
            animation: none;
        }

        .jh-path__steps::after {
            transition: none;
        }
    }
}

@layer components {
    /* J7-C2C real-media primitives. Media is context, never evidence. */
    .jh-media {
        position: relative;
        margin: 0;
        overflow: clip;
        background: var(--palette-deep-navy);
    }

    .jh-media > img,
    .jh-media > video {
        display: block;
        inline-size: 100%;
        block-size: auto;
    }

    .jh-media--cover {
        block-size: 100%;
    }

    .jh-media--cover > img,
    .jh-media--cover > video {
        position: absolute;
        inset: 0;
        block-size: 100%;
        object-fit: cover;
    }

    .jh-media--cinematic .jh-media__poster {
        z-index: 0;
    }

    .jh-media--cinematic .jh-media__video {
        z-index: 1;
    }

    .jh-media__caption {
        margin-block-start: var(--space-3);
        color: var(--color-text-secondary);
        font-size: var(--text-body-small);
        line-height: var(--leading-body-small);
    }

    .jh-media-band {
        position: relative;
        inline-size: 100vw;
        margin-inline-start: calc(50% - 50vw);
        margin-block: var(--space-7);
        block-size: clamp(16rem, 42vw, 34rem);
    }

    .jh-media-band > .jh-media {
        clip-path: inset(0 0 0 0);
        transition: clip-path calc(var(--motion-sequence) * 1.2) var(--ease-editorial);
    }

    .jh-media-band--contained {
        inline-size: 100%;
        margin-inline-start: 0;
        margin-block: var(--space-6);
        block-size: clamp(14rem, 34vw, 26rem);
    }

    .jh-media-band > .jh-media {
        block-size: 100%;
    }

    [data-reveal].jh-media-band[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    .jh-media-band[data-reveal-state="pending"] > .jh-media {
        clip-path: inset(0 0 100% 0);
    }

    .jh-hero__media > .jh-media--cinematic {
        position: absolute;
        inset: 0;
        block-size: auto;
    }

    /* Slow cinematic settle: the cover drifts and gently scales while the identity resolves. */
    .jh-hero__media > .jh-media--cinematic > .jh-media__video,
    .jh-hero__media > .jh-media--cinematic > .jh-media__poster {
        animation: jh-cinematic var(--motion-ambient) var(--ease-standard) both;
    }

    @keyframes jh-cinematic {
        from {
            transform: scale(1.08) translateY(1%);
        }

        to {
            transform: scale(1) translateY(0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        /* Poster still instead of motion media. */
        .jh-media--cinematic .jh-media__video {
            display: none;
        }

        .jh-hero__media > .jh-media--cinematic > .jh-media__poster,
        .jh-hero__media > .jh-media--cinematic > .jh-media__video {
            animation: none;
        }

        .jh-media-band[data-reveal-state] > .jh-media {
            clip-path: inset(0);
            transition: none;
        }
    }

    @media print {
        .jh-media--cinematic .jh-media__video {
            display: none;
        }
    }
}

@layer components {
    /* J7-C2D visual density: rhythm built from the existing language only. */

    /* Statement moment: an existing sentence elevated and written in view. */
    .jh-statement-line {
        position: relative;
        max-inline-size: 26ch;
        margin-block: var(--space-4) var(--space-2);
        padding-block-start: var(--space-4);
        font-family: var(--font-display);
        font-size: var(--text-h2);
        font-weight: var(--weight-display-bold);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
        clip-path: inset(0);
        transition: clip-path var(--motion-editorial) var(--ease-editorial) var(--motion-stagger);
    }

    .jh-statement-line::before {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: var(--space-8);
        block-size: var(--rule-w);
        background: var(--color-accent-brass);
        transform-origin: 0 50%;
        transition: transform var(--motion-editorial) var(--ease-editorial);
        content: "";
    }

    /* Observed by the parent section: an element clipped to zero width can never
       intersect, so the statement follows the section's reveal state. */
    .jh-reveal--align[data-reveal-state="pending"] .jh-statement-line {
        clip-path: inset(0 100% 0 0);
    }

    .jh-reveal--align[data-reveal-state="pending"] .jh-statement-line::before {
        transform: scaleX(0);
    }

    /* Advisory (owner rebuild 2026-09-23): client-value architecture on real
       media — a cinematic hero, three outcomes, the perspective resolve, an
       editorial situations list, an audience matrix, the step narrative, the
       MarketIQ / Advisory pairing and a navy closing section. No abstract line
       or node drawings. Reduced motion and no-JS read every final state. */

    /* Hero: large asymmetric type over the media; the copy owns the left and
       steps to the right below the headline. */
    .jh-site-main--immersive > .jh-hero--advisory {
        padding-block: var(--space-9) var(--space-8);
    }

    .jh-hero--advisory .jh-hero__inner {
        grid-template-areas: "copy";
        grid-template-columns: minmax(0, 1fr);
    }

    .jh-hero--advisory .jh-hero__copy {
        display: grid;
        gap: var(--space-4);
        max-inline-size: none;
    }

    .jh-hero--advisory .jh-hero__copy > * {
        margin: 0;
    }

    /* Inside data-tone="inverse" the semantic tokens are already swapped
       (primary = paper, secondary = silver), so the copy uses those. */
    .jh-hero--advisory .jh-hero__copy .jh-label {
        color: var(--color-text-secondary);
    }

    .jh-hero--advisory .jh-hero__copy h1 {
        max-inline-size: 22ch;
        color: var(--color-text-primary);
    }

    .jh-hero--advisory .jh-hero__lede {
        max-inline-size: 44ch;
        color: var(--color-text-primary);
    }

    .jh-hero__support {
        max-inline-size: 44ch;
        color: var(--color-text-secondary);
    }

    .jh-hero__actions {
        padding-block-start: var(--space-2);
    }

    .jh-hero__cta,
    .jh-advisory-cta__button {
        display: inline-flex;
        align-items: center;
        min-block-size: 3rem;
        padding-inline: var(--space-6);
        border-radius: var(--radius-sm);
        background: var(--color-action-secondary);
        color: var(--color-action-secondary-text);
        font-weight: var(--weight-body-semibold);
        text-decoration: none;
        transition:
            background-color var(--motion-fast) var(--ease-standard),
            color var(--motion-fast) var(--ease-standard);
    }

    .jh-hero__cta:hover,
    .jh-advisory-cta__button:hover {
        background: var(--color-accent-silver);
        color: var(--palette-deep-navy);
        text-decoration: none;
    }

    .jh-hero__cta:focus-visible,
    .jh-advisory-cta__button:focus-visible {
        outline: var(--rule-w) solid var(--color-focus-inverse);
        outline-offset: var(--space-1);
    }

    /* A still in the hero media layer settles like the cinematic cover. */
    .jh-hero__media > .jh-media--editorial {
        position: absolute;
        inset: 0;
        margin: 0;
        block-size: auto;
    }

    .jh-hero__media > .jh-media--editorial > img {
        animation: jh-cinematic var(--motion-ambient) var(--ease-standard) both;
    }

    /* Page rhythm: one section per beat, section spacing between them. */
    .jh-advisory {
        --stack-space: var(--section-space);
    }

    .jh-site-main--immersive > .jh-shell:has(> .jh-advisory) {
        padding-block-start: var(--space-7);
    }

    /* Audience applicability: one understated line after the hero. */
    .jh-advisory__applicability {
        max-inline-size: 64ch;
        margin: 0 0 calc(-1 * var(--space-5));
        color: var(--color-text-secondary);
        font-size: var(--text-body-large);
        line-height: var(--leading-body-large);
    }

    .jh-advisory__section {
        scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
    }

    .jh-advisory__section > h2,
    .jh-fits__intro > h2,
    .jh-method__intro > h2 {
        max-inline-size: 24ch;
        margin: 0;
    }

    /* What becomes clearer: three outcomes, typography and space only. */
    .jh-outcomes {
        display: grid;
        gap: var(--space-6);
    }

    .jh-outcomes__grid {
        display: grid;
        gap: var(--space-5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-outcomes__item {
        display: grid;
        gap: var(--space-3);
        margin: 0;
        padding-block-start: var(--space-4);
        border-block-start: var(--border-w) solid var(--color-border-strong);
        transition:
            opacity var(--motion-reveal) var(--ease-standard),
            transform var(--motion-reveal) var(--ease-decelerate);
        transition-delay: calc(var(--motion-stagger) * (var(--i) + 1) * 2);
    }

    .jh-outcomes__label {
        margin: 0;
        color: var(--color-action-primary);
        font-family: var(--font-metadata);
        font-size: var(--text-label);
        font-weight: var(--weight-body-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
        text-transform: uppercase;
    }

    .jh-outcomes__item > p {
        margin: 0;
        max-inline-size: 34ch;
        font-size: var(--text-body-large);
        line-height: var(--leading-body-large);
    }

    [data-reveal].jh-outcomes[data-reveal-state="pending"],
    [data-reveal].jh-pairing[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    .jh-outcomes[data-reveal-state="pending"] .jh-outcomes__item,
    .jh-pairing[data-reveal-state="pending"] .jh-pairing__field {
        opacity: 0;
        transform: translateY(var(--space-3));
        transition: none;
    }

    /* Perspective resolve: one real scene through three layers. Pending, two
       partial zoomed perspectives overlap and compete over a dimmed full view;
       revealed, they settle into place and recede while the full reading
       becomes dominant. The copy sits in a navy panel. */
    .jh-resolve {
        display: grid;
    }

    .jh-resolve__field {
        position: relative;
        aspect-ratio: 4 / 5;
        margin: 0;
        overflow: clip;
        background: var(--palette-deep-navy);
    }

    .jh-resolve__layer {
        position: absolute;
        inset: 0;
        overflow: clip;
    }

    .jh-resolve__layer > img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
    }

    .jh-resolve__layer--scene {
        opacity: 1;
        scale: 1;
        transition:
            opacity var(--motion-sequence) var(--ease-editorial),
            scale var(--motion-sequence) var(--ease-editorial);
    }

    .jh-resolve__layer--north,
    .jh-resolve__layer--south {
        opacity: 0;
        translate: 0 0;
        box-shadow: inset 0 0 0 var(--border-w) color-mix(in srgb, var(--palette-paper) 55%, transparent);
        transition:
            translate var(--motion-sequence) var(--ease-editorial),
            opacity var(--motion-editorial) var(--ease-standard) calc(var(--motion-sequence) * 0.7);
    }

    .jh-resolve__layer--north {
        inset: 5% 40% 36% 4%;
    }

    /* Detail: the pavilion and playground inside the canopy. */
    .jh-resolve__layer--north > img {
        object-position: 40% 48%;
        scale: 1.5;
        transform-origin: 40% 48%;
    }

    .jh-resolve__layer--south {
        inset: 32% 3% 6% 42%;
        transition-delay: calc(var(--motion-stagger) * 2), calc(var(--motion-sequence) * 0.7 + var(--motion-stagger) * 3);
    }

    /* Relationship: the streets and buildings where the block meets the park. */
    .jh-resolve__layer--south > img {
        object-position: 88% 16%;
        scale: 1.4;
        transform-origin: 88% 16%;
    }

    [data-reveal].jh-resolve__field[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    /* Entering the pending state is instant (no transition back from the
       final values); only the reveal animates. */
    .jh-resolve__field[data-reveal-state="pending"] .jh-resolve__layer--scene {
        opacity: 0.55;
        scale: 1.04;
        transition: none;
    }

    .jh-resolve__field[data-reveal-state="pending"] .jh-resolve__layer--north {
        opacity: 1;
        translate: -3% -4%;
        transition: none;
    }

    .jh-resolve__field[data-reveal-state="pending"] .jh-resolve__layer--south {
        opacity: 1;
        translate: 3% 5%;
        transition: none;
    }

    .jh-resolve__panel {
        display: grid;
        gap: var(--space-3);
        padding: var(--space-6) var(--space-5);
        background: var(--palette-navy);
        color: var(--color-text-inverse);
    }

    .jh-resolve__panel > * {
        margin: 0;
    }

    .jh-resolve__heading {
        color: var(--color-text-inverse-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-label);
        font-weight: var(--weight-body-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
        text-transform: uppercase;
    }

    .jh-resolve__lead {
        max-inline-size: 22ch;
        font-family: var(--font-display);
        font-size: var(--text-h3);
        font-weight: var(--weight-display-semibold);
        letter-spacing: var(--tracking-h3);
        line-height: var(--leading-h3);
    }

    .jh-resolve__panel > p:not(.jh-resolve__lead) {
        max-inline-size: 48ch;
        color: var(--color-text-inverse-secondary);
    }

    /* When Advisory fits: an editorial interactive list. Phones: disclosures;
       desktop: numbered titles on the left, one navy stage on the right. */
    .jh-fits {
        display: grid;
        gap: var(--space-6);
    }

    .jh-fits__intro,
    .jh-method__intro {
        display: grid;
        gap: var(--space-3);
        max-inline-size: 60ch;
    }

    .jh-fits__intro > *,
    .jh-method__intro > * {
        margin: 0;
    }

    .jh-situations__list {
        display: grid;
        margin: 0;
        padding: 0;
        border-block-start: var(--border-w) solid var(--color-border-strong);
        list-style: none;
    }

    .jh-situations__item {
        display: grid;
        margin: 0;
    }

    .jh-situations__title {
        margin: 0;
        font-size: var(--text-body);
        line-height: var(--leading-body);
    }

    .jh-situations__trigger {
        display: flex;
        inline-size: 100%;
        align-items: baseline;
        gap: var(--space-4);
        min-block-size: 3.5rem;
        padding: var(--space-4) var(--space-2) var(--space-4) 0;
        border: 0;
        border-block-end: var(--border-w) solid var(--color-border);
        border-inline-start: var(--rule-w) solid transparent;
        border-radius: 0;
        background: transparent;
        color: var(--color-text-primary);
        cursor: pointer;
        font: inherit;
        text-align: start;
        transition:
            color var(--motion-standard) var(--ease-standard),
            border-color var(--motion-standard) var(--ease-standard);
    }

    .jh-situations__trigger::after {
        flex: 0 0 auto;
        inline-size: 0.5rem;
        block-size: 0.5rem;
        margin-inline-start: auto;
        border-inline-end: var(--border-w) solid currentColor;
        border-block-end: var(--border-w) solid currentColor;
        opacity: 0.6;
        transform: translateY(-0.2rem) rotate(45deg);
        transition: transform var(--motion-standard) var(--ease-standard);
        content: "";
    }

    .jh-situations__index {
        flex: 0 0 auto;
        min-inline-size: 2.5ch;
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-semibold);
        letter-spacing: var(--tracking-metadata);
    }

    .jh-situations__name {
        font-family: var(--font-display);
        font-size: var(--text-h4);
        font-weight: var(--weight-display-semibold);
        letter-spacing: var(--tracking-h4);
        line-height: var(--leading-h4);
    }

    .jh-situations__trigger:hover,
    .jh-situations__trigger:focus-visible {
        color: var(--color-action-primary);
    }

    .jh-situations__trigger:focus-visible {
        outline: var(--rule-w) solid var(--color-focus);
        outline-offset: calc(-1 * var(--rule-w));
    }

    .jh-situations__item[data-active] .jh-situations__trigger {
        color: var(--color-action-primary);
    }

    .jh-situations__item[data-active] .jh-situations__index {
        color: var(--color-action-primary);
    }

    .jh-situations__item[data-active] .jh-situations__trigger::after {
        transform: translateY(0.1rem) rotate(-135deg);
    }

    .jh-situations__panel {
        display: grid;
        gap: var(--space-3);
        padding: var(--space-5) var(--space-4) var(--space-6);
        background: var(--palette-navy);
        color: var(--color-text-inverse);
    }

    .jh-situations__panel > p {
        margin: 0;
    }

    .jh-situations__stage-index,
    .jh-situations__stage-title {
        display: none;
    }

    .jh-situations__body {
        max-inline-size: 44ch;
        font-size: var(--text-body-large);
        line-height: var(--leading-body-large);
    }

    .js .jh-situations__item:not([data-active]) .jh-situations__panel {
        display: none;
    }

    .js .jh-situations__item[data-active] .jh-situations__panel {
        animation: jh-settle var(--motion-standard) var(--ease-decelerate) both;
    }

    /* How we work: the Jurhen Advisory Method as a step narrative. Phones and
       no-JS: stacked steps; desktop: a sticky rail and large steps, the one
       nearest the middle of the viewport active. */
    .jh-method {
        display: grid;
        gap: var(--space-6);
    }

    .jh-method__rail {
        display: none;
    }

    .jh-method__steps {
        display: grid;
        gap: var(--space-6);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-method__step {
        display: grid;
        gap: var(--space-3);
        margin: 0;
        padding-block-start: var(--space-4);
        border-block-start: var(--border-w) solid var(--color-border-strong);
    }

    .jh-method__step > * {
        margin: 0;
    }

    .jh-method__index {
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-semibold);
        letter-spacing: var(--tracking-metadata);
    }

    .jh-method__step > h3 {
        max-inline-size: 18ch;
        font-family: var(--font-display);
        font-size: var(--text-h2);
        font-weight: var(--weight-display-bold);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    .jh-method__step > p:last-child {
        max-inline-size: 52ch;
        font-size: var(--text-body-large);
        line-height: var(--leading-body-large);
    }

    /* The transversal principle: its own block after the step system ends. */
    .jh-method__principle {
        display: grid;
        gap: var(--space-3);
        margin-block-start: var(--space-4);
        padding: var(--space-6);
        border-inline-start: calc(var(--rule-w) * 2) solid var(--color-action-primary);
        background: var(--color-surface);
    }

    .jh-method__principle > * {
        margin: 0;
    }

    .jh-method__principle > h3 {
        font-family: var(--font-display);
        font-size: var(--text-h3);
        font-weight: var(--weight-display-bold);
        letter-spacing: var(--tracking-h3);
        line-height: var(--leading-h3);
    }

    .jh-method__principle > p {
        max-inline-size: 52ch;
    }

    /* MarketIQ + Advisory: two editorial fields under one shared rule. */
    .jh-pairing {
        display: grid;
        gap: var(--space-6);
    }

    .jh-pairing__fields {
        display: grid;
        gap: var(--space-6);
        padding-block-start: var(--space-6);
        border-block-start: var(--rule-w) solid var(--color-action-primary);
    }

    .jh-pairing__field {
        display: grid;
        gap: var(--space-3);
        align-content: start;
        transition:
            opacity var(--motion-reveal) var(--ease-standard),
            transform var(--motion-reveal) var(--ease-decelerate);
        transition-delay: calc(var(--motion-stagger) * (var(--i) + 1) * 2);
    }

    .jh-pairing__field > * {
        margin: 0;
    }

    .jh-pairing__field > h3 {
        font-family: var(--font-display);
        font-size: var(--text-h2);
        font-weight: var(--weight-display-bold);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    .jh-pairing__body {
        max-inline-size: 40ch;
        font-size: var(--text-body-large);
        line-height: var(--leading-body-large);
    }

    .jh-pairing__traits {
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-label);
        font-weight: var(--weight-body-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
        text-transform: uppercase;
    }

    .jh-pairing__link {
        padding-block-start: var(--space-2);
    }

    .jh-pairing__link > a {
        color: var(--color-action-primary);
        font-weight: var(--weight-body-semibold);
        text-underline-offset: 0.2em;
    }

    /* Closing section: the next action, navy, at rest. */
    .jh-advisory-cta {
        display: grid;
        gap: var(--space-5);
        padding: var(--space-7) var(--space-6);
        background: var(--palette-navy);
        color: var(--color-text-primary);
    }

    .jh-advisory-cta__copy {
        display: grid;
        gap: var(--space-3);
    }

    .jh-advisory-cta__copy > * {
        margin: 0;
    }

    .jh-advisory-cta__copy > h2 {
        max-inline-size: 18ch;
        color: var(--color-text-primary);
    }

    .jh-advisory-cta__copy > p {
        max-inline-size: 44ch;
        color: var(--color-text-secondary);
    }

    .jh-advisory-cta__action {
        margin: 0;
    }

    /* Print: the resolve prints resolved whether or not it was revealed. */
    @media print {
        .jh-resolve__field[data-reveal-state] .jh-resolve__layer--scene {
            opacity: 1;
            scale: 1;
        }

        .jh-resolve__field[data-reveal-state] .jh-resolve__layer--north,
        .jh-resolve__field[data-reveal-state] .jh-resolve__layer--south {
            opacity: 0;
        }
    }

    @media (min-width: 48rem) {
        .jh-outcomes__grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--space-6);
        }

        .jh-outcomes__item {
            padding: var(--space-1) 0 0 var(--space-5);
            border-block-start: 0;
            border-inline-start: var(--border-w) solid var(--color-border-strong);
        }

        .jh-outcomes__item:first-child {
            padding-inline-start: 0;
            border-inline-start-color: transparent;
        }

        .jh-resolve__field {
            aspect-ratio: 16 / 9;
        }

        .jh-situations__list {
            grid-template-columns: minmax(14rem, 5fr) minmax(0, 7fr);
            grid-template-rows: repeat(var(--count, 5), auto);
            column-gap: var(--space-6);
            align-items: stretch;
            border-block-start: 0;
        }

        .jh-situations__item {
            display: contents;
        }

        .jh-situations__title {
            grid-column: 1;
        }

        .jh-situations__item:first-child .jh-situations__trigger {
            border-block-start: var(--border-w) solid var(--color-border-strong);
        }

        .jh-situations__trigger::after {
            display: none;
        }

        /* The active mark is the colour of an always-present edge, so no row
           ever changes size when the selection moves. */
        .jh-situations__trigger {
            padding-inline-start: var(--space-3);
        }

        .jh-situations__item[data-active] .jh-situations__trigger {
            border-inline-start-color: var(--color-action-primary);
        }

        .jh-situations__panel {
            grid-column: 2;
            grid-row: 1 / -1;
            align-self: stretch;
            align-content: center;
            gap: var(--space-4);
            padding: var(--space-7) var(--space-8);
        }

        /* A height floor for the list keeps the stage the same size for every
           explanation, so nothing below moves when the active situation changes. */
        .jh-situations__list {
            min-block-size: 30rem;
        }

        .jh-situations__stage-index {
            display: block;
            color: var(--color-accent-silver);
            font-family: var(--font-display);
            font-size: var(--text-display);
            font-weight: var(--weight-display-bold);
            letter-spacing: var(--tracking-display);
            line-height: 1;
        }

        .jh-situations__stage-title {
            display: block;
            max-inline-size: 18ch;
            font-family: var(--font-display);
            font-size: var(--text-h2);
            font-weight: var(--weight-display-bold);
            letter-spacing: var(--tracking-h2);
            line-height: var(--leading-h2);
        }

        .jh-pairing__fields {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: var(--space-8);
        }

        .jh-pairing__field + .jh-pairing__field {
            padding-inline-start: var(--space-6);
            border-inline-start: var(--border-w) solid var(--color-border-strong);
        }

        .jh-advisory-cta {
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            padding: var(--space-8);
        }
    }

    @media (min-width: 64rem) {
        .jh-hero--advisory .jh-hero__inner {
            min-block-size: 30rem;
            align-content: center;
        }

        /* Owner authority pass 2026-09-24: one reading column on the veiled
           side of the media — eyebrow, headline, lede, support and the action
           stack on the left in reading order; the turbines own the right. */
        .jh-hero--advisory .jh-hero__copy {
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
            column-gap: var(--space-8);
        }

        .jh-hero--advisory .jh-hero__copy > * {
            grid-column: 1;
        }

        .jh-hero--advisory .jh-hero__lede {
            max-inline-size: 46ch;
            padding-block-start: var(--space-3);
        }

        .jh-hero--advisory .jh-hero__support {
            max-inline-size: 46ch;
        }

        .jh-resolve__field,
        .jh-resolve__panel {
            grid-area: 1 / 1;
        }

        .jh-resolve__field {
            aspect-ratio: 16 / 8;
        }

        .jh-resolve__panel {
            z-index: 1;
            align-self: end;
            justify-self: start;
            max-inline-size: 36rem;
            margin: 0 0 var(--space-6) var(--space-6);
            padding: var(--space-6);
            background: color-mix(in srgb, var(--palette-deep-navy) 80%, transparent);
        }

        .jh-situations__list {
            min-block-size: 26rem;
        }

        .jh-method__narrative {
            display: grid;
            grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
            column-gap: var(--space-8);
            align-items: start;
        }

        .jh-method__rail {
            position: sticky;
            inset-block-start: var(--space-8);
            display: block;
        }

        .jh-method__rail ol {
            display: grid;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .jh-method__rail li {
            margin: 0;
        }

        .jh-method__rail a {
            display: grid;
            grid-template-columns: 3ch minmax(0, 1fr);
            gap: var(--space-3);
            align-items: baseline;
            padding: var(--space-3) 0;
            border-block-start: var(--border-w) solid var(--color-border);
            color: var(--color-text-secondary);
            text-decoration: none;
            transition:
                color var(--motion-standard) var(--ease-standard),
                border-color var(--motion-standard) var(--ease-standard);
        }

        .jh-method__rail a:hover,
        .jh-method__rail a:focus-visible {
            color: var(--color-text-primary);
        }

        .jh-method__rail a:focus-visible {
            outline: var(--rule-w) solid var(--color-focus);
            outline-offset: var(--space-1);
        }

        .jh-method__rail-index {
            font-family: var(--font-metadata);
            font-size: var(--text-metadata);
            font-weight: var(--weight-metadata-semibold);
            letter-spacing: var(--tracking-metadata);
        }

        .jh-method__rail-name {
            font-family: var(--font-display);
            font-size: var(--text-h4);
            font-weight: var(--weight-display-semibold);
            letter-spacing: var(--tracking-h4);
            line-height: var(--leading-h4);
        }

        .jh-method__rail li[data-active] a {
            border-block-start-color: var(--color-action-primary);
            color: var(--color-text-primary);
        }

        .jh-method__steps {
            gap: var(--space-6);
        }

        /* Each step starts on the rail's first line and holds about a third of
           the viewport: a clear active state without slow scrolling. */
        .jh-method__step {
            min-block-size: 34vh;
            align-content: start;
            padding-block: var(--space-3) var(--space-6);
            border-block-start: 0;
            transition: opacity var(--motion-reveal) var(--ease-standard);
        }

        .jh-method__step > h3 {
            max-inline-size: 14ch;
            font-size: var(--text-display);
            letter-spacing: var(--tracking-display);
            line-height: var(--leading-display);
        }

        .js .jh-method__narrative[data-narrative-ready] .jh-method__step:not([data-active]) {
            opacity: 0.38;
        }

        .jh-method__principle {
            margin-block-start: var(--space-6);
        }
    }

    /* MarketIQ lenses: a spatial grid instead of a stack. */
    .jh-section--lenses > .jh-stack {
        display: grid;
        gap: var(--space-5) var(--space-7);
    }

    .jh-section--lenses > .jh-stack > div {
        padding-block-start: var(--space-3);
        border-block-start: var(--border-w) solid var(--color-border);
    }

    .jh-section--lenses > .jh-stack h3 {
        margin-block-end: var(--space-2);
    }


    @media (min-width: 48rem) {
        .jh-section--lenses > .jh-stack {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

    }


    @media (prefers-reduced-motion: reduce) {
        .jh-publications .jh-publications__masthead h1 {
            animation: none;
        }

        .jh-paths[data-reveal-state] .jh-paths__item,
        .jh-publication-list[data-reveal-state] .jh-publication {
            opacity: 1;
            transform: none;
            transition: none;
        }

        .jh-reveal--align[data-reveal-state] .jh-statement-line {
            clip-path: inset(0);
            transition: none;
        }

        .jh-reveal--align[data-reveal-state] .jh-statement-line::before {
            transform: none;
            transition: none;
        }

        /* Advisory rebuild: every section, layer and step in its final state. */
        .jh-outcomes[data-reveal-state] .jh-outcomes__item,
        .jh-pairing[data-reveal-state] .jh-pairing__field {
            opacity: 1;
            transform: none;
            transition: none;
        }

        .jh-resolve__field[data-reveal-state] .jh-resolve__layer--scene,
        .jh-resolve__field:not([data-reveal-state]) .jh-resolve__layer--scene {
            opacity: 1;
            scale: 1;
            transition: none;
        }

        .jh-resolve__field[data-reveal-state] .jh-resolve__layer--north,
        .jh-resolve__field[data-reveal-state] .jh-resolve__layer--south,
        .jh-resolve__field:not([data-reveal-state]) .jh-resolve__layer--north,
        .jh-resolve__field:not([data-reveal-state]) .jh-resolve__layer--south {
            opacity: 0;
            translate: 0 0;
            transition: none;
        }

        .jh-hero__media > .jh-media--editorial > img {
            animation: none;
        }

        .jh-method__step,
        .jh-method__rail a,
        .jh-situations__trigger,
        .jh-situations__trigger::after,
        .jh-hero__cta,
        .jh-advisory-cta__button {
            transition: none;
        }

        .js .jh-method__narrative[data-narrative-ready] .jh-method__step:not([data-active]) {
            opacity: 1;
        }

        .js .jh-situations__item[data-active] .jh-situations__panel {
            animation: none;
        }

        /* Institutional pages: statements and the values stage in final state. */
        .jh-statement-block[data-reveal-state]::before,
        .jh-statement-block[data-reveal-state] .jh-statement-block__label,
        .jh-statement-block[data-reveal-state] .jh-statement-block__text,
        .jh-practice[data-reveal-state] .jh-practice__field {
            opacity: 1;
            transform: none;
            transition: none;
        }

        .jh-values .jh-values__trigger,
        .jh-values .jh-values__trigger::after {
            transition: none;
        }

        .js .jh-values .jh-values__item[data-active] .jh-values__panel {
            animation: none;
        }

    }
}

@layer components {
    /* Owner visual review 2026-09-12 (Home): hierarchy, editorial storytelling,
       fewer decorative devices. The slogan stays the dominant anchor. */

    /* Mobile hero: the slogan spans the full width, so the legibility veil turns
       vertical — media breathes above the copy, deep navy behind it. */
    .jh-hero--jurhen .jh-hero__media::after {
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--palette-deep-navy) 28%, transparent) 0%,
            color-mix(in srgb, var(--palette-deep-navy) 48%, transparent) 18%,
            color-mix(in srgb, var(--palette-deep-navy) 84%, transparent) 30%,
            color-mix(in srgb, var(--palette-deep-navy) 86%, transparent) 100%
        );
    }

    /* Home narrative: no rule above a section, no rule beside a linked heading.
       Emphasis comes from scale, spacing and the figures. */
    .jh-narrative--home .jh-reveal--align::before,
    .jh-narrative--home .jh-section-link::after {
        content: none;
    }

    /* Second statement: a full-width editorial event. The aperture spans the
       content width; the statement settles into a panel overlapping the image. */
    .jh-thesis--aperture {
        display: block;
    }

    .jh-thesis__copy {
        display: grid;
        gap: var(--space-3);
    }

    .jh-thesis__copy > * {
        margin-block: 0;
    }

    .jh-thesis p {
        max-inline-size: 32ch;
        font-size: var(--text-h3);
        font-weight: var(--weight-display-medium);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    /* Home rhythm and blocks (owner review 2026-09-14): hero, aperture, the
       two services side by side, Methodology as its own institutional note,
       one CTA. Typography, proportion and whitespace only. */
    .jh-narrative--home {
        --stack-space: var(--space-8);
    }

    .jh-services {
        display: grid;
        gap: var(--space-7);
    }

    .jh-service {
        align-content: start;
        gap: var(--space-3);
    }

    .jh-service h2 {
        font-size: var(--text-h2);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    .jh-service p {
        max-inline-size: 36ch;
    }

    /* Methodology: how evidence and uncertainty are evaluated — not a service.
       Inverse typographic regime to the services (label heading, statement-scale
       thought), a quieter surface and a narrower measure mark the category. */
    .jh-epistemic {
        gap: var(--space-4);
        max-inline-size: 60rem;
        padding: var(--space-7) var(--space-6);
        border-block: var(--border-w) solid var(--color-border);
        background: var(--color-surface);
    }

    .jh-epistemic h2 {
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-label);
        font-weight: var(--weight-body-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
        text-transform: uppercase;
    }

    .jh-epistemic p {
        max-inline-size: 40ch;
        font-family: var(--font-display);
        font-size: var(--text-h3);
        font-weight: var(--weight-display-medium);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    /* Talk to us: the next action, not another section — a navy band with the
       approved sentence and the contact link as its button. */
    .jh-home-cta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4) var(--space-6);
        padding: var(--space-6) var(--space-6);
        /* Light steel surface with a barely-there tonal drift; navy words. */
        background: linear-gradient(112deg, var(--palette-steel-light) 0%, var(--palette-steel-mid) 100%);
        color: var(--palette-ink-navy);
    }

    .jh-home-cta > * {
        margin-block: 0;
    }

    .jh-home-cta p {
        order: -1;
        max-inline-size: 30ch;
        font-family: var(--font-display);
        font-size: var(--text-h3);
        font-weight: var(--weight-display-medium);
        line-height: var(--leading-h3);
    }

    .jh-home-cta .jh-section-link {
        display: inline-flex;
        align-items: center;
        min-block-size: 3rem;
        padding-inline: var(--space-6);
        border-radius: var(--radius-sm);
        background: var(--palette-signal-blue);
        color: var(--palette-paper);
        font-size: var(--text-h4);
        text-decoration: none;
    }

    .jh-home-cta .jh-section-link:hover,
    .jh-home-cta .jh-section-link:focus-visible {
        background: var(--palette-signal-blue-hover);
        color: var(--palette-paper);
    }

    .jh-home-cta .jh-section-link:focus-visible {
        outline: var(--rule-w) solid var(--palette-ink-navy);
        outline-offset: 0.2rem;
    }

    /* Evidence Aperture: one panoramic image cut into vertical slices that begin
       clearly misaligned and converge in view. Every slice is the same full-size
       image at the same position, clipped to its band, so the aligned state
       reconstructs the image exactly; bands overlap by a hairline so no seam
       can open. One-time keyframe on reveal; reduced motion and no-JS get the
       aligned image. The optional panel settles in as the image resolves. */
    .jh-aperture {
        position: relative;
        margin: 0;
    }

    .jh-aperture__field {
        position: relative;
        overflow: clip;
        aspect-ratio: 16 / 9;
        background: var(--color-surface-subtle);
    }

    .jh-aperture__slice {
        position: absolute;
        inset: 0;
        clip-path: inset(
            0
            calc((var(--slices) - 1 - var(--i)) * 100% / var(--slices) - 0.5px)
            0
            calc(var(--i) * 100% / var(--slices) - 0.5px)
        );
    }

    .jh-aperture__slice > img {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
    }

    /* Initial displacement, clearly visible: the fragmented state is unmistakable. */
    .jh-aperture__slice:nth-child(4n + 1) {
        --shift: -16%;
    }

    .jh-aperture__slice:nth-child(4n + 2) {
        --shift: 12%;
    }

    .jh-aperture__slice:nth-child(4n + 3) {
        --shift: -12%;
    }

    .jh-aperture__slice:nth-child(4n + 4) {
        --shift: 14%;
    }

    [data-reveal].jh-aperture[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    /* Owner polish 2026-09-24: the displacement moves the picture inside each
       clipped band, never the band itself — the field keeps a clean rectangular
       edge at every moment (no jagged, "cut" top under the hero); the strips
       are misregistered within it and slide into register. The pending picture
       is scaled so a shifted strip never shows a gap. */
    .jh-aperture[data-reveal-state="pending"] .jh-aperture__slice > img {
        transform: translateY(var(--shift)) scale(1.34);
    }

    /* The fragmented state holds for a beat (~320 ms) once triggered, then the
       slices resolve; the last settles at hold + sequence + 3 short staggers
       (~1.9 s). */
    .jh-aperture[data-reveal-state="revealed"] .jh-aperture__slice > img {
        animation: jh-align var(--motion-sequence) var(--ease-editorial) calc(var(--motion-standard) + var(--motion-fast) + var(--motion-stagger) * var(--i) * 0.6) both;
    }

    @keyframes jh-align {
        from {
            transform: translateY(var(--shift)) scale(1.34);
        }

        to {
            transform: none;
        }
    }

    /* Statement over the image: navy type on a localized veil of the page
       canvas that dissolves into the photograph — no edge, no border, no card.
       On phones the veil rises from below the field and the text continues
       beneath it, overlapping the image. */
    /* The statement is embedded in the photograph: white type and a light
       silver eyebrow on a local deep-navy veil that dissolves into the image.
       Never a rectangle, never a card, never a wash. */
    .jh-aperture__panel {
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        padding: var(--space-9) var(--space-4) var(--space-5);
        background: linear-gradient(
            180deg,
            transparent 0%,
            color-mix(in srgb, var(--palette-deep-navy) 58%, transparent) 26%,
            color-mix(in srgb, var(--palette-deep-navy) 84%, transparent) 100%
        );
        color: var(--color-text-inverse);
    }

    .jh-aperture__panel h2 {
        color: var(--color-text-inverse-secondary);
    }

    .jh-aperture__panel p {
        color: inherit;
    }

    /* Phones: a taller, immersive field so the statement lives inside it. */
    .jh-aperture--with-panel .jh-aperture__field {
        aspect-ratio: 4 / 5;
    }

    .jh-aperture[data-reveal-state="pending"] .jh-aperture__panel {
        opacity: 0;
    }

    /* The statement integrates as the image coheres. */
    .jh-aperture[data-reveal-state="revealed"] .jh-aperture__panel {
        animation: jh-settle var(--motion-editorial) var(--ease-decelerate) calc(var(--motion-standard) + var(--motion-fast) + var(--motion-sequence) * 0.55) both;
    }
    @media (min-width: 48rem) {
        .jh-aperture__field {
            aspect-ratio: 16 / 8;
        }

        .jh-services {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: var(--space-9);
        }

        .jh-epistemic {
            padding: var(--space-7) var(--space-8);
        }

        .jh-home-cta {
            padding: var(--space-7) var(--space-8);
        }

        .jh-aperture--with-panel .jh-aperture__field {
            aspect-ratio: 16 / 8;
        }

        .jh-aperture__panel {
            inset-inline: 0 auto;
            max-inline-size: 52rem;
            padding: var(--space-9) var(--space-9) var(--space-6) var(--space-6);
            /* An even, translucent navy veil under the words; the panel's top
               and right edges dissolve into the photograph through a mask, so
               no rectangle is ever visible. Left and bottom coincide with the
               image's own edges. */
            background: color-mix(in srgb, var(--palette-deep-navy) 72%, transparent);
            -webkit-mask-image:
                linear-gradient(180deg, transparent 0%, var(--palette-ink) 24%),
                linear-gradient(90deg, var(--palette-ink) 82%, transparent 100%);
            mask-image:
                linear-gradient(180deg, transparent 0%, var(--palette-ink) 24%),
                linear-gradient(90deg, var(--palette-ink) 82%, transparent 100%);
            -webkit-mask-composite: source-in;
            mask-composite: intersect;
        }

        /* The words stay inside the even part of the veil, clear of the fade. */
        .jh-thesis .jh-aperture__panel p {
            max-inline-size: 26ch;
        }
    }

    @media (min-width: 64rem) {
        /* Desktop hero keeps the lateral veil: copy left, media right. */
        .jh-hero--jurhen .jh-hero__media::after {
            background: linear-gradient(
                100deg,
                var(--palette-deep-navy) 0%,
                color-mix(in srgb, var(--palette-deep-navy) 80%, transparent) 38%,
                color-mix(in srgb, var(--palette-deep-navy) 20%, transparent) 64%,
                transparent 100%
            );
        }

        .jh-thesis p {
            font-size: var(--text-h2);
        }

        .jh-aperture__field,
        .jh-aperture--with-panel .jh-aperture__field {
            aspect-ratio: 16 / 7;
        }

        .jh-aperture__panel {
            max-inline-size: 58rem;
            padding-inline: var(--space-7) var(--space-9);
        }

    }

    @media (prefers-reduced-motion: reduce) {
        .jh-aperture[data-reveal-state] .jh-aperture__slice,
        .jh-aperture[data-reveal-state] .jh-aperture__slice > img,
        .jh-aperture[data-reveal-state] .jh-aperture__panel {
            animation: none;
            opacity: 1;
            transform: none;
        }

        .jh-hero--jurhen .jh-hero__copy h1[data-arrival] {
            animation: none;
            background-position: 200% 0, 0 0;
        }

        .jh-lenses[data-reveal-state] .jh-lens,
        .jh-lenses[data-reveal-state] .jh-lens::before,
        .jh-lenses[data-reveal-state] .jh-lens::after,
        .jh-lenses[data-reveal-state] .jh-lenses__root::after,
        .jh-modules[data-reveal-state] .jh-modules__item {
            opacity: 1;
            transform: none;
            transition: none;
        }

        .js .jh-modules__item[data-active] .jh-modules__panel {
            animation: none;
        }

        .jh-modules__trigger,
        .jh-modules__trigger::after {
            transition: none;
        }

        .jh-lenses[data-reveal-state] .jh-lenses__root::before,
        .jh-lenses[data-reveal-state] .jh-lenses__root::after,
        .jh-lenses[data-reveal-state] .jh-lens--primary::after,
        .jh-lenses[data-reveal-state] .jh-lens--complement::before,
        .jh-coverage[data-reveal-state] .jh-coverage__region::before,
        .jh-coverage[data-reveal-state] .jh-coverage__country {
            opacity: 1;
            transform: none;
            transition: none;
        }

        /* Markets atlas: regions, countries and markets read in their final state. */
        .jh-atlas__region[data-reveal-state]::before,
        .jh-atlas__region[data-reveal-state] .jh-atlas__region-head,
        .jh-atlas__region[data-reveal-state] .jh-atlas__country {
            opacity: 1;
            transform: none;
            transition: none;
        }

        .jh-atlas__market a {
            transition: none;
        }
    }
}

@layer components {
    /* MarketIQ product page (owner review 2026-09-14): navy, white and the
       approved silver; systems explain the product — the lens hierarchy, the
       evidence → interpretation → decision path, the interactive module system,
       the coverage board. One primary motion per viewport; reduced motion and
       no-JS read the final state. */
    .jh-product {
        gap: var(--space-8);
    }

    .jh-product__begin p,
    .jh-scope__copy,
    .jh-product__path > p {
        max-inline-size: min(var(--prose-max), 64ch);
    }

    .jh-product__note {
        color: var(--color-text-secondary);
    }

    /* Current scope: a firm statement of the product's present focus. */
    .jh-scope {
        gap: var(--space-3);
    }

    .jh-scope__label {
        margin: 0;
    }

    .jh-scope__label .jh-label {
        color: var(--color-action-primary);
    }

    .jh-scope__copy {
        display: grid;
        gap: var(--space-3);
    }

    .jh-scope__copy > p {
        margin: 0;
    }

    .jh-scope__lead {
        font-family: var(--font-display);
        font-size: var(--text-h3);
        font-weight: var(--weight-display-medium);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    /* Lens hierarchy (refinement 2026-09-14): one root, two branches. The
       valuation branch is Sales with its two complementary rental lenses; Land
       is a separate pillar under the same root — never a child of the rentals. */
    .jh-lenses {
        display: grid;
        gap: 0;
    }

    .jh-lenses__root {
        position: relative;
        margin: 0;
        padding-block-end: var(--space-6);
        text-align: center;
    }

    .jh-lenses__root .jh-label {
        color: var(--color-action-primary);
    }

    .jh-lenses__root::before {
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 50%;
        inline-size: var(--rule-w);
        block-size: var(--space-5);
        background: var(--color-border-strong);
        transform-origin: 50% 0;
        transition: transform var(--motion-reveal) var(--ease-editorial);
        content: "";
    }

    .jh-lenses__grid {
        position: relative;
        display: grid;
        gap: var(--space-6) var(--space-6);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-lens {
        position: relative;
        display: grid;
        align-content: start;
        gap: var(--space-2);
        margin: 0;
        padding: var(--space-5);
        border-block-start: var(--rule-w) solid var(--color-action-primary);
        background: var(--color-surface);
        transition:
            opacity var(--motion-editorial) var(--ease-standard),
            transform var(--motion-editorial) var(--ease-decelerate);
        transition-delay: calc(var(--motion-stagger) * var(--i) * 3);
    }

    .jh-lens > * {
        margin: 0;
    }

    .jh-lens h3 {
        font-size: var(--text-h3);
        line-height: var(--leading-h3);
    }

    /* Inside the tree the heading is the link; no rule beside it. */
    .jh-lens h3 .jh-section-link::after {
        content: none;
    }

    .jh-lens__role {
        color: var(--color-action-primary);
        font-family: var(--font-metadata);
        font-size: var(--text-label);
        font-weight: var(--weight-body-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
        text-transform: uppercase;
    }

    .jh-lens__body {
        color: var(--color-text-secondary);
    }

    .jh-lens--primary {
        border-block-start-width: calc(var(--rule-w) * 2);
    }

    .jh-lens--primary h3 {
        font-size: var(--text-h2);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    /* Sales branches to its two complementary lenses: a bracket whose legs
       reach the rental tiles. */
    .jh-lens--primary::after {
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 25%;
        block-size: var(--space-6);
        border-block-start: var(--rule-w) solid var(--color-border-strong);
        border-inline: var(--rule-w) solid var(--color-border-strong);
        transform-origin: 50% 0;
        transition: transform var(--motion-reveal) var(--ease-editorial) calc(var(--motion-stagger) * 2);
        content: "";
    }

    /* Stacked (phones): each complementary lens hangs from the tile above by a
       centre stub; the desktop bracket is hidden. */
    .jh-lens--primary::after {
        display: none;
    }

    .jh-lens--complement::before {
        position: absolute;
        inset-block-start: calc(-1 * var(--space-6));
        inset-inline-start: 50%;
        inline-size: var(--rule-w);
        block-size: var(--space-6);
        background: var(--color-border-strong);
        transform-origin: 50% 0;
        transition: transform var(--motion-reveal) var(--ease-editorial) calc(var(--motion-stagger) * var(--i) * 2);
        content: "";
    }

    /* Land: the separate pillar. A steel rule and a dashed edge mark the
       distinct role; it never carries a stub from the rental row. */
    .jh-lens--distinct {
        margin-block-start: var(--space-4);
        border-block-start-color: var(--color-border-strong);
        border-inline-start: var(--border-w) dashed var(--color-border-strong);
    }

    .jh-lens--distinct .jh-lens__role {
        color: var(--color-text-secondary);
    }

    [data-reveal].jh-lenses[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    .jh-lenses[data-reveal-state="pending"] .jh-lens {
        opacity: 0;
        transform: translateY(var(--space-3));
    }

    .jh-lenses[data-reveal-state="pending"] .jh-lenses__root::before,
    .jh-lenses[data-reveal-state="pending"] .jh-lenses__root::after,
    .jh-lenses[data-reveal-state="pending"] .jh-lens--primary::after,
    .jh-lenses[data-reveal-state="pending"] .jh-lens--complement::before {
        transform: scaleY(0);
    }

    /* Evidence → interpretation → decision: the path leads, the statement follows. */
    .jh-path--product .jh-path__steps li {
        color: var(--color-text-primary);
        font-family: var(--font-display);
        font-size: var(--text-h3);
        font-weight: var(--weight-display-bold);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h3);
        text-transform: none;
    }

    .jh-path--product .jh-path__steps li:last-child {
        color: var(--color-action-primary);
    }

    /* Decision modules: navy selector, one dominant active stage. */
    .jh-modules {
        margin-block: var(--space-2);
    }

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

    .jh-modules__item {
        display: grid;
        gap: 0;
    }

    .jh-modules__title {
        margin: 0;
        font-size: var(--text-body);
        line-height: var(--leading-body);
    }

    .jh-modules__trigger {
        display: flex;
        inline-size: 100%;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        min-block-size: 3.25rem;
        padding: var(--space-3) var(--space-4);
        border: 0;
        border-inline-start: var(--rule-w) solid transparent;
        border-radius: 0;
        background: var(--palette-navy);
        color: var(--color-text-inverse);
        cursor: pointer;
        font: inherit;
        font-weight: var(--weight-body-semibold);
        text-align: start;
        transition:
            background-color var(--motion-standard) var(--ease-standard),
            border-color var(--motion-standard) var(--ease-standard),
            color var(--motion-standard) var(--ease-standard);
    }

    .jh-modules__trigger::after {
        flex: 0 0 auto;
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border-inline-end: var(--border-w) solid currentColor;
        border-block-end: var(--border-w) solid currentColor;
        opacity: 0.6;
        transform: rotate(-45deg);
        transition: transform var(--motion-standard) var(--ease-standard), opacity var(--motion-standard) var(--ease-standard);
        content: "";
    }

    .jh-modules__trigger:hover,
    .jh-modules__trigger:focus-visible {
        background: var(--color-action-hover);
    }

    .jh-modules__trigger:focus-visible {
        outline: var(--rule-w) solid var(--color-focus-inverse);
        outline-offset: calc(-1 * var(--rule-w));
    }

    .jh-modules__item[data-active] .jh-modules__trigger {
        border-inline-start-color: var(--color-accent-silver);
        background: var(--palette-deep-navy);
        color: var(--color-text-inverse);
    }

    .jh-modules__item[data-active] .jh-modules__trigger::after {
        opacity: 1;
        transform: rotate(45deg);
    }

    .jh-modules__panel {
        display: grid;
        gap: var(--space-3);
        padding: var(--space-5) var(--space-4);
        border-inline-start: var(--rule-w) solid var(--color-accent-silver);
        background: var(--color-surface);
    }

    .jh-modules__panel > p {
        margin: 0;
    }

    .jh-modules__stage-title {
        display: none;
    }

    .jh-modules__body {
        max-inline-size: 44ch;
        font-size: var(--text-body-large);
        line-height: var(--leading-body-large);
    }

    /* With script, one explanation shows at a time; without it, all of them. */
    .js .jh-modules__item:not([data-active]) .jh-modules__panel {
        display: none;
    }

    .js .jh-modules__item[data-active] .jh-modules__panel {
        animation: jh-settle var(--motion-standard) var(--ease-decelerate) both;
    }

    [data-reveal].jh-modules[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    .jh-modules[data-reveal-state] .jh-modules__item {
        transition:
            opacity var(--motion-reveal) var(--ease-standard),
            transform var(--motion-reveal) var(--ease-decelerate);
        transition-delay: calc(var(--motion-stagger) * var(--i));
    }

    .jh-modules[data-reveal-state="pending"] .jh-modules__item {
        opacity: 0;
        transform: translateY(var(--space-2));
    }

    /* Independent perspective and reassessment: a quiet pair. */
    .jh-pair {
        display: grid;
        gap: var(--space-6);
        padding-block-start: var(--space-6);
        border-block-start: var(--border-w) solid var(--color-border);
    }

    .jh-pair__item h2 {
        font-size: var(--text-h3);
        line-height: var(--leading-h3);
    }

    .jh-pair__item p {
        color: var(--color-text-secondary);
    }

    /* Explore markets: the product → geography handoff as a coverage board —
       region spines, country nodes, market links; coming soon stays labelled. */
    .jh-explore {
        padding-block-start: var(--space-6);
        border-block-start: var(--border-w) solid var(--color-border);
    }

    .jh-explore > p {
        max-inline-size: min(var(--prose-max), 64ch);
    }

    .jh-coverage {
        display: grid;
        gap: var(--space-6);
        margin-block-start: var(--space-2);
    }

    .jh-coverage__region {
        position: relative;
        display: grid;
        gap: var(--space-4);
        padding-inline-start: var(--space-6);
    }

    .jh-coverage__region::before {
        position: absolute;
        inset-block: var(--space-2) var(--space-2);
        inset-inline-start: 0;
        inline-size: var(--rule-w);
        background: var(--color-border-strong);
        transform-origin: 50% 0;
        transition: transform calc(var(--motion-sequence) * 0.8) var(--ease-editorial) calc(var(--motion-stagger) * var(--i) * 4);
        content: "";
    }

    .jh-coverage__region-name {
        margin: 0;
        color: var(--color-action-primary);
        font-family: var(--font-metadata);
        font-size: var(--text-label);
        font-weight: var(--weight-body-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
        text-transform: uppercase;
    }

    .jh-coverage__countries {
        display: grid;
        gap: var(--space-4);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-coverage__country {
        position: relative;
        display: grid;
        gap: var(--space-2);
        margin: 0;
        transition:
            opacity var(--motion-reveal) var(--ease-standard),
            transform var(--motion-reveal) var(--ease-decelerate);
        transition-delay: calc(var(--motion-stagger) * (var(--i) + 2) * 2);
    }

    /* A node on the spine per country: filled for current coverage, hollow for
       coming soon. */
    .jh-coverage__country::before {
        position: absolute;
        inset-block-start: 0.35em;
        inset-inline-start: calc(-1 * var(--space-6) - var(--space-2) / 2 + var(--rule-w) / 2);
        inline-size: var(--space-2);
        block-size: var(--space-2);
        border: var(--rule-w) solid var(--color-action-primary);
        border-radius: 50%;
        background: var(--color-action-primary);
        content: "";
    }

    .jh-coverage__country[data-coverage-state="coming-soon"]::before {
        border-color: var(--color-border-strong);
        background: var(--color-surface);
    }

    .jh-coverage__country-name {
        margin: 0;
        font-size: var(--text-h4);
        font-weight: var(--weight-body-semibold);
        line-height: var(--leading-h4);
    }

    .jh-coverage__country-name a {
        color: var(--color-text-primary);
        text-decoration: none;
    }

    .jh-coverage__country-name a:hover,
    .jh-coverage__country-name a:focus-visible {
        text-decoration: underline;
    }

    .jh-coverage__country[data-coverage-state="coming-soon"] .jh-coverage__country-name {
        color: var(--color-text-secondary);
    }

    .jh-coverage__markets {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-coverage__market {
        margin: 0;
    }

    .jh-coverage__market a,
    .jh-coverage__market--soon > span:first-child {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-block-size: 2.25rem;
        padding: var(--space-1) var(--space-3);
        border: var(--border-w) solid var(--color-border);
        background: var(--color-surface);
        font-size: var(--text-body-small);
        line-height: var(--leading-body-small);
    }

    .jh-coverage__market a {
        color: var(--color-action-primary);
        font-weight: var(--weight-body-semibold);
        text-decoration: none;
        transition:
            border-color var(--motion-fast) var(--ease-standard),
            background-color var(--motion-fast) var(--ease-standard),
            color var(--motion-fast) var(--ease-standard);
    }

    .jh-coverage__market a:hover,
    .jh-coverage__market a:focus-visible {
        border-color: var(--color-action-primary);
        background: var(--color-action-primary);
        color: var(--color-action-primary-text);
    }

    .jh-coverage__market--soon {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--color-text-secondary);
    }

    .jh-coverage__market--soon > span:first-child {
        border-style: dashed;
        color: var(--color-text-secondary);
    }

    [data-reveal].jh-coverage[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    .jh-coverage[data-reveal-state="pending"] .jh-coverage__region::before {
        transform: scaleY(0);
    }

    .jh-coverage[data-reveal-state="pending"] .jh-coverage__country {
        opacity: 0;
        transform: translateY(var(--space-2));
    }

    @media (min-width: 48rem) {
        /* Root → two branches: the valuation branch (Sales over its two
           complementary lenses) and the Land pillar spanning both rows. */
        .jh-lenses__grid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr);
            grid-template-areas:
                "sales sales land"
                "ltr   str   land";
        }

        .jh-lens--primary {
            grid-area: sales;
        }

        .jh-lens--complement:nth-child(2) {
            grid-area: ltr;
        }

        .jh-lens--complement:nth-child(3) {
            grid-area: str;
        }

        .jh-lens--distinct {
            grid-area: land;
            margin-block-start: 0;
            margin-inline-start: var(--space-2);
        }

        .jh-lens--primary::after {
            display: block;
        }

        .jh-lens--complement::before {
            display: none;
        }

        /* The root bracket: one stub from the label, then legs down to the
           valuation branch (centre of the two left columns) and to Land. */
        .jh-lenses__root::before {
            block-size: calc(var(--space-6) / 2);
            inset-block-end: calc(var(--space-6) / 2);
        }

        .jh-lenses__root::after {
            position: absolute;
            inset-block-end: 0;
            inset-inline: 34.5% 13.5%;
            block-size: calc(var(--space-6) / 2);
            border-block-start: var(--rule-w) solid var(--color-border-strong);
            border-inline: var(--rule-w) solid var(--color-border-strong);
            transform-origin: 50% 0;
            transition: transform var(--motion-reveal) var(--ease-editorial) var(--motion-stagger);
            content: "";
        }

        .jh-modules__system {
            grid-template-columns: minmax(15rem, 2fr) minmax(0, 3fr);
            column-gap: var(--space-5);
            align-items: stretch;
        }

        .jh-modules__item {
            display: contents;
        }

        .jh-modules__title {
            grid-column: 1;
        }

        .jh-modules__trigger::after {
            transform: rotate(-45deg);
        }

        .jh-modules__item[data-active] .jh-modules__trigger::after {
            transform: rotate(-45deg) translate(2px, 2px);
        }

        /* The stage: the full height of the selector stack, content centred. */
        .jh-modules__panel {
            grid-column: 2;
            grid-row: 1 / span 7;
            align-self: stretch;
            align-content: center;
            gap: var(--space-4);
            padding: var(--space-7) var(--space-8);
            border-inline-start: calc(var(--rule-w) * 2) solid var(--color-accent-silver);
            background: var(--color-surface);
            box-shadow: inset 0 0 0 var(--border-w) var(--color-border);
        }

        .jh-modules__stage-title {
            display: block;
            font-family: var(--font-display);
            font-size: var(--text-h2);
            font-weight: var(--weight-display-bold);
            letter-spacing: var(--tracking-h2);
            line-height: var(--leading-h2);
        }

        .jh-modules__body {
            max-inline-size: 40ch;
            font-family: var(--font-display);
            font-size: var(--text-h4);
            font-weight: var(--weight-display-medium);
            line-height: var(--leading-h4);
        }

        .jh-pair {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: var(--space-8);
        }

        .jh-coverage {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: var(--space-8);
        }
    }
}

@layer components {
    /* Markets (owner pass 2026-09-14): a region-first atlas. Each region is a
       section of its own — the name at display scale, its countries in a
       responsive grid, each country listing its markets — so the page reads
       region -> country -> market and, within a region, current coverage ->
       future expansion. One drawn rule per region is the primary motion; the
       countries follow it, coming-soon coverage last and quieter. No
       cartography, no counts. Reduced motion and no-JS read the final state. */
    .jh-atlas {
        --stack-space: var(--space-6);
    }

    .jh-atlas__region {
        position: relative;
        display: grid;
        gap: var(--space-5);
        padding-block-start: var(--space-6);
    }

    /* The region establishes first: its rule draws across the full width. */
    .jh-atlas__region::before {
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        block-size: var(--rule-w);
        background: var(--color-accent-primary);
        transform-origin: 0 50%;
        transition: transform var(--motion-editorial) var(--ease-editorial);
        content: "";
    }

    .jh-atlas__region-head {
        display: grid;
        gap: var(--space-2);
        align-content: start;
        transition:
            opacity var(--motion-reveal) var(--ease-standard),
            transform var(--motion-editorial) var(--ease-decelerate);
        transition-delay: var(--motion-stagger);
    }

    .jh-atlas__region-name {
        margin: 0;
        color: var(--color-text-primary);
        font-family: var(--font-display);
        font-size: var(--text-display);
        font-weight: var(--weight-display-bold);
        letter-spacing: var(--tracking-display);
        line-height: var(--leading-display);
        overflow-wrap: anywhere;
    }

    .jh-atlas__countries {
        display: grid;
        gap: var(--space-5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-atlas__country {
        position: relative;
        display: grid;
        align-content: start;
        gap: var(--space-3);
        margin: 0;
        padding-block-start: var(--space-4);
        border-block-start: var(--border-w) solid var(--color-action-primary);
        transition:
            opacity var(--motion-reveal) var(--ease-standard),
            transform var(--motion-reveal) var(--ease-decelerate);
        transition-delay: calc(var(--motion-stagger) * (var(--i) + 3));
    }

    /* Future coverage follows current coverage, later and quieter: a dashed
       rule, a hollow node, secondary type, one status on the country. */
    .jh-atlas__country[data-coverage-state="coming-soon"] {
        border-block-start-style: dashed;
        border-block-start-color: var(--color-border-strong);
        transition-delay: calc(var(--motion-stagger) * (var(--i) + 3) + var(--motion-reveal));
    }

    /* Coverage node at the head of the country rule: filled = current, hollow = coming soon. */
    .jh-atlas__country::before {
        position: absolute;
        inset-block-start: calc(-1 * (var(--space-3) + var(--border-w)) / 2);
        inset-inline-start: 0;
        inline-size: var(--space-3);
        block-size: var(--space-3);
        border: var(--rule-w) solid var(--color-action-primary);
        border-radius: 50%;
        background: var(--color-action-primary);
        content: "";
    }

    .jh-atlas__country[data-coverage-state="coming-soon"]::before {
        border-color: var(--color-border-strong);
        background: var(--color-canvas);
    }

    .jh-atlas__country-name {
        display: grid;
        gap: var(--space-1);
        margin: 0;
        padding-inline-start: var(--space-5);
        color: var(--color-text-primary);
        font-family: var(--font-display);
        font-size: var(--text-h3);
        font-weight: var(--weight-display-semibold);
        letter-spacing: var(--tracking-h3);
        line-height: var(--leading-h3);
        overflow-wrap: anywhere;
    }

    .jh-atlas__country-name a {
        color: inherit;
        text-decoration: none;
    }

    .jh-atlas__country-name a:hover,
    .jh-atlas__country-name a:focus-visible {
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

    .jh-atlas__country[data-coverage-state="coming-soon"] .jh-atlas__country-name {
        color: var(--color-text-secondary);
    }

    /* One status idiom for future coverage: on the country when none of its
       markets is current, on the market when the country already has coverage. */
    .jh-atlas__status {
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-metadata);
        text-transform: uppercase;
    }

    .jh-atlas__status--country {
        padding-block-start: var(--space-1);
    }

    .jh-atlas__markets {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin: 0;
        padding: 0 0 0 var(--space-5);
        list-style: none;
    }

    .jh-atlas__market {
        margin: 0;
    }

    .jh-atlas__market a,
    .jh-atlas__market--soon {
        display: inline-flex;
        align-items: center;
        min-block-size: 2.75rem;
        padding: var(--space-2) var(--space-4);
        border: var(--border-w) solid var(--color-border-strong);
        background: var(--color-surface);
        font-size: var(--text-body);
        line-height: var(--leading-body);
    }

    /* Current markets are links: solid frame, semibold navy, fill on hover. */
    .jh-atlas__market a {
        color: var(--color-action-primary);
        font-weight: var(--weight-body-semibold);
        text-decoration: none;
        transition:
            border-color var(--motion-fast) var(--ease-standard),
            background-color var(--motion-fast) var(--ease-standard),
            color var(--motion-fast) var(--ease-standard);
    }

    .jh-atlas__market a:hover,
    .jh-atlas__market a:focus-visible {
        border-color: var(--color-action-primary);
        background: var(--color-action-primary);
        color: var(--color-action-primary-text);
    }

    /* Coming-soon markets are never links: a dashed frame, regular weight, no
       fill, the status inside the frame with its market. */
    .jh-atlas__market--soon {
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-3);
        border-style: dashed;
        background: transparent;
        color: var(--color-text-secondary);
    }

    /* The status never breaks mid-phrase: in a narrow column it drops under the
       market name, inside the same frame. */
    .jh-atlas__market--soon > .jh-atlas__status {
        white-space: nowrap;
    }

    .jh-atlas__region--unassigned .jh-atlas__countries {
        grid-column: 1 / -1;
    }

    /* Sequence in view: rule -> region name -> current countries -> future coverage. */
    [data-reveal].jh-atlas__region[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    .jh-atlas__region[data-reveal-state="pending"]::before {
        transform: scaleX(0);
    }

    .jh-atlas__region[data-reveal-state="pending"] .jh-atlas__region-head {
        opacity: 0;
        transform: translateX(calc(-1 * var(--space-4)));
    }

    .jh-atlas__region[data-reveal-state="pending"] .jh-atlas__country {
        opacity: 0;
        transform: translateY(var(--space-3));
    }

    @media (min-width: 48rem) {
        .jh-atlas__countries {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
            gap: var(--space-6) var(--space-6);
        }
    }

    @media (min-width: 64rem) {
        .jh-atlas {
            --stack-space: var(--space-7);
        }

        /* Region-scale composition: the name holds the left column and stays
           with its countries while they scroll. */
        .jh-atlas__region {
            grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr);
            column-gap: var(--space-8);
            align-items: start;
            padding-block: var(--space-7) var(--space-5);
        }

        .jh-atlas__region-head {
            position: sticky;
            inset-block-start: var(--space-6);
        }
    }
}

@layer components {
    /* Institutional experience (owner pass 2026-09-23): About and Mission,
       vision and values share one grammar — an institutional thesis, major
       statements (paper, then navy), a restrained practice bridge, an
       interactive values system and a closing handoff. Typography, scale and
       controlled contrast only: no cards, no icons, no media, no drawings. */
    .jh-institution {
        --stack-space: var(--space-7);
    }

    .jh-institution__hero {
        display: grid;
        gap: var(--space-4);
        max-inline-size: none;
    }

    .jh-institution__hero > * {
        margin: 0;
    }

    .jh-institution__hero h1 {
        max-inline-size: 18ch;
    }

    /* About: the page title is a compact institutional identifier; the thesis
       below it is the dominant statement. */
    .jh-institution--about .jh-institution__hero h1 {
        max-inline-size: none;
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-label);
        font-weight: var(--weight-body-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
        text-transform: uppercase;
    }

    .jh-institution__hero > .jh-label {
        color: var(--color-text-secondary);
    }

    /* The institutional statement: the thesis of the page, at statement scale. */
    .jh-institution__thesis {
        max-inline-size: 30ch;
        color: var(--color-text-primary);
        font-family: var(--font-display);
        font-size: var(--text-h2);
        font-weight: var(--weight-display-semibold);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    .jh-institution__section {
        scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
    }

    /* The statement line's brass rule is the only drawn rule in the role
       section; no section rule above the heading. */
    .jh-institution .jh-reveal--align::before {
        content: none;
    }

    .jh-institution__section > h2 {
        margin: 0;
    }

    /* Role: heading, the approved statement line, then the two paragraphs. */
    .jh-institution__role {
        display: grid;
        gap: var(--space-4);
    }

    .jh-institution__role > .jh-statement-line {
        max-inline-size: 28ch;
        margin-block: 0;
    }

    .jh-institution__copy {
        display: grid;
        gap: var(--space-4);
        max-inline-size: 62ch;
    }

    .jh-institution__copy > p {
        margin: 0;
    }

    /* Major statement block: a label and one statement on a surface; its
       rule draws, then the words settle. The bridge variant links onward. */
    .jh-statement-block {
        position: relative;
        display: grid;
        gap: var(--space-4);
        padding: var(--space-6) var(--space-5) var(--space-7);
        background: var(--color-surface);
    }

    .jh-statement-block::before {
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        block-size: var(--rule-w);
        background: var(--color-action-primary);
        transform-origin: 0 50%;
        transition: transform var(--motion-editorial) var(--ease-editorial);
        content: "";
    }

    .jh-statement-block > * {
        margin: 0;
    }

    .jh-statement-block__label {
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-label);
        font-weight: var(--weight-body-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
        text-transform: uppercase;
        transition:
            opacity var(--motion-reveal) var(--ease-standard) var(--motion-stagger),
            transform var(--motion-reveal) var(--ease-decelerate) var(--motion-stagger);
    }

    .jh-statement-block__label > .jh-section-link {
        color: var(--color-action-primary);
    }

    .jh-statement-block__text {
        max-inline-size: 44ch;
        color: var(--color-text-primary);
        font-family: var(--font-display);
        font-size: var(--text-h3);
        font-weight: var(--weight-display-semibold);
        letter-spacing: var(--tracking-h3);
        line-height: var(--leading-h3);
        transition:
            opacity var(--motion-editorial) var(--ease-standard) calc(var(--motion-stagger) * 3),
            transform var(--motion-editorial) var(--ease-decelerate) calc(var(--motion-stagger) * 3);
    }

    .jh-statement-block__text--major {
        max-inline-size: 40ch;
        font-size: var(--text-h2);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    /* Vision: the same block on navy; the swapped tokens carry the type. */
    .jh-statement-block--vision {
        background: var(--palette-navy);
    }

    .jh-statement-block--vision::before {
        background: var(--color-accent-silver);
    }

    .jh-statement-block--vision .jh-statement-block__label {
        color: var(--color-text-secondary);
    }

    .jh-statement-block--vision .jh-statement-block__text {
        color: var(--color-text-primary);
    }

    [data-reveal].jh-statement-block[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    .jh-statement-block[data-reveal-state="pending"]::before {
        transform: scaleX(0);
    }

    .jh-statement-block[data-reveal-state="pending"] .jh-statement-block__label,
    .jh-statement-block[data-reveal-state="pending"] .jh-statement-block__text {
        opacity: 0;
        transform: translateY(var(--space-3));
        transition: none;
    }

    /* Practice bridge: two fields under one shared rule, then one sentence to
       the Methodology. */
    .jh-practice {
        display: grid;
        gap: var(--space-6);
    }

    .jh-practice__fields {
        display: grid;
        gap: var(--space-6);
        padding-block-start: var(--space-6);
        border-block-start: var(--rule-w) solid var(--color-action-primary);
    }

    .jh-practice__field {
        display: grid;
        gap: var(--space-3);
        align-content: start;
        transition:
            opacity var(--motion-reveal) var(--ease-standard),
            transform var(--motion-reveal) var(--ease-decelerate);
        transition-delay: calc(var(--motion-stagger) * (var(--i) + 1) * 2);
    }

    .jh-practice__field > * {
        margin: 0;
    }

    .jh-practice__field > h2 {
        font-size: var(--text-h2);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    .jh-practice__field > p {
        max-inline-size: 42ch;
    }

    .jh-institution__bridge {
        max-inline-size: 62ch;
        margin: 0;
        color: var(--color-text-secondary);
    }

    .jh-institution__bridge > a {
        color: var(--color-action-primary);
        font-weight: var(--weight-body-semibold);
        text-underline-offset: 0.2em;
    }

    [data-reveal].jh-practice[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    .jh-practice[data-reveal-state="pending"] .jh-practice__field {
        opacity: 0;
        transform: translateY(var(--space-3));
        transition: none;
    }

    /* Values: every name visible, one definition on the reading stage. Phones:
       disclosures. Driven by the shared module script; Truth active first. */
    .jh-values {
        display: grid;
        gap: var(--space-5);
    }

    .jh-values__index {
        display: grid;
        margin: 0;
        padding: 0;
        border-block-start: var(--border-w) solid var(--color-border-strong);
        list-style: none;
    }

    .jh-values__item {
        display: grid;
        margin: 0;
    }

    .jh-values__title {
        margin: 0;
        font-size: var(--text-body);
        line-height: var(--leading-body);
    }

    .jh-values__trigger {
        display: flex;
        inline-size: 100%;
        align-items: center;
        gap: var(--space-4);
        min-block-size: 3.5rem;
        padding: var(--space-4) var(--space-2) var(--space-4) var(--space-3);
        border: 0;
        border-block-end: var(--border-w) solid var(--color-border);
        border-inline-start: var(--rule-w) solid transparent;
        border-radius: 0;
        background: transparent;
        color: var(--color-text-secondary);
        cursor: pointer;
        font-family: var(--font-display);
        font-size: var(--text-h3);
        font-weight: var(--weight-display-semibold);
        letter-spacing: var(--tracking-h3);
        line-height: var(--leading-h3);
        text-align: start;
        transition:
            color var(--motion-standard) var(--ease-standard),
            border-color var(--motion-standard) var(--ease-standard);
    }

    .jh-values__trigger::after {
        flex: 0 0 auto;
        inline-size: 0.5rem;
        block-size: 0.5rem;
        margin-inline-start: auto;
        border-inline-end: var(--border-w) solid currentColor;
        border-block-end: var(--border-w) solid currentColor;
        opacity: 0.6;
        transform: translateY(-0.2rem) rotate(45deg);
        transition: transform var(--motion-standard) var(--ease-standard);
        content: "";
    }

    .jh-values__trigger:hover,
    .jh-values__trigger:focus-visible {
        color: var(--color-text-primary);
    }

    .jh-values__trigger:focus-visible {
        outline: var(--rule-w) solid var(--color-focus);
        outline-offset: calc(-1 * var(--rule-w));
    }

    .jh-values__item[data-active] .jh-values__trigger {
        border-inline-start-color: var(--color-accent-brass);
        color: var(--color-action-primary);
    }

    .jh-values__item[data-active] .jh-values__trigger::after {
        transform: translateY(0.1rem) rotate(-135deg);
    }

    /* Owner authority pass 2026-09-24: the reading stage is deep navy (the
       panel carries data-tone="inverse", so its tokens are paper and silver). */
    .jh-values__panel {
        display: grid;
        gap: var(--space-3);
        padding: var(--space-5) var(--space-4) var(--space-6);
        background: var(--gradient-analytical-primary);
        color: var(--color-text-primary);
    }

    .jh-values__panel > p {
        margin: 0;
    }

    .jh-values__stage-title {
        display: none;
    }

    .jh-values__body {
        max-inline-size: 52ch;
        color: var(--color-text-primary);
        font-size: var(--text-body-large);
        line-height: var(--leading-body-large);
    }

    .js .jh-values__item:not([data-active]) .jh-values__panel {
        display: none;
    }

    .js .jh-values__item[data-active] .jh-values__panel {
        animation: jh-settle var(--motion-standard) var(--ease-decelerate) both;
    }

    @media (min-width: 48rem) {
        .jh-institution__role {
            grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
            grid-template-rows: auto 1fr;
            grid-template-areas:
                "head copy"
                "statement copy";
            column-gap: var(--space-8);
            align-items: start;
        }

        .jh-institution__role > h2 {
            grid-area: head;
        }

        .jh-institution__role > .jh-statement-line {
            grid-area: statement;
        }

        .jh-institution__copy {
            grid-area: copy;
        }

        .jh-statement-block {
            padding: var(--space-7) var(--space-7) var(--space-8);
        }

        .jh-practice__fields {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: var(--space-8);
        }

        .jh-practice__field + .jh-practice__field {
            padding-inline-start: var(--space-6);
            border-inline-start: var(--border-w) solid var(--color-border-strong);
        }

        /* Values: the index on the left, the reading stage on the right. */
        .jh-values__index {
            grid-template-columns: minmax(12rem, 4fr) minmax(0, 8fr);
            grid-template-rows: repeat(var(--count, 6), auto);
            column-gap: var(--space-7);
            align-items: stretch;
            min-block-size: 30rem;
            border-block-start: 0;
        }

        .jh-values__item {
            display: contents;
        }

        .jh-values__title {
            grid-column: 1;
        }

        .jh-values__item:first-child .jh-values__trigger {
            border-block-start: var(--border-w) solid var(--color-border-strong);
        }

        .jh-values__trigger::after {
            display: none;
        }

        .jh-values__panel {
            grid-column: 2;
            grid-row: 1 / -1;
            align-self: stretch;
            align-content: center;
            gap: var(--space-4);
            padding: var(--space-7) var(--space-8);
            border-block-start: var(--rule-w) solid var(--color-text-secondary);
        }

        /* Without script every definition is rendered: each one sits beside its
           name instead of stacking in the same cell (owner authority pass 2026-09-24). */
        html:not(.js) .jh-values__panel {
            grid-row: auto;
            align-self: start;
            padding-block: var(--space-4);
        }

        .jh-values__stage-title {
            display: block;
            font-family: var(--font-display);
            font-size: var(--text-display);
            font-weight: var(--weight-display-bold);
            letter-spacing: var(--tracking-display);
            line-height: var(--leading-display);
        }
    }

    @media (min-width: 64rem) {
        .jh-institution {
            --stack-space: var(--space-8);
        }

        .jh-institution--about .jh-institution__hero {
            gap: var(--space-5);
        }

        .jh-institution__thesis {
            max-inline-size: 76%;
            font-size: var(--text-h1);
            letter-spacing: var(--tracking-h1);
            line-height: var(--leading-h1);
        }

        .jh-statement-block__text--major {
            font-size: var(--text-h1);
            letter-spacing: var(--tracking-h1);
            line-height: var(--leading-h1);
        }

        .jh-values__index {
            min-block-size: 28rem;
        }
    }
}

@layer components {
    /* Publication system (owner editorial pass 2026-09-24): Insights, Reports
       and Research share one masthead and one row primitive. Reports read
       applied and structured (a tighter measure, a firmer grid); Research reads
       analytical and spacious (a wider measure, more air). Typography and
       hierarchy only — no media, no cards, no icons, and never an announcement
       of absence: with zero publications the introduction simply ends. */
    .jh-publications {
        --stack-space: var(--space-7);
    }

    .jh-publications__masthead {
        display: grid;
        gap: var(--space-4);
        max-inline-size: var(--prose-max);
    }

    .jh-publications__masthead > * {
        margin: 0;
    }

    .jh-publications__masthead h1 {
        font-size: var(--text-display);
        letter-spacing: var(--tracking-display);
        line-height: var(--leading-h1);
        animation: jh-resolve var(--motion-editorial) var(--ease-decelerate) both;
    }

    .jh-publications__parent {
        color: inherit;
        text-decoration: none;
    }

    .jh-publications__parent:hover,
    .jh-publications__parent:focus-visible {
        text-decoration: underline;
    }

    .jh-publications__statement {
        max-inline-size: 26ch;
        font-family: var(--font-display);
        font-size: var(--text-h2);
        font-weight: var(--weight-display-semibold);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    .jh-publications__lede {
        max-inline-size: 58ch;
        font-size: var(--text-body-large);
        line-height: var(--leading-body-large);
    }

    /* Research: a wider, calmer measure. */
    .jh-publications--research .jh-publications__masthead {
        max-inline-size: none;
    }

    .jh-publications--research .jh-publications__statement {
        max-inline-size: 30ch;
    }

    .jh-publications--research .jh-publications__lede {
        max-inline-size: 64ch;
    }

    /* The two editorial paths: destinations under one rule. */
    .jh-paths {
        display: grid;
        gap: var(--space-6);
        padding-block-start: var(--space-6);
        border-block-start: var(--rule-w) solid var(--color-action-primary);
    }

    .jh-paths__item {
        display: grid;
        gap: var(--space-3);
        align-content: start;
        transition:
            opacity var(--motion-reveal) var(--ease-standard),
            transform var(--motion-reveal) var(--ease-decelerate);
        transition-delay: calc(var(--motion-stagger) * (var(--i) + 1) * 2);
    }

    .jh-paths__item > * {
        margin: 0;
    }

    .jh-paths__item > h2 {
        font-size: var(--text-h1);
        letter-spacing: var(--tracking-h1);
        line-height: var(--leading-h1);
    }

    .jh-paths__link {
        color: var(--color-text-primary);
        text-decoration: none;
        text-underline-offset: 0.16em;
    }

    .jh-paths__link:hover,
    .jh-paths__link:focus-visible {
        color: var(--color-action-primary);
        text-decoration: underline;
    }

    .jh-paths__item > p {
        max-inline-size: 40ch;
        font-size: var(--text-body-large);
        line-height: var(--leading-body-large);
    }

    [data-reveal].jh-paths[data-reveal-state="pending"],
    [data-reveal].jh-publication-list[data-reveal-state="pending"] {
        opacity: 1;
        transform: none;
    }

    .jh-paths[data-reveal-state="pending"] .jh-paths__item,
    .jh-publication-list[data-reveal-state="pending"] .jh-publication {
        opacity: 0;
        transform: translateY(var(--space-3));
        transition: none;
    }

    /* One restrained Methodology handoff. */
    .jh-publications__handoff {
        max-inline-size: 64ch;
        margin: 0;
        color: var(--color-text-secondary);
    }

    .jh-publications__handoff > a {
        color: var(--color-action-primary);
        font-weight: var(--weight-body-semibold);
        text-underline-offset: 0.2em;
    }

    /* Publication rows: one primitive, two characters. */
    .jh-publication-list {
        display: grid;
        margin: 0;
        padding: 0;
        border-block-start: var(--rule-w) solid var(--color-action-primary);
        list-style: none;
    }

    .jh-publication {
        display: grid;
        gap: var(--space-2);
        margin: 0;
        padding-block: var(--space-5);
        border-block-end: var(--border-w) solid var(--color-border);
        transition:
            opacity var(--motion-reveal) var(--ease-standard),
            transform var(--motion-reveal) var(--ease-decelerate);
        transition-delay: calc(var(--motion-stagger) * (var(--i) + 1));
    }

    .jh-publication > * {
        margin: 0;
    }

    .jh-publication__meta,
    .jh-publication__key,
    .jh-publication__topics {
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-semibold);
        letter-spacing: var(--tracking-metadata);
        line-height: var(--leading-metadata);
        text-transform: uppercase;
    }

    .jh-publication__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
    }

    .jh-publication__type {
        padding-inline-start: var(--space-2);
        border-inline-start: var(--rule-w) solid var(--color-accent-brass);
    }

    .jh-publication__title {
        max-inline-size: 30ch;
        font-size: var(--text-h3);
        letter-spacing: var(--tracking-h3);
        line-height: var(--leading-h3);
    }

    .jh-publication__title > a {
        color: var(--color-text-primary);
        text-decoration: none;
    }

    .jh-publication__title > a::after {
        content: " \2192";
        color: var(--color-action-primary);
    }

    .jh-publication__title > a:hover,
    .jh-publication__title > a:focus-visible {
        color: var(--color-action-primary);
        text-decoration: underline;
        text-underline-offset: 0.16em;
    }

    .jh-publication__authors,
    .jh-publication__version {
        color: var(--color-text-primary);
    }

    .jh-publication__summary {
        max-inline-size: 58ch;
    }

    .jh-publication__topics {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
    }

    /* Research rows: a wider measure and generous rhythm. */
    .jh-publications--research .jh-publication {
        gap: var(--space-3);
        padding-block: var(--space-6);
    }

    .jh-publications--research .jh-publication__title {
        max-inline-size: 36ch;
        font-size: var(--text-h2);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    .jh-publications--research .jh-publication__summary {
        max-inline-size: 66ch;
        font-size: var(--text-body-large);
        line-height: var(--leading-body-large);
    }

    /* Detail metadata: label / value pairs, rendered only when present. */
    .jh-publication-detail__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-5);
        margin: 0;
    }

    .jh-publication-detail__meta > div {
        display: flex;
        gap: var(--space-2);
    }

    .jh-publication-detail__meta dt {
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-semibold);
        letter-spacing: var(--tracking-metadata);
        line-height: var(--leading-metadata);
        text-transform: uppercase;
    }

    .jh-publication-detail__meta dd {
        margin: 0;
    }

    /* Continuation row: quiet links, one line. */
    .jh-publications__continue {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3) var(--space-5);
        padding-block-start: var(--space-5);
        border-block-start: var(--border-w) solid var(--color-border);
    }

    .jh-publications__continue > a {
        color: var(--color-action-primary);
        font-weight: var(--weight-body-semibold);
        text-underline-offset: 0.2em;
    }

    @media (min-width: 48rem) {
        .jh-paths {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: var(--space-8);
        }

        .jh-paths__item + .jh-paths__item {
            padding-inline-start: var(--space-6);
            border-inline-start: var(--border-w) solid var(--color-border-strong);
        }

        /* Reports rows: a firmer grid — meta left, title and deck right. */
        .jh-publications--reports .jh-publication {
            grid-template-columns: minmax(9rem, 3fr) minmax(0, 9fr);
            column-gap: var(--space-6);
        }

        .jh-publications--reports .jh-publication__meta {
            grid-column: 1;
            grid-row: 1 / span 4;
            flex-direction: column;
            align-content: start;
        }

        .jh-publications--reports .jh-publication__title,
        .jh-publications--reports .jh-publication__summary,
        .jh-publications--reports .jh-publication__topics,
        .jh-publications--reports .jh-publication__authors {
            grid-column: 2;
        }
    }

    @media (min-width: 64rem) {
        .jh-publications--research .jh-publication {
            padding-block: var(--space-7);
        }
    }
}

@layer components {
    /* Methodology local polish (owner authority pass 2026-09-24): after the J
       band, the range figure and the construction image were removed, the page
       is typography on paper with one navy statement. The rail reads as an
       editorial index (a rule, not boxes); the body keeps a reading measure;
       each section is announced by its label and heading, not by a drawn rule. */
    .jh-methodology .jh-reveal--align::before {
        content: none;
    }

    .jh-methodology .jh-methodology__section > p:not(.jh-label),
    .jh-methodology .jh-methodology__section > .jh-statement-line {
        max-inline-size: 64ch;
    }

    .jh-methodology .jh-methodology__section > .jh-label {
        margin-block-end: calc(-1 * var(--space-3));
    }

    .jh-methodology .jh-methodology__rail ol {
        gap: 0;
        padding-block-end: 0;
    }

    .jh-methodology .jh-methodology__rail a {
        min-block-size: 2.5rem;
        padding: var(--space-2) var(--space-3) var(--space-2) 0;
        border: 0;
        border-block-end: var(--border-w) solid var(--color-border);
        background: transparent;
        color: var(--color-text-secondary);
        font-weight: var(--weight-body-semibold);
        transition:
            color var(--motion-standard) var(--ease-standard),
            border-color var(--motion-standard) var(--ease-standard);
    }

    .jh-methodology .jh-methodology__rail li:first-child a {
        border-block-start: var(--border-w) solid var(--color-border-strong);
    }

    .jh-methodology .jh-methodology__rail a:hover,
    .jh-methodology .jh-methodology__rail a:focus-visible {
        border-block-end-color: var(--color-accent-primary);
        color: var(--color-text-primary);
    }

    @media (max-width: 63.98rem) {
        .jh-methodology .jh-methodology__rail li + li a {
            margin-inline-start: var(--space-4);
        }

        .jh-methodology .jh-methodology__rail li:first-child a {
            border-block-start: 0;
        }
    }

    @media (min-width: 64rem) {
        .jh-methodology .jh-methodology__rail a {
            display: flex;
            padding-inline-start: var(--space-3);
            border-block-end: 0;
            border-inline-start: var(--rule-w) solid var(--color-border);
        }

        .jh-methodology .jh-methodology__rail li:first-child a {
            border-block-start: 0;
        }

        .jh-methodology .jh-methodology__rail a:hover,
        .jh-methodology .jh-methodology__rail a:focus-visible {
            border-inline-start-color: var(--color-accent-primary);
        }

        .jh-methodology .jh-methodology__content {
            gap: var(--space-9);
        }
    }
}

@layer components {
    /* Methodology authority (owner polish 2026-09-24). One navy institutional
       header opens the page — eyebrow, title, the trust statement, the lede and
       the publication metadata as a document head — then the paper body reads
       as a numbered index of five questions: a hairline and a numeral open each
       section, the rail carries the same numerals, and the uncertainty
       statement stands as the page's second navy moment. No band, no drawing,
       no image. Reduced motion and no-JS read the final state. */
    .jh-methodology {
        --stack-space: 0;
    }

    /* The article is the first child of an immersive main: the navy head meets
       the site header directly; the body carries its own block padding. */
    .jh-site-main--immersive > .jh-methodology {
        padding-block: 0;
    }

    .jh-methodology > .jh-hero--methodology {
        padding-block: var(--space-8) var(--space-7);
        background: var(--gradient-analytical-primary);
    }

    .jh-methodology__head {
        display: grid;
        gap: var(--space-7);
    }

    .jh-methodology__head .jh-methodology__intro {
        max-inline-size: 64ch;
    }

    .jh-methodology__head .jh-label {
        color: var(--color-text-secondary);
    }

    .jh-methodology__head h1 {
        color: var(--color-text-primary);
        font-size: var(--text-display);
        letter-spacing: var(--tracking-display);
        line-height: var(--leading-h1);
    }

    .jh-methodology__head .jh-statement {
        max-inline-size: 30ch;
        color: var(--color-text-primary);
        font-size: var(--text-h1);
        letter-spacing: var(--tracking-h1);
        line-height: var(--leading-h1);
    }

    .jh-methodology__head .jh-type-body-large:not(.jh-statement) {
        color: var(--color-text-secondary);
    }

    .jh-methodology__head .jh-methodology__meta,
    .jh-methodology__head .jh-methodology__meta > div {
        border-color: color-mix(in srgb, var(--color-text-primary) 22%, transparent);
    }

    .jh-methodology__head .jh-methodology__meta dt {
        color: var(--color-text-primary);
    }

    .jh-methodology__head .jh-methodology__meta dd {
        color: var(--color-text-secondary);
    }

    .jh-methodology > .jh-methodology__body {
        padding-block: var(--space-8) var(--section-space);
    }

    /* The body as a numbered index: a hairline and a numeral open each section. */
    .jh-methodology .jh-methodology__content {
        counter-reset: methodology;
    }

    .jh-methodology .jh-methodology__section {
        padding-block-start: var(--space-5);
        border-block-start: var(--border-w) solid var(--color-border-strong);
        counter-increment: methodology;
    }

    .jh-methodology .jh-methodology__section > .jh-label {
        display: flex;
        gap: var(--space-3);
        align-items: baseline;
    }

    .jh-methodology .jh-methodology__section > .jh-label::before {
        color: var(--color-action-primary);
        font-variant-numeric: tabular-nums;
        content: counter(methodology, decimal-leading-zero);
    }

    .jh-methodology .jh-methodology__rail ol {
        counter-reset: rail;
    }

    .jh-methodology .jh-methodology__rail li {
        counter-increment: rail;
    }

    .jh-methodology .jh-methodology__rail a::before {
        flex: 0 0 auto;
        margin-inline-end: var(--space-3);
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-label);
        font-variant-numeric: tabular-nums;
        letter-spacing: var(--tracking-label);
        content: counter(rail, decimal-leading-zero);
    }

    /* The uncertainty statement: a second navy moment with real presence. */
    .jh-methodology .jh-moment {
        min-block-size: 16rem;
        align-content: center;
    }

    @media (min-width: 48rem) {
        .jh-methodology > .jh-hero--methodology {
            padding-block: var(--space-9) var(--space-8);
        }

        .jh-methodology__head .jh-methodology__meta {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: var(--space-7);
        }

        .jh-methodology .jh-moment {
            min-block-size: 20rem;
            padding: var(--space-9) var(--space-8);
        }
    }

    @media (min-width: 64rem) {
        .jh-methodology__head {
            grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
            align-items: end;
            column-gap: var(--space-8);
        }

        .jh-methodology__head .jh-methodology__meta {
            grid-template-columns: minmax(0, 1fr);
        }

        .jh-methodology__head .jh-methodology__meta > div {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-1);
        }

        .jh-methodology .jh-methodology__section > h2 {
            font-size: var(--text-h1);
            letter-spacing: var(--tracking-h1);
            line-height: var(--leading-h1);
            max-inline-size: 22ch;
        }
    }
}

@layer components {
    /* Country first, language second (2026-09-24): the shell's context
       selectors reuse the navigation disclosure and submenu; the language list
       (the footer carries no country or language group). */
    .jh-nav__item--context .jh-nav__disclosure > span:not(.jh-nav__indicator) {
        white-space: nowrap;
    }

    .jh-context__list {
        min-inline-size: 14rem;
    }

    .jh-context__link[aria-current="true"] {
        color: var(--color-text-primary);
        font-weight: var(--weight-body-semibold);
    }

    /* Languages nest under their country: a compact row of plain language
       names; the active one carries a visible mark, never colour alone. */
    .jh-context__languages {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-2);
        margin: 0;
        padding: 0 0 var(--space-2) var(--space-4);
        list-style: none;
    }

    .jh-context__languages li + li {
        margin-block-start: 0;
    }

    .jh-context__language {
        display: inline-flex;
        min-block-size: 2rem;
        align-items: center;
        gap: var(--space-1);
        padding-inline: var(--space-2);
        border-radius: var(--radius-sm);
        color: var(--color-text-secondary);
        font-size: var(--text-body-small);
        text-decoration: none;
    }

    .jh-context__language:hover,
    .jh-context__language:focus-visible {
        color: var(--color-text-primary);
    }

    .jh-context__language[aria-current="true"] {
        color: var(--color-text-primary);
        font-weight: var(--weight-body-semibold);
    }

    /* Without JavaScript the submenus render statically beside their
       disclosures; two more context groups must wrap instead of widening the
       header beyond the viewport. The enhanced layout is untouched. */
    @media (min-width: 64rem) {
        html:not(.js) .jh-primary-nav__list {
            flex-wrap: wrap;
            row-gap: var(--space-3);
        }

        html:not(.js) .jh-context__list {
            min-inline-size: 0;
        }
    }

    /* The aperture's statement panel is navy-veiled white text by design; on
       the dark field the inverse tokens would flip it, so it keeps paper. */
    .jh-home-panel--narrative .jh-aperture__panel p {
        color: var(--palette-paper);
    }

    .jh-home-panel--narrative .jh-aperture__panel h2 {
        color: var(--palette-silver);
    }
}