* {
    box-sizing: border-box
}

:root {
    --ink: #171715;
    --gold: #a87912;
    --gold2: #c0922c;
    --ivory: #f4ead9;
    --paper: #fbf8f1;
    --muted: #77736b;
    --line: rgba(23, 23, 21, .15)
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "DM Sans", sans-serif;
    -webkit-font-smoothing: antialiased
}

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

.topline {
    height: 31px;
    background: var(--ink);
    color: #d6c29b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5.5%;
    font-size: 9px;
    letter-spacing: 1.8px
}

.topline i {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold2);
    margin: 0 8px 2px
}

.header {
    height: 88px;
    padding: 0 5.5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(251, 248, 241, .96);
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(23, 23, 21, .07);
    backdrop-filter: blur(14px)
}

.brand,
.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px
}

.brand img {
    width: 58px;
    height: 58px;
    object-fit: contain
}

.brand-copy,
.footer-brand span {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.brand-copy b,
.footer-brand b {
    font: 800 19px Manrope;
    letter-spacing: 3px
}

.brand-copy small,
.footer-brand small {
    font-size: 8px;
    letter-spacing: 1.55px;
    color: var(--gold);
    font-weight: 700
}

.nav {
    display: flex;
    align-items: center;
    gap: 34px;
    font-size: 11px;
    font-weight: 600
}

.nav>a:not(.nav-cta) {
    color: #5d5a53;
    transition: color .2s
}

.nav>a:hover,
.nav>a.active {
    color: var(--gold)
}

.nav-cta {
    background: var(--ink);
    color: white;
    padding: 15px 20px;
    letter-spacing: .2px;
    transition: background .25s, transform .25s
}

.nav-cta:hover {
    background: var(--gold);
    transform: translateY(-2px);
}

.nav>a.nav-cta:hover {
    color: #000;
}

.nav-cta span,
.btn span {
    margin-left: 16px;
    color: var(--gold2)
}

.menu-toggle {
    display: none
}

.hero {
    height: min(760px, 78vw);
    min-height: 620px;
    background: #252522;
    position: relative;
    overflow: hidden;
    color: white;
    display: flex;
    align-items: center
}

.hero-image {
    position: absolute;
    inset: 0;
    background: url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=2200&q=90") center 54%/cover;
    transform: scale(1.04);
    animation: heroZoom 12s ease-out forwards
}

.hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(12, 13, 12, .88) 0%, rgba(12, 13, 12, .68) 43%, rgba(12, 13, 12, .13) 100%), linear-gradient(0deg, rgba(0, 0, 0, .35), transparent 40%)
}

.hero-content {
    position: relative;
    z-index: 1;
    margin-left: 11%;
    max-width: 650px;
    padding: 70px 0
}

.eyebrow,
.section-kicker {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 12px
}

.eyebrow.light,
.section-kicker.light {
    color: #d9b96f
}

.eyebrow span {
    width: 27px;
    height: 1px;
    background: var(--gold2)
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1,
h2 {
    font-family: Manrope, sans-serif;
    letter-spacing: -2.7px
}

h1 {
    font-size: clamp(58px, 7.3vw, 104px);
    line-height: .99;
    font-weight: 600;
    margin: 28px 0 25px
}

h1 em,
h2 em,
.contact-text em,
.feature-content em,
.promise em {
    font-family: Georgia, serif;
    font-weight: 400;
    color: var(--gold2)
}

.hero-content>p {
    font-size: 14px;
    line-height: 1.9;
    color: #dedbd4;
    max-width: 460px
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 36px
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 17px 22px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    transition: transform .25s, background .25s
}

.btn:hover {
    transform: translateY(-3px)
}

.btn-gold {
    background: var(--gold2);
    color: #171715
}

.btn-gold span {
    color: #171715
}

.text-link {
    font-size: 11px;
    font-weight: 600;
    color: #eee
}

.play {
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    width: 29px;
    height: 29px;
    font-size: 8px;
    margin-right: 9px
}

.hero-bottom {
    position: absolute;
    bottom: 27px;
    left: 5.5%;
    right: 5.5%;
    display: flex;
    align-items: center;
    gap: 17px;
    font-size: 8px;
    letter-spacing: 1.5px;
    color: #d8d5ce
}

.hero-line {
    height: 1px;
    width: 60px;
    background: var(--gold2)
}

.scroll-note {
    margin-left: auto
}

.hero-stamp {
    position: absolute;
    right: 7%;
    bottom: 16%;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(213, 174, 91, .7);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #d5ae5b;
    transform: rotate(-13deg)
}

.hero-stamp span {
    font: italic 55px Georgia;
    line-height: .8
}

.hero-stamp small {
    font-size: 7px;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 8px
}

.section-pad {
    padding: 120px 11%
}

.intro {
    background: var(--paper)
}

.intro-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 9%;
    align-items: start;
    margin-top: 34px
}

.intro h2,
.section-head h2,
.promise h2 {
    font-size: clamp(39px, 4.6vw, 62px);
    font-weight: 600;
    line-height: 1.13;
    margin: 0
}

.intro h2 em,
.section-head h2 em,
.promise h2 em {
    color: var(--gold)
}

.intro-copy {
    padding-top: 7px
}

.intro-copy p {
    font-size: 12px;
    line-height: 2;
    color: #77736b
}

.intro-copy .lead {
    font: 500 17px/1.7 Manrope;
    color: #282722;
    margin-bottom: 16px
}

.under-link {
    display: inline-block;
    margin-top: 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--gold);
    font-size: 10px;
    font-weight: 700
}

.under-link span {
    margin-left: 24px;
    color: var(--gold)
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    margin-top: 82px;
    padding-top: 30px;
    gap: 20px
}

.stats>div {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.stats strong {
    font: 600 38px Manrope;
    letter-spacing: -2px
}

.stats strong span {
    color: var(--gold)
}

.stats small {
    font-size: 8px;
    letter-spacing: 1.2px;
    color: #77736b
}

.stats-note {
    font: italic 16px/1.5 Georgia;
    color: var(--gold);
    justify-content: center;
    align-items: flex-end;
    text-align: right
}

.services {
    background: #eee5d7
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 54px
}

.section-head h2 {
    margin-top: 26px
}

.section-head>p {
    font-size: 11px;
    line-height: 1.9;
    color: #77736b;
    margin: 0 0 6px
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(23, 23, 21, .2);
    border-bottom: 1px solid rgba(23, 23, 21, .2)
}

.service-card {
    min-height: 290px;
    padding: 25px 22px 23px 0;
    position: relative;
    border-right: 1px solid rgba(23, 23, 21, .16);
    margin-right: 22px;
    transition: transform .3s
}

.service-card:last-child {
    border: 0;
    margin: 0
}

.service-card:hover {
    transform: translateY(-7px)
}

.service-number {
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--gold)
}

.service-icon {
    font: 42px Georgia;
    color: var(--gold);
    margin: 32px 0 22px
}

.service-card h3 {
    font: 700 16px Manrope;
    letter-spacing: -.4px;
    margin-bottom: 12px
}

.service-card p {
    font-size: 10px;
    line-height: 1.9;
    color: #77736b;
    max-width: 230px
}

.service-card>a {
    position: absolute;
    bottom: 24px;
    right: 24px;
    font-size: 19px;
    color: var(--gold)
}

.feature {
    height: 650px;
    position: relative;
    background: #171715;
    color: white;
    display: flex;
    align-items: center;
    overflow: hidden
}

.feature-photo {
    position: absolute;
    inset: 0 0 0 43%;
    background: url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1500&q=85") center/cover
}

.feature:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #171715 0%, #171715 39%, rgba(23, 23, 21, .72) 58%, rgba(23, 23, 21, .08) 100%);
    z-index: 1
}

.feature-content {
    position: relative;
    z-index: 2;
    margin-left: 11%;
    max-width: 440px
}

.feature-content h2,
.contact-text h2 {
    font-size: clamp(47px, 5.6vw, 72px);
    line-height: 1.08;
    margin: 30px 0 20px;
    font-weight: 600
}

.feature-content p,
.contact-text p {
    font-size: 12px;
    line-height: 2;
    color: #c5c1b9;
    max-width: 360px;
    margin-bottom: 30px
}

.btn-outline {
    border: 1px solid rgba(255, 255, 255, .55);
    color: white
}

.btn-outline span {
    color: var(--gold2)
}

.feature-caption {
    position: absolute;
    z-index: 2;
    right: 5.5%;
    bottom: 30px;
    font-size: 8px;
    letter-spacing: 2px;
    color: #e2d4b8
}

.feature-caption span {
    color: var(--gold2);
    padding: 0 9px
}

.projects {
    background: var(--paper)
}

.project-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: 250px 250px;
    gap: 17px
}

.project {
    position: relative;
    overflow: hidden;
    background: #ddd
}

.project-large {
    grid-row: span 2
}

.project img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
    filter: saturate(.78)
}

.project:hover img {
    transform: scale(1.055)
}

.project:after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, .72))
}

.project-overlay {
    position: absolute;
    z-index: 1;
    bottom: 23px;
    left: 25px;
    right: 25px;
    color: white
}

.project-overlay span {
    font-size: 8px;
    letter-spacing: 2px;
    color: #e0bd73
}

.project-overlay h3 {
    font: 600 22px Manrope;
    margin: 8px 0 0
}

.project-overlay b {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 21px;
    font-weight: 400
}

.project-disclaimer {
    font-size: 9px;
    color: #999187;
    margin: 15px 0 0
}

.promise {
    background: #eee5d7
}

.promise-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
    margin-top: 35px
}

.promise h2 {
    font-size: clamp(42px, 5vw, 64px)
}

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

.promise-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 15px;
    padding: 23px 0;
    border-bottom: 1px solid var(--line)
}

.promise-item>span {
    font-size: 10px;
    color: var(--gold);
    padding-top: 3px
}

.promise-item h3 {
    font: 700 14px Manrope;
    margin: 0 0 8px
}

.promise-item p {
    font-size: 10px;
    line-height: 1.8;
    color: #77736b;
    margin: 0;
    max-width: 340px
}

.contact-band {
    background: var(--ink);
    color: white;
    padding: 100px 11%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 490px
}

.contact-text {
    position: relative;
    z-index: 1
}

.contact-text h2 {
    margin: 24px 0 18px
}

.contact-text p {
    max-width: 400px
}

.contact-mark {
    position: absolute;
    right: 12%;
    top: 50%;
    transform: translateY(-50%);
    font: italic 390px/.8 Georgia;
    color: rgba(255, 255, 255, .035);
    letter-spacing: -30px
}

.contact-mark span {
    color: rgba(184, 136, 35, .16)
}

.footer {
    background: #11110f;
    color: #b9b5ad;
    padding: 48px 5.5% 20px
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 40px
}

.footer-brand img {
    width: 55px;
    height: 55px;
    object-fit: contain
}

.footer-brand b {
    color: white
}

.footer-top>p {
    font: italic 22px/1.35 Georgia;
    margin: 0;
    color: white
}

.footer-top>p em {
    color: var(--gold2)
}

.back-top {
    font-size: 8px;
    letter-spacing: 1.5px;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 8px
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .13);
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    letter-spacing: 1.2px;
    color: #77736b
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1)
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0)
}

@keyframes heroZoom {
    to {
        transform: scale(1)
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}

@media(max-width:900px) {
    .nav {
        gap: 18px
    }

    .section-pad {
        padding: 90px 7%
    }

    .hero-content {
        margin-left: 8%
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .service-card:nth-child(2) {
        border-right: 0
    }

    .service-card:nth-child(-n+2) {
        border-bottom: 1px solid rgba(23, 23, 21, .16)
    }

    .service-card {
        margin-right: 18px
    }

    .service-card:nth-child(2n) {
        margin-right: 0;
        padding-left: 18px
    }

    .feature-content {
        margin-left: 8%
    }

    .contact-band {
        padding-left: 8%;
        padding-right: 8%
    }
}

@media(max-width:650px) {
    .topline {
        padding: 0 5%;
        font-size: 7px;
        letter-spacing: 1px
    }

    .topline span:last-child {
        display: none
    }

    .header {
        height: 72px;
        padding: 0 5%
    }

    .brand img {
        width: 48px;
        height: 48px
    }

    .brand-copy b {
        font-size: 16px
    }

    .brand-copy small {
        font-size: 7px
    }

    .menu-toggle {
        display: flex;
        width: 40px;
        height: 40px;
        border: 0;
        background: transparent;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        z-index: 22
    }

    .menu-toggle span {
        height: 1px;
        width: 24px;
        background: var(--ink);
        display: block
    }

    .nav {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: var(--paper);
        padding: 25px 7% 30px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 1px solid var(--line);
        box-shadow: 0 15px 20px #00000010
    }

    .nav.open {
        display: flex
    }

    .nav>a:not(.nav-cta) {
        padding: 14px 0;
        border-bottom: 1px solid var(--line)
    }

    .nav-cta {
        margin-top: 18px;
        text-align: center
    }

    .hero {
        min-height: 690px;
        height: calc(100svh - 103px);
        max-height: 800px
    }

    .hero-image {
        background-position: 58% center
    }

    .hero-shade {
        background: linear-gradient(90deg, rgba(12, 13, 12, .85), rgba(12, 13, 12, .42)), linear-gradient(0deg, rgba(0, 0, 0, .42), transparent 55%)
    }

    .hero-content {
        margin: 0;
        padding: 40px 7%;
    }

    .hero h1 {
        font-size: clamp(55px, 13vw, 76px);
        letter-spacing: -2px;
        margin: 25px 0
    }

    .hero-content>p {
        font-size: 12px;
        max-width: 340px
    }

    .hero-actions {
        gap: 18px;
        flex-wrap: wrap
    }

    .btn {
        padding: 15px 16px;
        font-size: 10px
    }

    .text-link {
        font-size: 10px
    }

    .hero-stamp {
        width: 78px;
        height: 78px;
        right: 7%;
        bottom: 15%;
        opacity: .8
    }

    .hero-stamp span {
        font-size: 39px
    }

    .hero-stamp small {
        font-size: 5px
    }

    .hero-bottom {
        left: 7%;
        right: 7%;
        font-size: 7px;
        gap: 9px
    }

    .scroll-note {
        display: none
    }

    .section-pad {
        padding: 75px 7%
    }

    .intro-grid,
    .promise-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .intro h2,
    .section-head h2 {
        font-size: 43px
    }

    .intro-copy .lead {
        font-size: 15px
    }

    .stats {
        grid-template-columns: 1fr 1fr;
        margin-top: 50px;
        row-gap: 27px
    }

    .stats strong {
        font-size: 32px
    }

    .stats-note {
        align-items: flex-start;
        text-align: left
    }

    .section-head {
        display: block;
        margin-bottom: 35px
    }

    .section-head>p {
        margin-top: 18px
    }

    .service-grid {
        grid-template-columns: 1fr 1fr
    }

    .service-card {
        min-height: 270px;
        padding: 20px 12px 20px 0;
        margin-right: 12px
    }

    .service-card:nth-child(2n) {
        padding-left: 12px
    }

    .service-card h3 {
        font-size: 14px
    }

    .service-card p {
        font-size: 9px
    }

    .service-icon {
        margin: 27px 0 18px
    }

    .feature {
        height: 610px;
        align-items: flex-end;
        padding-bottom: 70px
    }

    .feature-photo {
        inset: 0;
        background-position: 60% center
    }

    .feature:before {
        background: linear-gradient(0deg, #171715 0%, rgba(23, 23, 21, .88) 40%, rgba(23, 23, 21, .1) 100%)
    }

    .feature-content {
        margin: 0 7%;
        max-width: 100%
    }

    .feature-content h2,
    .contact-text h2 {
        font-size: 53px
    }

    .feature-content p {
        font-size: 11px
    }

    .feature-caption {
        font-size: 7px;
        right: 7%
    }

    .project-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 300px 230px 230px
    }

    .project-large {
        grid-row: auto
    }

    .promise-grid {
        margin-top: 28px
    }

    .promise h2 {
        font-size: 45px
    }

    .contact-band {
        padding: 75px 7%;
        min-height: 470px
    }

    .contact-mark {
        font-size: 250px;
        right: -3%;
        top: 65%
    }

    .footer {
        padding: 38px 7% 18px
    }

    .footer-top {
        gap: 20px;
        flex-wrap: wrap
    }

    .footer-top>p {
        font-size: 17px
    }

    .back-top {
        margin-left: auto
    }

    .footer-bottom {
        gap: 12px;
        flex-direction: column;
        font-size: 7px
    }

    .footer-bottom span:last-child {
        display: none
    }
}

/* Multi-page layouts */
.subpage-hero {
    background: var(--ink);
    color: #fff;
    padding: 95px 11% 88px;
    position: relative;
    overflow: hidden;
    min-height: 330px
}

.subpage-hero:after {
    content: "O.";
    position: absolute;
    right: 7%;
    bottom: -80px;
    font: italic 300px/.9 Georgia;
    color: rgba(255, 255, 255, .035)
}

.subpage-hero .section-kicker {
    color: #d2b16a
}

.subpage-hero h1 {
    font: 600 clamp(48px, 7vw, 86px)/1.03 Manrope, sans-serif;
    letter-spacing: -3px;
    max-width: 850px;
    margin: 25px 0 20px;
    position: relative;
    z-index: 1
}

.subpage-hero h1 em {
    font-family: Georgia, serif;
    font-weight: 400;
    color: #d0aa5e
}

.subpage-hero p {
    max-width: 590px;
    font-size: 13px;
    line-height: 1.9;
    color: #c5c1b9;
    position: relative;
    z-index: 1
}

.page-content {
    padding: 85px 11%
}

.page-content h2 {
    font: 600 clamp(32px, 4vw, 53px)/1.1 Manrope, sans-serif;
    letter-spacing: -1.7px;
    margin: 0 0 24px
}

.page-content h2 em {
    font-family: Georgia, serif;
    color: var(--gold);
    font-weight: 400
}

.page-content p {
    font-size: 13px;
    line-height: 2;
    color: #716d65;
    max-width: 760px
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9%;
    align-items: start
}

.eyebrow-line {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 20px
}

.values-grid,
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px
}

.value-card,
.contact-card {
    border: 1px solid var(--line);
    padding: 27px 24px;
    min-height: 175px
}

.value-card span {
    font-size: 10px;
    color: var(--gold)
}

.value-card h3,
.contact-card h3 {
    font: 700 15px Manrope;
    margin: 22px 0 10px
}

.value-card p,
.contact-card p {
    font-size: 11px;
    line-height: 1.8;
    margin: 0
}

.service-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 28px;
    margin-top: 38px;
    border-top: 1px solid var(--line)
}

.service-detail {
    padding: 28px 0;
    border-bottom: 1px solid var(--line)
}

.service-detail .service-number {
    color: var(--gold);
    font-size: 10px
}

.service-detail h3 {
    font: 700 19px Manrope;
    margin: 17px 0 10px
}

.service-detail p {
    font-size: 12px;
    margin: 0 0 15px
}

.service-detail a {
    font-size: 10px;
    font-weight: 700;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 7px
}

.project-grid-full {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px
}

.project-grid-full .project {
    height: 330px
}

.project-grid-full .project:last-child {
    grid-column: span 2;
    height: 350px
}

.contact-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 8%;
    align-items: start
}

.contact-lines {
    border-top: 1px solid var(--line);
    margin-top: 24px
}

.contact-lines>div {
    padding: 18px 0;
    border-bottom: 1px solid var(--line)
}

.contact-lines small {
    display: block;
    font-size: 9px;
    letter-spacing: 1.6px;
    color: var(--gold);
    margin-bottom: 8px
}

.contact-lines a {
    font-size: 14px;
    overflow-wrap: anywhere
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px
}

.social-links a {
    border: 1px solid var(--line);
    padding: 10px 13px;
    font-size: 10px;
    transition: background .2s, color .2s
}

.social-links a:hover {
    background: var(--ink);
    color: #fff
}

.enquiry-panel {
    background: #eee5d7;
    padding: 32px
}

.enquiry-panel label {
    display: block;
    font-size: 10px;
    letter-spacing: .5px;
    font-weight: 700;
    margin: 17px 0 8px
}

.enquiry-panel input,
.enquiry-panel select,
.enquiry-panel textarea {
    width: 100%;
    padding: 13px 12px;
    border: 1px solid rgba(23, 23, 21, .2);
    background: #fbf8f1;
    font: 12px 'DM Sans', sans-serif;
    border-radius: 0;
    color: var(--ink)
}

.enquiry-panel textarea {
    min-height: 120px;
    resize: vertical
}

.enquiry-panel .btn {
    margin-top: 20px;
    border: 0;
    cursor: pointer
}

.form-note {
    font-size: 10px !important;
    margin-top: 12px
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .13)
}

.footer-socials a {
    font-size: 9px;
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 8px 11px
}

.footer-socials a:hover {
    background: var(--gold);
    color: #171715
}

.social-placeholder {
    cursor: pointer
}

@media(max-width:800px) {
    .subpage-hero {
        padding: 75px 7%
    }

    .page-content {
        padding: 70px 7%
    }

    .two-col,
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 35px
    }

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

    .project-grid-full .project {
        height: 270px
    }
}

@media(max-width:600px) {
    .subpage-hero {
        padding: 65px 7%;
        min-height: 300px
    }

    .subpage-hero h1 {
        letter-spacing: -1.5px
    }

    .page-content {
        padding: 58px 7%
    }

    .values-grid,
    .contact-grid,
    .service-list,
    .project-grid-full {
        grid-template-columns: 1fr
    }

    .project-grid-full .project:last-child {
        grid-column: auto;
        height: 270px
    }

    .project-grid-full .project {
        height: 270px
    }

    .enquiry-panel {
        padding: 23px
    }

    .footer-socials {
        gap: 6px
    }
}
/* Expanded editorial sections */
.editorial-intro{display:grid;grid-template-columns:1fr .92fr;gap:8%;align-items:center}.editorial-image{position:relative;min-height:520px}.editorial-image img{width:100%;height:520px;object-fit:cover;display:block}.image-index{position:absolute;bottom:0;left:0;background:var(--ink);color:var(--ivory);padding:15px 18px;font-size:9px;letter-spacing:1.8px}.editorial-copy h2,.section-head h2{font:700 clamp(34px,4vw,54px)/1.12 Manrope,sans-serif;letter-spacing:-1.8px}.editorial-copy h2 em,.section-head h2 em,.dark-process h2 em,.image-story h2 em{font-family:Georgia,serif;font-weight:400;color:var(--gold);font-style:italic}.editorial-copy p{font-size:13px;line-height:1.95;color:#68645c}.editorial-copy .lead{font-size:16px;color:#2a2925}
.dark-process,.project-stages{background:var(--ink);color:var(--paper);padding:100px 8%}.dark-process .section-head,.project-stages .section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:48px}.dark-process .section-head>p,.project-stages .section-head>p{max-width:300px;color:#bcb7ac;font-size:12px;line-height:1.8}.dark-process h2,.project-stages h2{font:700 clamp(35px,4vw,54px)/1.12 Manrope,sans-serif;margin:18px 0}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #46443e}.process-grid article{padding:27px 23px 10px 0;border-right:1px solid #46443e;margin-right:22px}.process-grid article:last-child{border-right:0;margin-right:0}.process-grid article>span{font-size:11px;color:var(--gold2);letter-spacing:2px}.process-grid h3{font:700 17px Manrope;margin:25px 0 12px}.process-grid p{font-size:12px;line-height:1.8;color:#bcb7ac}
.principles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.principle-card{background:#fffdf8;border:1px solid #e8e1d4;padding:30px;min-height:210px}.principle-icon{font-size:25px;color:var(--gold);margin-bottom:25px}.principle-card h3,.audience-grid h3{font:700 17px Manrope;margin:0 0 12px}.principle-card p,.audience-grid p{font-size:12px;line-height:1.8;color:#6c685f;margin:0}
.image-story{position:relative;min-height:560px;background:#171715;display:flex;align-items:center;overflow:hidden}.image-story>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.54}.image-story-panel{position:relative;z-index:1;color:white;margin:65px 9%;max-width:520px}.image-story h2,.service-image-banner h2{font:700 clamp(42px,5vw,64px)/1.06 Manrope;margin:25px 0}.image-story-panel p,.service-image-banner p{font-size:13px;line-height:1.9;color:#ddd5c7;max-width:420px;margin-bottom:25px}
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.audience-grid article{background:#fff;border:1px solid #e8e1d4}.audience-grid img{width:100%;height:230px;object-fit:cover;display:block}.audience-grid article>div{padding:23px}
.service-image-banner{min-height:480px;position:relative;background:var(--ink);display:flex;align-items:center;padding:70px 9%;overflow:hidden}.service-image-banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}.service-image-banner>div{position:relative;z-index:1;max-width:560px;color:#fff}.service-image-banner h2 em{color:var(--gold2);font-family:Georgia,serif;font-weight:400}
.capability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.capability-grid article{background:#fff;border:1px solid #e9e2d6;overflow:hidden;transition:transform .25s,box-shadow .25s}.capability-grid article:hover{transform:translateY(-5px);box-shadow:0 18px 40px #17171512}.capability-grid article>img{display:block;width:100%;height:225px;object-fit:cover}.capability-body{padding:24px}.capability-body>span,.portfolio-card span{font-size:9px;letter-spacing:1.8px;color:var(--gold);font-weight:700}.capability-body h3{font:700 19px Manrope;margin:14px 0 10px}.capability-body p,.capability-body li{font-size:12px;line-height:1.8;color:#6b675f}.capability-body ul{padding-left:18px;margin:15px 0 23px}.capability-body a,.portfolio-card a{font-size:10px;font-weight:800;letter-spacing:.5px;color:#8a6410}
.portfolio-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:20px}.portfolio-card{position:relative;min-height:420px;background:#222;overflow:hidden;color:#fff}.portfolio-card.portfolio-tall{grid-row:span 2;min-height:860px}.portfolio-card>img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;transition:transform .6s;opacity:.78}.portfolio-card:hover>img{transform:scale(1.045)}.portfolio-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.88))}.portfolio-card>div{position:absolute;z-index:1;bottom:0;left:0;right:0;padding:32px}.portfolio-card span{color:#e0bc6b}.portfolio-card h3{font:700 clamp(22px,2.7vw,32px) Manrope;margin:12px 0}.portfolio-card p{font-size:12px;line-height:1.7;color:#e0ddd7;max-width:420px}.portfolio-card a{color:#f0c96c}.project-disclaimer{font-size:11px;line-height:1.8;color:#77736b;margin-top:25px}
.stage-strip{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:20px;align-items:start}.stage-strip article span{color:var(--gold2);font-size:11px;letter-spacing:2px}.stage-strip h3{font:700 18px Manrope;margin:18px 0 8px}.stage-strip p{font-size:12px;line-height:1.8;color:#c2bcb0}.stage-strip>b{color:var(--gold2);padding-top:22px}.project-cta-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;align-items:center;background:#f0e9dc;padding:35px}.project-cta-grid h3{font:700 25px Manrope}.project-cta-grid p{font-size:13px;line-height:1.8;color:#6b675f;margin-bottom:25px}.project-cta-grid img{width:100%;height:300px;object-fit:cover}
.start-options-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.start-options-grid article{padding:38px;background:#fff;border:1px solid #e6dfd2}.option-number{font:400 40px Georgia;color:var(--gold);margin-bottom:25px}.start-options-grid h3{font:700 24px Manrope}.start-options-grid p{font-size:13px;line-height:1.85;color:#6b675f;min-height:70px;margin-bottom:25px}.btn-outline-dark{display:inline-flex;border:1px solid #25241f;padding:14px 20px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px}.estimate-disclaimer{margin-top:30px;background:#f0e8d9;border-left:3px solid var(--gold);padding:20px 24px;font-size:12px;line-height:1.8;color:#5d584f}
/* Project-start modal */
.project-modal{position:fixed;inset:0;z-index:1000;background:rgba(10,10,9,.78);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:18px}.project-modal.is-open{display:flex;animation:modalFade .2s ease}@keyframes modalFade{from{opacity:0}to{opacity:1}}.project-modal-dialog{width:min(1050px,100%);max-height:min(92vh,900px);overflow:auto;background:var(--paper);box-shadow:0 30px 100px #0008;position:relative}.project-modal-header{background:var(--ink);color:#fff;padding:28px 34px;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;position:sticky;top:0;z-index:3}.project-modal-header .section-kicker{color:var(--gold2)}.project-modal-header h2{font:700 clamp(25px,3vw,36px)/1.15 Manrope;margin:12px 0 0}.project-modal-header h2 em{font-family:Georgia,serif;font-weight:400;color:var(--gold2)}.modal-close{border:1px solid #6c6659;background:transparent;color:#fff;width:42px;height:42px;font-size:24px;cursor:pointer;flex-shrink:0}.project-modal-content{padding:30px 34px 36px}.modal-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:25px}.modal-choice{border:1px solid #ddd4c4;background:#fff;padding:22px;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}.modal-choice strong{display:block;font:700 17px Manrope;margin-bottom:8px}.modal-choice span{font-size:12px;line-height:1.7;color:#706b62}.modal-choice.selected{border-color:var(--gold);background:#f6edda;box-shadow:inset 0 0 0 1px var(--gold)}.modal-pane{display:none;border-top:1px solid #e2d9c9;padding-top:24px}.modal-pane.active{display:block;animation:modalFade .2s ease}.modal-pane h3{font:700 23px Manrope;margin:0 0 8px}.modal-pane>p{font-size:12px;color:#716b62;line-height:1.75;margin:0 0 20px}.modal-contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:15px}.modal-contact-card{background:#fff;border:1px solid #e6dfd2;padding:25px}.modal-contact-card small{display:block;color:var(--gold);font-weight:800;font-size:9px;letter-spacing:1.8px;margin-bottom:13px}.modal-contact-card a{font-weight:700;overflow-wrap:anywhere}.modal-contact-card p{font-size:12px;color:#77736b;line-height:1.7}.modal-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.modal-field{display:flex;flex-direction:column;gap:7px}.modal-field.full{grid-column:1/-1}.modal-field label{font-size:10px;font-weight:800;letter-spacing:.4px}.modal-field input,.modal-field select,.modal-field textarea{width:100%;border:1px solid #d8d0c2;background:#fff;padding:12px 13px;font:13px 'DM Sans',sans-serif;color:var(--ink);border-radius:0}.modal-field textarea{min-height:95px;resize:vertical}.project-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}.project-pick{display:flex;gap:11px;align-items:flex-start;border:1px solid #e2d9c9;background:#fff;padding:14px;cursor:pointer}.project-pick input{accent-color:var(--gold);margin-top:4px}.project-pick strong{display:block;font-size:12px;line-height:1.5}.project-pick small{display:block;font-size:10px;color:#77736b;line-height:1.6;margin-top:4px}.project-pick .pick-price{display:block;font-size:11px;color:#8a6410;font-weight:800;margin-top:7px}.estimate-total{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--ink);color:#fff;padding:20px 22px;margin:20px 0}.estimate-total span{font-size:11px;color:#d2c9b8}.estimate-total strong{font:800 clamp(19px,3vw,27px) Manrope;color:var(--gold2);text-align:right}.modal-submit-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.modal-note{font-size:10px;line-height:1.7;color:#77736b;max-width:530px}body.modal-lock{overflow:hidden}
@media(max-width:900px){.editorial-intro{grid-template-columns:1fr;gap:35px}.editorial-image,.editorial-image img{min-height:360px;height:360px}.process-grid{grid-template-columns:repeat(2,1fr);row-gap:25px}.principles-grid,.capability-grid{grid-template-columns:repeat(2,1fr)}.audience-grid{grid-template-columns:1fr 1fr}.portfolio-card.portfolio-tall{min-height:700px}.portfolio-card{min-height:340px}.stage-strip{grid-template-columns:1fr 1fr;gap:22px}.stage-strip>b{display:none}.dark-process .section-head,.project-stages .section-head{display:block}.project-cta-grid{grid-template-columns:1fr}.project-cta-grid img{height:260px}}
@media(max-width:600px){.dark-process,.project-stages{padding:65px 6%}.process-grid,.principles-grid,.capability-grid,.audience-grid,.portfolio-mosaic,.start-options-grid{grid-template-columns:1fr}.process-grid article{border-right:0;border-bottom:1px solid #46443e;padding-bottom:25px}.portfolio-card,.portfolio-card.portfolio-tall{grid-row:auto;min-height:430px}.project-cta-grid{padding:22px}.project-modal{padding:0;align-items:flex-end}.project-modal-dialog{max-height:95vh}.project-modal-header{padding:22px 20px}.project-modal-content{padding:22px 20px 28px}.modal-choice-grid,.modal-contact-cards,.modal-form-grid,.project-picker{grid-template-columns:1fr}.modal-field.full{grid-column:auto}.modal-choice{padding:17px}.modal-submit-row{align-items:stretch}.modal-submit-row .btn{width:100%;justify-content:center}.estimate-total{align-items:flex-start;flex-direction:column}.estimate-total strong{text-align:left}.start-options-grid article{padding:27px}}

img,
svg,
video,
canvas {
    max-width: 100%;
}

main,
section,
article,
.header,
.page-content,
.section-pad,
.footer {
    min-width: 0;
}

.project-disclaimer,
.estimate-disclaimer,
.modal-note,
.modal-pane p {
    overflow-wrap: anywhere;
}

.menu-toggle:focus-visible,
.nav a:focus-visible,
.btn:focus-visible,
.back-top:focus-visible,
.modal-close:focus-visible,
.modal-choice:focus-visible {
    outline: 2px solid var(--gold2);
    outline-offset: 4px;
}

@media (max-width: 900px) {
    .header {
        height: 76px;
        padding-inline: clamp(20px, 5vw, 48px);
    }

    .menu-toggle {
        display: flex;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding: 8px;
        border: 0;
        background: transparent;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        z-index: 22;
    }

    .menu-toggle span {
        display: block;
        width: 24px;
        height: 1px;
        background: var(--ink);
    }

    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 16px clamp(20px, 7vw, 64px) 24px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--paper);
        border-top: 1px solid var(--line);
        box-shadow: 0 15px 20px #00000010;
    }

    .nav.open {
        display: flex;
    }

    .nav > a:not(.nav-cta) {
        display: flex;
        min-height: 48px;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
    }

    .nav .nav-cta {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        margin-top: 16px;
        text-align: center;
    }

    .project-modal-dialog {
        max-height: min(92dvh, 900px);
    }
}

@media (max-width: 650px) {
    .hero {
        height: auto;
        min-height: clamp(500px, calc(100svh - 107px), 780px);
        max-height: none;
    }

    .section-pad {
        padding: clamp(60px, 10vw, 75px) clamp(20px, 7vw, 40px);
    }

    .page-content {
        padding: clamp(50px, 9vw, 62px) clamp(20px, 7vw, 40px);
    }

    .subpage-hero {
        padding: clamp(55px, 10vw, 68px) clamp(20px, 7vw, 40px);
    }

    .feature {
        height: auto;
        min-height: clamp(560px, 82svh, 700px);
        padding: 70px 0 86px;
    }

    .feature-content {
        margin-inline: clamp(20px, 7vw, 40px);
    }

    .feature-caption {
        bottom: 24px;
    }

    .enquiry-panel input,
    .enquiry-panel select,
    .enquiry-panel textarea,
    .modal-field input,
    .modal-field select,
    .modal-field textarea {
        font-size: 16px;
    }

    .modal-close {
        width: 44px;
        height: 44px;
    }

    .project-modal-dialog {
        max-height: 95dvh;
    }
}

@media (max-width: 480px) {
    .topline {
        font-size: clamp(6px, 1.8vw, 7px);
        letter-spacing: .8px;
    }

    .brand {
        min-width: 0;
        gap: 7px;
    }

    .brand img {
        flex: 0 0 auto;
    }

    .brand-copy small {
        letter-spacing: 1px;
    }

    .hero h1 {
        font-size: clamp(42px, 12vw, 58px);
        letter-spacing: -1.5px;
    }

    .hero-actions {
        gap: 12px;
    }

    .hero-stamp {
        display: none;
    }

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

    .service-card,
    .service-card:nth-child(2n) {
        min-height: 220px;
        margin: 0;
        padding: 20px 38px 20px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(23, 23, 21, .16);
    }

    .service-card:last-child {
        border-bottom: 0;
    }

    .service-card p {
        max-width: 360px;
        font-size: 10px;
    }

    .feature-content h2,
    .contact-text h2 {
        font-size: clamp(42px, 11vw, 53px);
    }

    .contact-mark {
        font-size: clamp(190px, 54vw, 250px);
    }

    .footer-bottom {
        overflow-wrap: anywhere;
        line-height: 1.7;
    }
}

@media (max-width: 360px) {
    .brand-copy b {
        font-size: 15px;
        letter-spacing: 2px;
    }

    .brand-copy small {
        font-size: 6px;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero-bottom {
        letter-spacing: .8px;
    }
}

@media (max-width: 900px) and (max-height: 520px) {
    .hero {
        min-height: 480px;
    }
}