:root {
    --paper: #F8F7F3;
    --paper2: #F1F1EB;
    --ink: #192E32;
    --muted: #5C6969;
    --gold: #AA8865;
    --gold-light: #DCCCB8;
    --line: #DCDDD5;
    --white: #fff;
    --serif: Georgia, 'Times New Roman', serif;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

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

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

button {
    font: inherit
}

a:focus-visible, summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 5px
}

::selection {
    background: #ddc7a6;
    color: var(--ink)
}

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

.topbar {
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-bottom: 1px solid var(--line)
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0
}

.mark {
    width: 47px;
    height: 47px;
    border: 1px solid #C4C7BD;
    display: grid;
    place-items: center;
    border-radius: 50%;
    flex-shrink: 0
}

.mark svg {
    width: 29px;
    height: 29px
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.brand-text b {
    font-family: var(--serif);
    font-size: 24px;
    letter-spacing: .095em;
    font-weight: 500;
    line-height: 1
}

.brand-text small {
    font-size: 9px;
    letter-spacing: .2em;
    color: var(--muted);
    font-weight: 650;
    white-space: nowrap
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 36px
}

.desktop-nav a {
    font-size: 12px;
    letter-spacing: .035em;
    color: var(--muted);
    transition: color .18s
}

.desktop-nav a:hover {
    color: var(--ink)
}

.nav-cta {
    padding: 13px 20px !important;
    border: 1px solid #B8BFB9;
    color: var(--ink) !important;
    border-radius: 2px
}

.nav-cta:hover {
    border-color: var(--ink)
}

.mobile-nav {
    display: none
}

.eyebrow {
    font-size: 10px;
    letter-spacing: .25em;
    font-weight: 700;
    color: #8B755C;
    text-transform: uppercase
}

.hero {
    display: grid;
    grid-template-columns:1.12fr .88fr;
    gap: 56px;
    align-items: center;
    padding-top: 98px;
    padding-bottom: 124px
}

.hero h1 {
    font: normal clamp(55px, 5.55vw, 88px)/1.08 var(--serif);
    letter-spacing: -.061em;
    margin: 24px 0 28px;
    max-width: 800px
}

.hero h1 em {
    font-weight: 400;
    color: #9C7F60;
    white-space: nowrap
}

.hero-copy {
    max-width: 514px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.9;
    margin: 0
}

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

.button-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: var(--ink);
    color: white;
    border: 1px solid var(--ink);
    padding: 17px 21px;
    font-size: 11px;
    font-weight: 680;
    letter-spacing: .05em;
    transition: background .2s, transform .2s
}

.button-solid:hover {
    background: #324a4d;
    transform: translateY(-2px)
}

.button-solid .arr {
    font-size: 18px;
    font-weight: 400
}

.text-link {
    font-size: 12px;
    letter-spacing: .04em;
    border-bottom: 1px solid #B59A77;
    padding: 12px 0
}

.hero-art {
    position: relative;
    min-height: 518px;
    background: #20393B;
    overflow: hidden;
    display: grid;
    place-items: center
}

.hero-art:before {
    position: absolute;
    content: '';
    inset: 19px;
    border: 1px solid rgba(224, 211, 186, .26);
    pointer-events: none
}

.art-orbit {
    position: absolute;
    width: 360px;
    height: 360px;
    border: 1px solid #8A948D;
    border-radius: 50%;
    opacity: .45
}

.art-orbit:after {
    content: '';
    position: absolute;
    inset: 28px;
    border: 1px solid #C1A889;
    border-radius: 50%;
    opacity: .3
}

.art-glyph {
    width: min(82%, 380px);
    height: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .1))
}

.art-top {
    position: absolute;
    left: 45px;
    top: 44px;
    font-size: 9px;
    letter-spacing: .23em;
    color: #CDBBA3
}

.art-bottom {
    position: absolute;
    left: 45px;
    right: 45px;
    bottom: 45px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid rgba(228, 216, 198, .3);
    padding-top: 19px;
    color: #DDD1BE;
    font-size: 9px;
    line-height: 1.6;
    letter-spacing: .16em;
    text-transform: uppercase
}

.art-bottom span:last-child {
    font-family: var(--serif);
    font-size: 27px;
    font-style: italic;
    letter-spacing: 0;
    color: #DCC5A8
}

.fine-rule {
    border-top: 1px solid var(--line)
}

.section {
    padding: 105px 0
}

.section-head {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 75px;
    align-items: start;
    margin-bottom: 52px
}

.section-head h2, .left-heading h2, .contact-content h2, .inner-page h1 {
    font: normal clamp(40px, 4.2vw, 60px)/1.17 var(--serif);
    letter-spacing: -.052em;
    margin: 19px 0 0
}

.section-head p {
    font-size: 15px;
    line-height: 1.95;
    color: var(--muted);
    margin: 30px 0 0;
    max-width: 508px
}

.principles {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 14px
}

.principle {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .34);
    padding: 34px 31px 32px;
    min-height: 295px
}

.icon-square {
    width: 45px;
    height: 45px;
    border: 1px solid #D5D8CE;
    display: grid;
    place-items: center;
    margin-bottom: 42px
}

.icon-square svg {
    width: 24px;
    height: 24px;
    stroke: #9B7E5B
}

.principle h3 {
    font: normal 27px/1.1 var(--serif);
    letter-spacing: -.035em;
    margin: 0 0 16px
}

.principle p {
    font-size: 13px;
    line-height: 1.85;
    color: var(--muted);
    margin: 0
}

.midband {
    background: var(--paper2)
}

.split {
    display: grid;
    grid-template-columns:.79fr 1.21fr;
    gap: 95px
}

.left-heading {
    position: sticky;
    top: 30px;
    align-self: start
}

.left-heading h2 {
    max-width: 380px
}

.numbered {
    border-top: 1px solid #CDD0C7
}

.numbered-item {
    display: grid;
    grid-template-columns:70px 1fr;
    gap: 18px;
    padding: 33px 0;
    border-bottom: 1px solid #CDD0C7
}

.num {
    font: italic 25px/1 var(--serif);
    color: #A48665
}

.numbered-item h3 {
    font: normal 25px var(--serif);
    letter-spacing: -.025em;
    margin: 0 0 10px
}

.numbered-item p {
    font-size: 14px;
    line-height: 1.9;
    color: var(--muted);
    margin: 0;
    max-width: 570px
}

.statement {
    background: #20393B;
    color: #F0EEE6;
    padding: 88px 0
}

.statement-inner {
    display: grid;
    grid-template-columns:120px 1fr;
    gap: 65px;
    align-items: start
}

.statement-icon {
    width: 100px;
    height: 100px;
    border: 1px solid #667979;
    border-radius: 100%;
    display: grid;
    place-items: center
}

.statement-icon svg {
    width: 53px;
    height: 53px
}

.statement blockquote {
    font: normal clamp(30px, 3.7vw, 51px)/1.4 var(--serif);
    letter-spacing: -.035em;
    margin: 0;
    max-width: 940px
}

.statement blockquote em {
    color: #D6B998;
    font-weight: 400
}

.statement .eyebrow {
    color: #CFBBA3;
    margin-bottom: 22px;
    display: block
}

.contact-section {
    padding-top: 111px;
    padding-bottom: 100px
}

.contact-shell {
    display: grid;
    grid-template-columns:1fr .8fr;
    gap: 94px;
    align-items: start
}

.contact-content h2 {
    max-width: 540px;
    margin-bottom: 22px
}

.contact-content p {
    font-size: 15px;
    line-height: 1.9;
    color: var(--muted);
    max-width: 495px
}

.contact-note {
    margin-top: 28px;
    padding-left: 17px;
    border-left: 2px solid #BB9D79;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.8
}

.contact-details {
    border-top: 1px solid var(--line);
    padding-top: 26px;
    display: grid;
    gap: 26px
}

.data-item .eyebrow {
    margin-bottom: 12px;
    display: block
}

.data-item p {
    font: normal 20px/1.55 var(--serif);
    margin: 0
}

.data-item .small {
    font: normal 14px/1.7 var(--sans);
    color: var(--muted)
}

.site-footer {
    background: #EAECE5;
    border-top: 1px solid var(--line);
    padding: 33px 0
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    color: #65706C;
    font-size: 11px
}

.footer-right {
    display: flex;
    gap: 25px
}

.footer-right a:hover {
    color: var(--ink)
}

.inner-page {
    padding: 86px 0 104px;
    max-width: 950px
}

.inner-page .back {
    display: inline-block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 35px;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 7px
}

.inner-page h1 {
    margin-bottom: 30px
}

.prose {
    max-width: 770px
}

.prose h2 {
    font: normal 26px/1.3 var(--serif);
    margin: 40px 0 12px
}

.prose p, .prose li {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9
}

.prose a {
    text-decoration: underline;
    text-underline-offset: 3px
}

.prose .legal-detail {
    padding: 25px 28px;
    background: #EEEFE9;
    border-left: 2px solid var(--gold);
    margin: 26px 0
}

.legal-detail p {
    margin: 0 0 8px
}

.legal-detail p:last-child {
    margin-bottom: 0
}

.notice {
    background: #FAEED7;
    border: 1px solid #E8D7B6;
    padding: 15px 20px;
    color: #6D5735;
    font-size: 12px;
    line-height: 1.7;
    margin-top: 36px
}

.smallprint {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.75
}

.legal-detail strong {
    color: var(--ink)
}

@media (max-width: 1050px) {
    .container {
        width: min(100% - 60px, 1180px)
    }

    .hero {
        gap: 28px
    }

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

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

    .split {
        gap: 50px
    }

    .contact-shell {
        gap: 55px
    }
}

@media (max-width: 760px) {
    .container {
        width: calc(100% - 40px)
    }

    .topbar {
        height: 77px
    }

    .mark {
        width: 41px;
        height: 41px
    }

    .brand-text b {
        font-size: 20px
    }

    .brand-text small {
        font-size: 8px
    }

    .desktop-nav {
        display: none
    }

    .mobile-nav {
        display: block;
        position: relative
    }

    .mobile-nav summary {
        cursor: pointer;
        list-style: none;
        font-size: 12px;
        border: 1px solid var(--line);
        padding: 11px 13px
    }

    .mobile-nav summary::-webkit-details-marker {
        display: none
    }

    .mobile-nav[open] .mobile-links {
        display: flex
    }

    .mobile-links {
        z-index: 5;
        position: absolute;
        right: 0;
        top: 45px;
        width: 210px;
        display: none;
        flex-direction: column;
        padding: 12px 18px;
        background: var(--paper);
        border: 1px solid var(--line);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .08)
    }

    .mobile-links a {
        padding: 13px 0;
        font-size: 13px
    }

    .hero {
        grid-template-columns:1fr;
        gap: 45px;
        padding-top: 67px;
        padding-bottom: 76px
    }

    .hero h1 {
        font-size: clamp(52px, 12vw, 74px);
        margin-top: 20px;
        letter-spacing: -.052em
    }

    .hero h1 em {
        white-space: normal
    }

    .hero-copy {
        font-size: 15px
    }

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

    .art-orbit {
        width: 275px;
        height: 275px
    }

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

    .section {
        padding: 72px 0
    }

    .section-head, .split, .contact-shell {
        grid-template-columns:1fr;
        gap: 20px
    }

    .section-head h2, .left-heading h2, .contact-content h2 {
        font-size: 44px
    }

    .section-head p {
        margin: 10px 0 0
    }

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

    .principle {
        min-height: unset;
        padding: 30px
    }

    .icon-square {
        margin-bottom: 25px
    }

    .left-heading {
        position: static;
        margin-bottom: 23px
    }

    .statement {
        padding: 69px 0
    }

    .statement-inner {
        grid-template-columns:1fr;
        gap: 29px
    }

    .statement-icon {
        width: 72px;
        height: 72px
    }

    .statement-icon svg {
        width: 39px;
        height: 39px
    }

    .statement blockquote {
        font-size: 34px
    }

    .contact-section {
        padding: 80px 0
    }

    .contact-details {
        margin-top: 25px
    }

    .footer-inner {
        flex-direction: column;
        align-items: start
    }

    .inner-page {
        padding: 60px 0 80px
    }
}

@media (max-width: 430px) {
    .hero h1 {
        font-size: 49px
    }

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

    .art-top {
        left: 32px;
        top: 32px
    }

    .art-bottom {
        left: 32px;
        right: 32px;
        bottom: 32px
    }

    .art-glyph {
        width: 88%
    }

    .numbered-item {
        grid-template-columns:37px 1fr;
        gap: 14px
    }

    .numbered-item h3 {
        font-size: 23px
    }

    .statement blockquote {
        font-size: 31px
    }

    .brand {
        gap: 9px
    }
}