:root {
    --black:#0a0a0a;
    --white:#fff;
    --off:#f4f4f1;
    --gray:#c8c8c3;
    --muted:#5b5b57;
    --accent:#b52520;
    --max:92rem;
    --pad:clamp(1rem,3vw,3rem)
}

*,:before,:after {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    min-height:100vh;
    font-family:Arial,Helvetica,sans-serif;
    font-size:clamp(1rem,.28vw + .94rem,1.18rem);
    line-height:1.6;
    color:var(--black);
    background:var(--white)
}

a {
    color:inherit
}

.skip-link {
    position:fixed;
    top:.5rem;
    left:.5rem;
    z-index:1000;
    padding:.75rem 1rem;
    color:#fff;
    background:#000;
    transform:translateY(-150%)
}

.skip-link:focus {
    transform:none
}

.wrap,.head-inner,.nav-inner {
    width:min(100%,var(--max));
    margin:auto;
    padding-inline:var(--pad)
}

.site-header {
    border-bottom:1px solid var(--gray);
    background:#fff
}

.head-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(1.5rem,4vw,4rem);
    min-height:clamp(11rem,17vw,15rem);
    padding-block:clamp(1.5rem,2.8vw,2.5rem)
}

.brand {
    display:inline-flex;
    flex-direction:column;
    text-decoration:none
}

.brand-name {
    font-size:clamp(2.35rem,4.5vw,5rem);
    font-weight:800;
    line-height:.95;
    letter-spacing:-.05em
}

.brand-location {
    margin-top:.5rem;
    color:var(--accent);
    font-size:clamp(.95rem,1vw + .72rem,1.35rem);
    font-weight:800;
    letter-spacing:.13em;
    line-height:1.2;
    text-transform:uppercase
}

.seal-row {
    display:flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    padding-block:clamp(.5rem,1vw,1rem)
}

.header-seal {
    display:block;
    width:clamp(12rem,19vw,17rem);
    max-width:100%;
    height:auto;
    border-radius:50%;
    object-fit:cover
}

.site-nav {
    border-top:1px solid #ececea;
    background:#000
}

.site-nav ul {
    display:flex;
    flex-wrap:wrap;
    margin:0;
    padding:0;
    list-style:none
}

.site-nav a {
    display:block;
    padding:.95rem 1.15rem;
    border-bottom:.25rem solid transparent;
    color:#fff;
    font-size:.86rem;
    font-weight:700;
    letter-spacing:.045em;
    text-decoration:none;
    text-transform:uppercase;
    transition:.16s
}

.site-nav a:hover,.site-nav a:focus-visible {
    background:#292929;
    border-bottom-color:var(--accent);
    outline:none
}

.site-nav a.active,.site-nav a[aria-current=page] {
    color:#000;
    background:#fff;
    border-bottom-color:var(--accent)
}

.hero {
    display:grid;
    align-items:center;
    min-height:auto;
    padding-block:clamp(1.6rem,3.5vw,3rem);
    color:#fff;
    background:linear-gradient(105deg,rgba(0,0,0,.96),rgba(0,0,0,.66))
}

.eyebrow,.label {
    margin:0 0 .35rem;
    color:var(--accent);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.15em;
    text-transform:uppercase
}

.hero h1 {
    max-width:24ch;
    margin:0;
    font-size:clamp(1.45rem,2.7vw,2.7rem);
    line-height:1.08;
    letter-spacing:-.025em
}

.home-location {
    margin:.9rem 0 0;
    font-size:clamp(.95rem,1vw + .7rem,1.3rem);
    letter-spacing:.16em
}

.summary {
    max-width:47rem;
    margin:.65rem 0 0;
    color:#ddd;
    font-size:clamp(.92rem,.65vw + .82rem,1.12rem)
}

.section {
    padding-block:clamp(3rem,8vw,7rem);
    background:var(--off)
}

.home-section {
    padding-top:clamp(3rem,6vw,5rem)
}

.grid {
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(16rem,.8fr);
    gap:clamp(1rem,3vw,2.5rem)
}

.card {
    padding:clamp(1.5rem,4vw,3.25rem);
    border:1px solid var(--gray);
    background:#fff;
    box-shadow:0 .6rem 1.8rem rgba(0,0,0,.08)
}

.featured {
    border-top:.4rem solid #000
}

.card h2 {
    margin:0 0 .9rem;
    font-size:clamp(1.6rem,3vw,2.7rem);
    line-height:1.1;
    letter-spacing:-.035em
}

.card p {
    max-width:65ch
}

.text-link {
    display:inline-block;
    margin-top:.8rem;
    padding-bottom:.12rem;
    border-bottom:.15rem solid var(--accent);
    font-weight:800;
    text-decoration:none
}

.text-link:hover {
    color:var(--accent)
}

.footer {
    color:#fff;
    background:#000
}

.footer-inner {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:1rem;
    padding-block:1.5rem
}

.footer p {
    margin:0;
    color:#d2d2cf;
    font-size:.88rem
}

@media(max-width:760px) {
    .head-inner {
        align-items:center;
        gap:1rem;
        min-height:auto;
        padding-block:1rem
    }
    .seal-row {
        padding-block:.35rem
    }

    .header-seal {
        width:clamp(8.5rem,32vw,11rem)
    }
    .brand-name {
        font-size:clamp(2rem,10vw,3.2rem)
    }
    .brand-location {
        font-size:clamp(.72rem,3vw,.95rem);
        letter-spacing:.1em
    }
    .nav-inner {
        padding-inline:0
    }
    .site-nav ul {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .site-nav a {
        height:100%;
        padding:.82rem 1rem;
        border-right:1px solid #303030;
        border-bottom-width:.18rem;
        font-size:.77rem
    }
    .grid {
        grid-template-columns:1fr
    }
    .hero {
        min-height:auto;
        padding-block:1.4rem
    }
}


@media(max-width:520px) {
    .head-inner {
        flex-direction:column;
        align-items:flex-start
    }

    .seal-row {
        align-self:center;
        width:100%
    }
}

@media(max-width:420px) {
    .site-nav ul {
        grid-template-columns:1fr
    }
}

@media(prefers-reduced-motion:reduce) {
    *,:before,:after {
        scroll-behavior:auto!important;
        transition:none!important
    }
}