/* =========================================================
   ELEVATE — ARCHITECTURE + INTERIORS
   Demo 02
   ========================================================= */

:root {
    --el-ivory: #f3f0e9;
    --el-ivory-soft: #ebe7df;
    --el-limestone: #d8d0c3;

    --el-ink: #171715;
    --el-ink-soft: #34332f;

    --el-stone: #918b82;
    --el-muted: #777269;

    --el-taupe: #b3a695;
    --el-bronze: #66584a;
    --el-bronze-dark: #453b32;

    --el-line: rgba(23, 23, 21, .14);
    --el-line-light: rgba(23, 23, 21, .08);

    --el-max: 1600px;
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--el-ivory);
    color: var(--el-ink);

    font-family: "DM Sans", sans-serif;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
}

button,
a {
    font: inherit;
}

button {
    color: inherit;
}

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

button {
    border: 0;
}


/* =========================================================
   SITE
   ========================================================= */

.el-site {
    position: relative;
    width: 100%;
}


/* =========================================================
   HEADER
   ========================================================= */

.el-header {
    position: absolute;
    z-index: 30;

    top: 0;
    left: 50%;

    width: min(calc(100% - 96px), var(--el-max));

    height: 94px;

    transform: translateX(-50%);

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

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


/* BRAND */

.el-brand {
    justify-self: start;

    display: flex;
    align-items: center;
    gap: 16px;
}

.el-brand-name {
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 600;

    letter-spacing: .18em;
}

.el-brand-type {
    padding-left: 16px;

    border-left: 1px solid var(--el-line);

    color: var(--el-muted);

    font-size: 8px;
    font-weight: 500;

    letter-spacing: .16em;
}


/* NAVIGATION */

.el-nav {
    display: flex;
    align-items: center;
    gap: 34px;
}

.el-nav a {
    position: relative;

    color: var(--el-ink-soft);

    font-size: 10px;
    font-weight: 500;

    letter-spacing: .08em;
}

.el-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: var(--el-ink);

    transition: width .3s ease;
}

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


/* HEADER CTA */

.el-header-cta {
    justify-self: end;

    display: flex;
    align-items: center;
    gap: 20px;

    padding: 13px 18px;

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

    font-size: 9px;
    font-weight: 500;

    letter-spacing: .1em;

    transition:
        background .3s ease,
        color .3s ease;
}

.el-header-cta span {
    font-size: 13px;
}

.el-header-cta:hover {
    background: var(--el-ink);
    color: var(--el-ivory);
}


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

.el-hero {
    position: relative;

    min-height: 820px;
    height: min(900px, 100vh);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 56% 49%,
            rgba(255, 255, 255, .74),
            transparent 33%
        ),
        linear-gradient(
            135deg,
            #f4f1ea 0%,
            #ece7de 48%,
            #e5ded3 100%
        );
}


/* VERY SUBTLE ARCHITECTURAL GRID */

.el-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .22;

    background-image:
        linear-gradient(
            rgba(23, 23, 21, .04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(23, 23, 21, .04) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            black 75%,
            transparent
        );
}


/* =========================================================
   3D RESIDENCE CANVAS
   ========================================================= */

.el-residence-canvas {
    position: absolute;

    z-index: 2;

    inset: 100px 7% 78px 20%;

    cursor: grab;
}

.el-residence-canvas:active {
    cursor: grabbing;
}

.el-residence-canvas canvas {
    display: block;

    width: 100% !important;
    height: 100% !important;

    outline: none;
}


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

.el-hero-copy {
    position: absolute;

    z-index: 8;

    top: 180px;
    left: max(48px, calc((100vw - var(--el-max)) / 2));

    width: 470px;

    pointer-events: none;
}

.el-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 26px;

    color: var(--el-bronze);

    font-size: 8px;
    font-weight: 600;

    letter-spacing: .22em;
}

.el-eyebrow::before {
    content: "";

    width: 28px;
    height: 1px;

    background: var(--el-bronze);
}

.el-hero-copy h1 {
    font-family: "Manrope", sans-serif;
    font-size: clamp(54px, 5.2vw, 84px);
    font-weight: 300;

    line-height: .94;

    letter-spacing: -.055em;
}

.el-hero-copy h1 span,
.el-hero-copy h1 em {
    display: block;
}

.el-hero-copy h1 em {
    margin-left: 46px;

    font-family: "Instrument Serif", serif;
    font-size: 1.05em;
    font-weight: 400;
    font-style: italic;

    letter-spacing: -.035em;

    color: var(--el-bronze);
}

.el-hero-copy p {
    width: 300px;

    margin-top: 30px;
    margin-left: 48px;

    color: var(--el-muted);

    font-size: 12px;

    line-height: 1.75;

    letter-spacing: .015em;
}


/* =========================================================
   PROJECT META
   ========================================================= */

.el-project-meta {
    position: absolute;

    z-index: 8;

    left: max(48px, calc((100vw - var(--el-max)) / 2));
    bottom: 48px;

    display: flex;
    align-items: flex-start;
    gap: 44px;
}

.el-project-meta > div {
    min-width: 110px;
}

.el-project-meta small,
.el-project-meta strong {
    display: block;
}

.el-project-meta small {
    margin-bottom: 7px;

    color: var(--el-muted);

    font-size: 7px;
    font-weight: 600;

    letter-spacing: .18em;
}

.el-project-meta strong {
    font-family: "Manrope", sans-serif;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: .03em;
}


/* =========================================================
   VIEW PANEL
   ========================================================= */

.el-view-panel {
    position: absolute;

    z-index: 12;

    top: 190px;
    right: max(48px, calc((100vw - var(--el-max)) / 2));

    width: 145px;
}

.el-view-panel > span,
.el-material-panel > span {
    display: block;

    margin-bottom: 15px;

    color: var(--el-muted);

    font-size: 7px;
    font-weight: 600;

    letter-spacing: .2em;
}

.el-view-btn {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 12px 0;

    background: transparent;

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

    cursor: pointer;

    text-align: left;

    color: var(--el-muted);

    font-size: 10px;

    transition:
        color .25s ease,
        padding-left .25s ease;
}

.el-view-btn i {
    font-style: normal;

    color: var(--el-stone);

    font-size: 7px;

    letter-spacing: .1em;
}

.el-view-btn:hover,
.el-view-btn.active {
    color: var(--el-ink);

    padding-left: 6px;
}

.el-view-btn.active::after {
    content: "";

    position: absolute;

    right: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--el-bronze);
}


/* =========================================================
   MATERIAL PANEL
   ========================================================= */

.el-material-panel {
    position: absolute;

    z-index: 12;

    right: max(48px, calc((100vw - var(--el-max)) / 2));
    bottom: 155px;

    width: 145px;
}

.el-material {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 0;

    background: transparent;

    cursor: pointer;

    color: var(--el-muted);

    font-size: 9px;

    transition: color .25s ease;
}

.el-material:hover,
.el-material.active {
    color: var(--el-ink);
}

.el-swatch {
    position: relative;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    border: 1px solid rgba(23, 23, 21, .14);

    transition: transform .25s ease;
}

.el-material.active .el-swatch {
    transform: scale(1.14);
}

.el-swatch.stone {
    background:
        linear-gradient(
            135deg,
            #c7c0b5,
            #9d968c
        );
}

.el-swatch.timber {
    background:
        linear-gradient(
            135deg,
            #8d7157,
            #5f4937
        );
}

.el-swatch.concrete {
    background:
        linear-gradient(
            135deg,
            #b7b6b0,
            #858680
        );
}


/* =========================================================
   ENTER RESIDENCE
   ========================================================= */

.el-enter {
    position: absolute;

    z-index: 15;

    left: 63%;
    top: 59%;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 8px 12px 8px 8px;

    background: rgba(244, 241, 234, .86);

    border: 1px solid rgba(23, 23, 21, .16);

    backdrop-filter: blur(8px);

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease;
}

.el-enter:hover {
    transform: translateY(-3px);

    background: var(--el-ivory);
}

.el-enter-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    background: var(--el-ink);

    color: var(--el-ivory);

    font-size: 15px;
    font-weight: 300;
}

.el-enter > span:last-child {
    display: flex;
    flex-direction: column;

    text-align: left;

    font-size: 7px;
    font-weight: 600;

    letter-spacing: .17em;
}

.el-enter small {
    margin-top: 2px;

    color: var(--el-muted);

    font-size: 6px;

    letter-spacing: .15em;
}


/* =========================================================
   INTERACTION HINT
   ========================================================= */

.el-interaction-hint {
    position: absolute;

    z-index: 8;

    left: 50%;
    bottom: 46px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--el-muted);

    font-size: 7px;
    font-weight: 500;

    letter-spacing: .18em;

    pointer-events: none;
}

.el-interaction-hint span {
    width: 17px;
    height: 17px;

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

    border-radius: 50%;
}

.el-interaction-hint span::after {
    content: "";

    display: block;

    width: 3px;
    height: 3px;

    margin: 6px;

    border-radius: 50%;

    background: var(--el-bronze);
}


/* =========================================================
   SCROLL
   ========================================================= */

.el-scroll {
    position: absolute;

    z-index: 10;

    right: max(48px, calc((100vw - var(--el-max)) / 2));
    bottom: 46px;

    display: flex;
    align-items: center;
    gap: 13px;

    color: var(--el-muted);

    font-size: 7px;

    letter-spacing: .2em;
}

.el-scroll i {
    position: relative;

    width: 38px;
    height: 1px;

    background: var(--el-line);
}

.el-scroll i::after {
    content: "";

    position: absolute;

    right: 0;
    top: -2px;

    width: 5px;
    height: 5px;

    border-right: 1px solid var(--el-muted);
    border-bottom: 1px solid var(--el-muted);

    transform: rotate(-45deg);
}


/* =========================================================
   NEXT SECTION PLACEHOLDER
   ========================================================= */

.el-projects {
    min-height: 300px;

    padding: 90px max(48px, calc((100vw - var(--el-max)) / 2));

    background: #171715;

    color: var(--el-ivory);
}

.el-section-placeholder {
    display: flex;
    align-items: center;
    gap: 18px;

    color: rgba(243, 240, 233, .55);

    font-size: 8px;

    letter-spacing: .18em;
}

.el-section-placeholder span {
    color: var(--el-taupe);
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .el-header {
        width: calc(100% - 48px);

        grid-template-columns: 1fr auto;
    }

    .el-nav {
        display: none;
    }

    .el-hero-copy {
        left: 28px;
    }

    .el-project-meta {
        left: 28px;
    }

    .el-view-panel,
    .el-material-panel,
    .el-scroll {
        right: 28px;
    }

    .el-residence-canvas {
        inset:
            110px
            4%
            90px
            12%;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .el-header {
        width: calc(100% - 32px);
        height: 78px;
    }

    .el-brand-type {
        display: none;
    }

    .el-header-cta {
        padding: 10px 12px;
    }

    .el-hero {
        min-height: 760px;
        height: auto;
    }

    .el-hero-copy {
        top: 125px;
        left: 20px;

        width: calc(100% - 40px);
    }

    .el-hero-copy h1 {
        font-size: clamp(48px, 15vw, 68px);
    }

    .el-hero-copy h1 em {
        margin-left: 22px;
    }

    .el-hero-copy p {
        width: 240px;

        margin-left: 24px;
    }

    .el-residence-canvas {
        top: 300px;
        right: -12%;
        bottom: 120px;
        left: -12%;
    }

    .el-project-meta {
        left: 20px;
        bottom: 30px;

        gap: 18px;
    }

    .el-project-meta > div:nth-child(2),
    .el-project-meta > div:nth-child(3) {
        display: none;
    }

    .el-view-panel {
        top: 315px;
        right: 16px;

        width: 112px;
    }

    .el-material-panel {
        display: none;
    }

    .el-enter {
        left: auto;
        right: 20px;
        top: auto;
        bottom: 85px;
    }

    .el-interaction-hint,
    .el-scroll {
        display: none;
    }

}/* Completed portfolio sections — scoped to ELEVATE. */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--el-bronze); outline-offset: 5px; }
section { scroll-margin-top: 24px; }
.el-menu-toggle,.el-mobile-nav { display: none; }
.el-kicker { display:block; font-size:10px; font-weight:500; letter-spacing:.16em; line-height:1.6; margin-bottom:22px; color:var(--el-bronze); }
.el-section,.el-projects { padding:100px max(32px,calc((100vw - 1440px)/2)); }
.el-section h2,.el-projects h2 { font-family:Manrope,sans-serif; font-size:clamp(36px,3.5vw,58px); font-weight:300; line-height:1.12; letter-spacing:-.045em; }
.el-section h2 em,.el-projects h2 em { font-family:'Instrument Serif',serif; font-weight:400; color:var(--el-bronze); }
.el-section p,.el-projects p { font-size:14px; line-height:1.85; }
.el-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:48px; }
.el-section-heading>p { max-width:340px; color:var(--el-muted); }
.el-projects .el-kicker,.el-projects h2 em { color:#c1ae96; }
.el-projects .el-section-heading>p,.el-project-card>p { color:#bdb8ae; }
.el-project-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:26px; }
.el-project-image { display:block; height:310px; position:relative; overflow:hidden; background:#c5bbaa; }
.el-project-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.el-project-image:hover img { transform:scale(1.035); }
.el-project-image>span:last-child { position:absolute; bottom:0; left:0; right:0; padding:18px; font-size:11px; background:linear-gradient(transparent,rgba(0,0,0,.65)); color:#fff; }
.el-card-meta { color:#c1ae96; font-size:8px; letter-spacing:.12em; margin:24px 0 12px; line-height:1.6; }
.el-project-card h3 { font:400 27px 'Instrument Serif',serif; margin-bottom:12px; }
.el-diagram { background:linear-gradient(145deg,#dbd5c9,#9d9689); }
.el-courtyard::before { content:''; position:absolute; width:65%; height:60%; top:12%; left:18%; border:35px solid #e8e2d7; box-shadow:12px 18px 18px #66584a44,inset 8px 12px 18px #66584a33; transform:rotate(-12deg); }
.el-material-study { background:linear-gradient(100deg,#9f8466 0 29%,#c9c1b5 29% 67%,#777970 67%); }
.el-material-study::before { content:''; position:absolute; inset:18% 18% 22%; background:#e9e3d8; box-shadow:12px 15px 28px #30291e55; transform:rotate(-6deg); }
.el-diagram .el-diagram-label { position:absolute; left:24px; top:35%; color:var(--el-ink); font-size:13px; letter-spacing:.15em; line-height:2; }
.el-diagram-label small { font-size:8px; }
.el-studio,.el-inquiry { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; }
.el-prose>p { margin-bottom:24px; color:var(--el-ink-soft); }
.el-section .el-lead { font-size:21px; line-height:1.65; margin-bottom:24px; }
.el-expertise { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; padding-top:28px; border-top:1px solid var(--el-line); }
.el-expertise h3 { font-size:13px; font-weight:500; margin-bottom:12px; }
.el-expertise p { font-size:12px; color:var(--el-muted); }
.el-approach { background:var(--el-ivory-soft); }
.el-process details { border-top:1px solid var(--el-line); }
.el-process details:last-child { border-bottom:1px solid var(--el-line); }
.el-process summary { display:flex; align-items:center; gap:32px; padding:24px 0; font:300 clamp(23px,2.2vw,32px) Manrope,sans-serif; cursor:pointer; list-style:none; }
.el-process summary::-webkit-details-marker { display:none; }
.el-process summary>span { font:11px 'DM Sans',sans-serif; color:var(--el-bronze); }
.el-process summary::after { content:'+'; margin-left:auto; font-weight:300; }
.el-process details[open] summary::after { content:'−'; }
.el-process details>p { max-width:730px; padding:0 32px 28px 47px; color:var(--el-ink-soft); }
.el-journal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.el-journal article { border-top:1px solid var(--el-line); padding-top:28px; }
.el-journal h3 { font:400 30px/1.15 'Instrument Serif',serif; margin-bottom:18px; }
.el-journal article>p { color:var(--el-muted); margin-bottom:22px; }
.el-journal summary { cursor:pointer; font-size:12px; padding:12px 0; text-decoration:underline; text-underline-offset:5px; }
.el-journal details p { margin-top:16px; font-size:13px; }
.el-inquiry { background:#e8e2d8; }
.el-inquiry>div>p:not(.el-lead) { max-width:430px; color:var(--el-ink-soft); }
.el-inquiry .el-lead { margin-top:26px; }
.el-text-link { display:inline-block; margin-top:28px; border-bottom:1px solid var(--el-bronze); padding-bottom:8px; font-size:13px; }
.el-inquiry-form { display:grid; gap:24px; align-content:start; }
.el-form-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.el-inquiry-form label { display:grid; gap:10px; font-size:12px; }
.el-inquiry-form input,.el-inquiry-form select,.el-inquiry-form textarea { font:14px 'DM Sans',sans-serif; width:100%; min-width:0; border:1px solid #b7ada0; border-radius:0; padding:13px; color:var(--el-ink); background:#f5f1e9; min-height:46px; }
.el-inquiry-form textarea { resize:vertical; }
.el-inquiry-form .el-consent { display:flex; align-items:flex-start; gap:12px; line-height:1.65; }
.el-consent input { width:20px; min-height:20px; height:20px; flex-shrink:0; accent-color:var(--el-bronze); }
.el-solid-button { display:flex; justify-content:space-between; background:var(--el-ink); color:var(--el-ivory); padding:17px 22px; cursor:pointer; font-size:13px; min-height:48px; }
.el-solid-button:disabled { opacity:.5; cursor:not-allowed; }
#el-inquiry-status { color:var(--el-bronze-dark); }
.el-view-status { position:absolute; z-index:15; bottom:15px; left:50%; transform:translateX(-50%); max-width:55%; font-size:10px; line-height:1.6; text-align:center; color:var(--el-bronze-dark); }
.el-rotate-controls { position:absolute; z-index:12; bottom:80px; left:55%; display:flex; gap:8px; }
.el-rotate-controls button { width:44px; height:44px; border:1px solid var(--el-line); background:#f3f0e9d9; cursor:pointer; }
.el-rotate-controls button:disabled { opacity:.35; cursor:default; }
.el-residence-canvas canvas { touch-action:pan-y; }
.el-plan { position:absolute; z-index:9; top:145px; left:36%; width:43%; padding:30px; background:#f3f0e9f5; border:1px solid var(--el-line); }
.el-plan h2 { font:400 30px 'Instrument Serif',serif; }
.el-plan svg { display:block; width:100%; margin:25px 0; }
.el-plan p { font-size:11px; line-height:1.6; color:var(--el-bronze-dark); }
.el-hero[data-view='plan'] .el-enter,.el-hero[data-view='plan'] .el-interaction-hint { visibility:hidden; }
.el-fallback { position:absolute; z-index:3; left:32%; top:34%; width:46%; }
.el-fallback img { width:100%; max-height:300px; object-fit:cover; }
.el-fallback p { font-size:11px; line-height:1.6; padding:12px; background:var(--el-ivory); }
.el-hero[data-material='timber'] .el-fallback { border:5px solid #987651; }
.el-hero[data-material='concrete'] .el-fallback { border:5px solid #92948f; }
@media(min-width:1051px) { .el-view-btn,.el-material { min-height:44px; } }
@media(max-width:1050px) {
 .el-header { grid-template-columns:1fr auto auto; gap:14px; }
 .el-menu-toggle { display:flex; align-items:center; gap:10px; min-height:44px; background:transparent; font-size:11px; cursor:pointer; }
 .el-mobile-nav:not([hidden]) { display:grid; position:absolute; top:100%; left:0; right:0; padding:20px; background:#f3f0e9; border:1px solid var(--el-line); box-shadow:0 20px 35px #17171518; }
 .el-mobile-nav a { padding:13px 0; border-bottom:1px solid var(--el-line); font-size:14px; }
 .el-section,.el-projects { padding:70px 28px; }
 .el-studio,.el-inquiry { gap:40px; }
 .el-project-grid { grid-template-columns:1fr 1fr; }
 .el-project-card:first-child { grid-column:1/-1; }
 .el-section-heading { align-items:flex-start; }
 .el-journal-grid { gap:24px; }
 .el-plan { top:400px; left:20%; width:55%; padding:20px; }
}
@media(max-width:700px) {
 .el-header { gap:10px; }
 .el-brand-name { font-size:14px; }
 .el-header-cta { font-size:8px; gap:8px; min-height:44px; }
 .el-hero { min-height:940px; }
 .el-hero-copy { top:115px; }
 .el-hero-copy h1 { font-size:clamp(43px,13.5vw,68px); }
 .el-hero-copy p { width:calc(100% - 24px); max-width:300px; }
 .el-residence-canvas { top:350px; bottom:200px; }
 .el-view-panel { top:310px; left:20px; right:20px; width:auto; display:flex; gap:12px; align-items:center; }
 .el-view-panel>span { display:none; }
 .el-view-btn { min-height:46px; font-size:11px; gap:7px; }
 .el-material-panel { display:flex; left:20px; right:20px; bottom:145px; width:auto; gap:12px; align-items:center; }
 .el-material-panel>span { display:none; }
 .el-material { min-height:44px; font-size:11px; gap:7px; }
 .el-enter { bottom:90px; right:20px; min-height:44px; }
 .el-rotate-controls { left:20px; bottom:90px; }
 .el-project-meta { bottom:32px; }
 .el-view-status { bottom:9px; left:20px; right:20px; transform:none; text-align:left; max-width:none; font-size:9px; }
 .el-plan { top:385px; left:20px; width:calc(100% - 40px); padding:18px; }
 .el-plan h2 { font-size:26px; }
 .el-plan svg { margin:20px 0; }
 .el-plan .el-kicker { margin-bottom:12px; }
 .el-fallback { top:390px; left:20px; width:calc(100% - 40px); }
 .el-section,.el-projects { padding:58px 20px; }
 .el-section-heading { display:block; margin-bottom:30px; }
 .el-section-heading>p { margin-top:24px; }
 .el-project-grid,.el-studio,.el-inquiry,.el-journal-grid { grid-template-columns:1fr; gap:36px; }
 .el-project-image { height:280px; }
 .el-expertise { grid-template-columns:1fr; gap:24px; }
 .el-form-row { grid-template-columns:1fr; }
 .el-process summary { gap:20px; }
 .el-process details>p { padding-left:34px; padding-right:0; }
 .el-kicker { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }
.el-hero[data-view='interior'] .el-enter,.el-hero[data-view='interior'] .el-interaction-hint { visibility:hidden; }
@media(min-width:701px) { .el-hero[data-view='interior'] .el-residence-canvas { left:32%;right:15%;top:150px;bottom:130px; } }
@media(max-width:700px) {
 .el-hero { min-height:1020px; }
 .el-view-panel { top:380px; }
 .el-residence-canvas { top:430px; }
 .el-plan { top:450px; }
 .el-fallback { top:450px; }
}
@media(max-width:360px) { .el-hero-copy h1 { font-size:39px; } }
.el-view-btn,.el-material { min-height:44px; }
@media(min-width:701px) and (max-width:1050px) { .el-plan { top:460px; } }
.el-hero[data-renderer='unavailable'] .el-enter,.el-hero[data-renderer='unavailable'] .el-interaction-hint,.el-hero[data-renderer='unavailable'] .el-rotate-controls { display:none; }
@media(max-width:700px) { .el-plan svg text { font-size:25px; } }