:root{
  --bg:#fbfaf8;--surface:#fff;--text:#191919;--muted:#6b6b6b;--line:#e9e4dd;
  --accent:#e64626;--accent-dark:#b9351c;--soft:#fff0eb;--nav:rgba(251,250,248,.9);
  --shadow:0 18px 45px rgba(38,29,24,.08);--radius:22px;--max:1180px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin:0 auto}.section{padding:88px 0}.section-tight{padding:50px 0}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent-dark);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}.eyebrow:before{content:"";width:26px;height:2px;background:var(--accent)}
.nav{position:sticky;top:0;z-index:50;background:var(--nav);backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,.05)}.nav-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-weight:900;letter-spacing:-.03em;font-size:1.15rem}.brand span{color:var(--accent)}.nav-links{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}.nav-links a{display:block;padding:10px 12px;border-radius:999px;color:#454545;font-size:.94rem}.nav-links a:hover,.nav-links a.active{background:#fff;color:#111}.nav-cta{border:1px solid var(--line)}.menu-btn{display:none;border:0;background:transparent;font-size:1.35rem}
.hero{padding:76px 0 58px}.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:60px;align-items:center}.display{font-size:clamp(3.5rem,7vw,6.8rem);line-height:.94;letter-spacing:-.065em;margin:0 0 24px}.accent{color:var(--accent)}.lead{font-size:1.18rem;color:#4d4d4d;max-width:760px}.hero-kicker,.tag-row,.contact-chips{display:flex;gap:10px;flex-wrap:wrap}.pill,.tag,.contact-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-size:.86rem}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;font-weight:800;border:1px solid var(--line)}.btn-primary{background:var(--text);color:#fff;border-color:var(--text)}.btn-primary:hover{background:#000}.btn-ghost{background:#fff}.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.profile-shell{background:#fff;border:1px solid var(--line);border-radius:30px;padding:18px;box-shadow:var(--shadow)}.profile-img{aspect-ratio:4/5;object-fit:cover;border-radius:22px}.profile-caption{padding:18px 6px 4px}.profile-caption h3{font-size:1.35rem;margin:0}.profile-caption p{margin:4px 0;color:var(--muted)}.contact-stack{display:grid;gap:9px;margin-top:16px}.contact-row{display:flex;gap:10px;align-items:flex-start;font-size:.93rem}.contact-row b{min-width:72px}.contact-row a{color:var(--accent-dark);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff;border-radius:var(--radius);overflow:hidden}.stat{padding:26px;border-right:1px solid var(--line)}.stat:last-child{border-right:0}.stat strong{display:block;font-size:1.7rem;letter-spacing:-.03em}.stat span{font-size:.88rem;color:var(--muted)}
.split-heading{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:start;margin-bottom:36px}.split-heading h2,.page-hero h1{font-size:clamp(2.4rem,5vw,4.5rem);line-height:1.02;letter-spacing:-.05em;margin:0}.split-heading p{margin-top:0}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 10px 28px rgba(0,0,0,.025)}.card h3{font-size:1.25rem;margin:8px 0 10px;letter-spacing:-.02em}.card p{color:#555}.card-index{font-size:.74rem;font-weight:800;letter-spacing:.12em;color:var(--accent-dark);text-transform:uppercase}.metric-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}.metric{padding:14px;background:var(--soft);border-radius:14px}.metric strong{display:block;font-size:1.3rem}.metric span{font-size:.78rem;color:#6b5148}.project-link{display:inline-block;margin-top:18px;font-weight:800;color:var(--accent-dark)}
.page-hero{padding:78px 0 48px}.breadcrumb{color:var(--muted);font-size:.88rem;margin-bottom:24px}.page-hero .lead{max-width:850px}.note{padding:18px 20px;border-left:4px solid var(--accent);background:var(--soft);border-radius:10px;color:#55423d}
.timeline{position:relative;margin-top:20px}.timeline:before{content:"";position:absolute;left:152px;top:4px;bottom:4px;width:1px;background:var(--line)}.timeline-item{display:grid;grid-template-columns:130px 1fr;gap:44px;padding:0 0 42px;position:relative}.timeline-item:before{content:"";position:absolute;left:146px;top:9px;width:13px;height:13px;background:var(--accent);border:3px solid var(--bg);border-radius:50%}.date{font-size:.84rem;font-weight:800;color:var(--accent-dark);padding-top:5px}.role{font-weight:900;font-size:1.24rem}.org{color:#565656;font-weight:700;margin:3px 0 12px}.org .cn{color:var(--muted);font-weight:600}.location{display:inline-block;margin-left:8px;color:var(--muted);font-size:.88rem;font-weight:500}.timeline-item ul{margin:10px 0 0;padding-left:20px}.timeline-item li{margin:8px 0;color:#4e4e4e}
.experience-block{margin:34px 0 0}.experience-detail{display:grid;grid-template-columns:.72fr 1.28fr;gap:22px;align-items:start;margin-top:20px}.evidence-panel{background:#1e1e1e;color:#fff;border-radius:20px;padding:24px}.evidence-panel h4{margin:0 0 14px}.evidence-panel p{color:#d9d9d9;font-size:.92rem}.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.kpi{background:#2c2c2c;border-radius:12px;padding:13px}.kpi strong{display:block;font-size:1.15rem}.kpi span{font-size:.74rem;color:#c7c7c7}
.chart{margin-top:18px}.bar-line{display:grid;grid-template-columns:56px 1fr 54px;gap:10px;align-items:center;margin:9px 0}.bar-label,.bar-value{font-size:.78rem;color:#777}.bar-track{height:10px;background:#eee7e2;border-radius:999px;overflow:hidden}.bar-fill{height:100%;background:var(--accent);border-radius:999px}.bar-fill.secondary{background:#202020}.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:.78rem;color:#777}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;background:var(--accent)}.legend i.dark{background:#202020}
.flow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:18px}.flow span{background:#fff;border:1px solid var(--line);padding:9px 12px;border-radius:999px;font-size:.8rem;font-weight:700}.flow b{color:var(--accent)}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.course-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}.course-card h3{margin-top:0}.course-card ul{padding-left:18px;margin-bottom:0;color:#535353}.course-card li{margin:7px 0}
.personality{display:grid;grid-template-columns:.45fr 1.55fr;gap:24px;align-items:center}.entj{font-size:clamp(3rem,8vw,6rem);font-weight:950;letter-spacing:-.06em;color:var(--accent)}.strengths{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.strength{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:.86rem;font-weight:700}
.map-wrap{background:#121212;border-radius:28px;padding:24px;overflow:hidden;box-shadow:var(--shadow)}.map-head{display:flex;justify-content:space-between;gap:20px;color:#fff;align-items:flex-start;margin-bottom:10px}.map-head p{color:#bbb;margin:5px 0 0;max-width:700px}.world-map{position:relative;aspect-ratio:2/1;min-height:360px}.world-map svg{position:absolute;inset:0;width:100%;height:100%}.land{fill:#2a2a2a;stroke:#3b3b3b;stroke-width:1}.map-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;border:3px solid #fff;background:var(--accent);cursor:pointer;box-shadow:0 0 0 5px rgba(230,70,38,.18);z-index:4}.map-pin:hover,.map-pin.active{transform:translate(-50%,-50%) scale(1.28)}.map-label{position:absolute;left:calc(var(--x) + var(--dx, 10px));top:calc(var(--y) + var(--dy, -18px));transform:translate(0,-50%);background:rgba(255,255,255,.96);color:#171717;border-radius:8px;padding:4px 7px;font-size:.68rem;font-weight:800;white-space:nowrap;z-index:3;box-shadow:0 4px 14px rgba(0,0,0,.2)}.map-info{margin-top:14px;background:#fff;border-radius:14px;padding:14px 16px;display:flex;justify-content:space-between;gap:20px;align-items:center}.map-info strong{display:block}.map-info span{color:#666;font-size:.88rem}.region-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.region-list span{background:#232323;color:#ddd;border:1px solid #333;border-radius:999px;padding:6px 10px;font-size:.78rem}
.project-context{padding:13px 14px;background:#f7f3ef;border-radius:12px;font-size:.88rem;color:#504a46;margin:12px 0}.project-card .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.fact-mini{padding:12px;background:#faf7f4;border-radius:12px}.fact-mini strong{display:block}.fact-mini span{font-size:.72rem;color:#777}.project-card h3{font-size:1.42rem}.project-card p{margin:9px 0}.project-card .where{font-size:.82rem;color:var(--accent-dark);font-weight:800;margin:6px 0 12px}.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.filter-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;cursor:pointer;font-weight:800;color:#555}.filter-btn.active{background:#1e1e1e;color:#fff;border-color:#1e1e1e}.is-hidden{display:none!important}
.debate-card{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}.badge-big{width:118px;height:118px;border-radius:50%;background:var(--soft);display:grid;place-items:center;text-align:center;font-weight:950;color:var(--accent-dark);line-height:1.05}.usyd-link{color:var(--accent-dark);font-weight:850;border-bottom:1px solid rgba(230,70,38,.3)}
.footer{border-top:1px solid var(--line);padding:28px 0 44px;color:#6a6a6a}.footer-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.small{font-size:.82rem;color:#777}.privacy-note{font-size:.78rem;color:#888;margin-top:12px}
.reveal{opacity:0;transform:translateY(14px);transition:.6s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.hero-grid,.split-heading,.experience-detail,.personality{grid-template-columns:1fr}.grid-3,.course-grid{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}.timeline:before{left:7px}.timeline-item{grid-template-columns:1fr;padding-left:34px;gap:6px}.timeline-item:before{left:0}.nav-links{display:none;position:absolute;left:20px;right:20px;top:70px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.menu-btn{display:block}.world-map{min-height:320px}.map-label{font-size:.62rem}}
@media(max-width:620px){.container{width:min(100% - 26px,var(--max))}.section{padding:66px 0}.hero{padding-top:52px}.display{font-size:3.35rem}.grid-2,.grid-3,.course-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid var(--line)}.stat:last-child{border-bottom:0}.project-card .facts{grid-template-columns:1fr 1fr}.map-wrap{padding:14px}.world-map{min-height:300px;overflow:auto}.map-label{display:none}.map-pin{width:15px;height:15px}.debate-card{grid-template-columns:1fr}.badge-big{width:96px;height:96px}}
/* =========================================================
   EXPERIENCE REDESIGN
   ========================================================= */

.page-hero {
    padding: 150px 0 70px;
}

.page-hero h1 {
    margin: 10px 0 20px;
}

.language-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
}

.language-switcher button {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.language-switcher button.active {
    color: var(--text);
}


/* Career tree */

.career-tree {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 42px;
}

.career-tree::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background: var(--border);
}

.career-tree-category {
    position: relative;
    padding-top: 26px;
}

.career-tree-category::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 28px;
    background: var(--border);
    top: -28px;
    left: 50%;
}

.career-tree-category-title {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    font-weight: 750;
}

.career-tree-branches {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 30px;
}

.career-tree-branches::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 24px;
    background: var(--border);
}

.career-tree-company {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--background);
    color: var(--text);
    padding: 12px 13px;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.35;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.career-tree-company:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}


/* Timeline */

.experience-overview-timeline {
    position: relative;
    margin-top: 48px;
}

.experience-overview-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 170px;
    width: 1px;
    background: var(--border);
}

.experience-overview-card {
    position: relative;
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 50px;
    margin-bottom: 34px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.experience-overview-card::before {
    content: "";
    position: absolute;
    left: 164px;
    top: 38px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--accent);
    border: 4px solid var(--background);
}

.experience-date {
    padding-top: 26px;
    text-align: right;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-muted);
}

.experience-card-main {
    padding: 28px 30px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card);
}

.experience-company-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.experience-company-row h2 {
    margin: 0 0 5px;
    font-size: 1.25rem;
}

.experience-role {
    margin: 0;
    font-weight: 650;
}

.experience-location {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.experience-logo,
.experience-logo-placeholder {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--background);
}

.experience-logo {
    object-fit: contain;
    padding: 8px;
}

.experience-logo-placeholder {
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1rem;
    color: var(--accent);
}

.experience-bullets {
    margin: 22px 0 18px;
    padding-left: 20px;
}

.experience-bullets li {
    margin-bottom: 8px;
    line-height: 1.65;
}

.experience-detail-link {
    display: inline-block;
    margin-top: 18px;
    font-weight: 750;
    text-decoration: none;
}

.experience-overview-card.is-highlighted
.experience-card-main {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--tag-bg);
}


/* Responsive */

@media (max-width: 900px) {

    .career-tree {
        grid-template-columns: repeat(2, 1fr);
    }

    .career-tree::before,
    .career-tree-category::before {
        display: none;
    }

    .experience-overview-timeline::before {
        left: 10px;
    }

    .experience-overview-card {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-left: 36px;
    }

    .experience-overview-card::before {
        left: 4px;
        top: 32px;
    }

    .experience-date {
        text-align: left;
        padding-top: 0;
    }
}

@media (max-width: 600px) {

    .career-tree {
        grid-template-columns: 1fr;
    }

    .experience-card-main {
        padding: 22px;
    }

    .experience-company-row {
        align-items: flex-start;
    }

    .experience-logo,
    .experience-logo-placeholder {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
    }

}/* =========================================================
   EXPERIENCE DETAIL PAGE
   ========================================================= */

.detail-hero {
    padding: 135px 0 58px;
    border-bottom: 1px solid var(--border);
}


.detail-back {
    display: inline-flex;
    margin-bottom: 34px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-muted);
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.detail-back:hover {
    color: var(--accent);
    transform: translateX(-3px);
}


.detail-company-header {
    display: flex;
    align-items: center;
    gap: 26px;
}


.detail-company-info h1 {
    margin: 8px 0 10px;
    font-size: clamp(
        2.2rem,
        6vw,
        4.8rem
    );
    line-height: 1.02;
}


.detail-role {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}


.detail-location {
    margin: 7px 0 0;
    color: var(--text-muted);
}


.detail-company-logo,
.detail-company-logo-placeholder {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--card);
}


.detail-company-logo {
    object-fit: contain;
    padding: 14px;
}


.detail-company-logo-placeholder {
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent);
}


.detail-tags {
    margin-top: 30px;
}


.detail-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 70px;
    align-items: start;
}


.detail-sidebar {
    position: sticky;
    top: 110px;
}


.detail-sidebar-card {
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card);
}


.detail-sidebar-card h3 {
    margin: 10px 0 26px;
    line-height: 1.35;
}


.detail-sidebar-item {
    padding: 16px 0;
    border-top: 1px solid var(--border);
}


.detail-sidebar-item span {
    display: block;
    margin-bottom: 5px;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}


.detail-sidebar-item strong {
    display: block;
    font-size: 0.91rem;
    line-height: 1.5;
}


.detail-content {
    min-width: 0;
}


.detail-summary {
    padding: 32px;
    margin-bottom: 54px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--card);
}


.detail-summary h2 {
    margin: 10px 0 20px;
}


.detail-highlight-list,
.detail-section-list {
    padding-left: 21px;
    margin-bottom: 0;
}


.detail-highlight-list li,
.detail-section-list li {
    margin-bottom: 11px;
    line-height: 1.75;
}


.detail-section-heading {
    margin-bottom: 30px;
}


.detail-section-heading h2 {
    margin-top: 8px;
}


.detail-section {
    padding: 30px 0;
    border-top: 1px solid var(--border);
}


.detail-section:first-of-type {
    border-top: 0;
}


.detail-section h2 {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 1.45rem;
}


.detail-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 24px;
}


.detail-metric {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
}


.detail-metric strong {
    display: block;
    margin-bottom: 7px;
    font-size: 1.6rem;
}


.detail-metric span {
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--text-muted);
}


@media (max-width: 900px) {

    .detail-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .detail-sidebar {
        position: static;
    }

    .detail-sidebar-card {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .detail-sidebar-card > .eyebrow,
    .detail-sidebar-card > h3 {
        grid-column: 1 / -1;
    }

}


@media (max-width: 620px) {

    .detail-company-header {
        align-items: flex-start;
    }

    .detail-company-logo,
    .detail-company-logo-placeholder {
        flex-basis: 70px;
        width: 70px;
        height: 70px;
        border-radius: 16px;
    }

    .detail-sidebar-card {
        display: block;
    }

    .detail-summary {
        padding: 24px;
    }

    .detail-metric-grid {
        grid-template-columns: 1fr;
    }

/* DETAIL VISUALISATIONS */

.detail-visuals-section {
    margin-top: 54px;
}

.detail-visual {
    margin-top: 28px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--card);
}

.detail-visual h2 {
    margin-top: 0;
    margin-bottom: 28px;
    font-size: 1.35rem;
}

.detail-visual-caption {
    margin: 24px 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}


/* Bar charts */

.portfolio-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.portfolio-bar-label {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 9px;
}

.portfolio-bar-track {
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tag-bg);
}

.portfolio-bar-fill {
    height: 100%;
    min-width: 8px;
    border-radius: inherit;
    background: var(--accent);
}


/* Process diagram */

.process-flow {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.process-step {
    position: relative;
    min-height: 115px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--background);
}

.process-step:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.process-step span {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent);
}

.process-step strong {
    font-size: 0.88rem;
    line-height: 1.4;
}

@media (max-width: 900px) {

    .process-flow {
        grid-template-columns: repeat(3, 1fr);
    }

    .process-step::after {
        display: none;
    }
}

@media (max-width: 600px) {

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

    .detail-visual {
        padding: 22px;
    }
}/* =========================================================
   DETAIL VISUALISATIONS
   ========================================================= */

.detail-visuals-section {
    margin-top: 54px;
}

.detail-visual {
    margin-top: 28px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--card);
}

.detail-visual h2 {
    margin-top: 0;
    margin-bottom: 28px;
    font-size: 1.35rem;
}

.detail-visual-caption {
    margin: 24px 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.portfolio-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.portfolio-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 9px;
}

.portfolio-bar-track {
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tag-bg);
}

.portfolio-bar-fill {
    height: 100%;
    min-width: 8px;
    border-radius: inherit;
    background: var(--accent);
    transition: width 0.8s ease;
}

.process-flow {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.process-step {
    position: relative;
    min-height: 115px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--background);
}

.process-step:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: -11px;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.process-step span {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent);
}

.process-step strong {
    font-size: 0.88rem;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .process-flow {
        grid-template-columns: repeat(3, 1fr);
    }

    .process-step::after {
        display: none;
    }
}

@media (max-width: 600px) {
    .process-flow {
        grid-template-columns: 1fr;
    }

    .detail-visual {
        padding: 22px;
    }
}