:root {
    --ink: #151b1d;
    --coal: #000000;
    --paper: #f3efe6;
    --orange: #f05223;
    --blue: #64ADB1;
    --muted: #6a6a64;
    --line: rgba(21,27,29,.18);
    --display: "Barlow Condensed",Impact,sans-serif;
    --body: "Inter",Arial,sans-serif
}

html,body {
    overflow-x: hidden
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

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

body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: .13;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")
}

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

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

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

.skip-link {
    position: absolute;
    left: -9999px
}

.skip-link:focus {
    left: 20px;
    top: 10px;
    background: #fff;
    padding: 10px;
    z-index: 1000
}

.utility {
    min-height: 108px;
    display: grid;
    grid-template-columns: 1fr 280px 1fr;
    align-items: center;
    gap: 30px
}

.utility__contact,.utility__services {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    line-height: 1.8;
    font-weight: 600
}

.utility__contact a:first-child {
    color: var(--orange)
}

.utility__services {
    justify-self: end;
    text-transform: uppercase;
    border-left: 3px solid var(--orange);
    padding-left: 18px;
    font-family: var(--display);
    letter-spacing: .08em
}

.brand img {
    width: 260px;
    margin: auto
}

.nav {
    background: var(--coal);
    color: #fff;
    position: relative;
    z-index: 10
}

.nav__inner {
    display: flex;
    align-items: center;
    min-height: 60px
}

.nav__links {
    display: flex;
    gap: 31px;
    align-items: center;
    flex: 1
}

.nav__links a {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em
}

.nav__links a:hover,.nav__links .active {
    color: var(--orange)
}

.nav__toggle {
    display: none
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: var(--orange);
    color: #fff;
    border: 0;
    padding: 16px 23px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
    cursor: pointer
}

.button:hover {
    background: #d73e12
}

.button--small {
    padding: 11px 22px
}

.button--outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--orange)
}

.button--outline:hover {
    color: #fff
}

.button--light {
    background: var(--paper);
    color: var(--ink)
}

.text-link {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 5px
}

.eyebrow {
    text-transform: uppercase;
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .13em;
    margin: 0 0 10px
}

.hero {
    overflow: hidden;
    background: linear-gradient(100deg,#f5f0e6 0 45%,#bac0bd 45% 100%)
}

.hero__grid {
    display: grid;
    grid-template-columns: 46% 54%;
    min-height: 555px
}

.hero__copy {
    padding: 65px 30px 60px 0;
    position: relative;
    z-index: 2
}

.hero h1,.story h2,.community h2,.request h2,.reviews h2,.financing h2 {
    font: 800 clamp(50px,6vw,84px)/.9 var(--display);
    text-transform: uppercase;
    letter-spacing: -.02em;
    margin: 0
}

.hero h1 em {
    font-style: normal
}


.lede {
    font-size: 18px;
    max-width: 430px;
    color: #4a4c49;
    margin: 25px 0 30px
}

.button-row {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap
}

.hero__visual {
    position: relative;
    min-width: 0;
    background: linear-gradient(145deg,#d0d1c9 0,#8c9895 48%,#40504d 100%);
    clip-path: polygon(8% 0,100% 0,100% 100%,0 100%)
}

.hero__visual:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 43%;
    background: linear-gradient(0deg,#15201e 0,transparent 100%);
    opacity: .65
}

.hero__visual img {
    position: absolute;
    bottom: -4px;
    right: -90px;
    width: 108%;
    z-index: 3;
    filter: drop-shadow(0 18px 16px rgba(0,0,0,.35))
}

.scribble {
    position: absolute;
    top: 45px;
    left: 19%;
    z-index: 4;
    font: 700 24px/1.05 var(--display);
    font-style: italic;
    transform: rotate(-5deg);
    text-transform: uppercase;
    color: #293230
}

.scribble i {
    display: block;
    width: 90px;
    border-bottom: 4px solid var(--orange);
    margin: 10px 0;
    transform: rotate(-8deg)
}

.sun {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #ffc66b;
    filter: blur(16px);
    bottom: 125px;
    left: 14%;
    opacity: .75
}

.tree {
    position: absolute;
    background: var(--coal);
    opacity: .55;
    filter: blur(1px);
    clip-path: polygon(47% 0,55% 34%,77% 18%,64% 46%,100% 44%,69% 61%,91% 75%,60% 72%,51% 100%,40% 72%,9% 85%,32% 59%,0 47%,35% 44%);
    width: 170px;
    height: 280px;
    bottom: 90px
}

.tree--one {
    right: -20px
}

.tree--two {
    right: 120px;
    transform: scale(.8)
}

.license {
    position: absolute;
    right: 20px;
    top: 18px;
    color: white;
    background: rgba(16,23,24,.82);
    padding: 8px 12px;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    z-index: 4
}

.service-strip {
    background: var(--coal);
    color: #fff
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr)
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px 32px 20px;
    min-height: 205px;
    border-right: 1px solid rgba(255,255,255,.2)
}

.service-card:first-child {
    border-left: 1px solid rgba(255,255,255,.2)
}

.service-card h2 {
    font: 700 22px/1 var(--display);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 18px 35px 8px 0
}

.service-card p {
    color: #aeb4b3;
    font-size: 12px;
    line-height: 1.5;
    margin: 0 35px 0 0
}

.service-card>a {
    position: static;
    align-self: flex-end;
    margin-top: auto;
    color: var(--orange);
    font-size: 28px;
    line-height: 1
}

.service-icon {
    display: block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--orange);
    border-radius: 3px
}

.service-icon--heat {
    border: 0;
    background: repeating-linear-gradient(90deg,transparent 0 6px,var(--orange) 6px 9px,transparent 9px 13px);
    transform: skewY(-20deg)
}

.service-icon--calendar:before {
    content: "";
    display: block;
    border-top: 5px solid var(--orange);
    margin-top: 6px
}

.service-icon--home {
    transform: rotate(45deg);
    border-radius: 0
}

.service-icon--air {
    border-radius: 50%;
    box-shadow: 18px 0 0 -9px var(--coal),18px 0 0 -6px var(--orange)
}

.story {
    display: grid;
    grid-template-columns: 48% 52%;
    min-height: 520px
}

.story__image {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg,#616962,#1a2424)
}

.equipment-art {
    position: absolute;
    width: 65%;
    height: 72%;
    left: 10%;
    bottom: -3%;
    background: #1d2626;
    border: 7px solid #35403e;
    box-shadow: 20px 15px 35px rgba(0,0,0,.35)
}

.grille {
    position: absolute;
    inset: 6px;
    background: repeating-linear-gradient(90deg,transparent 0 8px,#79817b 9px 10px),repeating-linear-gradient(0deg,transparent 0 8px,#79817b 9px 10px);
    opacity: .65
}

.fan {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 150px;
    border: 12px solid #6e7771;
    border-radius: 50%;
    z-index: 2
}

.fan:before,.fan:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 110px;
    height: 25px;
    background: #6e7771;
    transform: translate(-50%,-50%) rotate(45deg)
}

.fan:after {
    transform: translate(-50%,-50%) rotate(-45deg)
}

.photo-tag {
    position: absolute;
    left: 28px;
    bottom: 28px;
    color: #fff;
    font: 700 22px var(--display);
    text-transform: uppercase;
    transform: rotate(-5deg);
    z-index: 3;
    border-bottom: 3px solid var(--orange)
}

.story__copy {
    padding: 65px 55px;
    position: relative
}

.story__copy h2 {
    font-size: 53px;
    max-width: 560px;
    margin-bottom: 24px
}

.story__copy>p:not(.eyebrow) {
    color: #4e504c;
    max-width: 570px;
    border-left: 3px solid var(--orange);
    padding-left: 20px;
    margin-bottom: 28px
}

.story__copy aside {
    position: absolute;
    right: 35px;
    bottom: 28px;
    display: flex;
    flex-direction: column;
    font: 700 20px var(--display);
    font-style: italic;
    text-transform: uppercase;
    transform: rotate(-4deg)
}

.reasons {
    display: grid;
    grid-template-columns: max(36%,calc((100vw - 1180px)*.57 + 435px)) 1fr;
    background: #e9e5dc
}

.reasons__statement {
    background: var(--orange);
    color: #fff;
    padding: 48px max(40px,calc((100vw - 1180px)/2));
    padding-right: 45px;
    clip-path: polygon(0 0,97% 0,87% 100%,0 100%)
}

.reasons__statement small {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em
}

.reasons__statement h2 {
    font: 800 58px/.9 var(--display);
    text-transform: uppercase;
    margin: 22px 0
}

.reasons__statement i {
    display: block;
    width: 100px;
    border-bottom: 2px solid rgba(255,255,255,.6)
}

.reasons__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 35px max(40px,calc((100vw - 1180px)/2)) 35px 35px;
    gap: 0 45px
}

.reasons__grid article {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid var(--line)
}

.reasons__grid span {
    font-size: 36px;
    line-height: 1
}

.reasons__grid h3 {
    font: 700 22px/1 var(--display);
    text-transform: uppercase;
    margin: 0
}

.reasons__grid p {
    font-size: 12px;
    color: var(--muted);
    margin: 6px 0
}

.service-area {
    display: grid;
    grid-template-columns: 55% 45%;
    min-height: 610px
}

.area-map {
    position: relative;
    overflow: hidden;
    background: #dedad0
}

.area-map:before,.area-map:after {
    content: "";
    position: absolute;
    inset: -30%;
    background: repeating-radial-gradient(ellipse at 50% 50%,transparent 0 55px,rgba(70,77,73,.17) 56px 57px,transparent 58px 90px);
    transform: rotate(18deg)
}

.area-map:after {
    background: repeating-linear-gradient(32deg,transparent 0 85px,rgba(70,77,73,.16) 86px 88px,transparent 89px 150px);
    transform: none
}

.area-map__content {
    width: min(550px,calc(100% - 60px));
    padding: 58px 0;
    position: relative;
    z-index: 2
}

.area-map h2 {
    font: 800 40px var(--display);
    text-transform: uppercase;
    margin: 0;
    border-bottom: 1px solid #a6a69e;
    padding-bottom: 15px
}

.area-map ul {
    list-style: none;
    padding: 20px 0;
    margin: 0;
    columns: 2
}

.area-map li {
    font-size: 14px;
    padding: 5px 0
}

.area-map li:before {
    content: "◆";
    color: var(--orange);
    font-size: 8px;
    margin-right: 10px
}

.area-map strong {
    position: absolute;
    left: 58%;
    top: 47%;
    font: 700 22px var(--display);
    text-transform: uppercase;
    background: rgba(243,239,230,.7);
    padding: 2px 7px
}

.area-map i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 12px;
    height: 12px;
    background: var(--orange);
    border: 3px solid var(--paper);
    border-radius: 50%;
    box-shadow: 0 1px 3px #777
}

.request {
    background: var(--coal);
    color: #fff;
    padding: 55px
}

.request__inner {
    max-width: 520px
}

.request h2 {
    font-size: 44px;
    margin-bottom: 22px
}

.request form {
    display: grid;
    gap: 10px
}

.request label span {
    position: absolute;
    left: -9999px
}

.request input,.request select,.request textarea {
    width: 100%;
    font: inherit;
    border: 1px solid #606768;
    background: #f3efe6;
    padding: 12px;
    color: #232928;
    border-radius: 0
}

.request textarea {
    resize: vertical
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.request button {
    width: 100%;
    margin-top: 4px
}

.request__call {
    font-size: 12px;
    text-align: center;
    color: #aeb4b3
}

.request__call a {
    color: #fff;
    font-weight: 700
}

.form-message {
    padding: 10px 12px;
    margin-bottom: 15px;
    font-size: 13px;
    background: #203a30;
    border-left: 3px solid #55b983
}

.form-message--error {
    background: #46261f;
    border-color: var(--orange)
}

.community {
    display: grid;
    grid-template-columns: 52% 48%;
    min-height: 470px
}

.community__visual {
    position: relative;
    overflow: hidden
}

.community__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.75) contrast(1.05)
}

.community__visual b {
    position: absolute;
    left: 35px;
    bottom: 30px;
    color: #fff;
    font: 700 26px/1.1 var(--display);
    font-style: italic;
    text-transform: uppercase;
    max-width: 240px;
    transform: rotate(-6deg);
    text-shadow: 0 2px 8px #000;
    border-bottom: 4px solid var(--orange)
}

.community__copy {
    padding: 65px 50px
}

.community h2 {
    font-size: 54px;
    max-width: 490px
}

.community__copy>p:not(.eyebrow) {
    color: var(--muted);
    max-width: 520px;
    margin: 25px 0
}

.reviews {
    padding-top: 55px;
    padding-bottom: 55px
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px
}

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

.section-heading>span {
    font-size: 12px
}

.reviews__grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
    margin-top: 18px
}
.reviews cite { display:flex; align-items:center; gap:10px; }
.reviews cite img { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.reviews cite b { font-style:normal; }
.reviews cite time { margin-left:auto; color:#777; font-size:.72rem; font-style:normal; font-weight:500; }
.reviews .stars span { color:#c9c4ba; }
.reviews__notice { margin:18px 0 0; color:#68645e; font-size:.74rem; text-align:right; }

.reviews blockquote {
    margin: 0;
    padding: 25px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.18);
    min-height: 220px
}

.reviews blockquote p {
    font-size: 14px
}

.reviews cite {
    font-style: normal;
    font-weight: 700;
    font-size: 13px
}

.stars {
    color: var(--orange);
    letter-spacing: .15em
}

.brands {
    padding-bottom: 55px
}

.brands h2 {
    font: 700 23px var(--display);
    text-transform: uppercase;
    letter-spacing: .08em;
    display: flex;
    align-items: center;
    gap: 30px
}

.brands h2:after {
    content: "";
    height: 1px;
    background: var(--line);
    flex: 1
}

.brands__row {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    align-items: center;
    gap: 45px
}

.brands img {
    max-width: 120px;
    max-height: 55px;
    object-fit: contain;
    filter: grayscale(1);
    mix-blend-mode: multiply;
    margin: auto
}

.financing {
    background: var(--orange);
    color: #fff
}

.financing__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px
}

.financing .eyebrow {
    color: #2c2c28
}

.financing h2 {
    font-size: 46px
}

.financing p {
    margin: 4px 0
}

footer {
    background: #111819;
    color: #d3d6d5;
    padding: 50px 0 90px
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
    gap: 55px
}

.footer__grid>div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px
}

.footer__grid img {
    width: 210px;
    margin-bottom: 10px
}

.footer__grid p {
    color: #969e9c;
    max-width: 280px
}

.footer__grid h2 {
    font: 700 16px var(--display);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #fff;
    border-bottom: 1px solid #394140;
    padding-bottom: 10px
}

.footer__grid a:hover {
    color: var(--orange)
}

.footer__bottom {
    border-top: 1px solid #394140;
    margin-top: 40px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #777f7d
}

.mobile-call {
    display: none
}

@media(max-width: 900px) {
    .utility {
        grid-template-columns:1fr 200px
    }

    .utility__services {
        display: none
    }

    .nav__links {
        gap: 17px
    }

    .hero__grid {
        grid-template-columns: 52% 48%
    }

    .hero__visual img {
        width: 140%;
        right: -95px
    }

    .service-grid {
        grid-template-columns: 1fr 1fr
    }

    .story {
        grid-template-columns: 1fr
    }

    .story__image {
        min-height: 430px
    }

    .reasons {
        grid-template-columns: 1fr
    }

    .reasons__statement {
        clip-path: none;
        padding: 45px
    }

    .service-area {
        grid-template-columns: 1fr
    }

    .area-map {
        min-height: 450px
    }

    .community h2 {
        font-size: 45px
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width: 760px) {
    body {
        padding-bottom:52px
    }

    .wrap {
        width: min(100% - 30px,1180px)
    }

    .utility {
        min-height: 76px;
        grid-template-columns: 1fr
    }

    .utility__contact {
        display: none
    }

    .brand img {
        width: 215px
    }

    .hero {
        background: var(--paper)
    }

    .hero__grid {
        grid-template-columns: 1fr;
        min-height: auto;
        width: 100%
    }

    .hero__copy {
        padding: 50px 22px
    }

    .hero h1 {
        font-size: 58px
    }

    .hero__visual {
        min-height: 330px;
        clip-path: none
    }

    .hero__visual img {
        width: 112%;
        right: -35px
    }

    .scribble {
        font-size: 18px;
        left: 7%;
        top: 25px
    }

    .service-grid {
        grid-template-columns: 1fr
    }

    .service-card,.service-card:first-child {
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.2);
        min-height: 175px
    }

    .story {
        width: 100%
    }

    .story__image {
        min-height: 350px
    }

    .story__copy {
        padding: 48px 22px
    }

    .story__copy h2,.community h2 {
        font-size: 44px
    }

    .story__copy aside {
        position: static;
        margin-top: 30px
    }

    .reasons__statement {
        padding: 42px 22px
    }

    .reasons__statement h2 {
        font-size: 52px
    }

    .reasons__grid {
        grid-template-columns: 1fr;
        padding: 20px 22px
    }

    .area-map__content {
        width: calc(100% - 40px)
    }

    .request {
        padding: 46px 22px
    }

    .form-row {
        grid-template-columns: 1fr
    }

    .community {
        grid-template-columns: 1fr;
        width: 100%
    }

    .community__visual {
        min-height: 320px
    }

    .community__copy {
        padding: 45px 22px
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column
    }

    .reviews__grid {
        grid-template-columns: 1fr
    }

    .brands__row {
        grid-template-columns: repeat(3,1fr);
        gap: 30px
    }

    .financing__inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .footer__bottom {
        gap: 20px;
        flex-direction: column
    }

    .mobile-call {
        display: block;
        position: fixed;
        z-index: 50;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--orange);
        color: #fff;
        text-align: center;
        padding: 14px;
        font-weight: 800;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .05em
    }
}

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

/* Interior pages */
.inner-page {
    background: var(--paper)
}

.inner-hero {
    background: linear-gradient(110deg,#f4efe5 0 58%,#909d98 58%);
    overflow: hidden
}

.inner-hero__grid {
    display: grid;
    grid-template-columns: 58% 42%;
    min-height: 480px
}

.inner-hero__grid>div:first-child {
    padding: 70px 60px 70px 0
}

.inner-hero h1,.inner-title h1,.contact-page h1,.article h1 {
    font: 800 clamp(54px,6.5vw,88px)/.92 var(--display);
    text-transform: uppercase;
    letter-spacing: -.025em;
    margin: 0 0 25px;
    max-width: 850px
}

.inner-hero__grid>div:first-child>p:not(.eyebrow) {
    font-size: 17px;
    max-width: 670px;
    color: #515450;
    margin: 0 0 30px
}

.inner-hero__art {
    position: relative;
    min-width: 0;
    background: linear-gradient(145deg,#798985,#24312f);
    clip-path: polygon(15% 0,100% 0,100% 100%,0 100%)
}

.inner-hero__art img {
    position: absolute;
    width: 125%;
    max-width: none;
    right: -40%;
    bottom: 8%;
    filter: drop-shadow(0 18px 16px rgba(0,0,0,.35))
}

.inner-hero__art>span {
    position: absolute;
    right: 25px;
    top: 35px;
    color: #fff;
    font: 700 24px/1 var(--display);
    font-style: italic;
    text-transform: uppercase;
    transform: rotate(-4deg);
    border-bottom: 4px solid var(--orange)
}

.page-content {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 80px;
    padding-top: 75px;
    padding-bottom: 75px
}

.page-content__main section {
    padding: 0 0 50px;
    margin: 0 0 50px;
    border-bottom: 1px solid var(--line)
}

.page-content__main section:last-child {
    margin-bottom: 0
}

.page-content h2,.related h2,.locations h2,.blog-grid h2,.article h2 {
    font: 800 42px/.98 var(--display);
    text-transform: uppercase;
    margin: 0 0 18px
}

.page-content__main p:not(.eyebrow) {
    color: #555853;
    max-width: 760px
}

.page-sidebar {
    position: relative
}

.page-sidebar>div:first-child {
    position: sticky;
    top: 25px;
    background: #e5e1d8;
    padding: 35px
}

.page-sidebar h2 {
    font-size: 31px
}

.page-sidebar ul {
    list-style: none;
    margin: 25px 0 0;
    padding: 0
}

.page-sidebar li {
    padding: 12px 0;
    border-top: 1px solid var(--line);
    font-size: 13px
}

.page-sidebar li:before {
    content: "/";
    color: var(--orange);
    font-weight: 800;
    margin-right: 10px
}

.page-sidebar__call {
    background: var(--orange);
    color: #fff;
    padding: 28px 35px!important;
    display: flex;
    flex-direction: column;
    margin-top: 15px
}

.page-sidebar__call small {
    text-transform: uppercase;
    letter-spacing: .1em
}

.page-sidebar__call a {
    font: 700 30px var(--display)
}

.related {
    padding-top: 15px;
    padding-bottom: 70px
}

.related__grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line)
}

.related__grid a {
    padding: 25px;
    font: 700 22px var(--display);
    text-transform: uppercase;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between
}

.related__grid a span {
    color: var(--orange)
}

.inner-hero--city,.inner-hero--areas {
    background: linear-gradient(120deg,#f4efe5 0 62%,#d8d3c8 62%)
}

.area-card {
    align-self: center;
    justify-self: center;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: var(--coal);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 20px 20px 0 var(--orange)
}

.area-card span,.area-card small {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 10px
}

.area-card strong {
    font: 800 46px var(--display);
    text-transform: uppercase
}

.area-card i {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--orange);
    top: 30px;
    right: 45px
}

.locations {
    padding-top: 70px;
    padding-bottom: 80px
}

.locations__grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    margin-top: 30px
}

.locations__grid a {
    min-height: 190px;
    background: #e5e1d8;
    padding: 28px;
    display: flex;
    flex-direction: column;
    position: relative
}

.locations__grid a:nth-child(1) {
    background: var(--coal);
    color: #fff
}

.locations__grid span {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .12em
}

.locations__grid strong {
    font: 800 38px var(--display);
    text-transform: uppercase;
    margin-top: auto
}

.locations__grid i {
    position: absolute;
    right: 25px;
    bottom: 25px;
    color: var(--orange);
    font-style: normal;
    font-size: 24px
}

.inner-title {
    background: var(--coal);
    color: #fff;
    padding: 75px 0
}

.inner-title h1 {
    max-width: 900px
}

.inner-title p:not(.eyebrow) {
    color: #aeb4b3;
    font-size: 18px
}

.faq {
    padding-top: 65px;
    padding-bottom: 75px;
    max-width: 950px
}

.faq details {
    border-top: 1px solid var(--line);
    padding: 0
}

.faq details:last-child {
    border-bottom: 1px solid var(--line)
}

.faq summary {
    list-style: none;
    cursor: pointer;
    font: 700 27px var(--display);
    text-transform: uppercase;
    padding: 25px 45px 25px 0;
    position: relative
}

.faq summary::-webkit-details-marker {
    display: none
}

.faq summary span {
    color: var(--orange);
    font-size: 13px;
    margin-right: 20px
}

.faq summary:after {
    content: "+";
    position: absolute;
    right: 5px;
    font-size: 30px
}

.faq details[open] summary:after {
    content: "−"
}

.faq details p {
    margin: 0 0 30px 42px;
    color: var(--muted);
    max-width: 760px
}

.contact-page {
    background: linear-gradient(110deg,#f3efe6 0 50%,var(--coal) 50%)
}

.contact-page__grid {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.contact-page__info {
    padding: 75px 65px 75px 0
}

.contact-page__info>p:not(.eyebrow) {
    max-width: 530px;
    color: var(--muted);
    margin-bottom: 35px
}

.contact-line {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
    padding: 15px 0
}

.contact-line small {
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--orange)
}

.contact-line strong {
    font: 700 25px var(--display)
}

.hours {
    margin-top: 25px
}

.hours h2 {
    font: 700 24px var(--display);
    text-transform: uppercase
}

.hours p {
    display: flex;
    justify-content: space-between;
    max-width: 350px;
    font-size: 13px
}

.request--page {
    padding: 75px 0 75px 65px
}

.blog-grid {
    padding-top: 70px;
    padding-bottom: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.blog-grid article {
    border: 1px solid var(--line);
    background: rgba(255,255,255,.22)
}

.blog-grid article img {
    height: 270px;
    width: 100%;
    object-fit: cover;
    filter: saturate(.75)
}

.blog-grid article>div {
    padding: 30px
}

.blog-grid h2 {
    font-size: 35px
}

.blog-grid article>div>p:not(.eyebrow) {
    color: var(--muted);
    min-height: 52px
}

.article {
    padding-top: 70px;
    padding-bottom: 80px;
    max-width: 980px
}

.article>.eyebrow {
    margin-top: 60px
}

.article h1 {
    font-size: 72px
}

.article__intro {
    font-size: 21px;
    color: var(--muted);
    max-width: 760px
}

.article__body {
    margin-top: 60px;
    border-top: 1px solid var(--line)
}

.article__body section {
    display: grid;
    grid-template-columns: 60px 1fr;
    padding: 35px 0;
    border-bottom: 1px solid var(--line)
}

.article__body section>span {
    color: var(--orange);
    font-weight: 800
}

.article__body h2 {
    font-size: 32px
}

.article__body p {
    color: var(--muted)
}

.article__cta {
    background: var(--coal);
    color: #fff;
    padding: 40px;
    margin-top: 55px
}

.article__cta p {
    color: #aeb4b3
}

@media(max-width: 900px) {
    .inner-hero__grid {
        grid-template-columns:1fr
    }

    .inner-hero__art {
        min-height: 300px;
        clip-path: none
    }

    .inner-hero__grid>div:first-child {
        padding-right: 0
    }

    .page-content {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .page-sidebar>div:first-child {
        position: static
    }

    .related__grid,.locations__grid {
        grid-template-columns: 1fr 1fr
    }

    .contact-page {
        background: var(--paper)
    }

    .contact-page__grid {
        grid-template-columns: 1fr
    }

    .request--page {
        padding: 55px;
        color: #fff;
        background: var(--coal)
    }

    .blog-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width: 760px) {
    .inner-hero__grid>div:first-child {
        padding:50px 0
    }

    .inner-hero h1,.inner-title h1,.contact-page h1,.article h1 {
        font-size: 50px
    }

    .inner-hero__art {
        min-height: 250px
    }

    .page-content {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .page-content h2,.related h2,.locations h2 {
        font-size: 35px
    }

    .related__grid,.locations__grid {
        grid-template-columns: 1fr
    }

    .area-card {
        width: 230px;
        height: 230px;
        margin: 15px auto 45px
    }

    .area-card strong {
        font-size: 38px
    }

    .request--page {
        padding: 45px 20px;
        margin-inline:-15px}

    .contact-page__info {
        padding: 50px 0
    }

    .blog-grid {
        padding-top: 45px
    }

    .blog-grid article img {
        height: 210px
    }

    .article>.eyebrow {
        margin-top: 40px
    }

    .article__body section {
        grid-template-columns: 40px 1fr
    }

    .inner-title {
        padding: 55px 0
    }
}

/* Navigation dropdown */
.nav-dropdown {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center
}

.nav-dropdown__toggle {
    background: transparent;
    border: 0;
    color: #fff;
    text-transform: uppercase;
    font: 700 12px var(--body);
    letter-spacing: .09em;
    cursor: pointer;
    padding: 20px 0;
    display: flex;
    gap: 8px;
    align-items: center
}

.nav-dropdown__toggle span {
    color: var(--orange);
    font-size: 17px;
    line-height: 0;
    transition: transform .2s
}

.nav-dropdown__menu {
    position: absolute;
    left: -20px;
    top: 100%;
    width: 285px;
    background: var(--coal);
    border-top: 3px solid var(--orange);
    padding: 10px;
    box-shadow: 0 18px 35px rgba(0,0,0,.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .2s;
    z-index: 30
}

.nav-dropdown__menu a {
    display: flex!important;
    flex-direction: column;
    padding: 14px 15px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    font-family: var(--display);
    font-size: 18px!important
}

.nav-dropdown__menu a:last-child {
    border-bottom: 0
}

.nav-dropdown__menu small {
    color: var(--orange);
    font: 700 9px var(--body);
    letter-spacing: .14em;
    margin-bottom: 2px
}

.nav-dropdown:hover .nav-dropdown__menu,.nav-dropdown:focus-within .nav-dropdown__menu,.nav-dropdown.open .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: none
}

.nav-dropdown.open .nav-dropdown__toggle span {
    transform: rotate(45deg)
}

@media(max-width: 1000px) {
    .nav-dropdown {
        width:100%;
        display: block
    }

    .nav-dropdown__toggle {
        width: 100%;
        justify-content: space-between;
        padding: 0;
        color: #fff
    }

    .nav-dropdown__menu {
        position: static;
        width: 100%;
        box-shadow: none;
        border-top: 0;
        border-left: 2px solid var(--orange);
        padding: 0 0 0 10px;
        margin-top: 10px;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none
    }

    .nav-dropdown.open .nav-dropdown__menu {
        display: block
    }

    .nav-dropdown__menu a {
        padding: 10px!important;
        font-size: 16px!important
    }
}

/* Free estimate slide-out */
.estimate-drawer {
    position: fixed;
    inset: 0;
    z-index: 80;
    visibility: hidden;
    pointer-events: none
}

.estimate-drawer.open {
    visibility: visible;
    pointer-events: auto
}

.estimate-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16,23,24,.62);
    opacity: 0;
    transition: opacity .3s
}

.estimate-drawer.open .estimate-drawer__backdrop {
    opacity: 1
}

.estimate-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(460px,100%);
    background: var(--coal);
    color: #fff;
    border-left: 3px solid var(--orange);
    padding: 52px 44px;
    overflow-y: auto;
    transform: translateX(102%);
    transition: transform .38s cubic-bezier(.22,.61,.21,1)
}

.estimate-drawer.open .estimate-drawer__panel {
    transform: none
}

.estimate-drawer__panel h2 {
    font: 800 44px/.95 var(--display);
    text-transform: uppercase;
    margin: 0 0 12px
}

.estimate-drawer__copy {
    color: #aeb4b3;
    font-size: 14px;
    margin: 0 0 22px
}

.estimate-drawer__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: .2s
}

.estimate-drawer__close:hover {
    background: var(--orange);
    border-color: var(--orange)
}

.estimate-drawer form {
    display: grid;
    gap: 10px
}

.estimate-drawer label span {
    position: absolute;
    left: -9999px
}

.estimate-drawer input,.estimate-drawer select,.estimate-drawer textarea {
    width: 100%;
    font: inherit;
    border: 1px solid #606768;
    background: #f3efe6;
    padding: 12px;
    color: #232928;
    border-radius: 0
}

.estimate-drawer textarea {
    resize: vertical
}

.estimate-drawer .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.estimate-drawer .button {
    width: 100%;
    margin-top: 4px
}

.estimate-drawer .form-message {
    margin-bottom: 14px
}

.estimate-drawer__honey {
    position: absolute;
    left: -9999px
}

.estimate-drawer .request__call {
    font-size: 12px;
    text-align: center;
    color: #aeb4b3;
    margin: 14px 0 0
}

.estimate-drawer .request__call a {
    color: #fff;
    font-weight: 700
}

@media(max-width: 760px) {
    .estimate-drawer__panel {
        width:100%;
        padding: 56px 22px
    }

    .estimate-drawer .form-row {
        grid-template-columns: 1fr
    }

    .estimate-drawer__panel h2 {
        font-size: 38px
    }
}

@media(prefers-reduced-motion:reduce) {
    .estimate-drawer__panel {
        transition: none
    }

    .estimate-drawer__backdrop {
        transition: none
    }
}

.lang-switch {
    display: inline-flex;
    align-items: stretch;
    width: max-content;
    border: 1px solid var(--orange);
    margin: 0 0 6px
}

.lang-switch a {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--orange);
    transition: .15s
}

.lang-switch a:hover {
    background: rgba(240,82,35,.14)
}

.lang-switch a.is-active {
    background: var(--orange);
    color: #fff
}

.lang-switch span {
    display: none
}

.lang-switch--nav {
    margin: 0 0 0 12px;
    flex-shrink: 0
}

.story__note {
    border-left: 3px solid var(--orange);
    padding-left: 20px;
    margin: -6px 0 28px;
    font-size: 13px;
    color: #4e504c;
    max-width: 570px
}

.story__note b {
    display: block;
    font: 700 17px var(--display);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink);
    margin-bottom: 3px
}

.area-map li a:hover {
    color: var(--orange)
}

/* Homepage nav variant */
.nav--black {
    background: #000
}

.nav--black .nav__links a {
    color: #fff
}

.nav--black .nav__links a:hover,.nav--black .nav__links a.active {
    color: var(--orange)
}

.nav--black .nav__toggle {
    color: #fff
}

.nav--black .nav-dropdown__toggle {
    color: #fff
}

.nav--black .nav-dropdown__toggle span {
    color: var(--orange)
}

.nav--black .nav-dropdown__menu {
    background: #000
}

.nav--black .nav-dropdown__menu a {
    color: #fff;
    border-bottom-color: rgba(255,255,255,.14)
}

.nav--black .nav-dropdown__menu a:hover {
    color: var(--orange)
}

@media(max-width: 1000px) {
    .nav--black .nav__links {
        background: #000
    }
}

.nav__links {
    gap: 24px
}

html[lang="es"] .nav__links {
    gap: 20px
}

/* Mobile menu below 1000px */
@media(min-width: 1001px) and (max-width:1240px) {
    .nav__links {
        gap:14px
    }

    html[lang="es"] .nav__links {
        gap: 8px
    }

    html[lang="es"] .nav__links a,html[lang="es"] .nav-dropdown__toggle {
        letter-spacing: 0
    }
}

/* Mobile menu below 1000px */
@media(max-width: 1000px) {
    .nav__inner {
        justify-content:space-between
    }

    .nav__toggle {
        display: flex;
        align-items: center;
        gap: 15px;
        background: transparent;
        border: 0;
        color: #fff;
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: .1em;
        padding: 17px 0
    }

    .nav__links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--coal);
        padding: 10px 20px 25px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px
    }

    .nav__links.open {
        display: flex
    }
}

@media(max-width: 760px) {
    .story__note {
        margin:0 0 24px
    }
}

/* Cooling nav items */
.nav__links .nav-dropdown__menu a[href^="/air-condition"] small,
.nav__links .nav-dropdown__menu a[href^="/air-condition"]:hover,
.nav__links .nav-dropdown__menu a[href^="/air-condition"]:hover small {
    color: #64ADB1
}

/* Areas dropdown height cap */
.nav-dropdown__menu--cities {
    max-height: calc(100vh - 130px);
    overflow-y: auto
}

/* Sidebar logo */
.page-sidebar__logo {
    display: block;
    max-width: 190px;
    width: 100%;
    margin: 0 0 18px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line)
}

/* Photo hero */
.inner-title--image{position:relative}
.inner-title--image:before{content:"";position:absolute;inset:0;background:var(--hero-img,url(/assets/img/images/servtech_heating_air_faq.webp)) center/cover no-repeat}
.inner-title--image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,23,24,.9) 0%,rgba(16,23,24,.7) 55%,rgba(16,23,24,.42) 100%)}
.inner-title--image>.wrap{position:relative;z-index:2}

/* Smooth FAQ accordion */
.faq details p{overflow:hidden;transition:height .3s ease,opacity .25s ease}
@media(prefers-reduced-motion:reduce){.faq details p{transition:none}}

@media(max-width:900px){.request__van{width:75%;right:-45px;opacity:.55}}
@media(max-width:680px){.request__van{display:none}}

/* Contact layout */
.inner-title .button{margin-top:26px}
.contact-body{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;padding-top:70px;padding-bottom:80px;align-items:start}
.contact-body .contact-page__info{padding:0}
.contact-body .request{padding:50px}
@media(max-width:900px){.contact-body{grid-template-columns:1fr;gap:40px;padding-top:50px;padding-bottom:55px}}

/* Footer social links */
.footer__social{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:14px;font:700 13px var(--display);letter-spacing:.07em;text-transform:uppercase}
.footer__social b{color:#fff;border-bottom:1px solid #394140;padding-bottom:2px}
.footer__social a{color:#969e9c;transition:color .15s}
.footer__social a:hover{color:var(--orange)}

/* Social icons */
.social-links{display:inline-flex;gap:9px;align-items:center}
.social-links a{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;transition:color .15s}
.social-links svg{width:16px;height:16px}
.social-links a:hover{color:var(--orange)}
.social-links--utility{margin:5px 0 2px;color:var(--ink)}
.social-links--footer{color:#969e9c}
.footer__social{display:flex;align-items:center;gap:16px;margin-top:14px}
.footer__social b{color:#fff;font:700 13px var(--display);letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid #394140;padding-bottom:2px}

/* Blue accent */
::selection{background:rgba(100,173,177,.4)}
.footer__grid a:hover,.social-links a:hover{color:var(--blue)}
.text-link:hover{color:var(--blue);border-bottom-color:var(--blue)}
.story__note{border-left-color:var(--blue)}
.reasons__grid span{color:var(--blue)}
.area-map i{background:var(--blue)}
.service-card>a:hover{color:var(--blue)}
.service-icon{border-color:var(--blue)}
.service-icon--heat{background:repeating-linear-gradient(90deg,transparent 0 6px,var(--blue) 6px 9px,transparent 9px 13px)}
.service-icon--calendar:before{border-top-color:var(--blue)}
.service-icon--air{box-shadow:18px 0 0 -9px var(--coal),18px 0 0 -6px var(--blue)}
.related__grid a span{color:var(--blue)}
.page-sidebar li:before{color:var(--blue)}
.article__body section>span{color:var(--blue)}
.faq summary span{color:var(--blue)}
.faq details[open] summary span{color:var(--blue)}
.request input:focus,.request select:focus,.request textarea:focus,
.estimate-drawer input:focus,.estimate-drawer select:focus,.estimate-drawer textarea:focus,
.contact-body input:focus,.contact-body select:focus,.contact-body textarea:focus{outline:2px solid var(--blue);outline-offset:-1px}
.locations__grid a:hover strong{color:var(--blue)}

/* Hero button pair */
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
.hero-actions .button{margin-top:0}
.button--call{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff}
.button--call:hover{background:var(--blue);border-color:var(--blue)}


/* Hero panel */
.hero{background:linear-gradient(100deg,#f5f0e6 0 45%,#b3c3c5 45% 100%)}
.hero__visual{background:linear-gradient(145deg,#64ADB1 0%,#4b8a8f 48%,#28484c 100%)}

/* Hero message rotation */
.hero-rotator,.lede-rotator{position:relative;display:block;transition:height .6s ease}
.hero-rotator__item{position:absolute;top:0;left:0;width:100%;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.hero-rotator__item.is-active{opacity:1;visibility:visible}

/* Areas map */
.area-map{background:#dfe4e0}
.area-map:before,.area-map:after{content:none!important}
#areas-map{position:absolute;inset:0;z-index:1;background:#dfe4e0}
.area-map__content{width:min(430px,calc(100% - 40px));background:linear-gradient(90deg,rgba(243,239,230,.97) 0%,rgba(243,239,230,.91) 82%,rgba(243,239,230,.2) 100%);padding:46px 42px}
.leaflet-container{font:12px var(--body)}
.leaflet-container img{max-width:none!important}
.leaflet-popup-content a{color:#f05223}
.area-map .leaflet-interactive{cursor:pointer}

/* Hero brand mark */
.hero__mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(320px,58%);z-index:2;opacity:.92}
.hero__visual .hero__van{width:128%;right:-138px;animation:hero-van-enter 1.15s cubic-bezier(.2,.75,.25,1) both}
@keyframes hero-van-enter{from{transform:translateX(42%);opacity:0}to{transform:translateX(0);opacity:1}}

/* Map pings */
@keyframes city-ping{0%{box-shadow:0 0 0 0 rgba(240,82,35,.55)}100%{box-shadow:0 0 0 26px rgba(240,82,35,0)}}
.city-ping{display:block;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:rgba(240,82,35,.4);animation:city-ping 1s ease-out infinite}
@keyframes city-tip-pop{0%{transform:scale(.6);opacity:0}65%{transform:scale(1.07)}100%{transform:scale(1);opacity:1}}
.area-map .leaflet-tooltip{background:#101718;color:#fff;border:0;border-radius:2px;padding:5px 11px;font:700 13px var(--display);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 4px 14px rgba(0,0,0,.3);animation:city-tip-pop .3s ease}.area-map .leaflet-tooltip.city-label{font-size:11px;padding:4px 8px;white-space:nowrap;pointer-events:none}
.area-map .leaflet-tooltip-top:before{border-top-color:#101718}
.area-map ul{column-gap:34px}
.area-map li a{display:inline-block;padding:2px 0}

/* City list ping */
@keyframes city-name-ping{0%{transform:scale(1)}50%{transform:scale(1.12);color:var(--orange)}100%{transform:scale(1)}}
.area-map a.is-pinging{animation:city-name-ping .8s ease-in-out infinite}

/* Map on mobile */
@media(max-width:760px){
  .area-map{min-height:430px}
  .area-map__content{width:calc(100% - 30px);padding:26px 22px 20px;background:linear-gradient(180deg,rgba(243,239,230,.97) 0%,rgba(243,239,230,.92) 45%,rgba(243,239,230,.55) 78%,rgba(243,239,230,.12) 100%)}
  .area-map__content h2{font-size:32px}
  .area-map ul{columns:2;column-gap:18px;padding:12px 0 0}
  .area-map li{font-size:13px;padding:4px 0}
  .area-map li a{padding:3px 0}
  .hero__mark{width:min(210px,52%)}
  .hero-actions .button{padding:14px 18px;font-size:11px}
  .hero-actions{gap:10px}
}
@media(max-width:400px){
  .area-map li{font-size:12px}
  .hero__mark{width:50%}
}

@media(max-width:900px){.hero__visual .hero__van{width:158%;right:-118px}}
@media(max-width:760px){.hero__visual .hero__van{width:128%;right:-54px}}
@media(prefers-reduced-motion:reduce){.hero__visual .hero__van{animation:none}}

/* Mobile hero spacing */
@media(max-width:900px){
  .inner-hero--areas .inner-hero__grid>div:first-child{padding-bottom:10px}
  .area-card{margin:25px auto 40px}
}
@media(max-width:760px){
  .inner-hero--areas .inner-hero__grid>div:first-child{padding:42px 0 6px}
  .area-card{width:200px;height:200px;margin:20px auto 42px}
  .area-card strong{font-size:32px}
  .inner-title{padding:52px 0}
  .inner-title h1{font-size:44px}
  .hero-actions{gap:10px}
  .hero-actions .button{padding:13px 16px;font-size:11px;letter-spacing:.06em}
  .locations{padding-top:48px;padding-bottom:60px}
}

/* Mobile city links */
@media(max-width:760px){
  .area-map li a{display:block;padding:7px 0;font-size:14px}
  .area-map li{padding:0}
}

/* Brand logos: equal cells, optically centered */
.brands__row a{display:flex;align-items:center;justify-content:center;height:74px}
.brands__row img{margin:0}
.brands__row a:hover img{filter:grayscale(0)}
.brands__row img{filter:grayscale(1);transition:filter .25s}

/* Cookie notice */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--orange);box-shadow:0 14px 34px rgba(0,0,0,.22);padding:16px 20px;max-width:680px}
.cookie-bar p{margin:0;font-size:13px;max-width:380px}
.cookie-bar p a{color:var(--orange);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cookie-bar__buttons{display:flex;gap:10px}
.button--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.button--ghost:hover{border-color:var(--ink)}
@media(max-width:760px){.cookie-bar{left:12px;right:12px;bottom:64px;flex-direction:column;align-items:flex-start;padding:14px 16px}.cookie-bar p{max-width:none}}

/* Story section photo slider */
.story-slider{position:absolute;inset:0;background:var(--coal)}
.story-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.story-slider img.is-active{opacity:1}
.story__image .photo-tag{z-index:2}
@media(prefers-reduced-motion:reduce){.story-slider img{transition:none}}

/* Service card icons (client SVGs) */
.service-icon-svg{width:42px;height:42px;object-fit:contain;margin-bottom:16px;filter:grayscale(0)}
.service-card .service-icon-svg{transition:transform .25s}
.service-card:hover .service-icon-svg{transform:translateY(-3px)}

/* Larger service icons; reasons grid without glyphs */
.service-icon-svg{width:56px;height:56px;margin-bottom:14px}
.reasons__grid article{align-items:center}

/* Footer in the site black */
footer{background:#000}

/* Designer credit */
.footer__credit{color:#777f7d;transition:color .15s}
.footer__credit:hover{color:var(--orange)}
@media(max-width:760px){.footer__bottom{gap:10px}}

/* Uniform sub-page hero height */
@media(min-width:761px){.inner-title{height:600px;display:flex;align-items:center}}
@media(max-width:760px){.inner-title{min-height:380px;display:flex;align-items:center}}

/* Cookie notice: collapsed chip state */
.cookie-bar__panel{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;max-width:680px}
.cookie-bar__panel[hidden]{display:none}
.cookie-bar__chip{position:fixed;left:16px;bottom:16px;z-index:60;width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--orange);box-shadow:0 10px 24px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}
.cookie-bar__chip:hover{transform:scale(1.08)}
.cookie-bar__chip svg{width:22px;height:22px}
@media(max-width:760px){.cookie-bar__chip{bottom:64px}}

.cookie-bar__chip[hidden]{display:none}

/* Rich city pages */
.city-lead{font-size:17px;color:#515450;max-width:720px;margin:0 0 40px;border-left:3px solid var(--orange);padding-left:20px}
.city-cta{background:var(--coal);color:#fff;padding:22px 26px;font:700 22px var(--display);text-transform:uppercase;letter-spacing:.03em;margin-top:10px}
.city-cta a{color:var(--orange)}