/* Portfolio page additions — append/use alongside css/styles.css */
.portfolio-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7rem) 0;
    background: linear-gradient(125deg, #03101e 0%, #071d33 58%, #0a2744 100%);
    border-bottom: 1px solid rgba(98, 177, 255, .2);
}

.portfolio-hero-glow {
    position: absolute;
    width: 32rem;
    height: 32rem;
    right: -7rem;
    top: -13rem;
    background: radial-gradient(circle, rgba(32, 128, 214, .24), transparent 68%);
    pointer-events: none;
}

.portfolio-hero-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.portfolio-hero h1 {
    margin: .5rem 0 1rem;
    color: #f5f8fc;
    line-height: 1.08;
}

    .portfolio-hero h1 span {
        color: #e7bd62;
    }

.portfolio-hero .lead {
    max-width: 46rem;
    color: #d1deeb;
}

.portfolio-hero-panel {
    padding: 1.5rem;
    border: 1px solid rgba(124, 185, 238, .28);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(13, 43, 70, .92), rgba(5, 24, 42, .94));
    box-shadow: 0 18px 45px rgba(0, 0, 0, .2);
}

.portfolio-panel-kicker {
    display: block;
    margin-bottom: 1rem;
    color: #e7bd62;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.portfolio-panel-item {
    display: flex;
    gap: .9rem;
    align-items: center;
    padding: .9rem 0;
    color: #eef5fc;
    border-top: 1px solid rgba(255,255,255,.1);
    font-weight: 650;
}

    .portfolio-panel-item span {
        color: #80c4ff;
        font-size: .78rem;
        font-weight: 800;
    }

.portfolio-section {
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
    background: #061525;
}

    .portfolio-section .section-heading {
        max-width: 50rem;
        margin-bottom: 2rem;
    }

    .portfolio-section h2, .portfolio-cta h2 {
        color: #f4f7fb;
    }

    .portfolio-section .lead {
        color: #c2d1df;
    }

.portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 1.5rem 0 .75rem;
}

.portfolio-filter {
    appearance: none;
    border: 1px solid rgba(129, 183, 230, .35);
    border-radius: 999px;
    padding: .65rem 1rem;
    background: #0b2239;
    color: #dce9f6;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

    .portfolio-filter:hover, .portfolio-filter:focus-visible {
        border-color: #e7bd62;
        outline: 2px solid transparent;
    }

    .portfolio-filter.is-active {
        background: #e7bd62;
        border-color: #e7bd62;
        color: #071728;
    }

.portfolio-results {
    min-height: 1.5em;
    margin: .4rem 0 1.5rem;
    color: #aebfd0;
    font-size: .9rem;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.portfolio-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgba(113, 169, 218, .22);
    background: linear-gradient(160deg, #102a43, #091b2d 78%);
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
}

    .portfolio-card[hidden] {
        display: none !important;
    }

.portfolio-card-art {
    min-height: 145px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    color: #f4f8fc;
    border-bottom: 1px solid rgba(255,255,255,.12);
    background: radial-gradient(circle at 78% 22%, rgba(55, 149, 231, .4), transparent 35%), linear-gradient(135deg, #12385a, #071727);
}

    .portfolio-card-art .art-symbol {
        font-size: clamp(2.4rem, 4vw, 3.8rem);
        line-height: 1;
        font-weight: 800;
        color: #e7bd62;
    }

    .portfolio-card-art .art-label {
        max-width: 9rem;
        text-align: right;
        font-size: .72rem;
        letter-spacing: .12em;
        line-height: 1.5;
        font-weight: 800;
        color: #d7e9fa;
    }

.art-security {
    background: radial-gradient(circle at 75% 30%, rgba(49, 133, 206, .45), transparent 32%), linear-gradient(135deg, #102e4a, #081a2b);
}

.art-infrastructure {
    background: radial-gradient(circle at 75% 30%, rgba(231, 189, 98, .24), transparent 32%), linear-gradient(135deg, #19364d, #081a2b);
}

.art-automation {
    background: radial-gradient(circle at 75% 30%, rgba(88, 178, 168, .3), transparent 32%), linear-gradient(135deg, #123a4a, #081a2b);
}

.art-database {
    background: radial-gradient(circle at 75% 30%, rgba(126, 142, 219, .35), transparent 32%), linear-gradient(135deg, #1b3154, #081a2b);
}

.art-web {
    background: radial-gradient(circle at 75% 30%, rgba(55, 149, 231, .42), transparent 32%), linear-gradient(135deg, #103b61, #081a2b);
}

.art-design {
    background: radial-gradient(circle at 75% 30%, rgba(231, 189, 98, .3), transparent 32%), linear-gradient(135deg, #3b2e4b, #081a2b);
}

.portfolio-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.35rem;
}

.portfolio-category {
    margin: 0 0 .55rem;
    color: #e7bd62;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
}

.portfolio-card h3 {
    margin: 0 0 .75rem;
    color: #f4f8fc;
    font-size: 1.2rem;
    line-height: 1.3;
}

.portfolio-card p:not(.portfolio-category):not(.project-context) {
    margin: 0 0 1rem;
    color: #c8d6e4;
    line-height: 1.65;
}

.portfolio-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 1rem;
}

    .portfolio-tags span {
        padding: .3rem .55rem;
        border-radius: 999px;
        border: 1px solid rgba(123, 180, 230, .25);
        color: #cde4f8;
        background: rgba(7, 24, 41, .65);
        font-size: .72rem;
    }

.portfolio-card .project-context {
    margin: auto 0 .8rem;
    padding-top: .7rem;
    color: #9fb5c9;
    font-size: .8rem;
}

.portfolio-link {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    margin-top: .25rem;
    color: #f0c96f;
    font-weight: 800;
    text-decoration: none;
}

    .portfolio-link:hover, .portfolio-link:focus-visible {
        color: #fff;
        text-decoration: underline;
    }

.portfolio-note {
    display: block;
    margin-top: .2rem;
    color: #aabfd2;
    font-size: .85rem;
    font-style: italic;
}

.portfolio-disclaimer {
    margin-top: 2rem;
    padding: 1.25rem 1.4rem;
    border-left: 3px solid #e7bd62;
    border-radius: .25rem .75rem .75rem .25rem;
    background: #0b2034;
    color: #d2dfeb;
}

    .portfolio-disclaimer strong {
        display: block;
        margin-bottom: .35rem;
        color: #f5f8fc;
    }

    .portfolio-disclaimer p {
        margin: 0;
        line-height: 1.65;
    }

.portfolio-cta {
    padding: 3.5rem 0;
    background: linear-gradient(120deg, #0c2741, #071a2b);
    border-top: 1px solid rgba(98, 177, 255, .18);
}

.portfolio-cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

    .portfolio-cta-inner > div {
        max-width: 42rem;
    }

.portfolio-cta p:not(.eyebrow) {
    color: #c5d4e2;
}

.portfolio-cta .button {
    flex-shrink: 0;
}

.site-footer {
    padding: 2rem 0;
    background: #020c16;
    border-top: 1px solid rgba(112, 166, 213, .2);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1.5rem;
}

.footer-brand {
    color: #f5f8fc;
    font-weight: 800;
    text-decoration: none;
}

    .footer-brand b {
        color: #e7bd62;
    }

.footer-inner p {
    margin: 0;
    color: #aab9c8;
    font-size: .88rem;
}

.footer-inner .footer-small {
    flex-basis: 100%;
    font-size: .78rem;
}

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

@media (max-width: 700px) {
    .portfolio-hero-layout {
        grid-template-columns: 1fr;
    }

    .portfolio-hero-panel {
        max-width: none;
    }

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

    .portfolio-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .portfolio-card-art {
        min-height: 125px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-filter {
        transition: none;
    }
}

/* Shared project case-study page components */
.project-hero {
    padding: clamp(3.2rem, 7vw, 5.5rem) 0;
    background: linear-gradient(125deg, #03101e, #0b2944);
    border-bottom: 1px solid rgba(98,177,255,.2);
}

    .project-hero h1 {
        margin: .5rem 0 1rem;
        color: #f5f8fc;
        line-height: 1.12;
    }

    .project-hero .lead {
        max-width: 52rem;
        color: #d1deeb;
    }

.project-main {
    padding: clamp(2.5rem,5vw,4rem) 0;
    background: #061525;
    color: #d0dce8;
}

    .project-main h2, .project-main h3 {
        color: #f4f7fb;
    }

    .project-main h2 {
        margin-top: 2.3rem;
    }

    .project-main p, .project-main li {
        line-height: 1.75;
    }

.project-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 17rem;
    gap: 2rem;
    align-items: start;
}

.project-panel {
    padding: 1.25rem;
    border: 1px solid rgba(113,169,218,.24);
    border-radius: .85rem;
    background: linear-gradient(160deg,#102a43,#091b2d);
}

    .project-panel h2, .project-panel h3 {
        margin-top: 0;
    }

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 1rem 0;
}

    .project-tags span {
        padding: .35rem .6rem;
        border: 1px solid rgba(123,180,230,.25);
        border-radius: 999px;
        color: #cde4f8;
        background: rgba(7,24,41,.65);
        font-size: .78rem;
    }

.project-callout {
    margin: 1.5rem 0;
    padding: 1rem 1.2rem;
    border-left: 3px solid #e7bd62;
    background: #0b2034;
    border-radius: .25rem .7rem .7rem .25rem;
}

    .project-callout strong {
        color: #f5f8fc;
    }

.project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.5rem;
}

.project-back {
    display: inline-block;
    margin-bottom: 1.5rem;
    color: #f0c96f;
    font-weight: 800;
    text-decoration: none;
}

.project-video-placeholder {
    display: grid;
    place-items: center;
    min-height: 230px;
    padding: 2rem;
    border: 1px dashed rgba(129,183,230,.45);
    border-radius: 1rem;
    background: radial-gradient(circle at 50% 30%,rgba(55,149,231,.2),transparent 45%),#081a2b;
    text-align: center;
}

    .project-video-placeholder .play-mark {
        display: grid;
        place-items: center;
        width: 4rem;
        height: 4rem;
        margin-bottom: 1rem;
        border: 1px solid #e7bd62;
        border-radius: 50%;
        color: #e7bd62;
        font-size: 1.7rem;
    }

@media(max-width:800px) {
    .project-layout {
        grid-template-columns: 1fr
    }

    .project-panel {
        order: 0
    }
}


/* Enhanced project showcase system — shared by all individual case-study pages */
.project-page {
    background: #061525;
}

.case-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3.4rem,6vw,5.8rem) 0 4rem;
    background: radial-gradient(circle at 82% 20%,rgba(32,128,214,.16),transparent 28%),linear-gradient(125deg,#03101e 0%,#071d33 55%,#0a2744 100%);
    border-bottom: 1px solid rgba(98,177,255,.2);
}

.case-hero-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(360px,.92fr);
    gap: clamp(2rem,4vw,4.5rem);
    align-items: center;
}

.case-intro h1 {
    margin: .5rem 0 1rem;
    max-width: 14ch;
    color: #f5f8fc;
    font-size: clamp(2.35rem,4.6vw,4.2rem);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.case-intro .eyebrow, .case-overview .eyebrow, .case-work .eyebrow, .case-next .eyebrow {
    color: #e7bd62;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .15em;
}

.case-lead {
    max-width: 42rem;
    color: #d1deeb;
    font-size: 1.12rem;
    line-height: 1.75;
}

.case-context {
    color: #a5bbce;
    font-size: .84rem;
    margin: .25rem 0 1.3rem;
}

.case-visual {
    min-height: 345px;
    padding: 1.25rem;
    border: 1px solid rgba(125,185,238,.27);
    border-radius: 1.1rem;
    background: linear-gradient(145deg,rgba(15,44,71,.97),rgba(5,19,33,.98));
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
    color: #eaf4fd;
    overflow: hidden;
}

.visual-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: #a8c7e3;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .11em;
}

.status-pill, .live-dot {
    border: 1px solid rgba(231,189,98,.38);
    border-radius: 999px;
    padding: .28rem .55rem;
    color: #f0cb75;
    font-size: .59rem;
    white-space: nowrap;
}

    .live-dot:before {
        content: "";
        display: inline-block;
        width: .38rem;
        height: .38rem;
        margin-right: .4rem;
        border-radius: 50%;
        background: #66d6b0;
        box-shadow: 0 0 10px rgba(102,214,176,.5);
    }

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
    margin: 1.1rem 0 .65rem;
}

    .project-tags span {
        padding: .35rem .65rem;
        border: 1px solid rgba(123,180,230,.25);
        border-radius: 999px;
        color: #cde4f8;
        background: rgba(7,24,41,.65);
        font-size: .75rem;
    }

.case-overview {
    padding: 2.4rem 0;
    background: #0a2035;
    border-bottom: 1px solid rgba(98,177,255,.13);
}

.overview-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 3rem;
    align-items: center;
}

    .overview-grid h2 {
        margin: .25rem 0;
        color: #f5f8fc;
        font-size: clamp(1.65rem,3vw,2.4rem);
        line-height: 1.12;
    }

        .overview-grid h2 span {
            color: #e7bd62;
        }

.overview-copy {
    margin: 0;
    max-width: 55rem;
    color: #c5d5e4;
    font-size: 1.02rem;
    line-height: 1.8;
}

.case-work {
    padding: clamp(3.5rem,6vw,5rem) 0;
    background: #061525;
    color: #c8d6e4;
}

.case-work-grid {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(275px,.8fr);
    gap: clamp(2rem,5vw,5rem);
    align-items: start;
}

.case-story > h2, .case-outcome h2 {
    margin: .35rem 0 1.7rem;
    color: #f5f8fc;
    font-size: clamp(1.7rem,3vw,2.3rem);
}

.story-section {
    display: grid;
    grid-template-columns: 3.1rem minmax(0,1fr);
    gap: 1rem;
    padding: 1.35rem 0 1.55rem;
    border-top: 1px solid rgba(125,185,238,.18);
}

.story-index {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid rgba(231,189,98,.48);
    border-radius: .7rem;
    color: #e7bd62;
    font-size: .8rem;
    font-weight: 900;
}

.story-section h2 {
    margin: .15rem 0 .55rem;
    color: #f3f7fb;
    font-size: 1.2rem;
}

.story-section p {
    margin: 0;
    color: #bdccda;
    line-height: 1.85;
}

.case-outcome {
    position: sticky;
    top: 1rem;
    padding: 1.55rem;
    border: 1px solid rgba(113,169,218,.25);
    border-radius: 1rem;
    background: linear-gradient(160deg,#102a43,#091b2d 78%);
    box-shadow: 0 16px 35px rgba(0,0,0,.16);
}

    .case-outcome .eyebrow {
        margin-top: 0;
    }

    .case-outcome h2 {
        font-size: 1.55rem;
        margin-bottom: 1.25rem;
    }

    .case-outcome ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .case-outcome li {
        display: flex;
        gap: .7rem;
        align-items: flex-start;
        padding: .75rem 0;
        border-top: 1px solid rgba(255,255,255,.09);
        color: #d2e0ed;
        line-height: 1.55;
    }

        .case-outcome li span {
            flex: none;
            color: #e7bd62;
            font-weight: 900;
        }

.outcome-note {
    display: flex;
    gap: .8rem;
    margin: 1.25rem 0;
    padding: 1rem;
    border-radius: .75rem;
    background: rgba(4,15,26,.55);
}

.outcome-icon {
    color: #e7bd62;
    font-size: 1.3rem;
}

.outcome-note p {
    margin: 0;
    color: #b8cddd;
    font-size: .9rem;
    line-height: 1.7;
}

.case-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    margin-top: 1.3rem;
}

    .case-actions .button {
        width: 100%;
        justify-content: center;
    }

.text-link {
    color: #f0c96f;
    font-weight: 800;
    text-decoration: none;
}

    .text-link:hover {
        text-decoration: underline;
    }

.case-next {
    padding: 3.1rem 0;
    border-top: 1px solid rgba(98,177,255,.16);
    background: linear-gradient(120deg,#0c2741,#071a2b);
}

.case-next-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.case-next h2 {
    margin: .2rem 0 .5rem;
    color: #f5f8fc;
    font-size: clamp(1.6rem,3vw,2.25rem);
}

.case-next p:not(.eyebrow) {
    margin: .2rem 0;
    color: #c5d4e2;
}

.case-next .button {
    flex-shrink: 0;
}
/* Custom project visuals */
.flowline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    padding: 2.1rem 0 1.5rem;
}

    .flowline > i {
        color: #e7bd62;
        font-style: normal;
        font-size: 1.3rem;
    }

.flow-node {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: .35rem;
    padding: .85rem .65rem;
    border: 1px solid rgba(115,177,230,.22);
    border-radius: .7rem;
    background: rgba(5,18,31,.7);
}

    .flow-node > b {
        color: #e7bd62;
        font-size: .7rem;
    }

    .flow-node strong {
        font-size: .82rem;
    }

    .flow-node small {
        color: #9eb8ce;
        font-size: .65rem;
    }

.gold-node {
    border-color: rgba(231,189,98,.5);
}

.mini-chart {
    padding: .9rem 1rem .5rem;
    border-radius: .7rem;
    background: rgba(3,13,23,.55);
}

.chart-label {
    display: flex;
    justify-content: space-between;
    color: #dceaf6;
    font-size: .68rem;
    font-weight: 800;
}

    .chart-label span {
        color: #779bb9;
        font-size: .62rem;
        font-weight: 500;
    }

.signal-bars {
    height: 60px;
    display: flex;
    align-items: end;
    gap: 5px;
    margin-top: .7rem;
}

    .signal-bars i {
        flex: 1;
        border-radius: 3px 3px 0 0;
        background: linear-gradient(#4aa9e8,#1c527e);
    }

.mini-chart p, .visual-caption {
    margin: .55rem 0 0;
    color: #7fa0ba;
    font-size: .65rem;
    line-height: 1.5;
}

.risk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
    padding: 1.25rem 0;
}

.risk-tile {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: .2rem .65rem;
    align-items: center;
    padding: .9rem;
    border: 1px solid rgba(115,177,230,.2);
    border-radius: .7rem;
    background: rgba(5,18,31,.6);
}

.risk-mark {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    grid-row: span 2;
    border-radius: .45rem;
    font-size: .68rem;
    font-weight: 900;
}

    .risk-mark.critical {
        background: #612f3b;
        color: #ffb3bd;
    }

    .risk-mark.high {
        background: #624127;
        color: #ffd08a;
    }

    .risk-mark.medium {
        background: #234a69;
        color: #a9dcff;
    }

    .risk-mark.low {
        background: #235143;
        color: #a5ead0;
    }

.risk-tile b {
    font-size: .78rem;
}

.risk-tile small {
    color: #94aec5;
    font-size: .66rem;
}

.assessment-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.1);
    color: #9db7ce;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .04em;
}

    .assessment-foot b {
        color: #e7bd62;
    }

.architecture {
    padding: 1rem 0 .2rem;
    text-align: center;
}

.arch-cloud {
    display: inline-block;
    padding: .5rem 1.1rem;
    border: 1px solid rgba(119,190,244,.38);
    border-radius: 999px;
    background: #123a5d;
    font-size: .72rem;
    font-weight: 800;
}

.arch-connector {
    color: #e7bd62;
    line-height: 1.4;
}

.arch-row {
    display: flex;
    justify-content: center;
    gap: .5rem;
}

.arch-box {
    flex: 1;
    padding: .75rem .35rem;
    border: 1px solid rgba(115,177,230,.3);
    border-radius: .55rem;
    background: #0b2238;
    font-size: .66rem;
    font-weight: 800;
}

.accent-box {
    border-color: #e7bd62;
    color: #f1cd7b;
}

.arch-split {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .55rem;
    text-align: left;
}

.arch-lane {
    min-width: 0;
    padding: .7rem;
    border: 1px solid rgba(115,177,230,.23);
    border-radius: .65rem;
    background: rgba(4,15,26,.6);
}

    .arch-lane > b {
        color: #e7bd62;
        font-size: .6rem;
        letter-spacing: .05em;
    }

.server-chip {
    margin-top: .5rem;
    padding: .5rem;
    border-radius: .4rem;
    background: #102d47;
    color: #cde2f4;
    font-size: .62rem;
}

.workstations {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: .7rem;
}

    .workstations i {
        width: 11px;
        height: 9px;
        border: 1px solid #55a8e4;
        border-radius: 2px;
        background: #194a71;
    }

.arch-lane small {
    color: #9db7ce;
    font-size: .6rem;
}

.code-window {
    margin: 1.3rem 0 1rem;
    overflow: hidden;
    border: 1px solid rgba(117,174,223,.25);
    border-radius: .75rem;
    background: #06111d;
}

.code-head {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .85rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: #0d2236;
    color: #9fb8cf;
    font-size: .68rem;
}

    .code-head > span:last-child {
        margin-left: auto;
        color: #e7bd62;
    }

.window-dots {
    display: flex;
    gap: 4px;
}

    .window-dots i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #50718b;
    }

.code-body {
    padding: .8rem 1rem;
    font: .72rem/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;
}

    .code-body p {
        margin: 0;
        color: #d7e8f7;
        white-space: pre-wrap;
    }

    .code-body em {
        display: inline-block;
        width: 1.4rem;
        color: #50708c;
        font-style: normal;
    }

    .code-body b {
        color: #70c6b0;
        font-weight: 700;
    }

    .code-body span {
        color: #e7bd62;
    }

.terminal-cursor {
    margin-top: .3rem;
    color: #e7bd62;
    animation: blink 1.2s steps(2,start) infinite;
}

@keyframes blink {
    to {
        visibility: hidden
    }
}

.automation-stages {
    display: flex;
    justify-content: space-between;
    gap: .3rem;
    color: #a8c6df;
    font-size: .66rem;
    font-weight: 800;
}

    .automation-stages b {
        color: #e7bd62;
    }

.data-stack {
    display: grid;
    gap: .65rem;
    padding: 1.2rem 0 .9rem;
}

.data-layer {
    display: grid;
    grid-template-columns: 2rem 1fr 1.4rem;
    gap: .7rem;
    align-items: center;
    padding: .8rem;
    border: 1px solid rgba(115,177,230,.2);
    border-radius: .65rem;
    background: rgba(5,18,31,.62);
}

.layer-icon {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: .45rem;
    color: #e7bd62;
    background: #173953;
    font-size: .67rem;
    font-weight: 900;
}

.data-layer b, .data-layer small {
    display: block;
}

.data-layer b {
    font-size: .79rem;
}

.data-layer small {
    margin-top: .2rem;
    color: #9db7ce;
    font-size: .65rem;
}

.layer-check {
    color: #7bd7b4;
    font-size: 1.1rem;
}

.data-bottom {
    display: flex;
    justify-content: space-around;
    gap: .5rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(255,255,255,.09);
    color: #e7bd62;
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.web-stack {
    display: grid;
    gap: .55rem;
    padding: 1.15rem 0 .9rem;
}

.web-layer {
    display: grid;
    grid-template-columns: 1.7rem 1fr 2.2rem;
    gap: .65rem;
    align-items: center;
    padding: .75rem .8rem;
    border: 1px solid rgba(115,177,230,.2);
    border-radius: .65rem;
    background: rgba(5,18,31,.62);
}

    .web-layer > span {
        color: #e7bd62;
        font-size: .7rem;
        font-weight: 900;
    }

    .web-layer b, .web-layer small {
        display: block;
    }

    .web-layer b {
        font-size: .77rem;
    }

    .web-layer small {
        margin-top: .2rem;
        color: #9db7ce;
        font-size: .64rem;
    }

    .web-layer strong {
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border: 1px solid rgba(231,189,98,.35);
        border-radius: .5rem;
        color: #e7bd62;
        font-size: .62rem;
    }

.web-metric-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(255,255,255,.09);
}

    .web-metric-row > div {
        display: flex;
        flex-direction: column;
        gap: .2rem;
    }

    .web-metric-row b {
        color: #f0c96f;
        font-size: 1.25rem;
    }

    .web-metric-row small {
        color: #91abc2;
        font-size: .63rem;
        line-height: 1.45;
    }

.brand-board {
    padding: 1.2rem 0 .2rem;
}

.brand-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(115,177,230,.22);
    border-radius: .8rem;
    background: linear-gradient(120deg,#091a2b,#153b5c);
}

.brand-mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 4rem;
    height: 4rem;
    border: 1px solid rgba(231,189,98,.5);
    border-radius: 1rem;
    color: #f3f7fb;
    font-size: 2rem;
    font-weight: 900;
    box-shadow: inset 0 0 18px rgba(231,189,98,.1);
}

    .brand-mark span {
        color: #e7bd62;
    }

.brand-main b, .brand-main small {
    display: block;
}

.brand-main b {
    font-size: .8rem;
    letter-spacing: .08em;
}

.brand-main small {
    margin-top: .35rem;
    color: #a7c0d6;
    font-size: .58rem;
    letter-spacing: .04em;
}

.swatches {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: .5rem;
    margin: 1rem 0;
}

    .swatches > div {
        min-width: 0;
    }

    .swatches i {
        display: block;
        height: 2.6rem;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: .4rem;
    }

    .swatches span, .swatches small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .swatches span {
        margin-top: .35rem;
        color: #d6e5f2;
        font-size: .62rem;
    }

    .swatches small {
        color: #7e9cb7;
        font-size: .55rem;
    }

.brand-principles {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

    .brand-principles span {
        padding: .4rem .65rem;
        border-radius: 999px;
        background: #0c2a44;
        color: #bcd5e9;
        font-size: .66rem;
    }

.identity-map {
    padding: 1.2rem 0 .3rem;
    text-align: center;
}

.identity-node {
    padding: .9rem;
    border: 1px solid rgba(115,177,230,.28);
    border-radius: .7rem;
    background: rgba(5,18,31,.7);
}

    .identity-node > span {
        display: block;
        color: #e7bd62;
        font-size: .6rem;
        letter-spacing: .1em;
        font-weight: 900;
    }

    .identity-node b, .identity-node small {
        display: block;
    }

    .identity-node b {
        margin: .3rem 0;
        font-size: .9rem;
    }

    .identity-node small {
        color: #9db7ce;
        font-size: .66rem;
    }

.sync-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: .5rem;
    color: #e7bd62;
}

    .sync-link span {
        color: #9db7ce;
        font-size: .65rem;
    }

    .sync-link b {
        font-size: 1.3rem;
    }

.identity-down {
    padding: .55rem;
    color: #9fc3df;
    font-size: .68rem;
}

.identity-app {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem;
    border: 1px solid rgba(231,189,98,.38);
    border-radius: .7rem;
    background: linear-gradient(100deg,#123453,#0a2035);
    text-align: left;
}

.app-icon {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: .5rem;
    background: #e7bd62;
    color: #071728;
    font-weight: 900;
}

.identity-app b, .identity-app small {
    display: block;
}

.identity-app b {
    font-size: .78rem;
}

.identity-app small {
    color: #a4bdd2;
    font-size: .62rem;
    margin-top: .2rem;
}

.app-lock {
    margin-left: auto;
    color: #e7bd62;
}

.identity-rbac {
    display: flex;
    justify-content: space-around;
    gap: .4rem;
    padding-top: .8rem;
    color: #8fb7d8;
    font-size: .61rem;
    font-weight: 800;
}

.roadmap {
    padding: 1.2rem .3rem .3rem;
}

.road-step {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.road-dot {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid rgba(98,177,255,.4);
    border-radius: 50%;
    background: #103452;
    color: #9bd2fb;
    font-size: .72rem;
    font-weight: 900;
}

.gold-dot {
    color: #071728;
    background: #e7bd62;
    border-color: #e7bd62;
}

.road-step small, .road-step b, .road-step span {
    display: block;
}

.road-step small {
    color: #e7bd62;
    font-size: .57rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.road-step b {
    margin: .15rem 0;
    font-size: .82rem;
}

.road-step span {
    color: #9db7ce;
    font-size: .65rem;
}

.road-line {
    height: 1.4rem;
    margin-left: 1.12rem;
    border-left: 1px dashed rgba(117,174,223,.45);
}

.finding-table {
    padding: 1rem 0 .3rem;
}

.finding-head, .finding-row {
    display: grid;
    grid-template-columns: 1.8rem 1fr 6.4rem;
    gap: .55rem;
    align-items: center;
}

.finding-head {
    padding: .5rem .6rem;
    color: #789ab6;
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.finding-row {
    padding: .75rem .6rem;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(4,15,26,.3);
}

.finding-id {
    color: #e7bd62;
    font-size: .75rem;
}

.finding-row strong, .finding-row small {
    display: block;
}

.finding-row strong {
    font-size: .7rem;
}

.finding-row small {
    margin-top: .18rem;
    color: #91abc2;
    font-size: .59rem;
}

.remedy {
    padding: .35rem .4rem;
    border-radius: .35rem;
    background: #163c54;
    color: #b6def9;
    text-align: center;
    font-size: .58rem;
    font-weight: 800;
}

.timeline {
    position: relative;
    padding: 1.15rem .1rem .1rem 1rem;
}

    .timeline:before {
        content: "";
        position: absolute;
        left: 1.35rem;
        top: 1.55rem;
        bottom: .8rem;
        width: 1px;
        background: linear-gradient(#58aee9,#e7bd62);
    }

.time-event {
    position: relative;
    padding: 0 0 1.2rem 2.1rem;
}

.time-dot {
    position: absolute;
    left: -.03rem;
    top: .1rem;
    width: .75rem;
    height: .75rem;
    border: 2px solid #63b5eb;
    border-radius: 50%;
    background: #0b2135;
    z-index: 1;
}

.time-event small {
    color: #e7bd62;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.time-event b {
    display: block;
    margin: .2rem 0;
    font-size: .78rem;
}

.time-event p {
    margin: 0;
    color: #9db7ce;
    font-size: .66rem;
    line-height: 1.5;
}

.time-alert .time-dot {
    border-color: #f3a16c;
}

.time-gold .time-dot {
    border-color: #e7bd62;
}

.video-stage {
    position: relative;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1.5rem;
    border-radius: .7rem;
    background: radial-gradient(circle at 50% 40%,#174b70 0%,#0a2741 40%,#03101e 78%);
    text-align: center;
}

.video-orbit {
    position: absolute;
    width: 18rem;
    height: 18rem;
    border: 1px solid rgba(112,196,245,.25);
    border-radius: 50%;
}

.orbit-one {
    transform: scaleX(1.5) rotate(-25deg);
}

.orbit-two {
    transform: scaleX(.65) rotate(32deg);
    border-color: rgba(231,189,98,.3);
}

.video-emblem {
    z-index: 1;
    display: grid;
    place-items: center;
    width: 4.3rem;
    height: 4.3rem;
    border: 1px solid rgba(231,189,98,.7);
    border-radius: 1.1rem;
    color: #f6f8fc;
    font-size: 2.3rem;
    font-weight: 900;
    box-shadow: 0 0 30px rgba(44,149,218,.22);
}

    .video-emblem span {
        color: #e7bd62;
    }

.video-overline {
    z-index: 1;
    margin: 1.1rem 0 .4rem;
    color: #a6c9e5;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .2em;
}

.video-stage h2 {
    z-index: 1;
    margin: 0;
    color: #f5f8fc;
    font-size: clamp(1.6rem,3vw,2.3rem);
    line-height: 1.05;
}

    .video-stage h2 span {
        color: #e7bd62;
    }

.video-progress {
    z-index: 1;
    width: 75%;
    height: 3px;
    margin: 1.3rem 0 .8rem;
    border-radius: 9px;
    background: rgba(255,255,255,.16);
}

    .video-progress i {
        display: block;
        width: 28%;
        height: 100%;
        border-radius: 9px;
        background: #e7bd62;
    }

.video-stage > small {
    z-index: 1;
    color: #83a6c2;
    font-size: .57rem;
    letter-spacing: .1em;
}

@media(max-width:950px) {
    .case-hero-grid {
        grid-template-columns: 1fr
    }

    .case-intro h1 {
        max-width: 19ch
    }

    .case-visual {
        min-height: 300px
    }

    .case-work-grid {
        grid-template-columns: 1fr
    }

    .case-outcome {
        position: static
    }

    .overview-grid {
        grid-template-columns: 1fr;
        gap: 1rem
    }
}

@media(max-width:600px) {
    .case-hero {
        padding-top: 2.4rem
    }

    .case-visual {
        padding: .85rem;
        min-height: auto
    }

    .case-next-inner {
        align-items: flex-start;
        flex-direction: column
    }

    .flowline {
        gap: .2rem
    }

    .flow-node {
        padding: .6rem .35rem
    }

        .flow-node strong {
            font-size: .7rem
        }

        .flow-node small {
            font-size: .56rem
        }

    .arch-split {
        grid-template-columns: 1fr
    }

    .arch-row {
        flex-direction: column
    }

    .swatches {
        gap: .3rem
    }

        .swatches span {
            font-size: .56rem
        }

    .finding-head, .finding-row {
        grid-template-columns: 1.5rem 1fr 5.1rem;
        gap: .35rem
    }

    .remedy {
        font-size: .52rem
    }

    .story-section {
        grid-template-columns: 2.5rem 1fr;
        gap: .7rem
    }

    .story-index {
        width: 2.2rem;
        height: 2.2rem
    }
}

@media(prefers-reduced-motion:reduce) {
    .terminal-cursor {
        animation: none
    }
}