/* =========================================================
   OAK & IVORY INTERIORS
   RESPONSIVE FOUNDATION
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    :root {

        --gutter:
            28px;

    }


    .desktop-nav {

        gap:
            20px;

    }


    .desktop-nav a {

        font-size:
            10px;

    }

}


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

@media (max-width: 760px) {

    :root {

        --gutter:
            20px;

    }


    .header-inner {

        min-height:
            82px;

    }


    /* Hide desktop navigation */

    .desktop-nav {

        display:
            none;

    }


    /* Mobile menu button */

    .mobile-menu-toggle {

        width:
            42px;

        height:
            42px;

        padding:
            0;

        border:
            0;

        background:
            transparent;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;

        align-items:
            flex-end;

        gap:
            7px;

        cursor:
            pointer;

    }


    .mobile-menu-toggle span {

        display:
            block;

        height:
            1px;

        background:
            var(--ink);

        transition:
            transform 250ms ease,
            width 250ms ease;

    }


    .mobile-menu-toggle span:first-child {

        width:
            26px;

    }


    .mobile-menu-toggle span:last-child {

        width:
            18px;

    }


    /* Mobile menu */

    .mobile-menu {

        position:
            fixed;

        inset:
            0;

        z-index:
            90;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        background:
            var(--paper);

        opacity:
            0;

        visibility:
            hidden;

        transition:
            opacity 250ms ease,
            visibility 250ms ease;

    }


    .mobile-menu.is-open {

        opacity:
            1;

        visibility:
            visible;

    }


    .mobile-menu nav {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        gap:
            26px;

    }


    .mobile-menu nav a {

        font-family:
            var(--font-display);

        font-size:
            48px;

        line-height:
            1;

    }


    /* Footer */

    .footer-inner {

        grid-template-columns:
            1fr 1fr;

    }


}


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

@media (max-width: 480px) {

    .site-logo-main {

        font-size:
            20px;

    }


    .site-logo-sub {

        font-size:
            7px;

    }


    .footer-inner {

        grid-template-columns:
            1fr;

    }


    .footer-bottom {

        flex-direction:
            column;

        gap:
            10px;

    }

}

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

@media (max-width: 1000px) {

    .hero-title {

        font-size:
            clamp(58px, 8vw, 86px);

    }


    .hero-content {

        padding-top:
            100px;

    }

}


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

@media (max-width: 760px) {

    .hero {

        min-height:
            780px;

    }


    .hero-content {

        min-height:
            780px;

        justify-content:
            flex-end;

        padding-top:
            120px;

        padding-bottom:
            90px;

    }


    .hero-image {

        object-position:
            55% center;

    }


    .hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(35,28,23,.18) 0%,
                rgba(35,28,23,.12) 35%,
                rgba(35,28,23,.70) 100%
            );

    }


    .hero-copy {

        max-width:
            100%;

        margin-top:
            0;

    }


    .hero-eyebrow {

        margin-bottom:
            18px;

        font-size:
            9px;

    }


    .hero-title {

        font-size:
            clamp(52px, 15vw, 72px);

        line-height:
            .94;

    }


    .hero-description {

        max-width:
            330px;

        margin-top:
            24px;

        font-size:
            16px;

        line-height:
            1.65;

    }


    .hero-actions {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;

        margin-top:
            30px;

    }


    .hero-button {

        min-height:
            50px;

    }


    .hero-bottom {

        right:
            20px;

        bottom:
            28px;

        left:
            20px;

        font-size:
            8px;

    }


    .hero-bottom span:last-child {

        display:
            none;

    }


    .hero-scroll {

        display:
            none;

    }


    /* Intro */

    .intro-section {

        padding:
            90px 0;

    }


    .intro-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .intro-content h2 {

        font-size:
            clamp(44px, 13vw, 62px);

    }


    .intro-content p {

        margin-top:
            28px;

        font-size:
            16px;

    }

}


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

@media (max-width: 480px) {

    .hero {

        min-height:
            720px;

    }


    .hero-content {

        min-height:
            720px;

    }


    .hero-title {

        font-size:
            50px;

    }


    .hero-description {

        font-size:
            15px;

    }


    .hero-bottom {

        display:
            none;

    }

}

/* =========================================================
   FEATURED PROJECTS — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .featured-header {

        grid-template-columns:
            1fr;

        gap:
            45px;

        margin-bottom:
            80px;

    }


    .featured-project,
    .featured-project-reverse {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .featured-project-reverse .project-image-wrap {

        order:
            1;

    }


    .featured-project-reverse .project-info {

        order:
            2;

    }


    .projects-list {

        gap:
            100px;

    }

}


/* =========================================================
   FEATURED PROJECTS — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .featured-projects {

        padding:
            100px 0 110px;

    }


    .featured-header {

        margin-bottom:
            70px;

    }


    .featured-heading h2 {

        font-size:
            clamp(46px, 13vw, 64px);

    }


    .featured-heading p {

        margin-top:
            25px;

        font-size:
            16px;

    }


    .projects-list {

        gap:
            90px;

    }


    .featured-project,
    .featured-project-reverse {

        gap:
            32px;

    }


    .project-image {

        aspect-ratio:
            4 / 3;

    }


    .project-image-number {

        top:
            16px;

        left:
            16px;

        width:
            38px;

        height:
            38px;

    }


    .project-meta {

        margin-bottom:
            16px;

        font-size:
            9px;

    }


    .project-info h3 {

        font-size:
            clamp(38px, 11vw, 52px);

    }


    .project-info p {

        margin-top:
            22px;

        font-size:
            15px;

        line-height:
            1.75;

    }


    .project-link {

        margin-top:
            25px;

    }


    .featured-footer {

        margin-top:
            100px;

    }


    .outline-button {

        width:
            100%;

        justify-content:
            center;

    }

}

/* =========================================================
   SERVICES — TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .services-intro {

        grid-template-columns:
            1fr;

        gap:
            45px;

        margin-bottom:
            75px;

    }


    .service-row {

        grid-template-columns:
            70px minmax(0, 1fr) 50px;

    }


    .service-main {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }

}


/* =========================================================
   SERVICES — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .services-section {

        padding:
            100px 0 110px;

    }


    .services-intro {

        gap:
            40px;

        margin-bottom:
            65px;

    }


    .services-heading h2 {

        font-size:
            clamp(48px, 13vw, 66px);

        line-height:
            1.05;

    }


    .services-list {

        margin-left:
            0;

    }


    .service-row {

        grid-template-columns:
            42px minmax(0, 1fr) 30px;

        min-height:
            auto;

        padding:
            34px 0;

        gap:
            10px;

    }


    .service-row:hover {

        padding-left:
            0;

        padding-right:
            0;

    }


    .service-number {

        padding-top:
            5px;

        font-size:
            9px;

    }


    .service-main {

        display:
            block;

    }


    .service-main h3 {

        font-size:
            clamp(30px, 8vw, 40px);

        line-height:
            1.05;

    }


    .service-main p {

        max-width:
            330px;

        margin-top:
            16px;

        font-size:
            14px;

        line-height:
            1.7;

    }


    .service-arrow {

        font-size:
            21px;

    }


    .services-footer {

        justify-content:
            flex-start;

        margin-top:
            35px;

    }

}

/* =========================================================
   DESIGN PHILOSOPHY — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .philosophy-header {

        grid-template-columns:
            1fr;

        gap:
            45px;

        margin-bottom:
            70px;

    }


    .philosophy-principles {

        grid-template-columns:
            1fr;

    }


    .philosophy-principle {

        min-height:
            auto;

        padding:
            30px 0 45px;

    }


    .philosophy-principle + .philosophy-principle {

        padding:
            45px 0;

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

        border-left:
            0;

    }

}


/* =========================================================
   DESIGN PHILOSOPHY — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .philosophy-section {

        padding:
            100px 0 110px;

    }


    .philosophy-header {

        gap:
            40px;

        margin-bottom:
            60px;

    }


    .philosophy-heading h2 {

        font-size:
            clamp(48px, 13vw, 66px);

        line-height:
            1.05;

    }


    .philosophy-image {

        aspect-ratio:
            4 / 3;

        object-position:
            center;

    }


    .philosophy-principles {

        margin-top:
            55px;

    }


    .philosophy-principle {

        padding:
            28px 0 40px;

    }


    .philosophy-principle + .philosophy-principle {

        padding:
            40px 0;

    }


    .principle-number {

        margin-bottom:
            28px;

    }


    .philosophy-principle h3 {

        font-size:
            36px;

    }


    .philosophy-principle p {

        max-width:
            330px;

        font-size:
            15px;

    }

}

/* =========================================================
   PROCESS — TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .process-header {

        grid-template-columns:
            1fr;

        gap:
            45px;

        margin-bottom:
            80px;

    }


    .process-timeline {

        grid-template-columns:
            repeat(3, 1fr);

        row-gap:
            70px;

    }


    .process-timeline::before {

        display:
            none;

    }


    .process-step {

        min-height:
            280px;

    }


    .process-step:nth-child(4) {

        border-left:
            0;

        padding-left:
            0;

    }

}


/* =========================================================
   PROCESS — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .process-section {

        padding:
            100px 0 110px;

    }


    .process-header {

        gap:
            40px;

        margin-bottom:
            70px;

    }


    .process-heading h2 {

        font-size:
            clamp(48px, 13vw, 66px);

        line-height:
            1.05;

    }


    .process-timeline {

        display:
            block;

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

    }


    .process-step {

        min-height:
            auto;

        padding:
            0 0 55px 0;

    }


    .process-step + .process-step {

        padding:
            55px 0;

        border-left:
            0;

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

    }


    .process-marker {

        width:
            44px;

        height:
            44px;

        margin-top:
            -22px;

    }


    .process-content {

        padding-top:
            32px;

        padding-left:
            0;

    }


    .process-content h3 {

        font-size:
            38px;

    }


    .process-content p {

        max-width:
            330px;

        margin-top:
            17px;

        font-size:
            15px;

        line-height:
            1.75;

    }

}

/* =========================================================
   TESTIMONIALS — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .testimonial-feature {

        max-width:
            760px;

    }


    .testimonial-secondary {

        gap:
            50px;

    }


    .testimonial-small + .testimonial-small {

        padding-left:
            40px;

    }

}


/* =========================================================
   TESTIMONIALS — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .testimonials-section {

        padding:
            100px 0 110px;

    }


    .testimonials-header {

        margin-bottom:
            70px;

    }


    .testimonial-feature {

        text-align:
            left;

    }


    .quote-mark {

        height:
            50px;

        font-size:
            70px;

    }


    .testimonial-feature blockquote {

        font-size:
            clamp(38px, 10vw, 52px);

        line-height:
            1.08;

    }


    .testimonial-author {

        margin-top:
            28px;

    }


    .testimonial-secondary {

        grid-template-columns:
            1fr;

        gap:
            0;

        margin-top:
            80px;

        padding-top:
            0;

        border-top:
            0;

    }


    .testimonial-small {

        padding:
            40px 0;

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

    }


    .testimonial-small + .testimonial-small {

        padding:
            40px 0;

        border-left:
            0;

    }


    .testimonial-small blockquote {

        max-width:
            340px;

        font-size:
            27px;

    }

}

/* =========================================================
   JOURNAL — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .journal-header {

        grid-template-columns:
            1fr;

        gap:
            45px;

        margin-bottom:
            75px;

    }


    .journal-grid {

        grid-template-columns:
            1fr 1fr;

        column-gap:
            40px;

    }


    .journal-card-1 {

        grid-row:
            auto;

    }


    .journal-card-2 {

        padding-top:
            60px;

    }

}


/* =========================================================
   JOURNAL — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .journal-section {

        padding:
            100px 0 110px;

    }


    .journal-header {

        gap:
            40px;

        margin-bottom:
            60px;

    }


    .journal-heading h2 {

        font-size:
            clamp(48px, 13vw, 66px);

        line-height:
            1.05;

    }


    .journal-grid {

        display:
            block;

    }


    .journal-card,
    .journal-card-2,
    .journal-card-3 {

        padding:
            0;

        margin-bottom:
            70px;

    }


    .journal-card:last-child {

        margin-bottom:
            0;

    }


    .journal-card-1 .journal-image-wrap,
    .journal-card-2 .journal-image-wrap,
    .journal-card-3 .journal-image-wrap {

        aspect-ratio:
            4 / 3;

    }


    .journal-content {

        padding-top:
            22px;

    }


    .journal-content h3 {

        font-size:
            34px;

    }


    .journal-content p {

        font-size:
            15px;

    }


    .journal-footer {

        justify-content:
            flex-start;

        margin-top:
            45px;

    }

}

/* =========================================================
   START A PROJECT — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .project-cta {

        min-height:
            680px;

    }


    .project-cta-image img {

        object-position:
            58% center;

    }


    .project-cta-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(25,22,18,.18) 0%,
                rgba(25,22,18,.35) 35%,
                rgba(25,22,18,.78) 100%
            );

    }


    .project-cta-container {

        min-height:
            680px;

        align-items:
            flex-end;

        padding-top:
            80px;

        padding-bottom:
            60px;

    }


    .project-cta-content {

        max-width:
            100%;

    }


    .project-cta h2 {

        margin-top:
            20px;

        font-size:
            clamp(48px, 13vw, 68px);

        line-height:
            .94;

    }


    .project-cta p {

        max-width:
            340px;

        font-size:
            15px;

        margin-bottom:
            28px;

    }


    .cta-light-button {

        padding:
            15px 19px;

    }

}
/* =========================================================
   REVOLUTION-STYLE RESPONSIVE OVERRIDES
   ========================================================= */

@media (max-width: 1000px) {
    .rev-controls { left: auto; right: 28px; transform: none; }
    .rev-counter { right: 28px; bottom: 84px; }
    .project-rev-slide { grid-template-columns: minmax(0, 1.5fr) minmax(250px, .8fr); gap: 45px; }
    .project-revolution-track { min-height: 560px; }
}

@media (max-width: 760px) {
    .rev-hero { min-height: 720px; height: 100svh; }
    .rev-slide .hero-image { object-position: 55% center; }
    .rev-controls { right: 20px; bottom: 22px; gap: 12px; }
    .rev-arrow { width: 30px; height: 30px; font-size: 12px; }
    .rev-dots { gap: 7px; }
    .rev-dots button.is-active { width: 20px; }
    .rev-counter { left: 20px; right: auto; bottom: 28px; font-size: 9px; }
    .rev-progress { height: 1px; }

    .project-revolution-track { min-height: 720px; }
    .project-rev-slide { display: block; }
    .project-rev-image { width: 100%; aspect-ratio: 4 / 3; }
    .project-rev-info { max-width: 100%; margin-top: 32px; }
    .project-rev-info h3 { font-size: clamp(40px, 12vw, 54px); }
    .project-rev-info p { margin-top: 18px; font-size: 15px; line-height: 1.7; }
    .project-rev-navigation { margin-top: 28px; gap: 14px; }
    .project-rev-line { min-width: 40px; }
    .project-rev-arrow { width: 38px; height: 38px; flex-basis: 38px; }
}

@media (max-width: 480px) {
    .rev-hero { min-height: 680px; }
    .rev-controls { right: 16px; bottom: 20px; }
    .rev-counter { left: 16px; bottom: 24px; }
    .project-revolution-track { min-height: 680px; }
    .project-rev-info { margin-top: 26px; }
    .project-rev-info h3 { font-size: 40px; }
}

/* =========================================================
   SELECTED WORK — SCROLL STACK RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {
    .selected-work-layout {
        grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
        gap: 38px;
    }

    .selected-work-heading {
        margin-top: 48px;
    }

    .selected-work-heading h2 {
        font-size: clamp(52px, 6vw, 76px);
    }

    .selected-work-heading p {
        font-size: 15px;
    }

    .selected-work-scroll-note {
        margin-top: 60px;
    }

    .selected-work-stack {
        height: min(72vh, 650px);
    }

    .work-stack-card-header {
        flex-basis: 64px;
        grid-template-columns: 45px minmax(0, 1fr) 28px;
        padding: 0 20px;
    }

    .work-stack-title {
        font-size: 20px;
    }

    .work-stack-project-title {
        font-size: clamp(40px, 5vw, 60px);
    }
}

@media (max-width: 760px) {
    .selected-work-section {
        background: #24211f;
        padding: 0;
    }

    .selected-work-stage {
        min-height: auto;
    }

    .selected-work-layout {
        position: relative;
        top: auto;
        height: auto;
        min-height: auto;
        display: block;
        padding-top: 95px;
        padding-bottom: 100px;
        overflow: visible;
    }

    .selected-work-intro {
        position: relative;
        top: auto;
        margin-bottom: 60px;
        max-width: none;
    }

    .selected-work-heading {
        margin-top: 40px;
    }

    .selected-work-heading h2 {
        font-size: clamp(52px, 14vw, 72px);
        line-height: 1.05;
    }

    .selected-work-heading p {
        max-width: 430px;
        margin-top: 25px;
        font-size: 16px;
    }

    .selected-work-scroll-note {
        display: none;
    }

    .selected-work-stack-wrap {
        height: auto;
    }

    .selected-work-stack {
        height: auto;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .work-stack-card,
    .work-stack-card.is-active,
    .work-stack-card.is-past {
        position: relative;
        inset: auto;
        z-index: auto;
        height: auto;
        min-height: 500px;
        display: flex;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        pointer-events: auto;
    }

    .work-stack-card-header {
        flex-basis: 62px;
        grid-template-columns: 42px minmax(0, 1fr) 26px;
        gap: 10px;
        padding: 0 17px;
    }

    .work-stack-number {
        font-size: 10px;
    }

    .work-stack-title {
        font-size: 18px;
    }

    .work-stack-panel {
        height: 440px;
        flex: none;
    }

    .work-stack-media img {
        transform: scale(1);
        filter: saturate(1);
    }

    .work-stack-content,
    .work-stack-card.is-active .work-stack-content {
        right: 22px;
        bottom: 25px;
        left: 22px;
        opacity: 1;
        transform: none;
    }

    .work-stack-project-title {
        font-size: clamp(38px, 11vw, 54px);
    }

    .work-stack-description {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.65;
    }

    .work-stack-link {
        margin-top: 22px;
    }

    .work-stack-image-number {
        top: 16px;
        left: 16px;
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 480px) {
    .selected-work-layout {
        padding-top: 80px;
        padding-bottom: 85px;
    }

    .selected-work-heading h2 {
        font-size: 50px;
    }

    .work-stack-card {
        min-height: 470px;
    }

    .work-stack-panel {
        height: 408px;
    }

    .work-stack-title {
        font-size: 17px;
    }

    .work-stack-project-title {
        font-size: 39px;
    }

    .work-stack-description {
        font-size: 13px;
    }
}

/* =========================================================
   SELECTED WORK — FINAL STACK RESPONSIVE OVERRIDE
   =========================================================
   These rules intentionally override the older mobile rules
   above that converted the selected-work cards into a normal
   vertical list. The desktop stack behaviour is preserved
   on tablet and mobile.
   ========================================================= */

@media (max-width: 1000px) {

    .selected-work-stack {
        --stack-header-height: 64px;
        height: min(72vh, 650px);
        overflow: visible;
    }

    .work-stack-card.is-active {
        top: calc(var(--active-card, 0) * var(--stack-header-height));
        height: calc(100% - (var(--active-card, 0) * var(--stack-header-height)));
    }

    .work-stack-card.is-past {
        top: calc(var(--card-index, 0) * var(--stack-header-height));
        height: 100%;
    }
}

@media (max-width: 760px) {

    .selected-work-section {
        background: #24211f;
        padding: 0;
    }

    .selected-work-stage {
        min-height: 430vh;
        position: relative;
    }

    .selected-work-layout {
        position: sticky;
        top: 0;
        height: 100svh;
        min-height: 620px;
        display: block;
        padding-top: 82px;
        padding-bottom: 24px;
        overflow: hidden;
    }

    .selected-work-intro {
        display: none;
    }

    .selected-work-stack-wrap {
        width: 100%;
        height: calc(100svh - 106px);
        min-height: 0;
        margin: 0;
        overflow: visible;
    }

    .selected-work-stack {
        --stack-header-height: 58px;
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
        position: relative;
        overflow: visible;
    }

    .work-stack-card,
    .work-stack-card.is-active,
    .work-stack-card.is-past,
    .work-stack-card.is-future {
        position: absolute;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        transform: translate3d(0, 0, 0) scale(1) !important;
        transition:
            top 700ms cubic-bezier(.2,.75,.2,1),
            height 700ms cubic-bezier(.2,.75,.2,1),
            opacity 450ms ease,
            filter 450ms ease;
        overflow: hidden;
    }

    .work-stack-card.is-active {
        top: calc(var(--active-card, 0) * var(--stack-header-height));
        height: calc(100% - (var(--active-card, 0) * var(--stack-header-height)));
        opacity: 1 !important;
        visibility: visible;
        pointer-events: auto;
        z-index: 50;
        filter: none !important;
    }

    .work-stack-card.is-past {
        top: calc(var(--card-index, 0) * var(--stack-header-height));
        height: 100%;
        opacity: 1 !important;
        visibility: visible;
        pointer-events: none;
        z-index: calc(40 - var(--card-index, 0));
        filter: saturate(.78) brightness(.82) !important;
    }

    .work-stack-card.is-past .work-stack-panel {
        display: none;
    }

    .work-stack-card.is-active .work-stack-panel {
        display: block;
        height: auto;
        flex: 1 1 auto;
    }

    .work-stack-card.is-future {
        top: calc(100% + 80px);
        height: 100%;
        opacity: 0 !important;
        visibility: hidden;
        pointer-events: none;
        z-index: 1;
    }

    .work-stack-card-header {
        flex: 0 0 var(--stack-header-height);
        height: var(--stack-header-height);
        min-height: var(--stack-header-height);
        grid-template-columns: 42px minmax(0, 1fr) 26px;
        gap: 10px;
        padding: 0 17px;
        flex-shrink: 0;
    }

    .work-stack-number {
        font-size: 10px;
    }

    .work-stack-title {
        font-size: 18px;
    }

    .work-stack-status {
        width: 22px;
        height: 22px;
    }

    .work-stack-status-line {
        top: 11px;
        width: 20px;
    }

    .work-stack-card.is-active .work-stack-media {
        width: 100%;
        height: 100%;
    }

    .work-stack-card.is-active .work-stack-media img {
        transform: scale(1);
        filter: saturate(1);
    }

    .work-stack-content,
    .work-stack-card.is-active .work-stack-content {
        right: 22px;
        bottom: 25px;
        left: 22px;
        max-width: none;
        opacity: 1;
        transform: none;
    }

    .work-stack-project-title {
        font-size: clamp(38px, 11vw, 54px);
    }

    .work-stack-description {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.65;
    }

    .work-stack-link {
        margin-top: 22px;
    }

    .work-stack-image-number {
        top: 16px;
        left: 16px;
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 480px) {

    .selected-work-layout {
        padding-top: 72px;
        padding-bottom: 18px;
    }

    .selected-work-stack-wrap {
        height: calc(100svh - 90px);
    }

    .selected-work-stack {
        --stack-header-height: 54px;
    }

    .work-stack-card-header {
        flex-basis: 54px;
        height: 54px;
        min-height: 54px;
        grid-template-columns: 36px minmax(0, 1fr) 24px;
        padding: 0 14px;
    }

    .work-stack-title {
        font-size: 16px;
    }

    .work-stack-project-title {
        font-size: 39px;
    }

    .work-stack-description {
        font-size: 13px;
    }

    .work-stack-content,
    .work-stack-card.is-active .work-stack-content {
        right: 18px;
        bottom: 20px;
        left: 18px;
    }
}


/* =========================================================
   SELECTED WORK — FIXED RESPONSIVE STACK
   ========================================================= */

/* IMPORTANT:
   The stack remains absolute on desktop/tablet. */
@media (min-width: 761px) {
    .selected-work-stack {
        overflow: visible;
    }

    .work-stack-card {
        position: absolute;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
    }

    .work-stack-card.is-active {
        visibility: visible;
        opacity: 1 !important;
        pointer-events: auto;
        z-index: 50;
    }

    .work-stack-card.is-past {
        visibility: visible;
        opacity: 1 !important;
        pointer-events: none;
        z-index: calc(40 - var(--card-index, 0));
    }

    .work-stack-card.is-past .work-stack-panel {
        display: block;
        opacity: 0;
        visibility: visible;
    }

    .work-stack-card.is-future {
        visibility: hidden;
        opacity: 0 !important;
        pointer-events: none;
        z-index: 1;
    }
}

/* Mobile/tablet stack */
@media (max-width: 760px) {

    .selected-work-stage {
        min-height: 430vh;
        position: relative;
    }

    .selected-work-layout {
        position: sticky;
        top: 0;
        height: 100svh;
        min-height: 620px;
        display: block;
        overflow: hidden;
    }

    .selected-work-stack-wrap {
        width: 100%;
        height: calc(100svh - 106px);
        min-height: 0;
        overflow: visible;
    }

    .selected-work-stack {
        width: 100%;
        height: 100%;
        min-height: 0;
        position: relative;
        overflow: visible;
    }

    .work-stack-card,
    .work-stack-card.is-active,
    .work-stack-card.is-past,
    .work-stack-card.is-future {
        position: absolute;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        transform: translate3d(0,0,0) scale(1) !important;
        overflow: hidden;
    }

    .work-stack-card.is-active {
        opacity: 1 !important;
        visibility: visible;
        z-index: 50;
    }

    .work-stack-card.is-past {
        opacity: 1 !important;
        visibility: visible;
        pointer-events: none;
        z-index: calc(40 - var(--card-index, 0));
    }

    .work-stack-card.is-past .work-stack-panel {
        display: block;
        opacity: 0;
        visibility: visible;
    }

    .work-stack-card.is-future {
        opacity: 0 !important;
        visibility: hidden;
        z-index: 1;
    }

    .work-stack-card.is-active .work-stack-panel {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
    }

    .work-stack-card.is-active .work-stack-media {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .work-stack-card.is-active .work-stack-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1);
    }
}

@media (max-width: 480px) {
    .selected-work-stack-wrap {
        height: calc(100svh - 90px);
    }
}


/* =========================================================
   SELECTED WORK — FIXED RESPONSIVE STACK
   ========================================================= */

/* IMPORTANT:
   The stack remains absolute on desktop/tablet. */
@media (min-width: 761px) {
    .selected-work-stack {
        overflow: visible;
    }

    .work-stack-card {
        position: absolute;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
    }

    .work-stack-card.is-active {
        visibility: visible;
        opacity: 1 !important;
        pointer-events: auto;
        z-index: 50;
    }

    .work-stack-card.is-past {
        visibility: visible;
        opacity: 1 !important;
        pointer-events: none;
        z-index: calc(40 - var(--card-index, 0));
    }

    .work-stack-card.is-past .work-stack-panel {
        display: block;
        opacity: 0;
        visibility: visible;
    }

    .work-stack-card.is-future {
        visibility: hidden;
        opacity: 0 !important;
        pointer-events: none;
        z-index: 1;
    }
}

/* Mobile/tablet stack */
@media (max-width: 760px) {

    .selected-work-stage {
        min-height: 430vh;
        position: relative;
    }

    .selected-work-layout {
        position: sticky;
        top: 0;
        height: 100svh;
        min-height: 620px;
        display: block;
        overflow: hidden;
    }

    .selected-work-stack-wrap {
        width: 100%;
        height: calc(100svh - 106px);
        min-height: 0;
        overflow: visible;
    }

    .selected-work-stack {
        width: 100%;
        height: 100%;
        min-height: 0;
        position: relative;
        overflow: visible;
    }

    .work-stack-card,
    .work-stack-card.is-active,
    .work-stack-card.is-past,
    .work-stack-card.is-future {
        position: absolute;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        transform: translate3d(0,0,0) scale(1) !important;
        overflow: hidden;
    }

    .work-stack-card.is-active {
        opacity: 1 !important;
        visibility: visible;
        z-index: 50;
    }

    .work-stack-card.is-past {
        opacity: 1 !important;
        visibility: visible;
        pointer-events: none;
        z-index: calc(40 - var(--card-index, 0));
    }

    .work-stack-card.is-past .work-stack-panel {
        display: block;
        opacity: 0;
        visibility: visible;
    }

    .work-stack-card.is-future {
        opacity: 0 !important;
        visibility: hidden;
        z-index: 1;
    }

    .work-stack-card.is-active .work-stack-panel {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
    }

    .work-stack-card.is-active .work-stack-media {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .work-stack-card.is-active .work-stack-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1);
    }
}

@media (max-width: 480px) {
    .selected-work-stack-wrap {
        height: calc(100svh - 90px);
    }
}

/* =========================================================
   SELECTED WORK STACK — V2 RESPONSIVE SAFETY
   ========================================================= */

@media (min-width: 761px) {
    .selected-work-stage,
    .selected-work-layout,
    .selected-work-stack-wrap,
    .selected-work-stack {
        max-width: 100%;
    }

    .work-stack-card {
        max-width: 100%;
    }
}

@media (max-width: 760px) {
    .selected-work-stack {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .work-stack-card,
    .work-stack-card.is-active,
    .work-stack-card.is-past,
    .work-stack-card.is-future {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        transform: none !important;
    }
}

/* =========================================================
   OAK & IVORY — FINAL RESPONSIVE OVERRIDES
   These rules intentionally come last so they override older
   stack/experimental responsive rules without deleting them.
   ========================================================= */

@media (max-width: 1100px) {
    :root {
        --gutter: 28px;
    }

    .selected-work-layout {
        grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
        gap: 42px;
    }

    .selected-work-heading {
        margin-top: 45px;
    }

    .selected-work-heading h2 {
        font-size: clamp(52px, 6vw, 78px);
    }

    .selected-work-panel-inner {
        grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr);
    }

    .selected-work-details {
        padding: 30px;
    }

    .selected-work-details h3 {
        font-size: clamp(38px, 4vw, 56px);
    }

    .inner-hero {
        padding: 105px 0 75px;
    }

    .inner-hero-grid,
    .editorial-grid,
    .project-overview-grid,
    .project-story-grid,
    .contact-grid,
    .contact-form-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .editorial-section,
    .values-section,
    .services-list-section,
    .process-section,
    .portfolio-grid-section,
    .portfolio-note,
    .journal-list,
    .contact-form-section,
    .project-overview,
    .project-story,
    .related-projects {
        padding: 85px 0;
    }

    .image-feature {
        padding: 70px 0;
    }

    .image-caption {
        margin: 0;
        max-width: none;
    }

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

    .portfolio-grid {
        gap: 60px 25px;
    }

    .project-detail-image {
        width: calc(100% - 40px);
    }

    .project-detail-intro {
        padding: 55px 0 75px;
    }

    .project-gallery {
        padding-bottom: 80px;
    }

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

    .journal-row {
        gap: 40px;
    }

    .contact-hero {
        padding: 120px 0 80px;
    }

    .article-header {
        padding: 115px 0 75px;
    }

    .legal-page {
        padding: 105px 0 90px;
    }
}

@media (max-width: 760px) {
    :root {
        --gutter: 20px;
    }

    .header-inner {
        min-height: 82px;
    }

    /* Current selected-work accordion */
    .selected-work-section {
        padding: 90px 0 105px;
    }

    .selected-work-layout {
        display: block;
        min-height: 0;
        height: auto;
        padding: 0;
        overflow: visible;
    }

    .selected-work-intro {
        position: relative;
        top: auto;
        margin-bottom: 55px;
        max-width: none;
    }

    .selected-work-heading {
        margin-top: 38px;
    }

    .selected-work-heading h2 {
        font-size: clamp(50px, 14vw, 72px);
        line-height: 1.05;
    }

    .selected-work-heading p {
        max-width: 430px;
        margin-top: 25px;
        font-size: 16px;
    }

    .selected-work-accordion {
        width: 100%;
    }

    .selected-work-trigger {
        grid-template-columns: 40px minmax(0, 1fr) 28px;
        gap: 10px;
        min-height: 62px;
        padding: 0 16px;
    }

    .selected-work-number {
        font-size: 9px;
    }

    .selected-work-title {
        font-size: 18px;
    }

    .selected-work-panel {
        transition-duration: 500ms;
    }

    .selected-work-item.is-active .selected-work-panel {
        max-height: 900px;
    }

    .selected-work-panel-inner {
        grid-template-columns: 1fr;
    }

    .selected-work-image {
        aspect-ratio: 4 / 3;
    }

    .selected-work-details {
        padding: 28px 22px 32px;
    }

    .selected-work-details h3 {
        font-size: clamp(38px, 11vw, 54px);
    }

    .selected-work-details p {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.65;
    }

    .selected-work-image-number {
        top: 16px;
        left: 16px;
        width: 38px;
        height: 38px;
    }

    /* Inner pages */
    .inner-hero {
        padding: 85px 0 65px;
    }

    .inner-hero h1 {
        font-size: clamp(52px, 14vw, 70px);
    }

    .inner-hero-grid > p {
        font-size: 16px;
    }

    .editorial-grid h2,
    .section-heading h2,
    .text-cta h2,
    .portfolio-note h2,
    .project-overview h2,
    .project-story h2,
    .related-projects h2,
    .contact-form-grid h2 {
        font-size: clamp(42px, 11vw, 56px);
    }

    .editorial-grid {
        gap: 28px;
    }

    .image-feature {
        padding: 55px 0;
    }

    .image-caption {
        padding: 30px 25px;
    }

    .image-caption h2 {
        font-size: 36px;
    }

    .service-row {
        grid-template-columns: 42px minmax(0, 1fr) 28px;
        gap: 12px;
        padding: 32px 0;
    }

    .service-row h2 {
        font-size: clamp(30px, 8vw, 40px);
    }

    .service-row p {
        font-size: 14px;
    }

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

    .portfolio-meta h2 {
        font-size: 38px;
    }

    .project-detail-hero {
        padding-top: 25px;
    }

    .project-detail-image {
        width: 100%;
    }

    .project-detail-image img {
        aspect-ratio: 4 / 3;
    }

    .project-detail-intro {
        padding: 45px 0 65px;
    }

    .project-detail-intro h1 {
        font-size: 60px;
    }

    .project-facts {
        grid-template-columns: 1fr;
    }

    .project-facts span {
        padding-bottom: 18px;
    }

    .project-gallery-pair {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .project-story h2 {
        font-size: 44px;
    }

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

    .journal-row {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 50px 0;
    }

    .journal-row h2 {
        font-size: 46px;
    }

    .article-header h1 {
        font-size: 58px;
    }

    .article-copy {
        margin-top: 55px;
        padding: 0 10px;
    }

    .article-copy p {
        font-size: 16px;
    }

    .article-copy h2 {
        font-size: 38px;
    }

    .contact-hero h1 {
        font-size: 60px;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .contact-form label:nth-last-of-type(1),
    .contact-form button {
        grid-column: auto;
    }

    .legal-page {
        min-height: 460px;
        padding: 85px 0 75px;
    }

    .legal-page h1 {
        font-size: 60px;
        margin-bottom: 40px;
    }

    .legal-page h2 {
        font-size: 34px;
    }

    .legal-page p {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .site-logo-main {
        font-size: 20px;
    }

    .site-logo-sub {
        font-size: 7px;
    }

    .selected-work-section {
        padding: 75px 0 90px;
    }

    .selected-work-heading h2 {
        font-size: 50px;
    }

    .selected-work-trigger {
        min-height: 58px;
        padding: 0 14px;
    }

    .selected-work-title {
        font-size: 17px;
    }

    .selected-work-details {
        padding: 25px 18px 30px;
    }

    .selected-work-details h3 {
        font-size: 39px;
    }

    .selected-work-details p {
        font-size: 13px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .project-detail-intro h1,
    .contact-hero h1,
    .legal-page h1 {
        font-size: 54px;
    }
}

/* =========================================================
   IMAGE SAFETY
   ========================================================= */

img {
    max-width: 100%;
}

.selected-work-image img,
.portfolio-image img,
.journal-row-image img,
.project-detail-image img,
.project-gallery-large,
.project-gallery-pair img,
.image-feature img,
.article-body > img {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Do not allow older scroll-stack rules to hide current accordion content. */
@media (max-width: 760px) {
    .selected-work-layout,
    .selected-work-stack-wrap,
    .selected-work-stack {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        overflow: visible;
        transform: none !important;
    }
}

/* =========================================================
   SELECTED WORK — MOBILE FINAL FIX
   =========================================================
   The desktop/tablet scroll stack remains unchanged.
   On phones, Selected Work becomes a normal vertical list:
   every project header + image + project text remains visible.

   This block is intentionally LAST so it overrides the older
   experimental mobile stack rules above.
   ========================================================= */

@media (max-width: 760px) {

    .selected-work-section {
        position: relative !important;
        padding: 75px 0 90px !important;
        overflow: visible !important;
    }

    .selected-work-stage {
        position: relative !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .selected-work-layout {
        position: relative !important;
        top: auto !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .selected-work-intro {
        display: block !important;
        position: relative !important;
        top: auto !important;
        max-width: none !important;
        margin: 0 0 45px !important;
    }

    .selected-work-heading {
        margin-top: 38px !important;
    }

    .selected-work-stack-wrap {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .selected-work-stack {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        overflow: visible !important;
    }

    .work-stack-card,
    .work-stack-card.is-active,
    .work-stack-card.is-past,
    .work-stack-card.is-future {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: auto !important;
        filter: none !important;
        overflow: hidden !important;
    }

    .work-stack-card-header {
        position: relative !important;
        flex: 0 0 58px !important;
        height: 58px !important;
        min-height: 58px !important;
        width: 100% !important;
        grid-template-columns: 36px minmax(0, 1fr) 24px !important;
        gap: 10px !important;
        padding: 0 14px !important;
        z-index: 5 !important;
    }

    .work-stack-title {
        font-size: 17px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .work-stack-panel,
    .work-stack-card.is-active .work-stack-panel,
    .work-stack-card.is-past .work-stack-panel,
    .work-stack-card.is-future .work-stack-panel {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: hidden !important;
    }

    .work-stack-media,
    .work-stack-card.is-active .work-stack-media {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .work-stack-media img,
    .work-stack-card.is-active .work-stack-media img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transform: none !important;
        filter: saturate(1) !important;
    }

    .work-stack-overlay {
        position: absolute !important;
        inset: 0 !important;
    }

    .work-stack-image-number {
        top: 14px !important;
        left: 14px !important;
        width: 38px !important;
        height: 38px !important;
    }

    .work-stack-content,
    .work-stack-card.is-active .work-stack-content,
    .work-stack-card.is-past .work-stack-content,
    .work-stack-card.is-future .work-stack-content {
        position: absolute !important;
        right: 18px !important;
        bottom: 20px !important;
        left: 18px !important;
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        z-index: 4 !important;
    }

    .work-stack-project-title {
        font-size: 39px !important;
    }

    .work-stack-description {
        max-width: 100% !important;
        margin-top: 14px !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .work-stack-link {
        margin-top: 18px !important;
    }

    /* On mobile every project is a normal visible card. */
    .work-stack-card.is-past .work-stack-panel,
    .work-stack-card.is-future .work-stack-panel {
        display: block !important;
    }

}

@media (max-width: 480px) {

    .selected-work-section {
        padding: 65px 0 80px !important;
    }

    .selected-work-intro {
        margin-bottom: 38px !important;
    }

    .selected-work-heading h2 {
        font-size: 50px !important;
    }

    .work-stack-card-header {
        flex-basis: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
    }

    .work-stack-project-title {
        font-size: 36px !important;
    }

    .work-stack-description {
        font-size: 13px !important;
    }
}

/* =========================================================
   GLOBAL WHATSAPP + COMPLETED PROJECT RESPONSIVE OVERRIDES
   ========================================================= */
@media (max-width: 900px) {
    .completed-project-detail .project-detail-intro { padding-top: 34px; padding-bottom: 48px; }
    .completed-project-gallery-section { padding-top: 70px; padding-bottom: 80px; }
}
@media (max-width: 760px) {
    .completed-project-gallery-heading h2 { font-size: 44px; }
    .completed-project-gallery-item { margin-bottom: 22px; }
}


/* =========================================================
   PORTFOLIO PAGE — FINAL RESPONSIVE OVERRIDES
   ========================================================= */

@media (max-width: 1100px) {
    .inner-hero {
        padding: 125px 0 90px;
    }

    .inner-hero-grid {
        grid-template-columns: minmax(200px, .8fr) minmax(0, 1.7fr);
        gap: 55px;
    }

    .inner-hero h1 {
        font-size: clamp(58px, 7vw, 88px);
    }

    .portfolio-grid-section {
        padding: 100px 0 120px;
    }

    .portfolio-grid {
        column-gap: 35px;
        row-gap: 85px;
    }

    .portfolio-meta h2 {
        font-size: clamp(34px, 3.5vw, 46px);
    }

    .portfolio-note {
        padding: 100px 0 120px;
    }
}

@media (max-width: 760px) {
    .inner-hero {
        padding: 90px 0 65px;
    }

    .inner-hero-grid {
        display: block;
    }

    .inner-hero h1 {
        max-width: 100%;
        margin-top: 0;
        font-size: clamp(52px, 14vw, 72px);
        line-height: .95;
    }

    .inner-hero-grid > p {
        max-width: 430px;
        margin-top: 30px;
        font-size: 16px;
        line-height: 1.7;
    }

    .portfolio-grid-section {
        padding: 75px 0 90px;
    }

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

    .portfolio-image {
        aspect-ratio: 4 / 3;
    }

    .portfolio-meta {
        padding-top: 20px;
    }

    .portfolio-meta > span:first-child {
        margin-bottom: 13px;
        font-size: 9px;
    }

    .portfolio-meta h2 {
        font-size: clamp(36px, 10vw, 50px);
        line-height: 1;
    }

    .portfolio-meta p {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.7;
    }

    .portfolio-meta .text-link {
        margin-top: 21px;
    }

    .portfolio-note {
        padding: 85px 0 100px;
    }

    .portfolio-note h2 {
        font-size: clamp(44px, 12vw, 60px);
        line-height: 1;
    }

    .portfolio-note p {
        margin-top: 24px;
        font-size: 15px;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .inner-hero {
        padding: 78px 0 55px;
    }

    .inner-hero h1 {
        font-size: 50px;
    }

    .inner-hero-grid > p {
        font-size: 15px;
    }

    .portfolio-grid-section {
        padding: 65px 0 80px;
    }

    .portfolio-grid {
        gap: 60px;
    }

    .portfolio-meta h2 {
        font-size: 38px;
    }

    .portfolio-note {
        padding: 75px 0 85px;
    }

    .portfolio-note h2 {
        font-size: 42px;
    }
}


/* =========================================================
   COMPLETED PROJECT DETAIL — FINAL RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .completed-project-detail .project-detail-intro {
        padding: 52px 0 85px;
    }

    .completed-project-detail .project-detail-intro h1 {
        font-size: clamp(54px, 6.5vw, 82px);
    }

    .completed-project-detail .project-overview {
        padding: 100px 0 110px;
    }

    .completed-project-detail .project-overview-grid {
        grid-template-columns: minmax(190px, .75fr) minmax(0, 1.5fr);
        gap: 60px;
    }

    .completed-project-detail .completed-project-gallery-section {
        padding: 105px 0 125px;
    }

    .completed-project-detail .related-projects {
        padding: 105px 0 120px;
    }

    .completed-project-detail .related-grid {
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .completed-project-detail .completed-project-cover img {
        height: min(62vh, 620px);
    }

    .completed-project-detail .project-detail-intro {
        padding: 42px 0 75px;
    }

    .completed-project-detail .project-overview-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .completed-project-detail .project-overview {
        padding: 85px 0 95px;
    }

    .completed-project-detail .project-facts {
        margin-top: 45px;
    }

    .completed-project-detail .completed-project-gallery-section {
        padding: 90px 0 105px;
    }

    .completed-project-detail .completed-project-gallery-heading {
        margin-bottom: 40px;
    }

    .completed-project-detail .related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .completed-project-detail .related-projects {
        padding: 90px 0 105px;
    }
}

@media (max-width: 760px) {
    .completed-project-detail .completed-project-cover img {
        height: auto;
        max-height: none;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .completed-project-detail .project-detail-intro {
        padding: 34px 0 70px;
    }

    .completed-project-detail .project-detail-intro .eyebrow {
        margin-bottom: 18px;
        font-size: 9px;
    }

    .completed-project-detail .project-detail-intro h1 {
        max-width: 100%;
        font-size: clamp(46px, 12vw, 64px);
        line-height: .96;
    }

    .completed-project-detail .project-detail-intro p {
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.7;
    }

    .completed-project-detail .project-overview {
        padding: 75px 0 85px;
    }

    .completed-project-detail .project-overview-grid {
        gap: 38px;
    }

    .completed-project-detail .project-overview h2 {
        font-size: clamp(42px, 12vw, 58px);
        line-height: 1;
    }

    .completed-project-detail .project-overview-grid > div:last-child > p {
        font-size: 15px;
        line-height: 1.7;
    }

    .completed-project-detail .project-facts {
        grid-template-columns: 1fr;
        margin-top: 38px;
    }

    .completed-project-detail .project-facts span,
    .completed-project-detail .project-facts span + span {
        padding: 18px 0;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .completed-project-detail .project-facts span:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .completed-project-detail .completed-project-gallery-section {
        padding: 75px 0 90px;
    }

    .completed-project-detail .completed-project-gallery-heading {
        margin-bottom: 32px;
    }

    .completed-project-detail .completed-project-gallery-heading h2 {
        font-size: clamp(46px, 12vw, 62px);
        line-height: 1;
    }

    .completed-project-detail .completed-project-gallery {
        columns: 1;
    }

    .completed-project-detail .completed-project-gallery-item {
        display: block;
        margin-bottom: 24px;
    }

    .completed-project-detail .completed-project-gallery-item img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .completed-project-detail .completed-project-gallery-item figcaption {
        margin-top: 8px;
        font-size: 8px;
    }

    .completed-project-detail .related-projects {
        padding: 75px 0 90px;
    }

    .completed-project-detail .related-projects h2 {
        font-size: clamp(44px, 12vw, 60px);
    }

    .completed-project-detail .related-grid {
        grid-template-columns: 1fr;
        gap: 45px;
        margin-top: 42px;
    }

    .completed-project-detail .related-grid img {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 480px) {
    .completed-project-detail .project-detail-intro {
        padding: 30px 0 60px;
    }

    .completed-project-detail .project-detail-intro h1 {
        font-size: 44px;
    }

    .completed-project-detail .project-overview {
        padding: 65px 0 75px;
    }

    .completed-project-detail .project-overview h2 {
        font-size: 42px;
    }

    .completed-project-detail .completed-project-gallery-section {
        padding: 65px 0 80px;
    }

    .completed-project-detail .completed-project-gallery-heading h2 {
        font-size: 42px;
    }

    .completed-project-detail .related-projects {
        padding: 65px 0 80px;
    }

    .completed-project-detail .related-projects h2 {
        font-size: 42px;
    }
}


/* =========================================================
   OAK & IVORY — ALL PAGES FINAL RESPONSIVE LAYER
   ========================================================= */

@media (max-width: 1100px) {
    .editorial-grid {
        grid-template-columns: minmax(150px, .55fr) minmax(0, 1.45fr);
        gap: 55px;
    }

    .values-grid,
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .values-grid article:nth-child(3),
    .process-grid article:nth-child(5),
    .process-grid article:nth-child(6) {
        border-left: 0;
        padding-left: 0;
    }

    .values-grid article:nth-child(2n),
    .process-grid article:nth-child(2n) {
        padding-left: 30px;
        border-left: 1px solid var(--line);
    }

    .journal-row {
        grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
        gap: 55px;
    }

    .contact-grid,
    .contact-form-grid {
        gap: 55px;
    }
}

@media (max-width: 900px) {
    .editorial-section {
        padding: 85px 0 95px;
    }

    .editorial-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .image-feature {
        padding: 75px 0 85px;
    }

    .values-section,
    .process-section {
        padding: 90px 0 105px;
    }

    .section-heading {
        margin-bottom: 45px;
    }

    .services-list-section {
        padding: 80px 0 95px;
    }

    .journal-list {
        padding: 80px 0 105px;
    }

    .journal-row {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-bottom: 65px;
        margin-bottom: 65px;
    }

    .journal-row-image {
        max-width: 760px;
    }

    .article-header {
        padding: 100px 0 70px;
    }

    .article-body {
        padding: 70px 0 100px;
    }

    .contact-hero {
        padding: 100px 0 75px;
    }

    .contact-grid,
    .contact-form-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contact-details {
        padding-bottom: 0;
        padding-top: 10px;
        border-top: 1px solid var(--line);
    }

    .contact-form-section {
        padding: 85px 0 105px;
    }

    .legal-page {
        min-height: 560px;
        padding: 90px 0 105px;
    }
}

@media (max-width: 760px) {
    .eyebrow {
        font-size: 9px;
    }

    .text-link {
        margin-top: 22px;
        font-size: 9px;
    }

    .editorial-section {
        padding: 70px 0 80px;
    }

    .editorial-grid h2 {
        font-size: clamp(42px, 11vw, 58px);
    }

    .editorial-grid p {
        font-size: 15px;
        line-height: 1.75;
    }

    .image-feature {
        padding: 60px 0 70px;
    }

    .image-feature > .container > img {
        aspect-ratio: 4 / 3;
    }

    .image-caption {
        padding-top: 18px;
    }

    .image-caption h2 {
        font-size: 40px;
    }

    .values-section,
    .process-section {
        padding: 75px 0 85px;
    }

    .section-heading {
        margin-bottom: 35px;
    }

    .section-heading h2 {
        font-size: clamp(42px, 11vw, 58px);
    }

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

    .values-grid article,
    .values-grid article + article,
    .process-grid article,
    .process-grid article:nth-child(2n) {
        min-height: 0;
        padding: 22px 0 25px;
        border-left: 0;
        border-bottom: 1px solid var(--line);
    }

    .values-grid article:first-child,
    .process-grid article:first-child {
        padding-top: 22px;
    }

    .values-grid article:last-child,
    .process-grid article:last-child {
        border-bottom: 0;
    }

    .values-grid article > span,
    .process-grid article > span {
        margin-bottom: 17px;
    }

    .text-cta {
        padding: 75px 0 85px;
    }

    .text-cta h2 {
        font-size: clamp(44px, 11vw, 58px);
    }

    .services-list-section {
        padding: 65px 0 80px;
    }

    .service-row {
        grid-template-columns: 35px minmax(0, 1fr) 28px;
        gap: 12px;
        min-height: 0;
        padding: 28px 0;
    }

    .service-row h2 {
        font-size: clamp(30px, 8.5vw, 42px);
    }

    .service-row p {
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.65;
    }

    .service-row > a {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .journal-list {
        padding: 65px 0 80px;
    }

    .journal-row {
        gap: 25px;
        padding-bottom: 50px;
        margin-bottom: 50px;
    }

    .journal-row-content h2 {
        font-size: clamp(40px, 10vw, 54px);
    }

    .journal-row-content p {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.7;
    }

    .article-header {
        padding: 75px 0 55px;
    }

    .article-header h1 {
        font-size: clamp(48px, 12vw, 66px);
        line-height: .95;
    }

    .article-header p {
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.7;
    }

    .article-body {
        padding: 55px 0 80px;
    }

    .article-body > img {
        aspect-ratio: 4 / 3;
    }

    .article-copy {
        margin-top: 50px;
    }

    .article-copy p {
        font-size: 15px;
        line-height: 1.8;
    }

    .article-copy h2 {
        margin-top: 48px;
        font-size: 40px;
    }

    .article-copy blockquote {
        margin: 42px 0;
        padding-left: 22px;
        font-size: 30px;
    }

    .contact-hero {
        padding: 70px 0 60px;
    }

    .contact-hero h1 {
        font-size: clamp(48px, 12vw, 66px);
    }

    .contact-hero p {
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.7;
    }

    .contact-details {
        gap: 9px;
    }

    .contact-details a,
    .contact-details span:not(.eyebrow) {
        font-size: 13px;
    }

    .contact-form-section {
        padding: 70px 0 80px;
    }

    .contact-form-grid {
        gap: 38px;
    }

    .contact-form-grid h2 {
        font-size: clamp(44px, 11vw, 58px);
    }

    .contact-form-grid > div > p {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.7;
    }

    .contact-form {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-form label:nth-last-of-type(1),
    .contact-form button {
        grid-column: auto;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        min-height: 48px;
        font-size: 14px;
    }

    .contact-form textarea {
        min-height: 140px;
    }

    .contact-form button {
        width: fit-content;
    }

    .legal-page {
        min-height: 500px;
        padding: 70px 0 80px;
    }

    .legal-page h1 {
        margin-bottom: 35px;
        font-size: clamp(48px, 12vw, 64px);
    }

    .legal-page h2 {
        margin-top: 38px;
        font-size: 36px;
    }

    .legal-page p {
        font-size: 14px;
        line-height: 1.8;
    }
}

@media (max-width: 480px) {
    .image-caption h2 {
        font-size: 36px;
    }

    .service-row {
        grid-template-columns: 28px minmax(0, 1fr) 24px;
    }

    .service-number {
        font-size: 8px;
    }

    .service-row h2 {
        font-size: 29px;
    }

    .contact-form button {
        width: 100%;
    }

    .article-copy blockquote {
        font-size: 28px;
    }
}


/* =========================================================
   SERVICES — RESPONSIVE HOVER VISIBILITY FIX
   ========================================================= */
@media (max-width: 1000px) {
    .service-list .service-row {
        padding-left: 0;
        padding-right: 0;
    }
}

/* =========================================================
   PROJECT DETAIL — PLACEHOLDER PROJECT RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
    .project-detail-image img {
        height: min(62vh, 620px);
    }

    .project-detail-intro {
        padding: 52px 0 85px;
    }

    .project-overview {
        padding: 100px 0 110px;
    }

    .project-overview-grid {
        grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
        gap: 60px;
    }

    .project-gallery {
        padding: 100px 0 115px;
    }

    .project-story {
        padding: 95px 0 105px;
    }

    .project-story-grid {
        gap: 50px;
    }

    .project-story article + article {
        padding-left: 50px;
    }

    .project-detail .related-projects {
        padding: 100px 0 115px;
    }

    .project-detail .related-grid {
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .project-detail-image img {
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

    .project-detail-intro {
        padding: 42px 0 75px;
    }

    .project-detail-intro h1 {
        font-size: clamp(50px, 7vw, 76px);
    }

    .project-overview {
        padding: 85px 0 95px;
    }

    .project-overview-grid,
    .project-story-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .project-facts {
        margin-top: 45px;
    }

    .project-gallery {
        padding: 90px 0 105px;
    }

    .project-story {
        padding: 85px 0 95px;
    }

    .project-story article + article {
        padding-left: 0;
        padding-top: 45px;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .project-detail .related-projects {
        padding: 90px 0 105px;
    }

    .project-detail .related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .project-detail-image img {
        aspect-ratio: 4 / 3;
    }

    .project-detail-intro {
        padding: 34px 0 65px;
    }

    .project-detail-intro .eyebrow {
        margin-bottom: 17px;
        font-size: 9px;
        letter-spacing: .15em;
    }

    .project-detail-intro h1 {
        max-width: 100%;
        font-size: clamp(42px, 11vw, 58px);
        line-height: .96;
    }

    .project-detail-intro p {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.7;
    }

    .project-overview {
        padding: 70px 0 80px;
    }

    .project-overview-grid {
        gap: 35px;
    }

    .project-overview-grid > div:first-child .eyebrow {
        margin-bottom: 18px;
    }

    .project-overview h2 {
        font-size: clamp(40px, 10.5vw, 54px);
    }

    .project-overview-grid > div:last-child > p {
        font-size: 14px;
        line-height: 1.7;
    }

    .project-facts {
        grid-template-columns: 1fr;
        margin-top: 35px;
    }

    .project-facts span,
    .project-facts span + span {
        padding: 18px 0;
        border-left: 0;
        border-bottom: 1px solid var(--line);
    }

    .project-facts span:first-child {
        padding-top: 18px;
    }

    .project-facts span:last-child {
        border-bottom: 0;
    }

    .project-gallery {
        padding: 65px 0 80px;
    }

    .project-gallery-large {
        aspect-ratio: 4 / 3;
    }

    .project-gallery-pair {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 18px;
    }

    .project-gallery-pair img {
        aspect-ratio: 4 / 3;
    }

    .project-story {
        padding: 70px 0 80px;
    }

    .project-story-grid {
        gap: 38px;
    }

    .project-story article + article {
        padding-top: 38px;
    }

    .project-story h2 {
        font-size: clamp(38px, 10vw, 52px);
    }

    .project-story p {
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.7;
    }

    .project-detail .related-projects {
        padding: 70px 0 80px;
    }

    .project-detail .related-projects h2 {
        font-size: clamp(42px, 11vw, 56px);
    }

    .project-detail .related-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-top: 38px;
    }

    .project-detail .related-grid span {
        margin-top: 10px;
        font-size: 9px;
    }

    .service-list .service-row:hover {
        padding-left: 0;
        padding-right: 0;
    }

    .service-list .service-row > span,
    .service-list .service-row > div,
    .service-list .service-row > a {
        visibility: visible;
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .project-detail-intro {
        padding: 30px 0 55px;
    }

    .project-detail-intro h1 {
        font-size: 42px;
    }

    .project-overview {
        padding: 60px 0 70px;
    }

    .project-overview h2 {
        font-size: 40px;
    }

    .project-gallery {
        padding: 58px 0 70px;
    }

    .project-story {
        padding: 60px 0 70px;
    }

    .project-story h2 {
        font-size: 38px;
    }

    .project-detail .related-projects {
        padding: 60px 0 70px;
    }

    .project-detail .related-projects h2 {
        font-size: 40px;
    }
}