/* =========================================================
   OAK & IVORY INTERIORS
   GLOBAL DESIGN SYSTEM
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {

    /* Colors */

    --ivory: #F7F3EC;
    --paper: #FCFAF7;
    --white: #FFFDF9;

    --ink: #332D27;
    --muted: #776D63;

    --taupe: #A28F79;
    --beige: #E7DED2;

    --line: rgba(51, 45, 39, 0.14);


    /* Typography */

    --font-display:
        "Cormorant Garamond",
        Georgia,
        serif;

    --font-body:
        "Roboto",
        Arial,
        sans-serif;


    /* Layout */

    --container-width: 1320px;

    --gutter: 40px;


    /* Spacing */

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 96px;
    --space-8: 128px;
    --space-9: 160px;


    /* Animation */

    --transition:
        300ms ease;

}


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

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background:
        var(--paper);

    color:
        var(--ink);

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

    -webkit-font-smoothing:
        antialiased;

}


body.menu-open {

    overflow: hidden;

}


img {

    display: block;

    max-width: 100%;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
input,
textarea,
select {

    font: inherit;

}


/* =========================================================
   GLOBAL CONTAINER
   ========================================================= */

.container {

    width:
        min(
            var(--container-width),
            calc(100% - (var(--gutter) * 2))
        );

    margin-inline:
        auto;

}


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

.site-header {

    position:
        relative;

    z-index:
        100;

    background:
        var(--paper);

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

}


.header-inner {

    min-height:
        96px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


/* =========================================================
   LOGO
   ========================================================= */

.site-logo {

    display:
        inline-flex;

    flex-direction:
        column;

    align-items:
        center;

    line-height:
        1;

}


.site-logo-main {

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

    font-size:
        27px;

    font-weight:
        500;

    letter-spacing:
        0.16em;

}


.site-logo-sub {

    margin-top:
        5px;

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

    font-size:
        9px;

    letter-spacing:
        0.42em;

}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.desktop-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        34px;

}


.desktop-nav a {

    font-size:
        13px;
	
	font-weight:
        400;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    transition:
        opacity var(--transition);

}


.desktop-nav a:hover {

    opacity:
        0.55;

}


.nav-cta {

    padding:
        14px 22px;

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

    font-size:
        12px !important;

    letter-spacing:
        0.06em !important;

}


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

.mobile-menu-toggle,
.mobile-menu {

    display:
        none;

}

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

.hero {

    position: relative;

    min-height: calc(100vh - 1px);

    overflow: hidden;

    background: #3c332b;

    color: #fff;

}


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

.hero-media {

    position: absolute;

    inset: 0;

    z-index: 0;

}


.hero-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

}


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

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(35, 28, 23, 0.62) 0%,
            rgba(35, 28, 23, 0.30) 40%,
            rgba(35, 28, 23, 0.08) 75%,
            rgba(35, 28, 23, 0.16) 100%
        );

}


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

.hero-content {

    position: relative;

    z-index: 2;

    min-height: calc(100vh - 1px);

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-top: 100px;

    padding-bottom: 70px;

}


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

.hero-copy {

    max-width: 760px;

    margin-top: 30px;

}


.hero-eyebrow {

    display: block;

    margin-bottom: 24px;

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

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0.24em;

    text-transform: uppercase;

}


.hero-title {

    max-width: 820px;

    margin: 0;

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

    font-size: clamp(64px, 7vw, 108px);

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -0.025em;

}


.hero-description {

    max-width: 440px;

    margin: 32px 0 0;

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

    font-size: 18px;

    font-weight: 300;

    line-height: 1.7;

}


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

.hero-actions {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 38px;

}


.hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding: 0 26px;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);

}


.hero-button-light {

    background: #fff;

    color: var(--ink);

    border: 1px solid #fff;

}


.hero-button-light:hover {

    background: transparent;

    color: #fff;

}


.hero-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding-bottom: 5px;

    border-bottom: 1px solid rgba(255,255,255,.7);

    color: #fff;

    font-size: 12px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.hero-link span {

    font-size: 16px;

    line-height: 1;

}


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

.hero-bottom {

    position: absolute;

    right: var(--gutter);

    bottom: 44px;

    left: var(--gutter);

    display: flex;

    justify-content: space-between;

    font-size: 10px;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    opacity: .85;

}


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

.hero-scroll {

    position: absolute;

    z-index: 3;

    right: 42px;

    bottom: 40px;

    display: flex;

    align-items: center;

    gap: 14px;

    color: #fff;

    font-size: 9px;

    letter-spacing: .16em;

    text-transform: uppercase;

    writing-mode: vertical-rl;

}


.hero-scroll i {

    display: block;

    width: 1px;

    height: 48px;

    background: rgba(255,255,255,.7);

}


/* =========================================================
   INTRO SECTION
   ========================================================= */

.intro-section {

    padding:
        150px 0;

    background:
        var(--paper);

}


.intro-grid {

    display: grid;

    grid-template-columns:
        1fr 2.5fr;

    gap:
        80px;

}


.section-label {

    display: flex;

    flex-direction: column;

    gap: 8px;

    font-size: 10px;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: var(--muted);

}


.section-label span:first-child {

    color: var(--taupe);

}


.intro-content {

    max-width: 900px;

}


.intro-content h2 {

    margin: 0;

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

    font-size:
        clamp(48px, 5vw, 76px);

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.02em;

}


.intro-content h2 em {

    color:
        var(--taupe);

    font-style:
        italic;

}


.intro-content p {

    max-width:
        620px;

    margin:
        40px 0 0;

    color:
        var(--muted);

    font-size:
        18px;

    line-height:
        1.8;

}


.text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        32px;

    padding-bottom:
        6px;

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

    font-size:
        12px;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}

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

.hero {

    position: relative;

    min-height: calc(100vh - 1px);

    overflow: hidden;

    background: #3c332b;

    color: #fff;

}


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

.hero-media {

    position: absolute;

    inset: 0;

    z-index: 0;

}


.hero-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

}


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

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(35, 28, 23, 0.62) 0%,
            rgba(35, 28, 23, 0.30) 40%,
            rgba(35, 28, 23, 0.08) 75%,
            rgba(35, 28, 23, 0.16) 100%
        );

}


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

.hero-content {

    position: relative;

    z-index: 2;

    min-height: calc(100vh - 1px);

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-top: 100px;

    padding-bottom: 70px;

}


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

.hero-copy {

    max-width: 760px;

    margin-top: 30px;

}


.hero-eyebrow {

    display: block;

    margin-bottom: 24px;

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

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0.24em;

    text-transform: uppercase;

}


.hero-title {

    max-width: 820px;

    margin: 0;

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

    font-size: clamp(64px, 7vw, 108px);

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -0.025em;

}


.hero-description {

    max-width: 440px;

    margin: 32px 0 0;

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

    font-size: 18px;

    font-weight: 300;

    line-height: 1.7;

}


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

.hero-actions {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 38px;

}


.hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding: 0 26px;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);

}


.hero-button-light {

    background: #fff;

    color: var(--ink);

    border: 1px solid #fff;

}


.hero-button-light:hover {

    background: transparent;

    color: #fff;

}


.hero-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding-bottom: 5px;

    border-bottom: 1px solid rgba(255,255,255,.7);

    color: #fff;

    font-size: 12px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.hero-link span {

    font-size: 16px;

    line-height: 1;

}


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

.hero-bottom {

    position: absolute;

    right: var(--gutter);

    bottom: 44px;

    left: var(--gutter);

    display: flex;

    justify-content: space-between;

    font-size: 10px;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    opacity: .85;

}


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

.hero-scroll {

    position: absolute;

    z-index: 3;

    right: 42px;

    bottom: 40px;

    display: flex;

    align-items: center;

    gap: 14px;

    color: #fff;

    font-size: 9px;

    letter-spacing: .16em;

    text-transform: uppercase;

    writing-mode: vertical-rl;

}


.hero-scroll i {

    display: block;

    width: 1px;

    height: 48px;

    background: rgba(255,255,255,.7);

}


/* =========================================================
   INTRO SECTION
   ========================================================= */

.intro-section {

    padding:
        150px 0;

    background:
        var(--paper);

}


.intro-grid {

    display: grid;

    grid-template-columns:
        1fr 2.5fr;

    gap:
        80px;

}


.section-label {

    display: flex;

    flex-direction: column;

    gap: 8px;

    font-size: 10px;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: var(--muted);

}


.section-label span:first-child {

    color: var(--taupe);

}


.intro-content {

    max-width: 900px;

}


.intro-content h2 {

    margin: 0;

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

    font-size:
        clamp(48px, 5vw, 76px);

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.02em;

}


.intro-content h2 em {

    color:
        var(--taupe);

    font-style:
        italic;

}


.intro-content p {

    max-width:
        620px;

    margin:
        40px 0 0;

    color:
        var(--muted);

    font-size:
        18px;

    line-height:
        1.8;

}


.text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        32px;

    padding-bottom:
        6px;

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

    font-size:
        12px;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}

/* =========================================================
   HOMEPAGE HEADER OVER HERO
   ========================================================= */

.site-header-home {

    position: absolute;

    top: 0;

    right: 0;

    left: 0;

    z-index: 100;

    background: transparent;

    border-bottom:
        1px solid rgba(255,255,255,.22);

    color: #fff;

}


.site-header-home .desktop-nav a:hover {

    opacity: .7;

}


.site-header-home .nav-cta {

    border-color:
        rgba(255,255,255,.75);

}


.site-header-home .mobile-menu-toggle span {

    background:
        #fff;

}

/* =========================================================
   SCROLLED HOMEPAGE HEADER
   ========================================================= */

.site-header-home {

    transition:
        background 350ms ease,
        color 350ms ease,
        border-color 350ms ease;

}


.site-header-home.is-scrolled {

    position: fixed;

    background:
        rgba(252,250,247,.96);

    color:
        var(--ink);

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

    backdrop-filter:
        blur(12px);

}


.site-header-home.is-scrolled .nav-cta {

    border-color:
        var(--ink);

}


.site-header-home.is-scrolled .mobile-menu-toggle span {

    background:
        var(--ink);

}

/* =========================================================
   FEATURED PROJECTS
   ========================================================= */

.featured-projects {

    padding:
        160px 0 170px;

    background:
        var(--paper);

}


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

.featured-header {

    display:
        grid;

    grid-template-columns:
        1fr 2.5fr;

    gap:
        80px;

    margin-bottom:
        120px;

}


.featured-heading {

    max-width:
        760px;

}


.featured-heading h2 {

    margin:
        0;

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

    font-size:
        clamp(52px, 5vw, 78px);

    font-weight:
        400;

    line-height:
        .98;

    letter-spacing:
        -.025em;

}


.featured-heading h2 em {

    color:
        var(--taupe);

    font-style:
        italic;

}


.featured-heading p {

    max-width:
        520px;

    margin:
        34px 0 0;

    color:
        var(--muted);

    font-size:
        17px;

    line-height:
        1.8;

}


/* =========================================================
   PROJECT LIST
   ========================================================= */

.projects-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        125px;

}


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

.featured-project {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(300px, .8fr);

    align-items:
        center;

    gap:
        clamp(60px, 9vw, 150px);

}


.featured-project-reverse {

    grid-template-columns:
        minmax(300px, .8fr)
        minmax(0, 1.8fr);

}


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

    order:
        2;

}


.featured-project-reverse .project-info {

    order:
        1;

}


/* =========================================================
   PROJECT IMAGE
   ========================================================= */

.project-image-wrap {

    position:
        relative;

    display:
        block;

    overflow:
        hidden;

    background:
        #ddd5cb;

}


.project-image {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        3 / 2;

    object-fit:
        cover;

    transition:
        transform 800ms cubic-bezier(.2,.7,.2,1);

}


.project-image-wrap:hover .project-image {

    transform:
        scale(1.035);

}


.project-image-number {

    position:
        absolute;

    top:
        22px;

    left:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    border:
        1px solid rgba(255,255,255,.65);

    border-radius:
        50%;

    background:
        rgba(35,28,23,.25);

    color:
        #fff;

    font-size:
        10px;

    letter-spacing:
        .08em;

    backdrop-filter:
        blur(5px);

}


/* =========================================================
   PROJECT INFORMATION
   ========================================================= */

.project-info {

    max-width:
        430px;

}


.project-meta {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        22px;

    color:
        var(--taupe);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

}


.project-info h3 {

    margin:
        0;

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

    font-size:
        clamp(38px, 3.5vw, 56px);

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.02em;

}


.project-info p {

    max-width:
        390px;

    margin:
        28px 0 0;

    color:
        var(--muted);

    font-size:
        16px;

    line-height:
        1.8;

}


.project-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        30px;

    padding-bottom:
        6px;

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

    color:
        var(--ink);

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.project-link span {

    font-size:
        15px;

    transition:
        transform 250ms ease;

}


.project-link:hover span {

    transform:
        translate(3px, -3px);

}


/* =========================================================
   FEATURED FOOTER
   ========================================================= */

.featured-footer {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        150px;

}


.outline-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        14px;

    min-height:
        54px;

    padding:
        0 28px;

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

    color:
        var(--ink);

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    transition:
        background 300ms ease,
        color 300ms ease;

}


.outline-button:hover {

    background:
        var(--ink);

    color:
        #fff;

}

/* =========================================================
   SERVICES
   ========================================================= */

.services-section {

    padding:
        170px 0 180px;

    background:
        var(--paper-soft);

}


/* =========================================================
   SERVICES INTRO
   ========================================================= */

.services-intro {

    display:
        grid;

    grid-template-columns:
        1fr 2.5fr;

    gap:
        80px;

    margin-bottom:
        100px;

}


.services-heading {

    max-width:
        850px;

}


.services-heading h2 {

    margin:
        0;

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

    font-size:
        clamp(56px, 6vw, 88px);

    font-weight:
        400;

    line-height:
        1.05;

    letter-spacing:
        -.025em;

}


.services-heading h2 em {

    color:
        var(--taupe);

    font-style:
        italic;

}


/* =========================================================
   SERVICE LIST
   ========================================================= */

.services-list {

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

}


.service-row {

    position:
        relative;

    display:
        grid;

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

    align-items:
        center;

    min-height:
        170px;

    padding:
        30px 0;

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

    color:
        var(--ink);

    transition:
        padding 350ms ease;

}


.service-row::before {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    content:
        "";

    background:
        var(--paper);

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    transition:
        transform 350ms ease;

}


.service-row:hover {

    padding-left:
        24px;

    padding-right:
        24px;

}


.service-row:hover::before {

    transform:
        scaleY(1);

}


.service-number,
.service-main,
.service-arrow {

    position:
        relative;

    z-index:
        1;

}


.service-number {

    align-self:
        start;

    padding-top:
        8px;

    color:
        var(--taupe);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        .16em;

}


.service-main {

    display:
        grid;

    grid-template-columns:
        minmax(280px, .8fr)
        minmax(250px, .7fr);

    align-items:
        center;

    gap:
        70px;

}


.service-main h3 {

    margin:
        0;

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

    font-size:
        clamp(34px, 3vw, 48px);

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.015em;

}


.service-main p {

    max-width:
        390px;

    margin:
        0;

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.75;

}


.service-arrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    font-size:
        25px;

    font-weight:
        300;

    transition:
        transform 300ms ease;

}


.service-row:hover .service-arrow {

    transform:
        translate(5px, -5px);

}


/* =========================================================
   SERVICES FOOTER
   ========================================================= */

.services-footer {

    display:
        flex;

    justify-content:
        flex-end;

    margin-top:
        45px;

}

/* =========================================================
   DESIGN PHILOSOPHY
   ========================================================= */

.philosophy-section {

    padding:
        170px 0 180px;

    background:
        var(--paper);

}


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

.philosophy-header {

    display:
        grid;

    grid-template-columns:
        1fr 2.5fr;

    gap:
        80px;

    margin-bottom:
        90px;

}


.philosophy-heading {

    max-width:
        820px;

}


.philosophy-heading h2 {

    margin:
        0;

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

    font-size:
        clamp(56px, 6vw, 88px);

    font-weight:
        400;

    line-height:
        1.05;

    letter-spacing:
        -.025em;

}


.philosophy-heading h2 em {

    color:
        var(--taupe);

    font-style:
        italic;

}


/* =========================================================
   PHILOSOPHY IMAGE
   ========================================================= */

.philosophy-image-wrap {

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

}


.philosophy-image {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    object-fit:
        cover;

    object-position:
        center;

}


/* =========================================================
   PRINCIPLES
   ========================================================= */

.philosophy-principles {

    display:
        grid;

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

    gap:
        0;

    margin-top:
        80px;

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

}


.philosophy-principle {

    position:
        relative;

    min-height:
        250px;

    padding:
        30px 45px 30px 0;

}


.philosophy-principle + .philosophy-principle {

    padding-left:
        45px;

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

}


.principle-number {

    display:
        block;

    margin-bottom:
        45px;

    color:
        var(--taupe);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        .18em;

}


.philosophy-principle h3 {

    margin:
        0;

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

    font-size:
        38px;

    font-weight:
        400;

    line-height:
        1;

}


.philosophy-principle p {

    max-width:
        300px;

    margin:
        20px 0 0;

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.75;

}

/* =========================================================
   DESIGN PROCESS
   ========================================================= */

.process-section {

    padding:
        170px 0 180px;

    background:
        var(--paper-soft);

}


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

.process-header {

    display:
        grid;

    grid-template-columns:
        1fr 2.5fr;

    gap:
        80px;

    margin-bottom:
        110px;

}


.process-heading {

    max-width:
        850px;

}


.process-heading h2 {

    margin:
        0;

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

    font-size:
        clamp(56px, 6vw, 88px);

    font-weight:
        400;

    line-height:
        .94;

    letter-spacing:
        -.025em;

}


.process-heading h2 em {

    color:
        var(--taupe);

    font-style:
        italic;

}


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

.process-timeline {

    position:
        relative;

    display:
        grid;

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

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

}


/* Horizontal line */

.process-timeline::before {

    position:
        absolute;

    top:
        -1px;

    left:
        10%;

    right:
        10%;

    height:
        1px;

    content:
        "";

    background:
        var(--ink);

    opacity:
        .35;

}


/* =========================================================
   PROCESS STEP
   ========================================================= */

.process-step {

    position:
        relative;

    min-height:
        340px;

    padding:
        0 35px 0 0;

}


.process-step + .process-step {

    padding-left:
        35px;

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

}


/* =========================================================
   PROCESS MARKER
   ========================================================= */

.process-marker {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    margin-top:
        -23px;

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

    border-radius:
        50%;

    background:
        var(--paper-soft);

}


.process-marker span {

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        .1em;

}


/* =========================================================
   PROCESS CONTENT
   ========================================================= */

.process-content {

    padding-top:
        55px;

}


.process-content h3 {

    margin:
        0;

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

    font-size:
        34px;

    font-weight:
        400;

    line-height:
        1.05;

}


.process-content p {

    max-width:
        220px;

    margin:
        22px 0 0;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.75;

}

/* =========================================================
   TESTIMONIALS
   ========================================================= */

.testimonials-section {

    padding:
        180px 0;

    background:
        var(--paper);

}


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

.testimonials-header {

    margin-bottom:
        90px;

}


/* =========================================================
   FEATURE TESTIMONIAL
   ========================================================= */

.testimonial-feature {

    max-width:
        1050px;

    margin:
        0 auto;

    text-align:
        center;

}


.quote-mark {

    display:
        block;

    height:
        65px;

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

    color:
        var(--taupe);

    font-size:
        90px;

    font-weight:
        400;

    line-height:
        .7;

}


.testimonial-feature blockquote {

    margin:
        0;

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

    font-size:
        clamp(42px, 4.8vw, 70px);

    font-weight:
        400;

    line-height:
        1.08;

    letter-spacing:
        -.02em;

}


.testimonial-author {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    margin-top:
        35px;

}


.testimonial-author strong {

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.testimonial-author span {

    color:
        var(--muted);

    font-size:
        12px;

}


/* =========================================================
   SECONDARY TESTIMONIALS
   ========================================================= */

.testimonial-secondary {

    display:
        grid;

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

    gap:
        90px;

    max-width:
        900px;

    margin:
        130px auto 0;

    padding-top:
        60px;

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

}


.testimonial-small {

    position:
        relative;

}


.small-quote-mark {

    display:
        block;

    margin-bottom:
        18px;

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

    color:
        var(--taupe);

    font-size:
        42px;

    line-height:
        .7;

}


.testimonial-small blockquote {

    max-width:
        380px;

    margin:
        0;

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

    font-size:
        28px;

    font-weight:
        400;

    line-height:
        1.25;

}


.testimonial-small .testimonial-author {

    margin-top:
        25px;

}


/* =========================================================
   SUBTLE HORIZONTAL DIVIDER
   ========================================================= */

.testimonial-small + .testimonial-small {

    padding-left:
        70px;

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

}

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

.journal-section {

    padding:
        180px 0;

    background:
        var(--paper-soft);

}


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

.journal-header {

    display:
        grid;

    grid-template-columns:
        1fr 2.5fr;

    gap:
        80px;

    margin-bottom:
        100px;

}


.journal-heading {

    max-width:
        820px;

}


.journal-heading h2 {

    margin:
        0;

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

    font-size:
        clamp(56px, 6vw, 88px);

    font-weight:
        400;

    line-height:
        .94;

    letter-spacing:
        -.025em;

}


.journal-heading h2 em {

    color:
        var(--taupe);

    font-style:
        italic;

}


/* =========================================================
   JOURNAL GRID
   ========================================================= */

.journal-grid {

    display:
        grid;

    grid-template-columns:
        1.25fr .9fr;

    column-gap:
        90px;

    row-gap:
        110px;

    align-items:
        start;

}


/* =========================================================
   JOURNAL CARD
   ========================================================= */

.journal-card {

    max-width:
        100%;

}


/* First article */

.journal-card-1 {

    grid-row:
        span 2;

}


.journal-card-1 .journal-image-wrap {

    aspect-ratio:
        4 / 3;

}


/* Second article */

.journal-card-2 {

    padding-top:
        90px;

}


.journal-card-2 .journal-image-wrap {

    aspect-ratio:
        4 / 3;

}


/* Third article */

.journal-card-3 {

    grid-column:
        2;

}


.journal-card-3 .journal-image-wrap {

    aspect-ratio:
        4 / 3;

}


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

.journal-image-wrap {

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

}


.journal-image {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 700ms cubic-bezier(.2,.7,.2,1);

}


.journal-image-link:hover .journal-image {

    transform:
        scale(1.04);

}


/* =========================================================
   JOURNAL CONTENT
   ========================================================= */

.journal-content {

    padding-top:
        25px;

}


.journal-meta {

    display:
        flex;

    gap:
        15px;

    margin-bottom:
        16px;

    color:
        var(--taupe);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}


.journal-meta span + span::before {

    content:
        "·";

    margin-right:
        15px;

}


.journal-content h3 {

    max-width:
        650px;

    margin:
        0;

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

    font-size:
        clamp(30px, 3vw, 46px);

    font-weight:
        400;

    line-height:
        1.05;

}


.journal-content h3 a {

    color:
        var(--ink);

}


.journal-content p {

    max-width:
        500px;

    margin:
        18px 0 25px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.75;

}


/* =========================================================
   JOURNAL FOOTER
   ========================================================= */

.journal-footer {

    display:
        flex;

    justify-content:
        flex-end;

    margin-top:
        70px;

}

/* =========================================================
   START A PROJECT CTA
   ========================================================= */

.project-cta {

    position:
        relative;

    min-height:
        720px;

    overflow:
        hidden;

    color:
        #ffffff;

}


/* =========================================================
   CTA IMAGE
   ========================================================= */

.project-cta-image {

    position:
        absolute;

    inset:
        0;

}


.project-cta-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

}


/* =========================================================
   OVERLAY
   ========================================================= */

.project-cta-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(25, 22, 18, .72) 0%,
            rgba(25, 22, 18, .45) 45%,
            rgba(25, 22, 18, .18) 100%
        );

}


/* =========================================================
   CONTENT
   ========================================================= */

.project-cta-container {

    position:
        relative;

    z-index:
        2;

    min-height:
        720px;

    display:
        flex;

    align-items:
        flex-end;

    padding-bottom:
        95px;

}


.project-cta-content {

    max-width:
        760px;

}


/* =========================================================
   LIGHT LABEL
   ========================================================= */

.section-label-light {

    color:
        rgba(255,255,255,.72);

}


.section-label-light span:first-child {

    color:
        rgba(255,255,255,.45);

}


/* =========================================================
   HEADING
   ========================================================= */

.project-cta h2 {

    margin:
        25px 0 25px;

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

    font-size:
        clamp(56px, 7vw, 100px);

    font-weight:
        400;

    line-height:
        .94;

    letter-spacing:
        -.03em;

}


.project-cta h2 em {

    color:
        #d7c5ad;

    font-style:
        italic;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.project-cta p {

    max-width:
        500px;

    margin:
        0 0 35px;

    color:
        rgba(255,255,255,.82);

    font-size:
        16px;

    line-height:
        1.7;

}


/* =========================================================
   BUTTON
   ========================================================= */

.cta-light-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        18px;

    padding:
        16px 22px;

    border:
        1px solid rgba(255,255,255,.65);

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;

}


.cta-light-button span {

    font-size:
        16px;

    transition:
        transform .3s ease;

}


.cta-light-button:hover {

    background:
        #ffffff;

    border-color:
        #ffffff;

    color:
        #27231f;

}


.cta-light-button:hover span {

    transform:
        translate(3px, -3px);

}

/* =========================================================
   FOOTER FOUNDATION
   ========================================================= */

.site-footer {

    margin-top:
        var(--space-9);

    padding:
        var(--space-7) 0 28px;

    background:
        var(--ivory);

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

}


.footer-inner {

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap:
        var(--space-6);

}


.footer-brand p {

    max-width:
        300px;

    margin:
        20px 0 0;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.7;

}


.footer-column {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    color:
        var(--muted);

    font-size:
        15px;

}


.footer-label {

    margin-bottom:
        8px;

    color:
        var(--ink);

    font-size:
        11px;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;

}


.footer-bottom {

    margin-top:
        var(--space-6);

    padding-top:
        20px;

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

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--muted);

    font-size:
        12px;

}
/* =========================================================
   REVOLUTION-STYLE MOTION LAYER
   ========================================================= */

.rev-hero {
    height: 100svh;
    min-height: 680px;
    isolation: isolate;
}

.rev-slides,
.rev-slide {
    position: absolute;
    inset: 0;
}

.rev-slide {
    z-index: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: scale(1.015);
    transition:
        opacity 850ms cubic-bezier(.2,.7,.2,1),
        transform 1200ms cubic-bezier(.2,.7,.2,1),
        visibility 0s linear 850ms;
}

.rev-slide.is-active {
    z-index: 2;
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    transition-delay: 0s;
}

.rev-slide .rev-bg {
    transform: scale(1.08);
    transition: transform 1600ms cubic-bezier(.2,.7,.2,1);
}

.rev-slide.is-active .rev-bg {
    transform: scale(1);
}

.rev-slide .rev-layer:not(.rev-bg) {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 700ms ease,
        transform 900ms cubic-bezier(.2,.7,.2,1);
}

.rev-slide.is-active .rev-layer:not(.rev-bg) {
    opacity: 1;
    transform: translateY(0);
}

.rev-slide.is-active .hero-eyebrow { transition-delay: 180ms; }
.rev-slide.is-active .hero-title { transition-delay: 320ms; }
.rev-slide.is-active .hero-description { transition-delay: 500ms; }
.rev-slide.is-active .hero-actions { transition-delay: 650ms; }
.rev-slide.is-active .hero-bottom { transition-delay: 820ms; }

.rev-progress {
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(255,255,255,.18);
}

.rev-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: rgba(255,255,255,.9);
}

.rev-hero.is-playing .rev-progress span {
    animation: revProgress 6s linear forwards;
}

@keyframes revProgress {
    from { width: 0; }
    to { width: 100%; }
}

.rev-controls {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 22px;
    transform: translateX(-50%);
}

.rev-arrow {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;
    background: rgba(20,16,13,.16);
    color: #fff;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.rev-arrow:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.85);
    transform: translateY(-2px);
}

.rev-dots {
    display: flex;
    align-items: center;
    gap: 9px;
}

.rev-dots button {
    width: 5px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.48);
    cursor: pointer;
    transition: width .3s ease, border-radius .3s ease, background .3s ease;
}

.rev-dots button.is-active {
    width: 28px;
    border-radius: 5px;
    background: #fff;
}

.rev-counter {
    position: absolute;
    z-index: 9;
    right: 42px;
    bottom: 36px;
    display: flex;
    gap: 7px;
    align-items: center;
    color: rgba(255,255,255,.8);
    font-size: 10px;
    letter-spacing: .16em;
}

.rev-counter .rev-current {
    color: #fff;
}

/* =========================================================
   PROJECT REVOLUTION SLIDER
   ========================================================= */

.project-revolution {
    position: relative;
}

.project-revolution-track {
    position: relative;
    min-height: 610px;
}

.project-rev-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .75fr);
    align-items: center;
    gap: clamp(55px, 8vw, 130px);
    visibility: hidden;
    opacity: 0;
    transform: translateX(45px);
    transition: opacity 700ms ease, transform 850ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 700ms;
}

.project-rev-slide.is-active {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0s;
}

.project-rev-image {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: #ddd5cb;
}

.project-rev-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 1400ms cubic-bezier(.2,.7,.2,1);
}

.project-rev-slide.is-active .project-rev-image img {
    transform: scale(1);
}

.project-rev-image > span {
    position: absolute;
    top: 22px;
    left: 24px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 50%;
    background: rgba(35,28,23,.22);
    color: #fff;
    font-size: 10px;
    letter-spacing: .08em;
    backdrop-filter: blur(5px);
}

.project-rev-info {
    max-width: 430px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 650ms ease 180ms, transform 800ms cubic-bezier(.2,.7,.2,1) 180ms;
}

.project-rev-slide.is-active .project-rev-info {
    opacity: 1;
    transform: translateY(0);
}

.project-rev-info h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(44px, 4vw, 64px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;
}

.project-rev-info p {
    max-width: 390px;
    margin: 28px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

.project-rev-navigation {
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 700px;
    margin: 38px auto 0;
}

.project-rev-arrow {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

.project-rev-arrow:hover {
    background: var(--ink);
    color: #fff;
}

.project-rev-counter {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 64px;
    font-size: 11px;
    letter-spacing: .12em;
}

.project-rev-counter strong {
    font-weight: 500;
    color: var(--ink);
}

.project-rev-counter span { color: var(--muted); }

.project-rev-line {
    position: relative;
    flex: 1;
    height: 1px;
    background: var(--line);
}

.project-rev-line span {
    display: block;
    width: 25%;
    height: 100%;
    background: var(--ink);
    transition: width 500ms ease;
}

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

.rev-reveal,
.rev-section .section-label,
.rev-section .intro-content,
.rev-section .services-intro,
.rev-section .services-list,
.rev-section .philosophy-header,
.rev-section .philosophy-image-wrap,
.rev-section .philosophy-principles,
.rev-section .process-header,
.rev-section .process-timeline,
.rev-section .testimonials-header,
.rev-section .testimonial-feature,
.rev-section .testimonial-secondary,
.rev-section .journal-header,
.rev-section .journal-grid,
.rev-section .journal-footer,
.rev-section .project-cta-content {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity 800ms ease, transform 950ms cubic-bezier(.2,.7,.2,1);
}

.rev-reveal.is-visible,
.rev-section.is-visible .section-label,
.rev-section.is-visible .intro-content,
.rev-section.is-visible .services-intro,
.rev-section.is-visible .services-list,
.rev-section.is-visible .philosophy-header,
.rev-section.is-visible .philosophy-image-wrap,
.rev-section.is-visible .philosophy-principles,
.rev-section.is-visible .process-header,
.rev-section.is-visible .process-timeline,
.rev-section.is-visible .testimonials-header,
.rev-section.is-visible .testimonial-feature,
.rev-section.is-visible .testimonial-secondary,
.rev-section.is-visible .journal-header,
.rev-section.is-visible .journal-grid,
.rev-section.is-visible .journal-footer,
.rev-section.is-visible .project-cta-content {
    opacity: 1;
    transform: translateY(0);
}

.rev-section.is-visible .services-list,
.rev-section.is-visible .process-timeline,
.rev-section.is-visible .journal-grid,
.rev-section.is-visible .testimonial-secondary { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
    .rev-slide,
    .rev-slide .rev-bg,
    .rev-slide .rev-layer:not(.rev-bg),
    .project-rev-slide,
    .project-rev-image img,
    .rev-reveal,
    .rev-section .section-label,
    .rev-section .intro-content,
    .rev-section .services-intro,
    .rev-section .services-list,
    .rev-section .philosophy-header,
    .rev-section .philosophy-image-wrap,
    .rev-section .philosophy-principles,
    .rev-section .process-header,
    .rev-section .process-timeline,
    .rev-section .testimonials-header,
    .rev-section .testimonial-feature,
    .rev-section .testimonial-secondary,
    .rev-section .journal-header,
    .rev-section .journal-grid,
    .rev-section .journal-footer,
    .rev-section .project-cta-content { transition: none !important; transform: none !important; }
}


:root { --paper-soft: #F4F0E8; }
.rev-slide .hero-overlay { transform: none !important; }

/* =========================================================
   SELECTED WORK — SCROLL STACK / REVOLUTION STYLE
   ========================================================= */

.selected-work-section {
    position: relative;
    background: #24211f;
    color: #f7f3ed;
    padding: 0;
}

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

.selected-work-layout {
    position: sticky;
    top: 0;
    min-height: 100vh;
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
    gap: clamp(45px, 7vw, 110px);
    align-items: center;
    padding-top: 110px;
    padding-bottom: 70px;
    overflow: hidden;
}

.selected-work-intro {
    align-self: center;
    max-width: 590px;
    color: #f7f3ed;
}

.selected-work-intro .section-label {
    color: rgba(247,243,237,.58);
}

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

.selected-work-heading h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(58px, 6vw, 104px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.selected-work-heading h2 em {
    color: #b9a58e;
    font-style: italic;
}

.selected-work-heading p {
    max-width: 450px;
    margin: 38px 0 0;
    color: rgba(247,243,237,.68);
    font-size: 17px;
    line-height: 1.75;
}

.selected-work-heading .text-link {
    color: #f7f3ed;
    border-color: rgba(247,243,237,.75);
}

.selected-work-scroll-note {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 95px;
    color: rgba(247,243,237,.55);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.selected-work-scroll-note i {
    position: relative;
    display: block;
    width: 50px;
    height: 1px;
    background: rgba(247,243,237,.35);
}

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

.selected-work-stack {
    position: relative;
    width: 100%;
    height: min(76vh, 760px);
    align-self: center;
    margin-top: 3vh;
}

.work-stack-card {
    position: absolute;
    inset: 0;
    z-index: calc(10 + var(--card-index));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #2c2825;
    border: 1px solid rgba(247,243,237,.12);
    transform: translate3d(0, 110%, 0) scale(.96);
    opacity: 0;
    pointer-events: none;
    transition: transform 850ms cubic-bezier(.2,.75,.2,1), opacity 650ms ease, filter 650ms ease;
    will-change: transform, opacity;
}

/* Current project: full-size visible card. */
.work-stack-card.is-active {
    z-index: 30;
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
    filter: none;
}

/* Previous projects remain visible ABOVE the current card, forming the stack. */
.work-stack-card.is-past {
    z-index: calc(20 + var(--card-index));
    transform: translate3d(0, calc((var(--card-index) - var(--active-card, 0)) * 76px), 0) scale(calc(1 - ((var(--active-card, 0) - var(--card-index)) * .025)));
    opacity: 1;
    pointer-events: none;
    filter: saturate(.78) brightness(.82);
}

/* Future projects stay completely hidden below the active card. */
.work-stack-card.is-future {
    z-index: 1;
    transform: translate3d(0, 110%, 0) scale(.96);
    opacity: 0;
    pointer-events: none;
}

.work-stack-card-header {
    position: relative;
    z-index: 5;
    flex: 0 0 72px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 18px;
    padding: 0 26px;
    border-bottom: 1px solid rgba(247,243,237,.18);
    background: #24211f;
    color: #f7f3ed;
    cursor: pointer;
}

.work-stack-number {
    color: rgba(247,243,237,.65);
    font-size: 12px;
    letter-spacing: .08em;
}

.work-stack-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--font-body);
    font-size: clamp(19px, 2vw, 28px);
    font-weight: 400;
    line-height: 1;
}

.work-stack-status {
    position: relative;
    width: 25px;
    height: 25px;
    display: block;
}

.work-stack-status-line {
    position: absolute;
    top: 12px;
    left: 1px;
    width: 23px;
    height: 1px;
    background: rgba(247,243,237,.8);
    transition: transform 400ms ease;
}

.work-stack-status-line:last-child {
    transform: rotate(90deg);
}

.work-stack-card.is-active .work-stack-status-line:last-child {
    transform: rotate(0deg);
}

.work-stack-panel {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.work-stack-media {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #fff;
}

.work-stack-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 1400ms cubic-bezier(.2,.7,.2,1), filter 900ms ease;
    filter: saturate(.88);
}

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

.work-stack-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(18,15,13,.03) 0%, rgba(18,15,13,.05) 38%, rgba(18,15,13,.88) 100%);
}

.work-stack-image-number {
    position: absolute;
    top: 22px;
    left: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 50%;
    background: rgba(20,16,13,.18);
    color: #fff;
    font-size: 10px;
    letter-spacing: .08em;
    backdrop-filter: blur(5px);
}

.work-stack-content {
    position: absolute;
    right: clamp(30px, 5vw, 72px);
    bottom: clamp(30px, 5vw, 64px);
    left: clamp(30px, 5vw, 72px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 620px;
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 650ms ease 180ms, transform 850ms cubic-bezier(.2,.7,.2,1) 180ms;
}

.work-stack-card.is-active .work-stack-content {
    opacity: 1;
    transform: translateY(0);
}

.work-stack-content .project-meta {
    margin-bottom: 18px;
    color: rgba(255,255,255,.72);
}

.work-stack-project-title {
    font-family: var(--font-display);
    font-size: clamp(46px, 5vw, 78px);
    font-weight: 400;
    line-height: .94;
    letter-spacing: -.025em;
}

.work-stack-description {
    max-width: 530px;
    margin-top: 24px;
    color: rgba(255,255,255,.82);
    font-size: 16px;
    line-height: 1.7;
}

.work-stack-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 27px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255,255,255,.8);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.work-stack-link span {
    font-size: 15px;
}

.selected-work-section.is-work-active .selected-work-intro {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: hover) {
    .work-stack-card:not(.is-active) .work-stack-card-header:hover {
        background: #302b27;
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-stack-card,
    .work-stack-media img,
    .work-stack-content,
    .work-stack-status-line {
        transition: none !important;
    }
}

/* =========================================================
   SELECTED WORK — FINAL STACK BEHAVIOUR OVERRIDE
   =========================================================
   Keeps the complete original stylesheet above intact.

   Behaviour:
   Project 1 active -> Project 1 full
   Project 2 active -> Project 1 header + Project 2 full
   Project 3 active -> Project 1/2 headers + Project 3 full
   Project 4 active -> Project 1/2/3 headers + Project 4 full

   Future projects remain hidden below the active project.
   ========================================================= */

.selected-work-stack {
    --stack-header-height: 72px;
    position: relative;
    overflow: visible;
}

.work-stack-card {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: 100%;
    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)));
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 50;
}

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

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

.work-stack-card.is-future {
    top: calc(100% + 100px);
    height: 100%;
    transform: translate3d(0, 0, 0) scale(.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
}

.work-stack-card.is-past .work-stack-card-header {
    position: relative;
    display: grid;
    flex: 0 0 var(--stack-header-height);
    height: var(--stack-header-height);
    opacity: 1;
}

.work-stack-card.is-active .work-stack-panel {
    display: block;
}

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

.work-stack-card {
    transition:
        top 750ms cubic-bezier(.2,.75,.2,1),
        height 750ms cubic-bezier(.2,.75,.2,1),
        transform 750ms cubic-bezier(.2,.75,.2,1),
        opacity 500ms ease,
        filter 500ms ease;
}


/* =========================================================
   SELECTED WORK — FIXED STACK TRANSITION
   =========================================================
   Fixes:
   1. Previous project image does not disappear immediately
      when moving to the next project.
   2. Active project keeps its full available card height.
   3. Past headers remain visible without their image covering
      the active project.
   ========================================================= */

.selected-work-stack {
    overflow: visible;
}

/* Keep the active card as the full available card. */
.work-stack-card.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 50;
}

/* Previous cards keep their panel during the transition.
   JS/CSS stacking will place the active card above them. */
.work-stack-card.is-past .work-stack-panel {
    display: block;
    opacity: 0;
    visibility: visible;
    transition: opacity 450ms ease;
}

/* Keep the previous header fully visible. */
.work-stack-card.is-past .work-stack-card-header {
    position: relative;
    z-index: 5;
    opacity: 1;
    visibility: visible;
}

/* Future cards stay out of the way. */
.work-stack-card.is-future {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Do not let a past card's hidden panel affect its layout. */
.work-stack-card.is-past .work-stack-panel {
    flex: 1 1 auto;
    min-height: 0;
}

/* Active image must always occupy the complete panel. */
.work-stack-card.is-active .work-stack-panel,
.work-stack-card.is-active .work-stack-media {
    min-height: 0;
}

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

/* =========================================================
   STACK TRANSITION — STABLE HEIGHT
   ========================================================= */

.work-stack-card {
    transition:
        top 750ms cubic-bezier(.2,.75,.2,1),
        height 750ms cubic-bezier(.2,.75,.2,1),
        transform 750ms cubic-bezier(.2,.75,.2,1),
        opacity 500ms ease,
        filter 500ms ease;
}


/* =========================================================
   SELECTED WORK — FINAL AUTHORITATIVE FIX
   =========================================================
   IMPORTANT:
   This block is intentionally LAST so it overrides all
   earlier stack experiments in this stylesheet.

   Behaviour:
   - Active project image is always visible.
   - Previous project images remain in the stack during
     transitions; their headers stay visible naturally.
   - Future project cards remain hidden.
   - Active card gets a full 76vh image area even when
     project 2/3/4 is active.
   ========================================================= */

.selected-work-stack {
    --stack-header-height: 72px;
    /*
     * Extra room equals the maximum number of stacked
     * headers (3 x 72px), so project 4 can keep the same
     * image height as project 1.
     */
    height: calc(min(76vh, 760px) + (3 * var(--stack-header-height))) !important;
    overflow: visible !important;
}

.work-stack-card {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: auto !important;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.work-stack-card.is-active {
    top: calc(var(--active-card, 0) * var(--stack-header-height)) !important;
    height: min(76vh, 760px) !important;
    z-index: 50 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) scale(1) !important;
    filter: none !important;
}

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

/*
 * DO NOT hide the previous panel.
 * Because each past card is positioned at its own header
 * offset and the next card has a higher z-index, only the
 * previous headers remain exposed after the transition.
 */
.work-stack-card.is-past .work-stack-panel {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex: 1 1 auto !important;
}

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

.work-stack-card.is-active .work-stack-panel,
.work-stack-card.is-active .work-stack-media {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.work-stack-card.is-active .work-stack-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
}

/* =========================================================
   END FINAL AUTHORITATIVE FIX
   ========================================================= */

/* =========================================================
   SELECTED WORK — STACK ORDER V2
   ---------------------------------------------------------
   The cards must behave like a true stacked accordion:
   Project 1 header
   Project 2 header
   Project 3 header
   Project 4 active full image

   The important fix is the z-index order of previous cards.
   Higher previous project numbers must sit ABOVE lower ones,
   otherwise Project 1's image covers Project 2/3 headers.
   ========================================================= */

.selected-work-stack {
    position: relative !important;
    overflow: visible !important;
}

/* Previous cards are stacked in ascending order. */
.work-stack-card.is-past {
    z-index: calc(30 + var(--card-index, 0)) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: translate3d(0,0,0) scale(1) !important;
}

/* Keep the previous headers visible. */
.work-stack-card.is-past .work-stack-card-header {
    position: relative !important;
    z-index: 10 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/*
   Previous panels stay in the card, but the higher-numbered
   previous card covers the lower-numbered card. This leaves
   only the appropriate header exposed above the active card.
*/
.work-stack-card.is-past .work-stack-panel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Active card is always above every previous card. */
.work-stack-card.is-active {
    z-index: 100 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.work-stack-card.is-active .work-stack-card-header,
.work-stack-card.is-active .work-stack-panel,
.work-stack-card.is-active .work-stack-media {
    visibility: visible !important;
    opacity: 1 !important;
}

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

/* Future cards remain completely behind the stack. */
.work-stack-card.is-future {
    z-index: 1 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* JS supplied deterministic z-index. */
.work-stack-card {
    z-index: var(--stack-z, 1) !important;
}


/* =========================================================
   WHATSAPP FLOATING CONTACT BUTTON
   Added globally through includes/footer.php
   ========================================================= */
.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.20);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 14px 34px rgba(0,0,0,.25);
}
.whatsapp-float svg { width: 29px; height: 29px; display:block; fill:currentColor; }
.whatsapp-float-label {
    position: absolute;
    right: 68px;
    white-space: nowrap;
    padding: 8px 11px;
    border-radius: 3px;
    background: #24211f;
    color: #fff;
    font-size: 11px;
    letter-spacing: .04em;
    opacity: 0;
    pointer-events: none;
    transform: translateX(6px);
    transition: opacity .2s ease, transform .2s ease;
}
.whatsapp-float:hover .whatsapp-float-label,
.whatsapp-float:focus-visible .whatsapp-float-label { opacity:1; transform:translateX(0); }

/* =========================================================
   COMPLETED PROJECT GALLERIES
   ========================================================= */
.completed-project-detail .completed-project-cover {
    background: #eee9e1;
}
.completed-project-detail .completed-project-cover img {
    width: 100%;
    height: min(68vh, 760px);
    object-fit: cover;
    display: block;
}
.completed-project-gallery-section {
    padding: clamp(70px, 9vw, 130px) 0;
    background: #f7f4ee;
}
.completed-project-gallery-heading { margin-bottom: 42px; }
.completed-project-gallery-heading h2 {
    margin: 18px 0 0;
    font-family: var(--font-display);
    font-size: clamp(44px, 5vw, 78px);
    line-height: 1.02;
    font-weight: 400;
}
.completed-project-gallery-heading h2 em { color:#b9a58e; }
.completed-project-gallery {
    columns: 2;
    column-gap: clamp(18px, 2.5vw, 36px);
}
.completed-project-gallery-item {
    break-inside: avoid;
    margin: 0 0 clamp(18px, 2.5vw, 36px);
}
.completed-project-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
}
.completed-project-gallery-item figcaption {
    margin-top: 9px;
    color: #756d64;
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.completed-project-detail .related-projects { padding-bottom: 100px; }

@media (max-width: 760px) {
    .whatsapp-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
    .whatsapp-float svg { width: 27px; height:27px; }
    .whatsapp-float-label { display:none; }
    .completed-project-detail .completed-project-cover img {
        height: auto;
        max-height: none;
        object-fit: contain;
    }
    .completed-project-gallery { columns: 1; }
}


/* =========================================================
   PORTFOLIO PAGE — DESKTOP BASE
   ========================================================= */

.inner-page {
    background: var(--paper);
}

.inner-hero {
    padding: 150px 0 105px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.inner-hero-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.85fr) minmax(0, 2fr);
    gap: 90px;
    align-items: end;
}

.inner-hero .eyebrow,
.portfolio-note .eyebrow {
    display: block;
    margin-bottom: 26px;
    color: var(--taupe);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .18em;
    line-height: 1.4;
    text-transform: uppercase;
}

.inner-hero h1 {
    margin: 0;
    max-width: 760px;
    font-family: var(--font-display);
    font-size: clamp(64px, 7vw, 104px);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.025em;
}

.inner-hero h1 em {
    color: var(--taupe);
    font-style: italic;
}

.inner-hero-grid > p {
    max-width: 560px;
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8;
}

.portfolio-grid-section {
    padding: 125px 0 145px;
    background: var(--paper);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 55px;
    row-gap: 110px;
}

.portfolio-card {
    min-width: 0;
}

.portfolio-card > a {
    display: block;
}

.portfolio-image {
    position: relative;
    overflow: hidden;
    background: #ddd5cb;
    aspect-ratio: 4 / 3;
}

.portfolio-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 800ms cubic-bezier(.2,.7,.2,1),
                filter 500ms ease;
}

.portfolio-card > a:hover .portfolio-image img {
    transform: scale(1.035);
}

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

.portfolio-meta > span:first-child {
    display: block;
    margin-bottom: 16px;
    color: var(--taupe);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .15em;
    line-height: 1.5;
    text-transform: uppercase;
}

.portfolio-meta h2 {
    margin: 0;
    max-width: 680px;
    font-family: var(--font-display);
    font-size: clamp(34px, 3vw, 48px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.02em;
}

.portfolio-meta p {
    max-width: 520px;
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
}

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

.portfolio-note {
    padding: 125px 0 155px;
    background: var(--ivory);
    border-top: 1px solid var(--line);
}

.portfolio-note h2 {
    margin: 0;
    max-width: 900px;
    font-family: var(--font-display);
    font-size: clamp(48px, 5vw, 76px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;
}

.portfolio-note h2 em {
    color: var(--taupe);
    font-style: italic;
}

.portfolio-note p {
    max-width: 560px;
    margin: 30px 0 0;
    color: var(--muted);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
}


/* =========================================================
   COMPLETED PROJECT DETAIL — FINAL BASE
   =========================================================
   Matches the completed-project-detail markup in project.php.
   This layer is intentionally placed at the end so it overrides
   older/unused project-detail rules elsewhere in this stylesheet.
   ========================================================= */

.completed-project-detail {
    background: var(--paper);
    color: var(--ink);
}

.completed-project-detail .project-detail-hero {
    background: var(--paper);
}

.completed-project-detail .completed-project-cover {
    width: 100%;
    max-width: none;
    overflow: hidden;
    background: #eee9e1;
}

.completed-project-detail .completed-project-cover img {
    display: block;
    width: 100%;
    height: min(68vh, 760px);
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

.completed-project-detail .project-detail-intro {
    padding: 62px 0 105px;
}

.completed-project-detail .project-detail-intro .eyebrow,
.completed-project-detail .eyebrow {
    display: block;
    margin: 0 0 22px;
    color: var(--taupe);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .18em;
    line-height: 1.5;
    text-transform: uppercase;
}

.completed-project-detail .project-detail-intro h1 {
    max-width: 1000px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(58px, 6vw, 92px);
    font-weight: 400;
    line-height: .94;
    letter-spacing: -.025em;
}

.completed-project-detail .project-detail-intro p {
    max-width: 600px;
    margin: 28px 0 0;
    color: var(--muted);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
}

.completed-project-detail .project-overview {
    padding: 120px 0 135px;
    background: var(--ivory);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.completed-project-detail .project-overview-grid {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(0, 1.6fr);
    gap: 100px;
    align-items: start;
}

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

.completed-project-detail .project-overview h2 {
    max-width: 650px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(42px, 4.4vw, 70px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.025em;
}

.completed-project-detail .project-overview h2 em {
    color: var(--taupe);
    font-style: italic;
}

.completed-project-detail .project-overview-grid > div:last-child > p {
    max-width: 600px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
}

.completed-project-detail .project-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 55px;
    border-top: 1px solid var(--line);
}

.completed-project-detail .project-facts span {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 24px 24px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

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

.completed-project-detail .project-facts b {
    color: var(--ink);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.completed-project-detail .completed-project-gallery-section {
    padding: 135px 0 155px;
    background: var(--paper);
}

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

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

.completed-project-detail .completed-project-gallery-heading h2 {
    max-width: 900px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(52px, 5.5vw, 82px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;
}

.completed-project-detail .completed-project-gallery-heading h2 em {
    color: var(--taupe);
    font-style: italic;
}

.completed-project-detail .completed-project-gallery {
    columns: 2;
    column-gap: clamp(24px, 3vw, 48px);
}

.completed-project-detail .completed-project-gallery-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 clamp(24px, 3vw, 48px);
    break-inside: avoid;
    vertical-align: top;
}

.completed-project-detail .completed-project-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    background: #eee9e1;
}

.completed-project-detail .completed-project-gallery-item figcaption {
    margin-top: 10px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.completed-project-detail .related-projects {
    padding: 125px 0 145px;
    background: var(--ivory);
    border-top: 1px solid var(--line);
}

.completed-project-detail .related-projects > .container > .eyebrow {
    margin-bottom: 22px;
}

.completed-project-detail .related-projects h2 {
    margin: 0;
    max-width: 800px;
    font-family: var(--font-display);
    font-size: clamp(48px, 5vw, 76px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;
}

.completed-project-detail .related-projects h2 em {
    color: var(--taupe);
    font-style: italic;
}

.completed-project-detail .related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: 60px;
}

.completed-project-detail .related-grid a {
    display: block;
    min-width: 0;
}

.completed-project-detail .related-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #ddd5cb;
    transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}

.completed-project-detail .related-grid a:hover img {
    transform: scale(1.025);
}

.completed-project-detail .related-grid span {
    display: block;
    margin-top: 16px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.5;
    text-transform: uppercase;
}


/* =========================================================
   OAK & IVORY — ALL INNER PAGES FINAL BASE LAYER
   ---------------------------------------------------------
   Authoritative styles for:
   Studio / Services / Portfolio / Project
   Journal / Article / Contact / Privacy / Terms
   ========================================================= */

html, body {
    min-width: 0;
}

main.inner-page,
main.article-page,
main.contact-page,
main.legal-page,
main.completed-project-detail {
    width: 100%;
    overflow: clip;
}

.eyebrow {
    color: var(--taupe);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .18em;
    line-height: 1.5;
    text-transform: uppercase;
}

.section-label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--taupe);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    margin-top: 28px;
    padding-bottom: 6px;
    border-bottom: 1px solid currentColor;
    color: var(--ink);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
}

.text-link span {
    font-size: 12px;
    line-height: 1;
}

.text-link:hover {
    opacity: .62;
}

/* -------------------------
   STUDIO
   ------------------------- */

.editorial-section {
    padding: 110px 0 120px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.editorial-grid {
    display: grid;
    grid-template-columns: minmax(180px, .65fr) minmax(0, 2fr);
    gap: 100px;
    align-items: start;
}

.editorial-grid > div:last-child {
    max-width: 900px;
}

.editorial-grid h2 {
    max-width: 780px;
    margin: 0 0 28px;
    font-family: var(--font-display);
    font-size: clamp(46px, 4.8vw, 74px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;
}

.editorial-grid h2 em {
    color: var(--taupe);
    font-style: italic;
}

.editorial-grid p {
    max-width: 760px;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
}

.image-feature {
    padding: 100px 0 110px;
    background: var(--paper);
}

.image-feature .container {
    max-width: 1320px;
}

.image-feature > .container > img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.image-caption {
    max-width: 760px;
    padding-top: 22px;
}

.image-caption > span {
    display: block;
    margin-bottom: 12px;
    color: var(--taupe);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.image-caption h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 400;
    line-height: 1;
}

.image-caption p {
    margin: 15px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.values-section {
    padding: 120px 0 135px;
    background: var(--ivory);
    border-top: 1px solid var(--line);
}

.section-heading {
    max-width: 850px;
    margin-bottom: 65px;
}

.section-heading h2 {
    margin: 16px 0 0;
    font-family: var(--font-display);
    font-size: clamp(48px, 5vw, 76px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;
}

.section-heading h2 em {
    color: var(--taupe);
    font-style: italic;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}

.values-grid article {
    min-width: 0;
    padding: 28px 30px 0 0;
}

.values-grid article + article {
    padding-left: 30px;
    border-left: 1px solid var(--line);
}

.values-grid article > span,
.process-grid article > span {
    display: block;
    margin-bottom: 25px;
    color: var(--taupe);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .15em;
}

.values-grid h3,
.process-grid h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

.values-grid p,
.process-grid p {
    max-width: 330px;
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
}

.text-cta {
    padding: 115px 0 130px;
    background: var(--paper);
}

.text-cta h2 {
    max-width: 850px;
    margin: 18px 0 0;
    font-family: var(--font-display);
    font-size: clamp(48px, 5vw, 76px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;
}

.text-cta h2 em {
    color: var(--taupe);
    font-style: italic;
}

/* -------------------------
   SERVICES
   ------------------------- */

.services-list-section {
    padding: 105px 0 125px;
    background: var(--paper);
}

.service-list {
    border-top: 1px solid var(--line);
}

.service-row {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr) 35px;
    gap: 28px;
    align-items: center;
    min-height: 150px;
    padding: 34px 0;
    border-bottom: 1px solid var(--line);
}

.service-number {
    align-self: start;
    padding-top: 5px;
    color: var(--taupe);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .15em;
}

.service-row h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(36px, 3.4vw, 54px);
    font-weight: 400;
    line-height: 1;
}

.service-row p {
    max-width: 760px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
}

.service-row > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 14px;
    transition: background var(--transition), color var(--transition);
}

.service-row > a:hover {
    background: var(--ink);
    color: var(--paper);
}

.process-section {
    padding: 120px 0 135px;
    background: var(--ivory);
    border-top: 1px solid var(--line);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}

.process-grid article {
    min-height: 180px;
    padding: 28px 30px 30px 0;
    border-bottom: 1px solid var(--line);
}

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

/* -------------------------
   JOURNAL
   ------------------------- */

.journal-list {
    padding: 100px 0 130px;
    background: var(--paper);
}

.journal-row {
    display: grid;
    grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr);
    gap: 85px;
    align-items: center;
    padding: 0 0 90px;
    margin-bottom: 90px;
    border-bottom: 1px solid var(--line);
}

.journal-row:last-child {
    margin-bottom: 0;
}

.journal-row-image {
    display: block;
    overflow: hidden;
    background: #e7e0d6;
}

.journal-row-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}

.journal-row-image:hover img {
    transform: scale(1.025);
}

.journal-row-content > span {
    display: block;
    margin-bottom: 18px;
    color: var(--taupe);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .15em;
    line-height: 1.4;
    text-transform: uppercase;
}

.journal-row-content h2 {
    max-width: 700px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(42px, 4.5vw, 68px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;
}

.journal-row-content h2 a:hover {
    color: var(--taupe);
}

.journal-row-content p {
    max-width: 560px;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
}

/* -------------------------
   ARTICLE
   ------------------------- */

.article-page {
    background: var(--paper);
}

.article-header {
    padding: 130px 0 90px;
    border-bottom: 1px solid var(--line);
}

.article-header .container {
    max-width: 1120px;
}

.article-header .eyebrow {
    display: block;
    margin-bottom: 25px;
}

.article-header h1 {
    max-width: 1000px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(60px, 7vw, 108px);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.03em;
}

.article-header p {
    max-width: 660px;
    margin: 30px 0 0;
    color: var(--muted);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8;
}

.article-body {
    padding: 90px 0 140px;
}

.article-body > img {
    display: block;
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.article-copy {
    max-width: 760px;
    margin: 75px auto 0;
}

.article-copy p {
    margin: 0 0 25px;
    color: var(--muted);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.9;
}

.article-copy h2 {
    margin: 65px 0 20px;
    font-family: var(--font-display);
    font-size: clamp(38px, 4vw, 56px);
    font-weight: 400;
    line-height: 1;
}

.article-copy blockquote {
    margin: 55px 0;
    padding: 25px 0 25px 35px;
    border-left: 1px solid var(--taupe);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 42px);
    font-style: italic;
    line-height: 1.15;
}

/* -------------------------
   CONTACT
   ------------------------- */

.contact-page {
    background: var(--paper);
}

.contact-hero {
    padding: 135px 0 100px;
    border-bottom: 1px solid var(--line);
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 100px;
    align-items: end;
}

.contact-hero .eyebrow {
    display: block;
    margin-bottom: 24px;
}

.contact-hero h1 {
    max-width: 800px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(62px, 7vw, 104px);
    font-weight: 400;
    line-height: .91;
    letter-spacing: -.03em;
}

.contact-hero h1 em {
    color: var(--taupe);
    font-style: italic;
}

.contact-hero p {
    max-width: 610px;
    margin: 30px 0 0;
    color: var(--muted);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding-bottom: 5px;
}

.contact-details .eyebrow {
    margin-bottom: 8px;
}

.contact-details a,
.contact-details span:not(.eyebrow) {
    color: var(--muted);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
}

.contact-details a:hover {
    color: var(--ink);
}

.contact-form-section {
    padding: 115px 0 140px;
    background: var(--ivory);
    border-bottom: 1px solid var(--line);
}

.contact-form-grid {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
    gap: 100px;
    align-items: start;
}

.contact-form-grid h2 {
    margin: 16px 0 0;
    font-family: var(--font-display);
    font-size: clamp(48px, 5vw, 74px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;
}

.contact-form-grid h2 em {
    color: var(--taupe);
    font-style: italic;
}

.contact-form-grid > div > p {
    max-width: 470px;
    margin: 25px 0 0;
    color: var(--muted);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
}

.contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 28px;
}

.contact-form label {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    color: var(--ink);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 13px 14px;
    border: 1px solid rgba(51,45,39,.24);
    border-radius: 0;
    outline: none;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 300;
    letter-spacing: normal;
    line-height: 1.5;
    text-transform: none;
    transition: border-color var(--transition), background var(--transition);
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--ink);
    background: var(--white);
}

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

.contact-form button {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 2px;
    padding: 14px 22px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
    transition: background var(--transition), color var(--transition);
}

.contact-form button:hover {
    background: transparent;
    color: var(--ink);
}

/* -------------------------
   PRIVACY / TERMS
   ------------------------- */

.legal-page {
    min-height: 650px;
    padding: 120px 0 135px;
    background: var(--paper);
}

.legal-page .container {
    max-width: 1120px;
}

.legal-page .eyebrow {
    display: block;
    margin-bottom: 22px;
}

.legal-page h1 {
    margin: 0 0 45px;
    font-family: var(--font-display);
    font-size: clamp(58px, 6vw, 92px);
    font-weight: 400;
    line-height: .94;
    letter-spacing: -.025em;
}

.legal-page h1 em {
    color: var(--taupe);
    font-style: italic;
}

.legal-page h2 {
    margin: 45px 0 14px;
    font-family: var(--font-display);
    font-size: clamp(32px, 3vw, 46px);
    font-weight: 400;
    line-height: 1;
}

.legal-page h2:first-of-type {
    margin-top: 0;
}

.legal-page p {
    max-width: 900px;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.85;
}

/* -------------------------
   FOOTER SAFETY
   ------------------------- */

.site-footer {
    position: relative;
    z-index: 2;
    width: 100%;
}

.footer-inner {
    min-width: 0;
}

.footer-column,
.footer-brand {
    min-width: 0;
}

/* =========================================================
   CONTACT FORM — SUBMISSION STATES & SPAM HONEYPOT
   ========================================================= */
.contact-form-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.contact-form-message {
    margin-bottom: 30px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.7;
}

.contact-form-success {
    border-color: rgba(55, 105, 70, .3);
}

.contact-form-error {
    border-color: rgba(150, 60, 45, .35);
}

.contact-form-message strong {
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 400;
}

.contact-form-message p {
    margin: 0;
    color: var(--muted);
}


/* =========================================================
   SERVICES — HOVER VISIBILITY FIX
   ========================================================= */
.service-list .service-row {
    position: relative;
    isolation: isolate;
    color: var(--ink);
    overflow: hidden;
}
.service-list .service-row::before {
    z-index: -1;
    pointer-events: none;
}
.service-list .service-row > span,
.service-list .service-row > div,
.service-list .service-row > a {
    position: relative;
    z-index: 2;
}
.service-list .service-row > div {
    min-width: 0;
}
.service-list .service-row > div h2,
.service-list .service-row > div p {
    position: relative;
    z-index: 3;
    visibility: visible;
}
.service-list .service-row:hover > span,
.service-list .service-row:hover > div,
.service-list .service-row:hover > a {
    visibility: visible;
    opacity: 1;
}
.service-list .service-row:hover > div h2 {
    color: var(--ink);
}
.service-list .service-row:hover > div p {
    color: var(--muted);
}
@media (hover: hover) and (pointer: fine) {
    .service-list .service-row:hover {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* =========================================================
   PROJECT DETAIL — PLACEHOLDER PROJECT MARKUP
   Actual project.php uses .project-detail, .project-detail-image,
   .project-gallery, .project-story and .related-projects.
   ========================================================= */

.project-detail {
    background: var(--paper);
    color: var(--ink);
}

.project-detail-hero {
    background: var(--paper);
}

.project-detail-image {
    width: 100%;
    overflow: hidden;
    background: #eee9e1;
}

.project-detail-image img {
    display: block;
    width: 100%;
    height: min(68vh, 760px);
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

.project-detail-intro {
    padding: 62px 0 105px;
}

.project-detail-intro .eyebrow {
    display: block;
    margin: 0 0 22px;
    color: var(--taupe);
}

.project-detail-intro h1 {
    max-width: 1000px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(58px, 6vw, 92px);
    font-weight: 400;
    line-height: .94;
    letter-spacing: -.025em;
}

.project-detail-intro p {
    max-width: 650px;
    margin: 28px 0 0;
    color: var(--muted);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
}

.project-overview {
    padding: 120px 0 135px;
    background: var(--ivory);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.project-overview-grid {
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(0, 1.6fr);
    gap: 100px;
    align-items: start;
}

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

.project-overview h2 {
    max-width: 650px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(44px, 4.4vw, 70px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.025em;
}

.project-overview h2 em,
.project-story h2 em,
.related-projects h2 em {
    color: var(--taupe);
    font-style: italic;
}

.project-overview-grid > div:last-child > p {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
}

.project-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 55px;
    border-top: 1px solid var(--line);
}

.project-facts span {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 22px 24px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

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

.project-facts b {
    color: var(--ink);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.project-gallery {
    padding: 125px 0 135px;
    background: var(--paper);
}

.project-gallery .container {
    max-width: 1180px;
}

.project-gallery-large {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #eee9e1;
}

.project-gallery-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 28px;
}

.project-gallery-pair img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #eee9e1;
}

.project-story {
    padding: 115px 0 130px;
    background: var(--ivory);
    border-top: 1px solid var(--line);
}

.project-story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
}

.project-story article {
    min-width: 0;
}

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

.project-story h2 {
    max-width: 620px;
    margin: 18px 0 0;
    font-family: var(--font-display);
    font-size: clamp(42px, 4.2vw, 66px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;
}

.project-story p {
    max-width: 560px;
    margin: 24px 0 0;
    color: var(--muted);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
}

.project-detail .related-projects {
    padding: 125px 0 145px;
    background: var(--paper);
    border-top: 1px solid var(--line);
}

.project-detail .related-projects > .container > .eyebrow {
    display: block;
    margin-bottom: 22px;
}

.project-detail .related-projects h2 {
    max-width: 800px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(48px, 5vw, 76px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;
}

.project-detail .related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.project-detail .related-grid a {
    display: block;
    min-width: 0;
}

.project-detail .related-grid img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #ddd5cb;
    transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}

.project-detail .related-grid a:hover img {
    transform: scale(1.025);
}

.project-detail .related-grid span {
    display: block;
    margin-top: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1.5;
    text-transform: uppercase;
}