@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap'); :root {
    --ink: #202927;
    --muted: #68716b;
    --cream: #f8f6f1;
    --paper: #fffefa;
    --gold: #ad8750;
    --line: #e5dfd4;
    --dark: #22322e
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'DM Sans',sans-serif;
    line-height: 1.65
}

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

button,input,textarea {
    font: inherit
}

img {
    max-width: 100%
}

.container {
    width: min(1160px,calc(100% - 48px));
    margin: auto
}

.topbar {
    background: var(--dark);
    color: #e9e6dd;
    text-align: center;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 10px 20px
}

.nav-wrap {
    background: rgba(255,254,250,.96);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(15px)
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 85px;
    gap: 25px
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 0;
    font-family: 'Playfair Display',serif;
    font-size: 31px;
    letter-spacing: -.05em;
    white-space: nowrap
}

.brand span:last-child {
    color: var(--gold)
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em
}

.nav-links a:hover,.nav-links .active {
    color: #96703d
}

.nav-cta,.btn {
    background: var(--dark);
    color: #fff;
    padding: 14px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid var(--dark);
    transition: .2s
}

.btn:hover,.nav-cta:hover {
    background: #3b5048
}

.btn.outline {
    background: transparent;
    color: var(--dark);
    border-color: #aeb8ae
}

.btn.outline:hover {
    background: #eceee7
}

.menu {
    display: none;
    border: 0;
    background: transparent;
    font-size: 28px;
    cursor: pointer
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: 11px;
    color: #8f6b3b;
    font-weight: 700;
    margin-bottom: 20px
}

.serif,h1,h2,h3,.quote {
    font-family: 'Playfair Display',Georgia,serif;
    font-weight: 400;
    line-height: 1.15
}

h1 {
    font-size: clamp(48px,6.2vw,86px);
    letter-spacing: -.035em;
    margin: 0 0 25px
}

h2 {
    font-size: clamp(35px,4.3vw,57px);
    letter-spacing: -.028em;
    margin: 0 0 24px
}

h3 {
    font-size: 26px;
    margin: 0 0 12px
}

p {
    margin: 0 0 22px
}

.lead {
    font-size: 18px;
    line-height: 1.8;
    color: #555f58;
    max-width: 590px
}

.hero {
    min-height: 690px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: stretch
}

.hero-copy {
    padding: 110px 65px 100px max(48px,calc((100vw - 1160px)/2));
    display: flex;
    flex-direction: column;
    justify-content: center
}

.hero-copy .actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px
}

.hero-art {
    background: #d9d4c9;
    position: relative;
    overflow: hidden;
    min-height: 540px
}

.hero-art:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg,#d8d1c3 0%,#f3eee4 49%,#c2b7a3 100%)
}

.arch {
    position: absolute;
    border: 22px solid rgba(255,255,255,.55);
    border-bottom: 0;
    border-radius: 270px 270px 0 0;
    width: 66%;
    height: 75%;
    top: 12%;
    left: 18%;
    box-shadow: 0 20px 90px #675b4722
}

.arch:after {
    content: '';
    position: absolute;
    inset: 32px 30px 0;
    background: linear-gradient(160deg,#eae4d7,#c8bdab);
    border-radius: 250px 250px 0 0
}

.slab {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 22%;
    background: linear-gradient(150deg,#b5a88f,#eee7d9);
    transform: skewY(-8deg);
    transform-origin: left
}

.art-note {
    position: absolute;
    bottom: 45px;
    right: 42px;
    max-width: 300px;
    background: #fffdf6e8;
    padding: 26px 30px;
    border-left: 3px solid var(--gold);
    font-family: 'Playfair Display',serif;
    font-size: 22px;
    line-height: 1.4;
    box-shadow: 0 14px 55px #473c3020
}

.section {
    padding: 112px 0
}

.section.alt {
    background: var(--paper)
}

.center {
    text-align: center
}

.center .lead {
    margin: 0 auto
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center
}

.rule {
    width: 52px;
    height: 2px;
    background: var(--gold);
    margin: 24px 0
}

.cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    margin-top: 55px
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    padding: 34px 30px;
    min-height: 240px
}

.card .num {
    color: var(--gold);
    font-size: 12px;
    letter-spacing: .2em;
    margin-bottom: 35px
}

.card p {
    font-size: 14px;
    color: var(--muted);
    margin: 0
}

.feature {
    background: var(--dark);
    color: #fff;
    padding: 92px 0
}

.feature h2 {
    max-width: 850px
}

.feature .lead {
    color: #d3dcd5
}

.steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 28px;
    margin-top: 50px
}

.step {
    border-top: 1px solid #829088;
    padding-top: 25px
}

.step b {
    display: block;
    color: #cdb58a;
    font-size: 13px;
    margin-bottom: 17px
}

.step h3 {
    font-size: 23px
}

.step p {
    font-size: 14px;
    color: #c9d2ca
}

.statement {
    background: #eae5da;
    padding: 70px;
    text-align: center
}

.statement .quote {
    font-size: clamp(28px,4vw,48px);
    max-width: 900px;
    margin: 0 auto 15px
}

.statement small {
    color: #796b58;
    letter-spacing: .13em;
    text-transform: uppercase
}

.footer {
    background: #182521;
    color: #e7e7e1;
    padding: 72px 0 24px
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 55px
}

.footer .brand {
    font-size: 35px
}

.footer p,.footer a {
    color: #c1cbc4;
    font-size: 14px
}

.footer h4 {
    font-size: 12px;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: #c9a773;
    margin: 0 0 20px
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.footer-bottom {
    border-top: 1px solid #46544d;
    margin-top: 60px;
    padding-top: 20px;
    font-size: 12px;
    color: #aeb9b0;
    display: flex;
    justify-content: space-between;
    gap: 20px
}

.page-hero {
    padding: 100px 0 80px;
    background: var(--paper);
    border-bottom: 1px solid var(--line)
}

.page-hero h1 {
    max-width: 900px
}

.page-hero .lead {
    max-width: 720px
}

.story {
    max-width: 790px;
    margin: auto
}

.story p {
    font-size: 18px;
    line-height: 1.9;
    color: #4d5b52
}

.qualifications {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
    margin-top: 40px
}

.qual {
    background: white;
    border: 1px solid var(--line);
    padding: 26px
}

.qual strong {
    display: block;
    margin-bottom: 7px
}

.qual span {
    font-size: 14px;
    color: var(--muted)
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px
}

.contact-card {
    padding: 35px;
    border: 1px solid var(--line);
    background: #fff;
    margin-bottom: 16px
}

.contact-card strong {
    display: block;
    font-size: 12px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px
}

.contact-card a {
    font-size: 19px;
    overflow-wrap: anywhere
}

.contact-note {
    padding: 34px;
    background: #ebe6dc
}

.contact-note p {
    color: #58615b;
    font-size: 15px
}

.placeholder {
    border: 1px dashed #b8a788;
    padding: 35px;
    background: #fbf8f1
}

.placeholder strong {
    display: block;
    margin-bottom: 10px
}

.faq {
    border-top: 1px solid var(--line);
    padding: 22px 0
}

.faq summary {
    font-weight: 700;
    cursor: pointer
}

.faq p {
    margin: 15px 0 0;
    color: var(--muted);
    font-size: 15px
}

.muted {
    color: var(--muted)
}

.tag {
    display: inline-block;
    border: 1px solid #d5c7b0;
    color: #8c6d43;
    padding: 6px 12px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 20px
}

@media(max-width: 850px) {
    .hero {
        grid-template-columns:1fr
    }

    .hero-copy {
        padding: 75px 24px
    }

    .hero-art {
        min-height: 440px
    }

    .split,.contact-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

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

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

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

    .nav-links {
        display: none;
        position: absolute;
        top: 85px;
        left: 0;
        right: 0;
        background: var(--paper);
        padding: 24px;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        border-bottom: 1px solid var(--line)
    }

    .nav-links.open {
        display: flex
    }

    .menu {
        display: block
    }
}

@media(max-width: 550px) {
    .container {
        width:min(100% - 36px,1160px)
    }

    .section {
        padding: 72px 0
    }

    .cards,.steps,.qualifications,.footer-grid {
        grid-template-columns: 1fr
    }

    .card {
        min-height: 0
    }

    .hero-copy {
        padding: 65px 20px
    }

    .hero-art {
        min-height: 380px
    }

    .art-note {
        right: 18px;
        bottom: 25px;
        font-size: 19px;
        max-width: 250px
    }

    .statement {
        padding: 65px 22px
    }

    .page-hero {
        padding: 72px 0 55px
    }

    .footer-bottom {
        flex-direction: column
    }

    .brand {
        font-size: 28px
    }

    .contact-card a {
        font-size: 16px
    }
}

/* Brand refinement · October 2026 */
:root {
    --ink: #22292b;
    --muted: #6e716d;
    --cream: #f7f3ec;
    --paper: #fffdf9;
    --gold: #a98959;
    --line: #e8e1d6;
    --dark: #252e2d
}

.brand {
    display: flex;
    align-items: center;
    max-width: 245px
}

.brand-logo {
    display: block;
    width: 225px;
    height: 55px;
    object-fit: contain;
    object-position: left center;
    mix-blend-mode: multiply
}

.locality {
    background: #f4f0e9
}

.premium-panel {
    background: #292f2d;
    color: #f8f4eb;
    padding: 52px 48px;
    box-shadow: 0 20px 70px #252e2d18
}

.premium-panel h3 {
    font-size: 26px;
    margin: 10px 0
}

.premium-panel p {
    font-size: 15px;
    color: #d8d7d0;
    margin-bottom: 14px
}

.premium-panel hr {
    border: 0;
    border-top: 1px solid #676b63;
    margin: 25px 0
}

.panel-kicker {
    font-size: 11px;
    color: #d9bd8c;
    letter-spacing: .2em;
    font-weight: 700
}

.founder-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 9%;
    align-items: center
}

.founder-photo-wrap {
    background: #e8e3d8;
    padding: 18px
}

.founder-photo {
    width: 100%;
    height: 560px;
    object-fit: cover;
    object-position: center 30%;
    display: block
}

.founder-intro {
    background: #f7f3ec
}

@media(max-width: 780px) {
    .brand-logo {
        width:170px;
        height: 45px
    }

    .founder-grid {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .founder-photo {
        height: 410px;
        object-position: center 20%
    }

    .premium-panel {
        padding: 34px 28px
    }
}

/* Precisely cropped original brandmark — responsive header and footer */
.nav-wrap nav.container {
    min-height: 100px;
    align-items: center
}

.brand {
    flex: 0 0 auto;
    max-width: none;
    align-items: center;
    line-height: 1
}

.brand-logo {
    width: 310px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    mix-blend-mode: normal
}

.footer .brand-logo {
    width: 300px;
    filter: brightness(0) invert(1);
    opacity: .94
}

@media(max-width: 850px) {
    .nav-wrap nav.container {
        min-height:84px
    }

    .brand-logo {
        width: 245px
    }

    .nav-links {
        top: 84px
    }
}

@media(max-width: 550px) {
    .nav-wrap nav.container {
        min-height:78px
    }

    .brand-logo {
        width: min(235px,65vw)
    }

    .nav-links {
        top: 78px
    }
}