/*
 * V4-a immersive layer
 * Keep interaction-specific styling here so the core visual system in app.css
 * remains easy to reuse across other editions.
 */

:root {
    --v4-page-progress: 0;
}

.v4-page-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 2000;
    height: 2px;
    overflow: hidden;
    pointer-events: none;
}

.v4-page-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--v4-teal), var(--v4-blue), var(--v4-amber));
    box-shadow: 0 0 18px rgba(127, 227, 208, 0.8);
    transform: scaleX(var(--v4-page-progress));
    transform-origin: left center;
    transition: transform 80ms linear;
    will-change: transform;
}

/* Hero lens controller */
.cinematic-hero__media {
    pointer-events: none;
}

.cinematic-hero__media > .hero-lens-image {
    z-index: 0;
    opacity: 0;
    transform: scale(1.055);
    filter: saturate(0.72) contrast(1.08) brightness(0.82);
    transition:
        opacity 850ms cubic-bezier(0.2, 0.72, 0.2, 1),
        transform 1600ms cubic-bezier(0.2, 0.72, 0.2, 1),
        filter 850ms ease;
}

.cinematic-hero__media > .hero-lens-image.is-active {
    opacity: 1;
    transform: scale(1);
    filter: saturate(0.88) contrast(1.05) brightness(0.9);
}

.cinematic-hero__veil {
    z-index: 3;
    pointer-events: none;
}

.cinematic-hero__grain {
    z-index: 4;
}

.three-scene.cinematic-hero__three {
    z-index: 2;
    opacity: 0.78;
    pointer-events: auto;
    filter: drop-shadow(0 26px 58px rgba(6, 18, 25, 0.42));
}

.three-scene.cinematic-hero__three canvas {
    cursor: grab;
}

.three-scene.cinematic-hero__three.is-dragging canvas {
    cursor: grabbing;
}

.hero-console {
    position: relative;
    border-color: rgba(205, 235, 238, 0.24);
    background:
        linear-gradient(145deg, rgba(40, 61, 72, 0.8), rgba(22, 37, 47, 0.84)),
        rgba(28, 44, 55, 0.78);
    box-shadow:
        0 34px 100px rgba(4, 14, 20, 0.38),
        inset 0 1px rgba(255, 255, 255, 0.035);
}

.hero-console::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 78% 18%, rgba(127, 227, 208, 0.12), transparent 32%);
    pointer-events: none;
}

.hero-console__top,
.hero-console__lenses,
.hero-console__active,
.hero-console__hint {
    position: relative;
    z-index: 1;
}

.hero-console__lenses button {
    overflow: hidden;
    min-height: 110px;
    transition:
        background 220ms ease,
        color 220ms ease,
        box-shadow 220ms ease;
}

.hero-console__lenses button::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, var(--v4-teal), var(--v4-amber));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.hero-console__lenses button:hover,
.hero-console__lenses button.is-active {
    background: linear-gradient(135deg, rgba(127, 227, 208, 0.14), rgba(145, 191, 252, 0.05));
    box-shadow: inset 0 0 35px rgba(127, 227, 208, 0.045);
}

.hero-console__lenses button.is-active::before {
    transform: scaleX(1);
}

.hero-console__lenses button > i {
    position: absolute;
    top: 17px;
    right: 17px;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(127, 227, 208, 0.48);
    border-radius: 50%;
    transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.hero-console__lenses button.is-active > i {
    background: var(--v4-teal);
    box-shadow: 0 0 15px var(--v4-teal);
    transform: scale(1.12);
}

.hero-console__active {
    min-height: 235px;
    padding: 24px 25px 21px;
    border-top: 1px solid var(--v4-line);
    animation: lens-enter 420ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.hero-console__active > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    color: var(--v4-amber);
    font-family: Consolas, monospace;
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-console__active > div span:last-child {
    color: #7e969f;
}

.hero-console__active h2 {
    max-width: 360px;
    margin: 18px 0 12px;
    font-size: clamp(1.28rem, 1.8vw, 1.72rem);
    font-weight: 420;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.hero-console__active p {
    margin: 0;
    color: #9fb2ba;
    font-size: 0.74rem;
    line-height: 1.6;
}

.hero-console__active a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--v4-teal-soft);
    font-size: 0.67rem;
    font-weight: 700;
}

.hero-console__active a .mud-icon-root {
    font-size: 0.92rem;
    transition: transform 180ms ease;
}

.hero-console__active a:hover .mud-icon-root {
    transform: translate(3px, -3px);
}

.hero-console__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 24px;
    border-top: 1px solid var(--v4-line);
    color: #748b95;
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-console__hint span {
    color: var(--v4-teal);
    font-size: 0.88rem;
}

@keyframes lens-enter {
    from {
        opacity: 0;
        transform: translateY(9px);
    }

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

@media (max-width: 1080px) {
    .cinematic-hero__content {
        padding-top: 150px;
    }

    .hero-console {
        width: min(720px, 100%);
    }
}

@media (max-width: 760px) {
    .cinematic-hero {
        min-height: 1280px;
    }

    .cinematic-hero__content {
        padding-block: 300px 70px;
    }

    .cinematic-hero__media > .hero-lens-image {
        object-position: 66% center;
    }

    .three-scene.cinematic-hero__three {
        opacity: 0.58;
    }

    .hero-console__active {
        min-height: 0;
    }
}

/* Reusable motion and depth behavior */
.immersive-effects-host {
    display: none;
}

.v4-a-site.immersive-ready [data-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 720ms cubic-bezier(0.2, 0.72, 0.2, 1),
        transform 850ms cubic-bezier(0.2, 0.72, 0.2, 1);
    transition-delay: calc(var(--reveal-order, 0) * 45ms);
}

.v4-a-site.immersive-ready [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.v4-a-site [data-tilt] {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --glow-x: 50%;
    --glow-y: 50%;
    transform: perspective(1500px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
    transform-style: preserve-3d;
    transition: transform 260ms cubic-bezier(0.2, 0.72, 0.2, 1);
    will-change: transform;
}

.v4-a-site.immersive-ready [data-reveal][data-tilt] {
    transform: translateY(34px) perspective(1500px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

.v4-a-site.immersive-ready [data-reveal][data-tilt].is-visible {
    transform: translateY(0) perspective(1500px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

.practice-atlas__stage::before,
.delivery-journey__stage::before,
.integration-explorer__scene::before,
.integration-cinematic::before,
.service-chapter__visual::before,
.visual-story__image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(184, 242, 231, 0.12), transparent 30%);
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
}

.practice-atlas__stage:hover::before,
.delivery-journey__stage:hover::before,
.integration-explorer__scene:hover::before,
.integration-cinematic:hover::before,
.service-chapter__visual:hover::before,
.visual-story__image:hover::before {
    opacity: 1;
}

.orientation-card .mud-icon-root {
    transition: transform 260ms cubic-bezier(0.2, 0.72, 0.2, 1), color 180ms ease;
}

.orientation-card:hover .mud-icon-root {
    color: var(--v4-teal-soft);
    transform: translateY(-5px) rotate(-4deg);
}

.orientation-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--v4-teal), var(--v4-amber));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 280ms ease;
}

.orientation-card:hover::before {
    transform: scaleX(1);
}

.metric-card {
    position: relative;
    overflow: hidden;
    transition: background 220ms ease, transform 220ms ease;
}

.metric-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, var(--v4-teal), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms ease;
}

.metric-card:hover {
    z-index: 2;
    background: rgba(127, 227, 208, 0.055);
    transform: translateY(-4px);
}

.metric-card:hover::after {
    transform: scaleX(1);
}

.pattern-grid-v4 article {
    position: relative;
    overflow: hidden;
    transition: border-color 220ms ease, transform 260ms cubic-bezier(0.2, 0.72, 0.2, 1), background 220ms ease;
}

.pattern-grid-v4 article:hover {
    z-index: 2;
    border-color: var(--v4-line-strong);
    background: linear-gradient(145deg, rgba(43, 65, 77, 0.95), rgba(31, 49, 60, 0.95));
    transform: translateY(-7px);
}

@media (prefers-reduced-motion: reduce) {
    .v4-a-site.immersive-ready [data-reveal],
    .v4-a-site.immersive-ready [data-reveal].is-visible,
    .v4-a-site [data-tilt],
    .v4-a-site.immersive-ready [data-reveal][data-tilt],
    .v4-a-site.immersive-ready [data-reveal][data-tilt].is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Integration lens readout */
.integration-explorer__scene {
    box-shadow: 0 36px 90px rgba(4, 14, 20, 0.24);
    transform-style: preserve-3d;
}

.integration-explorer__scene .three-scene canvas {
    cursor: grab;
}

.integration-explorer__scene .three-scene.is-dragging canvas {
    cursor: grabbing;
}

.integration-explorer__readout {
    position: absolute;
    top: 26px;
    left: 28px;
    z-index: 3;
    width: min(390px, calc(100% - 56px));
    padding: 22px 24px;
    border: 1px solid rgba(205, 235, 238, 0.16);
    border-radius: 14px;
    background: rgba(19, 32, 41, 0.72);
    box-shadow: 0 22px 55px rgba(5, 15, 21, 0.24);
    backdrop-filter: blur(18px);
    pointer-events: none;
    animation: lens-enter 420ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.integration-explorer__readout > span {
    color: var(--v4-amber);
    font-size: 0.56rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.integration-explorer__readout h3 {
    margin: 13px 0 8px;
    font-size: clamp(1.25rem, 2.1vw, 1.85rem);
    font-weight: 420;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.integration-explorer__readout p {
    margin: 0;
    color: #9eb1b9;
    font-size: 0.75rem;
    line-height: 1.6;
}

.integration-explorer__controls button {
    position: relative;
    justify-content: center;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.integration-explorer__controls button.is-active {
    box-shadow: inset 0 -2px var(--v4-teal);
}

/* Interactive delivery journey */
.delivery-journey {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.92fr);
    gap: clamp(42px, 7vw, 92px);
    align-items: start;
}

.delivery-journey__stage {
    position: sticky;
    top: 112px;
    min-height: 700px;
    overflow: hidden;
    border: 1px solid rgba(205, 235, 238, 0.2);
    border-radius: 22px;
    background: var(--v4-surface);
    box-shadow: 0 40px 100px rgba(4, 14, 20, 0.28);
    transform-style: preserve-3d;
}

.delivery-journey__images,
.delivery-journey__images img,
.delivery-journey__shade {
    position: absolute;
    inset: 0;
}

.delivery-journey__images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    filter: saturate(0.76) contrast(1.08);
    transition: opacity 720ms ease, transform 1300ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.delivery-journey__images img.is-active {
    opacity: 0.46;
    transform: scale(1);
}

.delivery-journey__shade {
    z-index: 1;
    background:
        linear-gradient(0deg, rgba(17, 29, 37, 0.98) 0%, rgba(17, 29, 37, 0.52) 45%, rgba(17, 29, 37, 0.18)),
        radial-gradient(circle at 56% 35%, transparent, rgba(17, 29, 37, 0.48) 72%);
    pointer-events: none;
}

.delivery-journey__stage .three-scene {
    z-index: 2;
    min-height: 700px;
    mix-blend-mode: screen;
}

.delivery-journey__stage .three-scene canvas {
    cursor: grab;
}

.delivery-journey__stage .three-scene.is-dragging canvas {
    cursor: grabbing;
}

.delivery-journey__status {
    position: absolute;
    top: 24px;
    right: 25px;
    left: 25px;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #879da6;
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    pointer-events: none;
}

.delivery-journey__status span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--v4-teal-soft);
}

.delivery-journey__status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v4-teal);
    box-shadow: 0 0 12px var(--v4-teal);
}

.delivery-journey__readout {
    position: absolute;
    right: 34px;
    bottom: 34px;
    left: 34px;
    z-index: 4;
    max-width: 570px;
    pointer-events: none;
    animation: lens-enter 420ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.delivery-journey__readout > span {
    color: var(--v4-amber);
    font-size: 0.59rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.delivery-journey__readout h3 {
    margin: 14px 0 10px;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 320;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.delivery-journey__readout p {
    max-width: 520px;
    margin: 0;
    color: #aabac0;
    font-size: 0.85rem;
    line-height: 1.65;
}

.delivery-journey__steps {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--v4-line);
    list-style: none;
}

.delivery-journey__steps li {
    border-bottom: 1px solid var(--v4-line);
}

.delivery-journey__steps button {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: start;
    gap: 20px;
    width: 100%;
    padding: 29px 5px;
    border: 0;
    background: transparent;
    color: var(--v4-ink);
    text-align: left;
    cursor: pointer;
    transition: padding 220ms ease, background 220ms ease;
}

.delivery-journey__steps button:hover,
.delivery-journey__steps button.is-active {
    padding-inline: 20px;
    background: linear-gradient(90deg, rgba(127, 227, 208, 0.09), transparent);
}

.delivery-journey__steps button::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--v4-teal);
    transform: scaleY(0);
    transition: transform 220ms ease;
}

.delivery-journey__steps button.is-active::before {
    transform: scaleY(1);
}

.delivery-journey__steps button > span {
    padding-top: 5px;
    color: var(--v4-amber);
    font-family: Consolas, monospace;
    font-size: 0.62rem;
}

.delivery-journey__steps h3 {
    margin: 0 0 9px;
    font-size: 1.18rem;
    font-weight: 570;
}

.delivery-journey__steps p {
    margin: 0;
    color: var(--v4-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}

.delivery-journey__steps .mud-icon-root {
    margin-top: 3px;
    color: #69818c;
    font-size: 1rem;
    transition: color 180ms ease, transform 180ms ease;
}

.delivery-journey__steps button.is-active .mud-icon-root {
    color: var(--v4-teal);
    transform: translateX(5px);
}

@media (max-width: 1080px) {
    .delivery-journey {
        grid-template-columns: 1fr;
    }

    .delivery-journey__stage {
        position: relative;
        top: auto;
    }
}

@media (max-width: 760px) {
    .integration-explorer__readout {
        top: 18px;
        left: 18px;
        width: calc(100% - 36px);
        padding: 18px;
    }

    .integration-explorer__readout p {
        display: none;
    }

    .delivery-journey__stage,
    .delivery-journey__stage .three-scene {
        min-height: 560px;
    }

    .delivery-journey__status span:last-child {
        display: none;
    }

    .delivery-journey__readout {
        right: 24px;
        bottom: 25px;
        left: 24px;
    }

    .delivery-journey__steps button {
        grid-template-columns: 38px 1fr auto;
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cinematic-hero__media > .hero-lens-image,
    .hero-console__active,
    .v4-page-progress span {
        animation: none;
        transition: none;
    }
}

/* Interactive service atlas */
.practice-atlas {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(420px, 0.84fr);
    min-height: 780px;
    overflow: hidden;
    border: 1px solid rgba(205, 235, 238, 0.2);
    border-radius: 24px;
    background: var(--v4-surface);
    box-shadow: 0 48px 120px rgba(4, 14, 20, 0.3);
}

.practice-atlas__stage {
    position: relative;
    min-height: 780px;
    overflow: hidden;
    border-right: 1px solid var(--v4-line);
    background:
        radial-gradient(circle at center, rgba(127, 227, 208, 0.14), transparent 34%),
        var(--v4-bg-deep);
    transform-style: preserve-3d;
}

.practice-atlas__images,
.practice-atlas__images img,
.practice-atlas__shade {
    position: absolute;
    inset: 0;
}

.practice-atlas__images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    filter: saturate(0.72) contrast(1.08);
    transition: opacity 750ms ease, transform 1200ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.practice-atlas__images img.is-active {
    opacity: 0.31;
    transform: scale(1);
}

.practice-atlas__shade {
    z-index: 1;
    background:
        linear-gradient(0deg, rgba(18, 31, 40, 0.94), transparent 52%),
        radial-gradient(circle at center, transparent 0 22%, rgba(18, 31, 40, 0.38) 72%);
    pointer-events: none;
}

.practice-atlas__stage .three-scene {
    z-index: 2;
    min-height: 780px;
    mix-blend-mode: screen;
}

.practice-atlas__stage .three-scene canvas {
    cursor: grab;
}

.practice-atlas__stage .three-scene.is-dragging canvas {
    cursor: grabbing;
}

.practice-atlas__status {
    position: absolute;
    top: 22px;
    right: 24px;
    left: 24px;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #8fa4ad;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: none;
}

.practice-atlas__status span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.practice-atlas__status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v4-teal);
    box-shadow: 0 0 13px var(--v4-teal);
}

.practice-atlas__status b {
    color: var(--v4-teal);
    font-size: 0.85rem;
}

.practice-atlas__stage-copy {
    position: absolute;
    right: 30px;
    bottom: 28px;
    left: 30px;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    pointer-events: none;
}

.practice-atlas__stage-copy > span {
    color: var(--v4-amber);
    font-family: Consolas, monospace;
    font-size: 0.7rem;
}

.practice-atlas__stage-copy strong {
    max-width: 460px;
    color: rgba(242, 247, 247, 0.78);
    font-size: clamp(1.3rem, 2.3vw, 2.15rem);
    font-weight: 360;
    line-height: 1.08;
    text-align: right;
    letter-spacing: -0.03em;
}

.practice-atlas__console {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background:
        radial-gradient(circle at 92% 0, rgba(127, 227, 208, 0.1), transparent 27%),
        linear-gradient(145deg, rgba(42, 64, 76, 0.68), rgba(28, 44, 55, 0.94));
}

.practice-atlas__console-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 76px;
    padding: 19px 24px;
    border-bottom: 1px solid var(--v4-line);
}

.practice-atlas__console-top .v4-eyebrow {
    margin: 0;
}

.practice-atlas__console-top > span {
    color: #7d929b;
    font-family: Consolas, monospace;
    font-size: 0.61rem;
}

.practice-atlas__nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-bottom: 1px solid var(--v4-line);
}

.practice-atlas__nav button {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    min-height: 72px;
    padding: 13px 16px;
    border: 0;
    border-right: 1px solid var(--v4-line);
    border-bottom: 1px solid var(--v4-line);
    background: transparent;
    color: var(--v4-ink);
    text-align: left;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
}

.practice-atlas__nav button:nth-child(even) {
    border-right: 0;
}

.practice-atlas__nav button:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.practice-atlas__nav button:hover,
.practice-atlas__nav button.is-active {
    background: rgba(127, 227, 208, 0.095);
}

.practice-atlas__nav button.is-active {
    box-shadow: inset 3px 0 var(--v4-teal);
}

.practice-atlas__nav button > span {
    color: var(--v4-amber);
    font-family: Consolas, monospace;
    font-size: 0.54rem;
}

.practice-atlas__nav button > strong {
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.25;
}

.practice-atlas__nav button .mud-icon-root {
    color: #728a94;
    font-size: 1.05rem;
}

.practice-atlas__nav button.is-active .mud-icon-root {
    color: var(--v4-teal);
}

.practice-atlas__detail {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(26px, 3.2vw, 42px);
    animation: lens-enter 420ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.practice-atlas__detail > span {
    color: var(--v4-amber);
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.practice-atlas__detail h3 {
    margin: 15px 0;
    font-size: clamp(1.65rem, 2.9vw, 2.75rem);
    font-weight: 360;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.practice-atlas__detail > p,
.practice-atlas__detail > div p {
    margin: 0;
    color: var(--v4-muted);
    font-size: 0.83rem;
    line-height: 1.65;
}

.practice-atlas__detail > div {
    margin-top: 22px;
    padding-top: 19px;
    border-top: 1px solid var(--v4-line);
}

.practice-atlas__detail > div strong {
    display: block;
    margin-bottom: 7px;
    color: var(--v4-teal-soft);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.practice-atlas__detail > a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 22px;
    color: var(--v4-teal-soft);
    font-size: 0.7rem;
    font-weight: 700;
}

.practice-atlas__detail > a .mud-icon-root {
    font-size: 1rem;
    transition: transform 180ms ease;
}

.practice-atlas__detail > a:hover .mud-icon-root {
    transform: translate(3px, 3px);
}

@media (max-width: 1080px) {
    .practice-atlas {
        grid-template-columns: 1fr;
    }

    .practice-atlas__stage {
        min-height: 650px;
        border-right: 0;
        border-bottom: 1px solid var(--v4-line);
    }

    .practice-atlas__stage .three-scene {
        min-height: 650px;
    }

    .practice-atlas__detail {
        min-height: 350px;
    }
}

@media (max-width: 760px) {
    .practice-atlas,
    .practice-atlas__stage,
    .practice-atlas__stage .three-scene {
        min-height: 520px;
    }

    .practice-atlas__nav {
        grid-template-columns: 1fr;
    }

    .practice-atlas__nav button,
    .practice-atlas__nav button:nth-child(even),
    .practice-atlas__nav button:nth-last-child(-n + 2) {
        min-height: 62px;
        border-right: 0;
        border-bottom: 1px solid var(--v4-line);
    }

    .practice-atlas__nav button:last-child {
        border-bottom: 0;
    }

    .practice-atlas__status span:last-child {
        display: none;
    }

    .practice-atlas__stage-copy strong {
        max-width: 260px;
        font-size: 1.25rem;
    }
}