.hero-backdrop {
    position:absolute;
    inset:0 0 auto;
    height:660px;
    background:linear-gradient(0deg,#f2f5f9,transparent 22%),linear-gradient(90deg,#f0f4f9 6%,#f0f4f9e8 39%,#eef3f74d 68%,#edf3fa40),url('/assets/images/architecture.webp') right 40%/cover no-repeat;
    z-index:-1
}
.hero {
    min-height:450px;
    display:flex;
    align-items:center;
    position:relative;
    padding:68px 32px 48px
}
.hero-copy {
    max-width:600px
}
.hero h1 {
    font-size:64px;
    line-height:1.02;
    letter-spacing:-2.8px;
    margin-bottom:19px
}
.intro {
    font-size:21px;
    color:var(--text);
    line-height:1.35;
    max-width:560px
}
.actions {
    display:flex;
    gap:22px;
    margin-top:28px
}
.hero-motto {
    position:absolute;
    right:10%;
    bottom:80px;
    color:#fff;
    font-size:12px;
    letter-spacing:3px;
    line-height:1.8;
    text-transform:uppercase
}
.hero-motto span,.story-image figcaption span {
    display:block;
    width:30px;
    border-bottom:2px solid;
    margin-top:18px
}
.facts {
    border-radius:32px;
    padding:30px 20px;
    display:grid;
    grid-template-columns:repeat(4,1fr)
}
.fact {
    display:flex;
    gap:22px;
    align-items:center;
    padding:0 24px;
    border-right:1px solid var(--line)
}
.fact:last-child {
    border:0
}
.fact>.icon {
    width:31px;
    height:31px;
    color:#244e80
}
.fact strong {
    display:block;
    font-size:18px;
    white-space:nowrap
}
.fact span {
    display:block;
    font-size:13px;
    color:var(--text);
    margin-top:2px
}
.about {
    padding-top:54px
}
.about>.eyebrow,.about>h2,.reviews>.eyebrow,.reviews>h2,.newsletter {
    text-align:center
}
.about-grid {
    display:grid;
    grid-template-columns:1.42fr 1fr;
    gap:64px;
    align-items:center;
    margin-top:28px
}
.story-image {
    position:relative;
    overflow:hidden;
    border-radius:28px;
    border:2px solid white;
    box-shadow:0 15px 28px #253c6018
}
.story-image img {
    display:block;
    width:100%;
    height:280px;
    object-fit:cover
}
.story-image figcaption {
    position:absolute;
    left:47%;
    top:17%;
    font-size:20px;
    line-height:1.3;
    letter-spacing:2px;
    color:#355783
}
.about-copy>p {
    color:var(--text);
    font-size:18px;
    line-height:1.5
}
.story-button {
    font-size:14px;
    min-height:46px;
    padding:10px 26px;
    margin-top:20px
}
.connect {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:18px;
    gap:20px;
    color:#547db0;
    letter-spacing:1px;
    white-space:nowrap
}
.reviews {
    padding-top:44px
}
.reviews .eyebrow {
    margin-bottom:10px
}
.reviews h2 {
    font-size:25px;
    letter-spacing:-.6px
}
.sample-note {
    text-align:center;
    font-size:11px;
    color:#59718e;
    margin:8px 0 18px
}
.review-rails {
    display:grid;
    gap:24px
}
.review-rail {
    display:flex;
    gap:15px;
    overflow-x:auto;
    padding:7px 3px 14px;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    scrollbar-color:#c7d7e9 transparent
}
.review-card {
    flex:0 0 calc((100% - 45px)/4);
    min-width:240px;
    border-radius:23px;
    padding:21px;
    scroll-snap-align:start
}
.review-card blockquote {
    font-size:15px;
    line-height:1.3;
    margin:0 0 18px;
    min-height:58px
}
.review-person {
    display:flex;
    gap:12px;
    align-items:center
}
.avatar {
    width:40px;
    height:40px;
    border-radius:50%;
    background:linear-gradient(140deg,#dae9f6,#92abc6);
    display:grid;
    place-items:center;
    font-size:19px;
    flex-shrink:0
}
.review-person strong,.review-person span:not(.avatar) {
    display:block;
    font-size:12px;
    line-height:1.3
}
.review-person span {
    color:#5475a0
}
.review-person .stars {
    color:#efb900!important;
    letter-spacing:2px;
    font-size:17px!important;
    margin-top:4px
}
.newsletter {
    border-radius:34px;
    margin-top:28px;
    padding:28px 40px 20px
}
.newsletter .eyebrow {
    margin-bottom:12px
}
.newsletter h2 {
    font-size:33px
}
.newsletter-intro {
    color:var(--text);
    margin-top:10px
}
.newsletter form {
    display:grid;
    grid-template-columns:1.2fr 1.2fr .5fr auto;
    align-items:center;
    gap:25px;
    margin-top:24px;
    text-align:left
}
.mail-intro {
    display:flex;
    align-items:center;
    gap:20px;
    font-size:14px;
    color:var(--text)
}
.mail-tile {
    border:2px solid white;
    border-radius:24px;
    background:#ffffff70;
    padding:25px;
    display:flex
}
.mail-tile .icon {
    width:35px;
    height:35px;
    color:#3767a0
}
.fields {
    display:grid;
    gap:10px
}
.fields label {
    display:flex;
    align-items:center;
    border:1px solid #d4dfec;
    border-radius:12px;
    background:#ffffff7a;
    padding:10px 14px;
    gap:12px;
    color:#7194c4
}
.fields .icon {
    width:18px;
    height:18px
}
.fields input {
    width:100%;
    min-width:0;
    border:0;
    outline-offset:10px;
    background:transparent;
    color:var(--ink);
    font-size:14px
}
.fields input::placeholder {
    color:#809fc6
}
fieldset {
    border:0;
    padding:0;
    margin:0;
    font-size:14px;
    white-space:nowrap;
    color:var(--text)
}
legend {
    margin-bottom:6px
}
fieldset label {
    display:block;
    margin-bottom:7px
}
input[type=checkbox] {
    accent-color:#285883;
    width:16px;
    height:16px;
    vertical-align:middle;
    margin-right:6px
}
.newsletter .button {
    padding-inline:25px;
    align-self:end
}
.form-status {
    grid-column:1/-1;
    font-size:12px;
    text-align:center;
    color:#59718e;
    min-height:18px
}
@media(min-width:1500px) {
    .hero-backdrop {
        background-position:right 47%;
        background-size:cover
    }
}
@media(max-width:1050px) {
    .fact {
        padding-inline:12px;
        gap:13px
    }
    .fact strong {
        font-size:15px
    }
    .about-grid {
        gap:30px
    }
    .connect {
        flex-wrap:wrap
    }
    .newsletter form {
        grid-template-columns:1fr 1fr
    }
    .newsletter .button {
        align-self:center
    }
    .hero h1 {
        font-size:57px
    }
}
@media(max-width:700px) {
    .hero-backdrop {
        height:545px;
        background:linear-gradient(0deg,#e6f3fd,transparent 24%),linear-gradient(90deg,#edf7ffc7,#eff8ffa0 45%,#dceefb40),url('/assets/images/architecture.webp') 65% center/auto 100% no-repeat
    }
    .hero {
        min-height:380px;
        padding:33px 14px 42px;
        align-items:flex-start
    }
    .hero h1 {
        font-size:clamp(30px,6.6vw,46px);
        letter-spacing:-1.3px;
        line-height:1.05;
        margin-bottom:12px
    }
    .intro {
        font-size:17px;
        max-width:330px;
        line-height:1.32
    }
    .hero-copy {
        width:100%
    }
    .actions {
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        margin-top:17px
    }
    .actions .button {
        width:210px;
        min-height:44px;
        padding:9px 17px;
        font-size:15px
    }
    .hero-motto {
        right:1%;
        bottom:38px;
        font-size:10px;
        letter-spacing:2px
    }
    .facts {
        grid-template-columns:1fr 1fr;
        padding:0;
        border:0;
        gap:6px;
        border-radius:22px;
        background:#ffffff35
    }
    .fact {
        padding:17px 15px;
        gap:16px;
        background:#ffffff75;
        border:0;
        border-radius:19px
    }
    .fact>.icon {
        width:27px;
        height:27px
    }
    .fact strong {
        font-size:14px;
        white-space:normal
    }
    .fact span {
        font-size:12px
    }
    .about {
        padding-top:29px
    }
    .about h2 {
        font-size:26px;
        letter-spacing:-.6px
    }
    .about-grid {
        display:flex;
        flex-direction:column;
        gap:14px;
        margin-top:14px
    }
    .about-copy {
        display:contents
    }
    .about-copy>p {
        order:-1;
        text-align:center;
        font-size:17px;
        line-height:1.37;
        padding-inline:12px
    }
    .story-image {
        width:94%;
        border-radius:20px
    }
    .story-image img {
        height:175px
    }
    .story-image figcaption {
        font-size:16px;
        left:40%;
        top:13%;
        letter-spacing:1.5px
    }
    .story-button {
        width:94%;
        margin:0;
        min-height:44px;
        font-size:16px
    }
    .connect {
        margin-top:0;
        justify-content:center;
        gap:25px;
        font-size:14px;
        flex-wrap:nowrap
    }
    .reviews {
        padding-top:28px;
        width:92%;
        margin-left:8%
    }
    .reviews>.eyebrow,.reviews>h2,.sample-note {
        margin-right:8%
    }
    .reviews h2 {
        font-size:21px;
        line-height:1.3
    }
    .reviews .eyebrow {
        font-size:9px;
        letter-spacing:2.7px
    }
    .sample-note {
        font-size:10px;
        margin-bottom:15px
    }
    .review-rails {
        gap:18px
    }
    .review-rail {
        gap:12px;
        padding-right:18px
    }
    .review-card {
        flex-basis:190px;
        min-width:190px;
        border-radius:19px;
        padding:16px
    }
    .review-card blockquote {
        font-size:14px;
        min-height:55px;
        margin-bottom:10px
    }
    .review-person {
        gap:9px
    }
    .review-person strong,.review-person span:not(.avatar) {
        font-size:10px
    }
    .avatar {
        width:34px;
        height:34px
    }
    .newsletter {
        padding:15px 18px 10px;
        margin-top:15px;
        border-radius:25px
    }
    .newsletter h2 {
        font-size:26px
    }
    .newsletter .eyebrow {
        margin-bottom:5px
    }
    .newsletter-intro {
        font-size:14px;
        line-height:1.3;
        margin-top:5px
    }
    .newsletter form {
        gap:12px;
        margin-top:15px
    }
    .mail-intro {
        display:none
    }
    .fields {
        grid-column:1/-1;
        gap:12px
    }
    .fields label {
        padding:10px;
        gap:8px
    }
    .fields input {
        font-size:12px
    }
    .newsletter fieldset {
        font-size:12px;
        display:flex;
        flex-wrap:wrap;
        gap:8px
    }
    .newsletter fieldset legend {
        float:left;
        margin-right:8px
    }
    .newsletter fieldset label {
        margin:0
    }
    .newsletter .button {
        min-height:40px;
        padding:8px 16px;
        font-size:13px;
        gap:8px
    }
    .form-status {
        font-size:10px
    }
}
@media(max-width:370px) {
    .fact {
        padding:13px 9px;
        gap:9px
    }
    .fact strong {
        font-size:12px
    }
    .hero-motto {
        right:-2%;
        font-size:9px
    }
    .actions .button {
        width:185px
    }
    .connect {
        gap:12px
    }
}
@media(max-width:700px) {
    .fact {
        gap:10px;
        padding-inline:12px
    }
    .fact strong {
        font-size:12px;
        white-space:nowrap
    }
    .fact span {
        font-size:11px
    }
    .fact>.icon {
        width:24px;
        height:24px
    }
    .hero-backdrop {
        background-image:linear-gradient(0deg,#e6f3fd,transparent 24%),linear-gradient(90deg,#edf7ffed,#eff8ffba 48%,#dceefb40),url("/assets/images/architecture.webp")
    }
}
@media(max-width:370px) {
    .facts {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .fact {
        gap:8px;
        padding-inline:9px
    }
    .fact strong {
        white-space:normal
    }
    .fact span {
        font-size:10px
    }
    .fact>.icon {
        width:21px;
        height:21px
    }
}
/* Mailing list: introduction / stacked fields / interests;
action beneath fields. */
.newsletter form {
    grid-template-columns:1fr 1.1fr .5fr;
    column-gap:28px;
    row-gap:12px
}
.mail-intro {
    grid-column:1;
    grid-row:1
}
.fields {
    grid-column:2;
    grid-row:1;
    grid-template-columns:minmax(0,1fr)
}
.newsletter fieldset {
    grid-column:3;
    grid-row:1;
    align-self:center
}
.newsletter form>.button {
    grid-column:1/-1;
    grid-row:2;
    justify-self:center;
    align-self:start
}
.form-status {
    grid-column:1/-1;
    grid-row:3
}
@media(max-width:700px) {
    .newsletter {
        padding:24px
    }
    .newsletter form {
        grid-template-columns:minmax(0,1fr);
        gap:14px
    }
    .fields {
        grid-column:1/-1;
        grid-row:auto;
        gap:12px
    }
    .fields label {
        padding:13px 14px
    }
    .fields input {
        font-size:14px
    }
    .newsletter fieldset {
        grid-column:1;
        grid-row:auto;
        display:flex;
        gap:12px;
        flex-wrap:wrap;
        font-size:13px
    }
    .newsletter fieldset legend {
        float:none;
        margin-bottom:8px
    }
    .newsletter form>.button {
        grid-column:1;
        grid-row:auto;
        min-height:44px;
        padding-inline:26px
    }
    .form-status {
        grid-column:1;
        grid-row:auto;
        text-align:center
    }
}