:root {
    --blue: #0f5ea5;
    --navy: #21284e;
    --cyan: #4abed3;
    --ink: #193a4a;
    --muted: #697d80;
    --paper: #f7f3ed;
    --line: #e1ddd3;
    --sage: #d8e8de;
    --coral: #eab99e;
    --sans: "DM Sans", sans-serif;
    --serif: "Lora", Georgia, serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.6
}

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

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 4px
}

img {
    display: block;
    max-width: 100%;
    object-fit: cover
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.site-header {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 6vw;
    background: rgba(247, 243, 237, .93);
    border-bottom: 1px solid var(--line)
}

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

.main-menu,
.profile-nav {
    display: flex;
    align-items: center;
    gap: 25px
}

.main-menu>a,
.profile-nav>a {
    font-size: 10px;
    font-weight: 700;
    color: #4b646b
}

.main-menu>a:not(.header-cta):hover,
.profile-nav>a:hover {
    color: var(--blue)
}

.header-cta {
    padding: 10px 15px;
    background: var(--blue);
    color: white !important
}

.header-cta span {
    margin-left: 9px
}

.menu-toggle {
    display: none
}

.hero-care {
    position: relative;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    align-items: center;
    gap: 5vw;
    min-height: 680px;
    padding: 72px 10vw 90px;
    overflow: hidden;
    isolation: isolate
}

.care-backdrop {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(ellipse at 75% 47%, rgba(215, 233, 222, .9), transparent 36%), linear-gradient(120deg, #f7f3ed 0%, #f4eee4 45%, #eee3d8 100%)
}

.care-backdrop:before {
    content: "";
    position: absolute;
    right: -5%;
    top: -28%;
    width: 61%;
    height: 155%;
    border: 1px solid rgba(15, 94, 165, .13);
    border-radius: 48%;
    transform: rotate(29deg);
    box-shadow: 0 0 0 32px rgba(15, 94, 165, .025), 0 0 0 76px rgba(15, 94, 165, .02)
}

.care-copy {
    position: relative;
    z-index: 3
}

.eyebrow {
    margin: 0 0 18px;
    color: var(--blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em
}

.eyebrow span {
    margin-right: 12px;
    color: #9c8f83
}

.hero h1,
.welcome-copy h2,
.section-heading h2,
.contact-copy h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: 57px;
    line-height: 1.04;
    letter-spacing: 0;
    font-weight: 500
}

.hero h1 em,
.welcome-copy h2 em,
.contact-copy h2 em {
    color: var(--blue);
    font-weight: 400
}

.hero-lede {
    max-width: 405px;
    margin: 20px 0 24px;
    color: #5c7373;
    font-size: 13px;
    line-height: 1.85
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 22px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    min-height: 47px;
    padding: 0 19px;
    font-size: 10px;
    font-weight: 800;
    transition: transform .2s, background .2s
}

.button:hover {
    transform: translateY(-2px)
}

.button--primary {
    background: var(--blue);
    color: white
}

.button--primary:hover {
    background: var(--navy)
}

.button--light {
    background: white;
    color: var(--navy)
}

.quiet-link {
    font-size: 10px;
    color: var(--blue);
    border-bottom: 1px solid rgba(15, 94, 165, .33);
    padding-bottom: 4px
}

.care-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 46px;
    color: #687c7a;
    font-size: 8px;
    letter-spacing: .13em
}

.note-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #76baae;
    box-shadow: 0 0 0 4px rgba(118, 186, 174, .16)
}

.care-collage {
    position: relative;
    min-height: 510px
}

.care-main-photo {
    position: absolute;
    top: 4%;
    right: 12%;
    width: 61%;
    height: 440px;
    margin: 0;
    overflow: hidden;
    border-radius: 48% 48% 4px 4px;
    background: #d6dfd7
}

.care-main-photo:after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(transparent, rgba(18, 45, 53, .53))
}

.care-main-photo img {
    width: 100%;
    height: 100%;
    object-position: 52% 20%;
    filter: saturate(.82)
}

.care-main-photo figcaption {
    position: absolute;
    z-index: 2;
    left: 15px;
    bottom: 16px;
    color: white;
    font-size: 7px;
    letter-spacing: .12em
}

.care-small-photo {
    position: absolute;
    right: 0;
    bottom: 3%;
    width: 33%;
    height: 210px;
    margin: 0;
    overflow: hidden;
    border: 6px solid var(--paper);
    background: #d8e6e2;
    transform: rotate(3deg)
}

.care-small-photo img {
    width: 100%;
    height: 100%;
    object-position: 50% 20%
}

.care-small-photo figcaption {
    position: absolute;
    left: 9px;
    bottom: 8px;
    color: white;
    font-size: 6px;
    letter-spacing: .1em;
    text-shadow: 0 1px 4px #163b4a
}

.care-orbit {
    position: absolute;
    z-index: -1;
    display: block;
    border: 1px solid rgba(15, 94, 165, .24);
    border-radius: 50%;
    transform: rotate(31deg)
}

.care-orbit--one {
    inset: 4% 0 8% 1%
}

.care-orbit--two {
    inset: 0 8% 4% 12%;
    transform: rotate(-25deg);
    border-color: rgba(74, 190, 211, .35)
}

.care-stamp {
    position: absolute;
    top: 8%;
    left: 2%;
    display: grid;
    place-content: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: var(--sage);
    color: #2c6b69;
    text-align: center;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: .08em;
    transform: rotate(-9deg)
}

.care-hero-footer {
    position: absolute;
    left: 10vw;
    right: 10vw;
    bottom: 25px;
    display: flex;
    justify-content: space-between;
    padding-top: 11px;
    border-top: 1px solid rgba(25, 58, 74, .18);
    font-size: 7px;
    letter-spacing: .14em;
    color: #6d7d7c
}

.section-wrap {
    padding: 90px 10vw
}

.welcome-section {
    display: grid;
    grid-template-columns: .55fr 1.45fr;
    align-items: start;
    gap: 9vw
}

.welcome-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: var(--sage);
    color: #27676a
}

.welcome-mark:after {
    content: "";
    position: absolute;
    inset: 15px;
    border: 1px solid rgba(39, 103, 106, .25);
    border-radius: 50%
}

.welcome-mark span {
    font-family: var(--serif);
    font-size: 29px
}

.welcome-mark i {
    position: absolute;
    right: 15px;
    top: 24px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--coral)
}

.welcome-copy h2 {
    font-size: 45px
}

.welcome-copy>p:not(.eyebrow) {
    max-width: 640px;
    margin: 17px 0 20px;
    color: #5a7071;
    font-size: 12px;
    line-height: 1.9
}

.values-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.values-row span {
    padding: 8px 10px;
    border: 1px solid #cddbd3;
    background: rgba(255, 255, 255, .43);
    font-size: 8px;
    color: #46666a
}

.section-heading {
    margin-bottom: 35px
}

.section-heading h2 {
    font-size: 44px
}

.section-heading>p:last-child {
    color: var(--muted);
    font-size: 12px
}

.specialty-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px
}

.specialty-grid>a {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    min-height: 133px;
    padding: 15px;
    border: 1px solid #e3ddd2;
    background: rgba(255, 255, 255, .53);
    transition: background .2s, transform .2s
}

.specialty-grid>a:hover {
    background: white;
    transform: translateY(-3px)
}

.specialty-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #abd2ce;
    border-radius: 50%;
    color: #318a89;
    font-size: 8px
}

.specialty-grid>a b {
    max-width: 145px;
    font-size: 11px;
    line-height: 1.4
}

.specialty-grid>a i {
    position: absolute;
    right: 13px;
    bottom: 14px;
    color: var(--blue);
    font-style: normal
}

.doctors-section {
    background: #f0ece3;
    border-top: 1px solid #e4ded4;
    border-bottom: 1px solid #e4ded4
}

.section-heading--split {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 35px
}

.section-heading--split>p {
    max-width: 275px;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px
}

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

.doctor-card {
    min-width: 0;
    background: #fbf9f4;
    border: 1px solid rgba(219, 212, 199, .9);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .65s, transform .65s, box-shadow .2s;
    transition-delay: calc(var(--card-index, 0)*70ms)
}

.doctor-card.is-visible {
    opacity: 1;
    transform: none
}

.doctor-card:hover {
    box-shadow: 0 14px 32px rgba(67, 82, 69, .12)
}

.doctor-card__portrait {
    position: relative;
    display: block;
    height: 275px;
    overflow: hidden;
    background: #dce6df
}

.doctor-card__portrait img {
    width: 100%;
    height: 100%;
    object-position: 50% 20%;
    filter: saturate(.82);
    transition: transform .55s
}

.doctor-card:hover .doctor-card__portrait img {
    transform: scale(1.04)
}

.doctor-card__number {
    position: absolute;
    top: 11px;
    left: 11px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(247, 243, 237, .92);
    font-size: 7px;
    color: var(--blue)
}

.doctor-card__body {
    padding: 14px 13px 16px
}

.doctor-card .eyebrow {
    min-height: 25px;
    margin: 0 0 5px;
    font-size: 6px;
    line-height: 1.5;
    letter-spacing: .09em
}

.doctor-card h3 {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.3;
    font-weight: 500
}

.doctor-card h3 span {
    font: 500 9px var(--sans);
    color: var(--muted)
}

.text-link {
    font-size: 9px;
    font-weight: 800;
    color: var(--blue)
}

.text-link span {
    margin-left: 8px
}

.contact-section {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    gap: 8vw;
    padding: 85px 10vw;
    background: #e5ede5
}

.contact-portrait {
    height: 345px;
    overflow: hidden;
    border-radius: 45% 45% 4px 4px;
    background: #cddbd2
}

.contact-portrait img {
    width: 100%;
    height: 100%;
    object-position: 50% 22%;
    filter: saturate(.8)
}

.contact-copy h2 {
    font-size: 43px
}

.contact-copy>p:not(.eyebrow) {
    margin: 17px 0;
    color: #5b7171;
    font-size: 12px
}

.contact-address {
    display: block;
    margin-top: 22px;
    color: #667c7c;
    font-size: 9px;
    line-height: 1.8
}

.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 6vw;
    border-top: 1px solid var(--line);
    font-size: 9px;
    color: #667775
}

.site-footer img {
    width: 44px;
    height: 41px;
    object-fit: contain
}

.site-footer a:first-child {
    color: var(--blue)
}

.profile-shell {
    max-width: 1280px;
    margin: auto;
    padding: 25px 6vw 90px
}

.profile-back {
    display: flex;
    justify-content: space-between;
    padding: 14px 0 26px;
    border-bottom: 1px solid var(--line);
    font-size: 8px;
    letter-spacing: .13em;
    color: #6d817e
}

.profile-back a {
    color: var(--blue)
}

.profile-care {
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    gap: 8vw;
    padding: 45px 0 60px
}

.profile-care-image {
    position: relative;
    min-height: 680px;
    background: #d5e4db;
    overflow: hidden;
    border-radius: 46% 46% 4px 4px
}

.profile-care-image:after {
    content: "";
    position: absolute;
    inset: 48% 0 0;
    background: linear-gradient(transparent, rgba(16, 44, 50, .54))
}

.profile-care-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-position: 50% 20%;
    filter: saturate(.82)
}

.profile-care-image>span {
    position: absolute;
    z-index: 2;
    left: 17px;
    bottom: 18px;
    color: white;
    font-size: 7px;
    letter-spacing: .13em
}

.profile-care-copy {
    padding-top: 8px
}

.profile-copy h1 {
    margin: 0;
    font-family: var(--serif);
    font-size: 43px;
    line-height: 1.1;
    font-weight: 500
}

.profile-copy h1 small {
    display: block;
    margin-top: 6px;
    color: var(--blue);
    font: 600 11px var(--sans)
}

.profile-focus {
    margin: 15px 0;
    color: #526c6c;
    font-size: 13px;
    font-weight: 700
}

.profile-biography {
    margin: 20px 0;
    color: #5b7070;
    font-size: 12px;
    line-height: 1.95
}

.profile-biography p {
    margin: 0 0 12px
}

.profile-section {
    margin-top: 28px
}

.profile-section .eyebrow {
    margin-bottom: 10px
}

.education-list,
.area-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.education-list li {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    font-size: 10px
}

.education-list li span {
    color: var(--blue);
    font-weight: 800
}

.profile-care-areas {
    margin-top: 25px;
    padding: 19px;
    background: #eef2e9
}

.profile-care-areas .eyebrow {
    margin-bottom: 11px
}

.area-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.area-list li {
    padding: 8px 9px;
    border: 1px solid #d2ded5;
    background: #faf9f4;
    font-size: 9px;
    color: #4b6868
}

.related-section {
    padding-top: 44px;
    border-top: 1px solid var(--line)
}

.related-section h2 {
    margin: 0 0 20px;
    font: 500 29px var(--serif)
}

.related-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px
}

.related-doctor {
    display: grid;
    grid-template-columns: 55px 1fr 18px;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line)
}

.related-doctor img {
    width: 55px;
    height: 60px;
    object-fit: cover;
    object-position: 50% 20%
}

.related-doctor span {
    display: grid;
    gap: 4px
}

.related-doctor strong {
    font-family: var(--serif);
    font-size: 12px;
    font-weight: 500
}

.related-doctor small {
    font-size: 8px;
    color: var(--muted)
}

.related-doctor i {
    font-style: normal;
    color: var(--blue)
}

.profile-invalid {
    max-width: 600px;
    margin: 100px auto;
    text-align: center
}

.profile-invalid h1 {
    font-family: var(--serif);
    font-weight: 500
}

.reveal {
    opacity: 0;
    transform: translateY(17px);
    transition: opacity .75s, transform .75s
}

.reveal.is-visible {
    opacity: 1;
    transform: none
}

.image-unavailable {
    background: #dbe7df;
    object-fit: contain;
    color: #4e6562
}

@media(max-width:900px) {
    .site-header {
        padding: 12px 4vw
    }

    .main-menu {
        gap: 13px
    }

    .main-menu>a {
        font-size: 9px
    }

    .hero-care {
        padding: 60px 7vw 80px;
        min-height: 630px;
        gap: 3vw
    }

    .hero h1 {
        font-size: 48px
    }

    .care-collage {
        min-height: 450px
    }

    .care-main-photo {
        height: 390px
    }

    .section-wrap {
        padding: 75px 7vw
    }

    .doctor-card__portrait {
        height: 230px
    }

    .contact-section {
        padding: 70px 7vw
    }

    .profile-shell {
        padding-left: 4vw;
        padding-right: 4vw
    }

    .profile-care {
        gap: 5vw
    }

    .profile-care-image {
        min-height: 570px
    }
}

@media(max-width:650px) {
    .site-header {
        padding: 10px 20px
    }

    .brand img {
        width: 55px;
        height: 51px
    }

    .menu-toggle {
        display: grid;
        gap: 5px;
        padding: 10px;
        border: 0;
        background: transparent
    }

    .menu-toggle>span:not(.sr-only) {
        width: 22px;
        height: 1px;
        background: var(--navy)
    }

    .main-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        align-items: stretch;
        gap: 0;
        padding: 8px 20px 17px;
        background: var(--paper);
        border-bottom: 1px solid var(--line)
    }

    .main-menu.is-open {
        display: flex;
        flex-direction: column
    }

    .main-menu>a {
        padding: 11px 4px;
        border-bottom: 1px solid var(--line);
        font-size: 11px
    }

    .main-menu .header-cta {
        align-self: flex-start;
        margin-top: 10px;
        padding: 9px 12px
    }

    .hero-care {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 60px 22px 68px;
        gap: 25px
    }

    .hero h1 {
        font-size: 46px
    }

    .hero-lede {
        font-size: 12px
    }

    .hero-actions {
        gap: 14px
    }

    .care-note {
        margin-top: 28px;
        font-size: 7px
    }

    .care-collage {
        min-height: 390px
    }

    .care-main-photo {
        right: 11%;
        width: 64%;
        height: 345px
    }

    .care-small-photo {
        width: 34%;
        height: 155px
    }

    .care-stamp {
        left: 0;
        top: 5%;
        width: 70px;
        height: 70px;
        font-size: 7px
    }

    .care-hero-footer {
        left: 22px;
        right: 22px;
        bottom: 20px;
        font-size: 6px
    }

    .section-wrap {
        padding: 62px 22px
    }

    .welcome-section {
        grid-template-columns: 1fr;
        gap: 26px
    }

    .welcome-mark {
        width: 115px;
        height: 115px
    }

    .welcome-mark:after {
        inset: 10px
    }

    .welcome-mark span {
        font-size: 23px
    }

    .welcome-copy h2,
    .section-heading h2 {
        font-size: 36px
    }

    .welcome-copy>p:not(.eyebrow) {
        font-size: 11px
    }

    .specialty-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px
    }

    .specialty-grid>a {
        min-height: 110px;
        padding: 11px
    }

    .specialty-grid>a b {
        font-size: 10px
    }

    .section-heading--split {
        display: block
    }

    .section-heading--split>p {
        margin-top: 14px
    }

    .doctor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px
    }

    .doctor-card__portrait {
        height: 210px
    }

    .doctor-card__body {
        padding: 10px 8px
    }

    .doctor-card .eyebrow {
        font-size: 6px;
        min-height: 30px
    }

    .doctor-card h3 {
        font-size: 12px
    }

    .doctor-card h3 span {
        font-size: 8px
    }

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

    .contact-section {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 55px 22px
    }

    .contact-portrait {
        height: 275px;
        width: 75%;
        justify-self: center
    }

    .contact-copy h2 {
        font-size: 36px
    }

    .site-footer {
        flex-wrap: wrap;
        gap: 12px;
        padding: 18px 20px
    }

    .site-footer span {
        width: 100%
    }

    .profile-nav {
        gap: 10px
    }

    .profile-nav>a {
        font-size: 8px
    }

    .profile-shell {
        padding: 10px 17px 60px
    }

    .profile-back {
        font-size: 7px
    }

    .profile-care {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px 0 42px
    }

    .profile-care-image {
        min-height: 0;
        height: 400px;
        width: 87%;
        justify-self: center
    }

    .profile-copy h1 {
        font-size: 36px
    }

    .profile-focus {
        font-size: 11px
    }

    .profile-biography {
        font-size: 11px
    }

    .profile-care-areas {
        padding: 14px
    }

    .related-section {
        padding-top: 34px
    }

    .related-section h2 {
        font-size: 24px
    }

    .related-list {
        grid-template-columns: 1fr
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

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