:root {
            --primary-blue: #112E81;
            --accent-lime: #D6FB61;
            --sky-blue: #1591DC;
            --white: #FFFFFF;
            --soft-gray: #F4F6F7;
            --font-editorial: 'Dancing Script', cursive;
            --font-body: 'Lato', sans-serif;
            --transition-smooth: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body, html {
            background-color: var(--white);
            color: var(--primary-blue);
            font-family: var(--font-body);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Architectural Structure Utilities */
        .architectural-room {
            min-height: 100vh;
            width: 100vw;
            position: relative;
            padding: 120px 8%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: var(--white);
            overflow: hidden;
        }

        .whitespace-gate {
            padding: 160px 12%;
        }


        /* ===========================
   EXTENDED EDITORIAL PAGE
=========================== */

.editorial-container{
    width:min(1400px,92%);
    margin:0 auto;
    padding:120px 0;
}

.label-caps{
    display:inline-block;
    font-size:.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.35em;
    color:var(--sky-blue);
    margin-bottom:18px;
}

.section-title{
    font-size:clamp(2.2rem,5vw,4.5rem);
    margin-bottom:35px;
    line-height:1.05;
}

.editorial-grid-two{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:70px;
    align-items:start;
    margin-top:70px;
}

.editorial-grid-three{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;
}

.editorial-card{
    background:#fff;
    padding:45px;
    border:1px solid rgba(17,46,129,.08);
    transition:.45s;
}

.editorial-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(17,46,129,.08);
}

/* ===========================
   FULL WIDTH FEATURE
=========================== */

.feature-story-layout{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:90px;
    align-items:center;
    padding:150px 0;
}

.feature-story-image{
    height:720px;
    overflow:hidden;
    background:var(--soft-gray);
}

.feature-story-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1.2s;
}

.feature-story-image:hover img{
    transform:scale(1.06);
}

/* ===========================
   JOURNAL STRIP
=========================== */

.journal-strip{
    display:flex;
    flex-direction:column;
    gap:35px;
    margin-top:70px;
}

.journal-entry{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:50px;
    padding-bottom:35px;
    border-bottom:1px solid rgba(17,46,129,.08);
}

.journal-entry:last-child{
    border:none;
}

.journal-date{
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.25em;
    color:var(--sky-blue);
    font-weight:700;
}

/* ===========================
   LARGE QUOTE
=========================== */

.editorial-quote{
    padding:180px 10%;
    text-align:center;
}

.editorial-quote blockquote{
    font-size:clamp(2rem,4vw,4rem);
    line-height:1.45;
    font-weight:300;
    color:var(--primary-blue);
    max-width:1100px;
    margin:auto;
}

.editorial-quote cite{
    display:block;
    margin-top:35px;
    text-transform:uppercase;
    letter-spacing:.25em;
    font-size:.8rem;
    color:var(--sky-blue);
}

/* ===========================
   TIMELINE
=========================== */

.design-timeline{
    position:relative;
    margin-top:90px;
}

.design-timeline::before{
    content:"";
    position:absolute;
    left:20px;
    top:0;
    bottom:0;
    width:2px;
    background:rgba(17,46,129,.15);
}

.timeline-step{
    position:relative;
    padding-left:90px;
    margin-bottom:80px;
}

.timeline-step::before{
    content:"";
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--accent-lime);
    position:absolute;
    left:13px;
    top:10px;
}

.timeline-step h3{
    margin-bottom:15px;
}

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

.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:70px;
}

.process-card{
    padding:40px;
    border-top:3px solid var(--primary-blue);
    background:#fafafa;
    min-height:320px;
}

.process-number{
    font-size:3rem;
    font-weight:200;
    color:rgba(17,46,129,.18);
    margin-bottom:25px;
}

/* ===========================
   METRIC BANNERS
=========================== */

.metric-band{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:var(--primary-blue);
    color:#fff;
    margin:120px 0;
}

.metric-item{
    padding:70px 30px;
    text-align:center;
}

.metric-item h2{
    font-size:4rem;
    margin-bottom:15px;
    color:var(--accent-lime);
}

.metric-item p{
    letter-spacing:.15em;
    text-transform:uppercase;
    font-size:.8rem;
}

/* ===========================
   IMAGE MOSAIC
=========================== */

.editorial-mosaic{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    grid-auto-rows:260px;
    gap:20px;
    margin-top:70px;
}

.editorial-mosaic img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.editorial-mosaic img:first-child{
    grid-row:span 2;
}

/* ===========================
   LONG ESSAY
=========================== */

.longform-column{
    column-count:2;
    column-gap:80px;
    margin-top:60px;
}

.longform-column p{
    margin-bottom:25px;
    break-inside:avoid;
    line-height:2;
}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:1100px){

.feature-story-layout,
.editorial-grid-two,
.process-grid,
.metric-band{
    grid-template-columns:1fr 1fr;
}

.editorial-grid-three{
    grid-template-columns:1fr;
}

.longform-column{
    column-count:1;
}

.editorial-mosaic{
    grid-template-columns:1fr 1fr;
}

}

@media(max-width:768px){

.feature-story-layout,
.editorial-grid-two,
.process-grid,
.metric-band,
.editorial-grid-three,
.editorial-mosaic{
    grid-template-columns:1fr;
}

.feature-story-image{
    height:420px;
}

.journal-entry{
    grid-template-columns:1fr;
    gap:15px;
}

.metric-item{
    padding:50px 20px;
}

.editorial-quote{
    padding:100px 8%;
}

}

        h1, h2, h3 {
            font-weight: 300;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .script-expressive {
            font-family: var(--font-editorial);
            text-transform: none;
            letter-spacing: 0;
            color: var(--primary-blue);
        }

        .editorial-narrative {
            font-size: 1.15rem;
            line-height: 1.85;
            font-weight: 300;
            max-width: 600px;
            color: rgba(17, 46, 129, 0.85);
        }

        .architectural-btn {
            display: inline-block;
            margin-top: 30px;
            padding: 14px 35px;
            border: 1px solid var(--primary-blue);
            background: transparent;
            color: var(--primary-blue);
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.2em;
            cursor: pointer;
            text-decoration: none;
            transition: var(--transition-smooth);
            align-self: flex-start;
        }

        .architectural-btn:hover {
            background-color: var(--accent-lime);
            border-color: var(--accent-lime);
        }

        /* Floating Architectural Header */
        header {
            position: fixed;
            height: 100px;
            top: 0; left: 0; width: 100%;
            padding: 35px 8%;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            z-index: 1000;
            transition: var(--transition-smooth);
            background: transparent;
        }

        header.scrolled-state {
            background: var(--white);
            padding: 20px 8%;
            box-shadow: 0 10px 30px rgba(0,0,0,0.02);
            border-bottom: 1px solid var(--soft-gray);
        }

        .nav-cluster {
            display: flex; list-style: none; gap: 40px;
        }

        .nav-cluster.right-alignment {
            justify-content: flex-end;
                        margin-top: -4rem;

        }
           .nav-cluster.left {
            justify-content: flex-start;
            margin-top: -4rem;
        }

        .nav-cluster a {
            font-size: 0.85rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.15em;
            text-decoration: none; color: var(--primary-blue); position: relative; padding: 5px 0; cursor: pointer;
        }

        .nav-cluster a::after {
            content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px;
            background-color: var(--primary-blue); transition: var(--transition-smooth); transform: translateX(-50%);
        }

        .nav-cluster a:hover::after {
            width: 100%;
        }


        .hamburger-node {
            display: none; background: none; border: none; font-size: 1.5rem; color: var(--primary-blue); cursor: pointer;
        }

        /* Multi-Page Engine Wrapper */
        .page-view-plane {
            display: none;
        }
        .page-view-plane.active-plane {
            display: block;
        }

        /* ROOM 01 — Entrance Hall */
        .entrance-container {
            display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; height: 100vh; padding-top: 100px;
        }
        .portal-doorway-frame {
            width: 100%; height: 75vh; overflow: hidden; position: relative; background: var(--soft-gray);
            transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .portal-doorway-frame img {
            width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s ease;
        }

        /* ROOM 02 — Window Gallery */
        .window-gallery-wall {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px;
        }
        .architectural-window {
            position: relative; height: 400px; overflow: hidden; background-color: var(--soft-gray);
        }
        .window-lens-image {
            width: 100%; height: 100%; object-fit: cover;
        }
        .curtain-shutter-panel {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--soft-gray); border-right: 2px solid var(--primary-blue);
            transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
            display: flex; align-items: center; padding-left: 30px;
        }
        .architectural-window:hover .curtain-shutter-panel {
            transform: translateX(100%);
        }

        /* ROOM 03 — Designer Blueprint */
        .blueprint-canvas-matrix {
            position: relative; border: 1px dashed rgba(17, 46, 129, 0.2); padding: 60px;
            display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px;
        }
        .blueprint-schematic-cell {
            border-right: 1px dashed rgba(17, 46, 129, 0.2); padding-right: 20px;
        }
        .blueprint-schematic-cell:last-child { border-right: none; }
        .blueprint-label { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--sky-blue); font-weight: 700; margin-bottom: 10px; text-transform: uppercase; }
        .handwritten-spec { font-family: var(--font-editorial); font-size: 1.6rem; color: var(--primary-blue); margin-top: 10px; }

        /* ROOM 04 — Material Studio */
        .material-ribbon-stack {
            display: flex; flex-direction: column; gap: 20px; margin-top: 40px;
        }
        .material-ribbon-node {
            width: 100%; height: 110px; position: relative; overflow: hidden;
            display: flex; align-items: center; padding: 0 40px; background: var(--soft-gray);
            transition: var(--transition-smooth);
        }
        .material-bg-texture {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
            opacity: 0.05; mix-blend-mode: multiply; transition: var(--transition-smooth); z-index: 1;
        }
        .material-ribbon-node h3 { position: relative; z-index: 2; font-size: 1.5rem; }
        .material-ribbon-node:hover { height: 160px; background-color: var(--white); border-top: 1px solid var(--primary-blue); border-bottom: 1px solid var(--primary-blue); }
        .material-ribbon-node:hover .material-bg-texture { opacity: 0.8; }

        /* ROOM 05 — Interior Passage */
        .passage-corridor {
            display: flex; flex-direction: column; gap: 100px; margin-top: 60px;
        }
        .passage-aperture-block {
            display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
        }
        .passage-aperture-block.inverse-row {
            direction: rtl;
        }
        .passage-aperture-block.inverse-row .editorial-narrative {
            direction: ltr;
        }
        .passage-image-frame {
            height: 600px; width: 100%; overflow: hidden; background: var(--soft-gray);
        }
        .passage-image-frame img { width: 100%; height: 100%; object-fit: cover; }

        /* ROOM 06 — Ceiling Installation */
        .ceiling-installation-deck {
            display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; min-height: 50px; margin-top: 60px;
        }
        .hanging-sculpture-asset {
            background: var(--soft-gray); padding: 30px 15px; text-align: center;
            border-top: 1px solid var(--primary-blue);
            transform: translateY(-40px); opacity: 0;
            transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;
        }
        .hanging-sculpture-asset.descended {
            transform: translateY(0); opacity: 1;
        }
        .hanging-sculpture-asset img {
            width: 100%; height: 150px; object-fit: contain; margin-bottom: 20px;
        }

        /* ROOM 08 — Architecture Wall */
        .monolithic-wall-image {
            width: 100%; height: 75vh; position: relative; overflow: hidden; margin-top: 40px; background: var(--soft-gray);
        }
        .monolithic-wall-image img { width: 100%; height: 100%; object-fit: cover; }
        .blueprint-annotation-dot {
            position: absolute; width: 16px; height: 16px; background: var(--accent-lime); border-radius: 50%; cursor: pointer;
        }
        .blueprint-annotation-dot::before {
            content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; border: 1px solid var(--white); border-radius: 50%; animation: pulseRing 2s infinite;
        }
        @keyframes pulseRing { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
        .annotation-pop-card {
            position: absolute; bottom: 30px; background: var(--white); padding: 20px; max-width: 280px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.05); display: none; z-index: 10; border-left: 3px solid var(--primary-blue);
        }

        /* ROOM 09 — Open Courtyard */
        .courtyard-sky-plane {
            background-color: var(--sky-blue); color: var(--white); display: flex; flex-direction: column; justify-content: space-between;
        }
        .courtyard-sky-plane h2, .courtyard-sky-plane .script-expressive { color: var(--white); }
        .courtyard-peripheral-grid {
            display: flex; justify-content: space-between; margin-top: 50px;
        }
        .peripheral-image-slice { width: 22%; height: 240px; object-fit: cover; background: rgba(255,255,255,0.1); }

        /* ROOM 10 — Fabric Library */
        .fabric-curtain-vault {
            display: flex; width: 100%; height: 500px; margin-top: 40px; gap: 10px;
        }
        .fabric-curtain-panel {
            flex: 1; position: relative; overflow: hidden; background: var(--soft-gray); transition: var(--transition-smooth); cursor: pointer;
        }
        .fabric-curtain-panel img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2); }
        .fabric-curtain-label {
            position: absolute; bottom: 30px; left: 30px; color: var(--white); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; z-index: 2;
        }
        .fabric-curtain-panel::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(17,46,129,0.4), transparent);
        }
        .fabric-curtain-panel:hover { flex: 2.5; }

        /* ROOM 11 — Home Philosophy */
        .philosophy-radial-hub {
            display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: 60px;
        }
        .radial-centerpiece-frame {
            width: 400px; height: 400px; border-radius: 50%; overflow: hidden; margin: 0 auto; background: var(--soft-gray);
            box-shadow: 0 20px 50px rgba(17,46,129,0.05);
        }
        .radial-centerpiece-frame img { width: 100%; height: 100%; object-fit: cover; }

        /* ROOM 13 — Home Letter Form */
        .home-letter-studio-card {
            background: var(--white); border: 1px solid var(--soft-gray); padding: 60px; max-width: 700px; margin: 40px auto 0 auto; box-shadow: 0 30px 70px rgba(17,46,129,0.03);
        }
        .studio-form-row {
            margin-bottom: 25px;
        }
        .studio-form-row label {
            display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 8px; font-weight: 700;
        }
        .studio-input {
            width: 100%; padding: 15px; border: 1px solid var(--soft-gray); font-family: var(--font-body); font-size: 1rem; color: var(--primary-blue); outline: none; transition: var(--transition-smooth);
        }
        .studio-input:focus { border-color: var(--primary-blue); }
        .form-toggle-anchor {
            background: none; border: none; color: var(--sky-blue); cursor: pointer; text-decoration: underline; font-family: var(--font-body); font-size: 0.9rem;
        }
        .action-success-feedback {
            display: none; padding: 20px; background: var(--accent-lime); font-weight: 700; text-align: center; margin-top: 20px;
        }

        /* INNER PAGES SPECS */
        /* Notebook Layout (Comfort Guides) */
        .notebook-canvas {
            background-color: #FAF8F5; border-left: 40px solid #E6E1DA; min-height: 100vh; padding: 120px 8%;
        }
        .sketch-panel-mock {
            border: 1px solid rgba(17,46,129,0.15); height: 350px; background: var(--white); position: relative; margin-top: 30px;
        }
        .sketch-annotation-text {
            font-family: var(--font-editorial); font-size: 1.5rem; position: absolute; color: var(--sky-blue);
        }

        /* Portfolio Studio Layout (About) */
        .portfolio-split-matrix {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 60px;
        }
        .portfolio-block-item { height: 500px; background: var(--soft-gray); position: relative; overflow: hidden; }
        .portfolio-block-item img { width: 100%; height: 100%; object-fit: cover; }

        /* Standard Footer */
        footer {
            background: var(--white); border-top: 1px solid var(--soft-gray); padding: 80px 8% 40px 8%;
        }
        .footer-grid-matrix {
            display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 40px; margin-bottom: 60px;
        }
        .footer-link-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
        .footer-link-list a { color: rgba(17, 46, 129, 0.7); text-decoration: none; font-size: 0.9rem; cursor: pointer; transition: var(--transition-smooth); }
        .footer-link-list a:hover { color: var(--primary-blue); padding-left: 5px; }

        /* Responsive Breakpoints & Hamburger System */
        @media (max-width: 1024px) {
            header { display: flex; justify-content: space-between; }
            .nav-cluster { display: none; }
            .hamburger-node { display: block; }
            .entrance-container { grid-template-columns: 1fr; height: auto; }
            .window-gallery-wall { grid-template-columns: 1fr 1fr; }
            .passage-aperture-block { grid-template-columns: 1fr; gap: 40px; }
            .ceiling-installation-deck { grid-template-columns: repeat(3, 1fr); }
            .philosophy-radial-hub { grid-template-columns: 1fr; }
            .portfolio-split-matrix { grid-template-columns: 1fr 1fr; }
            .footer-grid-matrix { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 768px) {
            .window-gallery-wall { grid-template-columns: 1fr; }
            .ceiling-installation-deck { grid-template-columns: 1fr 1fr; }
            .courtyard-peripheral-grid { flex-wrap: wrap; gap: 20px; }
            .peripheral-image-slice { width: 45%; }
            .portfolio-split-matrix { grid-template-columns: 1fr; }
            .footer-grid-matrix { grid-template-columns: 1fr; }
            .fabric-curtain-vault { height: 350px; }
            .logo-img{
                margin-top: 2rem !important;
            }
        }

        /* Mobile Flyout Navigation Menu Drawer */
        .mobile-navigation-drawer {
            position: fixed; top: 0; left: -100%; width: 100%; height: 100vh;
            background: var(--white); z-index: 2000; display: flex; flex-direction: column;
            justify-content: center; align-items: center; gap: 35px;
            transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        }
        .mobile-navigation-drawer.drawer-open {
            transform: translateX(100%);
        }
        .mobile-navigation-drawer a {
            font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--primary-blue); text-decoration: none; font-weight: 300;
        }
        .drawer-close-trigger {
            position: absolute; top: 35px; right: 8%; font-size: 2rem; background: none; border: none; color: var(--primary-blue); cursor: pointer;
        }