@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

:root {
    --navy: #08275c;
    --blue: #0b3474;
    --brown: #63310d;
    --cream: #fffaf5;
    --paper: #fcf6ef;
    --gold: #c89a52;
    --ink: #27180f
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
}

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

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

.topbar {
    height: 78px;
    padding: 0 clamp(20px, 7vw, 125px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    position: relative;
    z-index: 2
}

.brand img {
    display: block;
    width: 182px;
    height: 54px;
    object-fit: contain
}

.topbar nav {
    display: flex;
    gap: 29px;
    font-size: 16px;
    font-weight: 700;
    color: #536075
}

.topbar nav a:hover {
    color: var(--blue)
}

.outline-button {
    border: 1px solid var(--blue);
    color: var(--blue);
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.outline-button span {
    color: var(--gold);
    font-size: 15px;
    margin-left: 5px
}

.masthead {
    min-height: 555px;
    background: linear-gradient(115deg, #08265a, #123f83 58%, #0b2e68);
    color: #fff;
    position: relative;
    overflow: hidden
}

.masthead:after {
    content: '';
    position: absolute;
    left: -5%;
    bottom: -122px;
    width: 110%;
    height: 200px;
    background: var(--cream);
    border-radius: 50% 50% 0 0/45% 45% 0 0
}

.masthead-pattern {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, #ffffff24 0 1px, transparent 1.5px), radial-gradient(ellipse at 80% 50%, transparent 0 120px, #ffffff17 121px 122px, transparent 123px 190px, #ffffff12 191px 192px, transparent 193px);
    opacity: .8
}

.masthead-inner {
    max-width: 910px;
    margin: auto;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 38px 24px 135px
}

.hero-logo {
    width: min(430px, 72vw);
    height: 105px;
    object-fit: contain;
    filter: brightness(0) invert(1) grayscale(1) brightness(5);
    opacity: .96
}

.ribbon {
    margin: 4px auto 25px;
    background: #062253;
    border-radius: 30px;
    padding: 7px 21px;
    width: max-content;
    color: #fff;
    font: 500 22px 'Playfair Display', serif;
    box-shadow: 0 4px 0 #ffffff1f
}

.ribbon span {
    color: #e9c77e;
    margin-right: 5px
}

.hero-kicker,
.section-kicker {
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 700;
    color: #e0bc72
}

.masthead h1,
.services h2,
.about h2,
.contact h2 {
    font: 600 clamp(38px, 4.5vw, 61px)/1.08 'Playfair Display', serif;
    letter-spacing: -1.5px;
    margin: 0
}

.masthead h1 {
    max-width: 710px;
    margin: auto
}

.masthead h1 em,
.services h2 em,
.about h2 em,
.contact h2 em {
    color: #e8c879;
    font-weight: 500
}

.hero-copy {
    max-width: 545px;
    margin: 21px auto 26px;
    color: #dce7f6;
    font-size: 15px;
    line-height: 1.7
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 23px;
    align-items: center
}

.gold-button {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 14px 19px;
    background: var(--gold);
    color: #152a4a;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 3px 3px 0 #4d310d33;
    transition: .2s
}

.gold-button:hover {
    transform: translateY(-2px);
    background: #dbb268
}

.gold-button span {
    font-size: 19px
}

.call-link {
    font-size: 14px;
    color: #e6c678
}

.call-link b {
    color: #fff;
    margin-left: 5px
}

.services {
    position: relative;
    display: grid;
    grid-template-columns: .94fr 1.06fr;
    gap: 45px;
    max-width: 1110px;
    margin: 0 auto;
    padding: 36px 30px 100px
}

.service-intro {
    grid-column: 1/-1;
    text-align: center;
    max-width: 650px;
    margin: 0 auto 2px
}

.services h2,
.about h2 {
    font-size: 40px;
    color: #1e3659
}

.services h2 em,
.about h2 em {
    color: #714123
}

.service-intro>p:last-child {
    color: #74675d;
    font-size: 14.5px;
    line-height: 1.7;
    margin: 18px auto 0;
    max-width: 425px
}

.service-list {
    border-top: 1px solid #d9cec2
}

.service-row {
    display: grid;
    grid-template-columns: 42px 1fr 28px;
    gap: 9px;
    padding: 19px 0;
    border-bottom: 1px solid #d9cec2
}

.service-number {
    font: 500 17px 'Playfair Display', serif;
    color: #9a6a3f
}

.service-row h3 {
    font: 600 22px/1.1 'Playfair Display', serif;
    color: #162d55;
    margin: 0
}

.service-subtitle {
    font: 600 10px/1.6 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: .35px;
    margin: 5px 0;
    color: #73401f
}

.service-description {
    font-size: 14px;
    line-height: 1.6;
    color: #706b68;
    margin: 7px 0 0
}

.service-row>a {
    align-self: center;
    background: var(--blue);
    color: #fff;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    display: grid;
    place-items: center;
    font-size: 17px
}

.service-photo {
    height: 382px;
    position: relative;
    align-self: center;
    overflow: hidden;
    border-radius: 0 0 90px 0;
    box-shadow: 16px 17px 0 #d6b77b
}

.service-photo img,
.about-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.photo-seal {
    position: absolute;
    bottom: 22px;
    left: 22px;
    width: 99px;
    height: 99px;
    border-radius: 50%;
    background: #08275ce8;
    color: #e9c77e;
    border: 1px solid #e9c77e;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 21px
}

.photo-seal span {
    font: 600 14px/1.2 'Playfair Display', serif;
    color: #fff;
    margin-top: 3px
}

.note-band {
    background: #f1e7d9;
    border-top: 1px solid #ddcfbd;
    border-bottom: 1px solid #ddcfbd;
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: center;
    padding: 23px clamp(24px, 12vw, 180px)
}

.note-band>div {
    display: flex;
    gap: 14px;
    align-items: center
}

.note-band span {
    font-size: 26px;
    color: #a47140
}

.note-band p {
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
    color: #665448
}

.note-band p b {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    color: #4d2a18
}

.note-band>a {
    font-size: 14px;
    font-weight: 700;
    color: #70401f;
    white-space: nowrap
}

.note-band>a span {
    font-size: 17px;
    margin-left: 7px
}

.about {
    max-width: 1030px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 82px;
    align-items: center;
    padding: 100px 30px
}

.about-image {
    height: 330px;
    position: relative
}

.about-image:before {
    content: '';
    position: absolute;
    background: #0a316e;
    width: 90%;
    height: 100%;
    top: 17px;
    left: -17px;
    z-index: -1
}

.about-image span {
    position: absolute;
    bottom: 0;
    right: -17px;
    background: #fff;
    color: #0a316e;
    font: 600 23px/1.05 'Playfair Display', serif;
    padding: 15px 20px
}

.about>div>p:not(.section-kicker) {
    color: #736b67;
    font-size: 14px;
    line-height: 1.8;
    margin: 20px 0
}

.about ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #4b5f7a;
    line-height: 2.1
}

.about li:before {
    content: '✱';
    color: #b17b3f;
    margin-right: 8px
}

.contact {
    background: linear-gradient(106deg, #07245a, #0a3677);
    color: #fff;
    min-height: 405px;
    padding: 62px clamp(24px, 12vw, 180px);
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    align-items: center;
    position: relative;
    overflow: hidden
}

.contact:before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    right: -330px;
    top: -350px;
    border: 1px solid #ffffff25;
    border-radius: 50%;
    box-shadow: 0 0 0 50px #ffffff08, 0 0 0 105px #ffffff06
}

.contact-logo {
    position: absolute;
    width: 360px;
    opacity: .07;
    bottom: -26px;
    left: 2%;
    filter: grayscale(1) brightness(5)
}

.contact>div {
    position: relative
}

.contact h2 {
    font-size: 48px
}

.contact>div>p:not(.section-kicker) {
    max-width: 410px;
    color: #d1dcec;
    font-size: 14px;
    line-height: 1.7;
    margin: 18px 0 25px
}

.phones {
    justify-self: end;
    border-left: 1px solid #ffffff4d;
    padding-left: 28px;
    display: flex;
    flex-direction: column
}

.phones small {
    text-transform: uppercase;
    color: #e1ba70;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 9px;
    margin-bottom: 9px
}

.phones a {
    font: 600 26px/1.25 'Playfair Display', serif
}

.phones p {
    font-size: 14px;
    color: #d3deee;
    margin: 12px 0 0
}

footer {
    background: #061b41;
    color: #aab9ce;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 20px clamp(24px, 12vw, 180px);
    font-size: 12px;
    justify-content: space-between;
}

footer img {
    width: 126px;
    height: 35px;
    object-fit: contain;
    filter: grayscale(1) brightness(4)
}

@media(max-width:760px) {
    .topbar {
        height: 68px;
        padding: 0 18px
    }

    .brand img {
        width: 140px;
        height: 42px
    }

    .topbar nav {
        display: none
    }

    .outline-button {
        padding: 8px 10px;
        font-size: 10px
    }

    .masthead {
        min-height: 500px
    }

    .masthead-inner {
        padding: 30px 19px 112px
    }

    .hero-logo {
        height: 75px
    }

    .ribbon {
        font-size: 17px;
        margin-bottom: 20px
    }

    .masthead h1 {
        font-size: 39px
    }

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

    .hero-buttons {
        flex-wrap: wrap;
        gap: 15px
    }

    .services {
        display: block;
        padding: 28px 24px 75px
    }

    .services h2,
    .about h2 {
        font-size: 34px
    }

    .service-intro {
        margin-bottom: 30px
    }

    .service-photo {
        margin-top: 28px;
        height: 270px
    }

    .note-band {
        display: block;
        padding: 21px 24px
    }

    .note-band>a {
        display: block;
        margin: 12px 0 0 40px
    }

    .about {
        display: flex;
        flex-direction: column;
        gap: 48px;
        padding: 75px 24px
    }

    .about-image {
        width: calc(100% - 17px);
        height: 270px;
        align-self: flex-start
    }

    .contact {
        display: block;
        padding: 58px 24px
    }

    .contact h2 {
        font-size: 40px
    }

    .phones {
        border-left: 0;
        border-top: 1px solid #ffffff4d;
        padding: 18px 0 0;
        margin-top: 35px;
        justify-self: start
    }

    .contact-logo {
        width: 250px
    }

    .phones a {
        font-size: 24px
    }

    footer {
        display: block;
        padding: 20px 24px
    }

    footer span {
        display: block;
        margin-top: 8px
    }
}