/* =========================================================
   RADWAN PORTFOLIO V2
   Shared Case Study System
========================================================= */


/* =========================================================
   Variables
========================================================= */

.case-v2-page {
    --container-width: 1280px;

    --case-line: rgba(255, 255, 255, 0.09);
    --case-line-strong: rgba(255, 255, 255, 0.18);

    --case-section-space:
        clamp(7rem, 10vw, 10rem);
}


/* =========================================================
   Shared
========================================================= */

.case-v2-page main p {
    text-wrap: pretty;
}

.case-v2-hero-grid>*,
.case-v2-two-column>*,
.case-v2-section-heading>*,
.case-v2-system-grid>*,
.case-v2-ownership-grid>*,
.case-v2-outcome-grid>*,
.case-v2-skills-grid>*,
.case-v2-navigation-grid>* {
    min-width: 0;
}

.case-v2-section {
    padding-block: var(--case-section-space);

    border-top:
        1px solid var(--case-line);
}

.case-v2-breadcrumb {
    display: flex;
    flex-wrap: wrap;

    gap: 0.65rem;

    margin-bottom:
        clamp(3rem, 6vw, 5rem);

    color: var(--color-text-faint);

    font-size: 0.7rem;
    font-weight: 650;
}

.case-v2-breadcrumb a {
    color: var(--color-text-muted);

    transition:
        color 180ms ease;
}

.case-v2-breadcrumb a:hover,
.case-v2-breadcrumb a:focus-visible {
    color: var(--color-accent);
}

.case-v2-two-column {
    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr) minmax(0, 1.12fr);

    gap:
        clamp(3.5rem, 9vw, 9rem);
}

.case-v2-two-column h2,
.case-v2-section-heading h2,
.case-v2-outcome-grid h2 {
    margin-bottom: 0;

    font-size:
        clamp(2.8rem, 4.8vw, 5rem);

    line-height: 1;

    letter-spacing: -0.065em;
}

.case-v2-reading {
    max-width: 740px;
}

.case-v2-reading .large-text {
    margin-bottom: 1.7rem;
}

.case-v2-reading p:last-child {
    margin-bottom: 0;
}

.case-v2-section-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.34fr) minmax(300px, 0.66fr);

    align-items: end;

    gap:
        clamp(3rem, 8vw, 8rem);

    margin-bottom:
        clamp(4rem, 7vw, 6rem);
}

.case-v2-section-heading>p {
    max-width: 590px;

    margin-bottom: 0;

    font-size: 0.98rem;
    line-height: 1.82;
}


/* =========================================================
   Reveal
========================================================= */

.has-v2-motion [data-reveal] {
    opacity: 0;

    transform:
        translateY(32px);

    transition:
        opacity 760ms ease,
        transform 760ms cubic-bezier(0.18,
            0.72,
            0.2,
            1);
}

.has-v2-motion [data-reveal].is-revealed {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   Hero
========================================================= */

.case-v2-hero {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5rem, 8vw, 8rem) clamp(6rem, 9vw, 9rem);

    background:
        radial-gradient(circle at 80% 20%,
            rgba(140, 169, 255, 0.13),
            transparent 30%),
        radial-gradient(circle at 10% 94%,
            rgba(167, 139, 250, 0.05),
            transparent 30%);
}

.case-v2-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.22;

    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px);

    background-size:
        72px 72px;

    -webkit-mask-image:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.95),
            transparent 96%);

    mask-image:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.95),
            transparent 96%);
}

.case-v2-hero .container {
    position: relative;

    z-index: 2;
}

.case-v2-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr) minmax(320px, 0.6fr);

    align-items: end;

    gap:
        clamp(3.5rem, 8vw, 8rem);
}

.case-v2-hero-content {
    max-width: 920px;
}

.case-v2-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap:
        0.65rem 1.2rem;

    margin-bottom: 1.8rem;
}

.case-v2-hero-meta span {
    color: var(--color-accent);

    font-size: 0.68rem;
    font-weight: 750;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.case-v2-hero-meta span:last-child {
    color: var(--color-text-faint);
}

.case-v2-hero h1 {
    max-width: 940px;

    margin-bottom: 2rem;

    font-size:
        clamp(3.8rem, 6.3vw, 7rem);

    line-height: 0.94;

    letter-spacing: -0.075em;

    text-wrap: balance;
}

.case-v2-hero h1 span {
    display: block;

    color: var(--color-accent);
}

.case-v2-hero-lead {
    max-width: 780px;

    margin-bottom: 2.4rem;

    color: var(--color-text-soft);

    font-size:
        clamp(1.05rem, 1.45vw, 1.24rem);

    line-height: 1.82;
}

.case-v2-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 0.85rem;
}


/* =========================================================
   Hero Summary
========================================================= */

.case-v2-summary {
    border-top:
        1px solid var(--case-line-strong);
}

.case-v2-summary dl {
    margin: 0;
}

.case-v2-summary div {
    border-bottom:
        1px solid var(--case-line);

    padding-block: 1.25rem;
}

.case-v2-summary dt {
    margin-bottom: 0.4rem;

    color: var(--color-text-faint);

    font-size: 0.62rem;
    font-weight: 750;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.case-v2-summary dd {
    margin: 0;

    color: var(--color-text-soft);

    font-size: 0.87rem;
    line-height: 1.6;
}


/* =========================================================
   Proof Strip
========================================================= */

.case-v2-proof-strip {
    border-block:
        1px solid var(--case-line);

    background: var(--color-background-soft);
}

.case-v2-proof-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.case-v2-proof-grid article {
    min-height: 220px;

    border-right:
        1px solid var(--case-line);

    padding:
        2.5rem 2rem;
}

.case-v2-proof-grid article:first-child {
    padding-left: 0;
}

.case-v2-proof-grid article:last-child {
    border-right: 0;

    padding-right: 0;
}

.case-v2-proof-grid article>span {
    display: block;

    margin-bottom: 2.8rem;

    color: var(--color-accent);

    font-size: 0.64rem;
    font-weight: 750;

    letter-spacing: 0.13em;
}

.case-v2-proof-grid strong {
    display: block;

    margin-bottom: 0.7rem;

    color: var(--color-text);

    font-size: 1.05rem;
}

.case-v2-proof-grid p {
    max-width: 260px;

    margin-bottom: 0;

    font-size: 0.82rem;
    line-height: 1.72;
}


/* =========================================================
   Situation
========================================================= */

.case-v2-situation {
    background:
        linear-gradient(135deg,
            rgba(140, 169, 255, 0.025),
            transparent 55%);
}


/* =========================================================
   Challenge
========================================================= */

.case-v2-challenge {
    background: var(--color-background-soft);
}

.case-v2-challenge-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top:
        1px solid var(--case-line-strong);
}

.case-v2-challenge-grid article {
    min-height: 390px;

    border-right:
        1px solid var(--case-line);

    padding:
        2.8rem 2.3rem;
}

.case-v2-challenge-grid article:first-child {
    padding-left: 0;
}

.case-v2-challenge-grid article:last-child {
    border-right: 0;

    padding-right: 0;
}

.case-v2-challenge-grid article>span {
    display: block;

    margin-bottom: 5rem;

    color: var(--color-accent);

    font-size: 0.65rem;
    font-weight: 750;

    letter-spacing: 0.13em;
}

.case-v2-challenge-grid h3 {
    max-width: 370px;

    margin-bottom: 1.2rem;

    font-size:
        clamp(1.7rem, 2.6vw, 2.35rem);

    line-height: 1.08;
}

.case-v2-challenge-grid p {
    max-width: 410px;

    margin-bottom: 0;

    font-size: 0.9rem;
    line-height: 1.78;
}


/* =========================================================
   System Anatomy
========================================================= */

.case-v2-system-section {
    background:
        radial-gradient(circle at 8% 8%,
            rgba(140, 169, 255, 0.06),
            transparent 26%);
}

.case-v2-system-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr) minmax(340px, 0.92fr);

    align-items: center;

    gap:
        clamp(3.5rem, 8vw, 8rem);
}

.case-v2-system-map {
    --spot-x: 50%;
    --spot-y: 50%;

    position: relative;
}

.case-v2-system-map::before {
    content: "";

    position: absolute;

    inset: -40px;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(420px circle at var(--spot-x) var(--spot-y),
            rgba(140, 169, 255, 0.09),
            transparent 62%);
}

.case-v2-system-window {
    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 22px;

    background: #0e121b;

    box-shadow:
        0 36px 90px rgba(0, 0, 0, 0.32);
}

.case-v2-system-toolbar {
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    border-bottom:
        1px solid var(--case-line);

    padding-inline: 18px;
}

.case-v2-system-toolbar>div {
    display: flex;

    gap: 7px;
}

.case-v2-system-toolbar i {
    width: 8px;
    height: 8px;

    display: block;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.17);
}

.case-v2-system-toolbar>span {
    color: var(--color-text-faint);

    font-size: 0.62rem;
}

.case-v2-system-canvas {
    min-height: 470px;

    display: grid;

    grid-template-columns:
        repeat(7, auto);

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding:
        3rem 2rem;
}

.case-v2-system-node {
    width: 130px;
    min-height: 145px;

    display: flex;
    align-items: flex-start;

    flex-direction: column;

    border:
        1px solid var(--case-line);

    border-radius: 12px;

    padding:
        1.1rem;

    background:
        rgba(255, 255, 255, 0.018);

    color: inherit;

    cursor: pointer;

    text-align: left;

    transition:
        border-color 200ms ease,
        background-color 200ms ease,
        transform 200ms ease,
        box-shadow 200ms ease;
}

.case-v2-system-node:hover,
.case-v2-system-node:focus-visible {
    transform:
        translateY(-3px);

    border-color:
        rgba(140, 169, 255, 0.4);
}

.case-v2-system-node.is-active {
    border-color: var(--color-accent);

    background:
        rgba(140, 169, 255, 0.08);

    box-shadow:
        0 0 0 4px rgba(140, 169, 255, 0.05);
}

.case-v2-system-node>span {
    display: block;

    margin-bottom: 2rem;

    color: var(--color-accent);

    font-size: 0.6rem;
    font-weight: 750;

    letter-spacing: 0.12em;
}

.case-v2-system-node strong {
    display: block;

    margin-bottom: 0.35rem;

    color: var(--color-text);

    font-size: 0.88rem;
}

.case-v2-system-node small {
    color: var(--color-text-faint);

    font-size: 0.64rem;
    line-height: 1.45;
}

.case-v2-system-connector {
    width: 22px;
    height: 1px;

    display: block;

    background:
        linear-gradient(90deg,
            rgba(140, 169, 255, 0.22),
            var(--color-accent));
}

.case-v2-system-detail {
    max-width: 620px;
}

.case-v2-system-detail-label {
    margin-bottom: 1.4rem;

    color: var(--color-accent);

    font-size: 0.66rem;
    font-weight: 750;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.case-v2-system-panel[hidden] {
    display: none;
}

.case-v2-system-panel>span {
    display: block;

    margin-bottom: 1rem;

    color: var(--color-text-faint);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.case-v2-system-panel h3 {
    max-width: 620px;

    margin-bottom: 1.4rem;

    font-size:
        clamp(2rem, 3.7vw, 3.6rem);

    line-height: 1.03;
}

.case-v2-system-panel>p {
    max-width: 600px;

    margin-bottom: 2rem;

    font-size: 0.96rem;
    line-height: 1.8;
}

.case-v2-system-panel ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.case-v2-system-panel li {
    position: relative;

    border-top:
        1px solid var(--case-line);

    padding:
        0.82rem 0 0.82rem 1.15rem;

    color: var(--color-text-soft);

    font-size: 0.86rem;
}

.case-v2-system-panel li:last-child {
    border-bottom:
        1px solid var(--case-line);
}

.case-v2-system-panel li::before {
    content: "";

    position: absolute;

    top: 1.25rem;
    left: 0;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--color-accent);
}


/* =========================================================
   Ownership
========================================================= */

.case-v2-ownership {
    background: var(--color-background-soft);
}

.case-v2-ownership-grid {
    display: grid;

    grid-template-columns:
        minmax(310px, 0.7fr) minmax(0, 1.3fr);

    gap:
        clamp(4rem, 9vw, 9rem);
}

.case-v2-sticky-heading {
    position: sticky;

    top:
        calc(var(--header-height) + 3rem);

    align-self: start;
}

.case-v2-sticky-heading h2 {
    max-width: 650px;

    margin-bottom: 1.5rem;

    font-size:
        clamp(2.8rem, 4.8vw, 4.8rem);

    line-height: 1;
}

.case-v2-sticky-heading>p:last-child {
    max-width: 550px;

    margin-bottom: 0;

    font-size: 0.96rem;
    line-height: 1.82;
}

.case-v2-ownership-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.case-v2-ownership-list li {
    display: grid;

    grid-template-columns:
        50px 1fr;

    gap: 1.5rem;

    border-top:
        1px solid var(--case-line);

    padding-block:
        clamp(2.7rem, 5vw, 4rem);
}

.case-v2-ownership-list li:last-child {
    border-bottom:
        1px solid var(--case-line);
}

.case-v2-ownership-list>li>span {
    color: var(--color-accent);

    font-size: 0.65rem;
    font-weight: 750;

    letter-spacing: 0.12em;
}

.case-v2-ownership-list li div>p:first-child {
    margin-bottom: 0.7rem;

    color: var(--color-accent);

    font-size: 0.64rem;
    font-weight: 750;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.case-v2-ownership-list h3 {
    max-width: 700px;

    margin-bottom: 0.9rem;

    font-size:
        clamp(1.6rem, 2.8vw, 2.4rem);

    line-height: 1.08;
}

.case-v2-ownership-list li div>p:last-child {
    max-width: 680px;

    margin-bottom: 0;

    font-size: 0.9rem;
    line-height: 1.78;
}


/* =========================================================
   Decisions
========================================================= */

.case-v2-decision-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top:
        1px solid var(--case-line-strong);
}

.case-v2-decision-grid article {
    min-height: 410px;

    border-right:
        1px solid var(--case-line);

    padding:
        2.7rem 2.3rem;
}

.case-v2-decision-grid article:first-child {
    padding-left: 0;
}

.case-v2-decision-grid article:last-child {
    border-right: 0;

    padding-right: 0;
}

.case-v2-decision-grid article>span {
    display: block;

    margin-bottom: 4.5rem;

    color: var(--color-accent);

    font-size: 0.65rem;
    font-weight: 750;

    letter-spacing: 0.12em;
}

.case-v2-decision-grid article>p:first-of-type {
    margin-bottom: 1rem;

    color: var(--color-accent);

    font-size: 0.64rem;
    font-weight: 750;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.case-v2-decision-grid h3 {
    max-width: 390px;

    margin-bottom: 1.2rem;

    font-size:
        clamp(1.65rem, 2.6vw, 2.3rem);

    line-height: 1.09;
}

.case-v2-decision-grid article>p:last-child {
    max-width: 410px;

    margin-bottom: 0;

    font-size: 0.9rem;
    line-height: 1.78;
}


/* =========================================================
   Validation
========================================================= */

.case-v2-validation {
    background: var(--color-background-soft);
}

.case-v2-validation-content {
    max-width: 740px;
}

.case-v2-validation-content .large-text {
    margin-bottom: 2rem;
}

.case-v2-validation-content ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.case-v2-validation-content li {
    position: relative;

    border-top:
        1px solid var(--case-line);

    padding:
        0.85rem 0 0.85rem 1.2rem;

    color: var(--color-text-soft);

    font-size: 0.88rem;
}

.case-v2-validation-content li:last-child {
    border-bottom:
        1px solid var(--case-line);
}

.case-v2-validation-content li::before {
    content: "";

    position: absolute;

    top: 1.3rem;
    left: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--color-accent);
}


/* =========================================================
   Outcome
========================================================= */

.case-v2-outcome {
    background:
        radial-gradient(circle at 90% 15%,
            rgba(140, 169, 255, 0.08),
            transparent 26%);
}

.case-v2-outcome-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr) minmax(0, 1.05fr);

    gap:
        clamp(3.5rem, 9vw, 9rem);
}

.case-v2-outcome-lead {
    max-width: 680px;

    margin-bottom: 2.2rem;

    color: var(--color-text-soft);

    font-size:
        clamp(1.3rem, 2vw, 1.75rem);

    line-height: 1.55;
}

.case-v2-outcome-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid var(--case-line);
}

.case-v2-outcome-list span {
    position: relative;

    min-height: 84px;

    display: flex;
    align-items: center;

    border-right:
        1px solid var(--case-line);

    border-bottom:
        1px solid var(--case-line);

    padding:
        1rem 1.2rem 1rem 1.5rem;

    color: var(--color-text-soft);

    font-size: 0.86rem;
    line-height: 1.6;
}

.case-v2-outcome-list span:nth-child(2n) {
    border-right: 0;
}

.case-v2-outcome-list span::before {
    content: "";

    position: absolute;

    left: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--color-accent);
}


/* =========================================================
   Skills
========================================================= */

.case-v2-skills {
    padding-block:
        clamp(5rem, 7vw, 7rem);

    border-block:
        1px solid var(--case-line);

    background: var(--color-background-soft);
}

.case-v2-skills-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr) minmax(0, 1.2fr);

    align-items: end;

    gap:
        clamp(3rem, 8vw, 8rem);
}

.case-v2-skills h2 {
    max-width: 620px;

    margin-bottom: 0;

    font-size:
        clamp(2.2rem, 3.8vw, 3.8rem);

    line-height: 1.03;
}

.case-v2-skills ul {
    display: flex;
    flex-wrap: wrap;

    gap: 0.65rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.case-v2-skills li {
    border:
        1px solid var(--case-line);

    border-radius: 999px;

    padding:
        0.65rem 1rem;

    background:
        rgba(255, 255, 255, 0.02);

    color: var(--color-text-soft);

    font-size: 0.76rem;
}


/* =========================================================
   Disclosure
========================================================= */

.case-v2-disclosure {
    padding-block: 2.8rem;
}

.case-v2-disclosure p {
    max-width: 880px;

    margin: 0;

    color: var(--color-text-faint);

    font-size: 0.75rem;
    line-height: 1.72;
}


/* =========================================================
   Project Navigation
========================================================= */

.case-v2-navigation {
    border-top:
        1px solid var(--case-line);
}

.case-v2-navigation-grid {
    display: grid;

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

.case-v2-navigation a {
    min-height: 230px;

    display: flex;
    justify-content: center;

    flex-direction: column;

    padding: 2.5rem;

    transition:
        background-color 200ms ease;
}

.case-v2-navigation a:hover,
.case-v2-navigation a:focus-visible {
    background:
        rgba(255, 255, 255, 0.02);
}

.case-v2-navigation a:first-child {
    border-right:
        1px solid var(--case-line);
}

.case-v2-navigation a:last-child {
    align-items: flex-end;

    text-align: right;
}

.case-v2-navigation span {
    margin-bottom: 0.6rem;

    color: var(--color-accent);

    font-size: 0.65rem;
    font-weight: 750;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.case-v2-navigation strong {
    max-width: 470px;

    color: var(--color-text);

    font-size:
        clamp(1.5rem, 2.8vw, 2.2rem);

    line-height: 1.15;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1080px) {

    .case-v2-system-grid {
        grid-template-columns: 1fr;
    }

    .case-v2-system-detail {
        max-width: 760px;
    }

}


@media (max-width: 980px) {

    .case-v2-hero-grid,
    .case-v2-two-column,
    .case-v2-ownership-grid,
    .case-v2-outcome-grid,
    .case-v2-skills-grid {
        grid-template-columns: 1fr;
    }

    .case-v2-hero-grid {
        gap: 3.5rem;
    }

    .case-v2-summary {
        max-width: 720px;
    }

    .case-v2-proof-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .case-v2-proof-grid article:nth-child(2) {
        border-right: 0;
    }

    .case-v2-proof-grid article:nth-child(3),
    .case-v2-proof-grid article:nth-child(4) {
        border-top:
            1px solid var(--case-line);
    }

    .case-v2-section-heading {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 1.5rem;
    }

    .case-v2-challenge-grid,
    .case-v2-decision-grid {
        grid-template-columns: 1fr;
    }

    .case-v2-challenge-grid article,
    .case-v2-challenge-grid article:first-child,
    .case-v2-challenge-grid article:last-child,
    .case-v2-decision-grid article,
    .case-v2-decision-grid article:first-child,
    .case-v2-decision-grid article:last-child {
        min-height: auto;

        border-right: 0;
        border-bottom:
            1px solid var(--case-line);

        padding:
            2.7rem 0;
    }

    .case-v2-challenge-grid article>span,
    .case-v2-decision-grid article>span {
        margin-bottom: 2.4rem;
    }

    .case-v2-sticky-heading {
        position: static;
    }

    .case-v2-skills-grid {
        align-items: start;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 700px) {

    .case-v2-page {
        --case-section-space: 5.3rem;
    }

    .case-v2-hero {
        padding-block:
            4rem 5rem;
    }

    .case-v2-breadcrumb {
        margin-bottom: 2.7rem;
    }

    .case-v2-hero h1 {
        font-size:
            clamp(2.8rem, 12.5vw, 4.2rem);

        line-height: 0.99;
    }

    .case-v2-hero-lead {
        font-size: 1rem;
    }

    .case-v2-hero-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .case-v2-hero-actions .button {
        width: 100%;
    }

    .case-v2-proof-grid {
        grid-template-columns: 1fr;
    }

    .case-v2-proof-grid article,
    .case-v2-proof-grid article:first-child,
    .case-v2-proof-grid article:last-child {
        min-height: auto;

        border-right: 0;
        border-bottom:
            1px solid var(--case-line);

        padding:
            2rem 0;
    }

    .case-v2-proof-grid article:last-child {
        border-bottom: 0;
    }

    .case-v2-proof-grid article>span {
        margin-bottom: 1.5rem;
    }

    .case-v2-two-column h2,
    .case-v2-section-heading h2,
    .case-v2-outcome-grid h2 {
        font-size:
            clamp(2.3rem, 10vw, 3.4rem);
    }

    .case-v2-system-canvas {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 10px;

        padding:
            1.5rem;
    }

    .case-v2-system-node {
        width: 100%;
        min-height: auto;

        padding:
            1rem;

        flex-direction: row;
        align-items: center;

        gap: 1rem;
    }

    .case-v2-system-node>span {
        margin:
            0 0.3rem 0 0;
    }

    .case-v2-system-node strong {
        margin-bottom: 0;
    }

    .case-v2-system-node small {
        margin-left: auto;

        text-align: right;
    }

    .case-v2-system-connector {
        width: 1px;
        height: 14px;

        justify-self: center;

        background:
            linear-gradient(to bottom,
                rgba(140, 169, 255, 0.22),
                var(--color-accent));
    }

    .case-v2-system-panel h3 {
        font-size:
            clamp(2rem, 9vw, 3rem);
    }

    .case-v2-ownership-list li {
        grid-template-columns:
            38px 1fr;

        gap: 1rem;
    }

    .case-v2-outcome-list {
        grid-template-columns: 1fr;
    }

    .case-v2-outcome-list span {
        border-right: 0;
    }

    .case-v2-navigation-grid {
        grid-template-columns: 1fr;
    }

    .case-v2-navigation a {
        min-height: 170px;

        padding:
            2rem 0;
    }

    .case-v2-navigation a:first-child {
        border-right: 0;
        border-bottom:
            1px solid var(--case-line);
    }

    .case-v2-navigation a:last-child {
        align-items: flex-start;

        text-align: left;
    }

}


/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 420px) {

    .case-v2-hero h1 {
        font-size: 2.7rem;
    }

    .case-v2-system-node small {
        max-width: 110px;
    }

}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .has-v2-motion [data-reveal] {
        opacity: 1;

        transform: none;

        transition: none;
    }

    .case-v2-system-node {
        transition: none;
    }

}

/* =========================================================
   Multilingual Platform — Interactive Language Architecture
========================================================= */

.case-v2-language-section {
    background:
        radial-gradient(circle at 8% 8%,
            rgba(140, 169, 255, 0.065),
            transparent 27%);
}

.case-v2-language-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr) minmax(340px, 0.88fr);

    align-items: center;

    gap:
        clamp(3.5rem, 8vw, 8rem);
}

.case-v2-language-grid>* {
    min-width: 0;
}

.case-v2-language-preview {
    --spot-x: 50%;
    --spot-y: 50%;

    position: relative;
}

.case-v2-language-preview::before {
    content: "";

    position: absolute;

    inset: -40px;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(440px circle at var(--spot-x) var(--spot-y),
            rgba(140, 169, 255, 0.095),
            transparent 62%);
}

.case-v2-language-browser {
    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 22px;

    background: #0e121b;

    box-shadow:
        0 36px 90px rgba(0, 0, 0, 0.32);
}

.case-v2-language-browser-bar {
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    border-bottom:
        1px solid var(--case-line);

    padding-inline: 18px;
}

.case-v2-language-browser-bar>div {
    display: flex;

    gap: 7px;
}

.case-v2-language-browser-bar i {
    width: 8px;
    height: 8px;

    display: block;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.17);
}

.case-v2-language-browser-bar>span {
    color: var(--color-text-faint);

    font-size: 0.62rem;
}

.case-v2-language-site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1.5rem;

    border-bottom:
        1px solid var(--case-line);

    padding:
        1.2rem 1.5rem;
}

.case-v2-language-site-header>strong {
    color: var(--color-text);

    font-size: 0.83rem;
}

.case-v2-language-tabs {
    display: flex;

    gap: 0.35rem;
}

.case-v2-language-tabs button {
    width: 38px;
    height: 32px;

    display: grid;
    place-items: center;

    border:
        1px solid var(--case-line);

    border-radius: 6px;

    background:
        rgba(255, 255, 255, 0.015);

    color: var(--color-text-faint);

    font-size: 0.59rem;
    font-weight: 750;

    cursor: pointer;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}

.case-v2-language-tabs button:hover,
.case-v2-language-tabs button:focus-visible {
    transform:
        translateY(-2px);

    border-color:
        rgba(140, 169, 255, 0.4);

    color: var(--color-text);
}

.case-v2-language-tabs button.is-active {
    border-color:
        var(--color-accent);

    background:
        rgba(140, 169, 255, 0.1);

    color: var(--color-accent);
}

.case-v2-language-site-nav {
    display: flex;

    gap: 0.8rem;

    border-bottom:
        1px solid var(--case-line);

    padding:
        0.85rem 1.5rem;
}

.case-v2-language-site-nav span {
    height: 6px;

    flex: 1;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.055);
}

.case-v2-language-site-nav span:first-child {
    background:
        rgba(140, 169, 255, 0.24);
}

.case-v2-language-screen {
    min-height: 430px;

    padding:
        clamp(1.8rem, 4vw, 3rem);
}

.case-v2-language-screen[hidden] {
    display: none;
}

.case-v2-language-screen-heading {
    max-width: 580px;

    margin-bottom: 2.4rem;
}

.case-v2-language-screen-heading small {
    display: block;

    margin-bottom: 0.75rem;

    color: var(--color-accent);

    font-size: 0.62rem;
    font-weight: 750;

    letter-spacing: 0.12em;
}

.case-v2-language-screen-heading strong {
    display: block;

    max-width: 560px;

    margin-bottom: 0.9rem;

    color: var(--color-text);

    font-size:
        clamp(1.65rem, 3vw, 2.7rem);

    line-height: 1.08;

    letter-spacing: -0.045em;
}

.case-v2-language-screen-heading p {
    max-width: 530px;

    margin-bottom: 0;

    color: var(--color-text-muted);

    font-size: 0.82rem;
    line-height: 1.7;
}

.case-v2-language-screen-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 0.75rem;
}

.case-v2-language-screen-grid article {
    min-width: 0;

    border:
        1px solid var(--case-line);

    border-radius: 10px;

    padding: 0.85rem;

    background:
        rgba(255, 255, 255, 0.012);
}

.case-v2-language-screen-grid article>span {
    height: 78px;

    display: block;

    margin-bottom: 0.9rem;

    border-radius: 6px;

    background:
        linear-gradient(145deg,
            rgba(140, 169, 255, 0.12),
            rgba(140, 169, 255, 0.025));
}

.case-v2-language-screen-grid strong {
    display: block;

    min-height: 34px;

    margin-bottom: 0.8rem;

    color: var(--color-text-soft);

    font-size: 0.7rem;
    line-height: 1.45;
}

.case-v2-language-screen-grid i {
    width: 90%;
    height: 6px;

    display: block;

    margin-top: 6px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.06);
}

.case-v2-language-screen-grid i:last-child {
    width: 58%;
}

.case-v2-language-detail {
    max-width: 620px;
}

.case-v2-language-detail-label {
    margin-bottom: 1.4rem;

    color: var(--color-accent);

    font-size: 0.66rem;
    font-weight: 750;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.case-v2-language-panel[hidden] {
    display: none;
}

.case-v2-language-panel>span {
    display: block;

    margin-bottom: 1rem;

    color: var(--color-text-faint);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.case-v2-language-panel h3 {
    max-width: 620px;

    margin-bottom: 1.4rem;

    font-size:
        clamp(2rem, 3.7vw, 3.6rem);

    line-height: 1.03;
}

.case-v2-language-panel>p {
    max-width: 600px;

    margin-bottom: 2rem;

    font-size: 0.96rem;
    line-height: 1.8;
}

.case-v2-language-panel ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.case-v2-language-panel li {
    position: relative;

    border-top:
        1px solid var(--case-line);

    padding:
        0.82rem 0 0.82rem 1.15rem;

    color: var(--color-text-soft);

    font-size: 0.86rem;
}

.case-v2-language-panel li:last-child {
    border-bottom:
        1px solid var(--case-line);
}

.case-v2-language-panel li::before {
    content: "";

    position: absolute;

    top: 1.25rem;
    left: 0;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--color-accent);
}


/* =========================================================
   Multilingual Platform — Tablet
========================================================= */

@media (max-width: 1080px) {

    .case-v2-language-grid {
        grid-template-columns: 1fr;
    }

    .case-v2-language-detail {
        max-width: 760px;
    }

}


/* =========================================================
   Multilingual Platform — Mobile
========================================================= */

@media (max-width: 700px) {

    .case-v2-language-site-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .case-v2-language-tabs {
        width: 100%;
    }

    .case-v2-language-tabs button {
        flex: 1;

        width: auto;
    }

    .case-v2-language-site-nav {
        gap: 0.45rem;

        padding-inline: 1rem;
    }

    .case-v2-language-screen {
        min-height: auto;

        padding:
            1.5rem 1rem;
    }

    .case-v2-language-screen-heading strong {
        font-size:
            clamp(1.6rem, 8vw, 2.3rem);
    }

    .case-v2-language-screen-grid {
        grid-template-columns: 1fr;
    }

    .case-v2-language-screen-grid article>span {
        height: 72px;
    }

    .case-v2-language-panel h3 {
        font-size:
            clamp(2rem, 9vw, 3rem);
    }

}


/* =========================================================
   Multilingual Platform — Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .case-v2-language-tabs button {
        transition: none;
    }

}

/* =========================================================
   E-Poster Platform — Interactive Event Flow
========================================================= */

.case-v2-eposter-section {
    background:
        radial-gradient(circle at 10% 8%,
            rgba(74, 201, 240, 0.07),
            transparent 27%);
}

.case-v2-eposter-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr) minmax(350px, 0.82fr);

    align-items: center;

    gap:
        clamp(3.5rem, 8vw, 8rem);
}

.case-v2-eposter-grid>* {
    min-width: 0;
}

.case-v2-eposter-preview {
    --spot-x: 50%;
    --spot-y: 50%;

    position: relative;
}

.case-v2-eposter-preview::before {
    content: "";

    position: absolute;

    inset: -40px;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(460px circle at var(--spot-x) var(--spot-y),
            rgba(74, 201, 240, 0.09),
            transparent 62%);
}

.case-v2-eposter-frame {
    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 22px;

    background:
        #07131a;

    box-shadow:
        0 36px 90px rgba(0, 0, 0, 0.34);
}

.case-v2-eposter-topbar {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    border-bottom:
        1px solid rgba(113, 211, 241, 0.16);

    padding:
        0.85rem 1rem;

    background:
        #061119;
}

.case-v2-eposter-topbar>div {
    display: flex;
    align-items: center;

    gap: 0.7rem;
}

.case-v2-eposter-mark {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(113, 211, 241, 0.28);

    border-radius: 50%;

    background:
        rgba(74, 201, 240, 0.08);

    color:
        #65d4f4;

    font-size: 0.58rem;
    font-weight: 800;
}

.case-v2-eposter-topbar strong {
    display: block;

    margin-bottom: 0.1rem;

    color:
        #f4f8fa;

    font-size: 0.75rem;
}

.case-v2-eposter-topbar small {
    display: block;

    color:
        #73909e;

    font-size: 0.52rem;
}

.case-v2-eposter-date {
    color:
        #65d4f4;

    font-size: 0.52rem;
    font-weight: 750;

    letter-spacing: 0.08em;
}

.case-v2-eposter-screen {
    min-height: 500px;

    background:
        linear-gradient(180deg,
            #071923,
            #06141b);
}

.case-v2-eposter-screen[hidden] {
    display: none;
}


/* Directory */

.case-v2-eposter-directory-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    border-bottom:
        1px solid rgba(113, 211, 241, 0.12);

    padding:
        1rem;
}

.case-v2-eposter-directory-head small {
    display: block;

    margin-bottom: 0.2rem;

    color:
        #65d4f4;

    font-size: 0.5rem;
    font-weight: 750;

    letter-spacing: 0.1em;
}

.case-v2-eposter-directory-head strong {
    display: block;

    color:
        #f4f8fa;

    font-size: 0.86rem;
}

.case-v2-eposter-searchbar {
    width: 45%;
    min-width: 190px;
    height: 38px;

    display: flex;
    align-items: center;

    gap: 0.6rem;

    border:
        1px solid rgba(113, 211, 241, 0.2);

    border-radius: 8px;

    padding-inline:
        0.8rem;

    color:
        #7c98a7;
}

.case-v2-eposter-searchbar i {
    height: 5px;

    display: block;

    flex: 1;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.08);
}

.case-v2-eposter-searchbar i:last-child {
    max-width: 54px;
}

.case-v2-eposter-directory-body {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 190px;

    gap: 0.75rem;

    padding:
        0.75rem;
}

.case-v2-eposter-gridcards {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 0.45rem;
}

.case-v2-eposter-gridcards article {
    position: relative;

    min-width: 0;
    min-height: 100px;

    overflow: hidden;

    border:
        1px solid rgba(113, 211, 241, 0.1);

    border-radius: 7px;

    padding:
        0.55rem;

    background:
        linear-gradient(145deg,
            rgba(74, 201, 240, 0.13),
            rgba(255, 255, 255, 0.02));
}

.case-v2-eposter-gridcards article:nth-child(3n + 2) {
    background:
        linear-gradient(145deg,
            rgba(122, 176, 64, 0.18),
            rgba(255, 255, 255, 0.02));
}

.case-v2-eposter-gridcards article:nth-child(3n) {
    background:
        linear-gradient(145deg,
            rgba(162, 79, 178, 0.18),
            rgba(255, 255, 255, 0.02));
}

.case-v2-eposter-gridcards article.is-selected {
    border-color:
        #65d4f4;

    box-shadow:
        inset 0 0 0 1px rgba(101, 212, 244, 0.28);
}

.case-v2-eposter-gridcards article>span {
    display: inline-flex;

    border-radius: 4px;

    padding:
        0.22rem 0.35rem;

    background:
        #65d4f4;

    color:
        #031118;

    font-size: 0.48rem;
    font-weight: 800;
}

.case-v2-eposter-gridcards article>i {
    width: 62%;
    height: 4px;

    display: block;

    margin:
        1.4rem auto 0.55rem;

    background:
        rgba(255, 255, 255, 0.42);
}

.case-v2-eposter-gridcards article>strong {
    display: block;

    color:
        rgba(255, 255, 255, 0.88);

    font-size: 0.54rem;

    text-align: center;
}

.case-v2-eposter-detail {
    min-width: 0;

    display: flex;
    flex-direction: column;

    border:
        1px solid rgba(113, 211, 241, 0.12);

    border-radius: 9px;

    padding:
        0.7rem;

    background:
        #071820;
}

.case-v2-eposter-detail-preview {
    min-height: 120px;

    display: flex;
    justify-content: space-between;

    flex-direction: column;

    margin-bottom: 0.8rem;

    border-radius: 6px;

    padding:
        0.6rem;

    background:
        linear-gradient(145deg,
            #ecf1f3,
            #bcd6de);
}

.case-v2-eposter-detail-preview span {
    width: fit-content;

    border-radius: 4px;

    padding:
        0.2rem 0.35rem;

    background:
        #65d4f4;

    color:
        #031118;

    font-size: 0.47rem;
    font-weight: 800;
}

.case-v2-eposter-detail-preview strong {
    align-self: center;

    color:
        #10222b;

    font-size: 1.2rem;
}

.case-v2-eposter-detail>small {
    color:
        #65d4f4;

    font-size: 0.52rem;
    font-weight: 750;
}

.case-v2-eposter-detail h3 {
    margin:
        0.55rem 0 0.8rem;

    color:
        #f4f8fa;

    font-size: 0.78rem;
    line-height: 1.3;
}

.case-v2-eposter-detail-lines {
    display: grid;

    gap: 0.4rem;

    margin-bottom: 1rem;
}

.case-v2-eposter-detail-lines i {
    height: 5px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.08);
}

.case-v2-eposter-detail-lines i:nth-child(2) {
    width: 80%;
}

.case-v2-eposter-detail-lines i:nth-child(3) {
    width: 58%;
}

.case-v2-eposter-detail button {
    width: 100%;

    margin-top: auto;

    border-radius: 7px;

    padding:
        0.7rem;

    background:
        #65d4f4;

    color:
        #031118;

    font-size: 0.58rem;
    font-weight: 800;
}


/* Search */

.case-v2-eposter-search-mode {
    padding:
        1.5rem;
}

.case-v2-eposter-search-large {
    min-height: 74px;

    display: grid;

    grid-template-columns:
        38px 1fr 80px;

    align-items: center;

    gap: 1rem;

    border:
        1px solid rgba(113, 211, 241, 0.22);

    border-radius: 10px;

    padding:
        0.9rem 1rem;

    background:
        rgba(255, 255, 255, 0.015);
}

.case-v2-eposter-search-large>span {
    color:
        #65d4f4;

    font-size: 1.2rem;
}

.case-v2-eposter-search-large strong {
    display: block;

    color:
        #f4f8fa;

    font-size: 0.8rem;
}

.case-v2-eposter-search-large small {
    display: block;

    margin-top: 0.2rem;

    color:
        #75909d;

    font-size: 0.56rem;
}

.case-v2-eposter-search-large>i {
    height: 5px;

    border-radius: 999px;

    background:
        rgba(101, 212, 244, 0.32);
}

.case-v2-eposter-results-head {
    display: flex;
    justify-content: space-between;

    gap: 1rem;

    margin:
        2rem 0 0.7rem;

    color:
        #65d4f4;

    font-size: 0.54rem;
    font-weight: 750;

    letter-spacing: 0.08em;
}

.case-v2-eposter-results {
    border-top:
        1px solid rgba(113, 211, 241, 0.12);
}

.case-v2-eposter-results article {
    display: grid;

    grid-template-columns:
        52px 1fr auto;

    align-items: center;

    gap: 1rem;

    border-bottom:
        1px solid rgba(113, 211, 241, 0.12);

    padding-block:
        1rem;
}

.case-v2-eposter-results article>span {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(101, 212, 244, 0.28);

    border-radius: 7px;

    color:
        #65d4f4;

    font-size: 0.56rem;
    font-weight: 800;
}

.case-v2-eposter-results strong {
    display: block;

    margin-bottom: 0.45rem;

    color:
        #f4f8fa;

    font-size: 0.72rem;
}

.case-v2-eposter-results i {
    width: 82%;
    height: 5px;

    display: block;

    margin-top: 5px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.06);
}

.case-v2-eposter-results i:last-child {
    width: 52%;
}

.case-v2-eposter-results small {
    color:
        #65d4f4;

    font-size: 0.54rem;
}


/* Presentation */

.case-v2-eposter-presentation {
    min-height: 500px;

    position: relative;

    display: flex;
    flex-direction: column;

    padding:
        1rem;

    background:
        linear-gradient(180deg,
            #58c7e7,
            #1276a9);
}

.case-v2-eposter-presentation-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    color:
        #effcff;

    font-size: 0.58rem;
}

.case-v2-eposter-presentation-meta span {
    border-radius: 999px;

    padding:
        0.4rem 0.65rem;

    background:
        rgba(1, 17, 24, 0.55);

    color:
        #65d4f4;

    font-weight: 800;
}

.case-v2-eposter-poster {
    position: relative;

    flex: 1;

    display: grid;
    place-items: center;

    overflow: hidden;
}

.case-v2-eposter-poster>span {
    color:
        rgba(255, 255, 255, 0.96);

    font-size:
        clamp(2.2rem, 6vw, 4.8rem);

    font-weight: 800;

    text-shadow:
        0 5px 16px rgba(0, 0, 0, 0.24);
}

.case-v2-eposter-poster>strong {
    position: absolute;

    right: 20%;
    top: 40%;

    color:
        rgba(255, 255, 255, 0.97);

    font-size:
        clamp(2rem, 5vw, 4rem);
}

.case-v2-eposter-poster>i {
    position: absolute;

    right: -2%;
    top: 18%;

    width: 58%;
    height: 2px;

    background:
        rgba(255, 255, 255, 0.9);

    transform:
        rotate(-46deg);
}

.case-v2-eposter-poster>i:nth-of-type(2) {
    right: 3%;
    top: 25%;

    width: 51%;
}

.case-v2-eposter-poster>i:nth-of-type(3) {
    right: 8%;
    top: 31%;

    width: 42%;
}

.case-v2-eposter-controls {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 0.35rem;

    align-self: center;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 999px;

    padding:
        0.3rem;

    background:
        rgba(1, 17, 24, 0.76);
}

.case-v2-eposter-controls button {
    border-radius: 999px;

    padding:
        0.55rem 0.7rem;

    background:
        transparent;

    color:
        #eaf7fb;

    font-size: 0.54rem;
}

.case-v2-eposter-controls button:nth-child(2) {
    background:
        #65d4f4;

    color:
        #031118;

    font-weight: 800;
}


/* Staff */

.case-v2-eposter-staff {
    padding:
        1.5rem;
}

.case-v2-eposter-staff-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    border-bottom:
        1px solid rgba(113, 211, 241, 0.14);

    padding-bottom:
        1.2rem;
}

.case-v2-eposter-staff-head small {
    display: block;

    margin-bottom: 0.25rem;

    color:
        #65d4f4;

    font-size: 0.52rem;
    font-weight: 750;

    letter-spacing: 0.1em;
}

.case-v2-eposter-staff-head strong {
    color:
        #f4f8fa;

    font-size: 0.9rem;
}

.case-v2-eposter-staff-head>span {
    border:
        1px solid rgba(101, 212, 244, 0.28);

    border-radius: 999px;

    padding:
        0.4rem 0.65rem;

    background:
        rgba(101, 212, 244, 0.08);

    color:
        #65d4f4;

    font-size: 0.54rem;
    font-weight: 800;
}

.case-v2-eposter-staff-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0.7rem;

    margin-top:
        1.5rem;
}

.case-v2-eposter-staff-grid article {
    min-height: 155px;

    border:
        1px solid rgba(113, 211, 241, 0.12);

    border-radius: 9px;

    padding:
        1rem;

    background:
        rgba(255, 255, 255, 0.014);
}

.case-v2-eposter-staff-grid article>span {
    display: block;

    margin-bottom: 2rem;

    color:
        #65d4f4;

    font-size: 0.54rem;
    font-weight: 800;
}

.case-v2-eposter-staff-grid strong {
    display: block;

    margin-bottom: 0.5rem;

    color:
        #f4f8fa;

    font-size: 0.7rem;
}

.case-v2-eposter-staff-grid p {
    margin-bottom: 1rem;

    color:
        #75909d;

    font-size: 0.58rem;
    line-height: 1.5;
}

.case-v2-eposter-staff-grid i {
    width: 72%;
    height: 4px;

    display: block;

    border-radius: 999px;

    background:
        linear-gradient(90deg,
            #65d4f4,
            rgba(101, 212, 244, 0.08));
}


/* Mode bar */

.case-v2-eposter-modebar {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top:
        1px solid rgba(113, 211, 241, 0.14);

    background:
        #061119;
}

.case-v2-eposter-modebar button {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.45rem;

    border-right:
        1px solid rgba(113, 211, 241, 0.1);

    padding:
        0.85rem 0.6rem;

    background:
        transparent;

    color:
        #718d9b;

    font-size: 0.56rem;
    font-weight: 750;

    cursor: pointer;

    transition:
        color 180ms ease,
        background-color 180ms ease;
}

.case-v2-eposter-modebar button:last-child {
    border-right: 0;
}

.case-v2-eposter-modebar button span {
    color:
        #65d4f4;

    font-size: 0.48rem;
}

.case-v2-eposter-modebar button:hover,
.case-v2-eposter-modebar button:focus-visible,
.case-v2-eposter-modebar button.is-active {
    background:
        rgba(101, 212, 244, 0.07);

    color:
        #f4f8fa;
}

.case-v2-eposter-detail-copy {
    max-width: 620px;
}

.case-v2-eposter-detail-label {
    margin-bottom: 1.4rem;

    color: var(--color-accent);

    font-size: 0.66rem;
    font-weight: 750;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.case-v2-eposter-panel[hidden] {
    display: none;
}

.case-v2-eposter-panel>span {
    display: block;

    margin-bottom: 1rem;

    color: var(--color-text-faint);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.case-v2-eposter-panel h3 {
    max-width: 620px;

    margin-bottom: 1.4rem;

    font-size:
        clamp(2rem, 3.7vw, 3.6rem);

    line-height: 1.03;
}

.case-v2-eposter-panel>p {
    max-width: 600px;

    margin-bottom: 2rem;

    font-size: 0.96rem;
    line-height: 1.8;
}

.case-v2-eposter-panel ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.case-v2-eposter-panel li {
    position: relative;

    border-top:
        1px solid var(--case-line);

    padding:
        0.82rem 0 0.82rem 1.15rem;

    color: var(--color-text-soft);

    font-size: 0.86rem;
}

.case-v2-eposter-panel li:last-child {
    border-bottom:
        1px solid var(--case-line);
}

.case-v2-eposter-panel li::before {
    content: "";

    position: absolute;

    top: 1.25rem;
    left: 0;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--color-accent);
}


/* =========================================================
   E-Poster — Tablet
========================================================= */

@media (max-width: 1120px) {

    .case-v2-eposter-grid {
        grid-template-columns: 1fr;
    }

    .case-v2-eposter-detail-copy {
        max-width: 760px;
    }

}


/* =========================================================
   E-Poster — Mobile
========================================================= */

@media (max-width: 700px) {

    .case-v2-eposter-directory-head {
        align-items: stretch;

        flex-direction: column;
    }

    .case-v2-eposter-searchbar {
        width: 100%;
        min-width: 0;
    }

    .case-v2-eposter-directory-body {
        grid-template-columns: 1fr;
    }

    .case-v2-eposter-gridcards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .case-v2-eposter-detail {
        min-height: 260px;
    }

    .case-v2-eposter-screen {
        min-height: auto;
    }

    .case-v2-eposter-presentation {
        min-height: 420px;
    }

    .case-v2-eposter-controls {
        width: 100%;

        justify-content: center;

        overflow-x: auto;
    }

    .case-v2-eposter-controls button {
        flex: 0 0 auto;
    }

    .case-v2-eposter-modebar {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .case-v2-eposter-modebar button {
        border-bottom:
            1px solid rgba(113, 211, 241, 0.1);
    }

    .case-v2-eposter-staff-grid {
        grid-template-columns: 1fr;
    }

    .case-v2-eposter-panel h3 {
        font-size:
            clamp(2rem, 9vw, 3rem);
    }

}


/* =========================================================
   E-Poster — Small Mobile
========================================================= */

@media (max-width: 420px) {

    .case-v2-eposter-topbar {
        align-items: flex-start;

        flex-direction: column;
    }

    .case-v2-eposter-gridcards {
        grid-template-columns: 1fr;
    }

    .case-v2-eposter-search-large {
        grid-template-columns:
            30px 1fr;
    }

    .case-v2-eposter-search-large>i {
        display: none;
    }

    .case-v2-eposter-results article {
        grid-template-columns:
            44px 1fr;
    }

    .case-v2-eposter-results small {
        grid-column: 2;
    }

}


/* =========================================================
   E-Poster — Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .case-v2-eposter-modebar button {
        transition: none;
    }

}

/* =========================================================
   International Programme — Interactive Participant Journey
========================================================= */

.case-v2-programme-section {
    background:
        radial-gradient(circle at 10% 8%,
            rgba(140, 169, 255, 0.065),
            transparent 28%);
}

.case-v2-programme-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.16fr) minmax(350px, 0.84fr);

    align-items: center;

    gap:
        clamp(3.5rem, 8vw, 8rem);
}

.case-v2-programme-grid>* {
    min-width: 0;
}

.case-v2-programme-preview {
    --spot-x: 50%;
    --spot-y: 50%;

    position: relative;
}

.case-v2-programme-preview::before {
    content: "";

    position: absolute;

    inset: -40px;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(460px circle at var(--spot-x) var(--spot-y),
            rgba(140, 169, 255, 0.095),
            transparent 62%);
}

.case-v2-programme-frame {
    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 22px;

    background:
        #0d121b;

    box-shadow:
        0 36px 90px rgba(0, 0, 0, 0.32);
}

.case-v2-programme-topbar {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    border-bottom:
        1px solid var(--case-line);

    padding:
        0.9rem 1rem;

    background:
        rgba(8, 12, 19, 0.92);
}

.case-v2-programme-topbar>div {
    display: flex;
    align-items: center;

    gap: 0.75rem;
}

.case-v2-programme-mark {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(140, 169, 255, 0.3);

    border-radius: 50%;

    background:
        rgba(140, 169, 255, 0.08);

    color: var(--color-accent);

    font-size: 0.58rem;
    font-weight: 800;
}

.case-v2-programme-topbar strong {
    display: block;

    margin-bottom: 0.1rem;

    color: var(--color-text);

    font-size: 0.76rem;
}

.case-v2-programme-topbar small {
    display: block;

    color: var(--color-text-faint);

    font-size: 0.53rem;
}

.case-v2-programme-status {
    color: var(--color-accent);

    font-size: 0.52rem;
    font-weight: 750;

    letter-spacing: 0.1em;
}

.case-v2-programme-stagebar {
    display: grid;

    grid-template-columns:
        28px 1fr 28px 1fr 28px 1fr 28px 1fr 28px;

    align-items: center;

    gap: 0.45rem;

    border-bottom:
        1px solid var(--case-line);

    padding:
        1rem;
}

.case-v2-programme-stagebar span {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(140, 169, 255, 0.18);

    border-radius: 50%;

    color: var(--color-text-faint);

    font-size: 0.5rem;
    font-weight: 800;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}

.case-v2-programme-stagebar span.is-active {
    border-color: var(--color-accent);

    background: var(--color-accent);

    color: #0b0e15;
}

.case-v2-programme-stagebar span.is-passed {
    border-color:
        rgba(140, 169, 255, 0.42);

    background:
        rgba(140, 169, 255, 0.11);

    color: var(--color-accent);
}

.case-v2-programme-stagebar i {
    height: 1px;

    background:
        linear-gradient(90deg,
            rgba(140, 169, 255, 0.13),
            rgba(140, 169, 255, 0.38));
}

.case-v2-programme-screen {
    min-height: 470px;

    background:
        linear-gradient(180deg,
            rgba(18, 24, 36, 0.95),
            rgba(13, 18, 27, 0.98));
}

.case-v2-programme-screen[hidden] {
    display: none;
}


/* =========================================================
   Before Arrival
========================================================= */

.case-v2-programme-dashboard {
    padding:
        1.5rem;
}

.case-v2-programme-dashboard-head,
.case-v2-programme-schedule-head,
.case-v2-programme-onsite-head,
.case-v2-programme-followup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    border-bottom:
        1px solid var(--case-line);

    padding-bottom:
        1.1rem;
}

.case-v2-programme-dashboard-head small,
.case-v2-programme-schedule-head small,
.case-v2-programme-onsite-head small,
.case-v2-programme-followup-head small {
    display: block;

    margin-bottom: 0.2rem;

    color: var(--color-accent);

    font-size: 0.52rem;
    font-weight: 750;

    letter-spacing: 0.1em;
}

.case-v2-programme-dashboard-head strong,
.case-v2-programme-schedule-head strong,
.case-v2-programme-onsite-head strong,
.case-v2-programme-followup-head strong {
    color: var(--color-text);

    font-size: 0.9rem;
}

.case-v2-programme-dashboard-head>span,
.case-v2-programme-schedule-head>span,
.case-v2-programme-onsite-head>span,
.case-v2-programme-followup-head>span {
    color: var(--color-text-faint);

    font-size: 0.56rem;
}

.case-v2-programme-dashboard-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 0.75rem;

    margin-top:
        1.4rem;
}

.case-v2-programme-dashboard-grid article {
    min-width: 0;
    min-height: 250px;

    display: flex;
    flex-direction: column;

    border:
        1px solid var(--case-line);

    border-radius: 10px;

    padding:
        1rem;

    background:
        rgba(255, 255, 255, 0.015);
}

.case-v2-programme-dashboard-grid article.is-primary {
    background:
        linear-gradient(145deg,
            rgba(140, 169, 255, 0.09),
            rgba(255, 255, 255, 0.012));
}

.case-v2-programme-dashboard-grid article>span {
    display: block;

    margin-bottom: 3.5rem;

    color: var(--color-accent);

    font-size: 0.52rem;
    font-weight: 800;

    letter-spacing: 0.09em;
}

.case-v2-programme-dashboard-grid strong {
    display: block;

    margin-bottom: 0.6rem;

    color: var(--color-text);

    font-size: 0.74rem;
    line-height: 1.4;
}

.case-v2-programme-dashboard-grid p {
    margin-bottom: 1rem;

    color: var(--color-text-faint);

    font-size: 0.6rem;
    line-height: 1.55;
}

.case-v2-programme-dashboard-grid i {
    width: 66%;
    height: 4px;

    display: block;

    margin-top: auto;

    border-radius: 999px;

    background:
        linear-gradient(90deg,
            var(--color-accent),
            rgba(140, 169, 255, 0.08));
}


/* =========================================================
   Registration
========================================================= */

.case-v2-programme-form-view {
    min-height: 470px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 180px;

    gap: 1rem;

    padding:
        1.5rem;
}

.case-v2-programme-form-head {
    grid-column:
        1 / -1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    border-bottom:
        1px solid var(--case-line);

    padding-bottom:
        1rem;
}

.case-v2-programme-form-head small {
    color: var(--color-accent);

    font-size: 0.52rem;
    font-weight: 750;

    letter-spacing: 0.1em;
}

.case-v2-programme-form-head strong {
    color: var(--color-text);

    font-size: 0.82rem;
}

.case-v2-programme-form-head>span {
    color: var(--color-text-faint);

    font-size: 0.55rem;
}

.case-v2-programme-form {
    display: grid;

    align-content: start;

    gap: 0.8rem;
}

.case-v2-programme-form label {
    display: grid;

    gap: 0.55rem;

    border:
        1px solid var(--case-line);

    border-radius: 8px;

    padding:
        0.9rem;

    background:
        rgba(255, 255, 255, 0.014);
}

.case-v2-programme-form label span {
    color: var(--color-text-soft);

    font-size: 0.65rem;
}

.case-v2-programme-form label i {
    height: 28px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 5px;

    background:
        rgba(255, 255, 255, 0.025);
}

.case-v2-programme-form-status {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 0.5rem;

    margin-top:
        0.4rem;
}

.case-v2-programme-form-status span {
    min-height: 32px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(140, 169, 255, 0.16);

    border-radius: 999px;

    color: var(--color-text-muted);

    font-size: 0.52rem;
}

.case-v2-programme-form-status span:first-child {
    border-color:
        rgba(140, 169, 255, 0.42);

    background:
        rgba(140, 169, 255, 0.08);

    color: var(--color-accent);
}

.case-v2-programme-tracker {
    border:
        1px solid var(--case-line);

    border-radius: 9px;

    padding:
        1rem;

    background:
        rgba(255, 255, 255, 0.014);
}

.case-v2-programme-tracker>small {
    display: block;

    margin-bottom: 1rem;

    color: var(--color-accent);

    font-size: 0.52rem;
    font-weight: 800;

    letter-spacing: 0.1em;
}

.case-v2-programme-tracker div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.75rem;

    border-top:
        1px solid var(--case-line);

    padding-block:
        0.85rem;
}

.case-v2-programme-tracker div:last-child {
    border-bottom:
        1px solid var(--case-line);
}

.case-v2-programme-tracker span {
    color: var(--color-text-muted);

    font-size: 0.58rem;
}

.case-v2-programme-tracker strong {
    color: var(--color-accent);

    font-size: 0.72rem;
}


/* =========================================================
   Programme
========================================================= */

.case-v2-programme-schedule {
    padding:
        1.5rem;
}

.case-v2-programme-schedule-list {
    margin-top:
        1rem;

    border-top:
        1px solid var(--case-line);
}

.case-v2-programme-schedule-list article {
    display: grid;

    grid-template-columns:
        60px 1fr auto;

    align-items: center;

    gap: 1rem;

    border-bottom:
        1px solid var(--case-line);

    padding-block:
        1rem;
}

.case-v2-programme-schedule-list article>span {
    color: var(--color-accent);

    font-size: 0.58rem;
    font-weight: 750;
}

.case-v2-programme-schedule-list strong {
    display: block;

    margin-bottom: 0.4rem;

    color: var(--color-text);

    font-size: 0.7rem;
}

.case-v2-programme-schedule-list i {
    width: 78%;
    height: 5px;

    display: block;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.06);
}

.case-v2-programme-schedule-list small {
    color: var(--color-text-faint);

    font-size: 0.48rem;
    font-weight: 750;

    letter-spacing: 0.07em;
}


/* =========================================================
   On Site
========================================================= */

.case-v2-programme-onsite {
    padding:
        1.5rem;
}

.case-v2-programme-onsite-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0.7rem;

    margin-top:
        1.3rem;
}

.case-v2-programme-onsite-grid article {
    min-height: 155px;

    border:
        1px solid var(--case-line);

    border-radius: 9px;

    padding:
        1rem;

    background:
        rgba(255, 255, 255, 0.014);
}

.case-v2-programme-onsite-grid article>span {
    display: block;

    margin-bottom: 2.1rem;

    color: var(--color-accent);

    font-size: 0.52rem;
    font-weight: 800;
}

.case-v2-programme-onsite-grid strong {
    display: block;

    margin-bottom: 0.55rem;

    color: var(--color-text);

    font-size: 0.72rem;
}

.case-v2-programme-onsite-grid p {
    margin-bottom: 0;

    color: var(--color-text-faint);

    font-size: 0.59rem;
    line-height: 1.55;
}


/* =========================================================
   Follow-Up
========================================================= */

.case-v2-programme-followup {
    padding:
        1.5rem;
}

.case-v2-programme-followup-flow {
    margin-top:
        1.2rem;

    border-top:
        1px solid var(--case-line);
}

.case-v2-programme-followup-flow article {
    display: grid;

    grid-template-columns:
        45px 1fr;

    gap: 1rem;

    border-bottom:
        1px solid var(--case-line);

    padding-block:
        1rem;
}

.case-v2-programme-followup-flow article>span {
    color: var(--color-accent);

    font-size: 0.55rem;
    font-weight: 800;
}

.case-v2-programme-followup-flow strong {
    display: block;

    margin-bottom: 0.5rem;

    color: var(--color-text);

    font-size: 0.7rem;
}

.case-v2-programme-followup-flow i {
    width: 70%;
    height: 5px;

    display: block;

    border-radius: 999px;

    background:
        linear-gradient(90deg,
            rgba(140, 169, 255, 0.32),
            rgba(255, 255, 255, 0.04));
}


/* =========================================================
   Mode Bar
========================================================= */

.case-v2-programme-modebar {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    border-top:
        1px solid var(--case-line);

    background:
        rgba(8, 12, 19, 0.96);
}

.case-v2-programme-modebar button {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.35rem;

    border-right:
        1px solid var(--case-line);

    padding:
        0.85rem 0.45rem;

    background: transparent;

    color: var(--color-text-faint);

    font-size: 0.52rem;
    font-weight: 750;

    cursor: pointer;

    transition:
        color 180ms ease,
        background-color 180ms ease;
}

.case-v2-programme-modebar button:last-child {
    border-right: 0;
}

.case-v2-programme-modebar button>span {
    color: var(--color-accent);

    font-size: 0.46rem;
}

.case-v2-programme-modebar button:hover,
.case-v2-programme-modebar button:focus-visible,
.case-v2-programme-modebar button.is-active {
    background:
        rgba(140, 169, 255, 0.07);

    color: var(--color-text);
}


/* =========================================================
   Detail Copy
========================================================= */

.case-v2-programme-detail {
    max-width: 620px;
}

.case-v2-programme-detail-label {
    margin-bottom: 1.4rem;

    color: var(--color-accent);

    font-size: 0.66rem;
    font-weight: 750;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.case-v2-programme-panel[hidden] {
    display: none;
}

.case-v2-programme-panel>span {
    display: block;

    margin-bottom: 1rem;

    color: var(--color-text-faint);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.case-v2-programme-panel h3 {
    max-width: 620px;

    margin-bottom: 1.4rem;

    font-size:
        clamp(2rem, 3.7vw, 3.6rem);

    line-height: 1.03;
}

.case-v2-programme-panel>p {
    max-width: 600px;

    margin-bottom: 2rem;

    font-size: 0.96rem;
    line-height: 1.8;
}

.case-v2-programme-panel ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.case-v2-programme-panel li {
    position: relative;

    border-top:
        1px solid var(--case-line);

    padding:
        0.82rem 0 0.82rem 1.15rem;

    color: var(--color-text-soft);

    font-size: 0.86rem;
}

.case-v2-programme-panel li:last-child {
    border-bottom:
        1px solid var(--case-line);
}

.case-v2-programme-panel li::before {
    content: "";

    position: absolute;

    top: 1.25rem;
    left: 0;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--color-accent);
}


/* =========================================================
   International Programme — Tablet
========================================================= */

@media (max-width: 1120px) {

    .case-v2-programme-grid {
        grid-template-columns: 1fr;
    }

    .case-v2-programme-detail {
        max-width: 760px;
    }

}


/* =========================================================
   International Programme — Mobile
========================================================= */

@media (max-width: 700px) {

    .case-v2-programme-topbar {
        align-items: flex-start;

        flex-direction: column;
    }

    .case-v2-programme-stagebar {
        gap: 0.3rem;

        padding-inline:
            0.7rem;
    }

    .case-v2-programme-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .case-v2-programme-dashboard-grid article {
        min-height: 170px;
    }

    .case-v2-programme-dashboard-grid article>span {
        margin-bottom: 2rem;
    }

    .case-v2-programme-form-view {
        grid-template-columns: 1fr;
    }

    .case-v2-programme-form-head {
        align-items: flex-start;

        flex-direction: column;
    }

    .case-v2-programme-onsite-grid {
        grid-template-columns: 1fr;
    }

    .case-v2-programme-modebar {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .case-v2-programme-modebar button {
        border-bottom:
            1px solid var(--case-line);
    }

    .case-v2-programme-panel h3 {
        font-size:
            clamp(2rem, 9vw, 3rem);
    }

}


/* =========================================================
   International Programme — Small Mobile
========================================================= */

@media (max-width: 420px) {

    .case-v2-programme-stagebar {
        grid-template-columns:
            repeat(5, 1fr);

        gap: 0.5rem;
    }

    .case-v2-programme-stagebar i {
        display: none;
    }

    .case-v2-programme-stagebar span {
        justify-self: center;
    }

    .case-v2-programme-schedule-list article {
        grid-template-columns:
            48px 1fr;
    }

    .case-v2-programme-schedule-list small {
        grid-column: 2;
    }

    .case-v2-programme-modebar {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   International Programme — Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .case-v2-programme-stagebar span,
    .case-v2-programme-modebar button {
        transition: none;
    }

}