/* ======================================================
   EW Services LLC — alternating light sections (index.html only)
   The base template is dark-first. Adding `section-light`
   to a section wrapper flips it to a full light theme
   (off-white background, dark ink text, white cards) while
   keeping the orange accent. Loaded after css/style.css.

   Rhythm on the homepage (dark / light alternation):
   Hero ............ dark      Experience ...... light
   About .......... light      Testimonials .... light
   Founder ........ dark       FAQ ............. dark
   Services ....... light      What To Expect .. light
   Process ........ dark       Contact ......... dark
   Service Area ... light      Footer .......... light
   Credentials .... dark
====================================================== */

.section-light {
    /* remap the palette tokens for everything inside the section */
    --color-primary: #171a1c;
    --text-color-1: #565c61;
    --color-bg-1: #f4f5f5;
    --color-bg-2: #ecedee;
    --color-border: rgba(23, 26, 28, 0.12);

    background-color: #f4f5f5;
    color: #565c61;
}

/* ---- panels / cards that default to a dark fill ---- */
.section-light .services-card,
.section-light .pricing-card,
.section-light .testimonials-card,
.section-light .blog-card,
.section-light .process-bg,
.section-light .about-img-card {
    background-color: #ffffff;
    border: 1px solid rgba(23, 26, 28, 0.10);
}

.section-light .about-img-card {
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.35);
}

/* ======================================================
   About counters — keep the white card perfectly static
   while the numbers count up. Without this the card is
   shrink-to-fit, so every digit added while counting
   widens the card and shifts its edge (looks "messy").
   Reserve space up front and use fixed-width digits.
====================================================== */
#about .about-img-card {
    left: 40px;
    right: 40px;
    width: auto;
    max-width: calc(100% - 80px);
}

#about .about-img-card-content {
    width: 100%;
}

#about .about-img-card-content > div {
    flex: 1 1 0;
    min-width: 0;
}

#about .about-img-card-content h2 {
    font-variant-numeric: tabular-nums;
    min-width: 6ch;
    margin: 0;
}

@media (max-width: 991px) {
    #about .about-img-card {
        width: auto;
        min-width: 0;
    }

    #about .about-img-card-content h2 {
        min-width: 5ch;
    }
}

/* ======================================================
   About section — image handling on phones/tablets.
   The template forces .about-img to a fixed 420px height,
   which badly crops the portrait + landscape photos, and
   the stats-card overlay ends up half off-screen. Fix both:
   let each photo keep its own proportions (nothing cropped)
   and pin the stats card neatly inside the image.
====================================================== */
@media (max-width: 991px) {
    #about .about-img {
        height: auto;
        width: 100%;
        max-height: 70vh;
        object-fit: cover;
        border-radius: 8px;
        display: block;
    }

    #about .about-img-card {
        left: 30px;
        right: 30px;
        bottom: 14px;
        width: auto;
        transform: none;
        padding: 20px 18px;
    }

    #about .about-img-card-content {
        gap: 18px;
    }

    #about .about-img-card-content h2 {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    #about .about-img-card-content {
        gap: 12px;
    }

    #about .about-img-card-content h2 {
        font-size: 26px;
    }

    #about .about-img-card-content p {
        font-size: 12px;
        line-height: 1.4;
    }
}

/* ---- FAQ accordion (hard-coded white text on dark) ---- */
.section-light .accordion-item {
    background-color: #ffffff;
    border: 1px solid rgba(23, 26, 28, 0.12);
}

.section-light .accordion-button {
    background-color: #ffffff;
    color: #171a1c;
}

.section-light .accordion-button .icon {
    color: #171a1c;
}

.section-light .accordion-button:not(.collapsed),
.section-light .accordion-button:focus {
    background-color: var(--color-main);
    color: #ffffff;
}

.section-light .accordion-button:not(.collapsed) .icon {
    color: #ffffff;
}

.section-light .accordion-body {
    background-color: #ffffff;
    color: #565c61;
}

/* ---- links / arrows forced white by the base theme ---- */
.section-light .btn-3 {
    color: #171a1c;
}

.section-light .btn-3:hover {
    color: var(--color-main);
}

/* ---- Process: the inner photo band stays a dark context ---- */
.section-light .process-bg-img {
    --color-primary: #ffffff;
    --text-color-1: rgba(255, 255, 255, 0.82);
    color: rgba(255, 255, 255, 0.82);
}

.section-light .process-border {
    border-color: rgba(255, 255, 255, 0.35);
}

/* soft divider so stacked light sections still read as separate bands */
.section-light + .section-light {
    border-top: 1px solid rgba(23, 26, 28, 0.08);
}

/* ======================================================
   "A Simple, Reliable Process" — hover a step to light it up
====================================================== */
.process-item {
    transition: transform 0.35s ease;
}

.process-item h2,
.process-item .process-border,
.process-item .process-icon {
    transition: color 0.3s ease, border-color 0.3s ease, transform 0.35s ease;
}

.process-item:hover {
    transform: translateY(-8px);
}

.process-item:hover h2 {
    color: var(--color-main);
    transform: scale(1.08);
    transform-origin: left center;
}

.process-item:hover .process-border {
    border-color: var(--color-main);
}

.process-item:hover .process-icon {
    color: var(--color-main) !important;
    transform: translateY(-2px);
}

/* ======================================================
   Homepage content tweaks (EW Services LLC)
====================================================== */

/* service cards now use Font Awesome icons instead of placeholder images */
i.services-icon {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: var(--color-main);
}

/* service-area section: state list reuses the pricing-card layout */
.ew-state-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 24px;
}

.ew-state-list li {
    margin-bottom: 12px;
    break-inside: avoid;
}

.ew-state-list li i {
    margin-right: 8px;
}

/* trust / credentials strip (former client-logo row) */
.ew-credential {
    text-align: center;
    padding: 18px 10px;
}

.ew-credential .num {
    font-family: var(--font-1);
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    color: var(--color-primary);
    display: block;
    margin-bottom: 6px;
}

.ew-credential span.lbl {
    font-size: 14px;
    color: var(--text-color-1);
}

/* experience cards (former testimonials) */
.testimonials-card .ew-fact-icon {
    font-size: 26px;
    color: var(--color-main);
    margin-bottom: 14px;
    display: block;
}

/* hero headline: explicit 3 lines, clear of the floating hero image */
.ew-hero-h1 {
    max-width: 720px;
}

.ew-hero-h1 br {
    display: block;
}

@media (max-width: 991px) {
    .page-size.position-relative h1 {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .page-size.position-relative h1 {
        font-size: 34px;
    }
}

@media (max-width: 360px) {
    .page-size.position-relative h1 {
        font-size: 30px;
    }
}

/* hero paragraph: keep clear of the floating hero image */
.hero-paragraph-size {
    width: 50%;
}

@media (max-width: 991px) {
    .hero-paragraph-size {
        width: 100%;
    }
}

/* ======================================================
   Service-area US map (adapted from the source template —
   highlights EW Services LLC's 12-state coverage, NOT nationwide)
====================================================== */
.ew-map-wrap {
    margin-top: 48px;
}

.ew-map {
    max-width: 940px;
    margin: 0 auto;
}

.ew-map svg {
    width: 100%;
    height: auto;
    display: block;
}

.ew-map .state {
    fill: #d7dbde;
    stroke: #f4f5f5;
    stroke-width: 0.8;
    transition: fill 0.2s ease;
}

.ew-map .state:hover {
    fill: #c2c8cc;
}

.ew-map .state.ew-served {
    fill: var(--color-main);
}

.ew-map .state.ew-served:hover {
    fill: #000000;
}

.ew-map .state-abbr {
    fill: rgba(23, 26, 28, 0.4);
    font-size: 6px;
    font-family: var(--font-1), sans-serif;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}

.ew-map .state.ew-served + .state-abbr {
    fill: #ffffff;
}

.ew-map .state {
    cursor: pointer;
}

.ew-map__name {
    text-align: center;
    margin-top: 18px;
    min-height: 28px;
    font-family: var(--font-1);
    font-weight: 600;
    font-size: 19px;
    letter-spacing: 0.3px;
    color: var(--color-primary);
    transition: color 0.15s ease;
}

.ew-map__name.is-served {
    color: var(--color-main);
}

.ew-map__name span {
    font-weight: 400;
    font-size: 15px;
    color: var(--text-color-1);
}

.ew-map-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 16px;
    font-size: 14px;
    color: var(--text-color-1);
}

.ew-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ew-map-legend__dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #d7dbde;
    display: inline-block;
}

.ew-map-legend__dot--on {
    background: var(--color-main);
}

@media (max-width: 575px) {
    .ew-map-legend {
        font-size: 13px;
        gap: 8px 18px;
    }
}

/* ======================================================
   Testimonials — auto-sliding carousel on a dark section,
   card style matched to the source template.
   Placeholder content — fill with real client reviews.
====================================================== */
.ew-testi-slider {
    padding-bottom: 60px;
    overflow: hidden;
}

/* equal-height slides */
.ew-testi-slider .swiper-slide {
    height: auto;
}

.ew-testi-slider .swiper-wrapper {
    align-items: stretch;
}

.ew-testi {
    background-color: #ebebeb;
    padding: 40px 30px;
    border-radius: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ew-testi__stars {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    gap: 5px;
}

.ew-testi__stars li i {
    color: var(--color-main);
    font-size: 18px;
}

.ew-testi p {
    flex: 1;
    font-size: 17px;
    line-height: 1.7;
    color: #2a2a2a;
    margin: 0 0 30px;
}

.ew-testi__author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ew-testi__author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ew-testi__name {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-1);
    color: #1b1b1b;
}

.ew-testi__author span {
    font-size: 15px;
    color: #6a6a6a;
}

/* pagination bullets (match source: flat bars) */
.ew-testi-slider .swiper-pagination {
    bottom: 0;
    line-height: 1;
}

.ew-testi-slider .swiper-pagination-bullet {
    width: 30px;
    height: 4px;
    border-radius: 0;
    background-color: #4a4a4a;
    opacity: 1;
    transition: background-color 0.2s ease;
}

.ew-testi-slider .swiper-pagination-bullet-active {
    background-color: var(--color-main);
}

/* ======================================================
   One-page navigation + quote form
====================================================== */
html {
    scroll-behavior: smooth;
}

/* offset anchor targets so the sticky header doesn't cover them */
#top,
#about,
#services,
#service-area,
#projects,
#contact {
    scroll-margin-top: 90px;
}

#quoteForm {
    scroll-margin-top: 120px;
}

/* ---------- contact section: left column ----------
   Truck photo as a background with a dark gradient wash
   (restored from the original layout), text a touch larger. */
.contact-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: linear-gradient(rgba(12, 12, 12, 0.72), rgba(12, 12, 12, 0.82)),
        url('../img/contact-ew.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    padding: 56px 50px;
}

.contact-left .subtitle {
    font-size: 17px;
}

.contact-left > .d-flex > p {
    font-size: 19px;
    line-height: 1.75;
    margin-top: 22px;
}

.contact-left .d-flex.flex-column.mt-4 p {
    font-size: 17px;
    margin-bottom: 10px;
}

.contact-left .d-flex.flex-column.mt-4 p i {
    font-size: 16px;
}

@media (max-width: 991px) {
    .contact-left {
        padding: 34px 24px;
    }

    .contact-left > .d-flex > p {
        font-size: 17px;
    }
}

/* ---------- quote form: refined styling ---------- */
.contact-card {
    background-color: #202224;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 40px;
}

/* "Get a Quote" heading now sits at the top of the form card */
.contact-card__title {
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.3px;
    margin: 0 0 26px;
}

#quoteForm {
    --bs-gutter-y: 22px;
    --bs-gutter-x: 20px;
}

/* labels: small, quiet, uppercase */
.contact-card h6 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 9px;
}

.contact-card h6 .c-main {
    color: var(--color-main);
}

/* inputs / textarea */
.contact-input,
.contact-textarea {
    background-color: #17181a;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;
    padding: 13px 15px;
    color: #f2f2f2;
    font-size: 15px;
    font-family: var(--font-1);
    width: 100%;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.contact-input:focus,
.contact-textarea:focus {
    outline: none;
    border-color: var(--color-main);
    background-color: #1c1d1f;
}

.contact-input::placeholder,
.contact-textarea::placeholder {
    color: rgba(255, 255, 255, 0.26);
}

.contact-textarea {
    min-height: 110px;
    line-height: 1.6;
}

/* ======================================================
   Commodity Type — custom dropdown built from plain elements
   (adapted from the reference project's .custom-select). A
   native <select> renders inconsistently across phones; this
   looks and behaves identically on desktop and every mobile.
====================================================== */
.ew-select {
    position: relative;
    width: 100%;
    font-family: var(--font-1);
}

.ew-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 13px 15px;
    background-color: #17181a;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ew-select__trigger.is-selected {
    color: #f2f2f2;
}

.ew-select__trigger.is-open {
    border-color: var(--color-main);
    background-color: #1c1d1f;
}

.ew-select__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ew-select__arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #9a9a9a;
    transition: transform 0.2s ease;
}

.ew-select__trigger.is-open .ew-select__arrow {
    transform: rotate(180deg);
}

.ew-select__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    z-index: 50;
    max-height: 262px;
    overflow-x: hidden;
    overflow-y: auto;
}

.ew-select__dropdown.is-open {
    display: block;
}

.ew-select__option {
    padding: 13px 16px;
    font-size: 16px;
    line-height: 1.35;
    color: #17181a;
    cursor: pointer;
    border-bottom: 1px solid #ededed;
    transition: background-color 0.12s ease;
}

.ew-select__option:last-child {
    border-bottom: none;
}

.ew-select__option:hover,
.ew-select__option.is-active {
    background-color: #f3f4f2;
}

.ew-select__option.is-active {
    color: var(--color-main);
    font-weight: 600;
}

/* date fields */
.contact-input[type="date"] {
    color-scheme: dark;
    font-size: 16px;
}

.contact-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.65);
    cursor: pointer;
}

/* submit button + helper line */
.contact-card form > .d-flex.w-100.mt-4 {
    margin-top: 30px !important;
}

.contact-card .btn-2 {
    padding: 15px 20px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .contact-card {
        padding: 26px 22px;
    }

    #quoteForm {
        --bs-gutter-y: 18px;
    }
}

/* ======================================================
   Equal-height cards + hover interaction (site-wide)
====================================================== */

/* flatten the services staircase so the 4 cards line up */
.services-item:nth-child(2),
.services-item:nth-child(3) {
    margin-top: 0;
}

/* every card fills its equal-height column */
.services-card,
.pricing-card,
.testimonials-card {
    height: 100%;
}

.blog-col-1,
.blog-col-2,
.blog-col-3 {
    display: flex;
    flex-direction: column;
}

.blog-col-1 .blog-card,
.blog-col-2 .blog-card,
.blog-col-3 .blog-card {
    flex: 1;
    border: 1px solid rgba(23, 26, 28, 0.10);
    border-top: none;
}

/* hover: lift + orange edge */
.services-card,
.pricing-card,
.testimonials-card,
.ew-testi,
.blog-col-1,
.blog-col-2,
.blog-col-3 {
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.services-card:hover,
.pricing-card:hover,
.testimonials-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-main);
    box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.45);
}

.ew-testi {
    border: 2px solid transparent;
}

.ew-testi:hover {
    transform: translateY(-6px);
    border-color: var(--color-main);
}

.blog-col-1:hover,
.blog-col-2:hover,
.blog-col-3:hover {
    transform: translateY(-8px);
}

.blog-col-1:hover .blog-card,
.blog-col-2:hover .blog-card,
.blog-col-3:hover .blog-card {
    border-color: var(--color-main);
}

/* FAQ: align both accordion columns (drop the stagger) */
.faqs-accordion:nth-child(2) {
    margin-top: var(--bs-gutter-y) !important;
}

.faqs-accordion .accordion:last-child {
    margin-bottom: 0;
}

/* ======================================================
   Hero typewriter word
====================================================== */
.ew-typed {
    color: var(--color-main);
    white-space: nowrap;
}

.ew-typed::after {
    content: "";
    display: inline-block;
    width: 3px;
    height: 0.85em;
    margin-left: 4px;
    background: var(--color-main);
    vertical-align: baseline;
    animation: ew-caret 0.9s steps(1) infinite;
}

@keyframes ew-caret {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ======================================================
   Animated counters section
====================================================== */
.ew-counter {
    text-align: center;
    padding: 22px 10px;
}

.ew-counter__icon {
    font-size: 30px;
    color: var(--color-main);
    margin-bottom: 14px;
    display: block;
}

.ew-counter__num {
    font-family: var(--font-1);
    font-weight: 700;
    font-size: 46px;
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.ew-counter__lbl {
    font-size: 15px;
    color: var(--text-color-1);
}

@media (max-width: 575px) {
    .ew-counter__num {
        font-size: 36px;
    }
}

/* ======================================================
   Back-to-top button with scroll-progress ring
====================================================== */
.ew-scrolltop {
    position: fixed;
    right: 26px;
    bottom: 26px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-bg-2);
    color: var(--color-primary);
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.ew-scrolltop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ew-scrolltop:hover {
    background: var(--color-main);
    color: #fff;
}

.ew-scrolltop svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ew-scrolltop__track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 3;
}

.ew-scrolltop__bar {
    fill: none;
    stroke: var(--color-main);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 138.2;
    stroke-dashoffset: 138.2;
    transition: stroke-dashoffset 0.1s linear;
}

.ew-scrolltop i {
    position: relative;
    z-index: 1;
    font-size: 16px;
}

@media (max-width: 575px) {
    .ew-scrolltop {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }
}

/* ======================================================
   Layout: keep the fixed 1300px .page-size from overflowing
   the viewport on laptops (993px–1340px). Mirrors the
   template's own <=992px treatment, just a wider range, and
   scales the (very large) headings down to match the width.
====================================================== */
@media (max-width: 1340px) {
    .page-size {
        width: 100%;
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (min-width: 993px) and (max-width: 1340px) {
    h1 {
        font-size: 60px;
    }

    h2 {
        font-size: 44px;
    }

    h3 {
        font-size: 34px;
    }
}

/* ======================================================
   Hero image slider
====================================================== */
.hero-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.6);
}

.hero-slider img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1s ease, transform 6s ease;
}

.hero-slider img.is-active {
    opacity: 1;
    transform: scale(1);
}

/* desktop (>=992px, matching .page-size): the slider floats to the
   right, the headline column stays clear of it, and the offer row
   drops below the slider */
@media (min-width: 992px) {
    .hero-slider {
        position: absolute;
        top: 188px;
        right: 0;
        width: 47%;
        max-width: 620px;
        margin-top: 0;
    }

    /* keep the (long) headline words clear of the bigger slider */
    .ew-hero-h1 {
        max-width: 50%;
        font-size: 66px;
        line-height: 1.06;
    }

    .hero-paragraph-size {
        max-width: 46%;
    }

    .hero-offers {
        margin-top: 200px;
    }
}

/* laptop band: slightly smaller slider so it clears the offer row + keeps a gutter */
@media (min-width: 992px) and (max-width: 1340px) {
    .hero-slider {
        top: 168px;
        right: 32px;
        width: 45%;
        max-width: 560px;
    }

    .ew-hero-h1 {
        font-size: 56px;
        max-width: 48%;
    }

    .hero-offers {
        margin-top: 130px;
    }
}

/* ======================================================
   Hero offer cards — CSS grid so all cards are exactly the
   same height (desktop AND mobile), with aligned content.
====================================================== */
.hero-offers {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;          /* every stacked card === tallest card */
    gap: 48px 26px;
}

@media (min-width: 768px) {
    .hero-offers {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* spacing below the hero content — desktop (>=992px) is handled in the
   hero-slider block above (the slider floats, so cards need a big drop) */
@media (max-width: 767px) {
    .hero-offers {
        margin-top: 48px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hero-offers {
        margin-top: 56px;
    }
}

.hero-offers > .offer-item {
    margin: 0 !important;
    padding: 0;
    max-width: none;
    width: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease;
}

.hero-offers > .offer-item:hover {
    transform: translateY(-8px);
}

.hero-offers .offer-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    flex-shrink: 0;
    transition: filter 0.3s ease;
}

.hero-offers .offer-item:hover .offer-img {
    filter: brightness(1.06);
}

/* title row: consistent height (2 lines of h3) so every paragraph
   starts at the same point across the three cards */
.hero-offers .offer-item > .d-flex {
    margin: 22px 0 12px;
    align-items: flex-start;
    flex-shrink: 0;
    min-height: calc(2 * 25px * 1.2);
}

.hero-offers .offer-item h3 {
    font-size: 25px;
    line-height: 1.2;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* hover a card → its heading turns orange and lifts slightly */
.hero-offers .offer-item:hover h3 {
    color: var(--color-main);
    transform: translateY(-4px);
}

@media (max-width: 400px) {
    .hero-offers .offer-item h3 {
        font-size: 23px;
    }

    .hero-offers .offer-item > .d-flex {
        min-height: calc(2 * 23px * 1.2);
    }
}

/* paragraph fills the remaining space so every card bottom lines up */
.hero-offers .offer-item > p {
    margin: 0;
    flex: 1 1 auto;
}

@media (max-width: 991px) {
    .hero-offers {
        gap: 44px;
    }
}

/* the round arrow button (was turning "wheat" on hover) */
.btn-circle-2 {
    flex-shrink: 0;
    background-color: var(--color-main);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(234, 92, 42, 0.6);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-circle-2:hover {
    background-color: #fff !important;
    color: #000000;
    transform: scale(1.08);
    box-shadow: 0 12px 26px -8px rgba(0, 0, 0, 0.75);
}

.btn-circle-2 i {
    transition: transform 0.3s ease;
}

.btn-circle-2:hover i {
    transform: translateX(3px);
}


/* ======================================================
   "What We Do" service cards — CSS grid, every card exactly
   the same height on every screen size.
====================================================== */
.services-row {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 24px;
    margin-top: 50px;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

@media (min-width: 576px) {
    .services-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .services-row {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
}

.services-row > .services-item {
    margin: 0 !important;
    padding: 0;
    max-width: none;
    width: auto;
}

.services-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 34px 30px;
}

.services-card .services-icon {
    margin-bottom: 28px;
}

.services-card h4 {
    margin: 0 0 14px;
}

.services-card p {
    flex: 1 1 auto;
    margin-bottom: 24px;
}

.services-card .btn-3 {
    align-self: flex-start;
    margin-top: auto;
}

@media (max-width: 991px) {
    .services-row {
        margin-top: 0;
    }
}


/* ======================================================
   Quote form fields on phones — bump to 16px (stops iOS
   auto-zoom) and give a comfortable tap height.
====================================================== */
@media (max-width: 767px) {

    .contact-input,
    .contact-textarea {
        font-size: 16px;
        padding: 14px 15px;
    }

    .ew-select__trigger {
        min-height: 52px;
    }

    .ew-select__option {
        padding: 15px 16px;
    }

    .contact-input[type="date"] {
        min-height: 52px;
    }
}

/* Footer mobile layout lives in css/footer.css (loaded after this file). */