/*
 * Sullivan Cleaning Services: plain-CSS rebuild of the WordPress (Clengo theme +
 * Elementor + Revolution Slider) home page. Sizes, colors and spacing were
 * measured on the live site (desktop 1440px, tablet 820px, phone 390px).
 *
 * Breakpoints: desktop > 1024px, tablet 768-1024px, phone <= 767px.
 * The hero slider has its own four levels (see "Hero slider").
 */

:root {
    --green: #90c73e;
    --blue: #40c5f2;
    --hotline: #33b8e5;
    --text: #646464;
    --heading: #282828;
    --title: #414141;
    --tint: #f4f9eb;
    --gutter: 0px;
    --col: 10px;     /* side padding of text columns */
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: #fff;
    color: var(--text);
    font: 400 16px/24px Poppins, sans-serif;
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }

a { color: var(--green); text-decoration: none; }

p { margin: 0; }

h2, h5 { margin: 0; }

.heading {
    color: var(--heading);
    font: 600 30px/40px Poppins, sans-serif;
}

.heading span { color: var(--green); }

.container {
    max-width: calc(1140px + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ---------- Header (over the slider) ---------- */

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

.hdr-top,
.hdr-main { background: rgba(0, 0, 0, .3); }

.hdr-top { height: 75px; }
.hdr-main { height: 92px; }

.hdr-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1170px;
    height: 100%;
    margin: 0 auto;
}

.hdr-top a { color: #fff; }

.hdr-social { display: flex; align-items: center; padding-left: 3px; }

.social-link {
    display: inline-flex;
    margin-right: 15px;
    color: #fff;
    transition: color .2s;
}

.social-link svg { height: 14px; width: auto; }
.social-link:hover { color: var(--green); }

.hdr-info {
    display: flex;
    align-items: center;
    gap: 26px;
    padding-right: 4px;
    font-size: 14px;
    line-height: 21px;
}

.hdr-location { display: flex; align-items: flex-start; }

.hdr-icon { display: inline-flex; color: var(--green); }
.hdr-icon svg { width: auto; }
.hdr-icon--marker { margin: 0 10px 0 0; }
.hdr-icon--marker svg { height: 24px; }
.hdr-icon--phone { margin: 4px 10px 0 0; }
.hdr-icon--phone svg { height: 21px; }

.hdr-phones { display: flex; align-items: flex-start; }
.hdr-phones-text { text-align: right; }

.hdr-top a:hover { color: var(--green); }

.logo { display: block; line-height: 0; }
.logo img { height: 85px; width: auto; }

.menu { list-style: none; margin: 0; padding: 0; }

.main-nav .menu { display: flex; }

.main-nav li { padding: 0 23px; }
.main-nav li:last-child { padding-right: 0; }

.main-nav a {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 92px;
    transition: color .2s;
}

.menu span { position: relative; }

.menu span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform .2s;
}

.menu .is-current a,
.menu a:hover { color: var(--green); }

.menu .is-current span::after,
.menu a:hover span::after { transform: scaleX(1); }

.nav-toggle {
    display: none;
    position: relative;
    width: 40px;
    height: 72px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.nav-toggle span {
    position: absolute;
    left: 8px;
    width: 25px;
    height: 2px;
    background: #fff;
    transition: transform .2s, opacity .2s;
}

.nav-toggle span:nth-child(1) { top: 28px; }
.nav-toggle span:nth-child(2) { top: 35px; }
.nav-toggle span:nth-child(3) { top: 42px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
    background: var(--tint);
    padding: 20px 22px;
}

.mobile-menu[hidden] { display: none; }

.mobile-menu a {
    display: block;
    padding: 10px 0;
    color: var(--heading);
}

/* ---------- Hero slider ----------
 * The old Revolution Slider laid each text out on a fixed grid per screen
 * size, scaled down (never up) to the slider's width. Same here: --u is one
 * grid pixel, --gl the grid's left edge, and every layer carries its
 * per-level grid values inline (--x0..3, --y0..3, ...; see index.php).
 * Levels: > 1024px grid 1370x906, 779-1024 1024x775, 481-778 760x640,
 * <= 480 420x520 (the old slider's own breakpoints).
 */

.hero {
    position: relative;
    container-type: inline-size;
    background: #a8a8a8;
    overflow: hidden;
}

.hero-stage {
    --gw: 1370;
    --gh: 906;
    --u: min(1px, calc(100cqw / var(--gw)));
    --gl: calc((100cqw - var(--gw) * var(--u)) / 2);
    position: relative;
    /* --band: extra photo at the bottom on tablets and phones, where the tabs
     * would otherwise sit on the white box (see "Tabs on tablets and phones"). */
    height: calc(var(--gh) * var(--u) + var(--band, 0px));
    overflow: hidden;
    touch-action: pan-y;
}

/* Crossfade as the old slider did it (timings measured on the live site): the
 * new photo fades in over 0.6 s on top of the old one, which stays fully
 * visible underneath (so the gray background never shows through), while the
 * texts swap with a quick 0.3 s fade. main.js keeps the previous slide as
 * .is-leaving until the fade is over. */
.slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    visibility: hidden;
}

.slide.is-leaving { z-index: 2; visibility: visible; }
.slide.is-active { z-index: 3; visibility: visible; }

.slide .slide-bg {
    opacity: 0;
    transition: opacity .6s cubic-bezier(.645, .045, .355, 1);
}

.slide.is-active .slide-bg,
.slide.is-leaving .slide-bg { opacity: 1; }

.slide .ly {
    opacity: 0;
    transition: opacity .3s cubic-bezier(.77, 0, .175, 1);
}

.slide.is-active .ly { opacity: 1; }

.slide-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.ly {
    --x: var(--x0);
    --y: var(--y0);
    --fs: var(--fs0);
    --lh: var(--lh0);
    --w: var(--w0);
    --h: var(--h0);
    --c: var(--c0);
    position: absolute;
    z-index: 5;
    margin: 0;
    left: calc(var(--gl) + var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: var(--w, auto);
    height: var(--h, auto);
    color: var(--c, #fff);
    font-family: Poppins, sans-serif;
    font-size: calc(var(--fs) * var(--u));
    line-height: calc(var(--lh) * var(--u));
}

.ly-center {
    left: calc(50% + var(--x) * var(--u));
    transform: translateX(-50%);
}

.ly-small { white-space: nowrap; }
.ly-title { font-weight: 700; }

.ly-arrows {
    color: #000;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    white-space: nowrap;
}

.ly-shape {
    z-index: 16;
    background: rgba(255, 255, 255, .7);
}

.ly-headline {
    z-index: 17;
    color: #000;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.ly-static-arrows {
    z-index: 18;
    color: #000;
    font-family: "Open Sans", sans-serif;
    white-space: nowrap;
}

/* The button keeps its size on every screen (only its position scales). */
.ly-btn {
    z-index: 19;
    padding: 10px 30px;
    border-radius: 3px;
    background: var(--green);
    box-shadow: 1px 2px 5px rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    transition: transform .2s;
}

.ly-btn:hover { transform: translateX(-50%) scale(1.1); }

/* All 4 tabs show at once on every screen. On desktops they keep the old
 * slider's size and place; to make room, the Hotline box beside them is
 * narrower from 1270px, and below that it becomes a bar under them (see
 * "Hotline box"). Tablets and phones: see "Tabs on tablets and phones". */
.hero-tabs {
    position: absolute;
    z-index: 20;
    left: calc(var(--gl) + 105px);
    bottom: 50px;
    width: 780px;
    overflow: hidden;
}

/* Speed and easing fitted to the old slider's strip movement. */
.hero-tabs-track {
    display: flex;
    transition: transform .4s cubic-bezier(.7, 0, .4, 1);
}

.hero-tab {
    position: relative;
    flex: 0 0 195px;
    height: 30px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: 400 14px/25px Poppins, sans-serif;
    text-align: left;
    cursor: pointer;
}

.hero-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(255, 255, 255, .4);
    transition: background .3s;
}

.hero-tab.is-active::after,
.hero-tab:hover::after { background: #fff; }

@media (max-width: 1024px) {
    .hero-stage { --gw: 1024; --gh: 775; }
    .ly { --x: var(--x1); --y: var(--y1); --fs: var(--fs1); --lh: var(--lh1); --w: var(--w1); --h: var(--h1); --c: var(--c1); }
}

@media (max-width: 778px) {
    .hero-stage { --gw: 760; --gh: 640; }
    .ly { --x: var(--x2); --y: var(--y2); --fs: var(--fs2); --lh: var(--lh2); --w: var(--w2); --h: var(--h2); --c: var(--c2); }
    .ly-headline { white-space: normal; }
    .ly-btn { font-size: 22px; }
}

@media (max-width: 480px) {
    .hero-stage { --gw: 420; --gh: 520; }
    .ly { --x: var(--x3); --y: var(--y3); --fs: var(--fs3); --lh: var(--lh3); --w: var(--w3); --h: var(--h3); --c: var(--c3); }
    .ly-btn {
        width: 327px;
        max-width: calc(100% - 20px);
        font-size: 16px;
        line-height: 21px;
        white-space: normal;
    }
}

/* ---------- Tabs on tablets and phones ----------
 * The old slider hid its tabs below 1024px. Here they stay: one row of 4
 * across the content width down to 720px (each label needs ~160px), then a
 * 2x2 grid. The photo gets a
 * band of extra height at the bottom (--band) so the tabs clear the white
 * "Give Your Business…" box; the Hotline box sits under them. These use the
 * page width without the scrollbar (container queries), like the Hotline
 * rules, so both always switch together. */
@container (max-width: 1024px) {
    .hero-stage { --band: 30px; }

    .hero-tabs {
        left: 40px;
        right: 40px;
        width: auto;
    }

    .hero-tabs-track {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hero-tab {
        overflow: hidden;
        white-space: nowrap;
    }
}

@media (max-width: 778px) {
    .hero-stage { --band: 45px; }
}

@container (max-width: 719px) {
    .hero-stage { --band: 80px; }

    .hero-tabs {
        left: 20px;
        right: 20px;
        bottom: 40px;
    }

    .hero-tabs-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 359px) {
    .hero-tabs { left: 15px; right: 15px; }
    .hero-tab { font-size: 12px; }
}

/* ---------- Hotline box ---------- */

.hotline-strip {
    container-type: inline-size;
    padding: 10px 0;
}

.hotline-row { display: flex; }

.hotline-blank {
    flex: 0 0 33.3333%;
    height: 66px;
    background: #fafafb;
}

.hotline-blank--2 { flex-grow: 1; }

/* From 1270px wide it's narrower than its old column (360px), so the 4th
 * slider tab fits to its left with a 20px gap: 340px from 1370px wide,
 * shrinking with the screen down to 290px (what "Get Information:" and the
 * phone number need). Narrower, it sits below the tabs instead (next blocks). */
.hotline {
    position: relative;
    z-index: 3;
    flex: 0 0 calc(33.3333% - 20px);
    margin: -112px 10px 10px;
    padding: 25px 30px 30px;
    background: var(--hotline);
    color: #fff;
}

@container (min-width: 1270px) {
    .hotline { flex-basis: clamp(290px, calc(50cqw - 345px), 340px); }
}

/* 660-1269px: one row (Hotline, Get Information:, phone), just as wide as
 * its content and on the right as in the wider layout; the gray boxes fill
 * the rest (and give way when there's no room). It still overlaps the
 * slider's bottom edge, but only by 20px, 30px below the tabs; the strip
 * keeps its height, so nothing below moves. */
@container (min-width: 660px) and (max-width: 1269px) {
    .hotline-blank--1 { flex: 0 1 33.3333%; min-width: 0; }
    .hotline-blank--2 { flex: 1 1 0; min-width: 0; }

    .hotline {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        margin-top: -30px;
        padding: 20px 30px;
    }

    /* Same text baseline for all three: the phone line is exactly as tall as
     * its round icon, and the smaller "Hotline" moves down to match. */
    .hotline .hotline-kicker {
        position: relative;
        top: 3px;
        margin-right: 12px;
    }
    .hotline .hotline-title { margin: 0 40px 0 0; }
    .hotline .hotline-phone { display: flex; align-items: center; }
}

/* Narrow tablets: no room left for the gray boxes beside the bar. */
@container (min-width: 660px) and (max-width: 759px) {
    .hotline-blank { display: none; }
}

/* Under 660px the one-row bar doesn't fit: the stacked box across the
 * content width, also 20px over the slider's bottom edge, below the tabs. */
@container (max-width: 659px) {
    .hotline-blank { display: none; }

    .hotline {
        flex: 1 1 100%;
        margin: -30px 0 0;
    }
}

.hotline-title {
    margin-bottom: 13px;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
}

.hotline-phone {
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
}

.hotline-phone a {
    display: inline-flex;
    align-items: center;
    color: #fff;
}

.hotline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-right: 10px;
    border: 1px solid #fff;
    border-radius: 50%;
}

.hotline-icon svg { width: 18px; height: 18px; }

/* ---------- Our values ---------- */

.values-intro { padding: 11px 0 22px; }

.narrow-center {
    max-width: calc(546px + 2 * var(--col));
    padding: 0 var(--col);
    text-align: center;
}

.values-intro .heading { margin-bottom: 25px; }

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 30px;
    align-items: start;
    padding-top: 15px;
    padding-bottom: 55px;
}

.value-col { padding: 0 15px; }

.value-box {
    padding: 45px 60px 43px;
    background: #fff;
    box-shadow: -2px 0 21px rgba(0, 0, 0, .06);
    text-align: center;
}

.value-box img {
    display: block;
    width: 53px;
    margin: 0 auto 13px;
}

.value-box h5,
.service-item h5 {
    margin-bottom: 5px;
    color: var(--title);
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
}

/* ---------- Call-to-action buttons ---------- */

.cta {
    padding: 10px 10px 50px;
    text-align: center;
}

.cta--after-about { padding-top: 30px; }
.cta--after-services { padding: 30px 10px; }

.cta-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 3px;
    background: var(--green);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    line-height: 28px;
    transition: transform .3s;
}

.cta-btn:hover { transform: scale(1.1); }

/* ---------- About ---------- */

.about {
    padding: 10px 0;
    background: var(--tint);
}

.about-row {
    display: flex;
    align-items: center;
}

.about-media,
.about-text {
    flex: 0 0 50%;
    padding: 0 var(--col);
}

.about-text { padding-bottom: 40px; }

.about-images {
    position: relative;
    height: 603px;
    margin: 70px 0;
}

.about-img {
    position: absolute;
    box-shadow: 0 0 18px rgba(0, 0, 0, .18);
}

.about-img--back { top: 69px; left: 0; width: 400px; }
.about-img--front { top: 0; left: 174px; width: 306px; z-index: 1; }

.about-text .heading { margin-bottom: 29px; }

.about-lead {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 30px;
}

.about-body {
    margin-bottom: 44px;
    line-height: 27px;
}

.counters {
    display: flex;
    margin-bottom: 47px;
}

.counter-item { flex: 0 0 33.3333%; }

.counter {
    padding-bottom: 9px;
    color: var(--blue);
    font-size: 44px;
    font-weight: 600;
    line-height: 30.8px;
}

.counter-item p {
    color: var(--heading);
    font-weight: 600;
}

.btn-outline {
    display: inline-block;
    padding: 10px 29px;
    border: 1px solid var(--green);
    background: var(--green);
    color: #fff;
    transition: background .2s, color .2s;
}

.btn-outline:hover {
    background: transparent;
    color: var(--green);
}

/* ---------- Services ---------- */

.services-row { display: flex; }

.services-text {
    flex: 0 0 50%;
    padding: 30px var(--col) 0;
}

.services-text .heading { margin-bottom: 25px; }

.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 45px;
    margin-top: 37px;
}

.service-item img {
    display: block;
    width: 48px;
    margin-bottom: 12px;
}

.services-media {
    flex: 0 0 50%;
    align-self: flex-end;
    padding-top: 114px;
}

.services-media img {
    display: block;
    width: 100%;
    max-width: 570px;
}

/* ---------- Free quote ---------- */

.quote-row { display: flex; }

.quote-media {
    display: flex;
    flex: 0 0 50%;
    align-items: flex-end;
    padding: 0 var(--col);
}

.quote-media img { display: block; width: 100%; }

.quote-form-col {
    flex: 0 0 50%;
    padding: 127px var(--col) 40px;
}

.quote-form-col .heading {
    max-width: 535px;
    margin-bottom: 24px;
}

.quote-intro {
    max-width: 462px;
    margin-bottom: 47px;
}

/* flow-root: the input's own bottom margin adds to the field's (as on the old site). */
.form-field { display: flow-root; margin-bottom: 18px; }

.form-field > label:not(.radio-item) {
    display: block;
    color: var(--green);
    font-size: 20px;
    font-weight: 300;
    line-height: 20px;
}

.quote-form input[type="text"],
.quote-form input[type="email"],
.quote-form input[type="tel"],
.quote-form textarea {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0 0 20px;
    padding: 11px 60px 11px 20px;
    border: 1px solid rgba(203, 202, 202, .4);
    border-radius: 0;
    background: #fff;
    color: #a3a3a3;
    font: 400 14px/24px Poppins, sans-serif;
    transition: border-color .2s;
    -webkit-appearance: none;
    appearance: none;
}

.quote-form textarea {
    height: 150px;
    margin-bottom: 23px;
    resize: none;
}

.quote-form input:focus,
.quote-form textarea:focus {
    outline: none;
    border-color: var(--green);
}

.form-field--radios { margin-bottom: 25px; }

.radio-item {
    display: inline-block;
    margin-right: 14px;
    color: var(--text);
    cursor: pointer;
}

.radio-item input {
    margin: 0 3px 0 3px;
    accent-color: #0b63e5;
    vertical-align: -1px;
}

.form-field--area input[type="text"] { margin-bottom: 40px; }

.field-error {
    display: block;
    color: #dc3232;
    font-size: 14px;
    line-height: 20px;
}

.field-error:empty { display: none; }

.form-field > input + .field-error,
.form-field > textarea + .field-error { margin: -14px 0 0; }

.form-field.has-error input,
.form-field.has-error textarea { border-color: #dc3232; }

.form-field[data-field="turnstile"] { min-height: 65px; }

.btn-submit {
    height: 48px;
    margin-bottom: 25px;
    padding: 11px 23px;
    border: 1px solid var(--green);
    border-radius: 0;
    background: var(--green);
    color: #fff;
    font: 400 16px/23px Poppins, sans-serif;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.btn-submit:hover:not(:disabled) {
    background: #fff;
    color: var(--green);
}

.btn-submit:disabled { opacity: .7; cursor: default; }

.form-status:empty { display: none; }

.form-status {
    padding: 10px 15px;
    border: 2px solid #ffb900;
    font-size: 15px;
    line-height: 22px;
}

.form-status.is-success { border-color: var(--green); }
.form-status.is-error { border-color: #dc3232; }

/* Honeypot: off screen for people, still in the form for bots. */
.hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Contact details ---------- */

.contact { padding: 10px 0; }

.contact-row { display: flex; }

.contact-col {
    flex: 0 0 25%;
    min-width: 0;
    padding: 0 var(--col);
    overflow-wrap: anywhere;
}

.contact-col .heading { margin-bottom: 20px; }

.contact-label {
    margin-bottom: 20px;
    color: var(--heading);
    font-weight: 600;
}

.contact-social { margin-top: 20px; }

.contact-social .social-link {
    margin-top: 5px;
    color: var(--green);
}

.contact-social .social-link svg { height: 16px; }
.contact-social .social-link:hover { color: var(--heading); }

/* ---------- Footer ---------- */

.footer-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1229px;
    margin: 0 auto;
    padding: 50px 0 37px;
}

.footer-col {
    flex: 0 0 25%;
    padding: 0 30.7px;
}

.footer-col p { margin-bottom: 9px; line-height: 0; }

/* ---------- Back to top ---------- */

.back-to-top {
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--green);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top svg { width: 22px; height: 22px; }

/* ---------- Tablet ---------- */

@media (max-width: 1160px) {
    :root { --gutter: 10px; }
}

/* The old theme switched to the compact header (logo + menu button) at 1200px. */
@media (max-width: 1200px) {
    .hdr-top { height: 50px; }
    .hdr-main { height: 72px; }
    .hdr-container { padding: 0 36px 0 33px; }
    .hdr-info { padding-right: 0; }
    .logo img { height: 71px; }
    .main-nav { display: none; }
    .nav-toggle { display: block; }
}

@media (max-width: 1024px) {
    :root { --gutter: 22.5px; --col: 17.5px; }

    .values-grid { padding-bottom: 25px; }
    .value-box { padding: 45px 20px 43px; }

    .cta { padding-left: 37px; padding-right: 37px; }

    .about-row { flex-direction: column; align-items: stretch; }
    .about-media,
    .about-text { flex-basis: auto; }
    .about-images { margin-bottom: 93px; }
    .about-text { padding-bottom: 60px; }


    .quote-row { flex-direction: column; }
    .quote-media {
        justify-content: center;
        padding-top: 60px;
    }
    .quote-media picture { width: 420px; max-width: 100%; }
    .quote-form-col { padding-top: 40px; }
    .quote-form-col .heading,
    .quote-intro { max-width: none; }

    .contact-col .heading { font-size: 30px; }

    .footer-col { flex-basis: 50%; padding: 0 40px; }
}

/* ---------- Phone ---------- */

@media (max-width: 767px) {
    :root { --gutter: 17.5px; }

    .hdr-container { padding: 0 22px 0 19px; }
    .hdr-info { gap: 26px; }
    .logo img { height: 60px; }

    .values-grid { grid-template-columns: 1fr; }
    .value-col { padding: 0 20px; }
    .value-box { padding: 30px 25px; }

    .cta { padding-left: 35px; padding-right: 35px; }
    .cta-btn { width: 100%; }

    .about-images {
        height: auto;
        margin: 0 0 90px;
        padding-top: 216px;
    }
    .about-img--back {
        position: relative;
        width: 100%;
    }
    .about-img--front {
        right: 0;
        left: auto;
        width: 306px;
        max-width: 95%;
    }
    .about-text { padding-bottom: 70px; }
    .counters { flex-direction: column; margin-bottom: 40px; }
    .counter { padding-bottom: 12px; }
    .counter-item p { margin-bottom: 12px; }

    .services-row { flex-direction: column; }
    .services-grid { grid-template-columns: 1fr; }
    .services-media { padding: 80px var(--col) 0; }

    .quote-media { padding-top: 50px; }
    .quote-media picture { width: 100%; }
    .quote-form-col { padding-bottom: 60px; }

    .contact-row { flex-direction: column; }
    .contact-col { margin-bottom: 20px; }
    .contact-col .heading { margin-bottom: 20px; }

    .footer-container { padding-top: 30px; }
    .footer-col { flex-basis: 100%; padding: 0 20px; margin-bottom: 40px; }

    .back-to-top { right: 20px; bottom: 20px; }
}

/* Very narrow phones (320px): room for the 300px-wide anti-bot widget. */
@media (max-width: 359px) {
    :root { --gutter: 10px; --col: 10px; }
    .cta { padding-left: 20px; padding-right: 20px; }
}