:root { font-family: system-ui, sans-serif; color: #102f39; background: #f4f6f3; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }
.top, nav, .wordmark, .links, footer { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.top, footer { justify-content: space-between; padding-block: 18px; }
nav a, .wordmark { text-decoration: none; font-weight: 700; }
.wordmark { font-size: 25px; }
.wordmark img { border-radius: 11px; }
.hero { position: relative; isolation: isolate; overflow: hidden; color: white; background: #102f39; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#071c25f5,#0b2736ba 49%,#0b273631); }
.hero-content { padding-block: clamp(80px, 12vw, 170px); }
h1, h2, h3 { margin: 0 0 18px; line-height: 1.03; }
h1 { font-size: clamp(58px, 9vw, 112px); letter-spacing: -.075em; }
h2 { font-size: clamp(38px, 6vw, 65px); letter-spacing: -.06em; }
p, li { line-height: 1.65; }
.hero p:not(.eyebrow), .plus-band > div > p:not(.eyebrow) { max-width: 37ch; font-size: 19px; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 800; }
.cta { display: inline-block; padding: 13px 17px; border: 1px solid transparent; border-radius: 9px; background: #c7f463; color: #122d28; text-decoration: none; font-weight: 750; }
.cta.secondary { background: transparent; border-color: currentColor; color: inherit; }
a:focus-visible { outline: 3px solid #509aaf; outline-offset: 4px; }
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 80px); padding-block: clamp(44px, 8vw, 105px); }
.features { padding-left: 19px; }
.features li { margin-block: 13px; }
.text-link { font-weight: 750; }
.phones { display: flex; gap: 12px; justify-content: center; }
.phones img { width: 46%; object-fit: contain; border-radius: 18px; box-shadow: 0 10px 35px #102f3933; }
.detail { border-top: 1px solid #cbd8d5; }
.detail img { width: 100%; border-radius: 14px; }
.plus-band { color: white; background: #102f39; padding-block: 70px; }
.plus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-block: 26px; }
.plus-grid article { padding: 23px; border: 1px solid #79959d; border-radius: 12px; }
@media (max-width: 700px) {
    .wrap { width: calc(100% - 32px); }
    .split, .plus-grid { grid-template-columns: 1fr; }
    nav { gap: 10px; }
    .hero::before { background: #071c25bb; }
}