:root{--blue:#0b5ed7;--deep:#0c2c55;--ink:#10243e;--muted:#65768a;--sky:#eef8ff;--sky2:#dff2ff;--line:#d7e7f3;--white:#fff}
html{scroll-behavior:smooth}body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#f7fbff}h1,h2,h3{letter-spacing:-.035em}a{text-decoration:none}.container-xxl{max-width:1320px}.bd-navbar{background:rgba(247,251,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(11,94,215,.08)}.navbar{min-height:80px}.brand-badge{width:42px;height:42px;border-radius:12px;display:inline-grid;place-items:center;background:linear-gradient(135deg,#0d6efd,#57b8ff);color:#fff;font-weight:800;box-shadow:0 8px 25px rgba(13,110,253,.2)}.brand-text{display:flex;flex-direction:column;line-height:1.1}.brand-text small{font-size:.69rem;color:var(--muted);font-weight:500;margin-top:4px}.navbar .nav-link{font-weight:600;color:#264564;padding:.65rem .78rem!important}.navbar .nav-link:hover,.navbar .nav-link:focus{color:var(--blue)}.dropdown-menu{border:1px solid var(--line);box-shadow:0 18px 45px rgba(18,64,105,.13);border-radius:16px}.mega-menu{min-width:310px}.dropdown-item{padding:.6rem .8rem;border-radius:8px;color:#35516d}.dropdown-item:hover{background:var(--sky);color:var(--blue)}
.hero-home{background:radial-gradient(circle at 85% 20%,#ccecff 0,transparent 30%),linear-gradient(135deg,#f8fcff 0%,#eaf6ff 58%,#f5fbff 100%);border-bottom:1px solid var(--line)}.py-lg-6{padding-top:6.5rem!important;padding-bottom:6.5rem!important}.hero-home h1,.page-hero h1{font-family:'Libre Baskerville',serif;line-height:1.12}.max-copy{max-width:760px}.eyebrow{font-size:.73rem;letter-spacing:.15em;font-weight:800;color:#3974aa}.hero-chips,.tag-cloud,.industry-ribbon{display:flex;flex-wrap:wrap;gap:.6rem}.hero-chips span,.tag-cloud span,.industry-ribbon span{background:#fff;border:1px solid var(--line);color:#315675;border-radius:999px;padding:.48rem .72rem;font-size:.83rem;font-weight:600}.executive-panel{position:relative;background:rgba(255,255,255,.9);border:1px solid #cfe7f8;border-radius:26px;padding:2rem;box-shadow:0 28px 70px rgba(18,74,121,.16);overflow:hidden}.panel-accent{position:absolute;left:0;top:0;right:0;height:6px;background:linear-gradient(90deg,#0d6efd,#70c9ff)}.letterspace{letter-spacing:.13em}.metric{background:#f0f8ff;border:1px solid #d9ecfa;border-radius:18px;padding:1.1rem}.metric strong{font-size:1.55rem;display:block;color:var(--deep)}.metric span{font-size:.75rem;color:var(--muted)}.section-intro{max-width:820px}.section-intro h2,.page-hero h1{font-size:clamp(2.25rem,4vw,4.25rem)}.section-intro p,.page-hero p{color:var(--muted);font-size:1.08rem}.feature-card{height:100%;background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.6rem;transition:.25s}.feature-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(18,74,121,.10)}.feature-card i{font-size:1.7rem;color:var(--blue);display:inline-block;margin-bottom:1rem}.feature-card h3{font-size:1.1rem}.feature-card p{color:var(--muted);margin:0}.bg-soft-blue{background:linear-gradient(180deg,#eaf7ff,#eff9ff)}.industry-ribbon span{padding:.7rem 1rem;background:rgba(255,255,255,.85)}.era-stack{display:grid;gap:.75rem}.era-stack>div{display:flex;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem}.era-stack b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#e7f4ff;color:var(--blue)}.era-stack span{display:flex;flex-direction:column}.era-stack small{color:var(--muted);margin-top:3px}.bg-dark-blue{background:linear-gradient(145deg,#08213e,#0a3a6f)}.media-link{display:grid;grid-template-columns:42px 1fr 20px;gap:1rem;align-items:center;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:1rem}.media-link:hover{background:rgba(255,255,255,.13);color:#fff}.media-link>i:first-child{font-size:1.35rem}.media-link span{display:flex;flex-direction:column}.media-link small{color:rgba(255,255,255,.55)}
.page-hero{padding:5.5rem 0 4.5rem;background:radial-gradient(circle at 80% 10%,#ccecff 0,transparent 32%),linear-gradient(135deg,#f7fcff,#e8f5ff);border-bottom:1px solid var(--line)}.page-hero p{max-width:850px;margin-top:1.2rem}.timeline-modern{position:relative;margin-left:1rem;border-left:2px solid #b9dff6}.timeline-modern article{position:relative;padding:0 0 3.5rem 3rem;max-width:980px}.timeline-modern article:before{content:"";position:absolute;left:-9px;top:.3rem;width:16px;height:16px;background:#fff;border:4px solid var(--blue);border-radius:50%}.timeline-modern article>span{font-size:.75rem;font-weight:800;letter-spacing:.14em;color:var(--blue)}.timeline-modern h2{margin-top:.4rem}.timeline-modern p{color:var(--muted);font-size:1.02rem}.skill-line{font-size:.86rem;font-weight:600;color:#467394}.vertical-section{padding:1rem 0 4rem;scroll-margin-top:110px}.vertical-section+.vertical-section{border-top:1px solid var(--line);padding-top:4rem}.vertical-head{display:flex;gap:1rem;align-items:center;margin-bottom:1.5rem}.vertical-head>i{width:54px;height:54px;display:grid;place-items:center;border-radius:15px;background:#e5f5ff;color:var(--blue);font-size:1.5rem}.vertical-head h2{margin:0}.domain-card,.article-card,.contact-card{display:block;height:100%;background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.5rem;box-shadow:0 10px 30px rgba(20,70,110,.045)}.domain-card h3{font-size:1.08rem}.domain-card p,.article-card p,.contact-card p{color:var(--muted);margin-bottom:0}.tech-grid{display:grid;gap:1.25rem}.tech-domain{scroll-margin-top:105px;display:grid;grid-template-columns:72px 1fr;gap:1.4rem;background:#fff;border:1px solid var(--line);border-radius:22px;padding:1.8rem}.tech-icon{width:64px;height:64px;border-radius:18px;background:#e8f5ff;color:var(--blue);display:grid;place-items:center;font-size:1.7rem}.tech-domain p{color:var(--muted);max-width:900px}.book-card{height:100%;display:flex;gap:1.4rem;background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.5rem}.book-spine{flex:0 0 74px;height:104px;border-radius:8px 15px 15px 8px;background:linear-gradient(160deg,#0d6efd,#0c3f77);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.2rem;box-shadow:9px 8px 0 #dcefff}.book-card p{color:var(--muted);margin-bottom:0}.article-date{font-size:.75rem;color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:.1em}.article-card h2{font-size:1.3rem;margin-top:.55rem}.article-card a{display:inline-block;margin-top:1rem;font-weight:700}.cta-panel{background:linear-gradient(120deg,#e5f5ff,#fafdff);border:1px solid var(--line);border-radius:22px;padding:1.8rem;display:flex;justify-content:space-between;gap:2rem;align-items:center}.video-category{display:grid;grid-template-columns:64px 1fr;gap:1.25rem;height:100%;background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.5rem}.video-icon{width:58px;height:58px;border-radius:16px;background:#e8f5ff;color:var(--blue);display:grid;place-items:center;font-size:1.5rem}.video-category h2{font-size:1.3rem}.video-category p{color:var(--muted)}.video-category a{font-weight:700}.contact-card{transition:.25s;color:var(--ink)}.contact-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(20,70,110,.1)}.contact-card>i{font-size:2rem;color:var(--blue)}.contact-card h2{margin-top:1rem}.contact-card span{display:inline-block;margin-top:1rem;color:var(--blue);font-weight:700}.site-footer{background:#eef7fd;border-top:1px solid var(--line)}.site-footer h6{font-weight:800}.site-footer a{display:block;color:#56718a;margin:.45rem 0}.site-footer a:hover{color:var(--blue)}
@media(max-width:991px){.navbar-collapse{padding:1rem 0}.py-lg-6{padding-top:4rem!important;padding-bottom:4rem!important}.page-hero{padding:4rem 0 3rem}.cta-panel{align-items:flex-start;flex-direction:column}}@media(max-width:576px){.brand-text small{display:none}.hero-home h1{font-size:2.55rem}.tech-domain,.video-category{grid-template-columns:1fr}.timeline-modern article{padding-left:2rem}.book-card{flex-direction:column}.book-spine{width:74px}.page-hero h1{font-size:2.45rem}}

/* Homepage portrait and executive communication */
.portrait-card{position:relative;border-radius:28px;overflow:hidden;border:1px solid #cfe7f8;background:#fff;box-shadow:0 28px 70px rgba(18,74,121,.18);max-width:470px;margin-left:auto}.hero-portrait{display:block;width:100%;height:560px;object-fit:cover;object-position:center 18%}.portrait-overlay{position:absolute;left:0;right:0;bottom:0;padding:4.5rem 1.5rem 1.4rem;background:linear-gradient(180deg,transparent,rgba(6,31,57,.93));color:#fff;display:flex;flex-direction:column;gap:.3rem}.portrait-overlay span{opacity:.78}.portrait-overlay strong{font-size:1.03rem;line-height:1.4}.profile-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;max-width:470px;margin-left:auto}.profile-metrics>div{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:15px;padding:.85rem .75rem;text-align:center}.profile-metrics strong{display:block;color:var(--deep);font-size:1.05rem}.profile-metrics span{display:block;color:var(--muted);font-size:.69rem;margin-top:.15rem}.hero-communication{max-width:760px;display:flex;align-items:flex-start;gap:.8rem;background:rgba(255,255,255,.66);border-left:4px solid var(--blue);border-radius:0 14px 14px 0;padding:.9rem 1rem;color:#3f5e79;font-size:.95rem;line-height:1.58}.hero-communication i{color:var(--blue);font-size:1.2rem;margin-top:.12rem}.hero-communication strong{color:var(--deep)}.communication-band{max-width:1080px;margin-left:auto;margin-right:auto;display:grid;grid-template-columns:64px 1fr;gap:1.25rem;align-items:start;background:linear-gradient(120deg,#e8f6ff,#fff);border:1px solid var(--line);border-radius:20px;padding:1.5rem 1.65rem;box-shadow:0 10px 30px rgba(20,70,110,.05)}.communication-band p{color:var(--muted)}.communication-icon{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:#fff;border:1px solid #d6eafb;color:var(--blue);font-size:1.5rem}@media(max-width:991px){.portrait-card,.profile-metrics{max-width:560px;margin-left:0}.hero-portrait{height:auto;max-height:680px}.hero-home .col-lg-5{max-width:620px}}@media(max-width:576px){.profile-metrics{grid-template-columns:1fr 1fr}.profile-metrics>div:last-child{grid-column:1/-1}.communication-band{grid-template-columns:1fr}.hero-communication{font-size:.9rem}.portrait-overlay{padding:3.8rem 1.1rem 1.1rem}}

/* Architecture portfolio */
.arch-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.arch-stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.15rem}.arch-stat strong{display:block;font-size:1.45rem;color:var(--deep)}.arch-stat span{color:var(--muted);font-size:.8rem}.architecture-filter .nav-link{border-radius:999px;font-weight:700;color:#365d7d}.architecture-filter .nav-link.active{background:var(--blue);color:#fff}.project-architecture-card{height:100%;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 14px 38px rgba(20,70,110,.06)}.project-architecture-card .card-body{padding:1.6rem}.project-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.project-meta span{font-size:.72rem;font-weight:800;letter-spacing:.04em;color:#38698f;background:#edf8ff;border:1px solid #d9ecfa;border-radius:999px;padding:.42rem .65rem}.architecture-placeholder{min-height:260px;border:2px dashed #abd5ef;border-radius:18px;background:linear-gradient(135deg,#f7fcff,#eaf7ff);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;color:#59809d}.architecture-placeholder i{font-size:2.4rem;color:#69aee0;margin-bottom:.65rem}.architecture-placeholder strong{color:#315b7d}.architecture-placeholder small{max-width:440px}.arch-stack{display:flex;flex-wrap:wrap;gap:.45rem}.arch-stack span{font-size:.76rem;font-weight:700;border-radius:8px;background:#f2f8fc;border:1px solid #dbeaf4;padding:.38rem .56rem;color:#496c88}.project-architecture-card .accordion-button{font-weight:700;background:#fbfdff;color:var(--deep)}.project-architecture-card .accordion-button:not(.collapsed){background:#edf8ff;color:var(--blue);box-shadow:none}.project-architecture-card .accordion-body{color:var(--muted);font-size:.92rem}.architecture-era{scroll-margin-top:108px}.era-heading{display:flex;align-items:center;gap:.9rem}.era-heading .era-year{min-width:90px;border-radius:999px;background:#e5f5ff;color:var(--blue);font-weight:800;text-align:center;padding:.5rem .8rem}.archive-placeholder-card{height:100%;border:1px dashed #a8cee8;background:rgba(255,255,255,.6);border-radius:20px;padding:1.4rem}.archive-placeholder-card i{font-size:1.6rem;color:#64a8d8}.architecture-principles .list-group-item{background:transparent;border-color:var(--line);padding:1rem 0}.architecture-principles i{color:var(--blue);margin-right:.55rem}.source-note{font-size:.82rem;color:var(--muted)}
@media(max-width:991px){.arch-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:576px){.arch-stats{grid-template-columns:1fr}.architecture-placeholder{min-height:210px}.era-heading{align-items:flex-start;flex-direction:column}}

/* Architecture project image gallery */
.architecture-gallery-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:1.6rem;box-shadow:0 14px 38px rgba(20,70,110,.06)}
.architecture-gallery-frame{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.architecture-gallery-frame:hover{transform:translateY(-4px);box-shadow:0 1rem 2.5rem rgba(20,63,107,.10);border-color:rgba(13,110,253,.25)}
.architecture-gallery-image{display:block;width:100%;height:380px;object-fit:contain;border-radius:12px;background:#f8fbff}
.architecture-gallery-placeholder{min-height:380px;border:2px dashed #abd5ef;border-radius:18px;background:linear-gradient(135deg,#f7fcff,#eaf7ff);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;color:#59809d}
.architecture-gallery-placeholder i{font-size:2.3rem;color:#69aee0;margin-bottom:.7rem}
.architecture-gallery-placeholder strong{color:#315b7d;font-size:1.05rem;margin-bottom:.4rem}
.architecture-gallery-placeholder small{max-width:420px}
@media(min-width:1400px){.architecture-gallery-image{height:430px}.architecture-gallery-placeholder{min-height:430px}}
@media(max-width:991.98px){.architecture-gallery-image{height:auto;max-height:520px}.architecture-gallery-placeholder{min-height:260px}}

/* Experience-driven architecture journey */
.architecture-career-accordion .accordion-item { background: #fff; }
.architecture-career-accordion .accordion-button { padding: 1.25rem 1.5rem; background: #f8fbff; color: #102a4c; box-shadow: none; }
.architecture-career-accordion .accordion-button:not(.collapsed) { background: #edf6ff; color: #0d4f95; }
.architecture-career-accordion .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(13,110,253,.12); }
.architecture-career-accordion .architecture-placeholder code { display: block; font-size: .78rem; color: #d63384; word-break: break-word; }
@media (max-width: 767.98px) { .architecture-career-accordion .accordion-button { align-items: flex-start; } }

/* =========================================================
   ARCHITECTURE THUMBNAILS
========================================================= */

.architecture-image-container img,
.architecture-gallery-image {
    cursor: zoom-in;
}


/* =========================================================
   FULL SCREEN VIEWER
========================================================= */

#architectureImageViewport {
    width: 100%;
    height: calc(100vh - 58px);

    overflow: auto;

    background: #1f2429;
}


/* =========================================================
   IMAGE STAGE
========================================================= */

#architectureImageStage {
    min-width: 100%;
    min-height: 100%;

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

    padding: 16px;
}


/* =========================================================
   IMAGE BASE
========================================================= */

.architecture-modal-image {
    display: block;

    height: auto;

    max-width: none;
    max-height: none;

    object-fit: contain;

    user-select: none;
    -webkit-user-drag: none;
}


/* =========================================================
   DEFAULT OPEN STATE

   IMPORTANT:
   The actual image itself fills almost the whole browser width.
========================================================= */

.architecture-image-large {
    width: 94vw;
    height: auto;

    cursor: zoom-in;
}


/* =========================================================
   SECOND CLICK — DETAIL MODE

   Image becomes substantially larger than the viewport.
   User can scroll horizontally and vertically.
========================================================= */

.architecture-image-detail {
    width: 150vw;
    height: auto;

    cursor: zoom-out;
}


/* =========================================================
   TABLETS
========================================================= */

@media (max-width: 991.98px) {

    .architecture-image-large {
        width: 96vw;
    }

    .architecture-image-detail {
        width: 180vw;
    }

}


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

@media (max-width: 575.98px) {

    .architecture-image-large {
        width: 98vw;
    }

    .architecture-image-detail {
        width: 220vw;
    }

}