:root {
    --red: #cd0b25;
    --soft: #f8f5f5;
    --muted: #6e6e72;
    --navy: #091125
}

body {
    font-size: 18px
}

.container {
    width: calc(100% - 176px);
    max-width: 1480px
}

h1,
h2,
h3 {
    letter-spacing: -.035em
}

h2 {
    font-size: clamp(30px, 2.65vw, 42px);
    line-height: 1.24
}

.section {
    padding: 88px 0
}

.section-head {
    margin-bottom: 36px
}

.section-head h2 {
    margin-bottom: 24px
}

.section-head p {
    font-size: 17px
}

.heading-motif {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 21px;
    color: var(--red)
}

.heading-motif .icon {
    width: 31px;
    height: 31px
}

.heading-motif .icon img {
    width: 29px;
    height: 29px
}

.heading-motif>span {
    height: 9px;
    width: 68px;
    border-top: 2px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: skewX(-38deg)
}

.center .heading-motif {
    justify-content: center
}

.center .heading-motif:before {
    content: '';
    width: 48px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: skewX(-38deg)
}

.center .heading-motif>span {
    width: 48px
}

.center {
    margin-bottom: 46px
}

.btn {
    border-radius: 0;
    min-height: 58px;
    padding: 17px 38px;
    font-size: 16px;
    box-shadow: none;
    overflow: hidden
}

.btn:hover {
    transform: none;
    box-shadow: none;
    background: var(--navy);
    color: white
}

.reference-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px
}

.reference-link svg {
    width: 17px;
    height: 17px
}

.reference-link:hover svg {
    transform: translateX(5px)
}

svg {
    display: block;
    flex-shrink: 0
}

.icon img {
    transition: transform .5s var(--ease)
}

.topbar {
    padding: 0;
    height: 44px;
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 13px
}

.topbar .container {
    height: 100%;
    align-items: center
}

.topbar-notes {
    display: flex;
    height: 100%;
    gap: 0
}

.topbar-notes>span {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-right: 19px;
    margin-right: 19px;
    border-right: 1px solid #ffffff24
}

.topbar a {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #e2e4eb
}

.topbar .icon {
    width: 19px;
    height: 19px
}

.topbar .icon img {
    width: 18px;
    height: 18px
}

.nav-wrap {
    height: 70px;
    gap: 0
}

.header .brand {
    width: 267px;
    min-width: 245px;
    height: 126px;
    min-height: 126px;
    padding: 24px 15px;
    align-items: center;
    gap: 11px;
    transition: height .35s, min-height .35s, padding .35s
}

.brand-mark {
    display: block;
    width: 57px;
    height: 54px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.brand-mark.original-mark img {
    height: 54px;
    width: 230px;
    max-width: none;
    object-fit: fill
}

.brand-wordmark {
    display: block
}

.brand strong {
    font-size: 31px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.2;
    font-family: 'Nunito', sans-serif
}

.brand small {
    font-size: 10px;
    font-family: 'Nunito', sans-serif;
    letter-spacing: .9px;
    margin-top: 2px;
    font-weight: 700;
    line-height: 1.4
}

.header nav {
    justify-content: space-between;
    flex: 1;
    margin-left: 18px
}

.header nav>a,
.services-toggle {
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 9px 22px;
    white-space: nowrap;
    border-right: 1px solid #e9e9ec
}

.header nav>a:last-child {
    border-right: 0
}

.search-toggle {
    height: 67px;
    width: 45px;
    background: var(--red);
    color: white;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-left: 16px
}

.search-toggle svg {
    width: 23px;
    height: 23px
}

.search-toggle:hover {
    background: var(--navy)
}

.dropdown-panel {
    width: 270px;
    padding: 7px 0;
    border-top: 3px solid var(--red)
}

.dropdown-panel a {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px
}

.dropdown-panel .icon {
    width: 24px;
    height: 24px
}

.dropdown-panel .icon img {
    width: 22px;
    height: 22px
}

.hero-v2 {
    height: min(810px, calc(100svh - 70px));
    min-height: 680px;
    max-height: 830px;
    margin-bottom: 64px
}

.hero-v2 .hero-content {
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 50px
}

.hero-copy {
    max-width: 930px
}

.hero-kicker {
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    padding: 8px 46px 9px 19px;
    background: var(--navy);
    border-left: 2px solid var(--red);
    display: table;
    margin-bottom: 13px;
    animation: hero-reveal .8s var(--ease) both
}

.hero h1 {
    font-size: clamp(64px, 7.3vw, 112px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.13;
    margin: 0 0 19px
}

.hero h1 strong {
    font-weight: 800
}

.hero-copy p {
    font-size: 19px;
    line-height: 1.6;
    max-width: 660px;
    margin: 18px 0 32px;
    color: #e3e4ea
}

.hero-v2 .hero-images:after,
.service-banner .hero-images:after {
    background: rgba(9, 17, 37, .22)
}

.hero-v2 .hero-photo {
    object-position: center center;
    filter: brightness(.83)
}

.hero-images {
    contain: paint
}

.hero-control {
    bottom: 67px;
    right: 0;
    left: auto
}

.hero-dots button {
    width: 21px;
    height: 3px
}

.hero-pause {
    width: 31px;
    height: 31px;
    padding: 4px
}

.hero-pause svg {
    width: 21px;
    height: 21px
}

.round-control {
    position: absolute;
    top: 48%;
    z-index: 3;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: var(--navy);
    background: white;
    border-radius: 50%;
    transition: .35s
}

.round-control svg {
    width: 22px;
    height: 22px
}

.round-control:hover {
    background: var(--red);
    color: white
}

.hero-prev {
    left: 20px
}

.hero-prev svg {
    transform: rotate(180deg)
}

.hero-next {
    right: 20px
}

.hero-strips {
    padding: 26px 30px;
    bottom: -65px;
    gap: 28px;
    box-shadow: 0 12px 35px #09112513
}

.hero-strips>a {
    height: 127px;
    padding: 24px 35px;
    gap: 23px;
    position: relative;
    border: 6px solid white;
    box-shadow: 0 0 0 1px #eee, 0 6px 30px #09112510;
    overflow: hidden
}

.hero-strips>a>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
    transition: transform .9s var(--ease)
}

.hero-strips>a>.icon,
.hero-strips>a>div {
    position: relative;
    z-index: 1
}

.hero-strips>a:hover {
    transform: none;
    background: var(--navy);
    border-color: white;
    box-shadow: 0 0 0 1px #ddd, 0 10px 25px #09112518
}

.hero-strips>a:hover>img {
    transform: scale(1.08)
}

.hero-strips h3 {
    font-size: 22px;
    margin-bottom: 4px
}

.hero-strips p {
    font-size: 16px;
    font-weight: 700;
    color: #d5d6df
}

.hero-strips .icon {
    width: 44px;
    height: 49px
}

.hero-strips .icon img {
    width: 43px;
    height: 43px
}

.strip-arrow {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 48px;
    background: white;
    color: var(--navy);
    display: grid;
    place-items: center;
    z-index: 2
}

.strip-arrow svg {
    width: 23px;
    height: 23px;
    transition: transform .35s
}

.hero-strips>a:hover .strip-arrow {
    background: var(--red);
    color: white
}

.ref-intro {
    padding-top: 100px;
    padding-bottom: 96px
}

.ref-intro .split {
    gap: 55px;
    grid-template-columns: 1fr 1fr
}

.ref-intro .section-head p {
    line-height: 1.6;
    margin-bottom: 0
}

.ref-intro .section-head {
    margin-bottom: 28px
}

.double-photo {
    height: 510px;
    padding: 7px;
    gap: 27px
}

.double-photo img.photo-one,
.double-photo img.photo-two {
    border: 7px solid white;
    height: 88%;
    box-shadow: 0 6px 22px #0911250d;
    object-position: center top
}

.double-photo .photo-frame {
    inset: 34px 27px;
    transform: none;
    border-color: #ddd
}

.double-photo .watermark-mark {
    position: absolute;
    inset: 0;
    z-index: 3;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
    box-shadow: none;
    opacity: .65;
    pointer-events: none
}

.principles {
    padding: 25px 28px;
    border: 0;
    gap: 25px;
    margin-top: 35px;
    box-shadow: 0 5px 30px #09112509;
    min-height: 145px
}

.principle-seal {
    width: 93px;
    height: 93px;
    flex-shrink: 0;
    border: 2px solid var(--red);
    outline: 1px solid #e9b5bd;
    outline-offset: 5px;
    border-radius: 50%;
    background: var(--navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white
}

.principle-seal .icon {
    width: 32px;
    height: 32px
}

.principle-seal .icon img {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1)
}

.principle-seal>span {
    text-align: center;
    line-height: 1.5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px
}

.principles>div:last-child {
    flex: 1
}

.principles p {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    line-height: 1.4;
    margin: 10px 0
}

.principles p .icon {
    width: 17px;
    height: 17px
}

.principles p .icon img {
    width: 16px;
    height: 16px
}

.ref-services {
    background: #f8f7f7;
    padding: 78px 0 38px;
    isolation: isolate
}

.ref-services:before {
    content: '';
    position: absolute;
    inset: 0 0 36%;
    background: var(--navy) url('photos/serviceBackground.webp') center/cover;
    z-index: -1
}

.ref-services>.container>.section-head {
    color: white;
    margin-bottom: 45px
}

.ref-services .heading-motif {
    display: none
}

.ref-services .service-grid {
    gap: 30px
}

.service-card {
    padding: 7px;
    background: white;
    border: 1px solid #ededee;
    box-shadow: 0 0 0 6px #ffffff5e, 0 8px 30px #09112508;
    position: relative
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 0 6px #ffffff60, 0 15px 30px #09112518
}

.service-card .image-wrap img {
    height: 245px
}

.service-body {
    padding: 24px 20px 20px
}

.service-body>.icon {
    left: 12px;
    right: auto;
    top: -34px;
    width: 46px;
    height: 46px;
    background: var(--red);
    box-shadow: 0 5px 12px #09112512
}

.service-body>.icon img {
    width: 29px;
    height: 29px;
    filter: brightness(0) invert(1)
}

.service-card:hover .service-body>.icon img {
    transform: rotateY(180deg)
}

.service-body h3 {
    font-size: 21px;
    padding: 0;
    margin: 0 0 10px
}

.service-body p {
    font-size: 16px;
    color: #777;
    margin-bottom: 10px
}

.service-body .text-link {
    font-size: 14px;
    margin-top: 5px
}

.photo-hover {
    position: absolute;
    inset: 0;
    background: #091125cf;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .45s
}

.photo-hover svg {
    width: 48px;
    height: 48px;
    background: var(--red);
    color: #fff;
    padding: 12px;
    transform: translateY(15px);
    transition: transform .5s var(--ease)
}

a:hover .photo-hover,
a:focus-visible .photo-hover {
    opacity: 1
}

a:hover .photo-hover svg,
a:focus-visible .photo-hover svg {
    transform: none
}

.people-section {
    padding: 79px 0 65px
}

.people-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px
}

.person-card {
    text-align: center;
    min-width: 0
}

.portrait-frame {
    height: 402px;
    border: 7px solid white;
    box-shadow: 0 0 0 1px #e5e5e8, 0 5px 25px #09112508;
    position: relative;
    overflow: hidden;
    background: var(--navy)
}

.portrait-frame>img {
    width: 100%;
    height: 100%;
    object-position: center top;
    transition: transform .9s var(--ease)
}

.portrait-frame:after {
    content: '';
    position: absolute;
    inset: 16px;
    border: 1px solid #ffffff80;
    pointer-events: none
}

.portrait-note {
    position: absolute;
    bottom: 18px;
    left: 18px;
    right: 18px;
    background: white;
    z-index: 2;
    padding: 14px 12px 16px;
    transition: transform .5s var(--ease)
}

.portrait-note>.icon {
    position: absolute;
    left: 15px;
    top: -18px;
    width: 33px;
    height: 33px;
    background: var(--red);
    border-radius: 50%
}

.portrait-note>.icon img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1)
}

.portrait-note>span {
    font-size: 13px;
    color: var(--red);
    display: block;
    margin-bottom: 5px
}

.portrait-note h3 {
    font-size: 19px;
    margin: 0
}

.person-card>p {
    margin: 18px 12px 0;
    font-size: 15px;
    line-height: 1.55
}

.person-card:hover .portrait-note {
    transform: translateY(-8px)
}

.person-card:hover .portrait-frame>img {
    transform: scale(1.04)
}

.marquee-section {
    padding: 23px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background: #fff
}

.marquee-track>div {
    gap: 38px;
    padding-right: 38px
}

.marquee span {
    font-size: 35px;
    font-weight: 700
}

.marquee .icon {
    width: 40px;
    height: 40px
}

.marquee .icon img {
    width: 35px;
    height: 35px
}

.illustrated-home .scene-layout {
    grid-template-columns: .85fr 1.15fr;
    gap: 60px
}

.illustrated-home .home-scene {
    height: 530px;
    background: var(--soft);
    border: 1px solid #ece9e9;
    overflow: visible
}

.home-scene>img.home-illustration {
    object-fit: contain;
    object-position: center top;
    height: 85%;
    width: 100%;
    padding: 20px 10px;
    animation: float-art 8s ease-in-out infinite
}

.illustrated-home .scene-caption {
    background: white;
    color: var(--navy);
    box-shadow: 0 6px 25px #0911250a;
    bottom: 18px;
    left: 22px;
    right: 22px;
    padding: 21px 25px
}

.illustrated-home .scene-caption p {
    color: #737378
}

.illustrated-home .zone-buttons button {
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 18px
}

.illustrated-home .zone-buttons button span {
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    margin-top: 3px
}

.illustrated-home .hotspot {
    width: 18px;
    height: 18px;
    border-width: 4px
}

.reference-priorities {
    padding: 74px 0 82px;
    overflow: hidden
}

.reference-priorities .section-head {
    max-width: 760px
}

.reference-priorities .section-head p {
    max-width: 600px
}

.section-pattern {
    position: absolute;
    right: 0;
    top: 0;
    width: 650px;
    height: 100%;
    object-fit: contain;
    opacity: .38;
    pointer-events: none;
    animation: pattern-drift 18s ease-in-out infinite
}

.reference-priorities>.container {
    position: relative
}

.reference-priorities .priority-grid {
    gap: 25px
}

.reference-priorities .priority {
    background: #141e36;
    border: 1px solid #1f2b43;
    text-align: center;
    padding: 32px 22px 29px;
    position: relative;
    isolation: isolate;
    overflow: hidden
}

.reference-priorities .priority:after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -10px;
    width: 190px;
    height: 190px;
    border: 1px solid #29334c;
    border-radius: 50%;
    z-index: -1;
    box-shadow: 0 0 0 20px #ffffff02, 0 0 0 40px #ffffff02;
    transition: transform .8s
}

.reference-priorities .priority>.icon {
    width: 66px;
    height: 66px;
    padding: 15px;
    background: var(--navy);
    border-radius: 50%;
    margin-bottom: 21px
}

.reference-priorities .priority>.icon img {
    width: 35px;
    height: 35px
}

.reference-priorities .priority h3 {
    font-size: 20px
}

.reference-priorities .priority p {
    color: #b1b8c8;
    font-size: 15px;
    line-height: 1.65
}

.reference-priorities .priority:hover {
    transform: translateY(-7px);
    border-color: #cc1830;
    background: #17233d;
    box-shadow: 0 12px 25px #0002
}

.reference-priorities .priority:hover:after {
    transform: scale(1.2)
}

.reference-priorities .priority:hover>.icon img {
    transform: rotateY(180deg)
}

.plan-section {
    padding: 80px 0
}

.plan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px
}

.plan-card {
    padding: 26px 24px;
    background: var(--soft);
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 23px;
    border-bottom: 2px solid transparent;
    transition: transform .4s, border-color .4s;
    box-shadow: 0 6px 20px #09112505
}

.plan-card:hover {
    transform: translateY(-5px);
    border-bottom-color: var(--red)
}

.plan-lead {
    display: flex;
    flex-direction: column;
    background: white;
    box-shadow: 0 4px 14px #0911250b
}

.plan-title {
    padding: 21px 20px 19px;
    background: var(--navy);
    color: white;
    flex: 1
}

.plan-title>span {
    font-size: 13px;
    color: #bec4d3
}

.plan-title h3 {
    font-size: 27px;
    line-height: 1.18;
    margin: 14px 0 17px
}

.plan-title>.icon {
    width: 32px;
    height: 32px
}

.plan-title>.icon img {
    width: 30px;
    height: 30px
}

.plan-lead>a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 800;
    font-size: 13px;
    padding: 13px 7px
}

.plan-lead>a svg {
    width: 16px;
    height: 16px
}

.plan-lead>a:hover {
    background: var(--red);
    color: white
}

.plan-card ul {
    padding: 7px 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 12px
}

.plan-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #737378;
    line-height: 1.45
}

.plan-card li .icon {
    width: 15px;
    height: 15px
}

.plan-card li .icon img {
    width: 14px;
    height: 14px
}

.ref-editorial .editorial-card {
    padding: 7px;
    border: 1px solid #ebe8e8;
    box-shadow: 0 4px 20px #09112505
}

.ref-editorial .editorial-card .image-wrap img {
    height: 245px
}

.editorial-tag {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 5px 10px;
    color: white;
    background: var(--red);
    font-size: 12px;
    font-weight: 700;
    z-index: 1;
    line-height: 1.4
}

.ref-editorial .editorial-card>div:last-child {
    padding: 20px 17px 17px
}

.ref-editorial .editorial-card h3 {
    font-size: 21px;
    line-height: 1.35
}

.ref-editorial .editorial-card p {
    font-size: 15px
}

.editorial-card .text-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #555;
    font-weight: 700;
    font-size: 13px;
    padding-top: 4px
}

.editorial-card .text-link svg {
    width: 15px;
    height: 15px
}

.editorial-card .text-link:hover {
    color: var(--red)
}

.slider-controls button {
    border-radius: 0;
    width: 44px;
    height: 44px;
    box-shadow: 0 4px 12px #09112506;
    font-size: 0
}

.slider-controls svg {
    width: 22px;
    height: 22px
}

.slider-controls .slider-prev svg {
    transform: rotate(180deg)
}

.slider-controls .slider-pause svg {
    width: 18px;
    height: 18px
}

.reference-questions {
    padding: 74px 0;
    background: #fff
}

.questions-frame {
    display: grid;
    grid-template-columns: .93fr 1.07fr;
    gap: 64px;
    padding: 8px;
    background: white;
    box-shadow: 0 0 0 1px #eee, 0 5px 28px #09112505;
    align-items: stretch
}

.question-photo {
    position: relative;
    min-height: 530px;
    overflow: hidden
}

.question-photo>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% center
}

.photo-symbol {
    position: absolute;
    right: -1px;
    top: 32px;
    background: var(--red);
    width: 73px;
    height: 73px;
    display: grid;
    place-items: center
}

.photo-symbol .icon img {
    filter: brightness(0) invert(1);
    width: 37px;
    height: 37px
}

.question-content {
    padding: 32px 37px 28px 0
}

.question-content .section-head {
    margin-bottom: 24px
}

.question-content .section-head h2 {
    font-size: 34px;
    margin-bottom: 0
}

.question-content .heading-motif {
    margin-bottom: 20px
}

.question-content .faq-list {
    border-top: 0
}

.question-content .faq-item button {
    font-size: 16px;
    padding: 17px 0
}

.question-content .answer p {
    font-size: 15px;
    padding-bottom: 18px
}

.reference-contact {
    padding: 56px 0;
    overflow: hidden
}

.closing-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.closing-layout .section-head {
    margin-bottom: 30px
}

.closing-layout .section-head p {
    max-width: 510px;
    color: #b6bfce
}

.closing-illustration {
    height: 350px;
    position: relative
}

.closing-illustration img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: float-art 9s ease-in-out infinite
}

.closing-email {
    display: block;
    font-size: 16px;
    margin-top: 18px;
    color: #c9ced7
}

.closing-email:hover {
    color: #fff
}

.footer {
    background: #080f21;
    border-top: 1px solid #ffffff13;
    padding-top: 58px
}

.footer .brand {
    gap: 10px
}

.footer .brand strong {
    font-size: 31px
}

.footer .brand-mark {
    width: 53px;
    height: 49px
}

.footer .brand-mark.original-mark img {
    height: 49px;
    width: 209px
}

.footer-top {
    grid-template-columns: 1.3fr .8fr 1fr 1.2fr;
    gap: 50px;
    padding-bottom: 30px
}

.footer h3 {
    font-size: 21px
}

.footer-top>div>a:not(.brand) {
    font-size: 15px;
    line-height: 1.7
}

.footer .disclaimer {
    font-size: 13px
}

.footer-bottom {
    font-size: 13px
}

.cookie-card {
    padding: 12px 16px;
    box-shadow: 0 6px 35px #0911251c;
    border-left-width: 3px
}

.cookie-card p {
    font-size: 12px
}

.cookie-card .icon {
    width: 26px
}

.cookie-card .icon img {
    width: 24px;
    height: 24px
}

.cookie-card button {
    padding: 9px 12px
}

.page-transition>.brand-mark {
    width: 70px;
    height: 66px
}

.page-transition>.brand-mark.original-mark img {
    width: 281px;
    height: 66px
}

.service-banner {
    margin: 0;
    min-height: 535px;
    height: 570px
}

.service-banner .hero-content {
    padding: 102px 0 75px
}

.service-banner .backlink {
    font-size: 13px;
    margin-bottom: 25px;
    color: #d5d9e3
}

.service-banner .hero-kicker {
    font-size: 21px
}

.service-banner h1 {
    font-size: clamp(57px, 6vw, 92px)
}

.service-banner p {
    max-width: 540px;
    font-size: 18px
}

.service-banner .hero-photo {
    filter: brightness(.75);
    object-position: center
}

.service-overview .section-head-row {
    align-items: center;
    margin-bottom: 38px
}

.overview-art {
    width: 265px;
    height: 195px;
    flex-shrink: 0
}

.overview-art img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.benefit-row {
    gap: 23px;
    border: 0
}

.benefit-row article {
    padding: 30px 28px;
    border: 1px solid #eee !important;
    box-shadow: 0 5px 25px #09112507;
    transition: .4s;
    position: relative;
    overflow: hidden
}

.benefit-row article>.icon {
    width: 47px;
    height: 47px;
    margin-bottom: 20px;
    background: var(--soft);
    padding: 8px
}

.benefit-row article>.icon img {
    width: 31px;
    height: 31px
}

.benefit-row article:hover {
    background: white;
    transform: translateY(-5px);
    border-bottom-color: var(--red) !important
}

.benefit-row h3 {
    font-size: 22px;
    margin-bottom: 13px
}

.photographic-slider {
    background: #f8f5f5
}

.photographic-slider .section-head {
    max-width: 800px;
    margin: 0 auto 39px;
    text-align: center
}

.photographic-slider .heading-motif {
    justify-content: center
}

.photographic-slider .section-head p {
    margin-inline: auto
}

.photographic-slider .feature-card {
    height: 365px;
    position: relative;
    overflow: hidden;
    background: var(--navy);
    border: 7px solid white;
    box-shadow: 0 4px 20px #0911250d
}

.photographic-slider .image-wrap {
    position: absolute;
    inset: 0
}

.photographic-slider .image-wrap img {
    height: 100%;
    width: 100%;
    opacity: .39;
    object-fit: cover
}

.photographic-slider .feature-body {
    position: relative;
    z-index: 1;
    justify-content: center;
    border: 0;
    padding: 29px 27px;
    color: white
}

.photographic-slider .feature-body>.icon {
    width: 48px;
    height: 48px;
    background: var(--red);
    padding: 10px;
    margin-bottom: 22px
}

.photographic-slider .feature-body>.icon img {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1)
}

.photographic-slider .feature-body h3 {
    font-size: 24px;
    margin-bottom: 13px
}

.photographic-slider .feature-body p {
    font-size: 16px;
    color: #d7dbe5;
    flex: 0;
    margin-bottom: auto
}

.photographic-slider .feature-body .text-link {
    color: white;
    border-bottom: 1px solid #cf0b25;
    font-size: 14px;
    width: 100%;
    padding: 16px 0 9px
}

.photographic-slider .feature-card:hover .image-wrap img {
    opacity: .6;
    transform: scale(1.07)
}

.photographic-slider .feature-card:hover .text-link {
    background: var(--red);
    padding-left: 14px
}

.option-tabs {
    gap: 75px
}

.tab-panels {
    border: 8px solid white;
    outline: 1px solid #e8e6e6;
    box-shadow: 0 8px 35px #0911250b;
    background: #f8f5f5;
    padding: 37px;
    position: relative
}

.tab-panels:after {
    content: '';
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 58px;
    height: 58px;
    border-right: 1px solid var(--red);
    border-bottom: 1px solid var(--red);
    pointer-events: none
}

.tab-list button {
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    padding: 20px 8px
}

.tab-panels h3 {
    font-size: 29px
}

.coverage {
    position: relative;
    overflow: hidden
}

.coverage .container {
    position: relative
}

.coverage:before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('photos/pattern2.webp') center right/contain no-repeat;
    opacity: .4
}

.coverage-panel {
    border: 7px solid white;
    box-shadow: 0 0 0 1px #ffffff22;
    grid-template-columns: 1.15fr 1fr;
    background: white;
    color: var(--ink)
}

.coverage-copy p {
    color: var(--muted)
}

.coverage-copy .text-link {
    color: var(--red)
}

.coverage-copy {
    padding: 32px 38px
}

.coverage-copy .icon {
    width: 42px;
    height: 42px
}

.coverage-copy .icon img {
    width: 34px;
    height: 34px
}

.coverage-photo {
    height: 345px
}

.coverage-photo img {
    transition: opacity .4s, transform .8s var(--ease)
}

.coverage-panel:hover .coverage-photo img {
    transform: scale(1.03)
}

.preparation-grid {
    gap: 28px
}

.preparation-grid article {
    padding: 33px 29px;
    box-shadow: 0 5px 28px #09112509;
    border: 1px solid #eee;
    border-bottom: 2px solid transparent;
    transition: .4s
}

.preparation-grid article:hover {
    border-bottom-color: var(--red);
    transform: translateY(-5px)
}

.preparation-grid .icon {
    border-radius: 0;
    outline: 1px solid #eee;
    outline-offset: 6px;
    margin-bottom: 26px;
    width: 59px;
    height: 59px;
    border: 1px solid #e3c7cc
}

.preparation-grid .icon img {
    width: 36px;
    height: 36px
}

.preparation-grid .small-rule {
    display: none
}

.service-faq {
    background: #f8f5f5
}

.service-faq .faq-list {
    border: 0;
    max-width: 1000px;
    display: grid;
    gap: 12px
}

.service-faq .faq-item {
    border: 1px solid #e8e6e6;
    background: white;
    box-shadow: 0 4px 15px #09112503
}

.service-faq .faq-item button {
    padding: 22px 26px
}

.service-faq .answer p {
    padding: 0 26px 22px
}

.ref-service-cta {
    padding: 58px 0;
    overflow: hidden
}

.ref-service-cta .cta-box {
    position: relative
}

.ref-service-cta p {
    color: #bcc4d2
}

.cta-pattern {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .3;
    pointer-events: none
}

.ref-about .about-image {
    height: 460px;
    border: 7px solid white;
    box-shadow: 0 0 0 1px #eee, 0 5px 30px #09112508
}

.ref-about .about-image>img {
    object-position: center 20%
}

.ref-about .image-label {
    bottom: 16px;
    left: 16px;
    right: 16px;
    border-left: 0
}

.ref-about h1 {
    font-size: 54px
}

.purpose-photo {
    height: 445px;
    box-shadow: none;
    background: #f8f5f5;
    border: 1px solid #eee;
    padding: 15px
}

.purpose-photo img {
    object-fit: contain
}

.values-grid article {
    background: #141e36;
    border: 1px solid #293248;
    padding: 34px 29px
}

.values-grid article .icon {
    background: var(--navy);
    width: 59px;
    height: 59px;
    padding: 12px;
    border-radius: 50%
}

.values-grid article .icon img {
    width: 33px;
    height: 33px
}

.photo-title {
    padding: 95px 0 72px;
    isolation: isolate;
    background: var(--navy);
    overflow: hidden
}

.photo-title:before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('photos/hero3.webp') center 40%/cover;
    opacity: .2;
    z-index: -1
}

.photo-title h1 {
    font-size: clamp(40px, 4.1vw, 62px)
}

.contact-layout {
    grid-template-columns: .85fr 1.15fr;
    gap: 70px
}

.contact-layout .contact-photo {
    height: 365px;
    object-fit: contain;
    object-position: center bottom;
    background: #f8f5f5;
    border-bottom: 3px solid var(--red);
    margin-bottom: 30px
}

.contact-layout form {
    background: #fff;
    padding: 39px 36px;
    border: 1px solid #eee;
    border-top: 3px solid var(--red);
    box-shadow: 0 6px 35px #0911250b
}

.contact-layout form h2 {
    font-size: 32px
}

.contact-layout form input,
.contact-layout form textarea,
.contact-layout form select {
    background: #f8f7f7;
    border: 1px solid #ecebed
}

.contact-layout .contact-disclaimer {
    font-size: 12px
}

.legal-layout aside {
    background: var(--soft);
    padding: 22px;
    border: 0;
    border-top: 2px solid var(--red)
}

.legal-layout aside a {
    text-decoration: none
}

.legal-layout article>div {
    padding: 0 0 26px
}

.legal-layout h2 {
    font-size: 27px
}

.legal-layout article p {
    font-size: 17px
}

#site-search {
    padding: 0;
    border: 0;
    background: white;
    box-shadow: 0 20px 100px #09112555;
    width: 650px;
    max-width: calc(100vw - 36px);
    max-height: 80svh;
    overflow: auto
}

#site-search::backdrop {
    background: #091125dc;
    backdrop-filter: blur(4px)
}

.search-inner {
    padding: 42px
}

.search-inner h2 {
    font-size: 30px;
    margin: 0 30px 26px 0
}

.search-close {
    position: absolute;
    right: 18px;
    top: 18px;
    background: white;
    padding: 8px;
    color: var(--red);
    width: 36px;
    height: 36px
}

.search-close .plus {
    transform: rotate(45deg);
    display: block;
    margin: auto
}

.search-inner label {
    font-size: 14px
}

.search-inner input {
    background: var(--soft)
}

#search-results a {
    display: block;
    position: relative;
    padding: 15px 35px 15px 0;
    border-bottom: 1px solid #eee;
    font-size: 15px
}

#search-results a strong {
    display: block;
    color: var(--ink);
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 17px
}

#search-results a span {
    display: block;
    font-size: 14px;
    color: var(--muted);
    margin-top: 6px
}

#search-results a svg {
    width: 21px;
    height: 21px;
    position: absolute;
    right: 0;
    top: 23px;
    color: var(--red)
}

#search-results a:hover strong {
    color: var(--red)
}

@keyframes float-art {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@keyframes pattern-drift {

    0%,
    100% {
        transform: translateX(0) rotate(0)
    }

    50% {
        transform: translateX(15px) rotate(3deg)
    }
}

@media(min-width:1700px) {
    .hero-v2 {
        max-height: 850px;
        height: 830px
    }

    .hero-v2 .hero-copy {
        margin-top: 15px
    }

    .double-photo {
        height: 550px
    }

    .service-card .image-wrap img {
        height: 280px
    }

    .portrait-frame {
        height: 450px
    }

    .ref-services {
        padding-top: 92px
    }

    .hero-strips>a {
        height: 135px
    }

    .hero h1 {
        font-size: 112px
    }

    .hero-strips h3 {
        font-size: 25px
    }

    .ref-intro .section-head h2 {
        font-size: 43px
    }

    .ref-intro .section-head p {
        font-size: 18px
    }
}

@media(max-width:1250px) {
    .container {
        width: calc(100% - 100px)
    }

    .header .brand {
        width: 240px;
        min-width: 224px;
        padding-inline: 13px
    }

    .header nav {
        margin-left: 10px
    }

    .header nav>a,
    .services-toggle {
        padding-inline: 15px;
        font-size: 14px
    }

    .search-toggle {
        margin-left: 8px
    }

    .brand strong {
        font-size: 29px
    }

    .hero-prev {
        left: 9px
    }

    .hero-next {
        right: 9px
    }

    .round-control {
        width: 35px;
        height: 35px
    }

    .hero-strips {
        padding: 20px;
        gap: 22px
    }

    .hero-strips>a {
        padding: 20px 23px;
        gap: 16px
    }

    .hero-strips h3 {
        font-size: 20px
    }

    .hero-strips p {
        font-size: 14px
    }

    .ref-intro .split {
        gap: 40px
    }

    .principles {
        padding: 22px 19px;
        gap: 20px
    }

    .principle-seal {
        width: 76px;
        height: 76px
    }

    .principles p {
        font-size: 14px;
        gap: 6px
    }

    .principles p .icon {
        width: 13px;
        height: 13px
    }

    .principles p .icon img {
        width: 13px;
        height: 13px
    }

    .double-photo {
        height: 460px;
        gap: 19px
    }

    .service-card .image-wrap img {
        height: 210px
    }

    .service-body {
        padding: 24px 14px 17px
    }

    .service-body h3 {
        font-size: 20px
    }

    .service-body p {
        font-size: 15px
    }

    .people-grid {
        gap: 25px
    }

    .portrait-frame {
        height: 350px
    }

    .portrait-note {
        left: 12px;
        right: 12px;
        bottom: 14px
    }

    .portrait-note h3 {
        font-size: 17px
    }

    .illustrated-home .scene-layout {
        gap: 40px
    }

    .illustrated-home .home-scene {
        height: 490px
    }

    .reference-priorities .priority-grid {
        gap: 19px
    }

    .reference-priorities .priority {
        padding: 28px 18px
    }

    .reference-priorities .priority h3 {
        font-size: 18px
    }

    .reference-priorities .priority p {
        font-size: 14px
    }

    .plan-grid {
        gap: 24px
    }

    .plan-card {
        gap: 16px;
        padding: 21px 19px;
        grid-template-columns: .95fr 1.05fr
    }

    .plan-title {
        padding: 20px 16px
    }

    .plan-title h3 {
        font-size: 24px
    }

    .plan-card li {
        font-size: 13px
    }

    .ref-editorial .editorial-card .image-wrap img {
        height: 212px
    }

    .questions-frame {
        gap: 38px
    }

    .question-content {
        padding: 27px 26px 24px 0
    }

    .question-content .section-head h2 {
        font-size: 30px
    }

    .question-photo {
        min-height: 510px
    }

    .closing-layout {
        gap: 35px
    }

    .closing-illustration {
        height: 320px
    }

    .footer-top {
        gap: 32px
    }

    .option-tabs {
        gap: 45px
    }

    .contact-layout {
        gap: 45px
    }

    .overview-art {
        width: 230px;
        height: 180px
    }
}

@media(max-width:1000px) and (min-width:901px) {
    .header .brand {
        width: 217px;
        min-width: 210px
    }

    .brand strong {
        font-size: 25px
    }

    .brand-mark {
        width: 49px;
        height: 46px
    }

    .brand-mark.original-mark img {
        width: 196px;
        height: 46px
    }

    .header nav>a,
    .services-toggle {
        font-size: 13px;
        padding-inline: 12px
    }

    .search-toggle {
        width: 36px
    }

    .topbar {
        font-size: 11px
    }

    .topbar-notes>span {
        gap: 7px;
        padding-right: 10px;
        margin-right: 10px
    }

    .container {
        width: calc(100% - 76px)
    }
}

@media(max-width:900px) {
    .container {
        width: calc(100% - 48px)
    }

    .topbar {
        height: 34px;
        font-size: 11px
    }

    .topbar-notes {
        display: none
    }

    .topbar .container {
        justify-content: center
    }

    .topbar .icon {
        width: 15px;
        height: 15px
    }

    .topbar .icon img {
        width: 15px;
        height: 15px
    }

    .header .brand {
        height: 91px;
        min-height: 91px;
        width: auto;
        min-width: 215px;
        padding: 18px 14px
    }

    .nav-wrap {
        height: 70px
    }

    .header nav {
        margin: 0;
        padding-top: 120px
    }

    .header nav>a,
    .services-toggle {
        font-size: 23px;
        padding: 12px 18px;
        border: 0
    }

    .header .brand strong {
        font-size: 28px
    }

    .search-toggle {
        height: 43px;
        width: 43px;
        margin-left: auto;
        margin-right: 12px
    }

    .burger {
        margin-left: 0
    }

    .menu-open .search-toggle {
        visibility: hidden
    }

    .header .dropdown-panel a {
        font-size: 16px;
        justify-content: center;
        gap: 10px
    }

    .header .dropdown-panel .icon {
        width: 21px;
        height: 21px
    }

    .hero-v2 {
        height: 690px;
        min-height: 0;
        margin-bottom: 45px
    }

    .hero-v2 .hero-content {
        padding-bottom: 60px
    }

    .hero h1 {
        font-size: clamp(58px, 8vw, 78px)
    }

    .hero-kicker {
        font-size: 20px;
        padding: 8px 32px 8px 16px
    }

    .hero-copy p {
        font-size: 18px;
        max-width: 540px
    }

    .round-control {
        display: none
    }

    .hero-strips {
        bottom: -60px;
        gap: 18px;
        padding: 18px
    }

    .hero-strips>a {
        height: 112px;
        padding: 16px 18px;
        gap: 13px
    }

    .hero-strips .icon {
        width: 31px;
        height: 36px
    }

    .hero-strips .icon img {
        width: 31px;
        height: 31px
    }

    .hero-strips h3 {
        font-size: 17px
    }

    .hero-strips p {
        font-size: 13px
    }

    .strip-arrow {
        width: 34px;
        height: 33px
    }

    .strip-arrow svg {
        width: 18px;
        height: 18px
    }

    .section {
        padding: 61px 0
    }

    .ref-intro {
        padding-top: 89px;
        padding-bottom: 69px
    }

    .ref-intro .split {
        gap: 30px
    }

    .ref-intro h2 {
        font-size: 30px
    }

    .ref-intro .section-head p {
        font-size: 16px
    }

    .double-photo {
        height: 360px;
        gap: 14px
    }

    .double-photo img.photo-one,
    .double-photo img.photo-two {
        border-width: 5px
    }

    .principles {
        padding: 19px 15px;
        gap: 16px;
        min-height: 120px;
        margin-top: 25px
    }

    .principle-seal {
        width: 61px;
        height: 61px;
        outline-offset: 3px
    }

    .principle-seal .icon {
        width: 23px;
        height: 23px
    }

    .principle-seal .icon img {
        width: 22px;
        height: 22px
    }

    .principle-seal>span {
        font-size: 7px
    }

    .principles p {
        font-size: 12px;
        line-height: 1.35;
        margin: 8px 0
    }

    .principles p .icon {
        display: none
    }

    .reference-link {
        font-size: 15px
    }

    .ref-services .service-grid {
        gap: 20px
    }

    .service-card .image-wrap img {
        height: 173px
    }

    .service-body h3 {
        font-size: 18px
    }

    .service-body p {
        font-size: 14px
    }

    .service-body .text-link {
        font-size: 12px
    }

    .service-body>.icon {
        width: 39px;
        height: 39px;
        top: -29px
    }

    .service-body>.icon img {
        width: 25px;
        height: 25px
    }

    .people-grid {
        gap: 21px
    }

    .portrait-frame {
        height: 307px
    }

    .portrait-note {
        left: 8px;
        right: 8px;
        padding: 15px 9px
    }

    .portrait-note h3 {
        font-size: 15px
    }

    .portrait-note>span {
        font-size: 11px
    }

    .person-card>p {
        font-size: 13px;
        margin-inline: 5px
    }

    .people-section .center p {
        max-width: 570px
    }

    .marquee-section {
        padding: 20px 0
    }

    .marquee span {
        font-size: 29px
    }

    .marquee-track>div {
        gap: 26px;
        padding-right: 26px
    }

    .marquee .icon img {
        width: 30px;
        height: 30px
    }

    .illustrated-home .scene-layout {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .illustrated-home .home-scene {
        height: 510px
    }

    .illustrated-home .zone-buttons button {
        font-size: 17px
    }

    .illustrated-home .zone-buttons button span {
        font-size: 13px
    }

    .reference-priorities .priority-grid {
        grid-template-columns: 1fr 1fr;
        gap: 23px
    }

    .reference-priorities .priority h3 {
        font-size: 20px
    }

    .reference-priorities .priority p {
        font-size: 15px
    }

    .reference-priorities .priority {
        padding: 28px
    }

    .plan-grid {
        gap: 23px
    }

    .plan-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px
    }

    .plan-title {
        padding: 21px;
        position: relative
    }

    .plan-title h3 {
        font-size: 24px;
        max-width: 190px;
        margin: 10px 0 0
    }

    .plan-title>.icon {
        position: absolute;
        right: 18px;
        bottom: 25px
    }

    .plan-card ul {
        padding: 0 8px 8px;
        gap: 14px
    }

    .plan-card li {
        font-size: 15px
    }

    .ref-editorial .editorial-card .image-wrap img {
        height: 230px
    }

    .questions-frame {
        grid-template-columns: .85fr 1.15fr;
        gap: 26px
    }

    .question-photo {
        min-height: 540px
    }

    .question-content {
        padding: 25px 20px 20px 0
    }

    .question-content .section-head h2 {
        font-size: 29px
    }

    .question-content .faq-item button {
        font-size: 15px;
        padding: 15px 0
    }

    .question-content .answer p {
        font-size: 14px
    }

    .photo-symbol {
        width: 55px;
        height: 55px
    }

    .photo-symbol .icon img {
        width: 28px;
        height: 28px
    }

    .closing-illustration {
        height: 270px
    }

    .closing-layout {
        gap: 30px
    }

    .closing-layout .section-head h2 {
        font-size: 33px
    }

    .closing-layout .section-head p {
        font-size: 16px
    }

    .footer-top {
        grid-template-columns: 1.2fr 1fr;
        gap: 35px
    }

    .footer .brand-mark.original-mark img {
        max-width: none
    }

    .service-banner {
        height: 510px;
        min-height: 0
    }

    .service-banner .hero-content {
        padding: 90px 0 50px
    }

    .service-banner h1 {
        font-size: 66px
    }

    .service-banner .hero-kicker {
        font-size: 18px
    }

    .service-banner p {
        font-size: 17px
    }

    .overview-art {
        width: 190px;
        height: 165px
    }

    .service-overview .section-head {
        max-width: 480px
    }

    .benefit-row {
        gap: 16px
    }

    .benefit-row article {
        padding: 24px 20px
    }

    .benefit-row h3 {
        font-size: 19px
    }

    .benefit-row p {
        font-size: 14px
    }

    .photographic-slider .feature-card {
        height: 370px
    }

    .photographic-slider .feature-body {
        padding: 27px 23px
    }

    .option-tabs {
        gap: 32px
    }

    .tab-panels {
        padding: 26px;
        border-width: 6px
    }

    .tab-panels h3 {
        font-size: 26px
    }

    .coverage-photo {
        height: 350px
    }

    .coverage-copy {
        padding: 27px
    }

    .preparation-grid {
        gap: 20px
    }

    .preparation-grid article {
        padding: 25px 17px
    }

    .preparation-grid h3 {
        font-size: 20px
    }

    .preparation-grid p {
        font-size: 15px
    }

    .ref-about h1 {
        font-size: 43px
    }

    .ref-about .about-image {
        height: 410px
    }

    .purpose-photo {
        height: 345px
    }

    .contact-layout {
        gap: 30px;
        grid-template-columns: .85fr 1.15fr
    }

    .contact-layout .contact-photo {
        height: 300px
    }

    .contact-layout form {
        padding: 30px 26px
    }

    .contact-layout form h2 {
        font-size: 28px
    }

    .photo-title {
        padding: 77px 0 55px
    }
}

@media(max-width:640px) {
    .container {
        width: calc(100% - 32px)
    }

    body {
        font-size: 16px
    }

    .section {
        padding: 44px 0
    }

    .heading-motif {
        justify-content: center;
        margin-bottom: 18px;
        gap: 14px
    }

    .heading-motif .icon {
        width: 26px;
        height: 26px
    }

    .heading-motif .icon img {
        width: 25px;
        height: 25px
    }

    .heading-motif>span {
        width: 45px;
        height: 7px
    }

    .center .heading-motif:before {
        width: 30px
    }

    .center .heading-motif>span {
        width: 30px
    }

    .section-head h2 {
        font-size: 29px;
        line-height: 1.25;
        margin-bottom: 18px
    }

    .section-head p {
        font-size: 16px;
        line-height: 1.6
    }

    .section-head {
        margin-bottom: 25px
    }

    .center {
        margin-bottom: 30px
    }

    .topbar {
        height: 30px;
        font-size: 11px
    }

    .topbar .icon {
        display: none
    }

    .nav-wrap {
        height: 65px
    }

    .header .brand {
        height: 83px;
        min-height: 83px;
        min-width: 187px;
        padding: 16px 13px;
        gap: 9px
    }

    .brand-mark {
        width: 46px;
        height: 44px
    }

    .brand-mark.original-mark img {
        width: 187px;
        height: 44px
    }

    .header .brand strong {
        font-size: 27px
    }

    .brand small {
        font-size: 9px
    }

    .header .search-toggle {
        width: 36px;
        height: 39px;
        margin-right: 7px
    }

    .search-toggle svg {
        width: 20px;
        height: 20px
    }

    .burger {
        width: 39px;
        height: 39px;
        padding: 7px
    }

    .header nav {
        padding-top: 120px
    }

    .header nav>a,
    .services-toggle {
        font-size: 23px;
        padding: 11px
    }

    .hero-v2 {
        height: 570px;
        min-height: 0;
        margin-bottom: 125px
    }

    .hero-v2 .hero-content {
        padding: 0 0 70px;
        justify-content: center
    }

    .hero-kicker {
        margin: 0 auto 18px;
        padding: 7px 16px;
        font-size: 15px;
        line-height: 1.5
    }

    .hero h1 {
        font-size: clamp(43px, 11vw, 67px);
        line-height: 1.07;
        letter-spacing: -.055em;
        margin: 0 0 20px
    }

    .hero-copy {
        text-align: center;
        width: 100%
    }

    .hero-copy p {
        font-size: 16px;
        line-height: 1.6;
        margin: 0 auto 25px;
        max-width: 350px
    }

    .hero-copy p br {
        display: none
    }

    .hero-v2 .hero-photo {
        object-position: 60% center;
        filter: brightness(.7)
    }

    .hero-v2 .hero-images:after {
        background: #0911253b
    }

    .hero .btn {
        padding: 15px 26px;
        min-height: 51px;
        font-size: 14px
    }

    .hero-control {
        left: 0;
        right: 0;
        bottom: 73px;
        gap: 14px
    }

    .hero-strips {
        bottom: -122px;
        padding: 12px;
        gap: 10px;
        grid-template-columns: 1fr
    }

    .hero-strips>a {
        height: 88px;
        padding: 13px 20px;
        gap: 16px;
        border-width: 4px
    }

    .hero-strips h3 {
        font-size: 17px
    }

    .hero-strips p {
        font-size: 13px;
        line-height: 1.5;
        margin: 3px 0 0
    }

    .hero-strips .icon {
        width: 32px;
        height: 35px
    }

    .hero-strips .icon img {
        width: 31px;
        height: 31px
    }

    .strip-arrow {
        width: 32px;
        height: 31px
    }

    .ref-intro {
        padding-top: 47px
    }

    .ref-intro .split {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .ref-intro .section-head {
        max-width: 440px;
        margin: 0 auto 23px
    }

    .ref-intro .section-head p {
        font-size: 16px
    }

    .principles {
        padding: 20px;
        max-width: 460px;
        margin: 27px auto 0;
        gap: 25px;
        text-align: left;
        min-height: 130px
    }

    .principle-seal {
        width: 74px;
        height: 74px;
        outline-offset: 4px
    }

    .principle-seal .icon {
        width: 29px;
        height: 29px
    }

    .principle-seal .icon img {
        width: 27px;
        height: 27px
    }

    .principle-seal>span {
        font-size: 8px
    }

    .principles p {
        font-size: 13px;
        margin: 9px 0;
        line-height: 1.5
    }

    .double-photo {
        height: 365px;
        max-width: 430px;
        gap: 21px;
        padding: 6px
    }

    .double-photo img.photo-one,
    .double-photo img.photo-two {
        height: 89%;
        border-width: 5px
    }

    .double-photo .watermark-mark {
        width: 100%;
        height: 100%
    }

    .ref-services {
        padding-top: 43px;
        padding-bottom: 33px
    }

    .ref-services:before {
        bottom: 44%
    }

    .ref-services .service-grid {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin: 0 auto;
        gap: 26px
    }

    .service-card {
        display: flex;
        flex-direction: column;
        padding: 6px;
        border: 1px solid #eee
    }

    .service-card>.image-wrap {
        height: auto
    }

    .service-card>.image-wrap img {
        height: 220px;
        min-height: 0
    }

    .service-body {
        padding: 28px 21px 20px
    }

    .service-body>.icon {
        display: inline-flex;
        top: -28px;
        left: 15px;
        width: 42px;
        height: 42px
    }

    .service-body>.icon img {
        width: 26px;
        height: 26px
    }

    .service-body h3 {
        font-size: 23px;
        margin-bottom: 12px
    }

    .service-body p {
        font-size: 16px;
        margin-bottom: 13px
    }

    .service-body .text-link {
        font-size: 14px
    }

    .people-grid {
        grid-template-columns: 1fr;
        gap: 26px;
        max-width: 380px;
        margin: 0 auto
    }

    .portrait-frame {
        height: 380px;
        border-width: 6px
    }

    .portrait-note {
        left: 17px;
        right: 17px;
        bottom: 18px;
        padding: 17px 13px
    }

    .portrait-note h3 {
        font-size: 19px
    }

    .portrait-note>span {
        font-size: 12px
    }

    .portrait-note>.icon {
        left: 15px;
        width: 33px;
        height: 33px
    }

    .person-card>p {
        font-size: 15px;
        margin: 17px 14px 0
    }

    .marquee-section {
        padding: 16px 0
    }

    .marquee span {
        font-size: 25px
    }

    .marquee-track>div {
        gap: 22px;
        padding-right: 22px
    }

    .marquee .icon {
        width: 29px;
        height: 29px
    }

    .marquee .icon img {
        width: 27px;
        height: 27px
    }

    .illustrated-home .scene-layout {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .illustrated-home .zone-buttons button {
        font-size: 13px;
        line-height: 1.45;
        padding: 13px 9px;
        text-align: center
    }

    .illustrated-home .zone-buttons button span {
        display: none
    }

    .illustrated-home .home-scene {
        height: 385px;
        overflow: hidden
    }

    .home-scene>img.home-illustration {
        height: 77%;
        padding: 6px 0 0;
        object-position: center top
    }

    .illustrated-home .scene-caption {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 18px 19px
    }

    .illustrated-home .scene-caption h3 {
        font-size: 19px;
        margin-bottom: 7px
    }

    .illustrated-home .scene-caption p {
        font-size: 13px;
        line-height: 1.6
    }

    .illustrated-home .hotspot {
        transform: translateY(-23px);
        width: 16px;
        height: 16px;
        border-width: 3px
    }

    .reference-priorities .section-head {
        margin-bottom: 30px
    }

    .reference-priorities .section-head p {
        font-size: 15px
    }

    .reference-priorities .priority-grid {
        gap: 14px
    }

    .reference-priorities .priority {
        padding: 22px 14px 24px
    }

    .reference-priorities .priority>.icon {
        width: 55px;
        height: 55px;
        padding: 12px;
        margin-bottom: 17px
    }

    .reference-priorities .priority>.icon img {
        width: 29px;
        height: 29px
    }

    .reference-priorities .priority h3 {
        font-size: 17px;
        line-height: 1.4;
        margin-bottom: 12px
    }

    .reference-priorities .priority p {
        font-size: 13px;
        line-height: 1.6
    }

    .section-pattern {
        opacity: .18
    }

    .plan-grid {
        grid-template-columns: 1fr;
        gap: 22px;
        max-width: 440px;
        margin: 0 auto
    }

    .plan-card {
        grid-template-columns: .95fr 1.05fr;
        padding: 18px 15px;
        gap: 16px
    }

    .plan-title {
        padding: 19px 14px
    }

    .plan-title>span {
        font-size: 11px
    }

    .plan-title h3 {
        font-size: 24px;
        margin: 12px 0 15px
    }

    .plan-title>.icon {
        position: static;
        width: 28px;
        height: 28px
    }

    .plan-title>.icon img {
        width: 27px;
        height: 27px
    }

    .plan-lead>a {
        font-size: 11px;
        padding: 12px 7px;
        gap: 5px
    }

    .plan-lead>a svg {
        width: 14px;
        height: 14px
    }

    .plan-card ul {
        padding: 4px 0;
        gap: 13px;
        justify-content: space-evenly
    }

    .plan-card li {
        font-size: 12px;
        gap: 6px
    }

    .plan-card li .icon {
        width: 12px;
        height: 12px
    }

    .plan-card li .icon img {
        width: 12px;
        height: 12px
    }

    .ref-editorial .editorial-card .image-wrap img {
        height: 235px
    }

    .ref-editorial .editorial-card>div:last-child {
        padding: 22px 18px 20px
    }

    .ref-editorial .editorial-card h3 {
        font-size: 23px
    }

    .ref-editorial .editorial-card p {
        font-size: 16px
    }

    .slider-controls {
        margin-top: 22px
    }

    .slider-controls button {
        width: 41px;
        height: 41px
    }

    .questions-frame {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 6px
    }

    .question-photo {
        min-height: 0;
        height: 285px
    }

    .question-photo>img {
        object-position: center 35%
    }

    .photo-symbol {
        width: 54px;
        height: 54px;
        top: 20px
    }

    .question-content {
        padding: 30px 20px 19px
    }

    .question-content .section-head h2 {
        font-size: 29px
    }

    .question-content .faq-item button {
        font-size: 16px;
        padding: 17px 0;
        line-height: 1.5
    }

    .question-content .answer p {
        font-size: 15px
    }

    .reference-contact {
        padding: 44px 0 27px
    }

    .closing-layout {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center
    }

    .closing-layout .section-head {
        max-width: 430px;
        margin: 0 auto 25px
    }

    .closing-layout .section-head h2 {
        font-size: 31px
    }

    .closing-layout .section-head p {
        font-size: 16px
    }

    .closing-illustration {
        height: 265px;
        max-width: 430px;
        width: 100%;
        margin: auto;
        order: 2
    }

    .closing-email {
        font-size: 14px
    }

    .footer {
        padding: 39px 0 20px
    }

    .footer .brand {
        justify-content: flex-start
    }

    .footer .brand strong {
        font-size: 29px
    }

    .footer .brand small {
        font-size: 9px
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px
    }

    .footer-top>div:first-child,
    .footer-top>div:last-child {
        grid-column: 1/-1
    }

    .footer-top>div>a:not(.brand) {
        font-size: 14px
    }

    .footer h3 {
        font-size: 19px
    }

    .footer .disclaimer {
        font-size: 12px
    }

    .footer-bottom {
        font-size: 12px
    }

    .footer .credits {
        font-size: 11px
    }

    .cookie-card {
        padding: 9px 11px;
        gap: 8px
    }

    .cookie-card .icon {
        display: none
    }

    .cookie-card button {
        padding: 8px 9px;
        font-size: 10px
    }

    .cookie-card strong {
        font-size: 11px
    }

    .cookie-card>div {
        min-width: 130px
    }

    .service-banner {
        height: 470px;
        min-height: 0;
        margin: 0
    }

    .service-banner .hero-content {
        padding: 77px 0 38px
    }

    .service-banner .backlink {
        display: block;
        text-align: center;
        font-size: 12px;
        margin-bottom: 26px
    }

    .service-banner .hero-kicker {
        font-size: 15px;
        margin-bottom: 18px
    }

    .service-banner h1 {
        font-size: clamp(41px, 10vw, 59px);
        letter-spacing: -.055em
    }

    .service-banner p {
        font-size: 16px;
        max-width: 350px
    }

    .service-banner .hero-photo {
        object-position: 65% center
    }

    .service-overview .section-head-row {
        margin-bottom: 27px;
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .service-overview .section-head {
        margin: 0 auto;
        max-width: none
    }

    .overview-art {
        width: 215px;
        height: 160px;
        margin: 0 auto
    }

    .benefit-row {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .benefit-row article {
        padding: 24px;
        display: grid;
        grid-template-columns: 45px 1fr;
        gap: 5px 19px;
        align-items: start
    }

    .benefit-row article>.icon {
        grid-row: span 2;
        width: 45px;
        height: 45px;
        margin: 0
    }

    .benefit-row h3 {
        font-size: 21px;
        margin: 0 0 7px
    }

    .benefit-row p {
        font-size: 15px;
        margin: 0
    }

    .photographic-slider .feature-card {
        height: 350px
    }

    .photographic-slider .feature-body {
        padding: 26px
    }

    .photographic-slider .feature-body h3 {
        font-size: 25px
    }

    .photographic-slider .feature-body p {
        font-size: 16px
    }

    .photographic-slider .feature-body .text-link {
        font-size: 14px
    }

    .option-tabs {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .tab-list button {
        font-size: 18px;
        padding: 19px 5px
    }

    .tab-panels {
        padding: 29px 24px;
        border-width: 6px;
        min-height: 0
    }

    .tab-panels h3 {
        font-size: 27px
    }

    .tab-panels p {
        font-size: 16px
    }

    .tab-panels .ask-note p {
        font-size: 14px
    }

    .coverage-panel {
        grid-template-columns: 1fr;
        border-width: 6px
    }

    .coverage-photo {
        height: 230px
    }

    .coverage-copy {
        padding: 25px 23px
    }

    .coverage-copy h3 {
        font-size: 25px
    }

    .coverage-copy p {
        font-size: 16px
    }

    .coverage-copy .text-link {
        font-size: 14px
    }

    .coverage-picker {
        gap: 7px;
        margin-top: 24px
    }

    .coverage-picker button {
        font-size: 12px;
        padding: 9px 11px
    }

    .preparation-grid {
        grid-template-columns: 1fr;
        gap: 19px
    }

    .preparation-grid article {
        padding: 26px;
        grid-template-columns: 51px 1fr;
        gap: 6px 24px;
        text-align: left;
        border: 1px solid #eee
    }

    .preparation-grid .icon {
        width: 48px;
        height: 48px;
        margin: 6px 0 0;
        outline-offset: 4px
    }

    .preparation-grid .icon img {
        width: 29px;
        height: 29px
    }

    .preparation-grid h3 {
        font-size: 21px
    }

    .preparation-grid p {
        font-size: 15px
    }

    .service-faq .faq-item button {
        font-size: 16px;
        padding: 19px
    }

    .service-faq .answer p {
        font-size: 15px;
        padding: 0 19px 19px
    }

    .ref-service-cta {
        padding: 39px 0
    }

    .ref-service-cta .cta-box {
        padding-left: 14px
    }

    .ref-about {
        padding-top: 63px
    }

    .ref-about h1 {
        font-size: 39px
    }

    .ref-about .about-image {
        height: 350px;
        max-width: 400px;
        margin: auto;
        width: 100%
    }

    .ref-about .image-label {
        padding: 13px;
        font-size: 14px
    }

    .purpose-photo {
        height: 290px;
        padding: 6px
    }

    .values-grid article {
        padding: 27px
    }

    .values-grid h3 {
        font-size: 23px
    }

    .values-grid p {
        font-size: 16px
    }

    .photo-title {
        padding: 70px 0 44px
    }

    .photo-title h1 {
        font-size: 35px
    }

    .photo-title p {
        font-size: 15px
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .contact-layout .contact-photo {
        height: 310px;
        width: 100%;
        max-width: 400px;
        margin: 0 auto 24px
    }

    .contact-layout aside h2 {
        font-size: 30px
    }

    .contact-layout aside p {
        font-size: 15px
    }

    .contact-layout .contact-disclaimer {
        font-size: 12px
    }

    .contact-layout form {
        padding: 29px 22px
    }

    .contact-layout form h2 {
        font-size: 27px
    }

    .legal-layout aside {
        padding: 17px
    }

    .legal-layout article h2 {
        font-size: 25px
    }

    .legal-layout article p {
        font-size: 16px
    }

    .search-inner {
        padding: 30px 25px
    }

    .search-inner h2 {
        font-size: 26px;
        text-align: left
    }

    .search-close {
        right: 10px;
        top: 10px
    }

    #search-results a strong {
        font-size: 16px
    }

    #search-results a span {
        font-size: 13px
    }
}

@media(prefers-reduced-motion:reduce) {

    .closing-illustration img,
    .home-illustration,
    .section-pattern {
        animation: none !important
    }
}

.heading-motif {
    min-height: 38px;
    gap: 22px
}

.heading-motif>.icon {
    transform: none;
    border: 0;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    background: none;
    padding: 0
}

.heading-motif>.icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    transform: none
}

.heading-motif>span:not(.icon) {
    transform: none;
    height: 9px;
    width: 75px;
    border: 0;
    position: relative;
    background: none
}

.heading-motif>span:not(.icon):before,
.heading-motif>span:not(.icon):after {
    content: '';
    position: absolute;
    height: 2px;
    width: 60px;
    background: currentColor;
    left: 0;
    top: 7px
}

.heading-motif>span:not(.icon):after {
    left: 12px;
    top: 0
}

.center .heading-motif:before {
    display: none
}

.header .nav-wrap {
    height: 80px
}

.header .brand {
    height: 108px;
    min-height: 108px;
    width: 270px;
    min-width: 240px;
    align-self: flex-start;
    margin-top: 0;
    padding: 22px 22px
}

.header .brand strong {
    font-size: 33px
}

.header .brand small {
    font-size: 10px;
    letter-spacing: 1.2px
}

.header nav {
    margin-left: 22px;
    justify-content: center;
    gap: 0
}

.header nav>a,
.header .services-toggle {
    padding: 10px clamp(13px, 1.7vw, 28px);
    font-size: 15px;
    line-height: 25px
}

.header .services-toggle {
    display: flex;
    align-items: center;
    gap: 9px
}

.chevron {
    width: 8px;
    height: 8px;
    flex: none;
    margin-top: -4px
}

.search-toggle {
    height: 78px;
    width: 52px;
    margin-left: auto
}

.header nav>a:after {
    bottom: 4px
}

.dropdown-panel {
    top: calc(100% + 12px);
    box-shadow: 0 18px 45px #09112524
}

.header .brand-mark {
    width: 61px;
    height: 57px
}

.header .brand-mark.original-mark img {
    width: 244px;
    height: 57px
}

#your-priorities {
    background: #080f23 url('contours.svg') center/cover
}

.reference-priorities .section-pattern {
    display: none
}

.reference-priorities .priority {
    background: #171f32;
    border: 1px solid transparent;
    padding: 35px 25px;
    transition: transform .4s, border-color .4s, background .4s
}

.reference-priorities .priority:after {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    bottom: -4px;
    right: -5px;
    width: 140px;
    height: 155px;
    background: url('logo.svg') center/contain no-repeat;
    opacity: .075;
    filter: grayscale(1)
}

.reference-priorities .priority>.icon {
    display: inline-grid;
    place-items: center;
    padding: 18px;
    width: 80px;
    height: 80px;
    transition: background .45s
}

.reference-priorities .priority>.icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    transition: filter .45s, transform .6s
}

.reference-priorities .priority:hover>.icon,
.reference-priorities .priority:focus-within>.icon {
    background: var(--red)
}

.reference-priorities .priority:hover>.icon img,
.reference-priorities .priority:focus-within>.icon img {
    filter: brightness(0) invert(1);
    transform: none
}

#your-next-step h2 {
    font-size: clamp(29px, 2.8vw, 43px)
}

.plan-card {
    padding: 35px;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    background: #f8f5f5;
    border: 1px solid #f8f5f5;
    box-shadow: none;
    align-items: stretch
}

.plan-lead {
    background: transparent;
    box-shadow: none;
    gap: 22px
}

.plan-title {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.plan-title h3 {
    font-size: 23px;
    margin: 0 0 20px;
    white-space: nowrap
}

.price-rule {
    display: block;
    width: 90px;
    height: 4px;
    background: var(--red);
    margin: 0 0 20px
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap
}

.plan-price strong {
    font-size: 70px;
    line-height: 1.15;
    font-family: 'Montserrat Alternates', sans-serif;
    font-weight: 800;
    letter-spacing: -.04em
}

.plan-price small {
    font-size: 16px;
    font-weight: 800;
    color: #fff
}

.plan-lead>a {
    background: white;
    padding: 19px 12px;
    font-size: 18px;
    box-shadow: 0 10px 25px #09112509
}

.plan-card ul {
    padding: 0;
    gap: 0;
    justify-content: stretch
}

.plan-card li {
    padding: 15px 0;
    border-bottom: 1px solid #d9dce2;
    flex: 1;
    font-size: 16px;
    gap: 12px
}

.plan-card li:last-child {
    border: 0
}

.plan-card li .icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px
}

.plan-card li .icon img {
    width: 20px;
    height: 20px
}

.pricing-note {
    text-align: center;
    font-size: 12px;
    color: #7b7b82;
    margin: 22px auto 0;
    max-width: 860px
}

.questions-frame {
    align-items: start
}

.question-photo {
    height: 680px
}

.question-content {
    position: sticky;
    top: 110px;
    align-self: start
}

.reference-questions {
    overflow: visible
}

#start-here {
    padding: 38px 0
}

#start-here .closing-layout {
    grid-template-columns: 1.35fr 1fr;
    gap: 35px
}

#start-here .closing-illustration {
    height: 270px
}

#start-here h2 {
    font-size: clamp(28px, 3vw, 43px);
    white-space: nowrap
}

#start-here .section-head {
    margin-bottom: 22px
}

#start-here .closing-layout>div:first-child {
    border-left: 2px solid var(--red);
    padding-left: 30px
}

#start-here .heading-motif {
    display: none
}

#start-here .closing-email {
    display: inline-block;
    margin-left: 22px
}

.ref-about {
    background: #f8f5f5
}

.ref-about .split {
    gap: 80px
}

.ref-about h1 {
    font-size: clamp(39px, 4vw, 64px);
    line-height: 1.14
}

.ref-about .about-image {
    height: 500px;
    padding: 10px;
    border: 1px solid #d9dce2;
    box-shadow: 16px 16px 0 #eae7e8;
    position: relative
}

.ref-about .about-image>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center
}

.ref-about .image-label {
    left: 30px;
    bottom: 30px;
    right: 30px;
    border-left: 4px solid var(--red);
    background: white;
    color: var(--navy);
    box-shadow: 0 8px 25px #09112513;
    padding: 22px
}

.purpose-photo {
    position: relative;
    background: #f8f5f5;
    border: 1px solid #e6e3e3;
    padding: 20px
}

.purpose-photo img {
    object-fit: contain;
    max-height: 390px
}

.purpose-caption {
    position: absolute;
    bottom: 15px;
    left: 20px;
    background: white;
    border-left: 3px solid var(--red);
    padding: 13px 22px;
    font-size: 16px;
    font-weight: 800
}

.values-grid article {
    position: relative;
    border: 1px solid #ffffff20;
    border-bottom: 3px solid #cd0b25;
    background: #141e34;
    padding: 30px;
    transition: transform .4s, background .4s
}

.values-grid article:hover {
    transform: translateY(-5px);
    background: #1b2740
}

.perspective-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 30px
}

.perspective-grid article {
    position: relative;
    overflow: hidden;
    border: 1px solid #d9dce2;
    padding: 35px 28px 65px;
    transition: background .4s, transform .4s;
    min-width: 0
}

.perspective-grid article:hover,
.perspective-grid article:focus-visible {
    background: var(--navy);
    color: white;
    transform: translateY(-5px)
}

.perspective-grid article p {
    font-size: 16px
}

.perspective-grid article>.icon {
    margin-bottom: 22px
}

.perspective-grid article:hover p {
    color: #c2c9d6
}

.outline-word {
    position: absolute;
    bottom: -14px;
    left: 24px;
    font-size: 50px;
    white-space: nowrap;
    font-weight: 900;
    opacity: .09;
    pointer-events: none
}

.journey-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center
}

.journey-stages .disclosure-grid {
    grid-template-columns: 1fr
}

.journey-stages details {
    padding: 20px 25px
}

.contact-layout {
    grid-template-columns: 1fr minmax(0, 650px);
    gap: 70px;
    max-width: 1270px;
    margin: auto
}

.contact-layout form {
    width: 100%;
    background: white;
    border: 1px solid #e4e2e4;
    border-top: 4px solid var(--red);
    padding: 35px;
    box-shadow: 10px 10px 0 #f5f2f3, 0 20px 55px #0911250c
}

.contact-layout form label {
    font-size: 14px;
    font-weight: 700
}

.contact-layout input:not([type=checkbox]),
.contact-layout select,
.contact-layout textarea {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #dfe1e5;
    border-radius: 2px;
    background: #faf9f9;
    color: var(--navy);
    padding: 14px 15px;
    font: 400 16px 'Nunito', sans-serif;
    transition: border-color .3s, box-shadow .3s, background .3s;
    width: 100%
}

.contact-layout select {
    padding-right: 42px;
    background: #faf9f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23cd0b25' stroke-width='2'%3E%3Cpath d='m5 7 5 5 5-5'/%3E%3C/svg%3E") right 14px center/20px no-repeat
}

.contact-layout textarea {
    resize: vertical;
    min-height: 120px
}

.contact-layout input:focus,
.contact-layout select:focus,
.contact-layout textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px #cd0b2510;
    background-color: #fff
}

.contact-layout input[type=checkbox],
.topic-checks input {
    appearance: none;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    border: 1px solid #b9bbc4;
    background: white;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    accent-color: var(--red);
    margin: 0
}

.contact-layout input[type=checkbox]:checked,
.topic-checks input:checked {
    background: var(--red);
    border-color: var(--red)
}

.contact-layout input[type=checkbox]:checked:after,
.topic-checks input:checked:after {
    content: '';
    width: 8px;
    height: 5px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg)
}

.contact-layout .consent {
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    font-weight: 400
}

.contact-layout .form-grid {
    gap: 18px
}

.contact-layout form h2 {
    font-size: 29px
}

.benefit-row article,
.tab-panels,
.coverage-copy {
    position: relative
}

.benefit-row article {
    padding: 28px 28px 30px;
    border: 1px solid #dfe1e7;
    transition: transform .4s, box-shadow .4s, border-color .4s
}

.benefit-row article>.icon,
.tab-panels [role=tabpanel]>.icon,
.coverage-copy>.outline-icon {
    position: absolute;
    top: 22px;
    right: 22px;
    margin: 0;
    width: 43px;
    height: 43px;
    padding: 8px;
    background: #f8f3f4;
    border: 1px solid #ebdade
}

.benefit-row article>.icon img,
.tab-panels [role=tabpanel]>.icon img,
.coverage-copy>.outline-icon .icon img {
    width: 27px;
    height: 27px;
    object-fit: contain
}

.benefit-row h3 {
    padding-right: 55px;
    min-height: 50px;
    display: flex;
    align-items: center
}

.tab-panels h3,
.coverage-copy h3 {
    padding-right: 60px
}

.tab-panels {
    border: 1px solid #d5d9e1;
    box-shadow: 8px 8px 0 #f6f4f5;
    padding: 38px
}

.coverage-copy {
    padding: 35px
}

.coverage-copy>.outline-icon {
    display: grid;
    place-items: center
}

.coverage-copy>.outline-icon .icon {
    width: 27px;
    height: 27px
}

.benefit-row article:hover,
.benefit-row article:focus-within,
.tab-panels:hover,
.coverage-copy:hover {
    border-color: var(--red);
    box-shadow: 0 12px 30px #0911250c
}

.preparation-grid article {
    border: 1px solid #d7dbe2;
    transition: transform .4s, box-shadow .4s
}

.preparation-grid article:hover {
    transform: translateY(-4px);
    box-shadow: 6px 6px 0 #f1e6e9
}

.feature-card:focus-within .feature-body {
    transform: none
}

.tab-list button,
.coverage-picker button {
    transition: background .35s, color .35s, border-color .35s
}

.viewfinder-layout,
.mode-layout,
.guest-layout,
.doorfit-layout,
.resilience-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 70px;
    align-items: center
}

.viewfinder-photo {
    height: 390px;
    position: relative;
    padding: 8px;
    border: 1px solid #d9dce2;
    overflow: hidden
}

.viewfinder-photo>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.viewfinder-frame {
    position: absolute;
    inset: 20.5%;
    border: 2px solid white;
    box-shadow: 0 0 0 500px #09112570;
    transition: inset .15s;
    display: grid;
    place-items: center
}

.viewfinder-frame span {
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 12px;
    background: var(--red);
    color: white;
    padding: 3px 8px
}

.viewfinder-frame i {
    width: 20px;
    height: 20px;
    border: 1px solid white;
    border-radius: 50%
}

.range-label {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    margin-top: 24px
}

.range-label output {
    color: var(--red)
}

#field-range {
    width: 100%;
    accent-color: var(--red);
    cursor: ew-resize;
    margin: 20px 0
}

.fine-copy {
    font-size: 13px !important
}

.compact-heading {
    display: flex;
    gap: 70px;
    justify-content: space-between;
    align-items: center
}

.compact-heading>p {
    max-width: 480px
}

.choice-deck {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px
}

.choice-tile {
    padding: 28px;
    text-align: left;
    border: 1px solid #d9dce2;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
    transition: transform .4s, background .4s, border-color .4s;
    min-width: 0;
    position: relative
}

.choice-tile>.icon {
    width: 45px;
    height: 45px
}

.choice-tile strong {
    font-size: 20px;
    font-family: 'Montserrat Alternates', sans-serif
}

.choice-tile>span:last-child {
    font-size: 16px;
    line-height: 1.55;
    color: #717480
}

.choice-tile.active {
    border-color: var(--red);
    box-shadow: inset 0 -3px var(--red)
}

.choice-tile:hover {
    transform: translateY(-5px)
}

.choice-response {
    margin: 24px 0 0;
    min-height: 48px;
    border-left: 3px solid var(--red);
    padding: 8px 16px;
    font-size: 15px
}

.navy .choice-tile {
    background: #172136;
    border-color: #354058;
    color: white
}

.navy .choice-tile.active {
    border-color: var(--red)
}

.navy .choice-tile>span:last-child {
    color: #b9c1d0
}

.checklist-strip {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 70px;
    border: 1px solid #dedee4;
    border-left: 4px solid var(--red);
    padding: 38px
}

.checklist-strip h2 {
    font-size: 30px;
    margin: 15px 0
}

.checklist-strip p {
    font-size: 16px
}

.topic-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-content: center
}

.topic-checks label {
    display: flex;
    gap: 12px;
    align-items: center;
    border: 1px solid #e1e1e7;
    padding: 15px;
    cursor: pointer;
    font-size: 14px;
    transition: background .3s
}

.topic-checks label:has(:checked) {
    background: #faf0f2;
    border-color: #dca2ac
}

.topic-output {
    grid-column: 1/-1;
    font-size: 14px;
    color: #727580;
    min-height: 44px
}

.mode-visual {
    position: relative;
    border: 1px solid #ddd;
    height: 370px;
    background: white
}

.mode-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px
}

.status-orbit {
    position: absolute;
    bottom: 20px;
    left: 25px;
    background: var(--navy);
    color: white;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px
}

.status-orbit span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ce1530;
    box-shadow: 0 0 0 6px #ffffff16;
    animation: statusPulse 3s ease-in-out infinite
}

.mode-switches,
.duration-picker {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 25px 0
}

.mode-switches button,
.duration-picker button {
    border: 1px solid #d9dce2;
    background: white;
    padding: 13px 17px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    transition: .35s
}

.mode-switches .icon {
    width: 22px;
    height: 22px
}

.mode-switches .icon img {
    width: 22px;
    height: 22px
}

.mode-switches button.active,
.duration-picker button.active {
    background: var(--navy);
    color: white;
    border-color: var(--navy)
}

#mode-copy {
    min-height: 60px
}

.mode-layout small {
    font-size: 12px;
    color: #777
}

.disclosure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: start
}

.disclosure-grid details {
    border: 1px solid #dcdfe5;
    background: white;
    padding: 27px;
    color: var(--navy);
    transition: border-color .35s, box-shadow .35s
}

.disclosure-grid details[open] {
    border-color: var(--red);
    box-shadow: 0 8px 22px #09112509
}

.disclosure-grid summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 17px
}

.disclosure-grid summary::-webkit-details-marker {
    display: none
}

.disclosure-grid summary>.icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px
}

.disclosure-grid summary>.icon img {
    width: 30px;
    height: 30px
}

.disclosure-grid summary strong {
    flex: 1
}

.disclosure-grid details[open] .plus:after {
    transform: rotate(90deg)
}

.disclosure-grid details p {
    font-size: 15px;
    padding-top: 20px;
    margin: 0;
    animation: hero-reveal .4s ease both
}

.resilience-layout .choice-deck {
    grid-template-columns: 1fr 1fr
}

.resilience-art {
    text-align: center;
    padding: 35px;
    position: relative;
    overflow: hidden;
    border: 1px solid #34415a;
    background: #111d33
}

.resilience-art>.icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 35px;
    display: grid;
    place-items: center;
    border: 1px solid #6e3042;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    background: #091125
}

.resilience-art>.icon img {
    width: 48px;
    height: 48px
}

.resilience-art h3 {
    font-size: 29px
}

.resilience-art p {
    max-width: 360px;
    margin: 20px auto 0;
    font-size: 16px
}

.signal-ring {
    position: absolute;
    top: 23px;
    left: calc(50% - 58px);
    width: 116px;
    height: 116px;
    border: 1px solid #cd0b2555;
    border-radius: 50%;
    animation: statusPulse 4s ease-in-out infinite
}

.guest-pass {
    background: var(--navy);
    color: white;
    padding: 38px;
    position: relative;
    border: 8px solid white;
    box-shadow: 0 0 0 1px #d9dce2, 12px 12px 0 #f5f1f2
}

.guest-pass>.icon {
    position: absolute;
    right: 30px;
    top: 30px
}

.guest-pass>span {
    font-size: 11px;
    letter-spacing: 1.7px;
    color: #abb4c6
}

.guest-pass h3 {
    font-size: 34px;
    margin: 28px 0 15px
}

.pass-code {
    font-size: 40px;
    letter-spacing: 8px;
    padding: 10px 0;
    border-block: 1px dashed #ffffff30
}

.guest-pass p {
    color: #ddd;
    font-size: 17px
}

.guest-pass small {
    color: #aeb9cd;
    font-size: 13px
}

.doorfit-layout {
    grid-template-columns: .8fr 1.2fr
}

.doorfit-layout .disclosure-grid {
    grid-template-columns: 1fr;
    gap: 13px
}

.doorfit-layout details {
    background: #142038;
    color: white;
    border-color: #35415a;
    padding: 22px
}

.doorfit-layout details p {
    color: #bbc5d6
}

.door-drawing {
    text-align: center;
    padding: 20px
}

.drawn-door {
    width: 190px;
    height: 285px;
    border: 2px solid #728099;
    outline: 1px solid #49556f;
    outline-offset: 12px;
    margin: 0 auto 40px;
    position: relative;
    transform: perspective(800px) rotateY(-12deg);
    transition: transform .8s
}

.door-drawing:hover .drawn-door {
    transform: perspective(800px) rotateY(-28deg)
}

.drawn-door:before {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px solid #3e4b65
}

.drawn-door span {
    position: absolute;
    right: 15px;
    top: 43%;
    height: 57px;
    width: 18px;
    border: 1px solid var(--red);
    background: #101c32
}

.drawn-door i {
    position: absolute;
    right: 15px;
    top: 51%;
    width: 32px;
    height: 4px;
    background: #d00f2c
}

.door-drawing>b {
    font-size: 22px
}

.navy p.fine-copy {
    color: #afb7c6
}

@keyframes statusPulse {
    50% {
        opacity: .65;
        transform: scale(1.07)
    }
}

@media(min-width:901px) and (max-width:1200px) {
    .header .brand {
        min-width: 215px;
        width: 215px;
        padding: 22px 12px
    }

    .header .brand strong {
        font-size: 28px
    }

    .header nav {
        margin-left: 8px
    }

    .header nav>a,
    .header .services-toggle {
        padding-inline: 12px;
        font-size: 13px
    }

    .plan-card {
        padding: 24px;
        gap: 18px
    }

    .plan-title {
        padding: 23px 15px
    }

    .plan-title h3 {
        font-size: 18px
    }

    .plan-price strong {
        font-size: 55px
    }

    .plan-price small {
        font-size: 12px
    }

    .plan-card li {
        font-size: 14px
    }

    .contact-layout {
        gap: 40px
    }
}

@media(max-width:900px) {
    .header .nav-wrap {
        height: 72px
    }

    .header .brand {
        width: auto;
        min-width: 200px;
        height: 72px;
        min-height: 72px;
        padding: 10px 15px;
        align-self: auto
    }

    .header .brand-mark {
        width: 45px;
        height: 44px
    }

    .header .brand-mark.original-mark img {
        width: 189px;
        height: 44px
    }

    .header .brand strong {
        font-size: 28px
    }

    .header .search-toggle {
        height: 42px;
        width: 42px;
        margin-left: auto;
        margin-right: 15px
    }

    .burger {
        position: relative;
        z-index: 80;
        width: 44px;
        height: 44px;
        border: 1px solid #e3cad0;
        background: var(--red);
        padding: 12px
    }

    .burger span {
        background: white
    }

    .header nav {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        margin: 0;
        padding: 115px 24px 35px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: #091125 url('contours.svg') center/cover;
        overflow: auto;
        z-index: 60;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .35s, transform .4s, visibility .35s
    }

    .header nav.open {
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto
    }

    .header nav>a,
    .header .services-toggle {
        font-size: 23px;
        line-height: 1.5;
        color: white;
        padding: 10px 25px;
        border: 0;
        text-align: center
    }

    .header nav>a[aria-current=page] {
        color: #f43b53
    }

    .header nav .dropdown {
        width: min(100%, 340px);
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .header .dropdown-panel {
        position: static;
        width: 100%;
        background: #16213a;
        box-shadow: none;
        border: 1px solid #39425a;
        padding: 0 15px;
        max-height: 0;
        overflow: hidden;
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: none;
        transition: max-height .4s, opacity .35s, padding .35s
    }

    .header .dropdown.open .dropdown-panel {
        max-height: 210px;
        opacity: 1;
        visibility: visible;
        padding: 10px 15px;
        margin-top: 8px
    }

    .header .dropdown-panel a {
        color: #e5e8ef;
        justify-content: center;
        font-size: 15px;
        padding: 9px
    }

    .menu-open .header .brand {
        z-index: 80
    }

    .menu-open .header .search-toggle {
        visibility: hidden
    }

    .plan-grid {
        gap: 25px
    }

    .plan-card {
        padding: 23px;
        grid-template-columns: 1fr;
        gap: 20px
    }

    .plan-title h3 {
        white-space: normal
    }

    .plan-title {
        min-height: 200px
    }

    .plan-card ul {
        min-height: 270px
    }

    .plan-lead {
        gap: 15px
    }

    .question-content {
        position: static
    }

    .question-photo {
        height: 500px
    }

    .ref-about .split {
        gap: 40px
    }

    .perspective-grid {
        grid-template-columns: 1fr 1fr
    }

    .perspective-heading {
        grid-column: 1/-1
    }

    .journey-layout {
        gap: 35px
    }

    .viewfinder-layout,
    .mode-layout,
    .guest-layout,
    .doorfit-layout,
    .resilience-layout {
        gap: 35px
    }

    .choice-deck {
        gap: 15px
    }

    .choice-tile {
        padding: 22px
    }

    .choice-tile strong {
        font-size: 17px
    }

    .choice-tile>span:last-child {
        font-size: 14px
    }

    .disclosure-grid {
        gap: 15px
    }

    .disclosure-grid details {
        padding: 20px
    }

    .disclosure-grid summary {
        flex-wrap: wrap;
        font-size: 15px
    }

    .compact-heading {
        gap: 30px
    }

    .checklist-strip {
        gap: 30px;
        padding: 25px
    }

    .topic-checks {
        grid-template-columns: 1fr
    }

    .contact-layout {
        grid-template-columns: 1fr 1.15fr;
        gap: 30px
    }

    .contact-layout form {
        padding: 25px
    }

    .contact-layout form h2 {
        font-size: 25px
    }

    #start-here h2 {
        white-space: normal
    }

    #start-here .closing-layout {
        grid-template-columns: 1.2fr 1fr
    }

    #start-here .closing-email {
        margin-left: 0;
        display: block
    }

    .benefit-row article {
        padding: 25px
    }

    .benefit-row h3 {
        font-size: 18px
    }

    .benefit-row article>.icon {
        right: 14px;
        top: 17px;
        width: 36px;
        height: 36px;
        padding: 5px
    }

    .tab-panels {
        padding: 30px
    }
}

@media(max-width:640px) {
    .header .container {
        width: calc(100% - 28px)
    }

    .header .brand {
        min-width: 175px;
        padding: 10px
    }

    .header .brand strong {
        font-size: 25px
    }

    .header .brand small {
        font-size: 8px
    }

    .header .search-toggle {
        margin-right: 10px;
        width: 36px;
        height: 39px
    }

    .burger {
        width: 39px;
        height: 39px;
        padding: 10px
    }

    .heading-motif {
        justify-content: center
    }

    .plan-grid,
    .perspective-grid,
    .journey-layout,
    .viewfinder-layout,
    .mode-layout,
    .guest-layout,
    .doorfit-layout,
    .resilience-layout,
    .checklist-strip,
    .contact-layout {
        grid-template-columns: 1fr
    }

    .plan-card {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        padding: 18px
    }

    .plan-title {
        padding: 20px 12px;
        min-height: 170px
    }

    .plan-title h3 {
        font-size: 17px
    }

    .plan-price {
        flex-wrap: wrap;
        gap: 2px
    }

    .plan-price strong {
        font-size: 48px
    }

    .plan-price small {
        font-size: 12px
    }

    .plan-price small:last-child {
        width: 100%;
        padding-left: 14px
    }

    .plan-lead>a {
        font-size: 14px;
        padding: 14px 5px
    }

    .plan-card li {
        font-size: 12px;
        padding: 10px 0;
        gap: 7px
    }

    .plan-card li .icon,
    .plan-card li .icon img {
        width: 16px;
        height: 16px;
        flex-basis: 16px
    }

    .plan-card ul {
        min-height: 0
    }

    .price-rule {
        width: 60px;
        margin-bottom: 14px
    }

    .question-photo {
        height: 300px;
        min-height: 0
    }

    .question-content {
        padding: 22px 15px
    }

    #start-here .closing-layout {
        grid-template-columns: 1fr;
        gap: 15px
    }

    #start-here .closing-layout>div:first-child {
        padding: 0;
        border: 0;
        text-align: center
    }

    #start-here .closing-illustration {
        height: 220px
    }

    #start-here .closing-email {
        margin-top: 15px
    }

    .ref-about .about-image {
        height: 330px
    }

    .perspective-grid article {
        padding: 28px 25px 55px
    }

    .perspective-heading {
        grid-column: auto
    }

    .journey-layout>div:first-child {
        text-align: center
    }

    .purpose-caption {
        text-align: left;
        font-size: 13px
    }

    .choice-deck {
        grid-template-columns: 1fr
    }

    .choice-tile {
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: 10px 18px;
        padding: 21px
    }

    .choice-tile>.icon {
        grid-row: 1/3;
        width: 38px;
        height: 38px
    }

    .choice-tile>.icon img {
        width: 34px;
        height: 34px
    }

    .choice-tile>span:last-child {
        grid-column: 2
    }

    .choice-response {
        min-height: 65px;
        font-size: 14px
    }

    .compact-heading {
        display: block;
        text-align: center
    }

    .disclosure-grid {
        grid-template-columns: 1fr
    }

    .disclosure-grid summary {
        flex-wrap: nowrap
    }

    .viewfinder-layout>div:first-child,
    .guest-layout>div:first-child {
        text-align: center
    }

    .viewfinder-photo {
        height: 290px
    }

    .viewfinder-frame span {
        font-size: 10px
    }

    .mode-visual {
        height: 300px
    }

    .mode-layout>div:last-child {
        text-align: center
    }

    .mode-switches,
    .duration-picker {
        justify-content: center
    }

    .checklist-strip {
        padding: 24px;
        text-align: center
    }

    .topic-checks {
        grid-template-columns: 1fr 1fr
    }

    .topic-checks label {
        font-size: 12px;
        text-align: left;
        padding: 12px;
        gap: 8px
    }

    .topic-output {
        text-align: left
    }

    .resilience-layout .choice-deck {
        grid-template-columns: 1fr
    }

    .guest-pass {
        padding: 30px 24px
    }

    .guest-pass h3 {
        font-size: 30px
    }

    .door-drawing {
        padding-top: 20px
    }

    .drawn-door {
        height: 220px;
        width: 145px
    }

    .contact-layout form {
        padding: 26px 20px;
        box-shadow: 5px 5px 0 #f5f2f3
    }

    .contact-layout .form-grid {
        grid-template-columns: 1fr;
        gap: 0
    }

    .contact-layout form h2 {
        font-size: 26px
    }

    .benefit-row h3,
    .tab-panels h3,
    .coverage-copy h3 {
        text-align: left
    }

    .benefit-row article {
        text-align: left
    }

    .tab-panels,
    .coverage-copy {
        padding: 25px
    }

    .tab-panels [role=tabpanel]>.icon,
    .coverage-copy>.outline-icon {
        top: 18px;
        right: 16px;
        width: 36px;
        height: 36px;
        padding: 5px
    }

    .range-label {
        text-align: left
    }
}

@media(prefers-reduced-motion:reduce) {

    .status-orbit span,
    .signal-ring,
    .disclosure-grid details p {
        animation: none
    }

    .drawn-door,
    .choice-tile {
        transition: none
    }
}

.btn,
button,
input,
select,
textarea {
    border-radius: 4px
}

.header .nav-wrap {
    height: 66px
}

.header .brand {
    height: 90px;
    min-height: 90px;
    padding-block: 16px
}

.header .search-toggle {
    height: 64px
}

.header nav>a,
.header .services-toggle {
    padding-block: 7px
}

.dropdown {
    position: relative
}

.dropdown:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 22px
}

.dropdown-panel {
    top: 100%;
    margin-top: 12px;
    transition: opacity .25s, visibility .25s, transform .25s
}

.heading-motif .icon {
    margin: 0 !important
}

.portrait-note>.icon {
    display: grid;
    place-items: center;
    padding: 0;
    margin: 0;
    line-height: 1
}

.portrait-note>.icon img {
    display: block;
    margin: 0;
    object-fit: contain;
    transform: none;
    width: 19px;
    height: 19px
}

.portrait-note {
    padding-left: 42px;
    padding-right: 15px
}

.price-example {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1px;
    color: #b8c0d1;
    margin-bottom: 2px
}

#quiet-confidence h2,
#home-notes h2 {
    font-size: clamp(26px, 2.75vw, 42px)
}

.perspective-grid article {
    padding: 26px 27px 58px;
    border: 1px solid #d9b4be;
    border-top: 4px solid var(--red);
    border-right: 5px solid var(--navy);
    box-shadow: 6px 6px 0 #f1e7ea;
    min-height: 240px
}

.perspective-grid article h3 {
    font-size: 23px;
    margin-bottom: 15px
}

.perspective-grid article p {
    margin-bottom: 0
}

.outline-word {
    display: flex;
    width: max-content;
    bottom: 0;
    left: 0;
    font-size: 29px;
    line-height: 1.6;
    opacity: .14;
    font-weight: 900;
    animation: perspective-run 15s linear infinite;
    animation-play-state: paused
}

.outline-word>span {
    display: block;
    padding-right: 20px
}

.perspective-grid article:hover .outline-word,
.perspective-grid article:focus-visible .outline-word {
    animation-play-state: running;
    opacity: .3
}

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

.journey-layout>div:first-child {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 55px;
    align-items: center
}

.journey-layout .section-head {
    margin-bottom: 10px
}

.journey-stages .disclosure-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
}

.journey-stages details {
    padding: 20px;
    border: 1px solid #dcd8df;
    border-bottom: 3px solid #cd0b25;
    background: white;
    box-shadow: 0 7px 22px #09112506
}

.journey-stages summary {
    font-size: 16px;
    gap: 12px
}

.journey-stages summary>.icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px
}

.journey-stages summary>.icon img {
    width: 26px;
    height: 26px
}

.disclosure-grid details p {
    animation: none;
    padding-top: 16px;
    line-height: 1.6
}

.disclosure-grid details,
.contact-detail-grid details {
    interpolate-size: allow-keywords
}

.disclosure-grid summary:focus-visible,
.contact-detail-grid summary:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 6px
}

.values-grid article {
    padding: 25px 27px;
    overflow: hidden;
    isolation: isolate;
    min-height: 240px;
    border: 1px solid #39465d;
    border-bottom: 3px solid var(--red)
}

.values-grid article>.icon {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 37px;
    height: 37px;
    margin: 0;
    z-index: 2
}

.values-grid article>.icon img {
    width: 30px;
    height: 30px
}

.values-grid article h3 {
    padding-right: 47px;
    font-size: 22px;
    min-height: 38px;
    position: relative;
    z-index: 2
}

.values-grid article p {
    font-size: 15px;
    position: relative;
    z-index: 2
}

.value-photo {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -2;
    clip-path: inset(100% 0 0);
    transition: clip-path .8s cubic-bezier(.22, 1, .36, 1);
    filter: brightness(.3)
}

.values-grid article:hover .value-photo,
.values-grid article:focus-visible .value-photo {
    clip-path: inset(0)
}

.values-grid article:hover,
.values-grid article:focus-visible {
    transform: none;
    background: #141e34
}

.values-grid article:hover p {
    color: white
}

.contact-layout {
    grid-template-columns: 1fr minmax(0, 590px);
    max-width: 1200px;
    gap: 80px
}

.contact-layout form {
    padding: 30px;
    border-radius: 6px;
    border: 1px solid #e1d6da;
    border-top: 4px solid var(--red);
    box-shadow: 9px 9px 0 #f1e8eb, 0 18px 40px #09112509
}

.contact-layout form h2 {
    font-size: 28px
}

.contact-layout form>p {
    margin-bottom: 22px
}

.service-field-row {
    grid-template-columns: minmax(190px, .95fr) minmax(0, 1fr)
}

.service-field {
    position: relative
}

.native-service {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    padding: 0 !important;
    pointer-events: none
}

.service-select {
    position: relative;
    margin-top: 8px
}

.select-trigger {
    position: relative;
    width: 100%;
    min-height: 52px;
    text-align: left;
    background: #faf9f9;
    border: 1px solid #dfe1e5;
    color: var(--navy);
    padding: 13px 34px 13px 14px;
    font: 400 15px 'Nunito', sans-serif;
    transition: border-color .3s, box-shadow .3s
}

.select-trigger:after {
    content: '';
    position: absolute;
    right: 16px;
    top: 20px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    transform: rotate(45deg);
    transition: transform .3s
}

.select-trigger[aria-expanded=true]:after {
    transform: rotate(225deg);
    top: 24px
}

.select-trigger:focus-visible,
.select-trigger.invalid {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px #cd0b2510
}

.select-choices {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(320px, 80vw);
    padding: 7px;
    background: white;
    border: 1px solid #e4d7dc;
    border-top: 3px solid var(--red);
    box-shadow: 0 15px 35px #09112520;
    z-index: 8;
    border-radius: 4px
}

.select-choices button {
    display: block;
    width: 100%;
    padding: 10px 13px;
    background: white;
    text-align: left;
    font-size: 14px;
    white-space: normal;
    transition: background .25s, color .25s
}

.select-choices button:hover,
.select-choices button:focus-visible,
.select-choices button[aria-selected=true] {
    background: #f5e9ed;
    color: #b90821;
    outline: none
}

.select-choices[hidden] {
    display: none
}

.contact-details {
    padding-top: 10px
}

.contact-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px
}

.contact-detail-grid details {
    background: #fff;
    border: 1px solid #d9dce3;
    border-top: 4px solid var(--navy);
    padding: 25px;
    box-shadow: 5px 5px 0 #f5f1f3;
    transition: border-color .35s, box-shadow .35s;
    align-self: start
}

.contact-detail-grid details:hover,
.contact-detail-grid details[open] {
    border-top-color: var(--red);
    box-shadow: 7px 7px 0 #f3e5e9
}

.contact-detail-grid summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer
}

.contact-detail-grid summary::-webkit-details-marker {
    display: none
}

.contact-detail-grid summary>.icon {
    width: 31px;
    height: 31px;
    flex-basis: 31px
}

.contact-detail-grid summary>.icon img {
    width: 28px;
    height: 28px
}

.contact-detail-grid summary strong {
    font: 700 18px 'Montserrat Alternates', sans-serif;
    flex: 1
}

.contact-detail-grid p {
    font-size: 15px;
    line-height: 1.6;
    margin: 18px 0 0
}

.contact-detail-extra {
    border-top: 1px solid #e4dfe3;
    margin-top: 18px
}

.contact-detail-grid details[open] .plus:after {
    transform: rotate(90deg)
}

.benefit-row article {
    border: 1px solid #cdb7c0;
    border-top: 3px solid var(--red);
    border-right: 4px solid #101b30;
    box-shadow: 5px 5px 0 #f3e8ec
}

.preparation {
    padding: 50px 0
}

.preparation-grid {
    gap: 27px
}

.preparation-grid article {
    padding: 27px;
    border: 1px solid #d6c9d0;
    border-left: 4px solid var(--red);
    box-shadow: 7px 7px 0 #f4edf0;
    position: relative;
    text-align: left
}

.preparation-grid article>.icon {
    position: absolute;
    top: 22px;
    right: 20px;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 6px;
    border: 1px solid #ead9df;
    background: #fff
}

.preparation-grid article>.icon img {
    width: 26px;
    height: 26px
}

.preparation-grid article h3 {
    font-size: 21px;
    padding-right: 42px;
    min-height: 54px
}

.preparation-grid article p {
    margin: 12px 0 0;
    font-size: 16px
}

.preparation-grid .small-rule {
    display: none
}

.preparation-grid article:hover {
    box-shadow: 7px 7px 0 #ecdae2;
    transform: translateY(-3px)
}

.service-slider {
    padding: 55px 0
}

.viewfinder-section {
    background: #f8f6f7
}

.viewfinder-layout {
    gap: 50px;
    grid-template-columns: .9fr 1.1fr
}

.frame-presets {
    display: flex;
    gap: 8px;
    margin: 25px 0
}

.frame-presets button {
    padding: 11px 17px;
    border: 1px solid #d9d0d5;
    background: white;
    font-size: 14px;
    transition: background .3s, color .3s
}

.frame-presets button.active {
    background: var(--navy);
    color: white;
    border-color: var(--navy)
}

.viewfinder-photo {
    height: 410px;
    border: 7px solid white;
    padding: 0;
    box-shadow: 0 0 0 1px #d9d4d9, 8px 8px 0 #e9e2e7;
    cursor: crosshair;
    touch-action: pan-y
}

.viewfinder-photo:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 5px
}

.viewfinder-frame {
    transition: width .2s, height .2s;
    box-shadow: 0 0 0 500px #09112585;
    pointer-events: none;
    border: 1px solid #ffffffab
}

.viewfinder-frame:before,
.viewfinder-frame:after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 3px solid white;
    clip-path: polygon(0 0, 18% 0, 18% 2%, 2% 2%, 2% 18%, 0 18%, 0 0, 100% 0, 100% 18%, 98% 18%, 98% 2%, 82% 2%, 82% 0, 100% 0, 100% 100%, 82% 100%, 82% 98%, 98% 98%, 98% 82%, 100% 82%, 100% 100%, 0 100%, 0 82%, 2% 82%, 2% 98%, 18% 98%, 18% 100%, 0 100%)
}

.viewfinder-frame span {
    font-size: 11px;
    top: 9px;
    left: 9px;
    white-space: nowrap;
    max-width: calc(100% - 18px);
    overflow: hidden;
    text-overflow: ellipsis
}

.viewfinder-frame i {
    background: #ffffff20;
    border: 1px solid white
}

.recording-section {
    padding: 45px 0
}

.recording-section .compact-heading {
    margin-bottom: 12px
}

.recording-section .section-head {
    margin-bottom: 15px
}

.recording-section .choice-tile {
    padding: 24px;
    gap: 12px;
    border: 1px solid #45516a;
    border-bottom: 3px solid #cd0b25;
    overflow: hidden;
    transition: background .4s, transform .4s, box-shadow .4s
}

.recording-section .choice-tile>.icon {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 35px;
    height: 35px;
    background: #0b1428;
    padding: 6px;
    border-radius: 4px;
    transition: background .4s
}

.recording-section .choice-tile>.icon img {
    width: 25px;
    height: 25px
}

.recording-section .choice-tile strong {
    padding-right: 40px;
    font-size: 19px;
    min-height: 37px
}

.recording-section .choice-tile>span:last-child {
    font-size: 15px
}

.recording-section .choice-tile:hover,
.recording-section .choice-tile:focus-visible {
    background: #202d47;
    box-shadow: 0 12px 25px #0002;
    transform: translateY(-4px)
}

.recording-section .choice-tile:hover>.icon {
    background: var(--red)
}

.recording-section .choice-tile:hover>.icon img {
    filter: brightness(0) invert(1)
}

.recording-section .choice-response {
    min-height: 0;
    margin-top: 17px;
    padding-block: 4px
}

.faq-editorial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: start
}

.faq-thumbnails {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 22px 0
}

.faq-thumbnails img {
    height: 145px;
    width: 100%;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: 0 0 0 1px #dfdbe0
}

.faq-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.faq-columns p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0
}

.faq-compact {
    padding: 12px 24px;
    background: white;
    border: 1px solid #ddd5dc;
    border-top: 3px solid var(--red);
    box-shadow: 7px 7px 0 #ebe3e8
}

.faq-compact .faq-item button {
    font-size: 16px;
    padding: 17px 0;
    gap: 15px
}

.faq-compact .answer p {
    font-size: 15px;
    padding: 0 0 17px
}

.faq-compact .faq-list {
    border: 0
}

.faq-compact .faq-item:last-child {
    border-bottom: 0
}

[data-title].revealed {
    animation: none
}

h1,
h2,
h3 {
    overflow-wrap: normal
}

.hero-v2 h1 strong {
    display: block
}

.legal-hero {
    background: #091125 url('contours.svg') center/cover;
    padding: 65px 0
}

.legal-hero:before,
.legal-hero:after {
    display: none
}

.legal-content {
    padding-top: 55px
}

.legal-layout {
    grid-template-columns: 270px 1fr;
    gap: 45px;
    align-items: start
}

.legal-layout aside {
    background: #101a2d;
    color: white;
    border-top: 3px solid var(--red);
    padding: 15px;
    box-shadow: 7px 7px 0 #f0e9ec
}

.legal-layout aside a {
    color: #d7dce5;
    font-size: 14px;
    border-bottom: 1px solid #ffffff15;
    padding: 12px 10px;
    transition: background .3s, color .3s
}

.legal-layout aside a:hover,
.legal-layout aside a:focus-visible {
    background: #253047;
    color: white
}

.legal-layout article {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.legal-layout article>div {
    padding: 25px;
    border: 1px solid #e1dce2;
    border-top: 3px solid #111d31;
    margin: 0;
    background: #fdfcfd;
    scroll-margin-top: 95px;
    transition: border-color .35s, box-shadow .35s
}

.legal-layout article>div:hover {
    border-top-color: var(--red);
    box-shadow: 0 9px 25px #09112507
}

.legal-layout article>div:first-child {
    grid-column: 1/-1;
    background: #f7f2f4;
    border-left: 4px solid var(--red)
}

.legal-layout article h2 {
    font-size: 23px;
    margin: 0 0 15px
}

.legal-layout article p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0
}

.legal-layout article>div:target {
    border-color: var(--red);
    background: #fbf3f6
}

@keyframes letter-arrival {
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0)
    }
}

@keyframes perspective-run {
    to {
        transform: translateX(-50%)
    }
}

@media(max-width:1000px) {
    .faq-editorial {
        gap: 32px
    }

    .journey-stages .disclosure-grid {
        gap: 14px
    }

    .journey-stages summary {
        flex-wrap: wrap
    }

    .contact-layout {
        gap: 35px;
        grid-template-columns: 1fr 1.3fr
    }

    .service-field-row {
        grid-template-columns: 1fr
    }

    .legal-layout {
        grid-template-columns: 220px 1fr;
        gap: 25px
    }

    .legal-layout article {
        grid-template-columns: 1fr
    }

    .legal-layout article>div:first-child {
        grid-column: auto
    }

    .viewfinder-layout {
        gap: 30px
    }

    .perspective-grid article {
        min-height: 220px
    }

    .journey-layout>div:first-child {
        grid-template-columns: 1fr;
        gap: 0
    }
}

@media(max-width:900px) {
    .header .nav-wrap {
        height: 62px
    }

    .header .brand {
        height: 62px;
        min-height: 62px;
        padding-block: 8px
    }

    .header .search-toggle {
        height: 39px
    }

    .dropdown:after {
        display: none
    }

    .header .dropdown-panel {
        margin-top: 0
    }

    .contact-layout {
        grid-template-columns: 1fr 1.3fr
    }

    .contact-detail-grid {
        gap: 15px
    }

    .contact-detail-grid details {
        padding: 20px
    }

    .contact-detail-grid summary {
        flex-wrap: wrap
    }

    .journey-stages .disclosure-grid {
        grid-template-columns: 1fr
    }

    .journey-stages summary {
        flex-wrap: nowrap
    }

    .perspective-grid article h3 {
        font-size: 21px
    }

    .faq-columns {
        gap: 15px
    }
}

@media(max-width:640px) {
    .header .brand {
        min-width: 170px
    }

    .header .brand strong {
        font-size: 24px
    }

    .header .brand-mark {
        height: 39px;
        width: 42px
    }

    .header .brand-mark.original-mark img {
        height: 39px;
        width: 167px
    }

    .portrait-note {
        padding-left: 32px
    }

    .portrait-note>.icon {
        left: 10px
    }

    .perspective-grid article {
        min-height: 0;
        padding: 24px 24px 60px
    }

    .journey-layout h2 {
        font-size: 27px
    }

    .values-grid article {
        min-height: 0;
        padding: 23px
    }

    .values-grid article h3 {
        font-size: 21px
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .contact-layout form {
        padding: 25px 20px;
        max-width: 100%;
        margin: auto
    }

    .contact-detail-grid {
        grid-template-columns: 1fr
    }

    .contact-detail-grid summary {
        flex-wrap: nowrap
    }

    .service-field-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important
    }

    .service-field-row input {
        font-size: 14px !important
    }

    .select-trigger {
        font-size: 14px;
        padding-left: 10px
    }

    .select-choices {
        max-width: calc(100vw - 64px);
        min-width: 220px
    }

    .faq-editorial {
        grid-template-columns: 1fr
    }

    .faq-thumbnails img {
        height: 125px
    }

    .faq-columns {
        gap: 18px
    }

    .faq-compact {
        padding: 8px 19px
    }

    .viewfinder-layout {
        grid-template-columns: 1fr
    }

    .viewfinder-photo {
        height: 300px
    }

    .frame-presets {
        justify-content: center;
        flex-wrap: wrap
    }

    .recording-section {
        padding: 35px 0
    }

    .recording-section .choice-tile {
        display: flex;
        padding: 21px;
        gap: 8px
    }

    .recording-section .choice-tile strong {
        min-height: 30px
    }

    .recording-section .choice-tile>span:last-child {
        grid-column: auto
    }

    .preparation-grid article {
        padding: 24px
    }

    .legal-layout {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .legal-layout aside {
        position: static
    }

    .legal-layout aside nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px
    }

    .legal-layout aside a {
        font-size: 13px;
        padding: 9px
    }

    .legal-layout article>div {
        padding: 22px
    }

    .legal-layout article h2 {
        font-size: 23px
    }

    .legal-hero {
        padding: 50px 0
    }

    .viewfinder-frame span {
        font-size: 10px
    }

    .contact-details {
        padding-top: 5px
    }
}

@media(prefers-reduced-motion:reduce) {
    .outline-word {
        animation: none
    }

    .value-photo {
        transition: none
    }

    .viewfinder-frame {
        transition: none
    }
}

.contact-detail-copy {
    flex: 1;
    display: block
}

.contact-detail-copy strong {
    display: block
}

.contact-detail-copy .detail-lead {
    display: block;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
    margin-top: 15px;
    color: #747782
}

.contact-detail-grid summary {
    align-items: flex-start
}

.contact-detail-grid summary>.icon {
    margin-top: 3px
}

.contact-detail-grid .plus {
    margin-top: 4px
}

.contact-detail-extra p {
    margin-top: 14px
}

.contact-detail-grid summary strong {
    line-height: 1.45
}

.legal-layout aside {
    top: 90px
}

.select-choices button {
    font-family: inherit
}

.hero h1 {
    display: block;
    width: auto;
    max-width: 100%;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
    writing-mode: horizontal-tb
}

.hero h1 strong {
    display: block;
    font: inherit;
    letter-spacing: inherit;
    animation: none
}

.hero h1 span {
    display: inline;
    font: inherit;
    letter-spacing: inherit;
    margin: 0
}

.hero-copy {
    min-width: 0
}

.service-banner {
    height: auto;
    min-height: 540px;
    overflow: hidden;
    margin-bottom: 0
}

.service-banner .hero-content {
    padding: 100px 0 80px
}

.service-banner .hero-copy {
    width: 100%;
    max-width: 1000px
}

.service-banner h1 {
    font-size: clamp(48px, 6.4vw, 100px);
    line-height: 1.12;
    margin-bottom: 22px
}

.service-banner .hero-copy p {
    max-width: 660px
}

.hero-v2 .hero-content {
    min-width: 0
}

.hero-v2 h1 {
    font-size: clamp(48px, 7vw, 108px)
}

.faq-item h3 {
    display: block;
    margin: 0;
    line-height: 1.45
}

.faq-item h3>button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    text-align: left;
    line-height: 1.5;
    width: 100%;
    white-space: normal
}

.faq-item .faq-label {
    display: block;
    flex: 1;
    min-width: 0;
    font: inherit;
    letter-spacing: normal;
    word-spacing: normal;
    white-space: normal
}

.faq-item .plus {
    flex: 0 0 16px;
    margin: 0
}

.benefit-row h3 {
    display: block;
    min-height: 0;
    padding-right: 55px;
    line-height: 1.4;
    white-space: normal;
    word-spacing: normal;
    margin-bottom: 15px
}

.benefit-row article {
    display: block;
    padding: 28px;
    border: 1px solid #cdb7c0 !important;
    border-top: 3px solid var(--red) !important;
    border-right: 4px solid #101b30 !important;
    min-width: 0
}

.benefit-row article>.icon {
    position: absolute;
    top: 19px;
    right: 18px;
    margin: 0
}

.benefit-row p {
    line-height: 1.65
}

.questions-frame {
    align-items: start
}

.question-photo {
    height: 540px
}

.question-content {
    padding-top: 26px
}

.faq-compact .faq-item button {
    padding: 17px 0
}

.hero h1,
.section-head h2,
.benefit-row h3 {
    text-wrap: pretty
}

@media(max-width:900px) {
    .service-banner {
        min-height: 470px
    }

    .service-banner .hero-content {
        padding: 90px 0 65px
    }

    .service-banner h1 {
        font-size: clamp(44px, 7.8vw, 74px)
    }

    .hero-v2 h1 {
        font-size: clamp(45px, 8.3vw, 80px)
    }
}

@media(max-width:640px) {
    .service-banner {
        min-height: 440px
    }

    .service-banner .hero-content {
        padding: 76px 0 45px
    }

    .service-banner h1 {
        font-size: clamp(34px, 8.7vw, 54px);
        line-height: 1.14
    }

    .hero-v2 h1 {
        font-size: clamp(34px, 8.6vw, 54px);
        line-height: 1.14
    }

    .service-banner .hero-copy p {
        max-width: 100%;
        font-size: 16px
    }

    .benefit-row article {
        display: block;
        padding: 23px
    }

    .benefit-row h3 {
        font-size: 20px;
        padding-right: 48px;
        margin-bottom: 12px
    }

    .benefit-row p {
        font-size: 15px
    }

    .question-photo {
        height: 300px;
        min-height: 0
    }

    .question-content {
        padding: 22px 15px
    }

    .faq-item h3>button {
        gap: 15px
    }

    .faq-item .faq-label {
        font-size: 15px
    }

    .hero h1 {
        letter-spacing: -.035em
    }
}

.explorer-section,
.panorama-section,
.context-section,
.brief-ribbon-section,
.zone-view-section,
.protection-plans-section,
.camera-perspectives-section,
.camera-questions-section,
.alarm-foundations-section,
.alarm-conversations-section,
.access-details-section,
.access-decisions-section {
    padding: 52px 0
}

.section+.section {
    scroll-margin-top: 82px
}

.service-explorer {
    display: flex;
    gap: 14px;
    align-items: stretch;
    min-height: 340px
}

.explorer-panel {
    flex: 0 0 90px;
    min-width: 0;
    background: #f7f4f5;
    border: 1px solid #d7c9d0;
    border-top: 3px solid var(--red);
    transition: flex-basis .65s var(--ease), flex-grow .65s var(--ease), background .4s;
    overflow: hidden;
    border-radius: 4px
}

.explorer-panel.is-open {
    flex: 1 1 0;
    background: white
}

.explorer-panel h3 {
    margin: 0;
    font-size: 22px
}

.explorer-toggle {
    width: 100%;
    padding: 22px;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
    font: 700 21px 'Montserrat Alternates', sans-serif;
    min-height: 76px
}

.explorer-toggle>.icon {
    width: 31px;
    height: 31px;
    margin: 0
}

.explorer-toggle>.icon img {
    width: 29px;
    height: 29px
}

.explorer-toggle>.plus {
    margin-left: auto;
    flex: 0 0 16px
}

.explorer-panel:not(.is-open) .explorer-toggle {
    writing-mode: vertical-rl;
    height: 100%;
    justify-content: flex-start;
    min-height: 330px;
    padding: 24px 19px
}

.explorer-panel:not(.is-open) .explorer-toggle>.plus {
    margin: 20px 0 0
}

.explorer-panel.is-open .plus:after {
    transform: rotate(90deg)
}

.explorer-detail {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    padding: 0 22px;
    transition: opacity .3s, visibility .3s, max-height .6s
}

.is-open .explorer-detail {
    opacity: 1;
    visibility: visible;
    max-height: 340px;
    padding-bottom: 22px;
    transition: opacity .5s .15s, visibility .3s, max-height .6s
}

.explorer-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.explorer-photos img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 3px
}

.explorer-description {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 25px;
    align-items: center;
    padding-top: 18px
}

.explorer-description p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0
}

.explorer-description .btn {
    padding: 12px 24px;
    min-height: 47px
}

.panorama {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 5px;
    background: var(--navy)
}

.panorama-images {
    position: absolute;
    inset: 0;
    z-index: -2
}

.panorama-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .75s ease;
    filter: brightness(.55)
}

.panorama-image.current {
    opacity: 1
}

.panorama-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 390px
}

.panorama-grid>button {
    position: relative;
    padding: 35px 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 14px;
    color: white;
    background: #0911251c;
    border-right: 1px solid #ffffff55;
    border-bottom: 4px solid transparent;
    text-align: left;
    transition: background .55s, border-color .55s
}

.panorama-grid>button:last-child {
    border-right: 0
}

.panorama-grid>button.active,
.panorama-grid>button:hover,
.panorama-grid>button:focus-visible {
    background: #09112569;
    border-bottom-color: var(--red)
}

.panorama-grid>button>span {
    font-size: 14px;
    color: #d8dce7
}

.panorama-grid strong {
    font: 700 25px/1.3 'Montserrat Alternates', sans-serif;
    max-width: 220px
}

.panorama-grid p {
    font-size: 16px;
    color: #e0e4ed;
    margin: 0;
    line-height: 1.55;
    min-height: 75px
}

.panorama-grid .icon {
    width: 37px;
    height: 37px;
    margin-top: 6px
}

.panorama-grid .icon img {
    filter: brightness(0) invert(1);
    width: 30px;
    height: 30px
}

.context-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.context-collage {
    height: 420px;
    position: relative;
    padding-right: 70px;
    padding-bottom: 40px
}

.context-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px
}

.context-inset {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 48%;
    height: 57%;
    object-fit: cover;
    border: 7px solid white;
    box-shadow: 0 4px 25px #09112514
}

.context-seal {
    position: absolute;
    top: 25px;
    left: -15px;
    background: var(--navy);
    color: white;
    padding: 20px;
    font-size: 14px;
    line-height: 1.5;
    border-left: 3px solid var(--red)
}

.context-seal .icon {
    display: block;
    width: 34px;
    height: 34px;
    margin-bottom: 12px
}

.context-seal .icon img {
    width: 30px;
    height: 30px
}

.context-layout .section-head {
    margin-bottom: 23px
}

.context-layout p {
    font-size: 16px
}

.context-points {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0
}

.context-points button {
    background: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 8px;
    border: 1px solid transparent;
    transition: background .3s, border-color .3s;
    font-size: 16px
}

.context-points button:hover,
.context-points button:focus-visible {
    background: #f8eff2;
    border-color: #ddc3cc
}

.context-points .icon {
    width: 25px;
    height: 25px
}

.context-points .icon img {
    width: 23px;
    height: 23px
}

.brief-ribbon {
    display: grid;
    grid-template-columns: 1.35fr repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
    border-block: 1px solid #e5dfe3;
    padding: 30px 0
}

.brief-ribbon .section-head {
    margin: 0
}

.brief-ribbon h2 {
    font-size: 29px
}

.brief-ribbon .heading-motif {
    display: none
}

.brief-ribbon .section-head p {
    font-size: 15px;
    margin: 15px 0 0
}

.brief-ribbon>a {
    position: relative;
    padding: 22px;
    border: 1px solid #e1d7dc;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .4s, background .4s
}

.brief-ribbon>a:hover {
    transform: translateY(-4px);
    background: #f8eff2
}

.brief-ribbon>a .icon {
    width: 30px;
    height: 30px
}

.brief-ribbon>a .icon img {
    width: 28px;
    height: 28px
}

.brief-ribbon strong {
    font: 700 18px 'Montserrat Alternates', sans-serif
}

.brief-ribbon p {
    font-size: 15px;
    line-height: 1.5;
    margin: 0
}

.camera-console {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    background: #0b1428;
    border: 7px solid #111c31;
    box-shadow: 0 0 0 1px #d9dce2;
    border-radius: 5px;
    overflow: hidden
}

.console-screen {
    position: relative;
    min-height: 400px;
    overflow: hidden;
    isolation: isolate
}

.console-visual {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden
}

.console-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .65s, transform .4s;
    filter: brightness(.78);
    transform: scale(var(--console-zoom, 1))
}

.console-image.current {
    opacity: 1
}

.console-tag {
    position: absolute;
    left: 22px;
    top: 20px;
    color: white;
    background: #091125ba;
    border: 1px solid #ffffff40;
    padding: 6px 10px;
    font-size: 12px;
    letter-spacing: 1px
}

.console-reticle {
    position: absolute;
    inset: 70px 27% 120px;
    border: 1px solid #ffffff65;
    pointer-events: none;
    transition: transform .5s
}

.console-reticle:before,
.console-reticle:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff9;
    width: 20px;
    height: 1px;
    transform: translate(-50%, -50%)
}

.console-reticle:after {
    width: 1px;
    height: 20px
}

.console-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 23px 27px;
    background: #091125ce;
    color: white
}

.console-caption strong {
    font: 700 21px 'Montserrat Alternates', sans-serif
}

.console-caption p {
    font-size: 15px;
    line-height: 1.55;
    color: #d1d7e2;
    margin: 9px 0 0;
    max-width: 700px
}

.console-controls {
    padding: 27px 23px;
    color: white;
    display: flex;
    flex-direction: column
}

.console-brand {
    display: flex;
    gap: 12px;
    align-items: center;
    font: 700 16px 'Montserrat Alternates', sans-serif;
    margin-bottom: 22px
}

.console-brand .icon {
    width: 31px;
    height: 31px
}

.console-brand .icon img {
    width: 28px;
    height: 28px
}

.console-zones {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.console-zones button {
    padding: 12px 14px;
    background: #17233c;
    border: 1px solid #34415b;
    color: #eef1f6;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    transition: background .3s, border-color .3s;
    font-size: 15px
}

.console-zones button.active {
    border-left: 3px solid var(--red);
    background: #26324b
}

.zone-status {
    font-size: 12px;
    color: #b0bbce
}

.console-zoom {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    font-size: 14px;
    margin-top: 25px
}

.console-zoom input {
    grid-column: 1/-1;
    accent-color: var(--red);
    width: 100%;
    margin: 0;
    cursor: ew-resize
}

.console-footnote {
    font-size: 12px;
    color: #9eabc1;
    line-height: 1.5;
    margin: 20px 0 0
}

.protection-tabs {
    border: 1px solid #d7ccd4;
    background: white;
    box-shadow: 7px 7px 0 #f5edf1;
    border-radius: 4px;
    overflow: hidden
}

.protection-tablist {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid #d7ccd4
}

.protection-tablist button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    background: #f9f7f8;
    border-right: 1px solid #e0d7dc;
    border-bottom: 3px solid transparent;
    font: 700 17px 'Montserrat Alternates', sans-serif;
    border-radius: 0;
    transition: background .35s, color .35s
}

.protection-tablist button:last-child {
    border-right: 0
}

.protection-tablist button[aria-selected=true] {
    background: var(--navy);
    color: white;
    border-bottom-color: var(--red)
}

.protection-tablist .icon {
    width: 27px;
    height: 27px
}

.protection-tablist .icon img {
    width: 25px;
    height: 25px
}

.protection-panel {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    min-height: 340px
}

.protection-panel[hidden] {
    display: none
}

.protection-photo {
    padding: 9px;
    overflow: hidden
}

.protection-photo img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    border-radius: 2px;
    transition: transform .8s
}

.protection-photo:hover img {
    transform: scale(1.035)
}

.protection-copy {
    padding: 30px
}

.protection-copy h2 {
    font-size: 31px;
    margin-bottom: 14px
}

.protection-copy>p {
    font-size: 16px;
    margin-bottom: 23px
}

.protection-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 22px
}

.protection-points>div {
    border-top: 2px solid #cd0b25;
    padding-top: 14px
}

.protection-points h3 {
    font-size: 16px;
    margin-bottom: 10px
}

.protection-points p {
    font-size: 15px;
    line-height: 1.55;
    margin: 0
}

.protection-copy>.text-link {
    font-size: 15px
}

.photo-mosaic {
    display: grid;
    grid-template-columns: .65fr .65fr 1fr;
    grid-template-rows: 185px 185px;
    gap: 17px
}

.photo-mosaic>button {
    position: relative;
    overflow: hidden;
    padding: 0;
    text-align: left;
    background: var(--navy);
    border: 4px solid white;
    box-shadow: 0 0 0 1px #e0d6dd
}

.photo-mosaic>button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s, filter .5s
}

.photo-mosaic>button>span {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 5px 10px;
    background: #091125d9;
    color: white;
    font-size: 14px
}

.photo-mosaic>button:hover img,
.photo-mosaic>button:focus-visible img {
    transform: scale(1.07);
    filter: brightness(.75)
}

.photo-mosaic>button:nth-child(3) {
    grid-row: 2;
    grid-column: 1
}

.photo-mosaic>button:nth-child(4) {
    grid-row: 2;
    grid-column: 2
}

.mosaic-copy {
    grid-column: 3;
    grid-row: 1/3;
    align-self: center;
    padding-left: 30px
}

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

.mosaic-copy p {
    font-size: 16px
}

.outline-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 27px
}

.outline-strip details {
    padding: 27px;
    border: 1px solid #43516c;
    background: #14213a;
    align-self: start
}

.outline-strip summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    font: 700 19px 'Montserrat Alternates', sans-serif
}

.outline-strip summary::-webkit-details-marker {
    display: none
}

.outline-strip summary>.icon {
    width: 34px;
    height: 34px
}

.outline-strip summary>.icon img {
    width: 31px;
    height: 31px
}

.outline-strip summary strong {
    flex: 1
}

.outline-strip details p {
    font-size: 16px;
    color: #bdc6d7;
    margin: 18px 0
}

.reference-reveal {
    font-size: 15px;
    color: #d4dbe8;
    border-top: 1px solid #ffffff25;
    padding-top: 18px
}

.outline-strip details[open] {
    border-color: #ce1631
}

.outline-strip details[open] .plus:after {
    transform: rotate(90deg)
}

.foundation-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    box-shadow: 0 10px 30px #0911250a
}

.foundation-strip article {
    padding: 29px;
    background: #f7f3f5;
    border: 1px solid #e0d6dc;
    transition: transform .45s
}

.foundation-strip article:nth-child(2) {
    background: var(--red);
    color: white;
    border-color: var(--red)
}

.foundation-strip article:nth-child(3) {
    background: var(--navy);
    color: white;
    border-color: var(--navy)
}

.foundation-strip article:not(:first-child) p {
    color: #f0e5ed
}

.foundation-strip article:not(:first-child) .icon img {
    filter: brightness(0) invert(1)
}

.foundation-strip article>.icon {
    width: 37px;
    height: 37px;
    margin-bottom: 20px
}

.foundation-strip article>.icon img {
    width: 34px;
    height: 34px
}

.foundation-strip article h3 {
    font-size: 22px
}

.foundation-strip article p {
    font-size: 16px;
    margin: 12px 0 0;
    line-height: 1.6
}

.foundation-strip article:hover,
.foundation-strip article:focus-visible {
    transform: translateY(-5px)
}

.conversation-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 60px;
    align-items: center
}

.conversation-photo {
    position: relative;
    height: 350px;
    border: 7px solid white;
    box-shadow: 0 0 0 1px #d8d1d7
}

.conversation-photo>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.conversation-photo>span {
    position: absolute;
    right: -2px;
    top: 22px;
    background: var(--red);
    padding: 10px
}

.conversation-photo>span .icon {
    width: 34px;
    height: 34px
}

.conversation-photo>span img {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1)
}

.conversation-switch {
    display: flex;
    gap: 12px;
    margin-bottom: 24px
}

.conversation-switch button {
    padding: 11px 18px;
    border: 1px solid #ddcdd5;
    background: white;
    font-size: 15px
}

.conversation-switch button.active {
    background: var(--navy);
    color: white;
    border-color: var(--navy)
}

.conversation-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.conversation-columns>div {
    background: var(--navy);
    color: white;
    padding: 24px;
    border-left: 2px solid var(--red)
}

.conversation-columns h3 {
    font-size: 20px
}

.conversation-columns p {
    font-size: 15px;
    color: #cad2e0;
    line-height: 1.65;
    margin: 15px 0 0
}

.access-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center
}

.access-photos {
    height: 405px;
    position: relative;
    padding: 0 100px 0 0
}

.access-photos img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 6px solid white;
    box-shadow: 0 0 0 1px #e1d4dc
}

.access-photos img:last-child {
    position: absolute;
    right: 0;
    top: 18%;
    width: 50%;
    height: 72%;
    object-fit: cover;
    border: 7px solid white;
    box-shadow: 0 4px 23px #09112512
}

.access-collage p {
    font-size: 16px
}

.access-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 25px 0
}

.access-chips>span {
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 14px
}

.access-chips .icon {
    width: 18px;
    height: 18px
}

.access-chips .icon img {
    width: 17px;
    height: 17px
}

.access-decisions-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px
}

.access-decision-rows details {
    border-bottom: 1px solid #d4c7cf;
    padding: 18px 0
}

.access-decision-rows summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    font: 700 22px 'Montserrat Alternates', sans-serif;
    cursor: pointer
}

.access-decision-rows summary::-webkit-details-marker {
    display: none
}

.access-decision-rows p {
    font-size: 16px;
    line-height: 1.65;
    margin: 18px 0 5px
}

.access-decision-rows details[open] summary {
    color: var(--red)
}

.access-decision-rows details[open] .plus:after {
    transform: rotate(90deg)
}

.perspective-grid article {
    display: flex;
    flex-direction: column;
    min-height: 295px;
    padding: 30px 29px 65px
}

.perspective-grid article h3 {
    font-size: 25px;
    line-height: 1.3;
    min-height: 65px
}

.perspective-grid article p {
    font-size: 18px;
    line-height: 1.6;
    flex: 1
}

.perspective-grid article .outline-word {
    font-size: 28px
}

.section {
    padding-block: 64px
}

.ref-intro {
    padding-top: 86px
}

.ref-services {
    padding-top: 65px
}

.hero-v2 {
    margin-bottom: 64px
}

.reference-contact {
    padding-block: 38px
}

.service-slider {
    padding-block: 45px
}

.service-overview {
    padding-top: 65px;
    padding-bottom: 45px
}

.panorama-section {
    padding-block: 38px
}

.protection-tabs button:focus-visible,
.console-zones button:focus-visible,
.explorer-toggle:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: -4px
}

@media(max-width:1100px) {
    .console-controls {
        padding: 23px 18px
    }

    .camera-console {
        grid-template-columns: minmax(0, 1fr) 250px
    }

    .protection-copy {
        padding: 25px
    }

    .protection-points {
        gap: 15px
    }

    .protection-panel {
        grid-template-columns: .7fr 1.3fr
    }

    .panorama-grid>button {
        padding: 27px 20px
    }

    .panorama-grid strong {
        font-size: 21px
    }

    .panorama-grid p {
        font-size: 15px
    }

    .conversation-layout,
    .context-layout,
    .access-collage {
        gap: 35px
    }

    .brief-ribbon {
        grid-template-columns: 1fr 1fr 1fr
    }

    .brief-ribbon>div:first-child {
        grid-column: 1/-1
    }

    .photo-mosaic {
        grid-template-rows: 165px 165px
    }

    .mosaic-copy {
        padding-left: 15px
    }

    .perspective-grid article h3 {
        font-size: 22px
    }

    .perspective-grid article p {
        font-size: 17px
    }
}

@media(max-width:900px) {
    .section {
        padding-block: 48px
    }

    .ref-intro {
        padding-top: 75px
    }

    .service-explorer {
        min-height: 320px;
        gap: 10px
    }

    .explorer-panel {
        flex-basis: 70px
    }

    .explorer-panel:not(.is-open) .explorer-toggle {
        padding: 20px 14px
    }

    .explorer-toggle {
        font-size: 18px;
        padding: 19px
    }

    .explorer-detail {
        padding-inline: 18px
    }

    .explorer-photos img {
        height: 145px
    }

    .explorer-description {
        gap: 15px
    }

    .explorer-description p {
        font-size: 14px
    }

    .explorer-description .btn {
        padding: 10px 19px
    }

    .panorama-grid {
        grid-template-columns: repeat(2, 1fr);
        min-height: 450px
    }

    .panorama-grid>button {
        border-bottom: 1px solid #ffffff45;
        gap: 10px
    }

    .panorama-grid strong {
        font-size: 22px
    }

    .panorama-grid p {
        min-height: 0
    }

    .panorama-grid>button .icon {
        display: none
    }

    .context-collage {
        height: 350px;
        padding-right: 40px
    }

    .camera-console {
        grid-template-columns: 1fr
    }

    .console-screen {
        min-height: 340px
    }

    .console-controls {
        display: grid;
        grid-template-columns: 1fr 220px;
        gap: 15px 25px;
        padding: 20px
    }

    .console-brand {
        display: none
    }

    .console-zones {
        flex-direction: row
    }

    .console-zones button {
        flex: 1
    }

    .console-zoom {
        margin: 0
    }

    .console-footnote {
        grid-column: 1/-1;
        margin: 0;
        font-size: 12px
    }

    .protection-panel {
        grid-template-columns: .7fr 1fr
    }

    .protection-points {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .protection-points>div {
        padding-top: 10px
    }

    .protection-points h3 {
        margin-bottom: 5px
    }

    .protection-points p {
        font-size: 14px
    }

    .protection-copy h2 {
        font-size: 27px
    }

    .protection-tablist button {
        font-size: 15px;
        padding: 16px 12px;
        gap: 8px
    }

    .photo-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 160px 160px auto
    }

    .mosaic-copy {
        grid-column: 1/-1;
        grid-row: 3;
        padding: 20px 0 0
    }

    .outline-strip {
        gap: 15px
    }

    .outline-strip details {
        padding: 22px
    }

    .outline-strip summary {
        flex-wrap: wrap;
        font-size: 17px
    }

    .foundation-strip article {
        padding: 23px
    }

    .foundation-strip article h3 {
        font-size: 20px
    }

    .foundation-strip article p {
        font-size: 15px
    }

    .conversation-columns {
        gap: 15px
    }

    .conversation-columns>div {
        padding: 20px
    }

    .conversation-columns h3 {
        font-size: 18px
    }

    .access-photos {
        height: 360px;
        padding-right: 65px
    }

    .access-decisions-layout {
        gap: 35px
    }

    .perspective-grid article {
        padding: 25px 24px 62px;
        min-height: 280px
    }

    .perspective-grid article h3 {
        min-height: 58px
    }

    .brief-ribbon>a {
        padding: 20px
    }

    .context-points button {
        font-size: 15px
    }
}

@media(max-width:640px) {
    .section {
        padding-block: 38px
    }

    .ref-intro {
        padding-top: 70px
    }

    .hero-v2 {
        margin-bottom: 125px
    }

    .service-explorer {
        display: block;
        min-height: 0
    }

    .explorer-panel {
        margin-bottom: 12px
    }

    .explorer-panel:not(.is-open) .explorer-toggle {
        writing-mode: horizontal-tb;
        height: auto;
        min-height: 66px;
        flex-direction: row;
        padding: 17px
    }

    .explorer-panel:not(.is-open) .explorer-toggle>.plus {
        margin: 0 0 0 auto
    }

    .explorer-toggle {
        font-size: 18px;
        padding: 17px;
        min-height: 66px
    }

    .explorer-toggle>.icon {
        width: 25px;
        height: 25px
    }

    .explorer-toggle>.icon img {
        width: 24px;
        height: 24px
    }

    .explorer-detail {
        padding-inline: 15px
    }

    .is-open .explorer-detail {
        max-height: 360px;
        padding-bottom: 18px
    }

    .explorer-photos {
        gap: 10px
    }

    .explorer-photos img {
        height: 115px
    }

    .explorer-description {
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding-top: 15px
    }

    .explorer-description p {
        font-size: 14px
    }

    .explorer-description .btn {
        font-size: 14px;
        padding: 10px 14px;
        min-height: 42px
    }

    .panorama-grid {
        min-height: 470px
    }

    .panorama-grid>button {
        padding: 22px 17px
    }

    .panorama-grid strong {
        font-size: 20px
    }

    .panorama-grid p {
        font-size: 14px;
        line-height: 1.5
    }

    .panorama-grid>button>span {
        font-size: 12px
    }

    .context-layout,
    .conversation-layout,
    .access-collage,
    .access-decisions-layout {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .context-collage {
        height: 300px;
        padding-left: 12px;
        padding-right: 40px;
        padding-bottom: 30px
    }

    .context-seal {
        left: 0;
        top: 18px;
        padding: 15px;
        font-size: 13px
    }

    .context-seal .icon {
        display: none
    }

    .context-layout>div:last-child {
        text-align: center
    }

    .context-points button {
        text-align: left
    }

    .brief-ribbon {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 24px 0
    }

    .brief-ribbon>div:first-child {
        grid-column: auto;
        text-align: center
    }

    .brief-ribbon>a {
        display: grid;
        grid-template-columns: 30px 1fr;
        padding: 20px;
        gap: 8px 15px
    }

    .brief-ribbon>a .icon {
        grid-row: 1/3
    }

    .brief-ribbon>a p {
        grid-column: 2
    }

    .console-screen {
        min-height: 310px
    }

    .console-caption {
        padding: 17px
    }

    .console-caption strong {
        font-size: 18px
    }

    .console-caption p {
        font-size: 14px;
        line-height: 1.5
    }

    .console-tag {
        left: 15px;
        top: 15px;
        font-size: 11px
    }

    .console-reticle {
        inset: 65px 28% 135px
    }

    .console-controls {
        display: block;
        padding: 17px
    }

    .console-zones {
        gap: 7px
    }

    .console-zones button {
        padding: 10px;
        font-size: 13px
    }

    .zone-status {
        font-size: 11px
    }

    .console-zoom {
        margin-top: 18px;
        grid-template-columns: 1fr auto;
        font-size: 13px
    }

    .console-footnote {
        margin-top: 14px
    }

    .protection-tablist button {
        flex-direction: column;
        font-size: 13px;
        padding: 13px 8px;
        gap: 8px;
        line-height: 1.4
    }

    .protection-tablist .icon {
        width: 24px;
        height: 24px
    }

    .protection-tablist .icon img {
        width: 23px;
        height: 23px
    }

    .protection-panel {
        grid-template-columns: 1fr
    }

    .protection-photo {
        height: 180px
    }

    .protection-photo img {
        min-height: 0
    }

    .protection-copy {
        padding: 23px
    }

    .protection-copy h2 {
        font-size: 26px;
        text-align: center
    }

    .protection-copy>p {
        text-align: center;
        font-size: 15px
    }

    .protection-points {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .protection-points h3 {
        font-size: 17px
    }

    .protection-points p {
        font-size: 15px
    }

    .photo-mosaic {
        grid-template-rows: 140px 140px auto;
        gap: 12px
    }

    .mosaic-copy {
        text-align: center
    }

    .mosaic-copy h2 {
        font-size: 30px
    }

    .outline-strip,
    .foundation-strip {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .outline-strip summary {
        flex-wrap: nowrap
    }

    .foundation-strip article {
        padding: 25px
    }

    .foundation-strip article>.icon {
        float: right;
        margin: 0 0 15px 15px
    }

    .conversation-photo {
        height: 260px
    }

    .conversation-switch {
        justify-content: center
    }

    .conversation-columns {
        gap: 12px
    }

    .conversation-columns>div {
        padding: 18px
    }

    .conversation-columns h3 {
        font-size: 17px
    }

    .conversation-columns p {
        font-size: 14px
    }

    .access-photos {
        height: 310px;
        padding-right: 75px
    }

    .access-chips {
        justify-content: center
    }

    .access-collage>div:last-child {
        text-align: center
    }

    .access-decisions-layout .section-head {
        text-align: center
    }

    .access-decision-rows summary {
        font-size: 21px
    }

    .perspective-grid article {
        min-height: 0;
        padding: 27px 25px 67px
    }

    .perspective-grid article h3 {
        min-height: 0;
        font-size: 24px
    }

    .perspective-grid article p {
        font-size: 17px
    }

    .panorama-section {
        padding-block: 28px
    }
}

@media(prefers-reduced-motion:reduce) {

    .explorer-panel,
    .explorer-detail,
    .panorama-image,
    .console-image {
        transition: none
    }

    .photo-mosaic>button img,
    .protection-photo img {
        transition: none
    }
}

.ref-card-copy {
    display: block;
    flex: 1
}

.ref-card-copy>strong {
    display: block;
    font-size: 20px;
    line-height: 1.4
}

.ref-card-copy>span {
    display: block;
    font: 400 16px/1.6 Nunito, sans-serif;
    color: #c0cbde;
    margin-top: 14px
}

.outline-strip summary {
    align-items: flex-start
}

.outline-strip summary>.icon {
    flex: 0 0 34px
}

.outline-strip .reference-reveal {
    margin-top: 20px
}

.outline-strip .plus {
    margin-top: 6px
}

.service-explorer {
    display: grid;
    grid-template-columns: var(--explorer-columns, minmax(0, 1fr) 86px 86px);
    gap: 14px;
    height: 370px;
    min-height: 0;
    align-items: stretch;
    transition: grid-template-columns .72s cubic-bezier(.16, 1, .3, 1)
}

.explorer-panel,
.explorer-panel.is-open {
    position: relative;
    display: grid;
    grid-template-rows: 76px minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    height: 100%;
    margin: 0;
    flex: none;
    overflow: hidden
}

.explorer-panel>h3 {
    min-width: 0;
    height: 76px;
    display: block;
    margin: 0
}

.explorer-panel .explorer-toggle {
    width: 100%;
    height: 76px;
    min-height: 0;
    writing-mode: horizontal-tb;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    font-size: 21px;
    white-space: nowrap
}

.explorer-panel .explorer-toggle>span:not(.icon):not(.plus) {
    min-width: 0
}

.explorer-panel:not(.is-open)>h3 {
    grid-row: 1/-1;
    height: 100%;
    position: relative
}

.explorer-panel:not(.is-open) .explorer-toggle {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    min-height: 0;
    writing-mode: vertical-rl;
    justify-content: flex-start;
    padding: 22px 18px;
    gap: 20px
}

.explorer-panel:not(.is-open) .explorer-toggle>.plus {
    margin-top: auto;
    margin-left: 0
}

.explorer-panel .explorer-detail {
    position: relative;
    min-width: 0;
    max-height: none;
    padding: 0 22px 20px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .42s ease, visibility .42s ease, transform .42s ease
}

.explorer-panel:not(.is-open) .explorer-detail {
    display: none
}

.explorer-panel.is-open .explorer-detail {
    display: grid;
    grid-template-rows: 170px 1fr;
    gap: 16px;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: none;
    transition: opacity .46s ease, visibility .46s ease, transform .46s cubic-bezier(.16, 1, .3, 1)
}

.explorer-photos {
    min-width: 0;
    height: 170px
}

.explorer-photos img {
    height: 170px;
    min-width: 0;
    display: block
}

.explorer-description {
    padding-top: 0;
    min-width: 0;
    gap: 22px;
    align-items: center
}

.explorer-description p {
    font-size: 16px;
    line-height: 1.5
}

.explorer-description .btn {
    white-space: nowrap
}

.explorer-toggle>.icon,
.explorer-toggle>.plus {
    flex-shrink: 0
}

.explorer-panel.is-open .explorer-toggle>.plus {
    margin-left: auto
}

#your-priorities {
    padding-block: 45px
}

#your-priorities .section-head {
    max-width: none;
    margin-bottom: 27px
}

#your-priorities h2 {
    font-size: clamp(27px, 2.6vw, 40px);
    margin-bottom: 12px
}

#your-priorities .section-head p {
    max-width: none
}

#your-priorities .priority {
    padding: 25px 23px
}

#your-priorities .priority>.icon {
    width: 62px;
    height: 62px;
    padding: 13px;
    margin-bottom: 15px
}

#your-priorities .priority>.icon img {
    width: 34px;
    height: 34px
}

#your-priorities .priority h3 {
    font-size: 20px;
    margin-bottom: 11px
}

#your-priorities .priority p {
    font-size: 15px;
    margin: 0;
    line-height: 1.55
}

#your-next-step {
    padding-block: 44px
}

#your-next-step>.container>.section-head {
    margin-bottom: 27px
}

#your-next-step .section-head p {
    max-width: none;
    margin: 12px auto 0
}

#your-next-step .section-head h2 {
    margin-bottom: 13px
}

#your-next-step .plan-card {
    padding: 27px;
    gap: 25px
}

#your-next-step .plan-title {
    padding: 24px 20px
}

#your-next-step .plan-card li {
    padding-block: 12px
}

#a-thoughtful-brief .brief-ribbon>a {
    padding: 25px 24px;
    border: 3px solid var(--red);
    border-radius: 4px;
    position: relative;
    gap: 14px;
    box-shadow: 5px 5px 0 #f3e3e8
}

#a-thoughtful-brief .brief-ribbon>a>.icon {
    position: absolute;
    right: 17px;
    top: 17px;
    width: 31px;
    height: 31px;
    margin: 0
}

#a-thoughtful-brief .brief-ribbon>a>strong {
    padding-right: 36px;
    min-height: 35px;
    display: block;
    font-size: 19px
}

#a-thoughtful-brief .brief-ribbon>a>p {
    margin: 0;
    font-size: 15px
}

#alarm-foundations {
    padding-block: 37px
}

.foundation-strip article {
    position: relative;
    padding: 24px 25px
}

.foundation-strip article>.icon {
    position: absolute;
    right: 20px;
    top: 19px;
    width: 33px;
    height: 33px;
    margin: 0;
    float: none
}

.foundation-strip article>.icon img {
    width: 30px;
    height: 30px
}

.foundation-strip article h3 {
    padding-right: 42px;
    min-height: 45px;
    font-size: 21px;
    line-height: 1.35;
    margin: 0 0 10px
}

.foundation-strip article p {
    font-size: 15px;
    margin: 0;
    line-height: 1.55
}

.service-faq {
    overflow: visible;
    padding-block: 45px
}

.faq-editorial {
    align-items: start
}

.faq-columns {
    gap: 20px
}

.faq-columns p {
    border-left: 2px solid var(--red);
    padding-left: 14px;
    font-size: 15px;
    line-height: 1.55
}

.faq-columns strong {
    display: block;
    font-size: 15px;
    color: var(--navy);
    margin-bottom: 7px
}

.faq-compact {
    position: sticky;
    top: 89px;
    align-self: start;
    padding: 13px 20px;
    overflow: visible
}

.faq-compact .faq-item {
    border: 0;
    border-bottom: 1px solid #ded7df;
    background: transparent
}

.faq-compact .faq-item:last-child {
    border-bottom: 0
}

.faq-compact .faq-item h3 {
    margin: 0;
    padding: 0
}

.faq-compact .faq-item h3>button {
    padding: 17px 11px;
    gap: 18px;
    line-height: 1.5
}

.faq-compact .faq-item .answer>div {
    padding-inline: 11px
}

.faq-compact .faq-item .answer p {
    padding: 0 0 18px;
    margin: 0;
    font-size: 15px;
    line-height: 1.65
}

.faq-compact .faq-item.open {
    background: transparent
}

@media(max-width:1000px) {
    .service-explorer {
        height: 350px;
        gap: 10px
    }

    .explorer-panel .explorer-toggle {
        font-size: 18px;
        padding: 18px;
        gap: 10px
    }

    .explorer-panel.is-open .explorer-detail {
        grid-template-rows: 145px 1fr;
        gap: 12px;
        padding: 0 18px 18px
    }

    .explorer-photos,
    .explorer-photos img {
        height: 145px
    }

    .explorer-description p {
        font-size: 14px
    }

    .explorer-description {
        gap: 13px
    }

    .explorer-description .btn {
        padding: 11px 18px;
        font-size: 14px
    }

    #your-next-step .plan-card {
        padding: 22px;
        gap: 20px
    }

    .faq-compact {
        padding: 10px 15px
    }
}

@media(max-width:640px) {
    .service-explorer {
        display: grid;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto;
        gap: 12px;
        height: auto
    }

    .explorer-panel,
    .explorer-panel.is-open {
        height: auto;
        display: block
    }

    .explorer-panel>h3,
    .explorer-panel:not(.is-open)>h3 {
        height: auto
    }

    .explorer-panel .explorer-toggle,
    .explorer-panel:not(.is-open) .explorer-toggle {
        position: static;
        writing-mode: horizontal-tb;
        height: auto;
        min-height: 64px;
        padding: 17px;
        width: 100%;
        gap: 11px;
        font-size: 18px
    }

    .explorer-panel:not(.is-open) .explorer-toggle>.plus {
        margin: 0 0 0 auto
    }

    .explorer-panel.is-open .explorer-detail {
        display: grid;
        grid-template-rows: 125px auto;
        gap: 16px;
        padding: 0 16px 18px
    }

    .explorer-photos,
    .explorer-photos img {
        height: 125px
    }

    .explorer-description {
        grid-template-columns: 1fr;
        gap: 13px
    }

    .explorer-description .btn {
        justify-self: start
    }

    .explorer-description p {
        font-size: 15px
    }

    #your-priorities,
    #your-next-step {
        padding-block: 35px
    }

    #your-priorities .section-head {
        text-align: center
    }

    #your-priorities .priority {
        padding: 23px
    }

    #your-next-step .plan-card {
        padding: 17px;
        gap: 15px
    }

    #your-next-step .plan-title {
        padding: 20px 12px
    }

    #your-next-step .section-head p {
        font-size: 15px
    }

    #a-thoughtful-brief .brief-ribbon>a {
        display: block;
        padding: 23px
    }

    #a-thoughtful-brief .brief-ribbon>a>strong {
        margin-bottom: 10px;
        min-height: 30px
    }

    .foundation-strip article {
        padding: 23px
    }

    .faq-compact {
        position: static;
        padding: 10px 15px
    }

    .faq-columns {
        gap: 15px
    }

    .faq-columns p {
        font-size: 14px;
        padding-left: 11px
    }

    .faq-compact .faq-item h3>button {
        padding: 16px 7px
    }

    .faq-compact .faq-item .answer>div {
        padding-inline: 7px
    }

    .service-faq {
        padding-block: 36px
    }
}

@media(prefers-reduced-motion:reduce) {

    .service-explorer,
    .explorer-detail {
        transition: none !important
    }
}

@media(min-width:901px) {

    #your-priorities .section-head h2,
    #your-next-step .section-head p {
        white-space: nowrap
    }

    .service-faq .faq-intro {
        padding-bottom: 35px
    }
}

.service-explorer {
    grid-template-columns: var(--explorer-columns, minmax(86px, 1fr) minmax(86px, 0fr) minmax(86px, 0fr));
    overflow: hidden
}

.service-explorer[data-busy="true"] {
    pointer-events: none
}

.explorer-panel {
    transition: background .55s ease
}

.explorer-panel>h3 {
    transition: opacity .28s ease
}

.explorer-panel .explorer-detail,
.explorer-panel.is-open .explorer-detail {
    transition: opacity .46s ease, visibility .46s ease, transform .46s cubic-bezier(.16, 1, .3, 1)
}

#protection-plans .protection-panel {
    grid-template-columns: .8fr 1.2fr;
    min-height: 0;
    align-items: start
}

#protection-plans .protection-photo {
    height: 320px;
    padding: 9px
}

#protection-plans .protection-photo img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover
}

@media(max-width:1100px) {
    #protection-plans .protection-photo {
        height: 300px
    }
}

@media(max-width:900px) {
    #protection-plans .protection-panel {
        grid-template-columns: .7fr 1fr
    }

    #protection-plans .protection-photo {
        height: 290px
    }
}

@media(max-width:640px) {
    #protection-plans .protection-panel {
        grid-template-columns: 1fr
    }

    #protection-plans .protection-photo {
        height: 180px
    }
}

#access-methods {
    padding-top: 32px
}

#access-methods .section-head h2 {
    white-space: nowrap
}

#access-methods .choice-deck {
    gap: 24px
}

#access-methods .choice-tile {
    display: flex;
    gap: 12px;
    padding: 25px 27px;
    overflow: hidden;
    isolation: isolate;
    min-height: 0;
    border: 3px solid #cd0b25;
    box-shadow: 6px 6px 0 #f0c8d0, 0 12px 26px #0911250b;
    background: linear-gradient(135deg, #fff 0%, #fff7f9 100%)
}

#access-methods .choice-tile:before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid #e85065;
    pointer-events: none
}

#access-methods .choice-tile:hover,
#access-methods .choice-tile:focus-visible {
    border-color: #d91831;
    box-shadow: 5px 5px 0 #f0c8d0, 0 10px 18px #0911250c;
    transform: translateY(-1px)
}

#access-methods .choice-tile.active {
    border-color: #f01332;
    box-shadow: 6px 6px 0 #eaaebb, 0 13px 24px #09112512;
    background: linear-gradient(135deg, #fff 0%, #ffe8ed 100%)
}

#access-methods .choice-tile>.icon {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    margin: 0;
    background: #cd0b25;
    padding: 7px
}

#access-methods .choice-tile>.icon img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1)
}

#access-methods .choice-tile strong {
    padding-right: 42px;
    font-size: 20px;
    min-height: 29px
}

#access-methods .choice-tile>span:last-child {
    font-size: 16px;
    line-height: 1.55;
    max-width: 34ch
}

#access-methods .choice-response {
    font-size: 21px;
    line-height: 1.55;
    max-width: 820px;
    margin: 32px auto 24px;
    text-align: center;
    color: var(--navy);
    font-weight: 800
}

#access-methods .choice-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    margin: 0
}

#access-methods .choice-photos img {
    width: 100%;
    aspect-ratio: 2/1;
    height: auto;
    object-fit: cover;
    border: 7px solid #fff;
    outline: 2px solid #cd0b25;
    box-shadow: 7px 7px 0 #f0c8d0
}

#access-methods .access-watermark {
    position: absolute;
    right: 20px;
    bottom: -2px;
    opacity: .045;
    pointer-events: none;
    z-index: -1;
    transform: scale(2);
    transform-origin: bottom right
}

#access-methods .access-watermark .brand-mark {
    background: transparent
}

#service-explorer,
#quiet-confidence,
#in-motion,
#around-your-home,
#home-in-context,
#home-notes,
#questions,
#our-perspective,
#our-purpose,
#zone-view,
#camera-perspectives,
#before-you-choose {
    padding-block: 32px
}

#service-explorer,
#home-in-context,
#zone-view,
#camera-perspectives {
    padding-block: 26px
}

#in-motion {
    padding-block: 11.5px
}

@media(max-width:1000px) {

    #quiet-confidence,
    #around-your-home,
    #home-notes,
    #questions,
    #our-perspective,
    #our-purpose,
    #before-you-choose {
        padding-block: 24px
    }

    #in-motion {
        padding-block: 10px
    }
}

@media(max-width:640px) {

    #service-explorer,
    #quiet-confidence,
    #around-your-home,
    #home-in-context,
    #home-notes,
    #questions,
    #our-perspective,
    #our-purpose,
    #zone-view,
    #camera-perspectives,
    #before-you-choose {
        padding-block: 19px
    }

    #in-motion {
        padding-block: 8px
    }

    #access-methods .section-head h2 {
        white-space: normal
    }

    #access-methods .choice-tile {
        padding: 19px 21px
    }

    #access-methods .choice-tile strong {
        font-size: 18px
    }

    #access-methods .choice-response {
        font-size: 18px;
        margin-top: 26px
    }

    #access-methods .choice-photos {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .service-explorer {
        grid-template-columns: 1fr !important
    }
}

@media(prefers-reduced-motion:reduce) {

    .explorer-panel>h3,
    .explorer-panel .explorer-detail {
        transition: none !important
    }
}

@media(max-width:900px) {
    .header nav.open {
        text-align: center
    }

    .header nav.open>a,
    .header nav.open .services-toggle {
        width: 100%;
        justify-content: center;
        text-align: center
    }

    .header nav.open .dropdown {
        width: 100%;
        text-align: center
    }

    .header nav.open .dropdown-panel a {
        justify-content: center;
        text-align: center;
        padding-inline: 9px
    }

    .header nav.open .dropdown-panel a:hover {
        padding-left: 9px
    }
}

#app {
    max-width: 100%;
    overflow-x: clip
}

@supports not (overflow:clip) {
    #app {
        overflow-x: hidden
    }
}