/* ============================================================
   MARVIN LIRIO — PORTFOLIO V2.4.0 — CLEAN PRODUCTION BASELINE
============================================================ */

/* ============================================================
   DESIGN TOKENS
============================================================ */

:root {

    --bg: #0d0e10;
    --bg-alt: #111316;

    --surface: #15171a;
    --surface-hover: #191b1f;

    --text: #f1f0ed;
    --text-soft: #c3c3c0;
    --muted: #888b91;

    --border: #292c31;
    --border-strong: #3b3f46;

    --accent: #a83243;
    --accent-hover: #bd3a4e;

    --accent-soft:
        rgba(168, 50, 67, 0.12);

    --accent-border:
        rgba(168, 50, 67, 0.42);

    --header-bg:
        rgba(13, 14, 16, 0.88);

    --shadow:
        0 24px 70px rgba(0, 0, 0, 0.24);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    --container: 1180px;

    --transition:
        180ms ease;
}

/* ============================================================
   LIGHT THEME
============================================================ */

html[data-theme="light"] {

    --bg: #f5f4f0;
    --bg-alt: #ecebe7;

    --surface: #ffffff;
    --surface-hover: #f8f7f4;

    --text: #19191a;
    --text-soft: #48494d;
    --muted: #74767b;

    --border: #d9d8d3;
    --border-strong: #bdbcb7;

    --accent: #8e2635;
    --accent-hover: #a52d3e;

    --accent-soft:
        rgba(142, 38, 53, 0.08);

    --accent-border:
        rgba(142, 38, 53, 0.30);

    --header-bg:
        rgba(245, 244, 240, 0.90);

    --shadow:
        0 24px 70px rgba(20, 20, 20, 0.08);
}

/* ============================================================
   SYSTEM LIGHT THEME
============================================================ */

@media (prefers-color-scheme: light) {

    html[data-theme="system"] {

        --bg: #f5f4f0;
        --bg-alt: #ecebe7;

        --surface: #ffffff;
        --surface-hover: #f8f7f4;

        --text: #19191a;
        --text-soft: #48494d;
        --muted: #74767b;

        --border: #d9d8d3;
        --border-strong: #bdbcb7;

        --accent: #8e2635;
        --accent-hover: #a52d3e;

        --accent-soft:
            rgba(142, 38, 53, 0.08);

        --accent-border:
            rgba(142, 38, 53, 0.30);

        --header-bg:
            rgba(245, 244, 240, 0.90);

        --shadow:
            0 24px 70px rgba(20, 20, 20, 0.08);
    }

}

/* ============================================================
   RESET
============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {

    margin: 0;

    background: var(--bg);
    color: var(--text);

    font-family:
        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;

    line-height: 1.65;

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

body.menu-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
}

::selection {
    background: var(--accent);
    color: #ffffff;
}

/* ============================================================
   GENERAL LAYOUT
============================================================ */

.container {

    width:
        min(var(--container), calc(100% - 48px));

    margin-inline: auto;
}

.section {

    padding: 120px 0;

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

.section-alt {
    background: var(--bg-alt);
}

.section-heading {

    max-width: 900px;

    margin-bottom: 62px;
}

.eyebrow,
.project-type,
.mini-label,
.company-period {

    margin: 0 0 16px;

    color: var(--muted);

    font-family:
        "SFMono-Regular", Consolas,
        "Liberation Mono", monospace;

    font-size: 0.76rem;
    font-weight: 600;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.section-number {

    display: inline-flex;

    align-items: center;

    margin: 0;

    color: var(--accent);

    font-family:
        "SFMono-Regular", Consolas,
        "Liberation Mono", monospace;

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

    letter-spacing: 0.16em;

    line-height: 1;

    text-transform: uppercase;
}

.section-heading > .section-number {
    margin-bottom: 0;
}

.section-heading > .section-number::after {

    content: "";

    display: block;

    width: 2.5rem;
    height: 1px;

    margin-left: 0.9rem;

    background: var(--accent);

    opacity: 0.55;
}

.section-heading h2 {

    margin: 0;

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

    line-height: 1.02;

    letter-spacing: -0.052em;

    font-weight: 650;
}

/* ============================================================
   HEADING TREATMENT
============================================================ */

.heading-muted {

    color: transparent;

    background:
        linear-gradient(90deg, var(--muted) 0%, color-mix(in srgb, var(--muted) 78%, var(--text)) 100%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}

.section-description {

    max-width: 700px;

    margin: 27px 0 0;

    color: var(--text-soft);

    font-size: 1.05rem;
}

/* ============================================================
   NAVIGATION
============================================================ */

.site-header {

    position: fixed;

    inset:
        0
        0
        auto
        0;

    z-index: 1000;

    border-bottom:
        1px solid transparent;

    background:
        var(--header-bg);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    transition:
        border-color var(--transition);
}

.site-header.scrolled {
    border-color: var(--border);
}

.nav-container {

    min-height: 76px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 30px;
}

.brand {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    flex-shrink: 0;

    font-weight: 650;
}

.brand-mark {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border:
        1px solid
        var(--border-strong);

    border-radius: 50%;

    font-family:
        "SFMono-Regular", Consolas, monospace;

    font-size: 0.73rem;

    transition:
        border-color var(--transition), background var(--transition);
}

.brand:hover .brand-mark {

    border-color:
        var(--accent);

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

.brand-name {
    font-size: 0.95rem;
}

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-left: auto;
}

.nav-link {

    position: relative;

    padding: 27px 0;

    color: var(--muted);

    font-size: 0.82rem;

    font-weight: 550;

    transition:
        color var(--transition);
}

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: 18px;

    height: 1px;

    background:
        var(--accent);

    transition:
        right var(--transition);
}

.nav-link:hover,
.nav-link.active {
    color: var(--text);
}

.nav-link.active::after {
    right: 0;
}

.nav-actions {

    display: flex;

    align-items: center;

    gap: 8px;
}

.theme-toggle,
.menu-toggle {

    width: 40px;
    height: 40px;

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

    border-radius: 50%;

    background:
        transparent;

    cursor: pointer;

    transition:
        border-color var(--transition), background var(--transition), transform var(--transition);
}

.theme-toggle:hover,
.menu-toggle:hover {

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

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

.theme-toggle:active {
    transform: scale(0.94);
}

.menu-toggle {

    display: none;

    padding: 10px;
}

.menu-toggle span {

    width: 100%;
    height: 1px;

    display: block;

    margin: 4px 0;

    background:
        var(--text);

    transition:
        transform var(--transition), opacity var(--transition);
}

.menu-toggle.active span:nth-child(1) {

    transform:
        translateY(5px)
        rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {

    transform:
        translateY(-5px)
        rotate(-45deg);
}

.mobile-nav {
    display: none;
}

/* ============================================================
   HERO
============================================================ */

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding:
        140px 0
        90px;
}

.hero-grid-bg {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.20;

    background-image:

        linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);

    background-size:
        72px 72px;

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

.hero-grid {

    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(290px, 0.65fr);

    gap: 85px;

    align-items: center;
}

.hero-content {

    min-width: 0;

    max-width: 760px;
}

.eyebrow {
    color: var(--accent);
}

.hero h1 {

    margin: 0;

    max-width: 780px;

    font-size:
        clamp(4.4rem, 8.5vw, 8.2rem);

    font-weight: 650;

    line-height: 0.80;

    letter-spacing: -0.07em;
}

.hero h1 span {

    display: block;

    color: var(--muted);
}

.hero-role {

    margin:
        42px 0
        0;

    color: var(--text);

    font-size:
        clamp(1rem, 1.8vw, 1.18rem);

    font-weight: 600;
}

.hero-copy {

    max-width: 700px;

    margin:
        19px 0
        0;

    color:
        var(--text-soft);

    font-size:
        clamp(1.03rem, 1.6vw, 1.20rem);
}

.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 36px;
}

.button {

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    padding:
        0 20px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        var(--radius-sm);

    font-size: 0.9rem;

    font-weight: 600;

    transition:
        transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {

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

    background:
        var(--accent-soft);

    color:
        var(--text);
}

.button-primary:hover {

    border-color:
        var(--accent);

    background:
        var(--accent);

    color: #ffffff;
}

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

.current-status {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 42px;

    color: var(--text-soft);

    font-size: 0.83rem;
}

.status-dot {

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--accent);

    box-shadow:
        0 0 0 6px
        var(--accent-soft);
}

.status-label {

    display: block;

    margin-bottom: 2px;

    color: var(--muted);

    font-size: 0.70rem;

    text-transform: uppercase;

    letter-spacing: 0.09em;
}

.current-status a:hover {
    color: var(--accent);
}

.hero-stats {

    width: 100%;

    min-width: 0;

    align-self: center;

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

.stat {

    padding: 24px 0;

    display: grid;

    grid-template-columns:
        95px 1fr;

    align-items: center;

    gap: 20px;

    border-bottom:
        1px solid
        var(--border);
}

.stat strong {

    font-size: 1.75rem;

    font-weight: 550;

    letter-spacing:
        -0.04em;
}

.stat span {

    color: var(--muted);

    font-size: 0.86rem;
}

.stat-text strong {

    color:
        var(--accent);

    font-family:
        "SFMono-Regular", Consolas, monospace;

    font-size: 0.9rem;

    letter-spacing: 0.03em;
}

/* ============================================================
   ABOUT
============================================================ */

.about-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.75fr);

    gap: 100px;

    align-items: start;
}

.about-story {

    max-width: 720px;

    color:
        var(--text-soft);

    font-size: 1.05rem;
}

.about-story p {
    margin: 0 0 23px;
}

.about-story .about-intro {

    margin-bottom: 30px;

    color:
        var(--text);

    font-size:
        clamp(1.45rem, 2.4vw, 2rem);

    line-height: 1.35;

    letter-spacing:
        -0.025em;
}

.foundation-panel {

    padding:
        28px 30px;

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

    border-radius:
        var(--radius-md);

    background:
        var(--surface);
}

.foundation-panel .mini-label {
    margin-bottom: 22px;
}

.foundation-list {

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

.foundation-list div {

    min-height: 58px;

    display: grid;

    grid-template-columns:
        38px 1fr;

    align-items: center;

    gap: 12px;

    border-bottom:
        1px solid
        var(--border);
}

.foundation-list span {

    color:
        var(--accent);

    font-family:
        "SFMono-Regular", Consolas, monospace;

    font-size: 0.70rem;
}

.foundation-list strong {

    font-size: 0.92rem;

    font-weight: 550;
}

/* ============================================================
   ABOUT — SECTION LABEL SPACING
============================================================ */

#about .section-heading {
    margin-bottom: 32px;
}

/* ============================================================
   INTERACTIVE CAREER TIMELINE
============================================================ */

.career-path {

    position: relative;

    display: grid;

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

    gap: 14px;

    margin:
        20px 0
        42px;

    padding-top: 18px;
}

.career-line {

    position: absolute;

    top: 25px;

    left: 0;
    right: 0;

    height: 1px;

    background:
        var(--border-strong);

    pointer-events: none;
}

.career-stop {

    position: relative;

    z-index: 1;

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

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;

    padding:
        32px 24px
        22px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-sm);

    background:
        transparent;

    color:
        var(--text);

    text-align: left;

    cursor: pointer;

    transition:
        color var(--transition), transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.career-dot {

    position: absolute;

    top: -1px;
    left: 23px;

    width: 15px;
    height: 15px;

    border:
        3px solid
        var(--bg-alt);

    border-radius: 50%;

    background:
        var(--muted);

    transition:
        background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.career-year {

    margin-top: 2px;

    color:
        var(--muted);

    font-family:
        "SFMono-Regular", Consolas, monospace;

    font-size: 0.72rem;
}

.career-stop strong {

    margin-top: 5px;

    font-size: 0.96rem;

    font-weight: 600;

    transition:
        color var(--transition);
}

.career-stop small {

    color:
        var(--muted);

    font-size: 0.77rem;
}

.career-action {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: auto;

    padding-top: 15px;

    color:
        var(--muted);

    font-family:
        "SFMono-Regular", Consolas,
        "Liberation Mono", monospace;

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

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        color var(--transition), transform var(--transition);
}

/* Selected state */

.career-stop.active,
.career-stop[aria-selected="true"] {

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

    background:
        linear-gradient(135deg, var(--accent-soft), transparent 75%), var(--surface);
}

.career-stop.active .career-dot,
.career-stop[aria-selected="true"] .career-dot {

    background:
        var(--accent);

    box-shadow:
        0 0 0 6px
        var(--accent-soft);

    transform:
        scale(1.05);
}

.career-stop.active strong,
.career-stop[aria-selected="true"] strong {
    color: var(--accent);
}

.career-stop.active .career-action,
.career-stop[aria-selected="true"] .career-action {
    color: var(--accent);
}

/* Desktop hover */

@media (hover: hover) and (pointer: fine) {

    .career-stop:hover {

        transform:
            translateY(-2px);

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

        background:
            linear-gradient(135deg, var(--accent-soft), transparent 75%);
    }

    .career-stop:hover .career-dot {

        background:
            var(--accent);

        box-shadow:
            0 0 0 6px
            var(--accent-soft);

        transform:
            scale(1.05);
    }

    .career-stop:hover strong {
        color: var(--accent);
    }

    .career-stop:hover .career-action {

        color:
            var(--accent);

        transform:
            translateX(3px);
    }

    /* Selected/open state remains persistent */

    .career-stop.active:hover, .career-stop[aria-selected="true"]:hover {

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

        background:
            linear-gradient(135deg, var(--accent-soft), transparent 75%), var(--surface);
    }

}

/* ============================================================
   COMPANY DISPLAY
============================================================ */

.company-display {

    display: none;

    min-height: 420px;

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

    border-radius:
        var(--radius-md);

    overflow: hidden;

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}

.company-display.has-selection {

    display: block;

    animation:
        companyDisplayReveal
        320ms ease;
}

@keyframes companyDisplayReveal {

    from {

        opacity: 0;

        transform:
            translateY(10px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }

}

.company-panel {

    animation:
        companyReveal
        320ms ease;
}

.company-panel[hidden] {
    display: none;
}

@keyframes companyReveal {

    from {

        opacity: 0;

        transform:
            translateY(8px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }

}

.company-card-header {

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        auto;

    gap: 60px;

    align-items: end;

    padding:
        40px 38px;
}

.company-period {
    margin-bottom: 10px;
}

.company-identity h3 {

    margin: 0;

    font-size:
        clamp(1.8rem, 3.5vw, 3rem);

    line-height: 1.05;

    letter-spacing:
        -0.045em;
}

.company-identity > p:last-child {

    max-width: 650px;

    margin:
        16px 0
        0;

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

.company-summary {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 7px;
}

.company-summary span {

    padding:
        6px 10px;

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

    border-radius:
        100px;

    color:
        var(--muted);

    font-size: 0.69rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;
}

/* ============================================================
   ROLES
============================================================ */

.roles-list {

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

.role-item {

    border-bottom:
        1px solid
        var(--border);
}

.role-item:last-child {
    border-bottom: 0;
}

.role-summary {

    min-height: 130px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 40px;

    padding:
        26px 38px;
}

.role-label {

    display: block;

    margin-bottom: 7px;

    color:
        var(--accent);

    font-family:
        "SFMono-Regular", Consolas, monospace;

    font-size: 0.67rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.09em;
}

.role-summary h4 {

    margin: 0;

    font-size:
        clamp(1.15rem, 2vw, 1.45rem);

    font-weight: 600;
}

.role-summary p {

    margin:
        7px 0
        0;

    color:
        var(--muted);

    font-size: 0.88rem;
}

.role-toggle {

    min-width: 118px;

    min-height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 15px;

    padding:
        0 14px;

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

    border-radius:
        var(--radius-sm);

    background:
        transparent;

    cursor: pointer;

    color:
        var(--text-soft);

    font-size: 0.78rem;

    transition:
        border-color var(--transition), background var(--transition);
}

.role-toggle:hover {

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

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

.role-toggle-symbol {

    color:
        var(--accent);

    font-size: 1rem;
}

.role-details {

    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;

    transition:
        grid-template-rows
        400ms ease, opacity
        250ms ease;
}

.role-details.open {

    grid-template-rows: 1fr;

    opacity: 1;
}

.role-details-inner {
    overflow: hidden;
}

.role-details ul {

    margin: 0;

    padding:
        0 70px
        34px 62px;

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

.role-details li {

    max-width: 900px;

    margin-bottom: 11px;
}

.role-details li::marker {
    color: var(--accent);
}

/* ============================================================
   CAPABILITIES
============================================================ */

.capabilities-grid {

    display: grid;

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

    gap: 18px;
}

.capability-card {

    min-height: 310px;

    display: flex;

    flex-direction: column;

    padding: 30px;

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

    border-radius:
        var(--radius-md);

    background:
        var(--surface);

    transition:
        transform var(--transition), border-color var(--transition), background var(--transition);
}

.capability-card:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--border-strong);

    background:
        var(--surface-hover);
}

.development-card {

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

    background:

        linear-gradient(135deg, var(--accent-soft), transparent 65%), var(--surface);
}

.capability-top {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;
}

.experience-badge,
.building-badge {

    padding:
        6px 9px;

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

    border-radius:
        100px;

    color:
        var(--muted);

    font-size: 0.65rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;
}

.building-badge {

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

    background:
        var(--accent-soft);

    color:
        var(--accent);
}

.capability-card h3 {

    margin:
        auto 0
        26px;

    padding-top: 55px;

    font-size:
        clamp(1.7rem, 3vw, 2.4rem);

    letter-spacing:
        -0.04em;
}

.tag-list,
.project-stack {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.tag-list span,
.project-stack span {

    padding:
        7px 10px;

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

    border-radius:
        100px;

    color:
        var(--text-soft);

    font-size: 0.72rem;
}

/* ============================================================
   PROJECTS / SELECTED WORK
============================================================ */

#work .section-heading {
    max-width: 900px;
    margin-bottom: 46px;
}

#work .projects {
    width: 100%;
}

.work-group + .work-group {

    margin-top: 82px;

    padding-top: 58px;

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

.work-group-heading {

    display: grid;

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

    gap: 70px;

    align-items: start;

    margin-bottom: 28px;

    padding-bottom: 20px;

    border-bottom:
        1px solid
        var(--border);
}

.work-group-heading .section-number {

    margin: 0;

    color:
        var(--accent);

    font-size: 0.8rem;
}

.work-group-heading > p:last-child {

    max-width: 650px;

    margin: 0;

    color:
        var(--text-soft);

    font-size: 0.95rem;

    line-height: 1.7;
}

.projects {

    display: grid;

    gap: 22px;
}

.project-featured {

    padding: 34px;

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

    border-radius:
        var(--radius-md);

    background:
        var(--surface);

    transition:
        transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.project-featured:hover {

    border-color:
        var(--border-strong);

    box-shadow:
        var(--shadow);
}

.project-muted {
    opacity: 0.84;
}

.project-meta {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 20px;

    padding-bottom: 28px;

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

    color:
        var(--muted);

    font-family:
        "SFMono-Regular", Consolas, monospace;

    font-size: 0.72rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.project-meta > div {

    display: flex;

    align-items: center;

    gap: 14px;
}

.project-status {

    padding:
        5px 8px;

    border-radius:
        100px;
}

.project-status.active {

    border:
        1px solid
        var(--accent-border);

    background:
        var(--accent-soft);

    color:
        var(--accent);
}

.project-status.development,
.project-status.professional {

    border:
        1px solid
        var(--border);
}

.project-status.professional {
    color: var(--text-soft);
}

.project-summary {

    display: grid;

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

    gap: 50px;

    align-items: end;

    padding-top: 40px;
}

.project-main {
    min-width: 0;
}

.project-type {
    margin-bottom: 10px;
}

.project-summary h3 {

    margin: 0;

    max-width: 900px;

    font-size:
        clamp(2.15rem, 4.6vw, 4rem);

    line-height: 1;

    letter-spacing:
        -0.055em;
}

.project-description {

    max-width: 760px;

    margin:
        23px 0 0;

    color:
        var(--text-soft);

    font-size: 1.03rem;
}

.project-toggle {

    min-width: 118px;
    min-height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 15px;

    padding:
        0 14px;

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

    border-radius:
        var(--radius-sm);

    background:
        transparent;

    color:
        var(--text-soft);

    cursor: pointer;

    font-size: 0.78rem;

    transition:
        border-color var(--transition), background var(--transition);
}

.project-toggle:hover {

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

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

.project-toggle-symbol {

    color:
        var(--accent);

    font-size: 1rem;
}

.project-details {

    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;

    transition:
        grid-template-rows 400ms ease, opacity 250ms ease;
}

.project-details.open {

    grid-template-rows: 1fr;

    opacity: 1;
}

.project-details-inner {
    overflow: hidden;
}

.project-detail-grid {

    display: grid;

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

    gap:
        32px 70px;

    margin-top: 34px;

    padding:
        34px 0 4px;

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

.project-detail-grid .mini-label {
    margin-bottom: 9px;
}

.project-detail-grid p {

    max-width: 650px;

    margin: 0;

    color:
        var(--text-soft);

    font-size: 0.94rem;
}

.project-footer {

    display: flex;

    align-items: flex-end;

    justify-content:
        space-between;

    gap: 35px;

    margin-top: 32px;

    padding-top: 26px;

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

.project-links {

    display: flex;

    flex-wrap: wrap;

    justify-content:
        flex-end;

    gap: 18px;

    flex-shrink: 0;
}

.project-links a,
.text-link {

    padding-bottom: 3px;

    border-bottom:
        1px solid
        var(--border-strong);

    color:
        var(--text);

    font-size: 0.86rem;

    transition:
        border-color var(--transition), color var(--transition);
}

.project-links a:hover,
.text-link:hover {

    border-color:
        var(--accent);

    color:
        var(--accent);
}

/* ============================================================
   PROCESS
============================================================ */

.process-grid {

    display: grid;

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

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

    border-left:
        1px solid
        var(--border);
}

.process-step {

    min-height: 275px;

    padding: 30px;

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

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

    transition:
        background var(--transition);
}

.process-step:hover {
    background: var(--surface);
}

.process-step > span {

    color:
        var(--accent);

    font-family:
        "SFMono-Regular", Consolas, monospace;

    font-size: 0.76rem;
}

.process-step h3 {

    margin:
        74px 0
        14px;

    font-size: 1.5rem;
}

.process-step p {

    margin: 0;

    color:
        var(--text-soft);

    font-size: 0.93rem;
}

.portfolio-note {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    margin-top: 90px;

    padding: 48px;

    border:
        1px solid
        var(--accent-border);

    border-radius:
        var(--radius-md);

    background:

        linear-gradient(-120deg, var(--accent-soft), transparent 70%);
}

.portfolio-note h3 {

    margin: 0;

    max-width: 500px;

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

    line-height: 1.05;

    letter-spacing:
        -0.045em;
}

.portfolio-note-copy {
    color: var(--text-soft);
}

.portfolio-note-copy p:first-child {
    margin-top: 0;
}


/* ==================================================
   BEYOND WORK — CONTINUOUS CAROUSEL V1
=================================================== */

.beyond-carousel {
    --beyond-gap: 10px;
    position: relative;
}

.beyond-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.beyond-carousel-header p {
    max-width: 580px;
    color: var(--muted);
    line-height: 1.7;
}

.beyond-carousel-controls {
    display: flex;
    gap: 10px;
}

.beyond-carousel-controls button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.beyond-carousel-controls button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.beyond-carousel-viewport {
    overflow: hidden;
    width: 100%;
}

.beyond-carousel-track {
    display: flex;
    gap: var(--beyond-gap);
    width: max-content;
    align-items: flex-start;
}

.beyond-slide {
    flex: 0 0 clamp(300px, 38vw, 540px);
    min-width: 0;
}

.beyond-slide-media {
    position: relative;
    aspect-ratio: 3 / 2;
    border: 1px solid var(--border);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            var(--surface),
            var(--bg)
        );
    overflow: hidden;
}

.beyond-slide-media span {
    position: absolute;
    bottom: 22px;
    left: 22px;
    color: var(--accent);
    font-size: 12px;
    letter-spacing: .12em;
}

.beyond-slide-content {
    padding: 18px 4px 8px;
}

.beyond-slide-content h3 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 22px;
}

.beyond-slide-content p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
    max-width: 440px;
}

@media (max-width: 700px) {
    .beyond-carousel-header {
        align-items: flex-start;
    }

    .beyond-slide {
        flex-basis: min(82vw, 420px);
    }

    .beyond-slide-content h3 {
        font-size: 19px;
    }
}


/* ============================================================
   CONTACT — CENTERED CARD / COMPACT ICONS
============================================================ */
.contact-section { padding-bottom: 140px; }
.contact-content { display: flex; flex-direction: column; align-items: stretch; }
.contact-label { align-self: flex-start; margin-bottom: 56px; }
.contact-label::after {
    content: "";
    display: inline-block;
    width: 2.5rem;
    height: 1px;
    margin-left: .9rem;
    vertical-align: middle;
    background: var(--accent);
    opacity: .55;
}
.contact-card {
    width: min(100%, 680px);
    margin-inline: auto;
    padding: clamp(28px, 3vw, 36px) clamp(22px, 3vw, 36px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, .09);
    text-align: center;
}
.contact-card-title {
    margin: 0 0 16px;
    color: var(--text);
    font-size: clamp(1.75rem, 2.7vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
    text-wrap: balance;
}
.contact-statement {
    max-width: 540px;
    margin: 0 auto;
    color: var(--text);
    font-size: clamp(1rem, 1.35vw, 1.125rem);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: -.01em;
    text-wrap: balance;
}
.contact-divider {
    height: 1px;
    width: 100%;
    margin-top: 22px;
    background: var(--border);
}
.contact-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 20px;
}
.contact-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    background: transparent;
    text-decoration: none;
    transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.contact-icon svg { width: 22px; height: 22px; flex: none; }
.contact-icon:hover, .contact-icon:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-3px);
}
.contact-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.contact-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    z-index: 5;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 5px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}
.contact-icon:hover .contact-tooltip, .contact-icon:focus-visible .contact-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
@media (max-width: 700px) {
    .contact-label { margin-bottom: 40px; }
    .contact-card { padding: 32px 20px; }
    .contact-icons { gap: 18px; margin-top: 22px; }
    .contact-icon { width: 54px; height: 54px; }
    .contact-tooltip { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
    .contact-icon, .contact-tooltip { transition: none; }
}

/* ============================================================
   FOOTER
============================================================ */

.site-footer {

    padding:
        34px 0;

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

    color:
        var(--muted);

    font-size: 0.75rem;
}

.footer-content {

    display: grid;

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

    align-items: center;

    gap: 30px;
}

.footer-content > div:first-child {

    display: flex;

    flex-direction: column;

    gap: 2px;
}

.footer-content strong {

    color:
        var(--text);

    font-weight: 550;
}

.footer-center {

    display: flex;

    gap: 15px;
}

.footer-center span + span::before {

    content: "•";

    margin-right: 15px;
}

.back-to-top {

    justify-self: end;

    transition:
        color var(--transition);
}

.back-to-top:hover {
    color: var(--accent);
}

/* ============================================================
   REVEAL
============================================================ */

.reveal {

    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity 650ms ease, transform 650ms ease;
}

.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1000px) {

    .desktop-nav {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .mobile-nav {

        position: fixed;

        top: 76px;
        left: 0;
        right: 0;

        height:
            calc(100vh - 76px);

        display: flex;

        flex-direction: column;

        padding:
            28px 24px;

        background:
            var(--bg);

        transform:
            translateX(100%);

        visibility:
            hidden;

        transition:
            transform 300ms ease, visibility 300ms ease;
    }

    .mobile-nav.open {

        transform:
            translateX(0);

        visibility:
            visible;
    }

    .mobile-nav a {

        padding:
            18px 0;

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

        font-size: 1.2rem;
    }

    .hero {

        min-height: auto;

        padding-top: 165px;
    }

    .hero-grid {

        grid-template-columns: 1fr;

        gap: 65px;
    }

    .hero-content {
        max-width: none;
    }

    .hero-stats {

        display: grid;

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

    .stat:nth-child(odd) {

        padding-right: 25px;

        border-right:
            1px solid
            var(--border);
    }

    .stat:nth-child(even) {
        padding-left: 25px;
    }

    .about-layout {

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .foundation-panel {
        max-width: 650px;
    }

    .career-path {

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

        gap: 10px;
    }

    .career-stop {

        min-height: 170px;

        padding:
            30px 18px
            20px;
    }

    .career-stop .career-dot {
        left: 17px;
    }

    .company-card-header {

        grid-template-columns: 1fr;

        gap: 25px;
    }

    .company-summary {

        flex-direction: row;

        align-items: flex-start;
    }

    .project-detail-grid, .portfolio-note, .contact-layout {

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .work-group-heading {

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .process-grid {

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

    .beyond-card {

        padding:
            34px 28px
            36px;
    }

}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .container {

        width:
            min(calc(100% - 32px), var(--container));
    }

    .section {
        padding: 88px 0;
    }

    .section-heading {
        margin-bottom: 44px;
    }

    .section-number {

        font-size: 0.78rem;

        letter-spacing: 0.14em;
    }

    .section-heading > .section-number {
        margin-bottom: 2.75rem;
    }

    .section-heading > .section-number::after {

        width: 1.75rem;

        margin-left: 0.7rem;
    }

    .section-heading h2 {

        font-size:
            clamp(2.45rem, 12vw, 3.6rem);
    }

    .brand-name {
        display: none;
    }

    .hero {

        padding:
            135px 0
            80px;
    }

    .hero h1 {

        font-size:
            clamp(4rem, 20vw, 6.7rem);
    }

    .hero-role {
        margin-top: 34px;
    }

    .hero-copy {
        font-size: 1rem;
    }

    .hero-actions {

        display: grid;

        width: 100%;
    }

    .button {
        width: 100%;
    }

    .hero-stats {
        grid-template-columns: 1fr;
    }

    .stat, .stat:nth-child(odd), .stat:nth-child(even) {

        padding:
            20px 0;

        border-right: 0;
    }

    .about-story .about-intro {
        font-size: 1.35rem;
    }

    .foundation-panel {
        padding: 22px;
    }

    /* --------------------------------------------------------
       EXPERIENCE — MOBILE
    --------------------------------------------------------- */

    .career-path {

        display: flex;

        flex-direction: column;

        gap: 12px;

        margin:
            12px 0 0;

        padding: 0;

        border-left: 0;
    }

    .career-line {
        display: none;
    }

    .career-stop {

        width: 100%;

        min-height: 0;

        padding:
            22px 50px
            20px 22px;

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

        border-radius:
            var(--radius-sm);

        background:
            var(--surface);

        transform: none;

        -webkit-tap-highlight-color:
            transparent;
    }

    .career-stop:hover {
        transform: none;
    }

    .career-stop.active, .career-stop[aria-selected="true"] {

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

        background:
            linear-gradient(135deg, var(--accent-soft), transparent 80%), var(--surface);
    }

    .career-stop .career-dot {

        top: 22px;

        left: auto;
        right: 22px;

        width: 11px;
        height: 11px;

        border: 0;
    }

    .career-stop.active .career-dot, .career-stop[aria-selected="true"] .career-dot {

        box-shadow:
            0 0 0 5px
            var(--accent-soft);
    }

    .career-year {
        margin-top: 0;
    }

    .career-stop strong {

        margin-top: 3px;

        padding-right: 24px;

        font-size: 1.02rem;
    }

    .career-stop small {

        max-width: 90%;

        margin-top: 2px;

        line-height: 1.5;
    }

    .career-action {

        margin-top: 14px;

        padding-top: 0;
    }

    .company-display.has-selection {
        min-height: 0;
    }

    .career-path > .company-display {

        width: 100%;

        margin:
            -2px 0 6px;

        min-height: 0;

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

        box-shadow: none;
    }

    .career-path > .company-display.has-selection {
        display: block;
    }

    .career-path >
    .company-display
    .company-card-header {

        padding:
            25px 22px;
    }

    .career-path >
    .company-display
    .company-identity h3 {

        font-size:
            clamp(1.65rem, 8vw, 2.35rem);
    }

    .career-path >
    .company-display
    .company-identity > p:last-child {

        font-size: 0.92rem;
    }

    .career-path >
    .company-display
    .role-summary {

        padding: 22px;
    }

    .career-path >
    .company-display
    .role-details ul {

        padding:
            0 30px
            26px 40px;
    }

    .company-card-header {

        padding:
            26px 24px;
    }

    .company-summary {
        flex-wrap: wrap;
    }

    .role-summary {

        min-height: 125px;

        padding: 24px;

        gap: 20px;
    }

    .role-toggle {

        min-width: 42px;

        width: 42px;

        padding: 0;

        justify-content:
            center;

        flex-shrink: 0;
    }

    .role-toggle-label {
        display: none;
    }

    .role-details ul {

        padding:
            0 32px
            28px 43px;
    }

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

    .capability-card {

        min-height: 285px;

        padding: 24px;
    }

    .capability-top {
        align-items: flex-start;
    }

    .experience-badge, .building-badge {
        text-align: right;
    }

    .project-featured {
        padding: 24px;
    }

    .project-meta {
        align-items: flex-start;
    }

    .project-index {
        text-align: right;
    }

    .project-summary {

        grid-template-columns: 1fr;

        gap: 24px;

        align-items: start;

        padding-top: 35px;
    }

    .project-toggle {
        width: 100%;
    }

    .project-footer {

        align-items: flex-start;

        flex-direction: column;
    }

    .project-links {
        justify-content: flex-start;
    }

    .project-detail-grid {
        gap: 26px;
    }

    .work-group + .work-group {

        margin-top: 60px;

        padding-top: 45px;
    }

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

    .process-step {
        min-height: 225px;
    }

    .process-step h3 {
        margin-top: 58px;
    }

    .portfolio-note {

        margin-top: 60px;

        padding: 28px;
    }

    /* --------------------------------------------------------
       BEYOND
    --------------------------------------------------------- */

    #beyond .section-heading {
        margin-bottom: 42px;
    }

    #beyond .beyond-grid {

        display: block;

        width: 100%;

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

    #beyond .beyond-card, #beyond .beyond-card:last-child {

        display: block;

        width: 100%;

        min-height: 0;
        height: auto;

        padding:
            30px 0
            32px;

        margin: 0;

        border: 0;

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

        background:
            transparent;
    }

    #beyond .beyond-card:last-child {

        padding-bottom: 0;

        border-bottom: 0;
    }

    #beyond .beyond-card h3 {

        margin:
            0 0 18px;

        font-size:
            clamp(1.35rem, 6vw, 1.65rem);

        line-height: 1.15;
    }

    #beyond .beyond-card p {

        margin: 0;

        max-width: none;

        font-size: 1rem;

        line-height: 1.65;
    }

    #beyond .beyond-card:hover {

        border-color:
            var(--border);

        background:
            transparent;
    }

    .contact-section {
        padding-bottom: 100px;
    }

    .contact-link strong {
        word-break: break-word;
    }

    .footer-content {

        grid-template-columns: 1fr;

        text-align: center;
    }

    .footer-content > div:first-child {
        align-items: center;
    }

    .footer-center {

        justify-content: center;

        flex-wrap: wrap;
    }

    .back-to-top {
        justify-self: center;
    }

}

/* ============================================================
   REDUCED MOTION
============================================================ */

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

    *, *::before, *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

    .reveal {

        opacity: 1;

        transform: none;
    }

}

/* ============================================================
   KEYBOARD ACCESSIBILITY
============================================================ */

a:focus-visible,
button:focus-visible {

    outline:
        2px solid
        var(--accent);

    outline-offset:
        4px;
}

/* ============================================================
   CENTERED CONTENT CAROUSELS — CURRENT
   Capabilities + Selected Work
============================================================ */

.carousel-row {

    display: grid;

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

    align-items: center;

    gap: 20px;

    width: 100%;

    min-height: 0;
    height: auto;
}

.carousel-arrow {

    width: 54px;
    height: 54px;

    display: grid;

    place-items: center;

    padding: 0;

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

    border-radius: 50%;

    background:
        var(--surface);

    color:
        var(--text-soft);

    font-size: 1rem;

    cursor: pointer;

    transition:
        border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}

.carousel-arrow:hover {

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

    background:
        var(--accent-soft);

    color:
        var(--accent);

    transform:
        scale(1.04);
}

.carousel-arrow:focus-visible {

    outline:
        2px solid
        var(--accent);

    outline-offset: 4px;
}

.horizontal-track {

    position: relative;

    min-width: 0;
    min-height: 0;

    height: auto;

    overflow: hidden;
}

@keyframes carouselReveal {

    from {

        opacity: 0;

        transform:
            translateX(10px);
    }

    to {

        opacity: 1;

        transform:
            translateX(0);
    }

}

@media (max-width: 1000px) {

    .carousel-row {

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

        gap: 14px;
    }

    .carousel-arrow {

        width: 48px;
        height: 48px;
    }

}

/* ============================================================
   CAPABILITIES — FINAL COMPACT TWO-CARD LAYOUT
============================================================ */

.capabilities-grid.horizontal-track {

    display: grid;

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

    gap: 18px;

    min-height: 0;

    align-items: stretch;
}

.capabilities-grid.horizontal-track
.capability-card {

    display: none;

    width: 100%;

    height: auto;
    min-height: 0;

    margin: 0;
}

.capabilities-grid.horizontal-track
.capability-card.carousel-active {

    display: grid;

    grid-template-rows:
        auto 1fr;

    min-height: 390px;

    height: 100%;

    padding:
        34px 38px
        38px;

    animation:
        carouselReveal 280ms ease;
}

.capabilities-grid.horizontal-track
.capability-top {

    align-self: start;

    justify-content: flex-end;
}

.capabilities-grid.horizontal-track
.capability-body {

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    align-self: stretch;

    padding-top: 54px;
}

.capabilities-grid.horizontal-track
.capability-card h3 {

    margin:
        0 0 26px;
}

.capabilities-grid.horizontal-track
.capability-card > .tag-list, .capabilities-grid.horizontal-track
.capability-body > .tag-list {

    margin: 0;

    align-content: flex-start;
}

.capability-groups,
.capability-group,
.capability-group-label {
    display: contents;
}

/* ============================================================
   CAPABILITIES — TABLET
============================================================ */

@media (max-width: 1000px) {

    .capabilities-grid.horizontal-track {

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

    .capabilities-grid.horizontal-track
    .capability-card.carousel-active {

        min-height: 370px;

        padding:
            32px 30px
            34px;
    }

    .capabilities-grid.horizontal-track
    .capability-body {

        padding-top: 46px;
    }

    .capabilities-grid.horizontal-track
    .capability-card h3 {

        margin-bottom: 24px;
    }

}

/* ============================================================
   CAPABILITIES — MOBILE
============================================================ */

@media (max-width: 700px) {

    .capabilities-grid.horizontal-track {
        grid-template-columns: 1fr;
    }

    .capabilities-grid.horizontal-track
    .capability-card.carousel-active {

        min-height: 0;

        padding:
            28px 24px
            30px;
    }

    .capabilities-grid.horizontal-track
    .capability-body {

        padding-top: 44px;
    }

    .capabilities-grid.horizontal-track
    .capability-card h3 {

        margin-bottom: 22px;
    }

}

/* ============================================================
   SELECTED WORK — COMPACT CAROUSEL
============================================================ */

#work .horizontal-section-shell,
#work .carousel-row,
.projects.horizontal-track {

    min-height: 0;

    height: auto;
}

.projects.horizontal-track {
    display: block;
}

.projects.horizontal-track >
.project-featured {

    display: none;

    width: 100%;

    height: auto;
    min-height: 0;

    margin: 0;
}

.projects.horizontal-track >
.project-featured.carousel-active {

    display: block;

    height: auto;
    min-height: 0;

    animation:
        carouselReveal 280ms ease;
}

.projects.horizontal-track >
.project-featured.carousel-active:has(.project-details.open) {

    height: auto;

    min-height: 0;
}

/* ============================================================
   MOBILE CAROUSEL REFINEMENT
============================================================ */

@media (max-width: 700px) {

    .carousel-row {

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            auto auto;

        gap:
            18px 12px;

        align-items: center;
    }

    .carousel-row >
    .horizontal-track {

        grid-column:
            1 / -1;

        grid-row: 1;

        width: 100%;

        min-width: 0;
    }

    .carousel-row >
    .carousel-arrow-prev {

        grid-column: 1;

        grid-row: 2;

        justify-self: end;
    }

    .carousel-row >
    .carousel-arrow-next {

        grid-column: 2;

        grid-row: 2;

        justify-self: start;
    }

    .carousel-arrow {

        width: 44px;
        height: 44px;

        font-size: 0.95rem;
    }

    .horizontal-track {
        touch-action: pan-y;
    }

    .project-meta {
        gap: 12px;
    }

    .project-meta > div {

        gap: 10px;

        flex-wrap: wrap;
    }

    .project-summary h3 {

        font-size:
            clamp(2rem, 10vw, 3.15rem);

        line-height: 0.98;
    }

    .project-description {

        font-size: 1rem;

        line-height: 1.65;
    }

    .project-type {
        line-height: 1.55;
    }

}

/* ============================================================
   FOUNDATION NUMBER ALIGNMENT
============================================================ */

.foundation-list div {

    grid-template-columns:
        42px 1fr;

    gap: 14px;
}

/* ============================================================
   MOBILE — REMOVE STICKY TAP / HOVER STATES
============================================================ */

@media (max-width: 1000px) {

    .brand, .brand:hover, .brand:focus, .brand:active {

        color: inherit;

        background:
            transparent;

        -webkit-tap-highlight-color:
            transparent;
    }

    .brand .brand-mark, .brand:hover .brand-mark, .brand:focus .brand-mark, .brand:active .brand-mark {

        color:
            var(--text);

        background:
            transparent;

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

    .career-stop {

        -webkit-tap-highlight-color:
            transparent;
    }

    .career-stop.active, .career-stop[aria-selected="true"] {

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

    .career-stop.active strong, .career-stop[aria-selected="true"] strong, .career-stop.active .career-action, .career-stop[aria-selected="true"] .career-action {

        color:
            var(--accent);
    }

}

/* ============================================================
   HERO — SYSTEM VISUAL
============================================================ */

.hero-stats {

    position: relative;

    isolation: isolate;
}

.hero-stats-visual {

    position: absolute;

    width: 175%;

    max-width: none;

    top: 50%;
    left: 12.5%;

    transform:
        translate(-50%, -50%);

    pointer-events: none;
    user-select: none;

    z-index: -1;
}

.hero-system-image {

    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;
    user-select: none;
}

.hero-system-dark {

    display: block;

    opacity: 0.75;
}

.hero-system-light {
    display: none;
}

html[data-theme="light"]
.hero-system-dark {

    display: none;
}

html[data-theme="light"]
.hero-system-light {

    display: block;

    opacity: 0.50;
}

@media (prefers-color-scheme: light) {

    html:not([data-theme])
    .hero-system-dark {

        display: none;
    }

    html:not([data-theme])
    .hero-system-light {

        display: block;

        opacity: 0.50;
    }

}

.hero-stats .stat {

    position: relative;

    z-index: 1;
}

/* ============================================================
   HERO SYSTEM VISUAL — MOBILE
============================================================ */

@media (max-width: 700px) {

    .hero-stats-visual {

        width: 135%;

        top: 50%;
        left: 50%;

        transform:
            translate(-50%, -50%);
    }

    .hero-system-dark {
        opacity: 0.45;
    }

    html[data-theme="light"]
    .hero-system-light {

        opacity: 0.35;
    }

}

@media (max-width: 700px)
and (prefers-color-scheme: light) {

    html:not([data-theme])
    .hero-system-light {

        opacity: 0.35;
    }

}

/* ============================================================
   HERO STATS — DARK MODE READABILITY
============================================================ */

.hero-stats .stat::before {

    content: "";

    position: absolute;

    inset:
        8px -18px;

    background:
        linear-gradient(90deg, rgba(13, 14, 16, 0.94) 0%, rgba(13, 14, 16, 0.82) 42%, rgba(13, 14, 16, 0.48) 72%, rgba(13, 14, 16, 0) 100%);

    z-index: -1;

    pointer-events: none;
}

/* ============================================================
   HERO STATS — LIGHT MODE READABILITY
============================================================ */

html[data-theme="light"]
.hero-stats .stat::before {

    content: "";

    position: absolute;

    inset:
        8px -18px;

    background:
        linear-gradient(90deg, rgba(245, 244, 240, 0.96) 0%, rgba(245, 244, 240, 0.88) 42%, rgba(245, 244, 240, 0.58) 72%, rgba(245, 244, 240, 0) 100%);

    z-index: -1;

    pointer-events: none;
}

html[data-theme="light"]
.hero-stats .stat span {

    color:
        rgba(25, 25, 26, 0.72);
}

@media (prefers-color-scheme: light) {

    html:not([data-theme])
    .hero-stats .stat::before {

        content: "";

        position: absolute;

        inset:
            8px -18px;

        background:
            linear-gradient(90deg, rgba(245, 244, 240, 0.96) 0%, rgba(245, 244, 240, 0.88) 42%, rgba(245, 244, 240, 0.58) 72%, rgba(245, 244, 240, 0) 100%);

        z-index: -1;

        pointer-events: none;
    }

    html:not([data-theme])
    .hero-stats .stat span {

        color:
            rgba(25, 25, 26, 0.72);
    }

}

/* ============================================================
   ABOUT — SYSTEM VISUAL
============================================================ */

#about {

    position: relative;

    overflow: hidden;

    isolation: isolate;
}

#about .section-shell {

    position: relative;

    z-index: 1;
}

.about-system-visual {

    position: absolute;

    width: 52%;

    max-width: 1000px;

    left: 21.1%;
    top: 50%;

    transform:
        translateY(-50%);

    pointer-events: none;
    user-select: none;

    z-index: 0;
}

.about-system-image {

    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;
    user-select: none;
}

/* Dark */

.about-system-dark {

    display: block;

    opacity: 0.45;
}

.about-system-light {
    display: none;
}

/* Explicit light */

html[data-theme="light"]
.about-system-dark {

    display: none;
}

html[data-theme="light"]
.about-system-light {

    display: block;

    opacity: 0.25;
}

/* System light */

@media (prefers-color-scheme: light) {

    html:not([data-theme])
    .about-system-dark {

        display: none;
    }

    html:not([data-theme])
    .about-system-light {

        display: block;

        opacity: 0.25;
    }

}

/* ============================================================
   ABOUT SYSTEM VISUAL — TABLET
============================================================ */

@media (max-width: 1000px) {

    .about-system-visual {

        width: 70%;

        left: -30%;
        top: 58%;
    }

}

/* ============================================================
   ABOUT SYSTEM VISUAL — MOBILE
============================================================ */

@media (max-width: 700px) {

    .about-system-visual {

        width: 145%;

        left: 38%;
        top: 52%;

        transform:
            translate(-50%, -50%);
    }

    .about-system-dark {
        opacity: 0.45;
    }

    html[data-theme="light"]
    .about-system-light {

        opacity: 0.25;
    }

}

@media (max-width: 700px)
and (prefers-color-scheme: light) {

    html:not([data-theme])
    .about-system-light {

        opacity: 0.25;
    }

}

/* ============================================================
   EXPERIENCE — SYSTEM VISUAL
============================================================ */

.career-path {

    position: relative;

    isolation: isolate;
}

.experience-system-visual {

    position: absolute;

    left: 0;
    right: 0;

    top: 25px;

    height: 1px;

    pointer-events: none;
    user-select: none;

    z-index: 0;
}

.experience-system-image {

    position: absolute;

    left: 0;
    top: 50%;

    width: 100%;
    height: auto;

    transform:
        translateY(-50%);

    display: block;

    pointer-events: none;
    user-select: none;
}

/* Timeline content above artwork */

.career-line {
    z-index: 1;
}

.career-stop {

    position: relative;

    z-index: 1;
}

/* Dark */

.experience-system-dark {

    display: block;

    opacity: 0.42;
}

.experience-system-light {
    display: none;
}

/* Explicit light */

html[data-theme="light"]
.experience-system-dark {

    display: none;
}

html[data-theme="light"]
.experience-system-light {

    display: block;

    opacity: 0.25;
}

/* System light */

@media (prefers-color-scheme: light) {

    html:not([data-theme])
    .experience-system-dark {

        display: none;
    }

    html:not([data-theme])
    .experience-system-light {

        display: block;

        opacity: 0.25;
    }

}

/* ============================================================
   EXPERIENCE — TIMELINE COLOR INTEGRATION
============================================================ */

.career-line {

    background:
        rgba(168, 50, 67, 0.34);
}

html[data-theme="light"]
.career-line {

    background:
        rgba(142, 38, 53, 0.22);
}

@media (prefers-color-scheme: light) {

    html:not([data-theme])
    .career-line {

        background:
            rgba(142, 38, 53, 0.22);
    }

}

/* ============================================================
   COMPANY DISPLAY — SUBTLE CORNER GRADIENT
============================================================ */

.company-display {
    position: relative;
    isolation: isolate;
}

/* Decorative bottom-right glow */
.company-display::after {
    content: "";

    position: absolute;

    right: -12%;
    bottom: -38%;

    width: 52%;
    aspect-ratio: 1;

    background:
        radial-gradient(circle at center, rgba(168, 50, 67, 0.13) 0%, rgba(168, 50, 67, 0.07) 28%, rgba(168, 50, 67, 0.025) 52%, transparent 72%);

    pointer-events: none;

    z-index: 0;
}

/* Keep all company content above the gradient */
.company-panel {
    position: relative;
    z-index: 1;
}

/* ============================================================
   LIGHT THEME
============================================================ */

html[data-theme="light"] .company-display::after {
    background:
        radial-gradient(circle at center, rgba(142, 38, 53, 0.09) 0%, rgba(142, 38, 53, 0.045) 30%, rgba(142, 38, 53, 0.015) 54%, transparent 72%);
}

/* ============================================================
   SYSTEM THEME — LIGHT OS
============================================================ */

@media (prefers-color-scheme: light) {

    html:not([data-theme]) .company-display::after {
        background:
            radial-gradient(circle at center, rgba(142, 38, 53, 0.09) 0%, rgba(142, 38, 53, 0.045) 30%, rgba(142, 38, 53, 0.015) 54%, transparent 72%);
    }

}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .company-display::after {
        right: -35%;
        bottom: -18%;

        width: 90%;
    }

}

/* ============================================================
   SKILLS & TOOLS — CLEAN INTERACTIVE SYSTEM
============================================================ */

.skills-section {
    overflow: hidden;
}

.skills-stack {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 140px);
    gap: 16px;
    width: min(100%, 1100px);
    margin: 2rem 0 0;
    isolation: isolate;
    transition: grid-template-rows 480ms cubic-bezier(.22, 1, .36, 1);
}

/* ------------------------------------------------------------
   Cards — base state
------------------------------------------------------------ */

.skill-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 24px 26px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background:
        linear-gradient(145deg, rgba(168, 50, 67, 0.025), transparent 46%),
        var(--surface);
    color: var(--text);
    cursor: pointer;
    outline: none;
    transition:
        opacity 240ms ease,
        visibility 0s linear 0s,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 260ms ease,
        transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.quality-card {
    grid-column: 1;
    grid-row: 1;
    transform-origin: top left;
}

.compliance-card {
    grid-column: 2;
    grid-row: 1;
    transform-origin: top right;
}

.systems-card {
    grid-column: 1;
    grid-row: 2;
    transform-origin: bottom left;
}

.development-card {
    grid-column: 2;
    grid-row: 2;
    transform-origin: bottom right;
}

/* ------------------------------------------------------------
   Summary / title
------------------------------------------------------------ */

.skill-node-summary {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: height 360ms cubic-bezier(.22, 1, .36, 1);
}

.quality-card .skill-node-summary,
.systems-card .skill-node-summary {
    justify-content: flex-start;
    text-align: left;
}

.compliance-card .skill-node-summary,
.development-card .skill-node-summary {
    justify-content: flex-end;
    text-align: right;
}

.skill-node-title {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.08rem, 1.5vw, 1.28rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    transition:
        color 180ms ease,
        font-size 320ms cubic-bezier(.22, 1, .36, 1),
        transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.skills-stack:not(.is-focused) .skill-card:hover,
.skills-stack:not(.is-focused) .skill-card:focus-visible {
    border-color: var(--accent-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.11);
}

/* ------------------------------------------------------------
   Details — hidden until preview / active
------------------------------------------------------------ */

.skill-node-details {
    position: absolute;
    top: 88px;
    right: 30px;
    bottom: 28px;
    left: 30px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    min-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition:
        opacity 150ms ease,
        transform 240ms ease,
        visibility 0s linear 240ms;
}

.skills-stack.is-focused {
    grid-template-rows: repeat(2, 195px);
}

.skill-card.preview,
.skill-card.active {
    z-index: 10;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    min-height: 406px;
    padding: 28px 30px;
    border-color: var(--accent-border);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16);
}

/* Expanded atmosphere — follows the artwork anchor. */
.quality-card.preview,
.quality-card.active {
    background:
        radial-gradient(circle at bottom right,
            rgba(168, 50, 67, 0.10) 0%,
            rgba(168, 50, 67, 0.04) 30%,
            transparent 58%),
        var(--surface);
}

.compliance-card.preview,
.compliance-card.active {
    background:
        radial-gradient(circle at bottom left,
            rgba(168, 50, 67, 0.10) 0%,
            rgba(168, 50, 67, 0.04) 30%,
            transparent 58%),
        var(--surface);
}

.systems-card.preview,
.systems-card.active {
    background:
        radial-gradient(circle at top right,
            rgba(168, 50, 67, 0.10) 0%,
            rgba(168, 50, 67, 0.04) 30%,
            transparent 58%),
        var(--surface);
}

.development-card.preview,
.development-card.active {
    background:
        radial-gradient(circle at top left,
            rgba(168, 50, 67, 0.10) 0%,
            rgba(168, 50, 67, 0.04) 30%,
            transparent 58%),
        var(--surface);
}

.skill-card.preview .skill-node-summary,
.skill-card.active .skill-node-summary {
    align-items: flex-start;
    height: auto;
}

.skill-card.preview .skill-node-title,
.skill-card.active .skill-node-title {
    font-size: clamp(1.28rem, 2vw, 1.55rem);
}

.quality-card.preview .skill-node-summary,
.quality-card.active .skill-node-summary,
.systems-card.preview .skill-node-summary,
.systems-card.active .skill-node-summary {
    justify-content: flex-start;
    text-align: left;
}

.compliance-card.preview .skill-node-summary,
.compliance-card.active .skill-node-summary,
.development-card.preview .skill-node-summary,
.development-card.active .skill-node-summary {
    justify-content: flex-end;
    text-align: right;
}

.skill-card.preview .skill-node-details,
.skill-card.active .skill-node-details {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 220ms ease 200ms,
        transform 320ms cubic-bezier(.22, 1, .36, 1) 170ms,
        visibility 0s linear 0s;
}

/* ------------------------------------------------------------
   Status badges
------------------------------------------------------------ */

.skill-details-header {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 28px;
    margin-bottom: 20px;
}

.quality-card .skill-details-header,
.systems-card .skill-details-header {
    justify-content: flex-start;
}

.compliance-card .skill-details-header,
.development-card .skill-details-header {
    justify-content: flex-end;
}

.experience-badge,
.building-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.69rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.experience-badge {
    border: 1px solid var(--border);
    background: var(--bg-alt);
    color: var(--text-soft);
}

.building-badge {
    border: 1px solid var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent);
}

/* ------------------------------------------------------------
   Skill list
------------------------------------------------------------ */

.skill-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    width: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 6px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.skill-detail-list::-webkit-scrollbar {
    width: 6px;
}

.skill-detail-list::-webkit-scrollbar-track {
    background: transparent;
}

.skill-detail-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--border-strong);
}

.skill-detail-list > span {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.012);
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.3;
}

/* ------------------------------------------------------------
   Focused state — hide non-selected cards
------------------------------------------------------------ */

.skills-stack.is-focused .skill-card:not(.preview):not(.active) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(.98);
    transition:
        opacity 220ms ease,
        transform 280ms ease,
        visibility 0s linear 280ms;
}

/* ------------------------------------------------------------
   Directional expansion
------------------------------------------------------------ */

.quality-card.preview,
.quality-card.active {
    animation: skillExpandTopLeft 520ms cubic-bezier(.16, 1, .3, 1) both;
}

.compliance-card.preview,
.compliance-card.active {
    animation: skillExpandTopRight 520ms cubic-bezier(.16, 1, .3, 1) both;
}

.systems-card.preview,
.systems-card.active {
    animation: skillExpandBottomLeft 520ms cubic-bezier(.16, 1, .3, 1) both;
}

.development-card.preview,
.development-card.active {
    animation: skillExpandBottomRight 520ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes skillExpandTopLeft {
    from { clip-path: inset(0 50% 50% 0 round var(--radius-md)); }
    to   { clip-path: inset(0 0 0 0 round var(--radius-md)); }
}

@keyframes skillExpandTopRight {
    from { clip-path: inset(0 0 50% 50% round var(--radius-md)); }
    to   { clip-path: inset(0 0 0 0 round var(--radius-md)); }
}

@keyframes skillExpandBottomLeft {
    from { clip-path: inset(50% 50% 0 0 round var(--radius-md)); }
    to   { clip-path: inset(0 0 0 0 round var(--radius-md)); }
}

@keyframes skillExpandBottomRight {
    from { clip-path: inset(50% 0 0 50% round var(--radius-md)); }
    to   { clip-path: inset(0 0 0 0 round var(--radius-md)); }
}

/* ------------------------------------------------------------
   Artwork — shared base
------------------------------------------------------------ */

.skill-card .skill-asset {
    position: absolute;
    z-index: 1;
    display: block;
    max-width: none;
    height: auto;
    pointer-events: none;
    user-select: none;
}

/* Collapsed artwork — canonical center-junction alignment. */
.skill-card .skill-asset-collapsed {
    width: 58%;
    opacity: 0.72;
    filter: saturate(0.92) brightness(0.90) contrast(1.04);
    transition:
        opacity 280ms ease,
        filter 280ms ease,
        transform 480ms cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 0s;
}

.quality-card .skill-asset-collapsed {
    right: 0;
    bottom: -15%;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: bottom right;
}

.compliance-card .skill-asset-collapsed {
    left: -1%;
    bottom: -10%;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: bottom left;
}

.systems-card .skill-asset-collapsed {
    right: -0.5%;
    top: -25%;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: top right;
}

.development-card .skill-asset-collapsed {
    left: -17.5%;
    top: -15.5%;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: top left;
}

.skills-stack:not(.is-focused) .skill-card:hover .skill-asset-collapsed,
.skills-stack:not(.is-focused) .skill-card:focus-visible .skill-asset-collapsed {
    opacity: 0.82;
    filter: saturate(1) brightness(0.96) contrast(1.04);
}

/* Expanded artwork — same PNG, separate presentation layer. */
.skill-card .skill-asset-expanded {
    opacity: 0;
    visibility: hidden;
    filter: saturate(0.92) brightness(0.90) contrast(1.04);
    transition:
        opacity 260ms ease,
        transform 520ms cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 260ms;
}

.quality-card .skill-asset-expanded {
    right: 0;
    bottom: -10%;
    width: 64%;
    transform: scale(0.96);
    transform-origin: bottom right;
}

.compliance-card .skill-asset-expanded {
    left: -1%;
    bottom: -5%;
    width: 64%;
    transform: scale(0.96);
    transform-origin: bottom left;
}

.systems-card .skill-asset-expanded {
    right: -0.5%;
    top: -10%;
    width: 64%;
    transform: scale(0.96);
    transform-origin: top right;
}

.development-card .skill-asset-expanded {
    left: -20%;
    top: -5%;
    width: 64%;
    transform: scale(0.96);
    transform-origin: top left;
}

.skill-card.preview .skill-asset-collapsed,
.skill-card.active .skill-asset-collapsed {
    opacity: 0 !important;
    visibility: hidden !important;
    transition:
        opacity 140ms ease,
        visibility 0s linear 140ms;
}

.skill-card.preview .skill-asset-expanded,
.skill-card.active .skill-asset-expanded {
    opacity: 0.24;
    visibility: visible;
    transform: scale(1);
    transition:
        opacity 300ms ease 100ms,
        transform 520ms cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 0s;
}

/* ------------------------------------------------------------
   Light theme
------------------------------------------------------------ */

html[data-theme="light"] .skill-card {
    background:
        linear-gradient(145deg, rgba(142, 38, 53, 0.02), transparent 46%),
        var(--surface);
}

html[data-theme="light"] .quality-card.preview,
html[data-theme="light"] .quality-card.active {
    background:
        radial-gradient(circle at bottom right,
            rgba(142, 38, 53, 0.075) 0%,
            rgba(142, 38, 53, 0.03) 30%,
            transparent 58%),
        var(--surface);
}

html[data-theme="light"] .compliance-card.preview,
html[data-theme="light"] .compliance-card.active {
    background:
        radial-gradient(circle at bottom left,
            rgba(142, 38, 53, 0.075) 0%,
            rgba(142, 38, 53, 0.03) 30%,
            transparent 58%),
        var(--surface);
}

html[data-theme="light"] .systems-card.preview,
html[data-theme="light"] .systems-card.active {
    background:
        radial-gradient(circle at top right,
            rgba(142, 38, 53, 0.075) 0%,
            rgba(142, 38, 53, 0.03) 30%,
            transparent 58%),
        var(--surface);
}

html[data-theme="light"] .development-card.preview,
html[data-theme="light"] .development-card.active {
    background:
        radial-gradient(circle at top left,
            rgba(142, 38, 53, 0.075) 0%,
            rgba(142, 38, 53, 0.03) 30%,
            transparent 58%),
        var(--surface);
}

html[data-theme="light"] .skill-card.preview,
html[data-theme="light"] .skill-card.active {
    box-shadow: 0 20px 48px rgba(25, 25, 26, 0.08);
}

html[data-theme="light"] .skill-detail-list > span {
    background: rgba(25, 25, 26, 0.018);
}

html[data-theme="light"] .skill-card.preview .skill-asset-expanded,
html[data-theme="light"] .skill-card.active .skill-asset-expanded {
    opacity: 0.28;
    filter: saturate(0.88) brightness(0.92) contrast(1.02);
}

/* ------------------------------------------------------------
   System theme when OS is light
------------------------------------------------------------ */

@media (prefers-color-scheme: light) {
    html[data-theme="system"] .skill-card {
        background:
            linear-gradient(145deg, rgba(142, 38, 53, 0.02), transparent 46%),
            var(--surface);
    }

    html[data-theme="system"] .quality-card.preview,
    html[data-theme="system"] .quality-card.active {
        background:
            radial-gradient(circle at bottom right,
                rgba(142, 38, 53, 0.075) 0%,
                rgba(142, 38, 53, 0.03) 30%,
                transparent 58%),
            var(--surface);
    }

    html[data-theme="system"] .compliance-card.preview,
    html[data-theme="system"] .compliance-card.active {
        background:
            radial-gradient(circle at bottom left,
                rgba(142, 38, 53, 0.075) 0%,
                rgba(142, 38, 53, 0.03) 30%,
                transparent 58%),
            var(--surface);
    }

    html[data-theme="system"] .systems-card.preview,
    html[data-theme="system"] .systems-card.active {
        background:
            radial-gradient(circle at top right,
                rgba(142, 38, 53, 0.075) 0%,
                rgba(142, 38, 53, 0.03) 30%,
                transparent 58%),
            var(--surface);
    }

    html[data-theme="system"] .development-card.preview,
    html[data-theme="system"] .development-card.active {
        background:
            radial-gradient(circle at top left,
                rgba(142, 38, 53, 0.075) 0%,
                rgba(142, 38, 53, 0.03) 30%,
                transparent 58%),
            var(--surface);
    }

    html[data-theme="system"] .skill-card.preview,
    html[data-theme="system"] .skill-card.active {
        box-shadow: 0 20px 48px rgba(25, 25, 26, 0.08);
    }

    html[data-theme="system"] .skill-detail-list > span {
        background: rgba(25, 25, 26, 0.018);
    }

    html[data-theme="system"] .skill-card.preview .skill-asset-expanded,
    html[data-theme="system"] .skill-card.active .skill-asset-expanded {
        opacity: 0.28;
        filter: saturate(0.88) brightness(0.92) contrast(1.02);
    }
}

/* ------------------------------------------------------------
   Tablet
------------------------------------------------------------ */

@media (max-width: 900px) {
    .skills-stack {
        width: 100%;
        grid-template-rows: repeat(2, 130px);
        gap: 14px;
    }

    .skills-stack.is-focused {
        grid-template-rows: repeat(2, 190px);
    }

    .skill-card {
        padding: 22px 24px;
    }

    .skill-card.preview,
    .skill-card.active {
        min-height: 394px;
        padding: 26px;
    }

    .skill-node-details {
        top: 82px;
        right: 26px;
        bottom: 26px;
        left: 26px;
    }
}

/* ------------------------------------------------------------
   Mobile
------------------------------------------------------------ */

@media (max-width: 700px) {
    .skills-section {
        overflow: visible;
    }

    .skills-stack {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 90px);
        gap: 10px;
        width: 100%;
        margin-top: 1.6rem;
    }

    .skills-stack.is-focused {
        grid-template-rows: repeat(4, 100px);
    }

    .quality-card,
    .compliance-card,
    .systems-card,
    .development-card {
        grid-column: 1;
        transform-origin: center;
    }

    .quality-card { grid-row: 1; }
    .compliance-card { grid-row: 2; }
    .systems-card { grid-row: 3; }
    .development-card { grid-row: 4; }

    .skill-card {
        padding: 18px 20px;
    }

    .skill-node-summary,
    .quality-card .skill-node-summary,
    .compliance-card .skill-node-summary,
    .systems-card .skill-node-summary,
    .development-card .skill-node-summary {
        justify-content: flex-start;
        text-align: left;
    }

    .skill-card.preview,
    .skill-card.active {
        grid-column: 1;
        grid-row: 1 / -1;
        min-height: 430px;
        padding: 24px 20px;
    }

    .skill-card.preview .skill-node-summary,
    .skill-card.active .skill-node-summary {
        justify-content: flex-start;
        text-align: left;
    }

    .skill-node-details {
        top: 74px;
        right: 20px;
        bottom: 20px;
        left: 20px;
    }

    .skill-details-header,
    .quality-card .skill-details-header,
    .compliance-card .skill-details-header,
    .systems-card .skill-details-header,
    .development-card .skill-details-header {
        justify-content: flex-start;
    }

    .skill-detail-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    /* Stacked cards no longer need to fake a shared center junction. */
    .skill-card .skill-asset-collapsed {
        width: 66%;
        opacity: 0.60;
    }

    .quality-card .skill-asset-collapsed {
        right: -8%;
        bottom: -10%;
    }

    .compliance-card .skill-asset-collapsed {
        left: -8%;
        bottom: -10%;
    }

    .systems-card .skill-asset-collapsed {
        right: -8%;
        top: -10%;
    }

    .development-card .skill-asset-collapsed {
        left: -8%;
        top: -10%;
    }

    .skill-card .skill-asset-expanded {
        width: 118%;
    }

    .quality-card .skill-asset-expanded {
        right: -18%;
        bottom: -2%;
    }

    .compliance-card .skill-asset-expanded {
        left: -18%;
        bottom: -2%;
    }

    .systems-card .skill-asset-expanded {
        right: -18%;
        top: -2%;
    }

    .development-card .skill-asset-expanded {
        left: -18%;
        top: -2%;
    }

    .skill-card.preview .skill-asset-expanded,
    .skill-card.active .skill-asset-expanded {
        opacity: 0.20;
    }
}

@media (max-width: 480px) {
    .skills-stack {
        grid-template-rows: repeat(4, 84px);
        gap: 9px;
    }

    .skills-stack.is-focused {
        grid-template-rows: repeat(4, 102px);
    }

    .skill-card {
        padding: 16px 18px;
    }

    .skill-node-title {
        font-size: 1rem;
    }

    .skill-card.preview,
    .skill-card.active {
        min-height: 435px;
        padding: 22px 18px;
    }

    .skill-card.preview .skill-node-title,
    .skill-card.active .skill-node-title {
        font-size: 1.18rem;
    }

    .skill-node-details {
        top: 70px;
        right: 18px;
        bottom: 18px;
        left: 18px;
    }

    .skill-details-header {
        margin-bottom: 14px;
    }

    .skill-detail-list {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .skill-detail-list > span {
        min-height: 36px;
        padding: 8px 10px;
    }
}

/* ------------------------------------------------------------
   Reduced motion
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .skills-stack,
    .skill-card,
    .skill-node-summary,
    .skill-node-title,
    .skill-node-details,
    .skill-detail-list > span,
    .skill-card .skill-asset {
        transition: none;
    }

    .quality-card.preview,
    .quality-card.active,
    .compliance-card.preview,
    .compliance-card.active,
    .systems-card.preview,
    .systems-card.active,
    .development-card.preview,
    .development-card.active {
        animation: none;
    }
}

/* ============================================================
   EXPERIENCE — HOVER / SELECT EXPANSION STATE
   Added for app.js previewCompanyName / lockedCompanyName logic.

   IMPORTANT:
   This block changes interaction state only.
   Existing Experience artwork, timeline, company-display,
   gradient, desktop, tablet, and mobile positioning are retained.
============================================================ */

/* Preview and locked selections share the established selected
   timeline treatment. */
.career-stop.preview,
.career-stop.active {
    border-color: var(--accent-border);
    background:
        linear-gradient(135deg, var(--accent-soft), transparent 75%),
        var(--surface);
}

.career-stop.preview .career-dot,
.career-stop.active .career-dot {
    background: var(--accent);
    box-shadow:
        0 0 0 6px
        var(--accent-soft);
    transform: scale(1.05);
}

.career-stop.preview strong,
.career-stop.active strong,
.career-stop.preview .career-action,
.career-stop.active .career-action {
    color: var(--accent);
}

/* The shared company display is the expanding content surface.
   app.js applies has-selection for both preview and locked states. */
.company-display.has-selection {
    display: block;
}

/* Preview remains temporary; locked state remains persistent.
   These state hooks intentionally do not alter geometry. */
.company-display.is-preview,
.company-display.is-locked {
    border-color: var(--border);
}

/* Desktop pointer feedback. Once a company is locked, app.js
   suppresses preview changes, so the active company remains open. */
@media (hover: hover) and (pointer: fine) {

    .career-stop.preview {
        transform: translateY(-2px);
    }

    .career-stop.preview .career-action {
        transform: translateX(3px);
    }

}

/* Mobile remains click-driven. Preserve the existing mobile card
   geometry and selected treatment without hover translation. */
@media (max-width: 700px) {

    .career-stop.preview,
    .career-stop.active {
        transform: none;
        border-color: var(--accent-border);
        background:
            linear-gradient(135deg, var(--accent-soft), transparent 80%),
            var(--surface);
    }

    .career-stop.preview .career-dot,
    .career-stop.active .career-dot {
        box-shadow:
            0 0 0 5px
            var(--accent-soft);
    }

}

/* Respect the portfolio's existing reduced-motion behavior. */
@media (prefers-reduced-motion: reduce) {

    .career-stop.preview,
    .career-stop.active,
    .company-display.is-preview,
    .company-display.is-locked {
        transition: none;
    }

}

/* ============================================================
   EXPERIENCE — TRUE EXPANDING TIMELINE CARD V5

   DEFAULT:
   Three independent timeline cards.

   HOVER:
   Highlight only.

   SELECTED:
   .career-path becomes the ONE visible expanded container.
   Selected .career-stop becomes its header.
   .company-display becomes borderless content inside it.

   Result:
   ONE card. Not two attached cards.
============================================================ */


/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 701px) {


    /* --------------------------------------------------------
       NORMAL TIMELINE
    --------------------------------------------------------- */

    .career-stop {
        transition:
            opacity 220ms ease,
            visibility 0s linear 0s,
            color var(--transition),
            transform 520ms cubic-bezier(.22, 1, .36, 1),
            border-color var(--transition),
            background var(--transition),
            box-shadow var(--transition);
    }


    /* ========================================================
       HOVER / FOCUS

       Highlight only.
    ======================================================== */

    .career-stop.preview {
        z-index: 4;

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

        background:
            linear-gradient(
                135deg,
                var(--accent-soft),
                transparent 75%
            ),
            var(--surface);

        box-shadow:
            0 12px 30px
            rgba(0, 0, 0, .10);

        transform:
            translateY(-2px);
    }


    .career-stop.preview .career-dot {
        background:
            var(--accent);

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


    .career-stop.preview strong,
    .career-stop.preview .career-action {
        color:
            var(--accent);
    }


    .career-stop.preview .career-action {
        transform:
            translateX(3px);
    }


    /* ========================================================
       EXPANDED SYSTEM

       Once a timeline stop is selected, career-path itself
       becomes the single card shell.
    ======================================================== */

    .career-path:has(.career-stop.active) {
        display: grid;

        grid-template-columns:
            1fr;

        gap:
            0;

        padding:
            0;

        border:
            1px solid
            var(--accent-border);

        border-radius:
            var(--radius-md);

        background:
            var(--surface);

        overflow:
            hidden;

        box-shadow:
            0 24px 60px
            rgba(0, 0, 0, .14);

        isolation:
            isolate;
    }


    /* --------------------------------------------------------
       Hide the two unselected companies completely.
    --------------------------------------------------------- */

    .career-path:has(.career-stop.active)
    .career-stop:not(.active) {
        display:
            none;
    }


    /* ========================================================
       SELECTED TIMELINE STOP

       This is now simply the HEADER CONTENT of the expanded
       card. It no longer draws its own box.
    ======================================================== */

    .career-path:has(.career-stop.active)
    .career-stop.active {
        grid-column:
            1;

        grid-row:
            auto;

        width:
            100%;

        min-height:
            196px;

        margin:
            0;

        padding:
            32px 28px 28px;

        transform:
            none;

        border:
            0;

        border-radius:
            0;

        background:
            linear-gradient(
                135deg,
                var(--accent-soft),
                transparent 55%
            );

        box-shadow:
            none;

        position:
            relative;

        z-index:
            3;
    }


    .career-path:has(.career-stop.active)
    .career-stop.active .career-dot {
        background:
            var(--accent);

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


    .career-path:has(.career-stop.active)
    .career-stop.active strong,
    .career-path:has(.career-stop.active)
    .career-stop.active .career-action {
        color:
            var(--accent);
    }


    /* ========================================================
       COMPANY DETAILS

       This is NOT another card anymore.

       It is simply the lower content region of career-path.
    ======================================================== */

    .career-path >
    .company-display.has-selection {
        display:
            block;

        grid-column:
            1;

        grid-row:
            auto;

        width:
            100%;

        min-height:
            0;

        margin:
            0;

        padding:
            0;

        border:
            0;

        border-radius:
            0;

        background:
            transparent;

        box-shadow:
            none;

        overflow:
            visible;

        position:
            relative;

        z-index:
            2;

        animation:
            experienceContentReveal
            440ms
            cubic-bezier(.22, 1, .36, 1);
    }


    /* --------------------------------------------------------
       Single internal divider.

       This is content separation — NOT another box.
    --------------------------------------------------------- */

    .career-path >
    .company-display.has-selection::before {
        content:
            "";

        position:
            absolute;

        top:
            0;

        left:
            0;

        right:
            0;

        height:
            1px;

        background:
            var(--border);

        z-index:
            4;

        pointer-events:
            none;
    }


    /* --------------------------------------------------------
       Keep the existing lower-right atmospheric gradient.

       Because company-display itself is transparent, this
       visually belongs to the same expanded card.
    --------------------------------------------------------- */

    .career-path >
    .company-display.has-selection::after {
        border-radius:
            0;

        pointer-events:
            none;
    }


    /* ========================================================
       REMOVE SECOND-CARD APPEARANCE FROM COMPANY PANEL
    ======================================================== */

    .career-path >
    .company-display.has-selection
    .company-panel {
        border:
            0;

        border-radius:
            0;

        background:
            transparent;

        box-shadow:
            none;
    }


    /* ========================================================
       REVEAL
    ======================================================== */

    @keyframes experienceContentReveal {

        from {
            opacity:
                0;

            transform:
                translateY(-8px);
        }

        to {
            opacity:
                1;

            transform:
                translateY(0);
        }

    }

}

/* ============================================================
   EXPERIENCE — ACTIVE HEADER CLEANUP

   Collapsed:
   Timeline card contains year, company, progression and CTA.

   Expanded:
   Those summary elements disappear completely.
   The existing company header becomes the primary content.

   The timeline system artwork / active node remains visible
   across the top of the expanded card.
============================================================ */

@media (min-width: 701px) {

    /* --------------------------------------------------------
       Hide ALL collapsed timeline copy once selected
    --------------------------------------------------------- */

    .career-path:has(.career-stop.active)
    .career-stop.active > *:not(.career-dot) {
        display: none;
    }


    /* --------------------------------------------------------
       Collapse the former timeline card into a narrow
       technical-system header.

       This keeps the node + background artwork without
       wasting vertical space on duplicate information.
    --------------------------------------------------------- */

    .career-path:has(.career-stop.active)
    .career-stop.active {
        min-height: 32px;

        height: 32px;

        padding: 0;

        background:
            transparent;

        overflow:
            visible;
    }


    /* --------------------------------------------------------
       Keep active node visually anchored
    --------------------------------------------------------- */

    .career-path:has(.career-stop.active)
    .career-stop.active .career-dot {
        display: block;

        background:
            var(--accent);

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


    /* --------------------------------------------------------
       Company header now begins the actual content immediately
       below the technical timeline strip
    --------------------------------------------------------- */

    .career-path >
    .company-display.has-selection
    .company-header {
        padding-top:
            42px;
    }

}

/* ============================================================
   EXPERIENCE — HOVER CTA

   Default:
   View Experience is hidden.

   Hover / keyboard preview:
   CTA fades and slides into view.

   Active:
   CTA remains hidden because the card has already expanded.
============================================================ */

@media (min-width: 701px) {

    .career-stop .career-action {
        opacity: 0;

        visibility: hidden;

        transform:
            translateY(4px);

        transition:
            opacity 220ms ease,
            transform 280ms cubic-bezier(.22, 1, .36, 1),
            color var(--transition),
            visibility 0s linear 220ms;
    }


    .career-stop:hover .career-action,
    .career-stop:focus-visible .career-action,
    .career-stop.preview .career-action {
        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

        transition:
            opacity 220ms ease,
            transform 280ms cubic-bezier(.22, 1, .36, 1),
            color var(--transition),
            visibility 0s;
    }


    .career-stop.active .career-action {
        display: none;
    }

}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {


    .career-stop.preview,
    .career-stop.active {
        transform:
            none;
    }


    /*
     * Mobile retains all timeline entries.
     */

    .career-path:has(.career-stop.active)
    .career-stop:not(.active) {
        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        transform:
            none;
    }


    /*
     * Selected timeline stop + details should still visually
     * behave as one card.
     */

    .career-stop.active {
        border-bottom-left-radius:
            0;

        border-bottom-right-radius:
            0;

        border-bottom-color:
            transparent;
    }


    .career-path >
    .company-display.has-selection {
        width:
            100%;

        margin-top:
            -1px;

        border-top:
            0;

        border-top-left-radius:
            0;

        border-top-right-radius:
            0;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .career-stop,
    .company-display {
        transition:
            none !important;

        animation:
            none !important;
    }

}

/* ============================================================
   V2.5 — SELECTED WORK / DEALER DECK
   Scoped to independent work; professional carousel unchanged.
============================================================ */
#independentDeck { width:100%; }
.dealer-deck-topline {display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:16px;color:var(--muted);font:0.72rem/1.5 Consolas,monospace;letter-spacing:.09em;text-transform:uppercase;}
.dealer-cards {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:18px;align-items:stretch;transition:grid-template-columns .45s ease;}
.dealer-card {position:relative;min-width:0;min-height:415px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);transition:border-color .3s,box-shadow .3s,transform .45s,opacity .3s;}
.dealer-card.is-face-up {border-color:var(--accent-border);box-shadow:var(--shadow);}
.dealer-card.is-face-down {cursor:pointer;}
.dealer-card.is-face-down:hover {border-color:var(--accent);transform:translateY(-5px);}
.dealer-card:focus-within {outline:2px solid var(--accent);outline-offset:3px;}
.dealer-card-front,.dealer-card-back {box-sizing:border-box;width:100%;height:100%;}
.dealer-card-front {padding:30px;display:flex;flex-direction:column;align-items:flex-start;}
.dealer-card-back {display:none;padding:30px;flex-direction:column;align-items:center;justify-content:space-between;gap:24px;text-align:center;background:radial-gradient(ellipse at 50% 15%,var(--accent-soft),transparent 60%),var(--surface);}
.dealer-card.is-face-down .dealer-card-front {display:none;}
.dealer-card.is-face-down .dealer-card-back {display:flex;}
.dealer-card-back::before {content:"";position:absolute;inset:12px;border:1px solid var(--accent-border);border-radius:calc(var(--radius-md) - 6px);pointer-events:none;}
.dealer-card-back img {max-width:78%;max-height:170px;object-fit:contain;margin:auto 0;}
.dealer-card-back h3 {font-size:clamp(1.25rem,2.5vw,1.9rem);letter-spacing:-.04em;margin:0 0 8px;}
.dealer-card-back span {color:var(--text-soft);font-size:.84rem;}
.dealer-back-emblem,.dealer-horizonte-mark {font-family:Georgia,serif;font-size:clamp(5rem,12vw,9rem);line-height:1;color:var(--accent);font-weight:400;}
.dealer-back-emblem {margin:auto 0;}
.dealer-back-emblem span,.dealer-horizonte-mark span {font-size:.35em;vertical-align:middle;}
.dealer-card-meta {width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;font:0.7rem Consolas,monospace;letter-spacing:.06em;color:var(--muted);}
.dealer-card-mark {height:100px;max-width:155px;object-fit:contain;object-position:left center;margin:24px 0 14px;}
.dealer-horizonte-mark {height:100px;margin:22px 0 16px;font-size:6rem;}
.dealer-card-type {font-size:.78rem;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;}
.dealer-card-front h3 {font-size:clamp(2rem,3.4vw,3.25rem);letter-spacing:-.055em;line-height:1.08;margin:0;}
.dealer-card-description {max-width:590px;color:var(--text-soft);line-height:1.7;margin:16px 0 26px;}
.dealer-expand {margin-top:auto;display:inline-flex;align-items:center;gap:22px;padding:12px 0;background:none;border:0;border-bottom:1px solid var(--accent);color:var(--text);font:inherit;font-weight:600;cursor:pointer;}
.dealer-expand:hover {color:var(--accent);}
.dealer-expanded-content {width:100%;margin-top:28px;border-top:1px solid var(--border);padding-top:28px;}
.dealer-expanded-content[hidden] {display:none!important;}
.dealer-case-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-bottom:30px;}
.dealer-case-grid p {color:var(--text-soft);line-height:1.7;}
.dealer-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0;}
.dealer-gallery figure {min-width:0;margin:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg);}
.dealer-gallery img {display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;}
.dealer-gallery figcaption {padding:9px 12px;color:var(--text-soft);font-size:.76rem;}
.dealer-case-footer {display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:22px;}
.dealer-deck-instruction {font-size:.79rem;color:var(--muted);margin:14px 0 0;}
.dealer-deck.is-expanded .dealer-cards {grid-template-columns:minmax(0,1fr);}
.dealer-deck.is-expanded .dealer-card.is-face-down {display:none;}
.dealer-deck.is-expanded .dealer-card.is-face-up {min-height:0;}
.dealer-card.is-dealing {animation:dealerReveal .38s ease both;}
@keyframes dealerReveal {from{opacity:.55;transform:translateY(12px) rotateY(-8deg)}to{opacity:1;transform:translateY(0) rotateY(0)}}
@media(max-width:700px) {
 .dealer-deck-topline {align-items:flex-start;flex-direction:column;gap:5px;}
 .dealer-cards {grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:10px;}
 .dealer-card {min-height:360px;}
 .dealer-card-front {padding:20px;}
 .dealer-card-back {padding:18px 10px;}
 .dealer-card-back::before {inset:7px;}
 .dealer-card-back img {max-width:95%;}
 .dealer-card-back h3 {font-size:1rem;overflow-wrap:anywhere;}
 .dealer-card-back span {font-size:.7rem;}
 .dealer-card-meta {flex-wrap:wrap;font-size:.61rem;}
 .dealer-card-mark {height:75px;margin:22px 0 10px;}
 .dealer-card-front h3 {font-size:clamp(1.45rem,6vw,2.1rem);}
 .dealer-card-description {font-size:.85rem;line-height:1.55;}
 .dealer-case-grid {grid-template-columns:1fr;gap:12px;}
 .dealer-gallery {grid-template-columns:repeat(2,minmax(0,1fr));}
 .dealer-back-emblem {font-size:5rem;}
}
@media(max-width:420px) {.dealer-cards {grid-template-columns:minmax(0,1fr) minmax(0,.62fr);} .dealer-card-front{padding:16px;} .dealer-card-back{padding:14px 8px;} .dealer-card-meta{font-size:.57rem;} .dealer-card-description{font-size:.8rem;} }
@media(prefers-reduced-motion:reduce) {.dealer-card,.dealer-cards{transition:none!important;} .dealer-card.is-dealing{animation:none!important;}}

/* Theme-aware Keizoku artwork */
.dealer-logo-light {display:none!important;}
:root[data-theme="light"] .dealer-logo-light {display:block!important;}
:root[data-theme="light"] .dealer-logo-dark {display:none!important;}
@media (prefers-color-scheme:light) {
 :root[data-theme="system"] .dealer-logo-light {display:block!important;}
 :root[data-theme="system"] .dealer-logo-dark {display:none!important;}
}

/* ============================================================
   V2.5.1 — OVERLAPPING DEALER DECK
   Equal-size cards, stacked depth, arrow navigation.
============================================================ */
.dealer-deck {max-width:100%;}
.dealer-deck-topline {display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:20px;}
.dealer-navigation {display:flex;gap:10px;align-items:center;}
.dealer-nav-button {width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);font:inherit;font-size:1.2rem;cursor:pointer;transition:border-color .2s,background .2s,transform .2s;}
.dealer-nav-button:hover {border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px);}
.dealer-nav-button:focus-visible {outline:2px solid var(--accent);outline-offset:3px;}
.dealer-cards {position:relative;display:block;width:min(100%,1050px);height:540px;margin:0 auto 0 0;isolation:isolate;overflow:visible;}
.dealer-card {position:absolute;inset:auto;top:0;left:0;box-sizing:border-box;width:76%;height:490px;min-height:0;overflow:hidden;transform-origin:center center;transition:transform .48s cubic-bezier(.2,.75,.2,1),opacity .35s,border-color .25s,box-shadow .3s;}
.dealer-card.is-face-up {z-index:3;transform:translate(0,0) rotate(-1.1deg);}
.dealer-card.is-face-down {z-index:1;transform:translate(29%,31px) rotate(5deg);box-shadow:0 18px 36px rgba(0,0,0,.15);cursor:pointer;}
.dealer-card.is-face-down:hover {transform:translate(31%,24px) rotate(6deg);}
.dealer-card-front {padding:36px 40px;}
.dealer-card-back {padding:32px;}
.dealer-card.is-face-down .dealer-card-back {pointer-events:none;}
.dealer-card-back img {max-height:150px;}
.dealer-card-front h3 {font-size:clamp(2rem,3.4vw,3.25rem);}
.dealer-deck.is-expanded .dealer-cards {width:100%;height:auto;min-height:490px;}
.dealer-deck.is-expanded .dealer-card.is-face-up {position:relative;width:100%;height:auto;min-height:490px;transform:none;overflow:visible;}
.dealer-deck.is-expanded .dealer-card.is-face-down {display:none;}
.dealer-deck.is-expanded .dealer-navigation {opacity:.35;pointer-events:none;}
.dealer-deck.is-expanded .dealer-card-front {height:auto;min-height:490px;}
.dealer-deck.is-expanded .dealer-expand {margin-top:24px;}
@media(max-width:700px) {
 .dealer-deck-topline {flex-direction:row;align-items:center;gap:10px;}
 .dealer-navigation {gap:6px;flex-shrink:0;}
 .dealer-nav-button {width:38px;height:38px;}
 .dealer-cards {height:490px;width:100%;}
 .dealer-card {width:86%;height:445px;min-height:0;}
 .dealer-card.is-face-up {transform:translate(0,0) rotate(-1deg);}
 .dealer-card.is-face-down {transform:translate(13%,22px) rotate(4deg);}
 .dealer-card.is-face-down:hover {transform:translate(14%,18px) rotate(5deg);}
 .dealer-card-front {padding:24px;}
 .dealer-card-back {padding:20px;}
 .dealer-card-front h3 {font-size:clamp(1.65rem,6vw,2.4rem);}
 .dealer-card-description {font-size:.88rem;line-height:1.55;}
 .dealer-card-mark {height:76px;margin:18px 0 10px;}
 .dealer-deck.is-expanded .dealer-cards {height:auto;}
 .dealer-deck.is-expanded .dealer-card.is-face-up {width:100%;min-height:445px;}
 .dealer-deck.is-expanded .dealer-card-front {min-height:445px;}
}
@media(max-width:420px) {
 .dealer-cards {height:475px;}
 .dealer-card {height:430px;}
 .dealer-card-front {padding:19px;}
 .dealer-card-meta {font-size:.58rem;}
 .dealer-card-description {margin:12px 0 18px;}
 .dealer-back-emblem {font-size:4.2rem;}
}
@media(prefers-reduced-motion:reduce) {.dealer-card,.dealer-nav-button {transition:none!important;}}

/* ============================================================
   V2.5.2 — REAR CARD IDENTITY / FIXED DECK GEOMETRY
   Overrides previous dealing keyframes and hover transforms.
============================================================ */
#independentDeck .dealer-cards { width:min(100%,1150px); height:555px; overflow:visible; }
#independentDeck .dealer-card { width:76%; height:490px; top:0; left:0; animation:none!important; transform-origin:center center; }
#independentDeck .dealer-card.is-face-up,
#independentDeck .dealer-card.is-face-up.is-dealing { z-index:3; opacity:1; transform:translate3d(0,0,0) rotate(-.6deg); }
#independentDeck .dealer-card.is-face-down,
#independentDeck .dealer-card.is-face-down.is-dealing,
#independentDeck .dealer-card.is-face-down:hover { z-index:1; opacity:1; transform:translate3d(24%,24px,0) rotate(4deg); }
#independentDeck .dealer-card.is-face-down::after {
 content:attr(data-next-label); position:absolute; right:19px; top:30px;
 font:600 11px/1.3 Consolas,monospace; letter-spacing:.1em;
 color:var(--accent); pointer-events:none; z-index:2;
}
#independentDeck .dealer-card.is-face-down .dealer-card-back {
 position:relative; justify-content:flex-start; align-items:flex-end; padding:68px 18px 18px;
}
#independentDeck .dealer-card.is-face-down .dealer-card-back::before {inset:10px;}
#independentDeck .dealer-card.is-face-down .dealer-card-back img,
#independentDeck .dealer-card.is-face-down .dealer-back-emblem {
 position:absolute; top:95px; right:12px; width:20%; max-height:75px;
 margin:0; object-fit:contain; object-position:center; font-size:3.4rem;
}
#independentDeck .dealer-card.is-face-down .dealer-card-back > div:last-child {
 position:absolute; right:12px; top:187px; width:19%; text-align:center;
 overflow-wrap:anywhere;
}
#independentDeck .dealer-card.is-face-down .dealer-card-back h3 {font-size:.8rem;line-height:1.25;margin:0 0 5px;letter-spacing:0;}
#independentDeck .dealer-card.is-face-down .dealer-card-back span {font-size:.67rem;line-height:1.25;}
#independentDeck .dealer-card.is-face-down .dealer-card-back .dealer-back-emblem span {font-size:.35em;}
#independentDeck.is-expanded .dealer-cards {width:100%;height:auto;min-height:490px;}
#independentDeck.is-expanded .dealer-card.is-face-up {position:relative;width:100%;height:auto;min-height:490px;transform:none;}
#independentDeck.is-expanded .dealer-card.is-face-down {display:none;}
@media(max-width:700px) {
 #independentDeck .dealer-cards {height:495px;}
 #independentDeck .dealer-card {width:86%;height:445px;}
 #independentDeck .dealer-card.is-face-down,
 #independentDeck .dealer-card.is-face-down:hover {transform:translate3d(13%,19px,0) rotate(3deg);}
 #independentDeck .dealer-card.is-face-down::after {right:10px;top:18px;font-size:8px;}
 #independentDeck .dealer-card.is-face-down .dealer-card-back img,
 #independentDeck .dealer-card.is-face-down .dealer-back-emblem {right:6px;top:65px;width:12%;max-height:46px;font-size:2.1rem;}
 #independentDeck .dealer-card.is-face-down .dealer-card-back > div:last-child {right:5px;top:120px;width:13%;}
 #independentDeck .dealer-card.is-face-down .dealer-card-back h3 {font-size:.57rem;}
 #independentDeck .dealer-card.is-face-down .dealer-card-back span {display:none;}
 #independentDeck.is-expanded .dealer-card.is-face-up {width:100%;height:auto;}
}
@media(max-width:420px) {
 #independentDeck .dealer-cards {height:475px;}
 #independentDeck .dealer-card {height:430px;}
 #independentDeck .dealer-card.is-face-down::after {font-size:7px;right:6px;}
}
@media(prefers-reduced-motion:reduce) {#independentDeck .dealer-card {transition:none!important;}}

/* V2.5.3 — restrained stacked-card silhouette and narrow branded teaser */
#independentDeck .dealer-cards {width:min(100%,1080px);height:520px;}
#independentDeck .dealer-card {width:82%;height:470px;}
#independentDeck .dealer-card.is-face-up,
#independentDeck .dealer-card.is-face-up.is-dealing {transform:translate3d(0,0,0) rotate(-.35deg);}
#independentDeck .dealer-card.is-face-down,
#independentDeck .dealer-card.is-face-down.is-dealing,
#independentDeck .dealer-card.is-face-down:hover {transform:translate3d(8%,15px,0) rotate(2.7deg);}
#independentDeck .dealer-card.is-face-down::after {content:'NEXT';right:9px;top:24px;font-size:9px;letter-spacing:.06em;}
#independentDeck .dealer-card.is-face-down .dealer-card-back img,
#independentDeck .dealer-card.is-face-down .dealer-back-emblem {top:82px;right:4px;width:7%;max-height:55px;font-size:2.25rem;}
#independentDeck .dealer-card.is-face-down .dealer-card-back > div:last-child {display:none;}
#independentDeck.is-expanded .dealer-cards {width:100%;height:auto;}
#independentDeck.is-expanded .dealer-card.is-face-up {width:100%;height:auto;transform:none;}
@media(max-width:700px) {
 #independentDeck .dealer-cards {height:465px;}
 #independentDeck .dealer-card {width:88%;height:430px;}
 #independentDeck .dealer-card.is-face-down,
 #independentDeck .dealer-card.is-face-down.is-dealing,
 #independentDeck .dealer-card.is-face-down:hover {transform:translate3d(7%,12px,0) rotate(2deg);}
 #independentDeck .dealer-card.is-face-down::after {right:4px;top:17px;font-size:7px;}
 #independentDeck .dealer-card.is-face-down .dealer-card-back img,
 #independentDeck .dealer-card.is-face-down .dealer-back-emblem {right:1px;top:64px;width:5%;max-height:32px;font-size:1.5rem;}
 #independentDeck.is-expanded .dealer-card.is-face-up {width:100%;height:auto;}
}
@media(max-width:420px) {
 #independentDeck .dealer-cards {height:455px;}
 #independentDeck .dealer-card {height:420px;}
}

/* ============================================================
   V2.5.4 — HALF-SIZE FAN DECK
   Two fixed positions; expanded case study remains full-width.
============================================================ */
#independentDeck .dealer-cards {
    width: min(100%, 900px);
    height: 515px;
    margin: 0 auto;
    overflow: visible;
}
#independentDeck .dealer-card {
    width: min(68%, 590px);
    height: 410px;
    min-height: 0;
    transform-origin: 48% 92%;
}
#independentDeck .dealer-card.is-face-up,
#independentDeck .dealer-card.is-face-up.is-dealing {
    transform: translate3d(0, 0, 0) rotate(-5deg);
}
#independentDeck .dealer-card.is-face-down,
#independentDeck .dealer-card.is-face-down.is-dealing,
#independentDeck .dealer-card.is-face-down:hover {
    transform: translate3d(39%, 20px, 0) rotate(11deg);
}
#independentDeck .dealer-card-front {padding: 25px 29px;}
#independentDeck .dealer-card-mark {height: 69px; max-width: 118px; margin: 15px 0 10px;}
#independentDeck .dealer-horizonte-mark {height: 69px; font-size: 4.6rem; margin: 15px 0 10px;}
#independentDeck .dealer-card-front h3 {font-size: clamp(1.7rem, 2.6vw, 2.55rem);}
#independentDeck .dealer-card-description {font-size: .89rem; line-height: 1.55; margin: 12px 0 14px;}
#independentDeck .dealer-card.is-face-down::after {right: 16px; top: 19px; font-size: 10px;}
#independentDeck .dealer-card.is-face-down .dealer-card-back img,
#independentDeck .dealer-card.is-face-down .dealer-back-emblem {
    right: 10px; top: 80px; width: 19%; max-height: 90px; font-size: 4rem;
}
#independentDeck.is-expanded .dealer-cards {width: 100%; height: auto; min-height: 0;}
#independentDeck.is-expanded .dealer-card.is-face-up,
#independentDeck.is-expanded .dealer-card.is-face-up.is-dealing {
    width: 100%; height: auto; min-height: 490px; transform: none;
}
#independentDeck.is-expanded .dealer-card-front {padding: 36px 40px;}
#independentDeck.is-expanded .dealer-card-mark {height: 100px; max-width: 155px;}
#independentDeck.is-expanded .dealer-horizonte-mark {height: 100px; font-size: 6rem;}
#independentDeck.is-expanded .dealer-card-front h3 {font-size: clamp(2rem, 3.4vw, 3.25rem);}
@media (max-width: 700px) {
    #independentDeck .dealer-cards {width: 100%; height: 420px;}
    #independentDeck .dealer-card {width: 76%; height: 340px; transform-origin: 48% 90%;}
    #independentDeck .dealer-card.is-face-up,
    #independentDeck .dealer-card.is-face-up.is-dealing {transform: translate3d(0,0,0) rotate(-4deg);}
    #independentDeck .dealer-card.is-face-down,
    #independentDeck .dealer-card.is-face-down.is-dealing,
    #independentDeck .dealer-card.is-face-down:hover {transform: translate3d(30%,17px,0) rotate(10deg);}
    #independentDeck .dealer-card-front {padding: 17px 18px;}
    #independentDeck .dealer-card-mark {height: 48px; margin: 10px 0 8px;}
    #independentDeck .dealer-horizonte-mark {height: 48px; font-size: 3.4rem; margin: 10px 0 8px;}
    #independentDeck .dealer-card-front h3 {font-size: clamp(1.3rem,5vw,1.9rem);}
    #independentDeck .dealer-card-description {font-size: .76rem; line-height: 1.42; margin: 9px 0;}
    #independentDeck .dealer-card-meta {font-size: .54rem;}
    #independentDeck .dealer-card.is-face-down::after {right: 8px; top: 15px; font-size: 8px;}
    #independentDeck .dealer-card.is-face-down .dealer-card-back img,
    #independentDeck .dealer-card.is-face-down .dealer-back-emblem {right: 5px; top: 62px; width: 20%; font-size: 2.8rem;}
    #independentDeck.is-expanded .dealer-card.is-face-up {width: 100%; height: auto; min-height: 445px; transform: none;}
    #independentDeck.is-expanded .dealer-card-front {padding: 24px;}
}
@media (max-width: 420px) {
    #independentDeck .dealer-cards {height: 385px;}
    #independentDeck .dealer-card {height: 315px;}
    #independentDeck .dealer-card-front {padding: 14px;}
    #independentDeck .dealer-card-front h3 {font-size: 1.28rem;}
    #independentDeck .dealer-card-description {font-size: .7rem;}
    #independentDeck .dealer-expand {padding: 6px 0; font-size: .85rem;}
}


/* ============================================================
   V2.5.5 — REAR BRANDING + EXPANSION REFINEMENT
   Preserve V2.5.4 fan dimensions, angles and offsets.
============================================================ */
#independentDeck .dealer-card.is-face-down .dealer-card-back {
    position:relative;
    padding:0;
    background:radial-gradient(ellipse at 85% 36%,var(--accent-soft),transparent 62%),var(--surface);
}
/* The readable preview lives entirely in the exposed right-hand wing. */
#independentDeck .dealer-card.is-face-down .dealer-card-back img,
#independentDeck .dealer-card.is-face-down .dealer-back-emblem {
    position:absolute;
    top:38%;
    right:3%;
    width:23%;
    height:95px;
    max-height:95px;
    margin:0;
    object-fit:contain;
    object-position:center;
    font-size:4.5rem;
    transform:translateY(-50%);
}
#independentDeck .dealer-card.is-face-down .dealer-card-back > div:last-child {
    display:block;
    position:absolute;
    right:2%;
    top:55%;
    width:25%;
    text-align:center;
    transform:none;
}
#independentDeck .dealer-card.is-face-down .dealer-card-back h3 {
    margin:0;
    font-size:.79rem;
    line-height:1.3;
    letter-spacing:-.01em;
    color:var(--text);
}
#independentDeck .dealer-card.is-face-down .dealer-card-back > div:last-child span {display:none;}
#independentDeck .dealer-card.is-face-down::after {
    top:19%;
    right:5%;
    font-size:.65rem;
    letter-spacing:.12em;
}
/* Native view transitions interpolate the actual card's size and position. */
#independentDeck .dealer-card.is-face-up {view-transition-name:independent-project-card;}
::view-transition-old(independent-project-card),
::view-transition-new(independent-project-card) {
    animation-duration:.55s;
    animation-timing-function:cubic-bezier(.22,.75,.22,1);
}
#independentDeck.is-expanded .dealer-expanded-content {
    animation:dealer-details-enter .48s .12s both;
}
@keyframes dealer-details-enter {
    from {opacity:0;transform:translateY(12px);}
    to {opacity:1;transform:translateY(0);}
}
#independentDeck.is-expanded .dealer-card.is-face-up {
    transform:none;
    box-shadow:var(--shadow);
}
@media(max-width:700px) {
    #independentDeck .dealer-card.is-face-down .dealer-card-back img,
    #independentDeck .dealer-card.is-face-down .dealer-back-emblem {
        right:2%;top:39%;width:21%;height:62px;max-height:62px;font-size:2.6rem;
    }
    #independentDeck .dealer-card.is-face-down .dealer-card-back > div:last-child {right:1%;top:56%;width:23%;}
    #independentDeck .dealer-card.is-face-down .dealer-card-back h3 {font-size:.55rem;}
    #independentDeck .dealer-card.is-face-down::after {right:3%;top:18%;font-size:.5rem;}
}
@media(prefers-reduced-motion:reduce) {
    ::view-transition-old(independent-project-card),::view-transition-new(independent-project-card) {animation-duration:0s!important;}
    #independentDeck.is-expanded .dealer-expanded-content {animation:none!important;}
}


/* ============================================================
   V2.5.6 — ORNAMENTAL PLAYING-CARD BACKS
   Keep V2.5.4 fan geometry unchanged.
============================================================ */
#independentDeck .dealer-card.is-face-down::after { content:none; }
#independentDeck .dealer-card.is-face-down .dealer-card-back {
    display:block;position:relative;overflow:hidden;padding:0;
    background:
      repeating-linear-gradient(45deg,transparent 0 19px,rgba(168,50,67,.045) 19px 20px),
      repeating-linear-gradient(-45deg,transparent 0 19px,rgba(168,50,67,.045) 19px 20px),
      radial-gradient(ellipse at 78% 45%,var(--accent-soft),transparent 67%),var(--surface);
}
#independentDeck .dealer-card.is-face-down .dealer-card-back::before {
    content:"";position:absolute;inset:11px;border:1px solid var(--accent-border);
    border-radius:9px;pointer-events:none;
}
#independentDeck .dealer-card.is-face-down .dealer-card-back::after {
    content:"";position:absolute;inset:19px;border:1px dashed var(--accent-border);
    border-radius:5px;opacity:.65;pointer-events:none;
}
#independentDeck .dealer-card.is-face-down .dealer-back-seal {
    position:absolute;right:5%;top:44%;transform:translateY(-50%);
    width:24%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--accent);border-radius:50%;
    background:radial-gradient(circle,var(--surface) 42%,var(--accent-soft) 100%);
    box-shadow:0 0 0 7px var(--surface),0 0 0 8px var(--accent-border);
    z-index:2;
}
#independentDeck .dealer-card.is-face-down .dealer-back-seal::before {
    content:"";position:absolute;inset:-24%;border:1px solid var(--accent-border);
    transform:rotate(45deg);pointer-events:none;z-index:-1;
}
#independentDeck .dealer-card.is-face-down .dealer-back-seal img {
    position:static;display:block;width:64%;height:64%;max-width:64%;max-height:64%;
    margin:0;object-fit:contain;transform:none;
}
#independentDeck .dealer-card.is-face-down .dealer-back-seal img.dealer-logo-light {display:none;}
body.light-theme #independentDeck .dealer-card.is-face-down .dealer-back-seal img.dealer-logo-dark {display:none;}
body.light-theme #independentDeck .dealer-card.is-face-down .dealer-back-seal img.dealer-logo-light {display:block;}
#independentDeck .dealer-card.is-face-down .dealer-back-monogram {
    color:var(--accent);font-family:Georgia,serif;font-size:clamp(2rem,4vw,3.6rem);line-height:1;
}
#independentDeck .dealer-card.is-face-down .dealer-back-index {
    position:absolute;right:5%;font:600 12px/1 Consolas,monospace;
    color:var(--accent);letter-spacing:.1em;z-index:2;
}
#independentDeck .dealer-card.is-face-down .dealer-back-index-top {top:8%;}
#independentDeck .dealer-card.is-face-down .dealer-back-index-bottom {bottom:8%;transform:rotate(180deg);}
#independentDeck .dealer-card.is-face-down .dealer-back-accessible-name {
    position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
    margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;border:0!important;
}
@media(max-width:700px) {
  #independentDeck .dealer-card.is-face-down .dealer-back-seal {right:4%;width:26%;}
  #independentDeck .dealer-card.is-face-down .dealer-back-index {font-size:9px;}
  #independentDeck .dealer-card.is-face-down .dealer-back-monogram {font-size:2rem;}
}

/* V2.5.7 — Center emblem in exposed fan; retain V2.5.4 card geometry */
#independentDeck .dealer-card.is-face-down .dealer-back-seal {
  right:10%; top:50%; width:26%; transform:translateY(-50%);
}
#independentDeck .dealer-card.is-face-down .dealer-back-seal img {
  width:84%;height:84%;max-width:84%;max-height:84%;
}
#independentDeck .dealer-card.is-face-down .dealer-back-monogram {
  font-size:clamp(2.8rem,5.2vw,4.6rem);
}
@media(max-width:700px){
 #independentDeck .dealer-card.is-face-down .dealer-back-seal {right:9%;top:50%;width:29%;}
 #independentDeck .dealer-card.is-face-down .dealer-back-monogram {font-size:2.8rem;}
}

/* V2.5.8 — Full-card-centered ornamental seal */
#independentDeck .dealer-card.is-face-down .dealer-back-seal {
  left:50%;right:auto;top:50%;
  transform:translate(-50%,-50%);
  width:48%;max-width:300px;
  aspect-ratio:1;
}
#independentDeck .dealer-card.is-face-down .dealer-back-seal img {
  width:82%;height:82%;max-width:82%;max-height:82%;
  object-fit:contain;
}
#independentDeck .dealer-card.is-face-down .dealer-back-monogram {
  font-size:clamp(4.5rem,9vw,7.5rem);
}
@media(max-width:700px) {
  #independentDeck .dealer-card.is-face-down .dealer-back-seal {
    left:50%;right:auto;top:50%;width:48%;
    transform:translate(-50%,-50%);
  }
  #independentDeck .dealer-card.is-face-down .dealer-back-monogram {
    font-size:clamp(2rem,8vw,4rem);
  }
}

/* ============================================================
   V2.6 — PORTRAIT FRONT / LANDSCAPE BACK
   Override legacy deck dimensions; case study stays full-width.
============================================================ */
#independentDeck .dealer-cards {
  width:min(100%,1050px); height:665px; margin:0 auto;
  position:relative; overflow:visible;
}
#independentDeck .dealer-card {top:48px;left:12%;min-height:0;transition:transform .55s cubic-bezier(.2,.75,.2,1),opacity .3s,box-shadow .3s;}
#independentDeck .dealer-card.is-face-up,
#independentDeck .dealer-card.is-face-up.is-dealing {
  width:400px;height:540px;z-index:3;transform-origin:50% 85%;
  transform:translate3d(0,0,0) rotate(-6deg);
}
#independentDeck .dealer-card.is-face-down,
#independentDeck .dealer-card.is-face-down.is-dealing,
#independentDeck .dealer-card.is-face-down:hover {
  width:600px;height:390px;z-index:1;top:115px;left:27%;transform-origin:center;
  transform:translate3d(0,0,0) rotate(13deg);
}
#independentDeck .dealer-card-front {padding:26px 27px;}
#independentDeck .dealer-card-meta {font-size:.62rem;}
#independentDeck .dealer-card-mark {height:75px;max-width:160px;margin:25px 0 16px;}
#independentDeck .dealer-card-mark.dealer-horizonte-logo {width:100%;max-width:300px;height:90px;object-fit:contain;object-position:left center;}
#independentDeck .dealer-card-front h3 {font-size:clamp(1.9rem,2.4vw,2.55rem);overflow-wrap:break-word;}
#independentDeck .dealer-card-description {font-size:.87rem;line-height:1.58;margin:16px 0;}
#independentDeck .dealer-card.is-face-down .dealer-back-seal {
  left:50%;top:50%;right:auto;width:42%;max-width:none;
  transform:translate(-50%,-50%);aspect-ratio:1;
}
#independentDeck .dealer-card.is-face-down .dealer-back-seal img {width:78%;height:78%;max-width:78%;max-height:78%;object-fit:contain;}
#independentDeck .dealer-card.is-face-down .dealer-back-seal img.horizonte-wordmark {width:91%;height:68%;max-width:91%;max-height:68%;}
#independentDeck .dealer-card.is-face-down .dealer-back-index {right:5%;}
#independentDeck.is-expanded .dealer-cards {width:100%;height:auto;min-height:0;}
#independentDeck.is-expanded .dealer-card.is-face-up,
#independentDeck.is-expanded .dealer-card.is-face-up.is-dealing {
  position:relative;top:auto;left:auto;width:100%;height:auto;min-height:490px;transform:none;
}
#independentDeck.is-expanded .dealer-card-front {padding:36px 40px;}
#independentDeck.is-expanded .dealer-card-mark.dealer-horizonte-logo {max-width:380px;height:110px;}
@media(max-width:900px) and (min-width:701px) {
 #independentDeck .dealer-cards {height:620px;}
 #independentDeck .dealer-card.is-face-up,#independentDeck .dealer-card.is-face-up.is-dealing {width:360px;height:510px;}
 #independentDeck .dealer-card.is-face-down,#independentDeck .dealer-card.is-face-down.is-dealing,#independentDeck .dealer-card.is-face-down:hover {width:510px;height:340px;left:25%;}
}
@media(max-width:700px) {
 #independentDeck .dealer-cards {width:100%;height:510px;}
 #independentDeck .dealer-card {top:40px;left:4%;}
 #independentDeck .dealer-card.is-face-up,#independentDeck .dealer-card.is-face-up.is-dealing {width:min(68%,290px);height:420px;transform:rotate(-5deg);}
 #independentDeck .dealer-card.is-face-down,#independentDeck .dealer-card.is-face-down.is-dealing,#independentDeck .dealer-card.is-face-down:hover {width:76%;height:260px;top:105px;left:23%;transform:rotate(12deg);}
 #independentDeck .dealer-card-front {padding:16px;}
 #independentDeck .dealer-card-mark {height:55px;margin:13px 0 9px;}
 #independentDeck .dealer-card-mark.dealer-horizonte-logo {height:58px;max-width:220px;}
 #independentDeck .dealer-card-front h3 {font-size:clamp(1.3rem,4.4vw,1.85rem);}
 #independentDeck .dealer-card-description {font-size:.73rem;line-height:1.42;}
 #independentDeck .dealer-card-meta {font-size:.5rem;}
 #independentDeck .dealer-card.is-face-down .dealer-back-seal {width:43%;}
 #independentDeck.is-expanded .dealer-card.is-face-up,#independentDeck.is-expanded .dealer-card.is-face-up.is-dealing {width:100%;height:auto;min-height:445px;transform:none;}
 #independentDeck.is-expanded .dealer-card-front {padding:24px;}
}
@media(max-width:420px) {
 #independentDeck .dealer-cards {height:465px;}
 #independentDeck .dealer-card.is-face-up,#independentDeck .dealer-card.is-face-up.is-dealing {width:70%;height:390px;}
 #independentDeck .dealer-card.is-face-down,#independentDeck .dealer-card.is-face-down.is-dealing,#independentDeck .dealer-card.is-face-down:hover {width:75%;height:235px;left:24%;}
 #independentDeck .dealer-card-front h3 {font-size:1.25rem;}
 #independentDeck .dealer-card-description {font-size:.69rem;}
}


/* V2.7 — CAREER-BUILT DECK: REUSE APPROVED INDEPENDENT CARD GEOMETRY */
/* ============================================================
   V2.5 — SELECTED WORK / DEALER DECK
   Scoped to independent work; professional carousel unchanged.
============================================================ */
#professionalDeck { width:100%; }
.dealer-deck-topline {display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:16px;color:var(--muted);font:0.72rem/1.5 Consolas,monospace;letter-spacing:.09em;text-transform:uppercase;}
.dealer-cards {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:18px;align-items:stretch;transition:grid-template-columns .45s ease;}
.dealer-card {position:relative;min-width:0;min-height:415px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);transition:border-color .3s,box-shadow .3s,transform .45s,opacity .3s;}
.dealer-card.is-face-up {border-color:var(--accent-border);box-shadow:var(--shadow);}
.dealer-card.is-face-down {cursor:pointer;}
.dealer-card.is-face-down:hover {border-color:var(--accent);transform:translateY(-5px);}
.dealer-card:focus-within {outline:2px solid var(--accent);outline-offset:3px;}
.dealer-card-front,.dealer-card-back {box-sizing:border-box;width:100%;height:100%;}
.dealer-card-front {padding:30px;display:flex;flex-direction:column;align-items:flex-start;}
.dealer-card-back {display:none;padding:30px;flex-direction:column;align-items:center;justify-content:space-between;gap:24px;text-align:center;background:radial-gradient(ellipse at 50% 15%,var(--accent-soft),transparent 60%),var(--surface);}
.dealer-card.is-face-down .dealer-card-front {display:none;}
.dealer-card.is-face-down .dealer-card-back {display:flex;}
.dealer-card-back::before {content:"";position:absolute;inset:12px;border:1px solid var(--accent-border);border-radius:calc(var(--radius-md) - 6px);pointer-events:none;}
.dealer-card-back img {max-width:78%;max-height:170px;object-fit:contain;margin:auto 0;}
.dealer-card-back h3 {font-size:clamp(1.25rem,2.5vw,1.9rem);letter-spacing:-.04em;margin:0 0 8px;}
.dealer-card-back span {color:var(--text-soft);font-size:.84rem;}
.dealer-back-emblem,.dealer-horizonte-mark {font-family:Georgia,serif;font-size:clamp(5rem,12vw,9rem);line-height:1;color:var(--accent);font-weight:400;}
.dealer-back-emblem {margin:auto 0;}
.dealer-back-emblem span,.dealer-horizonte-mark span {font-size:.35em;vertical-align:middle;}
.dealer-card-meta {width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;font:0.7rem Consolas,monospace;letter-spacing:.06em;color:var(--muted);}
.dealer-card-mark {height:100px;max-width:155px;object-fit:contain;object-position:left center;margin:24px 0 14px;}
.dealer-horizonte-mark {height:100px;margin:22px 0 16px;font-size:6rem;}
.dealer-card-type {font-size:.78rem;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;}
.dealer-card-front h3 {font-size:clamp(2rem,3.4vw,3.25rem);letter-spacing:-.055em;line-height:1.08;margin:0;}
.dealer-card-description {max-width:590px;color:var(--text-soft);line-height:1.7;margin:16px 0 26px;}
.dealer-expand {margin-top:auto;display:inline-flex;align-items:center;gap:22px;padding:12px 0;background:none;border:0;border-bottom:1px solid var(--accent);color:var(--text);font:inherit;font-weight:600;cursor:pointer;}
.dealer-expand:hover {color:var(--accent);}
.dealer-expanded-content {width:100%;margin-top:28px;border-top:1px solid var(--border);padding-top:28px;}
.dealer-expanded-content[hidden] {display:none!important;}
.dealer-case-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-bottom:30px;}
.dealer-case-grid p {color:var(--text-soft);line-height:1.7;}
.dealer-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0;}
.dealer-gallery figure {min-width:0;margin:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg);}
.dealer-gallery img {display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;}
.dealer-gallery figcaption {padding:9px 12px;color:var(--text-soft);font-size:.76rem;}
.dealer-case-footer {display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:22px;}
.dealer-deck-instruction {font-size:.79rem;color:var(--muted);margin:14px 0 0;}
.dealer-deck.is-expanded .dealer-cards {grid-template-columns:minmax(0,1fr);}
.dealer-deck.is-expanded .dealer-card.is-face-down {display:none;}
.dealer-deck.is-expanded .dealer-card.is-face-up {min-height:0;}
.dealer-card.is-dealing {animation:dealerReveal .38s ease both;}
@keyframes dealerReveal {from{opacity:.55;transform:translateY(12px) rotateY(-8deg)}to{opacity:1;transform:translateY(0) rotateY(0)}}
@media(max-width:700px) {
 .dealer-deck-topline {align-items:flex-start;flex-direction:column;gap:5px;}
 .dealer-cards {grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:10px;}
 .dealer-card {min-height:360px;}
 .dealer-card-front {padding:20px;}
 .dealer-card-back {padding:18px 10px;}
 .dealer-card-back::before {inset:7px;}
 .dealer-card-back img {max-width:95%;}
 .dealer-card-back h3 {font-size:1rem;overflow-wrap:anywhere;}
 .dealer-card-back span {font-size:.7rem;}
 .dealer-card-meta {flex-wrap:wrap;font-size:.61rem;}
 .dealer-card-mark {height:75px;margin:22px 0 10px;}
 .dealer-card-front h3 {font-size:clamp(1.45rem,6vw,2.1rem);}
 .dealer-card-description {font-size:.85rem;line-height:1.55;}
 .dealer-case-grid {grid-template-columns:1fr;gap:12px;}
 .dealer-gallery {grid-template-columns:repeat(2,minmax(0,1fr));}
 .dealer-back-emblem {font-size:5rem;}
}
@media(max-width:420px) {.dealer-cards {grid-template-columns:minmax(0,1fr) minmax(0,.62fr);} .dealer-card-front{padding:16px;} .dealer-card-back{padding:14px 8px;} .dealer-card-meta{font-size:.57rem;} .dealer-card-description{font-size:.8rem;} }
@media(prefers-reduced-motion:reduce) {.dealer-card,.dealer-cards{transition:none!important;} .dealer-card.is-dealing{animation:none!important;}}

/* Theme-aware Keizoku artwork */
.dealer-logo-light {display:none!important;}
:root[data-theme="light"] .dealer-logo-light {display:block!important;}
:root[data-theme="light"] .dealer-logo-dark {display:none!important;}
@media (prefers-color-scheme:light) {
 :root[data-theme="system"] .dealer-logo-light {display:block!important;}
 :root[data-theme="system"] .dealer-logo-dark {display:none!important;}
}

/* ============================================================
   V2.5.1 — OVERLAPPING DEALER DECK
   Equal-size cards, stacked depth, arrow navigation.
============================================================ */
.dealer-deck {max-width:100%;}
.dealer-deck-topline {display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:20px;}
.dealer-navigation {display:flex;gap:10px;align-items:center;}
.dealer-nav-button {width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);font:inherit;font-size:1.2rem;cursor:pointer;transition:border-color .2s,background .2s,transform .2s;}
.dealer-nav-button:hover {border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px);}
.dealer-nav-button:focus-visible {outline:2px solid var(--accent);outline-offset:3px;}
.dealer-cards {position:relative;display:block;width:min(100%,1050px);height:540px;margin:0 auto 0 0;isolation:isolate;overflow:visible;}
.dealer-card {position:absolute;inset:auto;top:0;left:0;box-sizing:border-box;width:76%;height:490px;min-height:0;overflow:hidden;transform-origin:center center;transition:transform .48s cubic-bezier(.2,.75,.2,1),opacity .35s,border-color .25s,box-shadow .3s;}
.dealer-card.is-face-up {z-index:3;transform:translate(0,0) rotate(-1.1deg);}
.dealer-card.is-face-down {z-index:1;transform:translate(29%,31px) rotate(5deg);box-shadow:0 18px 36px rgba(0,0,0,.15);cursor:pointer;}
.dealer-card.is-face-down:hover {transform:translate(31%,24px) rotate(6deg);}
.dealer-card-front {padding:36px 40px;}
.dealer-card-back {padding:32px;}
.dealer-card.is-face-down .dealer-card-back {pointer-events:none;}
.dealer-card-back img {max-height:150px;}
.dealer-card-front h3 {font-size:clamp(2rem,3.4vw,3.25rem);}
.dealer-deck.is-expanded .dealer-cards {width:100%;height:auto;min-height:490px;}
.dealer-deck.is-expanded .dealer-card.is-face-up {position:relative;width:100%;height:auto;min-height:490px;transform:none;overflow:visible;}
.dealer-deck.is-expanded .dealer-card.is-face-down {display:none;}
.dealer-deck.is-expanded .dealer-navigation {opacity:.35;pointer-events:none;}
.dealer-deck.is-expanded .dealer-card-front {height:auto;min-height:490px;}
.dealer-deck.is-expanded .dealer-expand {margin-top:24px;}
@media(max-width:700px) {
 .dealer-deck-topline {flex-direction:row;align-items:center;gap:10px;}
 .dealer-navigation {gap:6px;flex-shrink:0;}
 .dealer-nav-button {width:38px;height:38px;}
 .dealer-cards {height:490px;width:100%;}
 .dealer-card {width:86%;height:445px;min-height:0;}
 .dealer-card.is-face-up {transform:translate(0,0) rotate(-1deg);}
 .dealer-card.is-face-down {transform:translate(13%,22px) rotate(4deg);}
 .dealer-card.is-face-down:hover {transform:translate(14%,18px) rotate(5deg);}
 .dealer-card-front {padding:24px;}
 .dealer-card-back {padding:20px;}
 .dealer-card-front h3 {font-size:clamp(1.65rem,6vw,2.4rem);}
 .dealer-card-description {font-size:.88rem;line-height:1.55;}
 .dealer-card-mark {height:76px;margin:18px 0 10px;}
 .dealer-deck.is-expanded .dealer-cards {height:auto;}
 .dealer-deck.is-expanded .dealer-card.is-face-up {width:100%;min-height:445px;}
 .dealer-deck.is-expanded .dealer-card-front {min-height:445px;}
}
@media(max-width:420px) {
 .dealer-cards {height:475px;}
 .dealer-card {height:430px;}
 .dealer-card-front {padding:19px;}
 .dealer-card-meta {font-size:.58rem;}
 .dealer-card-description {margin:12px 0 18px;}
 .dealer-back-emblem {font-size:4.2rem;}
}
@media(prefers-reduced-motion:reduce) {.dealer-card,.dealer-nav-button {transition:none!important;}}

/* ============================================================
   V2.5.2 — REAR CARD IDENTITY / FIXED DECK GEOMETRY
   Overrides previous dealing keyframes and hover transforms.
============================================================ */
#professionalDeck .dealer-cards { width:min(100%,1150px); height:555px; overflow:visible; }
#professionalDeck .dealer-card { width:76%; height:490px; top:0; left:0; animation:none!important; transform-origin:center center; }
#professionalDeck .dealer-card.is-face-up,
#professionalDeck .dealer-card.is-face-up.is-dealing { z-index:3; opacity:1; transform:translate3d(0,0,0) rotate(-.6deg); }
#professionalDeck .dealer-card.is-face-down,
#professionalDeck .dealer-card.is-face-down.is-dealing,
#professionalDeck .dealer-card.is-face-down:hover { z-index:1; opacity:1; transform:translate3d(24%,24px,0) rotate(4deg); }
#professionalDeck .dealer-card.is-face-down::after {
 content:attr(data-next-label); position:absolute; right:19px; top:30px;
 font:600 11px/1.3 Consolas,monospace; letter-spacing:.1em;
 color:var(--accent); pointer-events:none; z-index:2;
}
#professionalDeck .dealer-card.is-face-down .dealer-card-back {
 position:relative; justify-content:flex-start; align-items:flex-end; padding:68px 18px 18px;
}
#professionalDeck .dealer-card.is-face-down .dealer-card-back::before {inset:10px;}
#professionalDeck .dealer-card.is-face-down .dealer-card-back img,
#professionalDeck .dealer-card.is-face-down .dealer-back-emblem {
 position:absolute; top:95px; right:12px; width:20%; max-height:75px;
 margin:0; object-fit:contain; object-position:center; font-size:3.4rem;
}
#professionalDeck .dealer-card.is-face-down .dealer-card-back > div:last-child {
 position:absolute; right:12px; top:187px; width:19%; text-align:center;
 overflow-wrap:anywhere;
}
#professionalDeck .dealer-card.is-face-down .dealer-card-back h3 {font-size:.8rem;line-height:1.25;margin:0 0 5px;letter-spacing:0;}
#professionalDeck .dealer-card.is-face-down .dealer-card-back span {font-size:.67rem;line-height:1.25;}
#professionalDeck .dealer-card.is-face-down .dealer-card-back .dealer-back-emblem span {font-size:.35em;}
#professionalDeck.is-expanded .dealer-cards {width:100%;height:auto;min-height:490px;}
#professionalDeck.is-expanded .dealer-card.is-face-up {position:relative;width:100%;height:auto;min-height:490px;transform:none;}
#professionalDeck.is-expanded .dealer-card.is-face-down {display:none;}
@media(max-width:700px) {
 #professionalDeck .dealer-cards {height:495px;}
 #professionalDeck .dealer-card {width:86%;height:445px;}
 #professionalDeck .dealer-card.is-face-down,
 #professionalDeck .dealer-card.is-face-down:hover {transform:translate3d(13%,19px,0) rotate(3deg);}
 #professionalDeck .dealer-card.is-face-down::after {right:10px;top:18px;font-size:8px;}
 #professionalDeck .dealer-card.is-face-down .dealer-card-back img,
 #professionalDeck .dealer-card.is-face-down .dealer-back-emblem {right:6px;top:65px;width:12%;max-height:46px;font-size:2.1rem;}
 #professionalDeck .dealer-card.is-face-down .dealer-card-back > div:last-child {right:5px;top:120px;width:13%;}
 #professionalDeck .dealer-card.is-face-down .dealer-card-back h3 {font-size:.57rem;}
 #professionalDeck .dealer-card.is-face-down .dealer-card-back span {display:none;}
 #professionalDeck.is-expanded .dealer-card.is-face-up {width:100%;height:auto;}
}
@media(max-width:420px) {
 #professionalDeck .dealer-cards {height:475px;}
 #professionalDeck .dealer-card {height:430px;}
 #professionalDeck .dealer-card.is-face-down::after {font-size:7px;right:6px;}
}
@media(prefers-reduced-motion:reduce) {#professionalDeck .dealer-card {transition:none!important;}}

/* V2.5.3 — restrained stacked-card silhouette and narrow branded teaser */
#professionalDeck .dealer-cards {width:min(100%,1080px);height:520px;}
#professionalDeck .dealer-card {width:82%;height:470px;}
#professionalDeck .dealer-card.is-face-up,
#professionalDeck .dealer-card.is-face-up.is-dealing {transform:translate3d(0,0,0) rotate(-.35deg);}
#professionalDeck .dealer-card.is-face-down,
#professionalDeck .dealer-card.is-face-down.is-dealing,
#professionalDeck .dealer-card.is-face-down:hover {transform:translate3d(8%,15px,0) rotate(2.7deg);}
#professionalDeck .dealer-card.is-face-down::after {content:'NEXT';right:9px;top:24px;font-size:9px;letter-spacing:.06em;}
#professionalDeck .dealer-card.is-face-down .dealer-card-back img,
#professionalDeck .dealer-card.is-face-down .dealer-back-emblem {top:82px;right:4px;width:7%;max-height:55px;font-size:2.25rem;}
#professionalDeck .dealer-card.is-face-down .dealer-card-back > div:last-child {display:none;}
#professionalDeck.is-expanded .dealer-cards {width:100%;height:auto;}
#professionalDeck.is-expanded .dealer-card.is-face-up {width:100%;height:auto;transform:none;}
@media(max-width:700px) {
 #professionalDeck .dealer-cards {height:465px;}
 #professionalDeck .dealer-card {width:88%;height:430px;}
 #professionalDeck .dealer-card.is-face-down,
 #professionalDeck .dealer-card.is-face-down.is-dealing,
 #professionalDeck .dealer-card.is-face-down:hover {transform:translate3d(7%,12px,0) rotate(2deg);}
 #professionalDeck .dealer-card.is-face-down::after {right:4px;top:17px;font-size:7px;}
 #professionalDeck .dealer-card.is-face-down .dealer-card-back img,
 #professionalDeck .dealer-card.is-face-down .dealer-back-emblem {right:1px;top:64px;width:5%;max-height:32px;font-size:1.5rem;}
 #professionalDeck.is-expanded .dealer-card.is-face-up {width:100%;height:auto;}
}
@media(max-width:420px) {
 #professionalDeck .dealer-cards {height:455px;}
 #professionalDeck .dealer-card {height:420px;}
}

/* ============================================================
   V2.5.4 — HALF-SIZE FAN DECK
   Two fixed positions; expanded case study remains full-width.
============================================================ */
#professionalDeck .dealer-cards {
    width: min(100%, 900px);
    height: 515px;
    margin: 0 auto;
    overflow: visible;
}
#professionalDeck .dealer-card {
    width: min(68%, 590px);
    height: 410px;
    min-height: 0;
    transform-origin: 48% 92%;
}
#professionalDeck .dealer-card.is-face-up,
#professionalDeck .dealer-card.is-face-up.is-dealing {
    transform: translate3d(0, 0, 0) rotate(-5deg);
}
#professionalDeck .dealer-card.is-face-down,
#professionalDeck .dealer-card.is-face-down.is-dealing,
#professionalDeck .dealer-card.is-face-down:hover {
    transform: translate3d(39%, 20px, 0) rotate(11deg);
}
#professionalDeck .dealer-card-front {padding: 25px 29px;}
#professionalDeck .dealer-card-mark {height: 69px; max-width: 118px; margin: 15px 0 10px;}
#professionalDeck .dealer-horizonte-mark {height: 69px; font-size: 4.6rem; margin: 15px 0 10px;}
#professionalDeck .dealer-card-front h3 {font-size: clamp(1.7rem, 2.6vw, 2.55rem);}
#professionalDeck .dealer-card-description {font-size: .89rem; line-height: 1.55; margin: 12px 0 14px;}
#professionalDeck .dealer-card.is-face-down::after {right: 16px; top: 19px; font-size: 10px;}
#professionalDeck .dealer-card.is-face-down .dealer-card-back img,
#professionalDeck .dealer-card.is-face-down .dealer-back-emblem {
    right: 10px; top: 80px; width: 19%; max-height: 90px; font-size: 4rem;
}
#professionalDeck.is-expanded .dealer-cards {width: 100%; height: auto; min-height: 0;}
#professionalDeck.is-expanded .dealer-card.is-face-up,
#professionalDeck.is-expanded .dealer-card.is-face-up.is-dealing {
    width: 100%; height: auto; min-height: 490px; transform: none;
}
#professionalDeck.is-expanded .dealer-card-front {padding: 36px 40px;}
#professionalDeck.is-expanded .dealer-card-mark {height: 100px; max-width: 155px;}
#professionalDeck.is-expanded .dealer-horizonte-mark {height: 100px; font-size: 6rem;}
#professionalDeck.is-expanded .dealer-card-front h3 {font-size: clamp(2rem, 3.4vw, 3.25rem);}
@media (max-width: 700px) {
    #professionalDeck .dealer-cards {width: 100%; height: 420px;}
    #professionalDeck .dealer-card {width: 76%; height: 340px; transform-origin: 48% 90%;}
    #professionalDeck .dealer-card.is-face-up,
    #professionalDeck .dealer-card.is-face-up.is-dealing {transform: translate3d(0,0,0) rotate(-4deg);}
    #professionalDeck .dealer-card.is-face-down,
    #professionalDeck .dealer-card.is-face-down.is-dealing,
    #professionalDeck .dealer-card.is-face-down:hover {transform: translate3d(30%,17px,0) rotate(10deg);}
    #professionalDeck .dealer-card-front {padding: 17px 18px;}
    #professionalDeck .dealer-card-mark {height: 48px; margin: 10px 0 8px;}
    #professionalDeck .dealer-horizonte-mark {height: 48px; font-size: 3.4rem; margin: 10px 0 8px;}
    #professionalDeck .dealer-card-front h3 {font-size: clamp(1.3rem,5vw,1.9rem);}
    #professionalDeck .dealer-card-description {font-size: .76rem; line-height: 1.42; margin: 9px 0;}
    #professionalDeck .dealer-card-meta {font-size: .54rem;}
    #professionalDeck .dealer-card.is-face-down::after {right: 8px; top: 15px; font-size: 8px;}
    #professionalDeck .dealer-card.is-face-down .dealer-card-back img,
    #professionalDeck .dealer-card.is-face-down .dealer-back-emblem {right: 5px; top: 62px; width: 20%; font-size: 2.8rem;}
    #professionalDeck.is-expanded .dealer-card.is-face-up {width: 100%; height: auto; min-height: 445px; transform: none;}
    #professionalDeck.is-expanded .dealer-card-front {padding: 24px;}
}
@media (max-width: 420px) {
    #professionalDeck .dealer-cards {height: 385px;}
    #professionalDeck .dealer-card {height: 315px;}
    #professionalDeck .dealer-card-front {padding: 14px;}
    #professionalDeck .dealer-card-front h3 {font-size: 1.28rem;}
    #professionalDeck .dealer-card-description {font-size: .7rem;}
    #professionalDeck .dealer-expand {padding: 6px 0; font-size: .85rem;}
}


/* ============================================================
   V2.5.5 — REAR BRANDING + EXPANSION REFINEMENT
   Preserve V2.5.4 fan dimensions, angles and offsets.
============================================================ */
#professionalDeck .dealer-card.is-face-down .dealer-card-back {
    position:relative;
    padding:0;
    background:radial-gradient(ellipse at 85% 36%,var(--accent-soft),transparent 62%),var(--surface);
}
/* The readable preview lives entirely in the exposed right-hand wing. */
#professionalDeck .dealer-card.is-face-down .dealer-card-back img,
#professionalDeck .dealer-card.is-face-down .dealer-back-emblem {
    position:absolute;
    top:38%;
    right:3%;
    width:23%;
    height:95px;
    max-height:95px;
    margin:0;
    object-fit:contain;
    object-position:center;
    font-size:4.5rem;
    transform:translateY(-50%);
}
#professionalDeck .dealer-card.is-face-down .dealer-card-back > div:last-child {
    display:block;
    position:absolute;
    right:2%;
    top:55%;
    width:25%;
    text-align:center;
    transform:none;
}
#professionalDeck .dealer-card.is-face-down .dealer-card-back h3 {
    margin:0;
    font-size:.79rem;
    line-height:1.3;
    letter-spacing:-.01em;
    color:var(--text);
}
#professionalDeck .dealer-card.is-face-down .dealer-card-back > div:last-child span {display:none;}
#professionalDeck .dealer-card.is-face-down::after {
    top:19%;
    right:5%;
    font-size:.65rem;
    letter-spacing:.12em;
}
/* Native view transitions interpolate the actual card's size and position. */
#professionalDeck .dealer-card.is-face-up {view-transition-name:independent-project-card;}
::view-transition-old(independent-project-card),
::view-transition-new(independent-project-card) {
    animation-duration:.55s;
    animation-timing-function:cubic-bezier(.22,.75,.22,1);
}
#professionalDeck.is-expanded .dealer-expanded-content {
    animation:dealer-details-enter .48s .12s both;
}
@keyframes dealer-details-enter {
    from {opacity:0;transform:translateY(12px);}
    to {opacity:1;transform:translateY(0);}
}
#professionalDeck.is-expanded .dealer-card.is-face-up {
    transform:none;
    box-shadow:var(--shadow);
}
@media(max-width:700px) {
    #professionalDeck .dealer-card.is-face-down .dealer-card-back img,
    #professionalDeck .dealer-card.is-face-down .dealer-back-emblem {
        right:2%;top:39%;width:21%;height:62px;max-height:62px;font-size:2.6rem;
    }
    #professionalDeck .dealer-card.is-face-down .dealer-card-back > div:last-child {right:1%;top:56%;width:23%;}
    #professionalDeck .dealer-card.is-face-down .dealer-card-back h3 {font-size:.55rem;}
    #professionalDeck .dealer-card.is-face-down::after {right:3%;top:18%;font-size:.5rem;}
}
@media(prefers-reduced-motion:reduce) {
    ::view-transition-old(independent-project-card),::view-transition-new(independent-project-card) {animation-duration:0s!important;}
    #professionalDeck.is-expanded .dealer-expanded-content {animation:none!important;}
}


/* ============================================================
   V2.5.6 — ORNAMENTAL PLAYING-CARD BACKS
   Keep V2.5.4 fan geometry unchanged.
============================================================ */
#professionalDeck .dealer-card.is-face-down::after { content:none; }
#professionalDeck .dealer-card.is-face-down .dealer-card-back {
    display:block;position:relative;overflow:hidden;padding:0;
    background:
      repeating-linear-gradient(45deg,transparent 0 19px,rgba(168,50,67,.045) 19px 20px),
      repeating-linear-gradient(-45deg,transparent 0 19px,rgba(168,50,67,.045) 19px 20px),
      radial-gradient(ellipse at 78% 45%,var(--accent-soft),transparent 67%),var(--surface);
}
#professionalDeck .dealer-card.is-face-down .dealer-card-back::before {
    content:"";position:absolute;inset:11px;border:1px solid var(--accent-border);
    border-radius:9px;pointer-events:none;
}
#professionalDeck .dealer-card.is-face-down .dealer-card-back::after {
    content:"";position:absolute;inset:19px;border:1px dashed var(--accent-border);
    border-radius:5px;opacity:.65;pointer-events:none;
}
#professionalDeck .dealer-card.is-face-down .dealer-back-seal {
    position:absolute;right:5%;top:44%;transform:translateY(-50%);
    width:24%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--accent);border-radius:50%;
    background:radial-gradient(circle,var(--surface) 42%,var(--accent-soft) 100%);
    box-shadow:0 0 0 7px var(--surface),0 0 0 8px var(--accent-border);
    z-index:2;
}
#professionalDeck .dealer-card.is-face-down .dealer-back-seal::before {
    content:"";position:absolute;inset:-24%;border:1px solid var(--accent-border);
    transform:rotate(45deg);pointer-events:none;z-index:-1;
}
#professionalDeck .dealer-card.is-face-down .dealer-back-seal img {
    position:static;display:block;width:64%;height:64%;max-width:64%;max-height:64%;
    margin:0;object-fit:contain;transform:none;
}
#professionalDeck .dealer-card.is-face-down .dealer-back-seal img.dealer-logo-light {display:none;}
body.light-theme #professionalDeck .dealer-card.is-face-down .dealer-back-seal img.dealer-logo-dark {display:none;}
body.light-theme #professionalDeck .dealer-card.is-face-down .dealer-back-seal img.dealer-logo-light {display:block;}
#professionalDeck .dealer-card.is-face-down .dealer-back-monogram {
    color:var(--accent);font-family:Georgia,serif;font-size:clamp(2rem,4vw,3.6rem);line-height:1;
}
#professionalDeck .dealer-card.is-face-down .dealer-back-index {
    position:absolute;right:5%;font:600 12px/1 Consolas,monospace;
    color:var(--accent);letter-spacing:.1em;z-index:2;
}
#professionalDeck .dealer-card.is-face-down .dealer-back-index-top {top:8%;}
#professionalDeck .dealer-card.is-face-down .dealer-back-index-bottom {bottom:8%;transform:rotate(180deg);}
#professionalDeck .dealer-card.is-face-down .dealer-back-accessible-name {
    position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
    margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;border:0!important;
}
@media(max-width:700px) {
  #professionalDeck .dealer-card.is-face-down .dealer-back-seal {right:4%;width:26%;}
  #professionalDeck .dealer-card.is-face-down .dealer-back-index {font-size:9px;}
  #professionalDeck .dealer-card.is-face-down .dealer-back-monogram {font-size:2rem;}
}

/* V2.5.7 — Center emblem in exposed fan; retain V2.5.4 card geometry */
#professionalDeck .dealer-card.is-face-down .dealer-back-seal {
  right:10%; top:50%; width:26%; transform:translateY(-50%);
}
#professionalDeck .dealer-card.is-face-down .dealer-back-seal img {
  width:84%;height:84%;max-width:84%;max-height:84%;
}
#professionalDeck .dealer-card.is-face-down .dealer-back-monogram {
  font-size:clamp(2.8rem,5.2vw,4.6rem);
}
@media(max-width:700px){
 #professionalDeck .dealer-card.is-face-down .dealer-back-seal {right:9%;top:50%;width:29%;}
 #professionalDeck .dealer-card.is-face-down .dealer-back-monogram {font-size:2.8rem;}
}

/* V2.5.8 — Full-card-centered ornamental seal */
#professionalDeck .dealer-card.is-face-down .dealer-back-seal {
  left:50%;right:auto;top:50%;
  transform:translate(-50%,-50%);
  width:48%;max-width:300px;
  aspect-ratio:1;
}
#professionalDeck .dealer-card.is-face-down .dealer-back-seal img {
  width:82%;height:82%;max-width:82%;max-height:82%;
  object-fit:contain;
}
#professionalDeck .dealer-card.is-face-down .dealer-back-monogram {
  font-size:clamp(4.5rem,9vw,7.5rem);
}
@media(max-width:700px) {
  #professionalDeck .dealer-card.is-face-down .dealer-back-seal {
    left:50%;right:auto;top:50%;width:48%;
    transform:translate(-50%,-50%);
  }
  #professionalDeck .dealer-card.is-face-down .dealer-back-monogram {
    font-size:clamp(2rem,8vw,4rem);
  }
}

/* ============================================================
   V2.6 — PORTRAIT FRONT / LANDSCAPE BACK
   Override legacy deck dimensions; case study stays full-width.
============================================================ */
#professionalDeck .dealer-cards {
  width:min(100%,1050px); height:665px; margin:0 auto;
  position:relative; overflow:visible;
}
#professionalDeck .dealer-card {top:48px;left:12%;min-height:0;transition:transform .55s cubic-bezier(.2,.75,.2,1),opacity .3s,box-shadow .3s;}
#professionalDeck .dealer-card.is-face-up,
#professionalDeck .dealer-card.is-face-up.is-dealing {
  width:400px;height:540px;z-index:3;transform-origin:50% 85%;
  transform:translate3d(0,0,0) rotate(-6deg);
}
#professionalDeck .dealer-card.is-face-down,
#professionalDeck .dealer-card.is-face-down.is-dealing,
#professionalDeck .dealer-card.is-face-down:hover {
  width:600px;height:390px;z-index:1;top:115px;left:27%;transform-origin:center;
  transform:translate3d(0,0,0) rotate(13deg);
}
#professionalDeck .dealer-card-front {padding:26px 27px;}
#professionalDeck .dealer-card-meta {font-size:.62rem;}
#professionalDeck .dealer-card-mark {height:75px;max-width:160px;margin:25px 0 16px;}
#professionalDeck .dealer-card-mark.dealer-horizonte-logo {width:100%;max-width:300px;height:90px;object-fit:contain;object-position:left center;}
#professionalDeck .dealer-card-front h3 {font-size:clamp(1.9rem,2.4vw,2.55rem);overflow-wrap:break-word;}
#professionalDeck .dealer-card-description {font-size:.87rem;line-height:1.58;margin:16px 0;}
#professionalDeck .dealer-card.is-face-down .dealer-back-seal {
  left:50%;top:50%;right:auto;width:42%;max-width:none;
  transform:translate(-50%,-50%);aspect-ratio:1;
}
#professionalDeck .dealer-card.is-face-down .dealer-back-seal img {width:78%;height:78%;max-width:78%;max-height:78%;object-fit:contain;}
#professionalDeck .dealer-card.is-face-down .dealer-back-seal img.horizonte-wordmark {width:91%;height:68%;max-width:91%;max-height:68%;}
#professionalDeck .dealer-card.is-face-down .dealer-back-index {right:5%;}
#professionalDeck.is-expanded .dealer-cards {width:100%;height:auto;min-height:0;}
#professionalDeck.is-expanded .dealer-card.is-face-up,
#professionalDeck.is-expanded .dealer-card.is-face-up.is-dealing {
  position:relative;top:auto;left:auto;width:100%;height:auto;min-height:490px;transform:none;
}
#professionalDeck.is-expanded .dealer-card-front {padding:36px 40px;}
#professionalDeck.is-expanded .dealer-card-mark.dealer-horizonte-logo {max-width:380px;height:110px;}
@media(max-width:900px) and (min-width:701px) {
 #professionalDeck .dealer-cards {height:620px;}
 #professionalDeck .dealer-card.is-face-up,#professionalDeck .dealer-card.is-face-up.is-dealing {width:360px;height:510px;}
 #professionalDeck .dealer-card.is-face-down,#professionalDeck .dealer-card.is-face-down.is-dealing,#professionalDeck .dealer-card.is-face-down:hover {width:510px;height:340px;left:25%;}
}
@media(max-width:700px) {
 #professionalDeck .dealer-cards {width:100%;height:510px;}
 #professionalDeck .dealer-card {top:40px;left:4%;}
 #professionalDeck .dealer-card.is-face-up,#professionalDeck .dealer-card.is-face-up.is-dealing {width:min(68%,290px);height:420px;transform:rotate(-5deg);}
 #professionalDeck .dealer-card.is-face-down,#professionalDeck .dealer-card.is-face-down.is-dealing,#professionalDeck .dealer-card.is-face-down:hover {width:76%;height:260px;top:105px;left:23%;transform:rotate(12deg);}
 #professionalDeck .dealer-card-front {padding:16px;}
 #professionalDeck .dealer-card-mark {height:55px;margin:13px 0 9px;}
 #professionalDeck .dealer-card-mark.dealer-horizonte-logo {height:58px;max-width:220px;}
 #professionalDeck .dealer-card-front h3 {font-size:clamp(1.3rem,4.4vw,1.85rem);}
 #professionalDeck .dealer-card-description {font-size:.73rem;line-height:1.42;}
 #professionalDeck .dealer-card-meta {font-size:.5rem;}
 #professionalDeck .dealer-card.is-face-down .dealer-back-seal {width:43%;}
 #professionalDeck.is-expanded .dealer-card.is-face-up,#professionalDeck.is-expanded .dealer-card.is-face-up.is-dealing {width:100%;height:auto;min-height:445px;transform:none;}
 #professionalDeck.is-expanded .dealer-card-front {padding:24px;}
}
@media(max-width:420px) {
 #professionalDeck .dealer-cards {height:465px;}
 #professionalDeck .dealer-card.is-face-up,#professionalDeck .dealer-card.is-face-up.is-dealing {width:70%;height:390px;}
 #professionalDeck .dealer-card.is-face-down,#professionalDeck .dealer-card.is-face-down.is-dealing,#professionalDeck .dealer-card.is-face-down:hover {width:75%;height:235px;left:24%;}
 #professionalDeck .dealer-card-front h3 {font-size:1.25rem;}
 #professionalDeck .dealer-card-description {font-size:.69rem;}
}

/* V2.7 — Three-card professional deck: display only active + upcoming card. */
#professionalDeck .dealer-card.is-queued {display:none!important;}
#professionalDeck .dealer-card-mark.professional-mark {width:150px;max-width:150px;height:105px;object-fit:contain;object-position:left center;}
#professionalDeck .dealer-card.is-face-down .dealer-back-seal img {width:82%;height:82%;max-width:82%;max-height:82%;object-fit:contain;}
#professionalDeck .dealer-deck-topline {justify-content:flex-end;}
#professionalDeck .dealer-card-front h3 {font-size:clamp(1.55rem,2.1vw,2.2rem);}
#professionalDeck .dealer-card-description {font-size:.82rem;line-height:1.5;}
#professionalDeck .dealer-card-meta .project-status {font-size:.58rem;white-space:nowrap;}
#professionalDeck .dealer-case-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
#professionalDeck .dealer-case-grid div {min-width:0;}
@media(max-width:700px) {#professionalDeck .dealer-card-mark.professional-mark {width:95px;height:75px;}#professionalDeck .dealer-card-front h3 {font-size:1.3rem;}#professionalDeck .dealer-case-grid {grid-template-columns:1fr;}}


/* V2.8 — PROFESSIONAL DECK ONLY: REVERSE THE FAN
   Left: landscape rear. Right: portrait front.
   Independent/Selected Work deck remains unchanged. */
@media (min-width: 901px) {
  #professionalDeck:not(.is-expanded) .dealer-card.is-face-up,
  #professionalDeck:not(.is-expanded) .dealer-card.is-face-up.is-dealing {
    left: 49%;
    transform-origin: 50% 85%;
    transform: translate3d(0,0,0) rotate(6deg);
  }
  #professionalDeck:not(.is-expanded) .dealer-card.is-face-down,
  #professionalDeck:not(.is-expanded) .dealer-card.is-face-down.is-dealing,
  #professionalDeck:not(.is-expanded) .dealer-card.is-face-down:hover {
    left: 7%;
    transform-origin: center;
    transform: translate3d(0,0,0) rotate(-13deg);
  }
}
@media (min-width: 701px) and (max-width: 900px) {
  #professionalDeck:not(.is-expanded) .dealer-card.is-face-up,
  #professionalDeck:not(.is-expanded) .dealer-card.is-face-up.is-dealing {
    left: 51%;
    transform: translate3d(0,0,0) rotate(6deg);
  }
  #professionalDeck:not(.is-expanded) .dealer-card.is-face-down,
  #professionalDeck:not(.is-expanded) .dealer-card.is-face-down.is-dealing,
  #professionalDeck:not(.is-expanded) .dealer-card.is-face-down:hover {
    left: 5%;
    transform: translate3d(0,0,0) rotate(-13deg);
  }
}
/* Mobile geometry is intentionally left unchanged until final mobile QA. */


/* V2.8.1 — Restore professional rear-card numbering */

@media (min-width: 701px) {
  #professionalDeck:not(.is-expanded)
  .dealer-card.is-face-down .dealer-back-index {
    left: 5%;
    right: auto;
  }

  #professionalDeck:not(.is-expanded)
  .dealer-card.is-face-down .dealer-back-index-top {
    top: 8%;
  }

  #professionalDeck:not(.is-expanded)
  .dealer-card.is-face-down .dealer-back-index-bottom {
    bottom: 8%;
    transform: rotate(180deg);
  }
}

/* PROCESS — V2.1: fixed 3×2 grid, description disclosed within its own card */
#process .process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
#process .process-step { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-height:275px; padding:30px; transition:background .25s ease, box-shadow .25s ease; }
#process .process-step:hover, #process .process-step.is-active { background:var(--surface); }
#process .process-step.is-active { box-shadow:inset 0 0 0 1px var(--accent); }
#process .process-step h3 { margin:65px 0 0; font-size:1.5rem; }
#process .process-step-description { margin:18px 0 0; color:var(--text-soft); font-size:.93rem; line-height:1.65; }
#process .process-step-description[hidden] { display:none!important; }
#process .process-step-hint { position:static; display:inline-flex; align-items:center; gap:10px; margin-top:20px; padding:5px 0; border:0; background:transparent; color:var(--text-soft); font:inherit; font-family:"SFMono-Regular",Consolas,monospace; font-size:.73rem; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; }
#process .process-step-hint span { color:var(--accent); font-size:1rem; }
#process .process-step-hint:hover, #process .process-step-hint:focus-visible { color:var(--accent); }
#process .process-step-hint:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
@media(max-width:700px) { #process .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #process .process-step { min-height:230px; padding:22px; } #process .process-step h3 { margin-top:48px; } }
@media(max-width:440px) { #process .process-grid { grid-template-columns:1fr; } #process .process-step { min-height:185px; } #process .process-step h3 { margin-top:30px; } }
@media(prefers-reduced-motion:reduce) { #process .process-step { transition:none; } }

/* PROCESS — V2.2: compact proportions; existing inline disclosure preserved */
@media (min-width: 701px) {
  #process .process-step {
    min-height: 225px;
    padding: 24px 28px;
  }
  #process .process-step h3 {
    margin-top: 34px;
    font-size: 1.45rem;
    line-height: 1.2;
  }
  #process .process-step-hint { margin-top: 14px; }
  #process .process-step-description {
    margin-top: 12px;
    font-size: .88rem;
    line-height: 1.5;
  }
}
@media (min-width: 441px) and (max-width: 700px) {
  #process .process-step { min-height: 205px; padding: 20px; }
  #process .process-step h3 { margin-top: 28px; }
  #process .process-step-hint { margin-top: 12px; }
  #process .process-step-description { margin-top: 10px; line-height: 1.5; }
}
@media (max-width: 440px) {
  #process .process-step { min-height: 160px; padding: 20px; }
  #process .process-step h3 { margin-top: 20px; }
  #process .process-step-hint { margin-top: 12px; }
  #process .process-step-description { margin-top: 10px; line-height: 1.5; }
}


/* PROCESS — V2.3: number and heading on one line; compact tiles */
#process .process-step {
  min-height: 160px;
  padding: 24px 28px;
}
#process .process-step-heading {
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
}
#process .process-step-heading .process-number {
  flex: 0 0 auto;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .76rem;
  color: var(--accent);
}
#process .process-step-heading h3 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.25;
}
#process .process-step-hint { margin-top: 20px; }
#process .process-step-description { margin-top: 14px; }
@media (min-width: 441px) and (max-width: 700px) {
  #process .process-step { min-height: 150px; padding: 22px; }
  #process .process-step-heading { gap: 12px; }
  #process .process-step-heading h3 { font-size: 1.25rem; }
}
@media (max-width: 440px) {
  #process .process-step { min-height: 130px; padding: 20px; }
  #process .process-step-heading { gap: 14px; }
  #process .process-step-heading h3 { font-size: 1.35rem; }
  #process .process-step-hint { margin-top: 16px; }
}


/* PROCESS V2.4 — six technical diagrams; card interaction unchanged */
#process .process-step {
  isolation: isolate;
  overflow: hidden;
}
#process .process-step-heading,
#process .process-step-hint,
#process .process-step-description {
  position: relative;
  z-index: 2;
}
#process .process-step-art {
  position: absolute;
  z-index: 1;
  width: clamp(155px, 55%, 265px);
  height: auto;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .82;
  pointer-events: none;
  user-select: none;
  transition: opacity .22s ease, transform .22s ease;
}
#process .process-step:hover .process-step-art {
  opacity: 1;
  transform: translateY(-50%) scale(1.025);
}
/* The expanded copy has priority over the decorative art. */
#process .process-step.is-active .process-step-art {
  opacity: .10;
}
#process .process-step.is-active .process-step-description {
  max-width: 100%;
}
@media (min-width: 701px) and (max-width: 1050px) {
  #process .process-step-art { width: 48%; right: 0; opacity: .65; }
}
@media (max-width: 700px) {
  #process .process-step-art { width: 48%; right: 0; opacity: .5; }
  #process .process-step.is-active .process-step-art { opacity: .07; }
}
@media (prefers-reduced-motion: reduce) {
  #process .process-step-art { transition: none; }
}


/* ============================================================
   SKILLS & TOOLS — V1.2 COLLAPSED ARTWORK ALIGNMENT
============================================================ */


/* V2 — Skills collapsed artwork alignment */
@media (min-width: 701px) {
    .skills-stack:not(.is-focused)
    .quality-card .skill-asset-collapsed {
        right: 0;
        bottom: -15%;
    }

    .skills-stack:not(.is-focused)
    .compliance-card .skill-asset-collapsed {
        left: -1%;
        bottom: -15%;
    }

    .skills-stack:not(.is-focused)
    .systems-card .skill-asset-collapsed {
        right: -0.5%;
        top: -15%;
    }

    .skills-stack:not(.is-focused)
    .development-card .skill-asset-collapsed {
        left: -1%;
        top: -15%;
    }
}


/* V2 — Skills expanded artwork alignment
   Desktop only; preserve collapsed and mobile layouts.
---------------------------------------------------- */

@media (min-width: 701px) {

    .quality-card.preview .skill-asset-expanded,
    .quality-card.active .skill-asset-expanded {
        right: 0;
        bottom: -3%;
    }

    .compliance-card.preview .skill-asset-expanded,
    .compliance-card.active .skill-asset-expanded {
        left: 3%;
        bottom: -5%;
    }

    .systems-card.preview .skill-asset-expanded,
    .systems-card.active .skill-asset-expanded {
        right: -0.5%;
        top: -3%;
    }

    .development-card.preview .skill-asset-expanded,
    .development-card.active .skill-asset-expanded {
        left: -13%;
        top: 2%;
    }

}


/* HERO V2.1 — Align technical focal point with snapshot edge */

@media (min-width: 701px) {
    .hero-stats-visual {
        transform: translate(calc(-50% - 40px), -50%);
    }
}

/* ============================================================
   BEYOND WORK — EDITORIAL BLUEPRINT CARDS
   Heading: top-left | Description: bottom-left | Artwork: right
   Carousel movement and controls remain managed by existing JS.
   ============================================================ */

#beyond .beyond-carousel-viewport {
  padding: 12px 0 18px;
}

#beyond .beyond-carousel-track {
  align-items: stretch;
}

#beyond .beyond-slide {
  position: relative;
  flex: 0 0 clamp(300px, 38vw, 540px);
  min-width: 0;
}

#beyond .beyond-slide-media {
  position: relative;
  isolation: isolate;
  display: flex;
  aspect-ratio: 3 / 2;
  height: auto;
  padding: clamp(28px, 3vw, 42px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color 300ms ease, box-shadow 300ms ease,
              transform 300ms ease;
}

/* Theme-specific artwork sits behind the editorial copy. */
#beyond .beyond-slide-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#beyond .beyond-slide-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .74;
  transition: opacity 350ms ease, transform 500ms ease;
}

#beyond .beyond-art-light {
  display: none;
}

#beyond .beyond-art-dark {
  display: block;
}

[data-theme="light"] #beyond .beyond-art-dark {
  display: none;
}

[data-theme="light"] #beyond .beyond-art-light {
  display: block;
}

/* Gentle left-side contrast without obscuring the blueprint. */
#beyond .beyond-slide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    color-mix(in srgb, var(--surface) 88%, transparent) 28%,
    transparent 78%
  );
}

/* The existing HTML groups h3 and p in one content wrapper.
   Stretch that wrapper to place them at opposite vertical ends. */
#beyond .beyond-slide-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  padding: 0;
  pointer-events: none;
}

#beyond .beyond-slide-content h3 {
  margin: 0;
  max-width: 100%;
  color: var(--text);
  font-size: clamp(22px, 1.8vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.035em;
  white-space: nowrap;
}

#beyond .beyond-slide-content p {
  margin: 0 0 -20px;
  max-width: 66%;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}

#beyond .beyond-slide:focus-within .beyond-slide-media {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(168, 50, 67, .15);
}

[data-theme="light"] #beyond .beyond-slide-media {
  box-shadow: 0 4px 18px rgba(0, 0, 0, .025);
}

@media (hover: hover) {
  #beyond .beyond-slide:hover .beyond-slide-media {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .12);
  }

  #beyond .beyond-slide:hover .beyond-slide-art img {
    transform: scale(1.025);
    opacity: .82;
  }
}

@media (max-width: 700px) {
  #beyond .beyond-slide {
    flex-basis: min(82vw, 420px);
  }

  #beyond .beyond-slide-media {
    padding: 24px;
  }

  #beyond .beyond-slide-content h3 {
    max-width: 100%;
    font-size: clamp(17px, 3.7vw, 24px);
  }

  #beyond .beyond-slide-content p {
    max-width: 76%;
    font-size: 14px;
    line-height: 1.55;
  }

  #beyond .beyond-slide-art img {
    opacity: .58;
  }

  #beyond .beyond-slide-media::after {
    background: linear-gradient(
      90deg,
      var(--surface) 0%,
      color-mix(in srgb, var(--surface) 82%, transparent) 40%,
      transparent 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  #beyond .beyond-slide-media,
  #beyond .beyond-slide-art img {
    transition: none;
  }
}

/* ============================================================
   SHARED DECK MOTION V3.1 — SAME ANIMATION FOR EVERY DECK SIZE
   Front cards slide/fade without resizing or changing pivots.
   Existing resting card layouts are intentionally untouched.
============================================================ */
#independentDeck .dealer-card.is-queued,
#professionalDeck .dealer-card.is-queued { display:none!important; }

#independentDeck.is-switching .dealer-card,
#professionalDeck.is-switching .dealer-card { transition:none!important; }

#independentDeck .dealer-card.is-entering,
#professionalDeck .dealer-card.is-entering {
    z-index:4!important;
    pointer-events:none;
    animation:sharedDeckEnter 320ms cubic-bezier(.22,1,.36,1) both!important;
}
#independentDeck .dealer-card.is-exiting,
#professionalDeck .dealer-card.is-exiting {
    z-index:5!important;
    pointer-events:none;
    animation:sharedDeckExit 320ms cubic-bezier(.22,1,.36,1) both!important;
}
@keyframes sharedDeckEnter {
    0% { opacity:0; translate:18px 6px; }
    100% { opacity:1; translate:0 0; }
}
@keyframes sharedDeckExit {
    0% { opacity:1; translate:0 0; }
    100% { opacity:0; translate:-18px -6px; }
}
@media (prefers-reduced-motion:reduce) {
    #independentDeck .dealer-card.is-entering,
    #independentDeck .dealer-card.is-exiting,
    #professionalDeck .dealer-card.is-entering,
    #professionalDeck .dealer-card.is-exiting { animation:none!important; }
}


/* ============================================================
   V2.9 — UNIFIED CARD STACK TRANSITIONS
============================================================ */

#independentDeck:not(.is-expanded) .dealer-card,
#professionalDeck:not(.is-expanded) .dealer-card {
    transition:
        top 550ms cubic-bezier(.22, .8, .25, 1),
        left 550ms cubic-bezier(.22, .8, .25, 1),
        width 550ms cubic-bezier(.22, .8, .25, 1),
        height 550ms cubic-bezier(.22, .8, .25, 1),
        transform 550ms cubic-bezier(.22, .8, .25, 1),
        opacity 200ms ease,
        box-shadow 300ms ease;
}

/* Prepare a different rear card without animating it in. */
#professionalDeck.is-stack-preparing .dealer-card {
    transition: none !important;
}

/* The queued card does not participate in the shuffle. */
#professionalDeck:not(.is-expanded)
.dealer-card.is-queued {
    display: block !important;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

/* The two active participants remain visible while moving. */
#professionalDeck.is-stack-moving
.dealer-card:not(.is-queued) {
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    #independentDeck .dealer-card,
    #professionalDeck .dealer-card {
        transition: none !important;
    }
}

/* ============================================================
   HEADER — DIAMOND-TO-LINE BRIDGE
============================================================ */

/* Hide the retired monogram; keep the name visible on mobile. */
.site-header .brand-mark { display: none; }
.site-header .brand-name { display: inline; }

/* Decorative diamond immediately after the name, then a hairline. */
.nav-bridge {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 28px;
    pointer-events: none;
}

.nav-bridge-diamond {
    display: block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border: 1px solid var(--accent);
    transform: rotate(45deg);
    opacity: 0.85;
}

.nav-bridge-line {
    flex: 1;
    height: 1px;
    background: var(--accent);
    opacity: 0.35;
}

/* Subtle interaction when the name is hovered or keyboard-focused. */
.nav-bridge-diamond,
.nav-bridge-line {
    transition: background-color 220ms ease, opacity 220ms ease;
}

.site-header .brand:hover + .nav-bridge .nav-bridge-diamond,
.site-header .brand:focus-visible + .nav-bridge .nav-bridge-diamond {
    background-color: var(--accent);
    opacity: 1;
}

.site-header .brand:hover + .nav-bridge .nav-bridge-line,
.site-header .brand:focus-visible + .nav-bridge .nav-bridge-line {
    opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
    .nav-bridge-diamond,
    .nav-bridge-line {
        transition: none;
    }
}

/* The bridge occupies the flexible gap; navigation stays right aligned. */
.site-header .desktop-nav { margin-left: 0; }

@media (max-width: 1200px) {
    .nav-bridge { display: none; }
    .site-header .desktop-nav { margin-left: auto; }
}

@media (max-width: 700px) {
    .site-header .brand-name { display: inline; }
}

.contact-statement { color: var(--text-soft); }

/* Footer refinement — linked studio credit and back-to-top interaction */
.footer-center span + span::before { content: none; margin: 0; }
.footer-keizoku-link {
    color: var(--text);
    text-decoration: none;
    transition: color var(--transition);
}
.footer-keizoku-link:hover,
.footer-keizoku-link:focus-visible { color: var(--accent); }
.back-to-top { display: inline-flex; align-items: center; gap: 5px; }
.back-to-top span { display: inline-block; transition: transform 180ms ease, color 180ms ease; }
.back-to-top:hover span,
.back-to-top:focus-visible span { transform: translateY(-3px); color: var(--accent); }
.back-to-top:focus-visible,
.footer-keizoku-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    .footer-keizoku-link, .back-to-top span { transition: none; }
}

/* ============================================================
   SELECTED WORK — MULTI-CARD FAN (2–5 PROJECTS)
   Existing two-card layout remains unchanged.
   Rank 1 is the next project; ranks 2–4 peek from behind it.
============================================================ */
.dealer-deck.is-multi-stack:not(.is-expanded) .dealer-card.is-queued {
    display: none !important;
}
.dealer-deck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down {
    display: block !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
/* Incremental offsets create visible slivers without showing whole rear cards. */
#independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] {
    transform: translate3d(47%, 27px, 0) rotate(14deg);
}
#independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] {
    transform: translate3d(54%, 33px, 0) rotate(17deg);
}
#independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] {
    transform: translate3d(61%, 39px, 0) rotate(20deg);
}
#professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] {
    transform: translate3d(11%, 11px, 0) rotate(15deg);
}
#professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] {
    transform: translate3d(20%, 19px, 0) rotate(18deg);
}
#professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] {
    transform: translate3d(29%, 27px, 0) rotate(21deg);
}
@media (max-width: 700px) {
    #independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] {
        transform: translate3d(36%, 22px, 0) rotate(12deg);
    }
    #independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] {
        transform: translate3d(42%, 27px, 0) rotate(14deg);
    }
    #independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] {
        transform: translate3d(48%, 32px, 0) rotate(16deg);
    }
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] {
        transform: translate3d(9%, 9px, 0) rotate(14deg);
    }
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] {
        transform: translate3d(16%, 15px, 0) rotate(16deg);
    }
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] {
        transform: translate3d(23%, 21px, 0) rotate(18deg);
    }
}

/* ============================================================
   MULTI-STACK FIX — DYNAMIC PAINT ORDER
   The deck-specific legacy selectors use an ID and were overriding
   the generic stack-rank z-index rules. Give the current active card
   the highest layer, then each successive rear card a lower layer.
   Ranks are recalculated in renderDeck() whenever a card changes.
============================================================ */
#independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-up,
#professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-up { z-index: 10; }
#independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="1"],
#professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="1"] { z-index: 9; }
#independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"],
#professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] { z-index: 8; }
#independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"],
#professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] { z-index: 7; }
#independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"],
#professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] { z-index: 6; }

/* ============================================================
   TEST REFINEMENT — COMPACT INDEPENDENT / NUMBERED CAREER FAN
   Preserve approved active-card placement and dynamic rank order.
============================================================ */
/* Independent: use compact increments instead of percentage-width leaps. */
#independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] {
    transform: translate3d(5%, 7px, 0) rotate(15deg);
}
#independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] {
    transform: translate3d(10%, 14px, 0) rotate(17deg);
}
#independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] {
    transform: translate3d(15%, 21px, 0) rotate(19deg);
}
/* Career: small additional rotations and stepped offsets expose corner indices. */
#professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] {
    transform: translate3d(5%, 7px, 0) rotate(15deg);
}
#professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] {
    transform: translate3d(10%, 14px, 0) rotate(17deg);
}
#professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] {
    transform: translate3d(15%, 21px, 0) rotate(19deg);
}
@media (max-width:700px) {
    #independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"],
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] {
        transform: translate3d(4%, 5px, 0) rotate(14deg);
    }
    #independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"],
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] {
        transform: translate3d(8%, 10px, 0) rotate(16deg);
    }
    #independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"],
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] {
        transform: translate3d(12%, 15px, 0) rotate(18deg);
    }
}

/* TEST V3 — readable 4/5-card fan, rank-driven positioning.
   Rank 1 is closest to the face-up card; rank 4 is deepest.
   Preserve the approved two-card layout (these rules require is-multi-stack). */
@media (min-width:701px) {
  /* Independent: progressively stagger cards to the right; expose each right-hand index. */
  #independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="1"] { transform:translate3d(28%,18px,0) rotate(9deg); }
  #independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] { transform:translate3d(36%,20px,0) rotate(12deg); }
  #independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] { transform:translate3d(44%,22px,0) rotate(15deg); }
  #independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] { transform:translate3d(52%,24px,0) rotate(18deg); }
  /* Career: keep the approved left-side fan, with progressive top-edge separation. */
  #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="1"] { transform:translate3d(0,0,0) rotate(12deg); }
  #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] { transform:translate3d(-4%,-7px,0) rotate(16deg); }
  #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] { transform:translate3d(-8%,-14px,0) rotate(20deg); }
  #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] { transform:translate3d(-12%,-21px,0) rotate(24deg); }
}
@media (max-width:700px) {
  #independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="1"] {transform:translate3d(10%,10px,0) rotate(5deg);}
  #independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] {transform:translate3d(16%,12px,0) rotate(8deg);}
  #independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] {transform:translate3d(22%,14px,0) rotate(11deg);}
  #independentDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] {transform:translate3d(28%,16px,0) rotate(14deg);}
  #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="1"] {transform:rotate(9deg);}
  #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] {transform:translate3d(-3%,-4px,0) rotate(12deg);}
  #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] {transform:translate3d(-6%,-8px,0) rotate(15deg);}
  #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] {transform:translate3d(-9%,-12px,0) rotate(18deg);}
}

/* TEST V4 — CAREER-BUILT: EXPOSE ALL REAR CARD NUMBERS.
   Independent deck is intentionally unchanged.
   Move the numeric label toward the exposed left edge and widen only
   the rear-card separation, retaining the right-side face-up card. */
#professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down .dealer-back-index {
    left: 11px;
    right: auto;
}
#professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down .dealer-back-index-top {
    top: 12px;
}
#professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down .dealer-back-index-bottom {
    bottom: 12px;
}
@media (min-width: 701px) {
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="1"] {
        transform: translate3d(0,0,0) rotate(12deg);
    }
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] {
        transform: translate3d(-7%,-8px,0) rotate(16deg);
    }
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] {
        transform: translate3d(-14%,-16px,0) rotate(20deg);
    }
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] {
        transform: translate3d(-21%,-24px,0) rotate(24deg);
    }
}
@media (max-width: 700px) {
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down .dealer-back-index {
        left: 7px;
        font-size: 10px;
    }
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] {
        transform: translate3d(-5%,-5px,0) rotate(12deg);
    }
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] {
        transform: translate3d(-10%,-10px,0) rotate(15deg);
    }
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] {
        transform: translate3d(-15%,-15px,0) rotate(18deg);
    }
}


/* ============================================================
   MOBILE QA — OCT 2026
   Targeted fixes only. Desktop and 2–5 card deck logic unchanged.
============================================================ */
@media (max-width: 700px) {
    /* The detail panel is inserted directly after its selected stop.
       Counteract the flex container's 12px gap to join the two panels. */
    .career-path > .career-stop.active + .company-display.has-selection {
        margin-top: -13px;
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    /* Mirror the desktop professional layout: rear fan left, front right. */
    #professionalDeck:not(.is-expanded) .dealer-card.is-face-up,
    #professionalDeck:not(.is-expanded) .dealer-card.is-face-up.is-dealing {
        left: 34%;
        width: min(66%, 290px);
        transform-origin: 50% 85%;
        transform: rotate(5deg);
    }
    #professionalDeck:not(.is-expanded) .dealer-card.is-face-down,
    #professionalDeck:not(.is-expanded) .dealer-card.is-face-down.is-dealing,
    #professionalDeck:not(.is-expanded) .dealer-card.is-face-down:hover {
        left: 1%;
        width: 73%;
        transform-origin: 50% 50%;
    }
    /* Keep approved rank-based rotation, with mobile-sized leftward offsets. */
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="1"] {
        transform: translate3d(0,0,0) rotate(-9deg);
    }
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="2"] {
        transform: translate3d(-5%,-5px,0) rotate(-12deg);
    }
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="3"] {
        transform: translate3d(-10%,-10px,0) rotate(-15deg);
    }
    #professionalDeck.is-multi-stack:not(.is-expanded) .dealer-card.is-face-down[data-stack-rank="4"] {
        transform: translate3d(-15%,-15px,0) rotate(-18deg);
    }
}
@media (max-width: 420px) {
    #professionalDeck:not(.is-expanded) .dealer-card.is-face-up,
    #professionalDeck:not(.is-expanded) .dealer-card.is-face-up.is-dealing {
        left: 33%;
        width: 67%;
    }
    #professionalDeck:not(.is-expanded) .dealer-card.is-face-down,
    #professionalDeck:not(.is-expanded) .dealer-card.is-face-down.is-dealing,
    #professionalDeck:not(.is-expanded) .dealer-card.is-face-down:hover {
        left: 1%;
        width: 73%;
    }
}


/* ============================================================
   V2.9.5 — SPARSE CIRCUIT GEOMETRY / BURGUNDY ECLIPSE
   One uninterrupted page atmosphere, with fade anchored to Work.
============================================================ */
:root {
    --ambient-circuit-opacity: .38;
    --ambient-edge: rgba(255,255,255,.045);
    --ambient-shadow: 0 18px 46px rgba(0,0,0,.17), 0 3px 10px rgba(0,0,0,.08);
    --circuit-fade-start: 4700px; /* Fallback until initial layout measurement */
    --circuit-fade-length: 950px;
}
html[data-theme="light"] {
    --ambient-circuit-opacity: .25;
    --ambient-edge: rgba(255,255,255,.85);
    --ambient-shadow: 0 15px 38px rgba(37,30,35,.075), 0 3px 9px rgba(37,30,35,.035);
}
@media (prefers-color-scheme: light) {
    html[data-theme="system"] {
            --ambient-circuit-opacity: .25;
        --ambient-edge: rgba(255,255,255,.85);
        --ambient-shadow: 0 15px 38px rgba(37,30,35,.075), 0 3px 9px rgba(37,30,35,.035);
    }
}
main {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse 88vw 950px at -12% 0%,
            color-mix(in srgb, var(--accent) 42%, var(--bg) 58%) 0%,
            color-mix(in srgb, var(--accent) 19%, var(--bg) 81%) 34%,
            transparent 78%),
        var(--bg);
}
/* Fixed-size circuit artwork: expanding cards never rescale the background. */
main::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: var(--ambient-circuit-opacity);
    background: url("assets/images/circuit-atmosphere.svg") center top / 100% 6500px no-repeat;
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0, #000 var(--circuit-fade-start),
        transparent calc(var(--circuit-fade-start) + var(--circuit-fade-length)));
    mask-image: linear-gradient(to bottom,
        #000 0, #000 var(--circuit-fade-start),
        transparent calc(var(--circuit-fade-start) + var(--circuit-fade-length)));
}
main > section { position: relative; z-index: 1; }
/* The alternating bands remain, but are translucent and less saturated. */
main > .section:not(.section-alt) { background: transparent; }
main > .section.section-alt {
    background: color-mix(in srgb, var(--bg-alt) 48%, transparent);
}
.hero-stats {
    padding: 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.hero-stats .stat:last-child { border-bottom: 1px solid var(--border); }
.hero-grid-bg { display: none; }
.foundation-panel, .company-display, .capability-card,
.project-featured, .portfolio-note, .contact-card {
    box-shadow: var(--ambient-shadow), inset 0 1px 0 var(--ambient-edge);
}
.foundation-panel, .company-display, .capability-card,
.project-featured, .contact-card { border-color: var(--border); }
.capability-card:hover, .project-featured:hover {
    box-shadow: 0 24px 56px rgba(0,0,0,.21), inset 0 1px 0 var(--ambient-edge);
}
#process .process-step {
    background: color-mix(in srgb, var(--surface) 46%, transparent);
    box-shadow: inset 0 1px 0 var(--ambient-edge);
}
#process .process-step:hover { background: var(--surface-hover); }
.site-footer {
    position: relative;
    background: var(--bg);
    box-shadow: inset 0 1px 0 var(--ambient-edge);
}
@media (max-width: 700px) {
    main::before { background-size: 140% 6500px; }
    .foundation-panel, .company-display, .capability-card,
    .project-featured, .portfolio-note, .contact-card {
        box-shadow: 0 11px 28px rgba(0,0,0,.10), inset 0 1px 0 var(--ambient-edge);
    }
}

/* V2.9.6: circuit spans full viewport width, not the content container. */
main::before { background-position: center top; }

/* V2.9.7 — orthogonal circuit paths inspired by the existing technical assets. */

/* ============================================================
   V2.9.10 — EXPERIENCE TIMELINE ARTWORK CLIPPING FIX
   The decorative artwork intentionally extends beyond the
   timeline shell. Expanded desktop cards must not clip it.
============================================================ */
@media (min-width: 701px) {
    .career-path:has(.career-stop.active) {
        overflow: visible;
    }

    /* Preserve the rounded card silhouette without clipping
       the absolutely positioned timeline illustration. */
    .career-path:has(.career-stop.active) .career-stop.active {
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }

    .career-path:has(.career-stop.active) > .company-display.has-selection {
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }
}

/* ============================================================
   V2.9.10.1 — MOBILE EXPERIENCE EXPANSION HOTFIX
   Match the desktop single-card expansion without clipping the
   timeline artwork. All changes are scoped to <=700px.
============================================================ */
@media (max-width: 700px) {
    .career-path:has(> .career-stop.active) {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        border: 1px solid var(--accent-border);
        border-radius: var(--radius-md);
        background: var(--surface);
        box-shadow: 0 18px 42px rgba(0, 0, 0, .13);
        overflow: visible;
        isolation: isolate;
    }

    .career-path:has(> .career-stop.active) > .career-stop:not(.active) {
        display: none;
    }

    .career-path:has(> .career-stop.active) > .career-stop.active {
        width: 100%;
        min-height: 32px;
        height: 32px;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        position: relative;
    }

    .career-path:has(> .career-stop.active) > .career-stop.active > *:not(.career-dot) {
        display: none;
    }

    .career-path:has(> .career-stop.active) > .career-stop.active .career-dot {
        display: block;
        background: var(--accent);
        border-color: var(--accent);
    }

    .career-path:has(> .career-stop.active) > .company-display.has-selection {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        background: transparent;
        box-shadow: none;
        overflow: visible;
        position: relative;
    }

    .career-path:has(> .career-stop.active) > .company-display.has-selection::before {
        content: "";
        position: absolute;
        top: 0;
        left: 22px;
        right: 22px;
        height: 1px;
        background: var(--border);
        pointer-events: none;
    }
}