:root {
    --ivory: #f8f5ef;
    --white: #fffdfa;
    --gold: #ad8953;
    --gold-dark: #886433;
    --ink: #342d26;
    --muted: #766d62;
    --line: #ded3c2;
    --heading: 'Bellefair', Georgia, serif;
    --body: 'Poppins',Arial,sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--ivory);
    font: 400 14px/1.7 var(--body);
    color: var(--ink)
}

h1,h2,h3,p {
    margin: 0
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--heading);
    font-weight: 400
}

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

button,input,textarea {
    font: inherit
}

button {
    cursor: pointer
}

button,a,input,textarea {
    outline-offset: 4px
}

:focus-visible {
    outline: 2px solid var(--gold-dark)
}

[id] {
    scroll-margin-top: 24px
}

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

.top {
    padding: 10px 20px;
    background: #332c25;
    color: #e5d4b5;
    text-align: center;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase
}

.nav {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.name {
    font: 500 27px/1.1 var(--heading);
    letter-spacing: .015em
}

.name small {
    display: block;
    font: 500 8px/1.6 var(--body);
    letter-spacing: .19em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 7px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 48px;
    border: 1px solid #b18c53;
    background: linear-gradient(115deg,#cbb17e,#b38c52);
    color: #2e261c;
    padding: 14px 23px;
    font: 600 10px/1.4 var(--body);
    letter-spacing: .11em;
    text-transform: uppercase;
    transition: background .2s,transform .2s
}

.btn:hover {
    background: #d5bd8e;
    transform: translateY(-1px)
}

.btn:disabled {
    opacity: .65;
    cursor: wait
}

.outline {
    background: transparent;
    border-color: #a98a59;
    color: #6f522e
}

.outline:hover {
    background: #eee3d1
}

.hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 0 70%,#eadcc25c,transparent 60%),linear-gradient(110deg,#f8f5ee 45%,#ede4d4);
    border-top: 1px solid #e7dece;
    border-bottom: 1px solid var(--line)
}

.hero:before {
    content: '';
    position: absolute;
    right: -140px;
    top: -200px;
    width: 760px;
    height: 950px;
    border: 1px solid #ad89531b;
    border-radius: 48% 48% 0 0;
    transform: rotate(20deg);
    box-shadow: 0 0 0 45px #ad895308,0 0 0 90px #ad895307,0 0 0 135px #ad895305;
    pointer-events: none
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) 350px;
    gap: 80px;
    align-items: center;
    padding: 58px 0 68px
}

.eyebrow {
    display: block;
    font: 600 9px/1.7 var(--body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-dark)
}

.hero h1 {
    font-size: clamp(62px,6.1vw,86px);
    line-height: .99;
    letter-spacing: -.025em;
    margin: 26px 0 29px;
    font-weight: 400
}

.hero h1 em {
    font-weight: inherit;
    color: #98723b;
    font-style: italic
}

.hero p {
    max-width: 490px;
    font-size: 13px;
    line-height: 1.95;
    color: var(--muted)
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 32px
}

.chip {
    font-size: 15px;
    letter-spacing: .04em;
    border: 1px solid #cfc0a9;
    background: #fff9;
    padding: 9px 13px;
    color: #756044
}

.formcard {
    background: var(--white);
    padding: 33px 34px 26px;
    box-shadow: 0 18px 60px #604b2c0f;
    border: 1px solid #ded1bb;
    border-top: 3px solid #b59460;
    color: var(--ink)
}

.hero .formcard {
    width: 350px;
    max-width: 100%;
}

.formcard h2 {
    font-size: 37px;
    line-height: 1.04;
    letter-spacing: -.018em;
    margin: 12px 0 14px;
    font-weight: 400
}

.formcard p {
    font-size: 11px;
    line-height: 1.8;
    color: var(--muted)
}

.form {
    display: grid;
    gap: 11px;
    margin-top: 20px
}

.form input:not([type=hidden]):not([type=checkbox]),.form textarea {
    display: block;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #e2dacf;
    background: #fcfaf6;
    border-radius: 0;
    color: var(--ink);
    font-size: 11px
}

.form input::placeholder,.form textarea::placeholder {
    color: #8b8277
}

.form textarea {
    min-height: 76px;
    resize: vertical
}

.form .btn {
    width: 100%;
    margin-top: 3px
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #746d62;
    font-size: 9px;
    line-height: 1.65
}

.check input {
    accent-color: var(--gold-dark);
    margin: 2px 0 0;
    flex-shrink: 0
}

.preview-note {
    font-size: 9px!important;
    color: #8c8276!important
}

.form-status {
    font-size: 10px!important;
    line-height: 1.6!important
}

.form-status:empty {
    display: none
}

.form [aria-invalid=true] {
    border-color: #a13930
}

.strip {
    background: #eee5d6;
    border-bottom: 1px solid var(--line)
}

.strip-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 28px 0
}

.strip p {
    font: 500 29px/1.15 var(--heading);
    margin-bottom: 7px
}

.strip span {
    font-size: 10px;
    color: var(--muted)
}

.strip .btn {
    flex-shrink: 0
}

.detail-heading {
    padding-top: 68px
}

.detail-heading h2 {
    font-size: clamp(35px,3.7vw,40px);
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 13px 0 17px
}

.detail-heading p {
    font-size: 12px;
    line-height: 1.85;
    color: var(--muted)
}

.benefits {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px;
    padding: 35px 0 70px
}

.benefit {
    border: 1px solid var(--line);
    background: #fff9;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 230px
}

.layout-number {
    font-size: 8px;
    letter-spacing: .18em;
    color: #98784b;
    margin-bottom: 21px
}

.benefit h3 {
    font-size: 28px;
    line-height: 1.1;
    margin-bottom: 16px;
    min-height: 62px
}

.benefit p {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 22px
}

.text-cta {
    font: 600 9px/1.5 var(--body);
    letter-spacing: .09em;
    text-transform: uppercase;
    border-bottom: 1px solid #b49461;
    padding: 8px 0;
    margin-top: auto;
    color: #846032
}

.lifestyle {
    background: #eee7db;
    padding-bottom: 56px;
    border-block:1px solid #e4d9c7}

.amenity-list {
    list-style: none;
    margin: 0;
    padding: 20px 0 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px 40px
}

.amenity-list li {
    font-size: 12px;
    border-top: 1px solid #d6c7b1;
    padding-top: 18px
}

.amenity-list li:before {
    content: '✦';
    color: #a3804b;
    margin-right: 12px
}

.connectivity {
    padding-bottom: 65px
}

.distance-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px;
    margin: 34px 0 21px
}

.distance-grid>div {
    border-left: 1px solid #cbb58e;
    padding-left: 22px
}

.distance-grid strong {
    display: block;
    font: 500 40px/1.1 var(--heading);
    color: #987442
}

.distance-grid span {
    display: block;
    font-size: 11px;
    margin-top: 12px;
    line-height: 1.7
}

.distance-note {
    font-size: 9px;
    color: #8d8274
}

.closing {
    background: #3a3027;
    color: #f4eee3;
    text-align: center;
    padding: 60px 20px
}

.closing .eyebrow {
    color: #c9ae7c
}

.closing h2 {
    font-size: clamp(36px,4vw,40px);
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 16px 0 27px
}

.footer {
    background: #2c251f;
    color: #bcb1a1;
    padding: 28px 0 115px
}

.footer p {
    font-size: 9px;
    line-height: 1.85;
    margin-bottom: 11px
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    border-top: 1px solid #534639;
    padding-top: 18px;
    margin-top: 22px;
    font-size: 9px
}

.sticky {
    position: fixed;
    z-index: 12;
    bottom: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 32px;
    background: #fffcf7f5;
    backdrop-filter: blur(10px);
    border-top: 1px solid #d9c9af;
    box-shadow: 0 -5px 30px #45341f0a
}

.sticky strong {
    font: 500 25px/1 var(--heading)
}

.sticky span {
    display: block;
    font-size: 8px;
    color: var(--muted);
    letter-spacing: .08em;
    margin-top: 6px
}

.sticky .btn {
    min-width: 220px
}

.lead-dialog {
    width: min(500px,calc(100% - 30px));
    max-width: none;
    max-height: 90svh;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: auto
}

.lead-dialog::backdrop {
    background: #30271fe0;
    backdrop-filter: blur(4px)
}

.lead-dialog .formcard {
    position: relative;
    padding-top: 37px
}

.dialog-close {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 36px;
    min-height: 36px;
    border: 1px solid var(--line);
    background: #fffdf8;
    color: var(--ink);
    font-size: 24px;
    line-height: 1
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -80px;
    z-index: 30;
    padding: 12px;
    background: var(--white)
}

.skip-link:focus {
    top: 16px
}

@media(max-width: 1000px) {
    .hero-grid {
        gap:40px
    }

    .hero h1 {
        font-size: 72px
    }

    .formcard {
        padding: 28px
    }

    .benefits {
        gap: 18px
    }

    .benefit {
        padding: 23px 20px
    }

    .benefit h3 {
        font-size: 26px
    }
}

@media(max-width: 820px) {
    .hero-grid {
        grid-template-columns:1fr;
        gap: 40px;
        padding: 48px 0
    }

    .hero h1 {
        font-size: 70px
    }

    .hero p {
        max-width: 530px
    }

    .formcard {
        width: 100%;
        max-width: 570px
    }

    .strip-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 19px
    }

    .benefits {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .benefit {
        min-height: 0;
        padding: 27px
    }

    .benefit h3 {
        min-height: 0
    }

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

    .distance-grid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .distance-grid>div {
        display: flex;
        align-items: center;
        gap: 24px
    }

    .distance-grid strong {
        font-size: 35px;
        min-width: 110px
    }

    .distance-grid span {
        margin: 0
    }

    .sticky {
        padding: 10px 16px
    }

    .sticky>div {
        display: none
    }

    .sticky .btn {
        width: 100%
    }

    .detail-heading {
        padding-top: 48px
    }
}

@media(max-width: 480px) {
    .wrap {
        width:calc(100% - 36px)
    }

    .top {
        font-size: 7px;
        letter-spacing: .13em;
        padding: 9px 16px
    }

    .nav {
        min-height: 75px;
        gap: 10px
    }

    .name {
        font-size: clamp(17px,5vw,23px)
    }

    .name small {
        font-size: 6px;
        letter-spacing: .14em
    }

    .nav .btn {
        font-size: 8px;
        letter-spacing: .07em;
        padding: 11px 12px;
        min-height: 39px;
        white-space: nowrap
    }

    .hero-grid {
        padding: 43px 0 40px;
        gap: 36px
    }

    .eyebrow {
        font-size: 8px;
        letter-spacing: .18em
    }

    .hero h1 {
        font-size: 62px;
        margin: 21px 0 25px
    }

    .hero p {
        font-size: 12px;
        line-height: 1.9
    }

    .chips {
        gap: 7px;
        margin: 24px 0 27px
    }

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

    .btn {
        font-size: 9px;
        padding: 14px 20px
    }

    .formcard {
        padding: 27px 23px 24px
    }

    .formcard h2 {
        font-size: 34px
    }

    .formcard p {
        font-size: 11px
    }

    .strip p {
        font-size: 27px
    }

    .detail-heading h2 {
        font-size: 37px
    }

    .amenity-list li {
        font-size: 11px
    }

    .amenity-list li:before {
        margin-right: 7px
    }

    .distance-grid strong {
        min-width: 95px;
        font-size: 33px
    }

    .distance-grid>div {
        gap: 15px
    }

    .footer {
        padding-bottom: 100px
    }

    .closing {
        padding: 48px 18px
    }
}

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

    .name {
        font-size: 16px
    }

    .nav .btn {
        font-size: 7px;
        padding: 10px
    }

    .chip {
        padding: 8px
    }

    .detail-heading h2 {
        font-size: 34px
    }
}

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

    *,*:before,*:after {
        transition: none!important
    }
}

/* Midnight navy, champagne and ivory refinement. */
:root {
    --ivory: #f7f3eb;
    --white: #fffdf8;
    --gold: #c6a970;
    --gold-dark: #92703d;
    --ink: #17263b;
    --muted: #6f716f;
    --line: #dbd2c2
}

.top {
    background: #0b1525;
    color: #d5c298;
    padding: 7px 20px
}

header {
    background: #fbf8f2
}

.nav {
    min-height: 78px
}

.name {
    color: #182940
}

.name small {
    color: #84745c
}

.btn {
    background: linear-gradient(115deg,#dec99c,#bd9b5f);
    border-color: #c9ac73;
    color: #19243a
}

.btn:hover {
    background: #e4cfa3
}

.hero {
    background-color: #0d1a2c;
    background-image: linear-gradient(90deg,rgba(6,18,32,.78) 0%,rgba(6,18,32,.50) 55%,rgba(6,18,32,.30) 100%),url('../images/luxury-interior-banner.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-top: 1px solid #d9c9ad;
    border-bottom: 1px solid #bda06c;
    color: #fff9ec
}

.hero:before {
    display: none
}

.hero:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,transparent,#d0b47f,transparent);
    pointer-events: none
}

.hero-grid {
    min-height: calc(100svh - 175px);
    padding: 30px 0 26px;
    align-items: start;
    gap: 80px
}

.hero-copy {
    padding-top: 12px
}

.hero-copy .eyebrow {
    color: #d1ba8e
}

.hero h1 {
    font-size: clamp(62px,5.8vw,58px);
    line-height: 1.02;
    margin: 20px 0 24px;
    color: #fff9ed
}

.hero h1 em {
    color: #dfc58f
}

.hero-copy>p {
    color: #d2d9e2;
    font-size: 13px;
    line-height: 1.85;
    max-width: 490px
}

.hero .chips {
    margin: 25px 0 28px
}

.hero .chip {
    background: #fff6df09;
    border-color: #d2ba8947;
    color: #e6d6b5
}

.outline {
    background: transparent;
    color: #e6d0a6;
    border-color: #c2a46c
}

.outline:hover {
    background: #d7bd821a
}

.formcard {
    background: #fcf9f2;
    border-color: #e6d8bd;
    border-top: 3px solid #c7a76c;
    box-shadow: 0 20px 55px #00000026;
    padding: 25px 29px 20px
}

.formcard h2 {
    font-size: 32px;
    margin: 9px 0 11px
}

.formcard p {
    font-size: 10px
}

.form {
    gap: 8px;
    margin-top: 16px
}

.form input:not([type=hidden]):not([type=checkbox]),.form textarea {
    padding: 10px 12px;
    font-size: 11px;
    background: #fffdf9;
    border-color: #ded5c6
}

.form textarea {
    min-height: 56px;
    height: 56px
}

.form .btn {
    min-height: 43px;
    padding: 12px 19px
}

.check {
    font-size: 8px;
    line-height: 1.6
}

.formcard .eyebrow {
    color: #8b6a35
}

.preview-note {
    font-size: 8px!important
}

.strip {
    background: #eee5d4
}

.strip p {
    color: #1e3046
}

.closing {
    background: linear-gradient(120deg,#101f34,#243a54)
}

.footer {
    background: #0b1525;
    color: #b6b9c2
}

.footer-bottom {
    border-color: #344359
}

.sticky {
    background: #fbf7effa;
    border-top-color: #cfb885
}

.sticky strong {
    color: #1d2f46
}

.distance-grid strong {
    color: #94713c
}

.lead-dialog::backdrop {
    background: #081426db
}

.lead-dialog .formcard {
    padding-top: 34px
}

.dialog-close {
    color: #1c304c
}

.lead-dialog .formcard h2 {
    font-size: 35px
}

@media(min-width: 821px) and (max-height:740px) {
    .top {
        padding:5px 12px;
        font-size: 8px
    }

    .nav {
        min-height: 62px
    }

    .hero-grid {
        min-height: calc(100svh - 155px);
        padding: 20px 0;
        gap: 56px
    }

    .hero-copy {
        padding-top: 3px
    }

    .hero h1 {
        font-size: 59px;
        margin: 14px 0 18px
    }

    .hero-copy>p {
        font-size: 12px;
        line-height: 1.75
    }

    .hero .chips {
        margin: 20px 0 23px
    }

    .formcard {
        padding: 19px 25px 15px
    }

    .formcard h2 {
        font-size: 28px;
        margin: 8px 0
    }

    .formcard p {
        font-size: 9px
    }

    .form {
        gap: 7px;
        margin-top: 12px
    }

    .form input:not([type=hidden]):not([type=checkbox]),.form textarea {
        padding: 8px 10px
    }

    .form textarea {
        height: 42px;
        min-height: 42px
    }

    .form .btn {
        min-height: 37px;
        padding: 10px
    }

    .sticky {
        padding: 10px 28px
    }

    .sticky .btn {
        min-height: 42px;
        padding: 12px 22px
    }
}

@media(max-width: 1000px) {
    .hero-grid {
        gap:38px
    }

    .hero h1 {
        font-size: 67px
    }

    .formcard {
        padding: 25px
    }

    .hero-copy>p {
        font-size: 12px
    }
}

@media(max-width: 820px) {
    .hero {
        background-image: linear-gradient(rgba(6,18,32,.70),rgba(6,18,32,.70)),url('../images/luxury-interior-banner.jpg');
    }

    .hero-grid {
        min-height:0;
        grid-template-columns: 1fr;
        padding: 35px 0 40px;
        gap: 32px
    }

    .hero-copy {
        padding-top: 0
    }

    .hero h1 {
        font-size: 68px
    }

    .formcard {
        max-width: 570px
    }

    .strip-inner {
        gap: 20px
    }

    .sticky {
        padding: 10px 16px
    }
}

@media(max-width: 480px) {
    .top {
        padding:8px 14px;
        font-size: 7px
    }

    .nav {
        min-height: 70px
    }

    .hero-grid {
        padding: 33px 0 35px;
        gap: 30px
    }

    .hero h1 {
        font-size: clamp(40px,12vw,55px);
        margin: 18px 0 22px
    }

    .hero-copy>p {
        font-size: 12px
    }

    .hero .chips {
        margin: 22px 0 25px
    }

    .formcard {
        padding: 25px 23px 21px
    }

    .formcard h2 {
        font-size: 33px
    }

    .formcard p {
        font-size: 11px
    }

    .form input:not([type=hidden]):not([type=checkbox]),.form textarea {
        padding: 12px;
        font-size: 11px
    }

    .form {
        gap: 11px;
        margin-top: 18px
    }

    .form textarea {
        height: 72px;
        min-height: 72px
    }

    .check {
        font-size: 9px
    }

    .preview-note {
        font-size: 8px!important
    }

    .hero:before {
        right: -410px;
        top: 20px
    }

    .sticky .btn {
        min-height: 45px
    }

    .lead-dialog .formcard h2 {
        font-size: 32px
    }
}

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

@media(min-width: 821px) {
    .hero-grid {
        min-height:min(620px,calc(100svh - 182px))
    }
}

/* Three focused living highlights replace the distance list. */
.living-highlights {
    padding-bottom: 65px
}

.living-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 40px;
    margin-top: 34px
}

.living-highlight {
    border-top: 1px solid #baa06f;
    padding-top: 23px
}

.highlight-index {
    display: block;
    color: #92703d;
    font: 600 8px/1.6 var(--body);
    letter-spacing: .17em;
    margin-bottom: 19px
}

.living-highlight h3 {
    font: 400 24px/1.08 var(--heading);
    color: #1b2f48;
    letter-spacing: -.01em;
    margin: 0 0 17px;
    min-height: 94px
}

.living-highlight p {
    font: 400 12px/1.9 var(--body);
    color: #6b716f;
    max-width: 350px
}

@media(max-width: 820px) {
    .living-highlights-grid {
        grid-template-columns:1fr;
        gap: 30px
    }

    .living-highlight h3 {
        min-height: 0;
        max-width: 470px;
        font-size: 31px
    }

    .living-highlight p {
        max-width: 530px
    }

    .living-highlights {
        padding-bottom: 48px
    }
}

@media(max-width: 480px) {
    .living-highlights-grid {
        margin-top:29px;
        gap: 28px
    }

    .living-highlight h3 {
        font-size: 29px
    }

    .living-highlight p {
        font-size: 12px
    }

    .highlight-index {
        margin-bottom: 15px
    }
}

/* Banner price, animated CTAs and gold highlight icons. */
.hero-copy .banner-starting-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 21px 0 0;
    color: #e9d8b7
}

.banner-starting-price>span {
    font: 500 10px/1.6 var(--body);
    letter-spacing: .06em;
    font-size: 18px;
}

.banner-starting-price strong {
    font: 500 34px/1.1 var(--heading);
    color: #e4c98d;
    white-space: nowrap
}

.banner-starting-price sup {
    font-size: 17px;
    vertical-align: super
}

.hero .chips {
    margin-top: 20px
}

.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    animation: cta-gold-glow 4s ease-in-out infinite;
    transition: transform .25s,background .25s,box-shadow .25s
}

.btn:after {
    content: '';
    position: absolute;
    inset: -70% auto -70% -70%;
    width: 35%;
    background: linear-gradient(90deg,transparent,#fff7df70,transparent);
    transform: skewX(-24deg) translateX(-200%);
    pointer-events: none;
    z-index: -1;
    animation: cta-gold-sheen 6s ease-in-out infinite
}

.btn:hover,.btn:focus-visible {
    transform: translateY(-2px);
    animation-play-state: paused;
    box-shadow: 0 6px 20px #ba955b38
}

.btn:hover:after,.btn:focus-visible:after {
    animation-play-state: paused
}

.btn:active {
    transform: translateY(0)
}

.btn:disabled {
    animation: none
}

.highlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin: 0 0 19px;
    border: 1px solid #b99c68;
    border-radius: 50%;
    background: linear-gradient(140deg,#263e57,#102038);
    color: #e1c28b;
    box-shadow: 0 6px 18px #14243a12
}

.highlight-icon svg {
    width: 40px;
    height: 40px
}

.living-highlight {
    transition: transform .25s
}

.living-highlight:hover .highlight-icon {
    box-shadow: 0 6px 22px #9b77312b;
    transform: translateY(-3px)
}

.highlight-icon {
    transition: transform .25s,box-shadow .25s
}

@keyframes cta-gold-glow {
    0%,100% {
        box-shadow: 0 0 0 0 #c9aa6e00
    }

    50% {
        box-shadow: 0 0 0 4px #c9aa6e12,0 0 20px #d0ae6819
    }
}

@keyframes cta-gold-sheen {
    0%,55% {
        left: -70%;
        opacity: 0
    }

    60% {
        opacity: .8
    }

    85%,100% {
        left: 160%;
        opacity: 0
    }
}

@media(min-width: 821px) and (max-height:740px) {
    .hero-copy .banner-starting-price {
        margin-top:15px;
        gap: 10px
    }

    .banner-starting-price strong {
        font-size: 30px
    }

    .hero .chips {
        margin-top: 15px;
        margin-bottom: 19px
    }
}

@media(max-width: 480px) {
    .hero-copy .banner-starting-price {
        margin-top:21px
    }

    .banner-starting-price strong {
        font-size: 33px
    }

    .highlight-icon {
        width: 63px;
        height: 63px
    }

    .highlight-icon svg {
        width: 37px;
        height: 37px
    }
}

@media(prefers-reduced-motion:reduce) {
    .btn,.btn:after {
        animation: none!important
    }

    .btn:after {
        display: none
    }

    .btn:hover,.btn:focus-visible,.living-highlight:hover .highlight-icon {
        transform: none
    }
}

/* Formatting limited to the hero introduction. */
.hero-intro-points {
    max-width: 490px;
    margin: 0;
    padding-left: 18px;
    color: #d2d9e2;
    font: 400 15px/1.8 var(--body);
}

.hero-intro-points li + li {
    margin-top: 5px;
}

.hero-intro-points li::marker {
    color: #dfc58f;
}

.hero-intro-points strong {
    color: #e4c98d;
    font-size: 17px;
    font-weight: 600;
}

@media (max-width: 480px) {
    .hero-intro-points {
        font-size: 14px;
    }

    .hero-intro-points strong {
        font-size: 16px;
    }
}

/* Keep the header logo, navigation and enquiry button aligned at every width. */
header {
    border-bottom: 1px solid #ded3bd;
}

header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
    gap: 28px;
    padding-block: 14px;
}

header .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

header .brand-mark {
    display: block;
    flex: 0 0 32px;
    width: 32px;
    height: 42px;
    color: #987748;
}

header .brand-mark svg {
    display: block;
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.4;
}

header .name {
    display: block;
    white-space: nowrap;
    font-size: 26px;
    line-height: 1.15;
}

header .name small {
    margin-top: 6px;
    font-size: 8px;
    line-height: 1.5;
}

header .nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: 28px;
}

header .nav-links a {
    padding-block: 12px;
    color: #344257;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: .04em;
}

header .nav-links a:hover {
    color: #886433;
}

header .nav .nav-cta {
    flex-shrink: 0;
    gap: 17px;
    min-height: 46px;
    padding: 13px 20px;
    font-size: 9px;
    letter-spacing: .1em;
    white-space: nowrap;
    animation: none;
}

header .nav-cta::after {
    display: none;
}

header .nav-cta span[aria-hidden] {
    font-size: 17px;
    line-height: 1;
}

@media (max-width: 900px) {
    header .nav-links {
        display: none;
    }

    header .nav {
        min-height: 80px;
        gap: 18px;
    }
}

@media (max-width: 480px) {
    header .nav {
        min-height: 74px;
        gap: 10px;
        padding-block: 12px;
    }

    header .brand {
        gap: 8px;
    }

    header .brand-mark {
        flex-basis: 24px;
        width: 24px;
        height: 33px;
    }

    header .name {
        font-size: clamp(16px, 4.4vw, 20px);
    }

    header .name small {
        font-size: 6px;
        letter-spacing: .13em;
        margin-top: 5px;
    }

    header .nav .nav-cta {
        gap: 9px;
        min-height: 42px;
        padding: 11px 12px;
        font-size: 7px;
        letter-spacing: .05em;
    }

    header .nav-cta span[aria-hidden] {
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    header .brand-mark {
        display: none;
    }

    header .nav .nav-cta {
        padding-inline: 10px;
        gap: 6px;
    }
}